@wire-dsl/engine 0.5.0 → 0.7.0

package/dist/index.cjs

@@ -2220,8 +2220,8 @@ var IRStyleSchema = import_zod.z.object({
 var IRNodeStyleSchema = import_zod.z.object({
   padding: import_zod.z.string().optional(),
   gap: import_zod.z.string().optional(),
-  align: import_zod.z.enum(["left", "center", "right", "justify"]).optional(),
-  justify: import_zod.z.enum(["start", "center", "end"]).optional(),
+  justify: import_zod.z.enum(["start", "center", "end", "stretch", "spaceBetween", "spaceAround"]).optional(),
+  align: import_zod.z.enum(["start", "center", "end"]).optional(),
   background: import_zod.z.string().optional()
 });
 var IRMetaSchema = import_zod.z.object({
@@ -2507,6 +2507,9 @@ ${messages}`);
     if (layoutParams.gap !== void 0) {
       style.gap = String(layoutParams.gap);
     }
+    if (layoutParams.justify !== void 0) {
+      style.justify = layoutParams.justify;
+    }
     if (layoutParams.align !== void 0) {
       style.align = layoutParams.align;
     }
@@ -2586,13 +2589,13 @@ ${messages}`);
       "Heading",
       "Text",
       "Label",
+      "Paragraph",
       "Image",
       "Card",
       "Stat",
       "Topbar",
       "Table",
       "Chart",
-      "ChartPlaceholder",
       "Textarea",
       "Select",
       "Checkbox",
@@ -2927,19 +2930,19 @@ var ICON_SIZES_BY_DENSITY = {
   comfortable: { xs: 14, sm: 16, md: 20, lg: 28, xl: 36 }
 };
 var ICON_BUTTON_SIZES_BY_DENSITY = {
-  compact: { sm: 20, md: 24, lg: 32 },
-  normal: { sm: 24, md: 32, lg: 40 },
-  comfortable: { sm: 28, md: 40, lg: 48 }
+  compact: { xs: 16, sm: 20, md: 24, lg: 32, xl: 40 },
+  normal: { xs: 20, sm: 24, md: 32, lg: 40, xl: 48 },
+  comfortable: { xs: 24, sm: 28, md: 40, lg: 48, xl: 56 }
 };
 var CONTROL_HEIGHTS_BY_DENSITY = {
-  compact: { sm: 28, md: 32, lg: 36 },
-  normal: { sm: 36, md: 40, lg: 48 },
-  comfortable: { sm: 40, md: 48, lg: 56 }
+  compact: { xs: 24, sm: 28, md: 32, lg: 36, xl: 44 },
+  normal: { xs: 28, sm: 36, md: 40, lg: 48, xl: 56 },
+  comfortable: { xs: 32, sm: 40, md: 48, lg: 56, xl: 64 }
 };
 var ACTION_CONTROL_HEIGHTS_BY_DENSITY = {
-  compact: { sm: 20, md: 24, lg: 32 },
-  normal: { sm: 24, md: 32, lg: 40 },
-  comfortable: { sm: 28, md: 40, lg: 48 }
+  compact: { xs: 24, sm: 28, md: 32, lg: 36, xl: 44 },
+  normal: { xs: 28, sm: 36, md: 40, lg: 48, xl: 56 },
+  comfortable: { xs: 32, sm: 40, md: 48, lg: 56, xl: 64 }
 };
 var CONTROL_PADDING_BY_DENSITY = {
   compact: { none: 0, xs: 4, sm: 8, md: 10, lg: 14, xl: 18 },
@@ -3153,8 +3156,9 @@ var LayoutEngine = class {
         }
       });
     } else {
-      const align = node.style.align || "justify";
-      if (align === "justify") {
+      const justify = node.style.justify || "stretch";
+      const crossAlign = node.style.align || "start";
+      if (justify === "stretch") {
         let currentX = x;
         const childWidth = this.calculateChildWidth(children.length, width, gap);
         let stackHeight = 0;
@@ -3176,43 +3180,44 @@ var LayoutEngine = class {
         });
       } else {
         const childWidths = [];
+        const childHeights = [];
         const explicitHeightFlags = [];
-        const blockButtonIndices = /* @__PURE__ */ new Set();
+        const flexIndices = /* @__PURE__ */ new Set();
         let stackHeight = 0;
         children.forEach((childRef, index) => {
           const childNode = this.nodes[childRef.ref];
-          let childWidth = this.getIntrinsicComponentWidth(childNode);
-          let childHeight = this.getComponentHeight();
           const hasExplicitHeight = childNode?.kind === "component" && !!childNode.props.height;
           const hasExplicitWidth = childNode?.kind === "component" && !!childNode.props.width;
           const isBlockButton = childNode?.kind === "component" && childNode.componentType === "Button" && !hasExplicitWidth && this.parseBooleanProp(childNode.props.block, false);
-          if (isBlockButton) {
+          const isFlexContainer = !hasExplicitWidth && childNode?.kind === "container" && !this.containerHasIntrinsicWidth(childNode);
+          let childWidth;
+          if (isBlockButton || isFlexContainer) {
             childWidth = 0;
-            blockButtonIndices.add(index);
+            flexIndices.add(index);
           } else if (hasExplicitWidth) {
             childWidth = Number(childNode.props.width);
-          }
-          if (hasExplicitHeight) {
-            childHeight = Number(childNode.props.height);
+          } else {
+            childWidth = this.getIntrinsicWidth(childNode, width);
           }
           childWidths.push(childWidth);
+          childHeights.push(this.getComponentHeight());
           explicitHeightFlags.push(hasExplicitHeight);
         });
         const totalGapWidth = gap * Math.max(0, children.length - 1);
-        if (blockButtonIndices.size > 0) {
+        if (flexIndices.size > 0) {
           const fixedWidth = childWidths.reduce((sum, w, idx) => {
-            return blockButtonIndices.has(idx) ? sum : sum + w;
+            return flexIndices.has(idx) ? sum : sum + w;
           }, 0);
           const remainingWidth = width - totalGapWidth - fixedWidth;
-          const widthPerBlock = Math.max(1, remainingWidth / blockButtonIndices.size);
-          blockButtonIndices.forEach((index) => {
-            childWidths[index] = widthPerBlock;
+          const widthPerFlex = Math.max(1, remainingWidth / flexIndices.size);
+          flexIndices.forEach((idx) => {
+            childWidths[idx] = widthPerFlex;
           });
         }
         children.forEach((childRef, index) => {
           const childNode = this.nodes[childRef.ref];
-          let childHeight = this.getComponentHeight();
           const childWidth = childWidths[index];
+          let childHeight = this.getComponentHeight();
           if (explicitHeightFlags[index] && childNode?.kind === "component") {
             childHeight = Number(childNode.props.height);
           } else if (childNode?.kind === "container") {
@@ -3220,21 +3225,37 @@ var LayoutEngine = class {
           } else if (childNode?.kind === "component") {
             childHeight = this.getIntrinsicComponentHeight(childNode, childWidth);
           }
+          childHeights[index] = childHeight;
           stackHeight = Math.max(stackHeight, childHeight);
         });
         const totalChildWidth = childWidths.reduce((sum, w) => sum + w, 0);
         const totalContentWidth = totalChildWidth + totalGapWidth;
         let startX = x;
-        if (align === "center") {
+        let dynamicGap = gap;
+        if (justify === "center") {
           startX = x + (width - totalContentWidth) / 2;
-        } else if (align === "right") {
+        } else if (justify === "end") {
           startX = x + width - totalContentWidth;
+        } else if (justify === "spaceBetween") {
+          startX = x;
+          dynamicGap = children.length > 1 ? (width - totalChildWidth) / (children.length - 1) : 0;
+        } else if (justify === "spaceAround") {
+          const spacing = children.length > 0 ? (width - totalChildWidth) / children.length : 0;
+          startX = x + spacing / 2;
+          dynamicGap = spacing;
         }
         let currentX = startX;
         children.forEach((childRef, index) => {
           const childWidth = childWidths[index];
-          this.calculateNode(childRef.ref, currentX, y, childWidth, stackHeight, "stack");
-          currentX += childWidth + gap;
+          const childHeight = childHeights[index];
+          let childY = y;
+          if (crossAlign === "center") {
+            childY = y + Math.round((stackHeight - childHeight) / 2);
+          } else if (crossAlign === "end") {
+            childY = y + stackHeight - childHeight;
+          }
+          this.calculateNode(childRef.ref, currentX, childY, childWidth, childHeight, "stack");
+          currentX += childWidth + dynamicGap;
         });
       }
     }
@@ -3594,7 +3615,7 @@ var LayoutEngine = class {
   wrapTextToLines(text, maxWidth, fontSize) {
     const normalized = text.replace(/\r\n/g, "\n");
     const paragraphs = normalized.split("\n");
-    const charWidth = fontSize * 0.6;
+    const charWidth = fontSize * 0.5;
     const safeWidth = Math.max(maxWidth, charWidth);
     const maxCharsPerLine = Math.max(1, Math.floor(safeWidth / charWidth));
     const lines = [];
@@ -3632,12 +3653,14 @@ var LayoutEngine = class {
   getIntrinsicComponentHeight(node, availableWidth) {
     if (node.kind !== "component") return this.getComponentHeight();
     const controlSize = String(node.props.size || "md");
+    const actionControlSize = String(node.props.size || "sm");
     const density = this.style.density || "normal";
     const inputControlHeight = resolveControlHeight(controlSize, density);
-    const actionControlHeight = resolveActionControlHeight(controlSize, density);
+    const actionControlHeight = resolveActionControlHeight(actionControlSize, density);
     const controlLabelOffset = node.componentType === "Input" || node.componentType === "Textarea" || node.componentType === "Select" ? this.getControlLabelOffset(String(node.props.label || "")) : (node.componentType === "Button" || node.componentType === "IconButton") && this.parseBooleanProp(node.props.labelSpace, false) ? 18 : 0;
     if (node.componentType === "Image") {
       const placeholder = String(node.props.placeholder || "landscape");
+      const isCircle = this.parseBooleanProp(node.props.circle, false);
       const aspectRatios = {
         landscape: 16 / 9,
         portrait: 2 / 3,
@@ -3645,7 +3668,7 @@ var LayoutEngine = class {
         icon: 1,
         avatar: 1
       };
-      const ratio = aspectRatios[placeholder] || 16 / 9;
+      const ratio = isCircle ? 1 : aspectRatios[placeholder] || 16 / 9;
       const explicitHeight = Number(node.props.height);
       if (!isNaN(explicitHeight) && explicitHeight > 0) {
         return explicitHeight;
@@ -3697,13 +3720,19 @@ var LayoutEngine = class {
       }
       return Math.max(1, Math.ceil(wrappedHeight + verticalPadding * 2));
     }
-    if (node.componentType === "Text") {
+    if (node.componentType === "Text" || node.componentType === "Paragraph") {
       const content = String(node.props.text || "");
-      const { fontSize, lineHeight } = this.getTextMetricsForDensity();
+      const { fontSize: defaultFontSize, lineHeight } = this.getTextMetricsForDensity();
+      const sizeProp = String(node.props.size || "");
+      const textFontSizeMap = { xs: 10, sm: 12, lg: 16, xl: 20 };
+      const fontSize = textFontSizeMap[sizeProp] ?? defaultFontSize;
       const lineHeightPx = Math.ceil(fontSize * lineHeight);
       const maxWidth = availableWidth && availableWidth > 0 ? availableWidth : 200;
       const lines = this.wrapTextToLines(content, maxWidth, fontSize);
       const wrappedHeight = Math.max(1, lines.length) * lineHeightPx;
+      if (sizeProp) {
+        return wrappedHeight;
+      }
       return Math.max(this.getComponentHeight(), wrappedHeight);
     }
     if (node.componentType === "Alert") {
@@ -3732,7 +3761,7 @@ var LayoutEngine = class {
     if (node.componentType === "Modal") return 300;
     if (node.componentType === "Card") return 120;
     if (node.componentType === "Stat") return 120;
-    if (node.componentType === "Chart" || node.componentType === "ChartPlaceholder") return 250;
+    if (node.componentType === "Chart") return 250;
     if (node.componentType === "List") {
       const itemsFromProps = String(node.props.items || "").split(",").map((item) => item.trim()).filter(Boolean);
       const parsedItemsMock = Number(node.props.itemsMock ?? 4);
@@ -3743,7 +3772,14 @@ var LayoutEngine = class {
       const contentHeight = titleHeight + itemCount * itemHeight;
       return Math.max(this.getComponentHeight(), contentHeight);
     }
-    if (node.componentType === "Topbar") return 56;
+    if (node.componentType === "Topbar") {
+      const TOPBAR_HEIGHTS = { sm: 44, md: 56, lg: 72 };
+      return TOPBAR_HEIGHTS[String(node.props.size || "md")] ?? 56;
+    }
+    if (node.componentType === "Tabs") {
+      const TABS_HEIGHTS = { sm: 32, md: 44, lg: 52 };
+      return TABS_HEIGHTS[String(node.props.size || "md")] ?? 44;
+    }
     if (node.componentType === "Divider") return 1;
     if (node.componentType === "Separate") return this.getSeparateSize(node);
     if (node.componentType === "Input" || node.componentType === "Select") {
@@ -3752,11 +3788,57 @@ var LayoutEngine = class {
     if (node.componentType === "Button" || node.componentType === "IconButton" || node.componentType === "Link") {
       return actionControlHeight + controlLabelOffset;
     }
+    if (node.componentType === "Badge" || node.componentType === "Chip") {
+      const BADGE_HEIGHTS = { xs: 28, sm: 36, md: 40, lg: 48, xl: 56 };
+      const badgeSize = String(node.props.size || "md");
+      return BADGE_HEIGHTS[badgeSize] ?? 40;
+    }
     return this.getComponentHeight();
   }
   getControlLabelOffset(label) {
     return label.trim().length > 0 ? 18 : 0;
   }
+  /**
+   * Returns true when a container's width can be calculated from its children
+   * (i.e. it is a horizontal non-stretch stack). False means the container
+   * behaves like `flex-grow:1` and should absorb remaining space.
+   */
+  containerHasIntrinsicWidth(node) {
+    if (node.kind !== "container") return false;
+    return node.containerType === "stack" && String(node.params.direction || "vertical") === "horizontal" && (node.style.justify || "stretch") !== "stretch";
+  }
+  /**
+   * Returns the natural (intrinsic) width of any node — component or container.
+   * For horizontal non-stretch containers the width is the sum of their children's
+   * intrinsic widths plus gaps, capped at `availableWidth`. All other containers
+   * are assumed to take the full available width (they stretch or grow).
+   */
+  getIntrinsicWidth(node, availableWidth) {
+    if (!node) return 120;
+    if (node.kind === "component") {
+      return this.getIntrinsicComponentWidth(node);
+    }
+    if (node.kind === "container") {
+      if (this.containerHasIntrinsicWidth(node)) {
+        const gap = this.resolveSpacing(node.style.gap);
+        const padding = this.resolveSpacing(node.style.padding);
+        const innerAvailable = Math.max(0, availableWidth - padding * 2);
+        const children = node.children ?? [];
+        let total = padding * 2;
+        children.forEach((childRef, idx) => {
+          const child = this.nodes[childRef.ref];
+          total += this.getIntrinsicWidth(child, innerAvailable);
+          if (idx < children.length - 1) total += gap;
+        });
+        return Math.min(total, availableWidth);
+      }
+      return availableWidth;
+    }
+    if (node.kind === "instance") {
+      return availableWidth;
+    }
+    return 120;
+  }
   getIntrinsicComponentWidth(node) {
     if (!node || node.kind !== "component") {
       return 120;
@@ -3766,7 +3848,7 @@ var LayoutEngine = class {
       return resolveIconSize(size, this.style.density || "normal");
     }
     if (node.componentType === "IconButton") {
-      const size = String(node.props.size || "md");
+      const size = String(node.props.size || "sm");
       const density = this.style.density || "normal";
       const baseSize = resolveIconButtonSize(size, density);
       const extraPadding = resolveControlHorizontalPadding(String(node.props.padding || "none"), density);
@@ -3824,7 +3906,13 @@ var LayoutEngine = class {
     }
     if (node.componentType === "Badge" || node.componentType === "Chip") {
       const text = String(node.props.text || "");
-      return Math.max(50, text.length * 7 + 16);
+      const size = String(node.props.size || "md");
+      const BADGE_CHAR_W = { xs: 6, sm: 6.5, md: 7, lg: 7.5, xl: 8.5 };
+      const BADGE_PAD_X = { xs: 5, sm: 6, md: 8, lg: 10, xl: 14 };
+      const customPadding = node.props.padding !== void 0 ? Number(node.props.padding) : void 0;
+      const padX = customPadding !== void 0 && !isNaN(customPadding) ? customPadding : BADGE_PAD_X[size] ?? 8;
+      const charW = BADGE_CHAR_W[size] ?? 7;
+      return Math.max(padX * 4, text.length * charW + padX * 2);
     }
     return 120;
   }
@@ -4108,34 +4196,358 @@ MockDataGenerator.HEADER_TO_MOCK = {
 var ColorResolver = class {
   constructor() {
     this.customColors = {};
-    // Named colors palette
+    // Named colors palette — Full Material Design + utility aliases
     this.namedColors = {
-      // Grayscale
+      // ── Utility ──────────────────────────────────────────────────────────────
       white: "#FFFFFF",
       black: "#000000",
-      gray: "#6B7280",
-      slate: "#64748B",
+      gray: "#9E9E9E",
+      // alias for grey 500
+      grey: "#9E9E9E",
+      slate: "#607D8B",
+      // alias for blue_grey 500
       zinc: "#71717A",
-      // Colors
-      red: "#EF4444",
-      orange: "#F97316",
-      yellow: "#EAB308",
-      lime: "#84CC16",
-      green: "#22C55E",
+      // Extra well-known non-Material names (kept for backward compat)
       emerald: "#10B981",
-      teal: "#14B8A6",
-      cyan: "#06B6D4",
-      blue: "#3B82F6",
-      indigo: "#6366F1",
       violet: "#8B5CF6",
-      purple: "#A855F7",
       fuchsia: "#D946EF",
-      pink: "#EC4899",
       rose: "#F43F5E",
-      // Light variants
-      "red-light": "#FEE2E2",
-      "blue-light": "#DBEAFE",
-      "green-light": "#DCFCE7"
+      // Light utility variants
+      "red-light": "#FFCDD2",
+      "blue-light": "#BBDEFB",
+      "green-light": "#C8E6C9",
+      // ── Red ──────────────────────────────────────────────────────────────────
+      red: "#F44336",
+      // 500
+      red_50: "#FFEBEE",
+      red_100: "#FFCDD2",
+      red_200: "#EF9A9A",
+      red_300: "#E57373",
+      red_400: "#EF5350",
+      red_500: "#F44336",
+      red_600: "#E53935",
+      red_700: "#D32F2F",
+      red_800: "#C62828",
+      red_900: "#B71C1C",
+      red_A100: "#FF8A80",
+      red_A200: "#FF5252",
+      red_A400: "#FF1744",
+      red_A700: "#D50000",
+      // ── Pink ─────────────────────────────────────────────────────────────────
+      pink: "#E91E63",
+      // 500
+      pink_50: "#FCE4EC",
+      pink_100: "#F8BBD0",
+      pink_200: "#F48FB1",
+      pink_300: "#F06292",
+      pink_400: "#EC407A",
+      pink_500: "#E91E63",
+      pink_600: "#D81B60",
+      pink_700: "#C2185B",
+      pink_800: "#AD1457",
+      pink_900: "#880E4F",
+      pink_A100: "#FF80AB",
+      pink_A200: "#FF4081",
+      pink_A400: "#F50057",
+      pink_A700: "#C51162",
+      // ── Purple ───────────────────────────────────────────────────────────────
+      purple: "#9C27B0",
+      // 500
+      purple_50: "#F3E5F5",
+      purple_100: "#E1BEE7",
+      purple_200: "#CE93D8",
+      purple_300: "#BA68C8",
+      purple_400: "#AB47BC",
+      purple_500: "#9C27B0",
+      purple_600: "#8E24AA",
+      purple_700: "#7B1FA2",
+      purple_800: "#6A1B9A",
+      purple_900: "#4A148C",
+      purple_A100: "#EA80FC",
+      purple_A200: "#E040FB",
+      purple_A400: "#D500F9",
+      purple_A700: "#AA00FF",
+      // ── Deep Purple ──────────────────────────────────────────────────────────
+      deep_purple: "#673AB7",
+      // 500
+      deep_purple_50: "#EDE7F6",
+      deep_purple_100: "#D1C4E9",
+      deep_purple_200: "#B39DDB",
+      deep_purple_300: "#9575CD",
+      deep_purple_400: "#7E57C2",
+      deep_purple_500: "#673AB7",
+      deep_purple_600: "#5E35B1",
+      deep_purple_700: "#512DA8",
+      deep_purple_800: "#4527A0",
+      deep_purple_900: "#311B92",
+      deep_purple_A100: "#B388FF",
+      deep_purple_A200: "#7C4DFF",
+      deep_purple_A400: "#651FFF",
+      deep_purple_A700: "#6200EA",
+      // ── Indigo ───────────────────────────────────────────────────────────────
+      indigo: "#3F51B5",
+      // 500
+      indigo_50: "#E8EAF6",
+      indigo_100: "#C5CAE9",
+      indigo_200: "#9FA8DA",
+      indigo_300: "#7986CB",
+      indigo_400: "#5C6BC0",
+      indigo_500: "#3F51B5",
+      indigo_600: "#3949AB",
+      indigo_700: "#303F9F",
+      indigo_800: "#283593",
+      indigo_900: "#1A237E",
+      indigo_A100: "#8C9EFF",
+      indigo_A200: "#536DFE",
+      indigo_A400: "#3D5AFE",
+      indigo_A700: "#304FFE",
+      // ── Blue ─────────────────────────────────────────────────────────────────
+      blue: "#2196F3",
+      // 500
+      blue_50: "#E3F2FD",
+      blue_100: "#BBDEFB",
+      blue_200: "#90CAF9",
+      blue_300: "#64B5F6",
+      blue_400: "#42A5F5",
+      blue_500: "#2196F3",
+      blue_600: "#1E88E5",
+      blue_700: "#1976D2",
+      blue_800: "#1565C0",
+      blue_900: "#0D47A1",
+      blue_A100: "#82B1FF",
+      blue_A200: "#448AFF",
+      blue_A400: "#2979FF",
+      blue_A700: "#2962FF",
+      // ── Light Blue ───────────────────────────────────────────────────────────
+      light_blue: "#03A9F4",
+      // 500
+      light_blue_50: "#E1F5FE",
+      light_blue_100: "#B3E5FC",
+      light_blue_200: "#81D4FA",
+      light_blue_300: "#4FC3F7",
+      light_blue_400: "#29B6F6",
+      light_blue_500: "#03A9F4",
+      light_blue_600: "#039BE5",
+      light_blue_700: "#0288D1",
+      light_blue_800: "#0277BD",
+      light_blue_900: "#01579B",
+      light_blue_A100: "#80D8FF",
+      light_blue_A200: "#40C4FF",
+      light_blue_A400: "#00B0FF",
+      light_blue_A700: "#0091EA",
+      // ── Cyan ─────────────────────────────────────────────────────────────────
+      cyan: "#00BCD4",
+      // 500
+      cyan_50: "#E0F7FA",
+      cyan_100: "#B2EBF2",
+      cyan_200: "#80DEEA",
+      cyan_300: "#4DD0E1",
+      cyan_400: "#26C6DA",
+      cyan_500: "#00BCD4",
+      cyan_600: "#00ACC1",
+      cyan_700: "#0097A7",
+      cyan_800: "#00838F",
+      cyan_900: "#006064",
+      cyan_A100: "#84FFFF",
+      cyan_A200: "#18FFFF",
+      cyan_A400: "#00E5FF",
+      cyan_A700: "#00B8D4",
+      // ── Teal ─────────────────────────────────────────────────────────────────
+      teal: "#009688",
+      // 500
+      teal_50: "#E0F2F1",
+      teal_100: "#B2DFDB",
+      teal_200: "#80CBC4",
+      teal_300: "#4DB6AC",
+      teal_400: "#26A69A",
+      teal_500: "#009688",
+      teal_600: "#00897B",
+      teal_700: "#00796B",
+      teal_800: "#00695C",
+      teal_900: "#004D40",
+      teal_A100: "#A7FFEB",
+      teal_A200: "#64FFDA",
+      teal_A400: "#1DE9B6",
+      teal_A700: "#00BFA5",
+      // ── Green ────────────────────────────────────────────────────────────────
+      green: "#4CAF50",
+      // 500
+      green_50: "#E8F5E9",
+      green_100: "#C8E6C9",
+      green_200: "#A5D6A7",
+      green_300: "#81C784",
+      green_400: "#66BB6A",
+      green_500: "#4CAF50",
+      green_600: "#43A047",
+      green_700: "#388E3C",
+      green_800: "#2E7D32",
+      green_900: "#1B5E20",
+      green_A100: "#B9F6CA",
+      green_A200: "#69F0AE",
+      green_A400: "#00E676",
+      green_A700: "#00C853",
+      // ── Light Green ──────────────────────────────────────────────────────────
+      light_green: "#8BC34A",
+      // 500
+      light_green_50: "#F1F8E9",
+      light_green_100: "#DCEDC8",
+      light_green_200: "#C5E1A5",
+      light_green_300: "#AED581",
+      light_green_400: "#9CCC65",
+      light_green_500: "#8BC34A",
+      light_green_600: "#7CB342",
+      light_green_700: "#689F38",
+      light_green_800: "#558B2F",
+      light_green_900: "#33691E",
+      light_green_A100: "#CCFF90",
+      light_green_A200: "#B2FF59",
+      light_green_A400: "#76FF03",
+      light_green_A700: "#64DD17",
+      // ── Lime ─────────────────────────────────────────────────────────────────
+      lime: "#CDDC39",
+      // 500
+      lime_50: "#F9FBE7",
+      lime_100: "#F0F4C3",
+      lime_200: "#E6EE9C",
+      lime_300: "#DCE775",
+      lime_400: "#D4E157",
+      lime_500: "#CDDC39",
+      lime_600: "#C0CA33",
+      lime_700: "#AFB42B",
+      lime_800: "#9E9D24",
+      lime_900: "#827717",
+      lime_A100: "#F4FF81",
+      lime_A200: "#EEFF41",
+      lime_A400: "#C6FF00",
+      lime_A700: "#AEEA00",
+      // ── Yellow ───────────────────────────────────────────────────────────────
+      yellow: "#FFEB3B",
+      // 500
+      yellow_50: "#FFFDE7",
+      yellow_100: "#FFF9C4",
+      yellow_200: "#FFF59D",
+      yellow_300: "#FFF176",
+      yellow_400: "#FFEE58",
+      yellow_500: "#FFEB3B",
+      yellow_600: "#FDD835",
+      yellow_700: "#F9A825",
+      yellow_800: "#F57F17",
+      yellow_900: "#F57F17",
+      yellow_A100: "#FFFF8D",
+      yellow_A200: "#FFFF00",
+      yellow_A400: "#FFEA00",
+      yellow_A700: "#FFD600",
+      // ── Amber ────────────────────────────────────────────────────────────────
+      amber: "#FFC107",
+      // 500
+      amber_50: "#FFF8E1",
+      amber_100: "#FFECB3",
+      amber_200: "#FFE082",
+      amber_300: "#FFD54F",
+      amber_400: "#FFCA28",
+      amber_500: "#FFC107",
+      amber_600: "#FFB300",
+      amber_700: "#FFA000",
+      amber_800: "#FF8F00",
+      amber_900: "#FF6F00",
+      amber_A100: "#FFE57F",
+      amber_A200: "#FFD740",
+      amber_A400: "#FFC400",
+      amber_A700: "#FFAB00",
+      // ── Orange ───────────────────────────────────────────────────────────────
+      orange: "#FF9800",
+      // 500
+      orange_50: "#FFF3E0",
+      orange_100: "#FFE0B2",
+      orange_200: "#FFCC80",
+      orange_300: "#FFB74D",
+      orange_400: "#FFA726",
+      orange_500: "#FF9800",
+      orange_600: "#FB8C00",
+      orange_700: "#F57C00",
+      orange_800: "#EF6C00",
+      orange_900: "#E65100",
+      orange_A100: "#FFD180",
+      orange_A200: "#FFAB40",
+      orange_A400: "#FF9100",
+      orange_A700: "#FF6D00",
+      // ── Deep Orange ──────────────────────────────────────────────────────────
+      deep_orange: "#FF5722",
+      // 500
+      deep_orange_50: "#FBE9E7",
+      deep_orange_100: "#FFCCBC",
+      deep_orange_200: "#FFAB91",
+      deep_orange_300: "#FF8A65",
+      deep_orange_400: "#FF7043",
+      deep_orange_500: "#FF5722",
+      deep_orange_600: "#F4511E",
+      deep_orange_700: "#E64A19",
+      deep_orange_800: "#D84315",
+      deep_orange_900: "#BF360C",
+      deep_orange_A100: "#FF9E80",
+      deep_orange_A200: "#FF6E40",
+      deep_orange_A400: "#FF3D00",
+      deep_orange_A700: "#DD2C00",
+      // ── Brown ────────────────────────────────────────────────────────────────
+      brown: "#795548",
+      // 500
+      brown_50: "#EFEBE9",
+      brown_100: "#D7CCC8",
+      brown_200: "#BCAAA4",
+      brown_300: "#A1887F",
+      brown_400: "#8D6E63",
+      brown_500: "#795548",
+      brown_600: "#6D4C41",
+      brown_700: "#5D4037",
+      brown_800: "#4E342E",
+      brown_900: "#3E2723",
+      // ── Grey ─────────────────────────────────────────────────────────────────
+      grey_50: "#FAFAFA",
+      grey_100: "#F5F5F5",
+      grey_200: "#EEEEEE",
+      grey_300: "#E0E0E0",
+      grey_400: "#BDBDBD",
+      grey_500: "#9E9E9E",
+      grey_600: "#757575",
+      grey_700: "#616161",
+      grey_800: "#424242",
+      grey_900: "#212121",
+      // aliases
+      gray_50: "#FAFAFA",
+      gray_100: "#F5F5F5",
+      gray_200: "#EEEEEE",
+      gray_300: "#E0E0E0",
+      gray_400: "#BDBDBD",
+      gray_500: "#9E9E9E",
+      gray_600: "#757575",
+      gray_700: "#616161",
+      gray_800: "#424242",
+      gray_900: "#212121",
+      // ── Blue Grey ────────────────────────────────────────────────────────────
+      blue_grey: "#607D8B",
+      // 500
+      blue_grey_50: "#ECEFF1",
+      blue_grey_100: "#CFD8DC",
+      blue_grey_200: "#B0BEC5",
+      blue_grey_300: "#90A4AE",
+      blue_grey_400: "#78909C",
+      blue_grey_500: "#607D8B",
+      blue_grey_600: "#546E7A",
+      blue_grey_700: "#455A64",
+      blue_grey_800: "#37474F",
+      blue_grey_900: "#263238",
+      // aliases
+      blue_gray: "#607D8B",
+      blue_gray_50: "#ECEFF1",
+      blue_gray_100: "#CFD8DC",
+      blue_gray_200: "#B0BEC5",
+      blue_gray_300: "#90A4AE",
+      blue_gray_400: "#78909C",
+      blue_gray_500: "#607D8B",
+      blue_gray_600: "#546E7A",
+      blue_gray_700: "#455A64",
+      blue_gray_800: "#37474F",
+      blue_gray_900: "#263238"
     };
   }
   /**
@@ -4783,7 +5195,8 @@ var SVGRenderer = class {
       if (node.containerType === "split") {
         this.renderSplitDecoration(node, pos, containerGroup);
       }
-      if (node.children.length === 0 && this.options.showDiagnostics) {
+      const isCellContainer = node.meta?.source === "cell";
+      if (node.children.length === 0 && this.options.showDiagnostics && !isCellContainer) {
         containerGroup.push(this.renderEmptyContainerDiagnostic(pos, node.containerType));
       } else {
         node.children.forEach((childRef) => {
@@ -4830,7 +5243,6 @@ var SVGRenderer = class {
       case "Table":
         return this.renderTable(node, pos);
       case "Chart":
-      case "ChartPlaceholder":
         return this.renderChartPlaceholder(node, pos);
       case "Breadcrumbs":
         return this.renderBreadcrumbs(node, pos);
@@ -4839,6 +5251,8 @@ var SVGRenderer = class {
       // Text/Content components
       case "Text":
         return this.renderText(node, pos);
+      case "Paragraph":
+        return this.renderParagraph(node, pos);
       case "Label":
         return this.renderLabel(node, pos);
       case "Code":
@@ -4918,7 +5332,7 @@ var SVGRenderer = class {
   renderButton(node, pos) {
     const text = String(node.props.text || "Button");
     const variant = String(node.props.variant || "default");
-    const size = String(node.props.size || "md");
+    const size = String(node.props.size || "sm");
     const disabled = this.parseBooleanProp(node.props.disabled, false);
     const density = this.ir.project.style.density || "normal";
     const extraPadding = resolveControlHorizontalPadding(String(node.props.padding || "none"), density);
@@ -4993,7 +5407,7 @@ var SVGRenderer = class {
   renderLink(node, pos) {
     const text = String(node.props.text || "Link");
     const variant = String(node.props.variant || "primary");
-    const size = String(node.props.size || "md");
+    const size = String(node.props.size || "sm");
     const density = this.ir.project.style.density || "normal";
     const fontSize = this.tokens.button.fontSize;
     const fontWeight = this.tokens.button.fontWeight;
@@ -5099,7 +5513,33 @@ var SVGRenderer = class {
     const variant = String(node.props.variant || "default");
     const accentColor = variant === "default" ? this.resolveAccentColor() : this.resolveVariantColor(variant, this.resolveAccentColor());
     const showBorder = this.parseBooleanProp(node.props.border, false);
-    const showBackground = this.parseBooleanProp(node.props.background, false);
+    const bgPropStr = String(node.props.background ?? "");
+    let resolvedBg = null;
+    if (bgPropStr === "true") {
+      resolvedBg = this.renderTheme.cardBg;
+    } else if (bgPropStr && bgPropStr !== "false") {
+      if (bgPropStr.startsWith("#") || bgPropStr.startsWith("rgb")) {
+        resolvedBg = bgPropStr;
+      } else if (this.colorResolver.hasColor(bgPropStr)) {
+        resolvedBg = this.colorResolver.resolveColor(bgPropStr, this.renderTheme.cardBg);
+      }
+    }
+    const showBackground = resolvedBg !== null;
+    const colorPropStr = String(node.props.color ?? "");
+    let titleColor = this.renderTheme.text;
+    let subtitleColor = this.renderTheme.textMuted;
+    if (colorPropStr && colorPropStr !== "false") {
+      let resolvedTitleColor = null;
+      if (colorPropStr.startsWith("#") || colorPropStr.startsWith("rgb")) {
+        resolvedTitleColor = colorPropStr;
+      } else if (this.colorResolver.hasColor(colorPropStr)) {
+        resolvedTitleColor = this.colorResolver.resolveColor(colorPropStr, this.renderTheme.text);
+      }
+      if (resolvedTitleColor) {
+        titleColor = resolvedTitleColor;
+        subtitleColor = this.hexToRgba(resolvedTitleColor, 0.65);
+      }
+    }
     const radiusMap = {
       none: 0,
       sm: 4,
@@ -5111,7 +5551,7 @@ var SVGRenderer = class {
     const topbar = this.calculateTopbarLayout(node, pos, title, subtitle, actions, user);
     let svg = `<g${this.getDataNodeId(node)}>`;
     if (showBorder || showBackground) {
-      const bg = showBackground ? this.renderTheme.cardBg : "none";
+      const bg = resolvedBg ?? "none";
       const stroke = showBorder ? this.renderTheme.border : "none";
       svg += `
     <rect x="${pos.x}" y="${pos.y}" 
@@ -5127,13 +5567,13 @@ var SVGRenderer = class {
           font-family="Arial, Helvetica, sans-serif" 
           font-size="18" 
           font-weight="600" 
-          fill="${this.renderTheme.text}">${this.escapeXml(topbar.visibleTitle)}</text>`;
+          fill="${titleColor}">${this.escapeXml(topbar.visibleTitle)}</text>`;
     if (topbar.hasSubtitle) {
       svg += `
     <text x="${topbar.textX}" y="${topbar.subtitleY}" 
           font-family="Arial, Helvetica, sans-serif" 
           font-size="13" 
-          fill="${this.renderTheme.textMuted}">${this.escapeXml(topbar.visibleSubtitle)}</text>`;
+          fill="${subtitleColor}">${this.escapeXml(topbar.visibleSubtitle)}</text>`;
     }
     if (topbar.leftIcon) {
       svg += `
@@ -5614,10 +6054,16 @@ var SVGRenderer = class {
   // ============================================================================
   renderText(node, pos) {
     const text = String(node.props.text || "Text content");
-    const fontSize = this.tokens.text.fontSize;
+    const sizeProp = String(node.props.size || "");
+    const defaultFontSize = this.tokens.text.fontSize;
+    const textFontSizeMap = { xs: 10, sm: 12, lg: 16, xl: 20 };
+    const fontSize = textFontSizeMap[sizeProp] ?? defaultFontSize;
     const lineHeightPx = Math.ceil(fontSize * this.tokens.text.lineHeight);
+    const bold = this.parseBooleanProp(node.props.bold, false);
+    const italic = this.parseBooleanProp(node.props.italic, false);
     const lines = this.wrapTextToLines(text, pos.width, fontSize);
-    const firstLineY = pos.y + fontSize;
+    const totalTextHeight = lines.length * lineHeightPx;
+    const firstLineY = pos.y + Math.round(Math.max(0, (pos.height - totalTextHeight) / 2)) + fontSize;
     const tspans = lines.map(
       (line, index) => `<tspan x="${pos.x}" dy="${index === 0 ? 0 : lineHeightPx}">${this.escapeXml(line)}</tspan>`
     ).join("");
@@ -5625,13 +6071,54 @@ var SVGRenderer = class {
     <text x="${pos.x}" y="${firstLineY}"
           font-family="Arial, Helvetica, sans-serif"
           font-size="${fontSize}"
+          font-weight="${bold ? "700" : "400"}"
+          font-style="${italic ? "italic" : "normal"}"
           fill="${this.renderTheme.text}">${tspans}</text>
   </g>`;
   }
+  renderParagraph(node, pos) {
+    const text = String(node.props.text || "");
+    const sizeProp = String(node.props.size || "");
+    const defaultFontSize = this.tokens.text.fontSize;
+    const textFontSizeMap = { xs: 10, sm: 12, lg: 16, xl: 20 };
+    const fontSize = textFontSizeMap[sizeProp] ?? defaultFontSize;
+    const lineHeightPx = Math.ceil(fontSize * this.tokens.text.lineHeight);
+    const bold = this.parseBooleanProp(node.props.bold, false);
+    const italic = this.parseBooleanProp(node.props.italic, false);
+    const align = String(node.props.align || "left");
+    const lines = this.wrapTextToLines(text, pos.width, fontSize);
+    const totalTextHeight = lines.length * lineHeightPx;
+    const firstLineY = pos.y + Math.round(Math.max(0, (pos.height - totalTextHeight) / 2)) + fontSize;
+    let textX;
+    let textAnchor;
+    if (align === "center") {
+      textX = pos.x + pos.width / 2;
+      textAnchor = "middle";
+    } else if (align === "right") {
+      textX = pos.x + pos.width;
+      textAnchor = "end";
+    } else {
+      textX = pos.x;
+      textAnchor = "start";
+    }
+    const tspans = lines.map(
+      (line, index) => `<tspan x="${textX}" dy="${index === 0 ? 0 : lineHeightPx}">${this.escapeXml(line)}</tspan>`
+    ).join("");
+    return `<g${this.getDataNodeId(node)}>
+    <text x="${textX}" y="${firstLineY}"
+          font-family="Arial, Helvetica, sans-serif"
+          font-size="${fontSize}"
+          font-weight="${bold ? "700" : "400"}"
+          font-style="${italic ? "italic" : "normal"}"
+          fill="${this.renderTheme.text}"
+          text-anchor="${textAnchor}">${tspans}</text>
+  </g>`;
+  }
   renderLabel(node, pos) {
     const text = String(node.props.text || "Label");
+    const textY = pos.y + Math.round(pos.height / 2) + 4;
     return `<g${this.getDataNodeId(node)}>
-    <text x="${pos.x}" y="${pos.y + 12}" 
+    <text x="${pos.x}" y="${textY}" 
           font-family="Arial, Helvetica, sans-serif" 
           font-size="12" 
           fill="${this.renderTheme.textMuted}">${this.escapeXml(text)}</text>
@@ -5869,34 +6356,145 @@ var SVGRenderer = class {
     const tabs = itemsStr ? itemsStr.split(",").map((t) => t.trim()) : ["Tab 1", "Tab 2", "Tab 3"];
     const activeProp = node.props.active ?? 0;
     const activeIndex = Number.isFinite(Number(activeProp)) ? Math.max(0, Math.floor(Number(activeProp))) : 0;
-    const accentColor = this.resolveAccentColor();
+    const variant = String(node.props.variant || "default");
+    const accentColor = variant === "default" ? this.resolveAccentColor() : this.resolveVariantColor(variant, this.resolveAccentColor());
+    const radiusMap = { none: 0, sm: 4, md: 6, lg: 10, full: 20 };
+    const tabRadius = radiusMap[String(node.props.radius || "md")] ?? 6;
+    const sizeMap = { sm: 32, md: 44, lg: 52 };
+    const tabHeight = pos.height > 0 ? pos.height : sizeMap[String(node.props.size || "md")] ?? 44;
+    const fontSize = 13;
+    const textY = pos.y + Math.round(tabHeight / 2) + Math.round(fontSize * 0.4);
+    const iconsStr = String(node.props.icons || "");
+    const iconList = iconsStr ? iconsStr.split(",").map((s) => s.trim()) : [];
+    const isFlat = this.parseBooleanProp(node.props.flat, false);
+    const showBorder = this.parseBooleanProp(node.props.border, true);
     const tabWidth = pos.width / tabs.length;
-    let svg = `<g${this.getDataNodeId(node)}>
-    <!-- Tab headers -->`;
+    const colorPropStr = String(node.props.color ?? "");
+    let textColorOverride = null;
+    if (colorPropStr && colorPropStr !== "false") {
+      if (colorPropStr.startsWith("#") || colorPropStr.startsWith("rgb")) {
+        textColorOverride = colorPropStr;
+      } else if (this.colorResolver.hasColor(colorPropStr)) {
+        textColorOverride = this.colorResolver.resolveColor(colorPropStr, this.renderTheme.text);
+      }
+    }
+    const activeTextColor = textColorOverride ?? (isFlat ? accentColor : "white");
+    const inactiveTextColor = textColorOverride ? this.hexToRgba(textColorOverride, 0.55) : this.renderTheme.textMuted;
+    const hasRadius = tabRadius > 0;
+    const clipId = hasRadius ? `tc${String(node.meta?.nodeId ?? "").replace(/\W/g, "").slice(0, 12) || `${Math.round(Math.abs(pos.x))}x${Math.round(Math.abs(pos.y))}`}` : "";
+    let svg = "";
+    if (hasRadius) {
+      svg += `<defs><clipPath id="${clipId}"><rect x="${pos.x}" y="${pos.y}" width="${pos.width}" height="${pos.height}" rx="${tabRadius}"/></clipPath></defs>`;
+    }
+    svg += `<g${this.getDataNodeId(node)}>`;
+    if (hasRadius) {
+      svg += `<g clip-path="url(#${clipId})">`;
+    }
+    if (!isFlat) {
+      svg += `
+    <rect x="${pos.x}" y="${pos.y}" width="${pos.width}" height="${tabHeight}"
+          fill="${this.renderTheme.bg}"/>`;
+    }
     tabs.forEach((tab, i) => {
       const tabX = pos.x + i * tabWidth;
       const isActive = i === activeIndex;
-      svg += `
-    <rect x="${tabX}" y="${pos.y}" 
-          width="${tabWidth}" height="44" 
-          fill="${isActive ? accentColor : "transparent"}" 
-          stroke="${isActive ? "none" : this.renderTheme.border}" 
-          stroke-width="1"/>
-    <text x="${tabX + tabWidth / 2}" y="${pos.y + 28}" 
-          font-family="Arial, Helvetica, sans-serif" 
-          font-size="13" 
-          font-weight="${isActive ? "600" : "500"}" 
-          fill="${isActive ? "white" : this.renderTheme.text}" 
+      const iconName = iconList[i] || "";
+      const tabIconSvg = iconName ? getIcon(iconName) : null;
+      const iconSize = 14;
+      const iconGap = 4;
+      const charW = fontSize * 0.58;
+      const textEst = tab.length * charW;
+      const totalW = tabIconSvg ? iconSize + iconGap + textEst : textEst;
+      const groupX = tabX + Math.round((tabWidth - totalW) / 2);
+      const iconOffY = pos.y + Math.round((tabHeight - iconSize) / 2);
+      if (isFlat) {
+        if (isActive) {
+          svg += `
+    <rect x="${tabX + 6}" y="${pos.y + tabHeight - 3}"
+          width="${tabWidth - 12}" height="3"
+          rx="1.5"
+          fill="${accentColor}"/>`;
+        }
+        if (tabIconSvg) {
+          svg += `
+    <g transform="translate(${groupX}, ${iconOffY})">
+      <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none"
+           stroke="${isActive ? accentColor : this.renderTheme.textMuted}"
+           stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        ${this.extractSvgContent(tabIconSvg)}
+      </svg>
+    </g>
+    <text x="${groupX + iconSize + iconGap}" y="${textY}"
+          font-family="Arial, Helvetica, sans-serif"
+          font-size="${fontSize}"
+          font-weight="${isActive ? "600" : "500"}"
+          fill="${isActive ? activeTextColor : inactiveTextColor}">${this.escapeXml(tab)}</text>`;
+        } else {
+          svg += `
+    <text x="${tabX + tabWidth / 2}" y="${textY}"
+          font-family="Arial, Helvetica, sans-serif"
+          font-size="${fontSize}"
+          font-weight="${isActive ? "600" : "500"}"
+          fill="${isActive ? activeTextColor : inactiveTextColor}"
           text-anchor="middle">${this.escapeXml(tab)}</text>`;
+        }
+      } else {
+        svg += `
+    <rect x="${tabX}" y="${pos.y}"
+          width="${tabWidth}" height="${tabHeight}"
+          rx="${!showBorder && hasRadius && isActive ? tabRadius : 0}"
+          fill="${isActive ? accentColor : "transparent"}"
+          ${!isActive && showBorder ? `stroke="${this.renderTheme.border}" stroke-width="0.5"` : ""}/>`;
+        if (tabIconSvg) {
+          svg += `
+    <g transform="translate(${groupX}, ${iconOffY})">
+      <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none"
+           stroke="${isActive ? activeTextColor : this.renderTheme.textMuted}"
+           stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        ${this.extractSvgContent(tabIconSvg)}
+      </svg>
+    </g>
+    <text x="${groupX + iconSize + iconGap}" y="${textY}"
+          font-family="Arial, Helvetica, sans-serif"
+          font-size="${fontSize}"
+          font-weight="${isActive ? "600" : "500"}"
+          fill="${isActive ? activeTextColor : this.renderTheme.text}">${this.escapeXml(tab)}</text>`;
+        } else {
+          svg += `
+    <text x="${tabX + tabWidth / 2}" y="${textY}"
+          font-family="Arial, Helvetica, sans-serif"
+          font-size="${fontSize}"
+          font-weight="${isActive ? "600" : "500"}"
+          fill="${isActive ? activeTextColor : this.renderTheme.text}"
+          text-anchor="middle">${this.escapeXml(tab)}</text>`;
+        }
+      }
     });
-    svg += `
+    const contentY = pos.y + tabHeight;
+    const contentH = pos.height - tabHeight;
+    if (contentH >= 20 && !isFlat) {
+      svg += `
     <!-- Tab content area -->
-    <rect x="${pos.x}" y="${pos.y + 44}" 
-          width="${pos.width}" height="${pos.height - 44}" 
-          fill="${this.renderTheme.cardBg}" 
-          stroke="${this.renderTheme.border}" 
-          stroke-width="1"/>
+    <rect x="${pos.x}" y="${contentY}"
+          width="${pos.width}" height="${contentH}"
+          fill="${this.renderTheme.cardBg}"
+          ${showBorder ? `stroke="${this.renderTheme.border}" stroke-width="1"` : ""}/>`;
+    } else if (isFlat && showBorder) {
+      svg += `
+    <line x1="${pos.x}" y1="${contentY}" x2="${pos.x + pos.width}" y2="${contentY}"
+          stroke="${this.renderTheme.border}" stroke-width="1"/>`;
+    }
+    if (hasRadius) {
+      svg += `
   </g>`;
+      if (!isFlat && showBorder) {
+        svg += `
+    <rect x="${pos.x}" y="${pos.y}" width="${pos.width}" height="${pos.height}"
+          rx="${tabRadius}" fill="none"
+          stroke="${this.renderTheme.border}" stroke-width="1"/>`;
+      }
+    }
+    svg += "\n  </g>";
     return svg;
   }
   renderDivider(node, pos) {
@@ -5963,15 +6561,20 @@ var SVGRenderer = class {
     const hasExplicitVariantColor = semanticBase !== void 0 || this.colorResolver.hasColor(variant);
     const bgColor = hasExplicitVariantColor ? this.resolveVariantColor(variant, this.renderTheme.primary) : this.renderTheme.border;
     const textColor = hasExplicitVariantColor ? "white" : this.renderTheme.text;
+    const size = String(node.props.size || "md");
+    const BADGE_FONT_SIZES = { xs: 9, sm: 11, md: 12, lg: 13, xl: 15 };
+    const fontSize = BADGE_FONT_SIZES[size] ?? this.tokens.badge.fontSize;
+    const customPadding = node.props.padding !== void 0 ? Number(node.props.padding) : void 0;
+    const BADGE_PAD_X = { xs: 5, sm: 6, md: 8, lg: 10, xl: 14 };
+    const paddingX = customPadding !== void 0 && !isNaN(customPadding) ? customPadding : BADGE_PAD_X[size] ?? this.tokens.badge.paddingX;
     const badgeRadius = this.tokens.badge.radius === "pill" ? pos.height / 2 : this.tokens.badge.radius;
-    const fontSize = this.tokens.badge.fontSize;
     return `<g${this.getDataNodeId(node)}>
     <rect x="${pos.x}" y="${pos.y}"
           width="${pos.width}" height="${pos.height}"
           rx="${badgeRadius}"
           fill="${bgColor}"
           stroke="none"/>
-    <text x="${pos.x + pos.width / 2}" y="${pos.y + pos.height / 2 + 4}"
+    <text x="${pos.x + paddingX + (pos.width - paddingX * 2) / 2}" y="${pos.y + pos.height / 2 + fontSize * 0.35}"
           font-family="Arial, Helvetica, sans-serif"
           font-size="${fontSize}"
           font-weight="600"
@@ -6180,11 +6783,20 @@ var SVGRenderer = class {
     return svg;
   }
   renderImage(node, pos) {
-    const placeholder = String(node.props.placeholder || "landscape").toLowerCase();
+    const placeholder = String(node.props.type || "landscape").toLowerCase();
     const placeholderIcon = String(node.props.icon || "").trim();
     const variant = String(node.props.variant || "").trim();
     const placeholderIconSvg = placeholder === "icon" && placeholderIcon ? getIcon(placeholderIcon) : null;
     const imageBg = this.options.theme === "dark" ? "#2A2A2A" : "#E8E8E8";
+    const hasExplicitHeight = node.props.height !== void 0 && !isNaN(Number(node.props.height)) && Number(node.props.height) > 0;
+    const isCircle = this.parseBooleanProp(node.props.circle, false);
+    const useClip = isCircle || hasExplicitHeight;
+    const clipId = useClip ? `iclip${String(node.meta?.nodeId ?? "").replace(/\W/g, "").slice(0, 16) || `${Math.round(Math.abs(pos.x))}x${Math.round(Math.abs(pos.y))}`}` : "";
+    const imgCx = pos.x + pos.width / 2;
+    const imgCy = pos.y + pos.height / 2;
+    const imgR = Math.min(pos.width, pos.height) / 2;
+    const defsHtml = useClip ? `<defs><clipPath id="${clipId}">${isCircle ? `<circle cx="${imgCx}" cy="${imgCy}" r="${imgR}"/>` : `<rect x="${pos.x}" y="${pos.y}" width="${pos.width}" height="${pos.height}" rx="4"/>`}</clipPath></defs>` : "";
+    const clipAttr = useClip ? ` clip-path="url(#${clipId})"` : "";
     const aspectRatios = {
       landscape: 16 / 9,
       portrait: 2 / 3,
@@ -6193,12 +6805,24 @@ var SVGRenderer = class {
       avatar: 1
     };
     const ratio = aspectRatios[placeholder] || 16 / 9;
-    const maxSize = Math.min(pos.width, pos.height) * 0.8;
-    let iconWidth = maxSize;
-    let iconHeight = maxSize / ratio;
-    if (iconHeight > pos.height * 0.8) {
-      iconHeight = pos.height * 0.8;
-      iconWidth = iconHeight * ratio;
+    let iconWidth;
+    let iconHeight;
+    if (isCircle) {
+      const diameter = 2 * imgR;
+      iconWidth = diameter;
+      iconHeight = diameter / ratio;
+      if (iconHeight < diameter) {
+        iconHeight = diameter;
+        iconWidth = diameter * ratio;
+      }
+    } else {
+      const maxSize = Math.min(pos.width, pos.height) * 0.8;
+      iconWidth = maxSize;
+      iconHeight = maxSize / ratio;
+      if (iconHeight > pos.height * 0.8) {
+        iconHeight = pos.height * 0.8;
+        iconWidth = iconHeight * ratio;
+      }
     }
     const offsetX = pos.x + (pos.width - iconWidth) / 2;
     const offsetY = pos.y + (pos.height - iconHeight) / 2;
@@ -6211,17 +6835,18 @@ var SVGRenderer = class {
       const iconSize = Math.max(16, Math.min(pos.width, pos.height) * 0.6);
       const iconOffsetX = pos.x + (pos.width - iconSize) / 2;
       const iconOffsetY = pos.y + (pos.height - iconSize) / 2;
-      return `<g${this.getDataNodeId(node)}>
+      const iconBorderShape = isCircle ? `<circle cx="${imgCx}" cy="${imgCy}" r="${imgR}" fill="none" stroke="${this.renderTheme.border}" stroke-width="1"/>` : `<rect x="${pos.x}" y="${pos.y}" width="${pos.width}" height="${pos.height}" fill="none" stroke="${this.renderTheme.border}" stroke-width="1" rx="4"/>`;
+      return `${defsHtml}<g${this.getDataNodeId(node)}${clipAttr}>
     <rect x="${pos.x}" y="${pos.y}" width="${pos.width}" height="${pos.height}" fill="${bgColor}" rx="4"/>
     <g transform="translate(${iconOffsetX}, ${iconOffsetY})">
       <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none" stroke="${iconColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         ${this.extractSvgContent(placeholderIconSvg)}
       </svg>
     </g>
-    <rect x="${pos.x}" y="${pos.y}" width="${pos.width}" height="${pos.height}" fill="none" stroke="${this.renderTheme.border}" stroke-width="1" rx="4"/>
+    ${iconBorderShape}
   </g>`;
     }
-    let svg = `<g${this.getDataNodeId(node)}>
+    let svg = `${defsHtml}<g${this.getDataNodeId(node)}${clipAttr}>
     <!-- Image Background -->
     <rect x="${pos.x}" y="${pos.y}" width="${pos.width}" height="${pos.height}" fill="${imageBg}"/>`;
     if (["landscape", "portrait", "square"].includes(placeholder)) {
@@ -6279,10 +6904,10 @@ var SVGRenderer = class {
           width="${personWidth * 0.6}" height="${personHeight * 0.5}" 
           fill="#666" rx="3"/>`;
     }
+    const borderShape = isCircle ? `<circle cx="${imgCx}" cy="${imgCy}" r="${imgR}" fill="none" stroke="${this.renderTheme.border}" stroke-width="1"/>` : `<rect x="${pos.x}" y="${pos.y}" width="${pos.width}" height="${pos.height}" fill="none" stroke="${this.renderTheme.border}" stroke-width="1" rx="4"/>`;
     svg += `
     <!-- Border -->
-    <rect x="${pos.x}" y="${pos.y}" width="${pos.width}" height="${pos.height}" 
-          fill="none" stroke="${this.renderTheme.border}" stroke-width="1" rx="4"/>
+    ${borderShape}
   </g>`;
     return svg;
   }
@@ -6386,10 +7011,29 @@ var SVGRenderer = class {
   </g>`;
     }
     const iconSize = this.getIconSize(size);
-    const offsetX = pos.x + (pos.width - iconSize) / 2;
-    const offsetY = pos.y + (pos.height - iconSize) / 2;
+    const paddingPx = Math.max(0, Number(node.props.padding || 0));
+    const renderedIconSize = Math.max(4, iconSize - paddingPx * 2);
+    const offsetX = pos.x + (pos.width - renderedIconSize) / 2;
+    const offsetY = pos.y + (pos.height - renderedIconSize) / 2;
+    const isIconCircle = this.parseBooleanProp(node.props.circle, false);
+    if (isIconCircle) {
+      const cx = pos.x + pos.width / 2;
+      const cy = pos.y + pos.height / 2;
+      const r = Math.min(pos.width, pos.height) / 2;
+      const iconClipId = `iconclip${String(node.meta?.nodeId ?? "").replace(/\W/g, "").slice(0, 16) || `${Math.round(Math.abs(pos.x))}x${Math.round(Math.abs(pos.y))}`}`;
+      const bgColor = this.hexToRgba(iconColor, 0.12);
+      return `<defs><clipPath id="${iconClipId}"><circle cx="${cx}" cy="${cy}" r="${r}"/></clipPath></defs><g${this.getDataNodeId(node)} clip-path="url(#${iconClipId})">
+    <circle cx="${cx}" cy="${cy}" r="${r}" fill="${bgColor}"/>
+    <g transform="translate(${offsetX}, ${offsetY})">
+      <svg width="${renderedIconSize}" height="${renderedIconSize}" viewBox="0 0 24 24" fill="none" stroke="${iconColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        ${this.extractSvgContent(iconSvg)}
+      </svg>
+    </g>
+  </g>
+  <circle cx="${cx}" cy="${cy}" r="${r}" fill="none" stroke="${this.hexToRgba(iconColor, 0.35)}" stroke-width="1"/>`;
+    }
     const wrappedSvg = `<g${this.getDataNodeId(node)} transform="translate(${offsetX}, ${offsetY})">
-    <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none" stroke="${iconColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <svg width="${renderedIconSize}" height="${renderedIconSize}" viewBox="0 0 24 24" fill="none" stroke="${iconColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
       ${this.extractSvgContent(iconSvg)}
     </svg>
   </g>`;
@@ -6398,7 +7042,7 @@ var SVGRenderer = class {
   renderIconButton(node, pos) {
     const iconName = String(node.props.icon || "help-circle");
     const variant = String(node.props.variant || "default");
-    const size = String(node.props.size || "md");
+    const size = String(node.props.size || "sm");
     const disabled = String(node.props.disabled || "false") === "true";
     const density = this.ir.project.style.density || "normal";
     const labelOffset = this.parseBooleanProp(node.props.labelSpace, false) ? 18 : 0;
@@ -6526,7 +7170,7 @@ var SVGRenderer = class {
   wrapTextToLines(text, maxWidth, fontSize) {
     const normalized = text.replace(/\r\n/g, "\n");
     const paragraphs = normalized.split("\n");
-    const charWidth = fontSize * 0.6;
+    const charWidth = fontSize * 0.5;
     const safeWidth = Math.max(maxWidth || 0, charWidth);
     const maxCharsPerLine = Math.max(1, Math.floor(safeWidth / charWidth));
     const lines = [];
@@ -6768,8 +7412,8 @@ var SVGRenderer = class {
       return false;
     }
     const direction = String(parent.params.direction || "vertical");
-    const align = parent.style.align || "justify";
-    return direction === "horizontal" && align === "justify";
+    const justify = parent.style.justify || "stretch";
+    return direction === "horizontal" && justify === "stretch";
   }
   buildParentContainerIndex() {
     this.parentContainerByChildId.clear();
@@ -7641,7 +8285,7 @@ var SketchSVGRenderer = class extends SVGRenderer {
   renderButton(node, pos) {
     const text = String(node.props.text || "Button");
     const variant = String(node.props.variant || "default");
-    const size = String(node.props.size || "md");
+    const size = String(node.props.size || "sm");
     const density = this.ir.project.style.density || "normal";
     const extraPadding = resolveControlHorizontalPadding(String(node.props.padding || "none"), density);
     const labelOffset = this.parseBooleanProp(node.props.labelSpace, false) ? 18 : 0;
@@ -7748,7 +8392,7 @@ var SketchSVGRenderer = class extends SVGRenderer {
   renderIconButton(node, pos) {
     const iconName = String(node.props.icon || "help-circle");
     const variant = String(node.props.variant || "default");
-    const size = String(node.props.size || "md");
+    const size = String(node.props.size || "sm");
     const density = this.ir.project.style.density || "normal";
     const labelOffset = this.parseBooleanProp(node.props.labelSpace, false) ? 18 : 0;
     const extraPadding = resolveControlHorizontalPadding(String(node.props.padding || "none"), density);
@@ -8001,26 +8645,58 @@ var SketchSVGRenderer = class extends SVGRenderer {
     const variant = String(node.props.variant || "default");
     const accentColor = variant === "default" ? this.resolveAccentColor() : this.resolveVariantColor(variant, this.resolveAccentColor());
     const topbar = this.calculateTopbarLayout(node, pos, title, subtitle, actions, user);
-    let svg = `<g${this.getDataNodeId(node)}>
+    const bgPropStr = String(node.props.background ?? "");
+    let sketchTopbarBg = this.renderTheme.cardBg;
+    if (bgPropStr && bgPropStr !== "false" && bgPropStr !== "true") {
+      if (bgPropStr.startsWith("#") || bgPropStr.startsWith("rgb")) {
+        sketchTopbarBg = bgPropStr;
+      } else if (this.colorResolver.hasColor(bgPropStr)) {
+        sketchTopbarBg = this.colorResolver.resolveColor(bgPropStr, this.renderTheme.cardBg);
+      }
+    }
+    const colorPropStr = String(node.props.color ?? "");
+    let titleColor = this.renderTheme.text;
+    let subtitleColor = this.renderTheme.textMuted;
+    if (colorPropStr && colorPropStr !== "false") {
+      let resolvedTitleColor = null;
+      if (colorPropStr.startsWith("#") || colorPropStr.startsWith("rgb")) {
+        resolvedTitleColor = colorPropStr;
+      } else if (this.colorResolver.hasColor(colorPropStr)) {
+        resolvedTitleColor = this.colorResolver.resolveColor(colorPropStr, this.renderTheme.text);
+      }
+      if (resolvedTitleColor) {
+        titleColor = resolvedTitleColor;
+        subtitleColor = this.hexToRgba(resolvedTitleColor, 0.65);
+      }
+    }
+    const showBorder = this.parseBooleanProp(node.props.border, false);
+    const hasBgProp = bgPropStr === "true" || bgPropStr && bgPropStr !== "false" && bgPropStr !== "";
+    const showBackground = hasBgProp;
+    let svg = `<g${this.getDataNodeId(node)}>`;
+    if (showBorder || showBackground) {
+      const stroke = showBorder ? "#2D3748" : "none";
+      svg += `
     <rect x="${pos.x}" y="${pos.y}"
           width="${pos.width}" height="${pos.height}"
-          fill="${this.renderTheme.cardBg}"
-          stroke="#2D3748"
+          fill="${sketchTopbarBg}"
+          stroke="${stroke}"
           stroke-width="0.5"
-          filter="url(#sketch-rough)"/>
-
-    <!-- Title -->
+          filter="url(#sketch-rough)"/>`;
+    }
+    svg += `
+    <!-- Title -->`;
+    svg += `
     <text x="${topbar.textX}" y="${topbar.titleY}"
           font-family="${this.fontFamily}"
           font-size="18"
           font-weight="600"
-          fill="${this.renderTheme.text}">${this.escapeXml(topbar.visibleTitle)}</text>`;
+          fill="${titleColor}">${this.escapeXml(topbar.visibleTitle)}</text>`;
     if (topbar.hasSubtitle) {
       svg += `
     <text x="${topbar.textX}" y="${topbar.subtitleY}"
           font-family="${this.fontFamily}"
           font-size="13"
-          fill="${this.renderTheme.textMuted}">${this.escapeXml(topbar.visibleSubtitle)}</text>`;
+          fill="${subtitleColor}">${this.escapeXml(topbar.visibleSubtitle)}</text>`;
     }
     if (topbar.leftIcon) {
       svg += `
@@ -8100,8 +8776,13 @@ var SketchSVGRenderer = class extends SVGRenderer {
    */
   renderText(node, pos) {
     const text = String(node.props.text || "Text content");
-    const fontSize = this.tokens.text.fontSize;
+    const sizeProp = String(node.props.size || "");
+    const defaultFontSize = this.tokens.text.fontSize;
+    const textFontSizeMap = { xs: 10, sm: 12, lg: 16, xl: 20 };
+    const fontSize = textFontSizeMap[sizeProp] ?? defaultFontSize;
     const lineHeightPx = Math.ceil(fontSize * this.tokens.text.lineHeight);
+    const bold = this.parseBooleanProp(node.props.bold, false);
+    const italic = this.parseBooleanProp(node.props.italic, false);
     const lines = this.wrapTextToLines(text, pos.width, fontSize);
     const firstLineY = pos.y + fontSize;
     const tspans = lines.map(
@@ -8111,9 +8792,48 @@ var SketchSVGRenderer = class extends SVGRenderer {
     <text x="${pos.x}" y="${firstLineY}"
           font-family="${this.fontFamily}"
           font-size="${fontSize}"
+          font-weight="${bold ? "700" : "400"}"
+          font-style="${italic ? "italic" : "normal"}"
           fill="${this.renderTheme.text}">${tspans}</text>
   </g>`;
   }
+  renderParagraph(node, pos) {
+    const text = String(node.props.text || "");
+    const sizeProp = String(node.props.size || "");
+    const defaultFontSize = this.tokens.text.fontSize;
+    const textFontSizeMap = { xs: 10, sm: 12, lg: 16, xl: 20 };
+    const fontSize = textFontSizeMap[sizeProp] ?? defaultFontSize;
+    const lineHeightPx = Math.ceil(fontSize * this.tokens.text.lineHeight);
+    const bold = this.parseBooleanProp(node.props.bold, false);
+    const italic = this.parseBooleanProp(node.props.italic, false);
+    const align = String(node.props.align || "left");
+    const lines = this.wrapTextToLines(text, pos.width, fontSize);
+    const firstLineY = pos.y + fontSize;
+    let textX;
+    let textAnchor;
+    if (align === "center") {
+      textX = pos.x + pos.width / 2;
+      textAnchor = "middle";
+    } else if (align === "right") {
+      textX = pos.x + pos.width;
+      textAnchor = "end";
+    } else {
+      textX = pos.x;
+      textAnchor = "start";
+    }
+    const tspans = lines.map(
+      (line, index) => `<tspan x="${textX}" dy="${index === 0 ? 0 : lineHeightPx}">${this.escapeXml(line)}</tspan>`
+    ).join("");
+    return `<g${this.getDataNodeId(node)}>
+    <text x="${textX}" y="${firstLineY}"
+          font-family="${this.fontFamily}"
+          font-size="${fontSize}"
+          font-weight="${bold ? "700" : "400"}"
+          font-style="${italic ? "italic" : "normal"}"
+          fill="${this.renderTheme.text}"
+          text-anchor="${textAnchor}">${tspans}</text>
+  </g>`;
+  }
   /**
    * Render label with Comic Sans
    */
@@ -8344,36 +9064,150 @@ var SketchSVGRenderer = class extends SVGRenderer {
   renderTabs(node, pos) {
     const itemsStr = String(node.props.items || "");
     const tabs = itemsStr ? itemsStr.split(",").map((t) => t.trim()) : ["Tab 1", "Tab 2", "Tab 3"];
-    const accentColor = this.resolveAccentColor();
+    const activeProp = node.props.active ?? 0;
+    const activeIndex = Number.isFinite(Number(activeProp)) ? Math.max(0, Math.floor(Number(activeProp))) : 0;
+    const variant = String(node.props.variant || "default");
+    const accentColor = variant === "default" ? this.resolveAccentColor() : this.resolveVariantColor(variant, this.resolveAccentColor());
+    const radiusMap = { none: 0, sm: 4, md: 6, lg: 10, full: 20 };
+    const tabRadius = radiusMap[String(node.props.radius || "md")] ?? 6;
+    const sizeMap = { sm: 32, md: 44, lg: 52 };
+    const tabHeight = pos.height > 0 ? pos.height : sizeMap[String(node.props.size || "md")] ?? 44;
+    const fontSize = 13;
+    const textY = pos.y + Math.round(tabHeight / 2) + Math.round(fontSize * 0.4);
+    const iconsStr = String(node.props.icons || "");
+    const iconList = iconsStr ? iconsStr.split(",").map((s) => s.trim()) : [];
+    const isFlat = this.parseBooleanProp(node.props.flat, false);
+    const showBorder = this.parseBooleanProp(node.props.border, true);
     const tabWidth = pos.width / tabs.length;
-    let svg = `<g${this.getDataNodeId(node)}>
-    <!-- Tab headers -->`;
+    const colorPropStr = String(node.props.color ?? "");
+    let textColorOverride = null;
+    if (colorPropStr && colorPropStr !== "false") {
+      if (colorPropStr.startsWith("#") || colorPropStr.startsWith("rgb")) {
+        textColorOverride = colorPropStr;
+      } else if (this.colorResolver.hasColor(colorPropStr)) {
+        textColorOverride = this.colorResolver.resolveColor(colorPropStr, this.renderTheme.text);
+      }
+    }
+    const activeTextColor = textColorOverride ?? (isFlat ? accentColor : "white");
+    const inactiveTextColor = textColorOverride ? this.hexToRgba(textColorOverride, 0.55) : this.renderTheme.textMuted;
+    const hasRadius = tabRadius > 0;
+    const clipId = hasRadius ? `stc${String(node.meta?.nodeId ?? "").replace(/\W/g, "").slice(0, 12) || `${Math.round(Math.abs(pos.x))}x${Math.round(Math.abs(pos.y))}`}` : "";
+    let svg = "";
+    if (hasRadius) {
+      svg += `<defs><clipPath id="${clipId}"><rect x="${pos.x}" y="${pos.y}" width="${pos.width}" height="${pos.height}" rx="${tabRadius}"/></clipPath></defs>`;
+    }
+    svg += `<g${this.getDataNodeId(node)}>`;
+    if (hasRadius) {
+      svg += `<g clip-path="url(#${clipId})">`;
+    }
+    if (!isFlat) {
+      svg += `
+    <rect x="${pos.x}" y="${pos.y}" width="${pos.width}" height="${tabHeight}"
+          fill="${this.renderTheme.bg}"/>`;
+    }
     tabs.forEach((tab, i) => {
       const tabX = pos.x + i * tabWidth;
-      const isActive = i === 0;
-      svg += `
+      const isActive = i === activeIndex;
+      const iconName = iconList[i] || "";
+      const tabIconSvg = iconName ? getIcon(iconName) : null;
+      const iconSize = 14;
+      const iconGap = 4;
+      const charW = fontSize * 0.58;
+      const textEst = tab.length * charW;
+      const totalW = tabIconSvg ? iconSize + iconGap + textEst : textEst;
+      const groupX = tabX + Math.round((tabWidth - totalW) / 2);
+      const iconOffY = pos.y + Math.round((tabHeight - iconSize) / 2);
+      if (isFlat) {
+        if (isActive) {
+          svg += `
+    <rect x="${tabX + 6}" y="${pos.y + tabHeight - 3}"
+          width="${tabWidth - 12}" height="3"
+          rx="1.5"
+          fill="${accentColor}"
+          filter="url(#sketch-rough)"/>`;
+        }
+        if (tabIconSvg) {
+          svg += `
+    <g transform="translate(${groupX}, ${iconOffY})">
+      <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none"
+           stroke="${isActive ? accentColor : this.renderTheme.textMuted}"
+           stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+        ${this.extractSvgContent(tabIconSvg)}
+      </svg>
+    </g>
+    <text x="${groupX + iconSize + iconGap}" y="${textY}"
+          font-family="${this.fontFamily}"
+          font-size="${fontSize}"
+          font-weight="${isActive ? "600" : "500"}"
+          fill="${isActive ? activeTextColor : inactiveTextColor}">${this.escapeXml(tab)}</text>`;
+        } else {
+          svg += `
+    <text x="${tabX + tabWidth / 2}" y="${textY}"
+          font-family="${this.fontFamily}"
+          font-size="${fontSize}"
+          font-weight="${isActive ? "600" : "500"}"
+          fill="${isActive ? activeTextColor : inactiveTextColor}"
+          text-anchor="middle">${this.escapeXml(tab)}</text>`;
+        }
+      } else {
+        svg += `
     <rect x="${tabX}" y="${pos.y}"
-          width="${tabWidth}" height="44"
+          width="${tabWidth}" height="${tabHeight}"
+          rx="${!showBorder && hasRadius && isActive ? tabRadius : 0}"
           fill="${isActive ? accentColor : "transparent"}"
-          stroke="${isActive ? accentColor : "#2D3748"}"
+          stroke="${isActive ? accentColor : showBorder ? "#2D3748" : "none"}"
           stroke-width="0.5"
-          filter="url(#sketch-rough)"/>
-    <text x="${tabX + tabWidth / 2}" y="${pos.y + 28}"
+          filter="url(#sketch-rough)"/>`;
+        if (tabIconSvg) {
+          svg += `
+    <g transform="translate(${groupX}, ${iconOffY})">
+      <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none"
+           stroke="${isActive ? activeTextColor : this.renderTheme.textMuted}"
+           stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+        ${this.extractSvgContent(tabIconSvg)}
+      </svg>
+    </g>
+    <text x="${groupX + iconSize + iconGap}" y="${textY}"
           font-family="${this.fontFamily}"
-          font-size="13"
+          font-size="${fontSize}"
+          font-weight="${isActive ? "600" : "500"}"
+          fill="${isActive ? activeTextColor : this.renderTheme.text}">${this.escapeXml(tab)}</text>`;
+        } else {
+          svg += `
+    <text x="${tabX + tabWidth / 2}" y="${textY}"
+          font-family="${this.fontFamily}"
+          font-size="${fontSize}"
           font-weight="${isActive ? "600" : "500"}"
-          fill="${isActive ? "white" : this.renderTheme.text}"
+          fill="${isActive ? activeTextColor : this.renderTheme.text}"
           text-anchor="middle">${this.escapeXml(tab)}</text>`;
+        }
+      }
     });
-    svg += `
+    const contentY = pos.y + tabHeight;
+    const contentH = pos.height - tabHeight;
+    if (contentH >= 20 && !isFlat) {
+      svg += `
     <!-- Tab content area -->
-    <rect x="${pos.x}" y="${pos.y + 44}"
-          width="${pos.width}" height="${pos.height - 44}"
+    <rect x="${pos.x}" y="${contentY}"
+          width="${pos.width}" height="${contentH}"
           fill="${this.renderTheme.cardBg}"
-          stroke="#2D3748"
-          stroke-width="0.5"
-          filter="url(#sketch-rough)"/>
+          ${showBorder ? 'stroke="#2D3748" stroke-width="0.5" filter="url(#sketch-rough)"' : ""}/>`;
+    } else if (isFlat && showBorder) {
+      svg += `
+    <line x1="${pos.x}" y1="${contentY}" x2="${pos.x + pos.width}" y2="${contentY}"
+          stroke="#2D3748" stroke-width="0.5" filter="url(#sketch-rough)"/>`;
+    }
+    if (hasRadius) {
+      svg += `
   </g>`;
+      if (!isFlat && showBorder) {
+        svg += `
+    <rect x="${pos.x}" y="${pos.y}" width="${pos.width}" height="${pos.height}"
+          rx="${tabRadius}" fill="none" stroke="#2D3748" stroke-width="0.5"
+          filter="url(#sketch-rough)"/>`;
+      }
+    }
+    svg += "\n  </g>";
     return svg;
   }
   /**
@@ -8610,11 +9444,20 @@ var SketchSVGRenderer = class extends SVGRenderer {
    * Render image with sketch filter
    */
   renderImage(node, pos) {
-    const placeholder = String(node.props.placeholder || "landscape").toLowerCase();
+    const placeholder = String(node.props.type || "landscape").toLowerCase();
     const iconType = String(node.props.icon || "").trim();
     const variant = String(node.props.variant || "").trim();
     const iconSvg = placeholder === "icon" && iconType.length > 0 ? getIcon(iconType) : null;
     const imageBg = this.options.theme === "dark" ? "#2A2A2A" : "#E8E8E8";
+    const hasExplicitHeight = node.props.height !== void 0 && !isNaN(Number(node.props.height)) && Number(node.props.height) > 0;
+    const isCircle = this.parseBooleanProp(node.props.circle, false);
+    const useClip = isCircle || hasExplicitHeight;
+    const clipId = useClip ? `sclip${String(node.meta?.nodeId ?? "").replace(/\W/g, "").slice(0, 16) || `${Math.round(Math.abs(pos.x))}x${Math.round(Math.abs(pos.y))}`}` : "";
+    const imgCx = pos.x + pos.width / 2;
+    const imgCy = pos.y + pos.height / 2;
+    const imgR = Math.min(pos.width, pos.height) / 2;
+    const defsHtml = useClip ? `<defs><clipPath id="${clipId}">${isCircle ? `<circle cx="${imgCx}" cy="${imgCy}" r="${imgR}"/>` : `<rect x="${pos.x}" y="${pos.y}" width="${pos.width}" height="${pos.height}" rx="4"/>`}</clipPath></defs>` : "";
+    const clipAttr = useClip ? ` clip-path="url(#${clipId})"` : "";
     if (iconSvg) {
       const semanticBase = variant ? this.getSemanticVariantColor(variant) : void 0;
       const hasVariant = variant.length > 0 && (semanticBase !== void 0 || this.colorResolver.hasColor(variant));
@@ -8624,7 +9467,8 @@ var SketchSVGRenderer = class extends SVGRenderer {
       const iconSize = Math.max(16, Math.min(pos.width, pos.height) * 0.6);
       const iconOffsetX = pos.x + (pos.width - iconSize) / 2;
       const iconOffsetY = pos.y + (pos.height - iconSize) / 2;
-      return `<g${this.getDataNodeId(node)}>
+      const sketchIconBorder = isCircle ? `<circle cx="${imgCx}" cy="${imgCy}" r="${imgR}" fill="none" stroke="#2D3748" stroke-width="0.5" filter="url(#sketch-rough)"/>` : `<rect x="${pos.x}" y="${pos.y}" width="${pos.width}" height="${pos.height}" fill="none" stroke="#2D3748" stroke-width="0.5" rx="4" filter="url(#sketch-rough)"/>`;
+      return `${defsHtml}<g${this.getDataNodeId(node)}${clipAttr}>
     <rect x="${pos.x}" y="${pos.y}"
           width="${pos.width}" height="${pos.height}"
           fill="${bgColor}"
@@ -8635,17 +9479,11 @@ var SketchSVGRenderer = class extends SVGRenderer {
         ${this.extractSvgContent(iconSvg)}
       </svg>
     </g>
-    <rect x="${pos.x}" y="${pos.y}"
-          width="${pos.width}" height="${pos.height}"
-          fill="none"
-          stroke="#2D3748"
-          stroke-width="0.5"
-          rx="4"
-          filter="url(#sketch-rough)"/>
+    ${sketchIconBorder}
   </g>`;
     }
-    return `<g${this.getDataNodeId(node)}>
-    <!-- Image Background -->
+    const sketchCircleBorder = isCircle ? `<circle cx="${imgCx}" cy="${imgCy}" r="${imgR}" fill="none" stroke="#2D3748" stroke-width="0.5"/>` : "";
+    return `${defsHtml}<g${this.getDataNodeId(node)}${clipAttr}>
     <rect x="${pos.x}" y="${pos.y}"
           width="${pos.width}" height="${pos.height}"
           fill="${imageBg}"
@@ -8653,14 +9491,12 @@ var SketchSVGRenderer = class extends SVGRenderer {
           stroke-width="0.5"
           rx="4"
           filter="url(#sketch-rough)"/>
-
-    <!-- Placeholder icon -->
     <text x="${pos.x + pos.width / 2}" y="${pos.y + pos.height / 2}"
           font-family="${this.fontFamily}"
           font-size="24"
           fill="#666"
           text-anchor="middle">\u{1F5BC}</text>
-  </g>`;
+  </g>${sketchCircleBorder}`;
   }
   /**
    * Render breadcrumbs with Comic Sans
@@ -8776,20 +9612,33 @@ var SketchSVGRenderer = class extends SVGRenderer {
     }
     const iconSize = this.getIconSize(size);
     const iconColor = variant === "default" ? this.resolveTextColor() : this.resolveVariantColor(variant, this.resolveTextColor());
-    const offsetX = pos.x + (pos.width - iconSize) / 2;
-    const offsetY = pos.y + (pos.height - iconSize) / 2;
+    const paddingPx = Math.max(0, Number(node.props.padding || 0));
+    const renderedIconSize = Math.max(4, iconSize - paddingPx * 2);
+    const offsetX = pos.x + (pos.width - renderedIconSize) / 2;
+    const offsetY = pos.y + (pos.height - renderedIconSize) / 2;
+    const isIconCircle = this.parseBooleanProp(node.props.circle, false);
+    if (isIconCircle) {
+      const cx = pos.x + pos.width / 2;
+      const cy = pos.y + pos.height / 2;
+      const r = Math.min(pos.width, pos.height) / 2;
+      const iconClipId = `sconclip${String(node.meta?.nodeId ?? "").replace(/\W/g, "").slice(0, 16) || `${Math.round(Math.abs(pos.x))}x${Math.round(Math.abs(pos.y))}`}`;
+      const bgColor = this.hexToRgba(iconColor, 0.1);
+      return `<defs><clipPath id="${iconClipId}"><circle cx="${cx}" cy="${cy}" r="${r}"/></clipPath></defs><g${this.getDataNodeId(node)} clip-path="url(#${iconClipId})">
+    <circle cx="${cx}" cy="${cy}" r="${r}" fill="${bgColor}"/>
+    <g transform="translate(${offsetX}, ${offsetY})">
+      <svg width="${renderedIconSize}" height="${renderedIconSize}" viewBox="0 0 24 24" fill="none" stroke="${iconColor}" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round">
+        ${this.extractSvgContent(iconSvg)}
+      </svg>
+    </g>
+  </g>
+  <circle cx="${cx}" cy="${cy}" r="${r}" fill="none" stroke="${this.hexToRgba(iconColor, 0.35)}" stroke-width="0.5"/>`;
+    }
     return `<g${this.getDataNodeId(node)} transform="translate(${offsetX}, ${offsetY})">
-    <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none" stroke="${iconColor}" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round">
+    <svg width="${renderedIconSize}" height="${renderedIconSize}" viewBox="0 0 24 24" fill="none" stroke="${iconColor}" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round">
       ${this.extractSvgContent(iconSvg)}
     </svg>
   </g>`;
   }
-  /**
-   * Render chart placeholder with sketch filter and Comic Sans
-   */
-  renderChartPlaceholder(node, pos) {
-    return super.renderChartPlaceholder(node, pos);
-  }
   /**
    * Helper method to get icon SVG
    */