@stacksjs/defaults 0.75.360 → 0.75.362

package/ai/skills/stacks-technical-diagrams/renderers/shared/layout-report.mjs

@@ -15,6 +15,21 @@ export function componentBox(c) {
   };
 }
 
+export function entityBox(e) {
+  return {
+    id: e.id,
+    label: e.label,
+    x: Math.round(e.x),
+    y: Math.round(e.y),
+    width: e.width,
+    height: e.height,
+    attributes: (Array.isArray(e.attributes) ? e.attributes : []).map((attribute) => attribute.name),
+    ...(Number.isInteger(e.row) ? { row: e.row } : {}),
+    ...(Number.isInteger(e.col) ? { col: e.col } : {}),
+    ...(Array.isArray(e.pos) ? { pos: e.pos.map(Math.round) } : {}),
+  };
+}
+
 export function boundaryBox(b) {
   return {
     kind: b.kind,
@@ -34,7 +49,9 @@ export function connectionPath(conn, routed, labelAt) {
     label: conn.label ?? null,
     variant: conn.variant ?? 'default',
     route: conn.route ?? 'auto',
-    points: routed.points.map(([x, y]) => [Math.round(x), Math.round(y)]),
+    // These points are repair inputs: rounding a fractional port makes a
+    // reused waypoint diagonal relative to the actual endpoint.
+    points: routed.points.map(([x, y]) => [x, y]),
     ...(labelAt ? { labelAt: labelAt.map(Math.round) } : {}),
   };
 }

package/ai/skills/stacks-technical-diagrams/renderers/shared/legend.mjs

@@ -52,13 +52,20 @@ export function resolveLegend(config, catalog, presentKinds) {
   });
 }
 
+// Labels render slightly larger than the layout font size; measure the
+// rendered size so a long label cannot run into the next entry.
+function renderedLegendFontSize(fontSize) {
+  return fontSize < 8 ? fontSize + 0.5 : fontSize + 2;
+}
+
 function measuredEntryWidth(entry, fontSize, swatchGap) {
   const swatchWidth = entry.swatchWidth ?? 14;
   return Math.ceil(
     swatchWidth
     + swatchGap
-    + textUnits(entry.label) * fontSize * TEXT_ADVANCE_EM
-    + (entry.interactive ? INTERACTIVE_BADGE_ALLOWANCE : 0),
+    + textUnits(entry.label) * renderedLegendFontSize(fontSize) * TEXT_ADVANCE_EM
+    + (entry.interactive ? INTERACTIVE_BADGE_ALLOWANCE : 0)
+    + (entry.trailingWidth ?? 0),
   );
 }
 
@@ -96,7 +103,7 @@ export function legendFootprint(entries, {
     measured,
     rows,
     rowCount: rows.length,
-    minWidth: Math.max(...measured.map((entry) => entry.width)),
+    minWidth: measured.reduce((width, entry) => Math.max(width, entry.width), 0),
     extraHeight: (rows.length - 1) * lineGap,
   };
 }
@@ -191,12 +198,15 @@ export function measureLegend(entries, {
   };
 }
 
-export function renderLegend({ entries, layout, renderSwatch, locale }) {
+// `labelClass`/`labelWeight` let a renderer state that its legend labels are
+// the same ink and weight as the value they describe; both default to the
+// shared presentation, so callers that pass nothing keep their exact bytes.
+export function renderLegend({ entries, layout, renderSwatch, locale, labelClass = 't-muted', labelWeight = 500 }) {
   if (!entries.length) return '';
   const measured = measureLegend(entries, layout);
   if (!measured) return '';
   const hasInteractiveEntries = measured.entries.some((entry) => entry.interactive);
-  const renderedFontSize = measured.fontSize < 8 ? measured.fontSize + 0.5 : measured.fontSize + 2;
+  const renderedFontSize = renderedLegendFontSize(measured.fontSize);
   const rootAttributes = hasInteractiveEntries ? ' data-legend="" data-legend-bridge=""' : ' data-legend=""';
   const parts = [
     `        <g${rootAttributes}>`,
@@ -209,7 +219,7 @@ export function renderLegend({ entries, layout, renderSwatch, locale }) {
       : '';
     parts.push(`          <g data-legend-semantic-kind="${esc(entry.kind)}"${interactive} data-legend-x="${entry.x}" data-legend-baseline="${entry.baseline}" data-legend-width="${entry.width}">`);
     parts.push(`            ${renderSwatch(entry)}`);
-    parts.push(`            <text x="${entry.x + (entry.swatchWidth ?? 14) + (entry.swatchGap ?? DEFAULT_SWATCH_GAP)}" y="${entry.baseline}" class="t-muted" font-size="${renderedFontSize}" font-weight="500">${esc(entry.label)}</text>`);
+    parts.push(`            <text x="${entry.x + (entry.swatchWidth ?? 14) + (entry.swatchGap ?? DEFAULT_SWATCH_GAP)}" y="${entry.baseline}" class="${labelClass}" font-size="${renderedFontSize}" font-weight="${labelWeight}">${esc(entry.label)}</text>`);
     parts.push('          </g>');
   }
   parts.push('        </g>');

package/ai/skills/stacks-technical-diagrams/renderers/shared/node-card-style.mjs

@@ -0,0 +1,32 @@
+// Shared card styling for the architecture and workflow renderers. Every
+// preset gets the cleaner cards and label chips; blueprint keeps its drafting
+// dash patterns and square corners.
+const TONES = ['frontend', 'backend', 'database', 'cloud', 'security', 'messagebus', 'external'];
+
+export const NODE_CARD_ATTR = 'data-node-ui=""';
+
+export function nodeCardStyle() {
+  const all = 'svg[data-node-ui]';
+  const solid = `${all}:is([data-preset="classic"], [data-preset="signal-flow"], [data-preset="editorial"])`;
+  const blueprint = `${all}[data-preset="blueprint"]`;
+  const editorial = `${all}[data-preset="editorial"]`;
+  const dark = `:is([data-theme="dark"] ${all}, ${all}[data-theme="dark"])`;
+  const node = '[data-node-id] > rect:not(.c-mask)';
+  const frameLabel = '[data-graph-role="structural-frame-label-mask"]';
+  const edgeLabel = 'g[data-edge-from] > rect.c-mask';
+  return `        <style>
+          ${all} ${node} { stroke-width: 1.25px; }
+${TONES.map((tone) => `          ${dark} ${node}.c-${tone} { fill: color-mix(in srgb, var(--${tone}-stroke) 13%, var(--mask)); stroke: color-mix(in srgb, var(--${tone}-stroke) 72%, var(--mask)); }`).join('\n')}
+          ${solid} .c-region { fill: color-mix(in srgb, var(--cloud-stroke) 3%, transparent); stroke: color-mix(in srgb, var(--cloud-stroke) 42%, var(--lane-stroke)); stroke-dasharray: none; }
+          ${all} .c-security-group { stroke: color-mix(in srgb, var(--security-stroke) 58%, var(--lane-stroke)); }
+          ${solid} .c-security-group { stroke-dasharray: 4 3; }
+          ${solid} .c-lane { stroke: var(--lane-stroke); stroke-dasharray: none; }
+          ${all} ${frameLabel} { rx: 5px; fill: color-mix(in srgb, var(--cloud-stroke) 10%, var(--mask)); stroke: color-mix(in srgb, var(--cloud-stroke) 38%, var(--mask)); stroke-width: .8px; }
+          ${all} [data-composition-frame-kind="security-group"] > ${frameLabel} { fill: color-mix(in srgb, var(--security-stroke) 9%, var(--mask)); stroke: color-mix(in srgb, var(--security-stroke) 36%, var(--mask)); }
+          ${all} .phase-rule { opacity: .5; stroke-dasharray: none; }
+          ${all} .phase-chip { stroke: var(--lane-stroke); stroke-width: .75px; }
+          ${all} ${edgeLabel} { rx: 7px; stroke: var(--lane-stroke); stroke-width: .75px; }
+          ${blueprint} :is(${frameLabel}, ${edgeLabel}, .phase-chip) { rx: 2px; }
+          ${editorial} :is(${frameLabel}, ${edgeLabel}, .phase-chip) { rx: 3px; }
+        </style>`;
+}