@dryui/ui 1.0.0 → 1.1.0

package/dist/code-block/code-block-button.svelte

@@ -207,6 +207,14 @@
 		z-index: 1;
 		display: inline-grid;
 		color: var(--dry-code-copy-color);
+		--dry-btn-color: var(--dry-code-copy-color);
+	}
+
+	[data-code-block]:hover .copy-btn-slot,
+	[data-code-block]:focus-within .copy-btn-slot,
+	[data-code-block][data-copied] .copy-btn-slot {
+		color: var(--dry-code-copy-hover-color);
+		--dry-btn-color: var(--dry-code-copy-hover-color);
 	}
 
 	[data-code-block]:has([data-code-block-header]) .copy-btn-slot {

package/dist/diagram/diagram.svelte

@@ -425,10 +425,10 @@
 
 	@container dry-diagram (max-width: 480px) {
 		[data-part='node-content'] {
-			padding: 12px 14px;
+			padding: var(--dry-diagram-node-padding-mobile, 12px 14px);
 		}
 		[data-part='node-content'][data-has-description] {
-			padding: 14px 16px;
+			padding: var(--dry-diagram-node-padding-with-description-mobile, 14px 16px);
 		}
 		[data-part='node-description'] {
 			display: none;
@@ -447,6 +447,14 @@
 		);
 		--_cluster-border: var(--dry-diagram-cluster-border, var(--dry-color-stroke-weak));
 		--_text-muted: var(--dry-diagram-text-muted, var(--dry-color-text-weak));
+		--_node-padding: var(--dry-diagram-node-padding, 16px 22px);
+		--_node-padding-with-description: var(--dry-diagram-node-padding-with-description, 18px 22px);
+		--_node-gap: var(--dry-diagram-node-gap, 8px);
+		--_node-gap-with-description: var(--dry-diagram-node-gap-with-description, 6px);
+		--_node-label-size: var(--dry-diagram-node-label-size, 15px);
+		--_node-label-size-with-description: var(--dry-diagram-node-label-size-with-description, 16px);
+		--_node-description-size: var(--dry-diagram-node-description-size, 12px);
+		--_cluster-label-size: var(--dry-diagram-cluster-label-size, 12px);
 
 		display: block;
 		overflow: visible;
@@ -499,15 +507,15 @@
 	[data-part='node-content'] {
 		display: grid;
 		place-items: center;
-		gap: 8px;
-		padding: 16px 22px;
+		gap: var(--_node-gap);
+		padding: var(--_node-padding);
 		height: 100%;
 		box-sizing: border-box;
 		font-family: var(--dry-font-sans);
 	}
 
 	[data-part='node-label'] {
-		font-size: 15px;
+		font-size: var(--_node-label-size);
 		font-weight: 600;
 		color: var(--_node-color);
 		text-align: center;
@@ -530,7 +538,7 @@
 	}
 
 	[data-part='node-description'] {
-		font-size: 12px;
+		font-size: var(--_node-description-size);
 		font-weight: 400;
 		color: var(--_text-muted);
 		text-align: center;
@@ -538,8 +546,8 @@
 	}
 
 	[data-part='node-content'][data-has-description] {
-		padding: 18px 22px;
-		gap: 6px;
+		padding: var(--_node-padding-with-description);
+		gap: var(--_node-gap-with-description);
 		text-align: left;
 		place-items: start;
 		grid-template-rows: auto auto 1fr;
@@ -550,7 +558,7 @@
 	}
 
 	[data-part='node-content'][data-has-description] [data-part='node-label'] {
-		font-size: 16px;
+		font-size: var(--_node-label-size-with-description);
 	}
 
 	[data-part='node-content'][data-has-description] [data-part='node-description'] {
@@ -695,7 +703,7 @@
 		justify-content: start;
 		gap: 8px;
 		font-family: var(--dry-font-sans);
-		font-size: 12px;
+		font-size: var(--_cluster-label-size);
 		font-weight: 600;
 		color: var(--_text-muted);
 		letter-spacing: 0.04em;

package/dist/diagram/layout.js

@@ -357,6 +357,7 @@ function computeNodeAndClusterBounds(nodes, clusters) {
 const WAYPOINT_DEFAULT_WIDTH = 240;
 const WAYPOINT_DEFAULT_HEIGHT_DESC = 132;
 const WAYPOINT_DEFAULT_HEIGHT = 84;
+const WAYPOINT_VERTICAL_EDGE_INSET_RATIO = 0.5;
 function estimateWaypointDims(waypoint) {
     const w = waypoint.width ??
         Math.max(MIN_NODE_WIDTH, waypoint.label.length * CHAR_WIDTH + NODE_PADDING_X, (waypoint.description?.length ?? 0) * 7 + NODE_PADDING_X);
@@ -364,6 +365,22 @@ function estimateWaypointDims(waypoint) {
         (waypoint.description ? WAYPOINT_DEFAULT_HEIGHT_DESC : WAYPOINT_DEFAULT_HEIGHT);
     return { w: Math.min(w, WAYPOINT_DEFAULT_WIDTH * 1.4), h };
 }
+function resolveVerticalWaypointLaneRatio(collapsed, segmentIndex) {
+    const laneX = collapsed[segmentIndex]?.x ?? collapsed[segmentIndex - 1]?.x;
+    if (laneX === undefined)
+        return 0.5;
+    const beforeSide = Math.sign((collapsed[segmentIndex - 2]?.x ?? laneX) - laneX);
+    if (beforeSide < 0)
+        return WAYPOINT_VERTICAL_EDGE_INSET_RATIO;
+    if (beforeSide > 0)
+        return 1 - WAYPOINT_VERTICAL_EDGE_INSET_RATIO;
+    const afterSide = Math.sign((collapsed[segmentIndex + 1]?.x ?? laneX) - laneX);
+    if (afterSide < 0)
+        return WAYPOINT_VERTICAL_EDGE_INSET_RATIO;
+    if (afterSide > 0)
+        return 1 - WAYPOINT_VERTICAL_EDGE_INSET_RATIO;
+    return 0.5;
+}
 function placeWaypoints(configEdges, positionedEdges, collapsedByIndex, cornerRadius) {
     const newEdges = [];
     const waypoints = [];
@@ -379,13 +396,10 @@ function placeWaypoints(configEdges, positionedEdges, collapsedByIndex, cornerRa
         const t = wp.position ?? 0.5;
         const at = getPointAtFraction(collapsed, t);
         const dims = estimateWaypointDims(wp);
-        // Snap box center to the segment axis so the polyline enters/exits cleanly
-        const boxCenter = at.axis === 'h'
-            ? { x: at.point.x, y: at.point.y } // horizontal segment — box vertical center on the line
-            : { x: at.point.x, y: at.point.y };
+        const laneRatio = at.axis === 'v' ? resolveVerticalWaypointLaneRatio(collapsed, at.segmentIndex) : 0.5;
         const box = {
-            x: boxCenter.x - dims.w / 2,
-            y: boxCenter.y - dims.h / 2,
+            x: at.point.x - dims.w * laneRatio,
+            y: at.point.y - dims.h / 2,
             width: dims.w,
             height: dims.h
         };

package/dist/diagram/types.d.ts

@@ -1,10 +1,7 @@
-import type { Component } from 'svelte';
+import type { Component, ComponentType } from 'svelte';
 export type DiagramColor = 'neutral' | 'brand' | 'success' | 'warning' | 'error' | 'info';
 export type DiagramDirection = 'TB' | 'BT' | 'LR' | 'RL';
-export type DiagramIconComponent = Component<{
-    size?: number | string;
-    'aria-hidden'?: boolean | string;
-}>;
+export type DiagramIconComponent = Component<Record<string, unknown>> | ComponentType;
 export interface DiagramNode {
     id: string;
     label: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryui/ui",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "author": "Rob Balfre",
   "license": "MIT",
   "repository": {
@@ -770,7 +770,7 @@
     "postpack": "bun ../../scripts/postpack-exports.ts"
   },
   "dependencies": {
-    "@dryui/primitives": "^1.0.0"
+    "@dryui/primitives": "^1.1.0"
   },
   "peerDependencies": {
     "svelte": "^5.55.1"