sketchmark 0.2.5 → 0.2.7

package/dist/layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EACV,UAAU,EACV,SAAS,EAKV,MAAM,UAAU,CAAC;AAwZlB,wBAAgB,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAmB1E;AAoID,wBAAgB,MAAM,CAAC,EAAE,EAAE,UAAU,GAAG,UAAU,CA+NjD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EACV,UAAU,EACV,SAAS,EAKV,MAAM,UAAU,CAAC;AA2ZlB,wBAAgB,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAmB1E;AAoID,wBAAgB,MAAM,CAAC,EAAE,EAAE,UAAU,GAAG,UAAU,CA+NjD"}

package/dist/renderer/canvas/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/renderer/canvas/index.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,UAAU,EAOX,MAAM,aAAa,CAAC;AAsCrB,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAQ,MAAM,CAAC;IACrB,UAAU,CAAC,EAAG,MAAM,CAAC;IACrB,SAAS,CAAC,EAAI,MAAM,CAAC;IACrB,MAAM,CAAC,EAAO,MAAM,CAAC;IACrB,KAAK,CAAC,EAAQ,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IACxC,OAAO,CAAC,EAAM,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAySD,wBAAgB,cAAc,CAC5B,EAAE,EAAO,UAAU,EACnB,MAAM,EAAG,iBAAiB,EAC1B,OAAO,GAAE,qBAA0B,GAClC,IAAI,CA2cN;AAGD,wBAAgB,eAAe,CAAC,MAAM,EAAE,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC,CAOxE;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,iBAAiB,GAAG,MAAM,CAEpE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/renderer/canvas/index.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,UAAU,EAOX,MAAM,aAAa,CAAC;AAsCrB,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAQ,MAAM,CAAC;IACrB,UAAU,CAAC,EAAG,MAAM,CAAC;IACrB,SAAS,CAAC,EAAI,MAAM,CAAC;IACrB,MAAM,CAAC,EAAO,MAAM,CAAC;IACrB,KAAK,CAAC,EAAQ,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IACxC,OAAO,CAAC,EAAM,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA+SD,wBAAgB,cAAc,CAC5B,EAAE,EAAO,UAAU,EACnB,MAAM,EAAG,iBAAiB,EAC1B,OAAO,GAAE,qBAA0B,GAClC,IAAI,CA6cN;AAGD,wBAAgB,eAAe,CAAC,MAAM,EAAE,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC,CAOxE;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,iBAAiB,GAAG,MAAM,CAEpE"}

package/dist/renderer/svg/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/renderer/svg/index.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,UAAU,EAMX,MAAM,aAAa,CAAC;AAqhBrB,MAAM,WAAW,kBAAkB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,WAAW,CACzB,EAAE,EAAE,UAAU,EACd,SAAS,EAAE,WAAW,GAAG,aAAa,EACtC,OAAO,GAAE,kBAAuB,GAC/B,aAAa,CAksBf;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAKtD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/renderer/svg/index.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,UAAU,EAMX,MAAM,aAAa,CAAC;AA8hBrB,MAAM,WAAW,kBAAkB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,WAAW,CACzB,EAAE,EAAE,UAAU,EACd,SAAS,EAAE,WAAW,GAAG,aAAa,EACtC,OAAO,GAAE,kBAAuB,GAC/B,aAAa,CAosBf;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAKtD"}

package/dist/sketchmark.iife.js

@@ -425,7 +425,7 @@ var AIDiagram = (function (exports) {
                 kind: "node",
                 id,
                 shape,
-                label: props.label || (shape === "image" || shape === "icon" ? "" : id),
+                label: props.label || id,
                 ...(groupId ? { groupId } : {}),
                 ...(props.width ? { width: parseFloat(props.width) } : {}),
                 ...(props.height ? { height: parseFloat(props.height) } : {}),
@@ -1510,10 +1510,13 @@ var AIDiagram = (function (exports) {
                 }
                 break;
             }
-            case "icon":
-                n.w = n.w || 48;
-                n.h = n.h || (n.label !== n.id ? 64 : 48); // extra height for label
+            case "icon": {
+                const iconBase = 48;
+                const labelH = n.label ? 20 : 0;
+                n.w = n.w || Math.max(iconBase, n.label ? labelW : 0);
+                n.h = n.h || (iconBase + labelH);
                 break;
+            }
             default:
                 n.w = n.w || Math.max(MIN_W, Math.min(MAX_W, labelW));
                 n.h = n.h || 52;
@@ -5117,27 +5120,32 @@ var AIDiagram = (function (exports) {
                     const iconColor = s.color
                         ? encodeURIComponent(String(s.color))
                         : encodeURIComponent(String(palette.nodeStroke));
-                    const iconSize = Math.min(n.w, n.h) - 4;
+                    // reserve bottom 20px for label when present
+                    const labelSpace = n.label ? 20 : 0;
+                    const iconAreaH = n.h - labelSpace;
+                    const iconSize = Math.min(n.w, iconAreaH) - 4;
                     const iconUrl = `https://api.iconify.design/${prefix}/${name}.svg?color=${iconColor}&width=${iconSize}&height=${iconSize}`;
                     const img = document.createElementNS(NS, "image");
                     img.setAttribute("href", iconUrl);
-                    img.setAttribute("x", String(n.x + 1));
-                    img.setAttribute("y", String(n.y + 1));
-                    img.setAttribute("width", String(n.w - 2));
-                    img.setAttribute("height", String(n.h - 2));
+                    const iconX = n.x + (n.w - iconSize) / 2;
+                    const iconY = n.y + (iconAreaH - iconSize) / 2;
+                    img.setAttribute("x", String(iconX));
+                    img.setAttribute("y", String(iconY));
+                    img.setAttribute("width", String(iconSize));
+                    img.setAttribute("height", String(iconSize));
                     img.setAttribute("preserveAspectRatio", "xMidYMid meet");
                     if (s.opacity != null)
                         img.setAttribute("opacity", String(s.opacity));
-                    // clip-path for rounded corners (same as image)
+                    // clip-path for rounded corners
                     const clipId = `clip-${n.id}`;
                     const defs = document.createElementNS(NS, "defs");
                     const clip = document.createElementNS(NS, "clipPath");
                     clip.setAttribute("id", clipId);
                     const rect = document.createElementNS(NS, "rect");
-                    rect.setAttribute("x", String(n.x + 1));
-                    rect.setAttribute("y", String(n.y + 1));
-                    rect.setAttribute("width", String(n.w - 2));
-                    rect.setAttribute("height", String(n.h - 2));
+                    rect.setAttribute("x", String(iconX));
+                    rect.setAttribute("y", String(iconY));
+                    rect.setAttribute("width", String(iconSize));
+                    rect.setAttribute("height", String(iconSize));
                     rect.setAttribute("rx", "6");
                     clip.appendChild(rect);
                     defs.appendChild(clip);
@@ -5163,12 +5171,15 @@ var AIDiagram = (function (exports) {
             }
             case "image": {
                 if (n.imageUrl) {
+                    // reserve bottom 20px for label when present
+                    const imgLabelSpace = n.label ? 20 : 0;
+                    const imgAreaH = n.h - imgLabelSpace;
                     const img = document.createElementNS(NS, "image");
                     img.setAttribute("href", n.imageUrl);
                     img.setAttribute("x", String(n.x + 1));
                     img.setAttribute("y", String(n.y + 1));
                     img.setAttribute("width", String(n.w - 2));
-                    img.setAttribute("height", String(n.h - 2));
+                    img.setAttribute("height", String(imgAreaH - 2));
                     img.setAttribute("preserveAspectRatio", "xMidYMid meet");
                     const clipId = `clip-${n.id}`;
                     const defs = document.createElementNS(NS, "defs");
@@ -5178,7 +5189,7 @@ var AIDiagram = (function (exports) {
                     rect.setAttribute("x", String(n.x + 1));
                     rect.setAttribute("y", String(n.y + 1));
                     rect.setAttribute("width", String(n.w - 2));
-                    rect.setAttribute("height", String(n.h - 2));
+                    rect.setAttribute("height", String(imgAreaH - 2));
                     rect.setAttribute("rx", "6");
                     clip.appendChild(rect);
                     defs.appendChild(clip);
@@ -5430,11 +5441,14 @@ var AIDiagram = (function (exports) {
             const nodeBodyBottom = n.y + n.h - pad;
             const nodeBodyMid = n.y + n.h / 2;
             const blockH = (lines.length - 1) * lineHeight;
-            const textCY = verticalAlign === "top"
-                ? nodeBodyTop + blockH / 2
-                : verticalAlign === "bottom"
-                    ? nodeBodyBottom - blockH / 2
-                    : nodeBodyMid;
+            const isMediaShape = n.shape === "icon" || n.shape === "image";
+            const textCY = isMediaShape
+                ? n.y + n.h - 10 // label below the icon/image
+                : verticalAlign === "top"
+                    ? nodeBodyTop + blockH / 2
+                    : verticalAlign === "bottom"
+                        ? nodeBodyBottom - blockH / 2
+                        : nodeBodyMid;
             if (n.label) {
                 ng.appendChild(lines.length > 1
                     ? mkMultilineText(lines, textX, textCY, fontSize, fontWeight, textColor, textAnchor, lineHeight, nodeFont, letterSpacing)
@@ -6145,7 +6159,10 @@ var AIDiagram = (function (exports) {
                     const iconColor = s.color
                         ? encodeURIComponent(String(s.color))
                         : encodeURIComponent(String(palette.nodeStroke));
-                    const iconSize = Math.min(n.w, n.h) - 4;
+                    // reserve bottom for label
+                    const iconLabelSpace = n.label ? 20 : 0;
+                    const iconAreaH = n.h - iconLabelSpace;
+                    const iconSize = Math.min(n.w, iconAreaH) - 4;
                     const iconUrl = `https://api.iconify.design/${prefix}/${name}.svg?color=${iconColor}&width=${iconSize}&height=${iconSize}`;
                     const img = new Image();
                     img.crossOrigin = 'anonymous';
@@ -6153,23 +6170,23 @@ var AIDiagram = (function (exports) {
                         ctx.save();
                         if (s.opacity != null)
                             ctx.globalAlpha = Number(s.opacity);
-                        // clip-path for rounded corners (same as image)
+                        const iconX = n.x + (n.w - iconSize) / 2;
+                        const iconY = n.y + (iconAreaH - iconSize) / 2;
                         ctx.beginPath();
                         const r = 6;
-                        ctx.moveTo(n.x + r, n.y);
-                        ctx.lineTo(n.x + n.w - r, n.y);
-                        ctx.quadraticCurveTo(n.x + n.w, n.y, n.x + n.w, n.y + r);
-                        ctx.lineTo(n.x + n.w, n.y + n.h - r);
-                        ctx.quadraticCurveTo(n.x + n.w, n.y + n.h, n.x + n.w - r, n.y + n.h);
-                        ctx.lineTo(n.x + r, n.y + n.h);
-                        ctx.quadraticCurveTo(n.x, n.y + n.h, n.x, n.y + n.h - r);
-                        ctx.lineTo(n.x, n.y + r);
-                        ctx.quadraticCurveTo(n.x, n.y, n.x + r, n.y);
+                        ctx.moveTo(iconX + r, iconY);
+                        ctx.lineTo(iconX + iconSize - r, iconY);
+                        ctx.quadraticCurveTo(iconX + iconSize, iconY, iconX + iconSize, iconY + r);
+                        ctx.lineTo(iconX + iconSize, iconY + iconSize - r);
+                        ctx.quadraticCurveTo(iconX + iconSize, iconY + iconSize, iconX + iconSize - r, iconY + iconSize);
+                        ctx.lineTo(iconX + r, iconY + iconSize);
+                        ctx.quadraticCurveTo(iconX, iconY + iconSize, iconX, iconY + iconSize - r);
+                        ctx.lineTo(iconX, iconY + r);
+                        ctx.quadraticCurveTo(iconX, iconY, iconX + r, iconY);
                         ctx.closePath();
                         ctx.clip();
-                        ctx.drawImage(img, n.x + 1, n.y + 1, n.w - 2, n.h - 2);
+                        ctx.drawImage(img, iconX, iconY, iconSize, iconSize);
                         ctx.restore();
-                        // only draw border when stroke is explicitly set
                         if (s.stroke) {
                             rc.rectangle(n.x + 1, n.y + 1, n.w - 2, n.h - 2, { ...opts, fill: 'none' });
                         }
@@ -6183,6 +6200,9 @@ var AIDiagram = (function (exports) {
             }
             case 'image': {
                 if (n.imageUrl) {
+                    // reserve bottom for label
+                    const imgLblSpace = n.label ? 20 : 0;
+                    const imgAreaH = n.h - imgLblSpace;
                     const img = new Image();
                     img.crossOrigin = 'anonymous';
                     img.onload = () => {
@@ -6192,15 +6212,15 @@ var AIDiagram = (function (exports) {
                         ctx.moveTo(n.x + r, n.y);
                         ctx.lineTo(n.x + n.w - r, n.y);
                         ctx.quadraticCurveTo(n.x + n.w, n.y, n.x + n.w, n.y + r);
-                        ctx.lineTo(n.x + n.w, n.y + n.h - r);
-                        ctx.quadraticCurveTo(n.x + n.w, n.y + n.h, n.x + n.w - r, n.y + n.h);
-                        ctx.lineTo(n.x + r, n.y + n.h);
-                        ctx.quadraticCurveTo(n.x, n.y + n.h, n.x, n.y + n.h - r);
+                        ctx.lineTo(n.x + n.w, n.y + imgAreaH - r);
+                        ctx.quadraticCurveTo(n.x + n.w, n.y + imgAreaH, n.x + n.w - r, n.y + imgAreaH);
+                        ctx.lineTo(n.x + r, n.y + imgAreaH);
+                        ctx.quadraticCurveTo(n.x, n.y + imgAreaH, n.x, n.y + imgAreaH - r);
                         ctx.lineTo(n.x, n.y + r);
                         ctx.quadraticCurveTo(n.x, n.y, n.x + r, n.y);
                         ctx.closePath();
                         ctx.clip();
-                        ctx.drawImage(img, n.x + 1, n.y + 1, n.w - 2, n.h - 2);
+                        ctx.drawImage(img, n.x + 1, n.y + 1, n.w - 2, imgAreaH - 2);
                         ctx.restore();
                         // only draw border when stroke is explicitly set
                         if (s.stroke) {
@@ -6392,9 +6412,12 @@ var AIDiagram = (function (exports) {
             const nodeBodyTop = n.y + pad;
             const nodeBodyBottom = n.y + n.h - pad;
             const blockH = (lines.length - 1) * lineHeight;
-            const textCY = vertAlign === 'top' ? nodeBodyTop + blockH / 2
-                : vertAlign === 'bottom' ? nodeBodyBottom - blockH / 2
-                    : n.y + n.h / 2; // middle (default)
+            const isMediaShape = n.shape === 'icon' || n.shape === 'image';
+            const textCY = isMediaShape
+                ? n.y + n.h - 10 // label below the icon/image
+                : vertAlign === 'top' ? nodeBodyTop + blockH / 2
+                    : vertAlign === 'bottom' ? nodeBodyBottom - blockH / 2
+                        : n.y + n.h / 2; // middle (default)
             if (n.label) {
                 if (lines.length > 1) {
                     drawMultilineText(ctx, lines, textX, textCY, fontSize, fontWeight, textColor, textAlign, lineHeight, nodeFont, letterSpacing);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sketchmark",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "A plain-text DSL for hand-drawn diagrams. Write boxes, edges, and groups as code — renders sketchy SVG/Canvas via rough.js with a built-in step-by-step animation system.",
   "keywords": [
     "diagram",