From 8f84b36f6d7505a12b1818c758a004dc856a5071 Mon Sep 17 00:00:00 2001 From: dev Date: Wed, 17 Jun 2026 03:20:02 +0200 Subject: [PATCH] feat(eidos): field-family font-scaling coherence (input 1:1 + label step-down) - Field font scale: input 1:1 (size N -> --font-size-N, md now 16px), label one step below (10/12/14/16/18). Recipes: field, spin-field, date/time/color-field, search-field, password-field, select, editable, tags-input. Segmented-field labels via CSS calc; generic Field label via label-font-size tokens. - Picker triggers (date/time/range): box now scales off the local --_X-field-height + font:inherit so the 1em icon follows the field font; added the missing xs size variant to time-picker + time-range-picker. - color-field/time-field commit-set fires + sounds on increment (compare by ColorValue.hex; time-field passes fallbackTarget for the double-registered 'input' part). - color-field format-select: reverted the segment-active tint back to its focus ring. - Docs: THEMING.md field font rule; COMPONENT_COHERENCE_AUDIT.md. words / palabras / chronos untouched. Co-Authored-By: Claude Opus 4.8 (1M context) --- .claude/launch.json | 10 +- .claude/settings.local.json | 59 ++- package-lock.json | 7 + package.json | 1 + src/uix/eidos/COMPONENT_COHERENCE_AUDIT.md | 416 ++++++++++++++++++ src/uix/eidos/THEMING.md | 32 ++ .../components/color-field/color-field.css | 12 +- .../color-picker/color-picker.svelte | 3 + .../components/date-field/date-field.css | 18 +- .../components/date-picker/date-picker.css | 14 +- .../components/date-picker/date-picker.svelte | 1 + .../date-range-picker/date-range-picker.css | 20 +- .../date-range-picker.svelte | 4 + .../eidos/components/textarea/textarea.css | 4 +- .../components/time-field/time-field.css | 10 +- .../time-picker-hour-slider.svelte | 9 +- .../time-picker-minute-slider.svelte | 4 + .../time-picker-second-slider.svelte | 4 + .../components/time-picker/time-picker.css | 21 +- .../components/time-picker/time-picker.svelte | 7 +- .../time-range-picker/time-range-picker.css | 21 +- .../time-range-picker.svelte | 4 + src/uix/eidos/generated/base.css | 92 ++-- src/uix/eidos/lib/recipes/base.ts | 90 ++-- src/uix/eidos/lib/render-css.ts | 13 + src/uix/morfo/components/date-field.ts | 4 +- src/uix/sema/components/css-field.ts | 2 + src/uix/sema/components/date-field.ts | 11 +- src/uix/sema/components/index.ts | 1 + src/uix/sema/components/number-field.ts | 2 + .../color-field-provider.svelte.ts | 15 + .../time-field/time-field-provider.svelte.ts | 12 + web/routes/demos/+page.svelte | 2 +- .../uix/components/date-picker/+page.svelte | 144 ++++++ .../uix/components/time-picker/+page.svelte | 2 +- 35 files changed, 922 insertions(+), 149 deletions(-) create mode 100644 src/uix/eidos/COMPONENT_COHERENCE_AUDIT.md diff --git a/.claude/launch.json b/.claude/launch.json index 9d4c32d25..8d7810914 100644 --- a/.claude/launch.json +++ b/.claude/launch.json @@ -4,14 +4,8 @@ { "name": "dev", "runtimeExecutable": "npm", - "runtimeArgs": ["run", "dev"], - "port": 5173 - }, - { - "name": "dev-preview", - "runtimeExecutable": "npm", - "runtimeArgs": ["run", "dev", "--", "--port", "5199", "--strictPort"], - "port": 5199 + "runtimeArgs": ["run", "dev", "--", "--port", "5180", "--strictPort"], + "port": 5180 } ] } diff --git a/.claude/settings.local.json b/.claude/settings.local.json index 1599dcfe7..7179a64e4 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -348,7 +348,64 @@ "Bash(awk 'NR>=300 && NR<=345' src/uix/eidos/components/palabras/palabras.css)", "Bash(awk '/\\\\[data-palabras-panel-card\\\\] \\\\{/{f=1} f{print NR\": \"$0} /^\\\\}/{if\\(f\\){f=0}}' src/uix/eidos/components/palabras/palabras.css)", "mcp__Claude_in_Chrome__get_page_text", - "Bash(Select-Object -Last 30)" + "Bash(Select-Object -Last 30)", + "Bash(awk 'NR>=1960 && NR<=2009 && /^\\\\t[a-z][a-z-]*: \\\\{/ {name=$0} END{print name}' src/uix/eidos/lib/recipes/base.ts)", + "Bash(awk 'NR>=1980 && NR<=2009 && /^\\\\t[a-zA-Z][a-zA-Z-]*: \\\\{/ {print NR\": \"$0}' src/uix/eidos/lib/recipes/base.ts)", + "Bash(awk -F: '$1>=1700 && $1<=2100 {print}')", + "Bash(awk -F: '$1>=1850 && $1<=2009')", + "Bash(awk 'NR>=300 && NR<=340 && /: \\\\{/ {k=$0} /iconSize: .xxl./ {print NR\": owned by → \"k}' src/uix/eidos/lib/primitives/static.ts)", + "Bash(awk 'NR>=315 && NR<=335 && /: \\\\{/ {k=$0} /iconSize: .\\(xl|xxl\\)./ {print NR\": \"k\" → \"$0}' src/uix/eidos/lib/primitives/static.ts)", + "Bash(rg 'from '\\\\''\\\\$lib'\\\\''|from \"\\\\$lib\"|from '\\\\''\\\\$lib/' src/ -n --glob !**/node_modules/**)", + "Bash(awk -F: '$1 < 427')", + "Bash(awk -F: '$1 < 848')", + "Bash(rg -n --no-messages \"data-radio-cards-icon|=1100 && NR<=1160 && /^\\\\t[a-z-]+:|recipe|component:|name:/' src/uix/eidos/lib/recipes/base.ts)", + "Bash(awk -F/ '{print $1\"/\"$2}')", + "Bash(awk -F/ '{ if \\($1==\"src\"\\) print \"src/\"$2\"/\"$3; else print $1 }')", + "Bash(grep -nE 'validateMorfo|export \\(async \\)?function loadMorfos|testTimeout|import' src/uix/eidos/../../../scripts/soma-attr-audit.ts 2>/dev/null | head; echo '--- direct run audit loadMorfos timing ---'; timeout 60 node --import tsx/esm -e \"import\\('./scripts/soma-attr-audit.ts'\\).then\\(async m=>{const t=Date.now\\(\\);const ms=await m.loadMorfos\\(\\);console.log\\('loaded',ms.length,'in',Date.now\\(\\)-t,'ms'\\)}\\).catch\\(e=>console.log\\('ERR',e.message\\)\\)\" 2>&1 | tail -5)", + "PowerShell(npm run check 2>&1)", + "PowerShell(1..3 | ForEach-Object { Write-Output \"=== Run $_ ===\"; npx vitest run src/uix/soma/soma-attr-audit.test.ts 2>&1 | Select-String -Pattern \"passed|failed|timed out|Duration\" })", + "Bash(cd /g/dev/svelte/vicen)", + "Bash(ls src/libs/timer/)", + "Bash(ls src/arts/timer/*.md)", + "Bash(find src/arts/timer src/libs/timer -name '*.test.ts')", + "Bash(npx rg *)", + "PowerShell(npx prettier --write \"src/uix/eidos/MOTION_SERVICE_RFC.md\")", + "PowerShell(npx prettier --check \"src/uix/eidos/MOTION_SERVICE_RFC.md\")", + "Bash(node_modules/.bin/prettier --write src/arts/sium)", + "Bash(node_modules/.bin/prettier --check src/arts/sium)", + "Bash(rg -ln 'from '\\\\''\\\\$uix/eidos'\\\\''' web/routes)", + "Bash(rg -oN \"var\\\\\\(--\\(space|radius|color|font-size|line-height|shadow|duration\\)-[a-z0-9-]+\\\\\\)\" src/uix/eidos/components/date-picker/*.css src/uix/eidos/components/button/*.css)", + "Bash(rg -oN \"var\\\\\\(--\\(space|radius|font-size|line-height|shadow|color-neutral|color-surface|color-text|focus|duration\\)-[a-z0-9-]+\\\\\\)\" src/uix/eidos/components/**/*.css)", + "Bash(ls web/routes/uix/components/demos/)", + "Bash(cat \"C:/Users/dev/AppData/Local/Temp/claude/G--dev-svelte-vicen/80e4dfad-c7bf-4627-b0ea-9337414354c7/tasks/b8u5eude9.output\")", + "Bash(echo \"exit morfo:check: $?\")", + "Bash(rg -i \"chronos|components\\\\\\\\\\\\\\\\demos\")", + "Bash(cd \"G:/dev/svelte/vicen\" && npm run morfo:check > /tmp/mc.txt 2>&1; ec=$?; echo \"morfo:check EXIT=$ec\"; echo \"=== linea qr-code ===\" && grep -iE \"qr-code|invariant|fail|FAIL|✗\" /tmp/mc.txt | head)", + "Bash(rg -rln \"RecipeTokens|defineRecipe|recipe\" src/uix/eidos/components/calendar/)", + "Bash(rg -i \"chronos|recipes\\\\\\\\\\\\\\\\base|sema\\\\\\\\\\\\\\\\components\\\\\\\\\\\\\\\\index\")", + "Bash(node_modules/.bin/prettier --write src/arts/connection/index.ts src/arts/http/consts.ts src/arts/http/diagnostics.ts src/arts/color/index.ts)", + "Bash(node_modules/.bin/prettier --check src/arts/connection src/arts/http src/arts/color)", + "Bash(node_modules/.bin/prettier --check src/arts/connection/index.ts src/arts/http/consts.ts src/arts/http/diagnostics.ts src/arts/color/index.ts)", + "Bash(node_modules/.bin/prettier --write docs/process/arts-audit-2026-06.md docs/process/README.md)", + "Bash(node_modules/.bin/prettier --check src/arts/connection/index.ts src/arts/http/consts.ts src/arts/http/diagnostics.ts src/arts/color/index.ts docs/process/arts-audit-2026-06.md docs/process/README.md)", + "Bash(rg -ln 'from '\\\\''\\\\$uix/eidos/components/button'\\\\''' src/uix/eidos/components/)", + "Bash(rg -n \"Button|child\" src/uix/eidos/components/date-picker/*.svelte)", + "Bash(rg -n \"Soma|getActiveUix|ActiveEidos\" src/uix/eidos/components/icon/*.svelte)", + "Bash(node_modules/.bin/prettier --write src/arts/connection/types.ts src/arts/connection/engine-connections.ts)", + "Bash(node_modules/.bin/prettier --check src/arts/connection/types.ts src/arts/connection/engine-connections.ts)", + "Bash(rg -rn \"toCalendarDateTime|export .*\\\\bTime\\\\b|toCalendarDate\" src/libs/days/)", + "Bash(sed -n '1,50p' src/uix/eidos/components/drag-drop/index.ts)", + "Bash(sed -n '1,40p' src/uix/soma/components/drag-drop/exports.ts)", + "Bash(rg -i \"chronos-view|chronos\\\\\\\\\\\\\\\\chronos|components.chronos|components.demos|drag-drop\")", + "Bash(echo \"=== ad-hoc opacity \\(non 0/1\\) with their selector context ===\")", + "Bash(awk ' *)" ], "additionalDirectories": [ "\\tmp" diff --git a/package-lock.json b/package-lock.json index dc8779918..b18489581 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@floating-ui/dom": "^1.7.1", "csstype": "^3.2.3", "esm-env": "^1.1.2", + "ogl": "^1.0.11", "runed": "0.37.1", "tabbable": "^6.2.0" }, @@ -2564,6 +2565,12 @@ ], "license": "MIT" }, + "node_modules/ogl": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/ogl/-/ogl-1.0.11.tgz", + "integrity": "sha512-kUpC154AFfxi16pmZUK4jk3J+8zxwTWGPo03EoYA8QPbzikHoaC82n6pNTbd+oEaJonaE8aPWBlX7ad9zrqLsA==", + "license": "Unlicense" + }, "node_modules/parse5": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.0.tgz", diff --git a/package.json b/package.json index 29c611d23..503ad8a8a 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "@floating-ui/dom": "^1.7.1", "csstype": "^3.2.3", "esm-env": "^1.1.2", + "ogl": "^1.0.11", "runed": "0.37.1", "tabbable": "^6.2.0" } diff --git a/src/uix/eidos/COMPONENT_COHERENCE_AUDIT.md b/src/uix/eidos/COMPONENT_COHERENCE_AUDIT.md new file mode 100644 index 000000000..23e1345b2 --- /dev/null +++ b/src/uix/eidos/COMPONENT_COHERENCE_AUDIT.md @@ -0,0 +1,416 @@ +--- +title: Auditoría de coherencia de componentes — eidos +type: audit +date: 2026-06-16 +scope: src/uix/eidos/components/* (excl. words · palabras · chronos) +method: grep + Read dirigidos (sin agentes, por instrucción del usuario) +status: FASE 1 (catálogo) — completa. FASE 2 (remediación) pendiente de lotes. +--- + +# Auditoría de coherencia de componentes — eidos + +Catálogo de incoherencias a nivel de componente: partes cableadas a mano en vez +de componer el ecosistema, literales que se saltan el tema, coherencia de +contrato y verificación de morfo. **Excluidos: words, palabras, chronos.** +116 componentes barridos. + +## Resumen ejecutivo + +| Dimensión | Veredicto | Hallazgos | +|---|---|---| +| **1. Composición** | 🔴 grande | 6 `` NATIVO → componer `