@dryui/ui 0.5.2 → 1.1.0

package/dist/diagram/diagram.svelte

@@ -7,9 +7,10 @@
 		config: DiagramConfig;
 		width?: number;
 		height?: number;
+		fit?: 'contain' | 'native';
 	}
 
-	let { config, width, height, class: className, ...rest }: Props = $props();
+	let { config, width, height, fit = 'contain', class: className, ...rest }: Props = $props();
 
 	const layout = $derived(computeLayout(config));
 	const vbW = $derived(width ?? layout.viewBox.width);
@@ -18,8 +19,10 @@
 	const uid = Math.random().toString(36).slice(2, 8);
 </script>
 
-<div data-diagram-container>
+<div data-diagram-container data-fit={fit}>
 	<svg
+		width={fit === 'native' ? vbW : undefined}
+		height={fit === 'native' ? vbH : undefined}
 		viewBox="0 0 {vbW} {vbH}"
 		preserveAspectRatio="xMidYMin meet"
 		role="img"
@@ -56,6 +59,8 @@
 		{#if layout.clusters.length > 0}
 			<g data-part="clusters">
 				{#each layout.clusters as cluster (cluster.id)}
+					{@const ClusterIcon = cluster.iconComponent}
+					{@const labelOnLeft = cluster.labelPosition === 'left'}
 					<g data-part="cluster" data-color={cluster.color}>
 						<rect
 							data-part="cluster-box"
@@ -63,13 +68,57 @@
 							y={cluster.y}
 							width={cluster.width}
 							height={cluster.height}
-							rx="12"
+							rx="16"
 							data-dashed={cluster.dashed || undefined}
 						/>
 						{#if cluster.label}
-							<text data-part="cluster-label" x={cluster.x + 20} y={cluster.y + 22}
-								>{cluster.label}</text
-							>
+							{#if labelOnLeft}
+								{@const lcx = cluster.x + 16}
+								{@const lcy = cluster.y + cluster.height / 2}
+								{#if ClusterIcon}
+									{@const lw = Math.max(cluster.height - 32, 80)}
+									<g transform="rotate(-90 {lcx} {lcy})">
+										<foreignObject x={lcx - lw / 2} y={lcy - 12} width={lw} height={24}>
+											<div
+												xmlns="http://www.w3.org/1999/xhtml"
+												data-part="cluster-label-row"
+												data-color={cluster.color}
+											>
+												<ClusterIcon size={14} aria-hidden="true" />
+												<span>{cluster.label}</span>
+											</div>
+										</foreignObject>
+									</g>
+								{:else}
+									<text
+										data-part="cluster-label"
+										x={lcx}
+										y={lcy}
+										text-anchor="middle"
+										transform="rotate(-90 {lcx} {lcy})">{cluster.label}</text
+									>
+								{/if}
+							{:else if ClusterIcon}
+								<foreignObject
+									x={cluster.x + 16}
+									y={cluster.y + 10}
+									width={Math.max(cluster.width - 32, 80)}
+									height={24}
+								>
+									<div
+										xmlns="http://www.w3.org/1999/xhtml"
+										data-part="cluster-label-row"
+										data-color={cluster.color}
+									>
+										<ClusterIcon size={14} aria-hidden="true" />
+										<span>{cluster.label}</span>
+									</div>
+								</foreignObject>
+							{:else}
+								<text data-part="cluster-label" x={cluster.x + 20} y={cluster.y + 22}
+									>{cluster.label}</text
+								>
+							{/if}
 						{/if}
 					</g>
 				{/each}
@@ -214,12 +263,13 @@
 		<!-- Layer 2: Edges -->
 		<g data-part="edges">
 			{#each layout.edges as edge, index (`${edge.from}:${edge.to}:${index}`)}
+				{@const isEntry = edge.kind === 'entry'}
 				{@const markerEnd =
-					edge.arrow === 'end' || edge.arrow === 'both'
+					!isEntry && (edge.arrow === 'end' || edge.arrow === 'both')
 						? `url(#dry-diagram-${uid}-arrow-${edge.color})`
 						: undefined}
 				{@const markerStart =
-					edge.arrow === 'start' || edge.arrow === 'both'
+					!isEntry && (edge.arrow === 'start' || edge.arrow === 'both')
 						? `url(#dry-diagram-${uid}-arrow-${edge.color})`
 						: undefined}
 				{@const isSelfLoop = edge.from === edge.to}
@@ -243,9 +293,60 @@
 			{/each}
 		</g>
 
+		<!-- Layer 2b: Waypoints (cards sitting on edges) -->
+		{#if layout.waypoints.length > 0}
+			<g data-part="waypoints">
+				{#each layout.waypoints as wp (wp.id)}
+					{@const WpIcon = wp.iconComponent}
+					<g
+						data-part="waypoint"
+						data-variant={wp.variant}
+						data-color={wp.color}
+						transform="translate({wp.x},{wp.y})"
+					>
+						<rect
+							data-part="node-box"
+							width={wp.width}
+							height={wp.height}
+							rx={wp.variant === 'pill' ? wp.height / 2 : 16}
+						/>
+						{#if wp.variant === 'filled'}
+							<rect
+								data-part="node-texture"
+								width={wp.width}
+								height={wp.height}
+								rx={16}
+								fill="url(#dry-diagram-{uid}-dots)"
+							/>
+						{/if}
+						<foreignObject x="0" y="0" width={wp.width} height={wp.height}>
+							<div
+								data-part="node-content"
+								data-has-description={wp.description ? '' : undefined}
+								data-has-icon-component={WpIcon ? '' : undefined}
+							>
+								{#if WpIcon}
+									<span data-part="node-icon" data-icon-svg=""
+										><WpIcon size={22} aria-hidden="true" /></span
+									>
+								{:else if wp.icon}
+									<span data-part="node-icon">{wp.icon}</span>
+								{/if}
+								<span data-part="node-label">{wp.label}</span>
+								{#if wp.description}
+									<span data-part="node-description">{wp.description}</span>
+								{/if}
+							</div>
+						</foreignObject>
+					</g>
+				{/each}
+			</g>
+		{/if}
+
 		<!-- Layer 3: Nodes -->
 		<g data-part="nodes">
 			{#each layout.nodes as node (node.id)}
+				{@const NodeIcon = node.iconComponent}
 				<g
 					data-part="node"
 					data-variant={node.variant}
@@ -270,8 +371,16 @@
 						/>
 					{/if}
 					<foreignObject x="0" y="0" width={node.width} height={node.height}>
-						<div data-part="node-content" data-has-description={node.description ? '' : undefined}>
-							{#if node.icon}
+						<div
+							data-part="node-content"
+							data-has-description={node.description ? '' : undefined}
+							data-has-icon-component={NodeIcon ? '' : undefined}
+						>
+							{#if NodeIcon}
+								<span data-part="node-icon" data-icon-svg=""
+									><NodeIcon size={22} aria-hidden="true" /></span
+								>
+							{:else if node.icon}
 								<span data-part="node-icon">{node.icon}</span>
 							{/if}
 							<span data-part="node-label">{node.label}</span>
@@ -299,9 +408,31 @@
 	/* ── Container ──────────────────────────────────── */
 	[data-diagram-container] {
 		display: grid;
+		grid-template-columns: minmax(0, 1fr);
+		align-content: start;
+		container-type: inline-size;
+		container-name: dry-diagram;
 		min-height: 120px;
 		max-block-size: var(--dry-diagram-max-height, none);
-		overflow: auto;
+	}
+
+	[data-diagram-container][data-fit='native'] {
+		grid-template-columns: auto;
+		justify-content: start;
+		overflow-x: auto;
+		overflow-y: hidden;
+	}
+
+	@container dry-diagram (max-width: 480px) {
+		[data-part='node-content'] {
+			padding: var(--dry-diagram-node-padding-mobile, 12px 14px);
+		}
+		[data-part='node-content'][data-has-description] {
+			padding: var(--dry-diagram-node-padding-with-description-mobile, 14px 16px);
+		}
+		[data-part='node-description'] {
+			display: none;
+		}
 	}
 
 	/* ── SVG root ───────────────────────────────────── */
@@ -309,16 +440,21 @@
 		--_node-bg: var(--dry-diagram-node-bg, var(--dry-color-bg-base));
 		--_node-border: var(--dry-diagram-node-border, var(--dry-color-stroke-weak));
 		--_node-color: var(--dry-diagram-node-color, var(--dry-color-text-strong));
-		--_edge-color: var(
-			--dry-diagram-edge-color,
-			color-mix(in srgb, var(--dry-color-text-strong) 24%, var(--dry-color-bg-base))
-		);
+		--_edge-color: var(--dry-diagram-edge-color, var(--dry-color-text-strong));
 		--_cluster-bg: var(
 			--dry-diagram-cluster-bg,
 			color-mix(in srgb, var(--dry-color-fill) 30%, transparent)
 		);
 		--_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;
@@ -371,42 +507,62 @@
 	[data-part='node-content'] {
 		display: grid;
 		place-items: center;
-		gap: 2px;
-		padding: 8px 20px;
+		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-family: var(--dry-font-mono);
-		font-size: 14px;
-		font-weight: 500;
+		font-size: var(--_node-label-size);
+		font-weight: 600;
 		color: var(--_node-color);
 		text-align: center;
-		line-height: 1.3;
-		letter-spacing: 0.02em;
+		line-height: 1.2;
+		letter-spacing: 0.005em;
 		white-space: nowrap;
 	}
 
 	[data-part='node-icon'] {
-		font-size: 16px;
+		font-size: 18px;
 		line-height: 1;
 		text-align: center;
 	}
 
+	[data-part='node-icon'][data-icon-svg] {
+		display: grid;
+		place-items: center;
+		color: var(--_node-color);
+		line-height: 0;
+	}
+
 	[data-part='node-description'] {
-		font-family: var(--dry-font-mono);
-		font-size: 11px;
+		font-size: var(--_node-description-size);
 		font-weight: 400;
 		color: var(--_text-muted);
 		text-align: center;
-		line-height: 1.3;
+		line-height: 1.35;
 	}
 
 	[data-part='node-content'][data-has-description] {
-		padding: 10px 24px;
+		padding: var(--_node-padding-with-description);
+		gap: var(--_node-gap-with-description);
 		text-align: left;
 		place-items: start;
+		grid-template-rows: auto auto 1fr;
+	}
+
+	[data-part='node-content'][data-has-description] [data-part='node-icon'] {
+		padding-block-end: 4px;
+	}
+
+	[data-part='node-content'][data-has-description] [data-part='node-label'] {
+		font-size: var(--_node-label-size-with-description);
+	}
+
+	[data-part='node-content'][data-has-description] [data-part='node-description'] {
+		text-align: left;
 	}
 
 	/* ── Node variant: outlined ──────────────────── */
@@ -422,27 +578,38 @@
 	}
 
 	/* ── Node colors via custom property indirection ─ */
-	[data-part='node'][data-color='brand'] {
+	[data-part='node'][data-color='brand'],
+	[data-part='waypoint'][data-color='brand'] {
 		--_node-border: var(--dry-color-stroke-brand);
 		--_node-color: var(--dry-color-text-brand);
 	}
-	[data-part='node'][data-color='success'] {
+	[data-part='node'][data-color='success'],
+	[data-part='waypoint'][data-color='success'] {
 		--_node-border: var(--dry-color-stroke-success);
 		--_node-color: var(--dry-color-text-success);
 	}
-	[data-part='node'][data-color='warning'] {
+	[data-part='node'][data-color='warning'],
+	[data-part='waypoint'][data-color='warning'] {
 		--_node-border: var(--dry-color-stroke-warning);
 		--_node-color: var(--dry-color-text-warning);
 	}
-	[data-part='node'][data-color='error'] {
+	[data-part='node'][data-color='error'],
+	[data-part='waypoint'][data-color='error'] {
 		--_node-border: var(--dry-color-stroke-error);
 		--_node-color: var(--dry-color-text-error);
 	}
-	[data-part='node'][data-color='info'] {
+	[data-part='node'][data-color='info'],
+	[data-part='waypoint'][data-color='info'] {
 		--_node-border: var(--dry-color-stroke-info);
 		--_node-color: var(--dry-color-text-info);
 	}
 
+	[data-part='waypoint'] [data-part='node-box'] {
+		fill: var(--_node-bg);
+		stroke: var(--_node-border);
+		stroke-width: 2;
+	}
+
 	/* ── Node states ────────────────────────────────── */
 	[data-part='node'][data-state='active'] [data-part='node-box'] {
 		stroke-width: 2;
@@ -529,6 +696,37 @@
 		fill: var(--_text-muted);
 	}
 
+	[data-part='cluster-label-row'] {
+		display: grid;
+		grid-template-columns: auto auto;
+		align-items: center;
+		justify-content: start;
+		gap: 8px;
+		font-family: var(--dry-font-sans);
+		font-size: var(--_cluster-label-size);
+		font-weight: 600;
+		color: var(--_text-muted);
+		letter-spacing: 0.04em;
+		text-transform: uppercase;
+		line-height: 1;
+	}
+
+	[data-part='cluster-label-row'][data-color='brand'] {
+		color: var(--dry-color-text-brand);
+	}
+	[data-part='cluster-label-row'][data-color='success'] {
+		color: var(--dry-color-text-success);
+	}
+	[data-part='cluster-label-row'][data-color='warning'] {
+		color: var(--dry-color-text-warning);
+	}
+	[data-part='cluster-label-row'][data-color='error'] {
+		color: var(--dry-color-text-error);
+	}
+	[data-part='cluster-label-row'][data-color='info'] {
+		color: var(--dry-color-text-info);
+	}
+
 	/* ── Regions ────────────────────────────────────── */
 	[data-part='region-box'] {
 		fill: var(--_cluster-bg);

package/dist/diagram/diagram.svelte.d.ts

@@ -4,6 +4,7 @@ interface Props extends SVGAttributes<SVGSVGElement> {
     config: DiagramConfig;
     width?: number;
     height?: number;
+    fit?: 'contain' | 'native';
 }
 declare const Diagram: import("svelte").Component<Props, {}, "">;
 type Diagram = ReturnType<typeof Diagram>;

package/dist/diagram/edge-routing.d.ts

@@ -1,9 +1,71 @@
 import type { DiagramEdge, DiagramDirection, PositionedEdge } from './types.js';
+/** Minimum distance (in path units, measured along the polyline) between a
+ *  forward edge label and a directed-cluster boundary. Cross-boundary edges
+ *  whose natural midpoint sits closer than this to the cluster are slid along
+ *  the polyline toward the outside endpoint. */
+export declare const LABEL_BORDER_AVOID_PX = 28;
+interface Point {
+    x: number;
+    y: number;
+}
+export interface EdgeRouteBounds {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+}
+export interface ComputedEdges {
+    edges: PositionedEdge[];
+    collapsed: (Point[] | null)[];
+}
+export interface ComputeEdgePathsOptions {
+    cornerRadius?: number;
+    reversedEdges?: Set<string>;
+    bounds?: EdgeRouteBounds;
+    backEdgeLaneGap?: number;
+    /** Set of node IDs that are super-nodes representing directed-cluster
+     *  boundaries. Forward edge labels touching a super-node endpoint are
+     *  biased away from that side along the polyline. */
+    superNodeIds?: Set<string>;
+    /** For cross-boundary back edges only: optionally anchor source and/or
+     *  target to a different node ID than the edge's `from`/`to`. The layered
+     *  orchestrator uses this to re-anchor a cross-boundary back edge from
+     *  the cluster super-node to a specific inner node. The override is
+     *  applied only when the edge is in `reversedEdges`, so forward
+     *  cross-boundary edges keep super-node anchoring. */
+    backEdgeAnchorOverrides?: Map<string, {
+        source?: string;
+        target?: string;
+    }>;
+}
 export declare function computeEdgePaths(edges: DiagramEdge[], positions: Map<string, {
     x: number;
     y: number;
 }>, nodeDims: Map<string, {
     w: number;
     h: number;
-}>, direction: DiagramDirection): PositionedEdge[];
+}>, direction: DiagramDirection, opts?: ComputeEdgePathsOptions): ComputedEdges;
+declare function buildPathFromCollapsed(collapsed: Point[], cornerRadius?: number): string;
+declare function collapsePoints(points: Point[]): Point[];
+export interface PointAtFraction {
+    point: Point;
+    segmentIndex: number;
+    axis: 'h' | 'v';
+}
+export declare function getPointAtFraction(collapsed: Point[], t: number): PointAtFraction;
+export interface WaypointBox {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** Split a collapsed polyline at the entry/exit intersections with a box centered on a point.
+ * The box is placed perpendicular to the segment containing the split point, so the polyline
+ * enters one side of the box and exits the opposite side. Returns null if the split is degenerate.
+ */
+export declare function splitCollapsedAtBox(collapsed: Point[], segmentIndex: number, box: WaypointBox, axis: 'h' | 'v'): {
+    entry: Point[];
+    exit: Point[];
+} | null;
+export { collapsePoints, buildPathFromCollapsed };
 export declare function emptyEdge(edge: DiagramEdge): PositionedEdge;