sketchmark 0.2.5 → 0.2.7

package/README.md

@@ -29,6 +29,7 @@ end
 - [DSL Reference](#dsl-reference)
   - [Diagram Header](#diagram-header)
   - [Node Shapes](#node-shapes)
+  - [Icons](#icon-shape)
   - [Edges](#edges)
   - [Groups](#groups)
   - [Bare Groups](#bare-groups)
@@ -37,6 +38,7 @@ end
   - [Charts](#charts)
   - [Markdown Blocks](#markdown-blocks)
   - [Themes](#themes)
+  - [Style Directive](#style-directive)
   - [Typography](#typography)
   - [Animation Steps](#animation-steps)
 - [Layout System](#layout-system)
@@ -127,11 +129,15 @@ end
 | Keyword | Example | Description |
 |---|---|---|
 | `title` | `title label="My Diagram"` | Title shown above the diagram |
+| `description` | `description "A brief summary"` | Diagram description (metadata) |
 | `layout` | `layout row` | Root layout direction: `row`, `column`, `grid` |
 | `config gap` | `config gap=60` | Gap between root-level items (default: 80) |
 | `config margin` | `config margin=40` | Outer canvas margin (default: 60) |
 | `config theme` | `config theme=ocean` | Global palette (see [Theme Palettes](#theme-palettes)) |
 | `config font` | `config font=caveat` | Diagram-wide font (see [Font System](#font-system)) |
+| `config title-color` | `config title-color=#333` | Title text color |
+| `config title-size` | `config title-size=20` | Title font size in px |
+| `config title-weight` | `config title-weight=700` | Title font weight |
 
 ---
 
@@ -147,6 +153,7 @@ cylinder      id  label="..."
 parallelogram id  label="..."
 text          id  label="..."
 image         id  label="..." url="https://..."
+icon          id  label="..." name="prefix:name"
 ```
 
 **Common properties:**
@@ -159,6 +166,9 @@ image         id  label="..." url="https://..."
 | `height` | `height=55` | Override auto-height in px |
 | `fill` | `fill="#e8f4ff"` | Background fill color |
 | `stroke` | `stroke="#0044cc"` | Border color |
+| `stroke-width` | `stroke-width=2` | Border thickness in px |
+| `stroke-dash` | `stroke-dash=5,3` | Dashed border pattern (dash, gap) |
+| `opacity` | `opacity=0.5` | Element opacity (0 to 1) |
 | `color` | `color="#003399"` | Text color |
 | `font` | `font=caveat` | Font family or built-in name |
 | `font-size` | `font-size=12` | Label font size in px |
@@ -170,7 +180,9 @@ image         id  label="..." url="https://..."
 
 > **`text` shape:** No border or background. Long labels auto word-wrap. Use `width=` to control the wrap width.
 
-> **`image` shape:** Renders an image clipped to a rounded rect. Requires `url=` property.
+> **`image` shape:** Renders an image clipped to a rounded rect. Requires `url=` property. Label renders below the image. Border only shown when `stroke=` is set.
+
+> **`icon` shape:** Renders an icon from [Iconify](https://iconify.design/) (200,000+ open source icons). Requires `name=` property in `prefix:name` format (e.g. `mdi:database`). Defaults to `mdi` prefix if omitted. Use `color=` to tint the icon. Label renders below the icon. Border only shown when `stroke=` is set. Default size: 48x48.
 
 **Example:**
 ```
@@ -178,11 +190,42 @@ box gateway label="API Gateway" theme=warning width=150 height=55
 circle user label="User" fill="#e8f4ff" stroke="#0044cc" color="#003399"
 cylinder db label="PostgreSQL" theme=success width=140 height=65
 image logo label="Logo" url="https://example.com/logo.png" width=80 height=80
+icon db label="Database" name="mdi:database" color="#1976D2"
+icon cloud name="mdi:cloud" width=64 height=64
 text caption label="This auto-wraps across multiple lines." width=300
 ```
 
 ---
 
+### Icon Shape
+
+Render any of 200,000+ open source vector icons from [Iconify](https://iconify.design/).
+
+```
+icon id [label="..."] name="prefix:name" [color="#hex"] [width=N] [height=N]
+```
+
+| Property | Example | Description |
+|---|---|---|
+| `name` | `name="mdi:database"` | Icon identifier in `prefix:name` format. Defaults to `mdi` prefix if omitted |
+| `color` | `color="#1976D2"` | Icon tint color |
+| `stroke` | `stroke="#333"` | Optional border (not shown by default) |
+| `label` | `label="DB"` | Label shown below the icon (defaults to id) |
+| `width` | `width=64` | Icon width (default: 48) |
+| `height` | `height=64` | Icon height (default: 48) |
+
+Browse available icons at [icon-sets.iconify.design](https://icon-sets.iconify.design/). Common prefixes: `mdi` (Material Design), `lucide`, `heroicons`, `tabler`, `ph` (Phosphor), `ri` (Remix), `carbon`.
+
+**Example:**
+```
+icon db    label="Database"  name="mdi:database"       color="#1976D2"
+icon cloud label="Cloud"     name="mdi:cloud-outline"  color="#FF9800" width=64 height=64
+icon lock  name="mdi:lock"   color="#E53935"
+icon user  name="lucide:user"
+```
+
+---
+
 ### Edges
 
 ```
@@ -483,6 +526,19 @@ Apply to any element: `box a theme=primary`, `group g theme=muted`, `note n them
 
 ---
 
+### Style Directive
+
+Apply styles to any element after it's defined, by targeting its id:
+
+```
+box a label="Hello"
+style a fill="#ff0000" stroke="#cc0000" font-size=16
+```
+
+This merges with any existing styles on the element. Useful for separating layout from styling.
+
+---
+
 ### Typography
 
 Typography properties work on all text-bearing elements.
@@ -540,6 +596,7 @@ All actions work on **all element types** — nodes, groups, tables, notes, char
 | Option | Description |
 |---|---|
 | `duration=600` | Animation duration in ms |
+| `delay=100` | Delay before animation starts in ms |
 | `dx=100` | X offset for `move` |
 | `dy=-80` | Y offset for `move` |
 | `factor=1.5` | Scale multiplier |

package/dist/index.cjs

@@ -424,7 +424,7 @@ function parse(src) {
             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) } : {}),
@@ -1509,10 +1509,13 @@ function sizeNode(n) {
             }
             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;
@@ -5116,27 +5119,32 @@ function renderShape$1(rc, n, palette) {
                 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);
@@ -5162,12 +5170,15 @@ function renderShape$1(rc, n, palette) {
         }
         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");
@@ -5177,7 +5188,7 @@ function renderShape$1(rc, n, palette) {
                 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);
@@ -5429,11 +5440,14 @@ function renderToSVG(sg, container, options = {}) {
         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)
@@ -6144,7 +6158,10 @@ function renderShape(rc, ctx, n, palette, R) {
                 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';
@@ -6152,23 +6169,23 @@ function renderShape(rc, ctx, n, palette, R) {
                     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' });
                     }
@@ -6182,6 +6199,9 @@ function renderShape(rc, ctx, n, palette, R) {
         }
         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 = () => {
@@ -6191,15 +6211,15 @@ function renderShape(rc, ctx, n, palette, R) {
                     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) {
@@ -6391,9 +6411,12 @@ function renderToCanvas(sg, canvas, options = {}) {
         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);