From 913d49d0ea7f02361582e9b8189c42eb1baca535 Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Sat, 6 Jun 2026 16:07:19 +0200
Subject: [PATCH] words: harmonize inspector control tier (one height, one body
 font)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The block inspector mixed three control heights (chip 26 · number-field 28
· color-trigger 36px) and two fonts (chip/trigger 10px vs label/value/input
12px), so the PRIMARY control — the chip — was the smallest text in the panel.

- New recipe tokens `--words-control-height` (1.75rem — was a magic literal on
  the number-field) and `--words-field-width` (7.5rem), applied uniformly to the
  whole inline tier (chip · color-trigger · number-field) → one 28px height + an
  aligned right-edge column.
- Chip + color-trigger lift to the 12px body tier (the ToggleGroup `xs` is kept
  ONLY for its compact padding; lifting the font without the padding keeps the
  four-segment groups on one line).
- Cramped long labels shortened (Predeterminada→Auto, Semi-negrita→Semi) so
  Fuente/Grosor read as four even segments.
- Collapsed the dead, inconsistent font-size fallbacks (`xs, 0.6875rem` /
  `xs, 0.75rem` / `sm, 0.8125rem`) to the bare declared token.

Chrome scale is now a clean 14 (section) / 12 (body) / 11 (micro). Verified in
browser: chip · color-trigger · number-field all 28px·12px, no group overflow.
19/19 recipe contract green; check adds zero errors.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/uix/eidos/components/words/AUDIT.md       | 20 +++++++++--
 .../eidos/components/words/langs-inspector.ts |  8 ++---
 src/uix/eidos/components/words/words.css      | 33 ++++++++++++++-----
 src/uix/eidos/generated/base.css              |  2 ++
 src/uix/eidos/lib/recipes/base.ts             |  9 +++++
 5 files changed, 56 insertions(+), 16 deletions(-)

diff --git a/src/uix/eidos/components/words/AUDIT.md b/src/uix/eidos/components/words/AUDIT.md
index 7efc0a86f..c0333714e 100644
--- a/src/uix/eidos/components/words/AUDIT.md
+++ b/src/uix/eidos/components/words/AUDIT.md
@@ -68,7 +68,7 @@ verificar en navegador, y con el enfoque validado → generalizar tokens + barre
       8 sintaxis) → la escala `--words-radius-{xs,sm,md,lg}`. Micro decorativo (1-2px) + círculos
       (50%) intactos por diseño. radius-xs verificado (=4px), sin regresión.
 - [ ] A — resto del vocabulario: triar los 41 huérfanos (cablear `rail-*`/`toolbar-*`/… o podar)
-- [ ] B — resto del barrido: tamaños bespoke (swatch/checkbox/anchos/sidebar 16rem×3)→tokens, padding `--space-*`
+- [x] B — barrido de tamaños: tier de control inline unificado a 28px·12px (ver entrada B detallada abajo)
 - [ ] C — centralizar las 3 paletas de color
 - [x] **D — fixes API** (2026-06-06): quitado el `<style>` vacío de `words-inspector.svelte`;
       `onMount → $effect` en `words.svelte` (corre una vez, sin import de lifecycle). →
@@ -90,6 +90,20 @@ verificar en navegador, y con el enfoque validado → generalizar tokens + barre
       (toolbar·bubble·slash·drawer·inspector·menús) con atributo doblado **(0,2,0)** que gana a
       cualquier fuente de componente sin importar el orden de carga. Verificado: todo el chrome =
       Instrument Sans.
-- [ ] B (resto) — tamaños bespoke (swatch/checkbox/anchos/sidebar 16rem×3)→tokens, padding `--space-*`;
-      **escala de font-size del chrome armónica** (hoy xs/sm/md ≈ 11/12/13px, casi sin jerarquía)
+- [x] **B — tier de control armónico** (2026-06-06): el inspector mezclaba 3 alturas
+      (chip 26 · number-field 28 · color-trigger 36) y 2 fuentes (chip/trigger 10px vs
+      label/value/input 12px) → el control PRIMARIO (chip) era el texto más pequeño del
+      panel. Fix: nuevos tokens `--words-control-height` (1.75rem, antes un literal mágico
+      del number-field) + `--words-field-width` (7.5rem) aplicados a TODO el tier inline
+      (chip, color-trigger, number-field) → una sola altura 28px + ancho de columna derecho
+      alineado. Chip + color-trigger suben al body tier de 12px (el `xs` del ToggleGroup se
+      conserva sólo por su padding compacto; subir la fuente sin subir el padding mantiene
+      los grupos de 4 segmentos en una línea). Etiquetas largas que se apelotonaban
+      ("Predeterminada"→"Auto", "Semi-negrita"→"Semi") acortadas → Fuente/Grosor leen como
+      4 segmentos parejos. Limpiados los fallbacks muertos e inconsistentes del mismo token
+      (`xs, 0.6875rem`/`xs, 0.75rem`/`sm, 0.8125rem` → token pelado). Escala de chrome final
+      armónica: **14 (sección) / 12 (cuerpo: label·value·input·chip) / 11 (micro-label)**.
+      Verificado en navegador: chip/color-trigger/number-field = 28px·12px; sin overflow de
+      grupos. 19/19 contract verde. Sizes restantes (swatch 1.15rem, checkbox 1.1em, panel
+      16rem ×4) son micro o ya consistentes → no rompen armonía, deferidos.
 - [ ] E — verificación final (build + navegador) + README
diff --git a/src/uix/eidos/components/words/langs-inspector.ts b/src/uix/eidos/components/words/langs-inspector.ts
index 13851e81d..8584c8bdf 100644
--- a/src/uix/eidos/components/words/langs-inspector.ts
+++ b/src/uix/eidos/components/words/langs-inspector.ts
@@ -162,7 +162,7 @@ export const WORDS_INSPECTOR_LANGS = {
 	LABEL_PRESET: '#?components.words.inspector.label.preset|Preset',
 
 	// Font family options ------------------------------------------------
-	FONT_DEFAULT: '#?components.words.inspector.font.default|Default',
+	FONT_DEFAULT: '#?components.words.inspector.font.default|Auto',
 	FONT_SANS: '#?components.words.inspector.font.sans|Sans',
 	FONT_SERIF: '#?components.words.inspector.font.serif|Serif',
 	FONT_MONO: '#?components.words.inspector.font.mono|Mono',
@@ -170,7 +170,7 @@ export const WORDS_INSPECTOR_LANGS = {
 	// Font weight options ------------------------------------------------
 	WEIGHT_REGULAR: '#?components.words.inspector.weight.regular|Regular',
 	WEIGHT_MEDIUM: '#?components.words.inspector.weight.medium|Medium',
-	WEIGHT_SEMIBOLD: '#?components.words.inspector.weight.semibold|Semibold',
+	WEIGHT_SEMIBOLD: '#?components.words.inspector.weight.semibold|Semi',
 	WEIGHT_BOLD: '#?components.words.inspector.weight.bold|Bold',
 
 	// Align options ------------------------------------------------------
@@ -321,7 +321,7 @@ export const WORDS_INSPECTOR_BUNDLE = {
 		off: { en: 'Off', es: 'No' }
 	},
 	font: {
-		default: { en: 'Default', es: 'Predeterminada' },
+		default: { en: 'Auto', es: 'Auto' },
 		sans: { en: 'Sans', es: 'Sans' },
 		serif: { en: 'Serif', es: 'Serif' },
 		mono: { en: 'Mono', es: 'Mono' }
@@ -329,7 +329,7 @@ export const WORDS_INSPECTOR_BUNDLE = {
 	weight: {
 		regular: { en: 'Regular', es: 'Normal' },
 		medium: { en: 'Medium', es: 'Media' },
-		semibold: { en: 'Semibold', es: 'Semi-negrita' },
+		semibold: { en: 'Semibold', es: 'Semi' },
 		bold: { en: 'Bold', es: 'Negrita' }
 	},
 	align: {
diff --git a/src/uix/eidos/components/words/words.css b/src/uix/eidos/components/words/words.css
index 92578e28d..d0ca3754e 100644
--- a/src/uix/eidos/components/words/words.css
+++ b/src/uix/eidos/components/words/words.css
@@ -481,7 +481,7 @@
 	min-inline-size: 0;
 	overflow-x: auto;
 	scrollbar-width: none;
-	font-size: var(--words-font-size-xs, 0.6875rem);
+	font-size: var(--words-font-size-xs);
 	line-height: 1.4;
 	color: var(--words-placeholder-color);
 }
@@ -551,7 +551,7 @@ button[data-words-breadcrumb-crumb]:focus-visible {
 [data-words-inspector] [data-accordion-trigger] {
 	text-transform: uppercase;
 	letter-spacing: 0.05em;
-	font-size: var(--words-font-size-xs, 0.6875rem);
+	font-size: var(--words-font-size-xs);
 	font-weight: 600;
 	color: var(--words-command-color);
 }
@@ -616,10 +616,25 @@ button[data-words-breadcrumb-crumb]:focus-visible {
    consistent advance width so the text doesn't jitter while the picker
    value oscillates during drag. */
 [data-words-inspector-row][data-inline] [data-color-picker-trigger] {
-	inline-size: 7.5rem;
+	inline-size: var(--words-field-width);
+	/* Both block-size AND min-block-size — the Button recipe sets its own
+	   min-block-size (control-height tier) which would otherwise win over a
+	   smaller block-size and leave the trigger 2px taller than the row. */
+	block-size: var(--words-control-height);
+	min-block-size: var(--words-control-height);
+	font-size: var(--words-font-size-sm);
 	justify-content: flex-start;
 	font-variant-numeric: tabular-nums;
 }
+/* Inspector chips (ToggleGroup `size=xs`) join the 12px body tier and the
+   shared inline-control height so they line up with the number-fields and
+   colour triggers in the same rows. `xs` is kept ONLY for its compact padding —
+   four-segment groups (Fuente, Grosor) must fit one line in the ~199px column,
+   so lifting the font without lifting the padding keeps both. */
+[data-words-inspector] [data-toggle-group-item] {
+	font-size: var(--words-font-size-sm);
+	min-block-size: var(--words-control-height);
+}
 [data-words-inspector-rowhead] {
 	display: flex;
 	align-items: center;
@@ -653,7 +668,7 @@ button[data-words-breadcrumb-crumb]:focus-visible {
    Width / Height fields came out visibly different widths. Pinning makes
    every inline numeric field identical. */
 [data-words-inspector-row][data-inline] [data-number-field] {
-	inline-size: 6.75rem;
+	inline-size: var(--words-field-width);
 	flex: 0 0 auto;
 }
 
@@ -671,7 +686,7 @@ button[data-words-breadcrumb-crumb]:focus-visible {
 	border-radius: var(--words-radius-xs);
 	background: var(--words-bg);
 	padding-inline: 2px;
-	block-size: 1.75rem;
+	block-size: var(--words-control-height);
 	transition:
 		border-color var(--words-transition-duration) var(--words-transition-ease, ease),
 		box-shadow var(--words-transition-duration) var(--words-transition-ease, ease);
@@ -762,7 +777,7 @@ button[data-words-breadcrumb-crumb]:focus-visible {
 	min-inline-size: 0;
 }
 [data-words-inspector-spacing-cell-label] {
-	font-size: var(--words-font-size-xs, 0.75rem);
+	font-size: var(--words-font-size-xs);
 	color: var(--words-content-color);
 	opacity: 0.7;
 	letter-spacing: 0.02em;
@@ -890,7 +905,7 @@ button[data-words-breadcrumb-crumb]:focus-visible {
 	justify-content: space-between;
 	gap: var(--space-2);
 	min-block-size: 1.5rem;
-	font-size: var(--words-font-size-xs, 0.75rem);
+	font-size: var(--words-font-size-xs);
 	color: var(--words-content-color);
 	opacity: 0.75;
 	text-transform: uppercase;
@@ -907,7 +922,7 @@ button[data-words-breadcrumb-crumb]:focus-visible {
 	gap: var(--space-1);
 }
 [data-words-inspector-sublabel] {
-	font-size: var(--words-font-size-xs, 0.6875rem);
+	font-size: var(--words-font-size-xs);
 	font-weight: 600;
 	color: var(--words-content-color);
 	opacity: 0.55;
@@ -924,7 +939,7 @@ button[data-words-breadcrumb-crumb]:focus-visible {
 	min-width: 0;
 	text-align: start;
 	padding: var(--space-1) var(--space-2);
-	font-size: var(--words-font-size-sm, 0.8125rem);
+	font-size: var(--words-font-size-sm);
 	color: var(--words-content-color);
 	background: color-mix(in srgb, var(--words-content-color) var(--words-wash-faint), transparent);
 	border: 1px solid var(--words-border);
diff --git a/src/uix/eidos/generated/base.css b/src/uix/eidos/generated/base.css
index 9e81f6986..4f9a78a30 100644
--- a/src/uix/eidos/generated/base.css
+++ b/src/uix/eidos/generated/base.css
@@ -2406,6 +2406,8 @@
 	--words-wash-strong: 44%;
 	--words-swatch: var(--words-bg);
 	--words-chrome-font: var(--font-ui);
+	--words-control-height: 1.75rem;
+	--words-field-width: 7.5rem;
 	--words-command-gap: var(--space-1);
 	--words-command-radius: var(--radius-md);
 	--words-command-color: var(--color-content-secondary);
diff --git a/src/uix/eidos/lib/recipes/base.ts b/src/uix/eidos/lib/recipes/base.ts
index 5bc61d426..21f7169a6 100644
--- a/src/uix/eidos/lib/recipes/base.ts
+++ b/src/uix/eidos/lib/recipes/base.ts
@@ -2692,6 +2692,15 @@ export const THEME_BASE_RECIPE_TOKENS = {
 		// UI sans, INDEPENDENT of `font-family` (the content/reading font, which a theme
 		// may set to serif). Keeps every control + label in one face.
 		'chrome-font': 'var(--font-ui)',
+		// The inline-control tier height — every control sitting on an inspector
+		// row (number-field, colour trigger, ToggleGroup chip) shares ONE height
+		// so a row of mixed controls aligns. 1.75rem (28px) was the number-field's
+		// magic height; named here and applied uniformly to kill the 26/28/36 mix.
+		'control-height': '1.75rem',
+		// Fixed width for the right-hand control in an inline inspector row so the
+		// panel's right edge reads as a clean column (number-field was 6.75rem,
+		// colour trigger 7.5rem — a ragged edge). 7.5rem fits the 8-char alpha hex.
+		'field-width': '7.5rem',
 		'command-gap': 'var(--space-1)',
 		'command-radius': 'var(--radius-md)',
 		'command-color': 'var(--color-content-secondary)',