delay icon: dashed input + delayed output sine pair

Author: milanofthe

src/lib/components/icons/BlockIcon.svelte

@@ -40,6 +40,7 @@
 		{#if def.kind === 'plot'}
 			<IconPlot
 				samples={def.samples()}
+				samplesDashed={def.samplesDashed?.()}
 				xRange={def.xRange}
 				yRange={def.yRange}
 				axes={def.axes}

src/lib/components/icons/blocks/IconPlot.svelte

@@ -6,6 +6,7 @@
 
 	interface Props {
 		samples: Sample[];
+		samplesDashed?: Sample[];
 		xRange?: [number, number];
 		yRange?: [number, number];
 		axes?: AxesMode;
@@ -15,6 +16,7 @@
 
 	let {
 		samples,
+		samplesDashed,
 		xRange = [0, 1],
 		yRange = [0, 1],
 		axes = 'cross',
@@ -23,6 +25,11 @@
 	}: Props = $props();
 
 	const path = $derived(buildPath(samples, xRange[0], xRange[1], yRange[0], yRange[1]));
+	const pathDashed = $derived(
+		samplesDashed
+			? buildPath(samplesDashed, xRange[0], xRange[1], yRange[0], yRange[1])
+			: ''
+	);
 
 	const xAxisY = $derived(
 		yRange[0] <= 0 && yRange[1] >= 0 ? mapY(0, yRange[0], yRange[1]) : AXIS_BOX.y1
@@ -42,6 +49,9 @@
 	{#if axes === 'cross'}
 		<line x1={yAxisX} y1={AXIS_BOX.y0} x2={yAxisX} y2={AXIS_BOX.y1} />
 	{/if}
+	{#if pathDashed}
+		<path d={pathDashed} stroke-dasharray="3 2.5" />
+	{/if}
 	<path d={path} />
 	{#if markers}
 		{#each finiteSamples as [x, v]}

src/lib/components/icons/blocks/curves.ts

@@ -287,6 +287,27 @@ export function delaySamples(t1 = 0.15, tau = 0.3): Sample[] {
 	];
 }
 
+/** Input sine for the Delay icon — runs over the full window, one full cycle. */
+export function delayInputSineSamples(cycles = 1, n = 64): Sample[] {
+	const out: Sample[] = [];
+	for (let i = 0; i < n; i++) {
+		const t = i / (n - 1);
+		out.push([t, Math.sin(2 * Math.PI * cycles * t)]);
+	}
+	return out;
+}
+
+/** Output sine for the Delay icon — flat at 0 until t1, then the same sine
+ *  shifted by t1 (so it tracks the input one delay later). */
+export function delayOutputSineSamples(t1 = 0.25, cycles = 1, n = 56): Sample[] {
+	const out: Sample[] = [[0, 0], [t1, 0]];
+	for (let i = 1; i < n; i++) {
+		const t = t1 + (1 - t1) * (i / (n - 1));
+		out.push([t, Math.sin(2 * Math.PI * cycles * (t - t1))]);
+	}
+	return out;
+}
+
 /** Differentiator step response: a sharp impulse at the step instant */
 export function impulseSamples(t0 = 0.45, width = 0.04): Sample[] {
 	return [

src/lib/components/icons/blocks/registry.ts

@@ -15,7 +15,7 @@ import * as C from './curves';
 type AxesMode = 'none' | 'baseline' | 'cross';
 
 export type IconDef =
-	| { kind: 'plot'; samples: () => Sample[]; xRange?: [number, number]; yRange?: [number, number]; axes?: AxesMode; markers?: boolean; decoration?: 'arrow-up' | 'arrow-down' }
+	| { kind: 'plot'; samples: () => Sample[]; samplesDashed?: () => Sample[]; xRange?: [number, number]; yRange?: [number, number]; axes?: AxesMode; markers?: boolean; decoration?: 'arrow-up' | 'arrow-down' }
 	| { kind: 'scope'; samples: () => Sample[]; samples2?: () => Sample[]; yRange?: [number, number]; gridX?: number; gridY?: number }
 	| { kind: 'surface'; fn?: (u: number, v: number) => number; rows?: number; cols?: number }
 	| { kind: 'math'; latex: string }
@@ -52,7 +52,12 @@ export const iconRegistry: Record<string, IconDef> = {
 	LeadLag: { kind: 'plot', samples: () => C.leadLagStepSamples(), yRange: LEADLAG_RANGE },
 	Integrator: { kind: 'plot', samples: () => C.rampSamples() },
 	Differentiator: { kind: 'plot', samples: () => C.differentiatorBode() },
-	Delay: { kind: 'plot', samples: () => C.delaySamples() },
+	Delay: {
+		kind: 'plot',
+		samples: () => C.delayOutputSineSamples(),
+		samplesDashed: () => C.delayInputSineSamples(),
+		yRange: Y_BIPOLAR
+	},
 	PID: { kind: 'plot', samples: () => C.pidStepSamples(), yRange: PT2_RANGE },
 	AntiWindupPID: { kind: 'plot', samples: () => C.pt1StepSamples(0.12, 0.12) },