From aaf35fdbb0b1a100004202e771e47875ac6a62e8 Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Thu, 21 May 2026 21:07:40 +0200
Subject: [PATCH] =?UTF-8?q?fix(color-picker/demo):=20compact=20value=20row?=
 =?UTF-8?q?=20=E2=80=94=20swatch=20+=20channel=20input=20+=20eyedropper=20?=
 =?UTF-8?q?inline?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

User feedback: 'se pueden realinear los diferentes elementos para que no
sea tan alto, el pick from screen en la misma linea del color
seleccionado, o el input del valor al lado del color, etc.'

Collapses three previously-stacked rows into one:

Before:
  [preview swatch + value text]   ← row 1
  [channel input segments + format]  ← row 2
  [eyedropper button + label]     ← row 3 (right-aligned)

After:
  [swatch] [channel input ........] [eyedropper]   ← single row

The ValueText is dropped because the channel input segments already
show the hex/rgb/hsl value digit-by-digit (more useful than a static
string). The eyedropper becomes a compact icon button at the end of
the row — `aria-label="Pick color from screen"` still announces it.

Net effect: ~50px shorter popover.

Files
-----
- web/routes/uix/components/color-picker/+page.svelte — `.cp-value-row`
  flex layout with swatch (1.75rem) + ChannelField (flex: 1 1 auto) +
  EyeDropper. ChannelField input forced `flex-wrap: nowrap` so segments
  stay inline. Old `.cp-preview-row` / `.cp-eyedropper-row` styles
  removed.

Checks: 67/67 component-audit PASS, svelte-check 0 errors / 0 warnings.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../uix/components/color-picker/+page.svelte  | 74 +++++++------------
 1 file changed, 27 insertions(+), 47 deletions(-)

diff --git a/web/routes/uix/components/color-picker/+page.svelte b/web/routes/uix/components/color-picker/+page.svelte
index 47e190197..2ec0325c6 100644
--- a/web/routes/uix/components/color-picker/+page.svelte
+++ b/web/routes/uix/components/color-picker/+page.svelte
@@ -259,24 +259,21 @@
 								</div>
 							{/if}
 
-							<!-- Live preview + segmented channel input on one row. -->
-							<div class="cp-preview-row">
+							<!-- Compact value row: live preview swatch + segmented channel
+							     input + format select + eyedropper, all on one line. -->
+							<div class="cp-value-row">
 								<ColorPicker.ValueSwatch />
-								<div class="cp-preview-text">
-									<ColorPicker.ValueText />
-									<span class="cp-preview-format">{format.toUpperCase()}</span>
-								</div>
+								<ColorPicker.ChannelInput>
+									{#snippet children({ segments }: ChannelInputSnippetProps)}
+										{#each segments as { part, value }, i (`${part}-${i}`)}
+											<ColorPicker.ChannelSegment {part}>{value}</ColorPicker.ChannelSegment>
+										{/each}
+										<ColorPicker.FormatSelect />
+									{/snippet}
+								</ColorPicker.ChannelInput>
+								<ColorPicker.EyeDropper aria-label="Pick color from screen" />
 							</div>
 
-							<ColorPicker.ChannelInput>
-								{#snippet children({ segments }: ChannelInputSnippetProps)}
-									{#each segments as { part, value }, i (`${part}-${i}`)}
-										<ColorPicker.ChannelSegment {part}>{value}</ColorPicker.ChannelSegment>
-									{/each}
-									<ColorPicker.FormatSelect />
-								{/snippet}
-							</ColorPicker.ChannelInput>
-
 							<div class="cp-section-label">Preset colors</div>
 							<ColorPicker.SwatchGroup aria-label="Preset colors">
 								{#each presets as preset}
@@ -287,11 +284,6 @@
 								{/each}
 							</ColorPicker.SwatchGroup>
 
-							<div class="cp-eyedropper-row">
-								<ColorPicker.EyeDropper aria-label="Pick color from screen" />
-								<span class="cp-eyedropper-label">Pick from screen</span>
-							</div>
-
 							{#if showFooter && (showClear || showCancel || showClose)}
 								<ColorPicker.Footer>
 									{#if showClear}<ColorPicker.Clear />{/if}
@@ -691,29 +683,27 @@
 		text-transform: uppercase;
 		letter-spacing: 0.04em;
 	}
-	.cp-preview-row {
+	/* Compact value row: swatch + channel input + eyedropper inline. */
+	.cp-value-row {
 		display: flex;
 		align-items: center;
-		gap: var(--uix-space-3, 0.75rem);
-		padding: var(--uix-space-2, 0.5rem);
-		border-radius: var(--uix-radius-sm);
-		background: var(--uix-surface-sunken);
+		gap: var(--uix-space-2, 0.5rem);
+		min-inline-size: 0;
 	}
-	.cp-preview-row :global([data-color-picker-value-swatch]) {
-		inline-size: 2rem;
-		block-size: 2rem;
+	.cp-value-row :global([data-color-picker-value-swatch]) {
+		flex: 0 0 auto;
+		inline-size: 1.75rem;
+		block-size: 1.75rem;
 	}
-	.cp-preview-text {
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
+	.cp-value-row :global([data-color-field]) {
+		flex: 1 1 auto;
 		min-inline-size: 0;
 	}
-	.cp-preview-format {
-		font-size: 10px;
-		color: var(--uix-text-faint);
-		text-transform: uppercase;
-		letter-spacing: 0.06em;
+	.cp-value-row :global([data-color-field-input]) {
+		flex-wrap: nowrap;
+	}
+	.cp-value-row :global([data-color-picker-eye-dropper]) {
+		flex: 0 0 auto;
 	}
 	.cp-section-label {
 		font-size: 11px;
@@ -723,14 +713,4 @@
 		letter-spacing: 0.04em;
 		margin-block-start: var(--uix-space-1, 0.25rem);
 	}
-	.cp-eyedropper-row {
-		display: flex;
-		align-items: center;
-		gap: var(--uix-space-2, 0.5rem);
-		justify-content: flex-end;
-	}
-	.cp-eyedropper-label {
-		font-size: 12px;
-		color: var(--uix-text-faint);
-	}
 </style>