From b906dd4077d2261f1b1dce9e0ca360d72e54db90 Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Mon, 3 Aug 2026 18:25:48 +0200
Subject: [PATCH] fix(direction): el atributo `dir` se estampaba VACIO cuando
 nadie lo afirmaba
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

El contrato de `013ceac57` dice que `dir` se OMITE cuando nadie ha afirmado una
direccion. `6.5` habia visto `dir=""` en sidebar y tree-view sin averiguar de
donde salia. Es el shorthand `{dir}`: para `dir` Svelte emite una asignacion de
PROPIEDAD ademas del atributo, y con `undefined` el resultado es la cadena
vacia en vez de la omision. Atrapado con un trap sobre `setAttribute` + el
descriptor de la propiedad: dos escrituras, la segunda por propiedad.

No estaba en el SSR (`dir=""` no aparece ni una vez en el HTML servido) — lo
escribia el cliente al hidratar.

Un valor invalido HEREDA, asi que nada pintaba mal; pero contradice la letra
del contrato y hace que `[dir]` matchee.

Arreglado con spread condicional, que si omite:

    {dir}  ->  {...dir ? { dir } : {}}

- `tree-view` (eidos): el wrapper LO NECESITA cuando el valor es concreto — el
  recipe selecciona con `[data-tree-view-root]:dir(rtl)` y ese div es el
  ANCESTRO del provider que estampa el attr. Con el valor ausente hereda, que
  es lo correcto.
- 26 demos: el arnes estandar (`data-uix-stage-area` / `data-uix-canvas-inner`).

Verificado: en `auto` solo quedan `<html>` (la proyeccion de prefs) y el
provider con su valor resuelto — cero `dir=""`; en `rtl` los tres elementos lo
reciben concreto; al volver a `auto` desaparece limpiamente. Las 26 rutas
sirven 200 y ninguna trae `dir=""`.

METODO: mi primer regex tambien matcheaba dentro de `dir={dir}` y dejo
`dir={...}` — dos ficheros con parse error que `check` cazo (76 vs 74). Contar
ficheros modificados NO basta; hay que mirar el diff.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/uix/eidos/components/tree-view/tree-view.svelte      | 9 ++++++++-
 web/routes/uix/components/anchor-nav/+page.svelte        | 2 +-
 web/routes/uix/components/aura/+page.svelte              | 2 +-
 web/routes/uix/components/barcode/+page.svelte           | 2 +-
 web/routes/uix/components/button/+page.svelte            | 2 +-
 web/routes/uix/components/callout/+page.svelte           | 2 +-
 web/routes/uix/components/chat-composer/+page.svelte     | 2 +-
 web/routes/uix/components/chat-list/+page.svelte         | 2 +-
 web/routes/uix/components/chat-log/+page.svelte          | 2 +-
 web/routes/uix/components/chat-message/+page.svelte      | 2 +-
 web/routes/uix/components/chat-typing/+page.svelte       | 2 +-
 web/routes/uix/components/emoji-picker/+page.svelte      | 2 +-
 web/routes/uix/components/empty-state/+page.svelte       | 2 +-
 web/routes/uix/components/feed/+page.svelte              | 2 +-
 web/routes/uix/components/gradient-builder/+page.svelte  | 2 +-
 web/routes/uix/components/gradient-picker/+page.svelte   | 2 +-
 web/routes/uix/components/media-player/+page.svelte      | 2 +-
 .../uix/components/natural-time-picker/+page.svelte      | 2 +-
 web/routes/uix/components/nav-tree/+page.svelte          | 2 +-
 web/routes/uix/components/proof-of-human/+page.svelte    | 2 +-
 web/routes/uix/components/prose/+page.svelte             | 2 +-
 web/routes/uix/components/result/+page.svelte            | 2 +-
 web/routes/uix/components/sidebar/+page.svelte           | 2 +-
 web/routes/uix/components/sticky/+page.svelte            | 2 +-
 web/routes/uix/components/table/+page.svelte             | 2 +-
 web/routes/uix/components/tree-grid/+page.svelte         | 2 +-
 web/routes/uix/components/tree-view/+page.svelte         | 2 +-
 27 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/src/uix/eidos/components/tree-view/tree-view.svelte b/src/uix/eidos/components/tree-view/tree-view.svelte
index 2b6f736b6..f437396b3 100644
--- a/src/uix/eidos/components/tree-view/tree-view.svelte
+++ b/src/uix/eidos/components/tree-view/tree-view.svelte
@@ -63,6 +63,13 @@
 	});
 </script>
 
+<!-- The recipe selects with `[data-tree-view-root]:dir(rtl)` and this div is the
+     ANCESTOR of the provider that stamps the attr, so it needs its own `dir`
+     whenever the consumer asserted one. Spread, NOT `{dir}`: for `dir` Svelte
+     emits a property assignment alongside the attribute, and an `undefined`
+     value lands as `dir=""` instead of being omitted. Empty inherits, so
+     nothing painted wrong — but it contradicts the contract, which is that the
+     attribute is ABSENT when nobody asserted a direction. -->
 <div
 	data-tree-view-root=""
 	data-size={resolvedSize}
@@ -72,7 +79,7 @@
 	data-block={block ? '' : undefined}
 	data-indent-guides={showIndentGuides ? '' : undefined}
 	data-scrollable={maxHeight ? '' : undefined}
-	{dir}
+	{...dir ? { dir } : {}}
 	style={composedStyle}
 >
 	<TreeView.Provider {...rest} {dir} bind:expandedValue bind:selectedValue>
diff --git a/web/routes/uix/components/anchor-nav/+page.svelte b/web/routes/uix/components/anchor-nav/+page.svelte
index 0b44d9dff..579a6688b 100644
--- a/web/routes/uix/components/anchor-nav/+page.svelte
+++ b/web/routes/uix/components/anchor-nav/+page.svelte
@@ -93,7 +93,7 @@
 			data-density={density}
 			data-theme={mode === 'inherit' ? undefined : mode}
 			data-mode={mode === 'inherit' ? undefined : mode}
-			{dir}
+			{...dir ? { dir } : {}}
 			style={`--scaling: ${scaling}; --border-width: ${borderWidth}px; display: block;`}
 		>
 			<div style="display: flex; gap: var(--space-6); align-items: start;">
diff --git a/web/routes/uix/components/aura/+page.svelte b/web/routes/uix/components/aura/+page.svelte
index 0b4cfee39..803ab22e7 100644
--- a/web/routes/uix/components/aura/+page.svelte
+++ b/web/routes/uix/components/aura/+page.svelte
@@ -225,7 +225,7 @@
 			data-density={density}
 			data-theme={mode === 'inherit' ? undefined : mode}
 			data-mode={mode === 'inherit' ? undefined : mode}
-			{dir}
+			{...dir ? { dir } : {}}
 			style={`--scaling: ${scaling}; --border-width: ${borderWidth}px;`}
 		>
 			<!-- Studio overrides the three orb-size tokens: a shader cannot be
diff --git a/web/routes/uix/components/barcode/+page.svelte b/web/routes/uix/components/barcode/+page.svelte
index 1ce1e8223..968e17b75 100644
--- a/web/routes/uix/components/barcode/+page.svelte
+++ b/web/routes/uix/components/barcode/+page.svelte
@@ -180,7 +180,7 @@
 			data-density={density}
 			data-theme={mode === 'inherit' ? undefined : mode}
 			data-mode={mode === 'inherit' ? undefined : mode}
-			{dir}
+			{...dir ? { dir } : {}}
 			style={stageStyle}
 		>
 			<div style="display: flex; align-items: center; gap: var(--uix-space-4); flex-wrap: wrap;">
diff --git a/web/routes/uix/components/button/+page.svelte b/web/routes/uix/components/button/+page.svelte
index 0bef18884..eb8731957 100644
--- a/web/routes/uix/components/button/+page.svelte
+++ b/web/routes/uix/components/button/+page.svelte
@@ -157,7 +157,7 @@
 			data-density={density}
 			data-theme={mode === 'inherit' ? undefined : mode}
 			data-mode={mode === 'inherit' ? undefined : mode}
-			dir={dir}
+			{...dir ? { dir } : {}}
 			style={stageStyle}
 		>
 			{#snippet glyph()}
diff --git a/web/routes/uix/components/callout/+page.svelte b/web/routes/uix/components/callout/+page.svelte
index b3fa14896..328d72d62 100644
--- a/web/routes/uix/components/callout/+page.svelte
+++ b/web/routes/uix/components/callout/+page.svelte
@@ -111,7 +111,7 @@
 			data-density={density}
 			data-theme={mode === 'inherit' ? undefined : mode}
 			data-mode={mode === 'inherit' ? undefined : mode}
-			{dir}
+			{...dir ? { dir } : {}}
 			style={`--scaling: ${scaling}; --border-width: ${borderWidth}px; display: block;`}
 		>
 			<Callout {intent} {color} style="inline-size: min(100%, 44rem); margin-inline: auto;">
diff --git a/web/routes/uix/components/chat-composer/+page.svelte b/web/routes/uix/components/chat-composer/+page.svelte
index c075462cf..b7a4e7dc8 100644
--- a/web/routes/uix/components/chat-composer/+page.svelte
+++ b/web/routes/uix/components/chat-composer/+page.svelte
@@ -140,7 +140,7 @@
 			data-density={density}
 			data-theme={mode === 'inherit' ? undefined : mode}
 			data-mode={mode === 'inherit' ? undefined : mode}
-			{dir}
+			{...dir ? { dir } : {}}
 			style={stageStyle}
 		>
 			<div style="inline-size: min(34rem, 100%);">
diff --git a/web/routes/uix/components/chat-list/+page.svelte b/web/routes/uix/components/chat-list/+page.svelte
index 6c7b5b145..e02a3627e 100644
--- a/web/routes/uix/components/chat-list/+page.svelte
+++ b/web/routes/uix/components/chat-list/+page.svelte
@@ -121,7 +121,7 @@
 			data-density={density}
 			data-theme={mode === 'inherit' ? undefined : mode}
 			data-mode={mode === 'inherit' ? undefined : mode}
-			{dir}
+			{...dir ? { dir } : {}}
 			style={stageStyle}
 		>
 			<div
diff --git a/web/routes/uix/components/chat-log/+page.svelte b/web/routes/uix/components/chat-log/+page.svelte
index 8998bab00..6eb53f7ce 100644
--- a/web/routes/uix/components/chat-log/+page.svelte
+++ b/web/routes/uix/components/chat-log/+page.svelte
@@ -195,7 +195,7 @@
 			data-density={density}
 			data-theme={mode === 'inherit' ? undefined : mode}
 			data-mode={mode === 'inherit' ? undefined : mode}
-			{dir}
+			{...dir ? { dir } : {}}
 			style={stageStyle}
 		>
 			<div style="inline-size: min(38rem, 100%); block-size: 24rem; border: var(--border-width) solid var(--color-border-default); border-radius: var(--radius-lg); overflow: hidden;">
diff --git a/web/routes/uix/components/chat-message/+page.svelte b/web/routes/uix/components/chat-message/+page.svelte
index b56fc8fcc..8105af708 100644
--- a/web/routes/uix/components/chat-message/+page.svelte
+++ b/web/routes/uix/components/chat-message/+page.svelte
@@ -197,7 +197,7 @@
 			data-density={density}
 			data-theme={mode === 'inherit' ? undefined : mode}
 			data-mode={mode === 'inherit' ? undefined : mode}
-			{dir}
+			{...dir ? { dir } : {}}
 			style={stageStyle}
 		>
 			<div style="inline-size: min(34rem, 100%);">
diff --git a/web/routes/uix/components/chat-typing/+page.svelte b/web/routes/uix/components/chat-typing/+page.svelte
index 2dfb024b1..58a020c51 100644
--- a/web/routes/uix/components/chat-typing/+page.svelte
+++ b/web/routes/uix/components/chat-typing/+page.svelte
@@ -105,7 +105,7 @@
 			data-density={density}
 			data-theme={mode === 'inherit' ? undefined : mode}
 			data-mode={mode === 'inherit' ? undefined : mode}
-			{dir}
+			{...dir ? { dir } : {}}
 			style={stageStyle}
 		>
 			<div
diff --git a/web/routes/uix/components/emoji-picker/+page.svelte b/web/routes/uix/components/emoji-picker/+page.svelte
index 1925cf12e..876ec4653 100644
--- a/web/routes/uix/components/emoji-picker/+page.svelte
+++ b/web/routes/uix/components/emoji-picker/+page.svelte
@@ -91,7 +91,7 @@
 			data-density={density}
 			data-theme={mode === 'inherit' ? undefined : mode}
 			data-mode={mode === 'inherit' ? undefined : mode}
-			{dir}
+			{...dir ? { dir } : {}}
 			style={stageStyle}
 		>
 			<div style="display: flex; align-items: center; gap: var(--space-3);">
diff --git a/web/routes/uix/components/empty-state/+page.svelte b/web/routes/uix/components/empty-state/+page.svelte
index 810e20e16..b34b5cdc3 100644
--- a/web/routes/uix/components/empty-state/+page.svelte
+++ b/web/routes/uix/components/empty-state/+page.svelte
@@ -175,7 +175,7 @@
 			data-density={density}
 			data-theme={mode === 'inherit' ? undefined : mode}
 			data-mode={mode === 'inherit' ? undefined : mode}
-			{dir}
+			{...dir ? { dir } : {}}
 			style={`--scaling: ${scaling}; --border-width: ${borderWidth}px;`}
 		>
 			{#if inCollection}
diff --git a/web/routes/uix/components/feed/+page.svelte b/web/routes/uix/components/feed/+page.svelte
index 506fd45c6..4f1b40b52 100644
--- a/web/routes/uix/components/feed/+page.svelte
+++ b/web/routes/uix/components/feed/+page.svelte
@@ -139,7 +139,7 @@
 	);
 </script>
 
-<div data-uix-canvas-inner {dir}>
+<div data-uix-canvas-inner {...dir ? { dir } : {}}>
 	<header>
 		<div data-uix-eyebrow>Data · Feed</div>
 		<h1 data-uix-page-title>Feed</h1>
diff --git a/web/routes/uix/components/gradient-builder/+page.svelte b/web/routes/uix/components/gradient-builder/+page.svelte
index 15c34e255..941ccb2c0 100644
--- a/web/routes/uix/components/gradient-builder/+page.svelte
+++ b/web/routes/uix/components/gradient-builder/+page.svelte
@@ -170,7 +170,7 @@
 			data-density={density}
 			data-theme={mode === 'inherit' ? undefined : mode}
 			data-mode={mode === 'inherit' ? undefined : mode}
-			{dir}
+			{...dir ? { dir } : {}}
 			style={stageStyle}
 		>
 			<div style="inline-size: min(22rem, 100%);">
diff --git a/web/routes/uix/components/gradient-picker/+page.svelte b/web/routes/uix/components/gradient-picker/+page.svelte
index 209c409f7..2149ea2f2 100644
--- a/web/routes/uix/components/gradient-picker/+page.svelte
+++ b/web/routes/uix/components/gradient-picker/+page.svelte
@@ -178,7 +178,7 @@
 			data-density={density}
 			data-theme={stageMode === 'inherit' ? undefined : stageMode}
 			data-mode={stageMode === 'inherit' ? undefined : stageMode}
-			dir={dir}
+			{...dir ? { dir } : {}}
 			style={stageStyle}
 		>
 			<GradientPicker bind:value bind:open {size} {variant} {mode} {deferValue} {disabled} {presets} {maxPresets}>
diff --git a/web/routes/uix/components/media-player/+page.svelte b/web/routes/uix/components/media-player/+page.svelte
index 167ccaed9..3e751e87e 100644
--- a/web/routes/uix/components/media-player/+page.svelte
+++ b/web/routes/uix/components/media-player/+page.svelte
@@ -168,7 +168,7 @@
 			data-density={density}
 			data-theme={mode === 'inherit' ? undefined : mode}
 			data-mode={mode === 'inherit' ? undefined : mode}
-			{dir}
+			{...dir ? { dir } : {}}
 			style={stageStyle}
 		>
 			<div style="width: min(100%, 720px); margin-inline: auto;">
diff --git a/web/routes/uix/components/natural-time-picker/+page.svelte b/web/routes/uix/components/natural-time-picker/+page.svelte
index 7db55f532..80ef1c7b7 100644
--- a/web/routes/uix/components/natural-time-picker/+page.svelte
+++ b/web/routes/uix/components/natural-time-picker/+page.svelte
@@ -137,7 +137,7 @@
 			data-density={density}
 			data-theme={sysMode === 'inherit' ? undefined : sysMode}
 			data-mode={sysMode === 'inherit' ? undefined : sysMode}
-			{dir}
+			{...dir ? { dir } : {}}
 			style={stageStyle}
 		>
 			<div style="display: flex; flex-wrap: wrap; gap: var(--uix-space-8); align-items: flex-start; justify-content: center; padding: var(--uix-space-4);">
diff --git a/web/routes/uix/components/nav-tree/+page.svelte b/web/routes/uix/components/nav-tree/+page.svelte
index 1ece101b7..e6844871f 100644
--- a/web/routes/uix/components/nav-tree/+page.svelte
+++ b/web/routes/uix/components/nav-tree/+page.svelte
@@ -308,7 +308,7 @@
 			data-density={density}
 			data-theme={mode === 'inherit' ? undefined : mode}
 			data-mode={mode === 'inherit' ? undefined : mode}
-			{dir}
+			{...dir ? { dir } : {}}
 			style={`--scaling: ${scaling}; --border-width: ${borderWidth}px; display: block;`}
 		>
 			<div style="display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: start;">
diff --git a/web/routes/uix/components/proof-of-human/+page.svelte b/web/routes/uix/components/proof-of-human/+page.svelte
index f39631f60..64a6c079e 100644
--- a/web/routes/uix/components/proof-of-human/+page.svelte
+++ b/web/routes/uix/components/proof-of-human/+page.svelte
@@ -319,7 +319,7 @@
 			data-density={density}
 			data-theme={mode === 'inherit' ? undefined : mode}
 			data-mode={mode === 'inherit' ? undefined : mode}
-			{dir}
+			{...dir ? { dir } : {}}
 			style={stageStyle}
 		>
 			<ProofOfHuman
diff --git a/web/routes/uix/components/prose/+page.svelte b/web/routes/uix/components/prose/+page.svelte
index 46b6aa48e..dde2b2426 100644
--- a/web/routes/uix/components/prose/+page.svelte
+++ b/web/routes/uix/components/prose/+page.svelte
@@ -140,7 +140,7 @@ for (const el of document) style(el);</code></pre>
 			data-density={density}
 			data-theme={mode === 'inherit' ? undefined : mode}
 			data-mode={mode === 'inherit' ? undefined : mode}
-			{dir}
+			{...dir ? { dir } : {}}
 			style={`--scaling: ${scaling}; --border-width: ${borderWidth}px; display: block;`}
 		>
 			<div style="max-block-size: 460px; overflow-y: auto; padding: var(--space-4);">
diff --git a/web/routes/uix/components/result/+page.svelte b/web/routes/uix/components/result/+page.svelte
index 55bc0694f..9ee86d876 100644
--- a/web/routes/uix/components/result/+page.svelte
+++ b/web/routes/uix/components/result/+page.svelte
@@ -146,7 +146,7 @@
 			data-density={density}
 			data-theme={mode === 'inherit' ? undefined : mode}
 			data-mode={mode === 'inherit' ? undefined : mode}
-			{dir}
+			{...dir ? { dir } : {}}
 			style={`--scaling: ${scaling}; --border-width: ${borderWidth}px;`}
 		>
 			<Result {status}>
diff --git a/web/routes/uix/components/sidebar/+page.svelte b/web/routes/uix/components/sidebar/+page.svelte
index 4f5d76dd1..0c94c37ca 100644
--- a/web/routes/uix/components/sidebar/+page.svelte
+++ b/web/routes/uix/components/sidebar/+page.svelte
@@ -126,7 +126,7 @@
 			data-density={density}
 			data-theme={mode === 'inherit' ? undefined : mode}
 			data-mode={mode === 'inherit' ? undefined : mode}
-			{dir}
+			{...dir ? { dir } : {}}
 			style={`--scaling: ${scaling}; --border-width: ${borderWidth}px; display: block;`}
 		>
 			<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
diff --git a/web/routes/uix/components/sticky/+page.svelte b/web/routes/uix/components/sticky/+page.svelte
index 3162b5e3b..47f7a1569 100644
--- a/web/routes/uix/components/sticky/+page.svelte
+++ b/web/routes/uix/components/sticky/+page.svelte
@@ -132,7 +132,7 @@
 			data-density={density}
 			data-theme={mode === 'inherit' ? undefined : mode}
 			data-mode={mode === 'inherit' ? undefined : mode}
-			{dir}
+			{...dir ? { dir } : {}}
 			style={`--scaling: ${scaling}; --border-width: ${borderWidth}px; display: block;`}
 		>
 			<div
diff --git a/web/routes/uix/components/table/+page.svelte b/web/routes/uix/components/table/+page.svelte
index 90c49dbed..60e070064 100644
--- a/web/routes/uix/components/table/+page.svelte
+++ b/web/routes/uix/components/table/+page.svelte
@@ -256,7 +256,7 @@
 	}
 </script>
 
-<div data-uix-canvas-inner {dir}>
+<div data-uix-canvas-inner {...dir ? { dir } : {}}>
 	<header>
 		<div data-uix-eyebrow>Data · Table</div>
 		<h1 data-uix-page-title>Table</h1>
diff --git a/web/routes/uix/components/tree-grid/+page.svelte b/web/routes/uix/components/tree-grid/+page.svelte
index 8d398158f..fcb7ec86c 100644
--- a/web/routes/uix/components/tree-grid/+page.svelte
+++ b/web/routes/uix/components/tree-grid/+page.svelte
@@ -230,7 +230,7 @@
 	{/if}
 {/snippet}
 
-<div data-uix-canvas-inner {dir}>
+<div data-uix-canvas-inner {...dir ? { dir } : {}}>
 	<header>
 		<div data-uix-eyebrow>Data · TreeGrid</div>
 		<h1 data-uix-page-title>TreeGrid</h1>
diff --git a/web/routes/uix/components/tree-view/+page.svelte b/web/routes/uix/components/tree-view/+page.svelte
index ddfd54c5b..bb91597fc 100644
--- a/web/routes/uix/components/tree-view/+page.svelte
+++ b/web/routes/uix/components/tree-view/+page.svelte
@@ -196,7 +196,7 @@
 	{/if}
 {/snippet}
 
-<div data-uix-canvas-inner {dir}>
+<div data-uix-canvas-inner {...dir ? { dir } : {}}>
 	<header>
 		<div data-uix-eyebrow>Data · TreeView</div>
 		<h1 data-uix-page-title>TreeView</h1>