fix: step fields styles

web/scripts/audit-cdp.mjs

@@ -639,6 +639,15 @@ const sig = (n) =>
 const sameNode = (x, y) => {
 	if (x.tag !== y.tag) return false;
 	if (x.tag === "svg") return true; // icons: design vs library classes differ
+	// Leaf controls (buttons/links/labels) are identified by their text label:
+	// the ref and the app may name the same control with different classes
+	// (e.g. "selected" vs "segment selected"), so a class-list match alone
+	// mis-pairs them (and a classless ref button would otherwise match any
+	// sibling). Matching by label keeps the pairings stable.
+	if (
+		(x.tag === "button" || x.tag === "a" || x.tag === "label") && x.text && y.text
+	)
+		return x.text === y.text;
 	const cx = [...x.classes].sort().join(" ");
 	const cy = [...y.classes].sort().join(" ");
 	return cx === cy || !x.classes.length || !y.classes.length;

web/src/lib/components/kit/ColorField.svelte

@@ -8,7 +8,13 @@
 		chevron?: boolean;
 		oninput?: (value: string) => void;
 	}
-	let { label, value = $bindable(), dark = false, chevron = false, oninput }: Props = $props();
+	let {
+		label,
+		value = $bindable(),
+		dark = false,
+		chevron = false,
+		oninput,
+	}: Props = $props();
 
 	function handle(e: Event) {
 		value = (e.target as HTMLInputElement).value;
@@ -20,51 +26,52 @@
 	<label>{label}</label>
 	<div class="color-field">
 		<span class="swatch" class:dark style="background:{value}"></span>
-		<input type="text" aria-label={label} {value} oninput={handle} spellcheck="false" />
-		{#if chevron}<ChevronDown size={14} />{/if}
+		<input
+			type="text"
+			aria-label={label}
+			{value}
+			oninput={handle}
+			spellcheck="false"
+		/>
+		{#if chevron}<ChevronDown class="icon" size={14} />{/if}
 	</div>
 </div>
 
 <style>
-	.control-block {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
+	.control-block :global(.icon) {
+		color: var(--foreground);
 	}
 	label {
 		display: flex;
 		justify-content: space-between;
-		align-items: baseline;
-		gap: 8px;
 		font: 10px var(--font-mono);
-		letter-spacing: 0.05em;
-		text-transform: uppercase;
+		letter-spacing: 0.08em;
 		color: var(--muted);
 		margin-bottom: 8px;
 	}
 	.color-field {
 		display: flex;
 		align-items: center;
-		gap: 0.4rem;
+		gap: 8px;
+		padding-left: 8px;
+		padding-right: 8px;
+		height: 32px;
 	}
 	.swatch {
-		width: 1.6rem;
-		height: 1.6rem;
+		width: 14px;
+		height: 14px;
 		border: 1px solid var(--line);
 		border-radius: var(--radius);
 		flex: none;
 	}
 	.color-field input {
-		flex: 1;
 		min-width: 0;
-		font-family: var(--font-mono);
-		font-size: 11px;
 		color: var(--foreground);
-		background: var(--background);
-		border: 1px solid var(--line);
-		border-radius: var(--radius);
-		padding: 0.35rem 0.5rem;
-		text-transform: uppercase;
+		font: 11px var(--font-mono);
+		background: 0 0;
+		border: 0;
+		outline: 0;
+		flex: 1;
 	}
 	.color-field :global(svg) {
 		color: var(--muted);

web/src/lib/components/kit/FieldGrid.svelte

@@ -14,13 +14,10 @@
 </div>
 
 <style>
-	/* Реф раскладывает контролы горизонтальным рядом ячеек, каждая с
-	   верхней границей-разделителем (≈189px, font-size 16px). */
 	.controls {
 		display: grid;
-		grid-auto-flow: column;
-		grid-auto-columns: minmax(0, 1fr);
-		gap: 0 24px;
+		grid-template-columns: 1.1fr 1fr 1.2fr;
+		gap: 16px;
 	}
 	.controls.compact {
 		display: grid;
@@ -28,12 +25,7 @@
 		grid-auto-columns: minmax(0, 1fr);
 		gap: 0 16px;
 	}
-	/* Верхняя граница-разделитель на каждой ячейке контрола. */
-	.controls > :global(*) {
-		border-top: 1px solid var(--line);
-		padding-top: 10px;
-		min-width: 0;
-	}
+
 	@media (max-width: 800px) {
 		.controls,
 		.controls.compact {

web/src/lib/components/kit/Segmented.svelte

@@ -33,7 +33,7 @@
 
 <style>
 	.segmented {
-		display: inline-flex;
+		display: flex;
 		height: 32px;
 		border: 1px solid var(--line);
 		border-radius: var(--radius);
@@ -41,22 +41,17 @@
 		background: var(--background);
 	}
 	.segment {
-		border: none;
-		background: transparent;
+		border: 0;
+		border-right: 1px solid var(--line);
 		color: var(--muted);
-		font-family: var(--font-mono);
-		font-size: 10px;
-		text-transform: uppercase;
-		letter-spacing: 0.06em;
-		padding: 0 0.7rem;
-		cursor: pointer;
-		display: inline-flex;
-		align-items: center;
+		font: 10px var(--font-mono);
+		background: 0 0;
+		flex: 1;
 	}
 	.segment + .segment {
 		border-left: 1px solid var(--line);
 	}
-	.segment.active {
+	.segment.selected {
 		background: var(--blue);
 		color: #fff;
 	}

web/src/lib/components/kit/SliderField.svelte

@@ -30,19 +30,11 @@
 </div>
 
 <style>
-	.control-block {
-		display: flex;
-		flex-direction: column;
-		gap: 0;
-	}
 	label {
 		display: flex;
-		align-items: center;
 		justify-content: space-between;
-		gap: 0.5rem;
 		font: 10px var(--font-mono);
-		letter-spacing: 0.05em;
-		text-transform: uppercase;
+		letter-spacing: 0.08em;
 		color: var(--muted);
 		margin-bottom: 8px;
 	}

web/src/lib/components/kit/StepCard.svelte

@@ -45,8 +45,8 @@
 <style>
 	.step-card {
 		display: grid;
-		grid-template-columns: 46px 1fr;
-		grid-template-rows: auto 1fr;
+		grid-template-columns: 46px 20px 1fr;
+		min-height: 138px;
 		border: 1px solid var(--line);
 		border-radius: var(--radius);
 		background: var(--panel);
@@ -56,17 +56,14 @@
 		grid-column: 1;
 		grid-row: 1;
 		font: 600 22px var(--font-mono);
-		line-height: 1;
 		color: var(--blue);
-		padding: 17px 0 6px 15px;
+		padding: 17px 0 0px 15px;
 		border-right: 1px solid var(--line);
 	}
 	.step-body {
 		grid-column: 2;
 		grid-row: 1 / span 2;
-		min-width: 0;
-		display: flex;
-		flex-direction: column;
+		padding: 15px 18px 18px;
 	}
 	.step-heading {
 		display: flex;
@@ -96,6 +93,10 @@
 		color: var(--muted);
 		cursor: pointer;
 	}
+	.step-card :global(.drag) {
+		margin-top: 17px;
+		color: var(--line);
+	}
 	.step-remove:hover {
 		color: var(--danger);
 	}

web/src/routes/preview/demo/+page.svelte

@@ -241,11 +241,6 @@
 		gap: 10px;
 		padding-top: 14px;
 	}
-	.control-block {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-	}
 	.transform-note {
 		display: flex;
 		align-items: center;
@@ -312,4 +307,15 @@
 		font-size: 11px;
 		line-height: 1.5;
 	}
+	label {
+		color: var(--muted);
+		font: 10px var(--font-mono);
+		letter-spacing: 0.08em;
+		justify-content: space-between;
+		margin-bottom: 8px;
+		display: flex;
+		& output {
+			color: var(--foreground);
+		}
+	}
 </style>

web/src/routes/preview/demo/WorkspaceHeader.svelte

@@ -18,7 +18,8 @@
 </script>
 
 <div class="eyebrow">
-	{eyebrowA} <span>/</span> {eyebrowB}
+	{eyebrowA} <span>/</span>
+	{eyebrowB}
 </div>
 <div class="title-row">
 	<div>
@@ -34,12 +35,12 @@
 	.eyebrow {
 		font: 10px var(--font-mono);
 		letter-spacing: 0.12em;
-		color: var(--muted);
+		color: var(--blue);
 		margin-bottom: 18px;
 	}
 	.eyebrow span {
 		margin: 0 7px;
-		color: var(--blue);
+		color: var(--muted);
 	}
 	.title-row {
 		display: flex;
@@ -52,9 +53,10 @@
 		margin: 0 0 16px;
 		font-size: clamp(36px, 4vw, 64px);
 		font-weight: 650;
-		line-height: 0.9;
+		line-height: 1;
 		letter-spacing: -0.06em;
 		color: var(--foreground);
+		max-width: 700px;
 	}
 	.lede {
 		margin: 0;