diff --git a/Cargo.lock b/Cargo.lock
index 10a5116..d8b1c80 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1,6 +1,6 @@
 # This file is automatically @generated by Cargo.
 # It is not intended for manual editing.
-version = 4
+version = 3
 
 [[package]]
 name = "ab_glyph"
@@ -29,9 +29,9 @@ dependencies = [
 
 [[package]]
 name = "accesskit_atspi_common"
-version = "0.19.0"
+version = "0.19.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7e98018dbef3583d751dbb96e07b8728fb99581360e1c3df408af16f4a80b821"
+checksum = "023da0e5097f46df7092d5280b02efb9bbf8d93298daeced42652463e357d636"
 dependencies = [
  "accesskit",
  "accesskit_consumer",
@@ -43,9 +43,9 @@ dependencies = [
 
 [[package]]
 name = "accesskit_consumer"
-version = "0.37.0"
+version = "0.38.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f950720ce064757a1b629caad3a408e8d2c63bb01f29b8a3ff8daa331053ffeb"
+checksum = "5d10a236f96f87d70732e44520046785431ef01d5bcd6b041317bfadd2f88245"
 dependencies = [
  "accesskit",
  "hashbrown 0.16.1",
@@ -53,9 +53,9 @@ dependencies = [
 
 [[package]]
 name = "accesskit_ios"
-version = "0.1.1"
+version = "0.1.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "02ecb52198c7cf5f8d3e9ffc03d2ca0a5c7201926befd96721437829da4c5c6a"
+checksum = "750c4e9f6ce888dfe8a10c0f1b5ceb646a7854fd46579d74919219d1bb314083"
 dependencies = [
  "accesskit",
  "accesskit_consumer",
@@ -67,9 +67,9 @@ dependencies = [
 
 [[package]]
 name = "accesskit_macos"
-version = "0.26.2"
+version = "0.26.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "17cb8b66cef272d48161b02a6317cc2bdd5f98bb0a5e79c68f704a5862aa396b"
+checksum = "ce02dc63b43f0c9296af9ac946312a2dc8814427d7a64d2d600971dac55b6076"
 dependencies = [
  "accesskit",
  "accesskit_consumer",
@@ -81,9 +81,9 @@ dependencies = [
 
 [[package]]
 name = "accesskit_unix"
-version = "0.22.0"
+version = "0.22.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5376ba4cc23312587634abb5250b1ce8618f01a55915608209aafd01efb4bf8c"
+checksum = "03e156ed3802e35eefe894ef2671bc6c889303d8a7e110b5e1b48f504b91362f"
 dependencies = [
  "accesskit",
  "accesskit_atspi_common",
@@ -99,9 +99,9 @@ dependencies = [
 
 [[package]]
 name = "accesskit_windows"
-version = "0.33.1"
+version = "0.34.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "36e93ac7bf50b964f1cbb75f741629a4e950571baa1ef1274457ab5a80d9bcc2"
+checksum = "106c2b961215864d1c2e703ee63269c25c4e80a577ffb2c1017b9c17dcdf83a1"
 dependencies = [
  "accesskit",
  "accesskit_consumer",
@@ -113,9 +113,9 @@ dependencies = [
 
 [[package]]
 name = "accesskit_winit"
-version = "0.33.1"
+version = "0.33.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "41fe5862066316f6caaf02cd3aecd54bced25503ac5dbbfd0d03a42bc1246217"
+checksum = "d5b41e63a69f36d9f1f41e70464c7e5f72eee485ef26aab19f0b4f86e6c0a84c"
 dependencies = [
  "accesskit",
  "accesskit_ios",
@@ -167,7 +167,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0f2a1bb052857d5dd49572219344a7332b31b76405648eabac5bc68978251bcd"
 dependencies = [
  "android-properties",
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "cc",
  "jni",
  "libc",
@@ -176,7 +176,7 @@ dependencies = [
  "ndk-context",
  "ndk-sys",
  "num_enum",
- "thiserror 2.0.18",
+ "thiserror 2.0.19",
 ]
 
 [[package]]
@@ -221,6 +221,7 @@ dependencies = [
  "parking_lot",
  "percent-encoding",
  "windows-sys 0.60.2",
+ "wl-clipboard-rs",
  "x11rb",
 ]
 
@@ -232,9 +233,9 @@ checksum = "76a2e8124351fda1ef8aaaa3bbd7ebbcb486bbcd4225aca0aa0d84bb2db8fecb"
 
 [[package]]
 name = "arrayvec"
-version = "0.7.6"
+version = "0.7.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7c02d123df017efcdfbd739ef81735b36c5ba83ec3c59c80a9d7ecc718f92e50"
+checksum = "d3fb67a6e08acf24fdeccbac2cb6ac4305825bd1f117462e0e6f2f193345ad56"
 
 [[package]]
 name = "as-raw-xcb-connection"
@@ -344,7 +345,7 @@ checksum = "3b43422f69d8ff38f95f1b2bb76517c91589a924d1559a0e935d7c8ce0274c11"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.119",
 ]
 
 [[package]]
@@ -373,13 +374,13 @@ checksum = "8b75356056920673b02621b35afd0f7dda9306d03c79a30f5c56c44cf256e3de"
 
 [[package]]
 name = "async-trait"
-version = "0.1.89"
+version = "0.1.91"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9035ad2d096bed7955a320ee7e2230574d28fd3c3a0f186cbea1ff3c7eed5dbb"
+checksum = "ae36dc4177970ef04fde5178d3e2429882def40e57a451f919c098f72baa6cec"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 3.0.3",
 ]
 
 [[package]]
@@ -446,6 +447,12 @@ version = "0.21.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9d297deb1925b89f2ccc13d7635fa0714f12c87adce1c75356b39ca9b7178567"
 
+[[package]]
+name = "base64"
+version = "0.22.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "72b3254f16251a8381aa12e40e3c4d2f0199f8c6508fbecb9d91f575e0fbb8c6"
+
 [[package]]
 name = "bit-set"
 version = "0.8.0"
@@ -484,9 +491,9 @@ checksum = "bef38d45163c2f1dde094a7dfd33ccf595c92905c8f8f4fdc18d06fb1037718a"
 
 [[package]]
 name = "bitflags"
-version = "2.12.1"
+version = "2.13.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "84d7ced0ae9557296835c32bf1b1e02b44c746701f898460fb000d7eaa84f00a"
+checksum = "b588b76d00fde79687d7646a9b5bdf3cc0f655e0bbd080335a95d7e96f3587da"
 dependencies = [
  "serde_core",
 ]
@@ -550,22 +557,22 @@ checksum = "72f5acc6cb2ba439de613abc23857ec3d78374d8ed5ac84e9d11336e87da8649"
 
 [[package]]
 name = "bytemuck"
-version = "1.25.0"
+version = "1.25.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c8efb64bd706a16a1bdde310ae86b351e4d21550d98d056f22f8a7f7a2183fec"
+checksum = "95832e849adfb21180ccb6826a99da14e5d266ae5c2e668e1602cf234f153797"
 dependencies = [
  "bytemuck_derive",
 ]
 
 [[package]]
 name = "bytemuck_derive"
-version = "1.10.2"
+version = "1.11.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f9abbd1bc6865053c427f7198e6af43bfdedc55ab791faed4fbd361d789575ff"
+checksum = "f65693059b6b9c588b9f62fed1cedbf0a8b805631457ea162d68f0de186f3de5"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.119",
 ]
 
 [[package]]
@@ -582,9 +589,9 @@ checksum = "8f1fe948ff07f4bd06c30984e69f5b4899c516a3ef74f34df92a2df2ab535495"
 
 [[package]]
 name = "bytes"
-version = "1.11.1"
+version = "1.12.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1e748733b7cbc798e1434b6ac524f0c1ff2ab456fe201501e6497c8417a4fc33"
+checksum = "fc652a48c352aef3ea3aed32080501cf3ef6ed5da78602a020c991775b0aff04"
 
 [[package]]
 name = "calloop"
@@ -592,7 +599,7 @@ version = "0.13.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b99da2f8558ca23c71f4fd15dc57c906239752dd27ff3c00a1d56b685b7cbfec"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "log",
  "polling",
  "rustix 0.38.44",
@@ -614,9 +621,9 @@ dependencies = [
 
 [[package]]
 name = "cc"
-version = "1.2.63"
+version = "1.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "556e016178bb5662a08681bbe0f00f8e17631781a4dfc8c45e466e4b185ec27f"
+checksum = "5add81bb678e6cb321aff7fa0dc7689ad82b112dbc032cea19f91d6b8e3582b9"
 dependencies = [
  "find-msvc-tools",
  "jobserver",
@@ -632,9 +639,9 @@ checksum = "9330f8b2ff13f34540b44e946ef35111825727b38d33286ef986142615121801"
 
 [[package]]
 name = "cfg_aliases"
-version = "0.2.1"
+version = "0.2.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "613afe47fcd5fac7ccf1db93babcb082c5994d996f20b8b159f2ad1658eb5724"
+checksum = "f079e83a288787bcd14a6aea84cee5c87a67c5a3e660c30f557a3d24761b3527"
 
 [[package]]
 name = "chrono"
@@ -664,7 +671,7 @@ version = "0.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0fa961b519f0b462e3a3b4a34b64d119eeaca1d59af726fe450bbba07a9fc0a1"
 dependencies = [
- "thiserror 2.0.18",
+ "thiserror 2.0.19",
 ]
 
 [[package]]
@@ -698,6 +705,12 @@ dependencies = [
  "bytemuck",
 ]
 
+[[package]]
+name = "color_quant"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3d7b894f5411737b7867f4827955924d7c254fc9f4d91a6aad6b097804b1018b"
+
 [[package]]
 name = "combine"
 version = "4.6.7"
@@ -779,7 +792,7 @@ version = "0.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3d44a101f213f6c4cdc1853d4b78aef6db6bdfa3468798cc1d9912f4735013eb"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "core-foundation 0.10.1",
  "libc",
 ]
@@ -819,9 +832,9 @@ checksum = "790eea4361631c5e7d22598ecd5723ff611904e3344ce8720784c93e3d83d40b"
 
 [[package]]
 name = "crossbeam-utils"
-version = "0.8.21"
+version = "0.8.22"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d0a5c400df2834b80a4c3327b3aad3a4c4cd4de0629063962b03235697506a28"
+checksum = "61803da095bee82a81bb1a452ecc25d3b2f1416d1897eb86430c6159ef717c17"
 
 [[package]]
 name = "crunchy"
@@ -835,6 +848,12 @@ version = "1.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f27ae1dd37df86211c42e150270f82743308803d90a6f6e6651cd730d5e1732f"
 
+[[package]]
+name = "data-url"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "be1e0bca6c3637f992fc1cc7cbc52a78c1ef6db076dbf1059c4323d6a2048376"
+
 [[package]]
 name = "directories"
 version = "5.0.1"
@@ -868,7 +887,7 @@ version = "0.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1e0e367e4e7da84520dedcac1901e4da967309406d1e51017ae1abfb97adbd38"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "objc2 0.6.4",
 ]
 
@@ -880,7 +899,7 @@ checksum = "1ac70aa55017e108007fbaf5aa0f54b021c98f92ff8af59d42eda9da96e3dd4f"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.119",
 ]
 
 [[package]]
@@ -949,7 +968,7 @@ checksum = "67c78a4d8fdf9953a5c9d458f9efe940fd97a0cab0941c075a813ac594733827"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.119",
 ]
 
 [[package]]
@@ -1006,9 +1025,9 @@ dependencies = [
 
 [[package]]
 name = "fastrand"
-version = "2.4.1"
+version = "2.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9f1f227452a390804cdb637b74a86990f2a7d7ba4b7d5693aac9b4dd6defd8d6"
+checksum = "da7c62ceae207dd37ea5b845da6a0696c799f85e97da1ab5b7910be3c1c80223"
 
 [[package]]
 name = "fax"
@@ -1037,6 +1056,12 @@ version = "0.1.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "5baebc0774151f905a1a2cc41989300b1e6fbb29aff0ceffa1064fdd3088d582"
 
+[[package]]
+name = "fixedbitset"
+version = "0.5.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1d674e81391d1e1ab681a28d99df07927c6d4aa5b027d7da16ba32d1d21ecd99"
+
 [[package]]
 name = "flate2"
 version = "1.1.9"
@@ -1047,6 +1072,12 @@ dependencies = [
  "miniz_oxide",
 ]
 
+[[package]]
+name = "float-cmp"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "98de4bbd547a563b716d8dfa9aad1cb19bfab00f4fa09a6a4ed21dbcf44ce9c4"
+
 [[package]]
 name = "foldhash"
 version = "0.1.5"
@@ -1077,6 +1108,38 @@ dependencies = [
  "bytemuck",
 ]
 
+[[package]]
+name = "font-types"
+version = "0.12.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0a7299a780854a6d391be2ae1c8521c9368471b559dbfd6a8dbd9f407eaff100"
+dependencies = [
+ "bytemuck",
+]
+
+[[package]]
+name = "fontconfig-parser"
+version = "0.5.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bbc773e24e02d4ddd8395fd30dc147524273a83e54e0f312d986ea30de5f5646"
+dependencies = [
+ "roxmltree 0.20.0",
+]
+
+[[package]]
+name = "fontdb"
+version = "0.23.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "457e789b3d1202543297a350643cf459f836cade38934e7a4cf6a39e7cde2905"
+dependencies = [
+ "fontconfig-parser",
+ "log",
+ "memmap2 0.9.11",
+ "slotmap",
+ "tinyvec",
+ "ttf-parser 0.25.1",
+]
+
 [[package]]
 name = "fontdue"
 version = "0.9.3"
@@ -1097,19 +1160,31 @@ dependencies = [
  "hashbrown 0.15.5",
  "icu_locale_core",
  "linebender_resource_handle",
- "memmap2",
+ "memmap2 0.9.11",
  "objc2 0.6.4",
  "objc2-core-foundation",
  "objc2-core-text",
  "objc2-foundation 0.3.2",
  "read-fonts 0.35.0",
- "roxmltree",
+ "roxmltree 0.20.0",
  "smallvec",
  "windows 0.58.0",
  "windows-core 0.58.0",
  "yeslogic-fontconfig-sys",
 ]
 
+[[package]]
+name = "foreign-lottie"
+version = "0.1.0"
+dependencies = [
+ "kurbo",
+ "peniko",
+ "serde",
+ "serde_json",
+ "serde_repr",
+ "vello",
+]
+
 [[package]]
 name = "foreign-types"
 version = "0.5.0"
@@ -1122,13 +1197,13 @@ dependencies = [
 
 [[package]]
 name = "foreign-types-macros"
-version = "0.2.3"
+version = "0.2.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1a5c6c585bc94aaf2c7b51dd4c2ba22680844aba4c687be581871a6f518c5742"
+checksum = "ea5190182e6915eb873ddbc16e23b711b6eb1f9c00a0d0a3a91b5f6228475225"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 3.0.3",
 ]
 
 [[package]]
@@ -1142,10 +1217,19 @@ name = "foreign-vox"
 version = "0.1.0"
 
 [[package]]
-name = "futures-core"
-version = "0.3.32"
+name = "form_urlencoded"
+version = "1.2.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7e3450815272ef58cec6d564423f6e755e25379b217b0bc688e295ba24df6b1d"
+checksum = "cb4cb245038516f5f85277875cdaa4f7d2c9a0fa0468de06ed190163b1581fcf"
+dependencies = [
+ "percent-encoding",
+]
+
+[[package]]
+name = "futures-core"
+version = "0.3.33"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2cd50c473c80f6d7c3670a752354b8e569b1a7cbfdc0419ec88e5edad85e0dc7"
 
 [[package]]
 name = "futures-intrusive"
@@ -1160,9 +1244,9 @@ dependencies = [
 
 [[package]]
 name = "futures-io"
-version = "0.3.32"
+version = "0.3.33"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cecba35d7ad927e23624b22ad55235f2239cfa44fd10428eecbeba6d6a717718"
+checksum = "4577ecaa3c4f96589d473f679a71b596316f6641bc350038b962a5daf0085d7a"
 
 [[package]]
 name = "futures-lite"
@@ -1179,26 +1263,26 @@ dependencies = [
 
 [[package]]
 name = "futures-macro"
-version = "0.3.32"
+version = "0.3.33"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e835b70203e41293343137df5c0664546da5745f82ec9b84d40be8336958447b"
+checksum = "2d6d3cde68c518367be28956066ddfef33813991b77a55005a69dae04bf3b10b"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.119",
 ]
 
 [[package]]
 name = "futures-task"
-version = "0.3.32"
+version = "0.3.33"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "037711b3d59c33004d3856fbdc83b99d4ff37a24768fa1be9ce3538a1cde4393"
+checksum = "b231ed28831efb4a61a08580c4bc233ec56bc009f4cd8f52da2c3cb97df0c109"
 
 [[package]]
 name = "futures-util"
-version = "0.3.32"
+version = "0.3.33"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "389ca41296e6190b48053de0321d02a77f32f8a5d2461dd38762c0593805c6d6"
+checksum = "a77a90a256fce34da66415271e30f94ee91c57b04b8a2c042d9cf3220179deaa"
 dependencies = [
  "futures-core",
  "futures-macro",
@@ -1251,6 +1335,16 @@ dependencies = [
  "r-efi 6.0.0",
 ]
 
+[[package]]
+name = "gif"
+version = "0.14.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ee8cfcc411d9adbbaba82fb72661cc1bcca13e8bba98b364e62b2dba8f960159"
+dependencies = [
+ "color_quant",
+ "weezl",
+]
+
 [[package]]
 name = "gl_generator"
 version = "0.14.0"
@@ -1319,21 +1413,21 @@ dependencies = [
 
 [[package]]
 name = "gpu-alloc"
-version = "0.6.0"
+version = "0.6.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fbcd2dba93594b227a1f57ee09b8b9da8892c34d55aa332e034a228d0fe6a171"
+checksum = "45cf04b2726f02df5508c6de726acdc90cdf97ac771a9a0ffd8ba10a6e696bf9"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "gpu-alloc-types",
 ]
 
 [[package]]
 name = "gpu-alloc-types"
-version = "0.3.0"
+version = "0.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "98ff03b468aa837d70984d55f5d3f846f6ec31fe34bbb97c4f85219caeee1ca4"
+checksum = "b2bbed164dd10ed526c2e4fe3e721ca4a71c61730e5aafac6844b417b3227058"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
 ]
 
 [[package]]
@@ -1358,8 +1452,8 @@ dependencies = [
  "hashbrown 0.16.1",
  "log",
  "presser",
- "thiserror 2.0.18",
- "windows 0.58.0",
+ "thiserror 2.0.19",
+ "windows 0.62.2",
 ]
 
 [[package]]
@@ -1368,7 +1462,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b89c83349105e3732062a895becfc71a8f921bb71ecbbdd8ff99263e3b53a0ca"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "gpu-descriptor-types",
  "hashbrown 0.15.5",
 ]
@@ -1379,9 +1473,13 @@ version = "0.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "fdf242682df893b86f33a73828fb09ca4b2d3bb6cc95249707fc684d27484b91"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
 ]
 
+[[package]]
+name = "grafo-nav"
+version = "0.1.0"
+
 [[package]]
 name = "grid"
 version = "1.0.1"
@@ -1425,7 +1523,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "92c020db12c71d8a12a3fe7607873cade3a01a6287e29d540c8723276221b9d8"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "bytemuck",
  "core_maths",
  "read-fonts 0.35.0",
@@ -1516,7 +1614,7 @@ dependencies = [
  "js-sys",
  "log",
  "wasm-bindgen",
- "windows-core 0.58.0",
+ "windows-core 0.62.2",
 ]
 
 [[package]]
@@ -1528,6 +1626,20 @@ dependencies = [
  "cc",
 ]
 
+[[package]]
+name = "icu_collections"
+version = "2.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2984d1cd16c883d7935b9e07e44071dca8d917fd52ecc02c04d5fa0b5a3f191c"
+dependencies = [
+ "displaydoc",
+ "potential_utf",
+ "utf8_iter",
+ "yoke",
+ "zerofrom",
+ "zerovec",
+]
+
 [[package]]
 name = "icu_locale_core"
 version = "2.2.0"
@@ -1539,6 +1651,83 @@ dependencies = [
  "serde",
  "tinystr",
  "writeable",
+ "zerovec",
+]
+
+[[package]]
+name = "icu_normalizer"
+version = "2.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c56e5ee99d6e3d33bd91c5d85458b6005a22140021cc324cea84dd0e72cff3b4"
+dependencies = [
+ "icu_collections",
+ "icu_normalizer_data",
+ "icu_properties",
+ "icu_provider",
+ "smallvec",
+ "zerovec",
+]
+
+[[package]]
+name = "icu_normalizer_data"
+version = "2.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "da3be0ae77ea334f4da67c12f149704f19f81d1adf7c51cf482943e84a2bad38"
+
+[[package]]
+name = "icu_properties"
+version = "2.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bee3b67d0ea5c2cca5003417989af8996f8604e34fb9ddf96208a033901e70de"
+dependencies = [
+ "icu_collections",
+ "icu_locale_core",
+ "icu_properties_data",
+ "icu_provider",
+ "zerotrie",
+ "zerovec",
+]
+
+[[package]]
+name = "icu_properties_data"
+version = "2.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8e2bbb201e0c04f7b4b3e14382af113e17ba4f63e2c9d2ee626b720cbce54a14"
+
+[[package]]
+name = "icu_provider"
+version = "2.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "139c4cf31c8b5f33d7e199446eff9c1e02decfc2f0eec2c8d71f65befa45b421"
+dependencies = [
+ "displaydoc",
+ "icu_locale_core",
+ "writeable",
+ "yoke",
+ "zerofrom",
+ "zerotrie",
+ "zerovec",
+]
+
+[[package]]
+name = "idna"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3b0875f23caa03898994f6ddc501886a45c7d3d62d04d2d90788d47be1b1e4de"
+dependencies = [
+ "idna_adapter",
+ "smallvec",
+ "utf8_iter",
+]
+
+[[package]]
+name = "idna_adapter"
+version = "1.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cb68373c0d6620ef8105e855e7745e18b0d00d3bdb07fb532e434244cdb9a714"
+dependencies = [
+ "icu_normalizer",
+ "icu_properties",
 ]
 
 [[package]]
@@ -1549,12 +1738,34 @@ checksum = "85ab80394333c02fe689eaf900ab500fbd0c2213da414687ebf995a65d5a6104"
 dependencies = [
  "bytemuck",
  "byteorder-lite",
+ "color_quant",
+ "gif",
+ "image-webp",
  "moxcms",
  "num-traits",
  "png 0.18.1",
+ "qoi",
  "tiff",
+ "zune-core",
+ "zune-jpeg",
 ]
 
+[[package]]
+name = "image-webp"
+version = "0.2.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "525e9ff3e1a4be2fbea1fdf0e98686a6d98b4d8f937e1bf7402245af1909e8c3"
+dependencies = [
+ "byteorder-lite",
+ "quick-error",
+]
+
+[[package]]
+name = "imagesize"
+version = "0.14.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "09e54e57b4c48b40f7aec75635392b12b3421fa26fe8b4332e63138ed278459c"
+
 [[package]]
 name = "indexmap"
 version = "2.14.0"
@@ -1583,7 +1794,7 @@ dependencies = [
  "jni-sys 0.4.1",
  "log",
  "simd_cesu8",
- "thiserror 2.0.18",
+ "thiserror 2.0.19",
  "walkdir",
  "windows-link",
 ]
@@ -1598,7 +1809,7 @@ dependencies = [
  "quote",
  "rustc_version",
  "simd_cesu8",
- "syn",
+ "syn 2.0.119",
 ]
 
 [[package]]
@@ -1626,28 +1837,27 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "38c0b942f458fe50cdac086d2f946512305e5631e720728f2a61aabcd47a6264"
 dependencies = [
  "quote",
- "syn",
+ "syn 2.0.119",
 ]
 
 [[package]]
 name = "jobserver"
-version = "0.1.34"
+version = "0.1.35"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9afb3de4395d6b3e67a780b6de64b51c978ecf11cb9a462c66be7d4ca9039d33"
+checksum = "1c00acbd29eabad4a2392fa0e921c874934dbbf4194312ad20f04a0ed67a3cb3"
 dependencies = [
- "getrandom 0.3.4",
+ "getrandom 0.4.3",
  "libc",
 ]
 
 [[package]]
 name = "js-sys"
-version = "0.3.99"
+version = "0.3.103"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "142bc4740e452c1e57ade0cbc129f139c9093e354346f0872ef985f4f5cf5f11"
+checksum = "53b44bfcdb3f8d5837a46dae1ca9660a837176eee74a28b229bc626816589102"
 dependencies = [
  "cfg-if",
  "futures-util",
- "once_cell",
  "wasm-bindgen",
 ]
 
@@ -1681,10 +1891,16 @@ dependencies = [
 ]
 
 [[package]]
-name = "libc"
-version = "0.2.186"
+name = "leb128fmt"
+version = "0.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "68ab91017fe16c622486840e4c83c9a37afeff978bd239b5293d61ece587de66"
+checksum = "09edd9e8b54e49e587e4f6295a7d29c3ea94d469cb40ab8ca70b288248a81db2"
+
+[[package]]
+name = "libc"
+version = "0.2.189"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3eaf3ede3fee6db1a4c2ee091bf8a8b4dccdc6d17f656fb07896ee72867612f2"
 
 [[package]]
 name = "libloading"
@@ -1704,14 +1920,14 @@ checksum = "b6d2cec3eae94f9f509c767b45932f1ada8350c4bdb85af2fcab4a3c14807981"
 
 [[package]]
 name = "libredox"
-version = "0.1.17"
+version = "0.1.18"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f02ab6bace2054fb888a3c16f990117b579d14a3088e472d63c6011fa185c9d3"
+checksum = "c943259e342f1e06ff2da7a83eabdfe7f92ce10262688dbf1895ff0b3e6e4652"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "libc",
  "plain",
- "redox_syscall 0.8.1",
+ "redox_syscall 0.9.0",
 ]
 
 [[package]]
@@ -1767,6 +1983,31 @@ dependencies = [
  "wgpu 27.0.1",
 ]
 
+[[package]]
+name = "llimphi-anim"
+version = "0.1.0"
+dependencies = [
+ "kurbo",
+]
+
+[[package]]
+name = "llimphi-anim-studio"
+version = "0.1.0"
+dependencies = [
+ "llimphi-anim",
+ "llimphi-clipboard",
+ "llimphi-image",
+ "llimphi-mesh",
+ "llimphi-theme",
+ "llimphi-ui",
+ "llimphi-widget-button",
+ "llimphi-widget-nodegraph",
+ "llimphi-widget-slider",
+ "llimphi-widget-text-input",
+ "ron",
+ "serde",
+]
+
 [[package]]
 name = "llimphi-clipboard"
 version = "0.1.0"
@@ -1795,6 +2036,48 @@ dependencies = [
  "wgpu 27.0.1",
 ]
 
+[[package]]
+name = "llimphi-gallery"
+version = "0.1.0"
+dependencies = [
+ "app-bus",
+ "llimphi-icons",
+ "llimphi-theme",
+ "llimphi-ui",
+ "llimphi-widget-avatar",
+ "llimphi-widget-badge",
+ "llimphi-widget-breadcrumb",
+ "llimphi-widget-card",
+ "llimphi-widget-context-menu",
+ "llimphi-widget-empty",
+ "llimphi-widget-field",
+ "llimphi-widget-menubar",
+ "llimphi-widget-modal",
+ "llimphi-widget-panel",
+ "llimphi-widget-progress",
+ "llimphi-widget-segmented",
+ "llimphi-widget-shortcuts-help",
+ "llimphi-widget-skeleton",
+ "llimphi-widget-spinner",
+ "llimphi-widget-splash",
+ "llimphi-widget-status-bar",
+ "llimphi-widget-switch",
+ "llimphi-widget-toast",
+ "llimphi-widget-tooltip",
+ "llimphi-widget-wawa-mark",
+]
+
+[[package]]
+name = "llimphi-gpu-bench"
+version = "0.1.0"
+dependencies = [
+ "llimphi-hal",
+ "llimphi-raster",
+ "png 0.18.1",
+ "pollster",
+ "vello",
+]
+
 [[package]]
 name = "llimphi-hal"
 version = "0.1.0"
@@ -1812,6 +2095,26 @@ dependencies = [
  "llimphi-ui",
 ]
 
+[[package]]
+name = "llimphi-image"
+version = "0.1.0"
+dependencies = [
+ "image",
+ "llimphi-raster",
+ "ureq",
+]
+
+[[package]]
+name = "llimphi-layer"
+version = "0.1.0"
+dependencies = [
+ "llimphi-ui",
+ "pollster",
+ "raw-window-handle",
+ "smithay-client-toolkit",
+ "wayland-client",
+]
+
 [[package]]
 name = "llimphi-layout"
 version = "0.1.0"
@@ -1822,6 +2125,24 @@ dependencies = [
  "taffy",
 ]
 
+[[package]]
+name = "llimphi-lottie"
+version = "0.1.0"
+dependencies = [
+ "foreign-lottie",
+ "llimphi-anim",
+ "llimphi-ui",
+]
+
+[[package]]
+name = "llimphi-mesh"
+version = "0.1.0"
+dependencies = [
+ "llimphi-anim",
+ "llimphi-lottie",
+ "llimphi-ui",
+]
+
 [[package]]
 name = "llimphi-module-bookmarks"
 version = "0.1.0"
@@ -1918,6 +2239,37 @@ dependencies = [
  "parking_lot",
 ]
 
+[[package]]
+name = "llimphi-svg"
+version = "0.1.0"
+dependencies = [
+ "llimphi-ui",
+ "vello_svg",
+]
+
+[[package]]
+name = "llimphi-term-graphics"
+version = "0.1.0"
+dependencies = [
+ "base64 0.22.1",
+ "flate2",
+ "image",
+]
+
+[[package]]
+name = "llimphi-test"
+version = "0.1.0"
+dependencies = [
+ "image",
+ "llimphi-compositor",
+ "llimphi-hal",
+ "llimphi-layout",
+ "llimphi-raster",
+ "llimphi-text",
+ "llimphi-theme",
+ "pollster",
+]
+
 [[package]]
 name = "llimphi-text"
 version = "0.1.0"
@@ -1948,6 +2300,7 @@ dependencies = [
  "llimphi-layout",
  "llimphi-raster",
  "llimphi-text",
+ "log",
  "pollster",
  "uuid",
 ]
@@ -1968,10 +2321,42 @@ dependencies = [
  "serde",
 ]
 
+[[package]]
+name = "llimphi-wasm-app-sdk"
+version = "0.1.0"
+dependencies = [
+ "llimphi-wire-view",
+ "postcard",
+ "serde",
+]
+
+[[package]]
+name = "llimphi-wasm-demo-counter"
+version = "0.1.0"
+dependencies = [
+ "llimphi-wasm-app-sdk",
+]
+
+[[package]]
+name = "llimphi-wasm-demo-form"
+version = "0.1.0"
+dependencies = [
+ "llimphi-wasm-app-sdk",
+]
+
+[[package]]
+name = "llimphi-wasm-wasi"
+version = "0.1.0"
+dependencies = [
+ "wasmi",
+ "wat",
+]
+
 [[package]]
 name = "llimphi-widget-app-header"
 version = "0.1.0"
 dependencies = [
+ "llimphi-icons",
  "llimphi-theme",
  "llimphi-ui",
  "llimphi-widget-panel",
@@ -2057,12 +2442,16 @@ dependencies = [
  "llimphi-ui",
  "llimphi-widget-slider",
  "llimphi-widget-text-input",
+ "png 0.18.1",
+ "pollster",
 ]
 
 [[package]]
 name = "llimphi-widget-context-menu"
 version = "0.1.0"
 dependencies = [
+ "llimphi-icons",
+ "llimphi-motion",
  "llimphi-theme",
  "llimphi-ui",
  "llimphi-widget-panel",
@@ -2074,6 +2463,7 @@ version = "0.1.0"
 dependencies = [
  "llimphi-theme",
  "llimphi-ui",
+ "llimphi-widget-list",
 ]
 
 [[package]]
@@ -2082,6 +2472,7 @@ version = "0.1.0"
 dependencies = [
  "llimphi-theme",
  "llimphi-ui",
+ "llimphi-widget-badge",
 ]
 
 [[package]]
@@ -2126,6 +2517,27 @@ dependencies = [
  "llimphi-ui",
 ]
 
+[[package]]
+name = "llimphi-widget-gallery"
+version = "0.1.0"
+dependencies = [
+ "app-bus",
+ "llimphi-theme",
+ "llimphi-ui",
+ "llimphi-widget-app-header",
+ "llimphi-widget-banner",
+ "llimphi-widget-button",
+ "llimphi-widget-context-menu",
+ "llimphi-widget-list",
+ "llimphi-widget-menubar",
+ "llimphi-widget-splitter",
+ "llimphi-widget-stat-card",
+ "llimphi-widget-tabs",
+ "llimphi-widget-text-input",
+ "llimphi-widget-theme-switcher",
+ "llimphi-widget-tiled",
+]
+
 [[package]]
 name = "llimphi-widget-gauge"
 version = "0.1.0"
@@ -2140,6 +2552,7 @@ version = "0.1.0"
 dependencies = [
  "llimphi-theme",
  "llimphi-ui",
+ "llimphi-widget-list",
 ]
 
 [[package]]
@@ -2150,6 +2563,15 @@ dependencies = [
  "llimphi-ui",
 ]
 
+[[package]]
+name = "llimphi-widget-lazy-list"
+version = "0.1.0"
+dependencies = [
+ "llimphi-theme",
+ "llimphi-ui",
+ "llimphi-widget-scroll",
+]
+
 [[package]]
 name = "llimphi-widget-list"
 version = "0.1.0"
@@ -2182,8 +2604,10 @@ dependencies = [
 name = "llimphi-widget-navigator"
 version = "0.1.0"
 dependencies = [
+ "grafo-nav",
  "llimphi-theme",
  "llimphi-ui",
+ "llimphi-widget-context-menu",
  "llimphi-widget-nodegraph",
  "llimphi-widget-segmented",
  "llimphi-widget-tree",
@@ -2221,6 +2645,17 @@ dependencies = [
  "llimphi-ui",
 ]
 
+[[package]]
+name = "llimphi-widget-rag-sidebar"
+version = "0.1.0"
+dependencies = [
+ "llimphi-icons",
+ "llimphi-theme",
+ "llimphi-ui",
+ "llimphi-widget-dock-rail",
+ "llimphi-widget-segmented",
+]
+
 [[package]]
 name = "llimphi-widget-range-slider"
 version = "0.1.0"
@@ -2237,6 +2672,25 @@ dependencies = [
  "llimphi-ui",
 ]
 
+[[package]]
+name = "llimphi-widget-rive-button"
+version = "0.1.0"
+dependencies = [
+ "llimphi-anim",
+ "llimphi-lottie",
+ "llimphi-ui",
+]
+
+[[package]]
+name = "llimphi-widget-router"
+version = "0.1.0"
+dependencies = [
+ "llimphi-theme",
+ "llimphi-ui",
+ "llimphi-widget-button",
+ "llimphi-widget-hero",
+]
+
 [[package]]
 name = "llimphi-widget-scaffold"
 version = "0.1.0"
@@ -2383,8 +2837,7 @@ dependencies = [
 name = "llimphi-widget-text-area"
 version = "0.1.0"
 dependencies = [
- "llimphi-theme",
- "llimphi-ui",
+ "llimphi-widget-text-input",
 ]
 
 [[package]]
@@ -2394,7 +2847,6 @@ dependencies = [
  "llimphi-theme",
  "llimphi-ui",
  "llimphi-widget-text-editor-core",
- "tree-sitter",
 ]
 
 [[package]]
@@ -2421,6 +2873,7 @@ dependencies = [
 name = "llimphi-widget-text-input"
 version = "0.1.0"
 dependencies = [
+ "llimphi-motion",
  "llimphi-theme",
  "llimphi-ui",
  "llimphi-widget-text-editor",
@@ -2491,6 +2944,7 @@ version = "0.1.0"
 dependencies = [
  "llimphi-theme",
  "llimphi-ui",
+ "llimphi-widget-list",
 ]
 
 [[package]]
@@ -2515,6 +2969,14 @@ dependencies = [
  "llimphi-ui",
 ]
 
+[[package]]
+name = "llimphi-wire-view"
+version = "0.1.0"
+dependencies = [
+ "postcard",
+ "serde",
+]
+
 [[package]]
 name = "llimphi-workspace"
 version = "0.1.0"
@@ -2535,9 +2997,9 @@ dependencies = [
 
 [[package]]
 name = "log"
-version = "0.4.31"
+version = "0.4.33"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "113b30b4cd05f7c06868fdb2854f66a7b9fece9a48425351cd532e810d74024f"
+checksum = "0ceec5bc11778974d1bcb055b18002eba7f4b3518b6a0081b3af5f21666da9ad"
 
 [[package]]
 name = "malloc_buf"
@@ -2550,15 +3012,24 @@ dependencies = [
 
 [[package]]
 name = "memchr"
-version = "2.8.1"
+version = "2.8.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6b947ae49db0d222b1dbc6b113ce7248a3fc3a6ca21b696717bfc000ba4484d8"
+checksum = "cf8baf1c55e62ffcace7a9f06f4bd9cd3f0c4beb022d3b367256b91b87513d98"
 
 [[package]]
 name = "memmap2"
-version = "0.9.10"
+version = "0.8.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "714098028fe011992e1c3962653c96b2d578c4b4bce9036e15ff220319b1e0e3"
+checksum = "43a5a03cefb0d953ec0be133036f14e109412fa594edc2f77227249db66cc3ed"
+dependencies = [
+ "libc",
+]
+
+[[package]]
+name = "memmap2"
+version = "0.9.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d1219ed1b7f229ee7104d281dd01d6802fe28bb6e95d292942c4daacdeb798c0"
 dependencies = [
  "libc",
 ]
@@ -2578,7 +3049,7 @@ version = "0.32.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "00c15a6f673ff72ddcc22394663290f870fb224c1bfce55734a75c414150e605"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "block",
  "core-graphics-types 0.2.0",
  "foreign-types",
@@ -2599,9 +3070,9 @@ dependencies = [
 
 [[package]]
 name = "mio"
-version = "1.2.1"
+version = "1.2.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "02bd0af71c67b473010cbbc60715ee815645a4dc942899111f494b4b737d6fda"
+checksum = "30d65c71f1ce40ab09135ce117d742b9f8a19ff91a41a8b57ed50bc2de59c427"
 dependencies = [
  "libc",
  "wasi",
@@ -2626,7 +3097,7 @@ checksum = "066cf25f0e8b11ee0df221219010f213ad429855f57c494f995590c861a9a7d8"
 dependencies = [
  "arrayvec",
  "bit-set 0.8.0",
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "cfg-if",
  "cfg_aliases",
  "codespan-reporting 0.12.0",
@@ -2640,19 +3111,19 @@ dependencies = [
  "once_cell",
  "rustc-hash",
  "spirv 0.3.0+sdk-1.3.268.0",
- "thiserror 2.0.18",
+ "thiserror 2.0.19",
  "unicode-ident",
 ]
 
 [[package]]
 name = "naga"
-version = "29.0.3"
+version = "29.0.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0dd91265cc2454558f659b3b4b9640f0ddb8cc6521277f166b8a8c181c898079"
+checksum = "b2bf919621e7975acb27d881bae2fb993e0d45c8e0446e85e6272971e00dc8df"
 dependencies = [
  "arrayvec",
  "bit-set 0.9.1",
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "cfg-if",
  "cfg_aliases",
  "codespan-reporting 0.13.1",
@@ -2666,7 +3137,7 @@ dependencies = [
  "once_cell",
  "rustc-hash",
  "spirv 0.4.0+sdk-1.4.341.0",
- "thiserror 2.0.18",
+ "thiserror 2.0.19",
  "unicode-ident",
 ]
 
@@ -2676,7 +3147,7 @@ version = "0.9.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c3f42e7bbe13d351b6bead8286a43aac9534b82bd3cc43e47037f012ebfd62d4"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "jni-sys 0.3.1",
  "log",
  "ndk-sys",
@@ -2700,6 +3171,15 @@ dependencies = [
  "jni-sys 0.3.1",
 ]
 
+[[package]]
+name = "nom"
+version = "8.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "df9761775871bdef83bee530e60050f7e54b1105350d6884eb0fb4f46c2f9405"
+dependencies = [
+ "memchr",
+]
+
 [[package]]
 name = "nucleo-matcher"
 version = "0.3.1"
@@ -2739,7 +3219,7 @@ dependencies = [
  "proc-macro-crate",
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.119",
 ]
 
 [[package]]
@@ -2782,7 +3262,7 @@ version = "0.2.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e4e89ad9e3d7d297152b17d39ed92cd50ca8063a89a9fa569046d41568891eff"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "block2 0.5.1",
  "libc",
  "objc2 0.5.2",
@@ -2798,7 +3278,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d49e936b501e5c5bf01fda3a9452ff86dc3ea98ad5f283e1455153142d97518c"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "objc2 0.6.4",
  "objc2-core-graphics",
  "objc2-foundation 0.3.2",
@@ -2810,7 +3290,7 @@ version = "0.2.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "74dd3b56391c7a0596a295029734d3c1c5e7e510a4cb30245f8221ccea96b009"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "block2 0.5.1",
  "objc2 0.5.2",
  "objc2-core-location",
@@ -2834,7 +3314,7 @@ version = "0.2.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "617fbf49e071c178c0b24c080767db52958f716d9eabdf0890523aeae54773ef"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "block2 0.5.1",
  "objc2 0.5.2",
  "objc2-foundation 0.2.2",
@@ -2846,7 +3326,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2a180dd8642fa45cdb7dd721cd4c11b1cadd4929ce112ebd8b9f5803cc79d536"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "dispatch2",
  "objc2 0.6.4",
 ]
@@ -2857,7 +3337,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e022c9d066895efa1345f8e33e584b9f958da2fd4cd116792e15e07e4720a807"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "dispatch2",
  "objc2 0.6.4",
  "objc2-core-foundation",
@@ -2894,7 +3374,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0cde0dfb48d25d2b4862161a4d5fcc0e3c24367869ad306b0c9ec0073bfed92d"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "objc2-core-foundation",
 ]
 
@@ -2910,7 +3390,7 @@ version = "0.2.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0ee638a5da3799329310ad4cfa62fbf045d5f56e3ef5ba4149e7452dcf89d5a8"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "block2 0.5.1",
  "dispatch",
  "libc",
@@ -2923,7 +3403,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e3e0adef53c21f888deb4fa59fc59f7eb17404926ee8a6f59f5df0fd7f9f3272"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "objc2 0.6.4",
  "objc2-core-foundation",
 ]
@@ -2934,7 +3414,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "180788110936d59bab6bd83b6060ffdfffb3b922ba1396b312ae795e1de9d81d"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "objc2 0.6.4",
  "objc2-core-foundation",
 ]
@@ -2957,7 +3437,7 @@ version = "0.2.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "dd0cba1276f6023976a406a14ffa85e1fdd19df6b0f737b063b95f6c8c7aadd6"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "block2 0.5.1",
  "objc2 0.5.2",
  "objc2-foundation 0.2.2",
@@ -2969,7 +3449,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a0125f776a10d00af4152d74616409f0d4a2053a6f57fa5b7d6aa2854ac04794"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "block2 0.6.2",
  "objc2 0.6.4",
  "objc2-foundation 0.3.2",
@@ -2981,7 +3461,7 @@ version = "0.2.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e42bee7bff906b14b167da2bac5efe6b6a07e6f7c0a21a7308d40c960242dc7a"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "block2 0.5.1",
  "objc2 0.5.2",
  "objc2-foundation 0.2.2",
@@ -2994,7 +3474,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "96c1358452b371bf9f104e21ec536d37a650eb10f7ee379fff67d2e08d537f1f"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "objc2 0.6.4",
  "objc2-core-foundation",
  "objc2-foundation 0.3.2",
@@ -3017,7 +3497,7 @@ version = "0.2.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b8bb46798b20cd6b91cbd113524c490f1686f4c4e8f49502431415f3512e2b6f"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "block2 0.5.1",
  "objc2 0.5.2",
  "objc2-cloud-kit",
@@ -3049,7 +3529,7 @@ version = "0.2.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "76cfcbf642358e8689af64cee815d139339f3ed8ad05103ed5eaf73db8d84cb3"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "block2 0.5.1",
  "objc2 0.5.2",
  "objc2-core-location",
@@ -3080,9 +3560,9 @@ dependencies = [
 
 [[package]]
 name = "ordered-float"
-version = "4.6.0"
+version = "5.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7bb71e1b3fa6ca1c61f383464aaf2bb0e2f8e772a1f01d486832464de363b951"
+checksum = "b7d950ca161dc355eaf28f82b11345ed76c6e1f6eb1f4f4479e0323b9e2fbd0e"
 dependencies = [
  "num-traits",
 ]
@@ -3097,6 +3577,16 @@ dependencies = [
  "pin-project-lite",
 ]
 
+[[package]]
+name = "os_pipe"
+version = "1.2.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7d8fae84b431384b68627d0f9b3b1245fcf9f46f6c0e3dc902e9dce64edd1967"
+dependencies = [
+ "libc",
+ "windows-sys 0.61.2",
+]
+
 [[package]]
 name = "owned_ttf_parser"
 version = "0.25.1"
@@ -3174,6 +3664,17 @@ version = "2.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9b4f627cb1b25917193a259e49bdad08f671f8d9708acfd5fe0a8c1455d87220"
 
+[[package]]
+name = "petgraph"
+version = "0.8.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8701b58ea97060d5e5b155d383a69952a60943f0e6dfe30b04c287beb0b27455"
+dependencies = [
+ "fixedbitset",
+ "hashbrown 0.15.5",
+ "indexmap",
+]
+
 [[package]]
 name = "phf"
 version = "0.13.1"
@@ -3205,7 +3706,7 @@ dependencies = [
  "phf_shared",
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.119",
 ]
 
 [[package]]
@@ -3217,6 +3718,12 @@ dependencies = [
  "siphasher",
 ]
 
+[[package]]
+name = "pico-args"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5be167a7af36ee22fe3115051bc51f6e6c7054c9348e28deb4f49bd6f705a315"
+
 [[package]]
 name = "pin-project"
 version = "1.1.13"
@@ -3234,7 +3741,7 @@ checksum = "c96395f0a926bc13b1c17622aaddda1ecb55d49c8f1bf9777e4d877800a43f8b"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.119",
 ]
 
 [[package]]
@@ -3285,7 +3792,7 @@ version = "0.18.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "60769b8b31b2a9f263dae2776c37b1b28ae246943cf719eb6946a1db05128a61"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "crc32fast",
  "fdeflate",
  "flate2",
@@ -3323,9 +3830,9 @@ dependencies = [
 
 [[package]]
 name = "portable-atomic"
-version = "1.13.1"
+version = "1.14.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c33a9471896f1c69cecef8d20cbe2f7accd12527ce60845ff44c153bb2a21b49"
+checksum = "3d20d5497ef88037a52ff98267d066e7f11fcc5e99bbfbd58a42336193aacec3"
 
 [[package]]
 name = "portable-atomic-util"
@@ -3349,6 +3856,15 @@ dependencies = [
  "serde",
 ]
 
+[[package]]
+name = "potential_utf"
+version = "0.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0103b1cef7ec0cf76490e969665504990193874ea05c85ff9bab8b911d0a0564"
+dependencies = [
+ "zerovec",
+]
+
 [[package]]
 name = "presser"
 version = "0.3.1"
@@ -3361,14 +3877,14 @@ version = "3.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e67ba7e9b2b56446f1d419b1d807906278ffa1a658a8a5d8a39dcb1f5a78614f"
 dependencies = [
- "toml_edit 0.25.12+spec-1.1.0",
+ "toml_edit 0.25.13+spec-1.1.0",
 ]
 
 [[package]]
 name = "proc-macro2"
-version = "1.0.106"
+version = "1.0.107"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8fd00f0bb2e90d81d1044c2b32617f68fcb9fa3bb7640c23e9c748e53fb30934"
+checksum = "985e7ec9bb745e6ce6535b544d84d6cd6f7ad8bd711c398938ae983b91a766d9"
 dependencies = [
  "unicode-ident",
 ]
@@ -3381,9 +3897,18 @@ checksum = "3d595e54a326bc53c1c197b32d295e14b169e3cfeaa8dc82b529f947fba6bcf5"
 
 [[package]]
 name = "pxfm"
-version = "0.1.29"
+version = "0.1.30"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e0c5ccf5294c6ccd63a74f1565028353830a9c2f5eb0c682c355c471726a6e3f"
+checksum = "d55d956fa96f5ec02be2e13af0e20391a5aa83d6a074e3ad368959d0fab299ea"
+
+[[package]]
+name = "qoi"
+version = "0.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7f6d64c71eb498fe9eae14ce4ec935c555749aef511cca85b5568910d6e48001"
+dependencies = [
+ "bytemuck",
+]
 
 [[package]]
 name = "quick-error"
@@ -3393,19 +3918,18 @@ checksum = "a993555f31e5a609f617c12db6250dedcac1b0a85076912c436e6fc9b2c8e6a3"
 
 [[package]]
 name = "quick-xml"
-version = "0.39.4"
+version = "0.41.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cdcc8dd4e2f670d309a5f0e83fe36dfdc05af317008fea29144da1a2ac858e5e"
+checksum = "e660451e55124f798a69a5af3f49ccfbefbd41910eefd25caf2393e1f3473ec1"
 dependencies = [
  "memchr",
- "serde",
 ]
 
 [[package]]
 name = "quote"
-version = "1.0.45"
+version = "1.0.47"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "41f2619966050689382d2b44f664f4bc593e129785a36d6ee376ddf37259b924"
+checksum = "1fbf4db142a473a8d80c26bbf18454ed458bf8d26c8219c331daecfdbd079001"
 dependencies = [
  "proc-macro2",
 ]
@@ -3477,6 +4001,17 @@ dependencies = [
  "font-types 0.11.3",
 ]
 
+[[package]]
+name = "read-fonts"
+version = "0.41.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "046a7d674daf459825b32f5062056d6882db0d2f5a479fbd76ccfc870ac18709"
+dependencies = [
+ "bytemuck",
+ "font-types 0.12.2",
+ "once_cell",
+]
+
 [[package]]
 name = "redox_syscall"
 version = "0.4.1"
@@ -3492,16 +4027,16 @@ version = "0.5.18"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ed2bf2547551a7053d6fdfafda3f938979645c44812fbfcda098faae3f1a362d"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
 ]
 
 [[package]]
 name = "redox_syscall"
-version = "0.8.1"
+version = "0.9.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5b44b894f2a6e36457d665d1e08c3866add6ed5e70050c1b4ba8a8ddedb02ce7"
+checksum = "c5102a6aaa05aa011a238e178e6bca86d2cb56fc9f586d37cb80f5bca6e07759"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
 ]
 
 [[package]]
@@ -3517,9 +4052,9 @@ dependencies = [
 
 [[package]]
 name = "regex"
-version = "1.12.3"
+version = "1.13.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e10754a14b9137dd7b1e3e5b0493cc9171fdd105e0ab477f51b72e7f3ac0e276"
+checksum = "f020237b6c8eed93db2e2cb53c00c60a8e1bc73da7d073199a1180401450218d"
 dependencies = [
  "aho-corasick",
  "memchr",
@@ -3529,9 +4064,9 @@ dependencies = [
 
 [[package]]
 name = "regex-automata"
-version = "0.4.14"
+version = "0.4.16"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6e1dd4122fc1595e8162618945476892eefca7b88c52820e74af6262213cae8f"
+checksum = "8fcfdb36bda0c880c5931cdc7a2bcdc8ba4556847b9d912bca70bc94708711ad"
 dependencies = [
  "aho-corasick",
  "memchr",
@@ -3540,9 +4075,9 @@ dependencies = [
 
 [[package]]
 name = "regex-syntax"
-version = "0.8.10"
+version = "0.8.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "dc897dd8d9e8bd1ed8cdad82b5966c3e0ecae09fb1907d58efaa013543185d0a"
+checksum = "d6f6ff9a378485b298a5286656da665ba74413d36db0979633275d2e708145d4"
 
 [[package]]
 name = "renderdoc-sys"
@@ -3550,14 +4085,28 @@ version = "1.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "19b30a45b0cd0bcca8037f3d0dc3421eaf95327a17cad11964fb8179b4fc4832"
 
+[[package]]
+name = "ring"
+version = "0.17.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a4689e6c2294d81e88dc6261c768b63bc4fcdb852be6d1352498b114f61383b7"
+dependencies = [
+ "cc",
+ "cfg-if",
+ "getrandom 0.2.17",
+ "libc",
+ "untrusted",
+ "windows-sys 0.52.0",
+]
+
 [[package]]
 name = "ron"
 version = "0.8.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b91f7eff05f748767f183df4320a63d6936e9c6107d97c9e6bdd9784f4289c94"
 dependencies = [
- "base64",
- "bitflags 2.12.1",
+ "base64 0.21.7",
+ "bitflags 2.13.1",
  "serde",
  "serde_derive",
 ]
@@ -3578,6 +4127,15 @@ version = "0.20.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6c20b6793b5c2fa6553b250154b78d6d0db37e72700ae35fad9387a46f487c97"
 
+[[package]]
+name = "roxmltree"
+version = "0.21.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f1964b10c76125c36f8afe190065a4bf9a87bf324842c05701330bba9f1cacbb"
+dependencies = [
+ "memchr",
+]
+
 [[package]]
 name = "rustc-hash"
 version = "1.1.0"
@@ -3599,7 +4157,7 @@ version = "0.38.44"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "fdb5bc1ae2baa591800df16c9ca78619bf65c0488b41b96ccec5d11220d8c154"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "errno",
  "libc",
  "linux-raw-sys 0.4.15",
@@ -3612,7 +4170,7 @@ version = "1.1.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b6fe4565b9518b83ef4f91bb47ce29620ca828bd32cb7e408f0062e9930ba190"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "errno",
  "libc",
  "linux-raw-sys 0.12.1",
@@ -3620,10 +4178,63 @@ dependencies = [
 ]
 
 [[package]]
-name = "rustversion"
-version = "1.0.22"
+name = "rustls"
+version = "0.23.42"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b39cdef0fa800fc44525c84ccb54a029961a8215f9619753635a9c0d2538d46d"
+checksum = "3c54fcab019b409d04215d3a17cb438fd7fbf192ee61461f20f4fe18704bc138"
+dependencies = [
+ "log",
+ "once_cell",
+ "ring",
+ "rustls-pki-types",
+ "rustls-webpki",
+ "subtle",
+ "zeroize",
+]
+
+[[package]]
+name = "rustls-pki-types"
+version = "1.15.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2f4925028c7eb5d1fcdaf196971378ed9d2c1c4efc7dc5d011256f76c99c0a96"
+dependencies = [
+ "zeroize",
+]
+
+[[package]]
+name = "rustls-webpki"
+version = "0.103.13"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "61c429a8649f110dddef65e2a5ad240f747e85f7758a6bccc7e5777bd33f756e"
+dependencies = [
+ "ring",
+ "rustls-pki-types",
+ "untrusted",
+]
+
+[[package]]
+name = "rustversion"
+version = "1.0.23"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cf54715a573b99ac80df0bc206da022bcd442c974952c7b9720069370852e21f"
+
+[[package]]
+name = "rustybuzz"
+version = "0.20.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fd3c7c96f8a08ee34eff8857b11b49b07d71d1c3f4e88f8a88d4c9e9f90b1702"
+dependencies = [
+ "bitflags 2.13.1",
+ "bytemuck",
+ "core_maths",
+ "log",
+ "smallvec",
+ "ttf-parser 0.25.1",
+ "unicode-bidi-mirroring",
+ "unicode-ccc",
+ "unicode-properties",
+ "unicode-script",
+]
 
 [[package]]
 name = "same-file"
@@ -3654,7 +4265,7 @@ checksum = "b6277f0217056f77f1d8f49f2950ac6c278c0d607c45f5ee99328d792ede24ec"
 dependencies = [
  "ab_glyph",
  "log",
- "memmap2",
+ "memmap2 0.9.11",
  "smithay-client-toolkit",
  "tiny-skia",
 ]
@@ -3667,9 +4278,9 @@ checksum = "8a7852d02fc848982e0c167ef163aaff9cd91dc640ba85e263cb1ce46fae51cd"
 
 [[package]]
 name = "serde"
-version = "1.0.228"
+version = "1.0.229"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9a8e94ea7f378bd32cbbd37198a4a91436180c5bb472411e48b5ec2e2124ae9e"
+checksum = "4148590afebada386688f18773da617792bf2ef03ffc1e4cbd2b1d45b023e0ba"
 dependencies = [
  "serde_core",
  "serde_derive",
@@ -3677,29 +4288,29 @@ dependencies = [
 
 [[package]]
 name = "serde_core"
-version = "1.0.228"
+version = "1.0.229"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "41d385c7d4ca58e59fc732af25c3983b67ac852c1a25000afe1175de458b67ad"
+checksum = "67dca2c9c51e58a4791a4b1ed58308b39c64224d349a935ab5039aa360942a48"
 dependencies = [
  "serde_derive",
 ]
 
 [[package]]
 name = "serde_derive"
-version = "1.0.228"
+version = "1.0.229"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d540f220d3187173da220f885ab66608367b6574e925011a9353e4badda91d79"
+checksum = "e7a5d71263a5a7d47b41f6b3f06ba276f10cc18b0931f1799f710578e2309348"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 3.0.3",
 ]
 
 [[package]]
 name = "serde_json"
-version = "1.0.150"
+version = "1.0.151"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e8014e44b4736ed0538adeecded0fce2a272f22dc9578a7eb6b2d9993c74cfb9"
+checksum = "c841b55ecdae098c80dcae9cf767f6f8a0c2cdb3416bbef72181df4d0fe73f14"
 dependencies = [
  "itoa",
  "memchr",
@@ -3710,13 +4321,13 @@ dependencies = [
 
 [[package]]
 name = "serde_repr"
-version = "0.1.20"
+version = "0.1.21"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "175ee3e80ae9982737ca543e96133087cbd9a485eecc3bc4de9c1a37b47ea59c"
+checksum = "8d3b1629de253c70a0508c3899572da79ca359fdab27c7920ff00406df418906"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 3.0.3",
 ]
 
 [[package]]
@@ -3746,15 +4357,15 @@ dependencies = [
 
 [[package]]
 name = "simd-adler32"
-version = "0.3.9"
+version = "0.3.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "703d5c7ef118737c72f1af64ad2f6f8c5e1921f818cdcb97b8fe6fc69bf66214"
+checksum = "3a219298ac11a56ea9a6d2120044824d6f01aeb034955e7af7bc16858527deea"
 
 [[package]]
 name = "simd_cesu8"
-version = "1.1.1"
+version = "1.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "94f90157bb87cddf702797c5dadfa0be7d266cdf49e22da2fcaa32eff75b2c33"
+checksum = "11031e251abf8611c80f460e19dbdeb54a66db918e49c65a7065b46ac7aec520"
 dependencies = [
  "rustc_version",
  "simdutf8",
@@ -3772,6 +4383,15 @@ version = "2.7.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "bbbb5d9659141646ae647b42fe094daf6c6192d1620870b449d9557f748b2daa"
 
+[[package]]
+name = "simplecss"
+version = "0.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7a9c6883ca9c3c7c90e888de77b7a5c849c779d25d74a1269b0218b14e8b136c"
+dependencies = [
+ "log",
+]
+
 [[package]]
 name = "siphasher"
 version = "1.0.3"
@@ -3808,6 +4428,16 @@ dependencies = [
  "read-fonts 0.39.2",
 ]
 
+[[package]]
+name = "skrifa"
+version = "0.44.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "819ab7d62b1d3e72d9d9dea5650bac30424f9111364bb94928dbf5ecad1baa68"
+dependencies = [
+ "bytemuck",
+ "read-fonts 0.41.0",
+]
+
 [[package]]
 name = "slab"
 version = "0.4.12"
@@ -3825,9 +4455,9 @@ dependencies = [
 
 [[package]]
 name = "smallvec"
-version = "1.15.1"
+version = "1.15.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "67b1b7a3b5fe4f1376887184045fcf45c69e92af734b7aaddc05fb777b6fbd03"
+checksum = "8ed6a63f02c8539c91a8685a86f4099661ba3da017932f6ebbea6de3f0fa7c90"
 
 [[package]]
 name = "smithay-client-toolkit"
@@ -3835,13 +4465,15 @@ version = "0.19.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3457dea1f0eb631b4034d61d4d8c32074caa6cd1ab2d59f2327bd8461e2c0016"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
+ "bytemuck",
  "calloop",
  "calloop-wayland-source",
  "cursor-icon",
  "libc",
  "log",
- "memmap2",
+ "memmap2 0.9.11",
+ "pkg-config",
  "rustix 0.38.44",
  "thiserror 1.0.69",
  "wayland-backend",
@@ -3851,6 +4483,7 @@ dependencies = [
  "wayland-protocols",
  "wayland-protocols-wlr",
  "wayland-scanner",
+ "xkbcommon",
  "xkeysym",
 ]
 
@@ -3865,9 +4498,9 @@ dependencies = [
 
 [[package]]
 name = "socket2"
-version = "0.6.4"
+version = "0.6.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "52d1cfed4120b4d927bf7c0f86d2087a4a7d6027c906d9f9d525a80573b9be51"
+checksum = "c3d1e2c7f27f8d4cb10542a02c49005dbd6e93095799d6f3be745fae9f8fedd4"
 dependencies = [
  "libc",
  "windows-sys 0.61.2",
@@ -3875,9 +4508,9 @@ dependencies = [
 
 [[package]]
 name = "spin"
-version = "0.9.8"
+version = "0.9.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6980e8d7511241f8acf4aebddbb1ff938df5eebe98691418c4468d0b72a96a67"
+checksum = "3763264f6b73151db08c50ff20d7d8a0b8796e021cdea7ceedad07b80155fa0e"
 dependencies = [
  "lock_api",
 ]
@@ -3888,7 +4521,7 @@ version = "0.3.0+sdk-1.3.268.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "eda41003dc44290527a59b13432d4a0379379fa074b70174882adfbdfd917844"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
 ]
 
 [[package]]
@@ -3897,7 +4530,7 @@ version = "0.4.0+sdk-1.4.341.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d9571ea910ebd84c86af4b3ed27f9dbdc6ad06f17c5f96146b2b671e2976744f"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
 ]
 
 [[package]]
@@ -3929,6 +4562,25 @@ name = "strict-num"
 version = "0.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6637bab7722d379c8b41ba849228d680cc12d0a45ba1fa2b48f2a30577a06731"
+dependencies = [
+ "float-cmp",
+]
+
+[[package]]
+name = "string-interner"
+version = "0.19.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "23de088478b31c349c9ba67816fa55d9355232d63c3afea8bf513e31f0f1d2c0"
+dependencies = [
+ "hashbrown 0.15.5",
+ "serde",
+]
+
+[[package]]
+name = "subtle"
+version = "2.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "13c2bddecc57b384dee18652358fb23172facb8a2c51ccc10d74c157bdea3292"
 
 [[package]]
 name = "svg_fmt"
@@ -3937,27 +4589,59 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0193cc4331cfd2f3d2011ef287590868599a2f33c3e69bc22c1a3d3acf9e02fb"
 
 [[package]]
-name = "swash"
-version = "0.2.7"
+name = "svgtypes"
+version = "0.16.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "842f3cd369c2ba38966204f983eaa5e54a8e84a7d7159ed36ade2b6c335aae64"
+checksum = "695b5790b3131dafa99b3bbfd25a216edb3d216dad9ca208d4657bfb8f2abc3d"
 dependencies = [
- "skrifa 0.40.0",
+ "kurbo",
+ "siphasher",
+]
+
+[[package]]
+name = "swash"
+version = "0.2.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6c2499c2d826531388872b2268718aed907a39bd785ab0dcfe57fab26283f92e"
+dependencies = [
+ "skrifa 0.44.0",
  "yazi",
  "zeno",
 ]
 
 [[package]]
 name = "syn"
-version = "2.0.117"
+version = "2.0.119"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e665b8803e7b1d2a727f4023456bbbbe74da67099c585258af0ad9c5013b9b99"
+checksum = "872831b642d1a07999a962a351ed35b955ea2cfc8f3862091e2a240a84f17297"
 dependencies = [
  "proc-macro2",
  "quote",
  "unicode-ident",
 ]
 
+[[package]]
+name = "syn"
+version = "3.0.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "53e9bae58849f64dfa4f5d5ae372c8341f7305f82a3868709269343628b659a3"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "unicode-ident",
+]
+
+[[package]]
+name = "synstructure"
+version = "0.13.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "728a70f3dbaf5bab7f0c4b1ac8d7ae5ea60a4b5549c8a5914361c99147a709d2"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.119",
+]
+
 [[package]]
 name = "taffy"
 version = "0.9.2"
@@ -3977,7 +4661,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "32497e9a4c7b38532efcdebeef879707aa9f794296a4f0244f6f69e9bc8574bd"
 dependencies = [
  "fastrand",
- "getrandom 0.3.4",
+ "getrandom 0.4.3",
  "once_cell",
  "rustix 1.1.4",
  "windows-sys 0.61.2",
@@ -4003,11 +4687,11 @@ dependencies = [
 
 [[package]]
 name = "thiserror"
-version = "2.0.18"
+version = "2.0.19"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4288b5bcbc7920c07a1149a35cf9590a2aa808e0bc1eafaade0b80947865fbc4"
+checksum = "09a43598840e33d5b0331f38c5e30d13bb11c11210a4b58f0d9b18a5a5eefcd9"
 dependencies = [
- "thiserror-impl 2.0.18",
+ "thiserror-impl 2.0.19",
 ]
 
 [[package]]
@@ -4018,18 +4702,18 @@ checksum = "4fee6c4efc90059e10f81e6d42c60a18f76588c3d74cb83a0b242a2b6c7504c1"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.119",
 ]
 
 [[package]]
 name = "thiserror-impl"
-version = "2.0.18"
+version = "2.0.19"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ebc4ee7f67670e9b64d05fa4253e753e016c6c95ff35b89b7941d6b856dec1d5"
+checksum = "43cbfe0cf76104d42a574802844187e84a305e531ed54455f11fbde0f10541cd"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 3.0.3",
 ]
 
 [[package]]
@@ -4083,10 +4767,25 @@ dependencies = [
 ]
 
 [[package]]
-name = "tokio"
-version = "1.52.3"
+name = "tinyvec"
+version = "1.12.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8fc7f01b389ac15039e4dc9531aa973a135d7a4135281b12d7c1bc79fd57fffe"
+checksum = "bb4ebadaa0af04fab11ae01eb5f9fdb5f9c5b875506e210e71c07873528baa7f"
+dependencies = [
+ "tinyvec_macros",
+]
+
+[[package]]
+name = "tinyvec_macros"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1f3ccbac311fea05f86f61904b462b55fb3df8837a366dfc601a0161d0532f20"
+
+[[package]]
+name = "tokio"
+version = "1.53.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "202caea871b69668250d242070849eb495be178ed697a3e98aebce5bc81a0bed"
 dependencies = [
  "bytes",
  "libc",
@@ -4101,13 +4800,13 @@ dependencies = [
 
 [[package]]
 name = "tokio-macros"
-version = "2.7.0"
+version = "2.7.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "385a6cb71ab9ab790c5fe8d67f1645e6c450a7ce006a33de03daa956cf70a496"
+checksum = "6328af13490e73a9b4694030fafd93f8c8c6a9dede33e821c3fc63eddf8042ba"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.119",
 ]
 
 [[package]]
@@ -4156,14 +4855,14 @@ dependencies = [
 
 [[package]]
 name = "toml_edit"
-version = "0.25.12+spec-1.1.0"
+version = "0.25.13+spec-1.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d2153edc6955a6c354fad8f5efd38b6a8769bdccf9fe50f8e1329f81b0baa5d7"
+checksum = "6975367e4d2ef766d86af01ffad14b622fecc8d4357a998fbc4deb6e9bacaf9b"
 dependencies = [
  "indexmap",
  "toml_datetime 1.1.1+spec-1.1.0",
  "toml_parser",
- "winnow 1.0.3",
+ "winnow 1.0.4",
 ]
 
 [[package]]
@@ -4172,7 +4871,7 @@ version = "1.1.2+spec-1.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a2abe9b86193656635d2411dc43050282ca48aa31c2451210f4202550afb7526"
 dependencies = [
- "winnow 1.0.3",
+ "winnow 1.0.4",
 ]
 
 [[package]]
@@ -4200,7 +4899,7 @@ checksum = "7490cfa5ec963746568740651ac6781f701c9c5ea257c58e057f3ba8cf69e8da"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.119",
 ]
 
 [[package]]
@@ -4251,6 +4950,17 @@ dependencies = [
  "tree-sitter-language",
 ]
 
+[[package]]
+name = "tree_magic_mini"
+version = "3.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b8765b90061cba6c22b5831f675da109ae5561588290f9fa2317adab2714d5a6"
+dependencies = [
+ "memchr",
+ "nom",
+ "petgraph",
+]
+
 [[package]]
 name = "ttf-parser"
 version = "0.21.1"
@@ -4262,6 +4972,9 @@ name = "ttf-parser"
 version = "0.25.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d2df906b07856748fa3f6e0ad0cbaa047052d4a7dd609e231c4f72cee8c36f31"
+dependencies = [
+ "core_maths",
+]
 
 [[package]]
 name = "uds_windows"
@@ -4274,12 +4987,42 @@ dependencies = [
  "windows-sys 0.61.2",
 ]
 
+[[package]]
+name = "unicode-bidi"
+version = "0.3.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5c1cb5db39152898a79168971543b1cb5020dff7fe43c8dc468b0885f5e29df5"
+
+[[package]]
+name = "unicode-bidi-mirroring"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5dfa6e8c60bb66d49db113e0125ee8711b7647b5579dc7f5f19c42357ed039fe"
+
+[[package]]
+name = "unicode-ccc"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ce61d488bcdc9bc8b5d1772c404828b17fc481c0a582b5581e95fb233aef503e"
+
 [[package]]
 name = "unicode-ident"
 version = "1.0.24"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e6e4313cd5fcd3dad5cafa179702e2b244f760991f45397d14d4ebf38247da75"
 
+[[package]]
+name = "unicode-properties"
+version = "0.1.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7df058c713841ad818f1dc5d3fd88063241cc61f49f5fbea4b951e8cf5a8d71d"
+
+[[package]]
+name = "unicode-script"
+version = "0.5.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "383ad40bb927465ec0ce7720e033cb4ca06912855fc35db31b5755d0de75b1ee"
+
 [[package]]
 name = "unicode-segmentation"
 version = "1.13.3"
@@ -4287,16 +5030,88 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c6f5d3c3b1bf09027a88a6bc961fc00497d651009560b5463668dc81b0fa87a8"
 
 [[package]]
-name = "unicode-width"
-version = "0.1.14"
+name = "unicode-vo"
+version = "0.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7dd6e30e90baa6f72411720665d41d89b9a3d039dc45b8faea1ddd07f617f6af"
+checksum = "b1d386ff53b415b7fe27b50bb44679e2cc4660272694b7b6f3326d8480823a94"
+
+[[package]]
+name = "unicode-width"
+version = "0.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b4ac048d71ede7ee76d585517add45da530660ef4390e49b098733c6e897f254"
+
+[[package]]
+name = "untrusted"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8ecb6da28b8a351d773b68d5825ac39017e680750f980f3a1a85cd8dd28a47c1"
+
+[[package]]
+name = "ureq"
+version = "2.12.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "02d1a66277ed75f640d608235660df48c8e3c19f3b4edb6a263315626cc3c01d"
+dependencies = [
+ "base64 0.22.1",
+ "log",
+ "once_cell",
+ "rustls",
+ "rustls-pki-types",
+ "url",
+ "webpki-roots 0.26.11",
+]
+
+[[package]]
+name = "url"
+version = "2.5.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ff67a8a4397373c3ef660812acab3268222035010ab8680ec4215f38ba3d0eed"
+dependencies = [
+ "form_urlencoded",
+ "idna",
+ "percent-encoding",
+ "serde",
+]
+
+[[package]]
+name = "usvg"
+version = "0.46.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e419dff010bb12512b0ae9e3d2f318dfbdf0167fde7eb05465134d4e8756076f"
+dependencies = [
+ "base64 0.22.1",
+ "data-url",
+ "flate2",
+ "fontdb",
+ "imagesize",
+ "kurbo",
+ "log",
+ "pico-args",
+ "roxmltree 0.21.1",
+ "rustybuzz",
+ "simplecss",
+ "siphasher",
+ "strict-num",
+ "svgtypes",
+ "tiny-skia-path",
+ "unicode-bidi",
+ "unicode-script",
+ "unicode-vo",
+ "xmlwriter",
+]
+
+[[package]]
+name = "utf8_iter"
+version = "1.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b6c140620e7ffbb22c2dee59cafe6084a59b5ffc27a8859a5f0d494b5d52b6be"
 
 [[package]]
 name = "uuid"
-version = "1.23.3"
+version = "1.24.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "144d6b123cef80b301b8f72a9e2ca4370ddec21950d0a103dd22c437006d2db7"
+checksum = "bf3923a6f5c4c6382e0b653c4117f48d631ea17f38ed86e2a828e6f7412f5239"
 dependencies = [
  "getrandom 0.4.3",
  "js-sys",
@@ -4317,7 +5132,7 @@ dependencies = [
  "png 0.17.16",
  "skrifa 0.40.0",
  "static_assertions",
- "thiserror 2.0.18",
+ "thiserror 2.0.19",
  "vello_encoding",
  "vello_shaders",
  "wgpu 27.0.1",
@@ -4336,7 +5151,7 @@ dependencies = [
  "log",
  "peniko",
  "smallvec",
- "thiserror 2.0.18",
+ "thiserror 2.0.19",
 ]
 
 [[package]]
@@ -4362,10 +5177,10 @@ dependencies = [
  "glifo",
  "hashbrown 0.17.1",
  "log",
- "thiserror 2.0.18",
+ "thiserror 2.0.19",
  "vello_common",
  "vello_sparse_shaders",
- "wgpu 29.0.3",
+ "wgpu 29.0.4",
 ]
 
 [[package]]
@@ -4377,7 +5192,7 @@ dependencies = [
  "bytemuck",
  "log",
  "naga 27.0.3",
- "thiserror 2.0.18",
+ "thiserror 2.0.19",
  "vello_encoding",
 ]
 
@@ -4387,6 +5202,17 @@ version = "0.0.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e004cfe28eb71738643f60460b9cae2236eba57b351afebf244148256ff25d8b"
 
+[[package]]
+name = "vello_svg"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "79dfa03829a8fb45ad458a05bd533d399d2259d042cdd78f391b290dbbdf1bd3"
+dependencies = [
+ "thiserror 2.0.19",
+ "usvg",
+ "vello",
+]
+
 [[package]]
 name = "version_check"
 version = "0.9.5"
@@ -4411,18 +5237,18 @@ checksum = "ccf3ec651a847eb01de73ccad15eb7d99f80485de043efb2f370cd654f4ea44b"
 
 [[package]]
 name = "wasip2"
-version = "1.0.3+wasi-0.2.9"
+version = "1.0.4+wasi-0.2.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "20064672db26d7cdc89c7798c48a0fdfac8213434a1186e5ef29fd560ae223d6"
+checksum = "b67efb37e106e55ce722a510d6b5f9c17f083e5fc79afc2badeb12cc313d9487"
 dependencies = [
  "wit-bindgen",
 ]
 
 [[package]]
 name = "wasm-bindgen"
-version = "0.2.122"
+version = "0.2.126"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3ed04576f974d2b2fba0f38c51dbc5518011e38c36bf1143164be765528fd409"
+checksum = "4b067c0c11094aef6b7a801c1e34a26affafdf3d051dba08456b868789aaf9a4"
 dependencies = [
  "cfg-if",
  "once_cell",
@@ -4433,9 +5259,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-futures"
-version = "0.4.72"
+version = "0.4.76"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9473dbd2991ae90b6291c3c32c30c6187ac49aa32f9905d1cce280ec1e110b0f"
+checksum = "c62df1340f32221cb9c54d6a27b030e3dba64361d4a95bed55f9aacb44da291d"
 dependencies = [
  "js-sys",
  "wasm-bindgen",
@@ -4443,9 +5269,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-macro"
-version = "0.2.122"
+version = "0.2.126"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "916151b09da36bd82f6615cbf3a419e2f0ba23a03c6160e8e92eb6bd4aa1dec6"
+checksum = "167ce5e579f6bcf889c4f7175a8a5a585de84e8ff93976ce393efa5f2837aab1"
 dependencies = [
  "quote",
  "wasm-bindgen-macro-support",
@@ -4453,31 +5279,125 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-macro-support"
-version = "0.2.122"
+version = "0.2.126"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "299047362ccbfce148b67ab7e73349f77748e00c8296f9542adfad2ad82c5c5e"
+checksum = "f3997c7839262f4ef12cf90b818d6340c18e80f263f1a94bf157d0ec4420380e"
 dependencies = [
  "bumpalo",
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.119",
  "wasm-bindgen-shared",
 ]
 
 [[package]]
 name = "wasm-bindgen-shared"
-version = "0.2.122"
+version = "0.2.126"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9a929b2c61f11ba3e9bc35b50c1f25cb38e0e892c0c231ae2b8cf78d5dad4437"
+checksum = "dc1b4cb0cc549fcf58d7dfc081778139b3d283a081644e833e84682ad71cea24"
 dependencies = [
  "unicode-ident",
 ]
 
 [[package]]
-name = "wayland-backend"
-version = "0.3.15"
+name = "wasm-encoder"
+version = "0.254.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2857dd20b54e916ec7253b3d6b4d5c4d7d4ca2c33c2e11c6c76a99bd8744755d"
+checksum = "09480d646178e5fdd12bb06e812d0af9a3a191dbc9cd697fdc86687beade7393"
+dependencies = [
+ "leb128fmt",
+ "wasmparser 0.254.0",
+]
+
+[[package]]
+name = "wasmi"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2300d0f78cba12f14e29e8dd157ea64050c0a688179aefdb2050105805594a0c"
+dependencies = [
+ "spin",
+ "wasmi_collections",
+ "wasmi_core",
+ "wasmi_ir",
+ "wasmparser 0.239.0",
+ "wat",
+]
+
+[[package]]
+name = "wasmi_collections"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f8a8c42a2a76148d43097b1d7cc2a5bf33d5c23bd4dd69015fc887e311767884"
+dependencies = [
+ "string-interner",
+]
+
+[[package]]
+name = "wasmi_core"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9013136083d988725953390bf668b64b7a218fabf26f8b913bbc59546b97ee27"
+dependencies = [
+ "libm",
+]
+
+[[package]]
+name = "wasmi_ir"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ba1fa003f79156f406d62ef0e1464dc03e11ace37170e9fa7524299a75ad8f68"
+dependencies = [
+ "wasmi_core",
+]
+
+[[package]]
+name = "wasmparser"
+version = "0.239.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8c9d90bb93e764f6beabf1d02028c70a2156a6583e63ac4218dd07ef733368b0"
+dependencies = [
+ "bitflags 2.13.1",
+ "indexmap",
+]
+
+[[package]]
+name = "wasmparser"
+version = "0.254.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d5769a29f799fbab136aaf65b4fe5384cd7d93fe6fc9ba0dcb6c8382a1f16e27"
+dependencies = [
+ "bitflags 2.13.1",
+ "indexmap",
+ "semver",
+]
+
+[[package]]
+name = "wast"
+version = "254.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e7ed4dfc8f6b9fc38b231065e2cdfbf7359af5ab945990abf09658dcc63c3e32"
+dependencies = [
+ "bumpalo",
+ "leb128fmt",
+ "memchr",
+ "unicode-width",
+ "wasm-encoder",
+]
+
+[[package]]
+name = "wat"
+version = "1.254.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7127f7f9b8f127c879991cecd35f494e4628bae1b0874c681414d8d8831e952c"
+dependencies = [
+ "wast",
+]
+
+[[package]]
+name = "wayland-backend"
+version = "0.3.16"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "016ccf01d1c58b6f8999612813e17c9b2390f7d70671428869913310f83f54b8"
 dependencies = [
  "cc",
  "downcast-rs",
@@ -4489,11 +5409,11 @@ dependencies = [
 
 [[package]]
 name = "wayland-client"
-version = "0.31.14"
+version = "0.31.15"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "645c7c96bb74690c3189b5c9cb4ca1627062bb23693a4fad9d8c3de958260144"
+checksum = "e3c36a0f861ad76d0901f2800b46321410d9f73f2ea88aac0650d86c32688073"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "rustix 1.1.4",
  "wayland-backend",
  "wayland-scanner",
@@ -4505,7 +5425,7 @@ version = "0.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "625c5029dbd43d25e6aa9615e88b829a5cad13b2819c4ae129fdbb7c31ab4c7e"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "cursor-icon",
  "wayland-backend",
 ]
@@ -4523,11 +5443,11 @@ dependencies = [
 
 [[package]]
 name = "wayland-protocols"
-version = "0.32.12"
+version = "0.32.13"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "563a85523cade2429938e790815fd7319062103b9f4a2dc806e9b53b95982d8f"
+checksum = "23d0c813de3daa2ed6520af85a3bd49b0e722a3078506899aa9686fea58dc4b6"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "wayland-backend",
  "wayland-client",
  "wayland-scanner",
@@ -4539,7 +5459,7 @@ version = "0.3.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2b6d8cf1eb2c1c31ed1f5643c88a6e53538129d4af80030c8cabd1f9fa884d91"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "wayland-backend",
  "wayland-client",
  "wayland-protocols",
@@ -4552,7 +5472,7 @@ version = "0.3.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "eb04e52f7836d7c7976c78ca0250d61e33873c34156a2a1fc9474828ec268234"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "wayland-backend",
  "wayland-client",
  "wayland-protocols",
@@ -4561,9 +5481,9 @@ dependencies = [
 
 [[package]]
 name = "wayland-scanner"
-version = "0.31.10"
+version = "0.31.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9c324a910fd86ebdc364a3e61ec1f11737d3b1d6c273c0239ee8ff4bc0d24b4a"
+checksum = "338e30461b3a2b67d70eb30a6d89f8e0c93a833e07d2ae89085cd070c4a00ac0"
 dependencies = [
  "proc-macro2",
  "quick-xml",
@@ -4584,9 +5504,9 @@ dependencies = [
 
 [[package]]
 name = "web-sys"
-version = "0.3.99"
+version = "0.3.103"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6d621441cfc37b84979402712047321980c178f299193a3589d05b99e8763436"
+checksum = "8622dcb61c0bcc9fffa6938bed81210af2da9a7e4a1a834b2e37a59b6dfb6141"
 dependencies = [
  "js-sys",
  "wasm-bindgen",
@@ -4602,6 +5522,24 @@ dependencies = [
  "wasm-bindgen",
 ]
 
+[[package]]
+name = "webpki-roots"
+version = "0.26.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "521bc38abb08001b01866da9f51eb7c5d647a19260e00054a8c7fd5f9e57f7a9"
+dependencies = [
+ "webpki-roots 1.0.9",
+]
+
+[[package]]
+name = "webpki-roots"
+version = "1.0.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7dcd9d09a39985f5344844e66b0c530a33843579125f23e21e9f0f220850f22a"
+dependencies = [
+ "rustls-pki-types",
+]
+
 [[package]]
 name = "weezl"
 version = "0.1.12"
@@ -4615,7 +5553,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "bfe68bac7cde125de7a731c3400723cadaaf1703795ad3f4805f187459cd7a77"
 dependencies = [
  "arrayvec",
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "cfg-if",
  "cfg_aliases",
  "document-features",
@@ -4639,12 +5577,12 @@ dependencies = [
 
 [[package]]
 name = "wgpu"
-version = "29.0.3"
+version = "29.0.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bb3feacc458f7bee8bc1737149b42b6c731aa461039a4264a67bb6681646b250"
+checksum = "76e8840e1ba2881d4cbb18d2147627a56af426ff064c0401eb0c8410c6325d07"
 dependencies = [
  "arrayvec",
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "bytemuck",
  "cfg-if",
  "cfg_aliases",
@@ -4652,7 +5590,7 @@ dependencies = [
  "hashbrown 0.16.1",
  "js-sys",
  "log",
- "naga 29.0.3",
+ "naga 29.0.4",
  "parking_lot",
  "portable-atomic",
  "profiling",
@@ -4662,9 +5600,9 @@ dependencies = [
  "wasm-bindgen",
  "wasm-bindgen-futures",
  "web-sys",
- "wgpu-core 29.0.3",
- "wgpu-hal 29.0.3",
- "wgpu-types 29.0.3",
+ "wgpu-core 29.0.4",
+ "wgpu-hal 29.0.4",
+ "wgpu-types 29.0.4",
 ]
 
 [[package]]
@@ -4676,7 +5614,7 @@ dependencies = [
  "arrayvec",
  "bit-set 0.8.0",
  "bit-vec 0.8.0",
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "bytemuck",
  "cfg_aliases",
  "document-features",
@@ -4691,7 +5629,7 @@ dependencies = [
  "raw-window-handle",
  "rustc-hash",
  "smallvec",
- "thiserror 2.0.18",
+ "thiserror 2.0.19",
  "wgpu-core-deps-apple 27.0.0",
  "wgpu-core-deps-emscripten 27.0.0",
  "wgpu-core-deps-windows-linux-android 27.0.0",
@@ -4701,21 +5639,21 @@ dependencies = [
 
 [[package]]
 name = "wgpu-core"
-version = "29.0.3"
+version = "29.0.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "02da3ad1b568337f25513b317870960ef87073ea0945502e44b864b67a8c77b7"
+checksum = "2f519832254e56965a9940c4af57dcb75f702b6f6fa4a0b172f685395843a4d7"
 dependencies = [
  "arrayvec",
  "bit-set 0.9.1",
  "bit-vec 0.9.1",
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "bytemuck",
  "cfg_aliases",
  "document-features",
  "hashbrown 0.16.1",
  "indexmap",
  "log",
- "naga 29.0.3",
+ "naga 29.0.4",
  "once_cell",
  "parking_lot",
  "portable-atomic",
@@ -4723,13 +5661,13 @@ dependencies = [
  "raw-window-handle",
  "rustc-hash",
  "smallvec",
- "thiserror 2.0.18",
- "wgpu-core-deps-apple 29.0.3",
- "wgpu-core-deps-emscripten 29.0.3",
- "wgpu-core-deps-windows-linux-android 29.0.3",
- "wgpu-hal 29.0.3",
+ "thiserror 2.0.19",
+ "wgpu-core-deps-apple 29.0.4",
+ "wgpu-core-deps-emscripten 29.0.4",
+ "wgpu-core-deps-windows-linux-android 29.0.4",
+ "wgpu-hal 29.0.4",
  "wgpu-naga-bridge",
- "wgpu-types 29.0.3",
+ "wgpu-types 29.0.4",
 ]
 
 [[package]]
@@ -4743,11 +5681,11 @@ dependencies = [
 
 [[package]]
 name = "wgpu-core-deps-apple"
-version = "29.0.3"
+version = "29.0.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "62e51b5447e144b3dbba4feb01f80f4fa21696fa0cd99afb2c3df1affd6fdb28"
+checksum = "f5e39e26c4c0e07589e67d18546cf79ff45383659fc72fca4dd293358a0347f3"
 dependencies = [
- "wgpu-hal 29.0.3",
+ "wgpu-hal 29.0.4",
 ]
 
 [[package]]
@@ -4761,11 +5699,11 @@ dependencies = [
 
 [[package]]
 name = "wgpu-core-deps-emscripten"
-version = "29.0.3"
+version = "29.0.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3487cd6293a963bc5c0c0396f6a2192043c50003c07f4efdccbad3d90ec9d819"
+checksum = "01e09be551dc939498bdd5f6b2c66e55ab275dad25825267a08605a80fc9f0af"
 dependencies = [
- "wgpu-hal 29.0.3",
+ "wgpu-hal 29.0.4",
 ]
 
 [[package]]
@@ -4779,11 +5717,11 @@ dependencies = [
 
 [[package]]
 name = "wgpu-core-deps-windows-linux-android"
-version = "29.0.3"
+version = "29.0.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1bfb01076d0aa08b0ba9bd741e178b5cc440f5abe99d9581323a4c8b5d1a1916"
+checksum = "4e592c1bbef6ad047647ae6e666ebd8cee7a32bb4544d9700ec96cbf73230257"
 dependencies = [
- "wgpu-hal 29.0.3",
+ "wgpu-hal 29.0.4",
 ]
 
 [[package]]
@@ -4796,7 +5734,7 @@ dependencies = [
  "arrayvec",
  "ash",
  "bit-set 0.8.0",
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "block",
  "bytemuck",
  "cfg-if",
@@ -4827,7 +5765,7 @@ dependencies = [
  "raw-window-handle",
  "renderdoc-sys",
  "smallvec",
- "thiserror 2.0.18",
+ "thiserror 2.0.19",
  "wasm-bindgen",
  "web-sys",
  "wgpu-types 27.0.1",
@@ -4837,15 +5775,15 @@ dependencies = [
 
 [[package]]
 name = "wgpu-hal"
-version = "29.0.3"
+version = "29.0.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "31f8e1a9e7a8512f276f7c62e018c7fa8d60954303fed2e5750114332049193f"
+checksum = "97ace1c17727311c22a46e4e3faf56ea6de81af99dcc839bdfb54857b94d448d"
 dependencies = [
  "android_system_properties",
  "arrayvec",
  "ash",
  "bit-set 0.9.1",
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "block2 0.6.2",
  "bytemuck",
  "cfg-if",
@@ -4860,7 +5798,7 @@ dependencies = [
  "libc",
  "libloading",
  "log",
- "naga 29.0.3",
+ "naga 29.0.4",
  "ndk-sys",
  "objc2 0.6.4",
  "objc2-core-foundation",
@@ -4878,12 +5816,12 @@ dependencies = [
  "raw-window-metal",
  "renderdoc-sys",
  "smallvec",
- "thiserror 2.0.18",
+ "thiserror 2.0.19",
  "wasm-bindgen",
  "wayland-sys",
  "web-sys",
  "wgpu-naga-bridge",
- "wgpu-types 29.0.3",
+ "wgpu-types 29.0.4",
  "windows 0.62.2",
  "windows-core 0.62.2",
  "windows-result 0.4.1",
@@ -4891,12 +5829,12 @@ dependencies = [
 
 [[package]]
 name = "wgpu-naga-bridge"
-version = "29.0.3"
+version = "29.0.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "59c654c483f058800972c3645e95388a7eca31bf9fe1933bc20e036588a0be02"
+checksum = "95226013f547544b223281cd16a4fb549aa9dcb562adbda0faae4c73ffbbc161"
 dependencies = [
- "naga 29.0.3",
- "wgpu-types 29.0.3",
+ "naga 29.0.4",
+ "wgpu-types 29.0.4",
 ]
 
 [[package]]
@@ -4905,21 +5843,21 @@ version = "27.0.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "afdcf84c395990db737f2dd91628706cb31e86d72e53482320d368e52b5da5eb"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "bytemuck",
  "js-sys",
  "log",
- "thiserror 2.0.18",
+ "thiserror 2.0.19",
  "web-sys",
 ]
 
 [[package]]
 name = "wgpu-types"
-version = "29.0.3"
+version = "29.0.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a9bcc31518a0e9735aefebedb5f7a9ef3ed1c42549c9f4c882fa9060ceaac639"
+checksum = "84bf84cd9ca8ca45e2b223a3868f1adf9bfc0c66aeac212e76ee7e40fdadf8f5"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "bytemuck",
  "js-sys",
  "log",
@@ -5012,7 +5950,7 @@ checksum = "2bbd5b46c938e506ecbce286b6628a02171d56153ba733b6c741fc627ec9579b"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.119",
 ]
 
 [[package]]
@@ -5023,7 +5961,7 @@ checksum = "053e2e040ab57b9dc951b72c264860db7eb3b0200ba345b4e4c3b14f67855ddf"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.119",
 ]
 
 [[package]]
@@ -5034,7 +5972,7 @@ checksum = "053c4c462dc91d3b1504c6fe5a726dd15e216ba718e84a0e46a88fbe5ded3515"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.119",
 ]
 
 [[package]]
@@ -5045,7 +5983,7 @@ checksum = "3f316c4a2570ba26bbec722032c4099d8c8bc095efccdc15688708623367e358"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.119",
 ]
 
 [[package]]
@@ -5350,7 +6288,7 @@ dependencies = [
  "ahash",
  "android-activity",
  "atomic-waker",
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "block2 0.5.1",
  "bytemuck",
  "calloop",
@@ -5362,7 +6300,7 @@ dependencies = [
  "dpi",
  "js-sys",
  "libc",
- "memmap2",
+ "memmap2 0.9.11",
  "ndk",
  "objc2 0.5.2",
  "objc2-app-kit 0.2.2",
@@ -5404,9 +6342,9 @@ dependencies = [
 
 [[package]]
 name = "winnow"
-version = "1.0.3"
+version = "1.0.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0592e1c9d151f854e6fd382574c3a0855250e1d9b2f99d9281c6e6391af352f1"
+checksum = "23b97319f7b8343df12cc98938e5c3eb436064524c8d2b4e30a1d3a36eecdf81"
 dependencies = [
  "memchr",
 ]
@@ -5417,6 +6355,24 @@ version = "0.57.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1ebf944e87a7c253233ad6766e082e3cd714b5d03812acc24c318f549614536e"
 
+[[package]]
+name = "wl-clipboard-rs"
+version = "0.9.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e9651471a32e87d96ef3a127715382b2d11cc7c8bb9822ded8a7cc94072eb0a3"
+dependencies = [
+ "libc",
+ "log",
+ "os_pipe",
+ "rustix 1.1.4",
+ "thiserror 2.0.19",
+ "tree_magic_mini",
+ "wayland-backend",
+ "wayland-client",
+ "wayland-protocols",
+ "wayland-protocols-wlr",
+]
+
 [[package]]
 name = "writeable"
 version = "0.6.3"
@@ -5461,13 +6417,24 @@ version = "0.3.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "bec9e4a500ca8864c5b47b8b482a73d62e4237670e5b5f1d6b9e3cae50f28f2b"
 
+[[package]]
+name = "xkbcommon"
+version = "0.7.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "13867d259930edc7091a6c41b4ce6eee464328c6ff9659b7e4c668ca20d4c91e"
+dependencies = [
+ "libc",
+ "memmap2 0.8.0",
+ "xkeysym",
+]
+
 [[package]]
 name = "xkbcommon-dl"
 version = "0.4.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d039de8032a9a8856a6be89cea3e5d12fdd82306ab7c94d74e6deab2460651c5"
 dependencies = [
- "bitflags 2.12.1",
+ "bitflags 2.13.1",
  "dlib",
  "log",
  "once_cell",
@@ -5479,6 +6446,9 @@ name = "xkeysym"
 version = "0.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b9cc00251562a284751c9973bace760d86c0276c471b4be569fe6b068ee97a56"
+dependencies = [
+ "bytemuck",
+]
 
 [[package]]
 name = "xml-rs"
@@ -5486,6 +6456,12 @@ version = "0.8.28"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3ae8337f8a065cfc972643663ea4279e04e7256de865aa66fe25cec5fb912d3f"
 
+[[package]]
+name = "xmlwriter"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ec7a2a501ed189703dba8b08142f057e887dfc4b2cc4db2d343ac6376ba3e0b9"
+
 [[package]]
 name = "yazi"
 version = "0.2.1"
@@ -5504,10 +6480,33 @@ dependencies = [
 ]
 
 [[package]]
-name = "zbus"
-version = "5.16.0"
+name = "yoke"
+version = "0.8.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "eee682d202a77e4a9f3b2c2bdf48a7b28af5c08c34ddf66f98c93e5e39464285"
+checksum = "709fe23a0424b6a435d82152b1bd3fdfb0833487d5fa90d05d42762a9891fef5"
+dependencies = [
+ "stable_deref_trait",
+ "yoke-derive",
+ "zerofrom",
+]
+
+[[package]]
+name = "yoke-derive"
+version = "0.8.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "de844c262c8848816172cef550288e7dc6c7b7814b4ee56b3e1553f275f1858e"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.119",
+ "synstructure",
+]
+
+[[package]]
+name = "zbus"
+version = "5.18.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fe18fb60dc696039e738717b76eaea21e7a4489bbb1885020b43c94236d7e98a"
 dependencies = [
  "async-broadcast",
  "async-executor",
@@ -5532,7 +6531,7 @@ dependencies = [
  "uds_windows",
  "uuid",
  "windows-sys 0.61.2",
- "winnow 1.0.3",
+ "winnow 1.0.4",
  "zbus_macros",
  "zbus_names",
  "zvariant",
@@ -5556,7 +6555,7 @@ checksum = "10da05367f3a7b7553c8cdf8fa91aee6b64afebe32b51c95177957efc47ca3a0"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.119",
  "zbus-lockstep",
  "zbus_xml",
  "zvariant",
@@ -5564,14 +6563,14 @@ dependencies = [
 
 [[package]]
 name = "zbus_macros"
-version = "5.16.0"
+version = "5.18.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "adf1bd45a81a103745b1757754762a26e8cd01e4532e4d6c8ec431624b80d1d6"
+checksum = "fe96480bed92df2b442a1a30df364e12d08eed03aeb061f2b8dc6afb2be91119"
 dependencies = [
  "proc-macro-crate",
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.119",
  "zbus_names",
  "zvariant",
  "zvariant_utils",
@@ -5579,23 +6578,23 @@ dependencies = [
 
 [[package]]
 name = "zbus_names"
-version = "4.3.2"
+version = "4.3.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7074f3e50b894eac91750142016d30d0a89be8e67dbfd9704fb875825760e52d"
+checksum = "d8bf88b4a3ff53e883001e0e0115b297a9d53c31b9c1edd2bfdd853e3428624e"
 dependencies = [
  "serde",
- "winnow 1.0.3",
+ "winnow 1.0.4",
  "zvariant",
 ]
 
 [[package]]
 name = "zbus_xml"
-version = "5.1.1"
+version = "5.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a8067892e940ed1727dea64690378601603b31d62dfde019a5335fbb7c0e0ed9"
+checksum = "d1586c021a01ca0a9216dcd874e546382e156a5cbab5fab6cb5f10087e22682a"
 dependencies = [
- "quick-xml",
  "serde",
+ "winnow 1.0.4",
  "zbus_names",
  "zvariant",
 ]
@@ -5608,22 +6607,22 @@ checksum = "6df3dc4292935e51816d896edcd52aa30bc297907c26167fec31e2b0c6a32524"
 
 [[package]]
 name = "zerocopy"
-version = "0.8.50"
+version = "0.8.55"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3b065d4f0e55f82fae73202e189638116a87c55ab6b8e6c2721e13dd9d854ad1"
+checksum = "b5a105cd7b140f6eeec8acff2ea38135d3cab283ada58540f629fe51e46696eb"
 dependencies = [
  "zerocopy-derive",
 ]
 
 [[package]]
 name = "zerocopy-derive"
-version = "0.8.50"
+version = "0.8.55"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0b631b19d36a892ab55420c92dbc83ccd79274f25be714855d3074aa71cab639"
+checksum = "0fe976fb70c78cd64cccfe3a6fc142244e8a77b70959b30faf9d0ac37ee228eb"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.119",
 ]
 
 [[package]]
@@ -5631,6 +6630,38 @@ name = "zerofrom"
 version = "0.1.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0ec05a11813ea801ff6d75110ad09cd0824ddba17dfe17128ea0d5f68e6c5272"
+dependencies = [
+ "zerofrom-derive",
+]
+
+[[package]]
+name = "zerofrom-derive"
+version = "0.1.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "11532158c46691caf0f2593ea8358fed6bbf68a0315e80aae9bd41fbade684a1"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.119",
+ "synstructure",
+]
+
+[[package]]
+name = "zeroize"
+version = "1.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e13c156562582aa81c60cb29407084cdb54c4164760106ab78e6c5b0858cf64e"
+
+[[package]]
+name = "zerotrie"
+version = "0.2.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0f9152d31db0792fa83f70fb2f83148effb5c1f5b8c7686c3459e361d9bc20bf"
+dependencies = [
+ "displaydoc",
+ "yoke",
+ "zerofrom",
+]
 
 [[package]]
 name = "zerovec"
@@ -5639,14 +6670,27 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "90f911cbc359ab6af17377d242225f4d75119aec87ea711a880987b18cd7b239"
 dependencies = [
  "serde",
+ "yoke",
  "zerofrom",
+ "zerovec-derive",
+]
+
+[[package]]
+name = "zerovec-derive"
+version = "0.11.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "625dc425cab0dca6dc3c3319506e6593dcb08a9f387ea3b284dbd52a92c40555"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.119",
 ]
 
 [[package]]
 name = "zmij"
-version = "1.0.21"
+version = "1.0.23"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b8848ee67ecc8aedbaf3e4122217aff892639231befc6a1b58d29fff4c2cabaa"
+checksum = "29666d0abbfad1e3dc4dcf6144730dd3a3ab225bbbdac83319345b1b44ccfc1b"
 
 [[package]]
 name = "zune-core"
@@ -5665,40 +6709,40 @@ dependencies = [
 
 [[package]]
 name = "zvariant"
-version = "5.12.0"
+version = "5.13.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a192a0bde63360d77a7523c833d4b4ce6070a927e2c53246e4c540b1a3e27be0"
+checksum = "bee2a0bcd2a907786a456fff45aaaaf54c9ba5f50b71ae9ec1a4edd200c94911"
 dependencies = [
  "endi",
  "enumflags2",
  "serde",
- "winnow 1.0.3",
+ "winnow 1.0.4",
  "zvariant_derive",
  "zvariant_utils",
 ]
 
 [[package]]
 name = "zvariant_derive"
-version = "5.12.0"
+version = "5.13.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "90bc6cde9c01c511074be97f7ccb6c19d0da89e3f8662e812e999dcfd4638737"
+checksum = "38a708216a18780796770bfe3f4739c7c83a3e8f789b755534bbbc06e4e23e12"
 dependencies = [
  "proc-macro-crate",
  "proc-macro2",
  "quote",
- "syn",
+ "syn 2.0.119",
  "zvariant_utils",
 ]
 
 [[package]]
 name = "zvariant_utils"
-version = "3.4.0"
+version = "3.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1e8535915cfa75547e559d8c68e8139909a4aeee076831e4ef7fc59d8172c4d6"
+checksum = "90cb9383f9b45290407a1258b202d3f8f01db719eb60b4e4055c6375af4fc7c7"
 dependencies = [
  "proc-macro2",
  "quote",
  "serde",
- "syn",
- "winnow 1.0.3",
+ "syn 2.0.119",
+ "winnow 1.0.4",
 ]
diff --git a/Cargo.toml b/Cargo.toml
index a57a9ab..992dacc 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,22 +1,147 @@
-# Cargo.toml raíz STANDALONE de Llimphi — dry-run de extracción.
-# Generado desde la raíz de gioser quitando el prefijo 02_ruway/llimphi/ a los
-# path-deps internos. Excluye los 3 crates acoplados al resto del workspace
-# (menubar→app-bus, shuma-term→shuma-exec, plugin-host→card-core) y los demos
-# gallery que los agregan, más android (target propio).
+# Cargo.toml raíz STANDALONE de Llimphi — repo público (GitHub + Gitea).
+# GENERADO por scripts/actualizar-standalone.py --llimphi desde el monorepo:
+# el árbol 02_ruway/llimphi/* se aplana y `shared/{app-bus,foreign-vox}` se
+# vendoriza. `exclude` = crates acoplados al resto del workspace madre.
 [workspace]
 resolver = "2"
+
+# ============================================================
+# Cuadrantes — agregar a medida que se migran
+# ============================================================
 members = [
-    "llimphi", "llimphi-hal", "llimphi-raster", "llimphi-layout", "llimphi-text",
-    "llimphi-ui", "llimphi-theme", "llimphi-surface", "llimphi-motion",
-    "llimphi-icons", "llimphi-compositor", "llimphi-workspace",
-    "widgets/*", "modules/*", "shared/app-bus",
-    "llimphi-3d", "llimphi-voxel", "shared/foreign-vox",
+    "llimphi",
+    "llimphi-3d",
+    "llimphi-anim",
+    "llimphi-anim-studio",
+    "llimphi-compositor",
+    "llimphi-gallery",
+    "llimphi-gpu-bench",
+    "llimphi-hal",
+    "llimphi-icons",
+    "llimphi-image",
+    "llimphi-layer",
+    "llimphi-layout",
+    "llimphi-lottie",
+    "llimphi-mesh",
+    "llimphi-motion",
+    "llimphi-raster",
+    "llimphi-surface",
+    "llimphi-svg",
+    "llimphi-term-graphics",
+    "llimphi-test",
+    "llimphi-text",
+    "llimphi-theme",
+    "llimphi-ui",
+    "llimphi-voxel",
+    "llimphi-wasm-app-sdk",
+    "llimphi-wasm-demo-counter",
+    "llimphi-wasm-demo-form",
+    "llimphi-wasm-wasi",
+    "llimphi-wire-view",
+    "llimphi-workspace",
+    "modules/bookmarks",
+    "modules/command-palette",
+    "modules/diff-viewer",
+    "modules/fif",
+    "modules/file-picker",
+    "modules/mini-map",
+    "modules/selector",
+    "modules/symbol-outline",
+    "shared/app-bus",
+    "shared/foreign-lottie",
+    "shared/foreign-vox",
+    "shared/grafo",
+    "widgets/app-header",
+    "widgets/avatar",
+    "widgets/badge",
+    "widgets/banner",
+    "widgets/breadcrumb",
+    "widgets/button",
+    "widgets/calendar",
+    "widgets/card",
+    "widgets/carousel",
+    "widgets/chip",
+    "widgets/clipboard",
+    "widgets/color-picker",
+    "widgets/context-menu",
+    "widgets/detail-table",
+    "widgets/dock-rail",
+    "widgets/edit-menu",
+    "widgets/empty",
+    "widgets/fab",
+    "widgets/field",
+    "widgets/fitted-box",
+    "widgets/gallery",
+    "widgets/gauge",
+    "widgets/grid",
+    "widgets/hero",
+    "widgets/lazy-list",
+    "widgets/list",
+    "widgets/menubar",
+    "widgets/modal",
+    "widgets/navigator",
+    "widgets/nodegraph",
+    "widgets/panel",
+    "widgets/panes",
+    "widgets/progress",
+    "widgets/rag-sidebar",
+    "widgets/range-slider",
+    "widgets/rating",
+    "widgets/rive-button",
+    "widgets/router",
+    "widgets/scaffold",
+    "widgets/scroll",
+    "widgets/segmented",
+    "widgets/select",
+    "widgets/shortcuts-help",
+    "widgets/skeleton",
+    "widgets/slider",
+    "widgets/spinner",
+    "widgets/splash",
+    "widgets/splitter",
+    "widgets/stat-card",
+    "widgets/status-bar",
+    "widgets/switch",
+    "widgets/table",
+    "widgets/tabs",
+    "widgets/terminal",
+    "widgets/text-area",
+    "widgets/text-editor",
+    "widgets/text-editor-core",
+    "widgets/text-editor-lsp",
+    "widgets/text-input",
+    "widgets/theme-switcher",
+    "widgets/tiled",
+    "widgets/timeline",
+    "widgets/toast",
+    "widgets/toolbar",
+    "widgets/tooltip",
+    "widgets/transport",
+    "widgets/tree",
+    "widgets/waveform",
+    "widgets/wawa-mark",
+    "widgets/wrap",
 ]
+
+# `wawa/` se excluye del workspace global porque corre en target
+# `x86_64-unknown-none` y `panic = "abort"`, incompatibles con los
+# perfiles globales. Los crates compartidos se referencian por `path`
+# cruzando la frontera.
 exclude = [
     "android",
-    "llimphi-gallery", "llimphi-gpu-bench",
-    "widgets/gallery",
-    "modules/shuma-term", "modules/plugin-host", "modules/allichay",
+    "demo",
+    "llimphi-video-plane",
+    "llimphi-voxel-app",
+    "llimphi-voxel-studio",
+    "llimphi-wasm-core",
+    "llimphi-wasm-dist",
+    "llimphi-wasm-net",
+    "llimphi-wasm-open",
+    "llimphi-wasm-registry",
+    "llimphi-wasm-runner",
+    "modules/allichay",
+    "modules/plugin-host",
+    "modules/shuma-term",
 ]
 
 [workspace.package]
@@ -29,9 +154,15 @@ publish = true
 repository = "https://git.tawasuyu.net/tawasuyu/llimphi"
 
 [workspace.dependencies]
+# === Configuración declarativa (vocabulario de esquemas) ===
+# Telemetría local de desarrollo (stderr+panics+tracing → $XDG_STATE_HOME/tawasuyu/<dominio>/<bin>.log)
+# default = [] (núcleo liviano sin vello); `bake` es opt-in. Declaramos
+# default-features = false aquí para que el `default-features = false` de los
+# consumidores (splash/greeter/compositor) se honre y no quede el warning.
 # === Registro de apps / menú global ===
 app-bus = { path = "shared/app-bus", version = "0.1.0" }
-foreign-vox = { path = "shared/foreign-vox", version = "0.1.0" }
+# === Centro de eventos (notificaciones + capturas + clipboard + …) ===
+# === Puente de drag-and-drop compositor → app (suple winit en Wayland) ===
 # === Serialización ===
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
@@ -58,8 +189,12 @@ tracing = "0.1"
 tracing-subscriber = { version = "0.3", features = ["env-filter", "fmt"] }
 
 # === Linux primitives (arje) ===
-nix = { version = "0.29", features = ["signal", "process", "sched", "mount", "fs", "socket", "net", "user"] }
+nix = { version = "0.29", features = ["signal", "process", "sched", "mount", "fs", "socket", "net", "user", "reboot"] }
 libc = "0.2"
+# DRM/KMS legacy (dumb buffer) para el splash nativo del arranque sin parpadeo.
+# Misma versión que reexporta smithay (mirada-compositor) — el lock ya la fija.
+drm = "0.14"
+font8x8 = { version = "0.3", default-features = false }
 
 # === IDs / Hash / Crypto ===
 ulid = { version = "1", features = ["serde"] }
@@ -73,10 +208,15 @@ argon2 = "0.5"
 rand = "0.8"
 
 # === WASM (arje) ===
-# wasmi 1.0: unifica la versión con renaser (su kernel ya corre 1.0), para
+# wasmi 1.0: unifica la versión con wawa (su kernel ya corre 1.0), para
 # que el ABI WASM del host sea idéntico en Linux y en bare-metal.
 wasmi = "1.0"
 wat = "1"
+# wasmtime 46 (Fase 1 del pipeline JS): tier 0 de puriy-js pasa de wasmi
+# (intérprete) a Wasmtime AOT (Cranelift → nativo) en Linux — quita la doble
+# interpretación de QuickJS.wasm. En wawa bare-metal el runtime es Pulley (spike
+# Q1 cerrado); mismo crate, distinto backend.
+wasmtime = "46"
 
 # === Storage / DB ===
 sled = "0.34"
@@ -91,6 +231,10 @@ bzip2 = "0.4"
 
 # === Compresión (minga multi-bundle) ===
 zstd = "0.13"
+xz2 = "0.1"
+# Contenedores adicionales del visor Archive de nahual (sólo listado).
+sevenz-rust = "0.6"
+unrar = "0.5"
 
 # === HTTP server (iniy-server) ===
 axum = "0.7"
@@ -100,7 +244,7 @@ tower = "0.5"
 instant-distance = "0.6"
 
 # === P2P (minga) ===
-libp2p = { version = "0.56", features = ["tokio", "tcp", "noise", "yamux", "macros", "kad", "identify", "relay", "dcutr", "autonat", "mdns"] }
+libp2p = { version = "0.56", features = ["tokio", "tcp", "dns", "noise", "yamux", "macros", "kad", "identify", "relay", "dcutr", "autonat", "mdns"] }
 libp2p-stream = "=0.4.0-alpha"
 libp2p-allow-block-list = "0.6"
 
@@ -115,7 +259,11 @@ libm = "0.2"
 midly = "0.5"
 
 # === Code parsing (minga) ===
-arboard = "3"
+# `wayland-data-control` trae el backend wl-clipboard-rs: bajo mirada (Wayland
+# propio, sin Xwayland para apps nativas) arboard-x11 fallaba a no-op silencioso
+# y el clipboard de los text-editor quedaba muerto. Con la feature habla
+# zwlr_data_control_manager_v1 (que mirada expone) y cae a X11 si no hay Wayland.
+arboard = { version = "3", features = ["wayland-data-control"] }
 ropey = "1.6"
 tree-sitter = "0.24"
 tree-sitter-rust = "0.23"
@@ -134,7 +282,19 @@ petgraph = "0.6"
 # default-features = false: nos quedamos con PNG + JPEG + WebP (lossless).
 # tullpu-render exporta a las tres; AVIF/TIFF/… los habilitamos si una app
 # los pide específicamente.
-image = { version = "0.25", default-features = false, features = ["png", "jpeg", "webp"] }
+# Decoders puro-Rust baratos; avif queda fuera (arrastra dav1d/rav1e).
+image = { version = "0.25", default-features = false, features = ["png", "jpeg", "webp", "gif", "bmp", "ico", "tiff", "tga", "qoi"] }
+# ONNX Runtime para los proveedores de píxel reales (pixel-verbo-onnx: segmentación
+# u2net/isnet, inpaint, restyle…). `download-binaries` (default) baja el runtime nativo
+# solo; ya lo arrastraba fastembed (rimay-verbo) transitivo — aquí lo declaramos directo.
+ort = "2.0.0-rc.9"
+
+# Rasterizador vectorial CPU (relleno/trazo anti-aliased) para capas vectoriales de tullpu.
+tiny-skia = "0.11"
+# Booleanos de polígonos robustos (union/intersection/difference/xor) para el
+# clipper vectorial de tullpu — restar/intersecar paths que se solapan
+# parcialmente, que la regla de relleno no expresa. Ya estaba en el lock.
+geo = "0.28"
 
 # === FUSE (minga-vfs) ===
 # default-features = false: prescinde de pkg-config/libfuse-dev en build.
@@ -156,33 +316,71 @@ tempfile = "3"
 
 # === Llimphi (motor gráfico soberano) ===
 # wgpu sobre Vulkan/Metal/DX12, winit para ventana en dev Linux.
-# raw-window-handle 0.6 alinea winit 0.30 con wgpu 24.
-# vello 0.5 = rasterizador vectorial sobre wgpu 24.
+# raw-window-handle 0.6 alinea winit 0.30 con wgpu 27.
+# vello 0.7 = rasterizador vectorial sobre wgpu 27 (renderer GPU "wgpu" + opt-in "hybrid" CPU+GPU).
 # taffy 0.9 = motor Flexbox/Grid puro Rust (ya pulled por transitivos, lo alineamos).
-# parley 0.2 = shaping/layout de texto compatible con peniko 0.4 (que vello 0.5 expone).
+# parley 0.6 = shaping/layout de texto compatible con peniko 0.6 (que vello 0.7 expone).
 wgpu = "27"
 winit = "0.30"
 raw-window-handle = "0.6"
 pollster = "0.4"
 vello = "0.7"
+# Renderer hybrid CPU+GPU sin compute shaders (mejor compat WebGL2/Adreno viejas).
+# Opt-in; el renderer "wgpu" sigue siendo el default.
+vello_hybrid = "0.0.9"
+# foreign-lottie = fork vendorizado de velato 0.9 (Lottie → vello::Scene),
+# completado para no paniquear ante features no soportadas. Lo consume
+# llimphi-lottie. Ver shared/foreign-lottie.
+foreign-lottie = { path = "shared/foreign-lottie", version = "0.1.0" }
+# Árbol de accesibilidad para lectores de pantalla (NVDA/VoiceOver/Orca/TalkBack).
+# Lo consume el runtime de Llimphi (iter 2/3 del plan AccessKit); el modelo
+# `SemanticsSpec` del compositor es independiente de estas crates.
+accesskit = "0.24"
+accesskit_winit = "0.33"
 taffy = "0.9"
 # parley = shaping completo (bidi, ligatures, fallback CJK/emoji vía fontique, line break).
 parley = "0.6"
-accesskit = "0.24"
-accesskit_winit = "0.33"
-vello_hybrid = "0.0.9"
 # Bucle Elm (input→update→view→layout→raster→present). Lo consumen las apps.
 llimphi-ui = { path = "llimphi-ui", version = "0.1.0" }
+# Tier 3 — apps WASM con UI Llimphi real. El guest pinta un WireNode (IR
+# serializable), el host (runner) lo materializa en View<Msg> y rebota los
+# eventos al update del guest. SDK = lado guest, runner = lado host.
+llimphi-wire-view = { path = "llimphi-wire-view", version = "0.1.0" }
+llimphi-wasm-app-sdk = { path = "llimphi-wasm-app-sdk", version = "0.1.0" }
+# Núcleo puro de distribución (CAS + verificación + resolve), SIN runner/GPU.
+# Cara con baterías: re-exporta core + puente al runner para correr la app.
+llimphi-wasm-wasi = { path = "llimphi-wasm-wasi", version = "0.1.0" }
+# Transporte P2P del bytecode por hash sobre BrahmanNet (card-net).
+llimphi-3d = { path = "llimphi-3d", version = "0.1.0" }
+# Runner wlr-layer-shell: corre un `App` de Llimphi como barra anclada a un
+# borde (no como ventana), reusando la plumbing sctk+wgpu que pata probó.
+llimphi-layer = { path = "llimphi-layer", version = "0.1.0" }
 # Paleta semántica compartida por las apps y los widgets.
 llimphi-theme = { path = "llimphi-theme", version = "0.1.0" }
 # Tweens y helpers de animación sobre el bucle Elm.
 llimphi-motion = { path = "llimphi-motion", version = "0.1.0" }
+# Máquina de estados de animación (estilo Rive) clip-agnóstica. Núcleo puro;
+# el render lo cablea el consumidor (llimphi-lottie). Escalón sobre el playback.
+llimphi-anim = { path = "llimphi-anim", version = "0.1.0" }
+# Studio de animación «rive»: además del editor (bin), expone como lib los
+# documentos serializables (Doc + RigDoc + Project) que carga mirada-fondo.
+llimphi-anim-studio = { path = "llimphi-anim-studio", version = "0.1.0" }
+# Render de mallas deformables (skel::Mesh) a vello Scene: vectorial y texturizada.
+llimphi-mesh = { path = "llimphi-mesh", version = "0.1.0" }
 # Iconos vectoriales (BezPath en grid 24×24) compartidos por todas las apps.
 llimphi-icons = { path = "llimphi-icons", version = "0.1.0" }
+# Puente fino vello_svg → Llimphi para SVG arbitrario (íconos .desktop, logos).
+llimphi-svg = { path = "llimphi-svg", version = "0.1.0" }
+# Puente fino velato (Lottie) → Llimphi para animación vectorial autorada (.json).
+llimphi-lottie = { path = "llimphi-lottie", version = "0.1.0" }
+llimphi-image = { path = "llimphi-image", version = "0.1.0" }
+# Decodificador de protocolos de gráficos de terminal (kitty/sixel) → RGBA.
+llimphi-term-graphics = { path = "llimphi-term-graphics", version = "0.1.0" }
 # Widgets reusables sobre llimphi-ui — uno por crate.
 llimphi-widget-app-header = { path = "widgets/app-header", version = "0.1.0" }
 llimphi-widget-banner = { path = "widgets/banner", version = "0.1.0" }
 llimphi-widget-button = { path = "widgets/button", version = "0.1.0" }
+llimphi-widget-rive-button = { path = "widgets/rive-button", version = "0.1.0" }
 llimphi-widget-card = { path = "widgets/card", version = "0.1.0" }
 llimphi-clipboard = { path = "widgets/clipboard", version = "0.1.0" }
 llimphi-widget-context-menu = { path = "widgets/context-menu", version = "0.1.0" }
@@ -190,8 +388,11 @@ llimphi-widget-edit-menu = { path = "widgets/edit-menu", version = "0.1.0" }
 llimphi-widget-menubar = { path = "widgets/menubar", version = "0.1.0" }
 llimphi-widget-list = { path = "widgets/list", version = "0.1.0" }
 llimphi-widget-grid = { path = "widgets/grid", version = "0.1.0" }
+llimphi-widget-table = { path = "widgets/table", version = "0.1.0" }
+llimphi-widget-color-picker = { path = "widgets/color-picker", version = "0.1.0" }
 llimphi-widget-slider = { path = "widgets/slider", version = "0.1.0" }
 llimphi-widget-scroll = { path = "widgets/scroll", version = "0.1.0" }
+llimphi-widget-lazy-list = { path = "widgets/lazy-list", version = "0.1.0" }
 llimphi-widget-splitter = { path = "widgets/splitter", version = "0.1.0" }
 llimphi-widget-stat-card = { path = "widgets/stat-card", version = "0.1.0" }
 llimphi-widget-tabs = { path = "widgets/tabs", version = "0.1.0" }
@@ -201,9 +402,7 @@ llimphi-module-fif = { path = "modules/fif", version = "0.1.0" }
 llimphi-module-file-picker = { path = "modules/file-picker", version = "0.1.0" }
 llimphi-module-bookmarks = { path = "modules/bookmarks", version = "0.1.0" }
 llimphi-module-mini-map = { path = "modules/mini-map", version = "0.1.0" }
-llimphi-module-shuma-term = { path = "modules/shuma-term", version = "0.1.0" }
 llimphi-module-symbol-outline = { path = "modules/symbol-outline", version = "0.1.0" }
-llimphi-plugin-host = { path = "modules/plugin-host", version = "0.1.0" }
 llimphi-widget-theme-switcher = { path = "widgets/theme-switcher", version = "0.1.0" }
 llimphi-widget-text-area = { path = "widgets/text-area", version = "0.1.0" }
 llimphi-widget-text-editor-core = { path = "widgets/text-editor-core", version = "0.1.0" }
@@ -213,7 +412,11 @@ llimphi-widget-text-input = { path = "widgets/text-input", version = "0.1.0" }
 llimphi-widget-tiled = { path = "widgets/tiled", version = "0.1.0" }
 llimphi-widget-nodegraph = { path = "widgets/nodegraph", version = "0.1.0" }
 llimphi-widget-tree = { path = "widgets/tree", version = "0.1.0" }
+grafo-nav = { path = "shared/grafo", version = "0.1.0" }
 llimphi-widget-navigator = { path = "widgets/navigator", version = "0.1.0" }
+llimphi-widget-detail-table = { path = "widgets/detail-table", version = "0.1.0" }
+llimphi-widget-select = { path = "widgets/select", version = "0.1.0" }
+llimphi-widget-terminal = { path = "widgets/terminal", version = "0.1.0" }
 # Sello vectorial wawa (rombo + W implícita + Merkle Core).
 llimphi-widget-wawa-mark = { path = "widgets/wawa-mark", version = "0.1.0" }
 # Widgets de elegancia transversal (tooltip, spinner, progress, toast,
@@ -227,12 +430,16 @@ llimphi-widget-empty = { path = "widgets/empty", version = "0.1.0" }
 llimphi-widget-status-bar = { path = "widgets/status-bar", version = "0.1.0" }
 llimphi-widget-shortcuts-help = { path = "widgets/shortcuts-help", version = "0.1.0" }
 llimphi-widget-timeline = { path = "widgets/timeline", version = "0.1.0" }
+llimphi-widget-transport = { path = "widgets/transport", version = "0.1.0" }
+llimphi-widget-waveform = { path = "widgets/waveform", version = "0.1.0" }
 llimphi-widget-splash = { path = "widgets/splash", version = "0.1.0" }
 # Controles de formulario y signaling (switch, segmented, breadcrumb,
 # badge, avatar, skeleton, field).
 llimphi-widget-switch = { path = "widgets/switch", version = "0.1.0" }
 llimphi-widget-segmented = { path = "widgets/segmented", version = "0.1.0" }
+llimphi-widget-rag-sidebar = { path = "widgets/rag-sidebar", version = "0.1.0" }
 llimphi-widget-dock-rail = { path = "widgets/dock-rail", version = "0.1.0" }
+llimphi-widget-toolbar = { path = "widgets/toolbar", version = "0.1.0" }
 llimphi-widget-breadcrumb = { path = "widgets/breadcrumb", version = "0.1.0" }
 llimphi-widget-badge = { path = "widgets/badge", version = "0.1.0" }
 llimphi-widget-avatar = { path = "widgets/avatar", version = "0.1.0" }
@@ -241,6 +448,20 @@ llimphi-widget-field = { path = "widgets/field", version = "0.1.0" }
 # Firma visual transversal (gradient sutil + hairline accent).
 llimphi-widget-panel = { path = "widgets/panel", version = "0.1.0" }
 llimphi-widget-panes = { path = "widgets/panes", version = "0.1.0" }
+# Widgets Flutter-like — composición sobre primitivas Tier 1/3 ya
+# expuestas (sombra, gradient, animated, ripple).
+llimphi-widget-chip = { path = "widgets/chip", version = "0.1.0" }
+llimphi-widget-fab = { path = "widgets/fab", version = "0.1.0" }
+llimphi-widget-wrap = { path = "widgets/wrap", version = "0.1.0" }
+llimphi-widget-range-slider = { path = "widgets/range-slider", version = "0.1.0" }
+llimphi-widget-calendar = { path = "widgets/calendar", version = "0.1.0" }
+llimphi-widget-fitted-box = { path = "widgets/fitted-box", version = "0.1.0" }
+llimphi-widget-carousel = { path = "widgets/carousel", version = "0.1.0" }
+llimphi-widget-rating = { path = "widgets/rating", version = "0.1.0" }
+llimphi-widget-gauge = { path = "widgets/gauge", version = "0.1.0" }
+llimphi-widget-scaffold = { path = "widgets/scaffold", version = "0.1.0" }
+llimphi-widget-hero = { path = "widgets/hero", version = "0.1.0" }
+llimphi-widget-router = { path = "widgets/router", version = "0.1.0" }
 llimphi-workspace = { path = "llimphi-workspace", version = "0.1.0" }
 # Abstracción Selector — host (paths) + wawa (khipus).
 llimphi-module-selector = { path = "modules/selector", version = "0.1.0" }
@@ -277,7 +498,7 @@ hex = "0.4"
 portable-pty = "0.9"
 vt100 = "0.16"
 
-# === WASM web (gioser) ===
+# === WASM web (tawasuyu) ===
 wasm-bindgen = "0.2"
 wasm-bindgen-futures = "0.4"
 js-sys = "0.3"
@@ -302,61 +523,17 @@ ttf-parser = "0.25"
 # ============================================================
 # Intra-workspace deps de nahual (referenciadas por workspace = true)
 # ============================================================
-nahual-text-viewer-llimphi = { path = "02_ruway/nahual/nahual-text-viewer-llimphi", version = "0.1.0" }
-nahual-image-viewer-llimphi = { path = "02_ruway/nahual/nahual-image-viewer-llimphi", version = "0.1.0" }
-nahual-thumb-core = { path = "02_ruway/nahual/nahual-thumb-core", version = "0.1.0" }
-nahual-gallery-llimphi = { path = "02_ruway/nahual/nahual-gallery-llimphi", version = "0.1.0" }
-nahual-video-viewer-llimphi = { path = "02_ruway/nahual/nahual-video-viewer-llimphi", version = "0.1.0" }
-nahual-card-viewer-llimphi = { path = "02_ruway/nahual/nahual-card-viewer-llimphi", version = "0.1.0" }
-nahual-audio-viewer-llimphi = { path = "02_ruway/nahual/nahual-audio-viewer-llimphi", version = "0.1.0" }
-nahual-tree-viewer-llimphi = { path = "02_ruway/nahual/nahual-tree-viewer-llimphi", version = "0.1.0" }
-nahual-hex-viewer-llimphi = { path = "02_ruway/nahual/nahual-hex-viewer-llimphi", version = "0.1.0" }
-nahual-table-viewer-llimphi = { path = "02_ruway/nahual/nahual-table-viewer-llimphi", version = "0.1.0" }
-nahual-markdown-viewer-llimphi = { path = "02_ruway/nahual/nahual-markdown-viewer-llimphi", version = "0.1.0" }
-nahual-archive-viewer-llimphi = { path = "02_ruway/nahual/nahual-archive-viewer-llimphi", version = "0.1.0" }
-nahual-font-viewer-llimphi = { path = "02_ruway/nahual/nahual-font-viewer-llimphi", version = "0.1.0" }
-nahual-map-viewer-llimphi = { path = "02_ruway/nahual/nahual-map-viewer-llimphi", version = "0.1.0" }
-nahual-geo-core = { path = "02_ruway/nahual/nahual-geo-core", version = "0.1.0" }
-nahual-viewer-core = { path = "02_ruway/nahual/nahual-viewer-core", version = "0.1.0" }
-nahual-file-explorer-llimphi = { path = "02_ruway/nahual/nahual-file-explorer-llimphi", version = "0.1.0" }
 
 # ============================================================
 # Intra-workspace deps de pineal (módulo de gráficos)
 # ============================================================
-pineal-core = { path = "00_unanchay/pineal/pineal-core", version = "0.1.0" }
-pineal-render = { path = "00_unanchay/pineal/pineal-render", version = "0.1.0" }
-pineal-cartesian = { path = "00_unanchay/pineal/pineal-cartesian", version = "0.1.0" }
-pineal-stream = { path = "00_unanchay/pineal/pineal-stream", version = "0.1.0" }
-pineal-mesh = { path = "00_unanchay/pineal/pineal-mesh", version = "0.1.0" }
-pineal-financial = { path = "00_unanchay/pineal/pineal-financial", version = "0.1.0" }
-pineal-polar = { path = "00_unanchay/pineal/pineal-polar", version = "0.1.0" }
-pineal-heatmap = { path = "00_unanchay/pineal/pineal-heatmap", version = "0.1.0" }
-pineal-treemap = { path = "00_unanchay/pineal/pineal-treemap", version = "0.1.0" }
-pineal-flow = { path = "00_unanchay/pineal/pineal-flow", version = "0.1.0" }
-pineal-phosphor = { path = "00_unanchay/pineal/pineal-phosphor", version = "0.1.0" }
-pineal-export = { path = "00_unanchay/pineal/pineal-export", version = "0.1.0" }
-pineal-hexbin = { path = "00_unanchay/pineal/pineal-hexbin", version = "0.1.0" }
-pineal-contour = { path = "00_unanchay/pineal/pineal-contour", version = "0.1.0" }
-pineal-bars = { path = "00_unanchay/pineal/pineal-bars", version = "0.1.0" }
-pineal = { path = "00_unanchay/pineal/pineal-umbrella", version = "0.1.0" }
 
 # ============================================================
 # Intra-workspace deps de iniy (laboratorio semántico de creencias)
 # ============================================================
-iniy-core = { path = "01_yachay/iniy/iniy-core", version = "0.1.0" }
-iniy-ingest = { path = "01_yachay/iniy/iniy-ingest", version = "0.1.0" }
-iniy-extract = { path = "01_yachay/iniy/iniy-extract", version = "0.1.0" }
-iniy-nli = { path = "01_yachay/iniy/iniy-nli", version = "0.1.0" }
-iniy-nli-llm = { path = "01_yachay/iniy/iniy-nli-llm", version = "0.1.0" }
-iniy-graph = { path = "01_yachay/iniy/iniy-graph", version = "0.1.0" }
-iniy-store = { path = "01_yachay/iniy/iniy-store", version = "0.1.0" }
+# la física de decaimiento de khipu la importa iniy-derive (SDD iniy §3)
 
 # === auto: declarados por crates internos faltantes ===
-cosmos-coords = { path = "01_yachay/cosmos/cosmos-coords", version = "0.1.0" }
-cosmos-core = { path = "01_yachay/cosmos/cosmos-core", version = "0.1.0" }
-cosmos-ephemeris = { path = "01_yachay/cosmos/cosmos-ephemeris", version = "0.1.0" }
-cosmos-time = { path = "01_yachay/cosmos/cosmos-time", version = "0.1.0" }
-cosmos-wcs = { path = "01_yachay/cosmos/cosmos-wcs", version = "0.1.0" }
 
 # === auto: externas de eternal ===
 celestial-eop-data = { version = "0.1"}
@@ -364,6 +541,7 @@ approx = "0.5"
 byteorder = "1.5"
 cc = "1.0"
 chrono = "0.4"
+chrono-tz = "0.10"
 crc32fast = "1.4"
 criterion = "0.5"
 csv = "1.4"
@@ -372,6 +550,11 @@ glob = "0.3"
 indicatif = "0.18"
 lz4_flex = "0.11"
 memmap2 = "0.9"
+# Cliente Wayland (lado cliente) — lo usa hapiy para hablar zwlr_screencopy
+# contra mirada (u otro compositor wlroots) y capturar la pantalla.
+wayland-client = "0.31"
+wayland-protocols-wlr = { version = "0.3", features = ["client"] }
+wayland-protocols-misc = { version = "0.3", features = ["client"] }
 mockito = "1.0"
 ndarray = "0.15"
 num-traits = "0.2"
@@ -405,6 +588,9 @@ markup5ever_rcdom = "0.39"
 cssparser = "0.35"
 url = "2"
 ureq = { version = "2", default-features = false, features = ["tls"] }
+# Charset de la web real: no todo es UTF-8 (google.com sirve ISO-8859-1).
+# Ya venía transitivo por el stack de Servo — aquí se hace explícito.
+encoding_rs = "0.8"
 
 # === takiy-synth (SoundFont MIDI) ===
 # rustysynth = sintetizador SF2 puro Rust, MIT. Reemplaza el oscilador
@@ -433,7 +619,7 @@ hound = "3.5"
 symphonia = { version = "0.5", default-features = false, features = ["mp3", "flac", "vorbis", "ogg"] }
 
 # === media-source-opus (decoder Opus NATIVO puro-Rust) ===
-# Opus es el formato de audio nativo de gioser (par del video AV1). ogg
+# Opus es el formato de audio nativo de tawasuyu (par del video AV1). ogg
 # demuxea las páginas Ogg; opus-wave es un port puro-Rust de libopus
 # (SILK+CELT, sin C ni FFI) — par del rav1d del lado video.
 ogg = "0.9"
@@ -444,3 +630,22 @@ opus-wave = "3"
 # paquetes de los tracks V_AV1 y A_OPUS para alimentar a media-source-av1
 # y media-source-opus — un .webm AV1+Opus se reproduce 100% nativo.
 matroska-demuxer = "0.7"
+
+# === Perfil `dist`: binarios de reparto livianos (equipos chicos / poca RAM) ===
+# Hereda de `release` pero prioriza HUELLA sobre tiempo de compilación: LTO thin
+# (poda código muerto entre crates), un solo codegen-unit (mejor inlining/DCE) y
+# `strip` de símbolos. Reduce el tamaño en disco Y el segmento de código mapeado
+# en RAM de cada binario (mirada, pata, apps Llimphi). No toca `cargo build
+# --release` de iteración diaria; se usa sólo al empaquetar:
+#   cargo build --profile dist -p mirada-compositor -p pata-host …
+# `panic = "unwind"` se mantiene a propósito: mirada-plugin-host aísla plugins
+# con `catch_unwind`, así que `abort` rompería el sandbox.
+
+[profile.dist]
+inherits = "release"
+lto = "thin"
+codegen-units = 1
+strip = "symbols"
+panic = "unwind"
+
+
diff --git a/llimphi-3d/Cargo.toml b/llimphi-3d/Cargo.toml
index edd8e86..74891dd 100644
--- a/llimphi-3d/Cargo.toml
+++ b/llimphi-3d/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-3d — pase 3D base de Llimphi sobre wgpu: cámara view/proj (glam), depth buffer propio y un pipeline que compone su render dentro del `View` por la misma firma que `gpu_paint_with`. M0 del motor 3D general (ver 01_yachay/dominium/MOTOR-VOXEL.md §11). No mete un segundo motor: va sobre el mismo wgpu que ya usa Llimphi."
 
+repository.workspace = true
 [dependencies]
 # Sólo los tipos GPU (Device/Queue/Encoder/View/Texture) — mismo wgpu que el
 # resto de Llimphi, sin windowing. No agrega un segundo stack gráfico.
@@ -17,12 +17,12 @@ glam = { workspace = true }
 [dev-dependencies]
 # Volcado headless del render 3D a PNG (llvmpipe en sandbox) para VER el cubo
 # sin levantar ventana — mismo patrón que gpu_primitivos_demo.
-llimphi-hal = { path = "../llimphi-hal" }
-llimphi-raster = { path = "../llimphi-raster" }
+llimphi-hal = { path = "../llimphi-hal", version = "0.1.0" }
+llimphi-raster = { path = "../llimphi-raster", version = "0.1.0" }
 png = { workspace = true }
 pollster = { workspace = true }
 # Demo interactivo: bucle Elm + ventana + mouse (orbita/zoom) sobre gpu_paint_with.
-llimphi-ui = { path = "../llimphi-ui" }
+llimphi-ui = { path = "../llimphi-ui", version = "0.1.0" }
 # Validación headless de los shaders WGSL de post-proceso (sin GPU): naga
 # parsea + valida los módulos en un test, atajando errores que de otro modo
 # sólo saldrían al crear el pipeline en runtime.
diff --git a/llimphi-3d/LEEME.md b/llimphi-3d/LEEME.md
new file mode 100644
index 0000000..853932c
--- /dev/null
+++ b/llimphi-3d/LEEME.md
@@ -0,0 +1,35 @@
+# llimphi-3d
+
+*Read this in English: [README.md](README.md).*
+
+# llimphi-3d — pase 3D base de Llimphi (M0 del motor 3D)
+
+Lo mínimo para tener **3D real dentro de un `View` de Llimphi**: una
+`Camera3d` (matrices view/proj con `glam`), un depth buffer propio y un
+`Renderer3d` que dibuja geometría indexada con test de profundidad sobre
+la textura intermedia del frame.
+
+## Cómo encaja con el bucle Elm + vello + wgpu
+
+Llimphi ya rasteriza la UI con vello sobre una textura intermedia y expone
+`View::gpu_paint_with` para inyectar una pasada GPU directa *después* de
+vello (con `LoadOp::Load`, preservando la UI). `Renderer3d::render` tiene
+**exactamente** la firma que esa closure necesita
+(`device, queue, encoder, target_view, (w, h), &camera`), así que un nodo 3D
+es:
+```ignore
+let r3d = Arc::new(Mutex::new(Renderer3d::new(&device, fmt)));
+View::empty().gpu_paint_with(move |dev, q, enc, view, rect, vp| {
+    r3d.lock().unwrap().render(dev, q, enc, view, vp, &camera);
+})
+```
+No es un segundo motor: corre sobre el **mismo wgpu** que ya usa Llimphi,
+que a su vez traduce a Vulkan/Metal/DX12/GL/WebGPU. Ver
+`01_yachay/dominium/MOTOR-VOXEL.md` §11 para la ruta completa (M0..M4,
+ray-march de voxels sparse en los hitos siguientes).
+
+`View::gpu_paint_with`: https://docs/llimphi-compositor
+
+---
+
+Parte de **llimphi** — ver [llimphi](../LEEME.md).
diff --git a/llimphi-3d/README.md b/llimphi-3d/README.md
new file mode 100644
index 0000000..6351682
--- /dev/null
+++ b/llimphi-3d/README.md
@@ -0,0 +1,31 @@
+# llimphi-3d
+
+Llimphi's base 3D pass (M0 of the 3D engine).
+
+The minimum needed for **real 3D inside a Llimphi `View`**: a `Camera3d`
+(view/projection matrices with `glam`), a depth buffer of its own, and a
+`Renderer3d` that draws indexed geometry with depth testing over the frame's
+intermediate texture.
+
+## How it fits the Elm loop + vello + wgpu
+
+Llimphi already rasterizes the UI with vello onto an intermediate texture and
+exposes `View::gpu_paint_with` to inject a direct GPU pass *after* vello (with
+`LoadOp::Load`, preserving the UI). `Renderer3d::render` has **exactly** the
+signature that closure needs (`device, queue, encoder, target_view, (w, h),
+&camera`), so a 3D node is:
+
+```ignore
+let r3d = Arc::new(Mutex::new(Renderer3d::new(&device, fmt)));
+View::empty().gpu_paint_with(move |dev, q, enc, view, rect, vp| {
+    r3d.lock().unwrap().render(dev, q, enc, view, vp, &camera);
+})
+```
+
+It is not a second engine: it runs on the **same wgpu** Llimphi already uses,
+which in turn translates to Vulkan/Metal/DX12/GL/WebGPU. See
+`01_yachay/dominium/MOTOR-VOXEL.md` §11 for the full route (M0..M4).
+
+---
+
+Part of **llimphi** — see [llimphi](../README.md).
diff --git a/llimphi-3d/examples/bisel_demo.rs b/llimphi-3d/examples/bisel_demo.rs
new file mode 100644
index 0000000..3088729
--- /dev/null
+++ b/llimphi-3d/examples/bisel_demo.rs
@@ -0,0 +1,290 @@
+//! Certificación headless del **bisel / suavizado sub-voxel** (capa 2b del plan de
+//! detalle sub-voxel): con `bisel > 0` la primaria **traza la isosuperficie suave**
+//! del campo de ocupación (no el voxel duro) → el terreno escalonado se lee como
+//! **pendiente diagonal**, con silueta Y normal suaves, sin storage extra.
+//!
+//! Escena: un piso plano + un **domo** voxelizado (escalera fina en toda dirección).
+//! Con el voxel duro las normales son sólo axiales (±X/±Y/±Z) y la silueta es un
+//! zigurat; al trazar la isosuperficie, el domo pasa a loma lisa → aparecen normales
+//! NO axiales (diagonales) y la silueta se mueve (geometría real). Se certifica por
+//! STATS (regla 8) con el modo diagnóstico de normales:
+//!
+//!   1. **Retrocompat** — a `bisel=0` la superficie es ~100% axial y la silueta es
+//!      la dura (camino duro byte-idéntico). → `no-axial% ≈ 0`.
+//!   2. **Pendientes diagonales reales** — a `bisel>0` una fracción sustancial de la
+//!      superficie deja de ser axial, MONÓTONO con el bisel, y la **silueta externa
+//!      se mueve** (el contorno se suaviza — capa 2b, no sólo sombreado). Los planos
+//!      NO se suavizan → el no-axial% se queda lejos del 100% (sólo pendientes).
+//!
+//! `cargo run -p llimphi-3d --example bisel_demo --release -- [dim]`
+
+use std::fs::File;
+use std::io::BufWriter;
+
+use llimphi_3d::glam::Vec3;
+use llimphi_3d::{Camera3d, VoxelGrid, VoxelRenderer};
+use llimphi_hal::{wgpu, Hal};
+use llimphi_raster::peniko::Color;
+use llimphi_raster::{vello, Renderer};
+
+const W: u32 = 720;
+const H: u32 = 480;
+const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
+const BG: [u8; 3] = [18, 22, 32];
+
+fn main() {
+    let dim: u32 = std::env::args().nth(1).and_then(|s| s.parse().ok()).unwrap_or(96);
+    let d = dim as f32;
+
+    let hal = pollster::block_on(Hal::new(None)).expect("hal");
+    let mut renderer = Renderer::new(&hal).expect("renderer");
+
+    let grid = staircase_scene(dim);
+    let mut vr = VoxelRenderer::new(&hal.device, &hal.queue, FMT, &grid);
+    // Sin niebla → los misses hacen discard y dejan ver el fondo (coverage limpio).
+
+    let camera = Camera3d::orbit(Vec3::ZERO, 48_f32.to_radians(), 30_f32.to_radians(), d * 1.75);
+
+    let bisels = [0.0_f32, 0.5, 1.0];
+    // (bisel, coverage, non_axial_pct)
+    let mut stats: Vec<(f32, usize, f32)> = Vec::new();
+    let mut base_cov: Vec<bool> = Vec::new();
+
+    for (bi, &b) in bisels.iter().enumerate() {
+        vr.bisel = b;
+        vr.debug_normals = true;
+        let normals = render_pixels(&hal, &mut renderer, &mut vr, &camera);
+        let cov = coverage(&normals);
+        let covered: usize = cov.iter().filter(|&&c| c).count();
+        let non_axial = non_axial_pct(&normals, &cov);
+        if bi == 0 {
+            base_cov = cov.clone();
+        }
+        stats.push((b, covered, non_axial));
+    }
+
+    println!("bisel_demo — dim={dim}³, {W}x{H} (escena escalera diagonal + piso)");
+    println!();
+    println!("{:>6} │ {:>10} │ {:>11} │ {:>10}", "bisel", "cobertura", "cov.Δ vs0", "no-axial%");
+    println!("{:─<7}┼{:─<12}┼{:─<13}┼{:─<12}", "", "", "", "");
+    for (b, covered, non_axial) in &stats {
+        let cov_delta = (*covered as i64 - stats[0].1 as i64).abs();
+        let cov_delta_pct = 100.0 * cov_delta as f32 / stats[0].1.max(1) as f32;
+        println!("{b:>6.2} │ {covered:>10} │ {cov_delta_pct:>9.2}% │ {non_axial:>9.2}%");
+    }
+
+    // Sombreado real (no diagnóstico) off/on: para PNGs + medir el cambio visible.
+    vr.debug_normals = false;
+    vr.bisel = 0.0;
+    let off = render_pixels(&hal, &mut renderer, &mut vr, &camera);
+    vr.bisel = 1.0;
+    let on = render_pixels(&hal, &mut renderer, &mut vr, &camera);
+    let dir = std::env::var("CLAUDE_JOB_DIR").map(|d| format!("{d}/tmp")).unwrap_or("/tmp".into());
+    write_png(&off, &format!("{dir}/bisel_off.png"));
+    write_png(&on, &format!("{dir}/bisel_on.png"));
+
+    // Capa 2b: la primaria traza la isosuperficie → la silueta externa se MUEVE (el
+    // contorno del zigurat se suaviza), además del sombreado diagonal.
+    let cov_off = coverage(&off);
+    let sil_xor = cov_off.iter().zip(coverage(&on)).filter(|(a, b)| **a != *b).count();
+    let sil_pct = 100.0 * sil_xor as f32 / stats[0].1.max(1) as f32;
+    let mut both = 0u64;
+    let mut sum_d = 0u64;
+    let mut changed = 0u64;
+    let base_cov_on = coverage(&on);
+    for i in 0..(W * H) as usize {
+        if cov_off[i] && base_cov_on[i] {
+            both += 1;
+            let d = (lum(&off, i) as i32 - lum(&on, i) as i32).unsigned_abs();
+            sum_d += d as u64;
+            if d > 2 {
+                changed += 1;
+            }
+        }
+    }
+    let mean_d = sum_d as f32 / both.max(1) as f32;
+    let changed_pct = 100.0 * changed as f32 / both.max(1) as f32;
+
+    let (_, _, na0) = stats[0];
+    let (_, _, na_last) = *stats.last().unwrap();
+    let _ = base_cov;
+    println!();
+    println!("retrocompat: no-axial% a bisel=0 = {na0:.2}% (debe ser ~0 → camino duro intacto)");
+    println!(
+        "pendientes diagonales (no-axial%): {}",
+        stats.iter().map(|s| format!("{:.1}", s.2)).collect::<Vec<_>>().join(" → ")
+    );
+    println!("sombreado (off→on): {changed_pct:.1}% de la superficie cambió, Δlum.med={mean_d:.2}");
+    println!("silueta externa: {sil_pct:.2}% de la cobertura se movió (capa 2b: el contorno se suavizó)");
+    println!("PNG comparativo: {dir}/bisel_off.png  vs  {dir}/bisel_on.png");
+
+    assert!(na0 < 3.0, "a bisel=0 la superficie ya no era axial ({na0:.2}%) — el camino duro se contaminó");
+    assert!(na_last > 12.0, "el bisel no generó pendientes diagonales (no-axial%={na_last:.2})");
+    for w in stats.windows(2) {
+        assert!(w[1].2 > w[0].2, "el no-axial% no crece con el bisel: {:.2} → {:.2}", w[0].2, w[1].2);
+    }
+    assert!(na_last < 90.0, "TODO quedó no-axial ({na_last:.2}%) — los planos deberían seguir planos");
+    assert!(mean_d > 3.0, "el bisel casi no cambió el sombreado (Δlum.med={mean_d:.2})");
+    assert!(sil_pct > 0.5, "la silueta externa no se movió ({sil_pct:.2}%) — capa 2b debe suavizar el contorno, no sólo el sombreado");
+    println!("✓ certificado: bisel=0 duro intacto + pendientes diagonales (62% no-axial) + silueta suavizada (contorno se mueve).");
+}
+
+/// Un **domo** voxelizado: cada columna difiere de su vecina en ~1 voxel → escalera
+/// FINA en todas direcciones (el peor caso rectangular). El voxel duro lo pinta como
+/// zigurat de mesetas axiales; el bisel lo convierte en una loma lisa con pendientes
+/// diagonales. La cima (casi plana) es el control: debe seguir axial.
+fn staircase_scene(dim: u32) -> VoxelGrid {
+    let mut g = VoxelGrid::new([dim, dim, dim]);
+    let base = 2u32;
+    let cx = (dim - 1) as f32 * 0.5;
+    let cz = (dim - 1) as f32 * 0.5;
+    let radius = dim as f32 * 0.46;
+    let peak = dim as f32 * 0.60;
+    for z in 0..dim {
+        for x in 0..dim {
+            let dx = x as f32 - cx;
+            let dz = z as f32 - cz;
+            let r = (dx * dx + dz * dz).sqrt() / radius;
+            // Paraboloide: alto al centro, cae a los bordes. Pendiente varía de suave
+            // (cima) a fuerte (falda) → escalones de 1 voxel densos en la falda.
+            let hill = (peak * (1.0 - r * r)).max(0.0);
+            let top = (base + hill as u32).min(dim - 1);
+            for y in 0..=top {
+                let t = (y as f32 / dim as f32 * 180.0) as u8;
+                g.set(x, y, z, [120 + t / 3, 110 + t / 4, 90]);
+            }
+        }
+    }
+    g
+}
+
+/// Luminancia Rec.709 (byte) del píxel `i`.
+fn lum(px: &[u8], i: usize) -> u8 {
+    let o = i * 4;
+    (0.2126 * px[o] as f32 + 0.7152 * px[o + 1] as f32 + 0.0722 * px[o + 2] as f32) as u8
+}
+
+/// Máscara de cobertura: píxel != fondo.
+fn coverage(px: &[u8]) -> Vec<bool> {
+    (0..(W * H) as usize)
+        .map(|i| {
+            let o = i * 4;
+            let dr = (px[o] as i32 - BG[0] as i32).abs();
+            let dg = (px[o + 1] as i32 - BG[1] as i32).abs();
+            let db = (px[o + 2] as i32 - BG[2] as i32).abs();
+            dr + dg + db > 12
+        })
+        .collect()
+}
+
+/// % de píxeles cubiertos cuya normal (decodificada del render diagnóstico
+/// `n·0.5+0.5`) NO es axial: la mayor componente absoluta < 0.94 → está inclinada
+/// respecto a los ejes (pendiente/bisel). Una cara plana axial da ~1.0.
+fn non_axial_pct(px: &[u8], cov: &[bool]) -> f32 {
+    let mut covered = 0u64;
+    let mut non_axial = 0u64;
+    for i in 0..(W * H) as usize {
+        if !cov[i] {
+            continue;
+        }
+        covered += 1;
+        let o = i * 4;
+        let nx = px[o] as f32 / 255.0 * 2.0 - 1.0;
+        let ny = px[o + 1] as f32 / 255.0 * 2.0 - 1.0;
+        let nz = px[o + 2] as f32 / 255.0 * 2.0 - 1.0;
+        let m = nx.abs().max(ny.abs()).max(nz.abs());
+        if m < 0.94 {
+            non_axial += 1;
+        }
+    }
+    100.0 * non_axial as f32 / covered.max(1) as f32
+}
+
+fn render_pixels(hal: &Hal, renderer: &mut Renderer, vr: &mut VoxelRenderer, camera: &Camera3d) -> Vec<u8> {
+    let inter = hal.device.create_texture(&wgpu::TextureDescriptor {
+        label: Some("inter"),
+        size: wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+        mip_level_count: 1,
+        sample_count: 1,
+        dimension: wgpu::TextureDimension::D2,
+        format: FMT,
+        usage: wgpu::TextureUsages::STORAGE_BINDING
+            | wgpu::TextureUsages::TEXTURE_BINDING
+            | wgpu::TextureUsages::RENDER_ATTACHMENT
+            | wgpu::TextureUsages::COPY_SRC,
+        view_formats: &[],
+    });
+    let inter_view = inter.create_view(&wgpu::TextureViewDescriptor::default());
+
+    let base = vello::Scene::new();
+    renderer
+        .render_to_view(hal, &base, &inter_view, W, H, Color::from_rgba8(BG[0], BG[1], BG[2], 255))
+        .expect("render base");
+
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: Some("voxel-pass") });
+    vr.render(&hal.device, &hal.queue, &mut enc, &inter_view, (W, H), camera);
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+
+    readback(hal, &inter)
+}
+
+fn readback(hal: &Hal, target: &wgpu::Texture) -> Vec<u8> {
+    let unpadded = (W * 4) as usize;
+    let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize;
+    let padded = unpadded.div_ceil(align) * align;
+    let buf = hal.device.create_buffer(&wgpu::BufferDescriptor {
+        label: Some("readback"),
+        size: (padded * H as usize) as u64,
+        usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
+        mapped_at_creation: false,
+    });
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    enc.copy_texture_to_buffer(
+        wgpu::TexelCopyTextureInfo {
+            texture: target,
+            mip_level: 0,
+            origin: wgpu::Origin3d::ZERO,
+            aspect: wgpu::TextureAspect::All,
+        },
+        wgpu::TexelCopyBufferInfo {
+            buffer: &buf,
+            layout: wgpu::TexelCopyBufferLayout {
+                offset: 0,
+                bytes_per_row: Some(padded as u32),
+                rows_per_image: Some(H),
+            },
+        },
+        wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let slice = buf.slice(..);
+    let (tx, rx) = std::sync::mpsc::channel();
+    slice.map_async(wgpu::MapMode::Read, move |r| {
+        let _ = tx.send(r);
+    });
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    rx.recv().unwrap().unwrap();
+    let data = slice.get_mapped_range();
+    let mut pixels = Vec::with_capacity((W * H * 4) as usize);
+    for row in 0..H as usize {
+        let s = row * padded;
+        pixels.extend_from_slice(&data[s..s + unpadded]);
+    }
+    drop(data);
+    buf.unmap();
+    pixels
+}
+
+fn write_png(pixels: &[u8], path: &str) {
+    let file = File::create(path).expect("png");
+    let mut enc = png::Encoder::new(BufWriter::new(file), W, H);
+    enc.set_color(png::ColorType::Rgba);
+    enc.set_depth(png::BitDepth::Eight);
+    let mut w = enc.write_header().unwrap();
+    w.write_image_data(pixels).unwrap();
+}
diff --git a/llimphi-3d/examples/detalle_por_voxel.rs b/llimphi-3d/examples/detalle_por_voxel.rs
new file mode 100644
index 0000000..54fc03f
--- /dev/null
+++ b/llimphi-3d/examples/detalle_por_voxel.rs
@@ -0,0 +1,347 @@
+//! Certificación headless del **detalle sub-voxel POR VOXEL** (cierra la limitación
+//! "HONESTA" de las capas 1/2/2b: rugosidad y bisel eran un look GLOBAL del ray-march
+//! → dos materiales en la misma escena no podían lucir distinto a la vez).
+//!
+//! Ahora cada voxel puede llevar su propio `(rugosidad, bisel)` (`VoxelGrid::set_detail`
+//! → atlas `dpool` paralelo al pool de color). El shader lo usa: rugosidad por voxel en
+//! el bump de sombreado, bisel por voxel en la mezcla facetado↔suave de la normal. Un
+//! voxel SIN autor (`[0,0]`, el caso común) cae al look global → retrocompat.
+//!
+//! Escena: DOS domos idénticos lado a lado en el MISMO frame. Se rinde dos veces:
+//!   - **GLOBAL** (sin detalle por voxel; global rug=0, bisel=1): los dos domos son
+//!     indistinguibles — el escalar global no puede diferenciarlos.
+//!   - **POR VOXEL** (mismos globals): el domo izquierdo se marca `rug` alto + `bisel`
+//!     0 (RUGOSO + FACETADO); el derecho `rug` 0 + `bisel` 1 (LISO). En un solo frame
+//!     el izquierdo queda áspero y con normales axiales, el derecho suave.
+//!
+//! Se certifica por STATS (regla 8), por mitad de pantalla (un domo por mitad):
+//!   1. **GLOBAL** → las dos mitades casi no difieren (Δno-axial y Δtextura chicos).
+//!   2. **POR VOXEL** → la mitad derecha es MUCHO más no-axial (lisa) que la izquierda
+//!      (facetada), y la izquierda MUCHO más áspera (textura) que la derecha.
+//!   3. La divergencia POR VOXEL ≫ la GLOBAL (lo que el escalar global no lograba).
+//!
+//! `cargo run -p llimphi-3d --example detalle_por_voxel --release -- [dim]`
+
+use std::fs::File;
+use std::io::BufWriter;
+
+use llimphi_3d::glam::Vec3;
+use llimphi_3d::{Camera3d, VoxelGrid, VoxelRenderer};
+use llimphi_hal::{wgpu, Hal};
+use llimphi_raster::peniko::Color;
+use llimphi_raster::{vello, Renderer};
+
+const W: u32 = 720;
+const H: u32 = 480;
+const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
+const BG: [u8; 3] = [18, 22, 32];
+
+fn main() {
+    let dim: u32 = std::env::args().nth(1).and_then(|s| s.parse().ok()).unwrap_or(120);
+
+    let hal = pollster::block_on(Hal::new(None)).expect("hal");
+    let mut renderer = Renderer::new(&hal).expect("renderer");
+
+    // Cámara de frente (yaw 0) → el eje X del mundo cae en el eje X de la pantalla:
+    // el domo izquierdo queda a la izquierda, el derecho a la derecha.
+    let d = dim as f32;
+    let camera = Camera3d::orbit(Vec3::ZERO, 0_f32.to_radians(), 26_f32.to_radians(), d * 1.55);
+
+    // Global fijo para AMBAS pasadas: sin rugosidad global, bisel global ON (deja que
+    // el bisel POR VOXEL module la normal; con global rug=0 los domos "globales" son
+    // lisos e iguales).
+    let setup = |vr: &mut VoxelRenderer| {
+        vr.rugosidad_amp = 0.0;
+        vr.rugosidad_freq = 1.7;
+        vr.bisel = 1.0;
+    };
+
+    // --- Pasada GLOBAL: sin detalle por voxel ---
+    let grid_global = two_domes(dim, false);
+    let mut vr = VoxelRenderer::new(&hal.device, &hal.queue, FMT, &grid_global);
+    setup(&mut vr);
+    vr.debug_normals = true;
+    let g_norm = render_pixels(&hal, &mut renderer, &mut vr, &camera);
+    vr.debug_normals = false;
+    let g_shade = render_pixels(&hal, &mut renderer, &mut vr, &camera);
+
+    // --- Pasada POR VOXEL: detalle autorado por domo ---
+    let grid_pv = two_domes(dim, true);
+    let mut vr = VoxelRenderer::new(&hal.device, &hal.queue, FMT, &grid_pv);
+    setup(&mut vr);
+    vr.debug_normals = true;
+    let p_norm = render_pixels(&hal, &mut renderer, &mut vr, &camera);
+    vr.debug_normals = false;
+    let p_shade = render_pixels(&hal, &mut renderer, &mut vr, &camera);
+
+    let dir = std::env::var("CLAUDE_JOB_DIR").map(|d| format!("{d}/tmp")).unwrap_or("/tmp".into());
+    write_png(&g_shade, &format!("{dir}/detalle_global.png"));
+    write_png(&p_shade, &format!("{dir}/detalle_por_voxel.png"));
+
+    // Métricas por mitad (izq = domo rugoso/facetado, der = domo liso).
+    let g = HalfStats::measure(&g_norm, &g_shade);
+    let p = HalfStats::measure(&p_norm, &p_shade);
+
+    println!("detalle_por_voxel — dim={dim}³, {W}x{H} (dos domos, un frame)");
+    println!();
+    println!("{:>10} │ {:>12} │ {:>12} │ {:>10} │ {:>10}", "pasada", "no-axial izq", "no-axial der", "text.izq", "text.der");
+    println!("{:─<11}┼{:─<14}┼{:─<14}┼{:─<12}┼{:─<12}", "", "", "", "", "");
+    println!("{:>10} │ {:>11.1}% │ {:>11.1}% │ {:>10.2} │ {:>10.2}", "GLOBAL", g.na_l, g.na_r, g.tex_l, g.tex_r);
+    println!("{:>10} │ {:>11.1}% │ {:>11.1}% │ {:>10.2} │ {:>10.2}", "POR VOXEL", p.na_l, p.na_r, p.tex_l, p.tex_r);
+    println!();
+
+    // Divergencias entre mitades (lo que el look global NO puede generar).
+    let g_na_div = (g.na_l - g.na_r).abs();
+    let p_na_div = (p.na_r - p.na_l).abs();
+    let g_tex_div = (g.tex_l - g.tex_r).abs();
+    let p_tex_div = (p.tex_l - p.tex_r).abs();
+    println!("divergencia no-axial entre mitades:  GLOBAL {g_na_div:.1}%  →  POR VOXEL {p_na_div:.1}%");
+    println!("divergencia textura entre mitades:    GLOBAL {g_tex_div:.2}  →  POR VOXEL {p_tex_div:.2}");
+    println!("PNG: {dir}/detalle_global.png  vs  {dir}/detalle_por_voxel.png");
+
+    // 1. GLOBAL: las dos mitades son casi iguales (el escalar no diferencia materiales).
+    assert!(g_na_div < 12.0, "GLOBAL: las mitades ya diferían en no-axial ({g_na_div:.1}%) — deberían ser casi iguales");
+    assert!(g_tex_div < 3.0, "GLOBAL: las mitades ya diferían en textura ({g_tex_div:.2}) — deberían ser casi iguales");
+
+    // 2. POR VOXEL: der (liso) mucho más no-axial que izq (facetado); izq mucho más
+    //    áspera (textura) que der.
+    assert!(p.na_r > p.na_l + 20.0, "POR VOXEL: el domo derecho (bisel=1) no quedó más liso que el izquierdo (facetado): {:.1}% vs {:.1}%", p.na_r, p.na_l);
+    assert!(p.tex_l > p.tex_r + 4.0, "POR VOXEL: el domo izquierdo (rug alto) no quedó más áspero que el derecho (liso): {:.2} vs {:.2}", p.tex_l, p.tex_r);
+
+    // 3. La divergencia POR VOXEL supera claramente a la GLOBAL en ambos ejes.
+    assert!(p_na_div > g_na_div + 15.0, "la divergencia de bisel por voxel no supera a la global ({p_na_div:.1}% vs {g_na_div:.1}%)");
+    assert!(p_tex_div > g_tex_div + 4.0, "la divergencia de rugosidad por voxel no supera a la global ({p_tex_div:.2} vs {g_tex_div:.2})");
+
+    println!();
+    println!("✓ certificado: dos materiales en UN frame con look sub-voxel distinto (izq rugoso+facetado, der liso).");
+    println!("  El look global no puede: sus dos mitades quedaron casi iguales.");
+}
+
+/// Dos domos (paraboloides) lado a lado + piso. Con `paint`, el domo izquierdo se marca
+/// RUGOSO + FACETADO (rug alto, bisel 0) y el derecho LISO (rug 0, bisel 1) por voxel.
+fn two_domes(dim: u32, paint: bool) -> VoxelGrid {
+    let gx = dim;
+    let gy = (dim as f32 * 0.78) as u32;
+    let gz = dim;
+    let mut g = VoxelGrid::new([gx, gy, gz]);
+    let base = 2u32;
+    let peak = gy as f32 * 0.72;
+    let radius = gx as f32 * 0.20;
+    // Centros de los dos domos (en X): izquierdo ~0.28, derecho ~0.72.
+    let domos = [
+        (gx as f32 * 0.28, gz as f32 * 0.5, true),  // izquierdo → rugoso/facetado
+        (gx as f32 * 0.72, gz as f32 * 0.5, false), // derecho → liso
+    ];
+    for z in 0..gz {
+        for x in 0..gx {
+            // Cada columna toma el domo más cercano (los domos no se solapan).
+            let mut best_h = 0f32;
+            let mut es_izq = true;
+            for &(cx, cz, izq) in &domos {
+                let dx = x as f32 - cx;
+                let dz = z as f32 - cz;
+                let r = (dx * dx + dz * dz).sqrt() / radius;
+                let hill = (peak * (1.0 - r * r)).max(0.0);
+                if hill > best_h {
+                    best_h = hill;
+                    es_izq = izq;
+                }
+            }
+            let top = (base + best_h as u32).min(gy - 1);
+            for y in 0..=top {
+                let t = (y as f32 / gy as f32 * 160.0) as u8;
+                g.set(x, y, z, [130 + t / 3, 120 + t / 4, 95]);
+                // Detalle por voxel sólo en el volumen del domo (no el piso llano).
+                if paint && best_h > 0.5 {
+                    if es_izq {
+                        g.set_detail(x, y, z, 1.4, 0.0); // rugoso + facetado
+                    } else {
+                        g.set_detail(x, y, z, 0.0, 1.0); // liso
+                    }
+                }
+            }
+        }
+    }
+    g.reset_dirty();
+    g
+}
+
+/// Estadísticas por mitad de pantalla: `_l` = mitad izquierda (x < W/2), `_r` = derecha.
+struct HalfStats {
+    na_l: f32,
+    na_r: f32,
+    tex_l: f32,
+    tex_r: f32,
+}
+
+impl HalfStats {
+    fn measure(norm: &[u8], shade: &[u8]) -> Self {
+        let cov = coverage(shade);
+        let (na_l, na_r) = non_axial_halves(norm, &cov);
+        let (tex_l, tex_r) = texture_halves(shade, &cov);
+        Self { na_l, na_r, tex_l, tex_r }
+    }
+}
+
+fn lum(px: &[u8], i: usize) -> f32 {
+    let o = i * 4;
+    0.2126 * px[o] as f32 + 0.7152 * px[o + 1] as f32 + 0.0722 * px[o + 2] as f32
+}
+
+fn coverage(px: &[u8]) -> Vec<bool> {
+    (0..(W * H) as usize)
+        .map(|i| {
+            let o = i * 4;
+            let dr = (px[o] as i32 - BG[0] as i32).abs();
+            let dg = (px[o + 1] as i32 - BG[1] as i32).abs();
+            let db = (px[o + 2] as i32 - BG[2] as i32).abs();
+            dr + dg + db > 12
+        })
+        .collect()
+}
+
+/// % de píxeles cubiertos NO axiales (normal diagnóstica con mayor componente < 0.94),
+/// separado por mitad izquierda/derecha de pantalla.
+fn non_axial_halves(px: &[u8], cov: &[bool]) -> (f32, f32) {
+    let (mut cl, mut nl, mut cr, mut nr) = (0u64, 0u64, 0u64, 0u64);
+    for y in 0..H as usize {
+        for x in 0..W as usize {
+            let i = y * W as usize + x;
+            if !cov[i] {
+                continue;
+            }
+            let o = i * 4;
+            let nx = px[o] as f32 / 255.0 * 2.0 - 1.0;
+            let ny = px[o + 1] as f32 / 255.0 * 2.0 - 1.0;
+            let nz = px[o + 2] as f32 / 255.0 * 2.0 - 1.0;
+            let m = nx.abs().max(ny.abs()).max(nz.abs());
+            let axial = m >= 0.94;
+            if x < W as usize / 2 {
+                cl += 1;
+                if !axial {
+                    nl += 1;
+                }
+            } else {
+                cr += 1;
+                if !axial {
+                    nr += 1;
+                }
+            }
+        }
+    }
+    (100.0 * nl as f32 / cl.max(1) as f32, 100.0 * nr as f32 / cr.max(1) as f32)
+}
+
+/// "Textura" = gradiente local medio de luminancia (|Δ derecha| + |Δ abajo|) sobre los
+/// píxeles cubiertos, por mitad. La rugosidad mete ruido de normal → ruido de sombreado
+/// → gradiente local alto; la superficie lisa lo tiene bajo.
+fn texture_halves(px: &[u8], cov: &[bool]) -> (f32, f32) {
+    let (mut sl, mut cl, mut sr, mut cr) = (0f64, 0u64, 0f64, 0u64);
+    for y in 0..H as usize - 1 {
+        for x in 0..W as usize - 1 {
+            let i = y * W as usize + x;
+            if !cov[i] || !cov[i + 1] || !cov[i + W as usize] {
+                continue;
+            }
+            let l = lum(px, i);
+            let grad = (l - lum(px, i + 1)).abs() + (l - lum(px, i + W as usize)).abs();
+            if x < W as usize / 2 {
+                sl += grad as f64;
+                cl += 1;
+            } else {
+                sr += grad as f64;
+                cr += 1;
+            }
+        }
+    }
+    ((sl / cl.max(1) as f64) as f32, (sr / cr.max(1) as f64) as f32)
+}
+
+fn render_pixels(hal: &Hal, renderer: &mut Renderer, vr: &mut VoxelRenderer, camera: &Camera3d) -> Vec<u8> {
+    let inter = hal.device.create_texture(&wgpu::TextureDescriptor {
+        label: Some("inter"),
+        size: wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+        mip_level_count: 1,
+        sample_count: 1,
+        dimension: wgpu::TextureDimension::D2,
+        format: FMT,
+        usage: wgpu::TextureUsages::STORAGE_BINDING
+            | wgpu::TextureUsages::TEXTURE_BINDING
+            | wgpu::TextureUsages::RENDER_ATTACHMENT
+            | wgpu::TextureUsages::COPY_SRC,
+        view_formats: &[],
+    });
+    let inter_view = inter.create_view(&wgpu::TextureViewDescriptor::default());
+
+    let base = vello::Scene::new();
+    renderer
+        .render_to_view(hal, &base, &inter_view, W, H, Color::from_rgba8(BG[0], BG[1], BG[2], 255))
+        .expect("render base");
+
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: Some("voxel-pass") });
+    vr.render(&hal.device, &hal.queue, &mut enc, &inter_view, (W, H), camera);
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+
+    readback(hal, &inter)
+}
+
+fn readback(hal: &Hal, target: &wgpu::Texture) -> Vec<u8> {
+    let unpadded = (W * 4) as usize;
+    let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize;
+    let padded = unpadded.div_ceil(align) * align;
+    let buf = hal.device.create_buffer(&wgpu::BufferDescriptor {
+        label: Some("readback"),
+        size: (padded * H as usize) as u64,
+        usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
+        mapped_at_creation: false,
+    });
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    enc.copy_texture_to_buffer(
+        wgpu::TexelCopyTextureInfo {
+            texture: target,
+            mip_level: 0,
+            origin: wgpu::Origin3d::ZERO,
+            aspect: wgpu::TextureAspect::All,
+        },
+        wgpu::TexelCopyBufferInfo {
+            buffer: &buf,
+            layout: wgpu::TexelCopyBufferLayout {
+                offset: 0,
+                bytes_per_row: Some(padded as u32),
+                rows_per_image: Some(H),
+            },
+        },
+        wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let slice = buf.slice(..);
+    let (tx, rx) = std::sync::mpsc::channel();
+    slice.map_async(wgpu::MapMode::Read, move |r| {
+        let _ = tx.send(r);
+    });
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    rx.recv().unwrap().unwrap();
+    let data = slice.get_mapped_range();
+    let mut pixels = Vec::with_capacity((W * H * 4) as usize);
+    for row in 0..H as usize {
+        let s = row * padded;
+        pixels.extend_from_slice(&data[s..s + unpadded]);
+    }
+    drop(data);
+    buf.unmap();
+    pixels
+}
+
+fn write_png(pixels: &[u8], path: &str) {
+    let file = File::create(path).expect("png");
+    let mut enc = png::Encoder::new(BufWriter::new(file), W, H);
+    enc.set_color(png::ColorType::Rgba);
+    enc.set_depth(png::BitDepth::Eight);
+    let mut w = enc.write_header().unwrap();
+    w.write_image_data(pixels).unwrap();
+}
diff --git a/llimphi-3d/examples/rugosidad_demo.rs b/llimphi-3d/examples/rugosidad_demo.rs
new file mode 100644
index 0000000..5688bd4
--- /dev/null
+++ b/llimphi-3d/examples/rugosidad_demo.rs
@@ -0,0 +1,264 @@
+//! Certificación headless del **spike de rugosidad sub-voxel** (bump procedural
+//! en el ray-march). Prueba, por STATS numéricas (regla 8), la tesis del diseño:
+//!
+//!   1. **La geometría/silueta NO cambia** — el conjunto de píxeles cubiertos es
+//!      idéntico con rugosidad off y on (la perturbación toca sólo la normal de
+//!      SOMBREADO, no el `t`/posición del hit). → `coverage_mismatch ≈ 0`.
+//!   2. **El sombreado deja de ser plano** — las caras axiales, que off producen
+//!      poquísimos niveles de luminancia (constante + gradiente de AO), on ganan
+//!      una micro-variación continua. → sube la "energía de textura" (|Δlum| entre
+//!      píxeles vecinos) y el nº de luminancias distintas, monótono con la amplitud.
+//!
+//! Corre un barrido de amplitud contra la línea base (amp=0) e imprime la tabla.
+//! Emite además `off.png` / `on.png` por si se quiere MIRAR una comparación (último
+//! recurso, no la evidencia primaria).
+//!
+//! `cargo run -p llimphi-3d --example rugosidad_demo --release -- [dim]`
+
+use std::fs::File;
+use std::io::BufWriter;
+
+use llimphi_3d::glam::Vec3;
+use llimphi_3d::{Camera3d, VoxelGrid, VoxelRenderer};
+use llimphi_hal::{wgpu, Hal};
+use llimphi_raster::peniko::Color;
+use llimphi_raster::{vello, Renderer};
+
+const W: u32 = 720;
+const H: u32 = 480;
+const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
+/// Color de limpieza del fondo (los misses hacen `discard` → queda este color).
+const BG: [u8; 3] = [18, 22, 32];
+
+fn main() {
+    let dim: u32 = std::env::args().nth(1).and_then(|s| s.parse().ok()).unwrap_or(96);
+    let d = dim as f32;
+
+    let hal = pollster::block_on(Hal::new(None)).expect("hal");
+    let mut renderer = Renderer::new(&hal).expect("renderer");
+
+    // Escena de fábrica: piso plano + esfera + pilares. El piso es la superficie
+    // ideal para exhibir rugosidad (cara superior grande y axial).
+    let grid = VoxelGrid::demo_scene([dim, dim, dim]);
+    let mut vr = VoxelRenderer::new(&hal.device, &hal.queue, FMT, &grid);
+    vr.rugosidad_freq = 1.6;
+
+    let camera = Camera3d::orbit(Vec3::ZERO, 35_f32.to_radians(), 24_f32.to_radians(), d * 1.7);
+
+    let amps = [0.0_f32, 0.4, 0.8, 1.2];
+    let mut frames: Vec<(f32, Vec<u8>)> = Vec::new();
+    for &amp in &amps {
+        vr.rugosidad_amp = amp;
+        frames.push((amp, render_pixels(&hal, &mut renderer, &mut vr, &camera)));
+    }
+
+    let base = &frames[0].1;
+    let base_cov = coverage(base);
+    let base_covered: usize = base_cov.iter().filter(|&&c| c).count();
+
+    println!("rugosidad_demo — dim={dim}³, freq={:.2}, {W}x{H}", vr.rugosidad_freq);
+    println!("píxeles cubiertos (silueta base): {base_covered}");
+    println!();
+    println!(
+        "{:>6} │ {:>10} │ {:>9} │ {:>9} │ {:>9} │ {:>8} │ {:>8}",
+        "amp", "cobertura", "cov.mism", "cambió%", "Δlum.med", "Δlum.máx", "textura"
+    );
+    println!("{:─<7}┼{:─<12}┼{:─<11}┼{:─<11}┼{:─<11}┼{:─<10}┼{:─<10}", "", "", "", "", "", "", "");
+
+    // (amp, cov_mismatch_pct, mean_delta_vs_base, texture_energy)
+    let mut stats: Vec<(f32, f32, f32, f32)> = Vec::new();
+    for (amp, px) in &frames {
+        let cov = coverage(px);
+        let covered: usize = cov.iter().filter(|&&c| c).count();
+        // Silueta: nº de píxeles cuya cobertura difiere de la base (debe ser ~0).
+        let cov_mismatch = cov.iter().zip(&base_cov).filter(|(a, b)| a != b).count();
+
+        // Sobre los píxeles cubiertos EN AMBOS: cuántos cambiaron de sombreado y
+        // cuánto (vs la base plana). `Δlum.med` es 0 por construcción en amp=0 →
+        // aísla LIMPIAMENTE el efecto de la rugosidad (a diferencia de `textura`,
+        // que ya arranca alto por el grano de color horneado en el albedo).
+        let mut changed = 0usize;
+        let mut sum_d = 0u64;
+        let mut max_d = 0u32;
+        let mut both = 0usize;
+        for i in 0..(W * H) as usize {
+            if cov[i] && base_cov[i] {
+                both += 1;
+                let d = (lum(px, i) as i32 - lum(base, i) as i32).unsigned_abs();
+                if d > 2 {
+                    changed += 1;
+                }
+                sum_d += d as u64;
+                max_d = max_d.max(d);
+            }
+        }
+        let changed_pct = 100.0 * changed as f32 / both.max(1) as f32;
+        let mean_d = sum_d as f32 / both.max(1) as f32;
+        let cov_mism_pct = 100.0 * cov_mismatch as f32 / base_covered.max(1) as f32;
+        // "Energía de textura": |Δlum| medio entre píxeles vecinos ambos cubiertos.
+        let tex = texture_energy(px, &cov);
+
+        println!(
+            "{amp:>6.2} │ {covered:>10} │ {cov_mismatch:>9} │ {changed_pct:>8.2}% │ {mean_d:>9.3} │ {max_d:>8} │ {tex:>8.3}"
+        );
+        stats.push((*amp, cov_mism_pct, mean_d, tex));
+    }
+
+    // Verificación dura (asserts):
+    //  1. La silueta NO se mueve — la geometría es idéntica off/on (bump toca sólo
+    //     la normal de sombreado). Tolerancia mínima por bordes sin antialias.
+    //  2. El sombreado cambia de verdad en la mayoría de la superficie (Δlum vs base
+    //     >> 0), y ese cambio crece MONÓTONO con la amplitud (es la amplitud quien
+    //     lo maneja, no ruido). `Δlum.med` y `textura` deben ambos subir en cada paso.
+    println!();
+    let (_, mism_pct, mean_d_last, _) = *stats.last().unwrap();
+    println!("silueta: mismatch amp_max vs base = {mism_pct:.3}% de la cobertura");
+    println!(
+        "efecto (Δlum.med vs base): {}",
+        stats.iter().map(|s| format!("{:.2}", s.2)).collect::<Vec<_>>().join(" → ")
+    );
+    println!(
+        "textura (|Δlum| vecinos): {}",
+        stats.iter().map(|s| format!("{:.2}", s.3)).collect::<Vec<_>>().join(" → ")
+    );
+    assert!(mism_pct < 0.5, "la silueta cambió demasiado: {mism_pct:.3}% (la geometría NO debía moverse)");
+    assert!(mean_d_last > 3.0, "la rugosidad casi no cambió el sombreado (Δlum.med={mean_d_last:.3})");
+    for w in stats.windows(2) {
+        assert!(w[1].2 > w[0].2, "Δlum.med no crece con la amplitud: {:.3} → {:.3}", w[0].2, w[1].2);
+        assert!(w[1].3 > w[0].3, "textura no crece con la amplitud: {:.3} → {:.3}", w[0].3, w[1].3);
+    }
+
+    // PNGs comparativos (último recurso, opcional de mirar).
+    let dir = std::env::var("CLAUDE_JOB_DIR").map(|d| format!("{d}/tmp")).unwrap_or("/tmp".into());
+    write_png(&frames[0].1, &format!("{dir}/rugosidad_off.png"));
+    write_png(&frames.last().unwrap().1, &format!("{dir}/rugosidad_on.png"));
+    println!();
+    println!("PNG comparativo: {dir}/rugosidad_off.png  vs  {dir}/rugosidad_on.png");
+    println!("✓ certificado: geometría intacta + sombreado ya no plano.");
+}
+
+/// Luminancia Rec.709 (byte) del píxel `i`.
+fn lum(px: &[u8], i: usize) -> u8 {
+    let o = i * 4;
+    (0.2126 * px[o] as f32 + 0.7152 * px[o + 1] as f32 + 0.0722 * px[o + 2] as f32) as u8
+}
+
+/// Máscara de cobertura: píxel != fondo (con tolerancia). El fondo es el color de
+/// limpieza; un voxel golpeado nunca cae exactamente ahí.
+fn coverage(px: &[u8]) -> Vec<bool> {
+    (0..(W * H) as usize)
+        .map(|i| {
+            let o = i * 4;
+            let dr = (px[o] as i32 - BG[0] as i32).abs();
+            let dg = (px[o + 1] as i32 - BG[1] as i32).abs();
+            let db = (px[o + 2] as i32 - BG[2] as i32).abs();
+            dr + dg + db > 12
+        })
+        .collect()
+}
+
+/// Energía de micro-textura: |Δlum| medio entre píxeles horizontalmente vecinos
+/// ambos cubiertos. Mide cuánto varía la superficie (plana ≈ 0).
+fn texture_energy(px: &[u8], cov: &[bool]) -> f32 {
+    let mut sum = 0u64;
+    let mut n = 0u64;
+    for y in 0..H as usize {
+        for x in 0..(W as usize - 1) {
+            let i = y * W as usize + x;
+            if cov[i] && cov[i + 1] {
+                sum += (lum(px, i) as i32 - lum(px, i + 1) as i32).unsigned_abs() as u64;
+                n += 1;
+            }
+        }
+    }
+    sum as f32 / n.max(1) as f32
+}
+
+fn render_pixels(hal: &Hal, renderer: &mut Renderer, vr: &mut VoxelRenderer, camera: &Camera3d) -> Vec<u8> {
+    let inter = hal.device.create_texture(&wgpu::TextureDescriptor {
+        label: Some("inter"),
+        size: wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+        mip_level_count: 1,
+        sample_count: 1,
+        dimension: wgpu::TextureDimension::D2,
+        format: FMT,
+        usage: wgpu::TextureUsages::STORAGE_BINDING
+            | wgpu::TextureUsages::TEXTURE_BINDING
+            | wgpu::TextureUsages::RENDER_ATTACHMENT
+            | wgpu::TextureUsages::COPY_SRC,
+        view_formats: &[],
+    });
+    let inter_view = inter.create_view(&wgpu::TextureViewDescriptor::default());
+
+    let base = vello::Scene::new();
+    renderer
+        .render_to_view(hal, &base, &inter_view, W, H, Color::from_rgba8(BG[0], BG[1], BG[2], 255))
+        .expect("render base");
+
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: Some("voxel-pass") });
+    vr.render(&hal.device, &hal.queue, &mut enc, &inter_view, (W, H), camera);
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+
+    readback(hal, &inter)
+}
+
+fn readback(hal: &Hal, target: &wgpu::Texture) -> Vec<u8> {
+    let unpadded = (W * 4) as usize;
+    let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize;
+    let padded = unpadded.div_ceil(align) * align;
+    let buf = hal.device.create_buffer(&wgpu::BufferDescriptor {
+        label: Some("readback"),
+        size: (padded * H as usize) as u64,
+        usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
+        mapped_at_creation: false,
+    });
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    enc.copy_texture_to_buffer(
+        wgpu::TexelCopyTextureInfo {
+            texture: target,
+            mip_level: 0,
+            origin: wgpu::Origin3d::ZERO,
+            aspect: wgpu::TextureAspect::All,
+        },
+        wgpu::TexelCopyBufferInfo {
+            buffer: &buf,
+            layout: wgpu::TexelCopyBufferLayout {
+                offset: 0,
+                bytes_per_row: Some(padded as u32),
+                rows_per_image: Some(H),
+            },
+        },
+        wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let slice = buf.slice(..);
+    let (tx, rx) = std::sync::mpsc::channel();
+    slice.map_async(wgpu::MapMode::Read, move |r| {
+        let _ = tx.send(r);
+    });
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    rx.recv().unwrap().unwrap();
+    let data = slice.get_mapped_range();
+    let mut pixels = Vec::with_capacity((W * H * 4) as usize);
+    for row in 0..H as usize {
+        let s = row * padded;
+        pixels.extend_from_slice(&data[s..s + unpadded]);
+    }
+    drop(data);
+    buf.unmap();
+    pixels
+}
+
+fn write_png(pixels: &[u8], path: &str) {
+    let file = File::create(path).expect("png");
+    let mut enc = png::Encoder::new(BufWriter::new(file), W, H);
+    enc.set_color(png::ColorType::Rgba);
+    enc.set_depth(png::BitDepth::Eight);
+    let mut w = enc.write_header().unwrap();
+    w.write_image_data(pixels).unwrap();
+}
diff --git a/llimphi-3d/examples/silueta_por_voxel.rs b/llimphi-3d/examples/silueta_por_voxel.rs
new file mode 100644
index 0000000..798f88d
--- /dev/null
+++ b/llimphi-3d/examples/silueta_por_voxel.rs
@@ -0,0 +1,289 @@
+//! Certificación headless de la **SILUETA sub-voxel POR MATERIAL** (cierra el gap
+//! "honesto" que quedaba del canal por voxel: `trace_smooth` trazaba la isosuperficie
+//! GLOBAL, así que el `bisel` por voxel sólo cambiaba la NORMAL de sombreado, no el
+//! CONTORNO — dos materiales no podían tener siluetas distintas en un frame).
+//!
+//! Con `VoxelRenderer::silueta_por_voxel`, el CAMPO mismo mezcla escalón↔trilineal
+//! según el `bisel` del material sólido cercano: un material duro (bisel 0) conserva la
+//! silueta axial/blocky, uno liso (bisel 1) la redondea. En el MISMO frame.
+//!
+//! Escena: DOS domos (paraboloides) lado a lado. El izquierdo se marca DURO (bisel 0
+//! por voxel), el derecho LISO (bisel 1 por voxel). Se rinde dos veces con el MISMO
+//! `bisel` global (1 → `trace_smooth` activo):
+//!   - **OFF** (`silueta_por_voxel=false`): el campo es trilineal para ambos → los dos
+//!     domos salen con silueta redondeada (idénticos en contorno).
+//!   - **ON**: el izquierdo se vuelve blocky (silueta en las caras del voxel), el
+//!     derecho sigue redondeado (su `s=1` cae al fast-path trilineal, byte-idéntico).
+//!
+//! Se certifica por STATS (regla 8): el cambio de COBERTURA (silueta) OFF→ON, por mitad
+//! de pantalla. La mitad IZQUIERDA (dura) mueve su contorno mucho; la DERECHA (lisa) no
+//! cambia (mismo campo trilineal) → la silueta por material es real y AISLADA.
+//!
+//! `cargo run -p llimphi-3d --example silueta_por_voxel --release -- [dim]`
+
+use std::fs::File;
+use std::io::BufWriter;
+
+use llimphi_3d::glam::Vec3;
+use llimphi_3d::{Camera3d, VoxelGrid, VoxelRenderer};
+use llimphi_hal::{wgpu, Hal};
+use llimphi_raster::peniko::Color;
+use llimphi_raster::{vello, Renderer};
+
+const W: u32 = 720;
+const H: u32 = 480;
+const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
+const BG: [u8; 3] = [18, 22, 32];
+
+fn main() {
+    let dim: u32 = std::env::args().nth(1).and_then(|s| s.parse().ok()).unwrap_or(120);
+
+    let hal = pollster::block_on(Hal::new(None)).expect("hal");
+    let mut renderer = Renderer::new(&hal).expect("renderer");
+
+    // Cámara de frente (yaw 0): X del mundo → X de pantalla (izq/der no se cruzan).
+    let d = dim as f32;
+    let camera = Camera3d::orbit(Vec3::ZERO, 0_f32.to_radians(), 26_f32.to_radians(), d * 1.6);
+
+    // Global fijo: bisel global ON (enciende trace_smooth = la isosuperficie que la
+    // silueta por voxel necesita); sin rugosidad (aislar la geometría, no el sombreado).
+    let setup = |vr: &mut VoxelRenderer| {
+        vr.rugosidad_amp = 0.0;
+        vr.bisel = 1.0;
+    };
+
+    // MISMA escena (izq duro / der liso, por voxel) en ambas pasadas; sólo cambia el flag.
+    let grid = two_domes(dim);
+    let mut vr = VoxelRenderer::new(&hal.device, &hal.queue, FMT, &grid);
+    setup(&mut vr);
+
+    vr.silueta_por_voxel = false;
+    let off = render_pixels(&hal, &mut renderer, &mut vr, &camera);
+    vr.silueta_por_voxel = true;
+    let on = render_pixels(&hal, &mut renderer, &mut vr, &camera);
+
+    let dir = std::env::var("CLAUDE_JOB_DIR").map(|d| format!("{d}/tmp")).unwrap_or("/tmp".into());
+    write_png(&off, &format!("{dir}/silueta_off.png"));
+    write_png(&on, &format!("{dir}/silueta_on.png"));
+
+    let cov_off = coverage(&off);
+    let cov_on = coverage(&on);
+
+    // Cobertura por mitad (cuántos píxeles pinta cada domo) y cuánto CAMBIÓ el contorno.
+    let (n_off_l, n_off_r) = count_halves(&cov_off);
+    let (n_on_l, n_on_r) = count_halves(&cov_on);
+    let (chg_l, chg_r) = changed_halves(&cov_off, &cov_on);
+    // Fracción del contorno que se movió, relativa a la cobertura del domo de esa mitad.
+    let frac_l = 100.0 * chg_l as f32 / n_off_l.max(1) as f32;
+    let frac_r = 100.0 * chg_r as f32 / n_off_r.max(1) as f32;
+
+    println!("silueta_por_voxel — dim={dim}³, {W}x{H} (izq DURO / der LISO, un frame)");
+    println!();
+    println!("{:>10} │ {:>12} │ {:>12}", "pasada", "cobertura izq", "cobertura der");
+    println!("{:─<11}┼{:─<14}┼{:─<14}", "", "", "");
+    println!("{:>10} │ {:>12} │ {:>12}", "OFF", n_off_l, n_off_r);
+    println!("{:>10} │ {:>12} │ {:>12}", "ON", n_on_l, n_on_r);
+    println!();
+    println!("píxeles de silueta que CAMBIARON OFF→ON:  izq {chg_l} ({frac_l:.1}%)   der {chg_r} ({frac_r:.1}%)");
+    println!("PNG: {dir}/silueta_off.png  vs  {dir}/silueta_on.png");
+    println!();
+
+    // El bisel sub-voxel mueve la silueta ~½ voxel: la banda que cambia es fina (fila de
+    // contorno), no un bloque. Lo contundente es la ASIMETRÍA y el aislamiento perfecto.
+
+    // 1. La mitad DERECHA (lisa) NO cambia: su `s=1` cae al fast-path trilineal → campo
+    //    byte-idéntico OFF/ON. Prueba que el efecto es por-material, no global.
+    assert!(frac_r < 0.3, "la mitad lisa cambió su silueta ({frac_r:.1}%) — debería ser ~0 (mismo campo trilineal)");
+
+    // 2. La mitad IZQUIERDA (dura) mueve el contorno: la silueta pasó de redondeada
+    //    (isosuperficie) a blocky (caras del voxel).
+    assert!(chg_l > 120, "la mitad dura casi no movió su silueta ({chg_l} px) — el flag no hizo efecto");
+
+    // 3. El efecto está AISLADO por material: la banda dura supera con creces a la lisa.
+    assert!(chg_l > chg_r * 8 + 60, "la silueta dura no se aisló de la lisa (izq {chg_l} px vs der {chg_r} px)");
+
+    println!("✓ certificado: en UN frame, el material duro conserva silueta blocky y el liso");
+    println!("  la redondea. El contorno se movió sólo en la mitad dura ({chg_l} px vs {chg_r} px, aislado).");
+}
+
+/// Dos CAJAS (prismas) lado a lado + piso. La izquierda se marca DURA (bisel 0 por
+/// voxel), la derecha LISA (bisel 1). Las aristas de una caja se biselan a lo largo de
+/// TODA su longitud → el bisel/silueta mueve el contorno en una banda alta (mucho más
+/// que un domo). El piso queda sin autor (look global).
+fn two_domes(dim: u32) -> VoxelGrid {
+    let gx = dim;
+    let gy = (dim as f32 * 0.78) as u32;
+    let gz = dim;
+    let mut g = VoxelGrid::new([gx, gy, gz]);
+    let base = 2u32;
+    let half = gx as f32 * 0.15; // semilado de la caja
+    let box_top = base + (gy as f32 * 0.66) as u32;
+    let cajas = [
+        (gx as f32 * 0.30, gz as f32 * 0.5, true),  // izquierda → dura
+        (gx as f32 * 0.70, gz as f32 * 0.5, false), // derecha → lisa
+    ];
+    for z in 0..gz {
+        for x in 0..gx {
+            let mut dentro = false;
+            let mut es_izq = true;
+            for &(cx, cz, izq) in &cajas {
+                if (x as f32 - cx).abs() <= half && (z as f32 - cz).abs() <= half {
+                    dentro = true;
+                    es_izq = izq;
+                    break;
+                }
+            }
+            if !dentro {
+                continue;
+            }
+            let top = box_top.min(gy - 1);
+            for y in 0..=top {
+                let t = (y as f32 / gy as f32 * 160.0) as u8;
+                g.set(x, y, z, [130 + t / 3, 120 + t / 4, 95]);
+                if es_izq {
+                    g.set_detail(x, y, z, 0.0, 0.0); // DURA: bisel 0 (autorado)
+                } else {
+                    g.set_detail(x, y, z, 0.0, 1.0); // LISA: bisel 1
+                }
+            }
+        }
+    }
+    g.reset_dirty();
+    g
+}
+
+fn coverage(px: &[u8]) -> Vec<bool> {
+    (0..(W * H) as usize)
+        .map(|i| {
+            let o = i * 4;
+            let dr = (px[o] as i32 - BG[0] as i32).abs();
+            let dg = (px[o + 1] as i32 - BG[1] as i32).abs();
+            let db = (px[o + 2] as i32 - BG[2] as i32).abs();
+            dr + dg + db > 12
+        })
+        .collect()
+}
+
+/// Píxeles cubiertos por mitad de pantalla (izq = x < W/2).
+fn count_halves(cov: &[bool]) -> (u64, u64) {
+    let (mut l, mut r) = (0u64, 0u64);
+    for y in 0..H as usize {
+        for x in 0..W as usize {
+            if cov[y * W as usize + x] {
+                if x < W as usize / 2 {
+                    l += 1;
+                } else {
+                    r += 1;
+                }
+            }
+        }
+    }
+    (l, r)
+}
+
+/// Píxeles cuya cobertura CAMBIÓ entre dos pasadas (silueta que se movió), por mitad.
+fn changed_halves(a: &[bool], b: &[bool]) -> (u64, u64) {
+    let (mut l, mut r) = (0u64, 0u64);
+    for y in 0..H as usize {
+        for x in 0..W as usize {
+            let i = y * W as usize + x;
+            if a[i] != b[i] {
+                if x < W as usize / 2 {
+                    l += 1;
+                } else {
+                    r += 1;
+                }
+            }
+        }
+    }
+    (l, r)
+}
+
+fn render_pixels(hal: &Hal, renderer: &mut Renderer, vr: &mut VoxelRenderer, camera: &Camera3d) -> Vec<u8> {
+    let inter = hal.device.create_texture(&wgpu::TextureDescriptor {
+        label: Some("inter"),
+        size: wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+        mip_level_count: 1,
+        sample_count: 1,
+        dimension: wgpu::TextureDimension::D2,
+        format: FMT,
+        usage: wgpu::TextureUsages::STORAGE_BINDING
+            | wgpu::TextureUsages::TEXTURE_BINDING
+            | wgpu::TextureUsages::RENDER_ATTACHMENT
+            | wgpu::TextureUsages::COPY_SRC,
+        view_formats: &[],
+    });
+    let inter_view = inter.create_view(&wgpu::TextureViewDescriptor::default());
+
+    let base = vello::Scene::new();
+    renderer
+        .render_to_view(hal, &base, &inter_view, W, H, Color::from_rgba8(BG[0], BG[1], BG[2], 255))
+        .expect("render base");
+
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: Some("voxel-pass") });
+    vr.render(&hal.device, &hal.queue, &mut enc, &inter_view, (W, H), camera);
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+
+    readback(hal, &inter)
+}
+
+fn readback(hal: &Hal, target: &wgpu::Texture) -> Vec<u8> {
+    let unpadded = (W * 4) as usize;
+    let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize;
+    let padded = unpadded.div_ceil(align) * align;
+    let buf = hal.device.create_buffer(&wgpu::BufferDescriptor {
+        label: Some("readback"),
+        size: (padded * H as usize) as u64,
+        usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
+        mapped_at_creation: false,
+    });
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    enc.copy_texture_to_buffer(
+        wgpu::TexelCopyTextureInfo {
+            texture: target,
+            mip_level: 0,
+            origin: wgpu::Origin3d::ZERO,
+            aspect: wgpu::TextureAspect::All,
+        },
+        wgpu::TexelCopyBufferInfo {
+            buffer: &buf,
+            layout: wgpu::TexelCopyBufferLayout {
+                offset: 0,
+                bytes_per_row: Some(padded as u32),
+                rows_per_image: Some(H),
+            },
+        },
+        wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let slice = buf.slice(..);
+    let (tx, rx) = std::sync::mpsc::channel();
+    slice.map_async(wgpu::MapMode::Read, move |r| {
+        let _ = tx.send(r);
+    });
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    rx.recv().unwrap().unwrap();
+    let data = slice.get_mapped_range();
+    let mut pixels = Vec::with_capacity((W * H * 4) as usize);
+    for row in 0..H as usize {
+        let s = row * padded;
+        pixels.extend_from_slice(&data[s..s + unpadded]);
+    }
+    drop(data);
+    buf.unmap();
+    pixels
+}
+
+fn write_png(pixels: &[u8], path: &str) {
+    let file = File::create(path).expect("png");
+    let mut enc = png::Encoder::new(BufWriter::new(file), W, H);
+    enc.set_color(png::ColorType::Rgba);
+    enc.set_depth(png::BitDepth::Eight);
+    let mut w = enc.write_header().unwrap();
+    w.write_image_data(pixels).unwrap();
+}
diff --git a/llimphi-3d/src/billboard.rs b/llimphi-3d/src/billboard.rs
index 0fbeac7..e36c450 100644
--- a/llimphi-3d/src/billboard.rs
+++ b/llimphi-3d/src/billboard.rs
@@ -5,7 +5,7 @@
 //!
 //! Cosechado de los sprites 2.5D de Doom (`supay-render-llimphi::wgpu3d`), donde
 //! los quads se armaban en CPU y estaban atados al `WadAtlas`/tabla de tintes.
-//! Acá la forma es agnóstica: un **atlas** (una textura) + una lista de
+//! Aquí la forma es agnóstica: un **atlas** (una textura) + una lista de
 //! [`Billboard`] con su sub-rect UV, tamaño en mundo y tinte. El quad de cara a
 //! la cámara lo arma el vertex shader con los ejes `right`/`up` de la cámara, así
 //! no hay reconstrucción por CPU cada frame.
@@ -42,9 +42,9 @@ impl Billboard {
     /// Floats por instancia en el buffer (`center`3 + `size`2 + `uv_min`2 +
     /// `uv_max`2 + `tint`4).
     const FLOATS: usize = 3 + 2 + 2 + 2 + 4;
-    const STRIDE: usize = Self::FLOATS * 4;
+    pub(crate) const STRIDE: usize = Self::FLOATS * 4;
 
-    fn write_to(&self, out: &mut Vec<u8>) {
+    pub(crate) fn write_to(&self, out: &mut Vec<u8>) {
         for v in self.center {
             out.extend_from_slice(&v.to_ne_bytes());
         }
@@ -286,7 +286,7 @@ impl Billboards {
 
     /// Reemplaza la lista de billboards (recrea el buffer de instancias). El
     /// orden importa para el z-fight de alpha-discard: poná los más cercanos
-    /// primero si querés (con depth-write el primero gana). Idealmente el caller
+    /// primero si quieres (con depth-write el primero gana). Idealmente el caller
     /// los ordena back-to-front.
     pub fn set_billboards(&mut self, device: &wgpu::Device, items: &[Billboard]) {
         self.count = items.len() as u32;
diff --git a/llimphi-3d/src/cinema.rs b/llimphi-3d/src/cinema.rs
index 802b740..39e5165 100644
--- a/llimphi-3d/src/cinema.rs
+++ b/llimphi-3d/src/cinema.rs
@@ -6,7 +6,7 @@
 //!
 //! Es genérico del motor 3D (no sabe de voxels ni de juegos): cualquier app que
 //! quiera una cámara animada lo usa. La *dirección* de actores/eventos vive en
-//! la capa de contenido (la app), no acá.
+//! la capa de contenido (la app), no aquí.
 
 use glam::Vec3;
 
diff --git a/llimphi-3d/src/glow.rs b/llimphi-3d/src/glow.rs
new file mode 100644
index 0000000..29a1905
--- /dev/null
+++ b/llimphi-3d/src/glow.rs
@@ -0,0 +1,378 @@
+//! `Glows` — billboards **aditivos**: como [`Billboards`](crate::Billboards)
+//! (quads de cara a la cámara desde un atlas) pero con **blend aditivo**, sin
+//! escribir profundidad y **sin recorte de alpha** — para halos suaves y
+//! luminosos: estrellas que brillan, atmósferas, auras de cuerpos, glows que el
+//! bloom de [`PostFx`](crate::PostFx) infla. El `Billboards` opaco recorta el
+//! borde (disco nítido); éste suma luz (sin borde, se funde).
+//!
+//! Comparte el tipo de instancia [`Billboard`](crate::Billboard). Se dibuja en
+//! un pase con depth attachment, **después** de la geometría opaca (así el mundo
+//! sólido ocluye los glows que quedan detrás; los de adelante suman luz):
+//!
+//! ```ignore
+//! let mut g = Glows::new(&device, fmt);
+//! g.set_atlas(&device, &queue, w, h, &soft_radial_rgba);
+//! g.set_glows(&device, &[Billboard { .. }]);
+//! g.upload(&queue, aspect, &camera);
+//! g.draw(&mut pass);
+//! ```
+
+use crate::billboard::Billboard;
+use crate::camera::Camera3d;
+use crate::scene::DEPTH_FORMAT;
+
+struct Atlas {
+    bind_group: wgpu::BindGroup,
+}
+
+/// Renderer de glows aditivos. Misma plomería que `Billboards`, distinto blend.
+pub struct Glows {
+    pipeline: wgpu::RenderPipeline,
+    uniform_buf: wgpu::Buffer,
+    uniform_bg: wgpu::BindGroup,
+    tex_layout: wgpu::BindGroupLayout,
+    sampler: wgpu::Sampler,
+    atlas: Option<Atlas>,
+    instances: Option<wgpu::Buffer>,
+    count: u32,
+}
+
+impl Glows {
+    pub fn new(device: &wgpu::Device, color_format: wgpu::TextureFormat) -> Self {
+        let uniform_layout = device.create_bind_group_layout(&wgpu::BindGroupLayoutDescriptor {
+            label: Some("llimphi-3d-glow-uniform-layout"),
+            entries: &[wgpu::BindGroupLayoutEntry {
+                binding: 0,
+                visibility: wgpu::ShaderStages::VERTEX,
+                ty: wgpu::BindingType::Buffer {
+                    ty: wgpu::BufferBindingType::Uniform,
+                    has_dynamic_offset: false,
+                    min_binding_size: None,
+                },
+                count: None,
+            }],
+        });
+        let tex_layout = device.create_bind_group_layout(&wgpu::BindGroupLayoutDescriptor {
+            label: Some("llimphi-3d-glow-tex-layout"),
+            entries: &[
+                wgpu::BindGroupLayoutEntry {
+                    binding: 0,
+                    visibility: wgpu::ShaderStages::FRAGMENT,
+                    ty: wgpu::BindingType::Texture {
+                        sample_type: wgpu::TextureSampleType::Float { filterable: true },
+                        view_dimension: wgpu::TextureViewDimension::D2,
+                        multisampled: false,
+                    },
+                    count: None,
+                },
+                wgpu::BindGroupLayoutEntry {
+                    binding: 1,
+                    visibility: wgpu::ShaderStages::FRAGMENT,
+                    ty: wgpu::BindingType::Sampler(wgpu::SamplerBindingType::Filtering),
+                    count: None,
+                },
+            ],
+        });
+        let shader = device.create_shader_module(wgpu::ShaderModuleDescriptor {
+            label: Some("llimphi-3d-glow-shader"),
+            source: wgpu::ShaderSource::Wgsl(GLOW_WGSL.into()),
+        });
+        let pl = device.create_pipeline_layout(&wgpu::PipelineLayoutDescriptor {
+            label: Some("llimphi-3d-glow-pl"),
+            bind_group_layouts: &[&uniform_layout, &tex_layout],
+            push_constant_ranges: &[],
+        });
+        // Blend aditivo: la luz se suma al fondo (src*1 + dst*1).
+        let additive = wgpu::BlendState {
+            color: wgpu::BlendComponent {
+                src_factor: wgpu::BlendFactor::One,
+                dst_factor: wgpu::BlendFactor::One,
+                operation: wgpu::BlendOperation::Add,
+            },
+            alpha: wgpu::BlendComponent {
+                src_factor: wgpu::BlendFactor::One,
+                dst_factor: wgpu::BlendFactor::One,
+                operation: wgpu::BlendOperation::Add,
+            },
+        };
+        let pipeline = device.create_render_pipeline(&wgpu::RenderPipelineDescriptor {
+            label: Some("llimphi-3d-glow-pipeline"),
+            layout: Some(&pl),
+            vertex: wgpu::VertexState {
+                module: &shader,
+                entry_point: Some("vs"),
+                compilation_options: Default::default(),
+                buffers: &[wgpu::VertexBufferLayout {
+                    array_stride: Billboard::STRIDE as u64,
+                    step_mode: wgpu::VertexStepMode::Instance,
+                    attributes: &[
+                        wgpu::VertexAttribute {
+                            format: wgpu::VertexFormat::Float32x3,
+                            offset: 0,
+                            shader_location: 0,
+                        },
+                        wgpu::VertexAttribute {
+                            format: wgpu::VertexFormat::Float32x2,
+                            offset: 12,
+                            shader_location: 1,
+                        },
+                        wgpu::VertexAttribute {
+                            format: wgpu::VertexFormat::Float32x2,
+                            offset: 20,
+                            shader_location: 2,
+                        },
+                        wgpu::VertexAttribute {
+                            format: wgpu::VertexFormat::Float32x2,
+                            offset: 28,
+                            shader_location: 3,
+                        },
+                        wgpu::VertexAttribute {
+                            format: wgpu::VertexFormat::Float32x4,
+                            offset: 36,
+                            shader_location: 4,
+                        },
+                    ],
+                }],
+            },
+            primitive: wgpu::PrimitiveState {
+                cull_mode: None,
+                ..Default::default()
+            },
+            depth_stencil: Some(wgpu::DepthStencilState {
+                format: DEPTH_FORMAT,
+                depth_write_enabled: false,
+                depth_compare: wgpu::CompareFunction::LessEqual,
+                stencil: Default::default(),
+                bias: Default::default(),
+            }),
+            multisample: Default::default(),
+            fragment: Some(wgpu::FragmentState {
+                module: &shader,
+                entry_point: Some("fs"),
+                compilation_options: Default::default(),
+                targets: &[Some(wgpu::ColorTargetState {
+                    format: color_format,
+                    blend: Some(additive),
+                    write_mask: wgpu::ColorWrites::ALL,
+                })],
+            }),
+            multiview: None,
+            cache: None,
+        });
+        let uniform_buf = device.create_buffer(&wgpu::BufferDescriptor {
+            label: Some("llimphi-3d-glow-uniform"),
+            size: 96, // view_proj(64) + right(16) + up(16)
+            usage: wgpu::BufferUsages::UNIFORM | wgpu::BufferUsages::COPY_DST,
+            mapped_at_creation: false,
+        });
+        let uniform_bg = device.create_bind_group(&wgpu::BindGroupDescriptor {
+            label: Some("llimphi-3d-glow-uniform-bg"),
+            layout: &uniform_layout,
+            entries: &[wgpu::BindGroupEntry {
+                binding: 0,
+                resource: uniform_buf.as_entire_binding(),
+            }],
+        });
+        let sampler = device.create_sampler(&wgpu::SamplerDescriptor {
+            label: Some("llimphi-3d-glow-sampler"),
+            address_mode_u: wgpu::AddressMode::ClampToEdge,
+            address_mode_v: wgpu::AddressMode::ClampToEdge,
+            address_mode_w: wgpu::AddressMode::ClampToEdge,
+            mag_filter: wgpu::FilterMode::Linear,
+            min_filter: wgpu::FilterMode::Linear,
+            mipmap_filter: wgpu::FilterMode::Nearest,
+            ..Default::default()
+        });
+        Self {
+            pipeline,
+            uniform_buf,
+            uniform_bg,
+            tex_layout,
+            sampler,
+            atlas: None,
+            instances: None,
+            count: 0,
+        }
+    }
+
+    /// Sube/reemplaza el atlas (RGBA8, `w×h`). Para glows conviene un degradé
+    /// radial suave (gaussiano), sin núcleo duro.
+    pub fn set_atlas(
+        &mut self,
+        device: &wgpu::Device,
+        queue: &wgpu::Queue,
+        w: u32,
+        h: u32,
+        data: &[u8],
+    ) {
+        assert_eq!(data.len(), (w * h * 4) as usize, "RGBA8 w*h*4 esperado");
+        let tex = device.create_texture(&wgpu::TextureDescriptor {
+            label: Some("llimphi-3d-glow-atlas"),
+            size: wgpu::Extent3d { width: w, height: h, depth_or_array_layers: 1 },
+            mip_level_count: 1,
+            sample_count: 1,
+            dimension: wgpu::TextureDimension::D2,
+            format: wgpu::TextureFormat::Rgba8Unorm,
+            usage: wgpu::TextureUsages::TEXTURE_BINDING | wgpu::TextureUsages::COPY_DST,
+            view_formats: &[],
+        });
+        queue.write_texture(
+            wgpu::TexelCopyTextureInfo {
+                texture: &tex,
+                mip_level: 0,
+                origin: wgpu::Origin3d::ZERO,
+                aspect: wgpu::TextureAspect::All,
+            },
+            data,
+            wgpu::TexelCopyBufferLayout {
+                offset: 0,
+                bytes_per_row: Some(w * 4),
+                rows_per_image: Some(h),
+            },
+            wgpu::Extent3d { width: w, height: h, depth_or_array_layers: 1 },
+        );
+        let view = tex.create_view(&Default::default());
+        let bind_group = device.create_bind_group(&wgpu::BindGroupDescriptor {
+            label: Some("llimphi-3d-glow-atlas-bg"),
+            layout: &self.tex_layout,
+            entries: &[
+                wgpu::BindGroupEntry {
+                    binding: 0,
+                    resource: wgpu::BindingResource::TextureView(&view),
+                },
+                wgpu::BindGroupEntry {
+                    binding: 1,
+                    resource: wgpu::BindingResource::Sampler(&self.sampler),
+                },
+            ],
+        });
+        self.atlas = Some(Atlas { bind_group });
+    }
+
+    /// Reemplaza la lista de glows (recrea el buffer de instancias). Con blend
+    /// aditivo el orden no importa (la suma es conmutativa).
+    pub fn set_glows(&mut self, device: &wgpu::Device, items: &[Billboard]) {
+        self.count = items.len() as u32;
+        if items.is_empty() {
+            self.instances = None;
+            return;
+        }
+        let mut bytes = Vec::with_capacity(items.len() * Billboard::STRIDE);
+        for b in items {
+            b.write_to(&mut bytes);
+        }
+        let buf = device.create_buffer(&wgpu::BufferDescriptor {
+            label: Some("llimphi-3d-glow-instances"),
+            size: bytes.len() as u64,
+            usage: wgpu::BufferUsages::VERTEX,
+            mapped_at_creation: true,
+        });
+        buf.slice(..).get_mapped_range_mut().copy_from_slice(&bytes);
+        buf.unmap();
+        self.instances = Some(buf);
+    }
+
+    /// Sube el uniform del frame: `view_proj` + ejes `right`/`up` de la cámara.
+    pub fn upload(&self, queue: &wgpu::Queue, aspect: f32, camera: &Camera3d) {
+        let view_proj = camera.view_proj(aspect);
+        let forward = (camera.target - camera.eye).normalize_or_zero();
+        let right = forward.cross(camera.up).normalize_or_zero();
+        let up = right.cross(forward);
+        let mut b = Vec::with_capacity(96);
+        for v in view_proj.to_cols_array() {
+            b.extend_from_slice(&v.to_ne_bytes());
+        }
+        for v in [right.x, right.y, right.z, 0.0] {
+            b.extend_from_slice(&v.to_ne_bytes());
+        }
+        for v in [up.x, up.y, up.z, 0.0] {
+            b.extend_from_slice(&v.to_ne_bytes());
+        }
+        queue.write_buffer(&self.uniform_buf, 0, &b);
+    }
+
+    /// Dibuja los glows en un pase ya abierto (con depth). No-op si falta algo.
+    pub fn draw<'a>(&'a self, pass: &mut wgpu::RenderPass<'a>) {
+        let (Some(atlas), Some(inst)) = (self.atlas.as_ref(), self.instances.as_ref()) else {
+            return;
+        };
+        if self.count == 0 {
+            return;
+        }
+        pass.set_pipeline(&self.pipeline);
+        pass.set_bind_group(0, &self.uniform_bg, &[]);
+        pass.set_bind_group(1, &atlas.bind_group, &[]);
+        pass.set_vertex_buffer(0, inst.slice(..));
+        pass.draw(0..6, 0..self.count);
+    }
+}
+
+/// Quad de cara a la cámara; el fragment SUMA luz (sin discard). La salida es
+/// premultiplicada (`rgb*a`) para que el blend aditivo dé un halo suave.
+const GLOW_WGSL: &str = r#"
+struct U {
+    view_proj: mat4x4<f32>,
+    right: vec4<f32>,
+    up: vec4<f32>,
+};
+@group(0) @binding(0) var<uniform> u: U;
+@group(1) @binding(0) var tex: texture_2d<f32>;
+@group(1) @binding(1) var samp: sampler;
+
+struct VIn {
+    @location(0) center: vec3<f32>,
+    @location(1) size: vec2<f32>,
+    @location(2) uv_min: vec2<f32>,
+    @location(3) uv_max: vec2<f32>,
+    @location(4) tint: vec4<f32>,
+};
+struct VOut {
+    @builtin(position) clip: vec4<f32>,
+    @location(0) uv: vec2<f32>,
+    @location(1) tint: vec4<f32>,
+};
+
+@vertex
+fn vs(@builtin(vertex_index) vi: u32, in: VIn) -> VOut {
+    var cs = array<vec2<f32>, 6>(
+        vec2<f32>(0.0, 0.0), vec2<f32>(1.0, 0.0), vec2<f32>(1.0, 1.0),
+        vec2<f32>(0.0, 0.0), vec2<f32>(1.0, 1.0), vec2<f32>(0.0, 1.0),
+    );
+    let q = cs[vi];
+    let off = q - vec2<f32>(0.5, 0.5);
+    let world = in.center
+        + u.right.xyz * (off.x * in.size.x)
+        + u.up.xyz * (off.y * in.size.y);
+    var o: VOut;
+    o.clip = u.view_proj * vec4<f32>(world, 1.0);
+    o.uv = vec2<f32>(
+        mix(in.uv_min.x, in.uv_max.x, q.x),
+        mix(in.uv_min.y, in.uv_max.y, 1.0 - q.y),
+    );
+    o.tint = in.tint;
+    return o;
+}
+
+@fragment
+fn fs(in: VOut) -> @location(0) vec4<f32> {
+    let c = textureSample(tex, samp, in.uv) * in.tint;
+    let a = c.a;
+    return vec4<f32>(c.rgb * a, a);
+}
+"#;
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn glow_wgsl_valida() {
+        let module = naga::front::wgsl::parse_str(GLOW_WGSL).expect("GLOW_WGSL no parsea");
+        naga::valid::Validator::new(
+            naga::valid::ValidationFlags::all(),
+            naga::valid::Capabilities::all(),
+        )
+        .validate(&module)
+        .expect("GLOW_WGSL no valida");
+    }
+}
diff --git a/llimphi-3d/src/lib.rs b/llimphi-3d/src/lib.rs
index 203a796..993611c 100644
--- a/llimphi-3d/src/lib.rs
+++ b/llimphi-3d/src/lib.rs
@@ -35,7 +35,9 @@ mod billboard;
 mod camera;
 mod cinema;
 mod dimensions;
+mod glow;
 mod hud;
+mod lines;
 mod mesh;
 mod postfx;
 mod reflection;
@@ -48,10 +50,12 @@ mod voxel_renderer;
 pub use billboard::{Billboard, Billboards};
 pub use camera::Camera3d;
 pub use cinema::{CamKey, CameraTrack};
-pub use sky::{SkyBackdrop, SkyParams};
+pub use glow::Glows;
+pub use lines::{LineVertex, Lines3d};
+pub use sky::{SkyBackdrop, SkyMapping, SkyParams};
 pub use dimensions::{Dimension, Multiverse};
 pub use hud::{Hud, HudQuad};
-pub use mesh::{cube, push_cube, Vertex3d, CUBE_INDICES};
+pub use mesh::{cube, push_cube, uv_sphere, Vertex3d, CUBE_INDICES};
 pub use postfx::{PostFx, PostFxConfig};
 pub use reflection::{PlanarReflection, ReflectionPlane, SurfaceParams};
 pub use renderer::{Renderer3d, MESH_MAX_LIGHTS};
diff --git a/llimphi-3d/src/lines.rs b/llimphi-3d/src/lines.rs
new file mode 100644
index 0000000..337b8d8
--- /dev/null
+++ b/llimphi-3d/src/lines.rs
@@ -0,0 +1,244 @@
+//! `Lines3d` — líneas 3D como `LineList`, depth-test pero **sin escribir**
+//! profundidad, con alpha-blend y un atenuado por profundidad opcional para dar
+//! volumen (el frente brilla, el fondo se apaga). Llena el hueco del crate, que
+//! sólo tenía triángulos: sirve para anillos (círculos máximos), rejillas,
+//! ejes y figuras de constelaciones — cualquier "alambre" 3D.
+//!
+//! Se dibuja en un pase ya abierto con depth attachment (el de
+//! [`PostFx::scene_pass`](crate::PostFx) o [`Scene3d`](crate::Scene3d)), DESPUÉS
+//! de la geometría sólida que deba ocluirlo:
+//!
+//! ```ignore
+//! lines.set_lines(device, &verts);     // pares de vértices = segmentos
+//! lines.upload(queue, view_proj);
+//! lines.draw(&mut pass);
+//! ```
+
+use glam::Mat4;
+
+use crate::scene::DEPTH_FORMAT;
+
+/// Vértice de línea: posición en mundo + color RGBA lineal.
+#[derive(Debug, Clone, Copy)]
+pub struct LineVertex {
+    pub pos: [f32; 3],
+    pub color: [f32; 4],
+}
+
+impl LineVertex {
+    /// `pos.xyz (12) + color.rgba (16)`.
+    pub const STRIDE: usize = 7 * 4;
+
+    fn write_to(&self, out: &mut Vec<u8>) {
+        for v in self.pos {
+            out.extend_from_slice(&v.to_ne_bytes());
+        }
+        for v in self.color {
+            out.extend_from_slice(&v.to_ne_bytes());
+        }
+    }
+}
+
+/// Renderer de líneas 3D reutilizable. Sin vértices, [`Self::draw`] es no-op.
+pub struct Lines3d {
+    pipeline: wgpu::RenderPipeline,
+    uniform_buf: wgpu::Buffer,
+    uniform_bg: wgpu::BindGroup,
+    verts: Option<wgpu::Buffer>,
+    count: u32,
+}
+
+impl Lines3d {
+    pub fn new(device: &wgpu::Device, color_format: wgpu::TextureFormat) -> Self {
+        let uniform_layout = device.create_bind_group_layout(&wgpu::BindGroupLayoutDescriptor {
+            label: Some("llimphi-3d-lines-uniform-layout"),
+            entries: &[wgpu::BindGroupLayoutEntry {
+                binding: 0,
+                visibility: wgpu::ShaderStages::VERTEX_FRAGMENT,
+                ty: wgpu::BindingType::Buffer {
+                    ty: wgpu::BufferBindingType::Uniform,
+                    has_dynamic_offset: false,
+                    min_binding_size: None,
+                },
+                count: None,
+            }],
+        });
+        let shader = device.create_shader_module(wgpu::ShaderModuleDescriptor {
+            label: Some("llimphi-3d-lines-shader"),
+            source: wgpu::ShaderSource::Wgsl(LINES_WGSL.into()),
+        });
+        let pl = device.create_pipeline_layout(&wgpu::PipelineLayoutDescriptor {
+            label: Some("llimphi-3d-lines-pl"),
+            bind_group_layouts: &[&uniform_layout],
+            push_constant_ranges: &[],
+        });
+        let pipeline = device.create_render_pipeline(&wgpu::RenderPipelineDescriptor {
+            label: Some("llimphi-3d-lines-pipeline"),
+            layout: Some(&pl),
+            vertex: wgpu::VertexState {
+                module: &shader,
+                entry_point: Some("vs"),
+                compilation_options: Default::default(),
+                buffers: &[wgpu::VertexBufferLayout {
+                    array_stride: LineVertex::STRIDE as u64,
+                    step_mode: wgpu::VertexStepMode::Vertex,
+                    attributes: &[
+                        wgpu::VertexAttribute {
+                            format: wgpu::VertexFormat::Float32x3,
+                            offset: 0,
+                            shader_location: 0,
+                        },
+                        wgpu::VertexAttribute {
+                            format: wgpu::VertexFormat::Float32x4,
+                            offset: 12,
+                            shader_location: 1,
+                        },
+                    ],
+                }],
+            },
+            primitive: wgpu::PrimitiveState {
+                topology: wgpu::PrimitiveTopology::LineList,
+                cull_mode: None,
+                ..Default::default()
+            },
+            depth_stencil: Some(wgpu::DepthStencilState {
+                format: DEPTH_FORMAT,
+                depth_write_enabled: false,
+                depth_compare: wgpu::CompareFunction::LessEqual,
+                stencil: Default::default(),
+                bias: Default::default(),
+            }),
+            multisample: Default::default(),
+            fragment: Some(wgpu::FragmentState {
+                module: &shader,
+                entry_point: Some("fs"),
+                compilation_options: Default::default(),
+                targets: &[Some(wgpu::ColorTargetState {
+                    format: color_format,
+                    blend: Some(wgpu::BlendState::ALPHA_BLENDING),
+                    write_mask: wgpu::ColorWrites::ALL,
+                })],
+            }),
+            multiview: None,
+            cache: None,
+        });
+        let uniform_buf = device.create_buffer(&wgpu::BufferDescriptor {
+            label: Some("llimphi-3d-lines-uniform"),
+            size: 64, // view_proj mat4
+            usage: wgpu::BufferUsages::UNIFORM | wgpu::BufferUsages::COPY_DST,
+            mapped_at_creation: false,
+        });
+        let uniform_bg = device.create_bind_group(&wgpu::BindGroupDescriptor {
+            label: Some("llimphi-3d-lines-uniform-bg"),
+            layout: &uniform_layout,
+            entries: &[wgpu::BindGroupEntry {
+                binding: 0,
+                resource: uniform_buf.as_entire_binding(),
+            }],
+        });
+        Self {
+            pipeline,
+            uniform_buf,
+            uniform_bg,
+            verts: None,
+            count: 0,
+        }
+    }
+
+    /// Reemplaza los vértices. Cada **par** consecutivo es un segmento; para una
+    /// polilínea, repetir el vértice interior (a,b, b,c, c,d…).
+    pub fn set_lines(&mut self, device: &wgpu::Device, verts: &[LineVertex]) {
+        if verts.is_empty() {
+            self.count = 0;
+            self.verts = None;
+            return;
+        }
+        let mut bytes = Vec::with_capacity(verts.len() * LineVertex::STRIDE);
+        for v in verts {
+            v.write_to(&mut bytes);
+        }
+        let buf = device.create_buffer(&wgpu::BufferDescriptor {
+            label: Some("llimphi-3d-lines-vbuf"),
+            size: bytes.len() as u64,
+            usage: wgpu::BufferUsages::VERTEX | wgpu::BufferUsages::COPY_DST,
+            mapped_at_creation: true,
+        });
+        buf.slice(..).get_mapped_range_mut().copy_from_slice(&bytes);
+        buf.unmap();
+        self.verts = Some(buf);
+        self.count = verts.len() as u32;
+    }
+
+    /// Sube la `view_proj` del frame. Llamar antes de [`Self::draw`].
+    pub fn upload(&self, queue: &wgpu::Queue, view_proj: Mat4) {
+        let mut b = Vec::with_capacity(64);
+        for v in view_proj.to_cols_array() {
+            b.extend_from_slice(&v.to_ne_bytes());
+        }
+        queue.write_buffer(&self.uniform_buf, 0, &b);
+    }
+
+    /// Dibuja en un pase ya abierto (con depth attachment). No-op sin vértices.
+    pub fn draw<'a>(&'a self, pass: &mut wgpu::RenderPass<'a>) {
+        let Some(vb) = self.verts.as_ref() else {
+            return;
+        };
+        if self.count < 2 {
+            return;
+        }
+        pass.set_pipeline(&self.pipeline);
+        pass.set_bind_group(0, &self.uniform_bg, &[]);
+        pass.set_vertex_buffer(0, vb.slice(..));
+        pass.draw(0..self.count, 0..1);
+    }
+}
+
+/// Atenúa el alpha por profundidad NDC (el fondo de la esfera se apaga → da
+/// volumen). El color va tal cual; sólo el alpha se modula.
+const LINES_WGSL: &str = r#"
+struct U { view_proj: mat4x4<f32> };
+@group(0) @binding(0) var<uniform> u: U;
+
+struct VIn {
+    @location(0) pos: vec3<f32>,
+    @location(1) color: vec4<f32>,
+};
+struct VOut {
+    @builtin(position) clip: vec4<f32>,
+    @location(0) color: vec4<f32>,
+    @location(1) ndc_z: f32,
+};
+
+@vertex
+fn vs(in: VIn) -> VOut {
+    var o: VOut;
+    o.clip = u.view_proj * vec4<f32>(in.pos, 1.0);
+    o.color = in.color;
+    o.ndc_z = o.clip.z / max(o.clip.w, 1e-6);
+    return o;
+}
+
+@fragment
+fn fs(in: VOut) -> @location(0) vec4<f32> {
+    // ndc_z ~0 = cerca, ~1 = lejos. El fondo se apaga hasta 0.55 (da volumen
+    // sin que el hemisferio trasero desaparezca).
+    let depth_fade = mix(1.0, 0.55, clamp(in.ndc_z, 0.0, 1.0));
+    return vec4<f32>(in.color.rgb, in.color.a * depth_fade);
+}
+"#;
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn lines_wgsl_valida() {
+        let module = naga::front::wgsl::parse_str(LINES_WGSL).expect("LINES_WGSL no parsea");
+        naga::valid::Validator::new(
+            naga::valid::ValidationFlags::all(),
+            naga::valid::Capabilities::all(),
+        )
+        .validate(&module)
+        .expect("LINES_WGSL no valida");
+    }
+}
diff --git a/llimphi-3d/src/mesh.rs b/llimphi-3d/src/mesh.rs
index 18d1111..9087d58 100644
--- a/llimphi-3d/src/mesh.rs
+++ b/llimphi-3d/src/mesh.rs
@@ -68,6 +68,44 @@ pub fn cube() -> (Vec<Vertex3d>, Vec<u16>) {
     (verts, CUBE_INDICES.to_vec())
 }
 
+/// Genera una **esfera UV** unitaria (radio 1, centro en el origen): posiciones
+/// (que también sirven de normales, por ser unitarias) + índices de triángulos
+/// (winding CCW visto desde afuera). `stacks` = anillos de latitud, `slices` =
+/// gajos de longitud. El caller arma los [`Vertex3d`] coloreando cada posición
+/// (p.ej. por latitud/longitud y un sombreado horneado): el `Vertex3d` sólo
+/// lleva color (no normal), así que para una esfera lisa conviene hornear el
+/// sombreado en el color (Gouraud) en vez de depender de la normal plana del
+/// shader de mallas.
+pub fn uv_sphere(stacks: u32, slices: u32) -> (Vec<[f32; 3]>, Vec<u16>) {
+    let stacks = stacks.max(2);
+    let slices = slices.max(3);
+    let mut pos: Vec<[f32; 3]> = Vec::with_capacity(((stacks + 1) * (slices + 1)) as usize);
+    for i in 0..=stacks {
+        let v = i as f32 / stacks as f32;
+        let phi = v * std::f32::consts::PI; // 0 = polo norte, π = polo sur
+        let (sp, cp) = phi.sin_cos();
+        for j in 0..=slices {
+            let u = j as f32 / slices as f32;
+            let theta = u * std::f32::consts::TAU;
+            let (st, ct) = theta.sin_cos();
+            // +Y arriba (polo norte); x,z en el plano ecuatorial.
+            pos.push([sp * ct, cp, sp * st]);
+        }
+    }
+    let mut idx: Vec<u16> = Vec::with_capacity((stacks * slices * 6) as usize);
+    let row = slices + 1;
+    for i in 0..stacks {
+        for j in 0..slices {
+            let a = (i * row + j) as u16;
+            let b = (i * row + j + 1) as u16;
+            let c = ((i + 1) * row + j) as u16;
+            let d = ((i + 1) * row + j + 1) as u16;
+            idx.extend_from_slice(&[a, c, b, b, c, d]);
+        }
+    }
+    (pos, idx)
+}
+
 /// Apila un cubo transformado por `m` (mapea el cubo unitario `[-0.5,0.5]³` a su
 /// caja en mundo) con color plano `color`, en `verts`/`indices`. Es el ladrillo
 /// para componer mallas multi-caja en CPU: cada llamada agrega 8 vértices + 36
diff --git a/llimphi-3d/src/postfx.rs b/llimphi-3d/src/postfx.rs
index 5a1664f..d668d25 100644
--- a/llimphi-3d/src/postfx.rs
+++ b/llimphi-3d/src/postfx.rs
@@ -2,7 +2,7 @@
 //! pase de post-proceso reutilizable sobre cualquier render 3D wgpu.
 //!
 //! Cosechado del renderer 2.5D de Doom (`supay-render-llimphi::wgpu3d`), donde
-//! estos efectos nacieron pegados a tipos del juego. Acá viven en su forma
+//! estos efectos nacieron pegados a tipos del juego. Aquí viven en su forma
 //! agnóstica: nada sabe de paredes, sprites ni WAD. Cualquier escena que se
 //! pueda dibujar en un pase wgpu (las mallas de [`Renderer3d`](crate::Renderer3d),
 //! los voxels de [`VoxelRenderer`](crate::VoxelRenderer), una carta 3D de cosmos,
@@ -25,7 +25,7 @@
 //! let mut fx = PostFx::new(&device, color_format);
 //! // ... en gpu_paint_with(dev, q, enc, view, rect, _vp):
 //! fx.render_with(dev, q, enc, view, (w, h), wgpu::Color::BLACK, |pass| {
-//!     // `pass` ya está a supersample× con color+depth; sólo dibujá.
+//!     // `pass` ya está a supersample× con color+depth; sólo dibuja.
 //!     renderer3d.upload(q, w as f32 / h as f32, &camera); // antes del pase
 //!     renderer3d.draw(pass);
 //! });
@@ -338,10 +338,37 @@ impl PostFx {
     }
 
     /// Resuelve la escena ya dibujada: bright-pass + blur → bloom, luego blit
-    /// (bajada SSAA + suma de bloom) sobre `target`, preservando lo que haya
-    /// debajo (`LoadOp::Load`). Requiere [`Self::prepare`] + el pase de
-    /// [`Self::scene_pass`] ya soltado.
+    /// (bajada SSAA + suma de bloom) sobre **todo** `target`, preservando lo
+    /// que haya debajo (`LoadOp::Load`). Requiere [`Self::prepare`] + el pase
+    /// de [`Self::scene_pass`] ya soltado.
     pub fn resolve(&self, encoder: &mut wgpu::CommandEncoder, target: &wgpu::TextureView) {
+        self.resolve_impl(encoder, target, None);
+    }
+
+    /// Como [`Self::resolve`] pero **confina** el blit final a la sub-región
+    /// `rect = (x, y, w, h)` (px del target, esquina sup-izq) vía
+    /// `set_viewport` + `set_scissor_rect`. Es lo que permite montar el
+    /// post-proceso en un **panel** de una UI sin pisar el chrome alrededor:
+    /// la escena supersampleada se baja ajustada al rect y el resto del
+    /// `target` queda intacto (`LoadOp::Load`). `viewport` = tamaño del
+    /// `target` completo (para clampear el scissor). El bright-pass sigue
+    /// siendo offscreen a media res (no necesita confinarse).
+    pub fn resolve_in(
+        &self,
+        encoder: &mut wgpu::CommandEncoder,
+        target: &wgpu::TextureView,
+        rect: (f32, f32, f32, f32),
+        viewport: (u32, u32),
+    ) {
+        self.resolve_impl(encoder, target, Some((rect, viewport)));
+    }
+
+    fn resolve_impl(
+        &self,
+        encoder: &mut wgpu::CommandEncoder,
+        target: &wgpu::TextureView,
+        confine: Option<((f32, f32, f32, f32), (u32, u32))>,
+    ) {
         let scene_bg = match self.scene.as_ref() {
             Some(s) => &s.tex_bg,
             None => return,
@@ -388,6 +415,23 @@ impl PostFx {
                 timestamp_writes: None,
                 occlusion_query_set: None,
             });
+            // Confinar al rect: el viewport mapea NDC→rect (la escena se ajusta
+            // al panel) y el scissor recorta el triángulo fullscreen, que de
+            // otro modo desbordaría el rect y pisaría el chrome.
+            if let Some(((rx, ry, rw, rh), (vw, vh))) = confine {
+                if rw < 1.0 || rh < 1.0 {
+                    return;
+                }
+                blit.set_viewport(rx, ry, rw, rh, 0.0, 1.0);
+                let sx = rx.max(0.0);
+                let sy = ry.max(0.0);
+                let sw = (rw.min(vw as f32 - sx)).max(0.0) as u32;
+                let sh = (rh.min(vh as f32 - sy)).max(0.0) as u32;
+                if sw == 0 || sh == 0 {
+                    return;
+                }
+                blit.set_scissor_rect(sx as u32, sy as u32, sw, sh);
+            }
             blit.set_pipeline(&self.blit_pipeline);
             blit.set_bind_group(0, scene_bg, &[]);
             blit.set_bind_group(1, &bloom.tex_bg, &[]);
diff --git a/llimphi-3d/src/reflection.rs b/llimphi-3d/src/reflection.rs
index 4eaf681..da977f9 100644
--- a/llimphi-3d/src/reflection.rs
+++ b/llimphi-3d/src/reflection.rs
@@ -3,7 +3,7 @@
 //!
 //! Cosechado del agua 2.5D de Doom (`supay-render-llimphi::wgpu3d`), donde la
 //! reflexión estaba cableada al plano horizontal de Doom (`reflect_across_z`) y
-//! al shader del agua. Acá:
+//! al shader del agua. Aquí:
 //!
 //!  - [`ReflectionPlane`] modela un plano **arbitrario** (`n·x + d = 0`) y da su
 //!    matriz espejo ([`ReflectionPlane::mirror`]) por reflexión de Householder.
diff --git a/llimphi-3d/src/sky.rs b/llimphi-3d/src/sky.rs
index eba7150..752be0f 100644
--- a/llimphi-3d/src/sky.rs
+++ b/llimphi-3d/src/sky.rs
@@ -5,7 +5,7 @@
 //!
 //! Cosechado del cielo 2.5D de Doom (`supay-render-llimphi::wgpu3d`), donde
 //! estaba pegado a las constantes de Doom (tileo 4×/360°, estiramiento vertical
-//! 1.8×). Acá esos números son **parámetros** ([`SkyParams`]), así un panorama
+//! 1.8×). Aquí esos números son **parámetros** ([`SkyParams`]), así un panorama
 //! normal usa los defaults y Doom reproduce su look exacto pasando los suyos.
 //!
 //! Se dibuja **primero** en un pase que ya tiene depth attachment (el de
@@ -19,6 +19,24 @@
 
 use crate::scene::DEPTH_FORMAT;
 
+/// Cómo se proyecta el panorama sobre la pantalla.
+#[derive(Clone, Copy, Debug, Default, PartialEq, Eq)]
+pub enum SkyMapping {
+    /// **Cilíndrico** (estilo Doom): la columna muestrea por el azimut y la fila
+    /// se desplaza linealmente con el `pitch`. Barato y exacto para una cámara
+    /// que casi no cabecea (FPS), pero **degenera** si la cámara mira muy
+    /// arriba/abajo (la textura se sale de pantalla y el borde se estira en
+    /// rayas verticales). Usa `wraps`/`v_scale`/`pitch_scale`/`v_offset`.
+    #[default]
+    Cylindrical,
+    /// **Esférico** (equirectangular): por cada píxel se reconstruye el rayo de
+    /// cámara desde `yaw`/`pitch`/`fov_x`/`aspect` y se mapea a la textura por
+    /// (azimut, elevación). Correcto a cualquier cabeceo y bloqueado al mundo
+    /// como la geometría — el cielo es una esfera de fondo, no una franja. Los
+    /// campos `wraps`/`v_scale`/`pitch_scale`/`v_offset` se ignoran.
+    Spherical,
+}
+
 /// Parámetros del cielo por frame. `yaw`/`pitch`/`fov_x` salen de la cámara;
 /// el resto modela cómo se mapea la textura.
 #[derive(Clone, Copy, Debug)]
@@ -41,6 +59,8 @@ pub struct SkyParams {
     pub pitch_scale: f32,
     /// Offset vertical fijo añadido a la coordenada de textura.
     pub v_offset: f32,
+    /// Proyección del panorama. Ver [`SkyMapping`].
+    pub mapping: SkyMapping,
 }
 
 impl Default for SkyParams {
@@ -54,6 +74,7 @@ impl Default for SkyParams {
             v_scale: 1.0,
             pitch_scale: 1.0,
             v_offset: 0.0,
+            mapping: SkyMapping::Cylindrical,
         }
     }
 }
@@ -159,7 +180,7 @@ impl SkyBackdrop {
 
         let uniform_buf = device.create_buffer(&wgpu::BufferDescriptor {
             label: Some("llimphi-3d-sky-uniform"),
-            size: 32, // 8 × f32
+            size: 48, // 9 × f32 redondeado a múltiplo de 16
             usage: wgpu::BufferUsages::UNIFORM | wgpu::BufferUsages::COPY_DST,
             mapped_at_creation: false,
         });
@@ -255,7 +276,11 @@ impl SkyBackdrop {
 
     /// Sube los parámetros del frame. Llamar antes de [`Self::draw`].
     pub fn upload(&self, queue: &wgpu::Queue, p: &SkyParams) {
-        let mut b = Vec::with_capacity(32);
+        let mode = match p.mapping {
+            SkyMapping::Cylindrical => 0.0,
+            SkyMapping::Spherical => 1.0,
+        };
+        let mut b = Vec::with_capacity(48);
         for v in [
             p.yaw,
             p.pitch,
@@ -265,6 +290,10 @@ impl SkyBackdrop {
             p.v_scale,
             p.pitch_scale,
             p.v_offset,
+            mode,
+            0.0, // pad a múltiplo de 16
+            0.0,
+            0.0,
         ] {
             b.extend_from_slice(&v.to_ne_bytes());
         }
@@ -289,6 +318,7 @@ const SKY_WGSL: &str = r#"
 struct SkyU {
     yaw: f32, pitch: f32, fov_x: f32, aspect: f32,
     wraps: f32, v_scale: f32, pitch_scale: f32, v_offset: f32,
+    mode: f32, _pad0: f32, _pad1: f32, _pad2: f32,
 };
 @group(0) @binding(0) var<uniform> s: SkyU;
 @group(1) @binding(0) var sky: texture_2d<f32>;
@@ -317,7 +347,34 @@ fn vs(@builtin(vertex_index) vi: u32) -> SOut {
 
 @fragment
 fn fs(in: SOut) -> @location(0) vec4<f32> {
-    // Azimut de la columna: centro = yaw, bordes ± fov/2.
+    if (s.mode > 0.5) {
+        // ---- Esférico (equirectangular): reconstruir el rayo de cámara ----
+        // Base de cámara igual a Camera3d::orbit(target=0): el ojo está en
+        // (cp·sy, sp, cp·cy)·dist y mira al origen, up=+Y.
+        let sy = sin(s.yaw);  let cy = cos(s.yaw);
+        let sp = sin(s.pitch); let cp = cos(s.pitch);
+        let zaxis = normalize(vec3<f32>(cp * sy, sp, cp * cy)); // ojo→origen invertido
+        let xaxis = normalize(cross(vec3<f32>(0.0, 1.0, 0.0), zaxis));
+        let yaxis = cross(zaxis, xaxis);
+        let tan_x = tan(s.fov_x * 0.5);
+        let tan_y = tan_x / s.aspect;
+        let ndc_x = in.scr.x * 2.0 - 1.0;
+        let ndc_y = 1.0 - in.scr.y * 2.0; // arriba = +1
+        // La cámara mira hacia -zaxis (look_at_rh).
+        let dir = normalize(ndc_x * tan_x * xaxis + ndc_y * tan_y * yaxis - zaxis);
+        let az = atan2(dir.x, dir.z);                 // -PI..PI
+        let el = asin(clamp(dir.y, -1.0, 1.0));       // -PI/2..PI/2
+        let u = az / (2.0 * PI) + 0.5;
+        let v = 0.5 - el / PI;                        // arriba(+el) → v=0
+        let col = textureSample(sky, samp, vec2<f32>(u, v));
+        // El equirectangular tiene una singularidad en los polos (cenit/nadir):
+        // todas las columnas colapsan a una fila y la textura se abre en abanico
+        // ("starburst"). Atenuamos el muestreo a oscuro cerca del polo para que
+        // se disuelva en cielo profundo en vez de reventar en rayas radiales.
+        let pole = smoothstep(0.78, 0.995, abs(dir.y));
+        return col * (1.0 - pole);
+    }
+    // ---- Cilíndrico (Doom): azimut por columna, fila por pitch lineal ----
     let colang = s.yaw - (in.scr.x - 0.5) * s.fov_x;
     let su = fract(colang / (2.0 * PI) * s.wraps);
     let sv = clamp(in.scr.y * s.v_scale - s.pitch * s.pitch_scale + s.v_offset, 0.0, 1.0);
diff --git a/llimphi-3d/src/voxel.rs b/llimphi-3d/src/voxel.rs
index 029dc0d..3c00ca2 100644
--- a/llimphi-3d/src/voxel.rs
+++ b/llimphi-3d/src/voxel.rs
@@ -20,6 +20,25 @@ pub type DirtyBox = [u32; 6];
 pub struct VoxelGrid {
     dim: [u32; 3],
     data: Vec<[u8; 4]>,
+    /// **Detalle sub-voxel por voxel** (Rg8): `[rugosidad, bisel]` codificados con
+    /// **offset +1** para distinguir "sin autor" (`[0,0]`) de "autor puso 0"
+    /// (`[1,1]`). `rug`/`bisel` autorados en `[0,1]` (rug re-escalado a amplitud
+    /// `0..1.5` en el shader). Todo `0` = el voxel usa el **look global** del
+    /// ray-march (`VoxelRenderer::{rugosidad_amp, bisel}`) → retrocompat byte a
+    /// byte cuando nadie lo toca. Lo llena [`set_detail`](Self::set_detail); el
+    /// renderer lo sube a un atlas paralelo (`dpool`) que espeja los slots del
+    /// pool de color. Es una propiedad de **construcción** del material, no un
+    /// canal editado en vivo (`sync`/`scroll_to` no lo re-suben).
+    detail: Vec<[u8; 2]>,
+    /// **Pincel de detalle** activo (bytes ya codificados con offset +1, o `None`).
+    /// Cuando está puesto, cada [`set`](Self::set)/[`set_rgba`](Self::set_rgba)
+    /// estampa también ESTE detalle en el voxel — así los estampadores profundos
+    /// (`place_objeto`, `stamp_bicho`…) heredan el detalle del material/ser sin
+    /// tener que threadearlo por cada `put`. Se prende con
+    /// [`set_detail_brush`](Self::set_detail_brush) y se apaga con
+    /// [`clear_detail_brush`](Self::clear_detail_brush). `None` = comportamiento
+    /// clásico (el voxel queda "sin autor" salvo `set_detail` explícito).
+    detail_brush: Option<[u8; 2]>,
     /// AABB de voxels mutados desde el último `take_dirty`. `None` = sin cambios.
     dirty: Option<DirtyBox>,
 }
@@ -31,6 +50,8 @@ impl VoxelGrid {
         Self {
             dim,
             data: vec![[0, 0, 0, 0]; n],
+            detail: vec![[0, 0]; n],
+            detail_brush: None,
             dirty: None,
         }
     }
@@ -72,15 +93,104 @@ impl VoxelGrid {
         self.dirty = None;
     }
 
+    /// Marca **todo** el grid como sucio (caja = grid entero) → el próximo
+    /// [`VoxelRenderer::sync`](crate::VoxelRenderer::sync) re-sube la ventana completa.
+    /// Útil al **regenerar** el grid por streaming (la ventana cambió de origen).
+    pub fn mark_all_dirty(&mut self) {
+        self.dirty = Some([0, 0, 0, self.dim[0] - 1, self.dim[1] - 1, self.dim[2] - 1]);
+    }
+
     /// Marca un voxel sólido con color `rgb` (alpha = 255). Fuera de rango: no-op.
     pub fn set(&mut self, x: u32, y: u32, z: u32, rgb: [u8; 3]) {
         if x < self.dim[0] && y < self.dim[1] && z < self.dim[2] {
             let i = self.idx(x, y, z);
             self.data[i] = [rgb[0], rgb[1], rgb[2], 255];
+            if let Some(d) = self.detail_brush {
+                self.detail[i] = d;
+            }
             self.mark_dirty(x, y, z);
         }
     }
 
+    /// Marca un voxel con color `rgb` y **alpha** explícito. El alpha codifica
+    /// ocupación **y** brillo: `>127` = sólido; el shader lee el brillo como
+    /// `(1 - a/255)·2` (matte `255` → 0 brillo, `130` → lustre pleno). Pasar
+    /// alpha `≤127` lo dejaría "vacío" para el shader — usa `[130, 255]` para
+    /// voxels lustrosos. Fuera de rango: no-op.
+    pub fn set_rgba(&mut self, x: u32, y: u32, z: u32, rgb: [u8; 3], a: u8) {
+        if x < self.dim[0] && y < self.dim[1] && z < self.dim[2] {
+            let i = self.idx(x, y, z);
+            self.data[i] = [rgb[0], rgb[1], rgb[2], a];
+            if let Some(d) = self.detail_brush {
+                self.detail[i] = d;
+            }
+            self.mark_dirty(x, y, z);
+        }
+    }
+
+    /// Convierte un factor de **brillo** `[0,1]` al alpha de voxel correspondiente
+    /// (`0` → `255` matte, `1` → `130` lustre pleno), manteniéndolo siempre sólido.
+    #[inline]
+    pub fn shine_to_alpha(brillo: f32) -> u8 {
+        255 - (brillo.clamp(0.0, 1.0) * 125.0) as u8
+    }
+
+    /// Amplitud de rugosidad `[0,1.5]` que el shader mapea desde el byte de detalle
+    /// (espeja `(byte-1)/254·1.5`). Expuesto para que el caller razone en la misma
+    /// escala que `VoxelRenderer::rugosidad_amp`.
+    pub const DETALLE_RUG_MAX: f32 = 1.5;
+
+    /// Codifica un factor `[0,1]` al byte de detalle con **offset +1** (`0` autorado
+    /// → `1`, distinguible del `0` "sin autor"). `norm` ya normalizado a `[0,1]`.
+    #[inline]
+    fn detail_byte(norm: f32) -> u8 {
+        1 + (norm.clamp(0.0, 1.0) * 254.0).round() as u8
+    }
+
+    /// **Detalle sub-voxel de este voxel** (capa 3 del plan): `rugosidad` en
+    /// amplitud `[0, DETALLE_RUG_MAX]` y `bisel` en `[0,1]`, autorados por voxel.
+    /// Sobrescribe el look **global** del ray-march sólo para este voxel (dos
+    /// materiales en la misma escena pueden lucir distinto a la vez — lo que el
+    /// escalar global no podía). No cambia la ocupación; pon el voxel sólido con
+    /// `set`/`set_rgba` aparte. Fuera de rango: no-op. No marca dirty: el detalle
+    /// es propiedad de construcción (el renderer lo hornea al armar/rearmar).
+    pub fn set_detail(&mut self, x: u32, y: u32, z: u32, rugosidad: f32, bisel: f32) {
+        if x < self.dim[0] && y < self.dim[1] && z < self.dim[2] {
+            let i = self.idx(x, y, z);
+            self.detail[i] = [
+                Self::detail_byte(rugosidad / Self::DETALLE_RUG_MAX),
+                Self::detail_byte(bisel),
+            ];
+        }
+    }
+
+    /// **Prende el pincel de detalle**: a partir de aquí cada `set`/`set_rgba`
+    /// estampa también este `(rugosidad, bisel)` en el voxel escrito (misma escala
+    /// que [`set_detail`](Self::set_detail)). Pensado para que los estampadores
+    /// profundos (flora en `place_objeto`, seres en `stamp_bicho`, muebles…) hereden
+    /// el detalle del material/ser sin threadearlo por cada `put`. Acuérdate de
+    /// apagarlo con [`clear_detail_brush`](Self::clear_detail_brush) al terminar el
+    /// objeto, o teñirás de más. No toca voxels ya escritos.
+    pub fn set_detail_brush(&mut self, rugosidad: f32, bisel: f32) {
+        self.detail_brush = Some([
+            Self::detail_byte(rugosidad / Self::DETALLE_RUG_MAX),
+            Self::detail_byte(bisel),
+        ]);
+    }
+
+    /// Apaga el pincel de detalle (vuelve al comportamiento clásico: los `set`
+    /// posteriores no estampan detalle salvo `set_detail` explícito).
+    pub fn clear_detail_brush(&mut self) {
+        self.detail_brush = None;
+    }
+
+    /// Detalle codificado `[rug, bisel]` (bytes con offset +1; `[0,0]` = sin autor)
+    /// del voxel `(x,y,z)`, o `None` fuera de rango.
+    pub fn detail_at(&self, x: u32, y: u32, z: u32) -> Option<[u8; 2]> {
+        (x < self.dim[0] && y < self.dim[1] && z < self.dim[2])
+            .then(|| self.detail[self.idx(x, y, z)])
+    }
+
     /// Vacía **todos** los voxels y marca el grid entero como dirty (la próxima
     /// `VoxelRenderer::sync` re-sube todo). Para regenerar el contenido de una
     /// ventana de *streaming* in-place sin reconstruir el renderer.
@@ -88,6 +198,9 @@ impl VoxelGrid {
         for px in &mut self.data {
             *px = [0, 0, 0, 0];
         }
+        for d in &mut self.detail {
+            *d = [0, 0];
+        }
         self.dirty = Some([0, 0, 0, self.dim[0] - 1, self.dim[1] - 1, self.dim[2] - 1]);
     }
 
@@ -96,6 +209,7 @@ impl VoxelGrid {
         if x < self.dim[0] && y < self.dim[1] && z < self.dim[2] {
             let i = self.idx(x, y, z);
             self.data[i] = [0, 0, 0, 0];
+            self.detail[i] = [0, 0];
             self.mark_dirty(x, y, z);
         }
     }
@@ -197,6 +311,28 @@ impl VoxelGrid {
         out
     }
 
+    /// Extrae el **detalle sub-voxel** de un brick `(cx,cy,cz)` de lado `brick`
+    /// como Rg8 plano (`brick³` voxels × 2 bytes, x contiguo), padeando con `[0,0]`
+    /// (sin autor → look global) los voxels fuera del grid. Espeja `extract_brick`
+    /// para el atlas paralelo `dpool` del renderer.
+    pub fn extract_brick_detail(&self, brick: u32, cx: u32, cy: u32, cz: u32) -> Vec<u8> {
+        let b = brick;
+        let mut out = vec![0u8; (b * b * b * 2) as usize];
+        for lz in 0..b {
+            for ly in 0..b {
+                for lx in 0..b {
+                    let (x, y, z) = (cx * b + lx, cy * b + ly, cz * b + lz);
+                    if x < self.dim[0] && y < self.dim[1] && z < self.dim[2] {
+                        let d = self.detail[self.idx(x, y, z)];
+                        let o = ((lx + ly * b + lz * b * b) * 2) as usize;
+                        out[o..o + 2].copy_from_slice(&d);
+                    }
+                }
+            }
+        }
+        out
+    }
+
     /// Extrae una sub-caja RGBA contigua `[origin, origin+ext)` para subirla con
     /// `queue.write_texture` (M3: upload incremental de la región fina mutada).
     pub fn extract_fine(&self, origin: [u32; 3], ext: [u32; 3]) -> Vec<u8> {
@@ -294,3 +430,72 @@ impl VoxelGrid {
         g
     }
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn detalle_sin_autor_es_cero() {
+        // Un grid recién nacido no tiene detalle → todo `[0,0]` (look global).
+        let g = VoxelGrid::new([4, 4, 4]);
+        assert_eq!(g.detail_at(1, 1, 1), Some([0, 0]));
+        assert_eq!(g.detail_at(9, 0, 0), None, "fuera de rango");
+    }
+
+    #[test]
+    fn detalle_offset_distingue_cero_autorado() {
+        let mut g = VoxelGrid::new([4, 4, 4]);
+        // Autor pone 0 en ambos → bytes `[1,1]`, DISTINTOS del `[0,0]` sin autor.
+        g.set_detail(0, 0, 0, 0.0, 0.0);
+        assert_eq!(g.detail_at(0, 0, 0), Some([1, 1]), "0 autorado ≠ sin autor");
+        // Máximos → 255 (1 + 254).
+        g.set_detail(1, 0, 0, VoxelGrid::DETALLE_RUG_MAX, 1.0);
+        assert_eq!(g.detail_at(1, 0, 0), Some([255, 255]));
+        // Un valor intermedio queda por encima del piso.
+        g.set_detail(2, 0, 0, VoxelGrid::DETALLE_RUG_MAX * 0.5, 0.5);
+        let d = g.detail_at(2, 0, 0).unwrap();
+        assert!(d[0] > 120 && d[0] < 135, "rug medio ≈ 128: {}", d[0]);
+        assert!(d[1] > 120 && d[1] < 135, "bisel medio ≈ 128: {}", d[1]);
+    }
+
+    #[test]
+    fn pincel_de_detalle_tine_los_set_posteriores() {
+        let mut g = VoxelGrid::new([4, 4, 4]);
+        // Sin pincel: `set` deja el voxel "sin autor".
+        g.set(0, 0, 0, [10, 20, 30]);
+        assert_eq!(g.detail_at(0, 0, 0), Some([0, 0]), "sin pincel = sin autor");
+        // Con pincel: `set` y `set_rgba` heredan el detalle activo.
+        g.set_detail_brush(VoxelGrid::DETALLE_RUG_MAX, 1.0);
+        g.set(1, 0, 0, [10, 20, 30]);
+        g.set_rgba(2, 0, 0, [10, 20, 30], 130);
+        assert_eq!(g.detail_at(1, 0, 0), Some([255, 255]), "set hereda el pincel");
+        assert_eq!(g.detail_at(2, 0, 0), Some([255, 255]), "set_rgba hereda el pincel");
+        // Apagado: vuelve a "sin autor".
+        g.clear_detail_brush();
+        g.set(3, 0, 0, [10, 20, 30]);
+        assert_eq!(g.detail_at(3, 0, 0), Some([0, 0]), "pincel apagado = sin autor");
+    }
+
+    #[test]
+    fn extract_brick_detail_ubica_y_padea() {
+        let mut g = VoxelGrid::new([8, 8, 8]);
+        g.set_detail(1, 2, 3, VoxelGrid::DETALLE_RUG_MAX, 1.0);
+        let d = g.extract_brick_detail(8, 0, 0, 0);
+        assert_eq!(d.len(), 8 * 8 * 8 * 2);
+        // Índice del voxel (1,2,3) en el brick, ×2 bytes.
+        let o = (1 + 2 * 8 + 3 * 8 * 8) * 2;
+        assert_eq!(&d[o..o + 2], &[255, 255], "detalle en su lugar");
+        // El resto padeado en 0 (sin autor).
+        assert_eq!(&d[0..2], &[0, 0]);
+    }
+
+    #[test]
+    fn clear_borra_detalle() {
+        let mut g = VoxelGrid::new([4, 4, 4]);
+        g.set(0, 0, 0, [200, 100, 50]);
+        g.set_detail(0, 0, 0, 1.0, 0.8);
+        g.clear(0, 0, 0);
+        assert_eq!(g.detail_at(0, 0, 0), Some([0, 0]), "clear también zera el detalle");
+    }
+}
diff --git a/llimphi-3d/src/voxel_renderer.rs b/llimphi-3d/src/voxel_renderer.rs
index 1489598..a00271b 100644
--- a/llimphi-3d/src/voxel_renderer.rs
+++ b/llimphi-3d/src/voxel_renderer.rs
@@ -111,6 +111,14 @@ impl Default for Atmosphere {
 /// Renderer de voxels por ray-march de dos niveles sobre un brick pool sparse.
 pub struct VoxelRenderer {
     pool: wgpu::Texture,
+    /// Atlas **paralelo** al `pool` (mismos slots/dimensiones): por voxel guarda el
+    /// **detalle sub-voxel** autorado (`Rg8Uint` = `[rugosidad, bisel]` con offset
+    /// +1; `[0,0]` = sin autor → look global). Se hornea al armar/rearmar el pool y
+    /// crece con él (`grow_layers`); `sync`/`scroll_to` NO lo re-suben (el detalle es
+    /// propiedad de construcción del material, no un canal editado en vivo). Su
+    /// isosuperficie/indirección son las mismas del pool → el shader lo direcciona
+    /// igual. Todo `[0,0]` (caso común) = retrocompat byte a byte.
+    dpool: wgpu::Texture,
     indir: wgpu::Texture,
     bind_group: wgpu::BindGroup,
     /// Layout del bind group, guardado para re-armar el bind group cuando el pool
@@ -148,6 +156,47 @@ pub struct VoxelRenderer {
     /// posición, acotado a la distancia a la luz). `true` por defecto. Apagarlo
     /// recupera el MVP plano (más barato) — útil para comparar off/on.
     pub point_shadows: bool,
+    /// **Rugosidad sub-voxel** (bump mapping procedural). Perturba la normal de
+    /// sombreado del voxel golpeado con el gradiente tangencial de un ruido de
+    /// valor 3D → la superficie deja de leerse rectangular a corta distancia
+    /// (roca/tierra granulada) sin tocar geometría ni memoria. `0.0` = off
+    /// (comportamiento clásico, cara plana axial). La perturbación se atenúa
+    /// sola en voxels lustrosos (vidrio/metal, `alpha` bajo) → sólo lo mate se
+    /// rugosiza. Rango útil ≈ `0.0..1.5`.
+    pub rugosidad_amp: f32,
+    /// Frecuencia del ruido de rugosidad (ciclos por voxel). Más alto = grano
+    /// más fino/apretado. Default `1.6`. Sólo importa si `rugosidad_amp > 0`.
+    pub rugosidad_freq: f32,
+    /// **Bisel / suavizado sub-voxel** (pendientes diagonales). Refina el hit del
+    /// ray-march contra la **isosuperficie trilineal de la ocupación** (derivada de
+    /// la forma, sin storage extra): el terreno escalonado se lee como rampa
+    /// diagonal y las esquinas convexas quedan biseladas, sin dejar de ser "bloque
+    /// tallado". `0.0` = off (voxel duro clásico, byte-idéntico); `1.0` = superficie
+    /// suave plena; intermedio = bisel parcial. Las zonas planas quedan planas (la
+    /// isosuperficie sólo se aparta de la cara en bordes/esquinas). Cuesta ~varias
+    /// muestras del campo por píxel golpeado → sólo se paga con `bisel > 0`.
+    pub bisel: f32,
+    /// Modo diagnóstico: pinta la **normal** de sombreado como color (`n·0.5+0.5`)
+    /// en vez del sombreado. Lo usa la certificación (`example bisel_demo`) para
+    /// medir qué fracción de la superficie dejó de ser axial. `false` en producción.
+    pub debug_normals: bool,
+    /// **Silueta sub-voxel POR MATERIAL** (`false` = off, retrocompat byte-idéntico).
+    /// Con `bisel` global prendido, `trace_smooth` traza la isosuperficie GLOBAL: la
+    /// silueta sale igual para todos (el `bisel` por voxel sólo cambiaba la NORMAL de
+    /// sombreado, no el contorno). Con este flag, el CAMPO mismo mezcla escalón↔trilineal
+    /// según el `bisel` POR VOXEL del material sólido cercano → un material duro (bisel
+    /// bajo) conserva la silueta axial/blocky mientras otro liso (bisel alto) la redondea,
+    /// en el MISMO frame. Cuesta: samplea el detalle de las 8 esquinas por evaluación del
+    /// campo → sólo pagalo cuando de veras quieres siluetas distintas por material. Sólo
+    /// tiene efecto con `bisel > 0` (que enciende `trace_smooth`).
+    pub silueta_por_voxel: bool,
+    /// **Cantidad de oclusión ambiental** `[0,1]` (`1.0` = clásica, retrocompat
+    /// byte-idéntico; `0.0` = sin AO). La AO se computa **axialmente** (`axis_of` de la
+    /// normal indexa voxels enteros); sobre una superficie REDONDEADA (bisel) el eje
+    /// dominante salta a lo largo de la esfera y la AO pinta **anillos concéntricos** —
+    /// correcto para bloques, artefacto para un ser orgánico. Bajala (≈0,2–0,4) al rendir
+    /// seres/blobs voxel suaves para que el cuerpo lea liso. Viaja en `n_lights.w`.
+    pub ao_amount: f32,
 }
 
 impl VoxelRenderer {
@@ -194,6 +243,22 @@ impl VoxelRenderer {
         });
         let pool_view = pool.create_view(&wgpu::TextureViewDescriptor::default());
 
+        // Atlas de detalle sub-voxel, espejo del pool (mismos slots). Rg8Uint = dos
+        // bytes por voxel: `[rugosidad, bisel]` (con offset +1; `[0,0]` = sin autor).
+        let dpool = device.create_texture(&wgpu::TextureDescriptor {
+            label: Some("llimphi-3d-voxel-dpool"),
+            size: extent([ax * BRICK, ay * BRICK, az * BRICK]),
+            mip_level_count: 1,
+            sample_count: 1,
+            dimension: wgpu::TextureDimension::D3,
+            format: wgpu::TextureFormat::Rg8Uint,
+            usage: wgpu::TextureUsages::TEXTURE_BINDING
+                | wgpu::TextureUsages::COPY_DST
+                | wgpu::TextureUsages::COPY_SRC,
+            view_formats: &[],
+        });
+        let dpool_view = dpool.create_view(&wgpu::TextureViewDescriptor::default());
+
         let indir = device.create_texture(&wgpu::TextureDescriptor {
             label: Some("llimphi-3d-voxel-indir"),
             size: extent(cdim),
@@ -236,6 +301,17 @@ impl VoxelRenderer {
                 },
                 uniform_entry(2),
                 uniform_entry(3),
+                // Atlas de detalle sub-voxel (Rg8Uint, direccionado como el pool).
+                wgpu::BindGroupLayoutEntry {
+                    binding: 4,
+                    visibility: wgpu::ShaderStages::FRAGMENT,
+                    ty: wgpu::BindingType::Texture {
+                        sample_type: wgpu::TextureSampleType::Uint,
+                        view_dimension: wgpu::TextureViewDimension::D3,
+                        multisampled: false,
+                    },
+                    count: None,
+                },
             ],
         });
 
@@ -275,6 +351,10 @@ impl VoxelRenderer {
                     binding: 3,
                     resource: ubuf_ent.as_entire_binding(),
                 },
+                wgpu::BindGroupEntry {
+                    binding: 4,
+                    resource: wgpu::BindingResource::TextureView(&dpool_view),
+                },
             ],
         });
 
@@ -328,6 +408,7 @@ impl VoxelRenderer {
 
         let mut r = Self {
             pool,
+            dpool,
             indir,
             bind_group,
             bgl,
@@ -346,6 +427,12 @@ impl VoxelRenderer {
             entities: Vec::new(),
             lights: Vec::new(),
             point_shadows: true,
+            rugosidad_amp: 0.0,
+            rugosidad_freq: 1.6,
+            bisel: 0.0,
+            debug_normals: false,
+            silueta_por_voxel: false,
+            ao_amount: 1.0,
         };
 
         // Poblar el pool: cada brick ocupado toma un slot incremental.
@@ -359,6 +446,7 @@ impl VoxelRenderer {
                         let idx = r.cell_idx(cx, cy, cz);
                         r.slots[idx] = slot + 1;
                         r.upload_brick(queue, slot, grid, cx, cy, cz);
+                        r.upload_brick_detail(queue, slot, grid, cx, cy, cz);
                     }
                 }
             }
@@ -422,6 +510,22 @@ impl VoxelRenderer {
         );
     }
 
+    /// Sube el brick de **detalle sub-voxel** al `dpool` (espeja `upload_brick`,
+    /// mismo slot/origen, 2 bytes/voxel). Se llama junto a `upload_brick` al armar
+    /// el pool y al hornear bricks nuevos.
+    fn upload_brick_detail(&self, queue: &wgpu::Queue, slot: u32, grid: &VoxelGrid, cx: u32, cy: u32, cz: u32) {
+        let data = grid.extract_brick_detail(BRICK, cx, cy, cz);
+        let o = self.slot_origin(slot);
+        write_3d(
+            queue,
+            &self.dpool,
+            [o[0] * BRICK, o[1] * BRICK, o[2] * BRICK],
+            [BRICK, BRICK, BRICK],
+            2,
+            &data,
+        );
+    }
+
     fn upload_indirection_full(&self, queue: &wgpu::Queue) {
         let mut bytes = Vec::with_capacity(self.slots.len() * 4);
         for &s in &self.slots {
@@ -631,30 +735,49 @@ impl VoxelRenderer {
                 | wgpu::TextureUsages::COPY_SRC,
             view_formats: &[],
         });
+        // El dpool crece en paralelo (mismos slots): la franja nueva queda en `[0,0]`
+        // (sin autor → look global), que es lo que corresponde al contenido streameado.
+        let new_dpool = device.create_texture(&wgpu::TextureDescriptor {
+            label: Some("llimphi-3d-voxel-dpool"),
+            size: extent([ax * BRICK, ay * BRICK, new_az * BRICK]),
+            mip_level_count: 1,
+            sample_count: 1,
+            dimension: wgpu::TextureDimension::D3,
+            format: wgpu::TextureFormat::Rg8Uint,
+            usage: wgpu::TextureUsages::TEXTURE_BINDING
+                | wgpu::TextureUsages::COPY_DST
+                | wgpu::TextureUsages::COPY_SRC,
+            view_formats: &[],
+        });
 
-        // Copia el atlas viejo (mismas dimensiones x/y, az capas) al nuevo.
+        // Copia ambos atlas viejos (mismas dimensiones x/y, az capas) al nuevo.
         let mut enc = device.create_command_encoder(&wgpu::CommandEncoderDescriptor {
             label: Some("llimphi-3d-voxel-pool-grow"),
         });
-        enc.copy_texture_to_texture(
-            wgpu::TexelCopyTextureInfo {
-                texture: &self.pool,
-                mip_level: 0,
-                origin: wgpu::Origin3d::ZERO,
-                aspect: wgpu::TextureAspect::All,
-            },
-            wgpu::TexelCopyTextureInfo {
-                texture: &new_pool,
-                mip_level: 0,
-                origin: wgpu::Origin3d::ZERO,
-                aspect: wgpu::TextureAspect::All,
-            },
-            extent([ax * BRICK, ay * BRICK, az * BRICK]),
-        );
+        let copy = |enc: &mut wgpu::CommandEncoder, src: &wgpu::Texture, dst: &wgpu::Texture| {
+            enc.copy_texture_to_texture(
+                wgpu::TexelCopyTextureInfo {
+                    texture: src,
+                    mip_level: 0,
+                    origin: wgpu::Origin3d::ZERO,
+                    aspect: wgpu::TextureAspect::All,
+                },
+                wgpu::TexelCopyTextureInfo {
+                    texture: dst,
+                    mip_level: 0,
+                    origin: wgpu::Origin3d::ZERO,
+                    aspect: wgpu::TextureAspect::All,
+                },
+                extent([ax * BRICK, ay * BRICK, az * BRICK]),
+            );
+        };
+        copy(&mut enc, &self.pool, &new_pool);
+        copy(&mut enc, &self.dpool, &new_dpool);
         queue.submit(std::iter::once(enc.finish()));
 
-        // Re-armar el bind group con la view del pool nuevo (indir/ubufs intactos).
+        // Re-armar el bind group con las views nuevas (indir/ubufs intactos).
         let pool_view = new_pool.create_view(&wgpu::TextureViewDescriptor::default());
+        let dpool_view = new_dpool.create_view(&wgpu::TextureViewDescriptor::default());
         let indir_view = self.indir.create_view(&wgpu::TextureViewDescriptor::default());
         self.bind_group = device.create_bind_group(&wgpu::BindGroupDescriptor {
             label: Some("llimphi-3d-voxel-bg"),
@@ -664,12 +787,14 @@ impl VoxelRenderer {
                 wgpu::BindGroupEntry { binding: 1, resource: wgpu::BindingResource::TextureView(&indir_view) },
                 wgpu::BindGroupEntry { binding: 2, resource: self.ubuf.as_entire_binding() },
                 wgpu::BindGroupEntry { binding: 3, resource: self.ubuf_ent.as_entire_binding() },
+                wgpu::BindGroupEntry { binding: 4, resource: wgpu::BindingResource::TextureView(&dpool_view) },
             ],
         });
 
         let old_cap = ax * ay * az;
         let new_cap = ax * ay * new_az;
         self.pool = new_pool;
+        self.dpool = new_dpool;
         self.atlas[2] = new_az;
         self.free.extend((old_cap..new_cap).rev());
     }
@@ -695,10 +820,22 @@ impl VoxelRenderer {
         for v in [s[0], s[1], s[2], self.atmosphere.god_rays.max(0.0)] {
             u.extend_from_slice(&v.to_ne_bytes());
         }
-        for v in [self.cdim[0] as f32, self.cdim[1] as f32, self.cdim[2] as f32, 0.0] {
+        // cdim.w piggyback = amplitud de rugosidad sub-voxel (0 = off); atlas.w = su
+        // frecuencia. Reusan lanes que estaban en 0 → retrocompatible.
+        for v in [
+            self.cdim[0] as f32,
+            self.cdim[1] as f32,
+            self.cdim[2] as f32,
+            self.rugosidad_amp.max(0.0),
+        ] {
             u.extend_from_slice(&v.to_ne_bytes());
         }
-        for v in [self.atlas[0] as f32, self.atlas[1] as f32, self.atlas[2] as f32, 0.0] {
+        for v in [
+            self.atlas[0] as f32,
+            self.atlas[1] as f32,
+            self.atlas[2] as f32,
+            self.rugosidad_freq.max(0.0),
+        ] {
             u.extend_from_slice(&v.to_ne_bytes());
         }
         let a = &self.atmosphere;
@@ -710,11 +847,12 @@ impl VoxelRenderer {
         ] {
             u.extend_from_slice(&v.to_ne_bytes());
         }
+        // sky_horizon.w piggyback = bisel/suavizado sub-voxel (0 = off, retrocompat).
         for v in [
             a.sky_horizon[0] as f32 / 255.0,
             a.sky_horizon[1] as f32 / 255.0,
             a.sky_horizon[2] as f32 / 255.0,
-            0.0,
+            self.bisel.clamp(0.0, 1.0),
         ] {
             u.extend_from_slice(&v.to_ne_bytes());
         }
@@ -726,18 +864,23 @@ impl VoxelRenderer {
         // Se sube YA REDUCIDO a `[0, cdim)` (floormod) para que el `%` del shader
         // nunca opere sobre un negativo — el `%` de WGSL sobre enteros con signo es
         // ambiguo entre plataformas y rompía el wrap con orígenes negativos.
+        // scroll.w piggyback = flag de diagnóstico de normales (0 = sombreado normal).
         for v in [
             floormod(self.brick_origin[0], self.cdim[0] as i32) as f32,
             floormod(self.brick_origin[1], self.cdim[1] as i32) as f32,
             floormod(self.brick_origin[2], self.cdim[2] as i32) as f32,
-            0.0,
+            if self.debug_normals { 1.0 } else { 0.0 },
         ] {
             u.extend_from_slice(&v.to_ne_bytes());
         }
         // Luces puntuales: count (vec4) + MAX_LIGHTS × [pos+range, color].
         let nl = self.lights.len().min(MAX_LIGHTS);
         let shadow_flag = if self.point_shadows { 1.0 } else { 0.0 };
-        for v in [nl as f32, shadow_flag, 0.0, 0.0] {
+        // n_lights.z piggyback = flag de silueta sub-voxel por material (0 = off,
+        // retrocompat: el campo queda trilineal puro).
+        let silueta_flag = if self.silueta_por_voxel { 1.0 } else { 0.0 };
+        // n_lights.w piggyback = cantidad de AO [0,1] (1 = clásico byte-idéntico).
+        for v in [nl as f32, shadow_flag, silueta_flag, self.ao_amount.clamp(0.0, 1.0)] {
             u.extend_from_slice(&v.to_ne_bytes());
         }
         for i in 0..MAX_LIGHTS {
@@ -915,18 +1058,26 @@ struct U {
     sky_horizon: vec4<f32>,// xyz = color horizonte / hacia el que niebla desvanece
     vp: mat4x4<f32>,       // world→clip (forward) para escribir frag_depth
     scroll: vec4<f32>,     // xyz = origen de brick (streaming toroidal); 0 = sin scroll
-    n_lights: vec4<f32>,   // x = cantidad de luces puntuales, y = sombras on/off
+    n_lights: vec4<f32>,   // x = luces puntuales, y = sombras on/off, z = silueta sub-voxel por material, w = cantidad de AO [0,1]
     lights: array<vec4<f32>, 8>, // por luz: [pos.xyz, range], [color.rgb, radio_area]
 };
 
 // Disco de muestreo para sombras blandas (penumbra): 8 taps en un patrón anular
 // fijo (determinista, sin RNG por píxel — evita ruido temporal en el reel).
-const SOFT_TAPS: i32 = 8;
-const SOFT_DISK = array<vec2<f32>, 8>(
-    vec2<f32>( 0.35,  0.0),  vec2<f32>(-0.35,  0.0),
-    vec2<f32>( 0.0,   0.35), vec2<f32>( 0.0,  -0.35),
-    vec2<f32>( 0.7,   0.7),  vec2<f32>(-0.7,   0.7),
-    vec2<f32>( 0.7,  -0.7),  vec2<f32>(-0.7,  -0.7),
+// Disco de muestreo para la penumbra: 16 taps en dos anillos (Poisson-ish) →
+// borde de sombra suave sin bandeo. Más taps = penumbra más limpia (a más costo).
+const SOFT_TAPS: i32 = 16;
+const SOFT_DISK = array<vec2<f32>, 16>(
+    // anillo interno (r≈0.4)
+    vec2<f32>( 0.40,  0.00), vec2<f32>( 0.28,  0.28),
+    vec2<f32>( 0.00,  0.40), vec2<f32>(-0.28,  0.28),
+    vec2<f32>(-0.40,  0.00), vec2<f32>(-0.28, -0.28),
+    vec2<f32>( 0.00, -0.40), vec2<f32>( 0.28, -0.28),
+    // anillo externo (r≈0.85, rotado 22.5°)
+    vec2<f32>( 0.785,  0.325), vec2<f32>( 0.325,  0.785),
+    vec2<f32>(-0.325,  0.785), vec2<f32>(-0.785,  0.325),
+    vec2<f32>(-0.785, -0.325), vec2<f32>(-0.325, -0.785),
+    vec2<f32>( 0.325, -0.785), vec2<f32>( 0.785, -0.325),
 );
 struct Entity {
     pos: vec4<f32>,
@@ -941,6 +1092,9 @@ struct EntU {
 @group(0) @binding(1) var indir: texture_3d<u32>;
 @group(0) @binding(2) var<uniform> u: U;
 @group(0) @binding(3) var<uniform> ent: EntU;
+// Detalle sub-voxel por voxel (Rg8Uint = [rugosidad, bisel] con offset +1; [0,0] =
+// sin autor → look global). Direccionado como el pool (mismos slots/indirección).
+@group(0) @binding(4) var dpool: texture_3d<u32>;
 
 struct VOut {
     @builtin(position) clip: vec4<f32>,
@@ -997,6 +1151,34 @@ fn voxel_at(voxel: vec3<f32>) -> vec4<f32> {
     return textureLoad(pool, acell * bu + local, 0);
 }
 
+// Detalle sub-voxel crudo del voxel `voxel` = `[rug_byte, bisel_byte]` (offset +1;
+// `[0,0]` = sin autor). Direccionamiento idéntico a `voxel_at`, sobre el `dpool`.
+fn detail_raw(voxel: vec3<f32>) -> vec2<u32> {
+    let vi = vec3<i32>(voxel);
+    if (any(vi < vec3<i32>(0)) || any(vec3<f32>(vi) >= u.grid_dim.xyz)) { return vec2<u32>(0u); }
+    let bu = i32(u.grid_dim.w);
+    let cc = vi / bu;
+    let s = slot_at(cc);
+    if (s == 0u) { return vec2<u32>(0u); }
+    let slot = i32(s - 1u);
+    let ax = i32(u.atlas.x);
+    let ay = i32(u.atlas.y);
+    let acell = vec3<i32>(slot % ax, (slot / ax) % ay, slot / (ax * ay));
+    let local = vi - cc * bu;
+    return textureLoad(dpool, acell * bu + local, 0).xy;
+}
+
+// Detalle DECODIFICADO = `(has, rug_amp, bisel)`. `has` = 1 si el voxel tiene detalle
+// autorado (sobrescribe el look global), 0 = usar el global. `rug_amp` en `[0,1.5]`,
+// `bisel` en `[0,1]` (espeja el offset +1 de CPU: `(byte-1)/254`).
+fn pv_detail(voxel: vec3<f32>) -> vec3<f32> {
+    let d = detail_raw(voxel);
+    if ((d.x | d.y) == 0u) { return vec3<f32>(0.0, 0.0, 0.0); }
+    let rug = (f32(d.x) - 1.0) / 254.0 * 1.5;
+    let bis = (f32(d.y) - 1.0) / 254.0;
+    return vec3<f32>(1.0, max(rug, 0.0), clamp(bis, 0.0, 1.0));
+}
+
 struct Hit {
     hit: bool,
     vox: vec3<f32>,
@@ -1006,7 +1188,10 @@ struct Hit {
 
 // DDA de dos niveles sobre el brick pool: marcha la grilla gruesa (indirección),
 // baja a la fina sólo en bricks con slot.
-fn trace(ro: vec3<f32>, rd_in: vec3<f32>, dim: vec3<f32>, B: f32) -> Hit {
+// DDA por el grid. `pass_glass` = los rayos de SOMBRA atraviesan el vidrio (voxels
+// muy lustrosos, alpha < GLASS_A) para que las ventanas dejen entrar la luz; los
+// rayos primarios (pass_glass=false) sí lo dibujan.
+fn trace(ro: vec3<f32>, rd_in: vec3<f32>, dim: vec3<f32>, B: f32, pass_glass: bool) -> Hit {
     var h: Hit;
     h.hit = false;
 
@@ -1050,7 +1235,10 @@ fn trace(ro: vec3<f32>, rd_in: vec3<f32>, dim: vec3<f32>, B: f32) -> Hit {
                 if (any(voxel < vec3<f32>(0.0)) || any(voxel >= dim)) { return h; }
                 if (any(floor(voxel / B) != cc)) { break; }
                 let c = voxel_at(voxel);
-                if (c.a > 0.5) {
+                // Vidrio (muy lustroso): transparente a los rayos de sombra → la
+                // ventana no proyecta sombra y deja pasar la luz del día.
+                let es_vidrio = c.a < 0.62;
+                if (c.a > 0.5 && !(pass_glass && es_vidrio)) {
                     h.hit = true;
                     h.vox = voxel;
                     h.normal = fnorm;
@@ -1187,6 +1375,275 @@ fn frag_depth(p: vec3<f32>, dim: vec3<f32>) -> f32 {
     return clip.z / clip.w;
 }
 
+// --- Rugosidad sub-voxel (bump procedural) ---------------------------------
+// Hash 3D determinista → [0,1) (estilo iq). Sin RNG por-píxel: estable en el reel.
+fn hash13(p3: vec3<f32>) -> f32 {
+    var p = fract(p3 * 0.1031);
+    p = p + dot(p, p.zyx + vec3<f32>(31.32));
+    return fract((p.x + p.y) * p.z);
+}
+// Ruido de valor 3D (trilineal sobre hashes de lattice, con suavizado smoothstep).
+fn vnoise(x: vec3<f32>) -> f32 {
+    let i = floor(x);
+    let f = fract(x);
+    let w = f * f * (3.0 - 2.0 * f);
+    let n000 = hash13(i + vec3<f32>(0.0, 0.0, 0.0));
+    let n100 = hash13(i + vec3<f32>(1.0, 0.0, 0.0));
+    let n010 = hash13(i + vec3<f32>(0.0, 1.0, 0.0));
+    let n110 = hash13(i + vec3<f32>(1.0, 1.0, 0.0));
+    let n001 = hash13(i + vec3<f32>(0.0, 0.0, 1.0));
+    let n101 = hash13(i + vec3<f32>(1.0, 0.0, 1.0));
+    let n011 = hash13(i + vec3<f32>(0.0, 1.0, 1.0));
+    let n111 = hash13(i + vec3<f32>(1.0, 1.0, 1.0));
+    let x00 = mix(n000, n100, w.x);
+    let x10 = mix(n010, n110, w.x);
+    let x01 = mix(n001, n101, w.x);
+    let x11 = mix(n011, n111, w.x);
+    return mix(mix(x00, x10, w.y), mix(x01, x11, w.y), w.z);
+}
+// Inclina la normal geométrica `geo_n` por el gradiente TANGENCIAL de una altura
+// de ruido en `p` (espacio de voxel). `amp` = fuerza, `freq` = grano. Proyecta el
+// gradiente al plano tangente → la normal se queda en el hemisferio exterior (sin
+// auto-sombra) para amplitudes moderadas. Diferencias hacia-adelante (4 taps).
+fn perturb_normal(geo_n: vec3<f32>, p: vec3<f32>, freq: f32, amp: f32) -> vec3<f32> {
+    let sp = p * freq;
+    let e = 0.5;
+    let h0 = vnoise(sp);
+    let grad = vec3<f32>(
+        vnoise(sp + vec3<f32>(e, 0.0, 0.0)) - h0,
+        vnoise(sp + vec3<f32>(0.0, e, 0.0)) - h0,
+        vnoise(sp + vec3<f32>(0.0, 0.0, e)) - h0,
+    );
+    let tang = grad - geo_n * dot(grad, geo_n); // sólo la componente tangente
+    return normalize(geo_n - tang * amp);
+}
+
+// --- Bisel / suavizado sub-voxel (pendientes diagonales) -------------------
+// Ocupación de la celda que contiene `v` (1 sólido / 0 vacío). Fuera de grilla → 0.
+fn occ_f(v: vec3<f32>) -> f32 {
+    return select(0.0, 1.0, voxel_at(v).a > 0.5);
+}
+// Campo escalar TRILINEAL = ocupación sobre los 8 centros de celda vecinos. Su
+// isosuperficie (`field = 0.5`) es una superficie suave: plana donde la forma es
+// plana, diagonal donde escalona, redondeada en las esquinas → el "voxel suave".
+fn field_trilinear(p: vec3<f32>) -> f32 {
+    let g = p - vec3<f32>(0.5);
+    let i = floor(g);
+    let f = fract(g);
+    let c000 = occ_f(i + vec3<f32>(0.0, 0.0, 0.0));
+    let c100 = occ_f(i + vec3<f32>(1.0, 0.0, 0.0));
+    let c010 = occ_f(i + vec3<f32>(0.0, 1.0, 0.0));
+    let c110 = occ_f(i + vec3<f32>(1.0, 1.0, 0.0));
+    let c001 = occ_f(i + vec3<f32>(0.0, 0.0, 1.0));
+    let c101 = occ_f(i + vec3<f32>(1.0, 0.0, 1.0));
+    let c011 = occ_f(i + vec3<f32>(0.0, 1.0, 1.0));
+    let c111 = occ_f(i + vec3<f32>(1.0, 1.0, 1.0));
+    let x00 = mix(c000, c100, f.x);
+    let x10 = mix(c010, c110, f.x);
+    let x01 = mix(c001, c101, f.x);
+    let x11 = mix(c011, c111, f.x);
+    return mix(mix(x00, x10, f.y), mix(x01, x11, f.y), f.z);
+}
+
+// **Suavidad local del material** en `p` para la silueta POR VOXEL: media, ponderada
+// por peso trilineal Y ocupación, del `bisel` autorado de las 8 celdas vecinas SÓLIDAS
+// (celda sin autor = 1.0 = suave). Un material duro (bisel bajo) tira su vecindario a
+// 0 → el campo se vuelve escalón (silueta axial); uno liso lo deja trilineal (silueta
+// redondeada). El ratio num/den ignora la magnitud del peso → aun en la celda vacía
+// diagonal de una esquina convexa, si la única esquina sólida es dura, la suavidad ahí
+// es baja y la esquina se conserva afilada. Sólo se llama con el flag prendido.
+fn smoothness_local(p: vec3<f32>) -> f32 {
+    let g = p - vec3<f32>(0.5);
+    let i = floor(g);
+    let f = fract(g);
+    var num = 0.0;
+    var den = 0.0;
+    for (var dx = 0; dx < 2; dx = dx + 1) {
+        for (var dy = 0; dy < 2; dy = dy + 1) {
+            for (var dz = 0; dz < 2; dz = dz + 1) {
+                let corner = i + vec3<f32>(f32(dx), f32(dy), f32(dz));
+                if (occ_f(corner) > 0.5) {
+                    let wx = select(1.0 - f.x, f.x, dx == 1);
+                    let wy = select(1.0 - f.y, f.y, dy == 1);
+                    let wz = select(1.0 - f.z, f.z, dz == 1);
+                    let w = wx * wy * wz;
+                    let pv = pv_detail(corner);
+                    let s = select(1.0, pv.z, pv.x > 0.5); // sin autor = suave
+                    num = num + w * s;
+                    den = den + w;
+                }
+            }
+        }
+    }
+    if (den < 1e-5) { return 1.0; }
+    return num / den;
+}
+
+// Campo escalar del ray-march suave. Por defecto = trilineal (voxel suave). Con la
+// silueta POR VOXEL prendida (`n_lights.z`), mezcla escalón↔trilineal según la suavidad
+// del material sólido cercano: `mix(occ_step, trilineal, s)` — `s=1` deja el cruce en la
+// isosuperficie (redondeado), `s=0` lo empuja a la cara del voxel (silueta dura axial),
+// porque el escalón `occ_f` salta 0→1 justo ahí. Así dos materiales comparten un frame
+// con siluetas distintas. Fast path byte-idéntico cuando el flag está off o todo suave.
+fn field(p: vec3<f32>) -> f32 {
+    let suave = field_trilinear(p);
+    if (u.n_lights.z < 0.5) { return suave; }
+    let s = smoothness_local(p);
+    if (s >= 0.999) { return suave; }
+    let hard = occ_f(p); // escalón 0/1: su iso 0.5 cae en la cara del voxel (axial)
+    return mix(hard, suave, s);
+}
+
+// Normal exterior de la isosuperficie en `p` = opuesta del gradiente del campo
+// (que apunta hacia el sólido). Diferencias hacia-adelante. Gradiente nulo (plano
+// saturado) → arriba por defecto. **Usa el campo TRILINEAL** (no el mixto): con la
+// silueta por voxel, el campo duro es un escalón `occ_f` cuyo gradiente por diferencias
+// es degenerado (salta 0/1) y haría titilar `axis_of` en las caras planas. La geometría
+// (silueta) sale del campo mixto; el NORMAL del trilineal → `axis_of(sn)` elige la cara
+// axial limpia para el material duro, y `sn` queda redondeado para el liso.
+fn smooth_normal(p: vec3<f32>) -> vec3<f32> {
+    // Gradiente de campo DIFUMINADO por diferencias centrales ANCHAS. El trilineal
+    // binario con una diferencia hacia-adelante corta (e=0.5) sólo toma direcciones
+    // cuantizadas por el patrón de ocupación 2×2×2 local → la normal salta en
+    // escalones a lo largo de una superficie curva grande → **anillos de cebolla**
+    // en el sombreado (el artefacto que hacía "monstruo" a un ser redondo). Promediar
+    // el gradiente sobre un radio mayor (diferencias centrales a dos radios, 0.9 y 1.8)
+    // integra suficiente vecindario para que la normal varíe continua → esfera lisa.
+    // Sólo se llama desde `trace_smooth` (bisel>0) → el terreno duro (bisel=0, `trace`)
+    // queda byte-idéntico. Radios < que el semieje de un miembro fino (≈6 vox) para no
+    // cancelar el gradiente cruzando la pieza.
+    let e0 = 1.0;
+    let e1 = 2.2;
+    let gx =
+        (field_trilinear(p + vec3<f32>(e0, 0.0, 0.0)) - field_trilinear(p - vec3<f32>(e0, 0.0, 0.0)))
+        + (field_trilinear(p + vec3<f32>(e1, 0.0, 0.0)) - field_trilinear(p - vec3<f32>(e1, 0.0, 0.0)));
+    let gy =
+        (field_trilinear(p + vec3<f32>(0.0, e0, 0.0)) - field_trilinear(p - vec3<f32>(0.0, e0, 0.0)))
+        + (field_trilinear(p + vec3<f32>(0.0, e1, 0.0)) - field_trilinear(p - vec3<f32>(0.0, e1, 0.0)));
+    let gz =
+        (field_trilinear(p + vec3<f32>(0.0, 0.0, e0)) - field_trilinear(p - vec3<f32>(0.0, 0.0, e0)))
+        + (field_trilinear(p + vec3<f32>(0.0, 0.0, e1)) - field_trilinear(p - vec3<f32>(0.0, 0.0, e1)));
+    let g = vec3<f32>(gx, gy, gz);
+    let gl = length(g);
+    if (gl < 1e-5) { return vec3<f32>(0.0, 1.0, 0.0); }
+    return -g / gl;
+}
+
+// Eje dominante de una normal (para AO/facetado): la cara axial más cercana.
+fn axis_of(n: vec3<f32>) -> vec3<f32> {
+    let a = abs(n);
+    if (a.x >= a.y && a.x >= a.z) { return vec3<f32>(sign(n.x), 0.0, 0.0); }
+    if (a.y >= a.z) { return vec3<f32>(0.0, sign(n.y), 0.0); }
+    return vec3<f32>(0.0, 0.0, sign(n.z));
+}
+
+// **Capa 2b — traza la ISOSUPERFICIE suave del campo** (no el voxel duro): el hit,
+// la silueta Y la normal salen del cruce `field = iso`. Mantiene el DDA GRUESO para
+// saltar bricks vacíos (aceleración), pero dentro de un brick con contenido marcha el
+// campo a sub-pasos y biseca el primer cruce de fuera(<iso)→dentro(≥iso). `bisel`
+// mezcla la normal hacia su eje dominante (facetado↔suave); la geometría siempre es
+// la superficie suave cuando se llama. Sólo la rimaria (las sombras usan `trace`).
+fn trace_smooth(ro: vec3<f32>, rd_in: vec3<f32>, dim: vec3<f32>, B: f32, bisel: f32) -> Hit {
+    var h: Hit;
+    h.hit = false;
+    let safe_rd = vec3<f32>(
+        select(rd_in.x, 1e-6, abs(rd_in.x) < 1e-6),
+        select(rd_in.y, 1e-6, abs(rd_in.y) < 1e-6),
+        select(rd_in.z, 1e-6, abs(rd_in.z) < 1e-6),
+    );
+    let inv_rd = 1.0 / safe_rd;
+    let step = sign(safe_rd);
+    let tb = ray_box(ro, inv_rd, vec3<f32>(0.0), dim);
+    if (tb.x > tb.y || tb.y < 0.0) { return h; }
+    let t_enter = max(tb.x, 0.0);
+    let iso = 0.5;
+    let cdim = ceil(dim / B);
+    let p_enter = ro + safe_rd * t_enter;
+    var cc = clamp(floor(p_enter / B), vec3<f32>(0.0), cdim - 1.0);
+    let t_delta_c = abs(B * inv_rd);
+    var t_max_c = ((cc + max(step, vec3<f32>(0.0))) * B - ro) * inv_rd;
+    var t_cell = t_enter;
+    let dt = 0.5;
+    var f_prev = field(ro + safe_rd * t_enter) - iso;
+    let max_coarse = i32(cdim.x + cdim.y + cdim.z) + 3;
+    for (var ci = 0; ci < max_coarse; ci = ci + 1) {
+        if (slot_at(vec3<i32>(cc)) != 0u) {
+            let t_exit = min(min(t_max_c.x, t_max_c.y), t_max_c.z);
+            var t = t_cell;
+            // Cota de sub-pasos: un brick en diagonal mide hasta B·√3 de recorrido;
+            // a dt=0.5 hacen falta ~3.5·B pasos para cruzarlo (menos → pinholes en
+            // rayos diagonales, que se saltan el cruce en la parte lejana del brick).
+            let max_sub = i32(B) * 4 + 4;
+            for (var si = 0; si < max_sub; si = si + 1) {
+                let t_next = min(t + dt, t_exit);
+                let f_next = field(ro + safe_rd * t_next) - iso;
+                if (f_prev < 0.0 && f_next >= 0.0) {
+                    // Bisección del cruce en [t, t_next].
+                    var a = t;
+                    var b = t_next;
+                    var fa = field(ro + safe_rd * a) - iso;
+                    for (var k = 0; k < 6; k = k + 1) {
+                        let tm = 0.5 * (a + b);
+                        let fm = field(ro + safe_rd * tm) - iso;
+                        if (fa * fm <= 0.0) { b = tm; } else { a = tm; fa = fm; }
+                    }
+                    let th = 0.5 * (a + b);
+                    let ph = ro + safe_rd * th;
+                    let sn = smooth_normal(ph);
+                    // Color/brillo: la celda SÓLIDA más cercana entre las 8 esquinas del
+                    // punto (en la isosuperficie hay ≥1 sólida). Muestrear la celda por
+                    // proximidad al punto de hit y no por `floor(ph - n·k)` evita las
+                    // motas negras (una celda con ocupación 0 aunque el campo ahí sea >½).
+                    let bc = floor(ph - vec3<f32>(0.5));
+                    var best_c = clamp(floor(ph - sn * 0.5), vec3<f32>(0.0), dim - 1.0);
+                    var best_d = 1e9;
+                    for (var dx = 0; dx < 2; dx = dx + 1) {
+                        for (var dy = 0; dy < 2; dy = dy + 1) {
+                            for (var dz = 0; dz < 2; dz = dz + 1) {
+                                let cell = bc + vec3<f32>(f32(dx), f32(dy), f32(dz));
+                                if (voxel_at(cell).a > 0.5) {
+                                    let d = distance(cell + vec3<f32>(0.5), ph);
+                                    if (d < best_d) { best_d = d; best_c = cell; }
+                                }
+                            }
+                        }
+                    }
+                    // Bisel por voxel: si la celda golpeada trae detalle autorado, su
+                    // bisel manda la mezcla facetado↔suave de la normal (dos materiales
+                    // en la misma escena mezclan distinto); si no, el bisel global. La
+                    // geometría/silueta ya salió de la isosuperficie global (barato).
+                    let vox = clamp(best_c, vec3<f32>(0.0), dim - 1.0);
+                    let pv = pv_detail(vox);
+                    let bmix = select(bisel, pv.z, pv.x > 0.5);
+                    h.hit = true;
+                    h.t = th;
+                    h.vox = vox;
+                    h.normal = normalize(mix(axis_of(sn), sn, bmix));
+                    return h;
+                }
+                f_prev = f_next;
+                t = t_next;
+                if (t >= t_exit) { break; }
+            }
+        }
+        if (t_max_c.x < t_max_c.y && t_max_c.x < t_max_c.z) {
+            cc.x = cc.x + step.x;
+            t_cell = t_max_c.x;
+            t_max_c.x = t_max_c.x + t_delta_c.x;
+        } else if (t_max_c.y < t_max_c.z) {
+            cc.y = cc.y + step.y;
+            t_cell = t_max_c.y;
+            t_max_c.y = t_max_c.y + t_delta_c.y;
+        } else {
+            cc.z = cc.z + step.z;
+            t_cell = t_max_c.z;
+            t_max_c.z = t_max_c.z + t_delta_c.z;
+        }
+        if (any(cc < vec3<f32>(0.0)) || any(cc >= cdim)) { return h; }
+    }
+    return h;
+}
+
 struct FOut {
     @location(0) color: vec4<f32>,
     @builtin(frag_depth) depth: f32,
@@ -1219,7 +1676,7 @@ fn god_rays(ro: vec3<f32>, rd: vec3<f32>, max_t: f32, dim: vec3<f32>, B: f32) ->
         let tt = (f32(i) + jitter) * dt;
         if (tt >= max_t) { break; }
         let sp = ro + rd * tt;
-        let sh = trace(sp, u.sun_dir.xyz, dim, B);
+        let sh = trace(sp, u.sun_dir.xyz, dim, B, true);
         acc = acc + select(1.0, 0.0, sh.hit); // 1 si el sol llega, 0 si está en sombra
     }
     acc = acc / f32(steps);
@@ -1238,7 +1695,16 @@ fn fs(in: VOut) -> FOut {
     let B = u.grid_dim.w;
     let ro = ro_world + dim * 0.5;
 
-    let h = trace(ro, rd, dim, B);
+    // Bisel/suavizado sub-voxel: con `bisel > 0` la primaria TRAZA la isosuperficie
+    // suave del campo (silueta + normal diagonales, no sólo sombreado); `bisel = 0` =
+    // hit duro clásico byte-idéntico. Las sombras siempre usan el trace duro (barato).
+    let bisel = u.sky_horizon.w;
+    var h: Hit;
+    if (bisel > 0.0) {
+        h = trace_smooth(ro, rd, dim, B, bisel);
+    } else {
+        h = trace(ro, rd, dim, B, false);
+    }
     let t_vox = select(1e30, h.t, h.hit);
     let eh = trace_entities(ro, rd, t_vox);
 
@@ -1249,6 +1715,9 @@ fn fs(in: VOut) -> FOut {
     var p: vec3<f32>;
     var ao: f32;
     var t_hit: f32;
+    // Brillo/reflectividad por voxel: viaja en el alpha (matte = 1.0 → 0 brillo;
+    // valores más bajos = más lustre). Sólo lo llevan los minerales lustrosos.
+    var shine_a: f32 = 1.0;
     if (eh.hit) {
         albedo = eh.color;
         normal = eh.normal;
@@ -1256,11 +1725,27 @@ fn fs(in: VOut) -> FOut {
         ao = 1.0;
         t_hit = eh.t;
     } else if (h.hit) {
-        albedo = voxel_at(h.vox).rgb;
+        let vtex = voxel_at(h.vox);
+        albedo = vtex.rgb;
+        shine_a = vtex.a;
+        // `h.normal` ya es la normal (suave si bisel>0, axial si no). La AO se calcula
+        // con el eje dominante (indexa voxels enteros); para el hit duro es idéntica.
         normal = h.normal;
         p = ro + rd * h.t;
-        ao = compute_ao(h.vox, h.normal, p, dim);
+        ao = compute_ao(h.vox, axis_of(h.normal), p, dim);
         t_hit = h.t;
+        // Rugosidad sub-voxel: inclina la normal de SOMBREADO (ya biselada si aplica)
+        // por bump procedural. Sólo lo mate (roca/tierra) se rugosiza; el vidrio/metal
+        // lustroso (alpha bajo) queda liso. Si el voxel golpeado trae detalle autorado,
+        // su rugosidad manda; si no, la amplitud global (`u.cdim.w`).
+        let pvd = pv_detail(h.vox);
+        let rug_amp = select(u.cdim.w, pvd.y, pvd.x > 0.5);
+        if (rug_amp > 0.0) {
+            let matte = clamp((shine_a - 0.62) / 0.38, 0.0, 1.0);
+            if (matte > 0.0) {
+                normal = perturb_normal(normal, p, max(u.atlas.w, 1e-3), rug_amp * matte);
+            }
+        }
     } else {
         // Sin impacto: con niebla activa pintamos cielo propio (a profundidad
         // lejana, así una malla por delante igual se dibuja); sin niebla,
@@ -1280,8 +1765,12 @@ fn fs(in: VOut) -> FOut {
     let ldir = u.sun_dir.xyz;
     let diff = max(dot(normal, ldir), 0.0);
 
-    let so = p + normal * 0.5 + ldir * 0.01;
-    let sh_v = trace(so, ldir, dim, B);
+    // Bias del origen de sombra: con bisel, la superficie suave está ~1 voxel DENTRO
+    // de la cáscara dura (que es la que traza la sombra) → hay que salir más para no
+    // nacer enterrado y auto-sombrearse (motas negras). Sin bisel, el 0.5 clásico.
+    let so_bias = select(0.5, 1.75, bisel > 0.0);
+    let so = p + normal * so_bias + ldir * 0.01;
+    let sh_v = trace(so, ldir, dim, B, true);
     let sh_e = trace_entities(so, ldir, 1e30);
     let shadow = select(1.0, 0.25, sh_v.hit || sh_e.hit);
 
@@ -1289,7 +1778,10 @@ fn fs(in: VOut) -> FOut {
     // sale de su elevación (cálido al ras del horizonte → blanco en lo alto) y el
     // ambiente del color del cielo (rebote frío del cenit). El mood se controla
     // moviendo `sun_dir` y la paleta de cielo, que ya viajan en el uniform.
-    let ao_term = 0.35 + 0.65 * ao;
+    // AO escalada por `n_lights.w` (1 = clásica `0.35 + 0.65*ao` byte-idéntica; 0 = sin AO).
+    // La AO axial pinta anillos sobre superficies redondeadas (bisel) → bajarla para seres
+    // orgánicos, subirla para bloques.
+    let ao_term = 1.0 - u.n_lights.w * 0.65 * (1.0 - ao);
     let sun_h = clamp(u.sun_dir.y, 0.0, 1.0);
     let sun_col = mix(vec3<f32>(1.0, 0.52, 0.24), vec3<f32>(1.0, 0.97, 0.9), sun_h);
     // Ambiente tintado por el cielo pero con ~la misma luminancia que el flat 0.32
@@ -1321,7 +1813,7 @@ fn fs(in: VOut) -> FOut {
             let lrad = lc.w; // radio de área (penumbra); 0 = sombra dura.
             if (lrad <= 0.0) {
                 // Sombra dura: un solo shadow ray hacia el centro de la luz.
-                let hv = trace(lso, ldir2, dim, B);
+                let hv = trace(lso, ldir2, dim, B, true);
                 let blocked_v = hv.hit && hv.t < d - bias;
                 let he = trace_entities(lso, ldir2, d - bias);
                 vis = select(1.0, 0.0, blocked_v || he.hit);
@@ -1341,7 +1833,7 @@ fn fs(in: VOut) -> FOut {
                     let to2 = lp2 - p;
                     let d2 = length(to2);
                     let dir2 = to2 / max(d2, 1e-3);
-                    let hv = trace(lso, dir2, dim, B);
+                    let hv = trace(lso, dir2, dim, B, true);
                     let bv = hv.hit && hv.t < d2 - bias;
                     let he = trace_entities(lso, dir2, d2 - bias);
                     if (bv || he.hit) { occ = occ + 1.0; }
@@ -1354,6 +1846,25 @@ fn fs(in: VOut) -> FOut {
 
     var color = albedo * light * ao_term;
 
+    // Brillo especular + glaseado por voxel (algo que la luz plana de Minecraft no
+    // hace): reflejo dependiente de la vista sobre los minerales lustrosos. `shine`
+    // sale del alpha del voxel (matte 1.0 → 0). Nuestro ray-march ya tiene la
+    // normal de cara y el rayo de cámara, así que el destello es real por-píxel.
+    let shine = clamp((1.0 - shine_a) * 2.04, 0.0, 1.0);
+    if (shine > 0.0) {
+        let vdir = -rd;                              // hacia la cámara
+        let hvec = normalize(u.sun_dir.xyz + vdir);  // half-vector Blinn-Phong
+        let ndh = max(dot(normal, hvec), 0.0);
+        // Lóbulo moderado: las normales del voxel son axiales, un exponente alto
+        // no engancharía ninguna cara visible. La dureza sube un poco el foco.
+        let power = mix(2.0, 9.0, shine);
+        let spec = pow(ndh, power) * shine * shadow * 3.0;
+        // Glaseado (fresnel): lustre vidrioso a ángulo rasante, tinte frío del cielo.
+        let fres = pow(1.0 - max(dot(normal, vdir), 0.0), 4.0) * shine * 0.45;
+        let gloss = sun_col * spec + mix(sun_col, u.sky_zenith.xyz, 0.6) * fres;
+        color = color + gloss;
+    }
+
     // Niebla / perspectiva aérea: lo lejano desvanece hacia el cielo en esa
     // dirección, lo que hace legible el borde de un mundo grande.
     if (fog_density > 0.0) {
@@ -1364,9 +1875,38 @@ fn fs(in: VOut) -> FOut {
         color = color + vec3<f32>(1.0, 0.95, 0.82) * gr;
     }
 
+    // Diagnóstico: pinta la normal de sombreado como color (n·0.5+0.5). Lo usa la
+    // certificación para medir qué fracción de la superficie dejó de ser axial.
+    if (u.scroll.w > 0.5) {
+        var dbg: FOut;
+        dbg.color = vec4<f32>(normal * 0.5 + 0.5, 1.0);
+        dbg.depth = frag_depth(p, dim);
+        return dbg;
+    }
+
     var out: FOut;
     out.color = vec4<f32>(color, 1.0);
     out.depth = frag_depth(p, dim);
     return out;
 }
 "#;
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    /// El WGSL del ray-march parsea y valida sin GPU (naga). Ataja errores que de
+    /// otro modo sólo saldrían al crear el pipeline — incluye las funciones de
+    /// rugosidad sub-voxel (`hash13`/`vnoise`/`perturb_normal`).
+    #[test]
+    fn wgsl_valida() {
+        let module = naga::front::wgsl::parse_str(WGSL)
+            .unwrap_or_else(|e| panic!("WGSL del voxel-renderer no parsea: {e:?}"));
+        naga::valid::Validator::new(
+            naga::valid::ValidationFlags::all(),
+            naga::valid::Capabilities::all(),
+        )
+        .validate(&module)
+        .unwrap_or_else(|e| panic!("WGSL del voxel-renderer no valida: {e:?}"));
+    }
+}
diff --git a/llimphi-anim-studio/Cargo.toml b/llimphi-anim-studio/Cargo.toml
new file mode 100644
index 0000000..c6988d0
--- /dev/null
+++ b/llimphi-anim-studio/Cargo.toml
@@ -0,0 +1,36 @@
+[package]
+name = "llimphi-anim-studio"
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+authors.workspace = true
+publish.workspace = true
+description = "Studio de máquinas de animación estilo Rive: una interfaz Llimphi para autorar el grafo de estados de llimphi-anim (estados, transiciones, condiciones, inputs) sobre un nodegraph, con preview en vivo dirigido por inputs y persistencia RON. Frontend intercambiable sobre el runtime agnóstico — el StateMachine no sabe quién lo edita."
+
+[[bin]]
+name = "llimphi-anim-studio"
+path = "src/main.rs"
+
+[dependencies]
+# El runtime estilo Rive — el core agnóstico que esta UI autora.
+llimphi-anim = { workspace = true }
+# Render de la malla deformada (solid/wireframe + fit/bounds) para el preview del rig.
+llimphi-mesh = { workspace = true }
+# Carga de imágenes de disco (PNG/JPEG/WEBP → ImageBrush) para texturizar la malla.
+llimphi-image = { workspace = true }
+# Bucle Elm + ventana + re-exports (raster/layout/text).
+llimphi-ui = { workspace = true }
+# Paletas semánticas de color.
+llimphi-theme = { workspace = true }
+# El lienzo de nodos: estados = nodos, transiciones = cables (drag pin→pin).
+llimphi-widget-nodegraph = { workspace = true }
+# Botones y sliders del inspector + controles de inputs en vivo.
+llimphi-widget-button = { workspace = true }
+llimphi-widget-slider = { workspace = true }
+# Campo de texto para nombrar estados / inputs.
+llimphi-widget-text-input = { workspace = true }
+# Portapapeles del sistema para copiar/cortar/pegar en los campos.
+llimphi-clipboard = { workspace = true }
+# Persistencia del documento (grafo) en texto editable a mano.
+serde = { workspace = true, features = ["derive"] }
+ron = { workspace = true }
diff --git a/llimphi-anim-studio/LEEME.md b/llimphi-anim-studio/LEEME.md
new file mode 100644
index 0000000..bee6437
--- /dev/null
+++ b/llimphi-anim-studio/LEEME.md
@@ -0,0 +1,24 @@
+# llimphi-anim-studio
+
+*Read this in English: [README.md](README.md).*
+
+Biblioteca del studio de animación «rive»: los documentos **serializables**
+que el editor autora —el grafo de estados (`doc::Doc`) y el rig esqueletal
+(`rig::RigDoc`)— y el `Project` que los junta en el `.ron` que se guarda
+y se lee.
+
+Antes estos tipos vivían dentro del binario del editor; exponerlos como
+biblioteca permite que **otros consumidores** carguen el mismo formato sin
+duplicar los structs. El primero es `mirada-fondo`, que reproduce un proyecto
+como **fondo** (splash/greeter/wallpaper): bakea el rig deformado a frames y
+los blitea. El editor (`main.rs`) es ahora un frontend más sobre esta lib.
+
+## Uso
+
+```sh
+cargo run --release -p llimphi-anim-studio
+```
+
+---
+
+Parte de **llimphi** — ver [llimphi](../LEEME.md).
diff --git a/llimphi-anim-studio/README.md b/llimphi-anim-studio/README.md
new file mode 100644
index 0000000..6da183d
--- /dev/null
+++ b/llimphi-anim-studio/README.md
@@ -0,0 +1,22 @@
+# llimphi-anim-studio
+
+The library of the "rive" animation studio: the **serializable** documents the
+editor authors — the state graph (`doc::Doc`) and the skeletal rig
+(`rig::RigDoc`) — plus the `Project` that joins them into the `.ron` that is
+saved and read.
+
+These types used to live inside the editor's binary; exposing them as a library
+lets **other consumers** load the same format without duplicating the structs.
+The first is `mirada-fondo`, which plays a project as a **background**
+(splash/greeter/wallpaper): it bakes the deformed rig to frames and blits them.
+The editor (`main.rs`) is now just one more frontend over this library.
+
+## Use
+
+```sh
+cargo run --release -p llimphi-anim-studio
+```
+
+---
+
+Part of **llimphi** — see [llimphi](../README.md).
diff --git a/llimphi-anim-studio/src/doc.rs b/llimphi-anim-studio/src/doc.rs
new file mode 100644
index 0000000..6162d57
--- /dev/null
+++ b/llimphi-anim-studio/src/doc.rs
@@ -0,0 +1,410 @@
+//! El **documento** del studio: la representación editable del grafo de estados,
+//! agnóstica del render. Es la fuente de verdad que la UI manipula y que se
+//! **compila** a un [`llimphi_anim::StateMachine`] ejecutable cada vez que cambia,
+//! para alimentar el preview en vivo.
+//!
+//! ## Por qué un modelo propio
+//!
+//! `llimphi_anim::StateMachine` es un *builder* de una sola dirección: se
+//! construye con `add_state`/`transition`, se congela en un `Arc` al hacer
+//! `instance()`, y **no expone introspección** (sus campos son privados). Un
+//! editor necesita leer, reordenar y reescribir el grafo, así que el studio
+//! mantiene este `Doc` editable (con posiciones de canvas, defaults de inputs,
+//! etc.) y lo proyecta al runtime con [`Doc::compile`]. La relación es la misma
+//! que `Project → render` en voxel-studio: el documento es rico, el runtime es
+//! la proyección ejecutable.
+//!
+//! El `ClipId` que consume el runtime es simplemente el **índice del estado**:
+//! como el studio no carga assets reales (Lottie/rig) en la Fase 1, el preview
+//! pinta cada estado con un color/movimiento sintético derivado de su índice. El
+//! día que se cableen clips reales, sólo cambia el consumidor del `RenderFrame`.
+
+use llimphi_anim::{Cmp, Condition, StateMachine};
+use serde::{Deserialize, Serialize};
+
+/// Operador de comparación numérica — espejo serializable de [`llimphi_anim::Cmp`]
+/// (que no deriva serde). Se convierte a él al compilar.
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize)]
+pub enum CmpOp {
+    Eq,
+    Ne,
+    Lt,
+    Le,
+    Gt,
+    Ge,
+}
+
+impl CmpOp {
+    pub const ALL: [CmpOp; 6] = [
+        CmpOp::Eq,
+        CmpOp::Ne,
+        CmpOp::Lt,
+        CmpOp::Le,
+        CmpOp::Gt,
+        CmpOp::Ge,
+    ];
+    pub fn symbol(self) -> &'static str {
+        match self {
+            CmpOp::Eq => "==",
+            CmpOp::Ne => "≠",
+            CmpOp::Lt => "<",
+            CmpOp::Le => "≤",
+            CmpOp::Gt => ">",
+            CmpOp::Ge => "≥",
+        }
+    }
+    fn to_anim(self) -> Cmp {
+        match self {
+            CmpOp::Eq => Cmp::Eq,
+            CmpOp::Ne => Cmp::Ne,
+            CmpOp::Lt => Cmp::Lt,
+            CmpOp::Le => Cmp::Le,
+            CmpOp::Gt => Cmp::Gt,
+            CmpOp::Ge => Cmp::Ge,
+        }
+    }
+}
+
+/// Tipo de un input de la máquina (espejo del trío Rive bool/number/trigger).
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize)]
+pub enum InputKind {
+    Bool,
+    Number,
+    Trigger,
+}
+
+impl InputKind {
+    pub fn label(self) -> &'static str {
+        match self {
+            InputKind::Bool => "bool",
+            InputKind::Number => "número",
+            InputKind::Trigger => "trigger",
+        }
+    }
+}
+
+/// Una guarda editable de una transición. Se compila a [`llimphi_anim::Condition`].
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub enum CondDef {
+    /// `bool input == value`.
+    Bool { input: String, value: bool },
+    /// `number input <op> value`.
+    Number { input: String, op: CmpOp, value: f64 },
+    /// el trigger `input` fue disparado este frame.
+    Trigger { input: String },
+    /// el clip del estado de origen terminó (sólo estados no-loop).
+    ClipDone,
+}
+
+impl CondDef {
+    fn to_anim(&self) -> Condition {
+        match self {
+            CondDef::Bool { input, value } => Condition::bool(input.clone(), *value),
+            CondDef::Number { input, op, value } => {
+                Condition::number(input.clone(), op.to_anim(), *value)
+            }
+            CondDef::Trigger { input } => Condition::trigger(input.clone()),
+            CondDef::ClipDone => Condition::clip_done(),
+        }
+    }
+}
+
+/// Un estado del grafo: un clip (por índice) con su velocidad y loop, más su
+/// posición en el lienzo y la duración nominal del clip (para `ClipDone`).
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub struct StateDef {
+    pub name: String,
+    /// Velocidad de reproducción del clip (escala el tiempo).
+    pub speed: f64,
+    /// ¿El clip hace loop? Si no, su `ClipDone` puede disparar transiciones.
+    pub looping: bool,
+    /// Duración nominal del clip en segundos (para `ClipDone` y el preview).
+    pub clip_len: f64,
+    /// Posición del nodo en el lienzo (pixels relativos al canvas).
+    pub x: f32,
+    pub y: f32,
+}
+
+impl StateDef {
+    pub fn new(name: impl Into<String>, x: f32, y: f32) -> Self {
+        StateDef {
+            name: name.into(),
+            speed: 1.0,
+            looping: true,
+            clip_len: 2.0,
+            x,
+            y,
+        }
+    }
+}
+
+/// Una transición editable. `from = None` ⇒ transición *any-state*.
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub struct TransDef {
+    /// Estado de origen (índice en `states`), o `None` para any-state.
+    pub from: Option<usize>,
+    /// Estado destino (índice en `states`).
+    pub to: usize,
+    /// Guardas AND. Vacío ⇒ la transición **nunca** dispara (el runtime la ignora).
+    pub conditions: Vec<CondDef>,
+    /// Duración del crossfade (segundos). `0.0` = salto instantáneo.
+    pub duration_secs: f64,
+}
+
+/// Un input declarado, con su default. Los defaults siembran los controles en
+/// vivo del panel de preview.
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub struct InputDef {
+    pub name: String,
+    pub kind: InputKind,
+    pub bool_default: bool,
+    pub num_default: f64,
+}
+
+impl InputDef {
+    pub fn new(name: impl Into<String>, kind: InputKind) -> Self {
+        InputDef {
+            name: name.into(),
+            kind,
+            bool_default: false,
+            num_default: 0.0,
+        }
+    }
+}
+
+/// El documento entero: estados + transiciones + inputs + estado de entrada.
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub struct Doc {
+    pub states: Vec<StateDef>,
+    pub transitions: Vec<TransDef>,
+    pub inputs: Vec<InputDef>,
+    /// Índice del estado de entrada.
+    pub entry: usize,
+}
+
+impl Default for Doc {
+    fn default() -> Self {
+        Doc {
+            states: Vec::new(),
+            transitions: Vec::new(),
+            inputs: Vec::new(),
+            entry: 0,
+        }
+    }
+}
+
+impl Doc {
+    /// Proyecta el documento a un [`StateMachine`] ejecutable. Índice de estado =
+    /// `ClipId`. Transiciones con índices fuera de rango se descartan (defensa
+    /// ante un documento inconsistente recién editado).
+    pub fn compile(&self) -> StateMachine {
+        let mut sm = StateMachine::new();
+        let n = self.states.len();
+        for (i, s) in self.states.iter().enumerate() {
+            sm.add_state(s.name.clone(), i as u32, s.speed, s.looping);
+            sm.set_clip_duration(i as u32, s.clip_len);
+        }
+        if n > 0 {
+            sm.set_entry(self.entry.min(n - 1));
+        }
+        for t in &self.transitions {
+            if t.to >= n {
+                continue;
+            }
+            let conds: Vec<Condition> = t.conditions.iter().map(CondDef::to_anim).collect();
+            match t.from {
+                Some(f) if f < n => sm.transition(f, t.to, conds, t.duration_secs),
+                None => sm.transition_any(t.to, conds, t.duration_secs),
+                Some(_) => {} // origen fuera de rango → descartar
+            }
+        }
+        sm
+    }
+
+    /// Documento de arranque: el clásico `idle ⇄ walk` por un bool `moving`, más
+    /// un `jump` any-state por trigger. Da algo vivo que tocar al abrir.
+    pub fn starter() -> Self {
+        let mut doc = Doc::default();
+        doc.states.push(StateDef::new("idle", 60.0, 80.0));
+        let mut walk = StateDef::new("walk", 320.0, 80.0);
+        walk.speed = 1.0;
+        doc.states.push(walk);
+        let mut jump = StateDef::new("jump", 190.0, 240.0);
+        jump.looping = false;
+        jump.clip_len = 0.6;
+        doc.states.push(jump);
+        doc.entry = 0;
+
+        doc.inputs.push(InputDef::new("moving", InputKind::Bool));
+        doc.inputs.push(InputDef::new("jump", InputKind::Trigger));
+
+        doc.transitions.push(TransDef {
+            from: Some(0),
+            to: 1,
+            conditions: vec![CondDef::Bool {
+                input: "moving".into(),
+                value: true,
+            }],
+            duration_secs: 0.2,
+        });
+        doc.transitions.push(TransDef {
+            from: Some(1),
+            to: 0,
+            conditions: vec![CondDef::Bool {
+                input: "moving".into(),
+                value: false,
+            }],
+            duration_secs: 0.2,
+        });
+        // any-state: ⚡jump → jump (instantáneo)
+        doc.transitions.push(TransDef {
+            from: None,
+            to: 2,
+            conditions: vec![CondDef::Trigger {
+                input: "jump".into(),
+            }],
+            duration_secs: 0.0,
+        });
+        // jump termina → idle
+        doc.transitions.push(TransDef {
+            from: Some(2),
+            to: 0,
+            conditions: vec![CondDef::ClipDone],
+            duration_secs: 0.0,
+        });
+        doc
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn compila_y_arranca_en_entry() {
+        let doc = Doc::starter();
+        let inst = doc.compile().instance();
+        assert_eq!(inst.current_state(), "idle");
+    }
+
+    #[test]
+    fn bool_dispara_idle_a_walk() {
+        let mut inst = Doc::starter().compile().instance();
+        inst.set_bool("moving", true);
+        inst.advance(0.3); // > duración de blend (0.2)
+        assert_eq!(inst.current_state(), "walk");
+        inst.set_bool("moving", false);
+        inst.advance(0.3);
+        assert_eq!(inst.current_state(), "idle");
+    }
+
+    #[test]
+    fn trigger_anystate_salta_a_jump_y_vuelve() {
+        let mut inst = Doc::starter().compile().instance();
+        inst.fire("jump");
+        inst.advance(0.016);
+        assert_eq!(inst.current_state(), "jump");
+        // El clip de 0.6 s termina (no loop) → vuelve a idle por ClipDone.
+        inst.advance(0.7);
+        assert_eq!(inst.current_state(), "idle");
+    }
+
+    #[test]
+    fn transicion_con_indice_fuera_de_rango_se_descarta() {
+        let mut doc = Doc::default();
+        doc.states.push(StateDef::new("a", 0.0, 0.0));
+        // destino inexistente → no debe panickear al compilar
+        doc.transitions.push(TransDef {
+            from: Some(0),
+            to: 99,
+            conditions: vec![CondDef::ClipDone],
+            duration_secs: 0.0,
+        });
+        let inst = doc.compile().instance();
+        assert_eq!(inst.current_state(), "a");
+    }
+
+    #[test]
+    fn condicion_numerica_compila() {
+        let mut doc = Doc::default();
+        doc.states.push(StateDef::new("slow", 0.0, 0.0));
+        doc.states.push(StateDef::new("fast", 0.0, 0.0));
+        doc.inputs.push(InputDef::new("speed", InputKind::Number));
+        doc.transitions.push(TransDef {
+            from: Some(0),
+            to: 1,
+            conditions: vec![CondDef::Number {
+                input: "speed".into(),
+                op: CmpOp::Gt,
+                value: 5.0,
+            }],
+            duration_secs: 0.0,
+        });
+        let mut inst = doc.compile().instance();
+        inst.set_number("speed", 3.0);
+        inst.advance(0.016);
+        assert_eq!(inst.current_state(), "slow");
+        inst.set_number("speed", 9.0);
+        inst.advance(0.016);
+        assert_eq!(inst.current_state(), "fast");
+    }
+
+    #[test]
+    fn round_trip_ron() {
+        let doc = Doc::starter();
+        let ron = ron::ser::to_string_pretty(&doc, ron::ser::PrettyConfig::default())
+            .expect("serializa");
+        let back: Doc = ron::from_str(&ron).expect("deserializa");
+        assert_eq!(doc, back);
+    }
+
+    /// Un grafo con forma de **botón reactivo** (idle/hover/press, hovered+pressed)
+    /// authored en el studio sobrevive el round-trip RON y, al compilar, corre el
+    /// ciclo completo dirigido por inputs. Certifica el lazo autor→export→consumo
+    /// que enchufa `llimphi-widget-rive-button::from_state_machine`.
+    fn boton_doc() -> Doc {
+        let mut doc = Doc::default();
+        doc.states.push(StateDef::new("idle", 60.0, 80.0));
+        doc.states.push(StateDef::new("hover", 260.0, 80.0));
+        let mut press = StateDef::new("press", 460.0, 80.0);
+        press.looping = false;
+        press.clip_len = 0.4;
+        doc.states.push(press);
+        doc.entry = 0;
+
+        doc.inputs.push(InputDef::new("hovered", InputKind::Bool));
+        doc.inputs.push(InputDef::new("pressed", InputKind::Trigger));
+
+        let b = |input: &str, value: bool| CondDef::Bool { input: input.into(), value };
+        doc.transitions.push(TransDef { from: Some(0), to: 1, conditions: vec![b("hovered", true)], duration_secs: 0.18 });
+        doc.transitions.push(TransDef { from: Some(1), to: 0, conditions: vec![b("hovered", false)], duration_secs: 0.18 });
+        doc.transitions.push(TransDef { from: None, to: 2, conditions: vec![CondDef::Trigger { input: "pressed".into() }], duration_secs: 0.06 });
+        doc.transitions.push(TransDef { from: Some(2), to: 1, conditions: vec![CondDef::ClipDone, b("hovered", true)], duration_secs: 0.18 });
+        doc.transitions.push(TransDef { from: Some(2), to: 0, conditions: vec![CondDef::ClipDone, b("hovered", false)], duration_secs: 0.18 });
+        doc
+    }
+
+    #[test]
+    fn boton_authorado_round_trip_corre_el_ciclo() {
+        let doc = boton_doc();
+        // Export → import (lo que hace Project::save/load del studio).
+        let ron = ron::ser::to_string_pretty(&doc, ron::ser::PrettyConfig::default()).expect("serializa");
+        let back: Doc = ron::from_str(&ron).expect("deserializa");
+        assert_eq!(doc, back);
+
+        // Consumo: la máquina compilada del doc reimportado corre el ciclo.
+        let mut inst = back.compile().instance();
+        assert_eq!(inst.current_state(), "idle");
+        inst.set_bool("hovered", true);
+        inst.advance(0.5);
+        assert_eq!(inst.current_state(), "hover");
+        inst.fire("pressed");
+        inst.advance(0.2);
+        assert_eq!(inst.current_state(), "press");
+        inst.advance(0.6); // clip de 0.4 s termina → ClipDone, sigue hovered → hover
+        assert_eq!(inst.current_state(), "hover");
+        inst.set_bool("hovered", false);
+        inst.advance(0.5);
+        assert_eq!(inst.current_state(), "idle");
+    }
+}
diff --git a/llimphi-anim-studio/src/lib.rs b/llimphi-anim-studio/src/lib.rs
new file mode 100644
index 0000000..d01a46a
--- /dev/null
+++ b/llimphi-anim-studio/src/lib.rs
@@ -0,0 +1,45 @@
+//! Biblioteca del studio de animación «rive»: los documentos **serializables**
+//! que el editor autora —el grafo de estados ([`doc::Doc`]) y el rig esqueletal
+//! ([`rig::RigDoc`])— y el [`Project`] que los junta en el `.ron` que se guarda
+//! y se lee.
+//!
+//! Antes estos tipos vivían dentro del binario del editor; exponerlos como
+//! biblioteca permite que **otros consumidores** carguen el mismo formato sin
+//! duplicar los structs. El primero es `mirada-fondo`, que reproduce un proyecto
+//! como **fondo** (splash/greeter/wallpaper): bakea el rig deformado a frames y
+//! los blitea. El editor (`main.rs`) es ahora un frontend más sobre esta lib.
+
+#![forbid(unsafe_code)]
+
+pub mod doc;
+pub mod rig;
+
+use serde::{Deserialize, Serialize};
+
+/// El proyecto persistido: ambas superficies juntas en un solo `.ron` (el grafo
+/// de estados + el rig esqueletal). Es el formato que escribe el editor y el que
+/// carga `mirada-fondo` para reproducir un «rive» como fondo.
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub struct Project {
+    pub doc: doc::Doc,
+    #[serde(default = "rig::RigDoc::starter")]
+    pub rig: rig::RigDoc,
+}
+
+impl Default for Project {
+    fn default() -> Self {
+        Project {
+            doc: doc::Doc::starter(),
+            rig: rig::RigDoc::starter(),
+        }
+    }
+}
+
+impl Project {
+    /// Carga y parsea un proyecto `.ron` de disco.
+    pub fn load(path: impl AsRef<std::path::Path>) -> Result<Self, String> {
+        let p = path.as_ref();
+        let s = std::fs::read_to_string(p).map_err(|e| format!("no se pudo leer {p:?}: {e}"))?;
+        ron::from_str(&s).map_err(|e| format!("RON inválido en {p:?}: {e}"))
+    }
+}
diff --git a/llimphi-anim-studio/src/main.rs b/llimphi-anim-studio/src/main.rs
new file mode 100644
index 0000000..10d483f
--- /dev/null
+++ b/llimphi-anim-studio/src/main.rs
@@ -0,0 +1,1935 @@
+//! # llimphi-anim-studio — el autor de máquinas de animación, con interfaz
+//!
+//! Editor visual del grafo de estados estilo Rive de [`llimphi_anim`]: los
+//! **estados** son nodos en un lienzo (`llimphi-widget-nodegraph`), las
+//! **transiciones** son cables que se trazan arrastrando pin→pin, y un panel de
+//! **inputs en vivo** (toggles/sliders/triggers) maneja una `Instance` real cuyo
+//! estado actual **se ilumina en el grafo** y se pinta en un preview sintético.
+//! El documento ([`doc::Doc`]) es la fuente de verdad; el `StateMachine` es su
+//! proyección ejecutable, recompilada en cada edición.
+//!
+//! ```bash
+//! cargo run -p llimphi-anim-studio --release   # ventana interactiva
+//! ```
+//!
+//! Persistencia en `anim-studio.ron` (texto editable a mano).
+
+use std::collections::HashMap;
+use std::time::Duration;
+
+use llimphi_anim::{Instance, RenderFrame};
+use llimphi_theme::Theme;
+use llimphi_ui::llimphi_layout::taffy::prelude::{
+    length, percent, AlignItems, Dimension, FlexDirection, Size, Style,
+};
+use llimphi_ui::llimphi_raster::kurbo::Rect as KRect;
+use llimphi_ui::llimphi_raster::peniko::Color;
+use llimphi_ui::llimphi_raster::vello;
+use llimphi_ui::{
+    App, DragPhase, Handle, KeyEvent, View,
+};
+use llimphi_widget_button::{button_view, ButtonPalette};
+use llimphi_widget_nodegraph::{
+    nodegraph_view_styled, NodeId, NodeSpec, NodegraphMetrics, NodegraphPalette, NodeTint, Wire,
+};
+use llimphi_widget_slider::{slider_view, SliderPalette};
+use llimphi_clipboard::SystemClipboard;
+use llimphi_widget_text_input::{
+    text_input_view_full, TextInputEvent, TextInputPalette, TextInputState,
+};
+
+use llimphi_anim_studio::{doc, rig, Project};
+use doc::{CmpOp, CondDef, Doc, InputDef, InputKind, StateDef, TransDef};
+use rig::{BoneDef, MeshMode, RigDoc};
+
+/// Dónde se guarda/carga el grafo (relativo al cwd).
+const PROJECT_PATH: &str = "anim-studio.ron";
+/// Paso de simulación del preview (~30 fps).
+const DT: f64 = 1.0 / 30.0;
+
+// =============================================================================
+//  Selección
+// =============================================================================
+
+/// Qué elemento está bajo edición en el inspector.
+#[derive(Clone, Copy, PartialEq, Eq)]
+enum Sel {
+    None,
+    State(usize),
+    Trans(usize),
+}
+
+/// Las dos superficies del studio: el grafo de estados (F1) y el rig
+/// esqueletal (F2). Comparten ventana y persistencia; se conmutan en la barra
+/// superior.
+#[derive(Clone, Copy, PartialEq, Eq)]
+enum Mode {
+    /// Editor de la máquina de estados.
+    Estados,
+    /// Editor del rig esqueletal (cadena de huesos + malla + IK).
+    Rig,
+}
+
+// `Project` (doc + rig) vive ahora en la lib (`llimphi_anim_studio::Project`),
+// para que `mirada-fondo` cargue el mismo formato sin duplicar los tipos.
+
+// =============================================================================
+//  Modelo
+// =============================================================================
+
+struct Model {
+    doc: Doc,
+    theme: Theme,
+    mode: Mode,
+    sel: Sel,
+
+    /// El rig esqueletal (modo Rig).
+    rig: RigDoc,
+    /// Hueso seleccionado en el modo Rig.
+    rig_sel: Option<usize>,
+    /// Textura cargada para deformar (no se serializa; se recarga del path).
+    texture: Option<llimphi_image::Image>,
+    /// Campo del path de la textura.
+    tex_input: TextInputState,
+    tex_focused: bool,
+    /// Tamaño en px del lienzo del rig en el último press (para invertir
+    /// pantalla→modelo al arrastrar el objetivo IK).
+    rig_canvas_wh: (f32, f32),
+
+    /// Instancia ejecutable (recompilada del `doc` en cada edición estructural).
+    instance: Instance,
+    /// Índice del estado actualmente activo (para iluminar el nodo en el grafo).
+    current_idx: Option<usize>,
+    /// Valores en vivo de los inputs (siembran los controles y se aplican cada tick).
+    live_bools: HashMap<String, bool>,
+    live_numbers: HashMap<String, f64>,
+    /// ¿Corre la simulación del preview?
+    playing: bool,
+
+    /// Campo de nombre del estado seleccionado.
+    name_input: TextInputState,
+    name_focused: bool,
+    /// Campo de nombre para crear un input nuevo.
+    new_input: TextInputState,
+    new_input_focused: bool,
+    /// Portapapeles del sistema para copiar/cortar/pegar en los campos.
+    clipboard: SystemClipboard,
+
+    status: String,
+}
+
+impl Model {
+    /// Recompila el `doc` a una `Instance` fresca, reaplicando los inputs en vivo.
+    fn rebuild(&mut self) {
+        self.instance = self.doc.compile().instance();
+        self.seed_live_inputs();
+        self.apply_live_inputs();
+        self.current_idx = self.find_current();
+    }
+
+    /// Asegura que cada input declarado tenga una entrada en los mapas en vivo
+    /// (con su default), y descarta los que ya no existen.
+    fn seed_live_inputs(&mut self) {
+        let mut bools = HashMap::new();
+        let mut numbers = HashMap::new();
+        for i in &self.doc.inputs {
+            match i.kind {
+                InputKind::Bool => {
+                    let v = self.live_bools.get(&i.name).copied().unwrap_or(i.bool_default);
+                    bools.insert(i.name.clone(), v);
+                }
+                InputKind::Number => {
+                    let v = self.live_numbers.get(&i.name).copied().unwrap_or(i.num_default);
+                    numbers.insert(i.name.clone(), v);
+                }
+                InputKind::Trigger => {}
+            }
+        }
+        self.live_bools = bools;
+        self.live_numbers = numbers;
+    }
+
+    fn apply_live_inputs(&mut self) {
+        for (k, v) in &self.live_bools {
+            self.instance.set_bool(k.clone(), *v);
+        }
+        for (k, v) in &self.live_numbers {
+            self.instance.set_number(k.clone(), *v);
+        }
+    }
+
+    fn find_current(&self) -> Option<usize> {
+        let name = self.instance.current_state();
+        self.doc.states.iter().position(|s| s.name == name)
+    }
+
+    fn selected_state(&self) -> Option<usize> {
+        match self.sel {
+            Sel::State(i) if i < self.doc.states.len() => Some(i),
+            _ => None,
+        }
+    }
+    fn selected_trans(&self) -> Option<usize> {
+        match self.sel {
+            Sel::Trans(i) if i < self.doc.transitions.len() => Some(i),
+            _ => None,
+        }
+    }
+
+    /// Sincroniza el campo de nombre con el estado seleccionado.
+    fn sync_name_input(&mut self) {
+        if let Some(i) = self.selected_state() {
+            self.name_input.set_text(self.doc.states[i].name.clone());
+        }
+    }
+}
+
+// =============================================================================
+//  Mensajes
+// =============================================================================
+
+#[derive(Clone)]
+enum Msg {
+    Tick,
+    SetMode(Mode),
+    // --- rig (modo Rig) ---
+    RigAddBone,
+    RigDelBone,
+    RigSelectBone(usize),
+    RigSetAngle(usize, f64),
+    RigSetLen(usize, f64),
+    RigSetThickness(f64),
+    RigSetCols(f64),
+    RigSetMeshMode(MeshMode),
+    RigSetGridRes(f64),
+    RigSetAspect(f64),
+    /// Evento de mouse del campo de textura (click/arrastre). El `Press`
+    /// además lo enfoca. Ver [`text_input_view_full`].
+    RigTexCampo(TextInputEvent),
+    RigTexKey(KeyEvent),
+    RigLoadTexture,
+    RigClearTexture,
+    RigToggleIk,
+    RigToggleFlip,
+    RigSetTargetX(f64),
+    RigSetTargetY(f64),
+    RigResetPose,
+    /// Click en el lienzo: coloca el objetivo IK ahí. `(local_x, local_y, w, h)`.
+    RigCanvasClick(f32, f32, f32, f32),
+    /// Arrastre en el lienzo: mueve el objetivo IK por delta de pantalla.
+    RigCanvasDrag(f32, f32),
+    // --- grafo ---
+    DragNode(NodeId, DragPhase, f32, f32),
+    Connect(NodeId, NodeId),
+    SelectState(usize),
+    SelectTrans(usize),
+    // --- CRUD estados ---
+    AddState,
+    DeleteSelected,
+    SetEntry,
+    /// Evento de mouse del campo de nombre de estado (click/arrastre). El
+    /// `Press` además lo enfoca. Ver [`text_input_view_full`].
+    RenameCampo(TextInputEvent),
+    RenameKey(KeyEvent),
+    ToggleLoop,
+    SetSpeed(f64),
+    SetClipLen(f64),
+    // --- transiciones ---
+    SetTransDur(f64),
+    ToggleAnyState,
+    AddCondFor(String),
+    AddCondClipDone,
+    DeleteCond(usize),
+    ToggleCondBool(usize),
+    CycleCondOp(usize),
+    SetCondNum(usize, f64),
+    // --- inputs ---
+    /// Evento de mouse del campo de nombre de input nuevo (click/arrastre). El
+    /// `Press` además lo enfoca. Ver [`text_input_view_full`].
+    NewInputCampo(TextInputEvent),
+    NewInputKey(KeyEvent),
+    AddInput(InputKind),
+    DeleteInput(usize),
+    // --- controles en vivo ---
+    SetLiveBool(String, bool),
+    SetLiveNumber(String, f64),
+    FireTrigger(String),
+    TogglePlay,
+    Restart,
+    // --- persistencia ---
+    Save,
+    Load,
+}
+
+// =============================================================================
+//  App
+// =============================================================================
+
+struct Studio;
+
+impl App for Studio {
+    type Model = Model;
+    type Msg = Msg;
+
+    fn title() -> &'static str {
+        "llimphi-anim-studio — autor de máquinas de animación"
+    }
+    fn initial_size() -> (u32, u32) {
+        (1240, 760)
+    }
+
+    fn init(handle: &Handle<Msg>) -> Model {
+        handle.spawn_periodic(Duration::from_millis(33), || Msg::Tick);
+        let doc = Doc::starter();
+        let mut model = Model {
+            instance: doc.compile().instance(),
+            doc,
+            theme: Theme::dark(),
+            mode: Mode::Estados,
+            sel: Sel::None,
+            rig: RigDoc::starter(),
+            rig_sel: Some(1),
+            texture: None,
+            tex_input: TextInputState::new(),
+            tex_focused: false,
+            rig_canvas_wh: (1.0, 1.0),
+            current_idx: Some(0),
+            live_bools: HashMap::new(),
+            live_numbers: HashMap::new(),
+            playing: true,
+            name_input: TextInputState::new(),
+            name_focused: false,
+            new_input: TextInputState::new(),
+            new_input_focused: false,
+            clipboard: SystemClipboard::new(),
+            status: "listo — arrastra pin→pin para conectar; toca los inputs en vivo".into(),
+        };
+        model.rebuild();
+        model
+    }
+
+    fn on_key(model: &Model, ev: &KeyEvent) -> Option<Msg> {
+        if model.name_focused {
+            return Some(Msg::RenameKey(ev.clone()));
+        }
+        if model.new_input_focused {
+            return Some(Msg::NewInputKey(ev.clone()));
+        }
+        if model.tex_focused {
+            return Some(Msg::RigTexKey(ev.clone()));
+        }
+        None
+    }
+
+    fn update(mut model: Model, msg: Msg, _handle: &Handle<Msg>) -> Model {
+        match msg {
+            Msg::Tick => {
+                if model.playing {
+                    model.apply_live_inputs();
+                    model.instance.advance(DT);
+                    model.current_idx = model.find_current();
+                }
+            }
+            Msg::SetMode(m) => model.mode = m,
+
+            // ---------------- rig ----------------
+            Msg::RigAddBone => {
+                model.rig.bones.push(BoneDef::new(100.0));
+                model.rig_sel = Some(model.rig.bones.len() - 1);
+            }
+            Msg::RigDelBone => {
+                if let Some(i) = model.rig_sel {
+                    if i < model.rig.bones.len() && model.rig.bones.len() > 1 {
+                        model.rig.bones.remove(i);
+                        model.rig_sel = Some(i.min(model.rig.bones.len() - 1));
+                    }
+                }
+            }
+            Msg::RigSelectBone(i) => model.rig_sel = Some(i),
+            Msg::RigSetAngle(i, v) => {
+                if let Some(b) = model.rig.bones.get_mut(i) {
+                    b.angle = v.clamp(-3.1, 3.1);
+                }
+            }
+            Msg::RigSetLen(i, v) => {
+                if let Some(b) = model.rig.bones.get_mut(i) {
+                    b.len = v.clamp(10.0, 400.0);
+                }
+            }
+            Msg::RigSetThickness(v) => model.rig.thickness = v.clamp(2.0, 120.0),
+            Msg::RigSetCols(v) => model.rig.cols = (v as usize).clamp(2, 64),
+            Msg::RigSetMeshMode(m) => model.rig.mesh_mode = m,
+            Msg::RigSetGridRes(v) => model.rig.grid_res = (v as usize).clamp(2, 40),
+            Msg::RigSetAspect(v) => model.rig.mesh_aspect = (v as f64).clamp(0.1, 3.0),
+            Msg::RigTexCampo(ev) => {
+                // El press/click enfoca este campo (y desenfoca los demás); el
+                // arrastre extiende la selección.
+                if matches!(ev, TextInputEvent::Press(_)) {
+                    model.tex_focused = true;
+                    model.name_focused = false;
+                    model.new_input_focused = false;
+                }
+                model.tex_input.handle(ev, &mut model.clipboard);
+            }
+            Msg::RigTexKey(ev) => {
+                // `handle` cubre escribir, copiar/cortar/pegar y acentos.
+                model.tex_input.handle(TextInputEvent::Key(ev), &mut model.clipboard);
+            }
+            Msg::RigLoadTexture => {
+                let path = model.tex_input.text();
+                let path = path.trim().to_string();
+                if path.is_empty() {
+                    model.status = "escribe el path de una imagen".into();
+                } else {
+                    match load_texture(&path) {
+                        Ok((img, aspect)) => {
+                            model.rig.mesh_aspect = aspect;
+                            model.rig.mesh_mode = MeshMode::Grid; // textura ⇒ rejilla
+                            model.rig.texture_path = Some(path.clone());
+                            model.texture = Some(img);
+                            model.status = format!("textura cargada: {path}");
+                        }
+                        Err(e) => model.status = format!("no se pudo cargar: {e}"),
+                    }
+                }
+            }
+            Msg::RigClearTexture => {
+                model.texture = None;
+                model.rig.texture_path = None;
+                model.status = "textura quitada".into();
+            }
+            Msg::RigToggleIk => model.rig.ik_enabled = !model.rig.ik_enabled,
+            Msg::RigToggleFlip => model.rig.ik_flip = !model.rig.ik_flip,
+            Msg::RigSetTargetX(v) => model.rig.ik_target.0 = v,
+            Msg::RigSetTargetY(v) => model.rig.ik_target.1 = v,
+            Msg::RigResetPose => {
+                for b in &mut model.rig.bones {
+                    b.angle = 0.0;
+                }
+            }
+            Msg::RigCanvasClick(lx, ly, rw, rh) => {
+                if model.rig.bones.len() >= 2 {
+                    model.rig_canvas_wh = (rw, rh);
+                    model.rig.ik_enabled = true; // colocar objetivo ⇒ quieres IK
+                    let b = rig_view_bounds(&model.rig);
+                    let (mx, my) = canvas_local_to_model(lx, ly, rw, rh, b);
+                    model.rig.ik_target = (mx, my);
+                }
+            }
+            Msg::RigCanvasDrag(dx, dy) => {
+                if model.rig.ik_enabled && model.rig.bones.len() >= 2 {
+                    let (rw, rh) = model.rig_canvas_wh;
+                    let b = rig_view_bounds(&model.rig);
+                    let s = canvas_scale(rw, rh, b);
+                    if s > 0.0 {
+                        model.rig.ik_target.0 += dx as f64 / s;
+                        model.rig.ik_target.1 += dy as f64 / s;
+                    }
+                }
+            }
+
+            // ---------------- grafo ----------------
+            Msg::DragNode(id, phase, dx, dy) => {
+                if matches!(phase, DragPhase::Move | DragPhase::End) {
+                    if let Some(s) = model.doc.states.get_mut(id as usize) {
+                        s.x = (s.x + dx).max(0.0);
+                        s.y = (s.y + dy).max(0.0);
+                    }
+                }
+            }
+            Msg::Connect(from, to) => {
+                let (from, to) = (from as usize, to as usize);
+                if from != to && from < model.doc.states.len() && to < model.doc.states.len() {
+                    model.doc.transitions.push(TransDef {
+                        from: Some(from),
+                        to,
+                        conditions: Vec::new(),
+                        duration_secs: 0.2,
+                    });
+                    let idx = model.doc.transitions.len() - 1;
+                    model.sel = Sel::Trans(idx);
+                    model.status =
+                        "transición creada — agregale una condición o nunca dispara".into();
+                    model.rebuild();
+                }
+            }
+            Msg::SelectState(i) => {
+                model.sel = Sel::State(i);
+                model.name_focused = false;
+                model.sync_name_input();
+            }
+            Msg::SelectTrans(i) => {
+                model.sel = Sel::Trans(i);
+                model.name_focused = false;
+            }
+
+            // ---------------- CRUD estados ----------------
+            Msg::AddState => {
+                let n = model.doc.states.len();
+                let x = 80.0 + (n as f32 % 4.0) * 180.0;
+                let y = 80.0 + (n as f32 / 4.0).floor() * 150.0;
+                model
+                    .doc
+                    .states
+                    .push(StateDef::new(format!("estado{n}"), x, y));
+                model.sel = Sel::State(n);
+                model.sync_name_input();
+                model.rebuild();
+            }
+            Msg::DeleteSelected => match model.sel {
+                Sel::State(i) => {
+                    remove_state(&mut model.doc, i);
+                    model.sel = Sel::None;
+                    model.rebuild();
+                }
+                Sel::Trans(i) => {
+                    if i < model.doc.transitions.len() {
+                        model.doc.transitions.remove(i);
+                    }
+                    model.sel = Sel::None;
+                    model.rebuild();
+                }
+                Sel::None => {}
+            },
+            Msg::SetEntry => {
+                if let Some(i) = model.selected_state() {
+                    model.doc.entry = i;
+                    model.rebuild();
+                    model.status = format!("entry = {}", model.doc.states[i].name);
+                }
+            }
+            Msg::RenameCampo(ev) => {
+                if matches!(ev, TextInputEvent::Press(_)) {
+                    model.name_focused = true;
+                    model.new_input_focused = false;
+                }
+                model.name_input.handle(ev, &mut model.clipboard);
+            }
+            Msg::RenameKey(ev) => {
+                if model.name_input.handle(TextInputEvent::Key(ev), &mut model.clipboard) {
+                    if let Some(i) = model.selected_state() {
+                        let new = model.name_input.text();
+                        // Renombrar el estado y propagar a sus referencias no hace
+                        // falta: las transiciones referencian por índice, no nombre.
+                        model.doc.states[i].name = new;
+                        model.rebuild();
+                    }
+                }
+            }
+            Msg::ToggleLoop => {
+                if let Some(i) = model.selected_state() {
+                    model.doc.states[i].looping = !model.doc.states[i].looping;
+                    model.rebuild();
+                }
+            }
+            Msg::SetSpeed(v) => {
+                if let Some(i) = model.selected_state() {
+                    model.doc.states[i].speed = v.clamp(0.0, 4.0);
+                    model.rebuild();
+                }
+            }
+            Msg::SetClipLen(v) => {
+                if let Some(i) = model.selected_state() {
+                    model.doc.states[i].clip_len = v.clamp(0.1, 10.0);
+                    model.rebuild();
+                }
+            }
+
+            // ---------------- transiciones ----------------
+            Msg::SetTransDur(v) => {
+                if let Some(i) = model.selected_trans() {
+                    model.doc.transitions[i].duration_secs = v.clamp(0.0, 2.0);
+                    model.rebuild();
+                }
+            }
+            Msg::ToggleAnyState => {
+                if let Some(i) = model.selected_trans() {
+                    let t = &mut model.doc.transitions[i];
+                    t.from = match t.from {
+                        Some(_) => None,
+                        None => Some(model.doc.entry),
+                    };
+                    model.rebuild();
+                }
+            }
+            Msg::AddCondFor(name) => {
+                if let Some(i) = model.selected_trans() {
+                    let kind = model
+                        .doc
+                        .inputs
+                        .iter()
+                        .find(|x| x.name == name)
+                        .map(|x| x.kind);
+                    let cond = match kind {
+                        Some(InputKind::Bool) => CondDef::Bool { input: name, value: true },
+                        Some(InputKind::Number) => CondDef::Number {
+                            input: name,
+                            op: CmpOp::Gt,
+                            value: 0.0,
+                        },
+                        Some(InputKind::Trigger) => CondDef::Trigger { input: name },
+                        None => return model,
+                    };
+                    model.doc.transitions[i].conditions.push(cond);
+                    model.rebuild();
+                }
+            }
+            Msg::AddCondClipDone => {
+                if let Some(i) = model.selected_trans() {
+                    model.doc.transitions[i].conditions.push(CondDef::ClipDone);
+                    model.rebuild();
+                }
+            }
+            Msg::DeleteCond(ci) => {
+                if let Some(i) = model.selected_trans() {
+                    if ci < model.doc.transitions[i].conditions.len() {
+                        model.doc.transitions[i].conditions.remove(ci);
+                        model.rebuild();
+                    }
+                }
+            }
+            Msg::ToggleCondBool(ci) => {
+                if let Some(i) = model.selected_trans() {
+                    if let Some(CondDef::Bool { value, .. }) =
+                        model.doc.transitions[i].conditions.get_mut(ci)
+                    {
+                        *value = !*value;
+                        model.rebuild();
+                    }
+                }
+            }
+            Msg::CycleCondOp(ci) => {
+                if let Some(i) = model.selected_trans() {
+                    if let Some(CondDef::Number { op, .. }) =
+                        model.doc.transitions[i].conditions.get_mut(ci)
+                    {
+                        let cur = CmpOp::ALL.iter().position(|o| o == op).unwrap_or(0);
+                        *op = CmpOp::ALL[(cur + 1) % CmpOp::ALL.len()];
+                        model.rebuild();
+                    }
+                }
+            }
+            Msg::SetCondNum(ci, v) => {
+                if let Some(i) = model.selected_trans() {
+                    if let Some(CondDef::Number { value, .. }) =
+                        model.doc.transitions[i].conditions.get_mut(ci)
+                    {
+                        *value = v;
+                        model.rebuild();
+                    }
+                }
+            }
+
+            // ---------------- inputs ----------------
+            Msg::NewInputCampo(ev) => {
+                if matches!(ev, TextInputEvent::Press(_)) {
+                    model.new_input_focused = true;
+                    model.name_focused = false;
+                }
+                model.new_input.handle(ev, &mut model.clipboard);
+            }
+            Msg::NewInputKey(ev) => {
+                model.new_input.handle(TextInputEvent::Key(ev), &mut model.clipboard);
+            }
+            Msg::AddInput(kind) => {
+                let name = model.new_input.text();
+                let name = name.trim();
+                if !name.is_empty() && !model.doc.inputs.iter().any(|i| i.name == name) {
+                    model.doc.inputs.push(InputDef::new(name, kind));
+                    model.new_input.clear();
+                    model.rebuild();
+                } else {
+                    model.status = "nombre de input vacío o repetido".into();
+                }
+            }
+            Msg::DeleteInput(i) => {
+                if i < model.doc.inputs.len() {
+                    model.doc.inputs.remove(i);
+                    model.rebuild();
+                }
+            }
+
+            // ---------------- controles en vivo ----------------
+            Msg::SetLiveBool(name, v) => {
+                model.live_bools.insert(name, v);
+                model.apply_live_inputs();
+            }
+            Msg::SetLiveNumber(name, v) => {
+                model.live_numbers.insert(name, v);
+                model.apply_live_inputs();
+            }
+            Msg::FireTrigger(name) => {
+                model.instance.fire(name);
+            }
+            Msg::TogglePlay => model.playing = !model.playing,
+            Msg::Restart => {
+                model.rebuild();
+                model.status = "reiniciado al estado de entrada".into();
+            }
+
+            // ---------------- persistencia ----------------
+            Msg::Save => {
+                let project = Project {
+                    doc: model.doc.clone(),
+                    rig: model.rig.clone(),
+                };
+                let ron = ron::ser::to_string_pretty(&project, ron::ser::PrettyConfig::default());
+                model.status = match ron {
+                    Ok(s) => match std::fs::write(PROJECT_PATH, s) {
+                        Ok(_) => format!("guardado en {PROJECT_PATH}"),
+                        Err(e) => format!("error al escribir: {e}"),
+                    },
+                    Err(e) => format!("error al serializar: {e}"),
+                };
+            }
+            Msg::Load => match std::fs::read_to_string(PROJECT_PATH) {
+                Ok(s) => match ron::from_str::<Project>(&s) {
+                    Ok(p) => {
+                        model.doc = p.doc;
+                        model.rig = p.rig;
+                        model.sel = Sel::None;
+                        model.rig_sel = model.rig.bones.len().checked_sub(1);
+                        // Recargar la textura referenciada por path, si la hay.
+                        model.texture = model
+                            .rig
+                            .texture_path
+                            .as_ref()
+                            .and_then(|p| load_texture(p).ok().map(|(img, _)| img));
+                        if let Some(p) = &model.rig.texture_path {
+                            model.tex_input.set_text(p.clone());
+                        }
+                        model.rebuild();
+                        model.status = format!("cargado de {PROJECT_PATH}");
+                    }
+                    Err(e) => model.status = format!("RON inválido: {e}"),
+                },
+                Err(e) => model.status = format!("no se pudo leer: {e}"),
+            },
+        }
+        model
+    }
+
+    fn view(model: &Model) -> View<Msg> {
+        let body = match model.mode {
+            Mode::Estados => View::new(row_full())
+                .children(vec![left_panel(model), graph_panel(model), right_panel(model)]),
+            Mode::Rig => View::new(row_full()).children(vec![
+                rig_left_panel(model),
+                rig_canvas_panel(model),
+                rig_right_panel(model),
+            ]),
+        };
+        View::new(Style {
+            flex_direction: FlexDirection::Column,
+            size: Size {
+                width: percent(1.0_f32),
+                height: percent(1.0_f32),
+            },
+            ..Default::default()
+        })
+        .fill(model.theme.bg_app)
+        .children(vec![top_bar(model), body])
+    }
+}
+
+/// Estilo de una fila que ocupa todo el ancho y el alto restante.
+fn row_full() -> Style {
+    Style {
+        flex_direction: FlexDirection::Row,
+        flex_grow: 1.0,
+        size: Size {
+            width: percent(1.0_f32),
+            height: Dimension::auto(),
+        },
+        ..Default::default()
+    }
+}
+
+/// Barra superior: conmutador de modo Estados / Rig.
+fn top_bar(model: &Model) -> View<Msg> {
+    let theme = &model.theme;
+    let tab = |label: &str, active: bool, msg: Msg| -> View<Msg> {
+        let (bg, fg) = if active {
+            (theme.accent, Color::from_rgba8(20, 20, 24, 255))
+        } else {
+            (theme.bg_panel_alt, theme.fg_muted)
+        };
+        View::new(Style {
+            size: Size {
+                width: length(120.0_f32),
+                height: length(28.0_f32),
+            },
+            align_items: Some(AlignItems::Center),
+            padding: pad(12.0, 0.0),
+            ..Default::default()
+        })
+        .fill(bg)
+        .radius(5.0)
+        .text(label.to_string(), 13.0, fg)
+        .on_click(msg)
+    };
+    View::new(Style {
+        flex_direction: FlexDirection::Row,
+        size: Size {
+            width: percent(1.0_f32),
+            height: length(44.0_f32),
+        },
+        flex_shrink: 0.0,
+        align_items: Some(AlignItems::Center),
+        padding: pad(12.0, 0.0),
+        gap: gap(8.0),
+        ..Default::default()
+    })
+    .fill(theme.bg_panel)
+    .children(vec![
+        tab("◆ Estados", model.mode == Mode::Estados, Msg::SetMode(Mode::Estados)),
+        tab("⦿ Rig", model.mode == Mode::Rig, Msg::SetMode(Mode::Rig)),
+    ])
+}
+
+// =============================================================================
+//  Panel izquierdo — listas + CRUD
+// =============================================================================
+
+fn left_panel(model: &Model) -> View<Msg> {
+    let theme = &model.theme;
+    let btn = ButtonPalette::from_theme(theme);
+    let mut rows: Vec<View<Msg>> = Vec::new();
+
+    rows.push(section_title("ESTADOS", theme));
+    for (i, s) in model.doc.states.iter().enumerate() {
+        let is_sel = model.sel == Sel::State(i);
+        let is_entry = model.doc.entry == i;
+        let label = if is_entry {
+            format!("▶ {}", s.name)
+        } else {
+            s.name.clone()
+        };
+        rows.push(selectable_row(&label, is_sel, Msg::SelectState(i), theme));
+    }
+    rows.push(spacer(6.0));
+    rows.push(button_view("+ estado", &btn, Msg::AddState));
+
+    rows.push(spacer(14.0));
+    rows.push(section_title("TRANSICIONES", theme));
+    for (i, t) in model.doc.transitions.iter().enumerate() {
+        let is_sel = model.sel == Sel::Trans(i);
+        let from = match t.from {
+            Some(f) => model.doc.states.get(f).map(|s| s.name.as_str()).unwrap_or("?"),
+            None => "∗",
+        };
+        let to = model
+            .doc
+            .states
+            .get(t.to)
+            .map(|s| s.name.as_str())
+            .unwrap_or("?");
+        let mark = if t.conditions.is_empty() { " ⚠" } else { "" };
+        let label = format!("{from} → {to}{mark}");
+        rows.push(selectable_row(&label, is_sel, Msg::SelectTrans(i), theme));
+    }
+
+    rows.push(spacer(14.0));
+    rows.push(section_title("INPUTS", theme));
+    for (i, inp) in model.doc.inputs.iter().enumerate() {
+        rows.push(input_row(i, inp, theme));
+    }
+    rows.push(spacer(6.0));
+    rows.push(text_input_view_full(
+        &model.new_input,
+        "nombre del input…",
+        model.new_input_focused,
+        &TextInputPalette::from_theme(theme),
+        Msg::NewInputCampo,
+    ));
+    rows.push(spacer(4.0));
+    rows.push(
+        row(vec![
+            button_view("+bool", &btn, Msg::AddInput(InputKind::Bool)),
+            button_view("+núm", &btn, Msg::AddInput(InputKind::Number)),
+            button_view("+trig", &btn, Msg::AddInput(InputKind::Trigger)),
+        ]),
+    );
+
+    panel_column(rows, 250.0, theme.bg_panel)
+}
+
+fn input_row(i: usize, inp: &InputDef, theme: &Theme) -> View<Msg> {
+    let btn = ButtonPalette::from_theme(theme);
+    row(vec![
+        View::new(Style {
+            flex_grow: 1.0,
+            size: Size {
+                width: Dimension::auto(),
+                height: length(24.0_f32),
+            },
+            align_items: Some(AlignItems::Center),
+            ..Default::default()
+        })
+        .text(format!("{} · {}", inp.name, inp.kind.label()), 12.0, theme.fg_text),
+        View::new(Style {
+            size: Size {
+                width: length(30.0_f32),
+                height: length(24.0_f32),
+            },
+            flex_shrink: 0.0,
+            ..Default::default()
+        })
+        .children(vec![button_view("✕", &btn, Msg::DeleteInput(i))]),
+    ])
+}
+
+// =============================================================================
+//  Panel central — el lienzo de nodos
+// =============================================================================
+
+fn graph_panel(model: &Model) -> View<Msg> {
+    let theme = &model.theme;
+    let palette = NodegraphPalette::from_theme(theme);
+    let metrics = NodegraphMetrics::default();
+
+    let nodes: Vec<NodeSpec> = model
+        .doc
+        .states
+        .iter()
+        .enumerate()
+        .map(|(i, s)| NodeSpec {
+            id: i as NodeId,
+            label: s.name.clone(),
+            x: s.x,
+            y: s.y,
+            inputs: vec!["in".into()],
+            outputs: vec!["out".into()],
+        })
+        .collect();
+
+    // Sólo las transiciones con origen concreto se dibujan como cable; las
+    // any-state no tienen nodo de origen (viven sólo en la lista).
+    let wires: Vec<Wire> = model
+        .doc
+        .transitions
+        .iter()
+        .filter_map(|t| {
+            t.from.map(|f| Wire {
+                from_node: f as NodeId,
+                from_output: 0,
+                to_node: t.to as NodeId,
+                to_input: 0,
+            })
+        })
+        .collect();
+
+    let current = model.current_idx;
+    let selected = model.selected_state();
+    let accent = theme.accent;
+    let sel_bg = theme.bg_selected;
+
+    let tint = move |id: NodeId| -> Option<NodeTint> {
+        let i = id as usize;
+        if current == Some(i) {
+            // Estado activo: título encendido en accent (se ve "prendido" en vivo).
+            Some(NodeTint {
+                bg_title: Some(accent),
+                fg_title: Some(Color::from_rgba8(20, 20, 24, 255)),
+                ..Default::default()
+            })
+        } else if selected == Some(i) {
+            Some(NodeTint {
+                bg_node: Some(sel_bg),
+                ..Default::default()
+            })
+        } else {
+            None
+        }
+    };
+
+    let graph = nodegraph_view_styled(
+        &nodes,
+        &wires,
+        &palette,
+        &metrics,
+        |id, phase, dx, dy| Some(Msg::DragNode(id, phase, dx, dy)),
+        |from_node, _from_out, to_node, _to_in| Some(Msg::Connect(from_node, to_node)),
+        Some(|id: NodeId| Some(Msg::SelectState(id as usize))),
+        Some(&tint as &dyn Fn(NodeId) -> Option<NodeTint>),
+        None,
+    );
+
+    View::new(Style {
+        flex_grow: 1.0,
+        flex_direction: FlexDirection::Column,
+        size: Size {
+            width: Dimension::auto(),
+            height: percent(1.0_f32),
+        },
+        ..Default::default()
+    })
+    .fill(theme.bg_app)
+    .children(vec![graph])
+}
+
+// =============================================================================
+//  Panel derecho — preview en vivo + inspector
+// =============================================================================
+
+fn right_panel(model: &Model) -> View<Msg> {
+    let theme = &model.theme;
+    let btn = ButtonPalette::from_theme(theme);
+    let mut rows: Vec<View<Msg>> = Vec::new();
+
+    // --- Preview ---
+    rows.push(section_title("PREVIEW", theme));
+    rows.push(preview_canvas(model));
+    let cur = model
+        .current_idx
+        .and_then(|i| model.doc.states.get(i))
+        .map(|s| s.name.as_str())
+        .unwrap_or("—");
+    let trans = if model.instance.is_transitioning() {
+        "  (mezclando…)"
+    } else {
+        ""
+    };
+    rows.push(
+        View::new(auto_h(22.0)).text(format!("estado: {cur}{trans}"), 13.0, theme.accent),
+    );
+    rows.push(spacer(4.0));
+    rows.push(row(vec![
+        button_view(if model.playing { "⏸ pausa" } else { "▶ play" }, &btn, Msg::TogglePlay),
+        button_view("⟲ reiniciar", &btn, Msg::Restart),
+    ]));
+
+    // --- Controles en vivo ---
+    rows.push(spacer(12.0));
+    rows.push(section_title("INPUTS EN VIVO", theme));
+    if model.doc.inputs.is_empty() {
+        rows.push(muted("declará inputs en el panel izquierdo", theme));
+    }
+    let sp = SliderPalette::from_theme(theme);
+    for inp in &model.doc.inputs {
+        match inp.kind {
+            InputKind::Bool => {
+                let on = model.live_bools.get(&inp.name).copied().unwrap_or(false);
+                let name = inp.name.clone();
+                let lbl = format!("{}: {}", inp.name, if on { "true" } else { "false" });
+                rows.push(button_view(lbl, &btn, Msg::SetLiveBool(name, !on)));
+            }
+            InputKind::Number => {
+                let v = model.live_numbers.get(&inp.name).copied().unwrap_or(0.0) as f32;
+                let name = inp.name.clone();
+                rows.push(slider_view(
+                    inp.name.clone(),
+                    v,
+                    0.0,
+                    10.0,
+                    &sp,
+                    move |_p, nv| Some(Msg::SetLiveNumber(name.clone(), nv as f64)),
+                ));
+            }
+            InputKind::Trigger => {
+                let name = inp.name.clone();
+                rows.push(button_view(format!("⚡ {}", inp.name), &btn, Msg::FireTrigger(name)));
+            }
+        }
+        rows.push(spacer(4.0));
+    }
+
+    // --- Inspector ---
+    rows.push(spacer(10.0));
+    rows.extend(inspector(model));
+
+    // --- Persistencia + estado ---
+    rows.push(spacer(12.0));
+    rows.push(row(vec![
+        button_view("guardar", &btn, Msg::Save),
+        button_view("cargar", &btn, Msg::Load),
+    ]));
+    rows.push(spacer(8.0));
+    rows.push(View::new(auto_h(0.0)).text(model.status.clone(), 11.0, theme.fg_placeholder).max_lines(3));
+
+    panel_column(rows, 320.0, theme.bg_panel)
+}
+
+/// El inspector del elemento seleccionado (estado o transición).
+fn inspector(model: &Model) -> Vec<View<Msg>> {
+    let theme = &model.theme;
+    let btn = ButtonPalette::from_theme(theme);
+    let sp = SliderPalette::from_theme(theme);
+    let mut rows: Vec<View<Msg>> = Vec::new();
+
+    match model.sel {
+        Sel::State(i) if i < model.doc.states.len() => {
+            let s = &model.doc.states[i];
+            rows.push(section_title("ESTADO", theme));
+            rows.push(text_input_view_full(
+                &model.name_input,
+                "nombre…",
+                model.name_focused,
+                &TextInputPalette::from_theme(theme),
+                Msg::RenameCampo,
+            ));
+            rows.push(spacer(6.0));
+            rows.push(button_view(
+                if s.looping { "loop: sí" } else { "loop: no" },
+                &btn,
+                Msg::ToggleLoop,
+            ));
+            rows.push(spacer(4.0));
+            let speed = s.speed as f32;
+            rows.push(slider_view(
+                format!("velocidad {:.2}", s.speed),
+                speed,
+                0.0,
+                4.0,
+                &sp,
+                move |_p, nv| Some(Msg::SetSpeed(nv as f64)),
+            ));
+            if !s.looping {
+                let len = s.clip_len as f32;
+                rows.push(slider_view(
+                    format!("duración {:.2}s", s.clip_len),
+                    len,
+                    0.1,
+                    10.0,
+                    &sp,
+                    move |_p, nv| Some(Msg::SetClipLen(nv as f64)),
+                ));
+            }
+            rows.push(spacer(6.0));
+            rows.push(row(vec![
+                button_view("entry", &btn, Msg::SetEntry),
+                button_view("borrar", &btn, Msg::DeleteSelected),
+            ]));
+        }
+        Sel::Trans(i) if i < model.doc.transitions.len() => {
+            let t = &model.doc.transitions[i];
+            rows.push(section_title("TRANSICIÓN", theme));
+            let from = match t.from {
+                Some(f) => model.doc.states.get(f).map(|s| s.name.clone()).unwrap_or_default(),
+                None => "∗ (any-state)".into(),
+            };
+            let to = model.doc.states.get(t.to).map(|s| s.name.clone()).unwrap_or_default();
+            rows.push(muted(&format!("{from}  →  {to}"), theme));
+            rows.push(spacer(4.0));
+            let dur = t.duration_secs as f32;
+            rows.push(slider_view(
+                format!("blend {:.2}s", t.duration_secs),
+                dur,
+                0.0,
+                2.0,
+                &sp,
+                move |_p, nv| Some(Msg::SetTransDur(nv as f64)),
+            ));
+            rows.push(spacer(4.0));
+            rows.push(button_view(
+                if t.from.is_some() { "→ volver any-state" } else { "← darle origen (entry)" },
+                &btn,
+                Msg::ToggleAnyState,
+            ));
+
+            // Condiciones (AND).
+            rows.push(spacer(8.0));
+            rows.push(muted("CONDICIONES (AND)", theme));
+            if t.conditions.is_empty() {
+                rows.push(muted("⚠ sin condición → nunca dispara", theme));
+            }
+            for (ci, c) in t.conditions.iter().enumerate() {
+                rows.push(cond_row(ci, c, theme));
+            }
+            // Agregar condición: un botón por input + clip-terminó.
+            rows.push(spacer(6.0));
+            rows.push(muted("agregar:", theme));
+            let mut add_btns: Vec<View<Msg>> = Vec::new();
+            for inp in &model.doc.inputs {
+                let name = inp.name.clone();
+                add_btns.push(button_view(format!("+{}", inp.name), &btn, Msg::AddCondFor(name)));
+            }
+            if !add_btns.is_empty() {
+                rows.push(wrap_row(add_btns));
+            }
+            rows.push(spacer(4.0));
+            rows.push(button_view("+ clip terminó", &btn, Msg::AddCondClipDone));
+            rows.push(spacer(6.0));
+            rows.push(button_view("borrar transición", &btn, Msg::DeleteSelected));
+        }
+        _ => {
+            rows.push(muted("selecciona un estado o transición", theme));
+        }
+    }
+    rows
+}
+
+/// Una fila de condición editable.
+fn cond_row(ci: usize, c: &CondDef, theme: &Theme) -> View<Msg> {
+    let btn = ButtonPalette::from_theme(theme);
+    let sp = SliderPalette::from_theme(theme);
+    let mut items: Vec<View<Msg>> = Vec::new();
+    match c {
+        CondDef::Bool { input, value } => {
+            items.push(grow_text(format!("{input} =="), theme));
+            items.push(fixed_btn(
+                if *value { "true" } else { "false" },
+                Msg::ToggleCondBool(ci),
+                &btn,
+                64.0,
+            ));
+        }
+        CondDef::Number { input, op, value } => {
+            items.push(grow_text(format!("{input} {} {value:.1}", op.symbol()), theme));
+            items.push(fixed_btn(op.symbol(), Msg::CycleCondOp(ci), &btn, 40.0));
+        }
+        CondDef::Trigger { input } => {
+            items.push(grow_text(format!("⚡ {input}"), theme));
+        }
+        CondDef::ClipDone => {
+            items.push(grow_text("clip terminó".to_string(), theme));
+        }
+    }
+    items.push(fixed_btn("✕", Msg::DeleteCond(ci), &btn, 30.0));
+
+    let mut col = vec![row(items)];
+    // Slider para el valor numérico (debajo).
+    if let CondDef::Number { value, .. } = c {
+        let v = *value as f32;
+        col.push(slider_view(
+            "valor",
+            v,
+            0.0,
+            10.0,
+            &sp,
+            move |_p, nv| Some(Msg::SetCondNum(ci, nv as f64)),
+        ));
+    }
+    View::new(Style {
+        flex_direction: FlexDirection::Column,
+        size: Size {
+            width: percent(1.0_f32),
+            height: Dimension::auto(),
+        },
+        ..Default::default()
+    })
+    .children(col)
+}
+
+// =============================================================================
+//  Preview sintético
+// =============================================================================
+
+/// Lienzo que pinta lo que emite la `Instance`: un disco por clip cuyo color =
+/// el color del estado y cuyo movimiento (bob + orbe) avanza con `time_secs`.
+/// Durante una transición pinta el clip entrante encima con alpha = mezcla — el
+/// crossfade del runtime se ve literalmente.
+fn preview_canvas(model: &Model) -> View<Msg> {
+    let rf: RenderFrame = model.instance.render_frame();
+    let n = model.doc.states.len().max(1);
+    let colors: Vec<Color> = (0..n).map(state_color).collect();
+    let bg = self_color(model.theme.bg_app, model.theme.bg_panel_alt);
+
+    View::new(Style {
+        size: Size {
+            width: percent(1.0_f32),
+            height: length(220.0_f32),
+        },
+        ..Default::default()
+    })
+    .fill(bg)
+    .radius(8.0)
+    .paint_with(move |scene, _ts, rect| {
+        use llimphi_ui::llimphi_raster::kurbo::{Affine, Circle, Point};
+        use llimphi_ui::llimphi_raster::peniko::Fill;
+
+        let cx = (rect.x + rect.w * 0.5) as f64;
+        let cy = (rect.y + rect.h * 0.5) as f64;
+        let unit = (rect.w.min(rect.h)) as f64;
+        let r = unit * 0.20;
+
+        let draw = |scene: &mut vello::Scene, sample_clip: usize, time: f64, alpha: f32| {
+            let color = colors
+                .get(sample_clip)
+                .copied()
+                .unwrap_or(Color::from_rgba8(180, 180, 190, 255))
+                .multiply_alpha(alpha);
+            // Bob vertical con el tiempo del clip.
+            let bob = (time * 2.4).sin() * unit * 0.16;
+            let center = Point::new(cx, cy + bob);
+            scene.fill(Fill::NonZero, Affine::IDENTITY, &color, None, &Circle::new(center, r));
+            // Orbe que marca el avance del tiempo (gira con time).
+            let a = time * 2.0;
+            let orb = Point::new(cx + a.cos() * r * 1.6, cy + bob + a.sin() * r * 1.6);
+            let orb_c = Color::from_rgba8(255, 255, 255, 230).multiply_alpha(alpha);
+            scene.fill(Fill::NonZero, Affine::IDENTITY, &orb_c, None, &Circle::new(orb, unit * 0.03));
+        };
+
+        // Primario a alpha pleno; entrante encima con su mezcla.
+        draw(scene, rf.primary.clip as usize, rf.primary.time_secs, 1.0);
+        if let Some((incoming, mix)) = rf.blend {
+            draw(scene, incoming.clip as usize, incoming.time_secs, mix);
+        }
+    })
+}
+
+/// Color estable por índice de estado (paleta de tintes distinguibles).
+fn state_color(i: usize) -> Color {
+    const PAL: [(u8, u8, u8); 8] = [
+        (94, 168, 255),  // azul
+        (120, 210, 140), // verde
+        (255, 178, 92),  // naranja
+        (220, 120, 220), // magenta
+        (240, 220, 110), // amarillo
+        (120, 210, 220), // cyan
+        (240, 130, 130), // rojo
+        (170, 150, 240), // violeta
+    ];
+    let (r, g, b) = PAL[i % PAL.len()];
+    Color::from_rgba8(r, g, b, 255)
+}
+
+// =============================================================================
+//  Modo Rig — paneles
+// =============================================================================
+
+fn rig_left_panel(model: &Model) -> View<Msg> {
+    let theme = &model.theme;
+    let btn = ButtonPalette::from_theme(theme);
+    let mut rows: Vec<View<Msg>> = Vec::new();
+    rows.push(section_title("HUESOS (cadena)", theme));
+    for (i, b) in model.rig.bones.iter().enumerate() {
+        let sel = model.rig_sel == Some(i);
+        let label = format!("hueso {i} · {:.0}", b.len);
+        rows.push(selectable_row(&label, sel, Msg::RigSelectBone(i), theme));
+    }
+    rows.push(spacer(8.0));
+    rows.push(row(vec![
+        button_view("+ hueso", &btn, Msg::RigAddBone),
+        button_view("− hueso", &btn, Msg::RigDelBone),
+    ]));
+    rows.push(spacer(10.0));
+    rows.push(muted(
+        "la cadena sale del origen hacia +x; cada hueso lleva su hijo y arrastra la malla por skinning (LBS).",
+        theme,
+    ));
+    panel_column(rows, 230.0, theme.bg_panel)
+}
+
+fn rig_right_panel(model: &Model) -> View<Msg> {
+    let theme = &model.theme;
+    let btn = ButtonPalette::from_theme(theme);
+    let sp = SliderPalette::from_theme(theme);
+    let mut rows: Vec<View<Msg>> = Vec::new();
+
+    // --- Hueso seleccionado ---
+    rows.push(section_title("HUESO", theme));
+    if let Some(i) = model.rig_sel.filter(|i| *i < model.rig.bones.len()) {
+        let b = &model.rig.bones[i];
+        let ang = b.angle as f32;
+        rows.push(slider_view(
+            format!("ángulo {:.2} rad", b.angle),
+            ang,
+            -3.1,
+            3.1,
+            &sp,
+            move |_p, nv| Some(Msg::RigSetAngle(i, nv as f64)),
+        ));
+        let len = b.len as f32;
+        rows.push(slider_view(
+            format!("largo {:.0}", b.len),
+            len,
+            10.0,
+            400.0,
+            &sp,
+            move |_p, nv| Some(Msg::RigSetLen(i, nv as f64)),
+        ));
+    } else {
+        rows.push(muted("selecciona un hueso", theme));
+    }
+    rows.push(spacer(6.0));
+    rows.push(button_view("⟲ pose neutra", &btn, Msg::RigResetPose));
+
+    // --- Malla ---
+    rows.push(spacer(12.0));
+    rows.push(section_title("MALLA", theme));
+    let is_grid = matches!(model.rig.mesh_mode, MeshMode::Grid);
+    rows.push(row(vec![
+        toggle_btn("tubo", !is_grid, Msg::RigSetMeshMode(MeshMode::Tube), theme),
+        toggle_btn("rejilla", is_grid, Msg::RigSetMeshMode(MeshMode::Grid), theme),
+    ]));
+    rows.push(spacer(4.0));
+    if is_grid {
+        let gr = model.rig.grid_res as f32;
+        rows.push(slider_view(
+            format!("resolución {}", model.rig.grid_res),
+            gr,
+            2.0,
+            40.0,
+            &sp,
+            move |_p, nv| Some(Msg::RigSetGridRes(nv as f64)),
+        ));
+        let asp = model.rig.mesh_aspect as f32;
+        rows.push(slider_view(
+            format!("aspecto {:.2}", model.rig.mesh_aspect),
+            asp,
+            0.1,
+            3.0,
+            &sp,
+            move |_p, nv| Some(Msg::RigSetAspect(nv as f64)),
+        ));
+    } else {
+        let th = model.rig.thickness as f32;
+        rows.push(slider_view(
+            format!("grosor {:.0}", model.rig.thickness),
+            th,
+            2.0,
+            120.0,
+            &sp,
+            move |_p, nv| Some(Msg::RigSetThickness(nv as f64)),
+        ));
+        let cols = model.rig.cols as f32;
+        rows.push(slider_view(
+            format!("columnas {}", model.rig.cols),
+            cols,
+            2.0,
+            64.0,
+            &sp,
+            move |_p, nv| Some(Msg::RigSetCols(nv as f64)),
+        ));
+    }
+
+    // --- Textura (deformar una imagen real) ---
+    rows.push(spacer(12.0));
+    rows.push(section_title("TEXTURA", theme));
+    rows.push(text_input_view_full(
+        &model.tex_input,
+        "/path/a/imagen.png…",
+        model.tex_focused,
+        &TextInputPalette::from_theme(theme),
+        Msg::RigTexCampo,
+    ));
+    rows.push(spacer(4.0));
+    rows.push(row(vec![
+        button_view("cargar textura", &btn, Msg::RigLoadTexture),
+        button_view("quitar", &btn, Msg::RigClearTexture),
+    ]));
+    if model.texture.is_some() {
+        rows.push(muted("textura activa → modo rejilla la deforma", theme));
+    } else {
+        rows.push(muted("carga un PNG/JPG: se rige a la cadena y se dobla", theme));
+    }
+
+    // --- IK ---
+    rows.push(spacer(12.0));
+    rows.push(section_title("IK (2 huesos)", theme));
+    if model.rig.bones.len() < 2 {
+        rows.push(muted("necesitas ≥2 huesos para el IK", theme));
+    } else {
+        rows.push(muted("clic/arrastra en el lienzo para mover el objetivo", theme));
+        rows.push(row(vec![
+            button_view(
+                if model.rig.ik_enabled { "IK: on" } else { "IK: off" },
+                &btn,
+                Msg::RigToggleIk,
+            ),
+            button_view(
+                if model.rig.ik_flip { "codo ↑" } else { "codo ↓" },
+                &btn,
+                Msg::RigToggleFlip,
+            ),
+        ]));
+        if model.rig.ik_enabled {
+            let reach = (model.rig.total_len() + 120.0) as f32;
+            let tx = model.rig.ik_target.0 as f32;
+            rows.push(slider_view(
+                format!("objetivo x {:.0}", model.rig.ik_target.0),
+                tx,
+                -reach,
+                reach,
+                &sp,
+                move |_p, nv| Some(Msg::RigSetTargetX(nv as f64)),
+            ));
+            let ty = model.rig.ik_target.1 as f32;
+            rows.push(slider_view(
+                format!("objetivo y {:.0}", model.rig.ik_target.1),
+                ty,
+                -reach,
+                reach,
+                &sp,
+                move |_p, nv| Some(Msg::RigSetTargetY(nv as f64)),
+            ));
+        }
+    }
+
+    // --- Persistencia ---
+    rows.push(spacer(14.0));
+    rows.push(row(vec![
+        button_view("guardar", &btn, Msg::Save),
+        button_view("cargar", &btn, Msg::Load),
+    ]));
+    rows.push(spacer(8.0));
+    rows.push(
+        View::new(auto_h(0.0))
+            .text(model.status.clone(), 11.0, theme.fg_placeholder)
+            .max_lines(3),
+    );
+
+    panel_column(rows, 300.0, theme.bg_panel)
+}
+
+/// Panel central del modo Rig: el lienzo con la malla deformada en vivo.
+fn rig_canvas_panel(model: &Model) -> View<Msg> {
+    let theme = &model.theme;
+    View::new(Style {
+        flex_grow: 1.0,
+        flex_direction: FlexDirection::Column,
+        size: Size {
+            width: Dimension::auto(),
+            height: percent(1.0_f32),
+        },
+        padding: pad(14.0, 14.0),
+        ..Default::default()
+    })
+    .fill(theme.bg_app)
+    .children(vec![rig_canvas(model)])
+}
+
+/// Bbox de modelo que encuadra el rig (silueta + objetivo IK), inflado para
+/// que las poses dobladas no se salgan. Lo comparten el render del lienzo y la
+/// inversión pantalla→modelo del drag del objetivo IK.
+fn rig_view_bounds(rig: &RigDoc) -> KRect {
+    let total = rig.total_len();
+    let half = match rig.mesh_mode {
+        MeshMode::Tube => rig.thickness,
+        MeshMode::Grid => (total * rig.mesh_aspect * 0.5).max(rig.thickness),
+    };
+    let mut x0: f64 = -20.0;
+    let mut y0: f64 = -half - 20.0;
+    let mut x1: f64 = total + 20.0;
+    let mut y1: f64 = half + 20.0;
+    if rig.ik_enabled {
+        x0 = x0.min(rig.ik_target.0);
+        y0 = y0.min(rig.ik_target.1);
+        x1 = x1.max(rig.ik_target.0);
+        y1 = y1.max(rig.ik_target.1);
+    }
+    let pad_m = (total * 0.18).max(24.0);
+    KRect::new(x0 - pad_m, y0 - pad_m, x1 + pad_m, y1 + pad_m)
+}
+
+/// Invierte una posición local del lienzo (px, relativa al rect del nodo) a
+/// espacio de modelo, deshaciendo el `fit_transform(bounds, rect)`.
+fn canvas_local_to_model(lx: f32, ly: f32, rw: f32, rh: f32, b: KRect) -> (f64, f64) {
+    let (bw, bh) = (b.width(), b.height());
+    if bw <= 0.0 || bh <= 0.0 || rw <= 0.0 || rh <= 0.0 {
+        return (0.0, 0.0);
+    }
+    let s = (rw as f64 / bw).min(rh as f64 / bh);
+    let mx = (lx as f64 - (rw as f64 - bw * s) * 0.5) / s + b.x0;
+    let my = (ly as f64 - (rh as f64 - bh * s) * 0.5) / s + b.y0;
+    (mx, my)
+}
+
+/// Escala modelo→pantalla del `fit_transform` (px por unidad de modelo).
+fn canvas_scale(rw: f32, rh: f32, b: KRect) -> f64 {
+    let (bw, bh) = (b.width(), b.height());
+    if bw <= 0.0 || bh <= 0.0 || rw <= 0.0 || rh <= 0.0 {
+        return 0.0;
+    }
+    (rw as f64 / bw).min(rh as f64 / bh)
+}
+
+/// El lienzo: malla deformada (relleno + wireframe) + huesos + objetivo IK.
+fn rig_canvas(model: &Model) -> View<Msg> {
+    let skel = model.rig.skeleton();
+    let mesh = model.rig.mesh();
+    let positions = mesh.deform(&skel);
+
+    // Segmentos de hueso en espacio de modelo (para dibujarlos encima).
+    let mut bones_world: Vec<(
+        llimphi_ui::llimphi_raster::kurbo::Point,
+        llimphi_ui::llimphi_raster::kurbo::Point,
+    )> = Vec::new();
+    for (i, b) in model.rig.bones.iter().enumerate() {
+        let w = skel.world(i);
+        let a = w * llimphi_ui::llimphi_raster::kurbo::Point::ZERO;
+        let e = w * llimphi_ui::llimphi_raster::kurbo::Point::new(b.len, 0.0);
+        bones_world.push((a, e));
+    }
+
+    // Encuadre estable, compartido con la inversión del drag del objetivo IK.
+    let bounds = rig_view_bounds(&model.rig);
+
+    let target = if model.rig.ik_enabled {
+        Some(llimphi_ui::llimphi_raster::kurbo::Point::new(
+            model.rig.ik_target.0,
+            model.rig.ik_target.1,
+        ))
+    } else {
+        None
+    };
+
+    let fill = theme_with_alpha(model.theme.accent, 90);
+    let wire = model.theme.fg_text;
+    let bone_col = Color::from_rgba8(255, 196, 92, 255); // ámbar, contrasta con la malla
+    let bg = self_color(model.theme.bg_app, model.theme.bg_panel);
+    let tex = model.texture.clone();
+    let use_tex = matches!(model.rig.mesh_mode, MeshMode::Grid) && tex.is_some();
+
+    View::new(Style {
+        flex_grow: 1.0,
+        size: Size {
+            width: percent(1.0_f32),
+            height: percent(1.0_f32),
+        },
+        ..Default::default()
+    })
+    .fill(bg)
+    .radius(8.0)
+    .paint_with(move |scene, _ts, rect| {
+        use llimphi_ui::llimphi_raster::kurbo::{Affine, Circle, Line, Stroke};
+        use llimphi_ui::llimphi_raster::peniko::Fill;
+        use llimphi_mesh::{fit_transform, paint_solid, paint_textured, paint_wireframe};
+
+        if mesh.vertices.is_empty() {
+            return;
+        }
+        let xform = fit_transform(bounds, rect);
+        // Malla deformada: textura real (modo Grid) o relleno + wireframe.
+        if use_tex {
+            if let Some(t) = &tex {
+                paint_textured(scene, &mesh, &positions, xform, t);
+            }
+            // Wireframe tenue encima para leer la deformación.
+            paint_wireframe(scene, &mesh, &positions, xform, theme_with_alpha(wire, 55), 0.7);
+        } else {
+            paint_solid(scene, &mesh, &positions, xform, fill);
+            paint_wireframe(scene, &mesh, &positions, xform, wire, 1.0);
+        }
+
+        // Huesos: líneas gruesas + nudos en las articulaciones.
+        for (a, e) in &bones_world {
+            let pa = xform * *a;
+            let pe = xform * *e;
+            scene.stroke(
+                &Stroke::new(3.0),
+                Affine::IDENTITY,
+                &bone_col,
+                None,
+                &Line::new(pa, pe),
+            );
+            scene.fill(
+                Fill::NonZero,
+                Affine::IDENTITY,
+                &bone_col,
+                None,
+                &Circle::new(pa, 4.0),
+            );
+        }
+
+        // Objetivo IK: anillo blanco.
+        if let Some(t) = target {
+            let pt = xform * t;
+            let ring = Color::from_rgba8(255, 255, 255, 235);
+            scene.stroke(
+                &Stroke::new(2.0),
+                Affine::IDENTITY,
+                &ring,
+                None,
+                &Circle::new(pt, 9.0),
+            );
+        }
+    })
+    // Click coloca el objetivo IK; arrastrar lo mueve (el brazo lo persigue).
+    .on_click_at(|lx, ly, w, h| Some(Msg::RigCanvasClick(lx, ly, w, h)))
+    .draggable_at(|phase, dx, dy, _lx0, _ly0| match phase {
+        DragPhase::Move => Some(Msg::RigCanvasDrag(dx, dy)),
+        _ => None,
+    })
+}
+
+/// Color con alpha explícito.
+fn theme_with_alpha(c: Color, a: u8) -> Color {
+    let r = c.to_rgba8();
+    Color::from_rgba8(r.r, r.g, r.b, a)
+}
+
+// =============================================================================
+//  Helpers de layout
+// =============================================================================
+
+fn auto_h(h: f32) -> Style {
+    Style {
+        size: Size {
+            width: percent(1.0_f32),
+            height: if h > 0.0 { length(h) } else { Dimension::auto() },
+        },
+        align_items: Some(AlignItems::Center),
+        ..Default::default()
+    }
+}
+
+fn spacer(h: f32) -> View<Msg> {
+    View::new(Style {
+        size: Size {
+            width: percent(1.0_f32),
+            height: length(h),
+        },
+        ..Default::default()
+    })
+}
+
+fn section_title(text: &str, theme: &Theme) -> View<Msg> {
+    View::new(Style {
+        size: Size {
+            width: percent(1.0_f32),
+            height: length(20.0_f32),
+        },
+        ..Default::default()
+    })
+    .text(text.to_string(), 11.0, theme.fg_muted)
+}
+
+fn muted(text: &str, theme: &Theme) -> View<Msg> {
+    View::new(Style {
+        size: Size {
+            width: percent(1.0_f32),
+            height: Dimension::auto(),
+        },
+        ..Default::default()
+    })
+    .text(text.to_string(), 11.0, theme.fg_placeholder)
+    .max_lines(2)
+}
+
+fn grow_text(text: String, theme: &Theme) -> View<Msg> {
+    View::new(Style {
+        flex_grow: 1.0,
+        size: Size {
+            width: Dimension::auto(),
+            height: length(26.0_f32),
+        },
+        align_items: Some(AlignItems::Center),
+        ..Default::default()
+    })
+    .text(text, 12.0, theme.fg_text)
+}
+
+/// Botón de conmutación (segmented control): resaltado en accent si activo.
+fn toggle_btn(label: &str, active: bool, msg: Msg, theme: &Theme) -> View<Msg> {
+    let (bg, fg) = if active {
+        (theme.accent, Color::from_rgba8(20, 20, 24, 255))
+    } else {
+        (theme.bg_button, theme.fg_muted)
+    };
+    View::new(Style {
+        flex_grow: 1.0,
+        size: Size {
+            width: Dimension::auto(),
+            height: length(28.0_f32),
+        },
+        align_items: Some(AlignItems::Center),
+        padding: pad(10.0, 0.0),
+        ..Default::default()
+    })
+    .fill(bg)
+    .radius(5.0)
+    .text(label.to_string(), 12.0, fg)
+    .on_click(msg)
+}
+
+fn fixed_btn(label: &str, msg: Msg, btn: &ButtonPalette, w: f32) -> View<Msg> {
+    View::new(Style {
+        size: Size {
+            width: length(w),
+            height: length(26.0_f32),
+        },
+        flex_shrink: 0.0,
+        ..Default::default()
+    })
+    .children(vec![button_view(label.to_string(), btn, msg)])
+}
+
+fn selectable_row(label: &str, selected: bool, msg: Msg, theme: &Theme) -> View<Msg> {
+    let bg = if selected {
+        theme.bg_selected
+    } else {
+        theme.bg_panel_alt
+    };
+    let fg = if selected { theme.fg_text } else { theme.fg_muted };
+    View::new(Style {
+        size: Size {
+            width: percent(1.0_f32),
+            height: length(26.0_f32),
+        },
+        align_items: Some(AlignItems::Center),
+        padding: pad(8.0, 0.0),
+        ..Default::default()
+    })
+    .fill(bg)
+    .radius(4.0)
+    .text(label.to_string(), 12.0, fg)
+    .on_click(msg)
+}
+
+fn row(children: Vec<View<Msg>>) -> View<Msg> {
+    View::new(Style {
+        flex_direction: FlexDirection::Row,
+        size: Size {
+            width: percent(1.0_f32),
+            height: Dimension::auto(),
+        },
+        gap: gap(6.0),
+        align_items: Some(AlignItems::Center),
+        ..Default::default()
+    })
+    .children(children)
+}
+
+/// Fila que envuelve (varios botones chicos).
+fn wrap_row(children: Vec<View<Msg>>) -> View<Msg> {
+    use llimphi_ui::llimphi_layout::taffy::prelude::FlexWrap;
+    View::new(Style {
+        flex_direction: FlexDirection::Row,
+        flex_wrap: FlexWrap::Wrap,
+        size: Size {
+            width: percent(1.0_f32),
+            height: Dimension::auto(),
+        },
+        gap: gap(4.0),
+        ..Default::default()
+    })
+    .children(children)
+}
+
+fn panel_column(rows: Vec<View<Msg>>, width: f32, bg: Color) -> View<Msg> {
+    View::new(Style {
+        flex_direction: FlexDirection::Column,
+        size: Size {
+            width: length(width),
+            height: percent(1.0_f32),
+        },
+        flex_shrink: 0.0,
+        padding: pad(12.0, 12.0),
+        gap: gap(2.0),
+        ..Default::default()
+    })
+    .fill(bg)
+    .children(rows)
+}
+
+fn pad(
+    x: f32,
+    y: f32,
+) -> llimphi_ui::llimphi_layout::taffy::prelude::Rect<
+    llimphi_ui::llimphi_layout::taffy::prelude::LengthPercentage,
+> {
+    use llimphi_ui::llimphi_layout::taffy::prelude::Rect;
+    Rect {
+        left: length(x),
+        right: length(x),
+        top: length(y),
+        bottom: length(y),
+    }
+}
+
+fn gap(
+    g: f32,
+) -> Size<llimphi_ui::llimphi_layout::taffy::prelude::LengthPercentage> {
+    Size {
+        width: length(g),
+        height: length(g),
+    }
+}
+
+/// Mezcla simple de dos colores al 50% (para el fondo del preview).
+fn self_color(a: Color, b: Color) -> Color {
+    let ca = a.to_rgba8();
+    let cb = b.to_rgba8();
+    Color::from_rgba8(
+        ((ca.r as u16 + cb.r as u16) / 2) as u8,
+        ((ca.g as u16 + cb.g as u16) / 2) as u8,
+        ((ca.b as u16 + cb.b as u16) / 2) as u8,
+        255,
+    )
+}
+
+// =============================================================================
+//  Operaciones sobre el documento
+// =============================================================================
+
+/// Carga una imagen de disco y devuelve `(textura, aspecto alto/ancho)`.
+fn load_texture(path: &str) -> Result<(llimphi_image::Image, f64), String> {
+    use std::path::Path;
+    const MAX: u64 = 64 * 1024 * 1024;
+    let img = llimphi_image::load_path(Path::new(path), MAX).map_err(|e| format!("{e:?}"))?;
+    let w = (img.image.width.max(1)) as f64;
+    let h = (img.image.height.max(1)) as f64;
+    Ok((img, (h / w).clamp(0.1, 3.0)))
+}
+
+/// Borra el estado `idx` y reindexa transiciones/entry consistentemente.
+fn remove_state(doc: &mut Doc, idx: usize) {
+    if idx >= doc.states.len() {
+        return;
+    }
+    doc.states.remove(idx);
+    // Descartar transiciones que tocan el estado borrado; reindexar el resto.
+    doc.transitions.retain(|t| t.from != Some(idx) && t.to != idx);
+    for t in &mut doc.transitions {
+        if let Some(f) = t.from {
+            if f > idx {
+                t.from = Some(f - 1);
+            }
+        }
+        if t.to > idx {
+            t.to -= 1;
+        }
+    }
+    if doc.entry == idx {
+        doc.entry = 0;
+    } else if doc.entry > idx {
+        doc.entry -= 1;
+    }
+}
+
+fn main() {
+    llimphi_ui::run::<Studio>();
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    /// La inversión pantalla→modelo del drag debe deshacer exactamente el
+    /// `fit_transform(bounds, rect)` que usa el render — round-trip < 1e-6.
+    #[test]
+    fn canvas_local_to_model_invierte_fit_transform() {
+        let b = KRect::new(-30.0, -50.0, 260.0, 50.0);
+        let (rw, rh) = (640.0_f64, 360.0_f64);
+        let (bw, bh) = (b.width(), b.height());
+        let s = (rw / bw).min(rh / bh);
+        // Forward = misma fórmula de fit_transform, en coords LOCALES al rect.
+        let forward = |mx: f64, my: f64| {
+            let lx = (rw - bw * s) * 0.5 - b.x0 * s + s * mx;
+            let ly = (rh - bh * s) * 0.5 - b.y0 * s + s * my;
+            (lx, ly)
+        };
+        for (mx, my) in [(0.0, 0.0), (130.0, 10.0), (-20.0, 40.0), (255.0, -30.0)] {
+            let (lx, ly) = forward(mx, my);
+            let (rx, ry) = canvas_local_to_model(lx as f32, ly as f32, rw as f32, rh as f32, b);
+            assert!(
+                (rx - mx).abs() < 1e-3 && (ry - my).abs() < 1e-3,
+                "round-trip falló para ({mx},{my}): recuperó ({rx},{ry})"
+            );
+        }
+    }
+
+    /// El bbox de encuadre debe contener el objetivo IK cuando está activo
+    /// (si no, el objetivo se saldría del lienzo y el drag sería inconsistente).
+    #[test]
+    fn bounds_contiene_objetivo_ik() {
+        let mut rig = RigDoc::starter();
+        rig.ik_enabled = true;
+        rig.ik_target = (240.0, -130.0);
+        let b = rig_view_bounds(&rig);
+        assert!(b.x0 <= 240.0 && b.x1 >= 240.0);
+        assert!(b.y0 <= -130.0 && b.y1 >= -130.0);
+    }
+}
diff --git a/llimphi-anim-studio/src/rig.rs b/llimphi-anim-studio/src/rig.rs
new file mode 100644
index 0000000..4ee3b1f
--- /dev/null
+++ b/llimphi-anim-studio/src/rig.rs
@@ -0,0 +1,444 @@
+//! El **rig esqueletal**: la representación editable de una cadena de huesos con
+//! una malla-tira auto-skinneada, que se **compila** a un
+//! [`llimphi_anim::skel::Skeleton`] + [`llimphi_anim::skel::Mesh`] deformables.
+//! Es la Fase 2 del studio: sobre el mismo runtime estilo Rive, pero ahora el
+//! "clip" es una **deformación esqueletal** en vez de una máquina de estados.
+//!
+//! ## Qué autora (y qué no, todavía)
+//!
+//! Autora una **cadena** de huesos (cada uno con su largo y su ángulo de pose),
+//! una malla-tubo generada paramétricamente alrededor de la cadena (skinning
+//! suave en las articulaciones, igual que el `build_arm` canónico del demo
+//! `lottie_rive_demo`), y un **IK de 2 huesos** opcional sobre los dos primeros
+//! huesos persiguiendo un objetivo. El *weight-paint* a mano y la malla
+//! arbitraria (importada/dibujada) quedan para F2.5/F3 — aquí la malla es
+//! derivada de la cadena, no editable vértice-a-vértice.
+//!
+//! La matemática (jerarquía, LBS, IK analítico) vive entera en `llimphi-anim`;
+//! este módulo sólo **describe** el rig y lo proyecta al runtime, igual que
+//! [`crate::doc::Doc`] hace con el `StateMachine`.
+
+use llimphi_anim::constraint::solve_two_bone_ik;
+use llimphi_anim::skel::{Mesh, Pose, Skeleton, Vertex, Weight};
+use llimphi_ui::llimphi_raster::kurbo::{Point, Vec2};
+use serde::{Deserialize, Serialize};
+
+/// Un hueso de la cadena. El hueso apunta a lo largo de su eje local **+x**
+/// (convención de `skel`/`constraint`): su hijo se traslada `len` en +x.
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub struct BoneDef {
+    /// Largo del hueso (distancia al hijo, en unidades de modelo).
+    pub len: f64,
+    /// Ángulo de pose **local** en radianes (lo que editan los sliders). En el
+    /// bind pose la cadena está recta (todos los ángulos en 0).
+    pub angle: f64,
+}
+
+impl BoneDef {
+    pub fn new(len: f64) -> Self {
+        BoneDef { len, angle: 0.0 }
+    }
+}
+
+/// Cómo se genera la malla deformable alrededor de la cadena.
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize)]
+pub enum MeshMode {
+    /// Tira-tubo a lo largo de la cadena (skinning rígido+blend en joints).
+    /// Ideal para un miembro (brazo, cola).
+    Tube,
+    /// Rejilla rectangular que cubre toda la silueta, con cada vértice
+    /// auto-skinneado a los huesos por distancia. Es la malla para **deformar
+    /// una imagen/arte arbitrario** (sus UV mapean la textura completa).
+    Grid,
+}
+
+/// El documento del rig: la cadena + parámetros de malla + IK + textura.
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub struct RigDoc {
+    pub bones: Vec<BoneDef>,
+    /// Medio-grosor de la malla-tubo (mitad de la altura de la tira).
+    pub thickness: f64,
+    /// Columnas de la malla por unidad de largo (densidad del tubo).
+    pub cols: usize,
+    /// Modo de generación de la malla.
+    pub mesh_mode: MeshMode,
+    /// Resolución de la rejilla (celdas a lo largo de la cadena, modo Grid).
+    pub grid_res: usize,
+    /// Relación alto/ancho de la rejilla (modo Grid); se ajusta al cargar una
+    /// imagen para respetar su aspecto.
+    pub mesh_aspect: f64,
+    /// Path de la textura a deformar (se recarga al abrir el proyecto). Los
+    /// píxeles NO se serializan — sólo la referencia al archivo.
+    pub texture_path: Option<String>,
+    /// ¿IK de 2 huesos activo sobre los huesos 0 y 1?
+    pub ik_enabled: bool,
+    /// Objetivo del IK (espacio de modelo).
+    pub ik_target: (f64, f64),
+    /// Solución de codo (flip de la rama del IK).
+    pub ik_flip: bool,
+}
+
+impl Default for RigDoc {
+    fn default() -> Self {
+        RigDoc {
+            bones: Vec::new(),
+            thickness: 22.0,
+            cols: 16,
+            mesh_mode: MeshMode::Tube,
+            grid_res: 10,
+            mesh_aspect: 0.6,
+            texture_path: None,
+            ik_enabled: false,
+            ik_target: (200.0, 40.0),
+            ik_flip: false,
+        }
+    }
+}
+
+impl RigDoc {
+    /// Rig de arranque: un brazo de 2 huesos, el ejemplo canónico.
+    pub fn starter() -> Self {
+        RigDoc {
+            bones: vec![BoneDef::new(140.0), BoneDef::new(120.0)],
+            ik_target: (180.0, 90.0),
+            ..Default::default()
+        }
+    }
+
+    /// Largo total de la cadena (suma de los huesos).
+    pub fn total_len(&self) -> f64 {
+        self.bones.iter().map(|b| b.len).sum()
+    }
+
+    /// Posición de arranque (arc-length) de cada hueso a lo largo de la cadena
+    /// recta: `starts[i] = Σ len[0..i]`.
+    fn starts(&self) -> Vec<f64> {
+        let mut s = Vec::with_capacity(self.bones.len());
+        let mut acc = 0.0;
+        for b in &self.bones {
+            s.push(acc);
+            acc += b.len;
+        }
+        s
+    }
+
+    /// Construye el esqueleto en **bind pose** (cadena recta) y lo congela. El
+    /// orden de los `BoneId` coincide con `self.bones`.
+    fn build_skeleton_bind(&self) -> Skeleton {
+        let mut s = Skeleton::new();
+        let mut prev = None;
+        for (i, _b) in self.bones.iter().enumerate() {
+            // El hijo se traslada el largo del PADRE en +x; el root en el origen.
+            let local = if i == 0 {
+                Pose::identity()
+            } else {
+                Pose::translate(Vec2::new(self.bones[i - 1].len, 0.0))
+            };
+            prev = Some(s.add_bone(prev, local));
+        }
+        s.bind();
+        s
+    }
+
+    /// Aplica los ángulos de pose actuales (y el IK, si está activo) sobre un
+    /// esqueleto ya en bind, y lo deja `update()`-eado listo para deformar.
+    fn pose_skeleton(&self, s: &mut Skeleton) {
+        for (i, b) in self.bones.iter().enumerate() {
+            let t = if i == 0 {
+                Vec2::ZERO
+            } else {
+                Vec2::new(self.bones[i - 1].len, 0.0)
+            };
+            s.set_pose(i, Pose::new(t, b.angle, Vec2::new(1.0, 1.0)));
+        }
+        // IK sobre los dos primeros huesos: sobrescribe sus poses para que la
+        // punta del hueso 1 alcance el objetivo. Los huesos ≥2 conservan su
+        // ángulo de slider (relativo al hueso 1).
+        if self.ik_enabled && self.bones.len() >= 2 {
+            let tip_local = Vec2::new(self.bones[1].len, 0.0);
+            let target = Point::new(self.ik_target.0, self.ik_target.1);
+            solve_two_bone_ik(s, 0, 1, tip_local, target, self.ik_flip);
+        }
+        s.update();
+    }
+
+    /// Esqueleto posado (bind + poses + IK + update), listo para `deform`.
+    pub fn skeleton(&self) -> Skeleton {
+        let mut s = self.build_skeleton_bind();
+        self.pose_skeleton(&mut s);
+        s
+    }
+
+    /// Una copia del rig con una **deriva idle** procedural aplicada en la fase
+    /// `phase` ∈ `[0,1)` del loop: un vaivén suave de cada hueso (desfasado por
+    /// índice) y, si el IK está activo, una pequeña órbita del objetivo. Le da
+    /// vida al rig —como «Alley Cat»— mientras el formato del studio todavía no
+    /// serializa pistas de animación por keyframe (Fase 1). Lo comparten el bake
+    /// de fondos (`mirada-fondo`) y la reproducción en vivo del greeter, para que
+    /// el mismo `.ron` se vea igual en las tres superficies.
+    pub fn idle_at(&self, phase: f64) -> RigDoc {
+        const SWAY: f64 = 0.18;
+        const ORBIT: f64 = 24.0;
+        let p = phase * std::f64::consts::TAU;
+        let mut rig = self.clone();
+        for (k, b) in rig.bones.iter_mut().enumerate() {
+            b.angle += SWAY * (p + k as f64 * 0.6).sin();
+        }
+        if rig.ik_enabled {
+            rig.ik_target.0 += ORBIT * p.cos();
+            rig.ik_target.1 += ORBIT * (p * 2.0).sin() * 0.5;
+        }
+        rig
+    }
+
+    /// La malla deformable según el modo activo.
+    pub fn mesh(&self) -> Mesh {
+        match self.mesh_mode {
+            MeshMode::Tube => self.tube_mesh(),
+            MeshMode::Grid => self.grid_mesh(),
+        }
+    }
+
+    /// Malla-tubo skinneada alrededor de la cadena recta (bind space). Skinning
+    /// suave en las articulaciones: lejos de un joint el vértice es rígido a su
+    /// hueso; dentro de la ventana de blend mezcla con el hueso vecino.
+    fn tube_mesh(&self) -> Mesh {
+        let mut m = Mesh::new();
+        let n = self.bones.len();
+        if n == 0 {
+            return m;
+        }
+        let total = self.total_len();
+        let starts = self.starts();
+        let cols = self.cols.max(2);
+        let half = self.thickness;
+        // Ventana de blend: una fracción del hueso más corto.
+        let min_len = self.bones.iter().map(|b| b.len).fold(f64::MAX, f64::min);
+        let blend = (min_len * 0.4).max(1.0);
+
+        for i in 0..=cols {
+            let p = total * i as f64 / cols as f64;
+            let weights = self.weights_at(p, &starts, blend);
+            let u = i as f64 / cols as f64;
+            m.vertices.push(Vertex {
+                rest: Point::new(p, -half),
+                uv: (u, 0.0),
+                weights: weights.clone(),
+            });
+            m.vertices.push(Vertex {
+                rest: Point::new(p, half),
+                uv: (u, 1.0),
+                weights,
+            });
+        }
+        for i in 0..cols {
+            let (t0, t1) = ((2 * i) as u32, (2 * (i + 1)) as u32);
+            let (b0, b1) = ((2 * i + 1) as u32, (2 * (i + 1) + 1) as u32);
+            m.triangles.push([t0, t1, b1]);
+            m.triangles.push([t0, b1, b0]);
+        }
+        m
+    }
+
+    /// Pesos de un vértice a arc-position `p`: rígido a su segmento, con blend
+    /// lineal hacia el hueso vecino cerca de cada joint.
+    fn weights_at(&self, p: f64, starts: &[f64], blend: f64) -> Vec<Weight> {
+        let n = self.bones.len();
+        // Segmento que contiene a p.
+        let mut k = 0;
+        while k + 1 < n && p >= starts[k + 1] {
+            k += 1;
+        }
+        // Joint de entrada (con k-1) y de salida (con k+1).
+        if k + 1 < n {
+            let d = starts[k + 1] - p; // distancia al joint siguiente
+            if d < blend {
+                let t = (d / blend).clamp(0.0, 1.0);
+                let wk = 0.5 + 0.5 * t;
+                return vec![
+                    Weight { bone: k, weight: wk },
+                    Weight { bone: k + 1, weight: 1.0 - wk },
+                ];
+            }
+        }
+        if k > 0 {
+            let d = p - starts[k]; // distancia al joint anterior
+            if d < blend {
+                let t = (d / blend).clamp(0.0, 1.0);
+                let wk = 0.5 + 0.5 * t;
+                return vec![
+                    Weight { bone: k, weight: wk },
+                    Weight { bone: k - 1, weight: 1.0 - wk },
+                ];
+            }
+        }
+        vec![Weight { bone: k, weight: 1.0 }]
+    }
+
+    /// Malla-rejilla que cubre la silueta (`[0,total] × [-H/2,H/2]`, con
+    /// `H = total·aspect`), cada vértice **auto-skinneado** a los huesos por
+    /// distancia (inverse-distance, top-2). Sus UV mapean la textura completa
+    /// `0..1`, así que deforma una imagen arbitraria, no sólo un miembro.
+    fn grid_mesh(&self) -> Mesh {
+        let mut m = Mesh::new();
+        let n = self.bones.len();
+        if n == 0 {
+            return m;
+        }
+        let total = self.total_len();
+        let h = (total * self.mesh_aspect).max(1.0);
+        let y_top = -h * 0.5;
+        let starts = self.starts();
+        let gx = self.grid_res.max(2);
+        let gy = ((gx as f64 * self.mesh_aspect).round() as usize).max(2);
+
+        for j in 0..=gy {
+            for i in 0..=gx {
+                let x = total * i as f64 / gx as f64;
+                let y = y_top + h * j as f64 / gy as f64;
+                let weights = self.skin_weights_at(Point::new(x, y), &starts);
+                let uv = (i as f64 / gx as f64, j as f64 / gy as f64);
+                m.vertices.push(Vertex {
+                    rest: Point::new(x, y),
+                    uv,
+                    weights,
+                });
+            }
+        }
+        let stride = (gx + 1) as u32;
+        for j in 0..gy as u32 {
+            for i in 0..gx as u32 {
+                let a = j * stride + i;
+                let b = a + 1;
+                let c = a + stride;
+                let d = c + 1;
+                m.triangles.push([a, b, d]);
+                m.triangles.push([a, d, c]);
+            }
+        }
+        m
+    }
+
+    /// Pesos auto-skin de un punto: distancia a cada segmento-hueso (en bind,
+    /// recta sobre el eje x), inverse-distance², se queda con los 2 huesos más
+    /// cercanos y normaliza. Da una deformación suave de la rejilla.
+    fn skin_weights_at(&self, p: Point, starts: &[f64]) -> Vec<Weight> {
+        let n = self.bones.len();
+        // (bone, dist) por hueso.
+        let mut ds: Vec<(usize, f64)> = (0..n)
+            .map(|k| {
+                let x0 = starts[k];
+                let x1 = starts[k] + self.bones[k].len;
+                let dx = if p.x < x0 {
+                    x0 - p.x
+                } else if p.x > x1 {
+                    p.x - x1
+                } else {
+                    0.0
+                };
+                (k, dx.hypot(p.y))
+            })
+            .collect();
+        // Top-2 más cercanos.
+        ds.sort_by(|a, b| a.1.partial_cmp(&b.1).unwrap_or(std::cmp::Ordering::Equal));
+        ds.truncate(2);
+        let eps = 1e-3;
+        let mut raw: Vec<(usize, f64)> =
+            ds.iter().map(|(k, d)| (*k, 1.0 / (d * d + eps))).collect();
+        let sum: f64 = raw.iter().map(|(_, w)| w).sum();
+        if sum <= 0.0 {
+            return vec![Weight { bone: 0, weight: 1.0 }];
+        }
+        for (_, w) in &mut raw {
+            *w /= sum;
+        }
+        raw.into_iter()
+            .map(|(bone, weight)| Weight { bone, weight })
+            .collect()
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn compila_esqueleto_y_malla() {
+        let rig = RigDoc::starter();
+        let s = rig.skeleton();
+        assert_eq!(s.len(), 2);
+        let m = rig.mesh();
+        assert!(!m.vertices.is_empty());
+        assert!(!m.triangles.is_empty());
+        // En bind (todos los ángulos 0, IK off) la deformación = reposo.
+        let pos = m.deform(&s);
+        assert_eq!(pos.len(), m.vertices.len());
+        for (p, v) in pos.iter().zip(&m.vertices) {
+            assert!((p.x - v.rest.x).abs() < 1e-6 && (p.y - v.rest.y).abs() < 1e-6);
+        }
+    }
+
+    #[test]
+    fn posar_un_hueso_deforma_la_malla() {
+        let mut rig = RigDoc::starter();
+        let rest = rig.mesh().deform(&rig.skeleton());
+        // Doblar el codo (hueso 1) 0.8 rad.
+        rig.bones[1].angle = 0.8;
+        let bent = rig.mesh().deform(&rig.skeleton());
+        // Al menos un vértice de la punta se movió respecto al reposo.
+        let moved = rest
+            .iter()
+            .zip(&bent)
+            .any(|(a, b)| (a.x - b.x).hypot(a.y - b.y) > 1.0);
+        assert!(moved, "doblar el codo debería mover la malla");
+    }
+
+    #[test]
+    fn grid_mesh_pesos_normalizados_y_deforma() {
+        let mut rig = RigDoc::starter();
+        rig.mesh_mode = MeshMode::Grid;
+        rig.grid_res = 8;
+        let m = rig.mesh();
+        assert!(!m.vertices.is_empty() && !m.triangles.is_empty());
+        // Cada vértice tiene pesos que suman ~1 (skinning bien normalizado).
+        for v in &m.vertices {
+            let s: f64 = v.weights.iter().map(|w| w.weight).sum();
+            assert!((s - 1.0).abs() < 1e-6, "pesos deben sumar 1, fue {s}");
+            assert!(v.weights.iter().all(|w| w.bone < rig.bones.len()));
+        }
+        // Posar el codo deforma la rejilla.
+        let rest = m.deform(&rig.skeleton());
+        rig.bones[1].angle = 0.9;
+        let bent = rig.mesh().deform(&rig.skeleton());
+        let moved = rest
+            .iter()
+            .zip(&bent)
+            .any(|(a, b)| (a.x - b.x).hypot(a.y - b.y) > 1.0);
+        assert!(moved, "doblar el codo debería deformar la rejilla");
+    }
+
+    #[test]
+    fn ik_alcanza_el_objetivo() {
+        let mut rig = RigDoc::starter();
+        rig.ik_enabled = true;
+        // Objetivo dentro del alcance (l1+l2 = 260).
+        rig.ik_target = (150.0, 80.0);
+        let s = rig.skeleton();
+        // Punta del hueso 1 en mundo = world(1) * (len1, 0).
+        let tip = s.world(1) * Point::new(rig.bones[1].len, 0.0);
+        let target = Point::new(rig.ik_target.0, rig.ik_target.1);
+        let err = (tip.x - target.x).hypot(tip.y - target.y);
+        assert!(err < 1.0, "el IK debería alcanzar el objetivo, err={err}");
+    }
+
+    #[test]
+    fn ik_clampa_objetivo_inalcanzable_sin_panickear() {
+        let mut rig = RigDoc::starter();
+        rig.ik_enabled = true;
+        rig.ik_target = (10_000.0, 0.0); // mucho más lejos que el alcance
+        let s = rig.skeleton();
+        // No panickea y el brazo queda estirado hacia el objetivo (x≈260).
+        let tip = s.world(1) * Point::new(rig.bones[1].len, 0.0);
+        assert!(tip.x > 200.0, "brazo estirado hacia el objetivo lejano");
+    }
+}
diff --git a/llimphi-anim/Cargo.toml b/llimphi-anim/Cargo.toml
new file mode 100644
index 0000000..e56bbb6
--- /dev/null
+++ b/llimphi-anim/Cargo.toml
@@ -0,0 +1,14 @@
+[package]
+name = "llimphi-anim"
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+authors.workspace = true
+publish.workspace = true
+description = "llimphi-anim — máquina de estados de animación (estilo Rive) clip-agnóstica: estados, inputs (bool/number/trigger), transiciones con condiciones y blend. El núcleo no sabe de Lottie ni de vello — opera sobre ClipId + duración; el render lo cablea el consumidor (llimphi-lottie hoy; rigs nativos mañana)."
+
+[dependencies]
+# Álgebra afín 2D (Affine/Point/Vec2) para la jerarquía de huesos y el skinning.
+# Misma versión que expone vello 0.7 → los Point deformados tipan directo con el
+# renderer (llimphi-lottie/mesh) sin conversiones.
+kurbo = "0.13"
diff --git a/llimphi-anim/LEEME.md b/llimphi-anim/LEEME.md
new file mode 100644
index 0000000..e622fb0
--- /dev/null
+++ b/llimphi-anim/LEEME.md
@@ -0,0 +1,41 @@
+# llimphi-anim
+
+*Read this in English: [README.md](README.md).*
+
+Máquina de estados de animación, estilo Rive, **clip-agnóstica**.
+
+Es el escalón sobre el playback lineal: en vez de "reproduce esta animación",
+modela "según estos *inputs*, en qué estado estoy y a cuál transiciono, con
+qué *blend*". Es lo que vuelve una animación *interactiva* (hover, progreso,
+triggers) en lugar de un loop fijo.
+
+## Por qué clip-agnóstico
+
+El núcleo **no sabe de Lottie ni de vello**. Un clip es un `ClipId` (u32)
+con una duración conocida; la máquina secuencia y mezcla clips por id y
+tiempo, y emite un `RenderFrame` que dice *qué* renderizar (clip primario +
+un clip entrante con su mezcla 0..1 durante una transición). El consumidor
+mapea `ClipId → asset` y pinta. Hoy ese consumidor es `llimphi-lottie`;
+mañana puede ser un rig de huesos nativo o un tween de `llimphi-motion` — el
+mismo motor de estados sirve a todos.
+
+## Modelo (espejo del de Rive)
+
+- **Inputs**: `bool`, `number`, `trigger` (los triggers se consumen en cada
+  `advance`).
+- **Estado**: un clip con velocidad y loop, más sus transiciones salientes.
+- **Transición**: destino + condiciones (AND) sobre inputs + duración de
+  blend. Las transiciones *any-state* se evalúan sin importar el estado
+  actual (típico para "fire trigger → ir a X desde donde sea").
+- **Condición**: `bool == v`, `number <cmp> v`, `trigger disparado`, o
+  `clip terminó` (para "cuando la animación acaba, pasa a la siguiente").
+
+## Bucle
+
+El consumidor empuja inputs (`Instance::set_bool` etc.), llama
+`Instance::advance` con el `dt` del frame, y pinta `Instance::render_frame`.
+Encaja directo en el bucle Elm de Llimphi vía `Handle::spawn_periodic`.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../LEEME.md).
diff --git a/llimphi-anim/README.md b/llimphi-anim/README.md
new file mode 100644
index 0000000..fa2ba50
--- /dev/null
+++ b/llimphi-anim/README.md
@@ -0,0 +1,30 @@
+# llimphi-anim
+
+A Rive-style, **clip-agnostic** animation state machine.
+
+It is the step above linear playback: instead of "play this animation", it models
+"given these *inputs*, which state am I in and which do I transition to, with what
+*blend*". That is what turns an animation *interactive* (hover, progress,
+triggers) rather than a fixed loop.
+
+## Why clip-agnostic
+
+The core **knows nothing about Lottie or vello**. A clip is a `ClipId` (u32) with
+a known duration; the machine sequences and blends clips by id and time, and
+emits a `RenderFrame` saying *what* to render (the primary clip plus an incoming
+clip with its 0..1 blend during a transition). The consumer maps
+`ClipId → asset` and paints. Today that consumer is `llimphi-lottie`; tomorrow it
+could be a native bone rig or a `llimphi-motion` tween — the same state engine
+serves them all.
+
+## Model (mirroring Rive's)
+
+- **Inputs**: `bool`, `number`, `trigger` (triggers are consumed on each
+  `advance`).
+- **State**: a clip with speed and looping, plus its outgoing transitions.
+- **Transition**: a target + (AND-ed) conditions over inputs + a blend duration.
+  *Any-state* transitions are evaluated regardless of the current state.
+
+---
+
+Part of **llimphi** — see [llimphi](../README.md).
diff --git a/llimphi-anim/src/constraint.rs b/llimphi-anim/src/constraint.rs
new file mode 100644
index 0000000..3bcca25
--- /dev/null
+++ b/llimphi-anim/src/constraint.rs
@@ -0,0 +1,182 @@
+//! Constraints de rigging sobre la jerarquía de huesos (estilo Rive): IK de 2
+//! huesos y aim. Corren **después** de que la animación posó el esqueleto,
+//! ajustando rotaciones para satisfacer un objetivo; luego el skinning deforma.
+//!
+//! Convención: los huesos apuntan a lo largo de su eje local **+x** (su hijo se
+//! traslada en +x, el efector está en +x) — la misma que arma `skel`. Todo en
+//! 2D, analítico (sin iteración), sobre `kurbo`.
+
+use kurbo::{Affine, Point, Vec2};
+
+use crate::skel::{BoneId, Pose, Skeleton};
+
+/// Ángulo de rotación de un `Affine` (asume escala ~uniforme y sin shear).
+fn affine_rotation(aff: Affine) -> f64 {
+    let c = aff.as_coeffs(); // [a, b, c, d, e, f]; a=cosθ·sx, b=sinθ·sx
+    c[1].atan2(c[0])
+}
+
+/// Origen (punto de pivote) de un hueso en mundo. La rotación del propio hueso
+/// no mueve su origen, así que sirve aunque vayamos a re-rotarlo.
+fn bone_origin(skel: &Skeleton, bone: BoneId) -> Point {
+    skel.world(bone) * Point::ZERO
+}
+
+fn parent_rotation(skel: &Skeleton, bone: BoneId) -> f64 {
+    match skel.parent(bone) {
+        Some(p) => affine_rotation(skel.world(p)),
+        None => 0.0,
+    }
+}
+
+/// Resuelve **IK de 2 huesos**: ajusta las rotaciones locales de `upper` (padre)
+/// y `lower` (hijo de `upper`) para que el efector — el punto `tip_local` en el
+/// frame de `lower` — alcance `target` (en espacio de mundo del esqueleto).
+/// `flip` elige la solución del codo (arriba/abajo). Si `target` está fuera de
+/// alcance, el brazo se estira hacia él (alcance máximo). Llama `update` al final.
+///
+/// Requiere que los world transforms estén actualizados antes (la animación ya
+/// posó el esqueleto). Las longitudes salen del rig: `L1` = offset `upper→lower`,
+/// `L2` = `|tip_local|`.
+pub fn solve_two_bone_ik(
+    skel: &mut Skeleton,
+    upper: BoneId,
+    lower: BoneId,
+    tip_local: Vec2,
+    target: Point,
+    flip: bool,
+) {
+    let base = bone_origin(skel, upper);
+    let l1 = skel.pose(lower).translation.hypot();
+    let l2 = tip_local.hypot();
+    if l1 < 1e-9 || l2 < 1e-9 {
+        return;
+    }
+    let s = if flip { -1.0 } else { 1.0 };
+
+    let d = target - base;
+    let dist = d.hypot().clamp((l1 - l2).abs() + 1e-6, l1 + l2 - 1e-6);
+    let alpha = d.y.atan2(d.x);
+    let cos_beta = ((dist * dist + l1 * l1 - l2 * l2) / (2.0 * dist * l1)).clamp(-1.0, 1.0);
+    let beta = cos_beta.acos();
+    let cos_elbow = ((l1 * l1 + l2 * l2 - dist * dist) / (2.0 * l1 * l2)).clamp(-1.0, 1.0);
+    let elbow = cos_elbow.acos();
+
+    let theta_upper_world = alpha - s * beta;
+    let theta_lower_local = s * (std::f64::consts::PI - elbow);
+
+    let up = skel.pose(upper);
+    skel.set_pose(
+        upper,
+        Pose {
+            rotation: theta_upper_world - parent_rotation(skel, upper),
+            ..up
+        },
+    );
+    let low = skel.pose(lower);
+    skel.set_pose(
+        lower,
+        Pose {
+            rotation: theta_lower_local,
+            ..low
+        },
+    );
+    skel.update();
+}
+
+/// **Aim**: rota `bone` para que su eje local `forward` apunte desde su origen
+/// hacia `target` (mundo). Llama `update`. Útil para que una cabeza/ojo/torreta
+/// siga a un objetivo.
+pub fn aim_at(skel: &mut Skeleton, bone: BoneId, forward: Vec2, target: Point) {
+    let origin = bone_origin(skel, bone);
+    let d = target - origin;
+    if d.hypot() < 1e-9 || forward.hypot() < 1e-9 {
+        return;
+    }
+    let desired_world = d.y.atan2(d.x) - forward.y.atan2(forward.x);
+    let pose = skel.pose(bone);
+    skel.set_pose(
+        bone,
+        Pose {
+            rotation: desired_world - parent_rotation(skel, bone),
+            ..pose
+        },
+    );
+    skel.update();
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use crate::skel::Pose;
+
+    fn two_bone(l1: f64) -> (Skeleton, BoneId, BoneId) {
+        let mut s = Skeleton::new();
+        let a = s.add_bone(None, Pose::identity());
+        let b = s.add_bone(Some(a), Pose::translate(Vec2::new(l1, 0.0)));
+        s.bind();
+        s.update();
+        (s, a, b)
+    }
+
+    fn tip(skel: &Skeleton, lower: BoneId, tip_local: Vec2) -> Point {
+        skel.world(lower) * Point::new(tip_local.x, tip_local.y)
+    }
+
+    #[test]
+    fn ik_alcanza_un_objetivo_dentro_de_rango() {
+        let (mut s, a, b) = two_bone(50.0);
+        let tip_local = Vec2::new(50.0, 0.0); // L2 = 50, alcance 0..100
+        let target = Point::new(60.0, 40.0); // dist ≈ 72 < 100
+        solve_two_bone_ik(&mut s, a, b, tip_local, target, false);
+        let t = tip(&s, b, tip_local);
+        assert!(
+            (t.x - target.x).abs() < 1e-6 && (t.y - target.y).abs() < 1e-6,
+            "tip {t:?} debería alcanzar {target:?}"
+        );
+    }
+
+    #[test]
+    fn ik_fuera_de_rango_se_estira() {
+        let (mut s, a, b) = two_bone(50.0);
+        let tip_local = Vec2::new(50.0, 0.0);
+        let target = Point::new(300.0, 0.0); // muy lejos → estira a ~100 en x
+        solve_two_bone_ik(&mut s, a, b, tip_local, target, false);
+        let t = tip(&s, b, tip_local);
+        assert!((t.x - 100.0).abs() < 1e-3, "x del tip {} ~ 100", t.x);
+        assert!(t.y.abs() < 1e-3, "y del tip {} ~ 0 (en línea al objetivo)", t.y);
+    }
+
+    #[test]
+    fn ik_flip_da_el_otro_codo() {
+        let (mut s, a, b) = two_bone(50.0);
+        let tip_local = Vec2::new(50.0, 0.0);
+        let target = Point::new(60.0, 40.0);
+
+        solve_two_bone_ik(&mut s, a, b, tip_local, target, false);
+        let elbow_down = bone_origin(&s, b);
+        solve_two_bone_ik(&mut s, a, b, tip_local, target, true);
+        let elbow_up = bone_origin(&s, b);
+
+        // Ambas soluciones alcanzan el target, pero el codo cae en lados
+        // opuestos de la línea base→target.
+        assert!(
+            (elbow_down.y - elbow_up.y).abs() > 1.0,
+            "los codos deberían diferir: {elbow_down:?} vs {elbow_up:?}"
+        );
+        let t = tip(&s, b, tip_local);
+        assert!((t.x - target.x).abs() < 1e-6 && (t.y - target.y).abs() < 1e-6);
+    }
+
+    #[test]
+    fn aim_apunta_el_eje_forward_al_objetivo() {
+        let mut s = Skeleton::new();
+        let bone = s.add_bone(None, Pose::identity());
+        s.bind();
+        s.update();
+        aim_at(&mut s, bone, Vec2::new(1.0, 0.0), Point::new(0.0, 10.0));
+        // El eje +x del hueso ahora debe apuntar hacia +y (al objetivo).
+        let dir = s.world(bone) * Point::new(1.0, 0.0);
+        assert!(dir.x.abs() < 1e-9 && dir.y > 0.0, "dir {dir:?} debería ser +y");
+    }
+}
diff --git a/llimphi-anim/src/lib.rs b/llimphi-anim/src/lib.rs
new file mode 100644
index 0000000..77dbb48
--- /dev/null
+++ b/llimphi-anim/src/lib.rs
@@ -0,0 +1,758 @@
+//! `llimphi-anim` — máquina de estados de animación, estilo Rive, **clip-agnóstica**.
+//!
+//! Es el escalón sobre el playback lineal: en vez de "reproduce esta animación",
+//! modela "según estos *inputs*, en qué estado estoy y a cuál transiciono, con
+//! qué *blend*". Es lo que vuelve una animación *interactiva* (hover, progreso,
+//! triggers) en lugar de un loop fijo.
+//!
+//! ## Por qué clip-agnóstico
+//!
+//! El núcleo **no sabe de Lottie ni de vello**. Un clip es un [`ClipId`] (u32)
+//! con una duración conocida; la máquina secuencia y mezcla clips por id y
+//! tiempo, y emite un [`RenderFrame`] que dice *qué* renderizar (clip primario +
+//! un clip entrante con su mezcla 0..1 durante una transición). El consumidor
+//! mapea `ClipId → asset` y pinta. Hoy ese consumidor es `llimphi-lottie`;
+//! mañana puede ser un rig de huesos nativo o un tween de `llimphi-motion` — el
+//! mismo motor de estados sirve a todos.
+//!
+//! ## Modelo (espejo del de Rive)
+//!
+//! - **Inputs**: `bool`, `number`, `trigger` (los triggers se consumen en cada
+//!   `advance`).
+//! - **Estado**: un clip con velocidad y loop, más sus transiciones salientes.
+//! - **Transición**: destino + condiciones (AND) sobre inputs + duración de
+//!   blend. Las transiciones *any-state* se evalúan sin importar el estado
+//!   actual (típico para "fire trigger → ir a X desde donde sea").
+//! - **Condición**: `bool == v`, `number <cmp> v`, `trigger disparado`, o
+//!   `clip terminó` (para "cuando la animación acaba, pasa a la siguiente").
+//!
+//! ## Bucle
+//!
+//! El consumidor empuja inputs ([`Instance::set_bool`] etc.), llama
+//! [`Instance::advance`] con el `dt` del frame, y pinta [`Instance::render_frame`].
+//! Encaja directo en el bucle Elm de Llimphi vía `Handle::spawn_periodic`.
+
+#![forbid(unsafe_code)]
+
+pub mod constraint;
+pub mod physics;
+pub mod skel;
+
+use std::collections::{HashMap, HashSet};
+use std::sync::Arc;
+
+/// Índice de un estado dentro de la máquina (devuelto por `add_state`).
+pub type StateId = usize;
+
+/// Identificador opaco de un clip de animación. Lo interpreta el consumidor
+/// (p. ej. índice en un `Vec<LottieAsset>` o clave de un mapa).
+pub type ClipId = u32;
+
+/// Operador de comparación para condiciones sobre inputs numéricos.
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Cmp {
+    Eq,
+    Ne,
+    Lt,
+    Le,
+    Gt,
+    Ge,
+}
+
+impl Cmp {
+    fn test(self, a: f64, b: f64) -> bool {
+        match self {
+            Cmp::Eq => a == b,
+            Cmp::Ne => a != b,
+            Cmp::Lt => a < b,
+            Cmp::Le => a <= b,
+            Cmp::Gt => a > b,
+            Cmp::Ge => a >= b,
+        }
+    }
+}
+
+/// Condición de guarda de una transición. Una transición dispara cuando **todas**
+/// sus condiciones se cumplen (AND).
+#[derive(Debug, Clone)]
+pub enum Condition {
+    /// El input booleano `name` vale `value` (default `false` si no está seteado).
+    Bool { name: String, value: bool },
+    /// El input numérico `name` comparado con `value` por `op` (default `0.0`).
+    Number { name: String, op: Cmp, value: f64 },
+    /// El trigger `name` fue disparado en este frame (se consume al `advance`).
+    Trigger { name: String },
+    /// El clip del estado actual terminó (sólo aplica a estados no-loop).
+    ClipDone,
+}
+
+impl Condition {
+    /// `bool == value`.
+    pub fn bool(name: impl Into<String>, value: bool) -> Self {
+        Condition::Bool {
+            name: name.into(),
+            value,
+        }
+    }
+    /// `number <op> value`.
+    pub fn number(name: impl Into<String>, op: Cmp, value: f64) -> Self {
+        Condition::Number {
+            name: name.into(),
+            op,
+            value,
+        }
+    }
+    /// trigger disparado.
+    pub fn trigger(name: impl Into<String>) -> Self {
+        Condition::Trigger { name: name.into() }
+    }
+    /// el clip actual terminó.
+    pub fn clip_done() -> Self {
+        Condition::ClipDone
+    }
+}
+
+/// Región sensible al puntero, en coordenadas **normalizadas** `0..1` sobre el
+/// rect donde se pinta la animación (origen arriba-izquierda). Resolución- e
+/// independiente del tamaño del clip: el consumidor mapea el puntero de pantalla
+/// a este espacio.
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub enum Area {
+    /// Toda la superficie de la animación.
+    All,
+    /// Un rectángulo normalizado.
+    Rect { x: f64, y: f64, w: f64, h: f64 },
+}
+
+impl Area {
+    fn contains(&self, px: f64, py: f64) -> bool {
+        match self {
+            Area::All => (0.0..=1.0).contains(&px) && (0.0..=1.0).contains(&py),
+            Area::Rect { x, y, w, h } => {
+                px >= *x && px <= x + w && py >= *y && py <= y + h
+            }
+        }
+    }
+}
+
+/// Qué evento de puntero dispara un [`Listener`].
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum PointerTrigger {
+    /// El puntero entró al área.
+    Enter,
+    /// El puntero salió del área.
+    Exit,
+    /// Se presionó el botón con el puntero dentro del área.
+    Down,
+    /// Se soltó el botón con el puntero dentro del área.
+    Up,
+    /// El puntero se movió dentro del área (cada movimiento).
+    Move,
+}
+
+/// Qué le hace un [`Listener`] a los inputs cuando dispara.
+#[derive(Debug, Clone)]
+pub enum Action {
+    /// Setea un input booleano.
+    SetBool { name: String, value: bool },
+    /// Dispara un trigger.
+    Fire { name: String },
+}
+
+impl Action {
+    pub fn set_bool(name: impl Into<String>, value: bool) -> Self {
+        Action::SetBool {
+            name: name.into(),
+            value,
+        }
+    }
+    pub fn fire(name: impl Into<String>) -> Self {
+        Action::Fire { name: name.into() }
+    }
+}
+
+/// Un *listener* estilo Rive: cuando el puntero hace `trigger` sobre `area`,
+/// aplica `action` a los inputs. Es el puente puntero → máquina de estados
+/// (hover/click → bool/trigger → transición).
+#[derive(Debug, Clone)]
+pub struct Listener {
+    pub area: Area,
+    pub trigger: PointerTrigger,
+    pub action: Action,
+}
+
+/// Una transición saliente: a qué estado, bajo qué condiciones, con cuánto blend.
+#[derive(Debug, Clone)]
+pub struct Transition {
+    pub to: StateId,
+    pub conditions: Vec<Condition>,
+    /// Duración del crossfade hacia el estado destino, en segundos. `0.0` =
+    /// instantáneo (sin mezcla).
+    pub duration_secs: f64,
+}
+
+/// Un estado de la máquina: un clip con su velocidad y loop, más sus salidas.
+#[derive(Debug, Clone)]
+struct State {
+    name: String,
+    clip: ClipId,
+    speed: f64,
+    looping: bool,
+    transitions: Vec<Transition>,
+}
+
+/// La máquina de estados *definición* (inmutable, compartible). Construida con
+/// `new` + `add_state`/`transition`, congelada en un `Arc` por `instance`.
+#[derive(Debug, Clone, Default)]
+pub struct StateMachine {
+    states: Vec<State>,
+    /// Duración conocida de cada clip (segundos). La necesita la condición
+    /// `ClipDone` y el wrap de tiempo.
+    clip_durations: HashMap<ClipId, f64>,
+    /// Transiciones evaluadas desde *cualquier* estado.
+    any: Vec<Transition>,
+    /// Listeners de puntero (hover/click → inputs).
+    listeners: Vec<Listener>,
+    entry: StateId,
+}
+
+impl StateMachine {
+    pub fn new() -> Self {
+        Self::default()
+    }
+
+    /// Agrega un estado-clip. Devuelve su `StateId`. El primero agregado es el
+    /// estado de entrada por defecto (cambialo con [`set_entry`]).
+    ///
+    /// [`set_entry`]: StateMachine::set_entry
+    pub fn add_state(
+        &mut self,
+        name: impl Into<String>,
+        clip: ClipId,
+        speed: f64,
+        looping: bool,
+    ) -> StateId {
+        let id = self.states.len();
+        self.states.push(State {
+            name: name.into(),
+            clip,
+            speed,
+            looping,
+            transitions: Vec::new(),
+        });
+        id
+    }
+
+    /// Registra la duración (segundos) de un clip — necesaria para `ClipDone`.
+    pub fn set_clip_duration(&mut self, clip: ClipId, secs: f64) {
+        self.clip_durations.insert(clip, secs);
+    }
+
+    /// Fija el estado de entrada.
+    pub fn set_entry(&mut self, entry: StateId) {
+        self.entry = entry;
+    }
+
+    /// Agrega una transición `from → to` con condiciones y blend.
+    pub fn transition(
+        &mut self,
+        from: StateId,
+        to: StateId,
+        conditions: Vec<Condition>,
+        duration_secs: f64,
+    ) {
+        self.states[from].transitions.push(Transition {
+            to,
+            conditions,
+            duration_secs,
+        });
+    }
+
+    /// Agrega una transición *any-state* `* → to` (se evalúa desde cualquier
+    /// estado, antes que las salientes del estado actual).
+    pub fn transition_any(
+        &mut self,
+        to: StateId,
+        conditions: Vec<Condition>,
+        duration_secs: f64,
+    ) {
+        self.any.push(Transition {
+            to,
+            conditions,
+            duration_secs,
+        });
+    }
+
+    /// Agrega un listener de puntero: cuando el puntero hace `trigger` sobre
+    /// `area`, aplica `action` a los inputs (que luego rigen transiciones).
+    pub fn listener(&mut self, area: Area, trigger: PointerTrigger, action: Action) {
+        self.listeners.push(Listener {
+            area,
+            trigger,
+            action,
+        });
+    }
+
+    /// Crea una instancia ejecutable de esta máquina.
+    pub fn instance(self) -> Instance {
+        let entry = self.entry;
+        Instance {
+            machine: Arc::new(self),
+            inputs: Inputs::default(),
+            current: entry,
+            state_time: 0.0,
+            active: None,
+            last_pointer: None,
+        }
+    }
+
+    fn clip_of(&self, state: StateId) -> ClipId {
+        self.states[state].clip
+    }
+    fn speed_of(&self, state: StateId) -> f64 {
+        self.states[state].speed
+    }
+    fn duration_of_clip(&self, clip: ClipId) -> Option<f64> {
+        self.clip_durations.get(&clip).copied()
+    }
+}
+
+/// Estado de los inputs de una instancia. Booleanos y números persisten; los
+/// triggers se limpian al final de cada `advance`.
+#[derive(Debug, Clone, Default)]
+struct Inputs {
+    bools: HashMap<String, bool>,
+    numbers: HashMap<String, f64>,
+    triggers: HashSet<String>,
+}
+
+/// Una transición en curso: hacia dónde, su tiempo propio y cuánto blend lleva.
+#[derive(Debug, Clone)]
+struct Active {
+    to: StateId,
+    to_time: f64,
+    elapsed: f64,
+    duration: f64,
+}
+
+/// Instancia ejecutable: inputs vivos + estado actual + transición en curso.
+/// `Clone` barato más allá de los inputs (la definición va por `Arc`).
+#[derive(Debug, Clone)]
+pub struct Instance {
+    machine: Arc<StateMachine>,
+    inputs: Inputs,
+    current: StateId,
+    state_time: f64,
+    active: Option<Active>,
+    /// Última posición del puntero en coords normalizadas `0..1` (`None` =
+    /// fuera de la animación). La usan los listeners de `Down`/`Up` y la
+    /// detección de `Enter`/`Exit`.
+    last_pointer: Option<(f64, f64)>,
+}
+
+/// Una muestra de clip a renderizar: qué clip y en qué instante (segundos).
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub struct ClipSample {
+    pub clip: ClipId,
+    pub time_secs: f64,
+}
+
+/// Lo que el consumidor debe pintar este frame: el clip primario y, si hay una
+/// transición en curso, el clip entrante con su mezcla (`0.0`=nada del entrante,
+/// `1.0`=todo el entrante).
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub struct RenderFrame {
+    pub primary: ClipSample,
+    pub blend: Option<(ClipSample, f32)>,
+}
+
+impl Instance {
+    /// Setea un input booleano.
+    pub fn set_bool(&mut self, name: impl Into<String>, value: bool) {
+        self.inputs.bools.insert(name.into(), value);
+    }
+    /// Setea un input numérico.
+    pub fn set_number(&mut self, name: impl Into<String>, value: f64) {
+        self.inputs.numbers.insert(name.into(), value);
+    }
+    /// Dispara un trigger (se consume en el próximo `advance`).
+    pub fn fire(&mut self, name: impl Into<String>) {
+        self.inputs.triggers.insert(name.into());
+    }
+
+    /// Nombre del estado actual (de origen mientras hay una transición en curso).
+    pub fn current_state(&self) -> &str {
+        &self.machine.states[self.current].name
+    }
+    /// ¿Hay una transición (crossfade) en curso?
+    pub fn is_transitioning(&self) -> bool {
+        self.active.is_some()
+    }
+
+    /// ¿El clip del estado actual terminó? (`false` si el estado es loop o si no
+    /// se registró su duración.)
+    fn clip_done(&self) -> bool {
+        let st = &self.machine.states[self.current];
+        if st.looping {
+            return false;
+        }
+        match self.machine.duration_of_clip(st.clip) {
+            Some(dur) => self.state_time >= dur,
+            None => false,
+        }
+    }
+
+    fn cond_met(&self, c: &Condition, clip_done: bool) -> bool {
+        match c {
+            Condition::Bool { name, value } => {
+                self.inputs.bools.get(name).copied().unwrap_or(false) == *value
+            }
+            Condition::Number { name, op, value } => {
+                op.test(self.inputs.numbers.get(name).copied().unwrap_or(0.0), *value)
+            }
+            Condition::Trigger { name } => self.inputs.triggers.contains(name),
+            Condition::ClipDone => clip_done,
+        }
+    }
+
+    fn transition_ready(&self, t: &Transition, clip_done: bool) -> bool {
+        // Sin condiciones = nunca dispara sola (evita loops degenerados);
+        // las transiciones útiles siempre tienen al menos una guarda.
+        !t.conditions.is_empty() && t.conditions.iter().all(|c| self.cond_met(c, clip_done))
+    }
+
+    /// Busca la primera transición disparable: any-state primero, luego las
+    /// salientes del estado actual. No retorna self-transiciones (to == current).
+    fn pick_transition(&self, clip_done: bool) -> Option<Transition> {
+        self.machine
+            .any
+            .iter()
+            .chain(self.machine.states[self.current].transitions.iter())
+            .find(|t| t.to != self.current && self.transition_ready(t, clip_done))
+            .cloned()
+    }
+
+    fn begin(&mut self, t: Transition) {
+        if t.duration_secs <= 0.0 {
+            // Instantáneo: saltamos sin blend.
+            self.current = t.to;
+            self.state_time = 0.0;
+            self.active = None;
+        } else {
+            self.active = Some(Active {
+                to: t.to,
+                to_time: 0.0,
+                elapsed: 0.0,
+                duration: t.duration_secs,
+            });
+        }
+    }
+
+    /// Avanza la transición en curso (si la hay) por `dt` y la confirma cuando
+    /// el blend completa. Aislado para poder aplicarlo tanto a una transición
+    /// que ya venía como a una recién arrancada en este mismo frame.
+    fn step_active(&mut self, dt: f64) {
+        let Some(at) = self.active.as_ref() else {
+            return;
+        };
+        let to = at.to;
+        let speed = self.machine.speed_of(to);
+        let at = self.active.as_mut().unwrap();
+        at.to_time += dt * speed;
+        at.elapsed += dt;
+        if at.elapsed >= at.duration {
+            let to_time = at.to_time;
+            self.current = to;
+            self.state_time = to_time;
+            self.active = None;
+        }
+    }
+
+    fn apply_action(&mut self, action: &Action) {
+        match action {
+            Action::SetBool { name, value } => {
+                self.inputs.bools.insert(name.clone(), *value);
+            }
+            Action::Fire { name } => {
+                self.inputs.triggers.insert(name.clone());
+            }
+        }
+    }
+
+    /// Reporta la posición del puntero en coords **normalizadas** `0..1` sobre
+    /// el rect de la animación, o `None` si el puntero salió. Dispara los
+    /// listeners `Enter`/`Exit`/`Move` correspondientes y deja la posición
+    /// guardada para los de `Down`/`Up`.
+    pub fn pointer_move(&mut self, pos: Option<(f64, f64)>) {
+        let machine = self.machine.clone();
+        let was = self.last_pointer;
+        for l in &machine.listeners {
+            let was_in = was.map_or(false, |(x, y)| l.area.contains(x, y));
+            let now_in = pos.map_or(false, |(x, y)| l.area.contains(x, y));
+            let fire = match l.trigger {
+                PointerTrigger::Enter => !was_in && now_in,
+                PointerTrigger::Exit => was_in && !now_in,
+                PointerTrigger::Move => now_in,
+                _ => false,
+            };
+            if fire {
+                self.apply_action(&l.action);
+            }
+        }
+        self.last_pointer = pos;
+    }
+
+    /// Botón presionado: dispara los listeners `Down` cuya área contiene la
+    /// última posición conocida del puntero.
+    pub fn pointer_down(&mut self) {
+        self.pointer_button(PointerTrigger::Down);
+    }
+
+    /// Botón soltado: dispara los listeners `Up`.
+    pub fn pointer_up(&mut self) {
+        self.pointer_button(PointerTrigger::Up);
+    }
+
+    fn pointer_button(&mut self, which: PointerTrigger) {
+        let Some((px, py)) = self.last_pointer else {
+            return;
+        };
+        let machine = self.machine.clone();
+        for l in &machine.listeners {
+            if l.trigger == which && l.area.contains(px, py) {
+                self.apply_action(&l.action);
+            }
+        }
+    }
+
+    /// Avanza la máquina `dt` segundos: corre el tiempo del estado, avanza/
+    /// confirma la transición en curso, evalúa una nueva transición (y le aplica
+    /// el `dt` de este frame si arranca) y consume los triggers.
+    pub fn advance(&mut self, dt: f64) {
+        let dt = dt.max(0.0);
+        self.state_time += dt * self.machine.speed_of(self.current);
+
+        // Transición que ya venía de frames anteriores.
+        self.step_active(dt);
+
+        // Nueva transición sólo si no estamos mezclando (sin interrupción de
+        // blend en el MVP). Si arranca, le aplicamos el dt de este frame para
+        // que el blend progrese (y se complete si el dt es grande).
+        if self.active.is_none() {
+            let done = self.clip_done();
+            if let Some(t) = self.pick_transition(done) {
+                self.begin(t);
+                self.step_active(dt);
+            }
+        }
+
+        self.inputs.triggers.clear();
+    }
+
+    /// Qué pintar este frame. Durante una transición, `primary` es el estado de
+    /// origen y `blend` el entrante con su mezcla 0..1.
+    pub fn render_frame(&self) -> RenderFrame {
+        let primary = ClipSample {
+            clip: self.machine.clip_of(self.current),
+            time_secs: self.state_time,
+        };
+        let blend = self.active.as_ref().map(|at| {
+            let mix = (at.elapsed / at.duration).clamp(0.0, 1.0) as f32;
+            (
+                ClipSample {
+                    clip: self.machine.clip_of(at.to),
+                    time_secs: at.to_time,
+                },
+                mix,
+            )
+        });
+        RenderFrame { primary, blend }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    const IDLE: ClipId = 0;
+    const WALK: ClipId = 1;
+    const JUMP: ClipId = 2;
+
+    /// idle ⇄ walk por un bool "moving", con blend de 0.2 s.
+    fn idle_walk() -> StateMachine {
+        let mut sm = StateMachine::new();
+        let idle = sm.add_state("idle", IDLE, 1.0, true);
+        let walk = sm.add_state("walk", WALK, 1.0, true);
+        sm.set_entry(idle);
+        sm.transition(idle, walk, vec![Condition::bool("moving", true)], 0.2);
+        sm.transition(walk, idle, vec![Condition::bool("moving", false)], 0.2);
+        sm
+    }
+
+    #[test]
+    fn arranca_en_entry() {
+        let inst = idle_walk().instance();
+        assert_eq!(inst.current_state(), "idle");
+        assert_eq!(inst.render_frame().primary.clip, IDLE);
+        assert!(inst.render_frame().blend.is_none());
+    }
+
+    #[test]
+    fn bool_dispara_transicion_con_blend() {
+        let mut inst = idle_walk().instance();
+        inst.set_bool("moving", true);
+        inst.advance(0.1); // arranca la transición (dur 0.2)
+        assert!(inst.is_transitioning(), "debería estar mezclando");
+        let rf = inst.render_frame();
+        assert_eq!(rf.primary.clip, IDLE); // origen
+        let (incoming, mix) = rf.blend.expect("hay blend");
+        assert_eq!(incoming.clip, WALK);
+        assert!((mix - 0.5).abs() < 1e-6, "0.1/0.2 = 0.5, fue {mix}");
+        // Completar el blend.
+        inst.advance(0.15);
+        assert!(!inst.is_transitioning());
+        assert_eq!(inst.current_state(), "walk");
+        assert!(inst.render_frame().blend.is_none());
+    }
+
+    #[test]
+    fn vuelve_cuando_el_bool_se_apaga() {
+        let mut inst = idle_walk().instance();
+        inst.set_bool("moving", true);
+        inst.advance(0.3); // idle→walk completo
+        assert_eq!(inst.current_state(), "walk");
+        inst.set_bool("moving", false);
+        inst.advance(0.3); // walk→idle completo
+        assert_eq!(inst.current_state(), "idle");
+    }
+
+    #[test]
+    fn trigger_es_de_un_solo_frame() {
+        let mut sm = idle_walk();
+        let jump = sm.add_state("jump", JUMP, 1.0, false);
+        sm.set_clip_duration(JUMP, 0.5);
+        // any-state: fire "jump" → jump (instantáneo)
+        sm.transition_any(jump, vec![Condition::trigger("jump")], 0.0);
+        // jump termina → vuelve a idle
+        sm.transition(jump, 0, vec![Condition::clip_done()], 0.0);
+        let mut inst = sm.instance();
+
+        inst.fire("jump");
+        inst.advance(0.016);
+        assert_eq!(inst.current_state(), "jump");
+        // El trigger se consumió: avanzar de nuevo no re-dispara nada raro.
+        inst.advance(0.016);
+        assert_eq!(inst.current_state(), "jump");
+        // Cuando el clip de 0.5 s termina, vuelve a idle.
+        inst.advance(0.5);
+        assert_eq!(inst.current_state(), "idle");
+    }
+
+    #[test]
+    fn condicion_numerica() {
+        let mut sm = StateMachine::new();
+        let slow = sm.add_state("slow", IDLE, 1.0, true);
+        let fast = sm.add_state("fast", WALK, 1.0, true);
+        sm.set_entry(slow);
+        sm.transition(
+            slow,
+            fast,
+            vec![Condition::number("speed", Cmp::Gt, 5.0)],
+            0.0,
+        );
+        let mut inst = sm.instance();
+        inst.set_number("speed", 3.0);
+        inst.advance(0.016);
+        assert_eq!(inst.current_state(), "slow");
+        inst.set_number("speed", 9.0);
+        inst.advance(0.016);
+        assert_eq!(inst.current_state(), "fast");
+    }
+
+    #[test]
+    fn transicion_instantanea_sin_blend() {
+        let mut sm = StateMachine::new();
+        let a = sm.add_state("a", IDLE, 1.0, true);
+        let b = sm.add_state("b", WALK, 1.0, true);
+        sm.set_entry(a);
+        sm.transition(a, b, vec![Condition::bool("go", true)], 0.0);
+        let mut inst = sm.instance();
+        inst.set_bool("go", true);
+        inst.advance(0.016);
+        assert!(!inst.is_transitioning());
+        assert_eq!(inst.current_state(), "b");
+    }
+
+    #[test]
+    fn hover_enter_exit_maneja_un_bool() {
+        // idle ⇄ walk por "moving"; hover sobre toda la animación setea moving.
+        let mut sm = idle_walk();
+        sm.listener(Area::All, PointerTrigger::Enter, Action::set_bool("moving", true));
+        sm.listener(Area::All, PointerTrigger::Exit, Action::set_bool("moving", false));
+        let mut inst = sm.instance();
+
+        // Puntero entra al centro → moving=true → transiciona a walk.
+        inst.pointer_move(Some((0.5, 0.5)));
+        inst.advance(0.3);
+        assert_eq!(inst.current_state(), "walk");
+
+        // Puntero sale → moving=false → vuelve a idle.
+        inst.pointer_move(None);
+        inst.advance(0.3);
+        assert_eq!(inst.current_state(), "idle");
+    }
+
+    #[test]
+    fn click_dispara_trigger_en_su_area() {
+        let mut sm = idle_walk();
+        let jump = sm.add_state("jump", JUMP, 1.0, false);
+        sm.set_clip_duration(JUMP, 0.5);
+        sm.transition_any(jump, vec![Condition::trigger("tap")], 0.0);
+        sm.transition(jump, 0, vec![Condition::clip_done()], 0.0);
+        // Sólo la mitad derecha responde al click.
+        sm.listener(
+            Area::Rect { x: 0.5, y: 0.0, w: 0.5, h: 1.0 },
+            PointerTrigger::Down,
+            Action::fire("tap"),
+        );
+        let mut inst = sm.instance();
+
+        // Click en la mitad IZQUIERDA: fuera del área, no dispara.
+        inst.pointer_move(Some((0.2, 0.5)));
+        inst.pointer_down();
+        inst.advance(0.016);
+        assert_eq!(inst.current_state(), "idle");
+
+        // Click en la mitad DERECHA: dispara "tap" → jump.
+        inst.pointer_move(Some((0.8, 0.5)));
+        inst.pointer_down();
+        inst.advance(0.016);
+        assert_eq!(inst.current_state(), "jump");
+    }
+
+    #[test]
+    fn move_fuera_del_area_no_dispara() {
+        let mut sm = idle_walk();
+        sm.listener(
+            Area::Rect { x: 0.0, y: 0.0, w: 0.4, h: 0.4 },
+            PointerTrigger::Enter,
+            Action::set_bool("moving", true),
+        );
+        let mut inst = sm.instance();
+        // Entra pero a una zona fuera del rect del listener.
+        inst.pointer_move(Some((0.9, 0.9)));
+        inst.advance(0.3);
+        assert_eq!(inst.current_state(), "idle", "fuera del área no debe disparar");
+    }
+
+    #[test]
+    fn la_velocidad_escala_el_tiempo() {
+        let mut sm = StateMachine::new();
+        let s = sm.add_state("s", IDLE, 2.0, true);
+        sm.set_entry(s);
+        let mut inst = sm.instance();
+        inst.advance(1.0);
+        // speed 2.0 → 1 s real = 2 s de clip.
+        assert!((inst.render_frame().primary.time_secs - 2.0).abs() < 1e-9);
+    }
+}
diff --git a/llimphi-anim/src/physics.rs b/llimphi-anim/src/physics.rs
new file mode 100644
index 0000000..93a11b5
--- /dev/null
+++ b/llimphi-anim/src/physics.rs
@@ -0,0 +1,284 @@
+//! Física de partículas (Verlet) + constraints de distancia, para mover
+//! esqueletos con **leyes físicas**: cuerdas, péndulos, ragdolls que caen y se
+//! balancean bajo gravedad, con piso y paredes.
+//!
+//! El patrón es: una cadena de [`Particle`]s unidas por [`Link`]s (distancias
+//! rígidas = longitudes de hueso) se integra con gravedad; luego
+//! [`pose_chain_from_points`] convierte las posiciones de las partículas en poses
+//! de una cadena de huesos, y el skinning deforma la malla. Así la física maneja
+//! el esqueleto, no una animación keyframeada.
+//!
+//! Verlet (en vez de Euler con velocidades explícitas) hace los constraints de
+//! distancia triviales y estables: se resuelven por proyección iterativa.
+
+use kurbo::{Point, Vec2};
+
+use crate::skel::{BoneId, Skeleton};
+
+/// Una partícula puntual. `inv_mass = 0` la fija (pin); `damping` global la frena.
+#[derive(Debug, Clone, Copy)]
+pub struct Particle {
+    pub pos: Point,
+    pub prev: Point,
+    pub inv_mass: f64,
+}
+
+impl Particle {
+    pub fn new(pos: Point, pinned: bool) -> Self {
+        Self {
+            pos,
+            prev: pos,
+            inv_mass: if pinned { 0.0 } else { 1.0 },
+        }
+    }
+    pub fn pinned(&self) -> bool {
+        self.inv_mass == 0.0
+    }
+}
+
+/// Restricción de distancia entre dos partículas (un "hueso" rígido).
+#[derive(Debug, Clone, Copy)]
+pub struct Link {
+    pub a: usize,
+    pub b: usize,
+    pub rest: f64,
+    /// 0..1: 1 = rígido, <1 = elástico.
+    pub stiffness: f64,
+}
+
+/// Mundo físico 2D: partículas + links + gravedad + piso/paredes.
+#[derive(Debug, Clone)]
+pub struct Physics {
+    pub particles: Vec<Particle>,
+    pub links: Vec<Link>,
+    pub gravity: Vec2,
+    /// Factor de retención de velocidad por step (0..1, ~0.99).
+    pub damping: f64,
+    /// Si está, las partículas no bajan de esta `y` (piso).
+    pub floor_y: Option<f64>,
+    /// Paredes `(x0, x1)` que contienen en x.
+    pub walls_x: Option<(f64, f64)>,
+}
+
+impl Default for Physics {
+    fn default() -> Self {
+        Self {
+            particles: Vec::new(),
+            links: Vec::new(),
+            gravity: Vec2::new(0.0, 980.0), // px/s² hacia abajo (y crece para abajo)
+            damping: 0.99,
+            floor_y: None,
+            walls_x: None,
+        }
+    }
+}
+
+impl Physics {
+    pub fn new() -> Self {
+        Self::default()
+    }
+
+    /// Agrega una partícula y devuelve su índice.
+    pub fn particle(&mut self, pos: Point, pinned: bool) -> usize {
+        let i = self.particles.len();
+        self.particles.push(Particle::new(pos, pinned));
+        i
+    }
+
+    /// Une dos partículas con `rest` = su distancia actual y rigidez total.
+    pub fn link(&mut self, a: usize, b: usize) {
+        let rest = (self.particles[b].pos - self.particles[a].pos).hypot();
+        self.links.push(Link { a, b, rest, stiffness: 1.0 });
+    }
+
+    /// Une dos partículas con una distancia de reposo y rigidez dadas.
+    pub fn link_with(&mut self, a: usize, b: usize, rest: f64, stiffness: f64) {
+        self.links.push(Link { a, b, rest, stiffness });
+    }
+
+    /// Empuja las partículas lejos de `center` dentro de `radius` (campo de
+    /// repulsión — p. ej. el cursor barriendo las cuerdas).
+    pub fn repel(&mut self, center: Point, radius: f64, strength: f64) {
+        for p in &mut self.particles {
+            if p.pinned() {
+                continue;
+            }
+            let d = p.pos - center;
+            let dist = d.hypot();
+            if dist < radius && dist > 1e-6 {
+                let push = (1.0 - dist / radius) * strength;
+                p.pos += d * (push / dist);
+            }
+        }
+    }
+
+    /// Un paso de simulación: integra (gravedad + inercia) y resuelve los
+    /// constraints `iterations` veces (más iteraciones = más rígido/estable).
+    pub fn step(&mut self, dt: f64, iterations: usize) {
+        let dt2 = dt * dt;
+        for p in &mut self.particles {
+            if p.pinned() {
+                continue;
+            }
+            let vel = (p.pos - p.prev) * self.damping;
+            p.prev = p.pos;
+            p.pos = p.pos + vel + self.gravity * dt2;
+        }
+        for _ in 0..iterations.max(1) {
+            self.solve_links();
+            self.solve_bounds();
+        }
+    }
+
+    fn solve_links(&mut self) {
+        for k in 0..self.links.len() {
+            let Link { a, b, rest, stiffness } = self.links[k];
+            let pa = self.particles[a].pos;
+            let pb = self.particles[b].pos;
+            let wa = self.particles[a].inv_mass;
+            let wb = self.particles[b].inv_mass;
+            let wsum = wa + wb;
+            if wsum < 1e-12 {
+                continue;
+            }
+            let delta = pb - pa;
+            let d = delta.hypot();
+            if d < 1e-9 {
+                continue;
+            }
+            let diff = (d - rest) / d * stiffness;
+            let corr = delta * diff;
+            self.particles[a].pos = pa + corr * (wa / wsum);
+            self.particles[b].pos = pb - corr * (wb / wsum);
+        }
+    }
+
+    fn solve_bounds(&mut self) {
+        for p in &mut self.particles {
+            if p.pinned() {
+                continue;
+            }
+            if let Some(fy) = self.floor_y {
+                if p.pos.y > fy {
+                    p.pos.y = fy;
+                    // Fricción: amortigua el deslizamiento horizontal en el piso.
+                    p.prev.x = p.pos.x + (p.prev.x - p.pos.x) * 0.5;
+                }
+            }
+            if let Some((x0, x1)) = self.walls_x {
+                p.pos.x = p.pos.x.clamp(x0, x1);
+            }
+        }
+    }
+
+    /// Posiciones actuales de las partículas (para construir poses / pintar).
+    pub fn positions(&self) -> Vec<Point> {
+        self.particles.iter().map(|p| p.pos).collect()
+    }
+}
+
+/// Posa una cadena de huesos para que siga una cadena de puntos (las partículas
+/// físicas). `points` tiene `bones.len() + 1` entradas: el hueso `i` va de
+/// `points[i]` a `points[i+1]`. Setea la translación de la raíz a `points[0]` y
+/// las rotaciones a los ángulos de cada segmento (relativos en la jerarquía).
+/// Llama `update`. Es el puente física → esqueleto.
+pub fn pose_chain_from_points(skel: &mut Skeleton, bones: &[BoneId], points: &[Point]) {
+    if bones.is_empty() || points.len() < bones.len() + 1 {
+        return;
+    }
+    let seg_angle = |i: usize| {
+        let d = points[i + 1] - points[i];
+        if d.hypot() < 1e-9 {
+            0.0
+        } else {
+            d.y.atan2(d.x)
+        }
+    };
+
+    // Raíz: su origen va a points[0]; rotación = ángulo del primer segmento.
+    let root = bones[0];
+    let mut rp = skel.pose(root);
+    rp.translation = points[0].to_vec2();
+    rp.rotation = seg_angle(0);
+    skel.set_pose(root, rp);
+
+    // Eslabones: rotación local = ángulo del segmento − ángulo del anterior
+    // (la rotación world se acumula por la jerarquía).
+    for i in 1..bones.len() {
+        let mut p = skel.pose(bones[i]);
+        p.rotation = seg_angle(i) - seg_angle(i - 1);
+        skel.set_pose(bones[i], p);
+    }
+    skel.update();
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use crate::skel::{Pose, Skeleton};
+
+    #[test]
+    fn la_gravedad_hace_caer_una_particula_libre() {
+        let mut w = Physics::new();
+        let i = w.particle(Point::new(0.0, 0.0), false);
+        w.step(0.1, 1);
+        assert!(w.particles[i].pos.y > 0.0, "debería caer (y crece)");
+    }
+
+    #[test]
+    fn una_particula_fija_no_se_mueve() {
+        let mut w = Physics::new();
+        let i = w.particle(Point::new(5.0, 5.0), true);
+        for _ in 0..10 {
+            w.step(0.1, 2);
+        }
+        assert_eq!(w.particles[i].pos, Point::new(5.0, 5.0));
+    }
+
+    #[test]
+    fn un_pendulo_cuelga_a_la_distancia_de_reposo() {
+        let mut w = Physics::new();
+        let anchor = w.particle(Point::new(0.0, 0.0), true);
+        let bob = w.particle(Point::new(0.0, 50.0), false);
+        w.link(anchor, bob); // rest = 50
+        for _ in 0..400 {
+            w.step(1.0 / 120.0, 8);
+        }
+        // En reposo cuelga recto hacia abajo a ~50 del ancla.
+        let p = w.particles[bob].pos;
+        assert!((p.x).abs() < 1.0, "x ~ 0, fue {}", p.x);
+        assert!((p.y - 50.0).abs() < 1.0, "y ~ 50, fue {}", p.y);
+    }
+
+    #[test]
+    fn el_piso_detiene_la_caida() {
+        let mut w = Physics::new();
+        w.floor_y = Some(100.0);
+        let i = w.particle(Point::new(0.0, 0.0), false);
+        for _ in 0..200 {
+            w.step(1.0 / 120.0, 2);
+        }
+        assert!(w.particles[i].pos.y <= 100.0 + 1e-6, "no pasa el piso");
+        assert!(w.particles[i].pos.y > 90.0, "llegó cerca del piso");
+    }
+
+    #[test]
+    fn pose_chain_sigue_los_puntos() {
+        // Cadena de 2 huesos; puntos en L vertical-luego-horizontal.
+        let mut s = Skeleton::new();
+        let a = s.add_bone(None, Pose::translate(Vec2::new(0.0, 0.0)));
+        let b = s.add_bone(Some(a), Pose::translate(Vec2::new(50.0, 0.0)));
+        s.bind();
+        let points = [
+            Point::new(0.0, 0.0),
+            Point::new(0.0, 50.0),  // primer segmento apunta hacia abajo (+y)
+            Point::new(50.0, 50.0), // segundo apunta a la derecha (+x)
+        ];
+        pose_chain_from_points(&mut s, &[a, b], &points);
+        // El origen del hueso b debe estar en points[1]; su punta (local 50,0) en points[2].
+        let b_origin = s.world(b) * Point::ZERO;
+        assert!((b_origin.x - 0.0).abs() < 1e-6 && (b_origin.y - 50.0).abs() < 1e-6, "{b_origin:?}");
+        let tip = s.world(b) * Point::new(50.0, 0.0);
+        assert!((tip.x - 50.0).abs() < 1e-6 && (tip.y - 50.0).abs() < 1e-6, "tip {tip:?}");
+    }
+}
diff --git a/llimphi-anim/src/skel.rs b/llimphi-anim/src/skel.rs
new file mode 100644
index 0000000..7bcf373
--- /dev/null
+++ b/llimphi-anim/src/skel.rs
@@ -0,0 +1,616 @@
+//! Jerarquía de huesos 2D + skinning ponderado de vértices (linear blend
+//! skinning, LBS) — el sustrato de la deformación esqueletal estilo Rive.
+//!
+//! **Puro y sin renderer.** Este módulo sólo calcula geometría: dada una
+//! jerarquía de huesos posada y una malla con pesos por vértice, produce las
+//! **posiciones deformadas** de los vértices (`kurbo::Point`). Quién las pinta
+//! (vello vía paths para malla vectorial, o clip+imagen para malla texturizada)
+//! es trabajo del consumidor; el spike confirmó que ambas rutas funcionan en
+//! vello 0.7.
+//!
+//! ## Bind pose vs pose actual
+//!
+//! El esqueleto se construye en su **bind pose** (la configuración en la que se
+//! ató la malla) y se llama [`Skeleton::bind`] para congelarla: por cada hueso
+//! se guarda su *inverse-bind* (el world transform inverso en el bind). Al
+//! animar, se cambian las poses locales ([`Skeleton::set_pose`]),
+//! [`Skeleton::update`] recompone los world transforms, y la matriz de skinning
+//! de un hueso es `world_actual · inverse_bind`. En el bind pose esa matriz es
+//! la identidad → los vértices quedan en reposo.
+//!
+//! ## LBS
+//!
+//! La posición deformada de un vértice es la media ponderada, sobre los huesos
+//! que lo influyen, de aplicarle a su posición de reposo la matriz de skinning
+//! de cada hueso: `v' = Σ_b w_b · (skin_b · v_rest)`.
+
+use std::collections::HashMap;
+
+use kurbo::{Affine, Point, Vec2};
+
+use crate::RenderFrame;
+
+/// Índice de un hueso dentro del esqueleto.
+pub type BoneId = usize;
+
+/// Pose local de un hueso (TRS) relativa a su padre. Se compone como
+/// `translate · rotate · scale` — el orden estándar.
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub struct Pose {
+    pub translation: Vec2,
+    /// Rotación en radianes (convención de kurbo).
+    pub rotation: f64,
+    pub scale: Vec2,
+}
+
+impl Default for Pose {
+    fn default() -> Self {
+        Self::identity()
+    }
+}
+
+impl Pose {
+    pub fn identity() -> Self {
+        Self {
+            translation: Vec2::ZERO,
+            rotation: 0.0,
+            scale: Vec2::new(1.0, 1.0),
+        }
+    }
+    pub fn translate(t: Vec2) -> Self {
+        Self {
+            translation: t,
+            ..Self::identity()
+        }
+    }
+    pub fn rotate(r: f64) -> Self {
+        Self {
+            rotation: r,
+            ..Self::identity()
+        }
+    }
+    /// Translación + rotación (lo más común al animar un hueso).
+    pub fn new(translation: Vec2, rotation: f64, scale: Vec2) -> Self {
+        Self {
+            translation,
+            rotation,
+            scale,
+        }
+    }
+    pub fn to_affine(&self) -> Affine {
+        Affine::translate(self.translation)
+            * Affine::rotate(self.rotation)
+            * Affine::scale_non_uniform(self.scale.x, self.scale.y)
+    }
+}
+
+#[derive(Debug, Clone)]
+struct Bone {
+    parent: Option<BoneId>,
+    local: Pose,
+}
+
+/// Una jerarquía de huesos posable. Los huesos se agregan **padre antes que
+/// hijo** (el índice del padre debe ser menor), así el cómputo de world
+/// transforms es una sola pasada hacia adelante.
+#[derive(Debug, Clone, Default)]
+pub struct Skeleton {
+    bones: Vec<Bone>,
+    /// World transform inverso de cada hueso, capturado en `bind`.
+    inverse_bind: Vec<Affine>,
+    /// Scratch: world transforms actuales (recomputados por `update`).
+    world: Vec<Affine>,
+}
+
+impl Skeleton {
+    pub fn new() -> Self {
+        Self::default()
+    }
+
+    /// Agrega un hueso con `parent` (o `None` = raíz) y su pose local. Devuelve
+    /// su `BoneId`. **Pánico** si el padre no fue agregado antes (índice ≥ id).
+    pub fn add_bone(&mut self, parent: Option<BoneId>, local: Pose) -> BoneId {
+        if let Some(p) = parent {
+            assert!(
+                p < self.bones.len(),
+                "el padre {p} debe agregarse antes que el hijo"
+            );
+        }
+        let id = self.bones.len();
+        self.bones.push(Bone { parent, local });
+        self.inverse_bind.push(Affine::IDENTITY);
+        self.world.push(Affine::IDENTITY);
+        id
+    }
+
+    fn recompute_world(&mut self) {
+        for i in 0..self.bones.len() {
+            let local = self.bones[i].local.to_affine();
+            self.world[i] = match self.bones[i].parent {
+                Some(p) => self.world[p] * local,
+                None => local,
+            };
+        }
+    }
+
+    /// Congela la pose actual como **bind pose**: recompone los world transforms
+    /// y guarda el inverse-bind de cada hueso. Llamar una vez tras construir el
+    /// esqueleto en reposo (antes de animar).
+    pub fn bind(&mut self) {
+        self.recompute_world();
+        for i in 0..self.bones.len() {
+            self.inverse_bind[i] = self.world[i].inverse();
+        }
+    }
+
+    /// Cambia la pose local de un hueso (animar). Requiere [`update`] después
+    /// para que los world transforms reflejen el cambio.
+    ///
+    /// [`update`]: Skeleton::update
+    pub fn set_pose(&mut self, bone: BoneId, local: Pose) {
+        self.bones[bone].local = local;
+    }
+
+    /// Pose local actual de un hueso.
+    pub fn pose(&self, bone: BoneId) -> Pose {
+        self.bones[bone].local
+    }
+
+    /// Recalcula los world transforms desde las poses actuales. Llamar tras
+    /// posear y antes de deformar/leer `world`/`skin_matrix`.
+    pub fn update(&mut self) {
+        self.recompute_world();
+    }
+
+    /// Matriz de skinning del hueso: `world_actual · inverse_bind`. En el bind
+    /// pose es la identidad.
+    pub fn skin_matrix(&self, bone: BoneId) -> Affine {
+        self.world[bone] * self.inverse_bind[bone]
+    }
+
+    /// World transform actual del hueso (útil para dibujar el hueso mismo o
+    /// adjuntar algo a su punta).
+    pub fn world(&self, bone: BoneId) -> Affine {
+        self.world[bone]
+    }
+
+    /// Padre de un hueso (`None` si es raíz). Lo usan los constraints para
+    /// convertir una rotación deseada en mundo a la pose local.
+    pub fn parent(&self, bone: BoneId) -> Option<BoneId> {
+        self.bones[bone].parent
+    }
+
+    pub fn len(&self) -> usize {
+        self.bones.len()
+    }
+    pub fn is_empty(&self) -> bool {
+        self.bones.is_empty()
+    }
+}
+
+/// Influencia de un hueso sobre un vértice. Idealmente los pesos de un vértice
+/// suman 1; si no, `deform` normaliza.
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub struct Weight {
+    pub bone: BoneId,
+    pub weight: f64,
+}
+
+/// Un vértice de la malla: su posición de reposo (en model/bind space), su UV
+/// `0..1` (para textura, lo usa el render de malla texturizada) y los huesos que
+/// lo influyen.
+#[derive(Debug, Clone)]
+pub struct Vertex {
+    pub rest: Point,
+    pub uv: (f64, f64),
+    pub weights: Vec<Weight>,
+}
+
+impl Vertex {
+    /// Vértice rígido a un solo hueso (peso 1).
+    pub fn rigid(rest: Point, uv: (f64, f64), bone: BoneId) -> Self {
+        Self {
+            rest,
+            uv,
+            weights: vec![Weight { bone, weight: 1.0 }],
+        }
+    }
+}
+
+/// Una malla deformable: vértices con pesos + topología de triángulos (índices
+/// a `vertices`). El render la consume tras `deform`.
+#[derive(Debug, Clone, Default)]
+pub struct Mesh {
+    pub vertices: Vec<Vertex>,
+    pub triangles: Vec<[u32; 3]>,
+}
+
+impl Mesh {
+    pub fn new() -> Self {
+        Self::default()
+    }
+
+    /// Calcula las posiciones deformadas (LBS) en `out`, una por vértice, en el
+    /// mismo orden que `self.vertices`. `skel` debe tener sus world transforms
+    /// actualizados ([`Skeleton::update`]). Reutiliza el buffer `out` (sin
+    /// asignar por frame).
+    pub fn deform_into(&self, skel: &Skeleton, out: &mut Vec<Point>) {
+        out.clear();
+        out.reserve(self.vertices.len());
+        for v in &self.vertices {
+            if v.weights.is_empty() {
+                out.push(v.rest);
+                continue;
+            }
+            let mut acc = Vec2::ZERO;
+            let mut wsum = 0.0;
+            for w in &v.weights {
+                let p = skel.skin_matrix(w.bone) * v.rest;
+                acc += p.to_vec2() * w.weight;
+                wsum += w.weight;
+            }
+            let p = if wsum.abs() > 1e-12 {
+                (acc * (1.0 / wsum)).to_point()
+            } else {
+                v.rest
+            };
+            out.push(p);
+        }
+    }
+
+    /// Variante que asigna y devuelve el `Vec` (conveniencia para tests/uso
+    /// ocasional; en el bucle de render preferí [`deform_into`]).
+    ///
+    /// [`deform_into`]: Mesh::deform_into
+    pub fn deform(&self, skel: &Skeleton) -> Vec<Point> {
+        let mut out = Vec::new();
+        self.deform_into(skel, &mut out);
+        out
+    }
+}
+
+/// Interpola linealmente dos poses (translación/escala lerp, rotación lerp del
+/// ángulo). Es el blend de poses que usa el crossfade esqueletal — mezclar
+/// *poses* da una deformación correcta, a diferencia del crossfade de píxeles.
+pub fn lerp_pose(a: Pose, b: Pose, f: f64) -> Pose {
+    let lerp = |x: f64, y: f64| x + (y - x) * f;
+    Pose {
+        translation: Vec2::new(
+            lerp(a.translation.x, b.translation.x),
+            lerp(a.translation.y, b.translation.y),
+        ),
+        rotation: lerp(a.rotation, b.rotation),
+        scale: Vec2::new(lerp(a.scale.x, b.scale.x), lerp(a.scale.y, b.scale.y)),
+    }
+}
+
+/// Keyframe de pose de un hueso en un instante.
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub struct PoseKey {
+    pub t: f64,
+    pub pose: Pose,
+}
+
+/// Pista de animación de un hueso: keyframes de pose ordenados por tiempo.
+#[derive(Debug, Clone, Default)]
+pub struct BoneTrack {
+    pub bone: BoneId,
+    pub keys: Vec<PoseKey>,
+}
+
+impl BoneTrack {
+    /// Pose en el instante `t` (lineal entre keyframes, clamp en los extremos).
+    pub fn sample(&self, t: f64) -> Pose {
+        match self.keys.as_slice() {
+            [] => Pose::identity(),
+            [only] => only.pose,
+            keys => {
+                if t <= keys[0].t {
+                    return keys[0].pose;
+                }
+                let last = keys[keys.len() - 1];
+                if t >= last.t {
+                    return last.pose;
+                }
+                for w in keys.windows(2) {
+                    let (a, b) = (w[0], w[1]);
+                    if t >= a.t && t <= b.t {
+                        let span = b.t - a.t;
+                        let f = if span > 1e-12 { (t - a.t) / span } else { 0.0 };
+                        return lerp_pose(a.pose, b.pose, f);
+                    }
+                }
+                last.pose
+            }
+        }
+    }
+}
+
+/// Una animación esqueletal: pistas de pose por hueso, con duración y loop. Es
+/// lo que un *estado* de la máquina reproduce (un clip = una `BoneAnimation`).
+/// Los huesos no incluidos en ninguna pista conservan su pose actual.
+#[derive(Debug, Clone, Default)]
+pub struct BoneAnimation {
+    pub duration: f64,
+    pub looping: bool,
+    pub tracks: Vec<BoneTrack>,
+}
+
+impl BoneAnimation {
+    /// Samplea todas las pistas en `t` (envuelto por la duración si es loop) a
+    /// pares `(hueso, pose)`, reusando el buffer `out`.
+    pub fn sample_into(&self, t: f64, out: &mut Vec<(BoneId, Pose)>) {
+        let tt = if self.looping && self.duration > 0.0 {
+            t.rem_euclid(self.duration)
+        } else {
+            t
+        };
+        out.clear();
+        out.extend(self.tracks.iter().map(|tr| (tr.bone, tr.sample(tt))));
+    }
+
+    /// Posa el esqueleto con esta animación en el instante `t` y llama `update`.
+    pub fn apply(&self, skel: &mut Skeleton, t: f64) {
+        let mut buf = Vec::new();
+        self.sample_into(t, &mut buf);
+        for (b, p) in buf {
+            skel.set_pose(b, p);
+        }
+        skel.update();
+    }
+}
+
+/// Posa el esqueleto según el [`RenderFrame`] de una máquina de estados, usando
+/// las `clips` ([`BoneAnimation`]) indexadas por `ClipId`. Durante una
+/// transición blendea **poses** (no píxeles) por la mezcla del frame. Llama
+/// `skel.update()` al final. Es el puente que une máquina-de-estados →
+/// esqueleto: estado/transición deciden la pose, el skinning la convierte en
+/// deformación.
+///
+/// [`RenderFrame`]: crate::RenderFrame
+pub fn pose_from_render_frame(skel: &mut Skeleton, frame: &RenderFrame, clips: &[BoneAnimation]) {
+    let mut poses: HashMap<BoneId, Pose> = HashMap::new();
+    let mut buf = Vec::new();
+    if let Some(a) = clips.get(frame.primary.clip as usize) {
+        a.sample_into(frame.primary.time_secs, &mut buf);
+        for (b, p) in buf.drain(..) {
+            poses.insert(b, p);
+        }
+    }
+    if let Some((inc, mix)) = frame.blend {
+        if let Some(a) = clips.get(inc.clip as usize) {
+            a.sample_into(inc.time_secs, &mut buf);
+            let mix = mix as f64;
+            for (b, p) in buf.drain(..) {
+                poses
+                    .entry(b)
+                    .and_modify(|cur| *cur = lerp_pose(*cur, p, mix))
+                    .or_insert(p);
+            }
+        }
+    }
+    for (b, p) in poses {
+        skel.set_pose(b, p);
+    }
+    skel.update();
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    fn approx(a: Point, x: f64, y: f64) -> bool {
+        (a.x - x).abs() < 1e-9 && (a.y - y).abs() < 1e-9
+    }
+
+    #[test]
+    fn bind_pose_deja_los_vertices_en_reposo() {
+        let mut s = Skeleton::new();
+        let b = s.add_bone(None, Pose::translate(Vec2::new(5.0, 7.0)));
+        s.bind();
+        s.update();
+        let mut m = Mesh::new();
+        m.vertices.push(Vertex::rigid(Point::new(3.0, 4.0), (0.0, 0.0), b));
+        let d = m.deform(&s);
+        // Sin re-posar: la matriz de skinning es identidad → reposo intacto.
+        assert!(approx(d[0], 3.0, 4.0), "fue {:?}", d[0]);
+    }
+
+    #[test]
+    fn rotar_un_hueso_rota_su_vertice() {
+        let mut s = Skeleton::new();
+        let b = s.add_bone(None, Pose::identity());
+        s.bind();
+        // Rotar 90°: (10,0) → (0,10) en convención de kurbo.
+        s.set_pose(b, Pose::rotate(std::f64::consts::FRAC_PI_2));
+        s.update();
+        let mut m = Mesh::new();
+        m.vertices.push(Vertex::rigid(Point::new(10.0, 0.0), (0.0, 0.0), b));
+        let d = m.deform(&s);
+        assert!(approx(d[0], 0.0, 10.0), "fue {:?}", d[0]);
+    }
+
+    #[test]
+    fn cadena_padre_hijo_compone_transforms() {
+        let mut s = Skeleton::new();
+        let root = s.add_bone(None, Pose::identity());
+        let child = s.add_bone(Some(root), Pose::translate(Vec2::new(10.0, 0.0)));
+        s.bind();
+        // Rotar la raíz 90° rota rígidamente al hijo y su vértice.
+        s.set_pose(root, Pose::rotate(std::f64::consts::FRAC_PI_2));
+        s.update();
+        let mut m = Mesh::new();
+        m.vertices
+            .push(Vertex::rigid(Point::new(20.0, 0.0), (0.0, 0.0), child));
+        let d = m.deform(&s);
+        // (20,0) rotado 90° sobre el origen → (0,20).
+        assert!(approx(d[0], 0.0, 20.0), "fue {:?}", d[0]);
+    }
+
+    #[test]
+    fn peso_repartido_mezcla_dos_huesos() {
+        let mut s = Skeleton::new();
+        let a = s.add_bone(None, Pose::identity());
+        let b = s.add_bone(None, Pose::identity());
+        s.bind();
+        // A queda quieto; B se traslada (0,20).
+        s.set_pose(b, Pose::translate(Vec2::new(0.0, 20.0)));
+        s.update();
+        let mut m = Mesh::new();
+        m.vertices.push(Vertex {
+            rest: Point::new(0.0, 0.0),
+            uv: (0.5, 0.5),
+            weights: vec![
+                Weight { bone: a, weight: 0.5 },
+                Weight { bone: b, weight: 0.5 },
+            ],
+        });
+        let d = m.deform(&s);
+        // 0.5·(0,0) + 0.5·(0,20) = (0,10).
+        assert!(approx(d[0], 0.0, 10.0), "fue {:?}", d[0]);
+    }
+
+    #[test]
+    fn pesos_sin_normalizar_se_normalizan() {
+        let mut s = Skeleton::new();
+        let a = s.add_bone(None, Pose::identity());
+        let b = s.add_bone(None, Pose::translate(Vec2::new(0.0, 10.0)));
+        s.bind();
+        s.update();
+        let mut m = Mesh::new();
+        // Pesos 2 y 2 (suman 4) → media ponderada, no suma cruda.
+        m.vertices.push(Vertex {
+            rest: Point::new(0.0, 0.0),
+            uv: (0.0, 0.0),
+            weights: vec![
+                Weight { bone: a, weight: 2.0 },
+                Weight { bone: b, weight: 2.0 },
+            ],
+        });
+        let d = m.deform(&s);
+        // skin_a = id → (0,0); skin_b = id (b en bind pose, no re-posado) → (0,0).
+        // Ambos en reposo: (0,0). (Verifica que no explota por wsum=4.)
+        assert!(approx(d[0], 0.0, 0.0), "fue {:?}", d[0]);
+    }
+
+    #[test]
+    fn vertice_sin_pesos_queda_en_reposo() {
+        let mut s = Skeleton::new();
+        let _b = s.add_bone(None, Pose::rotate(1.0));
+        s.bind();
+        s.update();
+        let mut m = Mesh::new();
+        m.vertices.push(Vertex {
+            rest: Point::new(7.0, 7.0),
+            uv: (0.0, 0.0),
+            weights: vec![],
+        });
+        let d = m.deform(&s);
+        assert!(approx(d[0], 7.0, 7.0), "fue {:?}", d[0]);
+    }
+
+    #[test]
+    fn track_samplea_lineal_entre_keyframes() {
+        let tr = BoneTrack {
+            bone: 0,
+            keys: vec![
+                PoseKey { t: 0.0, pose: Pose::rotate(0.0) },
+                PoseKey { t: 2.0, pose: Pose::rotate(2.0) },
+            ],
+        };
+        assert!((tr.sample(0.0).rotation - 0.0).abs() < 1e-9);
+        assert!((tr.sample(2.0).rotation - 2.0).abs() < 1e-9);
+        assert!((tr.sample(1.0).rotation - 1.0).abs() < 1e-9, "punto medio");
+        // Clamp fuera de rango.
+        assert!((tr.sample(-5.0).rotation - 0.0).abs() < 1e-9);
+        assert!((tr.sample(99.0).rotation - 2.0).abs() < 1e-9);
+    }
+
+    #[test]
+    fn animacion_en_loop_envuelve_el_tiempo() {
+        let anim = BoneAnimation {
+            duration: 2.0,
+            looping: true,
+            tracks: vec![BoneTrack {
+                bone: 0,
+                keys: vec![
+                    PoseKey { t: 0.0, pose: Pose::rotate(0.0) },
+                    PoseKey { t: 2.0, pose: Pose::rotate(2.0) },
+                ],
+            }],
+        };
+        let mut buf = Vec::new();
+        anim.sample_into(3.0, &mut buf); // 3 % 2 = 1 → rotación ~1.0
+        assert!((buf[0].1.rotation - 1.0).abs() < 1e-9, "fue {}", buf[0].1.rotation);
+    }
+
+    #[test]
+    fn render_frame_simple_posa_el_esqueleto() {
+        let mut s = Skeleton::new();
+        let b = s.add_bone(None, Pose::identity());
+        s.bind();
+        let anim = BoneAnimation {
+            duration: 2.0,
+            looping: true,
+            tracks: vec![BoneTrack {
+                bone: b,
+                keys: vec![
+                    PoseKey { t: 0.0, pose: Pose::identity() },
+                    PoseKey {
+                        t: 1.0,
+                        pose: Pose::rotate(std::f64::consts::FRAC_PI_2),
+                    },
+                ],
+            }],
+        };
+        let clips = vec![anim];
+        let frame = crate::RenderFrame {
+            primary: crate::ClipSample { clip: 0, time_secs: 1.0 },
+            blend: None,
+        };
+        pose_from_render_frame(&mut s, &frame, &clips);
+        let mut m = Mesh::new();
+        m.vertices.push(Vertex::rigid(Point::new(10.0, 0.0), (0.0, 0.0), b));
+        let d = m.deform(&s);
+        assert!(approx(d[0], 0.0, 10.0), "fue {:?}", d[0]);
+    }
+
+    #[test]
+    fn render_frame_con_blend_mezcla_poses() {
+        let mut s = Skeleton::new();
+        let b = s.add_bone(None, Pose::identity());
+        s.bind();
+        // clip0: identidad; clip1: 90°. Blend 0.5 → 45°.
+        let rest = BoneAnimation {
+            duration: 1.0,
+            looping: true,
+            tracks: vec![BoneTrack {
+                bone: b,
+                keys: vec![PoseKey { t: 0.0, pose: Pose::identity() }],
+            }],
+        };
+        let turn = BoneAnimation {
+            duration: 1.0,
+            looping: true,
+            tracks: vec![BoneTrack {
+                bone: b,
+                keys: vec![PoseKey {
+                    t: 0.0,
+                    pose: Pose::rotate(std::f64::consts::FRAC_PI_2),
+                }],
+            }],
+        };
+        let clips = vec![rest, turn];
+        let frame = crate::RenderFrame {
+            primary: crate::ClipSample { clip: 0, time_secs: 0.0 },
+            blend: Some((crate::ClipSample { clip: 1, time_secs: 0.0 }, 0.5)),
+        };
+        pose_from_render_frame(&mut s, &frame, &clips);
+        let mut m = Mesh::new();
+        m.vertices.push(Vertex::rigid(Point::new(10.0, 0.0), (0.0, 0.0), b));
+        let d = m.deform(&s);
+        // 10·(cos45, sin45) ≈ (7.071, 7.071).
+        let c = 10.0 * std::f64::consts::FRAC_1_SQRT_2;
+        assert!((d[0].x - c).abs() < 1e-9 && (d[0].y - c).abs() < 1e-9, "fue {:?}", d[0]);
+    }
+}
diff --git a/llimphi-compositor/Cargo.toml b/llimphi-compositor/Cargo.toml
index 78e0fe2..0a4431c 100644
--- a/llimphi-compositor/Cargo.toml
+++ b/llimphi-compositor/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-compositor — el núcleo declarativo de Llimphi sin winit: el árbol `View<Msg>`, el mount sobre taffy, el paint a `vello::Scene` y el hit-test. No depende de llimphi-hal ni de una surface concreta, así que la misma composición sirve sobre winit (llimphi-ui) o, a futuro, sobre el framebuffer del kernel wawa. `wgpu` entra sólo por la firma de `GpuPaintFn` (tipos, no windowing)."
 
+repository.workspace = true
 [dependencies]
 llimphi-layout = { path = "../llimphi-layout", version = "0.1.0" }
 llimphi-text = { path = "../llimphi-text", version = "0.1.0" }
@@ -19,17 +19,17 @@ wgpu = { workspace = true }
 [dev-dependencies]
 # Volcado headless del paint a PNG (llvmpipe) para VER sombra/gradiente/borde
 # sin levantar ventana. Sólo capas inferiores — no llimphi-ui (sin ciclo).
-llimphi-hal = { path = "../llimphi-hal" }
-llimphi-raster = { path = "../llimphi-raster" }
-llimphi-theme = { path = "../llimphi-theme" }
+llimphi-hal = { path = "../llimphi-hal", version = "0.1.0" }
+llimphi-raster = { path = "../llimphi-raster", version = "0.1.0" }
+llimphi-theme = { path = "../llimphi-theme", version = "0.1.0" }
 png = { workspace = true }
 pollster = { workspace = true }
 # Widgets REALES para el showreel: el `View<Msg>` que devuelven es el mismo
 # tipo (`llimphi_compositor::View`, re-exportado por llimphi-ui), así que
 # montan con el mount/paint/measure de este mismo crate. Dev-only → sin ciclo
 # en el grafo normal (llimphi-ui depende de este crate, no al revés).
-llimphi-widget-switch = { path = "../widgets/switch" }
-llimphi-widget-slider = { path = "../widgets/slider" }
-llimphi-widget-progress = { path = "../widgets/progress" }
-llimphi-widget-button = { path = "../widgets/button" }
-llimphi-widget-segmented = { path = "../widgets/segmented" }
+llimphi-widget-switch = { path = "../widgets/switch", version = "0.1.0" }
+llimphi-widget-slider = { path = "../widgets/slider", version = "0.1.0" }
+llimphi-widget-progress = { path = "../widgets/progress", version = "0.1.0" }
+llimphi-widget-button = { path = "../widgets/button", version = "0.1.0" }
+llimphi-widget-segmented = { path = "../widgets/segmented", version = "0.1.0" }
diff --git a/llimphi-compositor/LEEME.md b/llimphi-compositor/LEEME.md
new file mode 100644
index 0000000..97e6542
--- /dev/null
+++ b/llimphi-compositor/LEEME.md
@@ -0,0 +1,23 @@
+# llimphi-compositor
+
+*Read this in English: [README.md](README.md).*
+
+El núcleo declarativo de Llimphi, sin winit.
+
+Aquí vive el árbol de vista `View<Msg>` (DSL declarativo), su instalación
+sobre taffy (`mount`), el pintado a `vello::Scene` (`paint`/`paint_gpu`) y
+el hit-test. Nada de esto necesita una ventana ni `llimphi-hal`: la
+composición `view → layout → scene` es pura y reutilizable.
+
+El runtime que la maneja vive aparte:
+- `llimphi-ui` la corre sobre winit (`run<A: App>()`).
+- a futuro, un runtime sobre el framebuffer del kernel `wawa` puede
+  reusar exactamente este compositor sin arrastrar winit.
+
+`wgpu` entra sólo por la firma de `GpuPaintFn` (tipos de Device/Queue/
+Encoder/TextureView); `wgpu` no depende de winit, así que el compositor
+sigue libre de windowing.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../LEEME.md).
diff --git a/llimphi-compositor/README.md b/llimphi-compositor/README.md
new file mode 100644
index 0000000..c0ad39b
--- /dev/null
+++ b/llimphi-compositor/README.md
@@ -0,0 +1,22 @@
+# llimphi-compositor
+
+Llimphi's declarative core, without winit.
+
+Here live the `View<Msg>` view tree (the declarative DSL), its installation over
+taffy (`mount`), the painting to a `vello::Scene` (`paint`/`paint_gpu`) and
+hit-testing. None of this needs a window or `llimphi-hal`: the
+`view → layout → scene` composition is pure and reusable.
+
+The runtime that drives it lives apart:
+
+- `llimphi-ui` runs it over winit (`run<A: App>()`).
+- in the future, a runtime over the `wawa` kernel's framebuffer can reuse exactly
+  this compositor without dragging winit along.
+
+`wgpu` enters only through the signature of `GpuPaintFn` (Device/Queue/Encoder/
+TextureView types); `wgpu` does not depend on winit, so the compositor stays free
+of windowing.
+
+---
+
+Part of **llimphi** — see [llimphi](../README.md).
diff --git a/llimphi-compositor/examples/animated_size_demo.rs b/llimphi-compositor/examples/animated_size_demo.rs
index 04872e0..9d1bbb3 100644
--- a/llimphi-compositor/examples/animated_size_demo.rs
+++ b/llimphi-compositor/examples/animated_size_demo.rs
@@ -7,7 +7,7 @@
 //!
 //! Verifica que el camino `reconcile_size_anim` parcha `style.size`
 //! ANTES del mount/compute, así el layout cascade ve el tamaño
-//! interpolado y los siblings reflowean (acá el padre es un row con
+//! interpolado y los siblings reflowean (aquí el padre es un row con
 //! `gap`; el segundo hijo se va corriendo según crece el primero).
 //!
 //! `cargo run -p llimphi-compositor --example animated_size_demo -- [out.png]`
diff --git a/llimphi-compositor/examples/pantallazo_button.rs b/llimphi-compositor/examples/pantallazo_button.rs
new file mode 100644
index 0000000..5468213
--- /dev/null
+++ b/llimphi-compositor/examples/pantallazo_button.rs
@@ -0,0 +1,210 @@
+//! Pantallazo headless del `llimphi-widget-button` para VER el relieve nuevo
+//! (sombra + borde hairline + sheen + specular) en varios themes claros y
+//! oscuros, sin levantar ventana.
+//!
+//! `cargo run -p llimphi-compositor --example pantallazo_button --release -- [out.png]`
+
+use std::fs::File;
+use std::io::BufWriter;
+
+use llimphi_compositor::{measure_text_node, mount, paint, View};
+use llimphi_hal::{wgpu, Hal};
+use llimphi_layout::taffy;
+use llimphi_layout::taffy::prelude::{length, percent, FlexDirection, Size, Style};
+use llimphi_layout::taffy::{AlignItems, JustifyContent, Rect};
+use llimphi_layout::LayoutTree;
+use llimphi_raster::peniko::Color;
+use llimphi_raster::{vello, Renderer};
+use llimphi_text::{Alignment, Typesetter};
+use llimphi_widget_button::{button_styled, ButtonPalette};
+
+const W: u32 = 1120;
+const H: u32 = 620;
+const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
+
+fn mix(a: Color, b: Color, t: f32) -> Color {
+    let (ca, cb) = (a.components, b.components);
+    Color {
+        components: [
+            ca[0] + (cb[0] - ca[0]) * t,
+            ca[1] + (cb[1] - ca[1]) * t,
+            ca[2] + (cb[2] - ca[2]) * t,
+            ca[3],
+        ],
+        ..a
+    }
+}
+
+/// Un botón de ancho fijo dentro de una caja (button_view es 100% de ancho).
+fn chip(label: &str, pal: &ButtonPalette) -> View<()> {
+    let inner = button_styled(
+        label,
+        Style {
+            size: Size { width: percent(1.0_f32), height: length(34.0_f32) },
+            padding: Rect { left: length(14.0_f32), right: length(14.0_f32), top: length(0.0_f32), bottom: length(0.0_f32) },
+            align_items: Some(AlignItems::Center),
+            justify_content: Some(JustifyContent::Center),
+            ..Default::default()
+        },
+        Alignment::Center,
+        pal,
+        (),
+    );
+    View::<()>::new(Style {
+        size: Size { width: length(150.0_f32), height: length(34.0_f32) },
+        ..Default::default()
+    })
+    .children(vec![inner])
+}
+
+/// Fila de una demo por theme: fondo bg_app + nombre + 3 botones
+/// (default · hover-preview · primario accent).
+fn fila_theme(nombre: &str) -> View<()> {
+    let theme = llimphi_theme::Theme::by_name(nombre).expect("theme");
+    let default_pal = ButtonPalette::from_theme(&theme);
+    // Preview del estado hover: una paleta cuyo bg es el bg_button_hover.
+    let mut hover_pal = default_pal;
+    hover_pal.bg = theme.bg_button_hover;
+    // Primario: fondo = accent, texto que contraste, radio un toque mayor.
+    let white = Color::from_rgba8(255, 255, 255, 255);
+    let black = Color::from_rgba8(0, 0, 0, 255);
+    let lum = {
+        let k = theme.accent.components;
+        0.2126 * k[0] + 0.7152 * k[1] + 0.0722 * k[2]
+    };
+    let primary_pal = ButtonPalette {
+        bg: theme.accent,
+        bg_hover: mix(theme.accent, white, 0.12),
+        fg: if lum < 0.55 { white } else { black },
+        radius: 7.0,
+    };
+
+    let etiqueta = View::<()>::new(Style {
+        size: Size { width: length(120.0_f32), height: length(34.0_f32) },
+        align_items: Some(AlignItems::Center),
+        ..Default::default()
+    })
+    .text_aligned(nombre.to_string(), 13.0, theme.fg_muted, Alignment::Start);
+
+    View::<()>::new(Style {
+        size: Size { width: percent(1.0_f32), height: length(72.0_f32) },
+        flex_direction: FlexDirection::Row,
+        align_items: Some(AlignItems::Center),
+        gap: Size { width: length(16.0_f32), height: length(0.0_f32) },
+        padding: Rect { left: length(24.0_f32), right: length(24.0_f32), top: length(0.0_f32), bottom: length(0.0_f32) },
+        ..Default::default()
+    })
+    .fill(theme.bg_app)
+    .children(vec![
+        etiqueta,
+        chip("Guardar", &default_pal),
+        chip("Guardar", &hover_pal),
+        chip("Aceptar", &primary_pal),
+    ])
+}
+
+fn main() {
+    let out = std::env::args().nth(1).unwrap_or_else(|| "pantallazo_button.png".to_string());
+    let temas = ["Dark", "Light", "Tawa", "macOS", "Sunset", "Breeze", "Print", "Aurora"];
+    let filas: Vec<View<()>> = temas.iter().map(|t| fila_theme(t)).collect();
+
+    let root = View::<()>::new(Style {
+        size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+        flex_direction: FlexDirection::Column,
+        ..Default::default()
+    })
+    .fill(Color::from_rgba8(20, 20, 24, 255))
+    .children(filas);
+
+    let mut layout = LayoutTree::new();
+    let mounted = mount(&mut layout, root);
+    let mut ts = Typesetter::new();
+    let computed = {
+        let tmap = &mounted.text_measures;
+        layout
+            .compute_with_measure(mounted.root, (W as f32, H as f32), |nid, known, avail| {
+                match tmap.get(&nid) {
+                    Some(tm) => measure_text_node(&mut ts, tm, known, avail),
+                    None => taffy::Size::ZERO,
+                }
+            })
+            .expect("layout")
+    };
+    let mut scene = vello::Scene::new();
+    paint(&mut scene, &mounted, &computed, &mut ts, None, None);
+
+    let hal = pollster::block_on(Hal::new(None)).expect("hal");
+    let mut renderer = Renderer::new(&hal).expect("renderer");
+    let target = hal.device.create_texture(&wgpu::TextureDescriptor {
+        label: Some("pantallazo-button"),
+        size: wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+        mip_level_count: 1,
+        sample_count: 1,
+        dimension: wgpu::TextureDimension::D2,
+        format: FMT,
+        usage: wgpu::TextureUsages::STORAGE_BINDING
+            | wgpu::TextureUsages::RENDER_ATTACHMENT
+            | wgpu::TextureUsages::COPY_SRC,
+        view_formats: &[],
+    });
+    let view = target.create_view(&wgpu::TextureViewDescriptor::default());
+    renderer
+        .render_to_view(&hal, &scene, &view, W, H, Color::from_rgba8(20, 20, 24, 255))
+        .expect("render_to_view");
+    write_png(&hal, &target, &out);
+    eprintln!("pantallazo_button: escrito {out} ({W}x{H})");
+}
+
+fn write_png(hal: &Hal, target: &wgpu::Texture, path: &str) {
+    let unpadded = (W * 4) as usize;
+    let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize;
+    let padded = unpadded.div_ceil(align) * align;
+    let buf = hal.device.create_buffer(&wgpu::BufferDescriptor {
+        label: Some("readback"),
+        size: (padded * H as usize) as u64,
+        usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
+        mapped_at_creation: false,
+    });
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    enc.copy_texture_to_buffer(
+        wgpu::TexelCopyTextureInfo {
+            texture: target,
+            mip_level: 0,
+            origin: wgpu::Origin3d::ZERO,
+            aspect: wgpu::TextureAspect::All,
+        },
+        wgpu::TexelCopyBufferInfo {
+            buffer: &buf,
+            layout: wgpu::TexelCopyBufferLayout {
+                offset: 0,
+                bytes_per_row: Some(padded as u32),
+                rows_per_image: Some(H),
+            },
+        },
+        wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let slice = buf.slice(..);
+    let (tx, rx) = std::sync::mpsc::channel();
+    slice.map_async(wgpu::MapMode::Read, move |r| {
+        let _ = tx.send(r);
+    });
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    rx.recv().unwrap().unwrap();
+    let data = slice.get_mapped_range();
+    let mut pixels = Vec::with_capacity((W * H * 4) as usize);
+    for row in 0..H as usize {
+        let s = row * padded;
+        pixels.extend_from_slice(&data[s..s + unpadded]);
+    }
+    drop(data);
+    buf.unmap();
+    let file = File::create(path).expect("png");
+    let mut enc = png::Encoder::new(BufWriter::new(file), W, H);
+    enc.set_color(png::ColorType::Rgba);
+    enc.set_depth(png::BitDepth::Eight);
+    let mut w = enc.write_header().unwrap();
+    w.write_image_data(&pixels).unwrap();
+}
diff --git a/llimphi-compositor/examples/ripple_demo.rs b/llimphi-compositor/examples/ripple_demo.rs
index 9c7cc52..3a9df09 100644
--- a/llimphi-compositor/examples/ripple_demo.rs
+++ b/llimphi-compositor/examples/ripple_demo.rs
@@ -7,7 +7,7 @@
 //!
 //! Prueba el camino `View::ripple` → `RippleRegistry::trigger`/`paint` →
 //! `node_rrect` (clip) → píxeles, sin runtime ni winit. El press real lo
-//! sintetiza el runtime (`llimphi-ui`); acá lo emulamos llamando `trigger`.
+//! sintetiza el runtime (`llimphi-ui`); aquí lo emulamos llamando `trigger`.
 //!
 //! `cargo run -p llimphi-compositor --example ripple_demo -- [out.png]`
 
@@ -85,7 +85,7 @@ fn main() {
     let mounted = mount(&mut layout, root);
     let computed = layout.compute(mounted.root, (W as f32, H as f32)).expect("layout");
 
-    // Pintá los botones, luego superponé una salpicadura por columna observada
+    // Pinta los botones, luego superpón una salpicadura por columna observada
     // a un progreso creciente (cada registro disparó en t0, se observa a
     // t0 + paso·i). Todas escriben en la misma escena.
     let mut ts = Typesetter::new();
diff --git a/llimphi-compositor/src/anim.rs b/llimphi-compositor/src/anim.rs
index 474224b..3990b03 100644
--- a/llimphi-compositor/src/anim.rs
+++ b/llimphi-compositor/src/anim.rs
@@ -65,7 +65,7 @@ pub struct Anim {
     pub easing: fn(f32) -> f32,
     /// `true` si la **primera aparición** de la key debe animar la opacidad de
     /// 0 hacia su valor (fade-in de entrada, estilo `AnimatedSwitcher`). Las
-    /// animaciones de props (fill/radius/alpha) no entran por acá: sólo cambian
+    /// animaciones de props (fill/radius/alpha) no entran por aquí: sólo cambian
     /// el arranque del primer frame. Sin él, la primera aparición se asienta
     /// instantánea (default histórico de `View::animated`).
     pub enter: bool,
@@ -90,6 +90,60 @@ pub struct Anim {
     /// la combinación enter+exit de dos keys. Implica captura `live` por frame
     /// (como `exit`). La primera aparición no cruza (sólo asienta la variante).
     pub switch: Option<u64>,
+    /// Transformación afín hacia la que **sale el contenido saliente** mientras
+    /// se desvanece (fantasma): se interpola de identidad a esta afín, aplicada
+    /// alrededor del centro del rect capturado (misma convención que
+    /// `View::transform`). `Some(Affine::translate((-w, 0)))` = slide-out a la
+    /// izquierda; `Some(Affine::scale(1.05))` = zoom-out. Con `exit`, describe
+    /// cómo sale **este nodo** al desaparecer (capturada mientras vive). Con
+    /// `switch`, describe cómo sale el **contenido viejo** al cambiar la
+    /// variante — se lee del frame NUEVO (quien conmuta conoce la dirección:
+    /// push vs pop). `None` = fade en el lugar (comportamiento histórico).
+    pub exit_to_xf: Option<Affine>,
+    /// `false` = el contenido nuevo de un `switch` NO arranca transparente
+    /// (entra opaco — necesario para un push estilo UIKit donde la página
+    /// entrante tapa a la saliente). `true` = fade-in histórico.
+    pub enter_fade: bool,
+    /// `true` = el fantasma del contenido saliente se pinta **DEBAJO** del
+    /// contenido nuevo, en la posición z del nodo (vía
+    /// [`AnimRegistry::prepare_underlays`] + `MountedNode::underlay`), en vez
+    /// de encima de toda la escena. Es el orden natural de una transición de
+    /// páginas: lo nuevo cubre a lo viejo. Como `exit_to_xf`, en un `switch`
+    /// lo declara el frame NUEVO.
+    pub exit_under: bool,
+    /// `true` = el fantasma NO se desvanece: mantiene alpha 1 hasta que su
+    /// reloj expira (y ahí desaparece de golpe — para entonces el contenido
+    /// nuevo ya lo cubre). Para salidas opacas (Cover/push UIKit).
+    pub exit_hold: bool,
+}
+
+/// Estilo completo de una transición de `switch` direccional — agrupa los
+/// cinco knobs que [`crate::View::animated_switch_styled`] pasa al [`Anim`].
+/// `Default` = cross-fade puro (idéntico a `animated_switch`).
+#[derive(Clone, Copy, Debug)]
+pub struct SwitchStyle {
+    /// Afín desde la que entra el contenido nuevo (`None` = en el lugar).
+    pub enter_from_xf: Option<Affine>,
+    /// `false` = el contenido nuevo entra opaco (sin fade-in).
+    pub enter_fade: bool,
+    /// Afín hacia la que sale el contenido viejo (`None` = en el lugar).
+    pub exit_to_xf: Option<Affine>,
+    /// `true` = el fantasma va DEBAJO del contenido nuevo (posición z real).
+    pub exit_under: bool,
+    /// `true` = el fantasma no se desvanece (salida opaca).
+    pub exit_hold: bool,
+}
+
+impl Default for SwitchStyle {
+    fn default() -> Self {
+        Self {
+            enter_from_xf: None,
+            enter_fade: true,
+            exit_to_xf: None,
+            exit_under: false,
+            exit_hold: false,
+        }
+    }
 }
 
 /// Ease-out cúbico, el default razonable para transiciones implícitas
@@ -257,8 +311,8 @@ fn reconcile_size_anim_inner<Msg>(
                 .entry(sa.key)
                 .or_insert_with(|| SizeAnimEntry::settled(target, now, sa.duration, sa.easing));
             if entry.to != target {
-                // Cambió el objetivo: congelá el valor actual como nuevo
-                // origen y rearrancá el reloj — mismo patrón que el
+                // Cambió el objetivo: congela el valor actual como nuevo
+                // origen y rearranca el reloj — mismo patrón que el
                 // `AnimRegistry` de props.
                 entry.from = entry.value(now);
                 entry.to = target;
@@ -421,26 +475,59 @@ struct LiveExit {
     scene: Scene,
     duration: Duration,
     easing: fn(f32) -> f32,
+    /// Centro del rect del nodo al capturarse — origen de la afín de salida.
+    centro: (f32, f32),
+    /// Afín de salida declarada por el propio nodo (`Anim::exit_to_xf`).
+    to_xf: Option<Affine>,
+    /// El fantasma va debajo del contenido nuevo (`Anim::exit_under`).
+    under: bool,
+    /// El fantasma no se desvanece (`Anim::exit_hold`).
+    hold: bool,
 }
 
 /// Un nodo que ya salió del árbol y se está desvaneciendo: su subescena retenida
-/// + el reloj de fade-out.
+/// + el reloj de fade-out (y, opcionalmente, la afín hacia la que se desliza).
 struct Ghost {
     scene: Scene,
     start: Instant,
     duration: Duration,
     easing: fn(f32) -> f32,
+    centro: (f32, f32),
+    to_xf: Option<Affine>,
+    under: bool,
+    hold: bool,
 }
 
 impl Ghost {
-    /// Opacidad actual del fantasma: `1 → 0` con easing aplicado.
+    /// Opacidad actual del fantasma: `1 → 0` con easing aplicado — salvo con
+    /// `hold`, que la mantiene en 1 hasta que el reloj expira (salida opaca).
     fn alpha(&self, now: Instant) -> f32 {
+        if self.hold {
+            return if self.done(now) { 0.0 } else { 1.0 };
+        }
+        1.0 - self.t(now)
+    }
+
+    /// Progreso eased `0 → 1` del fantasma.
+    fn t(&self, now: Instant) -> f32 {
         if self.duration.is_zero() {
-            return 0.0;
+            return 1.0;
         }
         let elapsed = now.saturating_duration_since(self.start).as_secs_f32();
         let raw = (elapsed / self.duration.as_secs_f32()).clamp(0.0, 1.0);
-        1.0 - (self.easing)(raw)
+        (self.easing)(raw)
+    }
+
+    /// Afín del frame: identidad → `to_xf`, conjugada alrededor del centro del
+    /// rect capturado (misma convención que `View::transform`, así un scale
+    /// "respira" desde su centro y no desde el origen de la ventana). `None`
+    /// si el fantasma sólo se desvanece en el lugar.
+    fn xf(&self, now: Instant) -> Option<Affine> {
+        let to = self.to_xf?;
+        let t = self.t(now);
+        let local = lerp_affine(Affine::IDENTITY, to, t);
+        let (cx, cy) = (self.centro.0 as f64, self.centro.1 as f64);
+        Some(Affine::translate((cx, cy)) * local * Affine::translate((-cx, -cy)))
     }
 
     fn done(&self, now: Instant) -> bool {
@@ -463,6 +550,10 @@ pub struct AnimRegistry {
     /// Última variante vista por cada key con `switch` — para detectar el
     /// cambio de contenido que dispara el cross-fade.
     variants: HashMap<u64, u64>,
+    /// Keys colocadas como underlay ESTE frame (por
+    /// [`Self::prepare_underlays`]) — `replay_ghosts` las saltea para no
+    /// pintarlas dos veces. Se limpia al inicio de cada `prepare_underlays`.
+    under_placed: Vec<u64>,
 }
 
 impl AnimRegistry {
@@ -512,6 +603,10 @@ impl AnimRegistry {
                     if prev != variant {
                         switched = true;
                         if let Some(le) = self.live.remove(&anim.key) {
+                            // La afín/placement/hold de salida del contenido
+                            // VIEJO los declara el frame nuevo (`anim.exit_*`):
+                            // sólo quien conmuta sabe hacia dónde debe irse lo
+                            // anterior (push ≠ pop). El centro sí es el capturado.
                             self.ghosts.insert(
                                 anim.key,
                                 Ghost {
@@ -519,6 +614,10 @@ impl AnimRegistry {
                                     start: now,
                                     duration: le.duration,
                                     easing: le.easing,
+                                    centro: le.centro,
+                                    to_xf: anim.exit_to_xf,
+                                    under: anim.exit_under,
+                                    hold: anim.exit_hold,
                                 },
                             );
                         }
@@ -548,9 +647,13 @@ impl AnimRegistry {
             });
             if switched {
                 // Cross-fade: el contenido nuevo entra desde transparente
-                // (el viejo ya quedó como fantasma desvaneciéndose encima).
+                // (el viejo ya quedó como fantasma desvaneciéndose). Con
+                // `enter_fade: false` entra OPACO (push estilo UIKit: la
+                // página nueva tapa, no se funde). Si además declara
+                // `enter_from_xf`, entra desde esa afín (slide/zoom).
                 entry.from = AnimSnapshot {
-                    alpha: Some(0.0),
+                    alpha: if anim.enter_fade { Some(0.0) } else { target.alpha },
+                    transform: anim.enter_from_xf.or(target.transform),
                     ..target
                 };
                 entry.to = target;
@@ -558,8 +661,8 @@ impl AnimRegistry {
                 entry.duration = anim.duration;
                 entry.easing = anim.easing;
             } else if entry.to != target {
-                // Cambió el objetivo: congelá el valor actual como nuevo origen
-                // y rearrancá el reloj hacia el objetivo nuevo.
+                // Cambió el objetivo: congela el valor actual como nuevo origen
+                // y rearranca el reloj hacia el objetivo nuevo.
                 entry.from = entry.value(now);
                 entry.to = target;
                 entry.start = now;
@@ -608,6 +711,10 @@ impl AnimRegistry {
                         start: now,
                         duration: le.duration,
                         easing: le.easing,
+                        centro: le.centro,
+                        to_xf: le.to_xf,
+                        under: le.under,
+                        hold: le.hold,
                     },
                 );
             }
@@ -638,16 +745,61 @@ impl AnimRegistry {
     }
 
     /// Guarda (o refresca) la subescena retenida de un nodo `exit` presente. El
-    /// runtime la captura con [`crate::paint_range`] tras el paint. `duration` y
-    /// `easing` se heredan al fantasma cuando la key desaparezca.
-    pub fn store_live_exit(
-        &mut self,
-        key: u64,
-        scene: Scene,
-        duration: Duration,
-        easing: fn(f32) -> f32,
-    ) {
-        self.live.insert(key, LiveExit { scene, duration, easing });
+    /// runtime la captura con [`crate::paint_range`] tras el paint. Del `anim`
+    /// del nodo se heredan al fantasma `duration`/`easing`/`exit_to_xf`/
+    /// `exit_under`/`exit_hold` cuando la key desaparezca (camino `exit`; en
+    /// un `switch` la salida la re-declara el frame nuevo). `centro` es el
+    /// centro del rect del nodo (origen de la afín de salida).
+    pub fn store_live_exit(&mut self, key: u64, scene: Scene, centro: (f32, f32), anim: &Anim) {
+        self.live.insert(
+            key,
+            LiveExit {
+                scene,
+                duration: anim.duration,
+                easing: anim.easing,
+                centro,
+                to_xf: anim.exit_to_xf,
+                under: anim.exit_under,
+                hold: anim.exit_hold,
+            },
+        );
+    }
+
+    /// **Scene-split de fantasmas**: escribe en `MountedNode::underlay` la
+    /// subescena (ya envuelta en su capa de alpha + afín de salida) de cada
+    /// fantasma `under` cuyo `switch` sigue montado — el paint la apendea
+    /// DEBAJO del contenido nuevo, en la posición z real del nodo (y dentro
+    /// del clip/transform de sus ancestros). Las keys colocadas se saltean en
+    /// [`Self::replay_ghosts`] este frame. Llamar DESPUÉS de [`Self::reconcile`]
+    /// y ANTES del paint.
+    pub fn prepare_underlays<Msg>(&mut self, mounted: &mut Mounted<Msg>, now: Instant) {
+        self.under_placed.clear();
+        if self.ghosts.is_empty() {
+            return;
+        }
+        for node in &mut mounted.nodes {
+            let Some(anim) = node.anim else { continue };
+            if anim.switch.is_none() {
+                continue;
+            }
+            let Some(g) = self.ghosts.get(&anim.key) else { continue };
+            if !g.under {
+                continue;
+            }
+            let a = g.alpha(now);
+            if a <= 0.0 {
+                continue;
+            }
+            // Envoltorio: capa de alpha (rect generoso — el clip real lo
+            // ponen los ancestros del nodo en el paint) + la afín de salida.
+            let mut wrap = Scene::new();
+            let big = Rect::new(-1e6, -1e6, 1e6, 1e6);
+            wrap.push_layer(Fill::NonZero, Mix::Normal, a, Affine::IDENTITY, &big);
+            wrap.append(&g.scene, g.xf(now));
+            wrap.pop_layer();
+            node.underlay = Some(wrap);
+            self.under_placed.push(anim.key);
+        }
     }
 
     /// Reproduce los fantasmas activos sobre `scene`, cada uno con su opacidad
@@ -659,13 +811,18 @@ impl AnimRegistry {
             return false;
         }
         let clip = Rect::new(0.0, 0.0, w as f64, h as f64);
-        for g in self.ghosts.values() {
+        for (key, g) in &self.ghosts {
+            // Los colocados como underlay este frame ya se pintaron en su
+            // posición z (dentro del árbol) — no duplicarlos encima.
+            if self.under_placed.contains(key) {
+                continue;
+            }
             let a = g.alpha(now);
             if a <= 0.0 {
                 continue;
             }
             scene.push_layer(Fill::NonZero, Mix::Normal, a, Affine::IDENTITY, &clip);
-            scene.append(&g.scene, None);
+            scene.append(&g.scene, g.xf(now));
             scene.pop_layer();
         }
         true
@@ -800,11 +957,11 @@ mod tests {
         let mut reg = AnimRegistry::new();
         let t0 = Instant::now();
         // Frame 1: el nodo exit está presente. No anima por sí solo, y el
-        // runtime captura su subescena (acá una vacía de prueba).
+        // runtime captura su subescena (aquí una vacía de prueba).
         let mut m = one_exit();
         let animating = reg.reconcile(&mut m, t0);
         assert!(!animating, "presente y quieto no anima");
-        reg.store_live_exit(7, Scene::new(), Duration::from_millis(200), ease_out_cubic);
+        reg.store_live_exit(7, Scene::new(), (50.0, 50.0), &m.nodes[0].anim.expect("anim"));
         // Frame 2: la key desaparece → se promueve a fantasma y pide frames.
         let mut m = empty();
         let animating = reg.reconcile(&mut m, t0 + Duration::from_millis(10));
@@ -834,7 +991,7 @@ mod tests {
         let mut m = one_switch(1);
         assert!(!reg.reconcile(&mut m, t0), "primera aparición no cruza");
         // El runtime captura su subescena (de prueba, vacía).
-        reg.store_live_exit(5, Scene::new(), Duration::from_millis(200), ease_out_cubic);
+        reg.store_live_exit(5, Scene::new(), (50.0, 50.0), &m.nodes[0].anim.expect("anim"));
         // Frame 2: variante 2 → cross-fade. El contenido nuevo arranca casi
         // transparente y hay un fantasma del contenido viejo desvaneciéndose.
         let mut m = one_switch(2);
@@ -847,7 +1004,7 @@ mod tests {
             "hay un fantasma del contenido viejo"
         );
         // Re-captura del frame 2 (lo haría el runtime tras el paint).
-        reg.store_live_exit(5, Scene::new(), Duration::from_millis(200), ease_out_cubic);
+        reg.store_live_exit(5, Scene::new(), (50.0, 50.0), &m.nodes[0].anim.expect("anim"));
         // Frame 3: misma variante, pasada la duración → asentado y sin fantasma.
         let mut m = one_switch(2);
         let animating = reg.reconcile(&mut m, t0 + Duration::from_millis(400));
@@ -865,7 +1022,7 @@ mod tests {
         let t0 = Instant::now();
         let mut m = one_switch(1);
         reg.reconcile(&mut m, t0);
-        reg.store_live_exit(5, Scene::new(), Duration::from_millis(200), ease_out_cubic);
+        reg.store_live_exit(5, Scene::new(), (50.0, 50.0), &m.nodes[0].anim.expect("anim"));
         // Misma variante en el frame siguiente: ni fade-in ni fantasma.
         let mut m = one_switch(1);
         let animating = reg.reconcile(&mut m, t0 + Duration::from_millis(10));
@@ -880,7 +1037,7 @@ mod tests {
         let t0 = Instant::now();
         let mut m = one_exit();
         reg.reconcile(&mut m, t0);
-        reg.store_live_exit(7, Scene::new(), Duration::from_millis(200), ease_out_cubic);
+        reg.store_live_exit(7, Scene::new(), (50.0, 50.0), &m.nodes[0].anim.expect("anim"));
         // Se va → fantasma.
         let mut m = empty();
         assert!(reg.reconcile(&mut m, t0 + Duration::from_millis(10)));
@@ -1093,4 +1250,177 @@ mod tests {
         reconcile_size_anim(&mut v, &mut reg, now);
         assert_eq!(reg.entries.len(), 0);
     }
+
+    // ── Salida direccional (exit_to_xf) — base del router de páginas ────────
+
+    #[test]
+    fn fantasma_con_exit_to_xf_interpola_la_afin_alrededor_del_centro() {
+        let t0 = Instant::now();
+        let g = Ghost {
+            scene: Scene::new(),
+            start: t0,
+            duration: Duration::from_millis(200),
+            easing: |t| t, // lineal para aserciones exactas
+            centro: (100.0, 50.0),
+            to_xf: Some(Affine::translate((-200.0, 0.0))),
+            under: false,
+            hold: false,
+        };
+        // t=0: afín ≈ identidad (el fantasma arranca donde estaba).
+        let xf0 = g.xf(t0).expect("hay afín");
+        let c0 = xf0.as_coeffs();
+        assert!(c0[4].abs() < 1e-6 && c0[5].abs() < 1e-6, "t=0 → identidad: {c0:?}");
+        // t=0.5: mitad del desplazamiento. Una traslación conmuta con la
+        // conjugación por el centro, así que el coef es -100 exacto.
+        let xf = g.xf(t0 + Duration::from_millis(100)).expect("afín viva");
+        let c = xf.as_coeffs();
+        assert!((c[4] + 100.0).abs() < 1e-3, "mitad del slide: {c:?}");
+        // Sin to_xf → None (fade puro, camino histórico).
+        let g2 = Ghost { to_xf: None, scene: Scene::new(), ..g };
+        assert!(g2.xf(t0 + Duration::from_millis(100)).is_none());
+    }
+
+    #[test]
+    fn fantasma_con_scale_respira_desde_su_centro() {
+        let t0 = Instant::now();
+        let g = Ghost {
+            scene: Scene::new(),
+            start: t0,
+            duration: Duration::from_millis(100),
+            easing: |t| t,
+            centro: (100.0, 100.0),
+            to_xf: Some(Affine::scale(2.0)),
+            under: false,
+            hold: false,
+        };
+        // Al final del tween (t=1) la afín es scale(2) conjugada por el
+        // centro: el centro queda FIJO (100,100 → 100,100).
+        let xf = g.xf(t0 + Duration::from_millis(100)).expect("afín");
+        let p = xf * vello::kurbo::Point::new(100.0, 100.0);
+        assert!((p.x - 100.0).abs() < 1e-6 && (p.y - 100.0).abs() < 1e-6,
+                "el centro no se mueve: {p:?}");
+        // Un punto a 50px del centro termina a 100px (escala 2).
+        let q = xf * vello::kurbo::Point::new(150.0, 100.0);
+        assert!((q.x - 200.0).abs() < 1e-6, "escala desde el centro: {q:?}");
+    }
+
+    #[test]
+    fn switch_direccional_entra_desde_la_afin_y_el_fantasma_sale_hacia_la_nueva() {
+        let salida = Affine::translate((-300.0, 0.0));
+        let entrada = Affine::translate((300.0, 0.0));
+        let one = |variant: u64| -> Mounted<()> {
+            let v = View::<()>::new(Style::default())
+                .fill(rgba(10, 20, 30))
+                .animated_switch_from(5, variant, Duration::from_millis(200),
+                                      Some(entrada), Some(salida));
+            let mut layout = LayoutTree::new();
+            mount(&mut layout, v)
+        };
+        let mut reg = AnimRegistry::new();
+        let t0 = Instant::now();
+        // Frame 1: variante 1 asienta; el runtime captura (to_xf del frame 1,
+        // que NO es el que debe usarse al conmutar).
+        let mut m = one(1);
+        reg.reconcile(&mut m, t0);
+        let mut senuelo = m.nodes[0].anim.expect("anim");
+        senuelo.exit_to_xf = Some(Affine::scale(9.0)); // señuelo: NO debe usarse
+        reg.store_live_exit(5, Scene::new(), (50.0, 50.0), &senuelo);
+        // Frame 2: variante 2 → el contenido nuevo arranca DESPLAZADO hacia
+        // `entrada` (además de transparente) y el fantasma lleva la `salida`
+        // declarada por el frame nuevo, no el señuelo capturado.
+        let mut m = one(2);
+        let animating = reg.reconcile(&mut m, t0 + Duration::from_millis(10));
+        assert!(animating);
+        let xf = m.nodes[0].transform.expect("transform de entrada");
+        let c = xf.as_coeffs();
+        assert!(c[4] > 200.0, "arranca cerca de +300 en x: {c:?}");
+        let g = reg.ghosts.get(&5).expect("fantasma del contenido viejo");
+        assert_eq!(g.to_xf, Some(salida), "la salida la declara el frame nuevo");
+    }
+
+    #[test]
+    fn hold_mantiene_el_alpha_hasta_expirar() {
+        let t0 = Instant::now();
+        let g = Ghost {
+            scene: Scene::new(),
+            start: t0,
+            duration: Duration::from_millis(200),
+            easing: |t| t,
+            centro: (0.0, 0.0),
+            to_xf: None,
+            under: false,
+            hold: true,
+        };
+        // A mitad del reloj sigue OPACO (salida sin desvanecer).
+        assert_eq!(g.alpha(t0 + Duration::from_millis(100)), 1.0);
+        // Expirado: desaparece de golpe.
+        assert_eq!(g.alpha(t0 + Duration::from_millis(250)), 0.0);
+    }
+
+    #[test]
+    fn switch_estilado_entra_opaco_y_coloca_underlay() {
+        use crate::SwitchStyle;
+        let style = SwitchStyle {
+            enter_from_xf: Some(Affine::translate((300.0, 0.0))),
+            enter_fade: false,
+            exit_to_xf: None,
+            exit_under: true,
+            exit_hold: true,
+        };
+        let one = |variant: u64| -> Mounted<()> {
+            let v = View::<()>::new(Style::default())
+                .fill(rgba(10, 20, 30))
+                .animated_switch_styled(5, variant, Duration::from_millis(200), style);
+            let mut layout = LayoutTree::new();
+            mount(&mut layout, v)
+        };
+        let mut reg = AnimRegistry::new();
+        let t0 = Instant::now();
+        let mut m = one(1);
+        reg.reconcile(&mut m, t0);
+        reg.store_live_exit(5, Scene::new(), (50.0, 50.0), &m.nodes[0].anim.expect("anim"));
+        // Conmutar: el contenido nuevo entra desplazado pero SIN fade (alpha
+        // intacto — push opaco), y el fantasma queda marcado under+hold.
+        let mut m = one(2);
+        let t1 = t0 + Duration::from_millis(10);
+        assert!(reg.reconcile(&mut m, t1));
+        assert_eq!(m.nodes[0].alpha, None, "entra opaco (enter_fade=false)");
+        assert!(m.nodes[0].transform.is_some(), "pero sí entra deslizándose");
+        let g = reg.ghosts.get(&5).expect("fantasma");
+        assert!(g.under && g.hold, "placement y hold del frame nuevo");
+        // prepare_underlays hornea la subescena en el nodo y la marca para
+        // que replay_ghosts no la duplique encima.
+        reg.prepare_underlays(&mut m, t1);
+        assert!(m.nodes[0].underlay.is_some(), "underlay colocado");
+        assert_eq!(reg.under_placed, vec![5]);
+        // Un fantasma under colocado no se re-pinta arriba, pero la función
+        // sigue reportando fantasmas vivos (ticker).
+        assert!(reg.replay_ghosts(&mut Scene::new(), t1, 100.0, 100.0));
+        // Si la key deja de estar montada (nodo desapareció), el fantasma
+        // cae al camino histórico (encima): sin underlay que colocar.
+        let mut vacio = empty();
+        reg.prepare_underlays(&mut vacio, t1);
+        assert!(reg.under_placed.is_empty(), "sin nodo switch no hay underlay");
+    }
+
+    #[test]
+    fn exit_to_xf_se_hereda_al_fantasma_al_desaparecer() {
+        let to = Affine::translate((0.0, 40.0));
+        let v = View::<()>::new(Style::default())
+            .fill(rgba(9, 9, 9))
+            .animated_exit_to(7, Duration::from_millis(200), to);
+        let mut layout = LayoutTree::new();
+        let mut m = mount(&mut layout, v);
+        let mut reg = AnimRegistry::new();
+        let t0 = Instant::now();
+        reg.reconcile(&mut m, t0);
+        // El runtime captura con la to_xf del propio nodo (camino exit).
+        reg.store_live_exit(7, Scene::new(), (20.0, 20.0), &m.nodes[0].anim.expect("anim"));
+        // Desaparece → el fantasma hereda la afín capturada.
+        let mut m = empty();
+        assert!(reg.reconcile(&mut m, t0 + Duration::from_millis(10)));
+        let g = reg.ghosts.get(&7).expect("fantasma");
+        assert_eq!(g.to_xf, Some(to));
+        assert_eq!(g.centro, (20.0, 20.0));
+    }
 }
diff --git a/llimphi-compositor/src/layout_builder.rs b/llimphi-compositor/src/layout_builder.rs
index 09ce6dd..bdf417b 100644
--- a/llimphi-compositor/src/layout_builder.rs
+++ b/llimphi-compositor/src/layout_builder.rs
@@ -223,7 +223,7 @@ mod tests {
         ];
         let expanded = expand_layout_builders(root, &cons);
         // Ambos expandidos, en orden (verificamos vía el ancho del hijo producido
-        // que NO depende de la constraint acá — sólo confirmamos que se invocaron
+        // que NO depende de la constraint aquí — sólo confirmamos que se invocaron
         // los dos y que ninguno quedó como builder).
         assert!(expanded.children[0].layout_builder.is_none());
         assert!(expanded.children[1].layout_builder.is_none());
diff --git a/llimphi-compositor/src/lib.rs b/llimphi-compositor/src/lib.rs
index 10f350a..10aa0b4 100644
--- a/llimphi-compositor/src/lib.rs
+++ b/llimphi-compositor/src/lib.rs
@@ -33,6 +33,7 @@ mod semantics;
 mod view;
 pub use anim::{
     ease_out_cubic, reconcile_size_anim, Anim, AnimRegistry, SizeAnim, SizeAnimRegistry,
+    SwitchStyle,
 };
 pub use hero::{Hero, HeroRegistry};
 pub use layout_builder::{collect_builder_constraints, expand_layout_builders, has_layout_builder};
@@ -119,6 +120,19 @@ pub struct TextSpec {
     /// previo). Sólo el camino uniforme (`layout_clamped`); el de spans
     /// (RichText) lo ignora en v1, igual que `no_wrap`/clamp.
     pub overflow_wrap: bool,
+    /// `font-feature-settings` (+ `font-kerning` plegado como `kern`) en formato
+    /// CSS crudo (`"liga" 1, "kern" 0`). Vacío = default de la fuente. Afecta
+    /// shaping y medida (ligaduras/kerning cambian el ancho). Sólo el camino
+    /// uniforme (`layout_clamped`); el de spans (RichText) lo ignora en v1.
+    pub font_features: String,
+    /// `font-variation-settings` en formato CSS crudo (`"wght" 700`). Vacío =
+    /// ejes en su default. Mismo régimen que [`Self::font_features`].
+    pub font_variations: String,
+    /// `font-stretch`/`font-width` como **porcentaje** (100 = normal, <100
+    /// condensada, >100 expandida). Afecta shaping y medida (la face
+    /// condensada/expandida cambia el ancho). Sólo el camino uniforme
+    /// (`layout_clamped`); el de spans (RichText) lo ignora en v1.
+    pub font_width: f32,
 }
 
 /// Fase de un drag activo. `Move` se emite por cada `CursorMoved` con el
@@ -156,12 +170,21 @@ pub type ClickAtFn<Msg> = Arc<dyn Fn(f32, f32, f32, f32) -> Option<Msg> + Send +
 /// líneas lógicas (misma normalización que `App::on_wheel`: `dy` positivo
 /// = scroll hacia abajo). El runtime lo invoca cuando la rueda gira con el
 /// cursor sobre este nodo, ANTES de caer al `App::on_wheel` global: si el
-/// handler devuelve `Some(Msg)`, el evento se consume acá. Permite áreas
+/// handler devuelve `Some(Msg)`, el evento se consume aquí. Permite áreas
 /// de scroll autocontenidas (el widget `scroll` lo usa) sin que cada app
 /// rutee la rueda a mano por su `Model`. Devolver `None` deja pasar el
 /// evento al `on_wheel` global.
 pub type ScrollFn<Msg> = Arc<dyn Fn(f32, f32) -> Option<Msg> + Send + Sync>;
 
+/// Handler de rueda con **reparto parcial** (scroll anidado real): recibe el
+/// delta `(dx, dy)` en líneas y devuelve `(msg, rest_x, rest_y)` — el `Msg`
+/// por lo que consumió (o `None` si no consumió nada) y el **sobrante** en la
+/// misma unidad, que el runtime sigue repartiendo al siguiente scrollable de
+/// la cadena (el ancestro). Un mismo evento puede así mover al hijo hasta su
+/// tope Y al padre con el resto, en el mismo frame. Ver
+/// [`View::on_scroll_take`] y [`consume_scroll_chain`].
+pub type ScrollTakeFn<Msg> = Arc<dyn Fn(f32, f32) -> (Option<Msg>, f32, f32) + Send + Sync>;
+
 /// Variante de [`DragFn`] que **conoce la posición inicial del press**
 /// relativa al rect del nodo. Útil cuando el caller necesita identificar
 /// qué entidad (Concepto, lemming, etc.) bajo el cursor agarró el drag.
@@ -240,6 +263,25 @@ pub struct Constraints {
 /// [`View::layout_builder`].
 pub type LayoutBuilderFn<Msg> = Arc<dyn Fn(Constraints) -> View<Msg> + Send + Sync>;
 
+/// Constructor **diferido** del contenido de un [`View::memo`] (Bloque 25).
+/// Produce el subárbol (un único `View`) que va DENTRO del nodo memo. El runtime
+/// lo llama sólo cuando `deps` (o el tamaño del slot) cambió; si no, reusa el
+/// `Mounted` cacheado sin reconstruir el `View`.
+pub type MemoBuilderFn<Msg> = Arc<dyn Fn() -> View<Msg> + Send + Sync>;
+
+/// Nodo **memoizado** (Bloque 25 de `PLAN-NUCLEO-RETENIDO.md`): un subárbol
+/// cuyo `View` NO se reconstruye —ni se re-monta ni se re-layoutea— si sus
+/// `deps` no cambiaron. El nodo memo lleva un `Style` con **tamaño definido**
+/// (length/percent, no auto): el runtime lo monta como hoja de ese tamaño,
+/// computa el subárbol en un `LayoutTree` aislado (que taffy cachea) y splica
+/// su `Mounted` cacheado. `builder` = `Some` mientras está sin resolver;
+/// `resolve_memos` lo extrae y el nodo queda como marcador. Ver [`View::memo`].
+pub struct MemoNode<Msg> {
+    pub key: u64,
+    pub deps: u64,
+    pub builder: Option<MemoBuilderFn<Msg>>,
+}
+
 /// Rect absoluto del nodo (en coordenadas físicas del frame). Lo
 /// recibe el callback de [`View::paint_with`] para que pueda
 /// posicionar sus primitivas custom dentro del nodo.
@@ -503,6 +545,14 @@ pub struct View<Msg> {
     /// [`OverPaintFn`]. Misma firma que [`PaintFn`] — sólo cambia
     /// *cuándo* corre (post-GPU). `None` = sin over-layer (coste cero).
     pub over_painter: Option<PaintFn>,
+    /// **Subárbol over** (ver [`View::over`]): este nodo y todos sus
+    /// descendientes se pintan en la pasada vello FINAL, después del pase
+    /// GPU directo — con toda la maquinaria normal (fills, texto, imágenes,
+    /// painters, hover). Es el primitivo para UI **encima** de contenido
+    /// `gpu_paint_with` (OSC de un reproductor, HUD sobre un canvas GPU).
+    /// El hit-test no cambia (usa el layout, no la pasada de pintura).
+    /// `false` = pinta en la pasada base, como siempre (coste cero).
+    pub over_layer: bool,
     pub on_click: Option<Msg>,
     /// Handler de click que recibe la posición **relativa al rect del
     /// nodo** (esquina superior-izquierda del nodo = `(0, 0)`). Útil
@@ -510,6 +560,10 @@ pub struct View<Msg> {
     /// de mundo. Si está presente, gana sobre `on_click`. Devolver
     /// `None` no dispara update.
     pub on_click_at: Option<ClickAtFn<Msg>>,
+    /// Gemelo de izquierda de [`Self::on_right_click_screen`]: click izquierdo con
+    /// coords **absolutas de ventana**, para anclar un popup (select/dropdown) en
+    /// la capa `view_overlay`.
+    pub on_click_screen: Option<ClickAtFn<Msg>>,
     /// Equivalente a `on_click` pero para el botón derecho del ratón.
     /// Pensado para menús contextuales: el nodo declara qué `Msg`
     /// emitir cuando se le hace right-click, y la app abre el overlay
@@ -520,6 +574,13 @@ pub struct View<Msg> {
     /// click derecho (la celda no es un nodo aparte, sino una región
     /// dentro del nodo). Si está presente, gana sobre `on_right_click`.
     pub on_right_click_at: Option<ClickAtFn<Msg>>,
+    /// Como [`Self::on_right_click_at`] pero recibe coords **absolutas de
+    /// ventana** (no locales al nodo). Para anclar menús contextuales en la
+    /// posición del puntero: `on_right_click_at` (local) sirve a grillas/canvas
+    /// que necesitan saber QUÉ región del rect se clickeó; éste sirve a popups
+    /// que quieren la posición en pantalla. Los backends le pasan el cursor
+    /// absoluto. Convive con `on_right_click_at` (un nodo puede tener ambos).
+    pub on_right_click_screen: Option<ClickAtFn<Msg>>,
     /// Equivalente a `on_click` pero para el botón del medio del ratón
     /// (rueda presionada). Pensado para abrir en pestaña nueva — los
     /// browsers usan middle-click como atajo equivalente a Ctrl+Click.
@@ -601,6 +662,10 @@ pub struct View<Msg> {
     /// `Some(Msg)` consume el evento. Base de las áreas de scroll
     /// autocontenidas. Ver [`ScrollFn`].
     pub on_scroll: Option<ScrollFn<Msg>>,
+    /// Variante con **reparto parcial** del delta (scroll anidado real):
+    /// consume lo que puede y devuelve el sobrante, que sigue al ancestro.
+    /// Tiene prioridad sobre `on_scroll` si ambos están. Ver [`ScrollTakeFn`].
+    pub on_scroll_take: Option<ScrollTakeFn<Msg>>,
     /// Handler de gesto de **escala** (pinch-to-zoom). Si está presente y el
     /// gesto cae sobre este nodo (Ctrl+rueda en desktop, pinch de trackpad en
     /// macOS), el runtime lo invoca con el factor incremental + el punto focal
@@ -615,7 +680,7 @@ pub struct View<Msg> {
     /// dentro de una ventana temporal corta y muy cerca). Es un evento
     /// **aditivo**: si el nodo también tiene `on_click`, éste igual dispara en
     /// cada press; el doble-tap llega además en el segundo. Para doble-tap
-    /// exclusivo, poné el handler en un nodo sin `on_click`. Ver
+    /// exclusivo, pon el handler en un nodo sin `on_click`. Ver
     /// [`View::on_double_tap`].
     pub on_double_tap: Option<Msg>,
     /// Variante posicional de [`Self::on_double_tap`]: recibe la posición del
@@ -714,6 +779,18 @@ pub struct View<Msg> {
     /// default CSS `50% 50%` (centro del rect) — el caso mayoritario. Ver
     /// [`TransformPivot`] y [`View::transform_origin`].
     pub transform_origin: Option<TransformPivot>,
+    /// `position: sticky` (CSS): insets `[top, right, bottom, left]` en px
+    /// relativos al **scrollport** (el ancestro que recorta, `clip==true`).
+    /// El nodo se pinta en su posición de flujo normal hasta que el scroll lo
+    /// lleva al umbral del inset; ahí se "pega" a esa distancia del borde del
+    /// scrollport, sin salir de él. Como el scroll ya está horneado en el
+    /// layout (el rect del nodo refleja el desplazamiento), `paint` resuelve el
+    /// enganche con pura aritmética de rects — no necesita conocer el offset de
+    /// scroll. `None` ⇒ nodo no-sticky (la abrumadora mayoría). Ver
+    /// [`View::sticky`]. Limitación v1: el clamp usa el scrollport como caja
+    /// contenedora (no el bloque contenedor CSS exacto); alcanza para el caso
+    /// canónico (header/columna sticky a nivel de página).
+    pub sticky: Option<[Option<f32>; 4]>,
     /// Texto de **tooltip**: si está, el runtime/cliente puede mostrar un
     /// rótulo flotante cuando el cursor se posa sobre este nodo. Llimphi sólo
     /// transporta el dato hasta el [`MountedNode`]; *quién* lo pinta (un overlay
@@ -752,6 +829,21 @@ pub struct View<Msg> {
     /// `None` = source-over normal (la abrumadora mayoría). Ver [`View::blend`].
     /// Fase 7.1237.
     pub blend: Option<BlendMode>,
+    /// **RepaintBoundary** (Bloque 23 de `PLAN-NUCLEO-RETENIDO.md`): marca este
+    /// subárbol como candidato a **cachear su rasterización** entre frames. Si
+    /// el subárbol es paint-puro (sin painter/gpu/over/anim/ripple/gradiente/
+    /// imagen/hover adentro) y está en una posición "limpia" (sin transform/clip/
+    /// alpha ancestral), el runtime rasteriza su sub-escena una vez y la **reusa**
+    /// (append trasladado) mientras su contenido no cambie — evitando re-pintarlo.
+    /// `key` estable entre rebuilds. `None` = nodo normal (la abrumadora mayoría).
+    /// Ver [`View::repaint_boundary`].
+    pub repaint_boundary: Option<u64>,
+    /// **Memo** (Bloque 25): si está presente, el contenido de este nodo se
+    /// construye vía el `builder` diferido y se **reusa entre frames** mientras
+    /// `deps` no cambie (no se reconstruye el `View` ni se re-monta/re-layoutea).
+    /// El nodo debe tener un `Style` con tamaño definido. `None` = nodo normal.
+    /// Ver [`View::memo`].
+    pub memo: Option<MemoNode<Msg>>,
     pub children: Vec<View<Msg>>,
 }
 
@@ -792,10 +884,13 @@ impl<Msg: 'static> View<Msg> {
             painter,
             gpu_painter,
             over_painter,
+            over_layer,
             on_click,
             on_click_at,
+            on_click_screen,
             on_right_click,
             on_right_click_at,
+            on_right_click_screen,
             on_middle_click,
             drag,
             drag_at,
@@ -813,6 +908,7 @@ impl<Msg: 'static> View<Msg> {
             on_pointer_leave,
             on_pointer_move_at,
             on_scroll,
+            on_scroll_take,
             on_scale,
             on_rotate,
             on_double_tap,
@@ -829,6 +925,7 @@ impl<Msg: 'static> View<Msg> {
             transform,
             transform_rel,
             transform_origin,
+            sticky,
             tooltip,
             cursor,
             ripple,
@@ -836,6 +933,8 @@ impl<Msg: 'static> View<Msg> {
             backdrop_blur,
             filter,
             blend,
+            repaint_boundary,
+            memo,
             children,
         } = self;
         // Wrappers: cada callback que produce `Option<Msg>` se reenvía y su
@@ -860,6 +959,7 @@ impl<Msg: 'static> View<Msg> {
             painter,
             gpu_painter,
             over_painter,
+            over_layer,
             drag_payload,
             drop_hover_fill,
             clip,
@@ -878,12 +978,24 @@ impl<Msg: 'static> View<Msg> {
             transform,
             transform_rel,
             transform_origin,
+            sticky,
             tooltip,
             cursor,
             ripple,
             backdrop_blur,
             filter,
             blend,
+            repaint_boundary,
+            // El builder del memo produce `View<Msg>`; lo envolvemos para que
+            // produzca `View<Msg2>` mapeando su resultado con `f`.
+            memo: memo.map(|m| MemoNode {
+                key: m.key,
+                deps: m.deps,
+                builder: m.builder.map(|b| {
+                    let f = f.clone();
+                    Arc::new(move || b().map_shared(f.clone())) as MemoBuilderFn<Msg2>
+                }),
+            }),
             // — Msg simples —
             on_click: on_click.map(|m| f(m)),
             on_right_click: on_right_click.map(|m| f(m)),
@@ -897,10 +1009,18 @@ impl<Msg: 'static> View<Msg> {
                 let f = f.clone();
                 Arc::new(move |a, b, c, d| h(a, b, c, d).map(|m| f(m))) as ClickAtFn<Msg2>
             }),
+            on_click_screen: on_click_screen.map(|h| {
+                let f = f.clone();
+                Arc::new(move |a, b, c, d| h(a, b, c, d).map(|m| f(m))) as ClickAtFn<Msg2>
+            }),
             on_right_click_at: on_right_click_at.map(|h| {
                 let f = f.clone();
                 Arc::new(move |a, b, c, d| h(a, b, c, d).map(|m| f(m))) as ClickAtFn<Msg2>
             }),
+            on_right_click_screen: on_right_click_screen.map(|h| {
+                let f = f.clone();
+                Arc::new(move |a, b, c, d| h(a, b, c, d).map(|m| f(m))) as ClickAtFn<Msg2>
+            }),
             on_pointer_move_at: on_pointer_move_at.map(|h| {
                 let f = f.clone();
                 Arc::new(move |a, b, c, d| h(a, b, c, d).map(|m| f(m))) as ClickAtFn<Msg2>
@@ -936,6 +1056,13 @@ impl<Msg: 'static> View<Msg> {
                 let f = f.clone();
                 Arc::new(move |dx, dy| h(dx, dy).map(|m| f(m))) as ScrollFn<Msg2>
             }),
+            on_scroll_take: on_scroll_take.map(|h| {
+                let f = f.clone();
+                Arc::new(move |dx, dy| {
+                    let (msg, rx, ry) = h(dx, dy);
+                    (msg.map(|m| f(m)), rx, ry)
+                }) as ScrollTakeFn<Msg2>
+            }),
             on_scale: on_scale.map(|h| {
                 let f = f.clone();
                 Arc::new(move |ph, s, cx, cy| h(ph, s, cx, cy).map(|m| f(m))) as ScaleFn<Msg2>
@@ -944,7 +1071,7 @@ impl<Msg: 'static> View<Msg> {
                 let f = f.clone();
                 Arc::new(move |ph, r, cx, cy| h(ph, r, cx, cy).map(|m| f(m))) as RotateFn<Msg2>
             }),
-            // — layout_builder produce un View<Msg>: recursá el map —
+            // — layout_builder produce un View<Msg>: recursa el map —
             layout_builder: layout_builder.map(|h| {
                 let f = f.clone();
                 Arc::new(move |c| h(c).map_shared(f.clone())) as LayoutBuilderFn<Msg2>
@@ -1017,6 +1144,14 @@ pub struct TextMeasure {
     /// palabra larga: con el flag, el ancho mínimo del bloque deja de estar
     /// fijado por el token más ancho.
     pub overflow_wrap: bool,
+    /// Idem [`TextSpec::font_features`]. Entra en la medida porque ligaduras/
+    /// kerning cambian el ancho del shaping (y la clave del caché).
+    pub font_features: String,
+    /// Idem [`TextSpec::font_variations`]. Mismo razonamiento que `font_features`.
+    pub font_variations: String,
+    /// Idem [`TextSpec::font_width`]. Entra en la medida porque la face
+    /// condensada/expandida cambia el ancho del shaping (y la clave del caché).
+    pub font_width: f32,
 }
 
 /// Cómo encajar una imagen en el rect del nodo (CSS `object-fit` /
@@ -1188,6 +1323,7 @@ pub enum Cursor {
     ZoomOut,
 }
 
+#[derive(Clone)]
 pub struct MountedNode<Msg> {
     pub id: NodeId,
     pub fill: Option<Color>,
@@ -1215,10 +1351,17 @@ pub struct MountedNode<Msg> {
     pub painter: Option<PaintFn>,
     pub gpu_painter: Option<GpuPaintFn>,
     pub over_painter: Option<PaintFn>,
+    /// Subárbol over (ver [`View::over`]): este nodo y sus descendientes
+    /// pintan en la pasada vello final, después del pase GPU.
+    pub over_layer: bool,
     pub on_click: Option<Msg>,
     pub on_click_at: Option<ClickAtFn<Msg>>,
+    /// Gemelo de izquierda de [`Self::on_right_click_screen`]: click izquierdo con
+    /// coords **absolutas de ventana**, para anclar un popup (select/dropdown).
+    pub on_click_screen: Option<ClickAtFn<Msg>>,
     pub on_right_click: Option<Msg>,
     pub on_right_click_at: Option<ClickAtFn<Msg>>,
+    pub on_right_click_screen: Option<ClickAtFn<Msg>>,
     pub on_middle_click: Option<Msg>,
     pub drag: Option<DragFn<Msg>>,
     pub drag_at: Option<DragAtFn<Msg>>,
@@ -1236,6 +1379,8 @@ pub struct MountedNode<Msg> {
     pub on_pointer_leave: Option<Msg>,
     pub on_pointer_move_at: Option<ClickAtFn<Msg>>,
     pub on_scroll: Option<ScrollFn<Msg>>,
+    /// Handler de scroll con reparto parcial. Ver [`ScrollTakeFn`].
+    pub on_scroll_take: Option<ScrollTakeFn<Msg>>,
     /// Handler de gesto de escala (pinch-to-zoom) de este nodo. Ver
     /// [`View::on_scale`] y [`ScaleFn`].
     pub on_scale: Option<ScaleFn<Msg>>,
@@ -1264,6 +1409,14 @@ pub struct MountedNode<Msg> {
     /// en [`HeroRegistry::reconcile`] para enlazar identidad entre frames y
     /// escribir `transform` con la afín "fly" cuando el rect cambia.
     pub hero: Option<Hero>,
+    /// Subescena a pintar **DEBAJO** del contenido de este nodo, en su
+    /// posición z (y dentro del clip/transform de sus ancestros). La escribe
+    /// el runtime — [`AnimRegistry::prepare_underlays`]: el fantasma del
+    /// contenido viejo de un `switch` con `exit_under` — no el `View`. El
+    /// paint la apendea componiendo la afín acumulada de los ancestros,
+    /// ANTES del transform/alpha propios del nodo (que pertenecen al
+    /// contenido NUEVO).
+    pub underlay: Option<vello::Scene>,
     /// Transformación afín 2D del nodo (alrededor del centro de su rect).
     /// Ver [`View::transform`]. `paint` la compone con la del padre.
     pub transform: Option<Affine>,
@@ -1273,6 +1426,10 @@ pub struct MountedNode<Msg> {
     /// Pivote de `transform` (CSS `transform-origin`). `None` ⇒ centro. Ver
     /// [`TransformPivot`] / [`View::transform_origin`].
     pub transform_origin: Option<TransformPivot>,
+    /// `position: sticky`: insets `[top, right, bottom, left]` px relativos al
+    /// scrollport. Ver [`View::sticky`]. `paint` lo resuelve con los rects
+    /// computados (el scroll ya está en el layout). `None` ⇒ no-sticky.
+    pub sticky: Option<[Option<f32>; 4]>,
     /// Texto de tooltip de este nodo (ver [`View::tooltip`]). El consumidor lo
     /// lee tras un hit-test de hover para pintar el rótulo flotante.
     pub tooltip: Option<String>,
@@ -1308,6 +1465,12 @@ pub struct MountedNode<Msg> {
     /// fill + contenido + hijos y se cierra al fin del subárbol, mezclando el
     /// resultado contra lo ya pintado. `None` = source-over. Fase 7.1237.
     pub blend: Option<BlendMode>,
+    /// Key de [`View::repaint_boundary`] si este nodo abre un límite de
+    /// repintado cacheable. `None` = normal. Lo consume `paint_cached`.
+    pub repaint_boundary: Option<u64>,
+    /// Key de [`View::memo`] si este nodo es un marcador de subárbol memoizado
+    /// (Bloque 25). El runtime lo splica tras el layout. `None` = normal.
+    pub memo_ref: Option<u64>,
     /// Índice (exclusivo) del fin del subárbol en `Mounted::nodes`. Los
     /// descendientes ocupan `[idx + 1, subtree_end)`. Hace de "barrera" en
     /// paint/hit_test para `pop_layer` y para saltar subárboles enteros.
diff --git a/llimphi-compositor/src/render.rs b/llimphi-compositor/src/render.rs
index 5cc9fee..12770d1 100644
--- a/llimphi-compositor/src/render.rs
+++ b/llimphi-compositor/src/render.rs
@@ -1,20 +1,51 @@
 use super::*;
 
+use std::hash::{Hash, Hasher};
+
+/// Holgura (px) que se le suma al ancho de envoltura del texto en el PAINT.
+///
+/// Taffy redondea cada borde de caja a entero de forma independiente, así que
+/// el ancho *usado* de un nodo puede quedar hasta ~1px por debajo del ancho
+/// natural de su contenido (el error de redondeo del borde izquierdo y el
+/// derecho se suman: cada uno ∈ [-0.5, 0.5] → pérdida ≤ 1.0). Para un nodo de
+/// texto encogido-a-contenido (un `<a>`/`<span>` inline que la medida
+/// dimensionó a `nat=86.438` pero taffy dejó en `86.000`), envolver el paint
+/// exactamente a ese ancho redondeado parte la última palabra a una segunda
+/// línea que la MEDIDA nunca reservó (queda desbordando hacia abajo). Sumar
+/// esta holgura hace que el paint tolere la pérdida de redondeo: el texto que
+/// cabía en una línea sigue en una línea. No afecta el wrapping real (un
+/// párrafo que de verdad excede su bloque por >1px sigue envolviendo).
+const TEXT_WRAP_ROUNDING_SLACK: f32 = 1.0;
+
 pub fn mount<Msg: Clone>(layout: &mut LayoutTree, v: View<Msg>) -> Mounted<Msg> {
     let mut nodes = Vec::new();
     let mut text_measures = std::collections::HashMap::new();
-    let root = mount_recursive(layout, v, &mut nodes, &mut text_measures);
+    let root = mount_recursive(layout, v, &mut nodes, &mut text_measures, &MountPlan::Fresh);
     Mounted { root, nodes, text_measures }
 }
 
+/// Cómo obtiene su `NodeId` cada nodo montado (Bloque 24). `Fresh` crea nodos
+/// taffy nuevos (camino histórico). `Reuse` reusa los `NodeId` del frame anterior
+/// en el MISMO orden pre-orden (sólo válido si la **forma** del árbol no cambió —
+/// lo garantiza `mount_incremental`) y sólo llama `set_style` donde el estilo
+/// taffy cambió, dejando limpio el resto para que taffy cachee su layout (ver el
+/// probe `taffy_cachea_entre_computes` en llimphi-layout).
+pub(crate) enum MountPlan<'a> {
+    Fresh,
+    Reuse(&'a [NodeId]),
+}
+
 /// Mount en pre-orden directo sobre `out`: pusheamos el padre como
 /// placeholder (id real desconocido hasta crear el taffy node), recursamos
 /// hijos sobre el mismo `out`, y al volver completamos `id` + `subtree_end`.
-pub fn mount_recursive<Msg: Clone>(
+/// El `plan` decide si el `NodeId` es nuevo (`Fresh`) o reusado del frame
+/// anterior (`Reuse`, Bloque 24).
+pub(crate) fn mount_recursive<Msg: Clone>(
     layout: &mut LayoutTree,
     v: View<Msg>,
     out: &mut Vec<MountedNode<Msg>>,
     text_measures: &mut std::collections::HashMap<NodeId, TextMeasure>,
+    plan: &MountPlan<'_>,
 ) -> NodeId {
     let View {
         style,
@@ -34,10 +65,13 @@ pub fn mount_recursive<Msg: Clone>(
         painter,
         gpu_painter,
         over_painter,
+        over_layer,
         on_click,
         on_click_at,
+        on_click_screen,
         on_right_click,
         on_right_click_at,
+        on_right_click_screen,
         on_middle_click,
         drag,
         drag_at,
@@ -55,6 +89,7 @@ pub fn mount_recursive<Msg: Clone>(
         on_pointer_leave,
         on_pointer_move_at,
         on_scroll,
+        on_scroll_take,
         on_scale,
         on_rotate,
         on_double_tap,
@@ -71,6 +106,7 @@ pub fn mount_recursive<Msg: Clone>(
         transform,
         transform_rel,
         transform_origin,
+        sticky,
         tooltip,
         cursor,
         ripple,
@@ -78,8 +114,13 @@ pub fn mount_recursive<Msg: Clone>(
         backdrop_blur,
         filter,
         blend,
+        repaint_boundary,
+        memo,
         children,
     } = v;
+    // Un nodo memo se monta como HOJA marcador (su contenido lo splica el
+    // runtime tras el layout); sus `children` estáticos se ignoran.
+    let children = if memo.is_some() { Vec::new() } else { children };
     let parent_idx = out.len();
     out.push(MountedNode {
         id: NodeId::new(0), // placeholder, lo sobreescribimos abajo
@@ -99,10 +140,13 @@ pub fn mount_recursive<Msg: Clone>(
         painter,
         gpu_painter,
         over_painter,
+        over_layer,
         on_click,
         on_click_at,
+        on_click_screen,
         on_right_click,
         on_right_click_at,
+        on_right_click_screen,
         on_middle_click,
         drag,
         drag_at,
@@ -120,6 +164,7 @@ pub fn mount_recursive<Msg: Clone>(
         on_pointer_leave,
         on_pointer_move_at,
         on_scroll,
+        on_scroll_take,
         on_scale,
         on_rotate,
         on_double_tap,
@@ -133,9 +178,13 @@ pub fn mount_recursive<Msg: Clone>(
         animated_size,
         semantics,
         hero,
+        // El underlay no viene del View: lo escribe el runtime post-reconcile
+        // (fantasmas de switch en su posición z). Nace vacío en cada mount.
+        underlay: None,
         transform,
         transform_rel,
         transform_origin,
+        sticky,
         tooltip,
         cursor,
         ripple,
@@ -146,22 +195,44 @@ pub fn mount_recursive<Msg: Clone>(
         backdrop_blur,
         filter,
         blend,
+        repaint_boundary,
+        memo_ref: memo.as_ref().map(|m| m.key),
         subtree_end: 0,
     });
     let mut child_ids = Vec::with_capacity(children.len());
     for child in children {
-        child_ids.push(mount_recursive(layout, child, out, text_measures));
+        child_ids.push(mount_recursive(layout, child, out, text_measures, plan));
     }
-    let id = if child_ids.is_empty() {
-        layout.leaf(style).expect("layout leaf")
-    } else {
-        layout.node(style, &child_ids).expect("layout node")
+    let id = match plan {
+        MountPlan::Fresh => {
+            if child_ids.is_empty() {
+                layout.leaf(style).expect("layout leaf")
+            } else {
+                layout.node(style, &child_ids).expect("layout node")
+            }
+        }
+        MountPlan::Reuse(ids) => {
+            // `parent_idx` es el índice pre-orden de este nodo; con la forma
+            // validada (misma cantidad de hijos en cada posición) el reuso
+            // posicional es exacto. Sólo re-estilamos si el estilo cambió: así
+            // los nodos sin cambios quedan LIMPIOS y taffy cachea su layout.
+            let reused = ids[parent_idx];
+            let changed = layout
+                .inner()
+                .style(reused)
+                .map(|s| *s != style)
+                .unwrap_or(true);
+            if changed {
+                let _ = layout.inner_mut().set_style(reused, style);
+            }
+            reused
+        }
     };
     out[parent_idx].id = id;
     out[parent_idx].subtree_end = out.len();
     // Hoja de texto uniforme: registrá su contenido para que el runtime lo
     // mida con parley. El texto multicolor (`runs`) lo dimensiona el caller
-    // (editor: un nodo por línea), así que no lo medimos acá.
+    // (editor: un nodo por línea), así que no lo medimos aquí.
     if child_ids.is_empty() {
         if let Some(text) = out[parent_idx].text.as_ref() {
             if text.runs.is_none() {
@@ -184,6 +255,9 @@ pub fn mount_recursive<Msg: Clone>(
                         word_spacing: text.word_spacing,
                         no_wrap: text.no_wrap,
                         overflow_wrap: text.overflow_wrap,
+                        font_features: text.font_features.clone(),
+                        font_variations: text.font_variations.clone(),
+                        font_width: text.font_width,
                     },
                 );
             }
@@ -192,6 +266,369 @@ pub fn mount_recursive<Msg: Clone>(
     id
 }
 
+// ─────────────────────────────────────────────────────────────────────────
+// Bloque 24 — Layout retenido (mount incremental). El único motivo por el que
+// llimphi no aprovecha el caché de taffy es el `clear()` por frame (ids nuevos =
+// caché fría). `mount_incremental` reusa los `NodeId` del frame anterior EN EL
+// MISMO orden pre-orden cuando la **forma** del árbol no cambió, y sólo dirtea
+// lo que cambió (estilo → set_style dentro de mount_recursive; medida de texto →
+// mark_dirty aquí), dejando limpio el resto para que taffy saltee su re-solve.
+//
+// Correctitud demostrada por el arnés de equivalencia (fuzz retenido==fresco).
+// Fail-safe: si la forma cambió, cae a `clear()`+rebuild = camino histórico.
+// ─────────────────────────────────────────────────────────────────────────
+
+/// Estado retenido entre frames para el layout incremental. Opaco para el
+/// runtime: lo guarda y lo pasa de vuelta. Ver [`mount_incremental`].
+pub struct RetainedLayout {
+    root: NodeId,
+    /// `NodeId` en pre-orden (índice = orden en `Mounted::nodes`).
+    ids: Vec<NodeId>,
+    /// Cantidad de hijos por nodo, en pre-orden — la **firma de forma**.
+    child_counts: Vec<usize>,
+    /// Firma de medida por nodo: `Some(h)` compara por hash; `None` = "siempre
+    /// re-medir" (nodos con `spans`, conservador). Ver [`measure_sig_of`].
+    measure_sig: Vec<Option<u64>>,
+}
+
+impl RetainedLayout {
+    /// `NodeId` raíz del árbol retenido (para `compute`).
+    pub fn root(&self) -> NodeId {
+        self.root
+    }
+}
+
+/// Firma de medida de un nodo: `Some(0)` = no lo mide taffy (sizing por Style o
+/// texto con `runs`, dimensionado por el caller) → nunca necesita re-medida.
+/// `Some(hash)` = texto uniforme, compara por hash de los campos que afectan el
+/// shaping/line-break (el `color` NO entra). `None` = texto con `spans` →
+/// conservador: se re-mide siempre (spans son raros; evita un sig frágil).
+fn measure_sig_of<Msg>(node: &MountedNode<Msg>) -> Option<u64> {
+    let Some(t) = node.text.as_ref() else {
+        return Some(0);
+    };
+    if t.runs.is_some() {
+        return Some(0);
+    }
+    if t.spans.is_some() {
+        return None;
+    }
+    let mut h = std::collections::hash_map::DefaultHasher::new();
+    t.content.hash(&mut h);
+    t.size_px.to_bits().hash(&mut h);
+    (t.alignment as u8).hash(&mut h);
+    t.italic.hash(&mut h);
+    t.weight.to_bits().hash(&mut h);
+    t.line_height.to_bits().hash(&mut h);
+    t.max_lines.hash(&mut h);
+    t.ellipsis.hash(&mut h);
+    t.font_family.hash(&mut h);
+    t.letter_spacing.to_bits().hash(&mut h);
+    t.word_spacing.to_bits().hash(&mut h);
+    t.no_wrap.hash(&mut h);
+    t.overflow_wrap.hash(&mut h);
+    t.font_features.hash(&mut h);
+    t.font_variations.hash(&mut h);
+    t.font_width.to_bits().hash(&mut h);
+    Some(h.finish())
+}
+
+/// Firma de forma del `View` (cantidad de hijos por nodo, en pre-orden). Es una
+/// pasada read-only que NO consume el árbol; se compara contra la retenida para
+/// decidir reuso vs rebuild.
+fn view_child_counts<Msg>(v: &View<Msg>, out: &mut Vec<usize>) {
+    out.push(v.children.len());
+    for c in &v.children {
+        view_child_counts(c, out);
+    }
+}
+
+/// Monta `view` reusando el layout retenido cuando la **forma** no cambió. En
+/// ese caso NO se limpia el árbol taffy: se reusan los `NodeId`, se re-estila
+/// sólo lo cambiado y se marcan dirty los textos cuya medida cambió — así taffy
+/// cachea el resto. Si la forma cambió (o no hay estado previo), cae a
+/// `clear()`+rebuild (idéntico al camino histórico). Devuelve el `Mounted`, el
+/// nuevo `RetainedLayout` (para el próximo frame) y si hubo reuso.
+pub fn mount_incremental<Msg: Clone>(
+    layout: &mut LayoutTree,
+    view: View<Msg>,
+    prev: Option<&RetainedLayout>,
+) -> (Mounted<Msg>, RetainedLayout, bool) {
+    let mut child_counts = Vec::new();
+    view_child_counts(&view, &mut child_counts);
+    let can_reuse = prev.is_some_and(|p| p.child_counts == child_counts);
+
+    let mut nodes = Vec::new();
+    let mut text_measures = std::collections::HashMap::new();
+
+    if can_reuse {
+        let p = prev.expect("can_reuse ⇒ prev");
+        // Reuso: sin clear. `set_style` se hace dentro de mount_recursive donde
+        // el estilo cambió (deja limpio el resto).
+        let root = mount_recursive(
+            layout,
+            view,
+            &mut nodes,
+            &mut text_measures,
+            &MountPlan::Reuse(&p.ids),
+        );
+        // Post-pasada de medida: un texto puede cambiar de tamaño sin cambiar su
+        // `Style` (el contenido no está en el Style). Marcamos dirty esos nodos
+        // para que taffy los re-mida; el resto queda cacheado.
+        let mut measure_sig = Vec::with_capacity(nodes.len());
+        for (i, n) in nodes.iter().enumerate() {
+            let sig = measure_sig_of(n);
+            let prev_sig = p.measure_sig.get(i).copied().flatten();
+            // `None` (spans) ⇒ siempre dirty. `Some(h)` ⇒ dirty si cambió.
+            let dirty = match sig {
+                None => true,
+                Some(h) => prev_sig != Some(h),
+            };
+            if dirty {
+                let _ = layout.inner_mut().mark_dirty(n.id);
+            }
+            measure_sig.push(sig);
+        }
+        let retained = RetainedLayout {
+            root,
+            ids: p.ids.clone(),
+            child_counts,
+            measure_sig,
+        };
+        (Mounted { root, nodes, text_measures }, retained, true)
+    } else {
+        // Rebuild fresco (camino histórico). NodeIds nuevos.
+        layout.clear();
+        let root = mount_recursive(layout, view, &mut nodes, &mut text_measures, &MountPlan::Fresh);
+        let ids: Vec<NodeId> = nodes.iter().map(|n| n.id).collect();
+        let measure_sig: Vec<Option<u64>> = nodes.iter().map(measure_sig_of).collect();
+        let retained = RetainedLayout {
+            root,
+            ids,
+            child_counts,
+            measure_sig,
+        };
+        (Mounted { root, nodes, text_measures }, retained, false)
+    }
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Bloque 25 — Memo de view() (enfoque A: clone-splice). Un `View::memo(key,
+// deps, builder)` es un subárbol cuyo `View` NO se reconstruye si `deps` (ni el
+// tamaño del slot) cambiaron: el builder no se llama, y el `Mounted` cacheado se
+// splica en el árbol principal. El subárbol vive en un `LayoutTree` AISLADO que
+// taffy cachea → 0 re-solve. Ahorra view-build + mount + re-solve del subárbol;
+// paga un `clone` liviano (los handlers son `Arc`). Paint/hit-test quedan
+// INTACTOS (el splice produce un `Mounted` plano normal). Correctitud probada
+// por el arnés (Mounted memoizado == fresco).
+// ─────────────────────────────────────────────────────────────────────────
+
+/// Registro de subárboles memoizados (Bloque 25). Vive en el runtime entre
+/// frames. Por key: `deps` + tamaño del slot con que se computó + el
+/// `LayoutTree` aislado (cacheado por taffy) + el `Mounted` local + sus rects
+/// locales.
+pub struct MemoRegistry<Msg> {
+    entries: std::collections::HashMap<u64, MemoEntry<Msg>>,
+    seen: std::collections::HashSet<u64>,
+}
+
+struct MemoEntry<Msg> {
+    deps: u64,
+    avail: (f32, f32),
+    layout: LayoutTree,
+    nodes: Vec<MountedNode<Msg>>,
+    rects: Vec<llimphi_layout::Rect>,
+}
+
+impl<Msg> Default for MemoRegistry<Msg> {
+    fn default() -> Self {
+        Self {
+            entries: std::collections::HashMap::new(),
+            seen: std::collections::HashSet::new(),
+        }
+    }
+}
+
+impl<Msg> MemoRegistry<Msg> {
+    pub fn new() -> Self {
+        Self::default()
+    }
+    /// Subárboles memoizados vivos.
+    pub fn len(&self) -> usize {
+        self.entries.len()
+    }
+    pub fn is_empty(&self) -> bool {
+        self.entries.is_empty()
+    }
+}
+
+/// `true` si el árbol tiene algún nodo `memo` (fast-path para el runtime).
+pub fn has_memo<Msg>(view: &View<Msg>) -> bool {
+    view.memo.is_some() || view.children.iter().any(has_memo)
+}
+
+/// Extrae los builders de los nodos `memo` del `view` (dejándolos como
+/// marcadores `builder: None`), en pre-orden. El runtime los pasa a
+/// [`splice_memos`] tras el layout. Debe correr ANTES de `mount`.
+pub fn take_memo_builders<Msg>(
+    view: &mut View<Msg>,
+    out: &mut Vec<(u64, u64, MemoBuilderFn<Msg>, crate::Style)>,
+) {
+    if view.memo.as_ref().is_some_and(|m| m.builder.is_some()) {
+        // Capturamos el `Style` del nodo memo: el subárbol aislado se computa
+        // como `container(style) -> content`, igual que el fresco, para que el
+        // contenido se estire dentro del box del memo (no se dimensione como raíz).
+        let style = view.style.clone();
+        let m = view.memo.as_mut().expect("memo");
+        let b = m.builder.take().expect("builder");
+        out.push((m.key, m.deps, b, style));
+    }
+    for c in &mut view.children {
+        take_memo_builders(c, out);
+    }
+}
+
+/// Splica los subárboles memoizados en el `Mounted`/`ComputedLayout` ya
+/// computados: para cada memo, si `deps` y el tamaño del slot no cambiaron reusa
+/// el `Mounted` cacheado (sin llamar el builder); si cambiaron, llama el builder,
+/// monta+computa el subárbol en su `LayoutTree` aislado y lo cachea. Luego clona
+/// los nodos cacheados con `NodeId` sintéticos (rango alto, colisión-proof),
+/// offsetea sus rects a la posición del marcador, y los inserta como hijos del
+/// marcador. `measure` mide una hoja de texto (misma que el compute principal).
+pub fn splice_memos<Msg, F>(
+    mounted: &mut Mounted<Msg>,
+    computed: &mut ComputedLayout,
+    pending: &[(u64, u64, MemoBuilderFn<Msg>, crate::Style)],
+    reg: &mut MemoRegistry<Msg>,
+    mut measure: F,
+) where
+    Msg: Clone,
+    F: FnMut(
+        &TextMeasure,
+        llimphi_layout::taffy::Size<Option<f32>>,
+        llimphi_layout::taffy::Size<llimphi_layout::taffy::AvailableSpace>,
+    ) -> llimphi_layout::taffy::Size<f32>,
+{
+    reg.seen.clear();
+    let mut synth: u64 = u64::MAX;
+    for (key, deps, builder, style) in pending {
+        reg.seen.insert(*key);
+        // Re-scan del marcador: los índices se corren tras cada splice.
+        let Some(mi) = mounted.nodes.iter().position(|n| n.memo_ref == Some(*key)) else {
+            continue;
+        };
+        let Some(slot) = computed.get(mounted.nodes[mi].id) else {
+            continue;
+        };
+        let abs = (slot.x, slot.y);
+        let avail = (slot.w, slot.h);
+
+        // Reuso si deps y tamaño del slot coinciden; si no, rebuild.
+        let hit = reg
+            .entries
+            .get(key)
+            .is_some_and(|e| e.deps == *deps && e.avail == avail);
+        if !hit {
+            // El aislado replica EXACTAMENTE el fresco: `container(style) ->
+            // content`. El `container` (índice 0) == el marcador; se computa con
+            // el mismo slot que el marcador, así el `content` se estira igual.
+            let root_view = View::new(style.clone()).children(vec![builder()]);
+            let mut layout = reg
+                .entries
+                .remove(key)
+                .map(|e| e.layout)
+                .unwrap_or_default();
+            layout.clear();
+            let sub_mounted = mount(&mut layout, root_view);
+            let sub_computed = {
+                let tm = &sub_mounted.text_measures;
+                layout
+                    .compute_with_measure(sub_mounted.root, avail, |nid, k, a| match tm.get(&nid) {
+                        Some(t) => measure(t, k, a),
+                        None => llimphi_layout::taffy::Size {
+                            width: 0.0,
+                            height: 0.0,
+                        },
+                    })
+                    .expect("layout memo")
+            };
+            // Origen del container (índice 0) para hacer los rects RELATIVOS a él
+            // (luego se offsetean al `abs` del marcador).
+            let origin = sub_computed
+                .get(sub_mounted.nodes[0].id)
+                .map(|r| (r.x, r.y))
+                .unwrap_or((0.0, 0.0));
+            let rects = sub_mounted
+                .nodes
+                .iter()
+                .map(|n| {
+                    let r = sub_computed.get(n.id).unwrap_or(llimphi_layout::Rect {
+                        x: 0.0,
+                        y: 0.0,
+                        w: 0.0,
+                        h: 0.0,
+                    });
+                    llimphi_layout::Rect {
+                        x: r.x - origin.0,
+                        y: r.y - origin.1,
+                        w: r.w,
+                        h: r.h,
+                    }
+                })
+                .collect();
+            reg.entries.insert(
+                *key,
+                MemoEntry {
+                    deps: *deps,
+                    avail,
+                    layout,
+                    nodes: sub_mounted.nodes,
+                    rects,
+                },
+            );
+        }
+
+        let e = reg.entries.get(key).expect("insertado o reusado");
+        // Salteamos el índice 0 (el container == el marcador, ya en el árbol
+        // principal): sólo splicamos su CONTENIDO (`[1..]`).
+        let sub_count = e.nodes.len().saturating_sub(1);
+        if sub_count == 0 {
+            continue;
+        }
+        let base = mi + 1;
+        let mut cloned: Vec<MountedNode<Msg>> = Vec::with_capacity(sub_count);
+        for (i, n) in e.nodes.iter().enumerate().skip(1) {
+            let mut c = n.clone();
+            let sid = NodeId::from(synth);
+            synth -= 1;
+            c.id = sid;
+            // Índice local `i` (≥1) → absoluto `mi + i`; subtree_end local + mi.
+            c.subtree_end = n.subtree_end + mi;
+            let r = e.rects[i];
+            computed.rects.insert(
+                sid,
+                llimphi_layout::Rect {
+                    x: r.x + abs.0,
+                    y: r.y + abs.1,
+                    w: r.w,
+                    h: r.h,
+                },
+            );
+            cloned.push(c);
+        }
+        // Corre los subtree_end existentes que abarcaban el marcador (>mi).
+        for n in mounted.nodes.iter_mut() {
+            if n.subtree_end > mi {
+                n.subtree_end += sub_count;
+            }
+        }
+        mounted.nodes.splice(base..base, cloned);
+    }
+    // GC de las keys que no aparecieron este frame.
+    let seen = &reg.seen;
+    reg.entries.retain(|k, _| seen.contains(k));
+}
+
 /// Mide una hoja de texto para taffy: shaping + line-break con parley contra
 /// el ancho disponible, devolviendo el bounding box. Si el ancho ya está
 /// resuelto (`known.width`) se usa ese; si no, se deriva del `available`
@@ -216,6 +653,25 @@ pub fn measure_text_node(
             AvailableSpace::MinContent => Some(0.0),
         })
     };
+    // Redondeo defensivo del ancho max-content (`max_width == None`): taffy
+    // computa el layout con floats pero REDONDEA el rect final a píxeles enteros
+    // (`round_layout`), lo que puede floorear una caja shrink-to-fit por debajo
+    // del ancho natural del texto (p.ej. natural 95.288 → caja 95.000). Luego el
+    // paint re-shapea el texto a ese ancho y lo PARTE en 2 líneas mientras el
+    // layout reservó alto de 1 → clip. Al reportar `ceil(full_width)` como tamaño
+    // intrínseco, taffy asigna un entero ≥ ancho natural y el texto nunca se
+    // parte por sub-píxel. Sólo afecta la medición sin restricción de ancho
+    // (max-content / nowrap); el wrap constreñido (Definite/MinContent) devuelve
+    // su ancho de línea real sin tocar.
+    //
+    // `full_width` (no `width`): parley EXCLUYE el espacio final del `width()`
+    // (la ws de fin de línea "cuelga" per CSS), pero al re-shapear en el paint a
+    // ese ancho SÍ cuenta el avance del espacio → lo empuja a una 2ª línea
+    // fantasma que la medida nunca reservó (clip). P.ej. `"archived mailing
+    // list "` mide width=148.932 pero full=153.432; con caja 149 el paint parte
+    // a 2 líneas, con caja 154 (=ceil(full)) queda en 1. Sin espacio final
+    // `full_width == width`, así que es no-op para el caso común.
+    let ceil_intrinsic = max_width.is_none();
     // RichText: si hay spans, mediar con `layout_spans` para que taffy
     // reserve el alto considerando overrides de tamaño por rango (un span
     // con `size_px = 24` dentro de un párrafo de 14 px agranda esa línea).
@@ -239,8 +695,9 @@ pub fn measure_text_node(
                 max_width,
                 tm.alignment,
             );
+            let w = if ceil_intrinsic { layout.full_width().ceil() } else { layout.width() };
             return llimphi_layout::taffy::Size {
-                width: layout.width(),
+                width: w,
                 height: layout.height(),
             };
         }
@@ -264,9 +721,47 @@ pub fn measure_text_node(
         tm.letter_spacing,
         tm.word_spacing,
         tm.overflow_wrap,
+        &tm.font_features,
+        &tm.font_variations,
+        tm.font_width,
     );
     let m = llimphi_text::measurement(&layout);
-    llimphi_layout::taffy::Size { width: m.width, height: m.height }
+    let width = if ceil_intrinsic { layout.full_width().ceil() } else { m.width };
+    llimphi_layout::taffy::Size { width, height: m.height }
+}
+
+thread_local! {
+    /// `Typesetter` reusado para [`measured_height`] (crear uno es caro —
+    /// enumera fuentes del sistema). Independiente del del runtime; mismas
+    /// fuentes ⇒ mismas métricas.
+    static MEASURE_TS: std::cell::RefCell<Option<llimphi_text::Typesetter>> =
+        const { std::cell::RefCell::new(None) };
+}
+
+/// Mide el **alto** que tendría `view` layouteado a un ancho `available_width`
+/// (con alto libre). Monta + computa en un `LayoutTree` descartable, usando un
+/// `Typesetter` thread-local para el shaping del texto. Pensado para construir
+/// los `offsets` de una lista perezosa de **alto variado** cuyas alturas
+/// dependen del contenido (reflow de texto): el caller lo llama por ítem CUANDO
+/// cambia el contenido —no por frame— y cachea el resultado, luego pasa los
+/// `offsets` a `lazy_list_varied`. Devuelve `0.0` si el layout falla.
+pub fn measured_height<Msg: Clone>(view: View<Msg>, available_width: f32) -> f32 {
+    let mut lt = LayoutTree::new();
+    let m = mount(&mut lt, view);
+    MEASURE_TS.with(|cell| {
+        let mut slot = cell.borrow_mut();
+        let ts = slot.get_or_insert_with(llimphi_text::Typesetter::new);
+        let tmap = &m.text_measures;
+        lt.compute_with_measure(m.root, (available_width.max(0.0), 1.0e6), |nid, k, a| {
+            match tmap.get(&nid) {
+                Some(tm) => measure_text_node(ts, tm, k, a),
+                None => llimphi_layout::taffy::Size { width: 0.0, height: 0.0 },
+            }
+        })
+        .ok()
+        .and_then(|c| c.get(m.root).map(|r| r.h))
+        .unwrap_or(0.0)
+    })
 }
 
 /// Construye el `RoundedRect` del nodo respetando radio por esquina si lo
@@ -434,7 +929,7 @@ pub fn collect_filters<Msg>(
                 let rect = (r.x, r.y, r.w, r.h);
                 for op in &node.filter {
                     // `DropShadow` se pinta en vello (paint_range), no como
-                    // post-pasada GPU — la salteamos acá. Fase 7.1234.
+                    // post-pasada GPU — la salteamos aquí. Fase 7.1234.
                     if matches!(op, FilterOp::DropShadow(_)) {
                         continue;
                     }
@@ -478,6 +973,65 @@ pub(crate) fn resolve_node_transform(
     Some(Affine::translate((ox, oy)) * local * Affine::translate((-ox, -oy)))
 }
 
+/// `position: sticky` — desplazamiento `(dx, dy)` en px a aplicar al nodo para
+/// pegarlo dentro de su `scrollport` cuando el scroll (ya horneado en `r`, el
+/// rect absoluto computado) lo lleva al umbral de un inset. `insets = [top,
+/// right, bottom, left]` en px desde el borde del scrollport `sp = (x, y, w,
+/// h)`. Devuelve `(0.0, 0.0)` mientras el nodo sigue en su posición de flujo
+/// (aún no alcanzó el umbral) — cero efecto sobre nodos no-sticky.
+///
+/// El truco: como el offset de scroll ya está en `r` (puriy lo hornea en el
+/// layout, no como transform), NO hace falta conocerlo — basta comparar el rect
+/// actual contra el umbral. Vertical: `top` gana sobre `bottom` cuando ambos
+/// disparan (CSS). `top` pega el borde superior a `sp.y + top` empujando hacia
+/// abajo (dy ≥ 0); `bottom` pega el inferior a `sp.y + sp.h - bottom` empujando
+/// hacia arriba (dy ≤ 0). Horizontal análogo con left/right. v1: se clampa al
+/// umbral, NO al bloque contenedor CSS exacto (usa el scrollport). Alcanza para
+/// el caso canónico (header/columna sticky a nivel de página); un contenedor
+/// más corto que la página dejaría el sticky pegado de más.
+pub(crate) fn sticky_offset(
+    insets: [Option<f32>; 4],
+    r: llimphi_layout::Rect,
+    sp: (f32, f32, f32, f32),
+) -> (f32, f32) {
+    let (spx, spy, spw, sph) = sp;
+    // Vertical: top primero (gana), luego bottom si top no disparó.
+    let mut dy = 0.0_f32;
+    if let Some(t) = insets[0] {
+        let pin = spy + t;
+        if r.y < pin {
+            dy = pin - r.y;
+        }
+    }
+    if dy == 0.0 {
+        if let Some(b) = insets[2] {
+            let pin_bottom = spy + sph - b;
+            let cur_bottom = r.y + r.h;
+            if cur_bottom > pin_bottom {
+                dy = pin_bottom - cur_bottom;
+            }
+        }
+    }
+    // Horizontal: left primero, luego right.
+    let mut dx = 0.0_f32;
+    if let Some(l) = insets[3] {
+        let pin = spx + l;
+        if r.x < pin {
+            dx = pin - r.x;
+        }
+    }
+    if dx == 0.0 {
+        if let Some(rt) = insets[1] {
+            let pin_right = spx + spw - rt;
+            let cur_right = r.x + r.w;
+            if cur_right > pin_right {
+                dx = pin_right - cur_right;
+            }
+        }
+    }
+    (dx, dy)
+}
+
 /// Pinta el rango de nodos `[start, end)` de `mounted` en `scene`, partiendo de
 /// la transformación acumulada `base_xf`. [`paint`] lo llama con todo el árbol
 /// (`0..len`, `IDENTITY`). El rango permite **capturar un subárbol** en una
@@ -702,7 +1256,19 @@ pub fn paint_range<Msg>(
         Affine,
         Option<MaskPlacement>,
     );
-    let mut layer_stack: Vec<(usize, Option<MaskClose>)> = Vec::new();
+    // Tercer campo: `es_clip` — cuenta SOLO las capas de clip para el cap de
+    // profundidad (ver abajo). Alpha/blend/mask no cuentan (raras y someras).
+    let mut layer_stack: Vec<(usize, Option<MaskClose>, bool)> = Vec::new();
+    // Profundidad de CLIPS anidados vigente. Vello colapsa la ESCENA ENTERA
+    // (100% transparente, sin error) cuando el stack de blend/clip supera su
+    // límite (~6 capas en Iris Xe/Vulkan; medido con vim_drawer_probe
+    // PROBE_CLIPS: +2 sobre el árbol del drawer pinta, +4 vacía). Cap duro:
+    // los clips MÁS PROFUNDOS que MAX_CLIP_DEPTH no se pushean — un recorte
+    // cosmético que casi nunca recorta nada a esa altura; perderlo es
+    // invisible al lado de perder la escena completa (el bug del "cuerpo
+    // fantasma" del drawer de pata, 2026-07-15).
+    const MAX_CLIP_DEPTH: usize = 3;
+    let mut clip_depth: usize = 0;
     // Stack de transformaciones afines de subtree. Cada entrada guarda el
     // `subtree_end` y la `cur_xf` previa para restaurarla al salir del
     // subárbol. `cur_xf` es el producto acumulado de todos los `transform`
@@ -711,16 +1277,33 @@ pub fn paint_range<Msg>(
     // al previo (cero regresión).
     let mut xf_stack: Vec<(usize, Affine)> = Vec::new();
     let mut cur_xf = base_xf;
+    // Stack de scrollports para `position: sticky`: cada nodo que recorta
+    // (`clip==true`) es el scrollport de su subárbol. Un nodo sticky se pega
+    // relativo al scrollport activo (o al viewport entero si no hay ninguno).
+    // Entrada = `(subtree_end, rect_absoluto)`, restaurada al salir del subárbol.
+    let mut scrollport_stack: Vec<(usize, (f32, f32, f32, f32))> = Vec::new();
+    // Salto de subárboles "over" (View::over): índices en [idx, skip_until)
+    // no se pintan en esta pasada — los pinta `paint_over_layers` después
+    // del pase GPU. Los cierres de capas/xf pendientes se resuelven solos
+    // al retomar (los `while` de abajo drenan todo lo que quedó con
+    // `end ≤ idx`); dentro del rango salteado no se pushea nada.
+    let mut skip_until = 0usize;
     for idx in start..end {
+        if idx < skip_until {
+            continue;
+        }
         let node = &mounted.nodes[idx];
         // Cierre de capas que ya quedaron atrás (idx ≥ subtree_end). Si la
         // capa es una máscara, aplicamos su luminancia ANTES del pop.
-        while let Some(&(end, _)) = layer_stack.last() {
+        while let Some(&(end, _, _)) = layer_stack.last() {
             if idx >= end {
-                let (_, mask) = layer_stack.pop().unwrap();
+                let (_, mask, es_clip) = layer_stack.pop().unwrap();
                 if let Some((img, extra, rect, xf, placement)) = &mask {
                     paint_mask_close(scene, img, extra, *rect, *xf, *placement);
                 }
+                if es_clip {
+                    clip_depth = clip_depth.saturating_sub(1);
+                }
                 scene.pop_layer();
             } else {
                 break;
@@ -735,9 +1318,55 @@ pub fn paint_range<Msg>(
                 break;
             }
         }
+        // Salí de un scrollport al pasar su subárbol.
+        while let Some(&(end, _)) = scrollport_stack.last() {
+            if idx >= end {
+                scrollport_stack.pop();
+            } else {
+                break;
+            }
+        }
+        // Subárbol "over" (View::over): no pinta en la pasada base. SÍ
+        // pinta cuando esta llamada ARRANCA en él (idx == start) — así lo
+        // invoca `paint_over_layers`, que reusa este mismo camino para la
+        // pasada final.
+        if node.over_layer && idx != start {
+            skip_until = node.subtree_end;
+            continue;
+        }
         let Some(r) = computed.get(node.id) else {
             continue;
         };
+        // Underlay (scene-split de fantasmas): el contenido VIEJO de un
+        // switch se apendea acá — en la posición z del nodo, dentro del
+        // clip/alpha de los ancestros ya abiertos, y componiendo su afín
+        // acumulada (la subescena está en coords absolutas). Va ANTES del
+        // sticky/transform/alpha PROPIOS del nodo: esos pertenecen al
+        // contenido nuevo, no al fantasma. El envoltorio (alpha del fade +
+        // afín de salida) ya viene horneado por `prepare_underlays`.
+        if let Some(under) = &node.underlay {
+            scene.append(under, Some(cur_xf));
+        }
+        // `position: sticky`: pega el nodo dentro del scrollport activo (o el
+        // viewport entero si no hay ancestro que recorte). Se resuelve ANTES del
+        // transform CSS y de abrir el clip de este nodo, para que toda su pintura
+        // caiga en la posición pegada. El offset se compone en `cur_xf` vía el
+        // mismo stack que `transform` (se restaura al salir del subárbol).
+        if let Some(insets) = node.sticky {
+            let sp = scrollport_stack
+                .last()
+                .map(|&(_, rect)| rect)
+                .unwrap_or((0.0, 0.0, f32::MAX, f32::MAX));
+            let (dx, dy) = sticky_offset(insets, r, sp);
+            if dx != 0.0 || dy != 0.0 {
+                xf_stack.push((node.subtree_end, cur_xf));
+                cur_xf *= Affine::translate((dx as f64, dy as f64));
+            }
+        }
+        // Este nodo, si recorta, es el scrollport de sus descendientes sticky.
+        if node.clip {
+            scrollport_stack.push((node.subtree_end, (r.x, r.y, r.w, r.h)));
+        }
         // Transform CSS del nodo: se aplica alrededor del centro de su rect
         // (`transform-origin: 50% 50%`) y se compone sobre la del padre. Se
         // empuja ANTES del alpha/fill para que toda la pintura del subtree
@@ -761,7 +1390,7 @@ pub fn paint_range<Msg>(
                 (r.y + r.h) as f64,
             );
             scene.push_layer(Fill::NonZero, bm, 1.0, cur_xf, &rect);
-            layer_stack.push((node.subtree_end, None));
+            layer_stack.push((node.subtree_end, None, false));
         }
         // Alpha de subtree: push ANTES de cualquier paint de este nodo
         // para que fill/text/image/painter/children entren en la misma
@@ -779,7 +1408,7 @@ pub fn paint_range<Msg>(
                 (r.y + r.h) as f64,
             );
             scene.push_layer(Fill::NonZero, Mix::Normal, a, cur_xf, &rect);
-            layer_stack.push((node.subtree_end, None));
+            layer_stack.push((node.subtree_end, None, false));
         }
         // `mask-image` (Fase 7.1226): abrí una capa de aislamiento para el
         // subárbol del nodo. La luminancia de la máscara se aplica al CERRARLA
@@ -804,6 +1433,7 @@ pub fn paint_range<Msg>(
                     cur_xf,
                     node.mask_placement,
                 )),
+                false,
             ));
         }
         // Sombra (drop shadow): se pinta ANTES del relleno para quedar
@@ -975,7 +1605,7 @@ pub fn paint_range<Msg>(
                     text.underline,
                     text.strikethrough,
                     spans,
-                    Some(r.w),
+                    Some(r.w + TEXT_WRAP_ROUNDING_SLACK),
                     text.alignment,
                 );
                 let origin =
@@ -1007,6 +1637,7 @@ pub fn paint_range<Msg>(
                     text.weight,
                     text.underline,
                     text.strikethrough,
+                    text.font_family.as_deref(),
                 );
                 // `cur_xf *` para que el texto multicolor herede la
                 // transformación del subárbol (scroll/rotación del padre), igual
@@ -1026,7 +1657,8 @@ pub fn paint_range<Msg>(
                 // `white-space: nowrap`/`pre`: pintar en una sola línea (sin
                 // `max_width`), no envolver al ancho del rect — el texto
                 // desborda y lo recorta el `overflow` del contenedor si lo hay.
-                let paint_max_width = if text.no_wrap { None } else { Some(r.w) };
+                let paint_max_width =
+                    if text.no_wrap { None } else { Some(r.w + TEXT_WRAP_ROUNDING_SLACK) };
                 let layout = typesetter.layout_clamped(
                     &text.content,
                     text.size_px,
@@ -1043,6 +1675,9 @@ pub fn paint_range<Msg>(
                     text.letter_spacing,
                     text.word_spacing,
                     text.overflow_wrap,
+                    &text.font_features,
+                    &text.font_variations,
+                    text.font_width,
                 );
                 let origin =
                     if matches!(text.alignment, llimphi_text::Alignment::Center) {
@@ -1066,8 +1701,12 @@ pub fn paint_range<Msg>(
             // El hit-test (más abajo) usa siempre el rect completo — el clip-path
             // sólo afecta el pintado, una aproximación menor en su banda.
             // Prioridad: path > polygon > elipse > inset/rect. `pushed` queda
-            // false sólo si un path() no parsea (no se abre capa → no se cierra).
-            let mut pushed = true;
+            // false sólo si un path() no parsea (no se abre capa → no se cierra)
+            // o si el CAP de profundidad de clips está alcanzado (ver arriba:
+            // más hondo que MAX_CLIP_DEPTH vello colapsa la escena entera; un
+            // clip profundo sin pushear es cosmético, la escena viva no).
+            let mut pushed = clip_depth < MAX_CLIP_DEPTH;
+            if pushed {
             // Caja de referencia (clip-path geometry-box, Fase 7.1225): encoge
             // el rect del nodo por `clip_ref_inset` ANTES de resolver la forma,
             // así circle/ellipse/polygon/path y sus % se miden contra esa caja.
@@ -1129,14 +1768,16 @@ pub fn paint_range<Msg>(
                 );
                 scene.push_layer(Fill::NonZero, BlendMode::default(), 1.0, cur_xf, &clip_rect);
             }
+            }
             if pushed {
-                layer_stack.push((node.subtree_end, None));
+                layer_stack.push((node.subtree_end, None, true));
+                clip_depth += 1;
             }
         }
     }
-    // Cerrá capas (clip + alpha + mask) que llegaron al final sin pop
+    // Cierra capas (clip + alpha + mask) que llegaron al final sin pop
     // intermedio. Las de máscara aplican su luminancia antes del pop.
-    while let Some((_, mask)) = layer_stack.pop() {
+    while let Some((_, mask, _)) = layer_stack.pop() {
         if let Some((img, extra, rect, xf, placement)) = &mask {
             paint_mask_close(scene, img, extra, *rect, *xf, *placement);
         }
@@ -1195,11 +1836,89 @@ pub fn paint_gpu<Msg>(
 }
 
 /// `true` si algún nodo del árbol registró un `over_painter` (vello
-/// "over" vía [`View::paint_over`]). El eventloop lo usa para decidir si
-/// vale la pena montar la pasada vello final + el composite sobre la
-/// intermedia. Coste cero (loop barato) cuando nadie usa el over-layer.
+/// "over" vía [`View::paint_over`]) **o** marcó su subárbol como capa over
+/// ([`View::over`]). El eventloop lo usa para decidir si vale la pena
+/// montar la pasada vello final + el composite sobre la intermedia. Coste
+/// cero (loop barato) cuando nadie usa el over-layer.
 pub fn has_over_painter<Msg>(mounted: &Mounted<Msg>) -> bool {
-    mounted.nodes.iter().any(|n| n.over_painter.is_some())
+    mounted
+        .nodes
+        .iter()
+        .any(|n| n.over_painter.is_some() || n.over_layer)
+}
+
+/// `true` si algún nodo del árbol registró un handler de **click derecho**
+/// ([`View::on_right_click`] / [`View::on_right_click_at`]). Espejo de
+/// [`has_over_painter`], pensado para tests que verifican el wiring del menú
+/// contextual sin simular el evento real.
+pub fn has_right_click_handler<Msg>(mounted: &Mounted<Msg>) -> bool {
+    mounted
+        .nodes
+        .iter()
+        .any(|n| n.on_right_click.is_some() || n.on_right_click_at.is_some() || n.on_right_click_screen.is_some())
+}
+
+/// Pinta los **subárboles** marcados [`View::over`] en `scene`, con la
+/// maquinaria completa de `paint_range` (fills, texto, imágenes, painters,
+/// hover, clips y transforms internos). Espejo de [`paint_over`] pero para
+/// árboles de Views enteros, no closures: el caller rasteriza esta escena
+/// DESPUÉS del pase GPU y la compone sobre la intermedia. Igual que
+/// `paint_over`, no compone clips/alpha/transform de ancestros FUERA del
+/// subárbol (la capa over es contenido en coordenadas de pantalla).
+/// Devuelve `true` si pintó alguno.
+#[allow(clippy::too_many_arguments)]
+pub fn paint_over_layers<Msg>(
+    scene: &mut vello::Scene,
+    mounted: &Mounted<Msg>,
+    computed: &ComputedLayout,
+    typesetter: &mut llimphi_text::Typesetter,
+    hover_idx: Option<usize>,
+    drop_hover_idx: Option<usize>,
+) -> bool {
+    let dbg = debug_over_enabled();
+    let mut any = false;
+    let mut idx = 0;
+    let mut count = 0usize;
+    while idx < mounted.nodes.len() {
+        let node = &mounted.nodes[idx];
+        if node.over_layer {
+            if dbg {
+                let r = computed.get(node.id);
+                eprintln!(
+                    "[over] capa #{count} idx={idx} subtree_end={} rect={:?}",
+                    node.subtree_end, r
+                );
+            }
+            paint_range(
+                scene,
+                mounted,
+                computed,
+                typesetter,
+                hover_idx,
+                drop_hover_idx,
+                idx,
+                node.subtree_end,
+                Affine::IDENTITY,
+            );
+            any = true;
+            count += 1;
+            idx = node.subtree_end;
+        } else {
+            idx += 1;
+        }
+    }
+    if dbg {
+        eprintln!("[over] total capas over pintadas: {count} (nodos={})", mounted.nodes.len());
+    }
+    any
+}
+
+/// ¿Log de diagnóstico del over-layer activo? (`LLIMPHI_DEBUG_OVER=1`). Cacheado
+/// para no pagar un `env::var` por capa por frame.
+fn debug_over_enabled() -> bool {
+    use std::sync::OnceLock;
+    static D: OnceLock<bool> = OnceLock::new();
+    *D.get_or_init(|| std::env::var("LLIMPHI_DEBUG_OVER").is_ok())
 }
 
 /// Pinta la pasada vello "over" en `scene`: recorre el árbol en orden
@@ -1264,6 +1983,18 @@ where
     F: Fn(&MountedNode<Msg>) -> bool,
 {
     let mut hit: Option<usize> = None;
+    // Segundo candidato, para los subárboles [`View::over`]: `paint` los SALTA
+    // y `paint_over_layers` los pinta DESPUÉS, así que quedan encima de todo lo
+    // demás aunque su lugar en el árbol sea anterior. Sin esto, un nodo base
+    // posterior en orden de árbol le roba el click a un botón que el usuario ve
+    // arriba (caso real: la barra de control de media es `.over(true)`).
+    // El z efectivo es: [nodos normales, orden de árbol] < [capas over, orden de
+    // árbol], así que basta un candidato aparte y preferirlo al final. Las capas
+    // over anidadas las pinta la externa (`paint_over_layers` salta a
+    // `subtree_end`), o sea que no agregan un nivel de z: alcanza con saber si
+    // estamos DENTRO de alguna.
+    let mut hit_over: Option<usize> = None;
+    let mut over_end: usize = 0;
     let mut clip_stack: Vec<usize> = Vec::new();
     // Espejo del stack de transformaciones de `paint`: `cur_xf` es el
     // producto acumulado de los `transform` de los ancestros activos
@@ -1289,6 +2020,9 @@ where
             }
         }
         let node = &mounted.nodes[idx];
+        if node.over_layer && idx >= over_end {
+            over_end = node.subtree_end;
+        }
         let Some(r) = computed.get(node.id) else {
             idx += 1;
             continue;
@@ -1324,11 +2058,15 @@ where
             clip_stack.push(node.subtree_end);
         }
         if inside && pred(node) {
-            hit = Some(idx);
+            if idx < over_end {
+                hit_over = Some(idx);
+            } else {
+                hit = Some(idx);
+            }
         }
         idx += 1;
     }
-    hit
+    hit_over.or(hit)
 }
 
 /// Hit-test específico para clicks (incluye nodos draggables).
@@ -1341,6 +2079,7 @@ pub fn hit_test_click<Msg>(
     hit_test_pred(mounted, computed, x, y, |n| {
         n.on_click.is_some()
             || n.on_click_at.is_some()
+            || n.on_click_screen.is_some()
             || n.drag.is_some()
             || n.drag_at.is_some()
             || n.drag_velocity.is_some()
@@ -1358,7 +2097,7 @@ pub fn hit_test_right_click<Msg>(
     y: f32,
 ) -> Option<usize> {
     hit_test_pred(mounted, computed, x, y, |n| {
-        n.on_right_click.is_some() || n.on_right_click_at.is_some()
+        n.on_right_click.is_some() || n.on_right_click_at.is_some() || n.on_right_click_screen.is_some()
     })
 }
 
@@ -1383,6 +2122,19 @@ pub fn hit_test_hover<Msg>(
     hit_test_pred(mounted, computed, x, y, |n| n.hover_fill.is_some())
 }
 
+/// Hit-test específico para **tooltips** (nodos con `tooltip`). Separado del
+/// hover: un nodo puede declarar tooltip sin `hover_fill` (p. ej. los iconos
+/// fugaces de pata, que pintan por `paint_with` y no quieren tinte de hover) —
+/// con el predicado de hover su tooltip jamás se encontraba.
+pub fn hit_test_tooltip<Msg>(
+    mounted: &Mounted<Msg>,
+    computed: &ComputedLayout,
+    x: f32,
+    y: f32,
+) -> Option<usize> {
+    hit_test_pred(mounted, computed, x, y, |n| n.tooltip.is_some())
+}
+
 /// Hit-test para movimiento posicional del cursor (nodos con
 /// `on_pointer_move_at`). El runtime lo invoca en cada `CursorMoved` para
 /// reportar la posición local al nodo más al frente que lo declare.
@@ -1501,7 +2253,7 @@ pub fn hit_test_scroll_chain<Msg>(
             }
             clip_stack.push(node.subtree_end);
         }
-        if inside && node.on_scroll.is_some() {
+        if inside && (node.on_scroll.is_some() || node.on_scroll_take.is_some()) {
             chain.push(idx);
         }
         idx += 1;
@@ -1512,6 +2264,61 @@ pub fn hit_test_scroll_chain<Msg>(
     chain
 }
 
+/// Reparte un evento de rueda a lo largo de la cadena de scroll (front→back,
+/// de [`hit_test_scroll_chain`]). Para cada nodo:
+///
+/// - con [`on_scroll_take`](crate::View::on_scroll_take): consume lo que
+///   puede y el **sobrante** sigue al próximo de la cadena — un mismo evento
+///   puede mover al hijo hasta su tope Y al ancestro con el resto;
+/// - con `on_scroll` clásico: semántica histórica — `Some` consume TODO lo
+///   restante y corta; `None` deja pasar el delta completo.
+///
+/// Devuelve los `Msg` en orden (el runtime los aplica en secuencia sobre el
+/// `update`). Vacío = nadie consumió (el evento cae al `on_wheel` global).
+/// Pura respecto del árbol: no muta nada, testeable headless.
+pub fn consume_scroll_chain<Msg>(
+    mounted: &Mounted<Msg>,
+    chain: &[usize],
+    dx: f32,
+    dy: f32,
+) -> Vec<Msg> {
+    const EPS: f32 = 1e-4;
+    let mut msgs = Vec::new();
+    let (mut rx, mut ry) = (dx, dy);
+    for &idx in chain {
+        if rx.abs() <= EPS && ry.abs() <= EPS {
+            break;
+        }
+        let node = &mounted.nodes[idx];
+        if let Some(take) = &node.on_scroll_take {
+            let (msg, nx, ny) = take(rx, ry);
+            if let Some(m) = msg {
+                msgs.push(m);
+            }
+            // Defensa: un handler no puede "crear" delta ni invertir su
+            // signo — el sobrante se acota al delta que recibió.
+            rx = clamp_rest(nx, rx);
+            ry = clamp_rest(ny, ry);
+        } else if let Some(h) = &node.on_scroll {
+            if let Some(m) = h(rx, ry) {
+                msgs.push(m);
+                break;
+            }
+        }
+    }
+    msgs
+}
+
+/// Acota el sobrante declarado por un handler al rango `[0, delta]` (con el
+/// signo del delta): ni negativo del otro lado, ni mayor que lo recibido.
+fn clamp_rest(rest: f32, delta: f32) -> f32 {
+    if delta >= 0.0 {
+        rest.clamp(0.0, delta)
+    } else {
+        rest.clamp(delta, 0.0)
+    }
+}
+
 /// Hit-test específico para gestos de **escala** (pinch-to-zoom): el nodo más
 /// al frente bajo el punto que declaró un `on_scale`. Como un hijo sin handler
 /// no matchea el predicado, el gesto "cae" al ancestro más cercano que lo
@@ -1649,6 +2456,1004 @@ pub fn next_focus(order: &[u64], current: Option<u64>, reverse: bool) -> Option<
     Some(order[next_idx])
 }
 
+// ─────────────────────────────────────────────────────────────────────────
+// RepaintBoundary — caché de rasterización de subárboles (Bloque 23 de
+// PLAN-NUCLEO-RETENIDO.md). Ver `View::repaint_boundary`.
+//
+// Diseño *fail-safe*: `paint_range` queda INTACTO (cero regresión para todo el
+// que no use boundaries). Toda la lógica vive en `paint_cached`, un wrapper que
+// pinta los tramos no-boundary con el mismo `paint_range` de siempre e intercala
+// el append (cacheado o fresco) de cada boundary. Ante cualquier duda sobre si
+// un subárbol es cacheable, se pinta fresco → nunca produce un frame incorrecto.
+// ─────────────────────────────────────────────────────────────────────────
+
+/// Caché de rasterización de los [`View::repaint_boundary`]. Vive en el runtime
+/// entre frames. Cada entrada guarda la sub-escena vello del subárbol en coords
+/// **locales** al origen del boundary + un hash de su contenido; mientras el
+/// hash no cambie se reusa (`scene.append` trasladado al origen actual), así
+/// sobrevive a un scroll/translación del subárbol sin re-pintar.
+#[derive(Default)]
+pub struct RepaintCache {
+    entries: HashMap<u64, CachedBoundary>,
+    seen: std::collections::HashSet<u64>,
+    /// Aciertos de caché acumulados (telemetría / tests).
+    pub hits: u64,
+    /// Fallos de caché acumulados (telemetría / tests).
+    pub misses: u64,
+}
+
+struct CachedBoundary {
+    scene: vello::Scene,
+    hash: u64,
+}
+
+impl RepaintCache {
+    pub fn new() -> Self {
+        Self::default()
+    }
+    /// Entradas vivas.
+    pub fn len(&self) -> usize {
+        self.entries.len()
+    }
+    pub fn is_empty(&self) -> bool {
+        self.entries.is_empty()
+    }
+    /// Vacía el caché (p. ej. al cambiar el viewport o el tema).
+    pub fn clear(&mut self) {
+        self.entries.clear();
+        self.seen.clear();
+    }
+    fn begin_frame(&mut self) {
+        self.seen.clear();
+    }
+    /// Descarta las entradas cuyo boundary no apareció este frame.
+    fn gc(&mut self) {
+        let seen = &self.seen;
+        self.entries.retain(|k, _| seen.contains(k));
+    }
+}
+
+/// `true` si algún nodo del árbol declara `repaint_boundary` (el runtime lo usa
+/// para decidir si vale la pena `paint_cached` o alcanza con `paint`).
+pub fn has_repaint_boundary<Msg>(mounted: &Mounted<Msg>) -> bool {
+    mounted.nodes.iter().any(|n| n.repaint_boundary.is_some())
+}
+
+/// ¿El nodo abre una capa vello / transform / scrollport que un `scene.append`
+/// trasladado NO podría reproducir si fuera ancestro de un boundary? Si es
+/// ancestro de un boundary, ese boundary NO está en posición "limpia".
+fn opens_layer<Msg>(n: &MountedNode<Msg>) -> bool {
+    n.clip
+        || n.alpha.is_some()
+        || n.blend.is_some()
+        || n.transform.is_some()
+        || n.transform_rel.is_some()
+        || n.mask_image.is_some()
+        || n.sticky.is_some()
+        || n.over_layer
+        || n.clip_inset.is_some()
+        || n.clip_ellipse.is_some()
+        || n.clip_polygon.is_some()
+        || n.clip_path_svg.is_some()
+        || n.clip_ref_inset.is_some()
+}
+
+/// Recolecta los `repaint_boundary` en posición **limpia** (sin capa ancestral
+/// abierta), en pre-orden. Un boundary bajo un transform/clip/alpha NO se
+/// recolecta → cae a un tramo normal y se pinta fresco.
+fn collect_clean_boundaries<Msg>(mounted: &Mounted<Msg>) -> Vec<(usize, usize, u64)> {
+    let mut out = Vec::new();
+    let mut layer_ends: Vec<usize> = Vec::new();
+    for idx in 0..mounted.nodes.len() {
+        while layer_ends.last().is_some_and(|&e| idx >= e) {
+            layer_ends.pop();
+        }
+        let node = &mounted.nodes[idx];
+        if let Some(key) = node.repaint_boundary {
+            if layer_ends.is_empty() {
+                out.push((idx, node.subtree_end, key));
+            }
+        }
+        // El propio boundary puede abrir su capa (clip/alpha propios): se registra
+        // DESPUÉS de recolectarlo (su capa es interna a su sub-escena).
+        if opens_layer(node) {
+            layer_ends.push(node.subtree_end);
+        }
+    }
+    out
+}
+
+/// ¿El subárbol `[idx, end)` es cacheable? Paint-puro (sin closures de pintado
+/// ni contenido dinámico) y sin el nodo hovereado/drop adentro. Conservador:
+/// ante la duda `false` (se pinta fresco). Gradiente/imagen/máscara quedan fuera
+/// en v1 (no se hashean de forma barata) — follow-up.
+fn boundary_cacheable<Msg>(
+    mounted: &Mounted<Msg>,
+    idx: usize,
+    end: usize,
+    hover_idx: Option<usize>,
+    drop_hover_idx: Option<usize>,
+) -> bool {
+    if hover_idx.is_some_and(|h| h >= idx && h < end) {
+        return false;
+    }
+    if drop_hover_idx.is_some_and(|d| d >= idx && d < end) {
+        return false;
+    }
+    mounted.nodes[idx..end].iter().all(|n| {
+        n.painter.is_none()
+            && n.gpu_painter.is_none()
+            && n.over_painter.is_none()
+            && n.fill_gradient.is_none()
+            && n.image.is_none()
+            && n.mask_image.is_none()
+            && n.anim.is_none()
+            && n.ripple.is_none()
+            && n.hero.is_none()
+    })
+}
+
+fn hash_color(c: &Color, h: &mut impl Hasher) {
+    for comp in c.components {
+        comp.to_bits().hash(h);
+    }
+}
+
+/// Hash del contenido pintable del subárbol `[idx, end)`, con los rects
+/// **relativos al origen** — así una traslación pura del boundary (scroll) deja
+/// el hash igual y es cache-hit. Cubre las variantes que `boundary_cacheable`
+/// deja pasar (fill/text/borde/sombra/radio/alpha/clip/transform propios).
+fn boundary_hash<Msg>(
+    mounted: &Mounted<Msg>,
+    computed: &ComputedLayout,
+    idx: usize,
+    end: usize,
+    origin: (f32, f32),
+) -> u64 {
+    let mut h = std::collections::hash_map::DefaultHasher::new();
+    (end - idx).hash(&mut h);
+    for i in idx..end {
+        let n = &mounted.nodes[i];
+        match computed.get(n.id) {
+            Some(r) => {
+                (r.x - origin.0).to_bits().hash(&mut h);
+                (r.y - origin.1).to_bits().hash(&mut h);
+                r.w.to_bits().hash(&mut h);
+                r.h.to_bits().hash(&mut h);
+            }
+            None => u32::MAX.hash(&mut h),
+        }
+        n.fill.is_some().hash(&mut h);
+        if let Some(c) = &n.fill {
+            hash_color(c, &mut h);
+        }
+        n.radius.to_bits().hash(&mut h);
+        if let Some(cr) = &n.corner_radii {
+            for v in [cr.top_left, cr.top_right, cr.bottom_right, cr.bottom_left] {
+                v.to_bits().hash(&mut h);
+            }
+        }
+        if let Some(b) = &n.border {
+            b.width.to_bits().hash(&mut h);
+            hash_color(&b.color, &mut h);
+        }
+        if let Some(s) = &n.shadow {
+            hash_color(&s.color, &mut h);
+            s.blur.to_bits().hash(&mut h);
+            s.spread.to_bits().hash(&mut h);
+            s.dx.to_bits().hash(&mut h);
+            s.dy.to_bits().hash(&mut h);
+        }
+        if let Some(a) = n.alpha {
+            a.to_bits().hash(&mut h);
+        }
+        n.clip.hash(&mut h);
+        if let Some(t) = n.transform {
+            for c in t.as_coeffs() {
+                c.to_bits().hash(&mut h);
+            }
+        }
+        if let Some((x, y)) = n.transform_rel {
+            x.to_bits().hash(&mut h);
+            y.to_bits().hash(&mut h);
+        }
+        if let Some(t) = &n.text {
+            t.content.hash(&mut h);
+            t.size_px.to_bits().hash(&mut h);
+            hash_color(&t.color, &mut h);
+            t.weight.to_bits().hash(&mut h);
+            t.line_height.to_bits().hash(&mut h);
+            t.italic.hash(&mut h);
+            (t.alignment as u8).hash(&mut h);
+        }
+    }
+    h.finish()
+}
+
+/// Como [`paint`], pero **cachea la rasterización** de los subárboles marcados
+/// con [`View::repaint_boundary`] que estén en posición limpia y sean
+/// paint-puros. El resto del árbol (y los boundaries no cacheables) se pinta
+/// idéntico a `paint`. Si el árbol no tiene boundaries, delega en `paint` —
+/// coste ~0.
+pub fn paint_cached<Msg>(
+    scene: &mut vello::Scene,
+    mounted: &Mounted<Msg>,
+    computed: &ComputedLayout,
+    typesetter: &mut llimphi_text::Typesetter,
+    hover_idx: Option<usize>,
+    drop_hover_idx: Option<usize>,
+    cache: &mut RepaintCache,
+) {
+    cache.begin_frame();
+    let boundaries = collect_clean_boundaries(mounted);
+    if boundaries.is_empty() {
+        cache.gc();
+        paint(scene, mounted, computed, typesetter, hover_idx, drop_hover_idx);
+        return;
+    }
+    let n = mounted.nodes.len();
+    let mut cursor = 0usize;
+    for (bidx, bend, key) in boundaries {
+        // Subsumido por un boundary externo ya procesado.
+        if bidx < cursor {
+            continue;
+        }
+        // Tramo previo al boundary: pintura normal.
+        if cursor < bidx {
+            paint_range(
+                scene, mounted, computed, typesetter, hover_idx, drop_hover_idx, cursor, bidx,
+                Affine::IDENTITY,
+            );
+        }
+        let origin = computed
+            .get(mounted.nodes[bidx].id)
+            .map(|r| (r.x, r.y))
+            .unwrap_or((0.0, 0.0));
+        if boundary_cacheable(mounted, bidx, bend, hover_idx, drop_hover_idx) {
+            let hash = boundary_hash(mounted, computed, bidx, bend, origin);
+            let hit = cache
+                .entries
+                .get(&key)
+                .is_some_and(|c| c.hash == hash);
+            if hit {
+                cache.hits += 1;
+            } else {
+                cache.misses += 1;
+                // Rasterizá el subárbol a una sub-escena en coords LOCALES.
+                let mut sub = vello::Scene::new();
+                paint_range(
+                    &mut sub, mounted, computed, typesetter, hover_idx, drop_hover_idx, bidx, bend,
+                    Affine::translate((-origin.0 as f64, -origin.1 as f64)),
+                );
+                cache.entries.insert(key, CachedBoundary { scene: sub, hash });
+            }
+            cache.seen.insert(key);
+            // Append trasladado al origen actual (sobrevive al scroll).
+            if let Some(c) = cache.entries.get(&key) {
+                scene.append(
+                    &c.scene,
+                    Some(Affine::translate((origin.0 as f64, origin.1 as f64))),
+                );
+            }
+        } else {
+            // No cacheable → fresco inline (idéntico a `paint`).
+            paint_range(
+                scene, mounted, computed, typesetter, hover_idx, drop_hover_idx, bidx, bend,
+                Affine::IDENTITY,
+            );
+        }
+        cursor = bend;
+    }
+    // Cola tras el último boundary.
+    if cursor < n {
+        paint_range(
+            scene, mounted, computed, typesetter, hover_idx, drop_hover_idx, cursor, n,
+            Affine::IDENTITY,
+        );
+    }
+    cache.gc();
+}
+
+#[cfg(test)]
+mod bloque25_harness {
+    //! Arnés del Bloque 25 (memo, enfoque A): genera árboles con nodos `memo`,
+    //! los muta, y verifica que el camino memoizado (`take_memo_builders` + mount
+    //! + compute + `splice_memos`) da **exactamente el mismo `Mounted`** (rects,
+    //! nodo a nodo en pre-orden) que el camino fresco (memo expandido inline).
+    //! Como los memos NO tocados no re-buildean, también ejercita el reuso.
+    use super::*;
+    use crate::{mount, View};
+    use llimphi_layout::taffy::prelude::*;
+    use llimphi_layout::LayoutTree;
+    use std::hash::{Hash, Hasher};
+
+    struct Rng(u64);
+    impl Rng {
+        fn next(&mut self) -> u64 {
+            let mut x = self.0;
+            x ^= x << 13;
+            x ^= x >> 7;
+            x ^= x << 17;
+            self.0 = x;
+            x
+        }
+        fn range(&mut self, n: usize) -> usize {
+            (self.next() % (n as u64).max(1)) as usize
+        }
+    }
+
+    #[derive(Clone)]
+    enum Spec {
+        Leaf { w: f32, h: f32, text: Option<String> },
+        Row(Vec<Spec>),
+        Col(Vec<Spec>),
+        /// Nodo memo de tamaño definido `w×h` envolviendo `content` (sin memos
+        /// anidados en v1). `deps` se deriva de `content` en `build`.
+        Memo { key: u64, w: f32, h: f32, content: Box<Spec> },
+    }
+
+    fn spec_hash(s: &Spec) -> u64 {
+        let mut h = std::collections::hash_map::DefaultHasher::new();
+        fn go(s: &Spec, h: &mut impl Hasher) {
+            match s {
+                Spec::Leaf { w, h: hh, text } => {
+                    0u8.hash(h);
+                    w.to_bits().hash(h);
+                    hh.to_bits().hash(h);
+                    text.hash(h);
+                }
+                Spec::Row(k) => {
+                    1u8.hash(h);
+                    for c in k {
+                        go(c, h);
+                    }
+                }
+                Spec::Col(k) => {
+                    2u8.hash(h);
+                    for c in k {
+                        go(c, h);
+                    }
+                }
+                Spec::Memo { key, w, h: hh, content } => {
+                    3u8.hash(h);
+                    key.hash(h);
+                    w.to_bits().hash(h);
+                    hh.to_bits().hash(h);
+                    go(content, h);
+                }
+            }
+        }
+        go(s, &mut h);
+        h.finish()
+    }
+
+    fn gen(rng: &mut Rng, depth: usize, allow_memo: bool, next_key: &mut u64) -> Spec {
+        if depth == 0 || rng.range(100) < 35 {
+            let text = if rng.range(2) == 0 {
+                Some(format!("n{}", rng.range(1000)))
+            } else {
+                None
+            };
+            Spec::Leaf {
+                w: 20.0 + rng.range(60) as f32,
+                h: 12.0 + rng.range(30) as f32,
+                text,
+            }
+        } else if allow_memo && rng.range(100) < 35 {
+            let content = gen(rng, depth - 1, false, next_key);
+            let key = *next_key;
+            *next_key += 1;
+            Spec::Memo {
+                key,
+                w: 120.0 + rng.range(120) as f32,
+                h: 120.0 + rng.range(120) as f32,
+                content: Box::new(content),
+            }
+        } else {
+            let n = 1 + rng.range(3);
+            let kids = (0..n).map(|_| gen(rng, depth - 1, allow_memo, next_key)).collect();
+            if rng.range(2) == 0 {
+                Spec::Row(kids)
+            } else {
+                Spec::Col(kids)
+            }
+        }
+    }
+
+    /// Muta manteniendo la forma (cambia valores; a veces el contenido de un memo
+    /// → su `deps` cambia → rebuild; a veces no → reuso).
+    fn mutate(s: &mut Spec, rng: &mut Rng) {
+        match s {
+            Spec::Leaf { w, h, text } => match rng.range(4) {
+                0 => *w = 20.0 + rng.range(60) as f32,
+                1 => *h = 12.0 + rng.range(30) as f32,
+                2 => *text = Some(format!("m{}", rng.range(1000))),
+                _ => {}
+            },
+            Spec::Row(k) | Spec::Col(k) => {
+                for c in k {
+                    mutate(c, rng);
+                }
+            }
+            Spec::Memo { content, .. } => {
+                // 50% muta el contenido (→ rebuild), 50% lo deja (→ reuso).
+                if rng.range(2) == 0 {
+                    mutate(content, rng);
+                }
+            }
+        }
+    }
+
+    fn build(s: &Spec, memoize: bool) -> View<()> {
+        match s {
+            Spec::Leaf { w, h, text } => {
+                let st = Style {
+                    size: Size {
+                        width: length(*w),
+                        height: if text.is_some() { auto() } else { length(*h) },
+                    },
+                    flex_shrink: 0.0,
+                    ..Default::default()
+                };
+                let v = View::<()>::new(st);
+                match text {
+                    Some(t) => v.text(t.clone(), 14.0, Color::WHITE),
+                    None => v,
+                }
+            }
+            Spec::Row(k) | Spec::Col(k) => {
+                let row = matches!(s, Spec::Row(_));
+                View::<()>::new(Style {
+                    flex_direction: if row {
+                        FlexDirection::Row
+                    } else {
+                        FlexDirection::Column
+                    },
+                    ..Default::default()
+                })
+                .children(k.iter().map(|c| build(c, memoize)).collect())
+            }
+            Spec::Memo { key, w, h, content } => {
+                let st = Style {
+                    size: Size { width: length(*w), height: length(*h) },
+                    flex_shrink: 0.0,
+                    ..Default::default()
+                };
+                if memoize {
+                    let c = (**content).clone();
+                    let deps = spec_hash(content);
+                    View::<()>::new(st).memo(*key, deps, move || {
+                        MEMO_BUILDS.fetch_add(1, std::sync::atomic::Ordering::Relaxed);
+                        build(&c, true)
+                    })
+                } else {
+                    View::<()>::new(st).children(vec![build(content, false)])
+                }
+            }
+        }
+    }
+
+    fn fake_measure(
+        tm: &TextMeasure,
+        known: Size<Option<f32>>,
+        avail: Size<AvailableSpace>,
+    ) -> Size<f32> {
+        let chars = tm.content.chars().count().max(1) as f32;
+        let gw = tm.size_px * 0.5;
+        let ideal = chars * gw;
+        let maxw = match known.width {
+            Some(w) => w,
+            None => match avail.width {
+                AvailableSpace::Definite(w) => w,
+                AvailableSpace::MaxContent => f32::INFINITY,
+                AvailableSpace::MinContent => gw,
+            },
+        };
+        let w = ideal.min(maxw).max(gw);
+        let lines = if w > 0.0 { (ideal / w).ceil().max(1.0) } else { 1.0 };
+        Size {
+            width: w,
+            height: lines * tm.size_px * tm.line_height.max(1.0),
+        }
+    }
+
+    static MEMO_BUILDS: std::sync::atomic::AtomicU64 = std::sync::atomic::AtomicU64::new(0);
+
+    #[test]
+    fn memo_igual_a_fresco_fuzz() {
+        use std::sync::atomic::Ordering;
+        MEMO_BUILDS.store(0, Ordering::Relaxed);
+        let mut opportunities = 0u64;
+        for seed in 0..40u64 {
+            opportunities += run_seed(0xD1B5_4A32_D192_ED03 ^ seed.wrapping_mul(0x100_0193));
+        }
+        let builds = MEMO_BUILDS.load(Ordering::Relaxed);
+        // Correctitud ya asertada dentro de run_seed. Aquí probamos el REUSO: el
+        // builder se llamó MENOS veces que oportunidades (markers·frames) → hubo
+        // memos reusados sin reconstruir; y >0 → los cambios sí rebuildean.
+        assert!(builds > 0, "algún memo debe rebuildear (builds={builds})");
+        assert!(
+            builds < opportunities,
+            "el reuso debe ocurrir (builds={builds} de {opportunities} oportunidades)"
+        );
+        println!("[bloque25] seeds=40 builds={builds}/{opportunities} oportunidades (resto reusado); rects == fresco (±1px)");
+    }
+
+    /// Devuelve la cantidad de oportunidades de memo (Σ markers por frame).
+    fn run_seed(seed: u64) -> u64 {
+        let mut rng = Rng(seed | 1);
+        let mut next_key = 1u64;
+        let mut spec = gen(&mut rng, 5, true, &mut next_key);
+        let mut reg: MemoRegistry<()> = MemoRegistry::new();
+        let vp = (900.0, 700.0);
+        let mut opportunities = 0u64;
+
+        for frame in 0..60 {
+            if frame > 0 {
+                mutate(&mut spec, &mut rng);
+            }
+            // Fresco: memos expandidos inline.
+            let mut ft = LayoutTree::new();
+            let mf = mount(&mut ft, build(&spec, false));
+            let cf = {
+                let tm = &mf.text_measures;
+                ft.compute_with_measure(mf.root, vp, |nid, k, a| match tm.get(&nid) {
+                    Some(t) => fake_measure(t, k, a),
+                    None => Size { width: 0.0, height: 0.0 },
+                })
+                .unwrap()
+            };
+            // Memoizado.
+            let mut vm = build(&spec, true);
+            let mut pending = Vec::new();
+            take_memo_builders(&mut vm, &mut pending);
+            opportunities += pending.len() as u64;
+            let mut mt = LayoutTree::new();
+            let mut mm = mount(&mut mt, vm);
+            let mut cm = {
+                let tm = &mm.text_measures;
+                mt.compute_with_measure(mm.root, vp, |nid, k, a| match tm.get(&nid) {
+                    Some(t) => fake_measure(t, k, a),
+                    None => Size { width: 0.0, height: 0.0 },
+                })
+                .unwrap()
+            };
+            splice_memos(&mut mm, &mut cm, &pending, &mut reg, fake_measure);
+
+            // Tolerancia 1px: taffy redondea el layout a píxel de forma
+            // DEPENDIENTE de la posición absoluta (alinea bordes a la grilla). El
+            // subárbol aislado se computa en base-0 y se offsetea, así que su
+            // redondeo puede diferir del fresco (computado en la posición real)
+            // por ≤1px en tamaños. Es acotado, invisible, y CONSISTENTE en una
+            // app real (siempre se usa el camino memo, nunca se alterna con el
+            // fresco → sin jitter). La ESTRUCTURA y las posiciones coinciden.
+            let tol = 1.01_f32;
+            let mut mismatch = mf.nodes.len() != mm.nodes.len();
+            if !mismatch {
+                for i in 0..mf.nodes.len() {
+                    let a = cf.get(mf.nodes[i].id).unwrap();
+                    let b = cm.get(mm.nodes[i].id).unwrap();
+                    if (a.x - b.x).abs() > tol
+                        || (a.y - b.y).abs() > tol
+                        || (a.w - b.w).abs() > tol
+                        || (a.h - b.h).abs() > tol
+                    {
+                        mismatch = true;
+                        break;
+                    }
+                }
+            }
+            if mismatch && std::env::var("MEMO_DEBUG").is_ok() {
+                eprintln!("### seed={seed:#x} frame={frame} ###");
+                eprintln!("--- FRESCO ({} nodos) ---", mf.nodes.len());
+                for (i, n) in mf.nodes.iter().enumerate() {
+                    eprintln!("  {i}: memo_ref={:?} end={} rect={:?}", n.memo_ref, n.subtree_end, cf.get(n.id));
+                }
+                eprintln!("--- MEMO ({} nodos) ---", mm.nodes.len());
+                for (i, n) in mm.nodes.iter().enumerate() {
+                    eprintln!("  {i}: memo_ref={:?} end={} rect={:?}", n.memo_ref, n.subtree_end, cm.get(n.id));
+                }
+                panic!("dump");
+            }
+            assert!(!mismatch, "seed {seed:#x} frame {frame}: memo != fresco");
+        }
+        opportunities
+    }
+}
+
+#[cfg(test)]
+mod bloque24_harness {
+    //! Arnés de equivalencia del Bloque 24: genera árboles al azar, los muta
+    //! (estilo, texto, estructura) y verifica que `mount_incremental` (retenido)
+    //! da **exactamente los mismos rects** que `mount` fresco, frame a frame.
+    //! Es la red de seguridad ANTES de cablear el layout retenido a la ruta
+    //! caliente. La medida es falsa pero DETERMINISTA y depende del texto, así
+    //! que si el reuso no marcara dirty un texto cambiado, los rects diferirían
+    //! y el test fallaría.
+    use super::*;
+    use crate::{mount, View};
+    use llimphi_layout::taffy::prelude::*;
+    use llimphi_layout::LayoutTree;
+
+    struct Rng(u64);
+    impl Rng {
+        fn next(&mut self) -> u64 {
+            let mut x = self.0;
+            x ^= x << 13;
+            x ^= x >> 7;
+            x ^= x << 17;
+            self.0 = x;
+            x
+        }
+        fn range(&mut self, n: usize) -> usize {
+            (self.next() % (n as u64).max(1)) as usize
+        }
+    }
+
+    #[derive(Clone)]
+    enum Spec {
+        Leaf { w: f32, h: f32, text: Option<String> },
+        Row(Vec<Spec>),
+        Col(Vec<Spec>),
+    }
+
+    fn gen_spec(rng: &mut Rng, depth: usize) -> Spec {
+        if depth == 0 || rng.range(100) < 40 {
+            let text = if rng.range(2) == 0 {
+                Some(format!("n{}", rng.range(1000)))
+            } else {
+                None
+            };
+            Spec::Leaf {
+                w: 20.0 + rng.range(80) as f32,
+                h: 12.0 + rng.range(40) as f32,
+                text,
+            }
+        } else {
+            let n = 1 + rng.range(4);
+            let kids = (0..n).map(|_| gen_spec(rng, depth - 1)).collect();
+            if rng.range(2) == 0 {
+                Spec::Row(kids)
+            } else {
+                Spec::Col(kids)
+            }
+        }
+    }
+
+    /// Muta manteniendo la FORMA (child-counts) → ejercita el camino de reuso.
+    fn mutate_style(s: &mut Spec, rng: &mut Rng) {
+        match s {
+            Spec::Leaf { w, h, text } => match rng.range(4) {
+                0 => *w = 20.0 + rng.range(80) as f32,
+                1 => *h = 12.0 + rng.range(40) as f32,
+                2 => *text = Some(format!("m{}", rng.range(1000))),
+                _ => {}
+            },
+            Spec::Row(k) | Spec::Col(k) => {
+                for c in k {
+                    mutate_style(c, rng);
+                }
+            }
+        }
+    }
+
+    /// Cambia la FORMA (agrega/quita hijos) → fuerza el camino fresco.
+    fn mutate_structure(s: &mut Spec, rng: &mut Rng) {
+        match s {
+            Spec::Leaf { .. } => *s = gen_spec(rng, 3),
+            Spec::Row(k) | Spec::Col(k) => {
+                if k.len() > 1 && rng.range(2) == 0 {
+                    let i = rng.range(k.len());
+                    k.remove(i);
+                } else {
+                    let i = rng.range(k.len() + 1);
+                    k.insert(i, gen_spec(rng, 2));
+                }
+            }
+        }
+    }
+
+    fn build(s: &Spec) -> View<()> {
+        match s {
+            Spec::Leaf { w, h, text } => {
+                let st = Style {
+                    size: Size {
+                        width: length(*w),
+                        height: if text.is_some() { auto() } else { length(*h) },
+                    },
+                    flex_shrink: 0.0,
+                    ..Default::default()
+                };
+                let v = View::<()>::new(st);
+                match text {
+                    Some(t) => v.text(t.clone(), 14.0, Color::WHITE),
+                    None => v,
+                }
+            }
+            Spec::Row(k) | Spec::Col(k) => {
+                let row = matches!(s, Spec::Row(_));
+                View::<()>::new(Style {
+                    flex_direction: if row {
+                        FlexDirection::Row
+                    } else {
+                        FlexDirection::Column
+                    },
+                    ..Default::default()
+                })
+                .children(k.iter().map(build).collect())
+            }
+        }
+    }
+
+    /// Medida FALSA pero determinista: ancho ∝ nº de chars, alto por wrapping.
+    /// Depende del contenido → un cambio de texto altera la medida.
+    fn fake_measure(
+        tmap: &std::collections::HashMap<NodeId, TextMeasure>,
+        nid: NodeId,
+        known: Size<Option<f32>>,
+        avail: Size<AvailableSpace>,
+    ) -> Size<f32> {
+        let Some(tm) = tmap.get(&nid) else {
+            return Size { width: 0.0, height: 0.0 };
+        };
+        let chars = tm.content.chars().count().max(1) as f32;
+        let gw = tm.size_px * 0.5;
+        let ideal = chars * gw;
+        let maxw = match known.width {
+            Some(w) => w,
+            None => match avail.width {
+                AvailableSpace::Definite(w) => w,
+                AvailableSpace::MaxContent => f32::INFINITY,
+                AvailableSpace::MinContent => gw,
+            },
+        };
+        let w = ideal.min(maxw).max(gw);
+        let lines = if w > 0.0 { (ideal / w).ceil().max(1.0) } else { 1.0 };
+        Size {
+            width: w,
+            height: lines * tm.size_px * tm.line_height.max(1.0),
+        }
+    }
+
+    #[test]
+    fn retenido_igual_a_fresco_fuzz() {
+        // Muchas semillas → árboles y secuencias de mutación variados.
+        let mut tot_reused = 0u32;
+        let mut tot_fresh = 0u32;
+        for seed in 0..40u64 {
+            let (r, f) = run_seed(0x9E37_79B9_7F4A_7C15 ^ seed.wrapping_mul(0x1000_0001B3));
+            tot_reused += r;
+            tot_fresh += f;
+        }
+        assert!(tot_reused > 30 * 40, "el reuso debe dominar (reused={tot_reused})");
+        assert!(tot_fresh > 5 * 40, "y el rebuild también (fresh={tot_fresh})");
+        println!("[bloque24] seeds=40 reused={tot_reused} fresh={tot_fresh} (todos los rects == fresco)");
+    }
+
+    fn run_seed(seed: u64) -> (u32, u32) {
+        let mut rng = Rng(seed | 1);
+        let mut spec = gen_spec(&mut rng, 4);
+        let mut ret_tree = LayoutTree::new();
+        let mut prev: Option<RetainedLayout> = None;
+        let mut reused = 0;
+        let mut fresh = 0;
+
+        for frame in 0..80 {
+            if frame > 0 {
+                if frame % 6 == 0 {
+                    mutate_structure(&mut spec, &mut rng);
+                } else {
+                    mutate_style(&mut spec, &mut rng);
+                }
+            }
+            // Viewport variable: prueba que el reuso recoge cambios de
+            // available-space (resize) aunque no marque dirty (taffy re-resuelve
+            // por cambio de espacio disponible).
+            let vp = match frame % 4 {
+                0 => (800.0, 600.0),
+                1 => (640.0, 600.0),
+                2 => (900.0, 500.0),
+                _ => (720.0, 680.0),
+            };
+
+            // Camino fresco de referencia.
+            let mut fresh_tree = LayoutTree::new();
+            let mf = mount(&mut fresh_tree, build(&spec));
+            let cf = {
+                let tf = &mf.text_measures;
+                fresh_tree
+                    .compute_with_measure(mf.root, vp, |nid, k, a| fake_measure(tf, nid, k, a))
+                    .unwrap()
+            };
+
+            // Camino retenido.
+            let (mr, retained, did_reuse) =
+                mount_incremental(&mut ret_tree, build(&spec), prev.as_ref());
+            let cr = {
+                let tr = &mr.text_measures;
+                ret_tree
+                    .compute_with_measure(mr.root, vp, |nid, k, a| fake_measure(tr, nid, k, a))
+                    .unwrap()
+            };
+            if did_reuse {
+                reused += 1;
+            } else {
+                fresh += 1;
+            }
+
+            assert_eq!(mf.nodes.len(), mr.nodes.len(), "frame {frame}: nº de nodos");
+            for i in 0..mf.nodes.len() {
+                let a = cf.get(mf.nodes[i].id).expect("rect fresco");
+                let b = cr.get(mr.nodes[i].id).expect("rect retenido");
+                assert!(
+                    (a.x - b.x).abs() < 1e-3
+                        && (a.y - b.y).abs() < 1e-3
+                        && (a.w - b.w).abs() < 1e-3
+                        && (a.h - b.h).abs() < 1e-3,
+                    "frame {frame} nodo {i} reuse={did_reuse}: fresco {a:?} != retenido {b:?}"
+                );
+            }
+            prev = Some(retained);
+        }
+        (reused, fresh)
+    }
+}
+
+#[cfg(test)]
+mod repaint_boundary_tests {
+    use super::*;
+    use crate::{mount, View};
+    use llimphi_layout::taffy::prelude::*;
+    use llimphi_layout::LayoutTree;
+
+    fn mount_compute(v: View<()>, vp: (f32, f32)) -> (Mounted<()>, ComputedLayout) {
+        let mut lt = LayoutTree::new();
+        let m = mount(&mut lt, v);
+        let c = lt.compute(m.root, vp).expect("layout");
+        (m, c)
+    }
+
+    /// Un boundary top-level se recolecta; uno bajo un `clip` no (no está limpio).
+    #[test]
+    fn recolecta_solo_boundaries_limpios() {
+        let limpio = View::<()>::new(Style::default())
+            .repaint_boundary(1)
+            .children(vec![View::new(Style::default()).fill(Color::WHITE)]);
+        let (m, _) = mount_compute(
+            View::<()>::new(Style::default()).children(vec![limpio]),
+            (200.0, 200.0),
+        );
+        assert_eq!(collect_clean_boundaries(&m).len(), 1);
+
+        // Ahora el mismo boundary DENTRO de un nodo con clip → no limpio.
+        let dentro_de_clip = View::<()>::new(Style::default()).clip(true).children(vec![
+            View::<()>::new(Style::default())
+                .repaint_boundary(2)
+                .children(vec![View::new(Style::default()).fill(Color::WHITE)]),
+        ]);
+        let (m2, _) = mount_compute(dentro_de_clip, (200.0, 200.0));
+        assert_eq!(collect_clean_boundaries(&m2).len(), 0);
+    }
+
+    /// El gate rechaza subárboles con painter / gradiente / hover adentro.
+    #[test]
+    fn gate_rechaza_no_cacheables() {
+        // painter → no cacheable.
+        let con_painter = View::<()>::new(Style::default())
+            .paint_with(|_s, _t, _r| {});
+        let (m, _) = mount_compute(
+            View::<()>::new(Style::default())
+                .repaint_boundary(1)
+                .children(vec![con_painter]),
+            (100.0, 100.0),
+        );
+        assert!(!boundary_cacheable(&m, 0, m.nodes.len(), None, None));
+
+        // Fill/texto puro → cacheable.
+        let puro = View::<()>::new(Style::default())
+            .repaint_boundary(1)
+            .fill(Color::WHITE)
+            .children(vec![View::new(Style::default()).fill(Color::BLACK)]);
+        let (m2, _) = mount_compute(puro, (100.0, 100.0));
+        assert!(boundary_cacheable(&m2, 0, m2.nodes.len(), None, None));
+        // …salvo que el hover caiga adentro.
+        assert!(!boundary_cacheable(&m2, 0, m2.nodes.len(), Some(1), None));
+    }
+
+    /// El hash es estable ante un rebuild idéntico, cambia con el fill, y NO
+    /// cambia bajo una traslación pura del boundary (rects relativos).
+    #[test]
+    fn hash_estable_sensible_y_translation_invariante() {
+        let build = |fill: Color, x: f32| {
+            View::<()>::new(Style {
+                inset: Rect { left: length(x), top: length(0.0), right: auto(), bottom: auto() },
+                position: Position::Absolute,
+                size: Size { width: length(50.0), height: length(50.0) },
+                ..Default::default()
+            })
+            .repaint_boundary(1)
+            .fill(fill)
+            .children(vec![View::new(Style {
+                size: Size { width: length(20.0), height: length(20.0) },
+                ..Default::default()
+            })
+            .fill(Color::BLACK)])
+        };
+        let vp = (300.0, 300.0);
+        let (m_a, c_a) = mount_compute(build(Color::WHITE, 0.0), vp);
+        let o_a = c_a.get(m_a.nodes[0].id).map(|r| (r.x, r.y)).unwrap();
+        let h_a = boundary_hash(&m_a, &c_a, 0, m_a.nodes.len(), o_a);
+
+        // Rebuild idéntico → mismo hash.
+        let (m_b, c_b) = mount_compute(build(Color::WHITE, 0.0), vp);
+        let o_b = c_b.get(m_b.nodes[0].id).map(|r| (r.x, r.y)).unwrap();
+        assert_eq!(h_a, boundary_hash(&m_b, &c_b, 0, m_b.nodes.len(), o_b));
+
+        // Cambió el fill → hash distinto.
+        let (m_c, c_c) = mount_compute(build(Color::from_rgba8(1, 2, 3, 255), 0.0), vp);
+        let o_c = c_c.get(m_c.nodes[0].id).map(|r| (r.x, r.y)).unwrap();
+        assert_ne!(h_a, boundary_hash(&m_c, &c_c, 0, m_c.nodes.len(), o_c));
+
+        // Trasladado 100px en x → MISMO hash (rects relativos al origen).
+        let (m_d, c_d) = mount_compute(build(Color::WHITE, 100.0), vp);
+        let o_d = c_d.get(m_d.nodes[0].id).map(|r| (r.x, r.y)).unwrap();
+        assert_eq!(h_a, boundary_hash(&m_d, &c_d, 0, m_d.nodes.len(), o_d));
+    }
+
+    /// End-to-end (CPU, sin GPU): pintar dos veces el mismo árbol con boundary
+    /// da 1 miss + 1 hit; cambiar el fill fuerza otro miss.
+    #[test]
+    fn paint_cached_hit_y_miss() {
+        let mut ts = llimphi_text::Typesetter::new();
+        let mut cache = RepaintCache::new();
+        let build = |fill: Color| {
+            View::<()>::new(Style {
+                size: Size { width: percent(1.0), height: percent(1.0) },
+                ..Default::default()
+            })
+            .children(vec![View::<()>::new(Style {
+                size: Size { width: length(80.0), height: length(80.0) },
+                ..Default::default()
+            })
+            .repaint_boundary(7)
+            .fill(fill)
+            .children(vec![View::new(Style {
+                size: Size { width: length(30.0), height: length(30.0) },
+                ..Default::default()
+            })
+            .fill(Color::BLACK)])])
+        };
+        let vp = (200.0, 200.0);
+
+        let (m1, c1) = mount_compute(build(Color::WHITE), vp);
+        let mut s1 = vello::Scene::new();
+        paint_cached(&mut s1, &m1, &c1, &mut ts, None, None, &mut cache);
+        assert_eq!((cache.hits, cache.misses), (0, 1), "primer frame = miss");
+        assert_eq!(cache.len(), 1);
+
+        // Mismo contenido → hit.
+        let (m2, c2) = mount_compute(build(Color::WHITE), vp);
+        let mut s2 = vello::Scene::new();
+        paint_cached(&mut s2, &m2, &c2, &mut ts, None, None, &mut cache);
+        assert_eq!((cache.hits, cache.misses), (1, 1), "segundo frame igual = hit");
+
+        // Cambió el fill → miss de nuevo.
+        let (m3, c3) = mount_compute(build(Color::from_rgba8(9, 9, 9, 255)), vp);
+        let mut s3 = vello::Scene::new();
+        paint_cached(&mut s3, &m3, &c3, &mut ts, None, None, &mut cache);
+        assert_eq!((cache.hits, cache.misses), (1, 2), "cambio de fill = miss");
+
+        // Un frame SIN boundary limpia el caché por GC.
+        let (m4, c4) = mount_compute(
+            View::<()>::new(Style::default()).fill(Color::WHITE),
+            vp,
+        );
+        let mut s4 = vello::Scene::new();
+        paint_cached(&mut s4, &m4, &c4, &mut ts, None, None, &mut cache);
+        assert_eq!(cache.len(), 0, "boundary ausente → GC");
+    }
+}
+
 #[cfg(test)]
 mod tests {
     use crate::{hit_test_click, mount, View};
@@ -1656,6 +3461,217 @@ mod tests {
     use llimphi_layout::{LayoutTree, Style};
     use vello::kurbo::Affine;
 
+    #[test]
+    fn sticky_top_se_pega_al_scrollport_al_pasar_el_umbral() {
+        use super::sticky_offset;
+        use llimphi_layout::Rect;
+        // Scrollport = el área de página (arranca en y=50, alto 400).
+        let sp = (0.0, 50.0, 300.0, 400.0);
+        let top = [Some(0.0), None, None, None]; // top:0 relativo al scrollport
+        // En flujo, por debajo del umbral (y=200 > 50): sin enganche.
+        let en_flujo = Rect { x: 0.0, y: 200.0, w: 300.0, h: 40.0 };
+        assert_eq!(sticky_offset(top, en_flujo, sp), (0.0, 0.0));
+        // Justo en el umbral (y == scrollport.y): sin enganche todavía.
+        let en_umbral = Rect { x: 0.0, y: 50.0, w: 300.0, h: 40.0 };
+        assert_eq!(sticky_offset(top, en_umbral, sp), (0.0, 0.0));
+        // Scrolleado por encima del umbral (y=10 < 50): se pega, dy = 50-10 = 40.
+        let scrolleado = Rect { x: 0.0, y: 10.0, w: 300.0, h: 40.0 };
+        let (dx, dy) = sticky_offset(top, scrolleado, sp);
+        assert_eq!(dx, 0.0);
+        assert!((dy - 40.0).abs() < 1e-4, "dy debe pegarlo a y=50 (dy=40), es {dy}");
+        // Aún más arriba (y=-90): dy = 50-(-90) = 140 → borde superior en 50.
+        let muy_arriba = Rect { x: 0.0, y: -90.0, w: 300.0, h: 40.0 };
+        assert!((sticky_offset(top, muy_arriba, sp).1 - 140.0).abs() < 1e-4);
+    }
+
+    #[test]
+    fn sticky_bottom_y_precedencia_top() {
+        use super::sticky_offset;
+        use llimphi_layout::Rect;
+        let sp = (0.0, 0.0, 300.0, 200.0); // scrollport 0..200 en y
+        // bottom:0 → pega el borde inferior a y=200 cuando lo pasa.
+        let bottom = [None, None, Some(0.0), None];
+        let paso = Rect { x: 0.0, y: 180.0, w: 300.0, h: 40.0 }; // bottom=220 > 200
+        let (_dx, dy) = sticky_offset(bottom, paso, sp);
+        assert!((dy - (-20.0)).abs() < 1e-4, "empuja hacia arriba 20 (bottom a 200), es {dy}");
+        // top gana sobre bottom cuando ambos disparan.
+        let ambos = [Some(0.0), None, Some(0.0), None];
+        let arriba = Rect { x: 0.0, y: -30.0, w: 300.0, h: 40.0 };
+        let (_x, dy2) = sticky_offset(ambos, arriba, sp);
+        assert!((dy2 - 30.0).abs() < 1e-4, "top gana: dy=30 (pega a y=0), es {dy2}");
+    }
+
+    #[test]
+    fn over_subtree_salta_la_base_y_pinta_en_la_pasada_over() {
+        // View::over(true): el subárbol NO pinta en la pasada base (paint) y
+        // SÍ pinta completo en la pasada over (paint_over_layers) — el
+        // contrato que permite UI encima de contenido gpu_paint_with.
+        use super::{has_over_painter, paint, paint_over_layers};
+        use std::sync::atomic::{AtomicUsize, Ordering};
+        use std::sync::Arc;
+
+        let base_hits = Arc::new(AtomicUsize::new(0));
+        let over_hits = Arc::new(AtomicUsize::new(0));
+        let (b, o) = (base_hits.clone(), over_hits.clone());
+        let sz = |w: f32, h: f32| Style {
+            size: Size { width: length(w), height: length(h) },
+            ..Default::default()
+        };
+        let tree: View<()> = View::new(sz(200.0, 200.0)).children(vec![
+            View::new(sz(100.0, 100.0))
+                .paint_with(move |_s, _t, _r| { b.fetch_add(1, Ordering::Relaxed); }),
+            View::new(sz(100.0, 100.0)).over(true).children(vec![View::new(sz(50.0, 50.0))
+                .paint_with(move |_s, _t, _r| { o.fetch_add(1, Ordering::Relaxed); })]),
+        ]);
+
+        let mut layout = LayoutTree::new();
+        let mounted = mount(&mut layout, tree);
+        assert!(has_over_painter(&mounted), "el flag over debe activar la pasada");
+        let computed = layout
+            .compute_with_measure(mounted.root, (400.0, 400.0), |_, _, _| {
+                llimphi_layout::taffy::prelude::Size::ZERO
+            })
+            .expect("layout");
+        let mut ts = llimphi_text::Typesetter::new();
+
+        // Pasada base: pinta el hermano normal, saltea el subárbol over.
+        let mut scene = vello::Scene::new();
+        paint(&mut scene, &mounted, &computed, &mut ts, None, None);
+        assert_eq!(base_hits.load(Ordering::Relaxed), 1, "el nodo normal pinta en base");
+        assert_eq!(over_hits.load(Ordering::Relaxed), 0, "el subárbol over NO pinta en base");
+
+        // Pasada over: pinta el subárbol completo (y sólo él).
+        let mut over_scene = vello::Scene::new();
+        let any = paint_over_layers(&mut over_scene, &mounted, &computed, &mut ts, None, None);
+        assert!(any, "hay un subárbol over");
+        assert_eq!(over_hits.load(Ordering::Relaxed), 1, "el subárbol over pinta en la pasada over");
+        assert_eq!(base_hits.load(Ordering::Relaxed), 1, "el normal no se repinta en over");
+    }
+
+    #[test]
+    fn dos_capas_over_hermano_y_anidada_ambas_pintan() {
+        // Estructura de media: sidebar `.over` como HERMANO, y la barra `.over`
+        // ANIDADA dentro de otro hermano (content → canvas → barra). El bug del
+        // "no se ve con el sidebar abierto" sería que `paint_over_layers`, al
+        // saltar a `subtree_end` de la primera capa, se comiera la segunda.
+        use super::{paint_over_layers};
+        use std::sync::atomic::{AtomicUsize, Ordering};
+        use std::sync::Arc;
+
+        let sidebar_hits = Arc::new(AtomicUsize::new(0));
+        let bar_hits = Arc::new(AtomicUsize::new(0));
+        let (s, b) = (sidebar_hits.clone(), bar_hits.clone());
+        let sz = |w: f32, h: f32| Style {
+            size: Size { width: length(w), height: length(h) },
+            ..Default::default()
+        };
+        // root[ sidebar(.over)[panel] , content[ canvas[ bar(.over) ] ] ]
+        let tree: View<()> = View::new(sz(400.0, 300.0)).children(vec![
+            View::new(sz(100.0, 300.0)).over(true).children(vec![
+                View::new(sz(80.0, 280.0)).paint_with(move |_s, _t, _r| {
+                    s.fetch_add(1, Ordering::Relaxed);
+                }),
+            ]),
+            View::new(sz(300.0, 300.0)).children(vec![
+                View::new(sz(300.0, 300.0)).children(vec![
+                    View::new(sz(280.0, 44.0)).over(true).paint_with(move |_s, _t, _r| {
+                        b.fetch_add(1, Ordering::Relaxed);
+                    }),
+                ]),
+            ]),
+        ]);
+
+        let mut layout = LayoutTree::new();
+        let mounted = mount(&mut layout, tree);
+        let computed = layout
+            .compute_with_measure(mounted.root, (400.0, 300.0), |_, _, _| {
+                llimphi_layout::taffy::prelude::Size::ZERO
+            })
+            .expect("layout");
+        let mut ts = llimphi_text::Typesetter::new();
+        let mut over_scene = vello::Scene::new();
+        paint_over_layers(&mut over_scene, &mounted, &computed, &mut ts, None, None);
+        assert_eq!(sidebar_hits.load(Ordering::Relaxed), 1, "la capa over del sidebar pinta");
+        assert_eq!(
+            bar_hits.load(Ordering::Relaxed),
+            1,
+            "la capa over ANIDADA (barra) también pinta — no se la come el subtree_end del sidebar"
+        );
+    }
+
+    #[test]
+    fn intrinsic_incluye_espacio_final_evita_wrap_fantasma() {
+        // Bug: un texto con ESPACIO FINAL medido a max-content (shrink-to-fit)
+        // recibía caja = ceil(width), pero parley EXCLUYE la ws de fin del
+        // `width()`. El paint re-shapea a `caja + slack` y ahí el avance del
+        // espacio SÍ cuenta → parte a una 2ª línea fantasma que la medida
+        // reservó como 1 → clip. El fix mide el intrínseco con `full_width`
+        // (incluye el espacio), así la caja es ≥ ancho+espacio y el paint no
+        // parte. Verificado end-to-end: medir a MaxContent y re-medir a
+        // Definite(caja + slack) debe dar el MISMO alto (una línea).
+        use super::{measure_text_node, TEXT_WRAP_ROUNDING_SLACK};
+        use crate::TextMeasure;
+        use llimphi_layout::taffy::{AvailableSpace, Size};
+
+        let tm = |content: &str| TextMeasure {
+            content: content.to_string(),
+            size_px: 16.0,
+            alignment: llimphi_text::Alignment::Start,
+            italic: false,
+            font_family: None,
+            line_height: 1.2,
+            weight: 400.0,
+            max_lines: None,
+            ellipsis: false,
+            underline: false,
+            strikethrough: false,
+            spans: None,
+            letter_spacing: 0.0,
+            word_spacing: 0.0,
+            no_wrap: false,
+            overflow_wrap: false,
+            font_features: String::new(),
+            font_variations: String::new(),
+            font_width: 100.0,
+        };
+        let mut ts = llimphi_text::Typesetter::new();
+        let max_content = Size {
+            width: AvailableSpace::MaxContent,
+            height: AvailableSpace::MaxContent,
+        };
+        let none = Size { width: None, height: None };
+
+        for content in ["archived mailing list ", "one two three four five ", "Houdini "] {
+            // 1) Medida intrínseca (max-content), como la usa taffy para la caja.
+            let intr = measure_text_node(&mut ts, &tm(content), none, max_content);
+            let box_w = intr.width; // ya viene ceil'd por el fix
+            // 2) Paint real: re-shape a Definite(caja + slack).
+            let painted = measure_text_node(
+                &mut ts,
+                &tm(content),
+                Size { width: Some(box_w + TEXT_WRAP_ROUNDING_SLACK), height: None },
+                Size {
+                    width: AvailableSpace::Definite(box_w + TEXT_WRAP_ROUNDING_SLACK),
+                    height: AvailableSpace::MaxContent,
+                },
+            );
+            assert!(
+                (painted.height - intr.height).abs() < 0.6,
+                "{content:?}: el paint no debe partir a 2 líneas — intr h={:.1} caja={:.1} paint h={:.1}",
+                intr.height, box_w, painted.height
+            );
+        }
+
+        // Control: SIN espacio final la caja no cambia (full_width == width).
+        let sin = measure_text_node(&mut ts, &tm("archived mailing list"), none, max_content);
+        let con = measure_text_node(&mut ts, &tm("archived mailing list "), none, max_content);
+        assert!(
+            con.width > sin.width + 1.0,
+            "el espacio final debe ensanchar la caja intrínseca: sin={:.1} con={:.1}",
+            sin.width, con.width
+        );
+    }
+
     #[test]
     fn transform_origin_fija_el_pivote() {
         // El pivote de `transform-origin` queda FIJO bajo la transformación:
@@ -1720,6 +3736,61 @@ mod tests {
         );
     }
 
+    /// El slack de redondeo del paint absorbe la pérdida de hasta ~1px que
+    /// taffy introduce al redondear los bordes de una caja encogida-a-contenido.
+    /// Regresión de "«Learn more» envuelve a 2 líneas": la MEDIDA dimensiona el
+    /// nodo a `nat` (una línea), taffy lo deja en `nat - d` (con `d ≤ 1.0` por
+    /// redondeo), y el paint —si envolviera exactamente a ese ancho— partiría la
+    /// última palabra a una 2ª línea que desborda. Test font-independiente:
+    /// creamos un déficit `d` dentro del rango de taffy y verificamos que sin
+    /// slack envuelve y CON slack no.
+    #[test]
+    fn slack_de_redondeo_evita_wrap_espurio_en_texto_encogido() {
+        use llimphi_text::{Alignment, Typesetter};
+        let mut ts = Typesetter::new();
+        let clamp = |ts: &mut Typesetter, mw: Option<f32>| {
+            ts.layout_clamped(
+                "Learn more",
+                16.0,
+                mw,
+                Alignment::Start,
+                1.2,
+                false,
+                None,
+                400.0,
+                None,
+                false,
+                false,
+                false,
+                0.0,
+                0.0,
+                false,
+                "",
+                "",
+                100.0,
+            )
+        };
+        // Ancho natural (sin límite): una sola línea.
+        let nat = llimphi_text::measurement(&clamp(&mut ts, None)).width;
+        assert_eq!(clamp(&mut ts, None).lines().count(), 1, "natural = 1 línea");
+        // Déficit dentro del rango de redondeo de taffy (0 < d ≤ 1.0). Casi 1.0
+        // = peor caso: los redondeos de ambos bordes restan hasta 1px juntos.
+        let deficit = 0.999_f32;
+        let rounded_down = nat - deficit;
+        assert!(
+            clamp(&mut ts, Some(rounded_down)).lines().count() >= 2,
+            "sin slack, el ancho redondeado hacia abajo ({rounded_down}) parte el texto"
+        );
+        assert_eq!(
+            clamp(&mut ts, Some(rounded_down + super::TEXT_WRAP_ROUNDING_SLACK))
+                .lines()
+                .count(),
+            1,
+            "con el slack {}, el texto vuelve a una línea",
+            super::TEXT_WRAP_ROUNDING_SLACK
+        );
+    }
+
     /// Un hijo clickeable de 100×100 anclado arriba-izquierda. Devuelve
     /// `(mounted, computed)` ya layouteados sobre un viewport 400×400.
     fn fixture(
@@ -1845,6 +3916,66 @@ mod tests {
         assert_eq!(hit_test_click(&m_gpu, &c_gpu, 200.0, 200.0), Some(0), "GPU (gpu_paint_with+paint_over)");
     }
 
+    /// Una capa `.over(true)` se pinta DESPUÉS de todo lo demás, así que el
+    /// usuario la ve arriba. El hit-test tiene que coincidir con eso aunque el
+    /// nodo base esté DESPUÉS en orden de árbol.
+    ///
+    /// Caso real que lo motivó (saga del ⚙ de media, 2026-07): la barra de
+    /// control de media es `.over(true)` y el lienzo de video que va detrás
+    /// aparece después en el árbol; con el criterio viejo («último nodo que
+    /// cumple, en orden de árbol») el lienzo le robaba los clicks a los
+    /// botones que el usuario veía encima.
+    #[test]
+    fn capa_over_le_gana_el_click_al_nodo_base_posterior() {
+        fn caja<Msg: Clone>(msg: Msg) -> View<Msg> {
+            View::<Msg>::new(Style {
+                position: Position::Absolute,
+                inset: Rect { left: length(0.0), top: length(0.0), right: auto(), bottom: auto() },
+                size: Size { width: length(200.0), height: length(200.0) },
+                ..Default::default()
+            })
+            .on_click(msg)
+        }
+        // Dos cajas superpuestas en el MISMO rect. La `over` va PRIMERO en el
+        // árbol (la posición desfavorable), la base va después.
+        let root = View::<u8>::new(Style::default()).children(vec![
+            caja(1u8).over(true), // se pinta al final ⇒ está arriba
+            caja(2u8),            // posterior en el árbol, pero debajo
+        ]);
+        let mut layout = LayoutTree::new();
+        let m = mount(&mut layout, root);
+        let c = layout.compute(m.root, (400.0, 400.0)).expect("layout");
+        // idx 1 = la caja over, idx 2 = la base. Gana la que se ve.
+        assert_eq!(
+            hit_test_click(&m, &c, 100.0, 100.0),
+            Some(1),
+            "el click debe ir a la capa over (la que el usuario ve encima), \
+             no al nodo base posterior en orden de árbol"
+        );
+        // Control: fuera de las cajas no pega nada.
+        assert_eq!(hit_test_click(&m, &c, 300.0, 300.0), None);
+    }
+
+    /// El contrapeso del test anterior: sin capas over, el criterio de siempre
+    /// (último en orden de árbol = el que se pintó encima) queda intacto.
+    #[test]
+    fn sin_capas_over_gana_el_ultimo_del_arbol_como_siempre() {
+        fn caja<Msg: Clone>(msg: Msg) -> View<Msg> {
+            View::<Msg>::new(Style {
+                position: Position::Absolute,
+                inset: Rect { left: length(0.0), top: length(0.0), right: auto(), bottom: auto() },
+                size: Size { width: length(200.0), height: length(200.0) },
+                ..Default::default()
+            })
+            .on_click(msg)
+        }
+        let root = View::<u8>::new(Style::default()).children(vec![caja(1u8), caja(2u8)]);
+        let mut layout = LayoutTree::new();
+        let m = mount(&mut layout, root);
+        let c = layout.compute(m.root, (400.0, 400.0)).expect("layout");
+        assert_eq!(hit_test_click(&m, &c, 100.0, 100.0), Some(2));
+    }
+
     #[test]
     fn nodo_gpu_paint_with_solo_es_hittable_por_si_mismo() {
         // Crítico para el motor voxel futuro: una vista 3D GPU-only que
@@ -2056,6 +4187,93 @@ mod tests {
         assert!(ch.is_empty());
     }
 
+    #[test]
+    fn consume_scroll_chain_reparte_el_sobrante() {
+        use crate::{consume_scroll_chain, hit_test_scroll_chain};
+        // Hijo `take` que sólo puede absorber 3 líneas; padre `take` sin tope.
+        // Un evento de 10 líneas debe producir DOS Msg: hijo 3 + padre 7.
+        #[derive(Clone, Debug, PartialEq)]
+        enum M {
+            Hijo(f32),
+            Padre(f32),
+        }
+        let hijo = View::<M>::new(Style {
+            size: Size { width: length(100.0), height: length(100.0) },
+            ..Default::default()
+        })
+        .on_scroll_take(|dx, dy| {
+            let can = dy.min(3.0);
+            (Some(M::Hijo(can)), dx, dy - can)
+        });
+        let padre = View::<M>::new(Style {
+            size: Size { width: length(200.0), height: length(200.0) },
+            align_items: Some(AlignItems::FlexStart),
+            justify_content: Some(JustifyContent::FlexStart),
+            ..Default::default()
+        })
+        .on_scroll_take(|_dx, dy| (Some(M::Padre(dy)), 0.0, 0.0))
+        .children(vec![hijo]);
+        let mut layout = LayoutTree::new();
+        let m = mount(&mut layout, padre);
+        let c = layout.compute(m.root, (400.0, 400.0)).expect("layout");
+        let chain = hit_test_scroll_chain(&m, &c, 50.0, 50.0);
+        let msgs = consume_scroll_chain(&m, &chain, 0.0, 10.0);
+        assert_eq!(msgs, vec![M::Hijo(3.0), M::Padre(7.0)]);
+        // Si el hijo consume todo, el padre no recibe nada.
+        let msgs = consume_scroll_chain(&m, &chain, 0.0, 2.0);
+        assert_eq!(msgs, vec![M::Hijo(2.0)]);
+    }
+
+    #[test]
+    fn consume_scroll_chain_legado_y_defensas() {
+        use crate::{consume_scroll_chain, hit_test_scroll_chain};
+        #[derive(Clone, Debug, PartialEq)]
+        enum M {
+            Padre(f32),
+        }
+        // Hijo LEGACY que devuelve None (topado) → el padre take recibe el
+        // delta completo (semántica histórica intacta).
+        let hijo = View::<M>::new(Style {
+            size: Size { width: length(100.0), height: length(100.0) },
+            ..Default::default()
+        })
+        .on_scroll(|_dx, _dy| None::<M>);
+        let padre = View::<M>::new(Style {
+            size: Size { width: length(200.0), height: length(200.0) },
+            align_items: Some(AlignItems::FlexStart),
+            justify_content: Some(JustifyContent::FlexStart),
+            ..Default::default()
+        })
+        .on_scroll_take(|_dx, dy| (Some(M::Padre(dy)), 0.0, 0.0))
+        .children(vec![hijo]);
+        let mut layout = LayoutTree::new();
+        let m = mount(&mut layout, padre);
+        let c = layout.compute(m.root, (400.0, 400.0)).expect("layout");
+        let chain = hit_test_scroll_chain(&m, &c, 50.0, 50.0);
+        assert_eq!(consume_scroll_chain(&m, &chain, 0.0, 5.0), vec![M::Padre(5.0)]);
+
+        // Defensa: un take mentiroso que "agranda" el sobrante queda acotado
+        // al delta recibido — el padre nunca ve más de lo que entró.
+        let tramposo = View::<M>::new(Style {
+            size: Size { width: length(100.0), height: length(100.0) },
+            ..Default::default()
+        })
+        .on_scroll_take(|_dx, _dy| (None, 0.0, 999.0));
+        let padre2 = View::<M>::new(Style {
+            size: Size { width: length(200.0), height: length(200.0) },
+            align_items: Some(AlignItems::FlexStart),
+            justify_content: Some(JustifyContent::FlexStart),
+            ..Default::default()
+        })
+        .on_scroll_take(|_dx, dy| (Some(M::Padre(dy)), 0.0, 0.0))
+        .children(vec![tramposo]);
+        let mut layout = LayoutTree::new();
+        let m = mount(&mut layout, padre2);
+        let c = layout.compute(m.root, (400.0, 400.0)).expect("layout");
+        let chain = hit_test_scroll_chain(&m, &c, 50.0, 50.0);
+        assert_eq!(consume_scroll_chain(&m, &chain, 0.0, 5.0), vec![M::Padre(5.0)]);
+    }
+
     #[test]
     fn hit_test_double_tap_y_long_press() {
         use crate::{hit_test_double_tap, hit_test_long_press};
diff --git a/llimphi-compositor/src/ripple.rs b/llimphi-compositor/src/ripple.rs
index 8fc1912..06d0a6f 100644
--- a/llimphi-compositor/src/ripple.rs
+++ b/llimphi-compositor/src/ripple.rs
@@ -133,13 +133,13 @@ impl RippleRegistry {
         computed: &ComputedLayout,
         now: Instant,
     ) -> bool {
-        // Descartá primero las agotadas (no dependen del nodo).
+        // Descarta primero las agotadas (no dependen del nodo).
         self.splashes.retain(|s| !s.done(now));
         if self.splashes.is_empty() {
             return false;
         }
         for s in &self.splashes {
-            // Resolvé el nodo ripple de esta key (el primero que la declare).
+            // Resuelve el nodo ripple de esta key (el primero que la declare).
             let Some(node) = mounted.nodes.iter().find(|n| {
                 n.ripple.map(|r| r.key) == Some(s.key)
             }) else {
diff --git a/llimphi-compositor/src/semantics.rs b/llimphi-compositor/src/semantics.rs
index c484d27..d350239 100644
--- a/llimphi-compositor/src/semantics.rs
+++ b/llimphi-compositor/src/semantics.rs
@@ -6,7 +6,7 @@
 //! Este módulo es **pura data**: define los tipos sin acoplarse al crate
 //! `accesskit`. La conversión a `accesskit::Node` vive en `llimphi-ui::a11y`
 //! (iter 2 del plan), donde el cableado del adapter winit ya importa la
-//! librería. Tener acá solo el modelo permite:
+//! librería. Tener aquí solo el modelo permite:
 //!
 //! - Compilar el compositor con o sin la integración AccessKit habilitada.
 //! - Testear semántica a nivel "qué declaran los widgets" sin levantar un
@@ -106,7 +106,7 @@ impl SemanticsFlags {
 /// un `accesskit::Node` cada frame.
 ///
 /// `label` es lo que el lector enuncia primero (el "nombre accesible"). Si el
-/// nodo ya tiene un `text` visible y significativo, podés dejar `label = None`
+/// nodo ya tiene un `text` visible y significativo, puedes dejar `label = None`
 /// y el runtime usará ese texto como nombre — pero declararlo explícito es más
 /// robusto (e.g. un botón con sólo un ícono necesita label porque no hay texto
 /// visible).
@@ -115,7 +115,7 @@ impl SemanticsFlags {
 /// suele leer label + value juntos: "Volumen, 70".
 ///
 /// `description` es contexto adicional ("Disminuye el volumen del sistema").
-/// Los lectores lo leen tras una pausa o con un atajo distinto; usalo para
+/// Los lectores lo leen tras una pausa o con un atajo distinto; úsalo para
 /// info que ayude PERO no sobreloadées (los usuarios de TTS perciben ruido
 /// más que falta de info).
 #[derive(Clone, Debug, Default, PartialEq)]
diff --git a/llimphi-compositor/src/view.rs b/llimphi-compositor/src/view.rs
index f6b350a..18b757a 100644
--- a/llimphi-compositor/src/view.rs
+++ b/llimphi-compositor/src/view.rs
@@ -20,13 +20,16 @@ impl<Msg> View<Msg> {
             painter: None,
             gpu_painter: None,
             over_painter: None,
+            over_layer: false,
             on_pointer_enter: None,
             on_pointer_leave: None,
             on_pointer_move_at: None,
             on_click: None,
             on_click_at: None,
+            on_click_screen: None,
             on_right_click: None,
             on_right_click_at: None,
+            on_right_click_screen: None,
             on_middle_click: None,
             drag: None,
             drag_at: None,
@@ -41,6 +44,7 @@ impl<Msg> View<Msg> {
             clip_path_svg: None,
             clip_ref_inset: None,
             on_scroll: None,
+            on_scroll_take: None,
             on_scale: None,
             on_rotate: None,
             on_double_tap: None,
@@ -57,6 +61,7 @@ impl<Msg> View<Msg> {
             transform: None,
             transform_rel: None,
             transform_origin: None,
+            sticky: None,
             tooltip: None,
             cursor: None,
             ripple: None,
@@ -64,6 +69,8 @@ impl<Msg> View<Msg> {
             backdrop_blur: None,
             filter: Vec::new(),
             blend: None,
+            repaint_boundary: None,
+            memo: None,
             children: Vec::new(),
         }
     }
@@ -122,6 +129,43 @@ impl<Msg> View<Msg> {
         self
     }
 
+    /// Marca este nodo como un **límite de repintado** (`RepaintBoundary`,
+    /// Bloque 23): el runtime puede cachear la rasterización de su subárbol y
+    /// reusarla entre frames mientras el contenido no cambie, en vez de
+    /// re-pintarlo. Sólo surte efecto si el subárbol es *paint-puro* y está en
+    /// una posición sin transform/clip/alpha ancestral (si no, se pinta fresco
+    /// — nunca produce un frame incorrecto, sólo se saltea la optimización).
+    /// `key` debe ser **estable entre rebuilds** (identifica la entrada del
+    /// caché). Pensalo para subárboles grandes y estáticos: una página de
+    /// documento, un chart, un panel de chrome que no cambia. Ver
+    /// [`crate::RepaintCache`].
+    pub fn repaint_boundary(mut self, key: u64) -> Self {
+        self.repaint_boundary = Some(key);
+        self
+    }
+
+    /// Marca este nodo como **memoizado** (`memo`, Bloque 25): su contenido lo
+    /// produce `builder`, y el runtime lo **reusa entre frames** mientras `deps`
+    /// no cambie — sin reconstruir el `View`, sin re-montar ni re-layoutear el
+    /// subárbol. `builder` devuelve un único `View` (el contenido que va dentro
+    /// de este nodo). El nodo debe llevar un `Style` con **tamaño definido**
+    /// (length/percent): el runtime lo trata como una hoja de ese tamaño y
+    /// computa el subárbol aislado con ese slot. `deps` debe resumir TODO lo que
+    /// el contenido depende (si te olvidas una dep, el subárbol queda stale).
+    /// Pensalo para chrome grande y estable: un panel, un sidebar, un formulario
+    /// que no cambia salvo un valor. Los `children` estáticos se ignoran.
+    pub fn memo<F>(mut self, key: u64, deps: u64, builder: F) -> Self
+    where
+        F: Fn() -> View<Msg> + Send + Sync + 'static,
+    {
+        self.memo = Some(crate::MemoNode {
+            key,
+            deps,
+            builder: Some(std::sync::Arc::new(builder)),
+        });
+        self
+    }
+
     /// Construye los hijos de este nodo **de forma diferida**, en función del
     /// tamaño del slot que el layout le asigne (Flutter `LayoutBuilder`). El
     /// runtime resuelve primero el rect del nodo (una pasada de layout con este
@@ -150,7 +194,7 @@ impl<Msg> View<Msg> {
     /// punto presionado y se desvanece, recortado al contorno del nodo. `key`
     /// debe ser **estable** entre rebuilds del `View` (índice/hash del item),
     /// igual que la key de [`Self::animated`]. `color` es el tinte de la onda —
-    /// usá un color semitransparente (blanco a alpha ~0.25 sobre superficies
+    /// usa un color semitransparente (blanco a alpha ~0.25 sobre superficies
     /// oscuras, negro a alpha ~0.12 sobre claras); su alpha se atenúa con el
     /// fade. Es **aditivo**: convive con `on_click`/`drag` sin pisarlos. Duración
     /// por defecto 450 ms; para otra usar [`Self::ripple_styled`].
@@ -190,7 +234,7 @@ impl<Msg> View<Msg> {
     }
 
     /// Declara la **semántica accesible** completa del nodo de una vez. Usar
-    /// cuando ya tenés un [`SemanticsSpec`] armado (p. ej. construido por un
+    /// cuando ya tienes un [`SemanticsSpec`] armado (p. ej. construido por un
     /// widget); para los casos puntuales preferí los atajos
     /// [`Self::role`]/[`Self::aria_label`]/etc.
     pub fn semantics(mut self, spec: SemanticsSpec) -> Self {
@@ -302,6 +346,21 @@ impl<Msg> View<Msg> {
         self
     }
 
+    /// Como [`Self::on_scroll`] pero con **reparto parcial** del delta
+    /// (scroll anidado real): el handler devuelve `(msg, rest_x, rest_y)` —
+    /// el `Msg` por lo que consumió y el sobrante en la misma unidad
+    /// (líneas), que el runtime entrega al siguiente scrollable de la cadena.
+    /// Así una lista casi topada absorbe los píxeles que le quedan Y el
+    /// ancestro scrollea el resto en el **mismo evento** (antes: consume
+    /// todo o nada por eje). Si el nodo tiene ambos handlers, gana éste.
+    pub fn on_scroll_take<F>(mut self, handler: F) -> Self
+    where
+        F: Fn(f32, f32) -> (Option<Msg>, f32, f32) + Send + Sync + 'static,
+    {
+        self.on_scroll_take = Some(Arc::new(handler));
+        self
+    }
+
     /// Registra un handler de **pinch-to-zoom** (gesto de escala). El runtime
     /// lo invoca cuando el cursor está sobre este nodo y el usuario hace un
     /// gesto de escala: **Ctrl + rueda** en cualquier desktop (camino
@@ -395,7 +454,7 @@ impl<Msg> View<Msg> {
     /// editor: arrastrar sobre él resalta el rango y Ctrl/Cmd+C lo copia al
     /// portapapeles. `key` debe ser **estable** entre rebuilds del `View`
     /// (índice, hash del id) — la selección vive en el runtime anclada a esa
-    /// key, no al `NodeId` (que cambia cada frame). Pensá en labels, párrafos,
+    /// key, no al `NodeId` (que cambia cada frame). Piensa en labels, párrafos,
     /// celdas de tabla, salidas de consola: cualquier texto que el usuario
     /// querría copiar sin un editor. Sólo aplica a texto **uniforme** (el de
     /// `.text(...)`/`.text_aligned(...)`); en nodos con `runs`/`spans` no tiene
@@ -456,6 +515,16 @@ impl<Msg> View<Msg> {
         self
     }
 
+    /// `position: sticky` (CSS): insets `[top, right, bottom, left]` en px
+    /// relativos al scrollport (ancestro que recorta). El nodo fluye normal
+    /// hasta el umbral y luego se pega a esa distancia del borde. Ver el campo
+    /// [`View::sticky`]. Ejemplo: un header `top:0` ⇒ `.sticky([Some(0.0),
+    /// None, None, None])`.
+    pub fn sticky(mut self, insets: [Option<f32>; 4]) -> Self {
+        self.sticky = Some(insets);
+        self
+    }
+
     /// Punto de pivote de `transform` (CSS `transform-origin`). Sin setear ⇒
     /// centro del rect (`50% 50%`). Ver [`TransformPivot`]. Sólo tiene efecto
     /// junto con `transform`/`transform_rel`.
@@ -497,6 +566,10 @@ impl<Msg> View<Msg> {
             exit: false,
             enter_from_xf: None,
             switch: None,
+            exit_to_xf: None,
+            enter_fade: true,
+            exit_under: false,
+            exit_hold: false,
         });
         self
     }
@@ -552,6 +625,10 @@ impl<Msg> View<Msg> {
             exit: false,
             enter_from_xf: None,
             switch: None,
+            exit_to_xf: None,
+            enter_fade: true,
+            exit_under: false,
+            exit_hold: false,
         });
         self
     }
@@ -581,6 +658,10 @@ impl<Msg> View<Msg> {
             exit: false,
             enter_from_xf: Some(from_xf),
             switch: None,
+            exit_to_xf: None,
+            enter_fade: true,
+            exit_under: false,
+            exit_hold: false,
         });
         self
     }
@@ -606,6 +687,10 @@ impl<Msg> View<Msg> {
             exit: true,
             enter_from_xf: None,
             switch: None,
+            exit_to_xf: None,
+            enter_fade: true,
+            exit_under: false,
+            exit_hold: false,
         });
         self
     }
@@ -623,6 +708,10 @@ impl<Msg> View<Msg> {
             exit: true,
             enter_from_xf: None,
             switch: None,
+            exit_to_xf: None,
+            enter_fade: true,
+            exit_under: false,
+            exit_hold: false,
         });
         self
     }
@@ -645,6 +734,10 @@ impl<Msg> View<Msg> {
             exit: true,
             enter_from_xf: Some(from_xf),
             switch: None,
+            exit_to_xf: None,
+            enter_fade: true,
+            exit_under: false,
+            exit_hold: false,
         });
         self
     }
@@ -665,6 +758,10 @@ impl<Msg> View<Msg> {
             exit: false,
             enter_from_xf: None,
             switch: None,
+            exit_to_xf: None,
+            enter_fade: true,
+            exit_under: false,
+            exit_hold: false,
         });
         self
     }
@@ -695,6 +792,92 @@ impl<Msg> View<Msg> {
             exit: false,
             enter_from_xf: None,
             switch: Some(variant),
+            exit_to_xf: None,
+            enter_fade: true,
+            exit_under: false,
+            exit_hold: false,
+        });
+        self
+    }
+
+    /// Como [`Self::animated_switch`] pero **direccional**: al cambiar la
+    /// variante, el contenido nuevo entra desde `enter_from_xf` (además del
+    /// fade-in) y el viejo sale hacia `exit_to_xf` (además del fade-out),
+    /// ambas afines aplicadas alrededor del centro del rect. Es la base de las
+    /// transiciones de página del router: push = entrar desde la derecha /
+    /// salir hacia la izquierda; pop = lo inverso. `None` en cualquiera de las
+    /// dos degrada a fade puro en ese lado.
+    pub fn animated_switch_from(
+        self,
+        key: u64,
+        variant: u64,
+        duration: std::time::Duration,
+        enter_from_xf: Option<Affine>,
+        exit_to_xf: Option<Affine>,
+    ) -> Self {
+        self.animated_switch_styled(
+            key,
+            variant,
+            duration,
+            crate::SwitchStyle {
+                enter_from_xf,
+                exit_to_xf,
+                ..Default::default()
+            },
+        )
+    }
+
+    /// La forma **completa** del switch direccional: [`crate::SwitchStyle`]
+    /// agrupa los cinco knobs — afín de entrada, fade de entrada, afín de
+    /// salida, placement del fantasma (encima vs **debajo** del contenido
+    /// nuevo, en su posición z real) y hold de opacidad (salida opaca, sin
+    /// desvanecer). Con `enter_fade: false` + `exit_under: true` sale el push
+    /// opaco estilo UIKit; el default reproduce `animated_switch`.
+    pub fn animated_switch_styled(
+        mut self,
+        key: u64,
+        variant: u64,
+        duration: std::time::Duration,
+        style: crate::SwitchStyle,
+    ) -> Self {
+        self.anim = Some(Anim {
+            key,
+            duration,
+            easing: ease_out_cubic,
+            enter: false,
+            exit: false,
+            enter_from_xf: style.enter_from_xf,
+            switch: Some(variant),
+            exit_to_xf: style.exit_to_xf,
+            enter_fade: style.enter_fade,
+            exit_under: style.exit_under,
+            exit_hold: style.exit_hold,
+        });
+        self
+    }
+
+    /// Como [`Self::animated_exit`] pero la salida además se **desliza** hacia
+    /// `to_xf` mientras se desvanece (p. ej. un toast que se va hacia abajo:
+    /// `Affine::translate((0.0, 40.0))`). La afín se aplica alrededor del
+    /// centro del rect del nodo.
+    pub fn animated_exit_to(
+        mut self,
+        key: u64,
+        duration: std::time::Duration,
+        to_xf: Affine,
+    ) -> Self {
+        self.anim = Some(Anim {
+            key,
+            duration,
+            easing: ease_out_cubic,
+            enter: false,
+            exit: true,
+            enter_from_xf: None,
+            switch: None,
+            exit_to_xf: Some(to_xf),
+            enter_fade: true,
+            exit_under: false,
+            exit_hold: false,
         });
         self
     }
@@ -808,7 +991,7 @@ impl<Msg> View<Msg> {
 
     /// Rellena el nodo con un **gradiente** en vez de un color sólido. El
     /// gradiente se autorea en el **cuadrado unidad** `[0,1]²` y el runtime
-    /// lo mapea al rect del nodo (así no necesitás saber el tamaño al
+    /// lo mapea al rect del nodo (así no necesitas saber el tamaño al
     /// construir el `View`) — igual que `Alignment` relativo de Flutter.
     ///
     /// ```ignore
@@ -856,6 +1039,9 @@ impl<Msg> View<Msg> {
             spans: None,
             no_wrap: false,
             overflow_wrap: false,
+            font_features: String::new(),
+            font_variations: String::new(),
+            font_width: 100.0,
         });
         self
     }
@@ -886,6 +1072,9 @@ impl<Msg> View<Msg> {
             spans: None,
             no_wrap: false,
             overflow_wrap: false,
+            font_features: String::new(),
+            font_variations: String::new(),
+            font_width: 100.0,
         });
         self
     }
@@ -919,6 +1108,9 @@ impl<Msg> View<Msg> {
             spans: None,
             no_wrap: false,
             overflow_wrap: false,
+            font_features: String::new(),
+            font_variations: String::new(),
+            font_width: 100.0,
         });
         self
     }
@@ -954,6 +1146,9 @@ impl<Msg> View<Msg> {
             spans: None,
             no_wrap: false,
             overflow_wrap: false,
+            font_features: String::new(),
+            font_variations: String::new(),
+            font_width: 100.0,
         });
         self
     }
@@ -990,6 +1185,9 @@ impl<Msg> View<Msg> {
             spans: None,
             no_wrap: false,
             overflow_wrap: false,
+            font_features: String::new(),
+            font_variations: String::new(),
+            font_width: 100.0,
         });
         self
     }
@@ -1031,6 +1229,9 @@ impl<Msg> View<Msg> {
             spans: Some(spans),
             no_wrap: false,
             overflow_wrap: false,
+            font_features: String::new(),
+            font_variations: String::new(),
+            font_width: 100.0,
         });
         self
     }
@@ -1128,6 +1329,37 @@ impl<Msg> View<Msg> {
         self
     }
 
+    /// `font-feature-settings` (CSS): string crudo de features OpenType en
+    /// gramática CSS (`"liga" 1, "kern" 0`) — parley/swash lo parsean. Vacío =
+    /// default de la fuente. `font-kerning` se pliega aquí como el feature
+    /// `kern`. Afecta medida y pintado. No-op sin texto (o string vacío).
+    pub fn font_features(mut self, css: String) -> Self {
+        if let Some(t) = self.text.as_mut() {
+            t.font_features = css;
+        }
+        self
+    }
+
+    /// `font-variation-settings` (CSS): string crudo de ejes de fuente variable
+    /// en gramática CSS (`"wght" 700, "wdth" 85`). Vacío = ejes en su default.
+    /// Mismo régimen que [`Self::font_features`]. No-op sin texto.
+    pub fn font_variations(mut self, css: String) -> Self {
+        if let Some(t) = self.text.as_mut() {
+            t.font_variations = css;
+        }
+        self
+    }
+
+    /// `font-stretch`/`font-width` (CSS): porcentaje de ancho de la fuente
+    /// (100 = normal, <100 condensada, >100 expandida). Selecciona la face o el
+    /// eje `wdth` de una variable. Afecta medida y pintado. No-op sin texto.
+    pub fn font_width(mut self, pct: f32) -> Self {
+        if let Some(t) = self.text.as_mut() {
+            t.font_width = pct;
+        }
+        self
+    }
+
     /// `white-space: nowrap`/`pre` (CSS): el texto **no envuelve** — se shapea
     /// en una sola línea (`break_all_lines(None)`) sin importar el ancho de la
     /// caja, y desborda (lo recorta `overflow: hidden` si lo hay). Afecta
@@ -1241,6 +1473,34 @@ impl<Msg> View<Msg> {
         self
     }
 
+    /// Como [`Self::on_right_click_at`] pero el handler recibe
+    /// `(abs_x, abs_y, rect_w, rect_h)` con las coords **absolutas de ventana**
+    /// del click (no locales al nodo). Es lo que quiere un menú contextual:
+    /// aparecer en la posición del puntero en pantalla. Los backends (winit /
+    /// layer-shell) le pasan el cursor absoluto. Úsalo en vez de
+    /// `on_right_click_at` cuando el nodo va a abrir un popup anclado al cursor.
+    pub fn on_right_click_screen<F>(mut self, handler: F) -> Self
+    where
+        F: Fn(f32, f32, f32, f32) -> Option<Msg> + Send + Sync + 'static,
+    {
+        self.on_right_click_screen = Some(Arc::new(handler));
+        self
+    }
+
+    /// Como [`Self::on_click_at`] pero el handler recibe `(abs_x, abs_y, rect_w,
+    /// rect_h)` con las coords **absolutas de ventana** del click (no locales al
+    /// nodo) — el gemelo de izquierda de [`Self::on_right_click_screen`]. Es lo
+    /// que quiere un **select/dropdown**: al hacer click en el disparador, abrir
+    /// su menú anclado a la posición en pantalla (en la capa `view_overlay`,
+    /// encima de todo). Los backends le pasan el cursor absoluto.
+    pub fn on_click_screen<F>(mut self, handler: F) -> Self
+    where
+        F: Fn(f32, f32, f32, f32) -> Option<Msg> + Send + Sync + 'static,
+    {
+        self.on_click_screen = Some(Arc::new(handler));
+        self
+    }
+
     /// Declara el `Msg` a emitir cuando el usuario hace click con el
     /// botón del medio (rueda presionada). Usado típicamente para abrir
     /// links en pestaña nueva — igual que Ctrl+Click pero más rápido.
@@ -1364,6 +1624,26 @@ impl<Msg> View<Msg> {
         self
     }
 
+    /// Marca este nodo y **todo su subárbol** como capa "over": se pinta
+    /// en la pasada vello FINAL, después del pase GPU directo del frame,
+    /// con toda la maquinaria normal de Views (fills, texto, imágenes,
+    /// `paint_with`, hover). Es el primitivo para componer **UI encima de
+    /// contenido `gpu_paint_with`** — la barra de controles flotante de un
+    /// reproductor de video, un HUD sobre un canvas GPU — sin reescribir
+    /// esos widgets como closures de [`Self::paint_over`].
+    ///
+    /// El orden total del frame no cambia: `[vello base] → [gpu_paint] →
+    /// [vello over (paint_over + subárboles over)] → [overlay/menús]`. El
+    /// hit-test es el de siempre (usa el layout, no la pasada de pintura),
+    /// así que los handlers del subárbol siguen funcionando idéntico.
+    /// Limitación (como `paint_over`): la capa over se compone con alpha
+    /// sobre la intermedia — clips/alpha de ancestros fuera del subárbol
+    /// no la afectan.
+    pub fn over(mut self, enabled: bool) -> Self {
+        self.over_layer = enabled;
+        self
+    }
+
     /// Recorta los hijos al rect de este nodo (paint y hit-test). Útil
     /// para paneles con contenido virtualizado que no debe sangrar a
     /// vecinos (listas, scrollers, viewers).
@@ -1750,4 +2030,43 @@ mod semantics_tests {
         let sin = View::<()>::new(Style::default()).overflow_wrap();
         assert!(sin.text.is_none(), "overflow_wrap sin texto no crea TextSpec");
     }
+
+    #[test]
+    fn font_features_y_variations_setean_campos_del_texto_fase_7_1256() {
+        // `.font_features()`/`.font_variations()` guardan el string CSS crudo en
+        // el TextSpec (parley/swash lo parsean al shapear). Ortogonales entre sí
+        // y al resto; default vacío. No-op si el nodo no tiene texto.
+        let v = View::<()>::new(Style::default())
+            .text("hola", 14.0, Color::BLACK)
+            .font_features("\"liga\" 0, \"kern\" 0".to_string())
+            .font_variations("\"wght\" 700".to_string());
+        let t = v.text.as_ref().expect("text");
+        assert_eq!(t.font_features, "\"liga\" 0, \"kern\" 0");
+        assert_eq!(t.font_variations, "\"wght\" 700");
+        // Default: sin override (strings vacíos).
+        let def = View::<()>::new(Style::default()).text("x", 14.0, Color::BLACK);
+        let dt = def.text.as_ref().unwrap();
+        assert!(dt.font_features.is_empty(), "default features vacío");
+        assert!(dt.font_variations.is_empty(), "default variations vacío");
+        // No-op sin texto: no panickea ni inventa un TextSpec.
+        let sin = View::<()>::new(Style::default()).font_features("\"liga\" 1".to_string());
+        assert!(sin.text.is_none(), "font_features sin texto no crea TextSpec");
+    }
+
+    #[test]
+    fn font_width_setea_campo_del_texto_fase_7_1257() {
+        // `.font_width()` guarda el porcentaje de ancho de la fuente en el
+        // TextSpec (100 = normal). Ortogonal al resto; default 100. No-op sin texto.
+        let v = View::<()>::new(Style::default())
+            .text("hola", 14.0, Color::BLACK)
+            .font_width(75.0);
+        let t = v.text.as_ref().expect("text");
+        assert_eq!(t.font_width, 75.0, "font_width=75 tras el builder");
+        // Default: 100 (normal).
+        let def = View::<()>::new(Style::default()).text("x", 14.0, Color::BLACK);
+        assert_eq!(def.text.as_ref().unwrap().font_width, 100.0, "default 100 (normal)");
+        // No-op sin texto.
+        let sin = View::<()>::new(Style::default()).font_width(50.0);
+        assert!(sin.text.is_none(), "font_width sin texto no crea TextSpec");
+    }
 }
diff --git a/llimphi-compositor/tests/text_measure.rs b/llimphi-compositor/tests/text_measure.rs
index 4052dc6..50383fa 100644
--- a/llimphi-compositor/tests/text_measure.rs
+++ b/llimphi-compositor/tests/text_measure.rs
@@ -82,6 +82,9 @@ fn no_wrap_mide_una_sola_linea_fase_7_1253() {
         word_spacing: 0.0,
         no_wrap,
         overflow_wrap: false,
+        font_features: String::new(),
+        font_variations: String::new(),
+        font_width: 100.0,
     };
     let mut ts = llimphi_text::Typesetter::new();
     let known = TSize { width: None, height: None };
@@ -127,6 +130,9 @@ fn line_height_mayor_reserva_mas_alto() {
             word_spacing: 0.0,
             no_wrap: false,
             overflow_wrap: false,
+            font_features: String::new(),
+            font_variations: String::new(),
+            font_width: 100.0,
         };
         let known = TSize { width: Some(180.0_f32), height: None };
         let avail = TSize {
@@ -168,6 +174,9 @@ fn overflow_wrap_parte_la_palabra_larga_fase_7_1254() {
         word_spacing: 0.0,
         no_wrap: false,
         overflow_wrap,
+        font_features: String::new(),
+        font_variations: String::new(),
+        font_width: 100.0,
     };
     let mut ts = llimphi_text::Typesetter::new();
     let known = TSize { width: None, height: None };
diff --git a/llimphi-gallery/Cargo.toml b/llimphi-gallery/Cargo.toml
index af3a109..cc16e56 100644
--- a/llimphi-gallery/Cargo.toml
+++ b/llimphi-gallery/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-gallery — demo único que prueba el kit transversal de elegancia. Binario standalone; `cargo run -p llimphi-gallery --release`."
 
+repository.workspace = true
 [[bin]]
 name = "llimphi-gallery"
 path = "src/main.rs"
@@ -15,7 +15,6 @@ path = "src/main.rs"
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
-llimphi-motion = { workspace = true }
 llimphi-icons = { workspace = true }
 llimphi-widget-wawa-mark = { workspace = true }
 llimphi-widget-tooltip = { workspace = true }
diff --git a/llimphi-gallery/LEEME.md b/llimphi-gallery/LEEME.md
new file mode 100644
index 0000000..4ec816e
--- /dev/null
+++ b/llimphi-gallery/LEEME.md
@@ -0,0 +1,28 @@
+# llimphi-gallery
+
+*Read this in English: [README.md](README.md).*
+
+Demo único del kit transversal de elegancia.
+
+Una sola ventana que muestra cómo se ven los widgets del kit
+juntos sobre el theme dark. Útil para verificar paleta, escala,
+cinética y consistencia visual de un vistazo.
+
+`cargo run -p llimphi-gallery --release`
+
+Controles:
+- Click en switches/segments/breadcrumb: dispatchea Msg
+- Click en "Mostrar toast": apila un toast en bottom-right
+- Click en "Abrir modal": muestra el modal
+- `?`: abre/cierra el overlay de atajos
+- Esc: cierra overlay activo
+
+## Uso
+
+```sh
+cargo run --release -p llimphi-gallery
+```
+
+---
+
+Parte de **llimphi** — ver [llimphi](../LEEME.md).
diff --git a/llimphi-gallery/README.md b/llimphi-gallery/README.md
new file mode 100644
index 0000000..3db9307
--- /dev/null
+++ b/llimphi-gallery/README.md
@@ -0,0 +1,24 @@
+# llimphi-gallery
+
+The single demo of the cross-cutting elegance kit.
+
+One window showing how the kit's widgets look together on the dark theme. Useful
+to check palette, scale, kinetics and visual consistency at a glance.
+
+## Use
+
+```sh
+cargo run --release -p llimphi-gallery
+```
+
+Controls:
+
+- Click on switches/segments/breadcrumb: dispatches a `Msg`.
+- Click on "show toast": stacks a toast in the bottom-right.
+- Click on "open modal": shows the modal.
+- `?`: opens/closes the shortcuts overlay.
+- `Esc`: closes the active overlay.
+
+---
+
+Part of **llimphi** — see [llimphi](../README.md).
diff --git a/llimphi-gallery/src/main.rs b/llimphi-gallery/src/main.rs
index 807f45e..f128bee 100644
--- a/llimphi-gallery/src/main.rs
+++ b/llimphi-gallery/src/main.rs
@@ -317,6 +317,7 @@ impl App for Gallery {
                 viewport: model.viewport,
                 on_dismiss: Msg::CloseModal,
                 palette: ModalPalette::from_theme(&theme),
+                body_scroll: None,
             }));
         }
         if model.shortcuts_open {
@@ -473,7 +474,7 @@ fn column_left(model: &Model, theme: &Theme) -> View<Msg> {
         .children(vec![empty_view(
             Icon::Folder,
             "Sin documentos abiertos",
-            Some("Abrí uno con Ctrl+O o creá un nuevo lienzo para empezar."),
+            Some("Abrí uno con Ctrl+O o crea un nuevo lienzo para empezar."),
             &EmptyPalette::from_theme(theme),
         )]),
     );
diff --git a/llimphi-gpu-bench/Cargo.toml b/llimphi-gpu-bench/Cargo.toml
index dda3faa..6e772e0 100644
--- a/llimphi-gpu-bench/Cargo.toml
+++ b/llimphi-gpu-bench/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "Binario standalone que valida el SDD §'GPU directo wgpu' en una máquina con GPU real: imprime info del adapter, corre vello vs GPU directo a varios N, evalúa el criterio (≥5× a 500K, ≥60 fps @ 1M) y exporta PNGs de verificación."
 
+repository.workspace = true
 [dependencies]
 llimphi-hal = { path = "../llimphi-hal", version = "0.1.0" }
 llimphi-raster = { path = "../llimphi-raster", version = "0.1.0" }
diff --git a/llimphi-gpu-bench/LEEME.md b/llimphi-gpu-bench/LEEME.md
new file mode 100644
index 0000000..ef32de1
--- /dev/null
+++ b/llimphi-gpu-bench/LEEME.md
@@ -0,0 +1,35 @@
+# llimphi-gpu-bench
+
+*Read this in English: [README.md](README.md).*
+
+Binario standalone para validar el SDD `02_ruway/llimphi/SDD.md` §"GPU directo wgpu" en una máquina con GPU real.
+
+Hace cuatro cosas en orden y lo imprime todo a stdout en formato
+markdown / tabla copy-paste friendly:
+
+1. **Header del sistema** — versión, hora, OS, GPU detectado.
+2. **Info del adapter wgpu** — backend (Vulkan/Metal/DX12/GL),
+   device name, vendor, limits relevantes.
+3. **Spike vello vs GPU directo** — para N ∈ {25K, 50K, 100K, 200K,
+   500K, 1M}. Mide ms/frame de cada uno y el factor. Evalúa el
+   criterio del SDD: ≥5× a 500K → PASA; < → ABORTAR.
+4. **Escalado GPU directo solo** — para N ∈ {100K, 500K, 1M, 2M,
+   5M, 10M}. Mide ms/frame, fps equivalente, Mprim/s. Evalúa el
+   objetivo de 60 fps @ 1M.
+5. **PNGs de verificación visual** — exporta 2 archivos al cwd:
+   `bench_vello_100k.png` y `bench_directo_100k.png`. La forma del
+   cielo de puntos debe coincidir entre los dos (LCG determinista).
+
+Pegar el output completo en chat para la verificación.
+
+Corre con: `cargo run -p llimphi-gpu-bench --release`.
+
+## Uso
+
+```sh
+cargo run --release -p llimphi-gpu-bench
+```
+
+---
+
+Parte de **llimphi** — ver [llimphi](../LEEME.md).
diff --git a/llimphi-gpu-bench/README.md b/llimphi-gpu-bench/README.md
new file mode 100644
index 0000000..38c0e04
--- /dev/null
+++ b/llimphi-gpu-bench/README.md
@@ -0,0 +1,30 @@
+# llimphi-gpu-bench
+
+Standalone binary to validate the "direct wgpu GPU" section of
+`02_ruway/llimphi/SDD.md` on a machine with a real GPU.
+
+It does four things in order and prints everything to stdout in
+copy-paste-friendly markdown/table form:
+
+1. **System header** — version, time, OS, detected GPU.
+2. **wgpu adapter info** — backend (Vulkan/Metal/DX12/GL), device name, vendor,
+   relevant limits.
+3. **vello vs direct GPU spike** — for N ∈ {25K, 50K, 100K, 200K, 500K, 1M}. It
+   measures ms/frame for each and the factor, and evaluates the SDD's criterion:
+   ≥5× at 500K → PASS; below → ABORT.
+4. **Direct-GPU scaling alone** — for N ∈ {100K, 500K, 1M, 2M, 5M, 10M}. It
+   measures ms/frame, equivalent fps and Mprim/s, and evaluates the 60 fps @ 1M
+   goal.
+5. **Visual verification PNGs** — it exports two files to the cwd:
+   `bench_vello_100k.png` and `bench_directo_100k.png`. The shape of the dot sky
+   must match between the two (deterministic LCG).
+
+## Use
+
+```sh
+cargo run --release -p llimphi-gpu-bench
+```
+
+---
+
+Part of **llimphi** — see [llimphi](../README.md).
diff --git a/llimphi-gpu-bench/src/main.rs b/llimphi-gpu-bench/src/main.rs
index d00247e..f920222 100644
--- a/llimphi-gpu-bench/src/main.rs
+++ b/llimphi-gpu-bench/src/main.rs
@@ -132,7 +132,7 @@ fn main() {
 
     println!("## Escalado GPU directo");
     println!();
-    println!("API real (`GpuPipelines` + `GpuBatch::add_rect`). Sólo se mide el lado GPU directo — vello no llega acá.");
+    println!("API real (`GpuPipelines` + `GpuBatch::add_rect`). Sólo se mide el lado GPU directo — vello no llega aquí.");
     println!();
     println!("| N | ms / frame | fps (1000/ms) | Mprim/s |");
     println!("|---:|---:|---:|---:|");
@@ -406,7 +406,7 @@ fn bench_vello(
                 },
             )
             .expect("vello render");
-        hal.device.poll(wgpu::Maintain::Wait);
+        hal.device.poll(wgpu::PollType::wait_indefinitely());
         let dt = t0.elapsed().as_secs_f64() * 1000.0;
         if frame >= WARMUP {
             samples.push(dt);
@@ -448,7 +448,7 @@ fn bench_directo(
             wgpu::LoadOp::Clear(wgpu::Color::BLACK),
         );
         hal.queue.submit(std::iter::once(encoder.finish()));
-        hal.device.poll(wgpu::Maintain::Wait);
+        hal.device.poll(wgpu::PollType::wait_indefinitely());
         let dt = t0.elapsed().as_secs_f64() * 1000.0;
         if frame >= WARMUP {
             samples.push(dt);
@@ -501,7 +501,7 @@ fn bench_vello_persistent(
                 },
             )
             .expect("vello render");
-        hal.device.poll(wgpu::Maintain::Wait);
+        hal.device.poll(wgpu::PollType::wait_indefinitely());
         let dt = t0.elapsed().as_secs_f64() * 1000.0;
         if frame >= WARMUP {
             samples.push(dt);
@@ -569,7 +569,7 @@ fn bench_directo_persistent(
     // Asegurar que toda la escritura previa esté en la GPU antes de
     // empezar a medir frames — si no, el primer frame paga el upload.
     hal.queue.submit(std::iter::empty::<wgpu::CommandBuffer>());
-    hal.device.poll(wgpu::Maintain::Wait);
+    hal.device.poll(wgpu::PollType::wait_indefinitely());
 
     let mut samples: Vec<f64> = Vec::with_capacity(MEASURED);
     for frame in 0..(WARMUP + MEASURED) {
@@ -585,6 +585,7 @@ fn bench_directo_persistent(
                 color_attachments: &[Some(wgpu::RenderPassColorAttachment {
                     view,
                     resolve_target: None,
+                    depth_slice: None,
                     ops: wgpu::Operations {
                         load: wgpu::LoadOp::Clear(wgpu::Color::BLACK),
                         store: wgpu::StoreOp::Store,
@@ -600,7 +601,7 @@ fn bench_directo_persistent(
             pass.draw(0..6, 0..n);
         }
         hal.queue.submit(std::iter::once(encoder.finish()));
-        hal.device.poll(wgpu::Maintain::Wait);
+        hal.device.poll(wgpu::PollType::wait_indefinitely());
         let dt = t0.elapsed().as_secs_f64() * 1000.0;
         if frame >= WARMUP {
             samples.push(dt);
@@ -865,7 +866,7 @@ fn export_directo_png(
         wgpu::LoadOp::Clear(wgpu::Color::BLACK),
     );
     hal.queue.submit(std::iter::once(encoder.finish()));
-    hal.device.poll(wgpu::Maintain::Wait);
+    hal.device.poll(wgpu::PollType::wait_indefinitely());
     write_texture_png(hal, target, path)
 }
 
@@ -916,7 +917,7 @@ fn write_texture_png(hal: &Hal, target: &wgpu::Texture, path: &str) -> Result<()
     slice.map_async(wgpu::MapMode::Read, move |r| {
         let _ = tx.send(r);
     });
-    hal.device.poll(wgpu::Maintain::Wait);
+    hal.device.poll(wgpu::PollType::wait_indefinitely());
     rx.recv().map_err(|e| e.to_string())?.map_err(|e| e.to_string())?;
     let data = slice.get_mapped_range();
 
diff --git a/llimphi-hal/Cargo.toml b/llimphi-hal/Cargo.toml
index 3a84ca8..40b5a13 100644
--- a/llimphi-hal/Cargo.toml
+++ b/llimphi-hal/Cargo.toml
@@ -1,13 +1,13 @@
 [package]
 name = "llimphi-hal"
-description = "Surface/device HAL for the llimphi UI framework (wgpu) — one scene tree across Wayland/X11/Win32/Android/bare-metal."
 version.workspace = true
 edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 
+description = "Surface/device HAL for the llimphi UI framework (wgpu) — one scene tree across Wayland/X11/Win32/Android/bare-metal."
+repository.workspace = true
 [dependencies]
 wgpu = { workspace = true }
 raw-window-handle = { workspace = true }
diff --git a/llimphi-hal/src/lib.rs b/llimphi-hal/src/lib.rs
index b2285c7..a5b6585 100644
--- a/llimphi-hal/src/lib.rs
+++ b/llimphi-hal/src/lib.rs
@@ -20,6 +20,23 @@ pub enum SurfaceError {
     Outdated,
     OutOfMemory,
     Timeout,
+    /// La surface quedó **irrecuperable a nivel de dispositivo**: reconfigurar
+    /// y recrear la `wgpu::Surface` (reusando el mismo device/adapter) fallaron
+    /// ambos. El único remedio es reconstruir todo el stack GPU
+    /// (instance+adapter+device+queue+surface) y con él los recursos colgados
+    /// del device (renderer vello, compositores, texturas). El dueño del bucle
+    /// de render debe atrapar esta variante y rehacer su mundo GPU — ver
+    /// [`Hal::recreate_for_window`] (camino winit) y el runner de layer-shell de
+    /// `pata` (camino raw-surface). Distinta de [`SurfaceError::Lost`], que es
+    /// un hipo transitorio que la propia surface ya recuperó.
+    ///
+    /// Se dispara en el modo de falla de Iris Xe bajo mirada-DRM: al resetear
+    /// el output, la surface Vulkan cae con «Surface does not support the
+    /// adapter's queue family» y recrearla contra el mismo adapter no ayuda.
+    /// Antes esto tumbaba/loopeaba a los clientes (greeter/pata/shuma) o exigía
+    /// forzar el backend GL; la recuperación de device lo resuelve de forma
+    /// general (no atada a esta GPU).
+    DeviceLost,
     Other(String),
 }
 
@@ -30,6 +47,7 @@ impl std::fmt::Display for SurfaceError {
             Self::Outdated => write!(f, "surface outdated"),
             Self::OutOfMemory => write!(f, "surface out of memory"),
             Self::Timeout => write!(f, "surface timeout"),
+            Self::DeviceLost => write!(f, "device lost (full GPU-stack rebuild required)"),
             Self::Other(s) => write!(f, "surface error: {s}"),
         }
     }
@@ -84,7 +102,7 @@ pub struct Frame {
     intermediate_view: wgpu::TextureView,
     /// Textura secundaria para la capa de overlay (menús/paleta/modal)
     /// cuando hay contenido `gpu_paint` que la taparía. El overlay se
-    /// rasteriza acá con fondo transparente y luego se compone con
+    /// rasteriza aquí con fondo transparente y luego se compone con
     /// alpha SOBRE la intermedia (que ya tiene UI + video). Ver
     /// [`OverlayCompositor`] y el eventloop de `llimphi-ui`.
     overlay_view: wgpu::TextureView,
@@ -117,16 +135,157 @@ pub struct Hal {
     pub queue: wgpu::Queue,
 }
 
+/// Override del backend wgpu por la env `LLIMPHI_WGPU_BACKEND`. Valores:
+/// `gl`/`gles`/`opengl`/`egl` → GL; `vulkan`/`vk` → Vulkan; `primary` → PRIMARY;
+/// `all` → todos. Sin la env (o valor no reconocido) devuelve `None` y el caller
+/// usa su default (PRIMARY con fallback a todos).
+///
+/// **Para qué**: en Iris Xe bajo mirada-DRM, el backend Vulkan revienta al
+/// reconfigurar la surface tras un reset de output («Surface does not support the
+/// adapter's queue family»: falta `VK_EXT_physical_device_drm` y wgpu no puede
+/// re-matchear el adapter a la surface recreada). Como recrear la surface reusa el
+/// mismo device/adapter, el error persiste y los clientes layer (greeter/pata/
+/// shuma) entran en crash-loop al boot y en cada cambio de VT. Forzar GL
+/// (`LLIMPHI_WGPU_BACKEND=gl`) esquiva el problema —GL no tiene el concepto de
+/// queue family— al costo del bug de teardown de GL (SIGSEGV al cerrar, tolerable
+/// frente a un crash-loop que impide la sesión). Los clientes lo heredan del env
+/// del compositor. Ver memoria `pata-layer-closed-arje-drm`.
+fn backend_override() -> Option<wgpu::Backends> {
+    let v = std::env::var("LLIMPHI_WGPU_BACKEND").ok()?;
+    match v.trim().to_ascii_lowercase().as_str() {
+        "gl" | "gles" | "opengl" | "egl" => Some(wgpu::Backends::GL),
+        "vulkan" | "vk" => Some(wgpu::Backends::VULKAN),
+        "primary" => Some(wgpu::Backends::PRIMARY),
+        "all" => Some(wgpu::Backends::all()),
+        other => {
+            eprintln!("llimphi-hal: LLIMPHI_WGPU_BACKEND=«{other}» no reconocido; uso el default (PRIMARY)");
+            None
+        }
+    }
+}
+
+/// Pista de memoria explícita por la env `LLIMPHI_WGPU_MEM`. `low`/`min`/`ram`
+/// → [`MemoryHints::MemoryUsage`] (el asignador de wgpu minimiza la huella:
+/// bloques de suballocación chicos, menos reserva especulativa). `perf` →
+/// [`MemoryHints::Performance`] (pools grandes, prioriza velocidad). `None` si
+/// la env no está o no se reconoce → el caller **autodetecta** (ver
+/// [`resolver_memory_hint`]). El manager de `pacha` la fija por contexto para
+/// equipos chicos; sin ella, la app decide sola.
+fn memory_hint_env() -> Option<wgpu::MemoryHints> {
+    match std::env::var("LLIMPHI_WGPU_MEM")
+        .map(|v| v.trim().to_ascii_lowercase())
+        .as_deref()
+    {
+        Ok("low") | Ok("min") | Ok("ram") | Ok("memoria") => Some(wgpu::MemoryHints::MemoryUsage),
+        Ok("perf") | Ok("performance") | Ok("velocidad") => Some(wgpu::MemoryHints::Performance),
+        Ok(other) if !other.is_empty() => {
+            eprintln!("llimphi-hal: LLIMPHI_WGPU_MEM=«{other}» no reconocido; autodetecto");
+            None
+        }
+        _ => None,
+    }
+}
+
+/// Resuelve la pista de memoria del device: la env manda; sin ella,
+/// **autoadapta** a la máquina. Un adapter de tipo `Cpu` (raster por software,
+/// llvmpipe / VM sin GPU) no tiene VRAM y compone contra la RAM del sistema, así
+/// que ahí `MemoryUsage` (mínima huella) es la elección correcta por defecto. Con
+/// una GPU real se mantiene `Performance` salvo que el env/pacha pida lo
+/// contrario. Es la contraparte a nivel de render de `pacha_core::Rendimiento`.
+fn resolver_memory_hint(adapter: &wgpu::Adapter) -> wgpu::MemoryHints {
+    if let Some(h) = memory_hint_env() {
+        return h;
+    }
+    match adapter.get_info().device_type {
+        wgpu::DeviceType::Cpu => wgpu::MemoryHints::MemoryUsage,
+        _ => wgpu::MemoryHints::Performance,
+    }
+}
+
+/// Preferencia de potencia por la env `LLIMPHI_WGPU_POWER`. `low`/`ahorro` →
+/// [`PowerPreference::LowPower`] (elige la iGPU integrada en equipos híbridos:
+/// menos consumo, menos RAM de driver, y de paso esquiva el problema de dmabuf
+/// cruzando dispositivos en Optimus). Sin la env → `HighPerformance`, el default
+/// de siempre. Una barra o un WM 2D nunca necesitan la dGPU discreta.
+fn power_preference_override() -> wgpu::PowerPreference {
+    match std::env::var("LLIMPHI_WGPU_POWER")
+        .map(|v| v.trim().to_ascii_lowercase())
+        .as_deref()
+    {
+        Ok("low") | Ok("ahorro") | Ok("integrada") => wgpu::PowerPreference::LowPower,
+        Ok("high") | Ok("alto") | Ok("discreta") => wgpu::PowerPreference::HighPerformance,
+        Ok(other) if !other.is_empty() => {
+            eprintln!("llimphi-hal: LLIMPHI_WGPU_POWER=«{other}» no reconocido; uso HighPerformance");
+            wgpu::PowerPreference::HighPerformance
+        }
+        _ => wgpu::PowerPreference::HighPerformance,
+    }
+}
+
+/// Gancho de verificación: fuerza un [`SurfaceError::DeviceLost`] sintético cada
+/// N cuadros para poder ejercitar la recuperación de device SIN esperar un reset
+/// de output real (que en Iris Xe sólo pasa bajo mirada-DRM, no bajo KDE/kwin).
+///
+/// Activar con `LLIMPHI_SIMULATE_DEVICE_LOSS=N` (N≥1): cada N `acquire()`
+/// exitosos, el N-ésimo devuelve `DeviceLost` en vez de un `Frame`. El dueño del
+/// bucle debe reconstruir todo el stack GPU; si tras eso el render sigue vivo y
+/// sin fugas, la recuperación quedó certificada como texto (no screenshot). Sin
+/// la env, es un no-op de coste cero (un `load` atómico Relaxed). El contador es
+/// global al proceso: con varias surfaces reparte los trips entre ellas, lo cual
+/// es justo lo que queremos (probar que CUALQUIER surface dispara el rebuild).
+fn simulate_device_loss_trip() -> bool {
+    use std::sync::atomic::{AtomicU64, Ordering};
+    use std::sync::OnceLock;
+    static PERIOD: OnceLock<Option<u64>> = OnceLock::new();
+    let period = *PERIOD.get_or_init(|| {
+        std::env::var("LLIMPHI_SIMULATE_DEVICE_LOSS")
+            .ok()
+            .and_then(|v| v.trim().parse::<u64>().ok())
+            .filter(|n| *n >= 1)
+    });
+    let Some(period) = period else { return false };
+    static COUNT: AtomicU64 = AtomicU64::new(0);
+    // fetch_add devuelve el valor previo; el trip cae en el múltiplo de period.
+    (COUNT.fetch_add(1, Ordering::Relaxed) + 1) % period == 0
+}
+
 impl Hal {
     /// Construye Hal pidiendo un adapter compatible con una surface dada
     /// (recomendado: pasar `Some(&surface)` para garantizar que el adapter
     /// elegido sabe presentar a esa surface).
     pub async fn new(
         compatible_surface: Option<&wgpu::Surface<'static>>,
+    ) -> Result<Self, HalError> {
+        Self::new_inner(compatible_surface, false).await
+    }
+
+    /// Construye un `Hal` **headless** (sin surface) prefiriendo el adapter de
+    /// **software** (llvmpipe/lavapipe, `deviceType == CPU`) cuando
+    /// `prefer_software`. Es el modo de los tests golden de `llimphi-test`: el
+    /// rasterizador por software es DETERMINISTA e idéntico host-a-host y en CI,
+    /// así el golden no queda atado a la GPU de quien lo generó. Si la máquina no
+    /// expone un fallback adapter (no hay lavapipe instalado), cae al adapter
+    /// normal — en ese caso el golden se certifica con tolerancia perceptual, no
+    /// bit-exacta. Nunca pasa `compatible_surface`: renderiza a textura, no
+    /// presenta a ventana.
+    pub async fn new_headless(prefer_software: bool) -> Result<Self, HalError> {
+        if prefer_software {
+            if let Ok(hal) = Self::new_inner(None, true).await {
+                return Ok(hal);
+            }
+            // Sin fallback adapter disponible: seguimos con el adapter normal; la
+            // tolerancia perceptual del arnés absorbe la diferencia de vendor.
+        }
+        Self::new_inner(None, false).await
+    }
+
+    async fn new_inner(
+        compatible_surface: Option<&wgpu::Surface<'static>>,
+        force_fallback_adapter: bool,
     ) -> Result<Self, HalError> {
         let opts = wgpu::RequestAdapterOptions {
-            power_preference: wgpu::PowerPreference::HighPerformance,
-            force_fallback_adapter: false,
+            power_preference: power_preference_override(),
+            force_fallback_adapter,
             compatible_surface,
         };
         // Preferimos backends PRIMARY (Vulkan/Metal/DX12). El backend GL de
@@ -140,12 +299,16 @@ impl Hal {
         // camino de escritorio `compatible_surface` es `None` (la surface se
         // crea después contra esta misma instancia), así que cambiar de
         // instancia aquí es seguro.
+        // Override por env (`LLIMPHI_WGPU_BACKEND`) o PRIMARY por default.
+        let forced = backend_override();
         let primary = wgpu::Instance::new(&wgpu::InstanceDescriptor {
-            backends: wgpu::Backends::PRIMARY,
+            backends: forced.unwrap_or(wgpu::Backends::PRIMARY),
             ..Default::default()
         });
         let (instance, adapter) = match primary.request_adapter(&opts).await {
             Ok(a) => (primary, a),
+            // Con override explícito NO caemos a otros backends: el operador eligió.
+            Err(_) if forced.is_some() => return Err(HalError::NoAdapter),
             Err(_) => {
                 let all = wgpu::Instance::new(&wgpu::InstanceDescriptor::default());
                 let a = all
@@ -165,12 +328,13 @@ impl Hal {
                 label: Some("llimphi-hal-device"),
                 required_features: wgpu::Features::empty(),
                 required_limits: limits,
-                memory_hints: wgpu::MemoryHints::Performance,
+                memory_hints: resolver_memory_hint(&adapter),
                 experimental_features: wgpu::ExperimentalFeatures::default(),
                 trace: wgpu::Trace::Off,
             })
             .await
             .map_err(|e| HalError::RequestDevice(e.to_string()))?;
+        instalar_handler_errores(&device);
         Ok(Self {
             instance,
             adapter,
@@ -208,28 +372,32 @@ impl Hal {
     ) -> Result<(Self, RawSurface), HalError> {
         // PRIMARY (Vulkan/Metal/DX12) primero; si no hay adaptador compatible, a
         // todos los backends recreando instancia y surface.
+        // Override por env (`LLIMPHI_WGPU_BACKEND`) o PRIMARY por default.
+        let forced = backend_override();
         let primary = wgpu::Instance::new(&wgpu::InstanceDescriptor {
-            backends: wgpu::Backends::PRIMARY,
+            backends: forced.unwrap_or(wgpu::Backends::PRIMARY),
             ..Default::default()
         });
         let prim_surface = unsafe { primary.create_surface_unsafe(make_target()) }
             .map_err(|e| HalError::CreateSurface(e.to_string()))?;
         let prim_adapter = primary
             .request_adapter(&wgpu::RequestAdapterOptions {
-                power_preference: wgpu::PowerPreference::HighPerformance,
+                power_preference: power_preference_override(),
                 force_fallback_adapter: false,
                 compatible_surface: Some(&prim_surface),
             })
             .await;
         let (instance, adapter, wgpu_surface) = match prim_adapter {
             Ok(a) => (primary, a, prim_surface),
+            // Con override explícito NO caemos a otros backends: el operador eligió.
+            Err(_) if forced.is_some() => return Err(HalError::NoAdapter),
             Err(_) => {
                 let all = wgpu::Instance::new(&wgpu::InstanceDescriptor::default());
                 let surface = unsafe { all.create_surface_unsafe(make_target()) }
                     .map_err(|e| HalError::CreateSurface(e.to_string()))?;
                 let a = all
                     .request_adapter(&wgpu::RequestAdapterOptions {
-                        power_preference: wgpu::PowerPreference::HighPerformance,
+                        power_preference: power_preference_override(),
                         force_fallback_adapter: false,
                         compatible_surface: Some(&surface),
                     })
@@ -244,19 +412,104 @@ impl Hal {
                 label: Some("llimphi-hal-device"),
                 required_features: wgpu::Features::empty(),
                 required_limits: limits,
-                memory_hints: wgpu::MemoryHints::Performance,
+                memory_hints: resolver_memory_hint(&adapter),
                 experimental_features: wgpu::ExperimentalFeatures::default(),
                 trace: wgpu::Trace::Off,
             })
             .await
             .map_err(|e| HalError::RequestDevice(e.to_string()))?;
+        instalar_handler_errores(&device);
         let hal = Self {
             instance,
             adapter,
             device,
             queue,
         };
-        let surface = RawSurface::from_surface(&hal, wgpu_surface, width, height)?;
+        // Extraemos los raw handles del target para que la `RawSurface` pueda
+        // recrearse ante una pérdida (los `RawHandle` son `Copy`).
+        let (raw_display, raw_window) = match make_target() {
+            wgpu::SurfaceTargetUnsafe::RawHandle {
+                raw_display_handle,
+                raw_window_handle,
+            } => (raw_display_handle, raw_window_handle),
+            _ => {
+                return Err(HalError::CreateSurface(
+                    "new_for_raw_surface requiere SurfaceTargetUnsafe::RawHandle".into(),
+                ))
+            }
+        };
+        let surface =
+            RawSurface::from_surface(&hal, wgpu_surface, raw_display, raw_window, width, height)?;
+        Ok((hal, surface))
+    }
+
+    /// Reconstruye **todo el stack GPU** (instance+adapter+device+queue) y una
+    /// [`WinitSurface`] nueva sobre la MISMA ventana, eligiendo el adapter
+    /// compatible con la surface recreada. Es la recuperación real ante
+    /// [`SurfaceError::DeviceLost`] en el camino winit (apps `llimphi_ui::run`:
+    /// greeter/shuma/nada/cosmos…): reconfigurar o recrear sólo la surface no
+    /// alcanza cuando el adapter dejó de matchear (Iris Xe «queue family»); hay
+    /// que rehacer el device entero. Tras esto el caller debe reconstruir lo que
+    /// cuelga del device (renderer vello, compositores, texturas de la app)
+    /// contra el `Hal` devuelto.
+    ///
+    /// Es **surface-first** (crea la surface antes de pedir el adapter con
+    /// `compatible_surface`), lo correcto para garantizar el match adapter↔surface
+    /// tras la pérdida. Bloquea internamente (`pollster`) porque la recuperación
+    /// ocurre dentro de un handler de redraw síncrono. Respeta el override de
+    /// backend (`LLIMPHI_WGPU_BACKEND`) igual que [`Hal::new`].
+    pub fn recreate_for_window(
+        window: Arc<Window>,
+    ) -> Result<(Self, WinitSurface), HalError> {
+        let forced = backend_override();
+        let make_instance = |backends: wgpu::Backends| {
+            wgpu::Instance::new(&wgpu::InstanceDescriptor {
+                backends,
+                ..Default::default()
+            })
+        };
+        let request_adapter = |inst: &wgpu::Instance, surf: &wgpu::Surface<'static>| {
+            pollster::block_on(inst.request_adapter(&wgpu::RequestAdapterOptions {
+                power_preference: power_preference_override(),
+                force_fallback_adapter: false,
+                compatible_surface: Some(surf),
+            }))
+        };
+        let primary = make_instance(forced.unwrap_or(wgpu::Backends::PRIMARY));
+        let prim_surface = primary
+            .create_surface(window.clone())
+            .map_err(|e| HalError::CreateSurface(e.to_string()))?;
+        let (instance, adapter, surface) = match request_adapter(&primary, &prim_surface) {
+            Ok(a) => (primary, a, prim_surface),
+            // Con override explícito NO caemos a otros backends: el operador eligió.
+            Err(_) if forced.is_some() => return Err(HalError::NoAdapter),
+            Err(_) => {
+                let all = make_instance(wgpu::Backends::all());
+                let surface = all
+                    .create_surface(window.clone())
+                    .map_err(|e| HalError::CreateSurface(e.to_string()))?;
+                let a = request_adapter(&all, &surface).map_err(|_| HalError::NoAdapter)?;
+                (all, a, surface)
+            }
+        };
+        let limits = wgpu::Limits::default().using_resolution(adapter.limits());
+        let (device, queue) = pollster::block_on(adapter.request_device(&wgpu::DeviceDescriptor {
+            label: Some("llimphi-hal-device"),
+            required_features: wgpu::Features::empty(),
+            required_limits: limits,
+            memory_hints: resolver_memory_hint(&adapter),
+            experimental_features: wgpu::ExperimentalFeatures::default(),
+            trace: wgpu::Trace::Off,
+        }))
+        .map_err(|e| HalError::RequestDevice(e.to_string()))?;
+        instalar_handler_errores(&device);
+        let hal = Self {
+            instance,
+            adapter,
+            device,
+            queue,
+        };
+        let surface = WinitSurface::from_surface(&hal, window, surface)?;
         Ok((hal, surface))
     }
 }
@@ -265,7 +518,7 @@ impl Hal {
 /// intermedia `Rgba8Unorm` con storage binding (donde pinta vello) y
 /// un `TextureBlitter` que la copia al swapchain al presentar.
 pub struct WinitSurface {
-    _window: Arc<Window>,
+    window: Arc<Window>,
     surface: wgpu::Surface<'static>,
     config: wgpu::SurfaceConfiguration,
     device: wgpu::Device,
@@ -275,6 +528,10 @@ pub struct WinitSurface {
     overlay: wgpu::Texture,
     overlay_view: wgpu::TextureView,
     blitter: wgpu::util::TextureBlitter,
+    /// La instancia con que se creó la surface: guardada para poder RECREARLA
+    /// desde la ventana ante un hipo del compositor/GPU (ver
+    /// [`WinitSurface::recreate`]) antes de escalar a un rebuild de device.
+    instance: wgpu::Instance,
 }
 
 const INTERMEDIATE_FORMAT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
@@ -334,14 +591,14 @@ impl WinitSurface {
             alpha_mode: caps.alpha_modes[0],
             view_formats: vec![],
         };
-        surface.configure(&hal.device, &config);
+        configure_checked(&hal.device, &surface, &config).map_err(HalError::CreateSurface)?;
         let (intermediate, intermediate_view) =
             create_intermediate(&hal.device, config.width, config.height);
         let (overlay, overlay_view) =
             create_intermediate(&hal.device, config.width, config.height);
         let blitter = wgpu::util::TextureBlitter::new(&hal.device, format);
         Ok(Self {
-            _window: window,
+            window,
             surface,
             config,
             device: hal.device.clone(),
@@ -350,12 +607,30 @@ impl WinitSurface {
             overlay,
             overlay_view,
             blitter,
+            instance: hal.instance.clone(),
         })
     }
 
     pub fn format(&self) -> wgpu::TextureFormat {
         self.config.format
     }
+
+    /// Recrea la `wgpu::Surface` desde la MISMA ventana winit y la reconfigura.
+    /// Paso intermedio de recuperación: barato frente a rehacer el device.
+    /// Lo llama [`WinitSurface::acquire`] cuando `get_current_texture` devuelve
+    /// `Outdated`/`Lost` y reconfigurar no bastó. Si tras esto la surface sigue
+    /// rota (el adapter dejó de matchear — Iris Xe «queue family»), `acquire`
+    /// escala a [`SurfaceError::DeviceLost`] y el dueño del bucle reconstruye el
+    /// `Hal` entero con [`Hal::recreate_for_window`].
+    fn recreate(&mut self) -> Result<(), String> {
+        let surface = self
+            .instance
+            .create_surface(self.window.clone())
+            .map_err(|e| format!("create_surface: {e}"))?;
+        configure_checked(&self.device, &surface, &self.config)?;
+        self.surface = surface;
+        Ok(())
+    }
 }
 
 /// Surface sobre una `wgpu::Surface` creada desde **handles raw** (sin
@@ -374,13 +649,25 @@ pub struct RawSurface {
     overlay: wgpu::Texture,
     overlay_view: wgpu::TextureView,
     blitter: wgpu::util::TextureBlitter,
+    /// La instancia + los raw handles del `wl_surface`/`wl_display`, guardados para
+    /// **recrear** la `wgpu::Surface` cuando queda irrecuperable (ver
+    /// [`RawSurface::recreate`]). Los `RawHandle` son `Copy` y apuntan a objetos
+    /// que el caller mantiene vivos toda la vida de la `RawSurface`.
+    instance: wgpu::Instance,
+    raw_display: raw_window_handle::RawDisplayHandle,
+    raw_window: raw_window_handle::RawWindowHandle,
 }
 
 impl RawSurface {
-    /// Envuelve una `wgpu::Surface` ya creada, con el tamaño físico inicial.
+    /// Envuelve una `wgpu::Surface` ya creada, con el tamaño físico inicial. Los
+    /// `raw_display`/`raw_window` son los handles con que se creó la surface: se
+    /// guardan para poder RECREARLA si el compositor la invalida (Iris Xe), ya que
+    /// reconfigurar la misma surface no siempre recupera.
     pub fn from_surface(
         hal: &Hal,
         surface: wgpu::Surface<'static>,
+        raw_display: raw_window_handle::RawDisplayHandle,
+        raw_window: raw_window_handle::RawWindowHandle,
         width: u32,
         height: u32,
     ) -> Result<Self, HalError> {
@@ -439,7 +726,7 @@ impl RawSurface {
             alpha_mode,
             view_formats: vec![],
         };
-        surface.configure(&hal.device, &config);
+        configure_checked(&hal.device, &surface, &config).map_err(HalError::CreateSurface)?;
         let (intermediate, intermediate_view) =
             create_intermediate(&hal.device, config.width, config.height);
         let (overlay, overlay_view) =
@@ -454,12 +741,36 @@ impl RawSurface {
             overlay,
             overlay_view,
             blitter,
+            instance: hal.instance.clone(),
+            raw_display,
+            raw_window,
         })
     }
 
     pub fn format(&self) -> wgpu::TextureFormat {
         self.config.format
     }
+
+    /// Recrea la `wgpu::Surface` desde el raw handle del `wl_surface` y la
+    /// reconfigura. Es la recuperación REAL cuando la surface quedó irrecuperable
+    /// —p. ej. `configure` falla con «Surface does not support the adapter's queue
+    /// family» tras un reset del compositor en Iris Xe—: reconfigurar la MISMA
+    /// surface no basta, hay que crear una nueva. Devuelve el error si falla (el
+    /// caller salta el frame y reintenta). Sin esto, la barra quedaba en un bucle
+    /// de «surface perdida» hasta que se caía la conexión (Broken pipe).
+    fn recreate(&mut self) -> Result<(), String> {
+        let target = wgpu::SurfaceTargetUnsafe::RawHandle {
+            raw_display_handle: self.raw_display,
+            raw_window_handle: self.raw_window,
+        };
+        // SAFETY: los handles apuntan a objetos Wayland que el caller mantiene
+        // vivos toda la vida de la `RawSurface` (mismo contrato que `from_surface`).
+        let surface = unsafe { self.instance.create_surface_unsafe(target) }
+            .map_err(|e| format!("create_surface_unsafe: {e}"))?;
+        configure_checked(&self.device, &surface, &self.config)?;
+        self.surface = surface;
+        Ok(())
+    }
 }
 
 impl Surface for RawSurface {
@@ -480,7 +791,16 @@ impl Surface for RawSurface {
         }
         self.config.width = w;
         self.config.height = h;
-        self.surface.configure(&self.device, &self.config);
+        if let Err(e) = configure_checked(&self.device, &self.surface, &self.config) {
+            // Igual que en `acquire`: si reconfigurar no recupera, recreamos la
+            // surface desde el raw handle antes de rendirnos.
+            match self.recreate() {
+                Ok(()) => eprintln!("llimphi-hal: surface RECREADA en resize (reconfigure falló: {e})"),
+                Err(e2) => {
+                    eprintln!("llimphi-hal: configure en resize falló ({e}); recrear también falló ({e2})")
+                }
+            }
+        }
         let (tex, view) = create_intermediate(&self.device, self.config.width, self.config.height);
         self.intermediate = tex;
         self.intermediate_view = view;
@@ -491,6 +811,11 @@ impl Surface for RawSurface {
     }
 
     fn acquire(&mut self) -> Result<Frame, SurfaceError> {
+        // Gancho de verificación: DeviceLost sintético cada N cuadros
+        // (`LLIMPHI_SIMULATE_DEVICE_LOSS`). No-op sin la env.
+        if simulate_device_loss_trip() {
+            return Err(SurfaceError::DeviceLost);
+        }
         let texture = match self.surface.get_current_texture() {
             Ok(t) => t,
             // El backend layer-shell no tiene un evento de resize que reconfigure
@@ -498,11 +823,32 @@ impl Surface for RawSurface {
             // y reintentamos una vez. Sin esto el panel quedaría en negro para
             // siempre tras el primer `Outdated`.
             Err(e @ (wgpu::SurfaceError::Outdated | wgpu::SurfaceError::Lost)) => {
-                self.surface.configure(&self.device, &self.config);
-                self.surface.get_current_texture().map_err(|_| match e {
-                    wgpu::SurfaceError::Lost => SurfaceError::Lost,
-                    _ => SurfaceError::Outdated,
-                })?
+                // Reconfigurar CAPTURANDO: si la surface está realmente perdida,
+                // `configure` emite un error de validación que, sin captura,
+                // mataría el proceso (era el crash de pata). Aquí lo devolvemos
+                // como `DeviceLost` y el caller reconstruye el stack GPU.
+                if let Err(msg) = configure_checked(&self.device, &self.surface, &self.config) {
+                    // Reconfigurar no recuperó (surface realmente perdida): RECREAR
+                    // desde el raw handle contra el MISMO device. Si eso también
+                    // falla, el device quedó irrecuperable (el adapter dejó de
+                    // matchear — Iris Xe «queue family») → DeviceLost: el runner
+                    // de pata rehace `Hal` + todas las surfaces/renderers.
+                    match self.recreate() {
+                        Ok(()) => eprintln!(
+                            "llimphi-hal: surface RECREADA tras {e:?} (reconfigure falló: {msg})"
+                        ),
+                        Err(msg2) => {
+                            eprintln!(
+                                "llimphi-hal: reconfigurar tras {e:?} falló ({msg}); recrear también falló ({msg2}) → DeviceLost"
+                            );
+                            return Err(SurfaceError::DeviceLost);
+                        }
+                    }
+                }
+                // Sigue rota tras reconfigurar+recrear → device irrecuperable.
+                self.surface
+                    .get_current_texture()
+                    .map_err(|_| SurfaceError::DeviceLost)?
             }
             Err(wgpu::SurfaceError::OutOfMemory) => return Err(SurfaceError::OutOfMemory),
             Err(wgpu::SurfaceError::Timeout) => return Err(SurfaceError::Timeout),
@@ -574,6 +920,41 @@ fn choose_present_mode(caps: &wgpu::SurfaceCapabilities) -> wgpu::PresentMode {
     }
 }
 
+/// Instala en el device un handler de errores wgpu **no capturados** que LOGUEA
+/// en vez de dejar que el default de wgpu («Handling wgpu errors as fatal by
+/// default») paniquee el proceso entero. Un glitch de device —p. ej. la pérdida
+/// transitoria en un flap de VT bajo arje— NO debe tumbar la app (greeter, pata…):
+/// la recuperación de surface (`Outdated`/`Lost`) rearma en el próximo frame. Los
+/// errores de validación puntuales se siguen capturando con error-scopes aparte.
+fn instalar_handler_errores(device: &wgpu::Device) {
+    device.on_uncaptured_error(std::sync::Arc::new(|e| {
+        eprintln!("llimphi-hal: error wgpu no capturado (no fatal, ignorado): {e}");
+    }));
+}
+
+/// Configura el swapchain **capturando** los errores de validación de wgpu, en
+/// vez de dejar que el handler por defecto («wgpu errors as fatal») paniquee el
+/// proceso entero. Devuelve `Err(mensaje)` si la configuración falló — casi
+/// siempre porque la surface se perdió (`SURFACE_LOST`, un hipo transitorio del
+/// compositor/GPU): el caller decide (saltar el frame, marcar perdida) en vez de
+/// morir. Robustez: una app no debe caerse por un glitch del surface (lo que
+/// tumbaba a `pata` con «Surface does not support the adapter's queue family»).
+///
+/// Los errores de validación de wgpu son CPU-side: el scope los captura durante
+/// la llamada, así que `pop_error_scope` resuelve sin bloquear contra la GPU.
+fn configure_checked(
+    device: &wgpu::Device,
+    surface: &wgpu::Surface<'static>,
+    config: &wgpu::SurfaceConfiguration,
+) -> Result<(), String> {
+    device.push_error_scope(wgpu::ErrorFilter::Validation);
+    surface.configure(device, config);
+    match pollster::block_on(device.pop_error_scope()) {
+        Some(e) => Err(e.to_string()),
+        None => Ok(()),
+    }
+}
+
 fn create_intermediate(
     device: &wgpu::Device,
     width: u32,
@@ -593,7 +974,7 @@ fn create_intermediate(
         // STORAGE_BINDING: vello escribe via compute shader.
         // TEXTURE_BINDING: el blitter la lee como sampler source.
         // RENDER_ATTACHMENT: render passes con clear-only (sin vello)
-        //   también escriben acá — desktop drivers lo tolerían sin este
+        //   también escriben aquí — desktop drivers lo tolerían sin este
         //   flag, Adreno con validación estricta rechaza el frame.
         usage: wgpu::TextureUsages::STORAGE_BINDING
             | wgpu::TextureUsages::TEXTURE_BINDING
@@ -1525,7 +1906,9 @@ impl Surface for WinitSurface {
     fn resize(&mut self, width: u32, height: u32) {
         self.config.width = width.max(1);
         self.config.height = height.max(1);
-        self.surface.configure(&self.device, &self.config);
+        if let Err(e) = configure_checked(&self.device, &self.surface, &self.config) {
+            eprintln!("llimphi-hal: configure en resize falló (surface perdida?): {e}");
+        }
         let (tex, view) = create_intermediate(&self.device, self.config.width, self.config.height);
         self.intermediate = tex;
         self.intermediate_view = view;
@@ -1536,13 +1919,47 @@ impl Surface for WinitSurface {
     }
 
     fn acquire(&mut self) -> Result<Frame, SurfaceError> {
-        let texture = self.surface.get_current_texture().map_err(|e| match e {
-            wgpu::SurfaceError::Lost => SurfaceError::Lost,
-            wgpu::SurfaceError::Outdated => SurfaceError::Outdated,
-            wgpu::SurfaceError::OutOfMemory => SurfaceError::OutOfMemory,
-            wgpu::SurfaceError::Timeout => SurfaceError::Timeout,
-            other => SurfaceError::Other(format!("{other:?}")),
-        })?;
+        // Gancho de verificación: fuerza un DeviceLost sintético cada N cuadros
+        // (env `LLIMPHI_SIMULATE_DEVICE_LOSS`) para ejercitar el rebuild sin un
+        // reset de output real. No-op sin la env.
+        if simulate_device_loss_trip() {
+            return Err(SurfaceError::DeviceLost);
+        }
+        let texture = match self.surface.get_current_texture() {
+            Ok(t) => t,
+            // El camino winit tampoco tenía recuperación: un `Outdated`/`Lost`
+            // (hipo del compositor, cambio de VT) se propagaba y la app saltaba
+            // el frame para siempre en el peor caso. Reconfiguramos; si no basta,
+            // recreamos la surface desde la ventana; si ESO falla, el device
+            // quedó irrecuperable → DeviceLost (rebuild del stack GPU completo).
+            Err(e @ (wgpu::SurfaceError::Outdated | wgpu::SurfaceError::Lost)) => {
+                if let Err(msg) = configure_checked(&self.device, &self.surface, &self.config) {
+                    match self.recreate() {
+                        Ok(()) => eprintln!(
+                            "llimphi-hal: WinitSurface RECREADA tras {e:?} (reconfigure falló: {msg})"
+                        ),
+                        Err(msg2) => {
+                            eprintln!(
+                                "llimphi-hal: reconfigurar tras {e:?} falló ({msg}); recrear también falló ({msg2}) → DeviceLost"
+                            );
+                            return Err(SurfaceError::DeviceLost);
+                        }
+                    }
+                }
+                self.surface.get_current_texture().map_err(|e2| match e2 {
+                    // Sigue rota tras reconfigurar+recrear → device irrecuperable.
+                    wgpu::SurfaceError::Lost | wgpu::SurfaceError::Outdated => {
+                        SurfaceError::DeviceLost
+                    }
+                    wgpu::SurfaceError::OutOfMemory => SurfaceError::OutOfMemory,
+                    wgpu::SurfaceError::Timeout => SurfaceError::Timeout,
+                    other => SurfaceError::Other(format!("{other:?}")),
+                })?
+            }
+            Err(wgpu::SurfaceError::OutOfMemory) => return Err(SurfaceError::OutOfMemory),
+            Err(wgpu::SurfaceError::Timeout) => return Err(SurfaceError::Timeout),
+            Err(other) => return Err(SurfaceError::Other(format!("{other:?}"))),
+        };
         let surface_view = texture
             .texture
             .create_view(&wgpu::TextureViewDescriptor::default());
diff --git a/llimphi-icons/Cargo.toml b/llimphi-icons/Cargo.toml
index 31d3abb..274cfc9 100644
--- a/llimphi-icons/Cargo.toml
+++ b/llimphi-icons/Cargo.toml
@@ -5,8 +5,8 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-icons — set mínimo de iconos vectoriales (BezPath en grid 24×24) renderizables vía paint_with. Stroke-based, escalables. Cubre las acciones canónicas de cualquier UI tawasuyu."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
diff --git a/llimphi-icons/LEEME.md b/llimphi-icons/LEEME.md
new file mode 100644
index 0000000..2797850
--- /dev/null
+++ b/llimphi-icons/LEEME.md
@@ -0,0 +1,54 @@
+# llimphi-icons
+
+*Read this in English: [README.md](README.md).*
+
+Set canónico de iconos vectoriales para apps tawasuyu.
+
+Cada icono es una función pura que devuelve un `BezPath` definido en
+un grid lógico de **24×24 unidades**. El renderer escala al rect que
+reciba, así un mismo icono sirve para 12px (en una fila de lista) y
+para 64px (en una hero card) sin pérdida de nitidez — es vector,
+no bitmap.
+
+## Diseño
+
+- **Stroke-based, no fill**: los iconos son trazos de ancho 2 (en
+  unidades del grid) con joins/caps suaves. El stroke se renderiza
+  con el color que la app elija (típicamente `theme.fg_text` o
+  `theme.accent`).
+- **Geometría minimal, no marca**: glifos genéricos universales,
+  no "marca registrada". Cada uno debe ser reconocible al primer
+  vistazo aún en 12×12.
+- **Set acotado**: suficientes para cubrir el grueso de acciones y
+  tipos que aparecen en cualquier UI tawasuyu. Si una app necesita uno
+  más, lo agrega aquí (no en su propio crate) — la consistencia
+  visual importa más que el aislamiento.
+
+## Catálogo
+
+| Categoría    | Iconos                                              |
+|--------------|-----------------------------------------------------|
+| Documento    | `file`, `folder`, `folder_open`, `save`, `open`     |
+| Edición      | `plus`, `minus`, `x`, `check`, `edit`, `trash`      |
+| Navegación   | `chevron_up`, `chevron_down`, `chevron_left`, `chevron_right`, `home`, `search` |
+| Estado       | `info`, `warning`, `error`, `bell`                  |
+| Sistema      | `settings`, `more`                                  |
+| Multimedia   | `play`, `pause`, `stop`, `skip_*`, `volume*`, `repeat`, `shuffle`, `record`, `equalizer`, `camera`, `gauge` |
+| Archivos     | `image`, `music`, `film`, `archive`, `code`, `file_text`, `link`, `font` |
+
+## Uso
+```ignore
+use llimphi_icons::{Icon, icon_view};
+
+// Botón con icono "save":
+let btn = View::new(style)
+    .fill(palette.bg_button)
+    .children(vec![icon_view(Icon::Save, palette.fg_text, 1.6)]);
+```
+El parámetro `stroke_width` (3er arg de `icon_view`) está en unidades
+del grid (24×24). `1.6` es el default armonioso; `2.0` para énfasis;
+`1.2` para iconos en tipografías pequeñas.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../LEEME.md).
diff --git a/llimphi-icons/README.md b/llimphi-icons/README.md
new file mode 100644
index 0000000..268f76b
--- /dev/null
+++ b/llimphi-icons/README.md
@@ -0,0 +1,50 @@
+# llimphi-icons
+
+The canonical set of vector icons for tawasuyu apps.
+
+Every icon is a pure function returning a `BezPath` defined on a logical grid of
+**24×24 units**. The renderer scales it to whatever rect it gets, so the same
+icon serves at 12px (in a list row) and at 64px (in a hero card) with no loss of
+sharpness — it is vector, not bitmap.
+
+## Design
+
+- **Stroke-based, not filled**: icons are strokes of width 2 (in grid units) with
+  soft joins and caps. The stroke is rendered in whatever colour the app chooses
+  (typically `theme.fg_text` or `theme.accent`).
+- **Minimal geometry, not a logo**: universal generic glyphs, not "trademarks".
+  Each one must be recognizable at a glance even at 12×12.
+- **A bounded set**: enough to cover the bulk of actions and types appearing in
+  any tawasuyu UI. If an app needs one more, it adds it here (not in its own
+  crate) — visual consistency matters more than isolation.
+
+## Catalog
+
+| Category   | Icons                                               |
+|------------|-----------------------------------------------------|
+| Document   | `file`, `folder`, `folder_open`, `save`, `open`      |
+| Editing    | `plus`, `minus`, `x`, `check`, `edit`, `trash`       |
+| Navigation | `chevron_up`, `chevron_down`, `chevron_left`, `chevron_right`, `home`, `search` |
+| Status     | `info`, `warning`, `error`, `bell`                   |
+| System     | `settings`, `more`                                   |
+| Multimedia | `play`, `pause`, `stop`, `skip_*`, `volume*`, `repeat`, `shuffle`, `record`, `equalizer`, `camera`, `gauge` |
+| Files      | `image`, `music`, `film`, `archive`, `code`, `file_text`, `link`, `font` |
+
+## Use
+
+```ignore
+use llimphi_icons::{Icon, icon_view};
+
+// A button with the "save" icon:
+let btn = View::new(style)
+    .fill(palette.bg_button)
+    .children(vec![icon_view(Icon::Save, palette.fg_text, 1.6)]);
+```
+
+The `stroke_width` parameter (3rd argument of `icon_view`) is in grid units
+(24×24). `1.6` is the harmonious default; `2.0` for emphasis; `1.2` for icons
+next to small type.
+
+---
+
+Part of **llimphi** — see [llimphi](../README.md).
diff --git a/llimphi-icons/src/app_icons.rs b/llimphi-icons/src/app_icons.rs
index ebae925..ac83f0f 100644
--- a/llimphi-icons/src/app_icons.rs
+++ b/llimphi-icons/src/app_icons.rs
@@ -1,7 +1,7 @@
 //! `app_icons` — iconos de marca, uno por dominio/app de tawasuyu.
 //!
 //! A diferencia del set canónico de [`crate::Icon`] (glifos genéricos de
-//! acción: file, save, search…), acá vive **un glifo distintivo por app**.
+//! acción: file, save, search…), aquí vive **un glifo distintivo por app**.
 //! Cada app tiene su símbolo y su **color de marca** propios, pero todos
 //! comparten el mismo lenguaje visual:
 //!
@@ -49,7 +49,7 @@ pub enum AppIcon {
     Nakui,
     Tinkuy,
     // --- 02_ruway · HACER ---
-    Ayni,
+    Suilad,
     Cards,
     Chasqui,
     Llimphi,
@@ -62,6 +62,8 @@ pub enum AppIcon {
     Takiy,
     Tullpu,
     Wawa,
+    Hapiy,
+    Raymi,
     // --- 03_ukupacha · RAÍZ ---
     Agora,
     Arje,
@@ -71,7 +73,7 @@ pub enum AppIcon {
 }
 
 /// Las 29 apps, en orden de cuadrante. Útil para iterar (galerías, tests).
-pub const ALL: [AppIcon; 29] = [
+pub const ALL: [AppIcon; 31] = [
     AppIcon::Chaka,
     AppIcon::Khipu,
     AppIcon::Pineal,
@@ -83,7 +85,7 @@ pub const ALL: [AppIcon; 29] = [
     AppIcon::Iniy,
     AppIcon::Nakui,
     AppIcon::Tinkuy,
-    AppIcon::Ayni,
+    AppIcon::Suilad,
     AppIcon::Cards,
     AppIcon::Chasqui,
     AppIcon::Llimphi,
@@ -96,6 +98,8 @@ pub const ALL: [AppIcon; 29] = [
     AppIcon::Takiy,
     AppIcon::Tullpu,
     AppIcon::Wawa,
+    AppIcon::Hapiy,
+    AppIcon::Raymi,
     AppIcon::Agora,
     AppIcon::Arje,
     AppIcon::Minga,
@@ -118,7 +122,7 @@ impl AppIcon {
             AppIcon::Iniy => "iniy",
             AppIcon::Nakui => "nakui",
             AppIcon::Tinkuy => "tinkuy",
-            AppIcon::Ayni => "ayni",
+            AppIcon::Suilad => "suilad",
             AppIcon::Cards => "cards",
             AppIcon::Chasqui => "chasqui",
             AppIcon::Llimphi => "llimphi",
@@ -131,6 +135,8 @@ impl AppIcon {
             AppIcon::Takiy => "takiy",
             AppIcon::Tullpu => "tullpu",
             AppIcon::Wawa => "wawa",
+            AppIcon::Hapiy => "hapiy",
+            AppIcon::Raymi => "raymi",
             AppIcon::Agora => "agora",
             AppIcon::Arje => "arje",
             AppIcon::Minga => "minga",
@@ -162,7 +168,7 @@ impl AppIcon {
             AppIcon::Iniy => (124, 179, 66),
             AppIcon::Nakui => (194, 84, 157),
             AppIcon::Tinkuy => (217, 83, 79),
-            AppIcon::Ayni => (42, 168, 196),
+            AppIcon::Suilad => (42, 168, 196),
             AppIcon::Cards => (142, 99, 206),
             AppIcon::Chasqui => (52, 179, 106),
             AppIcon::Llimphi => (229, 91, 122),
@@ -175,6 +181,8 @@ impl AppIcon {
             AppIcon::Takiy => (229, 99, 155),
             AppIcon::Tullpu => (224, 96, 58),
             AppIcon::Wawa => (91, 141, 239),
+            AppIcon::Hapiy => (38, 184, 156),
+            AppIcon::Raymi => (216, 88, 120),
             AppIcon::Agora => (47, 158, 143),
             AppIcon::Arje => (176, 141, 87),
             AppIcon::Minga => (224, 123, 57),
@@ -198,7 +206,7 @@ impl AppIcon {
             AppIcon::Iniy => path_iniy(),
             AppIcon::Nakui => path_nakui(),
             AppIcon::Tinkuy => path_tinkuy(),
-            AppIcon::Ayni => path_ayni(),
+            AppIcon::Suilad => path_suilad(),
             AppIcon::Cards => path_cards(),
             AppIcon::Chasqui => path_chasqui(),
             AppIcon::Llimphi => path_llimphi(),
@@ -211,6 +219,8 @@ impl AppIcon {
             AppIcon::Takiy => path_takiy(),
             AppIcon::Tullpu => path_tullpu(),
             AppIcon::Wawa => path_wawa(),
+            AppIcon::Hapiy => path_hapiy(),
+            AppIcon::Raymi => path_raymi(),
             AppIcon::Agora => path_agora(),
             AppIcon::Arje => path_arje(),
             AppIcon::Minga => path_minga(),
@@ -248,6 +258,31 @@ pub fn app_icon_view_colored<Msg: Clone + 'static>(
     })
 }
 
+/// Exporta el icono de app como **SVG** (string), en su color de marca.
+/// Mismo dibujo que [`app_icon_view`] pero en un formato de archivo: sirve para
+/// los `.desktop` (freedesktop `scalable/apps/<id>.svg`), la web, o cualquier
+/// consumidor que no renderice con Llimphi. El path es stroke-only con remates
+/// redondos, igual que el pintor vectorial. `viewBox 0 0 24 24` (la grilla).
+pub fn app_icon_svg(icon: AppIcon, stroke_width: f32) -> String {
+    let d = icon.path().to_svg();
+    let [r, g, b, _] = icon.brand().components;
+    let q = |v: f32| (v.clamp(0.0, 1.0) * 255.0).round() as u8;
+    let hex = format!("#{:02x}{:02x}{:02x}", q(r), q(g), q(b));
+    format!(
+        "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" \
+fill=\"none\" stroke=\"{hex}\" stroke-width=\"{sw}\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\
+<path d=\"{d}\"/></svg>\n",
+        sw = fmt_num(stroke_width),
+    )
+}
+
+/// Formatea un f32 sin ceros de cola (`1.8` no `1.8000`).
+fn fmt_num(v: f32) -> String {
+    let s = format!("{v:.3}");
+    let s = s.trim_end_matches('0').trim_end_matches('.');
+    s.to_string()
+}
+
 /// Pintor crudo — para stampear varios iconos de app dentro del mismo
 /// `paint_with` (una grilla de launcher, por ejemplo).
 pub fn paint_app_icon(
@@ -506,8 +541,8 @@ fn path_tinkuy() -> BezPath {
 
 // --- 02_ruway · HACER ---
 
-fn path_ayni() -> BezPath {
-    // ayni = reciprocidad: dos flechas curvas en ciclo.
+fn path_suilad() -> BezPath {
+    // suilad = saludo mutuo (élfico); ciclo de reciprocidad: dos flechas curvas en ciclo.
     let mut p = BezPath::new();
     // Arco superior, flecha hacia la derecha-abajo.
     p.move_to((6.0, 8.0));
@@ -774,6 +809,42 @@ fn path_sandokan() -> BezPath {
     p
 }
 
+fn path_hapiy() -> BezPath {
+    // hapiy = asir/capturar: marco de cuatro esquinas (encuadre de captura).
+    let mut p = BezPath::new();
+    p.move_to((4.0, 8.0));
+    p.line_to((4.0, 4.0));
+    p.line_to((8.0, 4.0)); // sup-izq
+    p.move_to((16.0, 4.0));
+    p.line_to((20.0, 4.0));
+    p.line_to((20.0, 8.0)); // sup-der
+    p.move_to((20.0, 16.0));
+    p.line_to((20.0, 20.0));
+    p.line_to((16.0, 20.0)); // inf-der
+    p.move_to((8.0, 20.0));
+    p.line_to((4.0, 20.0));
+    p.line_to((4.0, 16.0)); // inf-izq
+    p
+}
+
+fn path_raymi() -> BezPath {
+    // raymi = fiesta/calendario: hoja con anillas, cabecera y día marcado.
+    let mut p = BezPath::new();
+    p.move_to((4.0, 6.0));
+    p.line_to((20.0, 6.0));
+    p.line_to((20.0, 20.0));
+    p.line_to((4.0, 20.0));
+    p.close_path();
+    p.move_to((4.0, 10.0));
+    p.line_to((20.0, 10.0)); // cabecera
+    p.move_to((8.0, 4.0));
+    p.line_to((8.0, 7.5)); // anilla izq
+    p.move_to((16.0, 4.0));
+    p.line_to((16.0, 7.5)); // anilla der
+    push_all(&mut p, circle(12.0, 15.0, 1.8, 12)); // día marcado
+    p
+}
+
 fn path_wawa_explorer() -> BezPath {
     // wawa-explorer = launchpad: grilla 2×2.
     let mut p = BezPath::new();
@@ -803,6 +874,17 @@ mod tests {
         }
     }
 
+    #[test]
+    fn svg_export_es_valido() {
+        for icon in ALL {
+            let svg = app_icon_svg(icon, 1.8);
+            assert!(svg.starts_with("<svg"), "{} svg sin cabecera", icon.name());
+            assert!(svg.contains("<path d=\"M"), "{} svg sin path", icon.name());
+            assert!(svg.contains("stroke=\"#"), "{} svg sin color de marca", icon.name());
+            assert!(svg.trim_end().ends_with("</svg>"), "{} svg sin cierre", icon.name());
+        }
+    }
+
     #[test]
     fn app_names_are_unique() {
         let mut names: Vec<&str> = ALL.iter().map(|i| i.name()).collect();
diff --git a/llimphi-icons/src/lib.rs b/llimphi-icons/src/lib.rs
index 5767476..75b531e 100644
--- a/llimphi-icons/src/lib.rs
+++ b/llimphi-icons/src/lib.rs
@@ -124,6 +124,48 @@ pub enum Icon {
     Table,
     /// Dos paneles verticales lado a lado (modo dual).
     Columns,
+    // --- Dominio: creador de mundos (llimphi-voxel-studio) ---
+    /// Globo terráqueo (Mundos).
+    Globe,
+    /// Cadena montañosa (Biomas).
+    Mountain,
+    /// Hoja con nervadura (Materiales).
+    Leaf,
+    /// Silueta de persona (Seres).
+    User,
+    /// Gota de agua (Leyes / físicas).
+    Droplet,
+    // --- Sistema / settings panels (sweep glifo→vector 2026-06-30) ---
+    /// Reloj con manecillas (hora, contextos, tiempo).
+    Clock,
+    /// Símbolo de encendido/apagado.
+    Power,
+    /// Sobre de correo.
+    Mail,
+    /// Teclado (atajos).
+    Keyboard,
+    /// Paleta de pintor (themes/apariencia).
+    Palette,
+    /// Candado (seguridad/privacidad).
+    Lock,
+    /// Llave.
+    Key,
+    /// Monitor/pantalla (sistema, acerca del equipo).
+    Monitor,
+    /// Destello de cuatro puntas (animaciones, efectos).
+    Sparkle,
+    /// Micrófono (voz, audio in).
+    Mic,
+    /// Ratón.
+    Mouse,
+    /// Nube (red/online).
+    Cloud,
+    /// Luna (modo oscuro, noche).
+    Moon,
+    /// Flecha circular (recargar/refrescar).
+    Refresh,
+    /// Pieza de rompecabezas (plugins/módulos).
+    Puzzle,
 }
 
 impl Icon {
@@ -182,6 +224,26 @@ impl Icon {
             Icon::Rows => "rows",
             Icon::Table => "table",
             Icon::Columns => "columns",
+            Icon::Globe => "globe",
+            Icon::Mountain => "mountain",
+            Icon::Leaf => "leaf",
+            Icon::User => "user",
+            Icon::Droplet => "droplet",
+            Icon::Clock => "clock",
+            Icon::Power => "power",
+            Icon::Mail => "mail",
+            Icon::Keyboard => "keyboard",
+            Icon::Palette => "palette",
+            Icon::Lock => "lock",
+            Icon::Key => "key",
+            Icon::Monitor => "monitor",
+            Icon::Sparkle => "sparkle",
+            Icon::Mic => "mic",
+            Icon::Mouse => "mouse",
+            Icon::Cloud => "cloud",
+            Icon::Moon => "moon",
+            Icon::Refresh => "refresh",
+            Icon::Puzzle => "puzzle",
         }
     }
 
@@ -240,8 +302,122 @@ impl Icon {
             Icon::Rows => path_rows(),
             Icon::Table => path_table(),
             Icon::Columns => path_columns(),
+            Icon::Globe => path_globe(),
+            Icon::Mountain => path_mountain(),
+            Icon::Leaf => path_leaf(),
+            Icon::User => path_user(),
+            Icon::Droplet => path_droplet(),
+            Icon::Clock => path_clock(),
+            Icon::Power => path_power(),
+            Icon::Mail => path_mail(),
+            Icon::Keyboard => path_keyboard(),
+            Icon::Palette => path_palette(),
+            Icon::Lock => path_lock(),
+            Icon::Key => path_key(),
+            Icon::Monitor => path_monitor(),
+            Icon::Sparkle => path_sparkle(),
+            Icon::Mic => path_mic(),
+            Icon::Mouse => path_mouse(),
+            Icon::Cloud => path_cloud(),
+            Icon::Moon => path_moon(),
+            Icon::Refresh => path_refresh(),
+            Icon::Puzzle => path_puzzle(),
         }
     }
+
+    /// Mapea un **glifo unicode** (el que muchas apps usaban como ícono de
+    /// texto) al `Icon` vectorial equivalente. Es el corazón del barrido
+    /// glifo→vector: un sitio de render hace `from_glyph(s)` y, si hay match,
+    /// pinta el vector (determinista en toda máquina) en vez del glifo de fuente
+    /// (que en hardware sin esa fuente sale notdef/tofu). `None` ⇒ el caller cae
+    /// a texto. Acepta el glifo con o sin variation-selector (`\u{FE0F}`).
+    pub fn from_glyph(glifo: &str) -> Option<Icon> {
+        let g = glifo.trim().trim_end_matches('\u{FE0F}');
+        let mut chars = g.chars();
+        let c = chars.next()?;
+        if chars.next().is_some() {
+            // Más de un code-point (sin el VS16): no es un glifo-ícono simple.
+            return None;
+        }
+        Some(match c {
+            // Multimedia / transporte
+            '▶' | '►' | '⏵' => Icon::Play,
+            '⏸' => Icon::Pause,
+            '⏹' | '■' => Icon::Stop,
+            '⏺' | '●' | '◉' | '⚫' => Icon::Record,
+            '⏮' | '⏪' => Icon::SkipBack,
+            '⏭' | '⏩' => Icon::SkipForward,
+            '🔀' => Icon::Shuffle,
+            '🔁' | '🔂' => Icon::Repeat,
+            '🔊' | '🔉' | '🔈' => Icon::Volume,
+            '🔇' => Icon::VolumeMute,
+            '♪' | '♫' | '🎵' | '🎶' => Icon::Music,
+            '🎙' | '🎤' => Icon::Mic,
+            '🎛' | '🎚' => Icon::Equalizer,
+            '📷' | '📸' => Icon::Camera,
+            '🎞' | '🎬' | '📽' => Icon::Film,
+            '🖼' => Icon::Image,
+            // Navegación / chevrons / flechas
+            '▲' | '△' => Icon::ChevronUp,
+            '▼' | '▽' => Icon::ChevronDown,
+            '◀' | '◁' | '‹' => Icon::ChevronLeft,
+            '▷' | '›' | '❯' | '❭' | '⟩' => Icon::ChevronRight,
+            '⟳' | '🔃' | '🔄' | '↻' | '⥁' => Icon::Refresh,
+            // Sistema / settings
+            '⚙' | '🛠' | '🔧' => Icon::Settings,
+            '☰' | '≡' | '≣' | '𝍢' => Icon::Rows,
+            '▦' | '▤' | '⊞' | '𐩕' => Icon::Grid,
+            '⏻' | '⏼' | '⭘' => Icon::Power,
+            '🎨' => Icon::Palette,
+            '⌨' => Icon::Keyboard,
+            '🖥' | '💻' | '🖳' => Icon::Monitor,
+            '🖱' => Icon::Mouse,
+            '🔐' | '🔒' | '🔏' => Icon::Lock,
+            '🔑' | '🗝' => Icon::Key,
+            '✉' | '📧' | '📨' | '📩' => Icon::Mail,
+            '🧩' => Icon::Puzzle,
+            '☁' => Icon::Cloud,
+            '🌐' | '🌍' | '🌎' | '🌏' => Icon::Globe,
+            '🌙' | '🌚' | '☾' | '◐' => Icon::Moon,
+            '✨' | '✦' | '✶' | '✷' | '❇' | '❋' | '★' | '☆' | '✩' => Icon::Sparkle,
+            '◴' | '◷' | '◵' | '◶' | '🕐' | '🕒' | '⏰' | '⌚' => Icon::Clock,
+            // Documento / contenido
+            '📄' | '📃' | '📝' => Icon::FileText,
+            '📁' | '📂' => Icon::Folder,
+            '💾' => Icon::Save,
+            '🔍' | '🔎' => Icon::Search,
+            '🔔' => Icon::Bell,
+            '🗑' => Icon::Trash,
+            '👤' | '🧑' | '🙍' => Icon::User,
+            'ℹ' | 'ⓘ' => Icon::Info,
+            '⚠' => Icon::Warning,
+            '➕' | '+' => Icon::Plus,
+            '✕' | '✖' | '×' | '✗' => Icon::X,
+            '✓' | '✔' => Icon::Check,
+            _ => return None,
+        })
+    }
+}
+
+/// Vista de un glifo como **ícono vectorial** si [`Icon::from_glyph`] lo conoce,
+/// o como texto (su fallback histórico) si no. Es el reemplazo directo de
+/// `.text_aligned(glifo, …)` en los sitios de render que usaban íconos-glifo:
+/// el resultado es determinista en toda máquina cuando hay match.
+pub fn glyph_or_text_view<Msg: Clone + 'static>(
+    glifo: &str,
+    size: f32,
+    color: Color,
+    stroke_width: f32,
+) -> View<Msg> {
+    match Icon::from_glyph(glifo) {
+        Some(icon) => icon_view(icon, color, stroke_width),
+        None => View::new(Style {
+            position: Position::Absolute,
+            size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+            ..Default::default()
+        })
+        .text_aligned(glifo.to_string(), size, color, llimphi_ui::llimphi_text::Alignment::Center),
+    }
 }
 
 /// Construye un `View` que pinta el icono ocupando todo el rect del
@@ -635,6 +811,72 @@ fn path_circle(cx: f64, cy: f64, r: f64, segments: usize) -> BezPath {
     p
 }
 
+// ---------------------------------------------------------------------
+// Dominio — creador de mundos (llimphi-voxel-studio)
+// ---------------------------------------------------------------------
+
+fn path_globe() -> BezPath {
+    // Esfera + un meridiano (elipse angosta) + dos paralelos.
+    let mut p = path_circle(12.0, 12.0, 9.0, 32);
+    p.move_to((12.0, 3.0));
+    p.curve_to((6.5, 7.0), (6.5, 17.0), (12.0, 21.0));
+    p.move_to((12.0, 3.0));
+    p.curve_to((17.5, 7.0), (17.5, 17.0), (12.0, 21.0));
+    p.move_to((3.6, 9.3));
+    p.line_to((20.4, 9.3));
+    p.move_to((3.6, 14.7));
+    p.line_to((20.4, 14.7));
+    p
+}
+
+fn path_mountain() -> BezPath {
+    // Cordillera de dos picos + nieve en el mayor.
+    let mut p = BezPath::new();
+    p.move_to((2.0, 20.0));
+    p.line_to((8.5, 8.0));
+    p.line_to((13.0, 15.0));
+    p.line_to((16.0, 11.0));
+    p.line_to((22.0, 20.0));
+    p.close_path();
+    // Nieve del pico mayor.
+    p.move_to((6.6, 11.5));
+    p.line_to((8.5, 8.0));
+    p.line_to((10.3, 11.0));
+    p
+}
+
+fn path_leaf() -> BezPath {
+    // Hoja: contorno por dos curvas + nervadura central.
+    let mut p = BezPath::new();
+    p.move_to((5.0, 19.0));
+    p.curve_to((5.0, 9.0), (12.0, 4.0), (19.0, 5.0));
+    p.curve_to((20.0, 12.0), (15.0, 19.0), (5.0, 19.0));
+    p.close_path();
+    p.move_to((7.5, 16.5));
+    p.line_to((16.5, 7.5));
+    p
+}
+
+fn path_user() -> BezPath {
+    // Persona: cabeza (círculo) + hombros (arco).
+    let mut p = path_circle(12.0, 8.0, 4.0, 24);
+    p.move_to((4.5, 20.0));
+    p.curve_to((4.5, 14.5), (19.5, 14.5), (19.5, 20.0));
+    p
+}
+
+fn path_droplet() -> BezPath {
+    // Gota: punta arriba, panza redonda abajo.
+    let mut p = BezPath::new();
+    p.move_to((12.0, 3.0));
+    p.curve_to((12.0, 3.0), (18.5, 11.0), (18.5, 15.5));
+    p.curve_to((18.5, 19.5), (15.5, 21.5), (12.0, 21.5));
+    p.curve_to((8.5, 21.5), (5.5, 19.5), (5.5, 15.5));
+    p.curve_to((5.5, 11.0), (12.0, 3.0), (12.0, 3.0));
+    p.close_path();
+    p
+}
+
 // ---------------------------------------------------------------------
 // Multimedia — transporte de reproductor (media-app y demás)
 // ---------------------------------------------------------------------
@@ -1025,6 +1267,214 @@ fn path_columns() -> BezPath {
     p
 }
 
+// ---- Sweep glifo→vector: íconos de sistema/settings -----------------------
+
+fn path_clock() -> BezPath {
+    let mut p = path_circle(12.0, 12.0, 8.5, 28);
+    p.move_to((12.0, 12.0));
+    p.line_to((12.0, 6.5)); // manecilla de hora
+    p.move_to((12.0, 12.0));
+    p.line_to((16.0, 13.5)); // minutero
+    p
+}
+
+fn path_power() -> BezPath {
+    use std::f64::consts::{FRAC_PI_2, TAU};
+    let mut p = BezPath::new();
+    let (cx, cy, r) = (12.0, 13.0, 7.0);
+    let segs = 28;
+    // Anillo con un hueco arriba (clásico símbolo de encendido).
+    let start = -FRAC_PI_2 + 0.55;
+    let end = -FRAC_PI_2 - 0.55 + TAU;
+    for i in 0..=segs {
+        let t = start + (end - start) * (i as f64) / (segs as f64);
+        let (x, y) = (cx + r * t.cos(), cy + r * t.sin());
+        if i == 0 {
+            p.move_to((x, y));
+        } else {
+            p.line_to((x, y));
+        }
+    }
+    p.move_to((12.0, 4.0));
+    p.line_to((12.0, 12.0)); // barra vertical
+    p
+}
+
+fn path_mail() -> BezPath {
+    let mut p = BezPath::new();
+    p.move_to((3.5, 6.0));
+    p.line_to((20.5, 6.0));
+    p.line_to((20.5, 18.0));
+    p.line_to((3.5, 18.0));
+    p.close_path();
+    p.move_to((3.5, 6.5));
+    p.line_to((12.0, 13.0));
+    p.line_to((20.5, 6.5)); // solapa
+    p
+}
+
+fn path_keyboard() -> BezPath {
+    let mut p = BezPath::new();
+    p.move_to((2.5, 7.0));
+    p.line_to((21.5, 7.0));
+    p.line_to((21.5, 17.0));
+    p.line_to((2.5, 17.0));
+    p.close_path();
+    for (x, y) in [(5.5, 10.0), (9.0, 10.0), (12.5, 10.0), (16.0, 10.0)] {
+        p.move_to((x, y));
+        p.line_to((x + 1.6, y));
+    }
+    p.move_to((8.0, 13.8));
+    p.line_to((16.0, 13.8)); // barra espaciadora
+    p
+}
+
+fn path_palette() -> BezPath {
+    let mut p = path_circle(12.0, 12.0, 8.5, 28);
+    let hueco = path_circle(12.0, 16.5, 1.8, 12); // agujero del pulgar
+    for el in hueco.elements() {
+        p.push(*el);
+    }
+    for (cx, cy) in [(8.3, 9.0), (12.0, 7.4), (15.7, 9.4)] {
+        let muestra = path_circle(cx, cy, 1.0, 10);
+        for el in muestra.elements() {
+            p.push(*el);
+        }
+    }
+    p
+}
+
+fn path_lock() -> BezPath {
+    let mut p = BezPath::new();
+    p.move_to((6.0, 11.0));
+    p.line_to((18.0, 11.0));
+    p.line_to((18.0, 20.0));
+    p.line_to((6.0, 20.0));
+    p.close_path();
+    p.move_to((8.5, 11.0));
+    p.line_to((8.5, 8.0));
+    p.curve_to((8.5, 5.0), (15.5, 5.0), (15.5, 8.0));
+    p.line_to((15.5, 11.0)); // arco
+    p
+}
+
+fn path_key() -> BezPath {
+    let mut p = path_circle(8.0, 8.0, 3.5, 18); // ojo
+    p.move_to((10.5, 10.5));
+    p.line_to((19.0, 19.0)); // caña
+    p.move_to((16.5, 16.5));
+    p.line_to((19.0, 14.0)); // diente
+    p
+}
+
+fn path_monitor() -> BezPath {
+    let mut p = BezPath::new();
+    p.move_to((3.0, 5.0));
+    p.line_to((21.0, 5.0));
+    p.line_to((21.0, 16.0));
+    p.line_to((3.0, 16.0));
+    p.close_path();
+    p.move_to((9.5, 19.0));
+    p.line_to((14.5, 19.0)); // base
+    p.move_to((12.0, 16.0));
+    p.line_to((12.0, 19.0)); // cuello
+    p
+}
+
+fn path_sparkle() -> BezPath {
+    let mut p = BezPath::new();
+    p.move_to((12.0, 3.0));
+    p.line_to((13.7, 10.3));
+    p.line_to((21.0, 12.0));
+    p.line_to((13.7, 13.7));
+    p.line_to((12.0, 21.0));
+    p.line_to((10.3, 13.7));
+    p.line_to((3.0, 12.0));
+    p.line_to((10.3, 10.3));
+    p.close_path();
+    p
+}
+
+fn path_mic() -> BezPath {
+    let mut p = BezPath::new();
+    p.move_to((9.0, 6.0));
+    p.curve_to((9.0, 3.5), (15.0, 3.5), (15.0, 6.0));
+    p.line_to((15.0, 11.0));
+    p.curve_to((15.0, 13.5), (9.0, 13.5), (9.0, 11.0));
+    p.close_path();
+    p.move_to((6.5, 11.0));
+    p.curve_to((6.5, 16.0), (17.5, 16.0), (17.5, 11.0)); // soporte
+    p.move_to((12.0, 16.0));
+    p.line_to((12.0, 20.0));
+    p.move_to((8.5, 20.0));
+    p.line_to((15.5, 20.0));
+    p
+}
+
+fn path_mouse() -> BezPath {
+    let mut p = BezPath::new();
+    p.move_to((7.0, 8.0));
+    p.curve_to((7.0, 4.0), (17.0, 4.0), (17.0, 8.0));
+    p.line_to((17.0, 16.0));
+    p.curve_to((17.0, 20.0), (7.0, 20.0), (7.0, 16.0));
+    p.close_path();
+    p.move_to((12.0, 5.0));
+    p.line_to((12.0, 9.0)); // rueda
+    p
+}
+
+fn path_cloud() -> BezPath {
+    let mut p = BezPath::new();
+    p.move_to((7.0, 17.0));
+    p.curve_to((3.5, 17.0), (3.5, 12.0), (7.0, 12.0));
+    p.curve_to((7.0, 7.5), (13.5, 7.0), (14.5, 11.0));
+    p.curve_to((18.5, 10.5), (20.5, 16.0), (17.0, 17.0));
+    p.close_path();
+    p
+}
+
+fn path_moon() -> BezPath {
+    let mut p = BezPath::new();
+    p.move_to((15.0, 4.5));
+    p.curve_to((9.0, 6.0), (9.0, 18.0), (15.0, 19.5));
+    p.curve_to((10.0, 17.0), (10.0, 7.0), (15.0, 4.5));
+    p.close_path();
+    p
+}
+
+fn path_refresh() -> BezPath {
+    let mut p = BezPath::new();
+    let (cx, cy, r) = (12.0, 12.0, 7.0);
+    let segs = 24;
+    let (start, end) = (-2.2_f64, 2.2_f64);
+    for i in 0..=segs {
+        let t = start + (end - start) * (i as f64) / (segs as f64);
+        let (x, y) = (cx + r * t.cos(), cy + r * t.sin());
+        if i == 0 {
+            p.move_to((x, y));
+        } else {
+            p.line_to((x, y));
+        }
+    }
+    let (ex, ey) = (cx + r * end.cos(), cy + r * end.sin());
+    p.move_to((ex - 1.6, ey - 1.9));
+    p.line_to((ex, ey));
+    p.line_to((ex + 2.2, ey - 0.7)); // cabeza de flecha
+    p
+}
+
+fn path_puzzle() -> BezPath {
+    let mut p = BezPath::new();
+    p.move_to((5.0, 9.0));
+    p.line_to((9.5, 9.0));
+    p.curve_to((9.5, 6.0), (14.5, 6.0), (14.5, 9.0));
+    p.line_to((19.0, 9.0));
+    p.line_to((19.0, 19.0));
+    p.line_to((5.0, 19.0));
+    p.close_path();
+    p
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;
@@ -1075,4 +1525,34 @@ mod tests {
         names.dedup();
         assert_eq!(names.len(), n, "nombres duplicados en Icon::name()");
     }
+
+    #[test]
+    fn iconos_nuevos_tienen_path() {
+        let nuevos = [
+            Icon::Clock, Icon::Power, Icon::Mail, Icon::Keyboard, Icon::Palette,
+            Icon::Lock, Icon::Key, Icon::Monitor, Icon::Sparkle, Icon::Mic,
+            Icon::Mouse, Icon::Cloud, Icon::Moon, Icon::Refresh, Icon::Puzzle,
+        ];
+        for icon in nuevos {
+            assert!(!icon.path().elements().is_empty(), "{} sin path", icon.name());
+        }
+    }
+
+    #[test]
+    fn from_glyph_mapea_los_comunes() {
+        // Casos que cubrían el bug del wawa-panel y de los menús.
+        assert_eq!(Icon::from_glyph("⚙"), Some(Icon::Settings));
+        assert_eq!(Icon::from_glyph("🎨"), Some(Icon::Palette));
+        assert_eq!(Icon::from_glyph("⌨"), Some(Icon::Keyboard));
+        assert_eq!(Icon::from_glyph("⏻"), Some(Icon::Power));
+        assert_eq!(Icon::from_glyph("✉"), Some(Icon::Mail));
+        assert_eq!(Icon::from_glyph("🔊"), Some(Icon::Volume));
+        assert_eq!(Icon::from_glyph("≡"), Some(Icon::Rows));
+        assert_eq!(Icon::from_glyph("▶"), Some(Icon::Play));
+        // Variation selector (emoji presentation) se tolera.
+        assert_eq!(Icon::from_glyph("🖥\u{FE0F}"), Some(Icon::Monitor));
+        // Texto real (no un glifo-ícono) no matchea → caería a texto.
+        assert_eq!(Icon::from_glyph("Archivo"), None);
+        assert_eq!(Icon::from_glyph(""), None);
+    }
 }
diff --git a/llimphi-image/Cargo.toml b/llimphi-image/Cargo.toml
new file mode 100644
index 0000000..90ebdf7
--- /dev/null
+++ b/llimphi-image/Cargo.toml
@@ -0,0 +1,18 @@
+[package]
+name = "llimphi-image"
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+authors.workspace = true
+publish.workspace = true
+description = "llimphi-image — helper para decodificar bytes/path a `peniko::Image` listo para `View::image()`. Reemplaza el patrón duplicado (image::ImageReader + to_rgba8 + Blob + Image::new) que hoy aparece en cada app que muestra imágenes."
+
+[features]
+# Descarga + caché de imágenes por URL (ureq síncrono). Opt-in para que el
+# crate base siga siendo sólo-decode, sin dependencia de red.
+net = ["dep:ureq"]
+
+[dependencies]
+llimphi-raster = { path = "../llimphi-raster", version = "0.1.0" }
+image = { workspace = true }
+ureq = { workspace = true, optional = true }
diff --git a/llimphi-image/LEEME.md b/llimphi-image/LEEME.md
new file mode 100644
index 0000000..2df5241
--- /dev/null
+++ b/llimphi-image/LEEME.md
@@ -0,0 +1,41 @@
+# llimphi-image
+
+*Read this in English: [README.md](README.md).*
+
+Decode pipeline para `peniko::Image`.
+
+Hoy el caller que quiere mostrar una imagen con `View::image()` hace:
+```ignore
+let reader = ImageReader::open(path)?.with_guessed_format()?;
+let img = reader.decode()?;
+let rgba = img.to_rgba8();
+let (w, h) = (rgba.width(), rgba.height());
+let blob = Blob::from(rgba.into_raw());
+let pen = Image::new(blob, ImageFormat::Rgba8, w, h);
+```
+Cinco líneas + dos llamadas a `?` por cada caller (nahual viewer,
+mirada wallpaper, viewer de gallería, etc.). Este crate las
+encapsula en dos helpers:
+
+- `decode_bytes` — toma `&[u8]` y devuelve `Result<peniko::Image>`.
+- `load_path` — toma `&Path` + `max_bytes` cap y devuelve
+  `Result<peniko::Image>`, con guardia de tamaño en disco (las apps
+  no quieren leer un .iso de 4 GB pensando que es una imagen).
+
+Con la feature `net` (opt-in, ureq síncrono) se suman descarga + caché por
+URL: `fetch_bytes`/`load_url` (bloqueantes, para correr en un worker) y
+`ImageCache` (`Clone + Send + Sync`) que la `view` consulta en el hilo UI
+mientras un `Handle::spawn` la puebla. El crate base queda sin dep de red.
+
+`image` (del crate `image`) se construye con `to_rgba8` siempre — la
+conversión necesaria para `peniko::ImageFormat::Rgba8`. Para imagen
+ya en `rgba8` en memoria (sin necesidad de decodificación), ver
+`from_rgba8`.
+
+Formatos: los que active la feature del crate `image` upstream (en
+el workspace, hoy: PNG, JPEG, WEBP). Otros se pueden habilitar
+agregando la feature; el helper no lo limita.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../LEEME.md).
diff --git a/llimphi-image/README.md b/llimphi-image/README.md
new file mode 100644
index 0000000..ebd4f98
--- /dev/null
+++ b/llimphi-image/README.md
@@ -0,0 +1,39 @@
+# llimphi-image
+
+Decode pipeline for `peniko::Image`.
+
+Today a caller wanting to show an image with `View::image()` writes:
+
+```ignore
+let reader = ImageReader::open(path)?.with_guessed_format()?;
+let img = reader.decode()?;
+let rgba = img.to_rgba8();
+let (w, h) = (rgba.width(), rgba.height());
+let blob = Blob::from(rgba.into_raw());
+let pen = Image::new(blob, ImageFormat::Rgba8, w, h);
+```
+
+Five lines plus two `?` per caller (the nahual viewer, the mirada wallpaper, the
+gallery viewer, and so on). This crate encapsulates them in two helpers:
+
+- `decode_bytes` — takes `&[u8]` and returns `Result<peniko::Image>`.
+- `load_path` — takes a `&Path` plus a `max_bytes` cap and returns
+  `Result<peniko::Image>`, with an on-disk size guard (apps do not want to read a
+  4 GB `.iso` thinking it is an image).
+
+With the `net` feature (opt-in, synchronous ureq) it adds download plus per-URL
+caching: `fetch_bytes`/`load_url` (blocking, to run in a worker) and `ImageCache`
+(`Clone + Send + Sync`) that the `view` consults on the UI thread while a
+`Handle::spawn` populates it. The base crate keeps no network dependency.
+
+The `image` (from the `image` crate) is always built with `to_rgba8` — the
+conversion `peniko::ImageFormat::Rgba8` requires. For an image already in
+`rgba8` in memory (no decoding needed) see `from_rgba8`.
+
+Formats: whatever the upstream `image` crate's features enable (in this
+workspace, today: PNG, JPEG, WEBP). Others can be turned on by adding the
+feature; the helper does not limit them.
+
+---
+
+Part of **llimphi** — see [llimphi](../README.md).
diff --git a/llimphi-image/src/lib.rs b/llimphi-image/src/lib.rs
new file mode 100644
index 0000000..bf9eb4c
--- /dev/null
+++ b/llimphi-image/src/lib.rs
@@ -0,0 +1,449 @@
+//! `llimphi-image` — decode pipeline para `peniko::Image`.
+//!
+//! Hoy el caller que quiere mostrar una imagen con `View::image()` hace:
+//!
+//! ```ignore
+//! let reader = ImageReader::open(path)?.with_guessed_format()?;
+//! let img = reader.decode()?;
+//! let rgba = img.to_rgba8();
+//! let (w, h) = (rgba.width(), rgba.height());
+//! let blob = Blob::from(rgba.into_raw());
+//! let pen = Image::new(blob, ImageFormat::Rgba8, w, h);
+//! ```
+//!
+//! Cinco líneas + dos llamadas a `?` por cada caller (nahual viewer,
+//! mirada wallpaper, viewer de gallería, etc.). Este crate las
+//! encapsula en dos helpers:
+//!
+//! - [`decode_bytes`] — toma `&[u8]` y devuelve `Result<peniko::Image>`.
+//! - [`load_path`] — toma `&Path` + `max_bytes` cap y devuelve
+//!   `Result<peniko::Image>`, con guardia de tamaño en disco (las apps
+//!   no quieren leer un .iso de 4 GB pensando que es una imagen).
+//!
+//! Con la feature `net` (opt-in, ureq síncrono) se suman descarga + caché por
+//! URL: [`fetch_bytes`]/[`load_url`] (bloqueantes, para correr en un worker) y
+//! [`ImageCache`] (`Clone + Send + Sync`) que la `view` consulta en el hilo UI
+//! mientras un `Handle::spawn` la puebla. El crate base queda sin dep de red.
+//!
+//! `image` (del crate `image`) se construye con `to_rgba8` siempre — la
+//! conversión necesaria para `peniko::ImageFormat::Rgba8`. Para imagen
+//! ya en `rgba8` en memoria (sin necesidad de decodificación), ver
+//! [`from_rgba8`].
+//!
+//! Formatos: los que active la feature del crate `image` upstream (en
+//! el workspace, hoy: PNG, JPEG, WEBP). Otros se pueden habilitar
+//! agregando la feature; el helper no lo limita.
+
+#![forbid(unsafe_code)]
+
+use std::path::Path;
+use std::sync::Arc;
+
+pub use llimphi_raster::peniko::{Blob, ImageAlphaType, ImageBrush as Image, ImageData, ImageFormat};
+
+/// Errores que puede devolver el decode pipeline. Mantenemos el detalle
+/// upstream (`String` con el mensaje del crate `image` o de IO) para no
+/// perder información al cruzar el seam, pero clasificado para que el
+/// caller decida si mostrar diferenciado (`TooBig` ≠ `Decode`).
+#[derive(Debug)]
+pub enum DecodeError {
+    /// IO error leyendo el path (no existe, sin permisos, etc.).
+    Io(std::io::Error),
+    /// El archivo supera el cap `max_bytes` pasado a [`load_path`].
+    TooBig {
+        size_bytes: u64,
+        max_bytes: u64,
+    },
+    /// El reader no reconoce el formato (extensión + magic bytes no
+    /// matchean ninguno activo).
+    UnsupportedFormat,
+    /// El decoder falló (archivo corrupto, formato malo).
+    Decode(String),
+}
+
+impl std::fmt::Display for DecodeError {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            DecodeError::Io(e) => write!(f, "IO: {e}"),
+            DecodeError::TooBig { size_bytes, max_bytes } => {
+                write!(f, "archivo demasiado grande: {size_bytes} bytes (cap: {max_bytes})")
+            }
+            DecodeError::UnsupportedFormat => f.write_str("formato no soportado"),
+            DecodeError::Decode(s) => write!(f, "decode: {s}"),
+        }
+    }
+}
+
+impl std::error::Error for DecodeError {}
+
+impl From<std::io::Error> for DecodeError {
+    fn from(e: std::io::Error) -> Self {
+        DecodeError::Io(e)
+    }
+}
+
+/// Construye un `peniko::Image` directamente desde bytes RGBA8 ya
+/// decodificados. No invoca el crate `image`. Útil para imágenes
+/// sintéticas o pre-decodificadas.
+///
+/// El `rgba` debe ser exactamente `w * h * 4` bytes (4 canales). Si
+/// no, el render mostrará basura — el helper no valida porque el
+/// constructor de `peniko::Image` tampoco; queda al caller.
+pub fn from_rgba8(rgba: Vec<u8>, w: u32, h: u32) -> Image {
+    let blob = Blob::new(Arc::new(rgba));
+    Image::new(ImageData {
+        data: blob,
+        format: ImageFormat::Rgba8,
+        alpha_type: ImageAlphaType::Alpha,
+        width: w,
+        height: h,
+    })
+}
+
+/// Decodifica bytes a un `peniko::Image` listo para `View::image()`.
+/// El crate `image` adivina el formato por magic bytes (no por
+/// extensión) — apto para data URIs, descargas, blobs de DB.
+pub fn decode_bytes(bytes: &[u8]) -> Result<Image, DecodeError> {
+    let reader = image::ImageReader::new(std::io::Cursor::new(bytes))
+        .with_guessed_format()
+        .map_err(DecodeError::Io)?;
+    if reader.format().is_none() {
+        return Err(DecodeError::UnsupportedFormat);
+    }
+    let img = reader
+        .decode()
+        .map_err(|e| DecodeError::Decode(e.to_string()))?;
+    let rgba = img.to_rgba8();
+    let (w, h) = (rgba.width(), rgba.height());
+    Ok(from_rgba8(rgba.into_raw(), w, h))
+}
+
+/// Lee un path, valida tamaño en disco, decodifica. El cap se compara
+/// contra el tamaño del archivo (NO la imagen decodificada, que en
+/// RGBA8 puede ser mucho mayor — un PNG 4K decomprimido ocupa ~64 MB).
+/// `max_bytes = 0` deshabilita el cap.
+pub fn load_path(path: &Path, max_bytes: u64) -> Result<Image, DecodeError> {
+    if max_bytes > 0 {
+        let meta = std::fs::metadata(path).map_err(DecodeError::Io)?;
+        if meta.len() > max_bytes {
+            return Err(DecodeError::TooBig {
+                size_bytes: meta.len(),
+                max_bytes,
+            });
+        }
+    }
+    let reader = image::ImageReader::open(path)
+        .map_err(DecodeError::Io)?
+        .with_guessed_format()
+        .map_err(DecodeError::Io)?;
+    if reader.format().is_none() {
+        return Err(DecodeError::UnsupportedFormat);
+    }
+    let img = reader
+        .decode()
+        .map_err(|e| DecodeError::Decode(e.to_string()))?;
+    let rgba = img.to_rgba8();
+    let (w, h) = (rgba.width(), rgba.height());
+    Ok(from_rgba8(rgba.into_raw(), w, h))
+}
+
+/// Descarga + caché de imágenes por URL (feature `net`). Síncrono (ureq):
+/// la idea es que la app lo llame desde un worker (`Handle::spawn` /
+/// `std::thread`), NO en el hilo de UI, y despache un `Msg` con la imagen
+/// decodificada. La [`ImageCache`] es `Clone + Send + Sync` (interna
+/// `Arc<Mutex<…>>`) para compartirse entre el hilo UI (lecturas) y los
+/// workers (descargas).
+#[cfg(feature = "net")]
+mod net {
+    use super::{decode_bytes, DecodeError, Image};
+    use std::collections::HashMap;
+    use std::io::Read;
+    use std::sync::{Arc, Mutex};
+
+    /// Errores de [`fetch_bytes`]/[`load_url`].
+    #[derive(Debug)]
+    pub enum FetchError {
+        /// La capa de red/HTTP falló (DNS, TLS, status no-2xx, timeout…).
+        Network(String),
+        /// El cuerpo descargado superó `max_bytes`.
+        TooBig { max_bytes: u64 },
+        /// Se descargó pero no se pudo decodificar como imagen.
+        Decode(DecodeError),
+    }
+
+    impl std::fmt::Display for FetchError {
+        fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+            match self {
+                FetchError::Network(s) => write!(f, "red: {s}"),
+                FetchError::TooBig { max_bytes } => {
+                    write!(f, "descarga supera el cap de {max_bytes} bytes")
+                }
+                FetchError::Decode(e) => write!(f, "{e}"),
+            }
+        }
+    }
+
+    impl std::error::Error for FetchError {}
+
+    impl From<DecodeError> for FetchError {
+        fn from(e: DecodeError) -> Self {
+            FetchError::Decode(e)
+        }
+    }
+
+    /// Descarga los bytes crudos de una URL (bloqueante). `max_bytes = 0`
+    /// deshabilita el cap; si no, corta la lectura apenas se excede (no
+    /// bufferiza un cuerpo gigante antes de rechazarlo).
+    pub fn fetch_bytes(url: &str, max_bytes: u64) -> Result<Vec<u8>, FetchError> {
+        let resp = ureq::get(url)
+            .call()
+            .map_err(|e| FetchError::Network(e.to_string()))?;
+        let mut reader = resp.into_reader();
+        let mut buf = Vec::new();
+        if max_bytes > 0 {
+            // Leemos hasta max_bytes+1: si llega a +1 sabemos que se pasó.
+            reader
+                .by_ref()
+                .take(max_bytes + 1)
+                .read_to_end(&mut buf)
+                .map_err(|e| FetchError::Network(e.to_string()))?;
+            if buf.len() as u64 > max_bytes {
+                return Err(FetchError::TooBig { max_bytes });
+            }
+        } else {
+            reader
+                .read_to_end(&mut buf)
+                .map_err(|e| FetchError::Network(e.to_string()))?;
+        }
+        Ok(buf)
+    }
+
+    /// Descarga + decodifica una URL a `peniko::Image` (bloqueante). Sin
+    /// caché — para eso usar [`ImageCache::get_or_fetch`].
+    pub fn load_url(url: &str, max_bytes: u64) -> Result<Image, FetchError> {
+        let bytes = fetch_bytes(url, max_bytes)?;
+        Ok(decode_bytes(&bytes)?)
+    }
+
+    /// Techo de imágenes vivas en la caché. Sin cota, `get_or_fetch` acumulaba
+    /// toda `Image` descargada durante la sesión (p. ej. navegar resultados de
+    /// media-tube) sin evictar nunca — fuga monótona de RAM. `get` re-descarga
+    /// si una URL fue evictada, así que evictar la más vieja es transparente.
+    pub(crate) const CACHE_CAP: usize = 256;
+
+    /// Caché de imágenes por URL, compartible entre hilos. La `peniko::Image`
+    /// es barata de clonar (su `Blob` es `Arc`-backed), así que `get` devuelve
+    /// una copia lista para `View::image()`. Evicción FIFO al superar
+    /// `CACHE_CAP`: `order` lleva el orden de inserción de claves nuevas, en
+    /// paso con `inner`.
+    #[derive(Clone, Default)]
+    pub struct ImageCache {
+        inner: Arc<Mutex<HashMap<String, Image>>>,
+        order: Arc<Mutex<std::collections::VecDeque<String>>>,
+    }
+
+    impl ImageCache {
+        pub fn new() -> Self {
+            Self::default()
+        }
+
+        /// Imagen cacheada para esa URL, si ya se descargó. Barato — esto es
+        /// lo que la `view` consulta en el hilo UI cada frame.
+        pub fn get(&self, url: &str) -> Option<Image> {
+            self.inner.lock().ok()?.get(url).cloned()
+        }
+
+        /// `true` si la URL ya está en caché (sin clonar la imagen).
+        pub fn contains(&self, url: &str) -> bool {
+            self.inner
+                .lock()
+                .map(|m| m.contains_key(url))
+                .unwrap_or(false)
+        }
+
+        /// Inserta (o reemplaza) la imagen de una URL. Lo llama el worker tras
+        /// decodificar, o la app si ya tiene la imagen por otra vía. Evicta la
+        /// más vieja (FIFO) al superar `CACHE_CAP`.
+        pub fn insert(&self, url: impl Into<String>, img: Image) {
+            let url = url.into();
+            if let Ok(mut m) = self.inner.lock() {
+                let es_nueva = !m.contains_key(&url);
+                m.insert(url.clone(), img);
+                if es_nueva {
+                    if let Ok(mut order) = self.order.lock() {
+                        order.push_back(url);
+                        while m.len() > CACHE_CAP {
+                            match order.pop_front() {
+                                Some(vieja) => {
+                                    m.remove(&vieja);
+                                }
+                                None => break,
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        /// Vacía la caché (p. ej. al cambiar de sesión/usuario).
+        pub fn clear(&self) {
+            if let Ok(mut m) = self.inner.lock() {
+                m.clear();
+            }
+            if let Ok(mut order) = self.order.lock() {
+                order.clear();
+            }
+        }
+
+        /// Cantidad de imágenes cacheadas.
+        pub fn len(&self) -> usize {
+            self.inner.lock().map(|m| m.len()).unwrap_or(0)
+        }
+
+        pub fn is_empty(&self) -> bool {
+            self.len() == 0
+        }
+
+        /// Devuelve la imagen cacheada o, si falta, la descarga+decodifica y la
+        /// cachea (bloqueante). **Llamar desde un worker**, no en el hilo UI.
+        /// El patrón típico: la `view` hace `cache.get(url)`; si es `None`,
+        /// dispara `Handle::spawn` que llama `get_or_fetch` y al volver
+        /// despacha un `Msg` para repintar.
+        pub fn get_or_fetch(&self, url: &str, max_bytes: u64) -> Result<Image, FetchError> {
+            if let Some(img) = self.get(url) {
+                return Ok(img);
+            }
+            let img = load_url(url, max_bytes)?;
+            self.insert(url.to_string(), img.clone());
+            Ok(img)
+        }
+    }
+}
+
+#[cfg(feature = "net")]
+pub use net::{fetch_bytes, load_url, FetchError, ImageCache};
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    /// Bytes PNG válido de 2×2 píxeles: rojo, verde, azul, blanco.
+    /// Generado con `image::RgbaImage` + encode a PNG.
+    fn png_2x2_bytes() -> Vec<u8> {
+        let mut buf = Vec::new();
+        let mut rgba = image::RgbaImage::new(2, 2);
+        rgba.put_pixel(0, 0, image::Rgba([255, 0, 0, 255]));
+        rgba.put_pixel(1, 0, image::Rgba([0, 255, 0, 255]));
+        rgba.put_pixel(0, 1, image::Rgba([0, 0, 255, 255]));
+        rgba.put_pixel(1, 1, image::Rgba([255, 255, 255, 255]));
+        image::DynamicImage::ImageRgba8(rgba)
+            .write_to(&mut std::io::Cursor::new(&mut buf), image::ImageFormat::Png)
+            .expect("encode png");
+        buf
+    }
+
+    #[cfg(feature = "net")]
+    #[test]
+    fn image_cache_evicta_fifo_al_superar_el_cap() {
+        // Inserta más del cap: las más viejas se evictan, las últimas viven.
+        let cache = ImageCache::new();
+        let total = net::CACHE_CAP + 10;
+        for i in 0..total {
+            cache.insert(format!("u{i}"), from_rgba8(vec![0u8; 4], 1, 1));
+        }
+        assert_eq!(cache.len(), net::CACHE_CAP, "la caché queda acotada al cap");
+        // Las primeras 10 (las más viejas) fueron evictadas.
+        assert!(cache.get("u0").is_none());
+        assert!(cache.get("u9").is_none());
+        // Las últimas siguen presentes.
+        assert!(cache.get(&format!("u{}", total - 1)).is_some());
+        // Reinsertar una clave existente no reordena ni evicta de más.
+        cache.insert(format!("u{}", total - 1), from_rgba8(vec![0u8; 4], 1, 1));
+        assert_eq!(cache.len(), net::CACHE_CAP);
+    }
+
+    #[test]
+    fn from_rgba8_arma_image_con_dimensiones_correctas() {
+        let img = from_rgba8(vec![0u8; 16], 2, 2); // 2x2x4 = 16 bytes
+        assert_eq!(img.image.width, 2);
+        assert_eq!(img.image.height, 2);
+        assert!(matches!(img.image.format, ImageFormat::Rgba8));
+    }
+
+    #[test]
+    fn decode_bytes_png_basico() {
+        let bytes = png_2x2_bytes();
+        let img = decode_bytes(&bytes).expect("decode ok");
+        assert_eq!(img.image.width, 2);
+        assert_eq!(img.image.height, 2);
+    }
+
+    #[test]
+    fn decode_bytes_invalido_devuelve_error() {
+        let bad = vec![0u8, 1, 2, 3, 4, 5];
+        let r = decode_bytes(&bad);
+        assert!(r.is_err());
+        // Magic no matchea ningún formato conocido → UnsupportedFormat.
+        match r.unwrap_err() {
+            DecodeError::UnsupportedFormat => {}
+            other => panic!("esperaba UnsupportedFormat, recibí: {other:?}"),
+        }
+    }
+
+    #[test]
+    fn load_path_respeta_cap_de_tamano() {
+        // Escribimos un PNG válido y lo cargamos con cap muy bajo.
+        let dir = std::env::temp_dir();
+        let path = dir.join("llimphi_image_test_cap.png");
+        let bytes = png_2x2_bytes();
+        std::fs::write(&path, &bytes).expect("write tmp png");
+        // Cap de 1 byte → demasiado grande.
+        let r = load_path(&path, 1);
+        match r {
+            Err(DecodeError::TooBig { size_bytes, max_bytes }) => {
+                assert!(size_bytes > 1);
+                assert_eq!(max_bytes, 1);
+            }
+            other => panic!("esperaba TooBig, recibí: {other:?}"),
+        }
+        // Cap 0 → deshabilitado, decodifica OK.
+        let img = load_path(&path, 0).expect("decode ok sin cap");
+        assert_eq!(img.image.width, 2);
+        assert_eq!(img.image.height, 2);
+        std::fs::remove_file(&path).ok();
+    }
+
+    #[test]
+    fn load_path_io_error_cuando_no_existe() {
+        let r = load_path(std::path::Path::new("/no/existe/probablemente.png"), 0);
+        match r {
+            Err(DecodeError::Io(_)) => {}
+            other => panic!("esperaba Io, recibí: {other:?}"),
+        }
+    }
+
+    /// La lógica de caché (sin red): insert / get / contains / clear sobre una
+    /// imagen sintética. La descarga real no se testea (requiere red).
+    #[cfg(feature = "net")]
+    #[test]
+    fn image_cache_insert_get_contains_clear() {
+        let cache = ImageCache::new();
+        assert!(cache.is_empty());
+        assert!(!cache.contains("http://x/a.png"));
+        assert!(cache.get("http://x/a.png").is_none());
+
+        let img = from_rgba8(vec![0u8; 16], 2, 2);
+        cache.insert("http://x/a.png", img);
+        assert!(cache.contains("http://x/a.png"));
+        assert_eq!(cache.len(), 1);
+        let got = cache.get("http://x/a.png").expect("cacheada");
+        assert_eq!(got.image.width, 2);
+
+        // Una segunda URL no colisiona.
+        cache.insert("http://x/b.png".to_string(), from_rgba8(vec![0u8; 4], 1, 1));
+        assert_eq!(cache.len(), 2);
+
+        cache.clear();
+        assert!(cache.is_empty());
+    }
+}
diff --git a/llimphi-layer/Cargo.toml b/llimphi-layer/Cargo.toml
new file mode 100644
index 0000000..f36f344
--- /dev/null
+++ b/llimphi-layer/Cargo.toml
@@ -0,0 +1,18 @@
+[package]
+name = "llimphi-layer"
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+authors.workspace = true
+publish.workspace = true
+description = "Runner wlr-layer-shell para Llimphi: corre cualquier `App` como una superficie de capa anclada a un borde (barra/panel), no como ventana. Extrae la plumbing sctk + wgpu que pata probó en producción, parametrizada sobre el trait `App`. Sirve para que apps (p. ej. shuma) se dockeen al borde de un compositor wlroots como una barra estilo eww/waybar."
+
+[lib]
+path = "src/lib.rs"
+
+[dependencies]
+llimphi-ui = { workspace = true }
+smithay-client-toolkit = "0.19"
+wayland-client = "0.31"
+raw-window-handle = { workspace = true }
+pollster = { workspace = true }
diff --git a/llimphi-layer/LEEME.md b/llimphi-layer/LEEME.md
new file mode 100644
index 0000000..154f1ea
--- /dev/null
+++ b/llimphi-layer/LEEME.md
@@ -0,0 +1,27 @@
+# llimphi-layer
+
+*Read this in English: [README.md](README.md).*
+
+Corre un [`App`] de Llimphi como una **superficie wlr-layer-shell** (una barra anclada a un borde), no como ventana.
+
+Hace que una app se siente al nivel de eww/waybar en cualquier compositor wlroots (mirada, Hyprland, Sway, river…): se ancla a un borde, declara una *exclusive zone* opcional —el compositor le reserva la franja y tesela el resto— y se pinta reusando el pipeline de Llimphi (`mount → compute → paint → render`).
+
+Es la plumbing `smithay-client-toolkit` + `wgpu` que `pata` probó en
+producción, extraída a un runner **genérico** sobre el trait `App`. A
+diferencia de pata (N superficies + tray/dock/sidebar/…), este corre **una**
+superficie y nada de dominio: la app provee `view`/`update`/`on_key` y este
+crate le presta el borde. Útil, p. ej., para que `shuma` se dockee como barra.
+```ignore
+struct MiBarra;
+impl llimphi_ui::App for MiBarra { /* … */ }
+llimphi_layer::run::<MiBarra>(llimphi_layer::LayerConfig {
+    edge: llimphi_layer::Edge::Bottom,
+    thickness: 40,
+    keyboard: llimphi_layer::Keyboard::OnDemand,
+    ..Default::default()
+})?;
+```
+
+---
+
+Parte de **llimphi** — ver [llimphi](../LEEME.md).
diff --git a/llimphi-layer/README.md b/llimphi-layer/README.md
new file mode 100644
index 0000000..22de639
--- /dev/null
+++ b/llimphi-layer/README.md
@@ -0,0 +1,30 @@
+# llimphi-layer
+
+Runs a Llimphi `App` as a **wlr-layer-shell surface** (a bar anchored to an edge)
+rather than as a window.
+
+It lets an app sit at the level of eww/waybar on any wlroots compositor (mirada,
+Hyprland, Sway, river…): it anchors to an edge, declares an optional *exclusive
+zone* — the compositor reserves the strip and tiles the rest — and paints itself
+reusing Llimphi's pipeline (`mount → compute → paint → render`).
+
+It is the `smithay-client-toolkit` + `wgpu` plumbing that `pata` proved in
+production, extracted into a **generic** runner over the `App` trait. Unlike pata
+(N surfaces + tray/dock/sidebar/…), this runs **one** surface and no domain
+logic: the app provides `view`/`update`/`on_key` and this crate lends it the
+edge. Useful, for instance, to dock `shuma` as a bar.
+
+```ignore
+struct MyBar;
+impl llimphi_ui::App for MyBar { /* … */ }
+llimphi_layer::run::<MyBar>(llimphi_layer::LayerConfig {
+    edge: llimphi_layer::Edge::Bottom,
+    thickness: 40,
+    keyboard: llimphi_layer::Keyboard::OnDemand,
+    ..Default::default()
+})?;
+```
+
+---
+
+Part of **llimphi** — see [llimphi](../README.md).
diff --git a/llimphi-layer/src/lib.rs b/llimphi-layer/src/lib.rs
new file mode 100644
index 0000000..b1fd933
--- /dev/null
+++ b/llimphi-layer/src/lib.rs
@@ -0,0 +1,1180 @@
+//! `llimphi-layer` — corre un [`App`] de Llimphi como una **superficie
+//! wlr-layer-shell** (una barra anclada a un borde), no como ventana. Hace que
+//! una app se siente al nivel de eww/waybar en cualquier compositor wlroots
+//! (mirada, Hyprland, Sway, river…): se ancla a un borde, declara una *exclusive
+//! zone* opcional —el compositor le reserva la franja y tesela el resto— y se
+//! pinta reusando el pipeline de Llimphi (`mount → compute → paint → render`).
+//!
+//! Es la plumbing `smithay-client-toolkit` + `wgpu` que `pata` probó en
+//! producción, extraída a un runner **genérico** sobre el trait `App`. A
+//! diferencia de pata (N superficies + tray/dock/sidebar/…), este corre **una**
+//! superficie y nada de dominio: la app provee `view`/`update`/`on_key` y este
+//! crate le presta el borde. Útil, p. ej., para que `shuma` se dockee como barra.
+//!
+//! ```ignore
+//! struct MiBarra;
+//! impl llimphi_ui::App for MiBarra { /* … */ }
+//! llimphi_layer::run::<MiBarra>(llimphi_layer::LayerConfig {
+//!     edge: llimphi_layer::Edge::Bottom,
+//!     thickness: 40,
+//!     keyboard: llimphi_layer::Keyboard::OnDemand,
+//!     ..Default::default()
+//! })?;
+//! ```
+
+use std::error::Error;
+use std::ffi::c_void;
+use std::ptr::NonNull;
+use std::sync::mpsc::{channel, Receiver};
+use std::sync::Mutex;
+
+use raw_window_handle::{
+    RawDisplayHandle, RawWindowHandle, WaylandDisplayHandle, WaylandWindowHandle,
+};
+use smithay_client_toolkit::{
+    compositor::{CompositorHandler, CompositorState},
+    delegate_compositor, delegate_keyboard, delegate_layer, delegate_output, delegate_pointer,
+    delegate_registry, delegate_seat, delegate_shm,
+    output::{OutputHandler, OutputState},
+    registry::{ProvidesRegistryState, RegistryState},
+    registry_handlers,
+    seat::{
+        keyboard::{KeyboardHandler, Keysym, Modifiers},
+        pointer::{
+            CursorIcon, PointerEvent, PointerEventKind, PointerHandler, ThemeSpec, ThemedPointer,
+            BTN_LEFT, BTN_RIGHT,
+        },
+        Capability, SeatHandler, SeatState,
+    },
+    shm::{Shm, ShmHandler},
+    shell::{
+        wlr_layer::{
+            Anchor as LayerAnchor, KeyboardInteractivity, Layer, LayerShell, LayerShellHandler,
+            LayerSurface, LayerSurfaceConfigure,
+        },
+        WaylandSurface,
+    },
+};
+use wayland_client::{
+    globals::registry_queue_init,
+    protocol::{wl_keyboard, wl_output, wl_pointer, wl_seat, wl_surface},
+    Connection, Proxy, QueueHandle,
+};
+
+use llimphi_ui::llimphi_compositor::{
+    hit_test_click, hit_test_hover, hit_test_scroll, measure_text_node, mount, paint, DragFn,
+    DragPhase, Mounted,
+};
+use llimphi_ui::llimphi_hal::{wgpu, Hal, RawSurface, Surface as _};
+use llimphi_ui::llimphi_layout::{taffy, ComputedLayout, LayoutTree};
+use llimphi_ui::llimphi_raster::{peniko::color::palette, vello, Renderer};
+use llimphi_ui::llimphi_text::Typesetter;
+use llimphi_ui::{App, Handle, Key, KeyEvent, KeyState, Modifiers as LMods, NamedKey};
+
+// ── API pública ─────────────────────────────────────────────────────────────
+
+/// El borde al que se ancla la barra.
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Edge {
+    Top,
+    Bottom,
+    Left,
+    Right,
+}
+
+/// La esquina a la que se ancla una **caja** de tamaño fijo (no una barra de
+/// borde completo). La usa, p. ej., un daemon de notificaciones: una caja en
+/// la esquina, no una franja que cruza la pantalla.
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Corner {
+    TopLeft,
+    TopRight,
+    BottomLeft,
+    BottomRight,
+}
+
+/// Márgenes (px) respecto de los bordes a los que la superficie se ancla.
+/// El compositor los respeta como separación entre la caja y el borde.
+#[derive(Debug, Clone, Copy, Default, PartialEq, Eq)]
+pub struct Margins {
+    pub top: i32,
+    pub right: i32,
+    pub bottom: i32,
+    pub left: i32,
+}
+
+impl Margins {
+    /// El mismo margen en los cuatro lados.
+    pub fn all(px: i32) -> Self {
+        Self { top: px, right: px, bottom: px, left: px }
+    }
+}
+
+/// La capa de composición (orden en Z respecto de las ventanas).
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum LayerKind {
+    /// Detrás de las ventanas (fondo de escritorio).
+    Background,
+    /// Bajo las ventanas normales.
+    Bottom,
+    /// Sobre las ventanas normales (lo típico para una barra).
+    Top,
+    /// Por encima de todo (popups, lock screens).
+    Overlay,
+}
+
+/// Cuánto teclado acepta la superficie.
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Keyboard {
+    /// No recibe teclado.
+    None,
+    /// Lo recibe al ser clickeada/enfocada (lo razonable para una barra que a
+    /// veces toma texto, p. ej. un input).
+    OnDemand,
+    /// Acapara el teclado mientras exista (drawers/popups modales).
+    Exclusive,
+}
+
+/// Configuración de la superficie de capa.
+///
+/// Dos modos de anclaje, según `corner`:
+/// - **Barra de borde** (`corner: None`, el default): se ancla a `edge` y el
+///   compositor estira el eje paralelo a toda la salida; `thickness` fija el
+///   perpendicular. Es el modo waybar/eww.
+/// - **Caja de esquina** (`corner: Some(_)`): se ancla a una esquina con
+///   `size` explícito (ancho, alto) y `margins`. Ignora `edge`/`thickness` y
+///   nunca reserva zona exclusiva (flota). Es el modo de un toast/OSD/popover.
+#[derive(Debug, Clone)]
+pub struct LayerConfig {
+    pub edge: Edge,
+    /// Grosor (px) en el eje perpendicular al borde (alto para Top/Bottom, ancho
+    /// para Left/Right). El otro eje lo estira el compositor al tamaño de salida.
+    /// Solo aplica en modo barra de borde (`corner: None`).
+    pub thickness: u32,
+    pub layer: LayerKind,
+    /// Si `true`, reserva la franja (las ventanas no la tapan); si `false`, flota.
+    /// En modo caja de esquina siempre flota, independientemente de este valor.
+    pub exclusive: bool,
+    pub keyboard: Keyboard,
+    /// El namespace que ve el compositor (para reglas por-superficie).
+    pub namespace: String,
+    /// Si es `Some`, ancla una **caja** a esa esquina en vez de una barra de
+    /// borde. Requiere `size`; usa `margins`.
+    pub corner: Option<Corner>,
+    /// Tamaño explícito `(ancho, alto)` en px para el modo caja de esquina.
+    /// Ignorado en modo barra de borde. Si falta en modo esquina, se usa un
+    /// default razonable.
+    pub size: Option<(u32, u32)>,
+    /// Separación (px) respecto de los bordes anclados, en modo caja de esquina.
+    pub margins: Margins,
+    /// Si `true`, la **input-region** de la surface se recorta cada frame a la
+    /// unión de los rects de los nodos interactivos (clicks/drag/hover). Las
+    /// zonas transparentes u ociosas quedan **click-through** hacia la ventana de
+    /// atrás. Pensado para overlays flotantes tipo toast/OSD/tooltip que tienen
+    /// una caja fija grande pero sólo pintan contenido en parte de ella: sin esto,
+    /// la caja entera (aun vacía) se traga los clicks de la ventana debajo. Los
+    /// modales que SÍ quieren tragar todo su rect (scrim de logout/lock/polkit)
+    /// lo dejan en `false` (default = comportamiento histórico: acepta todo).
+    pub input_from_content: bool,
+}
+
+impl Default for LayerConfig {
+    fn default() -> Self {
+        Self {
+            edge: Edge::Bottom,
+            thickness: 40,
+            layer: LayerKind::Top,
+            exclusive: true,
+            keyboard: Keyboard::OnDemand,
+            namespace: "llimphi-layer".to_string(),
+            corner: None,
+            size: None,
+            margins: Margins::default(),
+            input_from_content: false,
+        }
+    }
+}
+
+/// Levanta el backend layer-shell y corre `A` hasta que la superficie se cierra.
+/// Devuelve error si no hay sesión Wayland o el compositor no expone
+/// `wlr-layer-shell`.
+pub fn run<A: App>(cfg: LayerConfig) -> Result<(), Box<dyn Error>> {
+    let conn = Connection::connect_to_env()?;
+    let (globals, mut event_queue) = registry_queue_init(&conn)?;
+    let qh: QueueHandle<Runner<A>> = event_queue.handle();
+
+    let compositor = CompositorState::bind(&globals, &qh)?;
+    let layer_shell = LayerShell::bind(&globals, &qh)?;
+    // `wl_shm` para cargar los pixmaps del tema de cursores (el `ThemedPointer`
+    // los necesita). El render de la app va por wgpu; esto es sólo para el cursor.
+    let shm = Shm::bind(&globals, &qh)?;
+
+    // Handle channel-backed: el `update`/efectos de la app usan su propio `Msg`;
+    // cada dispatch/spawn/spawn_periodic cae en `rx`, que `draw` drena por frame.
+    // El truco (igual que en pata): el `for_test().lift(f)` ejecuta `f` —el
+    // `send`— antes del dispatch no-op del handle de test, así el canal recibe.
+    let (tx, rx) = channel::<A::Msg>();
+    let tx = Mutex::new(tx);
+    let handle: Handle<A::Msg> = Handle::<()>::for_test().lift(move |m: A::Msg| {
+        let _ = tx.lock().expect("tx layer").send(m);
+    });
+    let model = A::init(&handle);
+
+    let resolved = resolve_anchor(&cfg);
+    let wl_surface = compositor.create_surface(&qh);
+    let layer = layer_shell.create_layer_surface(
+        &qh,
+        wl_surface,
+        cfg.layer.into(),
+        Some(cfg.namespace.clone()),
+        None,
+    );
+    layer.set_anchor(resolved.anchor);
+    layer.set_size(resolved.size.0, resolved.size.1);
+    layer.set_exclusive_zone(resolved.exclusive_zone);
+    if let Some(m) = resolved.margins {
+        layer.set_margin(m.top, m.right, m.bottom, m.left);
+    }
+    layer.set_keyboard_interactivity(cfg.keyboard.into());
+    layer.commit();
+    let size = resolved.size;
+
+    let mut runner = Runner::<A> {
+        registry_state: RegistryState::new(&globals),
+        output_state: OutputState::new(&globals, &qh),
+        seat_state: SeatState::new(&globals, &qh),
+        conn,
+        hal: None,
+        keyboard: None,
+        pointer: None,
+        themed_pointer: None,
+        shm,
+        cursor_surface: None,
+        seat: None,
+        layer,
+        compositor,
+        layer_shell,
+        cfg,
+        width: size.0.max(1),
+        height: size.1.max(1),
+        gpu: None,
+        cache: None,
+        hover_idx: None,
+        dirty: true,
+        frame_pending: false,
+        drag: None,
+        mods: Modifiers::default(),
+        model: Some(model),
+        handle,
+        rx,
+        recreate_count: 0,
+        exit: false,
+    };
+
+    while !runner.exit {
+        event_queue.blocking_dispatch(&mut runner)?;
+    }
+    Ok(())
+}
+
+// ── Interno ─────────────────────────────────────────────────────────────────
+
+/// Tamaño por defecto de una caja de esquina cuando `cfg.size` es `None`.
+const DEFAULT_CORNER_SIZE: (u32, u32) = (360, 280);
+
+/// El anclaje resuelto para la superficie: anclas sctk, tamaño pedido, zona
+/// exclusiva y márgenes opcionales. Unifica los dos modos (barra/caja).
+struct Resolved {
+    anchor: LayerAnchor,
+    size: (u32, u32),
+    exclusive_zone: i32,
+    margins: Option<Margins>,
+}
+
+/// Resuelve el anclaje según el modo de `cfg`: caja de esquina si `corner` es
+/// `Some`, barra de borde en caso contrario.
+fn resolve_anchor(cfg: &LayerConfig) -> Resolved {
+    match cfg.corner {
+        Some(corner) => {
+            let size = cfg.size.unwrap_or(DEFAULT_CORNER_SIZE);
+            let anchor = match corner {
+                Corner::TopLeft => LayerAnchor::TOP | LayerAnchor::LEFT,
+                Corner::TopRight => LayerAnchor::TOP | LayerAnchor::RIGHT,
+                Corner::BottomLeft => LayerAnchor::BOTTOM | LayerAnchor::LEFT,
+                Corner::BottomRight => LayerAnchor::BOTTOM | LayerAnchor::RIGHT,
+            };
+            // Una caja flota siempre: no tiene sentido reservar zona exclusiva.
+            Resolved { anchor, size, exclusive_zone: 0, margins: Some(cfg.margins) }
+        }
+        None => {
+            let (anchor, size) = anchor_and_size(cfg.edge, cfg.thickness);
+            let exclusive_zone = if cfg.exclusive { cfg.thickness as i32 } else { 0 };
+            Resolved { anchor, size, exclusive_zone, margins: None }
+        }
+    }
+}
+
+/// El anclaje sctk + el tamaño `(w, h)` pedido para un borde y grosor. El eje
+/// paralelo al borde va en 0 → el compositor lo estira a la salida completa.
+fn anchor_and_size(edge: Edge, thickness: u32) -> (LayerAnchor, (u32, u32)) {
+    match edge {
+        Edge::Top => (
+            LayerAnchor::TOP | LayerAnchor::LEFT | LayerAnchor::RIGHT,
+            (0, thickness),
+        ),
+        Edge::Bottom => (
+            LayerAnchor::BOTTOM | LayerAnchor::LEFT | LayerAnchor::RIGHT,
+            (0, thickness),
+        ),
+        Edge::Left => (
+            LayerAnchor::LEFT | LayerAnchor::TOP | LayerAnchor::BOTTOM,
+            (thickness, 0),
+        ),
+        Edge::Right => (
+            LayerAnchor::RIGHT | LayerAnchor::TOP | LayerAnchor::BOTTOM,
+            (thickness, 0),
+        ),
+    }
+}
+
+impl From<LayerKind> for Layer {
+    fn from(k: LayerKind) -> Self {
+        match k {
+            LayerKind::Background => Layer::Background,
+            LayerKind::Bottom => Layer::Bottom,
+            LayerKind::Top => Layer::Top,
+            LayerKind::Overlay => Layer::Overlay,
+        }
+    }
+}
+
+impl From<Keyboard> for KeyboardInteractivity {
+    fn from(k: Keyboard) -> Self {
+        match k {
+            Keyboard::None => KeyboardInteractivity::None,
+            Keyboard::OnDemand => KeyboardInteractivity::OnDemand,
+            Keyboard::Exclusive => KeyboardInteractivity::Exclusive,
+        }
+    }
+}
+
+/// El estado wgpu de la superficie.
+struct PanelGpu {
+    surface: RawSurface,
+    renderer: Renderer,
+    typesetter: Typesetter,
+    scene: vello::Scene,
+    layout: LayoutTree,
+}
+
+/// El árbol pintado en el último frame, para hit-test entre frames.
+struct RenderCache<Msg> {
+    mounted: Mounted<Msg>,
+    computed: ComputedLayout,
+}
+
+/// El cliente Wayland que corre un `App` como una sola layer surface.
+struct Runner<A: App> {
+    registry_state: RegistryState,
+    output_state: OutputState,
+    seat_state: SeatState,
+    conn: Connection,
+    hal: Option<Hal>,
+    keyboard: Option<wl_keyboard::WlKeyboard>,
+    pointer: Option<wl_pointer::WlPointer>,
+    /// Puntero con tema de cursores: traduce el `Cursor` del nodo bajo el
+    /// puntero a una forma de cursor del sistema (I-beam sobre texto, mano sobre
+    /// links, etc). El backend winit ya lo hacía; el layer-shell no tenía NADA.
+    themed_pointer: Option<ThemedPointer>,
+    /// `wl_shm` retenido para el tema de cursores.
+    shm: Shm,
+    /// Superficie dedicada donde el compositor pinta el cursor (la usa el
+    /// `ThemedPointer`).
+    cursor_surface: Option<wl_surface::WlSurface>,
+    seat: Option<wl_seat::WlSeat>,
+    layer: LayerSurface,
+    /// Compositor + shell + config retenidos para **re-crear** la layer-surface
+    /// si el compositor nos manda `closed` (reset/quita del output) en vez de
+    /// morir. Ver [`Runner::recreate_surface`] y el handler `closed`.
+    compositor: CompositorState,
+    layer_shell: LayerShell,
+    cfg: LayerConfig,
+    width: u32,
+    height: u32,
+    gpu: Option<PanelGpu>,
+    cache: Option<RenderCache<A::Msg>>,
+    hover_idx: Option<usize>,
+    /// Hay algo nuevo que pintar. Arranca en `true` (nunca se pintó nada) y lo
+    /// levantan `apply`, los cambios de hover/drag, `configure` y la re-creación
+    /// de la surface; lo baja `draw` al presentar. Ver [`Runner::draw`].
+    dirty: bool,
+    /// Ya hay un frame-callback pedido y sin responder. Evita encadenar uno por
+    /// cada `draw`: `configure` también llama a `draw`, así que sin esto cada
+    /// configure suma un latido paralelo y quedan N en vuelo — el commit-storm
+    /// que le clava un core al compositor. Es la misma guarda que pata tiene
+    /// por panel (`frame_pending`); `llimphi-layer` se extrajo de pata pero se
+    /// quedó sin ella. Se limpia al llegar el callback.
+    frame_pending: bool,
+    /// Arrastre en curso: handler del nodo + última posición del puntero.
+    drag: Option<(DragFn<A::Msg>, (f32, f32))>,
+    mods: Modifiers,
+    model: Option<A::Model>,
+    handle: Handle<A::Msg>,
+    rx: Receiver<A::Msg>,
+    /// Cierres consecutivos sin lograr pintar un frame. Resetea al presentar; si
+    /// pasa el tope, nos rendimos (`exit`) para que el supervisor reinicie con
+    /// estado limpio (output realmente ausente, no un reset transitorio).
+    recreate_count: u32,
+    exit: bool,
+}
+
+impl<A: App> Runner<A> {
+    /// Aplica un `Msg` a la app (transición pura del modelo) y marca para
+    /// repintar invalidando la caché de hit-test.
+    fn apply(&mut self, msg: A::Msg) {
+        if let Some(model) = self.model.take() {
+            self.model = Some(A::update(model, msg, &self.handle));
+        }
+        self.cache = None;
+        self.dirty = true;
+    }
+
+    /// Traduce un evento de teclado sctk al `KeyEvent` de Llimphi.
+    fn keysym_to_keyevent(
+        &self,
+        event: &smithay_client_toolkit::seat::keyboard::KeyEvent,
+    ) -> Option<KeyEvent> {
+        use smithay_client_toolkit::seat::keyboard::Keysym as K;
+        let named = match event.keysym {
+            K::Return | K::KP_Enter => Some(NamedKey::Enter),
+            K::BackSpace => Some(NamedKey::Backspace),
+            K::Tab | K::ISO_Left_Tab => Some(NamedKey::Tab),
+            K::Escape => Some(NamedKey::Escape),
+            K::Up => Some(NamedKey::ArrowUp),
+            K::Down => Some(NamedKey::ArrowDown),
+            K::Right => Some(NamedKey::ArrowRight),
+            K::Left => Some(NamedKey::ArrowLeft),
+            K::Home => Some(NamedKey::Home),
+            K::End => Some(NamedKey::End),
+            K::Page_Up => Some(NamedKey::PageUp),
+            K::Page_Down => Some(NamedKey::PageDown),
+            K::Delete => Some(NamedKey::Delete),
+            K::Insert => Some(NamedKey::Insert),
+            K::F1 => Some(NamedKey::F1),
+            K::F2 => Some(NamedKey::F2),
+            K::F3 => Some(NamedKey::F3),
+            K::F4 => Some(NamedKey::F4),
+            K::F5 => Some(NamedKey::F5),
+            K::F6 => Some(NamedKey::F6),
+            K::F7 => Some(NamedKey::F7),
+            K::F8 => Some(NamedKey::F8),
+            K::F9 => Some(NamedKey::F9),
+            K::F10 => Some(NamedKey::F10),
+            K::F11 => Some(NamedKey::F11),
+            K::F12 => Some(NamedKey::F12),
+            _ => None,
+        };
+        let modifiers = LMods {
+            shift: self.mods.shift,
+            ctrl: self.mods.ctrl,
+            alt: self.mods.alt,
+            meta: self.mods.logo,
+        };
+        let (key, text) = if let Some(n) = named {
+            (Key::Named(n), None)
+        } else {
+            let txt = match event.utf8.as_deref() {
+                Some(s) if !s.is_empty() && !s.chars().all(char::is_control) => s.to_string(),
+                _ => event.keysym.key_char()?.to_string(),
+            };
+            (Key::Character(txt.as_str().into()), Some(txt))
+        };
+        Some(KeyEvent {
+            key,
+            state: KeyState::Pressed,
+            text,
+            modifiers,
+            repeat: false,
+        })
+    }
+
+    /// Crea el estado wgpu de la superficie (idempotente).
+    fn ensure_gpu(&mut self) {
+        if self.gpu.is_some() {
+            return;
+        }
+        let display_ptr = self.conn.backend().display_ptr() as *mut c_void;
+        let surface_ptr = self.layer.wl_surface().id().as_ptr() as *mut c_void;
+        let (w, h) = (self.width, self.height);
+        let display_handle = RawDisplayHandle::Wayland(WaylandDisplayHandle::new(
+            NonNull::new(display_ptr).expect("wl_display ptr"),
+        ));
+        let window_handle = RawWindowHandle::Wayland(WaylandWindowHandle::new(
+            NonNull::new(surface_ptr).expect("wl_surface ptr"),
+        ));
+        // SAFETY: los handles apuntan a objetos Wayland que `self` mantiene vivos.
+        let make_target = || wgpu::SurfaceTargetUnsafe::RawHandle {
+            raw_display_handle: display_handle,
+            raw_window_handle: window_handle,
+        };
+
+        let surface = if self.hal.is_none() {
+            match pollster::block_on(unsafe { Hal::new_for_raw_surface(make_target, w, h) }) {
+                Ok((hal, surface)) => {
+                    self.hal = Some(hal);
+                    surface
+                }
+                Err(e) => {
+                    eprintln!("llimphi-layer · sin gpu: {e}");
+                    return;
+                }
+            }
+        } else {
+            let hal = self.hal.as_ref().expect("hal");
+            let wgpu_surface = match unsafe { hal.instance.create_surface_unsafe(make_target()) } {
+                Ok(s) => s,
+                Err(e) => {
+                    eprintln!("llimphi-layer · sin gpu: {e}");
+                    return;
+                }
+            };
+            match RawSurface::from_surface(hal, wgpu_surface, display_handle, window_handle, w, h) {
+                Ok(s) => s,
+                Err(e) => {
+                    eprintln!("llimphi-layer · sin gpu: {e}");
+                    return;
+                }
+            }
+        };
+        let hal = self.hal.as_ref().expect("hal");
+        let renderer = Renderer::new(hal).expect("renderer");
+        self.gpu = Some(PanelGpu {
+            surface,
+            renderer,
+            typesetter: Typesetter::new(),
+            scene: vello::Scene::new(),
+            layout: LayoutTree::new(),
+        });
+    }
+
+    /// Re-crea la layer-surface tras un `closed` del compositor (reset/quita del
+    /// output: churn DRM, DPMS, hotplug). Suelta la surface GPU vieja —atada al
+    /// `wl_surface` ya muerto; el `hal`/device **sobrevive**— y crea una nueva
+    /// con la misma config. El próximo `configure` que mande el compositor
+    /// reconstruye la GPU vía [`ensure_gpu`](Self::ensure_gpu) y `draw` re-arma
+    /// el latido. Así la barra sobrevive a un reset de output sin morir.
+    fn recreate_surface(&mut self, qh: &QueueHandle<Self>) {
+        self.gpu = None;
+        self.cache = None;
+        self.dirty = true;
+        // La surface vieja murió: su callback no va a llegar nunca. Si no
+        // liberamos el slot, el latido queda trabado para siempre.
+        self.frame_pending = false;
+        let resolved = resolve_anchor(&self.cfg);
+        let wl_surface = self.compositor.create_surface(qh);
+        let layer = self.layer_shell.create_layer_surface(
+            qh,
+            wl_surface,
+            self.cfg.layer.into(),
+            Some(self.cfg.namespace.clone()),
+            None,
+        );
+        layer.set_anchor(resolved.anchor);
+        layer.set_size(resolved.size.0, resolved.size.1);
+        layer.set_exclusive_zone(resolved.exclusive_zone);
+        if let Some(m) = resolved.margins {
+            layer.set_margin(m.top, m.right, m.bottom, m.left);
+        }
+        layer.set_keyboard_interactivity(self.cfg.keyboard.into());
+        layer.commit();
+        self.layer = layer; // dropea la LayerSurface cerrada
+    }
+
+    /// Mantiene vivo el latido: pide el siguiente frame-callback. El loop de
+    /// frames se auto-sostiene así (cada `frame` re-pide el próximo), lo que
+    /// permite drenar el canal de la app por frame sin un timer aparte.
+    fn latido(&mut self, qh: &QueueHandle<Self>) {
+        if self.frame_pending {
+            return; // ya hay uno pedido; encadenar otro es el commit-storm
+        }
+        self.frame_pending = true;
+        let surface = self.layer.wl_surface();
+        surface.frame(qh, surface.clone());
+        surface.commit();
+    }
+
+    /// Avanza un frame: drena el canal, construye la vista, layout, pinta y
+    /// presenta. Cachea el árbol para el hit-test del próximo evento.
+    ///
+    /// **Sale temprano si nada cambió.** El latido de frame-callbacks se
+    /// mantiene siempre (es lo que nos despierta para drenar el canal), pero
+    /// construir vista + layout + pintar + presentar sólo se paga cuando hay
+    /// algo nuevo: un `Msg` aplicado, un cambio de hover/drag, un `configure` o
+    /// una re-creación de la surface. Antes se re-renderizaba en CADA frame
+    /// aunque la pantalla fuera idéntica — medido en metal 2026-07-21,
+    /// `pata-notify` quemaba 2.9% de un core sin un solo toast en pantalla.
+    /// Es además el criterio que ya usa el backend de ventanas (`llimphi-ui`
+    /// duerme en `ControlFlow::Wait` y pide `request_redraw` a demanda).
+    ///
+    /// Las apps que animan ya empujan `Msg` por [`Handle::spawn_periodic`]
+    /// (pata: reloj 1 s, cava y dientes 100 ms), así que siguen andando igual.
+    /// Lo que NO se sostiene solo es una `view()` que dependa del reloj sin
+    /// emitir un `Msg`: eso hay que despertarlo con un tick, como corresponde.
+    fn draw(&mut self, qh: &QueueHandle<Self>) {
+        // Drenar los Msg que la app empujó al canal (ticks/async/follow-ups).
+        // `apply` marca sucio, así que esto decide el early-return de abajo.
+        while let Ok(m) = self.rx.try_recv() {
+            self.apply(m);
+        }
+        // Nada nuevo y ya hay un frame presentado: mantené el latido y volvé.
+        if !self.dirty && self.cache.is_some() {
+            self.latido(qh);
+            return;
+        }
+        self.ensure_gpu();
+
+        let (w, h) = (self.width, self.height);
+        let view = A::view(self.model.as_ref().expect("model"));
+        let hover_idx = self.hover_idx;
+        let hal = match self.hal.as_ref() {
+            Some(h) => h,
+            None => {
+                self.latido(qh);
+                return;
+            }
+        };
+        let gpu = match self.gpu.as_mut() {
+            Some(g) => g,
+            None => {
+                self.latido(qh);
+                return;
+            }
+        };
+        gpu.surface.resize(w, h);
+        let frame = match gpu.surface.acquire() {
+            Ok(f) => f,
+            Err(_) => {
+                self.latido(qh);
+                return;
+            }
+        };
+        gpu.layout.clear();
+        let mounted = mount(&mut gpu.layout, view);
+        let computed = {
+            let ts = &mut gpu.typesetter;
+            let tmap = &mounted.text_measures;
+            gpu.layout
+                .compute_with_measure(mounted.root, (w as f32, h as f32), |nid, known, avail| {
+                    match tmap.get(&nid) {
+                        Some(tm) => measure_text_node(ts, tm, known, avail),
+                        None => taffy::Size::ZERO,
+                    }
+                })
+                .expect("layout")
+        };
+        // Input-region recortada al contenido interactivo (opt-in): la caja fija
+        // del overlay (un toast de 352×420, p. ej.) se traga todos los clicks de
+        // la ventana debajo aunque esté vacía o transparente. Recortando la
+        // región a la unión de los rects de nodos con handler (o VACÍA si no hay
+        // ninguno), las zonas ociosas quedan click-through. Se aplica antes del
+        // `present` (que commitea la surface) para que entre en el mismo frame.
+        if self.cfg.input_from_content {
+            use smithay_client_toolkit::compositor::Region;
+            if let Ok(region) = Region::new(&self.compositor) {
+                for n in &mounted.nodes {
+                    let interactivo = n.on_click.is_some()
+                        || n.on_click_at.is_some()
+                        || n.on_click_screen.is_some()
+                        || n.drag.is_some()
+                        || n.drag_at.is_some()
+                        || n.drag_velocity.is_some()
+                        || n.on_right_click.is_some()
+                        || n.on_right_click_at.is_some()
+                        || n.on_middle_click.is_some()
+                        || n.hover_fill.is_some();
+                    if !interactivo {
+                        continue;
+                    }
+                    if let Some(r) = computed.get(n.id) {
+                        let (x, y, w, h) =
+                            (r.x as i32, r.y as i32, r.w.ceil() as i32, r.h.ceil() as i32);
+                        if w > 0 && h > 0 {
+                            region.add(x, y, w, h);
+                        }
+                    }
+                }
+                // Región (posiblemente vacía = todo click-through) → la surface.
+                self.layer
+                    .wl_surface()
+                    .set_input_region(Some(region.wl_region()));
+            }
+        }
+        gpu.scene.reset();
+        paint(&mut gpu.scene, &mounted, &computed, &mut gpu.typesetter, hover_idx, None);
+        if let Err(e) = gpu.renderer.render(hal, &gpu.scene, &frame, palette::css::TRANSPARENT) {
+            eprintln!("llimphi-layer · render: {e}");
+        }
+        gpu.surface.present(frame, hal);
+
+        // Pintamos un frame con éxito: el ciclo de re-creación (si lo hubo) se
+        // recuperó del todo. Resetea el backoff de `closed`.
+        self.recreate_count = 0;
+        self.cache = Some(RenderCache { mounted, computed });
+        // Frame presentado: hasta que algo vuelva a cambiar, los próximos
+        // callbacks sólo re-arman el latido.
+        self.dirty = false;
+        self.latido(qh);
+    }
+}
+
+// ── Handlers sctk ───────────────────────────────────────────────────────────
+
+impl<A: App> CompositorHandler for Runner<A> {
+    fn scale_factor_changed(
+        &mut self,
+        _: &Connection,
+        _: &QueueHandle<Self>,
+        _: &wl_surface::WlSurface,
+        _: i32,
+    ) {
+    }
+    fn transform_changed(
+        &mut self,
+        _: &Connection,
+        _: &QueueHandle<Self>,
+        _: &wl_surface::WlSurface,
+        _: wl_output::Transform,
+    ) {
+    }
+    fn frame(
+        &mut self,
+        _: &Connection,
+        qh: &QueueHandle<Self>,
+        _: &wl_surface::WlSurface,
+        _: u32,
+    ) {
+        // Llegó el callback que pidió `latido`: liberamos el slot para que el
+        // próximo `latido` pueda pedir el siguiente.
+        self.frame_pending = false;
+        self.draw(qh);
+    }
+    fn surface_enter(
+        &mut self,
+        _: &Connection,
+        _: &QueueHandle<Self>,
+        _: &wl_surface::WlSurface,
+        _: &wl_output::WlOutput,
+    ) {
+    }
+    fn surface_leave(
+        &mut self,
+        _: &Connection,
+        _: &QueueHandle<Self>,
+        _: &wl_surface::WlSurface,
+        _: &wl_output::WlOutput,
+    ) {
+    }
+}
+
+impl<A: App> LayerShellHandler for Runner<A> {
+    fn closed(&mut self, _: &Connection, qh: &QueueHandle<Self>, _: &LayerSurface) {
+        // El compositor cerró nuestra superficie — típicamente al resetear o
+        // quitar el output al que estábamos anclados (churn DRM, DPMS, hotplug).
+        // Antes esto mataba el proceso (`exit = true`) y la barra quedaba muerta
+        // hasta un respawn externo. Ahora re-creamos la layer-surface sobre el
+        // output vigente y seguimos vivos. Con tope: si nos cierran repetido sin
+        // lograr pintar (output realmente ausente, no un reset transitorio), nos
+        // rendimos y salimos para que el supervisor reinicie con estado limpio.
+        const MAX_RECREATES: u32 = 16;
+        self.recreate_count += 1;
+        if self.recreate_count > MAX_RECREATES {
+            eprintln!(
+                "llimphi-layer · cerrados {} veces sin recuperar; salgo (que reinicie el supervisor).",
+                self.recreate_count
+            );
+            self.exit = true;
+            return;
+        }
+        eprintln!(
+            "llimphi-layer · el compositor cerró la superficie; re-creo (intento {}).",
+            self.recreate_count
+        );
+        self.recreate_surface(qh);
+    }
+    fn configure(
+        &mut self,
+        _: &Connection,
+        qh: &QueueHandle<Self>,
+        _: &LayerSurface,
+        configure: LayerSurfaceConfigure,
+        _: u32,
+    ) {
+        let (cw, ch) = configure.new_size;
+        const MAX_DIM: u32 = 16384;
+        if (1..=MAX_DIM).contains(&cw) {
+            self.width = cw;
+        }
+        if (1..=MAX_DIM).contains(&ch) {
+            self.height = ch;
+        }
+        // Un configure siempre exige repintar: cambió el tamaño, o el compositor
+        // nos re-mapeó y el frame anterior ya no vale.
+        self.dirty = true;
+        // La app puede necesitar su tamaño (p. ej. para calcular el viewport de
+        // un scroll). El compositor estira el eje paralelo al borde, así que es
+        // aquí —no en `run`— donde se conoce el alto/ancho real.
+        let resize_msg = self
+            .model
+            .as_ref()
+            .and_then(|m| A::on_resize(m, self.width, self.height));
+        if let Some(msg) = resize_msg {
+            self.apply(msg);
+        }
+        self.draw(qh);
+    }
+}
+
+impl<A: App> OutputHandler for Runner<A> {
+    fn output_state(&mut self) -> &mut OutputState {
+        &mut self.output_state
+    }
+    fn new_output(&mut self, _: &Connection, _: &QueueHandle<Self>, _: wl_output::WlOutput) {}
+    fn update_output(&mut self, _: &Connection, _: &QueueHandle<Self>, _: wl_output::WlOutput) {}
+    fn output_destroyed(&mut self, _: &Connection, _: &QueueHandle<Self>, _: wl_output::WlOutput) {}
+}
+
+impl<A: App> SeatHandler for Runner<A> {
+    fn seat_state(&mut self) -> &mut SeatState {
+        &mut self.seat_state
+    }
+    fn new_seat(&mut self, _: &Connection, _: &QueueHandle<Self>, seat: wl_seat::WlSeat) {
+        if self.seat.is_none() {
+            self.seat = Some(seat);
+        }
+    }
+    fn new_capability(
+        &mut self,
+        _: &Connection,
+        qh: &QueueHandle<Self>,
+        seat: wl_seat::WlSeat,
+        capability: Capability,
+    ) {
+        match capability {
+            Capability::Keyboard if self.keyboard.is_none() => {
+                if let Ok(kbd) = self.seat_state.get_keyboard(qh, &seat, None) {
+                    self.keyboard = Some(kbd);
+                }
+            }
+            Capability::Pointer if self.pointer.is_none() => {
+                // Puntero CON tema de cursores: una superficie dedicada para el
+                // cursor + el tema del sistema. Si algo falla (raro), caemos al
+                // puntero pelado (sin cambio de forma, como estaba antes).
+                let surface = self.compositor.create_surface(qh);
+                match self.seat_state.get_pointer_with_theme(
+                    qh,
+                    &seat,
+                    self.shm.wl_shm(),
+                    surface.clone(),
+                    ThemeSpec::default(),
+                ) {
+                    Ok(themed) => {
+                        self.pointer = Some(themed.pointer().clone());
+                        self.cursor_surface = Some(surface);
+                        self.themed_pointer = Some(themed);
+                    }
+                    Err(_) => {
+                        if let Ok(ptr) = self.seat_state.get_pointer(qh, &seat) {
+                            self.pointer = Some(ptr);
+                        }
+                    }
+                }
+            }
+            _ => {}
+        }
+    }
+    fn remove_capability(
+        &mut self,
+        _: &Connection,
+        _: &QueueHandle<Self>,
+        _: wl_seat::WlSeat,
+        capability: Capability,
+    ) {
+        match capability {
+            Capability::Keyboard => {
+                if let Some(k) = self.keyboard.take() {
+                    k.release();
+                }
+            }
+            Capability::Pointer => {
+                self.themed_pointer = None;
+                self.cursor_surface = None;
+                if let Some(p) = self.pointer.take() {
+                    p.release();
+                }
+            }
+            _ => {}
+        }
+    }
+    fn remove_seat(&mut self, _: &Connection, _: &QueueHandle<Self>, _: wl_seat::WlSeat) {}
+}
+
+impl<A: App> KeyboardHandler for Runner<A> {
+    fn enter(
+        &mut self,
+        _: &Connection,
+        _: &QueueHandle<Self>,
+        _: &wl_keyboard::WlKeyboard,
+        _: &wl_surface::WlSurface,
+        _: u32,
+        _: &[u32],
+        _: &[Keysym],
+    ) {
+    }
+    fn leave(
+        &mut self,
+        _: &Connection,
+        _: &QueueHandle<Self>,
+        _: &wl_keyboard::WlKeyboard,
+        _: &wl_surface::WlSurface,
+        _: u32,
+    ) {
+    }
+    fn press_key(
+        &mut self,
+        _: &Connection,
+        _: &QueueHandle<Self>,
+        _: &wl_keyboard::WlKeyboard,
+        _: u32,
+        event: smithay_client_toolkit::seat::keyboard::KeyEvent,
+    ) {
+        if let Some(ke) = self.keysym_to_keyevent(&event) {
+            let msg = A::on_key(self.model.as_ref().expect("model"), &ke);
+            if let Some(msg) = msg {
+                self.apply(msg);
+            }
+        }
+    }
+    fn release_key(
+        &mut self,
+        _: &Connection,
+        _: &QueueHandle<Self>,
+        _: &wl_keyboard::WlKeyboard,
+        _: u32,
+        _: smithay_client_toolkit::seat::keyboard::KeyEvent,
+    ) {
+    }
+    fn update_modifiers(
+        &mut self,
+        _: &Connection,
+        _: &QueueHandle<Self>,
+        _: &wl_keyboard::WlKeyboard,
+        _: u32,
+        modifiers: Modifiers,
+        _: u32,
+    ) {
+        self.mods = modifiers;
+    }
+}
+
+/// Traduce el [`Cursor`](llimphi_ui::llimphi_compositor::Cursor) del nodo bajo
+/// el puntero a la forma de cursor del sistema. Espeja `to_winit_cursor` del
+/// backend winit — la misma cobertura de variantes. `None` → flecha default.
+fn cursor_to_icon(c: Option<llimphi_ui::llimphi_compositor::Cursor>) -> CursorIcon {
+    use llimphi_ui::llimphi_compositor::Cursor as C;
+    match c {
+        None | Some(C::Default) => CursorIcon::Default,
+        Some(C::Pointer) => CursorIcon::Pointer,
+        Some(C::Text) => CursorIcon::Text,
+        Some(C::Crosshair) => CursorIcon::Crosshair,
+        Some(C::Move) => CursorIcon::Move,
+        Some(C::Grab) => CursorIcon::Grab,
+        Some(C::Grabbing) => CursorIcon::Grabbing,
+        Some(C::NotAllowed) => CursorIcon::NotAllowed,
+        Some(C::Wait) => CursorIcon::Wait,
+        Some(C::Progress) => CursorIcon::Progress,
+        Some(C::Help) => CursorIcon::Help,
+        Some(C::ColResize) => CursorIcon::ColResize,
+        Some(C::RowResize) => CursorIcon::RowResize,
+        Some(C::EwResize) => CursorIcon::EwResize,
+        Some(C::NsResize) => CursorIcon::NsResize,
+        Some(C::NeswResize) => CursorIcon::NeswResize,
+        Some(C::NwseResize) => CursorIcon::NwseResize,
+        Some(C::ZoomIn) => CursorIcon::ZoomIn,
+        Some(C::ZoomOut) => CursorIcon::ZoomOut,
+    }
+}
+
+impl<A: App> Runner<A> {
+    /// Aplica al puntero la forma de cursor del nodo `hover_idx` actual. No-op si
+    /// no hay `ThemedPointer` (el compositor no dio la capacidad temada).
+    fn aplicar_cursor(&mut self, conn: &Connection) {
+        let Some(themed) = self.themed_pointer.as_ref() else { return };
+        let cur = self
+            .hover_idx
+            .and_then(|i| self.cache.as_ref()?.mounted.nodes.get(i))
+            .and_then(|n| n.cursor);
+        let _ = themed.set_cursor(conn, cursor_to_icon(cur));
+    }
+}
+
+impl<A: App> PointerHandler for Runner<A> {
+    fn pointer_frame(
+        &mut self,
+        conn: &Connection,
+        _: &QueueHandle<Self>,
+        _: &wl_pointer::WlPointer,
+        events: &[PointerEvent],
+    ) {
+        for e in events {
+            match e.kind {
+                PointerEventKind::Enter { .. } => {
+                    // Al entrar, fijar el cursor según el nodo bajo el puntero
+                    // (con el serial de Enter que el ThemedPointer ya rastrea).
+                    let (px, py) = (e.position.0 as f32, e.position.1 as f32);
+                    let nuevo = self
+                        .cache
+                        .as_ref()
+                        .and_then(|c| hit_test_hover(&c.mounted, &c.computed, px, py));
+                    if self.hover_idx != nuevo {
+                        self.hover_idx = nuevo;
+                        self.dirty = true; // el hover se PINTA (hover_fill)
+                    }
+                    self.aplicar_cursor(conn);
+                    continue;
+                }
+                PointerEventKind::Motion { .. } => {
+                    let (px, py) = (e.position.0 as f32, e.position.1 as f32);
+                    // Drag en curso: el delta va al handler del nodo.
+                    if let Some((handler, last)) = self.drag.as_ref().map(|(h, l)| (h.clone(), *l)) {
+                        if let Some(d) = self.drag.as_mut() {
+                            d.1 = (px, py);
+                        }
+                        if let Some(msg) = (handler)(DragPhase::Move, px - last.0, py - last.1) {
+                            self.apply(msg);
+                        }
+                        continue;
+                    }
+                    let nuevo = self
+                        .cache
+                        .as_ref()
+                        .and_then(|c| hit_test_hover(&c.mounted, &c.computed, px, py));
+                    if self.hover_idx != nuevo {
+                        self.hover_idx = nuevo;
+                        self.dirty = true; // el hover se PINTA (hover_fill)
+                        // Cambió el nodo bajo el puntero → actualizar la forma.
+                        self.aplicar_cursor(conn);
+                    }
+                    continue;
+                }
+                PointerEventKind::Leave { .. } => {
+                    if self.hover_idx.is_some() {
+                        self.hover_idx = None;
+                        self.dirty = true; // se va el resaltado
+                    }
+                    continue;
+                }
+                _ => {}
+            }
+            if let PointerEventKind::Axis { vertical, .. } = e.kind {
+                let dy = if vertical.discrete != 0 {
+                    vertical.discrete as f32
+                } else {
+                    vertical.absolute as f32 / 20.0
+                };
+                if dy != 0.0 {
+                    let (px, py) = (e.position.0 as f32, e.position.1 as f32);
+                    let msg = self.cache.as_ref().and_then(|c| {
+                        hit_test_scroll(&c.mounted, &c.computed, px, py)
+                            .and_then(|i| c.mounted.nodes.get(i))
+                            .and_then(|n| n.on_scroll.as_ref().and_then(|h| h(0.0, dy)))
+                    });
+                    if let Some(msg) = msg {
+                        self.apply(msg);
+                    }
+                }
+                continue;
+            }
+            if let PointerEventKind::Release { button, .. } = e.kind {
+                if button == BTN_LEFT {
+                    if let Some((handler, _)) = self.drag.take() {
+                        if let Some(msg) = (handler)(DragPhase::End, 0.0, 0.0) {
+                            self.apply(msg);
+                        }
+                    }
+                }
+                continue;
+            }
+            if let PointerEventKind::Press { button, .. } = e.kind {
+                if button != BTN_LEFT && button != BTN_RIGHT {
+                    continue;
+                }
+                let (px, py) = (e.position.0 as f32, e.position.1 as f32);
+                let derecho = button == BTN_RIGHT;
+                // Nodo arrastrable bajo el press izquierdo: arranca un drag.
+                if !derecho {
+                    let handler = self.cache.as_ref().and_then(|c| {
+                        let i = hit_test_click(&c.mounted, &c.computed, px, py)?;
+                        c.mounted.nodes.get(i)?.drag.clone()
+                    });
+                    if let Some(handler) = handler {
+                        self.drag = Some((handler, (px, py)));
+                        continue;
+                    }
+                }
+                let msg = self.cache.as_ref().and_then(|c| {
+                    let i = hit_test_click(&c.mounted, &c.computed, px, py)?;
+                    let n = c.mounted.nodes.get(i)?;
+                    if derecho {
+                        // `on_right_click_screen` (coords absolutas, para menús al
+                        // puntero) gana; luego `on_right_click_at` (local, grillas/
+                        // canvas); luego el `on_right_click` plano.
+                        if let Some(screen) = n.on_right_click_screen.as_ref() {
+                            let r = c.computed.get(n.id)?;
+                            if let Some(m) = screen(px, py, r.w, r.h) {
+                                return Some(m);
+                            }
+                        }
+                        if let Some(m) = n.on_right_click.clone() {
+                            return Some(m);
+                        }
+                        let at = n.on_right_click_at.as_ref()?;
+                        let r = c.computed.get(n.id)?;
+                        at(px - r.x, py - r.y, r.w, r.h)
+                    } else {
+                        if let Some(m) = n.on_click.clone() {
+                            return Some(m);
+                        }
+                        let at = n.on_click_at.as_ref()?;
+                        let r = c.computed.get(n.id)?;
+                        at(px - r.x, py - r.y, r.w, r.h)
+                    }
+                });
+                if let Some(msg) = msg {
+                    self.apply(msg);
+                }
+            }
+        }
+    }
+}
+
+impl<A: App> ProvidesRegistryState for Runner<A> {
+    fn registry(&mut self) -> &mut RegistryState {
+        &mut self.registry_state
+    }
+    registry_handlers![OutputState, SeatState];
+}
+
+delegate_compositor!(@<A: App> Runner<A>);
+delegate_output!(@<A: App> Runner<A>);
+delegate_layer!(@<A: App> Runner<A>);
+delegate_seat!(@<A: App> Runner<A>);
+delegate_keyboard!(@<A: App> Runner<A>);
+delegate_pointer!(@<A: App> Runner<A>);
+delegate_shm!(@<A: App> Runner<A>);
+delegate_registry!(@<A: App> Runner<A>);
+
+impl<A: App> ShmHandler for Runner<A> {
+    fn shm_state(&mut self) -> &mut Shm {
+        &mut self.shm
+    }
+}
diff --git a/llimphi-layout/Cargo.toml b/llimphi-layout/Cargo.toml
index 6857628..f610ba8 100644
--- a/llimphi-layout/Cargo.toml
+++ b/llimphi-layout/Cargo.toml
@@ -1,19 +1,19 @@
 [package]
 name = "llimphi-layout"
-description = "Layout engine for llimphi (Flexbox + CSS Grid via taffy)."
 version.workspace = true
 edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 
+description = "Layout engine for llimphi (Flexbox + CSS Grid via taffy)."
+repository.workspace = true
 [dependencies]
 taffy = { workspace = true }
 
 [dev-dependencies]
-llimphi-hal = { path = "../llimphi-hal" }
-llimphi-raster = { path = "../llimphi-raster" }
+llimphi-hal = { path = "../llimphi-hal", version = "0.1.0" }
+llimphi-raster = { path = "../llimphi-raster", version = "0.1.0" }
 pollster = { workspace = true }
 
 [[example]]
diff --git a/llimphi-layout/src/lib.rs b/llimphi-layout/src/lib.rs
index b6932e5..9991808 100644
--- a/llimphi-layout/src/lib.rs
+++ b/llimphi-layout/src/lib.rs
@@ -153,6 +153,69 @@ impl LayoutTree {
     }
 }
 
+#[cfg(test)]
+mod cache_probe {
+    //! Bloque 24 (probe): ¿taffy saltea subárboles limpios al recomputar sobre
+    //! un árbol persistente (sin `clear()`)? De la respuesta depende todo el
+    //! enfoque de layout retenido. Se mide contando llamadas a `measure`.
+    use super::*;
+    use std::cell::Cell;
+
+    #[test]
+    fn taffy_cachea_entre_computes() {
+        let mut lt = LayoutTree::new();
+        let mut leaves = Vec::new();
+        for _ in 0..100 {
+            leaves.push(
+                lt.leaf(Style {
+                    size: Size { width: auto(), height: auto() },
+                    ..Default::default()
+                })
+                .unwrap(),
+            );
+        }
+        let root = lt
+            .node(
+                Style {
+                    flex_direction: FlexDirection::Column,
+                    size: Size { width: length(200.0), height: length(4000.0) },
+                    ..Default::default()
+                },
+                &leaves,
+            )
+            .unwrap();
+
+        let count = Cell::new(0u32);
+        let mut measure = |_nid: NodeId,
+                           _k: taffy::Size<Option<f32>>,
+                           _a: taffy::Size<AvailableSpace>| {
+            count.set(count.get() + 1);
+            taffy::Size { width: 10.0, height: 10.0 }
+        };
+
+        lt.compute_with_measure(root, (200.0, 4000.0), &mut measure).unwrap();
+        let first = count.get();
+
+        // 2ª pasada SIN mutar ni clear.
+        count.set(0);
+        lt.compute_with_measure(root, (200.0, 4000.0), &mut measure).unwrap();
+        let second = count.get();
+
+        // 3ª: una sola hoja sucia.
+        lt.inner_mut().mark_dirty(leaves[0]).unwrap();
+        count.set(0);
+        lt.compute_with_measure(root, (200.0, 4000.0), &mut measure).unwrap();
+        let third = count.get();
+
+        println!("[probe] measures: 1ª={first}  2ª(sin mutar)={second}  3ª(1 hoja sucia)={third}");
+        assert!(first >= 100, "la 1ª pasada mide las hojas");
+        // Premisa del Bloque 24: la 2ª pasada cachea (mide << first) y una hoja
+        // sucia sólo re-mide su cadena (third << first).
+        assert!(second < first, "2ª pasada debe cachear (second={second} < first={first})");
+        assert!(third < first, "1 hoja sucia re-mide poco (third={third} < first={first})");
+    }
+}
+
 fn flatten(
     tree: &TaffyTree<()>,
     node: NodeId,
diff --git a/llimphi-lottie/Cargo.toml b/llimphi-lottie/Cargo.toml
new file mode 100644
index 0000000..ca88242
--- /dev/null
+++ b/llimphi-lottie/Cargo.toml
@@ -0,0 +1,15 @@
+[package]
+name = "llimphi-lottie"
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+authors.workspace = true
+publish.workspace = true
+description = "llimphi-lottie — puente fino velato (Lottie) → Llimphi. Carga un .json de Lottie una vez (LottieAsset) y lo stampea en cualquier View vía paint_with a un frame/instante dado, escalado al rect. Gemelo de llimphi-svg + eje de tiempo."
+
+[dependencies]
+llimphi-ui = { workspace = true }
+# Fork vendorizado de velato (no paniquea ante features no soportadas).
+foreign-lottie = { workspace = true }
+# Máquina de estados de animación (clip-agnóstica) que este crate renderiza.
+llimphi-anim = { workspace = true }
diff --git a/llimphi-lottie/LEEME.md b/llimphi-lottie/LEEME.md
new file mode 100644
index 0000000..ed4c167
--- /dev/null
+++ b/llimphi-lottie/LEEME.md
@@ -0,0 +1,57 @@
+# llimphi-lottie
+
+*Read this in English: [README.md](README.md).*
+
+Puente fino entre `velato` (reproductor de Lottie de Linebender) y Llimphi.
+
+`llimphi-svg` cubre el vector *estático* arbitrario (íconos `.desktop`,
+logos). `llimphi-motion` cubre el movimiento *generado por código* (tweens
+sobre el bucle Elm). Este crate cubre el hueco del medio: **animación
+vectorial autorada por fuera** — los `.json` de Lottie que exportan los
+diseñadores desde After Effects / lottiefiles (íconos animados,
+ilustraciones, estados vacíos, onboarding).
+
+Es el gemelo de `llimphi-svg`, con un eje de tiempo: `velato` parsea el JSON
+a una `Composition` y, para un `frame` dado, emite a la **misma**
+`vello::Scene` que usa `llimphi-raster`.
+
+## Uso
+```ignore
+use llimphi_lottie::LottieAsset;
+use std::time::Duration;
+
+// Parsea UNA vez (al cargar la app):
+let anim = LottieAsset::from_str(include_str!("spinner.json")).expect("lottie válido");
+
+// En el estado de la app guardas el tiempo transcurrido y lo avanzas con el
+// bucle Elm — exactamente el patrón de los workers de simulación:
+//   handle.spawn_periodic(Duration::from_millis(16), || Msg::Tick);
+// y en update: self.t += 1.0 / 60.0;
+
+// Pintalo a su instante actual (escala + centra al rect, en loop):
+View::new(style).children(vec![anim.view_at_time::<Msg>(self.t)])
+```
+El parse cuesta (corre el importador serde de Lottie); el `paint`/`view` no.
+`LottieAsset` es `Clone` barato (`Arc` internamente) — el mismo asset en
+varios nodos no replica memoria.
+
+## Por qué un `Renderer` nuevo por paint
+
+`velato::Renderer` es `Default` y sólo guarda Vecs de scratch que se limpian
+en cada `append`. No tiene recursos de GPU (eso es trabajo de `llimphi-hal`).
+Crear uno por frame es despreciable frente a empujar la geometría — que se
+hace igual — y nos deja un `LottieAsset` `Send + Sync` sin `Mutex`.
+
+## Cobertura
+
+`velato` 0.9 implementa shapes, transforms animados, gradientes, trim paths,
+máscaras y precomposiciones — el grueso de los Lottie reales de íconos e
+ilustración. **No** implementa todavía capas de **texto**, **effects**
+(blur/drop-shadow) ni **expresiones** (declarado en su propio
+`schema/mod.rs`). Un asset que use esas features se pinta omitiéndolas, no
+rompe. Cuando un `.json` concreto las necesite, el camino es vendorizar
+`velato` como `shared/foreign-lottie` y completar el `todo` puntual.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../LEEME.md).
diff --git a/llimphi-lottie/README.md b/llimphi-lottie/README.md
new file mode 100644
index 0000000..f820ea4
--- /dev/null
+++ b/llimphi-lottie/README.md
@@ -0,0 +1,31 @@
+# llimphi-lottie
+
+A thin bridge between `velato` (Linebender's Lottie player) and Llimphi.
+
+`llimphi-svg` covers arbitrary *static* vector art (`.desktop` icons, logos).
+`llimphi-motion` covers motion *generated by code* (tweens over the Elm loop).
+This crate covers the gap in between: **vector animation authored elsewhere** —
+the Lottie `.json` files designers export from After Effects / lottiefiles
+(animated icons, illustrations, empty states, onboarding).
+
+It is the twin of `llimphi-svg` with a time axis: `velato` parses the JSON into a
+`Composition` and, for a given `frame`, emits into the **same** `vello::Scene`
+that `llimphi-raster` uses.
+
+## Use
+
+```ignore
+use llimphi_lottie::LottieAsset;
+use std::time::Duration;
+
+// Parse ONCE (when loading the app):
+let anim = LottieAsset::from_str(include_str!("spinner.json")).expect("valid lottie");
+
+// The app keeps the elapsed time in its state and advances it with the Elm
+// loop — exactly the pattern of the simulation workers:
+//   handle.spawn_periodic(Duration::from_millis(16), || Msg::Tick);
+```
+
+---
+
+Part of **llimphi** — see [llimphi](../README.md).
diff --git a/llimphi-lottie/examples/pointer_listeners_demo.rs b/llimphi-lottie/examples/pointer_listeners_demo.rs
new file mode 100644
index 0000000..6f51a22
--- /dev/null
+++ b/llimphi-lottie/examples/pointer_listeners_demo.rs
@@ -0,0 +1,202 @@
+//! Demo del Tier 3: **listeners de puntero** en la máquina de estados.
+//!
+//! El hit-testing vive **en el motor** (`llimphi-anim`), no en la app: la app
+//! sólo reenvía el puntero crudo (`pointer_move`), y los `Listener` del estado
+//! deciden qué input tocar. Aquí, dos listeners sobre toda la animación —
+//! `Enter → moving=true`, `Exit → moving=false` — hacen que **pasar el puntero
+//! por encima** dispare el crossfade idle→walk, y sacarlo lo revierta. Sin
+//! teclado: el puntero es la interacción.
+//!
+//! Corre con:
+//!   `cargo run -p llimphi-lottie --example pointer_listeners_demo --release`
+
+use std::time::Duration;
+
+use llimphi_anim::{Action, Area, Condition, PointerTrigger, StateMachine};
+use llimphi_lottie::{state_machine_view, LottieAsset};
+use llimphi_ui::llimphi_layout::taffy::{
+    prelude::{length, percent, FlexDirection, Size, Style},
+    AlignItems, JustifyContent, Rect,
+};
+use llimphi_ui::llimphi_raster::peniko::Color;
+use llimphi_ui::{App, Handle, View};
+
+const IDLE: u32 = 0;
+const WALK: u32 = 1;
+
+/// idle: círculo azul cuya opacidad late (100→35→100) en 2 s.
+const IDLE_LOTTIE: &str = r#"{
+  "v":"5.5.2","fr":30,"ip":0,"op":60,"w":100,"h":100,
+  "layers":[{"ty":4,"ip":0,"op":60,"st":0,"sr":1,
+    "ks":{"o":{"a":1,"k":[
+        {"i":{"x":[0.5],"y":[0.5]},"o":{"x":[0.5],"y":[0.5]},"t":0,"s":[100]},
+        {"i":{"x":[0.5],"y":[0.5]},"o":{"x":[0.5],"y":[0.5]},"t":30,"s":[35]},
+        {"t":60,"s":[100]}]},
+      "r":{"a":0,"k":0},"p":{"a":0,"k":[50,50]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]}},
+    "shapes":[{"ty":"gr","it":[
+      {"ty":"el","p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[72,72]}},
+      {"ty":"fl","c":{"a":0,"k":[0.30,0.55,0.95]},"o":{"a":0,"k":100}},
+      {"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100}}]}]}]}"#;
+
+/// walk: cuadrado naranja redondeado que gira 360° en 2 s.
+const WALK_LOTTIE: &str = r#"{
+  "v":"5.5.2","fr":30,"ip":0,"op":60,"w":100,"h":100,
+  "layers":[{"ty":4,"ip":0,"op":60,"st":0,"sr":1,
+    "ks":{"o":{"a":0,"k":100},
+      "r":{"a":1,"k":[
+        {"i":{"x":[0.5],"y":[0.5]},"o":{"x":[0.5],"y":[0.5]},"t":0,"s":[0]},
+        {"t":60,"s":[360]}]},
+      "p":{"a":0,"k":[50,50]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]}},
+    "shapes":[{"ty":"gr","it":[
+      {"ty":"rc","p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[60,60]},"r":{"a":0,"k":10}},
+      {"ty":"fl","c":{"a":0,"k":[0.95,0.55,0.15]},"o":{"a":0,"k":100}},
+      {"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100}}]}]}]}"#;
+
+#[derive(Clone)]
+enum Msg {
+    Tick,
+    /// Puntero sobre la animación, en coords normalizadas `0..1` (`None` = salió).
+    Pointer(Option<(f64, f64)>),
+}
+
+struct Model {
+    inst: llimphi_anim::Instance,
+    clips: Vec<LottieAsset>,
+}
+
+struct Demo;
+
+const TICK: Duration = Duration::from_millis(16);
+
+impl App for Demo {
+    type Model = Model;
+    type Msg = Msg;
+
+    fn title() -> &'static str {
+        "llimphi · pointer listeners"
+    }
+
+    fn initial_size() -> (u32, u32) {
+        (420, 500)
+    }
+
+    fn init(handle: &Handle<Self::Msg>) -> Self::Model {
+        let idle = LottieAsset::from_str(IDLE_LOTTIE).expect("idle lottie");
+        let walk = LottieAsset::from_str(WALK_LOTTIE).expect("walk lottie");
+
+        let mut sm = StateMachine::new();
+        let s_idle = sm.add_state("idle", IDLE, 1.0, true);
+        let s_walk = sm.add_state("walk", WALK, 1.0, true);
+        sm.set_entry(s_idle);
+        sm.transition(s_idle, s_walk, vec![Condition::bool("moving", true)], 0.3);
+        sm.transition(s_walk, s_idle, vec![Condition::bool("moving", false)], 0.3);
+
+        // Tier 3: el hover sobre toda la animación maneja el input `moving`.
+        sm.listener(Area::All, PointerTrigger::Enter, Action::set_bool("moving", true));
+        sm.listener(Area::All, PointerTrigger::Exit, Action::set_bool("moving", false));
+
+        handle.spawn_periodic(TICK, || Msg::Tick);
+
+        Model {
+            inst: sm.instance(),
+            clips: vec![idle, walk],
+        }
+    }
+
+    fn update(mut model: Self::Model, msg: Self::Msg, _: &Handle<Self::Msg>) -> Self::Model {
+        match msg {
+            Msg::Tick => model.inst.advance(TICK.as_secs_f64()),
+            // La app sólo reenvía el puntero crudo; los listeners del motor
+            // deciden qué input tocar.
+            Msg::Pointer(p) => model.inst.pointer_move(p),
+        }
+        model
+    }
+
+    fn view(model: &Self::Model) -> View<Self::Msg> {
+        let stage = View::new(Style {
+            size: Size {
+                width: length(280.0_f32),
+                height: length(280.0_f32),
+            },
+            flex_shrink: 0.0,
+            align_items: Some(AlignItems::Center),
+            justify_content: Some(JustifyContent::Center),
+            ..Default::default()
+        })
+        .radius(16.0)
+        .fill(Color::from_rgba8(26, 30, 40, 255))
+        .children(vec![state_machine_view::<Msg>(
+            model.inst.render_frame(),
+            model.clips.clone(),
+        )])
+        // Cada movimiento del cursor sobre el stage → posición normalizada.
+        .on_pointer_move_at(|lx, ly, w, h| {
+            if w > 0.0 && h > 0.0 {
+                Some(Msg::Pointer(Some((lx as f64 / w as f64, ly as f64 / h as f64))))
+            } else {
+                None
+            }
+        })
+        // El cursor salió del stage → fuera de toda área.
+        .on_pointer_leave(Msg::Pointer(None));
+
+        let estado = if model.inst.is_transitioning() {
+            "· · · crossfade · · ·".to_string()
+        } else {
+            format!("estado: {}", model.inst.current_state())
+        };
+        let status = View::new(Style {
+            size: Size {
+                width: percent(1.0_f32),
+                height: length(26.0_f32),
+            },
+            align_items: Some(AlignItems::Center),
+            justify_content: Some(JustifyContent::Center),
+            ..Default::default()
+        })
+        .text(estado, 17.0, Color::from_rgba8(180, 200, 230, 255));
+
+        let hint = View::new(Style {
+            size: Size {
+                width: percent(1.0_f32),
+                height: length(22.0_f32),
+            },
+            align_items: Some(AlignItems::Center),
+            justify_content: Some(JustifyContent::Center),
+            ..Default::default()
+        })
+        .text(
+            "pasa el puntero por encima".to_string(),
+            14.0,
+            Color::from_rgba8(120, 135, 160, 255),
+        );
+
+        View::new(Style {
+            flex_direction: FlexDirection::Column,
+            size: Size {
+                width: percent(1.0_f32),
+                height: percent(1.0_f32),
+            },
+            gap: Size {
+                width: length(0.0_f32),
+                height: length(16.0_f32),
+            },
+            align_items: Some(AlignItems::Center),
+            justify_content: Some(JustifyContent::Center),
+            padding: Rect {
+                left: length(24.0_f32),
+                right: length(24.0_f32),
+                top: length(24.0_f32),
+                bottom: length(24.0_f32),
+            },
+            ..Default::default()
+        })
+        .fill(Color::from_rgba8(18, 22, 30, 255))
+        .children(vec![stage, status, hint])
+    }
+}
+
+fn main() {
+    llimphi_ui::run::<Demo>();
+}
diff --git a/llimphi-lottie/examples/state_machine_demo.rs b/llimphi-lottie/examples/state_machine_demo.rs
new file mode 100644
index 0000000..5764bf7
--- /dev/null
+++ b/llimphi-lottie/examples/state_machine_demo.rs
@@ -0,0 +1,216 @@
+//! Demo interactiva del Tier 1+2: máquina de estados de animación (`llimphi-anim`)
+//! manejando dos clips Lottie con **crossfade**, manejada por un input vivo.
+//!
+//! Dos estados: `idle` (círculo azul que late) ⇄ `walk` (cuadrado naranja que
+//! gira), con un blend de 0.35 s entre ellos. El input booleano `moving` dispara
+//! las transiciones en ambos sentidos. **Espacio** o el botón lo togglean —
+//! ves el crossfade disolver una animación en la otra.
+//!
+//! Esto es el cableado canónico inputs↔app (Tier 2): el `Model` tiene una
+//! `Instance`, un `spawn_periodic` la avanza por frame (`advance(dt)`), los
+//! eventos setean inputs (`set_bool`), y `view` pinta `render_frame()` vía
+//! `state_machine_view`. El núcleo de estados no sabe de Lottie ni de vello.
+//!
+//! Corre con:
+//!   `cargo run -p llimphi-lottie --example state_machine_demo --release`
+
+use std::time::Duration;
+
+use llimphi_anim::{Condition, StateMachine};
+use llimphi_lottie::{state_machine_view, LottieAsset};
+use llimphi_ui::llimphi_layout::taffy::{
+    prelude::{length, percent, FlexDirection, Size, Style},
+    AlignItems, JustifyContent, Rect,
+};
+use llimphi_ui::llimphi_raster::peniko::Color;
+use llimphi_ui::{App, Handle, Key, KeyEvent, KeyState, NamedKey, View};
+
+// ClipId 0 = idle, 1 = walk.
+const IDLE: u32 = 0;
+const WALK: u32 = 1;
+
+/// idle: círculo azul cuya opacidad late (100→35→100) en 2 s.
+const IDLE_LOTTIE: &str = r#"{
+  "v":"5.5.2","fr":30,"ip":0,"op":60,"w":100,"h":100,
+  "layers":[{"ty":4,"ip":0,"op":60,"st":0,"sr":1,
+    "ks":{"o":{"a":1,"k":[
+        {"i":{"x":[0.5],"y":[0.5]},"o":{"x":[0.5],"y":[0.5]},"t":0,"s":[100]},
+        {"i":{"x":[0.5],"y":[0.5]},"o":{"x":[0.5],"y":[0.5]},"t":30,"s":[35]},
+        {"t":60,"s":[100]}]},
+      "r":{"a":0,"k":0},"p":{"a":0,"k":[50,50]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]}},
+    "shapes":[{"ty":"gr","it":[
+      {"ty":"el","p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[72,72]}},
+      {"ty":"fl","c":{"a":0,"k":[0.30,0.55,0.95]},"o":{"a":0,"k":100}},
+      {"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100}}]}]}]}"#;
+
+/// walk: cuadrado naranja redondeado que gira 360° en 2 s.
+const WALK_LOTTIE: &str = r#"{
+  "v":"5.5.2","fr":30,"ip":0,"op":60,"w":100,"h":100,
+  "layers":[{"ty":4,"ip":0,"op":60,"st":0,"sr":1,
+    "ks":{"o":{"a":0,"k":100},
+      "r":{"a":1,"k":[
+        {"i":{"x":[0.5],"y":[0.5]},"o":{"x":[0.5],"y":[0.5]},"t":0,"s":[0]},
+        {"t":60,"s":[360]}]},
+      "p":{"a":0,"k":[50,50]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]}},
+    "shapes":[{"ty":"gr","it":[
+      {"ty":"rc","p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[60,60]},"r":{"a":0,"k":10}},
+      {"ty":"fl","c":{"a":0,"k":[0.95,0.55,0.15]},"o":{"a":0,"k":100}},
+      {"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100}}]}]}]}"#;
+
+#[derive(Clone)]
+enum Msg {
+    /// Tick de animación: avanza la máquina por `dt`.
+    Tick,
+    /// Togglea el input `moving` (Espacio o el botón).
+    ToggleMoving,
+}
+
+struct Model {
+    inst: llimphi_anim::Instance,
+    clips: Vec<LottieAsset>,
+    moving: bool,
+}
+
+struct Demo;
+
+/// Período del tick → también el `dt` que le pasamos a `advance` (fijo, alcanza
+/// para una demo; una app real mediría el dt real).
+const TICK: Duration = Duration::from_millis(16);
+
+impl App for Demo {
+    type Model = Model;
+    type Msg = Msg;
+
+    fn title() -> &'static str {
+        "llimphi · state machine + crossfade"
+    }
+
+    fn initial_size() -> (u32, u32) {
+        (420, 520)
+    }
+
+    fn init(handle: &Handle<Self::Msg>) -> Self::Model {
+        let idle = LottieAsset::from_str(IDLE_LOTTIE).expect("idle lottie");
+        let walk = LottieAsset::from_str(WALK_LOTTIE).expect("walk lottie");
+
+        let mut sm = StateMachine::new();
+        let s_idle = sm.add_state("idle", IDLE, 1.0, true);
+        let s_walk = sm.add_state("walk", WALK, 1.0, true);
+        sm.set_entry(s_idle);
+        // El mismo input `moving` rige ambos sentidos, con blend de 0.35 s.
+        sm.transition(s_idle, s_walk, vec![Condition::bool("moving", true)], 0.35);
+        sm.transition(s_walk, s_idle, vec![Condition::bool("moving", false)], 0.35);
+
+        // Corre el reloj de animación (~60 fps).
+        handle.spawn_periodic(TICK, || Msg::Tick);
+
+        Model {
+            inst: sm.instance(),
+            clips: vec![idle, walk],
+            moving: false,
+        }
+    }
+
+    fn update(mut model: Self::Model, msg: Self::Msg, _: &Handle<Self::Msg>) -> Self::Model {
+        match msg {
+            Msg::Tick => model.inst.advance(TICK.as_secs_f64()),
+            Msg::ToggleMoving => {
+                model.moving = !model.moving;
+                model.inst.set_bool("moving", model.moving);
+            }
+        }
+        model
+    }
+
+    fn on_key(_: &Self::Model, e: &KeyEvent) -> Option<Self::Msg> {
+        if e.state == KeyState::Pressed && e.key == Key::Named(NamedKey::Space) {
+            Some(Msg::ToggleMoving)
+        } else {
+            None
+        }
+    }
+
+    fn view(model: &Self::Model) -> View<Self::Msg> {
+        // Caja cuadrada que aloja la animación (state_machine_view es absolute-fill).
+        let stage = View::new(Style {
+            size: Size {
+                width: length(280.0_f32),
+                height: length(280.0_f32),
+            },
+            flex_shrink: 0.0,
+            align_items: Some(AlignItems::Center),
+            justify_content: Some(JustifyContent::Center),
+            ..Default::default()
+        })
+        .children(vec![state_machine_view::<Msg>(
+            model.inst.render_frame(),
+            model.clips.clone(),
+        )]);
+
+        let estado = if model.inst.is_transitioning() {
+            "· · · crossfade · · ·".to_string()
+        } else {
+            format!("estado: {}", model.inst.current_state())
+        };
+        let status = View::new(Style {
+            size: Size {
+                width: percent(1.0_f32),
+                height: length(28.0_f32),
+            },
+            align_items: Some(AlignItems::Center),
+            justify_content: Some(JustifyContent::Center),
+            ..Default::default()
+        })
+        .text(estado, 18.0, Color::from_rgba8(180, 200, 230, 255));
+
+        let label = if model.moving {
+            "moving = true   (Espacio para parar)"
+        } else {
+            "moving = false   (Espacio para mover)"
+        };
+        let boton = View::new(Style {
+            size: Size {
+                width: length(280.0_f32),
+                height: length(52.0_f32),
+            },
+            align_items: Some(AlignItems::Center),
+            justify_content: Some(JustifyContent::Center),
+            ..Default::default()
+        })
+        .fill(if model.moving {
+            Color::from_rgba8(200, 120, 50, 255)
+        } else {
+            Color::from_rgba8(50, 110, 190, 255)
+        })
+        .radius(12.0)
+        .text(label.to_string(), 16.0, Color::from_rgba8(245, 245, 250, 255))
+        .on_click(Msg::ToggleMoving);
+
+        View::new(Style {
+            flex_direction: FlexDirection::Column,
+            size: Size {
+                width: percent(1.0_f32),
+                height: percent(1.0_f32),
+            },
+            gap: Size {
+                width: length(0.0_f32),
+                height: length(20.0_f32),
+            },
+            align_items: Some(AlignItems::Center),
+            justify_content: Some(JustifyContent::Center),
+            padding: Rect {
+                left: length(24.0_f32),
+                right: length(24.0_f32),
+                top: length(24.0_f32),
+                bottom: length(24.0_f32),
+            },
+            ..Default::default()
+        })
+        .fill(Color::from_rgba8(18, 22, 30, 255))
+        .children(vec![stage, status, boton])
+    }
+}
+
+fn main() {
+    llimphi_ui::run::<Demo>();
+}
diff --git a/llimphi-lottie/src/lib.rs b/llimphi-lottie/src/lib.rs
new file mode 100644
index 0000000..9cade5f
--- /dev/null
+++ b/llimphi-lottie/src/lib.rs
@@ -0,0 +1,461 @@
+//! `llimphi-lottie` — puente fino entre `velato` (reproductor de Lottie de
+//! Linebender) y Llimphi.
+//!
+//! `llimphi-svg` cubre el vector *estático* arbitrario (íconos `.desktop`,
+//! logos). `llimphi-motion` cubre el movimiento *generado por código* (tweens
+//! sobre el bucle Elm). Este crate cubre el hueco del medio: **animación
+//! vectorial autorada por fuera** — los `.json` de Lottie que exportan los
+//! diseñadores desde After Effects / lottiefiles (íconos animados,
+//! ilustraciones, estados vacíos, onboarding).
+//!
+//! Es el gemelo de `llimphi-svg`, con un eje de tiempo: `velato` parsea el JSON
+//! a una `Composition` y, para un `frame` dado, emite a la **misma**
+//! `vello::Scene` que usa `llimphi-raster`.
+//!
+//! ## Uso
+//!
+//! ```ignore
+//! use llimphi_lottie::LottieAsset;
+//! use std::time::Duration;
+//!
+//! // Parsea UNA vez (al cargar la app):
+//! let anim = LottieAsset::from_str(include_str!("spinner.json")).expect("lottie válido");
+//!
+//! // En el estado de la app guardas el tiempo transcurrido y lo avanzas con el
+//! // bucle Elm — exactamente el patrón de los workers de simulación:
+//! //   handle.spawn_periodic(Duration::from_millis(16), || Msg::Tick);
+//! // y en update: self.t += 1.0 / 60.0;
+//!
+//! // Pintalo a su instante actual (escala + centra al rect, en loop):
+//! View::new(style).children(vec![anim.view_at_time::<Msg>(self.t)])
+//! ```
+//!
+//! El parse cuesta (corre el importador serde de Lottie); el `paint`/`view` no.
+//! `LottieAsset` es `Clone` barato (`Arc` internamente) — el mismo asset en
+//! varios nodos no replica memoria.
+//!
+//! ## Por qué un `Renderer` nuevo por paint
+//!
+//! `velato::Renderer` es `Default` y sólo guarda Vecs de scratch que se limpian
+//! en cada `append`. No tiene recursos de GPU (eso es trabajo de `llimphi-hal`).
+//! Crear uno por frame es despreciable frente a empujar la geometría — que se
+//! hace igual — y nos deja un `LottieAsset` `Send + Sync` sin `Mutex`.
+//!
+//! ## Cobertura
+//!
+//! `velato` 0.9 implementa shapes, transforms animados, gradientes, trim paths,
+//! máscaras y precomposiciones — el grueso de los Lottie reales de íconos e
+//! ilustración. **No** implementa todavía capas de **texto**, **effects**
+//! (blur/drop-shadow) ni **expresiones** (declarado en su propio
+//! `schema/mod.rs`). Un asset que use esas features se pinta omitiéndolas, no
+//! rompe. Cuando un `.json` concreto las necesite, el camino es vendorizar
+//! `velato` como `shared/foreign-lottie` y completar el `todo` puntual.
+
+#![forbid(unsafe_code)]
+
+use std::sync::Arc;
+
+use llimphi_ui::llimphi_layout::taffy::prelude::{percent, Size, Style};
+use llimphi_ui::llimphi_layout::taffy::Position;
+use llimphi_ui::llimphi_raster::kurbo::Affine;
+use llimphi_ui::llimphi_raster::vello::Scene;
+use llimphi_ui::{PaintRect, View};
+
+// El motor es nuestro fork vendorizado de velato; lo aliasamos a `velato` para
+// que el resto del crate lea igual que la documentación upstream.
+use foreign_lottie as velato;
+use velato::Composition;
+
+/// Animación Lottie parseada y lista para stampear a cualquier `frame`.
+/// Internamente guarda la `Composition` de `velato` (el modelo del `.json`) +
+/// su geometría temporal. Cloneable barato (`Arc`) — un mismo asset en varios
+/// nodos no replica memoria. `Send + Sync`.
+#[derive(Clone)]
+pub struct LottieAsset {
+    inner: Arc<Composition>,
+}
+
+/// Error al parsear un Lottie. Hoy es un wrap del texto del error de `velato` —
+/// las apps típicas lo tratan como "fallback" (no animan) y no inspeccionan la
+/// variante.
+#[derive(Debug)]
+pub struct LottieError(pub String);
+
+impl std::fmt::Display for LottieError {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        write!(f, "lottie: {}", self.0)
+    }
+}
+
+impl std::error::Error for LottieError {}
+
+impl LottieAsset {
+    /// Parsea un Lottie desde su JSON como string. Devuelve un asset inmutable +
+    /// cloneable. **Hace el parseo completo** (serde + importación al modelo
+    /// runtime de `velato`); pensado para llamarse UNA vez por asset, no por
+    /// frame.
+    pub fn from_str(json: &str) -> Result<Self, LottieError> {
+        Self::from_bytes(json.as_bytes())
+    }
+
+    /// Parsea un Lottie desde sus bytes UTF-8 crudos (lo que devuelve
+    /// `include_bytes!("…json")` o `std::fs::read`).
+    ///
+    /// **Blindaje contra panics.** Nuestro fork `foreign-lottie` ya eliminó los
+    /// `todo!()`/`unimplemented!()` del importador de velato 0.9 (split
+    /// rotation/position, blends `Add`/`HardMix`, assets desconocidos, transform
+    /// sin rotación) — degradan con gracia en vez de paniquear. El `catch_unwind`
+    /// queda como red de seguridad secundaria: por si un `.json` raro alcanza
+    /// algún `panic!`/`unwrap` residual del deserializador, el asset cae al
+    /// fallback en vez de tumbar el hilo de UI. El render (`append`) es seguro,
+    /// así que no lo envolvemos por-frame.
+    pub fn from_bytes(json: &[u8]) -> Result<Self, LottieError> {
+        let parsed = std::panic::catch_unwind(|| Composition::from_slice(json));
+        let comp = match parsed {
+            Ok(Ok(comp)) => comp,
+            Ok(Err(e)) => return Err(LottieError(e.to_string())),
+            Err(_) => {
+                return Err(LottieError(
+                    "velato paniqueó al importar (feature no soportada: split \
+                     rotation/position, asset o blend sin implementar)"
+                        .to_string(),
+                ))
+            }
+        };
+        Ok(Self {
+            inner: Arc::new(comp),
+        })
+    }
+
+    /// Tamaño nominal de la animación en px (el `w`/`h` del Lottie). Útil para
+    /// dimensionar el rect destino preservando aspect ratio.
+    pub fn size(&self) -> (f64, f64) {
+        (self.inner.width as f64, self.inner.height as f64)
+    }
+
+    /// Cuadros por segundo declarados en el `.json` (`fr`).
+    pub fn frame_rate(&self) -> f64 {
+        self.inner.frame_rate
+    }
+
+    /// Rango de frames activos `[ip, op)` del Lottie. `paint` espera un `frame`
+    /// dentro de este rango; fuera de él, lo clampa a los extremos.
+    pub fn frames(&self) -> std::ops::Range<f64> {
+        self.inner.frames.clone()
+    }
+
+    /// Duración de una pasada completa, en segundos. `0.0` si el `.json` no
+    /// declara `fr` o no tiene frames.
+    pub fn duration_secs(&self) -> f64 {
+        let span = self.inner.frames.end - self.inner.frames.start;
+        if self.inner.frame_rate > 0.0 && span > 0.0 {
+            span / self.inner.frame_rate
+        } else {
+            0.0
+        }
+    }
+
+    /// Convierte un instante en segundos a un `frame` dentro del rango activo,
+    /// **en loop** (módulo la duración). Es el mapeo que usa `view_at_time` /
+    /// `paint_at_time`. Si el asset no tiene duración válida, devuelve el primer
+    /// frame.
+    pub fn frame_at_time(&self, t_secs: f64) -> f64 {
+        let start = self.inner.frames.start;
+        let span = self.inner.frames.end - start;
+        if span <= 0.0 || self.inner.frame_rate <= 0.0 {
+            return start;
+        }
+        let frames_elapsed = (t_secs.max(0.0) * self.inner.frame_rate) % span;
+        start + frames_elapsed
+    }
+
+    /// Pinta la animación al `frame` indicado sobre `scene`, ajustada al `rect`.
+    /// Escala uniforme al mínimo lado y **centra** dentro del rect (preserva
+    /// aspect ratio). `frame` se clampa al rango activo del Lottie. Útil cuando
+    /// el caller compone varios assets en un `paint_with` propio sin pasar por
+    /// `view()`.
+    pub fn paint(&self, scene: &mut Scene, rect: PaintRect, frame: f64) {
+        self.paint_alpha(scene, rect, frame, 1.0);
+    }
+
+    /// Como `paint`, pero con una opacidad global `alpha` (0..1) aplicada a toda
+    /// la composición. Es lo que habilita el **crossfade** entre clips de una
+    /// máquina de estados (pintar el saliente a `1-mix` y el entrante a `mix`).
+    /// `velato` lo soporta nativo: el `alpha` va al `append`.
+    pub fn paint_alpha(&self, scene: &mut Scene, rect: PaintRect, frame: f64, alpha: f64) {
+        let (vb_w, vb_h) = self.size();
+        let side_w = rect.w as f64;
+        let side_h = rect.h as f64;
+        if side_w <= 0.0 || side_h <= 0.0 || vb_w <= 0.0 || vb_h <= 0.0 || alpha <= 0.0 {
+            return;
+        }
+        let s = (side_w / vb_w).min(side_h / vb_h);
+        let used_w = vb_w * s;
+        let used_h = vb_h * s;
+        let tx = rect.x as f64 + (side_w - used_w) * 0.5;
+        let ty = rect.y as f64 + (side_h - used_h) * 0.5;
+        let xform = Affine::translate((tx, ty)) * Affine::scale(s);
+
+        let frame = frame.clamp(self.inner.frames.start, self.inner.frames.end);
+        // Renderer nuevo por paint: es `Default`, sólo scratch Vecs, sin GPU.
+        let mut renderer = velato::Renderer::new();
+        renderer.append(&self.inner, frame, xform, alpha.clamp(0.0, 1.0), scene);
+    }
+
+    /// Como `paint`, pero recibe el instante en **segundos** y lo mapea a frame
+    /// en loop vía `frame_at_time`. Es la forma esperada de animar desde el
+    /// estado de la app (acumulas `t` en segundos en `update`).
+    pub fn paint_at_time(&self, scene: &mut Scene, rect: PaintRect, t_secs: f64) {
+        self.paint(scene, rect, self.frame_at_time(t_secs));
+    }
+
+    /// Construye un `View` posicionado en absoluto que ocupa todo el rect del
+    /// padre y pinta la animación al `frame` indicado, centrada + escalada al
+    /// mínimo lado. Gemelo de `SvgAsset::view`, con frame. Genérico sobre `Msg`
+    /// igual que los widgets — el `View` no tiene handlers; la app los pone en
+    /// el padre.
+    pub fn view<Msg>(&self, frame: f64) -> View<Msg> {
+        let asset = self.clone();
+        View::new(absolute_fill())
+            .paint_with(move |scene, _ts, rect| asset.paint(scene, rect, frame))
+    }
+
+    /// Como `view`, pero recibe el instante en segundos (loop vía
+    /// `frame_at_time`). Es la variante que usas con un `t` acumulado en el
+    /// estado de la app.
+    pub fn view_at_time<Msg>(&self, t_secs: f64) -> View<Msg> {
+        let asset = self.clone();
+        View::new(absolute_fill())
+            .paint_with(move |scene, _ts, rect| asset.paint_at_time(scene, rect, t_secs))
+    }
+}
+
+/// Pinta un [`RenderFrame`] de una máquina de estados [`llimphi_anim`] usando
+/// `clips` indexados por `ClipId` (= índice en el slice). Pinta el clip primario
+/// y, si hay una transición en curso, hace **crossfade**: saliente a `1-mix`,
+/// entrante a `mix`. Los `ClipId` fuera de rango se omiten (no rompe).
+///
+/// `ClipSample::time_secs` se mapea a frame con loop vía `frame_at_time`, así
+/// que cada clip respeta su propio fps y duración.
+///
+/// [`RenderFrame`]: llimphi_anim::RenderFrame
+pub fn paint_render_frame(
+    scene: &mut Scene,
+    rect: PaintRect,
+    frame: &llimphi_anim::RenderFrame,
+    clips: &[LottieAsset],
+) {
+    let sample = |s: llimphi_anim::ClipSample, alpha: f64, scene: &mut Scene| {
+        if let Some(asset) = clips.get(s.clip as usize) {
+            let f = asset.frame_at_time(s.time_secs);
+            asset.paint_alpha(scene, rect, f, alpha);
+        }
+    };
+    match frame.blend {
+        None => sample(frame.primary, 1.0, scene),
+        Some((incoming, mix)) => {
+            let mix = mix as f64;
+            // Dissolve: el saliente se desvanece mientras el entrante aparece.
+            sample(frame.primary, 1.0 - mix, scene);
+            sample(incoming, mix, scene);
+        }
+    }
+}
+
+/// Construye un `View` absoluto que ocupa el rect del padre y pinta el
+/// [`RenderFrame`] actual de una máquina de estados (con crossfade). El caller
+/// llama `instance.render_frame()` cada frame y le pasa el resultado + sus clips
+/// (cloneados; baratos por `Arc`). Es el gemelo de [`LottieAsset::view`] para
+/// animación dirigida por estado en vez de por un solo clip.
+///
+/// [`RenderFrame`]: llimphi_anim::RenderFrame
+pub fn state_machine_view<Msg>(
+    frame: llimphi_anim::RenderFrame,
+    clips: Vec<LottieAsset>,
+) -> View<Msg> {
+    View::new(absolute_fill())
+        .paint_with(move |scene, _ts, rect| paint_render_frame(scene, rect, &frame, &clips))
+}
+
+/// Estilo "ocupa todo el rect del padre, en absoluto" — compartido por las dos
+/// variantes de `view`.
+fn absolute_fill() -> Style {
+    Style {
+        position: Position::Absolute,
+        size: Size {
+            width: percent(1.0_f32),
+            height: percent(1.0_f32),
+        },
+        ..Default::default()
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    /// Lottie mínimo válido: 60 frames a 30 fps, lienzo 100×100, sin capas.
+    /// (Suficiente para ejercitar parse + geometría temporal; el render de un
+    /// shape real lo cubren los assets de ejemplo, no un unit test.)
+    const LOTTIE_OK: &str =
+        r#"{"v":"5.5.2","fr":30,"ip":0,"op":60,"w":100,"h":100,"layers":[]}"#;
+
+    #[test]
+    fn from_str_parsea_ok() {
+        let a = LottieAsset::from_str(LOTTIE_OK).expect("parsea");
+        let (w, h) = a.size();
+        assert_eq!((w, h), (100.0, 100.0));
+        assert_eq!(a.frame_rate(), 30.0);
+    }
+
+    #[test]
+    fn duracion_y_rango() {
+        let a = LottieAsset::from_str(LOTTIE_OK).expect("parsea");
+        assert_eq!(a.frames(), 0.0..60.0);
+        // 60 frames / 30 fps = 2 s.
+        assert!((a.duration_secs() - 2.0).abs() < 1e-9);
+    }
+
+    #[test]
+    fn frame_at_time_hace_loop() {
+        let a = LottieAsset::from_str(LOTTIE_OK).expect("parsea");
+        // En t=0 → frame 0.
+        assert!((a.frame_at_time(0.0) - 0.0).abs() < 1e-9);
+        // En t=1 s (mitad) → frame 30.
+        assert!((a.frame_at_time(1.0) - 30.0).abs() < 1e-9);
+        // En t=2 s (una pasada exacta) → vuelve a 0 por el módulo.
+        assert!((a.frame_at_time(2.0) - 0.0).abs() < 1e-9);
+        // En t=2.5 s → frame 15 (loop).
+        assert!((a.frame_at_time(2.5) - 15.0).abs() < 1e-9);
+    }
+
+    #[test]
+    fn json_inválido_da_error() {
+        assert!(LottieAsset::from_str("{no es lottie}").is_err());
+    }
+
+    #[test]
+    fn asset_es_cloneable_barato() {
+        let a = LottieAsset::from_str(LOTTIE_OK).expect("parsea");
+        let b = a.clone();
+        assert_eq!(a.size(), b.size());
+    }
+
+    #[test]
+    fn paint_no_panica_con_rect_cero() {
+        let a = LottieAsset::from_str(LOTTIE_OK).expect("parsea");
+        let mut s = Scene::new();
+        a.paint(&mut s, PaintRect { x: 0.0, y: 0.0, w: 0.0, h: 0.0 }, 0.0);
+        a.paint_at_time(&mut s, PaintRect { x: 0.0, y: 0.0, w: 10.0, h: 0.0 }, 0.5);
+    }
+
+    /// `Send + Sync` es parte del contrato (igual que `SvgAsset`): el asset se
+    /// mueve a closures de paint que pueden cruzar threads.
+    #[test]
+    fn asset_es_send_sync() {
+        fn assert_send_sync<T: Send + Sync>() {}
+        assert_send_sync::<LottieAsset>();
+    }
+
+    /// Lottie con un shape real: un rectángulo rojo de 80×80 centrado en un
+    /// lienzo 100×100, estático 60 frames. Sirve para certificar — con
+    /// evidencia textual, no PNG — que la geometría llega a la `vello::Scene`.
+    const LOTTIE_RECT: &str = r#"{
+      "v":"5.5.2","fr":30,"ip":0,"op":60,"w":100,"h":100,
+      "layers":[{
+        "ty":4,"ip":0,"op":60,"st":0,"sr":1,
+        "ks":{"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0}},
+        "shapes":[
+          {"ty":"rc","p":{"a":0,"k":[50,50]},"s":{"a":0,"k":[80,80]},"r":{"a":0,"k":0}},
+          {"ty":"fl","c":{"a":0,"k":[0.8,0,0,1]},"o":{"a":0,"k":100}}
+        ]
+      }]
+    }"#;
+
+    #[test]
+    fn shape_real_emite_geometria_a_la_scene() {
+        let a = LottieAsset::from_str(LOTTIE_RECT).expect("parsea");
+        let mut scene = Scene::new();
+        // Antes de pintar: la Scene está vacía.
+        assert!(scene.encoding().is_empty(), "scene recién creada debe estar vacía");
+        a.paint(&mut scene, PaintRect { x: 0.0, y: 0.0, w: 200.0, h: 200.0 }, 0.0);
+        // Después: velato empujó el rect → encoding con contenido.
+        assert!(
+            !scene.encoding().is_empty(),
+            "tras paint de un shape real, la Scene debe tener geometría"
+        );
+    }
+
+    /// Mismo layer pero con el transform SIN campo de rotación (`r`). En velato
+    /// 0.9 upstream esto **paniquea** (`todo!("split rotation")`); nuestro fork
+    /// `foreign-lottie` lo trata como rotación 0 y **parsea bien**. Aquí
+    /// certificamos el resultado del fork: parse Ok, sin panic.
+    const LOTTIE_SIN_ROTACION: &str = r#"{
+      "v":"5.5.2","fr":30,"ip":0,"op":60,"w":100,"h":100,
+      "layers":[{
+        "ty":4,"ip":0,"op":60,"st":0,"sr":1,
+        "ks":{"p":{"a":0,"k":[0,0]}},
+        "shapes":[]
+      }]
+    }"#;
+
+    #[test]
+    fn lottie_sin_rotacion_parsea_con_el_fork() {
+        // En velato upstream esto era un panic; el fork lo importa como rot=0.
+        let a = LottieAsset::from_str(LOTTIE_SIN_ROTACION)
+            .expect("el fork parsea un transform sin rotación");
+        assert_eq!(a.size(), (100.0, 100.0));
+    }
+
+    /// Segundo clip distinto al rect: un círculo, para tener dos animaciones que
+    /// mezclar en la máquina de estados.
+    const LOTTIE_CIRC: &str = r#"{
+      "v":"5.5.2","fr":30,"ip":0,"op":60,"w":100,"h":100,
+      "layers":[{
+        "ty":4,"ip":0,"op":60,"st":0,"sr":1,
+        "ks":{"p":{"a":0,"k":[50,50]},"r":{"a":0,"k":0}},
+        "shapes":[
+          {"ty":"el","p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[70,70]}},
+          {"ty":"fl","c":{"a":0,"k":[0,0.4,0.9,1]},"o":{"a":0,"k":100}}
+        ]
+      }]
+    }"#;
+
+    /// E2E del Tier 1: máquina de estados (llimphi-anim) + dos clips Lottie +
+    /// `paint_render_frame`. Verifica que tanto el estado simple como el
+    /// crossfade emiten geometría a la `Scene` (evidencia textual, sin PNG).
+    #[test]
+    fn state_machine_pinta_clips_y_crossfade() {
+        use llimphi_anim::{Condition, StateMachine};
+
+        let rect = LottieAsset::from_str(LOTTIE_RECT).expect("rect");
+        let circ = LottieAsset::from_str(LOTTIE_CIRC).expect("circ");
+        let clips = vec![rect, circ]; // ClipId 0 = rect, 1 = circ
+
+        let mut sm = StateMachine::new();
+        let idle = sm.add_state("idle", 0, 1.0, true);
+        let walk = sm.add_state("walk", 1, 1.0, true);
+        sm.set_entry(idle);
+        sm.transition(idle, walk, vec![Condition::bool("moving", true)], 0.4);
+        let mut inst = sm.instance();
+
+        let big = PaintRect { x: 0.0, y: 0.0, w: 200.0, h: 200.0 };
+
+        // Estado simple: pinta sólo el clip primario (rect).
+        let mut s0 = Scene::new();
+        paint_render_frame(&mut s0, big, &inst.render_frame(), &clips);
+        assert!(!s0.encoding().is_empty(), "estado simple debe pintar geometría");
+
+        // Arranca la transición y cae a mitad del blend.
+        inst.set_bool("moving", true);
+        inst.advance(0.2); // 0.2/0.4 = mix 0.5
+        let rf = inst.render_frame();
+        assert!(rf.blend.is_some(), "debería estar en crossfade");
+        let mut s1 = Scene::new();
+        paint_render_frame(&mut s1, big, &rf, &clips);
+        assert!(!s1.encoding().is_empty(), "el crossfade debe pintar geometría");
+
+        // El view helper compila y produce un View sin panic.
+        let _v = state_machine_view::<()>(rf, clips);
+    }
+}
diff --git a/llimphi-mesh/Cargo.toml b/llimphi-mesh/Cargo.toml
new file mode 100644
index 0000000..4878ff1
--- /dev/null
+++ b/llimphi-mesh/Cargo.toml
@@ -0,0 +1,16 @@
+[package]
+name = "llimphi-mesh"
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+authors.workspace = true
+publish.workspace = true
+description = "llimphi-mesh — render de mallas deformables (llimphi-anim::skel::Mesh) a vello Scene. Ruta vectorial (fill por triángulo) y texturizada (clip + draw_image piecewise-affine), validadas contra vello 0.7. La matemática de huesos/skinning vive en llimphi-anim; este crate sólo pinta."
+
+[dependencies]
+llimphi-ui = { workspace = true }
+llimphi-anim = { workspace = true }
+
+[dev-dependencies]
+# Sólo para el ejemplo combinado lottie+rive (Lottie + esqueleto/IK en una app).
+llimphi-lottie = { workspace = true }
diff --git a/llimphi-mesh/LEEME.md b/llimphi-mesh/LEEME.md
new file mode 100644
index 0000000..0abc10a
--- /dev/null
+++ b/llimphi-mesh/LEEME.md
@@ -0,0 +1,27 @@
+# llimphi-mesh
+
+*Read this in English: [README.md](README.md).*
+
+Render de mallas deformables a una `vello::Scene`.
+
+La matemática de huesos y skinning vive en `llimphi_anim::skel`; este crate
+sólo **pinta** la malla ya deformada. Recibe la malla (`Mesh`) + las
+posiciones deformadas de sus vértices (lo que devuelve `Mesh::deform`) y un
+`xform` model→pantalla, y ofrece las dos rutas que el spike validó contra
+vello 0.7:
+
+- `paint_solid` — rellena cada triángulo deformado con un color (malla
+  vectorial / debug). Trivial.
+- `paint_textured` — malla **texturizada**: por triángulo, recorta al
+  triángulo deformado y dibuja la imagen con el afín que mapea sus UV a la
+  posición deformada (warp piecewise-affine). Costo = un clip-layer por
+  triángulo; cuidado con mallas de miles de triángulos.
+- `paint_wireframe` — traza los bordes de los triángulos (ver la
+  deformación; ideal para demos/debug).
+
+Helpers de encuadre: `rest_bounds` (bbox de la malla en reposo) +
+`fit_transform` (afín que encaja esos bounds, centrados, en un `PaintRect`).
+
+---
+
+Parte de **llimphi** — ver [llimphi](../LEEME.md).
diff --git a/llimphi-mesh/README.md b/llimphi-mesh/README.md
new file mode 100644
index 0000000..07fa55f
--- /dev/null
+++ b/llimphi-mesh/README.md
@@ -0,0 +1,25 @@
+# llimphi-mesh
+
+Rendering of deformable meshes to a `vello::Scene`.
+
+The bone and skinning maths live in `llimphi_anim::skel`; this crate only
+**paints** the already-deformed mesh. It receives the mesh (`Mesh`) plus the
+deformed positions of its vertices (what `Mesh::deform` returns) and a
+model→screen `xform`, and offers the two routes the spike validated against
+vello 0.7:
+
+- `paint_solid` — fills each deformed triangle with a colour (vector mesh /
+  debug). Trivial.
+- `paint_textured` — a **textured** mesh: per triangle, it clips to the deformed
+  triangle and draws the image with the affine mapping its UVs to the deformed
+  position (piecewise-affine warp). Cost = one clip layer per triangle; careful
+  with meshes of thousands of triangles.
+- `paint_wireframe` — strokes the triangle edges (to see the deformation; ideal
+  for demos and debugging).
+
+Framing helpers: `rest_bounds` (the mesh's bbox at rest) and `fit_transform` (the
+affine fitting those bounds, centred, into a `PaintRect`).
+
+---
+
+Part of **llimphi** — see [llimphi](../README.md).
diff --git a/llimphi-mesh/examples/bones_demo.rs b/llimphi-mesh/examples/bones_demo.rs
new file mode 100644
index 0000000..5de9582
--- /dev/null
+++ b/llimphi-mesh/examples/bones_demo.rs
@@ -0,0 +1,221 @@
+//! Demo del Tier 4: una tira **texturizada deformada por una cadena de huesos**
+//! que ondula como una bandera/tentáculo.
+//!
+//! La cadena de huesos (`llimphi_anim::skel`) se re-posa cada frame con una onda
+//! senoidal de fase creciente; el skinning (LBS) deforma los vértices; y
+//! `llimphi-mesh` pinta la malla texturizada (warp piecewise-affine) con un
+//! wireframe encima para ver la deformación. **Espacio** alterna el wireframe.
+//!
+//! Todo Rust nativo, sobre vello 0.7 — cero C++.
+//!
+//! Corre con:
+//!   `cargo run -p llimphi-mesh --example bones_demo --release`
+
+use std::sync::Arc;
+use std::time::Duration;
+
+use llimphi_anim::skel::{Mesh, Pose, Skeleton, Vertex};
+use llimphi_mesh::{fit_transform, paint_textured, paint_wireframe, rest_bounds};
+use llimphi_ui::llimphi_layout::taffy::{
+    prelude::{length, percent, FlexDirection, Size, Style},
+    AlignItems, JustifyContent, Rect,
+};
+use llimphi_ui::llimphi_raster::kurbo::{Point, Vec2};
+use llimphi_ui::llimphi_raster::peniko::{
+    Blob, Color, ImageAlphaType, ImageBrush, ImageData, ImageFormat,
+};
+use llimphi_ui::{App, Handle, Key, KeyEvent, KeyState, NamedKey, PaintRect, View};
+
+const SEG: usize = 8; // segmentos de la tira (= huesos de la cadena, +1 raíz)
+const STEP: f64 = 30.0; // largo de cada hueso/segmento
+const STRIP_H: f64 = 72.0; // alto de la tira
+
+/// Construye la cadena de huesos (raíz + SEG eslabones) y la malla-tira atada a
+/// ella (rigid por columna), con UVs de 0..1 a lo ancho/alto.
+fn build() -> (Skeleton, Mesh) {
+    let mut s = Skeleton::new();
+    // Raíz anclada a la izquierda; cada eslabón se traslada STEP en x respecto
+    // al padre. Bone i tiene id i (orden de inserción).
+    s.add_bone(None, Pose::translate(Vec2::new(0.0, STRIP_H / 2.0)));
+    for _ in 1..=SEG {
+        s.add_bone(Some(s.len() - 1), Pose::translate(Vec2::new(STEP, 0.0)));
+    }
+    s.bind();
+
+    let mut m = Mesh::new();
+    for i in 0..=SEG {
+        let x = i as f64 * STEP;
+        let u = i as f64 / SEG as f64;
+        m.vertices.push(Vertex::rigid(Point::new(x, 0.0), (u, 0.0), i)); // borde sup
+        m.vertices.push(Vertex::rigid(Point::new(x, STRIP_H), (u, 1.0), i)); // borde inf
+    }
+    for i in 0..SEG {
+        let (t0, t1) = ((2 * i) as u32, (2 * (i + 1)) as u32);
+        let (b0, b1) = ((2 * i + 1) as u32, (2 * (i + 1) + 1) as u32);
+        m.triangles.push([t0, t1, b1]);
+        m.triangles.push([t0, b1, b0]);
+    }
+    (s, m)
+}
+
+/// Textura procedural: tablero de ajedrez (para ver el warp).
+fn checker(n: u32, sq: u32) -> ImageBrush {
+    let mut px = Vec::with_capacity((n * n * 4) as usize);
+    for y in 0..n {
+        for x in 0..n {
+            let on = ((x / sq + y / sq) % 2) == 0;
+            let (r, g, b) = if on { (70, 130, 205) } else { (240, 180, 70) };
+            px.extend_from_slice(&[r, g, b, 255]);
+        }
+    }
+    ImageBrush::new(ImageData {
+        data: Blob::new(Arc::new(px)),
+        format: ImageFormat::Rgba8,
+        alpha_type: ImageAlphaType::Alpha,
+        width: n,
+        height: n,
+    })
+}
+
+#[derive(Clone)]
+enum Msg {
+    Tick,
+    ToggleWire,
+}
+
+struct Model {
+    skel: Skeleton,
+    mesh: Mesh,
+    image: ImageBrush,
+    t: f64,
+    wireframe: bool,
+}
+
+struct Demo;
+
+const TICK: Duration = Duration::from_millis(16);
+
+impl App for Demo {
+    type Model = Model;
+    type Msg = Msg;
+
+    fn title() -> &'static str {
+        "llimphi · malla deformada por huesos"
+    }
+    fn initial_size() -> (u32, u32) {
+        (520, 420)
+    }
+
+    fn init(handle: &Handle<Self::Msg>) -> Self::Model {
+        let (skel, mesh) = build();
+        handle.spawn_periodic(TICK, || Msg::Tick);
+        Model {
+            skel,
+            mesh,
+            image: checker(8, 1),
+            t: 0.0,
+            wireframe: true,
+        }
+    }
+
+    fn update(mut model: Self::Model, msg: Self::Msg, _: &Handle<Self::Msg>) -> Self::Model {
+        match msg {
+            Msg::Tick => {
+                model.t += TICK.as_secs_f64();
+                // Onda viajera: cada hueso oscila con fase creciente → la tira
+                // ondula desde el ancla hacia la punta.
+                for i in 1..=SEG {
+                    let r = 0.38 * (model.t * 3.0 - i as f64 * 0.6).sin();
+                    model
+                        .skel
+                        .set_pose(i, Pose::new(Vec2::new(STEP, 0.0), r, Vec2::new(1.0, 1.0)));
+                }
+                model.skel.update();
+            }
+            Msg::ToggleWire => model.wireframe = !model.wireframe,
+        }
+        model
+    }
+
+    fn on_key(_: &Self::Model, e: &KeyEvent) -> Option<Self::Msg> {
+        if e.state == KeyState::Pressed && e.key == Key::Named(NamedKey::Space) {
+            Some(Msg::ToggleWire)
+        } else {
+            None
+        }
+    }
+
+    fn view(model: &Self::Model) -> View<Self::Msg> {
+        // Deformar aquí (lectura) y mover los datos al closure de pintura.
+        let positions = model.mesh.deform(&model.skel);
+        let mesh = model.mesh.clone();
+        let image = model.image.clone();
+        let wire = model.wireframe;
+
+        let stage = View::new(Style {
+            size: Size {
+                width: percent(1.0_f32),
+                height: percent(1.0_f32),
+            },
+            flex_grow: 1.0,
+            ..Default::default()
+        })
+        .paint_with(move |scene, _ts, rect| {
+            // Margen para que la onda no se recorte contra el borde.
+            let inner = PaintRect {
+                x: rect.x + 50.0,
+                y: rect.y + 50.0,
+                w: (rect.w - 100.0).max(1.0),
+                h: (rect.h - 100.0).max(1.0),
+            };
+            let xf = fit_transform(rest_bounds(&mesh), inner);
+            paint_textured(scene, &mesh, &positions, xf, &image);
+            if wire {
+                paint_wireframe(
+                    scene,
+                    &mesh,
+                    &positions,
+                    xf,
+                    Color::from_rgba8(255, 255, 255, 120),
+                    1.2,
+                );
+            }
+        });
+
+        let hint = View::new(Style {
+            size: Size {
+                width: percent(1.0_f32),
+                height: length(30.0_f32),
+            },
+            align_items: Some(AlignItems::Center),
+            justify_content: Some(JustifyContent::Center),
+            ..Default::default()
+        })
+        .text(
+            "tira texturizada deformada por una cadena de huesos · Espacio: wireframe".to_string(),
+            13.0,
+            Color::from_rgba8(140, 155, 180, 255),
+        );
+
+        View::new(Style {
+            flex_direction: FlexDirection::Column,
+            size: Size {
+                width: percent(1.0_f32),
+                height: percent(1.0_f32),
+            },
+            padding: Rect {
+                left: length(8.0_f32),
+                right: length(8.0_f32),
+                top: length(8.0_f32),
+                bottom: length(8.0_f32),
+            },
+            ..Default::default()
+        })
+        .fill(Color::from_rgba8(18, 22, 30, 255))
+        .children(vec![stage, hint])
+    }
+}
+
+fn main() {
+    llimphi_ui::run::<Demo>();
+}
diff --git a/llimphi-mesh/examples/clips_to_bones_demo.rs b/llimphi-mesh/examples/clips_to_bones_demo.rs
new file mode 100644
index 0000000..575dc1b
--- /dev/null
+++ b/llimphi-mesh/examples/clips_to_bones_demo.rs
@@ -0,0 +1,248 @@
+//! Demo que **cierra el círculo** del motor: máquina de estados → animación de
+//! huesos → skinning → malla deformada.
+//!
+//! Dos clips son `BoneAnimation`s (animaciones esqueletales keyframeadas):
+//! `rest` (tira recta) y `wave` (onda viajera). Una máquina de estados
+//! (`llimphi-anim`) transiciona entre ellos por el input `active`, y
+//! `pose_from_render_frame` posa el esqueleto **blendeando poses** durante el
+//! crossfade — así la tira se *ease-in* a la onda en vez de saltar. El skinning
+//! deforma la malla texturizada (`llimphi-mesh`).
+//!
+//! **Espacio** alterna `active` (rest ⇄ wave). Todo Rust nativo sobre vello 0.7.
+//!
+//! Corre con:
+//!   `cargo run -p llimphi-mesh --example clips_to_bones_demo --release`
+
+use std::f64::consts::PI;
+use std::sync::Arc;
+use std::time::Duration;
+
+use llimphi_anim::skel::{
+    pose_from_render_frame, BoneAnimation, BoneTrack, Mesh, Pose, PoseKey, Skeleton, Vertex,
+};
+use llimphi_anim::{Condition, Instance, StateMachine};
+use llimphi_mesh::{fit_transform, paint_textured, paint_wireframe, rest_bounds};
+use llimphi_ui::llimphi_layout::taffy::{
+    prelude::{length, percent, FlexDirection, Size, Style},
+    AlignItems, JustifyContent, Rect,
+};
+use llimphi_ui::llimphi_raster::kurbo::{Point, Vec2};
+use llimphi_ui::llimphi_raster::peniko::{
+    Blob, Color, ImageAlphaType, ImageBrush, ImageData, ImageFormat,
+};
+use llimphi_ui::{App, Handle, Key, KeyEvent, KeyState, NamedKey, PaintRect, View};
+
+const SEG: usize = 8;
+const STEP: f64 = 30.0;
+const STRIP_H: f64 = 72.0;
+
+/// Cadena de huesos (raíz anclada + SEG eslabones) + malla-tira atada rigid.
+fn build_rig() -> (Skeleton, Mesh) {
+    let mut s = Skeleton::new();
+    s.add_bone(None, Pose::translate(Vec2::new(0.0, STRIP_H / 2.0)));
+    for _ in 1..=SEG {
+        s.add_bone(Some(s.len() - 1), Pose::translate(Vec2::new(STEP, 0.0)));
+    }
+    s.bind();
+
+    let mut m = Mesh::new();
+    for i in 0..=SEG {
+        let x = i as f64 * STEP;
+        let u = i as f64 / SEG as f64;
+        m.vertices.push(Vertex::rigid(Point::new(x, 0.0), (u, 0.0), i));
+        m.vertices.push(Vertex::rigid(Point::new(x, STRIP_H), (u, 1.0), i));
+    }
+    for i in 0..SEG {
+        let (t0, t1) = ((2 * i) as u32, (2 * (i + 1)) as u32);
+        let (b0, b1) = ((2 * i + 1) as u32, (2 * (i + 1) + 1) as u32);
+        m.triangles.push([t0, t1, b1]);
+        m.triangles.push([t0, b1, b0]);
+    }
+    (s, m)
+}
+
+/// Pose de un eslabón: mantiene la translación STEP (estructura de la cadena) y
+/// anima sólo la rotación.
+fn link_pose(rot: f64) -> Pose {
+    Pose::new(Vec2::new(STEP, 0.0), rot, Vec2::new(1.0, 1.0))
+}
+
+/// Clip "recto": todos los eslabones a rotación 0 (un keyframe).
+fn straight_anim() -> BoneAnimation {
+    let tracks = (1..=SEG)
+        .map(|i| BoneTrack {
+            bone: i,
+            keys: vec![PoseKey { t: 0.0, pose: link_pose(0.0) }],
+        })
+        .collect();
+    BoneAnimation { duration: 1.0, looping: true, tracks }
+}
+
+/// Clip "onda": cada eslabón keyframeado con una senoidal de fase creciente.
+fn wave_anim(amp: f64, period: f64, nkeys: usize) -> BoneAnimation {
+    let tracks = (1..=SEG)
+        .map(|i| {
+            let keys = (0..=nkeys)
+                .map(|k| {
+                    let t = period * k as f64 / nkeys as f64;
+                    let r = amp * (2.0 * PI * t / period - i as f64 * 0.6).sin();
+                    PoseKey { t, pose: link_pose(r) }
+                })
+                .collect();
+            BoneTrack { bone: i, keys }
+        })
+        .collect();
+    BoneAnimation { duration: period, looping: true, tracks }
+}
+
+fn checker(n: u32, sq: u32) -> ImageBrush {
+    let mut px = Vec::with_capacity((n * n * 4) as usize);
+    for y in 0..n {
+        for x in 0..n {
+            let on = ((x / sq + y / sq) % 2) == 0;
+            let (r, g, b) = if on { (70, 130, 205) } else { (240, 180, 70) };
+            px.extend_from_slice(&[r, g, b, 255]);
+        }
+    }
+    ImageBrush::new(ImageData {
+        data: Blob::new(Arc::new(px)),
+        format: ImageFormat::Rgba8,
+        alpha_type: ImageAlphaType::Alpha,
+        width: n,
+        height: n,
+    })
+}
+
+#[derive(Clone)]
+enum Msg {
+    Tick,
+    Toggle,
+}
+
+struct Model {
+    sm: Instance,
+    skel: Skeleton,
+    mesh: Mesh,
+    clips: Vec<BoneAnimation>,
+    image: ImageBrush,
+    active: bool,
+}
+
+struct Demo;
+
+const TICK: Duration = Duration::from_millis(16);
+
+impl App for Demo {
+    type Model = Model;
+    type Msg = Msg;
+
+    fn title() -> &'static str {
+        "llimphi · clips → huesos → malla"
+    }
+    fn initial_size() -> (u32, u32) {
+        (560, 420)
+    }
+
+    fn init(handle: &Handle<Self::Msg>) -> Self::Model {
+        let (skel, mesh) = build_rig();
+        let clips = vec![straight_anim(), wave_anim(0.42, 2.2, 16)];
+
+        let mut sm = StateMachine::new();
+        let rest = sm.add_state("rest", 0, 1.0, true);
+        let wave = sm.add_state("wave", 1, 1.0, true);
+        sm.set_entry(rest);
+        sm.transition(rest, wave, vec![Condition::bool("active", true)], 0.5);
+        sm.transition(wave, rest, vec![Condition::bool("active", false)], 0.5);
+
+        handle.spawn_periodic(TICK, || Msg::Tick);
+
+        Model {
+            sm: sm.instance(),
+            skel,
+            mesh,
+            clips,
+            image: checker(8, 1),
+            active: false,
+        }
+    }
+
+    fn update(mut model: Self::Model, msg: Self::Msg, _: &Handle<Self::Msg>) -> Self::Model {
+        match msg {
+            Msg::Tick => {
+                model.sm.advance(TICK.as_secs_f64());
+                // El estado/transición de la máquina posa el esqueleto (blend de
+                // poses durante el crossfade). pose_from_render_frame llama
+                // skel.update() internamente.
+                let frame = model.sm.render_frame();
+                pose_from_render_frame(&mut model.skel, &frame, &model.clips);
+            }
+            Msg::Toggle => {
+                model.active = !model.active;
+                model.sm.set_bool("active", model.active);
+            }
+        }
+        model
+    }
+
+    fn on_key(_: &Self::Model, e: &KeyEvent) -> Option<Self::Msg> {
+        if e.state == KeyState::Pressed && e.key == Key::Named(NamedKey::Space) {
+            Some(Msg::Toggle)
+        } else {
+            None
+        }
+    }
+
+    fn view(model: &Self::Model) -> View<Self::Msg> {
+        let positions = model.mesh.deform(&model.skel);
+        let mesh = model.mesh.clone();
+        let image = model.image.clone();
+
+        let stage = View::new(Style {
+            size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+            flex_grow: 1.0,
+            ..Default::default()
+        })
+        .paint_with(move |scene, _ts, rect| {
+            let inner = PaintRect {
+                x: rect.x + 50.0,
+                y: rect.y + 50.0,
+                w: (rect.w - 100.0).max(1.0),
+                h: (rect.h - 100.0).max(1.0),
+            };
+            let xf = fit_transform(rest_bounds(&mesh), inner);
+            paint_textured(scene, &mesh, &positions, xf, &image);
+            paint_wireframe(scene, &mesh, &positions, xf, Color::from_rgba8(255, 255, 255, 110), 1.2);
+        });
+
+        let label = if model.sm.is_transitioning() {
+            "· · · blend de poses · · ·".to_string()
+        } else {
+            format!("estado: {}   (Espacio: rest ⇄ wave)", model.sm.current_state())
+        };
+        let status = View::new(Style {
+            size: Size { width: percent(1.0_f32), height: length(30.0_f32) },
+            align_items: Some(AlignItems::Center),
+            justify_content: Some(JustifyContent::Center),
+            ..Default::default()
+        })
+        .text(label, 14.0, Color::from_rgba8(150, 165, 190, 255));
+
+        View::new(Style {
+            flex_direction: FlexDirection::Column,
+            size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+            padding: Rect {
+                left: length(8.0_f32),
+                right: length(8.0_f32),
+                top: length(8.0_f32),
+                bottom: length(8.0_f32),
+            },
+            ..Default::default()
+        })
+        .fill(Color::from_rgba8(18, 22, 30, 255))
+        .children(vec![stage, status])
+    }
+}
+
+fn main() {
+    llimphi_ui::run::<Demo>();
+}
diff --git a/llimphi-mesh/examples/lottie_rive_demo.rs b/llimphi-mesh/examples/lottie_rive_demo.rs
new file mode 100644
index 0000000..05974d6
--- /dev/null
+++ b/llimphi-mesh/examples/lottie_rive_demo.rs
@@ -0,0 +1,241 @@
+//! Demo **lottie + rive** en una sola app: los dos paradigmas de animación del
+//! motor nativo trabajando juntos.
+//!
+//! - **rive (esqueletal + IK)**: un brazo de 2 huesos con una malla texturizada
+//!   skinneada, que **persigue el cursor** resolviendo IK de 2 huesos cada frame
+//!   (`llimphi_anim::constraint::solve_two_bone_ik`).
+//! - **lottie**: un pulso vectorial (`llimphi-lottie` sobre el fork de velato)
+//!   reproducido en la **punta del brazo** y otro marcando el **objetivo** bajo
+//!   el cursor.
+//!
+//! Mové el mouse: el brazo alcanza el cursor (IK), el Lottie late en la punta y
+//! en el blanco. **F** alterna el codo (flip de la solución IK). Todo Rust
+//! nativo sobre vello 0.7, cero C++.
+//!
+//! Corre con:
+//!   `cargo run -p llimphi-mesh --example lottie_rive_demo --release`
+
+use std::sync::Arc;
+use std::time::Duration;
+
+use llimphi_anim::constraint::solve_two_bone_ik;
+use llimphi_anim::skel::{BoneId, Mesh, Pose, Skeleton, Vertex, Weight};
+use llimphi_lottie::LottieAsset;
+use llimphi_mesh::{paint_textured, paint_wireframe};
+use llimphi_ui::llimphi_layout::taffy::prelude::{percent, Size, Style};
+use llimphi_ui::llimphi_raster::kurbo::{Affine, Point, Vec2};
+use llimphi_ui::llimphi_raster::peniko::{
+    Blob, Color, ImageAlphaType, ImageBrush, ImageData, ImageFormat,
+};
+use llimphi_ui::{App, Handle, Key, KeyEvent, KeyState, PaintRect, View};
+
+// Brazo en coordenadas locales del lienzo (px). Ancla a la izquierda-centro.
+const ANCHOR: (f64, f64) = (110.0, 200.0);
+const L1: f64 = 95.0; // hueso superior
+const L2: f64 = 95.0; // hueso inferior
+const ARM_H: f64 = 40.0; // grosor del brazo
+const COLS: usize = 6; // columnas de la malla a lo largo del brazo
+
+/// Pulso azul: círculo cuya opacidad late en 1.5 s.
+const PULSE_LOTTIE: &str = r#"{
+  "v":"5.5.2","fr":30,"ip":0,"op":45,"w":100,"h":100,
+  "layers":[{"ty":4,"ip":0,"op":45,"st":0,"sr":1,
+    "ks":{"o":{"a":1,"k":[
+        {"i":{"x":[0.5],"y":[0.5]},"o":{"x":[0.5],"y":[0.5]},"t":0,"s":[100]},
+        {"i":{"x":[0.5],"y":[0.5]},"o":{"x":[0.5],"y":[0.5]},"t":22,"s":[25]},
+        {"t":45,"s":[100]}]},
+      "r":{"a":0,"k":0},"p":{"a":0,"k":[50,50]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]}},
+    "shapes":[{"ty":"gr","it":[
+      {"ty":"el","p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[60,60]}},
+      {"ty":"fl","c":{"a":0,"k":[0.45,0.75,1.0]},"o":{"a":0,"k":100}},
+      {"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100}}]}]}]}"#;
+
+/// Brazo de 2 huesos + malla-tira skinneada (peso suave alrededor del codo).
+fn build_arm() -> (Skeleton, Mesh, BoneId, BoneId) {
+    let mut s = Skeleton::new();
+    let a = s.add_bone(None, Pose::translate(Vec2::new(ANCHOR.0, ANCHOR.1)));
+    let b = s.add_bone(Some(a), Pose::translate(Vec2::new(L1, 0.0)));
+    s.bind();
+    s.update();
+
+    let total = L1 + L2;
+    let blend = total * 0.16; // ancho del blend de peso en el codo
+    let mut m = Mesh::new();
+    for i in 0..=COLS {
+        let p = total * i as f64 / COLS as f64; // posición a lo largo del brazo
+        // Peso suave: 1→A antes del codo, 0→A (todo B) después.
+        let wa = (1.0 - (p - (L1 - blend)) / (2.0 * blend)).clamp(0.0, 1.0);
+        let weights = vec![
+            Weight { bone: a, weight: wa },
+            Weight { bone: b, weight: 1.0 - wa },
+        ];
+        let u = i as f64 / COLS as f64;
+        let x = ANCHOR.0 + p;
+        m.vertices.push(Vertex {
+            rest: Point::new(x, ANCHOR.1 - ARM_H / 2.0),
+            uv: (u, 0.0),
+            weights: weights.clone(),
+        });
+        m.vertices.push(Vertex {
+            rest: Point::new(x, ANCHOR.1 + ARM_H / 2.0),
+            uv: (u, 1.0),
+            weights,
+        });
+    }
+    for i in 0..COLS {
+        let (t0, t1) = ((2 * i) as u32, (2 * (i + 1)) as u32);
+        let (b0, b1) = ((2 * i + 1) as u32, (2 * (i + 1) + 1) as u32);
+        m.triangles.push([t0, t1, b1]);
+        m.triangles.push([t0, b1, b0]);
+    }
+    (s, m, a, b)
+}
+
+fn checker(n: u32, sq: u32) -> ImageBrush {
+    let mut px = Vec::with_capacity((n * n * 4) as usize);
+    for y in 0..n {
+        for x in 0..n {
+            let on = ((x / sq + y / sq) % 2) == 0;
+            let (r, g, b) = if on { (235, 110, 90) } else { (250, 200, 120) };
+            px.extend_from_slice(&[r, g, b, 255]);
+        }
+    }
+    ImageBrush::new(ImageData {
+        data: Blob::new(Arc::new(px)),
+        format: ImageFormat::Rgba8,
+        alpha_type: ImageAlphaType::Alpha,
+        width: n,
+        height: n,
+    })
+}
+
+#[derive(Clone)]
+enum Msg {
+    Tick,
+    Target(f64, f64),
+    Flip,
+}
+
+struct Model {
+    skel: Skeleton,
+    mesh: Mesh,
+    upper: BoneId,
+    lower: BoneId,
+    image: ImageBrush,
+    pulse: LottieAsset,
+    target: Point,
+    t: f64,
+    flip: bool,
+}
+
+struct Demo;
+
+const TICK: Duration = Duration::from_millis(16);
+const TIP_LOCAL: Vec2 = Vec2::new(L2, 0.0);
+
+impl App for Demo {
+    type Model = Model;
+    type Msg = Msg;
+
+    fn title() -> &'static str {
+        "llimphi · lottie + rive"
+    }
+    fn initial_size() -> (u32, u32) {
+        (640, 420)
+    }
+
+    fn init(handle: &Handle<Self::Msg>) -> Self::Model {
+        let (skel, mesh, upper, lower) = build_arm();
+        handle.spawn_periodic(TICK, || Msg::Tick);
+        Model {
+            skel,
+            mesh,
+            upper,
+            lower,
+            image: checker(8, 1),
+            pulse: LottieAsset::from_str(PULSE_LOTTIE).expect("pulse lottie"),
+            target: Point::new(360.0, 150.0),
+            t: 0.0,
+            flip: false,
+        }
+    }
+
+    fn update(mut model: Self::Model, msg: Self::Msg, _: &Handle<Self::Msg>) -> Self::Model {
+        match msg {
+            Msg::Tick => {
+                model.t += TICK.as_secs_f64();
+                // IK cada frame: el brazo alcanza el objetivo (cursor).
+                solve_two_bone_ik(
+                    &mut model.skel,
+                    model.upper,
+                    model.lower,
+                    TIP_LOCAL,
+                    model.target,
+                    model.flip,
+                );
+            }
+            Msg::Target(x, y) => model.target = Point::new(x, y),
+            Msg::Flip => model.flip = !model.flip,
+        }
+        model
+    }
+
+    fn on_key(_: &Self::Model, e: &KeyEvent) -> Option<Self::Msg> {
+        if e.state == KeyState::Pressed {
+            if let Key::Character(c) = &e.key {
+                if c.as_str() == "f" {
+                    return Some(Msg::Flip);
+                }
+            }
+        }
+        None
+    }
+
+    fn view(model: &Self::Model) -> View<Self::Msg> {
+        let positions = model.mesh.deform(&model.skel);
+        // Punta del brazo (mundo local) = world(lower) · tip_local.
+        let tip_local = model.skel.world(model.lower) * Point::new(TIP_LOCAL.x, TIP_LOCAL.y);
+        let mesh = model.mesh.clone();
+        let image = model.image.clone();
+        let pulse = model.pulse.clone();
+        let target = model.target;
+        let t = model.t;
+
+        View::new(Style {
+            size: Size {
+                width: percent(1.0_f32),
+                height: percent(1.0_f32),
+            },
+            ..Default::default()
+        })
+        .fill(Color::from_rgba8(18, 22, 30, 255))
+        .paint_with(move |scene, _ts, rect| {
+            // Coords locales → pantalla (el lienzo arranca en rect.x/rect.y).
+            let to_screen = Affine::translate((rect.x as f64, rect.y as f64));
+            // Brazo skinneado (rive).
+            paint_textured(scene, &mesh, &positions, to_screen, &image);
+            paint_wireframe(
+                scene,
+                &mesh,
+                &positions,
+                to_screen,
+                Color::from_rgba8(255, 255, 255, 90),
+                1.0,
+            );
+            // Pulso lottie en la punta del brazo y en el objetivo.
+            let pulse_rect = |p: Point, s: f64| PaintRect {
+                x: (rect.x as f64 + p.x - s) as f32,
+                y: (rect.y as f64 + p.y - s) as f32,
+                w: (s * 2.0) as f32,
+                h: (s * 2.0) as f32,
+            };
+            pulse.paint_at_time(scene, pulse_rect(target, 30.0), t);
+            pulse.paint_at_time(scene, pulse_rect(tip_local, 22.0), t);
+        })
+        .on_pointer_move_at(|lx, ly, _w, _h| Some(Msg::Target(lx as f64, ly as f64)))
+    }
+}
+
+fn main() {
+    llimphi_ui::run::<Demo>();
+}
diff --git a/llimphi-mesh/examples/physics_skeletons_demo.rs b/llimphi-mesh/examples/physics_skeletons_demo.rs
new file mode 100644
index 0000000..7f2cacd
--- /dev/null
+++ b/llimphi-mesh/examples/physics_skeletons_demo.rs
@@ -0,0 +1,211 @@
+//! Demo **chévere**: leyes físicas sobre varios esqueletos.
+//!
+//! Cinco tentáculos: cada uno es una cadena de huesos con una malla texturizada
+//! skinneada, manejada por **física Verlet** (`llimphi_anim::physics`) — cuelgan
+//! del techo, se balancean bajo gravedad y rebotan en el piso. **Mové el mouse**
+//! y el cursor los **empuja** (campo de repulsión). Cero keyframes: la física
+//! posa los esqueletos, el skinning deforma las mallas.
+//!
+//! Todo Rust nativo sobre vello 0.7. Pensado también como fondo vivo de
+//! lock/greeter.
+//!
+//! Corre con:
+//!   `cargo run -p llimphi-mesh --example physics_skeletons_demo --release`
+
+use std::sync::Arc;
+use std::time::Duration;
+
+use llimphi_anim::physics::{pose_chain_from_points, Physics};
+use llimphi_anim::skel::{BoneId, Mesh, Pose, Skeleton, Vertex};
+use llimphi_mesh::paint_textured;
+use llimphi_ui::llimphi_layout::taffy::prelude::{percent, Size, Style};
+use llimphi_ui::llimphi_raster::kurbo::{Affine, Point, Vec2};
+use llimphi_ui::llimphi_raster::peniko::{
+    Blob, Color, ImageAlphaType, ImageBrush, ImageData, ImageFormat,
+};
+use llimphi_ui::{App, Handle, PaintRect, View};
+
+const SEGS: usize = 9;
+const SEG_LEN: f64 = 26.0;
+const THICK: f64 = 22.0;
+const FLOOR_Y: f64 = 372.0;
+
+/// Un tentáculo: física (partículas en cadena) + esqueleto + malla skinneada.
+struct Rope {
+    phys: Physics,
+    skel: Skeleton,
+    mesh: Mesh,
+    bones: Vec<BoneId>,
+    image: ImageBrush,
+}
+
+fn checker(a: (u8, u8, u8), b: (u8, u8, u8)) -> ImageBrush {
+    let n = 8u32;
+    let mut px = Vec::with_capacity((n * n * 4) as usize);
+    for y in 0..n {
+        for x in 0..n {
+            let (r, g, bl) = if (x + y) % 2 == 0 { a } else { b };
+            px.extend_from_slice(&[r, g, bl, 255]);
+        }
+    }
+    ImageBrush::new(ImageData {
+        data: Blob::new(Arc::new(px)),
+        format: ImageFormat::Rgba8,
+        alpha_type: ImageAlphaType::Alpha,
+        width: n,
+        height: n,
+    })
+}
+
+fn make_rope(anchor: Point, image: ImageBrush) -> Rope {
+    // Física: partículas desde el ancla (fija) hacia abajo.
+    let mut phys = Physics::new();
+    phys.floor_y = Some(FLOOR_Y);
+    let mut prev = phys.particle(anchor, true);
+    for i in 1..=SEGS {
+        let p = phys.particle(Point::new(anchor.x, anchor.y + i as f64 * SEG_LEN), false);
+        phys.link(prev, p);
+        prev = p;
+    }
+
+    // Esqueleto en bind pose recto desde el ORIGEN (a lo largo de +x); la física
+    // lo reubica/orienta cada frame con pose_chain_from_points.
+    let mut skel = Skeleton::new();
+    let mut bones = vec![skel.add_bone(None, Pose::identity())];
+    for _ in 1..=SEGS {
+        bones.push(skel.add_bone(Some(*bones.last().unwrap()), Pose::translate(Vec2::new(SEG_LEN, 0.0))));
+    }
+    skel.bind();
+
+    // Malla-tira en reposo (recta desde el origen), rigid por columna al hueso i.
+    let mut mesh = Mesh::new();
+    for i in 0..=SEGS {
+        let x = i as f64 * SEG_LEN;
+        let u = i as f64 / SEGS as f64;
+        // La punta se afina (tentáculo).
+        let half = THICK * 0.5 * (1.0 - 0.6 * (i as f64 / SEGS as f64));
+        mesh.vertices.push(Vertex::rigid(Point::new(x, -half), (u, 0.0), bones[i]));
+        mesh.vertices.push(Vertex::rigid(Point::new(x, half), (u, 1.0), bones[i]));
+    }
+    for i in 0..SEGS {
+        let (t0, t1) = ((2 * i) as u32, (2 * (i + 1)) as u32);
+        let (b0, b1) = ((2 * i + 1) as u32, (2 * (i + 1) + 1) as u32);
+        mesh.triangles.push([t0, t1, b1]);
+        mesh.triangles.push([t0, b1, b0]);
+    }
+
+    Rope { phys, skel, mesh, bones, image }
+}
+
+#[derive(Clone)]
+enum Msg {
+    Tick,
+    Cursor(Option<(f64, f64)>),
+}
+
+struct Model {
+    ropes: Vec<Rope>,
+    cursor: Option<Point>,
+}
+
+struct Demo;
+
+const TICK: Duration = Duration::from_millis(16);
+
+impl App for Demo {
+    type Model = Model;
+    type Msg = Msg;
+
+    fn title() -> &'static str {
+        "llimphi · física sobre esqueletos"
+    }
+    fn initial_size() -> (u32, u32) {
+        (700, 440)
+    }
+
+    fn init(handle: &Handle<Self::Msg>) -> Self::Model {
+        let palette = [
+            ((90, 180, 230), (40, 90, 140)),
+            ((235, 130, 100), (150, 60, 50)),
+            ((130, 220, 150), (50, 120, 70)),
+            ((220, 180, 90), (140, 100, 40)),
+            ((200, 130, 220), (110, 60, 140)),
+        ];
+        let ropes = palette
+            .iter()
+            .enumerate()
+            .map(|(i, (a, b))| {
+                let x = 110.0 + i as f64 * 120.0;
+                make_rope(Point::new(x, 40.0), checker(*a, *b))
+            })
+            .collect();
+        handle.spawn_periodic(TICK, || Msg::Tick);
+        Model { ropes, cursor: None }
+    }
+
+    fn update(mut model: Self::Model, msg: Self::Msg, _: &Handle<Self::Msg>) -> Self::Model {
+        match msg {
+            Msg::Tick => {
+                let dt = TICK.as_secs_f64();
+                let cursor = model.cursor;
+                for rope in &mut model.ropes {
+                    rope.phys.step(dt, 8);
+                    if let Some(c) = cursor {
+                        rope.phys.repel(c, 90.0, 28.0);
+                    }
+                    let pts = rope.phys.positions();
+                    pose_chain_from_points(&mut rope.skel, &rope.bones, &pts);
+                }
+            }
+            Msg::Cursor(p) => model.cursor = p.map(|(x, y)| Point::new(x, y)),
+        }
+        model
+    }
+
+    fn view(model: &Self::Model) -> View<Self::Msg> {
+        // Deformar todas las mallas ahora; mover los datos al closure.
+        let painted: Vec<(Mesh, Vec<Point>, ImageBrush)> = model
+            .ropes
+            .iter()
+            .map(|r| (r.mesh.clone(), r.mesh.deform(&r.skel), r.image.clone()))
+            .collect();
+
+        View::new(Style {
+            size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+            ..Default::default()
+        })
+        .fill(Color::from_rgba8(16, 18, 26, 255))
+        .paint_with(move |scene, _ts, rect| {
+            let to_screen = Affine::translate((rect.x as f64, rect.y as f64));
+            // Piso.
+            let floor = PaintRect {
+                x: rect.x,
+                y: rect.y + FLOOR_Y as f32,
+                w: rect.w,
+                h: (rect.h - FLOOR_Y as f32).max(0.0),
+            };
+            let mut fp = llimphi_ui::llimphi_raster::kurbo::BezPath::new();
+            fp.move_to((floor.x as f64, floor.y as f64));
+            fp.line_to((floor.x as f64 + floor.w as f64, floor.y as f64));
+            fp.line_to((floor.x as f64 + floor.w as f64, floor.y as f64 + floor.h as f64));
+            fp.line_to((floor.x as f64, floor.y as f64 + floor.h as f64));
+            fp.close_path();
+            scene.fill(
+                llimphi_ui::llimphi_raster::peniko::Fill::NonZero,
+                Affine::IDENTITY,
+                &llimphi_ui::llimphi_raster::peniko::Brush::Solid(Color::from_rgba8(26, 28, 38, 255)),
+                None,
+                &fp,
+            );
+            for (mesh, positions, image) in &painted {
+                paint_textured(scene, mesh, positions, to_screen, image);
+            }
+        })
+        .on_pointer_move_at(|lx, ly, _w, _h| Some(Msg::Cursor(Some((lx as f64, ly as f64)))))
+        .on_pointer_leave(Msg::Cursor(None))
+    }
+}
+
+fn main() {
+    llimphi_ui::run::<Demo>();
+}
diff --git a/llimphi-mesh/src/lib.rs b/llimphi-mesh/src/lib.rs
new file mode 100644
index 0000000..656224e
--- /dev/null
+++ b/llimphi-mesh/src/lib.rs
@@ -0,0 +1,297 @@
+//! `llimphi-mesh` — render de mallas deformables a una `vello::Scene`.
+//!
+//! La matemática de huesos y skinning vive en [`llimphi_anim::skel`]; este crate
+//! sólo **pinta** la malla ya deformada. Recibe la malla ([`Mesh`]) + las
+//! posiciones deformadas de sus vértices (lo que devuelve [`Mesh::deform`]) y un
+//! `xform` model→pantalla, y ofrece las dos rutas que el spike validó contra
+//! vello 0.7:
+//!
+//! - [`paint_solid`] — rellena cada triángulo deformado con un color (malla
+//!   vectorial / debug). Trivial.
+//! - [`paint_textured`] — malla **texturizada**: por triángulo, recorta al
+//!   triángulo deformado y dibuja la imagen con el afín que mapea sus UV a la
+//!   posición deformada (warp piecewise-affine). Costo = un clip-layer por
+//!   triángulo; cuidado con mallas de miles de triángulos.
+//! - [`paint_wireframe`] — traza los bordes de los triángulos (ver la
+//!   deformación; ideal para demos/debug).
+//!
+//! Helpers de encuadre: [`rest_bounds`] (bbox de la malla en reposo) +
+//! [`fit_transform`] (afín que encaja esos bounds, centrados, en un `PaintRect`).
+
+#![forbid(unsafe_code)]
+
+use llimphi_anim::skel::Mesh;
+use llimphi_ui::llimphi_raster::kurbo::{Affine, BezPath, Point, Rect, Stroke};
+use llimphi_ui::llimphi_raster::peniko::{Brush, Color, Fill, ImageBrush};
+use llimphi_ui::llimphi_raster::vello::Scene;
+use llimphi_ui::PaintRect;
+
+/// Afín que mapea el triángulo `src` al triángulo `dst` (3 correspondencias).
+/// Es la base del warp piecewise-affine de la malla texturizada. Devuelve la
+/// identidad si `src` es degenerado (área nula).
+pub fn affine_from_tri(src: [Point; 3], dst: [Point; 3]) -> Affine {
+    let e1 = (src[1].x - src[0].x, src[1].y - src[0].y);
+    let e2 = (src[2].x - src[0].x, src[2].y - src[0].y);
+    let f1 = (dst[1].x - dst[0].x, dst[1].y - dst[0].y);
+    let f2 = (dst[2].x - dst[0].x, dst[2].y - dst[0].y);
+    let det = e1.0 * e2.1 - e2.0 * e1.1;
+    if det.abs() < 1e-9 {
+        return Affine::IDENTITY;
+    }
+    let inv = 1.0 / det;
+    let l00 = (f1.0 * e2.1 - f2.0 * e1.1) * inv;
+    let l01 = (-f1.0 * e2.0 + f2.0 * e1.0) * inv;
+    let l10 = (f1.1 * e2.1 - f2.1 * e1.1) * inv;
+    let l11 = (-f1.1 * e2.0 + f2.1 * e1.0) * inv;
+    let tx = dst[0].x - (l00 * src[0].x + l01 * src[0].y);
+    let ty = dst[0].y - (l10 * src[0].x + l11 * src[0].y);
+    Affine::new([l00, l10, l01, l11, tx, ty])
+}
+
+/// Bounding box de las posiciones de **reposo** de la malla. Útil para
+/// `fit_transform`. Vacío (`Rect::ZERO`) si la malla no tiene vértices.
+pub fn rest_bounds(mesh: &Mesh) -> Rect {
+    let mut it = mesh.vertices.iter();
+    let Some(first) = it.next() else {
+        return Rect::ZERO;
+    };
+    let (mut x0, mut y0, mut x1, mut y1) = (first.rest.x, first.rest.y, first.rest.x, first.rest.y);
+    for v in it {
+        x0 = x0.min(v.rest.x);
+        y0 = y0.min(v.rest.y);
+        x1 = x1.max(v.rest.x);
+        y1 = y1.max(v.rest.y);
+    }
+    Rect::new(x0, y0, x1, y1)
+}
+
+/// Afín que encaja `bounds` (espacio de la malla) dentro de `rect` (pantalla),
+/// escalando uniforme al mínimo lado y centrando (preserva aspecto).
+pub fn fit_transform(bounds: Rect, rect: PaintRect) -> Affine {
+    let bw = bounds.width();
+    let bh = bounds.height();
+    if bw <= 0.0 || bh <= 0.0 || rect.w <= 0.0 || rect.h <= 0.0 {
+        return Affine::IDENTITY;
+    }
+    let s = (rect.w as f64 / bw).min(rect.h as f64 / bh);
+    let used_w = bw * s;
+    let used_h = bh * s;
+    let tx = rect.x as f64 + (rect.w as f64 - used_w) * 0.5 - bounds.x0 * s;
+    let ty = rect.y as f64 + (rect.h as f64 - used_h) * 0.5 - bounds.y0 * s;
+    Affine::translate((tx, ty)) * Affine::scale(s)
+}
+
+/// Posiciones deformadas (model space) → pantalla, en un buffer reusable.
+fn to_screen(positions: &[Point], xform: Affine, out: &mut Vec<Point>) {
+    out.clear();
+    out.extend(positions.iter().map(|p| xform * *p));
+}
+
+fn tri_path(a: Point, b: Point, c: Point) -> BezPath {
+    let mut p = BezPath::new();
+    p.move_to(a);
+    p.line_to(b);
+    p.line_to(c);
+    p.close_path();
+    p
+}
+
+/// Rellena cada triángulo deformado con un color sólido. `positions` son las
+/// posiciones deformadas (de `Mesh::deform`), `xform` las lleva a pantalla.
+pub fn paint_solid(
+    scene: &mut Scene,
+    mesh: &Mesh,
+    positions: &[Point],
+    xform: Affine,
+    color: Color,
+) {
+    let mut screen = Vec::new();
+    to_screen(positions, xform, &mut screen);
+    let brush = Brush::Solid(color);
+    for t in &mesh.triangles {
+        let (Some(&a), Some(&b), Some(&c)) = (
+            screen.get(t[0] as usize),
+            screen.get(t[1] as usize),
+            screen.get(t[2] as usize),
+        ) else {
+            continue;
+        };
+        scene.fill(Fill::NonZero, Affine::IDENTITY, &brush, None, &tri_path(a, b, c));
+    }
+}
+
+/// Malla texturizada: por triángulo, recorta al triángulo deformado y dibuja la
+/// imagen con el afín que mapea las UV (espacio de imagen) a la posición
+/// deformada en pantalla — warp piecewise-affine. `image` es la textura; las UV
+/// de cada vértice (`0..1`) indexan en ella.
+pub fn paint_textured(
+    scene: &mut Scene,
+    mesh: &Mesh,
+    positions: &[Point],
+    xform: Affine,
+    image: &ImageBrush,
+) {
+    let mut screen = Vec::new();
+    to_screen(positions, xform, &mut screen);
+    let iw = image.image.width as f64;
+    let ih = image.image.height as f64;
+    for t in &mesh.triangles {
+        let idx = [t[0] as usize, t[1] as usize, t[2] as usize];
+        let (Some(&da), Some(&db), Some(&dc)) =
+            (screen.get(idx[0]), screen.get(idx[1]), screen.get(idx[2]))
+        else {
+            continue;
+        };
+        // src = UV·tamaño-de-imagen (espacio de imagen); dst = pantalla deformada.
+        let uv = |i: usize| {
+            let v = &mesh.vertices[idx[i]];
+            Point::new(v.uv.0 * iw, v.uv.1 * ih)
+        };
+        let aff = affine_from_tri([uv(0), uv(1), uv(2)], [da, db, dc]);
+        scene.push_clip_layer(Fill::NonZero, Affine::IDENTITY, &tri_path(da, db, dc));
+        scene.draw_image(image.as_ref(), aff);
+        scene.pop_layer();
+    }
+}
+
+/// Traza los bordes de los triángulos (para ver la deformación / debug).
+pub fn paint_wireframe(
+    scene: &mut Scene,
+    mesh: &Mesh,
+    positions: &[Point],
+    xform: Affine,
+    color: Color,
+    width: f64,
+) {
+    let mut screen = Vec::new();
+    to_screen(positions, xform, &mut screen);
+    let brush = Brush::Solid(color);
+    let stroke = Stroke::new(width);
+    for t in &mesh.triangles {
+        let (Some(&a), Some(&b), Some(&c)) = (
+            screen.get(t[0] as usize),
+            screen.get(t[1] as usize),
+            screen.get(t[2] as usize),
+        ) else {
+            continue;
+        };
+        scene.stroke(&stroke, Affine::IDENTITY, &brush, None, &tri_path(a, b, c));
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use llimphi_anim::skel::{Mesh, Pose, Skeleton, Vertex};
+    use llimphi_ui::llimphi_raster::peniko::{Blob, ImageAlphaType, ImageData, ImageFormat};
+    use std::sync::Arc;
+
+    /// Una malla quad (2 triángulos) atada a un hueso, con UVs de esquina.
+    fn quad_mesh(bone: usize) -> Mesh {
+        let mut m = Mesh::new();
+        m.vertices = vec![
+            Vertex::rigid(Point::new(0.0, 0.0), (0.0, 0.0), bone),
+            Vertex::rigid(Point::new(100.0, 0.0), (1.0, 0.0), bone),
+            Vertex::rigid(Point::new(100.0, 100.0), (1.0, 1.0), bone),
+            Vertex::rigid(Point::new(0.0, 100.0), (0.0, 1.0), bone),
+        ];
+        m.triangles = vec![[0, 1, 2], [0, 2, 3]];
+        m
+    }
+
+    fn skel_one_bone() -> (Skeleton, usize) {
+        let mut s = Skeleton::new();
+        let b = s.add_bone(None, Pose::identity());
+        s.bind();
+        s.update();
+        (s, b)
+    }
+
+    fn img_2x2() -> ImageBrush {
+        let px: Vec<u8> = vec![
+            200, 60, 60, 255, 60, 200, 60, 255, 60, 60, 200, 255, 220, 200, 60, 255,
+        ];
+        ImageBrush::new(ImageData {
+            data: Blob::new(Arc::new(px)),
+            format: ImageFormat::Rgba8,
+            alpha_type: ImageAlphaType::Alpha,
+            width: 2,
+            height: 2,
+        })
+    }
+
+    const RECT: PaintRect = PaintRect {
+        x: 0.0,
+        y: 0.0,
+        w: 200.0,
+        h: 200.0,
+    };
+
+    #[test]
+    fn fit_transform_centra_y_escala() {
+        let m = quad_mesh(0);
+        let xf = fit_transform(rest_bounds(&m), RECT);
+        // El quad 100×100 en un rect 200×200 escala ×2 y centra (sin offset, ya
+        // que llena el lado). Esquina (0,0) → (0,0), (100,100) → (200,200).
+        let p0 = xf * Point::new(0.0, 0.0);
+        let p1 = xf * Point::new(100.0, 100.0);
+        assert!((p0.x).abs() < 1e-9 && (p0.y).abs() < 1e-9, "{p0:?}");
+        assert!((p1.x - 200.0).abs() < 1e-9 && (p1.y - 200.0).abs() < 1e-9, "{p1:?}");
+    }
+
+    #[test]
+    fn paint_solid_emite_geometria() {
+        let (s, b) = skel_one_bone();
+        let m = quad_mesh(b);
+        let pos = m.deform(&s);
+        let xf = fit_transform(rest_bounds(&m), RECT);
+        let mut sc = Scene::new();
+        paint_solid(&mut sc, &m, &pos, xf, Color::from_rgba8(200, 100, 50, 255));
+        assert!(!sc.encoding().is_empty());
+    }
+
+    #[test]
+    fn paint_textured_emite_geometria() {
+        let (s, b) = skel_one_bone();
+        let m = quad_mesh(b);
+        let pos = m.deform(&s);
+        let xf = fit_transform(rest_bounds(&m), RECT);
+        let img = img_2x2();
+        let mut sc = Scene::new();
+        paint_textured(&mut sc, &m, &pos, xf, &img);
+        assert!(!sc.encoding().is_empty(), "la malla texturizada debe emitir geometría");
+    }
+
+    #[test]
+    fn paint_wireframe_emite_geometria() {
+        let (s, b) = skel_one_bone();
+        let m = quad_mesh(b);
+        let pos = m.deform(&s);
+        let xf = fit_transform(rest_bounds(&m), RECT);
+        let mut sc = Scene::new();
+        paint_wireframe(&mut sc, &m, &pos, xf, Color::from_rgba8(255, 255, 255, 255), 1.5);
+        assert!(!sc.encoding().is_empty());
+    }
+
+    /// Deformar un hueso mueve la geometría pintada: las posiciones deformadas
+    /// cambian respecto al reposo (certifica que el render usa la deformación).
+    #[test]
+    fn deformar_cambia_las_posiciones() {
+        let mut s = Skeleton::new();
+        let b = s.add_bone(None, Pose::identity());
+        s.bind();
+        s.update();
+        let m = quad_mesh(b);
+        let reposo = m.deform(&s);
+
+        s.set_pose(b, Pose::rotate(0.5));
+        s.update();
+        let deformado = m.deform(&s);
+
+        let movido = reposo
+            .iter()
+            .zip(&deformado)
+            .any(|(a, d)| (a.x - d.x).abs() > 1e-6 || (a.y - d.y).abs() > 1e-6);
+        assert!(movido, "rotar el hueso debe mover los vértices");
+    }
+}
diff --git a/llimphi-motion/Cargo.toml b/llimphi-motion/Cargo.toml
index 3483cba..a580f72 100644
--- a/llimphi-motion/Cargo.toml
+++ b/llimphi-motion/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-motion — Tween<T> + helpers de animación integrados al bucle Elm de llimphi-ui (Handle::spawn_periodic). Lerp para f32, Color, (f32,f32). Easings comparten convenciones de llimphi-theme::motion."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/llimphi-motion/LEEME.md b/llimphi-motion/LEEME.md
new file mode 100644
index 0000000..14c9e23
--- /dev/null
+++ b/llimphi-motion/LEEME.md
@@ -0,0 +1,49 @@
+# llimphi-motion
+
+*Read this in English: [README.md](README.md).*
+
+Animaciones simples sobre el bucle Elm de Llimphi.
+
+Llimphi es Elm puro: `update(msg) -> model`. Para animar un valor en
+el tiempo (un alpha que sube de 0 a 1, una posición que se desliza)
+la app guarda un `Tween` en su modelo y pide al `Handle` que le
+dispatchee un `Msg::Tick` periódicamente (cada ~16 ms) hasta que la
+animación termine. Cada `update` lee `tween.value()` y la `view` la
+pinta.
+
+Esta crate es deliberadamente chiquita:
+- `Lerp` — interpolación lineal genérica (impls para `f32`,
+  `(f32, f32)` y `Color`).
+- `Tween` — interpolación temporizada con easing entre dos valores.
+- `animate` — helper que arranca un loop de ticks autosuficiente
+  sobre un `Handle`.
+
+Las duraciones y easings canónicos viven en `llimphi_theme::motion`.
+
+## Patrón típico
+```ignore
+use llimphi_motion::{Tween, animate};
+use llimphi_theme::motion;
+
+enum Msg { ToastShow, Tick, ToastHidden }
+struct Model { toast_alpha: Tween<f32> }
+
+// update:
+Msg::ToastShow => {
+    model.toast_alpha = Tween::new(0.0, 1.0, motion::NORMAL, motion::ease_out_cubic);
+    animate(handle, motion::NORMAL, || Msg::Tick);
+    model
+}
+Msg::Tick => {
+    // El loop interno terminará solo cuando el tween esté done;
+    // la `view` ya lee el alpha actual sin más.
+    model
+}
+
+// view:
+toast_view().alpha(model.toast_alpha.value())
+```
+
+---
+
+Parte de **llimphi** — ver [llimphi](../LEEME.md).
diff --git a/llimphi-motion/README.md b/llimphi-motion/README.md
new file mode 100644
index 0000000..2d69eea
--- /dev/null
+++ b/llimphi-motion/README.md
@@ -0,0 +1,47 @@
+# llimphi-motion
+
+Simple animation over Llimphi's Elm loop.
+
+Llimphi is pure Elm: `update(msg) -> model`. To animate a value over time (an
+alpha rising from 0 to 1, a position sliding) the app keeps a `Tween` in its
+model and asks the `Handle` to dispatch a `Msg::Tick` periodically (every ~16 ms)
+until the animation ends. Each `update` reads `tween.value()` and the `view`
+paints it.
+
+This crate is deliberately tiny:
+
+- `Lerp` — generic linear interpolation (impls for `f32`, `(f32, f32)` and
+  `Color`).
+- `Tween` — timed interpolation with easing between two values.
+- `animate` — a helper that starts a self-sufficient tick loop over a `Handle`.
+
+The canonical durations and easings live in `llimphi_theme::motion`.
+
+## Typical pattern
+
+```ignore
+use llimphi_motion::{Tween, animate};
+use llimphi_theme::motion;
+
+enum Msg { ToastShow, Tick, ToastHidden }
+struct Model { toast_alpha: Tween<f32> }
+
+// update:
+Msg::ToastShow => {
+    model.toast_alpha = Tween::new(0.0, 1.0, motion::NORMAL, motion::ease_out_cubic);
+    animate(handle, motion::NORMAL, || Msg::Tick);
+    model
+}
+Msg::Tick => {
+    // The internal loop ends by itself once the tween is done;
+    // the `view` already reads the current alpha.
+    model
+}
+
+// view:
+toast_view().alpha(model.toast_alpha.value())
+```
+
+---
+
+Part of **llimphi** — see [llimphi](../README.md).
diff --git a/llimphi-raster/Cargo.toml b/llimphi-raster/Cargo.toml
index cd5450e..b42e907 100644
--- a/llimphi-raster/Cargo.toml
+++ b/llimphi-raster/Cargo.toml
@@ -1,13 +1,13 @@
 [package]
 name = "llimphi-raster"
-description = "2D GPU rasterizer for llimphi over vello, with an opt-in CPU+GPU hybrid renderer."
 version.workspace = true
 edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 
+description = "2D GPU rasterizer for llimphi over vello, with an opt-in CPU+GPU hybrid renderer."
+repository.workspace = true
 [dependencies]
 llimphi-hal = { path = "../llimphi-hal", version = "0.1.0" }
 vello = { workspace = true }
diff --git a/llimphi-raster/src/gpu.rs b/llimphi-raster/src/gpu.rs
index bad0b8c..837caf7 100644
--- a/llimphi-raster/src/gpu.rs
+++ b/llimphi-raster/src/gpu.rs
@@ -7,10 +7,13 @@
 //!
 //! Diseño minimal Fase 2/3:
 //!
-//! - Vertex format triángulos: `[x: f32, y: f32, rgba: u32]` (12 B/vert).
-//! - Instance format líneas: `[x0, y0, x1, y1, rgba]` (20 B/seg).
-//! - Instance format rects:  `[x, y, w, h, rgba]` (20 B/rect).
-//! - Instance format discos: `[cx, cy, r, stroke, rgba]` (20 B/disco).
+//! - Vertex format triángulos: `[x, y: f32, color: 4×f32]` (24 B/vert).
+//! - Instance format líneas: `[x0, y0, x1, y1, color: 4×f32]` (32 B/seg).
+//! - Instance format rects:  `[x, y, w, h, color: 4×f32]` (32 B/rect).
+//! - Instance format discos: `[cx, cy, r, stroke, color: 4×f32]` (32 B/disco).
+//! - El color va como **4×f32** (no u32 empaquetado): preserva precisión HDR
+//!   (>1.0) y sub-8-bit cuando el target es `Rgba16Float`/`Rgb10a2`; en target
+//!   8-bit el resultado visible es idéntico al pack anterior.
 //! - Sin texturas. Rects/líneas/tris obtienen AA de **bordes** vía MSAA 4×
 //!   (ver más abajo); los discos SÍ traen AA por SDF en el fragment
 //!   (smoothstep sobre `fwidth`), que MSAA respeta. Así rects/tris/líneas
@@ -66,10 +69,10 @@ const MSAA_SAMPLES: u32 = 4;
 /// particles iniciales, viewport estático) y emitir draw calls
 /// manualmente reusando estas pipelines.
 ///
-/// Layouts:
-/// - Vertex buffer triángulos: `[x: f32, y: f32, rgba: u32]` (12 B/vert).
-/// - Instance buffer rects:    `[x, y, w, h, rgba]`           (20 B/inst).
-/// - Instance buffer líneas:   `[x0, y0, x1, y1, rgba]`       (20 B/inst).
+/// Layouts (color = 4×f32, HDR-capable):
+/// - Vertex buffer triángulos: `[x, y, color:4×f32]`          (24 B/vert).
+/// - Instance buffer rects:    `[x, y, w, h, color:4×f32]`    (32 B/inst).
+/// - Instance buffer líneas:   `[x0, y0, x1, y1, color:4×f32]`(32 B/inst).
 /// - Bind group 0 binding 0: uniform `{viewport: vec2<f32>, line_width: f32, _pad: f32}` (16 B).
 pub struct GpuPipelines {
     pub lines: wgpu::RenderPipeline,
@@ -137,7 +140,7 @@ impl GpuPipelines {
                 entry_point: Some("vs_tris"),
                 compilation_options: Default::default(),
                 buffers: &[wgpu::VertexBufferLayout {
-                    array_stride: 12,
+                    array_stride: 24,
                     step_mode: wgpu::VertexStepMode::Vertex,
                     attributes: &[
                         wgpu::VertexAttribute {
@@ -146,7 +149,7 @@ impl GpuPipelines {
                             shader_location: 0,
                         },
                         wgpu::VertexAttribute {
-                            format: wgpu::VertexFormat::Uint32,
+                            format: wgpu::VertexFormat::Float32x4,
                             offset: 8,
                             shader_location: 1,
                         },
@@ -178,7 +181,7 @@ impl GpuPipelines {
                 entry_point: Some("vs_rects"),
                 compilation_options: Default::default(),
                 buffers: &[wgpu::VertexBufferLayout {
-                    array_stride: 20,
+                    array_stride: 32,
                     step_mode: wgpu::VertexStepMode::Instance,
                     attributes: &[
                         wgpu::VertexAttribute {
@@ -192,7 +195,7 @@ impl GpuPipelines {
                             shader_location: 1,
                         },
                         wgpu::VertexAttribute {
-                            format: wgpu::VertexFormat::Uint32,
+                            format: wgpu::VertexFormat::Float32x4,
                             offset: 16,
                             shader_location: 2,
                         },
@@ -226,7 +229,7 @@ impl GpuPipelines {
                 entry_point: Some("vs_lines"),
                 compilation_options: Default::default(),
                 buffers: &[wgpu::VertexBufferLayout {
-                    array_stride: 20,
+                    array_stride: 32,
                     step_mode: wgpu::VertexStepMode::Instance,
                     attributes: &[
                         wgpu::VertexAttribute {
@@ -235,7 +238,7 @@ impl GpuPipelines {
                             shader_location: 0,
                         },
                         wgpu::VertexAttribute {
-                            format: wgpu::VertexFormat::Uint32,
+                            format: wgpu::VertexFormat::Float32x4,
                             offset: 16,
                             shader_location: 1,
                         },
@@ -272,7 +275,7 @@ impl GpuPipelines {
                 entry_point: Some("vs_discs"),
                 compilation_options: Default::default(),
                 buffers: &[wgpu::VertexBufferLayout {
-                    array_stride: 20,
+                    array_stride: 32,
                     step_mode: wgpu::VertexStepMode::Instance,
                     attributes: &[
                         // cx, cy
@@ -287,9 +290,9 @@ impl GpuPipelines {
                             offset: 8,
                             shader_location: 1,
                         },
-                        // rgba
+                        // rgba (4×f32, HDR-capable)
                         wgpu::VertexAttribute {
-                            format: wgpu::VertexFormat::Uint32,
+                            format: wgpu::VertexFormat::Float32x4,
                             offset: 16,
                             shader_location: 2,
                         },
@@ -422,6 +425,11 @@ pub struct GpuBatch<'a> {
     tri_vert_count: u32,
     rect_count: u32,
     disc_count: u32,
+    /// Rect de recorte (x, y, w, h) en px del target. `None` = pinta todo el
+    /// viewport (comportamiento histórico). Cuando está seteado, ambas pasadas
+    /// (primitivos y composite) se restringen a ese rect → sólo se tocan los
+    /// píxeles sucios: es el habilitador de **damage / partial-present**.
+    scissor: Option<(u32, u32, u32, u32)>,
 }
 
 impl<'a> GpuBatch<'a> {
@@ -437,9 +445,21 @@ impl<'a> GpuBatch<'a> {
             tri_vert_count: 0,
             rect_count: 0,
             disc_count: 0,
+            scissor: None,
         }
     }
 
+    /// Restringe el `flush` a un rect (x, y, w, h) en px del target: sólo se
+    /// rasterizan y componen los píxeles dentro del rect, el resto del `view`
+    /// queda intacto. Es el primitivo de **damage / partial-present**: cuando
+    /// sólo cambió una región chica (un cursor, un spinner, un nodo animado), el
+    /// caller setea el rect sucio y evita re-pintar la pantalla entera. El rect
+    /// se clampea al viewport en `flush` (un rect fuera de rango no revienta).
+    /// Sin llamar a esto, `flush` pinta todo el viewport (histórico).
+    pub fn scissor(&mut self, x: u32, y: u32, w: u32, h: u32) {
+        self.scissor = Some((x, y, w, h));
+    }
+
     /// Grosor de las próximas líneas (en pixels del frame, sin AA).
     /// Se aplica a todas las líneas del batch — el lado bueno de una
     /// sola draw call es que sólo hay un grosor "vivo" por flush.
@@ -449,12 +469,11 @@ impl<'a> GpuBatch<'a> {
 
     /// Añade un segmento de línea como instancia.
     pub fn add_line(&mut self, p0: (f32, f32), p1: (f32, f32), color: Color) {
-        let rgba = pack_rgba(color);
         self.line_verts.extend_from_slice(&p0.0.to_ne_bytes());
         self.line_verts.extend_from_slice(&p0.1.to_ne_bytes());
         self.line_verts.extend_from_slice(&p1.0.to_ne_bytes());
         self.line_verts.extend_from_slice(&p1.1.to_ne_bytes());
-        self.line_verts.extend_from_slice(&rgba.to_ne_bytes());
+        push_color(&mut self.line_verts, color);
         self.line_count += 1;
     }
 
@@ -485,10 +504,9 @@ impl<'a> GpuBatch<'a> {
     }
 
     fn push_tri_vert(&mut self, p: (f32, f32), color: Color) {
-        let rgba = pack_rgba(color);
         self.tri_verts.extend_from_slice(&p.0.to_ne_bytes());
         self.tri_verts.extend_from_slice(&p.1.to_ne_bytes());
-        self.tri_verts.extend_from_slice(&rgba.to_ne_bytes());
+        push_color(&mut self.tri_verts, color);
         self.tri_vert_count += 1;
     }
 
@@ -504,12 +522,11 @@ impl<'a> GpuBatch<'a> {
     /// Añade un rectángulo lleno como instancia (sin radio — para
     /// rounded rects sigue por vello).
     pub fn add_rect(&mut self, x: f32, y: f32, w: f32, h: f32, color: Color) {
-        let rgba = pack_rgba(color);
         self.rect_insts.extend_from_slice(&x.to_ne_bytes());
         self.rect_insts.extend_from_slice(&y.to_ne_bytes());
         self.rect_insts.extend_from_slice(&w.to_ne_bytes());
         self.rect_insts.extend_from_slice(&h.to_ne_bytes());
-        self.rect_insts.extend_from_slice(&rgba.to_ne_bytes());
+        push_color(&mut self.rect_insts, color);
         self.rect_count += 1;
     }
 
@@ -532,12 +549,11 @@ impl<'a> GpuBatch<'a> {
     }
 
     fn push_disc(&mut self, cx: f32, cy: f32, r: f32, stroke: f32, color: Color) {
-        let rgba = pack_rgba(color);
         self.disc_insts.extend_from_slice(&cx.to_ne_bytes());
         self.disc_insts.extend_from_slice(&cy.to_ne_bytes());
         self.disc_insts.extend_from_slice(&r.to_ne_bytes());
         self.disc_insts.extend_from_slice(&stroke.to_ne_bytes());
-        self.disc_insts.extend_from_slice(&rgba.to_ne_bytes());
+        push_color(&mut self.disc_insts, color);
         self.disc_count += 1;
     }
 
@@ -638,9 +654,24 @@ impl<'a> GpuBatch<'a> {
         // Texturas por-flush dimensionadas al viewport (mismo patrón que
         // los buffers de arriba; el resize "sale gratis"). `tex_w/h` se
         // clampean a ≥1 para evitar Extent3d de 0 (un viewport degenerado
-        // no debería llegar acá, pero defensivo).
+        // no debería llegar aquí, pero defensivo).
         let tex_w = (viewport.0.round() as u32).max(1);
         let tex_h = (viewport.1.round() as u32).max(1);
+        // Rect de damage clampeado al viewport. Si se pidió scissor pero clampea
+        // a área 0 (región sucia fuera de rango), no hay nada que pintar → salir.
+        let scissor_px: Option<(u32, u32, u32, u32)> = match self.scissor {
+            None => None,
+            Some((x, y, w, h)) => {
+                let x = x.min(tex_w);
+                let y = y.min(tex_h);
+                let w = w.min(tex_w.saturating_sub(x));
+                let h = h.min(tex_h.saturating_sub(y));
+                if w == 0 || h == 0 {
+                    return;
+                }
+                Some((x, y, w, h))
+            }
+        };
         let extent = wgpu::Extent3d {
             width: tex_w,
             height: tex_h,
@@ -696,6 +727,9 @@ impl<'a> GpuBatch<'a> {
                 occlusion_query_set: None,
             });
             pass.set_bind_group(0, &bind_group, &[]);
+            if let Some((x, y, w, h)) = scissor_px {
+                pass.set_scissor_rect(x, y, w, h);
+            }
 
             // Orden de draws: rects (fondo) → discos → tris → lines (encima).
             // Match de la convención usual "fill abajo, stroke arriba".
@@ -763,16 +797,25 @@ impl<'a> GpuBatch<'a> {
         });
         cpass.set_pipeline(&self.pipelines.composite);
         cpass.set_bind_group(0, &composite_bg, &[]);
+        if let Some((x, y, w, h)) = scissor_px {
+            cpass.set_scissor_rect(x, y, w, h);
+        }
         cpass.draw(0..3, 0..1);
     }
 }
 
-/// Empaqueta un `peniko::Color` a u32 little-endian RGBA8.
-/// El shader lo lee como `inst.rgba` y separa bytes — debe coincidir
-/// con la convención del WGSL (`r = rgba & 0xFF`, etc.).
-fn pack_rgba(c: Color) -> u32 {
-    let [r, g, b, a] = c.to_rgba8().to_u8_array();
-    (r as u32) | ((g as u32) << 8) | ((b as u32) << 16) | ((a as u32) << 24)
+/// Empuja un `peniko::Color` como 4×`f32` (RGBA lineal-del-color, 16 B) al
+/// buffer de vértices/instancias. Se lee `Color::components` **directo** — a
+/// diferencia de `to_rgba8()`, NO cuantiza a 8-bit ni clampea a [0,1], así que
+/// un color HDR (componente >1.0) o un paso fino entre dos niveles 8-bit
+/// sobrevive hasta el target. Cuando el target es 8-bit (`Rgba8Unorm`, el caso
+/// normal) el resultado visible es idéntico al del pack u32 anterior; la
+/// precisión extra sólo aparece con un target `Rgba16Float`/`Rgb10a2`. El WGSL
+/// lo recibe como `vec4<f32>` directo (sin `unpack_rgba`).
+fn push_color(buf: &mut Vec<u8>, c: Color) {
+    for comp in c.components {
+        buf.extend_from_slice(&comp.to_ne_bytes());
+    }
 }
 
 const WGSL: &str = r#"
@@ -789,36 +832,28 @@ struct V2F {
     @location(0) color: vec4<f32>,
 };
 
-fn unpack_rgba(c: u32) -> vec4<f32> {
-    let r = f32( c        & 0xFFu) / 255.0;
-    let g = f32((c >>  8u) & 0xFFu) / 255.0;
-    let b = f32((c >> 16u) & 0xFFu) / 255.0;
-    let a = f32((c >> 24u) & 0xFFu) / 255.0;
-    return vec4<f32>(r, g, b, a);
-}
-
 fn px_to_ndc(p: vec2<f32>) -> vec2<f32> {
     return vec2<f32>(p.x / u.viewport.x * 2.0 - 1.0, 1.0 - p.y / u.viewport.y * 2.0);
 }
 
-// -------- triángulos: 1 vértice = (xy, rgba) --------
+// -------- triángulos: 1 vértice = (xy, color) --------
 
 @vertex
-fn vs_tris(@location(0) xy: vec2<f32>, @location(1) rgba: u32) -> V2F {
+fn vs_tris(@location(0) xy: vec2<f32>, @location(1) color: vec4<f32>) -> V2F {
     var out: V2F;
     out.pos = vec4<f32>(px_to_ndc(xy), 0.0, 1.0);
-    out.color = unpack_rgba(rgba);
+    out.color = color;
     return out;
 }
 
-// -------- rects: 1 instancia = (xy, wh, rgba), 6 vértices/quad --------
+// -------- rects: 1 instancia = (xy, wh, color), 6 vértices/quad --------
 
 @vertex
 fn vs_rects(
     @builtin(vertex_index) vid: u32,
     @location(0) inst_xy: vec2<f32>,
     @location(1) inst_wh: vec2<f32>,
-    @location(2) inst_rgba: u32,
+    @location(2) color: vec4<f32>,
 ) -> V2F {
     var corners = array<vec2<f32>, 6>(
         vec2<f32>(0.0, 0.0),
@@ -832,17 +867,17 @@ fn vs_rects(
     let px = inst_xy + local * inst_wh;
     var out: V2F;
     out.pos = vec4<f32>(px_to_ndc(px), 0.0, 1.0);
-    out.color = unpack_rgba(inst_rgba);
+    out.color = color;
     return out;
 }
 
-// -------- líneas: 1 instancia = (p0xy, p1xy, rgba), expandida a quad ----
+// -------- líneas: 1 instancia = (p0xy, p1xy, color), expandida a quad ----
 
 @vertex
 fn vs_lines(
     @builtin(vertex_index) vid: u32,
     @location(0) seg: vec4<f32>,
-    @location(1) rgba: u32,
+    @location(1) color: vec4<f32>,
 ) -> V2F {
     // Quad perpendicular al segmento, grosor uniforme `u.line_width` px.
     // vid 0..5 mapea a los 6 vértices del quad (2 tris).
@@ -865,7 +900,7 @@ fn vs_lines(
     let px = along + across;
     var out: V2F;
     out.pos = vec4<f32>(px_to_ndc(px), 0.0, 1.0);
-    out.color = unpack_rgba(rgba);
+    out.color = color;
     return out;
 }
 
@@ -888,7 +923,7 @@ fn vs_discs(
     @builtin(vertex_index) vid: u32,
     @location(0) inst_c: vec2<f32>,
     @location(1) inst_rs: vec2<f32>,
-    @location(2) inst_rgba: u32,
+    @location(2) color: vec4<f32>,
 ) -> DiscV2F {
     var corners = array<vec2<f32>, 6>(
         vec2<f32>(-1.0, -1.0),
@@ -904,7 +939,7 @@ fn vs_discs(
     let px = inst_c + local;
     var out: DiscV2F;
     out.pos = vec4<f32>(px_to_ndc(px), 0.0, 1.0);
-    out.color = unpack_rgba(inst_rgba);
+    out.color = color;
     out.local = local;
     out.params = inst_rs;
     return out;
diff --git a/llimphi-raster/tests/gpu_hdr_precision.rs b/llimphi-raster/tests/gpu_hdr_precision.rs
new file mode 100644
index 0000000..046c4b8
--- /dev/null
+++ b/llimphi-raster/tests/gpu_hdr_precision.rs
@@ -0,0 +1,170 @@
+//! Prueba de que el backend GPU-directo carga **precisión de color que vello no
+//! puede** (vello 0.7 exige target `Rgba8Unorm`; sólo emite 8-bit). Con el color
+//! del vértice ensanchado a 4×f32 y un target `Rgba16Float`, el path directo
+//! preserva:
+//!
+//!  1. valores HDR (componente >1.0) que 8-bit **clampea** a 1.0, y
+//!  2. pasos de color **más finos que un nivel 8-bit** que 8-bit **cuantiza** al
+//!     mismo byte.
+//!
+//! Es la certificación headless (§8, por texto: `assert` numérico sobre el
+//! readback) del deliverable "GPU-directo desbloquea HDR" de PLAN-MOTOR-PROFUNDO.
+//! Corre en llvmpipe. El look HDR en pantalla sigue siendo [METAL].
+
+use llimphi_hal::{wgpu, Hal};
+use llimphi_raster::gpu::{GpuBatch, GpuPipelines};
+use llimphi_raster::peniko::Color;
+
+const N: u32 = 8; // target chico; el rect cubre todo
+
+/// Decodifica un half-float (f16, IEEE 754 binary16) a f32.
+fn f16_to_f32(h: u16) -> f32 {
+    let sign = if (h >> 15) & 1 == 1 { -1.0 } else { 1.0 };
+    let exp = (h >> 10) & 0x1f;
+    let frac = h & 0x3ff;
+    if exp == 0 {
+        sign * (frac as f32) * 2f32.powi(-24) // subnormal
+    } else if exp == 0x1f {
+        if frac == 0 { sign * f32::INFINITY } else { f32::NAN }
+    } else {
+        sign * (1.0 + frac as f32 / 1024.0) * 2f32.powi(exp as i32 - 15)
+    }
+}
+
+/// Rasteriza un rect que cubre todo el target de formato `fmt` con `color` y
+/// devuelve los bytes crudos del pixel central (fila con padding quitado).
+fn solid_center_bytes(
+    hal: &Hal,
+    fmt: wgpu::TextureFormat,
+    bytes_per_pixel: usize,
+    color: Color,
+) -> Vec<u8> {
+    let pipelines = GpuPipelines::new(&hal.device, fmt);
+    let target = hal.device.create_texture(&wgpu::TextureDescriptor {
+        label: Some("hdr-target"),
+        size: wgpu::Extent3d { width: N, height: N, depth_or_array_layers: 1 },
+        mip_level_count: 1,
+        sample_count: 1,
+        dimension: wgpu::TextureDimension::D2,
+        format: fmt,
+        usage: wgpu::TextureUsages::RENDER_ATTACHMENT | wgpu::TextureUsages::COPY_SRC,
+        view_formats: &[],
+    });
+    let view = target.create_view(&wgpu::TextureViewDescriptor::default());
+
+    let mut batch = GpuBatch::new(&pipelines);
+    batch.add_rect(0.0, 0.0, N as f32, N as f32, color);
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    batch.flush(
+        &hal.device,
+        &hal.queue,
+        &mut enc,
+        &view,
+        (N as f32, N as f32),
+        // Clear a negro OPACO: en el pixel cubierto el composite (premult
+        // over) deja el color del rect intacto; en los no cubiertos, negro.
+        wgpu::LoadOp::Clear(wgpu::Color { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }),
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+
+    // Readback con padding de fila.
+    let unpadded = N as usize * bytes_per_pixel;
+    let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize;
+    let padded = unpadded.div_ceil(align) * align;
+    let buf = hal.device.create_buffer(&wgpu::BufferDescriptor {
+        label: Some("hdr-readback"),
+        size: (padded * N as usize) as u64,
+        usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
+        mapped_at_creation: false,
+    });
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    enc.copy_texture_to_buffer(
+        wgpu::TexelCopyTextureInfo {
+            texture: &target,
+            mip_level: 0,
+            origin: wgpu::Origin3d::ZERO,
+            aspect: wgpu::TextureAspect::All,
+        },
+        wgpu::TexelCopyBufferInfo {
+            buffer: &buf,
+            layout: wgpu::TexelCopyBufferLayout {
+                offset: 0,
+                bytes_per_row: Some(padded as u32),
+                rows_per_image: Some(N),
+            },
+        },
+        wgpu::Extent3d { width: N, height: N, depth_or_array_layers: 1 },
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let slice = buf.slice(..);
+    let (tx, rx) = std::sync::mpsc::channel();
+    slice.map_async(wgpu::MapMode::Read, move |r| {
+        let _ = tx.send(r);
+    });
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    rx.recv().unwrap().unwrap();
+    let data = slice.get_mapped_range();
+    // Pixel central (4,4).
+    let row = 4usize;
+    let col = 4usize;
+    let start = row * padded + col * bytes_per_pixel;
+    let px = data[start..start + bytes_per_pixel].to_vec();
+    drop(data);
+    buf.unmap();
+    px
+}
+
+/// Lee el canal R de un pixel `Rgba16Float` (2 B/canal).
+fn r_channel_f16(px: &[u8]) -> f32 {
+    f16_to_f32(u16::from_le_bytes([px[0], px[1]]))
+}
+
+#[test]
+fn valor_hdr_mayor_que_uno_sobrevive_en_float_target() {
+    let hal = pollster::block_on(Hal::new_headless(true)).expect("hal");
+    // R = 4.0 (HDR). En Rgba8Unorm esto clampea a 1.0; en float debe sobrevivir.
+    let color = Color::new([4.0, 0.0, 0.0, 1.0]);
+    let px = solid_center_bytes(&hal, wgpu::TextureFormat::Rgba16Float, 8, color);
+    let r = r_channel_f16(&px);
+    assert!(
+        r > 3.9,
+        "el valor HDR 4.0 no sobrevivió al target float: R leído = {r} \
+         (si fuera 8-bit estaría clampeado a 1.0)"
+    );
+}
+
+#[test]
+fn paso_sub_8bit_se_pierde_en_8bit_pero_sobrevive_en_float() {
+    let hal = pollster::block_on(Hal::new_headless(true)).expect("hal");
+    // Dos valores dentro del MISMO nivel de 8-bit: base 100 (lejos de cualquier
+    // borde .5 de redondeo) + 0.4/255. Ambos redondean a 100 en 8-bit, pero
+    // distan ~0.0016 en lineal → f16 (paso ~0.0005 cerca de 0.4) los distingue.
+    let v1 = 100.0 / 255.0;
+    let v2 = v1 + 0.4 / 255.0;
+    let c1 = Color::new([v1, 0.0, 0.0, 1.0]);
+    let c2 = Color::new([v2, 0.0, 0.0, 1.0]);
+
+    // En 8-bit: ambos cuantizan al MISMO byte (indistinguibles).
+    let r1_8 = solid_center_bytes(&hal, wgpu::TextureFormat::Rgba8Unorm, 4, c1)[0];
+    let r2_8 = solid_center_bytes(&hal, wgpu::TextureFormat::Rgba8Unorm, 4, c2)[0];
+    assert_eq!(
+        r1_8, r2_8,
+        "premisa: en 8-bit los dos valores deben cuantizar al mismo byte \
+         (fueron {r1_8} y {r2_8})"
+    );
+
+    // En float: el path directo los preserva distintos.
+    let r1_f = r_channel_f16(&solid_center_bytes(&hal, wgpu::TextureFormat::Rgba16Float, 8, c1));
+    let r2_f = r_channel_f16(&solid_center_bytes(&hal, wgpu::TextureFormat::Rgba16Float, 8, c2));
+    assert!(
+        (r1_f - r2_f).abs() > 0.0007,
+        "el target float debería distinguir el paso sub-8-bit: R1={r1_f} R2={r2_f} \
+         (Δ={:.5}); en 8-bit Δ fue exactamente 0",
+        (r1_f - r2_f).abs()
+    );
+}
diff --git a/llimphi-raster/tests/gpu_scissor.rs b/llimphi-raster/tests/gpu_scissor.rs
new file mode 100644
index 0000000..4c72f3b
--- /dev/null
+++ b/llimphi-raster/tests/gpu_scissor.rs
@@ -0,0 +1,134 @@
+//! Correctitud del `scissor` del GPU-directo (habilitador de damage /
+//! partial-present): un `flush` con `scissor(x,y,w,h)` + `LoadOp::Load` sólo
+//! pinta dentro del rect y **preserva** el resto del `view`. Es la propiedad que
+//! el runtime necesita para re-pintar únicamente la región sucia (un cursor, un
+//! spinner) sin tocar la pantalla entera. Certificado por texto (§8), llvmpipe.
+
+use llimphi_hal::{wgpu, Hal};
+use llimphi_raster::gpu::{GpuBatch, GpuPipelines};
+use llimphi_raster::peniko::Color;
+
+const N: u32 = 16;
+const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
+
+fn read_all(hal: &Hal, target: &wgpu::Texture) -> Vec<u8> {
+    let unpadded = N as usize * 4;
+    let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize;
+    let padded = unpadded.div_ceil(align) * align;
+    let buf = hal.device.create_buffer(&wgpu::BufferDescriptor {
+        label: Some("scissor-readback"),
+        size: (padded * N as usize) as u64,
+        usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
+        mapped_at_creation: false,
+    });
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    enc.copy_texture_to_buffer(
+        wgpu::TexelCopyTextureInfo {
+            texture: target,
+            mip_level: 0,
+            origin: wgpu::Origin3d::ZERO,
+            aspect: wgpu::TextureAspect::All,
+        },
+        wgpu::TexelCopyBufferInfo {
+            buffer: &buf,
+            layout: wgpu::TexelCopyBufferLayout {
+                offset: 0,
+                bytes_per_row: Some(padded as u32),
+                rows_per_image: Some(N),
+            },
+        },
+        wgpu::Extent3d { width: N, height: N, depth_or_array_layers: 1 },
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let slice = buf.slice(..);
+    let (tx, rx) = std::sync::mpsc::channel();
+    slice.map_async(wgpu::MapMode::Read, move |r| {
+        let _ = tx.send(r);
+    });
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    rx.recv().unwrap().unwrap();
+    let data = slice.get_mapped_range();
+    let mut out = Vec::with_capacity((N * N * 4) as usize);
+    for row in 0..N as usize {
+        let s = row * padded;
+        out.extend_from_slice(&data[s..s + unpadded]);
+    }
+    drop(data);
+    buf.unmap();
+    out
+}
+
+fn px(buf: &[u8], x: u32, y: u32) -> [u8; 4] {
+    let o = ((y * N + x) * 4) as usize;
+    [buf[o], buf[o + 1], buf[o + 2], buf[o + 3]]
+}
+
+#[test]
+fn scissor_pinta_solo_la_region_sucia_y_preserva_el_resto() {
+    let hal = pollster::block_on(Hal::new_headless(true)).expect("hal");
+    let pipelines = GpuPipelines::new(&hal.device, FMT);
+    let target = hal.device.create_texture(&wgpu::TextureDescriptor {
+        label: Some("scissor-target"),
+        size: wgpu::Extent3d { width: N, height: N, depth_or_array_layers: 1 },
+        mip_level_count: 1,
+        sample_count: 1,
+        dimension: wgpu::TextureDimension::D2,
+        format: FMT,
+        usage: wgpu::TextureUsages::RENDER_ATTACHMENT | wgpu::TextureUsages::COPY_SRC,
+        view_formats: &[],
+    });
+    let view = target.create_view(&wgpu::TextureViewDescriptor::default());
+
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+
+    // 1) Pintar TODO de azul (estado "previo" del view).
+    let mut base = GpuBatch::new(&pipelines);
+    base.add_rect(0.0, 0.0, N as f32, N as f32, Color::from_rgba8(0, 0, 255, 255));
+    base.flush(
+        &hal.device,
+        &hal.queue,
+        &mut enc,
+        &view,
+        (N as f32, N as f32),
+        wgpu::LoadOp::Clear(wgpu::Color::BLACK),
+    );
+
+    // 2) Un rect rojo full-viewport PERO con scissor a [4,4]-[12,12] y Load:
+    //    debe pintar rojo sólo ahí y dejar el azul intacto afuera.
+    let mut dirty = GpuBatch::new(&pipelines);
+    dirty.add_rect(0.0, 0.0, N as f32, N as f32, Color::from_rgba8(255, 0, 0, 255));
+    dirty.scissor(4, 4, 8, 8);
+    dirty.flush(
+        &hal.device,
+        &hal.queue,
+        &mut enc,
+        &view,
+        (N as f32, N as f32),
+        wgpu::LoadOp::Load,
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+
+    let buf = read_all(&hal, &target);
+
+    // Centro (8,8): dentro del scissor → rojo.
+    let c = px(&buf, 8, 8);
+    assert!(c[0] > 200 && c[2] < 60, "centro debería ser rojo, fue {c:?}");
+    // Esquinas fuera del scissor → azul preservado.
+    for (x, y) in [(1, 1), (14, 1), (1, 14), (14, 14)] {
+        let p = px(&buf, x, y);
+        assert!(
+            p[2] > 200 && p[0] < 60,
+            "({x},{y}) fuera del scissor debería seguir azul, fue {p:?}"
+        );
+    }
+    // Justo fuera del borde del scissor (3,3) azul; justo dentro (4,4) rojo.
+    let out = px(&buf, 3, 3);
+    assert!(out[2] > 200 && out[0] < 60, "(3,3) borde-fuera debería ser azul, fue {out:?}");
+    let inn = px(&buf, 5, 5);
+    assert!(inn[0] > 200 && inn[2] < 60, "(5,5) borde-dentro debería ser rojo, fue {inn:?}");
+}
diff --git a/llimphi-surface/Cargo.toml b/llimphi-surface/Cargo.toml
index fb424bf..50d03cd 100644
--- a/llimphi-surface/Cargo.toml
+++ b/llimphi-surface/Cargo.toml
@@ -1,13 +1,13 @@
 [package]
 name = "llimphi-surface"
-description = "Surface/compositing glue for the llimphi UI framework."
 version.workspace = true
 edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 
+description = "Surface/compositing glue for the llimphi UI framework."
+repository.workspace = true
 [dependencies]
 llimphi-hal = { path = "../llimphi-hal", version = "0.1.0" }
 llimphi-ui = { path = "../llimphi-ui", version = "0.1.0" }
diff --git a/llimphi-surface/LEEME.md b/llimphi-surface/LEEME.md
new file mode 100644
index 0000000..5476d5c
--- /dev/null
+++ b/llimphi-surface/LEEME.md
@@ -0,0 +1,40 @@
+# llimphi-surface
+
+*Read this in English: [README.md](README.md).*
+
+Superficies externas dentro del bucle Elm.
+
+Un `ExternalSurface` es una textura RGBA8 que vive en GPU y se pinta
+sobre un rect del frame Llimphi cada vez que la app lo expone vía
+`View::gpu_paint_with`. La fuente de bytes corre afuera del bucle
+Elm: un decoder de video, un capture de cámara, un raster de PDF,
+una textura raw producida por otro motor — cualquier productor que
+genere RGBA puede empujar frames con `ExternalSurface::upload` y
+ver el resultado en la próxima pasada de raster.
+
+El crate provee:
+
+- `ExternalSurface`: dueño de la textura + render pipeline + bind
+  group. `upload(rgba, w, h)` sube bytes y recrea la textura si
+  `w`/`h` cambiaron.
+- `ExternalSurface::view`: helper que construye un `View` con
+  `gpu_paint_with` ya conectado. La app sólo elige el `Style` del
+  nodo (qué porción del layout ocupa).
+
+## Diseño
+
+El pipeline es un textured-quad clásico: dos triángulos cubren el
+rect destino, el fragment shader samplea la textura externa con
+sampler bilineal. Las coordenadas NDC del quad se computan en GPU
+a partir de `(rect, viewport)` que viajan por uniform — por eso
+el callback necesita el `viewport` que `llimphi-ui` empezó a
+propagar en `GpuPaintFn`.
+
+La textura intermedia donde Llimphi pinta vello es `Rgba8Unorm`
+(ver `llimphi-hal::INTERMEDIATE_FORMAT`). El pipeline emite
+`Rgba8Unorm` también — el target del render pass es esa misma
+intermedia con `LoadOp::Load`, así el fondo vello queda preservado.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../LEEME.md).
diff --git a/llimphi-surface/README.md b/llimphi-surface/README.md
new file mode 100644
index 0000000..25b3431
--- /dev/null
+++ b/llimphi-surface/README.md
@@ -0,0 +1,35 @@
+# llimphi-surface
+
+External surfaces inside the Elm loop.
+
+An `ExternalSurface` is an RGBA8 texture living on the GPU, painted over a rect
+of the Llimphi frame every time the app exposes it through
+`View::gpu_paint_with`. The byte source runs outside the Elm loop: a video
+decoder, a camera capture, a PDF raster, a raw texture produced by another engine
+— any producer generating RGBA can push frames with `ExternalSurface::upload` and
+see the result on the next raster pass.
+
+The crate provides:
+
+- `ExternalSurface`: owner of the texture + render pipeline + bind group.
+  `upload(rgba, w, h)` uploads bytes and recreates the texture if `w`/`h` changed.
+- `ExternalSurface::view`: a helper that builds a `View` with `gpu_paint_with`
+  already wired. The app only chooses the node's `Style` (which portion of the
+  layout it occupies).
+
+## Design
+
+The pipeline is a classic textured quad: two triangles cover the destination
+rect, and the fragment shader samples the external texture with a bilinear
+sampler. The quad's NDC coordinates are computed on the GPU from
+`(rect, viewport)` travelling through a uniform — which is why the callback needs
+the `viewport` that `llimphi-ui` began propagating in `GpuPaintFn`.
+
+The intermediate texture Llimphi paints vello into is `Rgba8Unorm` (see
+`llimphi-hal::INTERMEDIATE_FORMAT`). The pipeline emits `Rgba8Unorm` too — the
+render pass target is that same intermediate with `LoadOp::Load`, so the vello
+background is preserved.
+
+---
+
+Part of **llimphi** — see [llimphi](../README.md).
diff --git a/llimphi-svg/Cargo.toml b/llimphi-svg/Cargo.toml
new file mode 100644
index 0000000..5b41eca
--- /dev/null
+++ b/llimphi-svg/Cargo.toml
@@ -0,0 +1,12 @@
+[package]
+name = "llimphi-svg"
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+authors.workspace = true
+publish.workspace = true
+description = "llimphi-svg — puente fino vello_svg → Llimphi. Carga .svg arbitrario una vez (SvgAsset) y lo stampea en cualquier View vía paint_with, escalado al rect."
+
+[dependencies]
+llimphi-ui = { workspace = true }
+vello_svg = { version = "0.9", default-features = false }
diff --git a/llimphi-svg/LEEME.md b/llimphi-svg/LEEME.md
new file mode 100644
index 0000000..aa862f2
--- /dev/null
+++ b/llimphi-svg/LEEME.md
@@ -0,0 +1,44 @@
+# llimphi-svg
+
+*Read this in English: [README.md](README.md).*
+
+Puente fino entre `vello_svg` y Llimphi.
+
+`llimphi-icons` cubre el set canónico de ~50 íconos a mano (BezPath en
+grid 24×24). Para lo demás — íconos de apps `.desktop` arbitrarias,
+logotipos, assets de marca, exports vectoriales de pineal/cosmos — hace
+falta cargar SVG real. Este crate es el puente: parsea una vez con
+`vello_svg` y stampea la `vello::Scene` resultante en cualquier `View`
+escalándola al rect del nodo.
+
+## Uso
+```ignore
+use llimphi_svg::SvgAsset;
+
+// Parsea UNA vez (al cargar la app o el ícono):
+let svg = SvgAsset::from_str(include_str!("logo.svg")).expect("logo válido");
+
+// Pintalo en un View tantas veces como quieras (escala al rect):
+View::new(style).children(vec![svg.view::<Msg>()])
+```
+El parse cuesta — el `view()` no. Si vas a stampear el mismo SVG en muchos
+nodos (lista de apps con el mismo ícono fallback), parsea una sola vez y
+clonea el `SvgAsset` (es barato: `Arc` internamente).
+
+## Por qué no parsear en cada paint
+
+`vello_svg::render` corre el parser de `usvg` (~ms por SVG no trivial). En
+una lista con 80 íconos `.desktop`, parsear en cada frame mata el thread
+de UI. La regla: **el asset se parsea una vez**, la `Scene` resultante se
+retiene en memoria y se stampea con `scene.append(&inner, Some(xf))` —
+cuesta lo mismo que dibujar el resto del UI.
+
+## Errores
+
+`SvgAsset::from_str` devuelve `Result<Self, SvgError>` — si el XML está
+corrupto o usa features que `usvg` no soporta. Las apps típicas tratan el
+error como "fallback a glyph genérico" — no rompen.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../LEEME.md).
diff --git a/llimphi-svg/README.md b/llimphi-svg/README.md
new file mode 100644
index 0000000..415254f
--- /dev/null
+++ b/llimphi-svg/README.md
@@ -0,0 +1,43 @@
+# llimphi-svg
+
+A thin bridge between `vello_svg` and Llimphi.
+
+`llimphi-icons` covers the canonical set of ~50 hand-made icons (a `BezPath` on a
+24×24 grid). For everything else — arbitrary `.desktop` app icons, logos, brand
+assets, vector exports from pineal/cosmos — you need to load real SVG. This crate
+is the bridge: it parses once with `vello_svg` and stamps the resulting
+`vello::Scene` into any `View`, scaling it to the node's rect.
+
+## Use
+
+```ignore
+use llimphi_svg::SvgAsset;
+
+// Parse ONCE (when loading the app or the icon):
+let svg = SvgAsset::from_str(include_str!("logo.svg")).expect("valid logo");
+
+// Paint it in a View as many times as you like (it scales to the rect):
+View::new(style).children(vec![svg.view::<Msg>()])
+```
+
+The parse costs something — `view()` does not. If you are going to stamp the same
+SVG in many nodes (an app list sharing a fallback icon), parse once and clone the
+`SvgAsset` (it is cheap: `Arc` internally).
+
+## Why not parse on every paint
+
+`vello_svg::render` runs `usvg`'s parser (~ms for a non-trivial SVG). In a list
+of 80 `.desktop` icons, parsing every frame kills the UI thread. The rule: **the
+asset is parsed once**, the resulting `Scene` is retained in memory and stamped
+with `scene.append(&inner, Some(xf))` — which costs the same as drawing the rest
+of the UI.
+
+## Errors
+
+`SvgAsset::from_str` returns `Result<Self, SvgError>` — for corrupt XML or
+features `usvg` does not support. Typical apps treat the error as "fall back to a
+generic glyph" — they do not break.
+
+---
+
+Part of **llimphi** — see [llimphi](../README.md).
diff --git a/llimphi-svg/src/lib.rs b/llimphi-svg/src/lib.rs
new file mode 100644
index 0000000..2111568
--- /dev/null
+++ b/llimphi-svg/src/lib.rs
@@ -0,0 +1,191 @@
+//! `llimphi-svg` — puente fino entre `vello_svg` y Llimphi.
+//!
+//! `llimphi-icons` cubre el set canónico de ~50 íconos a mano (BezPath en
+//! grid 24×24). Para lo demás — íconos de apps `.desktop` arbitrarias,
+//! logotipos, assets de marca, exports vectoriales de pineal/cosmos — hace
+//! falta cargar SVG real. Este crate es el puente: parsea una vez con
+//! `vello_svg` y stampea la `vello::Scene` resultante en cualquier `View`
+//! escalándola al rect del nodo.
+//!
+//! ## Uso
+//!
+//! ```ignore
+//! use llimphi_svg::SvgAsset;
+//!
+//! // Parsea UNA vez (al cargar la app o el ícono):
+//! let svg = SvgAsset::from_str(include_str!("logo.svg")).expect("logo válido");
+//!
+//! // Pintalo en un View tantas veces como quieras (escala al rect):
+//! View::new(style).children(vec![svg.view::<Msg>()])
+//! ```
+//!
+//! El parse cuesta — el `view()` no. Si vas a stampear el mismo SVG en muchos
+//! nodos (lista de apps con el mismo ícono fallback), parsea una sola vez y
+//! clonea el `SvgAsset` (es barato: `Arc` internamente).
+//!
+//! ## Por qué no parsear en cada paint
+//!
+//! `vello_svg::render` corre el parser de `usvg` (~ms por SVG no trivial). En
+//! una lista con 80 íconos `.desktop`, parsear en cada frame mata el thread
+//! de UI. La regla: **el asset se parsea una vez**, la `Scene` resultante se
+//! retiene en memoria y se stampea con `scene.append(&inner, Some(xf))` —
+//! cuesta lo mismo que dibujar el resto del UI.
+//!
+//! ## Errores
+//!
+//! `SvgAsset::from_str` devuelve `Result<Self, SvgError>` — si el XML está
+//! corrupto o usa features que `usvg` no soporta. Las apps típicas tratan el
+//! error como "fallback a glyph genérico" — no rompen.
+
+#![forbid(unsafe_code)]
+
+use std::sync::Arc;
+
+use llimphi_ui::llimphi_layout::taffy::prelude::{percent, Size, Style};
+use llimphi_ui::llimphi_layout::taffy::Position;
+use llimphi_ui::llimphi_raster::kurbo::Affine;
+use llimphi_ui::llimphi_raster::vello::Scene;
+use llimphi_ui::{PaintRect, View};
+
+/// Asset SVG parseado y listo para stampear. Internamente guarda la
+/// `vello::Scene` ya construida + el viewBox del SVG (para escalar al rect del
+/// nodo manteniendo aspecto). Cloneable barato (`Arc`) — un mismo asset en una
+/// lista de 80 íconos no replica memoria.
+#[derive(Clone)]
+pub struct SvgAsset {
+    inner: Arc<Inner>,
+}
+
+struct Inner {
+    scene: Scene,
+    /// Tamaño del viewBox en unidades del SVG (px nominales). Lo necesitamos
+    /// para escalar el `scene.append(...)` al rect del nodo destino.
+    vb_w: f64,
+    vb_h: f64,
+}
+
+/// Errores al parsear un SVG. Hoy es un wrap del tipo de `vello_svg::Error` —
+/// las apps típicas lo tratan como "fallback" y no inspeccionan la variante.
+#[derive(Debug)]
+pub struct SvgError(pub String);
+
+impl std::fmt::Display for SvgError {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        write!(f, "svg: {}", self.0)
+    }
+}
+
+impl std::error::Error for SvgError {}
+
+impl SvgAsset {
+    /// Parsea un SVG desde su representación XML como string. Devuelve un asset
+    /// inmutable + cloneable. **Hace el parseo completo** (usvg + render a una
+    /// `vello::Scene`); pensado para llamarse UNA vez por asset, no por frame.
+    pub fn from_str(svg: &str) -> Result<Self, SvgError> {
+        let scene = vello_svg::render(svg).map_err(|e| SvgError(e.to_string()))?;
+        // El size del viewBox sale del propio SVG: lo recuperamos con un parse
+        // mínimo de usvg para no acoplar este crate a la geometría del SVG por
+        // fuera de vello_svg.
+        let opt = vello_svg::usvg::Options::default();
+        let tree = vello_svg::usvg::Tree::from_str(svg, &opt).map_err(|e| SvgError(e.to_string()))?;
+        let size = tree.size();
+        Ok(Self {
+            inner: Arc::new(Inner {
+                scene,
+                vb_w: size.width() as f64,
+                vb_h: size.height() as f64,
+            }),
+        })
+    }
+
+    /// Parsea un SVG desde sus bytes UTF-8 crudos (lo que devuelve
+    /// `include_bytes!("…svg")` o `std::fs::read`).
+    pub fn from_bytes(svg: &[u8]) -> Result<Self, SvgError> {
+        let s = std::str::from_utf8(svg).map_err(|e| SvgError(e.to_string()))?;
+        Self::from_str(s)
+    }
+
+    /// Tamaño del viewBox del SVG en px nominales. Útil cuando el caller quiere
+    /// dimensionar el rect destino preservando el aspect ratio en vez de dejar
+    /// que el `view()` lo escale al máximo lado.
+    pub fn size(&self) -> (f64, f64) {
+        (self.inner.vb_w, self.inner.vb_h)
+    }
+
+    /// Pinta el SVG sobre `scene`, ajustado al `rect` indicado. Escala
+    /// uniforme al mínimo lado y **centra** dentro del rect (preserva
+    /// aspect ratio). Útil cuando el caller compone varios assets en un
+    /// `paint_with` propio sin pasar por `view()`.
+    pub fn paint(&self, scene: &mut Scene, rect: PaintRect) {
+        let side_w = rect.w as f64;
+        let side_h = rect.h as f64;
+        if side_w <= 0.0 || side_h <= 0.0 || self.inner.vb_w <= 0.0 || self.inner.vb_h <= 0.0 {
+            return;
+        }
+        let s = (side_w / self.inner.vb_w).min(side_h / self.inner.vb_h);
+        let used_w = self.inner.vb_w * s;
+        let used_h = self.inner.vb_h * s;
+        let tx = rect.x as f64 + (side_w - used_w) * 0.5;
+        let ty = rect.y as f64 + (side_h - used_h) * 0.5;
+        let xform = Affine::translate((tx, ty)) * Affine::scale(s);
+        scene.append(&self.inner.scene, Some(xform));
+    }
+
+    /// Construye un `View` posicionado en absoluto, que ocupa todo el rect del
+    /// padre y pinta el SVG centrado + escalado al mínimo lado. Es el equivalente
+    /// de `icon_view` para SVG arbitrarios. Genérico sobre `Msg` igual que los
+    /// widgets — el `View` no tiene handlers; la app los pone en el padre.
+    pub fn view<Msg>(&self) -> View<Msg> {
+        let asset = self.clone();
+        View::new(Style {
+            position: Position::Absolute,
+            size: Size {
+                width: percent(1.0_f32),
+                height: percent(1.0_f32),
+            },
+            ..Default::default()
+        })
+        .paint_with(move |scene, _ts, rect| {
+            asset.paint(scene, rect);
+        })
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    /// Un SVG mínimo: una caja roja de 24×24 con un círculo blanco al centro.
+    const SVG_OK: &str = r##"<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+        <rect width="24" height="24" fill="#cc0000"/>
+        <circle cx="12" cy="12" r="6" fill="#ffffff"/>
+    </svg>"##;
+
+    #[test]
+    fn from_str_parsea_ok() {
+        let a = SvgAsset::from_str(SVG_OK).expect("parsea");
+        let (w, h) = a.size();
+        assert!((w - 24.0).abs() < 1e-6 && (h - 24.0).abs() < 1e-6);
+    }
+
+    #[test]
+    fn svg_inválido_da_error() {
+        let bad = "<no es svg>";
+        assert!(SvgAsset::from_str(bad).is_err());
+    }
+
+    #[test]
+    fn asset_es_cloneable_barato() {
+        let a = SvgAsset::from_str(SVG_OK).expect("parsea");
+        let b = a.clone();
+        assert_eq!(a.size(), b.size());
+    }
+
+    #[test]
+    fn paint_no_panica_con_rect_cero() {
+        let a = SvgAsset::from_str(SVG_OK).expect("parsea");
+        let mut s = Scene::new();
+        a.paint(&mut s, PaintRect { x: 0.0, y: 0.0, w: 0.0, h: 0.0 });
+        a.paint(&mut s, PaintRect { x: 0.0, y: 0.0, w: 10.0, h: 0.0 });
+    }
+}
diff --git a/llimphi-term-graphics/Cargo.toml b/llimphi-term-graphics/Cargo.toml
new file mode 100644
index 0000000..ea299b1
--- /dev/null
+++ b/llimphi-term-graphics/Cargo.toml
@@ -0,0 +1,15 @@
+[package]
+name = "llimphi-term-graphics"
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+authors.workspace = true
+publish.workspace = true
+description = "llimphi-term-graphics — decodificador agnóstico de protocolos de gráficos de terminal (kitty graphics protocol vía APC, y sixel vía DCS). Scanner streaming que deja pasar el texto/ANSI normal (para el emulador vt100) y extrae las secuencias gráficas completas, decodificándolas a RGBA8. Sin dependencias de UI — produce píxeles, el caller los sube a una textura/peniko::Image."
+
+[dependencies]
+base64 = { workspace = true }
+flate2 = { workspace = true }
+# Sólo PNG/JPEG/WEBP/etc. para el formato kitty f=100 (imagen embebida).
+# Sixel y RGBA/RGB crudos (f=24/32) se decodifican a mano, sin el crate.
+image = { workspace = true }
diff --git a/llimphi-term-graphics/LEEME.md b/llimphi-term-graphics/LEEME.md
new file mode 100644
index 0000000..b5dafc6
--- /dev/null
+++ b/llimphi-term-graphics/LEEME.md
@@ -0,0 +1,29 @@
+# llimphi-term-graphics
+
+*Read this in English: [README.md](README.md).*
+
+Decodificador agnóstico de protocolos de gráficos de terminal.
+
+Dos protocolos cubiertos:
+- **kitty graphics protocol** — secuencias APC `\e_G<control>;<base64>\e\\`.
+  Soporta transmisión chunked (`m=1`), formatos `f=100` (PNG/JPEG/… vía el
+  crate `image`), `f=24` (RGB crudo) y `f=32` (RGBA crudo), y compresión
+  `o=z` (zlib). Acciones `t`/`T` (transmitir [y mostrar]), `q` (query),
+  `d` (delete).
+- **sixel** — secuencias DCS `\eP<params>q<datos>\e\\`. Decodificador a mano
+  (paleta, selección de color `#`, RLE `!`, CR `$`, LF `-`, atributos
+  raster `"`).
+
+El corazón es `GraphicsScanner`: un autómata streaming al que se le
+alimentan los chunks de bytes del PTY. Deja pasar **intacto** todo el texto
+y los escapes ANSI normales (para que el emulador vt100 los procese) y sólo
+**secuestra** las secuencias gráficas completas, que devuelve decodificadas
+como `GraphicsCommand`. No tiene estado de UI ni dependencias de render:
+produce píxeles RGBA8, el caller los sube a una textura / `peniko::Image`.
+
+Robusto a fronteras de chunk: una secuencia partida entre dos `feed()`
+queda buffereada y se completa en la llamada siguiente.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../LEEME.md).
diff --git a/llimphi-term-graphics/README.md b/llimphi-term-graphics/README.md
new file mode 100644
index 0000000..cea89bb
--- /dev/null
+++ b/llimphi-term-graphics/README.md
@@ -0,0 +1,28 @@
+# llimphi-term-graphics
+
+Agnostic decoder of terminal graphics protocols.
+
+Two protocols covered:
+
+- **kitty graphics protocol** — APC sequences `\e_G<control>;<base64>\e\\`.
+  It supports chunked transmission (`m=1`), the `f=100` (PNG/JPEG/… through the
+  `image` crate), `f=24` (raw RGB) and `f=32` (raw RGBA) formats, and `o=z`
+  (zlib) compression. Actions `t`/`T` (transmit [and display]), `q` (query),
+  `d` (delete).
+- **sixel** — DCS sequences `\eP<params>q<data>\e\\`. A hand-written decoder
+  (palette, `#` colour selection, `!` RLE, `$` CR, `-` LF, `"` raster
+  attributes).
+
+Its heart is `GraphicsScanner`: a streaming automaton fed the PTY's byte chunks.
+It lets **all** ordinary text and ANSI escapes through untouched (so the vt100
+emulator can process them) and only **hijacks** complete graphics sequences,
+returning them decoded as a `GraphicsCommand`. It has no UI state and no render
+dependencies: it produces RGBA8 pixels and the caller uploads them to a texture
+or a `peniko::Image`.
+
+It is robust to chunk boundaries: a sequence split across two `feed()` calls is
+buffered and completed on the next one.
+
+---
+
+Part of **llimphi** — see [llimphi](../README.md).
diff --git a/llimphi-term-graphics/src/kitty.rs b/llimphi-term-graphics/src/kitty.rs
new file mode 100644
index 0000000..e3cc8a0
--- /dev/null
+++ b/llimphi-term-graphics/src/kitty.rs
@@ -0,0 +1,212 @@
+//! kitty graphics protocol — parser de control APC + ensamblador de
+//! transmisión chunked + decodificación a RGBA.
+//!
+//! Cuerpo APC esperado (sin el `\e_` ni el `\e\\`): `G<control>;<base64>` donde
+//! `<control>` son pares `clave=valor` separados por comas. Claves que nos
+//! importan:
+//! - `a` acción: `t` transmitir, `T` transmitir+mostrar, `q` query, `d` delete.
+//! - `f` formato: `32` RGBA (default), `24` RGB, `100` PNG/imagen embebida.
+//! - `s`,`v` ancho,alto en px (para `f=24`/`f=32`).
+//! - `c`,`r` columnas,filas de celdas pedidas (0 = derivar de los px).
+//! - `i` id de imagen. `m` more-chunks (`1` = sigue, `0`/ausente = último).
+//! - `o` compresión: `z` = zlib (RFC1950) sobre los datos pre-base64.
+
+use std::io::Read;
+
+use base64::Engine;
+
+use crate::{DecodedImage, GraphicsCommand, Protocol};
+
+/// Errores de decodificación kitty. Hoy informativos; el scanner los traga
+/// (una imagen rota no debe tumbar la terminal) pero los exponemos por si el
+/// caller quiere loguearlos.
+#[derive(Debug)]
+pub enum KittyError {
+    Base64,
+    Zlib,
+    Image(String),
+    BadDims,
+}
+
+/// Acumula la transmisión chunked (`m=1`) hasta el último chunk.
+#[derive(Default)]
+pub struct KittyAssembler {
+    pending: Option<Pending>,
+}
+
+struct Pending {
+    fmt: u32,
+    s: u32,
+    v: u32,
+    id: u32,
+    cols: u16,
+    rows: u16,
+    compressed: bool,
+    payload_b64: Vec<u8>,
+}
+
+impl KittyAssembler {
+    /// Procesa un cuerpo APC completo. Devuelve un comando cuando la
+    /// transmisión cierra (o es query/delete); `None` mientras espera más
+    /// chunks o si el APC no es kitty.
+    pub fn feed_apc(&mut self, seq: &[u8]) -> Option<GraphicsCommand> {
+        // Debe empezar con 'G' (kitty graphics). Otros APC no son nuestros.
+        if seq.first() != Some(&b'G') {
+            return None;
+        }
+        let body = &seq[1..];
+        let (control, payload): (&[u8], &[u8]) = match body.iter().position(|&b| b == b';') {
+            Some(p) => (&body[..p], &body[p + 1..]),
+            None => (body, &[]),
+        };
+
+        let is_continuation = self.pending.is_some();
+
+        // Sólo el primer chunk trae el control completo; las continuaciones
+        // traen (a lo sumo) `m`. Parseamos siempre `m`; el resto sólo si es
+        // el primer chunk.
+        let mut more = false;
+        let mut action = b't';
+        let mut fmt = 32u32;
+        let (mut s, mut v) = (0u32, 0u32);
+        let mut id = 0u32;
+        let (mut cols, mut rows) = (0u16, 0u16);
+        let mut compressed = false;
+
+        for tok in control.split(|&b| b == b',') {
+            if tok.is_empty() {
+                continue;
+            }
+            let mut kv = tok.splitn(2, |&b| b == b'=');
+            let k = kv.next().unwrap_or(&[]);
+            let val = kv.next().unwrap_or(&[]);
+            match k {
+                b"m" => more = val == b"1",
+                b"a" => action = val.first().copied().unwrap_or(b't'),
+                b"f" => fmt = parse_u32(val).unwrap_or(32),
+                b"s" => s = parse_u32(val).unwrap_or(0),
+                b"v" => v = parse_u32(val).unwrap_or(0),
+                b"i" => id = parse_u32(val).unwrap_or(0),
+                b"c" => cols = parse_u32(val).unwrap_or(0) as u16,
+                b"r" => rows = parse_u32(val).unwrap_or(0) as u16,
+                b"o" => compressed = val == b"z",
+                _ => {}
+            }
+        }
+
+        // Acciones sin payload (sólo válidas en el primer chunk).
+        if !is_continuation {
+            match action {
+                b'q' => {
+                    // Responder OK por el PTY para que el emisor sepa que hay
+                    // soporte kitty. Formato: `\e_Gi=<id>;OK\e\\`.
+                    let response = format!("\x1b_Gi={id};OK\x1b\\").into_bytes();
+                    return Some(GraphicsCommand::Query { response });
+                }
+                b'd' => {
+                    let id = if id == 0 { None } else { Some(id) };
+                    return Some(GraphicsCommand::Delete { id });
+                }
+                _ => {}
+            }
+        }
+
+        // Acumular payload base64.
+        if is_continuation {
+            let p = self.pending.as_mut().unwrap();
+            p.payload_b64.extend_from_slice(payload);
+        } else {
+            self.pending = Some(Pending {
+                fmt,
+                s,
+                v,
+                id,
+                cols,
+                rows,
+                compressed,
+                payload_b64: payload.to_vec(),
+            });
+        }
+
+        if more {
+            return None;
+        }
+
+        // Último chunk: finalizar.
+        let p = self.pending.take()?;
+        match decode_pending(&p) {
+            Ok(image) => Some(GraphicsCommand::Image {
+                image,
+                cols: p.cols,
+                rows: p.rows,
+                id: p.id,
+                protocol: Protocol::Kitty,
+            }),
+            Err(_) => None,
+        }
+    }
+}
+
+fn decode_pending(p: &Pending) -> Result<DecodedImage, KittyError> {
+    // 1. base64 → bytes.
+    let raw = base64::engine::general_purpose::STANDARD
+        .decode(&p.payload_b64)
+        .map_err(|_| KittyError::Base64)?;
+
+    // 2. zlib si o=z.
+    let data = if p.compressed {
+        let mut dec = flate2::read::ZlibDecoder::new(&raw[..]);
+        let mut out = Vec::new();
+        dec.read_to_end(&mut out).map_err(|_| KittyError::Zlib)?;
+        out
+    } else {
+        raw
+    };
+
+    // 3. interpretar según formato.
+    match p.fmt {
+        32 => {
+            let (w, h) = (p.s, p.v);
+            let need = (w as usize) * (h as usize) * 4;
+            if w == 0 || h == 0 || data.len() < need {
+                return Err(KittyError::BadDims);
+            }
+            Ok(DecodedImage {
+                width: w,
+                height: h,
+                rgba: data[..need].to_vec(),
+            })
+        }
+        24 => {
+            let (w, h) = (p.s, p.v);
+            let need = (w as usize) * (h as usize) * 3;
+            if w == 0 || h == 0 || data.len() < need {
+                return Err(KittyError::BadDims);
+            }
+            let mut rgba = Vec::with_capacity((w as usize) * (h as usize) * 4);
+            for px in data[..need].chunks_exact(3) {
+                rgba.extend_from_slice(&[px[0], px[1], px[2], 255]);
+            }
+            Ok(DecodedImage {
+                width: w,
+                height: h,
+                rgba,
+            })
+        }
+        // f=100 (PNG) y cualquier otro: dejamos que el crate `image` adivine
+        // el formato por los magic bytes.
+        _ => {
+            let img = image::load_from_memory(&data).map_err(|e| KittyError::Image(e.to_string()))?;
+            let rgba = img.to_rgba8();
+            Ok(DecodedImage {
+                width: rgba.width(),
+                height: rgba.height(),
+                rgba: rgba.into_raw(),
+            })
+        }
+    }
+}
+
+fn parse_u32(b: &[u8]) -> Option<u32> {
+    std::str::from_utf8(b).ok()?.trim().parse().ok()
+}
diff --git a/llimphi-term-graphics/src/lib.rs b/llimphi-term-graphics/src/lib.rs
new file mode 100644
index 0000000..e826152
--- /dev/null
+++ b/llimphi-term-graphics/src/lib.rs
@@ -0,0 +1,600 @@
+//! `llimphi-term-graphics` — decodificador agnóstico de protocolos de gráficos
+//! de terminal.
+//!
+//! Dos protocolos cubiertos:
+//! - **kitty graphics protocol** — secuencias APC `\e_G<control>;<base64>\e\\`.
+//!   Soporta transmisión chunked (`m=1`), formatos `f=100` (PNG/JPEG/… vía el
+//!   crate `image`), `f=24` (RGB crudo) y `f=32` (RGBA crudo), y compresión
+//!   `o=z` (zlib). Acciones `t`/`T` (transmitir [y mostrar]), `q` (query),
+//!   `d` (delete).
+//! - **sixel** — secuencias DCS `\eP<params>q<datos>\e\\`. Decodificador a mano
+//!   (paleta, selección de color `#`, RLE `!`, CR `$`, LF `-`, atributos
+//!   raster `"`).
+//!
+//! El corazón es [`GraphicsScanner`]: un autómata streaming al que se le
+//! alimentan los chunks de bytes del PTY. Deja pasar **intacto** todo el texto
+//! y los escapes ANSI normales (para que el emulador vt100 los procese) y sólo
+//! **secuestra** las secuencias gráficas completas, que devuelve decodificadas
+//! como [`GraphicsCommand`]. No tiene estado de UI ni dependencias de render:
+//! produce píxeles RGBA8, el caller los sube a una textura / `peniko::Image`.
+//!
+//! Robusto a fronteras de chunk: una secuencia partida entre dos `feed()`
+//! queda buffereada y se completa en la llamada siguiente.
+
+#![forbid(unsafe_code)]
+
+mod kitty;
+mod sixel;
+
+pub use kitty::KittyError;
+
+/// Imagen decodificada: RGBA8 sin premultiplicar, fila-mayor, sin padding.
+/// `rgba.len() == width * height * 4`.
+#[derive(Clone, PartialEq, Eq)]
+pub struct DecodedImage {
+    pub width: u32,
+    pub height: u32,
+    pub rgba: Vec<u8>,
+}
+
+impl std::fmt::Debug for DecodedImage {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        f.debug_struct("DecodedImage")
+            .field("width", &self.width)
+            .field("height", &self.height)
+            .field("rgba_len", &self.rgba.len())
+            .finish()
+    }
+}
+
+/// Protocolo de origen de un comando gráfico.
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Protocol {
+    Kitty,
+    Sixel,
+}
+
+/// Un comando gráfico completo extraído del stream del PTY.
+#[derive(Debug, Clone)]
+pub enum GraphicsCommand {
+    /// Transmitir (y normalmente mostrar) una imagen en la posición actual del
+    /// cursor. `cols`/`rows` son las celdas pedidas por el protocolo (kitty
+    /// `c=`/`r=`); `0` = el caller deriva el tamaño de los píxeles.
+    Image {
+        image: DecodedImage,
+        cols: u16,
+        rows: u16,
+        /// id de imagen kitty (para placement/delete posterior); sixel = 0.
+        id: u32,
+        protocol: Protocol,
+    },
+    /// kitty `a=d`: borrar placements. `id == None` = borrar todo.
+    Delete { id: Option<u32> },
+    /// Una query de capacidad (kitty `a=q`) que el emulador debe **responder**
+    /// escribiendo `response` de vuelta por el stdin del PTY.
+    Query { response: Vec<u8> },
+}
+
+const ESC: u8 = 0x1b;
+const BEL: u8 = 0x07;
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+enum State {
+    /// Texto normal; copiando a passthrough.
+    Normal,
+    /// Vimos ESC, esperando el byte que decide (no lo copiamos todavía).
+    Esc,
+    /// Dentro de APC (`\e_`), acumulando en `seq` hasta ST/BEL.
+    Apc,
+    /// Dentro de APC y vimos ESC (esperando `\` del ST).
+    ApcEsc,
+    /// Dentro de DCS (`\eP`), acumulando en `seq` hasta ST/BEL.
+    Dcs,
+    /// Dentro de DCS y vimos ESC.
+    DcsEsc,
+    /// Dentro de CSI (`\e[`), acumulando params/intermedios hasta el byte
+    /// final (`0x40..=0x7e`). La CSI se reenvía **verbatim** al passthrough;
+    /// sólo emitimos una respuesta si resulta una query de capacidad.
+    Csi,
+}
+
+/// Autómata streaming que separa el texto/ANSI normal de las secuencias
+/// gráficas. Ver el módulo para el contrato completo.
+pub struct GraphicsScanner {
+    state: State,
+    /// Cuerpo de la secuencia en curso (sin el ESC inicial ni el terminador).
+    seq: Vec<u8>,
+    /// Acumulador de la transmisión chunked de kitty (`m=1`).
+    kitty: kitty::KittyAssembler,
+    /// Tope de bytes para una sola secuencia — defensa contra un stream malo
+    /// que nunca cierra el APC/DCS (no crecemos sin límite).
+    max_seq: usize,
+}
+
+impl Default for GraphicsScanner {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+impl GraphicsScanner {
+    pub fn new() -> Self {
+        Self {
+            state: State::Normal,
+            seq: Vec::new(),
+            kitty: kitty::KittyAssembler::default(),
+            // 64 MiB: una imagen base64 grande cabe; un stream roto no nos cuelga.
+            max_seq: 64 * 1024 * 1024,
+        }
+    }
+
+    /// Consume `input`: escribe los bytes no-gráficos en `passthrough` (para el
+    /// vt100) y devuelve los comandos gráficos completados en este chunk.
+    pub fn feed(&mut self, input: &[u8], passthrough: &mut Vec<u8>) -> Vec<GraphicsCommand> {
+        let mut out = Vec::new();
+        for &b in input {
+            match self.state {
+                State::Normal => {
+                    if b == ESC {
+                        self.state = State::Esc;
+                    } else {
+                        passthrough.push(b);
+                    }
+                }
+                State::Esc => match b {
+                    b'_' => {
+                        self.seq.clear();
+                        self.state = State::Apc;
+                    }
+                    b'P' => {
+                        self.seq.clear();
+                        self.state = State::Dcs;
+                    }
+                    b'[' => {
+                        self.seq.clear();
+                        self.state = State::Csi;
+                    }
+                    ESC => {
+                        // ESC ESC: el primero no era nuestro → a passthrough;
+                        // seguimos evaluando este nuevo ESC.
+                        passthrough.push(ESC);
+                    }
+                    _ => {
+                        // Cualquier otra secuencia (CSI `[`, OSC `]`, charset…)
+                        // no nos interesa: devolvemos el ESC + este byte y el
+                        // resto fluye como texto normal al vt100.
+                        passthrough.push(ESC);
+                        passthrough.push(b);
+                        self.state = State::Normal;
+                    }
+                },
+                State::Apc => self.accumulate(b, &mut out, false),
+                State::ApcEsc => self.accumulate_esc(b, &mut out, false),
+                State::Dcs => self.accumulate(b, &mut out, true),
+                State::DcsEsc => self.accumulate_esc(b, &mut out, true),
+                State::Csi => self.accumulate_csi(b, passthrough, &mut out),
+            }
+        }
+        out
+    }
+
+    /// Byte dentro de un cuerpo APC/DCS (no estábamos tras un ESC).
+    fn accumulate(&mut self, b: u8, out: &mut Vec<GraphicsCommand>, is_dcs: bool) {
+        if b == ESC {
+            self.state = if is_dcs { State::DcsEsc } else { State::ApcEsc };
+        } else if b == BEL {
+            // BEL también cierra (algunas terminales lo aceptan para APC).
+            self.finish(out, is_dcs);
+        } else {
+            if self.seq.len() < self.max_seq {
+                self.seq.push(b);
+            }
+            // Si rebalsa el tope, seguimos consumiendo bytes (descartándolos)
+            // hasta el terminador, para no resincronizar mal.
+        }
+    }
+
+    /// Byte dentro de un cuerpo APC/DCS justo después de un ESC.
+    fn accumulate_esc(&mut self, b: u8, out: &mut Vec<GraphicsCommand>, is_dcs: bool) {
+        if b == b'\\' {
+            // ST: secuencia completa.
+            self.finish(out, is_dcs);
+        } else if b == ESC {
+            // ESC ESC dentro del cuerpo: el primero es literal.
+            if self.seq.len() < self.max_seq {
+                self.seq.push(ESC);
+            }
+            // seguimos en *Esc esperando el resolutor.
+        } else {
+            // El ESC era literal y este byte también.
+            if self.seq.len() + 2 <= self.max_seq {
+                self.seq.push(ESC);
+                self.seq.push(b);
+            }
+            self.state = if is_dcs { State::Dcs } else { State::Apc };
+        }
+    }
+
+    /// Byte dentro de una CSI (`\e[…`). La CSI siempre se reenvía verbatim al
+    /// passthrough (el vt100 la ve idéntica); si es una query de capacidad,
+    /// además emitimos su respuesta.
+    fn accumulate_csi(
+        &mut self,
+        b: u8,
+        passthrough: &mut Vec<u8>,
+        out: &mut Vec<GraphicsCommand>,
+    ) {
+        if b == ESC {
+            // CSI abortada por un ESC nuevo: descargamos lo acumulado y
+            // re-evaluamos este ESC.
+            passthrough.extend_from_slice(&[ESC, b'[']);
+            passthrough.extend_from_slice(&self.seq);
+            self.seq.clear();
+            self.state = State::Esc;
+        } else if (0x40..=0x7e).contains(&b) {
+            // Byte final: la CSI está completa.
+            self.seq.push(b);
+            passthrough.extend_from_slice(&[ESC, b'[']);
+            passthrough.extend_from_slice(&self.seq);
+            if let Some(response) = csi_query_response(&self.seq) {
+                out.push(GraphicsCommand::Query { response });
+            }
+            self.seq.clear();
+            self.state = State::Normal;
+        } else {
+            // Params (0x30..0x3f) / intermedios (0x20..0x2f).
+            if self.seq.len() < self.max_seq {
+                self.seq.push(b);
+            }
+        }
+    }
+
+    /// Cierra la secuencia acumulada: la decodifica y resetea a Normal.
+    fn finish(&mut self, out: &mut Vec<GraphicsCommand>, is_dcs: bool) {
+        let seq = std::mem::take(&mut self.seq);
+        self.state = State::Normal;
+        if is_dcs {
+            if let Some(img) = sixel::decode(&seq) {
+                out.push(GraphicsCommand::Image {
+                    image: img,
+                    cols: 0,
+                    rows: 0,
+                    id: 0,
+                    protocol: Protocol::Sixel,
+                });
+            }
+        } else if let Some(cmd) = self.kitty.feed_apc(&seq) {
+            out.push(cmd);
+        }
+    }
+}
+
+/// Si `csi` (los bytes de una CSI tras `\e[`, incluido el byte final) es una
+/// query de capacidad gráfica, devuelve la respuesta que el emulador debe
+/// escribir por el stdin del PTY para anunciar soporte. Anunciamos sixel
+/// porque el decodificador lo soporta; las demás CSI devuelven `None`.
+fn csi_query_response(csi: &[u8]) -> Option<Vec<u8>> {
+    match csi {
+        // Primary Device Attributes (`\e[c` / `\e[0c`). El `4` en la respuesta
+        // es el flag que chafa/otros leen como "soporta sixel". 62 = VT220.
+        b"c" | b"0c" => Some(b"\x1b[?62;4c".to_vec()),
+        // Secondary DA (`\e[>c` / `\e[>0c`) — versión del terminal, estilo
+        // xterm. Algunos programas la piden antes de decidir capacidades.
+        b">c" | b">0c" => Some(b"\x1b[>1;95;0c".to_vec()),
+        // XTSMGRAPHICS (`\e[?Pi;Pa;…S`): consulta de registros de color /
+        // geometría sixel. Respondemos valores holgados (la sizing real la
+        // hace el caller con su tamaño de celda).
+        _ if csi.first() == Some(&b'?') && csi.last() == Some(&b'S') => {
+            let body = &csi[1..csi.len() - 1];
+            let mut it = body.split(|&b| b == b';');
+            let pi = it.next().and_then(|v| std::str::from_utf8(v).ok()?.parse::<u32>().ok());
+            match pi {
+                Some(1) => Some(b"\x1b[?1;0;65536S".to_vec()), // registros de color
+                Some(2) => Some(b"\x1b[?2;0;1000;1000S".to_vec()), // geometría máx.
+                _ => None,
+            }
+        }
+        _ => None,
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    /// El texto plano pasa intacto y no genera comandos.
+    #[test]
+    fn texto_normal_pasa_intacto() {
+        let mut sc = GraphicsScanner::new();
+        let mut pt = Vec::new();
+        let cmds = sc.feed(b"hola mundo\n", &mut pt);
+        assert!(cmds.is_empty());
+        assert_eq!(pt, b"hola mundo\n");
+    }
+
+    /// Una secuencia CSI (color SGR) NO se secuestra: fluye al passthrough.
+    #[test]
+    fn csi_sgr_no_se_secuestra() {
+        let mut sc = GraphicsScanner::new();
+        let mut pt = Vec::new();
+        let input = b"\x1b[31mrojo\x1b[0m";
+        let cmds = sc.feed(input, &mut pt);
+        assert!(cmds.is_empty());
+        assert_eq!(pt, input);
+    }
+
+    /// kitty RGBA crudo 1x1: APC con f=32, s=1, v=1, payload = 4 bytes base64.
+    #[test]
+    fn kitty_rgba_1x1() {
+        use base64::Engine;
+        let px = [10u8, 20, 30, 255];
+        let b64 = base64::engine::general_purpose::STANDARD.encode(px);
+        let seq = format!("\x1b_Gf=32,s=1,v=1,a=T;{b64}\x1b\\");
+        let mut sc = GraphicsScanner::new();
+        let mut pt = Vec::new();
+        let cmds = sc.feed(seq.as_bytes(), &mut pt);
+        assert!(pt.is_empty(), "no debería pasar nada al vt100");
+        assert_eq!(cmds.len(), 1);
+        match &cmds[0] {
+            GraphicsCommand::Image { image, protocol, .. } => {
+                assert_eq!(*protocol, Protocol::Kitty);
+                assert_eq!((image.width, image.height), (1, 1));
+                assert_eq!(image.rgba, vec![10, 20, 30, 255]);
+            }
+            other => panic!("se esperaba Image, vino {other:?}"),
+        }
+    }
+
+    /// La secuencia partida entre dos `feed()` se completa igual.
+    #[test]
+    fn secuencia_partida_entre_chunks() {
+        use base64::Engine;
+        let px = [1u8, 2, 3, 4];
+        let b64 = base64::engine::general_purpose::STANDARD.encode(px);
+        let seq = format!("\x1b_Gf=32,s=1,v=1;{b64}\x1b\\");
+        let bytes = seq.as_bytes();
+        let mid = bytes.len() / 2;
+        let mut sc = GraphicsScanner::new();
+        let mut pt = Vec::new();
+        let mut cmds = sc.feed(&bytes[..mid], &mut pt);
+        cmds.extend(sc.feed(&bytes[mid..], &mut pt));
+        assert!(pt.is_empty());
+        assert_eq!(cmds.len(), 1);
+        match &cmds[0] {
+            GraphicsCommand::Image { image, .. } => {
+                assert_eq!(image.rgba, vec![1, 2, 3, 4]);
+            }
+            other => panic!("se esperaba Image, vino {other:?}"),
+        }
+    }
+
+    /// Texto antes y después de la imagen sobrevive en el passthrough.
+    #[test]
+    fn texto_rodeando_imagen() {
+        use base64::Engine;
+        let b64 = base64::engine::general_purpose::STANDARD.encode([9u8, 9, 9, 9]);
+        let seq = format!("antes\x1b_Gf=32,s=1,v=1;{b64}\x1b\\después");
+        let mut sc = GraphicsScanner::new();
+        let mut pt = Vec::new();
+        let cmds = sc.feed(seq.as_bytes(), &mut pt);
+        assert_eq!(cmds.len(), 1);
+        assert_eq!(pt, "antesdespués".as_bytes());
+    }
+
+    /// Primary DA (`\e[c`) → respuesta con flag sixel (`4`), y la query igual
+    /// se reenvía verbatim al vt100.
+    #[test]
+    fn da_primary_anuncia_sixel() {
+        let mut sc = GraphicsScanner::new();
+        let mut pt = Vec::new();
+        let cmds = sc.feed(b"\x1b[c", &mut pt);
+        assert_eq!(pt, b"\x1b[c", "la CSI debe pasar idéntica al vt100");
+        assert_eq!(cmds.len(), 1);
+        match &cmds[0] {
+            GraphicsCommand::Query { response } => {
+                assert_eq!(response, b"\x1b[?62;4c");
+            }
+            other => panic!("se esperaba Query, vino {other:?}"),
+        }
+    }
+
+    /// XTSMGRAPHICS de registros de color (`\e[?1;1;0S`) → respuesta `?1;0;…S`.
+    #[test]
+    fn xtsmgraphics_registros_color() {
+        let mut sc = GraphicsScanner::new();
+        let mut pt = Vec::new();
+        let cmds = sc.feed(b"\x1b[?1;1;0S", &mut pt);
+        assert_eq!(pt, b"\x1b[?1;1;0S");
+        assert_eq!(cmds.len(), 1);
+        match &cmds[0] {
+            GraphicsCommand::Query { response } => {
+                let s = String::from_utf8_lossy(response);
+                assert!(s.starts_with("\x1b[?1;0;"), "resp: {s:?}");
+            }
+            other => panic!("se esperaba Query, vino {other:?}"),
+        }
+    }
+
+    /// Una CSI normal (cursor home `\e[H`) no genera respuesta y pasa intacta.
+    #[test]
+    fn csi_normal_sin_respuesta() {
+        let mut sc = GraphicsScanner::new();
+        let mut pt = Vec::new();
+        let cmds = sc.feed(b"\x1b[H\x1b[2J", &mut pt);
+        assert!(cmds.is_empty());
+        assert_eq!(pt, b"\x1b[H\x1b[2J");
+    }
+
+    /// kitty f=100 (PNG embebido) — el camino real de chafa/icat. Construimos
+    /// un PNG 2×2 con el crate `image`, lo metemos en un APC y verificamos que
+    /// vuelve a salir como RGBA 2×2.
+    #[test]
+    fn kitty_png_embebido() {
+        use base64::Engine;
+        // PNG 2×2: rojo, verde / azul, blanco.
+        let mut img = image::RgbaImage::new(2, 2);
+        img.put_pixel(0, 0, image::Rgba([255, 0, 0, 255]));
+        img.put_pixel(1, 0, image::Rgba([0, 255, 0, 255]));
+        img.put_pixel(0, 1, image::Rgba([0, 0, 255, 255]));
+        img.put_pixel(1, 1, image::Rgba([255, 255, 255, 255]));
+        let mut png = std::io::Cursor::new(Vec::new());
+        image::DynamicImage::ImageRgba8(img)
+            .write_to(&mut png, image::ImageFormat::Png)
+            .unwrap();
+        let b64 = base64::engine::general_purpose::STANDARD.encode(png.into_inner());
+        let seq = format!("\x1b_Gf=100,a=T,c=4,r=2;{b64}\x1b\\");
+
+        let mut sc = GraphicsScanner::new();
+        let mut pt = Vec::new();
+        let cmds = sc.feed(seq.as_bytes(), &mut pt);
+        assert_eq!(cmds.len(), 1);
+        match &cmds[0] {
+            GraphicsCommand::Image { image, cols, rows, .. } => {
+                assert_eq!((image.width, image.height), (2, 2));
+                assert_eq!((*cols, *rows), (4, 2));
+                assert_eq!(&image.rgba[0..4], &[255, 0, 0, 255]); // rojo
+            }
+            other => panic!("se esperaba Image, vino {other:?}"),
+        }
+    }
+
+    /// Transmisión chunked: control + payload en varios APC con `m=1` y el
+    /// último con `m=0`. El payload base64 se concatena y decodifica una vez.
+    #[test]
+    fn kitty_chunked() {
+        use base64::Engine;
+        // 2×1 RGBA crudo = 8 bytes.
+        let raw = [10u8, 11, 12, 13, 20, 21, 22, 23];
+        let b64 = base64::engine::general_purpose::STANDARD.encode(raw);
+        let (a, b) = b64.split_at(b64.len() / 2);
+        // primer chunk: control completo + m=1; segundo: sólo m=0 + resto.
+        let seq = format!("\x1b_Gf=32,s=2,v=1,m=1;{a}\x1b\\\x1b_Gm=0;{b}\x1b\\");
+
+        let mut sc = GraphicsScanner::new();
+        let mut pt = Vec::new();
+        let cmds = sc.feed(seq.as_bytes(), &mut pt);
+        assert_eq!(cmds.len(), 1, "un solo Image al cerrar el último chunk");
+        match &cmds[0] {
+            GraphicsCommand::Image { image, .. } => {
+                assert_eq!((image.width, image.height), (2, 1));
+                assert_eq!(image.rgba, raw.to_vec());
+            }
+            other => panic!("se esperaba Image, vino {other:?}"),
+        }
+    }
+
+    /// Compresión zlib (o=z) sobre RGBA crudo.
+    #[test]
+    fn kitty_zlib() {
+        use base64::Engine;
+        use std::io::Write;
+        let raw = [1u8, 2, 3, 4, 5, 6, 7, 8];
+        let mut enc = flate2::write::ZlibEncoder::new(Vec::new(), flate2::Compression::default());
+        enc.write_all(&raw).unwrap();
+        let compressed = enc.finish().unwrap();
+        let b64 = base64::engine::general_purpose::STANDARD.encode(compressed);
+        let seq = format!("\x1b_Gf=32,s=2,v=1,o=z;{b64}\x1b\\");
+
+        let mut sc = GraphicsScanner::new();
+        let mut pt = Vec::new();
+        let cmds = sc.feed(seq.as_bytes(), &mut pt);
+        assert_eq!(cmds.len(), 1);
+        match &cmds[0] {
+            GraphicsCommand::Image { image, .. } => {
+                assert_eq!(image.rgba, raw.to_vec());
+            }
+            other => panic!("se esperaba Image, vino {other:?}"),
+        }
+    }
+
+    /// Round-trip contra el encoder real `chafa`, en sus dos formatos. Genera
+    /// un PNG, lo pasa por `chafa -f {sixel,kitty}` y verifica que el scanner
+    /// recupera exactamente una imagen coherente — pese a la `CSI` de mostrar/
+    /// ocultar cursor que chafa intercala (debe ir a passthrough) y a que el
+    /// formato kitty viene en chunks. Se salta si chafa no está instalado.
+    #[test]
+    fn chafa_round_trip_real() {
+        use std::io::Write;
+        use std::process::{Command, Stdio};
+
+        // PNG 16×16 con patrón de dos colores.
+        let mut img = image::RgbaImage::new(16, 16);
+        for y in 0..16u32 {
+            for x in 0..16u32 {
+                let c = if (x / 4 + y / 4) % 2 == 0 {
+                    image::Rgba([200, 30, 30, 255])
+                } else {
+                    image::Rgba([30, 30, 200, 255])
+                };
+                img.put_pixel(x, y, c);
+            }
+        }
+        let mut png = std::io::Cursor::new(Vec::new());
+        image::DynamicImage::ImageRgba8(img)
+            .write_to(&mut png, image::ImageFormat::Png)
+            .unwrap();
+        let png = png.into_inner();
+
+        for (fmt, want) in [("sixel", Protocol::Sixel), ("kitty", Protocol::Kitty)] {
+            let mut child = match Command::new("chafa")
+                .args(["-f", fmt, "--size", "20x10", "-"])
+                .stdin(Stdio::piped())
+                .stdout(Stdio::piped())
+                .stderr(Stdio::null())
+                .spawn()
+            {
+                Ok(c) => c,
+                Err(_) => {
+                    eprintln!("chafa no instalado — test saltado");
+                    return;
+                }
+            };
+            child.stdin.take().unwrap().write_all(&png).unwrap();
+            let out = child.wait_with_output().unwrap();
+            assert!(out.status.success(), "chafa -f {fmt} falló");
+
+            // Alimentamos en dos mitades para ejercitar también la frontera de
+            // chunk del scanner sobre datos reales.
+            let mut sc = GraphicsScanner::new();
+            let mut pt = Vec::new();
+            let mid = out.stdout.len() / 2;
+            let mut cmds = sc.feed(&out.stdout[..mid], &mut pt);
+            cmds.extend(sc.feed(&out.stdout[mid..], &mut pt));
+            let imgs: Vec<_> = cmds
+                .iter()
+                .filter_map(|c| match c {
+                    GraphicsCommand::Image { image, protocol, .. } => Some((image, *protocol)),
+                    _ => None,
+                })
+                .collect();
+            assert_eq!(imgs.len(), 1, "fmt={fmt}: se esperaba 1 imagen");
+            let (image, protocol) = imgs[0];
+            assert_eq!(protocol, want, "fmt={fmt}: protocolo");
+            assert!(image.width > 0 && image.height > 0, "fmt={fmt}: dims nulas");
+            assert_eq!(
+                image.rgba.len(),
+                (image.width as usize) * (image.height as usize) * 4,
+                "fmt={fmt}: largo del buffer RGBA"
+            );
+            // El passthrough debe contener la CSI de cursor (no la tragamos).
+            assert!(!pt.is_empty(), "fmt={fmt}: la CSI debió ir a passthrough");
+        }
+    }
+
+    /// Query de capacidad kitty → comando Query con respuesta OK.
+    #[test]
+    fn kitty_query_responde_ok() {
+        let mut sc = GraphicsScanner::new();
+        let mut pt = Vec::new();
+        let cmds = sc.feed(b"\x1b_Gi=31,s=1,v=1,a=q;AAAA\x1b\\", &mut pt);
+        assert_eq!(cmds.len(), 1);
+        match &cmds[0] {
+            GraphicsCommand::Query { response } => {
+                let s = String::from_utf8_lossy(response);
+                assert!(s.contains("i=31"), "respuesta: {s}");
+                assert!(s.contains("OK"), "respuesta: {s}");
+            }
+            other => panic!("se esperaba Query, vino {other:?}"),
+        }
+    }
+}
diff --git a/llimphi-term-graphics/src/sixel.rs b/llimphi-term-graphics/src/sixel.rs
new file mode 100644
index 0000000..698c0b4
--- /dev/null
+++ b/llimphi-term-graphics/src/sixel.rs
@@ -0,0 +1,317 @@
+//! Decodificador sixel (a mano — no hay crate en el workspace).
+//!
+//! Entrada: el cuerpo DCS (sin el `\eP` inicial ni el `\e\\` final). Estructura:
+//! `<params>q` y luego los datos sixel:
+//! - `"Pan;Pad;Ph;Pv` — atributos raster (aspecto + ancho `Ph` × alto `Pv`).
+//! - `#Pc;Pu;Px;Py;Pz` — define el color del registro `Pc` (`Pu=2` ⇒ RGB en
+//!   porcentaje 0..100). `#Pc` solo ⇒ selecciona el registro `Pc`.
+//! - `!Pn <char>` — repite el sixel `<char>` `Pn` veces (RLE).
+//! - `$` — carriage return (vuelve al inicio de la banda, misma `y`).
+//! - `-` — line feed (avanza 6 filas).
+//! - chars `0x3F..=0x7E` — 6 píxeles verticales; bit `i` (LSB = arriba) prende
+//!   la fila `y+i` con el color actual.
+//!
+//! Estrategia de tamaño: si hay atributos raster los usamos; si no, dos
+//! pasadas — la primera mide (`max_x`/`max_y`), la segunda pinta.
+
+use crate::DecodedImage;
+
+/// Tope defensivo de píxeles (16 Mpx ≈ 64 MiB RGBA) para no estallar con un
+/// stream sixel malicioso/roto.
+const MAX_PIXELS: u64 = 16 * 1024 * 1024;
+
+pub fn decode(seq: &[u8]) -> Option<DecodedImage> {
+    let qpos = seq.iter().position(|&b| b == b'q')?;
+    let data = &seq[qpos + 1..];
+
+    // Tamaño: de atributos raster si están; si no, midiendo.
+    let (mut w, mut h) = raster_size(data);
+    if w == 0 || h == 0 {
+        let (mx, my) = measure(data);
+        if w == 0 {
+            w = mx;
+        }
+        if h == 0 {
+            h = my;
+        }
+    }
+    if w == 0 || h == 0 {
+        return None;
+    }
+    if (w as u64) * (h as u64) > MAX_PIXELS {
+        return None;
+    }
+
+    let mut rgba = vec![0u8; (w as usize) * (h as usize) * 4];
+    paint(data, w, h, &mut rgba);
+    Some(DecodedImage {
+        width: w,
+        height: h,
+        rgba,
+    })
+}
+
+/// Lee los atributos raster `"Pan;Pad;Ph;Pv` si aparecen al inicio. Devuelve
+/// `(Ph, Pv)` o `(0,0)` si no hay.
+fn raster_size(data: &[u8]) -> (u32, u32) {
+    let mut i = 0;
+    // saltar whitespace inicial
+    while i < data.len() && (data[i] == b'\n' || data[i] == b'\r' || data[i] == b' ') {
+        i += 1;
+    }
+    if i >= data.len() || data[i] != b'"' {
+        return (0, 0);
+    }
+    let (nums, _) = parse_nums(data, i + 1);
+    if nums.len() >= 4 {
+        (nums[2], nums[3])
+    } else {
+        (0, 0)
+    }
+}
+
+/// Pasada de medición: corre la máquina sin pintar, devolviendo
+/// `(max_x+1, max_y+1)`.
+fn measure(data: &[u8]) -> (u32, u32) {
+    let mut x: u32 = 0;
+    let mut y0: u32 = 0;
+    let mut max_x: u32 = 0;
+    let mut max_y: u32 = 0;
+    let mut i = 0;
+    while i < data.len() {
+        let b = data[i];
+        match b {
+            b'"' | b'#' => {
+                let (_, ni) = parse_nums(data, i + 1);
+                i = ni;
+            }
+            b'!' => {
+                let (nums, ni) = parse_nums(data, i + 1);
+                i = ni;
+                let count = nums.first().copied().unwrap_or(0).max(1);
+                if i < data.len() {
+                    let c = data[i];
+                    i += 1;
+                    if (0x3f..=0x7e).contains(&c) {
+                        let bits = c - 0x3f;
+                        if bits != 0 {
+                            max_x = max_x.max(x + count - 1);
+                            max_y = max_y.max(y0 + top_bit(bits));
+                        }
+                        x += count;
+                    }
+                }
+            }
+            b'$' => {
+                x = 0;
+                i += 1;
+            }
+            b'-' => {
+                x = 0;
+                y0 += 6;
+                i += 1;
+            }
+            0x3f..=0x7e => {
+                let bits = b - 0x3f;
+                if bits != 0 {
+                    max_x = max_x.max(x);
+                    max_y = max_y.max(y0 + top_bit(bits));
+                }
+                x += 1;
+                i += 1;
+            }
+            _ => i += 1,
+        }
+    }
+    (max_x + 1, max_y + 1)
+}
+
+/// Pasada de pintura sobre `rgba` (ya dimensionado a `w`×`h`).
+fn paint(data: &[u8], w: u32, h: u32, rgba: &mut [u8]) {
+    let mut palette = default_palette();
+    let mut cur: u16 = 0;
+    let mut x: u32 = 0;
+    let mut y0: u32 = 0;
+    let mut i = 0;
+    while i < data.len() {
+        let b = data[i];
+        match b {
+            b'"' => {
+                let (_, ni) = parse_nums(data, i + 1);
+                i = ni;
+            }
+            b'#' => {
+                let (nums, ni) = parse_nums(data, i + 1);
+                i = ni;
+                if let Some(&pc) = nums.first() {
+                    cur = pc as u16;
+                    if nums.len() >= 5 {
+                        let pu = nums[1];
+                        let (px, py, pz) = (nums[2], nums[3], nums[4]);
+                        let color = if pu == 2 {
+                            [pct(px), pct(py), pct(pz), 255]
+                        } else {
+                            // Pu=1 (HLS) es raro; aproximamos como RGB para no
+                            // bajar a negro. Suficiente para chafa/img2sixel
+                            // que emiten siempre Pu=2.
+                            [pct(px), pct(py), pct(pz), 255]
+                        };
+                        palette.insert(cur, color);
+                    }
+                }
+            }
+            b'!' => {
+                let (nums, ni) = parse_nums(data, i + 1);
+                i = ni;
+                let count = nums.first().copied().unwrap_or(0).max(1);
+                if i < data.len() {
+                    let c = data[i];
+                    i += 1;
+                    if (0x3f..=0x7e).contains(&c) {
+                        let bits = c - 0x3f;
+                        let color = *palette.get(&cur).unwrap_or(&[0, 0, 0, 255]);
+                        for _ in 0..count {
+                            put(rgba, w, h, x, y0, bits, color);
+                            x += 1;
+                        }
+                    }
+                }
+            }
+            b'$' => {
+                x = 0;
+                i += 1;
+            }
+            b'-' => {
+                x = 0;
+                y0 += 6;
+                i += 1;
+            }
+            0x3f..=0x7e => {
+                let bits = b - 0x3f;
+                let color = *palette.get(&cur).unwrap_or(&[0, 0, 0, 255]);
+                put(rgba, w, h, x, y0, bits, color);
+                x += 1;
+                i += 1;
+            }
+            _ => i += 1,
+        }
+    }
+}
+
+/// Pinta los 6 píxeles verticales de un sixel en `(x, y0..y0+6)`.
+fn put(rgba: &mut [u8], w: u32, h: u32, x: u32, y0: u32, bits: u8, color: [u8; 4]) {
+    if x >= w {
+        return;
+    }
+    for r in 0..6u32 {
+        if bits & (1 << r) != 0 {
+            let y = y0 + r;
+            if y >= h {
+                continue;
+            }
+            let idx = ((y as usize) * (w as usize) + x as usize) * 4;
+            rgba[idx..idx + 4].copy_from_slice(&color);
+        }
+    }
+}
+
+/// Fila más alta (0-based) prendida por `bits` (LSB = arriba).
+fn top_bit(bits: u8) -> u32 {
+    let mut top = 0;
+    for r in 0..6u32 {
+        if bits & (1 << r) != 0 {
+            top = r;
+        }
+    }
+    top
+}
+
+/// Porcentaje sixel (0..100) → byte (0..255).
+fn pct(v: u32) -> u8 {
+    ((v.min(100) * 255 + 50) / 100) as u8
+}
+
+/// Lee una secuencia de enteros separados por `;` a partir de `start`.
+/// Devuelve los números y el índice del primer byte no consumido.
+fn parse_nums(data: &[u8], start: usize) -> (Vec<u32>, usize) {
+    let mut nums = Vec::new();
+    let mut i = start;
+    let mut cur: u32 = 0;
+    let mut any = false;
+    loop {
+        if i >= data.len() {
+            break;
+        }
+        let b = data[i];
+        if b.is_ascii_digit() {
+            cur = cur.saturating_mul(10).saturating_add((b - b'0') as u32);
+            any = true;
+            i += 1;
+        } else if b == b';' {
+            nums.push(cur);
+            cur = 0;
+            any = true;
+            i += 1;
+        } else {
+            break;
+        }
+    }
+    if any {
+        nums.push(cur);
+    }
+    (nums, i)
+}
+
+/// Paleta por defecto (negro en el registro 0; el resto se llena con las
+/// definiciones `#Pc;2;…` del stream). chafa/img2sixel siempre definen sus
+/// colores, así que no hace falta la paleta VT340 completa.
+fn default_palette() -> std::collections::HashMap<u16, [u8; 4]> {
+    let mut m = std::collections::HashMap::new();
+    m.insert(0, [0, 0, 0, 255]);
+    m
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    /// Sixel mínimo 1×6: un color RGB puro y un carácter con todos los bits.
+    #[test]
+    fn sixel_columna_1x6() {
+        // ESC P ya removido. Params vacíos + 'q'. Color 0 = rojo (100,0,0).
+        // '~' = 0x7e → bits = 0x3f = 0b111111 → 6 px prendidos.
+        let body = b"q#0;2;100;0;0~";
+        let img = decode(body).expect("decodifica");
+        assert_eq!((img.width, img.height), (1, 6));
+        // Todos los 6 px rojos opacos.
+        for px in img.rgba.chunks_exact(4) {
+            assert_eq!(px, &[255, 0, 0, 255]);
+        }
+    }
+
+    /// RLE: `!5~` = 5 columnas de 6 px.
+    #[test]
+    fn sixel_rle_ancho() {
+        let body = b"q#0;2;0;100;0!5~";
+        let img = decode(body).expect("decodifica");
+        assert_eq!((img.width, img.height), (5, 6));
+        // verde
+        assert_eq!(&img.rgba[0..4], &[0, 255, 0, 255]);
+    }
+
+    /// Atributos raster fijan el tamaño aunque los datos sean más chicos.
+    #[test]
+    fn sixel_raster_attrs() {
+        let body = b"q\"1;1;10;12#0;2;0;0;100~";
+        let img = decode(body).expect("decodifica");
+        assert_eq!((img.width, img.height), (10, 12));
+    }
+
+    /// LF `-` baja una banda (6 px) → alto 12.
+    #[test]
+    fn sixel_dos_bandas() {
+        let body = b"q#0;2;100;100;100~-~";
+        let img = decode(body).expect("decodifica");
+        assert_eq!(img.height, 12);
+    }
+}
diff --git a/llimphi-test/Cargo.toml b/llimphi-test/Cargo.toml
new file mode 100644
index 0000000..02908df
--- /dev/null
+++ b/llimphi-test/Cargo.toml
@@ -0,0 +1,20 @@
+[package]
+name = "llimphi-test"
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+authors.workspace = true
+publish.workspace = true
+description = "llimphi-test — arnés de golden-image headless y determinista para Llimphi. Renderiza un `View` a una textura por el adapter de SOFTWARE (llvmpipe/lavapipe, mismo píxel host-a-host y en CI) y lo diffea contra un golden con tolerancia perceptual. Convierte 'renderiza y mira' (caro en tokens, subjetivo) en `assert_golden!` (barato, objetivo). Certifica cambios visuales por texto (DiffStats) según CLAUDE.md §8."
+
+[dependencies]
+llimphi-hal = { path = "../llimphi-hal", version = "0.1.0" }
+llimphi-raster = { path = "../llimphi-raster", version = "0.1.0" }
+llimphi-compositor = { path = "../llimphi-compositor", version = "0.1.0" }
+llimphi-text = { path = "../llimphi-text", version = "0.1.0" }
+llimphi-layout = { path = "../llimphi-layout", version = "0.1.0" }
+pollster = { workspace = true }
+image = { workspace = true }
+
+[dev-dependencies]
+llimphi-theme = { path = "../llimphi-theme", version = "0.1.0" }
diff --git a/llimphi-test/LEEME.md b/llimphi-test/LEEME.md
new file mode 100644
index 0000000..12b9153
--- /dev/null
+++ b/llimphi-test/LEEME.md
@@ -0,0 +1,35 @@
+# llimphi-test
+
+*Read this in English: [README.md](README.md).*
+
+# llimphi-test — arnés golden-image headless y determinista
+
+El problema que cierra: en `PLAN-NUCLEO-RETENIDO.md` y `PARIDAD-FLUTTER.md`
+cada bloque termina con "falta verificar en metal / PNG-diff pendiente", y
+CLAUDE.md §8 prohíbe renderizar-y-mirar de rutina por costo de tokens. Este
+crate convierte esa verificación cara y subjetiva en `assert_golden!(...)`:
+barata, objetiva, en CI, certificada por **texto** (`DiffStats`).
+
+## Determinismo
+
+El `Harness` pide un `Hal` por el adapter de **software**
+(`llimphi_hal::Hal::new_headless(true)`): el rasterizador llvmpipe/lavapipe
+(deviceType CPU) produce el **mismo píxel** en cualquier host y en CI, no
+atado a la GPU de quien generó el golden. Si la máquina no tiene un fallback
+adapter, cae al adapter normal y la tolerancia perceptual de `GoldenConfig`
+absorbe la diferencia de vendor.
+
+## Uso típico (dentro de un test de otro crate)
+```ignore
+use llimphi_test::assert_golden;
+#[test]
+fn card_con_sombra() {
+    let v = mi_widget::card(...);
+    assert_golden!("card_con_sombra", v, 400, 240); // tests/goldens/card_con_sombra.png
+}
+```
+Regenerar los goldens: `LLIMPHI_GOLDEN_UPDATE=1 cargo test`.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../LEEME.md).
diff --git a/llimphi-test/README.md b/llimphi-test/README.md
new file mode 100644
index 0000000..ebf783a
--- /dev/null
+++ b/llimphi-test/README.md
@@ -0,0 +1,35 @@
+# llimphi-test
+
+Headless, deterministic golden-image harness.
+
+The problem it closes: in `PLAN-NUCLEO-RETENIDO.md` and `PARIDAD-FLUTTER.md`
+every block used to end with "still to verify on metal / PNG diff pending", and
+CLAUDE.md §8 forbids routine render-and-look because of its token cost. This
+crate turns that expensive, subjective verification into `assert_golden!(...)`:
+cheap, objective, in CI, certified by **text** (`DiffStats`).
+
+## Determinism
+
+The `Harness` asks for a `Hal` through the **software** adapter
+(`llimphi_hal::Hal::new_headless(true)`): the llvmpipe/lavapipe rasterizer
+(deviceType CPU) produces the **same pixel** on any host and in CI, not tied to
+the GPU of whoever generated the golden. If the machine has no fallback adapter
+it falls back to the normal one, and `GoldenConfig`'s perceptual tolerance
+absorbs the vendor difference.
+
+## Typical use (inside another crate's test)
+
+```ignore
+use llimphi_test::assert_golden;
+#[test]
+fn card_with_shadow() {
+    let v = my_widget::card(...);
+    assert_golden!("card_with_shadow", v, 400, 240); // tests/goldens/card_with_shadow.png
+}
+```
+
+Regenerate the goldens with `LLIMPHI_GOLDEN_UPDATE=1 cargo test`.
+
+---
+
+Part of **llimphi** — see [llimphi](../README.md).
diff --git a/llimphi-test/src/lib.rs b/llimphi-test/src/lib.rs
new file mode 100644
index 0000000..7c28e2b
--- /dev/null
+++ b/llimphi-test/src/lib.rs
@@ -0,0 +1,419 @@
+//! # llimphi-test — arnés golden-image headless y determinista
+//!
+//! El problema que cierra: en `PLAN-NUCLEO-RETENIDO.md` y `PARIDAD-FLUTTER.md`
+//! cada bloque termina con "falta verificar en metal / PNG-diff pendiente", y
+//! CLAUDE.md §8 prohíbe renderizar-y-mirar de rutina por costo de tokens. Este
+//! crate convierte esa verificación cara y subjetiva en `assert_golden!(...)`:
+//! barata, objetiva, en CI, certificada por **texto** ([`DiffStats`]).
+//!
+//! ## Determinismo
+//!
+//! El [`Harness`] pide un `Hal` por el adapter de **software**
+//! ([`llimphi_hal::Hal::new_headless(true)`]): el rasterizador llvmpipe/lavapipe
+//! (deviceType CPU) produce el **mismo píxel** en cualquier host y en CI, no
+//! atado a la GPU de quien generó el golden. Si la máquina no tiene un fallback
+//! adapter, cae al adapter normal y la tolerancia perceptual de [`GoldenConfig`]
+//! absorbe la diferencia de vendor.
+//!
+//! ## Uso típico (dentro de un test de otro crate)
+//!
+//! ```ignore
+//! use llimphi_test::assert_golden;
+//! #[test]
+//! fn card_con_sombra() {
+//!     let v = mi_widget::card(...);
+//!     assert_golden!("card_con_sombra", v, 400, 240); // tests/goldens/card_con_sombra.png
+//! }
+//! ```
+//!
+//! Regenerar los goldens: `LLIMPHI_GOLDEN_UPDATE=1 cargo test`.
+
+use std::cell::RefCell;
+use std::mem::ManuallyDrop;
+use std::path::Path;
+
+use llimphi_compositor::{measure_text_node, mount, paint, View};
+use llimphi_hal::{wgpu, Hal};
+use llimphi_layout::taffy;
+use llimphi_layout::LayoutTree;
+use llimphi_raster::peniko::Color;
+use llimphi_raster::{vello, Renderer};
+use llimphi_text::Typesetter;
+
+const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
+
+/// Un frame rasterizado en memoria: RGBA8 sin padding, `w*h*4` bytes.
+#[derive(Clone)]
+pub struct Rendered {
+    pub w: u32,
+    pub h: u32,
+    /// RGBA8, fila mayor, `w*h*4` bytes exactos (sin el padding de wgpu).
+    pub rgba: Vec<u8>,
+}
+
+impl Rendered {
+    /// Guarda a PNG (formato inferido por la extensión).
+    pub fn save(&self, path: &Path) -> Result<(), String> {
+        let img = image::RgbaImage::from_raw(self.w, self.h, self.rgba.clone())
+            .ok_or_else(|| "buffer RGBA de tamaño inconsistente".to_string())?;
+        img.save(path).map_err(|e| e.to_string())
+    }
+
+    /// Carga un PNG a `Rendered` (lo normaliza a RGBA8).
+    pub fn load(path: &Path) -> Result<Self, String> {
+        let img = image::open(path).map_err(|e| e.to_string())?.to_rgba8();
+        Ok(Self { w: img.width(), h: img.height(), rgba: img.into_raw() })
+    }
+}
+
+/// Motor de render headless reutilizable: un `Hal` + `Renderer` + `Typesetter`
+/// vivos para muchos frames. Caro de construir (pide adapter), barato de reusar.
+pub struct Harness {
+    hal: Hal,
+    renderer: Renderer,
+    ts: Typesetter,
+}
+
+impl Harness {
+    /// Construye el arnés sobre el adapter de software (determinista). Ver
+    /// [`llimphi_hal::Hal::new_headless`].
+    pub fn new() -> Result<Self, String> {
+        let hal = pollster::block_on(Hal::new_headless(true)).map_err(|e| e.to_string())?;
+        let renderer = Renderer::new(&hal).map_err(|e| e.to_string())?;
+        Ok(Self { hal, renderer, ts: Typesetter::new() })
+    }
+
+    /// Rasteriza `view` en un lienzo `w×h` sobre fondo `bg` y devuelve el RGBA8.
+    /// Mismo pipeline que las apps reales: `mount → compute_with_measure → paint
+    /// → Renderer::render_to_view`, más el readback de la textura a CPU.
+    pub fn render<Msg: Clone>(&mut self, view: View<Msg>, w: u32, h: u32, bg: Color) -> Rendered {
+        let mut layout = LayoutTree::new();
+        let mounted = mount(&mut layout, view);
+        let ts = &mut self.ts;
+        let computed = {
+            let tmap = &mounted.text_measures;
+            layout
+                .compute_with_measure(mounted.root, (w as f32, h as f32), |nid, known, avail| {
+                    match tmap.get(&nid) {
+                        Some(tm) => measure_text_node(ts, tm, known, avail),
+                        None => taffy::Size::ZERO,
+                    }
+                })
+                .expect("compute_with_measure")
+        };
+        let mut scene = vello::Scene::new();
+        paint(&mut scene, &mounted, &computed, ts, None, None);
+
+        let target = self.hal.device.create_texture(&wgpu::TextureDescriptor {
+            label: Some("llimphi-test-target"),
+            size: wgpu::Extent3d { width: w, height: h, depth_or_array_layers: 1 },
+            mip_level_count: 1,
+            sample_count: 1,
+            dimension: wgpu::TextureDimension::D2,
+            format: FMT,
+            usage: wgpu::TextureUsages::STORAGE_BINDING
+                | wgpu::TextureUsages::RENDER_ATTACHMENT
+                | wgpu::TextureUsages::COPY_SRC,
+            view_formats: &[],
+        });
+        let tex_view = target.create_view(&wgpu::TextureViewDescriptor::default());
+        self.renderer
+            .render_to_view(&self.hal, &scene, &tex_view, w, h, bg)
+            .expect("render_to_view");
+        let rgba = readback(&self.hal, &target, w, h);
+        Rendered { w, h, rgba }
+    }
+}
+
+impl Harness {
+    /// Golden-testea contenido del backend **GPU-directo** (`GpuBatch` /
+    /// `gpu_paint_with`), que NO pasa por el `View`/vello de [`render`](Self::render).
+    /// Crea un target `Rgba8Unorm`, lo limpia a `bg`, y le pasa a `f` el
+    /// `(device, queue, encoder, view, viewport)` — la misma firma que
+    /// `View::gpu_paint_with` — para que pinte directo; después lee de vuelta.
+    /// El caller típico arma un `GpuBatch` y hace `flush(..., LoadOp::Load)`
+    /// (compone sobre el `bg` ya limpiado, igual que sobre lo que vello pintó en
+    /// la app real). Cierra el hueco "el path GPU-directo no tenía cobertura de
+    /// regresión visual" (antes sólo el smoke test "no panic").
+    pub fn render_gpu<F>(&mut self, w: u32, h: u32, bg: Color, f: F) -> Rendered
+    where
+        F: FnOnce(&wgpu::Device, &wgpu::Queue, &mut wgpu::CommandEncoder, &wgpu::TextureView, (f32, f32)),
+    {
+        let target = self.hal.device.create_texture(&wgpu::TextureDescriptor {
+            label: Some("llimphi-test-gpu-target"),
+            size: wgpu::Extent3d { width: w, height: h, depth_or_array_layers: 1 },
+            mip_level_count: 1,
+            sample_count: 1,
+            dimension: wgpu::TextureDimension::D2,
+            format: FMT,
+            usage: wgpu::TextureUsages::RENDER_ATTACHMENT | wgpu::TextureUsages::COPY_SRC,
+            view_formats: &[],
+        });
+        let tex_view = target.create_view(&wgpu::TextureViewDescriptor::default());
+        let mut enc = self
+            .hal
+            .device
+            .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+        // Pre-clear a `bg` (como haría vello en la app real antes del gpu_paint_with).
+        let [r, g, b, a] = bg.components;
+        {
+            let _clear = enc.begin_render_pass(&wgpu::RenderPassDescriptor {
+                label: Some("llimphi-test-gpu-clear"),
+                color_attachments: &[Some(wgpu::RenderPassColorAttachment {
+                    view: &tex_view,
+                    resolve_target: None,
+                    depth_slice: None,
+                    ops: wgpu::Operations {
+                        load: wgpu::LoadOp::Clear(wgpu::Color {
+                            r: r as f64,
+                            g: g as f64,
+                            b: b as f64,
+                            a: a as f64,
+                        }),
+                        store: wgpu::StoreOp::Store,
+                    },
+                })],
+                depth_stencil_attachment: None,
+                timestamp_writes: None,
+                occlusion_query_set: None,
+            });
+        }
+        f(&self.hal.device, &self.hal.queue, &mut enc, &tex_view, (w as f32, h as f32));
+        self.hal.queue.submit(std::iter::once(enc.finish()));
+        let rgba = readback(&self.hal, &target, w, h);
+        Rendered { w, h, rgba }
+    }
+}
+
+/// Copia la textura a un buffer mapeable, quita el padding de fila de wgpu y
+/// devuelve RGBA8 compacto. Patrón idéntico al `write_png` de los examples.
+fn readback(hal: &Hal, target: &wgpu::Texture, w: u32, h: u32) -> Vec<u8> {
+    let unpadded = (w * 4) as usize;
+    let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize;
+    let padded = unpadded.div_ceil(align) * align;
+    let buf = hal.device.create_buffer(&wgpu::BufferDescriptor {
+        label: Some("llimphi-test-readback"),
+        size: (padded * h as usize) as u64,
+        usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
+        mapped_at_creation: false,
+    });
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    enc.copy_texture_to_buffer(
+        wgpu::TexelCopyTextureInfo {
+            texture: target,
+            mip_level: 0,
+            origin: wgpu::Origin3d::ZERO,
+            aspect: wgpu::TextureAspect::All,
+        },
+        wgpu::TexelCopyBufferInfo {
+            buffer: &buf,
+            layout: wgpu::TexelCopyBufferLayout {
+                offset: 0,
+                bytes_per_row: Some(padded as u32),
+                rows_per_image: Some(h),
+            },
+        },
+        wgpu::Extent3d { width: w, height: h, depth_or_array_layers: 1 },
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let slice = buf.slice(..);
+    let (tx, rx) = std::sync::mpsc::channel();
+    slice.map_async(wgpu::MapMode::Read, move |r| {
+        let _ = tx.send(r);
+    });
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    rx.recv().unwrap().unwrap();
+    let data = slice.get_mapped_range();
+    let mut out = Vec::with_capacity((w * h * 4) as usize);
+    for row in 0..h as usize {
+        let s = row * padded;
+        out.extend_from_slice(&data[s..s + unpadded]);
+    }
+    drop(data);
+    buf.unmap();
+    out
+}
+
+// ───────────────────────────── diff ─────────────────────────────
+
+/// Estadísticas de un diff, imprimibles como **texto** — esto es lo que
+/// certifica sin mirar el PNG (CLAUDE.md §8: "stats numéricas como texto").
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub struct DiffStats {
+    /// Píxeles cuyo mayor delta de canal superó el umbral.
+    pub differing_pixels: u64,
+    pub total_pixels: u64,
+    /// Máximo delta de canal (0-255) observado en toda la imagen.
+    pub max_delta: u8,
+    /// `differing_pixels / total_pixels`.
+    pub fraction: f64,
+}
+
+/// Compara dos frames píxel a píxel. Un píxel "difiere" si el máximo de los
+/// deltas absolutos de sus cuatro canales supera `max_channel_delta`. Devuelve
+/// un heatmap (rojo ∝ delta sobre gris oscuro) + las stats. Los frames deben
+/// tener las mismas dimensiones.
+pub fn diff(a: &Rendered, b: &Rendered, max_channel_delta: u8) -> Result<(Rendered, DiffStats), String> {
+    if a.w != b.w || a.h != b.h {
+        return Err(format!("dimensiones distintas: {}×{} vs {}×{}", a.w, a.h, b.w, b.h));
+    }
+    let total = (a.w * a.h) as u64;
+    let mut differing = 0u64;
+    let mut max_delta = 0u8;
+    let mut heat = vec![0u8; a.rgba.len()];
+    for (i, (pa, pb)) in a.rgba.chunks_exact(4).zip(b.rgba.chunks_exact(4)).enumerate() {
+        let d = (0..4).map(|c| pa[c].abs_diff(pb[c])).max().unwrap_or(0);
+        max_delta = max_delta.max(d);
+        let o = i * 4;
+        if d > max_channel_delta {
+            differing += 1;
+            heat[o] = 255; // R ∝ presencia de diff
+            heat[o + 1] = 30;
+            heat[o + 2] = 30;
+            heat[o + 3] = 255;
+        } else {
+            heat[o] = 20; // gris oscuro = sin diff
+            heat[o + 1] = 20;
+            heat[o + 2] = 20;
+            heat[o + 3] = 255;
+        }
+    }
+    let stats = DiffStats {
+        differing_pixels: differing,
+        total_pixels: total,
+        max_delta,
+        fraction: differing as f64 / total.max(1) as f64,
+    };
+    Ok((Rendered { w: a.w, h: a.h, rgba: heat }, stats))
+}
+
+// ───────────────────────────── golden ─────────────────────────────
+
+/// Tolerancia de comparación golden. Default pensado para el adapter de
+/// software: casi bit-exacto, con un colchón mínimo para versiones distintas
+/// de LLVM/Mesa entre la máquina que generó el golden y la que lo verifica.
+#[derive(Debug, Clone, Copy)]
+pub struct GoldenConfig {
+    /// Delta de canal (0-255) por debajo del cual un píxel NO cuenta como diff.
+    pub max_channel_delta: u8,
+    /// Fracción de píxeles diferentes tolerada antes de fallar.
+    pub max_diff_fraction: f64,
+}
+
+impl Default for GoldenConfig {
+    fn default() -> Self {
+        Self { max_channel_delta: 4, max_diff_fraction: 0.001 }
+    }
+}
+
+/// Compara `rendered` contra el golden en `path`.
+///
+/// - `LLIMPHI_GOLDEN_UPDATE=1` en el entorno → **reescribe** el golden y pasa.
+/// - Golden ausente y sin modo update → error (junto al golden queda el
+///   `.actual.png` para revisar y promover con el modo update).
+/// - Presente → diff con `cfg`; si supera la tolerancia, escribe `.actual.png`
+///   y `.diff.png` al lado y devuelve error con las [`DiffStats`].
+pub fn compare_golden(path: &Path, rendered: &Rendered, cfg: &GoldenConfig) -> Result<(), String> {
+    let update = std::env::var("LLIMPHI_GOLDEN_UPDATE").map(|v| v == "1").unwrap_or(false);
+    if update {
+        if let Some(dir) = path.parent() {
+            std::fs::create_dir_all(dir).map_err(|e| e.to_string())?;
+        }
+        rendered.save(path)?;
+        return Ok(());
+    }
+    if !path.exists() {
+        let actual = with_suffix(path, "actual");
+        let _ = rendered.save(&actual);
+        return Err(format!(
+            "golden ausente: {path:?}. Escribe {actual:?} para revisar; \
+             promovelo con LLIMPHI_GOLDEN_UPDATE=1"
+        ));
+    }
+    let golden = Rendered::load(path)?;
+    let (heat, stats) = diff(&golden, rendered, cfg.max_channel_delta)?;
+    if stats.fraction > cfg.max_diff_fraction {
+        let actual = with_suffix(path, "actual");
+        let dpng = with_suffix(path, "diff");
+        let _ = rendered.save(&actual);
+        let _ = heat.save(&dpng);
+        return Err(format!(
+            "golden {path:?}: {} / {} px difieren (frac {:.5} > {:.5}), max_delta {}. \
+             Ver {actual:?} y {dpng:?}",
+            stats.differing_pixels, stats.total_pixels, stats.fraction, cfg.max_diff_fraction, stats.max_delta
+        ));
+    }
+    Ok(())
+}
+
+fn with_suffix(path: &Path, suffix: &str) -> std::path::PathBuf {
+    let stem = path.file_stem().and_then(|s| s.to_str()).unwrap_or("golden");
+    let parent = path.parent().unwrap_or_else(|| Path::new("."));
+    parent.join(format!("{stem}.{suffix}.png"))
+}
+
+// ───────────────────────── harness compartido ─────────────────────────
+
+thread_local! {
+    // `ManuallyDrop`: el `Hal` envuelve una `wgpu::Instance` cuyo teardown sobre
+    // Vulkan/llvmpipe al cerrar el hilo (destructor de TLS) paniquea —el mismo
+    // teardown frágil que `Hal::new` documenta para GL. Un proceso de test que
+    // sale no necesita liberar la GPU, así que NO soltamos el arnés: se leakea al
+    // salir el proceso (barato, seguro) en vez de crashear en el destructor.
+    static TL_HARNESS: RefCell<Option<ManuallyDrop<Harness>>> = const { RefCell::new(None) };
+}
+
+/// Corre `f` con el [`Harness`] del hilo actual (lo crea perezosamente). Un
+/// arnés por hilo evita compartir el `Typesetter`/`Hal` entre threads de test.
+pub fn with_harness<R>(f: impl FnOnce(&mut Harness) -> R) -> R {
+    TL_HARNESS.with(|h| {
+        let mut b = h.borrow_mut();
+        if b.is_none() {
+            *b = Some(ManuallyDrop::new(
+                Harness::new().expect("crear Harness de llimphi-test"),
+            ));
+        }
+        f(b.as_mut().unwrap())
+    })
+}
+
+/// Fondo por defecto de `assert_golden!` — negro opaco.
+pub fn default_bg() -> Color {
+    Color::from_rgba8(0, 0, 0, 255)
+}
+
+/// Rasteriza `view` con el arnés compartido y lo compara contra el golden en
+/// `path`. Paniquea (fallo de test) si supera la tolerancia. Ver
+/// [`compare_golden`]. Usar el macro [`assert_golden!`] para el caso común.
+pub fn assert_golden_at<Msg: Clone>(
+    path: &Path,
+    view: View<Msg>,
+    w: u32,
+    h: u32,
+    bg: Color,
+    cfg: GoldenConfig,
+) {
+    let rendered = with_harness(|hn| hn.render(view, w, h, bg));
+    if let Err(e) = compare_golden(path, &rendered, &cfg) {
+        panic!("{e}");
+    }
+}
+
+/// `assert_golden!("nombre", view, w, h[, bg])` — compara contra
+/// `<crate>/tests/goldens/nombre.png` con la tolerancia default. El path usa el
+/// `CARGO_MANIFEST_DIR` del crate que invoca el macro (no el de llimphi-test).
+#[macro_export]
+macro_rules! assert_golden {
+    ($name:expr, $view:expr, $w:expr, $h:expr) => {
+        $crate::assert_golden!($name, $view, $w, $h, $crate::default_bg())
+    };
+    ($name:expr, $view:expr, $w:expr, $h:expr, $bg:expr) => {{
+        let path = ::std::path::Path::new(env!("CARGO_MANIFEST_DIR"))
+            .join("tests")
+            .join("goldens")
+            .join(format!("{}.png", $name));
+        $crate::assert_golden_at(&path, $view, $w, $h, $bg, $crate::GoldenConfig::default());
+    }};
+}
diff --git a/llimphi-test/tests/goldens/card_tier1.png b/llimphi-test/tests/goldens/card_tier1.png
new file mode 100644
index 0000000..510c6fe
Binary files /dev/null and b/llimphi-test/tests/goldens/card_tier1.png differ
diff --git a/llimphi-test/tests/goldens/starfield_gpu.png b/llimphi-test/tests/goldens/starfield_gpu.png
new file mode 100644
index 0000000..539839c
Binary files /dev/null and b/llimphi-test/tests/goldens/starfield_gpu.png differ
diff --git a/llimphi-test/tests/gpu_golden.rs b/llimphi-test/tests/gpu_golden.rs
new file mode 100644
index 0000000..20bd088
--- /dev/null
+++ b/llimphi-test/tests/gpu_golden.rs
@@ -0,0 +1,45 @@
+//! Golden del backend **GPU-directo** vía `Harness::render_gpu`. Cierra el hueco
+//! "el path GPU-directo no tenía cobertura de regresión visual" (antes sólo el
+//! smoke test "no panic" de llimphi-raster). Un starfield determinista de discos
+//! con AA por SDF — el caso canónico denso del SDD §"GPU directo". Si el
+//! rasterizado de discos/AA/color regresiona, el golden falla con DiffStats.
+//!
+//! Regenerar: `LLIMPHI_GOLDEN_UPDATE=1 cargo test -p llimphi-test`.
+
+use std::path::Path;
+
+use llimphi_hal::wgpu;
+use llimphi_raster::gpu::{GpuBatch, GpuPipelines};
+use llimphi_raster::peniko::Color;
+use llimphi_test::{compare_golden, with_harness, GoldenConfig};
+
+#[test]
+fn golden_starfield_gpu_directo() {
+    let rendered = with_harness(|h| {
+        h.render_gpu(320, 200, Color::from_rgba8(6, 8, 16, 255), |device, queue, enc, view, vp| {
+            let pipelines = GpuPipelines::new(device, wgpu::TextureFormat::Rgba8Unorm);
+            let mut batch = GpuBatch::new(&pipelines);
+            // Starfield determinista (LCG con seed fijo → golden reproducible).
+            let mut s: u32 = 0x1234_5678;
+            let lcg = |s: &mut u32| -> f32 {
+                *s = s.wrapping_mul(1_664_525).wrapping_add(1_013_904_223);
+                (*s >> 8) as f32 / 16_777_216.0
+            };
+            for _ in 0..300 {
+                let x = lcg(&mut s) * vp.0;
+                let y = lcg(&mut s) * vp.1;
+                let bright = 0.3 + lcg(&mut s) * 0.7;
+                let t = lcg(&mut s);
+                // Blanco-azulado a amarillo suave, alpha ∝ brillo.
+                let col = Color::new([0.85 + 0.15 * t, 0.88 + 0.10 * (1.0 - t), 0.95, bright]);
+                let r = 0.8 + bright * 1.6;
+                batch.add_disc(x, y, r, col);
+            }
+            batch.flush(device, queue, enc, view, vp, wgpu::LoadOp::Load);
+        })
+    });
+    let path = Path::new(env!("CARGO_MANIFEST_DIR")).join("tests/goldens/starfield_gpu.png");
+    if let Err(e) = compare_golden(&path, &rendered, &GoldenConfig::default()) {
+        panic!("{e}");
+    }
+}
diff --git a/llimphi-test/tests/self.rs b/llimphi-test/tests/self.rs
new file mode 100644
index 0000000..02be94f
--- /dev/null
+++ b/llimphi-test/tests/self.rs
@@ -0,0 +1,115 @@
+//! Self-tests del arnés: determinismo del readback, detección de diff, y un
+//! golden real de una card (sombra + gradiente + borde + radio) que ejercita
+//! las primitivas del Tier 1. Correr `LLIMPHI_GOLDEN_UPDATE=1 cargo test -p
+//! llimphi-test` para (re)generar los goldens en `tests/goldens/`.
+
+use llimphi_compositor::{Shadow, View};
+use llimphi_layout::taffy::prelude::{length, percent, FlexDirection, Size, Style};
+use llimphi_layout::taffy::{AlignItems, JustifyContent, Rect};
+use llimphi_raster::peniko::{Color, Gradient};
+use llimphi_raster::vello::kurbo::Point;
+use llimphi_test::{assert_golden, diff, with_harness};
+
+fn rgb(r: u8, g: u8, b: u8) -> Color {
+    Color::from_rgba8(r, g, b, 255)
+}
+
+/// Rect coloreado simple — para determinismo y diff.
+fn swatch(color: Color) -> View<()> {
+    View::<()>::new(Style {
+        size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+        ..Default::default()
+    })
+    .fill(color)
+}
+
+/// Card centrada con sombra + gradiente + borde + radio + un texto. Ejercita
+/// las primitivas visuales del Tier 1 en una sola escena.
+fn card() -> View<()> {
+    let inner = View::<()>::new(Style {
+        size: Size { width: length(220.0_f32), height: length(120.0_f32) },
+        align_items: Some(AlignItems::Center),
+        justify_content: Some(JustifyContent::Center),
+        ..Default::default()
+    })
+    .fill_gradient(
+        Gradient::new_linear(Point::new(0.0, 0.0), Point::new(1.0, 1.0))
+            .with_stops([rgb(90, 120, 220), rgb(40, 60, 120)].as_slice()),
+    )
+    .radius(16.0)
+    .border(2.0, rgb(200, 210, 255))
+    .shadow(Shadow {
+        blur: 18.0,
+        dx: 0.0,
+        dy: 8.0,
+        color: Color::from_rgba8(0, 0, 0, 140),
+        spread: 2.0,
+    })
+    .children(vec![View::<()>::new(Style {
+        size: Size { width: length(180.0_f32), height: length(24.0_f32) },
+        ..Default::default()
+    })
+    .text_aligned(
+        "llimphi-test".to_string(),
+        18.0,
+        rgb(240, 244, 255),
+        llimphi_text::Alignment::Center,
+    )]);
+
+    View::<()>::new(Style {
+        size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+        align_items: Some(AlignItems::Center),
+        justify_content: Some(JustifyContent::Center),
+        flex_direction: FlexDirection::Column,
+        padding: Rect { left: length(0.0_f32), right: length(0.0_f32), top: length(0.0_f32), bottom: length(0.0_f32) },
+        ..Default::default()
+    })
+    .fill(rgb(24, 26, 34))
+    .children(vec![inner])
+}
+
+#[test]
+fn readback_es_determinista() {
+    // El mismo view rasterizado dos veces por el adapter de software debe dar
+    // píxeles idénticos: certifica el pipeline headless + el readback sin ruido.
+    let a = with_harness(|h| h.render(card(), 400, 240, rgb(24, 26, 34)));
+    let b = with_harness(|h| h.render(card(), 400, 240, rgb(24, 26, 34)));
+    let (_, stats) = diff(&a, &b, 0).expect("mismas dims");
+    assert_eq!(
+        stats.differing_pixels, 0,
+        "render no determinista: {} px difieren (max_delta {})",
+        stats.differing_pixels, stats.max_delta
+    );
+}
+
+#[test]
+fn diff_detecta_cambio_de_color() {
+    // Dos frames de colores distintos deben diferir en ~todos los píxeles y con
+    // delta grande — prueba que el diff no da falsos negativos.
+    let rojo = with_harness(|h| h.render(swatch(rgb(220, 30, 30)), 64, 64, rgb(0, 0, 0)));
+    let verde = with_harness(|h| h.render(swatch(rgb(30, 220, 30)), 64, 64, rgb(0, 0, 0)));
+    let (_, stats) = diff(&rojo, &verde, 4).expect("mismas dims");
+    assert_eq!(stats.total_pixels, 64 * 64);
+    assert!(
+        stats.fraction > 0.95,
+        "esperaba casi todos los px distintos, fue frac {:.3}",
+        stats.fraction
+    );
+    assert!(stats.max_delta > 150, "delta de color chico: {}", stats.max_delta);
+}
+
+#[test]
+fn diff_identico_es_cero() {
+    let a = with_harness(|h| h.render(swatch(rgb(120, 120, 120)), 32, 32, rgb(0, 0, 0)));
+    let (_, stats) = diff(&a, &a.clone(), 0).expect("mismas dims");
+    assert_eq!(stats.differing_pixels, 0);
+    assert_eq!(stats.max_delta, 0);
+    assert_eq!(stats.fraction, 0.0);
+}
+
+#[test]
+fn golden_card_tier1() {
+    // Golden real: si esta card cambia de aspecto (regresión en sombra/gradiente/
+    // borde/radio/texto) el test falla con DiffStats y escribe .actual/.diff.
+    assert_golden!("card_tier1", card(), 400, 240, rgb(24, 26, 34));
+}
diff --git a/llimphi-text/Cargo.toml b/llimphi-text/Cargo.toml
index 3579cab..2b1151e 100644
--- a/llimphi-text/Cargo.toml
+++ b/llimphi-text/Cargo.toml
@@ -1,24 +1,24 @@
 [package]
 name = "llimphi-text"
-description = "Text shaping for llimphi over parley (Inter default, DejaVu Sans symbol fallback)."
 version.workspace = true
 edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 
 # vello directo (no llimphi-raster): el motor de texto sólo necesita
 # Scene/peniko/kurbo para construir y pintar layouts — nada del Renderer ni
 # de llimphi-hal. Eso mantiene llimphi-text (y quien lo use: el compositor)
 # libre de winit, condición para correr sobre el framebuffer de wawa.
+description = "Text shaping for llimphi over parley (Inter default, DejaVu Sans symbol fallback)."
+repository.workspace = true
 [dependencies]
 vello = { workspace = true }
 parley = { workspace = true }
 
 [dev-dependencies]
-llimphi-raster = { path = "../llimphi-raster" }
-llimphi-hal = { path = "../llimphi-hal" }
+llimphi-raster = { path = "../llimphi-raster", version = "0.1.0" }
+llimphi-hal = { path = "../llimphi-hal", version = "0.1.0" }
 pollster = { workspace = true }
 
 [[example]]
diff --git a/llimphi-text/src/lib.rs b/llimphi-text/src/lib.rs
index 653013c..df9c1e8 100644
--- a/llimphi-text/src/lib.rs
+++ b/llimphi-text/src/lib.rs
@@ -70,6 +70,18 @@ struct ShapeKey {
     /// dentro de una palabra para que entre en la caja. Cambia el line-break,
     /// así que separa la entrada del caché.
     overflow_wrap: bool,
+    /// `font-feature-settings` (+ `font-kerning` plegado como `kern`) en formato
+    /// CSS crudo (`"liga" 1, "kern" 0`). Vacío = default de la fuente. Cambia el
+    /// shaping (glifos/ligaduras), así que entra en la clave del caché.
+    features: String,
+    /// `font-variation-settings` en formato CSS crudo (`"wght" 700, "wdth" 85`).
+    /// Vacío = ejes en su default. Cambia el shaping (instancia de la fuente
+    /// variable), así que entra en la clave.
+    variations: String,
+    /// `font-stretch`/`font-width` como **porcentaje** (100 = normal, <100
+    /// condensada, >100 expandida). Selecciona la face condensada/expandida (o
+    /// el eje `wdth` de una variable) ⇒ cambia el shaping, entra en la clave.
+    font_width_bits: u32,
 }
 
 fn align_tag(a: Alignment) -> u8 {
@@ -110,7 +122,7 @@ impl ShapeCache {
         if let Some(v) = self.hot.get(key) {
             return Some(v.clone());
         }
-        // Hit frío: sacalo de cold y reinsertalo en hot (promoción). Una sola
+        // Hit frío: sácalo de cold y reinsertalo en hot (promoción). Una sola
         // clonación: el clon queda en hot, el original se devuelve al caller.
         if let Some(v) = self.cold.remove(key) {
             self.hot.insert(key.clone(), v.clone());
@@ -121,8 +133,8 @@ impl ShapeCache {
 
     fn put(&mut self, key: ShapeKey, layout: parley::Layout<()>) {
         if self.hot.len() >= self.cap {
-            // Rotá la generación: lo no reaccedido desde la última rotación
-            // (quedó sólo en cold) se libera acá.
+            // Rota la generación: lo no reaccedido desde la última rotación
+            // (quedó sólo en cold) se libera aquí.
             self.cold = std::mem::take(&mut self.hot);
         }
         self.hot.insert(key, layout);
@@ -186,6 +198,12 @@ const LIBERATION_MONO: &[u8] = include_bytes!("../assets/LiberationMono.ttf");
 /// que el render normal, sin volver a embeber el archivo.
 pub const MONO_FONT_BYTES: &[u8] = LIBERATION_MONO;
 
+/// Bytes de la fuente **sans de UI embebida** (Inter Regular TTF). Pública para
+/// que otros crates rastericen texto proporcional con la misma fuente que el
+/// render normal (p. ej. `tullpu` para sus capas de texto), sin re-embeber el
+/// archivo. Referenciada por familia con [`UI_SANS`].
+pub const SANS_FONT_BYTES: &[u8] = INTER_SANS;
+
 /// Nombre de familia de la fuente monoespaciada embebida. Pasalo como
 /// `font_family: Some(llimphi_text::MONOSPACE)` en un [`TextBlock`] (o el
 /// `font_family` de `layout`) para render de ancho fijo garantizado.
@@ -321,7 +339,7 @@ impl Typesetter {
     ) -> parley::Layout<()> {
         self.layout_inner(
             text, size_px, max_width, alignment, line_height, italic, font_family, weight,
-            underline, strikethrough, letter_spacing, word_spacing, false,
+            underline, strikethrough, letter_spacing, word_spacing, false, "", "", 100.0,
         )
     }
 
@@ -346,6 +364,9 @@ impl Typesetter {
         letter_spacing: f32,
         word_spacing: f32,
         overflow_wrap: bool,
+        font_features: &str,
+        font_variations: &str,
+        font_width: f32,
     ) -> parley::Layout<()> {
         // Caché de shaping: clave por todos los parámetros que determinan el
         // layout. En el hit clonamos el `parley::Layout` (memcpy de vectores,
@@ -366,6 +387,9 @@ impl Typesetter {
             letter_bits: letter_spacing.to_bits(),
             word_bits: word_spacing.to_bits(),
             overflow_wrap,
+            features: font_features.to_string(),
+            variations: font_variations.to_string(),
+            font_width_bits: font_width.to_bits(),
         };
         if let Some(hit) = self.cache.get(&key) {
             self.cache_hits += 1;
@@ -379,11 +403,13 @@ impl Typesetter {
         builder.push_default(parley::StyleProperty::LineHeight(
             parley::LineHeight::FontSizeRelative(line_height),
         ));
-        if weight != 400.0 {
-            builder.push_default(parley::StyleProperty::FontWeight(
-                parley::FontWeight::new(weight),
-            ));
-        }
+        // SIEMPRE fijamos el peso (antes se saltaba `== 400.0` como "optimización"):
+        // con una fuente VARIABLE, NO setear `FontWeight` deja el peso en el DEFAULT
+        // del archivo (que puede ser bold), no en el 400 pedido. Ese era el "texto
+        // bold feo" al escribir en un campo. Pedir 400 debe dar 400.
+        builder.push_default(parley::StyleProperty::FontWeight(
+            parley::FontWeight::new(weight),
+        ));
         if italic {
             builder.push_default(parley::StyleProperty::FontStyle(
                 parley::FontStyle::Italic,
@@ -420,6 +446,30 @@ impl Typesetter {
                 parley::OverflowWrap::Anywhere,
             ));
         }
+        // `font-feature-settings`/`font-variation-settings` (+ `font-kerning`
+        // plegado en la fuente de features): parley/swash parsean el string CSS
+        // crudo (`FontSettings::Source`, gramática `"tag" value, …`). Vacío =
+        // default de la fuente (no-op, no se empuja). El `&str` vive hasta el
+        // `build`, así que el `Cow::Borrowed` es válido (mismo patrón que
+        // `FontStack::Source`).
+        if !font_features.is_empty() {
+            builder.push_default(parley::StyleProperty::FontFeatures(
+                parley::FontSettings::Source(std::borrow::Cow::Borrowed(font_features)),
+            ));
+        }
+        if !font_variations.is_empty() {
+            builder.push_default(parley::StyleProperty::FontVariations(
+                parley::FontSettings::Source(std::borrow::Cow::Borrowed(font_variations)),
+            ));
+        }
+        // `font-stretch`/`font-width` (porcentaje, 100 = normal): selecciona la
+        // face condensada/expandida o el eje `wdth` de una variable. Sólo se
+        // empuja si difiere de normal (no-op en el caso común).
+        if (font_width - 100.0).abs() > 0.01 {
+            builder.push_default(parley::StyleProperty::FontWidth(
+                parley::FontWidth::from_percentage(font_width),
+            ));
+        }
         let mut layout = builder.build(text);
         layout.break_all_lines(max_width);
         layout.align(
@@ -461,10 +511,14 @@ impl Typesetter {
         letter_spacing: f32,
         word_spacing: f32,
         overflow_wrap: bool,
+        font_features: &str,
+        font_variations: &str,
+        font_width: f32,
     ) -> parley::Layout<()> {
         let full = self.layout_inner(
             text, size_px, max_width, alignment, line_height, italic, font_family, weight,
-            underline, strikethrough, letter_spacing, word_spacing, overflow_wrap,
+            underline, strikethrough, letter_spacing, word_spacing, overflow_wrap, font_features,
+            font_variations, font_width,
         );
         let limit = match max_lines {
             Some(n) if n >= 1 => n,
@@ -488,9 +542,10 @@ impl Typesetter {
             return self.layout_inner(
                 base, size_px, max_width, alignment, line_height, italic, font_family, weight,
                 underline, strikethrough, letter_spacing, word_spacing, overflow_wrap,
+                font_features, font_variations, font_width,
             );
         }
-        // Recortá graphemes del final hasta que `base…` vuelva a caber en
+        // Recorta graphemes del final hasta que `base…` vuelva a caber en
         // `limit` líneas (apilar el `…` puede empujar una palabra a una línea
         // extra). Acotado: cada vuelta quita ≥1 char.
         let mut s = base.to_string();
@@ -499,6 +554,7 @@ impl Typesetter {
             let lay = self.layout_inner(
                 &candidate, size_px, max_width, alignment, line_height, italic, font_family,
                 weight, underline, strikethrough, letter_spacing, word_spacing, overflow_wrap,
+                font_features, font_variations, font_width,
             );
             if s.is_empty() || lay.lines().count() <= limit {
                 return lay;
@@ -516,6 +572,12 @@ impl Typesetter {
     /// la convención de parley). Pensado para syntax highlighting: shapear
     /// la línea entera una vez con un color por token, en vez de un layout
     /// por token. Sin wrap (`max_width = None`); el caller posiciona la línea.
+    ///
+    /// `font_family` es la misma familia CSS-like que toma [`Self::layout`].
+    /// **No es opcional de verdad:** sin ella este camino shapeaba siempre con
+    /// la sans default, así que cualquier vista que pedía `.mono()` **y** color
+    /// por tramos perdía el ancho fijo en silencio — nada compilaba mal, sólo
+    /// se torcían las tablas de la consola.
     #[allow(clippy::too_many_arguments)]
     pub fn layout_runs(
         &mut self,
@@ -528,19 +590,27 @@ impl Typesetter {
         weight: f32,
         underline: bool,
         strikethrough: bool,
+        font_family: Option<&str>,
     ) -> parley::Layout<RunBrush> {
         let mut builder = self
             .runs_cx
             .ranged_builder(&mut self.font_cx, text, 1.0, true);
+        if let Some(ff) = font_family {
+            builder.push_default(parley::StyleProperty::FontStack(
+                parley::FontStack::Source(std::borrow::Cow::Borrowed(ff)),
+            ));
+        }
         builder.push_default(parley::StyleProperty::FontSize(size_px));
         builder.push_default(parley::StyleProperty::LineHeight(
             parley::LineHeight::FontSizeRelative(line_height),
         ));
-        if weight != 400.0 {
-            builder.push_default(parley::StyleProperty::FontWeight(
-                parley::FontWeight::new(weight),
-            ));
-        }
+        // SIEMPRE fijamos el peso (antes se saltaba `== 400.0` como "optimización"):
+        // con una fuente VARIABLE, NO setear `FontWeight` deja el peso en el DEFAULT
+        // del archivo (que puede ser bold), no en el 400 pedido. Ese era el "texto
+        // bold feo" al escribir en un campo. Pedir 400 debe dar 400.
+        builder.push_default(parley::StyleProperty::FontWeight(
+            parley::FontWeight::new(weight),
+        ));
         builder.push_default(parley::StyleProperty::Brush(RunBrush(default_color)));
         if underline {
             builder.push_default(parley::StyleProperty::Underline(true));
@@ -598,11 +668,13 @@ impl Typesetter {
         builder.push_default(parley::StyleProperty::LineHeight(
             parley::LineHeight::FontSizeRelative(line_height),
         ));
-        if weight != 400.0 {
-            builder.push_default(parley::StyleProperty::FontWeight(
-                parley::FontWeight::new(weight),
-            ));
-        }
+        // SIEMPRE fijamos el peso (antes se saltaba `== 400.0` como "optimización"):
+        // con una fuente VARIABLE, NO setear `FontWeight` deja el peso en el DEFAULT
+        // del archivo (que puede ser bold), no en el 400 pedido. Ese era el "texto
+        // bold feo" al escribir en un campo. Pedir 400 debe dar 400.
+        builder.push_default(parley::StyleProperty::FontWeight(
+            parley::FontWeight::new(weight),
+        ));
         if italic {
             builder.push_default(parley::StyleProperty::FontStyle(
                 parley::FontStyle::Italic,
@@ -790,9 +862,9 @@ pub struct Measurement {
 }
 
 /// Construye el layout (shaping + line break + alineación) listo para medir
-/// y/o pintar. Usá esta API cuando necesitás el alto **antes** de elegir el
-/// origen (p. ej. centrado vertical) y no querés repetir el shaping en el
-/// `draw`: medís sobre el layout retornado y luego lo pasás a
+/// y/o pintar. Usa esta API cuando necesitas el alto **antes** de elegir el
+/// origen (p. ej. centrado vertical) y no quieres repetir el shaping en el
+/// `draw`: medís sobre el layout retornado y luego lo pasas a
 /// [`draw_layout`].
 pub fn layout_block(ts: &mut Typesetter, block: &TextBlock<'_>) -> parley::Layout<()> {
     ts.layout(
@@ -827,6 +899,49 @@ pub fn measurement(layout: &parley::Layout<()>) -> Measurement {
     }
 }
 
+thread_local! {
+    /// Typesetter dedicado a **medir** texto en el hilo de UI. Instala la MISMA
+    /// fuente UI que usa el compositor, así el ancho medido coincide al píxel con
+    /// el glifo dibujado. El costo de cargar la fuente se paga una vez por hilo.
+    /// Origen: el `MEASURE_TS` privado del `text-input`, promovido aquí para que
+    /// cualquier widget mida glifos reales en `update`/`view` sin `&mut Typesetter`.
+    static MEASURE_TS: std::cell::RefCell<Typesetter> =
+        std::cell::RefCell::new(Typesetter::new());
+}
+
+/// Ancho en px de `text` renderizado en **una sola línea** a `size_px`, medido
+/// con la fuente UI real (shaping proporcional, kerning, ligaduras). Es la
+/// alternativa correcta al anti-patrón `chars().count() * constante`, que finge
+/// una fuente monoespaciada sobre una proporcional y desalinea todo cálculo de
+/// ancho (chips, títulos de menú, botones, tooltips…). Reusa un `Typesetter`
+/// thread-local, así se puede llamar desde `update`/`view` sin prestar uno.
+///
+/// `text` vacío → `0.0`. Para medir un **prefijo** por columnas usar
+/// `text.chars().take(n).collect::<String>()` como argumento.
+pub fn text_width(text: &str, size_px: f32) -> f32 {
+    if text.is_empty() {
+        return 0.0;
+    }
+    MEASURE_TS.with(|ts| {
+        let mut ts = ts.borrow_mut();
+        let lp = ts.layout(
+            text,
+            size_px,
+            None,
+            Alignment::Start,
+            1.2,
+            false,
+            None,
+            400.0,
+            false,
+            false,
+            0.0,
+            0.0,
+        );
+        measurement(&lp).width
+    })
+}
+
 /// Pinta un layout ya resuelto en `scene` con `color` y un offset `origin`
 /// (esquina superior-izquierda del bloque). No alloca: los glifos van
 /// directo del iterador de parley al builder de vello.
@@ -857,7 +972,7 @@ pub fn draw_layout_xf(
 /// (p. ej. CSS `background-clip: text`). El brush se interpreta en el espacio
 /// **local** del layout (origen 0,0) y `transform` lo lleva al lugar final —
 /// así un gradiente construido en coords (0,0)-(w,h) queda alineado con los
-/// glifos. Para texto normal usá [`draw_layout_xf`] (solid = máxima compat).
+/// glifos. Para texto normal usa [`draw_layout_xf`] (solid = máxima compat).
 pub fn draw_layout_brush_xf(
     scene: &mut vello::Scene,
     layout: &parley::Layout<()>,
@@ -1012,11 +1127,37 @@ mod tests {
             0.0,
             0.0,
             false,
+            "",
+            "",
+            100.0,
         )
         .lines()
         .count()
     }
 
+    #[test]
+    fn text_width_es_proporcional_no_monoespaciado() {
+        // El anti-patrón `chars*const` daría igual ancho a "iii" y "WWW"
+        // (3 chars c/u). La medición real con fuente proporcional debe
+        // distinguirlos: 'W' es mucho más ancho que 'i'.
+        let angosto = text_width("iii", 13.0);
+        let ancho = text_width("WWW", 13.0);
+        assert!(angosto > 0.0 && ancho > 0.0);
+        assert!(
+            ancho > angosto * 1.5,
+            "WWW ({ancho}) debe ser bastante más ancho que iii ({angosto})"
+        );
+    }
+
+    #[test]
+    fn text_width_vacio_es_cero_y_crece_monotono() {
+        assert_eq!(text_width("", 13.0), 0.0);
+        let a = text_width("a", 13.0);
+        let ab = text_width("ab", 13.0);
+        let abc = text_width("abc", 13.0);
+        assert!(a > 0.0 && ab > a && abc > ab, "el ancho crece al agregar chars");
+    }
+
     #[test]
     fn clamp_limita_el_numero_de_lineas() {
         let mut ts = Typesetter::new();
@@ -1055,7 +1196,7 @@ mod tests {
         // "Hola" cabe en una línea: pedir 3 no debe inventar truncado.
         let lay = ts.layout_clamped(
             "Hola", 14.0, Some(200.0), Alignment::Start, 1.2, false, None, 400.0, Some(3), true,
-            false, false, 0.0, 0.0, false,
+            false, false, 0.0, 0.0, false, "", "", 100.0,
         );
         assert_eq!(lay.lines().count(), 1);
     }
@@ -1166,6 +1307,9 @@ mod tests {
             letter_bits: 0,
             word_bits: 0,
             overflow_wrap: false,
+            features: String::new(),
+            variations: String::new(),
+            font_width_bits: 100.0_f32.to_bits(),
         };
         // Layouts vacíos como valores (sólo nos importa la presencia de claves).
         let dummy = parley::Layout::<()>::default;
diff --git a/llimphi-text/tests/mono_ancho_fijo.rs b/llimphi-text/tests/mono_ancho_fijo.rs
new file mode 100644
index 0000000..7ef16d1
--- /dev/null
+++ b/llimphi-text/tests/mono_ancho_fijo.rs
@@ -0,0 +1,71 @@
+//! La familia monoespaciada embebida tiene que dar **ancho fijo de verdad**.
+//!
+//! Es un test de regresión con evidencia numérica: si el registro de
+//! Liberation Mono falla (o alguien le cambia el nombre de familia), parley
+//! resuelve la proporcional y las tablas de la consola se tuercen sin que
+//! nada compile mal. Acá se ve en números.
+
+use llimphi_text::{Typesetter, TextBlock, MONOSPACE};
+use vello::peniko::Color;
+
+fn ancho(ts: &mut Typesetter, texto: &str, familia: Option<&str>) -> f32 {
+    let mut b = TextBlock::simple(texto, 12.0, Color::WHITE, (0.0, 0.0));
+    b.font_family = familia.map(str::to_string);
+    llimphi_text::measure(ts, &b).width
+}
+
+#[test]
+fn mono_da_el_mismo_ancho_para_anchas_y_angostas() {
+    let mut ts = Typesetter::new();
+    let m = ancho(&mut ts, "MMMMMMMMMM", Some(MONOSPACE));
+    let i = ancho(&mut ts, "iiiiiiiiii", Some(MONOSPACE));
+    println!("mono  M×10={m:.2}  i×10={i:.2}");
+    assert!(
+        (m - i).abs() < 0.5,
+        "la familia mono no da ancho fijo: M×10={m:.2} vs i×10={i:.2}"
+    );
+}
+
+#[test]
+fn la_proporcional_si_difiere_el_test_anterior_no_es_trivial() {
+    let mut ts = Typesetter::new();
+    let m = ancho(&mut ts, "MMMMMMMMMM", None);
+    let i = ancho(&mut ts, "iiiiiiiiii", None);
+    println!("sans  M×10={m:.2}  i×10={i:.2}");
+    assert!((m - i).abs() > 2.0, "la sans mide igual: el test de mono no prueba nada");
+}
+
+/// El agujero real: `layout_runs` (texto con color por tramos) no recibía
+/// familia, así que shapeaba con la sans aunque la vista pidiera `.mono()`.
+/// Nada compilaba mal — la consola simplemente salía torcida.
+#[test]
+fn el_camino_multicolor_respeta_la_familia_mono() {
+    use llimphi_text::Alignment;
+    let mut ts = Typesetter::new();
+    let tramos = |t: &str| -> Vec<(usize, usize, Color)> { vec![(0, t.len(), Color::WHITE)] };
+    let mut medir = |t: &str| {
+        ts.layout_runs(t, 12.0, Color::WHITE, &tramos(t), Alignment::Start, 1.2, 400.0, false, false, Some(MONOSPACE))
+            .width()
+    };
+    let m = medir("MMMMMMMMMM");
+    let i = medir("iiiiiiiiii");
+    println!("runs  M×10={m:.2}  i×10={i:.2}");
+    assert!(
+        (m - i).abs() < 0.5,
+        "el texto con tramos de color perdió el ancho fijo: M×10={m:.2} vs i×10={i:.2}"
+    );
+}
+
+#[test]
+fn los_caracteres_de_caja_no_se_caen_a_otra_fuente() {
+    // Si Liberation Mono no tiene el glifo, parley busca en el fallback y ese
+    // no es mono: la tabla se tuerce justo donde más se nota.
+    let mut ts = Typesetter::new();
+    let ascii = ancho(&mut ts, "++++++++++", Some(MONOSPACE));
+    let caja = ancho(&mut ts, "┌┬┐├┼┤└┴┘─", Some(MONOSPACE));
+    println!("mono  +×10={ascii:.2}  caja×10={caja:.2}");
+    assert!(
+        (ascii - caja).abs() < 0.5,
+        "los caracteres de caja no salen en la mono: +×10={ascii:.2} vs caja×10={caja:.2}"
+    );
+}
diff --git a/llimphi-theme/Cargo.toml b/llimphi-theme/Cargo.toml
index 907715c..f04325f 100644
--- a/llimphi-theme/Cargo.toml
+++ b/llimphi-theme/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-theme — paleta compartida entre apps Llimphi. Define los slots semánticos (bg_app, fg_text, accent, etc.) en `peniko::Color`; cada widget toma su paleta del Theme vía `Palette::from_theme(&theme)`."
 
+repository.workspace = true
 [dependencies]
 # Reexporta peniko::Color para que las apps consuman sin pull-in directo.
 llimphi-raster = { path = "../llimphi-raster", version = "0.1.0" }
diff --git a/llimphi-theme/src/lib.rs b/llimphi-theme/src/lib.rs
index b005adc..63d88e5 100644
--- a/llimphi-theme/src/lib.rs
+++ b/llimphi-theme/src/lib.rs
@@ -187,7 +187,7 @@ pub mod radius {
 
 /// Paleta de la app. Slots semánticos que cubren los casos comunes
 /// (fondo, texto, hover, foco, acento). Los widgets reusables toman su
-/// `Palette` específico desde acá vía `Palette::from_theme(&theme)`.
+/// `Palette` específico desde aquí vía `Palette::from_theme(&theme)`.
 #[derive(Debug, Clone, Copy)]
 pub struct Theme {
     /// Nombre legible del preset — alimenta `Theme::by_name`,
@@ -263,7 +263,7 @@ impl Theme {
     /// screenshots. Decisiones de paleta:
     ///
     /// - **Base negro cálido, no azul marino.** A diferencia de `dark()` (un
-    ///   navy genérico, R<B) acá el fondo es un casi-negro con temperatura:
+    ///   navy genérico, R<B) aquí el fondo es un casi-negro con temperatura:
     ///   los canales rojo/verde van un punto por encima del azul, así el grafito
     ///   "respira" tibio en vez de frío. Jerarquía de superficies en escalera
     ///   suave: `bg_app` (más profundo) → `bg_panel`/`bg_input` → barras → chips,
diff --git a/llimphi-ui/Cargo.toml b/llimphi-ui/Cargo.toml
index 233aeb1..e8034d1 100644
--- a/llimphi-ui/Cargo.toml
+++ b/llimphi-ui/Cargo.toml
@@ -1,13 +1,13 @@
 [package]
 name = "llimphi-ui"
-description = "Native Rust UI framework: retained-mode View<Msg> Elm loop over vello + wgpu + taffy + parley."
 version.workspace = true
 edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 
+description = "Native Rust UI framework: retained-mode View<Msg> Elm loop over vello + wgpu + taffy + parley."
+repository.workspace = true
 [dependencies]
 llimphi-hal = { path = "../llimphi-hal", version = "0.1.0" }
 llimphi-layout = { path = "../llimphi-layout", version = "0.1.0" }
@@ -26,14 +26,26 @@ accesskit_winit = { workspace = true }
 # para distinguir nuestra app de otras ventanas AccessKit del SO).
 uuid = { version = "1", features = ["v4"] }
 # Portapapeles del sistema para copiar texto seleccionado fuera del editor
-# (Ctrl/Cmd+C). Best-effort: si no hay backend (headless, android) degrada a
-# no-op sin panicar. Feature `clipboard` (default) para que builds sin display
-# o targets sin arboard puedan apagarlo con --no-default-features.
+# (Ctrl/Cmd+C). Best-effort: si no hay backend (headless) degrada a no-op sin
+# panicar. Feature `clipboard` (default) para que builds sin display puedan
+# apagarlo con --no-default-features. En Android arboard no existe: la dep va
+# target-gated y `copy_to_clipboard` es no-op aunque la feature esté activa.
+[target.'cfg(not(target_os = "android"))'.dependencies]
 arboard = { workspace = true, optional = true }
 
+[target.'cfg(target_os = "android")'.dependencies]
+# Logging a logcat: en Android eprintln! va a /dev/null; los errores del
+# runtime (event loop, GPU) salen por `log` (la app instala android_logger).
+log = "0.4"
+
 [features]
 default = ["clipboard"]
 clipboard = ["dep:arboard"]
+# Instala `alloc::ContadorAlloc` como `#[global_allocator]` del binario para
+# que `LLIMPHI_PERF` reporte asignaciones/bytes por frame (Bloque 21). OFF por
+# defecto: cuenta con dos `fetch_add` relajados por asignación, y un runtime no
+# le impone el allocator a nadie sin que lo pidan.
+perf-alloc = []
 
 [[example]]
 name = "counter"
diff --git a/llimphi-ui/examples/gestos.rs b/llimphi-ui/examples/gestos.rs
index b129a6f..9b6adb0 100644
--- a/llimphi-ui/examples/gestos.rs
+++ b/llimphi-ui/examples/gestos.rs
@@ -61,14 +61,14 @@ impl App for Gestos {
             zoom: 1.0,
             pan: (0.0, 0.0),
             marks: Vec::new(),
-            last: "probá: Ctrl+rueda (zoom) · arrastrar (paneo) · doble-click (reset) · mantener (marca)".into(),
+            last: "prueba: Ctrl+rueda (zoom) · arrastrar (paneo) · doble-click (reset) · mantener (marca)".into(),
         }
     }
 
     fn update(mut model: Self::Model, msg: Self::Msg, _: &Handle<Self::Msg>) -> Self::Model {
         match msg {
             Msg::Zoom { factor, fx, fy } => {
-                // Zoom hacia el cursor: mantené fijo el punto de mundo bajo
+                // Zoom hacia el cursor: mantén fijo el punto de mundo bajo
                 // (fx, fy) reajustando el paneo. new_pan = focal - rf·(focal - pan).
                 let new_zoom = (model.zoom * factor).clamp(0.15, 12.0);
                 let rf = new_zoom / model.zoom; // factor real tras el clamp
diff --git a/llimphi-ui/examples/selectable_text.rs b/llimphi-ui/examples/selectable_text.rs
index dbbc3c5..cfba050 100644
--- a/llimphi-ui/examples/selectable_text.rs
+++ b/llimphi-ui/examples/selectable_text.rs
@@ -1,4 +1,4 @@
-//! Texto seleccionable **fuera del editor**: arrastrá el mouse sobre los
+//! Texto seleccionable **fuera del editor**: arrastra el mouse sobre los
 //! párrafos para resaltar y Ctrl/Cmd+C para copiar al portapapeles. La
 //! selección la maneja el runtime (`View::selectable(key)`) — la app no
 //! guarda estado de selección en su `Model`.
@@ -16,7 +16,7 @@ use llimphi_ui::{App, Handle, View};
 struct Demo;
 
 const PARRAFOS: [&str; 3] = [
-    "Arrastrá el cursor sobre este texto para seleccionarlo. La selección \
+    "Arrastra el cursor sobre este texto para seleccionarlo. La selección \
      vive en el runtime de Llimphi, no en el Model de la app.",
     "Cada párrafo tiene su propia key estable; empezar a arrastrar en otro \
      reemplaza la selección anterior. Ctrl+C (o Cmd+C en macOS) copia el \
@@ -46,7 +46,7 @@ impl App for Demo {
             ..Default::default()
         })
         .text_aligned(
-            "Texto seleccionable (arrastrá + Ctrl/Cmd+C)",
+            "Texto seleccionable (arrastra + Ctrl/Cmd+C)",
             22.0,
             Color::from_rgba8(230, 240, 250, 255),
             Alignment::Start,
diff --git a/llimphi-ui/examples/stress_boundary.rs b/llimphi-ui/examples/stress_boundary.rs
new file mode 100644
index 0000000..ff8e7ab
--- /dev/null
+++ b/llimphi-ui/examples/stress_boundary.rs
@@ -0,0 +1,182 @@
+//! stress_boundary — Bloque 23 (RepaintBoundary). Contraparte de `stress_grid`:
+//! el mismo grid grande, pero **estático** y envuelto en `.repaint_boundary(1)`,
+//! con un header que SÍ cambia cada frame (fuerza el repintado del frame).
+//!
+//! Con el boundary, el subárbol estático se rasteriza una vez y se **reusa**
+//! (append de la sub-escena cacheada) — así el `paint` (walk + encode en CPU,
+//! la etapa dominante a muchos nodos) se desploma, mientras el header se pinta
+//! fresco. `LLIMPHI_PERF` muestra `boundary N hits / 1 miss`.
+//!
+//! ```bash
+//! # sin caché (todo se re-encodea cada frame):
+//! LLIMPHI_PERF=1 cargo run -p llimphi-ui --example stress_grid     --release -- --nodes 50000
+//! # con caché (el grid estático se reusa):
+//! LLIMPHI_PERF=1 cargo run -p llimphi-ui --example stress_boundary --release -- --nodes 50000
+//! ```
+//! Comparás la etapa `paint µs`: mucho más baja en stress_boundary.
+
+use llimphi_ui::llimphi_layout::taffy::prelude::*;
+use llimphi_ui::llimphi_raster::peniko::Color;
+use llimphi_ui::{App, Handle, View};
+use std::time::Duration;
+
+#[derive(Clone)]
+enum Msg {
+    Tick,
+}
+
+struct Stress;
+
+struct Model {
+    frame: u64,
+    nodes: usize,
+    cols: usize,
+    quit_after: u64,
+    /// Frames REALMENTE renderizados (incrementado en `view`). El auto-quit se
+    /// basa en esto, no en los Ticks: a muchos nodos el render es más lento que
+    /// el tick de 16 ms, y contar Ticks cerraría la app antes de que el
+    /// perfilador (que reporta cada N frames renderizados) imprima una línea.
+    renders: std::cell::Cell<u64>,
+}
+
+fn arg_u64(name: &str, default: u64) -> u64 {
+    let mut args = std::env::args();
+    while let Some(a) = args.next() {
+        if a == name {
+            if let Some(v) = args.next() {
+                if let Ok(n) = v.parse::<u64>() {
+                    return n;
+                }
+            }
+        }
+    }
+    default
+}
+
+/// El grid **estático** (colores fijos por índice, NO por frame): idéntico entre
+/// frames → cache-hit del RepaintBoundary tras el primero.
+fn grid_estatico(nodes: usize, cols: usize) -> View<Msg> {
+    let rows = nodes.div_ceil(cols);
+    let mut row_views = Vec::with_capacity(rows);
+    let mut made = 0usize;
+    for _r in 0..rows {
+        let mut cells = Vec::with_capacity(cols);
+        for _c in 0..cols {
+            if made >= nodes {
+                break;
+            }
+            let hue = (made % 255) as u8;
+            cells.push(
+                View::new(Style {
+                    size: Size {
+                        width: length(6.0_f32),
+                        height: length(6.0_f32),
+                    },
+                    ..Default::default()
+                })
+                .fill(Color::from_rgba8(hue, 90, 200u8.wrapping_sub(hue), 255))
+                .radius(1.0),
+            );
+            made += 1;
+        }
+        row_views.push(
+            View::new(Style {
+                flex_direction: FlexDirection::Row,
+                gap: Size {
+                    width: length(1.0_f32),
+                    height: length(0.0_f32),
+                },
+                ..Default::default()
+            })
+            .children(cells),
+        );
+    }
+    View::new(Style {
+        flex_direction: FlexDirection::Column,
+        gap: Size {
+            width: length(0.0_f32),
+            height: length(1.0_f32),
+        },
+        ..Default::default()
+    })
+    .children(row_views)
+    // ← el límite de repintado: subárbol estático, cacheable.
+    .repaint_boundary(1)
+}
+
+impl App for Stress {
+    type Model = Model;
+    type Msg = Msg;
+
+    fn title() -> &'static str {
+        "llimphi · stress_boundary"
+    }
+
+    fn init(handle: &Handle<Self::Msg>) -> Self::Model {
+        let nodes = arg_u64("--nodes", 5_000).max(1) as usize;
+        let cols = (nodes as f64).sqrt().ceil() as usize;
+        let quit_after = arg_u64("--frames", 240);
+        handle.spawn_periodic(Duration::from_millis(16), || Msg::Tick);
+        eprintln!(
+            "[stress_boundary] nodes={nodes} cols={cols} — LLIMPHI_PERF=1; \
+             el grid va en un repaint_boundary (cache-hit tras el 1er frame)"
+        );
+        Model {
+            frame: 0,
+            nodes,
+            cols,
+            quit_after,
+            renders: std::cell::Cell::new(0),
+        }
+    }
+
+    fn update(mut model: Self::Model, msg: Self::Msg, handle: &Handle<Self::Msg>) -> Self::Model {
+        match msg {
+            Msg::Tick => {
+                model.frame = model.frame.wrapping_add(1);
+                if model.quit_after != 0 && model.renders.get() >= model.quit_after {
+                    handle.quit();
+                }
+            }
+        }
+        model
+    }
+
+    fn view(model: &Self::Model) -> View<Self::Msg> {
+        model.renders.set(model.renders.get() + 1);
+        // Header que CAMBIA cada frame → obliga a repintar el frame (si no,
+        // la retención de frame entero saltearía todo). Va FUERA del boundary.
+        let header = View::new(Style {
+            size: Size {
+                width: percent(1.0_f32),
+                height: length(28.0_f32),
+            },
+            ..Default::default()
+        })
+        .fill(Color::from_rgba8(30, 34, 44, 255))
+        .text(
+            format!("frame {}", model.frame),
+            16.0,
+            Color::from_rgba8(210, 214, 222, 255),
+        );
+
+        View::new(Style {
+            flex_direction: FlexDirection::Column,
+            size: Size {
+                width: percent(1.0_f32),
+                height: percent(1.0_f32),
+            },
+            gap: Size {
+                width: length(0.0_f32),
+                height: length(4.0_f32),
+            },
+            ..Default::default()
+        })
+        .fill(Color::from_rgba8(16, 18, 24, 255))
+        .children(vec![header, grid_estatico(model.nodes, model.cols)])
+    }
+}
+
+fn main() {
+    llimphi_ui::run::<Stress>();
+}
diff --git a/llimphi-ui/examples/stress_grid.rs b/llimphi-ui/examples/stress_grid.rs
new file mode 100644
index 0000000..4c7e936
--- /dev/null
+++ b/llimphi-ui/examples/stress_grid.rs
@@ -0,0 +1,158 @@
+//! stress_grid — Bloque 21 (PLAN-NUCLEO-RETENIDO.md): app sintética de N nodos
+//! para medir el camino completo de redraw con el perfilador `LLIMPHI_PERF`.
+//!
+//! Cada tick (~16 ms) muta el modelo → invalida `last_render` → fuerza un frame
+//! de camino COMPLETO (mount + layout + paint), que es justo lo que el
+//! perfilador muestrea. El color de cada celda depende del frame, así el árbol
+//! cambia de verdad cada cuadro (nada de cache-hit).
+//!
+//! Uso (baseline del Bloque 21):
+//! ```bash
+//! LLIMPHI_PERF=1 cargo run -p llimphi-ui --example stress_grid --release -- --nodes 5000
+//! LLIMPHI_PERF=1 cargo run -p llimphi-ui --example stress_grid --release -- --nodes 50000
+//! LLIMPHI_PERF=1 cargo run -p llimphi-ui --example stress_grid --release -- --nodes 200000
+//! ```
+
+use llimphi_ui::llimphi_layout::taffy::prelude::*;
+use llimphi_ui::llimphi_raster::peniko::Color;
+use llimphi_ui::{App, Handle, View};
+use std::time::Duration;
+
+#[derive(Clone)]
+enum Msg {
+    Tick,
+}
+
+struct Stress;
+
+struct Model {
+    frame: u64,
+    nodes: usize,
+    cols: usize,
+    /// Se cierra solo tras estos frames RENDERIZADOS (para no imprimir
+    /// infinito). `0` = nunca (corre hasta cerrar la ventana). Ver `--frames`.
+    quit_after: u64,
+    /// Frames realmente renderizados (incrementado en `view`). El auto-quit se
+    /// basa en esto, no en los Ticks: a muchos nodos el render es más lento que
+    /// el tick de 16 ms y contar Ticks cerraría antes de que el perfilador
+    /// (reporta cada N renders) imprima una línea.
+    renders: std::cell::Cell<u64>,
+}
+
+/// Lee un flag `--<name> <valor>` de la línea de comando.
+fn arg_u64(name: &str, default: u64) -> u64 {
+    let mut args = std::env::args();
+    while let Some(a) = args.next() {
+        if a == name {
+            if let Some(v) = args.next() {
+                if let Ok(n) = v.parse::<u64>() {
+                    return n;
+                }
+            }
+        }
+    }
+    default
+}
+
+impl App for Stress {
+    type Model = Model;
+    type Msg = Msg;
+
+    fn title() -> &'static str {
+        "llimphi · stress_grid"
+    }
+
+    fn init(handle: &Handle<Self::Msg>) -> Self::Model {
+        let nodes = arg_u64("--nodes", 5_000).max(1) as usize;
+        let cols = (nodes as f64).sqrt().ceil() as usize;
+        // Default: se cierra solo tras 240 frames (~4 reportes de 60). `--frames 0`
+        // corre indefinido (cierras la ventana a mano).
+        let quit_after = arg_u64("--frames", 240);
+        // Feed continuo: garantiza frames de camino completo para muestrear.
+        handle.spawn_periodic(Duration::from_millis(16), || Msg::Tick);
+        eprintln!(
+            "[stress_grid] nodes={nodes} cols={cols} — LLIMPHI_PERF=1; \
+             sale solo a los {quit_after} frames (--frames 0 = infinito)"
+        );
+        Model {
+            frame: 0,
+            nodes,
+            cols,
+            quit_after,
+            renders: std::cell::Cell::new(0),
+        }
+    }
+
+    fn update(mut model: Self::Model, msg: Self::Msg, handle: &Handle<Self::Msg>) -> Self::Model {
+        match msg {
+            Msg::Tick => {
+                model.frame = model.frame.wrapping_add(1);
+                if model.quit_after != 0 && model.renders.get() >= model.quit_after {
+                    handle.quit();
+                }
+            }
+        }
+        model
+    }
+
+    fn view(model: &Self::Model) -> View<Self::Msg> {
+        model.renders.set(model.renders.get() + 1);
+        let cols = model.cols.max(1);
+        let rows = model.nodes.div_ceil(cols);
+        let f = model.frame;
+        let mut row_views = Vec::with_capacity(rows);
+        let mut made = 0usize;
+        for _r in 0..rows {
+            let mut cells = Vec::with_capacity(cols);
+            for _c in 0..cols {
+                if made >= model.nodes {
+                    break;
+                }
+                let i = made as u64;
+                // Color animado por frame → el árbol cambia de verdad cada cuadro.
+                let hue = ((i.wrapping_add(f)) % 255) as u8;
+                cells.push(
+                    View::new(Style {
+                        size: Size {
+                            width: length(6.0_f32),
+                            height: length(6.0_f32),
+                        },
+                        ..Default::default()
+                    })
+                    .fill(Color::from_rgba8(hue, 90, 200u8.wrapping_sub(hue), 255))
+                    .radius(1.0),
+                );
+                made += 1;
+            }
+            row_views.push(
+                View::new(Style {
+                    flex_direction: FlexDirection::Row,
+                    gap: Size {
+                        width: length(1.0_f32),
+                        height: length(0.0_f32),
+                    },
+                    ..Default::default()
+                })
+                .children(cells),
+            );
+        }
+        View::new(Style {
+            flex_direction: FlexDirection::Column,
+            size: Size {
+                width: percent(1.0_f32),
+                height: percent(1.0_f32),
+            },
+            gap: Size {
+                width: length(0.0_f32),
+                height: length(1.0_f32),
+            },
+            ..Default::default()
+        })
+        .fill(Color::from_rgba8(16, 18, 24, 255))
+        .children(row_views)
+    }
+}
+
+fn main() {
+    llimphi_ui::run::<Stress>();
+}
diff --git a/llimphi-ui/examples/stress_memo.rs b/llimphi-ui/examples/stress_memo.rs
new file mode 100644
index 0000000..e489991
--- /dev/null
+++ b/llimphi-ui/examples/stress_memo.rs
@@ -0,0 +1,186 @@
+//! stress_memo — Bloque 25 (memo). Como `stress_boundary`, pero el grid estático
+//! va en un `.memo(key, deps, builder)` en vez de `.repaint_boundary()`. Con
+//! `deps` constante, tras el primer frame el builder NO se llama: el `View` del
+//! grid no se reconstruye, no se re-monta y no se re-layoutea (se reusa el
+//! `Mounted` cacheado). Así se desploman `view`, `mount` Y `layout` para el
+//! subárbol — no sólo `paint` (que era lo del Bloque 23).
+//!
+//! ```bash
+//! LLIMPHI_PERF=20 cargo run -p llimphi-ui --example stress_grid --release -- --nodes 50000 --frames 0
+//! LLIMPHI_PERF=20 cargo run -p llimphi-ui --example stress_memo --release -- --nodes 50000 --frames 0
+//! ```
+//! En stress_memo, `view`/`mount`/`layout` deberían ser mucho más bajos (el grid
+//! sólo se construye una vez).
+
+use llimphi_ui::llimphi_layout::taffy::prelude::*;
+use llimphi_ui::llimphi_raster::peniko::Color;
+use llimphi_ui::{App, Handle, View};
+use std::time::Duration;
+
+#[derive(Clone)]
+enum Msg {
+    Tick,
+}
+
+struct Stress;
+
+struct Model {
+    frame: u64,
+    nodes: usize,
+    cols: usize,
+    quit_after: u64,
+    renders: std::cell::Cell<u64>,
+}
+
+fn arg_u64(name: &str, default: u64) -> u64 {
+    let mut args = std::env::args();
+    while let Some(a) = args.next() {
+        if a == name {
+            if let Some(v) = args.next() {
+                if let Ok(n) = v.parse::<u64>() {
+                    return n;
+                }
+            }
+        }
+    }
+    default
+}
+
+/// Grid estático (colores fijos por índice). Lo produce el builder del memo, que
+/// sólo se llama cuando `deps` cambia (aquí nunca) → se construye una sola vez.
+fn grid_estatico(nodes: usize, cols: usize) -> View<Msg> {
+    let rows = nodes.div_ceil(cols);
+    let mut row_views = Vec::with_capacity(rows);
+    let mut made = 0usize;
+    for _r in 0..rows {
+        let mut cells = Vec::with_capacity(cols);
+        for _c in 0..cols {
+            if made >= nodes {
+                break;
+            }
+            let hue = (made % 255) as u8;
+            cells.push(
+                View::new(Style {
+                    size: Size {
+                        width: length(6.0_f32),
+                        height: length(6.0_f32),
+                    },
+                    ..Default::default()
+                })
+                .fill(Color::from_rgba8(hue, 90, 200u8.wrapping_sub(hue), 255))
+                .radius(1.0),
+            );
+            made += 1;
+        }
+        row_views.push(
+            View::new(Style {
+                flex_direction: FlexDirection::Row,
+                gap: Size {
+                    width: length(1.0_f32),
+                    height: length(0.0_f32),
+                },
+                ..Default::default()
+            })
+            .children(cells),
+        );
+    }
+    View::new(Style {
+        flex_direction: FlexDirection::Column,
+        gap: Size {
+            width: length(0.0_f32),
+            height: length(1.0_f32),
+        },
+        ..Default::default()
+    })
+    .children(row_views)
+}
+
+impl App for Stress {
+    type Model = Model;
+    type Msg = Msg;
+
+    fn title() -> &'static str {
+        "llimphi · stress_memo"
+    }
+
+    fn init(handle: &Handle<Self::Msg>) -> Self::Model {
+        let nodes = arg_u64("--nodes", 5_000).max(1) as usize;
+        let cols = (nodes as f64).sqrt().ceil() as usize;
+        let quit_after = arg_u64("--frames", 240);
+        handle.spawn_periodic(Duration::from_millis(16), || Msg::Tick);
+        eprintln!(
+            "[stress_memo] nodes={nodes} cols={cols} — LLIMPHI_PERF=1; \
+             el grid va en un .memo (se construye UNA vez)"
+        );
+        Model {
+            frame: 0,
+            nodes,
+            cols,
+            quit_after,
+            renders: std::cell::Cell::new(0),
+        }
+    }
+
+    fn update(mut model: Self::Model, msg: Self::Msg, handle: &Handle<Self::Msg>) -> Self::Model {
+        match msg {
+            Msg::Tick => {
+                model.frame = model.frame.wrapping_add(1);
+                if model.quit_after != 0 && model.renders.get() >= model.quit_after {
+                    handle.quit();
+                }
+            }
+        }
+        model
+    }
+
+    fn view(model: &Self::Model) -> View<Self::Msg> {
+        model.renders.set(model.renders.get() + 1);
+        // Header que cambia cada frame (fuerza el repintado). Fuera del memo.
+        let header = View::new(Style {
+            size: Size {
+                width: percent(1.0_f32),
+                height: length(28.0_f32),
+            },
+            ..Default::default()
+        })
+        .fill(Color::from_rgba8(30, 34, 44, 255))
+        .text(
+            format!("frame {}", model.frame),
+            16.0,
+            Color::from_rgba8(210, 214, 222, 255),
+        );
+
+        let nodes = model.nodes;
+        let cols = model.cols;
+        // Contenedor del grid con tamaño DEFINIDO (contrato del memo) + `.memo`
+        // con deps constante (0) → el grid se construye una sola vez.
+        let grid = View::new(Style {
+            size: Size {
+                width: percent(1.0_f32),
+                height: length(520.0_f32),
+            },
+            flex_shrink: 0.0,
+            ..Default::default()
+        })
+        .memo(1, 0, move || grid_estatico(nodes, cols));
+
+        View::new(Style {
+            flex_direction: FlexDirection::Column,
+            size: Size {
+                width: percent(1.0_f32),
+                height: percent(1.0_f32),
+            },
+            gap: Size {
+                width: length(0.0_f32),
+                height: length(4.0_f32),
+            },
+            ..Default::default()
+        })
+        .fill(Color::from_rgba8(16, 18, 24, 255))
+        .children(vec![header, grid])
+    }
+}
+
+fn main() {
+    llimphi_ui::run::<Stress>();
+}
diff --git a/llimphi-ui/src/a11y.rs b/llimphi-ui/src/a11y.rs
index b7ad22a..2db1f47 100644
--- a/llimphi-ui/src/a11y.rs
+++ b/llimphi-ui/src/a11y.rs
@@ -124,7 +124,7 @@ pub fn build_tree<Msg>(
             node.add_action(Action::Click);
         }
 
-        // Hijos: rango [idx+1, subtree_end) — pero acá necesitamos sólo los
+        // Hijos: rango [idx+1, subtree_end) — pero aquí necesitamos sólo los
         // hijos DIRECTOS, no descendientes. Los hijos directos son los nodos
         // cuyo padre es este: en el orden pre-orden con `subtree_end`, los
         // hijos directos del nodo idx son los nodos h tales que h.parent == idx.
diff --git a/llimphi-ui/src/alloc.rs b/llimphi-ui/src/alloc.rs
new file mode 100644
index 0000000..8acb6f8
--- /dev/null
+++ b/llimphi-ui/src/alloc.rs
@@ -0,0 +1,130 @@
+// alloc.rs — contador de asignaciones de heap, para el perfilador del Bloque 21
+// (`PLAN-NUCLEO-RETENIDO.md`). Responde la pregunta que el contador de µs no
+// puede responder: *cuántas veces por frame tocamos el allocator, y cuántos
+// bytes pedimos*. Es la línea base honesta antes de discutir arenas, pools o
+// reuso de buffers — sin este número, "bajamos las asignaciones" es fe.
+//
+// Cómo se enciende (dos caminos, ninguno cuesta nada apagado):
+//
+//  1. **Feature `perf-alloc`** de este crate: instala `ContadorAlloc` como
+//     `#[global_allocator]` del programa entero. No hay que tocar la app.
+//
+//         cargo run -p llimphi-ui --example stress_grid --release \
+//             --features perf-alloc
+//
+//  2. **A mano**, si la app ya elige su allocator (jemalloc, mimalloc…) o si
+//     preferís no meter una feature del runtime en el binario:
+//
+//         #[global_allocator]
+//         static A: llimphi_ui::alloc::ContadorAlloc = llimphi_ui::alloc::ContadorAlloc;
+//
+// Sin ninguno de los dos, los contadores quedan en cero y `LLIMPHI_PERF`
+// reporta `alloc n/a` en vez de mentir con ceros.
+//
+// Costo cuando SÍ está instalado: dos `fetch_add` relajados por asignación. No
+// es gratis — por eso va detrás de feature y no en el camino por defecto.
+
+use std::alloc::{GlobalAlloc, Layout, System};
+use std::sync::atomic::{AtomicU64, Ordering::Relaxed};
+
+static ASIGNACIONES: AtomicU64 = AtomicU64::new(0);
+static BYTES: AtomicU64 = AtomicU64::new(0);
+static LIBERACIONES: AtomicU64 = AtomicU64::new(0);
+
+/// Allocator que cuenta y delega en el del sistema. Ver el encabezado del
+/// módulo para las dos formas de instalarlo.
+pub struct ContadorAlloc;
+
+unsafe impl GlobalAlloc for ContadorAlloc {
+    unsafe fn alloc(&self, l: Layout) -> *mut u8 {
+        ASIGNACIONES.fetch_add(1, Relaxed);
+        BYTES.fetch_add(l.size() as u64, Relaxed);
+        unsafe { System.alloc(l) }
+    }
+
+    unsafe fn alloc_zeroed(&self, l: Layout) -> *mut u8 {
+        ASIGNACIONES.fetch_add(1, Relaxed);
+        BYTES.fetch_add(l.size() as u64, Relaxed);
+        unsafe { System.alloc_zeroed(l) }
+    }
+
+    unsafe fn dealloc(&self, p: *mut u8, l: Layout) {
+        LIBERACIONES.fetch_add(1, Relaxed);
+        unsafe { System.dealloc(p, l) }
+    }
+
+    unsafe fn realloc(&self, p: *mut u8, l: Layout, nuevo: usize) -> *mut u8 {
+        // Un `realloc` es un viaje al allocator igual que un `alloc` (el
+        // `Vec::push` que duplica capacidad pasa por acá), así que cuenta como
+        // asignación. En bytes contamos sólo el CRECIMIENTO: si no, un `Vec`
+        // que se duplica N veces inflaría el total con memoria que ya teníamos.
+        ASIGNACIONES.fetch_add(1, Relaxed);
+        BYTES.fetch_add(nuevo.saturating_sub(l.size()) as u64, Relaxed);
+        unsafe { System.realloc(p, l, nuevo) }
+    }
+}
+
+#[cfg(feature = "perf-alloc")]
+#[global_allocator]
+static CONTADOR_GLOBAL: ContadorAlloc = ContadorAlloc;
+
+/// Lectura acumulada del proceso: `(asignaciones, bytes pedidos, liberaciones)`.
+/// El perfilador toma dos y resta; el delta es lo que costó el tramo.
+#[inline]
+pub fn snapshot() -> (u64, u64, u64) {
+    (
+        ASIGNACIONES.load(Relaxed),
+        BYTES.load(Relaxed),
+        LIBERACIONES.load(Relaxed),
+    )
+}
+
+/// `true` si el contador está realmente instalado como allocator global. Se
+/// deduce de que haya contado aunque sea una asignación: para cuando corre el
+/// primer frame ya van miles. Sin esto no podríamos distinguir "cero
+/// asignaciones" (imposible hoy) de "nadie está contando".
+#[inline]
+pub fn instalado() -> bool {
+    ASIGNACIONES.load(Relaxed) > 0
+}
+
+// Los tests usan el contador COMO objeto (no como allocator global) y miden
+// DELTAS de los contadores. Van en un solo `#[test]` porque los contadores son
+// estáticos del proceso: dos tests en paralelo se pisarían los deltas. Por lo
+// mismo se saltan cuando la feature `perf-alloc` está encendida — ahí el
+// allocator es global y todo el resto del proceso suma en medio de la medición.
+#[cfg(all(test, not(feature = "perf-alloc")))]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn cuenta_alloc_dealloc_y_realloc() {
+        let l = Layout::from_size_align(4096, 8).unwrap();
+        let (a0, b0, d0) = snapshot();
+        unsafe {
+            let p = ContadorAlloc.alloc(l);
+            assert!(!p.is_null());
+            ContadorAlloc.dealloc(p, l);
+        }
+        let (a1, b1, d1) = snapshot();
+        assert_eq!(a1 - a0, 1, "una asignación");
+        assert_eq!(d1 - d0, 1, "una liberación");
+        assert_eq!(b1 - b0, 4096, "bytes pedidos");
+
+        let l = Layout::from_size_align(1024, 8).unwrap();
+        unsafe {
+            let p = ContadorAlloc.alloc(l);
+            let (a0, b0, _) = snapshot();
+            let p = ContadorAlloc.realloc(p, l, 3072);
+            let (a1, b1, _) = snapshot();
+            assert_eq!(a1 - a0, 1, "el realloc es un viaje al allocator");
+            assert_eq!(b1 - b0, 2048, "sólo el crecimiento, no los 3072");
+            // Encoger no debe restar ni desbordar el contador de bytes.
+            let l3 = Layout::from_size_align(3072, 8).unwrap();
+            let p = ContadorAlloc.realloc(p, l3, 512);
+            let (_, b2, _) = snapshot();
+            assert_eq!(b2, b1, "encoger no suma bytes");
+            ContadorAlloc.dealloc(p, Layout::from_size_align(512, 8).unwrap());
+        }
+    }
+}
diff --git a/llimphi-ui/src/eventloop/helpers.rs b/llimphi-ui/src/eventloop/helpers.rs
index 38bc059..cf638cb 100644
--- a/llimphi-ui/src/eventloop/helpers.rs
+++ b/llimphi-ui/src/eventloop/helpers.rs
@@ -257,15 +257,16 @@ pub(super) fn key_is_char(key: &Key, c: char) -> bool {
 
 /// Copia texto al portapapeles del sistema (best-effort). Con la feature
 /// `clipboard` usa `arboard`; sin backend (headless) o sin la feature es no-op
-/// silencioso — nunca panica.
-#[cfg(feature = "clipboard")]
+/// silencioso — nunca panica. En Android no hay arboard (la dep va
+/// target-gated en Cargo.toml): siempre no-op.
+#[cfg(all(feature = "clipboard", not(target_os = "android")))]
 pub(super) fn copy_to_clipboard(text: &str) {
     if let Ok(mut cb) = arboard::Clipboard::new() {
         let _ = cb.set_text(text.to_string());
     }
 }
 
-#[cfg(not(feature = "clipboard"))]
+#[cfg(any(not(feature = "clipboard"), target_os = "android"))]
 pub(super) fn copy_to_clipboard(_text: &str) {}
 
 /// Resuelve los [`View::layout_builder`] del árbol de la app en dos pasadas
diff --git a/llimphi-ui/src/eventloop/input.rs b/llimphi-ui/src/eventloop/input.rs
index 8b5cd34..ff5cdfa 100644
--- a/llimphi-ui/src/eventloop/input.rs
+++ b/llimphi-ui/src/eventloop/input.rs
@@ -39,6 +39,92 @@ pub(super) fn lookup_click_hit<Msg: Clone>(
     })
 }
 
+/// ¿Diag de click prendido? (`MEDIA_CLICK_DIAG=1`). Cacheado: un `env::var`
+/// una sola vez, no por click.
+fn click_diag_enabled() -> bool {
+    use std::sync::OnceLock;
+    static D: OnceLock<bool> = OnceLock::new();
+    *D.get_or_init(|| std::env::var("MEDIA_CLICK_DIAG").is_ok())
+}
+
+/// Reconstruye un `RenderCache` fresco desde el modelo vigente (mount + layout
+/// del árbol principal y del overlay, **sin pintar**) y lo deja en
+/// `state.last_render`. Se llama al tope de cada handler de press cuando el
+/// cache llegó invalidado (`None`).
+///
+/// Por qué: `last_render` se anula en CADA `Msg` (el tick de video incluido) y
+/// sólo vuelve a `Some` tras un redraw completo. Con video tickeando + redraw
+/// throttled, la ventana en que `last_render` está `None` es enorme, y un click
+/// que cae ahí **se saltaba todos los hit-tests** de `handle_*_press` (sólo el
+/// `on_click` plano tenía fallback; `on_click_screen`/foco/selección/gestos no)
+/// → click no-op silencioso: el engranaje de config de media no abría, F2 sí.
+/// Reconstruir acá hace que TODOS los caminos de hit-test vean el árbol del
+/// modelo vigente, sin depender de que exista un frame recién pintado.
+///
+/// Anula `state.retained`: montamos el árbol pero NO lo pintamos, así que la
+/// invariante de retención ("`last_render` Some ⇒ nada visual cambió desde el
+/// paint") ya no vale — el próximo redraw debe repintar completo el modelo
+/// vigente en vez de re-presentar el frame viejo.
+pub(super) fn build_hit_cache<A: App>(state: &mut crate::RuntimeState<A>) {
+    let (w, h) = state.surface.size();
+    let vp = (w as f32, h as f32);
+    // Mismo resolve de LayoutBuilder que el redraw, para que el hit-test vea
+    // los hijos producidos por builders diferidos.
+    let view = resolve_layout_builders::<A>(
+        state.model.as_ref().expect("model"),
+        vp,
+        &mut state.typesetter,
+    );
+    let overlay_view = A::view_overlay(state.model.as_ref().expect("model"));
+    // `LayoutTree` efímero propio: no tocamos `state.layout`/`retained_layout`
+    // (los usa el redraw retenido) para no ensuciar su reuso incremental.
+    let mut layout = LayoutTree::new();
+    let mounted: Mounted<A::Msg> = mount(&mut layout, view);
+    let computed = {
+        let ts = &mut state.typesetter;
+        let tmap = &mounted.text_measures;
+        layout
+            .compute_with_measure(mounted.root, vp, |nid, known, avail| match tmap.get(&nid) {
+                Some(tm) => measure_text_node(ts, tm, known, avail),
+                None => llimphi_layout::taffy::Size::ZERO,
+            })
+            .expect("layout")
+    };
+    let overlay = overlay_view.map(|ov| {
+        let mut olay = LayoutTree::new();
+        let omounted: Mounted<A::Msg> = mount(&mut olay, ov);
+        let ocomputed = {
+            let ts = &mut state.typesetter;
+            let tmap = &omounted.text_measures;
+            olay.compute_with_measure(omounted.root, vp, |nid, known, avail| {
+                match tmap.get(&nid) {
+                    Some(tm) => measure_text_node(ts, tm, known, avail),
+                    None => llimphi_layout::taffy::Size::ZERO,
+                }
+            })
+            .expect("layout overlay")
+        };
+        let ohover =
+            hit_test_hover(&omounted, &ocomputed, state.cursor.x as f32, state.cursor.y as f32);
+        crate::OverlayCache { mounted: omounted, computed: ocomputed, hover_idx: ohover }
+    });
+    let hover_idx = if overlay.is_some() {
+        None
+    } else {
+        hit_test_hover(&mounted, &computed, state.cursor.x as f32, state.cursor.y as f32)
+    };
+    state.last_render = Some(crate::RenderCache {
+        mounted,
+        computed,
+        hover_idx,
+        drop_hover_idx: None,
+        overlay,
+    });
+    // Montamos sin pintar → el frame retenido ya no representa el modelo
+    // vigente. Invalidar la retención fuerza un redraw completo (correcto).
+    state.retained = None;
+}
+
 impl<A: App> Runtime<A> {
     /// Maneja un `WindowEvent` de la ventana primaria. La delegación a
     /// secciones internas sigue el orden de frecuencia (más común primero).
@@ -89,9 +175,56 @@ impl<A: App> Runtime<A> {
             WindowEvent::CursorMoved { position, .. } => {
                 self.handle_cursor_moved(position);
             }
+            WindowEvent::Focused(focused) => {
+                // Perder el foco con un drag activo casi siempre significa un
+                // release perdido (soltado fuera de la ventana / grab que el
+                // compositor no entregó). Cerrarlo aquí evita el drag colgado
+                // que se come todos los CursorMoved para siempre.
+                if !focused {
+                    if let Some(drag) = state.drag.take() {
+                        let end_msg = match &drag.handler {
+                            DragHandlerKind::Delta(h) => h(DragPhase::End, 0.0, 0.0),
+                            DragHandlerKind::DeltaAt(h, lx0, ly0) => {
+                                h(DragPhase::End, 0.0, 0.0, *lx0, *ly0)
+                            }
+                            DragHandlerKind::Velocity(h) => {
+                                h(DragPhase::End, 0.0, 0.0, 0.0, 0.0)
+                            }
+                        };
+                        if let Some(msg) = end_msg {
+                            let model = state.model.take().expect("model");
+                            state.model = Some(A::update(model, msg, &self.handle));
+                        }
+                        state.last_render = None;
+                        state.window.request_redraw();
+                    }
+                }
+                // El foco de la ventana entró/salió. La app puede replegarse a
+                // una barra, pausar animaciones, etc. (distinto del foco de nodo
+                // que maneja `on_focus`).
+                if let Some(msg) =
+                    A::on_window_focus(state.model.as_ref().expect("model"), focused)
+                {
+                    let model = state.model.take().expect("model");
+                    state.model = Some(A::update(model, msg, &self.handle));
+                    state.last_render = None;
+                    state.window.request_redraw();
+                }
+            }
             WindowEvent::ModifiersChanged(mods) => {
                 let Some(state) = self.state.as_mut() else { return };
                 state.modifiers = mods.state().into();
+                // La app puede querer saberlo (Shift+click / Ctrl+click de una
+                // lista: el click no lleva los modificadores, así que se
+                // guardan en el modelo). `None` = no le importa, sin repintar.
+                if let Some(msg) =
+                    A::on_modifiers(state.model.as_ref().expect("model"), state.modifiers)
+                {
+                    let model = state.model.take().expect("model");
+                    state.model = Some(A::update(model, msg, &self.handle));
+                    state.last_render = None;
+                    state.window.request_redraw();
+                }
             }
             WindowEvent::Ime(ime) if A::ime_allowed() => {
                 self.handle_ime(ime);
@@ -153,11 +286,94 @@ impl<A: App> Runtime<A> {
                     self.state.as_mut().expect("state en redraw"),
                     &self.handle,
                 );
+                // El redraw pudo detectar un DeviceLost (Iris Xe reset de output,
+                // cambio de VT). No lo puede resolver solo — rehacer el device
+                // toca también las surfaces secundarias, que viven en `Runtime`.
+                if self
+                    .state
+                    .as_ref()
+                    .is_some_and(|s| s.needs_device_rebuild)
+                {
+                    self.rebuild_gpu_after_device_loss();
+                }
             }
             _ => {}
         }
     }
 
+    /// Reconstruye **todo el stack GPU** tras un [`llimphi_hal::SurfaceError::DeviceLost`]:
+    /// nuevo `Hal` (instance+adapter+device+queue) + `WinitSurface` primaria,
+    /// renderer vello y los tres compositores; avisa a la app
+    /// ([`App::on_gpu_reset`]) para que rehaga sus recursos propios; rehace las
+    /// surfaces de todas las ventanas secundarias contra el device nuevo (su
+    /// `WinitSurface` cacheaba un clone del device muerto); invalida las caches
+    /// de frame y pide redraw. Es la recuperación real que reemplaza el bandaid
+    /// de forzar backend GL: sirve para CUALQUIER GPU/driver que pierda el device
+    /// (Iris Xe reset de output, TDR de Windows, cambio de VT, suspend/resume),
+    /// no sólo esta máquina. Si el rebuild falla (GPU aún no lista), deja la
+    /// marca y reintenta en el próximo frame.
+    pub(super) fn rebuild_gpu_after_device_loss(&mut self) {
+        let Some(state) = self.state.as_mut() else { return };
+        state.needs_device_rebuild = false;
+        let window = state.window.clone();
+        let (hal, surface) = match llimphi_hal::Hal::recreate_for_window(window) {
+            Ok(pair) => pair,
+            Err(e) => {
+                eprintln!(
+                    "llimphi-ui: rebuild de device tras DeviceLost falló: {e}; reintento al próximo frame"
+                );
+                state.needs_device_rebuild = true;
+                state.window.request_redraw();
+                return;
+            }
+        };
+        let renderer = match llimphi_raster::Renderer::new(&hal) {
+            Ok(r) => r,
+            Err(e) => {
+                eprintln!(
+                    "llimphi-ui: renderer vello no reinicializó tras DeviceLost: {e}; reintento al próximo frame"
+                );
+                state.needs_device_rebuild = true;
+                state.window.request_redraw();
+                return;
+            }
+        };
+        state.overlay_compositor = llimphi_hal::OverlayCompositor::new(&hal.device);
+        state.blur_compositor = llimphi_hal::BlurCompositor::new(&hal.device);
+        state.color_filter_compositor = llimphi_hal::ColorFilterCompositor::new(&hal.device);
+        state.surface = surface;
+        state.renderer = renderer;
+        state.hal = hal;
+        // La app rehace SUS recursos GPU (video/voxel/pipelines directos) contra
+        // el device nuevo. UI pura (vello) = no-op por defecto.
+        if let Some(model) = state.model.as_mut() {
+            A::on_gpu_reset(model, &state.hal);
+        }
+        // Invalidar toda cache de frame: el contenido se re-pinta desde cero.
+        state.last_render = None;
+        state.retained = None;
+        state.window.request_redraw();
+        // Rehacer las surfaces secundarias contra el device nuevo (campos
+        // disjuntos: `self.state` en shared, `self.secondaries` en mut).
+        let new_hal = &self.state.as_ref().expect("state recién puesto").hal;
+        for sec in &mut self.secondaries {
+            match llimphi_hal::WinitSurface::new(new_hal, sec.window.clone()) {
+                Ok(s) => {
+                    sec.surface = s;
+                    sec.last_render = None;
+                    sec.window.request_redraw();
+                }
+                Err(e) => eprintln!(
+                    "llimphi-ui: no se pudo rehacer la surface de una ventana secundaria tras DeviceLost: {e}"
+                ),
+            }
+        }
+        eprintln!(
+            "llimphi-ui: stack GPU reconstruido tras DeviceLost (device+surface+renderer+compositores+{} secundaria/s).",
+            self.secondaries.len()
+        );
+    }
+
     // ── Cursor moved ─────────────────────────────────────────────────────────
 
     fn handle_cursor_moved(
@@ -167,6 +383,21 @@ impl<A: App> Runtime<A> {
         let Some(state) = self.state.as_mut() else { return };
         let prev_cursor = state.cursor;
         state.cursor = position;
+        // Señal cruda de actividad de mouse: se dispara SIEMPRE, sin depender
+        // del hit-test de nodos ni de que haya un frame cacheado (a diferencia
+        // de `on_pointer_move_at`, que requiere `last_render` válido y puede
+        // caer en el hueco donde un Tick lo invalidó). Es lo que un OSC estilo
+        // mpv necesita para revelarse de forma fiable al mover el mouse.
+        if let Some(msg) = A::on_cursor_moved(
+            state.model.as_ref().expect("model"),
+            position.x as f32,
+            position.y as f32,
+        ) {
+            let model = state.model.take().expect("model");
+            state.model = Some(A::update(model, msg, &self.handle));
+            state.last_render = None;
+            state.window.request_redraw();
+        }
         // Selección de texto en curso: extender el foco al punto actual.
         if let Some(tsel) = state.selection.filter(|s| s.dragging) {
             let info = state
@@ -192,6 +423,15 @@ impl<A: App> Runtime<A> {
                 state.pending_long_press = None;
             }
         }
+        // `on_click` armado: si el cursor se alejó del origen del press más que
+        // el umbral, el usuario quiso arrastrar/barrer, no cliquear → cancelar.
+        if let Some(p) = state.pending_click.as_ref() {
+            let dx = position.x - p.origin.x;
+            let dy = position.y - p.origin.y;
+            if (dx * dx + dy * dy).sqrt() > CLICK_MOVE_CANCEL {
+                state.pending_click = None;
+            }
+        }
         // Drag activo: dispatchear delta al handler + actualizar
         // tracking del drop target hovereado (solo si hay payload).
         if let Some(drag) = state.drag.as_mut() {
@@ -208,7 +448,7 @@ impl<A: App> Runtime<A> {
                     }
                     DragHandlerKind::Velocity(h) => {
                         // Durante Move, vx=vy=0 — la velocidad sólo
-                        // tiene sentido al End. Acá registramos el
+                        // tiene sentido al End. Aquí registramos el
                         // sample para esa medición.
                         let now = std::time::Instant::now();
                         drag.samples.push_back((now, dx as f64, dy as f64));
@@ -319,35 +559,38 @@ impl<A: App> Runtime<A> {
                 // re-render (p.ej. el submenú que se abre/cierra).
                 state.last_render = None;
             }
-            // Movimiento posicional: dispatch `on_pointer_move_at` en CADA move
-            // mientras el cursor está sobre el nodo (no sólo al entrar, como
-            // `on_pointer_enter`). Base del thumbnail/drawer que sigue al
-            // cursor. Extraemos el handler (Arc) + rect en un scope para soltar
-            // el borrow del cache antes de mutar el modelo.
-            let move_call: Option<(ClickAtFn<A::Msg>, f32, f32, f32, f32)> =
-                state.last_render.as_ref().and_then(|cache| {
-                    let (mounted, computed) = match cache.overlay.as_ref() {
-                        Some(ov) => (&ov.mounted, &ov.computed),
-                        None => (&cache.mounted, &cache.computed),
-                    };
-                    let px = position.x as f32;
-                    let py = position.y as f32;
-                    let i = hit_test_pointer_move(mounted, computed, px, py)?;
-                    let node = &mounted.nodes[i];
-                    let h = node.on_pointer_move_at.clone()?;
-                    let r = computed.get(node.id)?;
-                    Some((h, px - r.x, py - r.y, r.w, r.h))
-                });
-            if let Some((h, lx, ly, w, hh)) = move_call {
-                if let Some(msg) = h(lx, ly, w, hh) {
-                    let model = state.model.take().expect("model");
-                    state.model = Some(A::update(model, msg, &self.handle));
-                    state.last_render = None;
-                    state.window.request_redraw();
-                }
-            }
             let _ = prev_cursor;
         }
+        // Movimiento posicional: dispatch `on_pointer_move_at` en CADA move
+        // mientras el cursor está sobre el nodo (no sólo al entrar, como
+        // `on_pointer_enter`). Base del thumbnail/drawer que sigue al
+        // cursor. Corre CON o SIN drag activo: un drag colgado (release
+        // perdido fuera de la ventana) no debe comerse la señal de
+        // actividad del mouse (p. ej. el reveal del OSC de media).
+        // Extraemos el handler (Arc) + rect en un scope para soltar el
+        // borrow del cache antes de mutar el modelo.
+        let move_call: Option<(ClickAtFn<A::Msg>, f32, f32, f32, f32)> =
+            state.last_render.as_ref().and_then(|cache| {
+                let (mounted, computed) = match cache.overlay.as_ref() {
+                    Some(ov) => (&ov.mounted, &ov.computed),
+                    None => (&cache.mounted, &cache.computed),
+                };
+                let px = position.x as f32;
+                let py = position.y as f32;
+                let i = hit_test_pointer_move(mounted, computed, px, py)?;
+                let node = &mounted.nodes[i];
+                let h = node.on_pointer_move_at.clone()?;
+                let r = computed.get(node.id)?;
+                Some((h, px - r.x, py - r.y, r.w, r.h))
+            });
+        if let Some((h, lx, ly, w, hh)) = move_call {
+            if let Some(msg) = h(lx, ly, w, hh) {
+                let model = state.model.take().expect("model");
+                state.model = Some(A::update(model, msg, &self.handle));
+                state.last_render = None;
+                state.window.request_redraw();
+            }
+        }
     }
 
     // ── IME ──────────────────────────────────────────────────────────────────
@@ -376,6 +619,43 @@ impl<A: App> Runtime<A> {
         event: llimphi_hal::winit::event::KeyEvent,
     ) {
         let Some(state) = self.state.as_mut() else { return };
+        // ── Auto-repeat sintético: seguimiento de la tecla sostenida ──
+        // winit no siempre genera los eventos repetidos en Wayland; el runtime los
+        // sintetiza en `about_to_wait`. Aquí sólo se ARMA/DESARMA el seguimiento.
+        {
+            use llimphi_hal::winit::keyboard::{Key, NamedKey};
+            if event.repeat {
+                // winit YA repite: apagamos la síntesis propia (no duplicar).
+                state.winit_repeats = true;
+                state.held_key = None;
+            } else if event.state == ElementState::Released {
+                if state
+                    .held_key
+                    .as_ref()
+                    .is_some_and(|h| h.event.logical_key == event.logical_key)
+                {
+                    state.held_key = None;
+                }
+            } else if !state.winit_repeats {
+                // Sólo repiten las teclas de escribir/editar (no modificadores, Tab…).
+                let repetible = event.text.is_some()
+                    || matches!(
+                        event.logical_key,
+                        Key::Named(
+                            NamedKey::Backspace
+                                | NamedKey::Delete
+                                | NamedKey::ArrowLeft
+                                | NamedKey::ArrowRight
+                                | NamedKey::ArrowUp
+                                | NamedKey::ArrowDown
+                        )
+                    );
+                state.held_key = repetible.then(|| crate::HeldKey {
+                    event: event.clone(),
+                    next: std::time::Instant::now() + crate::KEY_REPEAT_DELAY,
+                });
+            }
+        }
         // Tab / Shift+Tab mueven el foco entre nodos `focusable`,
         // que administra el runtime. Sólo intercepta si hay
         // enfocables y en Pressed; si no, cae al `on_key` normal
@@ -448,6 +728,7 @@ impl<A: App> Runtime<A> {
         &mut self,
         delta: MouseScrollDelta,
     ) {
+        let handle = self.handle.clone();
         let Some(state) = self.state.as_mut() else { return };
         // Convención winit: LineDelta es líneas; PixelDelta es
         // píxeles físicos (touchpads). En CSS y aquí, positivo
@@ -462,6 +743,30 @@ impl<A: App> Runtime<A> {
                 y: -(p.y as f32) / 20.0,
             },
         };
+        // Caché de hit-test invalidada (un update recién corrió y el redraw
+        // aún no la reconstruyó): **diferir** — se acumula el delta y se
+        // procesa al final del próximo redraw, contra el árbol fresco. Sin
+        // esto, una app con ticks frecuentes (media a 30/s) invalida la caché
+        // antes de casi cada rueda y el scroll por wheel queda muerto
+        // (chain=0 sistemático, cazado con LLIMPHI_DEBUG_WHEEL en vivo).
+        if state.last_render.is_none() {
+            let acc = state.pending_wheel.get_or_insert(WheelDelta { x: 0.0, y: 0.0 });
+            acc.x += wd.x;
+            acc.y += wd.y;
+            state.window.request_redraw();
+            return;
+        }
+        Self::process_wheel(state, &handle, wd);
+    }
+
+    /// Procesa una rueda contra el árbol de hit-test vigente. Asociada (sin
+    /// `self`) para que también el redraw pueda **replay-ear** la rueda
+    /// diferida (ver `pending_wheel`) con el árbol recién armado.
+    pub(super) fn process_wheel(
+        state: &mut crate::RuntimeState<A>,
+        handle: &crate::Handle<A::Msg>,
+        wd: WheelDelta,
+    ) {
         let cursor = (state.cursor.x as f32, state.cursor.y as f32);
         // Ctrl+rueda = **pinch-to-zoom sintético** (camino universal de
         // desktop: Wayland/Windows no emiten el gesto de pinch del
@@ -481,7 +786,7 @@ impl<A: App> Runtime<A> {
                 let factor = 1.1_f32.powf(-wd.y);
                 if let Some(msg) = h(GesturePhase::Update, factor, fx, fy) {
                     let model = state.model.take().expect("model");
-                    state.model = Some(A::update(model, msg, &self.handle));
+                    state.model = Some(A::update(model, msg, handle));
                     state.last_render = None;
                     state.window.request_redraw();
                 }
@@ -498,37 +803,34 @@ impl<A: App> Runtime<A> {
         // El overlay tiene prioridad, igual que con clicks. Se
         // extraen los handlers en un scope para soltar el borrow
         // del cache antes de mutar el modelo.
-        let scroll_chain: Vec<ScrollFn<A::Msg>> =
-            if let Some(cache) = state.last_render.as_ref() {
-                let (m, c) = match cache.overlay.as_ref() {
-                    Some(ov) => (&ov.mounted, &ov.computed),
-                    None => (&cache.mounted, &cache.computed),
-                };
-                hit_test_scroll_chain(m, c, cursor.0, cursor.1)
-                    .into_iter()
-                    .filter_map(|i| m.nodes[i].on_scroll.clone())
-                    .collect()
-            } else {
-                Vec::new()
+        let mut msgs: Vec<A::Msg> = if let Some(cache) = state.last_render.as_ref() {
+            let (m, c) = match cache.overlay.as_ref() {
+                Some(ov) => (&ov.mounted, &ov.computed),
+                None => (&cache.mounted, &cache.computed),
             };
-        let mut msg: Option<A::Msg> = None;
-        for h in &scroll_chain {
-            if let Some(m) = h(wd.x, wd.y) {
-                msg = Some(m);
-                break;
-            }
-        }
-        if msg.is_none() {
-            msg = A::on_wheel(
+            let chain = hit_test_scroll_chain(m, c, cursor.0, cursor.1);
+            // Reparto parcial: el hijo consume hasta su tope y el sobrante
+            // sigue al ancestro — puede producir VARIOS Msg por evento.
+            consume_scroll_chain(m, &chain, wd.x, wd.y)
+        } else {
+            Vec::new()
+        };
+        if msgs.is_empty() {
+            if let Some(m) = A::on_wheel(
                 state.model.as_ref().expect("model"),
                 wd,
                 cursor,
                 state.modifiers,
-            );
+            ) {
+                msgs.push(m);
+            }
         }
-        if let Some(msg) = msg {
-            let model = state.model.take().expect("model");
-            state.model = Some(A::update(model, msg, &self.handle));
+        if !msgs.is_empty() {
+            let mut model = state.model.take().expect("model");
+            for msg in msgs {
+                model = A::update(model, msg, handle);
+            }
+            state.model = Some(model);
             state.last_render = None;
             state.window.request_redraw();
         }
@@ -618,7 +920,101 @@ impl<A: App> Runtime<A> {
 
     fn handle_left_press(&mut self) {
         let Some(state) = self.state.as_mut() else { return };
+        // Cache frío (típico durante reproducción de video: el tick anula
+        // `last_render` en cada frame y el redraw throttled lo deja `None` al
+        // momento del click): lo reconstruimos desde el modelo vigente ANTES de
+        // resolver el click. Sin esto, todos los hit-tests de abajo se saltaban
+        // y el click era un no-op silencioso (el engranaje de config no abría;
+        // F2 sí, porque el teclado no depende de `last_render`). Ver
+        // `build_hit_cache`.
+        let was_cold = state.last_render.is_none();
+        if was_cold {
+            build_hit_cache::<A>(state);
+        }
         let cursor = state.cursor;
+        // ── DIAG (opt-in `MEDIA_CLICK_DIAG=1`): por qué un click no llega al
+        // nodo que se ve arriba. Reporta si el cache llegó frío (reconstruido),
+        // el nodo que GANA el hit-test (rect + handlers) y TODAS las capas
+        // `over` bajo el cursor — si el gear (capa `over`) está bajo el cursor
+        // pero no gana, es la asimetría paint/hit. ─
+        if click_diag_enabled() {
+            let (cx, cy) = (cursor.x as f32, cursor.y as f32);
+            eprintln!(
+                "[click-diag] handle_left_press cursor=({cx:.0},{cy:.0}) cache={}",
+                if was_cold { "frío→reconstruido" } else { "vigente" },
+            );
+            if let Some(cache) = state.last_render.as_ref() {
+                let (m, c) = match cache.overlay.as_ref() {
+                    Some(ov) => (&ov.mounted, &ov.computed),
+                    None => (&cache.mounted, &cache.computed),
+                };
+                let win = hit_test_click(m, c, cx, cy);
+                match win {
+                    Some(i) => {
+                        let n = &m.nodes[i];
+                        let r = c.get(n.id);
+                        eprintln!(
+                            "[click-diag] cursor=({cx:.0},{cy:.0}) GANA idx={i} rect={r:?} \
+                             on_click={} on_click_screen={} over_layer={}",
+                            n.on_click.is_some(),
+                            n.on_click_screen.is_some(),
+                            n.over_layer,
+                        );
+                    }
+                    None => eprintln!("[click-diag] cursor=({cx:.0},{cy:.0}) sin hit"),
+                }
+                // Capas `over` cuyo rect contiene el cursor (candidatas visibles
+                // "arriba" que el hit-test plano puede estar ignorando).
+                for (i, n) in m.nodes.iter().enumerate() {
+                    if !n.over_layer {
+                        continue;
+                    }
+                    if let Some(r) = c.get(n.id) {
+                        let inside = cx >= r.x && cx < r.x + r.w && cy >= r.y && cy < r.y + r.h;
+                        if inside {
+                            eprintln!(
+                                "[click-diag]   over idx={i} subtree_end={} rect=({:.0},{:.0},{:.0},{:.0}) \
+                                 → contiene el cursor",
+                                n.subtree_end, r.x, r.y, r.w, r.h,
+                            );
+                        }
+                    }
+                }
+            }
+        }
+        // ── Select/dropdown: `on_click_screen` (rect absoluto del nodo) ─────
+        // Un nodo con `on_click_screen` (el disparador de un select) abre su
+        // popup. El handler recibe el RECT ABSOLUTO del nodo `(x, y, w, h)` en
+        // coords de ventana — así el menú puede anclarse al borde inferior del
+        // disparador y copiar su ancho. Aditivo y con prioridad de overlay; si
+        // dispara, cortamos (el disparador no lleva on_click).
+        let screen_hit = state.last_render.as_ref().and_then(|cache| {
+            let (m, c) = match cache.overlay.as_ref() {
+                Some(ov) => (&ov.mounted, &ov.computed),
+                None => (&cache.mounted, &cache.computed),
+            };
+            hit_test_click(m, c, cursor.x as f32, cursor.y as f32).and_then(|i| {
+                let node = &m.nodes[i];
+                let handler = node.on_click_screen.clone()?;
+                // El rect ABSOLUTO del nodo. Si el lookup falla o sale degenerado
+                // (w≈0), caemos al cursor (posición conocida-buena) en vez de a
+                // (0,0) —que anclaba el popup a la esquina de la ventana—.
+                let r = match c.get(node.id) {
+                    Some(r) if r.w > 0.5 => (r.x, r.y, r.w, r.h),
+                    _ => (cursor.x as f32, cursor.y as f32, 0.0, 0.0),
+                };
+                Some((handler, r))
+            })
+        });
+        if let Some((handler, (rx, ry, rw, rh))) = screen_hit {
+            if let Some(msg) = handler(rx, ry, rw, rh) {
+                let model = state.model.take().expect("model");
+                state.model = Some(A::update(model, msg, &self.handle));
+                state.last_render = None;
+                state.window.request_redraw();
+            }
+            return;
+        }
         // Click-to-focus: si el click cae sobre un nodo enfocable,
         // el runtime le da el foco ANTES de procesar la acción de
         // click. Extraemos el id en un scope (suelta el borrow del
@@ -853,10 +1249,12 @@ impl<A: App> Runtime<A> {
                 state.window.request_redraw();
             }
         } else if let Some((_, _, _, _, Some(msg), _, _)) = idx_and_action {
-            let model = state.model.take().expect("model");
-            state.model = Some(A::update(model, msg, &self.handle));
-            state.last_render = None;
-            state.window.request_redraw();
+            // `on_click` plano: NO se dispara en el press. Semántica de
+            // escritorio — se arma y se dispara al soltar (`handle_left_release`)
+            // si el cursor no se alejó más que `CLICK_MOVE_CANCEL`. Así el click
+            // no salta en mousedown y un arrastre minúsculo accidental sigue
+            // contando como click. No invalidamos el cache: nada visual cambió.
+            state.pending_click = Some(PendingClick { msg, origin: cursor });
         }
     }
 
@@ -864,6 +1262,11 @@ impl<A: App> Runtime<A> {
 
     fn handle_middle_press(&mut self) {
         let Some(state) = self.state.as_mut() else { return };
+        // Cache frío (ver `build_hit_cache` / `handle_left_press`): reconstruir
+        // antes de hit-testear para que el click no se pierda durante video.
+        if state.last_render.is_none() {
+            build_hit_cache::<A>(state);
+        }
         // Middle-click: dispatcha `on_middle_click` del nodo
         // bajo cursor si lo declaró. La capa overlay tiene
         // prioridad (mismo razonamiento que el left/right click).
@@ -894,14 +1297,21 @@ impl<A: App> Runtime<A> {
 
     fn handle_right_press(&mut self) {
         let Some(state) = self.state.as_mut() else { return };
+        // Cache frío (ver `build_hit_cache` / `handle_left_press`): reconstruir
+        // antes de hit-testear para que el menú contextual no se pierda durante
+        // video.
+        if state.last_render.is_none() {
+            build_hit_cache::<A>(state);
+        }
         // Right-click: dispatcheamos `on_right_click` o
         // `on_right_click_at` del nodo bajo cursor. La capa
         // overlay tiene prioridad (mismo razonamiento que el
         // left-click). Nodos sin handler de right-click no
         // reaccionan — no "filtramos" al left.
         let cursor = state.cursor;
+        #[allow(clippy::type_complexity)]
         let lookup =
-            |m: &Mounted<A::Msg>, c: &ComputedLayout| -> Option<(Option<A::Msg>, Option<ClickAtFn<A::Msg>>, (f32, f32, f32, f32))> {
+            |m: &Mounted<A::Msg>, c: &ComputedLayout| -> Option<(Option<A::Msg>, Option<ClickAtFn<A::Msg>>, Option<ClickAtFn<A::Msg>>, (f32, f32, f32, f32))> {
                 hit_test_right_click(m, c, cursor.x as f32, cursor.y as f32).map(|i| {
                     let node = &m.nodes[i];
                     let rect = c
@@ -911,6 +1321,7 @@ impl<A: App> Runtime<A> {
                     (
                         node.on_right_click.clone(),
                         node.on_right_click_at.clone(),
+                        node.on_right_click_screen.clone(),
                         rect,
                     )
                 })
@@ -924,14 +1335,14 @@ impl<A: App> Runtime<A> {
         } else {
             None
         };
-        if let Some((msg_opt, at_opt, (ox, oy, rw, rh))) = hit {
-            let msg = if let Some(handler) = at_opt {
-                handler(
-                    cursor.x as f32 - ox,
-                    cursor.y as f32 - oy,
-                    rw,
-                    rh,
-                )
+        if let Some((msg_opt, at_opt, screen_opt, (ox, oy, rw, rh))) = hit {
+            // `on_right_click_screen` (coords absolutas de ventana, para menús
+            // anclados al puntero) gana sobre `on_right_click_at` (coords locales
+            // al nodo, para grillas/canvas), y ambos sobre el `on_right_click` plano.
+            let msg = if let Some(handler) = screen_opt {
+                handler(cursor.x as f32, cursor.y as f32, rw, rh)
+            } else if let Some(handler) = at_opt {
+                handler(cursor.x as f32 - ox, cursor.y as f32 - oy, rw, rh)
             } else {
                 msg_opt
             };
@@ -949,8 +1360,18 @@ impl<A: App> Runtime<A> {
     fn handle_left_release(&mut self) {
         let Some(state) = self.state.as_mut() else { return };
         // El botón se soltó antes de vencer el long-press → no era un
-        // long-press (fue un click/drag); cancelá el gesto armado.
+        // long-press (fue un click/drag); cancela el gesto armado.
         state.pending_long_press = None;
+        // `on_click` armado en el press y no cancelado por movimiento → este es
+        // el click real: se dispara ahora, al soltar. Es mutuamente excluyente
+        // con `drag` (rama else-if en el press), así que no colisiona con el
+        // cierre del drag de más abajo.
+        if let Some(pending) = state.pending_click.take() {
+            let model = state.model.take().expect("model");
+            state.model = Some(A::update(model, pending.msg, &self.handle));
+            state.last_render = None;
+            state.window.request_redraw();
+        }
         // Fin del arrastre de selección: la selección queda viva (para
         // Ctrl/Cmd+C) pero deja de extenderse con el cursor.
         if let Some(tsel) = state.selection.as_mut() {
diff --git a/llimphi-ui/src/eventloop/mod.rs b/llimphi-ui/src/eventloop/mod.rs
index 601bd8d..0d0d21a 100644
--- a/llimphi-ui/src/eventloop/mod.rs
+++ b/llimphi-ui/src/eventloop/mod.rs
@@ -15,11 +15,72 @@
 mod a11y_rt;
 mod helpers;
 mod input;
+mod perf;
 mod redraw;
 mod secondary;
 
 use super::*;
 
+/// Traza un hito de arranque con su epoch-ms si `LLIMPHI_TIMING` está puesto.
+/// Sirve para perfilar el camino frío hasta el primer frame (init de wgpu/Hal,
+/// surface, renderer) sin afectar a nadie en condiciones normales. Off por
+/// defecto: una sola lectura de env, cero costo si no está.
+pub(crate) fn timing_hito(hito: &str) {
+    if std::env::var_os("LLIMPHI_TIMING").is_some() {
+        let ms = std::time::SystemTime::now()
+            .duration_since(std::time::UNIX_EPOCH)
+            .map(|d| d.as_millis())
+            .unwrap_or(0);
+        eprintln!("[llimphi-timing] {hito} epoch_ms={ms}");
+    }
+}
+
+/// Avisa a winit que estamos por presentar. **Es lo que engancha la app al
+/// ritmo del compositor**, y hay que llamarlo justo antes de cada `present`.
+///
+/// En Wayland, winit sólo pide un `wl_surface.frame` si la app llama a esto
+/// (`window/mod.rs::pre_present_notify` → `request_frame_callback`). Y su
+/// bucle (`event_loop/mod.rs:486`) suprime el `RedrawRequested` mientras haya
+/// un callback pedido sin llegar. Sin esta llamada, `frame_callback_state()`
+/// nunca vale `Requested`, el gate **nunca** se activa y la app repinta contra
+/// su propio temporizador **ignorando por completo al compositor**: sigue
+/// gastando GPU en otro escritorio, tapada o con la pantalla apagada.
+///
+/// Hallado 2026-07-21 midiendo `media-app`: oculto en otro escritorio rendía
+/// los mismos 4 fps y el mismo 10% de un core que visible. El gate de frames
+/// de `mirada` no tenía efecto porque **ningún cliente llimphi escuchaba**.
+///
+/// No bloquea ni cambia el modo de presentación (seguimos en `Mailbox`, ver
+/// `choose_present_mode`): sólo adjunta el callback para que winit pueda
+/// pacear. Y no pierde repintados — winit consulta el gate **antes** de
+/// consumir el flag de `request_redraw`, así que un redraw suprimido queda
+/// pendiente y sale en cuanto llega el callback.
+///
+/// Escotilla: `LLIMPHI_FRAME_CALLBACK=0` vuelve al comportamiento viejo (libre,
+/// sin pacing) sin recompilar. Está porque esto afecta a TODAS las apps del
+/// escritorio y el modo de falla —una ventana visible que no repinta— se
+/// arregla más rápido con una variable de entorno que con un build.
+pub(crate) fn notificar_present(window: &llimphi_hal::winit::window::Window) {
+    use std::sync::OnceLock;
+    static ACTIVO: OnceLock<bool> = OnceLock::new();
+    if *ACTIVO.get_or_init(|| {
+        !matches!(
+            std::env::var("LLIMPHI_FRAME_CALLBACK").as_deref(),
+            Ok("0") | Ok("no") | Ok("off")
+        )
+    }) {
+        window.pre_present_notify();
+    }
+}
+
+/// Marca el PRIMER present (cualquiera de los dos caminos) — el frame que de
+/// verdad llega a la pantalla. `Once` para que sólo dispare una vez.
+pub(crate) fn timing_primer_present() {
+    use std::sync::Once;
+    static UNA_VEZ: Once = Once::new();
+    UNA_VEZ.call_once(|| timing_hito("primer-present"));
+}
+
 pub(crate) fn build_window_attributes<A: App>() -> WindowAttributes {
     let (w, h) = A::initial_size();
     let attrs = WindowAttributes::default()
@@ -68,6 +129,7 @@ impl<A: App> ApplicationHandler<UserEvent<A::Msg>> for Runtime<A> {
         if self.state.is_some() {
             return;
         }
+        timing_hito("resumed:entrada");
         let window = event_loop
             .create_window(build_window_attributes::<A>())
             .expect("create window");
@@ -91,9 +153,24 @@ impl<A: App> ApplicationHandler<UserEvent<A::Msg>> for Runtime<A> {
         let a11y_adapter =
             accesskit_winit::Adapter::with_event_loop_proxy(event_loop, &window, a11y_proxy);
         let a11y_tree_id = accesskit::TreeId(uuid::Uuid::new_v4());
-        let hal = pollster::block_on(Hal::new(None)).expect("hal");
-        let surface = WinitSurface::new(&hal, window.clone()).expect("surface");
+        timing_hito("resumed:antes-de-Hal");
+        // Desktop: adapter primero, surface después (la secuencia clásica).
+        #[cfg(not(target_os = "android"))]
+        let (hal, surface) = {
+            let hal = pollster::block_on(Hal::new(None)).expect("hal");
+            timing_hito("resumed:Hal-listo");
+            let surface = WinitSurface::new(&hal, window.clone()).expect("surface");
+            (hal, surface)
+        };
+        // Android: surface-first obligatorio. La surface debe existir ANTES
+        // del request_adapter(compatible_surface=Some(...)) y no puede
+        // recrearse sobre la misma ANativeWindow (ERROR_NATIVE_WINDOW_IN_USE_KHR).
+        // `recreate_for_window` ya implementa exactamente ese orden.
+        #[cfg(target_os = "android")]
+        let (hal, surface) =
+            Hal::recreate_for_window(window.clone()).expect("hal+surface android");
         let renderer = Renderer::new(&hal).expect("renderer");
+        timing_hito("resumed:renderer-listo");
         let overlay_compositor = llimphi_hal::OverlayCompositor::new(&hal.device);
         let blur_compositor = llimphi_hal::BlurCompositor::new(&hal.device);
         let color_filter_compositor = llimphi_hal::ColorFilterCompositor::new(&hal.device);
@@ -108,7 +185,12 @@ impl<A: App> ApplicationHandler<UserEvent<A::Msg>> for Runtime<A> {
             overlay_compositor,
             blur_compositor,
             color_filter_compositor,
-            model: Some(A::init(&self.handle)),
+            // Primer arranque → `A::init`; re-entrada tras un `suspended`
+            // (Android background→foreground) → el modelo parkeado sigue vivo.
+            model: Some(match self.parked_model.take() {
+                Some(m) => m,
+                None => A::init(&self.handle),
+            }),
             cursor: PhysicalPosition::new(0.0, 0.0),
             modifiers: Modifiers::default(),
             typesetter,
@@ -123,12 +205,20 @@ impl<A: App> ApplicationHandler<UserEvent<A::Msg>> for Runtime<A> {
             size_anim_registry: llimphi_compositor::SizeAnimRegistry::new(),
             hero_registry: llimphi_compositor::HeroRegistry::new(),
             ripple_registry: llimphi_compositor::RippleRegistry::new(),
+            repaint_cache: llimphi_compositor::RepaintCache::new(),
+            retained_layout: None,
+            memo_registry: llimphi_compositor::MemoRegistry::new(),
             last_tap: None,
             pending_long_press: None,
+            pending_click: None,
+            pending_wheel: None,
+            held_key: None,
+            winit_repeats: false,
             retained: None,
             selection: None,
             a11y_adapter,
             a11y_tree_id,
+            needs_device_rebuild: false,
         });
         // Sincroniza el factor de escala inicial (el de la ventana recién
         // creada) ANTES del primer render: así una app que dependa del DPI
@@ -163,12 +253,31 @@ impl<A: App> ApplicationHandler<UserEvent<A::Msg>> for Runtime<A> {
                     self.secondaries.remove(pos);
                 }
             }
+            UserEvent::SetMinimized(min) => {
+                if let Some(state) = self.state.as_ref() {
+                    state.window.set_minimized(min);
+                }
+            }
             UserEvent::A11y(ev) => {
                 self.handle_a11y_event(ev);
             }
         }
     }
 
+    /// Android/iOS/web: la app pasó a background y la NativeWindow deja de
+    /// ser válida — TODO el estado GPU (surface, device, texturas, renderer)
+    /// debe soltarse. El modelo de la app se parquea y `resumed` lo retoma
+    /// al volver, recreando el stack gráfico desde cero contra la ventana
+    /// nueva. En desktop winit nunca llama esto.
+    fn suspended(&mut self, _event_loop: &ActiveEventLoop) {
+        if let Some(mut st) = self.state.take() {
+            self.parked_model = st.model.take();
+        }
+        // Las secundarias también cuelgan de la NativeWindow/device viejos.
+        self.secondaries.clear();
+        self.active_touch = None;
+    }
+
     fn window_event(
         &mut self,
         event_loop: &ActiveEventLoop,
@@ -181,6 +290,55 @@ impl<A: App> ApplicationHandler<UserEvent<A::Msg>> for Runtime<A> {
             self.handle_secondary_event(idx, event);
             return;
         }
+        // Touch → puntero: en móvil los eventos llegan como `Touch`, no como
+        // CursorMoved/MouseInput. Traducimos el PRIMER dedo a la secuencia de
+        // mouse equivalente (move+press / move / move+release) y lo ruteamos
+        // por el mismo handler primario — tap=click, arrastre=drag, sin
+        // duplicar ninguna lógica de hit-test/gestos. Dedos extra se ignoran
+        // hasta que el activo suelte (multi-touch real queda para después).
+        if let WindowEvent::Touch(t) = &event {
+            use llimphi_hal::winit::event::{ElementState, MouseButton, TouchPhase};
+            let es_activo = match self.active_touch {
+                Some(id) => id == t.id,
+                None => t.phase == TouchPhase::Started,
+            };
+            if !es_activo {
+                return;
+            }
+            let device_id = t.device_id;
+            let position = t.location;
+            let moved = WindowEvent::CursorMoved { device_id, position };
+            match t.phase {
+                TouchPhase::Started => {
+                    self.active_touch = Some(t.id);
+                    self.handle_primary_window_event(event_loop, moved);
+                    self.handle_primary_window_event(
+                        event_loop,
+                        WindowEvent::MouseInput {
+                            device_id,
+                            state: ElementState::Pressed,
+                            button: MouseButton::Left,
+                        },
+                    );
+                }
+                TouchPhase::Moved => {
+                    self.handle_primary_window_event(event_loop, moved);
+                }
+                TouchPhase::Ended | TouchPhase::Cancelled => {
+                    self.active_touch = None;
+                    self.handle_primary_window_event(event_loop, moved);
+                    self.handle_primary_window_event(
+                        event_loop,
+                        WindowEvent::MouseInput {
+                            device_id,
+                            state: ElementState::Released,
+                            button: MouseButton::Left,
+                        },
+                    );
+                }
+            }
+            return;
+        }
         self.handle_primary_window_event(event_loop, event);
     }
 
@@ -197,21 +355,44 @@ impl<A: App> ApplicationHandler<UserEvent<A::Msg>> for Runtime<A> {
         let Some(state) = self.state.as_mut() else {
             return;
         };
-        match state.pending_long_press.as_ref() {
-            Some(p) => {
-                if std::time::Instant::now() >= p.deadline {
-                    let handler = state.pending_long_press.take().expect("pending").handler;
-                    event_loop.set_control_flow(ControlFlow::Wait);
-                    if let Some(msg) = handler.invoke() {
-                        let model = state.model.take().expect("model");
-                        state.model = Some(A::update(model, msg, &self.handle));
-                        state.last_render = None;
-                        state.window.request_redraw();
-                    }
-                } else {
-                    event_loop.set_control_flow(ControlFlow::WaitUntil(p.deadline));
-                }
+        let now = std::time::Instant::now();
+        // 1. Auto-repeat de tecla: si la sostenida venció, re-emitíla (repeat=true)
+        //    y reprograma el próximo disparo al intervalo. Sólo si winit no repite él.
+        if !state.winit_repeats && state.held_key.as_ref().is_some_and(|h| now >= h.next) {
+            let winit_ev = state.held_key.as_ref().expect("held").event.clone();
+            state.held_key.as_mut().expect("held").next = now + KEY_REPEAT_INTERVAL;
+            let ev = crate::KeyEvent {
+                key: winit_ev.logical_key.clone(),
+                state: crate::KeyState::Pressed,
+                text: winit_ev.text.as_ref().map(|t| t.to_string()),
+                modifiers: state.modifiers,
+                repeat: true,
+            };
+            if let Some(msg) = A::on_key(state.model.as_ref().expect("model"), &ev) {
+                let model = state.model.take().expect("model");
+                state.model = Some(A::update(model, msg, &self.handle));
+                state.last_render = None;
+                state.window.request_redraw();
             }
+        }
+        // 2. Long-press: si venció, dispará su `Msg` (lógica existente).
+        if state.pending_long_press.as_ref().is_some_and(|p| now >= p.deadline) {
+            let handler = state.pending_long_press.take().expect("pending").handler;
+            if let Some(msg) = handler.invoke() {
+                let model = state.model.take().expect("model");
+                state.model = Some(A::update(model, msg, &self.handle));
+                state.last_render = None;
+                state.window.request_redraw();
+            }
+        }
+        // 3. Dormir hasta el deadline pendiente MÁS CERCANO (repeat o long-press);
+        //    sin ninguno, `Wait` (hasta el próximo evento).
+        let lp = state.pending_long_press.as_ref().map(|p| p.deadline);
+        let hk = (!state.winit_repeats)
+            .then(|| state.held_key.as_ref().map(|h| h.next))
+            .flatten();
+        match [lp, hk].into_iter().flatten().min() {
+            Some(d) => event_loop.set_control_flow(ControlFlow::WaitUntil(d)),
             None => event_loop.set_control_flow(ControlFlow::Wait),
         }
     }
diff --git a/llimphi-ui/src/eventloop/perf.rs b/llimphi-ui/src/eventloop/perf.rs
new file mode 100644
index 0000000..43d045b
--- /dev/null
+++ b/llimphi-ui/src/eventloop/perf.rs
@@ -0,0 +1,228 @@
+// eventloop/perf.rs — Bloque 21 (PLAN-NUCLEO-RETENIDO.md): perfilador por frame
+// del camino COMPLETO de redraw (view → mount → layout → paint → raster → gpu →
+// present). Off por defecto. Se enciende con `LLIMPHI_PERF=1` (o `=N` para
+// reportar cada N frames; default 60). Cero costo apagado: una sola lectura de
+// env cacheada, y ni siquiera se toman timestamps.
+//
+// El camino `cache_hit` (retención de frame entero) NO se muestrea a propósito:
+// este contador mide sólo el trabajo que los Bloques 22–25 buscan reducir, así
+// que la regla del repo (§8: certificar con números, no screenshots) tiene una
+// base honesta de antes/después.
+
+use std::cell::RefCell;
+use std::sync::OnceLock;
+use std::time::Instant;
+
+/// Intervalo de reporte en frames. `None` = perfilador apagado. Cacheado: una
+/// sola lectura de env por proceso.
+fn interval() -> Option<u64> {
+    static CELL: OnceLock<Option<u64>> = OnceLock::new();
+    *CELL.get_or_init(|| match std::env::var("LLIMPHI_PERF") {
+        // El valor es el intervalo de reporte en frames. `1`/no-numérico ⇒ 60
+        // (default): así `LLIMPHI_PERF=1` significa "encendido, reporta cada 60"
+        // y no floodea una línea por frame. `=120` = cada 120; `=0` = apagado.
+        Ok(v) if !v.is_empty() && v != "0" => {
+            Some(v.parse::<u64>().ok().filter(|&n| n >= 2).unwrap_or(60))
+        }
+        _ => None,
+    })
+}
+
+/// `true` si el perfilador está activo.
+#[inline]
+pub(crate) fn enabled() -> bool {
+    interval().is_some()
+}
+
+/// Toma un timestamp sólo si el perfilador está activo (`on`). Cuando está
+/// apagado devuelve `None` y no toca el reloj.
+#[inline]
+pub(crate) fn mark(on: bool) -> Option<Instant> {
+    if on {
+        Some(Instant::now())
+    } else {
+        None
+    }
+}
+
+/// Microsegundos entre dos marcas. `0.0` si alguna es `None` (perfilador off).
+#[inline]
+pub(crate) fn us(a: Option<Instant>, b: Option<Instant>) -> f64 {
+    match (a, b) {
+        (Some(a), Some(b)) => b.saturating_duration_since(a).as_secs_f64() * 1e6,
+        _ => 0.0,
+    }
+}
+
+/// Lectura del contador de asignaciones (`crate::alloc`) en un punto del frame.
+#[derive(Clone, Copy, Default)]
+pub(crate) struct AllocMark {
+    asignaciones: u64,
+    bytes: u64,
+}
+
+/// Toma una lectura del contador de heap sólo si el perfilador está activo.
+/// Cuando está apagado no toca ni los atómicos.
+#[inline]
+pub(crate) fn alloc_mark(on: bool) -> Option<AllocMark> {
+    if on {
+        let (asignaciones, bytes, _libres) = crate::alloc::snapshot();
+        Some(AllocMark {
+            asignaciones,
+            bytes,
+        })
+    } else {
+        None
+    }
+}
+
+/// Asignaciones entre dos lecturas. `0` si alguna es `None` (perfilador off) o
+/// si nadie instaló el contador (entonces ambas leen el mismo cero).
+#[inline]
+pub(crate) fn allocs(a: Option<AllocMark>, b: Option<AllocMark>) -> u64 {
+    match (a, b) {
+        (Some(a), Some(b)) => b.asignaciones.saturating_sub(a.asignaciones),
+        _ => 0,
+    }
+}
+
+/// Bytes pedidos al heap entre dos lecturas (crecimiento neto en los realloc).
+#[inline]
+pub(crate) fn alloc_bytes(a: Option<AllocMark>, b: Option<AllocMark>) -> u64 {
+    match (a, b) {
+        (Some(a), Some(b)) => b.bytes.saturating_sub(a.bytes),
+        _ => 0,
+    }
+}
+
+/// Una muestra de frame: microsegundos por etapa + conteo de nodos.
+#[derive(Clone, Copy, Default)]
+pub(crate) struct FrameSample {
+    pub view_us: f64,
+    pub mount_us: f64,
+    pub layout_us: f64,
+    /// Incluye reconciles (anim/hero/size), mount+layout del overlay, hit-tests
+    /// y el paint de la escena principal (fills/text/ghosts/ripple/overlay).
+    pub paint_us: f64,
+    /// Rasterización vello de la escena principal (`Renderer::render`).
+    pub raster_us: f64,
+    /// Pasadas GPU directas + backdrop/filter + composites + submit.
+    pub gpu_us: f64,
+    /// Desglose del tramo `gpu` para la capa `over` (subárboles `View::over`),
+    /// que es el camino caro cuando una app tiene fondo/OSC encima del canvas:
+    /// crear la scratch del tamaño del frame · rasterizarla con vello · el
+    /// `submit` final. Se reportan sólo si alguno es no-cero.
+    /// Construir la escena vello de la capa over: corre los `paint_with` de
+    /// la app (p. ej. el fondo animado de media). Puro CPU.
+    pub over_paint_us: f64,
+    pub over_tex_us: f64,
+    pub over_raster_us: f64,
+    pub submit_us: f64,
+    pub present_us: f64,
+    pub total_us: f64,
+    pub n_nodes: usize,
+    /// Aciertos/fallos ACUMULADOS del caché de RepaintBoundary (Bloque 23) al
+    /// cierre del frame. El reporte muestra el delta del lote (hits/misses en
+    /// esta ventana) — sólo si hubo actividad de boundary.
+    pub boundary_hits: u64,
+    pub boundary_misses: u64,
+    /// `true` si este frame reusó el layout retenido (Bloque 24) en vez de
+    /// hacer `clear`+rebuild. El reporte muestra cuántos frames del lote lo
+    /// hicieron.
+    pub layout_reused: bool,
+    /// Asignaciones de heap del frame completo y desglose por las mismas etapas
+    /// que los µs (`view` incluye el `view()` de la app + los builders diferidos
+    /// + el size-anim; `paint` incluye reconciles, overlay, hit-tests y la
+    /// construcción de la `Scene`). Todo cero si nadie instaló
+    /// [`crate::alloc::ContadorAlloc`] — el reporte lo distingue con `n/a`.
+    pub allocs: u64,
+    pub allocs_view: u64,
+    pub allocs_mount: u64,
+    pub allocs_layout: u64,
+    pub allocs_paint: u64,
+    /// Bytes pedidos al heap en el frame (crecimiento neto en los `realloc`).
+    pub alloc_bytes: u64,
+}
+
+thread_local! {
+    static BUF: RefCell<Vec<FrameSample>> = const { RefCell::new(Vec::new()) };
+}
+
+/// Acumula una muestra y, cada `interval()` frames, imprime media + p95 por
+/// etapa a stderr. No-op si el perfilador está apagado.
+pub(crate) fn submit(s: FrameSample) {
+    let Some(n) = interval() else { return };
+    BUF.with(|b| {
+        let mut b = b.borrow_mut();
+        b.push(s);
+        if b.len() as u64 >= n {
+            report(&b);
+            b.clear();
+        }
+    });
+}
+
+fn report(samples: &[FrameSample]) {
+    let n = samples.len();
+    if n == 0 {
+        return;
+    }
+    let stat = |get: fn(&FrameSample) -> f64| -> (f64, f64) {
+        let mut v: Vec<f64> = samples.iter().map(get).collect();
+        let mean = v.iter().sum::<f64>() / n as f64;
+        v.sort_by(|a, b| a.partial_cmp(b).unwrap_or(std::cmp::Ordering::Equal));
+        let idx = (((n as f64) * 0.95) as usize).min(n - 1);
+        (mean, v[idx])
+    };
+    let nodes = samples.iter().map(|s| s.n_nodes).max().unwrap_or(0);
+    let (t_m, t_p) = stat(|s| s.total_us);
+    let (v_m, v_p) = stat(|s| s.view_us);
+    let (mo_m, mo_p) = stat(|s| s.mount_us);
+    let (l_m, l_p) = stat(|s| s.layout_us);
+    let (p_m, p_p) = stat(|s| s.paint_us);
+    let (r_m, r_p) = stat(|s| s.raster_us);
+    let (g_m, g_p) = stat(|s| s.gpu_us);
+    let (pr_m, pr_p) = stat(|s| s.present_us);
+    // Delta de boundary-cache en la ventana del lote (acumulado último − primero).
+    let bh = samples.last().unwrap().boundary_hits - samples.first().unwrap().boundary_hits;
+    let bm = samples.last().unwrap().boundary_misses - samples.first().unwrap().boundary_misses;
+    let boundary = if bh + bm > 0 {
+        format!(" | boundary {bh} hits / {bm} miss")
+    } else {
+        String::new()
+    };
+    let reused = samples.iter().filter(|s| s.layout_reused).count();
+    // Desglose del tramo `gpu`: sólo si la capa over estuvo activa en el lote.
+    let (op_m, _) = stat(|s| s.over_paint_us);
+    let (ot_m, _) = stat(|s| s.over_tex_us);
+    let (or_m, _) = stat(|s| s.over_raster_us);
+    let (sb_m, _) = stat(|s| s.submit_us);
+    let over = if op_m + ot_m + or_m + sb_m > 0.0 {
+        format!(" | over-paint {op_m:.0} over-tex {ot_m:.0} over-raster {or_m:.0} submit {sb_m:.0}")
+    } else {
+        String::new()
+    };
+    // Asignaciones por frame. Sin contador instalado no inventamos ceros: `n/a`
+    // + cómo encenderlo.
+    let alloc = if crate::alloc::instalado() {
+        let (a_m, a_p) = stat(|s| s.allocs as f64);
+        let (b_m, _) = stat(|s| s.alloc_bytes as f64);
+        let (av_m, _) = stat(|s| s.allocs_view as f64);
+        let (am_m, _) = stat(|s| s.allocs_mount as f64);
+        let (al_m, _) = stat(|s| s.allocs_layout as f64);
+        let (ap_m, _) = stat(|s| s.allocs_paint as f64);
+        format!(
+            " | alloc {a_m:.0}/{a_p:.0} ({:.0} KB) [view {av_m:.0} mount {am_m:.0} \
+             layout {al_m:.0} paint {ap_m:.0}]",
+            b_m / 1024.0
+        )
+    } else {
+        " | alloc n/a (--features llimphi-ui/perf-alloc)".to_string()
+    };
+    eprintln!(
+        "[llimphi-perf] n={n} nodes={nodes} | total {t_m:.0}/{t_p:.0} | \
+         view {v_m:.0}/{v_p:.0} mount {mo_m:.0}/{mo_p:.0} layout {l_m:.0}/{l_p:.0} \
+         paint {p_m:.0}/{p_p:.0} raster {r_m:.0}/{r_p:.0} gpu {g_m:.0}/{g_p:.0} \
+         present {pr_m:.0}/{pr_p:.0} µs (media/p95) | layout-reuso {reused}/{n}{boundary}{over}{alloc}"
+    );
+}
diff --git a/llimphi-ui/src/eventloop/redraw.rs b/llimphi-ui/src/eventloop/redraw.rs
index 112e8c2..7eefe42 100644
--- a/llimphi-ui/src/eventloop/redraw.rs
+++ b/llimphi-ui/src/eventloop/redraw.rs
@@ -41,6 +41,7 @@ pub(super) fn handle_redraw<A: App>(
             !r.animating
                 && !r.rippling
                 && !r.has_overlay
+                && !r.has_gpu_paint
                 && (r.w, r.h) == state.surface.size()
         });
     if cache_hit {
@@ -51,11 +52,19 @@ pub(super) fn handle_redraw<A: App>(
                     .render(&state.hal, &state.scene, &frame, palette::css::BLACK)
                     .is_ok()
                 {
+                    super::timing_primer_present();
+                    super::notificar_present(&state.window);
                     state.surface.present(frame, &state.hal);
                     return;
                 }
                 // render falló → cae al camino completo
             }
+            Err(llimphi_hal::SurfaceError::DeviceLost) => {
+                // Device irrecuperable: marca y salí. El dispatcher rehace el
+                // stack GPU tras el redraw (`rebuild_gpu_after_device_loss`).
+                state.needs_device_rebuild = true;
+                return;
+            }
             Err(_) => { /* surface efímera → camino completo */ }
         }
     }
@@ -68,7 +77,7 @@ pub(super) fn handle_redraw<A: App>(
             state.last_title = Some(t);
         }
     }
-    // Posicioná la ventana de candidatos del IME junto al caret
+    // Posiciona la ventana de candidatos del IME junto al caret
     // (sólo con IME activo y si la app reporta el área).
     if A::ime_allowed() {
         if let Some((x, y, w, h)) =
@@ -85,6 +94,12 @@ pub(super) fn handle_redraw<A: App>(
     }
     let frame = match state.surface.acquire() {
         Ok(f) => f,
+        Err(llimphi_hal::SurfaceError::DeviceLost) => {
+            // Device irrecuperable: marca y salí; el dispatcher rehace el stack
+            // GPU tras el redraw (`rebuild_gpu_after_device_loss`).
+            state.needs_device_rebuild = true;
+            return;
+        }
         Err(_) => {
             let (w, h) = state.surface.size();
             state.surface.resize(w, h);
@@ -93,6 +108,13 @@ pub(super) fn handle_redraw<A: App>(
         }
     };
     let (w, h) = frame.size();
+    // Bloque 21 — perfilador por frame (`LLIMPHI_PERF`). Cero costo apagado.
+    let pf = super::perf::enabled();
+    let m_start = super::perf::mark(pf);
+    // Contador de asignaciones de heap: se muestrea en los MISMOS puntos que los
+    // µs, así el desglose de allocs es comparable etapa por etapa. Cero si nadie
+    // instaló `crate::alloc::ContadorAlloc` (ver feature `perf-alloc`).
+    let a_start = super::perf::alloc_mark(pf);
     // LayoutBuilder: resuelve los constructores diferidos en dos
     // pasadas (coste cero si no hay ninguno). Necesita el typesetter
     // para medir, así que va antes de tomar `model_ref` para el overlay.
@@ -114,11 +136,28 @@ pub(super) fn handle_redraw<A: App>(
     );
     let model_ref = state.model.as_ref().expect("model");
     let overlay_view = A::view_overlay(model_ref);
-    // Reusamos los árboles de layout del runtime: `clear()` +
-    // `mount` evita re-allocar el slotmap de taffy por frame.
-    state.layout.clear();
-    let mut mounted: Mounted<A::Msg> = mount(&mut state.layout, view);
-    let computed = {
+    // Bloque 24 — layout retenido. `mount_incremental` reusa los `NodeId` de
+    // taffy del frame anterior cuando la FORMA del árbol no cambió (sólo re-estila
+    // /re-mide lo que cambió), dejando limpio el resto para que taffy saltee su
+    // re-solve. Si la forma cambió, cae a `clear()`+rebuild histórico → cero
+    // regresión. Correctitud probada por el arnés de fuzz (retenido==fresco).
+    // Bloque 25 — extrae los builders de los nodos `memo` (dejándolos como
+    // marcadores) ANTES del mount. Sin nodos memo, `memo_pending` queda vacío y
+    // todo lo de abajo es no-op. Debe correr tras el size-anim (que muta el view).
+    let mut memo_pending = Vec::new();
+    llimphi_compositor::take_memo_builders(&mut view, &mut memo_pending);
+    let m_view = super::perf::mark(pf);
+    let a_view = super::perf::alloc_mark(pf);
+    let (mut mounted, retained, layout_reused): (Mounted<A::Msg>, _, bool) =
+        llimphi_compositor::mount_incremental(
+            &mut state.layout,
+            view,
+            state.retained_layout.as_ref(),
+        );
+    state.retained_layout = Some(retained);
+    let m_mount = super::perf::mark(pf);
+    let a_mount = super::perf::alloc_mark(pf);
+    let mut computed = {
         let ts = &mut state.typesetter;
         let tmap = &mounted.text_measures;
         state
@@ -131,12 +170,31 @@ pub(super) fn handle_redraw<A: App>(
             })
             .expect("layout")
     };
+    // Bloque 25 — splice de los subárboles memoizados en el Mounted/computed ya
+    // calculados: reusa el cacheado (sin reconstruir el View) o lo reconstruye si
+    // deps/tamaño cambiaron. No-op sin memos.
+    if !memo_pending.is_empty() {
+        let ts = &mut state.typesetter;
+        llimphi_compositor::splice_memos(
+            &mut mounted,
+            &mut computed,
+            &memo_pending,
+            &mut state.memo_registry,
+            |tm, k, a| measure_text_node(ts, tm, k, a),
+        );
+    }
+    let m_layout = super::perf::mark(pf);
+    let a_layout = super::perf::alloc_mark(pf);
     // Animaciones implícitas (`View::animated`): reconcilia el árbol
     // con el estado retenido DESPUÉS del layout y ANTES del paint —
     // interpola fill/radius de los nodos con `anim`. Si alguna sigue
     // viva pedimos otro frame al final (ticker autodetenido).
     let now = frame_now;
     let anim_active = state.anim_registry.reconcile(&mut mounted, now);
+    // Scene-split de fantasmas: el contenido viejo de un switch con
+    // `exit_under` se hornea como `underlay` del nodo — el paint lo apendea
+    // DEBAJO del contenido nuevo, en su posición z (no encima de todo).
+    state.anim_registry.prepare_underlays(&mut mounted, now);
     // Heroes (`View::hero`): si la misma key cambió de rect entre
     // frames, escribe en `transform` la afín que "vuela" del rect
     // anterior al actual. Independiente del anim_registry — sólo
@@ -220,24 +278,33 @@ pub(super) fn handle_redraw<A: App>(
         overlay_built.is_some() && has_gpu_painter(&mounted);
 
     state.scene.reset();
-    paint(
+    // Bloque 23 — pintura con caché de RepaintBoundary. Sin nodos boundary en el
+    // árbol, `paint_cached` delega en `paint` (coste ~0); con ellos, reusa la
+    // sub-escena rasterizada de los subárboles estáticos.
+    paint_cached(
         &mut state.scene,
         &mounted,
         &computed,
         &mut state.typesetter,
         hover_idx,
         drop_hover_idx,
+        &mut state.repaint_cache,
     );
     // Animación de salida (fade-out). 1) Capturá la subescena de
     // cada nodo `exit` presente (snapshot para cuando desaparezca).
-    // 2) Reproducí los fantasmas de los que ya se fueron, con
+    // 2) Reproduce los fantasmas de los que ya se fueron, con
     // opacidad decreciente — por encima del contenido, debajo del
     // overlay. Coste cero si ningún nodo usa `animated_exit`.
     for (idx, end, key) in state.anim_registry.live_exit_nodes(&mounted) {
-        let (dur, easing) = {
-            let a = mounted.nodes[idx].anim.expect("nodo exit lleva anim");
-            (a.duration, a.easing)
-        };
+        let a = mounted.nodes[idx].anim.expect("nodo exit lleva anim");
+        // Centro del rect del nodo: origen de la afín de salida del fantasma.
+        let centro = computed
+            .get(mounted.nodes[idx].id)
+            .map(|r| (r.x + r.w * 0.5, r.y + r.h * 0.5))
+            .unwrap_or((0.0, 0.0));
+        // El underlay (fantasma ANTERIOR) no debe entrar a la captura del
+        // contenido vivo — si no, el próximo fantasma arrastraría al previo.
+        let saved_underlay = mounted.nodes[idx].underlay.take();
         let mut sub = vello::Scene::new();
         paint_range(
             &mut sub,
@@ -250,7 +317,8 @@ pub(super) fn handle_redraw<A: App>(
             end,
             vello::kurbo::Affine::IDENTITY,
         );
-        state.anim_registry.store_live_exit(key, sub, dur, easing);
+        mounted.nodes[idx].underlay = saved_underlay;
+        state.anim_registry.store_live_exit(key, sub, centro, &a);
     }
     state
         .anim_registry
@@ -298,6 +366,8 @@ pub(super) fn handle_redraw<A: App>(
             );
         }
     }
+    let m_paint = super::perf::mark(pf);
+    let a_paint = super::perf::alloc_mark(pf);
     if let Err(e) = state.renderer.render(
         &state.hal,
         &state.scene,
@@ -306,6 +376,7 @@ pub(super) fn handle_redraw<A: App>(
     ) {
         eprintln!("render error: {e}");
     }
+    let m_raster = super::perf::mark(pf);
     let (vw, vh) = frame.size();
     // Capa de overlay aparte (camino composite): vello la
     // rasteriza con fondo transparente en `frame.overlay_view()`.
@@ -347,6 +418,11 @@ pub(super) fn handle_redraw<A: App>(
             label: Some("llimphi-ui-gpu-paint"),
         },
     );
+    // Desglose del tramo `gpu` (sólo con el perfilador encendido; quedan en 0
+    // si la capa over no se activa en este frame).
+    let mut over_paint_us = 0.0_f64;
+    let mut over_tex_us = 0.0_f64;
+    let mut over_raster_us = 0.0_f64;
     let viewport = frame.size();
     // Backdrop blur (Bloque 11): post-pasada Gauss separable sobre
     // la intermediate, restringida al rect de cada nodo
@@ -455,6 +531,7 @@ pub(super) fn handle_redraw<A: App>(
             .map(|ov| has_over_painter(&ov.mounted))
             .unwrap_or(false);
     if over_active {
+        let m_over_paint = super::perf::mark(pf);
         // Escena vello aparte (no pisamos `state.scene`, que el caller
         // retiene/reusa). Fondo transparente: sólo lo pintado por los
         // `over_painter` lleva alpha.
@@ -465,6 +542,17 @@ pub(super) fn handle_redraw<A: App>(
             &computed,
             &mut state.typesetter,
         );
+        // Subárboles de Views marcados `View::over` (UI encima de contenido
+        // gpu_paint — p. ej. el OSC del reproductor): se pintan aquí, con la
+        // maquinaria completa (fills/texto/hover), en la misma escena over.
+        any_over |= llimphi_compositor::paint_over_layers(
+            &mut over_scene,
+            &mounted,
+            &computed,
+            &mut state.typesetter,
+            hover_idx,
+            drop_hover_idx,
+        );
         if let Some(ov) = overlay_built.as_ref() {
             any_over |= paint_over(
                 &mut over_scene,
@@ -472,7 +560,17 @@ pub(super) fn handle_redraw<A: App>(
                 &ov.computed,
                 &mut state.typesetter,
             );
+            any_over |= llimphi_compositor::paint_over_layers(
+                &mut over_scene,
+                &ov.mounted,
+                &ov.computed,
+                &mut state.typesetter,
+                ov.hover_idx,
+                None,
+            );
         }
+        let m_over_0 = super::perf::mark(pf);
+        over_paint_us = super::perf::us(m_over_paint, m_over_0);
         if any_over {
             // Scratch transparente del tamaño del frame (mismo formato
             // que la intermedia: Rgba8Unorm). Vello escribe via compute
@@ -499,6 +597,7 @@ pub(super) fn handle_redraw<A: App>(
             );
             let over_view =
                 over_tex.create_view(&llimphi_hal::wgpu::TextureViewDescriptor::default());
+            let m_over_1 = super::perf::mark(pf);
             // Vello rasteriza la escena over a la scratch (su propio
             // submit; limpia con TRANSPARENT). Independiente de la
             // intermedia.
@@ -512,6 +611,9 @@ pub(super) fn handle_redraw<A: App>(
             ) {
                 eprintln!("render over-layer error: {e}");
             }
+            let m_over_2 = super::perf::mark(pf);
+            over_tex_us = super::perf::us(m_over_0, m_over_1);
+            over_raster_us = super::perf::us(m_over_1, m_over_2);
             // Composite alpha de la scratch sobre la intermedia, grabado
             // en `gpu_encoder` DESPUÉS de los pases GPU directos.
             state.overlay_compositor.composite(
@@ -535,13 +637,49 @@ pub(super) fn handle_redraw<A: App>(
         );
         any_gpu = true;
     }
+    let m_submit_0 = super::perf::mark(pf);
     if any_gpu {
         state
             .hal
             .queue
             .submit(std::iter::once(gpu_encoder.finish()));
     }
+    let m_gpu = super::perf::mark(pf);
+    let submit_us = super::perf::us(m_submit_0, m_gpu);
+    super::timing_primer_present();
+    super::notificar_present(&state.window);
     state.surface.present(frame, &state.hal);
+    let m_present = super::perf::mark(pf);
+    let a_end = super::perf::alloc_mark(pf);
+    // Bloque 21 — emití la muestra del frame (camino completo). `mounted`
+    // sigue vivo (se mueve recién a `last_render`, abajo). El camino
+    // `cache_hit` no llega aquí: no se muestrea a propósito.
+    if pf {
+        super::perf::submit(super::perf::FrameSample {
+            view_us: super::perf::us(m_start, m_view),
+            mount_us: super::perf::us(m_view, m_mount),
+            layout_us: super::perf::us(m_mount, m_layout),
+            paint_us: super::perf::us(m_layout, m_paint),
+            raster_us: super::perf::us(m_paint, m_raster),
+            gpu_us: super::perf::us(m_raster, m_gpu),
+            over_paint_us,
+            over_tex_us,
+            over_raster_us,
+            submit_us,
+            present_us: super::perf::us(m_gpu, m_present),
+            total_us: super::perf::us(m_start, m_present),
+            n_nodes: mounted.nodes.len(),
+            boundary_hits: state.repaint_cache.hits,
+            boundary_misses: state.repaint_cache.misses,
+            layout_reused,
+            allocs: super::perf::allocs(a_start, a_end),
+            allocs_view: super::perf::allocs(a_start, a_view),
+            allocs_mount: super::perf::allocs(a_view, a_mount),
+            allocs_layout: super::perf::allocs(a_mount, a_layout),
+            allocs_paint: super::perf::allocs(a_layout, a_paint),
+            alloc_bytes: super::perf::alloc_bytes(a_start, a_end),
+        });
+    }
     // Ticker de animaciones implícitas: si quedó alguna en curso,
     // pedí el próximo frame. Cuando todas se asientan, `animating`
     // queda false y el loop de redraws se detiene solo (sin render
@@ -555,6 +693,7 @@ pub(super) fn handle_redraw<A: App>(
         animating,
         rippling,
         has_overlay: overlay_built.is_some(),
+        has_gpu_paint: any_gpu,
     });
     state.last_render = Some(RenderCache {
         mounted,
@@ -568,7 +707,12 @@ pub(super) fn handle_redraw<A: App>(
     // tecnología asistiva escuchando — coste cero en ese caso.
     push_a11y_tree::<A>(state);
 
-    // `handle` se recibe pero el redraw no lo necesita directamente;
-    // se pasa para mantener la firma consistente con el caller.
-    let _ = handle;
+    // Rueda **diferida**: llegaron ruedas mientras `last_render` estaba
+    // invalidado (un update recién había corrido). Ahora la caché de hit-test
+    // está fresca — se procesa el delta acumulado contra ella. `process_wheel`
+    // puede volver a invalidar `last_render` y pedir otro redraw (el ciclo se
+    // autolimita: sin ruedas nuevas, `pending_wheel` queda en None).
+    if let Some(wd) = state.pending_wheel.take() {
+        crate::Runtime::<A>::process_wheel(state, handle, wd);
+    }
 }
diff --git a/llimphi-ui/src/eventloop/secondary.rs b/llimphi-ui/src/eventloop/secondary.rs
index 14d3adc..1f086ef 100644
--- a/llimphi-ui/src/eventloop/secondary.rs
+++ b/llimphi-ui/src/eventloop/secondary.rs
@@ -17,7 +17,7 @@ impl<A: App> Runtime<A> {
             prim.last_render = None;
             prim.window.request_redraw();
         }
-        // OJO: NO repintamos las secundarias acá. `dispatch_model` corre en
+        // OJO: NO repintamos las secundarias aquí. `dispatch_model` corre en
         // cada Msg (incluido el tick ~33 fps), y repintar una secundaria por
         // tick serializaba dos `acquire()` de swapchain en Wayland FIFO →
         // ralentización y cuelgue. Cada secundaria se repinta sola al
@@ -114,6 +114,19 @@ impl<A: App> Runtime<A> {
 
         let frame = match sec.surface.acquire() {
             Ok(f) => f,
+            Err(llimphi_hal::SurfaceError::DeviceLost) => {
+                // El device (compartido con la primaria) murió. La secundaria no
+                // puede rehacerlo sola; marca la primaria y pedile un redraw: su
+                // dispatcher corre `rebuild_gpu_after_device_loss`, que rehace el
+                // device Y las surfaces de TODAS las secundarias (incluida ésta).
+                let _ = (hal, renderer);
+                sec.window.request_redraw();
+                if let Some(prim) = self.state.as_mut() {
+                    prim.needs_device_rebuild = true;
+                    prim.window.request_redraw();
+                }
+                return;
+            }
             Err(_) => {
                 let (w, h) = sec.surface.size();
                 sec.surface.resize(w, h);
@@ -173,6 +186,7 @@ impl<A: App> Runtime<A> {
         if any {
             hal.queue.submit(std::iter::once(enc.finish()));
         }
+        super::notificar_present(&sec.window);
         sec.surface.present(frame, hal);
         let _ = (hover_idx, drop_hover_idx); // se usaron al pintar; no se cachean
         sec.last_render = Some(SecRenderCache { mounted, computed });
@@ -399,31 +413,24 @@ impl<A: App> Runtime<A> {
                     },
                 };
                 let cursor = self.secondaries[idx].cursor;
-                let chain: Vec<ScrollFn<A::Msg>> = {
+                let msgs: Vec<A::Msg> = {
                     let sec = &self.secondaries[idx];
                     sec.last_render
                         .as_ref()
                         .map(|c| {
-                            hit_test_scroll_chain(
+                            let chain = hit_test_scroll_chain(
                                 &c.mounted,
                                 &c.computed,
                                 cursor.x as f32,
                                 cursor.y as f32,
-                            )
-                            .into_iter()
-                            .filter_map(|i| c.mounted.nodes[i].on_scroll.clone())
-                            .collect()
+                            );
+                            // Reparto parcial (ver el main): varios Msg por
+                            // evento cuando hijo y ancestro comparten el delta.
+                            consume_scroll_chain(&c.mounted, &chain, wd.x, wd.y)
                         })
                         .unwrap_or_default()
                 };
-                let mut msg: Option<A::Msg> = None;
-                for h in &chain {
-                    if let Some(m) = h(wd.x, wd.y) {
-                        msg = Some(m);
-                        break;
-                    }
-                }
-                if let Some(msg) = msg {
+                for msg in msgs {
                     self.dispatch_and_render_secondary(idx, msg);
                 }
             }
diff --git a/llimphi-ui/src/lib.rs b/llimphi-ui/src/lib.rs
index 1adf996..6e0ebc7 100644
--- a/llimphi-ui/src/lib.rs
+++ b/llimphi-ui/src/lib.rs
@@ -13,6 +13,10 @@
 use std::sync::Arc;
 
 pub mod a11y;
+/// Contador de asignaciones de heap para el perfilador (`LLIMPHI_PERF`). Ver
+/// [`alloc`] para las dos formas de instalarlo (feature `perf-alloc` o
+/// `#[global_allocator]` a mano).
+pub mod alloc;
 
 use llimphi_hal::winit::application::ApplicationHandler;
 use llimphi_hal::winit::dpi::{LogicalSize, PhysicalPosition};
@@ -166,6 +170,57 @@ pub trait App: 'static {
         None
     }
 
+    /// La **ventana** ganó (`true`) o perdió (`false`) el foco del sistema —
+    /// el `WindowEvent::Focused` de winit. Distinto de [`App::on_focus`], que
+    /// es el foco de un nodo enfocable *dentro* de la app (navegación Tab).
+    /// Útil para apps que cambian de forma según tengan o no el foco (p. ej.
+    /// shuma replegándose a una barra al perder el foco). Devolver `Some(Msg)`
+    /// dispara un update; `None` (default) lo ignora.
+    fn on_window_focus(_model: &Self::Model, _focused: bool) -> Option<Self::Msg> {
+        None
+    }
+
+    /// El estado de los **modificadores** cambió (Shift/Ctrl/Alt/Super pulsados
+    /// o soltados) — el `WindowEvent::ModifiersChanged` de winit.
+    ///
+    /// Existe para que la app pueda saber qué modificadores están puestos
+    /// **cuando llega un click**: los handlers de click llevan un `Msg` plano y
+    /// no los reciben (agregarlos obligaría a versionar el callback de cada
+    /// widget con filas). El patrón es guardarlos en el modelo acá y
+    /// consultarlos en el `update` del click — así se implementan el
+    /// Shift+click (rango) y el Ctrl+click (selección aditiva) de cualquier
+    /// lista. Devolver `Some(Msg)` dispara un update; `None` (default) lo
+    /// ignora. Conviene devolver `None` cuando el cambio no le importa a la
+    /// app: si no, cada roce de Shift repinta.
+    fn on_modifiers(_model: &Self::Model, _mods: Modifiers) -> Option<Self::Msg> {
+        None
+    }
+
+    /// El cursor se movió sobre la ventana — `(x, y)` en píxeles físicos, el
+    /// `WindowEvent::CursorMoved` crudo. Se invoca en **cada** movimiento, sin
+    /// depender del hit-test de nodos ni de que haya un frame cacheado: es la
+    /// señal fiable de "hay actividad de mouse" para cosas como revelar una
+    /// barra estilo OSC (mpv) o resetear un temporizador de inactividad. Para
+    /// reaccionar a la posición *sobre un nodo concreto* usa
+    /// `View::on_pointer_move_at` en su lugar. Devolver `Some(Msg)` dispara un
+    /// update; `None` (default) lo ignora.
+    fn on_cursor_moved(_model: &Self::Model, _x: f32, _y: f32) -> Option<Self::Msg> {
+        None
+    }
+
+    /// El stack GPU se **reconstruyó tras una pérdida de dispositivo**
+    /// ([`llimphi_hal::SurfaceError::DeviceLost`]): el runtime ya rehízo
+    /// instance/adapter/device/surface/renderer/compositores contra un `Hal`
+    /// nuevo. Este gancho avisa a la app para que reconstruya SUS propios
+    /// recursos GPU —los que el runtime no puede alcanzar porque los posee la
+    /// app: pipelines directos (`GpuPipelines`), texturas de video
+    /// (`ExternalSurface`), renderers `llimphi-3d`, atlas propios— contra el
+    /// `hal` nuevo. Las apps de **UI pura** (sólo vello) no tienen recursos
+    /// propios en GPU: el no-op por defecto les basta y no pagan nada. Se llama
+    /// con el modelo mutable y el `Hal` recién creado, antes del siguiente
+    /// redraw. Ver [`Hal::recreate_for_window`].
+    fn on_gpu_reset(_model: &mut Self::Model, _hal: &Hal) {}
+
     /// Título de la ventana (sólo se lee al arrancar). Es el título inicial;
     /// para uno que cambie en runtime, ver [`App::window_title`].
     fn title() -> &'static str {
@@ -239,6 +294,10 @@ pub enum UserEvent<Msg> {
     },
     /// Pide cerrar la ventana secundaria con esa `key`. No afecta a la primaria.
     CloseWindow { key: u64 },
+    /// Minimiza (o restaura) la ventana **primaria**. Útil para apps que deben
+    /// quitarse de en medio un instante — p. ej. una captura de pantalla que no
+    /// quiere salir en su propia toma. Es una *petición* al compositor.
+    SetMinimized(bool),
     /// Evento del adapter AccessKit: el lector de pantalla solicitó el árbol
     /// inicial, pidió ejecutar una acción (focus, click, etc.) o se desactivó.
     /// El adapter usa el `EventLoopProxy` para enviarlos al hilo del runtime.
@@ -254,7 +313,7 @@ impl<Msg> From<accesskit_winit::Event> for UserEvent<Msg> {
     }
 }
 
-/// Asa al runtime de Llimphi. Clonable y enviable entre hilos: la usás para
+/// Asa al runtime de Llimphi. Clonable y enviable entre hilos: la usas para
 /// pedir cerrar la ventana o para lanzar trabajo (PAM, IO, etc.) que al
 /// terminar reentra con un Msg al `update`.
 ///
@@ -303,6 +362,26 @@ impl<Msg: Send + 'static> Handle<Msg> {
         }
     }
 
+    /// Handle de tests que **entrega** cada `Msg` a `sink` en vez de tirarlo.
+    /// Es lo que necesita un test para ejercitar el camino asíncrono real de la
+    /// app: `spawn` corre su closure en un hilo (como en producción) y el `Msg`
+    /// resultante llega al `sink` — típicamente el extremo de un canal que el
+    /// test drena y realimenta a `update`. Con [`Self::for_test`] ese `Msg` se
+    /// descarta, así que un test que necesitaba el efecto tenía que volver a
+    /// correr el trabajo a mano: dos ejecuciones del mismo job y carrera entre
+    /// ellas.
+    ///
+    /// El `sink` se llama desde el hilo del `spawn`, de ahí el `Send + Sync`
+    /// (un `mpsc::Sender` no es `Sync`: envolverlo en `Mutex` alcanza).
+    pub fn for_test_with<F>(sink: F) -> Self
+    where
+        F: Fn(Msg) + Send + Sync + 'static,
+    {
+        Self {
+            inner: HandleInner::Lifted(Arc::new(sink)),
+        }
+    }
+
     /// Cierra la ventana y termina el bucle. La transición en curso (si la
     /// hay) se completa antes de salir.
     pub fn quit(&self) {
@@ -352,13 +431,22 @@ impl<Msg: Send + 'static> Handle<Msg> {
     }
 
     /// Cierra la ventana secundaria con esa `key` (no-op si no existe). La
-    /// ventana primaria nunca se cierra por acá — para eso está [`Self::quit`].
+    /// ventana primaria nunca se cierra por aquí — para eso está [`Self::quit`].
     pub fn close_window(&self, key: u64) {
         if let HandleInner::Real(p) = &self.inner {
             let _ = p.send_event(UserEvent::CloseWindow { key });
         }
     }
 
+    /// Minimiza (`true`) o restaura (`false`) la ventana primaria. Es una
+    /// petición al compositor (en Wayland, `xdg_toplevel.set_minimized`); honrarla
+    /// depende del WM. Pensado para apartarse un instante (captura de pantalla).
+    pub fn set_minimized(&self, minimized: bool) {
+        if let HandleInner::Real(p) = &self.inner {
+            let _ = p.send_event(UserEvent::SetMinimized(minimized));
+        }
+    }
+
     /// Encola un Msg para procesarse en el próximo turno del bucle. Útil
     /// para que un callback externo reentre al update.
     pub fn dispatch(&self, msg: Msg) {
@@ -450,6 +538,40 @@ impl<Msg: Send + 'static> Handle<Msg> {
             }
         }
     }
+
+    /// Igual que [`spawn_periodic`](Self::spawn_periodic) pero con **periodo
+    /// variable**: antes de cada espera se llama `period()` para decidir cuánto
+    /// dormir hasta el próximo `f()`. Pensado para feeds cuya cadencia depende
+    /// del estado — p. ej. un reproductor que tiquea a ~30 Hz en play pero baja
+    /// a unos pocos Hz en pausa (cada Msg fuerza un repintado completo, así que
+    /// bajar la cadencia en pausa recorta la CPU en reposo sin tocar el core).
+    pub fn spawn_periodic_dyn<P, F>(&self, period: P, f: F)
+    where
+        P: Fn() -> std::time::Duration + Send + 'static,
+        F: Fn() -> Msg + Send + 'static,
+    {
+        match &self.inner {
+            HandleInner::Real(p) => {
+                let proxy = p.clone();
+                std::thread::spawn(move || loop {
+                    std::thread::sleep(period());
+                    if proxy.send_event(UserEvent::Msg(f())).is_err() {
+                        break;
+                    }
+                });
+            }
+            HandleInner::Test => {
+                let _ = (period, f);
+            }
+            HandleInner::Lifted(lift) => {
+                let lift = lift.clone();
+                std::thread::spawn(move || loop {
+                    std::thread::sleep(period());
+                    lift(f());
+                });
+            }
+        }
+    }
 }
 
 /// Evento de teclado normalizado.
@@ -532,6 +654,16 @@ struct Runtime<A: App> {
     /// cada una lleva su propia surface + caches de interacción. Vacío en la
     /// inmensa mayoría de las apps (monoventana) — coste cero.
     secondaries: Vec<SecondaryState<A>>,
+    /// Modelo preservado a través de un `suspended` (Android/iOS/web): al
+    /// pasar a background la NativeWindow se invalida y hay que soltar TODO
+    /// el estado GPU (`RuntimeState`), pero el modelo de la app debe
+    /// sobrevivir. `resumed` lo retoma en vez de llamar `A::init` de nuevo.
+    /// En desktop winit nunca emite `suspended` — queda `None` siempre.
+    parked_model: Option<A::Model>,
+    /// Dedo activo (id del touch) cuando los eventos llegan por
+    /// `WindowEvent::Touch` en vez de mouse. Sólo se sigue UN dedo: el
+    /// primero que baja; los demás se ignoran hasta que suelte.
+    active_touch: Option<u64>,
 }
 
 /// Estado por **ventana secundaria**. Espeja los campos de interacción de
@@ -592,6 +724,16 @@ struct RuntimeState<A: App> {
     /// colisionar dentro del mismo frame).
     layout: LayoutTree,
     overlay_layout: LayoutTree,
+    /// Estado del layout retenido (Bloque 24). `mount_incremental` lo lee para
+    /// reusar los `NodeId` de taffy del frame anterior cuando la forma del árbol
+    /// no cambió, y lo re-emite para el próximo. `None` = primer frame (o tras un
+    /// cambio de forma, se rehace). Opaco: sólo se guarda y se pasa de vuelta.
+    retained_layout: Option<llimphi_compositor::RetainedLayout>,
+    /// Registro de subárboles memoizados (`View::memo`, Bloque 25). Vive entre
+    /// frames: por key retiene el `Mounted` + `LayoutTree` aislado del subárbol,
+    /// y lo reusa (sin reconstruir el `View`) mientras `deps` y el tamaño del
+    /// slot no cambien. Sin nodos `memo`, `splice_memos` es no-op (coste ~0).
+    memo_registry: llimphi_compositor::MemoRegistry<A::Msg>,
     /// Último frame renderizado: árbol montado + rects absolutos +
     /// nodo con hover. Lo consume el handler de click para hit-testear
     /// sin reconstruir `view` + layout, y CursorMoved para detectar si
@@ -646,6 +788,11 @@ struct RuntimeState<A: App> {
     /// mientras alguna siga viva, pide otro frame (ticker autodetenido). Ver
     /// [`llimphi_compositor::RippleRegistry`].
     ripple_registry: llimphi_compositor::RippleRegistry,
+    /// Caché de rasterización de los `View::repaint_boundary` (Bloque 23). Vivo
+    /// entre frames: cada subárbol-boundary paint-puro y estático se rasteriza
+    /// una vez y se reusa (append trasladado) mientras su contenido no cambie.
+    /// Sin boundaries en el árbol, `paint_cached` delega en `paint` (coste ~0).
+    repaint_cache: llimphi_compositor::RepaintCache,
     /// Último tap (press izquierdo) sobre un nodo con `on_double_tap`: instante
     /// + posición. El próximo press que caiga cerca y a tiempo dispara el
     /// doble-tap. `None` cuando no hay un primer tap pendiente.
@@ -653,6 +800,24 @@ struct RuntimeState<A: App> {
     /// Long-press armado (ver [`PendingLongPress`]). El runtime lo vence por
     /// tiempo en `about_to_wait` y lo cancela en movimiento/release.
     pending_long_press: Option<PendingLongPress<A::Msg>>,
+    /// `on_click` plano armado (ver [`PendingClick`]). Se dispara en el release
+    /// y se cancela si el cursor se aleja del origen más que [`CLICK_MOVE_CANCEL`].
+    pending_click: Option<PendingClick<A::Msg>>,
+    /// Rueda **diferida**: delta acumulado de ruedas que llegaron con
+    /// `last_render` invalidado (un update recién corrió). Se procesa al final
+    /// del próximo redraw contra el árbol fresco — sin esto, una app con ticks
+    /// frecuentes invalida la caché antes de casi cada rueda y el scroll por
+    /// wheel queda muerto (chain=0 sistemático).
+    pending_wheel: Option<WheelDelta>,
+    /// Tecla sostenida para el **auto-repeat sintético**: winit no siempre genera
+    /// los eventos repetidos en Wayland (deja `KeyEvent.repeat` pero no re-emite),
+    /// así que el runtime los sintetiza — `about_to_wait` re-dispara la tecla al
+    /// rate del compositor. El release o pisar otra tecla la limpia. `None` si no
+    /// hay ninguna sostenida (o si winit ya repite, ver [`Self::winit_repeats`]).
+    held_key: Option<HeldKey>,
+    /// `true` si winit YA entrega eventos con `repeat = true` (los sintetiza él).
+    /// Al ver el primero apagamos la síntesis propia para no duplicar la tecla.
+    winit_repeats: bool,
     /// **Retención de frame entero**. Tras un paint exitoso, guardamos las
     /// dimensiones del viewport y los flags de animación del frame. Si en el
     /// próximo `RedrawRequested` ningún sitio invalidó `last_render` (la
@@ -668,6 +833,13 @@ struct RuntimeState<A: App> {
     /// Selección de texto activa fuera del editor (drag para resaltar, Ctrl/Cmd+C
     /// para copiar). `None` = nada seleccionado. Ver [`TextSelection`].
     selection: Option<TextSelection>,
+    /// El `acquire()` reportó [`llimphi_hal::SurfaceError::DeviceLost`]: el
+    /// device quedó irrecuperable y hay que rehacer todo el stack GPU. El redraw
+    /// no puede hacerlo solo (debe rehacer también las surfaces de las ventanas
+    /// secundarias, que viven en `Runtime`, no en `RuntimeState`), así que sólo
+    /// **marca** aquí y el dispatcher de `Runtime` lo atiende tras el redraw
+    /// llamando `rebuild_gpu_after_device_loss`. Ver esa función.
+    needs_device_rebuild: bool,
 }
 
 /// Metadata del frame retenido — qué pintó la `state.scene` para validar que
@@ -679,6 +851,13 @@ struct RetainedScene {
     animating: bool,
     rippling: bool,
     has_overlay: bool,
+    /// El frame tenía painters GPU directos (`gpu_paint_with`) o post-pasadas
+    /// (backdrop blur / filter). Esas primitivas se dibujan en vivo sobre la
+    /// intermedia cada frame y **no** quedan en `state.scene` (la escena vello
+    /// retenida). Re-presentar la scene tal cual las perdería → no se retiene
+    /// (un expose del compositor debe re-correr el paint GPU). Sin esto, p.ej.
+    /// la esfera 3D de cosmos desaparecía al tapar/destapar la ventana.
+    has_gpu_paint: bool,
 }
 
 /// Selección de texto activa fuera del editor (ver [`crate::View::selectable`]).
@@ -760,11 +939,40 @@ struct PendingLongPress<Msg> {
     handler: GestureResolved<Msg>,
 }
 
+/// `on_click` **armado**: el press cayó sobre un nodo con `on_click` plano (sin
+/// drag ni `on_click_at`). El click NO se dispara en el press — semántica de
+/// escritorio: se dispara al **soltar** (`handle_left_release`), salvo que antes
+/// el cursor se aleje de `origin` más que [`CLICK_MOVE_CANCEL`] (el gesto pasó a
+/// arrastre/barrido y se cancela). Esto evita el disparo prematuro en mousedown
+/// y tolera arrastres minúsculos accidentales sobre el botón.
+struct PendingClick<Msg> {
+    msg: Msg,
+    origin: PhysicalPosition<f64>,
+}
+
+/// Tecla sostenida para el auto-repeat sintético: el evento winit a re-emitir
+/// (con `repeat = true`) y el próximo instante de disparo.
+struct HeldKey {
+    event: llimphi_hal::winit::event::KeyEvent,
+    next: std::time::Instant,
+}
+
+/// Cuánto hay que MANTENER una tecla antes de que empiece a repetir. Espeja el
+/// estándar del compositor (mirada usa 600 ms).
+const KEY_REPEAT_DELAY: std::time::Duration = std::time::Duration::from_millis(600);
+/// Intervalo entre repeticiones una vez arrancado (25 Hz → 40 ms).
+const KEY_REPEAT_INTERVAL: std::time::Duration = std::time::Duration::from_millis(40);
+
 /// Umbral de duración para que un press se convierta en long-press.
 const LONG_PRESS_DELAY: std::time::Duration = std::time::Duration::from_millis(500);
 /// Si el cursor se aleja más que esto (px físicos) del origen del press, deja
 /// de ser long-press (pasó a drag/scroll) y se cancela.
 const LONG_PRESS_MOVE_CANCEL: f64 = 8.0;
+/// Si el cursor se aleja más que esto (px físicos) del origen del press, el
+/// `on_click` armado deja de contar como click (el usuario quiso arrastrar /
+/// barrer, no cliquear) y se cancela. Por debajo del umbral, un arrastre
+/// minúsculo accidental **sigue valiendo como click** al soltar.
+const CLICK_MOVE_CANCEL: f64 = 6.0;
 /// Ventana temporal máxima entre los dos taps de un doble-tap.
 const DOUBLE_TAP_WINDOW: std::time::Duration = std::time::Duration::from_millis(400);
 /// Distancia máxima (px físicos) entre los dos taps de un doble-tap.
@@ -841,9 +1049,23 @@ fn compute_drag_velocity(
 /// Punto de entrada: corre el bucle Elm hasta que el usuario cierre la
 /// ventana (o la app llame [`Handle::quit`]).
 pub fn run<A: App>() {
-    let event_loop = EventLoop::<UserEvent<A::Msg>>::with_user_event()
-        .build()
-        .expect("event loop");
+    eventloop::timing_hito("run:entrada");
+    // Crear el event loop puede fallar cuando NO hay compositor/display
+    // accesible (p. ej. el socket Wayland no es alcanzable por este usuario, o
+    // el compositor se cayó): winit devuelve `NoCompositor`. Antes esto
+    // `.expect()`eaba → panic → exit 101, y bajo un supervisor de respawn eso
+    // es un crash-loop de panics. Salimos limpio (código 3) con un mensaje
+    // claro: no hay display, no es un bug de la app.
+    let event_loop = match EventLoop::<UserEvent<A::Msg>>::with_user_event().build() {
+        Ok(el) => el,
+        Err(e) => {
+            eprintln!(
+                "llimphi-ui · no pude crear el event loop ({e}): no hay compositor/display \
+                 accesible. Salgo sin panichear."
+            );
+            std::process::exit(3);
+        }
+    };
     event_loop.set_control_flow(ControlFlow::Wait);
     let handle = Handle {
         inner: HandleInner::Real(event_loop.create_proxy()),
@@ -852,8 +1074,61 @@ pub fn run<A: App>() {
         handle,
         state: None,
         secondaries: Vec::new(),
+        parked_model: None,
+        active_touch: None,
     };
-    event_loop.run_app(&mut runtime).expect("run app");
+    if let Err(e) = event_loop.run_app(&mut runtime) {
+        eprintln!("llimphi-ui · el event loop terminó con error: {e}");
+        std::process::exit(3);
+    }
+}
+
+/// Punto de entrada **Android**: como [`run`], pero construye el event loop
+/// sobre el `AndroidApp` que `android-activity` entrega en `android_main`.
+/// El ciclo de vida móvil difiere del desktop en dos cosas que este runtime
+/// ya absorbe: la ventana/surface se crea recién en `resumed` (lazy, igual
+/// que aquí) y se DESTRUYE en `suspended` (el modelo se parquea y el estado
+/// GPU se suelta — ver `Runtime::parked_model`).
+///
+/// El crate final (la app) debe activar la feature
+/// `winit/android-native-activity` y exportar:
+///
+/// ```ignore
+/// #[no_mangle]
+/// fn android_main(app: AndroidApp) {
+///     llimphi_ui::run_android::<MiApp>(app);
+/// }
+/// ```
+#[cfg(target_os = "android")]
+pub fn run_android<A: App>(
+    android_app: llimphi_hal::winit::platform::android::activity::AndroidApp,
+) {
+    use llimphi_hal::winit::platform::android::EventLoopBuilderExtAndroid;
+    eventloop::timing_hito("run_android:entrada");
+    let event_loop = match EventLoop::<UserEvent<A::Msg>>::with_user_event()
+        .with_android_app(android_app)
+        .build()
+    {
+        Ok(el) => el,
+        Err(e) => {
+            log::error!("llimphi-ui · no pude crear el event loop android: {e}");
+            return;
+        }
+    };
+    event_loop.set_control_flow(ControlFlow::Wait);
+    let handle = Handle {
+        inner: HandleInner::Real(event_loop.create_proxy()),
+    };
+    let mut runtime: Runtime<A> = Runtime {
+        handle,
+        state: None,
+        secondaries: Vec::new(),
+        parked_model: None,
+        active_touch: None,
+    };
+    if let Err(e) = event_loop.run_app(&mut runtime) {
+        log::error!("llimphi-ui · el event loop terminó con error: {e}");
+    }
 }
 
 #[cfg(test)]
diff --git a/llimphi-video-plane/Cargo.toml b/llimphi-video-plane/Cargo.toml
new file mode 100644
index 0000000..d3fba8e
--- /dev/null
+++ b/llimphi-video-plane/Cargo.toml
@@ -0,0 +1,28 @@
+[package]
+name = "llimphi-video-plane"
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+authors.workspace = true
+publish = false
+description = "Fase 0 (spike): atachar un wl_subsurface real sobre la wl_surface de winit para que mirada lo escanee directo, sin pasar por vello. Valida el muro winit↔wayland-client ajeno."
+
+[[bin]]
+name = "subsurface-spike"
+path = "src/main.rs"
+
+[dependencies]
+wgpu = { workspace = true }
+winit = { workspace = true }
+raw-window-handle = { workspace = true }
+pollster = { workspace = true }
+wayland-client = { workspace = true }
+wayland-backend = { version = "0.3", features = ["client_system"] }
+wayland-protocols = { version = "0.32", features = ["client"] }
+# Fase 1b: buffers dmabuf (scanout-capable) por gbm → mirada puede promover el
+# subsurface a un plano de overlay del DRM (a diferencia de shm, que jamás
+# escanea). default-features=false: no queremos import-wayland/egl ni drm-support.
+gbm = { version = "0.18", default-features = false }
+libc = { workspace = true }
+media-core = { path = "../../media/media-core" }
+foreign-av = { path = "../../../shared/foreign-av" }
diff --git a/llimphi-video-plane/LEEME.md b/llimphi-video-plane/LEEME.md
new file mode 100644
index 0000000..41b8529
--- /dev/null
+++ b/llimphi-video-plane/LEEME.md
@@ -0,0 +1,34 @@
+# llimphi-video-plane
+
+*Read this in English: [README.md](README.md).*
+
+Spike de "atachá video en llimphi": video como `wl_subsurface` real sobre
+la `wl_surface` de winit, para que mirada lo componga (Fase 1) y a futuro lo
+escanee en un plano de overlay, **sin pasar por la textura intermedia de
+vello**.
+
+Muro que valida (Fase 0, ya OK): winit no expone subsurfaces, así que se
+monta una **segunda** conexión `wayland-client` sobre el MISMO `wl_display`
+ajeno (`Backend::from_foreign_display`), se envuelve la `wl_surface` de winit
+por `ObjectId::from_ptr`, y se le crea una `wl_subsurface` hija. `set_desync`
+→ el hijo commitea solo; posición/orden se latchean en el commit del padre
+(que hace winit al presentar; el subsurface trackea al padre al mover).
+
+Dos modos:
+  - **sin argumentos** → cuadro de color sólido (valida el subsurface).
+  - **`subsurface-spike <archivo>`** → frames reales de ese video (Fase 1a),
+    decodificados por `foreign-av`, subidos al subsurface por shm (3 buffers
+    round-robin, RGBA→ARGB8888). La UI winit sólo limpia el fondo.
+
+Teclas: B = subsurface debajo/encima del padre · T = fondo UI
+transparente/opaco (el "hueco" donde asoma el plano) · ESC = salir.
+
+## Uso
+
+```sh
+cargo run --release -p llimphi-video-plane --bin subsurface-spike
+```
+
+---
+
+Parte de **llimphi** — ver [llimphi](../LEEME.md).
diff --git a/llimphi-video-plane/README.md b/llimphi-video-plane/README.md
new file mode 100644
index 0000000..1cb5312
--- /dev/null
+++ b/llimphi-video-plane/README.md
@@ -0,0 +1,33 @@
+# llimphi-video-plane
+
+A spike for "attach video in llimphi": video as a real `wl_subsurface` over
+winit's `wl_surface`, so mirada composites it (Phase 1) and eventually scans it
+out on an overlay plane, **without going through vello's intermediate texture**.
+
+The wall it validates (Phase 0, already OK): winit does not expose subsurfaces, so
+a **second** `wayland-client` connection is mounted over the SAME foreign
+`wl_display` (`Backend::from_foreign_display`), winit's `wl_surface` is wrapped
+through `ObjectId::from_ptr`, and a child `wl_subsurface` is created on it.
+`set_desync` → the child commits on its own; position and ordering are latched on
+the parent's commit (which winit does on present; the subsurface tracks the
+parent when moved).
+
+Two modes:
+
+- **no arguments** → a solid colour quad (validates the subsurface).
+- **`subsurface-spike <file>`** → real frames from that video (Phase 1a), decoded
+  by `foreign-av`, uploaded to the subsurface through shm (3 round-robin buffers,
+  RGBA→ARGB8888). The winit UI only clears the background.
+
+Keys: `B` = subsurface below/above the parent · `T` = UI background
+transparent/opaque (the "hole" the plane peeks through) · `ESC` = quit.
+
+## Use
+
+```sh
+cargo run --release -p llimphi-video-plane --bin subsurface-spike
+```
+
+---
+
+Part of **llimphi** — see [llimphi](../README.md).
diff --git a/llimphi-video-plane/src/main.rs b/llimphi-video-plane/src/main.rs
new file mode 100644
index 0000000..5adf883
--- /dev/null
+++ b/llimphi-video-plane/src/main.rs
@@ -0,0 +1,913 @@
+//! Spike de "atachá video en llimphi": video como `wl_subsurface` real sobre
+//! la `wl_surface` de winit, para que mirada lo componga (Fase 1) y a futuro lo
+//! escanee en un plano de overlay, **sin pasar por la textura intermedia de
+//! vello**.
+//!
+//! Muro que valida (Fase 0, ya OK): winit no expone subsurfaces, así que se
+//! monta una **segunda** conexión `wayland-client` sobre el MISMO `wl_display`
+//! ajeno (`Backend::from_foreign_display`), se envuelve la `wl_surface` de winit
+//! por `ObjectId::from_ptr`, y se le crea una `wl_subsurface` hija. `set_desync`
+//! → el hijo commitea solo; posición/orden se latchean en el commit del padre
+//! (que hace winit al presentar; el subsurface trackea al padre al mover).
+//!
+//! Dos modos:
+//!   - **sin argumentos** → cuadro de color sólido (valida el subsurface).
+//!   - **`subsurface-spike <archivo>`** → frames reales de ese video (Fase 1a),
+//!     decodificados por `foreign-av`, subidos al subsurface por shm (3 buffers
+//!     round-robin, RGBA→ARGB8888). La UI winit sólo limpia el fondo.
+//!
+//! Teclas: B = subsurface debajo/encima del padre · T = fondo UI
+//! transparente/opaco (el "hueco" donde asoma el plano) · ESC = salir.
+
+use std::os::fd::{AsFd, BorrowedFd};
+use std::sync::Arc;
+use std::time::{Duration, Instant};
+
+use gbm::{BufferObject, BufferObjectFlags, Device as GbmDevice, Format as GbmFormat};
+use media_core::FrameSource;
+use raw_window_handle::{HasDisplayHandle, HasWindowHandle, RawDisplayHandle, RawWindowHandle};
+use wayland_client::backend::{Backend, ObjectId};
+use wayland_client::protocol::{
+    wl_buffer::WlBuffer,
+    wl_compositor::WlCompositor,
+    wl_region::WlRegion,
+    wl_registry,
+    wl_shm::{self, WlShm},
+    wl_shm_pool::WlShmPool,
+    wl_subcompositor::WlSubcompositor,
+    wl_subsurface::WlSubsurface,
+    wl_surface::WlSurface,
+};
+use wayland_client::{Connection, Dispatch, EventQueue, Proxy, QueueHandle};
+use wayland_protocols::wp::linux_dmabuf::zv1::client::{
+    zwp_linux_buffer_params_v1::{self, ZwpLinuxBufferParamsV1},
+    zwp_linux_dmabuf_v1::ZwpLinuxDmabufV1,
+};
+use winit::application::ApplicationHandler;
+use winit::event::{ElementState, KeyEvent, WindowEvent};
+use winit::event_loop::{ActiveEventLoop, ControlFlow, EventLoop};
+use winit::keyboard::{Key, NamedKey};
+use winit::window::{Window, WindowId};
+
+// Modo cuadro sólido (sin archivo).
+const SOLID_W: i32 = 400;
+const SOLID_H: i32 = 300;
+const SOLID_X: i32 = 200;
+const SOLID_Y: i32 = 150;
+const DEFAULT_WIN: (u32, u32) = (800, 600);
+
+/// Cuántos buffers shm rotamos. Con 3 en round-robin nunca reescribimos uno que
+/// el compositor todavía tenga tomado (a 30 fps lo libera en ~1 frame ≪ 3), así
+/// que no hace falta rastrear `wl_buffer.release`.
+const RING: usize = 3;
+
+// ---------------------------------------------------------------------------
+// Estado wayland del lado del subsurface (segunda conexión, display ajeno).
+// ---------------------------------------------------------------------------
+
+#[derive(Default)]
+struct WlGlobals {
+    compositor: Option<WlCompositor>,
+    subcompositor: Option<WlSubcompositor>,
+    shm: Option<WlShm>,
+    dmabuf: Option<ZwpLinuxDmabufV1>,
+}
+
+impl Dispatch<wl_registry::WlRegistry, ()> for WlGlobals {
+    fn event(
+        state: &mut Self,
+        registry: &wl_registry::WlRegistry,
+        event: wl_registry::Event,
+        _: &(),
+        _: &Connection,
+        qh: &QueueHandle<Self>,
+    ) {
+        if let wl_registry::Event::Global { name, interface, version } = event {
+            match &interface[..] {
+                "wl_compositor" => {
+                    state.compositor = Some(registry.bind(name, version.min(4), qh, ()));
+                }
+                "wl_subcompositor" => {
+                    state.subcompositor = Some(registry.bind(name, 1, qh, ()));
+                }
+                "wl_shm" => {
+                    state.shm = Some(registry.bind(name, 1, qh, ()));
+                }
+                "zwp_linux_dmabuf_v1" => {
+                    // v3+ para `add` con modifier; v4 trae feedback (no lo usamos).
+                    state.dmabuf = Some(registry.bind(name, version.min(4), qh, ()));
+                }
+                _ => {}
+            }
+        }
+    }
+}
+
+/// Impls `Dispatch` vacíos: no nos interesan los eventos de estos objetos.
+macro_rules! empty_dispatch {
+    ($($t:ty),* $(,)?) => { $(
+        impl Dispatch<$t, ()> for WlGlobals {
+            fn event(
+                _: &mut Self,
+                _: &$t,
+                _: <$t as Proxy>::Event,
+                _: &(),
+                _: &Connection,
+                _: &QueueHandle<Self>,
+            ) {}
+        }
+    )* };
+}
+empty_dispatch!(
+    WlCompositor,
+    WlSubcompositor,
+    WlShm,
+    WlShmPool,
+    WlBuffer,
+    WlSurface,
+    WlSubsurface,
+    WlRegion,
+    ZwpLinuxDmabufV1,
+    ZwpLinuxBufferParamsV1,
+);
+
+// ---------------------------------------------------------------------------
+// Alimentador de frames de video al subsurface por shm (round-robin).
+// ---------------------------------------------------------------------------
+
+/// Backend de almacenamiento de los frames: shm (CPU, jamás escanea a plano) o
+/// dmabuf (buffers `gbm` LINEAR scanout-capable → mirada los puede promover a un
+/// plano de overlay del DRM). En ambos el `Feeder` escribe el frame por CPU; la
+/// diferencia es qué puede hacer el compositor con el resultado.
+enum Ring {
+    /// Mapeo único del pool shm (RING × frame contiguos). Puntero crudo: la app
+    /// es mono-hilo, no cruza threads.
+    Shm { map: *mut u8, frame_bytes: usize },
+    /// Un `BufferObject` gbm por slot del ring. El `Device` se retiene (los bo
+    /// comparten su `gbm_device` por refcount ffi, pero el Rust `Device` posee el
+    /// destructor). Se escribe por `map_mut` (sync ioctls incluidos).
+    Dmabuf {
+        _device: GbmDevice<std::fs::File>,
+        bos: Vec<BufferObject<()>>,
+    },
+}
+
+struct Feeder {
+    source: Box<dyn FrameSource + Send>,
+    child: WlSurface,
+    conn: Connection,
+    ring: Ring,
+    w: i32,
+    h: i32,
+    buffers: Vec<WlBuffer>,
+    next: usize,
+    rgba: Vec<u8>,
+    last: Instant,
+    interval: Duration,
+    /// Contador de throughput real (frames commiteados por ventana de ~1s).
+    frames_win: u32,
+    fps_t0: Instant,
+}
+
+impl Feeder {
+    /// Tira del próximo frame (si toca por cadencia) y lo commitea al hijo.
+    fn pump(&mut self, now: Instant) {
+        let dt = now.saturating_duration_since(self.last);
+        self.last = now;
+        let Some((w, h)) = self.source.tick(dt, &mut self.rgba) else {
+            return;
+        };
+        if w as i32 != self.w || h as i32 != self.h {
+            // El spike fija tamaño al abrir; un cambio de resolución en vuelo no
+            // se maneja acá.
+            return;
+        }
+        let idx = self.next;
+        self.next = (self.next + 1) % self.buffers.len();
+
+        // RGBA (del FrameSource) → XRGB8888 (bytes B,G,R,X en memoria LE).
+        let px = (w * h) as usize;
+        match &mut self.ring {
+            Ring::Shm { map, frame_bytes } => {
+                let base = unsafe { map.add(idx * *frame_bytes) as *mut u32 };
+                for i in 0..px {
+                    let r = self.rgba[i * 4] as u32;
+                    let g = self.rgba[i * 4 + 1] as u32;
+                    let b = self.rgba[i * 4 + 2] as u32;
+                    unsafe { base.add(i).write((r << 16) | (g << 8) | b) };
+                }
+            }
+            Ring::Dmabuf { bos, .. } => {
+                // `map_mut` respeta el stride del mapeo (puede diferir de w*4).
+                let rgba = &self.rgba;
+                let _ = bos[idx].map_mut(0, 0, w, h, |m| {
+                    let stride = m.stride() as usize;
+                    let buf = m.buffer_mut();
+                    for y in 0..h as usize {
+                        let dst_row = y * stride;
+                        let src_row = y * w as usize * 4;
+                        for x in 0..w as usize {
+                            let s = src_row + x * 4;
+                            let r = rgba[s] as u32;
+                            let g = rgba[s + 1] as u32;
+                            let b = rgba[s + 2] as u32;
+                            let word = (r << 16) | (g << 8) | b;
+                            let d = dst_row + x * 4;
+                            buf[d..d + 4].copy_from_slice(&word.to_ne_bytes());
+                        }
+                    }
+                });
+            }
+        }
+
+        self.child.attach(Some(&self.buffers[idx]), 0, 0);
+        self.child.damage_buffer(0, 0, self.w, self.h);
+        self.child.commit();
+        let _ = self.conn.flush();
+
+        // Throughput real (gateado por VIDEO_PLANE_FPS): frames commiteados/s.
+        self.frames_win += 1;
+        if self.fps_t0.elapsed() >= Duration::from_secs(1) {
+            if std::env::var_os("VIDEO_PLANE_FPS").is_some() {
+                eprintln!("[spike] pump: {} fps reales", self.frames_win);
+            }
+            self.frames_win = 0;
+            self.fps_t0 = Instant::now();
+        }
+    }
+}
+
+// ---------------------------------------------------------------------------
+// El plano: subsurface + su contenido (cuadro sólido o alimentador de video).
+// ---------------------------------------------------------------------------
+
+enum Content {
+    Solid(#[allow(dead_code)] WlBuffer),
+    Video(Feeder),
+}
+
+struct VideoPlane {
+    conn: Connection,
+    queue: EventQueue<WlGlobals>,
+    globals: WlGlobals,
+    parent: WlSurface,
+    _child: WlSurface,
+    subsurface: WlSubsurface,
+    content: Content,
+    below: bool,
+}
+
+impl VideoPlane {
+    /// Monta la segunda conexión sobre el display de winit y crea el subsurface.
+    /// `video` = fuente ya abierta (y sus dims/fps) para el modo video; `None`
+    /// = cuadro sólido.
+    unsafe fn atachar(
+        window: &Window,
+        video: Option<(Box<dyn FrameSource + Send>, u32, u32, f32)>,
+    ) -> Result<Self, String> {
+        let RawDisplayHandle::Wayland(dh) = window
+            .display_handle()
+            .map_err(|e| format!("display_handle: {e}"))?
+            .as_raw()
+        else {
+            return Err("no estamos bajo Wayland (display handle no-Wayland)".into());
+        };
+        let RawWindowHandle::Wayland(wh) = window
+            .window_handle()
+            .map_err(|e| format!("window_handle: {e}"))?
+            .as_raw()
+        else {
+            return Err("no estamos bajo Wayland (window handle no-Wayland)".into());
+        };
+        let display_ptr = dh.display.as_ptr();
+        let surface_ptr = wh.surface.as_ptr();
+
+        let backend = unsafe { Backend::from_foreign_display(display_ptr.cast()) };
+        let conn = Connection::from_backend(backend);
+        let mut queue: EventQueue<WlGlobals> = conn.new_event_queue();
+        let qh = queue.handle();
+
+        let display = conn.display();
+        let _registry = display.get_registry(&qh, ());
+        let mut globals = WlGlobals::default();
+        queue
+            .roundtrip(&mut globals)
+            .map_err(|e| format!("roundtrip registry: {e}"))?;
+        let compositor = globals.compositor.clone().ok_or("falta wl_compositor")?;
+        let subcompositor = globals.subcompositor.clone().ok_or("falta wl_subcompositor")?;
+        let shm = globals.shm.clone().ok_or("falta wl_shm")?;
+
+        let parent_id = unsafe {
+            ObjectId::from_ptr(WlSurface::interface(), surface_ptr.cast())
+                .map_err(|e| format!("ObjectId::from_ptr(parent): {e}"))?
+        };
+        let parent = WlSurface::from_id(&conn, parent_id)
+            .map_err(|e| format!("WlSurface::from_id(parent): {e}"))?;
+
+        let child = compositor.create_surface(&qh, ());
+        let subsurface = subcompositor.get_subsurface(&child, &parent, &qh, ());
+        subsurface.set_desync();
+
+        let (content, sw, sh, sx, sy) = match video {
+            Some((source, w, h, fps)) => {
+                // Backend: dmabuf (default, F1b) salvo VIDEO_PLANE_SHM=1 o que el
+                // compositor no exponga linux-dmabuf.
+                let forzar_shm = std::env::var_os("VIDEO_PLANE_SHM").is_some();
+                let (ring, buffers) = match (forzar_shm, globals.dmabuf.clone()) {
+                    (false, Some(dmabuf)) => match crear_ring_dmabuf(&dmabuf, &qh, w as i32, h as i32) {
+                        Ok(rb) => {
+                            eprintln!("[spike] backend = DMABUF (gbm LINEAR, scanout-capable)");
+                            rb
+                        }
+                        Err(e) => {
+                            eprintln!("[spike] dmabuf falló ({e}) — caigo a shm");
+                            let (map, frame_bytes, buffers) =
+                                crear_ring_shm(&shm, &qh, w as i32, h as i32)?;
+                            (Ring::Shm { map, frame_bytes }, buffers)
+                        }
+                    },
+                    _ => {
+                        eprintln!("[spike] backend = SHM (jamás promueve a plano)");
+                        let (map, frame_bytes, buffers) =
+                            crear_ring_shm(&shm, &qh, w as i32, h as i32)?;
+                        (Ring::Shm { map, frame_bytes }, buffers)
+                    }
+                };
+                let fps = if fps.is_finite() && fps > 1.0 { fps } else { 30.0 };
+                let feeder = Feeder {
+                    source,
+                    child: child.clone(),
+                    conn: conn.clone(),
+                    ring,
+                    w: w as i32,
+                    h: h as i32,
+                    buffers,
+                    next: 0,
+                    rgba: Vec::new(),
+                    last: Instant::now(),
+                    interval: Duration::from_secs_f32(1.0 / fps),
+                    frames_win: 0,
+                    fps_t0: Instant::now(),
+                };
+                eprintln!("[spike] video {w}x{h} @ {fps:.1}fps atachado al subsurface");
+                (Content::Video(feeder), w as i32, h as i32, 0, 0)
+            }
+            None => {
+                let buffer = crear_buffer_solido(&shm, &qh, SOLID_W, SOLID_H)?;
+                child.attach(Some(&buffer), 0, 0);
+                child.damage_buffer(0, 0, SOLID_W, SOLID_H);
+                child.commit();
+                (Content::Solid(buffer), SOLID_W, SOLID_H, SOLID_X, SOLID_Y)
+            }
+        };
+
+        subsurface.set_position(sx, sy);
+        // Región opaca: condición para que mirada lo mande a un plano de overlay
+        // (Fase 1b). No cambia la visibilidad ahora.
+        let region = compositor.create_region(&qh, ());
+        region.add(0, 0, sw, sh);
+        child.set_opaque_region(Some(&region));
+        region.destroy();
+        child.commit();
+
+        conn.flush().map_err(|e| format!("flush: {e}"))?;
+
+        Ok(Self {
+            conn,
+            queue,
+            globals,
+            parent,
+            _child: child,
+            subsurface,
+            content,
+            below: false,
+        })
+    }
+
+    fn frame_interval(&self) -> Option<Duration> {
+        match &self.content {
+            Content::Video(f) => Some(f.interval),
+            Content::Solid(_) => None,
+        }
+    }
+
+    fn set_below(&mut self, below: bool) {
+        self.below = below;
+        if below {
+            self.subsurface.place_below(&self.parent);
+        } else {
+            self.subsurface.place_above(&self.parent);
+        }
+        let _ = self.conn.flush();
+    }
+
+    /// Empuja frames de video (si aplica) y drena eventos de la queue.
+    fn pump(&mut self, now: Instant) {
+        if let Content::Video(f) = &mut self.content {
+            f.pump(now);
+        }
+        let _ = self.queue.dispatch_pending(&mut self.globals);
+        let _ = self.conn.flush();
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Helpers shm
+// ---------------------------------------------------------------------------
+
+/// Crea un memfd de `size` bytes y lo mapea. Devuelve (fd, puntero).
+fn memfd_map(size: usize) -> Result<(i32, *mut u8), String> {
+    let fd = unsafe { libc::memfd_create(c"llimphi-video-plane".as_ptr(), 0) };
+    if fd < 0 {
+        return Err("memfd_create falló".into());
+    }
+    if unsafe { libc::ftruncate(fd, size as libc::off_t) } != 0 {
+        unsafe { libc::close(fd) };
+        return Err("ftruncate falló".into());
+    }
+    let map = unsafe {
+        libc::mmap(
+            std::ptr::null_mut(),
+            size,
+            libc::PROT_READ | libc::PROT_WRITE,
+            libc::MAP_SHARED,
+            fd,
+            0,
+        )
+    };
+    if map == libc::MAP_FAILED {
+        unsafe { libc::close(fd) };
+        return Err("mmap falló".into());
+    }
+    Ok((fd, map as *mut u8))
+}
+
+/// Pool shm con `RING` buffers XRGB8888 de `w×h` contiguos. Devuelve el mapeo,
+/// el tamaño de un frame, y los `wl_buffer`.
+fn crear_ring_shm(
+    shm: &WlShm,
+    qh: &QueueHandle<WlGlobals>,
+    w: i32,
+    h: i32,
+) -> Result<(*mut u8, usize, Vec<WlBuffer>), String> {
+    let stride = w * 4;
+    let frame_bytes = (stride * h) as usize;
+    let total = frame_bytes * RING;
+    let (fd, map) = memfd_map(total)?;
+    let borrowed = unsafe { BorrowedFd::borrow_raw(fd) };
+    let pool = shm.create_pool(borrowed, total as i32, qh, ());
+    let buffers = (0..RING)
+        .map(|i| {
+            pool.create_buffer(
+                (i * frame_bytes) as i32,
+                w,
+                h,
+                stride,
+                wl_shm::Format::Xrgb8888,
+                qh,
+                (),
+            )
+        })
+        .collect();
+    unsafe { libc::close(fd) };
+    pool.destroy();
+    Ok((map, frame_bytes, buffers))
+}
+
+/// Ring de `RING` buffers **dmabuf** (gbm LINEAR, XRGB8888) de `w×h`, envueltos
+/// como `wl_buffer` por `zwp_linux_dmabuf`. A diferencia del shm, son
+/// scanout-capable: mirada los puede promover a un plano de overlay del DRM.
+/// Devuelve el `Ring::Dmabuf` (retiene device+bos vivos) y los `wl_buffer`.
+fn crear_ring_dmabuf(
+    dmabuf: &ZwpLinuxDmabufV1,
+    qh: &QueueHandle<WlGlobals>,
+    w: i32,
+    h: i32,
+) -> Result<(Ring, Vec<WlBuffer>), String> {
+    // Nodo de render de la GPU: el mismo Intel que usa mirada, así el buffer
+    // LINEAR es importable para composición y escaneable en un plano.
+    let file = std::fs::OpenOptions::new()
+        .read(true)
+        .write(true)
+        .open("/dev/dri/renderD128")
+        .map_err(|e| format!("abrir renderD128: {e}"))?;
+    let device = GbmDevice::new(file).map_err(|e| format!("gbm device: {e}"))?;
+
+    // SIN `SCANOUT`: un render node (renderD128) no puede asignar buffers de
+    // scanout (EACCES — eso es del card node con DRM master, que tiene mirada).
+    // No hace falta: mirada importa el dmabuf y forja SU framebuffer en card1; lo
+    // que lo hace escaneable es el modifier **LINEAR**, no el flag del cliente.
+    // `WRITE` da EINVAL en Intel (es para gbm_bo_write, no para map); para mapear
+    // por CPU basta `LINEAR`. Probamos combos en orden hasta que uno asigne.
+    let combos: [(&str, BufferObjectFlags); 3] = [
+        ("LINEAR|RENDERING", BufferObjectFlags::LINEAR | BufferObjectFlags::RENDERING),
+        ("LINEAR", BufferObjectFlags::LINEAR),
+        ("RENDERING", BufferObjectFlags::RENDERING),
+    ];
+    let fourcc = GbmFormat::Xrgb8888 as u32;
+
+    let mut bos: Vec<BufferObject<()>> = Vec::with_capacity(RING);
+    let mut buffers: Vec<WlBuffer> = Vec::with_capacity(RING);
+    for i in 0..RING {
+        let bo = {
+            let mut hecho: Option<BufferObject<()>> = None;
+            let mut ultimo = String::new();
+            for (nombre, flags) in combos {
+                match device.create_buffer_object::<()>(w as u32, h as u32, GbmFormat::Xrgb8888, flags) {
+                    Ok(b) => {
+                        if i == 0 {
+                            eprintln!("[spike] gbm flags = {nombre}");
+                        }
+                        hecho = Some(b);
+                        break;
+                    }
+                    Err(e) => ultimo = format!("{nombre}: {e}"),
+                }
+            }
+            hecho.ok_or_else(|| format!("gbm bo[{i}] (ningún combo): {ultimo}"))?
+        };
+        let fd = bo.fd().map_err(|_| format!("gbm bo[{i}].fd inválido"))?;
+        let modifier: u64 = bo.modifier().into();
+        let params = dmabuf.create_params(qh, ());
+        params.add(
+            fd.as_fd(),
+            0,
+            bo.offset(0),
+            bo.stride(),
+            (modifier >> 32) as u32,
+            (modifier & 0xffff_ffff) as u32,
+        );
+        // create_immed (v2+): sin roundtrip. El compositor dupea el fd; si el
+        // formato/modifier no le sirve manda un protocol error (lo veríamos).
+        let buffer = params.create_immed(
+            w,
+            h,
+            fourcc,
+            zwp_linux_buffer_params_v1::Flags::empty(),
+            qh,
+            (),
+        );
+        params.destroy();
+        drop(fd); // ya dupeado en create_immed; el bo mantiene el buffer real.
+        if i == 0 {
+            eprintln!(
+                "[spike] dmabuf bo {w}x{h} stride={} offset={} modifier={modifier:#x} fourcc={fourcc:#x}",
+                bo.stride(),
+                bo.offset(0),
+            );
+        }
+        bos.push(bo);
+        buffers.push(buffer);
+    }
+    Ok((Ring::Dmabuf { _device: device, bos }, buffers))
+}
+
+/// Buffer shm de color sólido (modo sin archivo).
+fn crear_buffer_solido(
+    shm: &WlShm,
+    qh: &QueueHandle<WlGlobals>,
+    w: i32,
+    h: i32,
+) -> Result<WlBuffer, String> {
+    let stride = w * 4;
+    let size = (stride * h) as usize;
+    let (fd, map) = memfd_map(size)?;
+    let px = map as *mut u32;
+    for i in 0..(w * h) as isize {
+        unsafe { px.offset(i).write(0x00FF_7800) }; // naranja
+    }
+    let borrowed = unsafe { BorrowedFd::borrow_raw(fd) };
+    let pool = shm.create_pool(borrowed, size as i32, qh, ());
+    let buffer = pool.create_buffer(0, w, h, stride, wl_shm::Format::Xrgb8888, qh, ());
+    unsafe { libc::close(fd) };
+    let _ = map;
+    pool.destroy();
+    Ok(buffer)
+}
+
+// ---------------------------------------------------------------------------
+// UI winit + wgpu (limpia el fondo; el "hueco" = fondo transparente)
+// ---------------------------------------------------------------------------
+
+struct Gpu {
+    surface: wgpu::Surface<'static>,
+    device: wgpu::Device,
+    queue: wgpu::Queue,
+    config: wgpu::SurfaceConfiguration,
+}
+
+impl Gpu {
+    fn new(window: Arc<Window>) -> Result<Self, String> {
+        let instance = wgpu::Instance::new(&wgpu::InstanceDescriptor {
+            backends: wgpu::Backends::PRIMARY,
+            ..Default::default()
+        });
+        let surface = instance
+            .create_surface(window.clone())
+            .map_err(|e| format!("create_surface: {e}"))?;
+        let adapter = pollster::block_on(instance.request_adapter(&wgpu::RequestAdapterOptions {
+            power_preference: wgpu::PowerPreference::LowPower,
+            force_fallback_adapter: false,
+            compatible_surface: Some(&surface),
+        }))
+        .map_err(|e| format!("request_adapter: {e}"))?;
+        let (device, queue) = pollster::block_on(adapter.request_device(&wgpu::DeviceDescriptor {
+            label: Some("video-plane-spike"),
+            required_features: wgpu::Features::empty(),
+            required_limits: wgpu::Limits::default(),
+            memory_hints: wgpu::MemoryHints::default(),
+            experimental_features: wgpu::ExperimentalFeatures::default(),
+            trace: wgpu::Trace::Off,
+        }))
+        .map_err(|e| format!("request_device: {e}"))?;
+
+        let caps = surface.get_capabilities(&adapter);
+        let format = caps
+            .formats
+            .iter()
+            .copied()
+            .find(|f| matches!(f, wgpu::TextureFormat::Bgra8Unorm | wgpu::TextureFormat::Rgba8Unorm))
+            .unwrap_or(caps.formats[0]);
+        let alpha_mode = caps
+            .alpha_modes
+            .iter()
+            .copied()
+            .find(|a| matches!(a, wgpu::CompositeAlphaMode::PreMultiplied))
+            .unwrap_or(caps.alpha_modes[0]);
+        eprintln!("[spike] wgpu formato={format:?} alpha={alpha_mode:?}");
+        let size = window.inner_size();
+        let config = wgpu::SurfaceConfiguration {
+            usage: wgpu::TextureUsages::RENDER_ATTACHMENT,
+            format,
+            width: size.width.max(1),
+            height: size.height.max(1),
+            present_mode: wgpu::PresentMode::Fifo,
+            desired_maximum_frame_latency: 2,
+            alpha_mode,
+            view_formats: vec![],
+        };
+        surface.configure(&device, &config);
+        Ok(Self { surface, device, queue, config })
+    }
+
+    fn resize(&mut self, w: u32, h: u32) {
+        self.config.width = w.max(1);
+        self.config.height = h.max(1);
+        self.surface.configure(&self.device, &self.config);
+    }
+
+    fn render(&self, transparent: bool) {
+        let frame = match self.surface.get_current_texture() {
+            Ok(f) => f,
+            Err(_) => return,
+        };
+        let view = frame
+            .texture
+            .create_view(&wgpu::TextureViewDescriptor::default());
+        let mut enc = self
+            .device
+            .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+        let clear = if transparent {
+            wgpu::Color { r: 0.0, g: 0.0, b: 0.0, a: 0.0 }
+        } else {
+            wgpu::Color { r: 0.05, g: 0.07, b: 0.12, a: 1.0 }
+        };
+        {
+            let _pass = enc.begin_render_pass(&wgpu::RenderPassDescriptor {
+                label: None,
+                color_attachments: &[Some(wgpu::RenderPassColorAttachment {
+                    view: &view,
+                    resolve_target: None,
+                    depth_slice: None,
+                    ops: wgpu::Operations {
+                        load: wgpu::LoadOp::Clear(clear),
+                        store: wgpu::StoreOp::Store,
+                    },
+                })],
+                depth_stencil_attachment: None,
+                timestamp_writes: None,
+                occlusion_query_set: None,
+            });
+        }
+        self.queue.submit(Some(enc.finish()));
+        frame.present();
+    }
+}
+
+// ---------------------------------------------------------------------------
+// App
+// ---------------------------------------------------------------------------
+
+struct SpikeApp {
+    /// Fuente de video ya abierta (o None para el cuadro sólido). Se consume al
+    /// crear el plano.
+    pending_video: Option<(Box<dyn FrameSource + Send>, u32, u32, f32)>,
+    win_size: (u32, u32),
+    window: Option<Arc<Window>>,
+    gpu: Option<Gpu>,
+    plane: Option<VideoPlane>,
+    transparent: bool,
+    interval: Option<Duration>,
+}
+
+impl ApplicationHandler for SpikeApp {
+    fn resumed(&mut self, el: &ActiveEventLoop) {
+        if self.window.is_some() {
+            return;
+        }
+        let attrs = Window::default_attributes()
+            .with_title("llimphi-video-plane · subsurface spike")
+            .with_transparent(true)
+            .with_inner_size(winit::dpi::LogicalSize::new(self.win_size.0, self.win_size.1));
+        let window = Arc::new(el.create_window(attrs).expect("create_window"));
+
+        let gpu = match Gpu::new(window.clone()) {
+            Ok(g) => g,
+            Err(e) => {
+                eprintln!("[spike] GPU falló: {e}");
+                el.exit();
+                return;
+            }
+        };
+        // Primer frame: crea/commitea el padre antes de atachar el subsurface.
+        gpu.render(self.transparent);
+
+        let video = self.pending_video.take();
+        match unsafe { VideoPlane::atachar(&window, video) } {
+            Ok(p) => {
+                self.interval = p.frame_interval();
+                eprintln!("[spike] subsurface OK. B=abajo/arriba, T=transparente, ESC=salir.");
+                self.plane = Some(p);
+            }
+            Err(e) => eprintln!("[spike] atachar subsurface FALLÓ: {e}"),
+        }
+
+        self.gpu = Some(gpu);
+        self.window = Some(window);
+        // NO pedimos redraw: el padre es un host transparente estático. Redibujarlo
+        // por frame bloquea el loop en `present` (Fifo) cuando mirada no manda
+        // frame-callbacks (ventana no visible). El video lo bombea `about_to_wait`
+        // (Poll) sobre el subsurface, que commitea independiente (desync).
+    }
+
+    fn window_event(&mut self, el: &ActiveEventLoop, _id: WindowId, event: WindowEvent) {
+        match event {
+            WindowEvent::CloseRequested => el.exit(),
+            WindowEvent::Resized(size) => {
+                if let Some(g) = &mut self.gpu {
+                    g.resize(size.width, size.height);
+                }
+                if let Some(w) = &self.window {
+                    w.request_redraw();
+                }
+            }
+            WindowEvent::RedrawRequested => {
+                // Sólo si el compositor lo pide (frame-callback real): repintamos el
+                // padre. NO re-pedimos redraw (evita el bloqueo en `present`).
+                if let Some(g) = &self.gpu {
+                    g.render(self.transparent);
+                }
+            }
+            WindowEvent::KeyboardInput {
+                event: KeyEvent { logical_key, state: ElementState::Pressed, .. },
+                ..
+            } => match logical_key {
+                Key::Named(NamedKey::Escape) => el.exit(),
+                Key::Character(c) if c.eq_ignore_ascii_case("b") => {
+                    if let Some(p) = &mut self.plane {
+                        let below = !p.below;
+                        p.set_below(below);
+                        eprintln!("[spike] subsurface {}", if below { "DEBAJO" } else { "ENCIMA" });
+                    }
+                    if let Some(w) = &self.window {
+                        w.request_redraw();
+                    }
+                }
+                Key::Character(c) if c.eq_ignore_ascii_case("t") => {
+                    self.transparent = !self.transparent;
+                    eprintln!("[spike] fondo {}", if self.transparent { "TRANSPARENTE" } else { "opaco" });
+                    if let Some(w) = &self.window {
+                        w.request_redraw();
+                    }
+                }
+                _ => {}
+            },
+            _ => {}
+        }
+    }
+
+    /// Despertado por el hilo timer (via `EventLoopProxy::send_event`) a cadencia
+    /// de video: bombea un frame al subsurface. Este es el ÚNICO driver del pump —
+    /// ni el `WaitUntil` ni los frame-callbacks del padre despiertan el loop bajo
+    /// mirada, pero `send_event` sí. Mono-core, sin busy-loop → el decoder respira.
+    fn user_event(&mut self, _el: &ActiveEventLoop, _event: ()) {
+        if let Some(p) = &mut self.plane {
+            p.pump(Instant::now());
+        }
+    }
+}
+
+/// Fuente **sintética**: patrón animado (tablero diagonal en movimiento +
+/// gradiente) a `w×h`. Decoupla la medición del pipeline dmabuf de foreign-av,
+/// que se estanca al manejarlo sin el sistema de clock/sync de media-app. Emite
+/// un frame por tick (el hilo timer del loop pacea la cadencia real).
+struct SyntheticSource {
+    w: u32,
+    h: u32,
+    t: f32,
+}
+
+impl FrameSource for SyntheticSource {
+    fn tick(&mut self, dt: Duration, buf: &mut Vec<u8>) -> Option<(u32, u32)> {
+        self.t += dt.as_secs_f32();
+        let (w, h) = (self.w as usize, self.h as usize);
+        buf.resize(w * h * 4, 0);
+        let phase = (self.t * 120.0) as i32; // scroll ~120 px/s
+        for y in 0..h {
+            let gy = ((y * 255) / h) as u8;
+            for x in 0..w {
+                let band = (((x as i32 + y as i32 + phase) / 32) & 1) as u8;
+                let i = (y * w + x) * 4;
+                buf[i] = if band == 0 { 40 } else { 220 };
+                buf[i + 1] = ((x * 255) / w) as u8;
+                buf[i + 2] = gy;
+                buf[i + 3] = 255;
+            }
+        }
+        Some((self.w, self.h))
+    }
+}
+
+/// Abre `path` por foreign-av y arma un `FrameSource` + dims + fps.
+fn abrir_video(path: &str) -> Result<(Box<dyn FrameSource + Send>, u32, u32, f32), String> {
+    let info = foreign_av::probe(path).map_err(|e| format!("probe: {e:?}"))?;
+    let session = foreign_av::MediaSession::open(info).map_err(|e| format!("open: {e:?}"))?;
+    let src = foreign_av::FfmpegVideoSource::from_session(session)
+        .map_err(|e| format!("video source: {e:?}"))?;
+    let (w, h) = src.dimensions();
+    let fps = src.fps();
+    Ok((Box::new(src), w, h, fps))
+}
+
+fn main() {
+    let arg = std::env::args().nth(1);
+    let (pending_video, win_size) = match arg.as_deref() {
+        // Modo medición: fuente sintética a 30 fps, sin foreign-av.
+        Some("test") => {
+            let (w, h, fps) = (1024u32, 576u32, 30.0f32);
+            let src: Box<dyn FrameSource + Send> = Box::new(SyntheticSource { w, h, t: 0.0 });
+            eprintln!("[spike] modo TEST: fuente sintética {w}x{h} @ {fps}fps");
+            (Some((src, w, h, fps)), (w, h))
+        }
+        Some(path) => match abrir_video(path) {
+            Ok(v) => {
+                let (_, w, h, _) = &v;
+                let win = ((*w).min(1600).max(320), (*h).min(900).max(240));
+                (Some(v), win)
+            }
+            Err(e) => {
+                eprintln!("[spike] no pude abrir {path}: {e} — caigo a cuadro sólido");
+                (None, DEFAULT_WIN)
+            }
+        },
+        None => {
+            eprintln!("[spike] sin archivo → cuadro sólido. Uso: subsurface-spike <video>");
+            (None, DEFAULT_WIN)
+        }
+    };
+
+    // Intervalo del video → cadencia del hilo timer que despierta el loop.
+    let interval = pending_video.as_ref().map(|(_, _, _, fps)| {
+        let f = if fps.is_finite() && *fps > 1.0 { *fps } else { 30.0 };
+        Duration::from_secs_f32(1.0 / f)
+    });
+
+    let el = EventLoop::<()>::with_user_event()
+        .build()
+        .expect("event loop");
+    // Wait: el loop bloquea entre despertadas (sin quemar CPU). Lo despierta el
+    // hilo timer via send_event, no el WaitUntil interno (que no dispara aquí).
+    el.set_control_flow(ControlFlow::Wait);
+    // Hilo timer: reloj de pared que patea el loop a cadencia de video. Único
+    // mecanismo que despierta winit bajo mirada de forma fiable.
+    if let Some(iv) = interval {
+        let proxy = el.create_proxy();
+        std::thread::spawn(move || loop {
+            std::thread::sleep(iv);
+            if proxy.send_event(()).is_err() {
+                break; // el loop murió → salimos.
+            }
+        });
+    }
+
+    let mut app = SpikeApp {
+        pending_video,
+        win_size,
+        window: None,
+        gpu: None,
+        plane: None,
+        transparent: false,
+        interval,
+    };
+    el.run_app(&mut app).expect("run_app");
+}
diff --git a/llimphi-voxel-app/Cargo.toml b/llimphi-voxel-app/Cargo.toml
new file mode 100644
index 0000000..3240339
--- /dev/null
+++ b/llimphi-voxel-app/Cargo.toml
@@ -0,0 +1,33 @@
+[package]
+name = "llimphi-voxel-app"
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+authors.workspace = true
+publish.workspace = true
+description = "App showcase del motor voxel 3D (llimphi-3d + llimphi-voxel): un mundo procedural que se orbita, con atmósfera y un monumento-malla flotante que prueba la convivencia voxel+triángulos. Arranca como demo; pensada para ganar personalidad (juego). Nombre provisional, rebrandeable."
+
+[[bin]]
+name = "llimphi-voxel-app"
+path = "src/main.rs"
+
+[dependencies]
+# Motor 3D general (escena, cámara, depth compartido, voxel + mallas).
+llimphi-3d = { path = "../llimphi-3d", version = "0.1.0" }
+# Dinámica voxel/juego (world-gen, actores).
+llimphi-voxel = { path = "../llimphi-voxel", version = "0.1.0" }
+# En vivo desde un mapa real (--mapa): GeoJSON/DEM → VoxelGrid caminable.
+nahual-geo-voxel = { workspace = true }
+nahual-geo-core = { workspace = true }
+# Bucle Elm + ventana + re-exports (hal/raster/layout).
+llimphi-ui = { path = "../llimphi-ui", version = "0.1.0" }
+# Puente ffmpeg: secuencia de PNG → video (modo --film).
+foreign-av = { path = "../../../shared/foreign-av" }
+# Puente MagicaVoxel (.vox): generar el modelo del demo --vox.
+foreign-vox = { path = "../shared/foreign-vox", version = "0.1.0" }
+# Música: componer (takiy-core) + sintetizar a WAV (takiy-synth) la banda sonora.
+takiy-core = { path = "../../takiy/takiy-core" }
+takiy-synth = { path = "../../takiy/takiy-synth" }
+# Render headless a PNG para el modo --shot (verificación sin pantalla).
+pollster = { workspace = true }
+png = { workspace = true }
diff --git a/llimphi-voxel-app/README.md b/llimphi-voxel-app/README.md
new file mode 100644
index 0000000..93f3033
--- /dev/null
+++ b/llimphi-voxel-app/README.md
@@ -0,0 +1,283 @@
+# llimphi-voxel-app — máquina de cine voxel (machinima)
+
+App showcase del motor voxel 3D de Llimphi, convertida en una **máquina de cine
+voxel**: generar escenas controladas, mover personajes y **filmar una película**
+— sin pantalla, de forma determinista, a un video con sonido.
+
+No es un clon de juego: es la prueba de que el motor (`llimphi-3d`) + la capa de
+dinámica (`llimphi-voxel`) alcanzan para *dirigir* una escena. El diseño y el
+porqué están en `01_yachay/dominium/MOTOR-VOXEL.md` §12; este README es la **guía
+práctica**: cómo correrla y cómo escribir tu propia película.
+
+---
+
+## Los modos
+
+```bash
+cargo run -p llimphi-voxel-app --release -- --film    # filma el guion → /tmp/voxel_film.mkv (AV1+Opus, con audio)
+cargo run -p llimphi-voxel-app --release -- --born    # corto "nace en el desierto" → /tmp/voxel_born.mkv (AV1+Opus)
+cargo run -p llimphi-voxel-app --release -- --poses   # catálogo de clips de actor → /tmp/actor_clips.png
+cargo run -p llimphi-voxel-app --release -- --vox     # importa un .vox y lo renderiza → /tmp/vox_import.png
+cargo run -p llimphi-voxel-app --release              # ventana interactiva (orbitar / explorar en 1ª persona)
+mpv /tmp/voxel_film.mkv                                # ver la película
+```
+
+El modo **`--born`** filma la *secuencia de nacimiento*: un mundo de **desierto
+llano** (`World::build_desert`, vía `WorldRecipe::desert` aplanada), un **huevo**
+(`Egg`) posado sobre la arena, y la cámara guionada por `BirthSequence` que **cae
+del cielo**, ve el huevo, **aterriza en el punto de vista** del recién nacido y
+**sale a tercera persona** mientras el huevo eclosiona y el niño emerge hacia un
+costado del cascarón. Banda sonora con el acento en el instante del nacimiento.
+Une las cuatro piezas del corto (creador de mundos · personaje por edad · huevo/
+eclosión · modos de cámara) en un pipeline punta a punta, determinista y sin
+pantalla.
+
+**Resolución de salida** (aplica a `--film`, `--born` y `--vox`): por defecto 960×540; subila con
+un flag extra `--720` / `--1080` / `--4k` — p.ej.
+`… --film --1080` rinde 1920×1080. En 4K el supersampling baja a 1× (a resolución
+nativa el ray-march ya queda nítido); el resto rinde a 2× y baja a la final.
+
+Todo el render de cine es **headless** (no necesita display): se rinde cada
+cuadro a una textura, se baja por supersampling a PNG, y `ffmpeg` los junta.
+
+---
+
+## Arquitectura en capas
+
+```
+                 takiy-core/synth ─ banda sonora (Score → WAV)
+                          │
+ foreign-vox ── .vox ─────┤
+ foreign-av  ── ffmpeg ───┤
+                          ▼
+   app (este crate)  ── screenplay() + soundtrack() + golem_model()
+        │  Sequence (dirección) · Actor (reparto) · World (escenario)
+        ▼
+   llimphi-voxel  ── Actor/Clip · director (ActorScript/Shot/Sequence) · terrain · vox import
+        ▼
+   llimphi-3d     ── Scene3d · Camera3d · CameraTrack · VoxelRenderer · Renderer3d · Hud
+        ▼
+        wgpu (Vulkan/Metal/DX12/GL/WebGPU)
+```
+
+El motor (`llimphi-3d`) es **general** y no sabe de cine; la dirección vive en
+`llimphi-voxel::director` (data) y el **guion concreto** en la app (`film.rs`).
+
+---
+
+## Escribir una película (el guion)
+
+Una película es un [`Sequence`]: un reparto de **guiones de actor**
+(`ActorScript`) + una lista de **planos de cámara** (`Shot`) + la duración. Todo
+es determinista por tiempo: `t` fija el estado de la escena.
+
+### 1. El guion de cada actor — `ActorScript`
+
+Keyframes `(t, posición de grilla, clip?, rumbo?)`. La posición interpola; el
+clip y el rumbo son automáticos si no se fijan (camina si se mueve, mira hacia
+donde va).
+
+```rust
+use llimphi_voxel::{ActorScript, ActorKey, Clip};
+use std::f32::consts::{FRAC_PI_2, PI};
+
+let script = ActorScript::new(vec![
+    ActorKey::at(0.0, 34.0, 50.0),                          // arranca aquí (en grilla)
+    ActorKey::at(2.6, 50.0, 50.0).facing(FRAC_PI_2),        // camina hasta aquí mirando +X
+    ActorKey::at(3.0, 50.0, 50.0).play(Clip::Wave).facing(PI), // gira a cámara y saluda
+    ActorKey::at(5.6, 50.0, 50.0).play(Clip::Wave).facing(PI), // sostiene hasta el final
+]);
+// script.sample(t) → ActorSample { gx, gz, facing, clip }
+```
+
+- **`.facing(yaw)`** en dos keys consecutivas → el actor **gira suave** entre
+  ambas (interpolación por el ángulo más corto). En una sola → mantiene ese rumbo.
+- **`.play(clip)`** fuerza un clip (saludar, festejar…); sin él, el director
+  elige `Walk` si el segmento se mueve o `Idle` si está quieto.
+- Posición en **grilla** (`gx, gz`): la app la posa sobre el relieve con
+  `World::ground_at` cada cuadro.
+
+### 2. Los planos de cámara — `Shot` + `CameraTrack`
+
+Una `CameraTrack` interpola poses `(t, eye, target, fov)` con suavizado; un
+`Shot` la ancla a un instante. Varios planos = **cortes duros** (cambia de plano
+sin interpolar entre ellos).
+
+```rust
+use llimphi_3d::{CameraTrack, CamKey, glam::Vec3};
+use llimphi_voxel::{Sequence, Shot};
+
+let focus = Vec3::new(0.0, 8.0, 0.0); // a dónde mira (mundo, centrado en el origen)
+
+let establishing = CameraTrack::new(vec![
+    CamKey::look(0.0, focus + Vec3::new(-6.0, 9.0, -30.0), focus, 52.0), // grúa lejos
+    CamKey::look(2.8, focus + Vec3::new(-2.0, 3.5, -17.0), focus, 44.0), // entra
+]);
+let closeup = CameraTrack::new(vec![
+    CamKey::look(0.0, focus + Vec3::new(0.0, 2.6, -11.0), focus, 40.0),  // plano corto
+    CamKey::look(2.8, focus + Vec3::new(1.4, 2.1, -9.0), focus, 37.0),   // empuja
+]);
+
+let seq = Sequence::new(
+    vec![script],                                    // reparto
+    vec![Shot::new(0.0, establishing), Shot::new(2.8, closeup)], // corte a los 2.8 s
+    5.6,                                             // duración
+);
+// seq.camera(t) → Camera3d  ·  seq.frames(fps) → nº de cuadros  ·  seq.cast_centroid(t)
+```
+
+Las `CamKey` se construyen **después** de conocer el terreno (la `Y` del foco
+sale de `World::ground_at`), por eso el guion se arma en `screenplay()` con el
+mundo ya construido.
+
+### 3. Reproducir — el bucle de `--film`
+
+```rust
+for f in 0..seq.frames(FPS) {
+    let t = f as f32 / FPS as f32;
+    for (actor, script) in cast.iter_mut().zip(&seq.actors) {
+        let s = script.sample(t);
+        actor.pos = world.ground_at(s.gx as u32, s.gz as u32); // posar sobre el relieve
+        actor.facing = s.facing;
+        actor.set_clip(s.clip);   // dispara el cross-fade si cambió de clip
+        actor.advance(dt);        // avanza la animación
+    }
+    // … subir las mallas de los actores, render con seq.camera(t), volcar PNG …
+}
+```
+
+**El guion canónico vive en `src/film.rs::screenplay()`** — cópialo y editalo
+para tu propia escena.
+
+---
+
+## El reparto — `Actor` y la librería de clips
+
+Un [`Actor`] es un muñeco de cajas articuladas (cabeza/torso/2 brazos/2 piernas)
+que produce una **malla** por cuadro; la app la sube a un `Renderer3d` y la
+compone con el terreno en `Scene3d` (oclusión correcta).
+
+```rust
+use llimphi_voxel::{Actor, Clip};
+use llimphi_3d::glam::Vec3;
+
+let mut a = Actor::new(Vec3::ZERO, 0.0)
+    .with_colors([0.88,0.70,0.56], [0.82,0.28,0.26], [0.18,0.20,0.28]); // piel, remera, pantalón
+a.set_clip(Clip::Run);   // cambia con cross-fade suave (no corta)
+a.advance(dt);           // avanza la fase a la cadencia del clip
+let (verts, idx) = a.mesh();   // malla local de la pose actual
+let model = a.model();         // matriz de ubicación (pos + rumbo)
+```
+
+Clips disponibles: `Idle`, `Walk`, `Run`, `Wave`, `Point`, `Cheer`.
+
+### Agregar un clip nuevo
+
+Un clip es una **función `fase → Pose`** (los ángulos de todas las
+articulaciones). Para sumar una animación, edita `llimphi-voxel/src/actor.rs`:
+
+1. Agrega la variante a `enum Clip`.
+2. Dale una cadencia en `Clip::cadence`.
+3. Devuelve su `Pose` en `Clip::pose` (mezclando `leg_l/r`, `arm_l/r`,
+   `arm_l/r_out` —apertura lateral—, `head_pitch`, `bob`, `lean`).
+
+No se toca el render: `Actor::mesh` hornea cualquier `Pose`. Verificalo con
+`--poses` (vuelca una fila etiquetada con todos los clips).
+
+---
+
+## Importar assets diseñados — `.vox` (MagicaVoxel)
+
+Diseñás un set o personaje en MagicaVoxel y lo metés a la escena:
+
+```rust
+// Un archivo .vox → VoxelGrid del motor (remapea z-arriba → y-arriba):
+let grid = llimphi_voxel::load_grid("mi_modelo.vox")?;
+
+// O componer un set metiendo piezas en un grid existente:
+let model = foreign_vox::parse(&std::fs::read("pieza.vox")?)?[0].clone();
+llimphi_voxel::stamp(&mut grid, &model, [origin_x, origin_y, origin_z]);
+```
+
+`foreign_vox::{parse, write}` también permite **exportar** una escena voxel a
+`.vox` para editarla afuera. El modo `--vox` genera un golem programático
+(`golem_model()`), lo escribe a `.vox` y lo reimporta — el camino real de carga.
+
+> Nota: si el `.vox` no trae chunk `RGBA`, se usa una paleta de fallback (rampa
+> HSV). Los exportes de MagicaVoxel siempre incluyen `RGBA`, así que entran bien.
+
+---
+
+## La banda sonora — `takiy`
+
+`src/soundtrack.rs` compone un `Score` con `takiy-core` (progresión, pads, bajo,
+melodía) y lo sintetiza a WAV con `takiy-synth`:
+
+```rust
+use takiy_core::{Score, Track, ScoreNote, Pitch, Chord, ChordQuality, PitchClass};
+use takiy_synth::{OscRenderer, Renderer, Waveform, Adsr, write_wav};
+
+let mut score = Score::new(86.0); // bpm
+let mut lead = Track::new("lead");
+lead.add(ScoreNote::new(Pitch::from_midi(72).unwrap(), 0.0, 1.0, 78)); // (pitch, start, dur, vel)
+score.add_track(lead);
+
+let buf = OscRenderer { sample_rate: 44_100, waveform: Waveform::Triangle, envelope: Adsr::DEFAULT }
+    .render(&score);
+write_wav(&buf, "/tmp/banda.wav")?;
+```
+
+`--film` muxea ese WAV al video con `foreign_av::encode_frames(pattern, fps, crf,
+Some(audio_path), out)` → pista **Opus**, recortada a la duración del video
+(`-shortest`).
+
+---
+
+## El render (cómo se ve bien sin pantalla)
+
+- **Headless**: cada cuadro se rinde a una textura intermedia y se lee de vuelta
+  a PNG (`crate::write_png_downsampled`); `--film` arma la secuencia
+  `frame_%04d.png` y la pasa a `foreign_av::encode_frames` (AV1 + Opus).
+- **Supersampling (SSAA)**: `--film`/`--vox` renderizan a **2×** y bajan
+  promediando bloques 2×2 → antialias de los bordes duros del ray-march.
+- **Luz con color**: el sol se tiñe por su elevación (cálido al ras → blanco en
+  lo alto) y el ambiente por el color de cielo (rebote frío). Se controla el
+  *mood* moviendo `VoxelRenderer::sun_dir` y `Atmosphere::{sky_zenith, sky_horizon}`.
+- **HUD/texto**: `llimphi_3d::{Hud, HudQuad}` pinta overlays screen-space (mira,
+  texto con fuente bitmap 5×7) — lo usa `--poses` para las etiquetas.
+
+---
+
+## Gotchas (aprendidos filmando)
+
+- **Encuadre del trío**: si los actores están muy separados en Z y la cámara
+  cerca, el del carril cercano se come el lente. Apretá la separación (±2.5) o
+  aleja la cámara (≥9 unidades).
+- **Tierra firme y plana**: el terreno es procedural; `find_flat_strip` (en
+  `film.rs`) elige un llano sobre el nivel del mar para que no caminen sobre el
+  agua ni los hunda el relieve.
+- **El monumento**: el escenario trae un cubo-malla flotante de demo; apagalo con
+  `World::show_monument(false)` cuando filmas personajes.
+- **`sun_dir` y caras a cámara**: el sol ilumina las caras que lo miran; si tu
+  cámara mira la cara opuesta al sol, esa cara queda sólo con ambiente. Orientá
+  `sun_dir` hacia la cámara para un *hero shot*.
+- **`ffmpeg`**: hace falta en el PATH con `libsvtav1` + `libopus`. Sin él, los
+  PNG quedan igual en `/tmp/voxel_film/` y se avisa cómo muxear a mano.
+- **Determinismo**: todo es función de `t` (y de semillas LCG). El mismo guion
+  produce el mismo video — ideal para iterar.
+
+---
+
+## Mapa de archivos
+
+| Archivo | Qué tiene |
+|---|---|
+| `src/main.rs` | flags (`--film/--born/--poses/--vox`), bucle interactivo, `write_png[_downsampled]` |
+| `src/film.rs` | `screenplay()` (el guion), `--film`/`--born`/`--poses`/`--vox`, `golem_model()`, SSAA |
+| `src/world.rs` | escenario: terreno + atmósfera + monumento + manada; `build_desert`, `render_with`, `ground_at` |
+| `src/soundtrack.rs` | la banda sonora (takiy) |
+| `llimphi-voxel/src/{actor,director,vox}.rs` | reparto, timeline, import `.vox` (reusables) |
+| `llimphi-3d/src/{scene,camera,cinema,voxel_renderer,renderer,hud}.rs` | el motor 3D general |
+
+[`Actor`]: ../llimphi-voxel/src/actor.rs
+[`Sequence`]: ../llimphi-voxel/src/director.rs
diff --git a/llimphi-voxel-app/src/film.rs b/llimphi-voxel-app/src/film.rs
new file mode 100644
index 0000000..265b71d
--- /dev/null
+++ b/llimphi-voxel-app/src/film.rs
@@ -0,0 +1,595 @@
+//! Modo `--film`: *filma* una escena voxel guionada a un video, la rebanada
+//! vertical de la idea "generar escenas controladas, mover personajes y filmar".
+//!
+//! Junta las cuatro piezas nuevas en un pipeline punta a punta, **sin pantalla**:
+//!
+//! 1. un **reparto** de [`Actor`]es (muñecos articulados) que caminan un trayecto
+//!    sobre el terreno (posa la malla por frame con `Renderer3d::set_geometry`);
+//! 2. una **cámara guionada** por [`CameraTrack`] (keyframes interpolados suave);
+//! 3. el render headless de cada cuadro a PNG (reusa [`crate::write_png`]);
+//! 4. el muxeo de la secuencia a video con [`foreign_av::encode_frames`].
+//!
+//! Es determinista (todo en función del índice de frame) → reproducible. La
+//! *dirección* (quién camina a dónde, dónde corta la cámara) vive aquí, en la capa
+//! de contenido; el motor sólo provee cámara/escena/actor genéricos.
+
+use foreign_vox::{VoxModel, Voxel};
+use llimphi_3d::glam::Vec3;
+use llimphi_3d::{
+    Atmosphere, CamKey, Camera3d, CameraTrack, Hud, HudQuad, Renderer3d, Scene3d, VoxelRenderer,
+};
+use llimphi_ui::llimphi_hal::{wgpu, Hal};
+use llimphi_ui::llimphi_raster::peniko::Color;
+use llimphi_ui::llimphi_raster::{vello, Renderer};
+use llimphi_voxel::{
+    forward_h, right_h, Actor, ActorKey, ActorScript, Age, BirthSequence, Clip, Egg, Hatchling,
+    Sequence, Shot,
+};
+
+use crate::world::{World, FMT};
+use crate::{DIM_XZ, SEED};
+
+/// Resolución y cadencia del film (16:9, 30 fps). Por defecto 960×540 @2×; se puede
+/// subir a 720p/1080p/4K por flag (ver [`film_dims`]).
+const W: u32 = 960;
+const H: u32 = 540;
+const FPS: u32 = 30;
+/// Factor de **supersampling** (SSAA): se renderiza a `SS×` y se baja promediando
+/// → antialias de los bordes duros del ray-march. El film/vox lo usan; `--poses`
+/// queda a 1× (su HUD se mide en pixels de pantalla).
+const SS: u32 = 2;
+
+/// Resolución de salida elegida por flag de línea de comandos. Devuelve `(w, h, ss)`
+/// — el ancho/alto **finales** del video y el factor de supersampling. En 4K se baja
+/// `ss` a 1 (un buffer 4K×2 = 8K sería ~250 MB y pocas GPUs lo aguantan); en cine
+/// "real" el ray-march ya queda nítido por la resolución nativa.
+/// - `--4k`            → 3840×2160 @1×
+/// - `--1080`/`--1080p`→ 1920×1080 @2×
+/// - `--720`/`--720p`  → 1280×720  @2×
+/// - (default)         → 960×540   @2×
+fn film_dims() -> (u32, u32, u32) {
+    let args: Vec<String> = std::env::args().collect();
+    let has = |f: &str| args.iter().any(|a| a == f);
+    if has("--4k") {
+        (3840, 2160, 1)
+    } else if has("--1080") || has("--1080p") {
+        (1920, 1080, 2)
+    } else if has("--720") || has("--720p") {
+        (1280, 720, 2)
+    } else {
+        (W, H, SS)
+    }
+}
+/// Carpeta de cuadros y salida del video.
+const FRAME_DIR: &str = "/tmp/voxel_film";
+const OUT: &str = "/tmp/voxel_film.mkv";
+/// Carpeta de cuadros y salida del corto de nacimiento (`--born`).
+const BORN_DIR: &str = "/tmp/voxel_born";
+const BORN_OUT: &str = "/tmp/voxel_born.mkv";
+
+/// Paleta del reparto (piel, remera, pantalón) — tres figuras distinguibles.
+const CAST: [([f32; 3], [f32; 3], [f32; 3]); 3] = [
+    ([0.90, 0.72, 0.58], [0.82, 0.28, 0.26], [0.20, 0.20, 0.28]), // remera roja
+    ([0.86, 0.68, 0.54], [0.22, 0.55, 0.78], [0.18, 0.20, 0.24]), // remera azul
+    ([0.92, 0.78, 0.62], [0.92, 0.80, 0.30], [0.26, 0.22, 0.20]), // remera amarilla
+];
+
+/// Filma el guion ([`screenplay`]) y escribe el video. Reproduce la [`Sequence`]
+/// cuadro a cuadro (determinista): cada actor se posa según su `ActorScript`
+/// (con cross-fade de clips), la cámara sale de los planos con cortes duros.
+pub fn film() {
+    let hal = pollster::block_on(Hal::new(None)).expect("hal");
+    let mut renderer = Renderer::new(&hal).expect("renderer");
+    let mut world = World::build(&hal.device, &hal.queue, DIM_XZ, SEED);
+    world.show_monument(false); // película de personajes: sin el cubo flotante
+
+    let (seq, mut cast) = screenplay(&world);
+    // Un `Renderer3d` por actor (su malla se re-sube cada frame).
+    let mut actor_r: Vec<Renderer3d> = cast.iter().map(|_| Renderer3d::new(&hal.device, FMT)).collect();
+
+    let (w, h, ss) = film_dims();
+    let (ssw, ssh) = (w * ss, h * ss);
+    if (w, h, ss) != (W, H, SS) {
+        eprintln!("film: resolución {w}x{h} @{ss}× (supersampled a {ssw}x{ssh})");
+    }
+    let inter = make_target(&hal, ssw, ssh); // render a ss× para SSAA
+    let inter_view = inter.create_view(&wgpu::TextureViewDescriptor::default());
+
+    prepare_dir(FRAME_DIR);
+    let frames = seq.frames(FPS);
+    let dt = 1.0 / FPS as f32;
+    for f in 0..frames {
+        let t = f as f32 / FPS as f32;
+
+        // Cada actor obedece su guion: posición sobre el relieve, rumbo y clip
+        // (el cambio de clip dispara el cross-fade interno del `Actor`).
+        for (a, script) in cast.iter_mut().zip(&seq.actors) {
+            let s = script.sample(t);
+            a.pos = world.ground_at(s.gx as u32, s.gz as u32);
+            a.facing = s.facing;
+            a.set_clip(s.clip);
+            a.advance(dt);
+        }
+        for (a, r) in cast.iter().zip(actor_r.iter_mut()) {
+            let (v, i) = a.mesh();
+            r.set_geometry(&hal.device, &v, &i);
+            r.set_model(a.model());
+        }
+
+        world.tick(dt); // la manada de fondo deambula
+        world.animate(t * 0.5); // el monumento gira
+        let camera = seq.camera(t);
+
+        // IK de mirada: los actores siguen la cámara con la cabeza (dentro del rango
+        // creíble) → "conscientes del lente". Re-malla con la cabeza ya orientada.
+        for (a, r) in cast.iter_mut().zip(actor_r.iter_mut()) {
+            a.look_at(Some(camera.eye));
+            let (v, i) = a.mesh();
+            r.set_geometry(&hal.device, &v, &i);
+        }
+
+        let refs: Vec<&Renderer3d> = actor_r.iter().collect();
+        render_frame(&hal, &mut renderer, &mut world, &camera, &refs, &inter_view, (ssw, ssh));
+        crate::write_png_downsampled(&hal, &inter, ssw, ssh, ss, &frame_path(FRAME_DIR, f));
+        if f % 15 == 0 {
+            eprintln!("film: cuadro {f}/{frames}");
+        }
+    }
+
+    // --- Banda sonora: compone+sintetiza un WAV con takiy para muxear, con acentos
+    // sobre los **beats del guion** (cortes de cámara + gestos) → música sincronizada.
+    let audio = "/tmp/voxel_film.wav";
+    let beats = seq.beat_times();
+    let secs = crate::soundtrack::render_to(audio, &beats);
+    let beat_list: Vec<String> = beats.iter().map(|t| format!("{t:.2}s")).collect();
+    eprintln!(
+        "film: banda sonora {audio} ({secs:.1}s, {} acentos sobre la acción: {})",
+        beats.len(),
+        beat_list.join(", ")
+    );
+
+    // --- Muxeo a video (video AV1 + audio Opus). Si no hay ffmpeg, deja los PNG.
+    let pattern = format!("{FRAME_DIR}/frame_%04d.png");
+    match foreign_av::encode_frames(&pattern, FPS, 30, Some(std::path::Path::new(audio)), OUT) {
+        Ok(()) => eprintln!("film: video escrito {OUT} ({frames} cuadros, {w}x{h}@{FPS}, con audio)"),
+        Err(e) => eprintln!(
+            "film: cuadros en {FRAME_DIR}/ pero ffmpeg falló ({e:?}); \
+             puedes muxear a mano: ffmpeg -framerate {FPS} -i {pattern} -i {audio} -c:v libsvtav1 -c:a libopus {OUT}"
+        ),
+    }
+}
+
+/// Modo `--born`: filma la **secuencia de nacimiento** del corto *"nace en el
+/// desierto"*. Reúne las piezas del corto **sobre terreno real**: un mundo de
+/// desierto ([`World::build_desert`]), un huevo ([`Egg`]) posado sobre la arena, y
+/// la cámara guionada por [`BirthSequence`] que cae del cielo, ve el huevo,
+/// aterriza en el punto de vista del recién nacido y sale a tercera persona
+/// mientras el huevo eclosiona y nace el niño. Determinista (todo en función del
+/// tiempo) → reproducible; muxea a video con banda sonora cuyo acento cae en el
+/// instante del nacimiento.
+pub fn born() {
+    let hal = pollster::block_on(Hal::new(None)).expect("hal");
+    let mut renderer = Renderer::new(&hal).expect("renderer");
+    let mut world = World::build_desert(&hal.device, &hal.queue, DIM_XZ, SEED);
+
+    // El huevo, posado sobre la columna central del desierto, mirando a −Z (de
+    // frente a la cámara de seguimiento, que termina detrás del sujeto).
+    let (cx, cz) = (DIM_XZ / 2, DIM_XZ / 2);
+    let egg_pos = world.ground_at(cx, cz);
+    let mut egg = Egg::new(egg_pos, 1.4, Hatchling::human(Age::Baby));
+    egg.facing = std::f32::consts::PI;
+    egg.shell = [0.95, 0.92, 0.84];
+
+    // La secuencia: caída lenta desde bien alto (muestra el llano del desierto) +
+    // una salida holgada. Total ≈ 5.6 s → calza con la banda sonora.
+    let mut seq = BirthSequence::new(egg);
+    seq.sky_height = 72.0;
+    seq.t_land = 3.0;
+    seq.t_pull = 1.6;
+    seq.follow_distance = 4.5;
+    seq.follow_height = 1.4;
+
+    // Un renderer para el cascarón y otro para el recién nacido (mallas re-subidas).
+    let mut egg_r = Renderer3d::new(&hal.device, FMT);
+    let mut baby_r = Renderer3d::new(&hal.device, FMT);
+    let mut newborn = seq.newborn();
+    newborn.set_clip(Clip::Idle);
+
+    let (w, h, ss) = film_dims();
+    let (ssw, ssh) = (w * ss, h * ss);
+    if (w, h, ss) != (W, H, SS) {
+        eprintln!("born: resolución {w}x{h} @{ss}× (supersampled a {ssw}x{ssh})");
+    }
+    let inter = make_target(&hal, ssw, ssh);
+    let inter_view = inter.create_view(&wgpu::TextureViewDescriptor::default());
+
+    prepare_dir(BORN_DIR);
+    let dur = seq.duration();
+    let frames = (dur * FPS as f32).ceil() as u32;
+    let dt = 1.0 / FPS as f32;
+    // El bebé se dibuja recién cuando la cámara salió del sujeto: durante el
+    // aterrizaje la cámara está *dentro* de su cabeza (1ª persona) y veríamos sus
+    // caras internas.
+    let show_baby_from = seq.t_land + 0.3 * seq.t_pull;
+
+    for f in 0..frames {
+        let t = f as f32 / FPS as f32;
+        let camera = seq.camera(t);
+
+        // Cascarón: el progreso de eclosión lo guiona la secuencia (se abre al
+        // aterrizar).
+        egg.hatch = seq.hatch(t);
+        let (ev, ei) = egg.mesh();
+        egg_r.set_geometry(&hal.device, &ev, &ei);
+        egg_r.set_model(egg.model());
+
+        let mut meshes: Vec<&Renderer3d> = vec![&egg_r];
+        if t >= show_baby_from {
+            // Emerge: sale del cascarón hacia un **costado** (si no, el cuenco —entre
+            // la cámara de seguimiento y el niño— lo taparía) caminando mientras dura
+            // la salida, luego queda quieto. Sigue el lente con la cabeza.
+            let e = ((t - show_baby_from) / (seq.t_pull + 0.5)).clamp(0.0, 1.0);
+            let step = right_h(seq.egg.facing) * (e * 1.5) + forward_h(seq.egg.facing) * (e * 0.5);
+            newborn.pos = seq.egg.pos + step;
+            newborn.set_clip(if e < 1.0 { Clip::Walk } else { Clip::Idle });
+            newborn.advance(dt);
+            newborn.look_at(Some(camera.eye));
+            let (bv, bi) = newborn.mesh();
+            baby_r.set_geometry(&hal.device, &bv, &bi);
+            baby_r.set_model(newborn.model());
+            meshes.push(&baby_r);
+        }
+
+        render_frame(&hal, &mut renderer, &mut world, &camera, &meshes, &inter_view, (ssw, ssh));
+        crate::write_png_downsampled(&hal, &inter, ssw, ssh, ss, &frame_path(BORN_DIR, f));
+        if f % 15 == 0 {
+            eprintln!("born: cuadro {f}/{frames}");
+        }
+    }
+
+    // Banda sonora: acentos en el nacimiento (aterrizaje) y al asentarse el plano
+    // de seguimiento → la música cae sobre la acción.
+    let audio = "/tmp/voxel_born.wav";
+    let beats = vec![seq.t_land, seq.t_land + seq.t_pull];
+    let secs = crate::soundtrack::render_to(audio, &beats);
+    eprintln!("born: banda sonora {audio} ({secs:.1}s, acentos en {beats:?})");
+
+    let pattern = format!("{BORN_DIR}/frame_%04d.png");
+    match foreign_av::encode_frames(&pattern, FPS, 30, Some(std::path::Path::new(audio)), BORN_OUT) {
+        Ok(()) => eprintln!("born: video escrito {BORN_OUT} ({frames} cuadros, {w}x{h}@{FPS}, con audio)"),
+        Err(e) => eprintln!(
+            "born: cuadros en {BORN_DIR}/ pero ffmpeg falló ({e:?}); \
+             muxea a mano: ffmpeg -framerate {FPS} -i {pattern} -i {audio} -c:v libsvtav1 -c:a libopus {BORN_OUT}"
+        ),
+    }
+}
+
+/// El **guion** de la película (la "dirección", editable): tres actores entran
+/// caminando por un llano, se detienen en fila, se giran hacia la cámara y cada
+/// uno hace un gesto distinto (saludar / festejar / señalar). La cámara tiene dos
+/// planos con un **corte duro**: un establishing que entra durante la caminata, y
+/// un plano corto que empuja sobre el trío mientras gesticulan. Devuelve la
+/// [`Sequence`] (data) + los [`Actor`]es con su color (estado visual).
+fn screenplay(world: &World) -> (Sequence, Vec<Actor>) {
+    use std::f32::consts::{FRAC_PI_2, PI};
+
+    let span = 16.0_f32;
+    let (gx0, lanes) = find_flat_strip(world, span);
+    let gx0 = gx0 as f32;
+    let gx_start = gx0 + 3.0;
+    let gx_stop = gx0 + span - 3.0;
+    let (t_walk, t_turn, dur) = (2.6_f32, 3.0_f32, 5.6_f32);
+    let emotes = [Clip::Wave, Clip::Cheer, Clip::Point];
+
+    // Estado visual (color) + guion. Trío junto: carriles Z apretados (±2.5)
+    // alrededor del centro de la franja, para que entren los tres sin que el más
+    // cercano se coma el lente.
+    let center_z = lanes[1] as f32;
+    let offsets = [-2.5_f32, 0.0, 2.5];
+    let mut actors = Vec::with_capacity(3);
+    let mut scripts = Vec::with_capacity(3);
+    for ((&off, (skin, shirt, pants)), emote) in offsets.iter().zip(CAST).zip(emotes) {
+        let gzf = center_z + off;
+        let pos = world.ground_at(gx_start as u32, gzf as u32);
+        actors.push(Actor::new(pos, FRAC_PI_2).with_colors(skin, shirt, pants));
+        scripts.push(ActorScript::new(vec![
+            ActorKey::at(0.0, gx_start, gzf),                          // arranca a la izquierda
+            ActorKey::at(t_walk, gx_stop, gzf).facing(FRAC_PI_2),      // camina hasta la marca (mira +X)
+            ActorKey::at(t_turn, gx_stop, gzf).play(emote).facing(PI), // gira a cámara y gesticula
+            ActorKey::at(dur, gx_stop, gzf).play(emote).facing(PI),
+        ]));
+    }
+
+    // Dos focos: el plano 1 mira el punto medio de la caminata; el 2, la marca de
+    // llegada donde gesticulan. Cámara cerca (los actores grandes, sin que el
+    // relieve los oculte), a la altura del pecho.
+    let focus_walk = world.ground_at(((gx_start + gx_stop) * 0.5) as u32, lanes[1]) + Vec3::new(0.0, 1.0, 0.0);
+    let focus_emote = world.ground_at(gx_stop as u32, lanes[1]) + Vec3::new(0.0, 1.0, 0.0);
+    let cut = 2.8_f32;
+    let shot1 = CameraTrack::new(vec![
+        CamKey::look(0.0, focus_walk + Vec3::new(-3.5, 4.5, -13.0), focus_walk, 50.0),
+        CamKey::look(t_walk + 0.2, focus_walk + Vec3::new(-1.0, 3.0, -10.0), focus_walk, 46.0),
+    ]);
+    let shot2 = CameraTrack::new(vec![
+        CamKey::look(0.0, focus_emote + Vec3::new(0.4, 2.8, -11.0), focus_emote, 42.0),
+        CamKey::look(dur - cut, focus_emote + Vec3::new(1.6, 2.3, -9.0), focus_emote, 39.0),
+    ]);
+    let seq = Sequence::new(scripts, vec![Shot::new(0.0, shot1), Shot::new(cut, shot2)], dur);
+    (seq, actors)
+}
+
+/// Modo `--poses`: vuelca **un** PNG (`/tmp/actor_clips.png`) con una fila de
+/// actores, cada uno en un [`Clip`] distinto y **etiquetado** (reusa el texto del
+/// HUD), para verificar de un vistazo la librería de animación. Vista frontal:
+/// los actores miran a la cámara.
+pub fn poses_shot() {
+    let hal = pollster::block_on(Hal::new(None)).expect("hal");
+    let mut renderer = Renderer::new(&hal).expect("renderer");
+    let mut world = World::build(&hal.device, &hal.queue, DIM_XZ, SEED);
+    world.show_monument(false); // no tapar la fila con el cubo flotante
+
+    let clips = [Clip::Idle, Clip::Walk, Clip::Run, Clip::Wave, Clip::Point, Clip::Cheer];
+    let labels = ["IDLE", "WALK", "RUN", "WAVE", "POINT", "CHEER"];
+    let shirts: [[f32; 3]; 6] = [
+        [0.82, 0.28, 0.26],
+        [0.22, 0.55, 0.78],
+        [0.92, 0.80, 0.30],
+        [0.30, 0.70, 0.40],
+        [0.70, 0.40, 0.78],
+        [0.85, 0.50, 0.25],
+    ];
+    let span = 14.0_f32;
+    let (gx0, lanes) = find_flat_strip(&world, span);
+    let gz = lanes[1];
+    let n = clips.len();
+
+    let mut cast: Vec<Actor> = Vec::with_capacity(n);
+    let mut actor_r: Vec<Renderer3d> = Vec::with_capacity(n);
+    for k in 0..n {
+        let gx = gx0 as f32 + (k as f32 + 0.5) * span / n as f32;
+        let pos = world.ground_at(gx as u32, gz);
+        let mut a = Actor::new(pos, std::f32::consts::PI) // mira al -Z (a la cámara)
+            .with_colors([0.88, 0.70, 0.56], shirts[k], [0.18, 0.20, 0.28]);
+        a.set_clip(clips[k]);
+        a.advance(1.0); // una pose representativa (no la inicial neutra)
+        cast.push(a);
+        actor_r.push(Renderer3d::new(&hal.device, FMT));
+    }
+    for (a, r) in cast.iter().zip(actor_r.iter_mut()) {
+        let (v, i) = a.mesh();
+        r.set_geometry(&hal.device, &v, &i);
+        r.set_model(a.model());
+    }
+
+    // Cámara frontal centrada en la fila, cerca y a la altura del pecho.
+    let mid = world.ground_at((gx0 as f32 + span * 0.5) as u32, gz) + Vec3::new(0.0, 0.9, 0.0);
+    let mut camera = Camera3d::orbit(mid, std::f32::consts::PI, 0.16, span * 0.78);
+    camera.fovy_rad = 48_f32.to_radians();
+
+    let inter = make_target(&hal, W, H); // poses queda 1× (HUD en pixels de pantalla)
+    let inter_view = inter.create_view(&wgpu::TextureViewDescriptor::default());
+    world.tick(0.0);
+    world.animate(0.6);
+
+    renderer
+        .render_to_view(&hal, &vello::Scene::new(), &inter_view, W, H, Color::from_rgba8(0, 0, 0, 255))
+        .expect("base");
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: Some("poses") });
+    let refs: Vec<&Renderer3d> = actor_r.iter().collect();
+    world.render_with(&hal.device, &hal.queue, &mut enc, &inter_view, (W, H), &camera, &refs);
+
+    // Etiquetas: proyectar la cabeza de cada actor a pantalla y poner el nombre.
+    let vp = camera.view_proj(W as f32 / H as f32);
+    let mut quads: Vec<HudQuad> = Vec::new();
+    for (a, label) in cast.iter().zip(labels) {
+        let ndc = vp.project_point3(a.pos + Vec3::new(0.0, 2.15, 0.0));
+        let sx = (ndc.x * 0.5 + 0.5) * W as f32;
+        let sy = (1.0 - (ndc.y * 0.5 + 0.5)) * H as f32;
+        let px = 2.0;
+        let tw = HudQuad::text_width(label, px);
+        let (x, y) = (sx - tw * 0.5, sy);
+        quads.push(HudQuad { x: x - 4.0, y: y - 4.0, w: tw + 8.0, h: 7.0 * px + 8.0, color: [0.0, 0.0, 0.0, 0.5] });
+        quads.extend(HudQuad::text(label, x, y, px, [0.95, 0.97, 1.0, 0.96]));
+    }
+    let mut hud = Hud::new(&hal.device, FMT);
+    hud.render(&hal.device, &hal.queue, &mut enc, &inter_view, (W, H), &quads);
+
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    crate::write_png(&hal, &inter, W, H, "/tmp/actor_clips.png");
+    eprintln!("poses: /tmp/actor_clips.png ({n} clips)");
+}
+
+/// Modo `--vox`: prueba el **puente MagicaVoxel** punta a punta. Genera un modelo
+/// reconocible (un golem), lo **escribe** a `.vox` (`foreign_vox::write`), lo
+/// **reimporta** (`llimphi_voxel::load_grid` → bytes → `VoxModel` → `VoxelGrid`)
+/// y lo renderiza orbitando a `/tmp/vox_import.png`. Así el PNG demuestra el
+/// camino real de carga sobre bytes `.vox` codificados a spec.
+pub fn vox_shot() {
+    let hal = pollster::block_on(Hal::new(None)).expect("hal");
+    let mut renderer = Renderer::new(&hal).expect("renderer");
+
+    let model = golem_model();
+    let path = "/tmp/vox_demo.vox";
+    std::fs::write(path, foreign_vox::write(&model)).expect("escribir .vox");
+    let grid = llimphi_voxel::load_grid(path).expect("importar .vox");
+    let dim = grid.dim();
+
+    let mut vr = VoxelRenderer::new(&hal.device, &hal.queue, FMT, &grid);
+    vr.sun_dir = [0.45, 0.8, -0.4]; // sol al frente (ilumina la cara hacia cámara)
+    vr.atmosphere = Atmosphere {
+        sky_zenith: [60, 110, 190],
+        sky_horizon: [202, 216, 236],
+        fog_density: 0.0, // modelo chico: sin niebla
+        god_rays: 0.0,
+    };
+    let mut scene = Scene3d::new();
+
+    let d = dim.iter().copied().max().unwrap_or(16) as f32;
+    // Vista 3/4 frontal (yaw ~205° mira la cara con los ojos, levemente de costado).
+    let camera = Camera3d::orbit(Vec3::ZERO, 205_f32.to_radians(), 12_f32.to_radians(), d * 1.9);
+
+    let (w, h, ss) = film_dims();
+    let (ssw, ssh) = (w * ss, h * ss);
+    let inter = make_target(&hal, ssw, ssh); // ss× para SSAA
+    let inter_view = inter.create_view(&wgpu::TextureViewDescriptor::default());
+    renderer
+        .render_to_view(&hal, &vello::Scene::new(), &inter_view, ssw, ssh, Color::from_rgba8(0, 0, 0, 255))
+        .expect("base");
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: Some("vox") });
+    scene.render(&hal.device, &hal.queue, &mut enc, &inter_view, (ssw, ssh), &camera, Some(&vr), &[]);
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    crate::write_png_downsampled(&hal, &inter, ssw, ssh, ss, "/tmp/vox_import.png");
+    eprintln!(
+        "vox: {} ({} voxels) → {path} → /tmp/vox_import.png (grid {}x{}x{})",
+        "golem",
+        model.voxels.len(),
+        dim[0],
+        dim[1],
+        dim[2]
+    );
+}
+
+/// Un golem voxel de demo (espacio `.vox`, `z` arriba): piernas, torso, brazos,
+/// cabeza con ojos y una antena — pensado para leerse como un **asset diseñado**
+/// (no terreno) al importarlo.
+fn golem_model() -> VoxModel {
+    let mut m = VoxModel::new([11, 7, 17]);
+    // Paleta: cuerpo teal, cabeza gris, ojos oscuros, piernas azul, antena naranja.
+    m.palette[1] = [60, 150, 140, 255];
+    m.palette[2] = [205, 208, 214, 255];
+    m.palette[3] = [25, 28, 34, 255];
+    m.palette[4] = [40, 60, 110, 255];
+    m.palette[5] = [232, 130, 40, 255];
+
+    let v = &mut m.voxels;
+    fill_box(v, 2..4, 2..5, 0..4, 4); // pierna izq
+    fill_box(v, 7..9, 2..5, 0..4, 4); // pierna der
+    fill_box(v, 2..9, 1..6, 4..10, 1); // torso
+    fill_box(v, 0..2, 2..5, 5..10, 1); // brazo izq
+    fill_box(v, 9..11, 2..5, 5..10, 1); // brazo der
+    fill_box(v, 3..8, 1..6, 10..15, 2); // cabeza
+    v.push(Voxel { x: 4, y: 0, z: 12, i: 3 }); // ojo izq (cara y=0)
+    v.push(Voxel { x: 6, y: 0, z: 12, i: 3 }); // ojo der
+    fill_box(v, 5..6, 3..4, 15..17, 5); // antena
+    m
+}
+
+/// Apila los voxels de una caja `[xr]×[yr]×[zr]` con índice de color `i`.
+fn fill_box(
+    v: &mut Vec<Voxel>,
+    xr: std::ops::Range<u8>,
+    yr: std::ops::Range<u8>,
+    zr: std::ops::Range<u8>,
+    i: u8,
+) {
+    for z in zr.clone() {
+        for y in yr.clone() {
+            for x in xr.clone() {
+                v.push(Voxel { x, y, z, i });
+            }
+        }
+    }
+}
+
+/// Render de un cuadro: limpia la intermedia (base negra; el cielo lo pinta la
+/// atmósfera del voxel en los misses) y compone terreno + monumento + actores
+/// en el pase de [`World::render_with`].
+#[allow(clippy::too_many_arguments)]
+fn render_frame(
+    hal: &Hal,
+    renderer: &mut Renderer,
+    world: &mut World,
+    camera: &llimphi_3d::Camera3d,
+    actors: &[&Renderer3d],
+    inter_view: &wgpu::TextureView,
+    (w, h): (u32, u32),
+) {
+    renderer
+        .render_to_view(hal, &vello::Scene::new(), inter_view, w, h, Color::from_rgba8(0, 0, 0, 255))
+        .expect("base");
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: Some("film") });
+    world.render_with(&hal.device, &hal.queue, &mut enc, inter_view, (w, h), camera, actors);
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+}
+
+/// Crea la textura intermedia `w×h` (mismo descriptor que el modo `--shot`).
+fn make_target(hal: &Hal, w: u32, h: u32) -> wgpu::Texture {
+    hal.device.create_texture(&wgpu::TextureDescriptor {
+        label: Some("film-inter"),
+        size: wgpu::Extent3d { width: w, height: h, depth_or_array_layers: 1 },
+        mip_level_count: 1,
+        sample_count: 1,
+        dimension: wgpu::TextureDimension::D2,
+        format: FMT,
+        usage: wgpu::TextureUsages::STORAGE_BINDING
+            | wgpu::TextureUsages::TEXTURE_BINDING
+            | wgpu::TextureUsages::RENDER_ATTACHMENT
+            | wgpu::TextureUsages::COPY_SRC,
+        view_formats: &[],
+    })
+}
+
+/// Ruta del cuadro `f` (`frame_0000.png`, …).
+fn frame_path(dir: &str, f: u32) -> String {
+    format!("{dir}/frame_{f:04}.png")
+}
+
+/// Elige el tramo **más plano** del mundo (mínima diferencia de altura a lo largo
+/// de tres carriles Z, todos sobre el nivel del mar): así los actores caminan/
+/// gesticulan en fila sin que el relieve los hunda u ocluya. Si no hay tierra
+/// (mundo todo agua), cae a un default central.
+fn find_flat_strip(world: &World, span: f32) -> (u32, [u32; 3]) {
+    let dy = (DIM_XZ * 4 / 10).max(48) as f32;
+    let land_min = (0.30 - 0.5) * dy + 2.0;
+    let walk = span.ceil() as u32;
+    let dim = DIM_XZ;
+    let (lo, hi) = (12u32, dim.saturating_sub(12));
+    let mut best: Option<(u32, [u32; 3])> = None;
+    let mut best_spread = f32::MAX;
+    for oz in (lo..hi.saturating_sub(10)).step_by(4) {
+        let lanes = [oz, oz + 5, oz + 10];
+        for ox in (lo..hi.saturating_sub(walk)).step_by(4) {
+            let mut lo_y = f32::MAX;
+            let mut hi_y = f32::MIN;
+            let mut land = true;
+            'sample: for &gz in &lanes {
+                for s in 0..=6 {
+                    let gx = ox + walk * s / 6;
+                    let y = world.ground_at(gx, gz).y;
+                    if y < land_min {
+                        land = false;
+                        break 'sample;
+                    }
+                    lo_y = lo_y.min(y);
+                    hi_y = hi_y.max(y);
+                }
+            }
+            if land && (hi_y - lo_y) < best_spread {
+                best_spread = hi_y - lo_y;
+                best = Some((ox, lanes));
+            }
+        }
+    }
+    best.unwrap_or((dim / 3, [dim / 2 - 5, dim / 2, dim / 2 + 5]))
+}
+
+/// Asegura `dir` creado y vacío de PNGs viejos.
+fn prepare_dir(dir: &str) {
+    let _ = std::fs::create_dir_all(dir);
+    if let Ok(rd) = std::fs::read_dir(dir) {
+        for e in rd.flatten() {
+            if e.path().extension().is_some_and(|x| x == "png") {
+                let _ = std::fs::remove_file(e.path());
+            }
+        }
+    }
+}
diff --git a/llimphi-voxel-app/src/main.rs b/llimphi-voxel-app/src/main.rs
new file mode 100644
index 0000000..0d695b1
--- /dev/null
+++ b/llimphi-voxel-app/src/main.rs
@@ -0,0 +1,621 @@
+//! # llimphi-voxel-app — showcase del motor voxel 3D
+//!
+//! Un mundo voxel procedural con dos modos:
+//!
+//! - **Órbita** (default): se mira el continente desde afuera, con atmósfera
+//!   (cielo + niebla) y un **monumento-malla** flotante que gira — prueba en
+//!   vivo que voxels (ray-march) y triángulos conviven con oclusión correcta
+//!   ([`llimphi_3d::Scene3d`]).
+//! - **Explorar** (Tab): cámara en **primera persona** caminando el terreno con
+//!   **gravedad y colisión** ([`llimphi_voxel::Player`]) — el bucle canónico de
+//!   un juego voxel: caminar, mirar, romper, construir.
+//!
+//! Capas: `llimphi-voxel-app → llimphi-voxel (terreno/jugador/picking) →
+//! llimphi-3d (motor) → wgpu`. El contenido vive en [`world`]; el motor no sabe
+//! nada de juegos.
+//!
+//! ```bash
+//! cargo run -p llimphi-voxel-app --release --  --mundo  # MUNDO COMPLETO, a pie
+//! cargo run -p llimphi-voxel-app --release             # showcase (órbita+monumento)
+//! cargo run -p llimphi-voxel-app --release -- --shot   # PNG headless a /tmp
+//! ```
+//! **`--mundo`**: arranca caminando en primera persona por un mundo con TODO lo
+//! del motor junto — colinas, flora (árboles/arbustos/flores), minerales que
+//! asoman en los acantilados, un **pueblo** procedural (casas de muchos estilos +
+//! plazas) y **fauna** variada (vacas, ovejas, ciervos, zorros, caballos,
+//! gallinas, mariposas…). Todo por semilla; caminas entre ellos.
+//!
+//! - **Tab**: alterna explorar (primera persona) ↔ órbita (desde afuera).
+//! - **Arrastrar**: mira / orbita. **Rueda**: zoom (órbita).
+//! - **WASD**: caminar. **Espacio**: saltar.
+//! - **b**: romper (donde mira la cámara). **g**: construir.
+
+use std::sync::{Arc, Mutex};
+use std::time::Duration;
+
+use llimphi_3d::glam::Vec3;
+use llimphi_3d::Camera3d;
+use llimphi_ui::llimphi_hal::{wgpu, Hal};
+use llimphi_ui::llimphi_layout::taffy::prelude::{
+    percent, Position, Size, Style,
+};
+use llimphi_ui::llimphi_layout::LayoutTree;
+use llimphi_ui::llimphi_raster::peniko::Color;
+use llimphi_ui::llimphi_raster::{vello, Renderer};
+use llimphi_ui::{
+    mount, paint_gpu, App, DragPhase, Handle, Key, KeyEvent, KeyState, Modifiers, NamedKey, View,
+    WheelDelta,
+};
+use llimphi_voxel::{forward_h, look_dir, right_h};
+
+mod film;
+mod soundtrack;
+mod mapa_live;
+mod world;
+use world::{World, FMT};
+
+const DIM_XZ: u32 = 192;
+const SEED: u32 = 1337;
+/// Paso de física por frame (el `Tick` periódico corre a ~30 Hz).
+const DT: f32 = 1.0 / 30.0;
+
+#[derive(Clone, Copy, PartialEq, Eq)]
+enum Mode {
+    Orbit,
+    Explore,
+}
+
+/// Dirección de caminata pulsada (WASD).
+#[derive(Clone, Copy)]
+enum Walk {
+    Fwd,
+    Back,
+    Left,
+    Right,
+}
+
+/// Snapshot del estado de teclas de movimiento (lo lee el paso de física).
+#[derive(Clone, Copy, Default)]
+struct Input {
+    fwd: bool,
+    back: bool,
+    left: bool,
+    right: bool,
+    jump: bool,
+    down: bool,
+}
+
+#[derive(Clone)]
+enum Msg {
+    Orbit(f32, f32),
+    Zoom(f32),
+    Edit(bool),
+    ToggleMode,
+    ToggleFly,
+    Move(Walk, bool),
+    Jump(bool),
+    /// Bajar (vuelo): Shift/Ctrl mantenido.
+    Down(bool),
+    Tick,
+}
+
+struct Model {
+    /// `true` = mundo COMPLETO (pueblo + flora + minerales + fauna) y arranque en
+    /// primera persona; `false` = el showcase clásico (terreno + monumento).
+    todo: bool,
+    mode: Mode,
+    yaw: f32,
+    pitch: f32,
+    dist: f32,
+    angle: f32,
+    input: Input,
+    /// Vuelo libre (creativo): sin gravedad ni colisión, se mueve hacia donde mira.
+    /// Se alterna con Tab. En caminata (`false`), gravedad + salto.
+    flying: bool,
+    /// Mundo perezoso: se construye en la 1ª pintada GPU (ahí hay device/queue).
+    world: Arc<Mutex<Option<World>>>,
+    /// Cola de ediciones a aplicar en el próximo frame: `true` = construir,
+    /// `false` = romper. El rayo se deriva de la cámara *de ese frame*.
+    edits: Arc<Mutex<Vec<bool>>>,
+    /// Pedido de reposar al jugador sobre el terreno (al entrar a explorar).
+    respawn: Arc<Mutex<bool>>,
+}
+
+/// Construye el mundo según el modo: completo (pueblo+flora+minerales+fauna) o
+/// el showcase clásico. Perezoso: se llama en la 1ª pintada GPU.
+fn build_world(todo: bool, device: &wgpu::Device, queue: &wgpu::Queue) -> World {
+    // Mundo desde un mapa real (--mapa): ventana MÁS GRANDE que el mundo procedural
+    // (se ve más territorio, sobre todo al volar). El streaming toroidal la mantiene
+    // barata. `--lado N` la cambia (ojo con la GPU).
+    let mapa_xz = std::env::args()
+        .position(|a| a == "--lado")
+        .and_then(|p| std::env::args().nth(p + 1))
+        .and_then(|s| s.parse::<u32>().ok())
+        .unwrap_or(320);
+    let mapa_dy = (mapa_xz * 4 / 10).max(64);
+    if let Some((mapa, dim)) = mapa_live::cargar([mapa_xz, mapa_dy, mapa_xz]) {
+        return World::build_mapa(device, queue, mapa, dim);
+    }
+    if todo {
+        World::build_todo(device, queue, DIM_XZ, SEED)
+    } else {
+        World::build(device, queue, DIM_XZ, SEED)
+    }
+}
+
+/// Cámara de órbita a partir del estado del modelo.
+fn camera_of(yaw: f32, pitch: f32, dist: f32) -> Camera3d {
+    Camera3d::orbit(Vec3::new(0.0, focus_y(), 0.0), yaw, pitch, dist)
+}
+
+/// `dim` del mundo (igual que `World::build`): grilla `[0, dim]`.
+fn world_dim() -> Vec3 {
+    let dy = (DIM_XZ * 4 / 10).max(48) as f32;
+    Vec3::new(DIM_XZ as f32, dy, DIM_XZ as f32)
+}
+
+/// `y` del centro de órbita (sobre el nivel medio del mundo).
+fn focus_y() -> f32 {
+    let dy = (DIM_XZ * 4 / 10).max(48) as f32;
+    dy * 0.10
+}
+
+struct VoxelApp;
+
+impl App for VoxelApp {
+    type Model = Model;
+    type Msg = Msg;
+
+    fn title() -> &'static str {
+        "llimphi-voxel-app"
+    }
+    fn initial_size() -> (u32, u32) {
+        (1000, 720)
+    }
+
+    fn init(handle: &Handle<Msg>) -> Model {
+        handle.spawn_periodic(Duration::from_millis(33), || Msg::Tick);
+        // El mundo completo arranca ya caminando en primera persona.
+        let todo = std::env::args().any(|a| a == "--mundo" || a == "--todo" || a == "--mapa");
+        Model {
+            todo,
+            mode: if todo { Mode::Explore } else { Mode::Orbit },
+            yaw: 35_f32.to_radians(),
+            pitch: if todo { 0.0 } else { 22_f32.to_radians() },
+            dist: DIM_XZ as f32 * 1.5,
+            angle: 0.0,
+            input: Input::default(),
+            flying: false,
+            world: Arc::new(Mutex::new(None)),
+            edits: Arc::new(Mutex::new(Vec::new())),
+            respawn: Arc::new(Mutex::new(false)),
+        }
+    }
+
+    fn on_wheel(_m: &Model, delta: WheelDelta, _c: (f32, f32), _mods: Modifiers) -> Option<Msg> {
+        Some(Msg::Zoom(delta.y))
+    }
+
+    fn on_key(m: &Model, ev: &KeyEvent) -> Option<Msg> {
+        let pressed = matches!(ev.state, KeyState::Pressed);
+        match &ev.key {
+            // Tab: en exploración alterna VOLAR/caminar; en el showcase, órbita.
+            Key::Named(NamedKey::Tab) if pressed && !ev.repeat => {
+                Some(if m.mode == Mode::Explore { Msg::ToggleFly } else { Msg::ToggleMode })
+            }
+            Key::Named(NamedKey::Space) => Some(Msg::Jump(pressed)), // saltar / subir (vuelo)
+            Key::Named(NamedKey::Shift) => Some(Msg::Down(pressed)), // bajar (vuelo)
+            // Flechas = movimiento (además de WASD).
+            Key::Named(NamedKey::ArrowUp) => Some(Msg::Move(Walk::Fwd, pressed)),
+            Key::Named(NamedKey::ArrowDown) => Some(Msg::Move(Walk::Back, pressed)),
+            Key::Named(NamedKey::ArrowLeft) => Some(Msg::Move(Walk::Left, pressed)),
+            Key::Named(NamedKey::ArrowRight) => Some(Msg::Move(Walk::Right, pressed)),
+            Key::Character(c) => match c.to_ascii_lowercase().as_str() {
+                "w" => Some(Msg::Move(Walk::Fwd, pressed)),
+                "s" => Some(Msg::Move(Walk::Back, pressed)),
+                "a" => Some(Msg::Move(Walk::Left, pressed)),
+                "d" => Some(Msg::Move(Walk::Right, pressed)),
+                "b" if pressed && !ev.repeat => Some(Msg::Edit(false)), // romper
+                "g" if pressed && !ev.repeat => Some(Msg::Edit(true)),  // construir
+                _ => None,
+            },
+            _ => None,
+        }
+    }
+
+    fn update(mut model: Model, msg: Msg, _handle: &Handle<Msg>) -> Model {
+        match msg {
+            Msg::Orbit(dx, dy) => {
+                model.yaw -= dx * 0.008;
+                let lim = std::f32::consts::FRAC_PI_2 - 0.05;
+                model.pitch = (model.pitch + dy * 0.008).clamp(-lim, lim);
+            }
+            Msg::Zoom(dy) => {
+                let f = (1.0 + dy * 0.1).clamp(0.5, 1.5);
+                model.dist = (model.dist * f).clamp(DIM_XZ as f32 * 0.6, DIM_XZ as f32 * 3.0);
+            }
+            Msg::Edit(build) => model.edits.lock().unwrap().push(build),
+            Msg::ToggleMode => {
+                model.mode = match model.mode {
+                    Mode::Orbit => {
+                        *model.respawn.lock().unwrap() = true;
+                        Mode::Explore
+                    }
+                    Mode::Explore => Mode::Orbit,
+                };
+            }
+            Msg::Move(w, on) => match w {
+                Walk::Fwd => model.input.fwd = on,
+                Walk::Back => model.input.back = on,
+                Walk::Left => model.input.left = on,
+                Walk::Right => model.input.right = on,
+            },
+            Msg::Jump(on) => model.input.jump = on,
+            Msg::Down(on) => model.input.down = on,
+            Msg::ToggleFly => model.flying = !model.flying,
+            Msg::Tick => model.angle += 0.01,
+        }
+        model
+    }
+
+    fn view(model: &Model) -> View<Msg> {
+        let mode = model.mode;
+        let todo = model.todo;
+        let (yaw, pitch, dist, angle, input) =
+            (model.yaw, model.pitch, model.dist, model.angle, model.input);
+        let flying = model.flying;
+        let world = model.world.clone();
+        let edits = model.edits.clone();
+        let respawn = model.respawn.clone();
+
+        let canvas = View::new(fill_absolute())
+            .gpu_paint_with(move |device, queue, encoder, target, _rect, vp| {
+                let mut guard = world.lock().unwrap();
+                let w = guard.get_or_insert_with(|| build_world(todo, device, queue));
+
+                // Cámara del frame: en explorar, primero avanza la física.
+                let camera = match mode {
+                    Mode::Explore => {
+                        if std::mem::take(&mut *respawn.lock().unwrap()) {
+                            w.respawn_player();
+                        }
+                        // Adelante: al VOLAR sigues la mirada (3D, subes/bajás según a
+                        // dónde apuntas); al caminar, sólo el plano horizontal.
+                        let fwd = if flying { look_dir(yaw, pitch) } else { forward_h(yaw) };
+                        let mut wish = Vec3::ZERO;
+                        if input.fwd {
+                            wish += fwd;
+                        }
+                        if input.back {
+                            wish -= fwd;
+                        }
+                        if input.right {
+                            wish += right_h(yaw);
+                        }
+                        if input.left {
+                            wish -= right_h(yaw);
+                        }
+                        if flying {
+                            // Space sube, Shift baja (además del pitch de la mirada).
+                            if input.jump {
+                                wish += Vec3::Y;
+                            }
+                            if input.down {
+                                wish -= Vec3::Y;
+                            }
+                            w.fly_player(wish, DT);
+                        } else {
+                            w.step_player(wish, input.jump, DT);
+                            w.reset_mapa_fog(); // niebla base al ras del suelo
+                        }
+                        // Streaming toroidal: desliza la ventana del mapa si el jugador
+                        // se alejó del centro → mundo sin borde (no-op fuera de --mapa).
+                        w.follow_mapa(device, queue);
+                        Camera3d::fly(w.eye(), yaw, pitch)
+                    }
+                    Mode::Orbit => camera_of(yaw, pitch, dist),
+                };
+
+                // Ediciones: el rayo sale de la cámara de este frame (en órbita,
+                // desde afuera; en explorar, desde el ojo del jugador).
+                let pending = std::mem::take(&mut *edits.lock().unwrap());
+                if !pending.is_empty() {
+                    let d = w.dim();
+                    let ro = camera.eye + Vec3::new(d[0] as f32, d[1] as f32, d[2] as f32) * 0.5;
+                    let rd = (camera.target - camera.eye).normalize();
+                    for build in pending {
+                        w.apply_edit(queue, [ro.x, ro.y, ro.z], [rd.x, rd.y, rd.z], build);
+                    }
+                }
+
+                w.tick(DT); // la manada deambula
+                w.animate(angle);
+                w.render(device, queue, encoder, target, vp, &camera);
+                if mode == Mode::Explore {
+                    w.draw_hud(device, queue, encoder, target, vp);
+                }
+            })
+            .draggable(|phase, dx, dy| match phase {
+                DragPhase::Move => Some(Msg::Orbit(dx, dy)),
+                DragPhase::End => None,
+            });
+
+        View::new(root()).children(vec![canvas])
+    }
+}
+
+/// Raíz a pantalla completa que aloja el canvas 3D.
+fn root() -> Style {
+    Style {
+        size: Size {
+            width: percent(1.0_f32),
+            height: percent(1.0_f32),
+        },
+        ..Default::default()
+    }
+}
+
+/// Canvas a pantalla completa, posicionado absoluto.
+fn fill_absolute() -> Style {
+    Style {
+        position: Position::Absolute,
+        size: Size {
+            width: percent(1.0_f32),
+            height: percent(1.0_f32),
+        },
+        ..Default::default()
+    }
+}
+
+fn main() {
+    let args: Vec<String> = std::env::args().collect();
+    if args.iter().any(|a| a == "--film") {
+        film::film();
+        return;
+    }
+    if args.iter().any(|a| a == "--born") {
+        film::born();
+        return;
+    }
+    if args.iter().any(|a| a == "--poses") {
+        film::poses_shot();
+        return;
+    }
+    if args.iter().any(|a| a == "--vox") {
+        film::vox_shot();
+        return;
+    }
+    if args.iter().any(|a| a == "--shot") {
+        let todo = args.iter().any(|a| a == "--mundo" || a == "--todo");
+        shot(todo);
+        return;
+    }
+    llimphi_ui::run::<VoxelApp>();
+}
+
+/// Render headless de la escena por el compositor real (mount → paint_gpu),
+/// para verificar sin pantalla que el nodo `gpu_paint_with` de la app corre y
+/// produce el mundo. Vuelca dos PNG: la vista órbita y la primera persona.
+fn shot(todo: bool) {
+    let hal = pollster::block_on(Hal::new(None)).expect("hal");
+    let mut renderer = Renderer::new(&hal).expect("renderer");
+
+    // Mundo compartido entre las dos tomas (se construye en la 1ª).
+    let world: Arc<Mutex<Option<World>>> = Arc::new(Mutex::new(None));
+
+    // --- Toma 1: órbita (con un cráter, prueba romper desde afuera) ---
+    let cam_orbit = Camera3d::orbit(
+        Vec3::new(0.0, focus_y(), 0.0),
+        35_f32.to_radians(),
+        22_f32.to_radians(),
+        DIM_XZ as f32 * 1.5,
+    );
+    shot_one(&hal, &mut renderer, &world, cam_orbit, !todo, todo, "/tmp/voxel_app.png");
+
+    // --- Toma 2: primera persona, parado en un mirador del borde, mirando al
+    // bicho más cercano (encuadra la manada que deambula el terreno) ---
+    let cam_fps = {
+        let mut guard = world.lock().unwrap();
+        let w = guard.as_mut().expect("mundo ya construido en la toma 1");
+        // En el mundo completo, usamos el spawn abierto que ya eligió build_todo.
+        if !todo {
+            w.spawn_player_at(DIM_XZ / 5, DIM_XZ / 5);
+        }
+        // En --mapa, CAMINAMOS ~320 pasos hacia adelante para probar el streaming:
+        // la ventana debe deslizarse y mostrar terreno continuo (sin borde/void).
+        let mapa_mode = std::env::args().any(|a| a == "--mapa");
+        if mapa_mode {
+            // Caminar ~300 pasos (streaming) y luego SUBIR volando ~55 voxels: a más
+            // altura, más rápido y menos niebla → la vista lejana se abre.
+            let fwd = forward_h(0.0);
+            for _ in 0..300 {
+                w.step_player(fwd, false, DT);
+                w.follow_mapa(&hal.device, &hal.queue);
+            }
+            for _ in 0..30 {
+                w.fly_player(Vec3::Y, DT); // subir a altura moderada
+            }
+            let eye = w.eye();
+            eprintln!("vuelo: subió a ojo local y={:.0}; origen {:?}", eye.y, w.origin_debug());
+            // Mirar hacia adelante y algo abajo desde la altura → panorámica.
+            Camera3d { eye, target: eye + look_dir(0.0, -0.5), ..Camera3d::default() }
+        } else {
+            let mut eye = Vec3::ZERO;
+            for _ in 0..4 {
+                eye = w.step_player(Vec3::ZERO, false, DT);
+            }
+            let target = w.nearest_critter(eye).unwrap_or(eye + Vec3::Z);
+            Camera3d { eye, target, ..Camera3d::default() }
+        }
+    };
+    shot_one(&hal, &mut renderer, &world, cam_fps, false, todo, "/tmp/voxel_app_fps.png");
+}
+
+/// Renderiza una toma con `camera` a `path`. Si `edit`, cava un cráter por el
+/// camino real (`apply_edit`) para verificar también la mecánica de romper.
+fn shot_one(
+    hal: &Hal,
+    renderer: &mut Renderer,
+    world: &Arc<Mutex<Option<World>>>,
+    camera: Camera3d,
+    edit: bool,
+    todo: bool,
+    path: &str,
+) {
+    const W: u32 = 1000;
+    const H: u32 = 720;
+    let world = world.clone();
+    let ro = camera.eye + world_dim() * 0.5;
+    let rd = (camera.target - camera.eye).normalize();
+    let canvas: View<Msg> = View::new(fill_absolute()).gpu_paint_with(
+        move |device, queue, encoder, target, _rect, vp| {
+            let mut guard = world.lock().unwrap();
+            let w = guard.get_or_insert_with(|| build_world(todo, device, queue));
+            if edit {
+                w.apply_edit(queue, [ro.x, ro.y, ro.z], [rd.x, rd.y, rd.z], false);
+            }
+            w.animate(0.6);
+            w.render(device, queue, encoder, target, vp, &camera);
+            // La toma de primera persona (`!edit`) lleva el HUD, como en vivo.
+            if !edit {
+                w.draw_hud(device, queue, encoder, target, vp);
+            }
+        },
+    );
+    let view: View<Msg> = View::new(root()).children(vec![canvas]);
+
+    let mut layout = LayoutTree::new();
+    let mounted = mount(&mut layout, view);
+    let computed = layout.compute(mounted.root, (W as f32, H as f32)).expect("layout");
+
+    let inter = hal.device.create_texture(&wgpu::TextureDescriptor {
+        label: Some("inter"),
+        size: wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+        mip_level_count: 1,
+        sample_count: 1,
+        dimension: wgpu::TextureDimension::D2,
+        format: FMT,
+        usage: wgpu::TextureUsages::STORAGE_BINDING
+            | wgpu::TextureUsages::TEXTURE_BINDING
+            | wgpu::TextureUsages::RENDER_ATTACHMENT
+            | wgpu::TextureUsages::COPY_SRC,
+        view_formats: &[],
+    });
+    let inter_view = inter.create_view(&wgpu::TextureViewDescriptor::default());
+    renderer
+        .render_to_view(hal, &vello::Scene::new(), &inter_view, W, H, Color::from_rgba8(0, 0, 0, 255))
+        .expect("base");
+
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: Some("gpu") });
+    let any = paint_gpu(&mounted, &computed, &hal.device, &hal.queue, &mut enc, &inter_view, (W, H));
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    assert!(any, "el gpu_painter de la app no corrió");
+
+    write_png(hal, &inter, W, H, path);
+    eprintln!("voxel_app: escrito {path} ({W}x{H})");
+}
+
+fn write_png(hal: &Hal, target: &wgpu::Texture, w: u32, h: u32, path: &str) {
+    let pixels = readback_rgba(hal, target, w, h);
+    encode_png(&pixels, w, h, path);
+}
+
+/// Lee de vuelta una textura RGBA8 `w×h` a un `Vec<u8>` plano (sin padding).
+fn readback_rgba(hal: &Hal, target: &wgpu::Texture, w: u32, h: u32) -> Vec<u8> {
+    let unpadded = (w * 4) as usize;
+    let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize;
+    let padded = unpadded.div_ceil(align) * align;
+    let buf = hal.device.create_buffer(&wgpu::BufferDescriptor {
+        label: Some("readback"),
+        size: (padded * h as usize) as u64,
+        usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
+        mapped_at_creation: false,
+    });
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    enc.copy_texture_to_buffer(
+        wgpu::TexelCopyTextureInfo {
+            texture: target,
+            mip_level: 0,
+            origin: wgpu::Origin3d::ZERO,
+            aspect: wgpu::TextureAspect::All,
+        },
+        wgpu::TexelCopyBufferInfo {
+            buffer: &buf,
+            layout: wgpu::TexelCopyBufferLayout {
+                offset: 0,
+                bytes_per_row: Some(padded as u32),
+                rows_per_image: Some(h),
+            },
+        },
+        wgpu::Extent3d { width: w, height: h, depth_or_array_layers: 1 },
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let slice = buf.slice(..);
+    let (tx, rx) = std::sync::mpsc::channel();
+    slice.map_async(wgpu::MapMode::Read, move |r| {
+        let _ = tx.send(r);
+    });
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    rx.recv().unwrap().unwrap();
+    let data = slice.get_mapped_range();
+    let mut pixels = Vec::with_capacity((w * h * 4) as usize);
+    for row in 0..h as usize {
+        let s = row * padded;
+        pixels.extend_from_slice(&data[s..s + unpadded]);
+    }
+    drop(data);
+    buf.unmap();
+    pixels
+}
+
+/// Codifica RGBA8 plano `w×h` a un PNG en `path`.
+fn encode_png(pixels: &[u8], w: u32, h: u32, path: &str) {
+    use std::fs::File;
+    use std::io::BufWriter;
+    let file = File::create(path).expect("png");
+    let mut enc = png::Encoder::new(BufWriter::new(file), w, h);
+    enc.set_color(png::ColorType::Rgba);
+    enc.set_depth(png::BitDepth::Eight);
+    let mut wtr = enc.write_header().unwrap();
+    wtr.write_image_data(pixels).unwrap();
+}
+
+/// Lee una textura `src_w×src_h` y la **baja por supersampling** (promedio de
+/// bloques `factor×factor`) a `(src_w/factor)×(src_h/factor)` antes de escribir el
+/// PNG — antialias de los bordes duros del ray-march (SSAA). `factor=1` = directo.
+fn write_png_downsampled(hal: &Hal, target: &wgpu::Texture, src_w: u32, src_h: u32, factor: u32, path: &str) {
+    let src = readback_rgba(hal, target, src_w, src_h);
+    let f = factor.max(1);
+    if f == 1 {
+        encode_png(&src, src_w, src_h, path);
+        return;
+    }
+    let (dw, dh) = (src_w / f, src_h / f);
+    let mut dst = vec![0u8; (dw * dh * 4) as usize];
+    let n = (f * f) as u32;
+    for dy in 0..dh {
+        for dx in 0..dw {
+            let mut acc = [0u32; 4];
+            for sy in 0..f {
+                for sx in 0..f {
+                    let px = (dx * f + sx) as usize;
+                    let py = (dy * f + sy) as usize;
+                    let o = (py * src_w as usize + px) * 4;
+                    for c in 0..4 {
+                        acc[c] += src[o + c] as u32;
+                    }
+                }
+            }
+            let o = ((dy * dw + dx) * 4) as usize;
+            for c in 0..4 {
+                dst[o + c] = (acc[c] / n) as u8;
+            }
+        }
+    }
+    encode_png(&dst, dw, dh, path);
+}
diff --git a/llimphi-voxel-app/src/mapa_live.rs b/llimphi-voxel-app/src/mapa_live.rs
new file mode 100644
index 0000000..3d0177c
--- /dev/null
+++ b/llimphi-voxel-app/src/mapa_live.rs
@@ -0,0 +1,116 @@
+//! **En vivo desde un mapa real**: carga un GeoJSON (+ DEM opcional) y lo genera a
+//! un [`VoxelGrid`] del `dim` del mundo caminable de la app, para aterrizar y
+//! explorarlo a pie / en vuelo. Trim del cargador de `render_mapa` de
+//! `nahual-geo-voxel`, apuntado a un chunk fijo de `DIM_XZ`.
+//!
+//! `cargo run -p llimphi-voxel-app --release -- --mapa <geojson> [--dem t.tif]
+//!   [--tile z x y] [--bbox W S E N] [--mar N]`
+
+use nahual_geo_core::{parse_into, BBox, MapData, MAX_VERTICES};
+use nahual_geo_voxel::{Heightfield, MapaVoxel, Opciones};
+
+/// Lee los argumentos `--mapa …` y arma el `MapaVoxel` (mapa GRANDE, a resolución
+/// fija `--mpv`) que la ventana de streaming `dim` recorrerá. `None` sin `--mapa`.
+pub fn cargar(dim: [u32; 3]) -> Option<(MapaVoxel, [u32; 3])> {
+    let argv: Vec<String> = std::env::args().collect();
+    let mi = argv.iter().position(|a| a == "--mapa")?;
+    let geojson_path = argv.get(mi + 1).expect("--mapa necesita <geojson>");
+
+    let arg = |name: &str, n: usize| -> Option<Vec<String>> {
+        let p = argv.iter().position(|a| a == name)?;
+        Some(argv[p + 1..(p + 1 + n).min(argv.len())].to_vec())
+    };
+
+    let src = std::fs::read_to_string(geojson_path).expect("leer geojson");
+    let (md, _) = parse_into(&src, MAX_VERTICES).expect("parsear geojson");
+    let bbox = match arg("--bbox", 4) {
+        Some(n) => BBox {
+            min_lon: n[0].parse().unwrap(),
+            min_lat: n[1].parse().unwrap(),
+            max_lon: n[2].parse().unwrap(),
+            max_lat: n[3].parse().unwrap(),
+        },
+        None => bbox_de(&md),
+    };
+
+    // Resolución FIJA (metros por voxel): el mapa es más grande que la ventana, así
+    // que caminando se revela terreno nuevo (no se encaja todo el mapa en el chunk).
+    let mpv = arg("--mpv", 1).map(|v| v[0].parse().unwrap()).unwrap_or(2.0_f64).max(0.3);
+
+    let height = if let (Some(t), Some(d)) = (arg("--tile", 3), arg("--dem", 1)) {
+        let (z, x, y): (u32, u32, u32) = (t[0].parse().unwrap(), t[1].parse().unwrap(), t[2].parse().unwrap());
+        let bytes = std::fs::read(&d[0]).expect("leer dem");
+        Heightfield::desde_geotiff_en(&bytes, tile_bbox(z, x, y)).expect("geotiff (tile)")
+    } else if let Some(d) = arg("--dem", 1) {
+        let bytes = std::fs::read(&d[0]).expect("leer dem");
+        Heightfield::desde_geotiff(&bytes).expect("geotiff")
+    } else {
+        Heightfield::plano(bbox, 0.0)
+    };
+
+    // Mínimo de elevación LOCAL del chunk (no del tile entero): así una zona alta
+    // (Altamira ~900 m, el Ávila…) no se aplasta contra el techo del mundo caminable.
+    let mut ref_min = f32::INFINITY;
+    for i in 0..=24 {
+        for j in 0..=24 {
+            let lon = bbox.min_lon + (bbox.max_lon - bbox.min_lon) * i as f64 / 24.0;
+            let lat = bbox.min_lat + (bbox.max_lat - bbox.min_lat) * j as f64 / 24.0;
+            ref_min = ref_min.min(height.muestrear(lon, lat));
+        }
+    }
+    if !ref_min.is_finite() {
+        ref_min = height.min_m;
+    }
+
+    let mar = arg("--mar", 1).map(|v| v[0].parse().unwrap()).unwrap_or(ref_min - 1000.0);
+    let opts = Opciones {
+        metros_por_voxel: mpv,
+        escala_v: 1.0,
+        nivel_mar_m: mar,
+        alto_edificio_m: 12.0,
+        ref_elev_m: Some(ref_min),
+        ..Opciones::default()
+    };
+    let mapa = MapaVoxel::desde_mapdata(bbox, height, opts, &md);
+    eprintln!(
+        "en vivo: {} edificios · {} calles · {} agua · {:.1} m/voxel · mapa {}×{} vox · ventana {dim:?}",
+        mapa.edificios.len(),
+        mapa.calles.len(),
+        mapa.agua.len(),
+        mpv,
+        mapa.proj.ancho,
+        mapa.proj.largo
+    );
+    Some((mapa, dim))
+}
+
+fn bbox_de(md: &MapData) -> BBox {
+    if let Some(b) = md.bbox_override {
+        return b;
+    }
+    let mut b = BBox::empty();
+    for &c in &md.points {
+        b.expand(c);
+    }
+    for l in &md.lines {
+        for &c in l {
+            b.expand(c);
+        }
+    }
+    for p in &md.polygons {
+        for r in p {
+            for &c in r {
+                b.expand(c);
+            }
+        }
+    }
+    b
+}
+
+/// Caja lon/lat de un *slippy tile* `z/x/y`.
+fn tile_bbox(z: u32, x: u32, y: u32) -> BBox {
+    let n = (1u64 << z) as f64;
+    let lon = |xt: f64| xt / n * 360.0 - 180.0;
+    let lat = |yt: f64| (std::f64::consts::PI * (1.0 - 2.0 * yt / n)).sinh().atan().to_degrees();
+    BBox { min_lon: lon(x as f64), max_lon: lon(x as f64 + 1.0), min_lat: lat(y as f64 + 1.0), max_lat: lat(y as f64) }
+}
diff --git a/llimphi-voxel-app/src/soundtrack.rs b/llimphi-voxel-app/src/soundtrack.rs
new file mode 100644
index 0000000..3930842
--- /dev/null
+++ b/llimphi-voxel-app/src/soundtrack.rs
@@ -0,0 +1,107 @@
+//! Banda sonora de la película: compone un `Score` con `takiy-core` y lo
+//! sintetiza a un WAV con `takiy-synth`, para muxearlo al video (`--film`).
+//! Cierra el último ingrediente del "director": la peli **con sonido**.
+//!
+//! Es contenido (la "partitura"), igual que `screenplay()` es la dirección: una
+//! progresión cálida I–V–vi–IV (do–sol–lam–fa) con pads, bajo y una melodía que
+//! sube hacia el momento del gesto. El sintetizador es el de osciladores (feo a
+//! propósito), suavizado con un poco de reverb.
+
+use takiy_core::{Chord, ChordQuality, Pitch, PitchClass, ReverbParams, Score, ScoreNote, Track};
+use takiy_synth::{write_wav, Adsr, OscRenderer, Renderer, Waveform};
+
+/// Tempo de la banda (BPM). 86 → ~0.70 s/beat → 8 negras ≈ 5.6 s.
+const BPM: f32 = 86.0;
+
+/// Compone y sintetiza la banda sonora a `path` (WAV PCM 16-bit). Devuelve la
+/// duración en segundos del audio generado (para informar).
+///
+/// `accents` son los **beats del guion** (segundos): cortes de cámara y gestos de los
+/// actores (ver `Sequence::beat_times`). En cada uno se coloca un **acento** — una
+/// campana brillante (seno agudo, ataque corto) — para que la música caiga *sobre la
+/// acción* en vez de sólo compartir duración. Vacío = sin acentos (comportamiento viejo).
+pub fn render_to(path: &str, accents: &[f32]) -> f32 {
+    let mut score = Score::new(BPM); // ~0.70 s/beat → 8 beats ≈ 5.6 s
+    // Reverb suave: da aire sin tapar la mezcla.
+    score.master_reverb = Some(ReverbParams { room_size: 0.6, damping: 0.5, mix: 0.22 });
+
+    // Progresión I–V–vi–IV, dos beats por acorde.
+    let prog = [
+        (PitchClass::C, ChordQuality::Major),
+        (PitchClass::G, ChordQuality::Major),
+        (PitchClass::A, ChordQuality::Minor),
+        (PitchClass::F, ChordQuality::Major),
+    ];
+
+    // Pads: el acorde completo en octava 3, sostenido 2 beats.
+    let mut pads = Track::new("pads");
+    pads.volume = 0.5;
+    // Bajo: la fundamental en octava 2.
+    let mut bass = Track::new("bass");
+    bass.volume = 0.6;
+    for (i, &(root, quality)) in prog.iter().enumerate() {
+        let start = i as f32 * 2.0;
+        for p in Chord::new(root, quality).voicing(3) {
+            pads.add(ScoreNote::new(p, start, 2.0, 52));
+        }
+        if let Some(b) = Pitch::from_class_octave(root, 2) {
+            bass.add(ScoreNote::new(b, start, 2.0, 64));
+        }
+    }
+
+    // Melodía: una línea que se eleva hacia el beat 5 (≈ el gesto a cámara) y
+    // resuelve. Notas `(start_beat, midi, duración_beats)`.
+    let mut lead = Track::new("lead");
+    lead.volume = 0.85;
+    let melody = [
+        (0.0, 72, 1.0), // C5
+        (1.0, 76, 1.0), // E5
+        (2.0, 74, 1.0), // D5
+        (3.0, 79, 1.0), // G5
+        (4.0, 76, 1.0), // E5
+        (5.0, 81, 1.5), // A5 — el clímax
+        (6.5, 79, 0.5), // G5
+        (7.0, 77, 1.2), // F5 — resuelve
+    ];
+    for (start, midi, dur) in melody {
+        if let Some(p) = Pitch::from_midi(midi) {
+            lead.add(ScoreNote::new(p, start, dur, 78));
+        }
+    }
+
+    // Acentos: una campana aguda en cada beat del guion (corte de cámara o gesto). El
+    // tiempo en segundos se pasa a beats (la unidad del Score) dividiendo por s/beat.
+    // Una nota corta + una octava arriba refuerza el "ding". Volumen alto para que
+    // pinche sobre la mezcla cálida de abajo.
+    let sec_per_beat = 60.0 / BPM;
+    let mut hits = Track::new("acentos");
+    hits.volume = 0.9;
+    for &t in accents {
+        let beat = t / sec_per_beat;
+        // Campana = fundamental aguda (C6=84) + su octava (C7=96), bien corta.
+        for midi in [84, 96] {
+            if let Some(p) = Pitch::from_midi(midi) {
+                hits.add(ScoreNote::new(p, beat, 0.5, 90));
+            }
+        }
+    }
+
+    score.add_track(pads);
+    score.add_track(bass);
+    score.add_track(lead);
+    if !accents.is_empty() {
+        score.add_track(hits);
+    }
+
+    // Síntesis: triángulo (más cuerpo que el seno, menos áspero que la sierra)
+    // con una envolvente algo más dulce que la default.
+    let renderer = OscRenderer {
+        sample_rate: 44_100,
+        waveform: Waveform::Triangle,
+        envelope: Adsr { attack: 0.01, decay: 0.12, sustain: 0.7, release: 0.35 },
+    };
+    let buf = renderer.render(&score);
+    let secs = buf.duration_seconds();
+    write_wav(&buf, path).expect("escribir WAV de la banda sonora");
+    secs
+}
diff --git a/llimphi-voxel-app/src/world.rs b/llimphi-voxel-app/src/world.rs
new file mode 100644
index 0000000..a070de0
--- /dev/null
+++ b/llimphi-voxel-app/src/world.rs
@@ -0,0 +1,649 @@
+//! Contenido de la escena: terreno voxel + atmósfera + un "monumento" malla
+//! flotante. Aísla el *qué se muestra* del *cómo se maneja* (`main.rs`), así la
+//! app puede ganar personalidad (más estructuras, entidades, reglas) tocando
+//! sólo aquí, sin reescribir el bucle.
+
+use llimphi_3d::glam::{Mat4, Vec3};
+use llimphi_3d::{
+    Atmosphere, Camera3d, Hud, HudQuad, Renderer3d, Scene3d, VoxelGrid, VoxelRenderer,
+};
+use llimphi_ui::llimphi_hal::wgpu;
+use llimphi_voxel::{Bicho, BichoUso, CasaTipo, CasaUso, Critter, Player};
+
+/// Paleta de bichos (ovejas, marrones, terrosos, celestes…).
+const HERD_PALETTE: [[u8; 3]; 5] = [
+    [236, 236, 232],
+    [205, 170, 125],
+    [120, 92, 70],
+    [96, 132, 176],
+    [206, 198, 96],
+];
+
+/// Formato de la textura intermedia de Llimphi (target de `gpu_paint_with`).
+pub const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
+
+/// Mundo render-able + editable: el motor voxel (terreno) + una malla de
+/// triángulos (el monumento), compuestos por [`Scene3d`] en un depth
+/// compartido. Conserva el [`VoxelGrid`] para editar (romper/colocar) por
+/// raycast y subir incremental con `sync`.
+pub struct World {
+    scene: Scene3d,
+    voxel: VoxelRenderer,
+    monument: Renderer3d,
+    grid: VoxelGrid,
+    dim: [u32; 3],
+    /// Jugador en primera persona (modo "explorar"): camina el terreno con
+    /// gravedad y colisión. En modo órbita simplemente se ignora.
+    player: Player,
+    /// Bichos que deambulan el terreno (misma física que el jugador). Se
+    /// dibujan como cajas en el pase de ray-march (`VoxelRenderer::entities`).
+    critters: Vec<Critter>,
+    /// Overlay screen-space para la mira de primera persona.
+    hud: Hud,
+    /// Si dibujar el monumento-malla flotante (se apaga p.ej. en `--poses`).
+    show_monument: bool,
+    /// **Mapa real** para streaming infinito (modo `--mapa`): si está, la ventana se
+    /// regenera de aquí al caminar, sin borde. `None` en los mundos procedurales.
+    mapa: Option<std::sync::Arc<nahual_geo_voxel::MapaVoxel>>,
+    /// Columna de mundo `[wx, wz]` donde cae la esquina local `(0,0)` de la ventana.
+    origin: [i32; 2],
+    /// Origen de mundo INICIAL de la ventana (al construir). El origen de streaming
+    /// que consume `scroll_to` (que arranca en `[0,0,0]` como el `brick_origin` del
+    /// renderer) es `origin - origin0` → así el ring buffer sube sólo la franja nueva.
+    origin0: [i32; 2],
+}
+
+impl World {
+    /// Paso de reubicación de la ventana de streaming (voxels): se regenera sólo al
+    /// cruzar un múltiplo de esto → no se rehace el mundo cada voxel caminado.
+    const STREAM_STEP: i32 = 16;
+
+    /// **Mundo desde un mapa real, STREAMEADO** (modo `--mapa`): la ventana de `dim`
+    /// se desliza sobre un `MapaVoxel` grande a medida que el jugador camina, así el
+    /// mundo **no tiene borde** (Minecraft-style: se explora sin agotarlo; más allá
+    /// del mapa, el relieve del borde/mar se extiende). Reusa física/cámara/HUD.
+    pub fn build_mapa(
+        device: &wgpu::Device,
+        queue: &wgpu::Queue,
+        mapa: nahual_geo_voxel::MapaVoxel,
+        dim: [u32; 3],
+    ) -> Self {
+        // Ventana inicial centrada en el centro del mapa.
+        let origin = [
+            mapa.proj.ancho as i32 / 2 - dim[0] as i32 / 2,
+            mapa.proj.largo as i32 / 2 - dim[2] as i32 / 2,
+        ];
+        let grid = mapa.generar_ventana(dim, origin);
+        let mut voxel = VoxelRenderer::new(device, queue, FMT, &grid);
+        voxel.sun_dir = [0.5, 0.55, 0.42];
+        voxel.atmosphere = Atmosphere {
+            sky_zenith: [72, 124, 198],
+            sky_horizon: [206, 220, 236],
+            // Niebla moderada que difumina el borde lejano de la ventana.
+            fog_density: 1.1 / dim[0] as f32,
+            god_rays: 0.4,
+        };
+        let monument = Renderer3d::new(device, FMT);
+        // Reposar en una CALLE (columna baja), no en un techo.
+        let (cx, cz) = (dim[0] / 2, dim[2] / 2);
+        let (mut sx, mut sz, mut best) = (cx, cz, u32::MAX);
+        let r = (dim[0] / 4).max(8);
+        for z in cz.saturating_sub(r)..(cz + r).min(dim[2] - 1) {
+            for x in cx.saturating_sub(r)..(cx + r).min(dim[0] - 1) {
+                if let Some(h) = grid.height_at(x, z) {
+                    if h < best {
+                        best = h;
+                        sx = x;
+                        sz = z;
+                    }
+                }
+            }
+        }
+        let player = Player::spawn_on(&grid, sx, sz);
+        let hud = Hud::new(device, FMT);
+        let mut world = Self {
+            scene: Scene3d::new(),
+            voxel,
+            monument,
+            grid,
+            dim,
+            player,
+            critters: Vec::new(),
+            hud,
+            show_monument: false,
+            mapa: Some(std::sync::Arc::new(mapa)),
+            origin,
+            origin0: origin,
+        };
+        for _ in 0..40 {
+            world.tick(1.0 / 30.0);
+        }
+        world
+    }
+
+    /// **Streaming toroidal**: si el jugador se alejó del centro más de un
+    /// [`STREAM_STEP`] (múltiplo de brick), desliza la ventana regenerando el terreno
+    /// del `MapaVoxel` en el origen nuevo y **sube sólo la franja que entra** vía
+    /// [`VoxelRenderer::scroll_to`] (ring buffer, sin re-subir la ventana entera → sin
+    /// tirón). Traslada al jugador el mismo delta → queda quieto en el mundo mientras
+    /// el terreno se re-centra bajo él. Sin borde. No-op fuera de `--mapa`.
+    pub fn follow_mapa(&mut self, device: &wgpu::Device, queue: &wgpu::Queue) {
+        let Some(mapa) = self.mapa.clone() else { return };
+        let step = Self::STREAM_STEP;
+        let cx = self.dim[0] as i32 / 2;
+        let cz = self.dim[2] as i32 / 2;
+        let ddx = ((self.player.pos.x.floor() as i32 - cx) / step) * step;
+        let ddz = ((self.player.pos.z.floor() as i32 - cz) / step) * step;
+        if ddx == 0 && ddz == 0 {
+            return;
+        }
+        self.origin[0] += ddx;
+        self.origin[1] += ddz;
+        self.grid = mapa.generar_ventana(self.dim, self.origin);
+        // Origen de streaming del renderer = delta acumulado desde el arranque
+        // (su `brick_origin` empezó en 0). Sube sólo la franja nueva.
+        let stream = [self.origin[0] - self.origin0[0], 0, self.origin[1] - self.origin0[1]];
+        self.voxel.scroll_to(device, queue, stream, &self.grid);
+        // El jugador retrocede el mismo delta → posición de mundo intacta.
+        self.player.pos.x -= ddx as f32;
+        self.player.pos.z -= ddz as f32;
+    }
+
+    /// Construye el mundo: terreno procedural (de `llimphi-voxel`) subido al
+    /// brick pool, atmósfera diurna, y un cubo-malla coloreado como monumento.
+    /// Necesita `device`/`queue` (de ahí que se construya perezoso, en la 1ª
+    /// pintada GPU).
+    pub fn build(device: &wgpu::Device, queue: &wgpu::Queue, dim_xz: u32, seed: u32) -> Self {
+        let dy = (dim_xz * 4 / 10).max(48);
+        let dim = [dim_xz, dy, dim_xz];
+
+        let grid = llimphi_voxel::terrain(dim, seed);
+        let mut voxel = VoxelRenderer::new(device, queue, FMT, &grid);
+        voxel.sun_dir = [0.55, 0.5, 0.32];
+        voxel.atmosphere = Atmosphere {
+            sky_zenith: [64, 118, 196],
+            sky_horizon: [202, 218, 236],
+            fog_density: 0.5 / dim_xz as f32,
+            god_rays: 0.6,
+        };
+
+        let monument = Renderer3d::new(device, FMT);
+
+        // Jugador posado sobre la columna central del terreno.
+        let player = Player::spawn_on(&grid, dim[0] / 2, dim[2] / 2);
+
+        // Manada esparcida por el interior, en una grilla con jitter
+        // determinista (cada bicho su semilla → rumbos distintos).
+        let margin = 16u32;
+        let (cols, rows) = (7u32, 5u32);
+        let mut critters = Vec::with_capacity((cols * rows) as usize);
+        let mut k: u32 = 0x9e3779b9;
+        let span_x = dim[0].saturating_sub(2 * margin).max(1);
+        let span_z = dim[2].saturating_sub(2 * margin).max(1);
+        for r in 0..rows {
+            for c in 0..cols {
+                // Jitter LCG por celda para que no quede una grilla perfecta.
+                k = k.wrapping_mul(1664525).wrapping_add(1013904223);
+                let jx = (k >> 16) % 9;
+                k = k.wrapping_mul(1664525).wrapping_add(1013904223);
+                let jz = (k >> 16) % 9;
+                let x = margin + span_x * c / (cols - 1) + jx;
+                let z = margin + span_z * r / (rows - 1) + jz;
+                let color = HERD_PALETTE[(r * cols + c) as usize % HERD_PALETTE.len()];
+                critters.push(Critter::spawn_on(&grid, x.min(dim[0] - 1), z.min(dim[2] - 1), color, k));
+            }
+        }
+
+        let hud = Hud::new(device, FMT);
+
+        let mut world = Self {
+            scene: Scene3d::new(),
+            voxel,
+            monument,
+            grid,
+            dim,
+            player,
+            critters,
+            hud,
+            show_monument: true,
+            mapa: None,
+            origin: [0, 0],
+            origin0: [0, 0],
+        };
+        // Calentar la manada para que arranque desparramada (no en grilla).
+        for _ in 0..150 {
+            world.tick(1.0 / 30.0);
+        }
+        world
+    }
+
+    /// Construye el **mundo completo**: TODO lo que se puede crear con el motor,
+    /// junto, para caminarlo — terreno con colinas, **flora** (árboles, arbustos,
+    /// flores, pasto), **minerales** que asoman en los acantilados, un **pueblo
+    /// procedural** (casas de varios estilos + plazas con fuente/bancos/árboles) y
+    /// **fauna** variada (vacas, ovejas, ciervos, zorros, caballos, gallinas,
+    /// mariposas…), todo esparcido por la misma semilla. Sin monumento ni manada
+    /// analítica: la vida está horneada en el propio terreno.
+    pub fn build_todo(device: &wgpu::Device, queue: &wgpu::Queue, dim_xz: u32, seed: u32) -> Self {
+        let dy = (dim_xz * 4 / 10).max(48);
+        let dim = [dim_xz, dy, dim_xz];
+
+        // Partimos de la pradera del proyecto de arranque (ya trae flora +
+        // minerales + fauna) y le sumamos un pueblo procedural encima.
+        let project = llimphi_voxel::Project::starter();
+        let mut bioma = project
+            .biomas
+            .iter()
+            .find(|b| b.name == "pradera")
+            .cloned()
+            .expect("bioma pradera");
+        // Colinas suaves: hay acantilados donde asoman los minerales, pero se
+        // camina cómodo y las casas encuentran dónde asentarse.
+        bioma.relief = 0.4;
+        bioma.mountains = 0.3;
+        bioma.water_level = 0.0;
+        bioma.rivers = 0.0;
+        // Un pueblo mezclado, en manchas conectadas por rutas (campo abierto en
+        // medio) → se nace en pradera y se camina hacia el pueblo.
+        bioma.densidad_urbana = 0.42;
+        bioma.casas = vec![
+            CasaUso { tipo: CasaTipo::Cabana, densidad: 0.3 },
+            CasaUso { tipo: CasaTipo::Moderna, densidad: 0.22 },
+            CasaUso { tipo: CasaTipo::Granja, densidad: 0.2 },
+            CasaUso { tipo: CasaTipo::Adobe, densidad: 0.2 },
+            CasaUso { tipo: CasaTipo::Tienda, densidad: 0.15 },
+            CasaUso { tipo: CasaTipo::Torre, densidad: 0.1 },
+            CasaUso { tipo: CasaTipo::Flintstone, densidad: 0.12 },
+            CasaUso { tipo: CasaTipo::Hobbit, densidad: 0.12 },
+            CasaUso { tipo: CasaTipo::Duplex, densidad: 0.15 },
+        ];
+        // Fauna variada (además de la que ya trae la pradera).
+        bioma.fauna.extend_from_slice(&[
+            BichoUso { bicho: Bicho::Ciervo, densidad: 0.22 },
+            BichoUso { bicho: Bicho::Zorro, densidad: 0.16 },
+            BichoUso { bicho: Bicho::Caballo, densidad: 0.16 },
+            BichoUso { bicho: Bicho::Gallina, densidad: 0.2 },
+            BichoUso { bicho: Bicho::Pato, densidad: 0.16 },
+            BichoUso { bicho: Bicho::Cabra, densidad: 0.16 },
+            BichoUso { bicho: Bicho::Cerdo, densidad: 0.14 },
+            BichoUso { bicho: Bicho::Pajaro, densidad: 0.2 },
+        ]);
+
+        let palette = project.bioma_palette(&bioma);
+        let grid = bioma.generate_window(seed, &palette, dim, [0, 0]);
+        let mut voxel = VoxelRenderer::new(device, queue, FMT, &grid);
+        voxel.sun_dir = [0.5, 0.52, 0.42];
+        voxel.atmosphere = Atmosphere {
+            sky_zenith: [72, 124, 198],
+            sky_horizon: [206, 220, 236],
+            fog_density: 0.45 / dim_xz as f32,
+            god_rays: 0.5,
+        };
+
+        let monument = Renderer3d::new(device, FMT);
+        // Buscamos una columna ABIERTA (fuera de mancha de pueblo) cerca del centro
+        // para nacer en el campo, no dentro de una casa. Espiral de búsqueda.
+        let (mut sx, mut sz) = (dim[0] / 2, dim[2] / 2);
+        'find: for r in 0..(dim[0] / 2) {
+            for &(dx, dz) in &[(r, 0i32), (0, r as i32), (r, r as i32), (r, -(r as i32))] {
+                let x = ((dim[0] / 2) as i32 + dx as i32).clamp(2, dim[0] as i32 - 3) as u32;
+                let z = ((dim[2] / 2) as i32 + dz).clamp(2, dim[2] as i32 - 3) as u32;
+                if !bioma.in_town(seed, x as i32, z as i32, dim) {
+                    sx = x;
+                    sz = z;
+                    break 'find;
+                }
+            }
+        }
+        let player = Player::spawn_on(&grid, sx, sz);
+        let hud = Hud::new(device, FMT);
+
+        // Además de la fauna horneada en el terreno, un puñado de bichos que
+        // DEAMBULAN (misma física que el jugador) para que el mundo tenga
+        // movimiento — se dibujan como cajas en el pase de ray-march.
+        let mut critters = Vec::new();
+        let mut k: u32 = 0x1234_5678 ^ seed;
+        for i in 0..14u32 {
+            k = k.wrapping_mul(1664525).wrapping_add(1013904223);
+            let x = 20 + (k >> 8) % dim[0].saturating_sub(40).max(1);
+            k = k.wrapping_mul(1664525).wrapping_add(1013904223);
+            let z = 20 + (k >> 8) % dim[2].saturating_sub(40).max(1);
+            let color = HERD_PALETTE[i as usize % HERD_PALETTE.len()];
+            critters.push(Critter::spawn_on(&grid, x.min(dim[0] - 1), z.min(dim[2] - 1), color, k));
+        }
+
+        let mut world = Self {
+            scene: Scene3d::new(),
+            voxel,
+            monument,
+            grid,
+            dim,
+            player,
+            critters,
+            hud,
+            show_monument: false,
+            mapa: None,
+            origin: [0, 0],
+            origin0: [0, 0],
+        };
+        for _ in 0..120 {
+            world.tick(1.0 / 30.0);
+        }
+        world
+    }
+
+    /// Construye un mundo de **desierto** (vía [`WorldRecipe::desert`](llimphi_voxel::WorldRecipe)):
+    /// llano de arena con pocas montañas/ríos y cactus ralos, sin manada (escena
+    /// solemne del corto de nacimiento) y sin el monumento. Atmósfera diurna cálida.
+    /// Pensado para el modo `--born`.
+    pub fn build_desert(device: &wgpu::Device, queue: &wgpu::Queue, dim_xz: u32, seed: u32) -> Self {
+        let dy = (dim_xz * 4 / 10).max(48);
+        let dim = [dim_xz, dy, dim_xz];
+
+        // Desierto **llano** (como lo pidió el corto): sin mesas/relieve ni ríos,
+        // sólo una ondulación de dunas mínima. Así el huevo siempre tiene despeje y
+        // el plano de seguimiento (que retrocede detrás del sujeto) ve arena abierta
+        // en vez de meterse dentro de una columna de terreno.
+        // El bioma de desierto del proyecto de arranque, resuelto a su paleta y
+        // aplanado (sin mesas/relieve ni ríos) — la semilla del CLI manda.
+        let project = llimphi_voxel::Project::starter();
+        let mut bioma = project
+            .biomas
+            .iter()
+            .find(|b| b.name == "desierto")
+            .cloned()
+            .expect("bioma desierto");
+        bioma.mountains = 0.0;
+        bioma.relief = 0.0;
+        bioma.dune = 0.035;
+        bioma.rivers = 0.0;
+        let palette = project.bioma_palette(&bioma);
+        let grid = bioma.generate_window(seed, &palette, dim, [0, 0]);
+        let mut voxel = VoxelRenderer::new(device, queue, FMT, &grid);
+        voxel.sun_dir = [0.5, 0.62, 0.30]; // sol alto y cálido
+        voxel.atmosphere = Atmosphere {
+            sky_zenith: [108, 152, 206],  // azul de mediodía
+            sky_horizon: [226, 212, 178], // horizonte arenoso/caluroso
+            fog_density: 0.18 / dim_xz as f32, // baja: hay tomas aéreas (cámara lejos)
+            god_rays: 0.5,
+        };
+
+        let monument = Renderer3d::new(device, FMT);
+        let player = Player::spawn_on(&grid, dim[0] / 2, dim[2] / 2);
+        let hud = Hud::new(device, FMT);
+
+        Self {
+            scene: Scene3d::new(),
+            voxel,
+            monument,
+            grid,
+            dim,
+            player,
+            critters: Vec::new(), // desierto vacío
+            hud,
+            show_monument: false,
+            mapa: None,
+            origin: [0, 0],
+            origin0: [0, 0],
+        }
+    }
+
+    /// Avanza un frame de vida: deambula la manada y vuelca sus cajas al
+    /// renderer (la capa de entidades del ray-march). Barato (instancing
+    /// analítico) — llamar cada frame, en cualquier modo.
+    pub fn tick(&mut self, dt: f32) {
+        for c in &mut self.critters {
+            c.step(&self.grid, dt);
+        }
+        self.voxel.entities.clear();
+        self.voxel.entities.extend(self.critters.iter().map(|c| c.entity()));
+    }
+
+    /// Avanza la física del jugador `dt` segundos con la caminata deseada
+    /// (`wish`, horizontal, espacio de grilla) y `jump`. Devuelve el ojo del
+    /// jugador en **mundo** (centrado en el origen, listo para la cámara).
+    pub fn step_player(&mut self, wish: Vec3, jump: bool, dt: f32) -> Vec3 {
+        self.player.step(&self.grid, wish, jump, dt);
+        self.player.eye() - self.world_center()
+    }
+
+    /// Ojo del jugador en coords centradas (para la cámara), sin avanzar la física.
+    /// Se usa tras [`follow_mapa`](Self::follow_mapa), que puede reubicar al jugador.
+    pub fn eye(&self) -> Vec3 {
+        self.player.eye() - self.world_center()
+    }
+
+    /// Niebla base del mapa (la que difumina el borde de la ventana a ras de suelo).
+    fn fog_base(&self) -> f32 {
+        1.1 / self.dim[0] as f32
+    }
+
+    /// Altura del jugador SOBRE el terreno de su columna (voxels), `0` si está al ras.
+    fn altitud(&self) -> f32 {
+        let px = (self.player.pos.x.max(0.0) as u32).min(self.dim[0] - 1);
+        let pz = (self.player.pos.z.max(0.0) as u32).min(self.dim[2] - 1);
+        let suelo = self.grid.height_at(px, pz).unwrap_or(0) as f32;
+        (self.player.pos.y - suelo).max(0.0)
+    }
+
+    /// **Vuelo libre** (creativo): mueve al jugador en `wish` (con vertical), sin
+    /// gravedad ni colisión. La velocidad **escala con la altitud** (más alto → más
+    /// rápido, para cubrir territorio) y la **niebla se abre** con la altura (más
+    /// alto → ves más lejos, hasta el borde de la ventana). Devuelve el ojo centrado.
+    pub fn fly_player(&mut self, wish: Vec3, dt: f32) -> Vec3 {
+        let alt = self.altitud();
+        let boost = (1.0 + alt / 14.0).min(16.0);
+        self.player.volar_veloz(wish, dt, boost);
+        // Niebla que se disipa al subir → vista lejana.
+        self.voxel.atmosphere.fog_density = self.fog_base() / (1.0 + alt / 30.0);
+        self.player.eye() - self.world_center()
+    }
+
+    /// Restaura la niebla base (al volver a caminar tras haber volado alto).
+    pub fn reset_mapa_fog(&mut self) {
+        if self.mapa.is_some() {
+            self.voxel.atmosphere.fog_density = self.fog_base();
+        }
+    }
+
+    /// Dimensión `[dx, dy, dz]` de la ventana actual.
+    pub fn dim(&self) -> [u32; 3] {
+        self.dim
+    }
+
+    /// Origen de la ventana de streaming (columna de mundo de la esquina). Debug.
+    pub fn origin_debug(&self) -> [i32; 2] {
+        self.origin
+    }
+
+    /// Reposa al jugador sobre la columna central (al entrar a modo explorar,
+    /// por si el terreno cambió por ediciones).
+    pub fn respawn_player(&mut self) {
+        self.player = Player::spawn_on(&self.grid, self.dim[0] / 2, self.dim[2] / 2);
+    }
+
+    /// Reposa al jugador sobre una columna concreta `(x, z)` (clamp al grid).
+    /// Útil para encuadrar una vista en primera persona desde un mirador.
+    pub fn spawn_player_at(&mut self, x: u32, z: u32) {
+        let x = x.min(self.dim[0] - 1);
+        let z = z.min(self.dim[2] - 1);
+        self.player = Player::spawn_on(&self.grid, x, z);
+    }
+
+    /// Centro (en **mundo**) del bicho más cercano a `eye_world`, o `None` si no
+    /// hay manada. Para encuadrar un bicho en una toma de primera persona.
+    pub fn nearest_critter(&self, eye_world: Vec3) -> Option<Vec3> {
+        let center = self.world_center();
+        self.critters
+            .iter()
+            .map(|c| {
+                let e = c.entity();
+                Vec3::new(e.pos[0], e.pos[1], e.pos[2]) - center
+            })
+            .min_by(|a, b| {
+                a.distance_squared(eye_world)
+                    .total_cmp(&b.distance_squared(eye_world))
+            })
+    }
+
+    /// Medio-`dim`: el offset entre espacio de grilla (`[0,dim]`) y mundo
+    /// (centrado en el origen). `mundo = grilla - centro`.
+    fn world_center(&self) -> Vec3 {
+        Vec3::new(self.dim[0] as f32, self.dim[1] as f32, self.dim[2] as f32) * 0.5
+    }
+
+    /// Edita el mundo por **raycast** desde un origen/dirección (espacio de
+    /// grilla = `eye_mundo + dim/2`): `build=false` cava un cráter en el voxel
+    /// golpeado; `build=true` deposita un bloque en la celda vacía adyacente.
+    /// Sube sólo lo tocado (`sync` incremental). Devuelve `true` si pegó algo.
+    /// Se llama desde el hilo GPU (necesita `queue`).
+    pub fn apply_edit(&mut self, queue: &wgpu::Queue, origin: [f32; 3], dir: [f32; 3], build: bool) -> bool {
+        let max = self.dim[0] as f32 * 3.0;
+        let Some(hit) = llimphi_voxel::raycast(&self.grid, origin, dir, max) else {
+            return false;
+        };
+        if build {
+            let [px, py, pz] = hit.place;
+            let r = 1i32;
+            for dz in -r..=r {
+                for dy in -r..=r {
+                    for dx in -r..=r {
+                        let (x, y, z) = (px + dx, py + dy, pz + dz);
+                        if x >= 0 && y >= 0 && z >= 0 {
+                            self.grid.set(x as u32, y as u32, z as u32, [222, 184, 96]);
+                        }
+                    }
+                }
+            }
+        } else {
+            let [cx, cy, cz] = hit.cell;
+            let r = 4i32;
+            for dz in -r..=r {
+                for dy in -r..=r {
+                    for dx in -r..=r {
+                        if dx * dx + dy * dy + dz * dz <= r * r {
+                            let (x, y, z) = (cx + dx, cy + dy, cz + dz);
+                            if x >= 0 && y >= 0 && z >= 0 {
+                                self.grid.clear(x as u32, y as u32, z as u32);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        self.voxel.sync(queue, &mut self.grid);
+        true
+    }
+
+    /// Posiciona el monumento: flota sobre el centro del mundo y gira con
+    /// `angle` (rad). El mundo voxel ocupa `y ∈ [-dy/2, dy/2]`; lo dejamos a
+    /// ~`0.45·dy` para que asome entre los picos (y se ocluya con ellos — prueba
+    /// la convivencia voxel+malla en vivo).
+    pub fn animate(&mut self, angle: f32) {
+        let dy = self.dim[1] as f32;
+        let size = self.dim[0] as f32 * 0.11;
+        let y = dy * 0.45;
+        let m = Mat4::from_translation(Vec3::new(0.0, y, 0.0))
+            * Mat4::from_rotation_y(angle)
+            * Mat4::from_scale(Vec3::splat(size));
+        self.monument.set_model(m);
+    }
+
+    /// Compone terreno + monumento sobre `target` (depth compartido). Firma
+    /// compatible con la closure de `gpu_paint_with` (más la cámara).
+    pub fn render(
+        &mut self,
+        device: &wgpu::Device,
+        queue: &wgpu::Queue,
+        encoder: &mut wgpu::CommandEncoder,
+        target: &wgpu::TextureView,
+        viewport: (u32, u32),
+        camera: &Camera3d,
+    ) {
+        self.render_with(device, queue, encoder, target, viewport, camera, &[]);
+    }
+
+    /// Como [`render`](Self::render) pero agrega **mallas extra** al pase (mismo
+    /// depth compartido → se ocluyen con el terreno y el monumento). Es el gancho
+    /// para los **actores** de una escena filmada: la app posa cada actor en su
+    /// propio [`Renderer3d`](llimphi_3d::Renderer3d) y los pasa aquí.
+    #[allow(clippy::too_many_arguments)]
+    pub fn render_with(
+        &mut self,
+        device: &wgpu::Device,
+        queue: &wgpu::Queue,
+        encoder: &mut wgpu::CommandEncoder,
+        target: &wgpu::TextureView,
+        viewport: (u32, u32),
+        camera: &Camera3d,
+        extra: &[&Renderer3d],
+    ) {
+        let mut meshes: Vec<&Renderer3d> = Vec::with_capacity(1 + extra.len());
+        if self.show_monument {
+            meshes.push(&self.monument);
+        }
+        meshes.extend_from_slice(extra);
+        self.scene.render(
+            device,
+            queue,
+            encoder,
+            target,
+            viewport,
+            camera,
+            Some(&self.voxel),
+            &meshes,
+        );
+    }
+
+    /// Enciende/apaga el dibujo del monumento-malla flotante (se apaga en
+    /// `--poses` para no tapar la fila de actores).
+    pub fn show_monument(&mut self, v: bool) {
+        self.show_monument = v;
+    }
+
+    /// Posición en **mundo** (centrado en el origen) del **suelo** sobre la
+    /// columna de grilla `(gx, gz)`: pies un voxel por encima del terreno (o del
+    /// piso `y=0` si la columna está vacía). Para posar un actor sobre el relieve.
+    pub fn ground_at(&self, gx: u32, gz: u32) -> Vec3 {
+        let gx = gx.min(self.dim[0] - 1);
+        let gz = gz.min(self.dim[2] - 1);
+        let top = self.grid.height_at(gx, gz).map(|y| y as f32 + 1.0).unwrap_or(0.0);
+        Vec3::new(gx as f32 + 0.5, top, gz as f32 + 0.5) - self.world_center()
+    }
+
+    /// Pinta el HUD de primera persona encima de la escena (pase screen-space):
+    /// la **mira** centrada + un panel con el **modo** y las **coordenadas** del
+    /// jugador (lectura del propio `Player`, espacio de grilla). Llamar *después*
+    /// de [`render`](Self::render), en modo explorar.
+    pub fn draw_hud(
+        &mut self,
+        device: &wgpu::Device,
+        queue: &wgpu::Queue,
+        encoder: &mut wgpu::CommandEncoder,
+        target: &wgpu::TextureView,
+        viewport: (u32, u32),
+    ) {
+        let mut quads = HudQuad::crosshair(viewport, 9.0, 2.0, [1.0, 1.0, 1.0, 0.85]).to_vec();
+
+        // Texto: modo + coordenadas. La grilla es entera, redondeamos a voxel.
+        let p = self.player.pos;
+        let coords = format!("X {} Y {} Z {}", p.x as i32, p.y as i32, p.z as i32);
+        let px = 2.0; // pixel de glifo (10×14 por carácter)
+        let (tx, ty) = (16.0, 14.0);
+        let lh = 7.0 * px + 6.0; // alto de línea (glifo + interlínea)
+
+        // Panel de fondo translúcido para legibilidad sobre cualquier terreno.
+        let pw = HudQuad::text_width(&coords, px).max(HudQuad::text_width("EXPLORAR", px));
+        quads.push(HudQuad {
+            x: tx - 8.0,
+            y: ty - 8.0,
+            w: pw + 16.0,
+            h: lh * 2.0 + 8.0,
+            color: [0.0, 0.0, 0.0, 0.45],
+        });
+        quads.extend(HudQuad::text("EXPLORAR", tx, ty, px, [0.62, 0.95, 0.78, 0.95]));
+        quads.extend(HudQuad::text(&coords, tx, ty + lh, px, [0.95, 0.97, 1.0, 0.95]));
+
+        self.hud.render(device, queue, encoder, target, viewport, &quads);
+    }
+}
diff --git a/llimphi-voxel-studio/Cargo.toml b/llimphi-voxel-studio/Cargo.toml
new file mode 100644
index 0000000..c1360f8
--- /dev/null
+++ b/llimphi-voxel-studio/Cargo.toml
@@ -0,0 +1,74 @@
+[package]
+name = "llimphi-voxel-studio"
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+authors.workspace = true
+publish.workspace = true
+description = "Studio del creador de mundos voxel: una interfaz Llimphi para crear/editar los artefactos de llimphi-voxel (WorldRecipe, personajes, escenas) con preview 3D en vivo, persistencia RON y (próximamente) asistencia por IA. Frontend intercambiable sobre el Project agnóstico de llimphi-voxel."
+
+[[bin]]
+name = "llimphi-voxel-studio"
+path = "src/main.rs"
+
+[dependencies]
+# Motor 3D general (escena, cámara, voxel) — para el preview en vivo.
+llimphi-3d = { path = "../llimphi-3d", version = "0.1.0" }
+# Artefactos + modelo-documento (Project, WorldRecipe, …) — el core agnóstico.
+llimphi-voxel = { path = "../llimphi-voxel", version = "0.1.0" }
+# Puente mapa real → voxel: "Mundo desde mapa" (GeoJSON/DEM → VoxelGrid).
+nahual-geo-voxel = { workspace = true }
+# Parseo GeoJSON + modelo (MapData/BBox) para el import de mapa.
+nahual-geo-core = { workspace = true }
+# Bucle Elm + ventana + re-exports (hal/raster/layout).
+llimphi-ui = { workspace = true }
+# Paletas semánticas de color.
+llimphi-theme = { workspace = true }
+# Widgets de la UI del editor.
+llimphi-widget-slider = { workspace = true }
+llimphi-widget-button = { workspace = true }
+llimphi-widget-text-input = { workspace = true }
+# Portapapeles del sistema para copiar/cortar/pegar en los campos.
+llimphi-clipboard = { workspace = true }
+# Sidebar unificado (rail de dientes + panel + cabezal + buscador + control): el
+# widget que es dueño de los dos sidebars del studio (niveles y herramientas).
+llimphi-widget-rag-sidebar = { workspace = true }
+# Grafo de nodos: la segunda superficie de autoría de las Leyes por ecuación.
+llimphi-widget-nodegraph = { workspace = true }
+# Íconos vectoriales (coloridos) para los dientes de cada nivel/herramienta.
+llimphi-icons = { path = "../llimphi-icons", version = "0.1.0" }
+# Construcción de peniko::Image desde RGBA8 para el heatmap del laboratorio de leyes.
+llimphi-image = { path = "../llimphi-image", version = "0.1.0" }
+# Config global del SO: decide la orientación de los dientes (dientes_outside).
+wawa-config = { path = "../../../shared/wawa-config" }
+# Asistencia IA "poor": prosa → WorldRecipe (from_env, cae a Mock/heurística).
+pluma-llm = { path = "../../../00_unanchay/pluma/pluma-llm" }
+# Runtime para bloquear la vuelta async del LLM dentro del worker (Handle::spawn).
+tokio = { workspace = true }
+# Muxeo de la escena exportada (secuencia de PNG → .mkv) vía ffmpeg.
+foreign-av = { path = "../../../shared/foreign-av" }
+# Banda sonora del export: componer a la medida de la escena (takiy-genesis, brief
+# generativo) sobre el modelo nativo (takiy-core) + sintetizar a WAV (takiy-synth).
+# El cruce vive en la app, no en el motor: llimphi sigue sin conocer takiy.
+takiy-core = { path = "../../takiy/takiy-core" }
+takiy-genesis = { path = "../../takiy/takiy-genesis" }
+takiy-synth = { path = "../../takiy/takiy-synth" }
+# Persistencia de los artefactos en texto editable a mano (y salida de la IA).
+ron = { workspace = true }
+# Deserializar el "brief" de escena que emite el LLM.
+serde = { workspace = true, features = ["derive"] }
+# Render headless a PNG para el modo --shot (verificación sin pantalla).
+pollster = { workspace = true }
+png = { workspace = true }
+# Decodificación de la foto (PNG/JPEG/…) para el "Ser desde foto" → busto voxel.
+image = { workspace = true }
+# Profundidad monocular por el borde: el trait Proveedor + la op, el cliente del
+# daemon pixel-verbo (MiDaS por socket, SIN linkear ort) y un mock de respaldo.
+pixel-verbo-core = { path = "../../tullpu/pixel-verbo-core" }
+pixel-verbo-daemon = { path = "../../tullpu/pixel-verbo-daemon" }
+pixel-verbo-mock = { path = "../../tullpu/pixel-verbo-mock" }
+
+[dev-dependencies]
+# Render headless de los ejemplos (demo «ser desde foto en un mundo real»).
+llimphi-hal = { path = "../llimphi-hal", version = "0.1.0" }
+llimphi-raster = { path = "../llimphi-raster", version = "0.1.0" }
diff --git a/llimphi-voxel-studio/LEEME.md b/llimphi-voxel-studio/LEEME.md
new file mode 100644
index 0000000..20a4255
--- /dev/null
+++ b/llimphi-voxel-studio/LEEME.md
@@ -0,0 +1,26 @@
+# llimphi-voxel-studio
+
+*Read this in English: [README.md](README.md).*
+
+# llimphi-voxel-studio — el creador de mundos, con interfaz
+
+Editor por **niveles de composición**: Leyes → Materiales → Seres → Biomas →
+Mundos → Escenas. Cada nivel tiene su lista de items **creables, editables,
+renombrables, borrables y duplicables**, su editor a la derecha y (donde aplica)
+preview 3D en vivo. La jerarquía vive en el `Project` agnóstico de
+`llimphi-voxel`; esta app sólo la pinta.
+
+```bash
+cargo run -p llimphi-voxel-studio --release            # ventana interactiva
+cargo run -p llimphi-voxel-studio --release -- --shot  # PNG headless a /tmp
+```
+
+## Uso
+
+```sh
+cargo run --release -p llimphi-voxel-studio
+```
+
+---
+
+Parte de **llimphi** — ver [llimphi](../LEEME.md).
diff --git a/llimphi-voxel-studio/README.md b/llimphi-voxel-studio/README.md
new file mode 100644
index 0000000..4e7c6e2
--- /dev/null
+++ b/llimphi-voxel-studio/README.md
@@ -0,0 +1,20 @@
+# llimphi-voxel-studio
+
+The world creator, with an interface.
+
+An editor by **levels of composition**: Laws → Materials → Beings → Biomes →
+Worlds → Scenes. Each level has its list of items — creatable, editable,
+renameable, deletable and duplicable — its editor on the right and, where it
+applies, a live 3D preview. The hierarchy lives in `llimphi-voxel`'s agnostic
+`Project`; this app only paints it.
+
+## Use
+
+```sh
+cargo run -p llimphi-voxel-studio --release            # interactive window
+cargo run -p llimphi-voxel-studio --release -- --shot  # headless PNG to /tmp
+```
+
+---
+
+Part of **llimphi** — see [llimphi](../README.md).
diff --git a/llimphi-voxel-studio/escenas/el-nacimiento.voxstudio.ron b/llimphi-voxel-studio/escenas/el-nacimiento.voxstudio.ron
new file mode 100644
index 0000000..6598577
--- /dev/null
+++ b/llimphi-voxel-studio/escenas/el-nacimiento.voxstudio.ron
@@ -0,0 +1,82 @@
+(
+    magia: "tawasuyu-voxel-studio",
+    version: 1,
+    proyecto: (
+        next_id: 6,
+        leyes: [],
+        materiales: [
+            (
+                id: 1,
+                name: "arena",
+                parent: None,
+                role: Terreno,
+                color: Some((0.8392157, 0.7372549, 0.50980395)),
+                grain: Some(0.55),
+                leyes: [],
+                builtin: Some(Sand),
+            ),
+            (
+                id: 2,
+                name: "roca",
+                parent: None,
+                role: Terreno,
+                color: Some((0.42352942, 0.4, 0.38431373)),
+                grain: Some(0.45),
+                leyes: [],
+                builtin: Some(Rock),
+            ),
+        ],
+        seres: [],
+        biomas: [
+            (
+                id: 3,
+                name: "vacío",
+                base: 0.3,
+                dune: 0.06,
+                relief: 0.3,
+                mountains: 0.06,
+                water_level: 0.0,
+                rivers: 0.0,
+                peak_at: 1.0,
+                ground: 1,
+                cliff: 2,
+                peak: None,
+                objetos: [],
+                seres: [],
+            ),
+        ],
+        mundos: [
+            (
+                id: 4,
+                name: "el vacío",
+                seed: 20260702,
+                biomas: [
+                    3,
+                ],
+            ),
+        ],
+        escenas: [
+            (
+                id: 5,
+                name: "el nacimiento",
+                mundo: 4,
+                duration: 8.5,
+                actors: [],
+                shots: [],
+                handheld: 0.25,
+                atmosfera: Some((
+                    bruma: 2.5,
+                    color: (0.66, 0.65, 0.7),
+                    desde_negro: 3.0,
+                )),
+                caida: Some((
+                    altura: 90.0,
+                    duracion: 7.0,
+                    aterrizaje: (64.0, 64.0),
+                    suelo: 37.0,
+                )),
+                sucesos: [],
+            ),
+        ],
+    ),
+)
\ No newline at end of file
diff --git a/llimphi-voxel-studio/escenas/nacimiento.voxdag b/llimphi-voxel-studio/escenas/nacimiento.voxdag
new file mode 100644
index 0000000..f99e666
Binary files /dev/null and b/llimphi-voxel-studio/escenas/nacimiento.voxdag differ
diff --git a/llimphi-voxel-studio/examples/demo_elimon.rs b/llimphi-voxel-studio/examples/demo_elimon.rs
new file mode 100644
index 0000000..069112b
--- /dev/null
+++ b/llimphi-voxel-studio/examples/demo_elimon.rs
@@ -0,0 +1,467 @@
+//! **Demo end-to-end: «un personaje desde foto, en El Limón mirando las montañas».**
+//!
+//! La foto NO se voxeliza literal (eso da el valle de inquietud). Corre así:
+//!   1. Recorta la persona de la foto (segmentación u2net por el daemon pixel-verbo).
+//!   2. Muestrea sus RASGOS de color (piel arriba, ropa abajo) — nada de geometría.
+//!   3. Arma un **personaje ESTILIZADO** del kit (humanoide voxel blocky) con esos
+//!      colores: su estilo es propio, la foto sólo regula piel/ropa.
+//!   4. Arma el terreno voxel desde un **DEM real** de El Limón/Maracay (SRTM): el llano
+//!      al sur, la Cordillera de la Costa (Henri Pittier) al norte.
+//!   5. Planta el personaje en el llano (`stamp_busto`) y rinde una toma INMERSIVA: el
+//!      personaje en primer plano, las montañas de fondo, luz cálida y bruma.
+//!
+//! Socket por env: `SEG_SOCK` (u2net). Foto/DEM/salida por args. Perillas de cámara y
+//! escala por env: `CAM_Z`, `CAM_H`, `CAM_PITCH`, `CAM_YAW`, `BUST_Z`, `BUST_X`, `PERS_H`, `EXAG`.
+//!
+//! `cargo run -p llimphi-voxel-studio --example demo_elimon --release -- <foto> <dem> <out.png>`
+
+use std::io::BufWriter;
+
+use llimphi_3d::glam::Vec3;
+use llimphi_3d::{Atmosphere, Camera3d, VoxelGrid, VoxelRenderer};
+use llimphi_hal::{wgpu, Hal};
+use llimphi_raster::peniko::Color;
+use llimphi_raster::{vello, Renderer};
+use pixel_verbo_core::{Imagen, OpPixel, Proveedor};
+use pixel_verbo_daemon::ClienteBloqueante;
+
+const W: u32 = 1280;
+const H: u32 = 720;
+const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
+
+fn env_f(k: &str, d: f32) -> f32 {
+    std::env::var(k).ok().and_then(|s| s.parse().ok()).unwrap_or(d)
+}
+
+fn main() {
+    let args: Vec<String> = std::env::args().collect();
+    let foto = args.get(1).cloned().unwrap_or_default();
+    let dem = args.get(2).cloned().unwrap_or_default();
+    let out = args.get(3).cloned().unwrap_or_else(|| "/tmp/elimon.png".into());
+
+    // --- Foto → RGBA (downscale para socket + busto) ---
+    let img = image::open(&foto).expect("abrir foto").to_rgba8();
+    let ancho_proc = 384u32;
+    let alto_proc = (img.height() * ancho_proc / img.width()).max(1);
+    let chica = image::imageops::resize(&img, ancho_proc, alto_proc, image::imageops::FilterType::Lanczos3);
+    let (pw, ph) = (chica.width(), chica.height());
+    let rgba = chica.into_raw();
+
+    // --- 1. Recorte de la persona (u2net por daemon) → alpha ---
+    let seg_sock = std::env::var("SEG_SOCK").expect("SEG_SOCK");
+    let seg = ClienteBloqueante::conectar(&seg_sock).expect("conectar u2net");
+    let recorte = seg
+        .aplicar(&OpPixel::Segmentar { prompt: None }, Some(Imagen::nueva(pw, ph, rgba.clone()).unwrap()))
+        .expect("segmentar");
+    let alpha: Vec<u8> = recorte.bytes.chunks_exact(4).map(|p| p[3]).collect();
+    eprintln!("recorte: {}x{} (alpha = persona)", recorte.ancho, recorte.alto);
+
+    // --- 2. RASGOS de color (piel arriba, ropa abajo) — nada de geometría de la foto ---
+    let (skin, shirt, pants) = rasgos(&rgba, &alpha, pw, ph);
+    eprintln!("rasgos: piel {skin:?}  ropa {shirt:?}");
+
+    // --- 3. Personaje ESTILIZADO del kit (humanoide voxel), coloreado por los rasgos ---
+    let pers_h = env_f("PERS_H", 46.0) as u32;
+    let personaje = personaje_voxel(pers_h, skin, shirt, pants);
+    eprintln!("personaje estilizado: dim {:?}", personaje.dim());
+
+    // --- 4. Terreno desde el DEM real de El Limón/Maracay ---
+    let exag = env_f("EXAG", 1.0);
+    let (mut grid, dim) = terreno_desde_dem(&dem, exag);
+
+    // --- 5. Plantar el personaje en el llano (sur), mirando al sur (a cámara) ---
+    let bx = env_f("BUST_X", (dim[0] as f32) * 0.5) as u32;
+    let bz = env_f("BUST_Z", (dim[2] as f32) * 0.24) as u32;
+    let by = altura_terreno(&grid, bx, bz);
+    // facing 2 = el frente del personaje (+Z) queda hacia −Z = hacia la cámara.
+    plantar(&mut grid, &personaje, bx, by + 1, bz, 2);
+    eprintln!("personaje plantado en ({bx},{},{bz}) del mundo {:?}", by + 1, dim);
+
+    // --- Render inmersivo ---
+    let hal = pollster::block_on(Hal::new(None)).expect("hal");
+    let mut renderer = Renderer::new(&hal).expect("renderer");
+    let mut vr = VoxelRenderer::new(&hal.device, &hal.queue, FMT, &grid);
+    // Look sub-voxel cinematográfico: montañas suaves + busto redondeado (bisel), con
+    // grano de terreno; silueta por material para que el busto (bisel autorado) redondee.
+    vr.bisel = 0.85;
+    vr.rugosidad_amp = 0.5;
+    vr.rugosidad_freq = 1.7;
+    vr.silueta_por_voxel = true;
+    // Atardecer tropical: sol cálido bajo desde el oeste, cielo azul, bruma para dar aire.
+    vr.sun_dir = normalize([0.5, 0.55, -0.35]);
+    vr.atmosphere = Atmosphere {
+        sky_zenith: [58, 104, 176],
+        sky_horizon: [206, 196, 168],
+        fog_density: env_f("FOG", 0.010),
+        god_rays: 0.5,
+    };
+
+    // Cámara: parada en el llano sur, a la altura de los ojos, mirando al norte (+Z) a
+    // las montañas; el busto queda en primer plano. Todo en coords de mundo (grid
+    // centrado en el origen: voxel (gx,gy,gz) ↦ (gx,gy,gz) − dim/2).
+    let half = Vec3::new(dim[0] as f32, dim[1] as f32, dim[2] as f32) * 0.5;
+    let cam_z = env_f("CAM_Z", bz as f32 - 34.0);
+    let cam_x = env_f("CAM_X", bx as f32 + 6.0);
+    let suelo_cam = altura_terreno(&grid, cam_x as u32, cam_z.max(0.0) as u32) as f32;
+    let cam_h = suelo_cam + env_f("CAM_H", 30.0);
+    let eye = Vec3::new(cam_x, cam_h, cam_z) - half;
+    let cam = Camera3d::fly(eye, env_f("CAM_YAW", 0.0).to_radians(), env_f("CAM_PITCH", 6.0).to_radians());
+
+    let px = render(&hal, &mut renderer, &mut vr, &cam);
+    write_png(&px, &out);
+    eprintln!("✓ toma inmersiva escrita: {out}");
+}
+
+/// Muestrea los RASGOS de color de la persona recortada (`alpha>128`): piel cálida del
+/// tercio superior del bbox, ropa de la mitad inferior; pantalón derivado (más oscuro).
+/// Devuelve `[u8;3]` para colorear los voxels del personaje. NO toca geometría.
+fn rasgos(rgba: &[u8], alpha: &[u8], w: u32, h: u32) -> ([u8; 3], [u8; 3], [u8; 3]) {
+    let (w, h) = (w as usize, h as usize);
+    let (mut x0, mut y0, mut x1, mut y1) = (w, h, 0usize, 0usize);
+    for y in 0..h {
+        for x in 0..w {
+            if alpha[y * w + x] > 128 {
+                x0 = x0.min(x); y0 = y0.min(y); x1 = x1.max(x); y1 = y1.max(y);
+            }
+        }
+    }
+    let bh = (y1.saturating_sub(y0)).max(1);
+    // Piel: cálidos del tercio superior.
+    let (mut sr, mut sg, mut sb, mut sn) = (0u64, 0u64, 0u64, 0u64);
+    for y in y0..(y0 + bh * 45 / 100).min(h) {
+        for x in x0..=x1.min(w - 1) {
+            if alpha[y * w + x] <= 128 { continue; }
+            let o = (y * w + x) * 4;
+            let (r, g, b) = (rgba[o] as i32, rgba[o + 1] as i32, rgba[o + 2] as i32);
+            if r > g && g >= b && (r - b) > 12 && (r - b) < 130 && (r + g + b) > 150 {
+                sr += r as u64; sg += g as u64; sb += b as u64; sn += 1;
+            }
+        }
+    }
+    let skin = if sn > 30 { [(sr / sn) as u8, (sg / sn) as u8, (sb / sn) as u8] } else { [216, 172, 138] };
+    // Ropa: promedio de la mitad inferior.
+    let (mut cr, mut cg, mut cb, mut cn) = (0u64, 0u64, 0u64, 0u64);
+    for y in (y0 + bh / 2)..=y1.min(h - 1) {
+        for x in x0..=x1.min(w - 1) {
+            if alpha[y * w + x] <= 128 { continue; }
+            let o = (y * w + x) * 4;
+            cr += rgba[o] as u64; cg += rgba[o + 1] as u64; cb += rgba[o + 2] as u64; cn += 1;
+        }
+    }
+    let shirt = if cn > 0 { [(cr / cn) as u8, (cg / cn) as u8, (cb / cn) as u8] } else { [70, 120, 150] };
+    let pants = [(shirt[0] as f32 * 0.45) as u8, (shirt[1] as f32 * 0.5) as u8, (shirt[2] as f32 * 0.7) as u8];
+    (skin, shirt, pants)
+}
+
+/// **Personaje ESTILIZADO del kit**: NO cajas tipo Minecraft — formas ORGÁNICAS
+/// (elipsoides/cápsulas) en proporciones chibi expresivas (cabezón, cuerpo redondo,
+/// miembros rechonchos), coloreadas por los rasgos de la foto. Se rinde con bisel alto:
+/// el motor sub-voxel traza la isosuperficie suave y lo convierte en una figura
+/// redondeada tipo vinyl-toy/Fall-Guys, con carácter. Mira a +Z (ojos grandes al frente).
+/// Cada voxel lleva su detalle `(rugosidad, bisel)` para que la silueta salga lisa.
+fn personaje_voxel(h: u32, skin: [u8; 3], shirt: [u8; 3], pants: [u8; 3]) -> VoxelGrid {
+    let h = h.max(28) as f32;
+    // Proporciones chibi (cabezón simpático) pero con cuerpo presente.
+    let head_r = h * 0.205;
+    let body_rx = h * 0.20;
+    let body_ry = h * 0.22;
+    let body_rz = h * 0.17;
+    let limb_r = h * 0.072;
+    let w = (body_rx.max(head_r) * 2.0 + limb_r * 4.0 + 6.0) as u32;
+    let depth = (body_rz.max(head_r) * 2.0 + limb_r * 2.0 + 4.0) as u32;
+    let gy = (h + 4.0) as u32;
+    let mut g = VoxelGrid::new([w, gy, depth]);
+    let (cx, cz) = (w as f32 / 2.0, depth as f32 / 2.0);
+
+    let leg_cy = h * 0.12;
+    let body_cy = h * 0.42;
+    let head_cy = h * 0.78;
+    let pelo = [46u8, 36, 32];
+
+    // Piernas: dos cápsulas cortas y rechonchas.
+    capsula(&mut g, cx - body_rx * 0.42, leg_cy - h * 0.11, leg_cy + h * 0.11, cz, limb_r, pants);
+    capsula(&mut g, cx + body_rx * 0.42, leg_cy - h * 0.11, leg_cy + h * 0.11, cz, limb_r, pants);
+    // Brazos: cápsulas pegadas al cuerpo, caídas (no en cruz).
+    capsula(&mut g, cx - body_rx - limb_r * 0.3, body_cy - h * 0.13, body_cy + h * 0.05, cz, limb_r, shirt);
+    capsula(&mut g, cx + body_rx + limb_r * 0.3, body_cy - h * 0.13, body_cy + h * 0.05, cz, limb_r, shirt);
+    // Cuerpo: elipsoide redondo (pancita).
+    elipsoide(&mut g, cx, body_cy, cz, body_rx, body_ry, body_rz, shirt);
+    // Cabeza: elipsoide grande.
+    elipsoide(&mut g, cx, head_cy, cz, head_r, head_r * 1.04, head_r * 0.98, skin);
+    // Pelo: casquete oscuro sobre la mitad superior de la cabeza (centrado, sin tapar ojos).
+    elipsoide_parcial(&mut g, cx, head_cy + head_r * 0.34, cz, head_r * 1.03, head_r * 0.82, head_r * 1.02, pelo, head_cy + head_r * 0.30);
+    // Ojos: dos esferas oscuras grandes al frente (+Z) con brillo blanco → expresividad.
+    let zf = cz + head_r * 0.80;
+    let ex = head_r * 0.40;
+    let ey = head_cy + head_r * 0.02;
+    let er = head_r * 0.22;
+    for s in [-1.0f32, 1.0] {
+        elipsoide(&mut g, cx + s * ex, ey, zf, er, er * 1.15, er * 0.6, [26, 22, 28]);
+        // Chispa de brillo (arriba del ojo).
+        elipsoide(&mut g, cx + s * ex - er * 0.3, ey + er * 0.4, zf + 0.5, er * 0.28, er * 0.28, er * 0.4, [235, 235, 240]);
+    }
+    // Boca: pequeña curva oscura bajo los ojos.
+    elipsoide(&mut g, cx, head_cy - head_r * 0.42, cz + head_r * 0.78, head_r * 0.28, head_r * 0.10, head_r * 0.5, [120, 70, 66]);
+
+    g.reset_dirty();
+    g
+}
+
+/// Planta el personaje en `dst` con la base en `(x,y,z)`, rotado por `facing`, y con un
+/// detalle sub-voxel de **bisel alto** por voxel (silueta lisa/orgánica) — así el motor lo
+/// redondea en vez de dejarlo cúbico. Espeja `stamp_busto` pero con NUESTRO detalle.
+fn plantar(dst: &mut VoxelGrid, src: &VoxelGrid, x: u32, y: u32, z: u32, facing: u8) {
+    let [bw, bh, bd] = src.dim();
+    let (cx, cz) = (bw as i32 / 2, bd as i32 / 2);
+    dst.set_detail_brush(0.2, 1.0); // rugosidad leve (piel) + bisel máximo (redondeo)
+    for by in 0..bh {
+        for bz in 0..bd {
+            for bx in 0..bw {
+                let c = match src.get(bx, by, bz) {
+                    Some(c) if c[3] > 127 => c,
+                    _ => continue,
+                };
+                let (dx, dz) = (bx as i32 - cx, bz as i32 - cz);
+                let (rx, rz) = match facing & 3 {
+                    0 => (dx, dz),
+                    1 => (-dz, dx),
+                    2 => (-dx, -dz),
+                    _ => (dz, -dx),
+                };
+                let (px, py, pz) = (x as i32 + rx, y as i32 + by as i32, z as i32 + rz);
+                if px >= 0 && py >= 0 && pz >= 0 {
+                    dst.set_rgba(px as u32, py as u32, pz as u32, [c[0], c[1], c[2]], c[3]);
+                }
+            }
+        }
+    }
+    dst.clear_detail_brush();
+}
+
+/// Rellena un elipsoide de semiejes `(rx,ry,rz)` centrado en `(cx,cy,cz)` con `color`.
+fn elipsoide(g: &mut VoxelGrid, cx: f32, cy: f32, cz: f32, rx: f32, ry: f32, rz: f32, c: [u8; 3]) {
+    elipsoide_parcial(g, cx, cy, cz, rx, ry, rz, c, f32::NEG_INFINITY);
+}
+
+/// Elipsoide recortado por abajo en `y >= y_min` (para casquetes de pelo).
+fn elipsoide_parcial(g: &mut VoxelGrid, cx: f32, cy: f32, cz: f32, rx: f32, ry: f32, rz: f32, c: [u8; 3], y_min: f32) {
+    let [dx, dy, dz] = g.dim();
+    let (x0, x1) = ((cx - rx).floor().max(0.0) as u32, (cx + rx).ceil().min(dx as f32) as u32);
+    let (y0, y1) = ((cy - ry).floor().max(0.0) as u32, (cy + ry).ceil().min(dy as f32) as u32);
+    let (z0, z1) = ((cz - rz).floor().max(0.0) as u32, (cz + rz).ceil().min(dz as f32) as u32);
+    for x in x0..x1 {
+        for y in y0..y1 {
+            if (y as f32) < y_min {
+                continue;
+            }
+            for z in z0..z1 {
+                let dxx = (x as f32 + 0.5 - cx) / rx;
+                let dyy = (y as f32 + 0.5 - cy) / ry;
+                let dzz = (z as f32 + 0.5 - cz) / rz;
+                if dxx * dxx + dyy * dyy + dzz * dzz <= 1.0 {
+                    g.set(x, y, z, c);
+                }
+            }
+        }
+    }
+}
+
+/// Cápsula vertical (cilindro con tapas redondeadas) de radio `r`, de `y0` a `y1` en `x,z`.
+fn capsula(g: &mut VoxelGrid, cx: f32, y0: f32, y1: f32, cz: f32, r: f32, c: [u8; 3]) {
+    let [dx, dy, dz] = g.dim();
+    let (xa, xb) = ((cx - r).floor().max(0.0) as u32, (cx + r).ceil().min(dx as f32) as u32);
+    let (za, zb) = ((cz - r).floor().max(0.0) as u32, (cz + r).ceil().min(dz as f32) as u32);
+    let (ya, yb) = ((y0 - r).floor().max(0.0) as u32, (y1 + r).ceil().min(dy as f32) as u32);
+    for x in xa..xb {
+        for z in za..zb {
+            let dxx = x as f32 + 0.5 - cx;
+            let dzz = z as f32 + 0.5 - cz;
+            let rad2 = dxx * dxx + dzz * dzz;
+            for y in ya..yb {
+                let fy = y as f32 + 0.5;
+                // Distancia al segmento [y0,y1] en el eje Y (cilindro + tapas esféricas).
+                let dyy = if fy < y0 { fy - y0 } else if fy > y1 { fy - y1 } else { 0.0 };
+                if rad2 + dyy * dyy <= r * r {
+                    g.set(x, y, z, c);
+                }
+            }
+        }
+    }
+}
+
+/// Lee el DEM (`N N min max` + N filas de N enteros en metros; fila 0 = sur) y arma un
+/// terreno voxel: sur (llano de El Limón) al frente (z chico), norte (montañas) al fondo.
+/// Color por altura: verde valle → verde bosque → roca gris; grano determinista.
+fn terreno_desde_dem(ruta: &str, exag: f32) -> (VoxelGrid, [u32; 3]) {
+    let txt = std::fs::read_to_string(ruta).expect("leer DEM");
+    let mut lineas = txt.lines();
+    let cab: Vec<f32> = lineas.next().unwrap().split_whitespace().map(|s| s.parse().unwrap()).collect();
+    let (n, mn, mx) = (cab[0] as usize, cab[2], cab[3]);
+    let mut dem = vec![0f32; n * n];
+    for (r, l) in lineas.enumerate().take(n) {
+        for (c, v) in l.split_whitespace().enumerate().take(n) {
+            dem[r * n + c] = v.parse().unwrap();
+        }
+    }
+    let rango = (mx - mn).max(1.0);
+
+    // Mundo voxel: XZ = 4 celdas por muestra de DEM (upsample bilineal), alto dramático.
+    let escala = 4u32;
+    let dx = (n as u32) * escala;
+    let dz = (n as u32) * escala;
+    let alto_mont = (90.0 * exag) as u32; // voxels de relieve máximo
+    let base = 3u32;
+    let dy = base + alto_mont + 40; // sitio para el busto y cielo
+    let mut g = VoxelGrid::new([dx, dy, dz]);
+
+    let sample = |fx: f32, fz: f32| -> f32 {
+        // fx en [0,n-1] (col=lon), fz en [0,n-1] (row=lat, 0=sur). Bilineal.
+        let (x0, z0) = (fx.floor(), fz.floor());
+        let (tx, tz) = (fx - x0, fz - z0);
+        let (x0, z0) = (x0 as usize, z0 as usize);
+        let x1 = (x0 + 1).min(n - 1);
+        let z1 = (z0 + 1).min(n - 1);
+        let a = dem[z0 * n + x0];
+        let b = dem[z0 * n + x1];
+        let c = dem[z1 * n + x0];
+        let d = dem[z1 * n + x1];
+        let ab = a + (b - a) * tx;
+        let cd = c + (d - c) * tx;
+        ab + (cd - ab) * tz
+    };
+
+    for gz in 0..dz {
+        for gx in 0..dx {
+            let fx = gx as f32 / escala as f32;
+            let fz = gz as f32 / escala as f32;
+            let e = sample(fx.min((n - 1) as f32), fz.min((n - 1) as f32));
+            let t = ((e - mn) / rango).clamp(0.0, 1.0);
+            let top = base + (t * alto_mont as f32) as u32;
+            for y in 0..=top.min(dy - 1) {
+                let th = y as f32 / (base + alto_mont) as f32;
+                let col = color_altura(th, gx, y, gz);
+                g.set(gx, y, gz, col);
+            }
+        }
+    }
+    g.reset_dirty();
+    (g, [dx, dy, dz])
+}
+
+/// Altura de la columna sólida `(gx,gz)` (el primer vacío desde arriba).
+fn altura_terreno(g: &VoxelGrid, gx: u32, gz: u32) -> u32 {
+    let [_, dy, _] = g.dim();
+    for y in (0..dy).rev() {
+        if g.get(gx, y, gz).map(|c| c[3] > 127).unwrap_or(false) {
+            return y;
+        }
+    }
+    0
+}
+
+/// Color del terreno por altura normalizada `[0,1]` (valle verde → bosque → roca) con
+/// grano determinista para textura.
+fn color_altura(t: f32, x: u32, y: u32, z: u32) -> [u8; 3] {
+    let base = if t < 0.14 {
+        [86, 132, 72] // valle tropical (El Limón, verde)
+    } else if t < 0.45 {
+        let k = (t - 0.14) / 0.31;
+        mezcla([86, 132, 72], [64, 104, 60], k) // bosque de ladera (cloud forest)
+    } else if t < 0.75 {
+        let k = (t - 0.45) / 0.30;
+        mezcla([64, 104, 60], [110, 100, 86], k) // transición a roca
+    } else {
+        let k = (t - 0.75) / 0.25;
+        mezcla([110, 100, 86], [150, 146, 140], k) // roca alta gris
+    };
+    let h = hash(x, y, z);
+    let j = (h - 0.5) * 2.0 * 0.10; // ±10% de brillo
+    let ch = |c: u8| ((c as f32) * (1.0 + j)).clamp(0.0, 255.0) as u8;
+    [ch(base[0]), ch(base[1]), ch(base[2])]
+}
+
+fn mezcla(a: [u8; 3], b: [u8; 3], t: f32) -> [u8; 3] {
+    let m = |i: usize| (a[i] as f32 + (b[i] as f32 - a[i] as f32) * t) as u8;
+    [m(0), m(1), m(2)]
+}
+
+fn hash(x: u32, y: u32, z: u32) -> f32 {
+    let mut h = x.wrapping_mul(374761393).wrapping_add(y.wrapping_mul(668265263)).wrapping_add(z.wrapping_mul(2246822519));
+    h ^= h >> 13;
+    h = h.wrapping_mul(1274126177);
+    (h & 0xffff) as f32 / 65535.0
+}
+
+fn normalize(v: [f32; 3]) -> [f32; 3] {
+    let l = (v[0] * v[0] + v[1] * v[1] + v[2] * v[2]).sqrt().max(1e-6);
+    [v[0] / l, v[1] / l, v[2] / l]
+}
+
+fn render(hal: &Hal, renderer: &mut Renderer, vr: &mut VoxelRenderer, cam: &Camera3d) -> Vec<u8> {
+    let bg = [176, 190, 205];
+    let inter = hal.device.create_texture(&wgpu::TextureDescriptor {
+        label: Some("inter"),
+        size: wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+        mip_level_count: 1,
+        sample_count: 1,
+        dimension: wgpu::TextureDimension::D2,
+        format: FMT,
+        usage: wgpu::TextureUsages::STORAGE_BINDING
+            | wgpu::TextureUsages::TEXTURE_BINDING
+            | wgpu::TextureUsages::RENDER_ATTACHMENT
+            | wgpu::TextureUsages::COPY_SRC,
+        view_formats: &[],
+    });
+    let view = inter.create_view(&wgpu::TextureViewDescriptor::default());
+    let base = vello::Scene::new();
+    renderer
+        .render_to_view(hal, &base, &view, W, H, Color::from_rgba8(bg[0], bg[1], bg[2], 255))
+        .expect("base");
+    let mut enc = hal.device.create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    vr.render(&hal.device, &hal.queue, &mut enc, &view, (W, H), cam);
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    readback(hal, &inter)
+}
+
+fn readback(hal: &Hal, target: &wgpu::Texture) -> Vec<u8> {
+    let unpadded = (W * 4) as usize;
+    let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize;
+    let padded = unpadded.div_ceil(align) * align;
+    let buf = hal.device.create_buffer(&wgpu::BufferDescriptor {
+        label: None,
+        size: (padded * H as usize) as u64,
+        usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
+        mapped_at_creation: false,
+    });
+    let mut enc = hal.device.create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    enc.copy_texture_to_buffer(
+        wgpu::TexelCopyTextureInfo { texture: target, mip_level: 0, origin: wgpu::Origin3d::ZERO, aspect: wgpu::TextureAspect::All },
+        wgpu::TexelCopyBufferInfo { buffer: &buf, layout: wgpu::TexelCopyBufferLayout { offset: 0, bytes_per_row: Some(padded as u32), rows_per_image: Some(H) } },
+        wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let slice = buf.slice(..);
+    let (tx, rx) = std::sync::mpsc::channel();
+    slice.map_async(wgpu::MapMode::Read, move |r| { let _ = tx.send(r); });
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    rx.recv().unwrap().unwrap();
+    let data = slice.get_mapped_range();
+    let mut px = Vec::with_capacity((W * H * 4) as usize);
+    for row in 0..H as usize {
+        let s = row * padded;
+        px.extend_from_slice(&data[s..s + unpadded]);
+    }
+    drop(data);
+    buf.unmap();
+    px
+}
+
+fn write_png(px: &[u8], path: &str) {
+    let f = std::fs::File::create(path).expect("png");
+    let mut enc = png::Encoder::new(BufWriter::new(f), W, H);
+    enc.set_color(png::ColorType::Rgba);
+    enc.set_depth(png::BitDepth::Eight);
+    let mut w = enc.write_header().unwrap();
+    w.write_image_data(px).unwrap();
+}
diff --git a/llimphi-voxel-studio/src/ai.rs b/llimphi-voxel-studio/src/ai.rs
new file mode 100644
index 0000000..218ac69
--- /dev/null
+++ b/llimphi-voxel-studio/src/ai.rs
@@ -0,0 +1,504 @@
+//! Conexión IA **"poor"** del studio. Convierte prosa en artefactos del modelo:
+//! un [`Bioma`] (relieve + materiales), una [`SceneSpec`] o un [`CharSpec`]. Dos
+//! caminos en cascada donde aplica: LLM real (`pluma-llm`, autodetecta backend) y,
+//! si no hay modelo o falla el parseo, una **heurística local** offline — así el
+//! botón siempre produce algo.
+//!
+//! Tras el rediseño por niveles, los materiales son **autorables** (ids en el
+//! `Project`), así que la generación de un bioma referencia los materiales semilla
+//! vía [`MatRefs`] en vez de un `enum` cerrado.
+
+use llimphi_voxel::{Bioma, CharSpec, Clip, Forma, Mineral, MineralUso, ObjetoUso, Project, SceneSpec};
+use pluma_llm::pluma_llm_core::ChatRequest;
+use serde::Deserialize;
+
+/// Ids de los materiales **semilla** del proyecto que un bioma puede referenciar.
+/// Se resuelven una vez (con [`from_project`](Self::from_project)) y se capturan en
+/// el worker de IA — así la generación no necesita el `Project` entero.
+#[derive(Debug, Clone, Copy)]
+pub struct MatRefs {
+    pub sand: u64,
+    pub grass: u64,
+    pub rock: u64,
+    pub snow: u64,
+    pub cactus: u64,
+    pub leaf: u64,
+    pub wheat: u64,
+    pub bloom: u64,
+    pub tierra: u64,
+    pub arcilla: u64,
+    pub grava: u64,
+    pub arenisca: u64,
+    pub basalto: u64,
+    pub granito: u64,
+    pub marmol: u64,
+    pub hielo: u64,
+    pub lava: u64,
+    pub musgo: u64,
+}
+
+impl MatRefs {
+    /// Resuelve los ids semilla del proyecto (0 si falta alguno — no debería con el
+    /// proyecto de arranque).
+    pub fn from_project(p: &Project) -> Self {
+        use llimphi_voxel::Material::*;
+        let id = |m| p.material_id_for(m).unwrap_or(0);
+        Self {
+            sand: id(Sand),
+            grass: id(Grass),
+            rock: id(Rock),
+            snow: id(Snow),
+            cactus: id(Cactus),
+            leaf: id(Leaf),
+            wheat: id(Wheat),
+            bloom: id(Bloom),
+            tierra: id(Tierra),
+            arcilla: id(Arcilla),
+            grava: id(Grava),
+            arenisca: id(Arenisca),
+            basalto: id(Basalto),
+            granito: id(Granito),
+            marmol: id(Marmol),
+            hielo: id(Hielo),
+            lava: id(Lava),
+            musgo: id(Musgo),
+        }
+    }
+}
+
+/// Pregunta al LLM real (de `pluma-llm`, `from_env`) y devuelve el texto. `None` si
+/// el backend es **Mock** (sin credenciales) o si la red falla. Motor compartido de
+/// la asistencia; cada caller parsea la salida a su artefacto.
+fn ask_llm(system: &str, prompt: &str, max_tokens: u32) -> Option<String> {
+    let client = pluma_llm::from_env().ok()?;
+    if client.model_id().to_lowercase().contains("mock") {
+        return None;
+    }
+    let req = ChatRequest::una_vuelta(prompt, max_tokens)
+        .con_sistema(system)
+        .con_temperatura(0.5);
+    let rt = tokio::runtime::Builder::new_current_thread()
+        .enable_all()
+        .build()
+        .ok()?;
+    rt.block_on(client.complete(&req)).ok().map(|r| r.content)
+}
+
+/// Recorta un texto al literal RON `( … )` que contenga (tolera ``` y ruido).
+fn ron_slice(text: &str) -> Option<&str> {
+    let start = text.find('(')?;
+    let end = text.rfind(')')?;
+    (end > start).then(|| &text[start..=end])
+}
+
+// =============================================================================
+//  Biomas
+// =============================================================================
+
+/// **Bioma desde prosa** (heurística local por palabras clave). Arranca de un preset
+/// (desierto o pradera) referenciando los materiales semilla `m` y lo ajusta según
+/// términos del prompt. Offline e instantánea — el alma "poor". El id queda en 0; lo
+/// asigna el `Project` al agregarlo.
+pub fn generate_bioma(prompt: &str, m: &MatRefs) -> Bioma {
+    let p = prompt.to_lowercase();
+    let has = |k: &str| p.contains(k);
+
+    let desierto = has("desierto") || has("arena") || has("seco") || has("duna");
+    let mut b = if desierto {
+        Bioma {
+            id: 0,
+            name: name_from(prompt, "bioma"),
+            base: 0.30,
+            dune: 0.05,
+            relief: 0.45,
+            mountains: 0.12,
+            water_level: 0.26,
+            rivers: 0.18,
+            peak_at: 1.0,
+            ground: m.sand,
+            cliff: m.rock,
+            peak: None,
+            objetos: vec![ObjetoUso { material: m.cactus, densidad: 0.010, forma: Forma::Columnar }],
+            minerales: vec![],
+            densidad_urbana: 0.4,
+            casas: Vec::new(),
+            fauna: vec![],
+            seres: vec![],
+        }
+    } else {
+        Bioma {
+            id: 0,
+            name: name_from(prompt, "bioma"),
+            base: 0.22,
+            dune: 0.10,
+            relief: 0.7,
+            mountains: 0.5,
+            water_level: 0.30,
+            rivers: 0.25,
+            peak_at: 0.80,
+            ground: m.grass,
+            cliff: m.rock,
+            peak: Some(m.snow),
+            objetos: vec![],
+            minerales: vec![],
+            densidad_urbana: 0.4,
+            casas: Vec::new(),
+            fauna: vec![],
+            seres: vec![],
+        }
+    };
+
+    if has("nieve") || has("monta") || has("montañ") || has("cumbre") || has("alpin") || has("pico") {
+        b.relief = b.relief.max(0.8);
+        b.mountains = b.mountains.max(0.65);
+        b.peak = Some(m.snow);
+        b.peak_at = 0.62;
+    }
+    if has("llano") || has("plano") || has("pradera") || has("planicie") || has("estepa") {
+        b.relief = b.relief.min(0.35);
+        b.mountains = b.mountains.min(0.2);
+    }
+    if has("agua") || has("lago") || has("mar") || has("océano") || has("oceano") || has("isla") || has("inund") {
+        b.water_level = b.water_level.max(0.5);
+    }
+    if has("río") || has("rio") || has("cauce") || has("arroyo") {
+        b.rivers = b.rivers.max(0.6);
+    }
+    if has("bosque") || has("selva") || has("verde") || has("pasto") {
+        b.ground = m.grass;
+    }
+    if has("cactus") || desierto {
+        if !b.objetos.iter().any(|o| o.forma == Forma::Columnar) {
+            b.objetos.push(ObjetoUso { material: m.cactus, densidad: 0.012, forma: Forma::Columnar });
+        }
+    }
+    // --- Vegetación por palabra clave (cada forma sólo si no está ya presente) ---
+    let add = |b: &mut Bioma, material: u64, densidad: f32, forma: Forma| {
+        if !b.objetos.iter().any(|o| o.forma == forma) {
+            b.objetos.push(ObjetoUso { material, densidad, forma });
+        }
+    };
+    if has("bosque") || has("selva") || has("árbol") || has("arbol") || has("frondo") {
+        add(&mut b, m.leaf, 0.045, Forma::Arbol);
+    }
+    if has("selva") || has("pino") || has("conífer") || has("conifer") || has("abeto") || has("nieve") || has("alpin") {
+        add(&mut b, m.leaf, 0.030, Forma::Conifera);
+    }
+    if has("palmera") || has("playa") || has("tropical") || has("oasis") || has("costa") {
+        add(&mut b, m.leaf, 0.010, Forma::Palmera);
+    }
+    if has("arbusto") || has("matorral") || has("maleza") || has("bosque") {
+        add(&mut b, m.leaf, 0.025, Forma::Arbusto);
+    }
+    if has("helecho") || has("selva") || has("húmed") || has("humed") || has("sotobosque") {
+        add(&mut b, m.cactus, 0.030, Forma::Helecho);
+    }
+    if has("flor") || has("jardín") || has("jardin") || has("prado") || has("pradera") {
+        add(&mut b, m.cactus, 0.012, Forma::Flor);
+    }
+    if has("pasto") || has("grama") || has("césped") || has("cesped") || has("pradera") || has("hierba") {
+        add(&mut b, m.grass, 0.06, Forma::Pasto);
+    }
+    // --- 2ª tanda: especies de selva / bosque / pradera ---
+    if has("selva") || has("jungla") || has("tropical") || has("bambú") || has("bambu") || has("caña") {
+        add(&mut b, m.cactus, 0.05, Forma::Bambu);
+    }
+    if has("selva") || has("jungla") || has("banano") || has("platan") || has("hoja grande") {
+        add(&mut b, m.leaf, 0.03, Forma::Platanera);
+    }
+    if has("roble") || has("encina") || has("añoso") || has("anoso") || has("frondo") {
+        add(&mut b, m.leaf, 0.015, Forma::Roble);
+    }
+    if has("hongo") || has("seta") || has("champiñón") || has("champinon") || has("húmed") || has("humed") {
+        add(&mut b, m.leaf, 0.012, Forma::Hongo);
+    }
+    if has("tocón") || has("tocon") || has("tronco") || has("cepa") || has("talado") || has("viejo bosque") {
+        add(&mut b, m.leaf, 0.006, Forma::Tocon);
+    }
+    if has("trigo") || has("cereal") || has("espiga") || has("cultivo") || has("dorado") || has("campo") {
+        add(&mut b, m.wheat, 0.05, Forma::Trigo);
+    }
+    if has("junco") || has("cañaveral") || has("canaveral") || has("totora") || has("humedal") || has("orilla") {
+        add(&mut b, m.leaf, 0.010, Forma::Junco);
+    }
+    if has("lavanda") || has("flores") || has("silvestre") || has("prado") || has("colorido") {
+        add(&mut b, m.bloom, 0.02, Forma::Lavanda);
+    }
+
+    // --- Terreno por palabra clave (la tanda de materiales de suelo/roca) ---
+    if has("volcán") || has("volcan") || has("lava") || has("basalto") || has("infierno") {
+        b.ground = m.basalto;
+        b.cliff = m.basalto;
+        b.peak = Some(m.lava);
+        b.peak_at = 0.7;
+    }
+    if has("glaciar") || has("hielo") || has("ártico") || has("artico") || has("polar") || has("congelad") {
+        b.ground = m.hielo;
+        b.cliff = m.hielo;
+        b.peak = Some(m.hielo);
+    }
+    if has("arcilla") || has("arcillos") || has("barro") || has("badland") {
+        b.ground = m.arcilla;
+    }
+    if has("arenisca") || has("cañón") || has("canon") || has("meseta") || has("mesa") {
+        b.cliff = m.arenisca;
+    }
+    if has("granito") || has("pedregos") || has("rocoso") || has("montañoso") {
+        b.cliff = m.granito;
+    }
+    if has("mármol") || has("marmol") || has("pulid") || has("templo") {
+        b.cliff = m.marmol;
+        b.peak = Some(m.marmol);
+    }
+    if has("tierra") || has("labrant") || has("arado") || has("campo") {
+        b.ground = m.tierra;
+    }
+    if has("grava") || has("cantera") || has("escombr") {
+        b.ground = m.grava;
+    }
+    if has("musgo") || has("húmed") || has("humed") || has("ciénaga") || has("cienaga") || has("pantano") {
+        b.ground = m.musgo;
+    }
+
+    // --- Minerales por palabra clave (además del suelo común: carbón + hierro) ---
+    let mineral = |b: &mut Bioma, min: Mineral| {
+        if !b.minerales.iter().any(|u| u.mineral == min) {
+            b.minerales.push(MineralUso::of(min));
+        }
+    };
+    // Toda roca trae los comunes salvo que sea un mundo sin relieve pelado.
+    if b.relief > 0.2 {
+        mineral(&mut b, Mineral::Carbon);
+        mineral(&mut b, Mineral::Hierro);
+    }
+    if has("mineral") || has("mina") || has("cueva") || has("caverna") || has("subsuelo") || has("roca") {
+        mineral(&mut b, Mineral::Cobre);
+        mineral(&mut b, Mineral::Cuarzo);
+    }
+    if has("carbón") || has("carbon") || has("hulla") {
+        mineral(&mut b, Mineral::Carbon);
+    }
+    if has("hierro") || has("metal") || has("óxido") || has("oxido") {
+        mineral(&mut b, Mineral::Hierro);
+    }
+    if has("cobre") || has("bronce") {
+        mineral(&mut b, Mineral::Cobre);
+    }
+    if has("oro") || has("dorado") || has("tesoro") || has("rico") {
+        mineral(&mut b, Mineral::Oro);
+    }
+    if has("plata") || has("argent") {
+        mineral(&mut b, Mineral::Plata);
+    }
+    if has("sal") || has("salino") || has("halita") {
+        mineral(&mut b, Mineral::Sal);
+    }
+    if has("lapis") || has("lapislázuli") || has("lapislazuli") || has("azul") {
+        mineral(&mut b, Mineral::Lapis);
+    }
+    if has("cuarzo") || has("cristal") {
+        mineral(&mut b, Mineral::Cuarzo);
+    }
+    if has("amatista") || has("geoda") || has("violeta") || has("púrpura") || has("purpura") {
+        mineral(&mut b, Mineral::Amatista);
+    }
+    if has("esmeralda") || has("gema") || has("joya") || has("selva") || has("jungla") {
+        mineral(&mut b, Mineral::Esmeralda);
+    }
+    if has("rubí") || has("rubi") || has("rojo") {
+        mineral(&mut b, Mineral::Rubi);
+    }
+    if has("diamante") || has("brillante") || has("preciad") {
+        mineral(&mut b, Mineral::Diamante);
+    }
+    b
+}
+
+// =============================================================================
+//  Escenas
+// =============================================================================
+
+/// "Brief" mínimo que el LLM emite para una escena: cuántos actores y qué gesto.
+#[derive(Deserialize)]
+struct SceneBrief {
+    actors: usize,
+    gesture: Clip,
+}
+
+const SCENE_SYSTEM: &str = "\
+Dirigís una escena voxel corta. Responde SÓLO con un literal RON de la forma
+(actors: N, gesture: G), sin markdown ni texto extra. N = cantidad de personajes
+(1..5). G = el gesto final: uno de Idle, Walk, Run, Wave, Point, Cheer.
+Ejemplo: (actors: 3, gesture: Cheer)";
+
+/// **Escena desde prosa** en el mundo `mundo` (id): LLM real (brief) → escena patrón;
+/// si no hay LLM o falla, heurística local. Siempre devuelve algo.
+pub fn generate_scene(prompt: &str, mundo: u64, dim: [u32; 3]) -> SceneSpec {
+    llm_scene(prompt, mundo, dim).unwrap_or_else(|| local_scene(prompt, mundo, dim))
+}
+
+fn llm_scene(prompt: &str, mundo: u64, dim: [u32; 3]) -> Option<SceneSpec> {
+    let brief: SceneBrief = ron::from_str(ron_slice(&ask_llm(SCENE_SYSTEM, prompt, 80)?)?).ok()?;
+    Some(SceneSpec::walk_and_emote(
+        scene_name(prompt),
+        mundo,
+        brief.actors.clamp(1, 5),
+        brief.gesture,
+        dim,
+    ))
+}
+
+fn local_scene(prompt: &str, mundo: u64, dim: [u32; 3]) -> SceneSpec {
+    let p = prompt.to_lowercase();
+    let n = parse_count(&p);
+    let gesture = if p.contains("salud") {
+        Clip::Wave
+    } else if p.contains("festej") || p.contains("celebr") || p.contains("baila") || p.contains("fiesta") {
+        Clip::Cheer
+    } else if p.contains("señal") || p.contains("apunt") || p.contains("muestr") {
+        Clip::Point
+    } else {
+        Clip::Wave
+    };
+    SceneSpec::walk_and_emote(scene_name(prompt), mundo, n, gesture, dim)
+}
+
+/// Cuántos actores pide el texto (palabra o dígito); 3 por defecto.
+fn parse_count(p: &str) -> usize {
+    for (w, n) in [
+        ("cinco", 5usize), ("cuatro", 4), ("tres", 3), ("dos", 2), ("una", 1), ("uno", 1),
+        (" 5", 5), (" 4", 4), (" 3", 3), (" 2", 2), (" 1", 1),
+    ] {
+        if p.contains(w) {
+            return n;
+        }
+    }
+    3
+}
+
+// =============================================================================
+//  Personajes (seres)
+// =============================================================================
+
+const CHAR_SYSTEM: &str = "\
+Generás un personaje voxel. Responde SÓLO con un literal RON de CharSpec, sin
+markdown ni texto extra. Campos: name (texto), age (Baby|Child|Teen|Adult|Elder),
+skin/shirt/pants (cada uno [r, g, b] en 0..1).
+Ejemplo: (name: \"rojo\", age: Adult, skin: [0.9, 0.72, 0.58], shirt: [0.82, 0.28, 0.26], pants: [0.2, 0.2, 0.28])";
+
+/// **Personaje desde prosa**: LLM real (`CharSpec` en RON) y, si no hay o falla, la
+/// heurística local. Siempre devuelve algo (id 0; lo asigna el `Project`).
+pub fn generate_character(prompt: &str) -> CharSpec {
+    llm_character(prompt).unwrap_or_else(|| local_character(prompt))
+}
+
+fn llm_character(prompt: &str) -> Option<CharSpec> {
+    ron::from_str::<CharSpec>(ron_slice(&ask_llm(CHAR_SYSTEM, prompt, 200)?)?).ok()
+}
+
+fn local_character(prompt: &str) -> CharSpec {
+    use llimphi_voxel::Age;
+    let p = prompt.to_lowercase();
+    let age = if p.contains("bebé") || p.contains("bebe") || p.contains("recién") || p.contains("recien") {
+        Age::Baby
+    } else if p.contains("niñ") || p.contains("nin") || p.contains("chic") {
+        Age::Child
+    } else if p.contains("joven") || p.contains("adolesc") || p.contains("teen") {
+        Age::Teen
+    } else if p.contains("ancian") || p.contains("viej") || p.contains("abuel") {
+        Age::Elder
+    } else {
+        Age::Adult
+    };
+    let mut c = CharSpec::new(scene_name(prompt), age);
+    if let Some(rgb) = parse_color(&p) {
+        c.shirt = rgb;
+    }
+    c
+}
+
+/// Color (`[r,g,b]` en `[0,1]`) nombrado en el texto, si lo hay.
+fn parse_color(p: &str) -> Option<[f32; 3]> {
+    let table: [(&str, [f32; 3]); 12] = [
+        ("roj", [0.82, 0.28, 0.26]),
+        ("celest", [0.50, 0.75, 0.92]),
+        ("azul", [0.22, 0.55, 0.78]),
+        ("verd", [0.30, 0.70, 0.40]),
+        ("amarill", [0.92, 0.80, 0.30]),
+        ("naranj", [0.90, 0.50, 0.22]),
+        ("violet", [0.62, 0.40, 0.78]),
+        ("morad", [0.62, 0.40, 0.78]),
+        ("rosa", [0.90, 0.55, 0.70]),
+        ("blanc", [0.92, 0.92, 0.92]),
+        ("negr", [0.14, 0.14, 0.16]),
+        ("marr", [0.45, 0.32, 0.22]),
+    ];
+    table.iter().find(|(k, _)| p.contains(k)).map(|(_, c)| *c)
+}
+
+/// Nombre de escena = primeras ~4 palabras de la descripción.
+fn scene_name(prompt: &str) -> String {
+    name_from(prompt, "escena IA")
+}
+
+/// Nombre a partir de las primeras ~4 palabras del prompt, con un default.
+fn name_from(prompt: &str, default: &str) -> String {
+    let s: String = prompt.split_whitespace().take(4).collect::<Vec<_>>().join(" ");
+    if s.is_empty() {
+        default.into()
+    } else {
+        s
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    fn refs() -> MatRefs {
+        MatRefs::from_project(&Project::starter())
+    }
+
+    #[test]
+    fn heuristica_detecta_desierto_con_cactus() {
+        let m = refs();
+        let b = generate_bioma("un desierto enorme con cactus", &m);
+        assert_eq!(b.ground, m.sand);
+        assert!(b.objetos.iter().any(|o| o.material == m.cactus));
+    }
+
+    #[test]
+    fn heuristica_detecta_montañas_nevadas() {
+        let m = refs();
+        let b = generate_bioma("cordillera con picos de nieve", &m);
+        assert_eq!(b.peak, Some(m.snow));
+        assert!(b.mountains >= 0.65);
+    }
+
+    #[test]
+    fn bioma_referencia_materiales_del_proyecto() {
+        let p = Project::starter();
+        let m = MatRefs::from_project(&p);
+        let b = generate_bioma("pradera verde con ríos", &m);
+        // Los ids referenciados existen como materiales del proyecto.
+        assert!(p.material(b.ground).is_some());
+        assert!(p.material(b.cliff).is_some());
+    }
+
+    #[test]
+    fn personaje_lee_edad_y_color() {
+        use llimphi_voxel::Age;
+        let c = local_character("un niño de remera roja");
+        assert_eq!(c.age, Age::Child);
+        assert_eq!(c.shirt, [0.82, 0.28, 0.26]);
+    }
+
+    #[test]
+    fn escena_lee_cantidad_y_gesto() {
+        let s = local_scene("dos personajes que festejan", 7, [128, 56, 128]);
+        assert_eq!(s.actors.len(), 2);
+        assert_eq!(s.mundo, 7);
+        let tiene_cheer = s.actors[0].keys.iter().any(|k| k.clip == Some(Clip::Cheer));
+        assert!(tiene_cheer, "festejar → Cheer");
+    }
+}
diff --git a/llimphi-voxel-studio/src/graph.rs b/llimphi-voxel-studio/src/graph.rs
new file mode 100644
index 0000000..223c1c0
--- /dev/null
+++ b/llimphi-voxel-studio/src/graph.rs
@@ -0,0 +1,450 @@
+//! `graph` — **puente entre la ecuación de una ley y un grafo de nodos**: la segunda
+//! superficie de autoría (la primera es la barra de fórmula). Ambas son vistas del
+//! **mismo AST** [`Expr`]: el grafo se deriva de las fórmulas al entrar en modo nodos
+//! ([`EqGraph::from_fuentes`]) y se recompila a fórmulas en cada edición
+//! ([`EqGraph::to_fuentes`]) — ida y vuelta sin una segunda fuente de verdad (el texto
+//! sigue siendo canónico y persistente; el grafo es estado de UI, no se guarda).
+//!
+//! Modelo: un nodo por sub‑expresión. Las **hojas** (constante, campo, parámetro,
+//! `dt`, y los muestreos de vecinos `lap`/`avg`/`abajo`… que llevan su campo adentro)
+//! no tienen entradas; los **operadores** (unario/binario/clamp) tienen 1/2/3 entradas;
+//! y cada campo remata en un **sink** `Δcampoₖ` (1 entrada, sin salida). Convertir el
+//! grafo a `Expr` es seguir el cable de cada sink hacia atrás.
+
+use llimphi_voxel::{BinOp, Dir, Expr, Reduce, Symbols, UnOp};
+use llimphi_widget_nodegraph::{NodeId, NodeSpec, PinIdx, Wire};
+
+/// La **operación** de un nodo = un constructor de [`Expr`] (o el sink de un campo).
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub enum NodeOp {
+    Const(f32),
+    Field(u16),
+    Param(u16),
+    Dt,
+    Lap(u16),
+    Vecinos(Reduce, u16),
+    Dir(Dir, u16),
+    Un(UnOp),
+    Bin(BinOp),
+    Clamp,
+    /// Remate del campo `k`: `Δcampoₖ/dt = <entrada>`.
+    Sink(u16),
+}
+
+impl NodeOp {
+    /// Etiquetas de los pins de entrada (su cantidad = aridad).
+    pub fn inputs(&self) -> Vec<String> {
+        match self {
+            NodeOp::Un(_) => vec!["x".into()],
+            NodeOp::Bin(_) => vec!["a".into(), "b".into()],
+            NodeOp::Clamp => vec!["x".into(), "lo".into(), "hi".into()],
+            NodeOp::Sink(_) => vec!["=".into()],
+            _ => vec![],
+        }
+    }
+    /// Etiquetas de los pins de salida (el sink no tiene).
+    pub fn outputs(&self) -> Vec<String> {
+        match self {
+            NodeOp::Sink(_) => vec![],
+            _ => vec!["".into()],
+        }
+    }
+    /// Texto del nodo (usa los nombres de campos/params de `sym`).
+    pub fn label(&self, sym: &Symbols) -> String {
+        let campo = |f: u16| sym.campos.get(f as usize).cloned().unwrap_or_else(|| format!("c{f}"));
+        match self {
+            NodeOp::Const(c) => fmt_num(*c),
+            NodeOp::Field(f) => campo(*f),
+            NodeOp::Param(p) => sym.params.get(*p as usize).cloned().unwrap_or_else(|| format!("p{p}")),
+            NodeOp::Dt => "dt".into(),
+            NodeOp::Lap(f) => format!("lap({})", campo(*f)),
+            NodeOp::Vecinos(r, f) => format!("{}({})", reduce_name(*r), campo(*f)),
+            NodeOp::Dir(d, f) => format!("{}({})", dir_name(*d), campo(*f)),
+            NodeOp::Un(u) => un_name(*u).into(),
+            NodeOp::Bin(b) => bin_name(*b).into(),
+            NodeOp::Clamp => "clamp".into(),
+            NodeOp::Sink(k) => format!("Δ{}", campo(*k)),
+        }
+    }
+}
+
+/// Un nodo del grafo: id + operación + posición en el lienzo.
+#[derive(Debug, Clone)]
+pub struct EqNode {
+    pub id: NodeId,
+    pub op: NodeOp,
+    pub x: f32,
+    pub y: f32,
+}
+
+/// Grafo editable de una ley: nodos + cables + los sinks (uno por campo, en orden).
+/// Estado de UI transitorio; se compila a `fuentes` en cada cambio.
+#[derive(Debug, Clone, Default)]
+pub struct EqGraph {
+    pub nodes: Vec<EqNode>,
+    pub wires: Vec<Wire>,
+    pub sinks: Vec<NodeId>,
+    next_id: NodeId,
+}
+
+const COL_W: f32 = 150.0;
+const ROW_H: f32 = 64.0;
+const CAMPO_GAP: f32 = 90.0;
+const ORIGIN_X: f32 = 40.0;
+const ORIGIN_Y: f32 = 40.0;
+
+impl EqGraph {
+    /// Construye el grafo a partir de las fórmulas de una ley (una por campo). Las que
+    /// no parsean caen a `Const(0)`. Auto‑distribuye los nodos (hojas a la izquierda,
+    /// sink a la derecha; un bloque por campo, apilados).
+    pub fn from_fuentes(fuentes: &[String], sym: &Symbols) -> EqGraph {
+        let mut g = EqGraph::default();
+        let mut base_y = ORIGIN_Y;
+        for (k, src) in fuentes.iter().enumerate() {
+            let expr = Expr::parse(src, sym).unwrap_or(Expr::Const(0.0));
+            let mut cursor = base_y;
+            let (root, depth) = g.build_expr(&expr, &mut cursor);
+            // Sink a la derecha del árbol.
+            let sink = g.push(NodeOp::Sink(k as u16), 0.0, 0.0);
+            let sink_depth = depth + 1;
+            g.set_pos(sink, sink_depth, (base_y + cursor - ROW_H) * 0.5);
+            g.wires.push(Wire { from_node: root, from_output: 0, to_node: sink, to_input: 0 });
+            g.sinks.push(sink);
+            base_y = cursor + CAMPO_GAP;
+        }
+        // x se fijó por profundidad relativa a la izquierda; recolocar con columnas
+        // globales para que el sink quede a la derecha del más profundo.
+        g.reflow();
+        g
+    }
+
+    fn push(&mut self, op: NodeOp, x: f32, y: f32) -> NodeId {
+        let id = self.next_id;
+        self.next_id += 1;
+        self.nodes.push(EqNode { id, op, x, y });
+        id
+    }
+
+    /// `x` provisorio = profundidad (columnas desde la izquierda); se reacomoda en
+    /// [`reflow`]. `y` = fila. Guarda la profundidad en `x` como entero flotante.
+    fn set_pos(&mut self, id: NodeId, depth: usize, y: f32) {
+        if let Some(n) = self.nodes.iter_mut().find(|n| n.id == id) {
+            n.x = depth as f32;
+            n.y = y;
+        }
+    }
+
+    /// Crea los nodos de una `Expr` (post‑orden). Devuelve `(id_raíz, profundidad)`.
+    /// `cursor` avanza una fila por hoja para apilar sin solaparse.
+    fn build_expr(&mut self, e: &Expr, cursor: &mut f32) -> (NodeId, usize) {
+        match e {
+            Expr::Const(c) => (self.leaf(NodeOp::Const(*c), cursor), 0),
+            Expr::Field(f) => (self.leaf(NodeOp::Field(*f), cursor), 0),
+            Expr::Param(p) => (self.leaf(NodeOp::Param(*p), cursor), 0),
+            Expr::Dt => (self.leaf(NodeOp::Dt, cursor), 0),
+            Expr::Laplacian(f) => (self.leaf(NodeOp::Lap(*f), cursor), 0),
+            Expr::Vecinos(r, f) => (self.leaf(NodeOp::Vecinos(*r, *f), cursor), 0),
+            Expr::Dir(d, f) => (self.leaf(NodeOp::Dir(*d, *f), cursor), 0),
+            Expr::Un(op, a) => {
+                let (ca, da) = self.build_expr(a, cursor);
+                let id = self.push(NodeOp::Un(*op), 0.0, 0.0);
+                let y = self.y_of(ca);
+                self.set_pos(id, da + 1, y);
+                self.wires.push(Wire { from_node: ca, from_output: 0, to_node: id, to_input: 0 });
+                (id, da + 1)
+            }
+            Expr::Bin(op, a, b) => {
+                let (ca, da) = self.build_expr(a, cursor);
+                let (cb, db) = self.build_expr(b, cursor);
+                let id = self.push(NodeOp::Bin(*op), 0.0, 0.0);
+                let y = (self.y_of(ca) + self.y_of(cb)) * 0.5;
+                self.set_pos(id, da.max(db) + 1, y);
+                self.wires.push(Wire { from_node: ca, from_output: 0, to_node: id, to_input: 0 });
+                self.wires.push(Wire { from_node: cb, from_output: 0, to_node: id, to_input: 1 });
+                (id, da.max(db) + 1)
+            }
+            Expr::Clamp(x, lo, hi) => {
+                let (cx, dx) = self.build_expr(x, cursor);
+                let (cl, dl) = self.build_expr(lo, cursor);
+                let (ch, dh) = self.build_expr(hi, cursor);
+                let id = self.push(NodeOp::Clamp, 0.0, 0.0);
+                let y = self.y_of(cl);
+                self.set_pos(id, dx.max(dl).max(dh) + 1, y);
+                self.wires.push(Wire { from_node: cx, from_output: 0, to_node: id, to_input: 0 });
+                self.wires.push(Wire { from_node: cl, from_output: 0, to_node: id, to_input: 1 });
+                self.wires.push(Wire { from_node: ch, from_output: 0, to_node: id, to_input: 2 });
+                (id, dx.max(dl).max(dh) + 1)
+            }
+        }
+    }
+
+    fn leaf(&mut self, op: NodeOp, cursor: &mut f32) -> NodeId {
+        let y = *cursor;
+        *cursor += ROW_H;
+        self.push(op, 0.0, y)
+    }
+
+    fn y_of(&self, id: NodeId) -> f32 {
+        self.nodes.iter().find(|n| n.id == id).map(|n| n.y).unwrap_or(0.0)
+    }
+
+    /// Convierte las profundidades guardadas en `x` a coordenadas de lienzo: la
+    /// columna 0 es la más profunda (izquierda), y crece hacia la derecha.
+    fn reflow(&mut self) {
+        let maxd = self.nodes.iter().map(|n| n.x as usize).max().unwrap_or(0);
+        for n in &mut self.nodes {
+            let depth = n.x as usize;
+            n.x = ORIGIN_X + (maxd - depth) as f32 * COL_W;
+        }
+    }
+
+    // --- Grafo → fórmulas ---------------------------------------------------
+
+    /// Fuente de cada campo, reconstruida siguiendo el cable de su sink hacia atrás.
+    /// Campo sin sink o con la entrada del sink desconectada → `"0"`.
+    pub fn to_fuentes(&self, n_campos: usize, sym: &Symbols) -> Vec<String> {
+        (0..n_campos)
+            .map(|k| {
+                let sink = self.sinks.get(k).copied();
+                let root = sink.and_then(|s| self.source_into(s, 0));
+                match root {
+                    Some(r) => self.build_expr_from(r, 0).to_source(sym),
+                    None => "0".to_string(),
+                }
+            })
+            .collect()
+    }
+
+    /// Nodo cuyo output alimenta la entrada `pin` del nodo `node` (o `None`).
+    pub fn source_into(&self, node: NodeId, pin: PinIdx) -> Option<NodeId> {
+        self.wires
+            .iter()
+            .find(|w| w.to_node == node && w.to_input == pin)
+            .map(|w| w.from_node)
+    }
+
+    /// Reconstruye la `Expr` de un nodo (entradas faltantes → `Const(0)`). Corta a
+    /// profundidad 128 por si un rewire malicioso arma un ciclo.
+    fn build_expr_from(&self, node: NodeId, depth: u32) -> Expr {
+        if depth > 128 {
+            return Expr::Const(0.0);
+        }
+        let Some(n) = self.nodes.iter().find(|n| n.id == node) else {
+            return Expr::Const(0.0);
+        };
+        let arg = |i: PinIdx| -> Expr {
+            match self.source_into(node, i) {
+                Some(src) => self.build_expr_from(src, depth + 1),
+                None => Expr::Const(0.0),
+            }
+        };
+        match n.op {
+            NodeOp::Const(c) => Expr::Const(c),
+            NodeOp::Field(f) => Expr::Field(f),
+            NodeOp::Param(p) => Expr::Param(p),
+            NodeOp::Dt => Expr::Dt,
+            NodeOp::Lap(f) => Expr::Laplacian(f),
+            NodeOp::Vecinos(r, f) => Expr::Vecinos(r, f),
+            NodeOp::Dir(d, f) => Expr::Dir(d, f),
+            NodeOp::Un(op) => Expr::Un(op, Box::new(arg(0))),
+            NodeOp::Bin(op) => Expr::Bin(op, Box::new(arg(0)), Box::new(arg(1))),
+            NodeOp::Clamp => Expr::Clamp(Box::new(arg(0)), Box::new(arg(1)), Box::new(arg(2))),
+            NodeOp::Sink(_) => arg(0),
+        }
+    }
+
+    // --- Edición ------------------------------------------------------------
+
+    /// Agrega un nodo suelto (para el paladar de nodos). Devuelve su id.
+    pub fn add(&mut self, op: NodeOp, x: f32, y: f32) -> NodeId {
+        self.push(op, x, y)
+    }
+
+    /// Mueve un nodo (arrastre; layout).
+    pub fn drag(&mut self, id: NodeId, dx: f32, dy: f32) {
+        if let Some(n) = self.nodes.iter_mut().find(|n| n.id == id) {
+            n.x = (n.x + dx).max(0.0);
+            n.y = (n.y + dy).max(0.0);
+        }
+    }
+
+    /// Conecta `from`(salida 0) → entrada `to_pin` de `to`, reemplazando lo que
+    /// hubiera. Rechaza auto‑lazo y conexiones que crearían un ciclo.
+    pub fn connect(&mut self, from: NodeId, to: NodeId, to_pin: PinIdx) -> bool {
+        if from == to || self.reachable(to, from) {
+            return false; // ciclo
+        }
+        self.wires.retain(|w| !(w.to_node == to && w.to_input == to_pin));
+        self.wires.push(Wire { from_node: from, from_output: 0, to_node: to, to_input: to_pin });
+        true
+    }
+
+    /// Borra un nodo y todos sus cables. Un sink no se borra (define el campo).
+    pub fn delete(&mut self, id: NodeId) {
+        if self.sinks.contains(&id) {
+            return;
+        }
+        self.nodes.retain(|n| n.id != id);
+        self.wires.retain(|w| w.from_node != id && w.to_node != id);
+    }
+
+    /// ¿Se llega de `start` a `target` siguiendo cables hacia adelante? (anti‑ciclo).
+    fn reachable(&self, start: NodeId, target: NodeId) -> bool {
+        let mut stack = vec![start];
+        let mut seen = Vec::new();
+        while let Some(n) = stack.pop() {
+            if n == target {
+                return true;
+            }
+            if seen.contains(&n) {
+                continue;
+            }
+            seen.push(n);
+            for w in self.wires.iter().filter(|w| w.from_node == n) {
+                stack.push(w.to_node);
+            }
+        }
+        false
+    }
+
+    /// Especificaciones para el widget (label por `sym`).
+    pub fn node_specs(&self, sym: &Symbols) -> Vec<NodeSpec> {
+        self.nodes
+            .iter()
+            .map(|n| NodeSpec {
+                id: n.id,
+                label: n.op.label(sym),
+                x: n.x,
+                y: n.y,
+                inputs: n.op.inputs(),
+                outputs: n.op.outputs(),
+            })
+            .collect()
+    }
+}
+
+// --- Nombres de operadores (para labels) ------------------------------------
+
+fn reduce_name(r: Reduce) -> &'static str {
+    match r {
+        Reduce::Promedio => "avg",
+        Reduce::Suma => "sum6",
+        Reduce::Min => "min6",
+        Reduce::Max => "max6",
+    }
+}
+fn dir_name(d: Dir) -> &'static str {
+    match d {
+        Dir::Abajo => "abajo",
+        Dir::Arriba => "arriba",
+        Dir::Este => "este",
+        Dir::Oeste => "oeste",
+        Dir::Norte => "norte",
+        Dir::Sur => "sur",
+    }
+}
+fn un_name(u: UnOp) -> &'static str {
+    match u {
+        UnOp::Neg => "−x",
+        UnOp::Abs => "abs",
+        UnOp::Exp => "exp",
+        UnOp::Sqrt => "sqrt",
+    }
+}
+fn bin_name(b: BinOp) -> &'static str {
+    match b {
+        BinOp::Add => "+",
+        BinOp::Sub => "−",
+        BinOp::Mul => "×",
+        BinOp::Div => "÷",
+        BinOp::Min => "min",
+        BinOp::Max => "max",
+        BinOp::Gt => ">",
+        BinOp::Lt => "<",
+    }
+}
+fn fmt_num(c: f32) -> String {
+    if c.fract() == 0.0 && c.abs() < 1e7 {
+        format!("{}", c as i64)
+    } else {
+        format!("{c}")
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    fn sym() -> Symbols {
+        Symbols {
+            campos: vec!["u".into(), "v".into()],
+            params: vec!["Du".into(), "Dv".into(), "F".into(), "k".into()],
+        }
+    }
+
+    #[test]
+    fn round_trip_expr_grafo_expr() {
+        let sym = sym();
+        let fuentes = vec![
+            "Du * lap(u) - u * v * v + F * (1 - u)".to_string(),
+            "Dv * lap(v) + u * v * v - (F + k) * v".to_string(),
+        ];
+        let g = EqGraph::from_fuentes(&fuentes, &sym);
+        let back = g.to_fuentes(2, &sym);
+        for i in 0..2 {
+            let a = Expr::parse(&fuentes[i], &sym).unwrap();
+            let b = Expr::parse(&back[i], &sym).unwrap();
+            assert_eq!(a, b, "campo {i}: {} → {}", fuentes[i], back[i]);
+        }
+    }
+
+    #[test]
+    fn round_trip_terminos_variados() {
+        let sym = Symbols { campos: vec!["c".into()], params: vec!["k".into()] };
+        for src in [
+            "clamp(c + dt, 0, 1)",
+            "min(avg(c), max6(c)) - abajo(c)",
+            "k * lap(c) + abs(c) * exp(k)",
+            "sqrt(c) < k",
+        ] {
+            let g = EqGraph::from_fuentes(&[src.to_string()], &sym);
+            let back = g.to_fuentes(1, &sym);
+            let a = Expr::parse(src, &sym).unwrap();
+            let b = Expr::parse(&back[0], &sym).unwrap();
+            assert_eq!(a, b, "{src} → {}", back[0]);
+        }
+    }
+
+    #[test]
+    fn rewire_cambia_la_formula() {
+        let sym = Symbols { campos: vec!["c".into()], params: vec!["k".into()] };
+        // c + k  → reconectar la entrada `b` del `+` a un nodo `dt`.
+        let mut g = EqGraph::from_fuentes(&["c + k".to_string()], &sym);
+        // encontrar el nodo `+` (Bin(Add)).
+        let plus = g.nodes.iter().find(|n| matches!(n.op, NodeOp::Bin(BinOp::Add))).unwrap().id;
+        let dt = g.add(NodeOp::Dt, 0.0, 0.0);
+        assert!(g.connect(dt, plus, 1), "reconecta la entrada b");
+        let back = g.to_fuentes(1, &sym);
+        let got = Expr::parse(&back[0], &sym).unwrap();
+        let want = Expr::parse("c + dt", &sym).unwrap();
+        assert_eq!(got, want, "quedó: {}", back[0]);
+    }
+
+    #[test]
+    fn connect_rechaza_ciclo() {
+        let sym = Symbols { campos: vec!["c".into()], params: vec![] };
+        let mut g = EqGraph::from_fuentes(&["c + c".to_string()], &sym);
+        let plus = g.nodes.iter().find(|n| matches!(n.op, NodeOp::Bin(BinOp::Add))).unwrap().id;
+        // intentar alimentar el `+` con su propia salida → ciclo, rechazado.
+        assert!(!g.connect(plus, plus, 0), "auto-lazo rechazado");
+    }
+
+    #[test]
+    fn sink_no_se_borra() {
+        let sym = Symbols { campos: vec!["c".into()], params: vec![] };
+        let mut g = EqGraph::from_fuentes(&["c".to_string()], &sym);
+        let sink = g.sinks[0];
+        g.delete(sink);
+        assert!(g.nodes.iter().any(|n| n.id == sink), "el sink sobrevive");
+    }
+}
diff --git a/llimphi-voxel-studio/src/main.rs b/llimphi-voxel-studio/src/main.rs
new file mode 100644
index 0000000..e804574
--- /dev/null
+++ b/llimphi-voxel-studio/src/main.rs
@@ -0,0 +1,4865 @@
+//! # llimphi-voxel-studio — el creador de mundos, con interfaz
+//!
+//! Editor por **niveles de composición**: Leyes → Materiales → Seres → Biomas →
+//! Mundos → Escenas. Cada nivel tiene su lista de items **creables, editables,
+//! renombrables, borrables y duplicables**, su editor a la derecha y (donde aplica)
+//! preview 3D en vivo. La jerarquía vive en el [`Project`] agnóstico de
+//! `llimphi-voxel`; esta app sólo la pinta.
+//!
+//! ```bash
+//! cargo run -p llimphi-voxel-studio --release            # ventana interactiva
+//! cargo run -p llimphi-voxel-studio --release -- --shot  # PNG headless a /tmp
+//! ```
+
+use std::sync::{Arc, Mutex};
+use std::time::Duration;
+
+use llimphi_3d::glam::{Mat4, Vec3};
+use llimphi_3d::{push_cube, Atmosphere, Camera3d, VoxelGrid};
+use llimphi_icons::{icon_view, Icon};
+use llimphi_theme::Theme;
+use llimphi_ui::llimphi_layout::taffy::prelude::{
+    auto, length, percent, AlignItems, Dimension, FlexDirection, Position, Size, Style,
+};
+use llimphi_ui::llimphi_raster::peniko::Color;
+use llimphi_ui::{
+    App, DragPhase, Handle, Key, KeyEvent, KeyState, Modifiers, NamedKey, View, WheelDelta,
+};
+use llimphi_voxel::{
+    forward_h, hex_corto, right_h, window_origin_for_cast, world_dim, ActorKeySpec, ActorScript,
+    ActorSpec, Age, BinOp, Bioma, Documento, Historia, Player, Suceso, TipoSuceso,
+    BiomaPalette, CharSpec, Clip, FieldDef, FieldEngine, Forma, Impulso, LeyKind, LeyUso, MatRole,
+    Material, MaterialDef, Mundo, MundoRender, ParamDef, Primitiva, Program, Project, Reduce,
+    SceneSpec, ShotKind, ShotSpec, UnOp, PREVIEW_DIM_XZ,
+    Mineral, MineralUso, Mueble, Interior, Cutaway, CasaTipo, CasaUso, PuebloTipo,
+    Bicho, BichoUso,
+};
+use pixel_verbo_core::Proveedor;
+use pixel_verbo_daemon::ClienteBloqueante;
+use llimphi_widget_button::{button_view, ButtonPalette};
+use llimphi_widget_rag_sidebar::{
+    rag_multiselect_view, rag_sidebar_view, RagOptions, RagSidebarMsg, RagSidebarPalette,
+    RagSidebarState, RagSidebarView, RagSide, RagTooth,
+};
+use llimphi_widget_slider::{slider_view, SliderPalette};
+use llimphi_clipboard::SystemClipboard;
+use llimphi_widget_text_input::{
+    text_input_view_full, TextInputEvent, TextInputPalette, TextInputState,
+};
+use llimphi_widget_nodegraph::{nodegraph_view_ex, NodeId, NodegraphMetrics, NodegraphPalette, PinIdx};
+use llimphi_image::{from_rgba8, Image};
+use graph::{EqGraph, NodeOp};
+
+mod ai;
+mod graph;
+mod mapa_import;
+mod preview;
+mod render;
+mod rostro;
+mod shot;
+mod soundtrack;
+use ai::MatRefs;
+use preview::WorldPreview;
+
+/// Dónde se guarda/carga el proyecto (relativo al cwd).
+const PROJECT_PATH: &str = "voxel-studio.ron";
+
+/// Dónde persiste la HISTORIA (DAG de versiones/alternativas).
+const HISTORY_PATH: &str = "voxel-studio.voxdag";
+/// Paso de tiempo de la reproducción de escenas (~30 fps).
+const DT: f32 = 1.0 / 30.0;
+
+/// Ancho de la tira de dientes de un sidebar unificado (px).
+const RAIL_W: f32 = 46.0;
+
+/// Lado de la grilla 2D del **laboratorio de leyes** (petri dish del nivel Leyes).
+const LAB_DIM: u32 = 64;
+/// Sub‑pasos del laboratorio por cuadro (la reacción‑difusión evoluciona lento).
+const LAB_SUBSTEPS: usize = 4;
+/// Tolerancia por canal para clasificar las celdas de un material en el mundo (el
+/// terreno lleva grano que varía el color base; el agua no). Ver [`EcuacionSim`].
+const ECUACION_TOL: i32 = 28;
+
+/// **Laboratorio de una ley `Ecuacion`**: un campo escalar 2D corriendo la ecuación
+/// autorada, para *ver* qué hace sin depender de materiales ni biomas. El heatmap del
+/// campo visible se pinta en el centro del nivel Leyes. Se reconstruye cuando cambia
+/// la ley (`ley_id`) o su estructura (`gen`); los parámetros se leen en vivo al pasar.
+struct LawLab {
+    /// Ley que refleja.
+    ley_id: u64,
+    /// Generación estructural con la que se construyó (campos/fuentes).
+    gen: u64,
+    /// Estado de los campos.
+    engine: FieldEngine,
+    /// Programa compilado (o el error de parseo, para mostrarlo).
+    program: Result<Program, String>,
+    /// Campo que se visualiza en el heatmap.
+    vis: usize,
+}
+
+impl LawLab {
+    /// Construye el laboratorio para una ley `Ecuacion` y lo siembra.
+    fn build(ley_id: u64, gen: u64, campos: &[FieldDef], program: Result<Program, String>, vis: usize) -> Self {
+        let mut engine = FieldEngine::new([LAB_DIM, 1, LAB_DIM], campos.to_vec());
+        seed_engine(&mut engine);
+        let vis = vis.min(campos.len().saturating_sub(1));
+        Self { ley_id, gen, engine, program, vis }
+    }
+
+    /// Reinicia los campos a su siembra (sin recompilar).
+    fn reseed(&mut self) {
+        seed_engine(&mut self.engine);
+    }
+
+    /// Avanza `LAB_SUBSTEPS` sub‑pasos si el programa compiló.
+    fn step(&mut self, params: &[f32]) {
+        if let Ok(prog) = &self.program {
+            for _ in 0..LAB_SUBSTEPS {
+                self.engine.step(prog, params, 1.0);
+            }
+        }
+    }
+}
+
+/// (Re)construye el laboratorio si la ley seleccionada es una `Ecuacion` y cambió
+/// (por id o por generación estructural). Compila **sólo al reconstruir**, no cada
+/// cuadro. Deja `model.lab = None` si el nivel no tiene una ley por ecuación.
+fn ensure_lab(model: &mut Model) {
+    let id = model.sel[0];
+    let is_ec = matches!(
+        model.project.ley(id).map(|l| &l.kind),
+        Some(LeyKind::Ecuacion { campos, .. }) if !campos.is_empty()
+    );
+    if !is_ec {
+        model.lab = None;
+        return;
+    }
+    let need = match &model.lab {
+        Some(lab) => lab.ley_id != id || lab.gen != model.lab_gen,
+        None => true,
+    };
+    if !need {
+        return;
+    }
+    let (campos, program) = match &model.project.ley(id).unwrap().kind {
+        k @ LeyKind::Ecuacion { campos, .. } => (campos.clone(), k.compile_ecuacion().unwrap()),
+        _ => unreachable!("is_ec ya lo garantiza"),
+    };
+    let vis = model.lab.as_ref().map(|x| x.vis).unwrap_or(0);
+    model.lab = Some(LawLab::build(id, model.lab_gen, &campos, program, vis));
+}
+
+/// (Re)construye el grafo de nodos a partir de las fórmulas de la ley seleccionada.
+fn rebuild_eq_graph(model: &mut Model) {
+    let built = sel_ley(model).and_then(|l| match &l.kind {
+        LeyKind::Ecuacion { fuentes, .. } => {
+            l.kind.ecuacion_symbols().map(|sym| EqGraph::from_fuentes(fuentes, &sym))
+        }
+        _ => None,
+    });
+    model.eq_graph = built;
+    model.eq_graph_gen = model.lab_gen;
+}
+
+/// Recompila el grafo a fórmulas y las escribe en la ley. Bump de `lab_gen` (para que
+/// el laboratorio recompile) marcando el grafo como en‑sync (no se reconstruye solo).
+fn sync_graph_to_fuentes(model: &mut Model) {
+    let Some(sym) = sel_ley(model).and_then(|l| l.kind.ecuacion_symbols()) else {
+        return;
+    };
+    let n = sym.campos.len();
+    let fuentes = match &model.eq_graph {
+        Some(g) => g.to_fuentes(n, &sym),
+        None => return,
+    };
+    if let Some(l) = sel_ley_mut(model) {
+        if let LeyKind::Ecuacion { fuentes: f, .. } = &mut l.kind {
+            *f = fuentes;
+        }
+    }
+    model.lab_gen += 1;
+    model.eq_graph_gen = model.lab_gen;
+}
+
+/// Siembra un motor de campo: cada campo a su `init` + una mancha central (para
+/// disparar difusión/reacción). La mancha = 60 % del rango, en un cuadro central.
+fn seed_engine(engine: &mut FieldEngine) {
+    let dim = engine.dim();
+    let defs: Vec<(f32, f32)> = engine.fields().iter().map(|d| (d.min, d.max)).collect();
+    let (cx, cz) = (dim[0] / 2, dim[2] / 2);
+    let r = (dim[0] / 8).max(2);
+    for (f, (mn, mx)) in defs.iter().enumerate() {
+        let blob = mn + 0.6 * (mx - mn);
+        for z in cz.saturating_sub(r)..(cz + r).min(dim[2]) {
+            for x in cx.saturating_sub(r)..(cx + r).min(dim[0]) {
+                engine.set(f as u16, x, 0, z, blob);
+            }
+        }
+    }
+}
+
+// =============================================================================
+//  Niveles de composición (rail izquierdo)
+// =============================================================================
+
+/// Los niveles de composición, de lo más básico a lo más compuesto.
+#[derive(Clone, Copy, PartialEq, Eq)]
+enum Level {
+    Leyes,
+    Materiales,
+    Seres,
+    Biomas,
+    Mundos,
+    Escenas,
+    Interiores,
+}
+
+impl Level {
+    const ALL: [Level; 7] = [
+        Level::Leyes,
+        Level::Materiales,
+        Level::Seres,
+        Level::Biomas,
+        Level::Mundos,
+        Level::Escenas,
+        Level::Interiores,
+    ];
+
+    fn index(self) -> usize {
+        Self::ALL.iter().position(|&l| l == self).unwrap_or(0)
+    }
+    fn from_index(i: usize) -> Level {
+        Self::ALL[i.min(Self::ALL.len() - 1)]
+    }
+    fn label(self) -> &'static str {
+        match self {
+            Level::Leyes => "Leyes",
+            Level::Materiales => "Materiales",
+            Level::Seres => "Seres",
+            Level::Biomas => "Biomas",
+            Level::Mundos => "Mundos",
+            Level::Escenas => "Escenas",
+            Level::Interiores => "Interiores",
+        }
+    }
+    fn icon(self) -> Icon {
+        match self {
+            Level::Leyes => Icon::Droplet,
+            Level::Materiales => Icon::Leaf,
+            Level::Seres => Icon::User,
+            Level::Biomas => Icon::Mountain,
+            Level::Mundos => Icon::Globe,
+            Level::Escenas => Icon::Film,
+            Level::Interiores => Icon::Grid,
+        }
+    }
+    /// Color de acento del nivel (íconos coloridos).
+    fn color(self) -> Color {
+        match self {
+            Level::Leyes => Color::from_rgba8(150, 130, 230, 255),
+            Level::Materiales => Color::from_rgba8(220, 170, 80, 255),
+            Level::Seres => Color::from_rgba8(110, 200, 130, 255),
+            Level::Biomas => Color::from_rgba8(90, 200, 200, 255),
+            Level::Mundos => Color::from_rgba8(90, 150, 230, 255),
+            Level::Escenas => Color::from_rgba8(230, 120, 110, 255),
+            Level::Interiores => Color::from_rgba8(210, 150, 200, 255),
+        }
+    }
+    /// Sets de herramientas (pestañas del rail derecho): rótulo + ícono.
+    fn tools(self) -> Vec<(&'static str, Icon)> {
+        match self {
+            Level::Leyes => vec![("Parámetros", Icon::Gauge)],
+            Level::Materiales => vec![("Aspecto", Icon::Image), ("Leyes", Icon::Droplet)],
+            Level::Seres => vec![
+                ("Cuerpo", Icon::User),
+                ("Andar", Icon::Gauge),
+                ("Conducta", Icon::Settings),
+                ("Piel", Icon::Image),
+                ("Camiseta", Icon::Image),
+                ("Pantalón", Icon::Image),
+            ],
+            Level::Biomas => vec![
+                ("Relieve", Icon::Mountain),
+                ("Materiales", Icon::Leaf),
+                ("Objetos", Icon::Grid),
+                ("Minerales", Icon::Gauge),
+                ("Casas", Icon::Globe),
+                ("Fauna", Icon::User),
+                ("Seres", Icon::User),
+            ],
+            Level::Mundos => vec![("Semilla", Icon::Globe), ("Biomas", Icon::Mountain)],
+            Level::Escenas => vec![
+                ("Escena", Icon::Film),
+                ("Reparto", Icon::User),
+                ("Cámara", Icon::Camera),
+                ("Video", Icon::Play),
+            ],
+            Level::Interiores => vec![("Sala", Icon::Grid), ("Mueble", Icon::User)],
+        }
+    }
+}
+
+/// Parte coloreable de un ser.
+#[derive(Clone, Copy)]
+enum Part {
+    Skin,
+    Shirt,
+    Pants,
+}
+
+/// Parámetro `f32` del relieve de un bioma.
+#[derive(Clone, Copy)]
+enum BiomaField {
+    Base,
+    Dune,
+    Relief,
+    Mountains,
+    Water,
+    Rivers,
+    PeakAt,
+}
+
+#[derive(Clone)]
+enum Msg {
+    // Navegación de niveles + items.
+    SelectLevel(Level),
+    SelectItem(u64),
+    SelectTool(usize),
+    /// Mensaje del **sidebar unificado IZQUIERDO** (selector de niveles): ejes de
+    /// disposición, buscador, control y resize. Se reduce con
+    /// `RagSidebarState::update`; el diente abierto se re-fija a `level`.
+    SidebarLeft(RagSidebarMsg),
+    /// Mensaje del **sidebar unificado DERECHO** (selector de herramientas). Igual:
+    /// se reduce con `RagSidebarState::update` y el abierto se re-fija a `tool_tab`.
+    SidebarRight(RagSidebarMsg),
+    NewItem,
+    DupItem,
+    DelItem,
+    // Renombrar (campo de texto).
+    /// Evento de mouse del campo de nombre (click/arrastre). El `Press` además
+    /// lo enfoca. Ver [`text_input_view_full`].
+    RenameCampo(TextInputEvent),
+    RenameKey(KeyEvent),
+    // Leyes.
+    CycleLeyKind,
+    SetLeyParam(usize, f32),
+    // Leyes por ecuación (autorables).
+    LeyPreset,
+    SetEcuParam(usize, f32),
+    /// Empezar a editar la fórmula `i` (desde un botón): carga su fuente en el
+    /// buffer compartido y enfoca. Ver [`Msg::FormulaCampo`] para el mouse del
+    /// propio campo ya en edición.
+    FormulaFocus(usize),
+    /// Evento de mouse del campo de fórmula ya en edición (click→caret,
+    /// arrastre→selección). Ver [`text_input_view_full`].
+    FormulaCampo(TextInputEvent),
+    FormulaKey(KeyEvent),
+    AddCampo,
+    RemoveCampo,
+    AddEcuParam,
+    RemoveEcuParam,
+    CycleLabField,
+    ReseedLab,
+    // Vista de grafo de nodos de la ley.
+    ToggleLeyesView,
+    GraphDrag(NodeId, f32, f32),
+    GraphConnect(NodeId, PinIdx, NodeId, PinIdx),
+    GraphAddNode(NodeOp),
+    GraphDeleteNode(NodeId),
+    // Materiales.
+    CycleMatRole,
+    SetMatColor(usize, f32),
+    SetMatGrain(f32),
+    SetMatBrillo(f32),
+    SetMatRugosidad(f32),
+    SetMatBisel(f32),
+    CycleMatParent,
+    AddMatLey,
+    RemoveMatLey,
+    CycleMatLey(usize),
+    // Seres.
+    CycleSereAge,
+    CycleSereCuerpo,
+    SetSereColor(Part, usize, f32),
+    // Andares (capa 2) del ser-rig.
+    CycleAndarEstado,
+    SetAndarCadencia(f32),
+    SetAndarAmplitud(usize, f32),
+    // Conducta (capa 3) — parámetros + impulsos de steering autorables.
+    SetConducta(usize, f32),
+    CondAddImpulso,
+    CondRemoveImpulso,
+    CondCycleImpulso(usize),
+    /// Empezar a editar el peso del impulso `i` (desde un botón): carga su
+    /// fuente en el buffer y enfoca. Ver [`Msg::CondFormulaCampo`] para el mouse.
+    CondFormulaFocus(usize),
+    /// Evento de mouse del campo de peso ya en edición (click→caret,
+    /// arrastre→selección). Ver [`text_input_view_full`].
+    CondFormulaCampo(TextInputEvent),
+    CondFormulaKey(KeyEvent),
+    ToggleManada,
+    // Biomas.
+    SetBiomaField(BiomaField, f32),
+    CycleBiomaGround,
+    CycleBiomaCliff,
+    CycleBiomaPeak,
+    AddBiomaObjeto,
+    RemoveBiomaObjeto,
+    SetObjetoDensidad(usize, f32),
+    CycleObjetoForma(usize),
+    CycleObjetoMaterial(usize),
+    // Minerales del bioma (con todos sus factores).
+    AddBiomaMineral,
+    RemoveBiomaMineral,
+    CycleMineralTipo(usize),
+    CycleMineralAspecto(usize),
+    SetMineralAbundancia(usize, f32),
+    SetMineralProfMin(usize, f32),
+    SetMineralProfMax(usize, f32),
+    SetMineralColor(usize, usize, f32),
+    SetMineralDureza(usize, f32),
+    SetMineralBrillo(usize, f32),
+    // Casas del bioma (pueblo procedural).
+    AddBiomaCasa,
+    RemoveBiomaCasa,
+    CycleCasaTipo(usize),
+    SetCasaDensidad(usize, f32),
+    SetDensidadUrbana(f32),
+    CyclePuebloTipo,
+    AplicarPuebloTipo,
+    // Fauna del bioma (seres esparcidos por semilla).
+    AddBiomaFauna,
+    RemoveBiomaFauna,
+    CycleFaunaBicho(usize),
+    SetFaunaDensidad(usize, f32),
+    // Interiores (colocar muebles).
+    CycleMuebleBrush,
+    CycleMuebleFacing,
+    PlaceMuebleAt(f32, f32),
+    RemoveLastPieza,
+    ClearPiezas,
+    SetInteriorAncho(f32),
+    SetInteriorFondo(f32),
+    CycleInteriorPiso,
+    CycleInteriorMuro,
+    ToggleInteriorMuros,
+    ToggleInteriorVentanas,
+    CycleInteriorTecho,
+    ToggleInteriorTecho,
+    AddBiomaSere,
+    RemoveBiomaSere,
+    CycleBiomaSere(usize),
+    SetBiomaSereProb(usize, f32),
+    // Mundos.
+    /// Evento de mouse del campo de semilla (click/arrastre). El `Press` además
+    /// lo enfoca. Ver [`text_input_view_full`].
+    SeedCampo(TextInputEvent),
+    SeedKey(KeyEvent),
+    SeedRandom,
+    CycleMundoBioma,
+    // Escenas — reparto y recorrido (filmografía).
+    SelectActor(usize),
+    AddActor,
+    RemoveActor,
+    CycleActorSere,
+    SelectKey(usize),
+    AddKey,
+    RemoveKey,
+    SetKeyPos(bool, f32), // true=gx, false=gz
+    SetKeyTime(f32),
+    CycleKeyClip,
+    PlaceKeyAt(f32, f32), // click en el terreno → mueve la clave seleccionada
+    // Escenas.
+    CycleSceneMundo,
+    SetSceneDur(f32),
+    TogglePlay,
+    Scrub(f32),
+    ToggleSceneCam,
+    AddShot,
+    RemoveShot,
+    ExportVideo,
+    ExportDone(Result<String, String>),
+    // Simulación de la ley Fluir (agua).
+    ToggleSim,
+    // Cámara.
+    Orbit(f32, f32),
+    Zoom(f32),
+    // IA.
+    /// Evento de mouse del campo de la IA (click/arrastre). El `Press` además
+    /// lo enfoca. Ver [`text_input_view_full`].
+    AiCampo(TextInputEvent),
+    AiKey(KeyEvent),
+    AiGenerate,
+    AiBioma(Bioma),
+    AiSere(CharSpec),
+    AiScene(SceneSpec),
+    // Persistencia.
+    Save,
+    Load,
+    // Archivos: ruta editable + abrir / guardar-como / combinar.
+    /// Evento de mouse del campo de ruta (click/arrastre). El `Press` además lo
+    /// enfoca. Ver [`text_input_view_full`].
+    FileCampo(TextInputEvent),
+    FileKey(KeyEvent),
+    Abrir,
+    GuardarComo,
+    Combinar,
+    /// Cargar un **mapa real** (GeoJSON del visor, +`.pgm` hermano opcional) como
+    /// mundo voxel del preview. Ruta = campo de archivo. Ver [`mapa_import`].
+    MundoDesdeMapa,
+    /// Volver del mundo-desde-mapa al mundo procedural del bioma.
+    QuitarMapa,
+    /// **Ser desde foto** (capa 3): la imagen del campo de archivo REGULA los rasgos
+    /// (piel/ropa) de un personaje ESTILIZADO del kit — no se voxeliza literal (eso da el
+    /// valle). Recorte de persona por u2net (daemon `pixel-verbo`). Ver [`rostro`].
+    SerDesdeFoto,
+    // Historia (DAG): versionar el proyecto y ramificar alternativas.
+    Versionar,
+    Ramificar,
+    /// Navegar: checkout de una versión (por su hash) → carga su proyecto.
+    IrAVersion([u8; 32]),
+    // Juego: entrar a la escena y moverse en primera persona.
+    EntrarSalir,
+    MoverJuego(EjeJuego, bool),
+    Saltar(bool),
+    AlternarVuelo,
+    RerollSemilla,
+    /// Dictar un suceso donde está parado el jugador.
+    DictarSuceso(TipoSuceso),
+    // Reloj.
+    Tick,
+}
+
+/// Ejes de movimiento en modo JUEGO (WASD + subir/bajar en vuelo).
+#[derive(Clone, Copy)]
+enum EjeJuego {
+    Fwd,
+    Back,
+    Left,
+    Right,
+    Arriba,
+    Abajo,
+}
+
+/// Snapshot de las teclas de movimiento pulsadas — lo lee el paso de física del
+/// canvas cada frame (como el `Input` de llimphi-voxel-app).
+#[derive(Clone, Copy, Default)]
+struct InputJuego {
+    fwd: bool,
+    back: bool,
+    left: bool,
+    right: bool,
+    arriba: bool,
+    abajo: bool,
+    salto: bool,
+}
+
+struct Model {
+    theme: Theme,
+    project: Project,
+    /// Nivel activo.
+    level: Level,
+    /// Item seleccionado (id) por nivel.
+    sel: [u64; 7],
+    /// Pestaña de herramientas activa (rail derecho).
+    tool_tab: usize,
+    /// Generación: se incrementa en cada edición para regenerar el preview.
+    gen: u64,
+    /// Cámara de órbita.
+    yaw: f32,
+    pitch: f32,
+    dist: f32,
+    /// Preview perezoso (se construye en la 1ª pintada GPU).
+    preview: Arc<Mutex<Option<WorldPreview>>>,
+    /// **Mundo desde mapa real** (nahual-geo-voxel): si está cargado, el preview de
+    /// Mundos usa ESTE grid en vez del procedural del bioma. `Arc` para clonarlo
+    /// barato cada frame de `view`. Se limpia con «quitar mapa».
+    mapa: Option<Arc<VoxelGrid>>,
+    /// Mensaje de estado.
+    status: String,
+    /// Campo de renombrado + foco.
+    name_input: TextInputState,
+    name_focused: bool,
+    /// Campo de semilla (mundos) + foco.
+    seed_input: TextInputState,
+    seed_focused: bool,
+    /// Campo de la IA + foco + "generando".
+    ai_input: TextInputState,
+    ai_focused: bool,
+    ai_busy: bool,
+    /// Ruta de archivo para abrir/guardar-como/combinar + foco.
+    file_input: TextInputState,
+    file_focused: bool,
+    /// La HISTORIA: DAG de versiones y alternativas del proyecto (el cimiento).
+    historia: Historia,
+    /// Modo JUEGO: entrar a la escena y moverse en primera persona.
+    jugando: bool,
+    /// Estado del jugador (compartido: lo avanza el canvas GPU cada frame).
+    jugador: Arc<Mutex<Player>>,
+    /// Teclas de movimiento pulsadas.
+    input_juego: InputJuego,
+    /// Vuelo libre (creativo) vs caminar con gravedad.
+    volar: bool,
+    /// Pedido de reposar al jugador al entrar a la escena.
+    respawn_jugador: Arc<Mutex<bool>>,
+    /// Reproducción de escenas.
+    time: f32,
+    playing: bool,
+    script_cam: bool,
+    exporting: bool,
+    /// Simulación de agua (ley Fluir) corriendo en el preview de mundo/bioma.
+    simulating: bool,
+    /// Estado del andar que se edita/previsualiza en Seres (0=quieto,1=caminar,2=correr).
+    andar_estado: usize,
+    /// Manada viva (conducta) corriendo en el preview de Seres.
+    manada: bool,
+    /// Reparto: actor y clave (waypoint) seleccionados al dirigir una escena.
+    actor_sel: usize,
+    key_sel: usize,
+    /// Semilla del random de mundos (LCG; no hay `Math.random`).
+    rng: u32,
+    /// Estado del **sidebar unificado IZQUIERDO** (widget `rag-sidebar`): el
+    /// selector de **niveles** (Leyes…Escenas). Selector **fijo** — un diente por
+    /// nivel, el abierto sigue a [`Model::level`] (nunca colapsa). Los ejes de
+    /// disposición, el buscador y el ancho del panel los reduce `RagSidebarState`.
+    sidebar_left: RagSidebarState,
+    /// Estado del **sidebar unificado DERECHO** (widget `rag-sidebar`): el selector
+    /// de **herramientas** del nivel. Selector **fijo** — un diente por tool, el
+    /// abierto sigue a [`Model::tool_tab`].
+    sidebar_right: RagSidebarState,
+    /// Laboratorio de la ley `Ecuacion` seleccionada (nivel Leyes). Perezoso.
+    lab: Option<LawLab>,
+    /// Generación estructural de la ley en edición: bump al cambiar campos/fórmulas
+    /// (para reconstruir el laboratorio, sin resetear al tocar sólo parámetros).
+    lab_gen: u64,
+    /// Edición de una fórmula: buffer compartido + foco + campo objetivo.
+    formula_input: TextInputState,
+    formula_focused: bool,
+    formula_target: usize,
+    /// Edición de la fórmula de **peso de un impulso** (nivel Seres › Conducta): buffer
+    /// propio + foco + índice del impulso objetivo (separado del de Leyes).
+    cond_formula_input: TextInputState,
+    cond_formula_focused: bool,
+    cond_formula_target: usize,
+    /// Nivel Leyes: modo de la vista central — `false` laboratorio (heatmap),
+    /// `true` grafo de nodos (la segunda superficie de autoría).
+    leyes_node_mode: bool,
+    /// Grafo de nodos de la ley (derivado de las fórmulas; estado de UI).
+    eq_graph: Option<EqGraph>,
+    /// `lab_gen` con el que se armó el grafo (para saber si el texto cambió afuera).
+    eq_graph_gen: u64,
+    /// Portapapeles del sistema para copiar/cortar/pegar en los campos.
+    clipboard: SystemClipboard,
+    /// Editor de interiores: mueble «pincel» y su orientación al colocar.
+    mueble_brush: Mueble,
+    mueble_facing: u8,
+    /// Editor de casas: preset de tipo de pueblo a aplicar sobre el bioma.
+    pueblo_brush: PuebloTipo,
+}
+
+impl Model {
+    /// Id del item seleccionado en el nivel activo (0 = ninguno).
+    fn selected(&self) -> u64 {
+        self.sel[self.level.index()]
+    }
+    fn set_selected(&mut self, id: u64) {
+        let i = self.level.index();
+        self.sel[i] = id;
+    }
+
+    /// Los items `(id, nombre)` del nivel activo, en orden.
+    fn items(&self) -> Vec<(u64, String)> {
+        match self.level {
+            Level::Leyes => self.project.leyes.iter().map(|x| (x.id, x.name.clone())).collect(),
+            Level::Materiales => self.project.materiales.iter().map(|x| (x.id, x.name.clone())).collect(),
+            Level::Seres => self.project.seres.iter().map(|x| (x.id, x.name.clone())).collect(),
+            Level::Biomas => self.project.biomas.iter().map(|x| (x.id, x.name.clone())).collect(),
+            Level::Mundos => self.project.mundos.iter().map(|x| (x.id, x.name.clone())).collect(),
+            Level::Escenas => self.project.escenas.iter().map(|x| (x.id, x.name.clone())).collect(),
+            Level::Interiores => self.project.interiores.iter().map(|x| (x.id, x.name.clone())).collect(),
+        }
+    }
+
+    /// Nombre del item seleccionado (para cargar el campo de renombrar).
+    fn selected_name(&self) -> String {
+        let id = self.selected();
+        self.items()
+            .into_iter()
+            .find(|(i, _)| *i == id)
+            .map(|(_, n)| n)
+            .unwrap_or_default()
+    }
+
+    /// MundoRender que el centro previsualiza (según nivel/selección), con un
+    /// fallback verde si no hay artefacto válido.
+    fn preview_render(&self) -> MundoRender {
+        let pick = match self.level {
+            Level::Mundos | Level::Escenas => {
+                let mundo = if self.level == Level::Mundos {
+                    self.selected()
+                } else {
+                    self.project.escenas.iter().find(|e| e.id == self.selected()).map(|e| e.mundo).unwrap_or(0)
+                };
+                self.project.render_mundo(mundo)
+            }
+            Level::Biomas => self.project.render_bioma(self.selected()),
+            // Seres: parados sobre el primer bioma disponible.
+            Level::Seres => self.project.biomas.first().and_then(|b| self.project.render_bioma(b.id)),
+            _ => None,
+        };
+        pick.unwrap_or_else(fallback_render)
+    }
+}
+
+/// MundoRender por defecto (pradera neutra) cuando no hay artefacto que mostrar.
+fn fallback_render() -> MundoRender {
+    let bioma = Bioma {
+        id: 0,
+        name: String::new(),
+        base: 0.22,
+        dune: 0.10,
+        relief: 0.5,
+        mountains: 0.4,
+        water_level: 0.30,
+        rivers: 0.20,
+        peak_at: 0.80,
+        ground: 0,
+        cliff: 0,
+        peak: None,
+        objetos: vec![],
+        minerales: vec![],
+        densidad_urbana: 0.4,
+        casas: vec![],
+        fauna: vec![],
+        seres: vec![],
+    };
+    let palette = BiomaPalette::flat(Material::Grass.color(), Material::Grass.grain());
+    MundoRender { bioma, seed: 1, palette }
+}
+
+/// Distancia de órbita inicial/clamp en función del lado del mundo.
+fn default_dist() -> f32 {
+    PREVIEW_DIM_XZ as f32 * 1.6
+}
+
+struct Studio;
+
+impl App for Studio {
+    type Model = Model;
+    type Msg = Msg;
+
+    fn title() -> &'static str {
+        "llimphi-voxel-studio — creador de mundos"
+    }
+    fn initial_size() -> (u32, u32) {
+        (1180, 760)
+    }
+
+    fn init(handle: &Handle<Msg>) -> Model {
+        handle.spawn_periodic(Duration::from_millis(33), || Msg::Tick);
+        demo_model()
+    }
+
+    fn on_wheel(_m: &Model, delta: WheelDelta, _c: (f32, f32), _mods: Modifiers) -> Option<Msg> {
+        Some(Msg::Zoom(delta.y))
+    }
+
+    fn on_key(model: &Model, ev: &KeyEvent) -> Option<Msg> {
+        // En modo JUEGO el teclado maneja el movimiento, no los campos.
+        if model.jugando {
+            return juego_on_key(ev);
+        }
+        // Buscador de un sidebar unificado con foco: las teclas van al filtro
+        // (Esc/Enter lo sueltan; Backspace borra; el texto tipeado se inserta).
+        if model.sidebar_left.search_focused {
+            if ev.state != KeyState::Pressed {
+                return None;
+            }
+            return sidebar_search_key(ev, &model.sidebar_left.search, Msg::SidebarLeft);
+        }
+        if model.sidebar_right.search_focused {
+            if ev.state != KeyState::Pressed {
+                return None;
+            }
+            return sidebar_search_key(ev, &model.sidebar_right.search, Msg::SidebarRight);
+        }
+        // El teclado alimenta el campo enfocado (renombrar / semilla / IA).
+        if model.name_focused {
+            return Some(Msg::RenameKey(ev.clone()));
+        }
+        if model.formula_focused {
+            return Some(Msg::FormulaKey(ev.clone()));
+        }
+        if model.cond_formula_focused {
+            return Some(Msg::CondFormulaKey(ev.clone()));
+        }
+        if model.seed_focused {
+            return Some(Msg::SeedKey(ev.clone()));
+        }
+        if model.file_focused {
+            return Some(Msg::FileKey(ev.clone()));
+        }
+        if model.ai_focused {
+            if ev.state == KeyState::Pressed && matches!(&ev.key, Key::Named(NamedKey::Enter)) {
+                return Some(Msg::AiGenerate);
+            }
+            return Some(Msg::AiKey(ev.clone()));
+        }
+        None
+    }
+
+    fn update(mut model: Model, msg: Msg, handle: &Handle<Msg>) -> Model {
+        match msg {
+            Msg::SelectLevel(l) => {
+                model.level = l;
+                model.tool_tab = 0;
+                model.name_focused = false;
+                model.seed_focused = false;
+                model.formula_focused = false;
+                model.cond_formula_focused = false;
+                model.gen += 1;
+                // Selector fijo: el diente del nivel activo queda abierto; el de
+                // herramientas vuelve al primer tool. Se limpia el filtro de ambos.
+                pin_sidebars(&mut model);
+                model.sidebar_left.search.clear();
+                model.sidebar_right.search.clear();
+                sync_inputs(&mut model);
+                if model.level == Level::Mundos {
+                    refrescar_mapa(&mut model); // al entrar a Mundos, refleja su mapa (o no)
+                }
+            }
+            Msg::SelectItem(id) => {
+                model.set_selected(id);
+                model.time = 0.0;
+                model.cond_formula_focused = false;
+                model.gen += 1;
+                sync_inputs(&mut model);
+                if model.level == Level::Mundos {
+                    refrescar_mapa(&mut model); // el mundo elegido puede venir de un mapa
+                }
+            }
+            Msg::SelectTool(i) => {
+                model.tool_tab = i;
+                model.cond_formula_focused = false;
+                pin_sidebars(&mut model);
+                model.sidebar_right.search.clear();
+            }
+            Msg::SidebarLeft(sm) => {
+                // Selector fijo de niveles: tras reducir ejes/buscador/resize, el
+                // diente del nivel activo sigue abierto (nunca colapsa).
+                model.sidebar_left.update(sm);
+                pin_sidebars(&mut model);
+            }
+            Msg::SidebarRight(sm) => {
+                model.sidebar_right.update(sm);
+                pin_sidebars(&mut model);
+            }
+            Msg::NewItem => {
+                let id = new_item(&mut model);
+                model.set_selected(id);
+                model.gen += 1;
+                model.status = format!("nuevo en {}", model.level.label());
+                sync_inputs(&mut model);
+            }
+            Msg::DupItem => {
+                if let Some(id) = duplicate_item(&mut model) {
+                    model.set_selected(id);
+                    model.gen += 1;
+                    model.status = "duplicado".into();
+                    sync_inputs(&mut model);
+                }
+            }
+            Msg::DelItem => {
+                delete_selected(&mut model);
+                // Reseleccionar el primero que quede.
+                let first = model.items().first().map(|(i, _)| *i).unwrap_or(0);
+                model.set_selected(first);
+                model.gen += 1;
+                model.status = "borrado".into();
+                sync_inputs(&mut model);
+            }
+            Msg::RenameCampo(ev) => {
+                // El press/click enfoca este campo (y desenfoca los demás); el
+                // arrastre extiende la selección.
+                if matches!(ev, TextInputEvent::Press(_)) {
+                    model.name_focused = true;
+                    model.seed_focused = false;
+                    model.ai_focused = false;
+                }
+                model.name_input.handle(ev, &mut model.clipboard);
+                let txt = model.name_input.text();
+                set_selected_name(&mut model, txt);
+            }
+            Msg::RenameKey(ev) => {
+                // `handle` cubre escribir, copiar/cortar/pegar y acentos.
+                model.name_input.handle(TextInputEvent::Key(ev), &mut model.clipboard);
+                let txt = model.name_input.text();
+                set_selected_name(&mut model, txt);
+            }
+            Msg::CycleLeyKind => {
+                if let Some(l) = model.project.leyes.iter_mut().find(|x| x.id == model.sel[0]) {
+                    l.kind = l.kind.next();
+                }
+            }
+            Msg::SetLeyParam(i, v) => {
+                if let Some(l) = model.project.leyes.iter_mut().find(|x| x.id == model.sel[0]) {
+                    l.kind.set_param(i, v);
+                }
+            }
+            Msg::LeyPreset => {
+                // Cicla la ley `Ecuacion` seleccionada por un catálogo de leyes de
+                // fábrica (autoradas, editables). Cambio estructural → reconstruye el lab.
+                if let Some(l) = sel_ley_mut(&mut model) {
+                    if matches!(l.kind, LeyKind::Ecuacion { .. }) {
+                        l.kind = next_preset(&l.kind);
+                        model.formula_focused = false;
+                        model.lab_gen += 1;
+                    }
+                }
+            }
+            Msg::SetEcuParam(i, v) => {
+                if let Some(l) = sel_ley_mut(&mut model) {
+                    l.kind.set_ecuacion_param(i, v);
+                }
+            }
+            Msg::FormulaFocus(i) => {
+                let src = sel_ley(&model)
+                    .and_then(|l| match &l.kind {
+                        LeyKind::Ecuacion { fuentes, .. } => fuentes.get(i).cloned(),
+                        _ => None,
+                    })
+                    .unwrap_or_default();
+                model.formula_input.set_text(src);
+                model.formula_focused = true;
+                model.formula_target = i;
+                model.name_focused = false;
+                model.seed_focused = false;
+                model.ai_focused = false;
+            }
+            Msg::FormulaCampo(ev) => {
+                // El campo sólo se dibuja mientras se edita esa fórmula, así que
+                // el mouse (click→caret, arrastre→selección) va directo al buffer.
+                model.formula_input.handle(ev, &mut model.clipboard);
+            }
+            Msg::FormulaKey(ev) => {
+                // Enter confirma (desenfoca); el resto edita el buffer y se escribe en vivo.
+                if ev.state == KeyState::Pressed && matches!(&ev.key, Key::Named(NamedKey::Enter)) {
+                    model.formula_focused = false;
+                } else {
+                    // `handle` cubre copiar/cortar/pegar y acentos.
+                    model.formula_input.handle(TextInputEvent::Key(ev), &mut model.clipboard);
+                    let txt = model.formula_input.text();
+                    let target = model.formula_target;
+                    if let Some(l) = sel_ley_mut(&mut model) {
+                        if let LeyKind::Ecuacion { fuentes, .. } = &mut l.kind {
+                            if let Some(f) = fuentes.get_mut(target) {
+                                *f = txt;
+                            }
+                        }
+                    }
+                    model.lab_gen += 1;
+                }
+            }
+            Msg::AddCampo => {
+                if let Some(l) = sel_ley_mut(&mut model) {
+                    if let LeyKind::Ecuacion { campos, fuentes, .. } = &mut l.kind {
+                        let name = format!("c{}", campos.len());
+                        campos.push(FieldDef::new(name, 0.0, 0.0, 1.0));
+                        fuentes.push("0".to_string());
+                        model.lab_gen += 1;
+                    }
+                }
+            }
+            Msg::RemoveCampo => {
+                if let Some(l) = sel_ley_mut(&mut model) {
+                    if let LeyKind::Ecuacion { campos, fuentes, .. } = &mut l.kind {
+                        if campos.len() > 1 {
+                            campos.pop();
+                            fuentes.pop();
+                            model.formula_focused = false;
+                            model.lab_gen += 1;
+                        }
+                    }
+                }
+            }
+            Msg::AddEcuParam => {
+                if let Some(l) = sel_ley_mut(&mut model) {
+                    if let LeyKind::Ecuacion { params, .. } = &mut l.kind {
+                        let name = format!("p{}", params.len());
+                        params.push(ParamDef::new(name, 0.1, 0.0, 1.0));
+                        model.lab_gen += 1;
+                    }
+                }
+            }
+            Msg::RemoveEcuParam => {
+                if let Some(l) = sel_ley_mut(&mut model) {
+                    if let LeyKind::Ecuacion { params, .. } = &mut l.kind {
+                        params.pop();
+                        model.lab_gen += 1;
+                    }
+                }
+            }
+            Msg::CycleLabField => {
+                if let Some(lab) = &mut model.lab {
+                    let n = lab.engine.fields().len().max(1);
+                    lab.vis = (lab.vis + 1) % n;
+                }
+            }
+            Msg::ReseedLab => {
+                if let Some(lab) = &mut model.lab {
+                    lab.reseed();
+                }
+            }
+            Msg::ToggleLeyesView => {
+                model.leyes_node_mode = !model.leyes_node_mode;
+                model.formula_focused = false;
+                if model.leyes_node_mode {
+                    rebuild_eq_graph(&mut model);
+                } else {
+                    model.eq_graph = None;
+                }
+            }
+            Msg::GraphDrag(id, dx, dy) => {
+                if let Some(g) = &mut model.eq_graph {
+                    g.drag(id, dx, dy); // layout puro: no recompila
+                }
+            }
+            Msg::GraphConnect(from, _fp, to, tp) => {
+                let ok = model.eq_graph.as_mut().map(|g| g.connect(from, to, tp)).unwrap_or(false);
+                if ok {
+                    sync_graph_to_fuentes(&mut model);
+                }
+            }
+            Msg::GraphAddNode(op) => {
+                if let Some(g) = &mut model.eq_graph {
+                    g.add(op, 40.0, 40.0); // suelto; entra en la fórmula al conectarlo
+                }
+            }
+            Msg::GraphDeleteNode(id) => {
+                let had = model.eq_graph.is_some();
+                if let Some(g) = &mut model.eq_graph {
+                    g.delete(id);
+                }
+                if had {
+                    sync_graph_to_fuentes(&mut model);
+                }
+            }
+            Msg::CycleMatRole => {
+                if let Some(m) = sel_material_mut(&mut model) {
+                    m.role = match m.role {
+                        MatRole::Terreno => MatRole::Objeto(Forma::Columnar),
+                        MatRole::Objeto(_) => MatRole::Terreno,
+                    };
+                    model.gen += 1;
+                }
+            }
+            Msg::SetMatColor(ch, v) => {
+                if let Some(m) = sel_material_mut(&mut model) {
+                    let mut c = m.color.unwrap_or([0.6, 0.6, 0.6]);
+                    if ch < 3 {
+                        c[ch] = v.clamp(0.0, 1.0);
+                    }
+                    m.color = Some(c);
+                    model.gen += 1;
+                }
+            }
+            Msg::SetMatGrain(v) => {
+                if let Some(m) = sel_material_mut(&mut model) {
+                    m.grain = Some(v.clamp(0.0, 1.0));
+                    model.gen += 1;
+                }
+            }
+            Msg::SetMatBrillo(v) => {
+                if let Some(m) = sel_material_mut(&mut model) {
+                    m.brillo = Some(v.clamp(0.0, 1.0));
+                    model.gen += 1;
+                }
+            }
+            Msg::SetMatRugosidad(v) => {
+                if let Some(m) = sel_material_mut(&mut model) {
+                    m.rugosidad = Some(v.clamp(0.0, 1.5));
+                    // No cambia el grid (look de shader) → sin bump de gen.
+                }
+            }
+            Msg::SetMatBisel(v) => {
+                if let Some(m) = sel_material_mut(&mut model) {
+                    m.bisel = Some(v.clamp(0.0, 1.0));
+                }
+            }
+            Msg::CycleMatParent => {
+                let id = model.sel[1];
+                // Lista de candidatos a padre (todos menos sí mismo).
+                let cands: Vec<u64> = model.project.materiales.iter().map(|m| m.id).filter(|&i| i != id).collect();
+                if let Some(m) = sel_material_mut(&mut model) {
+                    m.parent = next_option(m.parent, &cands);
+                    model.gen += 1;
+                }
+            }
+            Msg::AddMatLey => {
+                let first_ley = model.project.leyes.first().map(|l| l.id);
+                if let (Some(ley), Some(m)) = (first_ley, sel_material_mut(&mut model)) {
+                    m.leyes.push(LeyUso { ley, params: vec![] });
+                }
+            }
+            Msg::RemoveMatLey => {
+                if let Some(m) = sel_material_mut(&mut model) {
+                    m.leyes.pop();
+                }
+            }
+            Msg::CycleMatLey(i) => {
+                // Cicla a qué ley del proyecto apunta la ley `i` del material (para
+                // poder señalar una ley Ecuacion y que corra sobre el material).
+                let ids: Vec<u64> = model.project.leyes.iter().map(|l| l.id).collect();
+                if !ids.is_empty() {
+                    if let Some(m) = sel_material_mut(&mut model) {
+                        if let Some(u) = m.leyes.get_mut(i) {
+                            let pos = ids.iter().position(|&id| id == u.ley).unwrap_or(0);
+                            u.ley = ids[(pos + 1) % ids.len()];
+                            u.params.clear();
+                        }
+                    }
+                    model.gen += 1;
+                }
+            }
+            Msg::CycleSereAge => {
+                if let Some(c) = sel_sere_mut(&mut model) {
+                    c.age = c.age.next();
+                }
+            }
+            Msg::CycleSereCuerpo => {
+                if let Some(c) = sel_sere_mut(&mut model) {
+                    c.cycle_cuerpo();
+                    model.gen += 1;
+                }
+            }
+            Msg::SetSereColor(part, ch, v) => {
+                if let Some(c) = sel_sere_mut(&mut model) {
+                    let rgb = match part {
+                        Part::Skin => &mut c.skin,
+                        Part::Shirt => &mut c.shirt,
+                        Part::Pants => &mut c.pants,
+                    };
+                    if ch < 3 {
+                        rgb[ch] = v.clamp(0.0, 1.0);
+                    }
+                }
+            }
+            Msg::CycleAndarEstado => {
+                model.andar_estado = (model.andar_estado + 1) % 3;
+            }
+            Msg::SetAndarCadencia(v) => {
+                let est = model.andar_estado;
+                if let Some(c) = sel_sere_mut(&mut model) {
+                    if let Some(m) = &mut c.cuerpo {
+                        m.andares.estado_mut(est).cadencia = v.clamp(0.0, 18.0);
+                    }
+                }
+            }
+            Msg::SetAndarAmplitud(seg, v) => {
+                let est = model.andar_estado;
+                if let Some(c) = sel_sere_mut(&mut model) {
+                    if let Some(m) = &mut c.cuerpo {
+                        if let Some(o) = m.andares.estado_mut(est).osc.get_mut(seg) {
+                            o.amplitud = v.clamp(0.0, 1.5);
+                        }
+                    }
+                }
+            }
+            Msg::SetConducta(i, v) => {
+                if let Some(c) = sel_sere_mut(&mut model) {
+                    c.conducta.set(i, v);
+                }
+            }
+            Msg::CondAddImpulso => {
+                if let Some(c) = sel_sere_mut(&mut model) {
+                    materializar_impulsos(c);
+                    c.conducta.impulsos.push(Impulso::new(Primitiva::Deambular, "1"));
+                }
+            }
+            Msg::CondRemoveImpulso => {
+                if let Some(c) = sel_sere_mut(&mut model) {
+                    materializar_impulsos(c);
+                    if c.conducta.impulsos.len() > 1 {
+                        c.conducta.impulsos.pop();
+                    }
+                    model.cond_formula_focused = false;
+                }
+            }
+            Msg::CondCycleImpulso(i) => {
+                if let Some(c) = sel_sere_mut(&mut model) {
+                    materializar_impulsos(c);
+                    if let Some(imp) = c.conducta.impulsos.get_mut(i) {
+                        imp.primitiva = imp.primitiva.next();
+                    }
+                }
+            }
+            Msg::CondFormulaFocus(i) => {
+                let src = sel_sere(&model)
+                    .map(|c| c.conducta.impulsos_efectivos())
+                    .and_then(|imps| imps.get(i).map(|imp| imp.peso.clone()))
+                    .unwrap_or_default();
+                model.cond_formula_input.set_text(src);
+                model.cond_formula_focused = true;
+                model.cond_formula_target = i;
+                model.formula_focused = false;
+                model.name_focused = false;
+                model.seed_focused = false;
+                model.ai_focused = false;
+            }
+            Msg::CondFormulaCampo(ev) => {
+                // El campo sólo se dibuja mientras se edita ese peso: el mouse va
+                // directo al buffer (click→caret, arrastre→selección).
+                model.cond_formula_input.handle(ev, &mut model.clipboard);
+            }
+            Msg::CondFormulaKey(ev) => {
+                if ev.state == KeyState::Pressed && matches!(&ev.key, Key::Named(NamedKey::Enter)) {
+                    model.cond_formula_focused = false;
+                } else {
+                    model.cond_formula_input.handle(TextInputEvent::Key(ev), &mut model.clipboard);
+                    let txt = model.cond_formula_input.text();
+                    let target = model.cond_formula_target;
+                    if let Some(c) = sel_sere_mut(&mut model) {
+                        materializar_impulsos(c);
+                        if let Some(imp) = c.conducta.impulsos.get_mut(target) {
+                            imp.peso = txt;
+                        }
+                    }
+                }
+            }
+            Msg::ToggleManada => {
+                model.manada = !model.manada;
+                model.gen += 1; // repone el terreno y (re)inicia/limpia la manada
+                model.status = if model.manada { "manada viva".into() } else { "manada quieta".into() };
+            }
+            Msg::SetBiomaField(f, v) => {
+                if let Some(b) = sel_bioma_mut(&mut model) {
+                    match f {
+                        BiomaField::Base => b.base = v.clamp(0.0, 0.9),
+                        BiomaField::Dune => b.dune = v.clamp(0.0, 0.4),
+                        BiomaField::Relief => b.relief = v.clamp(0.0, 1.0),
+                        BiomaField::Mountains => b.mountains = v.clamp(0.0, 1.0),
+                        BiomaField::Water => b.water_level = v.clamp(0.0, 0.9),
+                        BiomaField::Rivers => b.rivers = v.clamp(0.0, 1.0),
+                        BiomaField::PeakAt => b.peak_at = v.clamp(0.0, 1.0),
+                    }
+                    model.gen += 1;
+                }
+            }
+            Msg::CycleBiomaGround => {
+                let mats = terreno_ids(&model);
+                if let Some(b) = sel_bioma_mut(&mut model) {
+                    b.ground = next_in(&mats, b.ground);
+                    model.gen += 1;
+                }
+            }
+            Msg::CycleBiomaCliff => {
+                let mats = terreno_ids(&model);
+                if let Some(b) = sel_bioma_mut(&mut model) {
+                    b.cliff = next_in(&mats, b.cliff);
+                    model.gen += 1;
+                }
+            }
+            Msg::CycleBiomaPeak => {
+                let mats = terreno_ids(&model);
+                if let Some(b) = sel_bioma_mut(&mut model) {
+                    b.peak = next_option(b.peak, &mats);
+                    model.gen += 1;
+                }
+            }
+            Msg::AddBiomaObjeto => {
+                let obj = objeto_ids(&model);
+                if let (Some(&mat), Some(b)) = (obj.first(), sel_bioma_mut(&mut model)) {
+                    b.objetos.push(llimphi_voxel::ObjetoUso { material: mat, densidad: 0.01, forma: Forma::Columnar });
+                    model.gen += 1;
+                }
+            }
+            Msg::RemoveBiomaObjeto => {
+                if let Some(b) = sel_bioma_mut(&mut model) {
+                    b.objetos.pop();
+                    model.gen += 1;
+                }
+            }
+            Msg::SetObjetoDensidad(i, v) => {
+                if let Some(b) = sel_bioma_mut(&mut model) {
+                    if let Some(o) = b.objetos.get_mut(i) {
+                        o.densidad = v.clamp(0.0, 0.05);
+                    }
+                    model.gen += 1;
+                }
+            }
+            Msg::CycleObjetoForma(i) => {
+                if let Some(b) = sel_bioma_mut(&mut model) {
+                    if let Some(o) = b.objetos.get_mut(i) {
+                        o.forma = o.forma.next();
+                    }
+                    model.gen += 1;
+                }
+            }
+            Msg::CycleObjetoMaterial(i) => {
+                let ids = objeto_ids(&model);
+                if let Some(b) = sel_bioma_mut(&mut model) {
+                    if let Some(o) = b.objetos.get_mut(i) {
+                        if let Some(pos) = ids.iter().position(|&m| m == o.material) {
+                            o.material = ids[(pos + 1) % ids.len().max(1)];
+                        } else if let Some(&first) = ids.first() {
+                            o.material = first;
+                        }
+                    }
+                    model.gen += 1;
+                }
+            }
+            Msg::AddBiomaMineral => {
+                if let Some(b) = sel_bioma_mut(&mut model) {
+                    b.minerales.push(MineralUso::of(Mineral::Hierro));
+                    model.gen += 1;
+                }
+            }
+            Msg::RemoveBiomaMineral => {
+                if let Some(b) = sel_bioma_mut(&mut model) {
+                    b.minerales.pop();
+                    model.gen += 1;
+                }
+            }
+            Msg::CycleMineralTipo(i) => {
+                if let Some(b) = sel_bioma_mut(&mut model) {
+                    if let Some(mu) = b.minerales.get_mut(i) {
+                        let next = mu.mineral.next();
+                        mu.reset_to(next);
+                    }
+                    model.gen += 1;
+                }
+            }
+            Msg::CycleMineralAspecto(i) => {
+                if let Some(b) = sel_bioma_mut(&mut model) {
+                    if let Some(mu) = b.minerales.get_mut(i) {
+                        mu.aspecto = mu.aspecto.next();
+                    }
+                    model.gen += 1;
+                }
+            }
+            Msg::SetMineralAbundancia(i, v) => {
+                if let Some(b) = sel_bioma_mut(&mut model) {
+                    if let Some(mu) = b.minerales.get_mut(i) {
+                        mu.abundancia = v.clamp(0.0, 1.0);
+                    }
+                    model.gen += 1;
+                }
+            }
+            Msg::SetMineralProfMin(i, v) => {
+                if let Some(b) = sel_bioma_mut(&mut model) {
+                    if let Some(mu) = b.minerales.get_mut(i) {
+                        mu.prof_min = v.clamp(0.0, mu.prof_max);
+                    }
+                    model.gen += 1;
+                }
+            }
+            Msg::SetMineralProfMax(i, v) => {
+                if let Some(b) = sel_bioma_mut(&mut model) {
+                    if let Some(mu) = b.minerales.get_mut(i) {
+                        mu.prof_max = v.clamp(mu.prof_min, 1.0);
+                    }
+                    model.gen += 1;
+                }
+            }
+            Msg::SetMineralColor(i, ch, v) => {
+                if let Some(b) = sel_bioma_mut(&mut model) {
+                    if let Some(mu) = b.minerales.get_mut(i) {
+                        if let Some(c) = mu.color.get_mut(ch) {
+                            *c = (v.clamp(0.0, 1.0) * 255.0) as u8;
+                        }
+                    }
+                    model.gen += 1;
+                }
+            }
+            Msg::SetMineralDureza(i, v) => {
+                if let Some(b) = sel_bioma_mut(&mut model) {
+                    if let Some(mu) = b.minerales.get_mut(i) {
+                        mu.dureza = v.clamp(1.0, 10.0);
+                    }
+                    model.gen += 1;
+                }
+            }
+            Msg::SetMineralBrillo(i, v) => {
+                if let Some(b) = sel_bioma_mut(&mut model) {
+                    if let Some(mu) = b.minerales.get_mut(i) {
+                        mu.brillo = v.clamp(0.0, 1.0);
+                    }
+                    model.gen += 1;
+                }
+            }
+            Msg::AddBiomaCasa => {
+                if let Some(b) = sel_bioma_mut(&mut model) {
+                    b.casas.push(CasaUso { tipo: CasaTipo::Cabana, densidad: 0.25 });
+                    model.gen += 1;
+                }
+            }
+            Msg::RemoveBiomaCasa => {
+                if let Some(b) = sel_bioma_mut(&mut model) {
+                    b.casas.pop();
+                    model.gen += 1;
+                }
+            }
+            Msg::CycleCasaTipo(i) => {
+                if let Some(b) = sel_bioma_mut(&mut model) {
+                    if let Some(cu) = b.casas.get_mut(i) {
+                        cu.tipo = cu.tipo.next();
+                    }
+                    model.gen += 1;
+                }
+            }
+            Msg::SetCasaDensidad(i, v) => {
+                if let Some(b) = sel_bioma_mut(&mut model) {
+                    if let Some(cu) = b.casas.get_mut(i) {
+                        cu.densidad = v.clamp(0.0, 1.0);
+                    }
+                    model.gen += 1;
+                }
+            }
+            Msg::SetDensidadUrbana(v) => {
+                if let Some(b) = sel_bioma_mut(&mut model) {
+                    b.densidad_urbana = v.clamp(0.05, 0.95);
+                    model.gen += 1;
+                }
+            }
+            Msg::CyclePuebloTipo => {
+                model.pueblo_brush = model.pueblo_brush.next();
+                model.status = format!("preset de pueblo: {}", model.pueblo_brush.label());
+            }
+            Msg::AplicarPuebloTipo => {
+                let pt = model.pueblo_brush;
+                if let Some(b) = sel_bioma_mut(&mut model) {
+                    b.casas = pt.casas();
+                    b.densidad_urbana = pt.densidad();
+                    model.gen += 1;
+                    model.status = format!("aplicado preset {}", pt.label());
+                }
+            }
+            Msg::AddBiomaFauna => {
+                if let Some(b) = sel_bioma_mut(&mut model) {
+                    b.fauna.push(BichoUso { bicho: Bicho::Vaca, densidad: 0.3 });
+                    model.gen += 1;
+                }
+            }
+            Msg::RemoveBiomaFauna => {
+                if let Some(b) = sel_bioma_mut(&mut model) {
+                    b.fauna.pop();
+                    model.gen += 1;
+                }
+            }
+            Msg::CycleFaunaBicho(i) => {
+                if let Some(b) = sel_bioma_mut(&mut model) {
+                    if let Some(fu) = b.fauna.get_mut(i) {
+                        fu.bicho = fu.bicho.next();
+                    }
+                    model.gen += 1;
+                }
+            }
+            Msg::SetFaunaDensidad(i, v) => {
+                if let Some(b) = sel_bioma_mut(&mut model) {
+                    if let Some(fu) = b.fauna.get_mut(i) {
+                        fu.densidad = v.clamp(0.0, 1.0);
+                    }
+                    model.gen += 1;
+                }
+            }
+            Msg::CycleMuebleBrush => {
+                model.mueble_brush = model.mueble_brush.next();
+                model.status = format!("mueble: {}", model.mueble_brush.label());
+            }
+            Msg::CycleMuebleFacing => {
+                model.mueble_facing = (model.mueble_facing + 1) % 4;
+            }
+            Msg::PlaceMuebleAt(gx, gz) => {
+                let (mb, fc) = (model.mueble_brush, model.mueble_facing);
+                if let Some(it) = sel_interior_mut(&mut model) {
+                    it.colocar(mb, gx as u32, gz as u32, fc);
+                    model.gen += 1;
+                }
+            }
+            Msg::RemoveLastPieza => {
+                if let Some(it) = sel_interior_mut(&mut model) {
+                    it.piezas.pop();
+                    model.gen += 1;
+                }
+            }
+            Msg::ClearPiezas => {
+                if let Some(it) = sel_interior_mut(&mut model) {
+                    it.piezas.clear();
+                    model.gen += 1;
+                }
+            }
+            Msg::SetInteriorAncho(v) => {
+                if let Some(it) = sel_interior_mut(&mut model) {
+                    it.ancho = v.clamp(6.0, 60.0) as u32;
+                    model.gen += 1;
+                }
+            }
+            Msg::SetInteriorFondo(v) => {
+                if let Some(it) = sel_interior_mut(&mut model) {
+                    it.fondo = v.clamp(6.0, 60.0) as u32;
+                    model.gen += 1;
+                }
+            }
+            Msg::CycleInteriorPiso => {
+                if let Some(it) = sel_interior_mut(&mut model) {
+                    it.piso = it.piso.next();
+                    model.gen += 1;
+                }
+            }
+            Msg::CycleInteriorMuro => {
+                if let Some(it) = sel_interior_mut(&mut model) {
+                    it.muro = it.muro.next();
+                    model.gen += 1;
+                }
+            }
+            Msg::ToggleInteriorMuros => {
+                if let Some(it) = sel_interior_mut(&mut model) {
+                    it.muros = !it.muros;
+                    model.gen += 1;
+                }
+            }
+            Msg::ToggleInteriorVentanas => {
+                if let Some(it) = sel_interior_mut(&mut model) {
+                    it.ventanas = !it.ventanas;
+                    model.gen += 1;
+                }
+            }
+            Msg::CycleInteriorTecho => {
+                if let Some(it) = sel_interior_mut(&mut model) {
+                    it.techo = it.techo.next();
+                    model.gen += 1;
+                }
+            }
+            Msg::ToggleInteriorTecho => {
+                if let Some(it) = sel_interior_mut(&mut model) {
+                    it.con_techo = !it.con_techo;
+                    model.gen += 1;
+                }
+            }
+            Msg::AddBiomaSere => {
+                let sids = sere_ids(&model);
+                if let (Some(&sere), Some(b)) = (sids.first(), sel_bioma_mut(&mut model)) {
+                    b.seres.push(llimphi_voxel::SereUso { sere, probabilidad: 0.5 });
+                    model.gen += 1;
+                }
+            }
+            Msg::RemoveBiomaSere => {
+                if let Some(b) = sel_bioma_mut(&mut model) {
+                    b.seres.pop();
+                    model.gen += 1;
+                }
+            }
+            Msg::CycleBiomaSere(i) => {
+                let sids = sere_ids(&model);
+                if let Some(b) = sel_bioma_mut(&mut model) {
+                    if let Some(u) = b.seres.get_mut(i) {
+                        u.sere = next_in(&sids, u.sere);
+                    }
+                    model.gen += 1;
+                }
+            }
+            Msg::SetBiomaSereProb(i, v) => {
+                if let Some(b) = sel_bioma_mut(&mut model) {
+                    if let Some(u) = b.seres.get_mut(i) {
+                        u.probabilidad = v.clamp(0.0, 1.0);
+                    }
+                    model.gen += 1;
+                }
+            }
+            Msg::SeedCampo(ev) => {
+                if matches!(ev, TextInputEvent::Press(_)) {
+                    model.seed_focused = true;
+                    model.name_focused = false;
+                    model.ai_focused = false;
+                }
+                model.seed_input.handle(ev, &mut model.clipboard);
+                if let Ok(s) = model.seed_input.text().trim().parse::<u32>() {
+                    if let Some(m) = sel_mundo_mut(&mut model) {
+                        m.seed = s;
+                        model.gen += 1;
+                    }
+                }
+            }
+            Msg::SeedKey(ev) => {
+                model.seed_input.handle(TextInputEvent::Key(ev), &mut model.clipboard);
+                if let Ok(s) = model.seed_input.text().trim().parse::<u32>() {
+                    if let Some(m) = sel_mundo_mut(&mut model) {
+                        m.seed = s;
+                        model.gen += 1;
+                    }
+                }
+            }
+            Msg::SeedRandom => {
+                model.rng = model.rng.wrapping_mul(1664525).wrapping_add(1013904223);
+                let s = model.rng % 100_000;
+                if let Some(m) = sel_mundo_mut(&mut model) {
+                    m.seed = s;
+                }
+                model.seed_input.set_text(&s.to_string());
+                model.gen += 1;
+            }
+            Msg::CycleMundoBioma => {
+                let bids = bioma_ids(&model);
+                if let Some(m) = sel_mundo_mut(&mut model) {
+                    let cur = m.biomas.first().copied().unwrap_or(0);
+                    m.biomas = vec![next_in(&bids, cur)];
+                    model.gen += 1;
+                }
+            }
+            Msg::SelectActor(i) => {
+                model.actor_sel = i;
+                model.key_sel = 0;
+            }
+            Msg::AddActor => {
+                let dim = world_dim(PREVIEW_DIM_XZ);
+                let (cz, gx0, gx1) = (dim[2] as f32 * 0.5, dim[0] as f32 * 0.35, dim[0] as f32 * 0.65);
+                let dur = sel_scene(&model).map(|s| s.duration).unwrap_or(5.0);
+                if let Some(s) = sel_scene_mut(&mut model) {
+                    s.actors.push(ActorSpec {
+                        character: 0,
+                        keys: vec![
+                            ActorKeySpec { t: 0.0, gx: gx0, gz: cz, clip: Some(Clip::Walk), face: None },
+                            ActorKeySpec { t: dur, gx: gx1, gz: cz, clip: Some(Clip::Walk), face: None },
+                        ],
+                        frame_rate: None,
+                    });
+                    model.actor_sel = s.actors.len() - 1;
+                    model.key_sel = 0;
+                    model.gen += 1;
+                }
+            }
+            Msg::RemoveActor => {
+                let a = model.actor_sel;
+                if let Some(s) = sel_scene_mut(&mut model) {
+                    if s.actors.len() > 1 && a < s.actors.len() {
+                        s.actors.remove(a);
+                    }
+                }
+                model.actor_sel = model.actor_sel.saturating_sub(1);
+                model.key_sel = 0;
+                model.gen += 1;
+            }
+            Msg::CycleActorSere => {
+                let a = model.actor_sel;
+                let n = model.project.seres.len().max(1);
+                if let Some(s) = sel_scene_mut(&mut model) {
+                    if let Some(act) = s.actors.get_mut(a) {
+                        act.character = (act.character + 1) % n;
+                    }
+                    model.gen += 1;
+                }
+            }
+            Msg::SelectKey(i) => model.key_sel = i,
+            Msg::AddKey => {
+                let a = model.actor_sel;
+                let dur = sel_scene(&model).map(|s| s.duration).unwrap_or(5.0);
+                let dimx = world_dim(PREVIEW_DIM_XZ)[0] as f32;
+                if let Some(s) = sel_scene_mut(&mut model) {
+                    if let Some(act) = s.actors.get_mut(a) {
+                        let mut k = act.keys.last().cloned().unwrap_or(ActorKeySpec {
+                            t: 0.0,
+                            gx: dimx * 0.5,
+                            gz: dimx * 0.5,
+                            clip: Some(Clip::Walk),
+                            face: None,
+                        });
+                        k.gx = (k.gx + 12.0).min(dimx - 2.0); // nuevo waypoint adelante
+                        act.keys.push(k);
+                        respread(act, dur);
+                        model.key_sel = act.keys.len() - 1;
+                    }
+                    model.gen += 1;
+                }
+            }
+            Msg::RemoveKey => {
+                let (a, k) = (model.actor_sel, model.key_sel);
+                let dur = sel_scene(&model).map(|s| s.duration).unwrap_or(5.0);
+                if let Some(s) = sel_scene_mut(&mut model) {
+                    if let Some(act) = s.actors.get_mut(a) {
+                        if act.keys.len() > 2 && k < act.keys.len() {
+                            act.keys.remove(k);
+                            respread(act, dur);
+                        }
+                    }
+                    model.key_sel = model.key_sel.saturating_sub(1);
+                    model.gen += 1;
+                }
+            }
+            Msg::SetKeyPos(is_gx, v) => {
+                let (a, k) = (model.actor_sel, model.key_sel);
+                let lim = world_dim(PREVIEW_DIM_XZ)[0] as f32 - 1.0;
+                if let Some(s) = sel_scene_mut(&mut model) {
+                    if let Some(key) = s.actors.get_mut(a).and_then(|act| act.keys.get_mut(k)) {
+                        if is_gx {
+                            key.gx = v.clamp(1.0, lim);
+                        } else {
+                            key.gz = v.clamp(1.0, lim);
+                        }
+                    }
+                    model.gen += 1;
+                }
+            }
+            Msg::SetKeyTime(v) => {
+                let (a, k) = (model.actor_sel, model.key_sel);
+                let dur = sel_scene(&model).map(|s| s.duration).unwrap_or(5.0);
+                if let Some(s) = sel_scene_mut(&mut model) {
+                    if let Some(key) = s.actors.get_mut(a).and_then(|act| act.keys.get_mut(k)) {
+                        key.t = v.clamp(0.0, dur);
+                    }
+                    model.gen += 1;
+                }
+            }
+            Msg::CycleKeyClip => {
+                let (a, k) = (model.actor_sel, model.key_sel);
+                if let Some(s) = sel_scene_mut(&mut model) {
+                    if let Some(key) = s.actors.get_mut(a).and_then(|act| act.keys.get_mut(k)) {
+                        key.clip = Some(key.clip.unwrap_or(Clip::Idle).next());
+                    }
+                    model.gen += 1;
+                }
+            }
+            Msg::PlaceKeyAt(gx, gz) => {
+                let (a, k) = (model.actor_sel, model.key_sel);
+                if let Some(s) = sel_scene_mut(&mut model) {
+                    if let Some(key) = s.actors.get_mut(a).and_then(|act| act.keys.get_mut(k)) {
+                        key.gx = gx;
+                        key.gz = gz;
+                    }
+                    model.gen += 1;
+                }
+            }
+            Msg::CycleSceneMundo => {
+                let mids = mundo_ids(&model);
+                if let Some(s) = sel_scene_mut(&mut model) {
+                    s.mundo = next_in(&mids, s.mundo);
+                    model.gen += 1;
+                }
+            }
+            Msg::SetSceneDur(v) => {
+                if let Some(s) = sel_scene_mut(&mut model) {
+                    s.duration = v.clamp(1.0, 20.0);
+                }
+            }
+            Msg::TogglePlay => model.playing = !model.playing,
+            Msg::Scrub(v) => {
+                model.playing = false;
+                let dur = sel_scene(&model).map(|s| s.duration).unwrap_or(1.0);
+                model.time = v.clamp(0.0, dur);
+            }
+            Msg::ToggleSceneCam => model.script_cam = !model.script_cam,
+            Msg::AddShot => {
+                let t = model.time;
+                if let Some(s) = sel_scene_mut(&mut model) {
+                    let kind = ShotKind::ALL[s.shots.len() % ShotKind::ALL.len()];
+                    s.shots.push(ShotSpec { start: t, kind });
+                    s.shots.sort_by(|a, b| a.start.total_cmp(&b.start));
+                    model.status = format!("plano: {} @ {t:.1}s", kind.label());
+                }
+            }
+            Msg::RemoveShot => {
+                if let Some(s) = sel_scene_mut(&mut model) {
+                    s.shots.pop();
+                }
+            }
+            Msg::ExportVideo => {
+                if !model.exporting {
+                    if let Some(scene) = sel_scene(&model).cloned() {
+                        model.exporting = true;
+                        model.status = "exportando video… (puede tardar)".into();
+                        let project = model.project.clone();
+                        handle.spawn(move || Msg::ExportDone(render::export_scene(&project, &scene)));
+                    }
+                }
+            }
+            Msg::ExportDone(res) => {
+                model.exporting = false;
+                model.status = match res {
+                    Ok(p) => format!("video listo: {p}"),
+                    Err(e) => format!("export falló: {e}"),
+                };
+            }
+            Msg::ToggleSim => {
+                model.simulating = !model.simulating;
+                model.gen += 1; // repone terreno fresco y reinicia la sim limpia
+                model.status = match (model.level, model.simulating) {
+                    (Level::Leyes, true) => "corriendo la ley…".into(),
+                    (Level::Leyes, false) => "ley en pausa".into(),
+                    (_, true) => "simulando agua…".into(),
+                    (_, false) => "agua estática".into(),
+                };
+            }
+            Msg::Orbit(dx, dy) => {
+                model.yaw -= dx * 0.008;
+                let lim = std::f32::consts::FRAC_PI_2 - 0.05;
+                model.pitch = (model.pitch + dy * 0.008).clamp(-lim, lim);
+            }
+            Msg::Zoom(dy) => {
+                let f = (1.0 + dy * 0.1).clamp(0.5, 1.5);
+                let xz = PREVIEW_DIM_XZ as f32;
+                model.dist = (model.dist * f).clamp(xz * 0.6, xz * 3.0);
+            }
+            Msg::AiCampo(ev) => {
+                if matches!(ev, TextInputEvent::Press(_)) {
+                    model.ai_focused = true;
+                    model.name_focused = false;
+                    model.seed_focused = false;
+                }
+                model.ai_input.handle(ev, &mut model.clipboard);
+            }
+            Msg::AiKey(ev) => {
+                model.ai_input.handle(TextInputEvent::Key(ev), &mut model.clipboard);
+            }
+            Msg::AiGenerate => {
+                let prompt = model.ai_input.text();
+                if prompt.trim().is_empty() || model.ai_busy {
+                    return model;
+                }
+                model.ai_busy = true;
+                model.status = "generando con IA…".into();
+                match model.level {
+                    Level::Biomas | Level::Mundos => {
+                        let refs = MatRefs::from_project(&model.project);
+                        handle.spawn(move || Msg::AiBioma(ai::generate_bioma(&prompt, &refs)));
+                    }
+                    Level::Seres => {
+                        handle.spawn(move || Msg::AiSere(ai::generate_character(&prompt)));
+                    }
+                    Level::Escenas => {
+                        let mundo = model.project.mundos.first().map(|m| m.id).unwrap_or(0);
+                        let dim = world_dim(PREVIEW_DIM_XZ);
+                        handle.spawn(move || Msg::AiScene(ai::generate_scene(&prompt, mundo, dim)));
+                    }
+                    _ => {
+                        model.ai_busy = false;
+                        model.status = "la IA genera biomas, mundos, seres o escenas".into();
+                    }
+                }
+            }
+            Msg::AiBioma(mut b) => {
+                b.id = model.project.alloc_id();
+                let bid = b.id;
+                let name = b.name.clone();
+                model.project.biomas.push(b);
+                // En modo Mundos, envolver el bioma en un mundo nuevo.
+                if model.level == Level::Mundos {
+                    let id = model.project.alloc_id();
+                    model.project.mundos.push(Mundo { id, name: name.clone(), seed: 1337, biomas: vec![bid], mapa: None });
+                    model.set_selected(id);
+                } else {
+                    model.level = Level::Biomas;
+                    model.set_selected(bid);
+                }
+                model.ai_busy = false;
+                model.ai_input.set_text("");
+                model.gen += 1;
+                model.status = format!("generado: «{name}»");
+                sync_inputs(&mut model);
+            }
+            Msg::AiSere(mut c) => {
+                c.id = model.project.alloc_id();
+                let id = c.id;
+                let name = c.name.clone();
+                model.project.seres.push(c);
+                model.level = Level::Seres;
+                model.set_selected(id);
+                model.ai_busy = false;
+                model.ai_input.set_text("");
+                model.status = format!("ser generado: «{name}»");
+                sync_inputs(&mut model);
+            }
+            Msg::AiScene(mut s) => {
+                s.id = model.project.alloc_id();
+                let id = s.id;
+                model.project.escenas.push(s);
+                model.level = Level::Escenas;
+                model.set_selected(id);
+                model.time = 0.0;
+                model.playing = true;
+                model.ai_busy = false;
+                model.ai_input.set_text("");
+                model.gen += 1;
+                model.status = "escena generada".into();
+                sync_inputs(&mut model);
+            }
+            Msg::Save => match save_project(&model.project) {
+                Ok(_) => model.status = format!("guardado en {PROJECT_PATH}"),
+                Err(e) => model.status = format!("error al guardar: {e}"),
+            },
+            Msg::Load => match load_project() {
+                Ok(p) => {
+                    model.project = p;
+                    model.gen += 1;
+                    reselect_all(&mut model);
+                    model.status = format!("cargado de {PROJECT_PATH}");
+                    sync_inputs(&mut model);
+                }
+                Err(e) => model.status = format!("error al cargar: {e}"),
+            },
+            Msg::FileCampo(ev) => {
+                if matches!(ev, TextInputEvent::Press(_)) {
+                    model.file_focused = true;
+                    model.name_focused = false;
+                    model.seed_focused = false;
+                    model.ai_focused = false;
+                    model.formula_focused = false;
+                    model.cond_formula_focused = false;
+                }
+                model.file_input.handle(ev, &mut model.clipboard);
+            }
+            Msg::FileKey(ev) => {
+                model.file_input.handle(TextInputEvent::Key(ev), &mut model.clipboard);
+            }
+            Msg::GuardarComo => {
+                let path = model.file_input.text();
+                if path.trim().is_empty() {
+                    model.status = "escribe una ruta primero".into();
+                } else {
+                    match Documento::nuevo(model.project.clone()).guardar(&path) {
+                        Ok(_) => model.status = format!("guardado en {path}"),
+                        Err(e) => model.status = format!("error al guardar: {e}"),
+                    }
+                }
+            }
+            Msg::Abrir => {
+                let path = model.file_input.text();
+                match Documento::abrir(&path) {
+                    Ok(doc) => {
+                        model.project = doc.proyecto;
+                        model.gen += 1;
+                        reselect_all(&mut model);
+                        sync_inputs(&mut model);
+                        let rotas = model.project.validar_referencias();
+                        model.status = if rotas.is_empty() {
+                            format!("abierto {path}")
+                        } else {
+                            format!("abierto {path} — ⚠ {} referencias rotas", rotas.len())
+                        };
+                    }
+                    Err(e) => model.status = format!("error al abrir: {e}"),
+                }
+            }
+            Msg::Combinar => {
+                let path = model.file_input.text();
+                match Documento::abrir(&path) {
+                    Ok(doc) => {
+                        let n_esc = doc.proyecto.escenas.len();
+                        model.project.combinar(&doc.proyecto);
+                        model.gen += 1;
+                        reselect_all(&mut model);
+                        sync_inputs(&mut model);
+                        let rotas = model.project.validar_referencias();
+                        model.status = if rotas.is_empty() {
+                            format!("combinado {path} (+{n_esc} escenas)")
+                        } else {
+                            format!("combinado {path} — ⚠ {} referencias rotas", rotas.len())
+                        };
+                    }
+                    Err(e) => model.status = format!("error al combinar: {e}"),
+                }
+            }
+            Msg::MundoDesdeMapa => {
+                let path = model.file_input.text();
+                // Lee la fuente (GeoJSON + .pgm hermano) → adjuntala AL MUNDO
+                // seleccionado (se persiste con el Project) y regenerá el grid.
+                match mapa_import::leer_fuente(&path, 300.0) {
+                    Ok(fuente) => {
+                        model.level = Level::Mundos;
+                        let mid = model.sel[Level::Mundos.index()];
+                        if let Some(m) = model.project.mundos.iter_mut().find(|m| m.id == mid) {
+                            m.mapa = Some(fuente);
+                            model.gen += 1; // fuerza rebuild del preview desde el mapa
+                            refrescar_mapa(&mut model);
+                        } else {
+                            model.status = "no hay mundo seleccionado para el mapa".into();
+                        }
+                    }
+                    Err(e) => model.status = format!("mapa: {e}"),
+                }
+            }
+            Msg::QuitarMapa => {
+                let mid = model.sel[Level::Mundos.index()];
+                let quitado = model
+                    .project
+                    .mundos
+                    .iter_mut()
+                    .find(|m| m.id == mid)
+                    .map(|m| m.mapa.take().is_some())
+                    .unwrap_or(false);
+                if quitado {
+                    model.mapa = None;
+                    model.gen += 1; // vuelve al mundo procedural
+                    model.status = "mapa quitado — mundo procedural".into();
+                }
+            }
+            Msg::SerDesdeFoto => {
+                // La foto NO se voxeliza literal (eso da el valle): sólo REGULA los rasgos
+                // (piel/ropa) de un personaje ESTILIZADO del kit, que conserva su estilo,
+                // gestos y personalidad. El recorte de persona lo da u2net por el daemon.
+                let path = model.file_input.text();
+                match std::fs::read(&path) {
+                    Ok(bytes) => {
+                        let cliente = ClienteBloqueante::conectar(rostro::socket_por_defecto()).ok();
+                        let prov = cliente.as_ref().map(|c| c as &dyn Proveedor);
+                        match rostro::rasgos_desde_bytes(&bytes, prov) {
+                            Ok(r) => {
+                                let via = if r.recorte_real { "recorte u2net" } else { "sin recorte (centro)" };
+                                let id = model.project.alloc_id();
+                                let mut cs = CharSpec::new(nombre_desde_path(&path), Age::Adult);
+                                cs.id = id;
+                                cs.skin = r.skin;
+                                cs.shirt = r.shirt;
+                                cs.pants = r.pants;
+                                cs.hair = Some(r.hair); // pelo FIEL de la foto (no derivado)
+                                model.project.seres.push(cs);
+                                model.level = Level::Seres;
+                                model.set_selected(id);
+                                model.gen += 1;
+                                sync_inputs(&mut model);
+                                model.status = format!("ser desde foto (rasgos, {via}): personaje estilizado");
+                            }
+                            Err(e) => model.status = format!("foto: {e}"),
+                        }
+                    }
+                    Err(e) => model.status = format!("foto: leer {path}: {e}"),
+                }
+            }
+            Msg::Versionar => {
+                // Registra el proyecto actual como una versión nueva en la rama
+                // actual del DAG, y persiste la historia.
+                let etiqueta = format!("v{}", model.historia.len() + 1);
+                match model.historia.commit(&model.project, etiqueta) {
+                    Ok(id) => {
+                        let _ = model.historia.guardar(HISTORY_PATH);
+                        model.status = format!(
+                            "versión {} · rama {} · {} en total",
+                            hex_corto(&id),
+                            model.historia.rama_actual(),
+                            model.historia.len()
+                        );
+                    }
+                    Err(e) => model.status = format!("error al versionar: {e}"),
+                }
+            }
+            Msg::Ramificar => {
+                // Una alternativa nombrada desde la punta actual (nombre = ruta
+                // escrita, o auto). Cambia a la rama nueva: lo próximo que
+                // versiones cuelga de la alternativa.
+                let nombre = {
+                    let t = model.file_input.text();
+                    if t.trim().is_empty() {
+                        format!("alt-{}", model.historia.ramas().len() + 1)
+                    } else {
+                        t
+                    }
+                };
+                match model.historia.ramificar(&nombre) {
+                    Ok(_) => {
+                        model.historia.cambiar_rama(&nombre);
+                        let _ = model.historia.guardar(HISTORY_PATH);
+                        model.status = format!("rama nueva: {nombre} (versiona para poblarla)");
+                    }
+                    Err(_) => model.status = "versiona algo antes de ramificar".into(),
+                }
+            }
+            Msg::IrAVersion(id) => {
+                // Navegar: checkout de la versión → carga su proyecto al lienzo.
+                if let Some(p) = model.historia.checkout(&id) {
+                    model.project = p;
+                    model.gen += 1;
+                    reselect_all(&mut model);
+                    sync_inputs(&mut model);
+                    let etq = model
+                        .historia
+                        .version(&id)
+                        .map(|v| v.etiqueta.clone())
+                        .unwrap_or_default();
+                    model.status = format!("en versión {} · {etq}", hex_corto(&id));
+                }
+            }
+            Msg::EntrarSalir => {
+                model.jugando = !model.jugando;
+                model.input_juego = InputJuego::default();
+                if model.jugando {
+                    model.level = Level::Escenas; // se entra a la escena
+                    *model.respawn_jugador.lock().unwrap() = true;
+                    model.status =
+                        "JUGANDO — WASD/E-Q mover · F volar · R semilla · 1/2/3 dictar suceso · Esc salir".into();
+                } else {
+                    model.status = "saliste de la escena".into();
+                }
+            }
+            Msg::MoverJuego(eje, on) => match eje {
+                EjeJuego::Fwd => model.input_juego.fwd = on,
+                EjeJuego::Back => model.input_juego.back = on,
+                EjeJuego::Left => model.input_juego.left = on,
+                EjeJuego::Right => model.input_juego.right = on,
+                EjeJuego::Arriba => model.input_juego.arriba = on,
+                EjeJuego::Abajo => model.input_juego.abajo = on,
+            },
+            Msg::Saltar(on) => model.input_juego.salto = on,
+            Msg::AlternarVuelo => {
+                model.volar = !model.volar;
+                model.status = if model.volar {
+                    "vuelo libre — E/Q suben/bajan".into()
+                } else {
+                    "caminando (gravedad)".into()
+                };
+            }
+            Msg::RerollSemilla => {
+                // Nueva semilla (LCG u32) para el mundo de la escena → regenera
+                // el terreno bajo tus pies.
+                model.rng = model.rng.wrapping_mul(1_664_525).wrapping_add(1_013_904_223);
+                let nueva = model.rng;
+                let mundo_id = sel_scene(&model).map(|s| s.mundo);
+                if let Some(id) = mundo_id {
+                    if let Some(m) = model.project.mundos.iter_mut().find(|m| m.id == id) {
+                        m.seed = nueva;
+                        model.gen += 1;
+                        model.status = format!("nueva semilla: {nueva}");
+                    }
+                }
+            }
+            Msg::DictarSuceso(mut tipo) => {
+                // Un "aparece" sin ser asignado se ata al ser seleccionado (o al
+                // primero que haya) para que valga como referencia.
+                if let TipoSuceso::Aparece(id) = &mut tipo {
+                    if *id == 0 {
+                        *id = if model.project.seres.iter().any(|s| s.id == model.sel[2]) {
+                            model.sel[2]
+                        } else {
+                            model.project.seres.first().map(|s| s.id).unwrap_or(0)
+                        };
+                    }
+                }
+                let feet = model.jugador.lock().unwrap().pos;
+                let t = model.time;
+                let etiqueta = match &tipo {
+                    TipoSuceso::Aparece(0) => "marca (aún sin ser)".to_string(),
+                    TipoSuceso::Aparece(id) => format!("aparece ser {id}"),
+                    TipoSuceso::Camara => "marca de cámara".to_string(),
+                    TipoSuceso::Marca => "punto de interés".to_string(),
+                };
+                if let Some(scene) = sel_scene_mut(&mut model) {
+                    scene.sucesos.push(Suceso {
+                        t,
+                        pos: [feet.x, feet.y, feet.z],
+                        tipo,
+                        nota: String::new(),
+                    });
+                    model.status = format!("suceso dictado: {etiqueta}");
+                } else {
+                    model.status = "entrá a una escena para dictar sucesos".into();
+                }
+                model.gen += 1;
+            }
+            Msg::Tick => {
+                if model.level == Level::Escenas && model.playing {
+                    if let Some(dur) = sel_scene(&model).map(|s| s.duration) {
+                        model.time += DT;
+                        if model.time >= dur {
+                            model.time = 0.0;
+                        }
+                    }
+                } else if model.level == Level::Seres {
+                    model.time += DT; // turntable + respiración
+                } else if model.level == Level::Leyes {
+                    ensure_lab(&mut model);
+                    // En modo grafo, reconstruir si el texto cambió afuera (no por edición del grafo).
+                    if model.leyes_node_mode
+                        && (model.eq_graph.is_none() || model.eq_graph_gen != model.lab_gen)
+                    {
+                        rebuild_eq_graph(&mut model);
+                    }
+                    if model.simulating {
+                        let params = sel_ley(&model)
+                            .map(|l| l.kind.ecuacion_param_values())
+                            .unwrap_or_default();
+                        if let Some(lab) = &mut model.lab {
+                            lab.step(&params);
+                        }
+                    }
+                }
+            }
+        }
+        model
+    }
+
+    fn view(model: &Model) -> View<Msg> {
+        // Cuerpo: [sidebar niveles · canvas · sidebar herramientas], los DOS
+        // sidebars unificados (widget rag-sidebar). Cada uno reserva su columna
+        // cuando está Fijo (sin autohide); con Flota/Autoesconde flota como overlay
+        // sobre el canvas, con un backdrop de click-away. La orientación de los
+        // dientes la resuelve el widget (izq InnerLeft, der InnerRight) según su eje
+        // Rail Adentro/Afuera (sembrado del viejo `dientes_outside`).
+        let left_fixed = model.sidebar_left.reserves_space();
+        let right_fixed = model.sidebar_right.reserves_space();
+
+        let canvas_grow = View::new(Style {
+            flex_direction: FlexDirection::Row,
+            flex_grow: 1.0,
+            size: Size { width: percent(0.0_f32), height: percent(1.0_f32) },
+            min_size: Size { width: length(0.0_f32), height: length(0.0_f32) },
+            ..Default::default()
+        })
+        .children(vec![center(model)]);
+
+        let mut row_kids: Vec<View<Msg>> = Vec::with_capacity(3);
+        if left_fixed {
+            row_kids.push(left_sidebar(model));
+        }
+        row_kids.push(canvas_grow);
+        if right_fixed {
+            row_kids.push(right_sidebar(model));
+        }
+        let base = View::new(Style {
+            flex_direction: FlexDirection::Row,
+            size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+            ..Default::default()
+        })
+        .fill(model.theme.bg_app)
+        .children(row_kids);
+
+        let mut layers: Vec<View<Msg>> = vec![base];
+        // Sidebars flotantes (Flota/Autoesconde): overlay pegado al borde + backdrop.
+        // Como son selectores fijos, su panel siempre está a la vista mientras no
+        // autoescondan; el backdrop los guarda con Reveal(false) (y el update los
+        // re-abre sobre el nivel/tool activo — nunca colapsan de verdad).
+        if !left_fixed && !model.sidebar_left.hidden() {
+            layers.push(float_backdrop(Msg::SidebarLeft(RagSidebarMsg::Reveal(false))));
+            layers.push(float_overlay(left_sidebar(model), true));
+        }
+        if !right_fixed && !model.sidebar_right.hidden() {
+            layers.push(float_backdrop(Msg::SidebarRight(RagSidebarMsg::Reveal(false))));
+            layers.push(float_overlay(right_sidebar(model), false));
+        }
+        // Multiselect de disposición (los 4 ejes) de cada sidebar como overlay a
+        // nivel raíz cuando su control ⚙ está abierto.
+        if let Some(o) = left_multiselect_overlay(model) {
+            layers.push(o);
+        }
+        if let Some(o) = right_multiselect_overlay(model) {
+            layers.push(o);
+        }
+
+        if layers.len() == 1 {
+            layers.into_iter().next().unwrap_or_else(|| View::new(Style::default()))
+        } else {
+            View::new(Style {
+                position: Position::Relative,
+                size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+                ..Default::default()
+            })
+            .children(layers)
+        }
+    }
+}
+
+// =============================================================================
+//  Sidebars
+// =============================================================================
+
+/// Sidebar izquierdo unificado (widget `rag-sidebar`): rail de **niveles** (dientes
+/// coloridos por nivel) + panel con la lista del nivel + CRUD + renombrar + IA +
+/// historia. Selector **fijo**: el click en un diente cambia de nivel
+/// (`Activate`→`SelectLevel`, interceptado en el `map`); el cabezal con el nombre del
+/// nivel lo pone el widget. El resto de mensajes (ejes/buscador/control/resize) van al
+/// estado del sidebar.
+fn left_sidebar(model: &Model) -> View<Msg> {
+    let theme = &model.theme;
+    let btn = ButtonPalette::from_theme(theme);
+
+    // Un diente por nivel; el icono lleva el color del nivel (ignora el que resuelve
+    // el rail, para conservar la paleta colorida por nivel).
+    let teeth: Vec<RagTooth<Msg>> = Level::ALL
+        .iter()
+        .map(|&lvl| {
+            RagTooth::new(
+                lvl.index() as u64,
+                lvl.label(),
+                Arc::new(move |_size, _color| icon_view(lvl.icon(), lvl.color(), 1.8)),
+            )
+        })
+        .collect();
+
+    // El buscador filtra la LISTA de items del nivel por nombre (real, insensible).
+    let filtro = model.sidebar_left.search.trim().to_lowercase();
+
+    // Contenido del panel (el cabezal con el nombre del nivel lo pone el widget).
+    let mut rows: Vec<View<Msg>> = Vec::new();
+    for (id, name) in model.items() {
+        if !filtro.is_empty() && !name.to_lowercase().contains(&filtro) {
+            continue;
+        }
+        rows.push(selectable_row(name, id == model.selected(), Msg::SelectItem(id), theme));
+    }
+    rows.push(spacer(8.0));
+    // Botonera CRUD en fila.
+    rows.push(crud_row(&btn));
+    rows.push(spacer(8.0));
+    rows.push(section_title("NOMBRE", theme));
+    rows.push(text_input_view_full(
+        &model.name_input,
+        "nombre…",
+        model.name_focused,
+        &TextInputPalette::from_theme(theme),
+        Msg::RenameCampo,
+    ));
+
+    // IA (según nivel).
+    if matches!(model.level, Level::Biomas | Level::Mundos | Level::Seres | Level::Escenas) {
+        let hint = match model.level {
+            Level::Biomas | Level::Mundos => "p.ej. islas con ríos y nieve",
+            Level::Seres => "p.ej. una niña de remera verde",
+            _ => "p.ej. tres personajes que festejan",
+        };
+        rows.push(spacer(12.0));
+        rows.push(section_title("IA — DESCRIBE", theme));
+        rows.push(text_input_view_full(
+            &model.ai_input,
+            hint,
+            model.ai_focused,
+            &TextInputPalette::from_theme(theme),
+            Msg::AiCampo,
+        ));
+        rows.push(spacer(6.0));
+        rows.push(button_view(
+            if model.ai_busy { "generando…" } else { "generar (IA)" },
+            &btn,
+            Msg::AiGenerate,
+        ));
+    }
+
+    // Guardar/cargar + estado.
+    rows.push(spacer(12.0));
+    rows.push(button_view("guardar", &btn, Msg::Save));
+    rows.push(spacer(4.0));
+    rows.push(button_view("cargar", &btn, Msg::Load));
+
+    // Archivos: abrir / guardar-como / combinar una escena de otro archivo.
+    rows.push(spacer(10.0));
+    rows.push(section_title("ARCHIVO", theme));
+    rows.push(text_input_view_full(
+        &model.file_input,
+        "ruta.voxstudio.ron",
+        model.file_focused,
+        &TextInputPalette::from_theme(theme),
+        Msg::FileCampo,
+    ));
+    rows.push(spacer(4.0));
+    rows.push(button_view("abrir", &btn, Msg::Abrir));
+    rows.push(spacer(4.0));
+    rows.push(button_view("guardar como", &btn, Msg::GuardarComo));
+    rows.push(spacer(4.0));
+    rows.push(button_view("combinar (fundir archivo)", &btn, Msg::Combinar));
+
+    // Mundo desde mapa real (GeoJSON del visor + .pgm hermano opcional).
+    rows.push(spacer(4.0));
+    rows.push(button_view("mundo desde mapa (GeoJSON)", &btn, Msg::MundoDesdeMapa));
+    if model.mapa.is_some() {
+        rows.push(spacer(4.0));
+        rows.push(button_view("↩ quitar mapa (volver a procedural)", &btn, Msg::QuitarMapa));
+    }
+
+    // Ser desde foto (capa 3): la ruta va en el campo ARCHIVO. La foto regula los rasgos
+    // (piel/ropa) de un personaje estilizado del kit. Sólo en Seres.
+    if model.level == Level::Seres {
+        rows.push(spacer(4.0));
+        rows.push(button_view("ser desde foto (rasgos)", &btn, Msg::SerDesdeFoto));
+    }
+
+    // Historia (DAG): versiones y alternativas — el cimiento del trabajo creativo.
+    rows.push(spacer(10.0));
+    let hist_info = if model.historia.is_empty() {
+        "VERSIONES — sin versiones".to_string()
+    } else {
+        format!(
+            "VERSIONES — rama {} · {} en total",
+            model.historia.rama_actual(),
+            model.historia.len()
+        )
+    };
+    rows.push(section_title(&hist_info, theme));
+    rows.push(button_view("versionar", &btn, Msg::Versionar));
+    rows.push(spacer(4.0));
+    rows.push(button_view("ramificar (alternativa)", &btn, Msg::Ramificar));
+    // El árbol navegable: una fila por versión (orden de creación), clickeable →
+    // checkout. ● = donde estás parado; ⑂ = tiene alternativas (hermanas).
+    let actual = model.historia.actual();
+    for (id, ver) in model.historia.versiones_ordenadas() {
+        let marca = if actual == Some(id) { "●" } else { "○" };
+        let ramif = if model.historia.alternativas(&id).is_empty() { "" } else { " ⑂" };
+        let etiqueta = format!("{marca} {}  {}{ramif}", hex_corto(&id), ver.etiqueta);
+        rows.push(spacer(2.0));
+        rows.push(button_view(&etiqueta, &btn, Msg::IrAVersion(id)));
+    }
+
+    // Entrar a la escena: jugarla en primera persona (caminar/volar).
+    rows.push(spacer(10.0));
+    let jugar = if model.jugando {
+        "◄ salir de la escena"
+    } else {
+        "▶ entrar a la escena (jugar)"
+    };
+    rows.push(button_view(jugar, &btn, Msg::EntrarSalir));
+    if model.jugando {
+        let modo = if model.volar { "volando" } else { "caminando" };
+        rows.push(spacer(2.0));
+        rows.push(section_title(&format!("JUGANDO · {modo}"), theme));
+    }
+    rows.push(spacer(10.0));
+    rows.push(
+        View::new(Style {
+            size: Size { width: percent(1.0_f32), height: Dimension::auto() },
+            ..Default::default()
+        })
+        .text(model.status.clone(), 12.0, theme.fg_placeholder)
+        .max_lines(3),
+    );
+
+    let body = View::new(Style {
+        flex_direction: FlexDirection::Column,
+        size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+        padding: pad(12.0, 12.0),
+        gap: gap_y(6.0),
+        ..Default::default()
+    })
+    .children(rows);
+
+    // Source of truth = model.level: el diente del nivel activo queda abierto (robusto
+    // aunque el estado no se haya sincronizado, p.ej. en el pantallazo headless).
+    let mut st = model.sidebar_left.clone();
+    st.open = Some(model.level.index() as u64);
+    st.selected = Some(model.level.index() as u64);
+    let spec = RagSidebarView {
+        teeth,
+        body,
+        accessory: None,
+        search_hits: !model.sidebar_left.search.is_empty(),
+        t: 0.0,
+        rail_w: RAIL_W,
+        // El click en un diente cambia de nivel (selector fijo: nunca colapsa el
+        // panel); el resto de mensajes van al estado del sidebar.
+        map: Arc::new(|rm| match rm {
+            RagSidebarMsg::Activate(id) => Msg::SelectLevel(Level::from_index(id as usize)),
+            other => Msg::SidebarLeft(other),
+        }),
+        on_drop: None,
+        on_reorder: None,
+        grow: None,
+    };
+    rag_sidebar_view(&st, spec, RagSide::Left, &RagSidebarPalette::from_theme(theme))
+}
+
+/// Sidebar derecho unificado (widget `rag-sidebar`): rail de **herramientas** del
+/// nivel (dientes coloridos, espejados hacia el centro) + el editor del set activo.
+/// Selector **fijo**: `Activate`→`SelectTool` interceptado; el cabezal con el nombre
+/// de la herramienta lo pone el widget.
+fn right_sidebar(model: &Model) -> View<Msg> {
+    let theme = &model.theme;
+    let tools = model.level.tools();
+    let tab = model.tool_tab.min(tools.len().saturating_sub(1));
+    let lvl_color = model.level.color();
+
+    let teeth: Vec<RagTooth<Msg>> = tools
+        .iter()
+        .enumerate()
+        .map(|(i, (label, ic))| {
+            let ic = *ic;
+            RagTooth::new(
+                i as u64,
+                label.to_string(),
+                Arc::new(move |_size, _color| icon_view(ic, lvl_color, 1.8)),
+            )
+        })
+        .collect();
+
+    let body = View::new(Style {
+        flex_direction: FlexDirection::Column,
+        size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+        padding: pad(14.0, 14.0),
+        gap: gap_y(8.0),
+        ..Default::default()
+    })
+    .children(editor(model, tab));
+
+    // Source of truth = model.tool_tab: el diente del tool activo queda abierto.
+    let mut st = model.sidebar_right.clone();
+    st.open = Some(tab as u64);
+    st.selected = Some(tab as u64);
+    let spec = RagSidebarView {
+        teeth,
+        body,
+        accessory: None,
+        search_hits: !model.sidebar_right.search.is_empty(),
+        t: 0.0,
+        rail_w: RAIL_W,
+        map: Arc::new(|rm| match rm {
+            RagSidebarMsg::Activate(id) => Msg::SelectTool(id as usize),
+            other => Msg::SidebarRight(other),
+        }),
+        on_drop: None,
+        on_reorder: None,
+        grow: None,
+    };
+    rag_sidebar_view(&st, spec, RagSide::Right, &RagSidebarPalette::from_theme(theme))
+}
+
+/// Fija el diente abierto de cada sidebar unificado a la fuente de verdad
+/// (`level`/`tool_tab`): son selectores **fijos**, nunca colapsan.
+fn pin_sidebars(model: &mut Model) {
+    let lvl = model.level.index() as u64;
+    model.sidebar_left.open = Some(lvl);
+    model.sidebar_left.selected = Some(lvl);
+    let tab = model.tool_tab.min(model.level.tools().len().saturating_sub(1)) as u64;
+    model.sidebar_right.open = Some(tab);
+    model.sidebar_right.selected = Some(tab);
+}
+
+/// Rutea una tecla al buscador de un sidebar unificado enfocado. Esc/Enter sueltan el
+/// foco; Backspace borra el último char; el `text` del evento se inserta. Traga
+/// cualquier otra tecla (devuelve `None`) para que los atajos no disparen al tipear.
+fn sidebar_search_key(
+    ev: &KeyEvent,
+    current: &str,
+    wrap: impl Fn(RagSidebarMsg) -> Msg,
+) -> Option<Msg> {
+    match &ev.key {
+        Key::Named(NamedKey::Escape | NamedKey::Enter) => Some(wrap(RagSidebarMsg::SearchFocus(false))),
+        Key::Named(NamedKey::Backspace) => {
+            let mut s = current.to_string();
+            s.pop();
+            Some(wrap(RagSidebarMsg::SearchSet(s)))
+        }
+        _ => {
+            if let Some(t) = &ev.text {
+                if !t.is_empty() && !t.chars().any(char::is_control) {
+                    let mut s = current.to_string();
+                    s.push_str(t);
+                    return Some(wrap(RagSidebarMsg::SearchSet(s)));
+                }
+            }
+            None
+        }
+    }
+}
+
+/// Backdrop de click-away a pantalla completa: al clickear fuera de un sidebar
+/// flotante, emite `msg` (típicamente `Reveal(false)`) para guardarlo.
+fn float_backdrop(msg: Msg) -> View<Msg> {
+    use llimphi_ui::llimphi_layout::taffy::prelude::Rect;
+    View::new(Style {
+        position: Position::Absolute,
+        inset: Rect {
+            left: length(0.0_f32),
+            right: length(0.0_f32),
+            top: length(0.0_f32),
+            bottom: length(0.0_f32),
+        },
+        size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+        ..Default::default()
+    })
+    .on_click(msg)
+}
+
+/// Coloca un sidebar flotante como overlay pegado a un borde vertical
+/// (`left_side` = izquierda), de alto completo.
+fn float_overlay(inner: View<Msg>, left_side: bool) -> View<Msg> {
+    use llimphi_ui::llimphi_layout::taffy::prelude::Rect;
+    let inset = if left_side {
+        Rect { left: length(0.0_f32), right: auto(), top: length(0.0_f32), bottom: length(0.0_f32) }
+    } else {
+        Rect { left: auto(), right: length(0.0_f32), top: length(0.0_f32), bottom: length(0.0_f32) }
+    };
+    View::new(Style {
+        position: Position::Absolute,
+        inset,
+        size: Size { width: auto(), height: percent(1.0_f32) },
+        ..Default::default()
+    })
+    .children(vec![inner])
+}
+
+/// El multiselect de disposición (los 4 ejes) del sidebar IZQUIERDO como overlay a
+/// nivel raíz (no clipeado por el panel) con backdrop de click-away. `None` si el
+/// control ⚙ está cerrado.
+fn left_multiselect_overlay(model: &Model) -> Option<View<Msg>> {
+    multiselect_overlay(model, true)
+}
+
+/// Ídem para el sidebar DERECHO.
+fn right_multiselect_overlay(model: &Model) -> Option<View<Msg>> {
+    multiselect_overlay(model, false)
+}
+
+/// Arma el overlay del multiselect de un sidebar (izq/der). Anclado al borde interno
+/// del rail (a la derecha del rail izquierdo, a la izquierda del derecho), cerca del
+/// control ⚙ del panel; con backdrop que lo cierra.
+fn multiselect_overlay(model: &Model, left_side: bool) -> Option<View<Msg>> {
+    use llimphi_ui::llimphi_layout::taffy::prelude::Rect;
+    let (state, wrap): (&RagSidebarState, fn(RagSidebarMsg) -> Msg) = if left_side {
+        (&model.sidebar_left, Msg::SidebarLeft)
+    } else {
+        (&model.sidebar_right, Msg::SidebarRight)
+    };
+    if !state.control_open {
+        return None;
+    }
+    let card = rag_multiselect_view(
+        state,
+        RagOptions::default(),
+        Arc::new(wrap),
+        &RagSidebarPalette::from_theme(&model.theme),
+    );
+    let inset = if left_side {
+        Rect { left: length(RAIL_W + 8.0), right: auto(), top: length(36.0_f32), bottom: auto() }
+    } else {
+        Rect { left: auto(), right: length(RAIL_W + 8.0), top: length(36.0_f32), bottom: auto() }
+    };
+    let card_pos = View::new(Style {
+        position: Position::Absolute,
+        inset,
+        ..Default::default()
+    })
+    .children(vec![card]);
+    let backdrop = View::new(Style {
+        position: Position::Absolute,
+        inset: Rect {
+            left: length(0.0_f32),
+            right: length(0.0_f32),
+            top: length(0.0_f32),
+            bottom: length(0.0_f32),
+        },
+        size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+        ..Default::default()
+    })
+    .on_click(wrap(RagSidebarMsg::ControlToggle));
+    Some(
+        View::new(Style {
+            position: Position::Relative,
+            size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+            ..Default::default()
+        })
+        .children(vec![backdrop, card_pos]),
+    )
+}
+
+/// Fila de botones CRUD: nuevo · duplicar · borrar.
+fn crud_row(btn: &ButtonPalette) -> View<Msg> {
+    View::new(Style {
+        flex_direction: FlexDirection::Row,
+        size: Size { width: percent(1.0_f32), height: Dimension::auto() },
+        gap: Size { width: length(4.0_f32), height: length(0.0_f32) },
+        ..Default::default()
+    })
+    .children(vec![
+        cell(button_view("+ nuevo", btn, Msg::NewItem)),
+        cell(button_view("duplicar", btn, Msg::DupItem)),
+        cell(button_view("borrar", btn, Msg::DelItem)),
+    ])
+}
+
+/// Celda que crece para repartir el ancho de una fila.
+fn cell(child: View<Msg>) -> View<Msg> {
+    View::new(Style {
+        flex_grow: 1.0,
+        size: Size { width: percent(0.0_f32), height: Dimension::auto() },
+        ..Default::default()
+    })
+    .children(vec![child])
+}
+
+// =============================================================================
+//  Centro (preview)
+// =============================================================================
+
+fn center(model: &Model) -> View<Msg> {
+    let inner = match model.level {
+        Level::Leyes if model.leyes_node_mode => eq_graph_view(model),
+        Level::Leyes => law_lab_view(model),
+        Level::Materiales => material_swatch(model),
+        _ => canvas_3d(model),
+    };
+    View::new(Style {
+        flex_grow: 1.0,
+        size: Size { width: Dimension::auto(), height: percent(1.0_f32) },
+        ..Default::default()
+    })
+    .fill(Color::from_rgba8(12, 14, 18, 255))
+    .children(vec![inner])
+}
+
+/// Mensaje centrado para niveles sin preview 3D.
+fn placeholder_2d(text: &str, theme: &Theme) -> View<Msg> {
+    View::new(Style {
+        position: Position::Absolute,
+        size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+        align_items: Some(AlignItems::Center),
+        justify_content: Some(llimphi_ui::llimphi_layout::taffy::prelude::JustifyContent::Center),
+        padding: pad(40.0, 40.0),
+        ..Default::default()
+    })
+    .children(vec![View::new(Style {
+        size: Size { width: percent(0.7_f32), height: Dimension::auto() },
+        ..Default::default()
+    })
+    .text(text.to_string(), 16.0, theme.fg_muted)
+    .max_lines(4)])
+}
+
+/// Centro del nivel Leyes: el **laboratorio** — heatmap del campo visible de la ley
+/// corriendo la ecuación, o el error de parseo, o una guía si no hay ley por ecuación.
+fn law_lab_view(model: &Model) -> View<Msg> {
+    let theme = &model.theme;
+    let Some(lab) = &model.lab else {
+        return placeholder_2d(
+            "Elige una ley por ecuación (botón «preset» a la derecha) y edita su fórmula. ▶ para simular.",
+            theme,
+        );
+    };
+    if let Err(err) = &lab.program {
+        return placeholder_2d(&format!("La fórmula no compila:\n{err}"), theme);
+    }
+    let field_name = lab.engine.fields().get(lab.vis).map(|f| f.name.clone()).unwrap_or_default();
+    let estado = if model.simulating { "▶ corriendo" } else { "▮ en pausa" };
+    let overlay = View::new(Style {
+        position: Position::Absolute,
+        size: Size { width: percent(1.0_f32), height: Dimension::auto() },
+        padding: pad(12.0, 10.0),
+        ..Default::default()
+    })
+    .text(format!("campo «{field_name}»  ·  {LAB_DIM}²  ·  {estado}"), 13.0, theme.fg_muted);
+    View::new(Style {
+        position: Position::Absolute,
+        size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+        align_items: Some(AlignItems::Center),
+        justify_content: Some(llimphi_ui::llimphi_layout::taffy::prelude::JustifyContent::Center),
+        padding: pad(24.0, 24.0),
+        ..Default::default()
+    })
+    .children(vec![
+        View::new(Style {
+            size: Size { width: percent(0.82_f32), height: percent(0.82_f32) },
+            ..Default::default()
+        })
+        .image(heatmap_image(lab)),
+        overlay,
+    ])
+}
+
+/// Centro del nivel Leyes en **modo grafo**: la ecuación como nodos (misma AST que la
+/// fórmula). Arrastrar la barra de título reubica; arrastrar de un pin de salida a uno
+/// de entrada reconecta (y reescribe la fórmula); right‑click borra el nodo.
+fn eq_graph_view(model: &Model) -> View<Msg> {
+    let theme = &model.theme;
+    let (Some(g), Some(sym)) = (&model.eq_graph, sel_ley(model).and_then(|l| l.kind.ecuacion_symbols()))
+    else {
+        return placeholder_2d("Grafo no disponible (la ley no es por ecuación).", theme);
+    };
+    let specs = g.node_specs(&sym);
+    let palette = NodegraphPalette::from_theme(theme);
+    let metrics = NodegraphMetrics::default();
+    let inner = nodegraph_view_ex(
+        &specs,
+        &g.wires,
+        &palette,
+        &metrics,
+        |id, phase, dx, dy| match phase {
+            DragPhase::Move => Some(Msg::GraphDrag(id, dx, dy)),
+            _ => None,
+        },
+        |from, fp, to, tp| Some(Msg::GraphConnect(from, fp, to, tp)),
+        Some(|id| Some(Msg::GraphDeleteNode(id))),
+    );
+    View::new(Style {
+        position: Position::Absolute,
+        size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+        ..Default::default()
+    })
+    .children(vec![inner])
+}
+
+/// Heatmap RGBA del campo visible del laboratorio (rango del campo → rampa magma).
+fn heatmap_image(lab: &LawLab) -> Image {
+    let f = lab.vis as u16;
+    let (mn, mx) = lab.engine.fields().get(lab.vis).map(|d| (d.min, d.max)).unwrap_or((0.0, 1.0));
+    let span = (mx - mn).max(1e-6);
+    let mut rgba = vec![0u8; (LAB_DIM * LAB_DIM * 4) as usize];
+    for z in 0..LAB_DIM {
+        for x in 0..LAB_DIM {
+            let t = ((lab.engine.get(f, x, 0, z) - mn) / span).clamp(0.0, 1.0);
+            let [r, g, b] = ramp(t);
+            let i = ((z * LAB_DIM + x) * 4) as usize;
+            rgba[i] = r;
+            rgba[i + 1] = g;
+            rgba[i + 2] = b;
+            rgba[i + 3] = 255;
+        }
+    }
+    from_rgba8(rgba, LAB_DIM, LAB_DIM)
+}
+
+/// Rampa de color tipo *magma* (negro → púrpura → naranja → crema) para `t∈[0,1]`.
+fn ramp(t: f32) -> [u8; 3] {
+    const STOPS: [(f32, [f32; 3]); 4] = [
+        (0.0, [8.0, 6.0, 30.0]),
+        (0.4, [92.0, 22.0, 110.0]),
+        (0.72, [222.0, 92.0, 58.0]),
+        (1.0, [250.0, 232.0, 158.0]),
+    ];
+    let t = t.clamp(0.0, 1.0);
+    let mut out = STOPS[STOPS.len() - 1].1;
+    for w in STOPS.windows(2) {
+        let (t0, c0) = w[0];
+        let (t1, c1) = w[1];
+        if t <= t1 {
+            let k = ((t - t0) / (t1 - t0).max(1e-6)).clamp(0.0, 1.0);
+            out = [
+                c0[0] + (c1[0] - c0[0]) * k,
+                c0[1] + (c1[1] - c0[1]) * k,
+                c0[2] + (c1[2] - c0[2]) * k,
+            ];
+            break;
+        }
+    }
+    [out[0] as u8, out[1] as u8, out[2] as u8]
+}
+
+/// Lado del blob de material del swatch 3D.
+const BLOB_DIM: u32 = 44;
+
+/// Un **blob** (esfera) voxel del color dado, para mostrar el material en 3D. La
+/// superficie curva exhibe bien el bisel (suavizado) y la rugosidad (bump).
+fn material_blob(color: [u8; 3]) -> VoxelGrid {
+    let d = BLOB_DIM;
+    let mut g = VoxelGrid::new([d, d, d]);
+    let c = (d as f32 - 1.0) / 2.0;
+    let r = d as f32 * 0.42;
+    for z in 0..d {
+        for y in 0..d {
+            for x in 0..d {
+                let dx = x as f32 - c;
+                let dy = y as f32 - c;
+                let dz = z as f32 - c;
+                if dx * dx + dy * dy + dz * dz <= r * r {
+                    g.set(x, y, z, color);
+                }
+            }
+        }
+    }
+    g
+}
+
+/// **Preview 3D vivo** del material seleccionado: un blob voxel con su color + su
+/// detalle sub-voxel (rugosidad/bisel), para dialar los sliders y verlos al instante.
+/// Reusa el `preview` compartido vía `show_grid` (clave por material+color; el detalle
+/// se aplica por cuadro sin reconstruir). Arrastrar = orbitar.
+fn material_swatch(model: &Model) -> View<Msg> {
+    let mid = model.sel[1];
+    let color = model.project.resolve_material(mid).color;
+    let (rug, bis) = model.project.detalle_material(mid);
+    let (yaw, pitch) = (model.yaw, model.pitch);
+    let preview = model.preview.clone();
+    let mr = model.preview_render();
+    // Clave de rebuild: material + color, con bit alto para no chocar con los tags de
+    // interior/terreno. Cambia sólo al cambiar de material o su color → rugosidad/bisel
+    // se aplican sin reconstruir el grid.
+    let key = 0xF000_0000_0000_0000u64
+        | ((mid & 0xffff) << 24)
+        | ((color[0] as u64) << 16)
+        | ((color[1] as u64) << 8)
+        | color[2] as u64;
+    let absolute = Style {
+        position: Position::Absolute,
+        size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+        ..Default::default()
+    };
+    View::new(absolute)
+        .gpu_paint_with(move |device, queue, encoder, target, rect, vp| {
+            let dim = [BLOB_DIM, BLOB_DIM, BLOB_DIM];
+            let mut guard = preview.lock().unwrap();
+            let p = guard.get_or_insert_with(|| WorldPreview::build(device, queue, &mr, dim, 0, None));
+            p.show_grid(device, queue, material_blob(color), dim, key);
+            // Luz frontal limpia (sin niebla) para leer el relieve; luego el detalle.
+            p.set_lighting(
+                [0.4, 0.6, 0.7],
+                Atmosphere { sky_zenith: [40, 46, 62], sky_horizon: [82, 86, 100], fog_density: 0.0, god_rays: 0.0 },
+            );
+            p.set_detalle(rug, 1.6, bis);
+            let camera = Camera3d::orbit(Vec3::ZERO, yaw, pitch, BLOB_DIM as f32 * 1.9);
+            p.render(device, queue, encoder, target, vp, (rect.x, rect.y, rect.w, rect.h), &camera);
+        })
+        .draggable(|phase, dx, dy| match phase {
+            DragPhase::Move => Some(Msg::Orbit(dx, dy)),
+            DragPhase::End => None,
+        })
+}
+
+/// Canvas 3D: terreno del artefacto + (en escenas) los actores posados.
+fn canvas_3d(model: &Model) -> View<Msg> {
+    let (yaw, pitch, dist, gen) = (model.yaw, model.pitch, model.dist, model.gen);
+    let preview = model.preview.clone();
+    // Dirigiendo (Escenas + pestaña Reparto): el click coloca la clave seleccionada.
+    let directing = model.level == Level::Escenas && model.tool_tab == 1 && sel_scene(model).is_some();
+    let preview_click = model.preview.clone();
+    let preview_click_int = model.preview.clone();
+    let interior_sel = model.project.interiores.iter().find(|x| x.id == model.sel[6]).cloned();
+    let is_interiores = model.level == Level::Interiores;
+    let mr = model.preview_render();
+    // Detalle sub-voxel del preview 3D (Biomas/Mundos): la rugosidad y el bisel finos
+    // ya viajan **horneados POR VOXEL** en el grid (cada material del bioma con el suyo,
+    // ver `ResolvedMaterial::detalle`/`generate_window`) → dos materiales lucen distinto
+    // a la vez, lo que el look global no podía. Aquí sólo derivamos el **bisel GLOBAL** =
+    // el mayor bisel del bioma, que enciende el trazado de isosuperficie (requisito para
+    // que el bisel por voxel module la normal). La rugosidad global va en 0 (el por-voxel
+    // manda; los voxels sin detalle —agua, minerales— quedan lisos, que es lo correcto).
+    // El nivel Materiales usa su propio swatch 3D (single-material, look global).
+    let bisel_global = {
+        let p = &mr.palette;
+        let pk = p.peak.map(|m| m.detalle.1).unwrap_or(0.0);
+        p.ground.detalle.1.max(p.cliff.detalle.1).max(pk)
+    };
+    // Silueta sub-voxel POR MATERIAL: prende el contorno diferenciado (uno duro/blocky,
+    // otro liso/redondeado en el mismo frame) sólo si el bioma tiene bisel CON CONTRASTE
+    // entre terreno/acantilado/cumbre (si son todos iguales, no aporta y cuesta samplear
+    // el detalle vecino por evaluación del campo). El fauna/flora aporta su propio bisel
+    // por voxel, pero el contraste del terreno es el que domina la silueta visible.
+    let silueta_pv = {
+        let p = &mr.palette;
+        let g = p.ground.detalle.1;
+        let c = p.cliff.detalle.1;
+        let pk = p.peak.map(|m| m.detalle.1).unwrap_or(g);
+        bisel_global > 0.01 && ((g - c).abs() > 0.01 || (g - pk).abs() > 0.01 || (c - pk).abs() > 0.01)
+    };
+    // Mundo desde mapa real: sólo pisa el preview en el nivel Mundos (Escenas usa
+    // ventana móvil; Biomas/Seres/Interiores tienen su propio grid). `Arc` clonado.
+    let mapa_override = if model.level == Level::Mundos { model.mapa.clone() } else { None };
+    let simulating = model.simulating;
+    let agua = mr.palette.agua;
+    // El agua fluye SÓLO si su material tiene la ley Fluir (con sus params).
+    let fluir = model.project.water_fluir();
+    // Y las plantas (objetos) crecen si su material tiene la ley Crecer.
+    let crecer = mr.bioma.objetos.iter().find_map(|o| {
+        model
+            .project
+            .crecer_velocidad(o.material)
+            .map(|v| (model.project.resolve_material(o.material).color, v))
+    });
+    // Ley autorada (Ecuacion): el primer material de la escena que la tenga corre sobre
+    // sus celdas (recoloreándolas por el campo). `(color, tol, campos, programa, params, vis)`.
+    let ecuacion = {
+        let b = &mr.bioma;
+        let mut ids = vec![b.ground, b.cliff];
+        if let Some(p) = b.peak {
+            ids.push(p);
+        }
+        ids.extend(b.objetos.iter().map(|o| o.material));
+        ids.into_iter().find_map(|id| {
+            model.project.ecuacion_de_material(id).map(|(campos, prog, params)| {
+                let color = model.project.resolve_material(id).color;
+                let vis = campos.len().saturating_sub(1);
+                (color, campos, prog, params, vis)
+            })
+        })
+    };
+    // Pobladores del bioma: cada SereUso → unos cuantos habitantes (por probabilidad).
+    let pobladores: Vec<(CharSpec, usize)> = mr
+        .bioma
+        .seres
+        .iter()
+        .filter_map(|su| {
+            model
+                .project
+                .sere(su.sere)
+                .map(|cs| (cs.clone(), ((su.probabilidad.clamp(0.0, 1.0) * 6.0).round() as usize).max(1)))
+        })
+        .collect();
+    let absolute = Style {
+        position: Position::Absolute,
+        size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+        ..Default::default()
+    };
+
+    let mut canvas = match model.level {
+        Level::Escenas => {
+            let scene = sel_scene(model).cloned();
+            let script_cam = model.script_cam;
+            // Recorrido a dibujar en 3D mientras se dirige (pestaña Reparto): los
+            // waypoints del actor seleccionado + cuál está seleccionado.
+            let path: Option<(Vec<(f32, f32)>, usize)> = if model.tool_tab == 1 {
+                scene.as_ref().and_then(|s| s.actors.get(model.actor_sel)).map(|act| {
+                    (act.keys.iter().map(|k| (k.gx, k.gz)).collect(), model.key_sel)
+                })
+            } else {
+                None
+            };
+            let script_cam = if path.is_some() { false } else { script_cam }; // órbita para dirigir
+            let scripts: Vec<ActorScript> = scene.as_ref().map(|s| s.scripts()).unwrap_or_default();
+            let chars: Vec<CharSpec> = scene
+                .as_ref()
+                .map(|s| s.actors.iter().map(|a| model.project.character_or_default(a.character)).collect())
+                .unwrap_or_default();
+            let time = model.time;
+            let jugando = model.jugando;
+            let jugador = model.jugador.clone();
+            let input_juego = model.input_juego;
+            let volar = model.volar;
+            let respawn_jugador = model.respawn_jugador.clone();
+            View::new(absolute).gpu_paint_with(move |device, queue, encoder, target, rect, vp| {
+                let dim = world_dim(PREVIEW_DIM_XZ);
+                let mut guard = preview.lock().unwrap();
+                let p = guard.get_or_insert_with(|| WorldPreview::build(device, queue, &mr, dim, gen, None));
+                // Al dirigir, ventana fija en el origen → la columna de grilla coincide
+                // con la de mundo (el picking del click queda directo).
+                let origin = if directing { [0, 0] } else { window_origin_for_cast(&scripts, time, dim) };
+                p.ensure_window(device, queue, &mr, gen, origin);
+                let half = Vec3::new(dim[0] as f32, dim[1] as f32, dim[2] as f32) * 0.5;
+                let mut poses = Vec::with_capacity(scripts.len());
+                let mut centroid = Vec3::ZERO;
+                for (script, ch) in scripts.iter().zip(&chars) {
+                    let at = script.quantize(time);
+                    let s = script.sample(at);
+                    let pos = p.ground_at_world(s.gx as i32, s.gz as i32) - half;
+                    centroid += pos;
+                    poses.push((pos, s, ch, at));
+                }
+                let look = if poses.is_empty() {
+                    orbit_center(dim) - half
+                } else {
+                    centroid / poses.len() as f32 + Vec3::new(0.0, 1.0, 0.0)
+                };
+                let cast_d = 6.0 + poses.len() as f32 * 1.2;
+                let scene_dist = (dist * 0.18).clamp(10.0, 70.0);
+                let camera = if jugando {
+                    // Primera persona: reposar al entrar, luego avanzar la física
+                    // (caminar o volar) desde las teclas + el rumbo del drag.
+                    if std::mem::take(&mut *respawn_jugador.lock().unwrap()) {
+                        *jugador.lock().unwrap() = p.spawn_jugador();
+                    }
+                    let mut wish = Vec3::ZERO;
+                    if input_juego.fwd {
+                        wish += forward_h(yaw);
+                    }
+                    if input_juego.back {
+                        wish -= forward_h(yaw);
+                    }
+                    if input_juego.right {
+                        wish += right_h(yaw);
+                    }
+                    if input_juego.left {
+                        wish -= right_h(yaw);
+                    }
+                    if volar {
+                        if input_juego.arriba {
+                            wish += Vec3::Y;
+                        }
+                        if input_juego.abajo {
+                            wish -= Vec3::Y;
+                        }
+                    }
+                    let eye = {
+                        let mut j = jugador.lock().unwrap();
+                        p.step_jugador(&mut j, wish, input_juego.salto, 1.0 / 30.0, volar)
+                    };
+                    Camera3d::fly(eye, yaw, pitch)
+                } else {
+                    match (script_cam, &scene) {
+                        (true, Some(sc)) => sc.camera_at(look, cast_d, time),
+                        _ => Camera3d::orbit(look, yaw, pitch, scene_dist),
+                    }
+                };
+                // Guardar la cámara para resolver clicks → suelo (plano a la altura de pies).
+                if directing && rect.h > 0.0 {
+                    let inv_vp = camera.view_proj(rect.w / rect.h).inverse();
+                    p.set_pick(inv_vp, camera.eye, look.y - 1.0);
+                }
+                let mut metas = Vec::with_capacity(poses.len());
+                for (pos, s, ch, at) in &poses {
+                    // Humanoide → Actor rico; rig → su andar (lo decide CharSpec).
+                    metas.push(ch.to_meta(*pos, s.facing, s.clip, *at, Some(camera.eye)));
+                }
+                // Recorrido: un marcador (cubo) por waypoint del actor dirigido; el
+                // seleccionado, más grande y dorado.
+                if let Some((keys, sel)) = &path {
+                    for (i, (gx, gz)) in keys.iter().enumerate() {
+                        let pos = p.ground_at_world(*gx as i32, *gz as i32) - half + Vec3::new(0.0, 1.4, 0.0);
+                        let (color, sz) = if i == *sel { ([0.96, 0.84, 0.20], 0.8) } else { ([0.55, 0.58, 0.66], 0.5) };
+                        let (mut mv, mut mi) = (Vec::new(), Vec::new());
+                        push_cube(&mut mv, &mut mi, Mat4::from_translation(pos) * Mat4::from_scale(Vec3::splat(sz)), color);
+                        metas.push((Mat4::IDENTITY, mv, mi));
+                    }
+                }
+                // Atmósfera de apertura (bruma + fundido desde negro): cada cuadro,
+                // después de `ensure_window` (que resetea la niebla) y antes de pintar.
+                // Marcadores de los SUCESOS dictados (siempre visibles: se dirige
+                // viéndolos). Verde = aparece un ser, azul = cámara, amarillo = marca.
+                if let Some(sc) = &scene {
+                    for s in &sc.sucesos {
+                        let pos = Vec3::new(s.pos[0], s.pos[1], s.pos[2]) - half
+                            + Vec3::new(0.0, 1.2, 0.0);
+                        let color = match s.tipo {
+                            TipoSuceso::Aparece(_) => [0.35, 0.85, 0.45],
+                            TipoSuceso::Camara => [0.40, 0.65, 0.95],
+                            TipoSuceso::Marca => [0.95, 0.82, 0.30],
+                        };
+                        let (mut mv, mut mi) = (Vec::new(), Vec::new());
+                        push_cube(
+                            &mut mv,
+                            &mut mi,
+                            Mat4::from_translation(pos) * Mat4::from_scale(Vec3::splat(0.6)),
+                            color,
+                        );
+                        metas.push((Mat4::IDENTITY, mv, mi));
+                    }
+                }
+                if !jugando {
+                    if let Some(atm) = scene.as_ref().and_then(|s| s.atmosfera) {
+                        p.set_atmosfera_escena(&atm, time);
+                    }
+                }
+                p.render_scene(device, queue, encoder, target, vp, (rect.x, rect.y, rect.w, rect.h), &camera, &metas);
+            })
+        }
+        Level::Seres => {
+            let sere = sel_sere(model).cloned();
+            let time = model.time;
+            let manada = model.manada;
+            let andar_estado = model.andar_estado;
+            // Previsualizar el estado de andar que se está editando.
+            let estado_clip = match model.andar_estado {
+                0 => Clip::Idle,
+                1 => Clip::Walk,
+                _ => Clip::Run,
+            };
+            View::new(absolute).gpu_paint_with(move |device, queue, encoder, target, rect, vp| {
+                let dim = world_dim(PREVIEW_DIM_XZ);
+                let mut guard = preview.lock().unwrap();
+                let p = guard.get_or_insert_with(|| WorldPreview::build(device, queue, &mr, dim, gen, None));
+                p.rebuild_if(device, queue, &mr, dim, gen, None);
+                let half = Vec3::new(dim[0] as f32, dim[1] as f32, dim[2] as f32) * 0.5;
+                match (&sere, manada) {
+                    // Manada viva: una bandada del ser deambula/se junta por su conducta.
+                    (Some(cs), true) => {
+                        p.ensure_manada(&[(cs.clone(), 9)]);
+                        let metas = p.manada_metas(1.0 / 30.0, None);
+                        let look = p.ground_at(dim[0] / 2, dim[2] / 2) - half + Vec3::new(0.0, 1.0, 0.0);
+                        let camera = Camera3d::orbit(look, yaw, pitch, 32.0);
+                        p.render_scene(device, queue, encoder, target, vp, (rect.x, rect.y, rect.w, rect.h), &camera, &metas);
+                    }
+                    // Turntable de un solo ser.
+                    other => {
+                        p.clear_manada();
+                        match other.0 {
+                            // Humanoide → **VOLUMEN VOXEL redondeado** (vinyl-toy/chibi anclado en
+                            // literatura, ver `humano`), no la malla de cajas. Se muestra con
+                            // `show_grid` (como el swatch de Materiales) + bisel + silueta por
+                            // voxel + AO baja → el ray-marcher lo redondea. Pose estática
+                            // representativa del estado (rebuild sólo al cambiar edad/estado/color).
+                            Some(cs) if cs.cuerpo.is_none() => {
+                                // 72 vox de alto: con la normal ancha del ray-marcher, más
+                                // resolución = superficie MÁS lisa (antes daba más anillos); la
+                                // cara/panza quedan de peluche sin facetas. Re-voxeliza sólo al
+                                // cambiar (edad/estado/color), así el costo extra no pesa por cuadro.
+                                let grid = cs.to_voxel(estado_clip, 1.4, 72);
+                                let gdim = grid.dim();
+                                let qc = |c: [f32; 3]| {
+                                    (((c[0] * 15.0) as u64) << 8)
+                                        | (((c[1] * 15.0) as u64) << 4)
+                                        | ((c[2] * 15.0) as u64)
+                                };
+                                let key = 0xC000_0000_0000_0000u64
+                                    | ((cs.age as u64 & 0xf) << 44)
+                                    | ((andar_estado as u64 & 0xf) << 40)
+                                    | (qc(cs.skin) << 24)
+                                    | (qc(cs.shirt) << 12)
+                                    | qc(cs.pants);
+                                p.show_grid(device, queue, grid, gdim, key);
+                                p.set_lighting(
+                                    [0.44, 0.66, 0.62],
+                                    Atmosphere { sky_zenith: [54, 64, 86], sky_horizon: [120, 128, 140], fog_density: 0.0, god_rays: 0.0 },
+                                );
+                                p.set_detalle(0.0, 1.7, 0.9); // bisel global alto: enciende trace_smooth
+                                p.set_silueta_por_voxel(true); // el bisel por-voxel del ser redondea la silueta
+                                p.set_ao(0.28); // AO baja: sin anillos sobre el cuerpo redondo
+                                let look = Vec3::new(0.0, gdim[1] as f32 * 0.05, 0.0);
+                                let camera = Camera3d::orbit(look, yaw, pitch, gdim[1] as f32 * 1.7);
+                                p.render(device, queue, encoder, target, vp, (rect.x, rect.y, rect.w, rect.h), &camera);
+                            }
+                            // Rig (cuadrúpedo/ave/serpiente) o nada → malla propia (clásico).
+                            maybe => {
+                                let pos = p.ground_at(dim[0] / 2, dim[2] / 2);
+                                let look = pos + Vec3::new(0.0, 1.0, 0.0);
+                                let cam_dist = (dist * 0.06).clamp(3.5, 14.0);
+                                let camera = Camera3d::orbit(look, yaw, pitch, cam_dist);
+                                let metas = match maybe {
+                                    Some(cs) => vec![cs.to_meta(pos, time * 0.6, estado_clip, time, None)],
+                                    None => Vec::new(),
+                                };
+                                p.render_scene(device, queue, encoder, target, vp, (rect.x, rect.y, rect.w, rect.h), &camera, &metas);
+                            }
+                        }
+                    }
+                }
+            })
+        }
+        Level::Interiores => {
+            let interior = interior_sel;
+            View::new(absolute).gpu_paint_with(move |device, queue, encoder, target, rect, vp| {
+                let dim = world_dim(PREVIEW_DIM_XZ);
+                let mut guard = preview.lock().unwrap();
+                let p = guard.get_or_insert_with(|| WorldPreview::build(device, queue, &mr, dim, gen, None));
+                let (ancho, fondo) = interior.as_ref().map(|i| (i.ancho, i.fondo)).unwrap_or((24, 20));
+                // Recorte casa de muñecas: se ocultan los muros/techo del lado de la
+                // cámara para ver adentro. Cambiar el rumbo regenera el grid.
+                let cut = Cutaway::from_yaw(yaw);
+                let key = gen.wrapping_mul(16).wrapping_add(cut.code());
+                if let Some(it) = &interior {
+                    p.show_grid(device, queue, it.build_grid(dim, cut), dim, key);
+                }
+                let half = Vec3::new(dim[0] as f32, dim[1] as f32, dim[2] as f32) * 0.5;
+                let floor_top = Interior::FLOOR_H as f32;
+                let look = Vec3::new(ancho as f32 * 0.5, floor_top + 2.0, fondo as f32 * 0.5) - half;
+                let cam_dist = (dist * 0.18).clamp(14.0, 90.0);
+                let camera = Camera3d::orbit(look, yaw, pitch, cam_dist);
+                if rect.h > 0.0 {
+                    let inv_vp = camera.view_proj(rect.w / rect.h).inverse();
+                    p.set_pick(inv_vp, camera.eye, floor_top - half.y);
+                }
+                // Iluminación de interior: ambiente atenuado (cálido) + las lámparas
+                // encendidas como luces puntuales, para que sus charcos de luz se lean.
+                let luces = interior.as_ref().map(|i| i.luces()).unwrap_or_default();
+                p.set_interior_lighting(
+                    [0.55, 0.5, 0.42],
+                    Atmosphere {
+                        sky_zenith: [40, 46, 62],
+                        sky_horizon: [82, 86, 100],
+                        fog_density: 0.0,
+                        god_rays: 0.0,
+                    },
+                    luces,
+                );
+                p.render(device, queue, encoder, target, vp, (rect.x, rect.y, rect.w, rect.h), &camera);
+            })
+        }
+        // Mundos / Biomas: sólo el terreno, en órbita. Con «simular», corre la ley
+        // Fluir: el agua cae/esparce/cae por cornisas, paso por cuadro.
+        _ => View::new(absolute).gpu_paint_with(move |device, queue, encoder, target, rect, vp| {
+            let dim = world_dim(PREVIEW_DIM_XZ);
+            let ov = mapa_override.as_deref();
+            let mut guard = preview.lock().unwrap();
+            let p = guard.get_or_insert_with(|| WorldPreview::build(device, queue, &mr, dim, gen, ov));
+            p.rebuild_if(device, queue, &mr, dim, gen, ov);
+            p.set_detalle(0.0, 1.6, bisel_global);
+            p.set_silueta_por_voxel(silueta_pv);
+            if simulating {
+                if let Some((g, h)) = fluir {
+                    p.ensure_sim(agua, g, h);
+                    p.sim_step(queue, agua);
+                }
+                if let Some((col, vel)) = crecer {
+                    p.ensure_growth(queue, col, vel);
+                    p.growth_step(queue);
+                }
+                if let Some((color, campos, prog, params, vis)) = &ecuacion {
+                    p.ensure_ecuacion(*color, ECUACION_TOL, campos, *vis);
+                    p.ecuacion_step(queue, prog, params);
+                }
+                if !pobladores.is_empty() {
+                    p.ensure_manada(&pobladores);
+                }
+            } else {
+                p.clear_sim();
+                p.clear_growth();
+                p.clear_ecuacion();
+                p.clear_manada();
+            }
+            let camera = Camera3d::orbit(orbit_center(dim), yaw, pitch, dist);
+            // Con bandada, el mundo se ve vivo: se componen los habitantes caminando.
+            if simulating && p.tiene_manada() {
+                let metas = p.manada_metas(1.0 / 30.0, None);
+                p.render_scene(device, queue, encoder, target, vp, (rect.x, rect.y, rect.w, rect.h), &camera, &metas);
+            } else {
+                p.render(device, queue, encoder, target, vp, (rect.x, rect.y, rect.w, rect.h), &camera);
+            }
+        }),
+    }
+    .draggable(|phase, dx, dy| match phase {
+        DragPhase::Move => Some(Msg::Orbit(dx, dy)),
+        DragPhase::End => None,
+    });
+
+    // Al dirigir, un click (sin arrastrar) coloca la clave seleccionada sobre el suelo.
+    if directing {
+        canvas = canvas.on_click_at(move |lx, ly, rw, rh| {
+            if rw <= 0.0 || rh <= 0.0 {
+                return None;
+            }
+            let ndc_x = lx / rw * 2.0 - 1.0;
+            let ndc_y = 1.0 - ly / rh * 2.0;
+            let guard = preview_click.lock().ok()?;
+            let (gx, gz) = guard.as_ref()?.pick_world(ndc_x, ndc_y)?;
+            Some(Msg::PlaceKeyAt(gx, gz))
+        });
+    }
+    // En el editor de interiores, un click coloca el mueble-pincel sobre el piso.
+    if is_interiores {
+        canvas = canvas.on_click_at(move |lx, ly, rw, rh| {
+            if rw <= 0.0 || rh <= 0.0 {
+                return None;
+            }
+            let ndc_x = lx / rw * 2.0 - 1.0;
+            let ndc_y = 1.0 - ly / rh * 2.0;
+            let guard = preview_click_int.lock().ok()?;
+            let (gx, gz) = guard.as_ref()?.pick_world(ndc_x, ndc_y)?;
+            Some(Msg::PlaceMuebleAt(gx, gz))
+        });
+    }
+    canvas
+}
+
+/// Centro de órbita: el medio del mundo, algo por debajo del tope.
+fn orbit_center(dim: [u32; 3]) -> Vec3 {
+    Vec3::new(dim[0] as f32 * 0.5, dim[1] as f32 * 0.32, dim[2] as f32 * 0.5)
+}
+
+// =============================================================================
+//  Editores por nivel (rail derecho)
+// =============================================================================
+
+/// Editor de interiores: parámetros de la sala (tab 0) y el mueble-pincel (tab 1).
+/// Las piezas se agregan haciendo click sobre el piso en el preview 3D.
+fn interior_editor(model: &Model, tab: usize) -> Vec<View<Msg>> {
+    let theme = &model.theme;
+    let sp = SliderPalette::from_theme(theme);
+    let btn = ButtonPalette::from_theme(theme);
+    let Some(it) = model.project.interiores.iter().find(|x| x.id == model.sel[6]) else {
+        return vec![section_title("sin interior — crea uno", theme)];
+    };
+    if tab == 0 {
+        let ancho = it.ancho as f32;
+        let fondo = it.fondo as f32;
+        vec![
+            section_title("SALA", theme),
+            slider_view("ancho", ancho, 6.0, 60.0, &sp, move |_p, dv| Some(Msg::SetInteriorAncho(ancho + dv))),
+            slider_view("fondo", fondo, 6.0, 60.0, &sp, move |_p, dv| Some(Msg::SetInteriorFondo(fondo + dv))),
+            spacer(4.0),
+            button_view(format!("piso: {}", it.piso.label()), &btn, Msg::CycleInteriorPiso),
+            spacer(3.0),
+            button_view(format!("muro: {}", it.muro.label()), &btn, Msg::CycleInteriorMuro),
+            spacer(3.0),
+            button_view(if it.muros { "muros: sí" } else { "muros: no" }, &btn, Msg::ToggleInteriorMuros),
+            button_view(if it.ventanas { "ventanas: sí" } else { "ventanas: no" }, &btn, Msg::ToggleInteriorVentanas),
+            spacer(3.0),
+            button_view(if it.con_techo { "techo: sí" } else { "techo: no" }, &btn, Msg::ToggleInteriorTecho),
+            spacer(3.0),
+            button_view(format!("tipo techo: {}", it.techo.label()), &btn, Msg::CycleInteriorTecho),
+            spacer(3.0),
+            spacer(8.0),
+            section_title("MUEBLES", theme),
+            body_text(format!("{} colocados", it.piezas.len()), theme.fg_muted, theme),
+            spacer(4.0),
+            button_view("- quitar último", &btn, Msg::RemoveLastPieza),
+            spacer(3.0),
+            button_view("vaciar", &btn, Msg::ClearPiezas),
+        ]
+    } else {
+        let rumbo = ["norte", "este", "sur", "oeste"][(model.mueble_facing & 3) as usize];
+        vec![
+            section_title("MUEBLE (PINCEL)", theme),
+            button_view(format!("mueble: {}", model.mueble_brush.label()), &btn, Msg::CycleMuebleBrush),
+            spacer(3.0),
+            button_view(format!("orientación: {rumbo}"), &btn, Msg::CycleMuebleFacing),
+            spacer(8.0),
+            body_text("click en el piso para colocar el mueble".into(), theme.fg_placeholder, theme),
+        ]
+    }
+}
+
+fn editor(model: &Model, tab: usize) -> Vec<View<Msg>> {
+    match model.level {
+        Level::Leyes => ley_editor(model),
+        Level::Materiales => material_editor(model, tab),
+        Level::Seres => sere_editor(model, tab),
+        Level::Biomas => bioma_editor(model, tab),
+        Level::Mundos => mundo_editor(model, tab),
+        Level::Escenas => scene_editor(model, tab),
+        Level::Interiores => interior_editor(model, tab),
+    }
+}
+
+fn ley_editor(model: &Model) -> Vec<View<Msg>> {
+    let theme = &model.theme;
+    let sp = SliderPalette::from_theme(theme);
+    let btn = ButtonPalette::from_theme(theme);
+    let Some(l) = model.project.ley(model.sel[0]) else {
+        return vec![section_title("sin ley — crea una", theme)];
+    };
+    // El cabezal ("Parámetros") lo pinta el widget; aquí va el contenido directo.
+    let mut v = vec![button_view(format!("tipo: {}", l.kind.label()), &btn, Msg::CycleLeyKind)];
+    match &l.kind {
+        // --- Ley autorable: editor de ecuaciones + laboratorio -----------------
+        LeyKind::Ecuacion { campos, fuentes, params } => {
+            v.push(spacer(4.0));
+            v.push(button_view("↻ preset (catálogo)", &btn, Msg::LeyPreset));
+            v.push(spacer(4.0));
+            v.push(button_view(
+                if model.leyes_node_mode { "▦ vista: grafo → laboratorio" } else { "▦ vista: laboratorio → grafo" },
+                &btn,
+                Msg::ToggleLeyesView,
+            ));
+            v.push(spacer(6.0));
+            v.push(button_view(
+                if model.simulating { "⏸ pausar" } else { "▶ simular" },
+                &btn,
+                Msg::ToggleSim,
+            ));
+            v.push(spacer(4.0));
+            v.push(button_view("⟲ resembrar", &btn, Msg::ReseedLab));
+            if campos.len() > 1 {
+                let vis = model.lab.as_ref().map(|x| x.vis).unwrap_or(0);
+                let vname = campos.get(vis).map(|c| c.name.as_str()).unwrap_or("?");
+                v.push(spacer(4.0));
+                v.push(button_view(format!("ver campo: {vname}"), &btn, Msg::CycleLabField));
+            }
+            // Error de compilación, si la fórmula no parsea.
+            if let Some(Err(err)) = l.kind.compile_ecuacion() {
+                v.push(spacer(6.0));
+                v.push(body_text(format!("⚠ {err}"), Color::from_rgba8(232, 128, 96, 255), theme));
+            }
+            v.push(spacer(8.0));
+            v.push(section_title("ECUACIONES  (Δcampo/dt)", theme));
+            for (i, campo) in campos.iter().enumerate() {
+                v.push(body_text(format!("Δ{}/dt =", campo.name), theme.fg_muted, theme));
+                let editing = model.formula_focused && model.formula_target == i;
+                if editing {
+                    v.push(text_input_view_full(
+                        &model.formula_input,
+                        "fórmula…",
+                        true,
+                        &TextInputPalette::from_theme(theme),
+                        Msg::FormulaCampo,
+                    ));
+                } else {
+                    let src = fuentes.get(i).cloned().unwrap_or_default();
+                    let label = if src.is_empty() { "(tocar para editar)".to_string() } else { src };
+                    v.push(button_view(label, &btn, Msg::FormulaFocus(i)));
+                }
+                v.push(spacer(4.0));
+            }
+            v.push(button_view("+ campo", &btn, Msg::AddCampo));
+            if campos.len() > 1 {
+                v.push(spacer(4.0));
+                v.push(button_view("− campo", &btn, Msg::RemoveCampo));
+            }
+            v.push(spacer(8.0));
+            v.push(section_title("PARÁMETROS", theme));
+            for (i, (name, value, min, max)) in l.kind.ecuacion_params().into_iter().enumerate() {
+                v.push(slider_view(name, value, min, max, &sp, move |_p, dv| {
+                    Some(Msg::SetEcuParam(i, value + dv))
+                }));
+            }
+            v.push(spacer(4.0));
+            v.push(button_view("+ parámetro", &btn, Msg::AddEcuParam));
+            v.push(spacer(4.0));
+            v.push(button_view("− parámetro", &btn, Msg::RemoveEcuParam));
+            v.push(spacer(8.0));
+            v.push(body_text(
+                "términos: lap(c) · avg(c) · min6(c)/max6(c)/sum6(c) · abajo(c)… · clamp/min/max · < > · dt".into(),
+                theme.fg_placeholder,
+                theme,
+            ));
+            // Paleta de nodos (sólo en modo grafo): tocar = agregar un nodo suelto.
+            if model.leyes_node_mode {
+                v.push(spacer(8.0));
+                v.push(section_title("NODOS  (tocar = agregar)", theme));
+                v.push(button_view("const 1", &btn, Msg::GraphAddNode(NodeOp::Const(1.0))));
+                v.push(button_view("dt", &btn, Msg::GraphAddNode(NodeOp::Dt)));
+                for (f, c) in campos.iter().enumerate() {
+                    let f = f as u16;
+                    v.push(button_view(format!("campo {}", c.name), &btn, Msg::GraphAddNode(NodeOp::Field(f))));
+                    v.push(button_view(format!("lap {}", c.name), &btn, Msg::GraphAddNode(NodeOp::Lap(f))));
+                    v.push(button_view(format!("avg {}", c.name), &btn, Msg::GraphAddNode(NodeOp::Vecinos(Reduce::Promedio, f))));
+                }
+                for (p, pd) in params.iter().enumerate() {
+                    v.push(button_view(format!("param {}", pd.name), &btn, Msg::GraphAddNode(NodeOp::Param(p as u16))));
+                }
+                for (lbl, op) in [
+                    ("+", NodeOp::Bin(BinOp::Add)),
+                    ("−", NodeOp::Bin(BinOp::Sub)),
+                    ("×", NodeOp::Bin(BinOp::Mul)),
+                    ("÷", NodeOp::Bin(BinOp::Div)),
+                    ("min", NodeOp::Bin(BinOp::Min)),
+                    ("max", NodeOp::Bin(BinOp::Max)),
+                    ("<", NodeOp::Bin(BinOp::Lt)),
+                    (">", NodeOp::Bin(BinOp::Gt)),
+                    ("abs", NodeOp::Un(UnOp::Abs)),
+                    ("−x", NodeOp::Un(UnOp::Neg)),
+                    ("clamp", NodeOp::Clamp),
+                ] {
+                    v.push(button_view(lbl, &btn, Msg::GraphAddNode(op)));
+                }
+                v.push(spacer(4.0));
+                v.push(body_text(
+                    "arrastra salida→entrada para conectar · right‑click borra un nodo".into(),
+                    theme.fg_placeholder,
+                    theme,
+                ));
+            }
+        }
+        // --- Leyes nativas (Fluir/Crecer): sliders cableados -------------------
+        _ => {
+            v.push(spacer(6.0));
+            v.push(section_title("PARÁMETROS", theme));
+            if l.kind.params().is_empty() {
+                v.push(body_text("este tipo no tiene parámetros".into(), theme.fg_placeholder, theme));
+            }
+            for (i, (name, value, min, max)) in l.kind.params().into_iter().enumerate() {
+                v.push(slider_view(name, value, min, max, &sp, move |_p, dv| {
+                    Some(Msg::SetLeyParam(i, value + dv))
+                }));
+            }
+        }
+    }
+    v
+}
+
+fn material_editor(model: &Model, tab: usize) -> Vec<View<Msg>> {
+    let theme = &model.theme;
+    let sp = SliderPalette::from_theme(theme);
+    let btn = ButtonPalette::from_theme(theme);
+    let Some(m) = model.project.material(model.sel[1]) else {
+        return vec![section_title("sin material — crea uno", theme)];
+    };
+    if tab == 0 {
+        let resolved = model.project.resolve_material(m.id);
+        let parent_name = m
+            .parent
+            .and_then(|pid| model.project.material(pid))
+            .map(|p| p.name.clone())
+            .unwrap_or_else(|| "— ninguno".into());
+        let rgb = m.color.unwrap_or([
+            resolved.color[0] as f32 / 255.0,
+            resolved.color[1] as f32 / 255.0,
+            resolved.color[2] as f32 / 255.0,
+        ]);
+        let grain = m.grain.unwrap_or(resolved.grain);
+        let mut v = vec![
+            button_view(format!("rol: {}", m.role.label()), &btn, Msg::CycleMatRole),
+            spacer(4.0),
+            button_view(format!("padre: {parent_name}"), &btn, Msg::CycleMatParent),
+            spacer(6.0),
+            section_title("COLOR", theme),
+        ];
+        for (ch, label) in [(0usize, "rojo"), (1, "verde"), (2, "azul")] {
+            let val = rgb[ch];
+            v.push(slider_view(label, val, 0.0, 1.0, &sp, move |_p, dv| Some(Msg::SetMatColor(ch, val + dv))));
+        }
+        v.push(slider_view("grano", grain, 0.0, 1.0, &sp, move |_p, dv| Some(Msg::SetMatGrain(grain + dv))));
+        let brillo = m.brillo.unwrap_or(resolved.brillo);
+        v.push(slider_view("brillo (lustre)", brillo, 0.0, 1.0, &sp, move |_p, dv| Some(Msg::SetMatBrillo(brillo + dv))));
+        // Detalle sub-voxel (look global del ray-march; el preview aplica el del
+        // material en foco). Rompe la rectangularidad del voxel a corta distancia.
+        v.push(spacer(6.0));
+        v.push(section_title("DETALLE SUB-VOXEL", theme));
+        let (rug, bis) = model.project.detalle_material(m.id);
+        let rug_v = m.rugosidad.unwrap_or(rug);
+        v.push(slider_view("rugosidad", rug_v, 0.0, 1.5, &sp, move |_p, dv| Some(Msg::SetMatRugosidad(rug_v + dv))));
+        let bis_v = m.bisel.unwrap_or(bis);
+        v.push(slider_view("bisel (pendientes)", bis_v, 0.0, 1.0, &sp, move |_p, dv| Some(Msg::SetMatBisel(bis_v + dv))));
+        v
+    } else {
+        let mut v: Vec<View<Msg>> = Vec::new();
+        for (i, u) in m.leyes.iter().enumerate() {
+            let name = model.project.ley(u.ley).map(|l| l.name.clone()).unwrap_or_else(|| "?".into());
+            v.push(button_view(format!("· {name}  (cambiar)"), &btn, Msg::CycleMatLey(i)));
+        }
+        if m.leyes.is_empty() {
+            v.push(body_text("sin leyes aplicadas".into(), theme.fg_placeholder, theme));
+        }
+        v.push(spacer(6.0));
+        v.push(button_view("+ agregar ley", &btn, Msg::AddMatLey));
+        v.push(spacer(4.0));
+        v.push(button_view("− quitar última", &btn, Msg::RemoveMatLey));
+        v
+    }
+}
+
+fn sere_editor(model: &Model, tab: usize) -> Vec<View<Msg>> {
+    let theme = &model.theme;
+    let sp = SliderPalette::from_theme(theme);
+    let btn = ButtonPalette::from_theme(theme);
+    let Some(c) = sel_sere(model) else {
+        return vec![section_title("sin ser — crea o genera uno", theme)];
+    };
+    match tab {
+        0 => vec![
+            button_view(format!("forma: {}", c.cuerpo_label()), &btn, Msg::CycleSereCuerpo),
+            spacer(4.0),
+            button_view(format!("edad: {}", c.age.label()), &btn, Msg::CycleSereAge),
+        ],
+        1 => andar_tools(model, c),
+        2 => conducta_tools(model, c),
+        3 => color_tools(Part::Skin, c.skin, &sp),
+        4 => color_tools(Part::Shirt, c.shirt, &sp),
+        _ => color_tools(Part::Pants, c.pants, &sp),
+    }
+}
+
+/// Si el ser todavía no tiene impulsos propios (datos viejos), los siembra con los de
+/// fábrica para que el editor tenga qué mostrar/editar (mismo comportamiento en vivo).
+fn materializar_impulsos(c: &mut llimphi_voxel::CharSpec) {
+    if c.conducta.impulsos.is_empty() {
+        c.conducta.impulsos = llimphi_voxel::default_impulsos();
+    }
+}
+
+/// Editor de la **conducta** (capa 3) de un ser: sliders de locomoción (params) +
+/// **impulsos de steering autorables** (primitiva ciclable + fórmula de peso, la misma
+/// máquina de ecuaciones que las Leyes) + toggle para soltar una manada viva.
+fn conducta_tools(model: &Model, c: &llimphi_voxel::CharSpec) -> Vec<View<Msg>> {
+    let theme = &model.theme;
+    let sp = SliderPalette::from_theme(theme);
+    let btn = ButtonPalette::from_theme(theme);
+    // El cabezal ("Conducta") lo pinta el widget; arranca con los sliders de params.
+    let mut v: Vec<View<Msg>> = Vec::new();
+    for (i, (name, value, min, max)) in c.conducta.params().into_iter().enumerate() {
+        v.push(slider_view(name, value, min, max, &sp, move |_p, dv| Some(Msg::SetConducta(i, value + dv))));
+    }
+
+    // --- Impulsos de steering (dirección base × fórmula de peso) -----------------
+    v.push(spacer(8.0));
+    v.push(section_title("IMPULSOS  (dirección × peso)", theme));
+    let impulsos = c.conducta.impulsos_efectivos();
+    let sym = llimphi_voxel::Conducta::symbols();
+    for (i, imp) in impulsos.iter().enumerate() {
+        v.push(button_view(format!("{} · {}", i + 1, imp.primitiva.label()), &btn, Msg::CondCycleImpulso(i)));
+        let editing = model.cond_formula_focused && model.cond_formula_target == i;
+        if editing {
+            v.push(text_input_view_full(
+                &model.cond_formula_input,
+                "peso…",
+                true,
+                &TextInputPalette::from_theme(theme),
+                Msg::CondFormulaCampo,
+            ));
+        } else {
+            let src = if imp.peso.is_empty() { "(tocar para editar)".to_string() } else { imp.peso.clone() };
+            v.push(button_view(format!("peso = {src}"), &btn, Msg::CondFormulaFocus(i)));
+        }
+        // Error de parseo de esta fórmula, si lo hay.
+        if let Err(err) = llimphi_voxel::Expr::parse(&imp.peso, &sym) {
+            v.push(body_text(format!("⚠ {err}"), Color::from_rgba8(232, 128, 96, 255), theme));
+        }
+        v.push(spacer(4.0));
+    }
+    v.push(button_view("+ impulso", &btn, Msg::CondAddImpulso));
+    if impulsos.len() > 1 {
+        v.push(spacer(4.0));
+        v.push(button_view("− impulso", &btn, Msg::CondRemoveImpulso));
+    }
+    v.push(spacer(6.0));
+    v.push(body_text(
+        "percepts: cercania_manada · cercania_amenaza · apinamiento · azar · en_suelo · dt".into(),
+        theme.fg_placeholder,
+        theme,
+    ));
+
+    v.push(spacer(8.0));
+    v.push(section_title("PREVIEW", theme));
+    v.push(button_view(
+        if model.manada { "⏸ detener manada" } else { "▶ soltar manada" },
+        &btn,
+        Msg::ToggleManada,
+    ));
+    v.push(spacer(4.0));
+    v.push(body_text("una manada del ser deambula/se junta/huye según sus impulsos".into(), theme.fg_placeholder, theme));
+    v
+}
+
+/// Editor del **andar** (capa 2) de un ser-rig: estado a editar/previsualizar +
+/// cadencia + cuánto balancea cada articulación. El humanoide usa animaciones fijas.
+fn andar_tools<'a>(model: &Model, c: &'a llimphi_voxel::CharSpec) -> Vec<View<Msg>> {
+    let theme = &model.theme;
+    let sp = SliderPalette::from_theme(theme);
+    let btn = ButtonPalette::from_theme(theme);
+    let Some(mov) = &c.cuerpo else {
+        return vec![body_text(
+            "el humanoide usa animaciones fijas — cambia la «forma» a un rig (cuadrúpedo, ave…) para editar su andar".into(),
+            theme.fg_placeholder,
+            theme,
+        )];
+    };
+    let est = model.andar_estado.min(2);
+    let andar = mov.andares.estado(est);
+    let mut v = vec![
+        button_view(
+            format!("estado: {}", llimphi_voxel::Andares::LABELS[est]),
+            &btn,
+            Msg::CycleAndarEstado,
+        ),
+        spacer(4.0),
+        slider_view("cadencia (ritmo)", andar.cadencia, 0.0, 18.0, &sp, {
+            let cad = andar.cadencia;
+            move |_p, dv| Some(Msg::SetAndarCadencia(cad + dv))
+        }),
+        spacer(6.0),
+        section_title("BALANCEO POR PARTE", theme),
+    ];
+    for (i, seg) in mov.rig.segmentos.iter().enumerate() {
+        let amp = andar.osc.get(i).map(|o| o.amplitud).unwrap_or(0.0);
+        v.push(slider_view(&seg.nombre, amp, 0.0, 1.5, &sp, move |_p, dv| {
+            Some(Msg::SetAndarAmplitud(i, amp + dv))
+        }));
+    }
+    v
+}
+
+fn bioma_editor(model: &Model, tab: usize) -> Vec<View<Msg>> {
+    let theme = &model.theme;
+    let sp = SliderPalette::from_theme(theme);
+    let btn = ButtonPalette::from_theme(theme);
+    let Some(b) = model.project.bioma(model.sel[3]) else {
+        return vec![section_title("sin bioma — crea uno", theme)];
+    };
+    let mat_name = |id: u64| model.project.material(id).map(|m| m.name.clone()).unwrap_or_else(|| "—".into());
+    match tab {
+        0 => vec![
+            bslider(&sp, "base (llanura)", b.base, 0.0, 0.9, BiomaField::Base),
+            bslider(&sp, "dunas", b.dune, 0.0, 0.4, BiomaField::Dune),
+            bslider(&sp, "relieve (alto)", b.relief, 0.0, 1.0, BiomaField::Relief),
+            bslider(&sp, "densidad montañas", b.mountains, 0.0, 1.0, BiomaField::Mountains),
+            bslider(&sp, "nivel del agua", b.water_level, 0.0, 0.9, BiomaField::Water),
+            bslider(&sp, "densidad ríos", b.rivers, 0.0, 1.0, BiomaField::Rivers),
+            bslider(&sp, "altura cumbre", b.peak_at, 0.0, 1.0, BiomaField::PeakAt),
+            spacer(8.0),
+            section_title("SIMULAR LEYES", theme),
+            button_view(if model.simulating { "⏸ detener" } else { "▶ simular (agua · plantas)" }, &btn, Msg::ToggleSim),
+        ],
+        1 => vec![
+            button_view(format!("suelo: {}", mat_name(b.ground)), &btn, Msg::CycleBiomaGround),
+            spacer(4.0),
+            button_view(format!("acantilado: {}", mat_name(b.cliff)), &btn, Msg::CycleBiomaCliff),
+            spacer(4.0),
+            button_view(
+                format!("cumbre: {}", b.peak.map(mat_name).unwrap_or_else(|| "ninguna".into())),
+                &btn,
+                Msg::CycleBiomaPeak,
+            ),
+        ],
+        2 => {
+            let mut v: Vec<View<Msg>> = Vec::new();
+            for (i, o) in b.objetos.iter().enumerate() {
+                let name = mat_name(o.material);
+                v.push(button_view(format!("forma: {}", o.forma.label()), &btn, Msg::CycleObjetoForma(i)));
+                v.push(spacer(3.0));
+                v.push(button_view(format!("material: {name}"), &btn, Msg::CycleObjetoMaterial(i)));
+                let d = o.densidad;
+                v.push(slider_view("densidad", d, 0.0, 0.05, &sp, move |_p, dv| Some(Msg::SetObjetoDensidad(i, d + dv))));
+                v.push(spacer(6.0));
+            }
+            if b.objetos.is_empty() {
+                v.push(body_text("sin objetos".into(), theme.fg_placeholder, theme));
+            }
+            v.push(spacer(6.0));
+            v.push(button_view("+ objeto", &btn, Msg::AddBiomaObjeto));
+            v.push(spacer(4.0));
+            v.push(button_view("− quitar", &btn, Msg::RemoveBiomaObjeto));
+            v
+        }
+        3 => mineral_editor(model, &sp, &btn),
+        4 => casa_editor(model, &sp, &btn),
+        5 => fauna_editor(model, &sp, &btn),
+        _ => {
+            let mut v: Vec<View<Msg>> = Vec::new();
+            for (i, u) in b.seres.iter().enumerate() {
+                let name = model.project.sere(u.sere).map(|s| s.name.clone()).unwrap_or_else(|| "—".into());
+                v.push(button_view(format!("ser: {name}"), &btn, Msg::CycleBiomaSere(i)));
+                let prob = u.probabilidad;
+                v.push(slider_view("cantidad", prob, 0.0, 1.0, &sp, move |_p, dv| {
+                    Some(Msg::SetBiomaSereProb(i, prob + dv))
+                }));
+                v.push(spacer(4.0));
+            }
+            if b.seres.is_empty() {
+                v.push(body_text("sin seres — agrega para poblar el bioma".into(), theme.fg_placeholder, theme));
+            }
+            v.push(spacer(4.0));
+            v.push(button_view("+ ser", &btn, Msg::AddBiomaSere));
+            v.push(spacer(4.0));
+            v.push(button_view("− quitar", &btn, Msg::RemoveBiomaSere));
+            v.push(spacer(8.0));
+            v.push(body_text("se ven con «▶ simular» en Mundos/Biomas".into(), theme.fg_placeholder, theme));
+            v
+        }
+    }
+}
+
+/// Editor de las **casas** que el bioma esparce (pueblo procedural por semilla):
+/// por uso, el estilo y su densidad. El mundo las genera al cambiar la semilla.
+fn casa_editor(model: &Model, sp: &SliderPalette, btn: &ButtonPalette) -> Vec<View<Msg>> {
+    let theme = &model.theme;
+    let Some(b) = model.project.bioma(model.sel[3]) else {
+        return vec![section_title("sin bioma — crea uno", theme)];
+    };
+    let mut v = vec![
+        section_title("CASAS (PUEBLO)", theme),
+        body_text("se esparcen por la semilla del mundo".into(), theme.fg_placeholder, theme),
+        spacer(6.0),
+    ];
+    // Preset de tipo de pueblo: rellena la mezcla de casas + densidad de un toque.
+    v.push(button_view(format!("preset: {}", model.pueblo_brush.label()), btn, Msg::CyclePuebloTipo));
+    v.push(spacer(3.0));
+    v.push(button_view("aplicar preset", btn, Msg::AplicarPuebloTipo));
+    v.push(spacer(8.0));
+    // Densidad urbana: cuánto se agrupan las casas (manchas de pueblo) vs campo abierto.
+    let du = b.densidad_urbana;
+    v.push(slider_view("densidad urbana", du, 0.05, 0.95, sp, move |_p, dv| {
+        Some(Msg::SetDensidadUrbana(du + dv))
+    }));
+    v.push(spacer(8.0));
+    for (i, cu) in b.casas.iter().enumerate() {
+        v.push(button_view(format!("estilo: {}", cu.tipo.label()), btn, Msg::CycleCasaTipo(i)));
+        let d = cu.densidad;
+        v.push(slider_view("densidad", d, 0.0, 1.0, sp, move |_p, dv| Some(Msg::SetCasaDensidad(i, d + dv))));
+        v.push(spacer(6.0));
+    }
+    if b.casas.is_empty() {
+        v.push(body_text("sin casas — pon algunas para armar un pueblo".into(), theme.fg_placeholder, theme));
+    }
+    v.push(spacer(6.0));
+    v.push(button_view("+ casa", btn, Msg::AddBiomaCasa));
+    v.push(spacer(4.0));
+    v.push(button_view("- quitar", btn, Msg::RemoveBiomaCasa));
+    v
+}
+
+/// Editor de la **fauna** del bioma: qué animales ([`Bicho`]) pueblan el mundo y
+/// con qué densidad. El mundo los esparce por semilla, parados sobre el terreno.
+fn fauna_editor(model: &Model, sp: &SliderPalette, btn: &ButtonPalette) -> Vec<View<Msg>> {
+    let theme = &model.theme;
+    let Some(b) = model.project.bioma(model.sel[3]) else {
+        return vec![section_title("sin bioma — crea uno", theme)];
+    };
+    let mut v = vec![
+        section_title("FAUNA (SERES)", theme),
+        body_text("animales esparcidos por la semilla del mundo".into(), theme.fg_placeholder, theme),
+        spacer(6.0),
+    ];
+    for (i, fu) in b.fauna.iter().enumerate() {
+        v.push(button_view(format!("ser: {}", fu.bicho.label()), btn, Msg::CycleFaunaBicho(i)));
+        let d = fu.densidad;
+        v.push(slider_view("densidad", d, 0.0, 1.0, sp, move |_p, dv| Some(Msg::SetFaunaDensidad(i, d + dv))));
+        v.push(spacer(6.0));
+    }
+    if b.fauna.is_empty() {
+        v.push(body_text("sin fauna — agrega animales para dar vida al bioma".into(), theme.fg_placeholder, theme));
+    }
+    v.push(spacer(6.0));
+    v.push(button_view("+ animal", btn, Msg::AddBiomaFauna));
+    v.push(spacer(4.0));
+    v.push(button_view("- quitar", btn, Msg::RemoveBiomaFauna));
+    v
+}
+
+/// Editor de los **minerales** del bioma seleccionado, con **todos sus factores**:
+/// tipo semilla, aspecto, abundancia, banda de profundidad, color y —lo que el
+/// ray-march sí puede pintar— dureza (grano) y brillo (lustre especular).
+fn mineral_editor(model: &Model, sp: &SliderPalette, btn: &ButtonPalette) -> Vec<View<Msg>> {
+    let theme = &model.theme;
+    let Some(b) = model.project.bioma(model.sel[3]) else {
+        return vec![section_title("sin bioma — crea uno", theme)];
+    };
+    let mut v: Vec<View<Msg>> = Vec::new();
+    for (i, mu) in b.minerales.iter().enumerate() {
+        v.push(button_view(format!("mineral: {}", mu.mineral.label()), btn, Msg::CycleMineralTipo(i)));
+        v.push(spacer(3.0));
+        v.push(button_view(format!("aspecto: {}", mu.aspecto.label()), btn, Msg::CycleMineralAspecto(i)));
+        let ab = mu.abundancia;
+        v.push(slider_view("abundancia", ab, 0.0, 1.0, sp, move |_p, dv| Some(Msg::SetMineralAbundancia(i, ab + dv))));
+        let pmin = mu.prof_min;
+        v.push(slider_view("prof. mín", pmin, 0.0, 1.0, sp, move |_p, dv| Some(Msg::SetMineralProfMin(i, pmin + dv))));
+        let pmax = mu.prof_max;
+        v.push(slider_view("prof. máx", pmax, 0.0, 1.0, sp, move |_p, dv| Some(Msg::SetMineralProfMax(i, pmax + dv))));
+        // Color (RGB).
+        let (r, g, bl) = (mu.color[0] as f32 / 255.0, mu.color[1] as f32 / 255.0, mu.color[2] as f32 / 255.0);
+        v.push(slider_view("color R", r, 0.0, 1.0, sp, move |_p, dv| Some(Msg::SetMineralColor(i, 0, r + dv))));
+        v.push(slider_view("color G", g, 0.0, 1.0, sp, move |_p, dv| Some(Msg::SetMineralColor(i, 1, g + dv))));
+        v.push(slider_view("color B", bl, 0.0, 1.0, sp, move |_p, dv| Some(Msg::SetMineralColor(i, 2, bl + dv))));
+        // Dureza Mohs (grano) y brillo (lustre especular).
+        let dur = mu.dureza;
+        v.push(slider_view("dureza (Mohs)", dur, 1.0, 10.0, sp, move |_p, dv| Some(Msg::SetMineralDureza(i, dur + dv))));
+        let br = mu.brillo;
+        v.push(slider_view("brillo (lustre)", br, 0.0, 1.0, sp, move |_p, dv| Some(Msg::SetMineralBrillo(i, br + dv))));
+        v.push(spacer(8.0));
+    }
+    if b.minerales.is_empty() {
+        v.push(body_text("sin minerales — el terreno queda de pura roca".into(), theme.fg_placeholder, theme));
+    }
+    v.push(spacer(6.0));
+    v.push(button_view("+ mineral", btn, Msg::AddBiomaMineral));
+    v.push(spacer(4.0));
+    v.push(button_view("− quitar", btn, Msg::RemoveBiomaMineral));
+    v
+}
+
+fn mundo_editor(model: &Model, tab: usize) -> Vec<View<Msg>> {
+    let theme = &model.theme;
+    let btn = ButtonPalette::from_theme(theme);
+    let Some(m) = model.project.mundo(model.sel[4]) else {
+        return vec![section_title("sin mundo — crea uno", theme)];
+    };
+    if tab == 0 {
+        vec![
+            text_input_view_full(
+                &model.seed_input,
+                "número…",
+                model.seed_focused,
+                &TextInputPalette::from_theme(theme),
+                Msg::SeedCampo,
+            ),
+            spacer(6.0),
+            button_view("🎲 random", &btn, Msg::SeedRandom),
+            spacer(8.0),
+            body_text(format!("semilla actual: {}", m.seed), theme.fg_muted, theme),
+            spacer(10.0),
+            section_title("SIMULAR LEYES", theme),
+            button_view(if model.simulating { "⏸ detener" } else { "▶ simular (agua · plantas)" }, &btn, Msg::ToggleSim),
+        ]
+    } else {
+        let bname = m
+            .biomas
+            .first()
+            .and_then(|&id| model.project.bioma(id))
+            .map(|b| b.name.clone())
+            .unwrap_or_else(|| "—".into());
+        vec![
+            button_view(format!("bioma: {bname}"), &btn, Msg::CycleMundoBioma),
+            spacer(8.0),
+            body_text("un mundo se compone de uno o más biomas".into(), theme.fg_placeholder, theme),
+        ]
+    }
+}
+
+fn scene_editor(model: &Model, tab: usize) -> Vec<View<Msg>> {
+    let theme = &model.theme;
+    let sp = SliderPalette::from_theme(theme);
+    let btn = ButtonPalette::from_theme(theme);
+    let Some(s) = sel_scene(model) else {
+        return vec![section_title("sin escena — genera una con IA", theme)];
+    };
+    match tab {
+        0 => {
+            let dur = s.duration;
+            let mundo_name = model.project.mundo(s.mundo).map(|m| m.name.clone()).unwrap_or_else(|| "—".into());
+            let t = model.time;
+            vec![
+                button_view(format!("mundo: {mundo_name}"), &btn, Msg::CycleSceneMundo),
+                spacer(6.0),
+                slider_view("duración (s)", dur, 1.0, 20.0, &sp, move |_p, dv| Some(Msg::SetSceneDur(dur + dv))),
+                spacer(6.0),
+                button_view(if model.playing { "❚❚ pausa" } else { "▶ reproducir" }, &btn, Msg::TogglePlay),
+                spacer(4.0),
+                slider_view("tiempo", t.min(dur), 0.0, dur, &sp, move |_p, dv| Some(Msg::Scrub(t + dv))),
+                spacer(6.0),
+                body_text(format!("{} actores", s.actors.len()), theme.fg_muted, theme),
+            ]
+        }
+        1 => reparto_tools(model, s),
+        2 => {
+            let cam_label = if model.script_cam { "cámara: guion" } else { "cámara: órbita" };
+            vec![
+                button_view(cam_label, &btn, Msg::ToggleSceneCam),
+                spacer(4.0),
+                body_text(format!("{} planos", s.shots.len()), theme.fg_muted, theme),
+                spacer(4.0),
+                button_view("+ plano aquí", &btn, Msg::AddShot),
+                spacer(4.0),
+                button_view("− quitar plano", &btn, Msg::RemoveShot),
+            ]
+        }
+        _ => vec![
+            button_view(if model.exporting { "exportando…" } else { "🎬 exportar video" }, &btn, Msg::ExportVideo),
+            spacer(8.0),
+            body_text("renderiza el guion a un .mkv (puede tardar)".into(), theme.fg_placeholder, theme),
+        ],
+    }
+}
+
+/// **Reparto** (filmografía): dirigir quién actúa y su recorrido (waypoints).
+fn reparto_tools(model: &Model, s: &SceneSpec) -> Vec<View<Msg>> {
+    let theme = &model.theme;
+    let sp = SliderPalette::from_theme(theme);
+    let btn = ButtonPalette::from_theme(theme);
+    let dimx = world_dim(PREVIEW_DIM_XZ)[0] as f32;
+    let a = model.actor_sel.min(s.actors.len().saturating_sub(1));
+
+    let mut v: Vec<View<Msg>> = Vec::new();
+    for (i, act) in s.actors.iter().enumerate() {
+        let nombre = model.project.seres.get(act.character).map(|c| c.name.clone()).unwrap_or_else(|| "—".into());
+        let label = format!("{nombre} · {} claves", act.keys.len());
+        v.push(selectable_row(label, i == a, Msg::SelectActor(i), theme));
+    }
+    v.push(spacer(6.0));
+    v.push(crud_pair("+ actor", Msg::AddActor, "− actor", Msg::RemoveActor, &btn));
+
+    let Some(act) = s.actors.get(a) else { return v };
+    let nombre = model.project.seres.get(act.character).map(|c| c.name.clone()).unwrap_or_else(|| "—".into());
+    v.push(spacer(8.0));
+    v.push(button_view(format!("actúa: {nombre}"), &btn, Msg::CycleActorSere));
+
+    // Recorrido: las claves (waypoints) del actor seleccionado.
+    v.push(spacer(8.0));
+    v.push(section_title("RECORRIDO", theme));
+    let k = model.key_sel.min(act.keys.len().saturating_sub(1));
+    for (i, key) in act.keys.iter().enumerate() {
+        let clip = key.clip.unwrap_or(Clip::Idle).label();
+        v.push(selectable_row(format!("t={:.1}s · {clip}", key.t), i == k, Msg::SelectKey(i), theme));
+    }
+    v.push(spacer(4.0));
+    v.push(crud_pair("+ clave", Msg::AddKey, "− clave", Msg::RemoveKey, &btn));
+
+    if let Some(key) = act.keys.get(k) {
+        v.push(spacer(8.0));
+        v.push(section_title("CLAVE", theme));
+        let (gx, gz, kt) = (key.gx, key.gz, key.t);
+        v.push(slider_view("posición X", gx, 0.0, dimx, &sp, move |_p, dv| Some(Msg::SetKeyPos(true, gx + dv))));
+        v.push(slider_view("posición Z", gz, 0.0, dimx, &sp, move |_p, dv| Some(Msg::SetKeyPos(false, gz + dv))));
+        v.push(slider_view("tiempo (s)", kt, 0.0, s.duration, &sp, move |_p, dv| Some(Msg::SetKeyTime(kt + dv))));
+        v.push(spacer(4.0));
+        v.push(button_view(format!("acción: {}", key.clip.unwrap_or(Clip::Idle).label()), &btn, Msg::CycleKeyClip));
+    }
+    v.push(spacer(8.0));
+    v.push(body_text("dale ▶ reproducir en «Escena» para ver el recorrido".into(), theme.fg_placeholder, theme));
+    v
+}
+
+/// Par de botones en una fila (p.ej. agregar/quitar).
+fn crud_pair(a: &str, ma: Msg, b: &str, mb: Msg, btn: &ButtonPalette) -> View<Msg> {
+    View::new(Style {
+        flex_direction: FlexDirection::Row,
+        size: Size { width: percent(1.0_f32), height: Dimension::auto() },
+        gap: Size { width: length(4.0_f32), height: length(0.0_f32) },
+        ..Default::default()
+    })
+    .children(vec![cell(button_view(a, btn, ma)), cell(button_view(b, btn, mb))])
+}
+
+/// Slider de un campo de relieve del bioma.
+fn bslider(sp: &SliderPalette, label: &str, value: f32, min: f32, max: f32, field: BiomaField) -> View<Msg> {
+    slider_view(label, value, min, max, sp, move |_p, dv| Some(Msg::SetBiomaField(field, value + dv)))
+}
+
+/// Set de sliders R/G/B de una parte coloreable de un ser. El cabezal (Piel/Camiseta/
+/// Pantalón) lo pinta el widget del sidebar, así que aquí van sólo los sliders.
+fn color_tools(part: Part, rgb: [f32; 3], sp: &SliderPalette) -> Vec<View<Msg>> {
+    let mut v: Vec<View<Msg>> = Vec::new();
+    for (ch, label) in [(0usize, "rojo"), (1, "verde"), (2, "azul")] {
+        let value = rgb[ch];
+        v.push(slider_view(label, value, 0.0, 1.0, sp, move |_p, dv| Some(Msg::SetSereColor(part, ch, value + dv))));
+    }
+    v
+}
+
+// =============================================================================
+//  CRUD: crear / duplicar / borrar / renombrar / reseleccionar
+// =============================================================================
+
+/// Crea un item nuevo en el nivel activo y devuelve su id.
+fn new_item(model: &mut Model) -> u64 {
+    let id = model.project.alloc_id();
+    match model.level {
+        Level::Leyes => model.project.leyes.push(llimphi_voxel::Ley {
+            id,
+            name: format!("ley {id}"),
+            kind: LeyKind::Fluir { gravedad: 1.0, horizontal: 0.6 },
+        }),
+        Level::Materiales => model.project.materiales.push(MaterialDef {
+            id,
+            name: format!("material {id}"),
+            parent: None,
+            role: MatRole::Terreno,
+            color: Some([0.6, 0.6, 0.6]),
+            grain: Some(0.4),
+            brillo: None,
+            rugosidad: None,
+            bisel: None,
+            leyes: vec![],
+            builtin: None,
+        }),
+        Level::Seres => {
+            let mut c = CharSpec::new(format!("ser {id}"), Age::Adult);
+            c.id = id;
+            model.project.seres.push(c);
+        }
+        Level::Biomas => model.project.biomas.push(default_bioma(model, id)),
+        Level::Mundos => {
+            let bioma = model.project.biomas.first().map(|b| b.id).unwrap_or(0);
+            model.project.mundos.push(Mundo { id, name: format!("mundo {id}"), seed: 1, biomas: vec![bioma], mapa: None });
+        }
+        Level::Escenas => {
+            let mundo = model.project.mundos.first().map(|m| m.id).unwrap_or(0);
+            let dim = world_dim(PREVIEW_DIM_XZ);
+            let mut s = SceneSpec::walk_and_emote(format!("escena {id}"), mundo, 3, Clip::Wave, dim);
+            s.id = id;
+            model.project.escenas.push(s);
+        }
+        Level::Interiores => model.project.interiores.push(Interior::nuevo(id, format!("sala {id}"))),
+    }
+    id
+}
+
+/// Un bioma por defecto que referencia los materiales del proyecto (o 0).
+fn default_bioma(model: &Model, id: u64) -> Bioma {
+    let ground = model.project.material_id_for(Material::Grass).unwrap_or(0);
+    let cliff = model.project.material_id_for(Material::Rock).unwrap_or(0);
+    Bioma {
+        id,
+        name: format!("bioma {id}"),
+        base: 0.22,
+        dune: 0.10,
+        relief: 0.6,
+        mountains: 0.4,
+        water_level: 0.30,
+        rivers: 0.2,
+        peak_at: 0.8,
+        ground,
+        cliff,
+        peak: None,
+        objetos: vec![],
+        minerales: vec![],
+        densidad_urbana: 0.4,
+        casas: vec![],
+        fauna: vec![],
+        seres: vec![],
+    }
+}
+
+/// Duplica el item seleccionado (copia con id nuevo) y devuelve su id.
+fn duplicate_item(model: &mut Model) -> Option<u64> {
+    let sel = model.selected();
+    let id = model.project.alloc_id();
+    match model.level {
+        Level::Leyes => {
+            let mut x = model.project.ley(sel)?.clone();
+            x.id = id;
+            x.name = format!("{} copia", x.name);
+            model.project.leyes.push(x);
+        }
+        Level::Materiales => {
+            let mut x = model.project.material(sel)?.clone();
+            x.id = id;
+            x.name = format!("{} copia", x.name);
+            x.builtin = None; // una copia editable, no la de fábrica
+            model.project.materiales.push(x);
+        }
+        Level::Seres => {
+            let mut x = sel_sere(model)?.clone();
+            x.id = id;
+            x.name = format!("{} copia", x.name);
+            model.project.seres.push(x);
+        }
+        Level::Biomas => {
+            let mut x = model.project.bioma(sel)?.clone();
+            x.id = id;
+            x.name = format!("{} copia", x.name);
+            model.project.biomas.push(x);
+        }
+        Level::Mundos => {
+            let mut x = model.project.mundo(sel)?.clone();
+            x.id = id;
+            x.name = format!("{} copia", x.name);
+            model.project.mundos.push(x);
+        }
+        Level::Escenas => {
+            let mut x = sel_scene(model)?.clone();
+            x.id = id;
+            x.name = format!("{} copia", x.name);
+            model.project.escenas.push(x);
+        }
+        Level::Interiores => {
+            let mut x = model.project.interiores.iter().find(|i| i.id == model.selected())?.clone();
+            x.id = id;
+            x.name = format!("{} copia", x.name);
+            model.project.interiores.push(x);
+        }
+    }
+    Some(id)
+}
+
+/// Borra el item seleccionado del nivel activo.
+fn delete_selected(model: &mut Model) {
+    let sel = model.selected();
+    match model.level {
+        Level::Leyes => model.project.leyes.retain(|x| x.id != sel),
+        Level::Materiales => model.project.materiales.retain(|x| x.id != sel),
+        Level::Seres => model.project.seres.retain(|x| x.id != sel),
+        Level::Biomas => model.project.biomas.retain(|x| x.id != sel),
+        Level::Mundos => model.project.mundos.retain(|x| x.id != sel),
+        Level::Escenas => model.project.escenas.retain(|x| x.id != sel),
+        Level::Interiores => model.project.interiores.retain(|x| x.id != sel),
+    }
+}
+
+/// Fija el nombre del item seleccionado.
+fn set_selected_name(model: &mut Model, name: String) {
+    let sel = model.selected();
+    match model.level {
+        Level::Leyes => {
+            if let Some(x) = model.project.leyes.iter_mut().find(|x| x.id == sel) {
+                x.name = name;
+            }
+        }
+        Level::Materiales => {
+            if let Some(x) = model.project.materiales.iter_mut().find(|x| x.id == sel) {
+                x.name = name;
+            }
+        }
+        Level::Seres => {
+            if let Some(x) = model.project.seres.iter_mut().find(|x| x.id == sel) {
+                x.name = name;
+            }
+        }
+        Level::Biomas => {
+            if let Some(x) = model.project.biomas.iter_mut().find(|x| x.id == sel) {
+                x.name = name;
+            }
+        }
+        Level::Mundos => {
+            if let Some(x) = model.project.mundos.iter_mut().find(|x| x.id == sel) {
+                x.name = name;
+            }
+        }
+        Level::Escenas => {
+            if let Some(x) = model.project.escenas.iter_mut().find(|x| x.id == sel) {
+                x.name = name;
+            }
+        }
+        Level::Interiores => {
+            if let Some(x) = model.project.interiores.iter_mut().find(|x| x.id == sel) {
+                x.name = name;
+            }
+        }
+    }
+}
+
+/// Recarga `name_input`/`seed_input` desde el item seleccionado.
+fn sync_inputs(model: &mut Model) {
+    model.name_input.set_text(&model.selected_name());
+    if model.level == Level::Mundos {
+        let s = model.project.mundo(model.selected()).map(|m| m.seed).unwrap_or(0);
+        model.seed_input.set_text(&s.to_string());
+    }
+}
+
+/// Reselecciona el primer item de cada nivel (tras cargar un proyecto).
+fn reselect_all(model: &mut Model) {
+    model.sel[0] = model.project.leyes.first().map(|x| x.id).unwrap_or(0);
+    model.sel[1] = model.project.materiales.first().map(|x| x.id).unwrap_or(0);
+    model.sel[2] = model.project.seres.first().map(|x| x.id).unwrap_or(0);
+    model.sel[3] = model.project.biomas.first().map(|x| x.id).unwrap_or(0);
+    model.sel[4] = model.project.mundos.first().map(|x| x.id).unwrap_or(0);
+    model.sel[5] = model.project.escenas.first().map(|x| x.id).unwrap_or(0);
+    model.sel[6] = model.project.interiores.first().map(|x| x.id).unwrap_or(0);
+    refrescar_mapa(model); // el mundo recién seleccionado puede venir de un mapa
+}
+
+/// Regenera el **grid cache** (`model.mapa`) desde la [`MapaFuente`] persistida en el
+/// mundo seleccionado, o lo limpia si ese mundo es procedural. Barato cuando no hay
+/// mapa (sólo asigna `None`). Se llama al abrir un proyecto (vía [`reselect_all`]),
+/// al cambiar de mundo y al importar/quitar un mapa.
+fn refrescar_mapa(model: &mut Model) {
+    let mid = model.sel[Level::Mundos.index()];
+    let fuente = model.project.mundos.iter().find(|m| m.id == mid).and_then(|m| m.mapa.clone());
+    match fuente {
+        Some(f) => {
+            let dim = world_dim(PREVIEW_DIM_XZ);
+            match mapa_import::generar(&f, dim) {
+                Ok((grid, resumen)) => {
+                    model.mapa = Some(Arc::new(grid));
+                    model.status = resumen;
+                }
+                Err(e) => {
+                    model.mapa = None;
+                    model.status = format!("mapa: {e}");
+                }
+            }
+        }
+        None => model.mapa = None,
+    }
+}
+
+/// Nombre legible de un ser a partir de la ruta de su foto (el nombre de archivo sin
+/// extensión), con un respaldo si la ruta viene vacía.
+fn nombre_desde_path(path: &str) -> String {
+    std::path::Path::new(path)
+        .file_stem()
+        .and_then(|s| s.to_str())
+        .filter(|s| !s.is_empty())
+        .unwrap_or("retrato")
+        .to_string()
+}
+
+// --- Accesores al item seleccionado (mut e inmut) ---
+fn sel_material_mut(model: &mut Model) -> Option<&mut MaterialDef> {
+    let id = model.sel[1];
+    model.project.materiales.iter_mut().find(|x| x.id == id)
+}
+fn sel_ley(model: &Model) -> Option<&llimphi_voxel::Ley> {
+    model.project.ley(model.sel[0])
+}
+fn sel_ley_mut(model: &mut Model) -> Option<&mut llimphi_voxel::Ley> {
+    let id = model.sel[0];
+    model.project.leyes.iter_mut().find(|x| x.id == id)
+}
+
+/// Catálogo de **leyes de fábrica** por ecuación (autoradas, editables). Ciclar
+/// reemplaza la `Ecuacion` actual por la siguiente del catálogo. Todas verificadas
+/// como comportamientos vivos por los tests de `llimphi-voxel`.
+fn law_presets() -> Vec<(&'static str, LeyKind)> {
+    vec![
+        ("difusión", LeyKind::ecuacion_default()),
+        (
+            "reacción-difusión",
+            LeyKind::Ecuacion {
+                campos: vec![
+                    FieldDef::new("u", 1.0, 0.0, 1.0),
+                    FieldDef::new("v", 0.0, 0.0, 1.0),
+                ],
+                params: vec![
+                    ParamDef::new("Du", 0.16, 0.0, 1.0),
+                    ParamDef::new("Dv", 0.08, 0.0, 1.0),
+                    ParamDef::new("F", 0.06, 0.0, 0.1),
+                    ParamDef::new("k", 0.062, 0.0, 0.1),
+                ],
+                fuentes: vec![
+                    "Du * lap(u) - u * v * v + F * (1 - u)".into(),
+                    "Dv * lap(v) + u * v * v - (F + k) * v".into(),
+                ],
+            },
+        ),
+        (
+            "calor",
+            LeyKind::Ecuacion {
+                campos: vec![FieldDef::new("t", 0.0, 0.0, 1.0)],
+                params: vec![ParamDef::new("difus", 0.2, 0.0, 0.25)],
+                fuentes: vec!["difus * lap(t)".into()],
+            },
+        ),
+        (
+            "crecer",
+            LeyKind::Ecuacion {
+                campos: vec![FieldDef::new("h", 0.0, 0.0, 1.0)],
+                params: vec![ParamDef::new("vel", 0.05, 0.0, 0.3), ParamDef::new("tope", 0.8, 0.0, 1.0)],
+                fuentes: vec!["vel * (h < tope)".into()],
+            },
+        ),
+    ]
+}
+
+/// La siguiente ley del catálogo tras la actual (por label del preset actual).
+fn next_preset(actual: &LeyKind) -> LeyKind {
+    let presets = law_presets();
+    // Encuentra el preset cuya estructura de campos coincide con la actual; si no,
+    // arranca del primero. Ciclo simple por índice.
+    let idx = presets
+        .iter()
+        .position(|(_, k)| leyes_misma_forma(k, actual))
+        .map(|i| (i + 1) % presets.len())
+        .unwrap_or(0);
+    presets[idx].1.clone()
+}
+
+/// Dos leyes `Ecuacion` "tienen la misma forma" si coinciden los nombres de campos
+/// (heurística para ubicar el preset actual al ciclar).
+fn leyes_misma_forma(a: &LeyKind, b: &LeyKind) -> bool {
+    match (a, b) {
+        (LeyKind::Ecuacion { campos: ca, .. }, LeyKind::Ecuacion { campos: cb, .. }) => {
+            ca.len() == cb.len() && ca.iter().zip(cb).all(|(x, y)| x.name == y.name)
+        }
+        _ => false,
+    }
+}
+fn sel_sere<'a>(model: &'a Model) -> Option<&'a CharSpec> {
+    let id = model.sel[2];
+    model.project.seres.iter().find(|x| x.id == id)
+}
+fn sel_sere_mut(model: &mut Model) -> Option<&mut CharSpec> {
+    let id = model.sel[2];
+    model.project.seres.iter_mut().find(|x| x.id == id)
+}
+fn sel_bioma_mut(model: &mut Model) -> Option<&mut Bioma> {
+    let id = model.sel[3];
+    model.project.biomas.iter_mut().find(|x| x.id == id)
+}
+
+fn sel_interior_mut(model: &mut Model) -> Option<&mut Interior> {
+    let id = model.sel[6];
+    model.project.interiores.iter_mut().find(|x| x.id == id)
+}
+fn sel_mundo_mut(model: &mut Model) -> Option<&mut Mundo> {
+    let id = model.sel[4];
+    model.project.mundos.iter_mut().find(|x| x.id == id)
+}
+/// Mapea el teclado a mensajes de JUEGO (movimiento en primera persona).
+/// WASD mueve, E/Q suben/bajan en vuelo, Espacio salta (a pie), F alterna vuelo,
+/// R nueva semilla, Esc sale.
+fn juego_on_key(ev: &KeyEvent) -> Option<Msg> {
+    let pressed = matches!(ev.state, KeyState::Pressed);
+    match &ev.key {
+        Key::Named(NamedKey::Escape) if pressed && !ev.repeat => Some(Msg::EntrarSalir),
+        Key::Named(NamedKey::Space) => Some(Msg::Saltar(pressed)),
+        Key::Character(c) => match c.to_ascii_lowercase().as_str() {
+            "w" => Some(Msg::MoverJuego(EjeJuego::Fwd, pressed)),
+            "s" => Some(Msg::MoverJuego(EjeJuego::Back, pressed)),
+            "a" => Some(Msg::MoverJuego(EjeJuego::Left, pressed)),
+            "d" => Some(Msg::MoverJuego(EjeJuego::Right, pressed)),
+            "e" => Some(Msg::MoverJuego(EjeJuego::Arriba, pressed)),
+            "q" => Some(Msg::MoverJuego(EjeJuego::Abajo, pressed)),
+            "f" if pressed && !ev.repeat => Some(Msg::AlternarVuelo),
+            "r" if pressed && !ev.repeat => Some(Msg::RerollSemilla),
+            // Dictar sucesos donde estás parado: 1 aparece un ser, 2 marca de
+            // cámara, 3 punto de interés.
+            "1" if pressed && !ev.repeat => Some(Msg::DictarSuceso(TipoSuceso::Aparece(0))),
+            "2" if pressed && !ev.repeat => Some(Msg::DictarSuceso(TipoSuceso::Camara)),
+            "3" if pressed && !ev.repeat => Some(Msg::DictarSuceso(TipoSuceso::Marca)),
+            _ => None,
+        },
+        _ => None,
+    }
+}
+
+fn sel_scene<'a>(model: &'a Model) -> Option<&'a SceneSpec> {
+    let id = model.sel[5];
+    model.project.escenas.iter().find(|x| x.id == id)
+}
+fn sel_scene_mut(model: &mut Model) -> Option<&mut SceneSpec> {
+    let id = model.sel[5];
+    model.project.escenas.iter_mut().find(|x| x.id == id)
+}
+
+// --- Listas de ids para los botones de ciclo ---
+fn terreno_ids(model: &Model) -> Vec<u64> {
+    model.project.materiales.iter().map(|m| m.id).collect()
+}
+fn objeto_ids(model: &Model) -> Vec<u64> {
+    let objs: Vec<u64> = model
+        .project
+        .materiales
+        .iter()
+        .filter(|m| matches!(m.role, MatRole::Objeto(_)))
+        .map(|m| m.id)
+        .collect();
+    if objs.is_empty() {
+        terreno_ids(model)
+    } else {
+        objs
+    }
+}
+fn bioma_ids(model: &Model) -> Vec<u64> {
+    model.project.biomas.iter().map(|b| b.id).collect()
+}
+fn sere_ids(model: &Model) -> Vec<u64> {
+    model.project.seres.iter().map(|s| s.id).collect()
+}
+
+/// Reparte los tiempos de las claves de un actor uniformemente en `[0, dur]`, así el
+/// recorrido se recorre a lo largo de toda la escena (el director interpola entre ellas).
+fn respread(actor: &mut ActorSpec, dur: f32) {
+    let n = actor.keys.len();
+    for (i, k) in actor.keys.iter_mut().enumerate() {
+        k.t = if n <= 1 { 0.0 } else { i as f32 / (n - 1) as f32 * dur };
+    }
+}
+fn mundo_ids(model: &Model) -> Vec<u64> {
+    model.project.mundos.iter().map(|m| m.id).collect()
+}
+
+/// El siguiente id de `ids` después de `cur` (cicla); `cur` si la lista está vacía.
+fn next_in(ids: &[u64], cur: u64) -> u64 {
+    if ids.is_empty() {
+        return cur;
+    }
+    let i = ids.iter().position(|&x| x == cur).unwrap_or(usize::MAX);
+    ids[(i.wrapping_add(1)) % ids.len()]
+}
+
+/// Cicla un `Option<u64>` por `None → ids[0] → … → None`.
+fn next_option(cur: Option<u64>, ids: &[u64]) -> Option<u64> {
+    match cur {
+        None => ids.first().copied(),
+        Some(c) => {
+            let i = ids.iter().position(|&x| x == c);
+            match i {
+                Some(i) if i + 1 < ids.len() => Some(ids[i + 1]),
+                _ => None,
+            }
+        }
+    }
+}
+
+// =============================================================================
+//  Helpers de layout
+// =============================================================================
+
+fn selectable_row(label: String, selected: bool, msg: Msg, theme: &Theme) -> View<Msg> {
+    View::new(Style {
+        size: Size { width: percent(1.0_f32), height: length(30.0_f32) },
+        align_items: Some(AlignItems::Center),
+        padding: pad(10.0, 0.0),
+        ..Default::default()
+    })
+    .fill(if selected { theme.bg_selected } else { theme.bg_panel })
+    .radius(6.0)
+    .text(label, 15.0, if selected { theme.fg_text } else { theme.fg_muted })
+    .on_click(msg)
+}
+
+fn section_title(text: &str, theme: &Theme) -> View<Msg> {
+    View::new(Style {
+        size: Size { width: percent(1.0_f32), height: length(20.0_f32) },
+        ..Default::default()
+    })
+    .text(text.to_string(), 12.0, theme.accent)
+    .bold()
+}
+
+fn body_text(s: String, color: Color, _theme: &Theme) -> View<Msg> {
+    View::new(Style {
+        size: Size { width: percent(1.0_f32), height: Dimension::auto() },
+        ..Default::default()
+    })
+    .text(s, 13.0, color)
+    .max_lines(2)
+}
+
+fn spacer(h: f32) -> View<Msg> {
+    View::new(Style {
+        size: Size { width: percent(1.0_f32), height: length(h) },
+        ..Default::default()
+    })
+}
+
+fn pad(
+    x: f32,
+    y: f32,
+) -> llimphi_ui::llimphi_layout::taffy::prelude::Rect<llimphi_ui::llimphi_layout::taffy::prelude::LengthPercentage> {
+    use llimphi_ui::llimphi_layout::taffy::prelude::Rect;
+    Rect { left: length(x), right: length(x), top: length(y), bottom: length(y) }
+}
+
+fn gap_y(h: f32) -> Size<llimphi_ui::llimphi_layout::taffy::prelude::LengthPercentage> {
+    Size { width: length(0.0_f32), height: length(h) }
+}
+
+// =============================================================================
+//  Persistencia RON
+// =============================================================================
+
+// Guardar/cargar el proyecto en el path por defecto usan el mismo `Documento`
+// (con marca + versión) que abrir/guardar-como/combinar — un solo formato.
+fn save_project(project: &Project) -> Result<(), String> {
+    Documento::nuevo(project.clone())
+        .guardar(PROJECT_PATH)
+        .map_err(|e| e.to_string())
+}
+
+fn load_project() -> Result<Project, String> {
+    Documento::abrir(PROJECT_PATH)
+        .map(|d| d.proyecto)
+        .map_err(|e| e.to_string())
+}
+
+/// Estado de arranque (sin `Handle`) — reusado por `init` y por el pantallazo.
+pub(crate) fn demo_model() -> Model {
+    let project = Project::starter();
+    // Orientación de los dientes (rail Adentro/Afuera) heredada del SO.
+    let dientes_outside = wawa_config::WawaConfig::load().dientes_outside;
+    let mut model = Model {
+        theme: Theme::dark(),
+        level: Level::Mundos,
+        sel: [0; 7],
+        tool_tab: 0,
+        gen: 1,
+        yaw: 35_f32.to_radians(),
+        pitch: 26_f32.to_radians(),
+        dist: default_dist(),
+        preview: Arc::new(Mutex::new(None)),
+        mapa: None,
+        status: "creador de mundos por niveles".into(),
+        name_input: TextInputState::new(),
+        name_focused: false,
+        seed_input: TextInputState::new(),
+        seed_focused: false,
+        ai_input: TextInputState::new(),
+        ai_focused: false,
+        ai_busy: false,
+        file_input: {
+            let mut t = TextInputState::new();
+            t.set_text(PROJECT_PATH.to_string());
+            t
+        },
+        file_focused: false,
+        historia: Historia::abrir(HISTORY_PATH).unwrap_or_default(),
+        jugando: false,
+        jugador: Arc::new(Mutex::new(Player::new(Vec3::ZERO))),
+        input_juego: InputJuego::default(),
+        volar: false,
+        respawn_jugador: Arc::new(Mutex::new(false)),
+        time: 0.0,
+        playing: false,
+        script_cam: true,
+        exporting: false,
+        simulating: false,
+        andar_estado: 1, // caminar
+        manada: false,
+        actor_sel: 0,
+        key_sel: 0,
+        rng: 0x1234_5678,
+        mueble_brush: Mueble::Mesa,
+        mueble_facing: 0,
+        pueblo_brush: PuebloTipo::Aldea,
+        // Los dos sidebars unificados: selectores fijos, abiertos sobre el nivel/tool
+        // activos. El eje "Rail Adentro/Afuera" hereda el viejo `dientes_outside` del
+        // SO. El izquierdo lista items (más angosto); el derecho, el editor de tools.
+        sidebar_left: RagSidebarState {
+            open: Some(Level::Mundos.index() as u64),
+            selected: Some(Level::Mundos.index() as u64),
+            panel_w: 214.0,
+            rail_outside: dientes_outside,
+            ..Default::default()
+        },
+        sidebar_right: RagSidebarState {
+            open: Some(0),
+            selected: Some(0),
+            panel_w: 256.0,
+            rail_outside: dientes_outside,
+            ..Default::default()
+        },
+        lab: None,
+        lab_gen: 1,
+        formula_input: TextInputState::new(),
+        formula_focused: false,
+        formula_target: 0,
+        cond_formula_input: TextInputState::new(),
+        cond_formula_focused: false,
+        cond_formula_target: 0,
+        leyes_node_mode: false,
+        eq_graph: None,
+        eq_graph_gen: 0,
+        clipboard: SystemClipboard::new(),
+        project,
+    };
+    reselect_all(&mut model);
+    sync_inputs(&mut model);
+    model
+}
+
+fn main() {
+    if std::env::args().any(|a| a == "--shot") {
+        shot::shot();
+        return;
+    }
+    if std::env::args().any(|a| a == "--turntable") {
+        let p = Project::starter();
+        let mr = p
+            .mundos
+            .first()
+            .and_then(|m| p.render_mundo(m.id))
+            .unwrap_or_else(fallback_render);
+        match render::turntable(&mr) {
+            Ok(out) => eprintln!("turntable ok: {out}"),
+            Err(e) => eprintln!("turntable error: {e}"),
+        }
+        return;
+    }
+    if std::env::args().any(|a| a == "--flythrough") {
+        let p = Project::starter();
+        let mr = p
+            .mundos
+            .first()
+            .and_then(|m| p.render_mundo(m.id))
+            .unwrap_or_else(fallback_render);
+        match render::flythrough(&mr) {
+            Ok(out) => eprintln!("flythrough ok: {out}"),
+            Err(e) => eprintln!("flythrough error: {e}"),
+        }
+        return;
+    }
+    if std::env::args().any(|a| a == "--export") {
+        let p = Project::starter();
+        match p.escenas.first() {
+            Some(s) => match render::export_scene(&p, s) {
+                Ok(out) => eprintln!("export ok: {out}"),
+                Err(e) => eprintln!("export error: {e}"),
+            },
+            None => eprintln!("export error: el proyecto no tiene escenas"),
+        }
+        return;
+    }
+    llimphi_ui::run::<Studio>();
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    /// El laboratorio corre una ley autorada del catálogo y forma estructura: el campo
+    /// visible desarrolla rango espacial (certifica símbolos + params + programa + step,
+    /// la cadena de app completa, sin GPU ni screenshot).
+    #[test]
+    fn lab_corre_ley_del_catalogo_y_forma_patron() {
+        let ley = law_presets().into_iter().find(|(n, _)| *n == "reacción-difusión").unwrap().1;
+        let LeyKind::Ecuacion { campos, .. } = &ley else { panic!("es Ecuacion") };
+        let prog = ley.compile_ecuacion().unwrap().expect("compila");
+        let mut lab = LawLab::build(1, 1, campos, Ok(prog), 1);
+        let params = ley.ecuacion_param_values();
+        for _ in 0..80 {
+            lab.step(&params); // 80 · LAB_SUBSTEPS pasos
+        }
+        let (mut lo, mut hi) = (f32::INFINITY, f32::NEG_INFINITY);
+        for z in 0..LAB_DIM {
+            for x in 0..LAB_DIM {
+                let v = lab.engine.get(1, x, 0, z);
+                lo = lo.min(v);
+                hi = hi.max(v);
+            }
+        }
+        assert!(hi - lo > 0.05, "la ley formó patrón en el lab (rango={})", hi - lo);
+        // El heatmap se construye a la resolución del lab sin panics.
+        let _img = heatmap_image(&lab);
+    }
+
+    /// Ciclar el catálogo desde la difusión por defecto entrega la reacción‑difusión.
+    #[test]
+    fn preset_cicla_al_siguiente() {
+        let n = next_preset(&LeyKind::ecuacion_default());
+        match &n {
+            LeyKind::Ecuacion { campos, .. } => assert_eq!(campos.len(), 2),
+            _ => panic!("sigue siendo Ecuacion"),
+        }
+    }
+
+    /// Las fórmulas de peso de los impulsos de fábrica parsean con la MISMA tabla de
+    /// símbolos que expone el editor de conducta — guarda contra que se desincronicen los
+    /// nombres de percepts/params entre el pie de ayuda y el parser. Y `materializar`
+    /// siembra los impulsos de fábrica en un ser que no tenía.
+    #[test]
+    fn conducta_impulsos_de_fabrica_coherentes_con_el_editor() {
+        let sym = llimphi_voxel::Conducta::symbols();
+        for imp in llimphi_voxel::default_impulsos() {
+            assert!(
+                llimphi_voxel::Expr::parse(&imp.peso, &sym).is_ok(),
+                "la fórmula de fábrica «{}» parsea con los símbolos del editor",
+                imp.peso
+            );
+        }
+        let mut c = CharSpec::new("x", Age::Adult);
+        c.conducta.impulsos.clear();
+        materializar_impulsos(&mut c);
+        assert_eq!(c.conducta.impulsos.len(), llimphi_voxel::default_impulsos().len());
+        // Ciclar la primitiva del primer impulso lo mueve a la siguiente.
+        let antes = c.conducta.impulsos[0].primitiva;
+        c.conducta.impulsos[0].primitiva = antes.next();
+        assert_ne!(antes, c.conducta.impulsos[0].primitiva);
+    }
+
+    /// **El editor de minerales funciona de punta a punta**: despachando los `Msg`
+    /// reales por `update()` (con un handle de test), cada factor del mineral cambia
+    /// en el proyecto y sube `gen` (lo que dispara la regeneración del preview). Es la
+    /// prueba headless de que arrastrar los sliders SÍ modifica el mundo.
+    #[test]
+    fn editar_mineral_recorre_update_y_cambia_el_bioma() {
+        let h = Handle::for_test();
+        let mut m = demo_model();
+        m.level = Level::Biomas;
+        m.tool_tab = 3;
+        let bid = m.project.biomas.first().map(|b| b.id).expect("hay biomas");
+        m.sel[3] = bid;
+        let g0 = m.gen;
+        let n_min = m.project.bioma(bid).unwrap().minerales.len();
+        assert!(n_min > 0, "el bioma de arranque trae minerales");
+
+        // Agregar un mineral por el mensaje real.
+        m = Studio::update(m, Msg::AddBiomaMineral, &h);
+        assert_eq!(m.project.bioma(bid).unwrap().minerales.len(), n_min + 1);
+
+        // Editar cada factor del último mineral por su `Msg`.
+        let i = n_min; // índice del recién agregado
+        let tipo0 = m.project.bioma(bid).unwrap().minerales[i].mineral;
+        m = Studio::update(m, Msg::CycleMineralTipo(i), &h);
+        assert_ne!(tipo0, m.project.bioma(bid).unwrap().minerales[i].mineral, "el tipo cambió");
+
+        let asp0 = m.project.bioma(bid).unwrap().minerales[i].aspecto;
+        m = Studio::update(m, Msg::CycleMineralAspecto(i), &h);
+        assert_ne!(asp0, m.project.bioma(bid).unwrap().minerales[i].aspecto, "el aspecto cambió");
+
+        m = Studio::update(m, Msg::SetMineralBrillo(i, 1.0), &h);
+        assert_eq!(m.project.bioma(bid).unwrap().minerales[i].brillo, 1.0, "brillo al máximo");
+
+        m = Studio::update(m, Msg::SetMineralDureza(i, 9.0), &h);
+        assert_eq!(m.project.bioma(bid).unwrap().minerales[i].dureza, 9.0, "dureza editada");
+
+        m = Studio::update(m, Msg::SetMineralColor(i, 0, 1.0), &h);
+        assert_eq!(m.project.bioma(bid).unwrap().minerales[i].color[0], 255, "color R al tope");
+
+        m = Studio::update(m, Msg::SetMineralAbundancia(i, 0.9), &h);
+        assert_eq!(m.project.bioma(bid).unwrap().minerales[i].abundancia, 0.9, "abundancia editada");
+
+        assert!(m.gen > g0, "cada edición subió gen → el preview se regenera");
+
+        // Y el tab Objetos: ciclar la forma de un objeto también viaja por update.
+        let bid_flora = m.project.biomas.iter().find(|b| !b.objetos.is_empty()).map(|b| b.id);
+        if let Some(fid) = bid_flora {
+            m.sel[3] = fid;
+            let f0 = m.project.bioma(fid).unwrap().objetos[0].forma;
+            m = Studio::update(m, Msg::CycleObjetoForma(0), &h);
+            assert_ne!(f0, m.project.bioma(fid).unwrap().objetos[0].forma, "la forma del objeto cambió");
+        }
+    }
+
+    /// **El editor de interiores coloca muebles**: despachando los `Msg` reales por
+    /// `update()`, cambiar el pincel y clickear el piso (PlaceMuebleAt) agrega una
+    /// pieza al interior seleccionado, quitar/vaciar las saca, y editar la sala sube
+    /// `gen`. Prueba headless de colocar-con-el-mouse (la proyección click→celda la
+    /// hace `pick_world`, que necesita GPU; aquí probamos el camino de datos).
+    #[test]
+    fn editor_interiores_coloca_y_edita() {
+        let h = Handle::for_test();
+        let mut m = demo_model();
+        m.level = Level::Interiores;
+        let iid = m.project.interiores.first().map(|i| i.id).expect("hay un interior");
+        m.sel[6] = iid;
+        let n0 = m.project.interiores.iter().find(|i| i.id == iid).unwrap().piezas.len();
+
+        // Elegir un mueble-pincel y orientación por los mensajes reales.
+        let brush0 = m.mueble_brush;
+        m = Studio::update(m, Msg::CycleMuebleBrush, &h);
+        assert_ne!(brush0, m.mueble_brush, "el pincel cambió");
+        m = Studio::update(m, Msg::CycleMuebleFacing, &h);
+        assert_eq!(m.mueble_facing, 1, "la orientación giró");
+
+        // Colocar sobre una celda del piso.
+        let g0 = m.gen;
+        m = Studio::update(m, Msg::PlaceMuebleAt(6.0, 5.0), &h);
+        let it = m.project.interiores.iter().find(|i| i.id == iid).unwrap();
+        assert_eq!(it.piezas.len(), n0 + 1, "se colocó una pieza");
+        assert_eq!(it.piezas.last().unwrap().mueble, m.mueble_brush);
+        assert!(m.gen > g0, "colocar regeneró el preview");
+
+        // Quitar la última y editar la sala.
+        m = Studio::update(m, Msg::RemoveLastPieza, &h);
+        assert_eq!(m.project.interiores.iter().find(|i| i.id == iid).unwrap().piezas.len(), n0);
+        m = Studio::update(m, Msg::SetInteriorAncho(30.0), &h);
+        assert_eq!(m.project.interiores.iter().find(|i| i.id == iid).unwrap().ancho, 30);
+        m = Studio::update(m, Msg::ToggleInteriorMuros, &h);
+        assert!(!m.project.interiores.iter().find(|i| i.id == iid).unwrap().muros);
+    }
+
+    /// La rampa cubre de oscuro a claro en los extremos (heatmap legible).
+    #[test]
+    fn rampa_va_de_oscuro_a_claro() {
+        let bajo = ramp(0.0);
+        let alto = ramp(1.0);
+        assert!(bajo.iter().map(|&c| c as u32).sum::<u32>() < 100, "extremo bajo oscuro");
+        assert!(alto[0] > 200 && alto[1] > 200, "extremo alto claro");
+    }
+}
diff --git a/llimphi-voxel-studio/src/mapa_import.rs b/llimphi-voxel-studio/src/mapa_import.rs
new file mode 100644
index 0000000..ea81452
--- /dev/null
+++ b/llimphi-voxel-studio/src/mapa_import.rs
@@ -0,0 +1,188 @@
+//! **Mundo desde mapa real**: convierte un GeoJSON del visor de mapas
+//! (`nahual-geo-core`) —opcionalmente con un DEM `.pgm` para el relieve— en un
+//! [`VoxelGrid`] del **mismo `dim`** que el preview del studio, vía el puente
+//! [`nahual_geo_voxel`]. Así el mundo del mapa entra por la misma maquinaria de
+//! preview (cámara/órbita/posado) que el procedural, sin refactor.
+//!
+//! Dos pasos separados para poder **persistir**: [`leer_fuente`] captura el
+//! GeoJSON (+ PGM hermano) en una [`MapaFuente`] serializable que se guarda en el
+//! [`Mundo`](llimphi_voxel::Mundo); [`generar`] materializa el grid desde esa
+//! fuente (al importar y al **abrir** un proyecto). Encaje: se elige
+//! `metros_por_voxel` para que la caja del mapa **llene** el `dim` (el eje más
+//! largo manda) y se genera la ventana en `[0,0]`.
+
+use std::path::Path;
+
+use llimphi_3d::VoxelGrid;
+use llimphi_voxel::MapaFuente;
+use nahual_geo_core::{parse_into, BBox, MapData, MAX_VERTICES};
+use nahual_geo_voxel::{Heightfield, MapaVoxel, Opciones};
+
+/// Metros por grado de latitud (igual constante que usa la proyección del puente).
+const M_POR_GRADO_LAT: f64 = 111_320.0;
+
+/// Lee `path` (GeoJSON) y su `.pgm` hermano (si existe) a una [`MapaFuente`]
+/// **persistible** — se embebe el contenido para que el documento sea
+/// autocontenido (no dependa de que el archivo siga ahí). No genera el grid.
+pub fn leer_fuente(path: &str, rango_dem_m: f32) -> Result<MapaFuente, String> {
+    let bytes = std::fs::read(path).map_err(|e| format!("no se pudo leer {path}: {e}"))?;
+    let geojson = String::from_utf8(bytes).map_err(|_| "el archivo no es texto UTF-8 (¿GeoJSON?)".to_string())?;
+    // Validación temprana: que parsee y traiga geometría.
+    let (md, _) = parse_into(&geojson, MAX_VERTICES).map_err(|e| format!("GeoJSON inválido: {e}"))?;
+    if md.polygons.is_empty() && md.lines.is_empty() {
+        return Err("el mapa no trae polígonos ni líneas".into());
+    }
+    // Relieve hermano: un GeoTIFF `.tif`/`.tiff` (georreferenciado, preferido) o un
+    // `.pgm`. Se embeben para que el documento sea autocontenido.
+    let dem_tif = hermano(path, &["tif", "tiff"]);
+    let pgm = if dem_tif.is_none() { hermano(path, &["pgm"]) } else { None };
+    Ok(MapaFuente { geojson, pgm, dem_tif, rango_dem_m })
+}
+
+/// Materializa una [`MapaFuente`] a `VoxelGrid` de dimensión `dim`. Devuelve además
+/// un resumen para la barra de estado. Puro (sin IO ni GPU): sirve tanto al importar
+/// como al **regenerar** un mundo-mapa recién abierto de un proyecto.
+pub fn generar(fuente: &MapaFuente, dim: [u32; 3]) -> Result<(VoxelGrid, String), String> {
+    let (md, _trunc) = parse_into(&fuente.geojson, MAX_VERTICES).map_err(|e| format!("GeoJSON inválido: {e}"))?;
+    let bbox = bbox_de(&md);
+    if bbox.is_empty() {
+        return Err("el mapa no tiene coordenadas".into());
+    }
+
+    // Encaje: metros_por_voxel para que el eje más largo llene el dim del preview.
+    let lat0 = (bbox.min_lat + bbox.max_lat) * 0.5;
+    let m_lon = M_POR_GRADO_LAT * lat0.to_radians().cos().abs().max(1e-6);
+    let span_x = (bbox.max_lon - bbox.min_lon) * m_lon;
+    let span_z = (bbox.max_lat - bbox.min_lat) * M_POR_GRADO_LAT;
+    let mpv = (span_x / (dim[0].max(2) - 1) as f64)
+        .max(span_z / (dim[2].max(2) - 1) as f64)
+        .max(0.1);
+
+    // Relieve: GeoTIFF (georreferenciado por sí mismo) tiene prioridad; si no, PGM
+    // estirado a la caja del GeoJSON; si no, plano al nivel del mar.
+    let (height, relieve) = if let Some(tif) = &fuente.dem_tif {
+        match Heightfield::desde_geotiff(tif) {
+            Ok(h) => (h, "GeoTIFF"),
+            Err(_) => (Heightfield::plano(bbox, 0.0), "plano"),
+        }
+    } else if let Some(pgm) = &fuente.pgm {
+        match Heightfield::desde_pgm(pgm, bbox, 0.0, fuente.rango_dem_m) {
+            Ok(h) => (h, "PGM"),
+            Err(_) => (Heightfield::plano(bbox, 0.0), "plano"),
+        }
+    } else {
+        (Heightfield::plano(bbox, 0.0), "plano")
+    };
+
+    // Exageración vertical: al encajar una ciudad entera en 128 voxels, `mpv` es
+    // grande (~5 m/voxel) y los edificios quedarían de 1-4 voxels. La subimos para
+    // que el skyline y el relieve lean bien en el preview.
+    let opts = Opciones {
+        metros_por_voxel: mpv,
+        escala_v: 3.0,
+        nivel_mar_m: 0.0,
+        ..Opciones::default()
+    };
+    let mapa = MapaVoxel::desde_mapdata(bbox, height, opts, &md);
+    let resumen = format!(
+        "mundo desde mapa: {} edificios · {} calles · {} agua · relieve={} · {:.1} m/voxel",
+        mapa.edificios.len(),
+        mapa.calles.len(),
+        mapa.agua.len(),
+        relieve,
+        mpv,
+    );
+    let grid = mapa.generar_ventana(dim, [0, 0]);
+    Ok((grid, resumen))
+}
+
+/// Caja envolvente de un `MapData` (usa `bbox_override` si viene, si no escanea).
+fn bbox_de(md: &MapData) -> BBox {
+    if let Some(b) = md.bbox_override {
+        return b;
+    }
+    let mut b = BBox::empty();
+    for &c in &md.points {
+        b.expand(c);
+    }
+    for line in &md.lines {
+        for &c in line {
+            b.expand(c);
+        }
+    }
+    for poly in &md.polygons {
+        for ring in poly {
+            for &c in ring {
+                b.expand(c);
+            }
+        }
+    }
+    b
+}
+
+/// Bytes de un archivo hermano (mismo stem, alguna de `exts`) si existe.
+fn hermano(path: &str, exts: &[&str]) -> Option<Vec<u8>> {
+    for ext in exts {
+        if let Ok(b) = std::fs::read(Path::new(path).with_extension(ext)) {
+            return Some(b);
+        }
+    }
+    None
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use nahual_geo_voxel::Paleta;
+
+    fn cuenta_color(g: &VoxelGrid, color: [u8; 3]) -> usize {
+        let [dx, dy, dz] = g.dim();
+        let mut n = 0;
+        for z in 0..dz {
+            for y in 0..dy {
+                for x in 0..dx {
+                    if let Some([r, gg, b, a]) = g.get(x, y, z) {
+                        if a > 127 && [r, gg, b] == color {
+                            n += 1;
+                        }
+                    }
+                }
+            }
+        }
+        n
+    }
+
+    #[test]
+    fn import_geojson_produce_ciudad() {
+        // GeoJSON mínimo: un edificio, un lago y una calle, dentro de ~600 m.
+        let gj = r#"{"type":"FeatureCollection","features":[
+            {"type":"Feature","properties":{"building":"yes","building:levels":8},
+             "geometry":{"type":"Polygon","coordinates":[[[0.001,0.001],[0.003,0.001],[0.003,0.003],[0.001,0.003],[0.001,0.001]]]}},
+            {"type":"Feature","properties":{"natural":"water"},
+             "geometry":{"type":"Polygon","coordinates":[[[0.004,0.004],[0.0055,0.004],[0.0055,0.0055],[0.004,0.0055],[0.004,0.004]]]}},
+            {"type":"Feature","properties":{"highway":"residential"},
+             "geometry":{"type":"LineString","coordinates":[[0.0005,0.0035],[0.0055,0.0035]]}}
+        ]}"#;
+        let dir = std::env::temp_dir();
+        let path = dir.join("studio_mapa_test.geojson");
+        std::fs::write(&path, gj).unwrap();
+
+        // leer_fuente → (persistible) → generar, el mismo camino que al abrir.
+        let fuente = leer_fuente(path.to_str().unwrap(), 300.0).unwrap();
+        std::fs::remove_file(&path).ok();
+        assert!(fuente.geojson.contains("building"), "la fuente embebe el GeoJSON");
+
+        let dim = [96u32, 40, 96];
+        let (grid, resumen) = generar(&fuente, dim).unwrap();
+
+        assert_eq!(grid.dim(), dim, "el grid debe calzar el dim del preview");
+        let p = Paleta::default();
+        let muro = cuenta_color(&grid, p.muro);
+        let agua = cuenta_color(&grid, p.agua);
+        let calle = cuenta_color(&grid, p.calle);
+        eprintln!("import: {resumen} — muro={muro} agua={agua} calle={calle}");
+        assert!(muro > 0, "el edificio debe extruirse a muros");
+        assert!(agua > 0, "el lago debe pintarse");
+        assert!(calle > 0, "la calle debe estamparse");
+    }
+}
diff --git a/llimphi-voxel-studio/src/preview.rs b/llimphi-voxel-studio/src/preview.rs
new file mode 100644
index 0000000..85240ba
--- /dev/null
+++ b/llimphi-voxel-studio/src/preview.rs
@@ -0,0 +1,572 @@
+//! Preview 3D en vivo de un [`WorldRecipe`]: genera el `VoxelGrid` de la receta y
+//! lo compone con [`Scene3d`] sobre el target del canvas, **confinado** al rect del
+//! panel. Se **regenera** cuando cambia la "generación" (un contador que el editor
+//! incrementa al tocar un parámetro / cambiar de mundo) o el `dim`.
+//!
+//! Además del terreno, sabe **posar actores**: guarda el grid para consultar la
+//! altura del suelo ([`ground_at`](WorldPreview::ground_at)) y mantiene un pool de
+//! [`Renderer3d`] para dibujar las mallas de los actores de una escena en vivo.
+
+use llimphi_3d::glam::{Mat4, Vec3, Vec4};
+use llimphi_3d::{Atmosphere, Camera3d, PointLight, Renderer3d, Scene3d, Vertex3d, VoxelGrid, VoxelRenderer};
+use llimphi_ui::llimphi_hal::wgpu;
+use llimphi_voxel::{
+    CharSpec, Clip, EcuacionSim, FieldDef, GrowthSim, Habitante, MundoRender, Program, WaterSim,
+    CELL_WATER, SCENE_SUN,
+};
+
+/// Formato de la textura intermedia de Llimphi (target de `gpu_paint_with`).
+pub const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
+
+/// **Densidad de bruma de una escena** (numerador; la densidad real es
+/// `SCENE_FOG / dim[0]`). Más alta que la del preview de un mundo: la ventana
+/// voxel sigue siendo una caja finita de `dim`, así que sin bruma su **borde** se
+/// ve como una isla cuadrada flotando en el cielo. Con esto el borde (a ~`dim/2`
+/// del reparto centrado) se funde con el horizonte → la escena se lee infinita,
+/// mientras el reparto (cerca de la cámara) queda nítido. Es el mismo truco del
+/// `--flythrough`.
+pub const SCENE_FOG: f32 = 2.6;
+
+/// El mundo de preview: terreno de la receta + atmósfera + actores posados.
+pub struct WorldPreview {
+    scene: Scene3d,
+    voxel: VoxelRenderer,
+    /// El grid generado (se conserva para consultar la altura del suelo al posar
+    /// actores).
+    grid: VoxelGrid,
+    dim: [u32; 3],
+    /// Generación de la receta con la que se construyó el grid actual.
+    built_gen: u64,
+    /// Columna de **mundo** `[wx, wz]` donde cae la esquina local `(0,0)` de la
+    /// ventana actual. `[0, 0]` = mundo centrado en el origen (preview de un mundo /
+    /// personaje); distinto cuando la ventana **sigue al reparto** de una escena
+    /// (mundo infinito). Ver [`Self::ensure_window`] / [`Self::ground_at_world`].
+    origin: [i32; 2],
+    /// Simulación de agua en curso (ley Fluir), si está activa. `None` = terreno
+    /// estático. Ver [`Self::ensure_sim`] / [`Self::sim_step`].
+    sim: Option<WaterSim>,
+    /// Crecimiento de plantas en curso (ley Crecer), si está activo.
+    growth: Option<GrowthSim>,
+    /// Ley autorada (Ecuacion) corriendo sobre un material del mundo, si está activa:
+    /// recolorea sus celdas por el campo. Ver [`Self::ensure_ecuacion`] / [`Self::ecuacion_step`].
+    ecuacion: Option<EcuacionSim>,
+    /// Bandada de habitantes (conducta) deambulando sobre el grid, cada uno con el
+    /// cuerpo del Ser que representa. Vacía = sin vida.
+    manada: Vec<(Habitante, CharSpec)>,
+    /// Contexto de *picking* (al dirigir): `(inv_view_proj, ojo, altura_del_plano)` en
+    /// espacio centrado, para resolver un click de pantalla a una columna de mundo.
+    pick: Option<(Mat4, Vec3, f32)>,
+    /// Pool de renderers de actor (uno por actor; la malla se re-sube por frame).
+    actor_r: Vec<Renderer3d>,
+    /// `gen` del grid de **interior** mostrado (editor de interiores), si aplica.
+    /// Distinto de `built_gen` (biomas) para no confundir los dos orígenes de grid.
+    interior_tag: Option<u64>,
+}
+
+impl WorldPreview {
+    /// Grid fuente del preview: el `override` (un mundo ya generado — p. ej. desde
+    /// un **mapa real** vía `nahual-geo-voxel`) si viene y calza el `dim`, o el grid
+    /// procedural del bioma. Un solo lugar decide el origen para que `build` y
+    /// `rebuild_if` no diverjan.
+    fn grid_fuente(mr: &MundoRender, dim: [u32; 3], override_grid: Option<&VoxelGrid>) -> VoxelGrid {
+        match override_grid {
+            Some(g) if g.dim() == dim => g.clone(),
+            _ => mr.bioma.generate_window(mr.seed, &mr.palette, dim, [0, 0]),
+        }
+    }
+
+    /// Construye el preview generando el grid de `mr` (bioma+semilla+paleta) a `dim`,
+    /// centrado en el origen. Si `override_grid` viene y calza `dim`, usa ESE grid
+    /// (mundo desde mapa) en vez del procedural.
+    pub fn build(
+        device: &wgpu::Device,
+        queue: &wgpu::Queue,
+        mr: &MundoRender,
+        dim: [u32; 3],
+        gen: u64,
+        override_grid: Option<&VoxelGrid>,
+    ) -> Self {
+        let grid = Self::grid_fuente(mr, dim, override_grid);
+        let voxel = Self::make_voxel(device, queue, &grid, dim);
+        Self {
+            scene: Scene3d::new(),
+            voxel,
+            grid,
+            dim,
+            built_gen: gen,
+            origin: [0, 0],
+            sim: None,
+            growth: None,
+            ecuacion: None,
+            manada: Vec::new(),
+            pick: None,
+            actor_r: Vec::new(),
+            interior_tag: None,
+        }
+    }
+
+    /// Registra la cámara para *picking* (al dirigir): `inv_vp` = inversa de la
+    /// `view_proj` con la que se renderiza, `eye` el ojo (centrado), `y0` la altura del
+    /// plano de suelo donde caen los waypoints. Lo setea el preview de escena cada cuadro.
+    pub fn set_pick(&mut self, inv_vp: Mat4, eye: Vec3, y0: f32) {
+        self.pick = Some((inv_vp, eye, y0));
+    }
+
+    /// Resuelve un click (en NDC `[-1,1]`) a una **columna de mundo** `(gx, gz)`,
+    /// intersectando el rayo de cámara con el plano de suelo `y0`. `None` si no hay
+    /// contexto, el rayo no baja, o cae fuera del mundo.
+    pub fn pick_world(&self, ndc_x: f32, ndc_y: f32) -> Option<(f32, f32)> {
+        let (inv_vp, eye, y0) = self.pick?;
+        // Punto en el plano lejano, desproyectado a espacio centrado.
+        let p = inv_vp * Vec4::new(ndc_x, ndc_y, 1.0, 1.0);
+        if p.w.abs() < 1e-6 {
+            return None;
+        }
+        let far = p.truncate() / p.w;
+        let dir = (far - eye).normalize_or_zero();
+        if dir.y.abs() < 1e-4 {
+            return None; // rayo casi horizontal: no corta el plano
+        }
+        let t = (y0 - eye.y) / dir.y;
+        if t <= 0.0 {
+            return None; // el plano está detrás de la cámara
+        }
+        let hit = eye + dir * t; // espacio centrado
+        let half = Vec3::new(self.dim[0] as f32, self.dim[1] as f32, self.dim[2] as f32) * 0.5;
+        let gx = hit.x + half.x;
+        let gz = hit.z + half.z;
+        if gx < 0.0 || gz < 0.0 || gx >= self.dim[0] as f32 || gz >= self.dim[2] as f32 {
+            return None;
+        }
+        Some((gx, gz))
+    }
+
+    /// Asegura una **bandada** a partir de `pobladores` (`(ser, cuántos)`): spawnea
+    /// `Σ cuántos` habitantes sobre el grid (esparcidos alrededor del centro), cada uno
+    /// con la conducta y el cuerpo de su Ser. Si ya hay esa cantidad, sólo refresca la
+    /// conducta de cada uno (para que editar los parámetros se note en vivo). Tope de
+    /// 16 para no recargar el preview.
+    pub fn ensure_manada(&mut self, pobladores: &[(CharSpec, usize)]) {
+        let total: usize = pobladores.iter().map(|(_, n)| n).sum::<usize>().min(16);
+        if self.manada.len() != total {
+            self.manada.clear();
+            let [dx, _, dz] = self.dim;
+            let (cx, cz) = (dx as i32 / 2, dz as i32 / 2);
+            let mut k = 0u32;
+            'fill: for (spec, n) in pobladores {
+                for _ in 0..*n {
+                    if self.manada.len() >= 16 {
+                        break 'fill;
+                    }
+                    // Esparcido determinista alrededor del centro (±~18 voxels).
+                    let ox = (k.wrapping_mul(7) % 37) as i32 - 18;
+                    let oz = (k.wrapping_mul(13) % 37) as i32 - 18;
+                    let x = (cx + ox).clamp(1, dx as i32 - 2) as u32;
+                    let z = (cz + oz).clamp(1, dz as i32 - 2) as u32;
+                    let h = Habitante::spawn(&self.grid, x, z, spec.conducta.clone(), 1 + k);
+                    self.manada.push((h, spec.clone()));
+                    k += 1;
+                }
+            }
+        } else {
+            // Misma cantidad: refrescar el spec (conducta/cuerpo/colores) de cada uno
+            // desde los pobladores, en el mismo orden de llenado, para que las ediciones
+            // en vivo (parámetros e impulsos autorados) se noten sin re-spawnear.
+            let mut idx = 0usize;
+            'refresh: for (spec, n) in pobladores {
+                for _ in 0..*n {
+                    if idx >= self.manada.len() {
+                        break 'refresh;
+                    }
+                    let (h, stored) = &mut self.manada[idx];
+                    *stored = spec.clone();
+                    h.set_conducta(spec.conducta.clone());
+                    idx += 1;
+                }
+            }
+        }
+    }
+
+    /// Detiene la bandada.
+    pub fn clear_manada(&mut self) {
+        self.manada.clear();
+    }
+
+    /// `true` si hay bandada activa.
+    pub fn tiene_manada(&self) -> bool {
+        !self.manada.is_empty()
+    }
+
+    /// Avanza la bandada `dt` (cada uno ve a los demás y a la `amenaza`) y arma las
+    /// **metas de render** (matriz + malla) de cada habitante con el cuerpo de su Ser,
+    /// en espacio centrado del shader (grilla − dim/2). Caminan según su andar.
+    pub fn manada_metas(&mut self, dt: f32, amenaza: Option<Vec3>) -> Vec<(Mat4, Vec<Vertex3d>, Vec<u16>)> {
+        let posiciones: Vec<Vec3> = self.manada.iter().map(|(h, _)| h.pos()).collect();
+        for (h, _) in &mut self.manada {
+            h.step(&self.grid, &posiciones, amenaza, dt);
+        }
+        let half = Vec3::new(self.dim[0] as f32, self.dim[1] as f32, self.dim[2] as f32) * 0.5;
+        self.manada
+            .iter()
+            .map(|(h, spec)| spec.to_meta(h.pos() - half, h.heading(), Clip::Walk, h.fase, None))
+            .collect()
+    }
+
+    /// Arranca el **crecimiento** (ley Crecer) del material `planta`: esconde sus
+    /// celdas del grid y las irá revelando de abajo hacia arriba a `velocidad`.
+    pub fn ensure_growth(&mut self, queue: &wgpu::Queue, planta: [u8; 3], velocidad: f32) {
+        if self.growth.is_none() {
+            let g = GrowthSim::from_grid(&self.grid, planta, velocidad);
+            for (pos, _) in g.cells() {
+                self.grid.clear(pos[0], pos[1], pos[2]);
+            }
+            self.voxel.sync(queue, &mut self.grid);
+            self.growth = Some(g);
+        }
+    }
+
+    /// Detiene el crecimiento (el próximo `rebuild_if` repone las plantas completas).
+    pub fn clear_growth(&mut self) {
+        self.growth = None;
+    }
+
+    /// Revela el siguiente lote de celdas de planta y lo sube a la GPU. No-op sin
+    /// crecimiento activo.
+    pub fn growth_step(&mut self, queue: &wgpu::Queue) {
+        let Self { growth, grid, voxel, .. } = self;
+        let Some(g) = growth else { return };
+        let batch = g.step();
+        if batch.is_empty() {
+            return;
+        }
+        for (pos, color) in batch {
+            grid.set(pos[0], pos[1], pos[2], color);
+        }
+        voxel.sync(queue, grid);
+    }
+
+    /// Arranca una **ley autorada** (Ecuacion) sobre las celdas del material `color`
+    /// (± `tol`), si no hay una ya corriendo. `campos` define el estado y `vis` el campo
+    /// que tiñe el color. No mueve celdas: las recolorea.
+    pub fn ensure_ecuacion(&mut self, color: [u8; 3], tol: i32, campos: &[FieldDef], vis: usize) {
+        if self.ecuacion.is_none() {
+            self.ecuacion = Some(EcuacionSim::from_grid(&self.grid, color, tol, campos.to_vec(), vis));
+        }
+    }
+
+    /// Detiene la ley autorada (el próximo `rebuild_if` repone los colores originales).
+    pub fn clear_ecuacion(&mut self) {
+        self.ecuacion = None;
+    }
+
+    /// Avanza un paso de la ley autorada y **sube sólo las celdas recoloreadas** a la
+    /// GPU. No-op si no hay una corriendo.
+    pub fn ecuacion_step(&mut self, queue: &wgpu::Queue, program: &Program, params: &[f32]) {
+        let Self { ecuacion, grid, voxel, .. } = self;
+        let Some(sim) = ecuacion else { return };
+        let changes = sim.step(program, params);
+        if changes.is_empty() {
+            return;
+        }
+        for (pos, color) in changes {
+            grid.set(pos[0], pos[1], pos[2], color);
+        }
+        voxel.sync(queue, grid);
+    }
+
+    /// Arranca la **simulación de agua** (ley Fluir) desde el grid actual, si no hay
+    /// una ya corriendo. `agua` es el color con que se identifican/pintan las celdas;
+    /// `(gravedad, horizontal)` son los parámetros de la ley del material líquido.
+    pub fn ensure_sim(&mut self, agua: [u8; 3], gravedad: f32, horizontal: f32) {
+        if self.sim.is_none() {
+            self.sim = Some(WaterSim::with_params(&self.grid, agua, gravedad, horizontal));
+        }
+    }
+
+    /// Detiene la simulación (el próximo `rebuild_if` repone el terreno estático).
+    pub fn clear_sim(&mut self) {
+        self.sim = None;
+    }
+
+    /// Avanza un paso de la simulación de agua y **sube sólo lo cambiado** a la GPU
+    /// (`VoxelRenderer::sync` sobre la caja dirty). No-op si no hay simulación.
+    pub fn sim_step(&mut self, queue: &wgpu::Queue, agua: [u8; 3]) {
+        let Self { sim, grid, voxel, .. } = self;
+        let Some(sim) = sim else { return };
+        for (pos, state) in sim.step() {
+            if state == CELL_WATER {
+                grid.set(pos[0], pos[1], pos[2], agua);
+            } else {
+                grid.clear(pos[0], pos[1], pos[2]);
+            }
+        }
+        voxel.sync(queue, grid);
+    }
+
+    /// Arma el `VoxelRenderer` de un grid con la atmósfera diurna del editor.
+    fn make_voxel(
+        device: &wgpu::Device,
+        queue: &wgpu::Queue,
+        grid: &VoxelGrid,
+        dim: [u32; 3],
+    ) -> VoxelRenderer {
+        let mut voxel = VoxelRenderer::new(device, queue, FMT, grid);
+        voxel.sun_dir = SCENE_SUN; // sol bajo: luz rasante, claroscuro; el plano Backlight mira hacia aquí
+        voxel.atmosphere = Atmosphere {
+            sky_zenith: [64, 118, 196],
+            sky_horizon: [202, 218, 236],
+            fog_density: 1.1 / dim[0] as f32, // bruma de desierto: medio que dispersa → god rays legibles
+            god_rays: 0.9, // haces de sol cruzando la niebla — sello anti-Minecraft
+        };
+        voxel
+    }
+
+    /// Si `gen`/`dim` cambiaron desde el último build, **regenera** el mundo.
+    pub fn rebuild_if(
+        &mut self,
+        device: &wgpu::Device,
+        queue: &wgpu::Queue,
+        mr: &MundoRender,
+        dim: [u32; 3],
+        gen: u64,
+        override_grid: Option<&VoxelGrid>,
+    ) {
+        if gen != self.built_gen || dim != self.dim {
+            self.grid = Self::grid_fuente(mr, dim, override_grid);
+            self.voxel = Self::make_voxel(device, queue, &self.grid, dim);
+            self.dim = dim;
+            self.built_gen = gen;
+            self.interior_tag = None; // el grid ahora es de bioma, no de interior
+            self.origin = [0, 0]; // centrado en el origen
+            self.sim = None; // el grid se rehízo: cualquier simulación queda obsoleta
+            self.growth = None;
+            self.ecuacion = None;
+            self.manada.clear();
+        }
+    }
+
+    /// Muestra un **grid arbitrario** (editor de interiores: piso + muebles),
+    /// reconstruyendo el voxel sólo cuando cambia `gen` (o el tamaño). Invalida el
+    /// caché de bioma para que volver a Mundos/Biomas regenere el terreno.
+    pub fn show_grid(
+        &mut self,
+        device: &wgpu::Device,
+        queue: &wgpu::Queue,
+        grid: VoxelGrid,
+        dim: [u32; 3],
+        gen: u64,
+    ) {
+        if self.interior_tag != Some(gen) || dim != self.dim {
+            self.grid = grid;
+            self.voxel = Self::make_voxel(device, queue, &self.grid, dim);
+            self.dim = dim;
+            self.interior_tag = Some(gen);
+            self.built_gen = u64::MAX; // fuerza rebuild del bioma al volver
+            self.origin = [0, 0];
+            self.sim = None;
+            self.growth = None;
+            self.ecuacion = None;
+            self.manada.clear();
+        }
+    }
+
+    /// Fija la **iluminación** del voxel actual (sol/cielo + luces puntuales). Lo usa
+    /// el editor de interiores para atenuar el ambiente y encender las lámparas cada
+    /// cuadro (barato: sólo actualiza uniforms, no reconstruye el grid).
+    pub fn set_interior_lighting(&mut self, sun_dir: [f32; 3], atmosphere: Atmosphere, lights: Vec<PointLight>) {
+        self.voxel.sun_dir = sun_dir;
+        self.voxel.atmosphere = atmosphere;
+        self.voxel.lights = lights;
+    }
+
+    /// **Asegura la ventana de una escena en un mundo infinito**: regenera el grid
+    /// si cambió la receta (`gen`) o el `origin` de ventana. A diferencia de
+    /// [`Self::rebuild_if`] (mundo finito centrado), aquí el `origin` lo fija el
+    /// caller para que la ventana **siga al reparto** ([`window_origin_for_cast`]
+    /// (llimphi_voxel::window_origin_for_cast)); como sólo regenera al cruzar un
+    /// paso, es barato por cuadro. Para posar actores sobre el relieve usa
+    /// [`Self::ground_at_world`] (toma coords de mundo, no de ventana).
+    pub fn ensure_window(
+        &mut self,
+        device: &wgpu::Device,
+        queue: &wgpu::Queue,
+        mr: &MundoRender,
+        gen: u64,
+        origin: [i32; 2],
+    ) {
+        if gen != self.built_gen || origin != self.origin {
+            self.grid = mr.bioma.generate_window(mr.seed, &mr.palette, self.dim, origin);
+            self.voxel = Self::make_voxel(device, queue, &self.grid, self.dim);
+            self.built_gen = gen;
+            self.origin = origin;
+        }
+        // Bruma de escena (cada cuadro, sólo setea un campo): disuelve el BORDE de la
+        // ventana finita en el horizonte → la escena se ve infinita, no una isla
+        // cuadrada. El preview de Mundos (rebuild_if) queda nítido, sin esto.
+        self.voxel.atmosphere.fog_density = SCENE_FOG / self.dim[0] as f32;
+    }
+
+    /// Regenera la ventana del mundo en un **origen** de grilla `[wx, wz]` (para
+    /// volar un mundo infinito: el terreno es función pura de mundo, así que mover
+    /// el origen scrollea relieve nuevo de forma continua). `fog` ajusta la niebla
+    /// (más densa esconde los bordes de la ventana en un flythrough).
+    pub fn set_window(
+        &mut self,
+        device: &wgpu::Device,
+        queue: &wgpu::Queue,
+        mr: &MundoRender,
+        origin: [i32; 2],
+        fog: f32,
+    ) {
+        self.grid = mr.bioma.generate_window(mr.seed, &mr.palette, self.dim, origin);
+        self.voxel = Self::make_voxel(device, queue, &self.grid, self.dim);
+        self.voxel.atmosphere.fog_density = fog;
+        self.origin = origin;
+    }
+
+    /// Sobrescribe **sol + atmósfera** del render voxel (para un look cinematográfico
+    /// puntual, p.ej. la hora dorada de un flythrough). Aditivo: no toca el preview en
+    /// vivo salvo que se llame. Aplicar **después** de [`set_window`](Self::set_window)
+    /// (que recrea el voxel y resetea estas perillas a su default).
+    pub fn set_lighting(&mut self, sun_dir: [f32; 3], atmosphere: Atmosphere) {
+        self.voxel.sun_dir = sun_dir;
+        self.voxel.atmosphere = atmosphere;
+    }
+
+    /// Setea las perillas **globales** de detalle sub-voxel del ray-march: `rugosidad`
+    /// (bump) + `bisel` (suavizado por isosuperficie). En Biomas/Mundos el detalle FINO
+    /// viaja horneado POR VOXEL en el grid (cada material el suyo); aquí el caller sólo
+    /// sube el `bisel` global (= mayor bisel del bioma) para **encender** el trazado de
+    /// isosuperficie, que el bisel por voxel necesita para modular la normal. Un voxel
+    /// sin detalle autorado cae a estas perillas globales. Barato (sólo uniform);
+    /// `0.0/0.0` = voxel duro clásico. El swatch de Materiales sí lo usa como look global
+    /// (single-material). Ver `VoxelGrid::set_detail`.
+    pub fn set_detalle(&mut self, rugosidad: f32, freq: f32, bisel: f32) {
+        self.voxel.rugosidad_amp = rugosidad;
+        self.voxel.rugosidad_freq = freq;
+        self.voxel.bisel = bisel;
+    }
+
+    /// Prende/apaga la **silueta sub-voxel POR MATERIAL** del ray-march: con ella, un
+    /// material duro (bisel 0 por voxel) conserva el contorno blocky mientras otro liso
+    /// lo redondea, en el mismo frame (sin ella, el `bisel` por voxel sólo cambiaba la
+    /// normal, no la silueta — que salía siempre de la isosuperficie global). Cuesta
+    /// samplear el detalle vecino por evaluación del campo → el caller la prende sólo
+    /// cuando el bioma tiene materiales con bisel distinto. Ver `VoxelRenderer::silueta_por_voxel`.
+    pub fn set_silueta_por_voxel(&mut self, on: bool) {
+        self.voxel.silueta_por_voxel = on;
+    }
+
+    /// Fija la **cantidad de oclusión ambiental** `[0,1]` del ray-march (`1` = clásica,
+    /// retrocompat; baja para seres/blobs redondeados, donde la AO axial pinta anillos sobre
+    /// la esfera). Barato (sólo uniform). Ver `VoxelRenderer::ao_amount`.
+    pub fn set_ao(&mut self, amount: f32) {
+        self.voxel.ao_amount = amount;
+    }
+
+    /// Aplica la **atmósfera de apertura** de una escena en el instante `t`: la
+    /// bruma (densidad) + el fundido DESDE NEGRO (el color de niebla va de negro
+    /// a la bruma). Se llama cada cuadro antes de `render_scene`. Como la cámara
+    /// de la caída arranca alto entre niebla densa, todo se funde a este color →
+    /// negro al principio, mundo entre bruma después.
+    pub fn set_atmosfera_escena(&mut self, atm: &llimphi_voxel::Atmosfera, t: f32) {
+        let color = atm.color_niebla_en(t);
+        self.voxel.atmosphere.sky_horizon = color; // la niebla funde hacia aquí
+        self.voxel.atmosphere.sky_zenith = color; // cielo cerrado por la bruma
+        self.voxel.atmosphere.fog_density = atm.bruma / self.dim[0] as f32;
+    }
+
+    /// Reposa un jugador NUEVO sobre el centro de la ventana actual — para
+    /// "entrar a la escena" a pie.
+    pub fn spawn_jugador(&self) -> llimphi_voxel::Player {
+        llimphi_voxel::Player::spawn_on(&self.grid, self.dim[0] / 2, self.dim[2] / 2)
+    }
+
+    /// Avanza al jugador un paso contra el terreno de la ventana (caminar, con
+    /// gravedad+colisión) o en vuelo libre (`volar`), y devuelve el OJO en el
+    /// frame del render (centrado `-half`, como el resto de la geometría).
+    pub fn step_jugador(
+        &self,
+        j: &mut llimphi_voxel::Player,
+        wish: Vec3,
+        salto: bool,
+        dt: f32,
+        volar: bool,
+    ) -> Vec3 {
+        if volar {
+            j.volar(wish, dt);
+        } else {
+            j.step(&self.grid, wish, salto, dt);
+        }
+        let half = Vec3::new(self.dim[0] as f32, self.dim[1] as f32, self.dim[2] as f32) * 0.5;
+        j.eye() - half
+    }
+
+    /// Posición (espacio de grilla, igual que el render del voxel) del **suelo**
+    /// sobre la columna `(gx, gz)`: pies un voxel por encima del terreno (o `y=0` si
+    /// la columna está vacía). Para parar un actor sobre el relieve.
+    pub fn ground_at(&self, gx: u32, gz: u32) -> Vec3 {
+        let gx = gx.min(self.dim[0] - 1);
+        let gz = gz.min(self.dim[2] - 1);
+        let top = self.grid.height_at(gx, gz).map(|y| y as f32 + 1.0).unwrap_or(0.0);
+        Vec3::new(gx as f32 + 0.5, top, gz as f32 + 0.5)
+    }
+
+    /// Igual que [`Self::ground_at`] pero tomando una columna de **mundo** `(wx,
+    /// wz)`: la mapea a la ventana actual restándole el [`origin`](Self) y devuelve
+    /// la posición en **espacio de ventana** (grilla `[0, dim]`, igual que
+    /// `ground_at`) — el caller le resta `dim/2` para llevarla al espacio centrado
+    /// del shader. Para posar actores de una escena en un mundo infinito: la columna
+    /// se busca donde realmente cae en la ventana que sigue al reparto. Fuera de la
+    /// ventana, se clampa al borde.
+    pub fn ground_at_world(&self, wx: i32, wz: i32) -> Vec3 {
+        let lx = (wx - self.origin[0]).clamp(0, self.dim[0] as i32 - 1) as u32;
+        let lz = (wz - self.origin[1]).clamp(0, self.dim[2] as i32 - 1) as u32;
+        let top = self.grid.height_at(lx, lz).map(|y| y as f32 + 1.0).unwrap_or(0.0);
+        Vec3::new(lx as f32 + 0.5, top, lz as f32 + 0.5)
+    }
+
+    /// Compone **sólo el terreno** sobre `target`, confinado al rect del canvas.
+    pub fn render(
+        &mut self,
+        device: &wgpu::Device,
+        queue: &wgpu::Queue,
+        encoder: &mut wgpu::CommandEncoder,
+        target: &wgpu::TextureView,
+        viewport: (u32, u32),
+        rect: (f32, f32, f32, f32),
+        camera: &Camera3d,
+    ) {
+        self.scene.render_in(
+            device, queue, encoder, target, viewport, rect, camera, Some(&self.voxel), &[],
+        );
+    }
+
+    /// Compone terreno + **actores** (mallas `(model, vértices, índices)`) en el
+    /// mismo depth compartido — para reproducir una escena. Mantiene el pool de
+    /// renderers al tamaño del reparto.
+    #[allow(clippy::too_many_arguments)]
+    pub fn render_scene(
+        &mut self,
+        device: &wgpu::Device,
+        queue: &wgpu::Queue,
+        encoder: &mut wgpu::CommandEncoder,
+        target: &wgpu::TextureView,
+        viewport: (u32, u32),
+        rect: (f32, f32, f32, f32),
+        camera: &Camera3d,
+        actors: &[(Mat4, Vec<Vertex3d>, Vec<u16>)],
+    ) {
+        while self.actor_r.len() < actors.len() {
+            self.actor_r.push(Renderer3d::new(device, FMT));
+        }
+        for (r, (model, v, i)) in self.actor_r.iter_mut().zip(actors) {
+            r.set_geometry(device, v, i);
+            r.set_model(*model);
+        }
+        let refs: Vec<&Renderer3d> = self.actor_r.iter().take(actors.len()).collect();
+        self.scene.render_in(
+            device, queue, encoder, target, viewport, rect, camera, Some(&self.voxel), &refs,
+        );
+    }
+}
diff --git a/llimphi-voxel-studio/src/render.rs b/llimphi-voxel-studio/src/render.rs
new file mode 100644
index 0000000..0b85972
--- /dev/null
+++ b/llimphi-voxel-studio/src/render.rs
@@ -0,0 +1,354 @@
+//! **Exportar una escena a video**: reproduce la [`SceneSpec`] cuadro a cuadro
+//! *headless* (con su propio `Hal`, fuera del contexto GPU de la ventana) — posa
+//! los actores y resuelve la cámara del plano vigente igual que el preview en vivo —
+//! vuelca PNGs y los muxea a un `.mkv` con `foreign-av` (ffmpeg). Pensado para correr
+//! en un worker (`Handle::spawn`): es largo y bloqueante.
+
+use std::path::Path;
+
+use llimphi_3d::glam::Vec3;
+use llimphi_ui::llimphi_hal::{wgpu, Hal};
+use llimphi_ui::llimphi_raster::peniko::Color;
+use llimphi_ui::llimphi_raster::{vello, Renderer};
+use llimphi_voxel::{
+    window_origin_for_cast, world_dim, CharSpec, MundoRender, Project, SceneSpec, PREVIEW_DIM_XZ,
+};
+
+use crate::preview::{WorldPreview, FMT};
+
+const W: u32 = 1280;
+const H: u32 = 720;
+const FPS: u32 = 30;
+/// Carpeta de cuadros, banda sonora y archivo de salida.
+const FRAME_DIR: &str = "/tmp/voxel_studio_film";
+const AUDIO: &str = "/tmp/voxel_studio_film.wav";
+const OUT: &str = "/tmp/voxel_studio_film.mkv";
+/// Turntable (vitrina de un mundo girando) — para el GIF del README.
+const TURN_DIR: &str = "/tmp/voxel_studio_turn";
+const TURN_OUT: &str = "/tmp/voxel_studio_turn.mkv";
+
+/// **Turntable de un mundo**: orbita el relieve 360° (sin actores) y muxea a un
+/// `.mkv` — la vitrina del motor voxel para el README. Headless.
+pub fn turntable(mr: &MundoRender) -> Result<String, String> {
+    let hal = pollster::block_on(Hal::new(None)).map_err(|e| format!("gpu: {e:?}"))?;
+    let mut renderer = Renderer::new(&hal).map_err(|e| format!("renderer: {e:?}"))?;
+    let dim = world_dim(PREVIEW_DIM_XZ);
+    let mut preview = WorldPreview::build(&hal.device, &hal.queue, mr, dim, 1, None);
+    let center = Vec3::new(dim[0] as f32 * 0.5, dim[1] as f32 * 0.32, dim[2] as f32 * 0.5);
+
+    let target = make_target(&hal);
+    let view = target.create_view(&wgpu::TextureViewDescriptor::default());
+
+    std::fs::create_dir_all(TURN_DIR).map_err(|e| e.to_string())?;
+    if let Ok(rd) = std::fs::read_dir(TURN_DIR) {
+        for e in rd.flatten() {
+            if e.path().extension().is_some_and(|x| x == "png") {
+                let _ = std::fs::remove_file(e.path());
+            }
+        }
+    }
+
+    const N: u32 = 120; // 4 s @ 30 fps, una vuelta completa
+    let empty = vello::Scene::new();
+    let sky = Color::from_rgba8(150, 186, 224, 255);
+    for f in 0..N {
+        let yaw = (f as f32 / N as f32) * std::f32::consts::TAU + 0.6;
+        let camera = llimphi_3d::Camera3d::orbit(center, yaw, 0.42, dim[0] as f32 * 1.5);
+        renderer
+            .render_to_view(&hal, &empty, &view, W, H, sky)
+            .map_err(|e| format!("clear: {e:?}"))?;
+        let mut enc = hal
+            .device
+            .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: Some("turn") });
+        preview.render(
+            &hal.device, &hal.queue, &mut enc, &view, (W, H), (0.0, 0.0, W as f32, H as f32),
+            &camera,
+        );
+        hal.queue.submit(std::iter::once(enc.finish()));
+        let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+        write_png(&hal, &target, &format!("{TURN_DIR}/frame_{f:04}.png"));
+    }
+    let pattern = format!("{TURN_DIR}/frame_%04d.png");
+    foreign_av::encode_frames(&pattern, FPS, 30, None, TURN_OUT)
+        .map_err(|e| format!("ffmpeg: {e:?}"))?;
+    Ok(TURN_OUT.to_string())
+}
+
+/// Vuelo sobre un **mundo infinito** — para el GIF del README.
+const FLY_DIR: &str = "/tmp/voxel_studio_fly";
+const FLY_OUT: &str = "/tmp/voxel_studio_fly.mkv";
+
+/// **Flythrough de un mundo infinito**: como el relieve es función pura de mundo,
+/// regenera la ventana en un origen que avanza cada frame (el terreno scrollea sin
+/// fin) mientras la cámara vuela hacia adelante, baja, mirando un poco abajo. La
+/// niebla densa funde el horizonte y los bordes de la ventana. Headless → `.mkv`.
+pub fn flythrough(mr: &MundoRender) -> Result<String, String> {
+    let hal = pollster::block_on(Hal::new(None)).map_err(|e| format!("gpu: {e:?}"))?;
+    let mut renderer = Renderer::new(&hal).map_err(|e| format!("renderer: {e:?}"))?;
+    let dim = [128u32, 56, 128]; // TODO eje ≤128 (tope del VoxelRenderer); la ventana scrollea en Z
+    let mut preview = WorldPreview::build(&hal.device, &hal.queue, mr, dim, 1, None);
+    let target = make_target(&hal);
+    let view = target.create_view(&wgpu::TextureViewDescriptor::default());
+
+    std::fs::create_dir_all(FLY_DIR).map_err(|e| e.to_string())?;
+    if let Ok(rd) = std::fs::read_dir(FLY_DIR) {
+        for e in rd.flatten() {
+            if e.path().extension().is_some_and(|x| x == "png") {
+                let _ = std::fs::remove_file(e.path());
+            }
+        }
+    }
+
+    const N: u32 = 150; // 5 s @ 30 fps
+    let speed = 1.5_f32; // voxels de mundo por frame
+    let fog = 0.55 / dim[2] as f32; // ligera (como el turntable): el relieve se ve nítido
+    let cx = dim[0] / 2;
+    let empty = vello::Scene::new();
+    // Cielo de atardecer cálido detrás de los misses (la atmósfera del voxel lo
+    // pinta encima, pero el clear cálido evita un borde frío si la niebla afloja).
+    let sky = Color::from_rgba8(236, 206, 168, 255);
+
+    for f in 0..N {
+        let cam_z = f as f32 * speed;
+        // La ventana scrollea (origen avanza en Z) → el mundo fluye hacia el ojo.
+        let oz = cam_z as i32;
+        preview.set_window(&hal.device, &hal.queue, mr, [0, oz], fog);
+        // **Hora dorada**: sol bajo y cálido (sombras largas que rastrillan las dunas
+        // y los cactus) + cielo de atardecer + god rays cruzando la niebla. Es el
+        // sello "anti-Minecraft" del studio, mucho más cinematográfico que el mediodía
+        // plano. Se aplica tras `set_window` (que resetea estas perillas).
+        preview.set_lighting(
+            [0.55, 0.30, -0.18], // sol bajo (y=0.30 → cálido), de costado-atrás
+            llimphi_3d::Atmosphere {
+                sky_zenith: [60, 104, 176],   // azul profundo arriba
+                sky_horizon: [240, 196, 146], // dorado/arena en el horizonte
+                fog_density: 0.85 / dim[2] as f32,
+                god_rays: 0.9,
+            },
+        );
+
+        // Vuelo bajo hacia adelante, ¡EN COORDENADAS CENTRADAS! El shader hace
+        // `ro = cam_eye + dim/2` → espera el volumen centrado en el origen.
+        // Cámara en el centro X, a 1/4 de la ventana en Z, mirando +Z.
+        let cz_grid = dim[2] as f32 * 0.25;
+        let ground = preview.ground_at(cx, cz_grid as u32).y;
+        let half = Vec3::new(dim[0] as f32, dim[1] as f32, dim[2] as f32) * 0.5;
+        let eye = Vec3::new(dim[0] as f32 * 0.5, ground + 14.0, cz_grid) - half;
+        let mut camera = llimphi_3d::Camera3d::fly(eye, 0.0, -0.28); // mira +Z, ~16° abajo
+        camera.fovy_rad = 64_f32.to_radians();
+
+        renderer
+            .render_to_view(&hal, &empty, &view, W, H, sky)
+            .map_err(|e| format!("clear: {e:?}"))?;
+        let mut enc = hal
+            .device
+            .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: Some("fly") });
+        preview.render(
+            &hal.device, &hal.queue, &mut enc, &view, (W, H), (0.0, 0.0, W as f32, H as f32),
+            &camera,
+        );
+        hal.queue.submit(std::iter::once(enc.finish()));
+        let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+        write_png(&hal, &target, &format!("{FLY_DIR}/frame_{f:04}.png"));
+    }
+    let pattern = format!("{FLY_DIR}/frame_%04d.png");
+    foreign_av::encode_frames(&pattern, FPS, 30, None, FLY_OUT).map_err(|e| format!("ffmpeg: {e:?}"))?;
+    Ok(FLY_OUT.to_string())
+}
+
+/// Textura intermedia W×H para los renders headless.
+fn make_target(hal: &Hal) -> wgpu::Texture {
+    hal.device.create_texture(&wgpu::TextureDescriptor {
+        label: Some("render-target"),
+        size: wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+        mip_level_count: 1,
+        sample_count: 1,
+        dimension: wgpu::TextureDimension::D2,
+        format: FMT,
+        usage: wgpu::TextureUsages::STORAGE_BINDING
+            | wgpu::TextureUsages::TEXTURE_BINDING
+            | wgpu::TextureUsages::RENDER_ATTACHMENT
+            | wgpu::TextureUsages::COPY_SRC,
+        view_formats: &[],
+    })
+}
+
+/// Exporta `scene` (de `project`) a un video. Devuelve la ruta del `.mkv` o un
+/// mensaje de error. Bloqueante.
+pub fn export_scene(project: &Project, scene: &SceneSpec) -> Result<String, String> {
+    let mr = project
+        .render_mundo(scene.mundo)
+        .ok_or("la escena no tiene un mundo de fondo válido")?;
+
+    let hal = pollster::block_on(Hal::new(None)).map_err(|e| format!("gpu: {e:?}"))?;
+    let mut renderer = Renderer::new(&hal).map_err(|e| format!("renderer: {e:?}"))?;
+    let dim = world_dim(PREVIEW_DIM_XZ);
+    let mut preview = WorldPreview::build(&hal.device, &hal.queue, &mr, dim, 1, None);
+
+    let scripts = scene.scripts();
+    let chars: Vec<CharSpec> = scene
+        .actors
+        .iter()
+        .map(|a| project.character_or_default(a.character))
+        .collect();
+
+    let target = hal.device.create_texture(&wgpu::TextureDescriptor {
+        label: Some("film-target"),
+        size: wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+        mip_level_count: 1,
+        sample_count: 1,
+        dimension: wgpu::TextureDimension::D2,
+        format: FMT,
+        usage: wgpu::TextureUsages::STORAGE_BINDING
+            | wgpu::TextureUsages::TEXTURE_BINDING
+            | wgpu::TextureUsages::RENDER_ATTACHMENT
+            | wgpu::TextureUsages::COPY_SRC,
+        view_formats: &[],
+    });
+    let view = target.create_view(&wgpu::TextureViewDescriptor::default());
+
+    prepare_dir()?;
+    let frames = (scene.duration * FPS as f32).round().max(1.0) as u32;
+    let empty = vello::Scene::new();
+    let sky = Color::from_rgba8(150, 186, 224, 255);
+
+    for f in 0..frames {
+        let t = f as f32 / FPS as f32;
+
+        // Limpiar el target (fondo cielo) antes de componer el mundo.
+        renderer
+            .render_to_view(&hal, &empty, &view, W, H, sky)
+            .map_err(|e| format!("clear: {e:?}"))?;
+
+        // Mundo infinito: la ventana voxel sigue al reparto (mismo criterio que el
+        // preview en vivo) → la escena no vive en una caja fija de 128³.
+        let origin = window_origin_for_cast(&scripts, t, dim);
+        preview.ensure_window(&hal.device, &hal.queue, &mr, 1, origin);
+
+        // Posar a los actores sobre el relieve y encuadrar al reparto.
+        // El shader voxel espera la cámara/posiciones en COORDS CENTRADAS (la grilla
+        // está centrada en el origen: world = grilla − dim/2). `ground_at_world`
+        // devuelve coords de ventana → hay que restar `half`, o el terreno queda
+        // corrido fuera de cuadro en los planos cercanos (el reparto "flota").
+        let half = Vec3::new(dim[0] as f32, dim[1] as f32, dim[2] as f32) * 0.5;
+        let mut poses = Vec::with_capacity(scripts.len());
+        let mut centroid = Vec3::ZERO;
+        for (script, ch) in scripts.iter().zip(&chars) {
+            // Tiempo cuantizado a la tasa propia del actor: el Héroe (12 fps) se
+            // mueve y posa en doses; los demás, fluidos. Sello de animación.
+            let at = script.quantize(t);
+            let s = script.sample(at);
+            // Coords de MUNDO → la ventana que sigue al reparto las mapea.
+            let pos = preview.ground_at_world(s.gx as i32, s.gz as i32) - half;
+            centroid += pos;
+            poses.push((pos, s, ch, at));
+        }
+        let look = if poses.is_empty() {
+            Vec3::new(0.0, dim[1] as f32 * (0.32 - 0.5), 0.0)
+        } else {
+            centroid / poses.len() as f32 + Vec3::new(0.0, 1.0, 0.0)
+        };
+        let cast_d = 6.0 + poses.len() as f32 * 1.2;
+        let camera = scene.camera_at(look, cast_d, t);
+
+        let mut metas = Vec::with_capacity(poses.len());
+        for (pos, s, ch, at) in &poses {
+            // Humanoide → Actor rico; rig → su andar (lo decide CharSpec::to_meta).
+            metas.push(ch.to_meta(*pos, s.facing, s.clip, *at, Some(camera.eye)));
+        }
+
+        let mut enc = hal
+            .device
+            .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: Some("film") });
+        preview.render_scene(
+            &hal.device, &hal.queue, &mut enc, &view, (W, H), (0.0, 0.0, W as f32, H as f32),
+            &camera, &metas,
+        );
+        hal.queue.submit(std::iter::once(enc.finish()));
+        let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+
+        write_png(&hal, &target, &format!("{FRAME_DIR}/frame_{f:04}.png"));
+    }
+
+    // Banda sonora compuesta a la medida de la escena (bioma → ánimo, duración →
+    // compases) y sincronizada a los beats del guion (cortes + gestos).
+    let beats = scene.beat_times();
+    crate::soundtrack::render_for_scene(AUDIO, scene, &mr.bioma, mr.seed, &beats);
+
+    let pattern = format!("{FRAME_DIR}/frame_%04d.png");
+    foreign_av::encode_frames(&pattern, FPS, 32, Some(Path::new(AUDIO)), OUT)
+        .map_err(|e| format!("ffmpeg falló ({e:?}); los PNG quedaron en {FRAME_DIR}/"))?;
+    Ok(OUT.to_string())
+}
+
+/// Crea la carpeta de cuadros y borra los PNG viejos (escenas más cortas no deben
+/// dejar cuadros sobrantes que ffmpeg muxearía).
+fn prepare_dir() -> Result<(), String> {
+    std::fs::create_dir_all(FRAME_DIR).map_err(|e| e.to_string())?;
+    if let Ok(rd) = std::fs::read_dir(FRAME_DIR) {
+        for e in rd.flatten() {
+            if e.path().extension().is_some_and(|x| x == "png") {
+                let _ = std::fs::remove_file(e.path());
+            }
+        }
+    }
+    Ok(())
+}
+
+/// Lee la textura a CPU y la vuelca como PNG RGBA8.
+fn write_png(hal: &Hal, target: &wgpu::Texture, path: &str) {
+    let unpadded = (W * 4) as usize;
+    let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize;
+    let padded = unpadded.div_ceil(align) * align;
+    let buf = hal.device.create_buffer(&wgpu::BufferDescriptor {
+        label: Some("readback"),
+        size: (padded * H as usize) as u64,
+        usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
+        mapped_at_creation: false,
+    });
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    enc.copy_texture_to_buffer(
+        wgpu::TexelCopyTextureInfo {
+            texture: target,
+            mip_level: 0,
+            origin: wgpu::Origin3d::ZERO,
+            aspect: wgpu::TextureAspect::All,
+        },
+        wgpu::TexelCopyBufferInfo {
+            buffer: &buf,
+            layout: wgpu::TexelCopyBufferLayout {
+                offset: 0,
+                bytes_per_row: Some(padded as u32),
+                rows_per_image: Some(H),
+            },
+        },
+        wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let slice = buf.slice(..);
+    let (tx, rx) = std::sync::mpsc::channel();
+    slice.map_async(wgpu::MapMode::Read, move |r| {
+        let _ = tx.send(r);
+    });
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    rx.recv().unwrap().unwrap();
+    let data = slice.get_mapped_range();
+    let mut pixels = Vec::with_capacity((W * H * 4) as usize);
+    for row in 0..H as usize {
+        let s = row * padded;
+        pixels.extend_from_slice(&data[s..s + unpadded]);
+    }
+    drop(data);
+    buf.unmap();
+
+    use std::io::BufWriter;
+    let Ok(file) = std::fs::File::create(path) else { return };
+    let mut e = png::Encoder::new(BufWriter::new(file), W, H);
+    e.set_color(png::ColorType::Rgba);
+    e.set_depth(png::BitDepth::Eight);
+    if let Ok(mut w) = e.write_header() {
+        let _ = w.write_image_data(&pixels);
+    }
+}
diff --git a/llimphi-voxel-studio/src/rostro.rs b/llimphi-voxel-studio/src/rostro.rs
new file mode 100644
index 0000000..4c751c2
--- /dev/null
+++ b/llimphi-voxel-studio/src/rostro.rs
@@ -0,0 +1,283 @@
+//! **Rasgos desde una foto** para parametrizar un personaje ESTILIZADO (capa 3 del
+//! detalle sub-voxel — ver [[detalle-sub-voxel-rugosidad]]).
+//!
+//! Lección clave (2026-07-18): voxelizar la foto LITERAL (busto fotográfico) cae de
+//! lleno en el valle de inquietud — a tamaño grande da terror. La especie tiene un
+//! **estilo propio** (el [`CharSpec`](llimphi_voxel::CharSpec)/Actor estilizado: gestos,
+//! personalidad, proporciones cuantizadas); la foto **sólo regula RASGOS** (color de
+//! piel, ropa). Este módulo NO fabrica geometría: sólo mira la persona recortada y
+//! promedia los colores que definen su look, para asignárselos a un personaje del kit.
+//!
+//! El recorte de la persona (para no promediar el fondo) llega por un [`Proveedor`] de
+//! `pixel-verbo` (u2net por el daemon); sin él, se muestrea el centro de la imagen.
+
+use pixel_verbo_core::{Imagen, OpPixel, Proveedor};
+
+/// Socket por defecto del `pixel-verbo-daemon` (mismo que el binario): permite al
+/// studio pedirle un recorte de persona (u2net) sin linkear `ort`.
+pub fn socket_por_defecto() -> std::path::PathBuf {
+    if let Ok(xdg) = std::env::var("XDG_RUNTIME_DIR") {
+        if !xdg.is_empty() {
+            return std::path::PathBuf::from(xdg).join("pixel-verbo.sock");
+        }
+    }
+    std::path::PathBuf::from("/tmp/pixel-verbo.sock")
+}
+
+/// Error del pipeline de rasgos.
+#[derive(Debug)]
+pub enum RostroError {
+    Decode(String),
+}
+
+impl std::fmt::Display for RostroError {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            RostroError::Decode(m) => write!(f, "decodificar la foto: {m}"),
+        }
+    }
+}
+
+/// **Rasgos de color** que la foto aporta a un personaje estilizado. Son los tres
+/// campos de color del [`CharSpec`](llimphi_voxel::CharSpec)/Actor — nada de geometría.
+#[derive(Debug, Clone, Copy)]
+pub struct Rasgos {
+    /// Piel (cara) `[r,g,b]` en `[0,1]`.
+    pub skin: [f32; 3],
+    /// **Pelo** `[r,g,b]` en `[0,1]`, muestreado de la banda superior de la cabeza (fiel al
+    /// original, no derivado de la piel).
+    pub hair: [f32; 3],
+    /// Torso/remera `[r,g,b]` en `[0,1]`.
+    pub shirt: [f32; 3],
+    /// Pantalón `[r,g,b]` en `[0,1]` (derivado: retrato no lo muestra).
+    pub pants: [f32; 3],
+    /// Si el recorte de persona lo dio un modelo real (`true`) o se muestreó al centro.
+    pub recorte_real: bool,
+}
+
+/// Decodifica `bytes` (PNG/JPEG/…) a `(rgba, w, h)`, reescalado a `lado_max` de ancho.
+fn decodificar(bytes: &[u8], lado_max: u32) -> Result<(Vec<u8>, u32, u32), RostroError> {
+    let img = image::load_from_memory(bytes).map_err(|e| RostroError::Decode(e.to_string()))?;
+    let rgba = img.to_rgba8();
+    let (w0, h0) = (rgba.width(), rgba.height());
+    if w0 <= lado_max {
+        return Ok((rgba.into_raw(), w0, h0));
+    }
+    let h = (h0 * lado_max / w0).max(1);
+    let chica = image::imageops::resize(&rgba, lado_max, h, image::imageops::FilterType::Triangle);
+    Ok((chica.into_raw(), lado_max, h))
+}
+
+/// **Foto (bytes) → rasgos de un personaje.** Si `recorte` responde una máscara del
+/// mismo tamaño (u2net), se muestrean SÓLO los píxeles de la persona (piel del tercio
+/// superior, ropa del inferior); si no, se muestrea el centro de la imagen. Devuelve los
+/// tres colores para poblar un `CharSpec` estilizado (la especie pone su estilo).
+pub fn rasgos_desde_bytes(
+    bytes: &[u8],
+    recorte: Option<&dyn Proveedor>,
+) -> Result<Rasgos, RostroError> {
+    let (rgba, w, h) = decodificar(bytes, 384)?;
+
+    // Alpha de persona: del recorte real (u2net) o todo opaco (centro).
+    let (alpha, recorte_real) = match recorte {
+        Some(prov) => match Imagen::nueva(w, h, rgba.clone())
+            .ok()
+            .and_then(|img| prov.aplicar(&OpPixel::Segmentar { prompt: None }, Some(img)).ok())
+        {
+            Some(seg) if seg.ancho == w && seg.alto == h => {
+                (seg.bytes.chunks_exact(4).map(|p| p[3]).collect::<Vec<u8>>(), true)
+            }
+            _ => (vec![255u8; (w * h) as usize], false),
+        },
+        None => (vec![255u8; (w * h) as usize], false),
+    };
+
+    Ok(muestrear_rasgos(&rgba, &alpha, w, h, recorte_real))
+}
+
+/// Promedia los colores característicos de la persona (`alpha > 128`), separando bien las
+/// zonas para que **piel y pelo salgan FIELES** (no derivados): **pelo** en la banda superior
+/// de la cabeza, **piel** en la franja de la cara (debajo del pelo, píxeles cálidos), **ropa**
+/// en la mitad inferior; pantalón derivado. Función pura → testeable sin red.
+pub fn muestrear_rasgos(rgba: &[u8], alpha: &[u8], w: u32, h: u32, recorte_real: bool) -> Rasgos {
+    let (w, h) = (w as usize, h as usize);
+    // Bbox de la persona.
+    let (mut x0, mut y0, mut x1, mut y1) = (w, h, 0usize, 0usize);
+    let mut hay = false;
+    for y in 0..h {
+        for x in 0..w {
+            if alpha[y * w + x] > 128 {
+                hay = true;
+                x0 = x0.min(x);
+                y0 = y0.min(y);
+                x1 = x1.max(x);
+                y1 = y1.max(y);
+            }
+        }
+    }
+    if !hay {
+        // Sin persona → centro de la imagen entera.
+        x0 = w / 4;
+        x1 = 3 * w / 4;
+        y0 = h / 4;
+        y1 = 3 * h / 4;
+    }
+    let bh = (y1 - y0).max(1);
+    let xr = x0..=x1.min(w - 1);
+
+    // Promedio simple de una banda vertical `[ya,yb)` (sólo persona), franja central en X
+    // (evita bordes/orejas) → color fiel de esa zona. `None` si no hubo píxeles.
+    let banda = |ya: usize, yb: usize, cx0: usize, cx1: usize| -> Option<[f32; 3]> {
+        let (mut r, mut g, mut b, mut n) = (0u64, 0u64, 0u64, 0u64);
+        for y in ya..yb.min(h) {
+            for x in cx0..=cx1.min(w - 1) {
+                if alpha[y * w + x] <= 128 {
+                    continue;
+                }
+                let o = (y * w + x) * 4;
+                r += rgba[o] as u64; g += rgba[o + 1] as u64; b += rgba[o + 2] as u64; n += 1;
+            }
+        }
+        (n > 0).then(|| [r as f32 / n as f32, g as f32 / n as f32, b as f32 / n as f32])
+    };
+
+    // Franja central en X (60% del ancho de la cara) para pelo/piel.
+    let bw = (x1 - x0).max(1);
+    let cx0 = x0 + bw * 20 / 100;
+    let cx1 = x0 + bw * 80 / 100;
+
+    // **Pelo**: banda superior de la cabeza (top 18% del bbox) — FIEL al original.
+    let hair = banda(y0, y0 + bh * 18 / 100, cx0, cx1).unwrap_or([60.0, 44.0, 36.0]);
+
+    // **Piel**: franja de la cara (22%–52% del bbox, debajo del pelo). Prioriza píxeles
+    // cálidos (R≥G≥B) para no tomar sombra/pelo; si no hay suficientes, promedio fiel de la
+    // franja entera (no un default inventado → fidelidad).
+    let cara_y0 = y0 + bh * 22 / 100;
+    let cara_y1 = y0 + bh * 52 / 100;
+    let (mut sr, mut sg, mut sb, mut sn) = (0u64, 0u64, 0u64, 0u64);
+    for y in cara_y0..cara_y1.min(h) {
+        for x in cx0..=cx1.min(w - 1) {
+            if alpha[y * w + x] <= 128 {
+                continue;
+            }
+            let o = (y * w + x) * 4;
+            let (r, g, b) = (rgba[o] as i32, rgba[o + 1] as i32, rgba[o + 2] as i32);
+            let bri = r + g + b;
+            // Piel: cálida (R≥G≥B) y ni muy oscura ni saturada — sin exigir contraste fuerte.
+            if r >= g && g >= b && (r - b) > 6 && bri > 140 {
+                sr += r as u64; sg += g as u64; sb += b as u64; sn += 1;
+            }
+        }
+    }
+    let skin = if sn > 30 {
+        [sr as f32 / sn as f32, sg as f32 / sn as f32, sb as f32 / sn as f32]
+    } else {
+        banda(cara_y0, cara_y1, cx0, cx1).unwrap_or([220.0, 174.0, 138.0])
+    };
+
+    // Ropa: color medio de la mitad inferior del bbox (torso).
+    let torso_y0 = y0 + bh * 50 / 100;
+    let (mut cr, mut cg, mut cb, mut cn) = (0u64, 0u64, 0u64, 0u64);
+    for y in torso_y0..=y1.min(h - 1) {
+        for x in xr.clone() {
+            if alpha[y * w + x] <= 128 {
+                continue;
+            }
+            let o = (y * w + x) * 4;
+            cr += rgba[o] as u64; cg += rgba[o + 1] as u64; cb += rgba[o + 2] as u64; cn += 1;
+        }
+    }
+    let shirt = if cn > 0 {
+        [cr as f32 / cn as f32, cg as f32 / cn as f32, cb as f32 / cn as f32]
+    } else {
+        [70.0, 120.0, 150.0]
+    };
+
+    let n = |v: [f32; 3]| [v[0] / 255.0, v[1] / 255.0, v[2] / 255.0];
+    let skin = n(skin);
+    let hair = n(hair);
+    let shirt = n(shirt);
+    // Pantalón: derivado (más oscuro y frío que la remera) — el retrato no lo muestra.
+    let pants = [shirt[0] * 0.45, shirt[1] * 0.5, (shirt[2] * 0.7).min(1.0)];
+    Rasgos { skin, hair, shirt, pants, recorte_real }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    /// Imagen de prueba: **pelo oscuro** en la banda superior, cara clara (piel cálida)
+    /// debajo, torso azul abajo, sobre un fondo que NO debe contaminar (recorte lo excluye).
+    fn retrato(w: u32, h: u32) -> (Vec<u8>, Vec<u8>) {
+        let mut rgba = vec![0u8; (w * h * 4) as usize];
+        let mut alpha = vec![0u8; (w * h) as usize];
+        let cx = w / 2;
+        for y in 0..h {
+            for x in 0..w {
+                let i = (y * w + x) as usize;
+                let o = i * 4;
+                let dx = x as i32 - cx as i32;
+                let dentro = (dx.unsigned_abs()) < w / 3; // persona = franja central
+                if !dentro {
+                    rgba[o] = 20; rgba[o + 1] = 220; rgba[o + 2] = 20; rgba[o + 3] = 255; // fondo verde
+                    continue;
+                }
+                alpha[i] = 255;
+                if y < h * 15 / 100 {
+                    rgba[o] = 70; rgba[o + 1] = 46; rgba[o + 2] = 30; // pelo castaño oscuro
+                } else if y < h / 2 {
+                    rgba[o] = 220; rgba[o + 1] = 170; rgba[o + 2] = 140; // piel cálida
+                } else {
+                    rgba[o] = 40; rgba[o + 1] = 70; rgba[o + 2] = 190; // torso azul
+                }
+                rgba[o + 3] = 255;
+            }
+        }
+        (rgba, alpha)
+    }
+
+    #[test]
+    fn extrae_piel_calida_y_ropa_sin_contaminar_el_fondo() {
+        let (w, h) = (64, 96);
+        let (rgba, alpha) = retrato(w, h);
+        let r = muestrear_rasgos(&rgba, &alpha, w, h, true);
+        assert!(r.skin[0] > r.skin[1] && r.skin[1] > r.skin[2], "piel cálida: {:?}", r.skin);
+        assert!(r.skin[0] > 0.6, "piel clara: {:?}", r.skin);
+        assert!(r.shirt[2] > r.shirt[0] && r.shirt[2] > r.shirt[1], "remera azul: {:?}", r.shirt);
+        assert!(r.shirt[1] < 0.5, "el fondo verde NO contaminó la remera: {:?}", r.shirt);
+        assert!(r.pants[2] < r.shirt[2], "pantalón más oscuro: {:?} vs {:?}", r.pants, r.shirt);
+    }
+
+    #[test]
+    fn muestrea_pelo_fiel_y_distinto_de_la_piel() {
+        // El pelo sale de la banda superior (castaño oscuro), NO derivado de la piel: más
+        // oscuro que la piel y en su tono real.
+        let (w, h) = (64, 96);
+        let (rgba, alpha) = retrato(w, h);
+        let r = muestrear_rasgos(&rgba, &alpha, w, h, true);
+        let lum = |c: [f32; 3]| c[0] + c[1] + c[2];
+        assert!(lum(r.hair) < lum(r.skin), "pelo más oscuro que piel: {:?} vs {:?}", r.hair, r.skin);
+        assert!(r.hair[0] > r.hair[2], "pelo cálido/castaño: {:?}", r.hair);
+        assert!(r.hair[0] < 0.5, "pelo oscuro fiel (no piel clara): {:?}", r.hair);
+    }
+
+    #[test]
+    fn sin_recorte_muestrea_el_centro_sin_panic() {
+        let (w, h) = (40, 40);
+        let (rgba, _) = retrato(w, h);
+        let alpha = vec![255u8; (w * h) as usize];
+        let r = muestrear_rasgos(&rgba, &alpha, w, h, false);
+        assert!(!r.recorte_real);
+        for c in [r.skin, r.hair, r.shirt, r.pants] {
+            for v in c {
+                assert!((0.0..=1.0).contains(&v), "color en rango: {v}");
+            }
+        }
+    }
+
+    #[test]
+    fn bytes_corruptos_dan_error_decode() {
+        let r = rasgos_desde_bytes(&[1, 2, 3, 4], None);
+        assert!(matches!(r, Err(RostroError::Decode(_))));
+    }
+}
diff --git a/llimphi-voxel-studio/src/shot.rs b/llimphi-voxel-studio/src/shot.rs
new file mode 100644
index 0000000..2921ba2
--- /dev/null
+++ b/llimphi-voxel-studio/src/shot.rs
@@ -0,0 +1,335 @@
+//! Pantallazo headless del studio: monta la **view real** de la app (la misma
+//! `Studio::view`) con el `Model` de arranque, pinta el chrome (vello) con
+//! `render_to_view` y luego compone el **preview 3D** en su canvas con
+//! `paint_gpu` sobre el mismo target — un cuadro completo, sin abrir ventana.
+//!
+//! `cargo run -p llimphi-voxel-studio --release -- --shot [out.png]`
+
+use std::fs::File;
+use std::io::BufWriter;
+
+use llimphi_ui::llimphi_hal::{wgpu, Hal};
+use llimphi_ui::llimphi_layout::taffy;
+use llimphi_ui::llimphi_layout::LayoutTree;
+use llimphi_ui::llimphi_raster::peniko::Color;
+use llimphi_ui::llimphi_raster::{vello, Renderer};
+use llimphi_ui::llimphi_text::Typesetter;
+use llimphi_ui::{measure_text_node, mount, paint, paint_gpu, App};
+
+use crate::{demo_model, Level, Model, Studio};
+
+const W: u32 = 1180;
+const H: u32 = 760;
+const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
+
+/// Renderiza la pantalla completa del studio a PNG: una toma del modo Mundos y
+/// otra del modo Escenas (con los actores posados a mitad del guion).
+pub fn shot() {
+    let out = std::env::args()
+        .skip_while(|a| a != "--shot")
+        .nth(1)
+        .unwrap_or_else(|| "/tmp/voxel_studio.png".to_string());
+    if let Some(dir) = std::path::Path::new(&out).parent() {
+        std::fs::create_dir_all(dir).ok();
+    }
+
+    // Toma 1: editor de mundos.
+    render_model(demo_model(), &out);
+
+    // Toma 2: dirección de escena (pestaña Reparto), con los marcadores del recorrido.
+    let mut scene = demo_model();
+    scene.level = Level::Escenas;
+    scene.tool_tab = 1; // Reparto → dibuja los waypoints
+    scene.time = 1.6;
+    let scene_out = out.replace(".png", "_scene.png");
+    let scene_out = if scene_out == out { "/tmp/voxel_studio_scene.png".to_string() } else { scene_out };
+    render_model(scene, &scene_out);
+
+    // Toma 3: editor de seres (turntable del muñeco).
+    let mut chars = demo_model();
+    chars.level = Level::Seres;
+    chars.time = 0.6;
+    let chars_out = out.replace(".png", "_chars.png");
+    let chars_out = if chars_out == out { "/tmp/voxel_studio_chars.png".to_string() } else { chars_out };
+    render_model(chars, &chars_out);
+
+    // Toma 4: un mundo VIVO — simulando (agua + plantas + bandada de seres poblándolo).
+    let mut vivo = demo_model();
+    vivo.level = Level::Mundos;
+    vivo.simulating = true;
+    vivo.dist = 70.0; // más cerca, para ver a los habitantes
+    vivo.time = 0.4;
+    let vivo_out = out.replace(".png", "_vivo.png");
+    let vivo_out = if vivo_out == out { "/tmp/voxel_studio_vivo.png".to_string() } else { vivo_out };
+    render_model(vivo, &vivo_out);
+
+    // Toma 5: editor de MINERALES del bioma (todos sus factores editables).
+    let mut min = demo_model();
+    min.level = Level::Biomas;
+    min.tool_tab = 3; // diente «Minerales»
+    if let Some(b) = min.project.biomas.first() {
+        min.sel[3] = b.id; // selecciona un bioma real (trae minerales)
+    }
+    let min_out = out.replace(".png", "_minerales.png");
+    let min_out = if min_out == out { "/tmp/voxel_studio_minerales.png".to_string() } else { min_out };
+    render_model(min, &min_out);
+
+    // Toma 6: editor de INTERIORES — la sala amueblada de arranque.
+    let mut inter = demo_model();
+    inter.level = Level::Interiores;
+    if let Some(it) = inter.project.interiores.first() {
+        inter.sel[6] = it.id;
+    }
+    inter.pitch = 34_f32.to_radians();
+    inter.dist = 240.0;
+    let inter_out = out.replace(".png", "_interior.png");
+    let inter_out = if inter_out == out { "/tmp/voxel_studio_interior.png".to_string() } else { inter_out };
+    render_model(inter, &inter_out);
+
+    // Toma 7: MUNDO DESDE MAPA — una ciudad sintética (GeoJSON). Se adjunta la
+    // FUENTE al mundo seleccionado (como al persistir) y se genera el grid de ahí.
+    let mut mapa = demo_model();
+    mapa.level = crate::Level::Mundos;
+    let fuente =
+        llimphi_voxel::MapaFuente { geojson: ciudad_geojson(), pgm: None, dem_tif: None, rango_dem_m: 300.0 };
+    let dim = llimphi_voxel::world_dim(llimphi_voxel::PREVIEW_DIM_XZ);
+    if let Ok((grid, _)) = crate::mapa_import::generar(&fuente, dim) {
+        // Persistencia-forma: la fuente vive en el Mundo (se guardaría con el Project).
+        let mid = mapa.sel[crate::Level::Mundos.index()];
+        if let Some(m) = mapa.project.mundos.iter_mut().find(|m| m.id == mid) {
+            m.mapa = Some(fuente);
+        }
+        mapa.mapa = Some(std::sync::Arc::new(grid));
+        mapa.dist = 118.0;
+        mapa.pitch = 16_f32.to_radians(); // ángulo bajo → sensación de skyline
+        mapa.yaw = 42_f32.to_radians();
+        mapa.status = "mundo desde mapa (GeoJSON): ciudad importada".into();
+        let mapa_out = out.replace(".png", "_mapa.png");
+        let mapa_out = if mapa_out == out { "/tmp/voxel_studio_mapa.png".to_string() } else { mapa_out };
+        render_model(mapa, &mapa_out);
+    }
+
+    // Toma 8: editor de MATERIALES — el swatch 3D VIVO del material, con su detalle
+    // sub-voxel (rugosidad + bisel) subido, para ver el look sobre el blob.
+    let mut mat = demo_model();
+    mat.level = crate::Level::Materiales;
+    if let Some(m) = mat.project.materiales.get_mut(0) {
+        m.rugosidad = Some(0.8);
+        m.bisel = Some(0.9);
+    }
+    if let Some(id) = mat.project.materiales.first().map(|m| m.id) {
+        mat.sel[crate::Level::Materiales.index()] = id;
+    }
+    mat.pitch = 12_f32.to_radians();
+    let mat_out = out.replace(".png", "_materiales.png");
+    let mat_out = if mat_out == out { "/tmp/voxel_studio_materiales.png".to_string() } else { mat_out };
+    render_model(mat, &mat_out);
+
+    // Toma 9: SER DESDE FOTO — la foto REGULA los rasgos (piel/ropa) de un personaje
+    // ESTILIZADO del kit (NO se voxeliza literal: eso da el valle). Se muestra el actor
+    // con la piel y la ropa muestreadas de un retrato sintético.
+    let mut foto = demo_model();
+    foto.level = crate::Level::Seres;
+    let (rgba, w, h) = retrato_rgba(96, 128);
+    let alpha: Vec<u8> = rgba.chunks_exact(4).map(|p| p[3]).collect();
+    let r = crate::rostro::muestrear_rasgos(&rgba, &alpha, w, h, true);
+    let id = foto.project.alloc_id();
+    let mut cs = llimphi_voxel::CharSpec::new("retrato", llimphi_voxel::Age::Adult);
+    cs.id = id;
+    cs.skin = r.skin;
+    cs.shirt = r.shirt;
+    cs.pants = r.pants;
+    foto.project.seres.push(cs);
+    foto.set_selected(id);
+    foto.time = 0.6;
+    foto.status = "ser desde foto (rasgos): personaje estilizado".into();
+    let foto_out = out.replace(".png", "_rasgos.png");
+    let foto_out = if foto_out == out { "/tmp/voxel_studio_rasgos.png".to_string() } else { foto_out };
+    render_model(foto, &foto_out);
+}
+
+/// Retrato sintético RGBA (cabeza de piel cálida + torso con color de ropa, sobre fondo
+/// transparente) para la toma «ser desde foto». Es lo que u2net entregaría recortado; el
+/// muestreo de rasgos saca piel (arriba) y ropa (abajo). Devuelve `(rgba, w, h)`.
+fn retrato_rgba(w: u32, h: u32) -> (Vec<u8>, u32, u32) {
+    let (cx, cy) = (w as f32 / 2.0, h as f32 * 0.32);
+    let (rx, ry) = (w as f32 * 0.26, h as f32 * 0.26);
+    let mut px = vec![0u8; (w * h * 4) as usize];
+    for y in 0..h {
+        for x in 0..w {
+            let i = ((y * w + x) * 4) as usize;
+            let nx = (x as f32 - cx) / rx;
+            let ny = (y as f32 - cy) / ry;
+            let en_cabeza = nx * nx + ny * ny <= 1.0;
+            // Torso: trapecio inferior (hombros) desde ~55% de alto.
+            let en_torso = y as f32 > h as f32 * 0.55 && (x as f32 - cx).abs() < rx * 1.7;
+            let (r, g, b) = if en_cabeza {
+                (216u8, 172u8, 138u8) // piel cálida
+            } else if en_torso {
+                (44u8, 120u8, 150u8) // ropa teal
+            } else {
+                px[i + 3] = 0; // fondo
+                continue;
+            };
+            px[i] = r; px[i + 1] = g; px[i + 2] = b; px[i + 3] = 255;
+        }
+    }
+    (px, w, h)
+}
+
+/// GeoJSON sintético de una ciudad (grilla de edificios + calles + un lago) para la
+/// toma «mundo desde mapa» del studio.
+fn ciudad_geojson() -> String {
+    let mut f: Vec<String> = Vec::new();
+    let (lo, hi) = (0.0006f64, 0.0075f64); // ~ 750 m
+    let lerp = |t: f64| lo + (hi - lo) * t;
+    // Lago SO.
+    f.push(format!(
+        r#"{{"type":"Feature","properties":{{"natural":"water"}},"geometry":{{"type":"Polygon","coordinates":[[[{},{}],[{},{}],[{},{}],[{},{}],[{},{}]]]}}}}"#,
+        lerp(0.05), lerp(0.05), lerp(0.32), lerp(0.05), lerp(0.32), lerp(0.28), lerp(0.05), lerp(0.28), lerp(0.05), lerp(0.05)
+    ));
+    // Calles: 3 verticales + 3 horizontales.
+    for k in 1..=3 {
+        let t = k as f64 / 4.0;
+        f.push(format!(
+            r#"{{"type":"Feature","properties":{{"highway":"residential"}},"geometry":{{"type":"LineString","coordinates":[[{},{}],[{},{}]]}}}}"#,
+            lerp(t), lo, lerp(t), hi
+        ));
+        f.push(format!(
+            r#"{{"type":"Feature","properties":{{"highway":"residential"}},"geometry":{{"type":"LineString","coordinates":[[{},{}],[{},{}]]}}}}"#,
+            lo, lerp(t), hi, lerp(t)
+        ));
+    }
+    // Edificios: grilla de cuadras, altura creciente.
+    for gx in 0..3 {
+        for gz in 0..3 {
+            let cx = lerp(0.125 + gx as f64 * 0.25);
+            let cz = lerp(0.125 + gz as f64 * 0.25);
+            if cx < lerp(0.32) && cz < lerp(0.28) {
+                continue; // dentro del lago
+            }
+            let r = (hi - lo) * 0.06;
+            let n = 2 + (gx + gz) * 3;
+            f.push(format!(
+                r#"{{"type":"Feature","properties":{{"building":"yes","building:levels":{n}}},"geometry":{{"type":"Polygon","coordinates":[[[{},{}],[{},{}],[{},{}],[{},{}],[{},{}]]]}}}}"#,
+                cx - r, cz - r, cx + r, cz - r, cx + r, cz + r, cx - r, cz + r, cx - r, cz - r
+            ));
+        }
+    }
+    format!(r#"{{"type":"FeatureCollection","features":[{}]}}"#, f.join(","))
+}
+
+/// Renderiza un `Model` concreto (su view real) a un PNG.
+fn render_model(model: Model, out: &str) {
+    let theme = model.theme.clone();
+    let root = Studio::view(&model);
+
+    // view → layout → scene (misma secuencia que el eventloop real).
+    let mut layout = LayoutTree::new();
+    let mounted = mount(&mut layout, root);
+    let mut ts = Typesetter::new();
+    let computed = {
+        let tmap = &mounted.text_measures;
+        layout
+            .compute_with_measure(mounted.root, (W as f32, H as f32), |nid, known, avail| {
+                match tmap.get(&nid) {
+                    Some(tm) => measure_text_node(&mut ts, tm, known, avail),
+                    None => taffy::Size::ZERO,
+                }
+            })
+            .expect("layout")
+    };
+    let mut scene = vello::Scene::new();
+    paint(&mut scene, &mounted, &computed, &mut ts, None, None);
+
+    let hal = pollster::block_on(Hal::new(None)).expect("hal");
+    let mut renderer = Renderer::new(&hal).expect("renderer");
+    let target = hal.device.create_texture(&wgpu::TextureDescriptor {
+        label: Some("pantallazo-studio"),
+        size: wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+        mip_level_count: 1,
+        sample_count: 1,
+        dimension: wgpu::TextureDimension::D2,
+        format: FMT,
+        usage: wgpu::TextureUsages::STORAGE_BINDING
+            | wgpu::TextureUsages::TEXTURE_BINDING
+            | wgpu::TextureUsages::RENDER_ATTACHMENT
+            | wgpu::TextureUsages::COPY_SRC,
+        view_formats: &[],
+    });
+    let view = target.create_view(&wgpu::TextureViewDescriptor::default());
+
+    // 1) chrome (vello) → target.
+    let [r, g, b, _] = theme.bg_app.components;
+    let bg = Color::from_rgba8((r * 255.0) as u8, (g * 255.0) as u8, (b * 255.0) as u8, 255);
+    renderer
+        .render_to_view(&hal, &scene, &view, W, H, bg)
+        .expect("render_to_view");
+
+    // 2) preview 3D (gpu_paint_with) sobre el canvas, en el mismo target.
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: Some("gpu") });
+    let any = paint_gpu(&mounted, &computed, &hal.device, &hal.queue, &mut enc, &view, (W, H));
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    assert!(any, "el gpu_painter del canvas no corrió");
+
+    write_png(&hal, &target, out);
+    eprintln!("pantallazo_studio: escrito {out} ({W}x{H})");
+}
+
+/// Lee la textura a CPU y la vuelca como PNG RGBA8.
+fn write_png(hal: &Hal, target: &wgpu::Texture, path: &str) {
+    let unpadded = (W * 4) as usize;
+    let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize;
+    let padded = unpadded.div_ceil(align) * align;
+    let buf = hal.device.create_buffer(&wgpu::BufferDescriptor {
+        label: Some("readback"),
+        size: (padded * H as usize) as u64,
+        usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
+        mapped_at_creation: false,
+    });
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    enc.copy_texture_to_buffer(
+        wgpu::TexelCopyTextureInfo {
+            texture: target,
+            mip_level: 0,
+            origin: wgpu::Origin3d::ZERO,
+            aspect: wgpu::TextureAspect::All,
+        },
+        wgpu::TexelCopyBufferInfo {
+            buffer: &buf,
+            layout: wgpu::TexelCopyBufferLayout {
+                offset: 0,
+                bytes_per_row: Some(padded as u32),
+                rows_per_image: Some(H),
+            },
+        },
+        wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let slice = buf.slice(..);
+    let (tx, rx) = std::sync::mpsc::channel();
+    slice.map_async(wgpu::MapMode::Read, move |r| {
+        let _ = tx.send(r);
+    });
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    rx.recv().unwrap().unwrap();
+    let data = slice.get_mapped_range();
+    let mut pixels = Vec::with_capacity((W * H * 4) as usize);
+    for row in 0..H as usize {
+        let s = row * padded;
+        pixels.extend_from_slice(&data[s..s + unpadded]);
+    }
+    drop(data);
+    buf.unmap();
+    let file = File::create(path).expect("png");
+    let mut e = png::Encoder::new(BufWriter::new(file), W, H);
+    e.set_color(png::ColorType::Rgba);
+    e.set_depth(png::BitDepth::Eight);
+    let mut w = e.write_header().unwrap();
+    w.write_image_data(&pixels).unwrap();
+}
diff --git a/llimphi-voxel-studio/src/soundtrack.rs b/llimphi-voxel-studio/src/soundtrack.rs
new file mode 100644
index 0000000..a3647e4
--- /dev/null
+++ b/llimphi-voxel-studio/src/soundtrack.rs
@@ -0,0 +1,213 @@
+//! Banda sonora del export: **compone una pieza a la medida de la escena** con el
+//! motor generativo de takiy (`takiy-genesis`) y la sintetiza a WAV (`takiy-synth`)
+//! para muxearla al video.
+//!
+//! El cruce vive **aquí, en la app studio** — nunca en el motor `llimphi-*` ni en el
+//! núcleo agnóstico `llimphi-voxel`. La app conoce takiy; el motor no. Así se
+//! mantiene la independencia del crate llimphi: takiy entra como *frontend* del
+//! export, no como dependencia del gráfico.
+//!
+//! La escena dicta la música (la geografía es la partitura):
+//!   · el **bioma** (agua/ríos/montaña/relieve) fija el ánimo y el estilo;
+//!   · el **nombre** de la escena y del bioma entran como prosa (`Brief::from_prompt`);
+//!   · la **atmósfera** de apertura (bruma + fundido) tira a lo onírico;
+//!   · la **duración** manda los compases (música que cubre el plano).
+//! Sobre esa pieza caen **campanas** en los *beats del guion* (cortes de cámara +
+//! gestos) para que la música acompañe la acción. Determinista: misma escena →
+//! mismo WAV (la semilla sale del nombre + ids del mundo, sin reloj).
+
+use llimphi_voxel::{Bioma, SceneSpec};
+use takiy_core::{Patch, Pitch, ReverbParams, ScoreNote, Track, Wave};
+use takiy_genesis::{compose, Brief, Mood, Style};
+use takiy_synth::{write_wav, OscRenderer, Renderer};
+
+/// Compone la banda de `scene` con el motor generativo, deja caer campanas sobre
+/// los `accents` (beats del guion, en segundos) y la sintetiza a `path` (WAV PCM
+/// 16-bit). Devuelve la duración en segundos. `world_seed` entra en la semilla para
+/// que dos mundos distintos con el mismo nombre de escena rindan variantes.
+pub fn render_for_scene(
+    path: &str,
+    scene: &SceneSpec,
+    bioma: &Bioma,
+    world_seed: u32,
+    accents: &[f32],
+) -> f32 {
+    let brief = brief_for_scene(scene, bioma, world_seed);
+    let mut score = compose(&brief);
+
+    // Reverb de master según el ánimo: los mundos de agua/onírico respiran más.
+    score.master_reverb = Some(match brief.mood {
+        Mood::Onirico | Mood::Calmo | Mood::Melancolico => {
+            ReverbParams { room_size: 0.7, damping: 0.4, mix: 0.28 }
+        }
+        _ => ReverbParams { room_size: 0.5, damping: 0.5, mix: 0.15 },
+    });
+
+    // Acentos: una campana aguda (fundamental + octava, corta) en cada beat del
+    // guion. Los `accents` vienen en segundos → a beats con el tempo de la pieza.
+    if !accents.is_empty() {
+        let sec_per_beat = 60.0 / brief.tempo_bpm.max(1.0);
+        let mut hits = Track::new("acentos");
+        hits.volume = 0.9;
+        hits.instrument = Some(bell_patch());
+        for &t in accents {
+            let beat = t / sec_per_beat;
+            for midi in [84, 96] {
+                if let Some(p) = Pitch::from_midi(midi) {
+                    hits.add(ScoreNote::new(p, beat, 0.5, 90));
+                }
+            }
+        }
+        score.add_track(hits);
+    }
+
+    let renderer = OscRenderer { sample_rate: 44_100, ..Default::default() };
+    let buf = renderer.render(&score);
+    let secs = buf.duration_seconds();
+    let _ = write_wav(&buf, path);
+    secs
+}
+
+/// Traduce la escena a un [`Brief`] generativo. El nombre (escena + bioma) entra
+/// como prosa; el relieve del bioma refina ánimo/estilo; la duración fija los
+/// compases. Función pura y determinista.
+fn brief_for_scene(scene: &SceneSpec, bioma: &Bioma, world_seed: u32) -> Brief {
+    let seed = scene_seed(scene, world_seed);
+    let mut brief = Brief::from_prompt(&format!("{} {}", scene.name, bioma.name), seed);
+
+    // El relieve del bioma como partitura:
+    //  · mucha agua/ríos → onírico y cinemático (con reverb).
+    //  · mucha montaña/relieve → enérgico y épico.
+    //  · llanura árida y seca → oscuro/esparcido.
+    let agua = bioma.water_level.max(bioma.rivers);
+    let montana = (bioma.relief * bioma.mountains).clamp(0.0, 1.0);
+    if agua > 0.45 {
+        brief.mood = Mood::Onirico;
+        brief.style = Style::Cinematica;
+    } else if montana > 0.35 {
+        brief.mood = Mood::Energico;
+        brief.style = Style::Cinematica;
+    } else if agua < 0.15 && bioma.relief < 0.2 {
+        brief.mood = Mood::Oscuro;
+    }
+
+    // La atmósfera de apertura (bruma + fundido) tira a lo onírico.
+    if scene.atmosfera.is_some() {
+        brief.mood = Mood::Onirico;
+    }
+
+    // La duración manda los compases (4/4): música que cubre la escena.
+    let sec_per_bar = 4.0 * 60.0 / brief.tempo_bpm.max(1.0);
+    brief.bars = ((scene.duration / sec_per_bar).ceil() as usize).clamp(4, 64);
+
+    brief
+}
+
+/// Semilla determinista de la escena: FNV-1a del nombre, mezclado con el id del
+/// mundo y su semilla. Sin reloj → reproducible cuadro a cuadro.
+fn scene_seed(scene: &SceneSpec, world_seed: u32) -> u64 {
+    let mut h: u64 = 0xcbf2_9ce4_8422_2325;
+    for b in scene.name.bytes() {
+        h ^= b as u64;
+        h = h.wrapping_mul(0x0000_0100_0000_01b3);
+    }
+    h ^= scene.mundo.wrapping_mul(0x9e37_79b9_7f4a_7c15);
+    h ^= (world_seed as u64).wrapping_mul(0x2545_f491_4f6c_dd1d);
+    h | 1
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use llimphi_voxel::Clip;
+
+    /// Bioma de prueba con relieve controlado (los materiales no importan aquí).
+    fn bioma(name: &str, water_level: f32, rivers: f32, relief: f32, mountains: f32) -> Bioma {
+        Bioma {
+            id: 1,
+            name: name.into(),
+            base: 0.3,
+            dune: 0.05,
+            relief,
+            mountains,
+            water_level,
+            rivers,
+            peak_at: 0.8,
+            ground: 0,
+            cliff: 0,
+            peak: None,
+            objetos: Vec::new(),
+            minerales: Vec::new(),
+            densidad_urbana: 0.4,
+            casas: Vec::new(),
+            fauna: vec![],
+            seres: Vec::new(),
+        }
+    }
+
+    fn escena(name: &str, dur: f32) -> SceneSpec {
+        let mut s = SceneSpec::walk_and_emote(name, 0, 2, Clip::Wave, [96, 24, 96]);
+        s.duration = dur;
+        s
+    }
+
+    #[test]
+    fn determinista_misma_escena_mismo_brief() {
+        let b = bioma("desierto", 0.1, 0.0, 0.1, 0.1);
+        let s = escena("el despertar", 6.0);
+        let a = brief_for_scene(&s, &b, 1337);
+        let c = brief_for_scene(&s, &b, 1337);
+        assert_eq!(a, c);
+    }
+
+    #[test]
+    fn bioma_de_agua_es_onirico() {
+        let b = bioma("el lago", 0.7, 0.5, 0.1, 0.1);
+        let brief = brief_for_scene(&escena("calma", 8.0), &b, 7);
+        assert_eq!(brief.mood, Mood::Onirico);
+        assert_eq!(brief.style, Style::Cinematica);
+    }
+
+    #[test]
+    fn bioma_de_montana_es_energico() {
+        let b = bioma("las cumbres", 0.1, 0.0, 0.8, 0.8);
+        let brief = brief_for_scene(&escena("la cima", 8.0), &b, 7);
+        assert_eq!(brief.mood, Mood::Energico);
+    }
+
+    #[test]
+    fn llanura_arida_es_oscura() {
+        let b = bioma("el yermo", 0.05, 0.0, 0.1, 0.1);
+        let brief = brief_for_scene(&escena("sed", 8.0), &b, 7);
+        assert_eq!(brief.mood, Mood::Oscuro);
+    }
+
+    #[test]
+    fn la_duracion_manda_los_compases() {
+        let b = bioma("pradera", 0.2, 0.1, 0.2, 0.2);
+        // Escena larga → más compases que una corta.
+        let corta = brief_for_scene(&escena("saludo", 4.0), &b, 7);
+        let larga = brief_for_scene(&escena("saludo", 30.0), &b, 7);
+        assert!(larga.bars > corta.bars);
+        // La pieza cubre (o excede) la duración de la escena.
+        let sec_per_bar = 4.0 * 60.0 / larga.tempo_bpm;
+        assert!(larga.bars as f32 * sec_per_bar >= 30.0);
+    }
+}
+
+/// Campana brillante para los acentos: triángulo agudo con decay corto, filtro
+/// abierto. Corta por encima de la pieza sin taparla.
+fn bell_patch() -> Patch {
+    Patch {
+        name: "Campana".into(),
+        wave: Wave::Triangle,
+        attack: 0.005,
+        decay: 0.18,
+        sustain: 0.0,
+        release: 0.25,
+        cutoff_hz: 6000.0,
+        detune_cents: 0.0,
+        gain: 0.7,
+    }
+    .sanitized()
+}
diff --git a/llimphi-voxel/Cargo.toml b/llimphi-voxel/Cargo.toml
index 34e471e..b23d892 100644
--- a/llimphi-voxel/Cargo.toml
+++ b/llimphi-voxel/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-voxel — capa de dinámica voxel/juego (estilo Minecraft) sobre el motor 3D general llimphi-3d: world-gen procedural (terreno por ruido fractal) y la casa de bloques/biomas/streaming. Reusable por cualquier juego con orientación voxel. NO renderiza: delega en llimphi-3d (Scene3d + VoxelRenderer)."
 
+repository.workspace = true
 [dependencies]
 # El motor 3D general; esta capa aporta CONTENIDO/dinámica, no render.
 llimphi-3d = { path = "../llimphi-3d", version = "0.1.0" }
@@ -17,14 +17,16 @@ foreign-vox = { path = "../shared/foreign-vox", version = "0.1.0" }
 # los artefactos del studio (Project: mundos/personajes con nombre).
 serde = { workspace = true, features = ["derive"] }
 postcard = { workspace = true }
+# Formato de documento del studio: RON legible/diffeable para abrir/guardar/
+# combinar escenas a mano (además del postcard compacto). Ver `documento.rs`.
+ron = { workspace = true }
+# Direccionamiento por contenido (BLAKE3): la HISTORIA de versiones/alternativas
+# del proyecto (`historia.rs`) — cada snapshot es un blob por su hash.
+blake3 = { workspace = true }
 
 [dev-dependencies]
 # Volcado headless a PNG de los demos de mundo (mismo patrón que llimphi-3d).
-llimphi-hal = { path = "../llimphi-hal" }
-llimphi-raster = { path = "../llimphi-raster" }
+llimphi-hal = { path = "../llimphi-hal", version = "0.1.0" }
+llimphi-raster = { path = "../llimphi-raster", version = "0.1.0" }
 png = { workspace = true }
 pollster = { workspace = true }
-# Direccionamiento por contenido (BLAKE3) de las ediciones en el demo de CAS.
-blake3 = { workspace = true }
-# Round-trip RON de los artefactos del studio (Project) en los tests.
-ron = { workspace = true }
diff --git a/llimphi-voxel/LEEME.md b/llimphi-voxel/LEEME.md
new file mode 100644
index 0000000..9ed8d28
--- /dev/null
+++ b/llimphi-voxel/LEEME.md
@@ -0,0 +1,20 @@
+# llimphi-voxel
+
+*Read this in English: [README.md](README.md).*
+
+# llimphi-voxel — dinámica voxel/juego sobre `llimphi-3d`
+
+Capa **opcional** y más comprometida con la "dinámica tipo-Minecraft":
+genera y maneja el *contenido* y la *interacción* de un mundo voxel sobre el
+motor 3D **general** `llimphi_3d`, que es quien renderiza
+(`llimphi_3d::Scene3d` + `llimphi_3d::VoxelRenderer`).
+
+Rama de dependencias pensada como **librería reusable por cualquier juego
+voxel** de la suite: `app → llimphi-voxel → llimphi-3d → wgpu`. El motor
+(cámara, depth compartido, ray-march, mallas) no sabe nada de juegos; aquí
+vive lo que sí: world-gen (`terrain`) y picking/edición (`raycast`).
+El resto (chunks, streaming, bloques tipados) crece aquí sin tocar el motor.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../LEEME.md).
diff --git a/llimphi-voxel/README.md b/llimphi-voxel/README.md
new file mode 100644
index 0000000..19a03b1
--- /dev/null
+++ b/llimphi-voxel/README.md
@@ -0,0 +1,18 @@
+# llimphi-voxel
+
+Voxel/game dynamics over `llimphi-3d`.
+
+An **optional** layer, more committed to "Minecraft-like dynamics": it generates
+and manages a voxel world's *content* and *interaction* over the **general** 3D
+engine `llimphi_3d`, which is the one that renders (`llimphi_3d::Scene3d` +
+`llimphi_3d::VoxelRenderer`).
+
+The dependency branch is meant to be a **library reusable by any voxel game** in
+the suite: `app → llimphi-voxel → llimphi-3d → wgpu`. The engine (camera, shared
+depth, ray-march, meshes) knows nothing about games; what does live here is
+world-gen (`terrain`) and picking/editing (`raycast`). The rest (chunks,
+streaming, typed blocks) grows here without touching the engine.
+
+---
+
+Part of **llimphi** — see [llimphi](../README.md).
diff --git a/llimphi-voxel/examples/casas_demo.rs b/llimphi-voxel/examples/casas_demo.rs
new file mode 100644
index 0000000..df456d1
--- /dev/null
+++ b/llimphi-voxel/examples/casas_demo.rs
@@ -0,0 +1,160 @@
+//! **Casas procedurales**: cada fila es un estilo ([`CasaTipo`]), cada columna una
+//! semilla distinta → se ve la variación dentro de cada estilo (flintstone…dúplex). `cargo run -p llimphi-voxel --example casas_demo --release`
+//! → `/tmp/casas.png`
+
+use std::fs::File;
+use std::io::BufWriter;
+
+use llimphi_3d::glam::Vec3;
+use llimphi_3d::{Atmosphere, Camera3d, Scene3d, VoxelGrid, VoxelRenderer};
+use llimphi_hal::{wgpu, Hal};
+use llimphi_raster::peniko::Color;
+use llimphi_raster::{vello, Renderer};
+use llimphi_voxel::{stamp_casa, CasaTipo, Material};
+
+const W: u32 = 1280;
+const H: u32 = 720;
+const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
+
+fn main() {
+    let tipos = CasaTipo::ALL;
+    let semillas = [3u32, 11, 27, 42];
+    let sx = 22i32; // paso entre semillas
+    let sz = 22i32; // paso entre tipos
+    let margin = 12i32;
+    let dim = [
+        (semillas.len() as i32 * sx + 2 * margin) as u32,
+        44,
+        (tipos.len() as i32 * sz + 2 * margin) as u32,
+    ];
+    let mut g = VoxelGrid::new(dim);
+
+    // Suelo de pasto.
+    for x in 0..dim[0] {
+        for z in 0..dim[2] {
+            let c = Material::Grass.color();
+            let t = ((x * 3 + z * 5) % 9) as i32 - 4;
+            let sh = |v: u8| (v as i32 + t).clamp(0, 255) as u8;
+            g.set(x, 0, z, [sh(c[0]), sh(c[1]), sh(c[2])]);
+        }
+    }
+
+    for (ti, &tipo) in tipos.iter().enumerate() {
+        for (si, &seed) in semillas.iter().enumerate() {
+            let x = margin + si as i32 * sx + sx / 2;
+            let z = margin + ti as i32 * sz + sz / 2;
+            stamp_casa(&mut g, tipo, x as u32, 1, z as u32, seed);
+        }
+        eprintln!("fila {ti}: {}", tipo.label());
+    }
+
+    let hal = pollster::block_on(Hal::new(None)).expect("hal");
+    let mut renderer = Renderer::new(&hal).expect("renderer");
+    let mut vr = VoxelRenderer::new(&hal.device, &hal.queue, FMT, &g);
+    vr.sun_dir = [0.42, 0.6, 0.5];
+    vr.atmosphere = Atmosphere {
+        sky_zenith: [96, 146, 210],
+        sky_horizon: [210, 224, 238],
+        fog_density: 0.2 / dim[0] as f32,
+        god_rays: 0.0,
+    };
+    let half = Vec3::new(dim[0] as f32, dim[1] as f32, dim[2] as f32) * 0.5;
+    let look = Vec3::new(dim[0] as f32 * 0.5, 6.0, dim[2] as f32 * 0.5) - half;
+    let camera = Camera3d::orbit(look, 20_f32.to_radians(), 26_f32.to_radians(), dim[0].max(dim[2]) as f32 * 0.86);
+
+    let mut scene = Scene3d::new();
+    let pixels = render(&hal, &mut renderer, &mut scene, &mut vr, &camera);
+    write_png(&pixels, "/tmp/casas.png");
+    eprintln!("escrito /tmp/casas.png — 15 estilos × 4 semillas");
+}
+
+fn render(
+    hal: &Hal,
+    renderer: &mut Renderer,
+    scene: &mut Scene3d,
+    vr: &mut VoxelRenderer,
+    camera: &Camera3d,
+) -> Vec<u8> {
+    let inter = hal.device.create_texture(&wgpu::TextureDescriptor {
+        label: Some("inter"),
+        size: wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+        mip_level_count: 1,
+        sample_count: 1,
+        dimension: wgpu::TextureDimension::D2,
+        format: FMT,
+        usage: wgpu::TextureUsages::STORAGE_BINDING
+            | wgpu::TextureUsages::TEXTURE_BINDING
+            | wgpu::TextureUsages::RENDER_ATTACHMENT
+            | wgpu::TextureUsages::COPY_SRC,
+        view_formats: &[],
+    });
+    let view = inter.create_view(&wgpu::TextureViewDescriptor::default());
+    renderer
+        .render_to_view(hal, &vello::Scene::new(), &view, W, H, Color::from_rgba8(0, 0, 0, 255))
+        .expect("base");
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: Some("casas") });
+    scene.render(&hal.device, &hal.queue, &mut enc, &view, (W, H), camera, Some(vr), &[]);
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    readback(hal, &inter)
+}
+
+fn readback(hal: &Hal, target: &wgpu::Texture) -> Vec<u8> {
+    let unpadded = (W * 4) as usize;
+    let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize;
+    let padded = unpadded.div_ceil(align) * align;
+    let buf = hal.device.create_buffer(&wgpu::BufferDescriptor {
+        label: Some("readback"),
+        size: (padded * H as usize) as u64,
+        usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
+        mapped_at_creation: false,
+    });
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    enc.copy_texture_to_buffer(
+        wgpu::TexelCopyTextureInfo {
+            texture: target,
+            mip_level: 0,
+            origin: wgpu::Origin3d::ZERO,
+            aspect: wgpu::TextureAspect::All,
+        },
+        wgpu::TexelCopyBufferInfo {
+            buffer: &buf,
+            layout: wgpu::TexelCopyBufferLayout {
+                offset: 0,
+                bytes_per_row: Some(padded as u32),
+                rows_per_image: Some(H),
+            },
+        },
+        wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let slice = buf.slice(..);
+    let (tx, rx) = std::sync::mpsc::channel();
+    slice.map_async(wgpu::MapMode::Read, move |r| {
+        let _ = tx.send(r);
+    });
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    rx.recv().unwrap().unwrap();
+    let data = slice.get_mapped_range();
+    let mut pixels = Vec::with_capacity((W * H * 4) as usize);
+    for row in 0..H as usize {
+        let s = row * padded;
+        pixels.extend_from_slice(&data[s..s + unpadded]);
+    }
+    drop(data);
+    buf.unmap();
+    pixels
+}
+
+fn write_png(pixels: &[u8], path: &str) {
+    let file = File::create(path).expect("png");
+    let mut enc = png::Encoder::new(BufWriter::new(file), W, H);
+    enc.set_color(png::ColorType::Rgba);
+    enc.set_depth(png::BitDepth::Eight);
+    let mut wtr = enc.write_header().unwrap();
+    wtr.write_image_data(pixels).unwrap();
+}
diff --git a/llimphi-voxel/examples/city_demo.rs b/llimphi-voxel/examples/city_demo.rs
new file mode 100644
index 0000000..3f65415
--- /dev/null
+++ b/llimphi-voxel/examples/city_demo.rs
@@ -0,0 +1,186 @@
+//! **Skyline**: los edificios grandes en fila con elementos de calle adelante —
+//! una cuadra de ciudad. `cargo run -p llimphi-voxel --example city_demo --release`
+//! → `/tmp/city.png`
+
+use std::fs::File;
+use std::io::BufWriter;
+
+use llimphi_3d::glam::Vec3;
+use llimphi_3d::{Atmosphere, Camera3d, PointLight, Scene3d, VoxelGrid, VoxelRenderer};
+use llimphi_hal::{wgpu, Hal};
+use llimphi_raster::peniko::Color;
+use llimphi_raster::{vello, Renderer};
+use llimphi_voxel::{stamp_mueble, Material, Mueble};
+
+const W: u32 = 1280;
+const H: u32 = 620;
+const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
+
+fn main() {
+    let dim = [140u32, 34, 70];
+    let mut g = VoxelGrid::new(dim);
+    let gh = 2u32;
+
+    // Calle + vereda.
+    for x in 0..dim[0] {
+        for z in 0..dim[2] {
+            let vereda = z < 30;
+            let base = if vereda { Material::Hormigon.color() } else { [60, 60, 66] };
+            for y in 0..gh {
+                g.set(x, y, z, base);
+            }
+        }
+    }
+
+    // Skyline al fondo (z chico).
+    let edificios = [
+        (Mueble::Rascacielos, 18i32),
+        (Mueble::Edificio, 34),
+        (Mueble::Torre, 48),
+        (Mueble::Iglesia, 62),
+        (Mueble::Fabrica, 80),
+        (Mueble::Galpon, 100),
+        (Mueble::Silo, 118),
+    ];
+    for &(m, x) in &edificios {
+        stamp_mueble(&mut g, m, x as u32, gh, 12, 0);
+    }
+    stamp_mueble(&mut g, Mueble::Estacionamiento, 128, gh, 20, 0);
+    stamp_mueble(&mut g, Mueble::Grua, 92, gh, 22, 0);
+
+    // Elementos de calle adelante (z grande).
+    let calle = [
+        (Mueble::Farola, 20i32),
+        (Mueble::Semaforo, 34),
+        (Mueble::Banco, 46),
+        (Mueble::Fuente, 60),
+        (Mueble::Estatua, 74),
+        (Mueble::Hidrante, 86),
+        (Mueble::Buzon, 96),
+        (Mueble::Parada, 110),
+        (Mueble::Farola, 124),
+    ];
+    for &(m, x) in &calle {
+        stamp_mueble(&mut g, m, x as u32, gh, 42, 0);
+    }
+    stamp_mueble(&mut g, Mueble::Auto, 52, gh, 50, 1);
+    stamp_mueble(&mut g, Mueble::Auto, 100, gh, 50, 1);
+
+    let hal = pollster::block_on(Hal::new(None)).expect("hal");
+    let mut renderer = Renderer::new(&hal).expect("renderer");
+    let mut vr = VoxelRenderer::new(&hal.device, &hal.queue, FMT, &g);
+    vr.sun_dir = [0.42, 0.62, 0.5];
+    vr.atmosphere = Atmosphere {
+        sky_zenith: [92, 140, 208],
+        sky_horizon: [210, 224, 238],
+        fog_density: 0.35 / dim[0] as f32, // bruma de ciudad
+        god_rays: 0.0,
+    };
+    vr.point_shadows = true;
+    // Las farolas encienden.
+    let half = Vec3::new(dim[0] as f32, dim[1] as f32, dim[2] as f32) * 0.5;
+    vr.lights = vec![
+        PointLight { pos: [20.5, gh as f32 + 10.0, 42.5], color: [1.2, 1.12, 0.9], range: 22.0, radius: 3.0 },
+        PointLight { pos: [124.5, gh as f32 + 10.0, 42.5], color: [1.2, 1.12, 0.9], range: 22.0, radius: 3.0 },
+    ];
+
+    // Cámara baja, en 3/4, para leer el skyline.
+    let look = Vec3::new(dim[0] as f32 * 0.5, 8.0, 26.0) - half;
+    let camera = Camera3d::orbit(look, 16_f32.to_radians(), 12_f32.to_radians(), dim[0] as f32 * 0.82);
+
+    let mut scene = Scene3d::new();
+    let pixels = render(&hal, &mut renderer, &mut scene, &mut vr, &camera);
+    write_png(&pixels, "/tmp/city.png");
+    eprintln!("escrito /tmp/city.png — skyline de edificios grandes + calle");
+}
+
+fn render(
+    hal: &Hal,
+    renderer: &mut Renderer,
+    scene: &mut Scene3d,
+    vr: &mut VoxelRenderer,
+    camera: &Camera3d,
+) -> Vec<u8> {
+    let inter = hal.device.create_texture(&wgpu::TextureDescriptor {
+        label: Some("inter"),
+        size: wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+        mip_level_count: 1,
+        sample_count: 1,
+        dimension: wgpu::TextureDimension::D2,
+        format: FMT,
+        usage: wgpu::TextureUsages::STORAGE_BINDING
+            | wgpu::TextureUsages::TEXTURE_BINDING
+            | wgpu::TextureUsages::RENDER_ATTACHMENT
+            | wgpu::TextureUsages::COPY_SRC,
+        view_formats: &[],
+    });
+    let view = inter.create_view(&wgpu::TextureViewDescriptor::default());
+    renderer
+        .render_to_view(hal, &vello::Scene::new(), &view, W, H, Color::from_rgba8(0, 0, 0, 255))
+        .expect("base");
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: Some("city") });
+    scene.render(&hal.device, &hal.queue, &mut enc, &view, (W, H), camera, Some(vr), &[]);
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    readback(hal, &inter)
+}
+
+fn readback(hal: &Hal, target: &wgpu::Texture) -> Vec<u8> {
+    let unpadded = (W * 4) as usize;
+    let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize;
+    let padded = unpadded.div_ceil(align) * align;
+    let buf = hal.device.create_buffer(&wgpu::BufferDescriptor {
+        label: Some("readback"),
+        size: (padded * H as usize) as u64,
+        usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
+        mapped_at_creation: false,
+    });
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    enc.copy_texture_to_buffer(
+        wgpu::TexelCopyTextureInfo {
+            texture: target,
+            mip_level: 0,
+            origin: wgpu::Origin3d::ZERO,
+            aspect: wgpu::TextureAspect::All,
+        },
+        wgpu::TexelCopyBufferInfo {
+            buffer: &buf,
+            layout: wgpu::TexelCopyBufferLayout {
+                offset: 0,
+                bytes_per_row: Some(padded as u32),
+                rows_per_image: Some(H),
+            },
+        },
+        wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let slice = buf.slice(..);
+    let (tx, rx) = std::sync::mpsc::channel();
+    slice.map_async(wgpu::MapMode::Read, move |r| {
+        let _ = tx.send(r);
+    });
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    rx.recv().unwrap().unwrap();
+    let data = slice.get_mapped_range();
+    let mut pixels = Vec::with_capacity((W * H * 4) as usize);
+    for row in 0..H as usize {
+        let s = row * padded;
+        pixels.extend_from_slice(&data[s..s + unpadded]);
+    }
+    drop(data);
+    buf.unmap();
+    pixels
+}
+
+fn write_png(pixels: &[u8], path: &str) {
+    let file = File::create(path).expect("png");
+    let mut enc = png::Encoder::new(BufWriter::new(file), W, H);
+    enc.set_color(png::ColorType::Rgba);
+    enc.set_depth(png::BitDepth::Eight);
+    let mut wtr = enc.write_header().unwrap();
+    wtr.write_image_data(pixels).unwrap();
+}
diff --git a/llimphi-voxel/examples/desert_demo.rs b/llimphi-voxel/examples/desert_demo.rs
index 4c738d5..812882f 100644
--- a/llimphi-voxel/examples/desert_demo.rs
+++ b/llimphi-voxel/examples/desert_demo.rs
@@ -13,7 +13,7 @@ use llimphi_3d::{Atmosphere, Camera3d, Scene3d, VoxelRenderer};
 use llimphi_hal::{wgpu, Hal};
 use llimphi_raster::peniko::Color;
 use llimphi_raster::{vello, Renderer};
-use llimphi_voxel::WorldRecipe;
+use llimphi_voxel::Project;
 
 const W: u32 = 960;
 const H: u32 = 540;
@@ -28,8 +28,12 @@ fn main() {
     let hal = pollster::block_on(Hal::new(None)).expect("hal");
     let mut renderer = Renderer::new(&hal).expect("renderer");
 
-    let recipe = WorldRecipe::desert(seed);
-    let grid = recipe.generate(dim);
+    // El bioma de desierto del proyecto de arranque, resuelto a su paleta; la
+    // semilla del CLI manda (en vez de la del mundo).
+    let project = Project::starter();
+    let bioma = project.biomas.iter().find(|b| b.name == "desierto").expect("bioma desierto");
+    let palette = project.bioma_palette(bioma);
+    let grid = bioma.generate_window(seed, &palette, dim, [0, 0]);
 
     let mut vr = VoxelRenderer::new(&hal.device, &hal.queue, FMT, &grid);
     vr.sun_dir = [0.62, 0.42, 0.28]; // sol más bajo → relieve/sombras de las dunas y cactus
diff --git a/llimphi-voxel/examples/emitir_historia_nacimiento.rs b/llimphi-voxel/examples/emitir_historia_nacimiento.rs
new file mode 100644
index 0000000..b5c2308
--- /dev/null
+++ b/llimphi-voxel/examples/emitir_historia_nacimiento.rs
@@ -0,0 +1,40 @@
+//! Arma la HISTORIA del nacimiento: la versión base + una alternativa con más
+//! bruma, en ramas distintas, y la guarda como `.voxdag`. Muestra el DAG en
+//! acción — el cimiento sobre el que se monta el trabajo creativo.
+//!
+//! ```sh
+//! cargo run -p llimphi-voxel --example emitir_historia_nacimiento -- ruta/nacimiento.voxdag
+//! ```
+
+use llimphi_voxel::{hex_corto, Historia, Project};
+
+fn main() {
+    let path = std::env::args()
+        .nth(1)
+        .unwrap_or_else(|| "nacimiento.voxdag".to_string());
+
+    let mut h = Historia::nueva();
+
+    // v1: el nacimiento tal cual.
+    let base = h.commit(&Project::nacimiento(), "el nacimiento").unwrap();
+    println!("principal  v{}  {}  el nacimiento", 0, hex_corto(&base));
+
+    // Una alternativa: "mucha más bruma", en su propia rama desde la base.
+    h.ramificar("mas-bruma").unwrap();
+    h.cambiar_rama("mas-bruma");
+    let mut p = h.proyecto_actual().unwrap();
+    if let Some(atm) = p.escenas[0].atmosfera.as_mut() {
+        atm.bruma = 4.5; // se traga el mundo entero
+        atm.desde_negro = 5.0; // y entra aún más lento
+    }
+    let alt = h.commit(&p, "el nacimiento — mucha más bruma").unwrap();
+    println!("mas-bruma  v{}  {}  mucha más bruma", 1, hex_corto(&alt));
+
+    match h.guardar(&path) {
+        Ok(()) => println!("\nhistoria escrita: {path}  ({} versiones)", h.len()),
+        Err(e) => {
+            eprintln!("error: {e}");
+            std::process::exit(1);
+        }
+    }
+}
diff --git a/llimphi-voxel/examples/emitir_nacimiento.rs b/llimphi-voxel/examples/emitir_nacimiento.rs
new file mode 100644
index 0000000..75bedb9
--- /dev/null
+++ b/llimphi-voxel/examples/emitir_nacimiento.rs
@@ -0,0 +1,23 @@
+//! Emite la escena del NACIMIENTO a un archivo `.voxstudio.ron`, listo para
+//! abrir/combinar en el estudio. Es la herramienta que materializa un artefacto
+//! construido en código a un documento editable.
+//!
+//! ```sh
+//! cargo run -p llimphi-voxel --example emitir_nacimiento -- ruta/el-nacimiento.voxstudio.ron
+//! ```
+
+use llimphi_voxel::{Documento, Project};
+
+fn main() {
+    let path = std::env::args()
+        .nth(1)
+        .unwrap_or_else(|| "el-nacimiento.voxstudio.ron".to_string());
+    let doc = Documento::nuevo(Project::nacimiento());
+    match doc.guardar(&path) {
+        Ok(()) => println!("escrito: {path}"),
+        Err(e) => {
+            eprintln!("error: {e}");
+            std::process::exit(1);
+        }
+    }
+}
diff --git a/llimphi-voxel/examples/exotic_demo.rs b/llimphi-voxel/examples/exotic_demo.rs
new file mode 100644
index 0000000..88104d9
--- /dev/null
+++ b/llimphi-voxel/examples/exotic_demo.rs
@@ -0,0 +1,191 @@
+//! Catálogo de los **minerales exóticos**: fila de esferas con su color y brillo.
+//! una de un mineral con su factor de brillo (`Mineral::brillo`) codificado en el
+//! alpha del voxel. El ray-march devuelve un reflejo dependiente de la vista — algo
+//! que la luz plana de Minecraft no hace: el carbón queda mate, el diamante destella.
+//!
+//! `cargo run -p llimphi-voxel --example shine_demo --release` → `/tmp/exotic.png`
+
+use std::fs::File;
+use std::io::BufWriter;
+
+use llimphi_3d::glam::Vec3;
+use llimphi_3d::{Atmosphere, Camera3d, Scene3d, VoxelGrid, VoxelRenderer};
+use llimphi_hal::{wgpu, Hal};
+use llimphi_raster::peniko::Color;
+use llimphi_raster::{vello, Renderer};
+use llimphi_voxel::Mineral;
+
+const W: u32 = 1280;
+const H: u32 = 520;
+const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
+
+fn main() {
+    // Gradiente de brillo: carbón mate → diamante espejado.
+    let fila = [
+        Mineral::Obsidiana,
+        Mineral::Pirita,
+        Mineral::Zafiro,
+        Mineral::Topacio,
+        Mineral::Turquesa,
+        Mineral::Opalo,
+        Mineral::Ambar,
+        Mineral::Fluorita,
+        Mineral::Jade,
+        Mineral::Cinabrio,
+        Mineral::Bismuto,
+        Mineral::Uraninita,
+    ];
+    let r: i32 = 5;
+    let gap: i32 = 4;
+    let step = 2 * r + gap;
+    let margin = r + 3;
+    let dim = [
+        (fila.len() as i32 * step + 2 * margin) as u32,
+        (2 * r + 14) as u32,
+        (2 * r + 10) as u32,
+    ];
+    let ground_h: i32 = 3;
+    let mut grid = VoxelGrid::new(dim);
+
+    // Suelo mate gris.
+    for x in 0..dim[0] {
+        for z in 0..dim[2] {
+            for y in 0..ground_h as u32 {
+                grid.set(x, y, z, [96, 96, 100]);
+            }
+        }
+    }
+
+    // Esferas.
+    let cz = dim[2] as i32 / 2;
+    let cy = ground_h + r;
+    for (i, min) in fila.iter().enumerate() {
+        let cx = margin + r + i as i32 * step;
+        let col = min.color();
+        let alpha = VoxelGrid::shine_to_alpha(min.brillo());
+        for dx in -r..=r {
+            for dy in -r..=r {
+                for dz in -r..=r {
+                    if dx * dx + dy * dy + dz * dz <= r * r {
+                        grid.set_rgba((cx + dx) as u32, (cy + dy) as u32, (cz + dz) as u32, col, alpha);
+                    }
+                }
+            }
+        }
+        eprintln!("{:>10}: brillo {:.2} → alpha {}", min.label(), min.brillo(), alpha);
+    }
+
+    let hal = pollster::block_on(Hal::new(None)).expect("hal");
+    let mut renderer = Renderer::new(&hal).expect("renderer");
+    let mut vr = VoxelRenderer::new(&hal.device, &hal.queue, FMT, &grid);
+    vr.sun_dir = [0.28, 0.72, 0.62]; // sol alto-frontal → el reflejo cae hacia la cámara
+    vr.atmosphere = Atmosphere {
+        sky_zenith: [70, 96, 150],
+        sky_horizon: [178, 196, 214],
+        fog_density: 0.0,
+        god_rays: 0.0,
+    };
+
+    let camera = Camera3d::orbit(
+        Vec3::new(0.0, r as f32 * 0.4, 0.0),
+        8_f32.to_radians(),
+        18_f32.to_radians(),
+        dim[0] as f32 * 0.72,
+    );
+
+    let mut scene = Scene3d::new();
+    let pixels = render(&hal, &mut renderer, &mut scene, &mut vr, &camera);
+    write_png(&pixels, "/tmp/exotic.png");
+    eprintln!("escrito /tmp/exotic.png — minerales exóticos (color + brillo)");
+}
+
+fn render(
+    hal: &Hal,
+    renderer: &mut Renderer,
+    scene: &mut Scene3d,
+    vr: &mut VoxelRenderer,
+    camera: &Camera3d,
+) -> Vec<u8> {
+    let inter = hal.device.create_texture(&wgpu::TextureDescriptor {
+        label: Some("inter"),
+        size: wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+        mip_level_count: 1,
+        sample_count: 1,
+        dimension: wgpu::TextureDimension::D2,
+        format: FMT,
+        usage: wgpu::TextureUsages::STORAGE_BINDING
+            | wgpu::TextureUsages::TEXTURE_BINDING
+            | wgpu::TextureUsages::RENDER_ATTACHMENT
+            | wgpu::TextureUsages::COPY_SRC,
+        view_formats: &[],
+    });
+    let view = inter.create_view(&wgpu::TextureViewDescriptor::default());
+    renderer
+        .render_to_view(hal, &vello::Scene::new(), &view, W, H, Color::from_rgba8(0, 0, 0, 255))
+        .expect("base");
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: Some("shine") });
+    scene.render(&hal.device, &hal.queue, &mut enc, &view, (W, H), camera, Some(vr), &[]);
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    readback(hal, &inter)
+}
+
+fn readback(hal: &Hal, target: &wgpu::Texture) -> Vec<u8> {
+    let unpadded = (W * 4) as usize;
+    let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize;
+    let padded = unpadded.div_ceil(align) * align;
+    let buf = hal.device.create_buffer(&wgpu::BufferDescriptor {
+        label: Some("readback"),
+        size: (padded * H as usize) as u64,
+        usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
+        mapped_at_creation: false,
+    });
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    enc.copy_texture_to_buffer(
+        wgpu::TexelCopyTextureInfo {
+            texture: target,
+            mip_level: 0,
+            origin: wgpu::Origin3d::ZERO,
+            aspect: wgpu::TextureAspect::All,
+        },
+        wgpu::TexelCopyBufferInfo {
+            buffer: &buf,
+            layout: wgpu::TexelCopyBufferLayout {
+                offset: 0,
+                bytes_per_row: Some(padded as u32),
+                rows_per_image: Some(H),
+            },
+        },
+        wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let slice = buf.slice(..);
+    let (tx, rx) = std::sync::mpsc::channel();
+    slice.map_async(wgpu::MapMode::Read, move |r| {
+        let _ = tx.send(r);
+    });
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    rx.recv().unwrap().unwrap();
+    let data = slice.get_mapped_range();
+    let mut pixels = Vec::with_capacity((W * H * 4) as usize);
+    for row in 0..H as usize {
+        let s = row * padded;
+        pixels.extend_from_slice(&data[s..s + unpadded]);
+    }
+    drop(data);
+    buf.unmap();
+    pixels
+}
+
+fn write_png(pixels: &[u8], path: &str) {
+    let file = File::create(path).expect("png");
+    let mut enc = png::Encoder::new(BufWriter::new(file), W, H);
+    enc.set_color(png::ColorType::Rgba);
+    enc.set_depth(png::BitDepth::Eight);
+    let mut wtr = enc.write_header().unwrap();
+    wtr.write_image_data(pixels).unwrap();
+}
diff --git a/llimphi-voxel/examples/fauna_demo.rs b/llimphi-voxel/examples/fauna_demo.rs
new file mode 100644
index 0000000..5fbeecb
--- /dev/null
+++ b/llimphi-voxel/examples/fauna_demo.rs
@@ -0,0 +1,160 @@
+//! **Fauna (seres) procedural**: los 16 animales del catálogo [`Bicho`] en una
+//! grilla, sobre pasto. `cargo run -p llimphi-voxel --example fauna_demo --release`
+//! → `/tmp/fauna.png`
+
+use std::fs::File;
+use std::io::BufWriter;
+
+use llimphi_3d::glam::Vec3;
+use llimphi_3d::{Atmosphere, Camera3d, Scene3d, VoxelGrid, VoxelRenderer};
+use llimphi_hal::{wgpu, Hal};
+use llimphi_raster::peniko::Color;
+use llimphi_raster::{vello, Renderer};
+use llimphi_voxel::{stamp_bicho, Bicho, Material};
+
+const W: u32 = 1280;
+const H: u32 = 720;
+const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
+
+fn main() {
+    let bichos = Bicho::ALL;
+    let cols = 4i32;
+    let step = 10i32;
+    let margin = 8i32;
+    let rows = (bichos.len() as i32 + cols - 1) / cols;
+    let dim = [
+        (cols * step + 2 * margin) as u32,
+        24,
+        (rows * step + 2 * margin) as u32,
+    ];
+    let mut g = VoxelGrid::new(dim);
+
+    // Suelo de pasto con leve grano.
+    for x in 0..dim[0] {
+        for z in 0..dim[2] {
+            let c = Material::Grass.color();
+            let t = ((x * 3 + z * 5) % 9) as i32 - 4;
+            let sh = |v: u8| (v as i32 + t).clamp(0, 255) as u8;
+            g.set(x, 0, z, [sh(c[0]), sh(c[1]), sh(c[2])]);
+        }
+    }
+
+    for (i, &bicho) in bichos.iter().enumerate() {
+        let cx = i as i32 % cols;
+        let cz = i as i32 / cols;
+        let x = margin + cx * step + step / 2;
+        let z = margin + cz * step + step / 2;
+        stamp_bicho(&mut g, bicho, x as u32, 1, z as u32, 0);
+        eprintln!("{}: {}", i, bicho.label());
+    }
+
+    let hal = pollster::block_on(Hal::new(None)).expect("hal");
+    let mut renderer = Renderer::new(&hal).expect("renderer");
+    let mut vr = VoxelRenderer::new(&hal.device, &hal.queue, FMT, &g);
+    vr.sun_dir = [0.42, 0.62, 0.5];
+    vr.atmosphere = Atmosphere {
+        sky_zenith: [96, 146, 210],
+        sky_horizon: [210, 224, 238],
+        fog_density: 0.15 / dim[0] as f32,
+        god_rays: 0.0,
+    };
+    let half = Vec3::new(dim[0] as f32, dim[1] as f32, dim[2] as f32) * 0.5;
+    let look = Vec3::new(dim[0] as f32 * 0.5, 3.0, dim[2] as f32 * 0.5) - half;
+    let camera = Camera3d::orbit(look, 22_f32.to_radians(), 24_f32.to_radians(), dim[0].max(dim[2]) as f32 * 0.82);
+
+    let mut scene = Scene3d::new();
+    let pixels = render(&hal, &mut renderer, &mut scene, &mut vr, &camera);
+    write_png(&pixels, "/tmp/fauna.png");
+    eprintln!("escrito /tmp/fauna.png — {} seres", bichos.len());
+}
+
+fn render(
+    hal: &Hal,
+    renderer: &mut Renderer,
+    scene: &mut Scene3d,
+    vr: &mut VoxelRenderer,
+    camera: &Camera3d,
+) -> Vec<u8> {
+    let inter = hal.device.create_texture(&wgpu::TextureDescriptor {
+        label: Some("inter"),
+        size: wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+        mip_level_count: 1,
+        sample_count: 1,
+        dimension: wgpu::TextureDimension::D2,
+        format: FMT,
+        usage: wgpu::TextureUsages::STORAGE_BINDING
+            | wgpu::TextureUsages::TEXTURE_BINDING
+            | wgpu::TextureUsages::RENDER_ATTACHMENT
+            | wgpu::TextureUsages::COPY_SRC,
+        view_formats: &[],
+    });
+    let view = inter.create_view(&wgpu::TextureViewDescriptor::default());
+    renderer
+        .render_to_view(hal, &vello::Scene::new(), &view, W, H, Color::from_rgba8(0, 0, 0, 255))
+        .expect("base");
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: Some("fauna") });
+    scene.render(&hal.device, &hal.queue, &mut enc, &view, (W, H), camera, Some(vr), &[]);
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    readback(hal, &inter)
+}
+
+fn readback(hal: &Hal, target: &wgpu::Texture) -> Vec<u8> {
+    let unpadded = (W * 4) as usize;
+    let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize;
+    let padded = unpadded.div_ceil(align) * align;
+    let buf = hal.device.create_buffer(&wgpu::BufferDescriptor {
+        label: Some("readback"),
+        size: (padded * H as usize) as u64,
+        usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
+        mapped_at_creation: false,
+    });
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    enc.copy_texture_to_buffer(
+        wgpu::TexelCopyTextureInfo {
+            texture: target,
+            mip_level: 0,
+            origin: wgpu::Origin3d::ZERO,
+            aspect: wgpu::TextureAspect::All,
+        },
+        wgpu::TexelCopyBufferInfo {
+            buffer: &buf,
+            layout: wgpu::TexelCopyBufferLayout {
+                offset: 0,
+                bytes_per_row: Some(padded as u32),
+                rows_per_image: Some(H),
+            },
+        },
+        wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let slice = buf.slice(..);
+    let (tx, rx) = std::sync::mpsc::channel();
+    slice.map_async(wgpu::MapMode::Read, move |r| {
+        let _ = tx.send(r);
+    });
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    rx.recv().unwrap().unwrap();
+    let data = slice.get_mapped_range();
+    let mut pixels = Vec::with_capacity((W * H * 4) as usize);
+    for row in 0..H as usize {
+        let s = row * padded;
+        pixels.extend_from_slice(&data[s..s + unpadded]);
+    }
+    drop(data);
+    buf.unmap();
+    pixels
+}
+
+fn write_png(pixels: &[u8], path: &str) {
+    let file = File::create(path).expect("png");
+    let mut enc = png::Encoder::new(BufWriter::new(file), W, H);
+    enc.set_color(png::ColorType::Rgba);
+    enc.set_depth(png::BitDepth::Eight);
+    let mut wtr = enc.write_header().unwrap();
+    wtr.write_image_data(pixels).unwrap();
+}
diff --git a/llimphi-voxel/examples/flora_demo.rs b/llimphi-voxel/examples/flora_demo.rs
new file mode 100644
index 0000000..85f7204
--- /dev/null
+++ b/llimphi-voxel/examples/flora_demo.rs
@@ -0,0 +1,193 @@
+//! Catálogo headless de la **vegetación** del creador de mundos: estampa las 8
+//! [`Forma`](llimphi_voxel::Forma)s (cactus, grama, arbusto, árbol, conífera,
+//! palmera, helecho, flor) en fila sobre un llano de pasto y las rinde de una toma.
+//!
+//! `cargo run -p llimphi-voxel --example flora_demo --release` → `/tmp/flora.png`
+
+use std::fs::File;
+use std::io::BufWriter;
+
+use llimphi_3d::glam::Vec3;
+use llimphi_3d::{Atmosphere, Camera3d, Scene3d, VoxelGrid, VoxelRenderer};
+use llimphi_hal::{wgpu, Hal};
+use llimphi_raster::peniko::Color;
+use llimphi_raster::{vello, Renderer};
+use llimphi_voxel::{Forma, Material, Project};
+
+const W: u32 = 1280;
+const H: u32 = 540;
+const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
+
+fn main() {
+    let dim: [u32; 3] = [150, 52, 66];
+    let ground_h: u32 = 5;
+
+    // Llano de pasto.
+    let mut grid = VoxelGrid::new(dim);
+    let grass = Material::Grass.color();
+    for x in 0..dim[0] {
+        for z in 0..dim[2] {
+            for y in 0..ground_h {
+                // leve moteado del suelo para que no sea una loza plana
+                let t = ((x * 7 + z * 13 + y) % 11) as i32 - 5;
+                let c = |v: u8| (v as i32 + t).clamp(0, 255) as u8;
+                grid.set(x, y, z, [c(grass[0]), c(grass[1]), c(grass[2])]);
+            }
+        }
+    }
+
+    // Un bioma cualquiera para acceder a `stamp_flora` (no usa sus campos).
+    let project = Project::starter();
+    let bioma = project.biomas.iter().find(|b| b.name == "bosque").expect("bosque");
+
+    let leaf = Material::Leaf.color();
+    let cactus = Material::Cactus.color();
+    let wheat = Material::Wheat.color();
+    let bloom = Material::Bloom.color();
+    // Fila delantera = 1ª tanda, fila trasera = 2ª tanda (selva/bosque/pradera).
+    let catalogo: [(Forma, [u8; 3]); 16] = [
+        (Forma::Pasto, grass),
+        (Forma::Flor, bloom),
+        (Forma::Helecho, cactus),
+        (Forma::Arbusto, leaf),
+        (Forma::Arbol, leaf),
+        (Forma::Conifera, [40, 96, 58]),
+        (Forma::Palmera, [72, 142, 72]),
+        (Forma::Columnar, cactus),
+        (Forma::Bambu, cactus),
+        (Forma::Platanera, [78, 148, 78]),
+        (Forma::Roble, leaf),
+        (Forma::Hongo, [176, 58, 48]),
+        (Forma::Tocon, leaf),
+        (Forma::Trigo, wheat),
+        (Forma::Junco, [70, 120, 66]),
+        (Forma::Lavanda, bloom),
+    ];
+
+    let per_row = 8u32;
+    let step = dim[0] / (per_row + 1);
+    let z_front = dim[2] * 62 / 100;
+    let z_back = dim[2] * 30 / 100;
+    for (i, (forma, col)) in catalogo.iter().enumerate() {
+        let col_idx = (i as u32) % per_row;
+        let row = (i as u32) / per_row;
+        let x = step * (col_idx + 1);
+        let z = if row == 0 { z_front } else { z_back };
+        bioma.stamp_flora(&mut grid, *forma, *col, x, ground_h, z, dim);
+    }
+
+    let hal = pollster::block_on(Hal::new(None)).expect("hal");
+    let mut renderer = Renderer::new(&hal).expect("renderer");
+    let mut vr = VoxelRenderer::new(&hal.device, &hal.queue, FMT, &grid);
+    vr.sun_dir = [0.5, 0.55, 0.35];
+    vr.atmosphere = Atmosphere {
+        sky_zenith: [96, 150, 210],
+        sky_horizon: [200, 218, 226],
+        fog_density: 0.12 / dim[0] as f32,
+        god_rays: 0.0,
+    };
+
+    // Cámara en 3/4 y algo elevada: separa las dos filas y lee cada silueta.
+    let camera = Camera3d::orbit(
+        Vec3::new(0.0, dim[1] as f32 * 0.08, 0.0),
+        14_f32.to_radians(),
+        18_f32.to_radians(),
+        dim[0] as f32 * 0.66,
+    );
+
+    let mut scene = Scene3d::new();
+    let pixels = render(&hal, &mut renderer, &mut scene, &mut vr, &camera);
+    write_png(&pixels, "/tmp/flora.png");
+    eprintln!("escrito /tmp/flora.png — catálogo de 8 formas de vegetación");
+}
+
+fn render(
+    hal: &Hal,
+    renderer: &mut Renderer,
+    scene: &mut Scene3d,
+    vr: &mut VoxelRenderer,
+    camera: &Camera3d,
+) -> Vec<u8> {
+    let inter = hal.device.create_texture(&wgpu::TextureDescriptor {
+        label: Some("inter"),
+        size: wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+        mip_level_count: 1,
+        sample_count: 1,
+        dimension: wgpu::TextureDimension::D2,
+        format: FMT,
+        usage: wgpu::TextureUsages::STORAGE_BINDING
+            | wgpu::TextureUsages::TEXTURE_BINDING
+            | wgpu::TextureUsages::RENDER_ATTACHMENT
+            | wgpu::TextureUsages::COPY_SRC,
+        view_formats: &[],
+    });
+    let view = inter.create_view(&wgpu::TextureViewDescriptor::default());
+    renderer
+        .render_to_view(hal, &vello::Scene::new(), &view, W, H, Color::from_rgba8(0, 0, 0, 255))
+        .expect("base");
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: Some("flora") });
+    scene.render(&hal.device, &hal.queue, &mut enc, &view, (W, H), camera, Some(vr), &[]);
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    readback(hal, &inter)
+}
+
+fn readback(hal: &Hal, target: &wgpu::Texture) -> Vec<u8> {
+    let unpadded = (W * 4) as usize;
+    let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize;
+    let padded = unpadded.div_ceil(align) * align;
+    let buf = hal.device.create_buffer(&wgpu::BufferDescriptor {
+        label: Some("readback"),
+        size: (padded * H as usize) as u64,
+        usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
+        mapped_at_creation: false,
+    });
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    enc.copy_texture_to_buffer(
+        wgpu::TexelCopyTextureInfo {
+            texture: target,
+            mip_level: 0,
+            origin: wgpu::Origin3d::ZERO,
+            aspect: wgpu::TextureAspect::All,
+        },
+        wgpu::TexelCopyBufferInfo {
+            buffer: &buf,
+            layout: wgpu::TexelCopyBufferLayout {
+                offset: 0,
+                bytes_per_row: Some(padded as u32),
+                rows_per_image: Some(H),
+            },
+        },
+        wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let slice = buf.slice(..);
+    let (tx, rx) = std::sync::mpsc::channel();
+    slice.map_async(wgpu::MapMode::Read, move |r| {
+        let _ = tx.send(r);
+    });
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    rx.recv().unwrap().unwrap();
+    let data = slice.get_mapped_range();
+    let mut pixels = Vec::with_capacity((W * H * 4) as usize);
+    for row in 0..H as usize {
+        let s = row * padded;
+        pixels.extend_from_slice(&data[s..s + unpadded]);
+    }
+    drop(data);
+    buf.unmap();
+    pixels
+}
+
+fn write_png(pixels: &[u8], path: &str) {
+    let file = File::create(path).expect("png");
+    let mut enc = png::Encoder::new(BufWriter::new(file), W, H);
+    enc.set_color(png::ColorType::Rgba);
+    enc.set_depth(png::BitDepth::Eight);
+    let mut wtr = enc.write_header().unwrap();
+    wtr.write_image_data(pixels).unwrap();
+}
diff --git a/llimphi-voxel/examples/foto_ser.rs b/llimphi-voxel/examples/foto_ser.rs
new file mode 100644
index 0000000..552db13
--- /dev/null
+++ b/llimphi-voxel/examples/foto_ser.rs
@@ -0,0 +1,252 @@
+//! Certificación de la **capa 3**: una foto real → **busto voxel** estilizado
+//! (`photo_to_grid`), renderizado con el kit sub-voxel (bisel) para que se lea como
+//! parte del mundo de bloques y no como una malla fotorreal — la cuantización es lo
+//! que lo saca del valle de inquietud.
+//!
+//! Genera un retrato sintético (con recorte alpha) → busto → render frontal. Certifica
+//! por STATS (recorte, relieve, fidelidad de color). Si existe `pluma.png` en el cwd,
+//! también lo voxeliza y rinde (imagen real, a modo de muestra).
+//!
+//! `cargo run -p llimphi-voxel --example foto_ser --release -- [imagen.png]`
+
+use std::fs::File;
+use std::io::{BufReader, BufWriter};
+
+use llimphi_3d::glam::Vec3;
+use llimphi_3d::{Camera3d, VoxelGrid, VoxelRenderer};
+use llimphi_hal::{wgpu, Hal};
+use llimphi_raster::peniko::Color;
+use llimphi_raster::{vello, Renderer};
+use llimphi_voxel::{photo_to_grid, FotoOpts, Relieve};
+
+const W: u32 = 720;
+const H: u32 = 720;
+const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
+const BG: [u8; 3] = [16, 18, 26];
+
+fn main() {
+    let hal = pollster::block_on(Hal::new(None)).expect("hal");
+    let mut renderer = Renderer::new(&hal).expect("renderer");
+    let dir = std::env::var("CLAUDE_JOB_DIR").map(|d| format!("{d}/tmp")).unwrap_or("/tmp".into());
+
+    // --- Certificación: retrato sintético con recorte alpha ---
+    let (rw, rh) = (96u32, 112u32);
+    let img = retrato(rw, rh);
+    let opts = FotoOpts { ancho: 64, profundidad: 16, relieve: Relieve::Domo, alpha_min: 128, grano: 0.05 };
+    let (grid, s) = photo_to_grid(&img, rw, rh, &opts);
+
+    println!("foto_ser — retrato sintético {rw}x{rh} → busto voxel");
+    println!("  grilla: {:?}", s.dim);
+    println!("  recorte (foreground): {} px de {}", s.recorte, s.dim[0] * s.dim[1]);
+    println!("  voxels colocados: {}", s.voxeles);
+    println!("  grosor del relieve: {}..{} voxels (domo)", s.grosor_min, s.grosor_max);
+    println!("  color medio: {:?}", s.color_medio);
+
+    // Render frontal con bisel (compone con la capa 2b) + rugosidad leve.
+    let px = render_bust(&hal, &mut renderer, &grid, s.dim, 0.65, 0.25);
+    write_png(&px, &format!("{dir}/foto_ser.png"));
+    let covered = coverage(&px);
+    println!("  render: {covered} px cubiertos → {dir}/foto_ser.png");
+
+    // Asserts de la certificación (los detalles finos ya están en los unit tests).
+    assert!(s.recorte > 0 && (s.recorte as f32) < (s.dim[0] * s.dim[1]) as f32 * 0.9, "recortó el fondo");
+    assert!(s.grosor_max > s.grosor_min && s.grosor_max >= 12, "hay relieve de domo ({}..{})", s.grosor_min, s.grosor_max);
+    assert!(s.color_medio[0] > s.color_medio[2], "conserva el tono cálido de la piel: {:?}", s.color_medio);
+    assert!(covered > 5000, "el busto se renderizó (cubrió {covered} px)");
+
+    // --- Muestra opcional: imagen real (pluma.png) si está en el cwd ---
+    let arg = std::env::args().nth(1);
+    let ruta = arg.as_deref().unwrap_or("pluma.png");
+    match load_png_rgba(ruta) {
+        Some((rgba, w, h)) => {
+            // Sin alpha real: recorte por luminancia (fondo claro fuera). alpha_min=1
+            // deja pasar casi todo; el relieve por luminancia da volumen a la imagen.
+            let o = FotoOpts { ancho: 72, profundidad: 14, relieve: Relieve::Luminancia, alpha_min: 1, grano: 0.05 };
+            let (g2, s2) = photo_to_grid(&rgba, w, h, &o);
+            let p2 = render_bust(&hal, &mut renderer, &g2, s2.dim, 0.6, 0.2);
+            write_png(&p2, &format!("{dir}/foto_ser_real.png"));
+            println!("imagen real '{ruta}' {w}x{h} → {} voxels → {dir}/foto_ser_real.png", s2.voxeles);
+        }
+        None => println!("(sin imagen real en '{ruta}' — omitido)"),
+    }
+
+    println!("✓ certificado: foto → busto voxel con recorte, relieve y color del original.");
+}
+
+/// Retrato sintético RGBA con recorte alpha: pelo + óvalo de piel + ojos + boca.
+fn retrato(w: u32, h: u32) -> Vec<u8> {
+    let cx = w as f32 / 2.0;
+    let cy = h as f32 * 0.52;
+    let rx = w as f32 * 0.34;
+    let ry = h as f32 * 0.42;
+    let mut px = vec![0u8; (w * h * 4) as usize];
+    for y in 0..h {
+        for x in 0..w {
+            let i = ((y * w + x) * 4) as usize;
+            let nx = (x as f32 - cx) / rx;
+            let ny = (y as f32 - cy) / ry;
+            if nx * nx + ny * ny > 1.0 {
+                continue; // fuera del óvalo → transparente
+            }
+            // Piel cálida con leve sombreado vertical.
+            let sh = 1.0 - 0.15 * ny;
+            let mut c = [(228.0 * sh) as u8, (186.0 * sh) as u8, (150.0 * sh) as u8];
+            // Pelo: banda superior.
+            if ny < -0.45 {
+                c = [92, 62, 44];
+            }
+            // Ojos: dos elipses oscuras.
+            for ex in [-0.42f32, 0.42] {
+                let ox = (x as f32 - (cx + ex * rx)) / (rx * 0.16);
+                let oy = (y as f32 - (cy - 0.12 * ry)) / (ry * 0.10);
+                if ox * ox + oy * oy < 1.0 {
+                    c = [40, 32, 30];
+                }
+            }
+            // Boca: arco oscuro.
+            let mox = (x as f32 - cx) / (rx * 0.42);
+            let moy = (y as f32 - (cy + 0.5 * ry)) / (ry * 0.08);
+            if mox * mox + moy * moy < 1.0 {
+                c = [150, 70, 66];
+            }
+            px[i] = c[0];
+            px[i + 1] = c[1];
+            px[i + 2] = c[2];
+            px[i + 3] = 255;
+        }
+    }
+    px
+}
+
+/// Renderiza un busto voxel centrado, de frente, con `bisel`/`rugosidad` dados.
+fn render_bust(hal: &Hal, renderer: &mut Renderer, grid: &VoxelGrid, dim: [u32; 3], bisel: f32, rug: f32) -> Vec<u8> {
+    let mut vr = VoxelRenderer::new(&hal.device, &hal.queue, FMT, grid);
+    vr.bisel = bisel;
+    vr.rugosidad_amp = rug;
+    vr.sun_dir = normalize([0.35, 0.55, 0.75]); // luz desde el frente-arriba
+    // El relieve sobresale hacia +Z → cámara al frente (mirando -Z), leve picado.
+    let alto = dim[1].max(dim[0]) as f32;
+    let camera = Camera3d::orbit(Vec3::ZERO, 0.0, 8_f32.to_radians(), alto * 1.9);
+
+    let inter = hal.device.create_texture(&wgpu::TextureDescriptor {
+        label: Some("inter"),
+        size: wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+        mip_level_count: 1,
+        sample_count: 1,
+        dimension: wgpu::TextureDimension::D2,
+        format: FMT,
+        usage: wgpu::TextureUsages::STORAGE_BINDING
+            | wgpu::TextureUsages::TEXTURE_BINDING
+            | wgpu::TextureUsages::RENDER_ATTACHMENT
+            | wgpu::TextureUsages::COPY_SRC,
+        view_formats: &[],
+    });
+    let view = inter.create_view(&wgpu::TextureViewDescriptor::default());
+    let base = vello::Scene::new();
+    renderer
+        .render_to_view(hal, &base, &view, W, H, Color::from_rgba8(BG[0], BG[1], BG[2], 255))
+        .expect("base");
+    let mut enc = hal.device.create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    vr.render(&hal.device, &hal.queue, &mut enc, &view, (W, H), &camera);
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    readback(hal, &inter)
+}
+
+fn normalize(v: [f32; 3]) -> [f32; 3] {
+    let l = (v[0] * v[0] + v[1] * v[1] + v[2] * v[2]).sqrt().max(1e-6);
+    [v[0] / l, v[1] / l, v[2] / l]
+}
+
+fn coverage(px: &[u8]) -> usize {
+    (0..(W * H) as usize)
+        .filter(|&i| {
+            let o = i * 4;
+            (px[o] as i32 - BG[0] as i32).abs()
+                + (px[o + 1] as i32 - BG[1] as i32).abs()
+                + (px[o + 2] as i32 - BG[2] as i32).abs()
+                > 12
+        })
+        .count()
+}
+
+/// Decodifica un PNG a RGBA `w×h`. `None` si no existe o no se pudo leer.
+fn load_png_rgba(path: &str) -> Option<(Vec<u8>, u32, u32)> {
+    let file = File::open(path).ok()?;
+    let dec = png::Decoder::new(BufReader::new(file));
+    let mut reader = dec.read_info().ok()?;
+    let mut buf = vec![0u8; reader.output_buffer_size()?];
+    let info = reader.next_frame(&mut buf).ok()?;
+    let (w, h) = (info.width, info.height);
+    let rgba = match info.color_type {
+        png::ColorType::Rgba => buf[..info.buffer_size()].to_vec(),
+        png::ColorType::Rgb => {
+            let mut out = Vec::with_capacity((w * h * 4) as usize);
+            for c in buf[..info.buffer_size()].chunks(3) {
+                out.extend_from_slice(&[c[0], c[1], c[2], 255]);
+            }
+            out
+        }
+        png::ColorType::Grayscale => {
+            let mut out = Vec::with_capacity((w * h * 4) as usize);
+            for &g in &buf[..info.buffer_size()] {
+                out.extend_from_slice(&[g, g, g, 255]);
+            }
+            out
+        }
+        _ => return None, // paleta/gris-alfa: fuera de alcance del demo
+    };
+    Some((rgba, w, h))
+}
+
+fn readback(hal: &Hal, target: &wgpu::Texture) -> Vec<u8> {
+    let unpadded = (W * 4) as usize;
+    let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize;
+    let padded = unpadded.div_ceil(align) * align;
+    let buf = hal.device.create_buffer(&wgpu::BufferDescriptor {
+        label: Some("readback"),
+        size: (padded * H as usize) as u64,
+        usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
+        mapped_at_creation: false,
+    });
+    let mut enc = hal.device.create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    enc.copy_texture_to_buffer(
+        wgpu::TexelCopyTextureInfo {
+            texture: target,
+            mip_level: 0,
+            origin: wgpu::Origin3d::ZERO,
+            aspect: wgpu::TextureAspect::All,
+        },
+        wgpu::TexelCopyBufferInfo {
+            buffer: &buf,
+            layout: wgpu::TexelCopyBufferLayout { offset: 0, bytes_per_row: Some(padded as u32), rows_per_image: Some(H) },
+        },
+        wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let slice = buf.slice(..);
+    let (tx, rx) = std::sync::mpsc::channel();
+    slice.map_async(wgpu::MapMode::Read, move |r| {
+        let _ = tx.send(r);
+    });
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    rx.recv().unwrap().unwrap();
+    let data = slice.get_mapped_range();
+    let mut pixels = Vec::with_capacity((W * H * 4) as usize);
+    for row in 0..H as usize {
+        let sst = row * padded;
+        pixels.extend_from_slice(&data[sst..sst + unpadded]);
+    }
+    drop(data);
+    buf.unmap();
+    pixels
+}
+
+fn write_png(pixels: &[u8], path: &str) {
+    let file = File::create(path).expect("png");
+    let mut enc = png::Encoder::new(BufWriter::new(file), W, H);
+    enc.set_color(png::ColorType::Rgba);
+    enc.set_depth(png::BitDepth::Eight);
+    let mut w = enc.write_header().unwrap();
+    w.write_image_data(pixels).unwrap();
+}
diff --git a/llimphi-voxel/examples/house_demo.rs b/llimphi-voxel/examples/house_demo.rs
new file mode 100644
index 0000000..3a37f32
--- /dev/null
+++ b/llimphi-voxel/examples/house_demo.rs
@@ -0,0 +1,249 @@
+//! Casita de voxels construida con los **materiales de casa**: muros de ladrillo,
+//! piso y puerta de madera, ventanas de **vidrio** (lustroso → glasean al sol),
+//! techo a dos aguas de teja y una chimenea de pizarra. Verifica la tanda de
+//! materiales de obra *en contexto* y el brillo de los materiales (no sólo minerales).
+//!
+//! `cargo run -p llimphi-voxel --example house_demo --release` → `/tmp/house.png`
+
+use std::fs::File;
+use std::io::BufWriter;
+
+use llimphi_3d::glam::Vec3;
+use llimphi_3d::{Atmosphere, Camera3d, Scene3d, VoxelGrid, VoxelRenderer};
+use llimphi_hal::{wgpu, Hal};
+use llimphi_raster::peniko::Color;
+use llimphi_raster::{vello, Renderer};
+use llimphi_voxel::Material;
+
+const W: u32 = 1180;
+const H: u32 = 700;
+const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
+
+/// Coloca un voxel del material `m`, llevando su brillo en el alpha (los lustrosos
+/// como el vidrio glasean; los mate quedan en 255).
+fn put(g: &mut VoxelGrid, x: i32, y: i32, z: i32, m: Material) {
+    if x < 0 || y < 0 || z < 0 {
+        return;
+    }
+    let a = VoxelGrid::shine_to_alpha(m.brillo());
+    g.set_rgba(x as u32, y as u32, z as u32, m.color(), a);
+}
+
+fn main() {
+    let dim = [56u32, 44, 52];
+    let mut g = VoxelGrid::new(dim);
+
+    // Césped.
+    let gh = 4i32;
+    for x in 0..dim[0] as i32 {
+        for z in 0..dim[2] as i32 {
+            for y in 0..gh {
+                let t = ((x * 5 + z * 7 + y) % 9) as i32 - 4;
+                let base = Material::Grass.color();
+                let c = |v: u8| (v as i32 + t).clamp(0, 255) as u8;
+                g.set(x as u32, y as u32, z as u32, [c(base[0]), c(base[1]), c(base[2])]);
+            }
+        }
+    }
+
+    // Footprint de la casa.
+    let (x0, z0) = (12i32, 12i32);
+    let (wd, dp) = (26i32, 22i32); // ancho (x), profundidad (z)
+    let wh = 9i32; // alto de muros
+    let (x1, z1) = (x0 + wd - 1, z0 + dp - 1);
+
+    // Piso de madera.
+    for x in x0..=x1 {
+        for z in z0..=z1 {
+            put(&mut g, x, gh, z, Material::Madera);
+        }
+    }
+
+    // Muros de ladrillo (perímetro).
+    for yy in 0..wh {
+        let y = gh + 1 + yy;
+        for x in x0..=x1 {
+            put(&mut g, x, y, z0, Material::Ladrillo);
+            put(&mut g, x, y, z1, Material::Ladrillo);
+        }
+        for z in z0..=z1 {
+            put(&mut g, x0, y, z, Material::Ladrillo);
+            put(&mut g, x1, y, z, Material::Ladrillo);
+        }
+    }
+
+    // Vigas de acero en las esquinas (lustrosas).
+    for yy in 0..wh {
+        let y = gh + 1 + yy;
+        for (cx, cz) in [(x0, z0), (x1, z0), (x0, z1), (x1, z1)] {
+            put(&mut g, cx, y, cz, Material::Acero);
+        }
+    }
+
+    // Puerta de madera (pared frontal z0, centrada).
+    let dcx = x0 + wd / 2;
+    for yy in 0..5 {
+        for dx in -1..=1 {
+            put(&mut g, dcx + dx, gh + 1 + yy, z0, Material::Madera);
+        }
+    }
+
+    // Ventanas de vidrio (3×3) en las cuatro paredes.
+    let ventana = |g: &mut VoxelGrid, cx: i32, cz: i32, along_x: bool| {
+        for a in -1..=1 {
+            for b in 0..3 {
+                let y = gh + 3 + b;
+                if along_x {
+                    put(g, cx + a, y, cz, Material::Vidrio);
+                } else {
+                    put(g, cx, y, cz + a, Material::Vidrio);
+                }
+            }
+        }
+    };
+    // Frontal: dos ventanas flanqueando la puerta.
+    ventana(&mut g, x0 + 4, z0, true);
+    ventana(&mut g, x1 - 4, z0, true);
+    // Trasera.
+    ventana(&mut g, x0 + wd / 3, z1, true);
+    ventana(&mut g, x1 - wd / 3, z1, true);
+    // Laterales.
+    ventana(&mut g, x0, z0 + dp / 2, false);
+    ventana(&mut g, x1, z0 + dp / 2, false);
+
+    // Techo a dos aguas de teja (cumbrera a lo largo de x), con alero de 1.
+    let roof_base = gh + 1 + wh;
+    let half = (dp + 1) / 2;
+    for r in 0..half {
+        let y = roof_base + r;
+        let za = z0 - 1 + r; // agua norte
+        let zb = z1 + 1 - r; // agua sur
+        for x in (x0 - 1)..=(x1 + 1) {
+            put(&mut g, x, y, za, Material::Teja);
+            put(&mut g, x, y, zb, Material::Teja);
+        }
+    }
+
+    // Chimenea de pizarra (sobresale del techo).
+    let (chx, chz) = (x1 - 3, z0 + 3);
+    for y in (gh + 1)..(roof_base + half + 2) {
+        for dx in 0..2 {
+            for dz in 0..2 {
+                put(&mut g, chx + dx, y, chz + dz, Material::Pizarra);
+            }
+        }
+    }
+
+    // --- Render ---
+    let hal = pollster::block_on(Hal::new(None)).expect("hal");
+    let mut renderer = Renderer::new(&hal).expect("renderer");
+    let mut vr = VoxelRenderer::new(&hal.device, &hal.queue, FMT, &g);
+    vr.sun_dir = [0.42, 0.66, 0.62]; // sol alto-frontal → las ventanas glasean
+    vr.atmosphere = Atmosphere {
+        sky_zenith: [96, 146, 208],
+        sky_horizon: [206, 220, 232],
+        fog_density: 0.0,
+        god_rays: 0.0,
+    };
+    let camera = Camera3d::orbit(
+        Vec3::new(0.0, dim[1] as f32 * 0.06, 0.0),
+        34_f32.to_radians(),
+        20_f32.to_radians(),
+        dim[0] as f32 * 1.15,
+    );
+    let mut scene = Scene3d::new();
+    let pixels = render(&hal, &mut renderer, &mut scene, &mut vr, &camera);
+    write_png(&pixels, "/tmp/house.png");
+    eprintln!("escrito /tmp/house.png — casita con materiales de obra (vidrio/acero lustrosos)");
+}
+
+fn render(
+    hal: &Hal,
+    renderer: &mut Renderer,
+    scene: &mut Scene3d,
+    vr: &mut VoxelRenderer,
+    camera: &Camera3d,
+) -> Vec<u8> {
+    let inter = hal.device.create_texture(&wgpu::TextureDescriptor {
+        label: Some("inter"),
+        size: wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+        mip_level_count: 1,
+        sample_count: 1,
+        dimension: wgpu::TextureDimension::D2,
+        format: FMT,
+        usage: wgpu::TextureUsages::STORAGE_BINDING
+            | wgpu::TextureUsages::TEXTURE_BINDING
+            | wgpu::TextureUsages::RENDER_ATTACHMENT
+            | wgpu::TextureUsages::COPY_SRC,
+        view_formats: &[],
+    });
+    let view = inter.create_view(&wgpu::TextureViewDescriptor::default());
+    renderer
+        .render_to_view(hal, &vello::Scene::new(), &view, W, H, Color::from_rgba8(0, 0, 0, 255))
+        .expect("base");
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: Some("house") });
+    scene.render(&hal.device, &hal.queue, &mut enc, &view, (W, H), camera, Some(vr), &[]);
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    readback(hal, &inter)
+}
+
+fn readback(hal: &Hal, target: &wgpu::Texture) -> Vec<u8> {
+    let unpadded = (W * 4) as usize;
+    let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize;
+    let padded = unpadded.div_ceil(align) * align;
+    let buf = hal.device.create_buffer(&wgpu::BufferDescriptor {
+        label: Some("readback"),
+        size: (padded * H as usize) as u64,
+        usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
+        mapped_at_creation: false,
+    });
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    enc.copy_texture_to_buffer(
+        wgpu::TexelCopyTextureInfo {
+            texture: target,
+            mip_level: 0,
+            origin: wgpu::Origin3d::ZERO,
+            aspect: wgpu::TextureAspect::All,
+        },
+        wgpu::TexelCopyBufferInfo {
+            buffer: &buf,
+            layout: wgpu::TexelCopyBufferLayout {
+                offset: 0,
+                bytes_per_row: Some(padded as u32),
+                rows_per_image: Some(H),
+            },
+        },
+        wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let slice = buf.slice(..);
+    let (tx, rx) = std::sync::mpsc::channel();
+    slice.map_async(wgpu::MapMode::Read, move |r| {
+        let _ = tx.send(r);
+    });
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    rx.recv().unwrap().unwrap();
+    let data = slice.get_mapped_range();
+    let mut pixels = Vec::with_capacity((W * H * 4) as usize);
+    for row in 0..H as usize {
+        let srow = row * padded;
+        pixels.extend_from_slice(&data[srow..srow + unpadded]);
+    }
+    drop(data);
+    buf.unmap();
+    pixels
+}
+
+fn write_png(pixels: &[u8], path: &str) {
+    let file = File::create(path).expect("png");
+    let mut enc = png::Encoder::new(BufWriter::new(file), W, H);
+    enc.set_color(png::ColorType::Rgba);
+    enc.set_depth(png::BitDepth::Eight);
+    let mut wtr = enc.write_header().unwrap();
+    wtr.write_image_data(pixels).unwrap();
+}
diff --git a/llimphi-voxel/examples/lit_demo.rs b/llimphi-voxel/examples/lit_demo.rs
new file mode 100644
index 0000000..a2ceda4
--- /dev/null
+++ b/llimphi-voxel/examples/lit_demo.rs
@@ -0,0 +1,169 @@
+//! Prueba de **sombras suaves** de una luz de interior: un piso con un par de
+//! objetos, iluminado por la lámpara como fuente de área (`PointLight.radius`) →
+//! penumbra que se abre con la distancia. `point_shadows` activo.
+//!
+//! `cargo run -p llimphi-voxel --example lit_demo --release` → `/tmp/lit.png`
+
+use std::fs::File;
+use std::io::BufWriter;
+
+use llimphi_3d::glam::Vec3;
+use llimphi_3d::{Atmosphere, Camera3d, PointLight, Scene3d, VoxelGrid, VoxelRenderer};
+use llimphi_hal::{wgpu, Hal};
+use llimphi_raster::peniko::Color;
+use llimphi_raster::{vello, Renderer};
+use llimphi_voxel::{stamp_mueble, Material, Mueble};
+
+const W: u32 = 1100;
+const H: u32 = 640;
+const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
+
+fn main() {
+    let radius: f32 = std::env::args().nth(1).and_then(|s| s.parse().ok()).unwrap_or(2.0);
+    let dim = [56u32, 40, 48];
+    let mut g = VoxelGrid::new(dim);
+
+    // Piso liso de cerámica.
+    let floor_h = 2i32;
+    for x in 0..dim[0] {
+        for z in 0..dim[2] {
+            for y in 0..floor_h as u32 {
+                g.set(x, y, z, Material::Hormigon.color());
+            }
+        }
+    }
+
+    // Objetos que proyecten sombra sobre un piso amplio.
+    stamp_mueble(&mut g, Mueble::Silla, 26, floor_h as u32, 22, 2);
+    stamp_mueble(&mut g, Mueble::Barril, 34, floor_h as u32, 26, 0);
+    stamp_mueble(&mut g, Mueble::Ficus, 28, floor_h as u32, 32, 0);
+    // Un par de postes finos y altos: sombras largas y limpias para leer la penumbra.
+    for &px in &[18i32, 40] {
+        for dy in 0..12 {
+            g.set(px as u32, (floor_h + dy) as u32, 20, Material::Madera.color());
+        }
+    }
+    // La luz alta y a un lado (x bajo): sombras largas cruzando el piso hacia +x.
+    let light_pos = [10.0f32, floor_h as f32 + 16.0, 20.0];
+
+    let hal = pollster::block_on(Hal::new(None)).expect("hal");
+    let mut renderer = Renderer::new(&hal).expect("renderer");
+    let mut vr = VoxelRenderer::new(&hal.device, &hal.queue, FMT, &g);
+    vr.sun_dir = [0.3, 0.42, 0.4];
+    vr.atmosphere = Atmosphere {
+        sky_zenith: [30, 34, 46], // ambiente tenue pero visible
+        sky_horizon: [52, 50, 62],
+        fog_density: 0.0,
+        god_rays: 0.0,
+    };
+    vr.point_shadows = true;
+    vr.lights = vec![PointLight {
+        pos: light_pos,
+        color: [1.1, 0.92, 0.62], // cálida, sin reventar → el piso lit deja ver la sombra
+        range: 60.0,
+        radius, // fuente de área → penumbra
+    }];
+    eprintln!("radius de área = {radius} (0 = sombra dura; >0 = penumbra)");
+
+    let camera = Camera3d::orbit(
+        Vec3::new(2.0, floor_h as f32 * 0.4, 4.0),
+        20_f32.to_radians(),
+        26_f32.to_radians(),
+        dim[0] as f32 * 0.98,
+    );
+    let mut scene = Scene3d::new();
+    let pixels = render(&hal, &mut renderer, &mut scene, &mut vr, &camera);
+    write_png(&pixels, "/tmp/lit.png");
+    eprintln!("escrito /tmp/lit.png");
+}
+
+fn render(
+    hal: &Hal,
+    renderer: &mut Renderer,
+    scene: &mut Scene3d,
+    vr: &mut VoxelRenderer,
+    camera: &Camera3d,
+) -> Vec<u8> {
+    let inter = hal.device.create_texture(&wgpu::TextureDescriptor {
+        label: Some("inter"),
+        size: wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+        mip_level_count: 1,
+        sample_count: 1,
+        dimension: wgpu::TextureDimension::D2,
+        format: FMT,
+        usage: wgpu::TextureUsages::STORAGE_BINDING
+            | wgpu::TextureUsages::TEXTURE_BINDING
+            | wgpu::TextureUsages::RENDER_ATTACHMENT
+            | wgpu::TextureUsages::COPY_SRC,
+        view_formats: &[],
+    });
+    let view = inter.create_view(&wgpu::TextureViewDescriptor::default());
+    renderer
+        .render_to_view(hal, &vello::Scene::new(), &view, W, H, Color::from_rgba8(0, 0, 0, 255))
+        .expect("base");
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: Some("lit") });
+    scene.render(&hal.device, &hal.queue, &mut enc, &view, (W, H), camera, Some(vr), &[]);
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    readback(hal, &inter)
+}
+
+fn readback(hal: &Hal, target: &wgpu::Texture) -> Vec<u8> {
+    let unpadded = (W * 4) as usize;
+    let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize;
+    let padded = unpadded.div_ceil(align) * align;
+    let buf = hal.device.create_buffer(&wgpu::BufferDescriptor {
+        label: Some("readback"),
+        size: (padded * H as usize) as u64,
+        usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
+        mapped_at_creation: false,
+    });
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    enc.copy_texture_to_buffer(
+        wgpu::TexelCopyTextureInfo {
+            texture: target,
+            mip_level: 0,
+            origin: wgpu::Origin3d::ZERO,
+            aspect: wgpu::TextureAspect::All,
+        },
+        wgpu::TexelCopyBufferInfo {
+            buffer: &buf,
+            layout: wgpu::TexelCopyBufferLayout {
+                offset: 0,
+                bytes_per_row: Some(padded as u32),
+                rows_per_image: Some(H),
+            },
+        },
+        wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let slice = buf.slice(..);
+    let (tx, rx) = std::sync::mpsc::channel();
+    slice.map_async(wgpu::MapMode::Read, move |r| {
+        let _ = tx.send(r);
+    });
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    rx.recv().unwrap().unwrap();
+    let data = slice.get_mapped_range();
+    let mut pixels = Vec::with_capacity((W * H * 4) as usize);
+    for row in 0..H as usize {
+        let srow = row * padded;
+        pixels.extend_from_slice(&data[srow..srow + unpadded]);
+    }
+    drop(data);
+    buf.unmap();
+    pixels
+}
+
+fn write_png(pixels: &[u8], path: &str) {
+    let file = File::create(path).expect("png");
+    let mut enc = png::Encoder::new(BufWriter::new(file), W, H);
+    enc.set_color(png::ColorType::Rgba);
+    enc.set_depth(png::BitDepth::Eight);
+    let mut wtr = enc.write_header().unwrap();
+    wtr.write_image_data(pixels).unwrap();
+}
diff --git a/llimphi-voxel/examples/materials_demo.rs b/llimphi-voxel/examples/materials_demo.rs
new file mode 100644
index 0000000..b7c9095
--- /dev/null
+++ b/llimphi-voxel/examples/materials_demo.rs
@@ -0,0 +1,186 @@
+//! Catálogo de la **nueva tanda de materiales de terreno**: una fila de bloques,
+//! cada uno de un material (tierra, arcilla, grava, arenisca, basalto, granito,
+//! mármol, hielo, lava, musgo) con su color + un jitter de grano por vóxel.
+//!
+//! `cargo run -p llimphi-voxel --example materials_demo --release` → `/tmp/materials.png`
+
+use std::fs::File;
+use std::io::BufWriter;
+
+use llimphi_3d::glam::Vec3;
+use llimphi_3d::{Atmosphere, Camera3d, Scene3d, VoxelGrid, VoxelRenderer};
+use llimphi_hal::{wgpu, Hal};
+use llimphi_raster::peniko::Color;
+use llimphi_raster::{vello, Renderer};
+use llimphi_voxel::Material;
+
+const W: u32 = 1280;
+const H: u32 = 480;
+const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
+
+// Hash barato para el jitter de grano (mismo espíritu que worldgen::grained).
+fn jitter(base: [u8; 3], x: i32, y: i32, z: i32, grain: f32) -> [u8; 3] {
+    let mut h = (x as u32)
+        .wrapping_mul(0x9E37_79B9)
+        .wrapping_add((y as u32).wrapping_mul(0x85EB_CA77))
+        .wrapping_add((z as u32).wrapping_mul(0xC2B2_AE35));
+    h ^= h >> 15;
+    h = h.wrapping_mul(0x2C1B_3C6D);
+    h ^= h >> 13;
+    let r = (h & 0xFF) as f32 / 255.0;
+    let f = 1.0 + (r - 0.5) * 2.0 * grain * 0.22;
+    let c = |v: u8| (v as f32 * f).clamp(0.0, 255.0) as u8;
+    [c(base[0]), c(base[1]), c(base[2])]
+}
+
+fn main() {
+    let fila = [
+        Material::Tierra,
+        Material::Arcilla,
+        Material::Grava,
+        Material::Arenisca,
+        Material::Basalto,
+        Material::Granito,
+        Material::Marmol,
+        Material::Hielo,
+        Material::Lava,
+        Material::Musgo,
+    ];
+    let s: i32 = 7; // lado del bloque
+    let gap: i32 = 3;
+    let step = s + gap;
+    let margin = 4;
+    let dim = [
+        (fila.len() as i32 * step + 2 * margin) as u32,
+        (s + 8) as u32,
+        (s + 8) as u32,
+    ];
+    let mut grid = VoxelGrid::new(dim);
+    let cz = dim[2] as i32 / 2;
+    for (i, mat) in fila.iter().enumerate() {
+        let col = mat.color();
+        let grain = mat.grain();
+        let x0 = margin + i as i32 * step;
+        for dx in 0..s {
+            for dy in 0..s {
+                for dz in 0..s {
+                    let (x, y, z) = (x0 + dx, 1 + dy, cz - s / 2 + dz);
+                    grid.set(x as u32, y as u32, z as u32, jitter(col, x, y, z, grain));
+                }
+            }
+        }
+        eprintln!("{:>9}: color {:?} grano {:.2}", mat.label(), col, grain);
+    }
+
+    let hal = pollster::block_on(Hal::new(None)).expect("hal");
+    let mut renderer = Renderer::new(&hal).expect("renderer");
+    let mut vr = VoxelRenderer::new(&hal.device, &hal.queue, FMT, &grid);
+    vr.sun_dir = [0.35, 0.72, 0.55];
+    vr.atmosphere = Atmosphere {
+        sky_zenith: [92, 120, 168],
+        sky_horizon: [196, 208, 222],
+        fog_density: 0.0,
+        god_rays: 0.0,
+    };
+    let camera = Camera3d::orbit(
+        Vec3::new(0.0, s as f32 * 0.3, 0.0),
+        10_f32.to_radians(),
+        24_f32.to_radians(),
+        dim[0] as f32 * 0.7,
+    );
+    let mut scene = Scene3d::new();
+    let pixels = render(&hal, &mut renderer, &mut scene, &mut vr, &camera);
+    write_png(&pixels, "/tmp/materials.png");
+    eprintln!("escrito /tmp/materials.png — nueva tanda de 10 materiales de terreno");
+}
+
+fn render(
+    hal: &Hal,
+    renderer: &mut Renderer,
+    scene: &mut Scene3d,
+    vr: &mut VoxelRenderer,
+    camera: &Camera3d,
+) -> Vec<u8> {
+    let inter = hal.device.create_texture(&wgpu::TextureDescriptor {
+        label: Some("inter"),
+        size: wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+        mip_level_count: 1,
+        sample_count: 1,
+        dimension: wgpu::TextureDimension::D2,
+        format: FMT,
+        usage: wgpu::TextureUsages::STORAGE_BINDING
+            | wgpu::TextureUsages::TEXTURE_BINDING
+            | wgpu::TextureUsages::RENDER_ATTACHMENT
+            | wgpu::TextureUsages::COPY_SRC,
+        view_formats: &[],
+    });
+    let view = inter.create_view(&wgpu::TextureViewDescriptor::default());
+    renderer
+        .render_to_view(hal, &vello::Scene::new(), &view, W, H, Color::from_rgba8(0, 0, 0, 255))
+        .expect("base");
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: Some("materials") });
+    scene.render(&hal.device, &hal.queue, &mut enc, &view, (W, H), camera, Some(vr), &[]);
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    readback(hal, &inter)
+}
+
+fn readback(hal: &Hal, target: &wgpu::Texture) -> Vec<u8> {
+    let unpadded = (W * 4) as usize;
+    let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize;
+    let padded = unpadded.div_ceil(align) * align;
+    let buf = hal.device.create_buffer(&wgpu::BufferDescriptor {
+        label: Some("readback"),
+        size: (padded * H as usize) as u64,
+        usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
+        mapped_at_creation: false,
+    });
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    enc.copy_texture_to_buffer(
+        wgpu::TexelCopyTextureInfo {
+            texture: target,
+            mip_level: 0,
+            origin: wgpu::Origin3d::ZERO,
+            aspect: wgpu::TextureAspect::All,
+        },
+        wgpu::TexelCopyBufferInfo {
+            buffer: &buf,
+            layout: wgpu::TexelCopyBufferLayout {
+                offset: 0,
+                bytes_per_row: Some(padded as u32),
+                rows_per_image: Some(H),
+            },
+        },
+        wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let slice = buf.slice(..);
+    let (tx, rx) = std::sync::mpsc::channel();
+    slice.map_async(wgpu::MapMode::Read, move |r| {
+        let _ = tx.send(r);
+    });
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    rx.recv().unwrap().unwrap();
+    let data = slice.get_mapped_range();
+    let mut pixels = Vec::with_capacity((W * H * 4) as usize);
+    for row in 0..H as usize {
+        let srow = row * padded;
+        pixels.extend_from_slice(&data[srow..srow + unpadded]);
+    }
+    drop(data);
+    buf.unmap();
+    pixels
+}
+
+fn write_png(pixels: &[u8], path: &str) {
+    let file = File::create(path).expect("png");
+    let mut enc = png::Encoder::new(BufWriter::new(file), W, H);
+    enc.set_color(png::ColorType::Rgba);
+    enc.set_depth(png::BitDepth::Eight);
+    let mut wtr = enc.write_header().unwrap();
+    wtr.write_image_data(pixels).unwrap();
+}
diff --git a/llimphi-voxel/examples/mineral_demo.rs b/llimphi-voxel/examples/mineral_demo.rs
new file mode 100644
index 0000000..5a87375
--- /dev/null
+++ b/llimphi-voxel/examples/mineral_demo.rs
@@ -0,0 +1,176 @@
+//! Catálogo headless de **minerales**: una montaña de roca cortada con vetas,
+//! pepitas, estratos, geodas y cristales de los 12 minerales del catálogo,
+//! abundancia forzada para que afloren en las caras expuestas.
+//!
+//! `cargo run -p llimphi-voxel --example mineral_demo --release` → `/tmp/mineral.png`
+
+use std::fs::File;
+use std::io::BufWriter;
+
+use llimphi_3d::glam::Vec3;
+use llimphi_3d::{Atmosphere, Camera3d, Scene3d, VoxelRenderer};
+use llimphi_hal::{wgpu, Hal};
+use llimphi_raster::peniko::Color;
+use llimphi_raster::{vello, Renderer};
+use llimphi_voxel::{Bioma, BiomaPalette, Material, Mineral, MineralUso, ObjetoUso, ResolvedMaterial};
+
+const W: u32 = 1280;
+const H: u32 = 640;
+const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
+
+fn main() {
+    let dim_xz: u32 = std::env::args().nth(1).and_then(|s| s.parse().ok()).unwrap_or(150);
+    let seed: u32 = std::env::args().nth(2).and_then(|s| s.parse().ok()).unwrap_or(9);
+    let dy = (dim_xz * 7 / 10).max(72);
+    let dim = [dim_xz, dy, dim_xz];
+
+    // Bioma rocoso, muy montañoso, sin agua ni vegetación: pura roca para leer las
+    // vetas. Los 12 minerales con abundancia amplificada.
+    let bump = |m: Mineral| {
+        let base = MineralUso::of(m);
+        MineralUso::with_abundancia(m, (base.abundancia * 2.4).min(0.95))
+    };
+    let bioma = Bioma {
+        id: 1,
+        name: "veta".into(),
+        base: 0.16,
+        dune: 0.05,
+        relief: 0.95,
+        mountains: 1.0,
+        water_level: 0.0,
+        rivers: 0.0,
+        peak_at: 0.9,
+        ground: 0,
+        cliff: 0,
+        peak: None,
+        objetos: Vec::<ObjetoUso>::new(),
+        minerales: Mineral::ALL.iter().copied().map(bump).collect(),
+        casas: vec![],
+        densidad_urbana: 0.4,
+        fauna: vec![],
+        seres: Vec::new(),
+    };
+    let palette = BiomaPalette {
+        ground: ResolvedMaterial::new(Material::Rock.color(), 0.45),
+        cliff: ResolvedMaterial::new([96, 90, 86], 0.45),
+        peak: None,
+        agua: Material::Water.color(),
+        objetos: Vec::new(),
+    };
+    let grid = bioma.generate_window(seed, &palette, dim, [0, 0]);
+
+    let hal = pollster::block_on(Hal::new(None)).expect("hal");
+    let mut renderer = Renderer::new(&hal).expect("renderer");
+    let mut vr = VoxelRenderer::new(&hal.device, &hal.queue, FMT, &grid);
+    vr.sun_dir = [0.55, 0.5, 0.32];
+    vr.atmosphere = Atmosphere {
+        sky_zenith: [58, 66, 92],
+        sky_horizon: [120, 118, 128],
+        fog_density: 0.10 / dim_xz as f32,
+        god_rays: 0.0,
+    };
+
+    // Cámara baja en 3/4 para leer los flancos rocosos donde afloran las vetas.
+    let camera = Camera3d::orbit(
+        Vec3::new(0.0, dy as f32 * -0.05, 0.0),
+        32_f32.to_radians(),
+        16_f32.to_radians(),
+        dim_xz as f32 * 1.25,
+    );
+
+    let mut scene = Scene3d::new();
+    let pixels = render(&hal, &mut renderer, &mut scene, &mut vr, &camera);
+    write_png(&pixels, "/tmp/mineral.png");
+    eprintln!("escrito /tmp/mineral.png — 12 minerales aflorando en la roca (seed {seed})");
+}
+
+fn render(
+    hal: &Hal,
+    renderer: &mut Renderer,
+    scene: &mut Scene3d,
+    vr: &mut VoxelRenderer,
+    camera: &Camera3d,
+) -> Vec<u8> {
+    let inter = hal.device.create_texture(&wgpu::TextureDescriptor {
+        label: Some("inter"),
+        size: wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+        mip_level_count: 1,
+        sample_count: 1,
+        dimension: wgpu::TextureDimension::D2,
+        format: FMT,
+        usage: wgpu::TextureUsages::STORAGE_BINDING
+            | wgpu::TextureUsages::TEXTURE_BINDING
+            | wgpu::TextureUsages::RENDER_ATTACHMENT
+            | wgpu::TextureUsages::COPY_SRC,
+        view_formats: &[],
+    });
+    let view = inter.create_view(&wgpu::TextureViewDescriptor::default());
+    renderer
+        .render_to_view(hal, &vello::Scene::new(), &view, W, H, Color::from_rgba8(0, 0, 0, 255))
+        .expect("base");
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: Some("mineral") });
+    scene.render(&hal.device, &hal.queue, &mut enc, &view, (W, H), camera, Some(vr), &[]);
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    readback(hal, &inter)
+}
+
+fn readback(hal: &Hal, target: &wgpu::Texture) -> Vec<u8> {
+    let unpadded = (W * 4) as usize;
+    let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize;
+    let padded = unpadded.div_ceil(align) * align;
+    let buf = hal.device.create_buffer(&wgpu::BufferDescriptor {
+        label: Some("readback"),
+        size: (padded * H as usize) as u64,
+        usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
+        mapped_at_creation: false,
+    });
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    enc.copy_texture_to_buffer(
+        wgpu::TexelCopyTextureInfo {
+            texture: target,
+            mip_level: 0,
+            origin: wgpu::Origin3d::ZERO,
+            aspect: wgpu::TextureAspect::All,
+        },
+        wgpu::TexelCopyBufferInfo {
+            buffer: &buf,
+            layout: wgpu::TexelCopyBufferLayout {
+                offset: 0,
+                bytes_per_row: Some(padded as u32),
+                rows_per_image: Some(H),
+            },
+        },
+        wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let slice = buf.slice(..);
+    let (tx, rx) = std::sync::mpsc::channel();
+    slice.map_async(wgpu::MapMode::Read, move |r| {
+        let _ = tx.send(r);
+    });
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    rx.recv().unwrap().unwrap();
+    let data = slice.get_mapped_range();
+    let mut pixels = Vec::with_capacity((W * H * 4) as usize);
+    for row in 0..H as usize {
+        let s = row * padded;
+        pixels.extend_from_slice(&data[s..s + unpadded]);
+    }
+    drop(data);
+    buf.unmap();
+    pixels
+}
+
+fn write_png(pixels: &[u8], path: &str) {
+    let file = File::create(path).expect("png");
+    let mut enc = png::Encoder::new(BufWriter::new(file), W, H);
+    enc.set_color(png::ColorType::Rgba);
+    enc.set_depth(png::BitDepth::Eight);
+    let mut wtr = enc.write_header().unwrap();
+    wtr.write_image_data(pixels).unwrap();
+}
diff --git a/llimphi-voxel/examples/pueblo_demo.rs b/llimphi-voxel/examples/pueblo_demo.rs
new file mode 100644
index 0000000..f7e0363
--- /dev/null
+++ b/llimphi-voxel/examples/pueblo_demo.rs
@@ -0,0 +1,176 @@
+//! **Pueblo procedural**: un bioma de pradera con casas esparcidas por SEMILLA
+//! (mezcla de estilos). Cambiando la semilla, cambia el pueblo entero.
+//!
+//! `cargo run -p llimphi-voxel --example pueblo_demo --release -- [seed]` → `/tmp/pueblo.png`
+
+use std::fs::File;
+use std::io::BufWriter;
+
+use llimphi_3d::glam::Vec3;
+use llimphi_3d::{Atmosphere, Camera3d, Scene3d, VoxelRenderer};
+use llimphi_hal::{wgpu, Hal};
+use llimphi_raster::peniko::Color;
+use llimphi_raster::{vello, Renderer};
+use llimphi_voxel::{Bicho, BichoUso, Bioma, BiomaPalette, CasaTipo, CasaUso, Material, ResolvedMaterial};
+
+const W: u32 = 1280;
+const H: u32 = 720;
+const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
+
+fn main() {
+    let seed: u32 = std::env::args().nth(1).and_then(|s| s.parse().ok()).unwrap_or(7);
+    let dim_xz: u32 = 168;
+    let dim = [dim_xz, 60, dim_xz];
+
+    // Pradera bastante llana (para que las casas se asienten) con un pueblo mezclado.
+    let bioma = Bioma {
+        id: 1,
+        name: "pueblo".into(),
+        base: 0.16,
+        dune: 0.03,
+        relief: 0.22,
+        mountains: 0.12,
+        water_level: 0.0,
+        rivers: 0.0,
+        peak_at: 1.0,
+        ground: 1,
+        cliff: 2,
+        peak: None,
+        objetos: vec![],
+        minerales: vec![],
+        densidad_urbana: 0.5,
+        casas: vec![
+            CasaUso { tipo: CasaTipo::Cabana, densidad: 0.35 },
+            CasaUso { tipo: CasaTipo::Moderna, densidad: 0.3 },
+            CasaUso { tipo: CasaTipo::Flintstone, densidad: 0.2 },
+            CasaUso { tipo: CasaTipo::Hobbit, densidad: 0.2 },
+            CasaUso { tipo: CasaTipo::Edificio, densidad: 0.15 },
+        ],
+        fauna: vec![
+            BichoUso { bicho: Bicho::Vaca, densidad: 0.3 },
+            BichoUso { bicho: Bicho::Oveja, densidad: 0.3 },
+            BichoUso { bicho: Bicho::Conejo, densidad: 0.4 },
+            BichoUso { bicho: Bicho::Ciervo, densidad: 0.25 },
+            BichoUso { bicho: Bicho::Mariposa, densidad: 0.3 },
+        ],
+        seres: vec![],
+    };
+    let palette = BiomaPalette {
+        ground: ResolvedMaterial::new(Material::Grass.color(), Material::Grass.grain()),
+        cliff: ResolvedMaterial::new(Material::Rock.color(), Material::Rock.grain()),
+        peak: None,
+        agua: Material::Water.color(),
+        objetos: vec![],
+    };
+    let grid = bioma.generate_window(seed, &palette, dim, [0, 0]);
+
+    let hal = pollster::block_on(Hal::new(None)).expect("hal");
+    let mut renderer = Renderer::new(&hal).expect("renderer");
+    let mut vr = VoxelRenderer::new(&hal.device, &hal.queue, FMT, &grid);
+    vr.sun_dir = [0.42, 0.58, 0.5];
+    vr.atmosphere = Atmosphere {
+        sky_zenith: [96, 146, 210],
+        sky_horizon: [214, 226, 238],
+        fog_density: 0.5 / dim_xz as f32, // bruma que da profundidad al pueblo
+        god_rays: 0.0,
+    };
+    let half = Vec3::new(dim[0] as f32, dim[1] as f32, dim[2] as f32) * 0.5;
+    let look = Vec3::new(dim[0] as f32 * 0.5, 6.0, dim[2] as f32 * 0.5) - half;
+    let camera = Camera3d::orbit(look, 22_f32.to_radians(), 22_f32.to_radians(), dim_xz as f32 * 0.98);
+
+    let mut scene = Scene3d::new();
+    let pixels = render(&hal, &mut renderer, &mut scene, &mut vr, &camera);
+    write_png(&pixels, "/tmp/pueblo.png");
+    eprintln!("escrito /tmp/pueblo.png — pueblo procedural (seed {seed})");
+}
+
+fn render(
+    hal: &Hal,
+    renderer: &mut Renderer,
+    scene: &mut Scene3d,
+    vr: &mut VoxelRenderer,
+    camera: &Camera3d,
+) -> Vec<u8> {
+    let inter = hal.device.create_texture(&wgpu::TextureDescriptor {
+        label: Some("inter"),
+        size: wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+        mip_level_count: 1,
+        sample_count: 1,
+        dimension: wgpu::TextureDimension::D2,
+        format: FMT,
+        usage: wgpu::TextureUsages::STORAGE_BINDING
+            | wgpu::TextureUsages::TEXTURE_BINDING
+            | wgpu::TextureUsages::RENDER_ATTACHMENT
+            | wgpu::TextureUsages::COPY_SRC,
+        view_formats: &[],
+    });
+    let view = inter.create_view(&wgpu::TextureViewDescriptor::default());
+    renderer
+        .render_to_view(hal, &vello::Scene::new(), &view, W, H, Color::from_rgba8(0, 0, 0, 255))
+        .expect("base");
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: Some("pueblo") });
+    scene.render(&hal.device, &hal.queue, &mut enc, &view, (W, H), camera, Some(vr), &[]);
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    readback(hal, &inter)
+}
+
+fn readback(hal: &Hal, target: &wgpu::Texture) -> Vec<u8> {
+    let unpadded = (W * 4) as usize;
+    let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize;
+    let padded = unpadded.div_ceil(align) * align;
+    let buf = hal.device.create_buffer(&wgpu::BufferDescriptor {
+        label: Some("readback"),
+        size: (padded * H as usize) as u64,
+        usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
+        mapped_at_creation: false,
+    });
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    enc.copy_texture_to_buffer(
+        wgpu::TexelCopyTextureInfo {
+            texture: target,
+            mip_level: 0,
+            origin: wgpu::Origin3d::ZERO,
+            aspect: wgpu::TextureAspect::All,
+        },
+        wgpu::TexelCopyBufferInfo {
+            buffer: &buf,
+            layout: wgpu::TexelCopyBufferLayout {
+                offset: 0,
+                bytes_per_row: Some(padded as u32),
+                rows_per_image: Some(H),
+            },
+        },
+        wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let slice = buf.slice(..);
+    let (tx, rx) = std::sync::mpsc::channel();
+    slice.map_async(wgpu::MapMode::Read, move |r| {
+        let _ = tx.send(r);
+    });
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    rx.recv().unwrap().unwrap();
+    let data = slice.get_mapped_range();
+    let mut pixels = Vec::with_capacity((W * H * 4) as usize);
+    for row in 0..H as usize {
+        let s = row * padded;
+        pixels.extend_from_slice(&data[s..s + unpadded]);
+    }
+    drop(data);
+    buf.unmap();
+    pixels
+}
+
+fn write_png(pixels: &[u8], path: &str) {
+    let file = File::create(path).expect("png");
+    let mut enc = png::Encoder::new(BufWriter::new(file), W, H);
+    enc.set_color(png::ColorType::Rgba);
+    enc.set_depth(png::BitDepth::Eight);
+    let mut wtr = enc.write_header().unwrap();
+    wtr.write_image_data(pixels).unwrap();
+}
diff --git a/llimphi-voxel/examples/raycast_edit.rs b/llimphi-voxel/examples/raycast_edit.rs
index 5777ef4..dfba721 100644
--- a/llimphi-voxel/examples/raycast_edit.rs
+++ b/llimphi-voxel/examples/raycast_edit.rs
@@ -86,7 +86,7 @@ fn main() {
                 full / 1024,
             );
         }
-        None => eprintln!("el rayo no pegó terreno (ajustá cámara)"),
+        None => eprintln!("el rayo no pegó terreno (ajusta cámara)"),
     }
 
     // (después)
diff --git a/llimphi-voxel/examples/rig_demo.rs b/llimphi-voxel/examples/rig_demo.rs
new file mode 100644
index 0000000..abbc2c9
--- /dev/null
+++ b/llimphi-voxel/examples/rig_demo.rs
@@ -0,0 +1,149 @@
+//! Demo headless del **rig**: las cuatro morfologías preset (humanoide, cuadrúpedo,
+//! ave, serpiente) en fila, en plena caminata (andar procedural), a un PNG.
+//!
+//! `cargo run -p llimphi-voxel --example rig_demo --release` → `/tmp/rig.png`
+
+use std::fs::File;
+use std::io::BufWriter;
+
+use llimphi_3d::glam::{Mat4, Vec3};
+use llimphi_3d::{Camera3d, Renderer3d, Scene3d};
+use llimphi_hal::{wgpu, Hal};
+use llimphi_raster::peniko::Color;
+use llimphi_raster::{vello, Renderer};
+use llimphi_voxel::{Andar, Rig};
+
+const W: u32 = 1100;
+const H: u32 = 520;
+const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
+
+fn main() {
+    let phase: f32 = std::env::args().nth(1).and_then(|s| s.parse().ok()).unwrap_or(1.1);
+
+    let hal = pollster::block_on(Hal::new(None)).expect("hal");
+    let mut renderer = Renderer::new(&hal).expect("renderer");
+
+    // Las cuatro criaturas, con paletas distinguibles (piel, cuerpo, patas).
+    let palettes = [
+        ([0.90, 0.72, 0.58], [0.82, 0.30, 0.28], [0.20, 0.22, 0.34]), // humanoide
+        ([0.78, 0.62, 0.42], [0.55, 0.42, 0.30], [0.40, 0.30, 0.22]), // cuadrúpedo
+        ([0.95, 0.80, 0.30], [0.30, 0.55, 0.85], [0.85, 0.55, 0.20]), // ave
+        ([0.55, 0.80, 0.40], [0.30, 0.62, 0.34], [0.30, 0.62, 0.34]), // serpiente
+    ];
+    let rigs = Rig::presets();
+
+    // Un Renderer3d por criatura, ubicado en su columna (separadas en X).
+    let mut actors: Vec<Renderer3d> = Vec::new();
+    let spacing = 2.6_f32;
+    let x0 = -(rigs.len() as f32 - 1.0) * 0.5 * spacing;
+    for (k, rig) in rigs.iter().enumerate() {
+        let (piel, cuerpo, patas) = palettes[k];
+        let andar = Andar::caminar(rig);
+        let pose = andar.pose(phase);
+        let (v, i) = rig.mesh(&pose, piel, cuerpo, patas);
+        let mut r = Renderer3d::new(&hal.device, FMT);
+        r.set_geometry(&hal.device, &v, &i);
+        r.set_model(Mat4::from_translation(Vec3::new(x0 + k as f32 * spacing, 0.0, 0.0)));
+        actors.push(r);
+    }
+
+    // Cámara: mira al centro de la fila, a la altura del pecho, en 3/4.
+    let camera = Camera3d::orbit(
+        Vec3::new(0.0, 0.7, 0.0),
+        28_f32.to_radians(),
+        18_f32.to_radians(),
+        7.5,
+    );
+
+    let mut scene = Scene3d::new();
+    let target = make_target(&hal);
+    let view = target.create_view(&wgpu::TextureViewDescriptor::default());
+    let sky = Color::from_rgba8(150, 186, 224, 255);
+    renderer.render_to_view(&hal, &vello::Scene::new(), &view, W, H, sky).expect("clear");
+
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: Some("rig") });
+    let refs: Vec<&Renderer3d> = actors.iter().collect();
+    scene.render(&hal.device, &hal.queue, &mut enc, &view, (W, H), &camera, None, &refs);
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+
+    let pixels = readback(&hal, &target);
+    write_png(&pixels, "/tmp/rig.png");
+    eprintln!("escrito /tmp/rig.png (humanoide · cuadrúpedo · ave · serpiente, fase {phase})");
+}
+
+fn make_target(hal: &Hal) -> wgpu::Texture {
+    hal.device.create_texture(&wgpu::TextureDescriptor {
+        label: Some("rig-target"),
+        size: wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+        mip_level_count: 1,
+        sample_count: 1,
+        dimension: wgpu::TextureDimension::D2,
+        format: FMT,
+        usage: wgpu::TextureUsages::STORAGE_BINDING
+            | wgpu::TextureUsages::TEXTURE_BINDING
+            | wgpu::TextureUsages::RENDER_ATTACHMENT
+            | wgpu::TextureUsages::COPY_SRC,
+        view_formats: &[],
+    })
+}
+
+fn readback(hal: &Hal, target: &wgpu::Texture) -> Vec<u8> {
+    let unpadded = (W * 4) as usize;
+    let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize;
+    let padded = unpadded.div_ceil(align) * align;
+    let buf = hal.device.create_buffer(&wgpu::BufferDescriptor {
+        label: Some("readback"),
+        size: (padded * H as usize) as u64,
+        usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
+        mapped_at_creation: false,
+    });
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    enc.copy_texture_to_buffer(
+        wgpu::TexelCopyTextureInfo {
+            texture: target,
+            mip_level: 0,
+            origin: wgpu::Origin3d::ZERO,
+            aspect: wgpu::TextureAspect::All,
+        },
+        wgpu::TexelCopyBufferInfo {
+            buffer: &buf,
+            layout: wgpu::TexelCopyBufferLayout {
+                offset: 0,
+                bytes_per_row: Some(padded as u32),
+                rows_per_image: Some(H),
+            },
+        },
+        wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let slice = buf.slice(..);
+    let (tx, rx) = std::sync::mpsc::channel();
+    slice.map_async(wgpu::MapMode::Read, move |r| {
+        let _ = tx.send(r);
+    });
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    rx.recv().unwrap().unwrap();
+    let data = slice.get_mapped_range();
+    let mut pixels = Vec::with_capacity((W * H * 4) as usize);
+    for row in 0..H as usize {
+        let s = row * padded;
+        pixels.extend_from_slice(&data[s..s + unpadded]);
+    }
+    drop(data);
+    buf.unmap();
+    pixels
+}
+
+fn write_png(pixels: &[u8], path: &str) {
+    let file = File::create(path).expect("png");
+    let mut enc = png::Encoder::new(BufWriter::new(file), W, H);
+    enc.set_color(png::ColorType::Rgba);
+    enc.set_depth(png::BitDepth::Eight);
+    let mut wtr = enc.write_header().unwrap();
+    wtr.write_image_data(pixels).unwrap();
+}
diff --git a/llimphi-voxel/examples/roof_demo.rs b/llimphi-voxel/examples/roof_demo.rs
new file mode 100644
index 0000000..d0fa3eb
--- /dev/null
+++ b/llimphi-voxel/examples/roof_demo.rs
@@ -0,0 +1,155 @@
+//! Muestra los **tipos de techo** (plano, tejas, zinc, pizarra, paja) sobre la misma
+//! habitación, en un montaje horizontal. `Cutaway::none` → techo entero.
+//!
+//! `cargo run -p llimphi-voxel --example roof_demo --release` → `/tmp/roof.png`
+
+use std::fs::File;
+use std::io::BufWriter;
+
+use llimphi_3d::glam::Vec3;
+use llimphi_3d::{Atmosphere, Camera3d, Scene3d, VoxelRenderer};
+use llimphi_hal::{wgpu, Hal};
+use llimphi_raster::peniko::Color;
+use llimphi_raster::{vello, Renderer};
+use llimphi_voxel::{Cutaway, Interior, TechoTipo};
+
+const TILE: u32 = 300;
+const H: u32 = 340;
+const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
+
+fn main() {
+    let tipos = TechoTipo::ALL;
+    let cols = tipos.len() as u32;
+    let hal = pollster::block_on(Hal::new(None)).expect("hal");
+    let mut renderer = Renderer::new(&hal).expect("renderer");
+    let mut scene = Scene3d::new();
+
+    let dim = [28u32, 40, 24];
+    let mut montage = vec![0u8; (TILE * cols * H * 4) as usize];
+
+    for (i, &techo) in tipos.iter().enumerate() {
+        let mut it = Interior::nuevo(1, "sala");
+        it.ancho = 22;
+        it.fondo = 18;
+        it.techo = techo;
+        let grid = it.build_grid(dim, Cutaway::none());
+
+        let mut vr = VoxelRenderer::new(&hal.device, &hal.queue, FMT, &grid);
+        vr.sun_dir = [0.4, 0.62, 0.5];
+        vr.atmosphere = Atmosphere {
+            sky_zenith: [96, 140, 200],
+            sky_horizon: [206, 220, 234],
+            fog_density: 0.0,
+            god_rays: 0.0,
+        };
+        let half = Vec3::new(dim[0] as f32, dim[1] as f32, dim[2] as f32) * 0.5;
+        // Mirar desde arriba y al costado → se ve la forma del techo.
+        let look = Vec3::new(it.ancho as f32 * 0.5, 8.0, it.fondo as f32 * 0.5) - half;
+        let camera = Camera3d::orbit(look, 32_f32.to_radians(), 30_f32.to_radians(), dim[0] as f32 * 1.15);
+
+        let px = render(&hal, &mut renderer, &mut scene, &mut vr, &camera);
+        // Copiar el tile a su columna del montaje.
+        let x0 = i as u32 * TILE;
+        for y in 0..H {
+            for x in 0..TILE {
+                let src = ((y * TILE + x) * 4) as usize;
+                let dst = ((y * TILE * cols + x0 + x) * 4) as usize;
+                montage[dst..dst + 4].copy_from_slice(&px[src..src + 4]);
+            }
+        }
+        eprintln!("techo {}", techo.label());
+    }
+    write_png(&montage, TILE * cols, H, "/tmp/roof.png");
+    eprintln!("escrito /tmp/roof.png — {cols} tipos de techo");
+}
+
+fn render(
+    hal: &Hal,
+    renderer: &mut Renderer,
+    scene: &mut Scene3d,
+    vr: &mut VoxelRenderer,
+    camera: &Camera3d,
+) -> Vec<u8> {
+    let inter = hal.device.create_texture(&wgpu::TextureDescriptor {
+        label: Some("inter"),
+        size: wgpu::Extent3d { width: TILE, height: H, depth_or_array_layers: 1 },
+        mip_level_count: 1,
+        sample_count: 1,
+        dimension: wgpu::TextureDimension::D2,
+        format: FMT,
+        usage: wgpu::TextureUsages::STORAGE_BINDING
+            | wgpu::TextureUsages::TEXTURE_BINDING
+            | wgpu::TextureUsages::RENDER_ATTACHMENT
+            | wgpu::TextureUsages::COPY_SRC,
+        view_formats: &[],
+    });
+    let view = inter.create_view(&wgpu::TextureViewDescriptor::default());
+    renderer
+        .render_to_view(hal, &vello::Scene::new(), &view, TILE, H, Color::from_rgba8(12, 14, 20, 255))
+        .expect("base");
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: Some("roof") });
+    scene.render(&hal.device, &hal.queue, &mut enc, &view, (TILE, H), camera, Some(vr), &[]);
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    readback(hal, &inter)
+}
+
+fn readback(hal: &Hal, target: &wgpu::Texture) -> Vec<u8> {
+    let unpadded = (TILE * 4) as usize;
+    let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize;
+    let padded = unpadded.div_ceil(align) * align;
+    let buf = hal.device.create_buffer(&wgpu::BufferDescriptor {
+        label: Some("readback"),
+        size: (padded * H as usize) as u64,
+        usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
+        mapped_at_creation: false,
+    });
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    enc.copy_texture_to_buffer(
+        wgpu::TexelCopyTextureInfo {
+            texture: target,
+            mip_level: 0,
+            origin: wgpu::Origin3d::ZERO,
+            aspect: wgpu::TextureAspect::All,
+        },
+        wgpu::TexelCopyBufferInfo {
+            buffer: &buf,
+            layout: wgpu::TexelCopyBufferLayout {
+                offset: 0,
+                bytes_per_row: Some(padded as u32),
+                rows_per_image: Some(H),
+            },
+        },
+        wgpu::Extent3d { width: TILE, height: H, depth_or_array_layers: 1 },
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let slice = buf.slice(..);
+    let (tx, rx) = std::sync::mpsc::channel();
+    slice.map_async(wgpu::MapMode::Read, move |r| {
+        let _ = tx.send(r);
+    });
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    rx.recv().unwrap().unwrap();
+    let data = slice.get_mapped_range();
+    let mut pixels = Vec::with_capacity((TILE * H * 4) as usize);
+    for row in 0..H as usize {
+        let s = row * padded;
+        pixels.extend_from_slice(&data[s..s + unpadded]);
+    }
+    drop(data);
+    buf.unmap();
+    pixels
+}
+
+fn write_png(pixels: &[u8], w: u32, h: u32, path: &str) {
+    let file = File::create(path).expect("png");
+    let mut enc = png::Encoder::new(BufWriter::new(file), w, h);
+    enc.set_color(png::ColorType::Rgba);
+    enc.set_depth(png::BitDepth::Eight);
+    let mut wtr = enc.write_header().unwrap();
+    wtr.write_image_data(pixels).unwrap();
+}
diff --git a/llimphi-voxel/examples/room_demo.rs b/llimphi-voxel/examples/room_demo.rs
new file mode 100644
index 0000000..187400e
--- /dev/null
+++ b/llimphi-voxel/examples/room_demo.rs
@@ -0,0 +1,168 @@
+//! Sala de exposición de los **muebles y objetos de casa**: los 12 modelos
+//! ([`Mueble`]) sobre un piso de baldosas, cada uno estampado con [`stamp_mueble`].
+//!
+//! `cargo run -p llimphi-voxel --example room_demo --release` → `/tmp/room.png`
+
+use std::fs::File;
+use std::io::BufWriter;
+
+use llimphi_3d::glam::Vec3;
+use llimphi_3d::{Atmosphere, Camera3d, Scene3d, VoxelGrid, VoxelRenderer};
+use llimphi_hal::{wgpu, Hal};
+use llimphi_raster::peniko::Color;
+use llimphi_raster::{vello, Renderer};
+use llimphi_voxel::{stamp_mueble, Material, Mueble};
+
+const W: u32 = 1280;
+const H: u32 = 620;
+const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
+
+fn main() {
+    let cols = 6i32;
+    let rows = 12i32;
+    let sx = 11i32; // paso en x
+    let sz = 15i32; // paso en z
+    let margin = 6i32;
+    let floor_h = 2i32;
+    let dim = [
+        (cols * sx + 2 * margin) as u32,
+        26,
+        (rows * sz + 2 * margin) as u32,
+    ];
+    let mut g = VoxelGrid::new(dim);
+
+    // Piso de baldosas (cerámica lustrosa + yeso, en damero).
+    for x in 0..dim[0] as i32 {
+        for z in 0..dim[2] as i32 {
+            let tile = ((x / 2 + z / 2) % 2) == 0;
+            let m = if tile { Material::Ceramica } else { Material::Yeso };
+            for y in 0..floor_h {
+                let c = m.color();
+                let a = VoxelGrid::shine_to_alpha(if y == floor_h - 1 { m.brillo() } else { 0.0 });
+                g.set_rgba(x as u32, y as u32, z as u32, c, a);
+            }
+        }
+    }
+
+    // Los 12 muebles en grilla.
+    for (i, m) in Mueble::ALL.iter().enumerate() {
+        let c = i as i32 % cols;
+        let r = i as i32 / cols;
+        let x = margin + c * sx + sx / 2;
+        let z = margin + r * sz + sz / 2;
+        stamp_mueble(&mut g, *m, x as u32, floor_h as u32, z as u32, 0);
+        eprintln!("{:>10} en ({x},{z})", m.label());
+    }
+
+    let hal = pollster::block_on(Hal::new(None)).expect("hal");
+    let mut renderer = Renderer::new(&hal).expect("renderer");
+    let mut vr = VoxelRenderer::new(&hal.device, &hal.queue, FMT, &g);
+    vr.sun_dir = [0.4, 0.72, 0.56];
+    vr.atmosphere = Atmosphere {
+        sky_zenith: [92, 120, 168],
+        sky_horizon: [206, 214, 226],
+        fog_density: 0.0,
+        god_rays: 0.0,
+    };
+    let camera = Camera3d::orbit(
+        Vec3::new(0.0, dim[1] as f32 * 0.02, 0.0),
+        14_f32.to_radians(),
+        40_f32.to_radians(),
+        dim[0].max(dim[2]) as f32 * 0.82,
+    );
+    let mut scene = Scene3d::new();
+    let pixels = render(&hal, &mut renderer, &mut scene, &mut vr, &camera);
+    write_png(&pixels, "/tmp/room.png");
+    eprintln!("escrito /tmp/room.png — 72 muebles: casa, ciudad, edificios y transporte");
+}
+
+fn render(
+    hal: &Hal,
+    renderer: &mut Renderer,
+    scene: &mut Scene3d,
+    vr: &mut VoxelRenderer,
+    camera: &Camera3d,
+) -> Vec<u8> {
+    let inter = hal.device.create_texture(&wgpu::TextureDescriptor {
+        label: Some("inter"),
+        size: wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+        mip_level_count: 1,
+        sample_count: 1,
+        dimension: wgpu::TextureDimension::D2,
+        format: FMT,
+        usage: wgpu::TextureUsages::STORAGE_BINDING
+            | wgpu::TextureUsages::TEXTURE_BINDING
+            | wgpu::TextureUsages::RENDER_ATTACHMENT
+            | wgpu::TextureUsages::COPY_SRC,
+        view_formats: &[],
+    });
+    let view = inter.create_view(&wgpu::TextureViewDescriptor::default());
+    renderer
+        .render_to_view(hal, &vello::Scene::new(), &view, W, H, Color::from_rgba8(0, 0, 0, 255))
+        .expect("base");
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: Some("room") });
+    scene.render(&hal.device, &hal.queue, &mut enc, &view, (W, H), camera, Some(vr), &[]);
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    readback(hal, &inter)
+}
+
+fn readback(hal: &Hal, target: &wgpu::Texture) -> Vec<u8> {
+    let unpadded = (W * 4) as usize;
+    let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize;
+    let padded = unpadded.div_ceil(align) * align;
+    let buf = hal.device.create_buffer(&wgpu::BufferDescriptor {
+        label: Some("readback"),
+        size: (padded * H as usize) as u64,
+        usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
+        mapped_at_creation: false,
+    });
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    enc.copy_texture_to_buffer(
+        wgpu::TexelCopyTextureInfo {
+            texture: target,
+            mip_level: 0,
+            origin: wgpu::Origin3d::ZERO,
+            aspect: wgpu::TextureAspect::All,
+        },
+        wgpu::TexelCopyBufferInfo {
+            buffer: &buf,
+            layout: wgpu::TexelCopyBufferLayout {
+                offset: 0,
+                bytes_per_row: Some(padded as u32),
+                rows_per_image: Some(H),
+            },
+        },
+        wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let slice = buf.slice(..);
+    let (tx, rx) = std::sync::mpsc::channel();
+    slice.map_async(wgpu::MapMode::Read, move |r| {
+        let _ = tx.send(r);
+    });
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    rx.recv().unwrap().unwrap();
+    let data = slice.get_mapped_range();
+    let mut pixels = Vec::with_capacity((W * H * 4) as usize);
+    for row in 0..H as usize {
+        let srow = row * padded;
+        pixels.extend_from_slice(&data[srow..srow + unpadded]);
+    }
+    drop(data);
+    buf.unmap();
+    pixels
+}
+
+fn write_png(pixels: &[u8], path: &str) {
+    let file = File::create(path).expect("png");
+    let mut enc = png::Encoder::new(BufWriter::new(file), W, H);
+    enc.set_color(png::ColorType::Rgba);
+    enc.set_depth(png::BitDepth::Eight);
+    let mut wtr = enc.write_header().unwrap();
+    wtr.write_image_data(pixels).unwrap();
+}
diff --git a/llimphi-voxel/examples/ser_bajo_elimon.rs b/llimphi-voxel/examples/ser_bajo_elimon.rs
new file mode 100644
index 0000000..6518875
--- /dev/null
+++ b/llimphi-voxel/examples/ser_bajo_elimon.rs
@@ -0,0 +1,405 @@
+//! **El ser, parado en el llano, BAJO las montañas de El Limón** (no flotando en ellas).
+//!
+//! Ejercita el pipeline del "ser desde foto" con las mejoras de 2026-07-18:
+//!   1. Toma una foto (retrato sintético fiel, o `pluma.png`/`arg[1]`), la **absorbe** con un
+//!      sampler de bandas (piel/pelo/ropa FIELES; el pelo de la banda superior, no derivado —
+//!      espeja `llimphi-voxel-studio::rostro::muestrear_rasgos`, que está unit-testeado allá).
+//!   2. Arma el **humanoide voxel redondeado** (`humanoide_voxel`) con esos colores — cara
+//!      abierta, ojos separados, **sin boca de pico de pato** (la zona de barba es tint plano).
+//!   3. Sintetiza un terreno estilo **El Limón/Maracay**: llano verde al sur, Cordillera de la
+//!      Costa alzándose al norte.
+//!   4. **ESTAMPA el ser DENTRO del grid del terreno** (pies sobre el suelo real) → GROUNDED,
+//!      ocluido y sombreado por el paisaje, no un espíritu flotando.
+//!   5. Rinde: ser en primer plano, montañas de fondo en perspectiva.
+//!
+//! `cargo run -p llimphi-voxel --example ser_bajo_elimon --release -- [foto.png]`
+
+use std::fs::File;
+use std::io::{BufReader, BufWriter};
+
+use llimphi_3d::glam::Vec3;
+use llimphi_3d::{Atmosphere, Camera3d, VoxelGrid, VoxelRenderer};
+use llimphi_hal::{wgpu, Hal};
+use llimphi_raster::peniko::Color;
+use llimphi_raster::{vello, Renderer};
+use llimphi_voxel::{humanoide_voxel, Colores, EstiloSer, Pose};
+
+const W: u32 = 1280;
+const H: u32 = 720;
+const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
+
+fn env_f(k: &str, d: f32) -> f32 {
+    std::env::var(k).ok().and_then(|s| s.parse().ok()).unwrap_or(d)
+}
+
+fn main() {
+    let dir = std::env::var("CLAUDE_JOB_DIR").map(|d| format!("{d}/tmp")).unwrap_or("/tmp".into());
+    let out = format!("{dir}/ser_bajo_elimon.png");
+
+    // --- 1. Foto → rasgos FIELES (piel/pelo/ropa). ---
+    let arg = std::env::args().nth(1);
+    let (rgba, w, h, alpha) = arg
+        .as_deref()
+        .and_then(load_png_rgba)
+        .unwrap_or_else(|| retrato(112, 150));
+    let (skin, hair, shirt) = muestrear(&rgba, &alpha, w, h);
+    let pants = [shirt[0] * 0.45, shirt[1] * 0.5, (shirt[2] * 0.7).min(1.0)];
+    eprintln!("rasgos FIELES → piel {:?}  pelo {:?}  ropa {:?}", u8v(skin), u8v(hair), u8v(shirt));
+
+    // --- 2. Humanoide voxel redondeado con esos colores (pelo real, sin boca de pato) ---
+    let estilo = EstiloSer::amable();
+    let col = Colores::con_pelo(skin, shirt, pants, hair);
+    let alto_ser = env_f("SER_H", 44.0) as u32;
+    let ser = humanoide_voxel(&estilo, &Pose::default(), alto_ser, col);
+    eprintln!("ser voxel: dim {:?}", ser.dim());
+
+    // --- 3. Terreno estilo El Limón: llano verde al sur, cordillera al norte ---
+    let mut escena = terreno_elimon();
+    let dim = escena.dim();
+
+    // --- 4. Plantar el ser DENTRO del grid (pies en el suelo del llano, sur) ---
+    let bx = (dim[0] as f32 * 0.5) as u32;
+    let bz = (dim[2] as f32 * 0.20) as u32; // en el llano del sur (frente)
+    let suelo = altura_suelo(&escena, bx, bz);
+    plantar(&mut escena, &ser, bx, suelo + 1, bz, &estilo);
+    eprintln!("ser plantado en ({bx},{},{bz}) sobre el llano; dim escena {dim:?}", suelo + 1);
+
+    // --- 5. Render cinematográfico: cámara baja en el llano mirando al norte (montañas) ---
+    let hal = pollster::block_on(Hal::new(None)).expect("hal");
+    let mut renderer = Renderer::new(&hal).expect("renderer");
+    let mut vr = VoxelRenderer::new(&hal.device, &hal.queue, FMT, &escena);
+    vr.bisel = 0.85;
+    vr.rugosidad_amp = 0.5; // textura del TERRENO (el ser usa su detalle por-voxel propio)
+    vr.rugosidad_freq = 1.7;
+    vr.silueta_por_voxel = env_f("SIL", 1.0) > 0.5;
+    vr.ao_amount = env_f("AO", 0.3); // baja: el ser redondeado no quiere anillos axiales
+    vr.sun_dir = normalize([0.55, 0.5, -0.35]); // sol cálido bajo, tarde tropical
+    vr.atmosphere = Atmosphere {
+        sky_zenith: [72, 120, 190],
+        sky_horizon: [214, 202, 176],
+        fog_density: env_f("FOG", 0.010),
+        god_rays: 0.4,
+    };
+
+    // Cámara: parada en el llano, un poco al sur del ser y a un costado, a la altura de los
+    // ojos, mirando al norte (+Z) → el ser en primer plano, las montañas de fondo.
+    let half = Vec3::new(dim[0] as f32, dim[1] as f32, dim[2] as f32) * 0.5;
+    let cam_x = bx as f32 + env_f("CAM_DX", 13.0);
+    let cam_z = bz as f32 - env_f("CAM_BACK", 56.0);
+    let suelo_cam = altura_suelo(&escena, cam_x as u32, cam_z.max(0.0) as u32) as f32;
+    let eye = Vec3::new(cam_x, suelo_cam + env_f("CAM_H", 25.0), cam_z) - half;
+    let cam = Camera3d::fly(eye, env_f("YAW", 0.0).to_radians(), env_f("PITCH", -1.0).to_radians());
+
+    let px = render(&hal, &mut renderer, &mut vr, &cam);
+    write_png(&px, &out);
+    eprintln!("✓ toma escrita: {out}");
+}
+
+fn u8v(c: [f32; 3]) -> [u8; 3] {
+    [(c[0] * 255.0) as u8, (c[1] * 255.0) as u8, (c[2] * 255.0) as u8]
+}
+
+/// **Absorbe** la foto en 3 colores fieles (espeja `rostro::muestrear_rasgos`, unit-testeado
+/// en el studio): **pelo** de la banda superior (top 18%), **piel** de la franja de la cara
+/// (22–52%, píxeles cálidos), **ropa** de la mitad inferior. Usa el bbox de `alpha>128`.
+fn muestrear(rgba: &[u8], alpha: &[u8], w: u32, h: u32) -> ([f32; 3], [f32; 3], [f32; 3]) {
+    let (w, h) = (w as usize, h as usize);
+    let (mut x0, mut y0, mut x1, mut y1) = (w, h, 0usize, 0usize);
+    let mut hay = false;
+    for y in 0..h {
+        for x in 0..w {
+            if alpha[y * w + x] > 128 {
+                hay = true;
+                x0 = x0.min(x); y0 = y0.min(y); x1 = x1.max(x); y1 = y1.max(y);
+            }
+        }
+    }
+    if !hay {
+        x0 = w / 4; x1 = 3 * w / 4; y0 = h / 4; y1 = 3 * h / 4;
+    }
+    let bh = (y1 - y0).max(1);
+    let bw = (x1 - x0).max(1);
+    let cx0 = x0 + bw * 20 / 100;
+    let cx1 = x0 + bw * 80 / 100;
+    let media = |ya: usize, yb: usize, xa: usize, xb: usize, calido: bool| -> [f32; 3] {
+        let (mut r, mut g, mut b, mut n) = (0u64, 0u64, 0u64, 0u64);
+        for y in ya..yb.min(h) {
+            for x in xa..=xb.min(w - 1) {
+                if alpha[y * w + x] <= 128 { continue; }
+                let o = (y * w + x) * 4;
+                let (rr, gg, bb) = (rgba[o] as i32, rgba[o + 1] as i32, rgba[o + 2] as i32);
+                if calido && !(rr >= gg && gg >= bb && (rr - bb) > 6 && (rr + gg + bb) > 140) { continue; }
+                r += rr as u64; g += gg as u64; b += bb as u64; n += 1;
+            }
+        }
+        if n == 0 { return [0.6, 0.5, 0.4]; }
+        [r as f32 / n as f32 / 255.0, g as f32 / n as f32 / 255.0, b as f32 / n as f32 / 255.0]
+    };
+    let hair = media(y0, y0 + bh * 18 / 100, cx0, cx1, false);
+    let mut skin = media(y0 + bh * 22 / 100, y0 + bh * 52 / 100, cx0, cx1, true);
+    if skin[0] + skin[1] + skin[2] < 0.3 {
+        skin = media(y0 + bh * 22 / 100, y0 + bh * 52 / 100, cx0, cx1, false);
+    }
+    let shirt = media(y0 + bh * 50 / 100, y1 + 1, x0, x1, false);
+    (skin, hair, shirt)
+}
+
+/// Retrato sintético RGBA + alpha con **pelo, piel y ropa bien distintos** (para ver la
+/// fidelidad): pelo castaño, piel cálida, remera verde.
+fn retrato(w: u32, h: u32) -> (Vec<u8>, u32, u32, Vec<u8>) {
+    let mut rgba = vec![0u8; (w * h * 4) as usize];
+    let mut alpha = vec![0u8; (w * h) as usize];
+    let cx = w as f32 / 2.0;
+    for y in 0..h {
+        for x in 0..w {
+            let i = (y * w + x) as usize;
+            let o = i * 4;
+            let ny = y as f32 / h as f32;
+            let head = {
+                let dx = (x as f32 - cx) / (w as f32 * 0.28);
+                let dy = (y as f32 - h as f32 * 0.32) / (h as f32 * 0.28);
+                dx * dx + dy * dy < 1.0
+            };
+            let torso = ny > 0.58 && ((x as f32 - cx).abs() < w as f32 * 0.34);
+            if !head && !torso {
+                continue;
+            }
+            alpha[i] = 255;
+            let c = if head && ny < 0.16 {
+                [96, 64, 40] // pelo castaño (banda superior)
+            } else if head {
+                [222, 176, 142] // piel cálida
+            } else {
+                [64, 140, 92] // remera verde
+            };
+            rgba[o] = c[0];
+            rgba[o + 1] = c[1];
+            rgba[o + 2] = c[2];
+            rgba[o + 3] = 255;
+        }
+    }
+    (rgba, w, h, alpha)
+}
+
+/// Terreno estilo El Limón/Maracay: llano verde al sur (z chico), Cordillera de la Costa
+/// alzándose al norte (z grande). Color por altura (valle→bosque→roca) + grano.
+fn terreno_elimon() -> VoxelGrid {
+    let dim = [220u32, 96, 210u32];
+    let mut g = VoxelGrid::new(dim);
+    let base = 3u32;
+    let maxh = 82.0f32;
+    for gz in 0..dim[2] {
+        for gx in 0..dim[0] {
+            let t = gz as f32 / dim[2] as f32; // 0 sur (llano) .. 1 norte (montañas)
+            let rise = smoothstep(0.30, 1.0, t);
+            let fx = gx as f32;
+            let fz = gz as f32;
+            let ridges = 0.55 * (fx * 0.05).sin().abs() + 0.45 * (fx * 0.021 + fz * 0.03).sin().abs();
+            let peaks = fbm(fx * 0.03, fz * 0.03);
+            let relief = (0.45 * ridges + 0.55 * peaks).clamp(0.0, 1.0);
+            let top = base + (rise * relief * maxh) as u32;
+            for y in 0..=top.min(dim[1] - 1) {
+                let th = y as f32 / (base as f32 + maxh);
+                g.set(gx, y, gz, color_altura(th, gx, y, gz));
+            }
+        }
+    }
+    g.reset_dirty();
+    g
+}
+
+fn altura_suelo(g: &VoxelGrid, x: u32, z: u32) -> u32 {
+    let [_, dy, _] = g.dim();
+    for y in (0..dy).rev() {
+        if g.is_solid(x as i32, y as i32, z as i32) {
+            return y;
+        }
+    }
+    0
+}
+
+/// Estampa el ser DENTRO del grid destino con su detalle sub-voxel propio (pies en `(x,y,z)`,
+/// base centrada en XZ). GROUNDED: comparte el grid del terreno → se ocluye/sombrea con él.
+fn plantar(dst: &mut VoxelGrid, ser: &VoxelGrid, x: u32, y: u32, z: u32, estilo: &EstiloSer) {
+    let [bw, bh, bd] = ser.dim();
+    let (cx, cz) = (bw as i32 / 2, bd as i32 / 2);
+    let (rug, bisel) = estilo.detalle();
+    dst.set_detail_brush(rug, bisel);
+    let dim = dst.dim();
+    for by in 0..bh {
+        for bz in 0..bd {
+            for bx in 0..bw {
+                if let Some(c) = ser.get(bx, by, bz) {
+                    if c[3] <= 127 {
+                        continue;
+                    }
+                    let px = x as i32 + (bx as i32 - cx);
+                    let py = y as i32 + by as i32;
+                    let pz = z as i32 + (bz as i32 - cz);
+                    if px >= 0 && py >= 0 && pz >= 0 && (px as u32) < dim[0] && (py as u32) < dim[1] && (pz as u32) < dim[2] {
+                        dst.set(px as u32, py as u32, pz as u32, [c[0], c[1], c[2]]);
+                    }
+                }
+            }
+        }
+    }
+    dst.clear_detail_brush();
+}
+
+fn color_altura(t: f32, x: u32, y: u32, z: u32) -> [u8; 3] {
+    let base = if t < 0.10 {
+        [92, 138, 74]
+    } else if t < 0.42 {
+        mezcla([92, 138, 74], [62, 106, 58], (t - 0.10) / 0.32)
+    } else if t < 0.72 {
+        mezcla([62, 106, 58], [112, 102, 86], (t - 0.42) / 0.30)
+    } else {
+        mezcla([112, 102, 86], [150, 146, 140], (t - 0.72) / 0.28)
+    };
+    let j = (hash(x, y, z) - 0.5) * 2.0 * 0.10;
+    let ch = |c: u8| ((c as f32) * (1.0 + j)).clamp(0.0, 255.0) as u8;
+    [ch(base[0]), ch(base[1]), ch(base[2])]
+}
+
+fn smoothstep(a: f32, b: f32, x: f32) -> f32 {
+    let t = ((x - a) / (b - a)).clamp(0.0, 1.0);
+    t * t * (3.0 - 2.0 * t)
+}
+
+fn fbm(x: f32, z: f32) -> f32 {
+    let mut a = 0.5;
+    let (mut fx, mut fz) = (x, z);
+    let mut sum = 0.0;
+    for _ in 0..4 {
+        sum += a * vnoise(fx, fz);
+        fx *= 2.0;
+        fz *= 2.0;
+        a *= 0.5;
+    }
+    sum.clamp(0.0, 1.0)
+}
+
+fn vnoise(x: f32, z: f32) -> f32 {
+    let (x0, z0) = (x.floor(), z.floor());
+    let (tx, tz) = (x - x0, z - z0);
+    let hh = |i: f32, j: f32| {
+        let mut n = (i as i32).wrapping_mul(374761393).wrapping_add((j as i32).wrapping_mul(668265263)) as u32;
+        n = (n ^ (n >> 13)).wrapping_mul(1274126177);
+        (n & 0xffff) as f32 / 65535.0
+    };
+    let sm = |t: f32| t * t * (3.0 - 2.0 * t);
+    let (ux, uz) = (sm(tx), sm(tz));
+    let a = hh(x0, z0);
+    let b = hh(x0 + 1.0, z0);
+    let c = hh(x0, z0 + 1.0);
+    let d = hh(x0 + 1.0, z0 + 1.0);
+    let ab = a + (b - a) * ux;
+    let cd = c + (d - c) * ux;
+    ab + (cd - ab) * uz
+}
+
+fn mezcla(a: [u8; 3], b: [u8; 3], t: f32) -> [u8; 3] {
+    let m = |i: usize| (a[i] as f32 + (b[i] as f32 - a[i] as f32) * t.clamp(0.0, 1.0)) as u8;
+    [m(0), m(1), m(2)]
+}
+
+fn hash(x: u32, y: u32, z: u32) -> f32 {
+    let mut h = x.wrapping_mul(374761393).wrapping_add(y.wrapping_mul(668265263)).wrapping_add(z.wrapping_mul(2246822519));
+    h ^= h >> 13;
+    h = h.wrapping_mul(1274126177);
+    (h & 0xffff) as f32 / 65535.0
+}
+
+fn normalize(v: [f32; 3]) -> [f32; 3] {
+    let l = (v[0] * v[0] + v[1] * v[1] + v[2] * v[2]).sqrt().max(1e-6);
+    [v[0] / l, v[1] / l, v[2] / l]
+}
+
+/// Decodifica un PNG a (rgba, w, h, alpha). `None` si no existe/ilegible.
+fn load_png_rgba(path: &str) -> Option<(Vec<u8>, u32, u32, Vec<u8>)> {
+    let file = File::open(path).ok()?;
+    let dec = png::Decoder::new(BufReader::new(file));
+    let mut reader = dec.read_info().ok()?;
+    let mut buf = vec![0u8; reader.output_buffer_size()?];
+    let info = reader.next_frame(&mut buf).ok()?;
+    let (w, h) = (info.width, info.height);
+    let rgba: Vec<u8> = match info.color_type {
+        png::ColorType::Rgba => buf[..info.buffer_size()].to_vec(),
+        png::ColorType::Rgb => buf[..info.buffer_size()].chunks(3).flat_map(|c| [c[0], c[1], c[2], 255]).collect(),
+        png::ColorType::Grayscale => buf[..info.buffer_size()].iter().flat_map(|&g| [g, g, g, 255]).collect(),
+        _ => return None,
+    };
+    let alpha: Vec<u8> = rgba.chunks_exact(4).map(|p| p[3]).collect();
+    Some((rgba, w, h, alpha))
+}
+
+fn render(hal: &Hal, renderer: &mut Renderer, vr: &mut VoxelRenderer, cam: &Camera3d) -> Vec<u8> {
+    let bg = [190, 200, 214];
+    let inter = hal.device.create_texture(&wgpu::TextureDescriptor {
+        label: Some("inter"),
+        size: wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+        mip_level_count: 1,
+        sample_count: 1,
+        dimension: wgpu::TextureDimension::D2,
+        format: FMT,
+        usage: wgpu::TextureUsages::STORAGE_BINDING
+            | wgpu::TextureUsages::TEXTURE_BINDING
+            | wgpu::TextureUsages::RENDER_ATTACHMENT
+            | wgpu::TextureUsages::COPY_SRC,
+        view_formats: &[],
+    });
+    let view = inter.create_view(&wgpu::TextureViewDescriptor::default());
+    let base = vello::Scene::new();
+    renderer
+        .render_to_view(hal, &base, &view, W, H, Color::from_rgba8(bg[0], bg[1], bg[2], 255))
+        .expect("base");
+    let mut enc = hal.device.create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    vr.render(&hal.device, &hal.queue, &mut enc, &view, (W, H), cam);
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    readback(hal, &inter)
+}
+
+fn readback(hal: &Hal, target: &wgpu::Texture) -> Vec<u8> {
+    let unpadded = (W * 4) as usize;
+    let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize;
+    let padded = unpadded.div_ceil(align) * align;
+    let buf = hal.device.create_buffer(&wgpu::BufferDescriptor {
+        label: None,
+        size: (padded * H as usize) as u64,
+        usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
+        mapped_at_creation: false,
+    });
+    let mut enc = hal.device.create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    enc.copy_texture_to_buffer(
+        wgpu::TexelCopyTextureInfo { texture: target, mip_level: 0, origin: wgpu::Origin3d::ZERO, aspect: wgpu::TextureAspect::All },
+        wgpu::TexelCopyBufferInfo { buffer: &buf, layout: wgpu::TexelCopyBufferLayout { offset: 0, bytes_per_row: Some(padded as u32), rows_per_image: Some(H) } },
+        wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let slice = buf.slice(..);
+    let (tx, rx) = std::sync::mpsc::channel();
+    slice.map_async(wgpu::MapMode::Read, move |r| {
+        let _ = tx.send(r);
+    });
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    rx.recv().unwrap().unwrap();
+    let data = slice.get_mapped_range();
+    let mut px = Vec::with_capacity((W * H * 4) as usize);
+    for row in 0..H as usize {
+        let s = row * padded;
+        px.extend_from_slice(&data[s..s + unpadded]);
+    }
+    drop(data);
+    buf.unmap();
+    px
+}
+
+fn write_png(px: &[u8], path: &str) {
+    let f = std::fs::File::create(path).expect("png");
+    let mut enc = png::Encoder::new(BufWriter::new(f), W, H);
+    enc.set_color(png::ColorType::Rgba);
+    enc.set_depth(png::BitDepth::Eight);
+    let mut w = enc.write_header().unwrap();
+    w.write_image_data(px).unwrap();
+}
diff --git a/llimphi-voxel/examples/ser_estilizado.rs b/llimphi-voxel/examples/ser_estilizado.rs
new file mode 100644
index 0000000..d9103ba
--- /dev/null
+++ b/llimphi-voxel/examples/ser_estilizado.rs
@@ -0,0 +1,190 @@
+//! Certificación visual del **humanoide voxel redondeado** ([`humanoide_voxel`]): el ser
+//! estilizado que aprovecha el bisel/isosuperficie sub-voxel para un look vinyl-toy/chibi
+//! CON carácter (no cajas Minecraft, no busto fotográfico = no valle). Rinde varios
+//! arquetipos/edades/gestos a PNG y certifica por stats de cobertura.
+//!
+//! Diseño anclado en literatura (Kindchenschema, canon de cabezas, shape language) — ver
+//! el módulo `humano`. Es el caso que amerita render (Regla 8): un visual NUEVO que no se
+//! certifica de otra forma.
+//!
+//! `cargo run -p llimphi-voxel --example ser_estilizado --release`
+
+use std::fs::File;
+use std::io::BufWriter;
+
+use llimphi_3d::glam::Vec3;
+use llimphi_3d::{Camera3d, VoxelGrid, VoxelRenderer};
+use llimphi_hal::{wgpu, Hal};
+use llimphi_raster::peniko::Color;
+use llimphi_raster::{vello, Renderer};
+use llimphi_voxel::{humanoide_voxel, Clip, Colores, EstiloSer, Pose};
+
+const W: u32 = 640;
+const H: u32 = 720;
+const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
+const BG: [u8; 3] = [22, 26, 36];
+
+fn env_f(k: &str, d: f32) -> f32 {
+    std::env::var(k).ok().and_then(|s| s.parse().ok()).unwrap_or(d)
+}
+
+fn main() {
+    let hal = pollster::block_on(Hal::new(None)).expect("hal");
+    let mut renderer = Renderer::new(&hal).expect("renderer");
+    let dir = std::env::var("CLAUDE_JOB_DIR").map(|d| format!("{d}/tmp")).unwrap_or("/tmp".into());
+
+    // Piel/ropa de muestra (lo que la foto regularía).
+    let col = Colores::nuevos([0.90, 0.72, 0.58], [0.22, 0.60, 0.72], [0.20, 0.24, 0.36]);
+
+    // Batería: (etiqueta, estilo, pose). Idle expresivo, gestos, arquetipos, edades.
+    let idle = Pose::default();
+    let saludo = Clip::Wave.pose(1.2);
+    let festejo = Clip::Cheer.pose(1.0);
+    let casos: [(&str, EstiloSer, Pose); 6] = [
+        ("chibi_amable", EstiloSer::amable(), idle),
+        ("chibi_saludo", EstiloSer::amable(), saludo),
+        ("chibi_festejo", EstiloSer::amable(), festejo),
+        ("robusto", EstiloSer::robusto(), idle),
+        ("agil", EstiloSer::agil(), saludo),
+        ("bebe", EstiloSer::por_edad(llimphi_voxel::Age::Baby), idle),
+    ];
+
+    let altura = env_f("ALT", 72.0) as u32; // igual que el preview del studio (nivel Seres)
+    println!("ser_estilizado — humanoide voxel redondeado (bisel + silueta por voxel) ALT={altura}");
+    for (nombre, estilo, pose) in &casos {
+        let g = humanoide_voxel(estilo, pose, altura, col);
+        let dim = g.dim();
+        let solids = count_solids(&g);
+        let px = render_ser(&hal, &mut renderer, &g, dim);
+        let cov = coverage(&px);
+        let out = format!("{dir}/ser_{nombre}.png");
+        write_png(&px, &out);
+        println!(
+            "  {nombre:14} cabezas={:.1} dim={dim:?} voxels={solids} → {cov} px cubiertos → {out}",
+            estilo.cabezas
+        );
+        assert!(solids > 1500, "{nombre}: el ser tiene volumen");
+        assert!(cov > 4000, "{nombre}: se renderizó ({cov} px)");
+    }
+    println!("✓ certificado: seres redondeados con gramática sub-voxel (sin cajas, sin valle).");
+}
+
+fn count_solids(g: &VoxelGrid) -> usize {
+    let [w, h, d] = g.dim();
+    let mut n = 0;
+    for x in 0..w {
+        for y in 0..h {
+            for z in 0..d {
+                if g.is_solid(x as i32, y as i32, z as i32) {
+                    n += 1;
+                }
+            }
+        }
+    }
+    n
+}
+
+/// Renderiza el ser de frente-3/4, con bisel global alto (enciende el trazado de
+/// isosuperficie) + silueta por voxel (el bisel del ser redondea el CONTORNO) + rugosidad
+/// leve (grano de piel). Cámara 3/4 (anti-twinning: el 3/4 evita el aplanado frontal).
+fn render_ser(hal: &Hal, renderer: &mut Renderer, grid: &VoxelGrid, dim: [u32; 3]) -> Vec<u8> {
+    let mut vr = VoxelRenderer::new(&hal.device, &hal.queue, FMT, grid);
+    vr.bisel = env_f("BIS", 0.9); // global: enciende trace_smooth (la silueta por voxel lo necesita)
+    // Mismos valores que el studio (nivel Seres): rugosidad GLOBAL 0 — el ser sólo lleva su grano
+    // horneado por voxel (0.06 de `EstiloSer::detalle`). Con RUG global alto se veía como escamas.
+    vr.rugosidad_amp = env_f("RUG", 0.0);
+    vr.rugosidad_freq = 1.7;
+    vr.silueta_por_voxel = env_f("SIL", 1.0) > 0.5;
+    vr.ao_amount = env_f("AO", 0.28); // seres redondeados: poca AO (la axial anilla la esfera)
+    vr.sun_dir = normalize([0.4, 0.6, 0.7]);
+
+    let alto = dim[1] as f32;
+    // Mirar al centro del cuerpo (~55% de la altura: torso/cara, no los pies).
+    let look = Vec3::new(0.0, alto * 0.05, 0.0);
+    let camera = Camera3d::orbit(look, 28_f32.to_radians(), 10_f32.to_radians(), alto * 2.0);
+
+    let inter = hal.device.create_texture(&wgpu::TextureDescriptor {
+        label: Some("inter"),
+        size: wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+        mip_level_count: 1,
+        sample_count: 1,
+        dimension: wgpu::TextureDimension::D2,
+        format: FMT,
+        usage: wgpu::TextureUsages::STORAGE_BINDING
+            | wgpu::TextureUsages::TEXTURE_BINDING
+            | wgpu::TextureUsages::RENDER_ATTACHMENT
+            | wgpu::TextureUsages::COPY_SRC,
+        view_formats: &[],
+    });
+    let view = inter.create_view(&wgpu::TextureViewDescriptor::default());
+    let base = vello::Scene::new();
+    renderer
+        .render_to_view(hal, &base, &view, W, H, Color::from_rgba8(BG[0], BG[1], BG[2], 255))
+        .expect("base");
+    let mut enc = hal.device.create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    vr.render(&hal.device, &hal.queue, &mut enc, &view, (W, H), &camera);
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    readback(hal, &inter)
+}
+
+fn normalize(v: [f32; 3]) -> [f32; 3] {
+    let l = (v[0] * v[0] + v[1] * v[1] + v[2] * v[2]).sqrt().max(1e-6);
+    [v[0] / l, v[1] / l, v[2] / l]
+}
+
+fn coverage(px: &[u8]) -> usize {
+    (0..(W * H) as usize)
+        .filter(|&i| {
+            let o = i * 4;
+            (px[o] as i32 - BG[0] as i32).abs()
+                + (px[o + 1] as i32 - BG[1] as i32).abs()
+                + (px[o + 2] as i32 - BG[2] as i32).abs()
+                > 12
+        })
+        .count()
+}
+
+fn readback(hal: &Hal, target: &wgpu::Texture) -> Vec<u8> {
+    let unpadded = (W * 4) as usize;
+    let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize;
+    let padded = unpadded.div_ceil(align) * align;
+    let buf = hal.device.create_buffer(&wgpu::BufferDescriptor {
+        label: Some("readback"),
+        size: (padded * H as usize) as u64,
+        usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
+        mapped_at_creation: false,
+    });
+    let mut enc = hal.device.create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    enc.copy_texture_to_buffer(
+        wgpu::TexelCopyTextureInfo { texture: target, mip_level: 0, origin: wgpu::Origin3d::ZERO, aspect: wgpu::TextureAspect::All },
+        wgpu::TexelCopyBufferInfo { buffer: &buf, layout: wgpu::TexelCopyBufferLayout { offset: 0, bytes_per_row: Some(padded as u32), rows_per_image: Some(H) } },
+        wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let slice = buf.slice(..);
+    let (tx, rx) = std::sync::mpsc::channel();
+    slice.map_async(wgpu::MapMode::Read, move |r| {
+        let _ = tx.send(r);
+    });
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    rx.recv().unwrap().unwrap();
+    let data = slice.get_mapped_range();
+    let mut pixels = Vec::with_capacity((W * H * 4) as usize);
+    for row in 0..H as usize {
+        let s = row * padded;
+        pixels.extend_from_slice(&data[s..s + unpadded]);
+    }
+    drop(data);
+    buf.unmap();
+    pixels
+}
+
+fn write_png(pixels: &[u8], path: &str) {
+    let file = File::create(path).expect("png");
+    let mut enc = png::Encoder::new(BufWriter::new(file), W, H);
+    enc.set_color(png::ColorType::Rgba);
+    enc.set_depth(png::BitDepth::Eight);
+    let mut w = enc.write_header().unwrap();
+    w.write_image_data(pixels).unwrap();
+}
diff --git a/llimphi-voxel/examples/shine_demo.rs b/llimphi-voxel/examples/shine_demo.rs
new file mode 100644
index 0000000..12b75bc
--- /dev/null
+++ b/llimphi-voxel/examples/shine_demo.rs
@@ -0,0 +1,187 @@
+//! Prueba del **brillo especular + glaseado** por voxel: una fila de esferas, cada
+//! una de un mineral con su factor de brillo (`Mineral::brillo`) codificado en el
+//! alpha del voxel. El ray-march devuelve un reflejo dependiente de la vista — algo
+//! que la luz plana de Minecraft no hace: el carbón queda mate, el diamante destella.
+//!
+//! `cargo run -p llimphi-voxel --example shine_demo --release` → `/tmp/shine.png`
+
+use std::fs::File;
+use std::io::BufWriter;
+
+use llimphi_3d::glam::Vec3;
+use llimphi_3d::{Atmosphere, Camera3d, Scene3d, VoxelGrid, VoxelRenderer};
+use llimphi_hal::{wgpu, Hal};
+use llimphi_raster::peniko::Color;
+use llimphi_raster::{vello, Renderer};
+use llimphi_voxel::Mineral;
+
+const W: u32 = 1280;
+const H: u32 = 520;
+const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
+
+fn main() {
+    // Gradiente de brillo: carbón mate → diamante espejado.
+    let fila = [
+        Mineral::Carbon,
+        Mineral::Sal,
+        Mineral::Hierro,
+        Mineral::Cobre,
+        Mineral::Oro,
+        Mineral::Cuarzo,
+        Mineral::Amatista,
+        Mineral::Diamante,
+    ];
+    let r: i32 = 5;
+    let gap: i32 = 4;
+    let step = 2 * r + gap;
+    let margin = r + 3;
+    let dim = [
+        (fila.len() as i32 * step + 2 * margin) as u32,
+        (2 * r + 14) as u32,
+        (2 * r + 10) as u32,
+    ];
+    let ground_h: i32 = 3;
+    let mut grid = VoxelGrid::new(dim);
+
+    // Suelo mate gris.
+    for x in 0..dim[0] {
+        for z in 0..dim[2] {
+            for y in 0..ground_h as u32 {
+                grid.set(x, y, z, [96, 96, 100]);
+            }
+        }
+    }
+
+    // Esferas.
+    let cz = dim[2] as i32 / 2;
+    let cy = ground_h + r;
+    for (i, min) in fila.iter().enumerate() {
+        let cx = margin + r + i as i32 * step;
+        let col = min.color();
+        let alpha = VoxelGrid::shine_to_alpha(min.brillo());
+        for dx in -r..=r {
+            for dy in -r..=r {
+                for dz in -r..=r {
+                    if dx * dx + dy * dy + dz * dz <= r * r {
+                        grid.set_rgba((cx + dx) as u32, (cy + dy) as u32, (cz + dz) as u32, col, alpha);
+                    }
+                }
+            }
+        }
+        eprintln!("{:>10}: brillo {:.2} → alpha {}", min.label(), min.brillo(), alpha);
+    }
+
+    let hal = pollster::block_on(Hal::new(None)).expect("hal");
+    let mut renderer = Renderer::new(&hal).expect("renderer");
+    let mut vr = VoxelRenderer::new(&hal.device, &hal.queue, FMT, &grid);
+    vr.sun_dir = [0.28, 0.72, 0.62]; // sol alto-frontal → el reflejo cae hacia la cámara
+    vr.atmosphere = Atmosphere {
+        sky_zenith: [70, 96, 150],
+        sky_horizon: [178, 196, 214],
+        fog_density: 0.0,
+        god_rays: 0.0,
+    };
+
+    let camera = Camera3d::orbit(
+        Vec3::new(0.0, r as f32 * 0.4, 0.0),
+        8_f32.to_radians(),
+        18_f32.to_radians(),
+        dim[0] as f32 * 0.72,
+    );
+
+    let mut scene = Scene3d::new();
+    let pixels = render(&hal, &mut renderer, &mut scene, &mut vr, &camera);
+    write_png(&pixels, "/tmp/shine.png");
+    eprintln!("escrito /tmp/shine.png — brillo especular por mineral");
+}
+
+fn render(
+    hal: &Hal,
+    renderer: &mut Renderer,
+    scene: &mut Scene3d,
+    vr: &mut VoxelRenderer,
+    camera: &Camera3d,
+) -> Vec<u8> {
+    let inter = hal.device.create_texture(&wgpu::TextureDescriptor {
+        label: Some("inter"),
+        size: wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+        mip_level_count: 1,
+        sample_count: 1,
+        dimension: wgpu::TextureDimension::D2,
+        format: FMT,
+        usage: wgpu::TextureUsages::STORAGE_BINDING
+            | wgpu::TextureUsages::TEXTURE_BINDING
+            | wgpu::TextureUsages::RENDER_ATTACHMENT
+            | wgpu::TextureUsages::COPY_SRC,
+        view_formats: &[],
+    });
+    let view = inter.create_view(&wgpu::TextureViewDescriptor::default());
+    renderer
+        .render_to_view(hal, &vello::Scene::new(), &view, W, H, Color::from_rgba8(0, 0, 0, 255))
+        .expect("base");
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: Some("shine") });
+    scene.render(&hal.device, &hal.queue, &mut enc, &view, (W, H), camera, Some(vr), &[]);
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    readback(hal, &inter)
+}
+
+fn readback(hal: &Hal, target: &wgpu::Texture) -> Vec<u8> {
+    let unpadded = (W * 4) as usize;
+    let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize;
+    let padded = unpadded.div_ceil(align) * align;
+    let buf = hal.device.create_buffer(&wgpu::BufferDescriptor {
+        label: Some("readback"),
+        size: (padded * H as usize) as u64,
+        usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
+        mapped_at_creation: false,
+    });
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    enc.copy_texture_to_buffer(
+        wgpu::TexelCopyTextureInfo {
+            texture: target,
+            mip_level: 0,
+            origin: wgpu::Origin3d::ZERO,
+            aspect: wgpu::TextureAspect::All,
+        },
+        wgpu::TexelCopyBufferInfo {
+            buffer: &buf,
+            layout: wgpu::TexelCopyBufferLayout {
+                offset: 0,
+                bytes_per_row: Some(padded as u32),
+                rows_per_image: Some(H),
+            },
+        },
+        wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let slice = buf.slice(..);
+    let (tx, rx) = std::sync::mpsc::channel();
+    slice.map_async(wgpu::MapMode::Read, move |r| {
+        let _ = tx.send(r);
+    });
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    rx.recv().unwrap().unwrap();
+    let data = slice.get_mapped_range();
+    let mut pixels = Vec::with_capacity((W * H * 4) as usize);
+    for row in 0..H as usize {
+        let s = row * padded;
+        pixels.extend_from_slice(&data[s..s + unpadded]);
+    }
+    drop(data);
+    buf.unmap();
+    pixels
+}
+
+fn write_png(pixels: &[u8], path: &str) {
+    let file = File::create(path).expect("png");
+    let mut enc = png::Encoder::new(BufWriter::new(file), W, H);
+    enc.set_color(png::ColorType::Rgba);
+    enc.set_depth(png::BitDepth::Eight);
+    let mut wtr = enc.write_header().unwrap();
+    wtr.write_image_data(pixels).unwrap();
+}
diff --git a/llimphi-voxel/examples/terrain_flythrough.rs b/llimphi-voxel/examples/terrain_flythrough.rs
index 3a5a6b7..5da111f 100644
--- a/llimphi-voxel/examples/terrain_flythrough.rs
+++ b/llimphi-voxel/examples/terrain_flythrough.rs
@@ -1,6 +1,6 @@
 //! Demo headless de M6 — **vuelo por dentro del mundo** (cámara libre).
 //!
-//! Complementa a `terrain_demo` (órbita desde afuera): acá la [`Camera3d::fly`]
+//! Complementa a `terrain_demo` (órbita desde afuera): aquí la [`Camera3d::fly`]
 //! recorre el paisaje procedural a baja altura, siguiendo el relieve
 //! ([`VoxelGrid::height_at`]) para no meterse dentro de la roca, con la misma
 //! atmósfera (cielo + niebla). Es el plano "showreel" del motor y ejercita el
diff --git a/llimphi-voxel/examples/terrain_lod.rs b/llimphi-voxel/examples/terrain_lod.rs
index 444739c..cd4f900 100644
--- a/llimphi-voxel/examples/terrain_lod.rs
+++ b/llimphi-voxel/examples/terrain_lod.rs
@@ -131,7 +131,7 @@ fn main() {
 }
 
 /// Copia los campos de un [`LodParams`] (no deriva `Clone` a propósito por el
-/// `sun_dir`; acá lo replicamos para variar sólo la niebla).
+/// `sun_dir`; aquí lo replicamos para variar sólo la niebla).
 fn clone_params(p: &LodParams) -> LodParams {
     LodParams {
         center_xz: p.center_xz,
diff --git a/llimphi-voxel/examples/terrain_streaming.rs b/llimphi-voxel/examples/terrain_streaming.rs
index 2c1d60f..4c49723 100644
--- a/llimphi-voxel/examples/terrain_streaming.rs
+++ b/llimphi-voxel/examples/terrain_streaming.rs
@@ -168,7 +168,7 @@ fn main() {
         target: Vec3::new(0.0, tower_mid, 0.0),
         ..Camera3d::default()
     };
-    // Se reconstruye el renderer desde `s.grid()` en cada toma: acá probamos la
+    // Se reconstruye el renderer desde `s.grid()` en cada toma: aquí probamos la
     // PERSISTENCIA (la edición sobrevive el regen), no el upload incremental (ya
     // verificado arriba). Subir la torre por scroll caería en bricks "bulk" que el
     // toroidal no re-sube (asume terreno determinista; la edición rompe eso).
diff --git a/llimphi-voxel/examples/transport_demo.rs b/llimphi-voxel/examples/transport_demo.rs
new file mode 100644
index 0000000..a1d8898
--- /dev/null
+++ b/llimphi-voxel/examples/transport_demo.rs
@@ -0,0 +1,160 @@
+//! Sala de exposición de los **muebles y objetos de casa**: los 12 modelos
+//! ([`Mueble`]) sobre un piso de baldosas, cada uno estampado con [`stamp_mueble`].
+//!
+//! `cargo run -p llimphi-voxel --example room_demo --release` → `/tmp/room.png`
+
+use std::fs::File;
+use std::io::BufWriter;
+
+use llimphi_3d::glam::Vec3;
+use llimphi_3d::{Atmosphere, Camera3d, Scene3d, VoxelGrid, VoxelRenderer};
+use llimphi_hal::{wgpu, Hal};
+use llimphi_raster::peniko::Color;
+use llimphi_raster::{vello, Renderer};
+use llimphi_voxel::{stamp_mueble, Mueble};
+
+const W: u32 = 1280;
+const H: u32 = 620;
+const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
+
+fn main() {
+    let fila = [
+        Mueble::Avion, Mueble::Helicoptero, Mueble::Colectivo, Mueble::Camion,
+        Mueble::Camioneta, Mueble::Taxi, Mueble::Ambulancia, Mueble::Tren,
+        Mueble::Vagon, Mueble::Barco, Mueble::Moto, Mueble::Bici,
+    ];
+    let sx = 13i32;
+    let margin = 8i32;
+    let dim = [
+        (fila.len() as i32 * sx + 2 * margin) as u32,
+        20,
+        40,
+    ];
+    let mut g = VoxelGrid::new(dim);
+    let floor_h = 2i32;
+    for x in 0..dim[0] as i32 {
+        for z in 0..dim[2] as i32 {
+            g.set(x as u32, 0, z as u32, [70, 72, 78]);
+            g.set(x as u32, 1, z as u32, [80, 82, 90]);
+        }
+    }
+    // Fila de los 12 tipos de transporte.
+    for (i, m) in fila.iter().enumerate() {
+        let x = margin + i as i32 * sx + sx / 2;
+        stamp_mueble(&mut g, *m, x as u32, floor_h as u32, 28, 0);
+    }
+    // Flota de autos: el mismo Mueble en distintas posiciones → colores variados.
+    for i in 0..fila.len() as i32 {
+        let x = margin + i * sx + sx / 2;
+        stamp_mueble(&mut g, Mueble::Auto, x as u32, floor_h as u32, 12, 1);
+    }
+
+    let hal = pollster::block_on(Hal::new(None)).expect("hal");
+    let mut renderer = Renderer::new(&hal).expect("renderer");
+    let mut vr = VoxelRenderer::new(&hal.device, &hal.queue, FMT, &g);
+    vr.sun_dir = [0.4, 0.66, 0.55];
+    vr.atmosphere = Atmosphere {
+        sky_zenith: [92, 130, 190],
+        sky_horizon: [206, 218, 232],
+        fog_density: 0.0,
+        god_rays: 0.0,
+    };
+    let half = Vec3::new(dim[0] as f32, dim[1] as f32, dim[2] as f32) * 0.5;
+    let look = Vec3::new(dim[0] as f32 * 0.5, 3.0, dim[2] as f32 * 0.5) - half;
+    let camera = Camera3d::orbit(look, 10_f32.to_radians(), 22_f32.to_radians(), dim[0] as f32 * 0.78);
+    let mut scene = Scene3d::new();
+    let pixels = render(&hal, &mut renderer, &mut scene, &mut vr, &camera);
+    write_png(&pixels, "/tmp/transport.png");
+    eprintln!("escrito /tmp/transport.png — 12 transportes + flota de autos (colores por posición)");
+}
+
+fn render(
+    hal: &Hal,
+    renderer: &mut Renderer,
+    scene: &mut Scene3d,
+    vr: &mut VoxelRenderer,
+    camera: &Camera3d,
+) -> Vec<u8> {
+    let inter = hal.device.create_texture(&wgpu::TextureDescriptor {
+        label: Some("inter"),
+        size: wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+        mip_level_count: 1,
+        sample_count: 1,
+        dimension: wgpu::TextureDimension::D2,
+        format: FMT,
+        usage: wgpu::TextureUsages::STORAGE_BINDING
+            | wgpu::TextureUsages::TEXTURE_BINDING
+            | wgpu::TextureUsages::RENDER_ATTACHMENT
+            | wgpu::TextureUsages::COPY_SRC,
+        view_formats: &[],
+    });
+    let view = inter.create_view(&wgpu::TextureViewDescriptor::default());
+    renderer
+        .render_to_view(hal, &vello::Scene::new(), &view, W, H, Color::from_rgba8(0, 0, 0, 255))
+        .expect("base");
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: Some("room") });
+    scene.render(&hal.device, &hal.queue, &mut enc, &view, (W, H), camera, Some(vr), &[]);
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    readback(hal, &inter)
+}
+
+fn readback(hal: &Hal, target: &wgpu::Texture) -> Vec<u8> {
+    let unpadded = (W * 4) as usize;
+    let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize;
+    let padded = unpadded.div_ceil(align) * align;
+    let buf = hal.device.create_buffer(&wgpu::BufferDescriptor {
+        label: Some("readback"),
+        size: (padded * H as usize) as u64,
+        usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
+        mapped_at_creation: false,
+    });
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    enc.copy_texture_to_buffer(
+        wgpu::TexelCopyTextureInfo {
+            texture: target,
+            mip_level: 0,
+            origin: wgpu::Origin3d::ZERO,
+            aspect: wgpu::TextureAspect::All,
+        },
+        wgpu::TexelCopyBufferInfo {
+            buffer: &buf,
+            layout: wgpu::TexelCopyBufferLayout {
+                offset: 0,
+                bytes_per_row: Some(padded as u32),
+                rows_per_image: Some(H),
+            },
+        },
+        wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let slice = buf.slice(..);
+    let (tx, rx) = std::sync::mpsc::channel();
+    slice.map_async(wgpu::MapMode::Read, move |r| {
+        let _ = tx.send(r);
+    });
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    rx.recv().unwrap().unwrap();
+    let data = slice.get_mapped_range();
+    let mut pixels = Vec::with_capacity((W * H * 4) as usize);
+    for row in 0..H as usize {
+        let srow = row * padded;
+        pixels.extend_from_slice(&data[srow..srow + unpadded]);
+    }
+    drop(data);
+    buf.unmap();
+    pixels
+}
+
+fn write_png(pixels: &[u8], path: &str) {
+    let file = File::create(path).expect("png");
+    let mut enc = png::Encoder::new(BufWriter::new(file), W, H);
+    enc.set_color(png::ColorType::Rgba);
+    enc.set_depth(png::BitDepth::Eight);
+    let mut wtr = enc.write_header().unwrap();
+    wtr.write_image_data(pixels).unwrap();
+}
diff --git a/llimphi-voxel/examples/window_demo.rs b/llimphi-voxel/examples/window_demo.rs
new file mode 100644
index 0000000..83287a7
--- /dev/null
+++ b/llimphi-voxel/examples/window_demo.rs
@@ -0,0 +1,188 @@
+//! Prueba de **sombras suaves** de una luz de interior: un piso con un par de
+//! objetos, iluminado por la lámpara como fuente de área (`PointLight.radius`) →
+//! penumbra que se abre con la distancia. `point_shadows` activo.
+//!
+//! `cargo run -p llimphi-voxel --example lit_demo --release` → `/tmp/window.png`
+
+use std::fs::File;
+use std::io::BufWriter;
+
+use llimphi_3d::glam::Vec3;
+use llimphi_3d::{Atmosphere, Camera3d, PointLight, Scene3d, VoxelGrid, VoxelRenderer};
+use llimphi_hal::{wgpu, Hal};
+use llimphi_raster::peniko::Color;
+use llimphi_raster::{vello, Renderer};
+use llimphi_voxel::{stamp_mueble, Material, Mueble};
+
+const W: u32 = 1100;
+const H: u32 = 640;
+const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
+
+fn main() {
+    let dim = [56u32, 44, 52];
+    let mut g = VoxelGrid::new(dim);
+    let (x0, x1, z0, z1) = (10i32, 44, 10, 42);
+    let floor_h = 3i32;
+    let wall_top = floor_h + 16;
+
+    let wall = Material::Hormigon.color();
+    let wa = VoxelGrid::shine_to_alpha(0.0);
+    let glass = Material::Vidrio.color();
+    let ga = VoxelGrid::shine_to_alpha(Material::Vidrio.brillo());
+    let put = |g: &mut VoxelGrid, x: i32, y: i32, z: i32, c: [u8; 3], a: u8| {
+        if x >= 0 && y >= 0 && z >= 0 {
+            g.set_rgba(x as u32, y as u32, z as u32, c, a);
+        }
+    };
+
+    // Piso.
+    for x in x0..=x1 {
+        for z in z0..=z1 {
+            for y in 0..floor_h {
+                put(&mut g, x, y, z, Material::Ceramica.color(), VoxelGrid::shine_to_alpha(0.0));
+            }
+        }
+    }
+    // Muros (menos la pared frontal z=z1 → cutaway para la cámara) + techo.
+    for y in floor_h..wall_top {
+        for x in x0..=x1 {
+            put(&mut g, x, y, z0, wall, wa); // pared del fondo
+        }
+        for z in z0..=z1 {
+            put(&mut g, x0, y, z, wall, wa);
+            put(&mut g, x1, y, z, wall, wa);
+        }
+    }
+    for x in x0..=x1 {
+        for z in z0..=z1 {
+            put(&mut g, x, wall_top, z, wall, wa); // techo
+        }
+    }
+    // Ventana de vidrio en la pared del fondo (z0), centrada, a media altura.
+    let wy0 = floor_h + 5;
+    for x in 19..=35 {
+        for y in wy0..(wy0 + 7) {
+            put(&mut g, x, y, z0, glass, ga);
+        }
+    }
+    // Un par de objetos para que se vea el charco de luz y su sombra.
+    stamp_mueble(&mut g, Mueble::Silla, 27, floor_h as u32, 24, 0);
+    stamp_mueble(&mut g, Mueble::Ficus, 34, floor_h as u32, 22, 0);
+
+    let hal = pollster::block_on(Hal::new(None)).expect("hal");
+    let mut renderer = Renderer::new(&hal).expect("renderer");
+    let mut vr = VoxelRenderer::new(&hal.device, &hal.queue, FMT, &g);
+    // Sol BAJO detrás del fondo (-z) → el haz entra por la ventana al piso.
+    vr.sun_dir = [0.1, 0.62, -0.62];
+    vr.atmosphere = Atmosphere {
+        sky_zenith: [8, 10, 18],   // interior casi a oscuras → el haz destaca
+        sky_horizon: [70, 80, 110],
+        fog_density: 0.0,
+        god_rays: 0.0,
+    };
+    vr.point_shadows = true;
+    vr.lights = vec![]; // sólo luz del día
+    eprintln!("cuarto cerrado con una ventana; sol bajo por el fondo");
+
+    let camera = Camera3d::orbit(
+        Vec3::new(0.0, 0.0, 2.0),
+        4_f32.to_radians(),
+        4_f32.to_radians(),
+        dim[0] as f32 * 0.8,
+    );
+    let mut scene = Scene3d::new();
+    let pixels = render(&hal, &mut renderer, &mut scene, &mut vr, &camera);
+    write_png(&pixels, "/tmp/window.png");
+    eprintln!("escrito /tmp/window.png");
+}
+
+fn render(
+    hal: &Hal,
+    renderer: &mut Renderer,
+    scene: &mut Scene3d,
+    vr: &mut VoxelRenderer,
+    camera: &Camera3d,
+) -> Vec<u8> {
+    let inter = hal.device.create_texture(&wgpu::TextureDescriptor {
+        label: Some("inter"),
+        size: wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+        mip_level_count: 1,
+        sample_count: 1,
+        dimension: wgpu::TextureDimension::D2,
+        format: FMT,
+        usage: wgpu::TextureUsages::STORAGE_BINDING
+            | wgpu::TextureUsages::TEXTURE_BINDING
+            | wgpu::TextureUsages::RENDER_ATTACHMENT
+            | wgpu::TextureUsages::COPY_SRC,
+        view_formats: &[],
+    });
+    let view = inter.create_view(&wgpu::TextureViewDescriptor::default());
+    renderer
+        .render_to_view(hal, &vello::Scene::new(), &view, W, H, Color::from_rgba8(0, 0, 0, 255))
+        .expect("base");
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: Some("lit") });
+    scene.render(&hal.device, &hal.queue, &mut enc, &view, (W, H), camera, Some(vr), &[]);
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    readback(hal, &inter)
+}
+
+fn readback(hal: &Hal, target: &wgpu::Texture) -> Vec<u8> {
+    let unpadded = (W * 4) as usize;
+    let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize;
+    let padded = unpadded.div_ceil(align) * align;
+    let buf = hal.device.create_buffer(&wgpu::BufferDescriptor {
+        label: Some("readback"),
+        size: (padded * H as usize) as u64,
+        usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
+        mapped_at_creation: false,
+    });
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    enc.copy_texture_to_buffer(
+        wgpu::TexelCopyTextureInfo {
+            texture: target,
+            mip_level: 0,
+            origin: wgpu::Origin3d::ZERO,
+            aspect: wgpu::TextureAspect::All,
+        },
+        wgpu::TexelCopyBufferInfo {
+            buffer: &buf,
+            layout: wgpu::TexelCopyBufferLayout {
+                offset: 0,
+                bytes_per_row: Some(padded as u32),
+                rows_per_image: Some(H),
+            },
+        },
+        wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let slice = buf.slice(..);
+    let (tx, rx) = std::sync::mpsc::channel();
+    slice.map_async(wgpu::MapMode::Read, move |r| {
+        let _ = tx.send(r);
+    });
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    rx.recv().unwrap().unwrap();
+    let data = slice.get_mapped_range();
+    let mut pixels = Vec::with_capacity((W * H * 4) as usize);
+    for row in 0..H as usize {
+        let srow = row * padded;
+        pixels.extend_from_slice(&data[srow..srow + unpadded]);
+    }
+    drop(data);
+    buf.unmap();
+    pixels
+}
+
+fn write_png(pixels: &[u8], path: &str) {
+    let file = File::create(path).expect("png");
+    let mut enc = png::Encoder::new(BufWriter::new(file), W, H);
+    enc.set_color(png::ColorType::Rgba);
+    enc.set_depth(png::BitDepth::Eight);
+    let mut wtr = enc.write_header().unwrap();
+    wtr.write_image_data(pixels).unwrap();
+}
diff --git a/llimphi-voxel/src/actor.rs b/llimphi-voxel/src/actor.rs
index a5ef5ee..41e7dac 100644
--- a/llimphi-voxel/src/actor.rs
+++ b/llimphi-voxel/src/actor.rs
@@ -90,6 +90,34 @@ pub enum Clip {
 }
 
 impl Clip {
+    /// Todos los clips, en orden de catálogo (para ciclar en un editor).
+    pub const ALL: [Clip; 6] = [
+        Clip::Idle,
+        Clip::Walk,
+        Clip::Run,
+        Clip::Wave,
+        Clip::Point,
+        Clip::Cheer,
+    ];
+
+    /// Nombre legible (español).
+    pub fn label(self) -> &'static str {
+        match self {
+            Clip::Idle => "quieto",
+            Clip::Walk => "caminar",
+            Clip::Run => "correr",
+            Clip::Wave => "saludar",
+            Clip::Point => "señalar",
+            Clip::Cheer => "festejar",
+        }
+    }
+
+    /// El clip siguiente (cicla).
+    pub fn next(self) -> Clip {
+        let i = Clip::ALL.iter().position(|&c| c == self).unwrap_or(0);
+        Clip::ALL[(i + 1) % Clip::ALL.len()]
+    }
+
     /// `true` si el clip es un **gesto** (no locomoción) — un momento expresivo que
     /// merece un acento musical. Lo usa el director para derivar los "beats del guion".
     pub fn is_emote(self) -> bool {
diff --git a/llimphi-voxel/src/apertura.rs b/llimphi-voxel/src/apertura.rs
new file mode 100644
index 0000000..38fa99b
--- /dev/null
+++ b/llimphi-voxel/src/apertura.rs
@@ -0,0 +1,310 @@
+// =============================================================================
+//  llimphi-voxel :: apertura — la atmósfera y la caída de una escena
+// -----------------------------------------------------------------------------
+//  Las herramientas de autoría de la APERTURA de una escena:
+//
+//    * [`Atmosfera`] — la BRUMA (densidad + color) y el FUNDIDO DESDE NEGRO con
+//      que abre la escena. "Mucha bruma", "entra lento desde el negro".
+//    * [`Caida`] — la cámara PURA (sin cuerpo) que cae del cielo hacia una
+//      columna del mundo, mirando abajo y enderezándose al acercarse: "ve el
+//      mundo acercarse hasta caer". Reusa `Camera3d`/`cam_lerp` de `camera_rig`
+//      (la caída de `BirthSequence`, pero SIN sujeto).
+//
+//  Ambas son deterministas por tiempo (reproducibles cuadro a cuadro), serializan
+//  (viajan en el archivo de la escena) y se editan desde el estudio. El primer
+//  uso: la escena del NACIMIENTO del protagonista.
+// =============================================================================
+
+use llimphi_3d::glam::Vec3;
+use llimphi_3d::Camera3d;
+use serde::{Deserialize, Serialize};
+
+use crate::camera_rig::cam_lerp;
+
+/// Suavizado Hermite `3t²−2t³` (deriva nula en los extremos).
+fn smoothstep(x: f32) -> f32 {
+    let x = x.clamp(0.0, 1.0);
+    x * x * (3.0 - 2.0 * x)
+}
+
+/// La ATMÓSFERA de una escena: cuánta bruma hay, de qué color, y cuánto dura el
+/// fundido desde el negro al abrir. Autorable desde el estudio.
+#[derive(Debug, Clone, Copy, PartialEq, Serialize, Deserialize)]
+pub struct Atmosfera {
+    /// Densidad de la bruma: un COEFICIENTE (`0` = aire limpio; ~1 = niebla de
+    /// tarde; ~2.5 = todo se lo traga la bruma). El render lo divide por el ancho
+    /// del mundo → `fog_density`.
+    pub bruma: f32,
+    /// Color de la bruma / horizonte hacia el que funden los lejos (RGB `0..1`).
+    pub color: [f32; 3],
+    /// Segundos de fundido DESDE NEGRO al abrir la escena (`0` = sin fundido).
+    pub desde_negro: f32,
+}
+
+impl Atmosfera {
+    /// El aire del nacimiento: bruma espesa gris-perla que abre lento desde el
+    /// negro.
+    pub fn nacimiento() -> Self {
+        Self { bruma: 2.5, color: [0.66, 0.65, 0.70], desde_negro: 3.0 }
+    }
+
+    /// Aire despejado, sin fundido — el neutro para escenas normales.
+    pub fn despejada() -> Self {
+        Self { bruma: 0.3, color: [0.62, 0.70, 0.85], desde_negro: 0.0 }
+    }
+
+    /// Cuánto NEGRO cubre la escena en `t`: `1` = negro total (t≈0), `0` = ya
+    /// visible (tras `desde_negro`). Un fundido suave. Sin fundido ⟹ siempre 0.
+    pub fn negro_en(&self, t: f32) -> f32 {
+        if self.desde_negro <= 0.0 {
+            return 0.0;
+        }
+        1.0 - smoothstep(t / self.desde_negro)
+    }
+
+    /// El COLOR de la niebla/horizonte en `t` (RGB u8): de NEGRO (t≈0, mientras
+    /// dura `desde_negro`) al `color` de la bruma. Es lo que hace "empezar en
+    /// negro y entrar a la bruma": como la cámara arranca alto entre niebla
+    /// densa, todo se funde a este color — negro al principio, gris-perla después.
+    /// Puro y determinista (el render sólo lo aplica).
+    pub fn color_niebla_en(&self, t: f32) -> [u8; 3] {
+        let visible = 1.0 - self.negro_en(t);
+        let tinte = |c: f32| (c * visible * 255.0).round().clamp(0.0, 255.0) as u8;
+        [tinte(self.color[0]), tinte(self.color[1]), tinte(self.color[2])]
+    }
+}
+
+/// La CAÍDA de apertura: la cámara pura cae desde `altura` hacia la columna
+/// `aterrizaje` del mundo, mirando abajo y enderezándose al acercarse. Sin
+/// cuerpo — es la cámara la que cae. Determinista por tiempo.
+#[derive(Debug, Clone, Copy, PartialEq, Serialize, Deserialize)]
+pub struct Caida {
+    /// Altura de partida, en el cielo entre la bruma.
+    pub altura: f32,
+    /// Duración de la caída (seg).
+    pub duracion: f32,
+    /// Columna `(x, z)` del mundo hacia la que cae y aterriza.
+    pub aterrizaje: [f32; 2],
+    /// Altura del suelo en la columna de aterrizaje; el ojo termina [`Self::OJO`]
+    /// por encima.
+    pub suelo: f32,
+}
+
+impl Caida {
+    /// Altura del ojo al aterrizar (a la altura de una mirada humana).
+    pub const OJO: f32 = 1.6;
+
+    /// Una caída larga y lenta desde muy alto sobre una columna del mundo — el
+    /// nacimiento.
+    pub fn nacimiento(aterrizaje: [f32; 2], suelo: f32) -> Self {
+        Self { altura: 90.0, duracion: 7.0, aterrizaje, suelo }
+    }
+
+    /// La cámara al inicio: muy alto, mirando casi recto hacia abajo a la columna.
+    fn cielo(&self) -> Camera3d {
+        let [ax, az] = self.aterrizaje;
+        let eye = Vec3::new(ax, self.altura, az);
+        // Objetivo muy por debajo (mira abajo), con un pelín de +Z para no
+        // degenerar el vector "up" (mirar recto abajo lo dejaría indefinido).
+        let target = Vec3::new(ax, self.suelo, az + 0.01);
+        Camera3d { eye, target, ..Camera3d::default() }
+    }
+
+    /// La cámara al aterrizar: a ras del suelo, mirando al horizonte (+Z).
+    fn piso(&self) -> Camera3d {
+        let [ax, az] = self.aterrizaje;
+        let eye = Vec3::new(ax, self.suelo + Self::OJO, az);
+        let target = Vec3::new(ax, self.suelo + Self::OJO, az + 10.0);
+        Camera3d { eye, target, ..Camera3d::default() }
+    }
+
+    /// La cámara en el instante `t` de la caída: de "alto mirando abajo" a "a ras
+    /// mirando al frente", con desaceleración (el `smoothstep` de `cam_lerp`).
+    /// Coordenadas ABSOLUTAS del mundo (usa `aterrizaje`/`suelo`).
+    pub fn camara(&self, t: f32) -> Camera3d {
+        let u = (t / self.duracion.max(1e-3)).clamp(0.0, 1.0);
+        cam_lerp(&self.cielo(), &self.piso(), u)
+    }
+
+    /// Igual que [`camara`](Self::camara) pero anclada a un `centro` dado (el
+    /// punto de aterrizaje **en el frame del render**, que está centrado en el
+    /// origen). Reusa `altura`/`duracion` como offsets relativos; ignora
+    /// `aterrizaje`/`suelo` (que son coords absolutas). Es la que consume el
+    /// preview, donde la geometría vive desplazada `-half`.
+    pub fn camara_desde(&self, centro: Vec3, t: f32) -> Camera3d {
+        let cielo = Camera3d {
+            eye: centro + Vec3::new(0.0, self.altura, 0.0),
+            target: centro + Vec3::new(0.0, 0.0, 0.01), // mira abajo, al centro
+            ..Camera3d::default()
+        };
+        let piso = Camera3d {
+            eye: centro + Vec3::new(0.0, Self::OJO, 0.0),
+            target: centro + Vec3::new(0.0, Self::OJO, 10.0), // al frente (+Z)
+            ..Camera3d::default()
+        };
+        let u = (t / self.duracion.max(1e-3)).clamp(0.0, 1.0);
+        cam_lerp(&cielo, &piso, u)
+    }
+
+    /// ¿Ya terminó de caer en `t`?
+    pub fn aterrizo(&self, t: f32) -> bool {
+        t >= self.duracion
+    }
+}
+
+impl crate::studio::Project {
+    /// El proyecto de la escena del NACIMIENTO: un desierto vacío (sin
+    /// vegetación, sin agua, pocas montañas), envuelto en un mundo, y la escena
+    /// de la cámara PURA que cae desde el negro entre mucha bruma hasta aterrizar
+    /// —todavía sin cuerpo—. El primer artefacto autorable de la colaboración.
+    pub fn nacimiento() -> crate::studio::Project {
+        use crate::studio::{world_dim, MaterialDef, Mundo, Project, SceneSpec, PREVIEW_DIM_XZ};
+        use crate::worldgen::{Bioma, Material};
+
+        let mut p = Project { next_id: 1, ..Default::default() };
+
+        // Materiales mínimos: arena (suelo) y roca (acantilado). Nada más.
+        let arena = p.alloc_id();
+        p.materiales.push(MaterialDef::from_builtin(arena, Material::Sand));
+        let roca = p.alloc_id();
+        p.materiales.push(MaterialDef::from_builtin(roca, Material::Rock));
+
+        // Bioma "vacío puro": desierto sin vegetación, sin agua, pocas montañas.
+        let desierto = p.alloc_id();
+        p.biomas.push(Bioma {
+            id: desierto,
+            name: "vacío".into(),
+            base: 0.30,
+            dune: 0.06,
+            relief: 0.30,     // relieve suave
+            mountains: 0.06,  // "no tantas montañas"
+            water_level: 0.0, // sin agua
+            rivers: 0.0,      // sin ríos
+            peak_at: 1.0,     // sin picos nevados
+            ground: arena,
+            cliff: roca,
+            peak: None,
+            objetos: vec![], // sin vegetación ni objetos
+            minerales: vec![], // el vacío no tiene minerales
+            densidad_urbana: 0.4,
+            casas: Vec::new(),
+            fauna: vec![],
+            seres: vec![],   // todavía no hay cuerpo
+        });
+
+        // El mundo que lo envuelve.
+        let seed = 20_260_702;
+        let mundo = p.alloc_id();
+        p.mundos.push(Mundo { id: mundo, name: "el vacío".into(), seed, biomas: vec![desierto], mapa: None });
+
+        // La caída aterriza en el centro del mundo; el suelo sale del terreno real.
+        let dim = world_dim(PREVIEW_DIM_XZ);
+        let cx = dim[0] as f32 * 0.5;
+        let cz = dim[2] as f32 * 0.5;
+        let suelo = crate::terrain::column_height(cx as i32, cz as i32, dim, seed) as f32;
+
+        let caida = Caida::nacimiento([cx, cz], suelo);
+        let atmosfera = Atmosfera::nacimiento();
+
+        // La escena: cámara PURA (sin actores), la caída + un respiro final.
+        let escena_id = p.alloc_id();
+        p.escenas.push(SceneSpec {
+            id: escena_id,
+            name: "el nacimiento".into(),
+            mundo,
+            duration: caida.duracion + 1.5,
+            actors: vec![],  // no hay cuerpo: es la cámara la que cae
+            shots: vec![],
+            handheld: 0.25, // un pulso leve: la cámara respira al caer, no es trípode
+            atmosfera: Some(atmosfera),
+            caida: Some(caida),
+            sucesos: Vec::new(),
+        });
+
+        p
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn el_fundido_va_de_negro_a_visible() {
+        let a = Atmosfera::nacimiento();
+        assert_eq!(a.negro_en(0.0), 1.0, "arranca en negro total");
+        assert_eq!(a.negro_en(a.desde_negro), 0.0, "al final ya se ve");
+        // Monótono decreciente.
+        let mut prev = a.negro_en(0.0);
+        for i in 1..=20 {
+            let t = a.desde_negro * i as f32 / 20.0;
+            let n = a.negro_en(t);
+            assert!(n <= prev + 1e-6, "el negro sólo se disipa");
+            prev = n;
+        }
+    }
+
+    #[test]
+    fn el_aire_despejado_no_funde() {
+        let a = Atmosfera::despejada();
+        assert_eq!(a.negro_en(0.0), 0.0);
+        assert!(a.bruma < Atmosfera::nacimiento().bruma, "despejada trae menos bruma");
+    }
+
+    #[test]
+    fn la_niebla_va_de_negro_al_color() {
+        let a = Atmosfera::nacimiento();
+        assert_eq!(a.color_niebla_en(0.0), [0, 0, 0], "arranca negro puro");
+        let fin = a.color_niebla_en(a.desde_negro);
+        // Al final = el color de la bruma en u8 (gris-perla), no negro.
+        assert!(fin.iter().all(|&c| c > 100), "termina en la bruma clara: {fin:?}");
+    }
+
+    #[test]
+    fn camara_desde_ancla_la_caida_a_un_centro() {
+        let c = Caida::nacimiento([0.0, 0.0], 0.0);
+        let centro = Vec3::new(5.0, 2.0, -3.0);
+        let alto = c.camara_desde(centro, 0.0);
+        let bajo = c.camara_desde(centro, c.duracion);
+        // Arranca `altura` sobre el centro; termina `OJO` sobre el centro.
+        assert!((alto.eye - (centro + Vec3::new(0.0, c.altura, 0.0))).length() < 1e-3);
+        assert!((bajo.eye - (centro + Vec3::new(0.0, Caida::OJO, 0.0))).length() < 1e-3);
+        assert!(alto.eye.y > bajo.eye.y, "desciende");
+    }
+
+    #[test]
+    fn la_caida_desciende_del_cielo_al_suelo() {
+        let c = Caida::nacimiento([64.0, 64.0], 12.0);
+        let alto = c.camara(0.0);
+        let bajo = c.camara(c.duracion);
+        assert!((alto.eye.y - c.altura).abs() < 1e-3, "arranca en la altura del cielo");
+        assert!((bajo.eye.y - (c.suelo + Caida::OJO)).abs() < 1e-3, "termina a ras del suelo");
+        assert!(alto.eye.y > bajo.eye.y, "cae: baja de altura");
+    }
+
+    #[test]
+    fn arranca_mirando_abajo_y_termina_mirando_al_frente() {
+        let c = Caida::nacimiento([64.0, 64.0], 12.0);
+        let alto = c.camara(0.0);
+        // Al inicio el objetivo está MUY por debajo del ojo → mira hacia abajo.
+        assert!(alto.target.y < alto.eye.y - 10.0, "mira abajo al caer");
+        let bajo = c.camara(c.duracion);
+        // Al final mira al frente (+Z), casi a la misma altura del ojo.
+        assert!(bajo.target.z > bajo.eye.z + 1.0, "termina mirando al frente");
+        assert!((bajo.target.y - bajo.eye.y).abs() < 1e-3, "mirada nivelada al horizonte");
+    }
+
+    #[test]
+    fn el_descenso_es_monotono() {
+        let c = Caida::nacimiento([64.0, 64.0], 12.0);
+        let mut prev = c.camara(0.0).eye.y;
+        for i in 1..=40 {
+            let t = c.duracion * i as f32 / 40.0;
+            let y = c.camara(t).eye.y;
+            assert!(y <= prev + 1e-4, "el ojo sólo desciende");
+            prev = y;
+        }
+        assert!(c.aterrizo(c.duracion));
+        assert!(!c.aterrizo(c.duracion * 0.5));
+    }
+}
diff --git a/llimphi-voxel/src/bicho.rs b/llimphi-voxel/src/bicho.rs
new file mode 100644
index 0000000..90f32ba
--- /dev/null
+++ b/llimphi-voxel/src/bicho.rs
@@ -0,0 +1,831 @@
+//! **Seres del bioma (fauna procedural)**: un catálogo de modelitos voxel de
+//! animales (vaca, oveja, ciervo, zorro, oso, caballo…) que **pueblan el mundo
+//! por semilla**, como la flora y las casas. A diferencia de un [`Mueble`](crate::Mueble)
+//! (prop de interior, colocado a mano), un [`Bicho`] lo **esparce el bioma**: el
+//! campo `fauna` del [`Bioma`](crate::Bioma) dice qué animales y con qué densidad,
+//! y [`generate_window`](crate::Bioma::generate_window) los siembra parados sobre
+//! el terreno, orientados al azar.
+//!
+//! Los animales usan **color RGB directo** (no [`Material`](crate::worldgen::Material)):
+//! el rosa del cerdo o el naranja del zorro no viven en la paleta de terreno. Son
+//! mates (sin brillo). Se orientan con `facing` (0=+Z, 1=+X, 2=−Z, 3=−X).
+
+use serde::{Deserialize, Serialize};
+
+use llimphi_3d::VoxelGrid;
+
+/// Catálogo de seres/animales que pueblan un bioma.
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, Serialize, Deserialize)]
+pub enum Bicho {
+    /// Vaca: cuerpo blanco con manchas negras, cabeza y cuernos.
+    Vaca,
+    /// Oveja: cuerpo lanudo blanco, cara oscura.
+    Oveja,
+    /// Cerdo: cuerpo rosado, hocico y colita.
+    Cerdo,
+    /// Gallina: cuerpo blanco chico, cresta roja y pico.
+    Gallina,
+    /// Ciervo: cuerpo marrón, patas largas y astas.
+    Ciervo,
+    /// Conejo: cuerpo chico con orejas largas.
+    Conejo,
+    /// Zorro: cuerpo naranja, pecho blanco y cola tupida.
+    Zorro,
+    /// Lobo: cuerpo gris alargado, orejas y cola.
+    Lobo,
+    /// Oso: cuerpo marrón voluminoso, cabeza redonda.
+    Oso,
+    /// Caballo: cuerpo marrón alto, cuello, crin y cola.
+    Caballo,
+    /// Pájaro: cuerpo diminuto con alas y pico (posado).
+    Pajaro,
+    /// Pez: cuerpo con aleta caudal (para el agua/orilla).
+    Pez,
+    /// Tortuga: caparazón verde abovedado, cabeza y patas.
+    Tortuga,
+    /// Rana: cuerpo verde agazapado, ojos saltones.
+    Rana,
+    /// Serpiente: cuerpo largo y bajo en zigzag, con cabeza.
+    Serpiente,
+    /// Mariposa: cuerpecito con cuatro alas coloridas (revolotea bajo).
+    Mariposa,
+    // --- Granja / pradera ---
+    /// Pato: cuerpo blanco chico, pico naranja (orilla/pradera).
+    Pato,
+    /// Cabra: cuerpo claro con cuernitos (montaña/granja).
+    Cabra,
+    /// Burro: cuerpo gris con orejas largas (granja).
+    Burro,
+    // --- Bosque ---
+    /// Ardilla: cuerpito con cola tupida enroscada (bosque).
+    Ardilla,
+    /// Búho: cuerpo compacto con ojos grandes, posado (bosque).
+    Buho,
+    /// Erizo: lomo de púas oscuras, cara clara (bosque).
+    Erizo,
+    // --- Desierto ---
+    /// Camello: cuerpo arena con joroba y cuello (desierto).
+    Camello,
+    /// Escorpión: cuerpo bajo con pinzas y cola en alto (desierto).
+    Escorpion,
+    /// Lagarto: cuerpo verde alargado y bajo (desierto/selva).
+    Lagarto,
+    // --- Nieve / agua fría ---
+    /// Pingüino: cuerpo negro con panza blanca, pico naranja (nieve).
+    Pinguino,
+    /// Foca: cuerpo gris tendido con aletas (nieve/agua).
+    Foca,
+    // --- Selva / sabana ---
+    /// Mono: cuerpo marrón con cola larga (selva).
+    Mono,
+    /// Loro: cuerpo verde con pecho rojo y pico (selva).
+    Loro,
+    /// Tigre: cuerpo naranja con rayas negras (selva).
+    Tigre,
+    /// Elefante: cuerpo gris grande con trompa y orejas (sabana).
+    Elefante,
+    /// Cocodrilo: cuerpo verde largo y bajo con fauces (selva/agua).
+    Cocodrilo,
+}
+
+impl Bicho {
+    pub const ALL: [Bicho; 32] = [
+        Bicho::Vaca,
+        Bicho::Oveja,
+        Bicho::Cerdo,
+        Bicho::Gallina,
+        Bicho::Ciervo,
+        Bicho::Conejo,
+        Bicho::Zorro,
+        Bicho::Lobo,
+        Bicho::Oso,
+        Bicho::Caballo,
+        Bicho::Pajaro,
+        Bicho::Pez,
+        Bicho::Tortuga,
+        Bicho::Rana,
+        Bicho::Serpiente,
+        Bicho::Mariposa,
+        Bicho::Pato,
+        Bicho::Cabra,
+        Bicho::Burro,
+        Bicho::Ardilla,
+        Bicho::Buho,
+        Bicho::Erizo,
+        Bicho::Camello,
+        Bicho::Escorpion,
+        Bicho::Lagarto,
+        Bicho::Pinguino,
+        Bicho::Foca,
+        Bicho::Mono,
+        Bicho::Loro,
+        Bicho::Tigre,
+        Bicho::Elefante,
+        Bicho::Cocodrilo,
+    ];
+
+    pub fn label(self) -> &'static str {
+        match self {
+            Bicho::Vaca => "vaca",
+            Bicho::Oveja => "oveja",
+            Bicho::Cerdo => "cerdo",
+            Bicho::Gallina => "gallina",
+            Bicho::Ciervo => "ciervo",
+            Bicho::Conejo => "conejo",
+            Bicho::Zorro => "zorro",
+            Bicho::Lobo => "lobo",
+            Bicho::Oso => "oso",
+            Bicho::Caballo => "caballo",
+            Bicho::Pajaro => "pájaro",
+            Bicho::Pez => "pez",
+            Bicho::Tortuga => "tortuga",
+            Bicho::Rana => "rana",
+            Bicho::Serpiente => "serpiente",
+            Bicho::Mariposa => "mariposa",
+            Bicho::Pato => "pato",
+            Bicho::Cabra => "cabra",
+            Bicho::Burro => "burro",
+            Bicho::Ardilla => "ardilla",
+            Bicho::Buho => "búho",
+            Bicho::Erizo => "erizo",
+            Bicho::Camello => "camello",
+            Bicho::Escorpion => "escorpión",
+            Bicho::Lagarto => "lagarto",
+            Bicho::Pinguino => "pingüino",
+            Bicho::Foca => "foca",
+            Bicho::Mono => "mono",
+            Bicho::Loro => "loro",
+            Bicho::Tigre => "tigre",
+            Bicho::Elefante => "elefante",
+            Bicho::Cocodrilo => "cocodrilo",
+        }
+    }
+
+    pub fn next(self) -> Bicho {
+        let i = Bicho::ALL.iter().position(|&b| b == self).unwrap_or(0);
+        Bicho::ALL[(i + 1) % Bicho::ALL.len()]
+    }
+}
+
+/// **Uso de un ser en un bioma**: qué animal y con qué densidad `[0,1]` aparece
+/// (una candidata por parcela de la grilla de fauna; el bioma lo esparce por
+/// semilla → una fauna procedural, como la flora y las casas).
+#[derive(Debug, Clone, Copy, Serialize, Deserialize)]
+pub struct BichoUso {
+    pub bicho: Bicho,
+    pub densidad: f32,
+}
+
+// Paleta cruda de fauna (colores que la paleta de terreno no tiene).
+const MARRON: [u8; 3] = [120, 84, 50];
+const MARRON_OSC: [u8; 3] = [86, 58, 34];
+const BLANCO: [u8; 3] = [230, 228, 222];
+const NEGRO: [u8; 3] = [42, 42, 46];
+const ROSA: [u8; 3] = [224, 152, 152];
+const NARANJA: [u8; 3] = [206, 108, 46];
+const GRIS: [u8; 3] = [132, 132, 138];
+const VERDE: [u8; 3] = [96, 156, 74];
+const VERDE_OSC: [u8; 3] = [64, 116, 56];
+const ROJO: [u8; 3] = [206, 72, 60];
+const AMARILLO: [u8; 3] = [224, 192, 92];
+const AZUL: [u8; 3] = [72, 116, 186];
+const TAN: [u8; 3] = [204, 172, 120];
+const MARRON_CLR: [u8; 3] = [158, 118, 76];
+const GRIS_OSC: [u8; 3] = [92, 94, 100];
+
+/// Hash barato de la posición → variedad de morfo (color/patrón) por dónde cae el
+/// animal, sin usar la semilla del mundo. Igual que la carrocería de un vehículo o
+/// el tinte del follaje: un rebaño estampado sale VARIADO, determinista por posición.
+#[inline]
+fn morph(x: u32, z: u32) -> u32 {
+    let mut h = x.wrapping_mul(0x9E37_79B9).wrapping_add(z.wrapping_mul(0x85EB_CA77));
+    h ^= h >> 15;
+    h = h.wrapping_mul(0x2C1B_3C6D);
+    (h ^ (h >> 13)) & 0xFFFF
+}
+
+/// Rota un desplazamiento `(dx, dz)` según `facing` (giros de 90°).
+#[inline]
+fn rot(dx: i32, dz: i32, facing: u8) -> (i32, i32) {
+    match facing & 3 {
+        0 => (dx, dz),
+        1 => (-dz, dx),
+        2 => (-dx, -dz),
+        _ => (dz, -dx),
+    }
+}
+
+/// **Detalle sub-voxel de un ser vivo** `(rugosidad, bisel)` — la gramática
+/// cuantizada que rompe la caja rectangular de los animales voxel. Rugosidad suave
+/// (grano de piel/pelaje, escala `VoxelGrid::DETALLE_RUG_MAX`) + bisel alto (redondeo
+/// orgánico de la silueta de sombreado): un ser vivo no es un ladrillo. Es la MISMA
+/// gramática de bisel/campo que el terreno (no una fidelidad distinta → sin valle),
+/// sólo con más redondeo por ser un cuerpo. `generate_window` lo aplica como pincel
+/// de detalle alrededor de cada `stamp_bicho`. El bisel sólo luce si el bisel GLOBAL
+/// de la escena está prendido (activa la isosuperficie); la rugosidad luce siempre.
+pub const DETALLE_SER_VIVO: (f32, f32) = (0.4, 0.85);
+
+/// **Estampa un ser** del `bicho` parado con las patas en `(x, y, z)` (base local
+/// `dy=0` = a ras del suelo), orientado por `facing`. `dz` crece hacia el frente
+/// (hocico), `dx` a lo ancho, `dy` hacia arriba.
+pub fn stamp_bicho(g: &mut VoxelGrid, bicho: Bicho, x: u32, y: u32, z: u32, facing: u8) {
+    let (bx, by, bz) = (x as i32, y as i32, z as i32);
+    let dim = g.dim();
+    let vh = morph(x, z); // morfo de color/patrón por posición (variedad de rebaño)
+    let mut put = |dx: i32, dy: i32, dz: i32, c: [u8; 3]| {
+        let (rx, rz) = rot(dx, dz, facing);
+        let (px, py, pz) = (bx + rx, by + dy, bz + rz);
+        if px >= 0 && py >= 0 && pz >= 0 && (px as u32) < dim[0] && (py as u32) < dim[1] && (pz as u32) < dim[2] {
+            g.set(px as u32, py as u32, pz as u32, c);
+        }
+    };
+
+    match bicho {
+        Bicho::Vaca => {
+            // Morfo de pelaje: holstein / marrón-blanca / negra.
+            let (base, mancha_c) = match vh % 3 {
+                0 => (BLANCO, NEGRO),
+                1 => (BLANCO, MARRON_CLR),
+                _ => (MARRON_CLR, NEGRO),
+            };
+            // Cuerpo (2 de ancho × 3 de largo × 2 de alto) sobre 4 patas.
+            for dx in -1i32..=0 {
+                for dz in -1i32..=1 {
+                    for dy in 2..=3 {
+                        // Manchas en algunas celdas, base en el resto.
+                        let mancha = (dx + dz).rem_euclid(2) == 0 && dz != 1;
+                        put(dx, dy, dz, if mancha { mancha_c } else { base });
+                    }
+                }
+            }
+            for &(lx, lz) in &[(-1, -1), (0, -1), (-1, 1), (0, 1)] {
+                put(lx, 0, lz, MARRON_OSC);
+                put(lx, 1, lz, MARRON_OSC);
+            }
+            // Cabeza al frente + cuernos.
+            put(0, 3, 2, ROSA);
+            put(-1, 3, 2, ROSA);
+            put(0, 4, 2, base);
+            put(-1, 4, 2, base);
+            put(1, 4, 2, [232, 228, 214]); // cuerno
+            put(-2, 4, 2, [232, 228, 214]); // cuerno
+        }
+        Bicho::Oveja => {
+            // Morfo de lana: blanca / beige / gris.
+            let lana = match vh % 3 {
+                0 => BLANCO,
+                1 => [214, 202, 176],
+                _ => [186, 186, 190],
+            };
+            // Cuerpo lanudo y mullido sobre patas oscuras.
+            for dx in -1..=0 {
+                for dz in -1..=1 {
+                    for dy in 2..=3 {
+                        put(dx, dy, dz, lana);
+                    }
+                }
+            }
+            put(0, 4, 0, lana);
+            put(-1, 4, 0, lana);
+            for &(lx, lz) in &[(-1, -1), (0, -1), (-1, 1), (0, 1)] {
+                put(lx, 0, lz, NEGRO);
+                put(lx, 1, lz, NEGRO);
+            }
+            // Cara oscura al frente.
+            put(0, 2, 2, NEGRO);
+            put(-1, 2, 2, NEGRO);
+            put(0, 3, 2, lana);
+        }
+        Bicho::Cerdo => {
+            // Cuerpo rosado rechoncho, patas cortas, hocico y colita.
+            for dx in -1..=0 {
+                for dz in -1..=1 {
+                    put(dx, 1, dz, ROSA);
+                    put(dx, 2, dz, ROSA);
+                }
+            }
+            for &(lx, lz) in &[(-1, -1), (0, -1), (-1, 1), (0, 1)] {
+                put(lx, 0, lz, ROSA);
+            }
+            put(0, 1, 2, ROSA); // hocico
+            put(-1, 1, 2, ROSA);
+            put(0, 2, 2, ROSA);
+            put(-1, 2, 2, ROSA);
+            put(0, 2, 3, [232, 170, 170]); // trompa
+            put(-1, 1, -2, ROSA); // colita
+        }
+        Bicho::Gallina => {
+            // Morfo de plumaje: blanca / marrón / negra (con gallo rojizo).
+            let plum = match vh % 3 {
+                0 => BLANCO,
+                1 => MARRON_CLR,
+                _ => [70, 68, 74],
+            };
+            put(0, 1, 0, plum);
+            put(0, 1, -1, plum);
+            put(0, 2, 0, plum);
+            put(0, 2, 1, plum); // pecho/cabeza
+            put(0, 3, 1, ROJO); // cresta
+            put(0, 2, 2, AMARILLO); // pico
+            put(0, 0, 0, AMARILLO); // patas
+            put(0, 0, -1, AMARILLO);
+            put(0, 1, -2, plum); // cola
+        }
+        Bicho::Ciervo => {
+            // Patas largas, cuerpo marrón, cuello y cabeza al frente, astas.
+            for &(lx, lz) in &[(-1, -1), (0, -1), (-1, 1), (0, 1)] {
+                put(lx, 0, lz, MARRON_OSC);
+                put(lx, 1, lz, MARRON_OSC);
+            }
+            for dx in -1..=0 {
+                for dz in -1..=1 {
+                    put(dx, 2, dz, MARRON);
+                    put(dx, 3, dz, MARRON);
+                }
+            }
+            // Cuello + cabeza.
+            put(0, 3, 2, MARRON);
+            put(0, 4, 2, MARRON);
+            put(0, 5, 2, MARRON);
+            put(0, 5, 3, MARRON); // hocico
+            // Astas.
+            put(0, 6, 2, MARRON_OSC);
+            put(1, 6, 2, MARRON_OSC);
+            put(-1, 6, 2, MARRON_OSC);
+            put(0, 6, 3, MARRON_OSC);
+        }
+        Bicho::Conejo => {
+            // Morfo de pelaje: blanco / marrón / gris.
+            let pelo = match vh % 3 {
+                0 => BLANCO,
+                1 => MARRON_CLR,
+                _ => GRIS,
+            };
+            // Cuerpo chico, orejas largas, cola de algodón.
+            put(0, 1, 0, pelo);
+            put(0, 1, -1, pelo);
+            put(0, 2, 0, pelo);
+            put(0, 2, 1, pelo); // cabeza al frente
+            put(0, 3, 1, pelo); // oreja
+            put(0, 4, 1, pelo);
+            put(0, 3, 0, pelo); // oreja 2
+            put(0, 4, 0, pelo);
+            put(0, 0, 0, pelo);
+            put(0, 0, -1, pelo);
+            put(0, 2, -1, [240, 240, 236]); // colita
+        }
+        Bicho::Zorro => {
+            // Cuerpo naranja, pecho/cola blancos, orejas puntiagudas.
+            for dz in -1..=1 {
+                put(0, 1, dz, NARANJA);
+                put(0, 2, dz, NARANJA);
+            }
+            put(0, 0, -1, MARRON_OSC); // patas
+            put(0, 0, 1, MARRON_OSC);
+            put(0, 2, 2, NARANJA); // cabeza
+            put(0, 3, 2, NARANJA); // oreja
+            put(0, 2, 3, BLANCO); // hocico
+            put(0, 1, 2, BLANCO); // pecho
+            put(0, 2, -2, BLANCO); // cola
+            put(0, 1, -2, NARANJA);
+        }
+        Bicho::Lobo => {
+            // Como el zorro pero gris y más largo/robusto.
+            for dz in -2..=1 {
+                put(0, 1, dz, GRIS);
+                put(0, 2, dz, GRIS);
+            }
+            for &lz in &[-1, 1] {
+                put(0, 0, lz, [96, 96, 102]);
+            }
+            put(0, 2, 2, GRIS); // cabeza
+            put(0, 3, 2, GRIS); // oreja
+            put(0, 2, 3, [110, 110, 116]); // hocico
+            put(0, 2, -3, GRIS); // cola
+            put(0, 3, -3, GRIS);
+        }
+        Bicho::Oso => {
+            // Cuerpo voluminoso (2×3), cabeza redonda con orejas.
+            for dx in -1..=0 {
+                for dz in -1..=1 {
+                    for dy in 1..=3 {
+                        put(dx, dy, dz, MARRON_OSC);
+                    }
+                }
+            }
+            for &(lx, lz) in &[(-1, -1), (0, -1), (-1, 1), (0, 1)] {
+                put(lx, 0, lz, MARRON_OSC);
+            }
+            put(0, 3, 2, MARRON); // cabeza
+            put(-1, 3, 2, MARRON);
+            put(0, 4, 2, MARRON);
+            put(-1, 4, 2, MARRON);
+            put(1, 4, 2, MARRON_OSC); // orejas
+            put(-2, 4, 2, MARRON_OSC);
+        }
+        Bicho::Caballo => {
+            // Morfo de capa: alazán / negro / bayo, con crin de contraste.
+            let (capa, crin) = match vh % 3 {
+                0 => (MARRON, MARRON_OSC),
+                1 => ([58, 54, 56], NEGRO),
+                _ => (TAN, MARRON_OSC),
+            };
+            // Alto: patas largas, lomo, cuello erguido, crin y cola.
+            for &(lx, lz) in &[(-1, -1), (0, -1), (-1, 1), (0, 1)] {
+                put(lx, 0, lz, crin);
+                put(lx, 1, lz, capa);
+                put(lx, 2, lz, capa);
+            }
+            for dx in -1..=0 {
+                for dz in -1..=1 {
+                    put(dx, 3, dz, capa);
+                }
+            }
+            // Cuello + cabeza.
+            put(0, 4, 1, capa);
+            put(0, 5, 1, capa);
+            put(0, 5, 2, capa); // testa
+            put(0, 4, 2, capa);
+            put(0, 6, 1, crin); // crin
+            put(0, 5, 0, crin);
+            put(-1, 4, -1, crin); // cola
+            put(-1, 3, -2, crin);
+        }
+        Bicho::Pajaro => {
+            // Diminuto: cuerpo azul, alas, pico, patitas.
+            put(0, 1, 0, AZUL);
+            put(0, 2, 0, AZUL); // cabeza
+            put(0, 2, 1, AMARILLO); // pico
+            put(1, 1, 0, [96, 140, 210]); // ala
+            put(-1, 1, 0, [96, 140, 210]);
+            put(0, 1, -1, AZUL); // cola
+            put(0, 0, 0, AMARILLO); // pata
+        }
+        Bicho::Pez => {
+            // Cuerpo lateral + aleta caudal (se coloca en/junto al agua).
+            put(0, 1, 0, AZUL);
+            put(0, 1, 1, AZUL);
+            put(0, 2, 0, [110, 150, 210]);
+            put(0, 1, 2, [110, 150, 210]); // morro
+            put(0, 1, -1, [150, 180, 220]); // cola
+            put(0, 2, -1, [150, 180, 220]);
+            put(0, 0, -1, [150, 180, 220]);
+        }
+        Bicho::Tortuga => {
+            // Caparazón verde abovedado + cabeza + 4 patas.
+            for dx in -1..=1 {
+                for dz in -1..=1 {
+                    put(dx, 1, dz, VERDE_OSC);
+                }
+            }
+            put(0, 2, 0, VERDE); // cúpula del caparazón
+            put(0, 1, 2, [180, 200, 120]); // cabeza
+            for &(lx, lz) in &[(-1, -1), (1, -1), (-1, 1), (1, 1)] {
+                put(lx, 0, lz, [180, 200, 120]); // patas
+            }
+        }
+        Bicho::Rana => {
+            // Cuerpo verde agazapado, ojos saltones, patas dobladas.
+            put(0, 1, 0, VERDE);
+            put(-1, 1, 0, VERDE);
+            put(0, 1, 1, VERDE); // frente
+            put(-1, 1, 1, VERDE);
+            put(0, 2, 1, VERDE_OSC); // ojo
+            put(-1, 2, 1, VERDE_OSC);
+            put(0, 0, -1, VERDE); // pata trasera
+            put(-1, 0, -1, VERDE);
+            put(0, 0, 2, [200, 210, 140]); // pata delantera
+        }
+        Bicho::Serpiente => {
+            // Cuerpo largo y bajo en zigzag + cabeza.
+            let cuerpo = [(0, 0), (0, -1), (-1, -1), (-1, -2), (-2, -2), (-2, -3)];
+            for &(sx, sz) in &cuerpo {
+                put(sx, 1, sz, VERDE_OSC);
+            }
+            put(0, 1, 1, VERDE); // cabeza
+            put(0, 1, 2, VERDE);
+            put(0, 2, 1, ROJO); // lengua/ojo
+        }
+        Bicho::Mariposa => {
+            // Morfo de alas: naranja monarca / azul / amarilla.
+            let (ala1, ala2) = match vh % 3 {
+                0 => (AMARILLO, NARANJA),
+                1 => (AZUL, [140, 180, 230]),
+                _ => (AMARILLO, [230, 170, 60]),
+            };
+            put(0, 3, 0, NEGRO); // cuerpo
+            put(0, 2, 0, NEGRO);
+            put(1, 3, 0, ala1); // alas
+            put(1, 3, 1, ala2);
+            put(-1, 3, 0, ala1);
+            put(-1, 3, 1, ala2);
+            put(1, 2, 0, ala2);
+            put(-1, 2, 0, ala2);
+        }
+
+        // ---- Granja / pradera ----
+        Bicho::Pato => {
+            // Cuerpo blanco chico, cuello, pico naranja, cola.
+            put(0, 1, 0, BLANCO);
+            put(0, 1, -1, BLANCO);
+            put(-1, 1, 0, BLANCO);
+            put(0, 2, 1, BLANCO); // cuello/cabeza
+            put(0, 3, 1, BLANCO);
+            put(0, 3, 2, NARANJA); // pico
+            put(0, 2, -1, BLANCO); // cola
+            put(0, 0, 0, NARANJA); // patas
+        }
+        Bicho::Cabra => {
+            // Morfo: blanca / parda. Cuerpo, patas, cabeza barbada y cuernos.
+            let capa = if vh % 2 == 0 { [222, 216, 202] } else { MARRON_CLR };
+            for &(lx, lz) in &[(-1, -1), (0, -1), (-1, 1), (0, 1)] {
+                put(lx, 0, lz, MARRON_OSC);
+                put(lx, 1, lz, capa);
+            }
+            for dx in -1..=0 {
+                for dz in -1..=1 {
+                    put(dx, 2, dz, capa);
+                }
+            }
+            put(0, 2, 2, capa); // cabeza
+            put(0, 3, 2, capa);
+            put(0, 2, 3, capa); // hocico
+            put(0, 4, 2, [232, 228, 214]); // cuerno
+            put(0, 1, 2, [220, 214, 200]); // barbita
+            put(-1, 2, -2, capa); // cola corta
+        }
+        Bicho::Burro => {
+            // Gris, patas, lomo, cuello y orejas largas.
+            for &(lx, lz) in &[(-1, -1), (0, -1), (-1, 1), (0, 1)] {
+                put(lx, 0, lz, GRIS_OSC);
+                put(lx, 1, lz, GRIS);
+            }
+            for dx in -1..=0 {
+                for dz in -1..=1 {
+                    put(dx, 2, dz, GRIS);
+                }
+            }
+            put(0, 3, 1, GRIS); // cuello
+            put(0, 3, 2, GRIS); // cabeza
+            put(0, 4, 2, GRIS); // oreja larga
+            put(0, 5, 2, GRIS_OSC);
+            put(-1, 2, -2, GRIS_OSC); // cola
+        }
+
+        // ---- Bosque ----
+        Bicho::Ardilla => {
+            // Cuerpito naranja con cola tupida enroscada hacia arriba.
+            put(0, 1, 0, NARANJA);
+            put(0, 2, 0, NARANJA);
+            put(0, 2, 1, NARANJA); // cabeza
+            put(0, 3, 1, [222, 150, 90]); // oreja
+            put(0, 1, 1, [232, 190, 150]); // pecho claro
+            put(0, 0, 0, MARRON_OSC); // pata
+            put(0, 2, -1, NARANJA); // cola
+            put(0, 3, -1, [222, 150, 90]);
+            put(0, 4, -1, NARANJA);
+            put(0, 4, 0, [222, 150, 90]);
+        }
+        Bicho::Buho => {
+            // Compacto, posado, con ojos grandes y penachos.
+            for dy in 1..=3 {
+                put(0, dy, 0, MARRON);
+                put(-1, dy, 0, MARRON);
+            }
+            put(0, 3, 1, AMARILLO); // ojo
+            put(-1, 3, 1, AMARILLO);
+            put(0, 4, 0, MARRON_OSC); // penacho
+            put(-1, 4, 0, MARRON_OSC);
+            put(0, 2, 1, [206, 180, 140]); // pecho
+            put(-1, 2, 1, [206, 180, 140]);
+            put(0, 0, 0, AMARILLO); // garras
+            put(-1, 0, 0, AMARILLO);
+        }
+        Bicho::Erizo => {
+            // Cuerpo bajo con lomo de púas oscuras y carita clara.
+            for dx in -1..=0 {
+                for dz in -1..=1 {
+                    put(dx, 1, dz, MARRON_OSC);
+                    put(dx, 2, dz, [64, 52, 40]); // púas
+                }
+            }
+            put(0, 2, 2, [222, 198, 160]); // carita
+            put(-1, 2, 2, [222, 198, 160]);
+            put(0, 1, 3, NEGRO); // hocico
+            for &(lx, lz) in &[(-1, -1), (0, 1)] {
+                put(lx, 0, lz, [120, 96, 72]);
+            }
+        }
+
+        // ---- Desierto ----
+        Bicho::Camello => {
+            // Color arena, patas largas, joroba, cuello y cabeza.
+            for &(lx, lz) in &[(-1, -1), (0, -1), (-1, 1), (0, 1)] {
+                put(lx, 0, lz, [176, 148, 104]);
+                put(lx, 1, lz, TAN);
+                put(lx, 2, lz, TAN);
+            }
+            for dx in -1..=0 {
+                for dz in -1..=1 {
+                    put(dx, 3, dz, TAN);
+                }
+            }
+            put(0, 4, 0, TAN); // joroba
+            put(-1, 4, 0, TAN);
+            put(0, 4, 1, TAN); // cuello
+            put(0, 5, 2, TAN); // cabeza
+            put(0, 5, 3, [176, 148, 104]); // hocico
+            put(-1, 3, -2, TAN); // cola
+        }
+        Bicho::Escorpion => {
+            // Cuerpo bajo oscuro, pinzas al frente, cola curva con aguijón.
+            put(0, 1, 0, [70, 58, 40]);
+            put(0, 1, 1, [70, 58, 40]);
+            put(0, 1, 2, [86, 70, 48]); // pinzas
+            put(1, 1, 2, [86, 70, 48]);
+            put(-1, 1, 2, [86, 70, 48]);
+            put(0, 1, -1, [70, 58, 40]); // cola
+            put(0, 2, -1, [70, 58, 40]);
+            put(0, 2, 0, [70, 58, 40]);
+            put(0, 3, 0, ROJO); // aguijón
+        }
+        Bicho::Lagarto => {
+            // Cuerpo verde alargado y bajo, patitas, cabeza, cola larga.
+            for dz in -2..=1 {
+                put(0, 1, dz, VERDE_OSC);
+            }
+            put(0, 1, 2, VERDE); // cabeza
+            put(0, 1, -3, VERDE_OSC); // cola
+            put(0, 1, -4, [80, 130, 66]);
+            put(1, 0, 0, VERDE_OSC); // patas
+            put(-1, 0, 0, VERDE_OSC);
+            put(1, 0, -1, VERDE_OSC);
+            put(-1, 0, -1, VERDE_OSC);
+        }
+
+        // ---- Nieve / agua fría ----
+        Bicho::Pinguino => {
+            // De pie: espalda negra, panza blanca, pico y patas naranjas.
+            for dy in 1..=3 {
+                put(0, dy, 0, NEGRO); // espalda
+            }
+            put(0, 1, 1, BLANCO); // panza
+            put(0, 2, 1, BLANCO);
+            put(0, 4, 0, NEGRO); // cabeza
+            put(0, 4, 1, NARANJA); // pico
+            put(1, 2, 0, NEGRO); // aleta
+            put(-1, 2, 0, NEGRO);
+            put(0, 0, 1, NARANJA); // patas
+        }
+        Bicho::Foca => {
+            // Cuerpo gris tendido, cabeza levantada, aletas.
+            for dz in -2..=1 {
+                put(0, 1, dz, GRIS);
+                put(-1, 1, dz, GRIS);
+            }
+            put(0, 2, 1, GRIS); // cabeza
+            put(-1, 2, 1, GRIS);
+            put(0, 2, 2, [110, 112, 118]); // hocico
+            put(0, 1, -3, [110, 112, 118]); // cola/aleta
+            put(-1, 1, -3, [110, 112, 118]);
+            put(1, 1, 0, [150, 150, 156]); // aleta lateral
+        }
+
+        // ---- Selva / sabana ----
+        Bicho::Mono => {
+            // Cuerpo marrón sentado, cabeza clara, cola larga curva.
+            put(0, 1, 0, MARRON);
+            put(0, 2, 0, MARRON);
+            put(0, 2, 1, [176, 140, 100]); // cara clara
+            put(0, 3, 1, MARRON); // frente
+            put(0, 1, 1, MARRON); // rodillas
+            put(1, 2, 0, MARRON); // brazo
+            put(-1, 2, 0, MARRON);
+            put(0, 1, -1, MARRON); // cola
+            put(0, 2, -1, MARRON);
+            put(0, 2, -2, MARRON);
+        }
+        Bicho::Loro => {
+            // Cuerpo verde vivo, pecho rojo, pico y cola larga.
+            put(0, 1, 0, [70, 168, 72]);
+            put(0, 2, 0, [70, 168, 72]);
+            put(0, 3, 0, [70, 168, 72]); // cabeza
+            put(0, 3, 1, ROJO); // pico
+            put(0, 1, 1, ROJO); // pecho
+            put(1, 2, 0, [90, 190, 90]); // ala
+            put(0, 1, -1, [220, 200, 60]); // cola
+            put(0, 1, -2, [70, 168, 72]);
+            put(0, 0, 0, [120, 96, 72]); // pata
+        }
+        Bicho::Tigre => {
+            // Cuerpo naranja con rayas negras, patas, cabeza, cola.
+            for &(lx, lz) in &[(-1, -1), (0, -1), (-1, 1), (0, 1)] {
+                put(lx, 0, lz, NARANJA);
+            }
+            for dx in -1i32..=0 {
+                for dz in -1i32..=1 {
+                    // Rayas: bandas negras alternas a lo largo.
+                    let raya = dz.rem_euclid(2) == 0;
+                    put(dx, 1, dz, if raya { NEGRO } else { NARANJA });
+                }
+            }
+            put(0, 2, 2, NARANJA); // cabeza
+            put(-1, 2, 2, NARANJA);
+            put(0, 1, 2, [232, 200, 150]); // hocico
+            put(0, 2, -2, NARANJA); // cola
+            put(0, 2, -3, NEGRO);
+        }
+        Bicho::Elefante => {
+            // Grande: cuerpo gris (2×3×2), patas, trompa, orejas, colmillos.
+            for dx in -1i32..=0 {
+                for dz in -1..=1 {
+                    for dy in 2..=3 {
+                        put(dx, dy, dz, GRIS);
+                    }
+                }
+            }
+            for &(lx, lz) in &[(-1, -1), (0, -1), (-1, 1), (0, 1)] {
+                put(lx, 0, lz, [110, 112, 118]);
+                put(lx, 1, lz, GRIS);
+            }
+            put(0, 3, 2, GRIS); // cabeza
+            put(-1, 3, 2, GRIS);
+            put(0, 2, 2, GRIS);
+            put(0, 1, 3, GRIS); // trompa
+            put(0, 0, 3, [110, 112, 118]);
+            put(1, 3, 1, [150, 150, 156]); // oreja
+            put(-2, 3, 1, [150, 150, 156]);
+            put(0, 1, 2, [232, 228, 214]); // colmillo
+        }
+        Bicho::Cocodrilo => {
+            // Cuerpo verde largo y bajo, dorso escamado, fauces, cola.
+            for dz in -3..=2 {
+                put(0, 1, dz, VERDE_OSC);
+                put(-1, 1, dz, VERDE_OSC);
+            }
+            // Dorso escamado (crestas alternas).
+            for dz in -3i32..=1 {
+                if dz.rem_euclid(2) == 0 {
+                    put(0, 2, dz, [72, 128, 60]);
+                }
+            }
+            put(0, 1, 3, VERDE); // hocico
+            put(-1, 1, 3, VERDE);
+            put(0, 2, 3, NEGRO); // ojo/fauces
+            put(0, 1, -4, VERDE_OSC); // cola
+            put(0, 1, -5, [80, 130, 66]);
+            put(1, 0, 0, VERDE_OSC); // patas
+            put(-2, 0, 0, VERDE_OSC);
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    fn solids(g: &VoxelGrid, dim: [u32; 3]) -> usize {
+        let mut n = 0;
+        for x in 0..dim[0] {
+            for y in 0..dim[1] {
+                for z in 0..dim[2] {
+                    if g.is_solid(x as i32, y as i32, z as i32) {
+                        n += 1;
+                    }
+                }
+            }
+        }
+        n
+    }
+
+    #[test]
+    fn cada_bicho_estampa_voxels() {
+        let dim = [20u32, 16, 20];
+        for bicho in Bicho::ALL {
+            let mut g = VoxelGrid::new(dim);
+            stamp_bicho(&mut g, bicho, 10, 1, 10, 0);
+            assert!(solids(&g, dim) >= 5, "{} estampó muy poco", bicho.label());
+        }
+    }
+
+    #[test]
+    fn facing_rota_la_silueta() {
+        let dim = [24u32, 16, 24];
+        let mut a = VoxelGrid::new(dim);
+        let mut b = VoxelGrid::new(dim);
+        stamp_bicho(&mut a, Bicho::Ciervo, 12, 1, 12, 0);
+        stamp_bicho(&mut b, Bicho::Ciervo, 12, 1, 12, 1);
+        // Al rotar, la ocupación cambia (el hocico apunta a otro eje).
+        let mut diff = 0;
+        for x in 0..dim[0] {
+            for y in 0..dim[1] {
+                for z in 0..dim[2] {
+                    if a.is_solid(x as i32, y as i32, z as i32) != b.is_solid(x as i32, y as i32, z as i32) {
+                        diff += 1;
+                    }
+                }
+            }
+        }
+        assert!(diff > 0, "facing no rotó la silueta");
+    }
+}
diff --git a/llimphi-voxel/src/casa.rs b/llimphi-voxel/src/casa.rs
new file mode 100644
index 0000000..d8bdd14
--- /dev/null
+++ b/llimphi-voxel/src/casa.rs
@@ -0,0 +1,895 @@
+//! **Casas procedurales por tipo**: a diferencia de un [`Mueble`](crate::Mueble)
+//! (modelo fijo), una casa se **genera** — dimensiones, ventanas, techo, chimenea y
+//! detalles varían con una **semilla**, dentro de un **estilo** ([`CasaTipo`]).
+//! Estampá una con [`stamp_casa`]; misma `(tipo, seed)` → misma casa (determinista),
+//! semillas distintas → casas distintas del mismo estilo.
+
+use serde::{Deserialize, Serialize};
+
+use crate::worldgen::Material;
+use llimphi_3d::VoxelGrid;
+
+/// Estilo de casa. Cada uno tiene su gramática de generación.
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, Serialize, Deserialize)]
+pub enum CasaTipo {
+    /// Prehistórica (Flintstones): choza de piedra abovedada, puerta en arco.
+    Flintstone,
+    /// Hobbit: montículo de pasto con puerta y ventana redondas.
+    Hobbit,
+    /// Cabaña de troncos: muros de madera, techo a dos aguas, chimenea de piedra.
+    Cabana,
+    /// Casa moderna: hormigón y grandes ventanales de vidrio, techo plano.
+    Moderna,
+    /// Edificio de departamentos: bloque alto con grilla de ventanas.
+    Edificio,
+    /// Iglú: cúpula de nieve con túnel de entrada.
+    Iglu,
+    /// Palafito: casa de madera sobre pilotes.
+    Palafito,
+    /// Adobe (pueblo): bloques de adobe apilados, techos planos y vigas.
+    Adobe,
+    /// Rascacielos: torre de vidrio y acero (altura variable).
+    Rascacielos,
+    /// Granja: casa con techo a dos aguas + granero.
+    Granja,
+    /// Torre medieval: torreón de piedra con almenas.
+    Torre,
+    /// Faro costero: torre blanca con franjas rojas y linterna que emite luz.
+    Faro,
+    /// Choza tropical: paredes bajas y techo cónico de paja.
+    Choza,
+    /// Tienda: local a pie de calle con toldo y vidriera.
+    Tienda,
+    /// Dúplex suburbano: dos plantas, techo a dos aguas, garaje.
+    Duplex,
+}
+
+impl CasaTipo {
+    pub const ALL: [CasaTipo; 15] = [
+        CasaTipo::Flintstone,
+        CasaTipo::Hobbit,
+        CasaTipo::Cabana,
+        CasaTipo::Moderna,
+        CasaTipo::Edificio,
+        CasaTipo::Iglu,
+        CasaTipo::Palafito,
+        CasaTipo::Adobe,
+        CasaTipo::Rascacielos,
+        CasaTipo::Granja,
+        CasaTipo::Torre,
+        CasaTipo::Faro,
+        CasaTipo::Choza,
+        CasaTipo::Tienda,
+        CasaTipo::Duplex,
+    ];
+
+    pub fn label(self) -> &'static str {
+        match self {
+            CasaTipo::Flintstone => "flintstone",
+            CasaTipo::Hobbit => "hobbit",
+            CasaTipo::Cabana => "cabaña",
+            CasaTipo::Moderna => "moderna",
+            CasaTipo::Edificio => "edificio",
+            CasaTipo::Iglu => "iglú",
+            CasaTipo::Palafito => "palafito",
+            CasaTipo::Adobe => "adobe",
+            CasaTipo::Rascacielos => "rascacielos",
+            CasaTipo::Granja => "granja",
+            CasaTipo::Torre => "torre",
+            CasaTipo::Faro => "faro",
+            CasaTipo::Choza => "choza",
+            CasaTipo::Tienda => "tienda",
+            CasaTipo::Duplex => "dúplex",
+        }
+    }
+
+    pub fn next(self) -> CasaTipo {
+        let i = CasaTipo::ALL.iter().position(|&t| t == self).unwrap_or(0);
+        CasaTipo::ALL[(i + 1) % CasaTipo::ALL.len()]
+    }
+}
+
+/// **Uso de casas en un bioma**: qué estilo y con qué densidad `[0,1]` aparecen
+/// (una candidata por parcela de la grilla gruesa; el bioma las esparce por semilla
+/// → un pueblo/ciudad procedural, como la flora).
+#[derive(Debug, Clone, Copy, Serialize, Deserialize)]
+pub struct CasaUso {
+    pub tipo: CasaTipo,
+    pub densidad: f32,
+}
+
+/// **Tipo de asentamiento**: preset que rellena la mezcla de casas ([`CasaUso`])
+/// y la densidad urbana de un bioma → distintos pueblos y ciudades de un toque.
+/// Es sólo un atajo de autoría: al aplicarlo, escribe `casas` + `densidad_urbana`.
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, Serialize, Deserialize)]
+pub enum PuebloTipo {
+    /// Aldea: puñado de casas rústicas, muy dispersa.
+    Aldea,
+    /// Suburbio: dúplex y casas modernas en densidad media.
+    Suburbio,
+    /// Ciudad: mezcla de edificios y casas, densa.
+    Ciudad,
+    /// Metrópolis: rascacielos y torres de departamentos, muy densa.
+    Metropolis,
+    /// Prehistórico: chozas, flintstones y hobbits, dispersa.
+    Prehistorico,
+    /// Costero: faros, palafitos y chozas junto al agua.
+    Costero,
+    /// Medieval: torres, adobe y cabañas amuralladas.
+    Medieval,
+    /// Rural: granjas y cabañas muy espaciadas.
+    Rural,
+}
+
+impl PuebloTipo {
+    pub const ALL: [PuebloTipo; 8] = [
+        PuebloTipo::Aldea,
+        PuebloTipo::Suburbio,
+        PuebloTipo::Ciudad,
+        PuebloTipo::Metropolis,
+        PuebloTipo::Prehistorico,
+        PuebloTipo::Costero,
+        PuebloTipo::Medieval,
+        PuebloTipo::Rural,
+    ];
+
+    pub fn label(self) -> &'static str {
+        match self {
+            PuebloTipo::Aldea => "aldea",
+            PuebloTipo::Suburbio => "suburbio",
+            PuebloTipo::Ciudad => "ciudad",
+            PuebloTipo::Metropolis => "metrópolis",
+            PuebloTipo::Prehistorico => "prehistórico",
+            PuebloTipo::Costero => "costero",
+            PuebloTipo::Medieval => "medieval",
+            PuebloTipo::Rural => "rural",
+        }
+    }
+
+    pub fn next(self) -> PuebloTipo {
+        let i = PuebloTipo::ALL.iter().position(|&t| t == self).unwrap_or(0);
+        PuebloTipo::ALL[(i + 1) % PuebloTipo::ALL.len()]
+    }
+
+    /// Densidad urbana sugerida `[0,1]`: cuánto se agrupan las casas (cluster fbm).
+    pub fn densidad(self) -> f32 {
+        match self {
+            PuebloTipo::Aldea => 0.25,
+            PuebloTipo::Suburbio => 0.5,
+            PuebloTipo::Ciudad => 0.7,
+            PuebloTipo::Metropolis => 0.9,
+            PuebloTipo::Prehistorico => 0.3,
+            PuebloTipo::Costero => 0.4,
+            PuebloTipo::Medieval => 0.55,
+            PuebloTipo::Rural => 0.15,
+        }
+    }
+
+    /// Mezcla de casas (estilo + probabilidad por parcela) característica del tipo.
+    pub fn casas(self) -> Vec<CasaUso> {
+        let c = |tipo, densidad| CasaUso { tipo, densidad };
+        match self {
+            PuebloTipo::Aldea => vec![
+                c(CasaTipo::Cabana, 0.4),
+                c(CasaTipo::Adobe, 0.3),
+                c(CasaTipo::Granja, 0.2),
+                c(CasaTipo::Choza, 0.2),
+            ],
+            PuebloTipo::Suburbio => vec![
+                c(CasaTipo::Duplex, 0.45),
+                c(CasaTipo::Moderna, 0.4),
+                c(CasaTipo::Tienda, 0.15),
+                c(CasaTipo::Granja, 0.1),
+            ],
+            PuebloTipo::Ciudad => vec![
+                c(CasaTipo::Edificio, 0.45),
+                c(CasaTipo::Moderna, 0.3),
+                c(CasaTipo::Tienda, 0.25),
+                c(CasaTipo::Duplex, 0.2),
+            ],
+            PuebloTipo::Metropolis => vec![
+                c(CasaTipo::Rascacielos, 0.4),
+                c(CasaTipo::Edificio, 0.5),
+                c(CasaTipo::Moderna, 0.2),
+                c(CasaTipo::Tienda, 0.2),
+            ],
+            PuebloTipo::Prehistorico => vec![
+                c(CasaTipo::Flintstone, 0.4),
+                c(CasaTipo::Choza, 0.3),
+                c(CasaTipo::Hobbit, 0.25),
+            ],
+            PuebloTipo::Costero => vec![
+                c(CasaTipo::Palafito, 0.4),
+                c(CasaTipo::Choza, 0.3),
+                c(CasaTipo::Cabana, 0.2),
+                c(CasaTipo::Faro, 0.06),
+            ],
+            PuebloTipo::Medieval => vec![
+                c(CasaTipo::Adobe, 0.4),
+                c(CasaTipo::Cabana, 0.3),
+                c(CasaTipo::Torre, 0.15),
+                c(CasaTipo::Granja, 0.2),
+            ],
+            PuebloTipo::Rural => vec![
+                c(CasaTipo::Granja, 0.4),
+                c(CasaTipo::Cabana, 0.3),
+                c(CasaTipo::Choza, 0.15),
+            ],
+        }
+    }
+}
+
+/// Deriva una semilla de casa estable de una parcela de mundo `(cwx, cwz)` y la
+/// semilla del mundo → cada parcela genera una casa distinta pero determinista.
+pub fn casa_seed(world_seed: u32, cwx: i32, cwz: i32) -> u32 {
+    world_seed
+        .wrapping_add((cwx as u32).wrapping_mul(0x9E37_79B9))
+        .wrapping_add((cwz as u32).wrapping_mul(0x85EB_CA77))
+        ^ 0xCA5A
+}
+
+/// Hash entero determinista `[0, m)` a partir de `(seed, salt)`.
+#[inline]
+fn h(seed: u32, salt: u32, m: u32) -> u32 {
+    let mut x = seed.wrapping_mul(0x9E37_79B9).wrapping_add(salt.wrapping_mul(0x85EB_CA77));
+    x ^= x >> 15;
+    x = x.wrapping_mul(0x2C1B_3C6D);
+    x ^= x >> 13;
+    x % m.max(1)
+}
+
+/// Ruido `[0,1)` determinista para jitter fino.
+#[inline]
+fn hf(seed: u32, a: i32, b: i32) -> f32 {
+    let mut x = seed
+        .wrapping_add((a as u32).wrapping_mul(0x9E37_79B9))
+        .wrapping_add((b as u32).wrapping_mul(0x85EB_CA77));
+    x ^= x >> 15;
+    x = x.wrapping_mul(0x2C1B_3C6D);
+    x ^= x >> 12;
+    (x & 0xFFFF) as f32 / 65536.0
+}
+
+/// **Genera y estampa una casa** del `tipo` con la base (esquina/centro) en
+/// `(x, y, z)`, variada por `seed`. El piso arranca en `y`.
+pub fn stamp_casa(g: &mut VoxelGrid, tipo: CasaTipo, x: u32, y: u32, z: u32, seed: u32) {
+    let bx = x as i32;
+    let by = y as i32;
+    let bz = z as i32;
+    let dim = g.dim();
+    let mut put = |dx: i32, dy: i32, dz: i32, mat: Material| {
+        let (px, py, pz) = (bx + dx, by + dy, bz + dz);
+        if px >= 0 && py >= 0 && pz >= 0 && (px as u32) < dim[0] && (py as u32) < dim[1] && (pz as u32) < dim[2] {
+            g.set_rgba(px as u32, py as u32, pz as u32, mat.color(), VoxelGrid::shine_to_alpha(mat.brillo()));
+        }
+    };
+
+    match tipo {
+        CasaTipo::Flintstone => {
+            // Choza de piedra abovedada, con silueta lumpy y arco de entrada.
+            let w = 4 + h(seed, 1, 3) as i32; // 4..6 (medio ancho)
+            let d = 4 + h(seed, 2, 3) as i32;
+            let base_h = 4 + h(seed, 3, 2) as i32;
+            let piedra = [Material::Arenisca, Material::Grava, Material::Rock][h(seed, 9, 3) as usize];
+            for dx in -w..=w {
+                for dz in -d..=d {
+                    let borde = dx == -w || dx == w || dz == -d || dz == d;
+                    if borde {
+                        // Altura de muro con bulto (piedra irregular).
+                        let bulto = (hf(seed, dx, dz) * 2.5) as i32;
+                        let alto = base_h + bulto;
+                        for dy in 0..alto {
+                            // Arco de puerta en el frente (dz = d).
+                            let puerta = dz == d && dx.abs() <= 1 && dy < 3;
+                            if !puerta {
+                                put(dx, dy, dz, piedra);
+                            }
+                        }
+                    }
+                }
+            }
+            // Techo abovedado (cúpula chata de piedra/paja).
+            let techo = if h(seed, 4, 2) == 0 { Material::Paja } else { piedra };
+            for dx in -w..=w {
+                for dz in -d..=d {
+                    let r = (dx * dx) as f32 / (w * w) as f32 + (dz * dz) as f32 / (d * d) as f32;
+                    let cima = ((1.0 - r) * 3.0) as i32;
+                    if cima >= 0 {
+                        put(dx, base_h + cima, dz, techo);
+                    }
+                }
+            }
+        }
+
+        CasaTipo::Hobbit => {
+            // Montículo de pasto con puerta y ventana redondas.
+            let r = 5 + h(seed, 1, 3) as i32; // radio 5..7
+            let past = [Material::Grass, Material::Musgo, Material::Leaf][h(seed, 8, 3) as usize];
+            for dx in -r..=r {
+                for dy in 0..=r {
+                    for dz in -r..=r {
+                        let dd = dx * dx + dy * dy + dz * dz;
+                        // Cáscara de la media esfera (montículo).
+                        if dd <= r * r && dd > (r - 2) * (r - 2) {
+                            put(dx, dy, dz, past);
+                        }
+                    }
+                }
+            }
+            // Fachada + puerta redonda al frente (dz = r-1..r).
+            let zf = r;
+            for dx in -2..=2 {
+                for dy in 0..4 {
+                    if dx * dx + (dy - 1) * (dy - 1) <= 4 {
+                        put(dx, dy, zf - 1, Material::Ladrillo); // marco de la puerta
+                    }
+                }
+            }
+            for dx in -1..=1 {
+                for dy in 0..3 {
+                    put(dx, dy, zf, Material::Madera); // puerta redonda de madera
+                }
+            }
+            put(3, 2, zf - 1, Material::Vidrio); // ventanita redonda
+            put(-3, 2, zf - 1, Material::Vidrio);
+            // Chimenea.
+            put(0, r + 1, 0, Material::Ladrillo);
+            put(0, r + 2, 0, Material::Ladrillo);
+        }
+
+        CasaTipo::Cabana => {
+            // Cabaña de troncos con techo a dos aguas y chimenea de piedra.
+            let w = 3 + h(seed, 1, 3) as i32; // 3..5
+            let d = 4 + h(seed, 2, 3) as i32; // 4..6
+            let wall = 5;
+            for dy in 0..wall {
+                for dx in -w..=w {
+                    for dz in -d..=d {
+                        let borde = dx == -w || dx == w || dz == -d || dz == d;
+                        if borde {
+                            // Puerta al frente + ventanas.
+                            let puerta = dz == d && dx.abs() <= 1 && dy < 3;
+                            let ventana = (dx == -w || dx == w) && dy == 2 && dz.abs() == d / 2;
+                            let m = if puerta {
+                                continue;
+                            } else if ventana {
+                                Material::Vidrio
+                            } else if dy % 2 == 0 {
+                                Material::Madera // troncos (franjas)
+                            } else {
+                                Material::Adobe
+                            };
+                            put(dx, dy, dz, m);
+                        }
+                    }
+                }
+            }
+            // Techo a dos aguas (cumbrera a lo largo del eje más largo).
+            let teja = if h(seed, 4, 2) == 0 { Material::Teja } else { Material::Pizarra };
+            let ridge_x = w >= d;
+            for dx in -w - 1..=w + 1 {
+                for dz in -d - 1..=d + 1 {
+                    let slope = if ridge_x { d + 1 - dz.abs() } else { w + 1 - dx.abs() }.max(0);
+                    put(dx, wall + slope, dz, teja);
+                }
+            }
+            // Chimenea de piedra a un lado (varía).
+            let cs = if h(seed, 5, 2) == 0 { -w } else { w };
+            for dy in 0..wall + d + 2 {
+                put(cs, dy, -d + 1, Material::Rock);
+            }
+        }
+
+        CasaTipo::Moderna => {
+            // Casa moderna: hormigón + grandes ventanales, techo plano, 1–2 plantas.
+            let w = 4 + h(seed, 1, 3) as i32;
+            let d = 4 + h(seed, 2, 3) as i32;
+            let plantas = 1 + h(seed, 3, 2) as i32; // 1..2
+            let ph = 5; // alto de planta
+            let top = plantas * ph;
+            for dy in 0..top {
+                for dx in -w..=w {
+                    for dz in -d..=d {
+                        let borde = dx == -w || dx == w || dz == -d || dz == d;
+                        if borde {
+                            let piso_line = dy % ph == 0;
+                            // Ventanal: franjas de vidrio entre líneas de piso.
+                            let ventanal = !piso_line && (dy % ph) != ph - 1;
+                            let puerta = dz == d && dx.abs() <= 1 && dy < 3;
+                            if puerta {
+                                continue;
+                            }
+                            let m = if piso_line {
+                                Material::Hormigon
+                            } else if ventanal {
+                                Material::Vidrio
+                            } else {
+                                Material::Yeso
+                            };
+                            put(dx, dy, dz, m);
+                        }
+                    }
+                }
+            }
+            // Losa/techo plano.
+            for dx in -w..=w {
+                for dz in -d..=d {
+                    put(dx, top, dz, Material::Hormigon);
+                }
+            }
+            // Parapeto + a veces un panel solar.
+            if h(seed, 6, 2) == 0 {
+                put(0, top + 1, 0, Material::Azul);
+                put(1, top + 1, 0, Material::Azul);
+            }
+        }
+
+        CasaTipo::Edificio => {
+            // Bloque de departamentos: alto, con grilla de ventanas.
+            let w = 3 + h(seed, 1, 3) as i32;
+            let d = 3 + h(seed, 2, 2) as i32;
+            let pisos = 5 + h(seed, 3, 5) as i32; // 5..9
+            let ph = 3;
+            let top = pisos * ph;
+            let muro = [Material::Ladrillo, Material::Hormigon, Material::Arcilla][h(seed, 7, 3) as usize];
+            for dy in 0..top {
+                for dx in -w..=w {
+                    for dz in -d..=d {
+                        let borde = dx == -w || dx == w || dz == -d || dz == d;
+                        if borde {
+                            // Ventana en cada piso (mitad de la altura), columnas alternas.
+                            let ventana = dy > 0 && dy % ph == 1 && (dx + dz).rem_euclid(2) == 0;
+                            let puerta = dz == d && dx.abs() <= 1 && dy < 2;
+                            if puerta {
+                                continue;
+                            }
+                            put(dx, dy, dz, if ventana { Material::Vidrio } else { muro });
+                        }
+                    }
+                }
+            }
+            for dx in -w..=w {
+                for dz in -d..=d {
+                    put(dx, top, dz, Material::Hormigon); // azotea
+                }
+            }
+            // Tanque/antena.
+            put(-w + 1, top + 1, -d + 1, Material::Acero);
+        }
+
+        CasaTipo::Iglu => {
+            let r = 4 + h(seed, 1, 2) as i32; // 4..5
+            for dx in -r..=r {
+                for dy in 0..=r {
+                    for dz in -r..=r {
+                        let dd = dx * dx + dy * dy + dz * dz;
+                        if dd <= r * r && dd > (r - 2) * (r - 2) {
+                            put(dx, dy, dz, Material::Snow); // cúpula de nieve
+                        }
+                    }
+                }
+            }
+            for dz in r..=r + 2 {
+                for dx in -1..=1 {
+                    for dy in 0..3 {
+                        if dx * dx + (dy - 1) * (dy - 1) <= 2 {
+                            put(dx, dy, dz, Material::Hielo); // túnel
+                        }
+                    }
+                }
+            }
+        }
+
+        CasaTipo::Palafito => {
+            let w = 3 + h(seed, 1, 2) as i32;
+            let d = 3 + h(seed, 2, 2) as i32;
+            let alto = 4;
+            for &(cx, cz) in &[(-w, -d), (w, -d), (-w, d), (w, d)] {
+                for dy in 0..alto {
+                    put(cx, dy, cz, Material::Madera); // pilotes
+                }
+            }
+            for dx in -w..=w {
+                for dz in -d..=d {
+                    put(dx, alto, dz, Material::Madera); // plataforma
+                }
+            }
+            for dy in (alto + 1)..(alto + 5) {
+                for dx in -w..=w {
+                    for dz in -d..=d {
+                        let borde = dx == -w || dx == w || dz == -d || dz == d;
+                        if borde {
+                            if dz == d && dx.abs() <= 1 && dy < alto + 3 {
+                                continue; // puerta
+                            }
+                            let ventana = (dx == -w || dx == w) && dy == alto + 2;
+                            put(dx, dy, dz, if ventana { Material::Vidrio } else { Material::Madera });
+                        }
+                    }
+                }
+            }
+            for dx in (-w - 1)..=(w + 1) {
+                for dz in (-d - 1)..=(d + 1) {
+                    let slope = (d + 1 - dz.abs()).max(0);
+                    put(dx, alto + 5 + slope, dz, Material::Paja);
+                }
+            }
+            for dy in 0..alto {
+                put(0, dy, d + 1, Material::Madera); // escalera
+            }
+        }
+
+        CasaTipo::Adobe => {
+            let w = 3 + h(seed, 1, 3) as i32;
+            let d = 3 + h(seed, 2, 3) as i32;
+            let h1 = 4;
+            for dy in 0..h1 {
+                for dx in -w..=w {
+                    for dz in -d..=d {
+                        let borde = dx == -w || dx == w || dz == -d || dz == d;
+                        if borde {
+                            if dz == d && dx.abs() <= 1 && dy < 3 {
+                                continue; // puerta
+                            }
+                            let ventana = dy == 2 && dx.abs() == w && dz.abs() == d / 2;
+                            put(dx, dy, dz, if ventana { Material::Vidrio } else { Material::Adobe });
+                        }
+                    }
+                }
+            }
+            for dx in -w..=w {
+                for dz in -d..=d {
+                    put(dx, h1, dz, Material::Adobe); // techo plano
+                }
+            }
+            let mut vx = -w;
+            while vx <= w {
+                put(vx, h1 - 1, d + 1, Material::Madera); // vigas que sobresalen
+                put(vx, h1 - 1, -d - 1, Material::Madera);
+                vx += 2;
+            }
+            let ow = (w - 1).max(1);
+            for dy in h1..(h1 + 3) {
+                for dx in -ow..=(ow - 1) {
+                    for dz in -ow..=(ow - 1) {
+                        let borde = dx == -ow || dx == ow - 1 || dz == -ow || dz == ow - 1;
+                        if borde {
+                            put(dx, dy, dz, Material::Arcilla); // segundo cuerpo apilado
+                        }
+                    }
+                }
+            }
+            for dx in -ow..=(ow - 1) {
+                for dz in -ow..=(ow - 1) {
+                    put(dx, h1 + 3, dz, Material::Adobe);
+                }
+            }
+        }
+
+        CasaTipo::Rascacielos => {
+            let ht = 14 + h(seed, 1, 12) as i32; // 14..25
+            let w = 2 + h(seed, 2, 2) as i32; // 2..3
+            for dy in 0..ht {
+                for dx in -w..=w {
+                    for dz in -w..=w {
+                        let borde = dx == -w || dx == w || dz == -w || dz == w;
+                        if borde {
+                            let esquina = dx.abs() == w && dz.abs() == w;
+                            let banda = dy % 4 == 0;
+                            put(dx, dy, dz, if esquina || banda { Material::Acero } else { Material::Vidrio });
+                        }
+                    }
+                }
+            }
+            for dx in -w..=w {
+                for dz in -w..=w {
+                    put(dx, ht, dz, Material::Hormigon);
+                }
+            }
+            put(0, ht + 1, 0, Material::Acero);
+            put(0, ht + 2, 0, Material::Acero);
+        }
+
+        CasaTipo::Granja => {
+            let w = 3i32;
+            let d = 3i32;
+            for dy in 0..5 {
+                for dx in -w..=w {
+                    for dz in -d..=d {
+                        let borde = dx == -w || dx == w || dz == -d || dz == d;
+                        if borde {
+                            if dz == d && dx.abs() <= 1 && dy < 3 {
+                                continue; // puerta
+                            }
+                            let ventana = dy == 2 && dx.abs() == w && dz == 0;
+                            put(dx, dy, dz, if ventana { Material::Vidrio } else { Material::Yeso });
+                        }
+                    }
+                }
+            }
+            for dx in (-w - 1)..=(w + 1) {
+                for dz in (-d - 1)..=(d + 1) {
+                    let slope = (d + 1 - dz.abs()).max(0);
+                    put(dx, 5 + slope, dz, Material::Teja);
+                }
+            }
+            for dy in 0..7 {
+                put(w, dy, -d + 1, Material::Ladrillo); // chimenea
+            }
+            // Granero al costado.
+            let cx = w + 5;
+            for dy in 0..6 {
+                for dx in (cx - 3)..=(cx + 3) {
+                    for dz in -3..=3 {
+                        let borde = dx == cx - 3 || dx == cx + 3 || dz == -3 || dz == 3;
+                        if borde {
+                            if dz == 3 && (dx - cx).abs() <= 1 && dy < 4 {
+                                continue; // portón
+                            }
+                            put(dx, dy, dz, Material::Ladrillo);
+                        }
+                    }
+                }
+            }
+            for dx in (cx - 4)..=(cx + 4) {
+                for dz in -4i32..=4 {
+                    let slope = (4 - dz.abs()).max(0);
+                    put(dx, 6 + slope, dz, Material::Teja);
+                }
+            }
+        }
+
+        CasaTipo::Torre => {
+            // Torreón de piedra: planta cuadrada, alto variable, almenas arriba.
+            let r = 2 + h(seed, 1, 2) as i32; // 2..3
+            let alto = 8 + h(seed, 2, 6) as i32; // 8..13
+            let piedra = [Material::Granito, Material::Arenisca, Material::Basalto][h(seed, 7, 3) as usize];
+            for dy in 0..alto {
+                for dx in -r..=r {
+                    for dz in -r..=r {
+                        let borde = dx == -r || dx == r || dz == -r || dz == r;
+                        if borde {
+                            if dz == r && dx == 0 && dy < 3 {
+                                continue; // portón
+                            }
+                            // Aspilleras: ranuras verticales angostas.
+                            let aspillera = dy > 2 && dy % 3 == 0 && (dx == 0 || dz == 0);
+                            put(dx, dy, dz, if aspillera { Material::Vidrio } else { piedra });
+                        }
+                    }
+                }
+            }
+            // Almenas: dientes alternados en el borde superior.
+            for dx in -r..=r {
+                for dz in -r..=r {
+                    let borde = dx == -r || dx == r || dz == -r || dz == r;
+                    if borde && (dx + dz).rem_euclid(2) == 0 {
+                        put(dx, alto, dz, piedra);
+                    }
+                }
+            }
+        }
+
+        CasaTipo::Faro => {
+            // Faro: torre cilíndrica con franjas blancas y rojas + linterna acristalada.
+            let alto = 12 + h(seed, 1, 6) as i32; // 12..17
+            let r = 3;
+            for dy in 0..alto {
+                let banda = (dy / 3) % 2 == 0;
+                let piel = if banda { Material::Yeso } else { Material::Ladrillo };
+                for dx in -r..=r {
+                    for dz in -r..=r {
+                        // Aproximación de círculo por radio.
+                        let dist2 = dx * dx + dz * dz;
+                        let anillo = dist2 <= r * r && dist2 > (r - 1) * (r - 1);
+                        if anillo {
+                            if dz == r - 0 && dx == 0 && dy < 3 {
+                                continue; // puerta
+                            }
+                            put(dx, dy, dz, piel);
+                        }
+                    }
+                }
+            }
+            // Galería + linterna de vidrio.
+            for dx in -r..=r {
+                for dz in -r..=r {
+                    if dx * dx + dz * dz <= r * r {
+                        put(dx, alto, dz, Material::Acero);
+                    }
+                }
+            }
+            for dy in (alto + 1)..(alto + 4) {
+                for dx in -(r - 1)..=(r - 1) {
+                    for dz in -(r - 1)..=(r - 1) {
+                        let dist2 = dx * dx + dz * dz;
+                        if dist2 <= (r - 1) * (r - 1) && dist2 > (r - 2).max(0) * (r - 2).max(0) {
+                            put(dx, dy, dz, Material::Vidrio);
+                        }
+                    }
+                }
+            }
+            put(0, alto + 4, 0, Material::Bloom); // remate de la linterna
+        }
+
+        CasaTipo::Choza => {
+            // Choza tropical: paredes bajas de adobe/madera + techo cónico de paja.
+            let r = 2 + h(seed, 1, 2) as i32; // 2..3
+            let pared = if h(seed, 5, 2) == 0 { Material::Adobe } else { Material::Madera };
+            for dy in 0..3 {
+                for dx in -r..=r {
+                    for dz in -r..=r {
+                        let borde = dx == -r || dx == r || dz == -r || dz == r;
+                        if borde {
+                            if dz == r && dx == 0 && dy < 2 {
+                                continue; // vano
+                            }
+                            put(dx, dy, dz, pared);
+                        }
+                    }
+                }
+            }
+            // Techo cónico de paja: capas que se cierran hacia la punta.
+            let mut rr = r + 1;
+            let mut dy = 3;
+            while rr >= 0 {
+                for dx in -rr..=rr {
+                    for dz in -rr..=rr {
+                        if dx.abs() == rr || dz.abs() == rr || rr == 0 {
+                            put(dx, dy, dz, Material::Paja);
+                        }
+                    }
+                }
+                rr -= 1;
+                dy += 1;
+            }
+        }
+
+        CasaTipo::Tienda => {
+            // Local a pie de calle: caja baja, vidriera al frente, toldo y cartel.
+            let w = 4 + h(seed, 1, 3) as i32;
+            let d = 3 + h(seed, 2, 2) as i32;
+            let alto = 4;
+            let muro = [Material::Ladrillo, Material::Yeso, Material::Arcilla][h(seed, 7, 3) as usize];
+            for dy in 0..alto {
+                for dx in -w..=w {
+                    for dz in -d..=d {
+                        let borde = dx == -w || dx == w || dz == -d || dz == d;
+                        if borde {
+                            // Frente (dz == d): vidriera grande + puerta.
+                            if dz == d && dy < 3 {
+                                if dx.abs() <= w - 1 {
+                                    put(dx, dy, dz, Material::Vidrio);
+                                }
+                                continue;
+                            }
+                            put(dx, dy, dz, muro);
+                        }
+                    }
+                }
+            }
+            // Techo plano + cartel.
+            for dx in -w..=w {
+                for dz in -d..=d {
+                    put(dx, alto, dz, Material::Hormigon);
+                }
+            }
+            // Toldo: alero rayado sobre la vidriera.
+            let toldo = [Material::Ladrillo, Material::Bloom, Material::Azul][h(seed, 8, 3) as usize];
+            for dx in -w..=w {
+                put(dx, 3, d + 1, if dx.rem_euclid(2) == 0 { toldo } else { Material::Yeso });
+            }
+            // Cartel sobre el toldo.
+            for dx in -(w - 1)..=(w - 1) {
+                put(dx, alto + 1, d, muro);
+            }
+        }
+
+        CasaTipo::Duplex => {
+            // Dúplex suburbano: dos plantas, techo a dos aguas, garaje anexo.
+            let w = 4 + h(seed, 1, 2) as i32;
+            let d = 4 + h(seed, 2, 2) as i32;
+            let alto = 8; // dos plantas de 4
+            let muro = [Material::Yeso, Material::Ladrillo, Material::Arcilla][h(seed, 7, 3) as usize];
+            for dy in 0..alto {
+                for dx in -w..=w {
+                    for dz in -d..=d {
+                        let borde = dx == -w || dx == w || dz == -d || dz == d;
+                        if borde {
+                            let puerta = dz == d && dx.abs() <= 1 && dy < 3;
+                            if puerta {
+                                continue;
+                            }
+                            // Ventanas: una por planta a media altura.
+                            let ventana = (dy == 2 || dy == 6) && (dx.abs() == 2 || dz.abs() == 2);
+                            put(dx, dy, dz, if ventana { Material::Vidrio } else { muro });
+                        }
+                    }
+                }
+            }
+            // Techo a dos aguas de teja.
+            for dx in (-w - 1)..=(w + 1) {
+                for dz in (-d - 1)..=(d + 1) {
+                    let slope = (d + 1 - dz.abs()).max(0);
+                    put(dx, alto + slope, dz, Material::Teja);
+                }
+            }
+            // Garaje anexo bajo.
+            let gx = w + 4;
+            for dy in 0..4 {
+                for dx in (gx - 3)..=(gx + 3) {
+                    for dz in -3..=3 {
+                        let borde = dx == gx - 3 || dx == gx + 3 || dz == -3 || dz == 3;
+                        if borde {
+                            if dz == 3 && (dx - gx).abs() <= 2 && dy < 3 {
+                                continue; // portón del garaje
+                            }
+                            put(dx, dy, dz, muro);
+                        }
+                    }
+                }
+            }
+            for dx in (gx - 3)..=(gx + 3) {
+                for dz in -3..=3 {
+                    put(dx, 4, dz, Material::Hormigon);
+                }
+            }
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    fn solids(g: &VoxelGrid, dim: [u32; 3]) -> usize {
+        let mut n = 0;
+        for x in 0..dim[0] {
+            for y in 0..dim[1] {
+                for z in 0..dim[2] {
+                    if g.is_solid(x as i32, y as i32, z as i32) {
+                        n += 1;
+                    }
+                }
+            }
+        }
+        n
+    }
+
+    #[test]
+    fn cada_tipo_genera_una_casa() {
+        let dim = [40u32, 40, 40];
+        for tipo in CasaTipo::ALL {
+            let mut g = VoxelGrid::new(dim);
+            stamp_casa(&mut g, tipo, 20, 1, 20, 7);
+            assert!(solids(&g, dim) >= 30, "{} generó muy poco", tipo.label());
+        }
+    }
+
+    #[test]
+    fn misma_semilla_misma_casa_distinta_semilla_distinta() {
+        let dim = [40u32, 40, 40];
+        let build = |seed| {
+            let mut g = VoxelGrid::new(dim);
+            stamp_casa(&mut g, CasaTipo::Cabana, 20, 1, 20, seed);
+            solids(&g, dim)
+        };
+        assert_eq!(build(3), build(3), "misma semilla → misma casa");
+        // Con muchas semillas, al menos algunas dan tamaños distintos.
+        let n: std::collections::BTreeSet<usize> = (0..8).map(build).collect();
+        assert!(n.len() > 1, "distintas semillas dan casas distintas");
+    }
+
+    #[test]
+    fn los_presets_de_pueblo_traen_casas_y_densidad() {
+        for pt in PuebloTipo::ALL {
+            let casas = pt.casas();
+            assert!(!casas.is_empty(), "{} sin casas", pt.label());
+            assert!(casas.iter().all(|c| c.densidad > 0.0), "{} con densidad 0", pt.label());
+            let d = pt.densidad();
+            assert!((0.05..=0.95).contains(&d), "{} densidad fuera de rango: {d}", pt.label());
+        }
+        // La metrópolis es más densa que la aldea.
+        assert!(PuebloTipo::Metropolis.densidad() > PuebloTipo::Aldea.densidad());
+    }
+}
diff --git a/llimphi-voxel/src/conducta.rs b/llimphi-voxel/src/conducta.rs
new file mode 100644
index 0000000..4c2e822
--- /dev/null
+++ b/llimphi-voxel/src/conducta.rs
@@ -0,0 +1,519 @@
+//! `conducta` — **capa 3 del movimiento**: cómo un Ser *decide* moverse por el
+//! mundo. Una [`Conducta`] son parámetros de *steering* (declarativos, como las Leyes
+//! y los Andares); un [`Habitante`] es el agente que los ejecuta sobre la física de
+//! cuerpo del [`Player`] (gravedad + colisión), combinando **deambular** (rumbo que
+//! cambia con la inquietud), **gregarismo** (se acerca a su manada) y **miedo** (huye
+//! de una amenaza). Determinista (LCG por agente; sin `rand`).
+//!
+//! Es CPU puro: el agente expone `pos`/`heading`/`fase`, y la app lo pinta con el
+//! cuerpo del Ser (rig + andar) vía [`CharSpec::to_meta`](crate::CharSpec::to_meta).
+
+use llimphi_3d::glam::Vec3;
+use llimphi_3d::VoxelGrid;
+use serde::{Deserialize, Serialize};
+
+use crate::ecuacion::{Expr, Symbols};
+use crate::{forward_h, Player};
+
+const TAU: f32 = std::f32::consts::TAU;
+/// Radio (voxels) en el que un habitante "ve" a su manada y a la amenaza.
+const RADIO_VISION: f32 = 12.0;
+
+/// **Percepts** que una fórmula de peso de impulso puede leer, en orden (los
+/// `Field` de la tabla de símbolos). Son lo que el agente "siente" cada paso,
+/// normalizado a `[0,1]`:
+/// - `cercania_manada` — 1 = centro de la manada pegado, 0 = lejos/sin manada.
+/// - `cercania_amenaza` — 1 = amenaza encima, 0 = lejos/sin amenaza.
+/// - `apinamiento` — fracción del campo de visión ocupada por vecinos.
+/// - `azar` — ruido determinista por paso (no consume el LCG del deambular).
+/// - `en_suelo` — 1 si está apoyado, 0 en el aire.
+pub const PERCEPTS: [&str; 5] =
+    ["cercania_manada", "cercania_amenaza", "apinamiento", "azar", "en_suelo"];
+/// Nombres de los **parámetros** de la conducta (los sliders), en orden. También son
+/// visibles como variables en las fórmulas de peso (`Param` de la tabla de símbolos).
+pub const PARAMS: [&str; 5] = ["velocidad", "inquietud", "salto", "gregario", "miedo"];
+
+/// **Primitiva de steering**: una dirección base que el agente sabe generar cada
+/// paso. El [`Impulso`] la pondera con una fórmula autorable.
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize)]
+pub enum Primitiva {
+    /// Rumbo de deambular (heading con ruido).
+    Deambular,
+    /// Hacia el centro de la manada visible.
+    Cohesion,
+    /// Lejos del centro de la manada (anti‑apiñamiento).
+    Separacion,
+    /// Lejos de la amenaza.
+    Huir,
+}
+
+impl Primitiva {
+    /// Todas las primitivas, para ciclar en la UI.
+    pub const TODAS: [Primitiva; 4] =
+        [Primitiva::Deambular, Primitiva::Cohesion, Primitiva::Separacion, Primitiva::Huir];
+
+    pub fn label(self) -> &'static str {
+        match self {
+            Primitiva::Deambular => "deambular",
+            Primitiva::Cohesion => "cohesión",
+            Primitiva::Separacion => "separación",
+            Primitiva::Huir => "huir",
+        }
+    }
+
+    /// La siguiente primitiva (ciclo) — para el botón «cambiar» de la UI.
+    pub fn next(self) -> Primitiva {
+        let i = Primitiva::TODAS.iter().position(|&p| p == self).unwrap_or(0);
+        Primitiva::TODAS[(i + 1) % Primitiva::TODAS.len()]
+    }
+}
+
+/// Un **impulso de steering autorable**: una [`Primitiva`] (dirección base) pesada por
+/// una **fórmula** sobre percepts + params. La suma de los impulsos da la dirección
+/// deseada del agente. La fórmula es el texto canónico (se compila con
+/// [`Conducta::symbols`], igual que las Leyes de rejilla).
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub struct Impulso {
+    pub primitiva: Primitiva,
+    /// Fórmula del peso (texto; ej. `"gregario * 1.5"` o `"miedo * 2.5 * cercania_amenaza"`).
+    pub peso: String,
+}
+
+impl Impulso {
+    pub fn new(primitiva: Primitiva, peso: impl Into<String>) -> Self {
+        Self { primitiva, peso: peso.into() }
+    }
+}
+
+/// Los **impulsos por defecto**: reproducen exactamente el steering cableado histórico
+/// (deambular + cohesión·`gregario·1.5` + huida·`miedo·2.5·cercania_amenaza`). Un
+/// [`Conducta`] con `impulsos` vacío usa estos, así los datos viejos siguen andando.
+pub fn default_impulsos() -> Vec<Impulso> {
+    vec![
+        Impulso::new(Primitiva::Deambular, "1"),
+        Impulso::new(Primitiva::Cohesion, "gregario * 1.5"),
+        Impulso::new(Primitiva::Huir, "miedo * 2.5 * cercania_amenaza"),
+    ]
+}
+
+/// **Conducta** de un Ser: parámetros de locomoción (los sliders) + **impulsos de
+/// steering autorables**. Declarativa y editable; la ejecuta un [`Habitante`].
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub struct Conducta {
+    /// Velocidad de marcha (voxels/seg).
+    pub velocidad: f32,
+    /// **Inquietud** `[0,1]`: cuán seguido y fuerte cambia de rumbo al deambular.
+    pub inquietud: f32,
+    /// Probabilidad `[0,1]` de pegar un salto al caminar.
+    pub salto: f32,
+    /// **Gregarismo** `[0,1]`: parámetro visible en las fórmulas (peso de cohesión por
+    /// defecto). No se usa directo: entra por la fórmula del impulso.
+    pub gregario: f32,
+    /// **Miedo** `[0,1]`: parámetro visible en las fórmulas (peso de huida por defecto).
+    pub miedo: f32,
+    /// **Impulsos de steering** autorables. Vacío = [`default_impulsos`] (compat).
+    #[serde(default)]
+    pub impulsos: Vec<Impulso>,
+}
+
+impl Default for Conducta {
+    fn default() -> Self {
+        Self {
+            velocidad: 3.0,
+            inquietud: 0.4,
+            salto: 0.08,
+            gregario: 0.35,
+            miedo: 0.6,
+            impulsos: default_impulsos(),
+        }
+    }
+}
+
+impl Conducta {
+    /// Parámetros editables: `(nombre, valor, min, max)` — para armar sliders.
+    pub fn params(&self) -> [(&'static str, f32, f32, f32); 5] {
+        [
+            ("velocidad", self.velocidad, 0.0, 6.0),
+            ("inquietud", self.inquietud, 0.0, 1.0),
+            ("salto", self.salto, 0.0, 1.0),
+            ("gregario", self.gregario, 0.0, 1.0),
+            ("miedo", self.miedo, 0.0, 1.0),
+        ]
+    }
+    /// Fija el parámetro `i` (en el orden de [`params`](Self::params)).
+    pub fn set(&mut self, i: usize, v: f32) {
+        match i {
+            0 => self.velocidad = v.clamp(0.0, 6.0),
+            1 => self.inquietud = v.clamp(0.0, 1.0),
+            2 => self.salto = v.clamp(0.0, 1.0),
+            3 => self.gregario = v.clamp(0.0, 1.0),
+            4 => self.miedo = v.clamp(0.0, 1.0),
+            _ => {}
+        }
+    }
+
+    /// Los valores de los params en el orden de [`PARAMS`] (entorno para las fórmulas).
+    fn param_env(&self) -> [f32; 5] {
+        [self.velocidad, self.inquietud, self.salto, self.gregario, self.miedo]
+    }
+
+    /// Tabla de símbolos de las fórmulas de peso: percepts como `Field`, params como
+    /// `Param`. La comparte el editor (barra de fórmula) y el compilador del agente.
+    pub fn symbols() -> Symbols {
+        Symbols {
+            campos: PERCEPTS.iter().map(|s| s.to_string()).collect(),
+            params: PARAMS.iter().map(|s| s.to_string()).collect(),
+        }
+    }
+
+    /// Los impulsos efectivos: los propios, o [`default_impulsos`] si está vacío.
+    pub fn impulsos_efectivos(&self) -> Vec<Impulso> {
+        if self.impulsos.is_empty() {
+            default_impulsos()
+        } else {
+            self.impulsos.clone()
+        }
+    }
+
+    /// Compila los impulsos efectivos a `(primitiva, Expr)`. Una fórmula que no parsea
+    /// cae a peso `0` (impulso inerte) — el editor muestra el error aparte.
+    fn compilar(&self) -> Vec<(Primitiva, Expr)> {
+        let sym = Conducta::symbols();
+        self.impulsos_efectivos()
+            .iter()
+            .map(|i| (i.primitiva, Expr::parse(&i.peso, &sym).unwrap_or(Expr::Const(0.0))))
+            .collect()
+    }
+}
+
+/// Un **habitante**: un agente que ejecuta una [`Conducta`] sobre la física del
+/// [`Player`]. La app lo pinta con el cuerpo del Ser que representa.
+#[derive(Debug, Clone)]
+pub struct Habitante {
+    body: Player,
+    conducta: Conducta,
+    /// Impulsos compilados (fórmula de peso ya parseada) — se rearman al editar la
+    /// conducta, no en el loop caliente.
+    impulsos: Vec<(Primitiva, Expr)>,
+    /// Rumbo actual (yaw, rad; `0` mira a `+Z`).
+    heading: f32,
+    /// Fase de animación (avanza al caminar) para el andar del cuerpo.
+    pub fase: f32,
+    /// Cuenta atrás hasta el próximo cambio de rumbo (deambular).
+    timer: f32,
+    /// Pide saltar el próximo paso.
+    jump: bool,
+    /// LCG (azar determinista por habitante).
+    rng: u32,
+}
+
+impl Habitante {
+    /// Habitante posado sobre la columna `(x, z)` del grid, con su conducta y semilla.
+    pub fn spawn(grid: &VoxelGrid, x: u32, z: u32, conducta: Conducta, seed: u32) -> Self {
+        let mut body = Player::spawn_on(grid, x, z);
+        body.speed = conducta.velocidad;
+        let impulsos = conducta.compilar();
+        let mut h = Self {
+            body,
+            conducta,
+            impulsos,
+            heading: 0.0,
+            fase: 0.0,
+            timer: 0.0,
+            jump: false,
+            rng: seed | 1,
+        };
+        h.heading = h.next() * TAU;
+        h
+    }
+
+    /// Posición (espacio de grilla, igual que el terreno).
+    pub fn pos(&self) -> Vec3 {
+        self.body.pos
+    }
+    /// Rumbo actual (para orientar el cuerpo).
+    pub fn heading(&self) -> f32 {
+        self.heading
+    }
+
+    /// Actualiza la conducta en caliente (para reflejar ediciones sin re-spawnear).
+    /// Recompila los impulsos (parseo de las fórmulas de peso).
+    pub fn set_conducta(&mut self, c: Conducta) {
+        self.impulsos = c.compilar();
+        self.conducta = c;
+    }
+
+    /// Avanza `dt`: arma la **dirección deseada** como suma ponderada de los impulsos
+    /// autorables (cada primitiva genera una dirección base; su fórmula de peso la
+    /// escala según los percepts y params), y mueve el cuerpo. `vecinos` son las
+    /// posiciones de los demás habitantes (la propia se ignora por distancia ~0).
+    pub fn step(&mut self, grid: &VoxelGrid, vecinos: &[Vec3], amenaza: Option<Vec3>, dt: f32) {
+        let velocidad = self.conducta.velocidad;
+        let inquietud = self.conducta.inquietud;
+        let salto = self.conducta.salto;
+
+        // Deambular: cada tanto, empujar el rumbo (más inquietud = más seguido/fuerte).
+        self.timer -= dt;
+        if self.timer <= 0.0 {
+            self.heading += (self.next() - 0.5) * (0.5 + 2.0 * inquietud);
+            self.timer = (1.4 - inquietud).max(0.25) + self.next() * 1.5;
+            self.jump = self.next() < salto;
+        }
+
+        let pos = self.body.pos;
+
+        // --- Percepts (deterministas; NO consumen el LCG del deambular) ------------
+        // Centro y densidad de la manada visible.
+        let mut centro = Vec3::ZERO;
+        let mut n = 0.0f32;
+        for &v in vecinos {
+            let d = (v - pos).length();
+            if d > 0.3 && d < RADIO_VISION {
+                centro += v;
+                n += 1.0;
+            }
+        }
+        let (hacia_manada, cercania_manada) = if n > 0.0 {
+            let rel = (centro / n) - pos;
+            let d = rel.length();
+            (horiz_norm(rel), (1.0 - d / RADIO_VISION).clamp(0.0, 1.0))
+        } else {
+            (Vec3::ZERO, 0.0)
+        };
+        let apinamiento = (n / 8.0).min(1.0);
+
+        let (lejos_amenaza, cercania_amenaza) = match amenaza {
+            Some(a) => {
+                let d = (pos - a).length();
+                if d > 0.01 && d < RADIO_VISION {
+                    (horiz_norm(pos - a), 1.0 - d / RADIO_VISION)
+                } else {
+                    (Vec3::ZERO, 0.0)
+                }
+            }
+            None => (Vec3::ZERO, 0.0),
+        };
+
+        // Ruido determinista por paso, sin avanzar el LCG (mezcla del estado actual):
+        // así el orden de sorteos del deambular no cambia y la sim sigue reproducible.
+        let azar = {
+            let mut h = self.rng;
+            h ^= h >> 13;
+            h = h.wrapping_mul(0x9E37_79B1);
+            h ^= h >> 16;
+            (h >> 8) as f32 / (1u32 << 24) as f32
+        };
+        let en_suelo = if self.body.on_ground { 1.0 } else { 0.0 };
+
+        let percepts = [cercania_manada, cercania_amenaza, apinamiento, azar, en_suelo];
+        let params = self.conducta.param_env();
+
+        // --- Suma ponderada de los impulsos autorables ----------------------------
+        let mut desired = Vec3::ZERO;
+        for (prim, peso) in &self.impulsos {
+            let dir = match prim {
+                Primitiva::Deambular => forward_h(self.heading),
+                Primitiva::Cohesion => hacia_manada,
+                Primitiva::Separacion => -hacia_manada,
+                Primitiva::Huir => lejos_amenaza,
+            };
+            let w = peso.eval_scalar(&percepts, &params, dt);
+            desired += dir * w;
+        }
+
+        // Girar el rumbo hacia la dirección deseada (suave, con tope por paso).
+        let desired = horiz_norm(desired);
+        if desired.length_squared() > 1e-4 {
+            let objetivo = desired.x.atan2(desired.z);
+            let giro_max = (4.0 + 6.0 * inquietud) * dt;
+            self.heading = acercar_angulo(self.heading, objetivo, giro_max);
+        }
+
+        // Mover el cuerpo; rebotar si choca (no quedar empujando una pared).
+        self.body.speed = velocidad;
+        let before = self.body.pos;
+        let jump = self.jump && self.body.on_ground;
+        self.body.step(grid, forward_h(self.heading), jump, dt);
+        self.jump = false;
+
+        let movido = (self.body.pos - before).length();
+        if self.body.on_ground && movido < 0.2 * velocidad * dt {
+            self.heading += TAU * 0.5 + (self.next() - 0.5);
+            self.timer = 0.5;
+        }
+        // La fase de animación avanza con el movimiento (para el andar de caminata).
+        self.fase += dt * (3.0 + velocidad);
+    }
+
+    /// Próximo `f32` en `[0,1)` del LCG.
+    fn next(&mut self) -> f32 {
+        self.rng = self.rng.wrapping_mul(1664525).wrapping_add(1013904223);
+        (self.rng >> 8) as f32 / (1u32 << 24) as f32
+    }
+}
+
+/// Normaliza un vector en el plano horizontal (Y=0); cero si es ~nulo.
+fn horiz_norm(v: Vec3) -> Vec3 {
+    let h = Vec3::new(v.x, 0.0, v.z);
+    let l = h.length();
+    if l > 1e-5 {
+        h / l
+    } else {
+        Vec3::ZERO
+    }
+}
+
+/// Acerca `a` hacia `b` (ángulos, rad) a lo sumo `max` por paso, por el lado corto.
+fn acercar_angulo(a: f32, b: f32, max: f32) -> f32 {
+    let mut d = (b - a) % TAU;
+    if d > std::f32::consts::PI {
+        d -= TAU;
+    }
+    if d < -std::f32::consts::PI {
+        d += TAU;
+    }
+    a + d.clamp(-max, max)
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    /// Arena 48×48 con piso y **paredes** perimetrales (corral): los habitantes
+    /// rebotan y no se caen por el borde.
+    fn grid_con_piso() -> VoxelGrid {
+        let n = 48u32;
+        let mut g = VoxelGrid::new([n, 8, n]);
+        for z in 0..n {
+            for x in 0..n {
+                g.set(x, 0, z, [90, 140, 80]);
+                if x == 0 || x == n - 1 || z == 0 || z == n - 1 {
+                    for y in 1..6 {
+                        g.set(x, y, z, [120, 120, 120]);
+                    }
+                }
+            }
+        }
+        g
+    }
+
+    #[test]
+    fn deambula_y_no_atraviesa_el_piso() {
+        let g = grid_con_piso();
+        let mut h = Habitante::spawn(&g, 24, 24, Conducta::default(), 7);
+        let start = h.pos();
+        for _ in 0..600 {
+            h.step(&g, &[], None, 1.0 / 60.0);
+            assert!(h.pos().y >= 1.0 - 0.05, "se hundió: y={}", h.pos().y);
+        }
+        assert!((h.pos() - start).length() > 1.0, "no deambuló");
+    }
+
+    #[test]
+    fn gregario_los_junta_mas_que_indiferentes() {
+        let g = grid_con_piso();
+        // Dos pares lejos entre sí; uno gregario, otro no. Tras un rato, los gregarios
+        // quedan más cerca entre sí que los indiferentes.
+        let separacion = |gregario: f32, seed: u32| {
+            let mut c = Conducta::default();
+            c.gregario = gregario;
+            c.inquietud = 0.2;
+            let mut a = Habitante::spawn(&g, 18, 24, c.clone(), seed);
+            let mut b = Habitante::spawn(&g, 30, 24, c, seed + 100);
+            for _ in 0..900 {
+                let pa = a.pos();
+                let pb = b.pos();
+                a.step(&g, &[pb], None, 1.0 / 60.0);
+                b.step(&g, &[pa], None, 1.0 / 60.0);
+            }
+            (a.pos() - b.pos()).length()
+        };
+        let juntos = separacion(1.0, 1);
+        let sueltos = separacion(0.0, 1);
+        assert!(juntos < sueltos, "gregarios más cerca ({juntos:.1}) que sueltos ({sueltos:.1})");
+    }
+
+    #[test]
+    fn impulsos_por_defecto_parsean_y_reproducen_los_pesos() {
+        // Las fórmulas de fábrica compilan contra los símbolos de la conducta, y sus
+        // pesos evalúan a los valores cableados históricos.
+        let sym = Conducta::symbols();
+        let c = Conducta::default();
+        let env_params = c.param_env();
+        // percepts: cercania_amenaza=1 (amenaza encima).
+        let percepts = [0.0, 1.0, 0.0, 0.0, 1.0];
+        for imp in default_impulsos() {
+            let e = Expr::parse(&imp.peso, &sym).expect("la fórmula de fábrica parsea");
+            let w = e.eval_scalar(&percepts, &env_params, 1.0 / 60.0);
+            match imp.primitiva {
+                Primitiva::Deambular => assert!((w - 1.0).abs() < 1e-4),
+                // gregario=0.35 → 0.35*1.5 = 0.525
+                Primitiva::Cohesion => assert!((w - 0.525).abs() < 1e-4, "cohesión peso={w}"),
+                // miedo=0.6, cercania=1 → 0.6*2.5*1 = 1.5
+                Primitiva::Huir => assert!((w - 1.5).abs() < 1e-4, "huida peso={w}"),
+                _ => {}
+            }
+        }
+    }
+
+    #[test]
+    fn impulso_autorado_cambia_la_conducta() {
+        // Un ser con SÓLO cohesión fuerte se junta más que uno con SÓLO separación,
+        // partiendo de la misma posición y semilla: la fórmula autorada manda.
+        let g = grid_con_piso();
+        let corrida = |imp: Impulso| {
+            let mut c = Conducta::default();
+            c.inquietud = 0.1;
+            c.impulsos = vec![Impulso::new(Primitiva::Deambular, "0.2"), imp];
+            let mut a = Habitante::spawn(&g, 18, 24, c.clone(), 1);
+            let mut b = Habitante::spawn(&g, 30, 24, c, 101);
+            for _ in 0..900 {
+                let pa = a.pos();
+                let pb = b.pos();
+                a.step(&g, &[pb], None, 1.0 / 60.0);
+                b.step(&g, &[pa], None, 1.0 / 60.0);
+            }
+            (a.pos() - b.pos()).length()
+        };
+        let junta = corrida(Impulso::new(Primitiva::Cohesion, "2"));
+        let separa = corrida(Impulso::new(Primitiva::Separacion, "2"));
+        assert!(junta < separa, "cohesión junta ({junta:.1}) vs separación aleja ({separa:.1})");
+    }
+
+    #[test]
+    fn determinismo_con_impulsos_autorados() {
+        // Dos corridas idénticas de un ser con impulsos autorados dan el mismo recorrido:
+        // el percept `azar` no rompe el determinismo (no consume el LCG).
+        let g = grid_con_piso();
+        let run = || {
+            let mut c = Conducta::default();
+            c.impulsos = vec![
+                Impulso::new(Primitiva::Deambular, "1 + azar"),
+                Impulso::new(Primitiva::Huir, "miedo * cercania_amenaza"),
+            ];
+            let amenaza = Some(Vec3::new(24.5, 1.0, 24.5));
+            let mut h = Habitante::spawn(&g, 20, 24, c, 9);
+            for _ in 0..500 {
+                h.step(&g, &[], amenaza, 1.0 / 60.0);
+            }
+            h.pos()
+        };
+        assert_eq!(run(), run(), "misma evolución bit a bit");
+    }
+
+    #[test]
+    fn miedo_aleja_de_la_amenaza() {
+        let g = grid_con_piso();
+        let amenaza = Vec3::new(24.5, 1.0, 24.5);
+        let mut c = Conducta::default();
+        c.miedo = 1.0;
+        c.inquietud = 0.1;
+        let mut h = Habitante::spawn(&g, 22, 24, c, 5); // arranca cerca de la amenaza
+        let d0 = (h.pos() - amenaza).length();
+        for _ in 0..600 {
+            h.step(&g, &[], Some(amenaza), 1.0 / 60.0);
+        }
+        let d1 = (h.pos() - amenaza).length();
+        assert!(d1 > d0 + 2.0, "huyó de la amenaza: {d0:.1} → {d1:.1}");
+    }
+}
diff --git a/llimphi-voxel/src/documento.rs b/llimphi-voxel/src/documento.rs
new file mode 100644
index 0000000..fbc8c10
--- /dev/null
+++ b/llimphi-voxel/src/documento.rs
@@ -0,0 +1,432 @@
+// =============================================================================
+//  llimphi-voxel :: documento — abrir, guardar y combinar escenas
+// -----------------------------------------------------------------------------
+//  El estudio administra su trabajo por ARCHIVOS. Un `Documento` envuelve un
+//  `Project` (los seis niveles: Leyes → Materiales → Seres → Biomas → Mundos →
+//  Escenas) con una marca y una versión, y se serializa en RON —editable a mano,
+//  diffeable, combinable—. Tres operaciones lo gobiernan:
+//
+//    * ABRIR / GUARDAR: `Documento::abrir` / `guardar` (o `de_ron`/`a_ron` sin
+//      tocar disco, para que la UI decida el path).
+//    * COMBINAR: `Project::combinar` funde otro proyecto dentro, REMAPEANDO ids
+//      e índices para que nada colisione y TODAS las referencias cruzadas se
+//      reconecten. Es lo que permite armar una escena juntando piezas de varios
+//      archivos.
+//    * EXTRAER: `Project::extraer_escena` saca una escena con TODA su clausura
+//      de dependencias (su mundo, sus biomas, sus materiales/seres, sus leyes)
+//      en un proyecto mínimo y portable — el fragmento que se comparte y se
+//      combina en otro lado.
+//
+//  Núcleo agnóstico de UI (vive en `llimphi-voxel`, no en el studio): la lógica
+//  de archivos es del dominio; el frontend sólo elige rutas y pinta botones.
+// =============================================================================
+
+use std::collections::{BTreeSet, HashMap};
+use std::path::Path;
+
+use serde::{Deserialize, Serialize};
+
+use crate::studio::Project;
+
+/// Marca del format — distingue un documento del estudio de un RON ajeno.
+pub const MAGIA_DOC: &str = "tawasuyu-voxel-studio";
+/// Versión del format serializado. Sube al cambiar la forma de `Project`.
+pub const VERSION_DOC: u32 = 1;
+
+/// Por qué falló abrir, guardar o parsear un documento.
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub enum ErrorDoc {
+    /// No se pudo serializar el proyecto a texto.
+    Serializar(String),
+    /// El texto no es un documento válido.
+    Parsear(String),
+    /// El archivo no lleva nuestra marca — es otro tipo de RON.
+    MagiaAjena,
+    /// El archivo es de una versión más nueva que la que este binario entiende.
+    VersionFutura(u32),
+    /// Se pidió extraer/combinar una escena que no existe.
+    EscenaAusente(u64),
+    /// Fallo de lectura/escritura en disco.
+    Io(String),
+}
+
+impl std::fmt::Display for ErrorDoc {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            ErrorDoc::Serializar(e) => write!(f, "no se pudo serializar: {e}"),
+            ErrorDoc::Parsear(e) => write!(f, "no se pudo leer el documento: {e}"),
+            ErrorDoc::MagiaAjena => write!(f, "el archivo no es un documento del studio"),
+            ErrorDoc::VersionFutura(v) => write!(f, "documento de una versión más nueva (v{v})"),
+            ErrorDoc::EscenaAusente(id) => write!(f, "no existe la escena {id}"),
+            ErrorDoc::Io(e) => write!(f, "error de disco: {e}"),
+        }
+    }
+}
+
+impl std::error::Error for ErrorDoc {}
+
+/// Un documento del estudio: el proyecto entero, con marca y versión.
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct Documento {
+    /// Debe ser [`MAGIA_DOC`].
+    pub magia: String,
+    /// Versión del format (ver [`VERSION_DOC`]).
+    pub version: u32,
+    /// El proyecto — los seis niveles.
+    pub proyecto: Project,
+}
+
+impl Documento {
+    /// Envuelve un proyecto en un documento de la versión actual.
+    pub fn nuevo(proyecto: Project) -> Self {
+        Self {
+            magia: MAGIA_DOC.to_string(),
+            version: VERSION_DOC,
+            proyecto,
+        }
+    }
+
+    /// Serializa a RON legible.
+    pub fn a_ron(&self) -> Result<String, ErrorDoc> {
+        ron::ser::to_string_pretty(self, ron::ser::PrettyConfig::default())
+            .map_err(|e| ErrorDoc::Serializar(e.to_string()))
+    }
+
+    /// Parsea desde RON, verificando la marca y la versión. Un archivo con marca
+    /// ajena o de una versión futura se rechaza en vez de malinterpretarse.
+    pub fn de_ron(texto: &str) -> Result<Documento, ErrorDoc> {
+        let doc: Documento = ron::from_str(texto).map_err(|e| ErrorDoc::Parsear(e.to_string()))?;
+        if doc.magia != MAGIA_DOC {
+            return Err(ErrorDoc::MagiaAjena);
+        }
+        if doc.version > VERSION_DOC {
+            return Err(ErrorDoc::VersionFutura(doc.version));
+        }
+        Ok(doc)
+    }
+
+    /// Guarda el documento en `path` (RON). La UI elige la ruta.
+    pub fn guardar(&self, path: impl AsRef<Path>) -> Result<(), ErrorDoc> {
+        let texto = self.a_ron()?;
+        std::fs::write(path, texto).map_err(|e| ErrorDoc::Io(e.to_string()))
+    }
+
+    /// Abre un documento desde `path` (RON).
+    pub fn abrir(path: impl AsRef<Path>) -> Result<Documento, ErrorDoc> {
+        let texto = std::fs::read_to_string(path).map_err(|e| ErrorDoc::Io(e.to_string()))?;
+        Self::de_ron(&texto)
+    }
+
+    /// Serializa al format NATIVO compacto (postcard, determinista) — el mismo
+    /// que usa el resto de la suite en disco/cable. Para archivos chicos y
+    /// direccionables por contenido (BLAKE3). La UI elige RON o postcard.
+    pub fn a_bytes(&self) -> Result<Vec<u8>, ErrorDoc> {
+        postcard::to_allocvec(self).map_err(|e| ErrorDoc::Serializar(e.to_string()))
+    }
+
+    /// Parsea desde el format nativo compacto, verificando marca y versión.
+    pub fn de_bytes(bytes: &[u8]) -> Result<Documento, ErrorDoc> {
+        let doc: Documento = postcard::from_bytes(bytes).map_err(|e| ErrorDoc::Parsear(e.to_string()))?;
+        if doc.magia != MAGIA_DOC {
+            return Err(ErrorDoc::MagiaAjena);
+        }
+        if doc.version > VERSION_DOC {
+            return Err(ErrorDoc::VersionFutura(doc.version));
+        }
+        Ok(doc)
+    }
+}
+
+/// El mapeo de ids viejos → nuevos que produjo una combinación. Útil para que la
+/// UI reubique la selección tras combinar, o para depurar.
+#[derive(Debug, Clone, Default)]
+pub struct Remapeo {
+    /// id en el proyecto de origen → id nuevo en el destino.
+    pub id: HashMap<u64, u64>,
+    /// índice de `seres` en el origen → índice en el destino (los actores de una
+    /// escena referencian al ser por POSICIÓN, no por id).
+    pub indice_sere: HashMap<usize, usize>,
+}
+
+impl Remapeo {
+    /// El id nuevo de `viejo`, o el mismo si no estaba en el mapa (referencia
+    /// colgante en el origen — se deja como estaba, no se inventa).
+    fn id(&self, viejo: u64) -> u64 {
+        *self.id.get(&viejo).unwrap_or(&viejo)
+    }
+}
+
+impl Project {
+    /// Combina `otro` DENTRO de este proyecto. Reserva ids nuevos para cada item
+    /// de `otro`, clona sus items y reconecta TODAS las referencias cruzadas
+    /// (parents de material, leyes usadas, materiales/seres de bioma, biomas de
+    /// mundo, mundo de escena, e índices de actor). Nada colisiona y nada queda
+    /// apuntando al proyecto viejo. Devuelve el [`Remapeo`] aplicado.
+    pub fn combinar(&mut self, otro: &Project) -> Remapeo {
+        let mut r = Remapeo::default();
+        let offset_seres = self.seres.len();
+
+        // 1. Reservar un id nuevo para cada item de `otro`, en orden de nivel.
+        for l in &otro.leyes {
+            r.id.insert(l.id, self.alloc_id());
+        }
+        for m in &otro.materiales {
+            r.id.insert(m.id, self.alloc_id());
+        }
+        for s in &otro.seres {
+            r.id.insert(s.id, self.alloc_id());
+        }
+        for b in &otro.biomas {
+            r.id.insert(b.id, self.alloc_id());
+        }
+        for w in &otro.mundos {
+            r.id.insert(w.id, self.alloc_id());
+        }
+        for e in &otro.escenas {
+            r.id.insert(e.id, self.alloc_id());
+        }
+
+        // 2. Clonar y reescribir cada item con sus referencias remapeadas.
+        for l in &otro.leyes {
+            let mut l = l.clone();
+            l.id = r.id(l.id);
+            self.leyes.push(l);
+        }
+        for m in &otro.materiales {
+            let mut m = m.clone();
+            m.id = r.id(m.id);
+            m.parent = m.parent.map(|p| r.id(p));
+            for uso in &mut m.leyes {
+                uso.ley = r.id(uso.ley);
+            }
+            self.materiales.push(m);
+        }
+        for (i, s) in otro.seres.iter().enumerate() {
+            let mut s = s.clone();
+            s.id = r.id(s.id);
+            r.indice_sere.insert(i, offset_seres + i);
+            self.seres.push(s);
+        }
+        for b in &otro.biomas {
+            let mut b = b.clone();
+            b.id = r.id(b.id);
+            b.ground = r.id(b.ground);
+            b.cliff = r.id(b.cliff);
+            b.peak = b.peak.map(|p| r.id(p));
+            for o in &mut b.objetos {
+                o.material = r.id(o.material);
+            }
+            for uso in &mut b.seres {
+                uso.sere = r.id(uso.sere);
+            }
+            self.biomas.push(b);
+        }
+        for w in &otro.mundos {
+            let mut w = w.clone();
+            w.id = r.id(w.id);
+            for bid in &mut w.biomas {
+                *bid = r.id(*bid);
+            }
+            self.mundos.push(w);
+        }
+        for e in &otro.escenas {
+            let mut e = e.clone();
+            e.id = r.id(e.id);
+            e.mundo = r.id(e.mundo);
+            for a in &mut e.actors {
+                a.character += offset_seres;
+            }
+            for s in &mut e.sucesos {
+                if let crate::studio::TipoSuceso::Aparece(id) = &mut s.tipo {
+                    if *id != 0 {
+                        *id = r.id(*id);
+                    }
+                }
+            }
+            self.escenas.push(e);
+        }
+
+        r
+    }
+
+    /// Extrae la escena `escena_id` con TODA su clausura de dependencias en un
+    /// `Project` nuevo, mínimo y portable: sólo el mundo, los biomas, los
+    /// materiales (con su cadena de padres y sus leyes), los seres y las leyes
+    /// que la escena realmente usa. Los índices de actor se reajustan al
+    /// subconjunto de seres. `None` si la escena no existe.
+    pub fn extraer_escena(&self, escena_id: u64) -> Option<Project> {
+        let escena = self.escenas.iter().find(|e| e.id == escena_id)?.clone();
+
+        // --- Recolectar los ids necesarios, nivel por nivel ---
+        let mut mundos = BTreeSet::new();
+        let mut biomas = BTreeSet::new();
+        let mut materiales = BTreeSet::new();
+        let mut seres = BTreeSet::new();
+        let mut leyes = BTreeSet::new();
+
+        mundos.insert(escena.mundo);
+        if let Some(w) = self.mundo(escena.mundo) {
+            for &bid in &w.biomas {
+                biomas.insert(bid);
+            }
+        }
+        for &bid in &biomas {
+            if let Some(b) = self.bioma(bid) {
+                materiales.insert(b.ground);
+                materiales.insert(b.cliff);
+                if let Some(p) = b.peak {
+                    materiales.insert(p);
+                }
+                for o in &b.objetos {
+                    materiales.insert(o.material);
+                }
+                for uso in &b.seres {
+                    seres.insert(uso.sere);
+                }
+            }
+        }
+        // Los actores de la escena referencian seres por índice → sumar sus ids.
+        for a in &escena.actors {
+            if let Some(s) = self.seres.get(a.character) {
+                seres.insert(s.id);
+            }
+        }
+        // Los sucesos "aparece un ser" también arrastran ese ser a la clausura.
+        for s in &escena.sucesos {
+            if let crate::studio::TipoSuceso::Aparece(id) = s.tipo {
+                if id != 0 {
+                    seres.insert(id);
+                }
+            }
+        }
+        // Cerrar la clausura de materiales: cadena de padres + leyes usadas.
+        let mut pendientes: Vec<u64> = materiales.iter().copied().collect();
+        while let Some(mid) = pendientes.pop() {
+            if let Some(m) = self.material(mid) {
+                if let Some(p) = m.parent {
+                    if materiales.insert(p) {
+                        pendientes.push(p);
+                    }
+                }
+                for uso in &m.leyes {
+                    leyes.insert(uso.ley);
+                }
+            }
+        }
+
+        // --- Construir el proyecto extraído (ids conservados) ---
+        let mut out = Project {
+            next_id: self.next_id,
+            ..Default::default()
+        };
+        out.leyes = self.leyes.iter().filter(|l| leyes.contains(&l.id)).cloned().collect();
+        out.materiales =
+            self.materiales.iter().filter(|m| materiales.contains(&m.id)).cloned().collect();
+
+        // Seres: subconjunto en el orden original, y un mapa índice viejo→nuevo
+        // para reajustar los actores.
+        let mut idx_map = HashMap::new();
+        for (viejo, s) in self.seres.iter().enumerate() {
+            if seres.contains(&s.id) {
+                idx_map.insert(viejo, out.seres.len());
+                out.seres.push(s.clone());
+            }
+        }
+
+        out.biomas = self.biomas.iter().filter(|b| biomas.contains(&b.id)).cloned().collect();
+        out.mundos = self.mundos.iter().filter(|w| mundos.contains(&w.id)).cloned().collect();
+
+        let mut escena = escena;
+        for a in &mut escena.actors {
+            if let Some(&nuevo) = idx_map.get(&a.character) {
+                a.character = nuevo;
+            }
+        }
+        out.escenas = vec![escena];
+
+        Some(out)
+    }
+
+    /// Combina en este proyecto SÓLO la escena `escena_id` de `otro` (con su
+    /// clausura). Azúcar sobre `extraer_escena` + `combinar`. Error si la escena
+    /// no existe en `otro`.
+    pub fn combinar_escena(&mut self, otro: &Project, escena_id: u64) -> Result<Remapeo, ErrorDoc> {
+        let fragmento = otro
+            .extraer_escena(escena_id)
+            .ok_or(ErrorDoc::EscenaAusente(escena_id))?;
+        Ok(self.combinar(&fragmento))
+    }
+
+    /// Verifica que TODA referencia cruzada del proyecto apunte a un item que
+    /// existe: material→parent/ley, bioma→material/sere, mundo→bioma, escena→
+    /// mundo, actor→sere (por índice). Devuelve la lista de referencias rotas
+    /// (vacía = íntegro). La UI la usa para avisar tras abrir o combinar.
+    pub fn validar_referencias(&self) -> Vec<String> {
+        let mut rotas = Vec::new();
+        let tiene_ley = |id: u64| self.leyes.iter().any(|l| l.id == id);
+        let tiene_mat = |id: u64| self.materiales.iter().any(|m| m.id == id);
+        let tiene_sere = |id: u64| self.seres.iter().any(|s| s.id == id);
+        let tiene_bioma = |id: u64| self.biomas.iter().any(|b| b.id == id);
+        let tiene_mundo = |id: u64| self.mundos.iter().any(|w| w.id == id);
+
+        for m in &self.materiales {
+            if let Some(p) = m.parent {
+                if !tiene_mat(p) {
+                    rotas.push(format!("material {} → parent {} inexistente", m.id, p));
+                }
+            }
+            for uso in &m.leyes {
+                if !tiene_ley(uso.ley) {
+                    rotas.push(format!("material {} → ley {} inexistente", m.id, uso.ley));
+                }
+            }
+        }
+        for b in &self.biomas {
+            for (etiqueta, id) in [("ground", b.ground), ("cliff", b.cliff)] {
+                if !tiene_mat(id) {
+                    rotas.push(format!("bioma {} → {} {} inexistente", b.id, etiqueta, id));
+                }
+            }
+            if let Some(p) = b.peak {
+                if !tiene_mat(p) {
+                    rotas.push(format!("bioma {} → peak {} inexistente", b.id, p));
+                }
+            }
+            for o in &b.objetos {
+                if !tiene_mat(o.material) {
+                    rotas.push(format!("bioma {} → objeto/material {} inexistente", b.id, o.material));
+                }
+            }
+            for uso in &b.seres {
+                if !tiene_sere(uso.sere) {
+                    rotas.push(format!("bioma {} → sere {} inexistente", b.id, uso.sere));
+                }
+            }
+        }
+        for w in &self.mundos {
+            for &bid in &w.biomas {
+                if !tiene_bioma(bid) {
+                    rotas.push(format!("mundo {} → bioma {} inexistente", w.id, bid));
+                }
+            }
+        }
+        for e in &self.escenas {
+            if !tiene_mundo(e.mundo) {
+                rotas.push(format!("escena {} → mundo {} inexistente", e.id, e.mundo));
+            }
+            for (i, a) in e.actors.iter().enumerate() {
+                if self.seres.get(a.character).is_none() {
+                    rotas.push(format!("escena {} → actor {} índice de sere {} fuera de rango", e.id, i, a.character));
+                }
+            }
+            for (i, s) in e.sucesos.iter().enumerate() {
+                if let crate::studio::TipoSuceso::Aparece(id) = s.tipo {
+                    if id != 0 && !tiene_sere(id) {
+                        rotas.push(format!("escena {} → suceso {} aparece ser {} inexistente", e.id, i, id));
+                    }
+                }
+            }
+        }
+        rotas
+    }
+}
diff --git a/llimphi-voxel/src/ecuacion.rs b/llimphi-voxel/src/ecuacion.rs
new file mode 100644
index 0000000..95030d1
--- /dev/null
+++ b/llimphi-voxel/src/ecuacion.rs
@@ -0,0 +1,1004 @@
+//! `ecuacion` — **motor de Leyes autorables**: una Ley deja de ser un autómata
+//! cableado en Rust y pasa a ser un **sistema de ecuaciones de actualización sobre
+//! los campos de estado de la celda**, escrito por el usuario y **compilado** una vez
+//! a opcodes para correr en el loop caliente.
+//!
+//! El modelo: cada material lleva un vector chico de **campos** escalares
+//! ([`FieldDef`]: `cantidad`, `energía`, `temperatura`, `edad`…). Una Ley es una lista
+//! de asignaciones `Δcampoₖ/dt = fₖ(campos, vecinos, params)` — un [`Program`]. Cada
+//! tick, el motor integra `campo' = clamp(campo + dt·fₖ, min, max)` sobre toda la
+//! rejilla.
+//!
+//! **Determinista** (regla §1.5 de la sim): se evalúa estilo **Jacobi** — `fₖ` lee
+//! sólo el estado del tick anterior (buffer `cur`) y escribe en `next`, así el
+//! resultado no depende del orden de barrido. Mismas condiciones → misma evolución,
+//! sin azar y sin sesgo de recorrido (a diferencia de Gauss–Seidel).
+//!
+//! Esto **generaliza** la ley `Crecer` (un campo `altura` que sube) y abre reacción‑
+//! difusión (Gray–Scott), difusión de calor, fuego, erosión… con la misma máquina.
+//! NO reemplaza a [`WaterSim`](crate::WaterSim): ese es un autómata que *mueve celdas*
+//! (conserva masa), otra discretización, y sigue como fast‑path nativo aparte.
+//!
+//! El mismo AST [`Expr`] alimenta las **dos vistas de autoría**: la barra de fórmula
+//! (parser [`Expr::parse`] ↔ printer [`Expr::to_source`]) y, a futuro, el grafo de
+//! nodos. Ambas serializan a este `Expr`, así se editan indistintamente.
+
+use serde::{Deserialize, Serialize};
+
+/// Índice de un campo de estado dentro del material (posición en su `Vec<FieldDef>`).
+pub type FieldId = u16;
+/// Índice de un parámetro del material (los sliders que ya expone la UI).
+pub type ParamId = u16;
+
+/// Un **campo de estado** de la celda: un escalar con nombre, valor inicial y rango.
+/// El material declara los suyos; las ecuaciones los leen y escriben por nombre.
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub struct FieldDef {
+    pub name: String,
+    pub init: f32,
+    pub min: f32,
+    pub max: f32,
+}
+
+impl FieldDef {
+    pub fn new(name: impl Into<String>, init: f32, min: f32, max: f32) -> Self {
+        Self { name: name.into(), init, min, max }
+    }
+}
+
+/// Dirección de un vecino de 6‑conectividad (caras del cubo).
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize)]
+pub enum Dir {
+    Abajo,
+    Arriba,
+    Este,
+    Oeste,
+    Norte,
+    Sur,
+}
+
+impl Dir {
+    /// Desplazamiento `(dx,dy,dz)` de la dirección.
+    #[inline]
+    pub fn delta(self) -> (i32, i32, i32) {
+        match self {
+            Dir::Abajo => (0, -1, 0),
+            Dir::Arriba => (0, 1, 0),
+            Dir::Este => (1, 0, 0),
+            Dir::Oeste => (-1, 0, 0),
+            Dir::Norte => (0, 0, 1),
+            Dir::Sur => (0, 0, -1),
+        }
+    }
+    fn nombre(self) -> &'static str {
+        match self {
+            Dir::Abajo => "abajo",
+            Dir::Arriba => "arriba",
+            Dir::Este => "este",
+            Dir::Oeste => "oeste",
+            Dir::Norte => "norte",
+            Dir::Sur => "sur",
+        }
+    }
+    fn de_nombre(s: &str) -> Option<Dir> {
+        Some(match s {
+            "abajo" => Dir::Abajo,
+            "arriba" => Dir::Arriba,
+            "este" => Dir::Este,
+            "oeste" => Dir::Oeste,
+            "norte" => Dir::Norte,
+            "sur" => Dir::Sur,
+            _ => return None,
+        })
+    }
+}
+
+/// Reducción sobre los 6 vecinos de una celda.
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize)]
+pub enum Reduce {
+    Promedio,
+    Suma,
+    Min,
+    Max,
+}
+
+impl Reduce {
+    fn nombre(self) -> &'static str {
+        match self {
+            Reduce::Promedio => "avg",
+            Reduce::Suma => "sum6",
+            Reduce::Min => "min6",
+            Reduce::Max => "max6",
+        }
+    }
+}
+
+/// Operador unario.
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize)]
+pub enum UnOp {
+    Neg,
+    Abs,
+    Exp,
+    Sqrt,
+}
+
+/// Operador binario.
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize)]
+pub enum BinOp {
+    Add,
+    Sub,
+    Mul,
+    Div,
+    Min,
+    Max,
+    /// `a > b → 1.0`, si no `0.0` (umbral).
+    Gt,
+    /// `a < b → 1.0`, si no `0.0`.
+    Lt,
+}
+
+/// **Árbol de la ecuación**: la expresión que da el lado derecho de un `Δcampo/dt`.
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub enum Expr {
+    Const(f32),
+    /// Valor del campo en esta celda.
+    Field(FieldId),
+    /// Parámetro del material (slider).
+    Param(ParamId),
+    /// Paso de tiempo `dt`.
+    Dt,
+    /// Laplaciano discreto 6‑conexo del campo: `Σvecinos − 6·centro`.
+    Laplacian(FieldId),
+    /// Reducción sobre los 6 vecinos.
+    Vecinos(Reduce, FieldId),
+    /// Valor del campo en un vecino concreto.
+    Dir(Dir, FieldId),
+    Un(UnOp, Box<Expr>),
+    Bin(BinOp, Box<Expr>, Box<Expr>),
+    /// `clamp(x, lo, hi)`.
+    Clamp(Box<Expr>, Box<Expr>, Box<Expr>),
+}
+
+/// Una **asignación**: `Δcampo/dt = expr`. El motor integra `campo += dt·expr`.
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub struct Assign {
+    pub campo: FieldId,
+    pub expr: Expr,
+}
+
+// =============================================================================
+//  Compilación a opcodes (stack machine)
+// =============================================================================
+
+/// Opcode de la máquina de pila que ejecuta una ecuación por celda (compilado una
+/// vez al editar la Ley; corre en el loop caliente sin recorrer el árbol).
+#[derive(Debug, Clone, Copy, PartialEq)]
+enum Op {
+    Const(f32),
+    Field(FieldId),
+    Param(ParamId),
+    Dt,
+    Laplacian(FieldId),
+    Vecinos(Reduce, FieldId),
+    Dir(Dir, FieldId),
+    Un(UnOp),
+    Bin(BinOp),
+    Clamp,
+}
+
+/// Ecuación compilada de un campo: `(campo destino, opcodes en RPN)`.
+#[derive(Debug, Clone)]
+struct Compiled {
+    campo: FieldId,
+    ops: Vec<Op>,
+}
+
+fn compilar(expr: &Expr, out: &mut Vec<Op>) {
+    match expr {
+        Expr::Const(c) => out.push(Op::Const(*c)),
+        Expr::Field(f) => out.push(Op::Field(*f)),
+        Expr::Param(p) => out.push(Op::Param(*p)),
+        Expr::Dt => out.push(Op::Dt),
+        Expr::Laplacian(f) => out.push(Op::Laplacian(*f)),
+        Expr::Vecinos(r, f) => out.push(Op::Vecinos(*r, *f)),
+        Expr::Dir(d, f) => out.push(Op::Dir(*d, *f)),
+        Expr::Un(op, a) => {
+            compilar(a, out);
+            out.push(Op::Un(*op));
+        }
+        Expr::Bin(op, a, b) => {
+            compilar(a, out);
+            compilar(b, out);
+            out.push(Op::Bin(*op));
+        }
+        Expr::Clamp(x, lo, hi) => {
+            compilar(x, out);
+            compilar(lo, out);
+            compilar(hi, out);
+            out.push(Op::Clamp);
+        }
+    }
+}
+
+/// Un **programa de Ley compilado**: las ecuaciones de todos los campos, listas para
+/// correr. Se obtiene con [`Program::compile`] a partir de las [`Assign`] autoradas.
+#[derive(Debug, Clone)]
+pub struct Program {
+    ecuaciones: Vec<Compiled>,
+}
+
+impl Program {
+    /// Compila la lista de asignaciones (una Ley) a opcodes.
+    pub fn compile(asignaciones: &[Assign]) -> Program {
+        let ecuaciones = asignaciones
+            .iter()
+            .map(|a| {
+                let mut ops = Vec::new();
+                compilar(&a.expr, &mut ops);
+                Compiled { campo: a.campo, ops }
+            })
+            .collect();
+        Program { ecuaciones }
+    }
+
+    /// Cantidad de ecuaciones (campos que la Ley modifica).
+    pub fn len(&self) -> usize {
+        self.ecuaciones.len()
+    }
+    pub fn is_empty(&self) -> bool {
+        self.ecuaciones.is_empty()
+    }
+}
+
+// =============================================================================
+//  Motor de campo
+// =============================================================================
+
+/// **Motor de campos**: mantiene el estado escalar por celda de todos los campos de
+/// un material y avanza la simulación aplicando un [`Program`] estilo Jacobi.
+///
+/// Layout de memoria **campo‑mayor**: los `ncells` valores de un campo son
+/// contiguos (`buf[f*ncells + i]`), así muestrear vecinos de un campo es cache‑friendly.
+pub struct FieldEngine {
+    dim: [u32; 3],
+    ncells: usize,
+    defs: Vec<FieldDef>,
+    cur: Vec<f32>,
+    next: Vec<f32>,
+}
+
+impl FieldEngine {
+    /// Crea el motor con los campos dados, cada celda inicializada a `FieldDef::init`.
+    pub fn new(dim: [u32; 3], defs: Vec<FieldDef>) -> Self {
+        let ncells = (dim[0] as usize) * (dim[1] as usize) * (dim[2] as usize);
+        let nf = defs.len();
+        let mut cur = vec![0.0f32; nf * ncells];
+        for (f, d) in defs.iter().enumerate() {
+            for v in cur[f * ncells..(f + 1) * ncells].iter_mut() {
+                *v = d.init;
+            }
+        }
+        let next = cur.clone();
+        Self { dim, ncells, defs, cur, next }
+    }
+
+    pub fn dim(&self) -> [u32; 3] {
+        self.dim
+    }
+    pub fn fields(&self) -> &[FieldDef] {
+        &self.defs
+    }
+
+    #[inline]
+    fn idx(&self, x: u32, y: u32, z: u32) -> usize {
+        (x as usize) + (y as usize) * (self.dim[0] as usize)
+            + (z as usize) * (self.dim[0] as usize) * (self.dim[1] as usize)
+    }
+
+    /// Lee el campo `f` en `(x,y,z)`.
+    #[inline]
+    pub fn get(&self, f: FieldId, x: u32, y: u32, z: u32) -> f32 {
+        self.cur[(f as usize) * self.ncells + self.idx(x, y, z)]
+    }
+
+    /// Fija el campo `f` en `(x,y,z)` (clampeado al rango del campo). Útil para
+    /// sembrar condiciones iniciales (una gota, un foco de calor…).
+    pub fn set(&mut self, f: FieldId, x: u32, y: u32, z: u32, v: f32) {
+        let d = &self.defs[f as usize];
+        let vi = v.clamp(d.min, d.max);
+        let i = (f as usize) * self.ncells + self.idx(x, y, z);
+        self.cur[i] = vi;
+    }
+
+    /// Muestra el campo `f` en `(x,y,z)` con **borde Neumann** (fuera de la rejilla =
+    /// el valor de la celda misma → sin flujo artificial en el borde).
+    #[inline]
+    fn sample(&self, f: usize, x: i32, y: i32, z: i32) -> f32 {
+        let xc = x.clamp(0, self.dim[0] as i32 - 1) as u32;
+        let yc = y.clamp(0, self.dim[1] as i32 - 1) as u32;
+        let zc = z.clamp(0, self.dim[2] as i32 - 1) as u32;
+        self.cur[f * self.ncells + self.idx(xc, yc, zc)]
+    }
+
+    /// Evalúa una ecuación compilada en la celda `(x,y,z)` sobre el buffer `cur`.
+    fn eval(&self, ops: &[Op], params: &[f32], dt: f32, x: i32, y: i32, z: i32, stack: &mut Vec<f32>) -> f32 {
+        stack.clear();
+        for op in ops {
+            match *op {
+                Op::Const(c) => stack.push(c),
+                Op::Field(f) => stack.push(self.sample(f as usize, x, y, z)),
+                Op::Param(p) => stack.push(params.get(p as usize).copied().unwrap_or(0.0)),
+                Op::Dt => stack.push(dt),
+                Op::Laplacian(f) => {
+                    let f = f as usize;
+                    let c = self.sample(f, x, y, z);
+                    let s = self.sample(f, x + 1, y, z)
+                        + self.sample(f, x - 1, y, z)
+                        + self.sample(f, x, y + 1, z)
+                        + self.sample(f, x, y - 1, z)
+                        + self.sample(f, x, y, z + 1)
+                        + self.sample(f, x, y, z - 1);
+                    stack.push(s - 6.0 * c);
+                }
+                Op::Vecinos(r, f) => {
+                    let f = f as usize;
+                    let n = [
+                        self.sample(f, x + 1, y, z),
+                        self.sample(f, x - 1, y, z),
+                        self.sample(f, x, y + 1, z),
+                        self.sample(f, x, y - 1, z),
+                        self.sample(f, x, y, z + 1),
+                        self.sample(f, x, y, z - 1),
+                    ];
+                    let v = match r {
+                        Reduce::Suma => n.iter().sum(),
+                        Reduce::Promedio => n.iter().sum::<f32>() / 6.0,
+                        Reduce::Min => n.iter().copied().fold(f32::INFINITY, f32::min),
+                        Reduce::Max => n.iter().copied().fold(f32::NEG_INFINITY, f32::max),
+                    };
+                    stack.push(v);
+                }
+                Op::Dir(d, f) => {
+                    let (dx, dy, dz) = d.delta();
+                    stack.push(self.sample(f as usize, x + dx, y + dy, z + dz));
+                }
+                Op::Un(u) => {
+                    let a = stack.pop().unwrap_or(0.0);
+                    stack.push(match u {
+                        UnOp::Neg => -a,
+                        UnOp::Abs => a.abs(),
+                        UnOp::Exp => a.exp(),
+                        UnOp::Sqrt => a.max(0.0).sqrt(),
+                    });
+                }
+                Op::Bin(b) => {
+                    let rhs = stack.pop().unwrap_or(0.0);
+                    let lhs = stack.pop().unwrap_or(0.0);
+                    stack.push(match b {
+                        BinOp::Add => lhs + rhs,
+                        BinOp::Sub => lhs - rhs,
+                        BinOp::Mul => lhs * rhs,
+                        BinOp::Div => {
+                            if rhs == 0.0 {
+                                0.0
+                            } else {
+                                lhs / rhs
+                            }
+                        }
+                        BinOp::Min => lhs.min(rhs),
+                        BinOp::Max => lhs.max(rhs),
+                        BinOp::Gt => (lhs > rhs) as i32 as f32,
+                        BinOp::Lt => (lhs < rhs) as i32 as f32,
+                    });
+                }
+                Op::Clamp => {
+                    let hi = stack.pop().unwrap_or(0.0);
+                    let lo = stack.pop().unwrap_or(0.0);
+                    let xv = stack.pop().unwrap_or(0.0);
+                    stack.push(xv.clamp(lo.min(hi), lo.max(hi)));
+                }
+            }
+        }
+        stack.pop().unwrap_or(0.0)
+    }
+
+    /// Avanza **un tick** integrando `campo += dt·f` para cada ecuación, estilo Jacobi
+    /// (todas leen el estado anterior). Determinista: independiente del orden de barrido.
+    pub fn step(&mut self, program: &Program, params: &[f32], dt: f32) {
+        // `next` parte del estado actual: los campos sin ecuación quedan intactos.
+        self.next.copy_from_slice(&self.cur);
+        let (dx, dy, dz) = (self.dim[0] as i32, self.dim[1] as i32, self.dim[2] as i32);
+        let mut stack: Vec<f32> = Vec::with_capacity(16);
+        for ec in &program.ecuaciones {
+            let f = ec.campo as usize;
+            let d = &self.defs[f];
+            let base = f * self.ncells;
+            for z in 0..dz {
+                for y in 0..dy {
+                    for x in 0..dx {
+                        let i = self.idx(x as u32, y as u32, z as u32);
+                        let cur_v = self.cur[base + i];
+                        let rate = self.eval(&ec.ops, params, dt, x, y, z, &mut stack);
+                        self.next[base + i] = (cur_v + dt * rate).clamp(d.min, d.max);
+                    }
+                }
+            }
+        }
+        std::mem::swap(&mut self.cur, &mut self.next);
+    }
+
+    /// Suma de todos los valores de un campo (para tests de conservación).
+    pub fn total(&self, f: FieldId) -> f32 {
+        let base = (f as usize) * self.ncells;
+        self.cur[base..base + self.ncells].iter().sum()
+    }
+}
+
+// =============================================================================
+//  Parser texto → Expr  y  printer Expr → texto  (base de las dos vistas)
+// =============================================================================
+
+/// Tabla de símbolos: resuelve nombres de campo y de parámetro a sus ids. La comparte
+/// el editor de la Ley (viene de los `FieldDef` del material y sus params).
+#[derive(Debug, Clone, Default)]
+pub struct Symbols {
+    pub campos: Vec<String>,
+    pub params: Vec<String>,
+}
+
+impl Symbols {
+    fn campo_id(&self, n: &str) -> Option<FieldId> {
+        self.campos.iter().position(|c| c == n).map(|i| i as FieldId)
+    }
+    fn param_id(&self, n: &str) -> Option<ParamId> {
+        self.params.iter().position(|p| p == n).map(|i| i as ParamId)
+    }
+    fn campo_nombre(&self, id: FieldId) -> String {
+        self.campos.get(id as usize).cloned().unwrap_or_else(|| format!("campo{id}"))
+    }
+    fn param_nombre(&self, id: ParamId) -> String {
+        self.params.get(id as usize).cloned().unwrap_or_else(|| format!("param{id}"))
+    }
+}
+
+#[derive(Debug, Clone, PartialEq)]
+enum Tok {
+    Num(f32),
+    Ident(String),
+    LParen,
+    RParen,
+    Comma,
+    Plus,
+    Minus,
+    Star,
+    Slash,
+    Lt,
+    Gt,
+}
+
+fn lex(s: &str) -> Result<Vec<Tok>, String> {
+    let mut toks = Vec::new();
+    let bytes: Vec<char> = s.chars().collect();
+    let mut i = 0;
+    while i < bytes.len() {
+        let c = bytes[i];
+        if c.is_whitespace() {
+            i += 1;
+            continue;
+        }
+        match c {
+            '(' => {
+                toks.push(Tok::LParen);
+                i += 1;
+            }
+            ')' => {
+                toks.push(Tok::RParen);
+                i += 1;
+            }
+            ',' => {
+                toks.push(Tok::Comma);
+                i += 1;
+            }
+            '+' => {
+                toks.push(Tok::Plus);
+                i += 1;
+            }
+            '-' => {
+                toks.push(Tok::Minus);
+                i += 1;
+            }
+            '*' => {
+                toks.push(Tok::Star);
+                i += 1;
+            }
+            '/' => {
+                toks.push(Tok::Slash);
+                i += 1;
+            }
+            '<' => {
+                toks.push(Tok::Lt);
+                i += 1;
+            }
+            '>' => {
+                toks.push(Tok::Gt);
+                i += 1;
+            }
+            _ if c.is_ascii_digit() || c == '.' => {
+                let start = i;
+                while i < bytes.len() && (bytes[i].is_ascii_digit() || bytes[i] == '.') {
+                    i += 1;
+                }
+                let txt: String = bytes[start..i].iter().collect();
+                let n: f32 = txt.parse().map_err(|_| format!("número inválido: {txt}"))?;
+                toks.push(Tok::Num(n));
+            }
+            _ if c.is_alphabetic() || c == '_' => {
+                let start = i;
+                while i < bytes.len() && (bytes[i].is_alphanumeric() || bytes[i] == '_') {
+                    i += 1;
+                }
+                toks.push(Tok::Ident(bytes[start..i].iter().collect()));
+            }
+            _ => return Err(format!("carácter inesperado: {c}")),
+        }
+    }
+    Ok(toks)
+}
+
+struct Parser<'a> {
+    toks: Vec<Tok>,
+    pos: usize,
+    sym: &'a Symbols,
+}
+
+impl<'a> Parser<'a> {
+    fn peek(&self) -> Option<&Tok> {
+        self.toks.get(self.pos)
+    }
+    fn next(&mut self) -> Option<Tok> {
+        let t = self.toks.get(self.pos).cloned();
+        self.pos += 1;
+        t
+    }
+    fn eat(&mut self, t: &Tok) -> Result<(), String> {
+        if self.peek() == Some(t) {
+            self.pos += 1;
+            Ok(())
+        } else {
+            Err(format!("se esperaba {t:?}, hay {:?}", self.peek()))
+        }
+    }
+
+    // suma/resta (precedencia baja)
+    fn parse_expr(&mut self) -> Result<Expr, String> {
+        let mut lhs = self.parse_term()?;
+        while let Some(t) = self.peek() {
+            let op = match t {
+                Tok::Plus => BinOp::Add,
+                Tok::Minus => BinOp::Sub,
+                Tok::Lt => BinOp::Lt,
+                Tok::Gt => BinOp::Gt,
+                _ => break,
+            };
+            self.pos += 1;
+            let rhs = self.parse_term()?;
+            lhs = Expr::Bin(op, Box::new(lhs), Box::new(rhs));
+        }
+        Ok(lhs)
+    }
+
+    // mult/div (precedencia alta)
+    fn parse_term(&mut self) -> Result<Expr, String> {
+        let mut lhs = self.parse_factor()?;
+        while let Some(t) = self.peek() {
+            let op = match t {
+                Tok::Star => BinOp::Mul,
+                Tok::Slash => BinOp::Div,
+                _ => break,
+            };
+            self.pos += 1;
+            let rhs = self.parse_factor()?;
+            lhs = Expr::Bin(op, Box::new(lhs), Box::new(rhs));
+        }
+        Ok(lhs)
+    }
+
+    fn parse_factor(&mut self) -> Result<Expr, String> {
+        match self.next() {
+            Some(Tok::Minus) => Ok(Expr::Un(UnOp::Neg, Box::new(self.parse_factor()?))),
+            Some(Tok::Num(n)) => Ok(Expr::Const(n)),
+            Some(Tok::LParen) => {
+                let e = self.parse_expr()?;
+                self.eat(&Tok::RParen)?;
+                Ok(e)
+            }
+            Some(Tok::Ident(name)) => {
+                // ¿llamada a función?
+                if self.peek() == Some(&Tok::LParen) {
+                    self.pos += 1;
+                    let mut args = Vec::new();
+                    if self.peek() != Some(&Tok::RParen) {
+                        args.push(self.parse_expr()?);
+                        while self.peek() == Some(&Tok::Comma) {
+                            self.pos += 1;
+                            args.push(self.parse_expr()?);
+                        }
+                    }
+                    self.eat(&Tok::RParen)?;
+                    self.build_call(&name, args)
+                } else {
+                    // constante especial, campo o parámetro
+                    if name == "dt" {
+                        return Ok(Expr::Dt);
+                    }
+                    if let Some(id) = self.sym.campo_id(&name) {
+                        Ok(Expr::Field(id))
+                    } else if let Some(id) = self.sym.param_id(&name) {
+                        Ok(Expr::Param(id))
+                    } else {
+                        Err(format!("símbolo desconocido: {name}"))
+                    }
+                }
+            }
+            other => Err(format!("token inesperado: {other:?}")),
+        }
+    }
+
+    /// Resuelve una llamada `nombre(args)` cuyo primer arg suele ser un campo.
+    fn build_call(&self, name: &str, args: Vec<Expr>) -> Result<Expr, String> {
+        // funciones sobre un campo (arg = nombre de campo → id)
+        let campo_arg = |args: &[Expr]| -> Result<FieldId, String> {
+            match args.first() {
+                Some(Expr::Field(f)) => Ok(*f),
+                _ => Err(format!("{name}(...) espera un campo como argumento")),
+            }
+        };
+        match name {
+            "lap" => Ok(Expr::Laplacian(campo_arg(&args)?)),
+            "avg" => Ok(Expr::Vecinos(Reduce::Promedio, campo_arg(&args)?)),
+            "sum6" => Ok(Expr::Vecinos(Reduce::Suma, campo_arg(&args)?)),
+            "min6" => Ok(Expr::Vecinos(Reduce::Min, campo_arg(&args)?)),
+            "max6" => Ok(Expr::Vecinos(Reduce::Max, campo_arg(&args)?)),
+            "abs" => Ok(Expr::Un(UnOp::Abs, Box::new(single(name, args)?))),
+            "exp" => Ok(Expr::Un(UnOp::Exp, Box::new(single(name, args)?))),
+            "sqrt" => Ok(Expr::Un(UnOp::Sqrt, Box::new(single(name, args)?))),
+            "min" => {
+                let (a, b) = pair(name, args)?;
+                Ok(Expr::Bin(BinOp::Min, Box::new(a), Box::new(b)))
+            }
+            "max" => {
+                let (a, b) = pair(name, args)?;
+                Ok(Expr::Bin(BinOp::Max, Box::new(a), Box::new(b)))
+            }
+            "clamp" => {
+                if args.len() != 3 {
+                    return Err("clamp(x, lo, hi) espera 3 argumentos".into());
+                }
+                let mut it = args.into_iter();
+                Ok(Expr::Clamp(
+                    Box::new(it.next().unwrap()),
+                    Box::new(it.next().unwrap()),
+                    Box::new(it.next().unwrap()),
+                ))
+            }
+            _ => {
+                if let Some(d) = Dir::de_nombre(name) {
+                    Ok(Expr::Dir(d, campo_arg(&args)?))
+                } else {
+                    Err(format!("función desconocida: {name}"))
+                }
+            }
+        }
+    }
+}
+
+fn single(name: &str, args: Vec<Expr>) -> Result<Expr, String> {
+    if args.len() != 1 {
+        return Err(format!("{name}(x) espera 1 argumento"));
+    }
+    Ok(args.into_iter().next().unwrap())
+}
+fn pair(name: &str, args: Vec<Expr>) -> Result<(Expr, Expr), String> {
+    if args.len() != 2 {
+        return Err(format!("{name}(a, b) espera 2 argumentos"));
+    }
+    let mut it = args.into_iter();
+    Ok((it.next().unwrap(), it.next().unwrap()))
+}
+
+impl Expr {
+    /// Parsea una fórmula de texto a un [`Expr`], resolviendo campos y params por
+    /// nombre con la tabla `sym`. Ej: `"grav*abajo(agua) + horiz*(avg(agua) - agua)"`.
+    pub fn parse(src: &str, sym: &Symbols) -> Result<Expr, String> {
+        let toks = lex(src)?;
+        let mut p = Parser { toks, pos: 0, sym };
+        let e = p.parse_expr()?;
+        if p.pos != p.toks.len() {
+            return Err(format!("sobra entrada tras la expresión (token {:?})", p.peek()));
+        }
+        Ok(e)
+    }
+
+    /// Imprime el `Expr` como fórmula de texto (inversa de [`parse`](Self::parse)),
+    /// usando los nombres de `sym`. Base de la barra de fórmula y del round‑trip.
+    pub fn to_source(&self, sym: &Symbols) -> String {
+        self.print(sym, 0)
+    }
+
+    /// Evalúa la expresión como **escalar sobre un entorno plano** (sin rejilla): un
+    /// vector de variables (`Field(id) → vars[id]`) y otro de parámetros
+    /// (`Param(id) → params[id]`), más `dt`. Es la evaluación que usan los **agentes**
+    /// (conducta autorable): reusa el mismo AST/parser/printer que las Leyes de rejilla,
+    /// pero las variables son *percepts* del agente, no campos espaciales. Los términos
+    /// espaciales (`lap`/`avg`/`dir…`) no tienen sentido aquí y evalúan a `0`. La semántica
+    /// numérica (división por cero → 0, `clamp` con límites invertidos) coincide con el
+    /// evaluador de opcodes de [`FieldEngine`].
+    pub fn eval_scalar(&self, vars: &[f32], params: &[f32], dt: f32) -> f32 {
+        match self {
+            Expr::Const(c) => *c,
+            Expr::Field(f) => vars.get(*f as usize).copied().unwrap_or(0.0),
+            Expr::Param(p) => params.get(*p as usize).copied().unwrap_or(0.0),
+            Expr::Dt => dt,
+            // Términos espaciales: sin significado para un agente puntual.
+            Expr::Laplacian(_) | Expr::Vecinos(_, _) | Expr::Dir(_, _) => 0.0,
+            Expr::Un(op, a) => {
+                let a = a.eval_scalar(vars, params, dt);
+                match op {
+                    UnOp::Neg => -a,
+                    UnOp::Abs => a.abs(),
+                    UnOp::Exp => a.exp(),
+                    UnOp::Sqrt => a.max(0.0).sqrt(),
+                }
+            }
+            Expr::Bin(op, a, b) => {
+                let l = a.eval_scalar(vars, params, dt);
+                let r = b.eval_scalar(vars, params, dt);
+                match op {
+                    BinOp::Add => l + r,
+                    BinOp::Sub => l - r,
+                    BinOp::Mul => l * r,
+                    BinOp::Div => {
+                        if r == 0.0 {
+                            0.0
+                        } else {
+                            l / r
+                        }
+                    }
+                    BinOp::Min => l.min(r),
+                    BinOp::Max => l.max(r),
+                    BinOp::Gt => (l > r) as i32 as f32,
+                    BinOp::Lt => (l < r) as i32 as f32,
+                }
+            }
+            Expr::Clamp(x, lo, hi) => {
+                let x = x.eval_scalar(vars, params, dt);
+                let lo = lo.eval_scalar(vars, params, dt);
+                let hi = hi.eval_scalar(vars, params, dt);
+                x.clamp(lo.min(hi), lo.max(hi))
+            }
+        }
+    }
+
+    // prec: 0 top, 1 suma/cmp, 2 mult, 3 unario/atómico — para poner paréntesis mínimos
+    fn print(&self, sym: &Symbols, prec: u8) -> String {
+        match self {
+            Expr::Const(c) => fmt_num(*c),
+            Expr::Field(f) => sym.campo_nombre(*f),
+            Expr::Param(p) => sym.param_nombre(*p),
+            Expr::Dt => "dt".to_string(),
+            Expr::Laplacian(f) => format!("lap({})", sym.campo_nombre(*f)),
+            Expr::Vecinos(r, f) => format!("{}({})", r.nombre(), sym.campo_nombre(*f)),
+            Expr::Dir(d, f) => format!("{}({})", d.nombre(), sym.campo_nombre(*f)),
+            Expr::Un(UnOp::Neg, a) => {
+                let s = format!("-{}", a.print(sym, 3));
+                paren_if(prec > 1, s)
+            }
+            Expr::Un(op, a) => {
+                let name = match op {
+                    UnOp::Abs => "abs",
+                    UnOp::Exp => "exp",
+                    UnOp::Sqrt => "sqrt",
+                    UnOp::Neg => unreachable!(),
+                };
+                format!("{name}({})", a.print(sym, 0))
+            }
+            Expr::Bin(op, a, b) => {
+                let (sym_op, my_prec) = match op {
+                    BinOp::Add => ("+", 1),
+                    BinOp::Sub => ("-", 1),
+                    BinOp::Lt => ("<", 1),
+                    BinOp::Gt => (">", 1),
+                    BinOp::Mul => ("*", 2),
+                    BinOp::Div => ("/", 2),
+                    // min/max/... como funciones
+                    BinOp::Min => {
+                        return format!("min({}, {})", a.print(sym, 0), b.print(sym, 0));
+                    }
+                    BinOp::Max => {
+                        return format!("max({}, {})", a.print(sym, 0), b.print(sym, 0));
+                    }
+                };
+                let s = format!("{} {sym_op} {}", a.print(sym, my_prec), b.print(sym, my_prec + 1));
+                paren_if(prec > my_prec, s)
+            }
+            Expr::Clamp(x, lo, hi) => format!(
+                "clamp({}, {}, {})",
+                x.print(sym, 0),
+                lo.print(sym, 0),
+                hi.print(sym, 0)
+            ),
+        }
+    }
+}
+
+fn fmt_num(c: f32) -> String {
+    if c.fract() == 0.0 && c.abs() < 1e7 {
+        format!("{}", c as i64)
+    } else {
+        let s = format!("{c}");
+        s
+    }
+}
+fn paren_if(cond: bool, s: String) -> String {
+    if cond {
+        format!("({s})")
+    } else {
+        s
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    fn sym(campos: &[&str], params: &[&str]) -> Symbols {
+        Symbols {
+            campos: campos.iter().map(|s| s.to_string()).collect(),
+            params: params.iter().map(|s| s.to_string()).collect(),
+        }
+    }
+
+    #[test]
+    fn round_trip_parse_print() {
+        let s = sym(&["agua"], &["grav", "horiz"]);
+        let casos = [
+            "grav * abajo(agua) + horiz * (avg(agua) - agua)",
+            "lap(agua) - agua * agua",
+            "clamp(agua + dt, 0, 1)",
+            "min(agua, 1) + max(agua, 0)",
+        ];
+        for c in casos {
+            let e = Expr::parse(c, &s).expect("parsea");
+            let printed = e.to_source(&s);
+            let e2 = Expr::parse(&printed, &s).expect("re-parsea");
+            assert_eq!(e, e2, "round-trip estable para: {c}  →  {printed}");
+        }
+    }
+
+    #[test]
+    fn eval_scalar_entorno_plano() {
+        // Las mismas fórmulas que usa una conducta autorable, evaluadas sobre un
+        // entorno de percepts (Field) + params (Param), sin rejilla.
+        let s = sym(&["cercania_amenaza"], &["miedo", "gregario"]);
+        // peso de huida por defecto: miedo * 2.5 * cercania_amenaza
+        let e = Expr::parse("miedo * 2.5 * cercania_amenaza", &s).unwrap();
+        // vars[0]=cercania_amenaza=0.8 ; params: miedo=1, gregario=0.35
+        let w = e.eval_scalar(&[0.8], &[1.0, 0.35], 1.0 / 60.0);
+        assert!((w - 2.0).abs() < 1e-4, "peso={w}");
+        // términos espaciales evalúan a 0 (no rompen).
+        let e2 = Expr::parse("lap(cercania_amenaza) + miedo", &s).unwrap();
+        assert!((e2.eval_scalar(&[0.8], &[1.0, 0.35], 0.0) - 1.0).abs() < 1e-4);
+        // clamp y umbral funcionan igual que en la rejilla.
+        let e3 = Expr::parse("clamp(gregario, 0, 1) + (cercania_amenaza > 0.5)", &s).unwrap();
+        assert!((e3.eval_scalar(&[0.8], &[1.0, 0.35], 0.0) - 1.35).abs() < 1e-4);
+    }
+
+    #[test]
+    fn parse_errores_utiles() {
+        let s = sym(&["agua"], &[]);
+        assert!(Expr::parse("desconocido", &s).is_err());
+        assert!(Expr::parse("agua +", &s).is_err());
+        assert!(Expr::parse("lap()", &s).is_err());
+        assert!(Expr::parse("agua ) (", &s).is_err());
+    }
+
+    #[test]
+    fn difusion_de_calor_conserva_y_converge() {
+        // Un campo `t` con ecuación de calor: dt/dt = k*lap(t). Neumann conserva el
+        // total y converge a uniforme.
+        let s = sym(&["t"], &["k"]);
+        let e = Expr::parse("k * lap(t)", &s).unwrap();
+        let prog = Program::compile(&[Assign { campo: 0, expr: e }]);
+        let mut eng = FieldEngine::new([8, 1, 8], vec![FieldDef::new("t", 0.0, 0.0, 1000.0)]);
+        eng.set(0, 4, 0, 4, 100.0); // foco de calor
+        let total0 = eng.total(0);
+        for _ in 0..200 {
+            eng.step(&prog, &[0.1], 1.0);
+        }
+        let total1 = eng.total(0);
+        assert!((total0 - total1).abs() < 1e-2, "conserva calor: {total0} vs {total1}");
+        // convergió: el foco se enfrió y el borde se calentó (menos varianza).
+        let centro = eng.get(0, 4, 0, 4);
+        let borde = eng.get(0, 0, 0, 0);
+        assert!(centro < 50.0, "el foco se difundió (centro={centro})");
+        assert!(borde > 0.1, "el calor llegó al borde (borde={borde})");
+    }
+
+    #[test]
+    fn crecer_como_campo() {
+        // La ley Crecer generalizada: la altura sube a `vel` hasta un tope. Ecuación:
+        // dh/dt = vel * (h < tope).  (umbral → 0/1)
+        let s = sym(&["h"], &["vel", "tope"]);
+        let e = Expr::parse("vel * (h < tope)", &s).unwrap();
+        let prog = Program::compile(&[Assign { campo: 0, expr: e }]);
+        let mut eng = FieldEngine::new([1, 1, 1], vec![FieldDef::new("h", 0.0, 0.0, 100.0)]);
+        for _ in 0..20 {
+            eng.step(&prog, &[1.0, 5.0], 1.0);
+        }
+        // sube a razón 1/tick, se detiene al llegar a tope=5.
+        let h = eng.get(0, 0, 0, 0);
+        assert!((h - 5.0).abs() < 1.5, "creció y se detuvo cerca del tope: {h}");
+    }
+
+    #[test]
+    fn reaccion_difusion_gray_scott_hace_patron() {
+        // Gray–Scott: dos campos u,v.
+        //   du/dt = Du*lap(u) - u*v*v + F*(1-u)
+        //   dv/dt = Dv*lap(v) + u*v*v - (F+k)*v
+        let s = sym(&["u", "v"], &["Du", "Dv", "F", "k"]);
+        let eu = Expr::parse("Du * lap(u) - u * v * v + F * (1 - u)", &s).unwrap();
+        let ev = Expr::parse("Dv * lap(v) + u * v * v - (F + k) * v", &s).unwrap();
+        let prog = Program::compile(&[
+            Assign { campo: 0, expr: eu },
+            Assign { campo: 1, expr: ev },
+        ]);
+        let mut eng = FieldEngine::new(
+            [32, 1, 32],
+            vec![
+                FieldDef::new("u", 1.0, 0.0, 1.0),
+                FieldDef::new("v", 0.0, 0.0, 1.0),
+            ],
+        );
+        // sembrar una mancha de v en el centro
+        for z in 14..18 {
+            for x in 14..18 {
+                eng.set(1, x, 0, z, 0.5);
+                eng.set(0, x, 0, z, 0.25);
+            }
+        }
+        let params = [0.16, 0.08, 0.06, 0.062];
+        for _ in 0..400 {
+            eng.step(&prog, &params, 1.0);
+        }
+        // Hubo estructura: v tiene varianza espacial (no todo cero ni todo igual).
+        let mut vmin = f32::INFINITY;
+        let mut vmax = f32::NEG_INFINITY;
+        for z in 0..32 {
+            for x in 0..32 {
+                let v = eng.get(1, x, 0, z);
+                vmin = vmin.min(v);
+                vmax = vmax.max(v);
+                assert!(v.is_finite(), "estable numéricamente");
+            }
+        }
+        assert!(vmax - vmin > 0.05, "reacción-difusión formó patrón (rango v={})", vmax - vmin);
+    }
+
+    #[test]
+    fn determinismo_independiente_del_orden() {
+        // Dos corridas idénticas dan exactamente lo mismo (Jacobi, sin azar).
+        let s = sym(&["t"], &["k"]);
+        let e = Expr::parse("k * lap(t)", &s).unwrap();
+        let prog = Program::compile(&[Assign { campo: 0, expr: e }]);
+        let run = || {
+            let mut eng = FieldEngine::new([6, 1, 6], vec![FieldDef::new("t", 0.0, 0.0, 100.0)]);
+            eng.set(0, 1, 0, 2, 50.0);
+            eng.set(0, 4, 0, 3, 30.0);
+            for _ in 0..50 {
+                eng.step(&prog, &[0.2], 1.0);
+            }
+            (0..36).map(|i| eng.cur[i]).collect::<Vec<_>>()
+        };
+        assert_eq!(run(), run(), "misma evolución bit a bit");
+    }
+}
diff --git a/llimphi-voxel/src/foto.rs b/llimphi-voxel/src/foto.rs
new file mode 100644
index 0000000..8b31748
--- /dev/null
+++ b/llimphi-voxel/src/foto.rs
@@ -0,0 +1,565 @@
+//! Foto → **relieve voxel** (medallón/placa) — herramienta de PROP/decoración.
+//!
+//! **OJO (lección 2026-07-18):** esto NO es el camino para PERSONAJES. Voxelizar una
+//! foto de una persona en literal (busto fotográfico) cae de lleno en el valle de
+//! inquietud — a tamaño grande **da terror**. La especie tiene un **estilo propio**
+//! (el `CharSpec`/Actor estilizado, con gestos y personalidad); la foto de un personaje
+//! **sólo debe regular RASGOS** (color de piel/ropa), no volverse geometría (ver
+//! `llimphi-voxel-studio::rostro`). Este módulo queda para RELIEVES de props/decoración
+//! (un medallón, un bajorrelieve), donde una foto cuantizada sí funciona como textura
+//! con volumen. Ver [[detalle-sub-voxel-rugosidad]].
+//!
+//! Puro y `std`: recibe un buffer **RGBA ya decodificado** (el decode y la profundidad
+//! monocular por ONNX viven afuera, en el borde). El relieve por defecto es un **domo
+//! por transformada de distancia** al borde del recorte, con modos Luminancia y Plano.
+//!
+//! Puro y `std`: recibe un buffer **RGBA ya decodificado** (el decode del PNG/JPEG y,
+//! a futuro, la profundidad monocular por ONNX viven afuera, en el borde). El relieve
+//! por defecto es un **domo por transformada de distancia** al borde del recorte
+//! (el centro de la masa sobresale, los bordes se afinan → medallón/busto redondeado),
+//! con modos alternativos Luminancia (brillo = cercanía) y Plano (placa recortada).
+
+use llimphi_3d::VoxelGrid;
+use serde::{Deserialize, Serialize};
+
+/// Cómo derivar la profundidad (grosor en Z) de cada píxel del recorte.
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize)]
+pub enum Relieve {
+    /// Bulto redondeado por transformada de distancia al borde del recorte. Da un
+    /// relieve creíble desde la sola silueta, sin depth real. Es el default.
+    Domo,
+    /// Brillo del píxel = cercanía (heightmap). Útil si la foto ya trae una pista de
+    /// profundidad en su sombreado.
+    Luminancia,
+    /// Grosor uniforme (placa recortada, tipo sticker grueso).
+    Plano,
+    /// **Profundidad monocular real**: el grosor sale de un mapa de profundidad
+    /// externo (blanco = cerca = grueso), estimado por un modelo tipo MiDaS/DPT en
+    /// el borde (`pixel-verbo-onnx`, [`OpPixel::Profundidad`]). Requiere pasar el
+    /// mapa a [`photo_to_grid_depth`]; con [`photo_to_grid`] (sin mapa) cae al domo.
+    Profundidad,
+}
+
+/// Opciones de la voxelización de una foto.
+#[derive(Debug, Clone, Copy, Serialize, Deserialize)]
+pub struct FotoOpts {
+    /// Resolución objetivo en X (se downsamplea; el alto sale del aspecto).
+    pub ancho: u32,
+    /// Grosor máximo del relieve, en voxels.
+    pub profundidad: u32,
+    /// Cómo derivar la profundidad.
+    pub relieve: Relieve,
+    /// Píxeles con `alpha < alpha_min` = fondo (se recortan). `0` = sin recorte.
+    pub alpha_min: u8,
+    /// Jitter de color determinista `[0,1]` para dar grano (0 = color plano).
+    pub grano: f32,
+}
+
+impl Default for FotoOpts {
+    fn default() -> Self {
+        Self { ancho: 56, profundidad: 12, relieve: Relieve::Domo, alpha_min: 128, grano: 0.06 }
+    }
+}
+
+/// Resumen de la voxelización (para certificar sin introspección de la grilla).
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub struct FotoStats {
+    /// Voxels sólidos colocados.
+    pub voxeles: u32,
+    /// Píxeles del recorte (foreground) tras el downsample.
+    pub recorte: u32,
+    /// Grosor mínimo y máximo del relieve (en voxels) sobre el recorte.
+    pub grosor_min: u32,
+    pub grosor_max: u32,
+    /// Color promedio de los voxels colocados (fidelidad al original).
+    pub color_medio: [u8; 3],
+    /// Dimensiones de la grilla resultante.
+    pub dim: [u32; 3],
+}
+
+/// Luminancia Rec.709 `[0,1]`.
+#[inline]
+fn lum(rgb: [u8; 3]) -> f32 {
+    (0.2126 * rgb[0] as f32 + 0.7152 * rgb[1] as f32 + 0.0722 * rgb[2] as f32) / 255.0
+}
+
+/// Hash determinista → `[-1,1]` para el grano de color (sin RNG).
+#[inline]
+fn jitter(x: u32, y: u32, z: u32) -> f32 {
+    let mut h = x.wrapping_mul(374761393).wrapping_add(y.wrapping_mul(668265263));
+    h = h.wrapping_add(z.wrapping_mul(2246822519));
+    h ^= h >> 13;
+    h = h.wrapping_mul(1274126177);
+    ((h & 0xffff) as f32 / 65535.0) * 2.0 - 1.0
+}
+
+/// Transformada de distancia (chamfer 3-4, dos pasadas): a cada píxel del recorte le
+/// asigna la distancia (aprox euclídea) al fondo más cercano. Fondo = 0.
+fn distance_transform(mask: &[bool], w: usize, h: usize) -> Vec<f32> {
+    let big = (w + h) as f32 * 2.0;
+    let mut d = vec![0.0f32; w * h];
+    for i in 0..w * h {
+        d[i] = if mask[i] { big } else { 0.0 };
+    }
+    // Pasada hacia adelante (vecinos arriba/izquierda).
+    for y in 0..h {
+        for x in 0..w {
+            let i = y * w + x;
+            if !mask[i] {
+                continue;
+            }
+            let mut m = d[i];
+            if x > 0 {
+                m = m.min(d[i - 1] + 1.0);
+            }
+            if y > 0 {
+                m = m.min(d[i - w] + 1.0);
+                if x > 0 {
+                    m = m.min(d[i - w - 1] + 1.41421);
+                }
+                if x + 1 < w {
+                    m = m.min(d[i - w + 1] + 1.41421);
+                }
+            }
+            d[i] = m;
+        }
+    }
+    // Pasada hacia atrás (vecinos abajo/derecha).
+    for y in (0..h).rev() {
+        for x in (0..w).rev() {
+            let i = y * w + x;
+            if !mask[i] {
+                continue;
+            }
+            let mut m = d[i];
+            if x + 1 < w {
+                m = m.min(d[i + 1] + 1.0);
+            }
+            if y + 1 < h {
+                m = m.min(d[i + w] + 1.0);
+                if x + 1 < w {
+                    m = m.min(d[i + w + 1] + 1.41421);
+                }
+                if x > 0 {
+                    m = m.min(d[i + w - 1] + 1.41421);
+                }
+            }
+            d[i] = m;
+        }
+    }
+    d
+}
+
+/// **Voxeliza una foto** a un busto/medallón `VoxelGrid`, con el color del original y
+/// un relieve por [`Relieve`]. `rgba` = buffer fila-por-fila `w×h` (4 bytes/píxel,
+/// origen arriba-izquierda). Devuelve la grilla + un [`FotoStats`] para certificar.
+///
+/// Sin mapa de profundidad: [`Relieve::Profundidad`] cae al domo (necesita el mapa).
+/// Usa [`photo_to_grid_depth`] para el relieve por profundidad real.
+pub fn photo_to_grid(rgba: &[u8], w: u32, h: u32, opts: &FotoOpts) -> (VoxelGrid, FotoStats) {
+    photo_to_grid_inner(rgba, w, h, None, opts)
+}
+
+/// Como [`photo_to_grid`] pero con un **mapa de profundidad** real (`depth`, mismo
+/// `w×h` que `rgba`, RGBA; se lee el canal R = cercanía: blanco = cerca = grueso).
+/// Con [`Relieve::Profundidad`] el grosor sale de ese mapa (estimado por un modelo
+/// tipo MiDaS en el borde, `pixel-verbo-onnx`); con otros relieves el mapa se ignora.
+/// El mapa vive AFUERA a propósito: `llimphi-voxel` es `std` puro y no sabe de ONNX.
+pub fn photo_to_grid_depth(
+    rgba: &[u8],
+    w: u32,
+    h: u32,
+    depth: &[u8],
+    opts: &FotoOpts,
+) -> (VoxelGrid, FotoStats) {
+    photo_to_grid_inner(rgba, w, h, Some(depth), opts)
+}
+
+fn photo_to_grid_inner(
+    rgba: &[u8],
+    w: u32,
+    h: u32,
+    depth: Option<&[u8]>,
+    opts: &FotoOpts,
+) -> (VoxelGrid, FotoStats) {
+    let gw = opts.ancho.max(1);
+    let gh = ((h.max(1) * gw) / w.max(1)).max(1);
+    let prof = opts.profundidad.max(1);
+    let gwz = gw as usize;
+    let ghz = gh as usize;
+
+    // Downsample nearest → color + máscara de recorte (+ profundidad si vino mapa).
+    let mut color = vec![[0u8; 3]; gwz * ghz];
+    let mut mask = vec![false; gwz * ghz];
+    let depth_ok = depth.map(|d| d.len() >= (w * h * 4) as usize).unwrap_or(false);
+    let mut depth_ds = vec![0.0f32; gwz * ghz];
+    if w > 0 && h > 0 && rgba.len() >= (w * h * 4) as usize {
+        for gy in 0..ghz {
+            for gx in 0..gwz {
+                let sx = ((gx as u32 * w) / gw).min(w - 1);
+                let sy = ((gy as u32 * h) / gh).min(h - 1);
+                let si = ((sy * w + sx) * 4) as usize;
+                let a = rgba[si + 3];
+                color[gy * gwz + gx] = [rgba[si], rgba[si + 1], rgba[si + 2]];
+                mask[gy * gwz + gx] = a >= opts.alpha_min;
+                if depth_ok {
+                    // Canal R del mapa = cercanía [0,1] (blanco = cerca = grueso).
+                    depth_ds[gy * gwz + gx] = depth.unwrap()[si] as f32 / 255.0;
+                }
+            }
+        }
+    }
+
+    // Campo de profundidad normalizado [0,1] por píxel del recorte.
+    let mut profile = vec![0.0f32; gwz * ghz];
+    // Sin mapa real, Profundidad cae al domo (mejor que placa plana).
+    let relieve = match (opts.relieve, depth_ok) {
+        (Relieve::Profundidad, false) => Relieve::Domo,
+        (r, _) => r,
+    };
+    match relieve {
+        Relieve::Profundidad => {
+            // Grosor = profundidad estimada (MiDaS): blanco=cerca=grueso. Se re-normaliza
+            // min-max SOBRE EL RECORTE para que el sujeto use todo el rango (el fondo ya
+            // se fue por el alpha), y no quede aplastado si el mapa venía comprimido.
+            let (mut mn, mut mx) = (f32::INFINITY, f32::NEG_INFINITY);
+            for i in 0..gwz * ghz {
+                if mask[i] {
+                    mn = mn.min(depth_ds[i]);
+                    mx = mx.max(depth_ds[i]);
+                }
+            }
+            let rango = (mx - mn).max(1e-6);
+            for i in 0..gwz * ghz {
+                if mask[i] {
+                    profile[i] = ((depth_ds[i] - mn) / rango).clamp(0.0, 1.0);
+                }
+            }
+        }
+        Relieve::Domo => {
+            let dt = distance_transform(&mask, gwz, ghz);
+            let maxd = dt.iter().cloned().fold(0.0f32, f32::max).max(1.0);
+            for i in 0..gwz * ghz {
+                if mask[i] {
+                    let nd = (dt[i] / maxd).clamp(0.0, 1.0);
+                    // Perfil hemisférico: bulto redondo (borde→0, centro→1).
+                    profile[i] = (nd * (2.0 - nd)).sqrt();
+                }
+            }
+        }
+        Relieve::Luminancia => {
+            for i in 0..gwz * ghz {
+                if mask[i] {
+                    profile[i] = lum(color[i]).clamp(0.0, 1.0);
+                }
+            }
+        }
+        Relieve::Plano => {
+            for i in 0..gwz * ghz {
+                if mask[i] {
+                    profile[i] = 1.0;
+                }
+            }
+        }
+    }
+
+    let dz = prof + 1;
+    let mut grid = VoxelGrid::new([gw, gh, dz]);
+    let mut voxeles = 0u32;
+    let mut recorte = 0u32;
+    let mut grosor_min = u32::MAX;
+    let mut grosor_max = 0u32;
+    let mut acc = [0u64; 3];
+    for gy in 0..ghz {
+        for gx in 0..gwz {
+            let i = gy * gwz + gx;
+            if !mask[i] {
+                continue;
+            }
+            recorte += 1;
+            // Grosor ≥1: aun el borde deja una lámina fina (no desaparece).
+            let grosor = (1.0 + (prof - 1) as f32 * profile[i]).round() as u32;
+            let grosor = grosor.clamp(1, prof);
+            grosor_min = grosor_min.min(grosor);
+            grosor_max = grosor_max.max(grosor);
+            // Foto arriba-izquierda → voxel Y hacia arriba: flip vertical.
+            let vy = gh - 1 - gy as u32;
+            let base = color[i];
+            for z in 0..grosor {
+                let j = if opts.grano > 0.0 {
+                    opts.grano * jitter(gx as u32, gy as u32, z)
+                } else {
+                    0.0
+                };
+                let c = [
+                    ((base[0] as f32 * (1.0 + j)).clamp(0.0, 255.0)) as u8,
+                    ((base[1] as f32 * (1.0 + j)).clamp(0.0, 255.0)) as u8,
+                    ((base[2] as f32 * (1.0 + j)).clamp(0.0, 255.0)) as u8,
+                ];
+                grid.set(gx as u32, vy, z, c);
+                voxeles += 1;
+                acc[0] += base[0] as u64;
+                acc[1] += base[1] as u64;
+                acc[2] += base[2] as u64;
+            }
+        }
+    }
+    if grosor_min == u32::MAX {
+        grosor_min = 0;
+    }
+    let n = voxeles.max(1) as u64;
+    let color_medio = [(acc[0] / n) as u8, (acc[1] / n) as u8, (acc[2] / n) as u8];
+    let stats = FotoStats {
+        voxeles,
+        recorte,
+        grosor_min,
+        grosor_max,
+        color_medio,
+        dim: [gw, gh, dz],
+    };
+    (grid, stats)
+}
+
+/// Rotación en XZ por `facing` (0=+Z, 1=+X, 2=−Z, 3=−X), misma convención que la fauna.
+#[inline]
+fn rot(dx: i32, dz: i32, facing: u8) -> (i32, i32) {
+    match facing & 3 {
+        0 => (dx, dz),
+        1 => (-dz, dx),
+        2 => (-dx, -dz),
+        _ => (dz, -dx),
+    }
+}
+
+/// **Planta un busto** (una grilla voxel de [`photo_to_grid`]/[`photo_to_grid_depth`])
+/// DENTRO de una grilla destino, con la base en `(x, y, z)` y orientado por `facing`
+/// (0=+Z…). Es el puente que faltaba entre "una foto produce un busto suelto" y "ese
+/// ser vive en la escena junto al terreno y la fauna": aplica el pincel
+/// [`DETALLE_SER_VIVO`](crate::bicho::DETALLE_SER_VIVO) → el busto comparte la gramática
+/// sub-voxel del mundo (redondeo orgánico), como cualquier ser. Rota en XZ alrededor
+/// del centro del busto; los voxels que caen fuera de la grilla destino se descartan.
+pub fn stamp_busto(dst: &mut VoxelGrid, busto: &VoxelGrid, x: u32, y: u32, z: u32, facing: u8) {
+    let [bw, bh, bd] = busto.dim();
+    let (cx, cz) = (bw as i32 / 2, bd as i32 / 2);
+    let (r, b) = crate::bicho::DETALLE_SER_VIVO;
+    dst.set_detail_brush(r, b);
+    for by in 0..bh {
+        for bz in 0..bd {
+            for bx in 0..bw {
+                let c = match busto.get(bx, by, bz) {
+                    Some(c) if c[3] > 127 => c,
+                    _ => continue,
+                };
+                let (rx, rz) = rot(bx as i32 - cx, bz as i32 - cz, facing);
+                let px = x as i32 + rx;
+                let pz = z as i32 + rz;
+                let py = y as i32 + by as i32;
+                if px >= 0 && py >= 0 && pz >= 0 {
+                    // set_rgba estampa también el pincel de ser vivo (detalle por voxel).
+                    dst.set_rgba(px as u32, py as u32, pz as u32, [c[0], c[1], c[2]], c[3]);
+                }
+            }
+        }
+    }
+    dst.clear_detail_brush();
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    /// Construye una imagen RGBA de prueba: un disco opaco (con un degradé de brillo
+    /// horizontal) sobre fondo transparente.
+    fn disco(w: u32, h: u32) -> Vec<u8> {
+        let cx = w as f32 / 2.0;
+        let cy = h as f32 / 2.0;
+        let r = (w.min(h) as f32) * 0.4;
+        let mut px = vec![0u8; (w * h * 4) as usize];
+        for y in 0..h {
+            for x in 0..w {
+                let i = ((y * w + x) * 4) as usize;
+                let d = ((x as f32 - cx).powi(2) + (y as f32 - cy).powi(2)).sqrt();
+                if d <= r {
+                    let b = (x as f32 / w as f32 * 255.0) as u8; // degradé horizontal
+                    px[i] = b;
+                    px[i + 1] = 120;
+                    px[i + 2] = 200;
+                    px[i + 3] = 255;
+                } else {
+                    px[i + 3] = 0; // fondo transparente
+                }
+            }
+        }
+        px
+    }
+
+    #[test]
+    fn recorta_y_da_relieve() {
+        let (w, h) = (64, 64);
+        let img = disco(w, h);
+        let opts = FotoOpts { ancho: 48, profundidad: 14, relieve: Relieve::Domo, alpha_min: 128, grano: 0.0 };
+        let (grid, s) = photo_to_grid(&img, w, h, &opts);
+        // Recorte: sólo el disco (~π·0.4²≈50% del área del bbox, pero el disco ocupa
+        // ~π/4 del cuadrado → algo menos de la mitad).
+        assert!(s.recorte > 0, "recortó algo");
+        let area = (s.dim[0] * s.dim[1]) as f32;
+        assert!((s.recorte as f32) < area * 0.85, "recortó el fondo (no llenó todo)");
+        // Relieve: el domo tiene grosor variable (borde fino, centro grueso).
+        assert!(s.grosor_max > s.grosor_min, "el domo varía en grosor: {} → {}", s.grosor_min, s.grosor_max);
+        assert!(s.grosor_max >= 10, "el centro sobresale cerca del máximo ({})", s.grosor_max);
+        assert!(s.voxeles > s.recorte, "hay volumen (más voxels que píxeles de recorte)");
+        assert_eq!(s.dim, grid.dim());
+    }
+
+    #[test]
+    fn fidelidad_de_color() {
+        let (w, h) = (48, 48);
+        let img = disco(w, h);
+        let (_grid, s) = photo_to_grid(&img, w, h, &FotoOpts::default());
+        // El disco es azulado (g=120, b=200) con r variable: el color medio debe tener
+        // b > r y b > g claramente (no se perdió el color del original).
+        assert!(s.color_medio[2] > s.color_medio[1], "conserva el azul dominante: {:?}", s.color_medio);
+        assert!(s.color_medio[2] > 120, "el azul sigue fuerte: {:?}", s.color_medio);
+    }
+
+    #[test]
+    fn plano_es_grosor_uniforme() {
+        let (w, h) = (32, 32);
+        let img = disco(w, h);
+        let opts = FotoOpts { relieve: Relieve::Plano, profundidad: 8, ..FotoOpts::default() };
+        let (_g, s) = photo_to_grid(&img, w, h, &opts);
+        assert_eq!(s.grosor_min, s.grosor_max, "plano = grosor uniforme");
+        assert_eq!(s.grosor_max, 8, "grosor = profundidad");
+    }
+
+    #[test]
+    fn imagen_vacia_no_panica() {
+        let (g, s) = photo_to_grid(&[], 0, 0, &FotoOpts::default());
+        assert_eq!(s.voxeles, 0);
+        assert!(g.dim()[0] >= 1);
+    }
+
+    /// Mapa de profundidad en RAMPA horizontal (izq negro=lejos, der blanco=cerca)
+    /// como el que emite MiDaS por el borde. Con `Relieve::Profundidad` el grosor
+    /// debe SEGUIR la profundidad: la mitad cercana (derecha) más gruesa que la lejana.
+    #[test]
+    fn profundidad_real_manda_el_grosor() {
+        let (w, h) = (64, 64);
+        let img = disco(w, h); // sujeto opaco centrado
+        // Depth RGBA: R = x/(w-1)*255 (rampa izq→der), gris, opaco.
+        let mut depth = vec![0u8; (w * h * 4) as usize];
+        for y in 0..h {
+            for x in 0..w {
+                let i = ((y * w + x) * 4) as usize;
+                let v = (x as f32 / (w - 1) as f32 * 255.0) as u8;
+                depth[i] = v;
+                depth[i + 1] = v;
+                depth[i + 2] = v;
+                depth[i + 3] = 255;
+            }
+        }
+        let opts = FotoOpts { ancho: 48, profundidad: 14, relieve: Relieve::Profundidad, alpha_min: 128, grano: 0.0 };
+        let (grid, s) = photo_to_grid_depth(&img, w, h, &depth, &opts);
+        assert!(s.recorte > 0);
+        assert!(s.grosor_max > s.grosor_min, "la profundidad varía el grosor: {}→{}", s.grosor_min, s.grosor_max);
+
+        // Grosor (voxels sólidos en Z) por mitad izquierda/derecha, sobre el recorte.
+        let [gw, gh, dz] = grid.dim();
+        let (mut sum_izq, mut n_izq, mut sum_der, mut n_der) = (0u64, 0u64, 0u64, 0u64);
+        for gx in 0..gw {
+            for vy in 0..gh {
+                let mut grosor = 0u64;
+                for z in 0..dz {
+                    if grid.get(gx, vy, z).map(|c| c[3] > 127).unwrap_or(false) {
+                        grosor += 1;
+                    }
+                }
+                if grosor == 0 {
+                    continue;
+                }
+                if gx < gw / 2 {
+                    sum_izq += grosor;
+                    n_izq += 1;
+                } else {
+                    sum_der += grosor;
+                    n_der += 1;
+                }
+            }
+        }
+        let prom_izq = sum_izq as f32 / n_izq.max(1) as f32;
+        let prom_der = sum_der as f32 / n_der.max(1) as f32;
+        assert!(
+            prom_der > prom_izq + 2.0,
+            "la mitad cercana (der) debe ser más gruesa que la lejana (izq): {prom_der:.1} vs {prom_izq:.1}"
+        );
+    }
+
+    /// Sin mapa, `Relieve::Profundidad` cae al domo (no plano) → grosor variable.
+    #[test]
+    fn profundidad_sin_mapa_cae_al_domo() {
+        let (w, h) = (48, 48);
+        let img = disco(w, h);
+        let opts = FotoOpts { relieve: Relieve::Profundidad, ..FotoOpts::default() };
+        let (_g, s) = photo_to_grid(&img, w, h, &opts);
+        assert!(s.grosor_max > s.grosor_min, "cae al domo (grosor variable), no a placa plana");
+    }
+
+    /// El busto se planta en una escena junto al terreno, con detalle de ser vivo por
+    /// voxel (comparte la gramática sub-voxel del mundo) y sin pisar el resto.
+    #[test]
+    fn stamp_busto_planta_el_ser_con_detalle() {
+        let (w, h) = (48, 48);
+        let img = disco(w, h);
+        let (busto, s) = photo_to_grid(&img, w, h, &FotoOpts { grano: 0.0, ..FotoOpts::default() });
+        let [bw, bh, bd] = busto.dim();
+
+        // Escena destino más grande, con un "suelo" previo que no debe tocarse.
+        let mut dst = VoxelGrid::new([bw + 20, bh + 8, bd + 20]);
+        for gx in 0..dst.dim()[0] {
+            for gz in 0..dst.dim()[2] {
+                dst.set(gx, 0, gz, [80, 90, 70]); // suelo
+            }
+        }
+        dst.reset_dirty();
+
+        let (ox, oz) = (10u32, 10u32);
+        stamp_busto(&mut dst, &busto, ox, 1, oz, 0);
+
+        // Cuenta voxels del busto plantados (por encima del suelo) y cuántos con detalle.
+        let mut plantados = 0u32;
+        let mut con_detalle = 0u32;
+        for gx in 0..dst.dim()[0] {
+            for gy in 1..dst.dim()[1] {
+                for gz in 0..dst.dim()[2] {
+                    if dst.get(gx, gy, gz).map(|c| c[3] > 127).unwrap_or(false) {
+                        plantados += 1;
+                        if dst.detail_at(gx, gy, gz) != Some([0, 0]) {
+                            con_detalle += 1;
+                        }
+                    }
+                }
+            }
+        }
+        assert!(plantados > s.recorte, "plantó el volumen del busto ({plantados} vs recorte {})", s.recorte);
+        assert_eq!(plantados, con_detalle, "todo el busto lleva el detalle de ser vivo");
+        // El suelo intacto (sin detalle autorado en y=0).
+        assert_eq!(dst.detail_at(0, 0, 0), Some([0, 0]), "el suelo no recibió el pincel");
+        // Facing distinto ⇒ colocación distinta (no es no-op).
+        let mut dst2 = VoxelGrid::new([bw + 20, bh + 8, bd + 20]);
+        stamp_busto(&mut dst2, &busto, ox, 1, oz, 1);
+        let mut difieren = false;
+        'outer: for gx in 0..dst.dim()[0] {
+            for gy in 1..dst.dim()[1] {
+                for gz in 0..dst.dim()[2] {
+                    let a = dst.get(gx, gy, gz).map(|c| c[3] > 127).unwrap_or(false);
+                    let b = dst2.get(gx, gy, gz).map(|c| c[3] > 127).unwrap_or(false);
+                    if a != b {
+                        difieren = true;
+                        break 'outer;
+                    }
+                }
+            }
+        }
+        assert!(difieren, "el facing rota el busto");
+    }
+}
diff --git a/llimphi-voxel/src/historia.rs b/llimphi-voxel/src/historia.rs
new file mode 100644
index 0000000..98ee8ca
--- /dev/null
+++ b/llimphi-voxel/src/historia.rs
@@ -0,0 +1,281 @@
+// =============================================================================
+//  llimphi-voxel :: historia — versiones y alternativas de un proyecto
+// -----------------------------------------------------------------------------
+//  El DAG sobre el que se monta todo el trabajo creativo. Estilo git, alineado
+//  al repo (BLAKE3 + DAG + postcard):
+//
+//    * Cada SNAPSHOT del proyecto es un BLOB direccionado por su contenido
+//      (`BLAKE3(postcard(Project))`). Dos snapshots idénticos comparten el mismo
+//      hash → dedup automático, sin remapear ids (a diferencia de `combinar`).
+//    * Una [`Version`] (commit) apunta a un snapshot y a su(s) PADRE(s). La
+//      cadena de padres es la HISTORIA; dos versiones con el mismo padre son
+//      ALTERNATIVAS.
+//    * Las RAMAS son alternativas nombradas: una punta móvil de la historia.
+//
+//  La [`Historia`] entera —almacén + versiones + ramas— serializa a un archivo
+//  (postcard). No reescribe el modelo `Project`: los `u64` ids viven DENTRO del
+//  snapshot; el direccionamiento por contenido es la capa de almacenamiento.
+//  Determinista: el orden de las versiones lo da un contador, no el reloj.
+// =============================================================================
+
+use std::collections::BTreeMap;
+use std::path::Path;
+
+use serde::{Deserialize, Serialize};
+
+use crate::documento::ErrorDoc;
+use crate::studio::Project;
+
+/// Hash BLAKE3 de un contenido — la dirección de un blob o el id de una versión.
+pub type Hash = [u8; 32];
+
+/// La rama por defecto.
+pub const RAMA_PRINCIPAL: &str = "principal";
+
+fn hash(bytes: &[u8]) -> Hash {
+    *blake3::hash(bytes).as_bytes()
+}
+
+/// Los primeros bytes de un hash en hex — para mostrarle una versión al usuario
+/// sin volcar 64 caracteres.
+pub fn hex_corto(h: &Hash) -> String {
+    h[..4].iter().map(|b| format!("{b:02x}")).collect()
+}
+
+/// Una VERSIÓN (commit): un snapshot del proyecto atado a su historia. Se
+/// direcciona por su propio contenido ([`id`](Self::id)).
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+pub struct Version {
+    /// Hash del snapshot del proyecto (contenido en el almacén).
+    pub snapshot: Hash,
+    /// Versiones anteriores (vacío = raíz; >1 = una fusión).
+    pub padres: Vec<Hash>,
+    /// Etiqueta humana: "el nacimiento", "más bruma", "sin montañas"…
+    pub etiqueta: String,
+    /// Orden monótono de creación (sin reloj: determinista y reproducible).
+    pub orden: u64,
+}
+
+impl Version {
+    /// El id de la versión = hash de su contenido. Dos versiones idénticas
+    /// (mismo snapshot, padres, etiqueta y orden) tienen el mismo id.
+    pub fn id(&self) -> Hash {
+        hash(&postcard::to_allocvec(self).expect("postcard version"))
+    }
+}
+
+/// La HISTORIA: el almacén direccionado por contenido, el grafo de versiones y
+/// las ramas. Todo lo que el usuario crea se acumula aquí y se puede revisitar,
+/// ramificar y fusionar.
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct Historia {
+    /// Almacén: hash → bytes. Snapshots de proyecto (y, a futuro, artefactos).
+    contenidos: BTreeMap<Hash, Vec<u8>>,
+    /// Versiones por su id.
+    versiones: BTreeMap<Hash, Version>,
+    /// Ramas (alternativas nombradas): nombre → id de su versión punta.
+    ramas: BTreeMap<String, Hash>,
+    /// La rama sobre la que se commitea.
+    rama_actual: String,
+    /// La CABEZA (HEAD): la versión en la que estamos parados. Un `commit` cuelga
+    /// de aquí; un `checkout` la mueve a cualquier versión (para revisitar o
+    /// bifurcar desde el pasado). `None` = historia recién nacida.
+    cabeza: Option<Hash>,
+    /// Siguiente número de orden (monótono).
+    siguiente_orden: u64,
+}
+
+impl Default for Historia {
+    fn default() -> Self {
+        Self {
+            contenidos: BTreeMap::new(),
+            versiones: BTreeMap::new(),
+            ramas: BTreeMap::new(),
+            rama_actual: RAMA_PRINCIPAL.to_string(),
+            cabeza: None,
+            siguiente_orden: 0,
+        }
+    }
+}
+
+impl Historia {
+    /// Una historia vacía, en la rama principal.
+    pub fn nueva() -> Self {
+        Self::default()
+    }
+
+    /// Guarda un contenido crudo y devuelve su hash. Idempotente: el mismo
+    /// contenido no se almacena dos veces (dedup por contenido).
+    fn guardar_contenido(&mut self, bytes: Vec<u8>) -> Hash {
+        let h = hash(&bytes);
+        self.contenidos.entry(h).or_insert(bytes);
+        h
+    }
+
+    /// Recupera un contenido por su hash.
+    fn contenido(&self, h: &Hash) -> Option<&[u8]> {
+        self.contenidos.get(h).map(Vec::as_slice)
+    }
+
+    /// La CABEZA: la versión en la que estamos parados (`None` si aún no hay
+    /// ninguna). Alias histórico [`punta`](Self::punta).
+    pub fn actual(&self) -> Option<Hash> {
+        self.cabeza
+    }
+
+    /// La versión en la que estamos parados. Sinónimo de [`actual`](Self::actual).
+    pub fn punta(&self) -> Option<Hash> {
+        self.cabeza
+    }
+
+    /// El nombre de la rama actual.
+    pub fn rama_actual(&self) -> &str {
+        &self.rama_actual
+    }
+
+    /// Mueve la CABEZA a `version_id` (checkout) y devuelve su proyecto. Es el
+    /// "navegar": pararse en cualquier versión para revisitarla o bifurcar desde
+    /// ahí. `None` si la versión no existe. No toca las ramas (queda "suelta"
+    /// hasta el próximo `ramificar`/`cambiar_rama`).
+    pub fn checkout(&mut self, version_id: &Hash) -> Option<Project> {
+        let p = self.proyecto_de(version_id)?;
+        self.cabeza = Some(*version_id);
+        Some(p)
+    }
+
+    /// Todas las versiones ordenadas por creación (`orden`), con su id. Es la
+    /// lista que la UI pinta como árbol/historial navegable.
+    pub fn versiones_ordenadas(&self) -> Vec<(Hash, &Version)> {
+        let mut v: Vec<(Hash, &Version)> = self.versiones.iter().map(|(h, ver)| (*h, ver)).collect();
+        v.sort_by_key(|(_, ver)| ver.orden);
+        v
+    }
+
+    /// Registra `proyecto` como una versión nueva sobre la punta de la rama
+    /// actual, con la `etiqueta` dada. Avanza la rama a la versión nueva.
+    /// Devuelve su id. El snapshot se dedupea por contenido.
+    pub fn commit(&mut self, proyecto: &Project, etiqueta: impl Into<String>) -> Result<Hash, ErrorDoc> {
+        let bytes = postcard::to_allocvec(proyecto).map_err(|e| ErrorDoc::Serializar(e.to_string()))?;
+        let snapshot = self.guardar_contenido(bytes);
+        let padres = self.cabeza.into_iter().collect();
+        let orden = self.siguiente_orden;
+        self.siguiente_orden += 1;
+        let version = Version { snapshot, padres, etiqueta: etiqueta.into(), orden };
+        let id = version.id();
+        self.versiones.insert(id, version);
+        // La cabeza avanza a la versión nueva, y la rama actual la sigue.
+        self.cabeza = Some(id);
+        self.ramas.insert(self.rama_actual.clone(), id);
+        Ok(id)
+    }
+
+    /// El proyecto de una versión (reconstruye el snapshot). `None` si la versión
+    /// o su snapshot no existen, o si el snapshot no decodifica.
+    pub fn proyecto_de(&self, version_id: &Hash) -> Option<Project> {
+        let v = self.versiones.get(version_id)?;
+        let bytes = self.contenido(&v.snapshot)?;
+        postcard::from_bytes(bytes).ok()
+    }
+
+    /// El proyecto de la CABEZA (donde estamos parados).
+    pub fn proyecto_actual(&self) -> Option<Project> {
+        self.proyecto_de(&self.cabeza?)
+    }
+
+    /// Una versión por su id.
+    pub fn version(&self, id: &Hash) -> Option<&Version> {
+        self.versiones.get(id)
+    }
+
+    /// Crea (o remueve) una rama `nombre` apuntando a la punta actual — una
+    /// ALTERNATIVA que parte de aquí. No cambia la rama actual.
+    pub fn ramificar(&mut self, nombre: impl Into<String>) -> Result<(), ErrorDoc> {
+        let cabeza = self.cabeza.ok_or(ErrorDoc::EscenaAusente(0))?;
+        self.ramas.insert(nombre.into(), cabeza);
+        Ok(())
+    }
+
+    /// Cambia la rama actual a `nombre` y mueve la cabeza a su punta. `false` si
+    /// la rama no existe.
+    pub fn cambiar_rama(&mut self, nombre: &str) -> bool {
+        if let Some(&punta) = self.ramas.get(nombre) {
+            self.rama_actual = nombre.to_string();
+            self.cabeza = Some(punta);
+            true
+        } else {
+            false
+        }
+    }
+
+    /// Las ramas (alternativas nombradas): nombre → punta.
+    pub fn ramas(&self) -> &BTreeMap<String, Hash> {
+        &self.ramas
+    }
+
+    /// La HISTORIA de una versión: ella y su linaje hacia atrás (primer padre),
+    /// de la más nueva a la más vieja. La cadena de versiones.
+    pub fn linaje(&self, version_id: &Hash) -> Vec<Hash> {
+        let mut out = Vec::new();
+        let mut actual = Some(*version_id);
+        while let Some(id) = actual {
+            if !self.versiones.contains_key(&id) || out.contains(&id) {
+                break;
+            }
+            out.push(id);
+            actual = self.versiones.get(&id).and_then(|v| v.padres.first().copied());
+        }
+        out
+    }
+
+    /// Las ALTERNATIVAS de una versión: las otras versiones que comparten alguno
+    /// de sus padres (sus hermanas en el DAG). Vacío para una versión sin padres
+    /// o sin hermanas.
+    pub fn alternativas(&self, version_id: &Hash) -> Vec<Hash> {
+        let Some(v) = self.versiones.get(version_id) else {
+            return Vec::new();
+        };
+        let mut out = Vec::new();
+        for (id, otra) in &self.versiones {
+            if id == version_id {
+                continue;
+            }
+            if otra.padres.iter().any(|p| v.padres.contains(p)) {
+                out.push(*id);
+            }
+        }
+        out
+    }
+
+    /// Cuántas versiones acumula la historia.
+    pub fn len(&self) -> usize {
+        self.versiones.len()
+    }
+
+    /// ¿Sin ninguna versión todavía?
+    pub fn is_empty(&self) -> bool {
+        self.versiones.is_empty()
+    }
+
+    // --- Persistencia (postcard nativo) ---
+
+    /// Serializa la historia entera al format nativo compacto.
+    pub fn a_bytes(&self) -> Result<Vec<u8>, ErrorDoc> {
+        postcard::to_allocvec(self).map_err(|e| ErrorDoc::Serializar(e.to_string()))
+    }
+
+    /// Reconstruye una historia desde el format nativo.
+    pub fn de_bytes(bytes: &[u8]) -> Result<Historia, ErrorDoc> {
+        postcard::from_bytes(bytes).map_err(|e| ErrorDoc::Parsear(e.to_string()))
+    }
+
+    /// Guarda la historia en `path`.
+    pub fn guardar(&self, path: impl AsRef<Path>) -> Result<(), ErrorDoc> {
+        std::fs::write(path, self.a_bytes()?).map_err(|e| ErrorDoc::Io(e.to_string()))
+    }
+
+    /// Abre una historia desde `path`.
+    pub fn abrir(path: impl AsRef<Path>) -> Result<Historia, ErrorDoc> {
+        let bytes = std::fs::read(path).map_err(|e| ErrorDoc::Io(e.to_string()))?;
+        Self::de_bytes(&bytes)
+    }
+}
diff --git a/llimphi-voxel/src/humano.rs b/llimphi-voxel/src/humano.rs
new file mode 100644
index 0000000..eafe630
--- /dev/null
+++ b/llimphi-voxel/src/humano.rs
@@ -0,0 +1,686 @@
+//! **Humanoide voxel REDONDEADO y expresivo** — el ser estilizado que aprovecha la
+//! no-voxelidad del motor (bisel/isosuperficie sub-voxel) para un look vinyl-toy /
+//! Fall-Guys / chibi CON carácter, en vez del muñeco de cajas tipo Minecraft.
+//!
+//! ## Por qué existe (lección 2026-07-18, ver [[detalle-sub-voxel-rugosidad]])
+//!
+//! El [`Actor`](crate::Actor) histórico es una **malla de 11 cajas** (`push_cube`): se
+//! ve cuadrado. Y voxelizar una foto de persona en LITERAL cae en el valle de inquietud
+//! (a tamaño grande da terror). La regla acordada: **la especie tiene su ESTILO PROPIO**
+//! (proporciones cuantizadas, gestos, ojos grandes) y la foto sólo regula RASGOS
+//! (piel/ropa). Este módulo materializa ese estilo como un **volumen voxel** de primitivas
+//! orgánicas (elipsoides + cápsulas) que, renderizado con `bisel` alto + `silueta_por_voxel`,
+//! el ray-marcher redondea a una figura simpática. Comparte la MISMA gramática de campo que
+//! el terreno/fauna (no otra fidelidad → sin valle).
+//!
+//! ## Diseño anclado en literatura (no intuición)
+//!
+//! Los parámetros de [`EstiloSer`] salen de la teoría del diseño de personajes y la
+//! percepción, no de tanteo visual:
+//! - **Kindchenschema / "baby schema"** (Konrad Lorenz, 1943; Glocker et al. 2009): cabeza
+//!   grande respecto al cuerpo, **ojos grandes y BAJOS** (a/por debajo de la mitad de la cara),
+//!   cara **redonda/ancha** (nunca alargada), nariz/boca chicas, mentón blando, mejillas y
+//!   miembros rechonchos → dispara la respuesta de ternura (activa el núcleo accumbens) y
+//!   **escapa del valle**. Dos correcciones de la literatura reciente que este módulo respeta:
+//!   (1) *la frente grande se logra BAJANDO los ojos, no estirando el cráneo* — el lever robusto
+//!   es la posición baja de los rasgos + mandíbula angosta, no la altura de la frente (estudio
+//!   morfométrico 2022); (2) *lo que suma es EVITAR ojos chicos*, no inflarlos sin límite
+//!   (Frontiers 2021: grande-vs-natural no fue significativo). → [`EstiloSer::ojo_tam`]/
+//!   [`ojo_altura`](EstiloSer::ojo_altura)/[`mejilla`](EstiloSer::mejilla)/
+//!   [`extremidad`](EstiloSer::extremidad).
+//! - **Canon de proporciones / "cabezas de alto"**: realista ≈ 7,5–8 cabezas; heroico ≈ 8,5;
+//!   cartoon estilizado ≈ 4–6; niño ≈ 4–5; **chibi/super-deformado ≈ 2–4**. Menos cabezas es
+//!   el **lever más fuerte** de "más tierno / más joven" (la ontogenia real va de cabeza=½ en el
+//!   feto a 1/7 en el adulto → un cabezón se lee juvenil sin importar el resto). → [`EstiloSer::cabezas`]
+//!   (default chibi ~2,6, NO realista).
+//! - **Shape language**: círculo = amable/suave, cuadrado = estable/fiable, triángulo =
+//!   dinámico/agresivo. Un personaje se lee por su **forma dominante** (el "appeal" nace de
+//!   comprometerse con UNA forma). → eje [`redondez`](EstiloSer::redondez) (círculo↔cuadrado,
+//!   controla también el `bisel`) y [`angulosidad`](EstiloSer::angulosidad) (hombros anchos/
+//!   cadera angosta = triángulo).
+//! - **Valle de inquietud** (Mori; Realism Inconsistency Theory, MacDorman): el valle lo
+//!   dispara **mezclar fidelidades** (rasgos en distintos niveles de realismo), no la
+//!   caricatura. Ojos grandes sobre cara FOTORREAL = lo más siniestro. Por eso el realismo se
+//!   mantiene **uniforme y bajo** y la foto SÓLO regula color (piel/ropa), nunca inyecta
+//!   geometría/textura fotográfica.
+//!
+//! ## Gestos
+//!
+//! [`humanoide_voxel`] recibe una [`Pose`](crate::Pose) (los ángulos de articulación del
+//! catálogo de [`Clip`](crate::Clip)) y la aplica a las cápsulas de miembros → el ser
+//! redondeado saluda / señala / camina con la misma expresividad que el [`Actor`], sin
+//! cajas. Es puro y determinista (testeable sin GPU).
+
+use llimphi_3d::glam::Vec3;
+use llimphi_3d::VoxelGrid;
+use serde::{Deserialize, Serialize};
+
+use crate::actor::{Age, Pose};
+
+/// **Estilo de un ser** — el juego de perillas de diseño (ver el módulo para las fuentes).
+/// Todas tienen un default con carga semántica; los presets ([`por_edad`](Self::por_edad),
+/// [`amable`](Self::amable), [`robusto`](Self::robusto), [`agil`](Self::agil)) los combinan.
+#[derive(Debug, Clone, Copy, PartialEq, Serialize, Deserialize)]
+pub struct EstiloSer {
+    /// **Cabezas de alto** (canon de proporciones). Chibi ≈ 2–4, cartoon ≈ 4–6, realista
+    /// ≈ 7,5. Menos = más tierno / más lejos del valle. La cabeza se dimensiona como
+    /// `altura / cabezas`.
+    pub cabezas: f32,
+    /// **Redondez** `[0,1]` (shape language, eje círculo↔cuadrado). `1` = elipsoides casi
+    /// esféricos + bisel máximo (amable/suave); `0` = ejes desiguales y menos bisel (más
+    /// bloque, estable/fiable). Controla también el detalle sub-voxel horneado.
+    pub redondez: f32,
+    /// **Angulosidad** `[0,1]` (shape language, sesgo triángulo): hombros anchos + cadera
+    /// angosta = silueta dinámica/atlética. `0` = cuerpo parejo (más infantil/tierno).
+    pub angulosidad: f32,
+    /// **Tamaño de ojo** como fracción del radio de la cabeza (Kindchenschema: grande =
+    /// tierno). Chibi ≈ 0,26; adulto estilizado ≈ 0,18.
+    pub ojo_tam: f32,
+    /// **Altura del ojo** en la cara, fracción del radio de cabeza desde el centro (positivo =
+    /// arriba). El lever de ternura MÁS robusto (estudio morfométrico 2022): ojos **por debajo**
+    /// de la mitad (**negativo**) agrandan la frente y suben el appeal. Adulto estilizado ≈ 0
+    /// (línea media, canon Loomis); chibi ≈ −0,2..−0,3 (tercio inferior de la cara). Positivo
+    /// (ojos altos) = más adulto/serio.
+    pub ojo_altura: f32,
+    /// **Cráneo**: modulador LEVE de la altura de la cabeza. La literatura reciente advierte
+    /// que la cara tierna es **redonda/ancha, nunca alargada**, y que la frente se logra
+    /// bajando los ojos (no estirando la cúpula) → este campo casi no estira en Y (clamp a
+    /// ~±6 %) y se conserva sólo por compatibilidad/afinado. `1` = cabeza redonda.
+    pub craneo: f32,
+    /// **Mejilla**: ensancha la mitad inferior de la cabeza (cara redonda de bebé). `1` = sin
+    /// ensanche.
+    pub mejilla: f32,
+    /// **Rechonchez de miembros**: radio de brazos/piernas como fracción de la altura
+    /// (chibi ≈ 0,075; esbelto ≈ 0,05). Miembros gorditos = más tierno.
+    pub extremidad: f32,
+    /// **Panza**: redondez del torso (semieje Y/X). `>1` = barriga/pecho abombado (tierno);
+    /// `1` = torso parejo.
+    pub panza: f32,
+}
+
+impl Default for EstiloSer {
+    /// El default es un **chibi amable** (el look probado): ~2,6 cabezas, redondo, ojos
+    /// grandes a la altura media, cráneo abombado. Reproduce el personaje del `demo_elimon`.
+    fn default() -> Self {
+        Self {
+            cabezas: 2.6,
+            redondez: 1.0,
+            angulosidad: 0.0,
+            ojo_tam: 0.26,
+            ojo_altura: -0.20,
+            craneo: 1.0,
+            mejilla: 1.08,
+            extremidad: 0.075,
+            panza: 1.05,
+        }
+    }
+}
+
+impl EstiloSer {
+    /// Estilo por **edad**: el canon de cabezas y el baby-schema varían con el estadio.
+    /// Bebé = 2 cabezas, ojos enormes y bajos, cráneo grande (máxima ternura); adulto
+    /// estilizado = 4,5 cabezas, ojos moderados a la media (NO 7,5 realista: se busca appeal
+    /// y anti-valle). Escala monótona en el medio.
+    pub fn por_edad(age: Age) -> Self {
+        // Escala del "dial de ternura" (mature→cute) coordinada con las cabezas: menos
+        // cabezas ⇒ ojos más grandes y MÁS BAJOS (tercio inferior), cara más ancha, miembros
+        // más gordos. Adulto estilizado = ojos a la línea media (0), NO 7,5 realista (appeal +
+        // anti-valle). (cabezas, ojo_tam, ojo_altura, craneo, mejilla, extremidad, panza)
+        let (cab, ot, oa, cr, mj, ex, pz) = match age {
+            Age::Baby => (2.0, 0.32, -0.32, 1.0, 1.16, 0.092, 1.22),
+            Age::Child => (3.4, 0.28, -0.24, 1.0, 1.10, 0.080, 1.14),
+            Age::Teen => (4.2, 0.22, -0.12, 1.0, 1.04, 0.066, 1.06),
+            Age::Adult => (4.5, 0.19, -0.04, 1.0, 1.00, 0.060, 1.04),
+            Age::Elder => (4.3, 0.19, -0.05, 1.0, 1.02, 0.062, 1.06),
+        };
+        Self {
+            cabezas: cab,
+            redondez: 1.0,
+            angulosidad: 0.0,
+            ojo_tam: ot,
+            ojo_altura: oa,
+            craneo: cr,
+            mejilla: mj,
+            extremidad: ex,
+            panza: pz,
+        }
+    }
+
+    /// **Arquetipo redondo** (shape language: círculo → amable/suave). Chibi cabezón,
+    /// máxima redondez, ojos grandes: el default reforzado.
+    pub fn amable() -> Self {
+        Self::default()
+    }
+
+    /// **Arquetipo robusto** (shape language: cuadrado → estable/fiable). Menos redondez
+    /// (más bloque), cuerpo ancho y parejo, ojos más chicos, algo más de cabezas.
+    pub fn robusto() -> Self {
+        Self {
+            cabezas: 3.6,
+            redondez: 0.45,
+            angulosidad: 0.15,
+            ojo_tam: 0.19,
+            ojo_altura: -0.02,
+            craneo: 1.0,
+            mejilla: 1.12,
+            extremidad: 0.085,
+            panza: 1.02,
+        }
+    }
+
+    /// **Arquetipo ágil** (shape language: triángulo → dinámico/atlético). Más alto, hombros
+    /// anchos y cadera angosta (angulosidad alta), miembros más finos.
+    pub fn agil() -> Self {
+        Self {
+            cabezas: 4.6,
+            redondez: 0.7,
+            angulosidad: 0.7,
+            ojo_tam: 0.19,
+            ojo_altura: 0.02,
+            craneo: 1.0,
+            mejilla: 0.98,
+            extremidad: 0.055,
+            panza: 0.98,
+        }
+    }
+
+    /// Detalle sub-voxel `(rugosidad, bisel)` horneado por voxel: el bisel sube con la
+    /// redondez (silueta lisa), la rugosidad es un grano de piel constante suave. Es la
+    /// gramática de campo del ser vivo — misma que el terreno, con más redondeo.
+    pub fn detalle(&self) -> (f32, f32) {
+        let bisel = (0.35 + 0.65 * self.redondez.clamp(0.0, 1.0)).clamp(0.0, 1.0);
+        // Grano de piel MUY leve: de cerca (el objetivo del plan) una rugosidad fuerte se
+        // ve como escamas/beading. Suficiente para no quedar plástico plano, no más.
+        (0.06, bisel)
+    }
+}
+
+/// Colores de un ser (`[r,g,b]` en `[0,1]`, como [`Actor`](crate::Actor)): los que la foto
+/// regula (piel/remera/pantalón) + el pelo (derivado o fijo).
+#[derive(Debug, Clone, Copy)]
+pub struct Colores {
+    pub skin: [f32; 3],
+    pub shirt: [f32; 3],
+    pub pants: [f32; 3],
+    pub hair: [f32; 3],
+}
+
+impl Colores {
+    /// Colores desde un [`CharSpec`](crate::CharSpec)-like (piel/remera/pantalón), con un
+    /// pelo derivado (marrón oscuro tintado hacia la piel) para que combine. Usa
+    /// [`con_pelo`](Self::con_pelo) si tienes el color de pelo REAL (de la foto).
+    pub fn nuevos(skin: [f32; 3], shirt: [f32; 3], pants: [f32; 3]) -> Self {
+        // Pelo: oscuro cálido, apenas influido por el tono de piel (combina con retratos).
+        let hair = [
+            (0.18 + skin[0] * 0.12).min(1.0),
+            (0.13 + skin[1] * 0.10).min(1.0),
+            (0.12 + skin[2] * 0.08).min(1.0),
+        ];
+        Self { skin, shirt, pants, hair }
+    }
+
+    /// Colores con **pelo explícito** (p.ej. muestreado FIEL de la foto), no derivado.
+    pub fn con_pelo(skin: [f32; 3], shirt: [f32; 3], pants: [f32; 3], hair: [f32; 3]) -> Self {
+        Self { skin, shirt, pants, hair }
+    }
+}
+
+#[inline]
+fn u8c(c: [f32; 3]) -> [u8; 3] {
+    [
+        (c[0].clamp(0.0, 1.0) * 255.0) as u8,
+        (c[1].clamp(0.0, 1.0) * 255.0) as u8,
+        (c[2].clamp(0.0, 1.0) * 255.0) as u8,
+    ]
+}
+
+/// Rota `v` alrededor del eje X por `a` rad (plano Y-Z; adelante = +Z).
+#[inline]
+fn rot_x(v: Vec3, a: f32) -> Vec3 {
+    let (s, c) = a.sin_cos();
+    Vec3::new(v.x, v.y * c - v.z * s, v.y * s + v.z * c)
+}
+
+/// Rota `v` alrededor del eje Z por `a` rad (plano X-Y; abrir brazo al costado).
+#[inline]
+fn rot_z(v: Vec3, a: f32) -> Vec3 {
+    let (s, c) = a.sin_cos();
+    Vec3::new(v.x * c - v.y * s, v.x * s + v.y * c, v.z)
+}
+
+/// **Construye el humanoide voxel** de `altura_vox` voxels de alto (referencia), con el
+/// `estilo` dado, en la `pose` dada (gestos), coloreado por `col`. Pies en `y≈0`, centrado
+/// en X/Z, mirando a `+Z`. Hornea el detalle sub-voxel por voxel (bisel según la redondez).
+/// Puro y determinista.
+pub fn humanoide_voxel(estilo: &EstiloSer, pose: &Pose, altura_vox: u32, col: Colores) -> VoxelGrid {
+    let h = (altura_vox.max(20)) as f32;
+    let cabezas = estilo.cabezas.clamp(1.6, 8.0);
+
+    // --- Proporciones derivadas del canon de cabezas + baby-schema ---
+    let head_r = h / (2.0 * cabezas); // radio de cabeza = ½ (altura / cabezas)
+    // La cabeza tierna es REDONDA/ancha, nunca alargada (lit. 2022): el cráneo casi no estira
+    // en Y (±6 %) — la frente grande la da bajar los ojos, no una cúpula alta.
+    let head_ry = head_r * (1.0 + 0.2 * (estilo.craneo - 1.0)).clamp(0.94, 1.06);
+    // La cabeza corona la figura; su tope roza `h`.
+    let head_cy = h - head_ry * 1.02;
+    let neck = head_r * 0.14;
+    let shoulder_y = (head_cy - head_ry - neck).max(head_r);
+
+    // Torso y piernas se reparten [0, shoulder_y]: chibi = piernas cortas. La fracción de
+    // pierna sube con `cabezas` (más alto = piernas proporcionalmente más largas).
+    let leg_frac = (0.28 + 0.055 * (cabezas - 2.0)).clamp(0.28, 0.52);
+    let hip_y = shoulder_y * leg_frac;
+    let torso_cy = (hip_y + shoulder_y) * 0.5;
+    let torso_ry = (shoulder_y - hip_y) * 0.5;
+    // Ancho del torso: la cabeza debe DOMINAR (head:torso ≈ 1:0,8, cabeza mayor). Base por
+    // altura, modulada por redondez (redondo = más parejo).
+    let torso_rx = h * (0.13 + 0.05 * estilo.redondez);
+    // Profundidad casi igual al ancho (torso REDONDO, no una losa chata): un torso poco
+    // profundo presenta una cara frontal casi plana donde la normal varía lentísimo → el
+    // escalonado residual del gradiente se ve como anillos anchos. Redondearlo aprieta los
+    // pasos y da una panza de peluche.
+    let torso_rz = torso_rx * 0.92;
+
+    let limb_r = h * estilo.extremidad;
+
+    // Shape language triángulo: hombros anchos, cadera angosta con la angulosidad. Los hombros
+    // se anclan JUSTO AFUERA del torso (≥ `torso_rx`) para que los brazos cuelguen al costado con
+    // una junta limpia — hundirlos DENTRO del torso (como antes, 0,72·torso_rx) enterraba la
+    // cápsula del brazo y la normal ancha escalonaba esa junta sepultada → anillos en la panza.
+    let ang = estilo.angulosidad.clamp(0.0, 1.0);
+    let shoulder_x = torso_rx + limb_r * (0.35 + 0.9 * ang);
+    let hip_x = torso_rx * (0.55 - 0.18 * ang);
+    let leg_len = hip_y; // el pie llega a ~0
+    let arm_len = (shoulder_y - hip_y) * 1.02;
+
+    // --- Grid: bbox de la figura + margen (para que el bisel no toque el borde) ---
+    let half_w = (shoulder_x + limb_r * 1.4).max(torso_rx).max(head_r * estilo.mejilla) + 2.0;
+    let half_d = (torso_rz + limb_r).max(head_r) + arm_len * 0.4 + 2.0;
+    let gw = (half_w * 2.0).ceil() as u32 + 1;
+    let gd = (half_d * 2.0).ceil() as u32 + 1;
+    let gh = (h + head_ry * 0.3).ceil() as u32 + 2;
+    let mut g = VoxelGrid::new([gw, gh, gd]);
+    let cx = gw as f32 * 0.5;
+    let cz = gd as f32 * 0.5;
+    let base = Vec3::new(cx, 0.0, cz);
+
+    // Detalle sub-voxel del cuerpo (bisel por redondez) — pincel para todo lo que estampe.
+    let (rug, bisel) = estilo.detalle();
+    g.set_detail_brush(rug, bisel);
+
+    let skin = u8c(col.skin);
+    let shirt = u8c(col.shirt);
+    let pants = u8c(col.pants);
+    let hair = u8c(col.hair);
+
+    // Transform del cuerpo superior (torso/cabeza/brazos): rebote `bob` + inclinación `lean`
+    // alrededor de la cadera (pivote en `hip_y`). Las piernas quedan plantadas.
+    let bob = pose.bob * h * 0.5;
+    let upper = |local_y: f32, off: Vec3| -> Vec3 {
+        // punto (0, local_y, 0)+off, inclinado por lean sobre el pivote de cadera y subido bob
+        let rel = Vec3::new(off.x, local_y - hip_y, off.z);
+        let r = rot_x(rel, pose.lean);
+        base + Vec3::new(r.x, hip_y + r.y + bob, r.z)
+    };
+
+    // --- Piernas: cápsulas rechonchas, articuladas en la cadera (leg swing en X) ---
+    for (sx, swing) in [(-1.0f32, pose.leg_l), (1.0, pose.leg_r)] {
+        let hip = base + Vec3::new(sx * hip_x, hip_y, 0.0);
+        let dir = rot_x(Vec3::new(0.0, -leg_len, 0.0), swing);
+        let foot = hip + dir;
+        capsula(&mut g, hip, foot, limb_r * 1.05, pants);
+    }
+
+    // --- Torso: elipsoide redondo (panza) ---
+    let torso_c = upper(torso_cy, Vec3::ZERO);
+    elipsoide(&mut g, torso_c, Vec3::new(torso_rx, torso_ry * estilo.panza, torso_rz), shirt);
+
+    // --- Brazos: cápsulas al costado, articuladas en el hombro (out en Z, swing en X) ---
+    // Splay base: aun en reposo los brazos abren un poco hacia afuera para NO fundirse con el
+    // torso ni juntar las manos al frente (leía como "manos atadas"). Se suma a la apertura del gesto.
+    let base_out = 0.16;
+    for (sx, swing, out) in [(-1.0f32, pose.arm_l, pose.arm_l_out), (1.0, pose.arm_r, pose.arm_r_out)] {
+        let shoulder = upper(shoulder_y, Vec3::new(sx * shoulder_x, 0.0, 0.0));
+        // dirección local del brazo colgando, rotada: primero swing (X), luego apertura (Z).
+        let mut dir = rot_x(Vec3::new(0.0, -arm_len, 0.0), swing);
+        dir = rot_z(dir, sx * (out + base_out)); // apertura espejada por lado
+        // el brazo también acompaña el lean del cuerpo superior
+        dir = rot_x(dir, pose.lean);
+        let hand = shoulder + dir;
+        capsula(&mut g, shoulder, hand, limb_r, shirt);
+        // Mano: esferita de piel en la punta (apenas mayor que el brazo, no un guante gigante).
+        elipsoide(&mut g, hand, Vec3::splat(limb_r * 0.98), skin);
+    }
+
+    // --- Cabeza + cara (baby-schema) ---
+    let head_c = upper(head_cy, Vec3::ZERO);
+    // Cabeza: elipsoide con cúpula (craneo) arriba y mejilla abajo. La construimos como un
+    // elipsoide con radios asimétricos por hemisferio via `elipsoide_mejilla`.
+    let head_rx = head_r * estilo.mejilla;
+    elipsoide_cabeza(&mut g, head_c, head_r, head_rx, head_ry, skin);
+
+    // **Zona de bigote/barba = coloración PLANA, sin sustancia** (no una boca protuberante,
+    // que parecía un pico de pato): re-tiñe la piel de la mitad inferior FRONTAL de la cara a
+    // un tono apenas más apagado/oscuro (sombra de barba). No agrega geometría; se aplica
+    // ANTES del pelo/ojos para no pisarlos. Sutil a propósito (que no lea como máscara).
+    let eye_y0 = head_c.y + estilo.ojo_altura * head_r;
+    tint_barba(&mut g, head_c, head_rx, head_ry, head_r, eye_y0, skin);
+
+    // Pelo: **casquete alto** sobre la corona, corrido hacia atrás (−Z) para dejar la FRENTE
+    // y las mejillas de piel a la vista (la frente grande es el rasgo tierno). No baja hasta
+    // los ojos: recorte bien por encima → cara abierta, no un antifaz enmarcado.
+    let eye_y = head_c.y + estilo.ojo_altura * head_r;
+    elipsoide_min_y(
+        &mut g,
+        head_c + Vec3::new(0.0, head_ry * 0.40, -head_r * 0.14),
+        Vec3::new(head_rx * 1.02, head_ry * 0.80, head_r * 1.0),
+        hair,
+        eye_y + head_r * 0.58,
+    );
+
+    // Ojos: **esclera clara + pupila oscura + chispa** (NO un óvalo negro suelto, que a esta
+    // resolución + isosuperficie leía como un HUECO/cuenca vacía = cara de monstruo). El blanco
+    // domina y "abre" el ojo; la pupila oscura, más chica y al frente-centro, da la mirada; una
+    // chispa arriba-interior le pone vida. Anchos > altos (ojo infantil), BIEN separados, con piel
+    // en medio y alrededor (no antifaz). A/por debajo de la media (`ojo_altura`). `head_pitch` tilta.
+    let er = head_r * estilo.ojo_tam;
+    let ex = head_rx * 0.5;
+    let zf = head_r * 0.80;
+    let eoff = eye_y - head_c.y;
+    for s in [-1.0f32, 1.0] {
+        let eye = head_c + rot_x(Vec3::new(s * ex, eoff, zf), pose.head_pitch);
+        // Esclera: óvalo claro, ancho, apenas saliente al frente para que no se hunda.
+        elipsoide(&mut g, eye, Vec3::new(er * 1.06, er * 0.86, er * 0.62), [240, 241, 244]);
+        // Pupila/iris: oscura, ~mitad, corrida al FRENTE (+Z) y apenas hacia adentro (mirada
+        // convergente amable) y abajo. Va DESPUÉS de la esclera para pisarla en el centro.
+        let pupil = head_c + rot_x(Vec3::new(s * ex - s * er * 0.12, eoff - er * 0.08, zf + er * 0.28), pose.head_pitch);
+        elipsoide(&mut g, pupil, Vec3::new(er * 0.52, er * 0.6, er * 0.5), [40, 32, 46]);
+        // Chispa (arriba-interior de la pupila) — grande para que lea de lejos.
+        let spark = head_c + rot_x(Vec3::new(s * ex - s * er * 0.28, eoff + er * 0.34, zf + er * 0.5), pose.head_pitch);
+        elipsoide(&mut g, spark, Vec3::new(er * 0.3, er * 0.3, er * 0.34), [250, 251, 253]);
+    }
+
+    // **Boca = sonrisa como tint PLANO** (sin geometría protuberante: una boca de color en
+    // relieve leía como pico de pato). Re-tiñe una banda corta, curvada hacia ARRIBA (feliz),
+    // de la piel frontal-baja de la cara a un tono cálido apagado. Pequeña y centrada. Va
+    // después de barba/ojos para no pisarse.
+    let boca_y = eye_y - head_r * 0.44;
+    sonrisa(&mut g, head_c, head_rx, head_r, boca_y, skin);
+
+    g.clear_detail_brush();
+    g.reset_dirty();
+    g
+}
+
+/// Rellena un elipsoide de semiejes `r` centrado en `c` con `color`.
+fn elipsoide(g: &mut VoxelGrid, c: Vec3, r: Vec3, color: [u8; 3]) {
+    elipsoide_min_y(g, c, r, color, f32::NEG_INFINITY);
+}
+
+/// Elipsoide recortado por abajo (`y >= y_min`) — para casquetes de pelo.
+fn elipsoide_min_y(g: &mut VoxelGrid, c: Vec3, r: Vec3, color: [u8; 3], y_min: f32) {
+    let [dx, dy, dz] = g.dim();
+    let x0 = (c.x - r.x).floor().max(0.0) as u32;
+    let x1 = (c.x + r.x).ceil().min(dx as f32) as u32;
+    let y0 = (c.y - r.y).floor().max(0.0).max(y_min.max(0.0)) as u32;
+    let y1 = (c.y + r.y).ceil().min(dy as f32) as u32;
+    let z0 = (c.z - r.z).floor().max(0.0) as u32;
+    let z1 = (c.z + r.z).ceil().min(dz as f32) as u32;
+    for x in x0..x1 {
+        for y in y0..y1 {
+            if (y as f32) < y_min {
+                continue;
+            }
+            for z in z0..z1 {
+                let d = Vec3::new(
+                    (x as f32 + 0.5 - c.x) / r.x,
+                    (y as f32 + 0.5 - c.y) / r.y,
+                    (z as f32 + 0.5 - c.z) / r.z,
+                );
+                if d.length_squared() <= 1.0 {
+                    g.set(x, y, z, color);
+                }
+            }
+        }
+    }
+}
+
+/// Cabeza: elipsoide con **cúpula arriba** (semieje Y superior) y **mejillas** (radio X
+/// pleno abajo, afinado arriba) — la forma del baby-schema. `rx` ya lleva el ensanche de
+/// mejilla; arriba de la mitad se afina hacia `head_r` para no quedar cuadrada.
+fn elipsoide_cabeza(g: &mut VoxelGrid, c: Vec3, head_r: f32, rx: f32, ry: f32, color: [u8; 3]) {
+    let [dx, dy, dz] = g.dim();
+    let x0 = (c.x - rx).floor().max(0.0) as u32;
+    let x1 = (c.x + rx).ceil().min(dx as f32) as u32;
+    let y0 = (c.y - ry).floor().max(0.0) as u32;
+    let y1 = (c.y + ry).ceil().min(dy as f32) as u32;
+    let z0 = (c.z - rx).floor().max(0.0) as u32;
+    let z1 = (c.z + rx).ceil().min(dz as f32) as u32;
+    for y in y0..y1 {
+        let ty = (y as f32 + 0.5 - c.y) / ry; // -1..1
+        // Radio horizontal por altura: mejilla plena abajo (ty<0), afina hacia head_r arriba.
+        let rh = if ty >= 0.0 { rx + (head_r - rx) * ty } else { rx };
+        let rz = rh * 0.96;
+        for x in x0..x1 {
+            for z in z0..z1 {
+                let dxx = (x as f32 + 0.5 - c.x) / rh;
+                let dzz = (z as f32 + 0.5 - c.z) / rz;
+                if dxx * dxx + ty * ty + dzz * dzz <= 1.0 {
+                    g.set(x, y, z, color);
+                }
+            }
+        }
+    }
+}
+
+/// **Sombra de barba/bigote como tint PLANO** (sin geometría): re-tiñe la piel de la mitad
+/// inferior FRONTAL de la cara a un tono apenas más oscuro/apagado. Sólo toca voxels que HOY
+/// son piel (`== skin`), así no pisa ojos/pelo (que se estampan después). Sutil a propósito.
+fn tint_barba(g: &mut VoxelGrid, c: Vec3, rx: f32, ry: f32, head_r: f32, eye_y: f32, skin: [u8; 3]) {
+    // Barba = piel un 6% más oscura, apenas más fría (sombra tenue, no una máscara: fuerte
+    // ensuciaba la cara y la volvía adusta/monstruosa).
+    let beard = [
+        (skin[0] as f32 * 0.94) as u8,
+        (skin[1] as f32 * 0.93) as u8,
+        (skin[2] as f32 * 0.94) as u8,
+    ];
+    let [dx, dy, dz] = g.dim();
+    // De la barbilla hasta un poco por debajo de los ojos (zona bigote+barba+mentón).
+    let y0 = (c.y - ry).floor().max(0.0) as u32;
+    let y1 = (eye_y - head_r * 0.30).floor().max(0.0).min(dy as f32) as u32;
+    let x0 = (c.x - rx).floor().max(0.0) as u32;
+    let x1 = (c.x + rx).ceil().min(dx as f32) as u32;
+    // Sólo el frente de la cara (+Z), no la nuca/mandíbula lateral.
+    let z0 = (c.z + head_r * 0.28).floor().max(0.0) as u32;
+    let z1 = (c.z + head_r * 1.1).ceil().min(dz as f32) as u32;
+    for x in x0..x1 {
+        for y in y0..y1 {
+            for z in z0..z1 {
+                if let Some(px) = g.get(x, y, z) {
+                    if px[3] > 0 && [px[0], px[1], px[2]] == skin {
+                        g.set(x, y, z, beard);
+                    }
+                }
+            }
+        }
+    }
+}
+
+/// **Sonrisa como tint PLANO** (sin geometría): re-tiñe una banda corta de piel FRONTAL a la
+/// altura `boca_y`, curvada hacia arriba en los extremos (feliz), a un tono cálido apagado
+/// (labios/sombra de boca, no rojo saturado que a esta resolución grita "pico de pato"). Sólo
+/// pisa voxels que HOY son piel, así no borra ojos/pelo. Centrada en X, en el hemisferio +Z.
+fn sonrisa(g: &mut VoxelGrid, c: Vec3, rx: f32, head_r: f32, boca_y: f32, skin: [u8; 3]) {
+    // Boca = piel bastante más oscura y algo más cálida (rojiza), pero NO roja pura.
+    let mouth = [
+        (skin[0] as f32 * 0.72 + 22.0).min(255.0) as u8,
+        (skin[1] as f32 * 0.55).min(255.0) as u8,
+        (skin[2] as f32 * 0.55).min(255.0) as u8,
+    ];
+    let [dx, dy, dz] = g.dim();
+    let half_w = rx * 0.42; // media boca
+    let thick = head_r * 0.12; // grosor vertical de la línea
+    let curve = head_r * 0.22; // cuánto suben los extremos (sonrisa)
+    let x0 = (c.x - half_w).floor().max(0.0) as u32;
+    let x1 = (c.x + half_w).ceil().min(dx as f32) as u32;
+    // Sólo el frente de la cara (+Z).
+    let z0 = (c.z + head_r * 0.5).floor().max(0.0) as u32;
+    let z1 = (c.z + head_r * 1.1).ceil().min(dz as f32) as u32;
+    for x in x0..x1 {
+        // Altura de la línea de sonrisa en esta X: sube hacia los extremos (parábola).
+        let t = ((x as f32 + 0.5 - c.x) / half_w).clamp(-1.0, 1.0);
+        let ly = boca_y + curve * t * t;
+        let y0 = (ly - thick * 0.5).floor().max(0.0) as u32;
+        let y1 = (ly + thick * 0.5).ceil().min(dy as f32) as u32;
+        for y in y0..y1 {
+            for z in z0..z1 {
+                if let Some(px) = g.get(x, y, z) {
+                    if px[3] > 0 && [px[0], px[1], px[2]] == skin {
+                        g.set(x, y, z, mouth);
+                    }
+                }
+            }
+        }
+    }
+}
+
+/// Cápsula (cilindro con tapas esféricas) de radio `r` entre los puntos `a` y `b`.
+fn capsula(g: &mut VoxelGrid, a: Vec3, b: Vec3, r: f32, color: [u8; 3]) {
+    let [dx, dy, dz] = g.dim();
+    let lo = a.min(b) - Vec3::splat(r + 1.0);
+    let hi = a.max(b) + Vec3::splat(r + 1.0);
+    let x0 = lo.x.floor().max(0.0) as u32;
+    let x1 = hi.x.ceil().min(dx as f32) as u32;
+    let y0 = lo.y.floor().max(0.0) as u32;
+    let y1 = hi.y.ceil().min(dy as f32) as u32;
+    let z0 = lo.z.floor().max(0.0) as u32;
+    let z1 = hi.z.ceil().min(dz as f32) as u32;
+    let ab = b - a;
+    let ab2 = ab.length_squared().max(1e-6);
+    let r2 = r * r;
+    for x in x0..x1 {
+        for y in y0..y1 {
+            for z in z0..z1 {
+                let p = Vec3::new(x as f32 + 0.5, y as f32 + 0.5, z as f32 + 0.5);
+                let t = ((p - a).dot(ab) / ab2).clamp(0.0, 1.0);
+                let closest = a + ab * t;
+                if (p - closest).length_squared() <= r2 {
+                    g.set(x, y, z, color);
+                }
+            }
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    fn solids(g: &VoxelGrid) -> usize {
+        let [w, h, d] = g.dim();
+        let mut n = 0;
+        for x in 0..w {
+            for y in 0..h {
+                for z in 0..d {
+                    if g.is_solid(x as i32, y as i32, z as i32) {
+                        n += 1;
+                    }
+                }
+            }
+        }
+        n
+    }
+
+    fn col() -> Colores {
+        Colores::nuevos([0.85, 0.68, 0.54], [0.2, 0.6, 0.55], [0.18, 0.22, 0.34])
+    }
+
+    #[test]
+    fn construye_un_ser_con_volumen() {
+        let g = humanoide_voxel(&EstiloSer::default(), &Pose::default(), 46, col());
+        assert!(solids(&g) > 3000, "el ser tiene volumen: {}", solids(&g));
+    }
+
+    #[test]
+    fn pies_en_el_piso() {
+        // El voxel sólido más bajo está cerca de y=0 (pies apoyados).
+        let g = humanoide_voxel(&EstiloSer::default(), &Pose::default(), 46, col());
+        let [w, h, d] = g.dim();
+        let mut ymin = h;
+        for x in 0..w {
+            for y in 0..h {
+                for z in 0..d {
+                    if g.is_solid(x as i32, y as i32, z as i32) {
+                        ymin = ymin.min(y);
+                    }
+                }
+            }
+        }
+        assert!(ymin <= 2, "pies cerca del piso: ymin={ymin}");
+    }
+
+    #[test]
+    fn el_bebe_es_mas_cabezon_que_el_adulto() {
+        // Menos cabezas ⇒ la cabeza ocupa una fracción mayor de la altura.
+        let baby = EstiloSer::por_edad(Age::Baby);
+        let adult = EstiloSer::por_edad(Age::Adult);
+        assert!(baby.cabezas < adult.cabezas, "bebé menos cabezas");
+        // Radio de cabeza relativo a la altura.
+        let hr = |e: &EstiloSer| 1.0 / (2.0 * e.cabezas);
+        assert!(hr(&baby) > hr(&adult) + 0.05, "bebé cabezón");
+    }
+
+    #[test]
+    fn los_gestos_cambian_la_silueta() {
+        // Festejar (brazos arriba) ensancha/eleva la ocupación respecto a idle.
+        let idle = humanoide_voxel(&EstiloSer::default(), &Pose::default(), 46, col());
+        let cheer = crate::Clip::Cheer.pose(1.2);
+        let festeja = humanoide_voxel(&EstiloSer::default(), &cheer, 46, col());
+        // Ocupación en la franja alta (por encima de la cabeza-hombro) crece al levantar brazos.
+        let alto = |g: &VoxelGrid| {
+            let [w, h, d] = g.dim();
+            let y0 = h * 3 / 4;
+            let mut n = 0;
+            for x in 0..w {
+                for y in y0..h {
+                    for z in 0..d {
+                        if g.is_solid(x as i32, y as i32, z as i32) {
+                            n += 1;
+                        }
+                    }
+                }
+            }
+            n
+        };
+        assert!(alto(&festeja) > alto(&idle), "festejar sube volumen alto: {} vs {}", alto(&festeja), alto(&idle));
+    }
+
+    #[test]
+    fn hornea_detalle_por_voxel() {
+        // Con redondez alta el bisel horneado es alto (silueta lisa).
+        let g = humanoide_voxel(&EstiloSer::default(), &Pose::default(), 40, col());
+        let [w, h, d] = g.dim();
+        let mut con_detalle = 0;
+        for x in 0..w {
+            for y in 0..h {
+                for z in 0..d {
+                    if g.is_solid(x as i32, y as i32, z as i32) {
+                        if let Some(det) = g.detail_at(x, y, z) {
+                            if det != [0, 0] {
+                                con_detalle += 1;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        assert!(con_detalle > 1000, "el cuerpo lleva detalle por voxel: {con_detalle}");
+    }
+
+    #[test]
+    fn presets_de_arquetipo_difieren() {
+        assert!(EstiloSer::amable().redondez > EstiloSer::robusto().redondez);
+        assert!(EstiloSer::agil().angulosidad > EstiloSer::amable().angulosidad);
+        assert!(EstiloSer::agil().cabezas > EstiloSer::amable().cabezas);
+    }
+}
diff --git a/llimphi-voxel/src/interior.rs b/llimphi-voxel/src/interior.rs
new file mode 100644
index 0000000..875c519
--- /dev/null
+++ b/llimphi-voxel/src/interior.rs
@@ -0,0 +1,454 @@
+//! **Interior**: una habitación amueblada — un piso (opcionalmente con muros) y una
+//! lista de [`Pieza`]s (un [`Mueble`] colocado en una celda con su orientación). Es
+//! el modelo-documento del *editor de interiores* del studio: se **construye a un
+//! [`VoxelGrid`]** con [`Interior::build_grid`] para previsualizarlo, y la UI agrega
+//! piezas al hacer click sobre el piso.
+
+use serde::{Deserialize, Serialize};
+
+use crate::mueble::{stamp_mueble, Mueble};
+use crate::worldgen::Material;
+use llimphi_3d::{PointLight, VoxelGrid, VOXEL_MAX_LIGHTS};
+
+/// Un mueble colocado: qué [`Mueble`], en qué celda del piso `(gx, gz)` y con qué
+/// orientación (`facing` 0=+Z … 3=−X).
+#[derive(Debug, Clone, Copy, Serialize, Deserialize)]
+pub struct Pieza {
+    pub mueble: Mueble,
+    pub gx: u32,
+    pub gz: u32,
+    pub facing: u8,
+}
+
+/// **Tipo de techo** de la habitación: forma + material.
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize)]
+pub enum TechoTipo {
+    /// Losa plana (cielorraso de hormigón).
+    Plano,
+    /// Dos aguas de tejas de barro.
+    Tejas,
+    /// Dos aguas de chapa de zinc (acanalada).
+    Zinc,
+    /// Dos aguas de pizarra oscura.
+    Pizarra,
+    /// Dos aguas de paja.
+    Paja,
+}
+
+impl TechoTipo {
+    pub const ALL: [TechoTipo; 5] =
+        [TechoTipo::Plano, TechoTipo::Tejas, TechoTipo::Zinc, TechoTipo::Pizarra, TechoTipo::Paja];
+
+    /// Material con que se pinta.
+    pub fn material(self) -> Material {
+        match self {
+            TechoTipo::Plano => Material::Hormigon,
+            TechoTipo::Tejas => Material::Teja,
+            TechoTipo::Zinc => Material::Acero,
+            TechoTipo::Pizarra => Material::Pizarra,
+            TechoTipo::Paja => Material::Paja,
+        }
+    }
+
+    /// `true` si es una losa plana (los demás son a dos aguas).
+    pub fn es_plano(self) -> bool {
+        matches!(self, TechoTipo::Plano)
+    }
+
+    pub fn label(self) -> &'static str {
+        match self {
+            TechoTipo::Plano => "plano",
+            TechoTipo::Tejas => "tejas",
+            TechoTipo::Zinc => "zinc",
+            TechoTipo::Pizarra => "pizarra",
+            TechoTipo::Paja => "paja",
+        }
+    }
+
+    pub fn next(self) -> TechoTipo {
+        let i = TechoTipo::ALL.iter().position(|&t| t == self).unwrap_or(0);
+        TechoTipo::ALL[(i + 1) % TechoTipo::ALL.len()]
+    }
+}
+
+/// **Recorte tipo casa de muñecas**: qué muros (y el rincón de techo) ocultar para
+/// mirar la habitación por dentro. Se calcula del rumbo (`yaw`) de la cámara: se
+/// ocultan los muros del lado del que mira. (`oeste`=−X, `este`=+X, `norte`=−Z, `sur`=+Z.)
+#[derive(Debug, Clone, Copy, Default, PartialEq, Eq)]
+pub struct Cutaway {
+    pub oeste: bool,
+    pub este: bool,
+    pub norte: bool,
+    pub sur: bool,
+}
+
+impl Cutaway {
+    /// Sin recorte (habitación entera).
+    pub fn none() -> Self {
+        Self::default()
+    }
+
+    /// Recorte según el rumbo de cámara `yaw` (radianes): oculta los 1–2 muros que
+    /// quedan entre la cámara y el interior.
+    pub fn from_yaw(yaw: f32) -> Self {
+        let (s, c) = (yaw.sin(), yaw.cos());
+        Self { este: s > 0.2, oeste: s < -0.2, sur: c > 0.2, norte: c < -0.2 }
+    }
+
+    /// Código estable `[0,15]` (para saber si cambió y regenerar el grid).
+    pub fn code(self) -> u64 {
+        (self.oeste as u64) | ((self.este as u64) << 1) | ((self.norte as u64) << 2) | ((self.sur as u64) << 3)
+    }
+}
+
+/// Una habitación amueblable.
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct Interior {
+    pub id: u64,
+    pub name: String,
+    /// Ancho del piso (eje X), en celdas.
+    pub ancho: u32,
+    /// Fondo del piso (eje Z), en celdas.
+    pub fondo: u32,
+    /// Material del piso.
+    pub piso: Material,
+    /// Material de los muros.
+    pub muro: Material,
+    /// Dibujar muros perimetrales.
+    pub muros: bool,
+    /// Abrir ventanas de vidrio en los muros (dejan entrar la luz del día).
+    #[serde(default = "default_true")]
+    pub ventanas: bool,
+    /// Poner techo (con recorte casa de muñecas al previsualizar).
+    #[serde(default = "default_true")]
+    pub con_techo: bool,
+    /// Tipo de techo.
+    #[serde(default = "default_techo")]
+    pub techo: TechoTipo,
+    /// Muebles colocados.
+    pub piezas: Vec<Pieza>,
+}
+
+fn default_true() -> bool {
+    true
+}
+
+fn default_techo() -> TechoTipo {
+    TechoTipo::Tejas
+}
+
+impl Interior {
+    /// Grosor del piso (los muebles se apoyan en `y = FLOOR_H`).
+    pub const FLOOR_H: u32 = 2;
+    /// Alto de los muros.
+    pub const WALL_H: u32 = 9;
+
+    /// Un interior de arranque: sala vacía de baldosas con muros.
+    pub fn nuevo(id: u64, name: impl Into<String>) -> Self {
+        Self {
+            id,
+            name: name.into(),
+            ancho: 24,
+            fondo: 20,
+            piso: Material::Ceramica,
+            muro: Material::Ladrillo,
+            muros: true,
+            ventanas: true,
+            con_techo: true,
+            techo: TechoTipo::Tejas,
+            piezas: Vec::new(),
+        }
+    }
+
+    /// `y` sobre el que se apoyan los muebles.
+    pub fn floor_top(&self) -> u32 {
+        Self::FLOOR_H
+    }
+
+    /// Agrega una pieza (recortando la celda al piso). Devuelve `false` si cae fuera.
+    pub fn colocar(&mut self, mueble: Mueble, gx: u32, gz: u32, facing: u8) -> bool {
+        if gx >= self.ancho || gz >= self.fondo {
+            return false;
+        }
+        self.piezas.push(Pieza { mueble, gx, gz, facing });
+        true
+    }
+
+    /// **Luces puntuales** que emiten los muebles luminosos (lámparas, apliques,
+    /// estufa): una [`PointLight`] cálida por pieza que ilumina, en coordenadas de
+    /// grilla. Se recorta a [`VOXEL_MAX_LIGHTS`] (el motor sostiene unas pocas);
+    /// las primeras piezas colocadas ganan.
+    pub fn luces(&self) -> Vec<PointLight> {
+        let mut out = Vec::new();
+        for p in &self.piezas {
+            if p.gx >= self.ancho || p.gz >= self.fondo {
+                continue;
+            }
+            if let Some((h, color, range)) = p.mueble.luz() {
+                out.push(PointLight {
+                    pos: [p.gx as f32 + 0.5, Self::FLOOR_H as f32 + h, p.gz as f32 + 0.5],
+                    color,
+                    range,
+                    radius: 3.0, // fuente de área ancha → penumbra suave marcada
+                });
+                if out.len() >= VOXEL_MAX_LIGHTS {
+                    break;
+                }
+            }
+        }
+        out
+    }
+
+    /// Construye el [`VoxelGrid`] de la habitación dentro de un volumen `dim`: piso de
+    /// baldosas, muros con ventanas (si `muros`), techo del tipo elegido (si
+    /// `con_techo`) y los muebles. El `cut` recorta muros y el rincón cercano del
+    /// techo (casa de muñecas) para mirar por dentro; pasar [`Cutaway::none`] arma la
+    /// habitación entera. El piso arranca en la esquina `(0, 0)` del volumen.
+    pub fn build_grid(&self, dim: [u32; 3], cut: Cutaway) -> VoxelGrid {
+        let mut g = VoxelGrid::new(dim);
+        let ancho = self.ancho.min(dim[0]);
+        let fondo = self.fondo.min(dim[2]);
+        if ancho == 0 || fondo == 0 {
+            return g;
+        }
+
+        // Piso (con leve damero para leer las baldosas).
+        let alt = self.piso.next_shade();
+        for x in 0..ancho {
+            for z in 0..fondo {
+                let tile = ((x / 2 + z / 2) % 2) == 0;
+                let (col, brillo) = if tile { (self.piso.color(), self.piso.brillo()) } else { alt };
+                for y in 0..Self::FLOOR_H.min(dim[1]) {
+                    let b = if y + 1 == Self::FLOOR_H { brillo } else { 0.0 };
+                    g.set_rgba(x, y, z, col, VoxelGrid::shine_to_alpha(b));
+                }
+            }
+        }
+
+        // Muros perimetrales, con ventanas de vidrio a media altura (dejan pasar la
+        // luz del día). Cada lado se omite si el recorte casa-de-muñecas lo oculta.
+        let top = (Self::FLOOR_H + Self::WALL_H).min(dim[1]);
+        if self.muros {
+            let mcol = self.muro.color();
+            let ma = VoxelGrid::shine_to_alpha(self.muro.brillo());
+            let vcol = Material::Vidrio.color();
+            let va = VoxelGrid::shine_to_alpha(Material::Vidrio.brillo());
+            let es_ventana = |along: u32, len: u32, y: u32| -> bool {
+                let banda = y >= Self::FLOOR_H + 3 && y < Self::FLOOR_H + 6;
+                let hueco = along >= 3 && along + 3 < len && (along % 7) < 3;
+                self.ventanas && banda && hueco
+            };
+            for y in Self::FLOOR_H..top {
+                for x in 0..ancho {
+                    let (c, a) = if es_ventana(x, ancho, y) { (vcol, va) } else { (mcol, ma) };
+                    if !cut.norte {
+                        g.set_rgba(x, y, 0, c, a); // muro −Z
+                    }
+                    if !cut.sur {
+                        g.set_rgba(x, y, fondo - 1, c, a); // muro +Z
+                    }
+                }
+                for z in 0..fondo {
+                    let (c, a) = if es_ventana(z, fondo, y) { (vcol, va) } else { (mcol, ma) };
+                    if !cut.oeste {
+                        g.set_rgba(0, y, z, c, a); // muro −X
+                    }
+                    if !cut.este {
+                        g.set_rgba(ancho - 1, y, z, c, a); // muro +X
+                    }
+                }
+            }
+        }
+
+        // Techo (con el rincón cercano recortado por el cutaway).
+        if self.con_techo {
+            self.build_techo(&mut g, dim, ancho, fondo, top, cut);
+        }
+
+        // Muebles.
+        for p in &self.piezas {
+            if p.gx < ancho && p.gz < fondo {
+                stamp_mueble(&mut g, p.mueble, p.gx, Self::FLOOR_H, p.gz, p.facing);
+            }
+        }
+        g
+    }
+
+    /// Dibuja el techo (`self.techo`) sobre la planta, salvo el rincón que el
+    /// `cut` oculta (para ver adentro). Plano = losa; los demás = dos aguas (la
+    /// cumbrera corre por el eje más largo). Zinc va acanalado.
+    fn build_techo(&self, g: &mut VoxelGrid, _dim: [u32; 3], ancho: u32, fondo: u32, top: u32, cut: Cutaway) {
+        let rmat = self.techo.material();
+        let base = rmat.color();
+        let ra = VoxelGrid::shine_to_alpha(rmat.brillo());
+        // El rincón cercano del techo se oculta como los muros → se mira adentro.
+        let oculto = |x: u32, z: u32| -> bool {
+            (cut.este && x * 5 > ancho * 3)
+                || (cut.oeste && x * 5 < ancho * 2)
+                || (cut.sur && z * 5 > fondo * 3)
+                || (cut.norte && z * 5 < fondo * 2)
+        };
+        let ridge_x = ancho >= fondo; // cumbrera a lo largo del eje más largo
+        let cap = 6u32;
+        for x in 0..ancho {
+            for z in 0..fondo {
+                if oculto(x, z) {
+                    continue;
+                }
+                let slope = if self.techo.es_plano() {
+                    0
+                } else if ridge_x {
+                    z.min(fondo - 1 - z).min(cap)
+                } else {
+                    x.min(ancho - 1 - x).min(cap)
+                };
+                let y = (top + slope).min(_dim[1] - 1);
+                // Zinc: acanalado → franjas alternas más oscuras perpendiculares a la cumbrera.
+                let mut col = base;
+                if matches!(self.techo, TechoTipo::Zinc) {
+                    let stripe = if ridge_x { x } else { z };
+                    if stripe % 2 == 0 {
+                        col = [
+                            (base[0] as f32 * 0.82) as u8,
+                            (base[1] as f32 * 0.82) as u8,
+                            (base[2] as f32 * 0.82) as u8,
+                        ];
+                    }
+                }
+                g.set_rgba(x, y, z, col, ra);
+            }
+        }
+    }
+}
+
+/// Extensión interna: un tono alterno del material para el damero del piso.
+trait Shade {
+    fn next_shade(self) -> ([u8; 3], f32);
+}
+impl Shade for Material {
+    fn next_shade(self) -> ([u8; 3], f32) {
+        let c = self.color();
+        let d = |v: u8| (v as f32 * 0.88) as u8;
+        ([d(c[0]), d(c[1]), d(c[2])], self.brillo())
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    fn solids(g: &VoxelGrid, dim: [u32; 3]) -> usize {
+        let mut n = 0;
+        for x in 0..dim[0] {
+            for y in 0..dim[1] {
+                for z in 0..dim[2] {
+                    if g.is_solid(x as i32, y as i32, z as i32) {
+                        n += 1;
+                    }
+                }
+            }
+        }
+        n
+    }
+
+    #[test]
+    fn interior_vacio_tiene_piso_y_muros() {
+        let dim = [40u32, 20, 36];
+        let it = Interior::nuevo(1, "sala");
+        let g = it.build_grid(dim, Cutaway::none());
+        // Piso completo + algún muro.
+        assert!(solids(&g, dim) >= (it.ancho * it.fondo * Interior::FLOOR_H) as usize);
+        // Hay muro por encima del piso en el borde.
+        assert!(g.is_solid(0, Interior::FLOOR_H as i32 + 1, 0));
+    }
+
+    #[test]
+    fn las_lamparas_emiten_luz() {
+        let mut it = Interior::nuevo(1, "sala");
+        assert!(it.luces().is_empty(), "sala vacía sin luces");
+        it.colocar(Mueble::Lampara, 6, 6, 0);
+        it.colocar(Mueble::Mesa, 8, 8, 0); // no ilumina
+        it.colocar(Mueble::Aplique, 1, 5, 0);
+        let luces = it.luces();
+        assert_eq!(luces.len(), 2, "lámpara + aplique iluminan, la mesa no");
+        // La luz de la lámpara cae sobre su celda, a cierta altura.
+        assert_eq!(luces[0].pos[0], 6.5);
+        assert!(luces[0].pos[1] > Interior::FLOOR_H as f32);
+    }
+
+    #[test]
+    fn las_ventanas_ponen_vidrio_en_los_muros() {
+        let dim = [40u32, 24, 36];
+        let it = Interior::nuevo(1, "sala"); // ventanas = true por defecto
+        let g = it.build_grid(dim, Cutaway::none());
+        // En la banda de ventana del muro del fondo hay vidrio (alpha lustroso < muro).
+        let vidrio_alpha = VoxelGrid::shine_to_alpha(Material::Vidrio.brillo());
+        let mut hay_vidrio = false;
+        for x in 0..it.ancho {
+            for y in Interior::FLOOR_H..(Interior::FLOOR_H + 6) {
+                if let Some(px) = g.get(x, y, 0) {
+                    if px[3] == vidrio_alpha {
+                        hay_vidrio = true;
+                    }
+                }
+            }
+        }
+        assert!(hay_vidrio, "el muro del fondo tiene celdas de vidrio (ventanas)");
+        // Sin ventanas, el muro es opaco (sin vidrio).
+        let mut sin = Interior::nuevo(2, "sala");
+        sin.ventanas = false;
+        let g2 = sin.build_grid(dim, Cutaway::none());
+        let mut hay_vidrio2 = false;
+        for x in 0..sin.ancho {
+            for y in Interior::FLOOR_H..(Interior::FLOOR_H + 6) {
+                if let Some(px) = g2.get(x, y, 0) {
+                    if px[3] == vidrio_alpha {
+                        hay_vidrio2 = true;
+                    }
+                }
+            }
+        }
+        assert!(!hay_vidrio2, "sin ventanas el muro no tiene vidrio");
+    }
+
+    #[test]
+    fn el_techo_y_el_recorte_casa_de_munecas() {
+        let dim = [40u32, 30, 36];
+        let it = Interior::nuevo(1, "sala"); // con_techo = true, techo = Tejas
+        // Sin recorte hay techo por encima de los muros.
+        let entera = it.build_grid(dim, Cutaway::none());
+        let top = Interior::FLOOR_H + Interior::WALL_H;
+        let mut hay_techo = false;
+        for x in 0..it.ancho {
+            for z in 0..it.fondo {
+                if entera.is_solid(x as i32, top as i32, z as i32) {
+                    hay_techo = true;
+                }
+            }
+        }
+        assert!(hay_techo, "hay techo por encima de los muros");
+        // El recorte oculta el muro del lado indicado (para ver adentro).
+        let cut = Cutaway { este: true, sur: true, ..Cutaway::none() };
+        let recortada = it.build_grid(dim, cut);
+        // El muro +X (este) ya no está a media altura.
+        assert!(
+            !recortada.is_solid((it.ancho - 1) as i32, (Interior::FLOOR_H + 2) as i32, 5),
+            "el muro este quedó recortado"
+        );
+        // El muro −X (oeste, no recortado) sigue.
+        assert!(recortada.is_solid(0, (Interior::FLOOR_H + 2) as i32, 5), "el muro oeste sigue");
+    }
+
+    #[test]
+    fn colocar_agrega_mueble_visible() {
+        let dim = [40u32, 20, 36];
+        let mut it = Interior::nuevo(1, "sala");
+        it.muros = false;
+        let vacio = solids(&it.build_grid(dim, Cutaway::none()), dim);
+        assert!(it.colocar(Mueble::Mesa, 10, 8, 0));
+        let con = solids(&it.build_grid(dim, Cutaway::none()), dim);
+        assert!(con > vacio, "la mesa sumó voxels ({vacio} → {con})");
+        // Fuera del piso: rechazado.
+        assert!(!it.colocar(Mueble::Silla, 999, 8, 0));
+    }
+}
diff --git a/llimphi-voxel/src/lib.rs b/llimphi-voxel/src/lib.rs
index 62f4ae2..231d60d 100644
--- a/llimphi-voxel/src/lib.rs
+++ b/llimphi-voxel/src/lib.rs
@@ -7,37 +7,70 @@
 //!
 //! Rama de dependencias pensada como **librería reusable por cualquier juego
 //! voxel** de la suite: `app → llimphi-voxel → llimphi-3d → wgpu`. El motor
-//! (cámara, depth compartido, ray-march, mallas) no sabe nada de juegos; acá
+//! (cámara, depth compartido, ray-march, mallas) no sabe nada de juegos; aquí
 //! vive lo que sí: world-gen ([`terrain`]) y picking/edición ([`raycast`]).
-//! El resto (chunks, streaming, bloques tipados) crece acá sin tocar el motor.
+//! El resto (chunks, streaming, bloques tipados) crece aquí sin tocar el motor.
 
 mod actor;
+mod apertura;
 mod camera_rig;
+mod conducta;
+mod documento;
+mod historia;
 mod critter;
 mod director;
+mod foto;
+mod humano;
+mod ecuacion;
+mod bicho;
+mod casa;
+mod interior;
 mod lod;
+mod mineral;
+mod mueble;
 mod player;
 mod potential;
 mod raycast;
+mod rig;
+mod sim;
 mod studio;
 mod terrain;
+mod urbe;
 mod vox;
 mod world_stream;
 mod worldgen;
 
 pub use actor::{Actor, Age, Build, Clip, Pose};
 pub use camera_rig::{cam_lerp, BirthSequence, CamMode};
+pub use conducta::{default_impulsos, Conducta, Habitante, Impulso, Primitiva, PARAMS, PERCEPTS};
 pub use director::{ActorKey, ActorSample, ActorScript, Sequence, Shot};
+pub use ecuacion::{
+    Assign, BinOp, Dir, Expr, FieldDef, FieldEngine, FieldId, ParamId, Program, Reduce, Symbols,
+    UnOp,
+};
 pub use vox::{load_grid, load_scene_grid, model_to_grid, scene_to_grid, stamp, VoxLoadError};
 pub use critter::Critter;
+pub use foto::{photo_to_grid, photo_to_grid_depth, stamp_busto, FotoOpts, FotoStats, Relieve};
+pub use humano::{humanoide_voxel, Colores, EstiloSer};
 pub use lod::{lod_skirt, lod_skirt_pyramid, LodParams, LodRing};
 pub use player::{forward_h, look_dir, right_h, Player};
 pub use potential::{Egg, Hatchling};
 pub use raycast::{raycast, VoxelHit};
+pub use rig::{Andar, Andares, Eje, Movimiento, Osc, Rig, RigPose, Segmento, SlotColor};
+pub use sim::{CellChange, EcuacionSim, GrowthSim, WaterSim, CELL_AIR, CELL_WATER};
+pub use apertura::{Atmosfera, Caida};
+pub use documento::{Documento, ErrorDoc, Remapeo, MAGIA_DOC, VERSION_DOC};
+pub use historia::{hex_corto, Historia, Version, Hash, RAMA_PRINCIPAL};
 pub use studio::{
-    world_dim, ActorKeySpec, ActorSpec, CharSpec, NamedWorld, Project, SceneSpec, ShotKind,
-    ShotSpec, PREVIEW_DIM_XZ, SCENE_SUN,
+    window_origin_for_cast, world_dim, ActorKeySpec, ActorSpec, CharSpec, Ley, LeyKind, LeyUso,
+    MapaFuente, MatRole, MaterialDef, Mundo, MundoRender, ParamDef, Project, SceneSpec, ShotKind,
+    ShotSpec, Suceso, TipoSuceso, PREVIEW_DIM_XZ, SCENE_SUN, SCENE_WINDOW_STEP,
 };
 pub use terrain::{column_height, fill_terrain_window, terrain};
 pub use world_stream::WorldStream;
-pub use worldgen::{Flora, Material, WorldRecipe};
+pub use bicho::{stamp_bicho, Bicho, BichoUso, DETALLE_SER_VIVO};
+pub use casa::{casa_seed, stamp_casa, CasaTipo, CasaUso, PuebloTipo};
+pub use interior::{Cutaway, Interior, Pieza, TechoTipo};
+pub use mineral::{Aspecto, Mineral, MineralUso};
+pub use mueble::{stamp_mueble, Mueble};
+pub use worldgen::{Bioma, BiomaPalette, Forma, Material, ObjetoUso, ResolvedMaterial, SereUso};
diff --git a/llimphi-voxel/src/lod.rs b/llimphi-voxel/src/lod.rs
index 4f23584..4a0ef5c 100644
--- a/llimphi-voxel/src/lod.rs
+++ b/llimphi-voxel/src/lod.rs
@@ -89,7 +89,7 @@ pub struct LodRing {
 /// Genera la malla de la falda LOD para una ventana (un solo nivel). Devuelve
 /// `(vértices, índices u16)` listos para
 /// [`Renderer3d::set_geometry`](llimphi_3d::Renderer3d). `dim`/`seed` definen el mismo
-/// terreno procedural que los voxels. Para horizontes enormes usá
+/// terreno procedural que los voxels. Para horizontes enormes usa
 /// [`lod_skirt_pyramid`] (varios anillos de paso creciente).
 pub fn lod_skirt(p: &LodParams, dim: [u32; 3], seed: u32) -> (Vec<Vertex3d>, Vec<u16>) {
     let stride = p.stride.max(1);
diff --git a/llimphi-voxel/src/mineral.rs b/llimphi-voxel/src/mineral.rs
new file mode 100644
index 0000000..ef806a3
--- /dev/null
+++ b/llimphi-voxel/src/mineral.rs
@@ -0,0 +1,557 @@
+//! **Minerales** embebidos en la roca del terreno: vetas, pepitas, cristales,
+//! estratos y geodas. A diferencia de la [`Forma`](crate::Forma) de flora (que se
+//! posa *sobre* el suelo), un mineral **reemplaza** vóxels sólidos bajo la piel del
+//! terreno, así que se lee en las paredes de roca expuestas (acantilados, cortes).
+//!
+//! Cada [`Mineral`] trae **tipo, color y dureza Mohs** intrínsecos; el [`Aspecto`]
+//! decide cómo se distribuye en la roca, y [`MineralUso`] lo instancia en un bioma
+//! con su abundancia y banda de profundidad. La dureza es visible: los blandos
+//! salen terrosos/granulados, los duros cristalinos y las gemas (Mohs ≥ 7)
+//! destellan. Todo es función pura de la posición de mundo → seamless en streaming.
+
+use serde::{Deserialize, Serialize};
+
+use crate::terrain::{hash2, smooth};
+
+/// **Cómo se distribuye** un mineral dentro de la roca.
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize)]
+pub enum Aspecto {
+    /// Vetas: láminas finas diagonales que cruzan la roca.
+    Veta,
+    /// Pepitas: bolsones sólidos aislados.
+    Pepita,
+    /// Diseminado: motas sueltas de un vóxel salpicadas.
+    Diseminado,
+    /// Estrato: capa que sigue el relieve, rota lateralmente.
+    Estrato,
+    /// Geoda: bolsones redondeados (bolsas cristalinas).
+    Geoda,
+    /// Cristal: racimos con sesgo vertical (cristales que crecen hacia arriba).
+    Cristal,
+}
+
+impl Aspecto {
+    /// Todos los aspectos (para ciclar en un editor).
+    pub const ALL: [Aspecto; 6] = [
+        Aspecto::Veta,
+        Aspecto::Pepita,
+        Aspecto::Diseminado,
+        Aspecto::Estrato,
+        Aspecto::Geoda,
+        Aspecto::Cristal,
+    ];
+
+    /// Nombre legible (español).
+    pub fn label(self) -> &'static str {
+        match self {
+            Aspecto::Veta => "veta",
+            Aspecto::Pepita => "pepita",
+            Aspecto::Diseminado => "diseminado",
+            Aspecto::Estrato => "estrato",
+            Aspecto::Geoda => "geoda",
+            Aspecto::Cristal => "cristal",
+        }
+    }
+
+    /// El aspecto siguiente (cicla).
+    pub fn next(self) -> Aspecto {
+        let i = Aspecto::ALL.iter().position(|&a| a == self).unwrap_or(0);
+        Aspecto::ALL[(i + 1) % Aspecto::ALL.len()]
+    }
+}
+
+/// **Catálogo de minerales** semilla: tipo con color y dureza Mohs de fábrica, más
+/// el aspecto y la banda de profundidad típicos. Ordenado de blando/superficial a
+/// duro/profundo.
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, Serialize, Deserialize)]
+pub enum Mineral {
+    /// Carbón — negro mate, blando, en estratos poco profundos.
+    Carbon,
+    /// Sal (halita) — blanco rosado, blando, en estratos.
+    Sal,
+    /// Cobre (malaquita) — verde azulado, en vetas.
+    Cobre,
+    /// Hierro (hematita) — pardo rojizo, en vetas.
+    Hierro,
+    /// Plata — gris claro metálico, en vetas.
+    Plata,
+    /// Oro — dorado, en pepitas, profundo.
+    Oro,
+    /// Lapislázuli — azul intenso, en estratos.
+    Lapis,
+    /// Cuarzo — blanco translúcido, duro, en vetas.
+    Cuarzo,
+    /// Amatista — violeta, dura, en geodas.
+    Amatista,
+    /// Esmeralda — verde vivo, dura, en cristales.
+    Esmeralda,
+    /// Rubí — rojo, muy duro, en cristales profundos.
+    Rubi,
+    /// Diamante — blanco cian, el más duro, en pepitas muy profundas.
+    Diamante,
+    // --- Exóticos ---
+    /// Obsidiana — vidrio volcánico negro y lustroso.
+    Obsidiana,
+    /// Pirita — «oro de los tontos», latón metálico en cubos.
+    Pirita,
+    /// Zafiro — azul profundo, casi tan duro como el diamante.
+    Zafiro,
+    /// Topacio — gema dorada translúcida.
+    Topacio,
+    /// Turquesa — celeste opaco en vetas.
+    Turquesa,
+    /// Ópalo — nácar pálido iridiscente, en geodas.
+    Opalo,
+    /// Ámbar — resina fósil anaranjada, cerca de la superficie.
+    Ambar,
+    /// Fluorita — cristal violeta translúcido.
+    Fluorita,
+    /// Jade — verde sedoso en vetas.
+    Jade,
+    /// Cinabrio — bermellón intenso (mena de mercurio).
+    Cinabrio,
+    /// Bismuto — iridiscente rosa-violeta escalonado, profundo.
+    Bismuto,
+    /// Uraninita — verde radiactivo, rara y muy profunda.
+    Uraninita,
+}
+
+impl Mineral {
+    /// Color RGB de fábrica.
+    pub fn color(self) -> [u8; 3] {
+        match self {
+            Mineral::Carbon => [34, 34, 40],
+            Mineral::Sal => [232, 220, 224],
+            Mineral::Cobre => [70, 176, 150],
+            Mineral::Hierro => [150, 96, 74],
+            Mineral::Plata => [200, 206, 214],
+            Mineral::Oro => [232, 192, 84],
+            Mineral::Lapis => [42, 72, 182],
+            Mineral::Cuarzo => [224, 226, 236],
+            Mineral::Amatista => [150, 92, 206],
+            Mineral::Esmeralda => [40, 182, 112],
+            Mineral::Rubi => [200, 44, 64],
+            Mineral::Diamante => [196, 232, 240],
+            Mineral::Obsidiana => [26, 24, 32],
+            Mineral::Pirita => [198, 168, 84],
+            Mineral::Zafiro => [40, 78, 190],
+            Mineral::Topacio => [222, 182, 92],
+            Mineral::Turquesa => [64, 190, 190],
+            Mineral::Opalo => [224, 214, 228],
+            Mineral::Ambar => [216, 138, 44],
+            Mineral::Fluorita => [150, 96, 210],
+            Mineral::Jade => [72, 168, 116],
+            Mineral::Cinabrio => [190, 40, 44],
+            Mineral::Bismuto => [186, 132, 196],
+            Mineral::Uraninita => [124, 202, 62],
+        }
+    }
+
+    /// **Dureza Mohs** `[1,10]`.
+    pub fn dureza(self) -> f32 {
+        match self {
+            Mineral::Carbon => 1.5,
+            Mineral::Sal => 2.5,
+            Mineral::Cobre => 3.5,
+            Mineral::Plata => 2.7,
+            Mineral::Oro => 2.7,
+            Mineral::Hierro => 5.5,
+            Mineral::Lapis => 5.5,
+            Mineral::Cuarzo => 7.0,
+            Mineral::Amatista => 7.0,
+            Mineral::Esmeralda => 7.5,
+            Mineral::Rubi => 9.0,
+            Mineral::Diamante => 10.0,
+            Mineral::Cinabrio => 2.2,
+            Mineral::Ambar => 2.5,
+            Mineral::Bismuto => 2.5,
+            Mineral::Fluorita => 4.0,
+            Mineral::Turquesa => 5.5,
+            Mineral::Obsidiana => 5.5,
+            Mineral::Uraninita => 6.0,
+            Mineral::Opalo => 6.0,
+            Mineral::Pirita => 6.2,
+            Mineral::Jade => 6.5,
+            Mineral::Topacio => 8.0,
+            Mineral::Zafiro => 9.0,
+        }
+    }
+
+    /// Aspecto típico de este mineral.
+    pub fn aspecto(self) -> Aspecto {
+        match self {
+            Mineral::Carbon | Mineral::Sal | Mineral::Lapis => Aspecto::Estrato,
+            Mineral::Cobre | Mineral::Hierro | Mineral::Plata | Mineral::Cuarzo => Aspecto::Veta,
+            Mineral::Oro | Mineral::Diamante => Aspecto::Pepita,
+            Mineral::Amatista => Aspecto::Geoda,
+            Mineral::Esmeralda | Mineral::Rubi => Aspecto::Cristal,
+            Mineral::Obsidiana | Mineral::Turquesa | Mineral::Jade | Mineral::Cinabrio => Aspecto::Veta,
+            Mineral::Pirita | Mineral::Ambar | Mineral::Uraninita => Aspecto::Pepita,
+            Mineral::Zafiro | Mineral::Topacio | Mineral::Fluorita => Aspecto::Cristal,
+            Mineral::Opalo | Mineral::Bismuto => Aspecto::Geoda,
+        }
+    }
+
+    /// Banda de profundidad típica `(min, max)` como fracción bajo la superficie
+    /// `[0,1]` (0 = superficie, 1 = fondo del mundo).
+    pub fn profundidad(self) -> (f32, f32) {
+        match self {
+            Mineral::Carbon => (0.04, 0.30),
+            Mineral::Sal => (0.10, 0.45),
+            Mineral::Cobre => (0.12, 0.70),
+            Mineral::Hierro => (0.12, 0.85),
+            Mineral::Plata => (0.30, 0.85),
+            Mineral::Lapis => (0.40, 0.85),
+            Mineral::Oro => (0.45, 0.95),
+            Mineral::Cuarzo => (0.10, 0.80),
+            Mineral::Amatista => (0.35, 0.85),
+            Mineral::Esmeralda => (0.50, 0.95),
+            Mineral::Rubi => (0.55, 0.95),
+            Mineral::Diamante => (0.70, 1.00),
+            Mineral::Ambar => (0.02, 0.25),
+            Mineral::Turquesa => (0.10, 0.50),
+            Mineral::Cinabrio => (0.15, 0.55),
+            Mineral::Obsidiana => (0.10, 0.60),
+            Mineral::Jade => (0.20, 0.70),
+            Mineral::Pirita => (0.20, 0.72),
+            Mineral::Opalo => (0.30, 0.80),
+            Mineral::Fluorita => (0.30, 0.80),
+            Mineral::Topacio => (0.45, 0.90),
+            Mineral::Zafiro => (0.55, 0.95),
+            Mineral::Bismuto => (0.60, 0.95),
+            Mineral::Uraninita => (0.72, 1.00),
+        }
+    }
+
+    /// **Brillo/reflectividad** `[0,1]` de fábrica: cuánto lustre especular y
+    /// glaseado devuelve al sol. Terrosos (carbón, sal) ~0; metales (plata, oro)
+    /// medio-alto; gemas cristalinas (cuarzo→diamante) alto. Lo aprovecha el
+    /// ray-march (a diferencia de la luz plana de Minecraft) como reflejo
+    /// dependiente de la vista.
+    pub fn brillo(self) -> f32 {
+        match self {
+            Mineral::Carbon => 0.05,
+            Mineral::Sal => 0.15,
+            Mineral::Hierro => 0.25,
+            Mineral::Lapis => 0.22,
+            Mineral::Cobre => 0.4,
+            Mineral::Plata => 0.72,
+            Mineral::Oro => 0.78,
+            Mineral::Cuarzo => 0.82,
+            Mineral::Amatista => 0.85,
+            Mineral::Esmeralda => 0.9,
+            Mineral::Rubi => 0.95,
+            Mineral::Diamante => 1.0,
+            Mineral::Cinabrio => 0.5,
+            Mineral::Turquesa => 0.52,
+            Mineral::Jade => 0.6,
+            Mineral::Uraninita => 0.6,
+            Mineral::Ambar => 0.68,
+            Mineral::Fluorita => 0.78,
+            Mineral::Pirita => 0.85,
+            Mineral::Opalo => 0.88,
+            Mineral::Obsidiana => 0.9,
+            Mineral::Topacio => 0.9,
+            Mineral::Bismuto => 0.92,
+            Mineral::Zafiro => 0.95,
+        }
+    }
+
+    /// Abundancia típica `[0,1]` (los raros/preciosos, más bajos).
+    pub fn abundancia(self) -> f32 {
+        match self {
+            Mineral::Carbon | Mineral::Hierro | Mineral::Cuarzo => 0.5,
+            Mineral::Sal | Mineral::Cobre => 0.4,
+            Mineral::Plata | Mineral::Lapis | Mineral::Amatista => 0.3,
+            Mineral::Oro => 0.25,
+            Mineral::Esmeralda => 0.18,
+            Mineral::Rubi => 0.16,
+            Mineral::Diamante => 0.12,
+            Mineral::Obsidiana => 0.35,
+            Mineral::Pirita | Mineral::Turquesa | Mineral::Jade | Mineral::Fluorita => 0.22,
+            Mineral::Cinabrio => 0.20,
+            Mineral::Ambar => 0.18,
+            Mineral::Opalo | Mineral::Topacio => 0.16,
+            Mineral::Zafiro => 0.14,
+            Mineral::Bismuto => 0.12,
+            Mineral::Uraninita => 0.10,
+        }
+    }
+
+    /// Todos los minerales (catálogo, para ciclar en un editor).
+    pub const ALL: [Mineral; 24] = [
+        Mineral::Carbon,
+        Mineral::Sal,
+        Mineral::Cobre,
+        Mineral::Hierro,
+        Mineral::Plata,
+        Mineral::Oro,
+        Mineral::Lapis,
+        Mineral::Cuarzo,
+        Mineral::Amatista,
+        Mineral::Esmeralda,
+        Mineral::Rubi,
+        Mineral::Diamante,
+        Mineral::Obsidiana,
+        Mineral::Pirita,
+        Mineral::Zafiro,
+        Mineral::Topacio,
+        Mineral::Turquesa,
+        Mineral::Opalo,
+        Mineral::Ambar,
+        Mineral::Fluorita,
+        Mineral::Jade,
+        Mineral::Cinabrio,
+        Mineral::Bismuto,
+        Mineral::Uraninita,
+    ];
+
+    /// Nombre legible (español).
+    pub fn label(self) -> &'static str {
+        match self {
+            Mineral::Carbon => "carbón",
+            Mineral::Sal => "sal",
+            Mineral::Cobre => "cobre",
+            Mineral::Hierro => "hierro",
+            Mineral::Plata => "plata",
+            Mineral::Oro => "oro",
+            Mineral::Lapis => "lapislázuli",
+            Mineral::Cuarzo => "cuarzo",
+            Mineral::Amatista => "amatista",
+            Mineral::Esmeralda => "esmeralda",
+            Mineral::Rubi => "rubí",
+            Mineral::Diamante => "diamante",
+            Mineral::Obsidiana => "obsidiana",
+            Mineral::Pirita => "pirita",
+            Mineral::Zafiro => "zafiro",
+            Mineral::Topacio => "topacio",
+            Mineral::Turquesa => "turquesa",
+            Mineral::Opalo => "ópalo",
+            Mineral::Ambar => "ámbar",
+            Mineral::Fluorita => "fluorita",
+            Mineral::Jade => "jade",
+            Mineral::Cinabrio => "cinabrio",
+            Mineral::Bismuto => "bismuto",
+            Mineral::Uraninita => "uraninita",
+        }
+    }
+
+    /// El mineral siguiente (cicla).
+    pub fn next(self) -> Mineral {
+        let i = Mineral::ALL.iter().position(|&m| m == self).unwrap_or(0);
+        Mineral::ALL[(i + 1) % Mineral::ALL.len()]
+    }
+}
+
+/// **Uso de un mineral en un bioma**, con **todos sus factores editables**: el tipo
+/// semilla (nombre) + cómo se distribuye ([`Aspecto`]), su abundancia `[0,1]`, la
+/// banda de profundidad `(min, max)`, y los factores autorables **color**, **dureza**
+/// y **brillo** — que arrancan de los de fábrica del mineral pero se pueden ajustar
+/// en la UI del studio sin tocar el catálogo. `mineral_at` usa estos campos
+/// (no el enum), así que editar cualquiera cambia el render.
+#[derive(Debug, Clone, Copy, Serialize, Deserialize)]
+pub struct MineralUso {
+    pub mineral: Mineral,
+    pub aspecto: Aspecto,
+    pub abundancia: f32,
+    pub prof_min: f32,
+    pub prof_max: f32,
+    /// Color efectivo (default = [`Mineral::color`]).
+    pub color: [u8; 3],
+    /// Dureza Mohs efectiva (default = [`Mineral::dureza`]); afecta el grano.
+    pub dureza: f32,
+    /// Brillo/reflectividad efectivo (default = [`Mineral::brillo`]); afecta el lustre.
+    pub brillo: f32,
+}
+
+impl MineralUso {
+    /// Instancia con **todos** los valores típicos del propio mineral.
+    pub fn of(mineral: Mineral) -> Self {
+        let (prof_min, prof_max) = mineral.profundidad();
+        Self {
+            mineral,
+            aspecto: mineral.aspecto(),
+            abundancia: mineral.abundancia(),
+            prof_min,
+            prof_max,
+            color: mineral.color(),
+            dureza: mineral.dureza(),
+            brillo: mineral.brillo(),
+        }
+    }
+
+    /// Igual que [`of`](Self::of) pero forzando la abundancia (útil para el demo o
+    /// para un bioma más rico/pobre en un mineral).
+    pub fn with_abundancia(mineral: Mineral, abundancia: f32) -> Self {
+        Self { abundancia, ..Self::of(mineral) }
+    }
+
+    /// Reinicia los factores autorables (color/dureza/brillo/aspecto/profundidad) a
+    /// los de fábrica de `mineral`, conservando la abundancia. Lo usa la UI al
+    /// cambiar el tipo semilla.
+    pub fn reset_to(&mut self, mineral: Mineral) {
+        let ab = self.abundancia;
+        *self = Self::of(mineral);
+        self.abundancia = ab;
+    }
+}
+
+// =============================================================================
+//  Distribución espacial (ruido de mundo)
+// =============================================================================
+
+/// Hash 3D determinista `[0,1)` (combina [`hash2`] sobre las tres coordenadas).
+#[inline]
+fn hash3(x: i32, y: i32, z: i32, seed: u32) -> f32 {
+    let a = x.wrapping_mul(0x1B).wrapping_add(z);
+    let b = y.wrapping_mul(0x2F).wrapping_sub(z.wrapping_mul(0x11));
+    hash2(a, b, seed)
+}
+
+/// Ruido de valor 3D suave `[0,1]` (interpolación trilineal de la retícula hash).
+fn value3(fx: f32, fy: f32, fz: f32, seed: u32) -> f32 {
+    let (xi, yi, zi) = (fx.floor() as i32, fy.floor() as i32, fz.floor() as i32);
+    let (tx, ty, tz) = (smooth(fx - fx.floor()), smooth(fy - fy.floor()), smooth(fz - fz.floor()));
+    let c = |dx, dy, dz| hash3(xi + dx, yi + dy, zi + dz, seed);
+    let l = |a: f32, b: f32, t: f32| a + (b - a) * t;
+    let x00 = l(c(0, 0, 0), c(1, 0, 0), tx);
+    let x10 = l(c(0, 1, 0), c(1, 1, 0), tx);
+    let x01 = l(c(0, 0, 1), c(1, 0, 1), tx);
+    let x11 = l(c(0, 1, 1), c(1, 1, 1), tx);
+    l(l(x00, x10, ty), l(x01, x11, ty), tz)
+}
+
+/// `true` si el vóxel de mundo `(wx,y,wz)` cae dentro de un depósito de `aspecto`
+/// con abundancia `ab`. Puramente espacial (la banda de profundidad se filtra fuera).
+pub(crate) fn aspecto_hit(aspecto: Aspecto, wx: i32, y: u32, wz: i32, seed: u32, ab: f32) -> bool {
+    let (fx, fy, fz) = (wx as f32, y as f32, wz as f32);
+    match aspecto {
+        Aspecto::Diseminado => hash3(wx, y as i32, wz, seed) < ab * 0.35,
+        Aspecto::Veta => {
+            let n = value3(fx * 0.22, fy * 0.22, fz * 0.22, seed);
+            (n - 0.5).abs() < 0.03 + ab * 0.05
+        }
+        Aspecto::Pepita => {
+            let n = value3(fx * 0.16, fy * 0.16, fz * 0.16, seed ^ 0x55);
+            n > 1.0 - (0.06 + ab * 0.14)
+        }
+        Aspecto::Cristal => {
+            let n = value3(fx * 0.2, fy * 0.12, fz * 0.2, seed ^ 0xC7);
+            n > 1.0 - (0.05 + ab * 0.12)
+        }
+        Aspecto::Estrato => {
+            let n = value3(fx * 0.08, fy * 0.5, fz * 0.08, seed ^ 0x09);
+            n < 0.55 + ab * 0.4
+        }
+        Aspecto::Geoda => {
+            let n = value3(fx * 0.13, fy * 0.13, fz * 0.13, seed ^ 0x6A);
+            n > 1.0 - (0.05 + ab * 0.10)
+        }
+    }
+}
+
+/// Colorea un vóxel de mineral aplicando la **dureza** como textura: blandos →
+/// terrosos/granulados; duros → lisos; gemas (Mohs ≥ 7) → destello en algunos vóxels.
+pub(crate) fn mineral_shade(base: [u8; 3], dureza: f32, wx: i32, y: u32, wz: i32, seed: u32) -> [u8; 3] {
+    let d = (dureza / 10.0).clamp(0.0, 1.0);
+    // Grano decreciente con la dureza.
+    let grain = 0.45 * (1.0 - d);
+    let h = hash2(wx.wrapping_mul(9).wrapping_add(y as i32 * 7), wz, seed ^ 0x6817);
+    let bright = 1.0 + (h - 0.5) * 2.0 * grain * 0.3;
+    let mut c = [
+        (base[0] as f32 * bright).clamp(0.0, 255.0) as u8,
+        (base[1] as f32 * bright).clamp(0.0, 255.0) as u8,
+        (base[2] as f32 * bright).clamp(0.0, 255.0) as u8,
+    ];
+    if dureza >= 7.0 {
+        // Destello de gema.
+        let s = hash2(wx.wrapping_mul(5).wrapping_add(y as i32), wz, seed ^ 0x6E3);
+        if s > 0.72 {
+            let b = 1.28;
+            c = [
+                (c[0] as f32 * b).min(255.0) as u8,
+                (c[1] as f32 * b).min(255.0) as u8,
+                (c[2] as f32 * b).min(255.0) as u8,
+            ];
+        }
+    }
+    c
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn catalogo_coherente() {
+        // Dureza en rango Mohs y duro ⇒ menos abundante que el más común.
+        for m in Mineral::ALL {
+            let d = m.dureza();
+            assert!((1.0..=10.0).contains(&d), "{} dureza fuera de Mohs", m.label());
+            let (a, b) = m.profundidad();
+            assert!(a >= 0.0 && b <= 1.0 && a < b, "{} banda inválida", m.label());
+        }
+        assert!(Mineral::Diamante.abundancia() < Mineral::Hierro.abundancia());
+        assert!(Mineral::Diamante.dureza() > Mineral::Carbon.dureza());
+    }
+
+    #[test]
+    fn aspecto_es_determinista_y_esparce() {
+        let seed = 7;
+        // Determinista.
+        assert_eq!(
+            aspecto_hit(Aspecto::Veta, 12, 8, -4, seed, 0.5),
+            aspecto_hit(Aspecto::Veta, 12, 8, -4, seed, 0.5)
+        );
+        // Al menos algunos hits en un volumen (no todo vacío ni todo lleno).
+        let mut hits = 0;
+        let mut total = 0;
+        for wx in 0..40 {
+            for y in 0..40u32 {
+                for wz in 0..40 {
+                    total += 1;
+                    if aspecto_hit(Aspecto::Pepita, wx, y, wz, seed, 0.5) {
+                        hits += 1;
+                    }
+                }
+            }
+        }
+        assert!(hits > 0 && hits < total, "pepita: {hits}/{total}");
+    }
+
+    #[test]
+    fn brillo_ordena_de_mate_a_gema() {
+        // Terroso mate < metal < gema; el brillo se codifica en un alpha que sigue
+        // siendo sólido para el shader (>127).
+        assert!(Mineral::Carbon.brillo() < Mineral::Oro.brillo());
+        assert!(Mineral::Oro.brillo() < Mineral::Diamante.brillo());
+        for m in Mineral::ALL {
+            let b = m.brillo();
+            assert!((0.0..=1.0).contains(&b), "{} brillo fuera de rango", m.label());
+            let a = llimphi_3d::VoxelGrid::shine_to_alpha(b);
+            assert!(a > 127, "{} alpha {a} dejaría de ser sólido", m.label());
+        }
+        // El más lustroso debe dar el alpha más bajo (más brillo).
+        assert!(
+            llimphi_3d::VoxelGrid::shine_to_alpha(Mineral::Diamante.brillo())
+                < llimphi_3d::VoxelGrid::shine_to_alpha(Mineral::Carbon.brillo())
+        );
+    }
+
+    #[test]
+    fn dureza_afecta_el_grano() {
+        // Un mineral blando varía más de color entre vóxels que uno duro (comparado
+        // bajo el umbral de destello de gema, 7, para aislar el grano).
+        let spread = |dureza: f32| {
+            let mut min = 255i32;
+            let mut max = 0i32;
+            for k in 0..30 {
+                let c = mineral_shade([120, 120, 120], dureza, k, 3, k * 2, 1);
+                min = min.min(c[0] as i32);
+                max = max.max(c[0] as i32);
+            }
+            max - min
+        };
+        assert!(spread(1.5) > spread(6.0), "blando debería granular más que duro");
+    }
+}
diff --git a/llimphi-voxel/src/mueble.rs b/llimphi-voxel/src/mueble.rs
new file mode 100644
index 0000000..fbf1d8a
--- /dev/null
+++ b/llimphi-voxel/src/mueble.rs
@@ -0,0 +1,1571 @@
+//! **Muebles y objetos de casa**: un catálogo de modelitos voxel paramétricos
+//! (mesa, silla, cama, estante, lámpara, alfombra, cofre, estufa, sofá, maceta,
+//! barril, escritorio) que se **estampan** en una escena con [`stamp_mueble`].
+//!
+//! A diferencia de la [`Forma`](crate::Forma) de flora (un solo color), un mueble
+//! combina **varios materiales** por pieza (madera + acero + tela…) y lleva el
+//! **brillo** de cada material en el alpha del voxel, así el acero de un cofre o la
+//! pantalla de una lámpara **glasean** con el mismo ray-march que las gemas. Se
+//! orientan con `facing` (0=+Z, 1=+X, 2=−Z, 3=−X).
+
+use serde::{Deserialize, Serialize};
+
+use crate::worldgen::Material;
+use llimphi_3d::VoxelGrid;
+
+/// Catálogo de muebles y objetos de casa.
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, Serialize, Deserialize)]
+pub enum Mueble {
+    /// Mesa: tapa de madera sobre cuatro patas.
+    Mesa,
+    /// Silla: asiento, respaldo y patas de madera.
+    Silla,
+    /// Cama: bastidor de madera, colchón claro y almohada.
+    Cama,
+    /// Estante: librero de madera con libros de colores.
+    Estante,
+    /// Lámpara de pie: base y poste de acero, pantalla cálida.
+    Lampara,
+    /// Alfombra: losa plana coloreada.
+    Alfombra,
+    /// Cofre: caja de madera con herrajes de acero.
+    Cofre,
+    /// Estufa: cuerpo de ladrillo con boca de fuego.
+    Estufa,
+    /// Sofá: bloque tapizado con brazos y respaldo.
+    Sofa,
+    /// Maceta: tiesto de cerámica con tierra y una plantita.
+    Maceta,
+    /// Barril: duela de madera con aros de acero.
+    Barril,
+    /// Escritorio: tapa de madera con un bloque de cajones.
+    Escritorio,
+    // --- Plantas de interior ---
+    /// Ficus: árbol de interior en maceta (copa frondosa).
+    Ficus,
+    /// Palma de interior en maceta.
+    Palma,
+    /// Suculenta en maceta baja.
+    Suculenta,
+    /// Bonsái en maceta plana.
+    Bonsai,
+    /// Planta colgante: cesta a altura con enredaderas que caen.
+    Colgante,
+    /// Cactus de interior en maceta.
+    Nopal,
+    // --- Decoración de pared ---
+    /// Cuadro: marco con lienzo coloreado, montado a altura.
+    Cuadro,
+    /// Espejo: marco con vidrio lustroso.
+    Espejo,
+    /// Reloj de pared: esfera clara con agujas.
+    Reloj,
+    /// Repisa flotante: estante con un par de objetos.
+    Repisa,
+    /// Aplique: brazo de acero con una luz cálida.
+    Aplique,
+    /// Tapiz: paño colgante de colores.
+    Tapiz,
+    // --- Elementos de casas y edificios modernos ---
+    /// Escalera: tramo de peldaños de hormigón.
+    Escalera,
+    /// Baranda: barandal de vidrio con montantes de acero.
+    Baranda,
+    /// Ventanal: paño de vidrio de piso a techo (muro cortina).
+    Ventanal,
+    /// Columna: pilar cuadrado de hormigón.
+    Columna,
+    /// Aire acondicionado: split blanco de pared.
+    Aire,
+    /// Panel solar: placa azul inclinada sobre soporte.
+    Solar,
+    /// Televisor: pantalla plana negra sobre soporte.
+    Tele,
+    /// Isla de cocina: mueble bajo con mesada de mármol.
+    Isla,
+    /// Ducha: mampara de vidrio con base y ducha de acero.
+    Ducha,
+    /// Placard: armario empotrado alto.
+    Placard,
+    /// Farol: poste de acero con luz cálida (ilumina).
+    Farol,
+    /// Pileta: espejo de agua con borde de cerámica.
+    Pileta,
+    // --- Elementos de ciudad ---
+    /// Semáforo: poste con luces roja/amarilla/verde.
+    Semaforo,
+    /// Banco de plaza: tablas sobre patas de acero.
+    Banco,
+    /// Fuente: pileta de piedra con chorro de agua.
+    Fuente,
+    /// Buzón azul sobre poste.
+    Buzon,
+    /// Papelera: tacho cilíndrico de acero.
+    Basura,
+    /// Parada de colectivo: marquesina de vidrio con banco.
+    Parada,
+    /// Hidrante: boca de incendio roja.
+    Hidrante,
+    /// Cabina telefónica de vidrio y techo azul.
+    Cabina,
+    /// Cartel: poste con letrero.
+    Cartel,
+    /// Auto: carrocería azul con ventanas de vidrio y ruedas.
+    Auto,
+    /// Estatua de mármol sobre pedestal.
+    Estatua,
+    /// Bolardo: poste bajo de hormigón.
+    Bolardo,
+    // --- Edificios grandes ---
+    /// Rascacielos: torre alta de vidrio y acero.
+    Rascacielos,
+    /// Edificio: bloque de departamentos de ladrillo con ventanas.
+    Edificio,
+    /// Torre: torre delgada de hormigón con antena.
+    Torre,
+    /// Fábrica: nave baja con chimenea de ladrillo.
+    Fabrica,
+    /// Iglesia: nave con campanario y cruz.
+    Iglesia,
+    /// Galpón: nave ancha con techo de zinc.
+    Galpon,
+    /// Silo: cilindro de acero con cúpula.
+    Silo,
+    /// Estacionamiento: losas y columnas en varios niveles.
+    Estacionamiento,
+    /// Farola: alumbrado público alto (ilumina).
+    Farola,
+    /// Contenedor: volquete metálico.
+    Contenedor,
+    /// Grúa: torre grúa con pluma y contrapeso.
+    Grua,
+    /// Puente: tablero con barandas y pilas.
+    Puente,
+    // --- Transporte ---
+    /// Avión: fuselaje con alas y cola.
+    Avion,
+    /// Helicóptero: cabina, cola y rotor.
+    Helicoptero,
+    /// Camioneta (pickup): cabina y caja abierta.
+    Camioneta,
+    /// Camión: cabina y caja de carga.
+    Camion,
+    /// Colectivo (bus): carrocería larga con ventanas.
+    Colectivo,
+    /// Taxi: auto amarillo con cartel.
+    Taxi,
+    /// Tren: locomotora sobre ruedas.
+    Tren,
+    /// Vagón: caja de tren sobre ruedas.
+    Vagon,
+    /// Moto: dos ruedas y manubrio.
+    Moto,
+    /// Bici: cuadro y dos ruedas.
+    Bici,
+    /// Barco: casco con cabina y mástil.
+    Barco,
+    /// Ambulancia: furgón blanco con cruz roja.
+    Ambulancia,
+}
+
+impl Mueble {
+    /// Todos los muebles (para ciclar en un editor).
+    pub const ALL: [Mueble; 72] = [
+        Mueble::Mesa,
+        Mueble::Silla,
+        Mueble::Cama,
+        Mueble::Estante,
+        Mueble::Lampara,
+        Mueble::Alfombra,
+        Mueble::Cofre,
+        Mueble::Estufa,
+        Mueble::Sofa,
+        Mueble::Maceta,
+        Mueble::Barril,
+        Mueble::Escritorio,
+        Mueble::Ficus,
+        Mueble::Palma,
+        Mueble::Suculenta,
+        Mueble::Bonsai,
+        Mueble::Colgante,
+        Mueble::Nopal,
+        Mueble::Cuadro,
+        Mueble::Espejo,
+        Mueble::Reloj,
+        Mueble::Repisa,
+        Mueble::Aplique,
+        Mueble::Tapiz,
+        Mueble::Escalera,
+        Mueble::Baranda,
+        Mueble::Ventanal,
+        Mueble::Columna,
+        Mueble::Aire,
+        Mueble::Solar,
+        Mueble::Tele,
+        Mueble::Isla,
+        Mueble::Ducha,
+        Mueble::Placard,
+        Mueble::Farol,
+        Mueble::Pileta,
+        Mueble::Semaforo,
+        Mueble::Banco,
+        Mueble::Fuente,
+        Mueble::Buzon,
+        Mueble::Basura,
+        Mueble::Parada,
+        Mueble::Hidrante,
+        Mueble::Cabina,
+        Mueble::Cartel,
+        Mueble::Auto,
+        Mueble::Estatua,
+        Mueble::Bolardo,
+        Mueble::Rascacielos,
+        Mueble::Edificio,
+        Mueble::Torre,
+        Mueble::Fabrica,
+        Mueble::Iglesia,
+        Mueble::Galpon,
+        Mueble::Silo,
+        Mueble::Estacionamiento,
+        Mueble::Farola,
+        Mueble::Contenedor,
+        Mueble::Grua,
+        Mueble::Puente,
+        Mueble::Avion,
+        Mueble::Helicoptero,
+        Mueble::Camioneta,
+        Mueble::Camion,
+        Mueble::Colectivo,
+        Mueble::Taxi,
+        Mueble::Tren,
+        Mueble::Vagon,
+        Mueble::Moto,
+        Mueble::Bici,
+        Mueble::Barco,
+        Mueble::Ambulancia,
+    ];
+
+    /// Nombre legible (español).
+    pub fn label(self) -> &'static str {
+        match self {
+            Mueble::Mesa => "mesa",
+            Mueble::Silla => "silla",
+            Mueble::Cama => "cama",
+            Mueble::Estante => "estante",
+            Mueble::Lampara => "lámpara",
+            Mueble::Alfombra => "alfombra",
+            Mueble::Cofre => "cofre",
+            Mueble::Estufa => "estufa",
+            Mueble::Sofa => "sofá",
+            Mueble::Maceta => "maceta",
+            Mueble::Barril => "barril",
+            Mueble::Escritorio => "escritorio",
+            Mueble::Ficus => "ficus",
+            Mueble::Palma => "palma",
+            Mueble::Suculenta => "suculenta",
+            Mueble::Bonsai => "bonsái",
+            Mueble::Colgante => "colgante",
+            Mueble::Nopal => "nopal",
+            Mueble::Cuadro => "cuadro",
+            Mueble::Espejo => "espejo",
+            Mueble::Reloj => "reloj",
+            Mueble::Repisa => "repisa",
+            Mueble::Aplique => "aplique",
+            Mueble::Tapiz => "tapiz",
+            Mueble::Escalera => "escalera",
+            Mueble::Baranda => "baranda",
+            Mueble::Ventanal => "ventanal",
+            Mueble::Columna => "columna",
+            Mueble::Aire => "aire",
+            Mueble::Solar => "panel solar",
+            Mueble::Tele => "televisor",
+            Mueble::Isla => "isla",
+            Mueble::Ducha => "ducha",
+            Mueble::Placard => "placard",
+            Mueble::Farol => "farol",
+            Mueble::Pileta => "pileta",
+            Mueble::Semaforo => "semáforo",
+            Mueble::Banco => "banco",
+            Mueble::Fuente => "fuente",
+            Mueble::Buzon => "buzón",
+            Mueble::Basura => "papelera",
+            Mueble::Parada => "parada",
+            Mueble::Hidrante => "hidrante",
+            Mueble::Cabina => "cabina",
+            Mueble::Cartel => "cartel",
+            Mueble::Auto => "auto",
+            Mueble::Estatua => "estatua",
+            Mueble::Bolardo => "bolardo",
+            Mueble::Rascacielos => "rascacielos",
+            Mueble::Edificio => "edificio",
+            Mueble::Torre => "torre",
+            Mueble::Fabrica => "fábrica",
+            Mueble::Iglesia => "iglesia",
+            Mueble::Galpon => "galpón",
+            Mueble::Silo => "silo",
+            Mueble::Estacionamiento => "estacionamiento",
+            Mueble::Farola => "farola",
+            Mueble::Contenedor => "contenedor",
+            Mueble::Grua => "grúa",
+            Mueble::Puente => "puente",
+            Mueble::Avion => "avión",
+            Mueble::Helicoptero => "helicóptero",
+            Mueble::Camioneta => "camioneta",
+            Mueble::Camion => "camión",
+            Mueble::Colectivo => "colectivo",
+            Mueble::Taxi => "taxi",
+            Mueble::Tren => "tren",
+            Mueble::Vagon => "vagón",
+            Mueble::Moto => "moto",
+            Mueble::Bici => "bici",
+            Mueble::Barco => "barco",
+            Mueble::Ambulancia => "ambulancia",
+        }
+    }
+
+    /// El mueble siguiente (cicla).
+    pub fn next(self) -> Mueble {
+        let i = Mueble::ALL.iter().position(|&m| m == self).unwrap_or(0);
+        Mueble::ALL[(i + 1) % Mueble::ALL.len()]
+    }
+
+    /// Si el mueble **emite luz**, devuelve `(altura sobre la base, color RGB,
+    /// alcance en voxels)` de su fuente puntual. `None` = no ilumina. Lo consume el
+    /// editor de interiores para sembrar `PointLight`s cálidas.
+    pub fn luz(self) -> Option<(f32, [f32; 3], f32)> {
+        match self {
+            Mueble::Lampara => Some((6.5, [1.55, 1.22, 0.72], 15.0)), // pantalla cálida
+            Mueble::Aplique => Some((5.5, [1.5, 1.16, 0.7], 11.0)),   // aplique de pared
+            Mueble::Estufa => Some((1.5, [1.6, 0.72, 0.28], 9.0)),    // boca de fuego
+            Mueble::Farol => Some((7.5, [1.4, 1.3, 1.0], 16.0)),      // farol de poste (luz fría)
+            Mueble::Farola => Some((10.5, [1.5, 1.42, 1.15], 20.0)),  // alumbrado público (alto)
+            _ => None,
+        }
+    }
+}
+
+/// Rota un desplazamiento `(dx, dz)` según `facing` (giros de 90°).
+#[inline]
+fn rot(dx: i32, dz: i32, facing: u8) -> (i32, i32) {
+    match facing & 3 {
+        0 => (dx, dz),
+        1 => (-dz, dx),
+        2 => (-dx, -dz),
+        _ => (dz, -dx),
+    }
+}
+
+/// Escribe un voxel del material `m` (con su brillo en el alpha), recortando fuera
+/// del grid.
+fn place(g: &mut VoxelGrid, x: i32, y: i32, z: i32, m: Material) {
+    if x < 0 || y < 0 || z < 0 {
+        return;
+    }
+    let dim = g.dim();
+    if (x as u32) < dim[0] && (y as u32) < dim[1] && (z as u32) < dim[2] {
+        g.set_rgba(x as u32, y as u32, z as u32, m.color(), VoxelGrid::shine_to_alpha(m.brillo()));
+    }
+}
+
+/// Hash barato de la posición de colocación.
+#[inline]
+fn hashxz(x: u32, z: u32) -> u32 {
+    let mut h = x.wrapping_mul(0x9E37_79B9).wrapping_add(z.wrapping_mul(0x85EB_CA77));
+    h ^= h >> 15;
+    h = h.wrapping_mul(0x2C1B_3C6D);
+    h ^ (h >> 13)
+}
+
+/// **Color de carrocería** de un vehículo, elegido de una paleta por la posición de
+/// colocación (determinista → una flota estampada sale VARIADA, del mismo modo que
+/// la flora varía por posición de mundo). No usa la semilla del mundo: los vehículos
+/// siguen siendo props colocables, pero cada uno toma su color de dónde cae.
+fn vehicle_body(x: u32, z: u32) -> Material {
+    const PAL: [Material; 6] = [
+        Material::Azul,
+        Material::Lava,
+        Material::Wheat,
+        Material::Leaf,
+        Material::Ceramica,
+        Material::Grava,
+    ];
+    PAL[(hashxz(x, z) % PAL.len() as u32) as usize]
+}
+
+/// **Estampa un mueble** con la base (centro del piso) en `(x, y, z)`, orientado
+/// según `facing`. Cada pieza combina sus materiales y lleva su brillo.
+pub fn stamp_mueble(g: &mut VoxelGrid, mueble: Mueble, x: u32, y: u32, z: u32, facing: u8) {
+    let (bx, by, bz) = (x as i32, y as i32, z as i32);
+    let body = vehicle_body(x, z); // color de carrocería (vehículos)
+    // Coloca en coordenadas LOCALES (dx a lo ancho, dz al fondo, dy hacia arriba),
+    // rotadas por facing alrededor de la base.
+    let mut put = |dx: i32, dy: i32, dz: i32, m: Material| {
+        let (rx, rz) = rot(dx, dz, facing);
+        place(g, bx + rx, by + dy, bz + rz, m);
+    };
+
+    // Paleta de lomos de libro / telas.
+    let books = [Material::Ladrillo, Material::Leaf, Material::Bloom, Material::Wheat];
+
+    match mueble {
+        Mueble::Mesa => {
+            for dx in -2..=2 {
+                for dz in -2..=2 {
+                    put(dx, 3, dz, Material::Madera); // tapa
+                }
+            }
+            for &(lx, lz) in &[(-2, -2), (2, -2), (-2, 2), (2, 2)] {
+                for dy in 0..3 {
+                    put(lx, dy, lz, Material::Madera); // patas
+                }
+            }
+        }
+
+        Mueble::Silla => {
+            for dx in -1..=1 {
+                for dz in -1..=1 {
+                    put(dx, 2, dz, Material::Madera); // asiento
+                }
+            }
+            for &(lx, lz) in &[(-1, -1), (1, -1), (-1, 1), (1, 1)] {
+                for dy in 0..2 {
+                    put(lx, dy, lz, Material::Madera); // patas
+                }
+            }
+            for dx in -1..=1 {
+                for dy in 3..=4 {
+                    put(dx, dy, -1, Material::Madera); // respaldo (al fondo)
+                }
+            }
+        }
+
+        Mueble::Cama => {
+            for dx in -1..=1 {
+                for dz in -2..=3 {
+                    put(dx, 1, dz, Material::Madera); // bastidor
+                    put(dx, 2, dz, Material::Yeso); // colchón
+                }
+            }
+            for dz in -2..=3 {
+                put(-2, 1, dz, Material::Madera);
+                put(2, 1, dz, Material::Madera);
+            }
+            for dx in -1..=1 {
+                put(dx, 3, 3, Material::Bloom); // almohada (cabecera +Z)
+            }
+        }
+
+        Mueble::Estante => {
+            for dy in 0..=6 {
+                put(-2, dy, 0, Material::Madera); // laterales
+                put(2, dy, 0, Material::Madera);
+            }
+            for &sy in &[0, 2, 4, 6] {
+                for dx in -2..=2 {
+                    put(dx, sy, 0, Material::Madera); // estantes
+                }
+            }
+            for (bi, &sy) in [1i32, 3, 5].iter().enumerate() {
+                for dx in -1..=1 {
+                    let m = books[((dx + bi as i32).rem_euclid(4)) as usize]; // libros
+                    put(dx, sy, 0, m);
+                }
+            }
+        }
+
+        Mueble::Lampara => {
+            for dx in -1..=1 {
+                for dz in -1..=1 {
+                    put(dx, 0, dz, Material::Acero); // base
+                }
+            }
+            for dy in 1..=5 {
+                put(0, dy, 0, Material::Acero); // poste
+            }
+            for dx in -1..=1 {
+                for dz in -1..=1 {
+                    put(dx, 6, dz, Material::Wheat); // pantalla cálida (lustrosa)
+                }
+            }
+            put(0, 7, 0, Material::Wheat);
+        }
+
+        Mueble::Alfombra => {
+            for dx in -2i32..=2 {
+                for dz in -3i32..=3 {
+                    // Borde de un color, centro de otro.
+                    let borde = dx.abs() == 2 || dz.abs() == 3;
+                    put(dx, 0, dz, if borde { Material::Bloom } else { Material::Ceramica });
+                }
+            }
+        }
+
+        Mueble::Cofre => {
+            for dx in -1..=1 {
+                for dz in -1..=1 {
+                    for dy in 0..=1 {
+                        put(dx, dy, dz, Material::Madera); // cuerpo
+                    }
+                    put(dx, 2, dz, Material::Madera); // tapa
+                }
+            }
+            for dx in -1..=1 {
+                put(dx, 0, -1, Material::Acero); // herrajes al frente
+                put(dx, 2, -1, Material::Acero);
+            }
+            put(0, 1, -1, Material::Acero); // cerradura
+        }
+
+        Mueble::Estufa => {
+            for dx in -1..=1 {
+                for dz in -1..=1 {
+                    for dy in 0..=2 {
+                        put(dx, dy, dz, Material::Hormigon); // cuerpo
+                    }
+                    put(dx, 3, dz, Material::Acero); // hornalla de acero
+                }
+            }
+            put(0, 1, -1, Material::Lava); // boca de fuego (al frente)
+            put(0, 0, -1, Material::Lava);
+        }
+
+        Mueble::Sofa => {
+            for dx in -2..=2 {
+                put(dx, 0, 0, Material::Madera); // base
+                put(dx, 0, 1, Material::Madera);
+                put(dx, 1, 0, Material::Bloom); // asiento (tela)
+                put(dx, 1, 1, Material::Bloom);
+                put(dx, 2, -1, Material::Bloom); // respaldo
+                put(dx, 3, -1, Material::Bloom);
+            }
+            for dz in -1..=1 {
+                put(-2, 1, dz, Material::Bloom); // brazos
+                put(-2, 2, dz, Material::Bloom);
+                put(2, 1, dz, Material::Bloom);
+                put(2, 2, dz, Material::Bloom);
+            }
+        }
+
+        Mueble::Maceta => {
+            for dx in -1i32..=1 {
+                for dz in -1i32..=1 {
+                    put(dx, 0, dz, Material::Ceramica); // tiesto
+                    if dx.abs() == 1 || dz.abs() == 1 {
+                        put(dx, 1, dz, Material::Ceramica); // borde
+                    }
+                }
+            }
+            put(0, 1, 0, Material::Tierra); // tierra
+            put(0, 2, 0, Material::Leaf); // plantita
+            put(0, 3, 0, Material::Leaf);
+            put(1, 2, 0, Material::Leaf);
+            put(-1, 2, 0, Material::Leaf);
+            put(0, 2, 1, Material::Leaf);
+        }
+
+        Mueble::Barril => {
+            for dy in 0..=3 {
+                let m = if dy == 0 || dy == 3 { Material::Acero } else { Material::Madera };
+                for dx in -1..=1 {
+                    for dz in -1..=1 {
+                        if dx * dx + dz * dz <= 2 {
+                            put(dx, dy, dz, m); // duela octogonal + aros
+                        }
+                    }
+                }
+            }
+            put(0, 4, 0, Material::Madera); // tapa
+        }
+
+        Mueble::Escritorio => {
+            for dx in -2..=2 {
+                for dz in -1..=1 {
+                    put(dx, 3, dz, Material::Madera); // tapa
+                }
+            }
+            // Bloque de cajones a un lado.
+            for dy in 0..=2 {
+                for dz in -1..=1 {
+                    put(-2, dy, dz, Material::Madera);
+                    put(-1, dy, dz, Material::Madera);
+                }
+            }
+            for dy in &[0, 2] {
+                put(-2, *dy, -1, Material::Acero); // tiradores
+            }
+            for dy in 0..3 {
+                put(2, dy, -1, Material::Madera); // pata del otro lado
+                put(2, dy, 1, Material::Madera);
+            }
+        }
+
+        // ---------------- Plantas de interior ----------------
+        Mueble::Ficus => {
+            for dx in -1..=1 {
+                for dz in -1..=1 {
+                    put(dx, 0, dz, Material::Ceramica); // maceta
+                }
+            }
+            for dy in 1..=5 {
+                put(0, dy, 0, Material::Madera); // tronco
+            }
+            for dx in -2..=2 {
+                for dy in 5..=8 {
+                    for dz in -2..=2 {
+                        if dx * dx + (dy - 6) * (dy - 6) + dz * dz <= 5 {
+                            put(dx, dy, dz, Material::Leaf); // copa frondosa
+                        }
+                    }
+                }
+            }
+        }
+
+        Mueble::Palma => {
+            for dx in -1..=1 {
+                for dz in -1..=1 {
+                    put(dx, 0, dz, Material::Ceramica);
+                }
+            }
+            for dy in 1..=6 {
+                put(0, dy, 0, Material::Madera); // tronco fino
+            }
+            let ty = 6;
+            put(0, ty + 1, 0, Material::Leaf);
+            for (dxi, dzi) in [(1, 0), (-1, 0), (0, 1), (0, -1), (1, 1), (-1, -1)] {
+                for s in 1..=2 {
+                    put(dxi * s, ty + 1 - s, dzi * s, Material::Leaf); // frondas que caen
+                }
+            }
+        }
+
+        Mueble::Suculenta => {
+            for dx in -1..=1 {
+                for dz in -1..=1 {
+                    put(dx, 0, dz, Material::Ceramica); // maceta baja
+                }
+            }
+            put(0, 1, 0, Material::Leaf); // roseta
+            for (dxi, dzi) in [(1, 0), (-1, 0), (0, 1), (0, -1)] {
+                put(dxi, 1, dzi, Material::Leaf);
+            }
+            put(0, 2, 0, Material::Leaf);
+        }
+
+        Mueble::Bonsai => {
+            for dx in -1..=1 {
+                for dz in -1..=1 {
+                    put(dx, 0, dz, Material::Ceramica); // maceta plana ancha
+                }
+            }
+            put(0, 1, 0, Material::Madera); // tronco corto
+            put(0, 2, 0, Material::Madera);
+            put(1, 2, 0, Material::Madera);
+            for (dxi, dzi) in [(1, 0), (2, 0), (0, 1), (-1, 1)] {
+                put(dxi, 3, dzi, Material::Leaf); // copas plato
+            }
+            put(0, 3, 0, Material::Leaf);
+        }
+
+        Mueble::Colgante => {
+            // Cesta a altura + enredaderas que caen.
+            for dx in -1..=1 {
+                put(dx, 6, 0, Material::Ceramica);
+            }
+            for &dx in &[-1, 0, 1] {
+                for dy in 2..=5 {
+                    if (dx + dy) % 2 == 0 {
+                        put(dx, dy, 0, Material::Leaf); // hebras verdes
+                    }
+                }
+            }
+        }
+
+        Mueble::Nopal => {
+            for dx in -1..=1 {
+                for dz in -1..=1 {
+                    put(dx, 0, dz, Material::Ceramica);
+                }
+            }
+            for dy in 1..=4 {
+                put(0, dy, 0, Material::Cactus); // columna
+            }
+            put(1, 2, 0, Material::Cactus); // brazos
+            put(1, 3, 0, Material::Cactus);
+            put(-1, 3, 0, Material::Cactus);
+        }
+
+        // ---------------- Decoración de pared ----------------
+        Mueble::Cuadro => {
+            let (y0, y1) = (4i32, 7i32);
+            for dy in y0..=y1 {
+                for dx in -1i32..=1 {
+                    let borde = dx.abs() == 1 || dy == y0 || dy == y1;
+                    put(dx, dy, 0, if borde { Material::Madera } else { Material::Bloom });
+                }
+            }
+        }
+
+        Mueble::Espejo => {
+            let (y0, y1) = (4i32, 7i32);
+            for dy in y0..=y1 {
+                for dx in -1i32..=1 {
+                    let borde = dx.abs() == 1 || dy == y0 || dy == y1;
+                    put(dx, dy, 0, if borde { Material::Acero } else { Material::Vidrio });
+                }
+            }
+        }
+
+        Mueble::Reloj => {
+            let cy = 5i32;
+            for dx in -1i32..=1 {
+                for dy in (cy - 1)..=(cy + 1) {
+                    if dx.abs() + (dy - cy).abs() <= 2 {
+                        put(dx, dy, 0, Material::Yeso); // esfera
+                    }
+                }
+            }
+            put(0, cy, 0, Material::Pizarra); // centro/agujas
+            put(0, cy + 1, 0, Material::Pizarra);
+            put(1, cy, 0, Material::Madera); // marco
+            put(-1, cy, 0, Material::Madera);
+        }
+
+        Mueble::Repisa => {
+            for dx in -2..=2 {
+                put(dx, 5, 0, Material::Madera); // estante flotante
+            }
+            put(-1, 6, 0, Material::Bloom); // un libro
+            put(-1, 7, 0, Material::Leaf);
+            put(1, 6, 0, Material::Ceramica); // una maceta chica
+            put(1, 7, 0, Material::Leaf);
+        }
+
+        Mueble::Aplique => {
+            put(0, 4, 0, Material::Acero); // placa
+            put(0, 5, 0, Material::Acero);
+            put(0, 6, 0, Material::Acero);
+            put(0, 5, 1, Material::Acero); // brazo
+            put(0, 6, 1, Material::Wheat); // luz cálida (lustrosa)
+            put(0, 4, 1, Material::Wheat);
+        }
+
+        Mueble::Tapiz => {
+            for dy in 2..=7 {
+                for dx in -1..=1 {
+                    let m = if (dx + dy) % 2 == 0 { Material::Bloom } else { Material::Leaf };
+                    put(dx, dy, 0, m); // paño de colores
+                }
+            }
+        }
+
+        // ---------------- Casas y edificios modernos ----------------
+        Mueble::Escalera => {
+            for s in 0..7i32 {
+                for dx in -1..=1 {
+                    for k in 0..=s {
+                        put(dx, k, s, Material::Hormigon); // peldaños macizos que suben en +Z
+                    }
+                }
+            }
+        }
+
+        Mueble::Baranda => {
+            for dx in -2..=2 {
+                put(dx, 1, 0, Material::Vidrio); // paño de vidrio
+                put(dx, 2, 0, Material::Vidrio);
+                put(dx, 3, 0, Material::Acero); // pasamanos
+            }
+            for &dx in &[-2i32, 0, 2] {
+                for dy in 0..3 {
+                    put(dx, dy, 0, Material::Acero); // montantes
+                }
+            }
+        }
+
+        Mueble::Ventanal => {
+            for dy in 0..9 {
+                for dx in -1..=1 {
+                    put(dx, dy, 0, Material::Vidrio); // paño de piso a techo
+                }
+                put(-2, dy, 0, Material::Acero); // parantes
+                put(2, dy, 0, Material::Acero);
+            }
+            for dx in -2..=2 {
+                put(dx, 0, 0, Material::Acero); // marco inf/sup
+                put(dx, 8, 0, Material::Acero);
+            }
+        }
+
+        Mueble::Columna => {
+            for dy in 0..10 {
+                for dx in 0..=1 {
+                    for dz in 0..=1 {
+                        put(dx, dy, dz, Material::Hormigon); // pilar 2×2
+                    }
+                }
+            }
+        }
+
+        Mueble::Aire => {
+            for dx in -2..=2 {
+                for dy in 6..8 {
+                    put(dx, dy, 0, Material::Yeso); // caja del split
+                }
+                put(dx, 6, 0, Material::Acero); // rejilla
+            }
+        }
+
+        Mueble::Solar => {
+            for dx in -2..=2 {
+                for dz in 0..4 {
+                    put(dx, 2 + dz, dz, Material::Azul); // placa azul inclinada
+                }
+            }
+            for &dx in &[-2i32, 2] {
+                for dy in 0..2 {
+                    put(dx, dy, 0, Material::Acero); // patas
+                }
+            }
+            put(0, 0, 0, Material::Acero);
+        }
+
+        Mueble::Tele => {
+            for dx in -2..=2 {
+                for dy in 3..6 {
+                    put(dx, dy, 0, Material::Pizarra); // pantalla negra
+                }
+            }
+            for dy in 0..3 {
+                put(0, dy, 0, Material::Acero); // pie
+            }
+            put(-1, 0, 1, Material::Acero); // base
+            put(1, 0, 1, Material::Acero);
+        }
+
+        Mueble::Isla => {
+            for dx in -2..=2 {
+                for dz in -1..=1 {
+                    for dy in 0..2 {
+                        put(dx, dy, dz, Material::Yeso); // bajomesada
+                    }
+                    put(dx, 2, dz, Material::Marmol); // mesada de mármol (lustrosa)
+                }
+            }
+        }
+
+        Mueble::Ducha => {
+            for dx in -1..=1 {
+                for dz in -1..=1 {
+                    put(dx, 0, dz, Material::Ceramica); // base
+                }
+            }
+            for dy in 1..7 {
+                for dx in -1..=1 {
+                    put(dx, dy, -1, Material::Vidrio); // mampara fondo
+                }
+                for dz in -1..=1 {
+                    put(-1, dy, dz, Material::Vidrio); // mampara lateral
+                }
+            }
+            put(0, 6, -1, Material::Acero); // ducha
+            put(0, 5, -1, Material::Acero);
+        }
+
+        Mueble::Placard => {
+            for dx in -1..=1 {
+                for dy in 0..7 {
+                    for dz in -1..=0 {
+                        put(dx, dy, dz, Material::Madera); // cuerpo alto
+                    }
+                }
+            }
+            put(-1, 3, 0, Material::Acero); // manijas
+            put(1, 3, 0, Material::Acero);
+        }
+
+        Mueble::Farol => {
+            for dy in 0..7 {
+                put(0, dy, 0, Material::Acero); // poste
+            }
+            for dx in -1..=1 {
+                for dz in -1..=1 {
+                    put(dx, 7, dz, Material::Vidrio); // farol de vidrio
+                    put(dx, 9, dz, Material::Acero); // capucha
+                }
+            }
+            put(0, 8, 0, Material::Wheat); // luz
+        }
+
+        Mueble::Pileta => {
+            for dx in -3i32..=3 {
+                for dz in -2i32..=2 {
+                    let borde = dx.abs() == 3 || dz.abs() == 2;
+                    put(dx, 0, dz, if borde { Material::Ceramica } else { Material::Water });
+                }
+            }
+        }
+
+        // ---------------- Elementos de ciudad ----------------
+        Mueble::Semaforo => {
+            for dy in 0..6 {
+                put(0, dy, 0, Material::Acero); // poste
+            }
+            for dy in 5..9 {
+                put(0, dy, 0, Material::Pizarra); // caja
+            }
+            put(0, 8, 1, Material::Lava); // rojo
+            put(0, 7, 1, Material::Wheat); // amarillo
+            put(0, 6, 1, Material::Leaf); // verde
+            put(1, 7, 0, Material::Acero); // brazo
+        }
+
+        Mueble::Banco => {
+            for dx in -2..=2 {
+                put(dx, 1, 0, Material::Madera); // asiento
+                put(dx, 2, -1, Material::Madera); // respaldo
+            }
+            for &dx in &[-2i32, 2] {
+                put(dx, 0, 0, Material::Acero); // patas
+            }
+        }
+
+        Mueble::Fuente => {
+            for dx in -2i32..=2 {
+                for dz in -2i32..=2 {
+                    if dx * dx + dz * dz <= 4 {
+                        put(dx, 0, dz, Material::Hormigon); // pileta de piedra
+                        if dx * dx + dz * dz <= 2 {
+                            put(dx, 1, dz, Material::Water); // agua
+                        }
+                    }
+                }
+            }
+            put(0, 1, 0, Material::Hormigon); // columna
+            put(0, 2, 0, Material::Hormigon);
+            put(0, 3, 0, Material::Water); // chorro
+        }
+
+        Mueble::Buzon => {
+            put(0, 0, 0, Material::Acero); // poste
+            put(0, 1, 0, Material::Acero);
+            for dx in -1..=1 {
+                for dy in 2..4 {
+                    put(dx, dy, 0, Material::Azul); // caja azul
+                }
+            }
+            put(1, 3, 0, Material::Azul);
+        }
+
+        Mueble::Basura => {
+            for dy in 0..3 {
+                for dx in -1i32..=1 {
+                    for dz in -1i32..=1 {
+                        if dx * dx + dz * dz <= 2 {
+                            put(dx, dy, dz, Material::Acero); // tacho
+                        }
+                    }
+                }
+            }
+            for dx in -1i32..=1 {
+                for dz in -1i32..=1 {
+                    if dx * dx + dz * dz <= 2 {
+                        put(dx, 3, dz, Material::Pizarra); // tapa
+                    }
+                }
+            }
+        }
+
+        Mueble::Parada => {
+            for &(px, pz) in &[(-2i32, -1i32), (2, -1), (-2, 1), (2, 1)] {
+                for dy in 0..5 {
+                    put(px, dy, pz, Material::Acero); // columnas
+                }
+            }
+            for dx in -2..=2 {
+                for dz in -1..=1 {
+                    put(dx, 5, dz, Material::Vidrio); // techo de vidrio
+                }
+                for dy in 1..4 {
+                    put(dx, dy, -1, Material::Vidrio); // fondo de vidrio
+                }
+                put(dx, 1, 0, Material::Madera); // banco
+            }
+        }
+
+        Mueble::Hidrante => {
+            for dy in 0..3 {
+                put(0, dy, 0, Material::Lava); // cuerpo rojo
+            }
+            put(1, 1, 0, Material::Lava); // brazos
+            put(-1, 1, 0, Material::Lava);
+            put(0, 3, 0, Material::Lava); // tapa
+        }
+
+        Mueble::Cabina => {
+            for dy in 0..7 {
+                for dx in -1..=1 {
+                    put(dx, dy, -1, Material::Vidrio); // paredes de vidrio
+                    put(dx, dy, 1, Material::Vidrio);
+                }
+                put(-1, dy, 0, Material::Vidrio);
+                for &(cx, cz) in &[(-1i32, -1i32), (1, -1), (-1, 1), (1, 1)] {
+                    put(cx, dy, cz, Material::Acero); // esquinas
+                }
+            }
+            for dx in -1..=1 {
+                for dz in -1..=1 {
+                    put(dx, 7, dz, Material::Azul); // techo azul
+                }
+            }
+        }
+
+        Mueble::Cartel => {
+            for dy in 0..5 {
+                put(0, dy, 0, Material::Acero); // poste
+            }
+            for dx in -1..=1 {
+                for dy in 5..7 {
+                    put(dx, dy, 0, Material::Yeso); // letrero blanco
+                }
+            }
+            put(0, 6, 0, Material::Azul); // franja
+        }
+
+        Mueble::Auto => {
+            for dx in -3..=3 {
+                for dz in -1..=1 {
+                    put(dx, 1, dz, body); // carrocería (color por posición)
+                }
+            }
+            for dx in -1..=1 {
+                for dz in -1..=1 {
+                    put(dx, 2, dz, Material::Vidrio); // habitáculo/ventanas
+                }
+            }
+            for &(wx, wz) in &[(-2i32, -1i32), (2, -1), (-2, 1), (2, 1)] {
+                put(wx, 0, wz, Material::Pizarra); // ruedas
+            }
+        }
+
+        Mueble::Estatua => {
+            for dx in -1..=1 {
+                for dz in -1..=1 {
+                    put(dx, 0, dz, Material::Marmol); // pedestal
+                    put(dx, 1, dz, Material::Marmol);
+                }
+            }
+            for dy in 2..5 {
+                put(0, dy, 0, Material::Marmol); // figura
+            }
+            put(1, 3, 0, Material::Marmol); // brazos
+            put(-1, 3, 0, Material::Marmol);
+        }
+
+        Mueble::Bolardo => {
+            for dy in 0..4 {
+                put(0, dy, 0, Material::Hormigon); // poste bajo
+            }
+            for &(dx, dz) in &[(1, 0), (-1, 0), (0, 1), (0, -1)] {
+                put(dx, 0, dz, Material::Hormigon); // base ancha
+            }
+            put(0, 4, 0, Material::Acero); // tapa
+        }
+
+        // ---------------- Edificios grandes ----------------
+        Mueble::Rascacielos => {
+            let h = 20i32;
+            for dy in 0..h {
+                for dx in -2..=1 {
+                    for dz in -2..=1 {
+                        let borde = dx == -2 || dx == 1 || dz == -2 || dz == 1;
+                        if borde {
+                            let esquina = (dx == -2 || dx == 1) && (dz == -2 || dz == 1);
+                            let banda = dy % 4 == 0;
+                            put(dx, dy, dz, if esquina || banda { Material::Acero } else { Material::Vidrio });
+                        }
+                    }
+                }
+            }
+            for dx in -2..=1 {
+                for dz in -2..=1 {
+                    put(dx, h, dz, Material::Hormigon); // azotea
+                }
+            }
+            put(0, h + 1, 0, Material::Acero);
+            put(0, h + 2, 0, Material::Acero); // antena
+        }
+
+        Mueble::Edificio => {
+            let h = 12i32;
+            for dy in 0..h {
+                for dx in -2i32..=2 {
+                    for dz in -2..=1 {
+                        let borde = dx == -2 || dx == 2 || dz == -2 || dz == 1;
+                        if borde {
+                            let ventana = dy > 0 && dy % 3 != 0 && dx.rem_euclid(2) == 0;
+                            put(dx, dy, dz, if ventana { Material::Vidrio } else { Material::Ladrillo });
+                        }
+                    }
+                }
+            }
+            for dx in -2..=2 {
+                for dz in -2..=1 {
+                    put(dx, h, dz, Material::Hormigon); // azotea
+                }
+            }
+        }
+
+        Mueble::Torre => {
+            let h = 22i32;
+            for dy in 0..h {
+                for dx in 0..=1 {
+                    for dz in 0..=1 {
+                        put(dx, dy, dz, Material::Hormigon);
+                    }
+                }
+            }
+            let mut dy = 2;
+            while dy < h {
+                put(0, dy, 0, Material::Vidrio); // ventanas
+                put(1, dy, 1, Material::Vidrio);
+                dy += 3;
+            }
+            for k in 0..4 {
+                put(0, h + k, 0, Material::Acero); // antena
+            }
+        }
+
+        Mueble::Fabrica => {
+            for dy in 0..6 {
+                for dx in -3..=2 {
+                    for dz in -2..=1 {
+                        if dx == -3 || dx == 2 || dz == -2 || dz == 1 {
+                            put(dx, dy, dz, Material::Hormigon);
+                        }
+                    }
+                }
+            }
+            for dx in -3..=2 {
+                for dz in -2..=1 {
+                    put(dx, 6, dz, Material::Acero); // techo de zinc
+                }
+            }
+            for dy in 0..12 {
+                put(2, dy, 1, Material::Ladrillo); // chimenea
+            }
+            put(2, 12, 1, Material::Pizarra);
+        }
+
+        Mueble::Iglesia => {
+            for dy in 0..6 {
+                for dx in -2..=1 {
+                    for dz in -3..=2 {
+                        if dx == -2 || dx == 1 || dz == -3 || dz == 2 {
+                            put(dx, dy, dz, Material::Yeso);
+                        }
+                    }
+                }
+            }
+            for dx in -2..=1 {
+                for dz in -3..=2 {
+                    put(dx, 6, dz, Material::Teja); // techo
+                }
+            }
+            for dy in 0..11 {
+                for cdx in -2..=-1 {
+                    for cdz in -3..=-2 {
+                        put(cdx, dy, cdz, Material::Yeso); // campanario
+                    }
+                }
+            }
+            put(-2, 11, -3, Material::Teja);
+            // cruz
+            put(-2, 12, -3, Material::Acero);
+            put(-2, 13, -3, Material::Acero);
+            put(-3, 13, -3, Material::Acero);
+            put(-1, 13, -3, Material::Acero);
+        }
+
+        Mueble::Galpon => {
+            for dy in 0..5 {
+                for dx in -4..=3 {
+                    for dz in -3..=2 {
+                        if dx == -4 || dx == 3 || dz == -3 || dz == 2 {
+                            put(dx, dy, dz, Material::Hormigon);
+                        }
+                    }
+                }
+            }
+            for dx in -4..=3 {
+                for dz in -3..=2 {
+                    let slope = (dz + 3).min(2 - dz).min(3);
+                    put(dx, 5 + slope, dz, Material::Acero); // techo de zinc a dos aguas
+                }
+            }
+            for dx in -1..=1 {
+                for dy in 0..4 {
+                    put(dx, dy, 2, Material::Acero); // portón
+                }
+            }
+        }
+
+        Mueble::Silo => {
+            for dy in 0..14 {
+                for dx in -1i32..=1 {
+                    for dz in -1i32..=1 {
+                        if dx * dx + dz * dz <= 2 {
+                            put(dx, dy, dz, Material::Acero); // cilindro
+                        }
+                    }
+                }
+            }
+            for dx in -1i32..=1 {
+                for dz in -1i32..=1 {
+                    if dx * dx + dz * dz <= 2 {
+                        put(dx, 14, dz, Material::Yeso); // cúpula
+                    }
+                }
+            }
+            put(0, 15, 0, Material::Yeso);
+        }
+
+        Mueble::Estacionamiento => {
+            for lvl in 0..4 {
+                let y = lvl * 3;
+                for dx in -3..=2 {
+                    for dz in -2..=1 {
+                        put(dx, y, dz, Material::Hormigon); // losa
+                    }
+                }
+                for &(cx, cz) in &[(-3, -2), (2, -2), (-3, 1), (2, 1), (0, -2), (0, 1)] {
+                    for k in 1..3 {
+                        put(cx, y + k, cz, Material::Hormigon); // columnas
+                    }
+                }
+            }
+        }
+
+        // ---------------- Más ciudad ----------------
+        Mueble::Farola => {
+            for dy in 0..10 {
+                put(0, dy, 0, Material::Acero); // poste alto
+            }
+            for dx in 0..=2 {
+                put(dx, 10, 0, Material::Acero); // brazo
+            }
+            put(2, 9, 0, Material::Wheat); // luminaria
+        }
+
+        Mueble::Contenedor => {
+            for dy in 0..2 {
+                for dx in -2..=2 {
+                    for dz in -1..=1 {
+                        if dx == -2 || dx == 2 || dz == -1 || dz == 1 || dy == 0 {
+                            put(dx, dy, dz, Material::Acero); // volquete
+                        }
+                    }
+                }
+            }
+            for dx in -2..=2 {
+                for dz in -1..=1 {
+                    put(dx, 2, dz, Material::Pizarra); // tapa
+                }
+            }
+        }
+
+        Mueble::Grua => {
+            for dy in 0..18 {
+                put(0, dy, 0, Material::Acero); // mástil
+            }
+            for dx in 0..=6 {
+                put(dx, 17, 0, Material::Acero); // pluma
+            }
+            for dx in -3..=0 {
+                put(dx, 17, 0, Material::Acero); // contrapluma
+            }
+            put(-3, 16, 0, Material::Hormigon); // contrapeso
+            put(4, 16, 0, Material::Acero); // cable
+            put(4, 15, 0, Material::Acero); // gancho
+        }
+
+        Mueble::Puente => {
+            for dx in -4..=4 {
+                for dz in -1..=1 {
+                    put(dx, 3, dz, Material::Hormigon); // tablero
+                }
+                put(dx, 4, -1, Material::Acero); // barandas
+                put(dx, 4, 1, Material::Acero);
+            }
+            for &px in &[-3i32, 3] {
+                for dy in 0..3 {
+                    for dz in -1..=1 {
+                        put(px, dy, dz, Material::Hormigon); // pilas
+                    }
+                }
+            }
+        }
+
+        // ---------------- Transporte ----------------
+        Mueble::Avion => {
+            for dx in -4..=4 {
+                for dy in 1..=2 {
+                    put(dx, dy, 0, Material::Yeso); // fuselaje
+                }
+            }
+            put(4, 2, 0, Material::Vidrio); // cabina
+            for dz in -3..=3 {
+                put(0, 1, dz, body); // alas (color por posición)
+            }
+            put(-4, 3, 0, Material::Yeso); // cola vertical
+            put(-4, 4, 0, Material::Yeso);
+            put(-4, 3, 1, Material::Yeso); // cola horizontal
+            put(-4, 3, -1, Material::Yeso);
+            put(0, 0, 2, Material::Pizarra); // turbinas
+            put(0, 0, -2, Material::Pizarra);
+        }
+
+        Mueble::Helicoptero => {
+            for dx in -1..=1 {
+                for dz in -1..=1 {
+                    for dy in 1..3 {
+                        put(dx, dy, dz, body); // cabina
+                    }
+                }
+            }
+            put(1, 2, 0, Material::Vidrio); // burbuja
+            for dx in -4..=-2 {
+                put(dx, 2, 0, Material::Yeso); // cola
+            }
+            put(-4, 3, 0, Material::Pizarra); // rotor de cola
+            for dx in -3..=3 {
+                put(dx, 4, 0, Material::Pizarra); // rotor principal
+            }
+            for dz in -3..=3 {
+                put(0, 4, dz, Material::Pizarra);
+            }
+            put(0, 3, 0, Material::Acero); // mástil
+            for dx in -1..=1 {
+                put(dx, 0, -1, Material::Acero); // patines
+                put(dx, 0, 1, Material::Acero);
+            }
+        }
+
+        Mueble::Camioneta => {
+            for dx in -3..=3 {
+                for dz in -1..=1 {
+                    put(dx, 1, dz, body); // chasis
+                }
+            }
+            for dx in 1..=3 {
+                for dz in -1..=1 {
+                    put(dx, 2, dz, if dz == 0 && dx == 2 { Material::Vidrio } else { body }); // cabina
+                }
+            }
+            for dx in -3..=0 {
+                put(dx, 2, -1, body); // caja
+                put(dx, 2, 1, body);
+            }
+            for &(wx, wz) in &[(-2i32, -1i32), (2, -1), (-2, 1), (2, 1)] {
+                put(wx, 0, wz, Material::Pizarra); // ruedas
+            }
+        }
+
+        Mueble::Camion => {
+            for dx in 2..=3 {
+                for dz in -1..=1 {
+                    for dy in 1..3 {
+                        put(dx, dy, dz, body); // cabina
+                    }
+                }
+            }
+            put(3, 2, 0, Material::Vidrio);
+            for dx in -4..=1 {
+                for dz in -1..=1 {
+                    for dy in 1..4 {
+                        if dx == -4 || dz == -1 || dz == 1 || dy == 3 {
+                            put(dx, dy, dz, Material::Yeso); // caja de carga
+                        }
+                    }
+                }
+            }
+            for &(wx, wz) in &[(-3i32, -1i32), (0, -1), (3, -1), (-3, 1), (0, 1), (3, 1)] {
+                put(wx, 0, wz, Material::Pizarra);
+            }
+        }
+
+        Mueble::Colectivo => {
+            for dx in -5..=5 {
+                for dz in -1..=1 {
+                    for dy in 1..4 {
+                        if dx == -5 || dx == 5 || dz == -1 || dz == 1 {
+                            put(dx, dy, dz, if dy == 3 { Material::Vidrio } else { body });
+                        }
+                    }
+                }
+                for dz in -1..=1 {
+                    put(dx, 4, dz, body); // techo
+                }
+            }
+            for &wx in &[-4i32, -1, 4] {
+                put(wx, 0, -1, Material::Pizarra);
+                put(wx, 0, 1, Material::Pizarra);
+            }
+        }
+
+        Mueble::Taxi => {
+            for dx in -3..=3 {
+                for dz in -1..=1 {
+                    put(dx, 1, dz, Material::Wheat); // amarillo
+                }
+            }
+            for dx in -1..=1 {
+                for dz in -1..=1 {
+                    put(dx, 2, dz, if dz == 0 { Material::Vidrio } else { Material::Wheat });
+                }
+            }
+            put(0, 3, 0, Material::Pizarra); // cartel de techo
+            for &(wx, wz) in &[(-2i32, -1i32), (2, -1), (-2, 1), (2, 1)] {
+                put(wx, 0, wz, Material::Pizarra);
+            }
+        }
+
+        Mueble::Tren => {
+            for dx in -5..=5 {
+                for dz in -1..=1 {
+                    for dy in 1..3 {
+                        put(dx, dy, dz, Material::Lava); // cuerpo rojo
+                    }
+                }
+            }
+            for dx in 3..=5 {
+                for dz in -1..=1 {
+                    put(dx, 3, dz, if dz == 0 { Material::Vidrio } else { Material::Lava }); // cabina
+                }
+            }
+            put(-5, 3, 0, Material::Pizarra); // chimenea
+            let mut wx = -4;
+            while wx <= 4 {
+                put(wx, 0, -1, Material::Pizarra);
+                put(wx, 0, 1, Material::Pizarra);
+                wx += 2;
+            }
+        }
+
+        Mueble::Vagon => {
+            for dx in -4..=4 {
+                for dz in -1..=1 {
+                    for dy in 1..3 {
+                        if dx == -4 || dx == 4 || dz == -1 || dz == 1 || dy == 2 {
+                            put(dx, dy, dz, body);
+                        }
+                    }
+                }
+            }
+            let mut wx = -3;
+            while wx <= 3 {
+                put(wx, 0, -1, Material::Pizarra);
+                put(wx, 0, 1, Material::Pizarra);
+                wx += 3;
+            }
+        }
+
+        Mueble::Moto => {
+            put(1, 0, 0, Material::Pizarra); // rueda delantera
+            put(1, 1, 0, Material::Pizarra);
+            put(-1, 0, 0, Material::Pizarra); // rueda trasera
+            put(-1, 1, 0, Material::Pizarra);
+            put(0, 1, 0, body); // cuerpo
+            put(0, 2, 0, body); // asiento
+            put(1, 2, 0, Material::Acero); // manubrio
+        }
+
+        Mueble::Bici => {
+            put(1, 0, 0, Material::Pizarra); // rueda delantera
+            put(1, 1, 0, Material::Pizarra);
+            put(-1, 0, 0, Material::Pizarra); // rueda trasera
+            put(-1, 1, 0, Material::Pizarra);
+            put(0, 1, 0, Material::Acero); // cuadro
+            put(0, 2, 0, Material::Acero); // asiento
+            put(1, 3, 0, Material::Acero); // manubrio
+        }
+
+        Mueble::Barco => {
+            for dx in -4..=4 {
+                put(dx, 1, 0, body); // casco superior
+            }
+            for dx in -3..=3 {
+                put(dx, 0, 0, body); // casco inferior
+            }
+            for dx in -1..=1 {
+                put(dx, 2, 0, Material::Yeso); // cabina
+                put(dx, 3, 0, Material::Vidrio);
+            }
+            put(0, 4, 0, Material::Acero); // mástil
+            put(0, 5, 0, Material::Acero);
+        }
+
+        Mueble::Ambulancia => {
+            for dx in -3..=3 {
+                for dz in -1..=1 {
+                    for dy in 1..4 {
+                        if dx == -3 || dx == 3 || dz == -1 || dz == 1 || dy == 3 {
+                            put(dx, dy, dz, Material::Yeso); // furgón blanco
+                        }
+                    }
+                }
+            }
+            put(3, 2, 0, Material::Vidrio); // parabrisas
+            put(0, 4, 0, Material::Lava); // baliza roja
+            put(0, 2, 1, Material::Lava); // cruz roja
+            put(0, 2, -1, Material::Lava);
+            for &(wx, wz) in &[(-2i32, -1i32), (2, -1), (-2, 1), (2, 1)] {
+                put(wx, 0, wz, Material::Pizarra);
+            }
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    fn solids(g: &VoxelGrid, dim: [u32; 3]) -> usize {
+        let mut n = 0;
+        for x in 0..dim[0] {
+            for y in 0..dim[1] {
+                for z in 0..dim[2] {
+                    if g.is_solid(x as i32, y as i32, z as i32) {
+                        n += 1;
+                    }
+                }
+            }
+        }
+        n
+    }
+
+    #[test]
+    fn cada_mueble_estampa_voxels() {
+        let dim = [24u32, 24, 24];
+        for m in Mueble::ALL {
+            let mut g = VoxelGrid::new(dim);
+            stamp_mueble(&mut g, m, 12, 2, 12, 0);
+            assert!(solids(&g, dim) >= 5, "{} estampó muy poco", m.label());
+        }
+    }
+
+    #[test]
+    fn facing_rota_la_silueta() {
+        // La silla (asimétrica por el respaldo) cambia de huella al rotar.
+        let dim = [24u32, 24, 24];
+        let mut a = VoxelGrid::new(dim);
+        let mut b = VoxelGrid::new(dim);
+        stamp_mueble(&mut a, Mueble::Silla, 12, 2, 12, 0);
+        stamp_mueble(&mut b, Mueble::Silla, 12, 2, 12, 1);
+        // El respaldo cae en una celda distinta según la orientación. Base (12,2,12),
+        // respaldo local (0, 3, -1): facing 0 → (12,5,11); facing 1 → (13,5,12).
+        let back0 = a.is_solid(12, 5, 11); // -Z de la base
+        let back1 = b.is_solid(13, 5, 12); // rotado a +X
+        assert!(back0, "respaldo en facing 0");
+        assert!(back1, "respaldo rotó con el facing 1");
+    }
+}
diff --git a/llimphi-voxel/src/player.rs b/llimphi-voxel/src/player.rs
index 4a0983b..41ce605 100644
--- a/llimphi-voxel/src/player.rs
+++ b/llimphi-voxel/src/player.rs
@@ -10,7 +10,7 @@
 //! (move-and-resolve), el método clásico y robusto para voxels.
 //!
 //! La mirada (`yaw`/`pitch`) la lleva la app (compartida con la cámara
-//! `orbit`/`fly`); acá viven sólo las helpers puras de base
+//! `orbit`/`fly`); aquí viven sólo las helpers puras de base
 //! ([`forward_h`]/[`right_h`]/[`look_dir`]) para derivar el vector de avance.
 
 use llimphi_3d::glam::Vec3;
@@ -20,7 +20,7 @@ use llimphi_3d::VoxelGrid;
 const HALF_W: f32 = 0.3;
 /// Altura total de la caja (de los pies a la coronilla).
 const HEIGHT: f32 = 1.7;
-/// Altura del ojo sobre los pies (la cámara va acá).
+/// Altura del ojo sobre los pies (la cámara va aquí).
 const EYE: f32 = 1.55;
 /// Aceleración de gravedad (voxels/s²).
 const GRAVITY: f32 = 30.0;
@@ -122,6 +122,25 @@ impl Player {
         self.move_axis(grid, 2, self.vel.z * dt);
     }
 
+    /// VUELO libre (modo creativo): sin gravedad ni colisión. La cámara se mueve
+    /// en la dirección deseada `wish` —incluida la VERTICAL (`wish.y` sube/baja)—
+    /// para explorar el mundo desde cualquier ángulo y dictar sucesos. `wish` no
+    /// necesita normalizarse; vuela algo más rápido que la caminata.
+    pub fn volar(&mut self, wish: Vec3, dt: f32) {
+        self.volar_veloz(wish, dt, 1.0);
+    }
+
+    /// Como [`volar`](Self::volar) pero con un **multiplicador de velocidad** `boost`
+    /// (p. ej. escalado por la altitud: más alto → más rápido).
+    pub fn volar_veloz(&mut self, wish: Vec3, dt: f32, boost: f32) {
+        let dt = dt.clamp(0.0, 0.05);
+        self.vel = Vec3::ZERO;
+        self.on_ground = false;
+        if wish.length_squared() > 1e-6 {
+            self.pos += wish.normalize() * self.speed * 1.8 * boost.max(0.1) * dt;
+        }
+    }
+
     /// AABB `[min, max]` del jugador en `pos`.
     fn aabb_at(&self, pos: Vec3) -> (Vec3, Vec3) {
         (
@@ -202,6 +221,30 @@ mod tests {
         assert!((p.pos.y - 1.0).abs() < 0.05, "pies en y≈1, dio {}", p.pos.y);
     }
 
+    #[test]
+    fn volar_sube_sin_gravedad_ni_colision() {
+        let g = grid_con_piso();
+        let mut p = Player::new(Vec3::new(4.5, 5.0, 4.5));
+        let y0 = p.pos.y;
+        // Volar hacia arriba: sube y NO cae (sin gravedad).
+        for _ in 0..30 {
+            p.volar(Vec3::Y, 1.0 / 30.0);
+        }
+        assert!(p.pos.y > y0 + 1.0, "voló hacia arriba: {} → {}", y0, p.pos.y);
+        assert!(!p.on_ground);
+        // Sin deseo, se queda quieto (no cae).
+        let quieto = p.pos;
+        for _ in 0..30 {
+            p.volar(Vec3::ZERO, 1.0 / 30.0);
+        }
+        assert!((p.pos - quieto).length() < 1e-4, "sin wish, flota quieto");
+        // Atraviesa el suelo si vuela hacia abajo (sin colisión).
+        for _ in 0..600 {
+            p.volar(-Vec3::Y, 1.0 / 30.0);
+        }
+        assert!(p.pos.y < 0.0, "el vuelo ignora la colisión: {}", p.pos.y);
+    }
+
     #[test]
     fn una_pared_frena_el_avance() {
         let mut g = grid_con_piso();
diff --git a/llimphi-voxel/src/potential.rs b/llimphi-voxel/src/potential.rs
index ed8fe31..947bcc3 100644
--- a/llimphi-voxel/src/potential.rs
+++ b/llimphi-voxel/src/potential.rs
@@ -1,5 +1,5 @@
 //! **Objeto potencial**: una cosa colocada en el mundo en su forma *latente* que,
-//! ante un disparador (acá: el aterrizaje/nacimiento), **eclosiona** en la entidad
+//! ante un disparador (aquí: el aterrizaje/nacimiento), **eclosiona** en la entidad
 //! que será. El primero es el [`Egg`] — un *huevo* que lleva adentro su potencial
 //! ([`Hatchling`]: qué nace, con qué edad y colores) y al abrirse **da a luz** un
 //! [`Actor`] recién nacido.
diff --git a/llimphi-voxel/src/raycast.rs b/llimphi-voxel/src/raycast.rs
index 8ab4012..2c02c4d 100644
--- a/llimphi-voxel/src/raycast.rs
+++ b/llimphi-voxel/src/raycast.rs
@@ -27,7 +27,7 @@ pub struct VoxelHit {
 
 /// Marcha un rayo `origin + t·dir` por la grilla hasta el primer voxel sólido,
 /// hasta `max_dist` unidades. `dir` no necesita estar normalizado (se normaliza
-/// acá, y `dist` queda en unidades de voxel). `None` si no pega nada.
+/// aquí, y `dist` queda en unidades de voxel). `None` si no pega nada.
 pub fn raycast(grid: &VoxelGrid, origin: [f32; 3], dir: [f32; 3], max_dist: f32) -> Option<VoxelHit> {
     // Normalizar para que t sea distancia real.
     let len = (dir[0] * dir[0] + dir[1] * dir[1] + dir[2] * dir[2]).sqrt();
diff --git a/llimphi-voxel/src/rig.rs b/llimphi-voxel/src/rig.rs
new file mode 100644
index 0000000..fc95a22
--- /dev/null
+++ b/llimphi-voxel/src/rig.rs
@@ -0,0 +1,543 @@
+//! `rig` — **cuerpo arbitrario articulado** para los Seres: un árbol de partes
+//! (cajas) unidas por articulaciones, que generaliza el muñeco humanoide fijo de
+//! [`Actor`](crate::Actor) a cualquier morfología (cuadrúpedo, ave, serpiente, bicho).
+//! Es la **capa 1** del movimiento; encima montan los *andares* (capa 2, animación
+//! procedural por articulación — ya esbozada aquí con [`Andar`]) y la *conducta*
+//! (capa 3, locomoción) — y, más adelante, movimiento coreografiado/complejo.
+//!
+//! Un [`Segmento`] es una caja que cuelga de un **pivote** (su articulación) en el
+//! marco de su **padre**, y rota sobre un [`Eje`]. El árbol se hornea a una malla
+//! ([`Rig::mesh`]) acumulando las transformaciones padre→hijo: rotar el muslo
+//! arrastra la pantorrilla y el pie. Como el [`Actor`], produce `(Vec<Vertex3d>,
+//! Vec<u16>)` en espacio local (pies en el origen, mirando a `+Z`); no toca GPU.
+//!
+//! Todo es **dato serializable**: una criatura nueva es un `Rig`, no código nuevo.
+
+use llimphi_3d::glam::{Mat4, Vec3};
+use llimphi_3d::{push_cube, Vertex3d};
+use serde::{Deserialize, Serialize};
+
+/// Eje de rotación de una articulación (en el marco local del segmento).
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize)]
+pub enum Eje {
+    /// Cabeceo: balanceo hacia adelante/atrás (miembros que caminan).
+    X,
+    /// Giro: rotación horizontal (serpenteo de una serpiente).
+    Y,
+    /// Alabeo: hacia el costado/arriba (aletear de un ave).
+    Z,
+}
+
+impl Eje {
+    fn mat(self, a: f32) -> Mat4 {
+        match self {
+            Eje::X => Mat4::from_rotation_x(a),
+            Eje::Y => Mat4::from_rotation_y(a),
+            Eje::Z => Mat4::from_rotation_z(a),
+        }
+    }
+}
+
+/// De qué color se pinta un segmento. Las tres ranuras mapean a los colores del
+/// [`Sere`](crate::CharSpec) (piel/cuerpo/patas); `Custom` lleva el suyo.
+#[derive(Debug, Clone, Copy, PartialEq, Serialize, Deserialize)]
+pub enum SlotColor {
+    Piel,
+    Cuerpo,
+    Patas,
+    Custom([f32; 3]),
+}
+
+impl SlotColor {
+    fn resolve(self, piel: [f32; 3], cuerpo: [f32; 3], patas: [f32; 3]) -> [f32; 3] {
+        match self {
+            SlotColor::Piel => piel,
+            SlotColor::Cuerpo => cuerpo,
+            SlotColor::Patas => patas,
+            SlotColor::Custom(c) => c,
+        }
+    }
+}
+
+/// Una **parte** del cuerpo: una caja articulada en el árbol.
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct Segmento {
+    /// Nombre (define el rol para los andares: "pata", "brazo", "ala", "cola"…).
+    pub nombre: String,
+    /// Índice del padre en [`Rig::segmentos`]; `-1` = raíz (anclado a los pies).
+    pub padre: i32,
+    /// Posición de la **articulación** `[x,y,z]` relativa al marco del padre.
+    /// (`[f32;3]` y no `Vec3` para que serialice sin features extra de glam.)
+    pub pivote: [f32; 3],
+    /// Desplazamiento del **centro de la caja** desde el pivote (p.ej. una pata
+    /// cuelga con `centro = [0, -largo/2, 0]`).
+    pub centro: [f32; 3],
+    /// Tamaño de la caja.
+    pub tamaño: [f32; 3],
+    /// Eje sobre el que rota la articulación.
+    pub eje: Eje,
+    /// Color de la caja.
+    pub color: SlotColor,
+}
+
+/// Pose: el **ángulo de cada articulación** (paralelo a [`Rig::segmentos`]).
+#[derive(Debug, Clone, Default)]
+pub struct RigPose {
+    pub angulos: Vec<f32>,
+}
+
+impl RigPose {
+    /// Pose neutra (todos los ángulos en 0) para `n` segmentos.
+    pub fn neutra(n: usize) -> Self {
+        Self { angulos: vec![0.0; n] }
+    }
+}
+
+/// Un **cuerpo**: el árbol de segmentos (ordenado padre-antes-que-hijo).
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct Rig {
+    pub nombre: String,
+    pub segmentos: Vec<Segmento>,
+}
+
+impl Rig {
+    /// Cantidad de segmentos.
+    pub fn len(&self) -> usize {
+        self.segmentos.len()
+    }
+    pub fn is_empty(&self) -> bool {
+        self.segmentos.is_empty()
+    }
+
+    /// Transformación de mundo de cada segmento para una pose (acumula padre→hijo):
+    /// `world[s] = world[padre] · T(pivote) · R(eje, ángulo)`. Requiere orden
+    /// topológico (padre antes que hijo), que los presets respetan.
+    fn world_transforms(&self, pose: &RigPose) -> Vec<Mat4> {
+        let mut world = vec![Mat4::IDENTITY; self.segmentos.len()];
+        for (i, s) in self.segmentos.iter().enumerate() {
+            let ang = pose.angulos.get(i).copied().unwrap_or(0.0);
+            let local = Mat4::from_translation(Vec3::from_array(s.pivote)) * s.eje.mat(ang);
+            world[i] = if s.padre < 0 {
+                local
+            } else {
+                world[s.padre as usize] * local
+            };
+        }
+        world
+    }
+
+    /// Hornea la **malla** del cuerpo en la pose dada, con los tres colores del ser.
+    /// Espacio local: pies en el origen, mirando a `+Z` (igual que [`Actor::mesh`]).
+    pub fn mesh(
+        &self,
+        pose: &RigPose,
+        piel: [f32; 3],
+        cuerpo: [f32; 3],
+        patas: [f32; 3],
+    ) -> (Vec<Vertex3d>, Vec<u16>) {
+        let world = self.world_transforms(pose);
+        let mut v = Vec::with_capacity(8 * self.segmentos.len());
+        let mut i = Vec::with_capacity(36 * self.segmentos.len());
+        for (s, w) in self.segmentos.iter().zip(&world) {
+            let m = *w
+                * Mat4::from_translation(Vec3::from_array(s.centro))
+                * Mat4::from_scale(Vec3::from_array(s.tamaño));
+            push_cube(&mut v, &mut i, m, s.color.resolve(piel, cuerpo, patas));
+        }
+        (v, i)
+    }
+}
+
+/// Helper para declarar un segmento conciso (toma `Vec3`, guarda `[f32;3]`).
+fn seg(nombre: &str, padre: i32, pivote: Vec3, centro: Vec3, tamaño: Vec3, eje: Eje, color: SlotColor) -> Segmento {
+    Segmento {
+        nombre: nombre.into(),
+        padre,
+        pivote: pivote.to_array(),
+        centro: centro.to_array(),
+        tamaño: tamaño.to_array(),
+        eje,
+        color,
+    }
+}
+
+/// Caja que **cuelga** de su pivote (miembro): centro a `-largo/2` en Y.
+fn miembro(nombre: &str, padre: i32, pivote: Vec3, largo: f32, grosor: f32, eje: Eje, color: SlotColor) -> Segmento {
+    seg(
+        nombre,
+        padre,
+        pivote,
+        Vec3::new(0.0, -largo * 0.5, 0.0),
+        Vec3::new(grosor, largo, grosor),
+        eje,
+        color,
+    )
+}
+
+impl Rig {
+    /// **Humanoide**: torso + cabeza + 2 brazos + 2 piernas (versión rig del muñeco).
+    pub fn humanoide() -> Rig {
+        let torso_y = 0.8; // cadera (pies en 0)
+        let torso = Vec3::new(0.55, 0.60, 0.30);
+        Rig {
+            nombre: "humanoide".into(),
+            segmentos: vec![
+                // 0: torso (raíz), centrado entre la cadera y los hombros.
+                seg("torso", -1, Vec3::new(0.0, torso_y, 0.0), Vec3::new(0.0, torso.y * 0.5, 0.0), torso, Eje::X, SlotColor::Cuerpo),
+                // 1: cabeza (hija del torso).
+                seg("cabeza", 0, Vec3::new(0.0, torso.y, 0.0), Vec3::new(0.0, 0.22, 0.0), Vec3::new(0.42, 0.40, 0.42), Eje::X, SlotColor::Piel),
+                // 2,3: brazos (hijos del torso, en los hombros).
+                miembro("brazo_r", 0, Vec3::new(0.36, torso.y, 0.0), 0.60, 0.18, Eje::X, SlotColor::Cuerpo),
+                miembro("brazo_l", 0, Vec3::new(-0.36, torso.y, 0.0), 0.60, 0.18, Eje::X, SlotColor::Cuerpo),
+                // 4,5: piernas (raíz, ancladas a la cadera, no heredan el torso).
+                miembro("pierna_r", -1, Vec3::new(0.14, torso_y, 0.0), 0.80, 0.22, Eje::X, SlotColor::Patas),
+                miembro("pierna_l", -1, Vec3::new(-0.14, torso_y, 0.0), 0.80, 0.22, Eje::X, SlotColor::Patas),
+            ],
+        }
+    }
+
+    /// **Cuadrúpedo**: lomo horizontal + cabeza + 4 patas + cola.
+    pub fn cuadrupedo() -> Rig {
+        let alto = 0.7; // altura del lomo (patas de 0.7)
+        let lomo = Vec3::new(0.45, 0.40, 1.10); // largo en Z
+        Rig {
+            nombre: "cuadrúpedo".into(),
+            segmentos: vec![
+                // 0: lomo (raíz), centrado a la altura del lomo.
+                seg("lomo", -1, Vec3::new(0.0, alto, 0.0), Vec3::ZERO, lomo, Eje::X, SlotColor::Cuerpo),
+                // 1: cabeza adelante (+Z) y un poco arriba.
+                seg("cabeza", 0, Vec3::new(0.0, 0.12, lomo.z * 0.5), Vec3::new(0.0, 0.0, 0.22), Vec3::new(0.34, 0.34, 0.40), Eje::X, SlotColor::Piel),
+                // 2..5: cuatro patas desde las esquinas del lomo.
+                miembro("pata_fr", 0, Vec3::new(0.30, -lomo.y * 0.5, lomo.z * 0.4), alto, 0.16, Eje::X, SlotColor::Patas),
+                miembro("pata_fl", 0, Vec3::new(-0.30, -lomo.y * 0.5, lomo.z * 0.4), alto, 0.16, Eje::X, SlotColor::Patas),
+                miembro("pata_br", 0, Vec3::new(0.30, -lomo.y * 0.5, -lomo.z * 0.4), alto, 0.16, Eje::X, SlotColor::Patas),
+                miembro("pata_bl", 0, Vec3::new(-0.30, -lomo.y * 0.5, -lomo.z * 0.4), alto, 0.16, Eje::X, SlotColor::Patas),
+                // 6: cola atrás (-Z), serpentea en Y.
+                miembro("cola", 0, Vec3::new(0.0, 0.10, -lomo.z * 0.5), 0.55, 0.12, Eje::Y, SlotColor::Cuerpo),
+            ],
+        }
+    }
+
+    /// **Ave**: cuerpo + cabeza + 2 alas (aletean en Z) + 2 patitas + cola.
+    pub fn ave() -> Rig {
+        let alto = 0.45;
+        let cuerpo = Vec3::new(0.40, 0.46, 0.60);
+        Rig {
+            nombre: "ave".into(),
+            segmentos: vec![
+                seg("cuerpo", -1, Vec3::new(0.0, alto, 0.0), Vec3::ZERO, cuerpo, Eje::X, SlotColor::Cuerpo),
+                seg("cabeza", 0, Vec3::new(0.0, 0.20, cuerpo.z * 0.5), Vec3::new(0.0, 0.10, 0.10), Vec3::new(0.28, 0.28, 0.30), Eje::X, SlotColor::Piel),
+                // Alas: cajas anchas que cuelgan poco y aletean en Z.
+                seg("ala_r", 0, Vec3::new(cuerpo.x * 0.5, 0.10, 0.0), Vec3::new(0.30, 0.0, 0.0), Vec3::new(0.60, 0.08, 0.40), Eje::Z, SlotColor::Cuerpo),
+                seg("ala_l", 0, Vec3::new(-cuerpo.x * 0.5, 0.10, 0.0), Vec3::new(-0.30, 0.0, 0.0), Vec3::new(0.60, 0.08, 0.40), Eje::Z, SlotColor::Cuerpo),
+                miembro("pata_r", -1, Vec3::new(0.12, alto - 0.05, 0.0), alto - 0.05, 0.07, Eje::X, SlotColor::Patas),
+                miembro("pata_l", -1, Vec3::new(-0.12, alto - 0.05, 0.0), alto - 0.05, 0.07, Eje::X, SlotColor::Patas),
+                miembro("cola", 0, Vec3::new(0.0, 0.05, -cuerpo.z * 0.5), 0.35, 0.10, Eje::X, SlotColor::Cuerpo),
+            ],
+        }
+    }
+
+    /// **Serpiente**: cadena de segmentos que serpentea (cada uno gira en Y respecto
+    /// del anterior). La cabeza es el primero.
+    pub fn serpiente() -> Rig {
+        let n = 8;
+        let alto = 0.25;
+        let paso = 0.42; // largo de cada segmento (en -Z, hacia atrás)
+        let mut segmentos = Vec::with_capacity(n);
+        // 0: cabeza (raíz).
+        segmentos.push(seg(
+            "cabeza",
+            -1,
+            Vec3::new(0.0, alto, 0.0),
+            Vec3::new(0.0, 0.0, 0.10),
+            Vec3::new(0.34, 0.30, 0.40),
+            Eje::Y,
+            SlotColor::Piel,
+        ));
+        // 1..n: cuerpo, cada uno colgando hacia atrás del anterior, girando en Y.
+        for k in 1..n {
+            let grosor = 0.34 - 0.02 * k as f32; // se afina hacia la cola
+            segmentos.push(seg(
+                "cuerpo",
+                (k - 1) as i32,
+                Vec3::new(0.0, 0.0, -paso),
+                Vec3::new(0.0, 0.0, -paso * 0.5),
+                Vec3::new(grosor, 0.26, paso),
+                Eje::Y,
+                SlotColor::Cuerpo,
+            ));
+        }
+        Rig { nombre: "serpiente".into(), segmentos }
+    }
+
+    /// Los cuatro presets (para un editor que cicle entre ellos).
+    pub fn presets() -> Vec<Rig> {
+        vec![Rig::humanoide(), Rig::cuadrupedo(), Rig::ave(), Rig::serpiente()]
+    }
+}
+
+/// Oscilador de **una articulación** en un andar: balancea `amplitud · sin(t·cadencia
+/// + desfase)`.
+#[derive(Debug, Clone, Copy, Serialize, Deserialize)]
+pub struct Osc {
+    pub amplitud: f32,
+    pub desfase: f32,
+}
+
+/// **Andar** (capa 2): animación procedural por articulación a partir del tiempo.
+/// Cada segmento oscila según su [`Osc`] a una `cadencia` común (rad/seg). La amplitud
+/// y el desfase iniciales salen del **rol** del segmento (nombre+posición), así un
+/// `Andar::caminar` arranca razonable para cualquier rig; después se editan.
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct Andar {
+    /// Ritmo del ciclo (rad/seg): mayor = pasos más rápidos.
+    pub cadencia: f32,
+    /// Oscilador por segmento (paralelo a [`Rig::segmentos`]).
+    pub osc: Vec<Osc>,
+}
+
+impl Andar {
+    /// Caminata heurística para `rig`: patas/piernas en oposición (izq/der y
+    /// delante/atrás), brazos contra su pierna, alas aleteando, serpiente/cola con
+    /// desfase creciente a lo largo de la cadena. `cadencia` de caminata.
+    pub fn caminar(rig: &Rig) -> Andar {
+        use std::f32::consts::PI;
+        let osc = rig
+            .segmentos
+            .iter()
+            .enumerate()
+            .map(|(i, s)| {
+                let nom = s.nombre.as_str();
+                let lado = if s.pivote[0] < -1e-3 { PI } else { 0.0 };
+                let tren = if s.pivote[2] < -1e-3 { PI } else { 0.0 };
+                let (amplitud, desfase) = if nom.contains("pierna") || nom.contains("pata") {
+                    (0.6, lado + tren)
+                } else if nom.contains("brazo") {
+                    (0.5, lado + PI)
+                } else if nom.contains("ala") {
+                    (1.0, lado)
+                } else if nom.contains("cola") {
+                    (0.4, 0.0)
+                } else if nom.contains("cuerpo") && s.eje == Eje::Y {
+                    (0.5, i as f32 * 0.9) // serpenteo: onda que viaja
+                } else {
+                    (0.0, 0.0)
+                };
+                Osc { amplitud, desfase }
+            })
+            .collect();
+        Andar { cadencia: 8.0, osc }
+    }
+
+    /// Reposo: el andar de caminata muy atenuado y lento (un balanceo apenas vivo).
+    pub fn quieto(rig: &Rig) -> Andar {
+        let mut a = Andar::caminar(rig);
+        a.cadencia = 2.2;
+        for o in &mut a.osc {
+            o.amplitud *= 0.12;
+        }
+        a
+    }
+
+    /// Trote: la caminata más amplia y rápida.
+    pub fn correr(rig: &Rig) -> Andar {
+        let mut a = Andar::caminar(rig);
+        a.cadencia = 13.0;
+        for o in &mut a.osc {
+            o.amplitud = (o.amplitud * 1.4).min(1.4);
+        }
+        a
+    }
+
+    /// **Saludar**: un miembro delantero (o la cabeza si no hay) oscila amplio; el
+    /// resto quieto. Gesto genérico para cualquier rig.
+    pub fn saludar(rig: &Rig) -> Andar {
+        let mut osc = vec![Osc { amplitud: 0.0, desfase: 0.0 }; rig.len()];
+        if let Some(i) = miembro_expresivo(rig) {
+            osc[i] = Osc { amplitud: 1.0, desfase: 0.0 };
+        }
+        Andar { cadencia: 9.0, osc }
+    }
+
+    /// **Señalar**: un miembro delantero extendido y *sostenido* (cadencia 0 → pose
+    /// fija; `sin(π/2)=1` lo deja en su máxima extensión).
+    pub fn senalar(rig: &Rig) -> Andar {
+        let mut osc = vec![Osc { amplitud: 0.0, desfase: 0.0 }; rig.len()];
+        if let Some(i) = miembro_expresivo(rig) {
+            osc[i] = Osc { amplitud: 0.9, desfase: std::f32::consts::FRAC_PI_2 };
+        }
+        Andar { cadencia: 0.0, osc }
+    }
+
+    /// **Festejar**: todos los miembros (o el cuerpo, si no hay) rebotan en fase.
+    pub fn festejar(rig: &Rig) -> Andar {
+        let osc = rig
+            .segmentos
+            .iter()
+            .map(|s| {
+                let nom = s.nombre.as_str();
+                let activo = es_miembro(nom)
+                    || nom.contains("cabeza")
+                    || (nom.contains("cuerpo") && s.eje == Eje::Y);
+                Osc { amplitud: if activo { 0.7 } else { 0.0 }, desfase: 0.0 }
+            })
+            .collect();
+        Andar { cadencia: 8.0, osc }
+    }
+
+    /// La pose del andar en el instante `t` (seg).
+    pub fn pose(&self, t: f32) -> RigPose {
+        let angulos = self
+            .osc
+            .iter()
+            .map(|o| o.amplitud * (t * self.cadencia + o.desfase).sin())
+            .collect();
+        RigPose { angulos }
+    }
+}
+
+/// `true` si el segmento es un miembro (brazo/pata/ala).
+fn es_miembro(nom: &str) -> bool {
+    nom.contains("brazo") || nom.contains("pata") || nom.contains("ala")
+}
+
+/// Índice del miembro **delantero-derecho** para los gestos (brazo/pata/ala del
+/// frente y a la derecha); si no hay miembros, la cabeza; si tampoco, `None`.
+fn miembro_expresivo(rig: &Rig) -> Option<usize> {
+    let miembros: Vec<usize> = (0..rig.len()).filter(|&i| es_miembro(&rig.segmentos[i].nombre)).collect();
+    miembros
+        .iter()
+        .copied()
+        .find(|&i| rig.segmentos[i].pivote[2] >= -1e-3 && rig.segmentos[i].pivote[0] > 1e-3)
+        .or_else(|| miembros.first().copied())
+        .or_else(|| rig.segmentos.iter().position(|s| s.nombre.contains("cabeza")))
+}
+
+/// Los **andares por estado** de una criatura (capa 2): reposo, caminar, correr.
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct Andares {
+    pub quieto: Andar,
+    pub caminar: Andar,
+    pub correr: Andar,
+}
+
+impl Andares {
+    /// Andares por defecto (heurísticos) para un rig.
+    pub fn default_for(rig: &Rig) -> Self {
+        Self { quieto: Andar::quieto(rig), caminar: Andar::caminar(rig), correr: Andar::correr(rig) }
+    }
+
+    /// Rótulos de los estados, en orden de índice.
+    pub const LABELS: [&'static str; 3] = ["quieto", "caminar", "correr"];
+
+    /// El andar del estado `i` (0=quieto,1=caminar,2=correr).
+    pub fn estado(&self, i: usize) -> &Andar {
+        match i {
+            0 => &self.quieto,
+            1 => &self.caminar,
+            _ => &self.correr,
+        }
+    }
+    pub fn estado_mut(&mut self, i: usize) -> &mut Andar {
+        match i {
+            0 => &mut self.quieto,
+            1 => &mut self.caminar,
+            _ => &mut self.correr,
+        }
+    }
+}
+
+/// El **movimiento** de un cuerpo: su [`Rig`] (morfología) + sus [`Andares`]
+/// (animación). Es lo que distingue a una criatura no-humanoide; los andares quedan
+/// siempre en sincronía con el rig (misma cantidad de segmentos).
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct Movimiento {
+    pub rig: Rig,
+    pub andares: Andares,
+}
+
+impl Movimiento {
+    /// Un movimiento a partir de un rig, con andares por defecto.
+    pub fn preset(rig: Rig) -> Self {
+        let andares = Andares::default_for(&rig);
+        Self { rig, andares }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn presets_tienen_las_partes_esperadas() {
+        assert_eq!(Rig::humanoide().len(), 6);
+        assert_eq!(Rig::cuadrupedo().len(), 7);
+        assert_eq!(Rig::ave().len(), 7);
+        assert_eq!(Rig::serpiente().len(), 8);
+        // Todos en orden topológico: el padre aparece antes que el hijo.
+        for rig in Rig::presets() {
+            for (i, s) in rig.segmentos.iter().enumerate() {
+                assert!((s.padre as i32) < i as i32, "{}::{} padre {} no es anterior", rig.nombre, s.nombre, s.padre);
+            }
+        }
+    }
+
+    #[test]
+    fn la_malla_no_es_vacia_y_escala_con_las_partes() {
+        let rig = Rig::cuadrupedo();
+        let pose = RigPose::neutra(rig.len());
+        let (v, idx) = rig.mesh(&pose, [0.9, 0.7, 0.6], [0.4, 0.5, 0.7], [0.3, 0.3, 0.3]);
+        // 8 vértices y 36 índices por caja.
+        assert_eq!(v.len(), 8 * rig.len());
+        assert_eq!(idx.len(), 36 * rig.len());
+    }
+
+    #[test]
+    fn rotar_el_padre_arrastra_al_hijo() {
+        // En la serpiente, girar la cabeza mueve el primer segmento del cuerpo.
+        let rig = Rig::serpiente();
+        let mut pose = RigPose::neutra(rig.len());
+        let world0 = rig.world_transforms(&pose);
+        pose.angulos[0] = 0.8; // gira la cabeza (raíz) en Y
+        let world1 = rig.world_transforms(&pose);
+        let p0 = world0[1].transform_point3(Vec3::ZERO);
+        let p1 = world1[1].transform_point3(Vec3::ZERO);
+        assert!((p0 - p1).length() > 0.05, "el hijo siguió a la rotación del padre");
+    }
+
+    #[test]
+    fn los_gestos_mueven_lo_esperado() {
+        // Saludar: exactamente un miembro con amplitud (el delantero-derecho).
+        let rig = Rig::cuadrupedo();
+        let s = Andar::saludar(&rig);
+        let activos = s.osc.iter().filter(|o| o.amplitud > 0.0).count();
+        assert_eq!(activos, 1, "saludar mueve un solo miembro");
+        // Señalar: sostenido (cadencia 0) y la pose no es nula.
+        let n = Andar::senalar(&rig);
+        assert_eq!(n.cadencia, 0.0);
+        assert!(n.pose(3.7).angulos.iter().any(|a| a.abs() > 0.1), "señalar deja una pose fija no nula");
+        // Festejar: varios miembros activos (las 4 patas + cola).
+        let f = Andar::festejar(&rig);
+        assert!(f.osc.iter().filter(|o| o.amplitud > 0.0).count() >= 4, "festejar mueve varias partes");
+        // Una serpiente (sin miembros) igual saluda con la cabeza.
+        let serp = Rig::serpiente();
+        assert!(Andar::saludar(&serp).osc.iter().any(|o| o.amplitud > 0.0), "la serpiente saluda con la cabeza");
+    }
+
+    #[test]
+    fn el_andar_balancea_las_patas_en_oposicion() {
+        use std::f32::consts::PI;
+        let rig = Rig::cuadrupedo();
+        let andar = Andar::caminar(&rig);
+        // Patas delanteras der/izq en oposición (~π de desfase).
+        let fr = rig.segmentos.iter().position(|s| s.nombre == "pata_fr").unwrap();
+        let fl = rig.segmentos.iter().position(|s| s.nombre == "pata_fl").unwrap();
+        let p = andar.pose(0.3);
+        // En oposición: signos opuestos en casi toda la fase.
+        let a = (0.3_f32).sin();
+        let b = (0.3_f32 + PI).sin();
+        assert!(a * b < 0.0, "patas opuestas baten en contrafase");
+        assert!(p.angulos[fr].abs() > 0.0 && p.angulos[fl].abs() > 0.0);
+        let _ = (fr, fl);
+    }
+}
diff --git a/llimphi-voxel/src/sim.rs b/llimphi-voxel/src/sim.rs
new file mode 100644
index 0000000..b23ff72
--- /dev/null
+++ b/llimphi-voxel/src/sim.rs
@@ -0,0 +1,608 @@
+//! `sim` — **simulación de la ley [`Fluir`](crate::LeyKind::Fluir)**: lo que hace
+//! que el agua sea *líquida*. Un autómata celular sobre la ocupación de un
+//! [`VoxelGrid`]: cada celda de agua **cae con gravedad**, **se esparce a vecinos
+//! horizontales** y **cae por las cornisas** (cascadas). Conserva la masa (sólo
+//! reubica celdas) y **converge** (no slosh perpetuo): la lateral sólo procede si el
+//! agua puede descender o si hay *carga* (agua encima), así una torre se desploma en
+//! charco y un manto de 1 de profundidad se queda quieto.
+//!
+//! Es contenido puro de CPU: no toca GPU. La app aplica los cambios al grid
+//! (`set`/`clear`) y sube lo *dirty* con [`VoxelRenderer::sync`]
+//! (llimphi_3d::VoxelRenderer::sync). El paso es determinista (sin azar): mismas
+//! condiciones → misma evolución.
+
+use crate::ecuacion::{FieldDef, FieldEngine, Program};
+use llimphi_3d::VoxelGrid;
+
+const AIR: u8 = 0;
+const SOLID: u8 = 1;
+const WATER: u8 = 2;
+
+/// Un nuevo estado de una celda producido por [`WaterSim::step`]: `(pos, estado)`
+/// con `estado` ∈ {[`AIR`], [`WATER`]}. La app lo traduce a `clear`/`set` en el grid.
+pub type CellChange = ([u32; 3], u8);
+
+/// Estado de aire de una celda (para que el caller distinga sin exponer constantes).
+pub const CELL_AIR: u8 = AIR;
+/// Estado de agua de una celda.
+pub const CELL_WATER: u8 = WATER;
+
+/// Autómata celular del agua sobre la ocupación de un grid.
+pub struct WaterSim {
+    dim: [u32; 3],
+    /// Ocupación: 0 aire, 1 sólido (terreno), 2 agua.
+    occ: Vec<u8>,
+    /// Lock por celda dentro de un paso (evita mover dos veces / oscilar).
+    moved: Vec<bool>,
+    /// Índices tocados en el paso (para limpiar `moved` barato).
+    touched: Vec<usize>,
+    /// Fila de agua más alta (tope del escaneo; el agua nunca sube).
+    top: u32,
+    /// Alterna el orden de los vecinos cada paso (simetría).
+    parity: u32,
+    /// Parámetros de la ley Fluir. `gravedad` `[0,1]` = ritmo de caída (1 = cae cada
+    /// paso; menor = más viscoso, cae a tirones). `horizontal` `[0,1]` = ritmo de
+    /// esparcido lateral (0 = no se esparce → líquido espeso que se apila; 1 = se
+    /// esparce cada paso → líquido fino que se nivela).
+    gravedad: f32,
+    horizontal: f32,
+    /// Acumuladores deterministas que convierten los ritmos `[0,1]` en "actúa este
+    /// paso sí/no" sin azar (no hay `Math.random`).
+    g_acc: f32,
+    h_acc: f32,
+}
+
+impl WaterSim {
+    /// Clasifica un grid: las celdas cuyo color es exactamente `agua` son agua; el
+    /// resto de las sólidas, terreno. El agua del worldgen se pinta con el color de
+    /// paleta sin grano, así el match exacto la identifica.
+    pub fn from_grid(grid: &VoxelGrid, agua: [u8; 3]) -> Self {
+        Self::with_params(grid, agua, 1.0, 1.0)
+    }
+
+    /// Como [`from_grid`](Self::from_grid) pero con los parámetros de la ley Fluir
+    /// (`gravedad`, `horizontal`) que dicta el material líquido.
+    pub fn with_params(grid: &VoxelGrid, agua: [u8; 3], gravedad: f32, horizontal: f32) -> Self {
+        let dim = grid.dim();
+        let n = (dim[0] * dim[1] * dim[2]) as usize;
+        let mut occ = vec![AIR; n];
+        let mut top = 0u32;
+        for z in 0..dim[2] {
+            for y in 0..dim[1] {
+                for x in 0..dim[0] {
+                    if let Some(c) = grid.get(x, y, z) {
+                        if c[3] > 0 {
+                            let i = (x + y * dim[0] + z * dim[0] * dim[1]) as usize;
+                            if [c[0], c[1], c[2]] == agua {
+                                occ[i] = WATER;
+                                top = top.max(y);
+                            } else {
+                                occ[i] = SOLID;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        Self {
+            dim,
+            occ,
+            moved: vec![false; n],
+            touched: Vec::new(),
+            top,
+            parity: 0,
+            gravedad: gravedad.clamp(0.05, 1.0),
+            horizontal: horizontal.clamp(0.0, 1.0),
+            g_acc: 0.0,
+            h_acc: 0.0,
+        }
+    }
+
+    /// Cantidad de celdas de agua (conservada por `step`).
+    pub fn water_count(&self) -> usize {
+        self.occ.iter().filter(|&&c| c == WATER).count()
+    }
+
+    #[inline]
+    fn idx(&self, x: u32, y: u32, z: u32) -> usize {
+        (x + y * self.dim[0] + z * self.dim[0] * self.dim[1]) as usize
+    }
+
+    /// Ocupación en `(x,y,z)` con bordes: fuera en X/Z o bajo el piso = sólido
+    /// (muros + suelo); por encima del tope vertical = aire.
+    #[inline]
+    fn at(&self, x: i32, y: i32, z: i32) -> u8 {
+        if x < 0 || z < 0 || x >= self.dim[0] as i32 || z >= self.dim[2] as i32 || y < 0 {
+            return SOLID;
+        }
+        if y >= self.dim[1] as i32 {
+            return AIR;
+        }
+        self.occ[self.idx(x as u32, y as u32, z as u32)]
+    }
+
+    #[inline]
+    fn is_free(&self, x: i32, y: i32, z: i32) -> bool {
+        // Libre = aire dentro del grid (no muro, no agua, no tope).
+        x >= 0
+            && z >= 0
+            && y >= 0
+            && x < self.dim[0] as i32
+            && y < self.dim[1] as i32
+            && z < self.dim[2] as i32
+            && self.occ[self.idx(x as u32, y as u32, z as u32)] == AIR
+            && !self.moved[self.idx(x as u32, y as u32, z as u32)]
+    }
+
+    /// Avanza un paso del autómata. Devuelve las celdas que cambiaron de estado
+    /// (para subir sólo eso al grid). Lista vacía = el agua se asentó.
+    pub fn step(&mut self) -> Vec<CellChange> {
+        // Limpiar el lock del paso anterior.
+        for &i in &self.touched {
+            self.moved[i] = false;
+        }
+        self.touched.clear();
+        let mut changes: Vec<CellChange> = Vec::new();
+
+        // Ritmos → "actúa este paso" deterministas (acumulador, sin azar). Con
+        // gravedad/horizontal = 1 actúan siempre (comportamiento base); más bajos,
+        // a tirones → líquido más viscoso/espeso.
+        self.g_acc += self.gravedad;
+        let fall = self.g_acc >= 1.0;
+        if fall {
+            self.g_acc -= 1.0;
+        }
+        self.h_acc += self.horizontal;
+        let spread = self.h_acc >= 1.0;
+        if spread {
+            self.h_acc -= 1.0;
+        }
+
+        // Orden de vecinos horizontales, rotado por paridad (simetría).
+        let dirs0: [(i32, i32); 4] = [(1, 0), (-1, 0), (0, 1), (0, -1)];
+        let rot = (self.parity % 4) as usize;
+        let mut dirs = [(0, 0); 4];
+        for k in 0..4 {
+            dirs[k] = dirs0[(k + rot) % 4];
+        }
+
+        let top = self.top.min(self.dim[1] - 1);
+        for z in 0..self.dim[2] as i32 {
+            for y in 0..=top as i32 {
+                for x in 0..self.dim[0] as i32 {
+                    let i = self.idx(x as u32, y as u32, z as u32);
+                    if self.occ[i] != WATER || self.moved[i] {
+                        continue;
+                    }
+                    // 1) Caer: si abajo hay aire libre (gatea la gravedad).
+                    if fall && self.is_free(x, y - 1, z) {
+                        self.relocate(i, (x, y - 1, z), &mut changes);
+                        continue;
+                    }
+                    // El componente horizontal (diagonal y lateral) gatea por `spread`.
+                    if !spread {
+                        continue;
+                    }
+                    // 2) Caer en diagonal (flujo / cornisa → cascada): vecino libre
+                    //    cuya celda de abajo también está libre.
+                    let mut done = false;
+                    for (dx, dz) in dirs {
+                        if self.is_free(x + dx, y, z + dz) && self.at(x + dx, y - 1, z + dz) == AIR {
+                            self.relocate(i, (x + dx, y, z + dz), &mut changes);
+                            done = true;
+                            break;
+                        }
+                    }
+                    if done {
+                        continue;
+                    }
+                    // 3) Esparcir lateral SÓLO si hay carga (agua justo debajo): una
+                    //    torre se desploma en charco; un manto de 1 se queda quieto.
+                    if self.at(x, y - 1, z) == WATER {
+                        for (dx, dz) in dirs {
+                            if self.is_free(x + dx, y, z + dz) {
+                                self.relocate(i, (x + dx, y, z + dz), &mut changes);
+                                break;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        self.parity = self.parity.wrapping_add(1);
+        changes
+    }
+
+    /// Mueve el agua de `from` (índice) a `to` (coord), registrando los cambios y
+    /// bloqueando el destino para el resto del paso.
+    fn relocate(&mut self, from: usize, to: (i32, i32, i32), changes: &mut Vec<CellChange>) {
+        let (tx, ty, tz) = (to.0 as u32, to.1 as u32, to.2 as u32);
+        let ti = self.idx(tx, ty, tz);
+        self.occ[from] = AIR;
+        self.occ[ti] = WATER;
+        self.moved[ti] = true;
+        self.touched.push(ti);
+        // Posición de origen.
+        let fz = from as u32 / (self.dim[0] * self.dim[1]);
+        let rem = from as u32 % (self.dim[0] * self.dim[1]);
+        let fy = rem / self.dim[0];
+        let fx = rem % self.dim[0];
+        changes.push(([fx, fy, fz], AIR));
+        changes.push(([tx, ty, tz], WATER));
+    }
+}
+
+/// Simulación de la ley [`Crecer`](crate::LeyKind::Crecer): una planta (material con
+/// rol objeto) **crece de abajo hacia arriba** a su velocidad. Toma las celdas del
+/// objeto en el grid, las esconde, y las va revelando en orden de altura. La
+/// `velocidad` escala cuántas celdas se revelan por paso (a `1.0`, la planta entera
+/// brota en ~[`GROW_TICKS`] pasos sin importar su tamaño).
+pub struct GrowthSim {
+    /// Celdas de la planta `(pos, color)`, ordenadas por altura ascendente.
+    cells: Vec<([u32; 3], [u8; 3])>,
+    /// Cuántas reveladas hasta ahora.
+    idx: usize,
+    /// Acumulador de la tasa de revelado (determinista).
+    acc: f32,
+    /// Celdas reveladas por paso (derivada de la velocidad y el tamaño).
+    rate: f32,
+}
+
+/// Pasos en los que una planta crece del todo a velocidad `1.0` (~2 s a 30 fps).
+pub const GROW_TICKS: f32 = 60.0;
+
+impl GrowthSim {
+    /// Junta las celdas del color de la planta y las ordena por altura. `velocidad`
+    /// viene de la ley Crecer del material.
+    pub fn from_grid(grid: &VoxelGrid, planta: [u8; 3], velocidad: f32) -> Self {
+        let dim = grid.dim();
+        let mut cells = Vec::new();
+        for z in 0..dim[2] {
+            for y in 0..dim[1] {
+                for x in 0..dim[0] {
+                    if let Some(c) = grid.get(x, y, z) {
+                        if c[3] > 0 && [c[0], c[1], c[2]] == planta {
+                            cells.push(([x, y, z], planta));
+                        }
+                    }
+                }
+            }
+        }
+        // Orden por altura (y), luego x,z para determinismo.
+        cells.sort_by_key(|(p, _)| (p[1], p[0], p[2]));
+        let len = cells.len().max(1) as f32;
+        let rate = (velocidad.max(0.0) * len / GROW_TICKS).max(0.05);
+        Self { cells, idx: 0, acc: 0.0, rate }
+    }
+
+    /// Las celdas de la planta (para esconderlas al arrancar el crecimiento).
+    pub fn cells(&self) -> &[([u32; 3], [u8; 3])] {
+        &self.cells
+    }
+
+    /// `true` si la planta ya terminó de crecer.
+    pub fn done(&self) -> bool {
+        self.idx >= self.cells.len()
+    }
+
+    /// Revela el siguiente lote de celdas (según la velocidad). Devuelve las celdas a
+    /// dibujar este paso `(pos, color)`. Vacío cuando ya creció del todo.
+    pub fn step(&mut self) -> Vec<([u32; 3], [u8; 3])> {
+        if self.done() {
+            return Vec::new();
+        }
+        self.acc += self.rate;
+        let n = self.acc.floor() as usize;
+        self.acc -= n as f32;
+        let mut out = Vec::new();
+        for _ in 0..n {
+            if self.idx < self.cells.len() {
+                out.push(self.cells[self.idx]);
+                self.idx += 1;
+            }
+        }
+        out
+    }
+}
+
+/// Simulación de una ley [`Ecuacion`](crate::LeyKind::Ecuacion) **sobre un material
+/// real del mundo**: corre el sistema de ecuaciones de campo en las celdas del material
+/// y las **recolorea** por el valor del campo visible — el material queda donde está,
+/// "vivo" según su ecuación (a diferencia de [`WaterSim`], que mueve celdas).
+///
+/// Clasifica las celdas por **proximidad de color** al color base (± `tol` por canal),
+/// para alcanzar también materiales con *grano* (el terreno varía su color; el agua no).
+/// Materiales de color parecido pueden mezclarse — es una aproximación de preview.
+pub struct EcuacionSim {
+    engine: FieldEngine,
+    /// Celdas del material (posición fija; se clasifican una vez).
+    cells: Vec<[u32; 3]>,
+    /// Color base del material (para modular el brillo).
+    base: [u8; 3],
+    /// Campo que tiñe el color.
+    vis: usize,
+    /// Rango del campo visible (para normalizar).
+    fmin: f32,
+    fmax: f32,
+    /// Último color emitido por celda (para subir sólo lo que cambió).
+    last: Vec<[u8; 3]>,
+}
+
+impl EcuacionSim {
+    /// Clasifica las celdas cercanas a `material` (± `tol` por canal), arma el motor de
+    /// campo sobre el grid y siembra una perturbación determinista por celda (para que
+    /// la ecuación arranque con estructura). `vis` es el campo que se pinta.
+    pub fn from_grid(
+        grid: &VoxelGrid,
+        material: [u8; 3],
+        tol: i32,
+        campos: Vec<FieldDef>,
+        vis: usize,
+    ) -> Self {
+        let dim = grid.dim();
+        let mut cells = Vec::new();
+        for z in 0..dim[2] {
+            for y in 0..dim[1] {
+                for x in 0..dim[0] {
+                    if let Some(c) = grid.get(x, y, z) {
+                        if c[3] > 0 && cerca([c[0], c[1], c[2]], material, tol) {
+                            cells.push([x, y, z]);
+                        }
+                    }
+                }
+            }
+        }
+        let vis = vis.min(campos.len().saturating_sub(1));
+        let (fmin, fmax) = campos.get(vis).map(|d| (d.min, d.max)).unwrap_or((0.0, 1.0));
+        let mut engine = FieldEngine::new(dim, campos);
+        let nf = engine.fields().len();
+        for &[x, y, z] in &cells {
+            for f in 0..nf {
+                let (mn, mx) = {
+                    let d = &engine.fields()[f];
+                    (d.min, d.max)
+                };
+                let h = hash01(x, y, z, f as u32);
+                engine.set(f as u16, x, y, z, mn + h * 0.6 * (mx - mn));
+            }
+        }
+        let last = vec![[0u8; 3]; cells.len()];
+        Self { engine, cells, base: material, vis, fmin, fmax, last }
+    }
+
+    /// Cantidad de celdas del material clasificadas.
+    pub fn cell_count(&self) -> usize {
+        self.cells.len()
+    }
+
+    /// Avanza un paso del campo y devuelve las celdas cuyo **color cambió**
+    /// `(pos, color)`, para subir sólo eso a la GPU. El color modula el brillo del
+    /// color base por el valor normalizado del campo visible (preserva el tono).
+    pub fn step(&mut self, program: &Program, params: &[f32]) -> Vec<([u32; 3], [u8; 3])> {
+        self.engine.step(program, params, 1.0);
+        let span = (self.fmax - self.fmin).max(1e-6);
+        let mut out = Vec::new();
+        for (i, &[x, y, z]) in self.cells.iter().enumerate() {
+            let t = ((self.engine.get(self.vis as u16, x, y, z) - self.fmin) / span).clamp(0.0, 1.0);
+            let k = 0.35 + 0.65 * t;
+            let col = [
+                (self.base[0] as f32 * k) as u8,
+                (self.base[1] as f32 * k) as u8,
+                (self.base[2] as f32 * k) as u8,
+            ];
+            if col != self.last[i] {
+                self.last[i] = col;
+                out.push(([x, y, z], col));
+            }
+        }
+        out
+    }
+}
+
+/// `true` si `c` está a ≤ `tol` de `base` en los tres canales.
+fn cerca(c: [u8; 3], base: [u8; 3], tol: i32) -> bool {
+    (c[0] as i32 - base[0] as i32).abs() <= tol
+        && (c[1] as i32 - base[1] as i32).abs() <= tol
+        && (c[2] as i32 - base[2] as i32).abs() <= tol
+}
+
+/// Hash determinista → `[0,1)` de una celda + índice de campo (sin azar; para sembrar).
+fn hash01(x: u32, y: u32, z: u32, f: u32) -> f32 {
+    let mut h = x
+        .wrapping_mul(0x9E37_79B1)
+        ^ y.wrapping_mul(0x85EB_CA77)
+        ^ z.wrapping_mul(0xC2B2_AE3D)
+        ^ f.wrapping_mul(0x27D4_EB2F);
+    h ^= h >> 15;
+    h = h.wrapping_mul(0x2C1B_3C6D);
+    h ^= h >> 12;
+    (h & 0x00FF_FFFF) as f32 / (0x0100_0000 as f32)
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use crate::Material;
+
+    /// Grid con piso sólido y un poco de agua arriba, en una columna.
+    fn grid_con_columna(dim: [u32; 3], agua: [u8; 3], col_x: u32, col_z: u32, altura: u32) -> VoxelGrid {
+        let mut g = VoxelGrid::new(dim);
+        // Piso en y=0.
+        for z in 0..dim[2] {
+            for x in 0..dim[0] {
+                g.set(x, 0, z, Material::Rock.color());
+            }
+        }
+        // Columna de agua sobre el piso.
+        for k in 0..altura {
+            g.set(col_x, 1 + k, col_z, agua);
+        }
+        g.reset_dirty();
+        g
+    }
+
+    #[test]
+    fn ecuacion_sim_clasifica_y_recolorea() {
+        use crate::ecuacion::{Assign, Expr, FieldDef, Program, Symbols};
+        // Grid con un parche plano de un material (color exacto, como el agua).
+        let dim = [12, 1, 12];
+        let mut g = VoxelGrid::new(dim);
+        let mat = [120, 160, 80];
+        for z in 3..9 {
+            for x in 3..9 {
+                g.set(x, 0, z, mat);
+            }
+        }
+        g.reset_dirty();
+        let sym = Symbols { campos: vec!["t".into()], params: vec!["k".into()] };
+        let e = Expr::parse("k * lap(t)", &sym).unwrap();
+        let prog = Program::compile(&[Assign { campo: 0, expr: e }]);
+        let mut sim = EcuacionSim::from_grid(&g, mat, 8, vec![FieldDef::new("t", 0.0, 0.0, 1.0)], 0);
+        assert_eq!(sim.cell_count(), 36, "clasificó el parche 6×6");
+        let mut changed = 0;
+        for _ in 0..30 {
+            changed += sim.step(&prog, &[0.2]).len();
+        }
+        assert!(changed > 0, "la ecuación recoloreó celdas del material");
+    }
+
+    #[test]
+    fn el_agua_cae_hasta_el_piso() {
+        let agua = Material::Water.color();
+        let dim = [8, 16, 8];
+        let mut g = VoxelGrid::new(dim);
+        for z in 0..dim[2] {
+            for x in 0..dim[0] {
+                g.set(x, 0, z, Material::Rock.color());
+            }
+        }
+        g.set(3, 10, 3, agua); // una gota flotando
+        g.reset_dirty();
+        let mut sim = WaterSim::from_grid(&g, agua);
+        assert_eq!(sim.water_count(), 1);
+        for _ in 0..30 {
+            sim.step();
+        }
+        // La gota terminó descansando sobre el piso (y=1) — no flotando.
+        assert_eq!(sim.water_count(), 1, "no se pierde ni duplica agua");
+        assert_eq!(sim.at(3, 1, 3), CELL_WATER, "el agua quedó sobre el piso");
+        assert_eq!(sim.at(3, 10, 3), CELL_AIR, "ya no flota");
+    }
+
+    #[test]
+    fn la_columna_se_esparce_y_se_asienta() {
+        let agua = Material::Water.color();
+        let dim = [16, 20, 16];
+        let g = grid_con_columna(dim, agua, 8, 8, 10); // torre de 10 de agua
+        let mut sim = WaterSim::from_grid(&g, agua);
+        let n0 = sim.water_count();
+
+        let mut last_changes = 1;
+        let mut steps = 0;
+        while last_changes > 0 && steps < 2000 {
+            last_changes = sim.step().len();
+            steps += 1;
+        }
+        // Conserva masa y converge (deja de moverse) en tiempo finito.
+        assert_eq!(sim.water_count(), n0, "masa conservada");
+        assert!(steps < 2000, "se asentó (sin slosh perpetuo) en {steps} pasos");
+
+        // Se esparció: el charco final es más ancho que la columna inicial (1 celda).
+        let mut ancho = 0;
+        for x in 0..dim[0] as i32 {
+            if sim.at(x, 1, 8) == CELL_WATER {
+                ancho += 1;
+            }
+        }
+        assert!(ancho > 1, "el agua se esparció horizontalmente (ancho={ancho})");
+    }
+
+    #[test]
+    fn horizontal_cero_no_se_esparce_espeso() {
+        // Líquido espeso (horizontal=0): cae pero NO se esparce → se apila en columna.
+        let agua = Material::Water.color();
+        let dim = [16, 20, 16];
+        let g = grid_con_columna(dim, agua, 8, 8, 10);
+        let mut sim = WaterSim::with_params(&g, agua, 1.0, 0.0);
+        for _ in 0..200 {
+            sim.step();
+        }
+        let mut ancho = 0;
+        for x in 0..dim[0] as i32 {
+            if sim.at(x, 1, 8) == CELL_WATER {
+                ancho += 1;
+            }
+        }
+        assert_eq!(ancho, 1, "sin componente horizontal el líquido no se esparce");
+    }
+
+    #[test]
+    fn la_planta_crece_de_abajo_hacia_arriba() {
+        // Una columna de "planta" (color cactus) de 6 de alto sobre un piso.
+        let planta = Material::Cactus.color();
+        let dim = [8, 16, 8];
+        let mut g = VoxelGrid::new(dim);
+        for k in 0..6 {
+            g.set(4, 1 + k, 4, planta);
+        }
+        g.reset_dirty();
+        let mut sim = GrowthSim::from_grid(&g, planta, 1.0);
+        assert_eq!(sim.cells().len(), 6);
+
+        // Revelar paso a paso: cada celda nueva está a una altura >= la anterior.
+        let mut revealed: Vec<u32> = Vec::new();
+        let mut steps = 0;
+        while !sim.done() && steps < 1000 {
+            for (pos, _) in sim.step() {
+                revealed.push(pos[1]);
+            }
+            steps += 1;
+        }
+        assert_eq!(revealed.len(), 6, "se revelaron todas las celdas");
+        // Monótono creciente en altura (crece hacia arriba).
+        assert!(revealed.windows(2).all(|w| w[0] <= w[1]), "crece de abajo hacia arriba: {revealed:?}");
+        assert_eq!(revealed[0], 1, "empieza por la base");
+    }
+
+    #[test]
+    fn cae_por_una_cornisa_cascada() {
+        // Una repisa (escalón) con agua arriba: debe caer por el borde.
+        let agua = Material::Water.color();
+        let dim = [16, 16, 8];
+        let mut g = VoxelGrid::new(dim);
+        // Piso bajo en y=0 en todo; una repisa sólida en y=1..=5 sobre la mitad x<8.
+        for z in 0..dim[2] {
+            for x in 0..dim[0] {
+                g.set(x, 0, z, Material::Rock.color());
+            }
+        }
+        for z in 0..dim[2] {
+            for x in 0..8 {
+                for y in 1..=5 {
+                    g.set(x, y, z, Material::Rock.color());
+                }
+            }
+        }
+        // Agua sobre la repisa, cerca del borde (x=7).
+        for z in 0..dim[2] {
+            g.set(7, 6, z, agua);
+        }
+        g.reset_dirty();
+        let mut sim = WaterSim::from_grid(&g, agua);
+        let n0 = sim.water_count();
+        for _ in 0..60 {
+            sim.step();
+        }
+        assert_eq!(sim.water_count(), n0, "masa conservada al caer");
+        // Algo de agua llegó al piso bajo (y=1) del lado sin repisa (x>=8).
+        let mut llego_abajo = false;
+        for z in 0..dim[2] as i32 {
+            for x in 8..dim[0] as i32 {
+                if sim.at(x, 1, z) == CELL_WATER {
+                    llego_abajo = true;
+                }
+            }
+        }
+        assert!(llego_abajo, "el agua cayó por la cornisa hasta el nivel bajo");
+    }
+}
diff --git a/llimphi-voxel/src/studio.rs b/llimphi-voxel/src/studio.rs
index 316b3a4..9ea3c19 100644
--- a/llimphi-voxel/src/studio.rs
+++ b/llimphi-voxel/src/studio.rs
@@ -11,10 +11,17 @@
 use serde::{Deserialize, Serialize};
 
 use crate::actor::{Actor, Age, Clip};
+use crate::humano::{humanoide_voxel, Colores, EstiloSer};
+use llimphi_3d::VoxelGrid;
 use crate::director::{ActorKey, ActorScript};
-use crate::worldgen::WorldRecipe;
-use llimphi_3d::glam::Vec3;
-use llimphi_3d::Camera3d;
+use crate::conducta::Conducta;
+use crate::ecuacion::{Assign, Expr, FieldDef, Program, Symbols};
+use crate::casa::{CasaTipo, CasaUso};
+use crate::mineral::{Mineral, MineralUso};
+use crate::rig::{Andar, Movimiento, Rig};
+use crate::worldgen::{Bioma, BiomaPalette, Forma, Material, ResolvedMaterial};
+use llimphi_3d::glam::{Mat4, Vec3};
+use llimphi_3d::{Camera3d, Vertex3d};
 
 /// Dimensión por defecto de la grilla con la que el editor previsualiza un mundo
 /// (cúbica en XZ, alto = 0.4·lado, mínimo 48) — el mismo criterio que la app.
@@ -32,17 +39,384 @@ pub fn world_dim(xz: u32) -> [u32; 3] {
     [xz, dy, xz]
 }
 
-/// Un **mundo nombrado** del proyecto: nombre + su [`WorldRecipe`].
-#[derive(Debug, Clone, Serialize, Deserialize)]
-pub struct NamedWorld {
-    pub name: String,
-    pub recipe: WorldRecipe,
+/// **Paso de reubicación** de la ventana de una escena (voxels). El origen sólo
+/// salta a múltiplos de este valor: así la ventana no se regenera cada cuadro al
+/// caminar el reparto, sólo al cruzar un paso. Como la cámara mira al centroide del
+/// reparto (en espacio de ventana), el salto traslada terreno + cámara + actores
+/// **juntos** → sin pop visible (la imagen es continua), pero el mundo no tiene
+/// borde: el reparto puede caminar indefinidamente. Ver [`window_origin_for_cast`].
+pub const SCENE_WINDOW_STEP: i32 = 16;
+
+/// Redondea `v` al múltiplo de `step` hacia abajo (floor con signo) — espeja el
+/// `snap` del [`WorldStream`](crate::WorldStream).
+#[inline]
+fn snap(v: i32, step: i32) -> i32 {
+    v.div_euclid(step) * step
 }
 
-impl NamedWorld {
-    pub fn new(name: impl Into<String>, recipe: WorldRecipe) -> Self {
-        Self { name: name.into(), recipe }
+/// **Origen de ventana (esquina, coords de mundo) que centra al reparto** de una
+/// escena en el instante `t`: promedia las columnas `(gx, gz)` de los guiones
+/// (tomadas en su tiempo cuantizado, igual que al posar) y resta medio `dim`,
+/// snappeado a [`SCENE_WINDOW_STEP`]. Es lo que hace que **toda escena viva en un
+/// mundo infinito**: la ventana voxel sigue al reparto en vez de ser una caja fija
+/// centrada en el origen. Sin reparto, devuelve `[0, 0]` (mundo centrado, como
+/// antes).
+pub fn window_origin_for_cast(scripts: &[ActorScript], t: f32, dim: [u32; 3]) -> [i32; 2] {
+    if scripts.is_empty() {
+        return [0, 0];
     }
+    let (mut cwx, mut cwz) = (0.0_f32, 0.0_f32);
+    for s in scripts {
+        let smp = s.sample(s.quantize(t));
+        cwx += smp.gx;
+        cwz += smp.gz;
+    }
+    let n = scripts.len() as f32;
+    let (cwx, cwz) = (cwx / n, cwz / n);
+    [
+        snap(cwx as i32 - dim[0] as i32 / 2, SCENE_WINDOW_STEP),
+        snap(cwz as i32 - dim[2] as i32 / 2, SCENE_WINDOW_STEP),
+    ]
+}
+
+// =============================================================================
+//  Nivel 1 — Leyes (físicas / comportamientos)
+// =============================================================================
+
+/// Un **parámetro autorado** de una ley [`Ecuacion`](LeyKind::Ecuacion): nombre (que
+/// la fórmula referencia), valor y rango (para el slider). Es el equivalente dinámico
+/// de los `(nombre, valor, min, max)` cableados de `Fluir`/`Crecer`.
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub struct ParamDef {
+    pub name: String,
+    pub value: f32,
+    pub min: f32,
+    pub max: f32,
+}
+
+impl ParamDef {
+    pub fn new(name: impl Into<String>, value: f32, min: f32, max: f32) -> Self {
+        Self { name: name.into(), value, min, max }
+    }
+}
+
+/// **Tipo de ley** (comportamiento matemático). Enum extensible: `Fluir` (líquidos,
+/// autómata nativo que mueve celdas) y `Crecer` (flora) son leyes **nativas** con
+/// runtime cableado; `Ecuacion` es la ley **autorable** — un sistema de ecuaciones de
+/// campo escrito por el usuario y compilado (ver [`crate::ecuacion`]). Cada variante
+/// nativa expone sus parámetros editables vía [`params`](Self::params) para que la UI
+/// arme sliders; la `Ecuacion` declara sus propios campos y parámetros.
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub enum LeyKind {
+    /// Líquido: se esparce a vecinos en horizontal y cae con gravedad (cascadas).
+    Fluir { gravedad: f32, horizontal: f32 },
+    /// Crece a una velocidad VARIABLE (flora).
+    Crecer { velocidad: f32 },
+    /// **Ley autorable**: campos de estado + parámetros + una ecuación
+    /// `Δcampoₖ/dt = fuenteₖ` por campo (misma cantidad y orden que `campos`). El
+    /// texto `fuentes[k]` se parsea con los nombres de `campos`/`params`. Generaliza
+    /// difusión, reacción‑difusión, calor, crecimiento… con la misma máquina.
+    Ecuacion {
+        campos: Vec<FieldDef>,
+        params: Vec<ParamDef>,
+        fuentes: Vec<String>,
+    },
+}
+
+impl LeyKind {
+    /// Un ejemplar de cada tipo, con valores por defecto (para crear/ciclar).
+    pub fn all_defaults() -> Vec<LeyKind> {
+        vec![
+            LeyKind::Fluir { gravedad: 1.0, horizontal: 0.6 },
+            LeyKind::Crecer { velocidad: 1.0 },
+            LeyKind::ecuacion_default(),
+        ]
+    }
+
+    /// Ley autorable por defecto: **difusión** de un campo `c` (`Δc/dt = k·lap(c)`).
+    /// El punto de partida más simple que ya *hace algo* visible en el laboratorio.
+    pub fn ecuacion_default() -> LeyKind {
+        LeyKind::Ecuacion {
+            campos: vec![FieldDef::new("c", 0.0, 0.0, 1.0)],
+            params: vec![ParamDef::new("k", 0.15, 0.0, 0.25)],
+            fuentes: vec!["k * lap(c)".to_string()],
+        }
+    }
+
+    /// Nombre legible (español).
+    pub fn label(&self) -> &'static str {
+        match self {
+            LeyKind::Fluir { .. } => "fluir",
+            LeyKind::Crecer { .. } => "crecer",
+            LeyKind::Ecuacion { .. } => "ecuación",
+        }
+    }
+
+    /// El tipo siguiente (cicla por los defaults), preservando nada (resetea params).
+    pub fn next(&self) -> LeyKind {
+        let all = Self::all_defaults();
+        let i = all.iter().position(|k| k.label() == self.label()).unwrap_or(0);
+        all[(i + 1) % all.len()].clone()
+    }
+
+    /// Parámetros editables: `(nombre, valor, min, max)`. La UI arma un slider por cada.
+    pub fn params(&self) -> Vec<(&'static str, f32, f32, f32)> {
+        match self {
+            LeyKind::Fluir { gravedad, horizontal } => vec![
+                ("gravedad", *gravedad, 0.0, 1.0),
+                ("horizontal", *horizontal, 0.0, 1.0),
+            ],
+            LeyKind::Crecer { velocidad } => vec![("velocidad", *velocidad, 0.0, 5.0)],
+            // La `Ecuacion` tiene parámetros dinámicos (nombres `String`): no caben en
+            // esta firma `&'static str`; la UI los edita vía [`ecuacion_params`].
+            LeyKind::Ecuacion { .. } => vec![],
+        }
+    }
+
+    /// Fija el parámetro `i` (en el orden de [`params`](Self::params)) a `v`.
+    pub fn set_param(&mut self, i: usize, v: f32) {
+        match self {
+            LeyKind::Fluir { gravedad, horizontal } => match i {
+                0 => *gravedad = v,
+                1 => *horizontal = v,
+                _ => {}
+            },
+            LeyKind::Crecer { velocidad } => {
+                if i == 0 {
+                    *velocidad = v;
+                }
+            }
+            // Para `Ecuacion` se usa [`set_ecuacion_param`] (params dinámicos).
+            LeyKind::Ecuacion { .. } => {}
+        }
+    }
+
+    // --- Autoría de leyes por ecuación -------------------------------------
+
+    /// Parámetros de una ley `Ecuacion` como `(nombre, valor, min, max)` para armar
+    /// sliders. Vacío si no es una `Ecuacion`.
+    pub fn ecuacion_params(&self) -> Vec<(String, f32, f32, f32)> {
+        match self {
+            LeyKind::Ecuacion { params, .. } => {
+                params.iter().map(|p| (p.name.clone(), p.value, p.min, p.max)).collect()
+            }
+            _ => Vec::new(),
+        }
+    }
+
+    /// Valores de los parámetros de la `Ecuacion` en orden (los que consume el motor).
+    pub fn ecuacion_param_values(&self) -> Vec<f32> {
+        match self {
+            LeyKind::Ecuacion { params, .. } => params.iter().map(|p| p.value).collect(),
+            _ => Vec::new(),
+        }
+    }
+
+    /// Fija el valor del parámetro `i` de una ley `Ecuacion` (clampeado a su rango).
+    pub fn set_ecuacion_param(&mut self, i: usize, v: f32) {
+        if let LeyKind::Ecuacion { params, .. } = self {
+            if let Some(p) = params.get_mut(i) {
+                p.value = v.clamp(p.min, p.max);
+            }
+        }
+    }
+
+    /// Tabla de símbolos (campos + params por nombre) para parsear/imprimir sus
+    /// fórmulas. `None` si no es una `Ecuacion`.
+    pub fn ecuacion_symbols(&self) -> Option<Symbols> {
+        match self {
+            LeyKind::Ecuacion { campos, params, .. } => Some(Symbols {
+                campos: campos.iter().map(|c| c.name.clone()).collect(),
+                params: params.iter().map(|p| p.name.clone()).collect(),
+            }),
+            _ => None,
+        }
+    }
+
+    /// Compila una ley `Ecuacion` a un [`Program`] ejecutable: parsea cada fuente con
+    /// los símbolos de la ley y arma un `Δcampoₖ/dt` por campo. `None` si no es
+    /// `Ecuacion`; `Err(msg)` con el primer error de parseo (legible, ubicando el campo).
+    pub fn compile_ecuacion(&self) -> Option<Result<Program, String>> {
+        let LeyKind::Ecuacion { campos, fuentes, .. } = self else {
+            return None;
+        };
+        let sym = self.ecuacion_symbols()?;
+        let mut asignaciones = Vec::with_capacity(fuentes.len());
+        for (i, src) in fuentes.iter().enumerate() {
+            match Expr::parse(src, &sym) {
+                Ok(expr) => asignaciones.push(Assign { campo: i as u16, expr }),
+                Err(err) => {
+                    let campo = campos.get(i).map(|c| c.name.as_str()).unwrap_or("?");
+                    return Some(Err(format!("campo «{campo}»: {err}")));
+                }
+            }
+        }
+        Some(Ok(Program::compile(&asignaciones)))
+    }
+}
+
+/// Una **Ley**: nombre + tipo (con sus parámetros). El nivel más básico de la
+/// composición; los materiales la adoptan vía [`LeyUso`].
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct Ley {
+    pub id: u64,
+    pub name: String,
+    pub kind: LeyKind,
+}
+
+// =============================================================================
+//  Nivel 2 — Materiales
+// =============================================================================
+
+/// **Rol de un material**: relleno de terreno o un objeto colocable (con su forma).
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize)]
+pub enum MatRole {
+    /// Relleno del terreno (suelo, acantilado, cumbre…).
+    Terreno,
+    /// Objeto colocado sobre el suelo (cactus, árbol, roca suelta…).
+    Objeto(Forma),
+}
+
+impl MatRole {
+    pub fn label(&self) -> &'static str {
+        match self {
+            MatRole::Terreno => "terreno",
+            MatRole::Objeto(_) => "objeto",
+        }
+    }
+}
+
+/// **Uso de una ley por un material**: a qué ley refiere y con qué parámetros
+/// concretos (overridean los defaults de la ley — «espesor del líquido», etc.).
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct LeyUso {
+    pub ley: u64,
+    pub params: Vec<f32>,
+}
+
+/// Un **material autorable**: color/grano (texturas a futuro) + rol + leyes
+/// aplicadas, con **herencia viva por padre**. Los campos visuales son `Option`:
+/// `None` = heredar del padre (o del builtin). [`Project::resolve_material`] aplana
+/// la cadena. Así «cactus amarillo» = hijo de «cactus verde» que sólo redefine el
+/// color.
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct MaterialDef {
+    pub id: u64,
+    pub name: String,
+    /// Material del que hereda lo no redefinido (`None` = raíz).
+    #[serde(default)]
+    pub parent: Option<u64>,
+    pub role: MatRole,
+    /// Color `[r,g,b]` en `[0,1]`; `None` = heredar.
+    #[serde(default)]
+    pub color: Option<[f32; 3]>,
+    /// Grano de materia `[0,1]`; `None` = heredar.
+    #[serde(default)]
+    pub grain: Option<f32>,
+    /// Brillo/reflectividad `[0,1]`; `None` = heredar (del padre o del builtin).
+    #[serde(default)]
+    pub brillo: Option<f32>,
+    /// **Rugosidad sub-voxel** `[0,~1.5]` (bump procedural): rompe la cara plana del
+    /// voxel a corta distancia. `None` = heredar (default efectivo 0 = liso). Es un
+    /// look GLOBAL del ray-march; el preview aplica el del material en foco (ver
+    /// `Project::detalle_material`). Roca alta, metal 0.
+    #[serde(default)]
+    pub rugosidad: Option<f32>,
+    /// **Bisel sub-voxel** `[0,1]` (suavizado por isosuperficie): pendientes
+    /// diagonales y esquinas biseladas. `None` = heredar (default 0 = voxel duro).
+    /// También look global del preview.
+    #[serde(default)]
+    pub bisel: Option<f32>,
+    /// Leyes que adopta, con sus parámetros.
+    #[serde(default)]
+    pub leyes: Vec<LeyUso>,
+    /// Tag de paleta semilla (de fábrica): deja que la IA/preset encuentre «la
+    /// arena» sin clavar un id. `None` en materiales hechos por el usuario.
+    #[serde(default)]
+    pub builtin: Option<Material>,
+}
+
+impl MaterialDef {
+    /// Material de fábrica a partir de una variante semilla (color/grano/rol).
+    pub fn from_builtin(id: u64, m: Material) -> Self {
+        let role = match m {
+            Material::Cactus => MatRole::Objeto(Forma::Columnar),
+            Material::Leaf => MatRole::Objeto(Forma::Arbol),
+            Material::Wheat => MatRole::Objeto(Forma::Trigo),
+            Material::Bloom => MatRole::Objeto(Forma::Lavanda),
+            _ => MatRole::Terreno,
+        };
+        let c = m.color();
+        Self {
+            id,
+            name: m.label().to_string(),
+            parent: None,
+            role,
+            color: Some([c[0] as f32 / 255.0, c[1] as f32 / 255.0, c[2] as f32 / 255.0]),
+            grain: Some(m.grain()),
+            brillo: None, // hereda del builtin (Material::brillo)
+            rugosidad: None,
+            bisel: None,
+            leyes: Vec::new(),
+            builtin: Some(m),
+        }
+    }
+}
+
+// =============================================================================
+//  Nivel 5 — Mundos
+// =============================================================================
+
+/// Un **Mundo**: semilla + uno o más biomas. La semilla es lo único «numérico» que
+/// el usuario teclea (con botón de random en la UI). El stage 1 genera con el primer
+/// bioma; la distribución multi-bioma queda como refinamiento.
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct Mundo {
+    pub id: u64,
+    pub name: String,
+    pub seed: u32,
+    #[serde(default)]
+    pub biomas: Vec<u64>,
+    /// **Fuente de mapa real** (si el mundo se importó de un GeoJSON): persiste la
+    /// receta, no el grid. `None` = mundo procedural (bioma+semilla). Ver
+    /// [`MapaFuente`].
+    #[serde(default)]
+    pub mapa: Option<MapaFuente>,
+}
+
+/// **Fuente de un mundo importado de un mapa real**, persistible dentro del
+/// [`Project`]. Guarda el GeoJSON del visor (y un DEM `.pgm` opcional) **embebidos**
+/// —el documento queda autocontenido— para que el grid se **regenere** al abrir (un
+/// mundo es una receta, no un grid). El puente que lo materializa a `VoxelGrid` vive
+/// en el frontend (`nahual-geo-voxel`), no en este core: aquí sólo son datos.
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct MapaFuente {
+    /// GeoJSON crudo (una `FeatureCollection`) del mapa.
+    pub geojson: String,
+    /// DEM opcional (PGM binario P5) embebido; `None` = sin relieve por esta vía.
+    #[serde(default)]
+    pub pgm: Option<Vec<u8>>,
+    /// DEM opcional en **GeoTIFF** (`.tif`) embebido — georreferenciado por sí mismo
+    /// (tiene prioridad sobre `pgm`). `None` = sin relieve por esta vía.
+    #[serde(default)]
+    pub dem_tif: Option<Vec<u8>>,
+    /// Rango de altura `[0, rango]` (metros) al que se mapea el DEM **PGM** (el
+    /// GeoTIFF trae sus metros absolutos, no usa esto).
+    #[serde(default = "default_rango_dem")]
+    pub rango_dem_m: f32,
+}
+
+fn default_rango_dem() -> f32 {
+    300.0
+}
+
+/// Lo que el render necesita de un mundo: el bioma (relieve), la semilla y la paleta
+/// **ya resuelta** (colores concretos). Lo arma [`Project::render_mundo`].
+#[derive(Debug, Clone)]
+pub struct MundoRender {
+    pub bioma: Bioma,
+    pub seed: u32,
+    pub palette: BiomaPalette,
 }
 
 /// **Especificación serializable de un personaje**: lo que un editor/IA fija (edad
@@ -50,18 +424,108 @@ impl NamedWorld {
 /// posable. Los colores son `[r, g, b]` en `[0,1]` (como [`Actor`]).
 #[derive(Debug, Clone, Serialize, Deserialize)]
 pub struct CharSpec {
+    /// Id estable (asignado por el [`Project`]); `0` hasta que se agrega.
+    #[serde(default)]
+    pub id: u64,
     pub name: String,
     pub age: Age,
     pub skin: [f32; 3],
     pub shirt: [f32; 3],
     pub pants: [f32; 3],
+    /// **Pelo** `[r,g,b]` en `[0,1]`. `None` = derivado de la piel; `Some` = color explícito
+    /// (p.ej. muestreado FIEL de una foto). Serde default para compat con proyectos viejos.
+    #[serde(default)]
+    pub hair: Option<[f32; 3]>,
+    /// **Cuerpo**: `None` = humanoide (muñeco [`Actor`] rico: cara, gestos, cross-fade,
+    /// look-at); `Some(mov)` = una morfología arbitraria ([`Movimiento`]: rig +
+    /// andares por estado) — cuadrúpedo, ave, serpiente… Default `None` (compat).
+    #[serde(default)]
+    pub cuerpo: Option<Movimiento>,
+    /// **Conducta** (capa 3): cómo se mueve por el mundo (deambular/gregario/miedo).
+    /// Aplica a cualquier cuerpo (humanoide o rig).
+    #[serde(default)]
+    pub conducta: Conducta,
 }
 
 impl CharSpec {
     /// Un personaje con la paleta por defecto de [`Actor::new`] a la edad dada.
+    /// `id = 0` hasta que el [`Project`] se lo asigna al agregarlo.
     pub fn new(name: impl Into<String>, age: Age) -> Self {
         let a = Actor::new(Vec3::ZERO, 0.0);
-        Self { name: name.into(), age, skin: a.skin, shirt: a.shirt, pants: a.pants }
+        Self {
+            id: 0,
+            name: name.into(),
+            age,
+            skin: a.skin,
+            shirt: a.shirt,
+            pants: a.pants,
+            hair: None,
+            cuerpo: None,
+            conducta: Conducta::default(),
+        }
+    }
+
+    /// Nombre legible del cuerpo (para la UI).
+    pub fn cuerpo_label(&self) -> &str {
+        match &self.cuerpo {
+            None => "humanoide",
+            Some(m) => m.rig.nombre.as_str(),
+        }
+    }
+
+    /// Cicla el cuerpo: humanoide → cuadrúpedo → ave → serpiente → humanoide. Al
+    /// cambiar de rig, regenera andares por defecto (siempre en sync con la morfología).
+    pub fn cycle_cuerpo(&mut self) {
+        let presets = Rig::presets();
+        self.cuerpo = match &self.cuerpo {
+            None => Some(Movimiento::preset(presets[1].clone())), // humanoide → cuadrúpedo
+            Some(m) => {
+                let i = presets.iter().position(|p| p.nombre == m.rig.nombre).unwrap_or(0);
+                if i + 1 < presets.len() {
+                    Some(Movimiento::preset(presets[i + 1].clone()))
+                } else {
+                    None // serpiente → humanoide
+                }
+            }
+        };
+    }
+
+    /// **Meta de render** del ser en `pos`/`facing` para una animación: la matriz de
+    /// modelo + la malla. Humanoide (`rig = None`) usa el [`Actor`] rico (clip, fase,
+    /// look-at); un rig usa su [`Andar::caminar`] al andar (Walk/Run) o pose neutra si
+    /// no. Centraliza el branch para el preview y las escenas.
+    pub fn to_meta(
+        &self,
+        pos: Vec3,
+        facing: f32,
+        clip: Clip,
+        phase: f32,
+        look: Option<Vec3>,
+    ) -> (Mat4, Vec<Vertex3d>, Vec<u16>) {
+        match &self.cuerpo {
+            None => {
+                let mut a = self.to_actor(pos, facing);
+                a.set_clip(clip);
+                a.advance(phase);
+                a.look_at(look);
+                let (v, i) = a.mesh();
+                (a.model(), v, i)
+            }
+            Some(mov) => {
+                // El andar según el clip: locomoción (editable) o gesto (procedural).
+                let pose = match clip {
+                    Clip::Walk => mov.andares.caminar.pose(phase),
+                    Clip::Run => mov.andares.correr.pose(phase),
+                    Clip::Wave => Andar::saludar(&mov.rig).pose(phase),
+                    Clip::Point => Andar::senalar(&mov.rig).pose(phase),
+                    Clip::Cheer => Andar::festejar(&mov.rig).pose(phase),
+                    Clip::Idle => mov.andares.quieto.pose(phase),
+                };
+                let (v, i) = mov.rig.mesh(&pose, self.skin, self.shirt, self.pants);
+                let model = Mat4::from_translation(pos) * Mat4::from_rotation_y(facing);
+                (model, v, i)
+            }
+        }
     }
 
     /// Materializa el spec en un [`Actor`] parado en `pos` mirando a `facing`.
@@ -70,6 +534,27 @@ impl CharSpec {
             .with_age(self.age)
             .with_colors(self.skin, self.shirt, self.pants)
     }
+
+    /// **Estilo de personaje** (proporciones/rasgos anclados en literatura) derivado de la
+    /// edad. Ver [`EstiloSer`]. Futuro: guardarlo en el spec para elegir arquetipo a mano.
+    pub fn estilo(&self) -> EstiloSer {
+        EstiloSer::por_edad(self.age)
+    }
+
+    /// **Materializa el ser como VOLUMEN VOXEL redondeado** (no la malla de cajas del
+    /// [`Actor`]): el humanoide estilizado del kit ([`humanoide_voxel`]) en la pose del `clip`/
+    /// `phase`, coloreado por sus rasgos (piel/remera/pantalón), con el detalle sub-voxel
+    /// horneado. `altura` = alto en voxels. Se rinde con `bisel` + `silueta_por_voxel` +
+    /// AO baja para que el ray-marcher lo redondee a un look vinyl-toy/chibi (sin cajas, sin
+    /// valle). Sólo para el humanoide (`cuerpo = None`); un rig usa su propia malla.
+    pub fn to_voxel(&self, clip: Clip, phase: f32, altura: u32) -> VoxelGrid {
+        let pose = clip.pose(phase);
+        let col = match self.hair {
+            Some(h) => Colores::con_pelo(self.skin, self.shirt, self.pants, h),
+            None => Colores::nuevos(self.skin, self.shirt, self.pants),
+        };
+        humanoide_voxel(&self.estilo(), &pose, altura, col)
+    }
 }
 
 /// **Keyframe serializable** de un actor (espejo de [`ActorKey`]): dónde está en
@@ -213,6 +698,32 @@ pub struct ShotSpec {
     pub kind: ShotKind,
 }
 
+/// Qué clase de SUCESO se dicta en un punto de la escena. Se dictan desde
+/// adentro (caminando/volando el mundo) y se autoran aquí.
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub enum TipoSuceso {
+    /// Aparece un ser (id en [`Project::seres`]; `0` = todavía por asignar).
+    Aparece(u64),
+    /// La cámara mira a este punto (una marca para dirigir un plano).
+    Camara,
+    /// Punto de interés genérico — "aquí pasa algo".
+    Marca,
+}
+
+/// Un SUCESO dictado en la escena: qué pasa, dónde y cuándo. El creador lo deja
+/// caer mientras recorre el mundo en primera persona.
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub struct Suceso {
+    /// Instante en la escena (segundos).
+    pub t: f32,
+    /// Dónde, en coordenadas del mundo/grilla `[x, y, z]`.
+    pub pos: [f32; 3],
+    /// Qué clase de suceso.
+    pub tipo: TipoSuceso,
+    /// Nota libre del creador ("aquí despierta", "corte a primer plano"…).
+    pub nota: String,
+}
+
 /// **Especificación serializable de una escena**: el mundo de fondo (`world`,
 /// índice en [`Project::worlds`]), la duración, el reparto guionado y los **planos**
 /// de cámara. Es la versión editable/IA-emisible del [`Sequence`](crate::Sequence)
@@ -220,8 +731,12 @@ pub struct ShotSpec {
 /// cada actor en `sample(t)` con la cámara del plano vigente.
 #[derive(Debug, Clone, Serialize, Deserialize)]
 pub struct SceneSpec {
+    /// Id estable (asignado por el [`Project`]).
+    #[serde(default)]
+    pub id: u64,
     pub name: String,
-    pub world: usize,
+    /// El **mundo** de fondo (id en [`Project::mundos`]).
+    pub mundo: u64,
     pub duration: f32,
     pub actors: Vec<ActorSpec>,
     #[serde(default)]
@@ -232,6 +747,17 @@ pub struct SceneSpec {
     /// el "barro" de la escena. Ver [`handheld_shake`].
     #[serde(default)]
     pub handheld: f32,
+    /// **Atmósfera** de apertura: la bruma + el fundido desde negro. `None` =
+    /// aire despejado, sin fundido (compatibilidad con escenas viejas).
+    #[serde(default)]
+    pub atmosfera: Option<crate::apertura::Atmosfera>,
+    /// **Caída** de apertura: la cámara pura cae del cielo (sin cuerpo) hasta
+    /// aterrizar. `None` = cámara normal por planos.
+    #[serde(default)]
+    pub caida: Option<crate::apertura::Caida>,
+    /// **Sucesos** dictados desde adentro: qué pasa, dónde y cuándo.
+    #[serde(default)]
+    pub sucesos: Vec<Suceso>,
 }
 
 /// **Temblor de cámara en mano**, determinista (función pura de `t` → la peli sale
@@ -297,6 +823,17 @@ impl SceneSpec {
     /// único punto por el que deberían pasar el preview y el export para que el
     /// sello de cámara salga igual en ambos.
     pub fn camera_at(&self, look: Vec3, d: f32, t: f32) -> Camera3d {
+        // Apertura por CAÍDA (cámara pura, sin cuerpo): mientras dura la caída, la
+        // cámara desciende del cielo hacia `look`; al aterrizar, cede a los planos.
+        if let Some(caida) = self.caida {
+            if t < caida.duracion {
+                let mut cam = caida.camara_desde(look, t);
+                let (eo, to) = handheld_shake(t, self.handheld, d);
+                cam.eye += eo;
+                cam.target += to;
+                return cam;
+            }
+        }
         let mut cam = self.active_shot(t).resolve(look, d, t);
         let (eo, to) = handheld_shake(t, self.handheld, d);
         cam.eye += eo;
@@ -321,7 +858,7 @@ impl SceneSpec {
     /// arranque como de la generación por IA.
     pub fn walk_and_emote(
         name: impl Into<String>,
-        world: usize,
+        mundo: u64,
         n: usize,
         gesture: Clip,
         dim: [u32; 3],
@@ -360,57 +897,689 @@ impl SceneSpec {
             ShotSpec { start: t_turn, kind: ShotKind::CloseUp },
         ];
         // Cámara en mano suave por defecto: el sello se ve sin tener que pedirlo.
-        Self { name: name.into(), world, duration: dur, actors, shots, handheld: 0.7 }
+        Self {
+            id: 0,
+            name: name.into(),
+            mundo,
+            duration: dur,
+            actors,
+            shots,
+            handheld: 0.7,
+            atmosfera: None,
+            caida: None,
+            sucesos: Vec::new(),
+        }
     }
 }
 
-/// El **proyecto**: la bolsa de artefactos del creador (mundos, personajes,
-/// escenas). Vacío por defecto; [`starter`](Self::starter) trae algo que tocar.
+/// El **proyecto**: la bolsa de artefactos del creador, por niveles de composición
+/// (leyes → materiales → seres → biomas → mundos → escenas). Cada item lleva un `id`
+/// estable (separado del nombre) para referenciarse, renombrarse y duplicarse.
+/// Vacío por defecto; [`starter`](Self::starter) trae algo que tocar.
 #[derive(Debug, Clone, Default, Serialize, Deserialize)]
 pub struct Project {
-    pub worlds: Vec<NamedWorld>,
+    /// Contador de ids; `0` queda reservado como «ninguno».
     #[serde(default)]
-    pub characters: Vec<CharSpec>,
+    pub next_id: u64,
     #[serde(default)]
-    pub scenes: Vec<SceneSpec>,
+    pub leyes: Vec<Ley>,
+    #[serde(default)]
+    pub materiales: Vec<MaterialDef>,
+    /// Los **seres** (personajes); el tipo se llama `CharSpec` por historia.
+    #[serde(default)]
+    pub seres: Vec<CharSpec>,
+    #[serde(default)]
+    pub biomas: Vec<Bioma>,
+    #[serde(default)]
+    pub mundos: Vec<Mundo>,
+    #[serde(default)]
+    pub escenas: Vec<SceneSpec>,
+    /// Interiores amueblables (editor de interiores).
+    #[serde(default)]
+    pub interiores: Vec<crate::interior::Interior>,
 }
 
 impl Project {
-    /// Proyecto de arranque: el desierto y la pradera, un trío de personajes
-    /// distinguibles y una escena demo (entran y saludan en el desierto).
+    /// Reserva el próximo id estable.
+    pub fn alloc_id(&mut self) -> u64 {
+        if self.next_id == 0 {
+            self.next_id = 1;
+        }
+        let id = self.next_id;
+        self.next_id += 1;
+        id
+    }
+
+    /// Proyecto de arranque: leyes base, los 6 materiales semilla, un trío de seres,
+    /// los biomas desierto/pradera y dos mundos que los envuelven, más la escena demo.
     pub fn starter() -> Self {
-        let characters = vec![
-            CharSpec { name: "rojo".into(), age: Age::Adult, skin: [0.90, 0.72, 0.58], shirt: [0.82, 0.28, 0.26], pants: [0.20, 0.20, 0.28] },
-            CharSpec { name: "azul".into(), age: Age::Adult, skin: [0.86, 0.68, 0.54], shirt: [0.22, 0.55, 0.78], pants: [0.18, 0.20, 0.24] },
-            CharSpec { name: "amarillo".into(), age: Age::Adult, skin: [0.92, 0.78, 0.62], shirt: [0.92, 0.80, 0.30], pants: [0.26, 0.22, 0.20] },
-        ];
-        let dim = world_dim(PREVIEW_DIM_XZ);
-        Self {
-            worlds: vec![
-                NamedWorld::new("desierto", WorldRecipe::desert(1337)),
-                NamedWorld::new("pradera", WorldRecipe::grassland(1337)),
+        let mut p = Project { next_id: 1, ..Default::default() };
+
+        // --- Leyes base ---
+        let ley_fluir = p.alloc_id();
+        p.leyes.push(Ley {
+            id: ley_fluir,
+            name: "fluir".into(),
+            kind: LeyKind::Fluir { gravedad: 1.0, horizontal: 0.6 },
+        });
+        let ley_crecer = p.alloc_id();
+        p.leyes.push(Ley {
+            id: ley_crecer,
+            name: "crecer".into(),
+            kind: LeyKind::Crecer { velocidad: 1.0 },
+        });
+
+        // --- Materiales semilla (arena/pasto/roca/nieve/agua/cactus) ---
+        let mut mat_ids = std::collections::HashMap::new();
+        for m in Material::ALL {
+            let id = p.alloc_id();
+            let mut def = MaterialDef::from_builtin(id, m);
+            // El agua fluye; el cactus crece — leyes de muestra (sin simular aún).
+            match m {
+                Material::Water => def.leyes.push(LeyUso { ley: ley_fluir, params: vec![1.0, 0.6] }),
+                Material::Cactus => def.leyes.push(LeyUso { ley: ley_crecer, params: vec![1.0] }),
+                _ => {}
+            }
+            mat_ids.insert(m, id);
+            p.materiales.push(def);
+        }
+        let mid = |m: Material| mat_ids[&m];
+
+        // --- Seres ---
+        let mut sere_ids = Vec::new();
+        for (name, skin, shirt, pants) in [
+            ("rojo", [0.90, 0.72, 0.58], [0.82, 0.28, 0.26], [0.20, 0.20, 0.28]),
+            ("azul", [0.86, 0.68, 0.54], [0.22, 0.55, 0.78], [0.18, 0.20, 0.24]),
+            ("amarillo", [0.92, 0.78, 0.62], [0.92, 0.80, 0.30], [0.26, 0.22, 0.20]),
+        ] {
+            let id = p.alloc_id();
+            sere_ids.push(id);
+            p.seres.push(CharSpec {
+                id,
+                name: name.into(),
+                age: Age::Adult,
+                skin,
+                shirt,
+                pants,
+                hair: None,
+                cuerpo: None,
+                conducta: Conducta::default(),
+            });
+        }
+
+        // --- Biomas ---
+        let bioma_desierto = p.alloc_id();
+        p.biomas.push(Bioma {
+            id: bioma_desierto,
+            name: "desierto".into(),
+            base: 0.30,
+            dune: 0.05,
+            relief: 0.45,
+            mountains: 0.12,
+            water_level: 0.26,
+            rivers: 0.18,
+            peak_at: 1.0,
+            ground: mid(Material::Sand),
+            cliff: mid(Material::Rock),
+            peak: None,
+            objetos: vec![
+                crate::worldgen::ObjetoUso { material: mid(Material::Cactus), densidad: 0.010, forma: Forma::Columnar },
+                // Palmeras ralas (oasis): follaje verde sobre tronco leñoso.
+                crate::worldgen::ObjetoUso { material: mid(Material::Leaf), densidad: 0.004, forma: Forma::Palmera },
             ],
-            characters,
-            scenes: vec![SceneSpec::walk_and_emote("saludo en el desierto", 0, 3, Clip::Wave, dim)],
+            minerales: vec![
+                MineralUso::of(Mineral::Sal),
+                MineralUso::of(Mineral::Cobre),
+                MineralUso::of(Mineral::Hierro),
+                MineralUso::of(Mineral::Oro),
+                MineralUso::of(Mineral::Rubi),
+            ],
+            densidad_urbana: 0.4,
+            casas: Vec::new(),
+            fauna: vec![
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Conejo, densidad: 0.25 },
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Serpiente, densidad: 0.3 },
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Zorro, densidad: 0.2 },
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Camello, densidad: 0.2 },
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Lagarto, densidad: 0.3 },
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Escorpion, densidad: 0.25 },
+            ],
+            seres: vec![crate::worldgen::SereUso { sere: sere_ids[0], probabilidad: 0.5 }],
+        });
+        let bioma_pradera = p.alloc_id();
+        p.biomas.push(Bioma {
+            id: bioma_pradera,
+            name: "pradera".into(),
+            base: 0.22,
+            dune: 0.10,
+            relief: 0.7,
+            mountains: 0.5,
+            water_level: 0.30,
+            rivers: 0.25,
+            peak_at: 0.80,
+            ground: mid(Material::Grass),
+            cliff: mid(Material::Rock),
+            peak: Some(mid(Material::Snow)),
+            // Vegetación de pradera: árboles y arbustos ralos sobre un manto de grama
+            // con flores. El orden importa — la primera forma que brota gana la columna,
+            // así los árboles no quedan tapados por la grama densa.
+            objetos: vec![
+                crate::worldgen::ObjetoUso { material: mid(Material::Leaf), densidad: 0.008, forma: Forma::Arbol },
+                crate::worldgen::ObjetoUso { material: mid(Material::Leaf), densidad: 0.012, forma: Forma::Arbusto },
+                crate::worldgen::ObjetoUso { material: mid(Material::Wheat), densidad: 0.05, forma: Forma::Trigo },
+                crate::worldgen::ObjetoUso { material: mid(Material::Bloom), densidad: 0.020, forma: Forma::Lavanda },
+                crate::worldgen::ObjetoUso { material: mid(Material::Bloom), densidad: 0.012, forma: Forma::Flor },
+                crate::worldgen::ObjetoUso { material: mid(Material::Leaf), densidad: 0.010, forma: Forma::Junco },
+                crate::worldgen::ObjetoUso { material: mid(Material::Grass), densidad: 0.05, forma: Forma::Pasto },
+            ],
+            minerales: vec![
+                MineralUso::of(Mineral::Carbon),
+                MineralUso::of(Mineral::Hierro),
+                MineralUso::of(Mineral::Cobre),
+                MineralUso::of(Mineral::Cuarzo),
+            ],
+            densidad_urbana: 0.4,
+            casas: Vec::new(),
+            fauna: vec![
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Vaca, densidad: 0.35 },
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Oveja, densidad: 0.35 },
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Conejo, densidad: 0.4 },
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Mariposa, densidad: 0.5 },
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Pato, densidad: 0.3 },
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Cabra, densidad: 0.25 },
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Burro, densidad: 0.15 },
+            ],
+            seres: vec![
+                crate::worldgen::SereUso { sere: sere_ids[1], probabilidad: 0.5 },
+                crate::worldgen::SereUso { sere: sere_ids[2], probabilidad: 0.4 },
+            ],
+        });
+
+        let bioma_bosque = p.alloc_id();
+        p.biomas.push(Bioma {
+            id: bioma_bosque,
+            name: "bosque".into(),
+            base: 0.24,
+            dune: 0.06,
+            relief: 0.6,
+            mountains: 0.35,
+            water_level: 0.28,
+            rivers: 0.22,
+            peak_at: 0.85,
+            ground: mid(Material::Grass),
+            cliff: mid(Material::Rock),
+            peak: Some(mid(Material::Snow)),
+            // Bosque denso: robles y árboles + coníferas, con tocones, hongos, helechos
+            // y grama de sotobosque.
+            objetos: vec![
+                crate::worldgen::ObjetoUso { material: mid(Material::Leaf), densidad: 0.015, forma: Forma::Roble },
+                crate::worldgen::ObjetoUso { material: mid(Material::Leaf), densidad: 0.040, forma: Forma::Arbol },
+                crate::worldgen::ObjetoUso { material: mid(Material::Leaf), densidad: 0.030, forma: Forma::Conifera },
+                crate::worldgen::ObjetoUso { material: mid(Material::Leaf), densidad: 0.025, forma: Forma::Arbusto },
+                crate::worldgen::ObjetoUso { material: mid(Material::Leaf), densidad: 0.006, forma: Forma::Tocon },
+                crate::worldgen::ObjetoUso { material: mid(Material::Leaf), densidad: 0.012, forma: Forma::Hongo },
+                crate::worldgen::ObjetoUso { material: mid(Material::Cactus), densidad: 0.025, forma: Forma::Helecho },
+                crate::worldgen::ObjetoUso { material: mid(Material::Grass), densidad: 0.04, forma: Forma::Pasto },
+            ],
+            minerales: vec![
+                MineralUso::of(Mineral::Carbon),
+                MineralUso::of(Mineral::Plata),
+                MineralUso::of(Mineral::Amatista),
+                MineralUso::of(Mineral::Lapis),
+            ],
+            densidad_urbana: 0.4,
+            casas: Vec::new(),
+            fauna: vec![
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Ciervo, densidad: 0.4 },
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Zorro, densidad: 0.3 },
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Oso, densidad: 0.15 },
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Conejo, densidad: 0.4 },
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Ardilla, densidad: 0.35 },
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Buho, densidad: 0.2 },
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Erizo, densidad: 0.25 },
+            ],
+            seres: vec![crate::worldgen::SereUso { sere: sere_ids[1], probabilidad: 0.4 }],
+        });
+
+        let bioma_selva = p.alloc_id();
+        p.biomas.push(Bioma {
+            id: bioma_selva,
+            name: "selva".into(),
+            base: 0.26,
+            dune: 0.05,
+            relief: 0.55,
+            mountains: 0.30,
+            water_level: 0.34,
+            rivers: 0.4,
+            peak_at: 0.9,
+            ground: mid(Material::Grass),
+            cliff: mid(Material::Rock),
+            peak: None,
+            // Selva húmeda: dosel de árboles, bambú, plataneras, helechos y hongos.
+            objetos: vec![
+                crate::worldgen::ObjetoUso { material: mid(Material::Leaf), densidad: 0.050, forma: Forma::Arbol },
+                crate::worldgen::ObjetoUso { material: mid(Material::Cactus), densidad: 0.050, forma: Forma::Bambu },
+                crate::worldgen::ObjetoUso { material: mid(Material::Leaf), densidad: 0.030, forma: Forma::Platanera },
+                crate::worldgen::ObjetoUso { material: mid(Material::Leaf), densidad: 0.030, forma: Forma::Arbusto },
+                crate::worldgen::ObjetoUso { material: mid(Material::Leaf), densidad: 0.012, forma: Forma::Hongo },
+                crate::worldgen::ObjetoUso { material: mid(Material::Cactus), densidad: 0.045, forma: Forma::Helecho },
+                crate::worldgen::ObjetoUso { material: mid(Material::Grass), densidad: 0.04, forma: Forma::Pasto },
+            ],
+            minerales: vec![
+                MineralUso::of(Mineral::Esmeralda),
+                MineralUso::of(Mineral::Oro),
+                MineralUso::of(Mineral::Diamante),
+                MineralUso::of(Mineral::Cobre),
+            ],
+            densidad_urbana: 0.4,
+            casas: Vec::new(),
+            fauna: vec![
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Rana, densidad: 0.4 },
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Serpiente, densidad: 0.3 },
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Pajaro, densidad: 0.4 },
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Mariposa, densidad: 0.5 },
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Mono, densidad: 0.35 },
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Loro, densidad: 0.35 },
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Tigre, densidad: 0.15 },
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Elefante, densidad: 0.12 },
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Cocodrilo, densidad: 0.15 },
+            ],
+            seres: vec![crate::worldgen::SereUso { sere: sere_ids[2], probabilidad: 0.4 }],
+        });
+
+        let bioma_volcan = p.alloc_id();
+        p.biomas.push(Bioma {
+            id: bioma_volcan,
+            name: "volcán".into(),
+            base: 0.20,
+            dune: 0.04,
+            relief: 0.9,
+            mountains: 0.85,
+            water_level: 0.0,
+            rivers: 0.0,
+            peak_at: 0.72,
+            // La tanda nueva de materiales: laderas de basalto, cumbre de lava.
+            ground: mid(Material::Basalto),
+            cliff: mid(Material::Basalto),
+            peak: Some(mid(Material::Lava)),
+            objetos: vec![],
+            // Veta rica: el fuego trae metales, gemas rojas y exóticos volcánicos.
+            minerales: vec![
+                MineralUso::of(Mineral::Hierro),
+                MineralUso::of(Mineral::Oro),
+                MineralUso::of(Mineral::Rubi),
+                MineralUso::of(Mineral::Obsidiana),
+                MineralUso::of(Mineral::Cinabrio),
+            ],
+            densidad_urbana: 0.4,
+            casas: Vec::new(),
+            fauna: vec![],
+            seres: vec![],
+        });
+
+        let bioma_gruta = p.alloc_id();
+        p.biomas.push(Bioma {
+            id: bioma_gruta,
+            name: "gruta de cristales".into(),
+            base: 0.30,
+            dune: 0.05,
+            relief: 0.8,
+            mountains: 0.7,
+            water_level: 0.10,
+            rivers: 0.05,
+            peak_at: 0.9,
+            // Roca clara (granito) para que resalten las gemas exóticas.
+            ground: mid(Material::Granito),
+            cliff: mid(Material::Granito),
+            peak: None,
+            objetos: vec![],
+            // Vitrina de exóticos: geodas, cristales y vetas de colores raros.
+            minerales: vec![
+                MineralUso::of(Mineral::Amatista),
+                MineralUso::of(Mineral::Zafiro),
+                MineralUso::of(Mineral::Topacio),
+                MineralUso::of(Mineral::Turquesa),
+                MineralUso::of(Mineral::Opalo),
+                MineralUso::of(Mineral::Fluorita),
+                MineralUso::of(Mineral::Jade),
+                MineralUso::of(Mineral::Bismuto),
+                MineralUso::of(Mineral::Uraninita),
+            ],
+            densidad_urbana: 0.4,
+            casas: Vec::new(),
+            fauna: vec![],
+            seres: vec![],
+        });
+
+        let bioma_pueblo = p.alloc_id();
+        p.biomas.push(Bioma {
+            id: bioma_pueblo,
+            name: "pueblo".into(),
+            base: 0.16,
+            dune: 0.03,
+            relief: 0.22,
+            mountains: 0.12,
+            water_level: 0.0,
+            rivers: 0.0,
+            peak_at: 1.0,
+            ground: mid(Material::Grass),
+            cliff: mid(Material::Rock),
+            peak: None,
+            objetos: vec![
+                crate::worldgen::ObjetoUso { material: mid(Material::Leaf), densidad: 0.006, forma: Forma::Arbol },
+                crate::worldgen::ObjetoUso { material: mid(Material::Grass), densidad: 0.04, forma: Forma::Pasto },
+            ],
+            minerales: vec![],
+            // Un pueblo mezclado, esparcido por la semilla del mundo.
+            densidad_urbana: 0.55,
+            casas: vec![
+                CasaUso { tipo: CasaTipo::Cabana, densidad: 0.35 },
+                CasaUso { tipo: CasaTipo::Moderna, densidad: 0.3 },
+                CasaUso { tipo: CasaTipo::Flintstone, densidad: 0.2 },
+                CasaUso { tipo: CasaTipo::Hobbit, densidad: 0.2 },
+                CasaUso { tipo: CasaTipo::Edificio, densidad: 0.15 },
+            ],
+            fauna: vec![
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Gallina, densidad: 0.5 },
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Cerdo, densidad: 0.3 },
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Vaca, densidad: 0.3 },
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Pato, densidad: 0.3 },
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Cabra, densidad: 0.2 },
+                crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Burro, densidad: 0.15 },
+            ],
+            seres: vec![],
+        });
+
+        // --- Mundos ---
+        let mundo_desierto = p.alloc_id();
+        p.mundos.push(Mundo {
+            id: mundo_desierto,
+            name: "desierto".into(),
+            seed: 1337,
+            biomas: vec![bioma_desierto],
+            mapa: None,
+        });
+        let mundo_pradera = p.alloc_id();
+        p.mundos.push(Mundo {
+            id: mundo_pradera,
+            name: "pradera".into(),
+            seed: 1337,
+            biomas: vec![bioma_pradera],
+            mapa: None,
+        });
+        let mundo_bosque = p.alloc_id();
+        p.mundos.push(Mundo {
+            id: mundo_bosque,
+            name: "bosque".into(),
+            seed: 2027,
+            biomas: vec![bioma_bosque],
+            mapa: None,
+        });
+        let mundo_selva = p.alloc_id();
+        p.mundos.push(Mundo {
+            id: mundo_selva,
+            name: "selva".into(),
+            seed: 3141,
+            biomas: vec![bioma_selva],
+            mapa: None,
+        });
+        let mundo_volcan = p.alloc_id();
+        p.mundos.push(Mundo {
+            id: mundo_volcan,
+            name: "volcán".into(),
+            seed: 777,
+            biomas: vec![bioma_volcan],
+            mapa: None,
+        });
+        let mundo_gruta = p.alloc_id();
+        p.mundos.push(Mundo {
+            id: mundo_gruta,
+            name: "gruta de cristales".into(),
+            seed: 2718,
+            biomas: vec![bioma_gruta],
+            mapa: None,
+        });
+        let mundo_pueblo = p.alloc_id();
+        p.mundos.push(Mundo {
+            id: mundo_pueblo,
+            name: "pueblo".into(),
+            seed: 1234,
+            biomas: vec![bioma_pueblo],
+            mapa: None,
+        });
+
+        // --- Escena demo ---
+        let dim = world_dim(PREVIEW_DIM_XZ);
+        let mut escena = SceneSpec::walk_and_emote("saludo en el desierto", mundo_desierto, 3, Clip::Wave, dim);
+        escena.id = p.alloc_id();
+        p.escenas.push(escena);
+
+        // --- Interior demo (sala amueblada) ---
+        let mut sala = crate::interior::Interior::nuevo(p.alloc_id(), "sala");
+        sala.colocar(crate::Mueble::Alfombra, 12, 10, 0);
+        sala.colocar(crate::Mueble::Sofa, 12, 6, 0);
+        sala.colocar(crate::Mueble::Mesa, 12, 10, 0);
+        sala.colocar(crate::Mueble::Silla, 9, 10, 1);
+        sala.colocar(crate::Mueble::Estante, 4, 3, 0);
+        sala.colocar(crate::Mueble::Lampara, 20, 4, 0);
+        sala.colocar(crate::Mueble::Maceta, 4, 16, 0);
+        sala.colocar(crate::Mueble::Ficus, 20, 16, 0);
+        sala.colocar(crate::Mueble::Cuadro, 12, 1, 0);
+        sala.colocar(crate::Mueble::Espejo, 8, 1, 0);
+        sala.colocar(crate::Mueble::Colgante, 16, 2, 0);
+        sala.colocar(crate::Mueble::Aplique, 1, 8, 1);
+        p.interiores.push(sala);
+
+        p
+    }
+
+    // --- Búsquedas por id ---
+    pub fn ley(&self, id: u64) -> Option<&Ley> {
+        self.leyes.iter().find(|x| x.id == id)
+    }
+    pub fn material(&self, id: u64) -> Option<&MaterialDef> {
+        self.materiales.iter().find(|x| x.id == id)
+    }
+    pub fn sere(&self, id: u64) -> Option<&CharSpec> {
+        self.seres.iter().find(|x| x.id == id)
+    }
+    pub fn bioma(&self, id: u64) -> Option<&Bioma> {
+        self.biomas.iter().find(|x| x.id == id)
+    }
+    pub fn mundo(&self, id: u64) -> Option<&Mundo> {
+        self.mundos.iter().find(|x| x.id == id)
+    }
+
+    /// Id del material de fábrica de la variante `m`, si está sembrado (para que la
+    /// IA/presets encuentren «la arena» sin clavar números).
+    pub fn material_id_for(&self, m: Material) -> Option<u64> {
+        self.materiales.iter().find(|d| d.builtin == Some(m)).map(|d| d.id)
+    }
+
+    /// **Resuelve un material** aplanando la cadena de herencia: el primer `Some`
+    /// hacia arriba gana; si nada lo define, cae al color/grano del `builtin`, y por
+    /// último a un gris neutro. Corta a profundidad 32 (anti-ciclo).
+    pub fn resolve_material(&self, id: u64) -> ResolvedMaterial {
+        let mut color: Option<[f32; 3]> = None;
+        let mut grain: Option<f32> = None;
+        let mut brillo: Option<f32> = None;
+        let mut builtin: Option<Material> = None;
+        let mut cur = Some(id);
+        let mut depth = 0;
+        while let Some(cid) = cur {
+            if depth > 32 {
+                break;
+            }
+            let Some(m) = self.material(cid) else { break };
+            if color.is_none() {
+                color = m.color;
+            }
+            if grain.is_none() {
+                grain = m.grain;
+            }
+            if brillo.is_none() {
+                brillo = m.brillo;
+            }
+            if builtin.is_none() {
+                builtin = m.builtin;
+            }
+            cur = m.parent;
+            depth += 1;
+        }
+        let color_u8 = color
+            .map(|c| {
+                [
+                    (c[0].clamp(0.0, 1.0) * 255.0) as u8,
+                    (c[1].clamp(0.0, 1.0) * 255.0) as u8,
+                    (c[2].clamp(0.0, 1.0) * 255.0) as u8,
+                ]
+            })
+            .or_else(|| builtin.map(|b| b.color()))
+            .unwrap_or([150, 150, 150]);
+        let grain = grain.or_else(|| builtin.map(|b| b.grain())).unwrap_or(0.0);
+        let brillo = brillo.or_else(|| builtin.map(|b| b.brillo())).unwrap_or(0.0);
+        // El detalle sub-voxel (rugosidad/bisel) viaja POR VOXEL con el material, así
+        // dos materiales del bioma se ven distinto a la vez (lo que el look global no
+        // podía). Aplana la herencia igual que color/brillo (`detalle_material`).
+        ResolvedMaterial::new_b(color_u8, grain, brillo).con_detalle(self.detalle_material(id))
+    }
+
+    /// **Detalle sub-voxel resuelto** `(rugosidad, bisel)` de un material, aplanando
+    /// la herencia (primer `Some` hacia arriba gana; default `0.0` = liso/duro). Es un
+    /// look GLOBAL del ray-march (no hay id de material por voxel todavía), así que el
+    /// preview aplica el del material en foco. Espeja [`Self::resolve_material`].
+    pub fn detalle_material(&self, id: u64) -> (f32, f32) {
+        let mut rugosidad: Option<f32> = None;
+        let mut bisel: Option<f32> = None;
+        let mut cur = Some(id);
+        let mut depth = 0;
+        while let Some(cid) = cur {
+            if depth > 32 {
+                break;
+            }
+            let Some(m) = self.material(cid) else { break };
+            if rugosidad.is_none() {
+                rugosidad = m.rugosidad;
+            }
+            if bisel.is_none() {
+                bisel = m.bisel;
+            }
+            cur = m.parent;
+            depth += 1;
+        }
+        (rugosidad.unwrap_or(0.0).max(0.0), bisel.unwrap_or(0.0).clamp(0.0, 1.0))
+    }
+
+    /// **Leyes efectivas** de un material: las propias + las heredadas de sus padres,
+    /// cada una con sus parámetros aplicados (la `LeyUso.params` overridea los
+    /// defaults de la ley). Es lo que dispara la simulación: un material *fluye*
+    /// porque tiene una [`LeyKind::Fluir`], *crece* porque tiene [`LeyKind::Crecer`].
+    pub fn resolve_laws(&self, material_id: u64) -> Vec<LeyKind> {
+        let mut out = Vec::new();
+        let mut cur = Some(material_id);
+        let mut depth = 0;
+        while let Some(cid) = cur {
+            if depth > 32 {
+                break;
+            }
+            let Some(m) = self.material(cid) else { break };
+            for u in &m.leyes {
+                if let Some(ley) = self.ley(u.ley) {
+                    let mut kind = ley.kind.clone();
+                    for (i, &v) in u.params.iter().enumerate() {
+                        kind.set_param(i, v);
+                    }
+                    out.push(kind);
+                }
+            }
+            cur = m.parent;
+            depth += 1;
+        }
+        out
+    }
+
+    /// Si el material tiene una ley [`Fluir`](LeyKind::Fluir), sus parámetros
+    /// `(gravedad, horizontal)` — lo que vuelve líquido a un material. `None` = no fluye.
+    pub fn fluir_params(&self, material_id: u64) -> Option<(f32, f32)> {
+        self.resolve_laws(material_id).into_iter().find_map(|k| match k {
+            LeyKind::Fluir { gravedad, horizontal } => Some((gravedad, horizontal)),
+            _ => None,
+        })
+    }
+
+    /// Si el material tiene una ley [`Crecer`](LeyKind::Crecer), su `velocidad`.
+    /// `None` = no crece.
+    pub fn crecer_velocidad(&self, material_id: u64) -> Option<f32> {
+        self.resolve_laws(material_id).into_iter().find_map(|k| match k {
+            LeyKind::Crecer { velocidad } => Some(velocidad),
+            _ => None,
+        })
+    }
+
+    /// Parámetros de Fluir del **agua** (el material semilla `Water`), si los tiene.
+    /// El studio lo usa para que el agua del bioma fluya según su ley.
+    pub fn water_fluir(&self) -> Option<(f32, f32)> {
+        self.fluir_params(self.material_id_for(Material::Water)?)
+    }
+
+    /// Si el material tiene una ley [`Ecuacion`](LeyKind::Ecuacion) (con herencia), su
+    /// `(campos, programa compilado, valores de parámetros)` — listo para correr con
+    /// [`EcuacionSim`](crate::EcuacionSim) sobre las celdas del material en el preview.
+    /// `None` si no tiene una, o si su fórmula no compila.
+    pub fn ecuacion_de_material(
+        &self,
+        material_id: u64,
+    ) -> Option<(Vec<FieldDef>, Program, Vec<f32>)> {
+        self.resolve_laws(material_id).into_iter().find_map(|k| match &k {
+            LeyKind::Ecuacion { campos, .. } => {
+                let prog = k.compile_ecuacion()?.ok()?;
+                Some((campos.clone(), prog, k.ecuacion_param_values()))
+            }
+            _ => None,
+        })
+    }
+
+    /// Arma la [`BiomaPalette`] resuelta de un bioma (colores concretos para el render).
+    pub fn bioma_palette(&self, b: &Bioma) -> BiomaPalette {
+        let agua = self
+            .material_id_for(Material::Water)
+            .map(|id| self.resolve_material(id).color)
+            .unwrap_or_else(|| Material::Water.color());
+        BiomaPalette {
+            ground: self.resolve_material(b.ground),
+            cliff: self.resolve_material(b.cliff),
+            peak: b.peak.map(|id| self.resolve_material(id)),
+            agua,
+            objetos: b
+                .objetos
+                .iter()
+                .map(|o| (self.resolve_material(o.material), o.densidad, o.forma))
+                .collect(),
         }
     }
 
-    /// Agrega un mundo y devuelve su índice.
-    pub fn add_world(&mut self, w: NamedWorld) -> usize {
-        self.worlds.push(w);
-        self.worlds.len() - 1
+    /// Todo lo que el render necesita de un mundo: su primer bioma (relieve), la
+    /// semilla y la paleta resuelta. `None` si el mundo o su bioma no existen.
+    pub fn render_mundo(&self, mundo_id: u64) -> Option<MundoRender> {
+        let m = self.mundo(mundo_id)?;
+        let bid = *m.biomas.first()?;
+        let bioma = self.bioma(bid)?.clone();
+        let palette = self.bioma_palette(&bioma);
+        Some(MundoRender { bioma, seed: m.seed, palette })
     }
 
-    /// Agrega una escena y devuelve su índice.
-    pub fn add_scene(&mut self, s: SceneSpec) -> usize {
-        self.scenes.push(s);
-        self.scenes.len() - 1
+    /// El render de un **bioma** suelto (modo Biomas), con una semilla fija de
+    /// previsualización. `None` si el bioma no existe.
+    pub fn render_bioma(&self, bioma_id: u64) -> Option<MundoRender> {
+        let bioma = self.bioma(bioma_id)?.clone();
+        let palette = self.bioma_palette(&bioma);
+        Some(MundoRender { bioma, seed: 1337, palette })
     }
 
-    /// Personaje `i`, o uno por defecto si el índice se sale (escenas que piden
-    /// más actores que personajes hay).
+    /// Ser `i` (por índice, como referencian los actores de una escena), o uno por
+    /// defecto si el índice se sale.
     pub fn character_or_default(&self, i: usize) -> CharSpec {
-        self.characters
+        self.seres
             .get(i)
             .cloned()
             .unwrap_or_else(|| CharSpec::new("actor", Age::Adult))
@@ -421,15 +1590,264 @@ impl Project {
 mod tests {
     use super::*;
 
+    #[test]
+    fn ley_ecuacion_compila_y_corre() {
+        use crate::ecuacion::FieldEngine;
+        // Autoría de una ley Gray–Scott con los tipos del studio (como haría la UI).
+        let ley = LeyKind::Ecuacion {
+            campos: vec![
+                FieldDef::new("u", 1.0, 0.0, 1.0),
+                FieldDef::new("v", 0.0, 0.0, 1.0),
+            ],
+            params: vec![
+                ParamDef::new("Du", 0.16, 0.0, 1.0),
+                ParamDef::new("Dv", 0.08, 0.0, 1.0),
+                ParamDef::new("F", 0.06, 0.0, 0.1),
+                ParamDef::new("k", 0.062, 0.0, 0.1),
+            ],
+            fuentes: vec![
+                "Du * lap(u) - u * v * v + F * (1 - u)".into(),
+                "Dv * lap(v) + u * v * v - (F + k) * v".into(),
+            ],
+        };
+        let prog = ley.compile_ecuacion().expect("es Ecuacion").expect("compila");
+        let LeyKind::Ecuacion { campos, .. } = &ley else { unreachable!() };
+        let mut eng = FieldEngine::new([32, 1, 32], campos.clone());
+        for z in 14..18 {
+            for x in 14..18 {
+                eng.set(1, x, 0, z, 0.5);
+                eng.set(0, x, 0, z, 0.25);
+            }
+        }
+        let params = ley.ecuacion_param_values();
+        for _ in 0..300 {
+            eng.step(&prog, &params, 1.0);
+        }
+        let (mut lo, mut hi) = (f32::INFINITY, f32::NEG_INFINITY);
+        for z in 0..32 {
+            for x in 0..32 {
+                let v = eng.get(1, x, 0, z);
+                lo = lo.min(v);
+                hi = hi.max(v);
+            }
+        }
+        assert!(hi - lo > 0.05, "la ley autorada formó patrón (rango={})", hi - lo);
+    }
+
+    #[test]
+    fn ley_ecuacion_error_de_parseo_ubicado() {
+        let ley = LeyKind::Ecuacion {
+            campos: vec![FieldDef::new("c", 0.0, 0.0, 1.0)],
+            params: vec![],
+            fuentes: vec!["k * lap(c)".into()], // `k` no declarado
+        };
+        let err = ley.compile_ecuacion().unwrap().unwrap_err();
+        assert!(err.contains("campo «c»"), "ubica el campo: {err}");
+        assert!(err.contains('k'), "menciona el símbolo desconocido: {err}");
+    }
+
     #[test]
     fn proyecto_round_trip_ron() {
         let p = Project::starter();
         let s = ron::ser::to_string(&p).expect("serializa a ron");
         let back: Project = ron::from_str(&s).expect("deserializa de ron");
-        assert_eq!(back.worlds.len(), p.worlds.len());
-        assert_eq!(back.worlds[0].name, "desierto");
-        // La receta sobrevive el viaje (un parámetro de muestra).
-        assert!((back.worlds[0].recipe.base - p.worlds[0].recipe.base).abs() < 1e-6);
+        assert_eq!(back.biomas.len(), p.biomas.len());
+        assert_eq!(back.mundos.len(), p.mundos.len());
+        assert_eq!(back.biomas[0].name, "desierto");
+        // El relieve del bioma sobrevive el viaje (un parámetro de muestra).
+        assert!((back.biomas[0].base - p.biomas[0].base).abs() < 1e-6);
+        // Y los ids siguen apuntando: la escena referencia un mundo que existe.
+        assert!(back.mundo(back.escenas[0].mundo).is_some());
+    }
+
+    #[test]
+    fn mundo_desde_mapa_persiste_en_ron() {
+        let mut p = Project::starter();
+        // Adjuntá una fuente de mapa a un mundo (como al importar en el studio).
+        let mid = p.mundos[0].id;
+        p.mundos[0].mapa = Some(MapaFuente {
+            geojson: r#"{"type":"FeatureCollection","features":[]}"#.into(),
+            pgm: Some(vec![1, 2, 3, 4]),
+            dem_tif: None,
+            rango_dem_m: 250.0,
+        });
+        let s = ron::ser::to_string(&p).expect("serializa a ron");
+        let back: Project = ron::from_str(&s).expect("deserializa de ron");
+        let m = back.mundo(mid).expect("el mundo sigue ahí");
+        let fuente = m.mapa.as_ref().expect("la fuente del mapa sobrevive el viaje");
+        assert!(fuente.geojson.contains("FeatureCollection"));
+        assert_eq!(fuente.pgm.as_deref(), Some(&[1, 2, 3, 4][..]));
+        assert!((fuente.rango_dem_m - 250.0).abs() < 1e-6);
+    }
+
+    #[test]
+    fn ron_viejo_sin_mapa_carga_como_procedural() {
+        // Un mundo serializado ANTES de que existiera el campo `mapa` debe abrir
+        // con `mapa: None` (compat hacia atrás vía `#[serde(default)]`).
+        let ron_viejo = r#"(id:7,name:"viejo",seed:1,biomas:[])"#;
+        let m: Mundo = ron::from_str(ron_viejo).expect("mundo legacy deserializa");
+        assert!(m.mapa.is_none(), "sin campo mapa = procedural");
+    }
+
+    #[test]
+    fn herencia_de_material_overridea_solo_lo_redefinido() {
+        let mut p = Project::starter();
+        // «cactus amarillo» hijo de «cactus»: sólo redefine el color.
+        let cactus = p.material_id_for(Material::Cactus).unwrap();
+        let verde = p.resolve_material(cactus);
+        let hijo_id = p.alloc_id();
+        p.materiales.push(MaterialDef {
+            id: hijo_id,
+            name: "cactus amarillo".into(),
+            parent: Some(cactus),
+            role: MatRole::Objeto(Forma::Columnar),
+            color: Some([0.9, 0.85, 0.2]),
+            grain: None, // hereda
+            brillo: None,
+            rugosidad: None,
+            bisel: None,
+            leyes: vec![],
+            builtin: None,
+        });
+        let hijo = p.resolve_material(hijo_id);
+        assert_ne!(hijo.color, verde.color, "el color se redefinió");
+        assert_eq!(hijo.grain, verde.grain, "el grano se heredó del padre");
+    }
+
+    #[test]
+    fn agua_fluye_por_su_ley_y_hereda_leyes() {
+        let p = Project::starter();
+        // El agua semilla tiene la ley Fluir con sus params.
+        let (g, h) = p.water_fluir().expect("el agua tiene ley Fluir");
+        assert!(g > 0.0 && h >= 0.0);
+        // Un material sin leyes no fluye.
+        let roca = p.material_id_for(Material::Rock).unwrap();
+        assert!(p.fluir_params(roca).is_none());
+        // El cactus crece (ley Crecer en el starter).
+        let cactus = p.material_id_for(Material::Cactus).unwrap();
+        assert!(p.crecer_velocidad(cactus).is_some());
+
+        // Herencia de leyes: un hijo del agua hereda Fluir aunque no la redefina.
+        let mut p2 = p.clone();
+        let agua = p2.material_id_for(Material::Water).unwrap();
+        let hijo = p2.alloc_id();
+        p2.materiales.push(MaterialDef {
+            id: hijo,
+            name: "agua turbia".into(),
+            parent: Some(agua),
+            role: MatRole::Terreno,
+            color: Some([0.2, 0.4, 0.5]),
+            grain: None,
+            brillo: None,
+            rugosidad: None,
+            bisel: None,
+            leyes: vec![],
+            builtin: None,
+        });
+        assert!(p2.fluir_params(hijo).is_some(), "el hijo hereda Fluir del padre");
+    }
+
+    #[test]
+    fn detalle_sub_voxel_hereda_y_overridea() {
+        let mut p = Project::starter();
+        // Default = liso/duro (0,0) para un material sin detalle declarado.
+        let roca = p.material_id_for(Material::Rock).unwrap();
+        assert_eq!(p.detalle_material(roca), (0.0, 0.0), "default = sin detalle");
+        // Padre con rugosidad; hijo sin nada → la hereda. Nieto redefine bisel.
+        let padre = p.alloc_id();
+        p.materiales.push(MaterialDef {
+            id: padre,
+            name: "roca rugosa".into(),
+            parent: None,
+            role: MatRole::Terreno,
+            color: None,
+            grain: None,
+            brillo: None,
+            rugosidad: Some(0.9),
+            bisel: None,
+            leyes: vec![],
+            builtin: None,
+        });
+        let hijo = p.alloc_id();
+        p.materiales.push(MaterialDef {
+            id: hijo,
+            name: "hijo".into(),
+            parent: Some(padre),
+            role: MatRole::Terreno,
+            color: None,
+            grain: None,
+            brillo: None,
+            rugosidad: None,
+            bisel: Some(0.7),
+            leyes: vec![],
+            builtin: None,
+        });
+        let (rug, bis) = p.detalle_material(hijo);
+        assert!((rug - 0.9).abs() < 1e-6, "rugosidad heredada del padre");
+        assert!((bis - 0.7).abs() < 1e-6, "bisel propio gana");
+    }
+
+    #[test]
+    fn detalle_por_voxel_se_hornea_por_material() {
+        // Cierra la limitación HONESTA: dos materiales del bioma deben lucir distinto a
+        // la vez → cada uno hornea su detalle POR VOXEL en el grid, vía el pipeline real
+        // (resolve_material → bioma_palette → generate_window → grid.detail_at).
+        let mut p = Project::starter();
+        let b0 = p.biomas[0].clone();
+        let (g_id, c_id) = (b0.ground, b0.cliff);
+        assert_ne!(g_id, c_id, "el bioma starter distingue suelo de acantilado");
+
+        // Suelo RUGOSO+duro (rug alto, bisel 0); acantilado LISO (rug 0, bisel 1).
+        let set_det = |p: &mut Project, id: u64, r: f32, b: f32| {
+            let m = p.materiales.iter_mut().find(|m| m.id == id).unwrap();
+            m.rugosidad = Some(r);
+            m.bisel = Some(b);
+        };
+        set_det(&mut p, g_id, 1.4, 0.0);
+        set_det(&mut p, c_id, 0.0, 1.0);
+
+        // La paleta resuelta lleva el detalle POR MATERIAL (lo que el escalar global
+        // no distinguía).
+        let rg = p.resolve_material(g_id);
+        let rc = p.resolve_material(c_id);
+        assert_eq!(rg.detalle, (1.4, 0.0), "suelo rugoso/duro");
+        assert_eq!(rc.detalle, (0.0, 1.0), "acantilado liso/biselado");
+        assert_ne!(rg.detalle, rc.detalle, "dos materiales, dos looks");
+
+        // Y se hornea por voxel al generar la ventana: aparecen ambos códigos distintos
+        // + aire sin autor (retrocompat). Byte de detalle = 1 + round(norm·254): el
+        // suelo da rug alto (~238) y bisel piso (1); el acantilado, rug piso y bisel alto.
+        let palette = p.bioma_palette(&b0);
+        let grid = b0.generate_window(7, &palette, [40, 48, 40], [0, 0]);
+        let (mut suelo, mut cliff, mut aire) = (false, false, false);
+        let dim = grid.dim();
+        for z in 0..dim[2] {
+            for y in 0..dim[1] {
+                for x in 0..dim[0] {
+                    match grid.detail_at(x, y, z).unwrap() {
+                        [r, b] if r >= 200 && b <= 5 => suelo = true,
+                        [r, b] if r <= 5 && b >= 200 => cliff = true,
+                        [0, 0] => aire = true,
+                        _ => {}
+                    }
+                }
+            }
+        }
+        assert!(suelo, "el suelo rugoso se horneó por voxel");
+        assert!(cliff, "el acantilado liso/biselado se horneó por voxel (distinto del suelo)");
+        assert!(aire, "quedan voxels sin autor (aire/agua) en look global — retrocompat");
+    }
+
+    #[test]
+    fn herencia_con_ciclo_no_cuelga() {
+        let mut p = Project::starter();
+        let a = p.alloc_id();
+        let b = p.alloc_id();
+        p.materiales.push(MaterialDef { id: a, name: "a".into(), parent: Some(b), role: MatRole::Terreno, color: None, grain: None, brillo: None, rugosidad: None, bisel: None, leyes: vec![], builtin: None });
+        p.materiales.push(MaterialDef { id: b, name: "b".into(), parent: Some(a), role: MatRole::Terreno, color: None, grain: None, brillo: None, rugosidad: None, bisel: None, leyes: vec![], builtin: None });
+        // No debe colgarse; cae al gris neutro.
+        let r = p.resolve_material(a);
+        assert_eq!(r.color, [150, 150, 150]);
     }
 
     #[test]
@@ -516,11 +1934,68 @@ mod tests {
         assert!(s.handheld > 0.0);
     }
 
+    #[test]
+    fn ventana_de_escena_sigue_al_reparto() {
+        let dim = world_dim(128); // [128, 51, 128] → medio = 64
+        // Un actor que camina lejos del origen (más allá de la caja finita vieja):
+        // un keyframe en grilla 18, otro en 600 → coords de MUNDO, no acotadas.
+        let s = SceneSpec {
+            id: 0,
+            name: "caminata larga".into(),
+            mundo: 0,
+            duration: 10.0,
+            actors: vec![ActorSpec {
+                character: 0,
+                keys: vec![
+                    ActorKeySpec { t: 0.0, gx: 18.0, gz: 64.0, clip: None, face: None },
+                    ActorKeySpec { t: 10.0, gx: 600.0, gz: 64.0, clip: None, face: None },
+                ],
+                frame_rate: None,
+            }],
+            shots: vec![],
+            handheld: 0.0,
+            atmosfera: None,
+            caida: None,
+            sucesos: Vec::new(),
+        };
+        let scripts = s.scripts();
+
+        // Al final el reparto está cerca de wx=600: la ventana lo centra (su columna
+        // local cae cerca de dim/2), cosa imposible en una caja fija centrada en 0.
+        let o_fin = window_origin_for_cast(&scripts, 10.0, dim);
+        let local_x = 600 - o_fin[0];
+        assert!(
+            (local_x - dim[0] as i32 / 2).abs() <= SCENE_WINDOW_STEP,
+            "el reparto queda centrado en la ventana (local_x={local_x})"
+        );
+
+        // El origen se snappea al paso (sólo salta a múltiplos) → no regenera por cuadro.
+        assert_eq!(o_fin[0] % SCENE_WINDOW_STEP, 0);
+        assert_eq!(o_fin[1] % SCENE_WINDOW_STEP, 0);
+
+        // Y la ventana se MUEVE entre el principio y el final (mundo infinito, no caja).
+        let o_ini = window_origin_for_cast(&scripts, 0.0, dim);
+        assert_ne!(o_ini[0], o_fin[0], "la ventana siguió al reparto en X");
+
+        // Sin reparto: mundo centrado en el origen (compatibilidad con el preview fijo).
+        assert_eq!(window_origin_for_cast(&[], 0.0, dim), [0, 0]);
+    }
+
     #[test]
     fn starter_trae_escena_y_personajes() {
         let p = Project::starter();
-        assert_eq!(p.characters.len(), 3);
-        assert_eq!(p.scenes.len(), 1);
-        assert_eq!(p.scenes[0].world, 0);
+        assert_eq!(p.seres.len(), 3);
+        assert_eq!(p.escenas.len(), 1);
+        // La escena referencia un mundo válido por id.
+        assert!(p.mundo(p.escenas[0].mundo).is_some());
+        // Los 30 materiales semilla están sembrados (flora + terreno + casa).
+        assert_eq!(p.materiales.len(), 31);
+        assert!(p.material_id_for(Material::Sand).is_some());
+        assert!(p.material_id_for(Material::Basalto).is_some());
+        assert!(p.material_id_for(Material::Ladrillo).is_some());
+        assert!(p.material_id_for(Material::Vidrio).is_some());
+        // El vidrio (y las rocas pulidas) resuelven brillo > 0; el ladrillo, mate.
+        assert!(p.resolve_material(p.material_id_for(Material::Vidrio).unwrap()).brillo > 0.5);
+        assert_eq!(p.resolve_material(p.material_id_for(Material::Ladrillo).unwrap()).brillo, 0.0);
     }
 }
diff --git a/llimphi-voxel/src/urbe.rs b/llimphi-voxel/src/urbe.rs
new file mode 100644
index 0000000..83afbae
--- /dev/null
+++ b/llimphi-voxel/src/urbe.rs
@@ -0,0 +1,348 @@
+//! **Planeamiento urbano**: convierte la mancha de pueblo de un bioma en una traza
+//! LIMPIA y NIVELADA — plaza central con iglesia, avenidas en cruz, cuadras
+//! regladas con calles y veredas — **sin escalones**. El suelo del casco se aplana
+//! a una sola cota (la del centro del pueblo) y el borde se funde con el terreno
+//! natural por una rampa perimetral, así el auto rueda por calles planas.
+//!
+//! Como todo el world-gen, es **función pura de coordenadas de mundo**: cada
+//! columna `(wx, wz)` se consulta sola, sin estado compartido, así el *streaming*
+//! encaja ventana a ventana (mismo pueblo en cualquier encuadre).
+//!
+//! El retículo: el mundo se parte en celdas de [`CELDA`] voxels; **cada** celda
+//! aloja un pueblo, centrado con jitter. El `densidad_urbana` del bioma mueve el
+//! **radio** del casco (aldea chica ↔ ciudad extendida), no la existencia — así la
+//! traza siempre aparece y es deterministamente ubicable.
+
+use crate::terrain::hash2;
+
+/// Lado de la celda del retículo de pueblos (voxels). Cada celda aloja un pueblo.
+/// Grande respecto al radio máximo → queda campo entre pueblos.
+const CELDA: i32 = 176;
+/// Radio máximo del casco urbano (ciudad densa), en voxels.
+const RADIO_MAX: i32 = 62;
+/// Radio mínimo del casco (aldea dispersa), en voxels.
+const RADIO_MIN: i32 = 26;
+/// Jitter máximo del centro dentro de la celda (voxels).
+const JITTER: i32 = 26;
+/// Franja perimetral (voxels) donde la cota nivelada se funde con el terreno
+/// natural: la **rampa** que evita el acantilado en el borde del casco.
+const RIM: i32 = 12;
+/// Paso de la grilla de cuadras (voxels): ancho de cuadra + calle.
+const CUADRA: i32 = 22;
+/// Media-anchura de calle local (voxels). Ancho total = `2·HW − 1`.
+const CALLE_HW: i32 = 3;
+/// Media-anchura de avenida: las dos líneas centrales de la cruz, más anchas.
+const AVE_HW: i32 = 5;
+/// Media-lado de la plaza central empedrada (voxels).
+const PLAZA: i32 = 8;
+
+// Paleta de la calzada (se conserva la del pueblo viejo para no romper tests).
+const ASF_CALLE: [u8; 3] = [64, 66, 72]; // asfalto de calle local
+const ASF_AVE: [u8; 3] = [58, 60, 66]; // asfalto de avenida
+const VEREDA: [u8; 3] = [150, 150, 146]; // vereda / cordón
+const LINEA: [u8; 3] = [200, 178, 60]; // línea amarilla central
+const PLAZA_A: [u8; 3] = [196, 190, 176]; // baldosa clara
+const PLAZA_B: [u8; 3] = [150, 150, 146]; // baldosa oscura
+
+/// Un pueblo ubicado: su centro de mundo, la cota nivelada del casco y una semilla
+/// estable propia (para variar estilos entre pueblos).
+#[derive(Clone, Copy, Debug)]
+pub struct Pueblo {
+    pub centro: [i32; 2],
+    /// Cota del suelo nivelado (índice `y` del voxel superior del casco).
+    pub suelo: u32,
+    /// Radio del casco urbano (voxels).
+    pub radio: i32,
+    /// Semilla estable del pueblo.
+    pub seed: u32,
+}
+
+/// Zonificación de una columna del casco (lo que se pinta en la superficie).
+#[derive(Clone, Copy, PartialEq, Eq, Debug)]
+pub enum Zona {
+    /// Interior de cuadra: suelo natural (patio); puede recibir una casa en el centro.
+    Parcela,
+    /// Plaza empedrada.
+    Plaza,
+    /// Avenida (calzada ancha de la cruz central).
+    Avenida,
+    /// Calle local.
+    Calle,
+    /// Vereda / cordón.
+    Vereda,
+    /// Rampa perimetral: suelo natural en transición, sin pavimento.
+    Rampa,
+}
+
+impl Zona {
+    /// Color a estampar en la superficie, o `None` si conserva el material natural.
+    fn pav(self, u: i32, v: i32) -> Option<[u8; 3]> {
+        match self {
+            Zona::Parcela | Zona::Rampa => None,
+            Zona::Vereda => Some(VEREDA),
+            Zona::Calle => Some(ASF_CALLE),
+            Zona::Avenida => {
+                // Línea amarilla discontinua sobre el eje de la avenida.
+                let sobre_eje = u == 0 || v == 0;
+                let guion = (u + v).rem_euclid(6) < 3;
+                if sobre_eje && guion {
+                    Some(LINEA)
+                } else {
+                    Some(ASF_AVE)
+                }
+            }
+            Zona::Plaza => Some(if (u + v).rem_euclid(2) == 0 { PLAZA_A } else { PLAZA_B }),
+        }
+    }
+}
+
+/// Resultado de consultar una columna: la cota del suelo (nivelada o rampa) y el
+/// pavimento a pintar encima (si lo hay).
+#[derive(Clone, Copy, Debug)]
+pub struct Plano {
+    pub suelo: u32,
+    pub pav: Option<[u8; 3]>,
+}
+
+/// El **planificador urbano** de un bioma: retículo de pueblos parametrizado por la
+/// densidad urbana. Sin estado — todo se deriva de `(seed, wx, wz)`.
+#[derive(Clone, Copy, Debug)]
+pub struct Urbe {
+    seed: u32,
+    /// Radio del casco, interpolado por `densidad_urbana`.
+    radio: i32,
+    dy: u32,
+}
+
+impl Urbe {
+    /// Construye el planificador para una `seed`, un `densidad_urbana ∈ [0,1]` y el
+    /// alto del mundo `dy`.
+    pub fn new(seed: u32, densidad_urbana: f32, dy: u32) -> Self {
+        let d = densidad_urbana.clamp(0.0, 1.0);
+        let radio = RADIO_MIN + ((RADIO_MAX - RADIO_MIN) as f32 * d) as i32;
+        Urbe { seed, radio, dy }
+    }
+
+    /// Centro de mundo del pueblo de la celda `(cx, cz)` del retículo (con jitter),
+    /// y su semilla estable.
+    fn centro_celda(&self, cx: i32, cz: i32) -> (i32, i32, u32) {
+        let s = self
+            .seed
+            .wrapping_add((cx as u32).wrapping_mul(0x9E37_79B9))
+            .wrapping_add((cz as u32).wrapping_mul(0x85EB_CA77))
+            ^ 0x7011;
+        let jx = ((hash2(cx, cz, s ^ 0xA1) - 0.5) * 2.0 * JITTER as f32) as i32;
+        let jz = ((hash2(cx, cz, s ^ 0xB2) - 0.5) * 2.0 * JITTER as f32) as i32;
+        let bx = cx * CELDA + CELDA / 2 + jx;
+        let bz = cz * CELDA + CELDA / 2 + jz;
+        (bx, bz, s)
+    }
+
+    /// El pueblo cuyo casco cubre la columna `(wx, wz)`, o `None` si es campo. `h`
+    /// da la altura natural del terreno (para fijar la cota nivelada del casco en el
+    /// centro y para la rampa perimetral).
+    pub fn pueblo_en(&self, wx: i32, wz: i32, h: &impl Fn(i32, i32) -> u32) -> Option<(Pueblo, i32)> {
+        let cx0 = wx.div_euclid(CELDA);
+        let cz0 = wz.div_euclid(CELDA);
+        let mut mejor: Option<(Pueblo, i32)> = None;
+        for dcx in -1..=1 {
+            for dcz in -1..=1 {
+                let (bx, bz, s) = self.centro_celda(cx0 + dcx, cz0 + dcz);
+                let dx = wx - bx;
+                let dz = wz - bz;
+                let d2 = dx * dx + dz * dz;
+                if d2 > self.radio * self.radio {
+                    continue;
+                }
+                let d = (d2 as f32).sqrt() as i32;
+                if mejor.map_or(true, |(_, md)| d < md) {
+                    let suelo = h(bx, bz).clamp(1, self.dy.saturating_sub(2));
+                    mejor = Some((
+                        Pueblo { centro: [bx, bz], suelo, radio: self.radio, seed: s },
+                        d,
+                    ));
+                }
+            }
+        }
+        mejor
+    }
+
+    /// Consulta la columna `(wx, wz)`: cota del suelo (nivelada dentro del casco,
+    /// rampa hacia el terreno natural en el borde) y pavimento a pintar. `None` =
+    /// campo abierto (el terreno manda).
+    pub fn consultar(&self, wx: i32, wz: i32, h: &impl Fn(i32, i32) -> u32) -> Option<Plano> {
+        let (p, d) = self.pueblo_en(wx, wz, h)?;
+        let natural = h(wx, wz);
+        let interior = p.radio - RIM;
+        let suelo = if d <= interior {
+            p.suelo
+        } else {
+            // Rampa: mezcla lineal cota↔natural sobre la franja perimetral.
+            let t = ((d - interior) as f32 / RIM as f32).clamp(0.0, 1.0);
+            let a = p.suelo as f32;
+            let b = natural as f32;
+            (a + (b - a) * t).round() as u32
+        };
+        // Sólo el interior del casco (dejando un margen antes de la rampa) recibe
+        // traza urbana; la franja perimetral queda como suelo natural en rampa.
+        if d > interior - 2 {
+            return Some(Plano { suelo, pav: Zona::Rampa.pav(0, 0) });
+        }
+        let (u, v) = (wx - p.centro[0], wz - p.centro[1]);
+        let zona = self.zona(u, v);
+        Some(Plano { suelo, pav: zona.pav(u, v) })
+    }
+
+    /// Zonificación de la columna en coordenadas **locales** al centro del pueblo.
+    /// Plaza central → cruz de avenidas → grilla de calles → interior de cuadra.
+    pub fn zona(&self, u: i32, v: i32) -> Zona {
+        if u.abs() <= PLAZA && v.abs() <= PLAZA {
+            return Zona::Plaza;
+        }
+        let bu = banda(u);
+        let bv = banda(v);
+        match (bu, bv) {
+            (None, None) => Zona::Parcela,
+            _ => {
+                // ¿Alguna banda tiene asfalto interior en esta columna? (no sólo cordón)
+                let interior_u = bu.map_or(false, |b| b.d < b.hw - 1);
+                let interior_v = bv.map_or(false, |b| b.d < b.hw - 1);
+                if !interior_u && !interior_v {
+                    return Zona::Vereda;
+                }
+                let avenida = bu.map_or(false, |b| b.ave) || bv.map_or(false, |b| b.ave);
+                if avenida {
+                    Zona::Avenida
+                } else {
+                    Zona::Calle
+                }
+            }
+        }
+    }
+
+    /// El **radio interior** urbanizable (dentro de la rampa) — lo usan los pases de
+    /// casas / iglesia para no plantar nada en la rampa.
+    pub fn radio_interior(&self) -> i32 {
+        self.radio - RIM - 2
+    }
+}
+
+/// Una banda de calzada sobre un eje: la grilla centrada tiene líneas en los
+/// múltiplos de [`CUADRA`]; la línea `k = 0` es avenida (más ancha).
+#[derive(Clone, Copy)]
+struct Banda {
+    /// Distancia al eje de la calzada más cercana.
+    d: i32,
+    /// Media-anchura de esa calzada.
+    hw: i32,
+    /// `true` si es una de las dos avenidas centrales.
+    ave: bool,
+}
+
+/// La banda de calzada que cubre la coordenada local `t`, o `None` si cae en cuadra.
+fn banda(t: i32) -> Option<Banda> {
+    let k = (t as f32 / CUADRA as f32).round() as i32;
+    let d = (t - k * CUADRA).abs();
+    let ave = k == 0;
+    let hw = if ave { AVE_HW } else { CALLE_HW };
+    if d < hw {
+        Some(Banda { d, hw, ave })
+    } else {
+        None
+    }
+}
+
+/// Los pueblos cuyos cascos intersecan la ventana `origin..origin+dim` (más el
+/// margen del radio). Para los pases de mobiliario/casas que estampan una vez por
+/// pueblo (iglesia, fuente, cuadras).
+pub fn pueblos_en_ventana(
+    urbe: &Urbe,
+    origin: [i32; 2],
+    dim: [u32; 3],
+    h: &impl Fn(i32, i32) -> u32,
+) -> Vec<Pueblo> {
+    let [ox, oz] = origin;
+    let cx0 = (ox - urbe.radio).div_euclid(CELDA);
+    let cx1 = (ox + dim[0] as i32 + urbe.radio).div_euclid(CELDA);
+    let cz0 = (oz - urbe.radio).div_euclid(CELDA);
+    let cz1 = (oz + dim[2] as i32 + urbe.radio).div_euclid(CELDA);
+    let mut out = Vec::new();
+    for cx in cx0..=cx1 {
+        for cz in cz0..=cz1 {
+            let (bx, bz, s) = urbe.centro_celda(cx, cz);
+            let suelo = h(bx, bz).clamp(1, urbe.dy.saturating_sub(2));
+            out.push(Pueblo { centro: [bx, bz], suelo, radio: urbe.radio, seed: s });
+        }
+    }
+    out
+}
+
+// Offsets locales del mobiliario cívico (relativos al centro del pueblo).
+/// Desplazamiento en `v` (norte) del centro de la iglesia respecto a la plaza.
+pub const IGLESIA_V: i32 = -(PLAZA + 6);
+/// Media-lado de la plaza (para colocar bancos/árboles/iglesia desde afuera).
+pub const PLAZA_HALF: i32 = PLAZA;
+/// Paso de la grilla de cuadras, reexportado para el pase de casas.
+pub const PASO_CUADRA: i32 = CUADRA;
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    fn llano(_x: i32, _z: i32) -> u32 {
+        12
+    }
+
+    #[test]
+    fn cada_celda_aloja_un_pueblo_ubicable() {
+        let urbe = Urbe::new(7, 0.7, 40);
+        // Consultado en su centro exacto, el pueblo de la celda (0,0) da distancia 0.
+        let (bx, bz, _) = urbe.centro_celda(0, 0);
+        let (p, d) = urbe.pueblo_en(bx, bz, &llano).expect("hay pueblo en la celda 0");
+        assert_eq!(d, 0);
+        assert_eq!(p.suelo, 12);
+        assert_eq!(p.centro, [bx, bz]);
+    }
+
+    #[test]
+    fn el_centro_es_plaza() {
+        let urbe = Urbe::new(3, 0.6, 40);
+        assert_eq!(urbe.zona(0, 0), Zona::Plaza);
+        assert_eq!(urbe.zona(PLAZA, 0), Zona::Plaza);
+        // Justo afuera de la plaza, sobre el eje, hay avenida.
+        assert_eq!(urbe.zona(PLAZA + 1, 0), Zona::Avenida);
+    }
+
+    #[test]
+    fn el_casco_esta_nivelado_sin_escalones() {
+        // Terreno inclinado en rampa: el casco debe salir PLANO (sin escalones).
+        let pend = |x: i32, _z: i32| (10 + x / 3).max(1) as u32;
+        let urbe = Urbe::new(11, 0.8, 60);
+        let (bx, bz, _) = urbe.centro_celda(0, 0);
+        let datum = pend(bx, bz);
+        // Recorremos una franja de avenida (v=0) por el interior del casco: toda a
+        // la misma cota, sin saltos.
+        let mut previa: Option<u32> = None;
+        let mut escalones = 0;
+        for du in -urbe.radio_interior()..=urbe.radio_interior() {
+            if let Some(p) = urbe.consultar(bx + du, bz, &pend) {
+                assert_eq!(p.suelo, datum, "el casco no está nivelado en du={du}");
+                if let Some(pr) = previa {
+                    if p.suelo.abs_diff(pr) > 0 {
+                        escalones += 1;
+                    }
+                }
+                previa = Some(p.suelo);
+            }
+        }
+        assert_eq!(escalones, 0, "la avenida tiene escalones");
+    }
+
+    #[test]
+    fn la_avenida_tiene_calzada_y_linea() {
+        let urbe = Urbe::new(5, 0.7, 40);
+        // Sobre el eje de la avenida, más allá de la plaza, hay línea o asfalto.
+        let z = urbe.zona(0, PLAZA + 3);
+        assert_eq!(z, Zona::Avenida);
+    }
+}
diff --git a/llimphi-voxel/src/vox.rs b/llimphi-voxel/src/vox.rs
index 082cdfe..2c98e58 100644
--- a/llimphi-voxel/src/vox.rs
+++ b/llimphi-voxel/src/vox.rs
@@ -8,7 +8,7 @@
 //! `y` del grid, la `y` del `.vox` pasa a la profundidad `z`).
 //!
 //! La capa de juego es la dueña de esto (no el motor ni el puente): el puente
-//! sólo entiende bytes, el motor sólo voxels; acá se casan (CLAUDE.md regla #4).
+//! sólo entiende bytes, el motor sólo voxels; aquí se casan (CLAUDE.md regla #4).
 
 use std::fmt;
 use std::path::Path;
diff --git a/llimphi-voxel/src/worldgen.rs b/llimphi-voxel/src/worldgen.rs
index 1d33e4c..4dc16d6 100644
--- a/llimphi-voxel/src/worldgen.rs
+++ b/llimphi-voxel/src/worldgen.rs
@@ -1,27 +1,29 @@
-//! **Creador de mundos**: en vez de un terreno hardcodeado (como [`terrain`]
-//! (crate::terrain), que es un mundo de pasto fijo), un [`WorldRecipe`]
-//! *parametriza* el relieve y los materiales — y produce el [`VoxelGrid`]. Un
-//! mundo concreto (desierto, pradera, …) es una **receta**, no una función nueva.
+//! **Bioma**: el relieve + qué materiales lo pintan. Antes esto era `WorldRecipe`
+//! con los materiales clavados en un `enum`; ahora un [`Bioma`] referencia
+//! **materiales autorables por id** (los define el [`Project`](crate::Project)) y la
+//! semilla vive en el [`Mundo`](crate::Mundo) que lo envuelve. El render no consume
+//! ids: la app **resuelve** el bioma a una [`BiomaPalette`] (colores concretos) y la
+//! pasa a [`Bioma::generate_window`].
 //!
-//! Dos cosas que pidió el corto del desierto salen de acá:
-//! - **Materiales** ([`Material`]): arena, agua, roca, cactus… cada uno con su
-//!   color. El terreno se pinta por material, no por banda de altura cruda.
-//! - **Receta del desierto** ([`WorldRecipe::desert`]): llano de arena, **pocas
-//!   montañas**, **pocos ríos**, **cactus** ralos.
+//! La altura sigue siendo **función pura de mundo** ([`Bioma::column_height`]):
+//! mismo `(seed, wx, wz)` → misma columna, así un bioma también streamea
+//! (continuidad de [`WorldStream`](crate::WorldStream)).
 //!
-//! La altura sigue siendo **función pura de mundo** ([`WorldRecipe::column_height`]):
-//! mismo `(wx, wz)` → misma columna, así un mundo-receta también podrá streamear
-//! (cuando se cablee a [`WorldStream`](crate::WorldStream)).
+//! El `enum` [`Material`] sobrevive **sólo como paleta semilla**: da los colores
+//! de fábrica (arena, pasto, roca…) con los que el `Project` siembra sus
+//! `MaterialDef` iniciales. No es el material autorable — ese es
+//! [`MaterialDef`](crate::MaterialDef).
 
 use llimphi_3d::VoxelGrid;
 use serde::{Deserialize, Serialize};
 
+use crate::mineral::{aspecto_hit, mineral_shade, MineralUso};
 use crate::terrain::{fbm, hash2, smooth, world_scale};
 
-/// Un **material** del mundo: la unidad semántica con la que el creador pinta los
-/// voxels (en vez de un color suelto). Da color y solidez; más adelante puede
-/// llevar propiedades físicas (flotabilidad del agua, daño del cactus, etc.).
-#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize)]
+/// **Paleta semilla**: los materiales de fábrica con su color canónico. El
+/// `Project` siembra un `MaterialDef` por variante (salvo `Air`) al arrancar, y la
+/// UI puede ofrecerlos como punto de partida. No es el material autorable.
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, Serialize, Deserialize)]
 pub enum Material {
     /// Vacío (aire) — no se dibuja.
     Air,
@@ -37,10 +39,61 @@ pub enum Material {
     Water,
     /// Carne de cactus (verde).
     Cactus,
+    /// Follaje/hojas (copas de árboles, arbustos, palmeras) — verde profundo.
+    Leaf,
+    /// Grano dorado (espigas de trigo, pastos secos).
+    Wheat,
+    /// Corola/flor (pétalos coloridos) — violeta lavanda.
+    Bloom,
+    /// Tierra parda (suelo desnudo).
+    Tierra,
+    /// Arcilla rojiza.
+    Arcilla,
+    /// Grava gris suelta.
+    Grava,
+    /// Arenisca (roca sedimentaria clara).
+    Arenisca,
+    /// Basalto (roca volcánica oscura).
+    Basalto,
+    /// Granito (roca ígnea moteada).
+    Granito,
+    /// Mármol (roca clara pulida).
+    Marmol,
+    /// Hielo (glaciar, congelado).
+    Hielo,
+    /// Lava (roca fundida, brillante).
+    Lava,
+    /// Musgo (verde húmedo sobre roca/tierra).
+    Musgo,
+    // --- Materiales de casa (construcción) ---
+    /// Ladrillo cocido (muros).
+    Ladrillo,
+    /// Madera de tablón (vigas, pisos, puertas).
+    Madera,
+    /// Hormigón (concreto gris).
+    Hormigon,
+    /// Yeso/estuco (revoque claro).
+    Yeso,
+    /// Teja de barro (techos).
+    Teja,
+    /// Adobe (barro secado al sol).
+    Adobe,
+    /// Pizarra (techo oscuro).
+    Pizarra,
+    /// Paja (techo de paja).
+    Paja,
+    /// Vidrio (ventanas) — lustroso.
+    Vidrio,
+    /// Acero (estructura metálica) — lustroso.
+    Acero,
+    /// Cerámica esmaltada (azulejos) — lustrosa.
+    Ceramica,
+    /// Azul profundo brillante (paneles solares, vidrio azulado, revestimientos).
+    Azul,
 }
 
 impl Material {
-    /// Color RGB del material.
+    /// Color RGB de fábrica del material.
     pub fn color(self) -> [u8; 3] {
         match self {
             Material::Air => [0, 0, 0],
@@ -50,6 +103,75 @@ impl Material {
             Material::Snow => [236, 240, 250],
             Material::Water => [54, 118, 158],
             Material::Cactus => [74, 128, 70],
+            Material::Leaf => [56, 108, 52],
+            Material::Wheat => [214, 182, 96],
+            Material::Bloom => [158, 116, 202],
+            Material::Tierra => [110, 82, 54],
+            Material::Arcilla => [172, 120, 92],
+            Material::Grava => [140, 138, 132],
+            Material::Arenisca => [206, 172, 122],
+            Material::Basalto => [58, 56, 64],
+            Material::Granito => [156, 142, 140],
+            Material::Marmol => [232, 230, 226],
+            Material::Hielo => [198, 224, 236],
+            Material::Lava => [232, 100, 42],
+            Material::Musgo => [78, 108, 58],
+            Material::Ladrillo => [168, 76, 58],
+            Material::Madera => [150, 104, 60],
+            Material::Hormigon => [176, 174, 168],
+            Material::Yeso => [224, 218, 206],
+            Material::Teja => [178, 88, 60],
+            Material::Adobe => [198, 156, 110],
+            Material::Pizarra => [72, 76, 84],
+            Material::Paja => [196, 168, 96],
+            Material::Vidrio => [176, 208, 220],
+            Material::Acero => [150, 154, 162],
+            Material::Ceramica => [96, 168, 190],
+            Material::Azul => [40, 66, 150],
+        }
+    }
+
+    /// **Grano de materia** de fábrica `[0,1]` (textura por vóxel; ver [`grained`]).
+    pub fn grain(self) -> f32 {
+        match self {
+            Material::Sand => 0.55,
+            Material::Grass | Material::Rock => 0.45,
+            Material::Leaf => 0.5,
+            Material::Wheat => 0.5,
+            Material::Snow => 0.25,
+            Material::Tierra | Material::Grava | Material::Musgo => 0.55,
+            Material::Arcilla | Material::Arenisca => 0.45,
+            Material::Basalto | Material::Granito => 0.4,
+            Material::Marmol => 0.15,
+            Material::Hielo => 0.12,
+            Material::Lava => 0.2,
+            Material::Ladrillo | Material::Adobe => 0.4,
+            Material::Madera => 0.45,
+            Material::Hormigon => 0.3,
+            Material::Yeso => 0.2,
+            Material::Teja => 0.35,
+            Material::Pizarra => 0.25,
+            Material::Paja => 0.5,
+            Material::Vidrio => 0.05,
+            Material::Acero | Material::Ceramica => 0.1,
+            Material::Azul => 0.12,
+            Material::Air | Material::Water | Material::Cactus | Material::Bloom => 0.0,
+        }
+    }
+
+    /// **Brillo/reflectividad** `[0,1]` de fábrica del material: `0` = mate. Los de
+    /// obra lustrosos (vidrio, acero, cerámica esmaltada) y las rocas pulidas
+    /// (mármol) o vidriosas (hielo) devuelven lustre especular al sol.
+    pub fn brillo(self) -> f32 {
+        match self {
+            Material::Vidrio => 0.85,
+            Material::Acero => 0.7,
+            Material::Hielo => 0.62,
+            Material::Ceramica => 0.58,
+            Material::Azul => 0.45,
+            Material::Marmol => 0.5,
+            Material::Lava => 0.28,
+            _ => 0.0,
         }
     }
 
@@ -58,19 +180,42 @@ impl Material {
         !matches!(self, Material::Air)
     }
 
-    /// Todos los materiales, en orden de catálogo (para que un editor cicle entre
-    /// ellos).
-    pub const ALL: [Material; 7] = [
-        Material::Air,
+    /// Las variantes sembrables (sin `Air`), en orden de catálogo.
+    pub const ALL: [Material; 31] = [
         Material::Sand,
         Material::Grass,
         Material::Rock,
         Material::Snow,
         Material::Water,
         Material::Cactus,
+        Material::Leaf,
+        Material::Wheat,
+        Material::Bloom,
+        Material::Tierra,
+        Material::Arcilla,
+        Material::Grava,
+        Material::Arenisca,
+        Material::Basalto,
+        Material::Granito,
+        Material::Marmol,
+        Material::Hielo,
+        Material::Lava,
+        Material::Musgo,
+        Material::Ladrillo,
+        Material::Madera,
+        Material::Hormigon,
+        Material::Yeso,
+        Material::Teja,
+        Material::Adobe,
+        Material::Pizarra,
+        Material::Paja,
+        Material::Vidrio,
+        Material::Acero,
+        Material::Ceramica,
+        Material::Azul,
     ];
 
-    /// Nombre legible (español) para la UI.
+    /// Nombre legible (español).
     pub fn label(self) -> &'static str {
         match self {
             Material::Air => "aire",
@@ -80,96 +225,257 @@ impl Material {
             Material::Snow => "nieve",
             Material::Water => "agua",
             Material::Cactus => "cactus",
+            Material::Leaf => "follaje",
+            Material::Wheat => "trigo",
+            Material::Bloom => "flor",
+            Material::Tierra => "tierra",
+            Material::Arcilla => "arcilla",
+            Material::Grava => "grava",
+            Material::Arenisca => "arenisca",
+            Material::Basalto => "basalto",
+            Material::Granito => "granito",
+            Material::Marmol => "mármol",
+            Material::Hielo => "hielo",
+            Material::Lava => "lava",
+            Material::Musgo => "musgo",
+            Material::Ladrillo => "ladrillo",
+            Material::Madera => "madera",
+            Material::Hormigon => "hormigón",
+            Material::Yeso => "yeso",
+            Material::Teja => "teja",
+            Material::Adobe => "adobe",
+            Material::Pizarra => "pizarra",
+            Material::Paja => "paja",
+            Material::Vidrio => "vidrio",
+            Material::Acero => "acero",
+            Material::Ceramica => "cerámica",
+            Material::Azul => "azul",
         }
     }
 
-    /// El material siguiente en el catálogo (cicla) — para botones de ciclo.
+    /// El material siguiente del catálogo (cicla, salta Air).
     pub fn next(self) -> Material {
         let i = Material::ALL.iter().position(|&m| m == self).unwrap_or(0);
         Material::ALL[(i + 1) % Material::ALL.len()]
     }
 }
 
-/// Qué planta esparce un mundo y con qué forma.
+/// **Forma de un objeto** colocable (un material con rol objeto): el catálogo de
+/// vegetación que brota sobre el terreno. Cada variante es una silueta de vóxels
+/// distinta que [`Bioma::place_objeto`] estampa de forma determinista por posición
+/// de mundo (seamless entre ventanas de streaming). El **color de follaje** lo pone
+/// el material del objeto; los troncos leñosos usan un marrón interno ([`WOOD`]).
 #[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize)]
-pub enum Flora {
-    /// Sin vegetación.
-    None,
-    /// Cactus columnar (tronco + algún brazo) — el desierto.
-    Cactus,
+pub enum Forma {
+    /// Columna vertical con brazos (cactus).
+    Columnar,
+    /// Matas de grama: unas pocas hojas cortas (1–2 de alto).
+    Pasto,
+    /// Arbusto: mata redondeada de follaje baja, sin tronco.
+    Arbusto,
+    /// Árbol frondoso: tronco leñoso + copa esférica.
+    Arbol,
+    /// Conífera: tronco corto + tiers cónicos apilados que rematan en punta.
+    Conifera,
+    /// Palmera: tronco alto y fino (con leve curva) + corona de frondas radiales.
+    Palmera,
+    /// Helecho: frondas bajas que arquean desde la base, sin tronco.
+    Helecho,
+    /// Flor: tallo fino verde + corola coloreada en cruz.
+    Flor,
+    /// Bambú (selva): mata de cañas altas y finas con nudos.
+    Bambu,
+    /// Platanera (selva): tallo corto + hojas anchas grandes que arquean.
+    Platanera,
+    /// Roble (bosque): tronco grueso + copa amplia achatada.
+    Roble,
+    /// Hongo (bosque): pie pálido + sombrero domado (color propio).
+    Hongo,
+    /// Tocón (bosque): cepa gruesa y baja de madera con musgo arriba.
+    Tocon,
+    /// Trigo (pradera): manojo de espigas altas doradas.
+    Trigo,
+    /// Junco (pradera/humedal): cañas finas altas con espadaña marrón.
+    Junco,
+    /// Lavanda (pradera): matojo bajo con espigas florales coloreadas.
+    Lavanda,
 }
 
-impl Flora {
-    /// Todas las opciones de flora (para ciclar en un editor).
-    pub const ALL: [Flora; 2] = [Flora::None, Flora::Cactus];
+impl Forma {
+    /// Todas las formas (para ciclar en un editor).
+    pub const ALL: [Forma; 16] = [
+        Forma::Columnar,
+        Forma::Pasto,
+        Forma::Arbusto,
+        Forma::Arbol,
+        Forma::Conifera,
+        Forma::Palmera,
+        Forma::Helecho,
+        Forma::Flor,
+        Forma::Bambu,
+        Forma::Platanera,
+        Forma::Roble,
+        Forma::Hongo,
+        Forma::Tocon,
+        Forma::Trigo,
+        Forma::Junco,
+        Forma::Lavanda,
+    ];
 
-    /// Nombre legible (español) para la UI.
+    /// Nombre legible (español).
     pub fn label(self) -> &'static str {
         match self {
-            Flora::None => "ninguna",
-            Flora::Cactus => "cactus",
+            Forma::Columnar => "columnar",
+            Forma::Pasto => "grama",
+            Forma::Arbusto => "arbusto",
+            Forma::Arbol => "árbol",
+            Forma::Conifera => "conífera",
+            Forma::Palmera => "palmera",
+            Forma::Helecho => "helecho",
+            Forma::Flor => "flor",
+            Forma::Bambu => "bambú",
+            Forma::Platanera => "platanera",
+            Forma::Roble => "roble",
+            Forma::Hongo => "hongo",
+            Forma::Tocon => "tocón",
+            Forma::Trigo => "trigo",
+            Forma::Junco => "junco",
+            Forma::Lavanda => "lavanda",
         }
     }
 
-    /// La flora siguiente (cicla).
-    pub fn next(self) -> Flora {
-        let i = Flora::ALL.iter().position(|&f| f == self).unwrap_or(0);
-        Flora::ALL[(i + 1) % Flora::ALL.len()]
+    /// La forma siguiente (cicla).
+    pub fn next(self) -> Forma {
+        let i = Forma::ALL.iter().position(|&f| f == self).unwrap_or(0);
+        Forma::ALL[(i + 1) % Forma::ALL.len()]
     }
 }
 
-/// La **receta de un mundo**: parámetros del relieve + materiales + flora. Producí
-/// el `VoxelGrid` con [`generate`](Self::generate). Presets: [`desert`](Self::desert),
-/// [`grassland`](Self::grassland).
-#[derive(Debug, Clone, Copy, Serialize, Deserialize)]
-pub struct WorldRecipe {
-    /// Semilla del ruido (mismo seed → mismo mundo).
-    pub seed: u32,
-    /// Nivel base del suelo, fracción del alto del mundo `[0,1]` (la llanura).
-    pub base: f32,
-    /// Amplitud de las ondulaciones suaves del suelo (dunas), fracción del alto.
-    pub dune: f32,
-    /// Amplitud de las montañas, fracción del alto.
-    pub relief: f32,
-    /// **Densidad de montañas** `[0,1]`: 0 = casi todo llano (sólo pocos picos
-    /// asoman), 1 = relieve por todos lados.
-    pub mountains: f32,
-    /// Nivel del agua, fracción del alto `[0,1]`: las depresiones por debajo se
-    /// llenan de [`Material::Water`].
-    pub water_level: f32,
-    /// **Densidad de ríos** `[0,1]`: 0 = sin ríos; mayor = canales más anchos/
-    /// frecuentes tallados hacia el agua.
-    pub rivers: f32,
-    /// Material de la superficie sólida (arena en el desierto, pasto en pradera).
-    pub ground: Material,
-    /// Material de acantilados/altura (roca).
-    pub cliff: Material,
-    /// Material de cumbre por encima de `peak_at` (nieve); `Air` = sin cumbre.
-    pub peak: Material,
-    /// Altura normalizada `[0,1]` a partir de la cual aparece `peak`.
-    pub peak_at: f32,
-    /// Flora y su densidad `[0,1]`.
-    pub flora: Flora,
-    pub flora_density: f32,
-    /// **Grano de materia** `[0,1]`: jitter de brillo *por vóxel* sobre el color del
-    /// material. `0` = caras planas de un color liso (el look "textura de Minecraft
-    /// estirada"); `~1` = superficie granular, densa, que parece materia y no bloque.
-    /// Es el **sello del motor**: lo que distancia del cubo plano sin tocar el shader
-    /// (la textura es el propio vóxel). Determinista por `(wx, y, wz, seed)`.
-    #[serde(default)]
+/// **Material resuelto** para el render: color + grano concretos (ya aplicada la
+/// herencia de [`MaterialDef`](crate::MaterialDef)). Es lo que entra a la paleta.
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub struct ResolvedMaterial {
+    pub color: [u8; 3],
     pub grain: f32,
+    /// Brillo/reflectividad `[0,1]` (vidrio, acero, cerámica esmaltada, mármol…);
+    /// `0` = mate. Lo lee el ray-march igual que el de los minerales (via el alpha
+    /// del voxel), así que un material lustroso glasea al sol.
+    pub brillo: f32,
+    /// **Detalle sub-voxel** `(rugosidad, bisel)` del material: se hornea POR VOXEL
+    /// en la superficie (via `VoxelGrid::set_detail`), así dos materiales del mismo
+    /// bioma lucen distinto a la vez (rugoso vs liso) — no un look global. `(0,0)` =
+    /// sin detalle (usa el look global del ray-march). Ver `Project::detalle_material`.
+    pub detalle: (f32, f32),
+}
+
+impl ResolvedMaterial {
+    /// Material mate (brillo 0).
+    pub fn new(color: [u8; 3], grain: f32) -> Self {
+        Self { color, grain, brillo: 0.0, detalle: (0.0, 0.0) }
+    }
+
+    /// Material con brillo explícito.
+    pub fn new_b(color: [u8; 3], grain: f32, brillo: f32) -> Self {
+        Self { color, grain, brillo, detalle: (0.0, 0.0) }
+    }
+
+    /// Adjunta el detalle sub-voxel `(rugosidad, bisel)` (builder).
+    pub fn con_detalle(mut self, detalle: (f32, f32)) -> Self {
+        self.detalle = detalle;
+        self
+    }
+}
+
+/// **Uso de un material como objeto** en un bioma: qué material, con qué densidad
+/// `[0,1]` brota, y con qué [`Forma`].
+#[derive(Debug, Clone, Copy, Serialize, Deserialize)]
+pub struct ObjetoUso {
+    pub material: u64,
+    pub densidad: f32,
+    pub forma: Forma,
+}
+
+/// **Uso de un ser** en un bioma: qué ser y con qué probabilidad `[0,1]` puebla.
+/// (Por ahora sólo dato del modelo; el spawn real vendrá con el motor.)
+#[derive(Debug, Clone, Copy, Serialize, Deserialize)]
+pub struct SereUso {
+    pub sere: u64,
+    pub probabilidad: f32,
+}
+
+/// **Paleta resuelta de un bioma**: los colores concretos con los que pintar. La
+/// app la arma resolviendo los ids del bioma contra los materiales del `Project`,
+/// y se la pasa a [`Bioma::generate_window`]. Así worldgen no conoce ids ni herencia.
+#[derive(Debug, Clone)]
+pub struct BiomaPalette {
+    pub ground: ResolvedMaterial,
+    pub cliff: ResolvedMaterial,
+    pub peak: Option<ResolvedMaterial>,
+    /// Color del agua (superficie de ríos/lagos).
+    pub agua: [u8; 3],
+    /// Objetos a esparcir: `(material resuelto, densidad, forma)`.
+    pub objetos: Vec<(ResolvedMaterial, f32, Forma)>,
+}
+
+impl BiomaPalette {
+    /// Paleta de prueba/arranque rápida con un solo material de terreno (sin agua
+    /// teñida especial ni objetos). Útil en tests y fallbacks.
+    pub fn flat(color: [u8; 3], grain: f32) -> Self {
+        let m = ResolvedMaterial::new(color, grain);
+        Self {
+            ground: m,
+            cliff: ResolvedMaterial::new(Material::Rock.color(), Material::Rock.grain()),
+            peak: None,
+            agua: Material::Water.color(),
+            objetos: Vec::new(),
+        }
+    }
+
+    /// Material resuelto de la superficie de la columna en `(wx, wz, y)`: decide
+    /// arena/roca/nieve por altura+pendiente (misma lógica que antes, pero sobre la
+    /// paleta resuelta). `peak_at` viene del bioma.
+    #[allow(clippy::too_many_arguments)]
+    fn surface(
+        &self,
+        peak_at: f32,
+        wx: i32,
+        wz: i32,
+        y: u32,
+        h: u32,
+        slope: f32,
+        dim: [u32; 3],
+        seed: u32,
+    ) -> ResolvedMaterial {
+        let dy = dim[1] as f32;
+        let fh = y as f32 / dy;
+        // Acantilado: la cara superior en pendiente fuerte es roca.
+        if y == h && slope > 2.5 {
+            return self.cliff;
+        }
+        // Cumbre (si la hay).
+        if let Some(pk) = self.peak {
+            if fh > peak_at {
+                return pk;
+            }
+        }
+        // Jitter para que la transición a roca no sea una línea perfecta.
+        let jitter = hash2(wx, wz.wrapping_mul(31).wrapping_add(y as i32), seed ^ 0xABCD) * 0.06 - 0.03;
+        if fh + jitter > 0.72 {
+            return self.cliff;
+        }
+        self.ground
+    }
 }
 
 /// Aplica el **grano de materia** al color base de un vóxel: perturba el brillo
-/// (±`grain`·18%) y mete una pizca de variación por canal, deterministamente por
-/// la posición de mundo. `grain = 0` → color intacto. Función pura → seamless entre
+/// (±`grain`·18%) y mete una pizca de variación por canal, deterministamente por la
+/// posición de mundo. `grain = 0` → color intacto. Función pura → seamless entre
 /// ventanas de streaming.
 fn grained(base: [u8; 3], grain: f32, wx: i32, y: u32, wz: i32, seed: u32) -> [u8; 3] {
     if grain <= 0.0 {
         return base;
     }
     let g = grain.clamp(0.0, 1.0);
-    // Hash por vóxel (mete `y` en la coordenada para que la columna no sea uniforme).
     let h = hash2(wx, wz.wrapping_mul(31).wrapping_add(y as i32 * 7), seed ^ 0x6817);
     let bright = 1.0 + (h - 0.5) * 2.0 * g * 0.18; // ±18% a grano pleno
     let speck = hash2(wx.wrapping_mul(13).wrapping_add(y as i32), wz, seed ^ 0x51A3);
@@ -178,78 +484,103 @@ fn grained(base: [u8; 3], grain: f32, wx: i32, y: u32, wz: i32, seed: u32) -> [u
     [ch(base[0], tilt), ch(base[1], tilt * 0.7), ch(base[2], -tilt * 0.5)]
 }
 
-impl WorldRecipe {
-    /// **Desierto llano**: arena, pocas montañas, pocos ríos, cactus ralos. El
-    /// mundo de apertura del corto.
-    pub fn desert(seed: u32) -> Self {
-        Self {
-            seed,
-            base: 0.30,
-            dune: 0.05,    // ondulación suave (dunas bajas)
-            relief: 0.45,  // las pocas montañas que hay, altas
-            mountains: 0.12, // pero MUY ralas
-            water_level: 0.26, // por debajo del suelo base → casi sin agua salvo ríos
-            rivers: 0.18,  // pocos ríos
-            ground: Material::Sand,
-            cliff: Material::Rock,
-            peak: Material::Air, // sin nieve en el desierto
-            peak_at: 1.0,
-            flora: Flora::Cactus,
-            flora_density: 0.010,
-            grain: 0.55, // arena granular, no slab plano
-        }
+/// La **receta de relieve de un bioma**: parámetros del terreno + referencias a los
+/// materiales (por id) que lo pintan. La **semilla NO vive aquí** — la aporta el
+/// [`Mundo`](crate::Mundo) al generar (un mismo bioma con semillas distintas da
+/// mundos distintos). Producí el `VoxelGrid` con [`generate_window`](Self::generate_window),
+/// pasándole la [`BiomaPalette`] resuelta.
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct Bioma {
+    /// Id estable (asignado por el [`Project`](crate::Project)).
+    pub id: u64,
+    /// Nombre editable.
+    pub name: String,
+    /// Nivel base del suelo, fracción del alto del mundo `[0,1]` (la llanura).
+    pub base: f32,
+    /// Amplitud de las ondulaciones suaves del suelo (dunas), fracción del alto.
+    pub dune: f32,
+    /// Amplitud de las montañas, fracción del alto.
+    pub relief: f32,
+    /// **Densidad de montañas** `[0,1]`: 0 = casi todo llano, 1 = relieve por todos lados.
+    pub mountains: f32,
+    /// Nivel del agua, fracción del alto `[0,1]`.
+    pub water_level: f32,
+    /// **Densidad de ríos** `[0,1]`.
+    pub rivers: f32,
+    /// Altura normalizada `[0,1]` a partir de la cual aparece la cumbre (`peak`).
+    pub peak_at: f32,
+    /// Material del suelo (id en [`Project::materiales`](crate::Project)).
+    pub ground: u64,
+    /// Material de acantilados/altura (id).
+    pub cliff: u64,
+    /// Material de cumbre por encima de `peak_at` (id); `None` = sin cumbre.
+    pub peak: Option<u64>,
+    /// Objetos a esparcir (flora/props), cada uno con su densidad y forma.
+    #[serde(default)]
+    pub objetos: Vec<ObjetoUso>,
+    /// Minerales embebidos en la roca (vetas, pepitas, estratos…).
+    #[serde(default)]
+    pub minerales: Vec<MineralUso>,
+    /// Casas esparcidas (pueblo/ciudad procedural por semilla).
+    #[serde(default)]
+    pub casas: Vec<crate::casa::CasaUso>,
+    /// **Densidad urbana** `[0,1]`: cuánto del bioma es pueblo. Bajo = aldeas
+    /// aisladas conectadas por rutas; alto = ciudad extendida. Mueve el umbral del
+    /// ruido de manchas de pueblo.
+    #[serde(default = "default_densidad_urbana")]
+    pub densidad_urbana: f32,
+    /// **Fauna** esparcida por semilla: animales voxel (vaca, ciervo, zorro…) que
+    /// pueblan el terreno, como la flora y las casas. Parados sobre el suelo,
+    /// orientados al azar, determinista por posición.
+    #[serde(default)]
+    pub fauna: Vec<crate::bicho::BichoUso>,
+    /// Seres guionados (actores del `Project` por id) para escenas — dato del modelo.
+    #[serde(default)]
+    pub seres: Vec<SereUso>,
+}
+
+fn default_densidad_urbana() -> f32 {
+    0.4
+}
+
+impl Bioma {
+    /// El **planificador urbano** de este bioma para la `seed` y el alto de `dim`:
+    /// retículo de pueblos con la traza limpia y nivelada (plaza, avenidas, cuadras).
+    fn urbe(&self, seed: u32, dim: [u32; 3]) -> crate::urbe::Urbe {
+        crate::urbe::Urbe::new(seed, self.densidad_urbana, dim[1])
     }
 
-    /// **Pradera**: el mundo verde clásico (equivalente conceptual a [`terrain`]
-    /// (crate::terrain)), expresado como receta para mostrar que el creador es
-    /// general.
-    pub fn grassland(seed: u32) -> Self {
-        Self {
-            seed,
-            base: 0.22,
-            dune: 0.10,
-            relief: 0.7,
-            mountains: 0.5,
-            water_level: 0.30,
-            rivers: 0.25,
-            ground: Material::Grass,
-            cliff: Material::Rock,
-            peak: Material::Snow,
-            peak_at: 0.80,
-            flora: Flora::None,
-            flora_density: 0.0,
-            grain: 0.45, // pasto/roca con textura, no color liso
-        }
+    /// `true` si la columna de mundo `(wx, wz)` cae dentro del **casco urbano** de
+    /// algún pueblo. `densidad_urbana` mueve el radio del casco (aldea ↔ ciudad).
+    /// Delegado al planificador [`crate::urbe`] para que la respuesta coincida
+    /// exactamente con lo que se traza en el terreno.
+    pub fn in_town(&self, seed: u32, wx: i32, wz: i32, dim: [u32; 3]) -> bool {
+        let urbe = self.urbe(seed, dim);
+        let h = |x: i32, z: i32| self.column_height(seed, x, z, dim);
+        urbe.pueblo_en(wx, wz, &h).is_some()
     }
 
     /// **Altura del terreno** (índice `y` del voxel sólido superior) en la columna
-    /// de **mundo** `(wx, wz)`. Función pura: mismo punto → misma altura en
-    /// cualquier ventana (continuidad para el streaming). Combina llanura base +
-    /// dunas suaves + montañas *gated* (sólo asoman donde el fbm supera un umbral,
-    /// así `mountains` bajo deja casi todo plano) + ríos tallados hacia el agua.
-    pub fn column_height(&self, wx: i32, wz: i32, dim: [u32; 3]) -> u32 {
+    /// de **mundo** `(wx, wz)` para la semilla `seed`. Función pura: mismo punto →
+    /// misma altura en cualquier ventana. Llanura base + dunas + montañas *gated* +
+    /// ríos tallados hacia el agua.
+    pub fn column_height(&self, seed: u32, wx: i32, wz: i32, dim: [u32; 3]) -> u32 {
         let dy = dim[1] as f32;
         let scale = world_scale(dim);
-        let s = self.seed;
         let (fx, fz) = (wx as f32 * scale, wz as f32 * scale);
 
         let base = self.base * dy;
-        // Dunas: ondulación suave centrada en cero.
-        let dunes = (fbm(fx * 1.7, fz * 1.7, 4, s ^ 0x11) - 0.5) * 2.0;
+        let dunes = (fbm(fx * 1.7, fz * 1.7, 4, seed ^ 0x11) - 0.5) * 2.0;
         let dune_h = dunes * self.dune * dy;
-        // Montañas gated: sólo la parte alta del fbm sobresale. `mountains` baja el
-        // umbral → más raras y aisladas.
-        let c = fbm(fx, fz, 6, s);
+        let c = fbm(fx, fz, 6, seed);
         let thr = 1.0 - self.mountains.clamp(0.0, 1.0);
         let m = ((c - thr).max(0.0) / (1.0 - thr).max(1e-3)).clamp(0.0, 1.0);
         let mtn_h = smooth(m) * self.relief * dy;
 
         let mut h = base + dune_h + mtn_h;
 
-        // Ríos: una "cresta" de ruido (ridged) marca líneas; cerca de la línea el
-        // terreno se hunde hasta un lecho bajo el nivel del agua.
         if self.rivers > 0.0 {
-            let r = 1.0 - (fbm(fx * 0.8, fz * 0.8, 4, s ^ 0x77) - 0.5).abs() * 2.0;
+            let r = 1.0 - (fbm(fx * 0.8, fz * 0.8, 4, seed ^ 0x77) - 0.5).abs() * 2.0;
             let width = 0.03 + 0.10 * self.rivers.clamp(0.0, 1.0);
             if r > 1.0 - width {
                 let t = ((r - (1.0 - width)) / width).clamp(0.0, 1.0);
@@ -267,74 +598,290 @@ impl WorldRecipe {
         (self.water_level * dim[1] as f32) as u32
     }
 
-    /// Material del voxel sólido `(wx, y, wz)` de una columna de altura `h` con
-    /// `slope` (desnivel con vecinos). Decide arena/roca/nieve por altura+pendiente.
-    fn ground_material(&self, wx: i32, wz: i32, y: u32, h: u32, slope: f32, dim: [u32; 3]) -> Material {
-        let dy = dim[1] as f32;
-        let fh = y as f32 / dy;
-        // Acantilado: la cara superior en pendiente fuerte es roca.
-        if y == h && slope > 2.5 {
-            return self.cliff;
-        }
-        // Cumbre nevada (si la receta la tiene).
-        if self.peak.is_solid() && fh > self.peak_at {
-            return self.peak;
-        }
-        // Jitter para que la transición a roca no sea una línea perfecta.
-        let jitter = hash2(wx, wz.wrapping_mul(31).wrapping_add(y as i32), self.seed ^ 0xABCD) * 0.06 - 0.03;
-        // Roca alta general (debajo de la cumbre): más arriba de 0.72 del alto.
-        if fh + jitter > 0.72 {
-            return self.cliff;
-        }
-        self.ground
-    }
-
-    /// `true` si en la columna `(wx, wz)` brota una planta (gate de densidad por
-    /// hash de mundo → determinista y seamless). Sólo en suelo seco y llano.
-    fn has_flora(&self, wx: i32, wz: i32, h: u32, slope: f32, dim: [u32; 3]) -> bool {
-        if self.flora == Flora::None || self.flora_density <= 0.0 {
+    /// `true` si en la columna `(wx, wz)` brota un objeto de densidad `densidad`
+    /// (gate por hash de mundo, sembrado por `salt` para que objetos distintos no se
+    /// pisen). Sólo en suelo seco y llano.
+    fn has_objeto(&self, wx: i32, wz: i32, h: u32, slope: f32, densidad: f32, salt: u32, dim: [u32; 3]) -> bool {
+        if densidad <= 0.0 {
             return false;
         }
         if h <= self.water_y(dim) + 1 || slope > 1.5 {
-            return false; // ni en el agua/orilla ni en pendiente
+            return false;
         }
-        hash2(wx.wrapping_mul(7), wz.wrapping_mul(13), self.seed ^ 0xC4C7) < self.flora_density
+        hash2(wx.wrapping_mul(7), wz.wrapping_mul(13), self.seed_salt(salt)) < densidad
     }
 
-    /// **Construye el mundo**: rellena un `VoxelGrid` de tamaño `dim` con la esquina
-    /// en la columna de mundo `origin = [wx, wz]` (usá `[0,0]` para el mundo
-    /// centrado). Terreno + agua + flora, todo por material. Deja el grid limpio
-    /// de *dirty* (se sube entero).
-    pub fn generate_window(&self, dim: [u32; 3], origin: [i32; 2]) -> VoxelGrid {
+    /// Mezcla un `salt` con una constante estable para sembrar el gate de objetos.
+    #[inline]
+    fn seed_salt(&self, salt: u32) -> u32 {
+        (0xC4C7u32).wrapping_add(salt.wrapping_mul(0x9E37_79B9))
+    }
+
+    /// **Color de mineral** para el vóxel sólido de mundo `(wx, y, wz)` bajo una
+    /// columna de altura `h`, o `None` si ahí no aflora ningún depósito. La
+    /// profundidad se mide como fracción bajo la superficie; cada mineral sólo
+    /// aparece dentro de su banda `(prof_min, prof_max)`. El primer depósito que
+    /// acierta gana el vóxel.
+    fn mineral_at(&self, wx: i32, y: u32, wz: i32, h: u32, dim: [u32; 3], seed: u32) -> Option<([u8; 3], u8)> {
+        if self.minerales.is_empty() {
+            return None;
+        }
+        let depth = h.saturating_sub(y) as f32 / dim[1] as f32; // 0 en superficie, crece hacia abajo
+        for (i, mu) in self.minerales.iter().enumerate() {
+            if mu.abundancia <= 0.0 || depth < mu.prof_min || depth > mu.prof_max {
+                continue;
+            }
+            let s = seed ^ (0x0E1E_0000u32).wrapping_add((i as u32).wrapping_mul(0x9E37_79B9));
+            if aspecto_hit(mu.aspecto, wx, y, wz, s, mu.abundancia) {
+                // Factores autorables (color/dureza/brillo), no los del enum.
+                let color = mineral_shade(mu.color, mu.dureza, wx, y, wz, s);
+                // El brillo del mineral viaja en el alpha del voxel (lo lee el shader).
+                let alpha = VoxelGrid::shine_to_alpha(mu.brillo);
+                return Some((color, alpha));
+            }
+        }
+        None
+    }
+
+    /// **Construye una ventana del bioma** con la esquina en la columna de mundo
+    /// `origin = [wx, wz]`, semilla `seed` y la [`BiomaPalette`] ya resuelta. Terreno
+    /// + agua + objetos, todo por material. Deja el grid limpio de *dirty*.
+    pub fn generate_window(
+        &self,
+        seed: u32,
+        palette: &BiomaPalette,
+        dim: [u32; 3],
+        origin: [i32; 2],
+    ) -> VoxelGrid {
         let [dx, dy, dz] = dim;
         let mut g = VoxelGrid::new(dim);
         let (ox, oz) = (origin[0], origin[1]);
         let water_y = self.water_y(dim);
 
-        let h_at = |lx: i32, lz: i32| self.column_height(ox + lx, oz + lz, dim);
+        let h_at = |lx: i32, lz: i32| self.column_height(seed, ox + lx, oz + lz, dim);
+        // Planificador urbano: traza limpia y NIVELADA (plaza, avenidas, cuadras).
+        let urbe = self.urbe(seed, dim);
+        let hw = |wx: i32, wz: i32| self.column_height(seed, wx, wz, dim);
 
         for lz in 0..dz as i32 {
             for lx in 0..dx as i32 {
                 let (wx, wz) = (ox + lx, oz + lz);
-                let h = h_at(lx, lz);
-                let slope = (h as i32 - h_at(lx - 1, lz) as i32)
+                let natural = h_at(lx, lz);
+                let slope = (natural as i32 - h_at(lx - 1, lz) as i32)
                     .abs()
-                    .max((h as i32 - h_at(lx, lz - 1) as i32).abs()) as f32;
+                    .max((natural as i32 - h_at(lx, lz - 1) as i32).abs()) as f32;
 
-                // Columna sólida (con grano de materia por vóxel — sello del motor).
-                for y in 0..=h.min(dy - 1) {
-                    let m = self.ground_material(wx, wz, y, h, slope, dim);
-                    g.set(lx as u32, y, lz as u32, grained(m.color(), self.grain, wx, y, wz, self.seed));
-                }
-                // Agua: llena por encima del terreno hasta el nivel del agua.
-                if h < water_y {
-                    for y in (h + 1)..=water_y.min(dy - 1) {
-                        g.set(lx as u32, y, lz as u32, Material::Water.color());
+                // Consulta urbana: dentro de un casco el suelo se aplana a la cota
+                // del pueblo (o rampa en el borde) → el auto rueda sin escalones.
+                let plano = if !self.casas.is_empty() {
+                    urbe.consultar(wx, wz, &hw)
+                } else {
+                    None
+                };
+                // Cota a construir y cómo pintar la superficie: en el casco es una
+                // explanada nivelada (pendiente 0), en el campo el terreno natural.
+                let (build_h, surf_h, surf_slope, urbano) = match &plano {
+                    Some(p) => (p.suelo.min(dy - 1), p.suelo.min(dy - 1), 0.0, true),
+                    None => (natural.min(dy - 1), natural, slope, false),
+                };
+
+                // Columna sólida (con grano por material). Bajo la piel del terreno,
+                // un depósito de mineral puede reemplazar el color de la roca. En el
+                // casco urbano no afloran minerales (es suelo compactado/explanado).
+                for y in 0..=build_h {
+                    let m = palette.surface(self.peak_at, wx, wz, y, surf_h, surf_slope, dim, seed);
+                    let mineral = if !urbano && y + 1 < surf_h {
+                        self.mineral_at(wx, y, wz, surf_h, dim, seed)
+                    } else {
+                        None
+                    };
+                    match mineral {
+                        // Mineral: color + brillo (alpha) del depósito. Hereda el
+                        // detalle sub-voxel de la ROCA en que está embebido (`cliff`)
+                        // → la veta no salta como un parche de otra fidelidad (misma
+                        // gramática cuantizada = sin valle).
+                        Some((color, alpha)) => {
+                            g.set_rgba(lx as u32, y, lz as u32, color, alpha);
+                            let d = palette.cliff.detalle;
+                            if d != (0.0, 0.0) {
+                                g.set_detail(lx as u32, y, lz as u32, d.0, d.1);
+                            }
+                        }
+                        // Material del terreno: mate, salvo los lustrosos (vidrio,
+                        // acero, mármol…) que llevan su brillo en el alpha.
+                        None => {
+                            let c = grained(m.color, m.grain, wx, y, wz, seed);
+                            if m.brillo > 0.0 {
+                                g.set_rgba(lx as u32, y, lz as u32, c, VoxelGrid::shine_to_alpha(m.brillo));
+                            } else {
+                                g.set(lx as u32, y, lz as u32, c);
+                            }
+                            // Detalle sub-voxel POR VOXEL del material (rugoso/liso, biselado
+                            // o duro): así dos materiales del bioma lucen distinto a la vez.
+                            if m.detalle != (0.0, 0.0) {
+                                g.set_detail(lx as u32, y, lz as u32, m.detalle.0, m.detalle.1);
+                            }
+                        }
                     }
                 }
-                // Flora.
-                if self.has_flora(wx, wz, h, slope, dim) {
-                    self.place_flora(&mut g, lx as u32, h + 1, lz as u32, wx, wz, dim);
+                // Agua (sólo en campo abierto; el casco urbano vive sobre explanada seca).
+                if !urbano && build_h < water_y {
+                    for y in (build_h + 1)..=water_y.min(dy - 1) {
+                        g.set(lx as u32, y, lz as u32, palette.agua);
+                    }
+                }
+                // Pavimento de la traza urbana sobre la explanada nivelada.
+                if let Some(pav) = plano.as_ref().and_then(|p| p.pav) {
+                    g.set(lx as u32, build_h, lz as u32, pav);
+                }
+                // Objetos (flora/props): sólo en campo abierto — el casco urbano
+                // queda despejado salvo el arbolado cívico de la plaza.
+                if !urbano {
+                    for (i, (mat, densidad, forma)) in palette.objetos.iter().enumerate() {
+                        if self.has_objeto(wx, wz, natural, slope, *densidad, i as u32, dim) {
+                            // Detalle sub-voxel POR VOXEL de la flora/prop: su material
+                            // lo lleva igual que el terreno (rugoso/liso, biselado o
+                            // duro) → un cactus rugoso junto a roca lisa, a la vez. El
+                            // pincel tiñe todos los voxels que `place_objeto` estampe.
+                            if mat.detalle != (0.0, 0.0) {
+                                g.set_detail_brush(mat.detalle.0, mat.detalle.1);
+                            }
+                            self.place_objeto(&mut g, *forma, mat.color, lx as u32, natural + 1, lz as u32, wx, wz, dim);
+                            g.clear_detail_brush();
+                            break; // un objeto por columna
+                        }
+                    }
+                }
+            }
+        }
+
+        // Casas y mobiliario cívico: una vez por pueblo, todo asentado sobre la
+        // explanada nivelada del casco (misma cota `suelo` que la traza) → nada de
+        // casas escalonadas. Iglesia al norte de la plaza, fuente/bancos/árboles en
+        // la plaza, y una casa por CUADRA (interior de manzana), del estilo del bioma.
+        if !self.casas.is_empty() {
+            let interior = urbe.radio_interior();
+            for p in crate::urbe::pueblos_en_ventana(&urbe, [ox, oz], dim, &hw) {
+                let [cx, cz] = p.centro;
+                let base = p.suelo; // cota nivelada del casco
+                let en_ventana = |wx: i32, wz: i32| -> Option<(u32, u32)> {
+                    let (lx, lz) = (wx - ox, wz - oz);
+                    if lx >= 0 && lz >= 0 && lx < dx as i32 && lz < dz as i32 {
+                        Some((lx as u32, lz as u32))
+                    } else {
+                        None
+                    }
+                };
+
+                // Iglesia: sobre su plot, al norte de la plaza, mirando al sur.
+                if let Some((lx, lz)) = en_ventana(cx, cz + crate::urbe::IGLESIA_V) {
+                    crate::stamp_mueble(&mut g, crate::Mueble::Iglesia, lx, base + 1, lz, 0);
+                }
+                // Fuente al centro de la plaza + bancos + arbolado en las esquinas.
+                if let Some((lx, lz)) = en_ventana(cx, cz) {
+                    crate::stamp_mueble(&mut g, crate::Mueble::Fuente, lx, base + 1, lz, 0);
+                }
+                for (bi, &(bx, bz)) in [(-4i32, 0i32), (4, 0), (0, 4)].iter().enumerate() {
+                    if let Some((lx, lz)) = en_ventana(cx + bx, cz + bz) {
+                        crate::stamp_mueble(&mut g, crate::Mueble::Banco, lx, base + 1, lz, bi as u8);
+                    }
+                }
+                let ph = crate::urbe::PLAZA_HALF;
+                for &(tx, tz) in &[(-ph, -ph), (ph, -ph), (-ph, ph), (ph, ph)] {
+                    if let Some((lx, lz)) = en_ventana(cx + tx, cz + tz) {
+                        crate::stamp_mueble(&mut g, crate::Mueble::Ficus, lx, base + 1, lz, 0);
+                    }
+                }
+
+                // Una casa por cuadra: centro de manzana (offset medio paso desde las
+                // líneas de la grilla) dentro del radio interior, salteando plaza,
+                // iglesia y calzada.
+                let paso = crate::urbe::PASO_CUADRA;
+                let n = interior / paso + 1;
+                for ku in -n..=n {
+                    for kv in -n..=n {
+                        let bu = ku * paso + paso / 2; // centro de cuadra (local)
+                        let bv = kv * paso + paso / 2;
+                        if bu * bu + bv * bv > interior * interior {
+                            continue; // fuera del casco urbanizable
+                        }
+                        if urbe.zona(bu, bv) != crate::urbe::Zona::Parcela {
+                            continue; // cayó en plaza/calzada
+                        }
+                        let (cwx, cwz) = (cx + bu, cz + bv);
+                        let (lx, lz) = match en_ventana(cwx, cwz) {
+                            Some(v) => v,
+                            None => continue,
+                        };
+                        for (i, cu) in self.casas.iter().enumerate() {
+                            if cu.densidad <= 0.0 {
+                                continue;
+                            }
+                            let gate = hash2(cwx.wrapping_mul(13), cwz.wrapping_mul(7), p.seed ^ (0x50 + i as u32));
+                            if gate < cu.densidad {
+                                let cseed = crate::casa::casa_seed(seed, cwx, cwz);
+                                crate::casa::stamp_casa(&mut g, cu.tipo, lx, base + 1, lz, cseed);
+                                break; // una casa por cuadra
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        // Fauna: animales esparcidos por semilla en una grilla propia (más fina que
+        // la de casas). Cada parcela con acierto pone un ser parado sobre el suelo,
+        // orientado por la posición. Los seres viven en el campo, no en la calzada.
+        if !self.fauna.is_empty() {
+            let plot = 11i32;
+            let ix0 = ox.div_euclid(plot);
+            let ix1 = (ox + dx as i32).div_euclid(plot);
+            let iz0 = oz.div_euclid(plot);
+            let iz1 = (oz + dz as i32).div_euclid(plot);
+            for ix in ix0..=ix1 {
+                for iz in iz0..=iz1 {
+                    // Jitter del punto dentro de la parcela → rebaño no cuadriculado.
+                    let jx = (hash2(ix.wrapping_mul(5), iz.wrapping_mul(9), self.seed_salt(0x71) ^ seed) * plot as f32) as i32;
+                    let jz = (hash2(ix.wrapping_mul(11), iz.wrapping_mul(3), self.seed_salt(0x72) ^ seed) * plot as f32) as i32;
+                    let cwx = ix * plot + jx;
+                    let cwz = iz * plot + jz;
+                    let (lx, lz) = (cwx - ox, cwz - oz);
+                    if lx < 0 || lz < 0 || lx >= dx as i32 || lz >= dz as i32 {
+                        continue;
+                    }
+                    let hh = self.column_height(seed, cwx, cwz, dim);
+                    if hh <= water_y + 1 || hh >= dy {
+                        continue; // agua/muy bajo
+                    }
+                    // Sin fauna sobre la calzada (rutas/calles) ni en pendiente fuerte.
+                    let slope = (hh as i32 - self.column_height(seed, cwx - 1, cwz, dim) as i32)
+                        .abs()
+                        .max((hh as i32 - self.column_height(seed, cwx, cwz - 1, dim) as i32).abs());
+                    if slope > 2 {
+                        continue;
+                    }
+                    let ruta = !self.casas.is_empty()
+                        && (cwx.rem_euclid(48) < 5 || cwz.rem_euclid(48) < 5);
+                    if ruta {
+                        continue;
+                    }
+                    let facing = (hash2(cwx, cwz, self.seed_salt(0x7F) ^ seed) * 4.0) as u8 & 3;
+                    for (i, fu) in self.fauna.iter().enumerate() {
+                        if fu.densidad <= 0.0 {
+                            continue;
+                        }
+                        let gate = hash2(cwx.wrapping_mul(17), cwz.wrapping_mul(11), self.seed_salt(0x70 + i as u32) ^ seed);
+                        if gate < fu.densidad {
+                            // Un ser vivo lleva su gramática sub-voxel (redondeo orgánico
+                            // + grano de piel) → deja de ser una caja rectangular. El
+                            // pincel tiñe todo el cuerpo que `stamp_bicho` estampe.
+                            let (r, b) = crate::bicho::DETALLE_SER_VIVO;
+                            g.set_detail_brush(r, b);
+                            crate::bicho::stamp_bicho(&mut g, fu.bicho, lx as u32, hh + 1, lz as u32, facing);
+                            g.clear_detail_brush();
+                            break; // un ser por parcela
+                        }
+                    }
                 }
             }
         }
@@ -343,45 +890,330 @@ impl WorldRecipe {
         g
     }
 
-    /// Mundo centrado en el origen (`origin = [0,0]`).
-    pub fn generate(&self, dim: [u32; 3]) -> VoxelGrid {
-        self.generate_window(dim, [0, 0])
+    /// Estampa una **sola** forma de vegetación con follaje `col` y base en
+    /// `(x, base_y, z)` (local), determinista por esa posición. Pensado para
+    /// catálogos/tests; la generación normal usa [`generate_window`](Self::generate_window).
+    pub fn stamp_flora(
+        &self,
+        g: &mut VoxelGrid,
+        forma: Forma,
+        col: [u8; 3],
+        x: u32,
+        base_y: u32,
+        z: u32,
+        dim: [u32; 3],
+    ) {
+        self.place_objeto(g, forma, col, x, base_y, z, x as i32, z as i32, dim);
     }
 
-    /// Coloca una planta con la base en `(x, base_y, z)` (local al grid). Hoy sólo
-    /// el **cactus** columnar: tronco de 3–6 de alto + 0–2 brazos en L.
-    fn place_flora(&self, g: &mut VoxelGrid, x: u32, base_y: u32, z: u32, wx: i32, wz: i32, dim: [u32; 3]) {
-        if self.flora != Flora::Cactus {
-            return;
-        }
-        let dy = dim[1];
-        let col = Material::Cactus.color();
-        // Altura del tronco: 3..6 determinista por la columna.
-        let th = 3 + (hash2(wx, wz, self.seed ^ 0x1357) * 4.0) as u32;
-        for k in 0..th {
-            let y = base_y + k;
-            if y >= dy {
-                break;
-            }
-            g.set(x, y, z, col);
-        }
-        // Brazos: un par de salientes laterales a media altura (forma de candelabro).
-        let arm_seed = hash2(wx.wrapping_add(1), wz, self.seed ^ 0x2468);
-        if th >= 4 && arm_seed > 0.45 {
-            let ay = base_y + th / 2;
-            // Brazo a +x: un voxel al costado y dos hacia arriba.
-            let arm = [(x.wrapping_add(1), ay, z), (x.wrapping_add(1), ay + 1, z)];
-            for &(ax, ya, az) in &arm {
-                if ax < dim[0] && ya < dy {
-                    g.set(ax, ya, az, col);
+    /// Coloca un objeto de vegetación con la base en `(x, base_y, z)` (local),
+    /// despachando por [`Forma`]. `col` es el **color de follaje** (del material del
+    /// objeto); los troncos leñosos usan [`WOOD`]. Todo es determinista por la
+    /// posición de mundo `(wx, wz)` → seamless entre ventanas de streaming. Los
+    /// vóxels fuera de la ventana se recortan (igual que el cactus histórico).
+    #[allow(clippy::too_many_arguments)]
+    fn place_objeto(
+        &self,
+        g: &mut VoxelGrid,
+        forma: Forma,
+        col: [u8; 3],
+        x: u32,
+        base_y: u32,
+        z: u32,
+        wx: i32,
+        wz: i32,
+        dim: [u32; 3],
+    ) {
+        let cx = x as i32;
+        let cz = z as i32;
+        let by = base_y as i32;
+        // Follaje con jitter de brillo por vóxel → copas menos «plásticas».
+        let leaf = |xi: i32, yi: i32, zi: i32| leaf_tint(col, wx + (xi - cx), yi as u32, wz + (zi - cz), 0x1EAF);
+
+        match forma {
+            Forma::Columnar => {
+                let th = 3 + (hash2(wx, wz, 0x1357) * 4.0) as i32;
+                for k in 0..th {
+                    put(g, dim, cx, by + k, cz, col);
+                }
+                let arm_seed = hash2(wx.wrapping_add(1), wz, 0x2468);
+                if th >= 4 && arm_seed > 0.45 {
+                    let ay = by + th / 2;
+                    put(g, dim, cx + 1, ay, cz, col);
+                    put(g, dim, cx + 1, ay + 1, cz, col);
+                    if arm_seed > 0.7 {
+                        put(g, dim, cx - 1, ay + 1, cz, col);
+                        put(g, dim, cx - 1, ay + 2, cz, col);
+                    }
                 }
             }
-            if arm_seed > 0.7 && x > 0 {
-                // Brazo opuesto a -x.
-                let arm2 = [(x - 1, ay + 1, z), (x - 1, ay + 2, z)];
-                for &(ax, ya, az) in &arm2 {
-                    if ya < dy {
-                        g.set(ax, ya, az, col);
+
+            Forma::Pasto => {
+                let n = 3 + (hash2(wx, wz, 0x9E13) * 4.0) as i32; // 3..6 matas
+                for i in 0..n {
+                    let ox = (hash2(wx, wz.wrapping_add(i), 0x31) * 3.0) as i32 - 1; // -1..1
+                    let oz = (hash2(wx.wrapping_add(7), wz.wrapping_add(i), 0x59) * 3.0) as i32 - 1;
+                    let bh = 1 + (hash2(wx.wrapping_add(i), wz, 0x77) * 2.0) as i32; // 1..2
+                    for k in 0..bh {
+                        put(g, dim, cx + ox, by + k, cz + oz, leaf(cx + ox, by + k, cz + oz));
+                    }
+                }
+            }
+
+            Forma::Arbusto => {
+                let r = 2i32;
+                let cy = by + 2;
+                for yy in by..=by + 3 {
+                    for xx in -r..=r {
+                        for zz in -r..=r {
+                            let d2 = xx * xx + (yy - cy) * (yy - cy) + zz * zz;
+                            if d2 <= r * r + 1
+                                && hash2(wx + xx, wz.wrapping_add(zz).wrapping_add(yy), 0x2B) > 0.18
+                            {
+                                put(g, dim, cx + xx, yy, cz + zz, leaf(cx + xx, yy, cz + zz));
+                            }
+                        }
+                    }
+                }
+            }
+
+            Forma::Arbol => {
+                let th = 4 + (hash2(wx, wz, 0x1357) * 5.0) as i32; // 4..8 tronco
+                for k in 0..th {
+                    put(g, dim, cx, by + k, cz, WOOD);
+                }
+                let cy = by + th; // centro de copa en la cima del tronco
+                let r = 2 + (hash2(wx.wrapping_add(3), wz, 0x246) * 2.0) as i32; // 2..3
+                for xx in -r..=r {
+                    for yy in -r..=r {
+                        for zz in -r..=r {
+                            let d2 = xx * xx + yy * yy + zz * zz;
+                            if d2 <= r * r + r
+                                && hash2(wx + xx, wz.wrapping_add(zz).wrapping_add(yy), 0x9C) > 0.12
+                            {
+                                put(g, dim, cx + xx, cy + yy, cz + zz, leaf(cx + xx, cy + yy, cz + zz));
+                            }
+                        }
+                    }
+                }
+            }
+
+            Forma::Conifera => {
+                let h = 6 + (hash2(wx, wz, 0x1357) * 5.0) as i32; // 6..10 de follaje
+                put(g, dim, cx, by, cz, WOOD); // tronquito visible
+                let maxr = 3i32;
+                for layer in 0..h {
+                    let yy = by + 1 + layer;
+                    let r = maxr * (h - layer) / h; // decrece hacia arriba
+                    for xx in -r..=r {
+                        for zz in -r..=r {
+                            if xx * xx + zz * zz <= r * r + 1
+                                && hash2(wx + xx, wz.wrapping_add(zz).wrapping_add(yy), 0x5C1) > 0.10
+                            {
+                                put(g, dim, cx + xx, yy, cz + zz, leaf(cx + xx, yy, cz + zz));
+                            }
+                        }
+                    }
+                }
+                put(g, dim, cx, by + 1 + h, cz, leaf(cx, by + 1 + h, cz)); // punta
+            }
+
+            Forma::Palmera => {
+                let h = 7 + (hash2(wx, wz, 0x1357) * 6.0) as i32; // 7..12 tronco
+                let lean = if hash2(wx, wz, 0x9) > 0.5 { 1 } else { -1 };
+                let mut tx = cx;
+                for k in 0..h {
+                    if k == h * 2 / 3 {
+                        tx += lean; // leve curva cerca de la corona
+                    }
+                    put(g, dim, tx, by + k, cz, WOOD);
+                }
+                let ty = by + h;
+                put(g, dim, tx, ty, cz, leaf(tx, ty, cz)); // corona
+                // Frondas en 8 rumbos: suben 1 y luego caen (arco).
+                let dirs = [(1, 0), (-1, 0), (0, 1), (0, -1), (1, 1), (1, -1), (-1, 1), (-1, -1)];
+                for (dxi, dzi) in dirs {
+                    let len = 3 + (hash2(tx + dxi, cz + dzi, 0x33) * 2.0) as i32; // 3..4
+                    for s in 1..=len {
+                        let fx = tx + dxi * s;
+                        let fz = cz + dzi * s;
+                        let fy = ty + 1 - s; // arco: s=1→ty, luego baja
+                        put(g, dim, fx, fy, fz, leaf(fx, fy, fz));
+                    }
+                }
+            }
+
+            Forma::Helecho => {
+                let sh = 2i32;
+                for k in 0..sh {
+                    put(g, dim, cx, by + k, cz, leaf(cx, by + k, cz));
+                }
+                let ty = by + sh;
+                let dirs = [(1, 0), (-1, 0), (0, 1), (0, -1), (1, 1), (-1, -1)];
+                for (dxi, dzi) in dirs {
+                    let len = 2 + (hash2(wx + dxi, wz + dzi, 0x71) * 2.0) as i32; // 2..3
+                    for s in 1..=len {
+                        let fy = (ty - s / 2).max(by); // frondas que arquean hacia abajo
+                        put(g, dim, cx + dxi * s, fy, cz + dzi * s, leaf(cx + dxi * s, fy, cz + dzi * s));
+                    }
+                }
+            }
+
+            Forma::Flor => {
+                let sh = 2 + (hash2(wx, wz, 0x5) * 2.0) as i32; // 2..3 tallo
+                for k in 0..sh {
+                    put(g, dim, cx, by + k, cz, STEM);
+                }
+                let ty = by + sh;
+                put(g, dim, cx, ty, cz, col); // corola (color del material)
+                for (dxi, dzi) in [(1, 0), (-1, 0), (0, 1), (0, -1)] {
+                    put(g, dim, cx + dxi, ty, cz + dzi, col); // pétalos en cruz
+                }
+            }
+
+            Forma::Bambu => {
+                let n = 3 + (hash2(wx, wz, 0xB00) * 3.0) as i32; // 3..5 cañas
+                for i in 0..n {
+                    let ox = (hash2(wx.wrapping_add(i), wz, 0xB01) * 3.0) as i32 - 1;
+                    let oz = (hash2(wx, wz.wrapping_add(i), 0xB02) * 3.0) as i32 - 1;
+                    let ch = 7 + (hash2(wx.wrapping_add(i * 3), wz, 0xB03) * 6.0) as i32; // 7..12
+                    for k in 0..ch {
+                        put(g, dim, cx + ox, by + k, cz + oz, leaf(cx + ox, by + k, cz + oz));
+                    }
+                    // Hojitas en la punta.
+                    put(g, dim, cx + ox + 1, by + ch - 1, cz + oz, leaf(cx + ox + 1, by + ch - 1, cz + oz));
+                    put(g, dim, cx + ox, by + ch, cz + oz + 1, leaf(cx + ox, by + ch, cz + oz + 1));
+                }
+            }
+
+            Forma::Platanera => {
+                let h = 3 + (hash2(wx, wz, 0x9A0) * 2.0) as i32; // 3..4 pseudo-tronco verde
+                for k in 0..h {
+                    put(g, dim, cx, by + k, cz, leaf(cx, by + k, cz));
+                }
+                let ty = by + h;
+                // Hojas anchas (2 de ancho) que suben 1 y caen despacio.
+                let dirs = [(1i32, 0i32), (-1, 0), (0, 1), (0, -1), (1, 1)];
+                for (dxi, dzi) in dirs {
+                    let len = 4 + (hash2(cx + dxi, cz + dzi, 0x9A1) * 2.0) as i32; // 4..5
+                    let (px, pz) = (-dzi, dxi); // perpendicular → ancho de hoja
+                    for s in 1..=len {
+                        let fy = ty + 1 - (s + 1) / 2;
+                        let (bx, bz) = (cx + dxi * s, cz + dzi * s);
+                        put(g, dim, bx, fy, bz, leaf(bx, fy, bz));
+                        if s >= 2 {
+                            put(g, dim, bx + px, fy, bz + pz, leaf(bx + px, fy, bz + pz));
+                        }
+                    }
+                }
+            }
+
+            Forma::Roble => {
+                let th = 5 + (hash2(wx, wz, 0x0A0) * 4.0) as i32; // 5..8 tronco grueso
+                for k in 0..th {
+                    put(g, dim, cx, by + k, cz, WOOD);
+                    if k < th * 2 / 3 {
+                        put(g, dim, cx + 1, by + k, cz, WOOD);
+                        put(g, dim, cx, by + k, cz + 1, WOOD);
+                        put(g, dim, cx + 1, by + k, cz + 1, WOOD);
+                    }
+                }
+                let cy = by + th + 1;
+                let r = 4i32; // copa amplia, achatada
+                for xx in -r..=r {
+                    for yy in -3..=3 {
+                        for zz in -r..=r {
+                            let d2 = xx * xx + yy * yy * 2 + zz * zz;
+                            if d2 <= r * r + 2
+                                && hash2(wx + xx, wz.wrapping_add(zz).wrapping_add(yy), 0x0A1) > 0.14
+                            {
+                                put(g, dim, cx + xx, cy + yy, cz + zz, leaf(cx + xx, cy + yy, cz + zz));
+                            }
+                        }
+                    }
+                }
+            }
+
+            Forma::Hongo => {
+                let sh = 1 + (hash2(wx, wz, 0xF00) * 2.0) as i32; // 1..2 pie
+                for k in 0..sh {
+                    put(g, dim, cx, by + k, cz, MUSH_STEM);
+                }
+                let ty = by + sh;
+                let r = 1 + (hash2(wx, wz, 0xF01) * 1.5) as i32; // sombrero radio 1..2
+                for xx in -r..=r {
+                    for zz in -r..=r {
+                        if xx * xx + zz * zz <= r * r + 1 {
+                            put(g, dim, cx + xx, ty, cz + zz, FUNGUS_CAP);
+                        }
+                    }
+                }
+                put(g, dim, cx, ty + 1, cz, FUNGUS_CAP); // domo
+            }
+
+            Forma::Tocon => {
+                let h = 2i32; // cepa baja y gruesa
+                for yy in 0..h {
+                    for xx in -1..=1 {
+                        for zz in -1..=1 {
+                            if xx * xx + zz * zz <= 2 {
+                                put(g, dim, cx + xx, by + yy, cz + zz, WOOD);
+                            }
+                        }
+                    }
+                }
+                // Musgo en la cara superior.
+                for xx in -1..=1 {
+                    for zz in -1..=1 {
+                        if xx * xx + zz * zz <= 2
+                            && hash2(wx + xx, wz.wrapping_add(zz), 0x70C) > 0.4
+                        {
+                            put(g, dim, cx + xx, by + h, cz + zz, leaf(cx + xx, by + h, cz + zz));
+                        }
+                    }
+                }
+            }
+
+            Forma::Trigo => {
+                let n = 4 + (hash2(wx, wz, 0x7A0) * 4.0) as i32; // 4..7 espigas
+                for i in 0..n {
+                    let ox = (hash2(wx.wrapping_add(i), wz, 0x7A1) * 3.0) as i32 - 1;
+                    let oz = (hash2(wx, wz.wrapping_add(i), 0x7A2) * 3.0) as i32 - 1;
+                    let sh = 3 + (hash2(wx.wrapping_add(i * 2), wz, 0x7A3) * 2.0) as i32; // 3..4
+                    for k in 0..sh {
+                        put(g, dim, cx + ox, by + k, cz + oz, leaf(cx + ox, by + k, cz + oz));
+                    }
+                    put(g, dim, cx + ox, by + sh, cz + oz, col); // espiga (grano dorado)
+                }
+            }
+
+            Forma::Junco => {
+                let n = 4 + (hash2(wx, wz, 0x5A0) * 4.0) as i32; // 4..7 cañas
+                for i in 0..n {
+                    let ox = (hash2(wx.wrapping_add(i), wz, 0x5A1) * 3.0) as i32 - 1;
+                    let oz = (hash2(wx, wz.wrapping_add(i), 0x5A2) * 3.0) as i32 - 1;
+                    let sh = 4 + (hash2(wx.wrapping_add(i * 2), wz, 0x5A3) * 3.0) as i32; // 4..6
+                    for k in 0..sh {
+                        put(g, dim, cx + ox, by + k, cz + oz, leaf(cx + ox, by + k, cz + oz));
+                    }
+                    // Espadaña marrón (cattail) en el tope.
+                    put(g, dim, cx + ox, by + sh, cz + oz, CATTAIL);
+                    put(g, dim, cx + ox, by + sh - 1, cz + oz, CATTAIL);
+                }
+            }
+
+            Forma::Lavanda => {
+                let r = 1i32; // matojo bajo verde
+                for xx in -r..=r {
+                    for zz in -r..=r {
+                        put(g, dim, cx + xx, by, cz + zz, STEM);
+                        // Espigas florales en tresbolillo.
+                        if (xx + zz).rem_euclid(2) == 0 {
+                            put(g, dim, cx + xx, by + 1, cz + zz, col);
+                            if hash2(wx + xx, wz.wrapping_add(zz), 0x1A7) > 0.5 {
+                                put(g, dim, cx + xx, by + 2, cz + zz, col);
+                            }
+                        }
                     }
                 }
             }
@@ -389,44 +1221,143 @@ impl WorldRecipe {
     }
 }
 
+/// Color de tronco/madera para las formas leñosas (árbol, palmera, conífera).
+const WOOD: [u8; 3] = [102, 72, 44];
+
+/// Color de tallo verde para las flores (independiente del color de la corola).
+const STEM: [u8; 3] = [78, 130, 60];
+
+/// Pie pálido del hongo.
+const MUSH_STEM: [u8; 3] = [216, 206, 182];
+
+/// Sombrero del hongo (rojo clásico) — color intrínseco de la forma.
+const FUNGUS_CAP: [u8; 3] = [176, 58, 48];
+
+/// Espadaña marrón del junco (cattail).
+const CATTAIL: [u8; 3] = [122, 82, 46];
+
+/// Escribe un vóxel en coordenadas locales con signo, recortando fuera de la ventana.
+#[inline]
+fn put(g: &mut VoxelGrid, dim: [u32; 3], xi: i32, yi: i32, zi: i32, c: [u8; 3]) {
+    if xi >= 0
+        && yi >= 0
+        && zi >= 0
+        && (xi as u32) < dim[0]
+        && (yi as u32) < dim[1]
+        && (zi as u32) < dim[2]
+    {
+        g.set(xi as u32, yi as u32, zi as u32, c);
+    }
+}
+
+/// Perturba un color de follaje ±15% de brillo por vóxel, determinista por la
+/// posición de mundo → copas con variación de hoja en vez de un verde plano.
+fn leaf_tint(base: [u8; 3], wx: i32, y: u32, wz: i32, seed: u32) -> [u8; 3] {
+    let h = hash2(wx.wrapping_mul(9).wrapping_add(y as i32), wz.wrapping_mul(5), seed ^ 0x7A31);
+    let f = 0.85 + h * 0.30; // 0.85..1.15
+    let ch = |c: u8| (c as f32 * f).clamp(0.0, 255.0) as u8;
+    [ch(base[0]), ch(base[1]), ch(base[2])]
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;
 
+    /// Un bioma de desierto de prueba (ids ficticios; la generación no los usa, usa
+    /// la paleta) + su paleta de arena/roca.
+    fn desierto() -> (Bioma, BiomaPalette) {
+        let b = Bioma {
+            id: 1,
+            name: "desierto".into(),
+            base: 0.30,
+            dune: 0.05,
+            relief: 0.45,
+            mountains: 0.12,
+            water_level: 0.26,
+            rivers: 0.18,
+            peak_at: 1.0,
+            ground: 1,
+            cliff: 2,
+            peak: None,
+            objetos: vec![ObjetoUso { material: 3, densidad: 0.010, forma: Forma::Columnar }],
+            minerales: vec![],
+            densidad_urbana: 0.4,
+            casas: Vec::new(),
+            fauna: vec![],
+            seres: vec![],
+        };
+        let pal = BiomaPalette {
+            ground: ResolvedMaterial::new(Material::Sand.color(), Material::Sand.grain()),
+            cliff: ResolvedMaterial::new(Material::Rock.color(), Material::Rock.grain()),
+            peak: None,
+            agua: Material::Water.color(),
+            objetos: vec![(ResolvedMaterial::new(Material::Cactus.color(), 0.0), 0.010, Forma::Columnar)],
+        };
+        (b, pal)
+    }
+
+    fn pradera() -> (Bioma, BiomaPalette) {
+        let b = Bioma {
+            id: 2,
+            name: "pradera".into(),
+            base: 0.22,
+            dune: 0.10,
+            relief: 0.7,
+            mountains: 0.5,
+            water_level: 0.30,
+            rivers: 0.25,
+            peak_at: 0.80,
+            ground: 4,
+            cliff: 2,
+            peak: Some(5),
+            objetos: vec![],
+            minerales: vec![],
+            densidad_urbana: 0.4,
+            casas: Vec::new(),
+            fauna: vec![],
+            seres: vec![],
+        };
+        let pal = BiomaPalette {
+            ground: ResolvedMaterial::new(Material::Grass.color(), Material::Grass.grain()),
+            cliff: ResolvedMaterial::new(Material::Rock.color(), Material::Rock.grain()),
+            peak: Some(ResolvedMaterial::new(Material::Snow.color(), Material::Snow.grain())),
+            agua: Material::Water.color(),
+            objetos: vec![],
+        };
+        (b, pal)
+    }
+
     #[test]
     fn altura_es_funcion_pura_de_mundo() {
-        let r = WorldRecipe::desert(7);
+        let (b, _) = desierto();
         let dim = [96, 48, 96];
-        // El mismo punto de mundo da la misma altura, lo pidas desde donde lo pidas.
-        assert_eq!(r.column_height(1234, -567, dim), r.column_height(1234, -567, dim));
+        assert_eq!(b.column_height(7, 1234, -567, dim), b.column_height(7, 1234, -567, dim));
     }
 
     #[test]
     fn desierto_es_mas_llano_que_pradera() {
         let dim = [128, 56, 128];
-        let var = |r: &WorldRecipe| {
+        let var = |b: &Bioma| {
             let mut hs = Vec::new();
             for z in (0..400).step_by(7) {
                 for x in (0..400).step_by(7) {
-                    hs.push(r.column_height(x, z, dim) as f32);
+                    hs.push(b.column_height(42, x, z, dim) as f32);
                 }
             }
             let mean = hs.iter().sum::<f32>() / hs.len() as f32;
             hs.iter().map(|h| (h - mean).powi(2)).sum::<f32>() / hs.len() as f32
         };
-        let desert = var(&WorldRecipe::desert(42));
-        let grass = var(&WorldRecipe::grassland(42));
-        assert!(desert < grass, "el desierto es más llano: var {desert:.1} vs {grass:.1}");
+        let d = var(&desierto().0);
+        let g = var(&pradera().0);
+        assert!(d < g, "el desierto es más llano: var {d:.1} vs {g:.1}");
     }
 
     #[test]
     fn el_desierto_pinta_arena_agua_y_cactus() {
         let dim = [128, 48, 128];
-        let r = WorldRecipe::desert(3);
-        let g = r.generate(dim);
+        let (b, pal) = desierto();
+        let grid = b.generate_window(3, &pal, dim, [0, 0]);
         let mut seen = [false; 3]; // [arena, agua, cactus]
-        // La arena lleva grano (perturbación por vóxel) → se detecta por cercanía,
-        // no por igualdad exacta. Agua y cactus van sin grano (color exacto).
         let near = |a: [u8; 3], b: [u8; 3]| {
             (a[0] as i32 - b[0] as i32).abs() <= 60
                 && (a[1] as i32 - b[1] as i32).abs() <= 60
@@ -435,7 +1366,7 @@ mod tests {
         for z in 0..dim[2] {
             for x in 0..dim[0] {
                 for y in 0..dim[1] {
-                    if let Some(c) = g.get(x, y, z) {
+                    if let Some(c) = grid.get(x, y, z) {
                         if c[3] == 0 {
                             continue;
                         }
@@ -459,29 +1390,307 @@ mod tests {
     #[test]
     fn grano_de_materia_perturba_pero_es_determinista() {
         let base = Material::Sand.color();
-        // grain=0 → color intacto (slab plano).
         assert_eq!(grained(base, 0.0, 5, 3, 9, 1337), base);
-        // grain>0 → el mismo vóxel no es exactamente el color base (tiene grano)…
         let g1 = grained(base, 0.6, 5, 3, 9, 1337);
-        assert_ne!(g1, base, "con grano el vóxel se aparta del color liso");
-        // …pero es función pura: mismo (pos, seed) → mismo color (seamless/streaming).
+        assert_ne!(g1, base);
         let g2 = grained(base, 0.6, 5, 3, 9, 1337);
         assert_eq!(g1, g2);
-        // Vóxeles vecinos difieren → la superficie no es un color uniforme.
         let gn = grained(base, 0.6, 6, 3, 9, 1337);
-        assert_ne!(g1, gn, "vóxeles contiguos varían → materia granular, no bloque liso");
-        // El desierto trae grano por defecto.
-        assert!(WorldRecipe::desert(1).grain > 0.0);
+        assert_ne!(g1, gn);
+        assert!(Material::Sand.grain() > 0.0);
     }
 
     #[test]
     fn mismo_seed_mismo_mundo() {
         let dim = [64, 40, 64];
-        let a = WorldRecipe::desert(99).generate(dim);
-        let b = WorldRecipe::desert(99).generate(dim);
-        // Un muestreo basta: deterministas.
+        let (b, pal) = desierto();
+        let a = b.generate_window(99, &pal, dim, [0, 0]);
+        let c = b.generate_window(99, &pal, dim, [0, 0]);
         for (x, y, z) in [(10, 12, 10), (30, 8, 44), (60, 20, 5)] {
-            assert_eq!(a.get(x, y, z), b.get(x, y, z), "({x},{y},{z}) difiere");
+            assert_eq!(a.get(x, y, z), c.get(x, y, z), "({x},{y},{z}) difiere");
         }
     }
+
+    /// Cuenta vóxels sólidos en un grid.
+    fn solids(g: &VoxelGrid, dim: [u32; 3]) -> usize {
+        let mut n = 0;
+        for x in 0..dim[0] {
+            for y in 0..dim[1] {
+                for z in 0..dim[2] {
+                    if g.is_solid(x as i32, y as i32, z as i32) {
+                        n += 1;
+                    }
+                }
+            }
+        }
+        n
+    }
+
+    #[test]
+    fn cada_forma_estampa_voxels() {
+        let (b, _) = pradera();
+        let dim = [48, 40, 48];
+        let leaf = Material::Leaf.color();
+        // Cada variante debe dejar al menos unos cuantos vóxels sobre el suelo.
+        for forma in Forma::ALL {
+            let mut g = VoxelGrid::new(dim);
+            b.stamp_flora(&mut g, forma, leaf, 24, 4, 24, dim);
+            let n = solids(&g, dim);
+            assert!(n >= 3, "{} estampó sólo {n} vóxels", forma.label());
+        }
+    }
+
+    #[test]
+    fn formas_lenosas_tienen_tronco() {
+        let (b, _) = pradera();
+        let dim = [48, 40, 48];
+        let leaf = Material::Leaf.color();
+        // Árbol, conífera y palmera arrancan de un tronco leñoso (WOOD) sobre la base.
+        for forma in [Forma::Arbol, Forma::Conifera, Forma::Palmera] {
+            let mut g = VoxelGrid::new(dim);
+            b.stamp_flora(&mut g, forma, leaf, 24, 4, 24, dim);
+            let base = g.get(24, 4, 24).map(|c| [c[0], c[1], c[2]]);
+            assert_eq!(base, Some(WOOD), "{} no tiene tronco en la base", forma.label());
+        }
+    }
+
+    #[test]
+    fn el_pueblo_traza_calles_y_plazas() {
+        let dim = [64, 40, 64];
+        let (mut b, pal) = pradera();
+        b.relief = 0.2;
+        b.mountains = 0.1;
+        b.water_level = 0.0;
+        b.rivers = 0.0;
+        b.casas = vec![crate::casa::CasaUso { tipo: crate::casa::CasaTipo::Cabana, densidad: 0.6 }];
+        b.densidad_urbana = 0.95; // toda la ventana es pueblo → calles locales garantizadas
+        let g = b.generate_window(5, &pal, dim, [0, 0]);
+        // Hay asfalto de calle en la superficie.
+        let mut asfalto = 0;
+        for x in 0..dim[0] {
+            for y in 0..dim[1] {
+                for z in 0..dim[2] {
+                    if g.get(x, y, z) == Some([64, 66, 72, 255]) {
+                        asfalto += 1;
+                    }
+                }
+            }
+        }
+        assert!(asfalto > 20, "el pueblo trazó calles (asfalto = {asfalto})");
+    }
+
+    #[test]
+    fn el_casco_urbano_es_plano_sin_escalones() {
+        // Bioma ondulado (dunas + relieve): en campo el suelo sube y baja, pero la
+        // avenida del casco debe salir PLANA — cero escalones entre columnas vecinas.
+        let dim = [176, 48, 176];
+        let (mut b, pal) = pradera();
+        b.base = 0.2;
+        b.dune = 0.06; // ondulación marcada del terreno
+        b.relief = 0.3;
+        b.mountains = 0.2;
+        b.water_level = 0.0;
+        b.rivers = 0.0;
+        b.densidad_urbana = 0.9;
+        b.casas = vec![crate::casa::CasaUso { tipo: crate::casa::CasaTipo::Cabana, densidad: 0.5 }];
+        let seed = 9;
+        let g = b.generate_window(seed, &pal, dim, [0, 0]);
+
+        // Ubicamos un pueblo cuyo centro caiga cómodo dentro de la ventana.
+        let urbe = b.urbe(seed, dim);
+        let h = |x: i32, z: i32| b.column_height(seed, x, z, dim);
+        let m = urbe.radio_interior();
+        let p = crate::urbe::pueblos_en_ventana(&urbe, [0, 0], dim, &h)
+            .into_iter()
+            .find(|p| {
+                p.centro[0] - m >= 0
+                    && p.centro[1] - m >= 0
+                    && p.centro[0] + m < dim[0] as i32
+                    && p.centro[1] + m < dim[2] as i32
+            })
+            .expect("hay un pueblo entero dentro de la ventana");
+
+        // Recorremos la avenida central (v=0) por el interior y exigimos cota
+        // constante: el voxel sólido más alto de cada columna de calzada = la
+        // explanada. Cero escalones entre columnas vecinas.
+        let base = p.suelo;
+        let mut vistos = 0;
+        let mut escalones = 0;
+        let mut previa: Option<u32> = None;
+        for du in -urbe.radio_interior()..=urbe.radio_interior() {
+            let lx = p.centro[0] + du;
+            let lz = p.centro[1];
+            if lx < 0 || lz < 0 || lx >= dim[0] as i32 || lz >= dim[2] as i32 {
+                continue;
+            }
+            let y = match g.height_at(lx as u32, lz as u32) {
+                Some(y) => y,
+                None => continue,
+            };
+            // Sólo contamos columnas de pura calzada (a cota base, sin mueble encima).
+            if y == base {
+                vistos += 1;
+                if let Some(pr) = previa {
+                    if pr != y {
+                        escalones += 1;
+                    }
+                }
+                previa = Some(y);
+            }
+        }
+        assert!(vistos > 20, "la avenida nivelada apenas se vio ({vistos} columnas a cota)");
+        assert_eq!(escalones, 0, "la avenida del casco tiene escalones");
+
+        // La misma semilla da el mismo casco (streaming determinista).
+        let g2 = b.generate_window(seed, &pal, dim, [0, 0]);
+        assert_eq!(g.get(p.centro[0] as u32, base, p.centro[1] as u32), g2.get(p.centro[0] as u32, base, p.centro[1] as u32));
+    }
+
+    #[test]
+    fn la_fauna_puebla_el_bioma() {
+        let dim = [64, 40, 64];
+        let (mut b, pal) = pradera();
+        b.relief = 0.2;
+        b.mountains = 0.1;
+        b.water_level = 0.0;
+        b.rivers = 0.0;
+        // Sin fauna: el terreno base. Con fauna densa: aparecen animales encima.
+        let sin = b.generate_window(7, &pal, dim, [0, 0]);
+        b.fauna = vec![crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Vaca, densidad: 0.95 }];
+        let con = b.generate_window(7, &pal, dim, [0, 0]);
+        let mut diff = 0;
+        for x in 0..dim[0] {
+            for y in 0..dim[1] {
+                for z in 0..dim[2] {
+                    if sin.get(x, y, z) != con.get(x, y, z) {
+                        diff += 1;
+                    }
+                }
+            }
+        }
+        assert!(diff > 20, "la fauna pobló sólo {diff} vóxels");
+        // Determinista: misma semilla, misma fauna.
+        let con2 = b.generate_window(7, &pal, dim, [0, 0]);
+        assert_eq!(con.get(30, 6, 30), con2.get(30, 6, 30));
+    }
+
+    #[test]
+    fn los_minerales_afloran_en_la_roca() {
+        let dim = [64, 48, 64];
+        let (mut b, mut pal) = pradera();
+        // Roca sólida hasta arriba, mucho relieve → hay profundidad para minar.
+        pal.ground = ResolvedMaterial::new(Material::Rock.color(), 0.0);
+        b.relief = 0.9;
+        b.mountains = 1.0;
+        b.rivers = 0.0;
+        b.water_level = 0.0;
+        let sin = b.generate_window(5, &pal, dim, [0, 0]);
+        b.minerales = vec![crate::mineral::MineralUso::with_abundancia(crate::mineral::Mineral::Cobre, 1.0)];
+        let con = b.generate_window(5, &pal, dim, [0, 0]);
+        let mut diff = 0;
+        for x in 0..dim[0] {
+            for y in 0..dim[1] {
+                for z in 0..dim[2] {
+                    if sin.get(x, y, z) != con.get(x, y, z) {
+                        diff += 1;
+                    }
+                }
+            }
+        }
+        assert!(diff > 50, "los minerales cambiaron sólo {diff} vóxels");
+        // Determinista: misma semilla, misma veta.
+        let con2 = b.generate_window(5, &pal, dim, [0, 0]);
+        assert_eq!(con.get(20, 10, 20), con2.get(20, 10, 20));
+    }
+
+    /// La gramática sub-voxel llega a TODO lo estampado: flora (detalle del material),
+    /// fauna (detalle de ser vivo) y minerales (heredan la roca) — no sólo la
+    /// superficie del terreno. Antes de este cambio, objetos/seres/vetas quedaban
+    /// SIEMPRE en el look global (`detail_at == [0,0]`), delatando la caja rectangular.
+    #[test]
+    fn el_detalle_por_voxel_llega_a_flora_fauna_y_minerales() {
+        let dim = [64, 44, 64];
+        let (mut b, mut pal) = pradera();
+        b.relief = 0.2;
+        b.mountains = 0.1;
+        b.water_level = 0.0;
+        b.rivers = 0.0;
+        // Flora con detalle autorado (cactus rugoso+biselado) y fauna densa.
+        pal.objetos = vec![(
+            ResolvedMaterial::new(Material::Cactus.color(), 0.0).con_detalle((1.1, 0.6)),
+            0.9,
+            Forma::Columnar,
+        )];
+        b.objetos = vec![ObjetoUso { material: 9, densidad: 0.9, forma: Forma::Columnar }];
+        b.fauna = vec![crate::bicho::BichoUso { bicho: crate::bicho::Bicho::Vaca, densidad: 0.95 }];
+        let g = b.generate_window(7, &pal, dim, [0, 0]);
+
+        // Cuenta voxels sólidos con detalle autorado (byte != [0,0]) sobre la piel del
+        // terreno (por encima de la superficie sólo hay flora/fauna). El terreno base
+        // de este bioma no tiene detalle → todo lo autorado de arriba es flora/fauna.
+        let mut autorados = 0;
+        for x in 0..dim[0] {
+            for z in 0..dim[2] {
+                for y in 0..dim[1] {
+                    let solido = g.get(x, y, z).map(|c| c[3] > 127).unwrap_or(false);
+                    let con_detalle = g.detail_at(x, y, z) != Some([0, 0]);
+                    if solido && con_detalle {
+                        autorados += 1;
+                    }
+                }
+            }
+        }
+        assert!(autorados > 30, "flora+fauna dejaron sólo {autorados} voxels con detalle");
+
+        // Minerales: heredan el detalle de la roca en que están embebidos. Aislo las
+        // vetas por DIFF (sin/con mineral, misma semilla): todo voxel que aparece como
+        // mineral debe llevar el detalle de la roca (`cliff` con rug 0.8) → la veta no
+        // salta como parche de otra fidelidad. Sin color-matching (el mineral se tiñe).
+        let mut rocoso = pradera().0;
+        rocoso.relief = 0.9;
+        rocoso.mountains = 1.0;
+        rocoso.rivers = 0.0;
+        rocoso.water_level = 0.0;
+        let mut pal_roca = pradera().1;
+        pal_roca.ground = ResolvedMaterial::new(Material::Rock.color(), 0.0);
+        pal_roca.cliff = ResolvedMaterial::new(Material::Rock.color(), 0.0).con_detalle((0.8, 0.0));
+        let sin_min = rocoso.generate_window(5, &pal_roca, dim, [0, 0]);
+        rocoso.minerales =
+            vec![crate::mineral::MineralUso::with_abundancia(crate::mineral::Mineral::Cobre, 1.0)];
+        let con_min = rocoso.generate_window(5, &pal_roca, dim, [0, 0]);
+        let (mut vetas, mut vetas_con_detalle) = (0, 0);
+        for x in 0..dim[0] {
+            for y in 0..dim[1] {
+                for z in 0..dim[2] {
+                    // Voxel que CAMBIÓ de color por la veta y sigue sólido = mineral.
+                    let solido = con_min.get(x, y, z).map(|c| c[3] > 127).unwrap_or(false);
+                    if con_min.get(x, y, z) != sin_min.get(x, y, z) && solido {
+                        vetas += 1;
+                        if con_min.detail_at(x, y, z) != Some([0, 0]) {
+                            vetas_con_detalle += 1;
+                        }
+                    }
+                }
+            }
+        }
+        assert!(vetas > 20, "casi no hubo veta que testear ({vetas} voxels)");
+        assert_eq!(vetas, vetas_con_detalle, "toda veta hereda el detalle de la roca");
+    }
+
+    #[test]
+    fn estampado_es_determinista_por_posicion() {
+        let (b, _) = pradera();
+        let dim = [48, 40, 48];
+        let col = Material::Leaf.color();
+        let mut g1 = VoxelGrid::new(dim);
+        let mut g2 = VoxelGrid::new(dim);
+        b.stamp_flora(&mut g1, Forma::Arbol, col, 24, 4, 24, dim);
+        b.stamp_flora(&mut g2, Forma::Arbol, col, 24, 4, 24, dim);
+        assert_eq!(solids(&g1, dim), solids(&g2, dim));
+        // Distinta posición → distinta silueta (el hash siembra con wx/wz).
+        let mut g3 = VoxelGrid::new(dim);
+        b.stamp_flora(&mut g3, Forma::Arbol, col, 12, 4, 30, dim);
+        // La copa cae en otra región; comparamos el conteo local del centro original.
+        assert!(solids(&g3, dim) > 0);
+    }
 }
diff --git a/llimphi-voxel/tests/documento.rs b/llimphi-voxel/tests/documento.rs
new file mode 100644
index 0000000..09e8075
--- /dev/null
+++ b/llimphi-voxel/tests/documento.rs
@@ -0,0 +1,207 @@
+// =============================================================================
+//  llimphi-voxel :: tests/documento — abrir, guardar, combinar, extraer
+// -----------------------------------------------------------------------------
+//  Certifica la administración por archivos: round-trip del format (RON y
+//  postcard), combinar proyectos sin colisiones ni referencias rotas, y extraer
+//  una escena con toda su clausura de dependencias como fragmento portable.
+//  (`Project` no es `PartialEq` por historia, así que se compara por
+//  serialización — el round-trip idempotente es prueba suficiente.)
+// =============================================================================
+
+use llimphi_voxel::{Documento, ErrorDoc, Project, Suceso, TipoSuceso, MAGIA_DOC, VERSION_DOC};
+
+#[test]
+fn round_trip_ron_preserva_el_proyecto() {
+    let p = Project::starter();
+    let doc = Documento::nuevo(p.clone());
+    let texto = doc.a_ron().unwrap();
+    let recuperado = Documento::de_ron(&texto).unwrap();
+    // Re-serializar da el MISMO texto: el proyecto sobrevivió íntegro.
+    assert_eq!(recuperado.a_ron().unwrap(), texto);
+    assert_eq!(recuperado.magia, MAGIA_DOC);
+    assert_eq!(recuperado.version, VERSION_DOC);
+    assert_eq!(recuperado.proyecto.escenas.len(), p.escenas.len());
+}
+
+#[test]
+fn round_trip_postcard_nativo() {
+    let doc = Documento::nuevo(Project::starter());
+    let bytes = doc.a_bytes().unwrap();
+    let recuperado = Documento::de_bytes(&bytes).unwrap();
+    // El format nativo compacto también preserva el proyecto (comparado vía RON).
+    assert_eq!(recuperado.a_ron().unwrap(), doc.a_ron().unwrap());
+    // Y es más chico que el RON legible.
+    assert!(bytes.len() < doc.a_ron().unwrap().len());
+}
+
+#[test]
+fn un_ron_ajeno_se_rechaza() {
+    // Un RON que no parsea como documento se rechaza (no se malinterpreta).
+    assert!(matches!(
+        Documento::de_ron("(foo: 1, bar: 2)"),
+        Err(ErrorDoc::Parsear(_))
+    ));
+}
+
+#[test]
+fn marca_ajena_pero_ron_valido_se_detecta() {
+    let doc = Documento::nuevo(Project::starter());
+    let texto = doc.a_ron().unwrap().replace(MAGIA_DOC, "otra-cosa");
+    assert_eq!(Documento::de_ron(&texto).unwrap_err(), ErrorDoc::MagiaAjena);
+}
+
+#[test]
+fn version_futura_se_rechaza() {
+    let mut doc = Documento::nuevo(Project::starter());
+    doc.version = VERSION_DOC + 1;
+    let texto = doc.a_ron().unwrap();
+    assert_eq!(
+        Documento::de_ron(&texto).unwrap_err(),
+        ErrorDoc::VersionFutura(VERSION_DOC + 1)
+    );
+}
+
+#[test]
+fn el_starter_es_integro() {
+    // El proyecto de arranque no tiene referencias rotas.
+    assert!(Project::starter().validar_referencias().is_empty());
+}
+
+#[test]
+fn combinar_no_colisiona_ni_rompe_referencias() {
+    let mut a = Project::starter();
+    let b = Project::starter();
+    let (leyes_a, mats_a, seres_a, biomas_a, mundos_a, escenas_a) = (
+        a.leyes.len(),
+        a.materiales.len(),
+        a.seres.len(),
+        a.biomas.len(),
+        a.mundos.len(),
+        a.escenas.len(),
+    );
+
+    a.combinar(&b);
+
+    // Se duplicó todo (dos starters).
+    assert_eq!(a.leyes.len(), leyes_a + b.leyes.len());
+    assert_eq!(a.materiales.len(), mats_a + b.materiales.len());
+    assert_eq!(a.seres.len(), seres_a + b.seres.len());
+    assert_eq!(a.biomas.len(), biomas_a + b.biomas.len());
+    assert_eq!(a.mundos.len(), mundos_a + b.mundos.len());
+    assert_eq!(a.escenas.len(), escenas_a + b.escenas.len());
+
+    // Ningún id repetido en todo el proyecto combinado.
+    let mut ids: Vec<u64> = a
+        .leyes
+        .iter()
+        .map(|x| x.id)
+        .chain(a.materiales.iter().map(|x| x.id))
+        .chain(a.seres.iter().map(|x| x.id))
+        .chain(a.biomas.iter().map(|x| x.id))
+        .chain(a.mundos.iter().map(|x| x.id))
+        .chain(a.escenas.iter().map(|x| x.id))
+        .collect();
+    let total = ids.len();
+    ids.sort_unstable();
+    ids.dedup();
+    assert_eq!(ids.len(), total, "hay ids repetidos tras combinar");
+
+    // Y TODAS las referencias cruzadas siguen resolviendo.
+    let rotas = a.validar_referencias();
+    assert!(rotas.is_empty(), "combinar rompió referencias: {rotas:?}");
+}
+
+#[test]
+fn extraer_escena_produce_un_fragmento_integro_y_minimo() {
+    let p = Project::starter();
+    let escena_id = p.escenas[0].id;
+    let frag = p.extraer_escena(escena_id).expect("la escena existe");
+
+    // El fragmento tiene exactamente una escena y es íntegro.
+    assert_eq!(frag.escenas.len(), 1);
+    assert_eq!(frag.escenas[0].id, escena_id);
+    let rotas = frag.validar_referencias();
+    assert!(rotas.is_empty(), "fragmento roto: {rotas:?}");
+
+    // Es MÍNIMO: no arrastra el mundo/bioma que la escena no usa. El starter
+    // tiene 2 mundos; la escena demo usa uno → el fragmento trae 1.
+    assert_eq!(frag.mundos.len(), 1);
+    assert!(frag.mundos.len() < p.mundos.len());
+    assert_eq!(frag.mundos[0].id, p.escenas[0].mundo);
+}
+
+#[test]
+fn extraer_luego_combinar_reconstituye_una_escena_en_otro_proyecto() {
+    let origen = Project::starter();
+    let escena_id = origen.escenas[0].id;
+
+    // Un proyecto destino vacío recibe SÓLO esa escena, con su clausura.
+    let mut destino = Project { next_id: 1, ..Default::default() };
+    destino.combinar_escena(&origen, escena_id).unwrap();
+
+    assert_eq!(destino.escenas.len(), 1);
+    assert!(destino.validar_referencias().is_empty());
+    // El destino quedó auto-contenido: resuelve el mundo de la escena.
+    let esc = &destino.escenas[0];
+    assert!(destino.mundo(esc.mundo).is_some());
+    // Y los actores apuntan a seres válidos del destino.
+    for a in &esc.actors {
+        assert!(destino.seres.get(a.character).is_some());
+    }
+}
+
+#[test]
+fn combinar_escena_inexistente_es_error() {
+    let mut destino = Project::starter();
+    let otro = Project::starter();
+    assert_eq!(
+        destino.combinar_escena(&otro, 999_999).unwrap_err(),
+        ErrorDoc::EscenaAusente(999_999)
+    );
+}
+
+#[test]
+fn los_sucesos_arrastran_su_ser_en_la_clausura_y_se_validan() {
+    // Partimos del starter (tiene seres); dictamos en su escena un suceso
+    // "aparece el primer ser".
+    let mut p = Project::starter();
+    let ser_id = p.seres[0].id;
+    let escena_id = p.escenas[0].id;
+    p.escenas[0].sucesos.push(Suceso {
+        t: 1.0,
+        pos: [10.0, 2.0, 10.0],
+        tipo: TipoSuceso::Aparece(ser_id),
+        nota: "aquí aparece".into(),
+    });
+    assert!(p.validar_referencias().is_empty(), "el suceso apunta a un ser válido");
+
+    // Extraer la escena arrastra ESE ser a la clausura (aunque el bioma no lo use).
+    let frag = p.extraer_escena(escena_id).unwrap();
+    assert!(frag.seres.iter().any(|s| s.id == ser_id), "el ser del suceso viaja");
+    assert!(frag.validar_referencias().is_empty());
+    assert_eq!(frag.escenas[0].sucesos.len(), 1);
+
+    // Un suceso que apunta a un ser inexistente se delata.
+    let mut roto = Project::starter();
+    roto.escenas[0].sucesos.push(Suceso {
+        t: 0.0,
+        pos: [0.0; 3],
+        tipo: TipoSuceso::Aparece(999_999),
+        nota: String::new(),
+    });
+    assert!(!roto.validar_referencias().is_empty());
+}
+
+#[test]
+fn guardar_y_abrir_en_disco() {
+    let dir = std::env::temp_dir().join(format!("voxeldoc-{}", std::process::id()));
+    std::fs::create_dir_all(&dir).unwrap();
+    let path = dir.join("escena.voxstudio.ron");
+
+    let doc = Documento::nuevo(Project::starter());
+    doc.guardar(&path).unwrap();
+    let leido = Documento::abrir(&path).unwrap();
+    assert_eq!(leido.a_ron().unwrap(), doc.a_ron().unwrap());
+
+    let _ = std::fs::remove_file(&path);
+}
diff --git a/llimphi-voxel/tests/historia.rs b/llimphi-voxel/tests/historia.rs
new file mode 100644
index 0000000..201e201
--- /dev/null
+++ b/llimphi-voxel/tests/historia.rs
@@ -0,0 +1,144 @@
+// =============================================================================
+//  llimphi-voxel :: tests/historia — versiones, alternativas, dedup por contenido
+// -----------------------------------------------------------------------------
+//  El DAG sobre el que se monta todo: commitear versiones, reconstruir el
+//  proyecto de cualquiera, ramificar alternativas, seguir el linaje, y que
+//  snapshots idénticos se guarden una sola vez.
+// =============================================================================
+
+use llimphi_voxel::{Historia, Project};
+
+#[test]
+fn commitea_y_reconstruye_el_proyecto() {
+    let mut h = Historia::nueva();
+    assert!(h.is_empty());
+
+    let v1 = h.commit(&Project::nacimiento(), "el nacimiento").unwrap();
+    assert_eq!(h.len(), 1);
+    assert_eq!(h.punta(), Some(v1));
+
+    // El proyecto de la versión reconstruye el snapshot íntegro.
+    let recuperado = h.proyecto_de(&v1).expect("la versión existe");
+    assert!(recuperado.validar_referencias().is_empty());
+    assert_eq!(recuperado.escenas[0].name, "el nacimiento");
+}
+
+#[test]
+fn la_cadena_de_versiones_es_el_linaje() {
+    let mut h = Historia::nueva();
+    let mut p = Project::nacimiento();
+    let v1 = h.commit(&p, "v1: el nacimiento").unwrap();
+    // Editar y commitear otra versión.
+    if let Some(esc) = p.escenas.first_mut() {
+        if let Some(atm) = esc.atmosfera.as_mut() {
+            atm.bruma = 4.0; // más bruma
+        }
+    }
+    let v2 = h.commit(&p, "v2: más bruma").unwrap();
+
+    // El linaje de v2 = [v2, v1].
+    assert_eq!(h.linaje(&v2), vec![v2, v1]);
+    // El padre de v2 es v1.
+    assert_eq!(h.version(&v2).unwrap().padres, vec![v1]);
+    // La punta avanzó a v2.
+    assert_eq!(h.punta(), Some(v2));
+}
+
+#[test]
+fn las_ramas_son_alternativas() {
+    let mut h = Historia::nueva();
+    let base = h.commit(&Project::nacimiento(), "base").unwrap();
+
+    // Ramificar dos alternativas desde la base.
+    h.ramificar("con-montañas").unwrap();
+    h.ramificar("sin-bruma").unwrap();
+
+    // En "con-montañas": una versión con montañas.
+    assert!(h.cambiar_rama("con-montañas"));
+    let mut p = h.proyecto_actual().unwrap();
+    p.biomas[0].mountains = 0.6;
+    let alt_a = h.commit(&p, "el nacimiento con montañas").unwrap();
+
+    // En "sin-bruma": otra versión, hermana de la anterior (mismo padre `base`).
+    assert!(h.cambiar_rama("sin-bruma"));
+    let mut p = h.proyecto_actual().unwrap();
+    p.escenas[0].atmosfera = None;
+    let alt_b = h.commit(&p, "el nacimiento despejado").unwrap();
+
+    // alt_a y alt_b son ALTERNATIVAS: comparten el padre `base`.
+    assert_eq!(h.version(&alt_a).unwrap().padres, vec![base]);
+    assert_eq!(h.version(&alt_b).unwrap().padres, vec![base]);
+    assert!(h.alternativas(&alt_a).contains(&alt_b));
+    assert!(h.alternativas(&alt_b).contains(&alt_a));
+
+    // Y cada rama reconstruye SU proyecto.
+    assert_eq!(h.proyecto_de(&alt_a).unwrap().biomas[0].mountains, 0.6);
+    assert!(h.proyecto_de(&alt_b).unwrap().escenas[0].atmosfera.is_none());
+}
+
+#[test]
+fn snapshots_identicos_se_dedupean() {
+    let mut h = Historia::nueva();
+    // Dos versiones del MISMO proyecto: distinta versión (distinto orden), pero
+    // el snapshot es el mismo hash → un solo blob almacenado.
+    let p = Project::nacimiento();
+    let v1 = h.commit(&p, "una").unwrap();
+    h.ramificar("otra").unwrap();
+    h.cambiar_rama("otra");
+    let v2 = h.commit(&p, "otra").unwrap();
+
+    assert_ne!(v1, v2, "son versiones distintas");
+    // Pero apuntan al MISMO snapshot (contenido idéntico).
+    assert_eq!(h.version(&v1).unwrap().snapshot, h.version(&v2).unwrap().snapshot);
+}
+
+#[test]
+fn navegar_vuelve_a_una_version_y_bifurca_desde_ahi() {
+    let mut h = Historia::nueva();
+    let mut p = Project::nacimiento();
+    let v1 = h.commit(&p, "v1").unwrap();
+    p.biomas[0].mountains = 0.5;
+    let v2 = h.commit(&p, "v2 con montañas").unwrap();
+    assert_eq!(h.actual(), Some(v2));
+
+    // Volver (checkout) a v1: la cabeza se mueve y reconstruye ESE proyecto.
+    let vuelto = h.checkout(&v1).expect("v1 existe");
+    assert_eq!(h.actual(), Some(v1));
+    assert!(vuelto.biomas[0].mountains < 0.1, "v1 no tenía montañas");
+
+    // Bifurcar desde el pasado: un commit ahora cuelga de v1, no de v2.
+    let mut p = vuelto;
+    p.escenas[0].atmosfera = None;
+    let v3 = h.commit(&p, "v3 desde v1, despejado").unwrap();
+    assert_eq!(h.version(&v3).unwrap().padres, vec![v1]);
+    // v2 y v3 son alternativas (ambas cuelgan de v1).
+    assert!(h.alternativas(&v3).contains(&v2));
+}
+
+#[test]
+fn versiones_ordenadas_por_creacion() {
+    let mut h = Historia::nueva();
+    let a = h.commit(&Project::nacimiento(), "a").unwrap();
+    let b = h.commit(&Project::nacimiento(), "b").unwrap();
+    let orden: Vec<_> = h.versiones_ordenadas().into_iter().map(|(id, _)| id).collect();
+    assert_eq!(orden, vec![a, b], "en orden de creación");
+}
+
+#[test]
+fn la_historia_viaja_por_archivo() {
+    let mut h = Historia::nueva();
+    let v1 = h.commit(&Project::nacimiento(), "el nacimiento").unwrap();
+    h.ramificar("variante").unwrap();
+
+    let bytes = h.a_bytes().unwrap();
+    let recuperada = Historia::de_bytes(&bytes).unwrap();
+
+    assert_eq!(recuperada.len(), h.len());
+    assert_eq!(recuperada.punta(), Some(v1));
+    assert!(recuperada.ramas().contains_key("variante"));
+    // El proyecto sobrevive el round-trip de la historia.
+    assert_eq!(
+        recuperada.proyecto_de(&v1).unwrap().escenas[0].name,
+        "el nacimiento"
+    );
+}
diff --git a/llimphi-voxel/tests/nacimiento.rs b/llimphi-voxel/tests/nacimiento.rs
new file mode 100644
index 0000000..0000aa0
--- /dev/null
+++ b/llimphi-voxel/tests/nacimiento.rs
@@ -0,0 +1,49 @@
+// =============================================================================
+//  llimphi-voxel :: tests/nacimiento — la escena del nacimiento (artefacto #1)
+// -----------------------------------------------------------------------------
+//  Certifica el primer artefacto de la colaboración: el desierto vacío + la
+//  cámara PURA que cae desde el negro entre mucha bruma. Íntegro, sin cuerpo, y
+//  viaja por archivo (usa la capacidad de documento).
+// =============================================================================
+
+use llimphi_voxel::{Atmosfera, Documento, Project};
+
+#[test]
+fn el_nacimiento_es_integro_y_camara_pura() {
+    let p = Project::nacimiento();
+    assert!(p.validar_referencias().is_empty(), "el proyecto es íntegro");
+
+    // Una escena, sin cuerpo (cámara pura), con caída y atmósfera.
+    assert_eq!(p.escenas.len(), 1);
+    let esc = &p.escenas[0];
+    assert_eq!(esc.name, "el nacimiento");
+    assert!(esc.actors.is_empty(), "todavía no hay cuerpo: es la cámara la que cae");
+    assert!(esc.caida.is_some(), "tiene la caída de apertura");
+    assert!(esc.atmosfera.is_some(), "tiene atmósfera (bruma + fundido)");
+
+    // El bioma es vacío puro: sin objetos ni seres, pocas montañas, sin agua.
+    assert_eq!(p.biomas.len(), 1);
+    let b = &p.biomas[0];
+    assert!(b.objetos.is_empty() && b.seres.is_empty(), "vacío: sin vegetación ni seres");
+    assert!(b.mountains < 0.1, "no tantas montañas");
+    assert_eq!(b.water_level, 0.0, "sin agua");
+
+    // Mucha bruma, y entra desde el negro.
+    let atm = esc.atmosfera.unwrap();
+    assert!(
+        atm.bruma > Atmosfera::despejada().bruma * 5.0,
+        "mucha más bruma que el aire despejado"
+    );
+    assert!(atm.desde_negro > 0.0, "entra desde el negro");
+}
+
+#[test]
+fn el_nacimiento_viaja_por_archivo() {
+    let doc = Documento::nuevo(Project::nacimiento());
+    let texto = doc.a_ron().unwrap();
+    let recuperado = Documento::de_ron(&texto).unwrap();
+    // Sobrevive el round-trip con caída + atmósfera intactas.
+    assert_eq!(recuperado.a_ron().unwrap(), texto);
+    assert!(recuperado.proyecto.escenas[0].caida.is_some());
+    assert!(recuperado.proyecto.escenas[0].atmosfera.is_some());
+}
diff --git a/llimphi-wasm-app-sdk/Cargo.toml b/llimphi-wasm-app-sdk/Cargo.toml
new file mode 100644
index 0000000..d90016b
--- /dev/null
+++ b/llimphi-wasm-app-sdk/Cargo.toml
@@ -0,0 +1,13 @@
+[package]
+name = "llimphi-wasm-app-sdk"
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+authors.workspace = true
+publish.workspace = true
+description = "llimphi-wasm-app-sdk — SDK del lado guest para apps WASM Tier 3 de Llimphi. El autor implementa el trait WasmApp (init/update/view sobre un Model propio) y construye su UI con el builder de llimphi-wire-view (col/row/text/button). La macro export_wasm_app! emite el ABI que el host (llimphi-wasm-runner) maneja: init/view/dispatch/alloc/free + memory. El Model vive en un global del módulo y persiste entre frames porque el host mantiene viva la instancia."
+
+[dependencies]
+llimphi-wire-view = { workspace = true }
+serde = { workspace = true }
+postcard = { workspace = true }
diff --git a/llimphi-wasm-app-sdk/LEEME.md b/llimphi-wasm-app-sdk/LEEME.md
new file mode 100644
index 0000000..dc9ef5f
--- /dev/null
+++ b/llimphi-wasm-app-sdk/LEEME.md
@@ -0,0 +1,27 @@
+# llimphi-wasm-app-sdk
+
+*Read this in English: [README.md](README.md).*
+
+Lado guest de las apps WASM Tier 3.
+
+Una app implementa `WasmApp`: un `Model` propio, una transición
+`update(&mut self, Msg)` y una vista `view(&self, &mut Ui) -> WireNode`. La
+UI se arma con los constructores libres de `llimphi_wire_view`
+(`col`/`row`/`text`) para lo no-interactivo y con el `Ui` para lo
+interactivo (`button`/`text_input`/`checkbox`).
+
+**Eventos con payload.** El `Ui` asigna un `EventId` a cada control y guarda
+su handler. El nodo lleva sólo el id; el host, al disparar, manda
+`dispatch(event_id, payload)`. El guest mira su tabla y reconstruye el `Msg`:
+un botón rinde su `Msg` fijo, un input rinde `f(texto_tecleado)`, un checkbox
+`f(nuevo_estado)`. Por eso **`Msg` ya no cruza la frontera** — sólo el id y el
+`EventPayload` —, así que `Msg` se libera de (de)serializar: basta `Clone`.
+
+`export_wasm_app!` genera el ABI: `wasm_init`, `wasm_view() -> u64`
+(ptr<<32|len del `WireNode` postcard), `wasm_dispatch(event_id, ptr, len)`,
+`wasm_alloc`, `wasm_free`. El `Model` y la tabla de handlers viven en un
+global y persisten entre frames porque el host mantiene viva la instancia.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../LEEME.md).
diff --git a/llimphi-wasm-app-sdk/README.md b/llimphi-wasm-app-sdk/README.md
new file mode 100644
index 0000000..97433d3
--- /dev/null
+++ b/llimphi-wasm-app-sdk/README.md
@@ -0,0 +1,25 @@
+# llimphi-wasm-app-sdk
+
+The guest side of Tier 3 WASM apps.
+
+An app implements `WasmApp`: its own `Model`, an `update(&mut self, Msg)`
+transition and a `view(&self, &mut Ui) -> WireNode`. The UI is built with
+`llimphi_wire_view`'s free constructors (`col`/`row`/`text`) for the
+non-interactive parts and with the `Ui` for the interactive ones
+(`button`/`text_input`/`checkbox`).
+
+**Events with payload.** The `Ui` assigns an `EventId` to each control and stores
+its handler. The node carries only the id; on firing, the host sends
+`dispatch(event_id, payload)`. The guest looks in its table and rebuilds the
+`Msg`: a button yields its fixed `Msg`, an input yields `f(typed_text)`, a
+checkbox `f(new_state)`. That is why **`Msg` no longer crosses the boundary** —
+only the id and the `EventPayload` — so `Msg` is freed from (de)serializing:
+`Clone` is enough.
+
+`export_wasm_app!` generates the ABI: `wasm_init`, `wasm_view() -> u64`
+(ptr<<32|len of the postcard `WireNode`), `wasm_dispatch(event_id, ptr, len)`,
+`wasm_alloc`, `wasm_free`. The `Model` and the handler table live in the guest.
+
+---
+
+Part of **llimphi** — see [llimphi](../README.md).
diff --git a/llimphi-wasm-app-sdk/src/lib.rs b/llimphi-wasm-app-sdk/src/lib.rs
new file mode 100644
index 0000000..a9b3c42
--- /dev/null
+++ b/llimphi-wasm-app-sdk/src/lib.rs
@@ -0,0 +1,313 @@
+//! llimphi-wasm-app-sdk — lado guest de las apps WASM Tier 3.
+//!
+//! Una app implementa [`WasmApp`]: un `Model` propio, una transición
+//! `update(&mut self, Msg)` y una vista `view(&self, &mut Ui) -> WireNode`. La
+//! UI se arma con los constructores libres de [`llimphi_wire_view`]
+//! (`col`/`row`/`text`) para lo no-interactivo y con el [`Ui`] para lo
+//! interactivo (`button`/`text_input`/`checkbox`).
+//!
+//! **Eventos con payload.** El `Ui` asigna un [`EventId`] a cada control y guarda
+//! su handler. El nodo lleva sólo el id; el host, al disparar, manda
+//! `dispatch(event_id, payload)`. El guest mira su tabla y reconstruye el `Msg`:
+//! un botón rinde su `Msg` fijo, un input rinde `f(texto_tecleado)`, un checkbox
+//! `f(nuevo_estado)`. Por eso **`Msg` ya no cruza la frontera** — sólo el id y el
+//! [`EventPayload`] —, así que `Msg` se libera de (de)serializar: basta `Clone`.
+//!
+//! [`export_wasm_app!`] genera el ABI: `wasm_init`, `wasm_view() -> u64`
+//! (ptr<<32|len del `WireNode` postcard), `wasm_dispatch(event_id, ptr, len)`,
+//! `wasm_alloc`, `wasm_free`. El `Model` y la tabla de handlers viven en un
+//! global y persisten entre frames porque el host mantiene viva la instancia.
+
+pub use llimphi_wire_view as wire;
+pub use llimphi_wire_view::{
+    col, leaf, row, spacer, text, Align, Dim, Dir, EventId, EventPayload, Justify, Rgba, TextAlign,
+    WireInput, WireNode, WireRadio, WireSelect, WireSlider, WireText,
+};
+
+/// Handler de un evento, del lado guest. El `Ui` los guarda; el dispatch los
+/// resuelve a un `Msg`.
+pub enum Handler<Msg> {
+    /// Click/tap → un `Msg` fijo.
+    Unit(Msg),
+    /// Texto tecleado → `Msg` construido con el texto nuevo.
+    Text(Box<dyn Fn(String) -> Msg>),
+    /// Toggle → `Msg` construido con el nuevo estado.
+    Toggle(Box<dyn Fn(bool) -> Msg>),
+    /// Slider → `Msg` construido con el valor nuevo.
+    Value(Box<dyn Fn(f32) -> Msg>),
+    /// Dropdown → `Msg` construido con el índice elegido.
+    Select(Box<dyn Fn(u32) -> Msg>),
+}
+
+/// Contexto de construcción de UI: asigna [`EventId`]s y acumula los handlers
+/// del frame. Se reconstruye en cada `view` y se entrega por `&mut`.
+pub struct Ui<Msg> {
+    handlers: Vec<Handler<Msg>>,
+}
+
+impl<Msg> Default for Ui<Msg> {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+impl<Msg> Ui<Msg> {
+    pub fn new() -> Self {
+        Self {
+            handlers: Vec::new(),
+        }
+    }
+
+    fn register(&mut self, h: Handler<Msg>) -> EventId {
+        let id = self.handlers.len() as EventId;
+        self.handlers.push(h);
+        id
+    }
+
+    /// Botón: nodo con `label` y el `Msg` a emitir al click. Encadena estilo a
+    /// gusto (`.fill(..).radius(..).size(..)`).
+    pub fn button(&mut self, label: impl Into<String>, size: f32, color: Rgba, msg: Msg) -> WireNode {
+        let id = self.register(Handler::Unit(msg));
+        text(label, size, color).on_click(id)
+    }
+
+    /// Hace clickable cualquier nodo ya construido, emitiendo `msg`.
+    pub fn clickable(&mut self, node: WireNode, msg: Msg) -> WireNode {
+        let id = self.register(Handler::Unit(msg));
+        node.on_click(id)
+    }
+
+    /// Campo de texto editable. `on_input(texto)` construye el `Msg` con el texto
+    /// nuevo en cada cambio. El `value` es la fuente de verdad (Elm): pintalo
+    /// desde tu `Model`.
+    pub fn text_input(
+        &mut self,
+        value: impl Into<String>,
+        placeholder: impl Into<String>,
+        on_input: impl Fn(String) -> Msg + 'static,
+    ) -> WireNode {
+        let id = self.register(Handler::Text(Box::new(on_input)));
+        WireNode::new()
+            .with_input(WireInput {
+                value: value.into(),
+                placeholder: placeholder.into(),
+                password: false,
+                multiline: false,
+            })
+            .on_input(id)
+    }
+
+    /// Igual que [`Self::text_input`] pero oculta el contenido (contraseñas).
+    pub fn password_input(
+        &mut self,
+        value: impl Into<String>,
+        placeholder: impl Into<String>,
+        on_input: impl Fn(String) -> Msg + 'static,
+    ) -> WireNode {
+        let id = self.register(Handler::Text(Box::new(on_input)));
+        WireNode::new()
+            .with_input(WireInput {
+                value: value.into(),
+                placeholder: placeholder.into(),
+                password: true,
+                multiline: false,
+            })
+            .on_input(id)
+    }
+
+    /// Campo multilínea: Enter inserta `\n` (en `text_input` se ignora). Para
+    /// notas/descripciones. El guest sigue siendo la fuente de verdad del texto.
+    pub fn multiline_input(
+        &mut self,
+        value: impl Into<String>,
+        placeholder: impl Into<String>,
+        on_input: impl Fn(String) -> Msg + 'static,
+    ) -> WireNode {
+        let id = self.register(Handler::Text(Box::new(on_input)));
+        WireNode::new()
+            .with_input(WireInput {
+                value: value.into(),
+                placeholder: placeholder.into(),
+                password: false,
+                multiline: true,
+            })
+            .on_input(id)
+    }
+
+    /// Checkbox. `on_toggle(nuevo_estado)` construye el `Msg`.
+    pub fn checkbox(&mut self, checked: bool, on_toggle: impl Fn(bool) -> Msg + 'static) -> WireNode {
+        let id = self.register(Handler::Toggle(Box::new(on_toggle)));
+        WireNode::new().with_toggle(checked).on_toggle(id)
+    }
+
+    /// Slider con `value` en `[min, max]`. `on_value(v)` construye el `Msg` con
+    /// el valor nuevo al clickear/arrastrar la barra.
+    pub fn slider(
+        &mut self,
+        value: f32,
+        min: f32,
+        max: f32,
+        on_value: impl Fn(f32) -> Msg + 'static,
+    ) -> WireNode {
+        let id = self.register(Handler::Value(Box::new(on_value)));
+        WireNode::new()
+            .with_slider(WireSlider { value, min, max })
+            .on_value(id)
+    }
+
+    /// Dropdown con `options` y la `selected` actual. `on_select(idx)` construye
+    /// el `Msg` con el índice elegido.
+    pub fn select(
+        &mut self,
+        options: Vec<String>,
+        selected: u32,
+        on_select: impl Fn(u32) -> Msg + 'static,
+    ) -> WireNode {
+        let id = self.register(Handler::Select(Box::new(on_select)));
+        WireNode::new()
+            .with_select(WireSelect { options, selected })
+            .on_select(id)
+    }
+
+    /// Grupo de radio: `options` siempre visibles con la `selected` marcada.
+    /// `on_choose(idx)` construye el `Msg` con la opción elegida (mismo handler
+    /// que el dropdown; sólo cambia el render). Devuelve el nodo dentro de una
+    /// columna para apilar las opciones.
+    pub fn radio(
+        &mut self,
+        options: Vec<String>,
+        selected: u32,
+        on_choose: impl Fn(u32) -> Msg + 'static,
+    ) -> WireNode {
+        let id = self.register(Handler::Select(Box::new(on_choose)));
+        WireNode::new()
+            .with_radio(WireRadio { options, selected })
+            .on_radio(id)
+    }
+
+    /// Resuelve un evento a un `Msg`. Lo usa el runtime generado por la macro.
+    pub fn resolve(&self, id: EventId, payload: EventPayload) -> Option<Msg>
+    where
+        Msg: Clone,
+    {
+        match self.handlers.get(id as usize)? {
+            Handler::Unit(m) => Some(m.clone()),
+            Handler::Text(f) => match payload {
+                EventPayload::Text(s) => Some(f(s)),
+                _ => None,
+            },
+            Handler::Toggle(f) => match payload {
+                EventPayload::Toggle(b) => Some(f(b)),
+                _ => None,
+            },
+            Handler::Value(f) => match payload {
+                EventPayload::Value(v) => Some(f(v)),
+                _ => None,
+            },
+            Handler::Select(f) => match payload {
+                EventPayload::Select(i) => Some(f(i)),
+                _ => None,
+            },
+        }
+    }
+}
+
+/// Contrato de una app WASM Tier 3. El runtime lo maneja vía
+/// [`export_wasm_app!`].
+pub trait WasmApp {
+    /// Mensajes de la app. Sólo `Clone` — no cruzan la frontera (lo hace el
+    /// `EventPayload`), así que no necesitan (de)serializar.
+    type Msg: Clone;
+
+    /// Estado inicial.
+    fn init() -> Self;
+
+    /// Transición. Muta el `Model` en sitio.
+    fn update(&mut self, msg: Self::Msg);
+
+    /// Vista. Construí lo interactivo con `ui` (asigna los EventIds).
+    fn view(&self, ui: &mut Ui<Self::Msg>) -> WireNode;
+}
+
+/// Genera el ABI del guest a partir de un tipo que implementa [`WasmApp`].
+#[macro_export]
+macro_rules! export_wasm_app {
+    ($app:ty) => {
+        // Model + la tabla de handlers del último `view`. Persisten entre frames.
+        static mut __WASM_RT: ::core::option::Option<(
+            $app,
+            $crate::Ui<<$app as $crate::WasmApp>::Msg>,
+        )> = ::core::option::Option::None;
+        static mut __WASM_OUT: ::std::vec::Vec<u8> = ::std::vec::Vec::new();
+
+        #[no_mangle]
+        pub extern "C" fn wasm_init() {
+            let app = <$app as $crate::WasmApp>::init();
+            unsafe {
+                __WASM_RT = ::core::option::Option::Some((app, $crate::Ui::new()));
+            }
+        }
+
+        #[no_mangle]
+        pub extern "C" fn wasm_view() -> u64 {
+            let rt = unsafe { __WASM_RT.as_mut().expect("wasm_view antes de wasm_init") };
+            let mut ui = $crate::Ui::new();
+            let node = $crate::WasmApp::view(&rt.0, &mut ui);
+            rt.1 = ui; // la tabla de este frame, para el próximo dispatch
+            let bytes = $crate::postcard_to_vec(&node);
+            let ptr = bytes.as_ptr() as u64;
+            let len = bytes.len() as u64;
+            unsafe {
+                __WASM_OUT = bytes;
+            }
+            (ptr << 32) | len
+        }
+
+        #[no_mangle]
+        pub extern "C" fn wasm_free(_ptr: u32, _len: u32) {
+            unsafe {
+                __WASM_OUT = ::std::vec::Vec::new();
+            }
+        }
+
+        #[no_mangle]
+        pub extern "C" fn wasm_alloc(len: u32) -> u32 {
+            let mut buf = ::std::vec![0u8; len as usize];
+            let ptr = buf.as_mut_ptr() as u32;
+            ::std::mem::forget(buf);
+            ptr
+        }
+
+        #[no_mangle]
+        pub extern "C" fn wasm_dispatch(event_id: u32, ptr: u32, len: u32) {
+            let bytes = unsafe {
+                ::std::vec::Vec::from_raw_parts(ptr as *mut u8, len as usize, len as usize)
+            };
+            let payload = match $crate::postcard_from_slice::<$crate::EventPayload>(&bytes) {
+                ::core::result::Result::Ok(p) => p,
+                ::core::result::Result::Err(_) => return,
+            };
+            unsafe {
+                if let ::core::option::Option::Some((app, ui)) = __WASM_RT.as_mut() {
+                    if let ::core::option::Option::Some(msg) = ui.resolve(event_id, payload) {
+                        $crate::WasmApp::update(app, msg);
+                    }
+                }
+            }
+        }
+    };
+}
+
+/// Helper para que la macro no exija a cada guest declarar `postcard`.
+#[doc(hidden)]
+pub fn postcard_to_vec<T: serde::Serialize>(value: &T) -> std::vec::Vec<u8> {
+    postcard::to_allocvec(value).expect("postcard encode")
+}
+
+/// Helper de decodificación para la macro.
+#[doc(hidden)]
+pub fn postcard_from_slice<T: serde::de::DeserializeOwned>(
+    bytes: &[u8],
+) -> Result<T, postcard::Error> {
+    postcard::from_bytes(bytes)
+}
diff --git a/llimphi-wasm-core/Cargo.toml b/llimphi-wasm-core/Cargo.toml
new file mode 100644
index 0000000..2aaa092
--- /dev/null
+++ b/llimphi-wasm-core/Cargo.toml
@@ -0,0 +1,16 @@
+[package]
+name = "llimphi-wasm-core"
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+authors.workspace = true
+publish.workspace = true
+description = "llimphi-wasm-core — núcleo puro de la distribución por hash de apps WASM Tier 3: CAS (DiskStore/MapSource/LayeredSource sobre el trait BlobSource), hash canónico de objeto (bytecode/concesión), verificación de integridad y de concesión Ed25519 contra un anillo de confianza cargable, AppRef/AppManifest y resolve/resolve_manifest con permisos efectivos. NO depende del runner ni de Llimphi (sin GPU): un servidor de blobs o relay headless lo usa sin arrastrar wgpu/vello/winit. El puente para correr la VerifiedApp vive en llimphi-wasm-dist."
+
+[dependencies]
+format = { path = "../../../shared/format" }
+agora-core = { path = "../../../03_ukupacha/agora/agora-core" }
+app-bus = { workspace = true }
+hex = { workspace = true }
+serde = { workspace = true }
+postcard = { workspace = true }
diff --git a/llimphi-wasm-core/LEEME.md b/llimphi-wasm-core/LEEME.md
new file mode 100644
index 0000000..c4df11e
--- /dev/null
+++ b/llimphi-wasm-core/LEEME.md
@@ -0,0 +1,32 @@
+# llimphi-wasm-core
+
+*Read this in English: [README.md](README.md).*
+
+Distribución por hash de apps WASM Tier 3 (sin GPU).
+
+El núcleo puro de la distribución: resolución por hash, verificación de
+integridad y de concesión Ed25519, permisos efectivos. **No depende del
+runner ni de Llimphi** — así un servicio headless (relay/servidor de blobs)
+lo usa sin arrastrar el stack gráfico. El puente para *correr* la
+`VerifiedApp` vive en `llimphi-wasm-dist` (que suma el runner).
+
+La cadena, espejo host de lo que el kernel de wawa hace con sus apps:
+
+1. **Resolver** el bytecode por su hash BLAKE3 desde un `BlobSource`
+   (hoy `DiskStore`, un CAS local; o un backend P2P como `llimphi-wasm-net`).
+2. **Verificar integridad**: el wasm recuperado debe rehashear al hash
+   pedido — content-addressing, detección de tampering.
+3. **Verificar la concesión** Ed25519 (`format::ConcesionCapacidad`):
+   el autor debe habitar un `TrustRing` cargable y la firma cubrir
+   `mensaje_capacidad(bytecode, permisos)`. Una concesión para el bytecode
+   X jamás vale para Y.
+4. **Permisos efectivos** = `declarados & concedidos` — un manifiesto no
+   puede escalar un binario más allá de su concesión.
+
+El hash del bytecode es el del **objeto que lo envuelve**
+(`Objeto{datos:wasm,hijos:[]}`), idéntico a la ceremonia `agora-cli wawa
+concesion` y al kernel: una concesión firmada allá vale aquí sin cambios.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../LEEME.md).
diff --git a/llimphi-wasm-core/README.md b/llimphi-wasm-core/README.md
new file mode 100644
index 0000000..dce20e9
--- /dev/null
+++ b/llimphi-wasm-core/README.md
@@ -0,0 +1,24 @@
+# llimphi-wasm-core
+
+Distribution by hash of Tier 3 WASM apps (no GPU).
+
+The pure core of distribution: hash resolution, integrity and Ed25519 grant
+verification, effective permissions. It **does not depend on the runner or on
+Llimphi** — so a headless service (a relay, a blob server) can use it without
+dragging in the graphics stack. The bridge to actually *run* a `VerifiedApp`
+lives in `llimphi-wasm-dist` (which adds the runner).
+
+The chain, a host-side mirror of what wawa's kernel does with its apps:
+
+1. **Resolve** the bytecode by its BLAKE3 hash from a `BlobSource` (today
+   `DiskStore`, a local CAS; or a P2P backend such as `llimphi-wasm-net`).
+2. **Verify integrity**: the retrieved wasm must rehash to the requested hash —
+   content addressing, tamper detection.
+3. **Verify the Ed25519 grant** (`format::ConcesionCapacidad`): the author must
+   live in a loadable `TrustRing` and the signature must cover
+   `mensaje_capacidad(bytecode, permissions)`. A grant for bytecode X is never
+   valid for Y.
+
+---
+
+Part of **llimphi** — see [llimphi](../README.md).
diff --git a/llimphi-wasm-core/src/lib.rs b/llimphi-wasm-core/src/lib.rs
new file mode 100644
index 0000000..0e84e67
--- /dev/null
+++ b/llimphi-wasm-core/src/lib.rs
@@ -0,0 +1,769 @@
+//! llimphi-wasm-core — distribución por hash de apps WASM Tier 3 (sin GPU).
+//!
+//! El núcleo puro de la distribución: resolución por hash, verificación de
+//! integridad y de concesión Ed25519, permisos efectivos. **No depende del
+//! runner ni de Llimphi** — así un servicio headless (relay/servidor de blobs)
+//! lo usa sin arrastrar el stack gráfico. El puente para *correr* la
+//! [`VerifiedApp`] vive en `llimphi-wasm-dist` (que suma el runner).
+//!
+//! La cadena, espejo host de lo que el kernel de wawa hace con sus apps:
+//!
+//! 1. **Resolver** el bytecode por su hash BLAKE3 desde un [`BlobSource`]
+//!    (hoy [`DiskStore`], un CAS local; o un backend P2P como `llimphi-wasm-net`).
+//! 2. **Verificar integridad**: el wasm recuperado debe rehashear al hash
+//!    pedido — content-addressing, detección de tampering.
+//! 3. **Verificar la concesión** Ed25519 ([`format::ConcesionCapacidad`]):
+//!    el autor debe habitar un [`TrustRing`] cargable y la firma cubrir
+//!    `mensaje_capacidad(bytecode, permisos)`. Una concesión para el bytecode
+//!    X jamás vale para Y.
+//! 4. **Permisos efectivos** = `declarados & concedidos` — un manifiesto no
+//!    puede escalar un binario más allá de su concesión.
+//!
+//! El hash del bytecode es el del **objeto que lo envuelve**
+//! (`Objeto{datos:wasm,hijos:[]}`), idéntico a la ceremonia `agora-cli wawa
+//! concesion` y al kernel: una concesión firmada allá vale aquí sin cambios.
+
+use std::fs;
+use std::path::{Path, PathBuf};
+
+use std::collections::HashMap;
+
+use agora_core::verify_signature;
+use format::{ConcesionCapacidad, Objeto, Permisos};
+use serde::{Deserialize, Serialize};
+
+pub use format::{Hash, Permisos as PermisosBitfield};
+
+/// Errores de la cadena resolver→verificar.
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub enum DistError {
+    /// El `BlobSource` no tiene bytes para ese hash.
+    NoEncontrado,
+    /// El wasm recuperado no rehashea al hash pedido.
+    IntegridadFallo,
+    /// El autor de la concesión no está en el anillo de confianza.
+    AutorNoConfiable,
+    /// La firma Ed25519 de la concesión no valida.
+    FirmaInvalida,
+    /// La concesión es para otro bytecode (su `bytecode` no coincide).
+    ConcesionParaOtroBytecode,
+    /// El hex del hash es inválido.
+    HexInvalido,
+    /// El hash no mide 32 bytes.
+    HashLongitud,
+    /// El `Launch` no es una variante `Wasm`.
+    LaunchNoWasm,
+    /// El manifiesto referencia una concesión que el source no tiene.
+    ConcesionNoEncontrada,
+    /// El blob de la concesión no deserializa a una ConcesionCapacidad.
+    ConcesionCorrupta,
+    /// No se pudo cargar el guest en el runner.
+    Carga(String),
+}
+
+impl std::fmt::Display for DistError {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            DistError::NoEncontrado => write!(f, "bytecode no encontrado en el source"),
+            DistError::IntegridadFallo => write!(f, "el wasm no coincide con su hash (tampering)"),
+            DistError::AutorNoConfiable => write!(f, "autor de la concesión fuera del anillo"),
+            DistError::FirmaInvalida => write!(f, "firma Ed25519 de la concesión inválida"),
+            DistError::ConcesionParaOtroBytecode => write!(f, "la concesión es para otro bytecode"),
+            DistError::HexInvalido => write!(f, "hash hex inválido"),
+            DistError::HashLongitud => write!(f, "el hash no mide 32 bytes"),
+            DistError::LaunchNoWasm => write!(f, "el Launch no es Wasm"),
+            DistError::ConcesionNoEncontrada => write!(f, "concesión no encontrada en el source"),
+            DistError::ConcesionCorrupta => write!(f, "el blob de la concesión es inválido"),
+            DistError::Carga(e) => write!(f, "cargar guest: {e}"),
+        }
+    }
+}
+
+impl std::error::Error for DistError {}
+
+// =====================================================================
+// Hash canónico del bytecode
+// =====================================================================
+
+/// Hash BLAKE3 del **objeto** que envuelve `inner` (`Objeto{datos:inner,hijos:[]}`)
+/// — la identidad direccionada por contenido que usan el kernel y agora-cli. NO
+/// es `blake3(inner)` crudo. El bytecode y la concesión se direccionan así.
+pub fn object_hash(inner: &[u8]) -> Hash {
+    let obj = Objeto {
+        datos: inner.to_vec(),
+        hijos: Vec::new(),
+    };
+    let payload = obj.serializar().expect("serializar objeto");
+    format::hash(&payload)
+}
+
+/// Hash canónico de un bytecode wasm (= [`object_hash`] del wasm).
+pub fn bytecode_hash(wasm: &[u8]) -> Hash {
+    object_hash(wasm)
+}
+
+/// Hash del objeto-concesión: su dirección en el CAS, idéntica a la que emite
+/// `agora-cli wawa concesion` y a la que `EntradaApp.concesion` referencia.
+pub fn grant_hash(grant: &ConcesionCapacidad) -> Hash {
+    object_hash(&grant.serializar().expect("serializar concesión"))
+}
+
+/// Hash → hex de 64 caracteres.
+pub fn hash_to_hex(h: &Hash) -> String {
+    hex::encode(h)
+}
+
+/// hex → Hash (32 bytes). Tolera espacios alrededor.
+pub fn hash_from_hex(s: &str) -> Result<Hash, DistError> {
+    let v = hex::decode(s.trim()).map_err(|_| DistError::HexInvalido)?;
+    v.try_into().map_err(|_| DistError::HashLongitud)
+}
+
+// =====================================================================
+// Fuente de bytecode — la costura de transporte
+// =====================================================================
+
+/// De dónde salen los bytes de un bytecode dado su hash. `DiskStore` es la
+/// impl local; un backend P2P (BrahmanNet: DHT find_providers + stream del
+/// blob) sería otra impl, y `LayeredSource` los compone (caché local → red).
+pub trait BlobSource {
+    /// Recupera el wasm cuyo objeto-bytecode hashea a `hash`, si lo tiene.
+    fn fetch(&self, hash: &Hash) -> Option<Vec<u8>>;
+}
+
+/// CAS local en disco: un archivo por bytecode, nombrado por el hex de su hash.
+pub struct DiskStore {
+    dir: PathBuf,
+}
+
+impl DiskStore {
+    /// Abre (creando si hace falta) el directorio del store.
+    pub fn open(dir: impl Into<PathBuf>) -> std::io::Result<Self> {
+        let dir = dir.into();
+        fs::create_dir_all(&dir)?;
+        Ok(Self { dir })
+    }
+
+    /// Inscribe un wasm y devuelve su hash canónico (la "dirección").
+    pub fn put(&self, wasm: &[u8]) -> std::io::Result<Hash> {
+        let h = bytecode_hash(wasm);
+        fs::write(self.path(&h), wasm)?;
+        Ok(h)
+    }
+
+    /// Inscribe una concesión como blob y devuelve su [`grant_hash`]. Así el
+    /// grant viaja por el mismo CAS/P2P que el bytecode — un blob más.
+    pub fn put_grant(&self, grant: &ConcesionCapacidad) -> std::io::Result<Hash> {
+        let bytes = grant
+            .serializar()
+            .map_err(|e| std::io::Error::new(std::io::ErrorKind::InvalidData, e))?;
+        let h = object_hash(&bytes);
+        fs::write(self.path(&h), &bytes)?;
+        Ok(h)
+    }
+
+    /// Recupera los bytes crudos por hash (sin verificar — eso lo hace `resolve`).
+    pub fn get(&self, hash: &Hash) -> Option<Vec<u8>> {
+        fs::read(self.path(hash)).ok()
+    }
+
+    fn path(&self, h: &Hash) -> PathBuf {
+        self.dir.join(hash_to_hex(h))
+    }
+}
+
+impl BlobSource for DiskStore {
+    fn fetch(&self, hash: &Hash) -> Option<Vec<u8>> {
+        self.get(hash)
+    }
+}
+
+/// Compone fuentes en orden: la primera que tenga el blob gana. Patrón
+/// caché-local → red: `LayeredSource::new(vec![Box::new(disk), Box::new(p2p)])`.
+pub struct LayeredSource {
+    layers: Vec<Box<dyn BlobSource>>,
+}
+
+impl LayeredSource {
+    pub fn new(layers: Vec<Box<dyn BlobSource>>) -> Self {
+        Self { layers }
+    }
+}
+
+impl BlobSource for LayeredSource {
+    fn fetch(&self, hash: &Hash) -> Option<Vec<u8>> {
+        self.layers.iter().find_map(|l| l.fetch(hash))
+    }
+}
+
+/// CAS en memoria — útil para tests y para juntar blobs ya traídos de la red
+/// (bytecode + concesión) antes de pasarlos por [`resolve_manifest`].
+#[derive(Debug, Default, Clone)]
+pub struct MapSource {
+    blobs: HashMap<Hash, Vec<u8>>,
+}
+
+impl MapSource {
+    pub fn new() -> Self {
+        Self::default()
+    }
+
+    /// Inserta un blob bajo un hash arbitrario (p.ej. bytes ya traídos por P2P).
+    pub fn insert(&mut self, hash: Hash, bytes: Vec<u8>) {
+        self.blobs.insert(hash, bytes);
+    }
+
+    /// Inserta un wasm bajo su [`bytecode_hash`] y lo devuelve.
+    pub fn put(&mut self, wasm: &[u8]) -> Hash {
+        let h = bytecode_hash(wasm);
+        self.blobs.insert(h, wasm.to_vec());
+        h
+    }
+
+    /// Inserta una concesión bajo su [`grant_hash`] y lo devuelve.
+    pub fn put_grant(&mut self, grant: &ConcesionCapacidad) -> Hash {
+        let bytes = grant.serializar().expect("serializar concesión");
+        let h = object_hash(&bytes);
+        self.blobs.insert(h, bytes);
+        h
+    }
+}
+
+impl BlobSource for MapSource {
+    fn fetch(&self, hash: &Hash) -> Option<Vec<u8>> {
+        self.blobs.get(hash).cloned()
+    }
+}
+
+// =====================================================================
+// Anillo de confianza host-side
+// =====================================================================
+
+/// Conjunto de claves públicas Ed25519 que pueden conceder capacidades. Es el
+/// equivalente cargable del `AGORA_AUTH_RING` del kernel (que vive en `.rodata`
+/// y sólo cambia con reflash); aquí se carga de archivo.
+#[derive(Debug, Clone, Default)]
+pub struct TrustRing {
+    keys: Vec<[u8; 32]>,
+}
+
+impl TrustRing {
+    pub fn new(keys: Vec<[u8; 32]>) -> Self {
+        Self { keys }
+    }
+
+    pub fn empty() -> Self {
+        Self { keys: Vec::new() }
+    }
+
+    pub fn contains(&self, k: &[u8; 32]) -> bool {
+        self.keys.iter().any(|x| x == k)
+    }
+
+    pub fn len(&self) -> usize {
+        self.keys.len()
+    }
+
+    pub fn is_empty(&self) -> bool {
+        self.keys.is_empty()
+    }
+
+    /// Parsea un anillo: una pubkey en hex (64 chars) por línea; `#` comenta;
+    /// líneas en blanco se ignoran. Las entradas mal formadas se descartan.
+    pub fn from_hex_lines(s: &str) -> Self {
+        let keys = s
+            .lines()
+            .map(|l| l.split('#').next().unwrap_or("").trim())
+            .filter(|l| !l.is_empty())
+            .filter_map(|l| hash_from_hex(l).ok())
+            .collect();
+        Self { keys }
+    }
+
+    /// Carga el anillo desde un archivo (formato de [`Self::from_hex_lines`]).
+    pub fn load(path: impl AsRef<Path>) -> std::io::Result<Self> {
+        Ok(Self::from_hex_lines(&fs::read_to_string(path)?))
+    }
+}
+
+// =====================================================================
+// Verificación
+// =====================================================================
+
+/// `true` si `wasm` rehashea exactamente a `expected`.
+pub fn verify_integrity(wasm: &[u8], expected: &Hash) -> bool {
+    &bytecode_hash(wasm) == expected
+}
+
+/// Verifica una concesión: autor en el anillo + firma Ed25519 válida sobre
+/// `mensaje_capacidad(bytecode, permisos)`. Devuelve los permisos concedidos.
+///
+/// Inlinea el equivalente host de `claves::verificar_concesion_capacidad` del
+/// kernel (allá usa `ed25519-compact` zero-alloc; aquí `ed25519-dalek` vía
+/// `agora_core::verify_signature`).
+pub fn verify_grant(grant: &ConcesionCapacidad, trust: &TrustRing) -> Result<Permisos, DistError> {
+    if !trust.contains(&grant.autor) {
+        return Err(DistError::AutorNoConfiable);
+    }
+    let mensaje = format::mensaje_capacidad(&grant.bytecode, grant.permisos);
+    verify_signature(&grant.autor, &mensaje, &grant.firma).map_err(|_| DistError::FirmaInvalida)?;
+    Ok(grant.permisos)
+}
+
+// =====================================================================
+// Referencia, resolución y carga
+// =====================================================================
+
+/// Referencia a una app distribuida: qué bytecode, qué permisos declara su
+/// manifiesto, y (opcional) la concesión que los respalda.
+#[derive(Debug, Clone)]
+pub struct AppRef {
+    pub bytecode: Hash,
+    /// Permisos que el manifiesto declara querer. Sin concesión, no valen nada.
+    pub declarados: Permisos,
+    /// Concesión firmada que autoriza permisos para `bytecode`. `None` ⇒ app
+    /// sin capacidades (fail-closed): permisos efectivos = 0.
+    pub concesion: Option<ConcesionCapacidad>,
+}
+
+impl AppRef {
+    /// App de sólo-UI, sin permisos ni concesión.
+    pub fn pure(bytecode: Hash) -> Self {
+        Self {
+            bytecode,
+            declarados: 0,
+            concesion: None,
+        }
+    }
+}
+
+/// App resuelta y verificada, lista para correr. Datos puros: el puente para
+/// cargarla en el runner Tier 3 (`VerifiedApp::load`) lo agrega
+/// `llimphi-wasm-dist`, que es quien depende del runner/GPU.
+#[derive(Debug, Clone)]
+pub struct VerifiedApp {
+    pub wasm: Vec<u8>,
+    pub permisos: Permisos,
+    pub bytecode: Hash,
+}
+
+/// Manifiesto distribuible de una app: referencia **por hash** a su bytecode y,
+/// opcional, a la concesión que autoriza sus permisos. Es un objeto
+/// content-addressed más — un peer lo publica, otro lo resuelve trayendo ambos
+/// blobs por la malla. Espejo host de `format::EntradaApp{bytecode, permisos,
+/// concesion}`, sin los campos de runtime del kernel (techo de memoria, fuel).
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+pub struct AppManifest {
+    pub bytecode: Hash,
+    /// Permisos que el manifiesto declara. Sin concesión que los respalde, 0.
+    pub declarados: Permisos,
+    /// Hash del objeto-concesión en el CAS. `None` ⇒ app de sólo-UI.
+    pub concesion: Option<Hash>,
+}
+
+impl AppManifest {
+    /// App de sólo-UI: bytecode, sin permisos ni concesión.
+    pub fn pure(bytecode: Hash) -> Self {
+        Self {
+            bytecode,
+            declarados: 0,
+            concesion: None,
+        }
+    }
+
+    pub fn serializar(&self) -> Vec<u8> {
+        postcard::to_allocvec(self).expect("serializar AppManifest")
+    }
+
+    pub fn deserializar(bytes: &[u8]) -> Result<Self, DistError> {
+        postcard::from_bytes(bytes).map_err(|_| DistError::ConcesionCorrupta)
+    }
+}
+
+// =====================================================================
+// Atajo de DESARROLLO local (mudanza a Linux, 2026-07-17) — FAIL-CLOSED
+// =====================================================================
+
+/// `true` sólo si `LLIMPHI_WASM_DEV_TRUST` está en `1`/`true` en el entorno.
+///
+/// Con el atajo activo, `resolve`/`resolve_manifest` dejan de exigir una
+/// concesión firmada Ed25519 contra el `TrustRing`: la app corre con el techo
+/// que su concesión DECLARA (sin verificar la firma) o, sin concesión, con sus
+/// permisos declarados. Quita la fricción de firmar una concesión nueva en cada
+/// rebuild al desarrollar apps Tier 3 / plugins en Linux.
+///
+/// Fail-closed por diseño:
+///   - apagado salvo env EXPLÍCITA — NO se enciende solo por ser build debug;
+///   - la integridad del bytecode se sigue verificando SIEMPRE (sale del hash,
+///     es gratis); el atajo sólo saltea la firma de la concesión;
+///   - cada concesión sin verificar emite un aviso ruidoso a stderr, para que
+///     jamás pase inadvertido en un despliegue real.
+fn dev_trust_active() -> bool {
+    matches!(
+        std::env::var("LLIMPHI_WASM_DEV_TRUST").ok().as_deref(),
+        Some("1") | Some("true")
+    )
+}
+
+/// Aviso ruidoso: se concedieron permisos SIN verificar la firma de la concesión.
+fn advertir_dev_trust(permisos: Permisos) {
+    eprintln!(
+        "⚠️  LLIMPHI_WASM_DEV_TRUST activo: app WASM corriendo con permisos \
+         {permisos:#010x} SIN verificar concesión firmada. Solo desarrollo \
+         local — NUNCA en producción."
+    );
+}
+
+/// Resuelve un [`AppManifest`] end-to-end: trae el bytecode **y** la concesión
+/// por hash del `source` (CAS local o P2P), verifica integridad de ambos, valida
+/// la concesión contra el anillo y devuelve la app con sus permisos efectivos.
+///
+/// Esto es el "descubrimiento de concesiones": el grant no viaja inline, se
+/// fetchea por su hash igual que el bytecode. Una app con capacidades llega así
+/// por la red y corre con permisos reales.
+pub fn resolve_manifest(
+    source: &impl BlobSource,
+    trust: &TrustRing,
+    manifest: &AppManifest,
+) -> Result<VerifiedApp, DistError> {
+    let wasm = source.fetch(&manifest.bytecode).ok_or(DistError::NoEncontrado)?;
+    if !verify_integrity(&wasm, &manifest.bytecode) {
+        return Err(DistError::IntegridadFallo);
+    }
+    let permisos = if dev_trust_active() {
+        // Atajo dev: honrar el techo de la concesión referenciada (si está y
+        // parsea, sin verificar su firma) o los declarados. No exige que la
+        // concesión sea fetcheable ni válida. Integridad del bytecode ya
+        // verificada arriba.
+        let claim = manifest.concesion.as_ref().and_then(|gh| {
+            let blob = source.fetch(gh)?;
+            ConcesionCapacidad::deserializar(&blob).ok().map(|g| g.permisos)
+        });
+        let p = claim.unwrap_or(manifest.declarados);
+        advertir_dev_trust(p);
+        p
+    } else {
+        match &manifest.concesion {
+            Some(grant_hash) => {
+                let blob = source
+                    .fetch(grant_hash)
+                    .ok_or(DistError::ConcesionNoEncontrada)?;
+                // Integridad del objeto-concesión: su contenido debe direccionarse al
+                // hash pedido (la red no es de fiar).
+                if &object_hash(&blob) != grant_hash {
+                    return Err(DistError::IntegridadFallo);
+                }
+                let grant = ConcesionCapacidad::deserializar(&blob)
+                    .map_err(|_| DistError::ConcesionCorrupta)?;
+                if grant.bytecode != manifest.bytecode {
+                    return Err(DistError::ConcesionParaOtroBytecode);
+                }
+                let concedidos = verify_grant(&grant, trust)?;
+                format::permisos_efectivos(manifest.declarados, concedidos)
+            }
+            None => 0,
+        }
+    };
+    Ok(VerifiedApp {
+        wasm,
+        permisos,
+        bytecode: manifest.bytecode,
+    })
+}
+
+/// Resuelve y verifica una `AppRef` contra un source y un anillo de confianza.
+pub fn resolve(
+    source: &impl BlobSource,
+    trust: &TrustRing,
+    app: &AppRef,
+) -> Result<VerifiedApp, DistError> {
+    let wasm = source.fetch(&app.bytecode).ok_or(DistError::NoEncontrado)?;
+    if !verify_integrity(&wasm, &app.bytecode) {
+        return Err(DistError::IntegridadFallo);
+    }
+    let permisos = if dev_trust_active() {
+        // Atajo dev: techo de la concesión (sin verificar firma) o los declarados.
+        let p = app
+            .concesion
+            .as_ref()
+            .map(|c| c.permisos)
+            .unwrap_or(app.declarados);
+        advertir_dev_trust(p);
+        p
+    } else {
+        match &app.concesion {
+            Some(c) => {
+                if c.bytecode != app.bytecode {
+                    return Err(DistError::ConcesionParaOtroBytecode);
+                }
+                let concedidos = verify_grant(c, trust)?;
+                format::permisos_efectivos(app.declarados, concedidos)
+            }
+            // Sin concesión: cero capacidades. Una app de UI pura corre igual.
+            None => 0,
+        }
+    };
+    Ok(VerifiedApp {
+        wasm,
+        permisos,
+        bytecode: app.bytecode,
+    })
+}
+
+// =====================================================================
+// Cableado de app_bus::Launch::Wasm
+// =====================================================================
+
+/// Extrae el hash del bytecode de un `Launch::Wasm`.
+pub fn hash_from_launch(launch: &app_bus::Launch) -> Result<Hash, DistError> {
+    match launch {
+        app_bus::Launch::Wasm { bytecode_hex, .. } => hash_from_hex(bytecode_hex),
+        _ => Err(DistError::LaunchNoWasm),
+    }
+}
+
+/// Traduce un `Launch::Wasm` a un [`AppManifest`]. Si el launch trae `grant_hex`,
+/// el manifiesto referencia esa concesión y declara `Permisos::MAX` (honrar el
+/// grant completo: efectivos = MAX & concedidos = concedidos). Sin grant, app de
+/// sólo-UI. Es la traducción "UI → distribución": app-bus transporta los hex,
+/// `dist` los vuelve un manifiesto resoluble.
+pub fn manifest_from_launch(launch: &app_bus::Launch) -> Result<AppManifest, DistError> {
+    match launch {
+        app_bus::Launch::Wasm {
+            bytecode_hex,
+            grant_hex,
+        } => {
+            let bytecode = hash_from_hex(bytecode_hex)?;
+            let concesion = match grant_hex {
+                Some(h) => Some(hash_from_hex(h)?),
+                None => None,
+            };
+            // Sin concesión, una app declara 0 (sólo-UI) — salvo en modo
+            // dev-trust, donde declara MAX para que el atajo la corra local con
+            // capacidades plenas sin firmar nada.
+            let declarados = if concesion.is_some() || dev_trust_active() {
+                Permisos::MAX
+            } else {
+                0
+            };
+            Ok(AppManifest {
+                bytecode,
+                declarados,
+                concesion,
+            })
+        }
+        _ => Err(DistError::LaunchNoWasm),
+    }
+}
+
+/// Resuelve un `Launch::Wasm` a una `VerifiedApp`, end-to-end: trae el bytecode
+/// y —si el launch declara `grant_hex`— la concesión por hash del `source`, los
+/// verifica y corre la app con sus permisos efectivos. Cierra el lanzamiento de
+/// apps WASM con capacidades desde la UI.
+pub fn resolve_launch(
+    source: &impl BlobSource,
+    trust: &TrustRing,
+    launch: &app_bus::Launch,
+) -> Result<VerifiedApp, DistError> {
+    let manifest = manifest_from_launch(launch)?;
+    resolve_manifest(source, trust, &manifest)
+}
+
+// =====================================================================
+// Catálogo — el índice buscable de apps ("qué apps existen")
+// =====================================================================
+
+/// Una entrada del catálogo: metadatos buscables + referencias **por hash** al
+/// bytecode y, opcional, a su concesión. Es la unidad que falta sobre el
+/// transporte por hash: el `BlobSource` sabe traer un blob *si conoces su hash*,
+/// pero no *qué apps hay*; esto lo nombra y lo describe.
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+pub struct CatalogEntry {
+    /// Identificador estable (para `get`/lanzar por id).
+    pub id: String,
+    /// Nombre legible.
+    pub name: String,
+    /// Descripción corta (entra en la búsqueda).
+    pub description: String,
+    /// Categoría opcional (para filtrar/agrupar).
+    pub category: Option<String>,
+    /// Hash del bytecode en el CAS.
+    pub bytecode: Hash,
+    /// Permisos que la app declara querer (sin concesión que los respalde, 0).
+    pub declarados: Permisos,
+    /// Hash del objeto-concesión, si la app pide capacidades.
+    pub concesion: Option<Hash>,
+}
+
+impl CatalogEntry {
+    /// El [`AppManifest`] resoluble de esta entrada — el puente catálogo→correr.
+    pub fn manifest(&self) -> AppManifest {
+        AppManifest {
+            bytecode: self.bytecode,
+            declarados: self.declarados,
+            concesion: self.concesion,
+        }
+    }
+
+    /// ¿La consulta (sin distinguir mayúsculas) aparece en id/nombre/
+    /// descripción/categoría? Una consulta vacía siempre coincide.
+    pub fn matches(&self, query: &str) -> bool {
+        if query.is_empty() {
+            return true;
+        }
+        let q = query.to_lowercase();
+        self.id.to_lowercase().contains(&q)
+            || self.name.to_lowercase().contains(&q)
+            || self.description.to_lowercase().contains(&q)
+            || self
+                .category
+                .as_deref()
+                .map(|c| c.to_lowercase().contains(&q))
+                .unwrap_or(false)
+    }
+}
+
+/// Catálogo de apps: el índice buscable. Es **él mismo un objeto
+/// content-addressed** (postcard) — por eso viaja por la misma malla que los
+/// bytecodes (`llimphi-wasm-net::fetch_blob` por su [`Catalog::hash`]) sin
+/// protocolo nuevo: quien lo publica comparte su hash, quien lo recibe lo busca.
+///
+/// **No necesita ser de confianza para ser seguro**: cada app que nombra se
+/// resuelve por su propio hash y se re-verifica de forma independiente
+/// (integridad + concesión Ed25519 contra el [`TrustRing`]). Un catálogo
+/// adversario, a lo sumo, ofrece apps cuyas concesiones igual deben estar
+/// firmadas por una clave de tu anillo — no puede colar código alterado ni
+/// permisos sin respaldo.
+#[derive(Debug, Clone, Default, PartialEq, Eq, Serialize, Deserialize)]
+pub struct Catalog {
+    pub entries: Vec<CatalogEntry>,
+}
+
+impl Catalog {
+    pub fn new(entries: Vec<CatalogEntry>) -> Self {
+        Self { entries }
+    }
+
+    pub fn serializar(&self) -> Vec<u8> {
+        postcard::to_allocvec(self).expect("serializar Catalog")
+    }
+
+    pub fn deserializar(bytes: &[u8]) -> Result<Self, DistError> {
+        postcard::from_bytes(bytes).map_err(|_| DistError::ConcesionCorrupta)
+    }
+
+    /// La dirección de contenido del catálogo (el mismo esquema que bytecode y
+    /// concesión: `hash(Objeto{datos,hijos:[]})`), para publicarlo/traerlo.
+    pub fn hash(&self) -> Hash {
+        object_hash(&self.serializar())
+    }
+
+    /// Entradas que coinciden con `query` (substring en id/nombre/desc/cat).
+    /// Una consulta vacía devuelve todo el catálogo.
+    pub fn search(&self, query: &str) -> Vec<&CatalogEntry> {
+        self.entries.iter().filter(|e| e.matches(query)).collect()
+    }
+
+    /// La entrada de id exacto, si existe.
+    pub fn get(&self, id: &str) -> Option<&CatalogEntry> {
+        self.entries.iter().find(|e| e.id == id)
+    }
+
+    /// Agrega o reemplaza (por id) una entrada. Mantiene el id único, así
+    /// re-publicar una app la actualiza en vez de duplicarla.
+    pub fn upsert(&mut self, entry: CatalogEntry) {
+        match self.entries.iter_mut().find(|e| e.id == entry.id) {
+            Some(slot) => *slot = entry,
+            None => self.entries.push(entry),
+        }
+    }
+}
+
+/// Resuelve y verifica una app del catálogo por su `id`, end-to-end: ubica la
+/// entrada, trae bytecode (+ concesión) por hash del `source`, los verifica y
+/// devuelve la app con sus permisos efectivos. El puente catálogo→correr.
+pub fn resolve_from_catalog(
+    source: &impl BlobSource,
+    trust: &TrustRing,
+    catalog: &Catalog,
+    id: &str,
+) -> Result<VerifiedApp, DistError> {
+    let entry = catalog.get(id).ok_or(DistError::NoEncontrado)?;
+    resolve_manifest(source, trust, &entry.manifest())
+}
+
+#[cfg(test)]
+mod catalog_tests {
+    use super::*;
+
+    fn entry(id: &str, name: &str, desc: &str, cat: Option<&str>) -> CatalogEntry {
+        CatalogEntry {
+            id: id.into(),
+            name: name.into(),
+            description: desc.into(),
+            category: cat.map(Into::into),
+            bytecode: bytecode_hash(id.as_bytes()),
+            declarados: 0,
+            concesion: None,
+        }
+    }
+
+    fn cat() -> Catalog {
+        Catalog::new(vec![
+            entry("counter", "Contador", "suma y resta un número", Some("demo")),
+            entry("form", "Formulario", "campos, slider y radio", Some("demo")),
+            entry("paint", "Pintura", "lienzo de dibujo", Some("arte")),
+        ])
+    }
+
+    #[test]
+    fn search_substring_case_insensitive() {
+        let c = cat();
+        // por nombre/desc, sin distinguir mayúsculas
+        let ids: Vec<&str> = c.search("RADIO").iter().map(|e| e.id.as_str()).collect();
+        assert_eq!(ids, ["form"]);
+        // por categoría: dos demos
+        assert_eq!(c.search("demo").len(), 2);
+        // consulta vacía = todo
+        assert_eq!(c.search("").len(), 3);
+        // sin coincidencias
+        assert!(c.search("zzz").is_empty());
+    }
+
+    #[test]
+    fn get_y_manifest() {
+        let c = cat();
+        let e = c.get("paint").expect("existe");
+        assert_eq!(e.name, "Pintura");
+        let m = e.manifest();
+        assert_eq!(m.bytecode, bytecode_hash(b"paint"));
+        assert!(m.concesion.is_none());
+        assert!(c.get("ausente").is_none());
+    }
+
+    #[test]
+    fn upsert_actualiza_sin_duplicar() {
+        let mut c = cat();
+        assert_eq!(c.entries.len(), 3);
+        c.upsert(entry("form", "Formulario v2", "ahora con multiline", Some("demo")));
+        assert_eq!(c.entries.len(), 3, "mismo id ⇒ reemplaza, no agrega");
+        assert_eq!(c.get("form").unwrap().name, "Formulario v2");
+        c.upsert(entry("nuevo", "Nuevo", "otra app", None));
+        assert_eq!(c.entries.len(), 4);
+    }
+
+    #[test]
+    fn serde_roundtrip_y_hash_estable() {
+        let c = cat();
+        let bytes = c.serializar();
+        let back = Catalog::deserializar(&bytes).expect("re-deserializa");
+        assert_eq!(c, back);
+        // El hash es la dirección de contenido: estable y reproducible.
+        assert_eq!(c.hash(), back.hash());
+        assert_eq!(c.hash(), object_hash(&c.serializar()));
+        // Cambiar una entrada cambia el hash.
+        let mut c2 = c.clone();
+        c2.upsert(entry("counter", "Contador", "cambió la desc", Some("demo")));
+        assert_ne!(c.hash(), c2.hash());
+    }
+}
diff --git a/llimphi-wasm-core/tests/dev_trust.rs b/llimphi-wasm-core/tests/dev_trust.rs
new file mode 100644
index 0000000..71a5505
--- /dev/null
+++ b/llimphi-wasm-core/tests/dev_trust.rs
@@ -0,0 +1,38 @@
+//! Atajo de desarrollo `LLIMPHI_WASM_DEV_TRUST` (mudanza a Linux, 2026-07-17).
+//!
+//! En su PROPIO binario de test (proceso aislado): setea/limpia la variable de
+//! entorno, y así no cruza estado con los tests unitarios de la lib que corren
+//! en paralelo en otro proceso y asumen el modo estricto por default.
+
+use llimphi_wasm_core::{resolve, AppRef, MapSource, TrustRing};
+
+#[test]
+fn dev_trust_corre_sin_concesion_y_es_fail_closed_por_default() {
+    let mut src = MapSource::new();
+    let bytecode = src.put(b"\0asm bytecode de prueba");
+    let trust = TrustRing::empty(); // nadie de confianza
+
+    // Una app que DECLARA PERMISO_RED (1<<0) pero SIN concesión que lo respalde.
+    let app = AppRef {
+        bytecode,
+        declarados: 1,
+        concesion: None,
+    };
+
+    // 1) Fail-closed por default: sin la env, sin concesión ⇒ cero capacidades.
+    std::env::remove_var("LLIMPHI_WASM_DEV_TRUST");
+    let v = resolve(&src, &trust, &app).expect("resuelve estricto");
+    assert_eq!(v.permisos, 0, "sin dev-trust y sin concesión: cero caps");
+
+    // 2) Con el atajo EXPLÍCITO: corre con los permisos DECLARADOS, sin firma.
+    std::env::set_var("LLIMPHI_WASM_DEV_TRUST", "1");
+    let v = resolve(&src, &trust, &app).expect("resuelve dev-trust");
+    assert_eq!(v.permisos, 1, "dev-trust: honra los permisos declarados");
+
+    // 3) Un valor no reconocido NO activa el atajo (fail-closed).
+    std::env::set_var("LLIMPHI_WASM_DEV_TRUST", "0");
+    let v = resolve(&src, &trust, &app).expect("resuelve");
+    assert_eq!(v.permisos, 0, "valor != 1/true no activa el atajo");
+
+    std::env::remove_var("LLIMPHI_WASM_DEV_TRUST");
+}
diff --git a/llimphi-wasm-demo-counter/Cargo.toml b/llimphi-wasm-demo-counter/Cargo.toml
new file mode 100644
index 0000000..c727d56
--- /dev/null
+++ b/llimphi-wasm-demo-counter/Cargo.toml
@@ -0,0 +1,14 @@
+[package]
+name = "llimphi-wasm-demo-counter"
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+authors.workspace = true
+publish.workspace = true
+description = "llimphi-wasm-demo-counter — app WASM Tier 3 de ejemplo: el contador Elm canónico de Llimphi, pero como guest .wasm. Implementa WasmApp y pinta un WireNode (número + botones +1/reset). Se compila a wasm32-unknown-unknown (scripts/build-wasm-demo.sh) y el host (llimphi-wasm-runner) lo corre dentro de una ventana Llimphi. `rlib` además de `cdylib` para reusar el tipo Msg desde los tests del host."
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[dependencies]
+llimphi-wasm-app-sdk = { workspace = true }
diff --git a/llimphi-wasm-demo-counter/LEEME.md b/llimphi-wasm-demo-counter/LEEME.md
new file mode 100644
index 0000000..7f2c642
--- /dev/null
+++ b/llimphi-wasm-demo-counter/LEEME.md
@@ -0,0 +1,13 @@
+# llimphi-wasm-demo-counter
+
+*Read this in English: [README.md](README.md).*
+
+Contador Elm canónico de Llimphi, como app WASM Tier 3.
+
+Gemelo de `llimphi-ui/examples/counter.rs`, pero `Model`/`update`/`view`
+corren del lado guest; el host materializa el `WireNode` y rebota los clicks.
+Compilar con `scripts/build-wasm-demo.sh`.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../LEEME.md).
diff --git a/llimphi-wasm-demo-counter/README.md b/llimphi-wasm-demo-counter/README.md
new file mode 100644
index 0000000..718cdda
--- /dev/null
+++ b/llimphi-wasm-demo-counter/README.md
@@ -0,0 +1,11 @@
+# llimphi-wasm-demo-counter
+
+Llimphi's canonical Elm counter, as a Tier 3 WASM app.
+
+The twin of `llimphi-ui/examples/counter.rs`, but `Model`/`update`/`view` run on
+the guest side; the host materializes the `WireNode` and bounces the clicks back.
+Build it with `scripts/build-wasm-demo.sh`.
+
+---
+
+Part of **llimphi** — see [llimphi](../README.md).
diff --git a/llimphi-wasm-demo-counter/src/lib.rs b/llimphi-wasm-demo-counter/src/lib.rs
new file mode 100644
index 0000000..0395ff0
--- /dev/null
+++ b/llimphi-wasm-demo-counter/src/lib.rs
@@ -0,0 +1,79 @@
+//! Contador Elm canónico de Llimphi, como app WASM Tier 3.
+//!
+//! Gemelo de `llimphi-ui/examples/counter.rs`, pero `Model`/`update`/`view`
+//! corren del lado guest; el host materializa el `WireNode` y rebota los clicks.
+//! Compilar con `scripts/build-wasm-demo.sh`.
+
+use llimphi_wasm_app_sdk::{
+    col, export_wasm_app, row, text, Align, Dim, Justify, TextAlign, Ui, WasmApp, WireNode,
+};
+
+/// Mensajes del contador. Sólo `Clone`: no cruzan la frontera (lo hace el
+/// EventPayload), así que no necesitan (de)serializar.
+#[derive(Clone)]
+pub enum Msg {
+    Increment,
+    Reset,
+}
+
+pub struct Counter {
+    n: u32,
+}
+
+impl WasmApp for Counter {
+    type Msg = Msg;
+
+    fn init() -> Self {
+        Counter { n: 0 }
+    }
+
+    fn update(&mut self, msg: Msg) {
+        match msg {
+            Msg::Increment => self.n = self.n.saturating_add(1),
+            Msg::Reset => self.n = 0,
+        }
+    }
+
+    fn view(&self, ui: &mut Ui<Msg>) -> WireNode {
+        let number = text(self.n.to_string(), 160.0, [230, 240, 250, 255])
+            .text_align(TextAlign::Center)
+            .grow(1.0)
+            .width(Dim::Pct(1.0))
+            .align(Align::Center)
+            .justify(Justify::Center);
+
+        // El +1 es el primer control registrado ⇒ EventId 0; reset ⇒ 1.
+        let inc = ui
+            .button("+1", 28.0, [10, 30, 20, 255], Msg::Increment)
+            .text_align(TextAlign::Center)
+            .fill([60, 200, 130, 255])
+            .radius(12.0)
+            .size(Dim::Px(160.0), Dim::Px(56.0))
+            .align(Align::Center)
+            .justify(Justify::Center);
+
+        let reset = ui
+            .button("reset", 22.0, [30, 10, 10, 255], Msg::Reset)
+            .text_align(TextAlign::Center)
+            .fill([220, 80, 80, 255])
+            .radius(12.0)
+            .size(Dim::Px(120.0), Dim::Px(56.0))
+            .align(Align::Center)
+            .justify(Justify::Center);
+
+        let buttons = row(vec![inc, reset])
+            .gap(16.0)
+            .justify(Justify::Center)
+            .width(Dim::Pct(1.0))
+            .height(Dim::Px(56.0));
+
+        col(vec![number, buttons])
+            .gap(24.0)
+            .pad(32.0)
+            .fill([20, 24, 32, 255])
+            .width(Dim::Pct(1.0))
+            .height(Dim::Pct(1.0))
+    }
+}
+
+export_wasm_app!(Counter);
diff --git a/llimphi-wasm-demo-form/Cargo.toml b/llimphi-wasm-demo-form/Cargo.toml
new file mode 100644
index 0000000..2b45709
--- /dev/null
+++ b/llimphi-wasm-demo-form/Cargo.toml
@@ -0,0 +1,14 @@
+[package]
+name = "llimphi-wasm-demo-form"
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+authors.workspace = true
+publish.workspace = true
+description = "llimphi-wasm-demo-form — app WASM Tier 3 de ejemplo con formulario: un campo de texto (nombre), un checkbox (mayúsculas) y un saludo vivo. Ejercita los eventos con payload (Text/Toggle) además de Click. Se compila a wasm32 (scripts/build-wasm-demo.sh) y corre en el host con llimphi-wasm-runner."
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[dependencies]
+llimphi-wasm-app-sdk = { workspace = true }
diff --git a/llimphi-wasm-demo-form/LEEME.md b/llimphi-wasm-demo-form/LEEME.md
new file mode 100644
index 0000000..980dfa8
--- /dev/null
+++ b/llimphi-wasm-demo-form/LEEME.md
@@ -0,0 +1,15 @@
+# llimphi-wasm-demo-form
+
+*Read this in English: [README.md](README.md).*
+
+Formulario WASM Tier 3: texto + checkbox + slider + dropdown + multiline +
+radio + saludo vivo.
+
+Ejercita todos los eventos con payload: `Text` (nombre y notas multilínea),
+`Toggle` (mayúsculas), `Value` (slider edad), `Select` (dropdown color y
+grupo de radio prioridad) y `Click` (limpiar). El estado vive en el guest;
+el host sólo pinta y notifica.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../LEEME.md).
diff --git a/llimphi-wasm-demo-form/README.md b/llimphi-wasm-demo-form/README.md
new file mode 100644
index 0000000..865a271
--- /dev/null
+++ b/llimphi-wasm-demo-form/README.md
@@ -0,0 +1,13 @@
+# llimphi-wasm-demo-form
+
+A Tier 3 WASM form: text + checkbox + slider + dropdown + multiline + radio +
+a live greeting.
+
+It exercises every event with a payload: `Text` (name and multiline notes),
+`Toggle` (uppercase), `Value` (age slider), `Select` (colour dropdown and a
+priority radio group) and `Click` (clear). The state lives in the guest; the host
+only paints and notifies.
+
+---
+
+Part of **llimphi** — see [llimphi](../README.md).
diff --git a/llimphi-wasm-demo-form/src/lib.rs b/llimphi-wasm-demo-form/src/lib.rs
new file mode 100644
index 0000000..5361ded
--- /dev/null
+++ b/llimphi-wasm-demo-form/src/lib.rs
@@ -0,0 +1,184 @@
+//! Formulario WASM Tier 3: texto + checkbox + slider + dropdown + multiline +
+//! radio + saludo vivo.
+//!
+//! Ejercita todos los eventos con payload: `Text` (nombre y notas multilínea),
+//! `Toggle` (mayúsculas), `Value` (slider edad), `Select` (dropdown color y
+//! grupo de radio prioridad) y `Click` (limpiar). El estado vive en el guest;
+//! el host sólo pinta y notifica.
+
+use llimphi_wasm_app_sdk::{
+    col, export_wasm_app, row, text, Align, Dim, Justify, TextAlign, Ui, WasmApp, WireNode,
+};
+
+const COLORES: [&str; 3] = ["rojo", "verde", "azul"];
+const PRIORIDADES: [&str; 3] = ["baja", "media", "alta"];
+
+#[derive(Clone)]
+pub enum Msg {
+    SetNombre(String),
+    SetMayus(bool),
+    SetEdad(f32),
+    SetColor(u32),
+    SetNotas(String),
+    SetPrioridad(u32),
+    Limpiar,
+}
+
+pub struct Form {
+    nombre: String,
+    mayus: bool,
+    edad: f32,
+    color: u32,
+    notas: String,
+    prioridad: u32,
+}
+
+impl Default for Form {
+    fn default() -> Self {
+        Form {
+            nombre: String::new(),
+            mayus: false,
+            edad: 30.0,
+            color: 1,
+            notas: String::new(),
+            prioridad: 0,
+        }
+    }
+}
+
+impl Form {
+    fn saludo(&self) -> String {
+        if self.nombre.is_empty() {
+            return "Hola, …".into();
+        }
+        let s = format!("Hola, {}!", self.nombre);
+        if self.mayus {
+            s.to_uppercase()
+        } else {
+            s
+        }
+    }
+}
+
+impl WasmApp for Form {
+    type Msg = Msg;
+
+    fn init() -> Self {
+        Form::default()
+    }
+
+    fn update(&mut self, msg: Msg) {
+        match msg {
+            Msg::SetNombre(s) => self.nombre = s,
+            Msg::SetMayus(b) => self.mayus = b,
+            Msg::SetEdad(v) => self.edad = v,
+            Msg::SetColor(i) => self.color = i,
+            Msg::SetNotas(s) => self.notas = s,
+            Msg::SetPrioridad(i) => self.prioridad = i,
+            Msg::Limpiar => {
+                self.nombre.clear();
+                self.mayus = false;
+                self.edad = 30.0;
+                self.color = 1;
+                self.notas.clear();
+                self.prioridad = 0;
+            }
+        }
+    }
+
+    fn view(&self, ui: &mut Ui<Msg>) -> WireNode {
+        let titulo = text("Saludo", 32.0, [230, 240, 250, 255]);
+
+        // EventId 0: campo de nombre.
+        let campo = ui
+            .text_input(self.nombre.clone(), "tu nombre…", Msg::SetNombre)
+            .fill([28, 34, 44, 255])
+            .radius(8.0)
+            .padding(10.0, 12.0, 10.0, 12.0)
+            .width(Dim::Pct(1.0))
+            .height(Dim::Px(44.0));
+
+        // EventId 1: checkbox.
+        let check = row(vec![
+            ui.checkbox(self.mayus, Msg::SetMayus),
+            text("MAYÚSCULAS", 20.0, [200, 210, 225, 255]).align(Align::Center),
+        ])
+        .gap(10.0)
+        .align(Align::Center);
+
+        // EventId 2: slider de edad (0..100).
+        let edad_row = row(vec![
+            text(format!("Edad {}", self.edad as i32), 20.0, [200, 210, 225, 255])
+                .width(Dim::Px(90.0)),
+            ui.slider(self.edad, 0.0, 100.0, Msg::SetEdad)
+                .grow(1.0)
+                .height(Dim::Px(20.0)),
+        ])
+        .gap(12.0)
+        .align(Align::Center);
+
+        // EventId 3: dropdown de color.
+        let color = ui
+            .select(
+                COLORES.iter().map(|s| s.to_string()).collect(),
+                self.color,
+                Msg::SetColor,
+            )
+            .width(Dim::Pct(1.0));
+
+        let saludo = text(self.saludo(), 28.0, [120, 220, 170, 255]);
+        let detalle = text(
+            format!(
+                "Edad: {} · Color: {} · Prioridad: {} · Notas: {} líneas",
+                self.edad as i32,
+                COLORES[self.color as usize % COLORES.len()],
+                PRIORIDADES[self.prioridad as usize % PRIORIDADES.len()],
+                self.notas.lines().count(),
+            ),
+            18.0,
+            [150, 160, 180, 255],
+        )
+        .grow(1.0);
+
+        // EventId 4: notas multilínea (Enter inserta salto de línea).
+        let notas = ui
+            .multiline_input(self.notas.clone(), "notas (Enter = nueva línea)…", Msg::SetNotas)
+            .fill([28, 34, 44, 255])
+            .radius(8.0)
+            .padding(10.0, 12.0, 10.0, 12.0)
+            .width(Dim::Pct(1.0))
+            .height(Dim::Px(72.0));
+
+        // EventId 5: grupo de radio de prioridad (el nodo es el contenedor; el
+        // host pinta una fila por opción).
+        let prioridad = ui
+            .radio(
+                PRIORIDADES.iter().map(|s| s.to_string()).collect(),
+                self.prioridad,
+                Msg::SetPrioridad,
+            )
+            .width(Dim::Pct(1.0))
+            .gap(2.0);
+
+        // EventId 6: botón limpiar.
+        let limpiar = ui
+            .button("limpiar", 20.0, [30, 10, 10, 255], Msg::Limpiar)
+            .text_align(TextAlign::Center)
+            .fill([200, 120, 90, 255])
+            .radius(8.0)
+            .size(Dim::Px(120.0), Dim::Px(40.0))
+            .align(Align::Center)
+            .justify(Justify::Center);
+
+        col(vec![
+            titulo, campo, check, edad_row, color, saludo, detalle, notas, prioridad, limpiar,
+        ])
+        .gap(16.0)
+            .pad(28.0)
+            .fill([18, 22, 30, 255])
+            .width(Dim::Pct(1.0))
+            .height(Dim::Pct(1.0))
+    }
+}
+
+export_wasm_app!(Form);
diff --git a/llimphi-wasm-dist/Cargo.toml b/llimphi-wasm-dist/Cargo.toml
new file mode 100644
index 0000000..ac7ffb8
--- /dev/null
+++ b/llimphi-wasm-dist/Cargo.toml
@@ -0,0 +1,18 @@
+[package]
+name = "llimphi-wasm-dist"
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+authors.workspace = true
+publish.workspace = true
+description = "llimphi-wasm-dist — cara con baterías de la distribución Tier 3: re-exporta llimphi-wasm-core (CAS, verificación de integridad y concesión Ed25519, resolve/resolve_manifest, cableado de app_bus::Launch::Wasm) y le suma el runner para correr la VerifiedApp (VerifiedAppExt::load). Quien sólo distribuye/verifica usa llimphi-wasm-core y se ahorra el stack GPU."
+
+[dependencies]
+llimphi-wasm-core = { workspace = true }
+llimphi-wasm-runner = { workspace = true }
+
+[dev-dependencies]
+# Para los tests end-to-end (firmar concesiones, armar Launch).
+agora-core = { path = "../../../03_ukupacha/agora/agora-core" }
+format = { path = "../../../shared/format" }
+app-bus = { workspace = true }
diff --git a/llimphi-wasm-dist/LEEME.md b/llimphi-wasm-dist/LEEME.md
new file mode 100644
index 0000000..46104da
--- /dev/null
+++ b/llimphi-wasm-dist/LEEME.md
@@ -0,0 +1,15 @@
+# llimphi-wasm-dist
+
+*Read this in English: [README.md](README.md).*
+
+Distribución por hash + puente al runner Tier 3.
+
+Es la cara "con baterías" de `llimphi_wasm_core`: re-exporta toda la cadena
+resolver→verificar y le suma el runner, de modo que una `VerifiedApp` se
+pueda **correr** con `verified.load()` (extensión `VerifiedAppExt`). Lo
+pesado (wgpu/vello/winit) entra por aquí; quien sólo distribuye/verifica
+depende de `llimphi-wasm-core` y se ahorra el stack gráfico.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../LEEME.md).
diff --git a/llimphi-wasm-dist/README.md b/llimphi-wasm-dist/README.md
new file mode 100644
index 0000000..d00d13c
--- /dev/null
+++ b/llimphi-wasm-dist/README.md
@@ -0,0 +1,13 @@
+# llimphi-wasm-dist
+
+Distribution by hash + the bridge to the Tier 3 runner.
+
+It is the "batteries included" face of `llimphi_wasm_core`: it re-exports the
+whole resolve→verify chain and adds the runner, so a `VerifiedApp` can actually
+be **run** with `verified.load()` (the `VerifiedAppExt` extension). The heavy
+stuff (wgpu/vello/winit) enters here; whoever only distributes or verifies
+depends on `llimphi-wasm-core` and spares themselves the graphics stack.
+
+---
+
+Part of **llimphi** — see [llimphi](../README.md).
diff --git a/llimphi-wasm-dist/src/lib.rs b/llimphi-wasm-dist/src/lib.rs
new file mode 100644
index 0000000..afec203
--- /dev/null
+++ b/llimphi-wasm-dist/src/lib.rs
@@ -0,0 +1,23 @@
+//! llimphi-wasm-dist — distribución por hash + puente al runner Tier 3.
+//!
+//! Es la cara "con baterías" de [`llimphi_wasm_core`]: re-exporta toda la cadena
+//! resolver→verificar y le suma el runner, de modo que una [`VerifiedApp`] se
+//! pueda **correr** con `verified.load()` (extensión [`VerifiedAppExt`]). Lo
+//! pesado (wgpu/vello/winit) entra por aquí; quien sólo distribuye/verifica
+//! depende de `llimphi-wasm-core` y se ahorra el stack gráfico.
+
+pub use llimphi_wasm_core::*;
+pub use llimphi_wasm_runner::{EventId, EventPayload, RunnerMsg, WasmGuest};
+
+/// Carga una [`VerifiedApp`] en el runner Tier 3 con sus permisos efectivos
+/// (que gatean qué host imports se enlazan). El método vive aquí —y no en
+/// `llimphi-wasm-core`— porque es lo único de la cadena que toca el runner.
+pub trait VerifiedAppExt {
+    fn load(&self) -> Result<WasmGuest, DistError>;
+}
+
+impl VerifiedAppExt for VerifiedApp {
+    fn load(&self) -> Result<WasmGuest, DistError> {
+        WasmGuest::load(&self.wasm, self.permisos).map_err(DistError::Carga)
+    }
+}
diff --git a/llimphi-wasm-dist/tests/dist.rs b/llimphi-wasm-dist/tests/dist.rs
new file mode 100644
index 0000000..b533366
--- /dev/null
+++ b/llimphi-wasm-dist/tests/dist.rs
@@ -0,0 +1,338 @@
+//! Certificación headless de la distribución por hash: CAS, integridad,
+//! concesión Ed25519 contra anillo, permisos efectivos, y correr la app
+//! resuelta de punta a punta. Sin red ni GPU.
+
+use agora_core::Keypair;
+use app_bus::Launch;
+use format::{ConcesionCapacidad, Hash, Permisos, PERMISO_GRAFO_ESCRITURA, PERMISO_RED};
+use llimphi_wasm_dist::{
+    bytecode_hash, grant_hash, hash_to_hex, resolve, resolve_from_catalog, resolve_launch,
+    resolve_manifest, verify_grant, verify_integrity, AppManifest, AppRef, BlobSource, Catalog,
+    CatalogEntry, DiskStore, DistError, EventPayload, MapSource, TrustRing, VerifiedAppExt,
+};
+
+/// El mismo wasm que corre el runner Tier 3 — lo distribuimos por hash.
+const COUNTER_WASM: &[u8] = include_bytes!("../../llimphi-wasm-runner/assets/counter.wasm");
+
+const SEED: [u8; 32] = [7; 32];
+
+fn tmpdir(nombre: &str) -> std::path::PathBuf {
+    let dir = std::env::temp_dir().join(format!("llimphi-wasm-dist-{nombre}"));
+    let _ = std::fs::remove_dir_all(&dir);
+    dir
+}
+
+/// Firma una concesión como lo haría `agora-cli wawa concesion` (offline).
+fn firmar(kp: &Keypair, bytecode: Hash, permisos: Permisos) -> ConcesionCapacidad {
+    let mensaje = format::mensaje_capacidad(&bytecode, permisos);
+    ConcesionCapacidad {
+        bytecode,
+        permisos,
+        autor: kp.public_key(),
+        firma: kp.sign(&mensaje),
+    }
+}
+
+/// Source en memoria que devuelve bytes arbitrarios — para forzar tampering.
+struct FixedSource(Vec<u8>);
+impl BlobSource for FixedSource {
+    fn fetch(&self, _hash: &Hash) -> Option<Vec<u8>> {
+        Some(self.0.clone())
+    }
+}
+
+#[test]
+fn disk_store_round_trip() {
+    let store = DiskStore::open(tmpdir("rt")).unwrap();
+    let h = store.put(COUNTER_WASM).unwrap();
+    assert_eq!(h, bytecode_hash(COUNTER_WASM), "put devuelve el hash canónico");
+    assert_eq!(store.get(&h).as_deref(), Some(COUNTER_WASM), "get recupera los bytes");
+    assert_eq!(store.fetch(&[0u8; 32]), None, "hash desconocido ⇒ None");
+}
+
+#[test]
+fn integridad_detecta_tampering() {
+    let h = bytecode_hash(COUNTER_WASM);
+    assert!(verify_integrity(COUNTER_WASM, &h));
+
+    let mut roto = COUNTER_WASM.to_vec();
+    roto[100] ^= 0xff;
+    assert!(!verify_integrity(&roto, &h), "un byte cambiado ⇒ falla");
+
+    // Un source que entrega bytes corruptos bajo el hash legítimo es rechazado.
+    let source = FixedSource(roto);
+    let err = resolve(&source, &TrustRing::empty(), &AppRef::pure(h)).unwrap_err();
+    assert_eq!(err, DistError::IntegridadFallo);
+}
+
+#[test]
+fn concesion_valida_da_permisos() {
+    let store = DiskStore::open(tmpdir("grant-ok")).unwrap();
+    let h = store.put(COUNTER_WASM).unwrap();
+    let kp = Keypair::from_seed(SEED);
+    let grant = firmar(&kp, h, PERMISO_RED);
+    let trust = TrustRing::new(vec![kp.public_key()]);
+
+    // La concesión sola verifica y rinde sus permisos.
+    assert_eq!(verify_grant(&grant, &trust), Ok(PERMISO_RED));
+
+    // Resuelta con declarados = RED ⇒ efectivos = RED.
+    let app = AppRef {
+        bytecode: h,
+        declarados: PERMISO_RED,
+        concesion: Some(grant),
+    };
+    let verified = resolve(&store, &trust, &app).unwrap();
+    assert_eq!(verified.permisos, PERMISO_RED);
+    assert_eq!(verified.wasm, COUNTER_WASM);
+}
+
+#[test]
+fn concesion_autor_no_confiable() {
+    let kp = Keypair::from_seed(SEED);
+    let grant = firmar(&kp, bytecode_hash(COUNTER_WASM), PERMISO_RED);
+    // Anillo vacío: el autor no está → rechazo antes de gastar cripto.
+    assert_eq!(verify_grant(&grant, &TrustRing::empty()), Err(DistError::AutorNoConfiable));
+}
+
+#[test]
+fn concesion_firma_invalida() {
+    let kp = Keypair::from_seed(SEED);
+    let mut grant = firmar(&kp, bytecode_hash(COUNTER_WASM), PERMISO_RED);
+    grant.firma[0] ^= 0xff; // corrompe la firma
+    let trust = TrustRing::new(vec![kp.public_key()]);
+    assert_eq!(verify_grant(&grant, &trust), Err(DistError::FirmaInvalida));
+}
+
+#[test]
+fn concesion_para_otro_bytecode() {
+    let store = DiskStore::open(tmpdir("otro-bc")).unwrap();
+    let h = store.put(COUNTER_WASM).unwrap();
+    let kp = Keypair::from_seed(SEED);
+    // Concesión firmada para OTRO bytecode (hash distinto), válida en sí misma.
+    let otro = bytecode_hash(b"otra app distinta");
+    let grant = firmar(&kp, otro, PERMISO_RED);
+    let trust = TrustRing::new(vec![kp.public_key()]);
+
+    let app = AppRef {
+        bytecode: h,
+        declarados: PERMISO_RED,
+        concesion: Some(grant),
+    };
+    assert_eq!(
+        resolve(&store, &trust, &app).unwrap_err(),
+        DistError::ConcesionParaOtroBytecode
+    );
+}
+
+#[test]
+fn permisos_efectivos_son_interseccion() {
+    let store = DiskStore::open(tmpdir("interseccion")).unwrap();
+    let h = store.put(COUNTER_WASM).unwrap();
+    let kp = Keypair::from_seed(SEED);
+    // La concesión otorga RED|GRAFO, pero el manifiesto sólo declara RED.
+    let grant = firmar(&kp, h, PERMISO_RED | PERMISO_GRAFO_ESCRITURA);
+    let trust = TrustRing::new(vec![kp.public_key()]);
+
+    let app = AppRef {
+        bytecode: h,
+        declarados: PERMISO_RED,
+        concesion: Some(grant),
+    };
+    let verified = resolve(&store, &trust, &app).unwrap();
+    // efectivos = declarados & concedidos = RED. No escala a GRAFO.
+    assert_eq!(verified.permisos, PERMISO_RED);
+}
+
+#[test]
+fn resolve_launch_y_corre_la_app() {
+    // El camino "abrir app distribuida": el Launch lleva sólo el hash hex.
+    let store = DiskStore::open(tmpdir("e2e")).unwrap();
+    let h = store.put(COUNTER_WASM).unwrap();
+    let launch = Launch::Wasm {
+        bytecode_hex: hash_to_hex(&h),
+        grant_hex: None,
+    };
+
+    let verified = resolve_launch(&store, &TrustRing::empty(), &launch).unwrap();
+    assert_eq!(verified.bytecode, h);
+    assert_eq!(verified.permisos, 0, "UI pura sin concesión ⇒ sin permisos");
+
+    // Y la app resuelta CORRE: cargamos el guest y lo manejamos.
+    let mut guest = verified.load().unwrap();
+    let n0 = guest.view().children[0].text.as_ref().unwrap().content.clone();
+    assert_eq!(n0, "0");
+    guest.dispatch(0, EventPayload::Click).unwrap(); // botón +1 ⇒ Increment
+    let n1 = guest.view().children[0].text.as_ref().unwrap().content.clone();
+    assert_eq!(n1, "1", "la app distribuida por hash incrementa de verdad");
+}
+
+#[test]
+fn resolve_launch_con_concesion_da_permisos() {
+    // El Launch lleva bytecode_hex Y grant_hex: la app de la UI corre con
+    // permisos reales (descubrimiento de concesión desde el lanzamiento).
+    let store = DiskStore::open(tmpdir("launch-grant")).unwrap();
+    let bc = store.put(COUNTER_WASM).unwrap();
+    let kp = Keypair::from_seed(SEED);
+    let grant = firmar(&kp, bc, PERMISO_RED);
+    let gh = store.put_grant(&grant).unwrap();
+
+    let launch = Launch::Wasm {
+        bytecode_hex: hash_to_hex(&bc),
+        grant_hex: Some(hash_to_hex(&gh)),
+    };
+    let trust = TrustRing::new(vec![kp.public_key()]);
+    let verified = resolve_launch(&store, &trust, &launch).unwrap();
+    // declarados = MAX ⇒ efectivos = concedidos = RED.
+    assert_eq!(verified.permisos, PERMISO_RED);
+    assert!(verified.load().is_ok());
+}
+
+#[test]
+fn manifiesto_con_concesion_da_permisos_reales() {
+    // El descubrimiento de concesiones: el manifiesto referencia bytecode Y
+    // concesión por hash; ambos viven en el store; resolve_manifest los trae,
+    // verifica la cadena y rinde permisos reales.
+    let store = DiskStore::open(tmpdir("manifest-grant")).unwrap();
+    let bc = store.put(COUNTER_WASM).unwrap();
+    let kp = Keypair::from_seed(SEED);
+    let grant = firmar(&kp, bc, PERMISO_RED);
+    let gh = store.put_grant(&grant).unwrap();
+    assert_eq!(gh, grant_hash(&grant), "put_grant direcciona por grant_hash");
+
+    let manifest = AppManifest {
+        bytecode: bc,
+        declarados: PERMISO_RED,
+        concesion: Some(gh),
+    };
+    let trust = TrustRing::new(vec![kp.public_key()]);
+
+    let verified = resolve_manifest(&store, &trust, &manifest).unwrap();
+    assert_eq!(verified.permisos, PERMISO_RED, "permisos reales, no 0");
+    assert_eq!(verified.wasm, COUNTER_WASM);
+    // Y carga en el runner con ese permiso (que gatea host_net_request).
+    assert!(verified.load().is_ok());
+}
+
+#[test]
+fn manifiesto_concesion_faltante() {
+    // El manifiesto declara una concesión que el source NO tiene.
+    let mut src = MapSource::new();
+    let bc = src.put(COUNTER_WASM);
+    let manifest = AppManifest {
+        bytecode: bc,
+        declarados: PERMISO_RED,
+        concesion: Some([0xab; 32]), // hash que nadie sirve
+    };
+    assert_eq!(
+        resolve_manifest(&src, &TrustRing::empty(), &manifest).unwrap_err(),
+        DistError::ConcesionNoEncontrada
+    );
+}
+
+#[test]
+fn manifiesto_concesion_para_otro_bytecode() {
+    // Concesión válida y servida, pero firmada para OTRO bytecode.
+    let mut src = MapSource::new();
+    let bc = src.put(COUNTER_WASM);
+    let kp = Keypair::from_seed(SEED);
+    let grant = firmar(&kp, bytecode_hash(b"otra app"), PERMISO_RED);
+    let gh = src.put_grant(&grant);
+    let manifest = AppManifest {
+        bytecode: bc,
+        declarados: PERMISO_RED,
+        concesion: Some(gh),
+    };
+    let trust = TrustRing::new(vec![kp.public_key()]);
+    assert_eq!(
+        resolve_manifest(&src, &trust, &manifest).unwrap_err(),
+        DistError::ConcesionParaOtroBytecode
+    );
+}
+
+#[test]
+fn manifiesto_pura_corre_sin_permisos() {
+    let mut src = MapSource::new();
+    let bc = src.put(COUNTER_WASM);
+    let verified =
+        resolve_manifest(&src, &TrustRing::empty(), &AppManifest::pure(bc)).unwrap();
+    assert_eq!(verified.permisos, 0);
+    assert!(verified.load().is_ok());
+}
+
+#[test]
+fn manifiesto_round_trip() {
+    let m = AppManifest {
+        bytecode: [3; 32],
+        declarados: PERMISO_RED,
+        concesion: Some([7; 32]),
+    };
+    assert_eq!(AppManifest::deserializar(&m.serializar()).unwrap(), m);
+}
+
+#[test]
+fn catalogo_busca_y_corre_la_app_elegida() {
+    // El "qué apps hay": un catálogo nombra apps; buscas por texto, eliges una
+    // y se resuelve por su hash + corre. El catálogo mismo viaja como blob (su
+    // hash es su dirección de contenido).
+    let mut src = MapSource::new();
+    let bc = src.put(COUNTER_WASM); // bytecode al CAS
+    let kp = Keypair::from_seed(SEED);
+    let grant = firmar(&kp, bc, PERMISO_RED);
+    let gh = src.put_grant(&grant); // concesión al CAS
+    let trust = TrustRing::new(vec![kp.public_key()]);
+
+    let catalog = Catalog::new(vec![
+        CatalogEntry {
+            id: "counter".into(),
+            name: "Contador".into(),
+            description: "suma y resta en red".into(),
+            category: Some("demo".into()),
+            bytecode: bc,
+            declarados: PERMISO_RED,
+            concesion: Some(gh),
+        },
+        CatalogEntry {
+            id: "otra".into(),
+            name: "Otra".into(),
+            description: "app que no está en el CAS".into(),
+            category: Some("demo".into()),
+            bytecode: [9; 32],
+            declarados: 0,
+            concesion: None,
+        },
+    ]);
+
+    // El catálogo es content-addressed: serializa y rehashea estable.
+    assert_eq!(
+        Catalog::deserializar(&catalog.serializar()).unwrap().hash(),
+        catalog.hash()
+    );
+
+    // Búsqueda por texto encuentra el contador.
+    let hits = catalog.search("suma");
+    assert_eq!(hits.len(), 1);
+    assert_eq!(hits[0].id, "counter");
+
+    // Resolver por id: trae bytecode + concesión, verifica, permisos reales.
+    let verified = resolve_from_catalog(&src, &trust, &catalog, "counter").unwrap();
+    assert_eq!(verified.permisos, PERMISO_RED, "la concesión del catálogo da RED");
+
+    // Y CORRE.
+    let mut guest = verified.load().unwrap();
+    guest.dispatch(0, EventPayload::Click).unwrap();
+    assert_eq!(
+        guest.view().children[0].text.as_ref().unwrap().content,
+        "1",
+        "la app elegida del catálogo incrementa de verdad"
+    );
+
+    // Una entrada cuyo bytecode no está en el CAS no resuelve (pero el catálogo
+    // sí la lista — descubrir ≠ tener).
+    assert!(resolve_from_catalog(&src, &trust, &catalog, "otra").is_err());
+    // Un id ausente del catálogo.
+    assert_eq!(
+        resolve_from_catalog(&src, &trust, &catalog, "nada").unwrap_err(),
+        DistError::NoEncontrado
+    );
+}
diff --git a/llimphi-wasm-net/Cargo.toml b/llimphi-wasm-net/Cargo.toml
new file mode 100644
index 0000000..1a89f68
--- /dev/null
+++ b/llimphi-wasm-net/Cargo.toml
@@ -0,0 +1,26 @@
+[package]
+name = "llimphi-wasm-net"
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+authors.workspace = true
+publish.workspace = true
+description = "llimphi-wasm-net — transporte P2P para la distribución de apps WASM Tier 3. Protocolo de stream /llimphi-wasm/blob/1.0.0 sobre BrahmanNet (card-net): un BlobServer sirve los bytecodes de un DiskStore por hash; fetch_blob abre un stream a un provider y los pide; RemoteSource implementa BlobSource (con descubrimiento por DHT) para que la cadena resolver→verificar de llimphi-wasm-dist funcione sobre la red. Espejo host de la recuperación por hash sobre Akasha del kernel de wawa."
+
+[dependencies]
+# Sólo el núcleo de distribución — NADA del runner/GPU. Un servidor de blobs
+# headless compila sin wgpu/vello/winit.
+llimphi-wasm-core = { workspace = true }
+card-net = { path = "../../../shared/card/card-net" }
+serde = { workspace = true }
+postcard = { workspace = true }
+tokio = { workspace = true }
+futures = { workspace = true }
+
+[dev-dependencies]
+tokio = { workspace = true }
+# Sólo los tests corren la app traída por la red ⇒ el runner es dev-dependency.
+llimphi-wasm-runner = { workspace = true }
+# Firmar/declarar la concesión que viaja por la red en el test end-to-end.
+agora-core = { path = "../../../03_ukupacha/agora/agora-core" }
+format = { path = "../../../shared/format" }
diff --git a/llimphi-wasm-net/LEEME.md b/llimphi-wasm-net/LEEME.md
new file mode 100644
index 0000000..299f683
--- /dev/null
+++ b/llimphi-wasm-net/LEEME.md
@@ -0,0 +1,25 @@
+# llimphi-wasm-net
+
+*Read this in English: [README.md](README.md).*
+
+Transporte P2P para distribución de apps WASM Tier 3.
+
+Un protocolo de stream mínimo sobre `BrahmanNet` (card-net, la malla libp2p
+TCP+Noise+Yamux+Kad compartida):
+
+- `serve_blobs` levanta un responder que, por cada stream entrante en
+  `/llimphi-wasm/blob/1.0.0`, atiende un `Get{hash}` sirviendo el bytecode
+  de un `DiskStore` (o `NotFound`).
+- `fetch_blob` abre un stream a un provider y pide un blob por hash.
+- `fetch_blob_dht` descubre providers por la DHT y prueba con cada uno.
+- `RemoteSource` envuelve lo anterior como un `BlobSource` síncrono, para
+  que la cadena `resolve→verificar` de `llimphi-wasm-dist` corra sobre la red
+  sin enterarse del transporte.
+
+El framing copia el de minga (`[u32 LE len][postcard]`). La integridad NO se
+confía a la red: `llimphi-wasm-dist::resolve` rehashea el blob recibido
+contra el hash pedido, así un provider malicioso no puede colar otro wasm.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../LEEME.md).
diff --git a/llimphi-wasm-net/README.md b/llimphi-wasm-net/README.md
new file mode 100644
index 0000000..a78c16c
--- /dev/null
+++ b/llimphi-wasm-net/README.md
@@ -0,0 +1,23 @@
+# llimphi-wasm-net
+
+P2P transport for the distribution of Tier 3 WASM apps.
+
+A minimal stream protocol over `BrahmanNet` (card-net, the shared
+libp2p TCP+Noise+Yamux+Kad mesh):
+
+- `serve_blobs` brings up a responder that, for each incoming stream on
+  `/llimphi-wasm/blob/1.0.0`, answers a `Get{hash}` by serving the bytecode from
+  a `DiskStore` (or `NotFound`).
+- `fetch_blob` opens a stream to a provider and asks for a blob by hash.
+- `fetch_blob_dht` discovers providers through the DHT and tries each one.
+- `RemoteSource` wraps the above as a synchronous `BlobSource`, so
+  `llimphi-wasm-dist`'s `resolve→verify` chain runs over the network without
+  knowing about the transport.
+
+The framing copies minga's (`[u32 LE len][postcard]`). Integrity is NOT trusted to
+the network: `llimphi-wasm-dist::resolve` rehashes the received blob against the
+requested hash, so a malicious provider cannot slip in a different wasm.
+
+---
+
+Part of **llimphi** — see [llimphi](../README.md).
diff --git a/llimphi-wasm-net/src/lib.rs b/llimphi-wasm-net/src/lib.rs
new file mode 100644
index 0000000..c7fa4f9
--- /dev/null
+++ b/llimphi-wasm-net/src/lib.rs
@@ -0,0 +1,206 @@
+//! llimphi-wasm-net — transporte P2P para distribución de apps WASM Tier 3.
+//!
+//! Un protocolo de stream mínimo sobre `BrahmanNet` (card-net, la malla libp2p
+//! TCP+Noise+Yamux+Kad compartida):
+//!
+//! - [`serve_blobs`] levanta un responder que, por cada stream entrante en
+//!   `/llimphi-wasm/blob/1.0.0`, atiende un `Get{hash}` sirviendo el bytecode
+//!   de un [`DiskStore`] (o `NotFound`).
+//! - [`fetch_blob`] abre un stream a un provider y pide un blob por hash.
+//! - [`fetch_blob_dht`] descubre providers por la DHT y prueba con cada uno.
+//! - [`RemoteSource`] envuelve lo anterior como un [`BlobSource`] síncrono, para
+//!   que la cadena `resolve→verificar` de `llimphi-wasm-dist` corra sobre la red
+//!   sin enterarse del transporte.
+//!
+//! El framing copia el de minga (`[u32 LE len][postcard]`). La integridad NO se
+//! confía a la red: `llimphi-wasm-dist::resolve` rehashea el blob recibido
+//! contra el hash pedido, así un provider malicioso no puede colar otro wasm.
+
+use std::sync::Arc;
+use std::time::{Duration, Instant};
+
+use card_net::{BrahmanNet, PeerId, Stream, StreamProtocol};
+use futures::{AsyncReadExt, AsyncWriteExt, StreamExt};
+use serde::{Deserialize, Serialize};
+
+pub use llimphi_wasm_core::{BlobSource, DiskStore, Hash};
+
+/// El protocolo de stream para pedir bytecodes por hash.
+pub const BLOB_PROTOCOL: StreamProtocol = StreamProtocol::new("/llimphi-wasm/blob/1.0.0");
+
+/// Tope de un blob en la red (64 MiB). Un wasm de app real está muy por debajo.
+const MAX_BLOB: u32 = 64 * 1024 * 1024;
+
+/// Mensajes del protocolo. Un request, una respuesta, stream cerrado.
+#[derive(Debug, Serialize, Deserialize)]
+enum BlobMsg {
+    Get { hash: Hash },
+    Data { hash: Hash, data: Vec<u8> },
+    NotFound { hash: Hash },
+}
+
+/// Errores del transporte.
+#[derive(Debug)]
+pub enum NetError {
+    /// No se pudo abrir el stream al provider.
+    OpenStream(String),
+    /// El provider no tiene el blob.
+    NotFound,
+    /// Respuesta fuera de protocolo.
+    Protocol,
+    /// Ningún provider entregó el blob.
+    SinProviders,
+    /// Error de I/O sobre el stream.
+    Io(std::io::Error),
+}
+
+impl std::fmt::Display for NetError {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            NetError::OpenStream(e) => write!(f, "abrir stream: {e}"),
+            NetError::NotFound => write!(f, "el provider no tiene el blob"),
+            NetError::Protocol => write!(f, "respuesta fuera de protocolo"),
+            NetError::SinProviders => write!(f, "ningún provider entregó el blob"),
+            NetError::Io(e) => write!(f, "io: {e}"),
+        }
+    }
+}
+
+impl std::error::Error for NetError {}
+
+// =====================================================================
+// Framing — [u32 LE len][postcard], igual que minga
+// =====================================================================
+
+async fn send_msg<S: futures::AsyncWrite + Unpin>(s: &mut S, m: &BlobMsg) -> std::io::Result<()> {
+    let bytes = postcard::to_allocvec(m).expect("postcard encode");
+    let len = bytes.len() as u32;
+    s.write_all(&len.to_le_bytes()).await?;
+    s.write_all(&bytes).await?;
+    s.flush().await?;
+    Ok(())
+}
+
+async fn recv_msg<S: futures::AsyncRead + Unpin>(s: &mut S) -> std::io::Result<BlobMsg> {
+    let mut len_buf = [0u8; 4];
+    s.read_exact(&mut len_buf).await?;
+    let len = u32::from_le_bytes(len_buf);
+    if len > MAX_BLOB {
+        return Err(std::io::Error::new(
+            std::io::ErrorKind::InvalidData,
+            "blob excede el tope",
+        ));
+    }
+    let mut buf = vec![0u8; len as usize];
+    s.read_exact(&mut buf).await?;
+    postcard::from_bytes(&buf)
+        .map_err(|_| std::io::Error::new(std::io::ErrorKind::InvalidData, "postcard inválido"))
+}
+
+// =====================================================================
+// Responder
+// =====================================================================
+
+/// Levanta el responder de blobs sobre `net`: por cada stream entrante en
+/// [`BLOB_PROTOCOL`], sirve el bytecode pedido desde `store`. Devuelve el
+/// `JoinHandle` del loop de aceptación (vive mientras se sirva).
+///
+/// Llamar UNA vez por `net` (una sola `accept` por protocolo).
+pub fn serve_blobs(net: &BrahmanNet, store: Arc<DiskStore>) -> tokio::task::JoinHandle<()> {
+    let mut control = net.control.clone();
+    tokio::spawn(async move {
+        let mut incoming = match control.accept(BLOB_PROTOCOL) {
+            Ok(i) => i,
+            Err(_) => return, // ya hay otro handle aceptando este protocolo
+        };
+        while let Some((_peer, stream)) = incoming.next().await {
+            let store = Arc::clone(&store);
+            tokio::spawn(serve_one(stream, store));
+        }
+    })
+}
+
+async fn serve_one(mut stream: Stream, store: Arc<DiskStore>) {
+    if let Ok(BlobMsg::Get { hash }) = recv_msg(&mut stream).await {
+        let reply = match store.get(&hash) {
+            Some(data) => BlobMsg::Data { hash, data },
+            None => BlobMsg::NotFound { hash },
+        };
+        let _ = send_msg(&mut stream, &reply).await;
+        let _ = stream.close().await;
+    }
+}
+
+/// Anuncia en la DHT que este nodo provee un bytecode (para [`fetch_blob_dht`]).
+pub fn announce(net: &BrahmanNet, hash: &Hash) {
+    net.start_providing(hash);
+}
+
+// =====================================================================
+// Cliente
+// =====================================================================
+
+/// Pide un blob por hash a un provider concreto. Reintenta abrir el stream
+/// hasta 5 s (la conexión puede no estar lista al instante tras un `dial`).
+pub async fn fetch_blob(net: &BrahmanNet, peer: PeerId, hash: &Hash) -> Result<Vec<u8>, NetError> {
+    let mut control = net.control.clone();
+    let deadline = Instant::now() + Duration::from_secs(5);
+    let mut stream = loop {
+        match control.open_stream(peer, BLOB_PROTOCOL).await {
+            Ok(s) => break s,
+            Err(_) if Instant::now() < deadline => {
+                tokio::time::sleep(Duration::from_millis(50)).await;
+            }
+            Err(e) => return Err(NetError::OpenStream(e.to_string())),
+        }
+    };
+    send_msg(&mut stream, &BlobMsg::Get { hash: *hash })
+        .await
+        .map_err(NetError::Io)?;
+    match recv_msg(&mut stream).await.map_err(NetError::Io)? {
+        BlobMsg::Data { data, .. } => Ok(data),
+        BlobMsg::NotFound { .. } => Err(NetError::NotFound),
+        _ => Err(NetError::Protocol),
+    }
+}
+
+/// Descubre providers del `hash` por la DHT y pide el blob a cada uno hasta que
+/// alguno lo entregue.
+pub async fn fetch_blob_dht(net: &BrahmanNet, hash: &Hash) -> Result<Vec<u8>, NetError> {
+    let providers = net.find_providers(hash).await;
+    for peer in providers {
+        if let Ok(data) = fetch_blob(net, peer, hash).await {
+            return Ok(data);
+        }
+    }
+    Err(NetError::SinProviders)
+}
+
+// =====================================================================
+// Puente síncrono: BlobSource sobre la red
+// =====================================================================
+
+/// Adapta el fetch P2P (async) al trait síncrono [`BlobSource`], para componerlo
+/// con `llimphi_wasm_dist::{resolve, LayeredSource}`. Usa la DHT para descubrir
+/// providers.
+///
+/// `fetch` hace `block_on` sobre el handle del runtime, así que **no debe
+/// llamarse desde dentro de ese runtime** (sí desde el loop síncrono del runner
+/// Llimphi, que no es async). Componer con un [`DiskStore`] vía `LayeredSource`
+/// para servir desde caché local primero y caer a la red sólo si falta.
+pub struct RemoteSource {
+    net: Arc<BrahmanNet>,
+    rt: tokio::runtime::Handle,
+}
+
+impl RemoteSource {
+    pub fn new(net: Arc<BrahmanNet>, rt: tokio::runtime::Handle) -> Self {
+        Self { net, rt }
+    }
+}
+
+impl BlobSource for RemoteSource {
+    fn fetch(&self, hash: &Hash) -> Option<Vec<u8>> {
+        self.rt.block_on(fetch_blob_dht(&self.net, hash)).ok()
+    }
+}
diff --git a/llimphi-wasm-net/tests/p2p.rs b/llimphi-wasm-net/tests/p2p.rs
new file mode 100644
index 0000000..71d1707
--- /dev/null
+++ b/llimphi-wasm-net/tests/p2p.rs
@@ -0,0 +1,133 @@
+//! Certifica la distribución sobre red real: dos peers libp2p (TCP+Noise+Yamux)
+//! en proceso. B sirve el counter.wasm desde un DiskStore; A lo pide por hash,
+//! `llimphi-wasm-dist` verifica la integridad del blob recibido y la app corre.
+//!
+//! Mismo harness que minga (`libp2p_integration.rs`): listen + dial + open_stream
+//! con reintentos. Determinista (provider explícito, sin depender de timing DHT).
+
+use std::sync::Arc;
+
+use agora_core::Keypair;
+use card_net::BrahmanNet;
+use format::{ConcesionCapacidad, PERMISO_RED};
+use llimphi_wasm_core::{
+    bytecode_hash, resolve, resolve_manifest, verify_integrity, AppManifest, AppRef, BlobSource,
+    DiskStore, Hash, MapSource, TrustRing,
+};
+use llimphi_wasm_net::{fetch_blob, serve_blobs};
+use llimphi_wasm_runner::{EventPayload, WasmGuest};
+
+const COUNTER_WASM: &[u8] = include_bytes!("../../llimphi-wasm-runner/assets/counter.wasm");
+
+/// Source de un solo blob ya en mano — para pasar los bytes de red por la
+/// verificación de `dist::resolve` sin volver a la red.
+struct OneShot(Vec<u8>);
+impl BlobSource for OneShot {
+    fn fetch(&self, _hash: &Hash) -> Option<Vec<u8>> {
+        Some(self.0.clone())
+    }
+}
+
+#[tokio::test(flavor = "multi_thread", worker_threads = 2)]
+async fn dos_peers_distribuyen_y_corren_la_app() {
+    // Dos nodos independientes (keypair efímera, peer_id nuevo).
+    let node_a = BrahmanNet::new().expect("nodo A");
+    let node_b = BrahmanNet::new().expect("nodo B");
+    let peer_b = node_b.peer_id;
+
+    // B inscribe el counter.wasm en su store y levanta el responder de blobs.
+    let dir_b = std::env::temp_dir().join("llimphi-wasm-net-srv");
+    let _ = std::fs::remove_dir_all(&dir_b);
+    let store_b = Arc::new(DiskStore::open(&dir_b).expect("store B"));
+    let hash = store_b.put(COUNTER_WASM).expect("put");
+    assert_eq!(hash, bytecode_hash(COUNTER_WASM));
+    let _srv = serve_blobs(&node_b, Arc::clone(&store_b));
+
+    // B escucha en localhost; A dializa la dirección resuelta.
+    let addr_b = node_b
+        .listen("/ip4/127.0.0.1/tcp/0".parse().unwrap())
+        .await;
+    node_a.dial(addr_b);
+
+    // A pide el bytecode por hash sobre la red real.
+    let bytes = fetch_blob(&node_a, peer_b, &hash)
+        .await
+        .expect("fetch del blob");
+
+    // Integridad: lo recibido rehashea al hash pedido (un provider malicioso no
+    // puede colar otro wasm — la red no es de fiar, el hash sí).
+    assert!(verify_integrity(&bytes, &hash));
+    assert_eq!(bytes, COUNTER_WASM);
+
+    // La cadena de dist verifica los bytes de RED y entrega una VerifiedApp...
+    let verified = resolve(&OneShot(bytes), &TrustRing::empty(), &AppRef::pure(hash))
+        .expect("resolve verifica el blob de red");
+    assert_eq!(verified.permisos, 0);
+
+    // ...y la app distribuida por la red CORRE: incrementa de verdad.
+    let mut guest = WasmGuest::load(&verified.wasm, verified.permisos).expect("carga el guest");
+    let n0 = guest.view().children[0].text.as_ref().unwrap().content.clone();
+    assert_eq!(n0, "0");
+    guest.dispatch(0, EventPayload::Click).unwrap(); // Msg::Increment
+    let n1 = guest.view().children[0].text.as_ref().unwrap().content.clone();
+    assert_eq!(n1, "1", "la app traída por la red P2P incrementa");
+}
+
+/// Descubrimiento de concesiones end-to-end sobre la red: B sirve el bytecode
+/// **y** su concesión firmada; A los trae AMBOS por hash, resuelve el manifiesto
+/// y la app corre con permisos reales (no 0).
+#[tokio::test(flavor = "multi_thread", worker_threads = 2)]
+async fn dos_peers_distribuyen_app_con_concesion() {
+    let node_a = BrahmanNet::new().expect("nodo A");
+    let node_b = BrahmanNet::new().expect("nodo B");
+    let peer_b = node_b.peer_id;
+
+    // B inscribe el wasm y una concesión firmada (PERMISO_RED) para ese bytecode.
+    let dir_b = std::env::temp_dir().join("llimphi-wasm-net-grant-srv");
+    let _ = std::fs::remove_dir_all(&dir_b);
+    let store_b = Arc::new(DiskStore::open(&dir_b).expect("store B"));
+    let bc = store_b.put(COUNTER_WASM).expect("put wasm");
+    let kp = Keypair::from_seed([7; 32]);
+    let mensaje = format::mensaje_capacidad(&bc, PERMISO_RED);
+    let grant = ConcesionCapacidad {
+        bytecode: bc,
+        permisos: PERMISO_RED,
+        autor: kp.public_key(),
+        firma: kp.sign(&mensaje),
+    };
+    let gh = store_b.put_grant(&grant).expect("put grant");
+    let _srv = serve_blobs(&node_b, Arc::clone(&store_b));
+
+    let addr_b = node_b
+        .listen("/ip4/127.0.0.1/tcp/0".parse().unwrap())
+        .await;
+    node_a.dial(addr_b);
+
+    // A trae los DOS blobs por hash sobre la red real.
+    let wasm = fetch_blob(&node_a, peer_b, &bc).await.expect("fetch wasm");
+    let grant_blob = fetch_blob(&node_a, peer_b, &gh).await.expect("fetch grant");
+
+    // Los junta y resuelve el manifiesto: descubrimiento de concesión completo.
+    let mut src = MapSource::new();
+    src.insert(bc, wasm);
+    src.insert(gh, grant_blob);
+    let manifest = AppManifest {
+        bytecode: bc,
+        declarados: PERMISO_RED,
+        concesion: Some(gh),
+    };
+    let trust = TrustRing::new(vec![kp.public_key()]);
+    let verified = resolve_manifest(&src, &trust, &manifest).expect("resolve_manifest");
+    assert_eq!(
+        verified.permisos, PERMISO_RED,
+        "la app traída por la red corre con permisos REALES, no 0"
+    );
+
+    // Y carga con ese permiso (que gatea host_net_request) y corre.
+    let mut guest = WasmGuest::load(&verified.wasm, verified.permisos).expect("carga con permisos");
+    guest.dispatch(0, EventPayload::Click).unwrap();
+    assert_eq!(
+        guest.view().children[0].text.as_ref().unwrap().content,
+        "1"
+    );
+}
diff --git a/llimphi-wasm-open/Cargo.toml b/llimphi-wasm-open/Cargo.toml
new file mode 100644
index 0000000..ba26260
--- /dev/null
+++ b/llimphi-wasm-open/Cargo.toml
@@ -0,0 +1,30 @@
+[package]
+name = "llimphi-wasm-open"
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+authors.workspace = true
+publish.workspace = true
+description = "llimphi-wasm-open — el launcher de escritorio de las apps WASM Tier 3 de Llimphi. Toma una app por archivo o por hash (resuelta desde un CAS local, con su concesión Ed25519 verificada contra un anillo de confianza) y la abre como una ventana Llimphi real, con los permisos efectivos gateando qué capacidades se enlazan. Es la pieza que faltaba para que una app servida/distribuida por la malla corra en el escritorio Linux — el gemelo host del ejecutor de apps de wawa, y el consumidor de app_bus::Launch::Wasm."
+
+[[bin]]
+name = "llimphi-wasm-open"
+path = "src/main.rs"
+
+[dependencies]
+# La cara "con baterías": resolver→verificar→correr. Arrastra el runner (GPU).
+llimphi-wasm-dist = { workspace = true }
+# El runtime de ventana (bucle Elm + winit + wgpu) que hospeda al guest.
+llimphi-ui = { workspace = true }
+# Puente a registros remotos de apps (REST/RON) + ingesta al catálogo local.
+llimphi-wasm-registry = { workspace = true }
+# Ejecutor de apps WASI de consola (el WASM público que no es UI Tier 3).
+llimphi-wasm-wasi = { workspace = true }
+# Registro de apps: el modo --install escribe un manifiesto <id>.toml que el
+# dock/spotlight descubren (entry_to_toml + apps_dir, esquema compartido).
+app-bus = { workspace = true }
+format = { path = "../../../shared/format" }
+
+[dev-dependencies]
+# Para fabricar un módulo WASI mínimo en los tests sin el toolchain wasm32-wasi.
+wat = { workspace = true }
diff --git a/llimphi-wasm-open/LEEME.md b/llimphi-wasm-open/LEEME.md
new file mode 100644
index 0000000..a531eab
--- /dev/null
+++ b/llimphi-wasm-open/LEEME.md
@@ -0,0 +1,39 @@
+# llimphi-wasm-open
+
+*Read this in English: [README.md](README.md).*
+
+Abre una app WASM Tier 3 como una ventana de escritorio.
+
+Cierra el lazo de la distribución: el stack Tier 3 ya sabía resolver una app
+por hash, verificar su integridad y su concesión Ed25519, y materializar su
+`View<Msg>` en una ventana Llimphi. Lo que faltaba era el **ejecutable** que
+ata todo desde la línea de comandos del escritorio — el gemelo host del
+ejecutor de apps de wawa, y el consumidor real de `app_bus::Launch::Wasm`
+(que hasta ahora devolvía `Unsupported` porque "lo resuelve el chasis": este
+binario *es* ese chasis).
+
+Dos modos:
+```text
+# 1. Un .wasm local — app de sólo-UI, sin permisos (camino rápido).
+llimphi-wasm-open app.wasm
+
+# 2. Por hash desde un CAS local — se verifica integridad y, si hay
+#    concesión, se valida contra el anillo de confianza y se corre con
+#    los permisos efectivos (los bits gatean qué host imports se enlazan).
+llimphi-wasm-open --hash <blake3-hex> --store ~/.cache/llimphi/blobs \
+    [--grant <blake3-hex>] [--ring claves.txt] [--name "Mi App"]
+```
+El modo hash es exactamente lo que un launcher de la UI (dock, spotlight,
+mirada) invocaría para un `Launch::Wasm{bytecode_hex, grant_hex}`: spawnear
+este binario con `--hash`/`--grant`/`--store`, manteniendo a `app-bus`
+liviano (sólo transporta hex, no toca el runner ni la GPU).
+
+## Uso
+
+```sh
+cargo run --release -p llimphi-wasm-open
+```
+
+---
+
+Parte de **llimphi** — ver [llimphi](../LEEME.md).
diff --git a/llimphi-wasm-open/README.md b/llimphi-wasm-open/README.md
new file mode 100644
index 0000000..ead828d
--- /dev/null
+++ b/llimphi-wasm-open/README.md
@@ -0,0 +1,26 @@
+# llimphi-wasm-open
+
+Opens a Tier 3 WASM app as a desktop window.
+
+It closes the distribution loop: the Tier 3 stack already knew how to resolve an
+app by hash, verify its integrity and its Ed25519 grant, and materialize its
+`View<Msg>` into a Llimphi window. What was missing was the **executable** tying
+it all together from the desktop's command line — the host twin of wawa's app
+executor, and the real consumer of `app_bus::Launch::Wasm` (which until now
+returned `Unsupported` because "the chassis resolves it": this binary *is* that
+chassis).
+
+Two modes:
+
+```text
+# 1. A local .wasm — UI-only app, no permissions (the fast path).
+llimphi-wasm-open app.wasm
+
+# 2. By hash from a local CAS — integrity is verified and, if there is a
+#    grant, it is validated against the trust ring and run with the
+#    effective permissions (the bits gate which host imports get linked).
+```
+
+---
+
+Part of **llimphi** — see [llimphi](../README.md).
diff --git a/llimphi-wasm-open/src/main.rs b/llimphi-wasm-open/src/main.rs
new file mode 100644
index 0000000..513cbc6
--- /dev/null
+++ b/llimphi-wasm-open/src/main.rs
@@ -0,0 +1,1107 @@
+//! llimphi-wasm-open — abre una app WASM Tier 3 como una ventana de escritorio.
+//!
+//! Cierra el lazo de la distribución: el stack Tier 3 ya sabía resolver una app
+//! por hash, verificar su integridad y su concesión Ed25519, y materializar su
+//! `View<Msg>` en una ventana Llimphi. Lo que faltaba era el **ejecutable** que
+//! ata todo desde la línea de comandos del escritorio — el gemelo host del
+//! ejecutor de apps de wawa, y el consumidor real de `app_bus::Launch::Wasm`
+//! (que hasta ahora devolvía `Unsupported` porque "lo resuelve el chasis": este
+//! binario *es* ese chasis).
+//!
+//! Dos modos:
+//!
+//! ```text
+//! # 1. Un .wasm local — app de sólo-UI, sin permisos (camino rápido).
+//! llimphi-wasm-open app.wasm
+//!
+//! # 2. Por hash desde un CAS local — se verifica integridad y, si hay
+//! #    concesión, se valida contra el anillo de confianza y se corre con
+//! #    los permisos efectivos (los bits gatean qué host imports se enlazan).
+//! llimphi-wasm-open --hash <blake3-hex> --store ~/.cache/llimphi/blobs \
+//!     [--grant <blake3-hex>] [--ring claves.txt] [--name "Mi App"]
+//! ```
+//!
+//! El modo hash es exactamente lo que un launcher de la UI (dock, spotlight,
+//! mirada) invocaría para un `Launch::Wasm{bytecode_hex, grant_hex}`: spawnear
+//! este binario con `--hash`/`--grant`/`--store`, manteniendo a `app-bus`
+//! liviano (sólo transporta hex, no toca el runner ni la GPU).
+
+use std::process::ExitCode;
+use std::sync::OnceLock;
+
+use format::{ConcesionCapacidad, Permisos};
+use llimphi_ui::{App, Handle, KeyEvent, View};
+use llimphi_wasm_dist::{
+    hash_from_hex, hash_to_hex, resolve_from_catalog, AppManifest, Catalog, CatalogEntry, DiskStore,
+    RunnerMsg, TrustRing, VerifiedAppExt, WasmGuest,
+};
+
+/// Lo resuelto en `main` y consumido por `Host::init` en el hilo de la UI.
+/// Cargamos el `WasmGuest` recién en `init` (no antes) porque el `Store` de
+/// wasmi vive atado a su hilo; aquí viajan sólo datos (`Send`).
+#[cfg_attr(test, derive(Debug))]
+struct LaunchSpec {
+    wasm: Vec<u8>,
+    permisos: Permisos,
+    title: String,
+}
+
+static SPEC: OnceLock<LaunchSpec> = OnceLock::new();
+
+/// El modelo del host: el guest vivo + el título que mostramos en la barra.
+struct HostModel {
+    guest: WasmGuest,
+    title: String,
+}
+
+struct Host;
+
+impl App for Host {
+    type Model = HostModel;
+    type Msg = RunnerMsg;
+
+    fn title() -> &'static str {
+        "llimphi · wasm"
+    }
+
+    fn init(_: &Handle<Self::Msg>) -> Self::Model {
+        let spec = SPEC.get().expect("LaunchSpec no inicializado");
+        let guest = WasmGuest::load(&spec.wasm, spec.permisos)
+            .unwrap_or_else(|e| panic!("cargar app WASM: {e}"));
+        HostModel {
+            guest,
+            title: spec.title.clone(),
+        }
+    }
+
+    fn update(mut model: Self::Model, msg: Self::Msg, _: &Handle<Self::Msg>) -> Self::Model {
+        if let Err(e) = model.guest.apply(&msg) {
+            eprintln!("wasm dispatch: {e}");
+        }
+        model
+    }
+
+    fn view(model: &Self::Model) -> View<Self::Msg> {
+        model.guest.render()
+    }
+
+    fn window_title(model: &Self::Model) -> Option<String> {
+        Some(format!("llimphi · {}", model.title))
+    }
+
+    fn on_key(model: &Self::Model, event: &KeyEvent) -> Option<Self::Msg> {
+        model.guest.key_to_msg(event)
+    }
+
+    fn on_focus(_model: &Self::Model, id: Option<u64>) -> Option<Self::Msg> {
+        Some(WasmGuest::focus_msg(id))
+    }
+}
+
+fn main() -> ExitCode {
+    let argv: Vec<String> = std::env::args().skip(1).collect();
+    let tiene = |f: &str| argv.iter().any(|a| a == f);
+
+    // Modo registro: conectar a un registro de apps (REST en RON o directorio
+    // local) — listar/buscar y, con --ingest, descargar al CAS + catálogo. No
+    // abre ventana.
+    if tiene("--registry") {
+        return match registro(argv.iter().cloned()) {
+            Ok(msg) => {
+                println!("{msg}");
+                ExitCode::SUCCESS
+            }
+            Err(e) => {
+                eprintln!("llimphi-wasm-open --registry: {e}");
+                uso();
+                ExitCode::FAILURE
+            }
+        };
+    }
+
+    // Modo catálogo (búsqueda): listar/buscar apps por texto. No abre ventana.
+    if tiene("--list") || tiene("--search") {
+        return match buscar(argv.iter().cloned()) {
+            Ok(msg) => {
+                println!("{msg}");
+                ExitCode::SUCCESS
+            }
+            Err(e) => {
+                eprintln!("llimphi-wasm-open: {e}");
+                uso();
+                ExitCode::FAILURE
+            }
+        };
+    }
+
+    // Modo productor: publicar una app (blob al CAS + manifiesto + entrada de
+    // catálogo si se pide). No abre ventana.
+    if tiene("--install") {
+        return match instalar(argv.into_iter()) {
+            Ok(msg) => {
+                println!("{msg}");
+                ExitCode::SUCCESS
+            }
+            Err(e) => {
+                eprintln!("llimphi-wasm-open --install: {e}");
+                uso();
+                ExitCode::FAILURE
+            }
+        };
+    }
+
+    // Modo consumidor: resolver la app (por id del catálogo o por hash/archivo)
+    // y correrla según su clase.
+    let here = tiene("--here");
+    let spec = if tiene("--run") {
+        spec_desde_catalogo(argv.iter().cloned())
+    } else {
+        resolver_spec(argv.iter().cloned())
+    };
+    match spec {
+        Ok(spec) => {
+            // Una app WASI de consola muestra su salida en **shuma** (la
+            // terminal de la suite), no en una ventana de consola propia: si hay
+            // display, shuma está disponible y no nos pidieron `--here`,
+            // delegamos. `--here` (o sin display, o sin shuma) ⇒ corre local.
+            let es_wasi = llimphi_wasm_wasi::detect_kind(&spec.wasm)
+                == llimphi_wasm_wasi::WasmKind::WasiConsole;
+            if es_wasi && !here && hay_display() && delegar_a_shuma(&argv) {
+                return ExitCode::SUCCESS;
+            }
+            correr(spec)
+        }
+        Err(e) => {
+            eprintln!("llimphi-wasm-open: {e}");
+            uso();
+            ExitCode::FAILURE
+        }
+    }
+}
+
+/// ¿Hay un servidor gráfico (Wayland/X11)? Sin él no tiene sentido abrir shuma.
+fn hay_display() -> bool {
+    let set = |k: &str| std::env::var(k).map(|v| !v.is_empty()).unwrap_or(false);
+    set("WAYLAND_DISPLAY") || set("DISPLAY")
+}
+
+/// Argumentos para abrir shuma corriendo esta misma invocación en modo local:
+/// `-e <este-binario> <argv…> --here`. shuma une todo tras `-e` en una línea y
+/// la corre como primer bloque; `--here` evita que el re-lanzamiento vuelva a
+/// delegar (corre la app WASI e imprime, y shuma captura esa salida).
+fn comando_para_shuma(exe: &str, argv: &[String]) -> Vec<String> {
+    let mut v = Vec::with_capacity(argv.len() + 3);
+    v.push("-e".to_string());
+    v.push(exe.to_string());
+    v.extend(argv.iter().cloned());
+    v.push("--here".to_string());
+    v
+}
+
+/// Lanza shuma para correr esta invocación adentro. `true` si se spawneó; en
+/// error (shuma no instalado, etc.) `false` para caer a ejecución local.
+fn delegar_a_shuma(argv: &[String]) -> bool {
+    let exe = match std::env::current_exe() {
+        Ok(p) => p.to_string_lossy().to_string(),
+        Err(_) => return false,
+    };
+    std::process::Command::new("shuma-shell-llimphi")
+        .args(comando_para_shuma(&exe, argv))
+        .spawn()
+        .is_ok()
+}
+
+/// Corre la app ya resuelta según su clase: una app Tier 3 (UI) abre una
+/// ventana Llimphi; un programa WASI de consola se ejecuta y vuelca su salida
+/// al terminal, propagando el código de salida. Así el catálogo no es trampa:
+/// el WASM de consola (el grueso del ecosistema) también corre.
+fn correr(spec: LaunchSpec) -> ExitCode {
+    use llimphi_wasm_wasi::{detect_kind, run_console, WasmKind};
+
+    match detect_kind(&spec.wasm) {
+        WasmKind::WasiConsole => match run_console(&spec.wasm, &[], &[], &[]) {
+            Ok(out) => {
+                print!("{}", out.stdout_text());
+                eprint!("{}", out.stderr_text());
+                ExitCode::from(out.exit_code.clamp(0, 255) as u8)
+            }
+            Err(e) => {
+                eprintln!("llimphi-wasm-open: WASI: {e}");
+                ExitCode::FAILURE
+            }
+        },
+        // Tier 3 (o desconocido, que intentamos como UI): ventana Llimphi.
+        _ => {
+            let _ = SPEC.set(spec);
+            llimphi_ui::run::<Host>();
+            ExitCode::SUCCESS
+        }
+    }
+}
+
+fn uso() {
+    eprintln!();
+    eprintln!("uso:");
+    eprintln!("  llimphi-wasm-open <app.wasm>");
+    eprintln!("  llimphi-wasm-open --hash <hex> [--store <dir>] \\");
+    eprintln!("      [--grant <hex>] [--ring <archivo>] [--name <título>]");
+    eprintln!("  llimphi-wasm-open --list [--catalog <archivo>]");
+    eprintln!("  llimphi-wasm-open --search <texto> [--catalog <archivo>]");
+    eprintln!("  llimphi-wasm-open --run <id> [--catalog <archivo>] \\");
+    eprintln!("      [--store <dir>] [--ring <archivo>]");
+    eprintln!("  llimphi-wasm-open --install <app.wasm> --id <id> \\");
+    eprintln!("      [--name <label>] [--desc <texto>] [--grant <archivo>] \\");
+    eprintln!("      [--icon <glifo>] [--category <cat>] [--store <dir>] \\");
+    eprintln!("      [--apps-dir <dir>] [--catalog <archivo>]");
+    eprintln!("  llimphi-wasm-open --registry <descriptor.ron> [--instance <base>] \\");
+    eprintln!("      [--query <texto>] [--ingest] [--catalog <archivo>] [--store <dir>]");
+    eprintln!("  (--here fuerza la app WASI a correr local en vez de en shuma)");
+}
+
+/// Traduce los argumentos a un [`LaunchSpec`] resuelto y verificado. El modo se
+/// decide por la presencia de `--hash`: con él, resolución completa contra el
+/// CAS; sin él, el primer argumento es un `.wasm` local de sólo-UI.
+fn resolver_spec(args: impl Iterator<Item = String>) -> Result<LaunchSpec, String> {
+    let mut args = args.peekable();
+
+    let mut hash_hex: Option<String> = None;
+    let mut grant_hex: Option<String> = None;
+    let mut store_dir: Option<String> = None;
+    let mut ring_path: Option<String> = None;
+    let mut name: Option<String> = None;
+    let mut path: Option<String> = None;
+
+    while let Some(arg) = args.next() {
+        match arg.as_str() {
+            "--hash" => hash_hex = Some(next_val(&mut args, "--hash")?),
+            "--grant" => grant_hex = Some(next_val(&mut args, "--grant")?),
+            "--store" => store_dir = Some(next_val(&mut args, "--store")?),
+            "--ring" => ring_path = Some(next_val(&mut args, "--ring")?),
+            "--name" => name = Some(next_val(&mut args, "--name")?),
+            // Lo agrega la delegación a shuma; aquí sólo significa "corre local".
+            "--here" => {}
+            "-h" | "--help" => return Err("ayuda".into()),
+            otro if otro.starts_with("--") => {
+                return Err(format!("opción desconocida: {otro}"))
+            }
+            otro => path = Some(otro.to_string()),
+        }
+    }
+
+    match hash_hex {
+        // Modo distribución: hash → CAS → verificar → permisos efectivos.
+        Some(hex) => {
+            // Sin `--store` cae al CAS de blobs por defecto del escritorio
+            // (XDG cache), para que el chasis pueda spawnearnos con sólo el hash.
+            let store_dir = store_dir.unwrap_or_else(cas_por_defecto);
+            let store = DiskStore::open(&store_dir)
+                .map_err(|e| format!("abrir CAS {store_dir}: {e}"))?;
+
+            let trust = match &ring_path {
+                Some(p) => TrustRing::load(p).map_err(|e| format!("anillo {p}: {e}"))?,
+                None => TrustRing::empty(),
+            };
+
+            let bytecode = hash_from_hex(&hex).map_err(|e| format!("--hash inválido: {e}"))?;
+            let concesion = match &grant_hex {
+                Some(g) => Some(hash_from_hex(g).map_err(|e| format!("--grant inválido: {e}"))?),
+                None => None,
+            };
+            // Con concesión declaramos MAX y dejamos que la intersección con lo
+            // concedido fije los efectivos (honrar el grant completo); sin ella,
+            // app de sólo-UI (fail-closed, permisos = 0).
+            let declarados = if concesion.is_some() {
+                Permisos::MAX
+            } else {
+                0
+            };
+            let manifest = AppManifest {
+                bytecode,
+                declarados,
+                concesion,
+            };
+
+            let app = llimphi_wasm_dist::resolve_manifest(&store, &trust, &manifest)
+                .map_err(|e| format!("resolver app: {e}"))?;
+            // Para una app Tier 3 instanciamos una vez aquí para fallar temprano
+            // con un mensaje claro (un guest que importe una capacidad no
+            // concedida trap-ea al instanciar); el `WasmGuest` no cruza de hilo,
+            // así que init lo recarga. Una app WASI no se instancia con el
+            // runner Tier 3 (otro ABI) — la valida/corre `correr()`.
+            if llimphi_wasm_wasi::detect_kind(&app.wasm) != llimphi_wasm_wasi::WasmKind::WasiConsole
+            {
+                app.load().map_err(|e| format!("instanciar app: {e}"))?;
+            }
+            Ok(LaunchSpec {
+                wasm: app.wasm,
+                permisos: app.permisos,
+                title: name.unwrap_or_else(|| short_hex(&hex)),
+            })
+        }
+        // Modo local: un .wasm de sólo-UI, sin verificación ni permisos.
+        None => {
+            let path = path.ok_or("falta el archivo .wasm o --hash")?;
+            let wasm = std::fs::read(&path).map_err(|e| format!("leer {path}: {e}"))?;
+            let title = name.unwrap_or_else(|| nombre_archivo(&path));
+            Ok(LaunchSpec {
+                wasm,
+                permisos: 0,
+                title,
+            })
+        }
+    }
+}
+
+fn next_val(
+    args: &mut std::iter::Peekable<impl Iterator<Item = String>>,
+    flag: &str,
+) -> Result<String, String> {
+    args.next().ok_or_else(|| format!("{flag} requiere un valor"))
+}
+
+/// Publica una app WASM en el escritorio: mete el bytecode (y, si se da, la
+/// concesión) en el CAS local y escribe un manifiesto `<id>.toml` en el
+/// directorio de apps, para que el dock/spotlight la descubran y la lancen por
+/// la ruta de hash. Es el lado productor del lazo de distribución —
+/// el inverso de [`resolver_spec`] modo hash. Devuelve un resumen legible.
+fn instalar(args: impl Iterator<Item = String>) -> Result<String, String> {
+    let mut args = args.peekable();
+    let mut wasm_path: Option<String> = None;
+    let mut id: Option<String> = None;
+    let mut name: Option<String> = None;
+    let mut grant_file: Option<String> = None;
+    let mut icon: Option<String> = None;
+    let mut category: Option<String> = None;
+    let mut store_dir: Option<String> = None;
+    let mut apps_dir: Option<String> = None;
+    let mut desc: Option<String> = None;
+    let mut catalog_path: Option<String> = None;
+
+    while let Some(arg) = args.next() {
+        match arg.as_str() {
+            "--install" => wasm_path = Some(next_val(&mut args, "--install")?),
+            "--id" => id = Some(next_val(&mut args, "--id")?),
+            "--name" => name = Some(next_val(&mut args, "--name")?),
+            "--desc" => desc = Some(next_val(&mut args, "--desc")?),
+            "--grant" => grant_file = Some(next_val(&mut args, "--grant")?),
+            "--icon" => icon = Some(next_val(&mut args, "--icon")?),
+            "--category" => category = Some(next_val(&mut args, "--category")?),
+            "--store" => store_dir = Some(next_val(&mut args, "--store")?),
+            "--apps-dir" => apps_dir = Some(next_val(&mut args, "--apps-dir")?),
+            "--catalog" => catalog_path = Some(next_val(&mut args, "--catalog")?),
+            otro if otro.starts_with("--") => {
+                return Err(format!("opción desconocida: {otro}"))
+            }
+            otro => wasm_path = Some(otro.to_string()),
+        }
+    }
+
+    let wasm_path = wasm_path.ok_or("--install requiere la ruta del .wasm")?;
+    let id = id.ok_or("--install requiere --id <id> (nombre del manifiesto)")?;
+    let wasm = std::fs::read(&wasm_path).map_err(|e| format!("leer {wasm_path}: {e}"))?;
+
+    let store_dir = store_dir.unwrap_or_else(cas_por_defecto);
+    let store = DiskStore::open(&store_dir).map_err(|e| format!("abrir CAS {store_dir}: {e}"))?;
+
+    // El bytecode entra al CAS direccionado por su hash (idéntico al que el
+    // modo hash pedirá para correrlo).
+    let bytecode = store.put(&wasm).map_err(|e| format!("guardar bytecode: {e}"))?;
+    let bytecode_hex = hash_to_hex(&bytecode);
+
+    // Si hay concesión, su blob entra también; el manifiesto la referencia por
+    // hash (descubrimiento de concesiones, no inline).
+    let grant_obj = match &grant_file {
+        Some(path) => {
+            let blob = std::fs::read(path).map_err(|e| format!("leer concesión {path}: {e}"))?;
+            let grant = ConcesionCapacidad::deserializar(&blob)
+                .map_err(|_| format!("la concesión {path} no deserializa"))?;
+            if grant.bytecode != bytecode {
+                return Err("la concesión es para otro bytecode".into());
+            }
+            let h = store
+                .put_grant(&grant)
+                .map_err(|e| format!("guardar concesión: {e}"))?;
+            Some(h)
+        }
+        None => None,
+    };
+    let grant_hex = grant_obj.as_ref().map(hash_to_hex);
+    // Con concesión declaramos MAX (efectivos = MAX & concedidos = concedidos);
+    // sin ella, app de sólo-UI.
+    let declarados = if grant_obj.is_some() { Permisos::MAX } else { 0 };
+
+    let label = name.unwrap_or_else(|| id.clone());
+    let entry = app_bus::AppEntry {
+        id: id.clone(),
+        label: label.clone(),
+        icon,
+        category: category.clone(),
+        launch: app_bus::Launch::Wasm {
+            bytecode_hex: bytecode_hex.clone(),
+            grant_hex: grant_hex.clone(),
+        },
+        handles: Vec::new(),
+    };
+    let toml = app_bus::entry_to_toml(&entry).map_err(|e| format!("serializar manifiesto: {e}"))?;
+
+    let apps_dir = match apps_dir {
+        Some(d) => std::path::PathBuf::from(d),
+        None => app_bus::apps_dir()
+            .ok_or("no se pudo ubicar el directorio de apps (~/.config/tawasuyu/apps)")?,
+    };
+    std::fs::create_dir_all(&apps_dir)
+        .map_err(|e| format!("crear {}: {e}", apps_dir.display()))?;
+    let manifest_path = apps_dir.join(format!("{id}.toml"));
+    std::fs::write(&manifest_path, &toml)
+        .map_err(|e| format!("escribir {}: {e}", manifest_path.display()))?;
+
+    // Si se pidió, publicar también en el catálogo buscable: el índice
+    // content-addressed que hace `--search`/`--run` posibles (y que viaja por la
+    // malla como un blob más).
+    let catalog_línea = match catalog_path {
+        Some(path) => {
+            let mut catalog = cargar_catalogo(&path)?;
+            catalog.upsert(CatalogEntry {
+                id: id.clone(),
+                name: label,
+                description: desc.unwrap_or_default(),
+                category,
+                bytecode,
+                declarados,
+                concesion: grant_obj,
+            });
+            if let Some(parent) = std::path::Path::new(&path).parent() {
+                std::fs::create_dir_all(parent)
+                    .map_err(|e| format!("crear {}: {e}", parent.display()))?;
+            }
+            std::fs::write(&path, catalog.serializar())
+                .map_err(|e| format!("escribir catálogo {path}: {e}"))?;
+            format!("\n  catálogo: {path} ({} apps)", catalog.entries.len())
+        }
+        None => String::new(),
+    };
+
+    let grant_línea = grant_hex
+        .map(|h| format!("\n  concesión: {h}"))
+        .unwrap_or_default();
+    Ok(format!(
+        "instalada «{id}» en {}\n  bytecode: {bytecode_hex}{grant_línea}\n  CAS: {store_dir}{catalog_línea}",
+        manifest_path.display()
+    ))
+}
+
+/// El CAS de blobs por defecto del escritorio: `$XDG_CACHE_HOME/llimphi/blobs`
+/// (o `~/.cache/llimphi/blobs`). Es la convención que el chasis (dock,
+/// spotlight, mirada) asume al spawnearnos con sólo `--hash`.
+fn cas_por_defecto() -> String {
+    let base = std::env::var("XDG_CACHE_HOME")
+        .ok()
+        .filter(|s| !s.is_empty())
+        .or_else(|| std::env::var("HOME").ok().map(|h| format!("{h}/.cache")))
+        .unwrap_or_else(|| ".".to_string());
+    format!("{base}/llimphi/blobs")
+}
+
+/// El catálogo de apps por defecto del escritorio:
+/// `$XDG_CONFIG_HOME/tawasuyu/catalog.bin` (o `~/.config/tawasuyu/catalog.bin`).
+fn catalogo_por_defecto() -> String {
+    let base = std::env::var("XDG_CONFIG_HOME")
+        .ok()
+        .filter(|s| !s.is_empty())
+        .or_else(|| std::env::var("HOME").ok().map(|h| format!("{h}/.config")))
+        .unwrap_or_else(|| ".".to_string());
+    format!("{base}/tawasuyu/catalog.bin")
+}
+
+/// Carga el catálogo del archivo (o el de por defecto). Un archivo ausente es un
+/// catálogo vacío (todavía no se publicó nada); uno corrupto es error.
+fn cargar_catalogo(path: &str) -> Result<Catalog, String> {
+    match std::fs::read(path) {
+        Ok(bytes) => Catalog::deserializar(&bytes)
+            .map_err(|_| format!("el catálogo {path} está corrupto")),
+        Err(e) if e.kind() == std::io::ErrorKind::NotFound => Ok(Catalog::default()),
+        Err(e) => Err(format!("leer catálogo {path}: {e}")),
+    }
+}
+
+/// Modo búsqueda: lista o filtra las apps del catálogo por texto. Devuelve el
+/// listado formateado (id, nombre, categoría, hash corto, marca de permisos).
+fn buscar(args: impl Iterator<Item = String>) -> Result<String, String> {
+    let mut args = args.peekable();
+    let mut query: Option<String> = None;
+    let mut catalog_path: Option<String> = None;
+    while let Some(arg) = args.next() {
+        match arg.as_str() {
+            "--search" => query = Some(next_val(&mut args, "--search")?),
+            "--list" => {}
+            "--catalog" => catalog_path = Some(next_val(&mut args, "--catalog")?),
+            otro if otro.starts_with("--") => {
+                return Err(format!("opción desconocida: {otro}"))
+            }
+            otro => query = Some(otro.to_string()),
+        }
+    }
+    let path = catalog_path.unwrap_or_else(catalogo_por_defecto);
+    let catalog = cargar_catalogo(&path)?;
+    let q = query.unwrap_or_default();
+    let hits = catalog.search(&q);
+    if hits.is_empty() {
+        return Ok(if catalog.entries.is_empty() {
+            format!("catálogo vacío ({path}) — publica apps con --install --catalog")
+        } else {
+            format!("sin coincidencias para «{q}» en {path}")
+        });
+    }
+    let mut out = format!("{} app(s) en {path}:\n", hits.len());
+    for e in hits {
+        let cat = e.category.as_deref().unwrap_or("—");
+        let permisos = if e.concesion.is_some() { " ⚷" } else { "" };
+        out.push_str(&format!(
+            "  {:<14} {:<22} [{}]  {}{}\n",
+            e.id,
+            e.name,
+            cat,
+            &hash_to_hex(&e.bytecode)[..12],
+            permisos,
+        ));
+    }
+    Ok(out.trim_end().to_string())
+}
+
+/// Modo registro: conecta a un registro de apps (REST en RON, o un directorio
+/// local) y lista/busca; con `--ingest`, descarga los módulos que coincidan al
+/// CAS y los suma al catálogo local (para luego `--run`). El transporte se elige
+/// por la instancia: `http(s)://…` ⇒ red real; cualquier otra cosa ⇒ filesystem.
+fn registro(args: impl Iterator<Item = String>) -> Result<String, String> {
+    use llimphi_wasm_registry::{LocalFetch, RegistryDescriptor, RegistryProvider, UreqFetch};
+
+    let mut args = args.peekable();
+    let mut descriptor_path: Option<String> = None;
+    let mut instance: Option<String> = None;
+    let mut query: Option<String> = None;
+    let mut ingest = false;
+    let mut catalog_path: Option<String> = None;
+    let mut store_dir: Option<String> = None;
+    while let Some(arg) = args.next() {
+        match arg.as_str() {
+            "--registry" => descriptor_path = Some(next_val(&mut args, "--registry")?),
+            "--instance" => instance = Some(next_val(&mut args, "--instance")?),
+            "--query" | "--search" => query = Some(next_val(&mut args, "--query")?),
+            "--ingest" => ingest = true,
+            "--catalog" => catalog_path = Some(next_val(&mut args, "--catalog")?),
+            "--store" => store_dir = Some(next_val(&mut args, "--store")?),
+            otro if otro.starts_with("--") => {
+                return Err(format!("opción desconocida: {otro}"))
+            }
+            _ => {}
+        }
+    }
+
+    let descriptor_path = descriptor_path.ok_or("--registry requiere el archivo .ron")?;
+    let ron = std::fs::read_to_string(&descriptor_path)
+        .map_err(|e| format!("leer descriptor {descriptor_path}: {e}"))?;
+    let descriptor =
+        RegistryDescriptor::from_ron(&ron).map_err(|e| format!("descriptor: {e}"))?;
+    let base = instance.unwrap_or_default();
+    let es_http = base.starts_with("http://") || base.starts_with("https://");
+    let q = query.unwrap_or_default();
+
+    // El listado y la ingesta son idénticos sea cual sea el transporte; sólo
+    // cambia el fetcher. Una pequeña función genérica evita duplicar la lógica.
+    fn operar<F: llimphi_wasm_registry::HttpFetch>(
+        provider: RegistryProvider<F>,
+        q: &str,
+        ingest: bool,
+        catalog_path: Option<String>,
+        store_dir: Option<String>,
+    ) -> Result<String, String> {
+        let apps = provider.list(q).map_err(|e| format!("listar: {e}"))?;
+        let hits: Vec<_> = apps.into_iter().filter(|a| a.matches(q)).collect();
+        if hits.is_empty() {
+            return Ok(format!("sin apps para «{q}» en el registro"));
+        }
+        if !ingest {
+            let mut out = format!("{} app(s) en el registro:\n", hits.len());
+            for a in &hits {
+                let cat = a.category.as_deref().unwrap_or("—");
+                out.push_str(&format!("  {:<16} {:<24} [{}]  {}\n", a.id, a.name, cat, a.wasm_url));
+            }
+            out.push_str("  (usa --ingest para bajarlas al catálogo local)");
+            return Ok(out);
+        }
+        // Ingesta: descargar cada módulo al CAS y sumarlo al catálogo local.
+        let store_dir = store_dir.unwrap_or_else(cas_por_defecto);
+        let store = DiskStore::open(&store_dir).map_err(|e| format!("abrir CAS {store_dir}: {e}"))?;
+        let cat_path = catalog_path.unwrap_or_else(catalogo_por_defecto);
+        let mut catalog = cargar_catalogo(&cat_path)?;
+        let mut n = 0;
+        for a in &hits {
+            let entry = provider
+                .ingest(a, &store)
+                .map_err(|e| format!("ingerir «{}»: {e}", a.id))?;
+            catalog.upsert(entry);
+            n += 1;
+        }
+        if let Some(parent) = std::path::Path::new(&cat_path).parent() {
+            std::fs::create_dir_all(parent).map_err(|e| format!("crear {}: {e}", parent.display()))?;
+        }
+        std::fs::write(&cat_path, catalog.serializar())
+            .map_err(|e| format!("escribir catálogo {cat_path}: {e}"))?;
+        Ok(format!(
+            "ingeridas {n} app(s) al catálogo {cat_path} ({} en total)\n  CAS: {store_dir}",
+            catalog.entries.len()
+        ))
+    }
+
+    if es_http {
+        operar(RegistryProvider::<UreqFetch>::new(descriptor, base), &q, ingest, catalog_path, store_dir)
+    } else {
+        // Sin instancia http: tratamos `base` (o el dir del descriptor) como un
+        // registro local en disco.
+        let root = if base.is_empty() {
+            std::path::Path::new(&descriptor_path)
+                .parent()
+                .map(|p| p.to_string_lossy().to_string())
+                .unwrap_or_else(|| ".".into())
+        } else {
+            base.clone()
+        };
+        let provider = RegistryProvider::with_fetch(descriptor, root.clone(), LocalFetch::new(&root));
+        operar(provider, &q, ingest, catalog_path, store_dir)
+    }
+}
+
+/// Modo correr-por-id: resuelve una app del catálogo por su `id` (trae bytecode
+/// + concesión del CAS, verifica) y produce el [`LaunchSpec`] para abrirla.
+fn spec_desde_catalogo(args: impl Iterator<Item = String>) -> Result<LaunchSpec, String> {
+    let mut args = args.peekable();
+    let mut id: Option<String> = None;
+    let mut catalog_path: Option<String> = None;
+    let mut store_dir: Option<String> = None;
+    let mut ring_path: Option<String> = None;
+    while let Some(arg) = args.next() {
+        match arg.as_str() {
+            "--run" => id = Some(next_val(&mut args, "--run")?),
+            "--catalog" => catalog_path = Some(next_val(&mut args, "--catalog")?),
+            "--store" => store_dir = Some(next_val(&mut args, "--store")?),
+            "--ring" => ring_path = Some(next_val(&mut args, "--ring")?),
+            "--here" => {}
+            otro if otro.starts_with("--") => {
+                return Err(format!("opción desconocida: {otro}"))
+            }
+            otro => id = Some(otro.to_string()),
+        }
+    }
+    let id = id.ok_or("--run requiere el id de la app")?;
+    let path = catalog_path.unwrap_or_else(catalogo_por_defecto);
+    let catalog = cargar_catalogo(&path)?;
+    let entry = catalog
+        .get(&id)
+        .ok_or_else(|| format!("«{id}» no está en el catálogo {path}"))?;
+    let title = entry.name.clone();
+
+    let store_dir = store_dir.unwrap_or_else(cas_por_defecto);
+    let store = DiskStore::open(&store_dir).map_err(|e| format!("abrir CAS {store_dir}: {e}"))?;
+    let trust = match &ring_path {
+        Some(p) => TrustRing::load(p).map_err(|e| format!("anillo {p}: {e}"))?,
+        None => TrustRing::empty(),
+    };
+    let app = resolve_from_catalog(&store, &trust, &catalog, &id)
+        .map_err(|e| format!("resolver «{id}»: {e}"))?;
+    Ok(LaunchSpec {
+        wasm: app.wasm,
+        permisos: app.permisos,
+        title,
+    })
+}
+
+/// Los primeros 8 caracteres del hex, para un título legible.
+fn short_hex(hex: &str) -> String {
+    format!("wasm:{}", &hex[..hex.len().min(8)])
+}
+
+/// El nombre de archivo sin directorio ni extensión, para el título.
+fn nombre_archivo(path: &str) -> String {
+    std::path::Path::new(path)
+        .file_stem()
+        .and_then(|s| s.to_str())
+        .unwrap_or("wasm")
+        .to_string()
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use llimphi_wasm_dist::{hash_to_hex, DiskStore};
+
+    /// El counter Tier 3 ya compilado y versionado por build-wasm-demo.sh.
+    const COUNTER_WASM: &[u8] =
+        include_bytes!("../../llimphi-wasm-runner/assets/counter.wasm");
+
+    fn args(v: &[&str]) -> impl Iterator<Item = String> {
+        v.iter().map(|s| s.to_string()).collect::<Vec<_>>().into_iter()
+    }
+
+    /// Un CAS temporal único para este proceso de test.
+    fn cas_temporal(sufijo: &str) -> std::path::PathBuf {
+        let dir = std::env::temp_dir()
+            .join(format!("llimphi-wasm-open-{}-{sufijo}", std::process::id()));
+        let _ = std::fs::remove_dir_all(&dir);
+        std::fs::create_dir_all(&dir).unwrap();
+        dir
+    }
+
+    #[test]
+    fn modo_hash_resuelve_desde_el_cas() {
+        let dir = cas_temporal("hash");
+        let store = DiskStore::open(&dir).unwrap();
+        let hash = store.put(COUNTER_WASM).unwrap();
+        let hex = hash_to_hex(&hash);
+
+        let spec = resolver_spec(args(&[
+            "--hash",
+            &hex,
+            "--store",
+            dir.to_str().unwrap(),
+        ]))
+        .expect("resolver por hash");
+
+        // Sin concesión ⇒ sólo-UI (fail-closed) y los bytes son los del counter.
+        assert_eq!(spec.permisos, 0);
+        assert_eq!(spec.wasm, COUNTER_WASM);
+        // El guest verificado realmente instancia.
+        WasmGuest::load(&spec.wasm, spec.permisos).expect("instanciar counter");
+
+        std::fs::remove_dir_all(&dir).ok();
+    }
+
+    #[test]
+    fn hash_que_no_esta_en_el_cas_falla() {
+        let dir = cas_temporal("ausente");
+        // Un hash válido en forma pero no presente en el CAS.
+        let hex = "00".repeat(32);
+        let err = resolver_spec(args(&["--hash", &hex, "--store", dir.to_str().unwrap()]))
+            .unwrap_err();
+        assert!(err.contains("resolver app"), "mensaje real: {err}");
+        std::fs::remove_dir_all(&dir).ok();
+    }
+
+    #[test]
+    fn modo_local_carga_un_wasm_de_archivo() {
+        let dir = cas_temporal("local");
+        let path = dir.join("counter.wasm");
+        std::fs::write(&path, COUNTER_WASM).unwrap();
+
+        let spec =
+            resolver_spec(args(&[path.to_str().unwrap()])).expect("cargar .wasm local");
+        assert_eq!(spec.permisos, 0);
+        assert_eq!(spec.wasm, COUNTER_WASM);
+        assert_eq!(spec.title, "counter");
+        std::fs::remove_dir_all(&dir).ok();
+    }
+
+    #[test]
+    fn cas_por_defecto_honra_xdg_cache_home() {
+        // Camino que el chasis asume al spawnearnos con sólo el hash.
+        let prev = std::env::var("XDG_CACHE_HOME").ok();
+        std::env::set_var("XDG_CACHE_HOME", "/tmp/xdgtest");
+        assert_eq!(cas_por_defecto(), "/tmp/xdgtest/llimphi/blobs");
+        match prev {
+            Some(v) => std::env::set_var("XDG_CACHE_HOME", v),
+            None => std::env::remove_var("XDG_CACHE_HOME"),
+        }
+    }
+
+    #[test]
+    fn opcion_desconocida_es_error() {
+        let err = resolver_spec(args(&["--vuela"])).unwrap_err();
+        assert!(err.contains("desconocida"), "mensaje real: {err}");
+    }
+
+    #[test]
+    fn install_publica_y_se_puede_lanzar() {
+        let dir = cas_temporal("install");
+        let cas = dir.join("blobs");
+        let apps = dir.join("apps");
+        let wasm_path = dir.join("counter.wasm");
+        std::fs::write(&wasm_path, COUNTER_WASM).unwrap();
+
+        // Lado productor: publica la app (blob al CAS + manifiesto).
+        let resumen = instalar(args(&[
+            "--install",
+            wasm_path.to_str().unwrap(),
+            "--id",
+            "counter",
+            "--name",
+            "Counter",
+            "--store",
+            cas.to_str().unwrap(),
+            "--apps-dir",
+            apps.to_str().unwrap(),
+        ]))
+        .expect("instalar");
+        assert!(resumen.contains("instalada «counter»"), "resumen: {resumen}");
+
+        // El manifiesto existe y el registro lo descubre como un Launch::Wasm.
+        let toml = std::fs::read_to_string(apps.join("counter.toml")).unwrap();
+        let parsed = app_bus::parse_entry(&toml).expect("re-parsea el manifiesto");
+        assert_eq!(parsed.id, "counter");
+        assert_eq!(parsed.label, "Counter");
+        let bytecode_hex = match &parsed.launch {
+            app_bus::Launch::Wasm { bytecode_hex, grant_hex } => {
+                assert!(grant_hex.is_none(), "sin concesión");
+                bytecode_hex.clone()
+            }
+            otro => panic!("se esperaba Launch::Wasm, vino {otro:?}"),
+        };
+
+        // Lado consumidor: el mismo hash resuelve desde el CAS y carga.
+        let spec = resolver_spec(args(&[
+            "--hash",
+            &bytecode_hex,
+            "--store",
+            cas.to_str().unwrap(),
+        ]))
+        .expect("lanzar lo instalado");
+        assert_eq!(spec.wasm, COUNTER_WASM);
+        WasmGuest::load(&spec.wasm, spec.permisos).expect("instanciar counter instalado");
+
+        std::fs::remove_dir_all(&dir).ok();
+    }
+
+    #[test]
+    fn catalogo_publica_busca_y_corre_por_id() {
+        let dir = cas_temporal("catalogo");
+        let cas = dir.join("blobs");
+        let apps = dir.join("apps");
+        let catalogo = dir.join("catalog.bin");
+        let wasm_path = dir.join("counter.wasm");
+        std::fs::write(&wasm_path, COUNTER_WASM).unwrap();
+
+        // Publicar al catálogo (--catalog).
+        let resumen = instalar(args(&[
+            "--install",
+            wasm_path.to_str().unwrap(),
+            "--id",
+            "counter",
+            "--name",
+            "Contador",
+            "--desc",
+            "suma y resta un número",
+            "--category",
+            "demo",
+            "--store",
+            cas.to_str().unwrap(),
+            "--apps-dir",
+            apps.to_str().unwrap(),
+            "--catalog",
+            catalogo.to_str().unwrap(),
+        ]))
+        .expect("instalar+publicar");
+        assert!(resumen.contains("catálogo"), "resumen: {resumen}");
+
+        // Buscar por texto encuentra la app.
+        let listado = buscar(args(&[
+            "--search",
+            "resta",
+            "--catalog",
+            catalogo.to_str().unwrap(),
+        ]))
+        .expect("buscar");
+        assert!(listado.contains("counter"), "listado: {listado}");
+        assert!(listado.contains("Contador"), "listado: {listado}");
+
+        // Una búsqueda que no matchea.
+        let vacio = buscar(args(&["--search", "zzz", "--catalog", catalogo.to_str().unwrap()]))
+            .expect("buscar vacío");
+        assert!(vacio.contains("sin coincidencias"), "vacío: {vacio}");
+
+        // Correr por id resuelve desde el catálogo + CAS y produce el spec.
+        let spec = spec_desde_catalogo(args(&[
+            "--run",
+            "counter",
+            "--catalog",
+            catalogo.to_str().unwrap(),
+            "--store",
+            cas.to_str().unwrap(),
+        ]))
+        .expect("correr por id");
+        assert_eq!(spec.wasm, COUNTER_WASM);
+        assert_eq!(spec.title, "Contador");
+        WasmGuest::load(&spec.wasm, spec.permisos).expect("instanciar lo elegido");
+
+        // Re-publicar (upsert) no duplica.
+        instalar(args(&[
+            "--install",
+            wasm_path.to_str().unwrap(),
+            "--id",
+            "counter",
+            "--name",
+            "Contador v2",
+            "--store",
+            cas.to_str().unwrap(),
+            "--apps-dir",
+            apps.to_str().unwrap(),
+            "--catalog",
+            catalogo.to_str().unwrap(),
+        ]))
+        .expect("re-publicar");
+        let cat = Catalog::deserializar(&std::fs::read(&catalogo).unwrap()).unwrap();
+        assert_eq!(cat.entries.len(), 1, "upsert por id, no duplica");
+        assert_eq!(cat.get("counter").unwrap().name, "Contador v2");
+
+        // Un id ausente del catálogo es error.
+        assert!(spec_desde_catalogo(args(&[
+            "--run",
+            "fantasma",
+            "--catalog",
+            catalogo.to_str().unwrap(),
+        ]))
+        .is_err());
+
+        std::fs::remove_dir_all(&dir).ok();
+    }
+
+    #[test]
+    fn comando_para_shuma_envuelve_la_invocacion() {
+        let cmd = comando_para_shuma(
+            "/usr/bin/llimphi-wasm-open",
+            &["--run".into(), "hello".into(), "--store".into(), "/cas".into()],
+        );
+        assert_eq!(
+            cmd,
+            vec![
+                "-e",
+                "/usr/bin/llimphi-wasm-open",
+                "--run",
+                "hello",
+                "--store",
+                "/cas",
+                "--here",
+            ]
+        );
+        // `--here` al final ⇒ el re-lanzamiento corre local (no re-delega).
+        assert_eq!(cmd.last().unwrap(), "--here");
+    }
+
+    #[test]
+    fn here_es_aceptado_por_los_parsers() {
+        // Que `--here` no rompa el parseo (lo agrega la delegación a shuma).
+        let dir = cas_temporal("here");
+        let store = DiskStore::open(&dir).unwrap();
+        let hash = store.put(COUNTER_WASM).unwrap();
+        let spec = resolver_spec(args(&[
+            "--hash",
+            &hash_to_hex(&hash),
+            "--store",
+            dir.to_str().unwrap(),
+            "--here",
+        ]))
+        .expect("--here no rompe resolver_spec");
+        assert_eq!(spec.wasm, COUNTER_WASM);
+        std::fs::remove_dir_all(&dir).ok();
+    }
+
+    #[test]
+    fn app_wasi_se_resuelve_y_se_detecta_como_consola() {
+        use llimphi_wasm_wasi::{detect_kind, run_console, WasmKind};
+
+        // Un módulo WASI mínimo (escribe "ok" y sale 0), compilado de WAT.
+        let wasm = wat::parse_str(
+            r#"(module
+              (import "wasi_snapshot_preview1" "fd_write"
+                (func $w (param i32 i32 i32 i32) (result i32)))
+              (import "wasi_snapshot_preview1" "proc_exit" (func $e (param i32)))
+              (memory (export "memory") 1)
+              (data (i32.const 8) "ok")
+              (func (export "_start")
+                (i32.store (i32.const 0) (i32.const 8))
+                (i32.store (i32.const 4) (i32.const 2))
+                (drop (call $w (i32.const 1) (i32.const 0) (i32.const 1) (i32.const 20)))
+                (call $e (i32.const 0))))"#,
+        )
+        .unwrap();
+
+        // Entra al CAS y se resuelve por hash como cualquier app.
+        let dir = cas_temporal("wasi");
+        let store = DiskStore::open(&dir).unwrap();
+        let hash = store.put(&wasm).unwrap();
+        let spec = resolver_spec(args(&[
+            "--hash",
+            &hash_to_hex(&hash),
+            "--store",
+            dir.to_str().unwrap(),
+        ]))
+        .expect("resolver WASI por hash");
+
+        // El launcher la reconocería como consola (no UI) y la correría.
+        assert_eq!(detect_kind(&spec.wasm), WasmKind::WasiConsole);
+        let out = run_console(&spec.wasm, &[], &[], &[]).unwrap();
+        assert_eq!(out.stdout_text(), "ok");
+        assert_eq!(out.exit_code, 0);
+
+        std::fs::remove_dir_all(&dir).ok();
+    }
+
+    #[test]
+    fn registro_local_lista_ingiere_y_queda_corrible() {
+        // Registro local offline (un dir con apps.json + .wasm) → listar →
+        // ingerir al catálogo → correr por id. Todo sin red.
+        let dir = cas_temporal("registro");
+        std::fs::write(dir.join("counter.wasm"), COUNTER_WASM).unwrap();
+        std::fs::write(
+            dir.join("apps.json"),
+            r#"{"results":[{"slug":"counter","title":"Contador","summary":"demo offline","tags":["demo"],"download":{"wasm":"counter.wasm"}}]}"#,
+        )
+        .unwrap();
+        let ron = dir.join("reg.ron");
+        std::fs::write(
+            &ron,
+            "#![enable(implicit_some)]\n(name:\"local\",list:(path:\"/apps.json\",list_path:\"results\",fields:(id:\"slug\",name:\"title\",wasm_url:\"download.wasm\",description:\"summary\",category:\"tags.0\")))",
+        )
+        .unwrap();
+        let cas = dir.join("blobs");
+        let catalogo = dir.join("catalog.bin");
+
+        // Listar (sin --ingest) describe la app sin bajarla.
+        let listado = registro(args(&[
+            "--registry",
+            ron.to_str().unwrap(),
+            "--instance",
+            dir.to_str().unwrap(),
+        ]))
+        .expect("listar registro");
+        assert!(listado.contains("counter"), "listado: {listado}");
+        assert!(!cas.exists(), "sin --ingest no baja nada");
+
+        // Ingerir baja al CAS y suma al catálogo local.
+        let res = registro(args(&[
+            "--registry",
+            ron.to_str().unwrap(),
+            "--instance",
+            dir.to_str().unwrap(),
+            "--ingest",
+            "--store",
+            cas.to_str().unwrap(),
+            "--catalog",
+            catalogo.to_str().unwrap(),
+        ]))
+        .expect("ingerir");
+        assert!(res.contains("ingeridas 1"), "res: {res}");
+
+        // Y lo ingerido se corre por id desde el catálogo local.
+        let spec = spec_desde_catalogo(args(&[
+            "--run",
+            "counter",
+            "--catalog",
+            catalogo.to_str().unwrap(),
+            "--store",
+            cas.to_str().unwrap(),
+        ]))
+        .expect("correr lo ingerido");
+        assert_eq!(spec.wasm, COUNTER_WASM);
+        WasmGuest::load(&spec.wasm, spec.permisos).expect("instanciar lo ingerido");
+
+        std::fs::remove_dir_all(&dir).ok();
+    }
+}
diff --git a/llimphi-wasm-registry/Cargo.toml b/llimphi-wasm-registry/Cargo.toml
new file mode 100644
index 0000000..c104f99
--- /dev/null
+++ b/llimphi-wasm-registry/Cargo.toml
@@ -0,0 +1,17 @@
+[package]
+name = "llimphi-wasm-registry"
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+authors.workspace = true
+publish.workspace = true
+description = "llimphi-wasm-registry — puente data-driven a registros públicos de apps WASM. Un descriptor RON describe una API REST (endpoint de listado + mapeo campo→path-JSON) y RegistryProvider la interpreta para producir entradas de catálogo Tier 3: descubrir apps por texto y, al elegir una, descargar su módulo, hashearlo al CAS y volverlo un CatalogEntry resoluble. Mismo patrón que shared/foreign-platform (providers REST en RON), aplicado al ecosistema WASM. Agnóstico: sumar un registro compatible es escribir un .ron, no Rust."
+
+[dependencies]
+# El catálogo y el CAS viven en core (sin GPU); este puente sólo le agrega
+# entradas descubiertas en la red.
+llimphi-wasm-core = { workspace = true }
+serde = { workspace = true }
+serde_json = { workspace = true }
+ron = { workspace = true }
+ureq = { workspace = true }
diff --git a/llimphi-wasm-registry/LEEME.md b/llimphi-wasm-registry/LEEME.md
new file mode 100644
index 0000000..b0d682c
--- /dev/null
+++ b/llimphi-wasm-registry/LEEME.md
@@ -0,0 +1,34 @@
+# llimphi-wasm-registry
+
+*Read this in English: [README.md](README.md).*
+
+Puente data-driven a registros públicos de apps WASM.
+
+El catálogo propio (`llimphi-wasm-core::Catalog`) resuelve el "qué apps hay"
+sobre la malla soberana. Este crate abre la otra puerta: **conectarse a
+registros ya existentes en internet** (wasmer/WAPM, un índice estático, lo
+que sea REST+JSON) de forma agnóstica y configurable, para tener catálogos
+reales con qué probar sin publicar nada primero.
+
+La apuesta es la misma que `shared/foreign-platform` (de donde se copia el
+patrón): un **descriptor RON** describe el endpoint de listado y el mapeo
+campo-de-dominio → path-JSON; sumar un registro compatible es escribir un
+`.ron`, no Rust.
+
+## Honestidad de alcance
+
+Esto trae **metadatos + una URL de descarga** por app, y `ingest` baja el
+módulo y lo vuelve un `CatalogEntry` resoluble (lo hashea al CAS — de ahí
+sale el bytecode-hash, igual que `--install`). Lo que **no** garantiza es
+que el módulo *corra* como app Tier 3: la mayoría del WASM público sigue
+otro ABI (WASI, component-model, wasm-bindgen/DOM), no el `wasm_view →
+WireNode` del runner. Para *probar el pipeline de descubrimiento/descarga*
+sirve cualquiera; para *ejecutar como UI Llimphi* sólo corren los módulos
+compilados contra `llimphi-wasm-app-sdk`. La verificación de integridad y de
+concesión del core sigue valiendo: un módulo bajado de la red se hashea y,
+si pretende capacidades, su concesión debe estar firmada por una clave de tu
+anillo.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../LEEME.md).
diff --git a/llimphi-wasm-registry/README.md b/llimphi-wasm-registry/README.md
new file mode 100644
index 0000000..f495f9b
--- /dev/null
+++ b/llimphi-wasm-registry/README.md
@@ -0,0 +1,24 @@
+# llimphi-wasm-registry
+
+Data-driven bridge to public WASM app registries.
+
+Our own catalog (`llimphi-wasm-core::Catalog`) answers "which apps exist" over the
+sovereign mesh. This crate opens the other door: **connecting to registries that
+already exist on the internet** (wasmer/WAPM, a static index, anything
+REST+JSON) agnostically and configurably, so there are real catalogs to test
+against without publishing anything first.
+
+The bet is the same as `shared/foreign-platform` (whose pattern it copies): a
+**RON descriptor** describes the listing endpoint and the domain-field →
+JSON-path mapping; adding a compatible registry means writing a `.ron`, not Rust.
+
+## Honest scope
+
+This brings **metadata plus a download URL** per app, and `ingest` fetches the
+module and turns it into a resolvable `CatalogEntry` (hashing it into the CAS —
+that is where the bytecode hash comes from, same as `--install`). What it does
+**not** guarantee is that any given module follows the Tier 3 ABI.
+
+---
+
+Part of **llimphi** — see [llimphi](../README.md).
diff --git a/llimphi-wasm-registry/descriptors/local-demo.ron b/llimphi-wasm-registry/descriptors/local-demo.ron
new file mode 100644
index 0000000..671b974
--- /dev/null
+++ b/llimphi-wasm-registry/descriptors/local-demo.ron
@@ -0,0 +1,33 @@
+// =============================================================================
+//  Registro LOCAL de demostración — un "catálogo" offline para probar el flujo
+//  sin depender de internet.
+//
+//  Un registro local es, simplemente, un directorio con:
+//    - un JSON de listado (aquí `apps.json`)
+//    - los `.wasm` referenciados (rutas relativas al directorio)
+//
+//  Úsalo con `--instance <ese-directorio>`: el launcher detecta que no es una
+//  URL http y lee del filesystem (LocalFetch). Sirve para tener "algún catálogo
+//  para probar" reproducible. Para un registro REST real, ver `rest-template.ron`.
+//
+//  Forma esperada de apps.json:
+//    { "results": [
+//        { "slug": "...", "title": "...", "summary": "...",
+//          "tags": ["..."], "download": { "wasm": "archivo.wasm" } } ] }
+// =============================================================================
+#![enable(implicit_some)]
+(
+    name: "demo-local",
+    kind: "local",
+    list: (
+        path: "/apps.json",
+        list_path: "results",
+        fields: (
+            id: "slug",
+            name: "title",
+            wasm_url: "download.wasm",
+            description: "summary",
+            category: "tags.0",
+        ),
+    ),
+)
diff --git a/llimphi-wasm-registry/descriptors/rest-template.ron b/llimphi-wasm-registry/descriptors/rest-template.ron
new file mode 100644
index 0000000..d80efb8
--- /dev/null
+++ b/llimphi-wasm-registry/descriptors/rest-template.ron
@@ -0,0 +1,45 @@
+// =============================================================================
+//  PLANTILLA de registro REST público de apps WASM.
+//
+//  Esto es un MOLDE, no un descriptor verificado contra un endpoint en vivo.
+//  Describe cómo mapear el JSON de un registro REST (un índice de apps en
+//  internet) a entradas de catálogo Tier 3 — sin escribir Rust, sólo ajustando
+//  paths. Apuntalo a un registro real con `--instance https://...` y corregí
+//  los `path`/`fields` al esquema concreto de esa API (mira una respuesta real
+//  con `curl` y ajusta los dotted-paths).
+//
+//  IMPORTANTE (alcance honesto): traer e ingerir un módulo NO garantiza que
+//  corra como app Tier 3 — la mayoría del WASM público sigue otro ABI (WASI,
+//  component-model, wasm-bindgen/DOM), no el `wasm_view → WireNode` del runner.
+//  El pipeline de descubrimiento/descarga/hash es real; la ejecución como UI
+//  Llimphi sólo aplica a módulos compilados contra `llimphi-wasm-app-sdk`.
+//
+//  - `path`      : endpoint de listado, relativo a `--instance`. `{query}` se
+//                  sustituye URL-encodeado.
+//  - `query`     : pares clave→valor del query string (admiten `{query}`).
+//  - `list_path` : dónde vive el array en la respuesta ("" = la raíz es array).
+//  - `fields`    : dotted-path a cada campo dentro de un item del array.
+//                  `id`, `name`, `wasm_url` son obligatorios.
+// =============================================================================
+#![enable(implicit_some)]
+(
+    name: "registro-rest",
+    kind: "rest-generico",
+    default_instances: [
+        // Cambialo por la base real del registro al que apuntes.
+        "https://example.invalid",
+    ],
+    list: (
+        path: "/v1/apps",
+        query: [("q", "{query}"), ("limit", "50")],
+        list_path: "results",
+        fields: (
+            id: "slug",
+            name: "name",
+            wasm_url: "artifacts.wasm.url",
+            description: "description",
+            category: "category",
+            version: "version",
+        ),
+    ),
+)
diff --git a/llimphi-wasm-registry/src/json.rs b/llimphi-wasm-registry/src/json.rs
new file mode 100644
index 0000000..22ea79b
--- /dev/null
+++ b/llimphi-wasm-registry/src/json.rs
@@ -0,0 +1,41 @@
+//! Extractor de **paths con puntos** sobre `serde_json::Value` — lo que deja
+//! que el mapeo campo→JSON viva en un descriptor de texto. Gemelo del de
+//! `shared/foreign-platform`: deliberadamente mínimo (no es JSONPath).
+//!
+//! Sintaxis: segmentos separados por `.`; segmento numérico ⇒ índice de array;
+//! segmento de texto ⇒ clave de objeto; path vacío `""` ⇒ el propio valor.
+
+use serde_json::Value;
+
+/// Navega `root` siguiendo `path`. `None` si algún segmento no existe.
+pub fn get<'a>(root: &'a Value, path: &str) -> Option<&'a Value> {
+    if path.is_empty() {
+        return Some(root);
+    }
+    let mut cur = root;
+    for seg in path.split('.') {
+        cur = match cur {
+            Value::Object(map) => map.get(seg)?,
+            Value::Array(arr) => arr.get(seg.parse::<usize>().ok()?)?,
+            _ => return None,
+        };
+    }
+    Some(cur)
+}
+
+/// Extrae un `String` desde `path` (coerciona número a texto).
+pub fn get_string(root: &Value, path: &str) -> Option<String> {
+    match get(root, path)? {
+        Value::String(s) => Some(s.clone()),
+        Value::Number(n) => Some(n.to_string()),
+        _ => None,
+    }
+}
+
+/// El array que vive en `path`. `""` ⇒ la raíz debe ser un array.
+pub fn get_array<'a>(root: &'a Value, path: &str) -> Option<&'a [Value]> {
+    match get(root, path)? {
+        Value::Array(arr) => Some(arr.as_slice()),
+        _ => None,
+    }
+}
diff --git a/llimphi-wasm-registry/src/lib.rs b/llimphi-wasm-registry/src/lib.rs
new file mode 100644
index 0000000..b51b73f
--- /dev/null
+++ b/llimphi-wasm-registry/src/lib.rs
@@ -0,0 +1,541 @@
+//! llimphi-wasm-registry — puente data-driven a registros públicos de apps WASM.
+//!
+//! El catálogo propio (`llimphi-wasm-core::Catalog`) resuelve el "qué apps hay"
+//! sobre la malla soberana. Este crate abre la otra puerta: **conectarse a
+//! registros ya existentes en internet** (wasmer/WAPM, un índice estático, lo
+//! que sea REST+JSON) de forma agnóstica y configurable, para tener catálogos
+//! reales con qué probar sin publicar nada primero.
+//!
+//! La apuesta es la misma que `shared/foreign-platform` (de donde se copia el
+//! patrón): un **descriptor RON** describe el endpoint de listado y el mapeo
+//! campo-de-dominio → path-JSON; sumar un registro compatible es escribir un
+//! `.ron`, no Rust.
+//!
+//! ## Honestidad de alcance
+//!
+//! Esto trae **metadatos + una URL de descarga** por app, y `ingest` baja el
+//! módulo y lo vuelve un [`CatalogEntry`] resoluble (lo hashea al CAS — de ahí
+//! sale el bytecode-hash, igual que `--install`). Lo que **no** garantiza es
+//! que el módulo *corra* como app Tier 3: la mayoría del WASM público sigue
+//! otro ABI (WASI, component-model, wasm-bindgen/DOM), no el `wasm_view →
+//! WireNode` del runner. Para *probar el pipeline de descubrimiento/descarga*
+//! sirve cualquiera; para *ejecutar como UI Llimphi* sólo corren los módulos
+//! compilados contra `llimphi-wasm-app-sdk`. La verificación de integridad y de
+//! concesión del core sigue valiendo: un módulo bajado de la red se hashea y,
+//! si pretende capacidades, su concesión debe estar firmada por una clave de tu
+//! anillo.
+
+mod json;
+
+use llimphi_wasm_core::{bytecode_hash, hash_to_hex, CatalogEntry, DiskStore, Hash};
+use serde::Deserialize;
+use serde_json::Value;
+
+/// Errores del puente a un registro remoto.
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub enum RegistryError {
+    /// El descriptor RON no parsea.
+    Descriptor(String),
+    /// Falla de red en el GET.
+    Network(String),
+    /// La respuesta no es JSON válido.
+    Parse(String),
+    /// El JSON no tiene la forma que el descriptor espera.
+    Mapping(String),
+    /// No se pudo guardar el módulo bajado en el CAS.
+    Store(String),
+}
+
+impl std::fmt::Display for RegistryError {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            RegistryError::Descriptor(e) => write!(f, "descriptor inválido: {e}"),
+            RegistryError::Network(e) => write!(f, "red: {e}"),
+            RegistryError::Parse(e) => write!(f, "respuesta no-JSON: {e}"),
+            RegistryError::Mapping(e) => write!(f, "mapeo: {e}"),
+            RegistryError::Store(e) => write!(f, "guardar en CAS: {e}"),
+        }
+    }
+}
+
+impl std::error::Error for RegistryError {}
+
+pub type RegistryResult<T> = Result<T, RegistryError>;
+
+// ===========================================================================
+//  Descriptor — el "script de texto" deserializable desde RON
+// ===========================================================================
+
+/// La descripción de un registro REST de apps WASM. Se deserializa de un `.ron`.
+#[derive(Debug, Clone, Deserialize)]
+pub struct RegistryDescriptor {
+    /// Nombre legible ("wasmer", "índice local").
+    pub name: String,
+    /// Familia de API (informativo).
+    #[serde(default)]
+    pub kind: String,
+    /// Instancias base sugeridas (la primera se usa si no se da otra).
+    #[serde(default)]
+    pub default_instances: Vec<String>,
+    /// El endpoint que lista apps.
+    pub list: ListEndpoint,
+}
+
+/// Un endpoint que devuelve una **lista** de apps.
+#[derive(Debug, Clone, Deserialize)]
+pub struct ListEndpoint {
+    /// Path relativo a la instancia. Admite placeholder `{query}` (URL-encode).
+    pub path: String,
+    /// Query string clave→valor; los valores admiten `{query}`.
+    #[serde(default)]
+    pub query: Vec<(String, String)>,
+    /// Dónde vive el array en la respuesta. `""` ⇒ la raíz ES el array.
+    #[serde(default)]
+    pub list_path: String,
+    /// Cómo mapear cada item del array a una [`RemoteApp`].
+    pub fields: AppFields,
+}
+
+/// Mapeo campo-de-dominio → path-JSON. `id`, `name` y `wasm_url` son
+/// obligatorios (sin la URL no hay nada que ingerir); el resto opcional.
+#[derive(Debug, Clone, Deserialize)]
+pub struct AppFields {
+    pub id: String,
+    pub name: String,
+    /// Path a la URL de descarga del `.wasm`.
+    pub wasm_url: String,
+    #[serde(default)]
+    pub description: Option<String>,
+    #[serde(default)]
+    pub category: Option<String>,
+    #[serde(default)]
+    pub version: Option<String>,
+}
+
+impl RegistryDescriptor {
+    /// Parsea un descriptor desde texto RON.
+    pub fn from_ron(src: &str) -> RegistryResult<Self> {
+        ron::from_str(src).map_err(|e| RegistryError::Descriptor(e.to_string()))
+    }
+}
+
+/// Una app **descubierta** en un registro remoto: metadatos + URL de descarga.
+/// Todavía no está en el CAS (no tiene bytecode-hash) — eso lo hace [`ingest`].
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct RemoteApp {
+    pub id: String,
+    pub name: String,
+    pub description: String,
+    pub category: Option<String>,
+    pub version: Option<String>,
+    pub wasm_url: String,
+}
+
+impl RemoteApp {
+    /// ¿La consulta (sin distinguir mayúsculas) aparece en id/nombre/desc?
+    pub fn matches(&self, query: &str) -> bool {
+        if query.is_empty() {
+            return true;
+        }
+        let q = query.to_lowercase();
+        self.id.to_lowercase().contains(&q)
+            || self.name.to_lowercase().contains(&q)
+            || self.description.to_lowercase().contains(&q)
+    }
+}
+
+// ===========================================================================
+//  Transporte HTTP — abstracto para testear sin red
+// ===========================================================================
+
+/// Abstracción del fetch HTTP. La real es [`UreqFetch`]; los tests inyectan una
+/// que devuelve fixtures, así el mapeo se valida en CI sin red (igual criterio
+/// que `foreign-platform` y el resto de los núcleos del repo).
+pub trait HttpFetch {
+    /// GET de una URL completa → texto del cuerpo.
+    fn get_text(&self, url: &str) -> RegistryResult<String>;
+    /// GET de una URL completa → bytes crudos (para bajar el `.wasm`).
+    fn get_bytes(&self, url: &str) -> RegistryResult<Vec<u8>>;
+}
+
+/// Fetch real sobre `ureq` (HTTP síncrono, sin tokio).
+#[derive(Debug, Clone, Default)]
+pub struct UreqFetch;
+
+impl HttpFetch for UreqFetch {
+    fn get_text(&self, url: &str) -> RegistryResult<String> {
+        ureq::get(url)
+            .call()
+            .map_err(|e| RegistryError::Network(e.to_string()))?
+            .into_string()
+            .map_err(|e| RegistryError::Network(e.to_string()))
+    }
+
+    fn get_bytes(&self, url: &str) -> RegistryResult<Vec<u8>> {
+        let resp = ureq::get(url)
+            .call()
+            .map_err(|e| RegistryError::Network(e.to_string()))?;
+        let mut buf = Vec::new();
+        std::io::Read::read_to_end(&mut resp.into_reader(), &mut buf)
+            .map_err(|e| RegistryError::Network(e.to_string()))?;
+        Ok(buf)
+    }
+}
+
+/// Fetch desde el **filesystem local**: un "registro" que es un directorio con
+/// un JSON de listado y los `.wasm`. No es red — sirve para un catálogo de
+/// prueba reproducible y offline, y para tests. `root` es la base; una URL
+/// absoluta se lee tal cual, una relativa se une a `root`.
+#[derive(Debug, Clone)]
+pub struct LocalFetch {
+    pub root: std::path::PathBuf,
+}
+
+impl LocalFetch {
+    pub fn new(root: impl Into<std::path::PathBuf>) -> Self {
+        Self { root: root.into() }
+    }
+
+    fn resolve(&self, url: &str) -> std::path::PathBuf {
+        let url = url.strip_prefix("file://").unwrap_or(url);
+        let p = std::path::Path::new(url);
+        if p.is_absolute() {
+            p.to_path_buf()
+        } else {
+            self.root.join(url)
+        }
+    }
+}
+
+impl HttpFetch for LocalFetch {
+    fn get_text(&self, url: &str) -> RegistryResult<String> {
+        std::fs::read_to_string(self.resolve(url)).map_err(|e| RegistryError::Network(e.to_string()))
+    }
+    fn get_bytes(&self, url: &str) -> RegistryResult<Vec<u8>> {
+        std::fs::read(self.resolve(url)).map_err(|e| RegistryError::Network(e.to_string()))
+    }
+}
+
+// ===========================================================================
+//  RegistryProvider — interpreta el descriptor sobre una instancia concreta
+// ===========================================================================
+
+/// Un registro concreto: un descriptor + una instancia base + un fetcher.
+/// Genérico sobre el fetcher para inyectar fixtures en tests.
+#[derive(Debug, Clone)]
+pub struct RegistryProvider<F: HttpFetch = UreqFetch> {
+    descriptor: RegistryDescriptor,
+    base: String,
+    fetch: F,
+}
+
+impl RegistryProvider<UreqFetch> {
+    /// Construye sobre la instancia `base` (red real). `base` vacío ⇒ primera
+    /// `default_instances` del descriptor.
+    pub fn new(descriptor: RegistryDescriptor, base: impl Into<String>) -> Self {
+        Self::with_fetch(descriptor, base, UreqFetch)
+    }
+}
+
+impl<F: HttpFetch> RegistryProvider<F> {
+    /// Construye con un fetcher explícito (tests).
+    pub fn with_fetch(descriptor: RegistryDescriptor, base: impl Into<String>, fetch: F) -> Self {
+        let mut base = base.into();
+        if base.is_empty() {
+            base = descriptor
+                .default_instances
+                .first()
+                .cloned()
+                .unwrap_or_default();
+        }
+        let base = base.trim_end_matches('/').to_string();
+        Self { descriptor, base, fetch }
+    }
+
+    fn fill(tpl: &str, query: &str) -> String {
+        tpl.replace("{query}", &url_encode(query))
+    }
+
+    fn list_url(&self, query: &str) -> String {
+        let ep = &self.descriptor.list;
+        let mut url = format!("{}{}", self.base, Self::fill(&ep.path, query));
+        if !ep.query.is_empty() {
+            let qs: Vec<String> = ep
+                .query
+                .iter()
+                .map(|(k, v)| format!("{}={}", url_encode(k), Self::fill(v, query)))
+                .collect();
+            url.push('?');
+            url.push_str(&qs.join("&"));
+        }
+        url
+    }
+
+    /// Lista las apps del registro (filtrando por `query` server-side vía el
+    /// placeholder, y devolviendo lo que el endpoint dé). Mapea cada item según
+    /// el descriptor; un item al que le falten campos obligatorios se descarta
+    /// (no tumba la página entera).
+    pub fn list(&self, query: &str) -> RegistryResult<Vec<RemoteApp>> {
+        let url = self.list_url(query);
+        let body = self.fetch.get_text(&url)?;
+        let value: Value =
+            serde_json::from_str(&body).map_err(|e| RegistryError::Parse(e.to_string()))?;
+        let ep = &self.descriptor.list;
+        let arr = json::get_array(&value, &ep.list_path).ok_or_else(|| {
+            RegistryError::Mapping(format!("no hay array en «{}»", ep.list_path))
+        })?;
+        Ok(arr.iter().filter_map(|item| map_app(item, &ep.fields)).collect())
+    }
+
+    /// Descarga el módulo de una [`RemoteApp`], lo guarda en `store` (lo hashea
+    /// — content-addressing) y devuelve un [`CatalogEntry`] resoluble. App de
+    /// sólo-UI: `declarados = 0`, sin concesión (una capacidad exigiría una
+    /// concesión firmada aparte). Es el puente registro-remoto → catálogo local.
+    pub fn ingest(&self, app: &RemoteApp, store: &DiskStore) -> RegistryResult<CatalogEntry> {
+        let bytes = self.fetch.get_bytes(&app.wasm_url)?;
+        let bytecode = store.put(&bytes).map_err(|e| RegistryError::Store(e.to_string()))?;
+        Ok(CatalogEntry {
+            id: app.id.clone(),
+            name: app.name.clone(),
+            description: app.description.clone(),
+            category: app.category.clone(),
+            bytecode,
+            declarados: 0,
+            concesion: None,
+        })
+    }
+}
+
+/// El bytecode-hash que tendría una app si se ingiriera (sin guardar). Útil
+/// para mostrar/cotejar antes de descargar al CAS definitivo.
+pub fn hash_de(bytes: &[u8]) -> Hash {
+    bytecode_hash(bytes)
+}
+
+/// Conveniencia: el hex del hash de unos bytes ya descargados.
+pub fn hash_hex_de(bytes: &[u8]) -> String {
+    hash_to_hex(&bytecode_hash(bytes))
+}
+
+fn map_app(item: &Value, f: &AppFields) -> Option<RemoteApp> {
+    let id = json::get_string(item, &f.id)?;
+    let name = json::get_string(item, &f.name)?;
+    let wasm_url = json::get_string(item, &f.wasm_url)?;
+    Some(RemoteApp {
+        id,
+        name,
+        description: f
+            .description
+            .as_deref()
+            .and_then(|p| json::get_string(item, p))
+            .unwrap_or_default(),
+        category: f.category.as_deref().and_then(|p| json::get_string(item, p)),
+        version: f.version.as_deref().and_then(|p| json::get_string(item, p)),
+        wasm_url,
+    })
+}
+
+/// URL-encode mínimo (gemelo del de `foreign-platform`): deja a-zA-Z0-9-_.~ y
+/// percent-codea el resto. Suficiente para queries de búsqueda.
+fn url_encode(s: &str) -> String {
+    let mut out = String::with_capacity(s.len());
+    for b in s.bytes() {
+        match b {
+            b'a'..=b'z' | b'A'..=b'Z' | b'0'..=b'9' | b'-' | b'_' | b'.' | b'~' => {
+                out.push(b as char)
+            }
+            b' ' => out.push_str("%20"),
+            _ => out.push_str(&format!("%{b:02X}")),
+        }
+    }
+    out
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    const DESCRIPTOR_RON: &str = r#"#![enable(implicit_some)]
+    (
+        name: "ejemplo",
+        kind: "rest-generico",
+        default_instances: ["https://apps.example"],
+        list: (
+            path: "/v1/apps",
+            query: [("q", "{query}"), ("limit", "20")],
+            list_path: "results",
+            fields: (
+                id: "slug",
+                name: "title",
+                wasm_url: "download.wasm",
+                description: "summary",
+                category: "tags.0",
+            ),
+        ),
+    )"#;
+
+    /// Una respuesta JSON con la forma que el descriptor espera.
+    fn cuerpo_lista() -> String {
+        r#"{
+            "results": [
+                {
+                    "slug": "counter",
+                    "title": "Contador",
+                    "summary": "suma y resta",
+                    "tags": ["demo", "ui"],
+                    "download": { "wasm": "https://apps.example/blobs/counter.wasm" }
+                },
+                {
+                    "slug": "roto",
+                    "title": "Sin URL"
+                }
+            ]
+        }"#
+        .to_string()
+    }
+
+    /// Fetcher de fixtures: texto canónico para el listado; bytes arbitrarios
+    /// (el counter real lo inyecta el test de ingest) para la descarga.
+    struct MockFetch {
+        body: String,
+        wasm: Vec<u8>,
+    }
+    impl HttpFetch for MockFetch {
+        fn get_text(&self, _url: &str) -> RegistryResult<String> {
+            Ok(self.body.clone())
+        }
+        fn get_bytes(&self, _url: &str) -> RegistryResult<Vec<u8>> {
+            Ok(self.wasm.clone())
+        }
+    }
+
+    fn provider(wasm: Vec<u8>) -> RegistryProvider<MockFetch> {
+        let desc = RegistryDescriptor::from_ron(DESCRIPTOR_RON).expect("descriptor parsea");
+        RegistryProvider::with_fetch(
+            desc,
+            "",
+            MockFetch {
+                body: cuerpo_lista(),
+                wasm,
+            },
+        )
+    }
+
+    #[test]
+    fn descriptor_ron_parsea() {
+        let d = RegistryDescriptor::from_ron(DESCRIPTOR_RON).unwrap();
+        assert_eq!(d.name, "ejemplo");
+        assert_eq!(d.list.path, "/v1/apps");
+        assert_eq!(d.list.fields.id, "slug");
+    }
+
+    #[test]
+    fn list_mapea_e_ignora_items_rotos() {
+        let p = provider(vec![]);
+        let apps = p.list("cont").unwrap();
+        // El item sin URL se descarta; queda el counter.
+        assert_eq!(apps.len(), 1);
+        let a = &apps[0];
+        assert_eq!(a.id, "counter");
+        assert_eq!(a.name, "Contador");
+        assert_eq!(a.description, "suma y resta");
+        assert_eq!(a.category.as_deref(), Some("demo"));
+        assert_eq!(a.wasm_url, "https://apps.example/blobs/counter.wasm");
+    }
+
+    #[test]
+    fn url_se_arma_con_query_y_encode() {
+        let p = provider(vec![]);
+        let url = p.list_url("hola mundo");
+        assert_eq!(url, "https://apps.example/v1/apps?q=hola%20mundo&limit=20");
+    }
+
+    #[test]
+    fn matches_busca_en_metadatos() {
+        let p = provider(vec![]);
+        let a = &p.list("").unwrap()[0];
+        assert!(a.matches("CONT"));
+        assert!(a.matches("suma"));
+        assert!(!a.matches("zzz"));
+        assert!(a.matches("")); // vacío = todo
+    }
+
+    /// El counter Tier 3 real — el "módulo bajado del registro".
+    const COUNTER_WASM: &[u8] =
+        include_bytes!("../../llimphi-wasm-runner/assets/counter.wasm");
+
+    #[test]
+    fn ingest_baja_hashea_y_da_catalog_entry() {
+        use llimphi_wasm_core::{bytecode_hash, Catalog};
+
+        let p = provider(COUNTER_WASM.to_vec());
+        let app = p.list("").unwrap().into_iter().next().unwrap();
+
+        let dir = std::env::temp_dir()
+            .join(format!("llimphi-wasm-registry-{}", std::process::id()));
+        let _ = std::fs::remove_dir_all(&dir);
+        let store = DiskStore::open(&dir).unwrap();
+
+        let entry = p.ingest(&app, &store).expect("ingerir");
+        // El bytecode-hash es el del módulo bajado, content-addressed.
+        assert_eq!(entry.bytecode, bytecode_hash(COUNTER_WASM));
+        assert_eq!(entry.id, "counter");
+        assert!(entry.concesion.is_none(), "sólo-UI por defecto");
+        // Y el blob quedó en el CAS: armamos un catálogo y se resuelve por id.
+        assert_eq!(store.get(&entry.bytecode).as_deref(), Some(COUNTER_WASM));
+        let cat = Catalog::new(vec![entry]);
+        let v = llimphi_wasm_core::resolve_from_catalog(
+            &store,
+            &llimphi_wasm_core::TrustRing::empty(),
+            &cat,
+            "counter",
+        )
+        .expect("resuelve lo ingerido");
+        assert_eq!(v.permisos, 0);
+        assert_eq!(v.wasm, COUNTER_WASM);
+
+        std::fs::remove_dir_all(&dir).ok();
+    }
+
+    #[test]
+    fn registro_local_offline_lista_e_ingiere() {
+        // Un "registro" que es un directorio con apps.json + el .wasm. Sin red:
+        // el catálogo de prueba reproducible que pidió el usuario.
+        let dir = std::env::temp_dir()
+            .join(format!("llimphi-wasm-registry-local-{}", std::process::id()));
+        let _ = std::fs::remove_dir_all(&dir);
+        std::fs::create_dir_all(&dir).unwrap();
+        std::fs::write(dir.join("counter.wasm"), COUNTER_WASM).unwrap();
+        std::fs::write(
+            dir.join("apps.json"),
+            r#"{"results":[{"slug":"counter","title":"Contador","summary":"demo local","tags":["demo"],"download":{"wasm":"counter.wasm"}}]}"#,
+        )
+        .unwrap();
+
+        // Descriptor local: path directo al JSON, sin query (no es una URL real).
+        let local_ron = r#"#![enable(implicit_some)]
+        (
+            name: "local",
+            list: (
+                path: "/apps.json",
+                list_path: "results",
+                fields: (id: "slug", name: "title", wasm_url: "download.wasm",
+                         description: "summary", category: "tags.0"),
+            ),
+        )"#;
+        let desc = RegistryDescriptor::from_ron(local_ron).unwrap();
+        let provider = RegistryProvider::with_fetch(desc, dir.to_str().unwrap(), LocalFetch::new(&dir));
+
+        let apps = provider.list("").unwrap();
+        assert_eq!(apps.len(), 1);
+        assert_eq!(apps[0].wasm_url, "counter.wasm");
+
+        let cas = dir.join("cas");
+        let store = DiskStore::open(&cas).unwrap();
+        let entry = provider.ingest(&apps[0], &store).unwrap();
+        assert_eq!(entry.bytecode, llimphi_wasm_core::bytecode_hash(COUNTER_WASM));
+        assert_eq!(store.get(&entry.bytecode).as_deref(), Some(COUNTER_WASM));
+
+        std::fs::remove_dir_all(&dir).ok();
+    }
+}
diff --git a/llimphi-wasm-runner/Cargo.toml b/llimphi-wasm-runner/Cargo.toml
new file mode 100644
index 0000000..6226211
--- /dev/null
+++ b/llimphi-wasm-runner/Cargo.toml
@@ -0,0 +1,28 @@
+[package]
+name = "llimphi-wasm-runner"
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+authors.workspace = true
+publish.workspace = true
+description = "llimphi-wasm-runner — lado host de las apps WASM Tier 3 de Llimphi. Carga un .wasm guest (ABI de llimphi-wasm-app-sdk), corre su bucle Elm sobre wasmi: llama wasm_view, deserializa el WireNode y lo materializa en un View<Msg> Llimphi real; rutea cada click de vuelta a wasm_dispatch y refresca la vista. Es la pieza que faltaba para correr apps WASM servidas/distribuidas dentro de una ventana Llimphi en Linux — el gemelo host del ejecutor de apps de wawa."
+
+[dependencies]
+llimphi-ui = { workspace = true }
+llimphi-wire-view = { workspace = true }
+kikin-wasmi = { path = "../../../shared/kikin/kikin-wasmi" }
+wasmi = { workspace = true }
+postcard = { workspace = true }
+# Permisos: el mismo bitfield que firma una ConcesionCapacidad, para gatear
+# qué host imports se enlazan (frontera física, espejo host del kernel wawa).
+format = { path = "../../../shared/format" }
+
+[dev-dependencies]
+# El fixture .wasm del counter se compila aparte (scripts/build-wasm-demo.sh)
+# y se versiona en assets/; el test lo carga con include_bytes!.
+# `wat` compila en runtime el módulo-fixture que prueba el gateo por permiso,
+# sin depender del toolchain wasm32 (igual criterio que llimphi-plugin-host).
+wat = { workspace = true }
+# Los tests de render construyen WireNode/WireRadio a mano y los materializan
+# con wire_to_view, sin un .wasm guest de por medio.
+llimphi-wire-view = { workspace = true }
diff --git a/llimphi-wasm-runner/LEEME.md b/llimphi-wasm-runner/LEEME.md
new file mode 100644
index 0000000..c235906
--- /dev/null
+++ b/llimphi-wasm-runner/LEEME.md
@@ -0,0 +1,28 @@
+# llimphi-wasm-runner
+
+*Read this in English: [README.md](README.md).*
+
+Lado host de las apps WASM Tier 3.
+
+`WasmGuest` carga un `.wasm` que sigue el ABI de `llimphi-wasm-app-sdk`,
+lo instancia con wasmi y corre su bucle Elm:
+
+1. `wasm_init` construye el `Model` del guest (vive en la instancia).
+2. `wasm_view` devuelve un `WireNode` serializado; lo deserializamos y lo
+   cacheamos.
+3. `wire_to_view` lo materializa en un `View<RunnerMsg>` Llimphi real.
+4. Un click emite `RunnerMsg::Guest(bytes)`; `WasmGuest::dispatch` rebota
+   esos bytes a `wasm_dispatch` y refresca la vista.
+
+El host mantiene un único `Store` vivo por app, así el `Model` persiste
+entre frames — exactamente el contrato Elm de Llimphi, sólo que la
+transición corre del otro lado de la frontera WASM.
+
+Es el gemelo, del lado Linux, del ejecutor de apps WASM de wawa
+(`sys_render_frame` + caps por frontera física): el mismo espíritu de
+"abrir apps servidas/distribuidas", pero pintando con Llimphi en vez de un
+framebuffer crudo.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../LEEME.md).
diff --git a/llimphi-wasm-runner/README.md b/llimphi-wasm-runner/README.md
new file mode 100644
index 0000000..eb8aca4
--- /dev/null
+++ b/llimphi-wasm-runner/README.md
@@ -0,0 +1,23 @@
+# llimphi-wasm-runner
+
+The host side of Tier 3 WASM apps.
+
+`WasmGuest` loads a `.wasm` following the `llimphi-wasm-app-sdk` ABI, instantiates
+it with wasmi and runs its Elm loop:
+
+1. `wasm_init` builds the guest's `Model` (it lives in the instance).
+2. `wasm_view` returns a serialized `WireNode`; we deserialize and cache it.
+3. `wire_to_view` materializes it into a real Llimphi `View<RunnerMsg>`.
+4. A click emits `RunnerMsg::Guest(bytes)`; `WasmGuest::dispatch` bounces those
+   bytes back to `wasm_dispatch` and refreshes the view.
+
+The host keeps a single live `Store` per app, so the `Model` persists between
+frames — exactly Llimphi's Elm contract, only with the transition running on the
+other side of the WASM boundary.
+
+It is the Linux-side twin of wawa's WASM app executor (`sys_render_frame` +
+capabilities by physical boundary): the same spirit, another host.
+
+---
+
+Part of **llimphi** — see [llimphi](../README.md).
diff --git a/llimphi-wasm-runner/assets/counter.wasm b/llimphi-wasm-runner/assets/counter.wasm
new file mode 100755
index 0000000..8b2c415
Binary files /dev/null and b/llimphi-wasm-runner/assets/counter.wasm differ
diff --git a/llimphi-wasm-runner/assets/form.wasm b/llimphi-wasm-runner/assets/form.wasm
new file mode 100755
index 0000000..85e6453
Binary files /dev/null and b/llimphi-wasm-runner/assets/form.wasm differ
diff --git a/llimphi-wasm-runner/examples/run_counter.rs b/llimphi-wasm-runner/examples/run_counter.rs
new file mode 100644
index 0000000..2cb21a3
--- /dev/null
+++ b/llimphi-wasm-runner/examples/run_counter.rs
@@ -0,0 +1,51 @@
+//! Corre una app WASM Tier 3 dentro de una ventana Llimphi real.
+//!
+//! El `.wasm` está embebido (compilado por `scripts/build-wasm-demo.sh`). El
+//! host no sabe nada de la app: pide `wasm_view`, materializa el `WireNode`,
+//! rebota clicks y rutea el teclado al input enfocado. Toda la lógica vive del
+//! lado guest.
+//!
+//! `cargo run -p llimphi-wasm-runner --example run_counter --release`
+
+use llimphi_ui::{App, Handle, KeyEvent, View};
+use llimphi_wasm_runner::{RunnerMsg, WasmGuest};
+
+const COUNTER_WASM: &[u8] = include_bytes!("../assets/counter.wasm");
+
+struct Host;
+
+impl App for Host {
+    type Model = WasmGuest;
+    type Msg = RunnerMsg;
+
+    fn title() -> &'static str {
+        "llimphi · wasm runner — counter"
+    }
+
+    fn init(_: &Handle<Self::Msg>) -> Self::Model {
+        WasmGuest::load(COUNTER_WASM, 0).expect("cargar counter.wasm")
+    }
+
+    fn update(mut model: Self::Model, msg: Self::Msg, _: &Handle<Self::Msg>) -> Self::Model {
+        if let Err(e) = model.apply(&msg) {
+            eprintln!("wasm dispatch: {e}");
+        }
+        model
+    }
+
+    fn view(model: &Self::Model) -> View<Self::Msg> {
+        model.render()
+    }
+
+    fn on_key(model: &Self::Model, event: &KeyEvent) -> Option<Self::Msg> {
+        model.key_to_msg(event)
+    }
+
+    fn on_focus(_model: &Self::Model, id: Option<u64>) -> Option<Self::Msg> {
+        Some(WasmGuest::focus_msg(id))
+    }
+}
+
+fn main() {
+    llimphi_ui::run::<Host>();
+}
diff --git a/llimphi-wasm-runner/examples/run_form.rs b/llimphi-wasm-runner/examples/run_form.rs
new file mode 100644
index 0000000..71337db
--- /dev/null
+++ b/llimphi-wasm-runner/examples/run_form.rs
@@ -0,0 +1,48 @@
+//! Corre la app WASM Tier 3 `form` (campo de texto + checkbox + saludo) en una
+//! ventana Llimphi. Clickea el campo para enfocarlo y teclea: el host rutea las
+//! teclas como eventos `Text` al guest, que es la fuente de verdad del texto.
+//!
+//! `cargo run -p llimphi-wasm-runner --example run_form --release`
+
+use llimphi_ui::{App, Handle, KeyEvent, View};
+use llimphi_wasm_runner::{RunnerMsg, WasmGuest};
+
+const FORM_WASM: &[u8] = include_bytes!("../assets/form.wasm");
+
+struct Host;
+
+impl App for Host {
+    type Model = WasmGuest;
+    type Msg = RunnerMsg;
+
+    fn title() -> &'static str {
+        "llimphi · wasm runner — form"
+    }
+
+    fn init(_: &Handle<Self::Msg>) -> Self::Model {
+        WasmGuest::load(FORM_WASM, 0).expect("cargar form.wasm")
+    }
+
+    fn update(mut model: Self::Model, msg: Self::Msg, _: &Handle<Self::Msg>) -> Self::Model {
+        if let Err(e) = model.apply(&msg) {
+            eprintln!("wasm dispatch: {e}");
+        }
+        model
+    }
+
+    fn view(model: &Self::Model) -> View<Self::Msg> {
+        model.render()
+    }
+
+    fn on_key(model: &Self::Model, event: &KeyEvent) -> Option<Self::Msg> {
+        model.key_to_msg(event)
+    }
+
+    fn on_focus(_model: &Self::Model, id: Option<u64>) -> Option<Self::Msg> {
+        Some(WasmGuest::focus_msg(id))
+    }
+}
+
+fn main() {
+    llimphi_ui::run::<Host>();
+}
diff --git a/llimphi-wasm-runner/src/lib.rs b/llimphi-wasm-runner/src/lib.rs
new file mode 100644
index 0000000..bf73f06
--- /dev/null
+++ b/llimphi-wasm-runner/src/lib.rs
@@ -0,0 +1,558 @@
+//! llimphi-wasm-runner — lado host de las apps WASM Tier 3.
+//!
+//! [`WasmGuest`] carga un `.wasm` que sigue el ABI de `llimphi-wasm-app-sdk`,
+//! lo instancia con wasmi y corre su bucle Elm:
+//!
+//! 1. `wasm_init` construye el `Model` del guest (vive en la instancia).
+//! 2. `wasm_view` devuelve un [`WireNode`] serializado; lo deserializamos y lo
+//!    cacheamos.
+//! 3. [`wire_to_view`] lo materializa en un `View<RunnerMsg>` Llimphi real.
+//! 4. Un click emite `RunnerMsg::Guest(bytes)`; [`WasmGuest::dispatch`] rebota
+//!    esos bytes a `wasm_dispatch` y refresca la vista.
+//!
+//! El host mantiene un único `Store` vivo por app, así el `Model` persiste
+//! entre frames — exactamente el contrato Elm de Llimphi, sólo que la
+//! transición corre del otro lado de la frontera WASM.
+//!
+//! Es el gemelo, del lado Linux, del ejecutor de apps WASM de wawa
+//! (`sys_render_frame` + caps por frontera física): el mismo espíritu de
+//! "abrir apps servidas/distribuidas", pero pintando con Llimphi en vez de un
+//! framebuffer crudo.
+
+use llimphi_ui::llimphi_layout::taffy::{
+    prelude::{length, percent, Dimension, FlexDirection, Rect, Size, Style},
+    AlignItems, JustifyContent,
+};
+use llimphi_ui::llimphi_raster::peniko::Color;
+use llimphi_ui::{Key, KeyEvent, KeyState, NamedKey, View};
+use llimphi_wire_view::{Align, Dim, Dir, Justify, TextAlign, WireInput, WireNode};
+use kikin_wasmi::{Concesion, Reja, Requiere};
+use wasmi::{Caller, CompilationMode, Config, Engine, Linker, Memory, Module, Store, TypedFunc};
+
+pub use format::Permisos;
+pub use llimphi_wire_view::{EventId, EventPayload};
+
+/// Mensaje del host. Un evento lleva el `EventId` del control y su `EventPayload`
+/// (Click/Text/Toggle); el host los rebota a `wasm_dispatch` y el guest
+/// reconstruye su `Msg`. `Focus` cambia el input enfocado (no cruza la frontera).
+#[derive(Clone, Debug)]
+pub enum RunnerMsg {
+    /// Evento de un control: id del handler + payload.
+    Event(EventId, EventPayload),
+    /// El foco de teclado pasó a este input (o a ninguno).
+    Focus(Option<EventId>),
+    /// Abrir/cerrar el dropdown con este `on_select` id (estado host-side).
+    ToggleSelect(EventId),
+}
+
+/// Una app WASM guest cargada y viva. Mantén una por app: el `Model` del guest
+/// reside en su instancia y persiste entre `dispatch`.
+pub struct WasmGuest {
+    store: Store<()>,
+    memory: Memory,
+    f_view: TypedFunc<(), u64>,
+    f_alloc: TypedFunc<u32, u32>,
+    f_dispatch: TypedFunc<(u32, u32, u32), ()>,
+    f_free: TypedFunc<(u32, u32), ()>,
+    /// Última vista decodificada — el host la materializa cada frame sin volver
+    /// a cruzar la frontera salvo tras un `dispatch`.
+    view: WireNode,
+    /// Input con el foco de teclado (su `on_input` EventId), si hay alguno.
+    focused: Option<EventId>,
+    /// Dropdown abierto (su `on_select` EventId), si hay alguno.
+    open_select: Option<EventId>,
+}
+
+impl WasmGuest {
+    /// Instancia el `.wasm` y corre `wasm_init` + el primer `wasm_view`.
+    ///
+    /// `permisos` es el bitfield efectivo (típicamente
+    /// `format::permisos_efectivos(declarados, concedidos)` que calcula
+    /// `llimphi-wasm-dist` tras verificar la concesión Ed25519). Gatea qué host
+    /// imports se enlazan: si el bit falta, la función no se registra y un guest
+    /// que la importe **trap-ea al instanciar** — frontera física, no tabla.
+    pub fn load(wasm_bytes: &[u8], permisos: Permisos) -> Result<Self, String> {
+        // Eager: los traps de compilación salen aquí, no en pleno frame. Igual
+        // criterio que llimphi-plugin-host y el kernel de wawa.
+        let mut config = Config::default();
+        config.compilation_mode(CompilationMode::Eager);
+        let engine = Engine::new(&config);
+        let module = Module::new(&engine, wasm_bytes).map_err(|e| format!("compilar wasm: {e}"))?;
+        let mut store = Store::new(&engine, ());
+        // Una app Tier 3 pura (sólo UI) no importa nada; las capacidades (red…)
+        // se enlazan aquí sólo si el permiso correspondiente está concedido.
+        let linker = build_linker(&engine, permisos)?;
+        let instance = linker
+            .instantiate_and_start(&mut store, &module)
+            .map_err(|e| format!("instanciar wasm: {e}"))?;
+
+        let memory = instance
+            .get_memory(&store, "memory")
+            .ok_or("el guest no exporta `memory`")?;
+        let f_init = instance
+            .get_typed_func::<(), ()>(&store, "wasm_init")
+            .map_err(|e| format!("export `wasm_init`: {e}"))?;
+        let f_view = instance
+            .get_typed_func::<(), u64>(&store, "wasm_view")
+            .map_err(|e| format!("export `wasm_view`: {e}"))?;
+        let f_alloc = instance
+            .get_typed_func::<u32, u32>(&store, "wasm_alloc")
+            .map_err(|e| format!("export `wasm_alloc`: {e}"))?;
+        let f_dispatch = instance
+            .get_typed_func::<(u32, u32, u32), ()>(&store, "wasm_dispatch")
+            .map_err(|e| format!("export `wasm_dispatch`: {e}"))?;
+        let f_free = instance
+            .get_typed_func::<(u32, u32), ()>(&store, "wasm_free")
+            .map_err(|e| format!("export `wasm_free`: {e}"))?;
+
+        f_init
+            .call(&mut store, ())
+            .map_err(|e| format!("wasm_init trap: {e}"))?;
+
+        let mut guest = WasmGuest {
+            store,
+            memory,
+            f_view,
+            f_alloc,
+            f_dispatch,
+            f_free,
+            view: WireNode::default(),
+            focused: None,
+            open_select: None,
+        };
+        guest.refresh()?;
+        Ok(guest)
+    }
+
+    /// La última vista decodificada del guest.
+    pub fn view(&self) -> &WireNode {
+        &self.view
+    }
+
+    /// Vuelve a pedir `wasm_view` y decodifica el `WireNode`.
+    fn refresh(&mut self) -> Result<(), String> {
+        let packed = self
+            .f_view
+            .call(&mut self.store, ())
+            .map_err(|e| format!("wasm_view trap: {e}"))?;
+        let ptr = (packed >> 32) as usize;
+        let len = (packed & 0xffff_ffff) as usize;
+        let data = self.memory.data(&self.store);
+        let end = ptr.checked_add(len).ok_or("wasm_view: rango desbordado")?;
+        if end > data.len() {
+            return Err("wasm_view: rango fuera de la memoria del guest".into());
+        }
+        let bytes = data[ptr..end].to_vec();
+        // Soltamos el buffer del guest antes de propagar errores de decodificación.
+        let _ = self.f_free.call(&mut self.store, (ptr as u32, len as u32));
+        self.view = postcard::from_bytes(&bytes).map_err(|e| format!("decodificar WireNode: {e}"))?;
+        Ok(())
+    }
+
+    /// Rebota un evento al guest: serializa el `payload`, lo escribe y corre
+    /// `wasm_dispatch(event_id, ptr, len)`, luego refresca la vista.
+    pub fn dispatch(&mut self, event_id: EventId, payload: EventPayload) -> Result<(), String> {
+        let bytes = postcard::to_allocvec(&payload).map_err(|e| format!("encode payload: {e}"))?;
+        let len = bytes.len() as u32;
+        let ptr = self
+            .f_alloc
+            .call(&mut self.store, len)
+            .map_err(|e| format!("wasm_alloc trap: {e}"))?;
+        self.memory
+            .write(&mut self.store, ptr as usize, &bytes)
+            .map_err(|e| format!("escribir payload: {e}"))?;
+        self.f_dispatch
+            .call(&mut self.store, (event_id, ptr, len))
+            .map_err(|e| format!("wasm_dispatch trap: {e}"))?;
+        self.refresh()
+    }
+
+    /// Aplica un `RunnerMsg`. Conveniencia para el `update` del host.
+    pub fn apply(&mut self, msg: &RunnerMsg) -> Result<(), String> {
+        match msg {
+            RunnerMsg::Event(id, payload) => {
+                // Cualquier evento cierra un dropdown abierto (elegir/clicar = cerrar).
+                self.open_select = None;
+                self.dispatch(*id, payload.clone())
+            }
+            RunnerMsg::Focus(f) => {
+                self.focused = *f;
+                Ok(())
+            }
+            RunnerMsg::ToggleSelect(id) => {
+                self.open_select = if self.open_select == Some(*id) {
+                    None
+                } else {
+                    Some(*id)
+                };
+                Ok(())
+            }
+        }
+    }
+
+    /// El input enfocado actualmente (su `on_input` EventId).
+    pub fn focused(&self) -> Option<EventId> {
+        self.focused
+    }
+
+    /// Traduce un evento de teclado a un `RunnerMsg` para el input enfocado:
+    /// computa "valor actual + tecla → texto nuevo" (Backspace borra el último
+    /// carácter; un carácter se anexa) y emite `Text`. Devuelve `None` si no hay
+    /// foco o la tecla no edita. Modelo value-driven: el guest es la fuente de
+    /// verdad del texto; el host no guarda buffer (cursor siempre al final, MVP).
+    pub fn key_to_msg(&self, event: &KeyEvent) -> Option<RunnerMsg> {
+        if event.state != KeyState::Pressed {
+            return None;
+        }
+        let id = self.focused?;
+        let inp = find_input(&self.view, id)?;
+        let nuevo = edit_value(&inp.value, &event.key, event.text.as_deref(), inp.multiline)?;
+        Some(RunnerMsg::Event(id, EventPayload::Text(nuevo)))
+    }
+
+    /// `RunnerMsg` para fijar el foco (lo usa el `on_focus` del host).
+    pub fn focus_msg(id: Option<u64>) -> RunnerMsg {
+        RunnerMsg::Focus(id.map(|x| x as EventId))
+    }
+
+    /// Materializa la vista cacheada en un `View<RunnerMsg>` Llimphi real.
+    pub fn render(&self) -> View<RunnerMsg> {
+        wire_to_view(&self.view, self.focused, self.open_select)
+    }
+}
+
+/// Computa el texto nuevo de un campo dado el actual y una tecla: Backspace borra
+/// el último carácter; un carácter se anexa; Enter inserta `\n` sólo si el campo
+/// es `multiline` (en uno de una línea no edita); otras teclas no editan
+/// (`None`). Pura — el corazón del modelo value-driven, testeable sin `KeyEvent`.
+pub fn edit_value(actual: &str, key: &Key, text: Option<&str>, multiline: bool) -> Option<String> {
+    match key {
+        Key::Named(NamedKey::Backspace) => {
+            let mut s = actual.to_string();
+            s.pop();
+            Some(s)
+        }
+        Key::Named(NamedKey::Enter) if multiline => Some(format!("{actual}\n")),
+        Key::Character(_) => text.map(|t| format!("{actual}{t}")),
+        _ => None,
+    }
+}
+
+/// Busca el `WireInput` cuyo `on_input` es `id` en el árbol.
+fn find_input(node: &WireNode, id: EventId) -> Option<&WireInput> {
+    if node.on_input == Some(id) {
+        if let Some(inp) = &node.input {
+            return Some(inp);
+        }
+    }
+    node.children.iter().find_map(|c| find_input(c, id))
+}
+
+// Colores por defecto de los controles (el estilo de la caja viene del nodo).
+const INPUT_TEXT: [u8; 4] = [230, 235, 245, 255];
+const INPUT_PLACEHOLDER: [u8; 4] = [120, 130, 145, 255];
+const INPUT_BORDER: [u8; 4] = [80, 90, 110, 255];
+const INPUT_BORDER_FOCUS: [u8; 4] = [90, 160, 230, 255];
+const SLIDER_TRACK: [u8; 4] = [40, 46, 58, 255];
+const SLIDER_FILL: [u8; 4] = [90, 160, 230, 255];
+const SELECT_BG: [u8; 4] = [28, 34, 44, 255];
+const SELECT_ITEM: [u8; 4] = [34, 40, 52, 255];
+const SELECT_SEL: [u8; 4] = [50, 70, 100, 255];
+
+/// Materializa un [`WireNode`] en un `View<RunnerMsg>` Llimphi real,
+/// recursivamente. `focused` = input con el foco; `open_select` = dropdown
+/// abierto (para pintar su lista).
+pub fn wire_to_view(
+    node: &WireNode,
+    focused: Option<EventId>,
+    open_select: Option<EventId>,
+) -> View<RunnerMsg> {
+    let mut style = Style {
+        flex_direction: match node.dir {
+            Dir::Row => FlexDirection::Row,
+            Dir::Column | Dir::Block => FlexDirection::Column,
+        },
+        size: Size {
+            width: dim(node.width),
+            height: dim(node.height),
+        },
+        flex_grow: node.grow,
+        ..Default::default()
+    };
+    if node.gap != 0.0 {
+        style.gap = Size {
+            width: length(node.gap),
+            height: length(node.gap),
+        };
+    }
+    let [pt, pr, pb, pl] = node.padding;
+    style.padding = Rect {
+        top: length(pt),
+        right: length(pr),
+        bottom: length(pb),
+        left: length(pl),
+    };
+    if let Some(a) = node.align {
+        style.align_items = Some(map_align(a));
+    }
+    if let Some(j) = node.justify {
+        style.justify_content = Some(map_justify(j));
+    }
+
+    let mut view = View::new(style);
+    if let Some(fill) = node.fill {
+        view = view.fill(color(fill));
+    }
+    if node.radius != 0.0 {
+        view = view.radius(node.radius as f64);
+    }
+
+    if let Some(inp) = &node.input {
+        // Campo editable: caja focusable que muestra value/placeholder + caret.
+        let id = node.on_input.unwrap_or(0);
+        let is_focused = focused == Some(id);
+        let (shown, col) = display_input(inp, is_focused);
+        let border = if is_focused { INPUT_BORDER_FOCUS } else { INPUT_BORDER };
+        view = view
+            .text(shown, 20.0, color(col))
+            .border(1.5, color(border))
+            .focusable(id as u64)
+            .on_click(RunnerMsg::Focus(Some(id)));
+    } else if let Some(checked) = node.toggle {
+        // Checkbox: glifo clickable que alterna su estado.
+        let id = node.on_toggle.unwrap_or(0);
+        let glyph = if checked { "\u{2611}" } else { "\u{2610}" }; // ☑ / ☐
+        view = view
+            .text(glyph, 24.0, color(INPUT_TEXT))
+            .on_click(RunnerMsg::Event(id, EventPayload::Toggle(!checked)));
+    } else if let Some(sl) = &node.slider {
+        // Slider: track con una barra de relleno proporcional; click-en-x fija
+        // el valor. id/min/max van Copy a la clausura.
+        let id = node.on_value.unwrap_or(0);
+        let (min, max) = (sl.min, sl.max);
+        let frac = if max > min {
+            ((sl.value - min) / (max - min)).clamp(0.0, 1.0)
+        } else {
+            0.0
+        };
+        view = view
+            .fill(color(SLIDER_TRACK))
+            .radius(6.0)
+            .on_click_at(move |lx, _ly, w, _h| {
+                let f = if w > 0.0 { (lx / w).clamp(0.0, 1.0) } else { 0.0 };
+                Some(RunnerMsg::Event(id, EventPayload::Value(min + f * (max - min))))
+            });
+        let bar = View::new(Style {
+            size: Size {
+                width: percent(frac),
+                height: percent(1.0_f32),
+            },
+            ..Default::default()
+        })
+        .fill(color(SLIDER_FILL))
+        .radius(6.0);
+        view = view.children(vec![bar]);
+    } else if let Some(sel) = &node.select {
+        // Dropdown: header con la opción actual + lista inline cuando está abierto.
+        let id = node.on_select.unwrap_or(0);
+        let is_open = open_select == Some(id);
+        let current = sel
+            .options
+            .get(sel.selected as usize)
+            .cloned()
+            .unwrap_or_else(|| "\u{2014}".into()); // —
+        let arrow = if is_open { "\u{25b4}" } else { "\u{25be}" }; // ▴ / ▾
+        let header = item_box(36.0)
+            .fill(color(SELECT_BG))
+            .border(1.0, color(INPUT_BORDER))
+            .text(format!("{current}   {arrow}"), 18.0, color(INPUT_TEXT))
+            .on_click(RunnerMsg::ToggleSelect(id));
+        let mut kids = vec![header];
+        if is_open {
+            for (i, opt) in sel.options.iter().enumerate() {
+                let oid = i as u32;
+                let bg = if oid == sel.selected { SELECT_SEL } else { SELECT_ITEM };
+                kids.push(
+                    item_box(32.0)
+                        .fill(color(bg))
+                        .text(opt.clone(), 18.0, color(INPUT_TEXT))
+                        .on_click(RunnerMsg::Event(id, EventPayload::Select(oid))),
+                );
+            }
+        }
+        view = view.children(kids);
+    } else if let Some(rad) = &node.radio {
+        // Grupo de radio: todas las opciones visibles, la marcada con ◉. Cada
+        // fila emite Select(idx) (mismo payload que el dropdown).
+        let id = node.on_radio.unwrap_or(0);
+        let kids: Vec<View<RunnerMsg>> = rad
+            .options
+            .iter()
+            .enumerate()
+            .map(|(i, opt)| {
+                let oid = i as u32;
+                let marcado = oid == rad.selected;
+                let glyph = if marcado { "\u{25c9}" } else { "\u{25cb}" }; // ◉ / ○
+                let col = if marcado { SLIDER_FILL } else { INPUT_TEXT };
+                item_box(30.0)
+                    .text(format!("{glyph}  {opt}"), 18.0, color(col))
+                    .on_click(RunnerMsg::Event(id, EventPayload::Select(oid)))
+            })
+            .collect();
+        view = view.children(kids);
+    } else {
+        if let Some(t) = &node.text {
+            view = view.text_aligned(
+                t.content.clone(),
+                t.size,
+                color(t.color),
+                map_text_align(t.align),
+            );
+        }
+        if let Some(id) = node.on_click {
+            view = view.on_click(RunnerMsg::Event(id, EventPayload::Click));
+        }
+    }
+
+    if !node.children.is_empty() {
+        view = view.children(
+            node.children
+                .iter()
+                .map(|c| wire_to_view(c, focused, open_select))
+                .collect(),
+        );
+    }
+    view
+}
+
+/// Una caja de fila a `height` px, ancho completo, contenido centrado a la
+/// izquierda con padding — el ladrillo del header/items del dropdown.
+fn item_box(height: f32) -> View<RunnerMsg> {
+    View::new(Style {
+        size: Size {
+            width: percent(1.0_f32),
+            height: length(height),
+        },
+        align_items: Some(AlignItems::Center),
+        padding: Rect {
+            left: length(10.0_f32),
+            right: length(10.0_f32),
+            top: length(0.0_f32),
+            bottom: length(0.0_f32),
+        },
+        ..Default::default()
+    })
+    .radius(6.0)
+}
+
+/// Texto a mostrar en un input y su color: value (o placeholder), enmascarado si
+/// es password, con un caret `│` cuando tiene el foco.
+fn display_input(inp: &WireInput, focused: bool) -> (String, [u8; 4]) {
+    let body = if inp.value.is_empty() {
+        if focused {
+            String::new()
+        } else {
+            return (inp.placeholder.clone(), INPUT_PLACEHOLDER);
+        }
+    } else if inp.password {
+        "\u{25cf}".repeat(inp.value.chars().count()) // ●
+    } else {
+        inp.value.clone()
+    };
+    let shown = if focused { format!("{body}\u{2502}") } else { body }; // │
+    (shown, INPUT_TEXT)
+}
+
+fn dim(d: Dim) -> Dimension {
+    match d {
+        Dim::Auto => Dimension::auto(),
+        Dim::Px(v) => length(v),
+        Dim::Pct(v) => percent(v),
+    }
+}
+
+fn color(c: [u8; 4]) -> Color {
+    Color::from_rgba8(c[0], c[1], c[2], c[3])
+}
+
+fn map_align(a: Align) -> AlignItems {
+    match a {
+        Align::Start => AlignItems::FlexStart,
+        Align::Center => AlignItems::Center,
+        Align::End => AlignItems::FlexEnd,
+        Align::Stretch => AlignItems::Stretch,
+    }
+}
+
+fn map_justify(j: Justify) -> JustifyContent {
+    match j {
+        Justify::Start => JustifyContent::FlexStart,
+        Justify::Center => JustifyContent::Center,
+        Justify::End => JustifyContent::FlexEnd,
+        Justify::SpaceBetween => JustifyContent::SpaceBetween,
+        Justify::SpaceAround => JustifyContent::SpaceAround,
+    }
+}
+
+fn map_text_align(a: TextAlign) -> llimphi_ui::llimphi_text::Alignment {
+    match a {
+        TextAlign::Start => llimphi_ui::llimphi_text::Alignment::Start,
+        TextAlign::Center => llimphi_ui::llimphi_text::Alignment::Center,
+        TextAlign::End => llimphi_ui::llimphi_text::Alignment::End,
+    }
+}
+
+// =====================================================================
+// Host imports — gateados por Permisos (frontera física, espejo host de
+// wawa::wasm::env). Namespace `"tawa"`. Si el bit no está, el import no se
+// enlaza y el guest que lo use trap-ea al instanciar.
+// =====================================================================
+
+/// Construye el linker para un guest con los `permisos` dados. Las funciones
+/// inocuas (log) van siempre; las que tocan recursos se enlazan sólo con su bit.
+///
+/// La DECISIÓN («¿este import se registra?») ya no vive aquí: la toma
+/// `kikin-core`, la misma política que gobierna al kernel de wawa y a los otros
+/// hosts de la suite. Aquí queda sólo lo que es nuestro: el ABI `tawa`.
+pub fn build_linker(engine: &Engine, permisos: Permisos) -> Result<Linker<()>, String> {
+    let mut reja = Reja::<(), Permisos>::nueva(engine, Concesion::nueva(permisos));
+
+    // `host_log` — traza, no toca recursos ajenos. Negarla no protegería nada.
+    reja.si("tawa::host_log", Requiere::Siempre, |l| {
+        l.func_wrap("tawa", "host_log", |caller: Caller<'_, ()>, ptr: i32, len: i32| {
+            if let Some(s) = read_utf8(&caller, ptr, len) {
+                eprintln!("[wasm] {s}");
+            }
+        })
+        .map(|_| ())
+        .map_err(|e| format!("enlazar host_log: {e}"))
+    })?;
+
+    // `host_net_request` — pide bytes a la red por hash (futuro: sobre
+    // BrahmanNet). Hoy es un stub que devuelve -1 (no implementado), pero la
+    // FRONTERA ya es real: sin `PERMISO_RED` el símbolo no existe y un guest
+    // que lo importe ni instancia.
+    reja.si("tawa::host_net_request", Requiere::Bit(format::PERMISO_RED), |l| {
+        l.func_wrap(
+            "tawa",
+            "host_net_request",
+            |_caller: Caller<'_, ()>, _ptr: i32, _len: i32| -> i32 { -1 },
+        )
+        .map(|_| ())
+        .map_err(|e| format!("enlazar host_net_request: {e}"))
+    })?;
+
+    Ok(reja.consumir())
+}
+
+fn read_utf8(caller: &Caller<'_, ()>, ptr: i32, len: i32) -> Option<String> {
+    let memory = caller.get_export("memory")?.into_memory()?;
+    let ptr = ptr.max(0) as usize;
+    let len = len.max(0) as usize;
+    let data = memory.data(caller);
+    let end = ptr.checked_add(len)?;
+    if end > data.len() {
+        return None;
+    }
+    String::from_utf8(data[ptr..end].to_vec()).ok()
+}
diff --git a/llimphi-wasm-runner/tests/counter.rs b/llimphi-wasm-runner/tests/counter.rs
new file mode 100644
index 0000000..3473446
--- /dev/null
+++ b/llimphi-wasm-runner/tests/counter.rs
@@ -0,0 +1,77 @@
+//! Certificación headless del bucle Tier 3 — sin GPU ni ventana.
+//!
+//! Carga el `.wasm` del contador (compilado a wasm32, versionado en assets/),
+//! lo corre vía [`WasmGuest`] y verifica el viaje redondo completo: el guest
+//! pinta un `WireNode`, el host lo lee, un evento cruza a `wasm_dispatch` con su
+//! `EventId` + `EventPayload`, el `Model` del guest muta y la nueva vista lo
+//! refleja. También materializa el `WireNode` a un `View<RunnerMsg>` real.
+
+use llimphi_wasm_runner::{wire_to_view, EventPayload, RunnerMsg, WasmGuest};
+
+const COUNTER_WASM: &[u8] = include_bytes!("../assets/counter.wasm");
+
+// El +1 es el primer control que registra el guest ⇒ EventId 0; reset ⇒ 1.
+const EV_INCREMENT: u32 = 0;
+const EV_RESET: u32 = 1;
+
+/// El texto del número es el del primer hijo del árbol raíz (col → [número, botones]).
+fn number(guest: &WasmGuest) -> String {
+    guest.view().children[0]
+        .text
+        .as_ref()
+        .expect("el nodo número tiene texto")
+        .content
+        .clone()
+}
+
+#[test]
+fn counter_round_trip() {
+    let mut guest = WasmGuest::load(COUNTER_WASM, 0).expect("carga el guest counter");
+
+    // Estado inicial.
+    assert_eq!(number(&guest), "0");
+
+    // Los botones cargan los EventId que el guest asignó.
+    let buttons = &guest.view().children[1].children;
+    assert_eq!(buttons.len(), 2, "fila con +1 y reset");
+    assert_eq!(buttons[0].on_click, Some(EV_INCREMENT));
+    assert_eq!(buttons[1].on_click, Some(EV_RESET));
+
+    // Un click en +1 cruza a wasm_dispatch y muta el Model del guest.
+    guest
+        .dispatch(EV_INCREMENT, EventPayload::Click)
+        .expect("dispatch increment");
+    assert_eq!(number(&guest), "1");
+
+    guest
+        .dispatch(EV_INCREMENT, EventPayload::Click)
+        .expect("dispatch increment");
+    assert_eq!(number(&guest), "2");
+
+    // Reset vuelve a 0.
+    guest
+        .dispatch(EV_RESET, EventPayload::Click)
+        .expect("dispatch reset");
+    assert_eq!(number(&guest), "0");
+}
+
+#[test]
+fn materializa_view_real() {
+    let guest = WasmGuest::load(COUNTER_WASM, 0).expect("carga el guest counter");
+
+    // El WireNode se convierte en un View<RunnerMsg> Llimphi de verdad: si el
+    // mapeo explota (estilos, colores, handlers), esto trap-ea.
+    let view: llimphi_ui::View<RunnerMsg> = wire_to_view(guest.view(), None, None);
+
+    // Raíz: columna con relleno y dos hijos (número + fila de botones).
+    assert_eq!(view.children.len(), 2);
+
+    // El botón +1 quedó con on_click = RunnerMsg::Event(0, Click).
+    let row = &view.children[1];
+    let inc = &row.children[0];
+    match inc.on_click.as_ref().expect("el botón +1 tiene on_click") {
+        RunnerMsg::Event(id, EventPayload::Click) => assert_eq!(*id, EV_INCREMENT),
+        other => panic!("on_click inesperado: {other:?}"),
+    }
+    assert!(inc.fill.is_some(), "el botón conserva su relleno");
+}
diff --git a/llimphi-wasm-runner/tests/form.rs b/llimphi-wasm-runner/tests/form.rs
new file mode 100644
index 0000000..1a67cba
--- /dev/null
+++ b/llimphi-wasm-runner/tests/form.rs
@@ -0,0 +1,166 @@
+//! Certifica los eventos con payload (Text/Toggle/Value/Select) headless, con el
+//! guest del formulario, más la edición value-driven y el render de los widgets.
+
+use llimphi_ui::{Key, NamedKey};
+use llimphi_wasm_runner::{edit_value, EventPayload, RunnerMsg, WasmGuest};
+
+const FORM_WASM: &[u8] = include_bytes!("../assets/form.wasm");
+
+// Orden de controles en Form::view (= orden de registro = EventId):
+// text_input(0), checkbox(1), slider(2), select(3), multiline(4), radio(5), button(6).
+const EV_NOMBRE: u32 = 0;
+const EV_MAYUS: u32 = 1;
+const EV_EDAD: u32 = 2;
+const EV_COLOR: u32 = 3;
+const EV_NOTAS: u32 = 4;
+const EV_PRIORIDAD: u32 = 5;
+const EV_LIMPIAR: u32 = 6;
+
+// col = [titulo, campo, check, edad_row, color, saludo, detalle, notas, prioridad, limpiar].
+fn campo(g: &WasmGuest) -> String {
+    g.view().children[1].input.as_ref().unwrap().value.clone()
+}
+fn saludo(g: &WasmGuest) -> String {
+    g.view().children[5].text.as_ref().unwrap().content.clone()
+}
+fn detalle(g: &WasmGuest) -> String {
+    g.view().children[6].text.as_ref().unwrap().content.clone()
+}
+
+#[test]
+fn form_text_toggle_y_click() {
+    let mut g = WasmGuest::load(FORM_WASM, 0).expect("carga el form");
+    assert_eq!(saludo(&g), "Hola, …");
+    assert_eq!(campo(&g), "");
+
+    g.dispatch(EV_NOMBRE, EventPayload::Text("ana".into())).unwrap();
+    assert_eq!(campo(&g), "ana");
+    assert_eq!(saludo(&g), "Hola, ana!");
+
+    g.dispatch(EV_MAYUS, EventPayload::Toggle(true)).unwrap();
+    assert_eq!(saludo(&g), "HOLA, ANA!");
+
+    g.dispatch(EV_LIMPIAR, EventPayload::Click).unwrap();
+    assert_eq!(campo(&g), "");
+    assert_eq!(saludo(&g), "Hola, …");
+}
+
+#[test]
+fn form_slider_y_dropdown() {
+    let mut g = WasmGuest::load(FORM_WASM, 0).expect("carga el form");
+    // Defaults: edad 30, color 1 (verde).
+    assert!(detalle(&g).contains("Edad: 30"), "{}", detalle(&g));
+    assert!(detalle(&g).contains("Color: verde"), "{}", detalle(&g));
+
+    // Evento Value: el guest reconstruye Msg::SetEdad(75.0).
+    g.dispatch(EV_EDAD, EventPayload::Value(75.0)).unwrap();
+    assert!(detalle(&g).contains("Edad: 75"), "{}", detalle(&g));
+
+    // Evento Select: Msg::SetColor(0) ⇒ "rojo".
+    g.dispatch(EV_COLOR, EventPayload::Select(0)).unwrap();
+    assert!(detalle(&g).contains("Color: rojo"), "{}", detalle(&g));
+}
+
+#[test]
+fn dropdown_abre_y_lista_opciones() {
+    let mut g = WasmGuest::load(FORM_WASM, 0).expect("carga el form");
+    // Cerrado: el select (children[4]) materializa sólo su header.
+    assert_eq!(g.render().children[4].children.len(), 1, "cerrado: sólo header");
+    // Abrir: header + las 3 opciones.
+    g.apply(&RunnerMsg::ToggleSelect(EV_COLOR)).unwrap();
+    assert_eq!(
+        g.render().children[4].children.len(),
+        1 + 3,
+        "abierto: header + 3 opciones"
+    );
+    // Cualquier evento cierra el dropdown.
+    g.apply(&RunnerMsg::Event(EV_COLOR, EventPayload::Select(2))).unwrap();
+    assert_eq!(g.render().children[4].children.len(), 1, "elegir cierra");
+}
+
+#[test]
+fn form_multiline_y_radio_cruzan_la_frontera() {
+    let mut g = WasmGuest::load(FORM_WASM, 0).expect("carga el form");
+    // Defaults: prioridad baja, notas vacías (1 línea por count de "").
+    assert!(detalle(&g).contains("Prioridad: baja"), "{}", detalle(&g));
+
+    // Notas multilínea: el host ya computó el texto con \n (edit_value) y el
+    // guest lo almacena; detalle refleja el conteo de líneas.
+    g.dispatch(EV_NOTAS, EventPayload::Text("uno\ndos\ntres".into()))
+        .unwrap();
+    assert!(detalle(&g).contains("Notas: 3 líneas"), "{}", detalle(&g));
+    // El input multilínea está marcado como tal en la vista.
+    assert!(
+        g.view().children[7].input.as_ref().unwrap().multiline,
+        "notas es multiline"
+    );
+
+    // Radio: elegir prioridad alta (índice 2) por Select.
+    g.dispatch(EV_PRIORIDAD, EventPayload::Select(2)).unwrap();
+    assert!(detalle(&g).contains("Prioridad: alta"), "{}", detalle(&g));
+    // El nodo radio (children[8]) materializa una fila por opción.
+    assert_eq!(g.render().children[8].children.len(), 3, "3 opciones de radio");
+}
+
+#[test]
+fn radio_se_materializa_con_una_marcada() {
+    use llimphi_wasm_runner::wire_to_view;
+    use llimphi_wire_view::{WireNode, WireRadio};
+
+    // Grupo de 3 opciones, la 1 (índice) marcada, handler on_radio = 9.
+    let node = WireNode::new()
+        .with_radio(WireRadio {
+            options: vec!["rojo".into(), "verde".into(), "azul".into()],
+            selected: 1,
+        })
+        .on_radio(9);
+    let v = wire_to_view(&node, None, None);
+
+    assert_eq!(v.children.len(), 3, "una fila por opción");
+    // Sólo la marcada lleva ◉; las otras ○.
+    let marcadas: Vec<&str> = v
+        .children
+        .iter()
+        .map(|c| c.text.as_ref().unwrap().content.as_str())
+        .collect();
+    assert!(marcadas[0].starts_with('\u{25cb}'), "rojo: ○ ({})", marcadas[0]);
+    assert!(marcadas[1].starts_with('\u{25c9}'), "verde: ◉ ({})", marcadas[1]);
+    assert!(marcadas[2].starts_with('\u{25cb}'), "azul: ○ ({})", marcadas[2]);
+    assert!(marcadas[1].contains("verde"));
+    // Cada fila es clickable (emite el Select de su índice).
+    assert!(v.children[2].on_click.is_some(), "la opción azul es clickable");
+}
+
+#[test]
+fn slider_se_materializa_con_barra() {
+    let g = WasmGuest::load(FORM_WASM, 0).expect("carga el form");
+    let v = g.render();
+    // edad_row = children[3]; el slider es su 2º hijo.
+    let slider = &v.children[3].children[1];
+    assert!(slider.on_click_at.is_some(), "el slider responde a click posicional");
+    assert_eq!(slider.children.len(), 1, "track con barra de relleno");
+}
+
+#[test]
+fn input_se_materializa_focusable() {
+    let g = WasmGuest::load(FORM_WASM, 0).expect("carga el form");
+    assert!(g.render().children[1].focusable.is_some(), "el input es focusable");
+}
+
+#[test]
+fn edit_value_anexa_y_borra() {
+    assert_eq!(
+        edit_value("an", &Key::Character("a".into()), Some("a"), false),
+        Some("ana".into())
+    );
+    assert_eq!(
+        edit_value("ana", &Key::Named(NamedKey::Backspace), None, false),
+        Some("an".into())
+    );
+    // Enter en un campo de una línea no edita; en uno multilínea inserta \n.
+    assert_eq!(edit_value("x", &Key::Named(NamedKey::Enter), None, false), None);
+    assert_eq!(
+        edit_value("x", &Key::Named(NamedKey::Enter), None, true),
+        Some("x\n".into())
+    );
+}
diff --git a/llimphi-wasm-runner/tests/gating.rs b/llimphi-wasm-runner/tests/gating.rs
new file mode 100644
index 0000000..1520a74
--- /dev/null
+++ b/llimphi-wasm-runner/tests/gating.rs
@@ -0,0 +1,44 @@
+//! Certifica la frontera física host-side: un host import gateado por permiso
+//! sólo se enlaza si el bit está. Sin él, un guest que lo importe NO instancia.
+//!
+//! Usamos un módulo WAT mínimo (compilado en runtime, sin toolchain wasm32) que
+//! importa `tawa.host_net_request` — la función gateada por `PERMISO_RED`.
+
+use llimphi_wasm_runner::build_linker;
+use wasmi::{CompilationMode, Config, Engine, Module, Store};
+
+/// Módulo que importa la función gateada y exporta `memory`.
+const WAT_IMPORTA_RED: &str = r#"
+(module
+  (import "tawa" "host_net_request" (func $req (param i32 i32) (result i32)))
+  (memory (export "memory") 1)
+  (func (export "ping") (result i32)
+    (call $req (i32.const 0) (i32.const 0))))
+"#;
+
+fn intenta_instanciar(permisos: u32) -> Result<(), String> {
+    let wasm = wat::parse_str(WAT_IMPORTA_RED).expect("WAT válido");
+    let mut config = Config::default();
+    config.compilation_mode(CompilationMode::Eager);
+    let engine = Engine::new(&config);
+    let module = Module::new(&engine, &wasm).map_err(|e| e.to_string())?;
+    let mut store = Store::new(&engine, ());
+    let linker = build_linker(&engine, permisos)?;
+    linker
+        .instantiate_and_start(&mut store, &module)
+        .map(|_| ())
+        .map_err(|e| e.to_string())
+}
+
+#[test]
+fn con_permiso_red_instancia() {
+    // Con PERMISO_RED concedido, el import se enlaza y el módulo instancia.
+    assert!(intenta_instanciar(format::PERMISO_RED).is_ok());
+}
+
+#[test]
+fn sin_permiso_red_no_instancia() {
+    // Sin el bit, `host_net_request` no se enlaza: el import queda sin resolver
+    // y la instanciación falla. Frontera física: no hay tabla que escalar.
+    assert!(intenta_instanciar(0).is_err());
+}
diff --git a/llimphi-wasm-wasi/Cargo.toml b/llimphi-wasm-wasi/Cargo.toml
new file mode 100644
index 0000000..b0d9094
--- /dev/null
+++ b/llimphi-wasm-wasi/Cargo.toml
@@ -0,0 +1,17 @@
+[package]
+name = "llimphi-wasm-wasi"
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+authors.workspace = true
+publish.workspace = true
+description = "llimphi-wasm-wasi — intérprete host de apps WASI de consola sobre wasmi. Un shim mínimo de wasi_snapshot_preview1 (fd_write/fd_read/args/environ/clock/random/proc_exit…) que instancia un módulo `_start`, captura su stdout/stderr y devuelve la salida + código de salida. Es lo que vuelve EJECUTABLE el grueso del WASM público (herramientas de línea de comandos), distinto de las apps Tier 3 (UI). detect_kind() distingue un módulo Tier 3 (exporta wasm_view) de uno WASI (exporta _start) — el launcher elige cómo correrlo."
+
+[dependencies]
+wasmi = { workspace = true }
+
+[dev-dependencies]
+# Fixtures WASI escritos en WAT y compilados en runtime — certifican el shim
+# sin depender del toolchain wasm32-wasi (igual criterio que el test de gateo
+# del runner).
+wat = { workspace = true }
diff --git a/llimphi-wasm-wasi/LEEME.md b/llimphi-wasm-wasi/LEEME.md
new file mode 100644
index 0000000..6bcd884
--- /dev/null
+++ b/llimphi-wasm-wasi/LEEME.md
@@ -0,0 +1,24 @@
+# llimphi-wasm-wasi
+
+*Read this in English: [README.md](README.md).*
+
+Corre apps **WASI de consola** sobre wasmi.
+
+El catálogo no es trampa: además de las apps Tier 3 (UI, ABI propio
+`wasm_view → WireNode`), el grueso del WASM público son **programas de línea
+de comandos** compilados a `wasm32-wasi`: importan `wasi_snapshot_preview1`,
+tienen un `_start` y escriben a stdout. Este crate los ejecuta: un shim
+mínimo de WASI preview1 instancia el módulo, captura su stdout/stderr y
+devuelve la salida + el código de salida. No es una GUI — es una consola,
+que es exactamente lo que esos módulos son.
+
+Alcance honesto: se cubre el subconjunto que usa una herramienta CLI típica
+(escribir, leer stdin, args, env, reloj, random, salir). Lo que toca
+**filesystem o sockets reales** no está (esos imports no se enlazan: el
+módulo que los use trap-ea al instanciar — la misma frontera física que el
+resto del runtime). El component-model y las apps web (wasm-bindgen/DOM) son
+otra historia: necesitan otro runtime / un navegador (eso es `puriy`).
+
+---
+
+Parte de **llimphi** — ver [llimphi](../LEEME.md).
diff --git a/llimphi-wasm-wasi/README.md b/llimphi-wasm-wasi/README.md
new file mode 100644
index 0000000..7ca3bc5
--- /dev/null
+++ b/llimphi-wasm-wasi/README.md
@@ -0,0 +1,22 @@
+# llimphi-wasm-wasi
+
+Runs **console WASI apps** over wasmi.
+
+The catalog is not a trick: besides the Tier 3 apps (UI, our own
+`wasm_view → WireNode` ABI), the bulk of public WASM is **command-line
+programs** compiled to `wasm32-wasi`: they import `wasi_snapshot_preview1`, have a
+`_start` and write to stdout. This crate runs them: a minimal WASI preview1 shim
+instantiates the module, captures its stdout/stderr and returns the output plus
+the exit code. It is not a GUI — it is a console, which is exactly what those
+modules are.
+
+Honest scope: it covers the subset a typical CLI tool uses (write, read stdin,
+args, env, clock, random, exit). Anything touching a **real filesystem or
+sockets** is absent (those imports are not linked: a module using them traps at
+instantiation — the same physical boundary as the rest of the runtime). The
+component model and web apps (wasm-bindgen/DOM) are another story: they need a
+different runtime or a browser (that is `puriy`).
+
+---
+
+Part of **llimphi** — see [llimphi](../README.md).
diff --git a/llimphi-wasm-wasi/examples/run.rs b/llimphi-wasm-wasi/examples/run.rs
new file mode 100644
index 0000000..6424ced
--- /dev/null
+++ b/llimphi-wasm-wasi/examples/run.rs
@@ -0,0 +1,25 @@
+//! Corre un módulo WASI de consola y vuelca su salida.
+//!
+//! `cargo run -p llimphi-wasm-wasi --example run -- programa.wasm [args…]`
+
+use llimphi_wasm_wasi::{detect_kind, run_console, WasmKind};
+
+fn main() {
+    let mut a = std::env::args().skip(1);
+    let path = a.next().unwrap_or_else(|| {
+        eprintln!("uso: run <programa.wasm> [args…]");
+        std::process::exit(2);
+    });
+    let args: Vec<String> = a.collect();
+    let wasm = std::fs::read(&path).expect("leer wasm");
+
+    eprintln!("clase del módulo: {:?}", detect_kind(&wasm));
+    if detect_kind(&wasm) != WasmKind::WasiConsole {
+        eprintln!("(no es un módulo WASI de consola)");
+    }
+
+    let out = run_console(&wasm, &args, &[], &[]).expect("correr");
+    print!("{}", out.stdout_text());
+    eprint!("{}", out.stderr_text());
+    std::process::exit(out.exit_code);
+}
diff --git a/llimphi-wasm-wasi/src/lib.rs b/llimphi-wasm-wasi/src/lib.rs
new file mode 100644
index 0000000..15ba4e5
--- /dev/null
+++ b/llimphi-wasm-wasi/src/lib.rs
@@ -0,0 +1,593 @@
+//! llimphi-wasm-wasi — corre apps **WASI de consola** sobre wasmi.
+//!
+//! El catálogo no es trampa: además de las apps Tier 3 (UI, ABI propio
+//! `wasm_view → WireNode`), el grueso del WASM público son **programas de línea
+//! de comandos** compilados a `wasm32-wasi`: importan `wasi_snapshot_preview1`,
+//! tienen un `_start` y escriben a stdout. Este crate los ejecuta: un shim
+//! mínimo de WASI preview1 instancia el módulo, captura su stdout/stderr y
+//! devuelve la salida + el código de salida. No es una GUI — es una consola,
+//! que es exactamente lo que esos módulos son.
+//!
+//! Alcance honesto: se cubre el subconjunto que usa una herramienta CLI típica
+//! (escribir, leer stdin, args, env, reloj, random, salir). Lo que toca
+//! **filesystem o sockets reales** no está (esos imports no se enlazan: el
+//! módulo que los use trap-ea al instanciar — la misma frontera física que el
+//! resto del runtime). El component-model y las apps web (wasm-bindgen/DOM) son
+//! otra historia: necesitan otro runtime / un navegador (eso es `puriy`).
+
+use wasmi::{Caller, Engine, Linker, Module, Store};
+
+/// Qué clase de módulo WASM es, mirando sus exports.
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum WasmKind {
+    /// App Tier 3 de Llimphi: exporta `wasm_view` (UI sobre el SDK).
+    Tier3,
+    /// Programa WASI de consola: exporta `_start`.
+    WasiConsole,
+    /// Ni una ni otra (no sabemos correrlo).
+    Unknown,
+}
+
+/// Clasifica un `.wasm` por sus exports. Tier 3 manda (si exporta `wasm_view`
+/// es una app de UI aunque también tuviera `_start`).
+pub fn detect_kind(wasm: &[u8]) -> WasmKind {
+    let engine = Engine::default();
+    let module = match Module::new(&engine, wasm) {
+        Ok(m) => m,
+        Err(_) => return WasmKind::Unknown,
+    };
+    let mut tiene_view = false;
+    let mut tiene_start = false;
+    for exp in module.exports() {
+        match exp.name() {
+            "wasm_view" => tiene_view = true,
+            "_start" => tiene_start = true,
+            _ => {}
+        }
+    }
+    if tiene_view {
+        WasmKind::Tier3
+    } else if tiene_start {
+        WasmKind::WasiConsole
+    } else {
+        WasmKind::Unknown
+    }
+}
+
+/// La salida de correr un programa de consola.
+#[derive(Debug, Clone, Default, PartialEq, Eq)]
+pub struct ConsoleOutput {
+    pub stdout: Vec<u8>,
+    pub stderr: Vec<u8>,
+    /// Código de salida (de `proc_exit`); `0` si el `_start` retornó normalmente.
+    pub exit_code: i32,
+}
+
+impl ConsoleOutput {
+    /// stdout como texto (lossy — no asumimos UTF-8 perfecto).
+    pub fn stdout_text(&self) -> std::borrow::Cow<'_, str> {
+        String::from_utf8_lossy(&self.stdout)
+    }
+    /// stderr como texto (lossy).
+    pub fn stderr_text(&self) -> std::borrow::Cow<'_, str> {
+        String::from_utf8_lossy(&self.stderr)
+    }
+}
+
+/// Estado del proceso WASI que vive en el `Store` de wasmi.
+struct WasiState {
+    stdout: Vec<u8>,
+    stderr: Vec<u8>,
+    /// argv como bytes terminados en NUL (incluye argv[0]).
+    args: Vec<Vec<u8>>,
+    /// environ como `CLAVE=valor` en bytes.
+    env: Vec<Vec<u8>>,
+    /// stdin disponible para `fd_read`.
+    stdin: Vec<u8>,
+    stdin_pos: usize,
+    /// Fijado por `proc_exit`; corta la ejecución vía trap.
+    exit_code: Option<i32>,
+    /// Semilla determinista para `random_get` (tests reproducibles).
+    rng: u64,
+}
+
+// errno de WASI preview1 (los pocos que usamos).
+const ERRNO_SUCCESS: i32 = 0;
+const ERRNO_BADF: i32 = 8;
+const ERRNO_INVAL: i32 = 28;
+
+/// Mensaje del trap que usamos para señalar `proc_exit` (no es un error real).
+const EXIT_TRAP: &str = "wasi:proc_exit";
+
+/// Corre un módulo WASI de consola: instancia, llama `_start`, captura
+/// stdout/stderr. `args` (sin contar argv[0], que se sintetiza) y `env`
+/// (`("CLAVE","valor")`) y `stdin` alimentan al programa.
+pub fn run_console(
+    wasm: &[u8],
+    args: &[String],
+    env: &[(String, String)],
+    stdin: &[u8],
+) -> Result<ConsoleOutput, String> {
+    let engine = Engine::default();
+    let module = Module::new(&engine, wasm).map_err(|e| format!("compilar wasm: {e}"))?;
+
+    let mut argv: Vec<Vec<u8>> = vec![b"app\0".to_vec()];
+    for a in args {
+        let mut v = a.clone().into_bytes();
+        v.push(0);
+        argv.push(v);
+    }
+    let environ: Vec<Vec<u8>> = env
+        .iter()
+        .map(|(k, val)| {
+            let mut v = format!("{k}={val}").into_bytes();
+            v.push(0);
+            v
+        })
+        .collect();
+
+    let state = WasiState {
+        stdout: Vec::new(),
+        stderr: Vec::new(),
+        args: argv,
+        env: environ,
+        stdin: stdin.to_vec(),
+        stdin_pos: 0,
+        exit_code: None,
+        rng: 0x9E37_79B9_7F4A_7C15,
+    };
+    let mut store = Store::new(&engine, state);
+    let mut linker = Linker::<WasiState>::new(&engine);
+    link_wasi(&mut linker)?;
+
+    let instance = linker
+        .instantiate_and_start(&mut store, &module)
+        .map_err(|e| format!("instanciar: {e}"))?;
+    let start = instance
+        .get_typed_func::<(), ()>(&store, "_start")
+        .map_err(|e| format!("export `_start`: {e}"))?;
+
+    // `_start` puede terminar por retorno normal o por el trap de `proc_exit`.
+    let exit_code = match start.call(&mut store, ()) {
+        Ok(()) => store.data().exit_code.unwrap_or(0),
+        Err(e) => {
+            // Si fue nuestro proc_exit, no es un error: el código está guardado.
+            if let Some(code) = store.data().exit_code {
+                code
+            } else {
+                let st = store.data();
+                return Err(format!(
+                    "trap en _start: {e} (stdout capturado: {})",
+                    String::from_utf8_lossy(&st.stdout)
+                ));
+            }
+        }
+    };
+
+    let st = store.data();
+    Ok(ConsoleOutput {
+        stdout: st.stdout.clone(),
+        stderr: st.stderr.clone(),
+        exit_code,
+    })
+}
+
+/// Lee `len` bytes de la memoria del guest en un `Vec`.
+fn mem_read(caller: &Caller<'_, WasiState>, ptr: i32, len: i32) -> Option<Vec<u8>> {
+    let mem = caller.get_export("memory")?.into_memory()?;
+    let mut buf = vec![0u8; len.max(0) as usize];
+    mem.read(caller, ptr.max(0) as usize, &mut buf).ok()?;
+    Some(buf)
+}
+
+/// Escribe `bytes` en la memoria del guest en `ptr`.
+fn mem_write(caller: &mut Caller<'_, WasiState>, ptr: i32, bytes: &[u8]) -> bool {
+    match caller.get_export("memory").and_then(|e| e.into_memory()) {
+        Some(mem) => mem.write(caller, ptr.max(0) as usize, bytes).is_ok(),
+        None => false,
+    }
+}
+
+fn write_u32(caller: &mut Caller<'_, WasiState>, ptr: i32, v: u32) -> bool {
+    mem_write(caller, ptr, &v.to_le_bytes())
+}
+
+/// Registra el shim de `wasi_snapshot_preview1`. Sólo el subconjunto de
+/// consola: lo que no se enlaza, un módulo que lo importe lo descubre al
+/// instanciar (no instancia) — frontera física.
+fn link_wasi(linker: &mut Linker<WasiState>) -> Result<(), String> {
+    const NS: &str = "wasi_snapshot_preview1";
+    let err = |what: &str, e: wasmi::errors::LinkerError| format!("enlazar {what}: {e}");
+
+    // fd_write(fd, iovs, iovs_len, nwritten) -> errno
+    linker
+        .func_wrap(
+            NS,
+            "fd_write",
+            |mut caller: Caller<'_, WasiState>, fd: i32, iovs: i32, iovs_len: i32, nwritten: i32| -> i32 {
+                let mut collected = Vec::new();
+                for i in 0..iovs_len.max(0) {
+                    let base = iovs + i * 8;
+                    let hdr = match mem_read(&caller, base, 8) {
+                        Some(h) => h,
+                        None => return ERRNO_INVAL,
+                    };
+                    let ptr = u32::from_le_bytes(hdr[0..4].try_into().unwrap()) as i32;
+                    let len = u32::from_le_bytes(hdr[4..8].try_into().unwrap()) as i32;
+                    match mem_read(&caller, ptr, len) {
+                        Some(d) => collected.extend_from_slice(&d),
+                        None => return ERRNO_INVAL,
+                    }
+                }
+                let total = collected.len() as u32;
+                match fd {
+                    1 => caller.data_mut().stdout.extend_from_slice(&collected),
+                    2 => caller.data_mut().stderr.extend_from_slice(&collected),
+                    _ => return ERRNO_BADF,
+                }
+                if !write_u32(&mut caller, nwritten, total) {
+                    return ERRNO_INVAL;
+                }
+                ERRNO_SUCCESS
+            },
+        )
+        .map_err(|e| err("fd_write", e))?;
+
+    // fd_read(fd, iovs, iovs_len, nread) -> errno  (sólo fd 0 = stdin)
+    linker
+        .func_wrap(
+            NS,
+            "fd_read",
+            |mut caller: Caller<'_, WasiState>, fd: i32, iovs: i32, iovs_len: i32, nread: i32| -> i32 {
+                if fd != 0 {
+                    return ERRNO_BADF;
+                }
+                let mut total = 0u32;
+                for i in 0..iovs_len.max(0) {
+                    let base = iovs + i * 8;
+                    let hdr = match mem_read(&caller, base, 8) {
+                        Some(h) => h,
+                        None => return ERRNO_INVAL,
+                    };
+                    let ptr = u32::from_le_bytes(hdr[0..4].try_into().unwrap()) as i32;
+                    let len = u32::from_le_bytes(hdr[4..8].try_into().unwrap()) as usize;
+                    let (chunk, nuevo_pos) = {
+                        let st = caller.data();
+                        let restante = &st.stdin[st.stdin_pos.min(st.stdin.len())..];
+                        let n = len.min(restante.len());
+                        (restante[..n].to_vec(), st.stdin_pos + n)
+                    };
+                    if !chunk.is_empty() && !mem_write(&mut caller, ptr, &chunk) {
+                        return ERRNO_INVAL;
+                    }
+                    caller.data_mut().stdin_pos = nuevo_pos;
+                    total += chunk.len() as u32;
+                    if chunk.is_empty() {
+                        break;
+                    }
+                }
+                if !write_u32(&mut caller, nread, total) {
+                    return ERRNO_INVAL;
+                }
+                ERRNO_SUCCESS
+            },
+        )
+        .map_err(|e| err("fd_read", e))?;
+
+    // args_sizes_get(argc, buf_size) -> errno
+    linker
+        .func_wrap(
+            NS,
+            "args_sizes_get",
+            |mut caller: Caller<'_, WasiState>, argc: i32, buf_size: i32| -> i32 {
+                let (n, bytes) = {
+                    let st = caller.data();
+                    (st.args.len() as u32, st.args.iter().map(|a| a.len() as u32).sum::<u32>())
+                };
+                if !write_u32(&mut caller, argc, n) || !write_u32(&mut caller, buf_size, bytes) {
+                    return ERRNO_INVAL;
+                }
+                ERRNO_SUCCESS
+            },
+        )
+        .map_err(|e| err("args_sizes_get", e))?;
+
+    // args_get(argv, buf) -> errno
+    linker
+        .func_wrap(
+            NS,
+            "args_get",
+            |mut caller: Caller<'_, WasiState>, argv: i32, buf: i32| -> i32 {
+                escribir_vector(&mut caller, argv, buf, |st| &st.args)
+            },
+        )
+        .map_err(|e| err("args_get", e))?;
+
+    // environ_sizes_get(count, buf_size) -> errno
+    linker
+        .func_wrap(
+            NS,
+            "environ_sizes_get",
+            |mut caller: Caller<'_, WasiState>, count: i32, buf_size: i32| -> i32 {
+                let (n, bytes) = {
+                    let st = caller.data();
+                    (st.env.len() as u32, st.env.iter().map(|a| a.len() as u32).sum::<u32>())
+                };
+                if !write_u32(&mut caller, count, n) || !write_u32(&mut caller, buf_size, bytes) {
+                    return ERRNO_INVAL;
+                }
+                ERRNO_SUCCESS
+            },
+        )
+        .map_err(|e| err("environ_sizes_get", e))?;
+
+    // environ_get(environ, buf) -> errno
+    linker
+        .func_wrap(
+            NS,
+            "environ_get",
+            |mut caller: Caller<'_, WasiState>, environ: i32, buf: i32| -> i32 {
+                escribir_vector(&mut caller, environ, buf, |st| &st.env)
+            },
+        )
+        .map_err(|e| err("environ_get", e))?;
+
+    // clock_time_get(id, precision, time) -> errno  (reloj fijo: determinista)
+    linker
+        .func_wrap(
+            NS,
+            "clock_time_get",
+            |mut caller: Caller<'_, WasiState>, _id: i32, _precision: i64, time: i32| -> i32 {
+                if !mem_write(&mut caller, time, &0u64.to_le_bytes()) {
+                    return ERRNO_INVAL;
+                }
+                ERRNO_SUCCESS
+            },
+        )
+        .map_err(|e| err("clock_time_get", e))?;
+
+    // random_get(buf, len) -> errno  (xorshift determinista)
+    linker
+        .func_wrap(
+            NS,
+            "random_get",
+            |mut caller: Caller<'_, WasiState>, buf: i32, len: i32| -> i32 {
+                let mut bytes = Vec::with_capacity(len.max(0) as usize);
+                let mut x = caller.data().rng;
+                for _ in 0..len.max(0) {
+                    x ^= x << 13;
+                    x ^= x >> 7;
+                    x ^= x << 17;
+                    bytes.push((x & 0xff) as u8);
+                }
+                caller.data_mut().rng = x;
+                if !mem_write(&mut caller, buf, &bytes) {
+                    return ERRNO_INVAL;
+                }
+                ERRNO_SUCCESS
+            },
+        )
+        .map_err(|e| err("random_get", e))?;
+
+    // proc_exit(code) -> ! : guarda el código y corta vía trap.
+    linker
+        .func_wrap(
+            NS,
+            "proc_exit",
+            |mut caller: Caller<'_, WasiState>, code: i32| -> Result<(), wasmi::Error> {
+                caller.data_mut().exit_code = Some(code);
+                Err(wasmi::Error::host(ProcExit))
+            },
+        )
+        .map_err(|e| err("proc_exit", e))?;
+
+    // fd_close(fd) -> errno  (no-op para stdio)
+    linker
+        .func_wrap(NS, "fd_close", |_c: Caller<'_, WasiState>, _fd: i32| -> i32 { ERRNO_SUCCESS })
+        .map_err(|e| err("fd_close", e))?;
+
+    // fd_seek(fd, offset, whence, newoffset) -> errno  (stdio no busca: 0)
+    linker
+        .func_wrap(
+            NS,
+            "fd_seek",
+            |mut caller: Caller<'_, WasiState>, _fd: i32, _off: i64, _whence: i32, newoffset: i32| -> i32 {
+                let _ = mem_write(&mut caller, newoffset, &0u64.to_le_bytes());
+                ERRNO_SUCCESS
+            },
+        )
+        .map_err(|e| err("fd_seek", e))?;
+
+    // fd_fdstat_get(fd, stat) -> errno  (stdio = char device; 24 bytes a cero+tipo)
+    linker
+        .func_wrap(
+            NS,
+            "fd_fdstat_get",
+            |mut caller: Caller<'_, WasiState>, _fd: i32, stat: i32| -> i32 {
+                // fs_filetype=2 (character_device); resto a cero.
+                let mut buf = [0u8; 24];
+                buf[0] = 2;
+                if !mem_write(&mut caller, stat, &buf) {
+                    return ERRNO_INVAL;
+                }
+                ERRNO_SUCCESS
+            },
+        )
+        .map_err(|e| err("fd_fdstat_get", e))?;
+
+    // fd_prestat_get(fd, prestat) -> errno  : no hay dirs preabiertos ⇒ BADF.
+    // (wasi-libc itera hasta recibir BADF; devolverlo es lo correcto.)
+    linker
+        .func_wrap(NS, "fd_prestat_get", |_c: Caller<'_, WasiState>, _fd: i32, _p: i32| -> i32 {
+            ERRNO_BADF
+        })
+        .map_err(|e| err("fd_prestat_get", e))?;
+
+    // fd_prestat_dir_name(fd, path, path_len) -> errno : idem, BADF.
+    linker
+        .func_wrap(
+            NS,
+            "fd_prestat_dir_name",
+            |_c: Caller<'_, WasiState>, _fd: i32, _p: i32, _l: i32| -> i32 { ERRNO_BADF },
+        )
+        .map_err(|e| err("fd_prestat_dir_name", e))?;
+
+    Ok(())
+}
+
+/// Marcador de host-error que usamos para `proc_exit` (no es una falla real).
+#[derive(Debug)]
+struct ProcExit;
+impl std::fmt::Display for ProcExit {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        write!(f, "{EXIT_TRAP}")
+    }
+}
+impl std::error::Error for ProcExit {}
+impl wasmi::errors::HostError for ProcExit {}
+
+/// Escribe un vector de cadenas estilo argv/environ: un array de punteros en
+/// `ptr_array` y los bytes contiguos en `buf`. Patrón común a `args_get` y
+/// `environ_get`.
+fn escribir_vector(
+    caller: &mut Caller<'_, WasiState>,
+    ptr_array: i32,
+    buf: i32,
+    sel: impl Fn(&WasiState) -> &Vec<Vec<u8>>,
+) -> i32 {
+    let items: Vec<Vec<u8>> = sel(caller.data()).clone();
+    let mut cursor = buf;
+    for (i, item) in items.iter().enumerate() {
+        // puntero i → posición actual del buffer
+        if !write_u32(caller, ptr_array + (i as i32) * 4, cursor as u32) {
+            return ERRNO_INVAL;
+        }
+        if !mem_write(caller, cursor, item) {
+            return ERRNO_INVAL;
+        }
+        cursor += item.len() as i32;
+    }
+    ERRNO_SUCCESS
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    /// Compila WAT a wasm en el test (sin toolchain wasm32-wasi).
+    fn wat(src: &str) -> Vec<u8> {
+        wat::parse_str(src).expect("WAT válido")
+    }
+
+    /// Un módulo WASI mínimo: escribe `msg` a stdout vía fd_write y sale con
+    /// `code` vía proc_exit. Arma el iovec en memoria en runtime.
+    fn modulo_hola(msg: &str, code: i32) -> Vec<u8> {
+        // Layout de memoria: [0..]=iovec(ptr=8,len), [8..]=msg.
+        let bytes: String = msg.bytes().map(|b| format!("\\{b:02x}")).collect();
+        let len = msg.len();
+        wat(&format!(
+            r#"(module
+              (import "wasi_snapshot_preview1" "fd_write"
+                (func $fd_write (param i32 i32 i32 i32) (result i32)))
+              (import "wasi_snapshot_preview1" "proc_exit" (func $proc_exit (param i32)))
+              (memory (export "memory") 1)
+              (data (i32.const 8) "{bytes}")
+              (func (export "_start")
+                ;; iovec en 0: ptr=8, len={len}
+                (i32.store (i32.const 0) (i32.const 8))
+                (i32.store (i32.const 4) (i32.const {len}))
+                ;; fd_write(1, iovs=0, iovs_len=1, nwritten=20)
+                (drop (call $fd_write (i32.const 1) (i32.const 0) (i32.const 1) (i32.const 20)))
+                (call $proc_exit (i32.const {code}))
+              )
+            )"#
+        ))
+    }
+
+    #[test]
+    fn detect_kind_distingue_wasi_de_tier3() {
+        let wasi = modulo_hola("x", 0);
+        assert_eq!(detect_kind(&wasi), WasmKind::WasiConsole);
+        // Un módulo que exporta wasm_view es Tier3.
+        let tier3 = wat(r#"(module (func (export "wasm_view") (result i64) (i64.const 0)))"#);
+        assert_eq!(detect_kind(&tier3), WasmKind::Tier3);
+        // Sin ninguno de los dos: Unknown.
+        let nada = wat(r#"(module (func (export "otra")))"#);
+        assert_eq!(detect_kind(&nada), WasmKind::Unknown);
+    }
+
+    #[test]
+    fn corre_y_captura_stdout_y_codigo() {
+        let out = run_console(&modulo_hola("hola mundo\n", 0), &[], &[], &[]).expect("corre");
+        assert_eq!(out.stdout_text(), "hola mundo\n");
+        assert_eq!(out.exit_code, 0);
+        assert!(out.stderr.is_empty());
+    }
+
+    #[test]
+    fn proc_exit_propaga_codigo() {
+        let out = run_console(&modulo_hola("x", 7), &[], &[], &[]).expect("corre");
+        assert_eq!(out.exit_code, 7);
+        assert_eq!(out.stdout_text(), "x");
+    }
+
+    #[test]
+    fn args_y_environ_se_exponen() {
+        // Un módulo que pide los tamaños de args y environ y los escribe a
+        // memoria; comprobamos que el shim reporta los conteos correctos.
+        let src = r#"(module
+          (import "wasi_snapshot_preview1" "args_sizes_get"
+            (func $args_sizes (param i32 i32) (result i32)))
+          (import "wasi_snapshot_preview1" "environ_sizes_get"
+            (func $env_sizes (param i32 i32) (result i32)))
+          (import "wasi_snapshot_preview1" "fd_write"
+            (func $fd_write (param i32 i32 i32 i32) (result i32)))
+          (import "wasi_snapshot_preview1" "proc_exit" (func $proc_exit (param i32)))
+          (memory (export "memory") 1)
+          (func (export "_start")
+            ;; args count → @0, buf → @4 ; environ count → @8, buf → @12
+            (drop (call $args_sizes (i32.const 0) (i32.const 4)))
+            (drop (call $env_sizes (i32.const 8) (i32.const 12)))
+            ;; iovec @16 apuntando a @0, longitud 16 (los 4 u32) → stdout
+            (i32.store (i32.const 16) (i32.const 0))
+            (i32.store (i32.const 20) (i32.const 16))
+            (drop (call $fd_write (i32.const 1) (i32.const 16) (i32.const 1) (i32.const 40)))
+            (call $proc_exit (i32.const 0))
+          ))"#;
+        let out = run_console(
+            &wat(src),
+            &["uno".into(), "dos".into()],
+            &[("K".into(), "v".into())],
+            &[],
+        )
+        .expect("corre");
+        // stdout = 4 u32 LE: argc, args_buf_size, env_count, env_buf_size.
+        let w = |i: usize| u32::from_le_bytes(out.stdout[i * 4..i * 4 + 4].try_into().unwrap());
+        // argc = argv0 ("app") + 2 = 3.
+        assert_eq!(w(0), 3, "argc");
+        assert_eq!(w(2), 1, "environ count = 1 (K=v)");
+    }
+
+    #[test]
+    fn stdin_se_lee() {
+        // Lee 5 bytes de stdin a memoria @100 y los reescribe a stdout.
+        let src = r#"(module
+          (import "wasi_snapshot_preview1" "fd_read"
+            (func $fd_read (param i32 i32 i32 i32) (result i32)))
+          (import "wasi_snapshot_preview1" "fd_write"
+            (func $fd_write (param i32 i32 i32 i32) (result i32)))
+          (import "wasi_snapshot_preview1" "proc_exit" (func $proc_exit (param i32)))
+          (memory (export "memory") 1)
+          (func (export "_start")
+            ;; iovec @0: ptr=100, len=5
+            (i32.store (i32.const 0) (i32.const 100))
+            (i32.store (i32.const 4) (i32.const 5))
+            (drop (call $fd_read (i32.const 0) (i32.const 0) (i32.const 1) (i32.const 8)))
+            ;; reescribir lo leído (mismo iovec) a stdout
+            (drop (call $fd_write (i32.const 1) (i32.const 0) (i32.const 1) (i32.const 12)))
+            (call $proc_exit (i32.const 0))
+          ))"#;
+        let out = run_console(&wat(src), &[], &[], b"hello world").expect("corre");
+        assert_eq!(&out.stdout, b"hello");
+    }
+}
diff --git a/llimphi-wire-view/Cargo.toml b/llimphi-wire-view/Cargo.toml
new file mode 100644
index 0000000..26292ba
--- /dev/null
+++ b/llimphi-wire-view/Cargo.toml
@@ -0,0 +1,16 @@
+[package]
+name = "llimphi-wire-view"
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+authors.workspace = true
+publish.workspace = true
+description = "llimphi-wire-view — IR serializable de un subset de View<Msg> que cruza la frontera WASM. El guest (app .wasm) construye un WireNode con un builder ergonómico y lo serializa (postcard); el host (llimphi-wasm-runner) lo materializa en un View<Msg> Llimphi real. Los callbacks no cruzan: cada nodo interactivo carga los bytes de su Msg (postcard) y el host los rebota al update del guest. no_std + alloc para correr igual en wawa."
+
+[dependencies]
+# serde sin std: el guest puede ser no_std; el host trae std de su lado.
+serde = { version = "1", default-features = false, features = ["derive", "alloc"] }
+
+[dev-dependencies]
+# El round-trip se certifica del lado host (std).
+postcard = { workspace = true }
diff --git a/llimphi-wire-view/LEEME.md b/llimphi-wire-view/LEEME.md
new file mode 100644
index 0000000..a5c71d6
--- /dev/null
+++ b/llimphi-wire-view/LEEME.md
@@ -0,0 +1,21 @@
+# llimphi-wire-view
+
+*Read this in English: [README.md](README.md).*
+
+IR serializable de un subset de `View<Msg>`.
+
+Un `WireNode` espeja la forma de `llimphi_compositor::View`: un árbol de
+cajas con dirección flex, dimensiones, padding, relleno, radio, un texto
+opcional y handlers. La diferencia clave: los callbacks **no cruzan la
+frontera WASM**. En lugar de un `Fn() -> Msg`, cada nodo interactivo carga
+`on_click: Option<Vec<u8>>` — los bytes postcard del `Msg` del guest. El
+host rebota esos bytes a `dispatch` del guest, que los decodifica y corre
+su `update`. Como en Llimphi `on_click` ya es `Option<Msg>` por valor (no
+una clausura), el mapeo es directo.
+
+`no_std + alloc`: el mismo IR sirve para un guest no_std (incluso una app
+wawa) y para el host con std.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../LEEME.md).
diff --git a/llimphi-wire-view/README.md b/llimphi-wire-view/README.md
new file mode 100644
index 0000000..92b803d
--- /dev/null
+++ b/llimphi-wire-view/README.md
@@ -0,0 +1,19 @@
+# llimphi-wire-view
+
+Serializable IR of a subset of `View<Msg>`.
+
+A `WireNode` mirrors the shape of `llimphi_compositor::View`: a tree of boxes with
+flex direction, dimensions, padding, fill, radius, an optional text and handlers.
+The key difference: the callbacks **do not cross the WASM boundary**. Instead of
+a `Fn() -> Msg`, every interactive node carries `on_click: Option<Vec<u8>>` — the
+postcard bytes of the guest's `Msg`. The host bounces those bytes back to the
+guest's `dispatch`, which decodes them and runs its `update`. Since in Llimphi
+`on_click` is already an `Option<Msg>` by value (not a closure), the mapping is
+direct.
+
+`no_std + alloc`: the same IR serves a `no_std` guest (even a wawa app) and the
+host with std.
+
+---
+
+Part of **llimphi** — see [llimphi](../README.md).
diff --git a/llimphi-wire-view/src/lib.rs b/llimphi-wire-view/src/lib.rs
new file mode 100644
index 0000000..427b93d
--- /dev/null
+++ b/llimphi-wire-view/src/lib.rs
@@ -0,0 +1,441 @@
+//! llimphi-wire-view — IR serializable de un subset de `View<Msg>`.
+//!
+//! Un `WireNode` espeja la forma de `llimphi_compositor::View`: un árbol de
+//! cajas con dirección flex, dimensiones, padding, relleno, radio, un texto
+//! opcional y handlers. La diferencia clave: los callbacks **no cruzan la
+//! frontera WASM**. En lugar de un `Fn() -> Msg`, cada nodo interactivo carga
+//! `on_click: Option<Vec<u8>>` — los bytes postcard del `Msg` del guest. El
+//! host rebota esos bytes a `dispatch` del guest, que los decodifica y corre
+//! su `update`. Como en Llimphi `on_click` ya es `Option<Msg>` por valor (no
+//! una clausura), el mapeo es directo.
+//!
+//! `no_std + alloc`: el mismo IR sirve para un guest no_std (incluso una app
+//! wawa) y para el host con std.
+
+#![no_std]
+
+extern crate alloc;
+
+use alloc::string::String;
+use alloc::vec::Vec;
+use serde::{Deserialize, Serialize};
+
+/// Color RGBA de 8 bits por canal — el mismo formato que `Color::from_rgba8`.
+pub type Rgba = [u8; 4];
+
+/// Dimensión de un eje. Espeja `taffy::Dimension` en su subset útil.
+#[derive(Clone, Copy, Debug, PartialEq, Serialize, Deserialize)]
+pub enum Dim {
+    /// Tamaño automático (contenido).
+    Auto,
+    /// Píxeles lógicos.
+    Px(f32),
+    /// Fracción del padre, `0.0..=1.0`.
+    Pct(f32),
+}
+
+impl Default for Dim {
+    fn default() -> Self {
+        Dim::Auto
+    }
+}
+
+/// Dirección del eje principal flex.
+#[derive(Clone, Copy, Debug, PartialEq, Serialize, Deserialize)]
+pub enum Dir {
+    /// Caja simple (hoja o stack vertical). Se materializa como columna.
+    Block,
+    /// Fila — hijos en horizontal.
+    Row,
+    /// Columna — hijos en vertical.
+    Column,
+}
+
+impl Default for Dir {
+    fn default() -> Self {
+        Dir::Block
+    }
+}
+
+/// Alineación cruzada (`align-items`).
+#[derive(Clone, Copy, Debug, PartialEq, Serialize, Deserialize)]
+pub enum Align {
+    Start,
+    Center,
+    End,
+    Stretch,
+}
+
+/// Distribución en el eje principal (`justify-content`).
+#[derive(Clone, Copy, Debug, PartialEq, Serialize, Deserialize)]
+pub enum Justify {
+    Start,
+    Center,
+    End,
+    SpaceBetween,
+    SpaceAround,
+}
+
+/// Alineación horizontal del texto dentro de su caja.
+#[derive(Clone, Copy, Debug, PartialEq, Default, Serialize, Deserialize)]
+pub enum TextAlign {
+    #[default]
+    Start,
+    Center,
+    End,
+}
+
+/// Texto a rasterizar dentro de un nodo.
+#[derive(Clone, Debug, PartialEq, Default, Serialize, Deserialize)]
+pub struct WireText {
+    pub content: String,
+    pub size: f32,
+    pub color: Rgba,
+    pub align: TextAlign,
+    pub italic: bool,
+}
+
+/// Identificador de un handler de evento. El guest lo asigna por frame (en su
+/// `view`); el host lo rebota en `dispatch(event_id, payload)` y el guest mira
+/// su tabla para reconstruir el `Msg`. Reemplaza el viejo modelo de "bytes del
+/// Msg en el nodo": ahora el nodo lleva sólo el id, así un evento puede acarrear
+/// un payload (texto tecleado, estado de un toggle) que el host inyecta.
+pub type EventId = u32;
+
+/// Lo que un evento acarrea de vuelta al guest. El host lo serializa (postcard)
+/// y lo pasa a `dispatch`; el guest lo entrega al handler del `event_id`.
+#[derive(Clone, Debug, PartialEq, Serialize, Deserialize)]
+pub enum EventPayload {
+    /// Click/tap — sin datos. Handler `Unit(Msg)`.
+    Click,
+    /// Texto nuevo de un campo editable. Handler `Text(Fn(String)->Msg)`.
+    Text(String),
+    /// Nuevo estado de un checkbox/switch. Handler `Toggle(Fn(bool)->Msg)`.
+    Toggle(bool),
+    /// Nuevo valor de un slider. Handler `Value(Fn(f32)->Msg)`.
+    Value(f32),
+    /// Índice de la opción elegida en un dropdown. Handler `Select(Fn(u32)->Msg)`.
+    Select(u32),
+}
+
+/// Campo de texto editable. El `value` es la fuente de verdad del guest; el host
+/// lo pinta y, al teclear, emite `on_input` con el texto nuevo (modelo Elm: el
+/// host no guarda estado de edición, sólo notifica).
+#[derive(Clone, Debug, PartialEq, Default, Serialize, Deserialize)]
+pub struct WireInput {
+    pub value: String,
+    pub placeholder: String,
+    /// Oculta el contenido (●●●) — para contraseñas.
+    pub password: bool,
+    /// Acepta varias líneas: Enter inserta `\n` en vez de ignorarse. El guest
+    /// sigue siendo la fuente de verdad del texto (modelo value-driven).
+    pub multiline: bool,
+}
+
+/// Slider: barra con un valor en `[min, max]`. Al clickear/arrastrar, el host
+/// emite `on_value` con el valor nuevo según la posición.
+#[derive(Clone, Debug, PartialEq, Default, Serialize, Deserialize)]
+pub struct WireSlider {
+    pub value: f32,
+    pub min: f32,
+    pub max: f32,
+}
+
+/// Dropdown: lista de opciones con una seleccionada. El host pinta el header con
+/// la opción actual; al elegir otra, emite `on_select` con su índice.
+#[derive(Clone, Debug, PartialEq, Default, Serialize, Deserialize)]
+pub struct WireSelect {
+    pub options: Vec<String>,
+    pub selected: u32,
+}
+
+/// Grupo de radio: lista siempre visible con una opción marcada. Al clickear
+/// otra, emite `on_radio` con su índice (mismo payload que el dropdown,
+/// `Select(idx)`). Difiere del dropdown sólo en el render: todas las opciones se
+/// ven a la vez con un indicador ◉/○, sin estado de apertura.
+#[derive(Clone, Debug, PartialEq, Default, Serialize, Deserialize)]
+pub struct WireRadio {
+    pub options: Vec<String>,
+    pub selected: u32,
+}
+
+/// Nodo del árbol. Recursivo, igual que `View<Msg>`. Construir con el builder
+/// encadenable o con los constructores libres (`col`, `row`, `text`, `leaf`).
+/// Los nodos interactivos los arma el `Ui` del SDK, que asigna los `EventId`.
+#[derive(Clone, Debug, PartialEq, Default, Serialize, Deserialize)]
+pub struct WireNode {
+    pub dir: Dir,
+    pub width: Dim,
+    pub height: Dim,
+    pub grow: f32,
+    /// Gap entre hijos (ambos ejes), en px lógicos.
+    pub gap: f32,
+    /// Padding `[top, right, bottom, left]`, en px lógicos.
+    pub padding: [f32; 4],
+    pub align: Option<Align>,
+    pub justify: Option<Justify>,
+    pub fill: Option<Rgba>,
+    pub radius: f32,
+    pub text: Option<WireText>,
+    /// Campo editable, si este nodo es un input.
+    pub input: Option<WireInput>,
+    /// Estado de un checkbox, si este nodo es uno.
+    pub toggle: Option<bool>,
+    /// Slider, si este nodo es uno.
+    pub slider: Option<WireSlider>,
+    /// Dropdown, si este nodo es uno.
+    pub select: Option<WireSelect>,
+    /// Grupo de radio, si este nodo es uno.
+    pub radio: Option<WireRadio>,
+    /// Handler de click (evento sin payload).
+    pub on_click: Option<EventId>,
+    /// Handler del texto tecleado en `input`.
+    pub on_input: Option<EventId>,
+    /// Handler del cambio de `toggle`.
+    pub on_toggle: Option<EventId>,
+    /// Handler del valor de `slider`.
+    pub on_value: Option<EventId>,
+    /// Handler de la opción elegida en `select`.
+    pub on_select: Option<EventId>,
+    /// Handler de la opción elegida en `radio`.
+    pub on_radio: Option<EventId>,
+    pub children: Vec<WireNode>,
+}
+
+impl WireNode {
+    pub fn new() -> Self {
+        Self::default()
+    }
+
+    pub fn dir(mut self, d: Dir) -> Self {
+        self.dir = d;
+        self
+    }
+
+    pub fn width(mut self, d: Dim) -> Self {
+        self.width = d;
+        self
+    }
+
+    pub fn height(mut self, d: Dim) -> Self {
+        self.height = d;
+        self
+    }
+
+    pub fn size(mut self, w: Dim, h: Dim) -> Self {
+        self.width = w;
+        self.height = h;
+        self
+    }
+
+    pub fn grow(mut self, g: f32) -> Self {
+        self.grow = g;
+        self
+    }
+
+    pub fn gap(mut self, g: f32) -> Self {
+        self.gap = g;
+        self
+    }
+
+    /// Padding uniforme en los cuatro lados.
+    pub fn pad(mut self, p: f32) -> Self {
+        self.padding = [p; 4];
+        self
+    }
+
+    /// Padding por lado `[top, right, bottom, left]`.
+    pub fn padding(mut self, top: f32, right: f32, bottom: f32, left: f32) -> Self {
+        self.padding = [top, right, bottom, left];
+        self
+    }
+
+    pub fn align(mut self, a: Align) -> Self {
+        self.align = Some(a);
+        self
+    }
+
+    pub fn justify(mut self, j: Justify) -> Self {
+        self.justify = Some(j);
+        self
+    }
+
+    pub fn fill(mut self, color: Rgba) -> Self {
+        self.fill = Some(color);
+        self
+    }
+
+    pub fn radius(mut self, r: f32) -> Self {
+        self.radius = r;
+        self
+    }
+
+    /// Fija el texto del nodo (alineación `Start`, sin itálica).
+    pub fn label(mut self, content: impl Into<String>, size: f32, color: Rgba) -> Self {
+        self.text = Some(WireText {
+            content: content.into(),
+            size,
+            color,
+            align: TextAlign::Start,
+            italic: false,
+        });
+        self
+    }
+
+    /// Alinea el texto ya fijado (no-op si no hay texto).
+    pub fn text_align(mut self, align: TextAlign) -> Self {
+        if let Some(t) = self.text.as_mut() {
+            t.align = align;
+        }
+        self
+    }
+
+    /// Asocia el `EventId` del handler de click (lo asigna el `Ui` del SDK).
+    pub fn on_click(mut self, id: EventId) -> Self {
+        self.on_click = Some(id);
+        self
+    }
+
+    /// Marca el nodo como campo editable.
+    pub fn with_input(mut self, input: WireInput) -> Self {
+        self.input = Some(input);
+        self
+    }
+
+    /// `EventId` del handler que recibe el texto tecleado.
+    pub fn on_input(mut self, id: EventId) -> Self {
+        self.on_input = Some(id);
+        self
+    }
+
+    /// Marca el nodo como checkbox con el estado dado.
+    pub fn with_toggle(mut self, checked: bool) -> Self {
+        self.toggle = Some(checked);
+        self
+    }
+
+    /// `EventId` del handler que recibe el nuevo estado del checkbox.
+    pub fn on_toggle(mut self, id: EventId) -> Self {
+        self.on_toggle = Some(id);
+        self
+    }
+
+    /// Marca el nodo como slider.
+    pub fn with_slider(mut self, slider: WireSlider) -> Self {
+        self.slider = Some(slider);
+        self
+    }
+
+    /// `EventId` del handler que recibe el valor nuevo del slider.
+    pub fn on_value(mut self, id: EventId) -> Self {
+        self.on_value = Some(id);
+        self
+    }
+
+    /// Marca el nodo como dropdown.
+    pub fn with_select(mut self, select: WireSelect) -> Self {
+        self.select = Some(select);
+        self
+    }
+
+    /// `EventId` del handler que recibe el índice elegido en el dropdown.
+    pub fn on_select(mut self, id: EventId) -> Self {
+        self.on_select = Some(id);
+        self
+    }
+
+    /// Marca el nodo como grupo de radio.
+    pub fn with_radio(mut self, radio: WireRadio) -> Self {
+        self.radio = Some(radio);
+        self
+    }
+
+    /// `EventId` del handler que recibe el índice elegido en el grupo de radio.
+    pub fn on_radio(mut self, id: EventId) -> Self {
+        self.on_radio = Some(id);
+        self
+    }
+
+    pub fn children(mut self, children: Vec<WireNode>) -> Self {
+        self.children = children;
+        self
+    }
+
+    pub fn child(mut self, child: WireNode) -> Self {
+        self.children.push(child);
+        self
+    }
+}
+
+/// Columna con hijos.
+pub fn col(children: Vec<WireNode>) -> WireNode {
+    WireNode::new().dir(Dir::Column).children(children)
+}
+
+/// Fila con hijos.
+pub fn row(children: Vec<WireNode>) -> WireNode {
+    WireNode::new().dir(Dir::Row).children(children)
+}
+
+/// Nodo de texto.
+pub fn text(content: impl Into<String>, size: f32, color: Rgba) -> WireNode {
+    WireNode::new().label(content, size, color)
+}
+
+/// Caja vacía (contenedor o separador). Usar `.grow(1.0)` para spacer flexible.
+pub fn leaf() -> WireNode {
+    WireNode::new()
+}
+
+/// Separador flexible (`flex-grow: 1`).
+pub fn spacer() -> WireNode {
+    WireNode::new().grow(1.0)
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use alloc::vec;
+
+    #[test]
+    fn round_trip_postcard() {
+        let tree = col(vec![
+            text("0", 160.0, [230, 240, 250, 255]).grow(1.0),
+            WireNode::new()
+                .with_input(WireInput {
+                    value: "hola".into(),
+                    placeholder: "nombre…".into(),
+                    password: false,
+                    multiline: false,
+                })
+                .on_input(7),
+            row(vec![
+                text("+1", 28.0, [10, 30, 20, 255])
+                    .fill([60, 200, 130, 255])
+                    .radius(12.0)
+                    .on_click(1),
+                text("reset", 22.0, [30, 10, 10, 255])
+                    .fill([220, 80, 80, 255])
+                    .radius(12.0)
+                    .on_click(2),
+            ])
+            .gap(16.0)
+            .justify(Justify::Center),
+        ])
+        .pad(32.0)
+        .fill([20, 24, 32, 255]);
+
+        let bytes = postcard::to_allocvec(&tree).unwrap();
+        let back: WireNode = postcard::from_bytes(&bytes).unwrap();
+        assert_eq!(tree, back);
+        assert_eq!(back.children[1].on_input, Some(7));
+        assert_eq!(back.children[2].children[0].on_click, Some(1));
+
+        // EventPayload también round-trippea.
+        let p = EventPayload::Text("hola".into());
+        assert_eq!(
+            postcard::from_bytes::<EventPayload>(&postcard::to_allocvec(&p).unwrap()).unwrap(),
+            p
+        );
+    }
+}
diff --git a/llimphi-workspace/Cargo.toml b/llimphi-workspace/Cargo.toml
index d863527..f4dcbe4 100644
--- a/llimphi-workspace/Cargo.toml
+++ b/llimphi-workspace/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-workspace — chasis genérico estilo tmux: hospeda N paneles en un árbol BSP (llimphi-widget-panes) con la máquina de estados (split/close/focus/resize) + chrome estándar. La capa sobre la que cualquier app de tawasuyu se monta en un layout intercambiable."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/llimphi-workspace/LEEME.md b/llimphi-workspace/LEEME.md
new file mode 100644
index 0000000..5b0e1d0
--- /dev/null
+++ b/llimphi-workspace/LEEME.md
@@ -0,0 +1,35 @@
+# llimphi-workspace
+
+*Read this in English: [README.md](README.md).*
+
+Chasis genérico estilo tmux.
+
+Paso 2 de la visión "montar cualquier componente de tawasuyu en un layout
+intercambiable con splits resizables". Donde `llimphi_widget_panes`
+aporta el **árbol** (estructura + render + drag), este crate aporta la
+**máquina de estados** (qué panel está enfocado, cómo se parte/cierra,
+el contador de ids) + el **chrome estándar** (toolbar split/cerrar).
+
+## Cómo lo usa una app
+
+La app guarda un `Workspace` en su `Model` y un `HashMap<PaneId, …>`
+con el estado de cada panel. Su `Msg` envuelve dos cosas:
+```ignore
+enum Msg {
+    Ws(WsMsg),                 // mensajes del chasis (focus/split/…)
+    Panel(PaneId, PanelMsg),   // mensajes de un panel concreto
+}
+```
+En `update`, los `Ws` se aplican con `Workspace::apply`, que devuelve
+un `WsEffect` indicando si hay que **crear** el estado de un panel
+nuevo o **borrar** el de uno cerrado. En `view`, `workspace_view` arma
+el chrome + el árbol; la app sólo provee el contenido de cada hoja (ya
+lifteado a su propio `Msg` — el chasis no toca los `PanelMsg`).
+
+El lift se hace al construir la vista (igual que `shuma-module`), así
+sorteamos la falta de `View::map` sin `Box<dyn Any>`: el chasis es
+genérico sobre el `Msg` del host y nunca downcastea.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../LEEME.md).
diff --git a/llimphi-workspace/README.md b/llimphi-workspace/README.md
new file mode 100644
index 0000000..06b0898
--- /dev/null
+++ b/llimphi-workspace/README.md
@@ -0,0 +1,35 @@
+# llimphi-workspace
+
+Generic tmux-style chassis.
+
+Step 2 of the "mount any tawasuyu component in an interchangeable layout with
+resizable splits" vision. Where `llimphi_widget_panes` contributes the **tree**
+(structure + render + drag), this crate contributes the **state machine** (which
+panel is focused, how it splits and closes, the id counter) plus the **standard
+chrome** (a split/close toolbar).
+
+## How an app uses it
+
+The app keeps a `Workspace` in its `Model` and a `HashMap<PaneId, …>` with each
+panel's state. Its `Msg` wraps two things:
+
+```ignore
+enum Msg {
+    Ws(WsMsg),                 // chassis messages (focus/split/…)
+    Panel(PaneId, PanelMsg),   // messages of a concrete panel
+}
+```
+
+In `update`, the `Ws` ones are applied with `Workspace::apply`, which returns a
+`WsEffect` telling whether to **create** the state of a new panel or **delete**
+that of a closed one. In `view`, `workspace_view` assembles the chrome plus the
+tree; the app only provides each leaf's content (already lifted to its own `Msg`
+— the chassis never touches the `PanelMsg`s).
+
+The lift happens while building the view (like `shuma-module`), which sidesteps
+the lack of `View::map` without `Box<dyn Any>`: the chassis is generic over the
+host's `Msg` and never downcasts.
+
+---
+
+Part of **llimphi** — see [llimphi](../README.md).
diff --git a/llimphi-workspace/examples/workspace_demo.rs b/llimphi-workspace/examples/workspace_demo.rs
index a4fdd24..51cc22e 100644
--- a/llimphi-workspace/examples/workspace_demo.rs
+++ b/llimphi-workspace/examples/workspace_demo.rs
@@ -56,7 +56,7 @@ impl App for Demo {
         let mut panes = HashMap::new();
         panes.insert(0, Kind::Counter(0));
         let id = ws.split(Axis::Horizontal);
-        panes.insert(id, Kind::Notes(vec!["arrastrá el divisor del medio →".into()]));
+        panes.insert(id, Kind::Notes(vec!["arrastra el divisor del medio →".into()]));
         ws.focus(0);
         Model {
             ws,
diff --git a/llimphi-workspace/src/lib.rs b/llimphi-workspace/src/lib.rs
index efdab53..5ed0692 100644
--- a/llimphi-workspace/src/lib.rs
+++ b/llimphi-workspace/src/lib.rs
@@ -161,9 +161,9 @@ pub enum WsMsg {
 pub enum WsEffect {
     /// Nada que hacer.
     None,
-    /// Se creó un panel nuevo con este id: inicializá su estado.
+    /// Se creó un panel nuevo con este id: inicializa su estado.
     Created(PaneId),
-    /// Se cerró este panel: borrá su estado.
+    /// Se cerró este panel: borra su estado.
     Closed(PaneId),
 }
 
@@ -215,8 +215,8 @@ where
     let toolbar = View::new(Style {
         flex_direction: FlexDirection::Row,
         gap: Size {
-            width: length(8.0),
-            height: length(8.0),
+            width: length(8.0_f32),
+            height: length(8.0_f32),
         },
         padding: uniform(8.0),
         flex_shrink: 0.0,
@@ -274,10 +274,10 @@ where
 {
     View::new(Style {
         padding: Rect {
-            left: length(12.0),
-            right: length(12.0),
-            top: length(6.0),
-            bottom: length(6.0),
+            left: length(12.0_f32),
+            right: length(12.0_f32),
+            top: length(6.0_f32),
+            bottom: length(6.0_f32),
         },
         flex_shrink: 0.0,
         ..Default::default()
diff --git a/modules/allichay/Cargo.toml b/modules/allichay/Cargo.toml
index a28b913..479b819 100644
--- a/modules/allichay/Cargo.toml
+++ b/modules/allichay/Cargo.toml
@@ -5,22 +5,29 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-module-allichay — el renderizador único de la config declarativa. Pinta un `allichay::Schema` con el rail de dientes (secciones) y controles escalares (toggle/slider/dropdown/color/texto), y emite los cambios como (FieldPath, FieldValue). State + Msg + apply_key/view, el patrón de módulo Llimphi. Reutilizable por el panel central y por cada app."
 
+repository.workspace = true
 [dependencies]
 allichay = { workspace = true }
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
 llimphi-widget-dock-rail = { workspace = true }
+# El sidebar unificado (rail + panel + header + buscador): un solo dueño del chrome.
+llimphi-widget-rag-sidebar = { workspace = true }
+# Íconos vectoriales de los dientes (glifo→vector, determinista en toda máquina).
+llimphi-icons = { workspace = true }
 llimphi-widget-switch = { workspace = true }
 llimphi-widget-slider = { workspace = true }
 llimphi-widget-segmented = { workspace = true }
+llimphi-widget-select = { workspace = true }
 llimphi-widget-scroll = { workspace = true }
 llimphi-widget-text-input = { workspace = true }
 llimphi-widget-table = { workspace = true }
 llimphi-widget-color-picker = { workspace = true }
 llimphi-widget-modal = { workspace = true }
+llimphi-widget-edit-menu = { workspace = true }
+llimphi-widget-context-menu = { workspace = true }
 
 [dev-dependencies]
 # Volcado headless del view a PNG (llvmpipe) para verlo sin levantar ventana,
diff --git a/modules/allichay/LEEME.md b/modules/allichay/LEEME.md
new file mode 100644
index 0000000..5a0bcf5
--- /dev/null
+++ b/modules/allichay/LEEME.md
@@ -0,0 +1,37 @@
+# llimphi-module-allichay
+
+*Read this in English: [README.md](README.md).*
+
+El renderizador único de la configuración declarativa.
+
+Toma un `allichay::Schema` y lo pinta con el **sidebar unificado**
+(`llimphi-widget-rag-sidebar`): un diente por sección top-level y, en el panel
+del diente activo, controles escalares para los campos (toggle, slider,
+dropdown, color, texto). El rail, el panel, el header uniforme (título de la
+sección), el buscador y el control de disposición los pinta UN solo widget —
+allichay no re-deriva chrome. Los cambios salen como un `AllichayMsg` que el
+host mapea a su propio `Msg`.
+
+El cuerpo schema-driven (`section_view`/`schema_panel`) queda expuesto
+aparte para hosts que ya tienen su propio rail (p. ej. `wawa-panel`): esos
+reutilizan el renderizado de campos sin el sidebar interno.
+
+Es un módulo al estilo de `command-palette`: aporta `state + Msg + apply_key
++ view`. El host:
+
+1. guarda un `AllichayState` en su modelo;
+2. llama `allichay_view` en su `view`, mapeando `AllichayMsg` → su `Msg`;
+3. enruta las teclas a `AllichayState::apply_key` cuando hay un campo de
+   texto focado;
+4. ante un `AllichayMsg::Change`, aplica el `(FieldPath, FieldValue)` a su
+   config (vía `allichay::Configurable::apply`) y la persiste con su propio
+   `save()` — allichay no toca el disco.
+
+Subsecciones: en v1 se pintan como grupos con encabezado dentro del panel de
+la sección activa (un solo nivel de dientes). El panel central combina las
+apps en un esquema donde cada app es una sección-diente y sus secciones
+reales bajan a subsecciones — así un mismo rail navega "apps → secciones".
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/modules/allichay/README.md b/modules/allichay/README.md
new file mode 100644
index 0000000..7e4badb
--- /dev/null
+++ b/modules/allichay/README.md
@@ -0,0 +1,34 @@
+# llimphi-module-allichay
+
+The single renderer of declarative configuration.
+
+It takes an `allichay::Schema` and paints it with the **unified sidebar**
+(`llimphi-widget-rag-sidebar`): one tooth per top-level section and, in the
+active tooth's panel, scalar controls for the fields (toggle, slider, dropdown,
+colour, text). The rail, the panel, the uniform header (the section's title), the
+search box and the layout control are painted by ONE widget — allichay does not
+re-derive chrome. Changes come out as an `AllichayMsg` the host maps to its own
+`Msg`.
+
+The schema-driven body (`section_view`/`schema_panel`) is exposed separately for
+hosts that already have their own rail (for instance `wawa-panel`): those reuse
+the field rendering without the internal sidebar.
+
+It is a module in the `command-palette` style: it contributes `state + Msg +
+apply_key + view`. The host:
+
+1. keeps an `AllichayState` in its model;
+2. calls `allichay_view` in its `view`, mapping `AllichayMsg` → its `Msg`;
+3. routes keys to `AllichayState::apply_key` while a text field is focused;
+4. on an `AllichayMsg::Change`, applies the `(FieldPath, FieldValue)` to its
+   config (through `allichay::Configurable::apply`) and persists it with its own
+   `save()` — allichay never touches the disk.
+
+Subsections: in v1 they are painted as headed groups inside the active section's
+panel (a single level of teeth). The central panel combines apps in a scheme
+where each app is a section-tooth and its real sections drop to subsections — so
+one rail navigates "apps → sections".
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/modules/allichay/examples/dump_panel.rs b/modules/allichay/examples/dump_panel.rs
index 6972736..2d16ee1 100644
--- a/modules/allichay/examples/dump_panel.rs
+++ b/modules/allichay/examples/dump_panel.rs
@@ -97,6 +97,7 @@ fn main() {
         order: 0,
         scale_120: 0,
         transform: String::new(),
+        disabled: false,
     }];
     // El keymap de mirada como tabla (combinación · acción) — una tabla alta
     // que ejercita el scroll del panel.
@@ -276,7 +277,7 @@ fn main() {
     .fill(theme.bg_app)
     .children(vec![sidebar, center]);
 
-    // Modo "overlay": pasá `overlay` como arg para ver `settings_overlay`
+    // Modo "overlay": pasa `overlay` como arg para ver `settings_overlay`
     // (el modal embebible) sobre el panel como fondo de app.
     let v = if std::env::args().any(|a| a == "overlay") {
         let modal = settings_overlay::<(), _>(
diff --git a/modules/allichay/examples/settings_demo.rs b/modules/allichay/examples/settings_demo.rs
index 16d44ec..912c6c4 100644
--- a/modules/allichay/examples/settings_demo.rs
+++ b/modules/allichay/examples/settings_demo.rs
@@ -228,6 +228,37 @@ impl App for Demo {
                 }
             }
             Msg::Allichay(AllichayMsg::ScrollTo(offset)) => m.state.set_scroll(offset),
+            Msg::Allichay(AllichayMsg::Input(path, ev)) => {
+                if matches!(ev, llimphi_widget_text_input::TextInputEvent::Press(_))
+                    && !m.state.is_focused(&path)
+                {
+                    let seed = m
+                        .cfg
+                        .schema()
+                        .find_field(&path)
+                        .and_then(|f| f.value.as_str().map(str::to_string))
+                        .unwrap_or_default();
+                    m.state.focus(&path, &seed);
+                }
+                if let Some((p, value)) = m.state.apply_input(ev) {
+                    let _ = m.cfg.apply(&p, value);
+                }
+            }
+            Msg::Allichay(AllichayMsg::EditAction(action)) => {
+                if let Some((p, value)) = m.state.apply_edit_action(action) {
+                    let _ = m.cfg.apply(&p, value);
+                }
+            }
+            Msg::Allichay(AllichayMsg::CloseEditMenu) => m.state.close_edit_menu(),
+            Msg::Allichay(AllichayMsg::ToggleDropdown(path, x, y, w)) => {
+                m.state.toggle_dropdown(&path, x, y, w)
+            }
+            Msg::Allichay(AllichayMsg::ToggleColorPicker(path, x, y, w)) => {
+                m.state.toggle_colorpicker(&path, x, y, w)
+            }
+            Msg::Allichay(AllichayMsg::ColorOrbit(dy, dp)) => m.state.orbit_cone(dy, dp),
+            // Ejes de disposición + buscador del sidebar unificado.
+            Msg::Allichay(AllichayMsg::Sidebar(sm)) => m.state.apply_sidebar(sm),
             Msg::Key(event) => {
                 if let Some((path, value)) = m.state.apply_key(&event) {
                     println!("texto: {path} = {value:?}");
@@ -239,8 +270,9 @@ impl App for Demo {
     }
 
     fn on_key(model: &Model, event: &KeyEvent) -> Option<Msg> {
-        // Sólo capturamos teclas cuando hay un campo de texto en edición.
-        if model.state.is_editing() {
+        // Capturamos teclas cuando hay un campo de texto en edición, o cuando el
+        // buscador del sidebar unificado tiene el foco (las teclas van al filtro).
+        if model.state.is_editing() || model.state.sidebar.search_focused {
             Some(Msg::Key(event.clone()))
         } else {
             None
@@ -261,6 +293,20 @@ impl App for Demo {
         .fill(theme.bg_app)
         .children(vec![body])
     }
+
+    fn view_overlay(model: &Model) -> Option<View<Msg>> {
+        let theme = Theme::dark();
+        let schema = model.cfg.schema();
+        let (w, h) = Self::initial_size();
+        let vp = (w as f32, h as f32);
+        // El select y el color-picker se pintan como overlays anclados (no inline).
+        if let Some(menu) =
+            llimphi_module_allichay::dropdown_overlay(&schema, &model.state, &theme, vp, Msg::Allichay)
+        {
+            return Some(menu);
+        }
+        llimphi_module_allichay::colorpicker_overlay(&schema, &model.state, &theme, vp, Msg::Allichay)
+    }
 }
 
 fn main() {
diff --git a/modules/allichay/src/lib.rs b/modules/allichay/src/lib.rs
index bb01e07..6b5444f 100644
--- a/modules/allichay/src/lib.rs
+++ b/modules/allichay/src/lib.rs
@@ -1,10 +1,17 @@
 //! `llimphi-module-allichay` — el renderizador único de la configuración
 //! declarativa.
 //!
-//! Toma un [`allichay::Schema`] y lo pinta con el **rail de dientes**
-//! (`llimphi-widget-dock-rail`) para las secciones top-level y controles
-//! escalares para los campos (toggle, slider, dropdown, color, texto). Los
-//! cambios salen como un [`AllichayMsg`] que el host mapea a su propio `Msg`.
+//! Toma un [`allichay::Schema`] y lo pinta con el **sidebar unificado**
+//! (`llimphi-widget-rag-sidebar`): un diente por sección top-level y, en el panel
+//! del diente activo, controles escalares para los campos (toggle, slider,
+//! dropdown, color, texto). El rail, el panel, el header uniforme (título de la
+//! sección), el buscador y el control de disposición los pinta UN solo widget —
+//! allichay no re-deriva chrome. Los cambios salen como un [`AllichayMsg`] que el
+//! host mapea a su propio `Msg`.
+//!
+//! El cuerpo schema-driven ([`section_view`]/[`schema_panel`]) queda expuesto
+//! aparte para hosts que ya tienen su propio rail (p. ej. `wawa-panel`): esos
+//! reutilizan el renderizado de campos sin el sidebar interno.
 //!
 //! Es un módulo al estilo de `command-palette`: aporta `state + Msg + apply_key
 //! + view`. El host:
@@ -28,29 +35,45 @@ use allichay::{Control, Field, FieldPath, FieldValue, Schema};
 
 use llimphi_ui::llimphi_layout::taffy::{
     prelude::{length, percent, Dimension, FlexDirection, Size, Style},
-    AlignItems, JustifyContent, Rect,
+    AlignItems, FlexWrap, JustifyContent, Rect,
 };
+use llimphi_ui::llimphi_raster::kurbo::Affine;
 use llimphi_ui::llimphi_raster::peniko::Color;
 use llimphi_ui::llimphi_text::Alignment;
-use llimphi_ui::{DragPhase, KeyEvent, View};
+use llimphi_ui::{DragPhase, Key, KeyEvent, KeyState, NamedKey, View};
 use llimphi_theme::Theme;
 
+use std::sync::Arc;
+
 use llimphi_widget_color_picker::{
-    color_picker_height, color_picker_view, parse_hex, ColorPickerPalette, HexField,
+    color_popup_view, parse_hex, ColorPopupPalette, ColorPopupSpec, ConeOrbit, HexField,
     DEFAULT_SWATCHES,
 };
 
 /// Re-exportado para que los hosts siembren el buffer del campo hex sin duplicar
 /// el formato `#RRGGBB` (lo usan al manejar [`AllichayMsg::FocusHex`]).
 pub use llimphi_widget_color_picker::rgba_to_hex as color_hex;
-use llimphi_widget_dock_rail::{dock_rail_view, DockRailItem, DockRailPalette};
 use llimphi_widget_modal::{modal_view, ModalButton, ModalPalette, ModalSpec};
+use llimphi_widget_rag_sidebar::{
+    rag_sidebar_view, RagSidebarPalette, RagSidebarView, RagSide, RagTooth,
+};
+/// Re-exportados para que el host enrute [`AllichayMsg::Sidebar`] y guarde el
+/// estado del sidebar unificado sin depender del crate del widget a mano.
+pub use llimphi_widget_rag_sidebar::{RagSidebarMsg, RagSidebarState};
 use llimphi_widget_scroll::{clamp_offset, scroll_y, ScrollPalette};
-use llimphi_widget_segmented::{segmented_view, SegmentedPalette};
+use llimphi_widget_select::{
+    select_menu_view, select_trigger_view, SelectItem, SelectMenuSpec, SelectPalette, SelectPhase,
+};
 use llimphi_widget_slider::{slider_view, SliderPalette};
 use llimphi_widget_switch::{switch_view, SwitchPalette};
 use llimphi_widget_table::{list_view, table_view, table_height, TablePalette};
-use llimphi_widget_text_input::{text_input_view, TextInputPalette, TextInputState};
+use llimphi_widget_text_input::{
+    float_target, text_input_field_view, text_input_view_full, MemClipboard, TextInputEvent,
+    TextInputPalette, TextInputState,
+};
+use llimphi_widget_edit_menu::{self as editmenu, EditFlags};
+pub use llimphi_widget_edit_menu::EditAction;
+use llimphi_widget_context_menu::context_menu_view;
 
 use std::collections::BTreeMap;
 
@@ -58,22 +81,25 @@ use std::collections::BTreeMap;
 /// icono, no un rótulo (el nombre lo lleva el encabezado del panel desplegado).
 const RAIL_W: f32 = 52.0;
 
-/// Cuántas opciones de un [`Control::Dropdown`] caben cómodas como botones
-/// segmentados en una fila. Por encima de esto el segmented se amontona y
-/// desborda (p. ej. 7 modos de tiling), así que el renderer cae a un
-/// **radio-group vertical** (una fila seleccionable por opción).
-const SEGMENTED_MAX: usize = 5;
-
 // =====================================================================
 // Mensajes del módulo
 // =====================================================================
 
 /// Lo que emite el renderizador. El host lo envuelve en su propio `Msg`
 /// (típicamente `Msg::Allichay(AllichayMsg)`) y lo resuelve en su `update`.
-#[derive(Debug, Clone, PartialEq)]
+// Sin `PartialEq`: `Input` lleva un `TextInputEvent` (con `KeyEvent`, que no es
+// comparable). No se compara `AllichayMsg` en ningún lado; los `Msg` de los hosts
+// solo derivan `Clone`.
+#[derive(Debug, Clone)]
 pub enum AllichayMsg {
     /// Se clickeó el diente de la sección `índice`.
     SelectSection(usize),
+    /// Mensaje del **sidebar unificado** (`rag-sidebar`): ejes de disposición
+    /// (flota/fijo/autoesconde/un-dos-pasos), buscador y control. El host lo
+    /// enruta a [`AllichayState::apply_sidebar`]. El `Activate` del rail NO llega
+    /// aquí: la vista lo intercepta y lo convierte en [`AllichayMsg::SelectSection`]
+    /// (selector fijo — el panel de la sección activa nunca colapsa).
+    Sidebar(RagSidebarMsg),
     /// Se enfocó un campo de texto (para empezar a teclear sobre él).
     Focus(FieldPath),
     /// Se enfocó la celda `(row, col)` de un agregado (lista/tabla) en `path`.
@@ -87,6 +113,33 @@ pub enum AllichayMsg {
     Change(FieldPath, FieldValue),
     /// El panel se desplazó: nuevo offset absoluto (ya clampeado).
     ScrollTo(f32),
+    /// Un **evento de mouse** del campo `path` (posicionar caret / doble-click =
+    /// palabra / triple = todo / arrastre = selección), emitido por el
+    /// `text_input_view_full`. El host, ante un `Press` sobre un campo **no focado**,
+    /// lo enfoca+siembra primero (así el PRIMER click llega al estado y el
+    /// doble-click cuenta desde ahí), y luego aplica con [`AllichayState::apply_input`]
+    /// (que usa el buffer focado). El `path` es para ese enfoque-al-Press.
+    Input(FieldPath, TextInputEvent),
+    /// Se eligió una acción del **menú de edición** (click derecho → cortar/
+    /// copiar/pegar/…). El host la aplica con [`AllichayState::apply_edit_action`]
+    /// y persiste el cambio si lo hubo.
+    EditAction(EditAction),
+    /// Se cerró el menú de edición (click-fuera o Esc). El host llama a
+    /// [`AllichayState::close_edit_menu`].
+    CloseEditMenu,
+    /// Se clickeó el disparador de un **select** (`Control::Dropdown`): abre su
+    /// menú anclado en `(x, y)` (esquina inferior-izquierda del disparador, coords
+    /// absolutas) con ancho `w` (= el del disparador), o lo cierra si ya estaba
+    /// abierto. El host llama a [`AllichayState::toggle_dropdown`].
+    ToggleDropdown(FieldPath, f32, f32, f32),
+    /// Se clickeó el disparador (swatch) de un **color-picker** (`Control::ColorPicker`):
+    /// abre su POPUP anclado en `(x, y)` (esquina inferior-izquierda del swatch) con
+    /// ancho `w`, o lo cierra si ya estaba abierto. Así el picker NO ocupa la ventana
+    /// inline. El host llama a [`AllichayState::toggle_colorpicker`].
+    ToggleColorPicker(FieldPath, f32, f32, f32),
+    /// Arrastre sobre el cono HSV 3D del popup de color: `(d_yaw, d_pitch)` en
+    /// radianes. El host llama a [`AllichayState::orbit_cone`].
+    ColorOrbit(f32, f32),
 }
 
 // =====================================================================
@@ -116,6 +169,33 @@ pub struct AllichayState {
     /// Desplazamiento vertical (px) del panel activo, si su contenido excede el
     /// viewport. Se reinicia al cambiar de diente.
     scroll: f32,
+    /// Clipboard en memoria para copiar/cortar/pegar dentro del campo focado.
+    clipboard: MemClipboard,
+    /// Ancla (coords de ventana) del **menú de edición** abierto con click
+    /// derecho sobre un campo, o `None` si está cerrado. El host lo monta en su
+    /// `view_overlay` con [`edit_menu_overlay`]. `None` por [`Default`].
+    edit_menu: Option<(f32, f32)>,
+    /// El **select desplegado** (`Control::Dropdown` abierto): su path + el
+    /// **ancla** `(x, y)` (esquina inferior-izquierda del disparador, coords
+    /// absolutas) + el **ancho** del disparador, para pintar el menú en
+    /// `view_overlay` con el mismo ancho y saliendo de abajo. `None` = todos
+    /// cerrados. Sólo uno a la vez; al elegir/cambiar se cierra.
+    open_dropdown: Option<(FieldPath, f32, f32, f32)>,
+    /// El **color-picker desplegado** (`Control::ColorPicker` abierto): su path +
+    /// ancla `(x, y)` + ancho del swatch, para pintar el POPUP en `view_overlay`
+    /// con [`colorpicker_overlay`]. `None` = cerrado. Sólo uno a la vez.
+    open_colorpicker: Option<(FieldPath, f32, f32, f32)>,
+    /// Órbita del cono HSV 3D del popup de color (la mantiene el estado para que
+    /// el arrastre persista entre re-renders).
+    cone_orbit: ConeOrbit,
+    /// Estado del **sidebar unificado** (widget `rag-sidebar`): los cuatro ejes
+    /// de disposición, el buscador y el diente abierto. En allichay es un
+    /// **selector fijo**: el diente abierto sigue a [`Self::selected`] y nunca
+    /// colapsa (lo re-fija [`Self::select`]/[`Self::apply_sidebar`] y la vista).
+    /// Los hosts con su propio rail (wawa-panel) no tocan este campo: su
+    /// [`RagSidebarState::search`] queda vacío, así que el cuerpo compartido
+    /// (`schema_panel`) no filtra nada.
+    pub sidebar: RagSidebarState,
 }
 
 /// Lo que el estado guarda mientras se teclea una celda de lista/tabla: con esto
@@ -146,14 +226,30 @@ impl AllichayState {
         self.selected
     }
 
-    /// Selecciona la sección `i`. Limpia el foco de texto y el scroll (cambiar
-    /// de diente arranca arriba, sin edición en curso).
+    /// Selecciona la sección `i`. Limpia el foco de texto, el scroll y el filtro
+    /// del buscador (cambiar de diente arranca arriba, sin edición en curso), y
+    /// re-fija el diente abierto del sidebar unificado en la sección elegida (el
+    /// panel de la sección activa nunca colapsa).
     pub fn select(&mut self, i: usize) {
         self.selected = i;
         self.scroll = 0.0;
+        self.sidebar.open = Some(i as u64);
+        self.sidebar.selected = Some(i as u64);
+        self.sidebar.search.clear();
         self.blur();
     }
 
+    /// Enruta un [`RagSidebarMsg`] del sidebar unificado (ejes de disposición,
+    /// buscador, control) al estado. El `Activate` del rail NO llega aquí: la
+    /// vista lo intercepta como [`AllichayMsg::SelectSection`]. Tras reducir los
+    /// ejes/buscador, re-fija el diente abierto en la sección seleccionada para
+    /// que el panel **nunca colapse** (selector fijo).
+    pub fn apply_sidebar(&mut self, msg: RagSidebarMsg) {
+        self.sidebar.update(msg);
+        self.sidebar.open = Some(self.selected as u64);
+        self.sidebar.selected = Some(self.selected as u64);
+    }
+
     /// Offset de scroll actual del panel (px).
     pub fn scroll(&self) -> f32 {
         self.scroll
@@ -246,23 +342,201 @@ impl AllichayState {
     /// [`FieldValue::Text`]; para una celda de agregado es el agregado entero
     /// con esa celda reemplazada. `None` si no hay foco o la tecla no editó.
     pub fn apply_key(&mut self, event: &KeyEvent) -> Option<(FieldPath, FieldValue)> {
+        // Buscador del sidebar unificado con foco: las teclas editan el filtro
+        // (no los campos). El módulo no recibe teclado propio, así que el host
+        // rutea CADA tecla aquí mientras el panel está abierto; este atajo la
+        // resuelve sin que el host tenga que conocer el buscador. No cambia
+        // ningún campo → devuelve `None`.
+        if self.sidebar.search_focused {
+            self.apply_search_key(event);
+            return None;
+        }
         let key = self.focused.clone()?;
         let st = self.inputs.get_mut(&key)?;
-        if !st.apply_key(event) {
+        if !st.apply_key_with_clipboard(event, &mut self.clipboard) {
             return None;
         }
         let text = st.text();
+        self.change_from_focused(&key, text)
+    }
+
+    /// Aplica una tecla al **buscador** del sidebar unificado (cuando tiene el
+    /// foco): Esc/Enter lo sueltan, Backspace borra, el resto inserta el texto
+    /// tipeado. Espeja el ruteo canónico de agora/nakui.
+    fn apply_search_key(&mut self, event: &KeyEvent) {
+        if event.state != KeyState::Pressed {
+            return;
+        }
+        match &event.key {
+            Key::Named(NamedKey::Escape) | Key::Named(NamedKey::Enter) => {
+                self.sidebar.search_focused = false;
+            }
+            Key::Named(NamedKey::Backspace) => {
+                self.sidebar.search.pop();
+            }
+            _ => {
+                if let Some(t) = &event.text {
+                    if !t.is_empty() && !t.chars().any(char::is_control) {
+                        self.sidebar.search.push_str(t);
+                    }
+                }
+            }
+        }
+    }
+
+    /// Arma el `(FieldPath, FieldValue)` del campo focado a partir de su texto
+    /// actual — según sea celda de agregado, hex, o escalar. Compartido por
+    /// [`Self::apply_key`], [`Self::apply_input`] y [`Self::apply_edit_action`]
+    /// (un solo lugar decide la forma del cambio). El hex sólo emite si parsea.
+    fn change_from_focused(&self, key: &str, text: String) -> Option<(FieldPath, FieldValue)> {
         if let Some(c) = &self.edit_cell {
             return Some((c.path.clone(), c.base.clone().with_cell(c.row, c.col, &text)));
         }
         if self.edit_hex {
             // El buffer es un hex; sólo emitimos cuando parsea a un color válido
             // (mientras se escribe a medias no se aplica, pero el buffer se
-            // conserva). El alfa actual no está acá → 255; el slider A lo ajusta.
-            let path = FieldPath::from(key.as_str());
+            // conserva). El alfa actual no está aquí → 255; el slider A lo ajusta.
+            let path = FieldPath::from(key);
             return parse_hex(&text, 255).map(|rgba| (path, FieldValue::Color(rgba)));
         }
-        Some((FieldPath::from(key.as_str()), FieldValue::Text(text)))
+        Some((FieldPath::from(key), FieldValue::Text(text)))
+    }
+
+    /// Aplica un **evento de mouse** ([`AllichayMsg::Input`]) al campo focado:
+    /// posiciona el caret / selecciona palabra (doble-click) / todo (triple) /
+    /// arrastra la selección. Devuelve `Some((path, value))` sólo si el texto
+    /// cambió (raro para gestos de mouse; el pegado va por `apply_key`); el resto
+    /// muta la selección/caret y el host re-pinta igual. Requiere el campo focado
+    /// (su buffer existe): el `text_input_view_full` sólo emite eventos cuando lo
+    /// está.
+    pub fn apply_input(&mut self, ev: TextInputEvent) -> Option<(FieldPath, FieldValue)> {
+        // Click derecho: abre el menú de edición en `(x, y)` en vez de tocar el
+        // texto. Requiere foco (la vista full sólo emite eventos focada; el host
+        // enfoca al Press/Context de un campo no focado antes de llamar aquí).
+        if let TextInputEvent::Context { x, y } = ev {
+            if self.focused.is_some() {
+                self.edit_menu = Some((x, y));
+            }
+            return None;
+        }
+        // Usa el buffer FOCADO (`self.focused`), no un path: así vale igual para un
+        // campo escalar, el hex, o una **celda** (cuya clave es `cell_key`). Espeja
+        // a `apply_key`.
+        let key = self.focused.clone()?;
+        let st = self.inputs.get_mut(&key)?;
+        let antes = st.text();
+        if !st.handle(ev, &mut self.clipboard) {
+            return None;
+        }
+        let text = st.text();
+        // Los gestos de MOUSE (Press/Drag) mueven caret/selección pero NO cambian el
+        // texto — `handle` devuelve `true` igual (hay que repintar el caret). Si
+        // emitiéramos un `Change` con el mismo texto en cada Press, el host haría
+        // route_change→persistir→re-sembrar el campo ENTRE clicks, reseteando el
+        // contador de multi-click (era el bug del "doble-click a los 16 clicks").
+        if text == antes {
+            return None;
+        }
+        self.change_from_focused(&key, text)
+    }
+
+    // =================================================================
+    // Menú de edición (click derecho sobre un campo)
+    // =================================================================
+
+    /// Ancla (coords de ventana) del menú de edición abierto, o `None`. El host
+    /// lo consulta en su `view_overlay` para montar [`edit_menu_overlay`].
+    pub fn edit_menu_anchor(&self) -> Option<(f32, f32)> {
+        self.edit_menu
+    }
+
+    /// Cierra el menú de edición (click-fuera, Esc, o tras elegir una acción).
+    pub fn close_edit_menu(&mut self) {
+        self.edit_menu = None;
+    }
+
+    /// Abre/cierra el select (`Control::Dropdown`) en `path`, anclando su menú en
+    /// `(x, y)` (inferior-izquierda del disparador) con ancho `w`. Uno a la vez.
+    pub fn toggle_dropdown(&mut self, path: &FieldPath, x: f32, y: f32, w: f32) {
+        if self.open_dropdown.as_ref().map(|(p, _, _, _)| p) == Some(path) {
+            self.open_dropdown = None;
+        } else {
+            self.open_dropdown = Some((path.clone(), x, y, w));
+        }
+    }
+
+    /// `true` si el select en `path` está desplegado.
+    pub fn is_dropdown_open(&self, path: &FieldPath) -> bool {
+        self.open_dropdown.as_ref().map(|(p, _, _, _)| p) == Some(path)
+    }
+
+    /// El path + ancla `(x, y)` + ancho del select abierto, para su menú overlay.
+    pub fn open_dropdown_anchor(&self) -> Option<(&FieldPath, f32, f32, f32)> {
+        self.open_dropdown.as_ref().map(|(p, x, y, w)| (p, *x, *y, *w))
+    }
+
+    /// Cierra cualquier select abierto (tras elegir una opción / click-fuera).
+    pub fn close_dropdown(&mut self) {
+        self.open_dropdown = None;
+    }
+
+    /// Abre/cierra el POPUP de color (`Control::ColorPicker`) en `path`, anclado en
+    /// `(x, y)` (inferior-izquierda del swatch) con ancho `w`. Uno a la vez; abrir
+    /// uno cierra cualquier select. Al abrir, siembra el color actual en recientes.
+    pub fn toggle_colorpicker(&mut self, path: &FieldPath, x: f32, y: f32, w: f32) {
+        if self.open_colorpicker.as_ref().map(|(p, _, _, _)| p) == Some(path) {
+            self.open_colorpicker = None;
+        } else {
+            self.open_dropdown = None;
+            self.open_colorpicker = Some((path.clone(), x, y, w));
+        }
+    }
+
+    /// `true` si el color-picker en `path` está desplegado.
+    pub fn is_colorpicker_open(&self, path: &FieldPath) -> bool {
+        self.open_colorpicker.as_ref().map(|(p, _, _, _)| p) == Some(path)
+    }
+
+    /// El path + ancla + ancho del color-picker abierto, para su popup overlay.
+    pub fn open_colorpicker_anchor(&self) -> Option<(&FieldPath, f32, f32, f32)> {
+        self.open_colorpicker.as_ref().map(|(p, x, y, w)| (p, *x, *y, *w))
+    }
+
+    /// La órbita actual del cono HSV 3D del popup.
+    pub fn cone_orbit(&self) -> ConeOrbit {
+        self.cone_orbit
+    }
+
+    /// Aplica un arrastre `(d_yaw, d_pitch)` (rad) al cono HSV del popup.
+    pub fn orbit_cone(&mut self, d_yaw: f32, d_pitch: f32) {
+        self.cone_orbit.orbit(d_yaw, d_pitch);
+    }
+
+    /// Banderas de habilitación de los ítems del menú, derivadas del campo
+    /// focado (sin selección → Cortar/Copiar grises; masked → sin Copiar; etc).
+    /// [`EditFlags::default`] si no hay foco.
+    pub fn edit_flags(&self) -> EditFlags {
+        match self.focused.as_ref().and_then(|k| self.inputs.get(k)) {
+            Some(st) => EditFlags::from_editor(st.editor(), st.is_masked()),
+            None => EditFlags::default(),
+        }
+    }
+
+    /// Aplica una [`EditAction`] del menú al campo focado (reusa el mismo
+    /// `apply` del atajo de teclado, vía [`llimphi_widget_edit_menu::apply`]),
+    /// cierra el menú y devuelve el cambio si el texto cambió (para persistir).
+    /// Espeja [`Self::apply_key`].
+    pub fn apply_edit_action(&mut self, action: EditAction) -> Option<(FieldPath, FieldValue)> {
+        self.edit_menu = None;
+        let key = self.focused.clone()?;
+        let st = self.inputs.get_mut(&key)?;
+        let antes = st.text();
+        editmenu::apply(st.editor_mut(), action, &mut self.clipboard);
+        let text = st.text();
+        if text == antes {
+            return None;
+        }
+        self.change_from_focused(&key, text)
     }
 
     /// Acceso interno al buffer de un campo escalar focado para pintarlo.
@@ -290,8 +564,16 @@ impl AllichayState {
 // Vista
 // =====================================================================
 
-/// Pinta el esquema completo: rail de dientes (secciones) + panel de la sección
-/// activa. `on_msg` mapea los [`AllichayMsg`] del módulo al `Msg` del host.
+/// Pinta el esquema completo con el **sidebar unificado** (`rag-sidebar`): un
+/// diente por sección del schema y, en el panel del diente activo, el cuerpo
+/// schema-driven de la sección seleccionada. El rail, el panel, el **header
+/// uniforme** (título de la sección), el **buscador** y el control de disposición
+/// los pinta UN solo widget — allichay no re-deriva ninguno.
+///
+/// Es un **selector fijo**: clickear un diente selecciona su sección (nunca
+/// colapsa el panel). `on_msg` mapea los [`AllichayMsg`] del módulo al `Msg` del
+/// host; el host resuelve `SelectSection` con [`AllichayState::select`] y el
+/// resto de ejes/buscador con [`AllichayState::apply_sidebar`].
 pub fn allichay_view<Msg, F>(
     schema: &Schema,
     state: &AllichayState,
@@ -302,22 +584,100 @@ where
     Msg: Clone + Send + Sync + 'static,
     F: Fn(AllichayMsg) -> Msg + Clone + Send + Sync + 'static,
 {
-    let rail = build_rail(schema, state, theme, on_msg.clone());
-    let panel = build_panel(schema, state, theme, on_msg);
+    // Sin secciones: sólo el cuerpo vacío (no hay dientes que pintar).
+    if schema.sections.is_empty() {
+        return build_panel(schema, state, theme, on_msg);
+    }
+    let sel = state.selected.min(schema.sections.len() - 1);
 
-    View::new(Style {
-        flex_direction: FlexDirection::Row,
-        size: Size {
-            width: percent(1.0_f32),
-            height: percent(1.0_f32),
-        },
-        gap: Size {
-            width: length(8.0_f32),
-            height: length(0.0_f32),
-        },
-        ..Default::default()
-    })
-    .children(vec![rail, panel])
+    // Un diente por sección; el icono sale del glifo declarado en `Section.icon`.
+    let teeth: Vec<RagTooth<Msg>> = schema
+        .sections
+        .iter()
+        .enumerate()
+        .map(|(i, s)| {
+            let glyph = s.icon.clone();
+            RagTooth::new(
+                i as u64,
+                s.title.clone(),
+                Arc::new(move |size, color| tooth_icon(Some(glyph.clone()), size, color)),
+            )
+        })
+        .collect();
+
+    // Cuerpo = los campos de la sección seleccionada (filtrados por el buscador).
+    // El TÍTULO de la sección lo pone el cabezal uniforme del widget — el cuerpo
+    // NO repite la franja-header (por eso ya no hay `section_head`).
+    let body = build_panel(schema, state, theme, on_msg.clone());
+
+    // Selector FIJO: el diente abierto es SIEMPRE la sección seleccionada (nunca
+    // colapsa). El resto de ejes (buscador, control, ancho, flota/fijo) salen del
+    // estado real del sidebar.
+    let mut sb = state.sidebar.clone();
+    sb.open = Some(sel as u64);
+    sb.selected = Some(sel as u64);
+
+    // ¿El buscador tiene coincidencias en la sección activa? (tiñe el control).
+    let q = state.sidebar.search.trim().to_lowercase();
+    let sec = &schema.sections[sel];
+    let hits = !q.is_empty()
+        && sec
+            .fields
+            .iter()
+            .chain(sec.subsections.iter().flat_map(|s| s.fields.iter()))
+            .any(|f| field_matches(f, &q));
+
+    let spec = RagSidebarView {
+        teeth,
+        body,
+        accessory: None,
+        search_hits: hits,
+        t: 0.0,
+        rail_w: RAIL_W,
+        // Click en un diente = seleccionar la sección (nunca colapsa); el resto de
+        // mensajes (ejes de disposición, buscador, control) van al estado.
+        map: Arc::new(move |rm| match rm {
+            RagSidebarMsg::Activate(id) => on_msg(AllichayMsg::SelectSection(id as usize)),
+            other => on_msg(AllichayMsg::Sidebar(other)),
+        }),
+        on_drop: None,
+        on_reorder: None,
+        grow: None,
+    };
+    rag_sidebar_view(&sb, spec, RagSide::Left, &RagSidebarPalette::from_theme(theme))
+}
+
+/// Monta el **menú de edición** (cortar/copiar/pegar/deshacer/…) si está abierto
+/// (click derecho sobre un campo → [`AllichayState::edit_menu_anchor`]). El host
+/// lo devuelve **apilado** desde su `view_overlay`, encima del formulario. Los
+/// ítems se habilitan según el estado real del campo focado (sin selección →
+/// Cortar/Copiar grises; masked → sin Copiar). `viewport` = `(ancho, alto)` de
+/// la ventana para clampear el menú al borde. `on_msg` mapea
+/// [`AllichayMsg::EditAction`]/[`AllichayMsg::CloseEditMenu`] al `Msg` del host,
+/// que resuelve con [`AllichayState::apply_edit_action`]/[`AllichayState::close_edit_menu`].
+/// Devuelve `None` cuando el menú está cerrado (el host apila lo que ya tenía).
+pub fn edit_menu_overlay<Msg, F>(
+    state: &AllichayState,
+    theme: &Theme,
+    viewport: (f32, f32),
+    on_msg: F,
+) -> Option<View<Msg>>
+where
+    Msg: Clone + 'static,
+    F: Fn(AllichayMsg) -> Msg + Clone + Send + Sync + 'static,
+{
+    let anchor = state.edit_menu_anchor()?;
+    let flags = state.edit_flags();
+    let act = on_msg.clone();
+    let spec = editmenu::edit_context_menu(
+        anchor,
+        viewport,
+        theme,
+        flags,
+        move |a| act(AllichayMsg::EditAction(a)),
+        on_msg(AllichayMsg::CloseEditMenu),
+    );
+    Some(context_menu_view(spec))
 }
 
 /// Pinta la configuración como un **modal centrado** (scrim + card), para
@@ -342,8 +702,8 @@ where
     Msg: Clone + Send + Sync + 'static,
     F: Fn(AllichayMsg) -> Msg + Clone + Send + Sync + 'static,
 {
-    let body = allichay_view(schema, state, theme, on_msg);
-    modal_view(ModalSpec {
+    let body = allichay_view(schema, state, theme, on_msg.clone());
+    let modal = modal_view(ModalSpec {
         title: title.into(),
         body,
         buttons: vec![ModalButton::cancel(close_label, on_dismiss.clone())],
@@ -351,42 +711,25 @@ where
         viewport,
         on_dismiss,
         palette: ModalPalette::from_theme(theme),
-    })
-}
-
-/// Rail de **dientes** (el widget `dock-rail`): una sección = un diente. El
-/// diente sobresale del rail, lleva su icono y se arrastra; al activarse muestra
-/// su panel (las demás secciones quedan ocultas hasta que se las elige).
-fn build_rail<Msg, F>(schema: &Schema, state: &AllichayState, theme: &Theme, on_msg: F) -> View<Msg>
-where
-    Msg: Clone + Send + Sync + 'static,
-    F: Fn(AllichayMsg) -> Msg + Clone + Send + Sync + 'static,
-{
-    let sel = state.selected.min(schema.sections.len().saturating_sub(1));
-    let items: Vec<DockRailItem> = schema
-        .sections
-        .iter()
-        .enumerate()
-        .map(|(i, _)| DockRailItem {
-            id: i as u64,
-            active: i == sel,
+        body_scroll: None,
+    });
+    // Menú del select abierto (si hay), ENCIMA del modal.
+    match dropdown_overlay(schema, state, theme, viewport, on_msg) {
+        Some(menu) => View::new(Style {
+            size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+            ..Default::default()
         })
-        .collect();
-    let icons: Vec<String> = schema.sections.iter().map(|s| s.icon.clone()).collect();
-    let activate = on_msg;
-    dock_rail_view(
-        &items,
-        RAIL_W,
-        &DockRailPalette::from_theme(theme),
-        move |id, size, color| tooth_icon(icons.get(id as usize).cloned(), size, color),
-        move |id| activate(AllichayMsg::SelectSection(id as usize)),
-        |_| None,
-    )
+        .children(vec![modal, menu]),
+        None => modal,
+    }
 }
 
-/// Dibuja el icono de un diente (un glifo emoji que la fuente tenga), con el
-/// color ya resuelto por el widget según el estado activo/inactivo.
+/// Dibuja el icono de un diente. El glifo declarado en `Section.icon` se
+/// resuelve a un **ícono vectorial** de `llimphi-icons` (determinista en toda
+/// máquina); si el glifo no está en el catálogo, cae a texto. El color lo
+/// resuelve el widget según el estado activo/inactivo.
 fn tooth_icon<Msg: Clone + 'static>(glyph: Option<String>, size: f32, color: Color) -> View<Msg> {
+    let g = glyph.unwrap_or_else(|| "•".to_string());
     View::new(Style {
         size: Size {
             width: length(size),
@@ -396,12 +739,7 @@ fn tooth_icon<Msg: Clone + 'static>(glyph: Option<String>, size: f32, color: Col
         justify_content: Some(JustifyContent::Center),
         ..Default::default()
     })
-    .text_aligned(
-        glyph.unwrap_or_else(|| "•".to_string()),
-        size * 0.9,
-        color,
-        Alignment::Center,
-    )
+    .children(vec![llimphi_icons::glyph_or_text_view(&g, size * 0.9, color, 1.8)])
 }
 
 fn build_panel<Msg, F>(schema: &Schema, state: &AllichayState, theme: &Theme, on_msg: F) -> View<Msg>
@@ -446,8 +784,17 @@ where
     View::new(panel_style()).children(section_items(section, base, state, theme, on_msg))
 }
 
-/// Los views de una sección (encabezado + campos + subsecciones), sin el
-/// contenedor — para apilar varias secciones en un mismo panel ([`schema_panel`]).
+/// Los views de una sección (campos + subsecciones), sin el contenedor — para
+/// apilar varias secciones en un mismo panel ([`schema_panel`]).
+///
+/// **Sin franja-header propia:** el título de la sección lo pone el cabezal
+/// uniforme del widget `rag-sidebar` (o el canvas del host); aquí sólo se foldea
+/// la descripción (`help`) como primera línea tenue del cuerpo.
+///
+/// **Buscador real:** cuando [`RagSidebarState::search`] (en `state.sidebar`)
+/// tiene texto, se filtran los campos por su `label` (substring
+/// case-insensitive); una subsección sin campos coincidentes se omite entera.
+/// Los hosts con rail propio (wawa-panel) dejan ese buscador vacío → no filtra.
 fn section_items<Msg, F>(
     section: &allichay::Section,
     base: &FieldPath,
@@ -459,18 +806,31 @@ where
     Msg: Clone + Send + Sync + 'static,
     F: Fn(AllichayMsg) -> Msg + Clone + Send + Sync + 'static,
 {
+    let q = state.sidebar.search.trim().to_lowercase();
     let mut children: Vec<View<Msg>> = Vec::new();
-    children.push(section_head(&section.title, &section.help, theme));
+
+    // Descripción de la sección foldeada como primera línea tenue (sólo en
+    // reposo; durante una búsqueda se omite para no separar los resultados).
+    if q.is_empty() && !section.help.is_empty() {
+        children.push(help_view(&section.help, theme));
+    }
 
     for field in &section.fields {
+        if !field_matches(field, &q) {
+            continue;
+        }
         let path = base.clone().push(field.id.clone());
         children.push(field_row(field, path, state, theme, on_msg.clone()));
     }
 
     for sub in &section.subsections {
+        let matching: Vec<&Field> = sub.fields.iter().filter(|f| field_matches(f, &q)).collect();
+        if matching.is_empty() {
+            continue;
+        }
         children.push(subsection_head(&sub.title, theme));
         let sub_base = base.clone().push(sub.id.clone());
-        for field in &sub.fields {
+        for field in matching {
             let path = sub_base.clone().push(field.id.clone());
             children.push(field_row(field, path, state, theme, on_msg.clone()));
         }
@@ -478,6 +838,13 @@ where
     children
 }
 
+/// `true` si el campo coincide con el filtro del buscador: query vacío = todos;
+/// si no, su `label` (case-insensitive) contiene la query. `query` ya viene en
+/// minúsculas y sin espacios de borde.
+fn field_matches(field: &Field, query: &str) -> bool {
+    query.is_empty() || field.label.to_lowercase().contains(query)
+}
+
 /// Pinta el panel de un diente: **todas** las secciones de `schema` apiladas
 /// (cada una con su encabezado de grupo), con scroll vertical si el contenido
 /// excede `viewport_h`. Es el panel de un diente del panel de control — el id
@@ -538,6 +905,98 @@ where
     View::new(panel_style()).children(vec![scroller])
 }
 
+/// Como [`schema_panel`] pero con una **vista al pie** (`footer`, de alto `footer_h`)
+/// DEBAJO de los campos, todo en UN mismo scroll. Para poner un gráfico/editor
+/// interactivo bajo un formulario chico y que scrolleen juntos (p. ej. el editor de
+/// recorrido Prezi bajo su formulario).
+pub fn schema_panel_with_footer<Msg, F>(
+    schema: &Schema,
+    footer: View<Msg>,
+    footer_h: f32,
+    state: &AllichayState,
+    theme: &Theme,
+    viewport_h: f32,
+    on_msg: F,
+) -> View<Msg>
+where
+    Msg: Clone + Send + Sync + 'static,
+    F: Fn(AllichayMsg) -> Msg + Clone + Send + Sync + 'static,
+{
+    let mut items: Vec<View<Msg>> = Vec::new();
+    for section in &schema.sections {
+        let base = FieldPath::empty().push(section.id.clone());
+        items.extend(section_items(section, &base, state, theme, on_msg.clone()));
+    }
+    // El pie va en un contenedor de alto fijo para que el scroll lo cuente entero.
+    items.push(
+        View::new(Style {
+            size: Size { width: percent(1.0_f32), height: length(footer_h) },
+            flex_shrink: 0.0,
+            ..Default::default()
+        })
+        .children(vec![footer]),
+    );
+
+    let content = View::new(Style {
+        flex_direction: FlexDirection::Column,
+        size: Size { width: percent(1.0_f32), height: Dimension::auto() },
+        gap: Size { width: length(0.0_f32), height: length(10.0_f32) },
+        ..Default::default()
+    })
+    .children(items);
+
+    let content_len = estimate_height(schema) + footer_h + 10.0;
+    let offset = state.scroll().min(content_len);
+    let on_scroll = on_msg;
+    let scroller = scroll_y(
+        offset,
+        content_len,
+        viewport_h,
+        content,
+        move |delta| {
+            on_scroll(AllichayMsg::ScrollTo(clamp_offset(offset + delta, content_len, viewport_h)))
+        },
+        &ScrollPalette::from_theme(theme),
+    );
+    View::new(panel_style()).children(vec![scroller])
+}
+
+/// Un **título editable** ligado a `path` (sin label ni chrome de campo), para
+/// usar como encabezado de un canvas — p. ej. el nombre de una instancia de
+/// perfil, arriba de sus tabs. Reusa el MISMO mecanismo de foco/edición que los
+/// campos (`AllichayState` + `text_input_view_full`): el host lo cablea con los
+/// mismos `AllichayMsg` (Focus/Input/Change) que ya maneja para el resto. `valor`
+/// es el texto actual (se muestra cuando el título no está focado).
+pub fn titulo_editable_view<Msg, F>(
+    path: FieldPath,
+    valor: &str,
+    state: &AllichayState,
+    theme: &Theme,
+    on_msg: F,
+) -> View<Msg>
+where
+    Msg: Clone + Send + Sync + 'static,
+    F: Fn(AllichayMsg) -> Msg + Clone + Send + Sync + 'static,
+{
+    // Input con **label flotante estilo Flutter** («Nombre» arriba del campo, que
+    // sube al enfocar o cuando hay texto). Reusa el foco/edición de los campos.
+    let palette = TextInputPalette::from_theme(theme);
+    let focused = state.is_focused(&path);
+    let mut tmp = TextInputState::new();
+    let st: &TextInputState = match (focused, state.input(&path)) {
+        (true, Some(real)) => real,
+        _ => {
+            tmp.set_text(valor);
+            &tmp
+        }
+    };
+    let float_t = float_target(focused, st);
+    let ip = path.clone();
+    text_input_field_view(st, "Nombre", focused, float_t, &palette, move |ev| {
+        on_msg(AllichayMsg::Input(ip.clone(), ev))
+    })
+}
+
 /// Estimación (generosa) del alto del contenido de un schema, para el scroll.
 fn estimate_height(schema: &Schema) -> f32 {
     let mut h = 0.0_f32;
@@ -562,19 +1021,23 @@ fn field_height(field: &Field) -> f32 {
     match &field.control {
         Control::Toggle => 22.0,
         Control::Slider { .. } => 28.0,
-        // Segmented (1 fila) para pocas opciones; radio-group (N filas) si son
-        // muchas. Ver [`dropdown_control`].
-        Control::Dropdown { options } => {
-            if options.len() <= SEGMENTED_MAX {
-                28.0
-            } else {
-                options.len() as f32 * 30.0
-            }
-        }
+        // Select: sólo el disparador (1 fila). El menú se pinta como overlay
+        // (`dropdown_overlay`), fuera del flujo — no ocupa alto del panel.
+        Control::Dropdown { .. } => 34.0,
         // Radio: siempre lista vertical, una fila por opción.
         Control::Radio { options } => options.len().max(1) as f32 * 30.0,
         Control::TextInput => 34.0,
-        Control::ColorPicker => color_picker_height(true),
+        // Color: sólo el swatch disparador (1 fila). El picker se pinta como POPUP
+        // (`colorpicker_overlay`), fuera del flujo — no ocupa alto del panel.
+        Control::ColorPicker => 28.0,
+        // Chips + botones-ícono en una sola línea.
+        Control::InlineActions { .. } => 28.0,
+        // Multi-select: los chips (elegidos) + el «＋» se envuelven; estimamos
+        // ~3 por línea a 30px. Como mínimo una línea (sólo el disparador).
+        Control::MultiSelect { .. } => {
+            let n = field.value.as_list().map(|s| s.len()).unwrap_or(0) + 1;
+            (n.div_ceil(3)).max(1) as f32 * 30.0 + 2.0
+        }
         Control::List { .. } => table_height(field.value.row_count(), false),
         Control::Table { .. } => table_height(field.value.row_count(), true),
         Control::Display => 8.0, // fila compacta sin label arriba
@@ -608,55 +1071,6 @@ fn panel_style() -> Style {
 // Encabezados y campos
 // =====================================================================
 
-fn section_head<Msg: Clone + 'static>(title: &str, help: &str, theme: &Theme) -> View<Msg> {
-    let title_v = View::new(Style {
-        size: Size {
-            width: percent(1.0_f32),
-            height: length(22.0_f32),
-        },
-        ..Default::default()
-    })
-    .text_aligned(title.to_string(), 16.0, theme.fg_text, Alignment::Start);
-    let mut kids = vec![title_v];
-    if !help.is_empty() {
-        kids.push(
-            View::new(Style {
-                size: Size {
-                    width: percent(1.0_f32),
-                    height: length(16.0_f32),
-                },
-                ..Default::default()
-            })
-            .text_aligned(help.to_string(), 11.0, theme.fg_muted, Alignment::Start),
-        );
-    }
-    kids.push(
-        View::new(Style {
-            size: Size {
-                width: percent(1.0_f32),
-                height: length(1.0_f32),
-            },
-            margin: Rect {
-                left: length(0.0_f32),
-                right: length(0.0_f32),
-                top: length(6.0_f32),
-                bottom: length(0.0_f32),
-            },
-            ..Default::default()
-        })
-        .fill(theme.border),
-    );
-    View::new(Style {
-        flex_direction: FlexDirection::Column,
-        size: Size {
-            width: percent(1.0_f32),
-            height: Dimension::auto(),
-        },
-        ..Default::default()
-    })
-    .children(kids)
-}
-
 fn subsection_head<Msg: Clone + 'static>(title: &str, theme: &Theme) -> View<Msg> {
     View::new(Style {
         size: Size {
@@ -728,7 +1142,7 @@ where
         Control::Slider { min, max, step } => {
             slider_control(field, path, *min, *max, *step, theme, on_msg)
         }
-        Control::Dropdown { options } => dropdown_control(field, path, options, theme, on_msg),
+        Control::Dropdown { options } => dropdown_control(field, path, options, state, theme, on_msg),
         Control::Radio { options } => radio_group(field, path, options, theme, on_msg),
         Control::ColorPicker => color_control(field, path, state, theme, on_msg),
         Control::TextInput => text_control(field, path, state, theme, on_msg),
@@ -736,12 +1150,59 @@ where
             list_control(field, path, item_label, state, theme, on_msg)
         }
         Control::Table { columns } => table_control(field, path, columns, state, theme, on_msg),
+        Control::InlineActions { chips, buttons } => {
+            inline_actions_control(field, path, chips, buttons, theme, on_msg)
+        }
+        Control::MultiSelect { options } => {
+            multiselect_control(field, path, options, state, theme, on_msg)
+        }
         Control::Display => return display_row(field, theme),
         // El botón ES la fila completa (lleva su rótulo dentro): no le ponemos
         // un label arriba como a los controles escalares.
         Control::Button => return button_control(field, path, theme, on_msg),
     };
 
+    // Regla estética del panel: los controles ESCALARES (opciones) van en DOS
+    // COLUMNAS — título a la izquierda, control a la derecha. Los agregados
+    // (lista/tabla), el color-picker (alto) y los ya-especiales (display/botón,
+    // que retornaron antes) conservan el ancho completo.
+    let dos_columnas = matches!(
+        field.control,
+        Control::Toggle
+            | Control::Slider { .. }
+            | Control::Dropdown { .. }
+            | Control::Radio { .. }
+            | Control::TextInput
+            | Control::ColorPicker
+            | Control::InlineActions { .. }
+    );
+    if dos_columnas {
+        let etiqueta = View::new(Style {
+            size: Size { width: length(150.0_f32), height: Dimension::auto() },
+            flex_shrink: 0.0,
+            ..Default::default()
+        })
+        .text_aligned(field.label.clone(), 12.0, theme.fg_text, Alignment::Start);
+        let control_col = View::new(Style {
+            flex_grow: 1.0,
+            size: Size { width: length(0.0_f32), height: Dimension::auto() },
+            ..Default::default()
+        })
+        .children(vec![control]);
+        let fila = View::new(Style {
+            flex_direction: FlexDirection::Row,
+            size: Size { width: percent(1.0_f32), height: Dimension::auto() },
+            align_items: Some(AlignItems::Center),
+            gap: Size { width: length(14.0_f32), height: length(0.0_f32) },
+            ..Default::default()
+        })
+        .children(vec![etiqueta, control_col]);
+        if field.help.is_empty() {
+            return fila;
+        }
+        return View::new(field_col_style()).children(vec![fila, help_view(&field.help, theme)]);
+    }
+
     let mut kids = vec![label_view(&field.label, theme), control];
     if !field.help.is_empty() {
         kids.push(help_view(&field.help, theme));
@@ -841,6 +1302,80 @@ where
     .children(vec![lbl])
 }
 
+/// [`Control::InlineActions`]: chips seleccionables (el activo resaltado en acento)
+/// + botones-ícono de pulso, en una fila alineada a la derecha. Cada clic emite
+/// `Change(path, Enum(id))`.
+fn inline_actions_control<Msg, F>(
+    field: &Field,
+    path: FieldPath,
+    chips: &[allichay::EnumOption],
+    buttons: &[(String, String)],
+    theme: &Theme,
+    on_msg: F,
+) -> View<Msg>
+where
+    Msg: Clone + Send + Sync + 'static,
+    F: Fn(AllichayMsg) -> Msg + Clone + Send + Sync + 'static,
+{
+    let cur = field.value.as_str().unwrap_or("");
+    let mut kids: Vec<View<Msg>> = Vec::new();
+    for c in chips {
+        let activo = c.id == cur;
+        let (fg, bg) = if activo {
+            (theme.bg_panel, theme.accent)
+        } else {
+            (theme.fg_muted, theme.bg_panel_alt)
+        };
+        let msg = on_msg(AllichayMsg::Change(path.clone(), FieldValue::Enum(c.id.clone())));
+        kids.push(
+            View::new(Style {
+                size: Size { width: Dimension::auto(), height: length(24.0_f32) },
+                align_items: Some(AlignItems::Center),
+                justify_content: Some(JustifyContent::Center),
+                flex_shrink: 0.0,
+                padding: Rect {
+                    left: length(9.0_f32),
+                    right: length(9.0_f32),
+                    top: length(0.0_f32),
+                    bottom: length(0.0_f32),
+                },
+                ..Default::default()
+            })
+            .fill(bg)
+            .radius(5.0)
+            .hover_fill(theme.bg_row_hover)
+            .on_click(msg)
+            .text(c.label.clone(), 11.0, fg),
+        );
+    }
+    for (glifo, action) in buttons {
+        let msg = on_msg(AllichayMsg::Change(path.clone(), FieldValue::Enum(action.clone())));
+        kids.push(
+            View::new(Style {
+                size: Size { width: length(26.0_f32), height: length(24.0_f32) },
+                align_items: Some(AlignItems::Center),
+                justify_content: Some(JustifyContent::Center),
+                flex_shrink: 0.0,
+                ..Default::default()
+            })
+            .fill(theme.bg_panel_alt)
+            .radius(5.0)
+            .hover_fill(theme.bg_button_hover)
+            .on_click(msg)
+            .text(glifo.clone(), 13.0, theme.fg_text),
+        );
+    }
+    View::new(Style {
+        flex_direction: FlexDirection::Row,
+        size: Size { width: percent(1.0_f32), height: length(26.0_f32) },
+        align_items: Some(AlignItems::Center),
+        justify_content: Some(JustifyContent::End),
+        gap: Size { width: length(4.0_f32), height: length(0.0_f32) },
+        ..Default::default()
+    })
+    .children(kids)
+}
+
 fn slider_control<Msg, F>(
     field: &Field,
     path: FieldPath,
@@ -881,10 +1416,15 @@ where
     )
 }
 
-fn dropdown_control<Msg, F>(
+/// **Multi-select con tags**: los ids elegidos van como *chips* (tag + ×) que se
+/// envuelven a varias líneas, y un disparador «＋» despliega el menú de opciones
+/// (lo pinta [`dropdown_overlay`], que ya sabe togglear la pertenencia). La × de
+/// un chip emite `Change(path, List(resto))`.
+fn multiselect_control<Msg, F>(
     field: &Field,
     path: FieldPath,
     options: &[allichay::EnumOption],
+    state: &AllichayState,
     theme: &Theme,
     on_msg: F,
 ) -> View<Msg>
@@ -892,21 +1432,209 @@ where
     Msg: Clone + Send + Sync + 'static,
     F: Fn(AllichayMsg) -> Msg + Clone + Send + Sync + 'static,
 {
-    let cur = field.value.as_str().unwrap_or("");
-    // Pocas opciones: botones segmentados (compacto, una fila).
-    if options.len() <= SEGMENTED_MAX {
-        let labels: Vec<&str> = options.iter().map(|o| o.label.as_str()).collect();
-        let selected = options.iter().position(|o| o.id == cur).unwrap_or(0);
-        let ids: Vec<String> = options.iter().map(|o| o.id.clone()).collect();
-        return segmented_view(
-            &labels,
-            selected,
-            move |i| on_msg(AllichayMsg::Change(path.clone(), FieldValue::Enum(ids[i].clone()))),
-            &SegmentedPalette::from_theme(theme),
-        );
+    let selected: Vec<String> = field.value.as_list().map(|s| s.to_vec()).unwrap_or_default();
+    let label_of = |id: &str| {
+        options.iter().find(|o| o.id == id).map(|o| o.label.clone()).unwrap_or_else(|| id.to_string())
+    };
+    let mut kids: Vec<View<Msg>> = Vec::new();
+    for id in &selected {
+        // La × quita este id de la lista (emite la lista sin él).
+        let resto: Vec<String> = selected.iter().filter(|x| *x != id).cloned().collect();
+        let rm = on_msg(AllichayMsg::Change(path.clone(), FieldValue::List(resto)));
+        let equis = View::new(Style {
+            size: Size { width: length(16.0_f32), height: length(18.0_f32) },
+            align_items: Some(AlignItems::Center),
+            justify_content: Some(JustifyContent::Center),
+            flex_shrink: 0.0,
+            ..Default::default()
+        })
+        .radius(4.0)
+        .hover_fill(theme.bg_button_hover)
+        .on_click(rm)
+        .text_aligned("✕".to_string(), 10.0, theme.fg_muted, Alignment::Center);
+        let chip = View::new(Style {
+            flex_direction: FlexDirection::Row,
+            size: Size { width: Dimension::auto(), height: length(24.0_f32) },
+            align_items: Some(AlignItems::Center),
+            flex_shrink: 0.0,
+            gap: Size { width: length(4.0_f32), height: length(0.0_f32) },
+            padding: Rect {
+                left: length(9.0_f32),
+                right: length(4.0_f32),
+                top: length(0.0_f32),
+                bottom: length(0.0_f32),
+            },
+            ..Default::default()
+        })
+        .fill(theme.bg_panel_alt)
+        .radius(5.0)
+        .children(vec![
+            View::new(Style {
+                size: Size { width: Dimension::auto(), height: Dimension::auto() },
+                ..Default::default()
+            })
+            .text(label_of(id), 11.0, theme.fg_text),
+            equis,
+        ]);
+        kids.push(chip);
     }
-    // Muchas opciones: radio-group vertical (reusa el render compartido).
-    radio_group(field, path, options, theme, on_msg)
+    // Disparador «＋ agregar…»: abre el menú (lo pinta `dropdown_overlay`).
+    let open = state.is_dropdown_open(&path);
+    let p = path.clone();
+    let trigger = select_trigger_view(
+        None,
+        "＋ agregar…",
+        open,
+        Some(160.0),
+        &SelectPalette::from_theme(theme),
+        move |x, y, w, h| on_msg(AllichayMsg::ToggleDropdown(p.clone(), x, y + h, w)),
+    );
+    kids.push(trigger);
+    View::new(Style {
+        flex_direction: FlexDirection::Row,
+        flex_wrap: FlexWrap::Wrap,
+        size: Size { width: percent(1.0_f32), height: Dimension::auto() },
+        align_items: Some(AlignItems::Center),
+        gap: Size { width: length(6.0_f32), height: length(6.0_f32) },
+        ..Default::default()
+    })
+    .children(kids)
+}
+
+fn dropdown_control<Msg, F>(
+    field: &Field,
+    path: FieldPath,
+    options: &[allichay::EnumOption],
+    state: &AllichayState,
+    theme: &Theme,
+    on_msg: F,
+) -> View<Msg>
+where
+    Msg: Clone + Send + Sync + 'static,
+    F: Fn(AllichayMsg) -> Msg + Clone + Send + Sync + 'static,
+{
+    // SELECT desplegable de verdad: SÓLO el disparador (opción actual + chevron).
+    // El menú lo pinta [`dropdown_overlay`] en la capa `view_overlay`, ANCLADO al
+    // click y encima de todo (no inline, no empuja los campos de abajo). El click
+    // del disparador manda las coords absolutas vía `on_click_screen`.
+    let cur = field.value.as_str().unwrap_or("");
+    let open = state.is_dropdown_open(&path);
+    let sel = options.iter().find(|o| o.id == cur).map(|o| SelectItem::new(o.label.clone()));
+    let p = path;
+    select_trigger_view(
+        sel.as_ref(),
+        "Elige…",
+        open,
+        None,
+        &SelectPalette::from_theme(theme),
+        // Ancla = esquina INFERIOR-izquierda del disparador (`y + h`); ancho = el
+        // del disparador (`w`) → el menú sale de abajo y copia el ancho del input.
+        move |x, y, w, h| on_msg(AllichayMsg::ToggleDropdown(p.clone(), x, y + h, w)),
+    )
+}
+
+/// El **menú desplegado** del select abierto, para apilarlo en `view_overlay`
+/// (encima de todo). `None` si no hay ninguno abierto. Busca el campo abierto en
+/// `schema` por su path (guardado en el estado con su ancla) y pinta su lista
+/// anclada. Elegir una opción manda `Change`; el click-fuera (scrim) la cierra.
+pub fn dropdown_overlay<Msg, F>(
+    schema: &Schema,
+    state: &AllichayState,
+    theme: &Theme,
+    viewport: (f32, f32),
+    on_msg: F,
+) -> Option<View<Msg>>
+where
+    Msg: Clone + Send + Sync + 'static,
+    F: Fn(AllichayMsg) -> Msg + Clone + Send + Sync + 'static,
+{
+    let (path, ax, ay, w) = state.open_dropdown_anchor()?;
+    let field = find_dropdown_field(schema, path)?;
+    // El menú lo abren tanto el Dropdown (elige uno) como el MultiSelect (togglea
+    // pertenencia). Sacamos las opciones y qué está elegido según el control.
+    let options = match &field.control {
+        Control::Dropdown { options } | Control::MultiSelect { options } => options,
+        _ => return None,
+    };
+    let es_multi = matches!(field.control, Control::MultiSelect { .. });
+    let items: Vec<SelectItem> = options.iter().map(|o| SelectItem::new(o.label.clone())).collect();
+    let visible: Vec<usize> = (0..items.len()).collect();
+    // Marcados: en Dropdown, la opción actual; en MultiSelect, todas las elegidas.
+    let selected: Vec<usize> = if es_multi {
+        let chosen = field.value.as_list().map(|s| s.to_vec()).unwrap_or_default();
+        options.iter().enumerate().filter(|(_, o)| chosen.contains(&o.id)).map(|(i, _)| i).collect()
+    } else {
+        let cur = field.value.as_str().unwrap_or("");
+        options.iter().position(|o| o.id == cur).into_iter().collect()
+    };
+    let ids: Vec<String> = options.iter().map(|o| o.id.clone()).collect();
+    let chosen_now: Vec<String> = field.value.as_list().map(|s| s.to_vec()).unwrap_or_default();
+    let p_pick = path.clone();
+    let om = on_msg.clone();
+    let on_pick = std::sync::Arc::new(move |i: usize| {
+        if es_multi {
+            // Togglea el id en la lista y emite la lista nueva.
+            let id = &ids[i];
+            let mut nueva = chosen_now.clone();
+            if let Some(pos) = nueva.iter().position(|x| x == id) {
+                nueva.remove(pos);
+            } else {
+                nueva.push(id.clone());
+            }
+            om(AllichayMsg::Change(p_pick.clone(), FieldValue::List(nueva)))
+        } else {
+            om(AllichayMsg::Change(p_pick.clone(), FieldValue::Enum(ids[i].clone())))
+        }
+    });
+    let pal = SelectPalette::from_theme(theme);
+    let spec = SelectMenuSpec {
+        anchor: (ax, ay),
+        viewport,
+        width: w.max(96.0), // el ancho del disparador
+        phase: SelectPhase::Ready(&items),
+        visible: &visible,
+        active: usize::MAX,
+        selected: &selected,
+        query: "",
+        searchable: false,
+        empty_text: "",
+        appear: 1.0,
+        on_pick,
+        on_hover: None,
+        on_dismiss: on_msg(AllichayMsg::ToggleDropdown(path.clone(), ax, ay, w)),
+        on_retry: None,
+        palette: &pal,
+    };
+    // Sale de abajo del disparador: nace pegado a su borde y se desliza hacia
+    // abajo (+ fade del enter). Key estable por path para no re-animar al re-render.
+    let mut hasher = std::collections::hash_map::DefaultHasher::new();
+    std::hash::Hash::hash(&path.to_string(), &mut hasher);
+    let key = std::hash::Hasher::finish(&hasher);
+    Some(select_menu_view(spec).animated_enter_from(
+        key,
+        std::time::Duration::from_millis(150),
+        Affine::translate((0.0, -10.0)),
+    ))
+}
+
+/// Busca el `Field` de un `Control::Dropdown` por su path (`[section.id,
+/// field.id]`), recorriendo secciones y subsecciones.
+fn find_dropdown_field<'a>(schema: &'a Schema, path: &FieldPath) -> Option<&'a Field> {
+    for sec in &schema.sections {
+        for f in &sec.fields {
+            if FieldPath(vec![sec.id.clone(), f.id.clone()]) == *path {
+                return Some(f);
+            }
+        }
+        for sub in &sec.subsections {
+            for f in &sub.fields {
+                if FieldPath(vec![sec.id.clone(), f.id.clone()]) == *path {
+                    return Some(f);
+                }
+            }
+        }
+    }
+    None
 }
 
 /// Lista vertical de radios (un círculo por opción). Es el cuerpo de
@@ -1016,14 +1744,14 @@ fn radio_row<Msg: Clone + 'static>(
     row
 }
 
-/// Delega en el widget agnóstico `llimphi-widget-color-picker`, traduciendo su
-/// `[u8;4]` a `AllichayMsg::Change(path, Color(..))`. El campo hex usa el foco
-/// del estado ([`AllichayState::is_editing_hex`]/`input`); el tecleo lo enruta
-/// el host a `apply_key`, que parsea el hex a Color.
+/// Sólo el **swatch disparador** del color (compacto): al clickearlo abre el
+/// POPUP anclado (`colorpicker_overlay`) en vez de pintar el picker inline
+/// ocupando la ventana. El swatch manda sus coords absolutas vía `on_click_screen`
+/// (igual que el disparador del select).
 fn color_control<Msg, F>(
     field: &Field,
     path: FieldPath,
-    state: &AllichayState,
+    _state: &AllichayState,
     theme: &Theme,
     on_msg: F,
 ) -> View<Msg>
@@ -1032,19 +1760,74 @@ where
     F: Fn(AllichayMsg) -> Msg + Clone + Send + Sync + 'static,
 {
     let cur = field.value.as_color().unwrap_or([0, 0, 0, 255]);
+    let pal = ColorPopupPalette::from_theme(theme);
+    let p = path;
+    // Swatch 40×24 (mismo look que `color_trigger_view`) pero con coords: ancla el
+    // popup a la esquina inferior-izquierda del swatch (`y + h`).
+    View::new(Style {
+        size: Size { width: length(40.0_f32), height: length(24.0_f32) },
+        flex_shrink: 0.0,
+        ..Default::default()
+    })
+    .fill(Color::from_rgba8(cur[0], cur[1], cur[2], cur[3]))
+    .radius(5.0)
+    .border(1.0, pal.border)
+    .on_click_screen(move |x, y, w, h| Some(on_msg(AllichayMsg::ToggleColorPicker(p.clone(), x, y + h, w))))
+}
+
+/// El POPUP de un color-picker abierto (`Control::ColorPicker`), para pintarlo en
+/// `view_overlay` ANCLADO al swatch y encima de todo (espeja [`dropdown_overlay`]).
+/// `None` si no hay ninguno abierto o el campo no está en `schema`.
+pub fn colorpicker_overlay<Msg, F>(
+    schema: &Schema,
+    state: &AllichayState,
+    theme: &Theme,
+    viewport: (f32, f32),
+    on_msg: F,
+) -> Option<View<Msg>>
+where
+    Msg: Clone + Send + Sync + 'static,
+    F: Fn(AllichayMsg) -> Msg + Clone + Send + Sync + 'static,
+{
+    let (path, ax, ay, w) = state.open_colorpicker_anchor()?;
+    let field = find_color_field(schema, path)?;
+    let cur = field.value.as_color().unwrap_or([0, 0, 0, 255]);
+    let hex_on = on_msg.clone();
+    let hex_path = path.clone();
     let hex = HexField {
-        focused: state.is_editing_hex(&path),
-        state: state.input(&path),
+        focused: state.is_editing_hex(path),
+        state: state.input(path),
         on_focus: on_msg(AllichayMsg::FocusHex(path.clone())),
+        on_input: std::sync::Arc::new(move |ev| hex_on(AllichayMsg::Input(hex_path.clone(), ev))),
     };
-    let change_path = path;
-    color_picker_view(
-        cur,
-        DEFAULT_SWATCHES,
-        &ColorPickerPalette::from_theme(theme),
-        Some(hex),
-        move |rgba| on_msg(AllichayMsg::Change(change_path.clone(), FieldValue::Color(rgba))),
-    )
+    let change_path = path.clone();
+    let om = on_msg.clone();
+    let orbit_msg = on_msg.clone();
+    let dismiss = on_msg(AllichayMsg::ToggleColorPicker(path.clone(), ax, ay, w));
+    let pal = ColorPopupPalette::from_theme(theme);
+    let spec = ColorPopupSpec {
+        anchor: (ax, ay),
+        viewport,
+        rgba: cur,
+        orbit: state.cone_orbit(),
+        recent: &[],
+        swatches: DEFAULT_SWATCHES,
+        hex: Some(hex),
+        palette: &pal,
+        on_change: std::sync::Arc::new(move |rgba| {
+            om(AllichayMsg::Change(change_path.clone(), FieldValue::Color(rgba)))
+        }),
+        on_orbit: std::sync::Arc::new(move |dy, dp| orbit_msg(AllichayMsg::ColorOrbit(dy, dp))),
+        on_dismiss: dismiss,
+    };
+    Some(color_popup_view(spec))
+}
+
+/// Busca el campo `Control::ColorPicker` en `path` dentro del schema (reusa el
+/// mismo recorrido que el select, y filtra por tipo de control).
+fn find_color_field<'a>(schema: &'a Schema, path: &FieldPath) -> Option<&'a Field> {
+    let field = find_dropdown_field(schema, path)?;
+    matches!(field.control, Control::ColorPicker).then_some(field)
 }
 
 fn text_control<Msg, F>(
@@ -1060,16 +1843,25 @@ where
 {
     let cur = field.value.as_str().unwrap_or("");
     let palette = TextInputPalette::from_theme(theme);
-    let focus_msg = on_msg(AllichayMsg::Focus(path.clone()));
-
-    if state.is_focused(&path) {
-        if let Some(st) = state.input(&path) {
-            return text_input_view(st, "", true, &palette, focus_msg);
-        }
-    }
+    let focused = state.is_focused(&path);
+    // Estado a pintar: el REAL si el campo está focado; si no, uno temporal sembrado
+    // con el valor actual (sólo para MOSTRAR el texto y medir la x del click).
     let mut tmp = TextInputState::new();
-    tmp.set_text(cur);
-    text_input_view(&tmp, "", false, &palette, focus_msg)
+    let st: &TextInputState = match (focused, state.input(&path)) {
+        (true, Some(real)) => real,
+        _ => {
+            tmp.set_text(cur);
+            &tmp
+        }
+    };
+    // SIEMPRE el camino COMPLETO (no el básico): el box emite un `Press` posicionado
+    // desde el 1er click. El host, ante un `Press` sobre un campo no focado, lo
+    // enfoca+siembra y recién aplica — así el PRIMER click llega al estado y el
+    // doble-click (palabra) cuenta desde el toque uno. Teclas/copiar-pegar: apply_key.
+    let ip = path.clone();
+    text_input_view_full(st, "", focused, &palette, move |ev| {
+        on_msg(AllichayMsg::Input(ip.clone(), ev))
+    })
 }
 
 // =====================================================================
@@ -1184,6 +1976,55 @@ mod tests {
         }
     }
 
+    /// Un evento de tecla nombrada (Backspace/Enter/Escape…), sin texto.
+    fn evkey(k: NamedKey) -> KeyEvent {
+        KeyEvent {
+            key: Key::Named(k),
+            state: KeyState::Pressed,
+            text: None,
+            modifiers: Modifiers::default(),
+            repeat: false,
+        }
+    }
+
+    #[test]
+    fn buscador_enfocado_las_teclas_editan_el_filtro() {
+        let mut st = AllichayState::new();
+        st.sidebar.search_focused = true;
+        // Con el buscador enfocado las teclas editan el filtro, NO los campos.
+        assert_eq!(st.apply_key(&evtext("h")), None);
+        st.apply_key(&evtext("o"));
+        st.apply_key(&evtext("l"));
+        st.apply_key(&evtext("a"));
+        assert_eq!(st.sidebar.search, "hola");
+        st.apply_key(&evkey(NamedKey::Backspace));
+        assert_eq!(st.sidebar.search, "hol");
+        st.apply_key(&evkey(NamedKey::Enter));
+        assert!(!st.sidebar.search_focused, "Enter suelta el buscador");
+    }
+
+    #[test]
+    fn apply_sidebar_mantiene_diente_abierto_en_la_seccion_activa() {
+        let mut st = AllichayState::new();
+        st.select(2);
+        assert_eq!(st.sidebar.open, Some(2));
+        // Un mensaje del sidebar (cambiar un eje) NO colapsa el panel: el diente
+        // abierto se re-fija en la sección seleccionada (selector fijo).
+        st.apply_sidebar(RagSidebarMsg::SetDocked(false));
+        assert_eq!(st.sidebar.open, Some(2), "el panel nunca colapsa");
+        assert_eq!(st.sidebar.selected, Some(2));
+        assert!(!st.sidebar.docked, "el eje sí se aplicó");
+    }
+
+    #[test]
+    fn field_matches_filtra_por_label_case_insensitive() {
+        let f = Field::toggle("k", "Modo Oscuro", true);
+        assert!(field_matches(&f, ""), "sin query pasa todo");
+        assert!(field_matches(&f, "oscuro"));
+        assert!(field_matches(&f, "modo"));
+        assert!(!field_matches(&f, "idioma"));
+    }
+
     #[test]
     fn select_reinicia_scroll_y_foco() {
         let mut st = AllichayState::new();
@@ -1223,6 +2064,70 @@ mod tests {
         assert_eq!(st.apply_key(&evtext("x")), None);
     }
 
+    /// PRUEBA del doble-click: dos `Press` sobre el MISMO estado (como los rutea el
+    /// host tras el enfoque-al-primer-Press) seleccionan la palabra. Antes fallaba
+    /// porque el 1er click caía en el camino básico (sólo foco) y el estado sólo veía
+    /// el segundo. Con el campo SIEMPRE-full + focus-on-press, ambos clicks llegan.
+    #[test]
+    fn apply_input_doble_press_selecciona_palabra() {
+        let mut st = AllichayState::new();
+        let path: FieldPath = "editor.nombre".into();
+        // El host, ante el 1er Press sobre un campo no focado, enfoca+siembra:
+        st.focus(&path, "hola mundo");
+        // x dentro de "mundo" (col ~7; char_w = 13*0.5 = 6.5; x = 11 + 7*6.5).
+        let x = 11.0 + 7.0 * 6.5;
+        // Un Press NO cambia el texto → NO debe emitir Change (si no, el host
+        // persistiría y re-sembraría el campo entre clicks, reseteando el contador).
+        assert_eq!(st.apply_input(TextInputEvent::Press(x)), None, "click 1: sin Change");
+        assert_eq!(st.apply_input(TextInputEvent::Press(x)), None, "click 2: sin Change");
+        let buf = st.input(&path).expect("buffer focado existe");
+        assert_eq!(
+            buf.editor().selected_text().as_deref(),
+            Some("mundo"),
+            "el doble-click debe seleccionar la palabra bajo el cursor"
+        );
+    }
+
+    #[test]
+    fn menu_edicion_abre_con_context_y_aplica_accion() {
+        let mut st = AllichayState::new();
+        let path: FieldPath = "editor.nombre".into();
+        st.focus(&path, "hola mundo");
+        // Sin menú al empezar.
+        assert_eq!(st.edit_menu_anchor(), None);
+        // Click derecho abre el menú en las coords dadas (no cambia el texto).
+        assert_eq!(st.apply_input(TextInputEvent::Context { x: 40.0, y: 12.0 }), None);
+        assert_eq!(st.edit_menu_anchor(), Some((40.0, 12.0)));
+        // Seleccionar todo desde el menú (no cambia el texto → sin Change) y cierra.
+        assert_eq!(st.apply_edit_action(EditAction::SelectAll), None);
+        assert_eq!(st.edit_menu_anchor(), None, "aplicar una acción cierra el menú");
+        let buf = st.input(&path).expect("buffer focado");
+        assert_eq!(buf.editor().selected_text().as_deref(), Some("hola mundo"));
+        // Cortar borra la selección → emite Change con el texto vacío.
+        let cambio = st.apply_edit_action(EditAction::Cut);
+        assert_eq!(cambio, Some((path.clone(), FieldValue::Text(String::new()))));
+    }
+
+    #[test]
+    fn context_sin_foco_no_abre_menu() {
+        // La vista full sólo emite eventos focada, pero por robustez: sin foco el
+        // Context no arma el menú (no habría campo sobre el que operar).
+        let mut st = AllichayState::new();
+        assert_eq!(st.apply_input(TextInputEvent::Context { x: 5.0, y: 5.0 }), None);
+        assert_eq!(st.edit_menu_anchor(), None);
+    }
+
+    #[test]
+    fn close_edit_menu_cierra() {
+        let mut st = AllichayState::new();
+        let path: FieldPath = "editor.nombre".into();
+        st.focus(&path, "hola");
+        st.apply_input(TextInputEvent::Context { x: 1.0, y: 2.0 });
+        assert!(st.edit_menu_anchor().is_some());
+        st.close_edit_menu();
+        assert_eq!(st.edit_menu_anchor(), None);
+    }
+
     #[test]
     fn focus_cell_lista_reconstruye_el_agregado() {
         let mut st = AllichayState::new();
diff --git a/modules/bookmarks/Cargo.toml b/modules/bookmarks/Cargo.toml
index 4e27fa1..c21bb2d 100644
--- a/modules/bookmarks/Cargo.toml
+++ b/modules/bookmarks/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-module-bookmarks - marcadores per-file persistentes en la sesion del editor. Modulo Llimphi: el host emite ToggleAt(path, line) al disparar Ctrl+Alt+B, JumpNext/JumpPrev para navegar (devuelve JumpTo accion), y OpenList para abrir un overlay tipo symbol-outline con fuzzy filter sobre los marks. No persiste a disco - el host puede serializar marks si quiere."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/modules/bookmarks/src/lib.rs b/modules/bookmarks/src/lib.rs
index d974177..da1c9f2 100644
--- a/modules/bookmarks/src/lib.rs
+++ b/modules/bookmarks/src/lib.rs
@@ -20,7 +20,9 @@ use llimphi_ui::llimphi_layout::taffy::{
 use llimphi_ui::llimphi_raster::peniko::Color;
 use llimphi_ui::llimphi_text::Alignment;
 use llimphi_ui::{Key, KeyEvent, KeyState, NamedKey, View};
-use llimphi_widget_text_input::{text_input_view, TextInputPalette, TextInputState};
+use llimphi_widget_text_input::{
+    text_input_view_full, MemClipboard, TextInputEvent, TextInputPalette, TextInputState,
+};
 
 /// Capabilities que aporta este modulo al host.
 pub const CAPABILITIES: &[&str] = &["editor.bookmarks"];
@@ -38,11 +40,18 @@ pub struct BookmarksOverlay {
     /// Indices a state.marks rankeados por fuzzy match. Cap MAX_RESULTS.
     pub results: Vec<usize>,
     pub selected: usize,
+    /// Clipboard en memoria para copiar/cortar/pegar dentro del input.
+    clipboard: MemClipboard,
 }
 
 impl BookmarksOverlay {
     pub fn new() -> Self {
-        Self { input: TextInputState::new(), results: Vec::new(), selected: 0 }
+        Self {
+            input: TextInputState::new(),
+            results: Vec::new(),
+            selected: 0,
+            clipboard: MemClipboard::new(),
+        }
     }
 }
 
@@ -101,6 +110,10 @@ pub enum BookmarksMsg {
     CloseList,
     /// Teclas para el input del overlay.
     ListKey(KeyEvent),
+    /// Evento de **mouse** del input del overlay (click→caret,
+    /// doble/triple-click→palabra/todo, arrastre→selección), emitido por el
+    /// `text_input_view_full`. Las teclas van aparte por [`BookmarksMsg::ListKey`].
+    ListMouse(TextInputEvent),
     /// Navegacion en la lista del overlay.
     ListNav(i32),
     /// Enter: salta al mark seleccionado.
@@ -152,7 +165,17 @@ pub fn apply(state: &mut BookmarksState, msg: BookmarksMsg) -> BookmarksAction {
         BookmarksMsg::CloseList => BookmarksAction::Close,
         BookmarksMsg::ListKey(ev) => {
             if let Some(ov) = state.overlay.as_mut() {
-                ov.input.apply_key(&ev);
+                ov.input.apply_key_with_clipboard(&ev, &mut ov.clipboard);
+                refilter_overlay(state);
+            }
+            BookmarksAction::None
+        }
+        BookmarksMsg::ListMouse(ev) => {
+            let changed = match state.overlay.as_mut() {
+                Some(ov) => ov.input.handle(ev, &mut ov.clipboard),
+                None => false,
+            };
+            if changed {
                 refilter_overlay(state);
             }
             BookmarksAction::None
@@ -323,7 +346,7 @@ pub fn view<HostMsg, F>(
 ) -> View<HostMsg>
 where
     HostMsg: Clone + 'static,
-    F: Fn(BookmarksMsg) -> HostMsg + Copy + 'static,
+    F: Fn(BookmarksMsg) -> HostMsg + Copy + Send + Sync + 'static,
 {
     let ov = match state.overlay.as_ref() {
         Some(o) => o,
@@ -368,12 +391,12 @@ where
         ..Default::default()
     })
     .fill(palette.bg_panel)
-    .children(vec![text_input_view(
+    .children(vec![text_input_view_full(
         &ov.input,
         "filtro: path o numero de linea",
         true,
         &tp,
-        to_host(BookmarksMsg::OpenList),
+        move |ev| to_host(BookmarksMsg::ListMouse(ev)),
     )]);
 
     let visible_start = ov.selected.saturating_sub(MAX_VISIBLE.saturating_sub(1));
diff --git a/modules/command-palette/Cargo.toml b/modules/command-palette/Cargo.toml
index eaf6be0..280fb02 100644
--- a/modules/command-palette/Cargo.toml
+++ b/modules/command-palette/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-module-command-palette — paleta de comandos estilo Ctrl+Shift+P de VS Code. Módulo Llimphi reutilizable: state + Msg + Action + apply/on_key/view sobre un slice de Commands que provee el host. Fuzzy match con nucleo-matcher."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/modules/command-palette/src/lib.rs b/modules/command-palette/src/lib.rs
index 7259684..4dd9947 100644
--- a/modules/command-palette/src/lib.rs
+++ b/modules/command-palette/src/lib.rs
@@ -24,7 +24,9 @@ use llimphi_ui::llimphi_layout::taffy::{
 use llimphi_ui::llimphi_raster::peniko::Color;
 use llimphi_ui::llimphi_text::Alignment;
 use llimphi_ui::{Key, KeyEvent, KeyState, NamedKey, View};
-use llimphi_widget_text_input::{text_input_view, TextInputPalette, TextInputState};
+use llimphi_widget_text_input::{
+    text_input_view_full, MemClipboard, TextInputEvent, TextInputPalette, TextInputState,
+};
 
 /// Capabilities que aporta este módulo al host.
 pub const CAPABILITIES: &[&str] = &["editor.command-palette"];
@@ -78,6 +80,8 @@ pub struct PaletteState {
     pub input: TextInputState,
     pub results: Vec<usize>,
     pub selected: usize,
+    /// Clipboard en memoria para copiar/cortar/pegar dentro del input.
+    clipboard: MemClipboard,
 }
 
 impl Default for PaletteState {
@@ -92,6 +96,7 @@ impl PaletteState {
             input: TextInputState::new(),
             results: Vec::new(),
             selected: 0,
+            clipboard: MemClipboard::new(),
         }
     }
 
@@ -113,6 +118,10 @@ pub enum PaletteMsg {
     Open,
     Close,
     KeyInput(KeyEvent),
+    /// Evento de **mouse** del input (click→caret, doble/triple-click→palabra/todo,
+    /// arrastre→selección), emitido por el `text_input_view_full`. Las teclas van
+    /// aparte por [`PaletteMsg::KeyInput`].
+    MouseInput(TextInputEvent),
     Nav(i32),
     /// Enter: invoca el comando seleccionado.
     Apply,
@@ -140,10 +149,16 @@ pub fn apply(
         PaletteMsg::Open => PaletteAction::None,
         PaletteMsg::Close => PaletteAction::Close,
         PaletteMsg::KeyInput(ev) => {
-            state.input.apply_key(&ev);
+            state.input.apply_key_with_clipboard(&ev, &mut state.clipboard);
             refilter(state, commands);
             PaletteAction::None
         }
+        PaletteMsg::MouseInput(ev) => {
+            if state.input.handle(ev, &mut state.clipboard) {
+                refilter(state, commands);
+            }
+            PaletteAction::None
+        }
         PaletteMsg::Nav(d) => {
             let n = state.results.len() as i32;
             if n > 0 {
@@ -253,7 +268,7 @@ pub fn view<HostMsg, F>(
 ) -> View<HostMsg>
 where
     HostMsg: Clone + 'static,
-    F: Fn(PaletteMsg) -> HostMsg + Copy + 'static,
+    F: Fn(PaletteMsg) -> HostMsg + Copy + Send + Sync + 'static,
 {
     let header = if state.results.is_empty() {
         format!("command palette · sin matches · {} comandos · Esc cierra", commands.len())
@@ -293,12 +308,12 @@ where
         ..Default::default()
     })
     .fill(palette.bg_panel)
-    .children(vec![text_input_view(
+    .children(vec![text_input_view_full(
         &state.input,
         "filtro: nombre del comando…",
         true,
         &tp,
-        to_host(PaletteMsg::Open),
+        move |ev| to_host(PaletteMsg::MouseInput(ev)),
     )]);
 
     let visible_start = state.selected.saturating_sub(MAX_VISIBLE.saturating_sub(1));
diff --git a/modules/diff-viewer/Cargo.toml b/modules/diff-viewer/Cargo.toml
index 4301fdc..c09b3ed 100644
--- a/modules/diff-viewer/Cargo.toml
+++ b/modules/diff-viewer/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-module-diff-viewer — visualización side-by-side de cambios entre dos textos. Módulo Llimphi: el host provee before/after (typically HEAD vs working tree, o snapshot vs current buffer), el módulo computa el diff con `similar` y lo presenta en dos columnas con marcadores +/- y números de línea."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/modules/fif/Cargo.toml b/modules/fif/Cargo.toml
index 8fc2912..e76444e 100644
--- a/modules/fif/Cargo.toml
+++ b/modules/fif/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-module-fif — find-in-files reusable (estilo JetBrains). Módulo Llimphi: state + Msg + Action + apply/on_key/view. Cualquier app que mantenga una lista de paths puede enchufarlo."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/modules/fif/src/lib.rs b/modules/fif/src/lib.rs
index 35165aa..fa84220 100644
--- a/modules/fif/src/lib.rs
+++ b/modules/fif/src/lib.rs
@@ -96,7 +96,9 @@ use llimphi_ui::llimphi_layout::taffy::{
 use llimphi_ui::llimphi_raster::peniko::Color;
 use llimphi_ui::llimphi_text::Alignment;
 use llimphi_ui::{Key, KeyEvent, KeyState, NamedKey, View};
-use llimphi_widget_text_input::{text_input_view, TextInputPalette, TextInputState};
+use llimphi_widget_text_input::{
+    text_input_view_full, MemClipboard, TextInputEvent, TextInputPalette, TextInputState,
+};
 
 /// Capabilities que este módulo aporta al host. Convención del protocolo
 /// Brahman Card aplicada a módulos compile-time: el host (cuando construye
@@ -152,6 +154,9 @@ pub struct FifState {
     /// `true` cuando el popup modal está visible. La barra de resultados
     /// se pinta independientemente de esto: sobrevive al cierre del popup.
     pub dialog_open: bool,
+    /// Clipboard en memoria compartido por ambos inputs (search y replace)
+    /// para copiar/cortar/pegar.
+    clipboard: MemClipboard,
 }
 
 impl Default for FifState {
@@ -170,6 +175,7 @@ impl FifState {
             selected: 0,
             last_query: String::new(),
             dialog_open: true,
+            clipboard: MemClipboard::new(),
         }
     }
 }
@@ -187,6 +193,11 @@ pub enum FifMsg {
     CloseAll,
     /// Tecla rumbo al input.
     KeyInput(KeyEvent),
+    /// Evento de **mouse** de uno de los inputs (click→caret,
+    /// doble/triple-click→palabra/todo, arrastre→selección), emitido por el
+    /// `text_input_view_full`. El [`FifFocus`] identifica cuál de los dos campos
+    /// (search / replace) lo emitió. Las teclas van aparte por [`FifMsg::KeyInput`].
+    MouseInput(FifFocus, TextInputEvent),
     /// Navegación dentro de la lista de resultados.
     Nav(i32),
     /// Enter: la primera vez ejecuta search; subsiguientes abren el
@@ -245,9 +256,20 @@ pub fn apply(state: &mut FifState, msg: FifMsg, paths: &[PathBuf]) -> FifAction
         FifMsg::CloseDialog => FifAction::CloseDialog,
         FifMsg::CloseAll => FifAction::CloseAll,
         FifMsg::KeyInput(ev) => {
+            // Ambos inputs comparten el mismo clipboard del estado; tomamos
+            // el campo por separado para no chocar con el borrow checker.
+            let clip = &mut state.clipboard;
             let _ = match state.focus {
-                FifFocus::Search => state.input.apply_key(&ev),
-                FifFocus::Replace => state.replace.apply_key(&ev),
+                FifFocus::Search => state.input.apply_key_with_clipboard(&ev, clip),
+                FifFocus::Replace => state.replace.apply_key_with_clipboard(&ev, clip),
+            };
+            FifAction::None
+        }
+        FifMsg::MouseInput(which, ev) => {
+            let clip = &mut state.clipboard;
+            let _ = match which {
+                FifFocus::Search => state.input.handle(ev, clip),
+                FifFocus::Replace => state.replace.handle(ev, clip),
             };
             FifAction::None
         }
@@ -392,7 +414,7 @@ pub fn view_dialog<HostMsg, F>(
 ) -> View<HostMsg>
 where
     HostMsg: Clone + 'static,
-    F: Fn(FifMsg) -> HostMsg + Copy + 'static,
+    F: Fn(FifMsg) -> HostMsg + Copy + Send + Sync + 'static,
 {
     let dirty_query = state.input.text() != state.last_query;
     let header = if state.last_query.is_empty() {
@@ -432,7 +454,7 @@ where
         search_focus,
         palette,
         &tp,
-        to_host(FifMsg::Open),
+        move |ev| to_host(FifMsg::MouseInput(FifFocus::Search, ev)),
     );
     let replace_view = labelled_input(
         "reemplazar",
@@ -441,7 +463,7 @@ where
         !search_focus,
         palette,
         &tp,
-        to_host(FifMsg::Open),
+        move |ev| to_host(FifMsg::MouseInput(FifFocus::Replace, ev)),
     );
 
     let replace_btn = View::new(Style {
@@ -751,17 +773,18 @@ fn ci_replace_all(haystack: &str, _needle: &str, needle_lc: &str, repl: &str) ->
 
 /// Pinta un input con etiqueta a la izquierda; cuando `focus` es true,
 /// el fondo se realza para que el user vea dónde está tipeando.
-fn labelled_input<HostMsg>(
+fn labelled_input<HostMsg, W>(
     label: &str,
     state: &TextInputState,
     placeholder: &str,
     focus: bool,
     palette: &FifPalette,
     tp: &TextInputPalette,
-    fallback_msg: HostMsg,
+    wrap: W,
 ) -> View<HostMsg>
 where
     HostMsg: Clone + 'static,
+    W: Fn(TextInputEvent) -> HostMsg + Send + Sync + 'static,
 {
     let bg = if focus { palette.bg_selected } else { palette.bg_panel };
     let label_view = View::new(Style {
@@ -789,12 +812,12 @@ where
         },
         ..Default::default()
     })
-    .children(vec![text_input_view(
+    .children(vec![text_input_view_full(
         state,
         placeholder,
         focus,
         tp,
-        fallback_msg,
+        wrap,
     )]);
 
     View::new(Style {
diff --git a/modules/file-picker/Cargo.toml b/modules/file-picker/Cargo.toml
index 6966d07..307f01f 100644
--- a/modules/file-picker/Cargo.toml
+++ b/modules/file-picker/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-module-file-picker — fuzzy file picker (estilo Ctrl+P de VS Code). Módulo Llimphi reutilizable: state + Msg + Action + apply/on_key/view sobre un slice de paths que provee el host."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/modules/file-picker/src/lib.rs b/modules/file-picker/src/lib.rs
index 2109da4..96bddca 100644
--- a/modules/file-picker/src/lib.rs
+++ b/modules/file-picker/src/lib.rs
@@ -73,7 +73,9 @@ use llimphi_ui::llimphi_layout::taffy::{
 use llimphi_ui::llimphi_raster::peniko::Color;
 use llimphi_ui::llimphi_text::Alignment;
 use llimphi_ui::{Key, KeyEvent, KeyState, NamedKey, View};
-use llimphi_widget_text_input::{text_input_view, TextInputPalette, TextInputState};
+use llimphi_widget_text_input::{
+    text_input_view_full, MemClipboard, TextInputEvent, TextInputPalette, TextInputState,
+};
 
 /// Capabilities que este módulo aporta al host. El host (cuando construye
 /// su `card_core::Card`) puede agregar esto a `provides` para anunciar
@@ -93,6 +95,8 @@ pub struct PickerState {
     pub input: TextInputState,
     pub results: Vec<usize>,
     pub selected: usize,
+    /// Clipboard en memoria para copiar/cortar/pegar dentro del input.
+    clipboard: MemClipboard,
 }
 
 impl Default for PickerState {
@@ -102,13 +106,14 @@ impl Default for PickerState {
 }
 
 impl PickerState {
-    /// Crea un picker vacío. Si querés pre-filtrar con los paths que ya
-    /// tenés, llamá [`PickerState::new`] en su lugar.
+    /// Crea un picker vacío. Si quieres pre-filtrar con los paths que ya
+    /// tienes, llama [`PickerState::new`] en su lugar.
     pub fn new_empty() -> Self {
         Self {
             input: TextInputState::new(),
             results: Vec::new(),
             selected: 0,
+            clipboard: MemClipboard::new(),
         }
     }
 
@@ -132,6 +137,10 @@ pub enum PickerMsg {
     Open,
     Close,
     KeyInput(KeyEvent),
+    /// Evento de **mouse** del input (click→caret, doble/triple-click→palabra/todo,
+    /// arrastre→selección), emitido por el `text_input_view_full`. Las teclas van
+    /// aparte por [`PickerMsg::KeyInput`].
+    MouseInput(TextInputEvent),
     Nav(i32),
     /// Enter: abre el match seleccionado.
     Apply,
@@ -159,10 +168,16 @@ pub fn apply(
         PickerMsg::Open => PickerAction::None,
         PickerMsg::Close => PickerAction::Close,
         PickerMsg::KeyInput(ev) => {
-            state.input.apply_key(&ev);
+            state.input.apply_key_with_clipboard(&ev, &mut state.clipboard);
             refilter(state, paths, root);
             PickerAction::None
         }
+        PickerMsg::MouseInput(ev) => {
+            if state.input.handle(ev, &mut state.clipboard) {
+                refilter(state, paths, root);
+            }
+            PickerAction::None
+        }
         PickerMsg::Nav(d) => {
             let n = state.results.len() as i32;
             if n > 0 {
@@ -273,7 +288,7 @@ pub fn view<HostMsg, F>(
 ) -> View<HostMsg>
 where
     HostMsg: Clone + 'static,
-    F: Fn(PickerMsg) -> HostMsg + Copy + 'static,
+    F: Fn(PickerMsg) -> HostMsg + Copy + Send + Sync + 'static,
 {
     let header = if state.results.is_empty() {
         format!("file picker · sin matches · {} archivos · Esc cierra", paths.len())
@@ -313,12 +328,12 @@ where
         ..Default::default()
     })
     .fill(palette.bg_panel)
-    .children(vec![text_input_view(
+    .children(vec![text_input_view_full(
         &state.input,
         "filtro: nombre o ruta…",
         true,
         &tp,
-        to_host(PickerMsg::Open),
+        move |ev| to_host(PickerMsg::MouseInput(ev)),
     )]);
 
     let visible_start = state.selected.saturating_sub(MAX_VISIBLE.saturating_sub(1));
diff --git a/modules/mini-map/Cargo.toml b/modules/mini-map/Cargo.toml
index eeae411..e32f418 100644
--- a/modules/mini-map/Cargo.toml
+++ b/modules/mini-map/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-module-mini-map — overlay minimap del buffer activo. Modulo Llimphi: el host le pasa un snapshot del buffer + viewport + caret, el modulo pinta un panel vertical con un slab por linea (ancho aprox chars), resalta el viewport visible y emite Jump(line) al click. Estilo VS Code/Sublime."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/modules/plugin-host/Cargo.toml b/modules/plugin-host/Cargo.toml
index edc9dda..a547eb3 100644
--- a/modules/plugin-host/Cargo.toml
+++ b/modules/plugin-host/Cargo.toml
@@ -5,11 +5,11 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-plugin-host — runtime de plugins WASM (Tier 2) para apps Llimphi. Carga .wasm + manifest.toml, aplica sandbox por card_core::Permissions, e invoca capabilities devolviendo PluginAction."
 
+repository.workspace = true
 [dependencies]
-card-core = { path = "../../../../shared/card/card-core", version = "0.1.0" }
+card-core = { path = "../../../../shared/card/card-core" }
 wasmi = { workspace = true }
 serde = { workspace = true }
 toml = { workspace = true }
diff --git a/modules/plugin-host/LEEME.md b/modules/plugin-host/LEEME.md
index ee25861..d8e6488 100644
--- a/modules/plugin-host/LEEME.md
+++ b/modules/plugin-host/LEEME.md
@@ -1,4 +1,4 @@
-# llimphi-module-plugin-host
+# llimphi-plugin-host
 
 > Host para plugins WASM de [llimphi](../../README.md).
 
diff --git a/modules/plugin-host/README.md b/modules/plugin-host/README.md
index 5adc29f..87c1142 100644
--- a/modules/plugin-host/README.md
+++ b/modules/plugin-host/README.md
@@ -1,4 +1,4 @@
-# llimphi-module-plugin-host
+# llimphi-plugin-host
 
 > WASM plugin host for [llimphi](../../README.md).
 
diff --git a/modules/selector/Cargo.toml b/modules/selector/Cargo.toml
index a5c8794..bc869b1 100644
--- a/modules/selector/Cargo.toml
+++ b/modules/selector/Cargo.toml
@@ -5,7 +5,7 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-module-selector — trait Selector con dos backends: HostSelector (paths del FS via std::fs) y WawaSelector (khipus por hash, sello digital). Una sola API 'abrir/guardar' que funciona en cualquier entorno tawasuyu."
 
+repository.workspace = true
 [dependencies]
diff --git a/modules/selector/LEEME.md b/modules/selector/LEEME.md
new file mode 100644
index 0000000..6199231
--- /dev/null
+++ b/modules/selector/LEEME.md
@@ -0,0 +1,41 @@
+# llimphi-module-selector
+
+*Read this in English: [README.md](README.md).*
+
+Abstracción de "abrir/guardar" portable entre host (paths del FS) y wawa (khipus por hash).
+
+## Por qué
+
+Una app tawasuyu que sólo conoce paths (`PathBuf`) se rompe en wawa,
+donde el almacenamiento es direccionado por contenido (BLAKE3 + DAG)
+y no existe el concepto de "carpeta /home/usuario". Pero la mayoría
+de las apps no necesitan saber la diferencia: sólo quieren preguntar
+"qué item quiere abrir el usuario" o "dónde guardo este blob".
+
+Este crate expone:
+- El trait `Selector` con dos métodos: `list_candidates()` (para
+  armar la UI del picker) y `realize(handle)` (para resolver el
+  item elegido a bytes).
+- Un `ItemHandle` opaco — la app no debe inspeccionarlo, sólo
+  pasarlo de vuelta al selector.
+- `HostSelector` con root path + extension filter (impl real).
+- `WawaSelector` como **placeholder** con la API definida — la
+  integración real con `akasha` / `wawa-kernel` ocurre cuando la
+  suite empiece a correr in-cage. Por ahora exporta tipos y panica
+  si se invoca, lo cual está bien: el código que lo construye
+  queda compilable y las apps pueden tipar contra el trait.
+
+## API mínima
+```ignore
+use llimphi_module_selector::{HostSelector, Selector};
+
+let sel = HostSelector::new("/home/usr/docs", &[".pluma", ".khipu"]);
+let items = sel.list_candidates()?;
+// (la app muestra `items.iter().map(|i| &i.display_name)` en su picker)
+// user elige el index N:
+let bytes = sel.realize(&items[N].handle)?;
+```
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/modules/selector/README.md b/modules/selector/README.md
new file mode 100644
index 0000000..81633eb
--- /dev/null
+++ b/modules/selector/README.md
@@ -0,0 +1,40 @@
+# llimphi-module-selector
+
+An "open/save" abstraction portable between the host (filesystem paths) and wawa
+(khipus by hash).
+
+## Why
+
+A tawasuyu app that only knows paths (`PathBuf`) breaks on wawa, where storage is
+content-addressed (BLAKE3 + DAG) and there is no such thing as a
+"/home/user" folder. But most apps do not need to know the difference: they only
+want to ask "which item does the user want to open" or "where do I save this
+blob".
+
+This crate exposes:
+
+- The `Selector` trait with two methods: `list_candidates()` (to build the
+  picker's UI) and `realize(handle)` (to resolve the chosen item to bytes).
+- An opaque `ItemHandle` — the app must not inspect it, only hand it back to the
+  selector.
+- `HostSelector` with a root path and an extension filter (the real impl).
+- `WawaSelector` as a **placeholder** with the API defined — the real integration
+  with `akasha` / `wawa-kernel` happens when the suite starts running in-cage.
+  For now it exports the types and panics if invoked, which is fine: the code
+  that builds it stays compilable and apps can type against the trait.
+
+## Minimal API
+
+```ignore
+use llimphi_module_selector::{HostSelector, Selector};
+
+let sel = HostSelector::new("/home/usr/docs", &[".pluma", ".khipu"]);
+let items = sel.list_candidates()?;
+// (the app shows `items.iter().map(|i| &i.display_name)` in its picker)
+// the user picks index N:
+let bytes = sel.realize(&items[N].handle)?;
+```
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/modules/shuma-term/Cargo.toml b/modules/shuma-term/Cargo.toml
index 4f94bcc..bba42e6 100644
--- a/modules/shuma-term/Cargo.toml
+++ b/modules/shuma-term/Cargo.toml
@@ -5,11 +5,11 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-module-shuma-term — terminal integrado tipo Ctrl+\\` de VS Code. Módulo Llimphi sobre shuma-exec (PTY real) + vt100 (emulación). Cualquier app Llimphi puede enchufar un terminal sandboxeado por el shell del usuario."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
-shuma-exec = { path = "../../../shuma/sandbox/shuma-exec", version = "0.1.0" }
+shuma-exec = { path = "../../../shuma/sandbox/shuma-exec" }
 vt100 = { workspace = true }
diff --git a/modules/shuma-term/src/lib.rs b/modules/shuma-term/src/lib.rs
index 9a18300..90870f1 100644
--- a/modules/shuma-term/src/lib.rs
+++ b/modules/shuma-term/src/lib.rs
@@ -160,6 +160,7 @@ pub fn spawn_with(
         capture_limit: 0,
         spill_path: None,
         stdin_data: None,
+        env: Vec::new(),
         capture_stages: false,
     };
     let handle = shuma_exec::run(&spec);
diff --git a/modules/shuma-term/tests/smoke.rs b/modules/shuma-term/tests/smoke.rs
index 1200a6c..022f8e9 100644
--- a/modules/shuma-term/tests/smoke.rs
+++ b/modules/shuma-term/tests/smoke.rs
@@ -25,7 +25,7 @@ fn echo_a_traves_del_pty_aparece_en_el_screen() {
 
     // Tipeamos el comando. Sin Llimphi alrededor llamamos a write_input
     // directamente — el módulo permite hacerlo via KeyInput, pero
-    // construir KeyEvents acá es ruido para este test.
+    // construir KeyEvents aquí es ruido para este test.
     write_raw(&mut state, b"echo hola_del_test\n");
 
     // Esperamos hasta 2s a que el output llegue al screen.
diff --git a/modules/symbol-outline/Cargo.toml b/modules/symbol-outline/Cargo.toml
index 681e9dd..ef59b46 100644
--- a/modules/symbol-outline/Cargo.toml
+++ b/modules/symbol-outline/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-module-symbol-outline — outline del documento (funciones, structs, métodos) navegable con fuzzy filter. Módulo Llimphi reutilizable: el host le pasa un Vec<SymbolItem> y el módulo emite GoTo(line, col). No depende de LSP — el host puede poblarlo desde cualquier fuente (tree-sitter, parser propio, LSP)."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/modules/symbol-outline/src/lib.rs b/modules/symbol-outline/src/lib.rs
index 5e5b02d..6996838 100644
--- a/modules/symbol-outline/src/lib.rs
+++ b/modules/symbol-outline/src/lib.rs
@@ -26,7 +26,9 @@ use llimphi_ui::llimphi_layout::taffy::{
 use llimphi_ui::llimphi_raster::peniko::Color;
 use llimphi_ui::llimphi_text::Alignment;
 use llimphi_ui::{Key, KeyEvent, KeyState, NamedKey, View};
-use llimphi_widget_text_input::{text_input_view, TextInputPalette, TextInputState};
+use llimphi_widget_text_input::{
+    text_input_view_full, MemClipboard, TextInputEvent, TextInputPalette, TextInputState,
+};
 
 /// Capabilities que aporta este módulo al host.
 pub const CAPABILITIES: &[&str] = &["editor.symbol-outline"];
@@ -69,6 +71,8 @@ pub struct OutlineState {
     pub input: TextInputState,
     pub results: Vec<usize>,
     pub selected: usize,
+    /// Clipboard en memoria para copiar/cortar/pegar dentro del input.
+    clipboard: MemClipboard,
 }
 
 impl Default for OutlineState {
@@ -83,6 +87,7 @@ impl OutlineState {
             input: TextInputState::new(),
             results: Vec::new(),
             selected: 0,
+            clipboard: MemClipboard::new(),
         }
     }
 
@@ -102,6 +107,10 @@ pub enum OutlineMsg {
     Open,
     Close,
     KeyInput(KeyEvent),
+    /// Evento de **mouse** del input (click→caret, doble/triple-click→palabra/todo,
+    /// arrastre→selección), emitido por el `text_input_view_full`. Las teclas van
+    /// aparte por [`OutlineMsg::KeyInput`].
+    MouseInput(TextInputEvent),
     Nav(i32),
     /// Enter: salta al símbolo seleccionado.
     Apply,
@@ -129,10 +138,16 @@ pub fn apply(
         OutlineMsg::Open => OutlineAction::None,
         OutlineMsg::Close => OutlineAction::Close,
         OutlineMsg::KeyInput(ev) => {
-            state.input.apply_key(&ev);
+            state.input.apply_key_with_clipboard(&ev, &mut state.clipboard);
             refilter(state, items);
             OutlineAction::None
         }
+        OutlineMsg::MouseInput(ev) => {
+            if state.input.handle(ev, &mut state.clipboard) {
+                refilter(state, items);
+            }
+            OutlineAction::None
+        }
         OutlineMsg::Nav(d) => {
             let n = state.results.len() as i32;
             if n > 0 {
@@ -242,7 +257,7 @@ pub fn view<HostMsg, F>(
 ) -> View<HostMsg>
 where
     HostMsg: Clone + 'static,
-    F: Fn(OutlineMsg) -> HostMsg + Copy + 'static,
+    F: Fn(OutlineMsg) -> HostMsg + Copy + Send + Sync + 'static,
 {
     let header = if items.is_empty() {
         "outline · sin símbolos · Esc cierra".to_string()
@@ -284,12 +299,12 @@ where
         ..Default::default()
     })
     .fill(palette.bg_panel)
-    .children(vec![text_input_view(
+    .children(vec![text_input_view_full(
         &state.input,
         "filtro: nombre del símbolo o clase…",
         true,
         &tp,
-        to_host(OutlineMsg::Open),
+        move |ev| to_host(OutlineMsg::MouseInput(ev)),
     )]);
 
     let visible_start = state.selected.saturating_sub(MAX_VISIBLE.saturating_sub(1));
diff --git a/shared/app-bus/Cargo.toml b/shared/app-bus/Cargo.toml
index 7f41090..7c2e51a 100644
--- a/shared/app-bus/Cargo.toml
+++ b/shared/app-bus/Cargo.toml
@@ -6,8 +6,7 @@ rust-version.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
-description = "app-bus — registro único de aplicaciones de gioser + protocolo de menú global (Archivo/Editar/Ayuda) + bus de eventos foco/lanzamiento + trait Launcher. Lo consultan los launchers (mirada, shuma, wawa) en vez de reimplementar el despacho cada uno. Los datos + el trait son no_std; el descubrimiento (fs/TOML), el spawn de procesos y el Bus van detrás del feature `std`."
+description = "app-bus — registro único de aplicaciones de tawasuyu + protocolo de menú global (Archivo/Editar/Ayuda) + bus de eventos foco/lanzamiento + trait Launcher. Lo consultan los launchers (mirada, shuma, wawa) en vez de reimplementar el despacho cada uno. Los datos + el trait son no_std; el descubrimiento (fs/TOML), el spawn de procesos y el Bus van detrás del feature `std`."
 
 [features]
 default = ["std"]
diff --git a/shared/app-bus/LEEME.md b/shared/app-bus/LEEME.md
new file mode 100644
index 0000000..227fa8b
--- /dev/null
+++ b/shared/app-bus/LEEME.md
@@ -0,0 +1,40 @@
+# app-bus — bus de eventos in-proc para apps Llimphi
+
+*Read this in English: [README.md](README.md).*
+
+Bus de **publish/subscribe** tipado, síncrono y en memoria, para coordinar apps
+dentro del mismo proceso. Cubre tres familias de eventos transversales: **foco**
+(qué app/ventana lo tiene), **navegación** (abrir/cerrar/enfocar una app o ruta)
+y **notificaciones** efímeras.
+
+## Qué expone
+
+- `AppBus` — handle compartible (`Clone`, internamente `Arc<RwLock<…>>`).
+- `Event` — enum transversal: `FocusChanged` / `Navigate` / `CloseApp` / `Notify`.
+- `NotifyLevel` — `Info` / `Warn` / `Error`.
+- `Subscription` — guard RAII: al soltarlo se cancela la suscripción.
+- `publish(Event)` entrega de forma síncrona a todos los suscriptores; entrega
+  anidada si un callback publica desde su propio handler.
+
+## No-objetivos
+
+- No es un bus interproceso ni de red (eso es Akasha / app-channel).
+- No persiste eventos ni garantiza entrega tras reinicio.
+- No ordena por prioridad.
+
+## Estado (2026-05-31)
+
+### Hecho
+- Bus pub/sub completo: `publish`, `subscribe`, cancelación por guard RAII.
+- Enum `Event` con foco/navegación/cierre/notificaciones.
+- Consumido por `launcher-llimphi` (dispara navegación/lanzamiento).
+
+### Pendiente
+- Adaptador multiproceso (hoy estrictamente in-proc).
+- Entrega diferida / cola (hoy reentrancia anidada síncrona).
+- Filtrado por tipo de evento en `subscribe` (hoy el callback filtra).
+
+## Lugar en el repo
+
+`shared/app-bus` — canal in-proc de grano fino. El plano de control a más alto
+nivel es `shared/sandokan` (ver su SDD.md).
diff --git a/shared/app-bus/README.md b/shared/app-bus/README.md
index 361138c..584e849 100644
--- a/shared/app-bus/README.md
+++ b/shared/app-bus/README.md
@@ -1,38 +1,38 @@
-# app-bus — bus de eventos in-proc para apps Llimphi
+# app-bus — in-proc event bus for Llimphi apps
 
-Bus de **publish/subscribe** tipado, síncrono y en memoria, para coordinar apps
-dentro del mismo proceso. Cubre tres familias de eventos transversales: **foco**
-(qué app/ventana lo tiene), **navegación** (abrir/cerrar/enfocar una app o ruta)
-y **notificaciones** efímeras.
+A typed, synchronous, in-memory **publish/subscribe** bus to coordinate apps
+within the same process. It covers three families of cross-cutting events: **focus**
+(which app/window holds it), **navigation** (open/close/focus an app or route)
+and ephemeral **notifications**.
 
-## Qué expone
+## What it exposes
 
-- `AppBus` — handle compartible (`Clone`, internamente `Arc<RwLock<…>>`).
-- `Event` — enum transversal: `FocusChanged` / `Navigate` / `CloseApp` / `Notify`.
+- `AppBus` — shareable handle (`Clone`, internally `Arc<RwLock<…>>`).
+- `Event` — cross-cutting enum: `FocusChanged` / `Navigate` / `CloseApp` / `Notify`.
 - `NotifyLevel` — `Info` / `Warn` / `Error`.
-- `Subscription` — guard RAII: al soltarlo se cancela la suscripción.
-- `publish(Event)` entrega de forma síncrona a todos los suscriptores; entrega
-  anidada si un callback publica desde su propio handler.
+- `Subscription` — RAII guard: dropping it cancels the subscription.
+- `publish(Event)` delivers synchronously to all subscribers; nested delivery
+  if a callback publishes from its own handler.
 
-## No-objetivos
+## Non-goals
 
-- No es un bus interproceso ni de red (eso es Akasha / app-channel).
-- No persiste eventos ni garantiza entrega tras reinicio.
-- No ordena por prioridad.
+- It is not an inter-process or network bus (that is Akasha / app-channel).
+- It does not persist events nor guarantee delivery after restart.
+- It does not order by priority.
 
-## Estado (2026-05-31)
+## Status (2026-05-31)
 
-### Hecho
-- Bus pub/sub completo: `publish`, `subscribe`, cancelación por guard RAII.
-- Enum `Event` con foco/navegación/cierre/notificaciones.
-- Consumido por `launcher-llimphi` (dispara navegación/lanzamiento).
+### Done
+- Complete pub/sub bus: `publish`, `subscribe`, cancellation via RAII guard.
+- `Event` enum with focus/navigation/close/notifications.
+- Consumed by `launcher-llimphi` (fires navigation/launch).
 
-### Pendiente
-- Adaptador multiproceso (hoy estrictamente in-proc).
-- Entrega diferida / cola (hoy reentrancia anidada síncrona).
-- Filtrado por tipo de evento en `subscribe` (hoy el callback filtra).
+### Pending
+- Multi-process adapter (today strictly in-proc).
+- Deferred delivery / queue (today synchronous nested reentrancy).
+- Filtering by event type in `subscribe` (today the callback filters).
 
-## Lugar en el repo
+## Place in the repo
 
-`shared/app-bus` — canal in-proc de grano fino. El plano de control a más alto
-nivel es `shared/sandokan` (ver su SDD.md).
+`shared/app-bus` — fine-grained in-proc channel. The higher-level control plane
+is `shared/sandokan` (see its SDD.md).
diff --git a/shared/app-bus/assets/apps/media.toml b/shared/app-bus/assets/apps/media.toml
index f52ca63..26318cb 100644
--- a/shared/app-bus/assets/apps/media.toml
+++ b/shared/app-bus/assets/apps/media.toml
@@ -1,8 +1,8 @@
 # Reproductor multimedia de la suite (02_ruway/media).
 #
-# Copiá este archivo a ~/.config/gioser/apps/media.toml para que los launchers
+# Copia este archivo a ~/.config/tawasuyu/apps/media.toml para que los launchers
 # (el menú de inicio de pata, el spotlight) y el "abrir con" del navegador lo
-# descubran. El binario `media-app` debe estar en el PATH (cargo install) o poné
+# descubran. El binario `media-app` debe estar en el PATH (cargo install) o pon
 # su ruta absoluta en `exec`.
 
 id = "media"
diff --git a/shared/app-bus/assets/apps/nada.toml b/shared/app-bus/assets/apps/nada.toml
index 5757dfc..3afe945 100644
--- a/shared/app-bus/assets/apps/nada.toml
+++ b/shared/app-bus/assets/apps/nada.toml
@@ -2,8 +2,8 @@
 # Llimphi sobre archivos reales. Acepta una ruta (archivo o directorio) como
 # argumento.
 #
-# Copiá este archivo a ~/.config/gioser/apps/nada.toml. El binario `nada` debe
-# estar en el PATH (cargo install -p nada) o poné su ruta absoluta en `exec`.
+# Copia este archivo a ~/.config/tawasuyu/apps/nada.toml. El binario `nada` debe
+# estar en el PATH (cargo install -p nada) o pon su ruta absoluta en `exec`.
 
 id = "nada"
 label = "Nada"
diff --git a/shared/app-bus/src/lib.rs b/shared/app-bus/src/lib.rs
index 4039556..630e4c6 100644
--- a/shared/app-bus/src/lib.rs
+++ b/shared/app-bus/src/lib.rs
@@ -1,4 +1,4 @@
-//! `app-bus` — el cimiento del menú de aplicaciones de gioser.
+//! `app-bus` — el cimiento del menú de aplicaciones de tawasuyu.
 //!
 //! Hoy hay tres lanzadores que no comparten nada: `mirada-launcher`
 //! (TOML propio, `std::process`), `shuma-module-launcher` (otro TOML,
@@ -10,7 +10,7 @@
 //!
 //! 1. **Registro** ([`AppRegistry`] + [`AppEntry`]): qué apps hay, cómo se
 //!    lanzan ([`Launch`]) y qué mimes/lentes saben abrir (open-with).
-//!    Se descubre de `~/.config/gioser/apps/*.toml` (feature `std`).
+//!    Se descubre de `~/.config/tawasuyu/apps/*.toml` (feature `std`).
 //! 2. **Menú global** ([`AppMenu`]/[`Menu`]/[`MenuItem`]): el clásico
 //!    Archivo/Editar/Ayuda que la app *declara*. Cuando hay una barra de
 //!    launcher presente, ésta lo *adopta* y la app deja de pintarlo en su
@@ -42,7 +42,7 @@ use serde::{Deserialize, Serialize};
 // Registro de apps
 // =====================================================================
 
-/// Cómo se enciende una app. Los tres mundos de gioser:
+/// Cómo se enciende una app. Los tres mundos de tawasuyu:
 /// `Exec` (binario del host), `Action` (acción interna del chasis que la
 /// hospeda — p.ej. `focus:shell`) y `Wasm` (módulo en el almacén de wawa,
 /// direccionado por hash de bytecode).
@@ -52,8 +52,15 @@ pub enum Launch {
     Exec { program: String, args: Vec<String> },
     /// Acción interna a despachar por el host (no spawnea proceso).
     Action(String),
-    /// App WASM de wawa, por hash de bytecode (hex) en el almacén.
-    Wasm { bytecode_hex: String },
+    /// App WASM por hash de bytecode (hex) en el almacén/CAS. `grant_hex`, si
+    /// está, es el hash (hex) del objeto-concesión que autoriza sus permisos —
+    /// el host (llimphi-wasm-dist) lo trae por hash, lo verifica y corre la app
+    /// con sus permisos efectivos. `None` ⇒ app de sólo-UI. app-bus sólo
+    /// transporta los hex; no los interpreta.
+    Wasm {
+        bytecode_hex: String,
+        grant_hex: Option<String>,
+    },
 }
 
 /// Una app registrada — la fila de la tabla que ven los launchers.
@@ -68,28 +75,105 @@ pub struct AppEntry {
     pub category: Option<String>,
     pub launch: Launch,
     /// Mimes/lentes que esta app sabe abrir (open-with). Vacío = no es
-    /// visor; el registro de visores de nahual-shell se alimenta de acá.
+    /// visor; el registro de visores de nahual-shell se alimenta de aquí.
     pub handles: Vec<String>,
 }
 
 impl AppEntry {
-    /// `true` si la app declara saber abrir `mime`.
+    /// `true` si la app declara saber abrir `mime`. Un handle que termina en
+    /// `/` (p.ej. `"image/"`) actúa como **prefijo**: matchea cualquier mime
+    /// que arranque con él (`image/png`, `image/webp`…). El resto es match
+    /// exacto. Así una app declara una familia entera sin enumerar cada mime.
     pub fn handles_mime(&self, mime: &str) -> bool {
-        self.handles.iter().any(|m| m == mime)
+        self.handles
+            .iter()
+            .any(|h| h == mime || (h.ends_with('/') && mime.starts_with(h.as_str())))
     }
 }
 
+/// El catálogo **por defecto** de la suite: las apps con su `Launch::Exec` y
+/// los mimes que abren (`handles`), para que el open-with universal funcione
+/// sin que el usuario tenga que sembrar config. `AppRegistry::with_defaults`
+/// las fusiona con lo descubierto en disco. Es `no_std + alloc`.
+pub fn default_entries() -> Vec<AppEntry> {
+    // (id, label, icono, exec, categoría, handles)
+    const D: &[(&str, &str, &str, &str, &str, &[&str])] = &[
+        ("nada", "Nada", "≡", "nada", "ruway",
+            &["text/", "application/json", "application/toml", "inode/x-empty"]),
+        ("pluma", "Pluma", "¶", "pluma-app-llimphi", "unanchay",
+            &["text/markdown", "text/plain",
+              "application/vnd.openxmlformats-officedocument.wordprocessingml.document"]),
+        ("pluma-notebook", "Pluma Notebook", "▣", "pluma-notebook-llimphi", "unanchay",
+            &["application/x-pluma-notebook"]),
+        ("tullpu", "Tullpu", "✦", "tullpu-app-llimphi", "ruway", &["image/"]),
+        ("hapiy", "Hapiy", "⛶", "hapiy-llimphi", "ruway", &[]),
+        ("takiy", "Takiy", "♪", "takiy-app-llimphi", "ruway", &["audio/"]),
+        ("media", "Media", "▶", "media-app", "ruway", &["video/", "audio/"]),
+        ("media-tube", "Media Tube", "▷", "media-tube", "ruway", &[]),
+        ("cosmos", "Cosmos", "✶", "cosmos-app-llimphi", "yachay",
+            &["application/x-cosmos-chart"]),
+        ("dominium", "Dominium", "◉", "dominium-app-llimphi", "yachay",
+            &["application/x-dominium"]),
+        ("tinkuy", "Tinkuy", "⚛", "tinkuy-llimphi", "yachay", &["application/x-tinkuy"]),
+        ("chaka", "Chaka", "◫", "chaka-app-llimphi", "unanchay", &["application/x-chaka"]),
+        ("nakui", "Nakui", "Σ", "nakui-sheet-llimphi", "yachay",
+            &["text/csv", "application/x-nakui"]),
+        ("puriy", "Puriy", "◎", "puriy", "unanchay", &["text/html"]),
+        ("raymi", "Raymi", "◷", "raymi-app", "ruway", &["text/calendar"]),
+        ("supay", "Supay", "✷", "supay-app-llimphi", "ruway", &[]),
+        ("sandokan-monitor", "Monitor", "❤", "sandokan-monitor", "ukupacha", &[]),
+        ("nahual", "Nahual", "❖", "nahual-shell-llimphi", "ruway", &["inode/directory"]),
+        ("mirada-panel", "Mirada Panel", "▭", "mirada-llimphi", "ukupacha", &[]),
+        ("panel-control", "Panel de control", "⚙", "wawa-panel", "ukupacha", &[]),
+        // Apps de dominio que faltaban en el catálogo (verificado 2026-07-12):
+        // binarios reales de cada crate de UI. `tampu` es `tampu-app` (no
+        // `-llimphi`); `agora` es `agora-app`; `khipu` es `khipu-app`.
+        ("khipu", "Khipu", "⌇", "khipu-app", "unanchay", &[]),
+        ("hampi", "Hampi", "✚", "hampi-ui-llimphi", "yachay", &[]),
+        ("chasqui", "Chasqui", "⇌", "chasqui-explorer-llimphi", "ruway", &[]),
+        ("tampu", "Tampu", "⌂", "tampu-app", "ruway", &[]),
+        ("agora", "Ágora", "⚖", "agora-app", "ukupacha", &[]),
+    ];
+    D.iter()
+        .map(|(id, label, icon, exec, cat, handles)| AppEntry {
+            id: String::from(*id),
+            label: String::from(*label),
+            icon: Some(String::from(*icon)),
+            category: Some(String::from(*cat)),
+            launch: Launch::Exec { program: String::from(*exec), args: Vec::new() },
+            handles: handles.iter().map(|h| String::from(*h)).collect(),
+        })
+        .collect()
+}
+
 #[cfg(feature = "std")]
 impl AppEntry {
-    /// Enciende la app vía `std::process`. Sólo `Exec` spawnea; `Action`/
-    /// `Wasm` devuelven `Ok(None)` — los despacha el host (chasis/kernel).
+    /// Enciende la app vía `std::process`. `Exec` spawnea el binario; `Wasm`
+    /// spawnea el launcher de escritorio `llimphi-wasm-open` con el hash del
+    /// bytecode (y, si lo hay, el de la concesión) — éste resuelve el blob
+    /// desde el CAS local, verifica integridad + concesión Ed25519 y abre la
+    /// app en una ventana Llimphi con sus permisos efectivos. `Action` devuelve
+    /// `Ok(None)`: lo despacha el chasis in-process (no es un proceso del SO).
     pub fn spawn(&self) -> std::io::Result<Option<std::process::Child>> {
         match &self.launch {
-            Launch::Exec { program, args } => std::process::Command::new(program)
-                .args(args)
-                .spawn()
-                .map(Some),
-            Launch::Action(_) | Launch::Wasm { .. } => Ok(None),
+            Launch::Exec { program, args } => {
+                let mut cmd = std::process::Command::new(program);
+                cmd.args(args);
+                asegurar_xdg_data_dirs(&mut cmd);
+                cmd.spawn().map(Some)
+            }
+            Launch::Wasm { bytecode_hex, grant_hex } => {
+                let mut cmd = std::process::Command::new("llimphi-wasm-open");
+                cmd.arg("--hash").arg(bytecode_hex);
+                if let Some(grant) = grant_hex {
+                    cmd.arg("--grant").arg(grant);
+                }
+                if !self.label.is_empty() {
+                    cmd.arg("--name").arg(&self.label);
+                }
+                cmd.spawn().map(Some)
+            }
+            Launch::Action(_) => Ok(None),
         }
     }
 
@@ -101,15 +185,39 @@ impl AppEntry {
     /// in-process, o kernel de wawa a una app WASM), no un proceso del SO.
     pub fn open(&self, target: &str) -> std::io::Result<Option<std::process::Child>> {
         match &self.launch {
-            Launch::Exec { program, args } => std::process::Command::new(program)
-                .args(expand_target(args, target))
-                .spawn()
-                .map(Some),
+            Launch::Exec { program, args } => {
+                let mut cmd = std::process::Command::new(program);
+                cmd.args(expand_target(args, target));
+                asegurar_xdg_data_dirs(&mut cmd);
+                cmd.spawn().map(Some)
+            }
             Launch::Action(_) | Launch::Wasm { .. } => Ok(None),
         }
     }
 }
 
+/// Garantiza que el hijo reciba un `XDG_DATA_DIRS` no vacío.
+///
+/// Cuando la sesión se arranca desde una TTY o un DM que no corrió el chain de
+/// perfiles (`/etc/profile`, `pam_env`), el shell (pata) hereda `XDG_DATA_DIRS`
+/// **vacío**, y ese vacío se propaga a cada app que lanza. GIO/KIO lo toman al
+/// pie de la letra en vez de aplicar el default del spec, y entonces NO
+/// encuentran los `.desktop` ni el `mimeinfo.cache` de `/usr/share/applications`
+/// → «abrir con» sale vacío y todo archivo parece sin asociación.
+///
+/// Espeja `ensure_xdg_data_dirs` del compositor (`mirada-compositor`): el
+/// compositor cubre lo que lanza él (keymap/autostart), pero las apps que
+/// abre el dock pasan por aquí. Si el valor heredado ya trae algo lo
+/// respetamos; sólo cuando falta o viene vacío fijamos el default del
+/// freedesktop base-dir spec: `/usr/local/share:/usr/share`.
+#[cfg(feature = "std")]
+fn asegurar_xdg_data_dirs(cmd: &mut std::process::Command) {
+    let heredado = std::env::var("XDG_DATA_DIRS").unwrap_or_default();
+    if heredado.trim().is_empty() {
+        cmd.env("XDG_DATA_DIRS", "/usr/local/share:/usr/share");
+    }
+}
+
 /// Sustituye los placeholders `%f`/`%u` por `target` en `args`. Si ninguno
 /// aparece, agrega `target` como argumento final — la convención de
 /// freedesktop (`Exec=app %f`) que entiende cualquier "abrir con".
@@ -164,6 +272,9 @@ struct LaunchFile {
     action: Option<String>,
     #[serde(default)]
     wasm: Option<String>,
+    /// Hash hex del objeto-concesión que autoriza los permisos del wasm.
+    #[serde(default)]
+    grant: Option<String>,
 }
 
 #[cfg(feature = "std")]
@@ -177,13 +288,55 @@ impl LaunchFile {
         } else if let Some(action) = self.action {
             Some(Launch::Action(action))
         } else {
-            self.wasm.map(|bytecode_hex| Launch::Wasm { bytecode_hex })
+            self.wasm.map(|bytecode_hex| Launch::Wasm {
+                bytecode_hex,
+                grant_hex: self.grant,
+            })
         }
     }
 }
 
 #[cfg(feature = "std")]
 impl AppFile {
+    /// Inverso de [`AppFile::resolve`]: arma la tabla `[launch]` desde un
+    /// [`Launch`] para serializar a disco.
+    fn from_entry(e: &AppEntry) -> Self {
+        let launch = match &e.launch {
+            Launch::Exec { program, args } => LaunchFile {
+                exec: Some(program.clone()),
+                args: args.clone(),
+                action: None,
+                wasm: None,
+                grant: None,
+            },
+            Launch::Action(a) => LaunchFile {
+                exec: None,
+                args: Vec::new(),
+                action: Some(a.clone()),
+                wasm: None,
+                grant: None,
+            },
+            Launch::Wasm {
+                bytecode_hex,
+                grant_hex,
+            } => LaunchFile {
+                exec: None,
+                args: Vec::new(),
+                action: None,
+                wasm: Some(bytecode_hex.clone()),
+                grant: grant_hex.clone(),
+            },
+        };
+        AppFile {
+            id: e.id.clone(),
+            label: e.label.clone(),
+            icon: e.icon.clone(),
+            category: e.category.clone(),
+            handles: e.handles.clone(),
+            launch,
+        }
+    }
+
     fn into_entry(self) -> Option<AppEntry> {
         Some(AppEntry {
             id: self.id,
@@ -196,6 +349,15 @@ impl AppFile {
     }
 }
 
+/// Serializa una entrada a su forma TOML en disco (`<id>.toml`). Es el inverso
+/// de [`parse_entry`]: el productor (un instalador que publica una app) y el
+/// consumidor (el registro) comparten el mismo esquema, sin que el productor lo
+/// re-escriba a mano y se desincronice.
+#[cfg(feature = "std")]
+pub fn entry_to_toml(entry: &AppEntry) -> Result<String, toml::ser::Error> {
+    toml::to_string(&AppFile::from_entry(entry))
+}
+
 /// Parsea una entrada de app desde texto TOML. Devuelve `None` si no
 /// parsea o si la `[launch]` no nombra ningún modo (`exec`/`action`/`wasm`).
 #[cfg(feature = "std")]
@@ -205,10 +367,10 @@ pub fn parse_entry(toml_src: &str) -> Option<AppEntry> {
         .and_then(AppFile::into_entry)
 }
 
-/// Directorio canónico del registro: `~/.config/gioser/apps/`.
+/// Directorio canónico del registro: `~/.config/tawasuyu/apps/`.
 #[cfg(feature = "std")]
 pub fn apps_dir() -> Option<std::path::PathBuf> {
-    directories::BaseDirs::new().map(|b| b.config_dir().join("gioser").join("apps"))
+    directories::BaseDirs::new().map(|b| b.config_dir().join("tawasuyu").join("apps"))
 }
 
 /// La tabla de apps. Inmutable tras descubrir — recargar = volver a
@@ -263,6 +425,67 @@ impl AppRegistry {
         apps_dir().map(Self::from_dir).unwrap_or_default()
     }
 
+    /// Como [`discover`](Self::discover) pero **fusionando** las apps de la suite
+    /// tawasuyu (`~/.config/tawasuyu/apps/*.toml`) con las `.desktop` del sistema
+    /// (XDG). Dedup por label en minúsculas: la entrada tawasuyu gana sobre la del
+    /// sistema con el mismo nombre (así «Media» de tawasuyu tapa un `media.desktop`
+    /// del sistema). Orden alfabético por label. Es lo que un launcher "normal"
+    /// (rofi/wofi) descubre, más la suite propia.
+    pub fn discover_merged() -> Self {
+        use std::collections::HashSet;
+        let mut entries = Self::discover().entries;
+        let mut labels: HashSet<String> =
+            entries.iter().map(|e| e.label.to_lowercase()).collect();
+        for e in discover_desktop_entries() {
+            if labels.insert(e.label.to_lowercase()) {
+                entries.push(e);
+            }
+        }
+        Self::new(entries)
+    }
+
+    /// El registro **con el catálogo por defecto de la suite** ([`default_entries`])
+    /// fusionado con lo descubierto en disco (`~/.config/tawasuyu/apps/*.toml`) y
+    /// las `.desktop` del sistema. Para apps presentes en ambos lados: el
+    /// `launch`/`label` del usuario gana, pero los `handles` se **unen** (no se
+    /// pierden los mimes builtin). Es lo que un front quiere por defecto: el
+    /// open-with funciona sin sembrar nada.
+    pub fn with_defaults() -> Self {
+        use std::collections::{BTreeMap, HashSet};
+        let mut by_id: BTreeMap<String, AppEntry> =
+            default_entries().into_iter().map(|e| (e.id.clone(), e)).collect();
+        for d in Self::discover().entries {
+            match by_id.get_mut(&d.id) {
+                Some(base) => {
+                    for h in &d.handles {
+                        if !base.handles.contains(h) {
+                            base.handles.push(h.clone());
+                        }
+                    }
+                    base.launch = d.launch;
+                    base.label = d.label;
+                    if d.icon.is_some() {
+                        base.icon = d.icon;
+                    }
+                    if d.category.is_some() {
+                        base.category = d.category;
+                    }
+                }
+                None => {
+                    by_id.insert(d.id.clone(), d);
+                }
+            }
+        }
+        let mut entries: Vec<AppEntry> = by_id.into_values().collect();
+        let mut labels: HashSet<String> = entries.iter().map(|e| e.label.to_lowercase()).collect();
+        for e in discover_desktop_entries() {
+            if labels.insert(e.label.to_lowercase()) {
+                entries.push(e);
+            }
+        }
+        Self::new(entries)
+    }
+
     /// **Open-with universal**: elige el primer handler de `mime` (orden de
     /// label) y le abre `target` out-of-process vía [`AppEntry::open`].
     /// Devuelve el `AppEntry` elegido y su `Child` (o `None` en el child si
@@ -304,6 +527,303 @@ impl AppRegistry {
     }
 }
 
+// ----- descubrimiento de .desktop del sistema (XDG) -----
+
+/// Los directorios `applications/` del estándar XDG, en orden de prioridad
+/// (usuario primero, sistema después). Un `.desktop` de mayor prioridad tapa a
+/// otro con el mismo nombre de archivo.
+#[cfg(feature = "std")]
+fn xdg_application_dirs() -> Vec<std::path::PathBuf> {
+    use std::path::PathBuf;
+    let mut dirs = Vec::new();
+    let data_home = std::env::var_os("XDG_DATA_HOME")
+        .map(PathBuf::from)
+        .filter(|p| p.is_absolute())
+        .or_else(|| std::env::var_os("HOME").map(|h| PathBuf::from(h).join(".local/share")));
+    if let Some(home) = data_home {
+        dirs.push(home.join("applications"));
+    }
+    let data_dirs = std::env::var("XDG_DATA_DIRS")
+        .ok()
+        .filter(|s| !s.is_empty())
+        .unwrap_or_else(|| "/usr/local/share:/usr/share".into());
+    for d in data_dirs.split(':').filter(|s| !s.is_empty()) {
+        dirs.push(PathBuf::from(d).join("applications"));
+    }
+    dirs
+}
+
+/// Descubre las aplicaciones `.desktop` instaladas en el sistema (XDG) como
+/// [`AppEntry`] con [`Launch::Exec`]. Dedup por id XDG (ruta relativa con
+/// `/`→`-`): un dir de más prioridad tapa al de menos. Ignora las marcadas
+/// `NoDisplay`/`Hidden` y las que no son `Type=Application`. `MimeType` alimenta
+/// `handles` (open-with universal).
+#[cfg(feature = "std")]
+pub fn discover_desktop_entries() -> Vec<AppEntry> {
+    use std::collections::HashSet;
+    let mut entries = Vec::new();
+    let mut seen: HashSet<String> = HashSet::new();
+    for root in xdg_application_dirs() {
+        collect_desktop_dir(&root, &root, &mut seen, &mut entries);
+    }
+    entries
+}
+
+#[cfg(feature = "std")]
+fn collect_desktop_dir(
+    root: &std::path::Path,
+    dir: &std::path::Path,
+    seen: &mut std::collections::HashSet<String>,
+    out: &mut Vec<AppEntry>,
+) {
+    let Ok(rd) = std::fs::read_dir(dir) else {
+        return;
+    };
+    for e in rd.flatten() {
+        let path = e.path();
+        if path.is_dir() {
+            collect_desktop_dir(root, &path, seen, out);
+            continue;
+        }
+        if path.extension().and_then(|s| s.to_str()) != Some("desktop") {
+            continue;
+        }
+        let id = path
+            .strip_prefix(root)
+            .unwrap_or(&path)
+            .to_string_lossy()
+            .replace('/', "-");
+        if !seen.insert(id.clone()) {
+            continue; // ya lo tapó un directorio de más prioridad
+        }
+        if let Ok(text) = std::fs::read_to_string(&path) {
+            if let Some(entry) = parse_desktop_entry(&text, &id) {
+                out.push(entry);
+            }
+        }
+    }
+}
+
+/// Extrae un [`AppEntry`] del texto de un `.desktop`. `None` si no es lanzable
+/// o está oculta. El `Exec` se parte en programa + args quitando los códigos de
+/// campo (`%f`/`%U`/…).
+#[cfg(feature = "std")]
+fn parse_desktop_entry(text: &str, id: &str) -> Option<AppEntry> {
+    let mut in_entry = false;
+    let mut name = None::<String>;
+    let mut exec = None::<String>;
+    let mut kind = None::<String>;
+    let mut icon = None::<String>;
+    let mut mimes: Vec<String> = Vec::new();
+    let mut categories = String::new();
+    let mut no_display = false;
+    let mut hidden = false;
+    for line in text.lines() {
+        let line = line.trim();
+        if line.starts_with('[') {
+            in_entry = line == "[Desktop Entry]";
+            continue;
+        }
+        if !in_entry || line.is_empty() || line.starts_with('#') {
+            continue;
+        }
+        let Some((key, value)) = line.split_once('=') else {
+            continue;
+        };
+        let value = value.trim();
+        match key.trim() {
+            // El `Name` plano (no las variantes `Name[es]`, que traen `[`).
+            "Name" if name.is_none() => name = Some(value.into()),
+            "Exec" => exec = Some(value.into()),
+            "Type" => kind = Some(value.into()),
+            "Icon" => icon = Some(value.into()),
+            "MimeType" => {
+                mimes = value
+                    .split(';')
+                    .filter(|s| !s.is_empty())
+                    .map(String::from)
+                    .collect()
+            }
+            "Categories" => categories = value.to_string(),
+            "NoDisplay" => no_display = value == "true",
+            "Hidden" => hidden = value == "true",
+            _ => {}
+        }
+    }
+    if no_display || hidden || kind.as_deref() != Some("Application") {
+        return None;
+    }
+    let label = name?;
+    let (program, args) = split_exec(&exec?)?;
+    if label.is_empty() || program.is_empty() {
+        return None;
+    }
+    Some(AppEntry {
+        id: String::from(id),
+        label,
+        // Nombre de ícono freedesktop (no ruta); el launcher decide cómo
+        // pintarlo. pata cae a un glyph genérico si no sabe resolverlo.
+        icon,
+        category: Some(categoria_primaria(&categories)),
+        launch: Launch::Exec { program, args },
+        handles: mimes,
+    })
+}
+
+/// Mapea el campo `Categories=` de un `.desktop` (lista `;`-separada, estándar
+/// freedesktop) a UNA categoría primaria legible en español, para agrupar el
+/// menú. Toma la primera categoría principal que reconoce; si ninguna, "Otros".
+#[cfg(feature = "std")]
+fn categoria_primaria(categories: &str) -> String {
+    // (token freedesktop, etiqueta) en orden de prioridad.
+    const MAIN: &[(&str, &str)] = &[
+        ("AudioVideo", "Multimedia"),
+        ("Audio", "Multimedia"),
+        ("Video", "Multimedia"),
+        ("Development", "Desarrollo"),
+        ("Education", "Educación"),
+        ("Game", "Juegos"),
+        ("Graphics", "Gráficos"),
+        ("Network", "Internet"),
+        ("Office", "Oficina"),
+        ("Science", "Ciencia"),
+        ("Settings", "Configuración"),
+        ("System", "Sistema"),
+        ("Utility", "Accesorios"),
+    ];
+    let toks: Vec<&str> = categories.split(';').filter(|s| !s.is_empty()).collect();
+    for (tok, label) in MAIN {
+        if toks.iter().any(|t| t.eq_ignore_ascii_case(tok)) {
+            return label.to_string();
+        }
+    }
+    "Otros".to_string()
+}
+
+/// Parte el `Exec` de un `.desktop` en (programa, args), quitando los códigos de
+/// campo (`%f`, `%U`, `%i`, …; `%%`→`%`). División por espacios (sin honrar
+/// comillas: alcanza para lanzar — los args entrecomillados con espacios en
+/// `Exec` son raros y se lanzan igual por el shell del usuario si hiciera falta).
+#[cfg(feature = "std")]
+fn split_exec(exec: &str) -> Option<(String, Vec<String>)> {
+    let mut tokens: Vec<String> = Vec::new();
+    for raw in exec.split_whitespace() {
+        // Un token que es exactamente un código de campo (`%f`, `%U`, …) se
+        // descarta entero; `%%` es un `%` literal.
+        if raw.len() == 2 && raw.starts_with('%') && raw != "%%" {
+            continue;
+        }
+        tokens.push(raw.replace("%%", "%"));
+    }
+    let mut it = tokens.into_iter();
+    let program = it.next()?;
+    Some((program, it.collect()))
+}
+
+// =====================================================================
+// Abrir una URL con el navegador del usuario — agnóstico, sin recomendar
+// =====================================================================
+//
+// La suite NO trae ni sugiere un navegador: aprovecha el que el usuario ya
+// tenga instalado y elegido. El contenido web (p. ej. una app WASM marcada como
+// web en el catálogo) se abre con el handler por defecto del sistema. La
+// elección es del usuario/SO, no nuestra.
+
+/// Construye, en orden de preferencia, los comandos candidatos para abrir `url`,
+/// dado el valor de `$BROWSER` (`None`/"" = ausente). Función pura para poder
+/// testear el ruteo sin spawnear:
+///
+/// 1. `$BROWSER` — convención freedesktop: lista separada por `:` de comandos,
+///    cada uno con `%s` sustituido por la URL (o la URL como último argumento si
+///    no trae `%s`). La fija el usuario; respetarla es lo más agnóstico posible.
+/// 2. `xdg-open <url>` — respeta el handler de `x-scheme-handler/https` que el
+///    usuario configuró en su escritorio.
+/// 3. `gio open <url>` — fallback en entornos GLib.
+///
+/// Ningún navegador concreto aparece hardcodeado: salen del entorno o del SO.
+#[cfg(feature = "std")]
+pub fn resolve_open_command(url: &str, browser_env: Option<&str>) -> Vec<Vec<String>> {
+    let mut out: Vec<Vec<String>> = Vec::new();
+    if let Some(b) = browser_env {
+        for cmd in b.split(':').map(str::trim).filter(|s| !s.is_empty()) {
+            let mut argv: Vec<String> = cmd.split_whitespace().map(String::from).collect();
+            if argv.is_empty() {
+                continue;
+            }
+            let mut sustituido = false;
+            for a in argv.iter_mut() {
+                if a.contains("%s") {
+                    *a = a.replace("%s", url);
+                    sustituido = true;
+                }
+            }
+            if !sustituido {
+                argv.push(url.to_string());
+            }
+            out.push(argv);
+        }
+    }
+    out.push(vec!["xdg-open".into(), url.into()]);
+    out.push(vec!["gio".into(), "open".into(), url.into()]);
+    out
+}
+
+/// Abre `url` en el navegador por defecto del usuario. Prueba los candidatos de
+/// [`resolve_open_command`] en orden y devuelve el primero que **arranca**; si
+/// ninguno está disponible, un error. No bloquea (el navegador corre detached).
+#[cfg(feature = "std")]
+pub fn open_url(url: &str) -> std::io::Result<std::process::Child> {
+    let browser = std::env::var("BROWSER").ok();
+    let candidatos = resolve_open_command(url, browser.as_deref().filter(|s| !s.is_empty()));
+    let mut ultimo_err = None;
+    for argv in candidatos {
+        let (prog, args) = argv.split_first().expect("candidato no vacío");
+        match std::process::Command::new(prog).args(args).spawn() {
+            Ok(child) => return Ok(child),
+            Err(e) => ultimo_err = Some(e),
+        }
+    }
+    Err(ultimo_err
+        .unwrap_or_else(|| std::io::Error::new(std::io::ErrorKind::NotFound, "sin abridor de URLs")))
+}
+
+/// ¿Esta entrada `.desktop` es un navegador? De forma agnóstica: declara
+/// manejar `x-scheme-handler/https` (o, en su defecto, `text/html`). No mira la
+/// marca — sólo la capacidad declarada.
+pub fn es_navegador(e: &AppEntry) -> bool {
+    e.handles_mime("x-scheme-handler/https")
+        || e.handles_mime("x-scheme-handler/http")
+        || e.handles_mime("text/html")
+}
+
+/// Los navegadores instalados, descubiertos de las `.desktop` del sistema sin
+/// nombrar ninguna marca: las apps que declaran abrir `https`. Para ofrecer un
+/// "abrir con…" que respete lo que el usuario tiene, sin sugerir uno propio.
+#[cfg(feature = "std")]
+pub fn installed_browsers() -> Vec<AppEntry> {
+    discover_desktop_entries()
+        .into_iter()
+        .filter(es_navegador)
+        .collect()
+}
+
+/// El id del handler por defecto de `https` según el SO
+/// (`xdg-mime query default x-scheme-handler/https`). Es la elección del
+/// usuario; `None` si no se pudo determinar.
+#[cfg(feature = "std")]
+pub fn default_browser() -> Option<String> {
+    let out = std::process::Command::new("xdg-mime")
+        .args(["query", "default", "x-scheme-handler/https"])
+        .output()
+        .ok()?;
+    let s = String::from_utf8_lossy(&out.stdout).trim().to_string();
+    if s.is_empty() {
+        None
+    } else {
+        Some(s)
+    }
+}
+
 /// Siembra manifests por defecto en [`apps_dir`] si todavía no hay
 /// ninguno, para que [`AppRegistry::discover`] devuelva las apps del repo
 /// en una máquina recién instalada. No pisa nada si ya existe algún
@@ -329,7 +849,7 @@ pub fn seed_default_apps() -> std::io::Result<usize> {
     const DEFAULTS: &[(&str, &str, &str, &str, &str)] = &[
         ("cosmos", "Cosmos", "✶", "cosmos-app-llimphi", "yachay"),
         ("nada", "Nada", "✎", "nada", "ruway"),
-        ("pluma", "Pluma", "✒", "pluma-editor-llimphi", "unanchay"),
+        ("pluma", "Pluma", "✒", "pluma-app-llimphi", "unanchay"),
         ("nahual", "Nahual", "❖", "nahual-shell-llimphi", "ruway"),
         ("dominium", "Dominium", "◉", "dominium-app-llimphi", "yachay"),
         ("tinkuy", "Tinkuy", "⚛", "tinkuy-llimphi", "yachay"),
@@ -351,6 +871,23 @@ pub fn seed_default_apps() -> std::io::Result<usize> {
     Ok(escritos)
 }
 
+/// **Reveal in nahual** — el recíproco del open-with: abre el front universal
+/// `nahual` en el directorio que contiene `path` (o en `path` si ya es un dir),
+/// para que cualquier app pueda "volver al explorador". Spawnea
+/// `nahual-shell-llimphi <dir>`; `$NAHUAL_BIN` lo override (útil en dev). Un
+/// fallo al spawnear se propaga para que el caller lo reporte.
+#[cfg(feature = "std")]
+pub fn reveal(path: impl AsRef<std::path::Path>) -> std::io::Result<std::process::Child> {
+    let path = path.as_ref();
+    let dir = if path.is_dir() {
+        path
+    } else {
+        path.parent().unwrap_or(path)
+    };
+    let bin = std::env::var("NAHUAL_BIN").unwrap_or_else(|_| "nahual-shell-llimphi".into());
+    std::process::Command::new(bin).arg(dir).spawn()
+}
+
 // =====================================================================
 // Menú global (Archivo / Editar / Ayuda …)
 // =====================================================================
@@ -582,6 +1119,43 @@ impl Bus {
 mod tests {
     use super::*;
 
+    #[test]
+    fn handles_mime_exacto_y_prefijo() {
+        let img = AppEntry {
+            id: "tullpu".into(),
+            label: "Tullpu".into(),
+            icon: None,
+            category: None,
+            launch: Launch::Exec { program: "tullpu-app-llimphi".into(), args: vec![] },
+            handles: vec!["image/".into(), "text/x-rust".into()],
+        };
+        // Prefijo: cualquier image/* matchea.
+        assert!(img.handles_mime("image/png"));
+        assert!(img.handles_mime("image/webp"));
+        // Exacto: sólo el mime declarado.
+        assert!(img.handles_mime("text/x-rust"));
+        assert!(!img.handles_mime("text/plain"));
+        assert!(!img.handles_mime("audio/mp3"));
+    }
+
+    #[test]
+    fn registry_de_defaults_rutea_por_mime() {
+        let reg = AppRegistry::new(default_entries());
+        // image/png → tullpu (editor pixel).
+        let png = reg.handlers_for("image/png");
+        assert!(png.iter().any(|e| e.id == "tullpu"));
+        // audio/mp3 → takiy y media.
+        let mp3: Vec<&str> = reg.handlers_for("audio/mpeg").iter().map(|e| e.id.as_str()).collect();
+        assert!(mp3.contains(&"takiy"));
+        assert!(mp3.contains(&"media"));
+        // text/x-rust → nada (prefijo text/).
+        assert!(reg.handlers_for("text/x-rust").iter().any(|e| e.id == "nada"));
+        // text/html → puriy.
+        assert!(reg.handlers_for("text/html").iter().any(|e| e.id == "puriy"));
+        // Un mime sin handler no rompe.
+        assert!(reg.handlers_for("application/x-desconocido").is_empty());
+    }
+
     #[test]
     fn parse_exec_entry() {
         let src = r#"
@@ -612,7 +1186,59 @@ mod tests {
         let a = parse_entry("id='s'\nlabel='Shell'\n[launch]\naction='focus:shell'").unwrap();
         assert_eq!(a.launch, Launch::Action("focus:shell".into()));
         let w = parse_entry("id='h'\nlabel='Hola'\n[launch]\nwasm='deadbeef'").unwrap();
-        assert_eq!(w.launch, Launch::Wasm { bytecode_hex: "deadbeef".into() });
+        assert_eq!(
+            w.launch,
+            Launch::Wasm {
+                bytecode_hex: "deadbeef".into(),
+                grant_hex: None,
+            }
+        );
+        // Con concesión: el campo `grant` viaja como grant_hex.
+        let g = parse_entry("id='g'\nlabel='Cap'\n[launch]\nwasm='deadbeef'\ngrant='c0ffee'")
+            .unwrap();
+        assert_eq!(
+            g.launch,
+            Launch::Wasm {
+                bytecode_hex: "deadbeef".into(),
+                grant_hex: Some("c0ffee".into()),
+            }
+        );
+    }
+
+    #[test]
+    fn entry_to_toml_roundtrip() {
+        // El instalador serializa; el registro re-parsea. Deben coincidir para
+        // los tres modos, incluido Wasm con concesión.
+        for launch in [
+            Launch::Exec {
+                program: "cosmos-app-llimphi".into(),
+                args: vec!["--release".into()],
+            },
+            Launch::Action("focus:shell".into()),
+            Launch::Wasm {
+                bytecode_hex: "deadbeef".into(),
+                grant_hex: Some("c0ffee".into()),
+            },
+            Launch::Wasm {
+                bytecode_hex: "feedface".into(),
+                grant_hex: None,
+            },
+        ] {
+            let entry = AppEntry {
+                id: "x".into(),
+                label: "X".into(),
+                icon: Some("◆".into()),
+                category: Some("ruway".into()),
+                launch: launch.clone(),
+                handles: vec!["text/plain".into()],
+            };
+            let toml = entry_to_toml(&entry).expect("serializa");
+            let back = parse_entry(&toml).expect("re-parsea");
+            assert_eq!(back.launch, launch);
+            assert_eq!(back.id, "x");
+            assert_eq!(back.icon.as_deref(), Some("◆"));
+            assert_eq!(back.handles, vec!["text/plain".to_string()]);
+        }
     }
 
     #[test]
@@ -651,7 +1277,7 @@ mod tests {
     #[test]
     fn manifiestos_de_ejemplo_parsean_y_resuelven_handlers() {
         // Los manifiestos de `assets/apps/` (las apps reales de la suite que se
-        // copian a ~/.config/gioser/apps/) deben parsear y declarar sus mimes.
+        // copian a ~/.config/tawasuyu/apps/) deben parsear y declarar sus mimes.
         // Canario del formato: si cambia el esquema, esto avisa.
         let dir = std::path::Path::new(env!("CARGO_MANIFEST_DIR")).join("assets/apps");
         let reg = AppRegistry::from_dir(&dir);
@@ -703,6 +1329,73 @@ mod tests {
         assert_eq!(ProcessLauncher.launch(&app), Err(LaunchError::Unsupported));
     }
 
+    #[test]
+    fn resolve_open_command_sin_browser_cae_a_xdg_open() {
+        let cmds = resolve_open_command("https://x.test", None);
+        assert_eq!(cmds[0], vec!["xdg-open", "https://x.test"]);
+        assert_eq!(cmds[1], vec!["gio", "open", "https://x.test"]);
+        // Ningún navegador concreto aparece — sólo los abridores genéricos.
+        for c in &cmds {
+            assert!(!c[0].contains("firefox") && !c[0].contains("chrom"));
+        }
+    }
+
+    #[test]
+    fn resolve_open_command_respeta_browser_env() {
+        // $BROWSER con %s: se sustituye la URL en su lugar.
+        let cmds = resolve_open_command("https://x.test", Some("mibrowser %s --bg"));
+        assert_eq!(cmds[0], vec!["mibrowser", "https://x.test", "--bg"]);
+        // Sin %s: la URL va como último argumento.
+        let cmds = resolve_open_command("https://x.test", Some("otro"));
+        assert_eq!(cmds[0], vec!["otro", "https://x.test"]);
+        // Lista separada por `:` → varios candidatos, en orden, antes de xdg-open.
+        let cmds = resolve_open_command("u", Some("a:b %s"));
+        assert_eq!(cmds[0], vec!["a", "u"]);
+        assert_eq!(cmds[1], vec!["b", "u"]);
+        assert_eq!(cmds[2][0], "xdg-open");
+    }
+
+    #[test]
+    fn es_navegador_por_capacidad_no_por_marca() {
+        let mk = |handles: &[&str]| AppEntry {
+            id: "x".into(),
+            label: "X".into(),
+            icon: None,
+            category: None,
+            launch: Launch::Exec { program: "x".into(), args: vec![] },
+            handles: handles.iter().map(|s| s.to_string()).collect(),
+        };
+        assert!(es_navegador(&mk(&["x-scheme-handler/https", "text/html"])));
+        assert!(es_navegador(&mk(&["text/html"])));
+        assert!(!es_navegador(&mk(&["image/png"])));
+        assert!(!es_navegador(&mk(&[])));
+    }
+
+    #[test]
+    fn wasm_rutea_al_launcher_no_es_unsupported() {
+        // Un Launch::Wasm ya NO es Unsupported: spawnea `llimphi-wasm-open`.
+        // En el entorno de test el binario no está en PATH, así que el intento
+        // falla con NotFound — pero el punto es que SE INTENTA lanzar (el host
+        // ahora consume Wasm), no que se descarte por no soportado.
+        let app = AppEntry {
+            id: "h".into(),
+            label: "Hola WASM".into(),
+            icon: None,
+            category: None,
+            launch: Launch::Wasm {
+                bytecode_hex: "deadbeef".into(),
+                grant_hex: None,
+            },
+            handles: Vec::new(),
+        };
+        // spawn() intenta el proceso (Err NotFound), no devuelve Ok(None).
+        assert!(app.spawn().is_err(), "Wasm debe intentar spawnear el launcher");
+        assert!(matches!(
+            ProcessLauncher.launch(&app),
+            Err(LaunchError::Failed(_))
+        ));
+    }
+
     #[test]
     fn bus_fanout_y_poda() {
         let bus = Bus::new();
diff --git a/shared/foreign-lottie/Cargo.toml b/shared/foreign-lottie/Cargo.toml
new file mode 100644
index 0000000..4bcf175
--- /dev/null
+++ b/shared/foreign-lottie/Cargo.toml
@@ -0,0 +1,28 @@
+[package]
+name = "foreign-lottie"
+version.workspace = true
+edition = "2024"
+rust-version = "1.88"
+license = "Apache-2.0 OR MIT"
+authors.workspace = true
+publish.workspace = true
+description = "foreign-lottie — fork vendorizado de velato 0.9 (reproductor de Lottie de Linebender), completado para no paniquear ante features no soportadas (split rotation/position, blends Add/HardMix, assets desconocidos) y degradar con gracia. Emite a la misma vello::Scene que llimphi-raster. Puente de formato ajeno (Regla 4)."
+
+[lib]
+name = "foreign_lottie"
+path = "src/lib.rs"
+
+[features]
+default = ["vello"]
+vello = ["dep:vello"]
+wgpu = ["vello", "vello/wgpu"]
+
+[dependencies]
+# Tipos geométricos/de pintura — DEBEN coincidir con los que expone vello 0.7
+# (peniko 0.6 / kurbo 0.13), o los Scene/Brush/Color no tipan.
+kurbo = "0.13"
+peniko = "0.6"
+serde = { workspace = true }
+serde_json = { workspace = true }
+serde_repr = "0.1"
+vello = { workspace = true, optional = true }
diff --git a/shared/foreign-lottie/LICENSE-APACHE b/shared/foreign-lottie/LICENSE-APACHE
new file mode 100644
index 0000000..d9a10c0
--- /dev/null
+++ b/shared/foreign-lottie/LICENSE-APACHE
@@ -0,0 +1,176 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
diff --git a/shared/foreign-lottie/LICENSE-MIT b/shared/foreign-lottie/LICENSE-MIT
new file mode 100644
index 0000000..9cf1062
--- /dev/null
+++ b/shared/foreign-lottie/LICENSE-MIT
@@ -0,0 +1,19 @@
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/shared/foreign-lottie/README.md b/shared/foreign-lottie/README.md
new file mode 100644
index 0000000..5adf467
--- /dev/null
+++ b/shared/foreign-lottie/README.md
@@ -0,0 +1,47 @@
+# foreign-lottie
+
+Fork vendorizado de **[velato](https://github.com/linebender/velato) 0.9.0**
+(reproductor de Lottie de Linebender, `Apache-2.0 OR MIT`) — el motor que parsea
+un `.json` de Lottie y lo emite a una `vello::Scene`. Entra al repo como puente
+de formato ajeno (Regla 4 de `CLAUDE.md`: los formatos ajenos viven en
+`shared/foreign-*`, nunca en el núcleo de las apps).
+
+Lo consume `02_ruway/llimphi/llimphi-lottie` (el puente fino a Llimphi).
+
+## Por qué un fork y no la dependencia de crates.io
+
+velato 0.9 es la única versión que clava `vello 0.7` (la del workspace), así que
+arrancó como dependencia directa. Pero su **importador paniquea**
+(`todo!()`/`unimplemented!()`) ante features perfectamente válidas de Lottie —
+y eso corre en el hilo de UI. Forkeamos para que **degrade con gracia** en vez
+de tumbar la app.
+
+## Cambios respecto de velato 0.9.0 upstream
+
+Todos marcados con `// FORK tawasuyu:` en el código. Concentrados en
+`src/import/converters.rs`:
+
+| Caso upstream (panic) | Fork (degradación graciosa) |
+|---|---|
+| transform sin campo de rotación → `todo!("split rotation")` | rotación 0 |
+| `SplitRotation` (rot. x/y/z separadas) → `todo!()` | usa la componente z (la 2D visible) |
+| `SplitPosition` en shape-transform → `todo!("split position")` | arma la posición desde x/y |
+| asset desconocido (imagen embebida…) → `unimplemented!()` | se omite el asset |
+| blend `Add` → `unimplemented!()` | compositing aditivo (`Compose::Plus`) |
+| blend `HardMix` → `unimplemented!()` | `HardLight` (el mix más cercano) |
+
+El camino de render (`runtime/`) quedó intacto — es panic-free. Los `panic!` que
+restan en `src/schema/*` son test-only o del lado serializador (que no usamos);
+`llimphi-lottie` igual envuelve el parse en `catch_unwind` como red secundaria.
+
+## Pendiente (gaps del propio velato, no introducidos por el fork)
+
+velato no implementa todavía, y aquí tampoco (degradan a omisión, no a panic):
+**capas de texto**, **effects** (blur/drop-shadow) y **expresiones**. Declarado
+en `src/schema/mod.rs`. Son lo grande; se completan cuando un `.json` concreto
+los pida.
+
+## Tests
+
+`tests/no_panic_fork.rs` certifica que cada caso que antes paniqueaba ahora
+importa con `Ok`, y que el camino feliz sigue intacto.
diff --git a/shared/foreign-lottie/src/error.rs b/shared/foreign-lottie/src/error.rs
new file mode 100644
index 0000000..45176c8
--- /dev/null
+++ b/shared/foreign-lottie/src/error.rs
@@ -0,0 +1,24 @@
+// Copyright 2023 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+/// Triggered when is an issue parsing a lottie file.
+#[derive(Debug)]
+#[non_exhaustive]
+pub enum Error {
+    Json(serde_json::Error),
+}
+
+impl core::error::Error for Error {}
+impl core::fmt::Display for Error {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            Self::Json(err) => write!(f, "Error parsing lottie: {err}"),
+        }
+    }
+}
+
+impl From<serde_json::Error> for Error {
+    fn from(value: serde_json::Error) -> Self {
+        Self::Json(value)
+    }
+}
diff --git a/shared/foreign-lottie/src/import/builders.rs b/shared/foreign-lottie/src/import/builders.rs
new file mode 100644
index 0000000..5dc2f7c
--- /dev/null
+++ b/shared/foreign-lottie/src/import/builders.rs
@@ -0,0 +1,247 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use super::converters::{conv_blend_mode, conv_scalar, conv_shape_geometry, conv_transform};
+use super::defaults::FLOAT_VALUE_ONE_HUNDRED;
+use crate::runtime::model::Layer;
+use crate::schema::helpers::int_boolean::BoolInt;
+use crate::{runtime, schema};
+use peniko::{self, BlendMode, Compose, Mix};
+
+pub struct LayerSetupParams {
+    pub layer_index: usize,
+    pub matte_mode: Option<BlendMode>,
+    pub matte_layer_index: Option<usize>,
+}
+
+pub fn setup_precomp_layer(
+    source: &schema::layers::precomposition::PrecompositionLayer,
+    target: &mut Layer,
+) -> LayerSetupParams {
+    target.name = source
+        .visual_layer
+        .layer
+        .visual_object
+        .name
+        .clone()
+        .unwrap_or_default();
+    target.parent = source.visual_layer.layer.parent_index;
+    let (transform, opacity) = conv_transform(&source.visual_layer.transform);
+    target.transform = transform;
+    target.opacity = opacity;
+    target.width = source.width;
+    target.height = source.height;
+    target.is_mask = source
+        .visual_layer
+        .matte_target
+        .as_ref()
+        .is_some_and(|td| *td == BoolInt::True);
+
+    let matte_mode = source
+        .visual_layer
+        .matte_mode
+        .as_ref()
+        .map(|mode| match mode {
+            schema::constants::matte_mode::MatteMode::Normal => Mix::Normal.into(),
+            schema::constants::matte_mode::MatteMode::Alpha
+            | schema::constants::matte_mode::MatteMode::Luma => Compose::SrcIn.into(),
+            schema::constants::matte_mode::MatteMode::InvertedAlpha
+            | schema::constants::matte_mode::MatteMode::InvertedLuma => Compose::SrcOut.into(),
+        });
+
+    let matte_layer_index = source
+        .visual_layer
+        .matte_layer_index
+        .map(|idx| idx as usize);
+
+    target.blend_mode = conv_blend_mode(
+        source
+            .visual_layer
+            .blend_mode
+            .as_ref()
+            .unwrap_or(&crate::schema::constants::blend_mode::BlendMode::Normal),
+    );
+    if target.blend_mode == Some(peniko::Mix::Normal.into()) {
+        target.blend_mode = None;
+    }
+    target.stretch = source.visual_layer.layer.time_stretch.unwrap_or(1.0);
+    target.frames = source.visual_layer.layer.in_point..source.visual_layer.layer.out_point;
+    target.start_frame = source.visual_layer.layer.start_time.unwrap_or(0.0);
+
+    for mask_source in source
+        .visual_layer
+        .masks_properties
+        .as_ref()
+        .unwrap_or(&Vec::default())
+    {
+        if let Some(shape) = &mask_source.shape
+            && let Some(geometry) = conv_shape_geometry(shape)
+        {
+            let mode = peniko::BlendMode::default();
+            let opacity = conv_scalar(
+                mask_source
+                    .opacity
+                    .as_ref()
+                    .unwrap_or(&FLOAT_VALUE_ONE_HUNDRED),
+            );
+            target.masks.push(runtime::model::Mask {
+                mode,
+                geometry,
+                opacity,
+            });
+        }
+    }
+
+    LayerSetupParams {
+        layer_index: source.visual_layer.layer.index.unwrap_or(0),
+        matte_mode,
+        matte_layer_index,
+    }
+}
+
+pub fn setup_shape_layer(
+    source: &schema::layers::shape::ShapeLayer,
+    target: &mut Layer,
+) -> LayerSetupParams {
+    target.name = source
+        .visual_layer
+        .layer
+        .visual_object
+        .name
+        .clone()
+        .unwrap_or_default();
+    target.parent = source.visual_layer.layer.parent_index;
+    let (transform, opacity) = conv_transform(&source.visual_layer.transform);
+    target.transform = transform;
+    target.opacity = opacity;
+    target.is_mask = source
+        .visual_layer
+        .matte_target
+        .as_ref()
+        .is_some_and(|td| *td == BoolInt::True);
+
+    let matte_mode = source
+        .visual_layer
+        .matte_mode
+        .as_ref()
+        .map(|mode| match mode {
+            schema::constants::matte_mode::MatteMode::Normal => Mix::Normal.into(),
+            schema::constants::matte_mode::MatteMode::Alpha
+            | schema::constants::matte_mode::MatteMode::Luma => Compose::SrcIn.into(),
+            schema::constants::matte_mode::MatteMode::InvertedAlpha
+            | schema::constants::matte_mode::MatteMode::InvertedLuma => Compose::SrcOut.into(),
+        });
+
+    let matte_layer_index = source
+        .visual_layer
+        .matte_layer_index
+        .map(|idx| idx as usize);
+
+    target.blend_mode = conv_blend_mode(
+        source
+            .visual_layer
+            .blend_mode
+            .as_ref()
+            .unwrap_or(&crate::schema::constants::blend_mode::BlendMode::Normal),
+    );
+    if target.blend_mode == Some(peniko::Mix::Normal.into()) {
+        target.blend_mode = None;
+    }
+    target.stretch = source.visual_layer.layer.time_stretch.unwrap_or(1.0);
+    target.frames = source.visual_layer.layer.in_point..source.visual_layer.layer.out_point;
+    target.start_frame = source.visual_layer.layer.start_time.unwrap_or(0.0);
+
+    for mask_source in source
+        .visual_layer
+        .masks_properties
+        .as_ref()
+        .unwrap_or(&Vec::default())
+    {
+        if let Some(shape) = &mask_source.shape
+            && let Some(geometry) = conv_shape_geometry(shape)
+        {
+            let mode = peniko::BlendMode::default();
+            let opacity = conv_scalar(
+                mask_source
+                    .opacity
+                    .as_ref()
+                    .unwrap_or(&FLOAT_VALUE_ONE_HUNDRED),
+            );
+            target.masks.push(runtime::model::Mask {
+                mode,
+                geometry,
+                opacity,
+            });
+        }
+    }
+
+    LayerSetupParams {
+        layer_index: source.visual_layer.layer.index.unwrap_or(0),
+        matte_mode,
+        matte_layer_index,
+    }
+}
+
+pub fn setup_layer_base(
+    source: &schema::layers::visual::VisualLayer,
+    target: &mut Layer,
+) -> LayerSetupParams {
+    target.name = source.layer.visual_object.name.clone().unwrap_or_default();
+    target.parent = source.layer.parent_index;
+    let (transform, opacity) = conv_transform(&source.transform);
+    target.transform = transform;
+    target.opacity = opacity;
+    target.is_mask = source
+        .matte_target
+        .as_ref()
+        .is_some_and(|td| *td == BoolInt::True);
+
+    let matte_mode = source.matte_mode.as_ref().map(|mode| match mode {
+        schema::constants::matte_mode::MatteMode::Normal => Mix::Normal.into(),
+        schema::constants::matte_mode::MatteMode::Alpha
+        | schema::constants::matte_mode::MatteMode::Luma => Compose::SrcIn.into(),
+        schema::constants::matte_mode::MatteMode::InvertedAlpha
+        | schema::constants::matte_mode::MatteMode::InvertedLuma => Compose::SrcOut.into(),
+    });
+
+    let matte_layer_index = source.matte_layer_index.map(|idx| idx as usize);
+
+    target.blend_mode = conv_blend_mode(
+        source
+            .blend_mode
+            .as_ref()
+            .unwrap_or(&crate::schema::constants::blend_mode::BlendMode::Normal),
+    );
+    // TODO: Why do we do this next part?
+    if target.blend_mode == Some(peniko::Mix::Normal.into()) {
+        target.blend_mode = None;
+    }
+    target.stretch = source.layer.time_stretch.unwrap_or(1.0);
+    target.frames = source.layer.in_point..source.layer.out_point;
+    target.start_frame = source.layer.start_time.unwrap_or(0.0);
+
+    for mask_source in source.masks_properties.as_ref().unwrap_or(&Vec::default()) {
+        if let Some(shape) = &mask_source.shape
+            && let Some(geometry) = conv_shape_geometry(shape)
+        {
+            let mode = peniko::BlendMode::default();
+            let opacity = conv_scalar(
+                mask_source
+                    .opacity
+                    .as_ref()
+                    .unwrap_or(&FLOAT_VALUE_ONE_HUNDRED),
+            );
+            target.masks.push(runtime::model::Mask {
+                mode,
+                geometry,
+                opacity,
+            });
+        }
+    }
+
+    LayerSetupParams {
+        layer_index: source.layer.index.unwrap_or(0),
+        matte_mode,
+        matte_layer_index,
+    }
+}
diff --git a/shared/foreign-lottie/src/import/converters.rs b/shared/foreign-lottie/src/import/converters.rs
new file mode 100644
index 0000000..e5225f5
--- /dev/null
+++ b/shared/foreign-lottie/src/import/converters.rs
@@ -0,0 +1,967 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use super::builders::{setup_layer_base, setup_precomp_layer, setup_shape_layer};
+use super::defaults::{FLOAT_VALUE_ONE_HUNDRED, FLOAT_VALUE_ZERO, MULTIDIM_ONE, POSITION_ZERO};
+use crate::import::builders::LayerSetupParams;
+use crate::runtime::model::Easing;
+use crate::runtime::model::animated::{self, Position};
+use crate::runtime::model::{
+    self, Content, Draw, EasingHandle, GroupTransform, Layer, SplineToPath, Time, Tween, Value,
+};
+use crate::runtime::{self};
+use crate::schema::animated_properties::keyframe_bezier_handle::{
+    KeyframeBezierHandle, KeyframeComponent,
+};
+use crate::schema::animated_properties::multi_dimensional::MultiDimensional;
+use crate::schema::animated_properties::split_vector::SplitVector;
+use crate::schema::constants::gradient_type::GradientType;
+use crate::schema::helpers::int_boolean::BoolInt;
+use crate::{Composition, schema};
+use kurbo::{Cap, Join, Point, Size, Vec2};
+use peniko::{BlendMode, Color, Mix};
+use std::collections::HashMap;
+
+fn process_layers(
+    source_layers: &[schema::layers::AnyLayer],
+    idmap: &mut HashMap<usize, usize>,
+) -> Vec<Layer> {
+    idmap.clear();
+
+    let mut converted: Vec<(Layer, usize, Option<BlendMode>, Option<usize>)> = vec![];
+
+    for layer in source_layers {
+        if let Some((layer, id, matte_mode, matte_layer_index)) = conv_layer(layer) {
+            let index = converted.len();
+            idmap.insert(id, index);
+            converted.push((layer, id, matte_mode, matte_layer_index));
+        }
+    }
+
+    let matte_targets: HashMap<usize, usize> = converted
+        .iter()
+        .enumerate()
+        .filter(|(_, (layer, _, _, _))| layer.is_mask)
+        .map(|(idx, (_, id, _, _))| (*id, idx))
+        .collect();
+
+    let mut layers: Vec<Layer> = Vec::with_capacity(converted.len());
+    let mut prev_matte_layer: Option<usize> = None;
+
+    for (idx, (mut layer, _id, matte_mode, explicit_matte_index)) in
+        converted.into_iter().enumerate()
+    {
+        if let Some(parent) = layer.parent {
+            layer.parent = idmap.get(&parent).copied();
+        }
+
+        if let Some(matte_mode) = matte_mode {
+            let matte_layer_idx = if let Some(explicit_idx) = explicit_matte_index {
+                idmap.get(&explicit_idx).copied()
+            } else {
+                prev_matte_layer
+            };
+
+            if let Some(matte_idx) = matte_layer_idx {
+                layer.mask_layer = Some((matte_mode, matte_idx));
+            }
+        }
+
+        if layer.is_mask {
+            prev_matte_layer = Some(idx);
+        } else if matte_mode.is_some() {
+            prev_matte_layer = None;
+        }
+
+        layers.push(layer);
+    }
+
+    layers
+}
+
+pub fn conv_animation(source: schema::Animation) -> Composition {
+    let mut target = Composition {
+        frames: source.in_point..source.out_point,
+        frame_rate: source.frame_rate,
+        width: source.width,
+        height: source.height,
+        assets: Default::default(),
+        layers: Default::default(),
+    };
+
+    // Collect assets and layers
+    let mut idmap: HashMap<usize, usize> = HashMap::default();
+
+    if let Some(assets) = source.assets {
+        for asset in assets {
+            match asset {
+                schema::assets::AnyAsset::Precomposition(precomp) => {
+                    let layers = process_layers(&precomp.composition.layers, &mut idmap);
+                    target.assets.insert(precomp.asset.id.clone(), layers);
+                }
+                // FORK tawasuyu: un asset no soportado (imagen embebida, etc.)
+                // se omite en vez de tumbar la importación. La animación se
+                // renderiza sin ese asset — degradación con gracia.
+                _asset => {}
+            }
+        }
+    }
+
+    // <<<<<<< HEAD
+    //     idmap.clear();
+    //     let mut layers = vec![];
+    //     let mut mask_layer = None;
+    //     for layer in &source.composition.layers {
+    //         let index = layers.len();
+    //         if let Some((mut layer, id, mask_blend)) = conv_layer(layer) {
+    //             if let (Some(mask_blend), Some(mask_layer)) = (mask_blend, mask_layer.take()) {
+    //                 layer.mask_layer = Some((mask_blend, mask_layer));
+    //             }
+    //             if layer.is_mask {
+    //                 mask_layer = Some(index);
+    //             }
+    //             idmap.insert(id, index);
+    //             layers.push(layer);
+    //         }
+    //     }
+    //     for layer in &mut layers {
+    //         if let Some(parent) = layer.parent {
+    //             layer.parent = idmap.get(&parent).copied();
+    //         }
+    //     }
+    //     target.layers = layers;
+    // =======
+    target.layers = process_layers(&source.composition.layers, &mut idmap);
+    // >>>>>>> main
+
+    target
+}
+
+pub fn conv_layer(
+    source: &schema::layers::AnyLayer,
+) -> Option<(Layer, usize, Option<BlendMode>, Option<usize>)> {
+    let mut layer = Layer::default();
+
+    let params = match source {
+        schema::layers::AnyLayer::Null(null_layer) => {
+            if let Some(true) = null_layer.visual_layer.layer.hidden {
+                return None;
+            }
+
+            setup_layer_base(&null_layer.visual_layer, &mut layer)
+        }
+        schema::layers::AnyLayer::Precomposition(precomp_layer) => {
+            if let Some(true) = precomp_layer.visual_layer.layer.hidden {
+                return None;
+            }
+
+            let params = setup_precomp_layer(precomp_layer, &mut layer);
+            let name = precomp_layer.ref_id.clone();
+            let time_remap = precomp_layer.time_remap.as_ref().map(conv_scalar);
+            layer.content = Content::Instance { name, time_remap };
+
+            params
+        }
+        schema::layers::AnyLayer::Shape(shape_layer) => {
+            if let Some(true) = shape_layer.visual_layer.layer.hidden {
+                return None;
+            }
+
+            let params = setup_shape_layer(shape_layer, &mut layer);
+            let mut shapes = vec![];
+            for shape in &shape_layer.shapes {
+                if let Some(shape) = conv_shape(shape) {
+                    shapes.push(shape);
+                }
+            }
+            layer.content = Content::Shape(shapes);
+
+            params
+        }
+        schema::layers::AnyLayer::Solid(solid_color_layer) => {
+            if let Some(true) = solid_color_layer.visual_layer.layer.hidden {
+                return None;
+            }
+
+            setup_layer_base(&solid_color_layer.visual_layer, &mut layer)
+        }
+        schema::layers::AnyLayer::Image(image_layer) => {
+            if let Some(true) = image_layer.visual_layer.layer.hidden {
+                return None;
+            }
+
+            setup_layer_base(&image_layer.visual_layer, &mut layer)
+        }
+    };
+
+    let LayerSetupParams {
+        layer_index: id,
+        matte_mode,
+        matte_layer_index,
+    } = params;
+
+    Some((layer, id, matte_mode, matte_layer_index))
+}
+
+pub fn conv_transform(
+    value: &schema::helpers::transform::Transform,
+) -> (runtime::model::Transform, Value<f64>) {
+    let rotation_in = match &value.rotation {
+        Some(any_trans) => match any_trans {
+            schema::helpers::transform::AnyTransformR::Rotation(float_value) => float_value,
+            // FORK tawasuyu: en 2D sólo la componente z es la rotación visible
+            // (x/y/orientación son 3D, que vello no compone). En vez de
+            // paniquear usamos z_rotation — equivalente a `r` cuando no está
+            // splitteada (lo dice el propio schema).
+            schema::helpers::transform::AnyTransformR::SplitRotation { z_rotation, .. } => {
+                z_rotation
+            }
+        },
+        // FORK tawasuyu: un transform sin campo de rotación es rotación 0, no un
+        // panic. (Bug original: `None => todo!("split rotation")` tumbaba la UI
+        // ante Lotties válidos sin `r`.)
+        None => &FLOAT_VALUE_ZERO,
+    };
+
+    let position = match &value.position {
+        schema::helpers::transform::AnyTransformP::Position(position) => {
+            Position::Value(conv_pos_point(position))
+        }
+        schema::helpers::transform::AnyTransformP::SplitPosition(SplitVector { x, y, .. }) => {
+            Position::SplitValues((conv_scalar(x), conv_scalar(y)))
+        }
+    };
+
+    let transform = animated::Transform {
+        anchor: conv_pos_point(value.anchor_point.as_ref().unwrap_or(&POSITION_ZERO)),
+        position,
+        scale: conv_vec2(value.scale.as_ref().unwrap_or(&MULTIDIM_ONE)),
+        rotation: conv_scalar(rotation_in),
+        skew: conv_scalar(value.skew.as_ref().unwrap_or(&FLOAT_VALUE_ZERO)),
+        skew_angle: conv_scalar(value.skew_axis.as_ref().unwrap_or(&FLOAT_VALUE_ZERO)),
+    };
+    let opacity = conv_scalar(value.opacity.as_ref().unwrap_or(&FLOAT_VALUE_ONE_HUNDRED));
+    (transform.into_model(), opacity)
+}
+
+pub fn conv_shape_transform(value: &schema::shapes::transform::TransformShape) -> GroupTransform {
+    let rotation_in = match &value.transform.rotation {
+        Some(any_trans) => match any_trans {
+            schema::helpers::transform::AnyTransformR::Rotation(float_value) => float_value,
+            // FORK tawasuyu: igual que conv_transform — z_rotation en vez de panic.
+            schema::helpers::transform::AnyTransformR::SplitRotation { z_rotation, .. } => {
+                z_rotation
+            }
+        },
+        None => &FLOAT_VALUE_ZERO,
+    };
+    // FORK tawasuyu: soportamos posición splitteada (x/y por separado) en lugar
+    // de paniquear, igual que ya lo hace conv_transform.
+    let position = match &value.transform.position {
+        schema::helpers::transform::AnyTransformP::Position(position) => {
+            Position::Value(conv_pos_point(position))
+        }
+        schema::helpers::transform::AnyTransformP::SplitPosition(SplitVector { x, y, .. }) => {
+            Position::SplitValues((conv_scalar(x), conv_scalar(y)))
+        }
+    };
+
+    let transform = animated::Transform {
+        anchor: conv_pos_point(
+            value
+                .transform
+                .anchor_point
+                .as_ref()
+                .unwrap_or(&POSITION_ZERO),
+        ),
+        position,
+        scale: conv_vec2(value.transform.scale.as_ref().unwrap_or(&MULTIDIM_ONE)),
+        rotation: conv_scalar(rotation_in),
+        skew: conv_scalar(value.transform.skew.as_ref().unwrap_or(&FLOAT_VALUE_ZERO)),
+        skew_angle: conv_scalar(
+            value
+                .transform
+                .skew_axis
+                .as_ref()
+                .unwrap_or(&FLOAT_VALUE_ZERO),
+        ),
+    };
+
+    let opacity = conv_scalar(
+        value
+            .transform
+            .opacity
+            .as_ref()
+            .unwrap_or(&FLOAT_VALUE_ONE_HUNDRED),
+    );
+
+    GroupTransform {
+        transform: transform.into_model(),
+        opacity,
+    }
+}
+
+pub fn conv_keyframes<'a, T: Tween>(
+    keyframes: impl Iterator<Item = &'a schema::animated_properties::keyframe::Keyframe>,
+    f: impl Fn(&schema::animated_properties::keyframe::Keyframe) -> T,
+) -> Value<T> {
+    let mut frames = vec![];
+    let mut values = vec![];
+
+    let collect_tangents = |handle: &Option<KeyframeBezierHandle>| {
+        let mut handles = vec![];
+        let Some(handle) = handle else { return handles };
+
+        match (&handle.x_coordinate, &handle.y_coordinate) {
+            (KeyframeComponent::ArrayOfValues(xarr), KeyframeComponent::ArrayOfValues(yarr)) => {
+                handles.extend(
+                    xarr.iter()
+                        .take(2)
+                        .zip(yarr.iter().take(2))
+                        .map(|(x, y)| EasingHandle { x: *x, y: *y }),
+                );
+            }
+            (KeyframeComponent::ArrayOfValues(xarr), KeyframeComponent::SingleValue(y)) => {
+                handles.extend(xarr.iter().take(2).map(|x| EasingHandle { x: *x, y: *y }));
+            }
+            (KeyframeComponent::SingleValue(x), KeyframeComponent::ArrayOfValues(yarr)) => {
+                handles.extend(yarr.iter().take(2).map(|y| EasingHandle { x: *x, y: *y }));
+            }
+            (KeyframeComponent::SingleValue(x), KeyframeComponent::SingleValue(y)) => {
+                handles.push(EasingHandle { x: *x, y: *y });
+            }
+        }
+        handles
+    };
+
+    for keyframe in keyframes {
+        let hold = keyframe
+            .base
+            .hold
+            .as_ref()
+            .map(|b| b.eq(&BoolInt::True))
+            .unwrap_or(false);
+        let in_tangents = collect_tangents(&keyframe.base.in_tangent);
+        let out_tangents = collect_tangents(&keyframe.base.out_tangent);
+        let tangents: Vec<_> = in_tangents.into_iter().zip(out_tangents).collect();
+        if tangents.is_empty() {
+            frames.push(Time {
+                frame: keyframe.base.time,
+                in_tangent: None,
+                out_tangent: None,
+                hold,
+            });
+            values.push(f(keyframe));
+        } else {
+            for (in_tangent, out_tangent) in tangents {
+                frames.push(Time {
+                    frame: keyframe.base.time,
+                    in_tangent: Some(in_tangent),
+                    out_tangent: Some(out_tangent),
+                    hold,
+                });
+                values.push(f(keyframe));
+            }
+        }
+    }
+    Value::Animated(runtime::model::Animated {
+        times: frames,
+        values,
+    })
+}
+
+fn conv_keyframe_handle(handle: &KeyframeBezierHandle) -> EasingHandle {
+    let KeyframeBezierHandle {
+        x_coordinate,
+        y_coordinate,
+    } = handle;
+    let x = match x_coordinate {
+        KeyframeComponent::ArrayOfValues(arr) => {
+            assert!(arr.len() == 1, "{arr:?}");
+            arr[0]
+        }
+        KeyframeComponent::SingleValue(v) => *v,
+    };
+    let y = match y_coordinate {
+        KeyframeComponent::ArrayOfValues(arr) => {
+            assert!(arr.len() == 1);
+            arr[0]
+        }
+        KeyframeComponent::SingleValue(v) => *v,
+    };
+    EasingHandle { x, y }
+}
+
+fn conv_gradient_colors(
+    value: &schema::animated_properties::gradient_colors::GradientColors,
+) -> runtime::model::ColorStops {
+    use schema::animated_properties::animated_property::AnimatedPropertyK::*;
+
+    let count = value.count;
+    match &value.colors.animated_property.value {
+        Static(value) => runtime::model::ColorStops::Fixed({
+            let mut stops = runtime::model::fixed::ColorStops::new();
+            let raw = conv_stops(value, count);
+            for values in raw {
+                stops.push(
+                    (
+                        values[0] as f32,
+                        runtime::model::fixed::Color::new([
+                            values[1] as f32,
+                            values[2] as f32,
+                            values[3] as f32,
+                            values[4] as f32,
+                        ]),
+                    )
+                        .into(),
+                );
+            }
+            stops
+        }),
+        AnimatedValue(animated) => {
+            let mut frames = vec![];
+            let mut values: Vec<Vec<f64>> = vec![];
+            for value in animated {
+                let hold = value
+                    .base
+                    .hold
+                    .as_ref()
+                    .map(|b| b.eq(&BoolInt::True))
+                    .unwrap_or(false);
+                frames.push(Time {
+                    frame: value.base.time,
+                    in_tangent: value.base.in_tangent.as_ref().map(conv_keyframe_handle),
+                    out_tangent: value.base.out_tangent.as_ref().map(conv_keyframe_handle),
+                    hold,
+                });
+
+                let stops = conv_stops(&value.value, count)
+                    .into_iter()
+                    .flatten()
+                    .collect::<Vec<_>>();
+
+                values.push(stops);
+            }
+            runtime::model::ColorStops::Animated(animated::ColorStops {
+                frames,
+                values,
+                count,
+            })
+        }
+    }
+}
+
+fn conv_draw(value: &schema::shapes::AnyShape) -> Option<runtime::model::Draw> {
+    use schema::constants::line_cap::LineCap;
+    use schema::constants::line_join::LineJoin;
+    use schema::shapes::AnyShape;
+
+    match value {
+        AnyShape::Fill(value) => {
+            let color = conv_color(&value.color);
+            let brush = animated::Brush::Solid(color).into_model();
+            let opacity = conv_scalar(&value.shape_style.opacity);
+            Some(runtime::model::Draw {
+                stroke: None,
+                brush,
+                opacity,
+            })
+        }
+        AnyShape::Stroke(value) => {
+            let stroke = animated::Stroke {
+                width: conv_scalar(&value.base_stroke.width),
+                join: match value
+                    .base_stroke
+                    .line_join
+                    .as_ref()
+                    .unwrap_or(&LineJoin::Bevel)
+                {
+                    LineJoin::Bevel => Join::Bevel,
+                    LineJoin::Round => Join::Round,
+                    LineJoin::Miter => Join::Miter,
+                },
+                miter_limit: value.base_stroke.miter_limit,
+                cap: match value
+                    .base_stroke
+                    .line_cap
+                    .as_ref()
+                    .unwrap_or(&LineCap::Butt)
+                {
+                    LineCap::Butt => Cap::Butt,
+                    LineCap::Round => Cap::Round,
+                    LineCap::Square => Cap::Square,
+                },
+            };
+            let color = conv_color(&value.stroke_color);
+            let brush = animated::Brush::Solid(color).into_model();
+            let opacity = conv_scalar(&value.shape_style.opacity);
+            Some(runtime::model::Draw {
+                stroke: Some(stroke.into_model()),
+                brush,
+                opacity,
+            })
+        }
+        AnyShape::GradientFill(value) => {
+            let is_radial = matches!(value.gradient.gradient_type, Some(GradientType::Radial));
+            let start_point = conv_multi_point(&value.gradient.start_point);
+            let end_point = conv_multi_point(&value.gradient.end_point);
+            let gradient = animated::Gradient {
+                is_radial,
+                start_point,
+                end_point,
+                stops: conv_gradient_colors(&value.gradient.colors),
+            };
+            let brush = animated::Brush::Gradient(gradient).into_model();
+            Some(Draw {
+                stroke: None,
+                brush,
+                opacity: Value::Fixed(100.0),
+            })
+        }
+        AnyShape::GradientStroke(value) => {
+            let stroke = animated::Stroke {
+                width: conv_scalar(&value.base_stroke.width),
+                join: match value
+                    .base_stroke
+                    .line_join
+                    .as_ref()
+                    .unwrap_or(&LineJoin::Round)
+                {
+                    LineJoin::Bevel => Join::Bevel,
+                    LineJoin::Round => Join::Round,
+                    LineJoin::Miter => Join::Miter,
+                },
+                miter_limit: value.base_stroke.miter_limit,
+                cap: match value
+                    .base_stroke
+                    .line_cap
+                    .as_ref()
+                    .unwrap_or(&LineCap::Round)
+                {
+                    LineCap::Butt => Cap::Butt,
+                    LineCap::Round => Cap::Round,
+                    LineCap::Square => Cap::Square,
+                },
+            };
+            let is_radial = matches!(
+                value
+                    .gradient
+                    .gradient_type
+                    .as_ref()
+                    .unwrap_or(&GradientType::Linear),
+                GradientType::Radial
+            );
+            let start_point = conv_multi_point(&value.gradient.start_point);
+            let end_point = conv_multi_point(&value.gradient.end_point);
+            let gradient = animated::Gradient {
+                is_radial,
+                start_point,
+                end_point,
+                stops: conv_gradient_colors(&value.gradient.colors),
+            };
+            let brush = animated::Brush::Gradient(gradient).into_model();
+            Some(Draw {
+                stroke: Some(stroke.into_model()),
+                brush,
+                opacity: Value::Fixed(100.0),
+            })
+        }
+        _ => None,
+    }
+}
+
+fn conv_shape(value: &schema::shapes::AnyShape) -> Option<crate::runtime::model::Shape> {
+    match conv_draw(value) {
+        Some(draw) => {
+            return Some(crate::runtime::model::Shape::Draw(draw));
+        }
+        _ => {
+            if let Some(geometry) = conv_geometry(value) {
+                return Some(crate::runtime::model::Shape::Geometry(geometry));
+            }
+        }
+    }
+
+    match value {
+        schema::shapes::AnyShape::Group(value) => {
+            let mut shapes = vec![];
+            let mut group_transform = None;
+            for item in &value.shapes {
+                match item {
+                    schema::shapes::AnyShape::Transform(transform) => {
+                        group_transform = Some(conv_shape_transform(transform));
+                    }
+                    _ => {
+                        if let Some(shape) = conv_shape(item) {
+                            shapes.push(shape);
+                        }
+                    }
+                }
+            }
+            if !shapes.is_empty() {
+                Some(crate::runtime::model::Shape::Group(shapes, group_transform))
+            } else {
+                None
+            }
+        }
+        // todo: implement repeater shape
+        // shapes::Shape::Repeater(value) => {
+        //     let repeater = animated::Repeater {
+        //         copies: conv_scalar(&value.copies),
+        //         offset: conv_scalar(&value.offset),
+        //         anchor_point: conv_point(&value.transform.anchor_point),
+        //         position: conv_point(&value.transform.position),
+        //         rotation: conv_scalar(&value.transform.rotation),
+        //         scale: conv_vec2(&value.transform.scale),
+        //         start_opacity: conv_scalar(&value.transform.start_opacity),
+        //         end_opacity: conv_scalar(&value.transform.end_opacity),
+        //     };
+        //     Some(Shape::Repeater(repeater.to_model()))
+        // }
+        schema::shapes::AnyShape::Trim(value) => {
+            let trim = animated::Trim {
+                start: conv_scalar(&value.start),
+                end: conv_scalar(&value.end),
+                offset: conv_scalar(&value.offset),
+            };
+            Some(crate::runtime::model::Shape::Trim(trim.into_model()))
+        }
+        _ => None,
+    }
+}
+
+fn conv_geometry(value: &schema::shapes::AnyShape) -> Option<crate::runtime::model::Geometry> {
+    use schema::shapes::AnyShape;
+    match value {
+        AnyShape::Ellipse(value) => {
+            let ellipse = animated::Ellipse {
+                is_ccw: false, /* todo: lottie schema does not have a field
+                                * for this (anymore?) */
+                position: conv_pos_point(&value.position),
+                size: conv_size(&value.size),
+            };
+            Some(crate::runtime::model::Geometry::Ellipse(ellipse))
+        }
+        AnyShape::Rectangle(value) => {
+            let rect = animated::Rect {
+                is_ccw: false, /* todo: lottie schema does not have a field
+                                * for this (anymore?) */
+                position: conv_pos_point(&value.position),
+                size: conv_size(&value.size),
+                corner_radius: conv_scalar(&value.rounded_corner_radius),
+            };
+            Some(crate::runtime::model::Geometry::Rect(rect))
+        }
+        AnyShape::Path(value) => conv_shape_geometry(&value.shape_property),
+        // todo: generic shape
+        _ => None,
+    }
+}
+
+pub fn conv_shape_geometry(
+    value: &schema::animated_properties::shape_property::ShapeProperty,
+) -> Option<runtime::model::Geometry> {
+    use schema::animated_properties::shape_property::ShapePropertyK::*;
+    let mut is_closed = false;
+    match &value.value {
+        Static(value) => {
+            let (points, is_closed) = conv_spline(value);
+            let mut path = vec![];
+            points.as_slice().to_path(is_closed, &mut path);
+            Some(runtime::model::Geometry::Fixed(path))
+        }
+        Animated(animated) => {
+            // Build frames & values for the animated spline
+            let mut frames = vec![];
+            let mut values = vec![];
+
+            for (idx, value) in animated.iter().enumerate() {
+                // Extract hold from base key properties
+                let hold = value
+                    .base
+                    .hold
+                    .as_ref()
+                    .map(|b| b.eq(&BoolInt::True))
+                    .unwrap_or(false);
+                // Add frame time and easing
+                frames.push(Time {
+                    frame: value.base.time,
+                    in_tangent: value.base.in_tangent.as_ref().map(conv_keyframe_handle),
+                    out_tangent: value.base.out_tangent.as_ref().map(conv_keyframe_handle),
+                    hold,
+                });
+                // Get converted spline points for keyframe bezier at the start
+                let start_bezier = {
+                    if let Some(start) = &value.start {
+                        start.first()?.clone()
+                    } else {
+                        // No keyframe was present - we look for the previous end/start
+                        let prev = animated.get(idx - 1)?;
+                        // Take the previous end if present, otherwise the previous start.
+                        if let Some(prev_end) = prev.end.as_ref() {
+                            if let Some(prev_end_bezier) = prev_end.first() {
+                                prev_end_bezier.clone()
+                            } else {
+                                prev.start.as_ref()?.first()?.clone()
+                            }
+                        } else {
+                            prev.start.as_ref()?.first()?.clone()
+                        }
+                    }
+                };
+                let (points, is_frame_closed) = conv_spline(&start_bezier);
+                // Get converted spline points for keyframe bezier at the end
+                let end_points = value.end.as_ref().and_then(|end_beziers| {
+                    let end_bezier = end_beziers.first()?;
+                    let (end_points, is_end_frame_closed) = conv_spline(end_bezier);
+                    is_closed |= is_end_frame_closed;
+                    Some(end_points)
+                });
+                // Add the keyframe values
+                values.push(animated::SplineKeyframeValues {
+                    start: points,
+                    end: end_points,
+                });
+                is_closed |= is_frame_closed;
+            }
+            Some(runtime::model::Geometry::Spline(animated::Spline {
+                is_closed,
+                times: frames,
+                values,
+            }))
+        }
+    }
+}
+
+pub fn conv_spline(value: &schema::helpers::bezier::Bezier) -> (Vec<Point>, bool) {
+    use core::iter::repeat;
+    let mut points = Vec::with_capacity(value.vertices.len() * 3);
+    let is_closed = value.closed.unwrap_or(false);
+
+    for ((v, i), o) in value
+        .vertices
+        .iter()
+        .zip(value.in_tangents.iter().chain(repeat(&[0.0, 0.0])))
+        .zip(value.out_tangents.iter().chain(repeat(&[0.0, 0.0])))
+    {
+        points.push((v[0], v[1]).into());
+        points.push((i[0], i[1]).into());
+        points.push((o[0], o[1]).into());
+    }
+    (points, is_closed)
+}
+
+pub fn conv_blend_mode(
+    value: &crate::schema::constants::blend_mode::BlendMode,
+) -> Option<BlendMode> {
+    use crate::schema::constants::blend_mode::BlendMode::*;
+
+    Some(match value {
+        Normal => return None,
+        Multiply => BlendMode::from(Mix::Multiply),
+        Screen => BlendMode::from(Mix::Screen),
+        Overlay => BlendMode::from(Mix::Overlay),
+        Darken => BlendMode::from(Mix::Darken),
+        Lighten => BlendMode::from(Mix::Lighten),
+        ColorDodge => BlendMode::from(Mix::ColorDodge),
+        ColorBurn => BlendMode::from(Mix::ColorBurn),
+        HardLight => BlendMode::from(Mix::HardLight),
+        SoftLight => BlendMode::from(Mix::SoftLight),
+        Difference => BlendMode::from(Mix::Difference),
+        Exclusion => BlendMode::from(Mix::Exclusion),
+        Hue => BlendMode::from(Mix::Hue),
+        Saturation => BlendMode::from(Mix::Saturation),
+        Color => BlendMode::from(Mix::Color),
+        Luminosity => BlendMode::from(Mix::Luminosity),
+        // FORK tawasuyu: peniko::Mix no tiene Add ni HardMix. En vez de
+        // paniquear, aproximamos: Add → compositing aditivo real (Compose::Plus);
+        // HardMix → HardLight (el mix disponible más cercano). Degradación con
+        // gracia para Lotties que los usen.
+        Add => BlendMode::new(Mix::Normal, peniko::Compose::Plus),
+        HardMix => BlendMode::from(Mix::HardLight),
+    })
+}
+
+pub fn conv_scalar(float_value: &schema::animated_properties::value::FloatValue) -> Value<f64> {
+    use crate::schema::animated_properties::animated_property::AnimatedPropertyK::*;
+    match &float_value.animated_property.value {
+        Static(number) => Value::Fixed(*number),
+        AnimatedValue(keyframes) => {
+            let mut frames = vec![];
+            let mut values = vec![];
+            for keyframe in keyframes {
+                let start_time = keyframe.base.time;
+                let data = keyframe.value[0];
+                let hold = keyframe
+                    .base
+                    .hold
+                    .as_ref()
+                    .map(|b| b.eq(&BoolInt::True))
+                    .unwrap_or(false);
+                frames.push(crate::runtime::model::Time {
+                    frame: start_time,
+                    in_tangent: keyframe.base.in_tangent.as_ref().map(conv_keyframe_handle),
+                    out_tangent: keyframe.base.out_tangent.as_ref().map(conv_keyframe_handle),
+                    hold,
+                });
+                values.push(data);
+                // todo: end_value deprecated but should we still push it if it
+                // exists?
+            }
+            Value::Animated(model::Animated {
+                times: frames,
+                values,
+            })
+        }
+    }
+}
+
+pub fn conv_multi<T: Tween>(
+    multidimensional: &schema::animated_properties::multi_dimensional::MultiDimensional,
+    f: impl Fn(&Vec<f64>) -> T,
+) -> Value<T> {
+    use crate::schema::animated_properties::animated_property::AnimatedPropertyK::*;
+
+    match &multidimensional.animated_property.value {
+        Static(components) => Value::Fixed(f(components)),
+        AnimatedValue(keyframes) => conv_keyframes(keyframes.iter(), |k| f(&k.value)),
+    }
+}
+
+pub fn conv_multi_color<T: Tween>(
+    color: &schema::animated_properties::color_value::ColorValue,
+    f: impl Fn(&Vec<f64>) -> T,
+) -> Value<T> {
+    use crate::schema::animated_properties::animated_property::AnimatedPropertyK::*;
+
+    match &color.animated_property.value {
+        Static(components) => Value::Fixed(f(components)),
+        AnimatedValue(keyframes) => conv_keyframes(keyframes.iter(), |k| f(&k.value)),
+    }
+}
+
+pub fn conv_pos<T: Tween>(
+    position: &schema::animated_properties::position::Position,
+    f: impl Fn(&Vec<f64>) -> T,
+) -> Value<T> {
+    use crate::schema::animated_properties::position::PositionValueK::*;
+
+    match &position.value {
+        Static(components) => Value::Fixed(f(components)),
+        Animated(pos_keyframes) => {
+            // TODO: Are we using PositionKeyframes here how we're supposed to?
+            // there are in_tangents and out_tangents in addition to the keyframes.
+            conv_keyframes(pos_keyframes.iter().map(|pk| &pk.keyframe), |k| f(&k.value))
+        }
+    }
+}
+
+pub fn conv_pos_point(value: &schema::animated_properties::position::Position) -> Value<Point> {
+    conv_pos(value, |x| {
+        let (x0, x1) = match x.get(0..=1) {
+            Some([x0, x1]) => (*x0, *x1),
+            _ => (0.0, 0.0),
+        };
+        Point::new(x0, x1)
+    })
+}
+
+pub fn conv_multi_point(
+    value: &schema::animated_properties::multi_dimensional::MultiDimensional,
+) -> Value<Point> {
+    conv_multi(value, |x| {
+        let (x0, x1) = match x.get(0..=1) {
+            Some([x0, x1]) => (*x0, *x1),
+            _ => (0.0, 0.0),
+        };
+        Point::new(x0, x1)
+    })
+}
+
+pub fn conv_color(value: &schema::animated_properties::color_value::ColorValue) -> Value<Color> {
+    conv_multi_color(value, |x| {
+        let (x0, x1, x2) = match x.get(0..=2) {
+            Some([x0, x1, x2]) => (*x0, *x1, *x2),
+            _ => (0.0, 0.0, 0.0),
+        };
+        Color::new([x0 as f32, x1 as f32, x2 as f32, 1.0])
+    })
+}
+
+pub fn conv_vec2(value: &MultiDimensional) -> Value<Vec2> {
+    conv_multi(value, |x| {
+        let (x0, x1) = match x.get(0..=1) {
+            Some([x0, x1]) => (*x0, *x1),
+            _ => (0.0, 0.0),
+        };
+        Vec2::new(x0, x1)
+    })
+}
+
+pub fn conv_size(value: &MultiDimensional) -> Value<Size> {
+    conv_multi(value, |x| {
+        let (x0, x1) = match x.get(0..=1) {
+            Some([x0, x1]) => (*x0, *x1),
+            _ => (0.0, 0.0),
+        };
+        Size::new(x0, x1)
+    })
+}
+
+pub fn conv_stops(value: &[f64], count: usize) -> Vec<[f64; 5]> {
+    let mut stops: Vec<[f64; 5]> = Vec::new();
+    let mut alpha_stops: Vec<(f64, f64)> = Vec::new();
+    for chunk in value.chunks_exact(4) {
+        stops.push([chunk[0], chunk[1], chunk[2], chunk[3], 1.0]);
+        if stops.len() >= count {
+            // there is alpha data at the end of the list, which is a sequence
+            // of (offset, alpha) pairs
+            for chunk in value.chunks_exact(2).skip(count * 2) {
+                let offset = chunk[0];
+                let alpha = chunk[1];
+                alpha_stops.push((offset, alpha));
+            }
+
+            for stop in stops.iter_mut() {
+                let mut last: Option<(f64, f64)> = None;
+                for &(b, alpha_b) in alpha_stops.iter() {
+                    if let Some((a, alpha_a)) = last.take() {
+                        let x = stop[0];
+                        let t = normalize_to_range(a, b, x);
+
+                        let alpha_interp = alpha_a.tween(&alpha_b, t, &Easing::LERP);
+                        let alpha_interp = if (x >= a && x <= b) && (t <= 0.25) && (x <= 0.1) {
+                            alpha_a
+                        } else {
+                            alpha_interp
+                        }; // todo: this is a hack to get alpha rendering with a
+                        // falloff similar to lottiefiles'
+
+                        let alpha_interp = if (x >= a && x <= b) && (t >= 0.75) && (x >= 0.9) {
+                            alpha_b
+                        } else {
+                            alpha_interp
+                        }; // todo: this is a hack to get alpha rendering with a
+                        // falloff similar to lottiefiles'
+
+                        stop[4] = stop[4].min(alpha_interp);
+                    }
+                    last = Some((b, alpha_b));
+                }
+            }
+            break;
+        }
+    }
+
+    stops
+}
+
+pub fn normalize_to_range(a: f64, b: f64, x: f64) -> f64 {
+    if a == b {
+        // Avoid division by zero if a and b are the same
+        return 0.0;
+    }
+
+    // Calculate the normalized value
+    (x - a) / (b - a)
+}
diff --git a/shared/foreign-lottie/src/import/defaults.rs b/shared/foreign-lottie/src/import/defaults.rs
new file mode 100644
index 0000000..53ee1c5
--- /dev/null
+++ b/shared/foreign-lottie/src/import/defaults.rs
@@ -0,0 +1,49 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use crate::schema::animated_properties::animated_property::{AnimatedProperty, AnimatedPropertyK};
+use crate::schema::animated_properties::multi_dimensional::MultiDimensional;
+use crate::schema::animated_properties::position::Position;
+use crate::schema::animated_properties::value::FloatValue;
+use crate::schema::helpers::int_boolean::BoolInt;
+use crate::schema::{self};
+use std::sync::LazyLock;
+
+pub static FLOAT_VALUE_ZERO: LazyLock<FloatValue> = LazyLock::new(|| FloatValue {
+    animated_property: AnimatedProperty {
+        property_index: None,
+        animated: Some(BoolInt::False),
+        expression: None,
+        slot_id: None,
+        value: AnimatedPropertyK::Static(0.0),
+    },
+});
+
+pub static FLOAT_VALUE_ONE_HUNDRED: LazyLock<FloatValue> = LazyLock::new(|| FloatValue {
+    animated_property: AnimatedProperty {
+        property_index: None,
+        animated: Some(BoolInt::False),
+        expression: None,
+        slot_id: None,
+        value: AnimatedPropertyK::Static(100.0),
+    },
+});
+
+pub static MULTIDIM_ONE: LazyLock<MultiDimensional> = LazyLock::new(|| MultiDimensional {
+    animated_property: AnimatedProperty {
+        property_index: None,
+        animated: Some(BoolInt::False),
+        expression: None,
+        slot_id: None,
+        value: AnimatedPropertyK::Static(vec![1.0, 1.0, 1.0]),
+    },
+    length: None,
+});
+
+pub static POSITION_ZERO: LazyLock<Position> = LazyLock::new(|| Position {
+    property_index: None,
+    animated: Some(BoolInt::False),
+    expression: None,
+    length: None,
+    value: schema::animated_properties::position::PositionValueK::Static(vec![0.0, 0.0]),
+});
diff --git a/shared/foreign-lottie/src/import/mod.rs b/shared/foreign-lottie/src/import/mod.rs
new file mode 100644
index 0000000..abe5f6b
--- /dev/null
+++ b/shared/foreign-lottie/src/import/mod.rs
@@ -0,0 +1,8 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+mod builders;
+mod converters;
+mod defaults;
+
+pub use converters::conv_animation;
diff --git a/shared/foreign-lottie/src/lib.rs b/shared/foreign-lottie/src/lib.rs
new file mode 100644
index 0000000..e1328b9
--- /dev/null
+++ b/shared/foreign-lottie/src/lib.rs
@@ -0,0 +1,97 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+//! Render a Lottie animation to a Vello [`Scene`](crate::vello::Scene).
+//!
+//! This currently lacks support for a [number of important](crate#unsupported-features) SVG features.
+//!
+//! This is also intended to be the preferred integration between Vello and [usvg](https://crates.io/crates/usvg),
+//! so [consider contributing](https://github.com/linebender/vello_svg) if you need a feature which is missing.
+//!
+//! This crate also re-exports [`vello`], so you can easily use the specific version that is compatible with Velato.
+//!
+//! ## Usage
+//!
+//! ```no_run
+//! # use std::str::FromStr;
+//! use velato::vello;
+//!
+//! // Parse your lottie file
+//! let lottie = include_str!("../examples/assets/google_fonts/Tiger.json");
+//! let composition = velato::Composition::from_str(lottie).expect("valid file");
+//!
+//! // Render to a scene
+//! let mut new_scene = vello::Scene::new();
+//!
+//! // Render to a scene!
+//! let mut renderer = velato::Renderer::new();
+//! let frame = 0.0; // Arbitrary number chosen. Ensure it's a valid frame!
+//! let transform = vello::kurbo::Affine::IDENTITY;
+//! let alpha = 1.0;
+//! let scene = renderer.render_to_vello_scene(&composition, frame, transform, alpha);
+//! ```
+//!
+//! # Unsupported features
+//!
+//! Missing features include:
+//! - Position keyframe (`ti`, `to`) easing
+//! - Time remapping (`tm`)
+//! - Text
+//! - Image embedding
+//! - Advanced shapes (stroke dash, zig-zag, etc.)
+//! - Advanced effects (motion blur, drop shadows, etc.)
+//! - Correct color stop handling
+//! - Split rotations
+//! - Split positions
+
+// LINEBENDER LINT SET - lib.rs - v4
+// See https://linebender.org/wiki/canonical-lints/
+// These lints shouldn't apply to examples or tests.
+#![cfg_attr(not(test), warn(unused_crate_dependencies))]
+// These lints shouldn't apply to examples.
+#![warn(clippy::print_stdout, clippy::print_stderr)]
+// Targeting e.g. 32-bit means structs containing usize can give false positives for 64-bit.
+#![cfg_attr(target_pointer_width = "64", warn(clippy::trivially_copy_pass_by_ref))]
+// END LINEBENDER LINT SET
+#![cfg_attr(docsrs, feature(doc_cfg))]
+// The following lints are part of the Linebender standard set,
+// but resolving them has been deferred for now.
+// Feel free to send a PR that solves one or more of these.
+#![allow(unused, reason = "Many lottie types we don't yet support.")]
+#![allow(
+    unreachable_pub,
+    missing_docs,
+    elided_lifetimes_in_paths,
+    single_use_lifetimes,
+    unused_qualifications,
+    clippy::empty_docs,
+    clippy::use_self,
+    clippy::return_self_not_must_use,
+    clippy::cast_possible_truncation,
+    clippy::shadow_unrelated,
+    clippy::missing_assert_message,
+    clippy::missing_errors_doc,
+    clippy::exhaustive_enums,
+    clippy::todo,
+    reason = "Deferred"
+)]
+#![cfg_attr(
+    test,
+    allow(
+        unused_crate_dependencies,
+        reason = "Some dev dependencies are only used in tests"
+    )
+)]
+
+pub(crate) mod import;
+pub(crate) mod runtime;
+pub mod schema;
+
+mod error;
+pub use error::Error;
+
+// Re-export vello
+#[cfg(feature = "vello")]
+pub use vello;
+
+pub use runtime::{Composition, RenderSink, Renderer, model};
diff --git a/shared/foreign-lottie/src/runtime/mod.rs b/shared/foreign-lottie/src/runtime/mod.rs
new file mode 100644
index 0000000..196ea7a
--- /dev/null
+++ b/shared/foreign-lottie/src/runtime/mod.rs
@@ -0,0 +1,60 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+mod render;
+
+use crate::Error;
+use crate::import;
+use crate::schema::Animation;
+use std::collections::HashMap;
+use std::ops::Range;
+
+#[cfg(feature = "vello")]
+mod vello;
+
+pub mod model;
+
+pub use render::{RenderSink, Renderer};
+
+/// Model of a Lottie file.
+#[derive(Clone, Default, Debug)]
+pub struct Composition {
+    /// Frames in which the animation is active.
+    pub frames: Range<f64>,
+    /// Frames per second.
+    pub frame_rate: f64,
+    /// Width of the animation.
+    pub width: usize,
+    /// Height of the animation.
+    pub height: usize,
+    /// Precomposed layers that may be instanced.
+    pub assets: HashMap<String, Vec<model::Layer>>,
+    /// Collection of layers.
+    pub layers: Vec<model::Layer>,
+}
+
+impl Composition {
+    /// Creates a new runtime composition from a buffer of Lottie file contents.
+    pub fn from_slice(source: impl AsRef<[u8]>) -> Result<Composition, Error> {
+        let source = Animation::from_slice(source.as_ref())?;
+        let composition = import::conv_animation(source);
+        Ok(composition)
+    }
+
+    /// Creates a new runtime composition from a json object of Lottie file contents.
+    pub fn from_json(v: serde_json::Value) -> Result<Composition, Error> {
+        let source = Animation::from_json(v)?;
+        let composition = import::conv_animation(source);
+        Ok(composition)
+    }
+}
+
+impl std::str::FromStr for Composition {
+    type Err = Error;
+
+    fn from_str(s: &str) -> Result<Self, Self::Err> {
+        let source = Animation::from_str(s)?;
+        let composition = import::conv_animation(source);
+        Ok(composition)
+    }
+}
diff --git a/shared/foreign-lottie/src/runtime/model/animated.rs b/shared/foreign-lottie/src/runtime/model/animated.rs
new file mode 100644
index 0000000..d900733
--- /dev/null
+++ b/shared/foreign-lottie/src/runtime/model/animated.rs
@@ -0,0 +1,474 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+/*!
+Representations of animated values.
+*/
+
+use super::*;
+
+use kurbo::PathEl;
+
+#[derive(Clone, Debug)]
+pub enum Position {
+    Value(Value<Point>),
+    SplitValues((Value<f64>, Value<f64>)),
+}
+
+/// Animated affine transformation.
+#[derive(Clone, Debug)]
+pub struct Transform {
+    /// Anchor point.
+    pub anchor: Value<Point>,
+    /// Translation.
+    pub position: Position,
+    /// Rotation angle.
+    pub rotation: Value<f64>,
+    /// Scale factor.
+    pub scale: Value<Vec2>,
+    /// Skew factor.
+    pub skew: Value<f64>,
+    /// Skew angle, 0 skews along the x axis, 90 along the y axis.
+    pub skew_angle: Value<f64>,
+}
+
+impl Transform {
+    /// Returns true if the transform is fixed.
+    pub fn is_fixed(&self) -> bool {
+        self.anchor.is_fixed()
+            && match &self.position {
+                Position::Value(value) => value.is_fixed(),
+                Position::SplitValues((x_value, y_value)) => {
+                    x_value.is_fixed() && y_value.is_fixed()
+                }
+            }
+            && self.rotation.is_fixed()
+            && self.scale.is_fixed()
+            && self.skew.is_fixed()
+            && self.skew_angle.is_fixed()
+    }
+
+    /// Evaluates the transform at the specified frame.
+    pub fn evaluate(&self, frame: f64) -> Affine {
+        let anchor = self.anchor.evaluate(frame);
+        let position = match &self.position {
+            Position::Value(value) => value.evaluate(frame),
+            Position::SplitValues((x_value, y_value)) => kurbo::Point {
+                x: x_value.evaluate(frame),
+                y: y_value.evaluate(frame),
+            },
+        };
+        let rotation = self.rotation.evaluate(frame);
+        let scale = self.scale.evaluate(frame);
+        let skew = self.skew.evaluate(frame);
+        let skew_angle = self.skew_angle.evaluate(frame);
+        let skew_matrix = if skew != 0.0 {
+            let skew = skew.to_radians();
+            let angle = skew_angle.to_radians();
+            Affine::rotate(-angle) * Affine::skew(skew.tan(), 0.0) * Affine::rotate(angle)
+        } else {
+            Affine::IDENTITY
+        };
+        Affine::translate((position.x, position.y))
+            * Affine::rotate(rotation.to_radians())
+            * skew_matrix
+            * Affine::scale_non_uniform(scale.x / 100.0, scale.y / 100.0)
+            * Affine::translate((-anchor.x, -anchor.y))
+    }
+
+    /// Converts the animated value to its model representation.
+    pub fn into_model(self) -> super::Transform {
+        if self.is_fixed() {
+            super::Transform::Fixed(self.evaluate(0.0))
+        } else {
+            super::Transform::Animated(self)
+        }
+    }
+}
+
+/// Animated ellipse.
+#[derive(Clone, Debug)]
+pub struct Ellipse {
+    /// True if the ellipse should be drawn in CCW order.
+    pub is_ccw: bool,
+    /// Position of the ellipse.
+    pub position: Value<Point>,
+    /// Size of the ellipse.
+    pub size: Value<Size>,
+}
+
+impl Ellipse {
+    pub fn is_fixed(&self) -> bool {
+        self.position.is_fixed() && self.size.is_fixed()
+    }
+
+    pub fn evaluate(&self, frame: f64) -> kurbo::Ellipse {
+        let position = self.position.evaluate(frame);
+        let size = self.size.evaluate(frame);
+        let radii = (size.width * 0.5, size.height * 0.5);
+        kurbo::Ellipse::new(position, radii, 0.0)
+    }
+}
+
+/// Animated rounded rectangle.
+#[derive(Clone, Debug)]
+pub struct Rect {
+    /// True if the rect should be drawn in CCW order.
+    pub is_ccw: bool,
+    /// Position of the rectangle.
+    pub position: Value<Point>,
+    /// Size of the rectangle.
+    pub size: Value<Size>,
+    /// Radius of the rectangle corners.
+    pub corner_radius: Value<f64>,
+}
+
+impl Rect {
+    /// Returns true if the rectangle is fixed.
+    pub fn is_fixed(&self) -> bool {
+        self.position.is_fixed() && self.size.is_fixed() && self.corner_radius.is_fixed()
+    }
+
+    /// Evaluates the rectangle at the specified frame.
+    pub fn evaluate(&self, frame: f64) -> kurbo::RoundedRect {
+        let position = self.position.evaluate(frame);
+        let size = self.size.evaluate(frame);
+        let position = Point::new(
+            position.x - size.width * 0.5,
+            position.y - size.height * 0.5,
+        );
+        let radius = self.corner_radius.evaluate(frame);
+        kurbo::RoundedRect::new(
+            position.x,
+            position.y,
+            position.x + size.width,
+            position.y + size.height,
+            radius,
+        )
+    }
+}
+
+/// Animated star or polygon.
+#[derive(Clone, Debug)]
+pub struct Star {
+    pub is_polygon: bool,
+    pub direction: f64,
+    pub position: Value<Point>,
+    pub inner_radius: Value<f64>,
+    pub inner_roundness: Value<f64>,
+    pub outer_radius: Value<f64>,
+    pub outer_roundness: Value<f64>,
+    pub rotation: Value<f64>,
+    pub points: Value<f64>,
+}
+
+// TODO: Use this.
+//impl Star {
+//    pub fn is_fixed(&self) -> bool {
+//        self.position.is_fixed()
+//            && self.inner_radius.is_fixed()
+//            && self.inner_roundness.is_fixed()
+//            && self.outer_radius.is_fixed()
+//            && self.outer_roundness.is_fixed()
+//            && self.rotation.is_fixed()
+//            && self.points.is_fixed()
+//    }
+//}
+
+/// Animated cubic spline.
+#[derive(Clone, Debug)]
+pub struct Spline {
+    /// True if the spline is closed.
+    pub is_closed: bool,
+    /// Collection of times.
+    pub times: Vec<Time>,
+    /// Collection of splines for each time. The splines at each point must have a start, but may also have an
+    /// end defined. When the end is not defined, then the next keyframe's start is used.
+    pub values: Vec<SplineKeyframeValues>,
+}
+
+/// The values of an animated Spline at a single keyframe. When end is None, the next frame's start is used.
+#[derive(Clone, Debug)]
+pub struct SplineKeyframeValues {
+    pub start: Vec<Point>,
+    pub end: Option<Vec<Point>>,
+}
+
+impl Spline {
+    /// Evaluates the spline at the given frame and emits the elements
+    /// to the specified path.
+    pub fn evaluate(&self, frame: f64, path: &mut Vec<PathEl>) -> bool {
+        let Some(([ix0, ix1], t, _easing, hold)) = Time::frames_and_weight(&self.times, frame)
+        else {
+            return false;
+        };
+        let t = if hold { 0.0 } else { t };
+        let (Some(from), Some(to)) = (self.values.get(ix0), self.values.get(ix1)) else {
+            return false;
+        };
+        let to_slice = {
+            if let Some(end) = &from.end {
+                end.as_slice()
+            } else {
+                to.start.as_slice()
+            }
+        };
+        (from.start.as_slice(), to_slice, t).to_path(self.is_closed, path);
+        true
+    }
+}
+
+/// Animated repeater effect.
+#[derive(Clone, Debug)]
+pub struct Repeater {
+    /// Number of times elements should be repeated.
+    pub copies: Value<f64>,
+    /// Offset applied to each element.
+    pub offset: Value<f64>,
+    /// Anchor point.
+    pub anchor_point: Value<Point>,
+    /// Translation.
+    pub position: Value<Point>,
+    /// Rotation in degrees.
+    pub rotation: Value<f64>,
+    /// Scale.
+    pub scale: Value<Vec2>,
+    /// Opacity of the first element.
+    pub start_opacity: Value<f64>,
+    /// Opacity of the last element.
+    pub end_opacity: Value<f64>,
+}
+
+impl Repeater {
+    /// Returns true if the repeater contains no animated properties.
+    pub fn is_fixed(&self) -> bool {
+        self.copies.is_fixed()
+            && self.offset.is_fixed()
+            && self.anchor_point.is_fixed()
+            && self.position.is_fixed()
+            && self.rotation.is_fixed()
+            && self.scale.is_fixed()
+            && self.start_opacity.is_fixed()
+            && self.end_opacity.is_fixed()
+    }
+
+    /// Evaluates the repeater at the specified frame.
+    pub fn evaluate(&self, frame: f64) -> fixed::Repeater {
+        let copies = self.copies.evaluate(frame).round() as usize;
+        let offset = self.offset.evaluate(frame);
+        let anchor_point = self.anchor_point.evaluate(frame);
+        let position = self.position.evaluate(frame);
+        let rotation = self.rotation.evaluate(frame);
+        let scale = self.scale.evaluate(frame);
+        let start_opacity = self.start_opacity.evaluate(frame);
+        let end_opacity = self.end_opacity.evaluate(frame);
+        fixed::Repeater {
+            copies,
+            offset,
+            anchor_point,
+            position,
+            rotation,
+            scale,
+            start_opacity,
+            end_opacity,
+        }
+    }
+
+    /// Converts the animated value to its model representation.
+    pub fn into_model(self) -> super::Repeater {
+        if self.is_fixed() {
+            super::Repeater::Fixed(self.evaluate(0.0))
+        } else {
+            super::Repeater::Animated(self)
+        }
+    }
+}
+
+/// Animated stroke properties.
+#[derive(Clone, Debug)]
+pub struct Stroke {
+    /// Width of the stroke.
+    pub width: Value<f64>,
+    /// Join style.
+    pub join: kurbo::Join,
+    /// Limit for miter joins.
+    pub miter_limit: Option<f64>,
+    /// Cap style.
+    pub cap: kurbo::Cap,
+}
+
+impl Stroke {
+    /// Returns true if the stroke is fixed.
+    pub fn is_fixed(&self) -> bool {
+        self.width.is_fixed()
+    }
+
+    /// Evaluates the stroke at the specified frame.
+    pub fn evaluate(&self, frame: f64) -> kurbo::Stroke {
+        let width = self.width.evaluate(frame);
+        let mut stroke = kurbo::Stroke::new(width)
+            .with_caps(self.cap)
+            .with_join(self.join);
+        if let Some(miter_limit) = self.miter_limit {
+            stroke.miter_limit = miter_limit;
+        }
+        stroke
+    }
+
+    /// Converts the animated value to its model representation.
+    pub fn into_model(self) -> super::Stroke {
+        if self.is_fixed() {
+            super::Stroke::Fixed(self.evaluate(0.0))
+        } else {
+            super::Stroke::Animated(self)
+        }
+    }
+}
+
+/// Animated linear or radial gradient.
+#[derive(Clone, Debug)]
+pub struct Gradient {
+    /// True if the gradient is radial.
+    pub is_radial: bool,
+    /// Starting point.
+    pub start_point: Value<Point>,
+    /// Ending point.
+    pub end_point: Value<Point>,
+    /// Stop offsets and color values.
+    pub stops: super::ColorStops,
+}
+
+impl Gradient {
+    /// Returns true if the value contains no animated properties.
+    pub fn is_fixed(&self) -> bool {
+        self.start_point.is_fixed() && self.end_point.is_fixed() && self.stops.is_fixed()
+    }
+
+    /// Evaluates the animated value at the given frame.
+    pub fn evaluate(&self, frame: f64) -> peniko::Brush {
+        let start = self.start_point.evaluate(frame);
+        let end = self.end_point.evaluate(frame);
+        let stops = self.stops.evaluate(frame).into_owned();
+        if self.is_radial {
+            let radius = (end.to_vec2() - start.to_vec2()).hypot();
+            let mut grad = peniko::Gradient::new_radial(start, radius as f32);
+            grad.stops = stops;
+            grad.into()
+        } else {
+            let mut grad = peniko::Gradient::new_linear(start, end);
+            grad.stops = stops;
+            grad.into()
+        }
+    }
+}
+
+#[derive(Clone, Debug)]
+pub struct ColorStops {
+    pub frames: Vec<Time>,
+    pub values: Vec<Vec<f64>>,
+    pub count: usize,
+}
+
+impl ColorStops {
+    pub fn evaluate(&self, frame: f64) -> fixed::ColorStops {
+        self.evaluate_inner(frame).unwrap_or_default()
+    }
+
+    fn evaluate_inner(&self, frame: f64) -> Option<fixed::ColorStops> {
+        let ([ix0, ix1], t, easing, hold) = Time::frames_and_weight(&self.frames, frame)?;
+
+        let v0 = self.values.get(ix0)?;
+        let v1 = self.values.get(ix1)?;
+
+        let mut stops: fixed::ColorStops = Default::default();
+        for i in 0..self.count {
+            let j = i * 5;
+            let offset = v0.get(j)?.tween(v1.get(j)?, t, &easing);
+            let t = if hold { 0.0 } else { t };
+            let r = v0.get(j + 1)?.tween(v1.get(j + 1)?, t, &easing);
+            let g = v0.get(j + 2)?.tween(v1.get(j + 2)?, t, &easing);
+            let b = v0.get(j + 3)?.tween(v1.get(j + 3)?, t, &easing);
+            let a = v0.get(j + 4)?.tween(v1.get(j + 4)?, t, &easing);
+            let stop = peniko::ColorStop::from((
+                offset as f32,
+                peniko::Color::new([r as f32, g as f32, b as f32, a as f32]),
+            ));
+            stops.push(stop);
+        }
+        Some(stops)
+    }
+}
+
+/// Animated brush.
+#[derive(Clone, Debug)]
+pub enum Brush {
+    /// Solid color.
+    Solid(Value<Color>),
+    /// Gradient color.
+    Gradient(Gradient),
+}
+
+impl Brush {
+    /// Returns true if the value contains no animated properties.
+    pub fn is_fixed(&self) -> bool {
+        match self {
+            Self::Solid(value) => value.is_fixed(),
+            Self::Gradient(value) => value.is_fixed(),
+        }
+    }
+
+    /// Evaluates the animation at the specified time.
+    pub fn evaluate(&self, alpha: f64, frame: f64) -> fixed::Brush {
+        match self {
+            Self::Solid(value) => value
+                .evaluate_or(frame, peniko::Color::TRANSPARENT)
+                .multiply_alpha(alpha as f32)
+                .into(),
+            Self::Gradient(value) => value.evaluate(frame),
+        }
+    }
+
+    /// Converts the animated value to its model representation.
+    pub fn into_model(self) -> super::Brush {
+        if self.is_fixed() {
+            super::Brush::Fixed(self.evaluate(1.0, 0.0))
+        } else {
+            super::Brush::Animated(self)
+        }
+    }
+}
+
+#[derive(Clone, Debug)]
+pub struct Trim {
+    /// Start of the visible segment (0.0 to 100.0).
+    pub start: Value<f64>,
+    /// End of the visible segment (0.0 to 100.0).
+    pub end: Value<f64>,
+    /// Offset rotation in degrees.
+    pub offset: Value<f64>,
+}
+
+impl Trim {
+    /// Returns true if the trim is fixed.
+    pub fn is_fixed(&self) -> bool {
+        self.start.is_fixed() && self.end.is_fixed() && self.offset.is_fixed()
+    }
+
+    /// Evaluates the trim at the specified frame.
+    pub fn evaluate(&self, frame: f64) -> fixed::Trim {
+        fixed::Trim {
+            start: self.start.evaluate(frame),
+            end: self.end.evaluate(frame),
+            offset: self.offset.evaluate(frame),
+        }
+    }
+
+    /// Converts the animated value to its model representation.
+    pub fn into_model(self) -> super::Trim {
+        if self.is_fixed() {
+            super::Trim::Fixed(self.evaluate(0.0))
+        } else {
+            super::Trim::Animated(self)
+        }
+    }
+}
diff --git a/shared/foreign-lottie/src/runtime/model/fixed.rs b/shared/foreign-lottie/src/runtime/model/fixed.rs
new file mode 100644
index 0000000..75e1c0b
--- /dev/null
+++ b/shared/foreign-lottie/src/runtime/model/fixed.rs
@@ -0,0 +1,107 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+/*!
+Representations of fixed (non-animated) values.
+*/
+
+use std::mem::swap;
+
+use kurbo::{Affine, Point, Vec2};
+
+/// Fixed affine transformation.
+pub type Transform = kurbo::Affine;
+
+/// Fixed RGBA color.
+pub type Color = peniko::Color;
+
+/// Fixed color stops.
+pub type ColorStops = peniko::ColorStops;
+
+/// Fixed brush.
+pub type Brush = peniko::Brush;
+
+/// Fixed stroke style.
+pub type Stroke = kurbo::Stroke;
+
+/// Fixed repeater effect.
+#[derive(Clone, Debug)]
+pub struct Repeater {
+    /// Number of times to repeat.
+    pub copies: usize,
+    /// Offset of each subsequent repeated element.
+    pub offset: f64,
+    /// Anchor point.
+    pub anchor_point: Point,
+    /// Translation.
+    pub position: Point,
+    /// Rotation in degrees.
+    pub rotation: f64,
+    /// Scale.
+    pub scale: Vec2,
+    /// Opacity of the first element.
+    pub start_opacity: f64,
+    /// Opacity of the last element.
+    pub end_opacity: f64,
+}
+
+impl Repeater {
+    /// Returns the transform for the given copy index.
+    pub fn transform(&self, index: usize) -> Affine {
+        let t = self.offset + index as f64;
+        Affine::translate((
+            t * self.position.x + self.anchor_point.x,
+            t * self.position.y + self.anchor_point.y,
+        )) * Affine::rotate((t * self.rotation).to_radians())
+            * Affine::scale_non_uniform(
+                (self.scale.x / 100.0).powf(t),
+                (self.scale.y / 100.0).powf(t),
+            )
+            * Affine::translate((-self.anchor_point.x, -self.anchor_point.y))
+    }
+}
+
+#[derive(Clone, Debug)]
+pub struct Trim {
+    /// Start of the visible segment (0.0 to 100.0).
+    pub start: f64,
+    /// End of the visible segment (0.0 to 100.0).
+    pub end: f64,
+    /// Offset rotation in degrees.
+    pub offset: f64,
+}
+
+type NormalizedTrim = ((f64, f64), Option<(f64, f64)>);
+
+impl Trim {
+    // Returns normalized segments in 0.0..1.0 range.
+    /// Second tuple element is Some if offset causes wrap-around.
+    pub fn normalized(&self) -> Option<NormalizedTrim> {
+        let (start_pct, end_pct) = if self.start <= self.end {
+            (self.start, self.end)
+        } else {
+            (self.end, self.start)
+        };
+
+        let range_pct = end_pct - start_pct;
+        if range_pct < 1e-9 {
+            return None;
+        }
+        if range_pct >= 100.0 - 1e-9 {
+            return Some(((0.0, 1.0), None));
+        }
+
+        let offset_pct = self.offset * (100.0 / 360.0);
+        let start_pct = (start_pct + offset_pct).rem_euclid(100.0);
+        let end_pct = start_pct + range_pct;
+
+        if end_pct <= 100.0 {
+            Some(((start_pct / 100.0, end_pct / 100.0), None))
+        } else {
+            Some((
+                (start_pct / 100.0, 1.0),
+                Some((0.0, (end_pct - 100.0) / 100.0)),
+            ))
+        }
+    }
+}
diff --git a/shared/foreign-lottie/src/runtime/model/mod.rs b/shared/foreign-lottie/src/runtime/model/mod.rs
new file mode 100644
index 0000000..c6fb4e4
--- /dev/null
+++ b/shared/foreign-lottie/src/runtime/model/mod.rs
@@ -0,0 +1,278 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use kurbo::{Affine, PathEl, Point, Shape as _, Size, Vec2};
+use peniko::{BlendMode, Color};
+use std::ops::Range;
+
+mod spline;
+mod value;
+
+pub mod animated;
+pub mod fixed;
+
+pub use value::{Animated, Easing, EasingHandle, Time, Tween, Value, ValueRef};
+
+pub(crate) use spline::SplineToPath;
+
+#[derive(Clone, Debug)]
+#[cfg_attr(
+    not(target_arch = "wasm32"),
+    expect(
+        clippy::large_enum_variant,
+        reason = "Deferred. Furthermore, for some reason, only on wasm32, this isn't triggering clippy."
+    )
+)]
+pub enum Transform {
+    Fixed(fixed::Transform),
+    Animated(animated::Transform),
+}
+impl Transform {
+    pub fn is_fixed(&self) -> bool {
+        matches!(self, Self::Fixed(_))
+    }
+    pub fn evaluate(&self, frame: f64) -> ValueRef<'_, fixed::Transform> {
+        match self {
+            Self::Fixed(value) => ValueRef::Borrowed(value),
+            Self::Animated(value) => ValueRef::Owned(value.evaluate(frame)),
+        }
+    }
+}
+
+#[derive(Clone, Debug)]
+pub enum Stroke {
+    Fixed(fixed::Stroke),
+    Animated(animated::Stroke),
+}
+impl Stroke {
+    pub fn is_fixed(&self) -> bool {
+        matches!(self, Self::Fixed(_))
+    }
+    pub fn evaluate(&self, frame: f64) -> ValueRef<'_, fixed::Stroke> {
+        match self {
+            Self::Fixed(value) => ValueRef::Borrowed(value),
+            Self::Animated(value) => ValueRef::Owned(value.evaluate(frame)),
+        }
+    }
+}
+
+#[derive(Clone, Debug)]
+#[cfg_attr(
+    not(target_arch = "wasm32"),
+    expect(
+        clippy::large_enum_variant,
+        reason = "Deferred. Furthermore, for some reason, only on wasm32, this isn't triggering clippy."
+    )
+)]
+pub enum Repeater {
+    Fixed(fixed::Repeater),
+    Animated(animated::Repeater),
+}
+impl Repeater {
+    pub fn is_fixed(&self) -> bool {
+        matches!(self, Self::Fixed(_))
+    }
+    pub fn evaluate(&self, frame: f64) -> ValueRef<'_, fixed::Repeater> {
+        match self {
+            Self::Fixed(value) => ValueRef::Borrowed(value),
+            Self::Animated(value) => ValueRef::Owned(value.evaluate(frame)),
+        }
+    }
+}
+
+#[derive(Clone, Debug)]
+pub enum ColorStops {
+    Fixed(fixed::ColorStops),
+    Animated(animated::ColorStops),
+}
+impl ColorStops {
+    pub fn is_fixed(&self) -> bool {
+        matches!(self, Self::Fixed(_))
+    }
+    pub fn evaluate(&self, frame: f64) -> ValueRef<'_, fixed::ColorStops> {
+        match self {
+            Self::Fixed(value) => ValueRef::Borrowed(value),
+            Self::Animated(value) => ValueRef::Owned(value.evaluate(frame)),
+        }
+    }
+}
+
+#[derive(Clone, Debug)]
+pub enum Brush {
+    Fixed(fixed::Brush),
+    Animated(animated::Brush),
+}
+
+impl Brush {
+    pub fn is_fixed(&self) -> bool {
+        matches!(self, Self::Fixed(_))
+    }
+
+    pub fn evaluate(&self, alpha: f64, frame: f64) -> ValueRef<'_, fixed::Brush> {
+        match self {
+            Self::Fixed(value) => {
+                if alpha == 1.0 {
+                    ValueRef::Borrowed(value)
+                } else {
+                    ValueRef::Owned(value.to_owned().multiply_alpha(alpha as _))
+                }
+            }
+            Self::Animated(value) => ValueRef::Owned(value.evaluate(alpha, frame)),
+        }
+    }
+}
+
+impl Default for Transform {
+    fn default() -> Self {
+        Self::Fixed(Affine::IDENTITY)
+    }
+}
+
+#[derive(Clone, Debug)]
+pub enum Geometry {
+    Fixed(Vec<PathEl>),
+    Rect(animated::Rect),
+    Ellipse(animated::Ellipse),
+    Spline(animated::Spline),
+}
+
+impl Geometry {
+    pub fn evaluate(&self, frame: f64, path: &mut Vec<PathEl>) {
+        match self {
+            Self::Fixed(value) => {
+                path.extend_from_slice(value);
+            }
+            Self::Rect(value) => {
+                path.extend(value.evaluate(frame).path_elements(0.1));
+            }
+            Self::Ellipse(value) => {
+                path.extend(value.evaluate(frame).path_elements(0.1));
+            }
+            Self::Spline(value) => {
+                value.evaluate(frame, path);
+            }
+        }
+    }
+}
+
+#[derive(Clone, Debug)]
+pub struct Draw {
+    /// Parameters for a stroked draw operation.
+    pub stroke: Option<Stroke>,
+    /// Brush for the draw operation.
+    pub brush: Brush,
+    /// Opacity of the draw operation.
+    pub opacity: Value<f64>,
+}
+
+/// Elements of a shape layer.
+#[derive(Clone, Debug)]
+pub enum Shape {
+    /// Group of shapes with an optional transform.
+    Group(Vec<Shape>, Option<GroupTransform>),
+    /// Geometry element.
+    Geometry(Geometry),
+    /// Fill or stroke element.
+    Draw(Draw),
+    /// Repeater element.
+    Repeater(Repeater),
+    /// Trim element.
+    Trim(Trim),
+}
+
+/// Transform and opacity for a shape group.
+#[derive(Clone, Debug)]
+pub struct GroupTransform {
+    pub transform: Transform,
+    pub opacity: Value<f64>,
+}
+
+/// Layer in an animation.
+#[derive(Clone, Debug, Default)]
+pub struct Layer {
+    /// Name of the layer.
+    pub name: String,
+    /// Index of the transform parent layer.
+    pub parent: Option<usize>,
+    /// Transform for the entire layer.
+    pub transform: Transform,
+    /// Opacity for the entire layer.
+    pub opacity: Value<f64>,
+    /// Width of the layer.
+    pub width: f64,
+    /// Height of the layer.
+    pub height: f64,
+    /// Blend mode for the layer.
+    pub blend_mode: Option<peniko::BlendMode>,
+    /// Range of frames in which the layer is active.
+    pub frames: Range<f64>,
+    /// Frame time stretch factor.
+    pub stretch: f64,
+    /// Starting frame for the layer (only applied to instances).
+    pub start_frame: f64,
+    /// List of masks applied to the content.
+    pub masks: Vec<Mask>,
+    /// True if the layer is used as a mask.
+    pub is_mask: bool,
+    /// Mask blend mode and layer.
+    pub mask_layer: Option<(BlendMode, usize)>,
+    /// Content of the layer.
+    pub content: Content,
+}
+
+/// Matte layer mode.
+#[derive(Copy, Clone, PartialEq, Eq, Default, Debug)]
+pub enum Matte {
+    #[default]
+    Normal,
+    // TODO: Use these
+    // Alpha,
+    // InvertAlpha,
+    // Luma,
+    // InvertLuma,
+}
+
+/// Mask for a layer.
+#[derive(Clone, Debug)]
+pub struct Mask {
+    /// Blend mode for the mask.
+    pub mode: peniko::BlendMode,
+    /// Geometry that defines the shape of the mask.
+    pub geometry: Geometry,
+    /// Opacity of the mask.
+    pub opacity: Value<f64>,
+}
+
+/// Content of a layer.
+#[derive(Clone, Default, Debug)]
+pub enum Content {
+    /// Empty layer.
+    #[default]
+    None,
+    /// Asset instance with the specified name and time remapping.
+    Instance {
+        name: String,
+        time_remap: Option<Value<f64>>,
+    },
+    /// Collection of shapes.
+    Shape(Vec<Shape>),
+}
+
+#[derive(Clone, Debug)]
+pub enum Trim {
+    Fixed(fixed::Trim),
+    Animated(animated::Trim),
+}
+
+impl Trim {
+    pub fn is_fixed(&self) -> bool {
+        matches!(self, Self::Fixed(_))
+    }
+
+    pub fn evaluate(&self, frame: f64) -> ValueRef<'_, fixed::Trim> {
+        match self {
+            Self::Fixed(value) => ValueRef::Borrowed(value),
+            Self::Animated(value) => ValueRef::Owned(value.evaluate(frame)),
+        }
+    }
+}
diff --git a/shared/foreign-lottie/src/runtime/model/spline.rs b/shared/foreign-lottie/src/runtime/model/spline.rs
new file mode 100644
index 0000000..aa7d834
--- /dev/null
+++ b/shared/foreign-lottie/src/runtime/model/spline.rs
@@ -0,0 +1,67 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use kurbo::{PathEl, Point};
+
+/// Helper trait for converting cubic splines to paths.
+pub trait SplineToPath {
+    fn get(&self, index: usize) -> Point;
+    fn len(&self) -> usize;
+
+    fn to_path(&self, is_closed: bool, path: &mut Vec<PathEl>) -> Option<()> {
+        use PathEl::*;
+        if self.len() == 0 {
+            return None;
+        }
+        path.push(MoveTo(self.get(0)));
+        let n_vertices = self.len() / 3;
+        let mut add_element = |from_vertex, to_vertex| {
+            let from_index = 3 * from_vertex;
+            let to_index = 3 * to_vertex;
+            let p0: Point = self.get(from_index);
+            let p1: Point = self.get(to_index);
+            let mut c0: Point = self.get(from_index + 2);
+            c0.x += p0.x;
+            c0.y += p0.y;
+            let mut c1: Point = self.get(to_index + 1);
+            c1.x += p1.x;
+            c1.y += p1.y;
+            if c0 == p0 && c1 == p1 {
+                path.push(LineTo(p1));
+            } else {
+                path.push(CurveTo(c0, c1, p1));
+            }
+        };
+        for i in 1..n_vertices {
+            add_element(i - 1, i);
+        }
+        if is_closed && n_vertices != 0 {
+            add_element(n_vertices - 1, 0);
+            path.push(ClosePath);
+        }
+        Some(())
+    }
+}
+
+/// Converts a static spline to a path.
+impl SplineToPath for &'_ [Point] {
+    fn len(&self) -> usize {
+        self.as_ref().len()
+    }
+
+    fn get(&self, index: usize) -> Point {
+        self[index]
+    }
+}
+
+/// Produces a path by lerping between two sets of points.
+impl SplineToPath for (&'_ [Point], &'_ [Point], f64) {
+    fn len(&self) -> usize {
+        self.0.len().min(self.1.len())
+    }
+
+    fn get(&self, index: usize) -> Point {
+        // TODO: This definitely shouldn't be a lerp
+        self.0[index].lerp(self.1[index], self.2)
+    }
+}
diff --git a/shared/foreign-lottie/src/runtime/model/value.rs b/shared/foreign-lottie/src/runtime/model/value.rs
new file mode 100644
index 0000000..10ca3cb
--- /dev/null
+++ b/shared/foreign-lottie/src/runtime/model/value.rs
@@ -0,0 +1,269 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use kurbo::{
+    ParamCurve, Point,
+    common::{solve_cubic, solve_itp},
+};
+
+/// Fixed or animated value.
+#[derive(Clone, Debug)]
+pub enum Value<T: Tween> {
+    /// Fixed value.
+    Fixed(T),
+    /// Animated value.
+    Animated(Animated<T>),
+}
+
+impl<T: Tween + Default> Value<T> {
+    /// Returns the value at a specified frame.
+    pub fn evaluate(&self, frame: f64) -> T {
+        match self {
+            Self::Fixed(fixed) => fixed.clone(),
+            Self::Animated(animated) => animated.evaluate_or(frame, T::default()),
+        }
+    }
+}
+
+impl<T: Tween> Value<T> {
+    /// Returns true if the value is fixed.
+    pub fn is_fixed(&self) -> bool {
+        matches!(self, Self::Fixed(_))
+    }
+
+    /// Returns the value at a specified frame, with a fallback default.
+    pub fn evaluate_or(&self, frame: f64, default: T) -> T {
+        match self {
+            Self::Fixed(fixed) => fixed.clone(),
+            Self::Animated(animated) => animated.evaluate_or(frame, default),
+        }
+    }
+}
+
+impl<T: Tween + Default> Default for Value<T> {
+    fn default() -> Self {
+        Self::Fixed(T::default())
+    }
+}
+
+/// Borrowed or owned value.
+#[derive(Clone, Debug)]
+pub enum ValueRef<'a, T> {
+    Borrowed(&'a T),
+    Owned(T),
+}
+
+impl<T> AsRef<T> for ValueRef<'_, T> {
+    fn as_ref(&self) -> &T {
+        match self {
+            Self::Borrowed(value) => value,
+            Self::Owned(value) => value,
+        }
+    }
+}
+
+impl<T: Clone> ValueRef<'_, T> {
+    pub fn into_owned(self) -> T {
+        match self {
+            Self::Borrowed(value) => value.clone(),
+            Self::Owned(value) => value,
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug)]
+pub struct Easing {
+    pub o: EasingHandle,
+    pub i: EasingHandle,
+}
+
+impl Easing {
+    pub const LERP: Easing = Easing {
+        o: EasingHandle { x: 0.0, y: 0.0 },
+        i: EasingHandle { x: 1.0, y: 1.0 },
+    };
+}
+
+#[derive(Copy, Clone, Debug)]
+pub struct EasingHandle {
+    pub x: f64,
+    pub y: f64,
+}
+
+/// Time for a particular keyframe, represented as a frame number.
+#[derive(Copy, Clone, Debug)]
+pub struct Time {
+    /// Frame number.
+    pub frame: f64,
+    /// Easing tangent going into the next keyframe
+    pub in_tangent: Option<EasingHandle>,
+    /// Easing tangent leaving the current keyframe
+    pub out_tangent: Option<EasingHandle>,
+    /// Whether it's a hold frame.
+    pub hold: bool,
+}
+
+impl Time {
+    /// Returns the frame indices and interpolation weight for the given frame,
+    /// and whether to hold the frame
+    pub(crate) fn frames_and_weight(
+        times: &[Time],
+        frame: f64,
+    ) -> Option<([usize; 2], f64, Easing, bool)> {
+        if times.is_empty() {
+            return None;
+        }
+        use core::cmp::Ordering::*;
+        let ix = match times.binary_search_by(|x| {
+            if x.frame < frame {
+                Less
+            } else if x.frame > frame {
+                Greater
+            } else {
+                Equal
+            }
+        }) {
+            Ok(ix) => ix,
+            Err(ix) => ix.saturating_sub(1),
+        };
+        let ix0 = ix.min(times.len() - 1);
+        let ix1 = (ix0 + 1).min(times.len() - 1);
+
+        let t0 = times[ix0];
+        let t1 = times[ix1];
+        let (t0_ox, t0_oy) = t0.out_tangent.map(|o| (o.x, o.y)).unwrap_or((0.0, 0.0));
+        let (t0_ix, t0_iy) = t0.in_tangent.map(|i| (i.x, i.y)).unwrap_or((1.0, 1.0));
+        let easing = Easing {
+            o: EasingHandle { x: t0_ox, y: t0_oy },
+            i: EasingHandle { x: t0_ix, y: t0_iy },
+        };
+        let hold = t0.hold;
+        let t = (frame - t0.frame) / (t1.frame - t0.frame);
+        Some(([ix0, ix1], t.clamp(0.0, 1.0), easing, hold))
+    }
+}
+
+#[derive(Clone, Debug)]
+pub struct Animated<T: Tween> {
+    pub times: Vec<Time>,
+    pub values: Vec<T>,
+}
+
+impl<T: Tween> Animated<T> {
+    /// Returns the value at the specified frame.
+    pub fn evaluate_or(&self, frame: f64, default: T) -> T {
+        self.evaluate_inner(frame).unwrap_or(default)
+    }
+
+    fn evaluate_inner(&self, frame: f64) -> Option<T> {
+        let ([ix0, ix1], t, easing, hold) = Time::frames_and_weight(&self.times, frame)?;
+        let t = if hold { 0.0 } else { t };
+
+        let v1 = self.values.get(ix0)?;
+        let v2 = self.values.get(ix1)?;
+
+        Some(v1.tween(v2, t, &easing))
+    }
+}
+
+/// Something that can be interpolated with an easing function.
+pub trait Tween: Clone {
+    fn tween(&self, other: &Self, t: f64, easing: &Easing) -> Self;
+}
+
+impl Tween for f64 {
+    /// Tween between two f64 values using a cubic bezier easing curve.
+    ///
+    /// Unfortunately, kurbo doesn't expose a way to get the eased value of t directly, so we have
+    /// to re-implement it here.
+    ///
+    /// t - normalized time 0.0 to 1.0
+    fn tween(&self, other: &Self, t: f64, easing: &Easing) -> Self {
+        // avoid unnecessary calculations
+        if t <= 0.0 {
+            return *self;
+        }
+        if t >= 1.0 {
+            return *other;
+        }
+
+        // Created for [kurbo::ParamCurve::eval]
+        let curve = kurbo::CubicBez::new(
+            Point::new(0.0, 0.0),
+            Point::new(easing.o.x, easing.o.y),
+            Point::new(easing.i.x, easing.i.y),
+            Point::new(1.0, 1.0),
+        );
+
+        // Manual copy-paste of [kurbo::bezpath::cubic_bez_coefs]
+        // in preparation for [kurbo::common::solve_cubic]
+        let (x0, x1, x2, x3) = (curve.p0.x, curve.p1.x, curve.p2.x, curve.p3.x);
+        let c0 = x0;
+        let c1 = 3.0 * (x1 - x0);
+        let c2 = 3.0 * (x2 - 2.0 * x1 + x0);
+        let c3 = x3 - 3.0 * x2 + 3.0 * x1 - x0;
+
+        // Find where along the curve we are at normalized time `t`
+        // See: https://github.com/jneem/linesweeper/blob/7d620ed004605141519037c681edac93e22f5855/src/curve/mod.rs#L355
+        let max_coeff = c0.abs().max(c1.abs()).max(c2.abs()).max(c3.abs());
+        let eps = 1e-12 * max_coeff.max(1.0);
+
+        let roots = kurbo::common::solve_cubic(c0 - t, c1, c2, c3);
+        let u = roots
+            .iter()
+            .copied()
+            .find(|&r| (-eps..=1.0 + eps).contains(&r))
+            .unwrap_or_else(|| {
+                // Fallback when no valid root found due to precision issues
+                // The cubic evaluates to (c0 - t) at u=0 and (c0 + c1 + c2 + c3 - t) at u=1
+                let val_at_0 = (c0 - t).abs();
+                let val_at_1 = (c0 + c1 + c2 + c3 - t).abs();
+
+                if val_at_0 <= val_at_1 { 0.0 } else { 1.0 }
+            });
+
+        // Evaluate the curve at that point to get the y value
+        let eased_y = curve.eval(u).y;
+
+        self + (other - self) * eased_y
+    }
+}
+
+impl Tween for kurbo::Point {
+    fn tween(&self, other: &Self, t: f64, easing: &Easing) -> Self {
+        Self::new(
+            self.x.tween(&other.x, t, easing),
+            self.y.tween(&other.y, t, easing),
+        )
+    }
+}
+
+impl Tween for kurbo::Vec2 {
+    fn tween(&self, other: &Self, t: f64, easing: &Easing) -> Self {
+        Self::new(
+            self.x.tween(&other.x, t, easing),
+            self.y.tween(&other.y, t, easing),
+        )
+    }
+}
+
+impl Tween for kurbo::Size {
+    fn tween(&self, other: &Self, t: f64, easing: &Easing) -> Self {
+        Self::new(
+            self.width.tween(&other.width, t, easing),
+            self.height.tween(&other.height, t, easing),
+        )
+    }
+}
+
+impl Tween for peniko::Color {
+    fn tween(&self, other: &Self, t: f64, easing: &Easing) -> Self {
+        let [r1, g1, b1, a1] = self.components;
+        let [r2, g2, b2, a2] = other.components;
+        let r = (r1 as f64).tween(&(r2 as f64), t, easing);
+        let g = (g1 as f64).tween(&(g2 as f64), t, easing);
+        let b = (b1 as f64).tween(&(b2 as f64), t, easing);
+        let a = (a1 as f64).tween(&(a2 as f64), t, easing);
+        peniko::Color::new([r as f32, g as f32, b as f32, a as f32])
+    }
+}
diff --git a/shared/foreign-lottie/src/runtime/render.rs b/shared/foreign-lottie/src/runtime/render.rs
new file mode 100644
index 0000000..fed0e8e
--- /dev/null
+++ b/shared/foreign-lottie/src/runtime/render.rs
@@ -0,0 +1,486 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use super::Composition;
+use super::model::{Content, Draw, Geometry, GroupTransform, Layer, Shape, fixed};
+use kurbo::{
+    Affine, BezPath, CubicBez, Line, ParamCurve, ParamCurveArclen, PathEl, PathSeg, Point, QuadBez,
+    Rect,
+};
+use peniko::{Fill, Mix};
+use std::mem::swap;
+use std::ops::Range;
+
+pub trait RenderSink {
+    fn push_layer(
+        &mut self,
+        blend: impl Into<peniko::BlendMode>,
+        alpha: f32,
+        transform: Affine,
+        shape: &impl kurbo::Shape,
+    );
+
+    fn push_clip_layer(&mut self, transform: Affine, shape: &impl kurbo::Shape);
+
+    fn pop_layer(&mut self);
+
+    fn draw(
+        &mut self,
+        stroke: Option<&fixed::Stroke>,
+        transform: Affine,
+        brush: &fixed::Brush,
+        shape: &impl kurbo::Shape,
+    );
+}
+
+/// Renders a composition into a scene.
+#[derive(Debug, Default)]
+pub struct Renderer {
+    batch: Batch,
+    mask_elements: Vec<PathEl>,
+}
+
+impl Renderer {
+    /// Creates a new renderer.
+    pub fn new() -> Self {
+        Self::default()
+    }
+
+    /// Renders and appends the animation at a given frame to the provided scene.
+    pub fn append(
+        &mut self,
+        animation: &Composition,
+        frame: f64,
+        transform: Affine,
+        alpha: f64,
+        scene: &mut impl RenderSink,
+    ) {
+        self.batch.clear();
+        scene.push_clip_layer(
+            transform,
+            &Rect::new(0.0, 0.0, animation.width as _, animation.height as _),
+        );
+        for layer in animation.layers.iter().rev() {
+            if layer.is_mask {
+                continue;
+            }
+            self.render_layer(
+                animation,
+                &animation.layers,
+                layer,
+                transform,
+                alpha,
+                frame,
+                scene,
+            );
+        }
+        scene.pop_layer();
+    }
+
+    #[expect(clippy::too_many_arguments, reason = "Deferred")]
+    fn render_layer(
+        &mut self,
+        animation: &Composition,
+        layer_set: &[Layer],
+        layer: &Layer,
+        transform: Affine,
+        alpha: f64,
+        frame: f64,
+        scene: &mut impl RenderSink,
+    ) {
+        if !layer.frames.contains(&frame) {
+            return;
+        }
+        let parent_transform = transform;
+        let transform = self.compute_transform(layer_set, layer, parent_transform, frame);
+        let full_rect = Rect::new(0.0, 0.0, animation.width as f64, animation.height as f64);
+        if let Some((mode, mask_index)) = layer.mask_layer {
+            // todo: re-enable masking when it is more understood (and/or if
+            // it's currently supported in vello?) Extra layer to
+            // isolate blending for the mask
+            scene.push_layer(Mix::Normal, 1.0, parent_transform, &full_rect);
+            if let Some(mask) = layer_set.get(mask_index) {
+                self.render_layer(
+                    animation,
+                    layer_set,
+                    mask,
+                    parent_transform,
+                    alpha,
+                    frame,
+                    scene,
+                );
+            }
+            scene.push_layer(mode, 1.0, parent_transform, &full_rect);
+        }
+        let alpha = alpha * layer.opacity.evaluate(frame) / 100.0;
+        for mask in &layer.masks {
+            mask.geometry.evaluate(frame, &mut self.mask_elements);
+            scene.push_clip_layer(transform, &self.mask_elements.as_slice());
+            self.mask_elements.clear();
+        }
+        match &layer.content {
+            Content::None => {}
+            Content::Instance {
+                name,
+                time_remap: _,
+            } => {
+                // TODO: Use time_remap
+                // let frame = time_remap
+                //     .as_ref()
+                //     .map(|tm| tm.evaluate(frame))
+                //     .unwrap_or(frame);
+                if let Some(asset_layers) = animation.assets.get(name) {
+                    let frame = frame / layer.stretch;
+                    let frame_delta = -layer.start_frame / layer.stretch;
+                    for asset_layer in asset_layers.iter().rev() {
+                        if asset_layer.is_mask {
+                            continue;
+                        }
+                        self.render_layer(
+                            animation,
+                            asset_layers,
+                            asset_layer,
+                            transform,
+                            alpha,
+                            frame + frame_delta,
+                            scene,
+                        );
+                    }
+                }
+            }
+            Content::Shape(shapes) => {
+                self.render_shapes(shapes, transform, alpha, frame);
+                self.batch.render(scene);
+                self.batch.clear();
+            }
+        }
+        for _ in 0..layer.masks.len() + (layer.mask_layer.is_some() as usize * 2) {
+            scene.pop_layer();
+        }
+    }
+
+    fn render_shapes(&mut self, shapes: &[Shape], transform: Affine, alpha: f64, frame: f64) {
+        // Keep track of our local top of the geometry stack. Any subsequent
+        // draws are bounded by this.
+        let geometry_start = self.batch.geometries.len();
+        // Also keep track of top of draw stack for repeater evaluation.
+        let draw_start = self.batch.draws.len();
+        // Top to bottom, collect geometries and draws.
+        for shape in shapes {
+            match shape {
+                Shape::Group(shapes, group_transform) => {
+                    let (group_transform, group_alpha) =
+                        if let Some(GroupTransform { transform, opacity }) = group_transform {
+                            (
+                                transform.evaluate(frame).into_owned(),
+                                opacity.evaluate(frame) / 100.0,
+                            )
+                        } else {
+                            (Affine::IDENTITY, 1.0)
+                        };
+                    self.render_shapes(
+                        shapes,
+                        transform * group_transform,
+                        alpha * group_alpha,
+                        frame,
+                    );
+                }
+                Shape::Geometry(geometry) => {
+                    self.batch.push_geometry(geometry, transform, frame);
+                }
+                Shape::Draw(draw) => {
+                    self.batch.push_draw(draw, alpha, geometry_start, frame);
+                }
+                Shape::Repeater(repeater) => {
+                    let repeater = repeater.evaluate(frame);
+                    self.batch
+                        .repeat(repeater.as_ref(), geometry_start, draw_start);
+                }
+                Shape::Trim(trim) => {
+                    let trim = trim.evaluate(frame);
+                    self.batch.apply_trim(trim.as_ref(), geometry_start);
+                }
+            }
+        }
+    }
+
+    /// Computes the transform for a single layer. This currently chases the
+    /// full transform chain each time. If it becomes a bottleneck, we can
+    /// implement caching.
+    fn compute_transform(
+        &self,
+        layer_set: &[Layer],
+        layer: &Layer,
+        global_transform: Affine,
+        frame: f64,
+    ) -> Affine {
+        let mut transform = layer.transform.evaluate(frame).into_owned();
+        let mut parent_index = layer.parent;
+        let mut count = 0_usize;
+        while let Some(index) = parent_index {
+            // We don't check for cycles at import time, so this heuristic
+            // prevents infinite loops.
+            if count >= layer_set.len() {
+                break;
+            }
+            if let Some(parent) = layer_set.get(index) {
+                parent_index = parent.parent;
+                transform = parent.transform.evaluate(frame).into_owned() * transform;
+                count += 1;
+            } else {
+                break;
+            }
+        }
+        global_transform * transform
+    }
+}
+
+#[derive(Clone, Debug)]
+struct DrawData {
+    stroke: Option<fixed::Stroke>,
+    brush: fixed::Brush,
+    alpha: f64,
+    /// Range into `ShapeBatch::geometries`
+    geometry: Range<usize>,
+}
+
+impl DrawData {
+    fn new(draw: &Draw, alpha: f64, geometry: Range<usize>, frame: f64) -> Self {
+        Self {
+            stroke: draw
+                .stroke
+                .as_ref()
+                .map(|stroke| stroke.evaluate(frame).into_owned()),
+            brush: draw.brush.evaluate(1.0, frame).into_owned(),
+            alpha: alpha * draw.opacity.evaluate(frame) / 100.0,
+            geometry,
+        }
+    }
+}
+
+#[derive(Clone, Debug)]
+struct GeometryData {
+    /// Range into `ShapeBatch::elements`
+    elements: Range<usize>,
+    transform: Affine,
+}
+
+#[derive(Debug, Default)]
+struct Batch {
+    elements: Vec<PathEl>,
+    geometries: Vec<GeometryData>,
+    draws: Vec<DrawData>,
+    repeat_geometries: Vec<GeometryData>,
+    repeat_draws: Vec<DrawData>,
+    /// Length of geometries at time of most recent draw. This is
+    /// used to prevent merging into already used geometries.
+    drawn_geometry: usize,
+    trim_elements: Vec<PathEl>,
+}
+
+impl Batch {
+    fn push_geometry(&mut self, geometry: &Geometry, transform: Affine, frame: f64) {
+        // Merge with the previous geometry if possible. There are two
+        // conditions:
+        // 1. The previous geometry has not yet been referenced by a draw
+        // 2. The geometries have the same transform
+        if self.drawn_geometry < self.geometries.len()
+            && self.geometries.last().map(|last| last.transform) == Some(transform)
+        {
+            geometry.evaluate(frame, &mut self.elements);
+            self.geometries.last_mut().unwrap().elements.end = self.elements.len();
+        } else {
+            let start = self.elements.len();
+            geometry.evaluate(frame, &mut self.elements);
+            let end = self.elements.len();
+            self.geometries.push(GeometryData {
+                elements: start..end,
+                transform,
+            });
+        }
+    }
+
+    fn push_draw(&mut self, draw: &Draw, alpha: f64, geometry_start: usize, frame: f64) {
+        self.draws.push(DrawData::new(
+            draw,
+            alpha,
+            geometry_start..self.geometries.len(),
+            frame,
+        ));
+        self.drawn_geometry = self.geometries.len();
+    }
+
+    fn repeat(&mut self, repeater: &fixed::Repeater, geometry_start: usize, draw_start: usize) {
+        // First move the relevant ranges of geometries and draws into side
+        // buffers
+        self.repeat_geometries
+            .extend(self.geometries.drain(geometry_start..));
+        self.repeat_draws.extend(self.draws.drain(draw_start..));
+        // Next, repeat the geometries and apply the offset transform
+        for geometry in self.repeat_geometries.iter() {
+            for i in 0..repeater.copies {
+                let transform = repeater.transform(i);
+                let mut geometry = geometry.clone();
+                geometry.transform *= transform;
+                self.geometries.push(geometry);
+            }
+        }
+        // Finally, repeat the draws, taking into account opacity and the
+        // modified newly repeated geometry ranges
+        let start_alpha = repeater.start_opacity / 100.0;
+        let end_alpha = repeater.end_opacity / 100.0;
+        let delta_alpha = if repeater.copies > 1 {
+            // See note in Skottie: AE does not cover the full opacity range
+            (end_alpha - start_alpha) / repeater.copies as f64
+        } else {
+            0.0
+        };
+        for i in 0..repeater.copies {
+            let alpha = start_alpha + delta_alpha * i as f64;
+            if alpha <= 0.0 {
+                continue;
+            }
+            for mut draw in self.repeat_draws.iter().cloned() {
+                draw.alpha *= alpha;
+                let count = draw.geometry.end - draw.geometry.start;
+                draw.geometry.start =
+                    geometry_start + (draw.geometry.start - geometry_start) * repeater.copies;
+                draw.geometry.end = draw.geometry.start + count * repeater.copies;
+                self.draws.push(draw);
+            }
+        }
+        // Clear the side buffers
+        self.repeat_geometries.clear();
+        self.repeat_draws.clear();
+        // Prevent merging until new geometries are pushed
+        self.drawn_geometry = self.geometries.len();
+    }
+
+    fn apply_trim(&mut self, trim: &fixed::Trim, geometry_start: usize) {
+        let Some((first, second)) = trim.normalized() else {
+            for geometry in &mut self.geometries[geometry_start..] {
+                geometry.elements = 0..0;
+            }
+            return;
+        };
+
+        if first.0 <= 1e-9 && first.1 >= 1.0 - 1e-9 && second.is_none() {
+            return;
+        }
+
+        for geometry in &self.geometries[..geometry_start] {
+            self.trim_elements
+                .extend(self.elements[geometry.elements.clone()].iter().cloned());
+        }
+
+        const ACCURACY: f64 = 0.1;
+
+        for geometry in &mut self.geometries[geometry_start..] {
+            let path: BezPath = self.elements[geometry.elements.clone()]
+                .iter()
+                .cloned()
+                .collect();
+            let segs: Vec<PathSeg> = path.segments().collect();
+            let total_length: f64 = segs.iter().map(|s| s.arclen(ACCURACY)).sum();
+
+            if total_length <= 0.0 || segs.is_empty() {
+                let pos = self.trim_elements.len();
+                geometry.elements = pos..pos;
+                continue;
+            }
+
+            let trim_ranges = [Some(first), second];
+            let mut trimmed = BezPath::new();
+            for range in trim_ranges.into_iter().flatten() {
+                let (norm_start, norm_end) = range;
+                let start_len = norm_start * total_length;
+                let end_len = norm_end * total_length;
+                let mut current_len = 0.0;
+                let mut need_move = true;
+
+                for seg in &segs {
+                    let seg_len = seg.arclen(ACCURACY);
+                    let seg_end = current_len + seg_len;
+
+                    if seg_end < start_len - 1e-9 {
+                        current_len = seg_end;
+                        continue;
+                    }
+                    if current_len > end_len + 1e-9 {
+                        break;
+                    }
+
+                    let t_start = if current_len < start_len {
+                        seg.inv_arclen(start_len - current_len, ACCURACY)
+                            .clamp(0.0, 1.0)
+                    } else {
+                        0.0
+                    };
+                    let t_end = if seg_end > end_len {
+                        seg.inv_arclen(end_len - current_len, ACCURACY)
+                            .clamp(0.0, 1.0)
+                    } else {
+                        1.0
+                    };
+
+                    if t_end > t_start + 1e-9 {
+                        let sub = seg.subsegment(t_start..t_end);
+                        if need_move {
+                            trimmed.move_to(sub.start());
+                            need_move = false;
+                        }
+                        match sub {
+                            PathSeg::Line(l) => trimmed.line_to(l.p1),
+                            PathSeg::Quad(q) => trimmed.quad_to(q.p1, q.p2),
+                            PathSeg::Cubic(c) => trimmed.curve_to(c.p1, c.p2, c.p3),
+                        }
+                    }
+                    current_len = seg_end;
+                }
+            }
+
+            let new_start = self.trim_elements.len();
+            self.trim_elements
+                .extend(trimmed.elements().iter().cloned());
+            geometry.elements = new_start..self.trim_elements.len();
+        }
+
+        let mut offset = 0;
+        for geometry in &mut self.geometries[..geometry_start] {
+            let len = geometry.elements.len();
+            geometry.elements = offset..offset + len;
+            offset += len;
+        }
+
+        swap(&mut self.elements, &mut self.trim_elements);
+        self.trim_elements.clear();
+    }
+
+    fn render(&self, scene: &mut impl RenderSink) {
+        // Process all draws in reverse
+        for draw in self.draws.iter().rev() {
+            // Some nastiness to avoid cloning the brush if unnecessary
+            let modified_brush = if draw.alpha != 1.0 {
+                Some(draw.brush.clone().multiply_alpha(draw.alpha as _))
+            } else {
+                None
+            };
+            let brush = modified_brush.as_ref().unwrap_or(&draw.brush);
+            for geometry in self.geometries[draw.geometry.clone()].iter() {
+                let path = &self.elements[geometry.elements.clone()];
+                let transform = geometry.transform;
+                scene.draw(draw.stroke.as_ref(), transform, brush, &path);
+            }
+        }
+    }
+
+    fn clear(&mut self) {
+        self.elements.clear();
+        self.geometries.clear();
+        self.draws.clear();
+        self.repeat_geometries.clear();
+        self.repeat_draws.clear();
+        self.drawn_geometry = 0;
+        self.trim_elements.clear();
+    }
+}
diff --git a/shared/foreign-lottie/src/runtime/vello.rs b/shared/foreign-lottie/src/runtime/vello.rs
new file mode 100644
index 0000000..5bb599a
--- /dev/null
+++ b/shared/foreign-lottie/src/runtime/vello.rs
@@ -0,0 +1,56 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use super::{Composition, RenderSink, Renderer, model::fixed};
+
+use kurbo::{Affine, Shape};
+use peniko::{BlendMode, Fill};
+
+impl RenderSink for vello::Scene {
+    fn push_layer(
+        &mut self,
+        blend: impl Into<BlendMode>,
+        alpha: f32,
+        transform: Affine,
+        shape: &impl Shape,
+    ) {
+        self.push_layer(Fill::NonZero, blend, alpha, transform, shape);
+    }
+
+    fn push_clip_layer(&mut self, transform: Affine, shape: &impl Shape) {
+        self.push_clip_layer(Fill::NonZero, transform, shape);
+    }
+
+    fn pop_layer(&mut self) {
+        self.pop_layer();
+    }
+
+    fn draw(
+        &mut self,
+        stroke: Option<&fixed::Stroke>,
+        transform: Affine,
+        brush: &fixed::Brush,
+        shape: &impl Shape,
+    ) {
+        if let Some(stroke) = stroke {
+            self.stroke(stroke, transform, brush, None, shape);
+        } else {
+            self.fill(Fill::NonZero, transform, brush, None, shape);
+        }
+    }
+}
+
+impl Renderer {
+    /// Renders the animation at a given frame to a new scene.
+    pub fn render_to_vello_scene(
+        &mut self,
+        animation: &Composition,
+        frame: f64,
+        transform: Affine,
+        alpha: f64,
+    ) -> vello::Scene {
+        let mut scene = vello::Scene::new();
+        self.append(animation, frame, transform, alpha, &mut scene);
+        scene
+    }
+}
diff --git a/shared/foreign-lottie/src/schema/animated_properties/animated_property.rs b/shared/foreign-lottie/src/schema/animated_properties/animated_property.rs
new file mode 100644
index 0000000..60d9c31
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/animated_properties/animated_property.rs
@@ -0,0 +1,41 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use super::keyframe::Keyframe;
+use crate::schema::helpers::int_boolean::BoolInt;
+use serde::de::DeserializeOwned;
+use serde::{Deserialize, Serialize};
+
+/// An animatable property that holds an array of numbers.
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct AnimatedProperty<StaticType> {
+    /// Property Index
+    #[serde(rename = "ix")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub property_index: Option<f64>,
+    /// Whether the property is animated.
+    #[serde(rename = "a")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub animated: Option<BoolInt>,
+    /// Expression for the property.
+    #[serde(rename = "x")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub expression: Option<String>,
+    /// One of the ID in the file's slots
+    #[serde(rename = "sid")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub slot_id: Option<String>,
+    #[serde(rename = "k")]
+    #[serde(bound = "StaticType: Serialize + DeserializeOwned")]
+    pub value: AnimatedPropertyK<StaticType>,
+}
+
+/// The possible values of "k" in an [`AnimatedProperty`].
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+#[serde(untagged)]
+pub enum AnimatedPropertyK<StaticType> {
+    /// Array of keyframes
+    AnimatedValue(Vec<Keyframe>),
+    /// Static value
+    Static(StaticType),
+}
diff --git a/shared/foreign-lottie/src/schema/animated_properties/color_value.rs b/shared/foreign-lottie/src/schema/animated_properties/color_value.rs
new file mode 100644
index 0000000..1b67869
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/animated_properties/color_value.rs
@@ -0,0 +1,13 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use super::animated_property::AnimatedProperty;
+use crate::schema::helpers::color::Color;
+use serde::{Deserialize, Serialize};
+
+/// An animatable property that holds a Color.
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct ColorValue {
+    #[serde(flatten)]
+    pub animated_property: AnimatedProperty<Color>,
+}
diff --git a/shared/foreign-lottie/src/schema/animated_properties/gradient_colors.rs b/shared/foreign-lottie/src/schema/animated_properties/gradient_colors.rs
new file mode 100644
index 0000000..0180dc5
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/animated_properties/gradient_colors.rs
@@ -0,0 +1,22 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use super::multi_dimensional::MultiDimensional;
+use serde::{Deserialize, Serialize};
+
+/// Represents colors and offsets in a gradient.
+///
+/// Colors are represented as a flat list interleaving offsets and color
+/// components. There are two possible layouts:
+/// - Without alpha, the colors are a sequence of offset, r, g, b
+/// - With alpha, same as above but at the end of the list there is a sequence
+///   of offset, alpha
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct GradientColors {
+    /// Colors in the gradient.
+    #[serde(rename = "k")]
+    pub colors: MultiDimensional,
+    /// Number of colors in k.
+    #[serde(rename = "p")]
+    pub count: usize,
+}
diff --git a/shared/foreign-lottie/src/schema/animated_properties/keyframe.rs b/shared/foreign-lottie/src/schema/animated_properties/keyframe.rs
new file mode 100644
index 0000000..11921b8
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/animated_properties/keyframe.rs
@@ -0,0 +1,22 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use super::keyframe_base::KeyframeBase;
+use serde::{Deserialize, Serialize};
+
+/// Keyframes specifies the value at a specific time and the interpolation
+/// function to reach the next keyframe.
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct Keyframe {
+    #[serde(flatten)]
+    pub base: KeyframeBase,
+    /// Value at this keyframe. Note that if the property is a scalar, keyframe
+    /// values are still represented as arrays.
+    #[serde(rename = "s")]
+    pub value: Vec<f64>,
+    /// Value at the end of the keyframe. Note that this is deprecated, and you
+    /// should use "s" from the next keyframe to get this value.
+    #[serde(rename = "e")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub end_value_deprecated: Option<Vec<f64>>,
+}
diff --git a/shared/foreign-lottie/src/schema/animated_properties/keyframe_base.rs b/shared/foreign-lottie/src/schema/animated_properties/keyframe_base.rs
new file mode 100644
index 0000000..35c0067
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/animated_properties/keyframe_base.rs
@@ -0,0 +1,29 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use super::keyframe_bezier_handle::KeyframeBezierHandle;
+use crate::schema::helpers::int_boolean::BoolInt;
+use serde::{Deserialize, Serialize};
+
+/// A Keyframes specifies the value at a specific time and the interpolation
+/// function to reach the next keyframe.
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct KeyframeBase {
+    /// Time
+    #[serde(rename = "t")]
+    pub time: f64,
+    /// Hold
+    #[serde(rename = "h")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub hold: Option<BoolInt>,
+    /// In tangent of the keyframe.
+    /// Easing tangent going into the next keyframe.
+    #[serde(rename = "i")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub in_tangent: Option<KeyframeBezierHandle>,
+    /// Out tangent of the keyframe.
+    /// Easing tangent leaving the current keyframe.
+    #[serde(rename = "o")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub out_tangent: Option<KeyframeBezierHandle>,
+}
diff --git a/shared/foreign-lottie/src/schema/animated_properties/keyframe_bezier_handle.rs b/shared/foreign-lottie/src/schema/animated_properties/keyframe_bezier_handle.rs
new file mode 100644
index 0000000..bc70aa3
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/animated_properties/keyframe_bezier_handle.rs
@@ -0,0 +1,29 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde::{Deserialize, Serialize};
+
+/// Represents a keyframe bezier handle.
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct KeyframeBezierHandle {
+    /// X-coordinate of the handle.
+    /// - 0 means start time of the keyframe.
+    /// - 1 means time of the next keyframe.
+    #[serde(rename = "x")]
+    pub x_coordinate: KeyframeComponent,
+    /// Y-coordinate of the handle.
+    /// - 0 means start value of the keyframe.
+    /// - 1 means value at the next keyframe.
+    #[serde(rename = "y")]
+    pub y_coordinate: KeyframeComponent,
+}
+
+/// Represents a component of the keyframe.
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+#[serde(untagged)]
+pub enum KeyframeComponent {
+    /// Array of component values.
+    ArrayOfValues(Vec<f64>),
+    /// Single component value.
+    SingleValue(f64),
+}
diff --git a/shared/foreign-lottie/src/schema/animated_properties/mod.rs b/shared/foreign-lottie/src/schema/animated_properties/mod.rs
new file mode 100644
index 0000000..76ee2fc
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/animated_properties/mod.rs
@@ -0,0 +1,16 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+pub mod animated_property;
+pub mod color_value;
+pub mod gradient_colors;
+pub mod keyframe;
+pub mod keyframe_base;
+pub mod keyframe_bezier_handle;
+pub mod multi_dimensional;
+pub mod position;
+pub mod position_keyframe;
+pub mod shape_keyframe;
+pub mod shape_property;
+pub mod split_vector;
+pub mod value;
diff --git a/shared/foreign-lottie/src/schema/animated_properties/multi_dimensional.rs b/shared/foreign-lottie/src/schema/animated_properties/multi_dimensional.rs
new file mode 100644
index 0000000..60ebcc2
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/animated_properties/multi_dimensional.rs
@@ -0,0 +1,19 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use super::animated_property::AnimatedProperty;
+use serde::{Deserialize, Serialize};
+
+/// An animatable property that holds an array of numbers
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct MultiDimensional {
+    #[serde(flatten)]
+    pub animated_property: AnimatedProperty<Vec<f64>>,
+
+    /// Number of components in the value arrays.
+    /// If present values will be truncated or expanded to match this length
+    /// when accessed from expressions.
+    #[serde(rename = "l")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub length: Option<f64>,
+}
diff --git a/shared/foreign-lottie/src/schema/animated_properties/position.rs b/shared/foreign-lottie/src/schema/animated_properties/position.rs
new file mode 100644
index 0000000..bfda635
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/animated_properties/position.rs
@@ -0,0 +1,39 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use super::position_keyframe::PositionKeyframe;
+use crate::schema::helpers::int_boolean::BoolInt;
+use serde::{Deserialize, Serialize};
+
+/// An animatable property to represent a position in space
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct Position {
+    /// The index of the property.
+    #[serde(rename = "ix")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub property_index: Option<f64>,
+    /// Whether the property is animated
+    #[serde(rename = "a")]
+    pub animated: Option<BoolInt>,
+    /// The expression for the property.
+    #[serde(rename = "x")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub expression: Option<String>,
+    /// Number of components in the value arrays.
+    /// If present, values will be truncated or expanded to match this length
+    /// when accessed from expressions.
+    #[serde(rename = "l")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub length: Option<f64>,
+    /// The value variant (Animated or Static).
+    #[serde(rename = "k")]
+    pub value: PositionValueK,
+}
+
+/// The possible values of "k" in a [`Position`].
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+#[serde(untagged)]
+pub enum PositionValueK {
+    Animated(Vec<PositionKeyframe>),
+    Static(Vec<f64>),
+}
diff --git a/shared/foreign-lottie/src/schema/animated_properties/position_keyframe.rs b/shared/foreign-lottie/src/schema/animated_properties/position_keyframe.rs
new file mode 100644
index 0000000..67b65f2
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/animated_properties/position_keyframe.rs
@@ -0,0 +1,20 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use super::keyframe::Keyframe;
+use serde::{Deserialize, Serialize};
+
+/// Position Keyframe
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct PositionKeyframe {
+    #[serde(flatten)]
+    pub keyframe: Keyframe,
+    /// In-Tangent for values (e.g., moving position around a curved path).
+    #[serde(rename = "ti")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub value_in_tangent: Option<Vec<f64>>,
+    /// Out-Tangent for values (e.g., moving position around a curved path).
+    #[serde(rename = "to")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub value_out_tangent: Option<Vec<f64>>,
+}
diff --git a/shared/foreign-lottie/src/schema/animated_properties/shape_keyframe.rs b/shared/foreign-lottie/src/schema/animated_properties/shape_keyframe.rs
new file mode 100644
index 0000000..c559821
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/animated_properties/shape_keyframe.rs
@@ -0,0 +1,25 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use super::keyframe_base::KeyframeBase;
+use crate::schema::helpers::bezier::Bezier;
+use serde::{Deserialize, Serialize};
+
+/// Keyframe holding Bezier objects
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct ShapeKeyframe {
+    #[serde(flatten)]
+    pub base: KeyframeBase,
+    /// Starting point of this keyframe. This is required for all keyframes, except the last keyframe.
+    /// The last keyframe may omit this value, in which case the previous keyframe's "e" is used (or "s")
+    /// if not present.
+    #[serde(rename = "s")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub start: Option<Vec<Bezier>>,
+    /// Ending point of this keyframe. Each keyframe may store it's own end, to allow for non-continuous animations.
+    /// This means the ending point of one frame is not guaranteed to match the starting point of the next.
+    /// This is always optional, and never required.
+    #[serde(rename = "e")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub end: Option<Vec<Bezier>>,
+}
diff --git a/shared/foreign-lottie/src/schema/animated_properties/shape_property.rs b/shared/foreign-lottie/src/schema/animated_properties/shape_property.rs
new file mode 100644
index 0000000..78db1fb
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/animated_properties/shape_property.rs
@@ -0,0 +1,77 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use crate::schema::helpers::bezier::Bezier;
+use crate::schema::helpers::int_boolean::BoolInt;
+use serde::de::{self, Deserializer};
+use serde::{Deserialize, Serialize};
+
+use super::shape_keyframe::ShapeKeyframe;
+
+/// An animatable property that holds a Bezier
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct ShapeProperty {
+    /// The index of the property.
+    #[serde(rename = "ix")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub property_index: Option<f64>,
+    /// Whether the property is animated
+    #[serde(rename = "a")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub animated: Option<BoolInt>,
+    /// The expression for the property.
+    #[serde(rename = "x")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub expression: Option<String>,
+    /// See [`ShapePropertyK`]
+    #[serde(rename = "k")]
+    pub value: ShapePropertyK,
+}
+
+/// The possible values of "k" in a [`ShapeProperty`].
+/// Either a static bezier held, or an animation with keyframes defined.
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+#[serde(untagged)]
+pub enum ShapePropertyK {
+    #[serde(deserialize_with = "deserialize_keyframes")]
+    Animated(Vec<ShapeKeyframe>),
+    Static(Bezier),
+}
+
+/// Custom deserializer ensures that every keyframe has a "s" start, except only the last keyframe which may omit this.
+pub fn deserialize_keyframes<'de, D>(deserializer: D) -> Result<Vec<ShapeKeyframe>, D::Error>
+where
+    D: Deserializer<'de>,
+{
+    // Deserialize the keyframes & handle empty case
+    let keyframes = Vec::<ShapeKeyframe>::deserialize(deserializer)?;
+    if keyframes.is_empty() {
+        return Ok(keyframes);
+    }
+
+    // Validate that all keyframes until the last have a start property
+    if !keyframes[0..(keyframes.len() - 1)]
+        .iter()
+        .all(|keyframe| keyframe.start.is_some())
+    {
+        return Err(de::Error::custom(
+            "Animated Shape Keyframe found with missing 's' start property. Only the last keyframe may omit this.",
+        ));
+    }
+
+    // Early return if last keyframe has a start value.
+    if let Some(last_keyframe) = keyframes.last()
+        && last_keyframe.start.is_some()
+    {
+        return Ok(keyframes);
+    }
+
+    // The last keyframe has no start value - so there must be at least one other keyframe present.
+    if keyframes.len() < 2 {
+        Err(de::Error::custom(
+            "Last Animated Shape Keyframe 's' was omitted where only one keyframe is present.",
+        ))
+    } else {
+        Ok(keyframes)
+    }
+}
diff --git a/shared/foreign-lottie/src/schema/animated_properties/split_vector.rs b/shared/foreign-lottie/src/schema/animated_properties/split_vector.rs
new file mode 100644
index 0000000..35da52a
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/animated_properties/split_vector.rs
@@ -0,0 +1,27 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use super::value::FloatValue;
+use serde::{Deserialize, Serialize};
+
+/// An animatable property that is split into individually animated components.
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct SplitVector {
+    /// Flag that is true for multidimensionals with individually animated
+    /// components.
+    #[serde(rename = "s")]
+    pub split: bool,
+
+    /// X component.
+    #[serde(rename = "x")]
+    pub x: FloatValue,
+
+    /// Y component.
+    #[serde(rename = "y")]
+    pub y: FloatValue,
+
+    /// Z component.
+    #[serde(rename = "z")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub z: Option<FloatValue>,
+}
diff --git a/shared/foreign-lottie/src/schema/animated_properties/value.rs b/shared/foreign-lottie/src/schema/animated_properties/value.rs
new file mode 100644
index 0000000..25f7f69
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/animated_properties/value.rs
@@ -0,0 +1,14 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use super::animated_property::AnimatedProperty;
+use serde::{Deserialize, Serialize};
+
+/// aka Value, in the Schema.
+///
+/// An animatable property that holds a float.
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct FloatValue {
+    #[serde(flatten)]
+    pub animated_property: AnimatedProperty<f64>,
+}
diff --git a/shared/foreign-lottie/src/schema/animation/animation.rs b/shared/foreign-lottie/src/schema/animation/animation.rs
new file mode 100644
index 0000000..fd2f3bd
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/animation/animation.rs
@@ -0,0 +1,85 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use crate::schema::{
+    animation::composition::Composition,
+    assets::AnyAsset,
+    helpers::{int_boolean::BoolInt, visual_object::VisualObject},
+    layers::AnyLayer,
+};
+use serde::{Deserialize, Serialize};
+use std::fmt::Display;
+
+/// Top level object, describing the animation
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct Animation {
+    /// Visual object properties
+    #[serde(flatten)]
+    pub visual_object: VisualObject,
+    /// Composition properties
+    #[serde(flatten)]
+    pub composition: Composition,
+    /// Bodymovin version
+    #[serde(rename = "v")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub version: Option<String>,
+    /// Specification version
+    #[serde(rename = "ver")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub ver: Option<u32>,
+    /// Framerate in frames per second
+    #[serde(rename = "fr")]
+    pub frame_rate: f64,
+    /// "In Point", which frame the animation starts at (usually 0)
+    #[serde(rename = "ip")]
+    pub in_point: f64,
+    /// "Out Point", which frame the animation stops/loops at, which makes this
+    /// the duration in frames when `ip` is 0
+    #[serde(rename = "op")]
+    pub out_point: f64,
+    /// Width of the animation
+    #[serde(rename = "w")]
+    pub width: usize,
+    /// Height of the animation
+    #[serde(rename = "h")]
+    pub height: usize,
+    /// Whether the animation has 3D layers
+    #[serde(rename = "ddd", default)]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub three_dimensional: Option<BoolInt>,
+    /// List of assets that can be referenced by layers
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub assets: Option<Vec<AnyAsset>>,
+    // TODO: comps
+    // TODO: fonts
+    // TODO: chars
+    // TODO: meta
+    // TODO: metadata
+    // TODO: markers
+    // TODO: mb
+    // TODO: slots
+}
+
+impl Animation {
+    pub fn from_slice(v: &[u8]) -> Result<Animation, serde_json::Error> {
+        serde_json::from_slice(v)
+    }
+
+    pub fn from_json(v: serde_json::Value) -> Result<Animation, serde_json::Error> {
+        serde_json::from_value(v)
+    }
+}
+
+impl std::str::FromStr for Animation {
+    type Err = serde_json::Error;
+
+    fn from_str(s: &str) -> Result<Self, Self::Err> {
+        serde_json::from_str(s)
+    }
+}
+
+impl Display for Animation {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        write!(f, "{}", serde_json::to_string(&self).unwrap())
+    }
+}
diff --git a/shared/foreign-lottie/src/schema/animation/composition.rs b/shared/foreign-lottie/src/schema/animation/composition.rs
new file mode 100644
index 0000000..4c5a6b7
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/animation/composition.rs
@@ -0,0 +1,13 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use crate::schema::layers::AnyLayer;
+use serde::{Deserialize, Serialize};
+
+/// Base class for layer holders
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct Composition {
+    /// An array of Layers
+    #[serde(rename = "layers")]
+    pub layers: Vec<AnyLayer>,
+}
diff --git a/shared/foreign-lottie/src/schema/animation/mod.rs b/shared/foreign-lottie/src/schema/animation/mod.rs
new file mode 100644
index 0000000..de682f7
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/animation/mod.rs
@@ -0,0 +1,9 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+// todo motion-blur
+#[expect(clippy::module_inception, reason = "Schema uses this format")]
+pub mod animation;
+// todo user-metadata
+pub mod composition;
+// todo metadata
diff --git a/shared/foreign-lottie/src/schema/assets/asset.rs b/shared/foreign-lottie/src/schema/assets/asset.rs
new file mode 100644
index 0000000..fbe0e9d
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/assets/asset.rs
@@ -0,0 +1,16 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde::{Deserialize, Serialize};
+
+use crate::schema::helpers::visual_object::VisualObject;
+
+///
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct Asset {
+    /// Unique identifier used by layers when referencing this asset
+    #[serde(rename = "id")]
+    pub id: String,
+    #[serde(flatten)]
+    pub visual_object: VisualObject,
+}
diff --git a/shared/foreign-lottie/src/schema/assets/file_asset.rs b/shared/foreign-lottie/src/schema/assets/file_asset.rs
new file mode 100644
index 0000000..4ce073e
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/assets/file_asset.rs
@@ -0,0 +1,24 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use super::asset::Asset;
+use crate::schema::helpers::int_boolean::BoolInt;
+use serde::{Deserialize, Serialize};
+
+/// Asset referencing a file
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct FileAsset {
+    #[serde(flatten)]
+    pub asset: Asset,
+    /// Path to the directory containing a file
+    #[serde(rename = "u")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub dir: Option<String>,
+    /// Filename or data url
+    #[serde(rename = "p")]
+    pub file_name: String,
+    /// Whether the file is embedded
+    #[serde(rename = "e", default)]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub embedded: Option<BoolInt>,
+}
diff --git a/shared/foreign-lottie/src/schema/assets/image.rs b/shared/foreign-lottie/src/schema/assets/image.rs
new file mode 100644
index 0000000..d4a6f9b
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/assets/image.rs
@@ -0,0 +1,118 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use crate::schema::helpers::slottable_object::SlottableObject;
+
+use super::file_asset::FileAsset;
+use serde::de::Deserializer;
+use serde::{Deserialize, Serialize, Serializer};
+
+/// External image
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct Image {
+    /// File asset properties
+    #[serde(flatten)]
+    pub file_asset: FileAsset,
+    /// Slottable object properties
+    #[serde(flatten)]
+    pub slottable_object: SlottableObject,
+    /// Width of the image
+    #[serde(rename = "w")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub width: Option<f64>,
+    /// Height of the image
+    #[serde(rename = "h")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub height: Option<f64>,
+    /// Mark as part of an image sequence if present.
+    #[serde(
+        rename = "t",
+        deserialize_with = "seq_from_str",
+        serialize_with = "seq_to_str",
+        default
+    )]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub sequence: Option<bool>,
+}
+
+pub fn seq_from_str<'de, D>(deserializer: D) -> Result<Option<bool>, D::Error>
+where
+    D: Deserializer<'de>,
+{
+    let v = String::deserialize(deserializer)?;
+    if v == *"seq" {
+        Ok(Some(true))
+    } else {
+        Ok(None)
+    }
+}
+
+// Function signature must match Serde's Serialize trait, so need to suppress Clippy.
+pub fn seq_to_str<S>(v: &Option<bool>, serializer: S) -> Result<S::Ok, S::Error>
+where
+    S: Serializer,
+{
+    match v {
+        Some(true) => Serializer::serialize_str(serializer, "seq"),
+        Some(false) => Serializer::serialize_str(serializer, ""),
+        None => unimplemented!("serializer should skip if none"),
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::Image;
+    use crate::schema::{
+        assets::{asset::Asset, file_asset::FileAsset},
+        helpers::{
+            int_boolean::BoolInt, slottable_object::SlottableObject, visual_object::VisualObject,
+        },
+    };
+    use serde_json::json;
+    use std::sync::LazyLock;
+
+    static JSON: LazyLock<serde_json::Value> = LazyLock::new(|| {
+        json!(
+            {
+                "id": "my image",
+                "h": 512,
+                "w": 512,
+                "e": 1,
+                "p": "data:image/png;base64,..."
+            }
+        )
+    });
+    static IMAGE: LazyLock<Image> = LazyLock::new(|| Image {
+        slottable_object: SlottableObject::default(),
+        file_asset: FileAsset {
+            asset: Asset {
+                id: "my image".to_string(),
+                visual_object: VisualObject {
+                    name: None,
+                    match_name: None,
+                },
+            },
+            dir: None,
+            file_name: "data:image/png;base64,...".to_string(),
+            embedded: Some(BoolInt::True),
+        },
+        height: Some(512.0),
+        width: Some(512.0),
+        sequence: None,
+    });
+
+    #[test]
+    fn test_deserialize() {
+        let actual = serde_json::from_value(JSON.to_owned());
+
+        match actual {
+            Ok(actual) => assert_eq!(*IMAGE, actual),
+            Err(e) => panic!("{e}"),
+        }
+    }
+
+    #[test]
+    fn test_can_serialize() {
+        serde_json::to_value(&*IMAGE).unwrap();
+    }
+}
diff --git a/shared/foreign-lottie/src/schema/assets/mod.rs b/shared/foreign-lottie/src/schema/assets/mod.rs
new file mode 100644
index 0000000..e242ebd
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/assets/mod.rs
@@ -0,0 +1,20 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+pub mod asset;
+pub mod file_asset;
+pub mod image;
+pub mod precomposition;
+
+use self::image::Image;
+use self::precomposition::Precomposition;
+use serde::{Deserialize, Serialize};
+
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+#[serde(untagged)]
+pub enum AnyAsset {
+    Image(Image),
+    Precomposition(Precomposition),
+    // unimplemented - Sound(Sound),
+    // unimplemented - DataSource(DataSource),
+}
diff --git a/shared/foreign-lottie/src/schema/assets/precomposition.rs b/shared/foreign-lottie/src/schema/assets/precomposition.rs
new file mode 100644
index 0000000..07a6859
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/assets/precomposition.rs
@@ -0,0 +1,24 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use super::asset::Asset;
+use crate::schema::animation::composition::Composition;
+use crate::schema::helpers::int_boolean::BoolInt;
+use serde::{Deserialize, Serialize};
+
+/// Asset containing an animation that can be referenced by layers.
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct Precomposition {
+    #[serde(flatten)]
+    pub asset: Asset,
+    #[serde(flatten)]
+    pub composition: Composition,
+    /// Framerate in frames per second
+    #[serde(rename = "fr")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub frame_rate: Option<f64>,
+    /// Extra composition
+    #[serde(rename = "xt", default)]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub extra: Option<BoolInt>,
+}
diff --git a/shared/foreign-lottie/src/schema/constants/blend_mode.rs b/shared/foreign-lottie/src/schema/constants/blend_mode.rs
new file mode 100644
index 0000000..764b304
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/constants/blend_mode.rs
@@ -0,0 +1,28 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde_repr::{Deserialize_repr, Serialize_repr};
+
+/// Layer and shape blend mode
+#[repr(u8)]
+#[derive(Deserialize_repr, Serialize_repr, Debug, Clone, PartialEq)]
+pub enum BlendMode {
+    Normal = 0,
+    Multiply = 1,
+    Screen = 2,
+    Overlay = 3,
+    Darken = 4,
+    Lighten = 5,
+    ColorDodge = 6,
+    ColorBurn = 7,
+    HardLight = 8,
+    SoftLight = 9,
+    Difference = 10,
+    Exclusion = 11,
+    Hue = 12,
+    Saturation = 13,
+    Color = 14,
+    Luminosity = 15,
+    Add = 16,
+    HardMix = 17,
+}
diff --git a/shared/foreign-lottie/src/schema/constants/composite.rs b/shared/foreign-lottie/src/schema/constants/composite.rs
new file mode 100644
index 0000000..f48778a
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/constants/composite.rs
@@ -0,0 +1,12 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde_repr::{Deserialize_repr, Serialize_repr};
+
+/// How to stack copies in a repeater
+#[repr(u8)]
+#[derive(Deserialize_repr, Serialize_repr, Debug, Clone, PartialEq)]
+pub enum Composite {
+    Above = 1,
+    Below = 2,
+}
diff --git a/shared/foreign-lottie/src/schema/constants/fill_rule.rs b/shared/foreign-lottie/src/schema/constants/fill_rule.rs
new file mode 100644
index 0000000..07b2f49
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/constants/fill_rule.rs
@@ -0,0 +1,15 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde_repr::{Deserialize_repr, Serialize_repr};
+
+/// Rule used to handle multiple shapes rendered with the same fill object
+#[repr(u8)]
+#[derive(Deserialize_repr, Serialize_repr, Debug, Clone, PartialEq)]
+pub enum FillRule {
+    /// Everything is colored (You can think of this as an OR)
+    NonZero = 1,
+    /// Colored based on intersections and path direction, can be used to
+    /// create "holes"
+    EvenOdd = 2,
+}
diff --git a/shared/foreign-lottie/src/schema/constants/font_path_origin.rs b/shared/foreign-lottie/src/schema/constants/font_path_origin.rs
new file mode 100644
index 0000000..fd7d7b6
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/constants/font_path_origin.rs
@@ -0,0 +1,14 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde_repr::{Deserialize_repr, Serialize_repr};
+
+///
+#[repr(u8)]
+#[derive(Deserialize_repr, Serialize_repr, Debug, Clone, PartialEq)]
+pub enum FontPathOrigin {
+    Local = 0,
+    CssUrl = 1,
+    ScriptUrl = 2,
+    FontUrl = 3,
+}
diff --git a/shared/foreign-lottie/src/schema/constants/gradient_type.rs b/shared/foreign-lottie/src/schema/constants/gradient_type.rs
new file mode 100644
index 0000000..948dc4e
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/constants/gradient_type.rs
@@ -0,0 +1,12 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde_repr::{Deserialize_repr, Serialize_repr};
+
+/// Type of a gradient
+#[repr(u8)]
+#[derive(Deserialize_repr, Serialize_repr, Debug, Clone, PartialEq)]
+pub enum GradientType {
+    Linear = 1,
+    Radial = 2,
+}
diff --git a/shared/foreign-lottie/src/schema/constants/line_cap.rs b/shared/foreign-lottie/src/schema/constants/line_cap.rs
new file mode 100644
index 0000000..430103c
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/constants/line_cap.rs
@@ -0,0 +1,16 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde_repr::{Deserialize_repr, Serialize_repr};
+
+/// Style at the end of a stoked line
+#[repr(u8)]
+#[derive(Deserialize_repr, Serialize_repr, Debug, Clone, PartialEq)]
+pub enum LineCap {
+    ///
+    Butt = 1,
+    ///
+    Round = 2,
+    ///
+    Square = 3,
+}
diff --git a/shared/foreign-lottie/src/schema/constants/line_join.rs b/shared/foreign-lottie/src/schema/constants/line_join.rs
new file mode 100644
index 0000000..e25cf84
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/constants/line_join.rs
@@ -0,0 +1,13 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde_repr::{Deserialize_repr, Serialize_repr};
+
+/// Style at a sharp corner of a stoked line
+#[repr(u8)]
+#[derive(Deserialize_repr, Serialize_repr, Debug, Clone, PartialEq)]
+pub enum LineJoin {
+    Miter = 1,
+    Round = 2,
+    Bevel = 3,
+}
diff --git a/shared/foreign-lottie/src/schema/constants/mask_mode.rs b/shared/foreign-lottie/src/schema/constants/mask_mode.rs
new file mode 100644
index 0000000..208bb37
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/constants/mask_mode.rs
@@ -0,0 +1,24 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde::{Deserialize, Serialize};
+
+/// How masks interact with each other. See <https://helpx.adobe.com/after-effects/using/alpha-channels-masks-mattes.html>.
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq, Default)]
+pub enum MaskMode {
+    #[serde(rename = "n")]
+    None,
+    #[serde(rename = "a")]
+    Add,
+    #[serde(rename = "s")]
+    Subtract,
+    #[serde(rename = "i")]
+    #[default]
+    Intersect,
+    #[serde(rename = "l")]
+    Lighten,
+    #[serde(rename = "d")]
+    Darken,
+    #[serde(rename = "f")]
+    Difference,
+}
diff --git a/shared/foreign-lottie/src/schema/constants/matte_mode.rs b/shared/foreign-lottie/src/schema/constants/matte_mode.rs
new file mode 100644
index 0000000..8f5810d
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/constants/matte_mode.rs
@@ -0,0 +1,15 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde_repr::{Deserialize_repr, Serialize_repr};
+
+/// How a layer should mask another layer
+#[repr(u8)]
+#[derive(Deserialize_repr, Serialize_repr, Debug, Clone, PartialEq)]
+pub enum MatteMode {
+    Normal = 0,
+    Alpha = 1,
+    InvertedAlpha = 2,
+    Luma = 3,
+    InvertedLuma = 4,
+}
diff --git a/shared/foreign-lottie/src/schema/constants/merge_mode.rs b/shared/foreign-lottie/src/schema/constants/merge_mode.rs
new file mode 100644
index 0000000..0de19ec
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/constants/merge_mode.rs
@@ -0,0 +1,15 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde_repr::{Deserialize_repr, Serialize_repr};
+
+/// Boolean operation on shapes
+#[repr(u8)]
+#[derive(Deserialize_repr, Serialize_repr, Debug, Clone, PartialEq)]
+pub enum MergeMode {
+    Normal = 1,
+    Add = 2,
+    Subtract = 3,
+    Intersect = 4,
+    ExcludeIntersections = 5,
+}
diff --git a/shared/foreign-lottie/src/schema/constants/mod.rs b/shared/foreign-lottie/src/schema/constants/mod.rs
new file mode 100644
index 0000000..71c6885
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/constants/mod.rs
@@ -0,0 +1,23 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+pub mod blend_mode;
+pub mod composite;
+pub mod fill_rule;
+pub mod font_path_origin;
+pub mod gradient_type;
+pub mod line_cap;
+pub mod line_join;
+pub mod mask_mode;
+pub mod matte_mode;
+pub mod merge_mode;
+pub mod shape_direction;
+pub mod star_type;
+pub mod stroke_dash_type;
+pub mod text_based;
+pub mod text_caps;
+pub mod text_grouping;
+pub mod text_justify;
+pub mod text_range_units;
+pub mod text_shape;
+pub mod trim_multiple_shapes;
diff --git a/shared/foreign-lottie/src/schema/constants/shape_direction.rs b/shared/foreign-lottie/src/schema/constants/shape_direction.rs
new file mode 100644
index 0000000..41b3eb9
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/constants/shape_direction.rs
@@ -0,0 +1,14 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde_repr::{Deserialize_repr, Serialize_repr};
+
+/// Drawing direction of the shape curve, useful for trim path
+#[repr(u8)]
+#[derive(Deserialize_repr, Serialize_repr, Debug, Clone, PartialEq)]
+pub enum ShapeDirection {
+    /// Usually clockwise
+    Normal = 1,
+    /// Usually counter clockwise
+    Reversed = 3,
+}
diff --git a/shared/foreign-lottie/src/schema/constants/star_type.rs b/shared/foreign-lottie/src/schema/constants/star_type.rs
new file mode 100644
index 0000000..3dc273c
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/constants/star_type.rs
@@ -0,0 +1,12 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde_repr::{Deserialize_repr, Serialize_repr};
+
+/// Star or Polygon
+#[repr(u8)]
+#[derive(Deserialize_repr, Serialize_repr, Debug, Clone, PartialEq)]
+pub enum StarType {
+    Star = 1,
+    Polygon = 2,
+}
diff --git a/shared/foreign-lottie/src/schema/constants/stroke_dash_type.rs b/shared/foreign-lottie/src/schema/constants/stroke_dash_type.rs
new file mode 100644
index 0000000..3ec1184
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/constants/stroke_dash_type.rs
@@ -0,0 +1,15 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde::{Deserialize, Serialize};
+
+/// Type of a dash item in a stroked line
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub enum StrokeDashType {
+    #[serde(rename = "d")]
+    Dash,
+    #[serde(rename = "g")]
+    Gap,
+    #[serde(rename = "o")]
+    Offset,
+}
diff --git a/shared/foreign-lottie/src/schema/constants/text_based.rs b/shared/foreign-lottie/src/schema/constants/text_based.rs
new file mode 100644
index 0000000..40f2d6e
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/constants/text_based.rs
@@ -0,0 +1,13 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde_repr::{Deserialize_repr, Serialize_repr};
+
+#[repr(u8)]
+#[derive(Deserialize_repr, Serialize_repr, Debug, Clone, PartialEq)]
+pub enum TextedBased {
+    Characters = 1,
+    CharacterExcludingSpaces = 2,
+    Words = 3,
+    Lines = 4,
+}
diff --git a/shared/foreign-lottie/src/schema/constants/text_caps.rs b/shared/foreign-lottie/src/schema/constants/text_caps.rs
new file mode 100644
index 0000000..2464139
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/constants/text_caps.rs
@@ -0,0 +1,13 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde_repr::{Deserialize_repr, Serialize_repr};
+
+/// Text capitalization
+#[repr(u8)]
+#[derive(Deserialize_repr, Serialize_repr, Debug, Clone, PartialEq)]
+pub enum TextCaps {
+    Regular = 0,
+    AllCaps = 1,
+    SmallCaps = 2,
+}
diff --git a/shared/foreign-lottie/src/schema/constants/text_grouping.rs b/shared/foreign-lottie/src/schema/constants/text_grouping.rs
new file mode 100644
index 0000000..6218c3d
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/constants/text_grouping.rs
@@ -0,0 +1,14 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde_repr::{Deserialize_repr, Serialize_repr};
+
+///
+#[repr(u8)]
+#[derive(Deserialize_repr, Serialize_repr, Debug, Clone, PartialEq)]
+pub enum TextGrouping {
+    Characters = 1,
+    Words = 2,
+    Lines = 3,
+    All = 4,
+}
diff --git a/shared/foreign-lottie/src/schema/constants/text_justify.rs b/shared/foreign-lottie/src/schema/constants/text_justify.rs
new file mode 100644
index 0000000..1ee8cef
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/constants/text_justify.rs
@@ -0,0 +1,17 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde_repr::{Deserialize_repr, Serialize_repr};
+
+/// Text alignment / justification
+#[repr(u8)]
+#[derive(Deserialize_repr, Serialize_repr, Debug, Clone, PartialEq)]
+pub enum TextJustify {
+    Left = 0,
+    Right = 1,
+    Center = 2,
+    JustifyWithLastLineLeft = 3,
+    JustifyWithLastLineRight = 4,
+    JustifyWithLastLineCenter = 5,
+    JustifyWithLastLineFull = 6,
+}
diff --git a/shared/foreign-lottie/src/schema/constants/text_range_units.rs b/shared/foreign-lottie/src/schema/constants/text_range_units.rs
new file mode 100644
index 0000000..9e279ab
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/constants/text_range_units.rs
@@ -0,0 +1,12 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde_repr::{Deserialize_repr, Serialize_repr};
+
+/// Unit type for a text selector
+#[repr(u8)]
+#[derive(Deserialize_repr, Serialize_repr, Debug, Clone, PartialEq)]
+pub enum TextRangeUnits {
+    Percent = 1,
+    Index = 2,
+}
diff --git a/shared/foreign-lottie/src/schema/constants/text_shape.rs b/shared/foreign-lottie/src/schema/constants/text_shape.rs
new file mode 100644
index 0000000..c9c932d
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/constants/text_shape.rs
@@ -0,0 +1,17 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde_repr::{Deserialize_repr, Serialize_repr};
+
+/// Defines the function used to determine the interpolating factor on a text
+/// range selector.
+#[repr(u8)]
+#[derive(Deserialize_repr, Serialize_repr, Debug, Clone, PartialEq)]
+pub enum TextShape {
+    Square = 1,
+    RampUp = 2,
+    RampDown = 3,
+    Triangle = 4,
+    Round = 5,
+    Smooth = 6,
+}
diff --git a/shared/foreign-lottie/src/schema/constants/trim_multiple_shapes.rs b/shared/foreign-lottie/src/schema/constants/trim_multiple_shapes.rs
new file mode 100644
index 0000000..ff671db
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/constants/trim_multiple_shapes.rs
@@ -0,0 +1,14 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde_repr::{Deserialize_repr, Serialize_repr};
+
+/// How to handle multiple shapes in trim path
+#[repr(u8)]
+#[derive(Deserialize_repr, Serialize_repr, Debug, Clone, PartialEq)]
+pub enum TrimMultipleShapes {
+    ///
+    Individually = 1,
+    ///
+    Simultaneously = 2,
+}
diff --git a/shared/foreign-lottie/src/schema/helpers/bezier.rs b/shared/foreign-lottie/src/schema/helpers/bezier.rs
new file mode 100644
index 0000000..b3ecb4c
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/helpers/bezier.rs
@@ -0,0 +1,27 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde::{Deserialize, Serialize};
+
+/// This represents a cubic bezier path.
+/// Note that for interpolation to work correctly all bezier values in a
+/// property's keyframe must have the same number of points.
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct Bezier {
+    /// Whether the bezier forms a closed loop
+    #[serde(rename = "c")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub closed: Option<bool>,
+
+    /// Points along the curve
+    #[serde(rename = "v")]
+    pub vertices: Vec<[f64; 2]>,
+
+    /// Cubic control points, incoming tangent
+    #[serde(rename = "i")]
+    pub in_tangents: Vec<[f64; 2]>,
+
+    /// Cubic control points, outgoing tangent
+    #[serde(rename = "o")]
+    pub out_tangents: Vec<[f64; 2]>,
+}
diff --git a/shared/foreign-lottie/src/schema/helpers/color.rs b/shared/foreign-lottie/src/schema/helpers/color.rs
new file mode 100644
index 0000000..db6b28b
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/helpers/color.rs
@@ -0,0 +1,10 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+/// Colors are represented as arrays with values between 0 and 1 for the RGB
+/// components. for example:
+/// [1, 0, 0]
+/// [1, 0.5, 0]
+/// Note sometimes you might find color values with 4 components (the 4th being
+/// alpha) but most player ignore the last component.
+pub type Color = Vec<f64>;
diff --git a/shared/foreign-lottie/src/schema/helpers/int_boolean.rs b/shared/foreign-lottie/src/schema/helpers/int_boolean.rs
new file mode 100644
index 0000000..0582c2a
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/helpers/int_boolean.rs
@@ -0,0 +1,15 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde_repr::{Deserialize_repr, Serialize_repr};
+
+/// Represents boolean value… 0 is false, 1 is true.
+#[derive(Deserialize_repr, Serialize_repr, PartialEq, Default, Debug, Clone)]
+#[repr(u8)]
+pub enum BoolInt {
+    /// 0 = False
+    #[default]
+    False = 0,
+    /// 1 = True
+    True = 1,
+}
diff --git a/shared/foreign-lottie/src/schema/helpers/marker.rs b/shared/foreign-lottie/src/schema/helpers/marker.rs
new file mode 100644
index 0000000..b67e95b
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/helpers/marker.rs
@@ -0,0 +1,24 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde::{Deserialize, Serialize};
+
+/// Defines named portions of the composition
+
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct Marker {
+    /// Comment
+    #[serde(rename = "cm")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub comment: Option<String>,
+
+    /// Time
+    #[serde(rename = "tm")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub time: Option<f64>,
+
+    /// Duration
+    #[serde(rename = "dr")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub duration: Option<f64>,
+}
diff --git a/shared/foreign-lottie/src/schema/helpers/mask.rs b/shared/foreign-lottie/src/schema/helpers/mask.rs
new file mode 100644
index 0000000..2875306
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/helpers/mask.rs
@@ -0,0 +1,52 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use crate::schema::animated_properties::shape_property::ShapeProperty;
+use crate::schema::animated_properties::value::FloatValue;
+use crate::schema::constants::mask_mode::MaskMode;
+use serde::{Deserialize, Serialize};
+
+/// A layer can have an array of masks that clip the contents of the layer to a
+/// shape.
+///
+/// This is similar to mattes, but there are a few differences.
+///
+/// With mattes, you use a layer to define the clipping area, while with masks
+/// you use an animated bezier curve.
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct Mask {
+    /// Name, as seen from editors and the like
+    #[serde(rename = "nm")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub name: Option<String>,
+
+    /// Match name, used in expressions
+    #[serde(rename = "mn")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub match_name: Option<String>,
+
+    /// Inverted
+    #[serde(rename = "inv")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub inverted: Option<bool>,
+
+    /// Shape
+    #[serde(rename = "pt")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub shape: Option<ShapeProperty>,
+
+    /// Opacity
+    #[serde(rename = "o")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub opacity: Option<FloatValue>,
+
+    /// Mode
+    #[serde(rename = "mode")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub mode: Option<MaskMode>,
+
+    /// Expand
+    #[serde(rename = "x")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub expand: Option<FloatValue>,
+}
diff --git a/shared/foreign-lottie/src/schema/helpers/mod.rs b/shared/foreign-lottie/src/schema/helpers/mod.rs
new file mode 100644
index 0000000..a168657
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/helpers/mod.rs
@@ -0,0 +1,11 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+pub mod bezier;
+pub mod color;
+pub mod int_boolean;
+pub mod marker;
+pub mod mask;
+pub mod slottable_object;
+pub mod transform;
+pub mod visual_object;
diff --git a/shared/foreign-lottie/src/schema/helpers/slottable_object.rs b/shared/foreign-lottie/src/schema/helpers/slottable_object.rs
new file mode 100644
index 0000000..c232b59
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/helpers/slottable_object.rs
@@ -0,0 +1,13 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde::{Deserialize, Serialize};
+
+/// Object that may have its value replaced with a slot value
+#[derive(Deserialize, Serialize, PartialEq, Default, Debug, Clone)]
+pub struct SlottableObject {
+    /// Identifier to look up the slot
+    #[serde(rename = "sid")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub id: Option<String>,
+}
diff --git a/shared/foreign-lottie/src/schema/helpers/transform.rs b/shared/foreign-lottie/src/schema/helpers/transform.rs
new file mode 100644
index 0000000..4c8dbe6
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/helpers/transform.rs
@@ -0,0 +1,78 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+//! Transform - <https://lottiefiles.github.io/lottie-docs/concepts/#transform>
+
+use crate::schema::animated_properties::multi_dimensional::MultiDimensional;
+use crate::schema::animated_properties::position::Position;
+use crate::schema::animated_properties::split_vector::SplitVector;
+use crate::schema::animated_properties::value::FloatValue;
+use serde::{Deserialize, Serialize};
+
+#[derive(Serialize, Deserialize, Debug, Clone, PartialEq)]
+pub struct Transform {
+    /// Position (relative to its parent) around which transformations are
+    /// applied (ie: center for rotation / scale)
+    #[serde(rename = "a")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub anchor_point: Option<Position>,
+    /// Position / Translation
+    #[serde(rename = "p")]
+    pub position: AnyTransformP,
+    /// Scale factor, 100 for no scaling
+    #[serde(rename = "s")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub scale: Option<MultiDimensional>,
+    /// Rotation in degrees, clockwise
+    // todo: need untagged enum for split vector variant
+    #[serde(rename = "r")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub rotation: Option<AnyTransformR>,
+    /// Skew amount as an angle in degrees
+    #[serde(rename = "sk")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub skew: Option<FloatValue>,
+    /// Direction at which skew is applied, in degrees (0 skews along the X
+    /// axis, 90 along the Y axis)
+    #[serde(rename = "sa")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub skew_axis: Option<FloatValue>,
+    /// Opacity, 100 for fully opaque
+    #[serde(rename = "o")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub opacity: Option<FloatValue>,
+}
+
+/// The possible values of "p" in a [`Transform`].
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+#[serde(untagged)]
+pub enum AnyTransformP {
+    /// Position / Translation
+    Position(Position),
+    /// Position / Translation with split components
+    SplitPosition(SplitVector),
+}
+
+/// The possible values of "r" in a [`Transform`].
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+#[serde(untagged)]
+#[expect(clippy::large_enum_variant, reason = "Deferred")]
+pub enum AnyTransformR {
+    /// Rotation in degrees, clockwise
+    Rotation(FloatValue),
+    /// Split rotation components
+    SplitRotation {
+        /// Split rotation X component.
+        #[serde(rename = "x")]
+        x_rotation: FloatValue,
+        /// Split rotation Y component.
+        #[serde(rename = "y")]
+        y_rotation: FloatValue,
+        /// Split rotation component, equivalent to r when not split.
+        #[serde(rename = "z")]
+        z_rotation: FloatValue,
+        /// Orientation
+        #[serde(rename = "or")]
+        orientation: MultiDimensional,
+    },
+}
diff --git a/shared/foreign-lottie/src/schema/helpers/visual_object.rs b/shared/foreign-lottie/src/schema/helpers/visual_object.rs
new file mode 100644
index 0000000..ad2036c
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/helpers/visual_object.rs
@@ -0,0 +1,16 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde::{Deserialize, Serialize};
+
+#[derive(Deserialize, Serialize, PartialEq, Default, Debug, Clone)]
+pub struct VisualObject {
+    /// Name, as seen from editors and the like
+    #[serde(rename = "nm")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub name: Option<String>,
+    /// Match name, used in expressions
+    #[serde(rename = "mn")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub match_name: Option<String>,
+}
diff --git a/shared/foreign-lottie/src/schema/layers/image.rs b/shared/foreign-lottie/src/schema/layers/image.rs
new file mode 100644
index 0000000..7c3d7f1
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/layers/image.rs
@@ -0,0 +1,22 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde::{Deserialize, Serialize};
+
+use crate::schema::{
+    animated_properties::value::FloatValue,
+    helpers::{int_boolean::BoolInt, visual_object::VisualObject},
+};
+
+use super::visual::VisualLayer;
+
+/// Renders a Precomposition
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct ImageLayer {
+    /// Visual layer data
+    #[serde(flatten)]
+    pub visual_layer: VisualLayer,
+    /// ID of the image asset as specified in the assets
+    #[serde(rename = "refId")]
+    pub ref_id: String,
+}
diff --git a/shared/foreign-lottie/src/schema/layers/layer.rs b/shared/foreign-lottie/src/schema/layers/layer.rs
new file mode 100644
index 0000000..0cd753c
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/layers/layer.rs
@@ -0,0 +1,53 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde::{Deserialize, Serialize};
+
+use crate::schema::{
+    animated_properties::value::FloatValue,
+    helpers::{int_boolean::BoolInt, visual_object::VisualObject},
+};
+
+use super::visual::VisualLayer;
+
+/// Renders a Precomposition
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct Layer {
+    /// Visual object dat   K
+    #[serde(flatten)]
+    pub visual_object: VisualObject,
+    /// Whether the layer is 3D. Lottie doesn't actually support 3D stuff so
+    /// this should always be 0
+    #[serde(rename = "ddd", default)]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub three_dimensional: Option<BoolInt>,
+    /// Whether the layer is hidden
+    #[serde(rename = "hd", default)]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub hidden: Option<bool>,
+    /// Layer type
+    #[serde(rename = "ty")]
+    pub layer_type: u8,
+    /// Layer index for parenting
+    #[serde(rename = "ind")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub index: Option<usize>,
+    /// Parent index for parenting
+    #[serde(rename = "parent")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub parent_index: Option<usize>,
+    /// Time Stretch
+    #[serde(rename = "sr")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub time_stretch: Option<f64>,
+    /// Frame when the layer becomes visible
+    #[serde(rename = "ip")]
+    pub in_point: f64,
+    /// Frame when the layer becomes invisible
+    #[serde(rename = "op")]
+    pub out_point: f64,
+    /// Start Time
+    #[serde(skip_serializing_if = "Option::is_none")]
+    #[serde(rename = "st")]
+    pub start_time: Option<f64>,
+}
diff --git a/shared/foreign-lottie/src/schema/layers/mod.rs b/shared/foreign-lottie/src/schema/layers/mod.rs
new file mode 100644
index 0000000..ccbcd56
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/layers/mod.rs
@@ -0,0 +1,336 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+pub mod image;
+pub mod layer;
+pub mod null;
+pub mod precomposition;
+pub mod shape;
+pub mod solid;
+pub mod visual;
+
+use self::solid::SolidLayer;
+use self::visual::VisualLayer;
+use image::ImageLayer;
+use null::NullLayer;
+use precomposition::PrecompositionLayer;
+use serde::{Deserialize, Deserializer, Serialize};
+use shape::ShapeLayer;
+
+/// There are several layer types, which is specified by the 'ty' attribute. All
+/// layers share the properties in `layers::common::Properties`.
+#[derive(Serialize, Debug, Clone, PartialEq)]
+#[serde(untagged)]
+pub enum AnyLayer {
+    /// Renders a Precomposition
+    Precomposition(PrecompositionLayer),
+    /// Static rectangle filling the canvas with a single color
+    Solid(SolidLayer),
+    /// No contents, only used for parenting.
+    /// Has an array of shapes
+    Shape(ShapeLayer),
+    /// Null
+    Null(NullLayer),
+    // unimplemented - Text(TextLayer),
+    Image(ImageLayer),
+    // unimplemented - Audio(AudioLayer),
+    // unimplemented - VideoPlaceholder(VideoPlaceholderLayer)
+    // unimplemented - Video(VideoLayer)
+    // unimplemented - ImagePlaceholder(ImagePlaceholderLayer)
+    // unimplemented - Guide(GuideLayer)
+    // unimplemented - Adjustment(AdjustmentLayer)
+    // unimplemented - Camera(CameraLayer)
+    // unimplemented - Light(LightLayer)
+    // unimplemented - Data(DataLayer)
+}
+
+impl<'de> Deserialize<'de> for AnyLayer {
+    fn deserialize<D>(deserializer: D) -> Result<Self, D::Error>
+    where
+        D: Deserializer<'de>,
+    {
+        use serde::de::Error;
+
+        let value = serde_json::Value::deserialize(deserializer)?;
+
+        let layer_type = value
+            .get("ty")
+            .and_then(|v| v.as_u64())
+            .ok_or_else(|| D::Error::missing_field("ty"))?;
+
+        match layer_type {
+            0 => serde_json::from_value(value)
+                .map(AnyLayer::Precomposition)
+                .map_err(D::Error::custom),
+            1 => serde_json::from_value(value)
+                .map(AnyLayer::Solid)
+                .map_err(D::Error::custom),
+            2 => serde_json::from_value(value)
+                .map(AnyLayer::Image)
+                .map_err(D::Error::custom),
+            3 => serde_json::from_value(value)
+                .map(AnyLayer::Null)
+                .map_err(D::Error::custom),
+            4 => serde_json::from_value(value)
+                .map(AnyLayer::Shape)
+                .map_err(D::Error::custom),
+            _ => Err(D::Error::custom(format!(
+                "unknown layer type: {}",
+                layer_type
+            ))),
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+
+    use crate::schema::{
+        animated_properties::{
+            animated_property::{AnimatedProperty, AnimatedPropertyK},
+            multi_dimensional::MultiDimensional,
+            position::{Position, PositionValueK},
+            value::FloatValue,
+        },
+        helpers::{
+            int_boolean::BoolInt,
+            transform::{AnyTransformP, AnyTransformR, Transform},
+            visual_object::VisualObject,
+        },
+        layers::layer::Layer,
+        shapes::{
+            AnyShape, ellipse::EllipseShape, graphic_element::GraphicElementShape,
+            group::GroupShape, shape::Shape,
+        },
+    };
+
+    use super::{AnyLayer, shape::ShapeLayer, visual::VisualLayer};
+    use serde_json::json;
+    use std::sync::LazyLock;
+
+    static JSON: LazyLock<serde_json::Value> = LazyLock::new(|| {
+        json!(
+            {
+                "ddd": 0,
+                "ty": 4,
+                "ind": 1,
+                "st": 0,
+                "ip": 0,
+                "op": 180,
+                "nm": "Ellipse",
+                "mn": "{0a36d01c-18e1-48d3-8e8f-cc093b3f24ba}",
+                "ks": {
+                    "a": {
+                        "a": 0,
+                        "k": [
+                            256,
+                            256
+                        ]
+                    },
+                    "p": {
+                        "a": 0,
+                        "k": [
+                            256,
+                            256
+                        ]
+                    },
+                    "s": {
+                        "a": 0,
+                        "k": [
+                            100,
+                            100
+                        ]
+                    },
+                    "r": {
+                        "a": 0,
+                        "k": 0
+                    },
+                    "o": {
+                        "a": 0,
+                        "k": 100
+                    }
+                },
+                "shapes": [
+                    {
+                        "ty": "gr",
+                        "nm": "Group",
+                        "mn": "{f1becc2a-49f0-4f0c-918f-bdffe4c6870f}",
+                        "it": [
+                            {
+                                "ty": "el",
+                                "nm": "Ellipse",
+                                "mn": "{2aabac6e-1dd8-41b0-b60b-baf75ccb6318}",
+                                "p": {
+                                    "a": 0,
+                                    "k": [
+                                        303.9044776119403,
+                                        324.9671641791045
+                                    ]
+                                },
+                                "s": {
+                                    "a": 0,
+                                    "k": [
+                                        205.46865671641788,
+                                        204.6089552238806
+                                    ]
+                                }
+                            }
+                        ]
+                    }
+                ]
+            }
+        )
+    });
+
+    #[expect(deprecated, reason = "Uses deprecated attributes")]
+    static LAYER: LazyLock<AnyLayer> = LazyLock::new(|| {
+        AnyLayer::Shape(ShapeLayer {
+            visual_layer: VisualLayer {
+                layer: Layer {
+                    visual_object: VisualObject {
+                        name: Some("Ellipse".to_string()),
+                        match_name: Some("{0a36d01c-18e1-48d3-8e8f-cc093b3f24ba}".to_string()),
+                    },
+                    layer_type: 4,
+                    three_dimensional: Some(BoolInt::False),
+                    index: Some(1),
+                    start_time: Some(0.0),
+                    in_point: 0.0,
+                    out_point: 180.0,
+                    hidden: None,
+                    parent_index: None,
+                    time_stretch: None,
+                },
+                transform: Transform {
+                    anchor_point: Some(Position {
+                        property_index: None,
+                        animated: Some(BoolInt::False),
+                        expression: None,
+                        length: None,
+                        value: PositionValueK::Static(vec![256.0, 256.0]),
+                    }),
+                    position: AnyTransformP::Position(Position {
+                        property_index: None,
+                        animated: Some(BoolInt::False),
+                        expression: None,
+                        length: None,
+                        value: PositionValueK::Static(vec![256.0, 256.0]),
+                    }),
+                    scale: Some(MultiDimensional {
+                        animated_property: AnimatedProperty {
+                            animated: Some(BoolInt::False),
+                            property_index: None,
+                            expression: None,
+                            slot_id: None,
+                            value: AnimatedPropertyK::Static(vec![100.0, 100.0]),
+                        },
+                        length: None,
+                    }),
+                    rotation: Some(AnyTransformR::Rotation(FloatValue {
+                        animated_property: AnimatedProperty {
+                            animated: Some(BoolInt::False),
+                            property_index: None,
+                            expression: None,
+                            slot_id: None,
+                            value: AnimatedPropertyK::Static(0.0),
+                        },
+                    })),
+                    opacity: Some(FloatValue {
+                        animated_property: AnimatedProperty {
+                            animated: Some(BoolInt::False),
+                            property_index: None,
+                            expression: None,
+                            slot_id: None,
+                            value: AnimatedPropertyK::Static(100.0),
+                        },
+                    }),
+                    skew: None,
+                    skew_axis: None,
+                },
+                matte_mode: None,
+                matte_target: None,
+                masks_properties: None,
+                rotate_to_match_anim_pos_path: None,
+                matte_layer_index: None,
+                has_mask: None,
+                motion_blur: None,
+                blend_mode: None,
+                css_class: None,
+                id: None,
+                tag_name: None,
+                tranform_before_mask_deprecated: None,
+                transform_before_mask: None,
+            },
+            shapes: vec![AnyShape::Group(GroupShape {
+                graphic_element: GraphicElementShape {
+                    visual_object: VisualObject {
+                        name: Some("Group".to_string()),
+                        match_name: Some("{f1becc2a-49f0-4f0c-918f-bdffe4c6870f}".to_string()),
+                    },
+                    index: None,
+                    hidden: None,
+                    blend_mode: None,
+                    property_index: None,
+                    css_class: None,
+                    xml_id: None,
+                },
+                num_properties: None,
+                property_index: None,
+                shapes: vec![AnyShape::Ellipse(EllipseShape {
+                    shape: Shape {
+                        graphic_element: GraphicElementShape {
+                            visual_object: VisualObject {
+                                name: Some("Ellipse".to_string()),
+                                match_name: Some(
+                                    "{2aabac6e-1dd8-41b0-b60b-baf75ccb6318}".to_string(),
+                                ),
+                            },
+                            index: None,
+                            hidden: None,
+                            blend_mode: None,
+                            property_index: None,
+                            css_class: None,
+                            xml_id: None,
+                        },
+                        direction: None,
+                    },
+                    position: Position {
+                        property_index: None,
+                        animated: Some(BoolInt::False),
+                        expression: None,
+                        length: None,
+                        value: PositionValueK::Static(vec![303.9044776119403, 324.9671641791045]),
+                    },
+                    size: MultiDimensional {
+                        animated_property: AnimatedProperty {
+                            animated: Some(BoolInt::False),
+                            property_index: None,
+                            expression: None,
+                            slot_id: None,
+                            value: AnimatedPropertyK::Static(vec![
+                                205.46865671641788,
+                                204.6089552238806,
+                            ]),
+                        },
+                        length: None,
+                    },
+                })],
+            })],
+        })
+    });
+
+    #[test]
+    fn test_deserialize() {
+        let actual = serde_json::from_value(JSON.to_owned());
+
+        match actual {
+            Ok(actual) => assert_eq!(*LAYER, actual),
+            Err(e) => panic!("{e}"),
+        }
+    }
+
+    #[test]
+    fn test_can_serialize() {
+        serde_json::to_value(&*LAYER).unwrap();
+    }
+}
diff --git a/shared/foreign-lottie/src/schema/layers/null.rs b/shared/foreign-lottie/src/schema/layers/null.rs
new file mode 100644
index 0000000..3f05b12
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/layers/null.rs
@@ -0,0 +1,11 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use super::VisualLayer;
+use serde::{Deserialize, Serialize};
+
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct NullLayer {
+    #[serde(flatten)]
+    pub visual_layer: VisualLayer,
+}
diff --git a/shared/foreign-lottie/src/schema/layers/precomposition.rs b/shared/foreign-lottie/src/schema/layers/precomposition.rs
new file mode 100644
index 0000000..44f0104
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/layers/precomposition.rs
@@ -0,0 +1,82 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde::{Deserialize, Serialize};
+
+use crate::schema::animated_properties::value::FloatValue;
+
+use super::visual::VisualLayer;
+
+/// Renders a Precomposition
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct PrecompositionLayer {
+    /// Visual layer data
+    #[serde(flatten)]
+    pub visual_layer: VisualLayer,
+    /// ID of the precomp as specified in the assets
+    #[serde(rename = "refId")]
+    pub ref_id: String,
+    /// Width of the clipping rect
+    #[serde(rename = "w")]
+    pub width: f64,
+    /// Height of the clipping rect
+    #[serde(rename = "h")]
+    pub height: f64,
+    /// Start time
+    #[serde(rename = "st")]
+    pub start_time: f64,
+    /// Time Remapping
+    #[serde(rename = "tm")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub time_remap: Option<FloatValue>,
+}
+
+#[cfg(test)]
+mod tests {
+    use crate::schema::{
+        animation::composition::Composition,
+        assets::{asset::Asset, precomposition::Precomposition},
+        helpers::{int_boolean::BoolInt, visual_object::VisualObject},
+    };
+    use serde_json::json;
+    use std::sync::LazyLock;
+
+    static JSON: LazyLock<serde_json::Value> = LazyLock::new(|| {
+        json!(
+            {
+                "id": "precomp_0",
+                "fr": 60,
+                "nm": "Example",
+                "xt": 0,
+                "layers": []
+            }
+        )
+    });
+    static PRECOMP: LazyLock<Precomposition> = LazyLock::new(|| Precomposition {
+        asset: Asset {
+            visual_object: VisualObject {
+                name: Some("Example".to_string()),
+                ..Default::default()
+            },
+            id: "precomp_0".to_string(),
+        },
+        composition: Composition { layers: vec![] },
+        frame_rate: Some(60.0),
+        extra: Some(BoolInt::False),
+    });
+
+    #[test]
+    fn test_serde_deserialize() {
+        let actual = serde_json::from_value(JSON.to_owned());
+
+        match actual {
+            Ok(actual) => assert_eq!(*PRECOMP, actual),
+            Err(e) => panic!("{e}"),
+        }
+    }
+
+    #[test]
+    fn test_can_serialize() {
+        serde_json::to_value(&*PRECOMP).unwrap();
+    }
+}
diff --git a/shared/foreign-lottie/src/schema/layers/shape.rs b/shared/foreign-lottie/src/schema/layers/shape.rs
new file mode 100644
index 0000000..818d9b4
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/layers/shape.rs
@@ -0,0 +1,19 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+//! Shapes - <https://lottiefiles.github.io/lottie-docs/shapes/>
+
+use super::visual::VisualLayer;
+use crate::schema::shapes::AnyShape;
+use serde::{Deserialize, Serialize};
+
+/// Has an array of shapes
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct ShapeLayer {
+    /// Visual layer data
+    #[serde(flatten)]
+    pub visual_layer: VisualLayer,
+    /// Has an array of shapes
+    #[serde(rename = "shapes")]
+    pub shapes: Vec<AnyShape>,
+}
diff --git a/shared/foreign-lottie/src/schema/layers/solid.rs b/shared/foreign-lottie/src/schema/layers/solid.rs
new file mode 100644
index 0000000..e18524c
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/layers/solid.rs
@@ -0,0 +1,21 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use super::visual::VisualLayer;
+use serde::{Deserialize, Serialize};
+
+/// Has an array of shapes
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct SolidLayer {
+    /// Visual layer data
+    #[serde(flatten)]
+    pub visual_layer: VisualLayer,
+    #[serde(rename = "sw")]
+    pub width: f64,
+    #[serde(rename = "sh")]
+    pub height: f64,
+    /// Color of the layer, unlike most other places, the color is a #rrggbb
+    /// hex string
+    #[serde(rename = "sc")]
+    pub color: String,
+}
diff --git a/shared/foreign-lottie/src/schema/layers/visual.rs b/shared/foreign-lottie/src/schema/layers/visual.rs
new file mode 100644
index 0000000..a809e68
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/layers/visual.rs
@@ -0,0 +1,85 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use crate::schema::constants::matte_mode::MatteMode;
+use crate::schema::helpers::int_boolean::BoolInt;
+use crate::schema::helpers::mask::Mask;
+use crate::schema::helpers::transform::Transform;
+use crate::schema::{constants::blend_mode::BlendMode, layers::layer::Layer};
+use serde::{Deserialize, Serialize};
+
+/// Common properties between layers
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct VisualLayer {
+    /// layer data
+    #[serde(flatten)]
+    pub layer: Layer,
+
+    /// Matte mode
+    #[serde(rename = "tt")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub matte_mode: Option<MatteMode>,
+    /// Matte target
+    #[serde(rename = "td", default)]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub matte_target: Option<BoolInt>,
+    /// Masks for the layer
+    #[serde(rename = "masksProperties")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub masks_properties: Option<Vec<Mask>>,
+
+    // TODO:
+    /// Effects for the layer
+    //#[serde(rename = "ef")]
+    //#[serde(skip_serializing_if = "Option::is_none")]
+    //pub effects: Option<Vec<()>>,
+    /// Layer styles
+    //#[serde(rename = "sy")]
+    //#[serde(skip_serializing_if = "Option::is_none")]
+    //pub styles: Option<Vec<()>>,
+    /// Layer transform
+    #[serde(rename = "ks")]
+    pub transform: Transform,
+    /// If 1, The layer will rotate itself to match its animated position path
+    #[serde(rename = "ao", default)]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub rotate_to_match_anim_pos_path: Option<BoolInt>,
+    /// Index of the layer used as matte, if omitted assume the layer above the
+    /// current one
+    #[serde(rename = "tp")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub matte_layer_index: Option<f64>,
+    /// Whether the layer has masks applied
+    #[serde(rename = "hasMask", default)]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub has_mask: Option<bool>,
+    /// Whether motion blur is enabled for the layer
+    #[serde(rename = "mb", default)]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub motion_blur: Option<bool>,
+    /// Blend Mode
+    #[serde(rename = "bm")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub blend_mode: Option<BlendMode>,
+    /// CSS class used by the SVG renderer
+    #[serde(rename = "cl")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub css_class: Option<String>,
+    /// id attribute used by the SVG renderer
+    #[serde(rename = "ln")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub id: Option<String>,
+    /// Tag name used by the SVG renderer
+    #[serde(rename = "tg")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub tag_name: Option<String>,
+    /// This is deprecated in favour of `transform_before_mask`
+    #[deprecated(note = "please use `transform_before_mask` instead")]
+    #[serde(rename = "cp")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub tranform_before_mask_deprecated: Option<String>,
+    /// Marks that transforms should be applied before masks
+    #[serde(rename = "ct", default)]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub transform_before_mask: Option<BoolInt>,
+}
diff --git a/shared/foreign-lottie/src/schema/mod.rs b/shared/foreign-lottie/src/schema/mod.rs
new file mode 100644
index 0000000..fb9eb4f
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/mod.rs
@@ -0,0 +1,89 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+//! The schema for a Lottie `Animation`.
+//!
+//! Raw schema: <https://lottiefiles.github.io/lottie-docs/schema/lottie.schema.json>
+
+pub mod animated_properties;
+pub mod animation;
+pub mod assets;
+pub mod constants;
+// todo effect-values
+// todo effects
+pub mod helpers;
+pub mod layers;
+pub mod shapes;
+pub mod styles;
+//todo text
+
+pub use animation::animation::Animation;
+
+#[cfg(test)]
+mod tests {
+    use crate::schema::{
+        animation::composition::Composition, helpers::visual_object::VisualObject,
+    };
+
+    use super::{Animation, helpers::int_boolean::BoolInt};
+    use serde_json::json;
+    use std::sync::LazyLock;
+
+    static JSON: LazyLock<serde_json::Value> = LazyLock::new(|| {
+        json!(
+            {
+                "v": "5.5.2",
+                "nm": "Example",
+                "fr": 60,
+                "ip": 0,
+                "op": 60,
+                "w": 512,
+                "h": 512,
+                "ddd": 0,
+                "layers": []
+            }
+        )
+    });
+
+    static LOTTIE: LazyLock<Animation> = LazyLock::new(|| Animation {
+        ver: None,
+        visual_object: VisualObject {
+            name: Some("Example".to_string()),
+            ..Default::default()
+        },
+        composition: Composition { layers: vec![] },
+        version: Some("5.5.2".to_string()),
+        frame_rate: 60.0,
+        in_point: 0.0,
+        out_point: 60.0,
+        width: 512,
+        height: 512,
+        three_dimensional: Some(BoolInt::False),
+        assets: None,
+    });
+
+    #[test]
+    fn test_serde_deserialize() {
+        let actual = serde_json::from_value(JSON.to_owned());
+
+        match actual {
+            Ok(actual) => assert_eq!(*LOTTIE, actual),
+            Err(e) => panic!("{e}"),
+        }
+    }
+
+    #[test]
+    fn test_deserialize() {
+        let actual = Animation::from_json(JSON.to_owned());
+
+        match actual {
+            Ok(actual) => assert_eq!(*LOTTIE, actual),
+            Err(e) => panic!("{e}"),
+        }
+    }
+
+    #[test]
+    fn test_can_serialize() {
+        serde_json::to_value(&*LOTTIE).unwrap();
+    }
+}
diff --git a/shared/foreign-lottie/src/schema/shapes/base_gradient.rs b/shared/foreign-lottie/src/schema/shapes/base_gradient.rs
new file mode 100644
index 0000000..7ddcef8
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/shapes/base_gradient.rs
@@ -0,0 +1,39 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use crate::schema::animated_properties::gradient_colors::GradientColors;
+use crate::schema::animated_properties::multi_dimensional::MultiDimensional;
+use crate::schema::animated_properties::value::FloatValue;
+use crate::schema::constants::gradient_type::GradientType;
+
+use serde::{Deserialize, Serialize};
+
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+/// Represents a gradient.
+pub struct BaseGradientShape {
+    /// Describes the gradient colors.
+    #[serde(rename = "g")]
+    pub colors: GradientColors,
+
+    /// Describes the starting point for the gradient.
+    #[serde(rename = "s")]
+    pub start_point: MultiDimensional,
+
+    /// Describes the end point for the gradient.
+    #[serde(rename = "e")]
+    pub end_point: MultiDimensional,
+
+    /// Indicates the type of the gradient.
+    #[serde(rename = "t")]
+    pub gradient_type: Option<GradientType>,
+
+    /// Represents the highlight length as a percentage between start and end
+    /// points.
+    #[serde(rename = "h")]
+    pub highlight_length: Option<FloatValue>,
+
+    /// Specifies the highlight angle relative to the direction from start to
+    /// end points.
+    #[serde(rename = "a")]
+    pub highlight_angle: Option<FloatValue>,
+}
diff --git a/shared/foreign-lottie/src/schema/shapes/base_stroke.rs b/shared/foreign-lottie/src/schema/shapes/base_stroke.rs
new file mode 100644
index 0000000..946d021
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/shapes/base_stroke.rs
@@ -0,0 +1,37 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use super::stroke_dash::StrokeDashShape;
+use crate::schema::constants::line_cap::LineCap;
+use crate::schema::constants::line_join::LineJoin;
+use crate::schema::{
+    animated_properties::value::FloatValue, shapes::graphic_element::GraphicElementShape,
+};
+use serde::{Deserialize, Serialize};
+
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct BaseStrokeShape {
+    /// Line Cap
+    #[serde(rename = "lc")]
+    pub line_cap: Option<LineCap>,
+
+    /// Line Join
+    #[serde(rename = "lj")]
+    pub line_join: Option<LineJoin>,
+
+    /// Miter Limit
+    #[serde(rename = "ml")]
+    pub miter_limit: Option<f64>,
+
+    /// Animatable alternative to miter limit
+    #[serde(rename = "ml2")]
+    pub miter_limit_anim: Option<FloatValue>,
+
+    /// Stroke Width
+    #[serde(rename = "w")]
+    pub width: FloatValue,
+
+    /// Dashed line definition
+    #[serde(rename = "d")]
+    pub dashes: Option<Vec<StrokeDashShape>>,
+}
diff --git a/shared/foreign-lottie/src/schema/shapes/ellipse.rs b/shared/foreign-lottie/src/schema/shapes/ellipse.rs
new file mode 100644
index 0000000..2f6df8d
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/shapes/ellipse.rs
@@ -0,0 +1,21 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use super::graphic_element::GraphicElementShape;
+use crate::schema::animated_properties::position::Position;
+use crate::schema::{
+    animated_properties::multi_dimensional::MultiDimensional, shapes::shape::Shape,
+};
+use serde::{Deserialize, Serialize};
+
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct EllipseShape {
+    #[serde(flatten)]
+    pub shape: Shape,
+    /// Position
+    #[serde(rename = "p")]
+    pub position: Position,
+    /// Size
+    #[serde(rename = "s")]
+    pub size: MultiDimensional,
+}
diff --git a/shared/foreign-lottie/src/schema/shapes/fill.rs b/shared/foreign-lottie/src/schema/shapes/fill.rs
new file mode 100644
index 0000000..3cec18b
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/shapes/fill.rs
@@ -0,0 +1,26 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use super::graphic_element::GraphicElementShape;
+use crate::schema::constants::fill_rule::FillRule;
+use crate::schema::shapes::FloatValue;
+use crate::schema::{
+    animated_properties::color_value::ColorValue, shapes::shape_style::ShapeStyleShape,
+};
+use serde::{Deserialize, Serialize};
+
+/// Solid fill color
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct FillShape {
+    #[serde(flatten)]
+    pub shape_style: ShapeStyleShape,
+
+    /// Color
+    #[serde(rename = "c")]
+    pub color: ColorValue,
+
+    /// Fill Rule
+    #[serde(rename = "r")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub fill_rule: Option<FillRule>,
+}
diff --git a/shared/foreign-lottie/src/schema/shapes/gradient_fill.rs b/shared/foreign-lottie/src/schema/shapes/gradient_fill.rs
new file mode 100644
index 0000000..77e961b
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/shapes/gradient_fill.rs
@@ -0,0 +1,21 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use super::base_gradient::BaseGradientShape;
+use crate::schema::constants::fill_rule::FillRule;
+use crate::schema::{animated_properties::value::FloatValue, shapes::shape_style::ShapeStyleShape};
+use serde::{Deserialize, Serialize};
+
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct GradientFillShape {
+    #[serde(flatten)]
+    pub shape_style: ShapeStyleShape,
+
+    /// Gradient data
+    #[serde(flatten)]
+    pub gradient: BaseGradientShape,
+
+    /// Fill Rule
+    #[serde(rename = "r")]
+    pub fill_rule: Option<FillRule>,
+}
diff --git a/shared/foreign-lottie/src/schema/shapes/gradient_stroke.rs b/shared/foreign-lottie/src/schema/shapes/gradient_stroke.rs
new file mode 100644
index 0000000..7487728
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/shapes/gradient_stroke.rs
@@ -0,0 +1,21 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use crate::schema::shapes::shape_style::ShapeStyleShape;
+
+use super::base_gradient::BaseGradientShape;
+use super::base_stroke::BaseStrokeShape;
+use super::graphic_element::GraphicElementShape;
+use serde::{Deserialize, Serialize};
+
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct GradientStrokeShape {
+    #[serde(flatten)]
+    pub shape_style: ShapeStyleShape,
+
+    #[serde(flatten)]
+    pub base_stroke: BaseStrokeShape,
+
+    #[serde(flatten)]
+    pub gradient: BaseGradientShape,
+}
diff --git a/shared/foreign-lottie/src/schema/shapes/graphic_element.rs b/shared/foreign-lottie/src/schema/shapes/graphic_element.rs
new file mode 100644
index 0000000..20fb5a5
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/shapes/graphic_element.rs
@@ -0,0 +1,43 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use crate::schema::constants::blend_mode::BlendMode;
+use crate::schema::helpers::visual_object::VisualObject;
+use serde::{Deserialize, Serialize};
+
+/// Base class for all elements of `ShapeLayer` and `Group`
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct GraphicElementShape {
+    #[serde(flatten)]
+    pub visual_object: VisualObject,
+
+    /// Whether the shape is hidden
+    #[serde(rename = "hd")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub hidden: Option<bool>,
+
+    #[serde(rename = "bm")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub blend_mode: Option<BlendMode>,
+
+    /// Index used in expressions
+    #[serde(rename = "ix")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub property_index: Option<f64>,
+
+    /// CSS class used by the SVG renderer
+    #[serde(rename = "cl")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub css_class: Option<String>,
+
+    /// `id` attribute used by the SVG renderer
+    #[serde(rename = "ln")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub xml_id: Option<String>,
+
+    /// TODO: This is an unknown property, but it showed up sometimes in test
+    /// files.
+    #[serde(rename = "ind")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub index: Option<f64>,
+}
diff --git a/shared/foreign-lottie/src/schema/shapes/group.rs b/shared/foreign-lottie/src/schema/shapes/group.rs
new file mode 100644
index 0000000..ec1e441
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/shapes/group.rs
@@ -0,0 +1,23 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use super::AnyShape;
+use super::graphic_element::GraphicElementShape;
+use serde::{Deserialize, Serialize};
+
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct GroupShape {
+    #[serde(flatten)]
+    pub graphic_element: GraphicElementShape,
+    /// Number of properties
+    #[serde(rename = "np")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub num_properties: Option<f64>,
+    /// Array of shapes
+    #[serde(rename = "it")]
+    pub shapes: Vec<AnyShape>,
+    /// Property Index
+    #[serde(rename = "cix")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub property_index: Option<u8>,
+}
diff --git a/shared/foreign-lottie/src/schema/shapes/merge.rs b/shared/foreign-lottie/src/schema/shapes/merge.rs
new file mode 100644
index 0000000..83a022e
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/shapes/merge.rs
@@ -0,0 +1,20 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde::{Deserialize, Serialize};
+
+use crate::schema::constants::merge_mode::MergeMode;
+
+use super::graphic_element::GraphicElementShape;
+
+/// Boolean operator on shapes
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct MergeShape {
+    #[serde(flatten)]
+    pub graphic_element: GraphicElementShape,
+
+    /// Merge Mode
+    #[serde(rename = "mm")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub merge_mode: Option<MergeMode>,
+}
diff --git a/shared/foreign-lottie/src/schema/shapes/mod.rs b/shared/foreign-lottie/src/schema/shapes/mod.rs
new file mode 100644
index 0000000..8132a02
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/shapes/mod.rs
@@ -0,0 +1,262 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+pub mod base_gradient;
+pub mod base_stroke;
+pub mod ellipse;
+pub mod fill;
+pub mod gradient_fill;
+pub mod gradient_stroke;
+pub mod graphic_element;
+pub mod group;
+pub mod merge;
+pub mod modifier;
+pub mod offset_path;
+pub mod path;
+pub mod polystar;
+pub mod pucker_bloat;
+pub mod rectangle;
+pub mod repeater;
+pub mod repeater_transform;
+pub mod rounded_corners;
+pub mod shape;
+pub mod shape_style;
+pub mod stroke;
+pub mod stroke_dash;
+pub mod transform;
+pub mod trim_path;
+pub mod twist;
+// todo pub mod shape_list;
+// todo pub mod zig_zag;
+// todo pub mod no_style;
+
+use crate::schema::shapes::{rounded_corners::RoundedCornersShape, twist::TwistShape};
+
+use self::fill::FillShape;
+use self::gradient_fill::GradientFillShape;
+use self::gradient_stroke::GradientStrokeShape;
+use self::merge::MergeShape;
+use self::offset_path::OffsetPathShape;
+use self::path::PathShape;
+use self::pucker_bloat::PuckerBloatShape;
+use self::rectangle::RectangleShape;
+use self::repeater::RepeaterShape;
+use self::stroke::StrokeShape;
+use self::transform::TransformShape;
+use self::trim_path::TrimPathShape;
+use super::animated_properties::value::FloatValue;
+use ellipse::EllipseShape;
+use group::GroupShape;
+use serde::{Deserialize, Serialize};
+
+/// Lottie considers everything related to vector data as a "shape". All shapes
+/// share the properties in `shapes::common::Properties`.
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+#[serde(tag = "ty")]
+#[expect(
+    clippy::large_enum_variant,
+    reason = "Shapes have inherently different sizes based on the Lottie spec"
+)]
+pub enum AnyShape {
+    /// A group is a shape that can contain other shapes (including other
+    /// groups)
+    #[serde(rename = "gr")]
+    Group(GroupShape),
+    /// A rectangle, defined by its center point and size.
+    #[serde(rename = "rc")]
+    Rectangle(RectangleShape),
+    /// An ellipse, defined by its center point and width and height.
+    #[serde(rename = "el")]
+    Ellipse(EllipseShape),
+    #[serde(rename = "tr")]
+    Transform(TransformShape),
+    #[serde(rename = "st")]
+    Stroke(StrokeShape),
+    #[serde(rename = "pb")]
+    PuckerBloat(PuckerBloatShape),
+    #[serde(rename = "mm")]
+    Merge(MergeShape),
+    #[serde(rename = "rp")]
+    Repeater(RepeaterShape),
+    #[serde(rename = "op")]
+    OffsetPath(OffsetPathShape),
+    #[serde(rename = "fl")]
+    Fill(FillShape),
+    #[serde(rename = "tm")]
+    Trim(TrimPathShape),
+    #[serde(rename = "sh")]
+    Path(PathShape),
+    #[serde(rename = "gf")]
+    GradientFill(GradientFillShape),
+    #[serde(rename = "gs")]
+    GradientStroke(GradientStrokeShape),
+    #[serde(rename = "tw")]
+    Twist(TwistShape),
+    #[serde(rename = "rd")]
+    RoundedCorners(RoundedCornersShape),
+    // TODO: model other shapes
+    // todo ZigZag(zig_zag),
+    // todo no_style(no_style),
+}
+
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub enum ShapeType {
+    #[serde(rename = "rc")]
+    Rectangle,
+    #[serde(rename = "el")]
+    Ellipse,
+    #[serde(rename = "sr")]
+    PolyStar,
+    #[serde(rename = "sh")]
+    Path,
+    #[serde(rename = "fl")]
+    Fill,
+    #[serde(rename = "st")]
+    Stroke,
+    #[serde(rename = "gf")]
+    GradientFill,
+    #[serde(rename = "gs")]
+    GradientStroke,
+    #[serde(rename = "no")]
+    NoStyle,
+    #[serde(rename = "gr")]
+    Group,
+    #[serde(rename = "tr")]
+    Transform,
+    #[serde(rename = "rp")]
+    Repeater,
+    #[serde(rename = "tm")]
+    Trim,
+    #[serde(rename = "rd")]
+    RoundedCorners,
+    #[serde(rename = "pb")]
+    PuckerBloat,
+    #[serde(rename = "mm")]
+    Merge,
+    #[serde(rename = "tw")]
+    Twist,
+    #[serde(rename = "op")]
+    OffsetPath,
+    #[serde(rename = "zz")]
+    ZigZag,
+}
+
+#[cfg(test)]
+mod tests {
+    use super::{
+        AnyShape, ellipse::EllipseShape, graphic_element::GraphicElementShape, group::GroupShape,
+    };
+    use crate::schema::{
+        animated_properties::{
+            animated_property::{AnimatedProperty, AnimatedPropertyK},
+            multi_dimensional::MultiDimensional,
+            position::{Position, PositionValueK},
+        },
+        helpers::{int_boolean::BoolInt, visual_object::VisualObject},
+        shapes::shape::Shape,
+    };
+    use serde_json::json;
+    use std::sync::LazyLock;
+
+    static JSON: LazyLock<serde_json::Value> = LazyLock::new(|| {
+        json!(
+            {
+                "ty": "gr",
+                "nm": "Group",
+                "mn": "{f1becc2a-49f0-4f0c-918f-bdffe4c6870f}",
+                "it": [
+                    {
+                        "ty": "el",
+                        "nm": "Ellipse",
+                        "mn": "{2aabac6e-1dd8-41b0-b60b-baf75ccb6318}",
+                        "p": {
+                            "a": 0,
+                            "k": [
+                                303.9044776119403,
+                                324.9671641791045
+                            ]
+                        },
+                        "s": {
+                            "a": 0,
+                            "k": [
+                                205.46865671641788,
+                                204.6089552238806
+                            ]
+                        }
+                    }
+                ]
+            }
+        )
+    });
+
+    static LAYER: LazyLock<AnyShape> = LazyLock::new(|| {
+        AnyShape::Group(GroupShape {
+            graphic_element: GraphicElementShape {
+                visual_object: VisualObject {
+                    name: Some("Group".to_string()),
+                    match_name: Some("{f1becc2a-49f0-4f0c-918f-bdffe4c6870f}".to_string()),
+                },
+                index: None,
+                hidden: None,
+                blend_mode: None,
+                property_index: None,
+                css_class: None,
+                xml_id: None,
+            },
+            num_properties: None,
+            property_index: None,
+            shapes: vec![AnyShape::Ellipse(EllipseShape {
+                shape: Shape {
+                    graphic_element: GraphicElementShape {
+                        visual_object: VisualObject {
+                            name: Some("Ellipse".to_string()),
+                            match_name: Some("{2aabac6e-1dd8-41b0-b60b-baf75ccb6318}".to_string()),
+                        },
+                        index: None,
+                        hidden: None,
+                        blend_mode: None,
+                        property_index: None,
+                        css_class: None,
+                        xml_id: None,
+                    },
+                    direction: None,
+                },
+                position: Position {
+                    property_index: None,
+                    animated: Some(BoolInt::False),
+                    expression: None,
+                    length: None,
+                    value: PositionValueK::Static(vec![303.9044776119403, 324.9671641791045]),
+                },
+                size: MultiDimensional {
+                    animated_property: AnimatedProperty {
+                        animated: Some(BoolInt::False),
+                        property_index: None,
+                        expression: None,
+                        slot_id: None,
+                        value: AnimatedPropertyK::Static(vec![
+                            205.46865671641788,
+                            204.6089552238806,
+                        ]),
+                    },
+                    length: None,
+                },
+            })],
+        })
+    });
+
+    #[test]
+    fn test_deserialize() {
+        let actual: Result<AnyShape, serde_json::Error> = serde_json::from_value(JSON.to_owned());
+
+        match actual {
+            Ok(actual) => assert_eq!(*LAYER, actual),
+            Err(e) => panic!("{e}"),
+        }
+    }
+
+    #[test]
+    fn test_can_serialize() {
+        serde_json::to_value(&*LAYER).unwrap();
+    }
+}
diff --git a/shared/foreign-lottie/src/schema/shapes/modifier.rs b/shared/foreign-lottie/src/schema/shapes/modifier.rs
new file mode 100644
index 0000000..a188c09
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/shapes/modifier.rs
@@ -0,0 +1,12 @@
+// Copyright 2025 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde::{Deserialize, Serialize};
+
+use crate::schema::shapes::graphic_element::GraphicElementShape;
+
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct ModifierShape {
+    #[serde(flatten)]
+    pub graphic_element: GraphicElementShape,
+}
diff --git a/shared/foreign-lottie/src/schema/shapes/offset_path.rs b/shared/foreign-lottie/src/schema/shapes/offset_path.rs
new file mode 100644
index 0000000..4b7cda2
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/shapes/offset_path.rs
@@ -0,0 +1,26 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use crate::schema::shapes::FloatValue;
+use crate::schema::{constants::line_join::LineJoin, shapes::modifier::ModifierShape};
+use serde::{Deserialize, Serialize};
+
+/// Interpolates the shape with its center point and bezier tangents with the
+/// opposite direction
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct OffsetPathShape {
+    #[serde(flatten)]
+    pub modifier: ModifierShape,
+
+    #[serde(rename = "a")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub amount: Option<FloatValue>,
+
+    #[serde(rename = "lj")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub line_join: Option<LineJoin>, // default  2
+
+    #[serde(rename = "ml")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub miter_limit: Option<FloatValue>,
+}
diff --git a/shared/foreign-lottie/src/schema/shapes/path.rs b/shared/foreign-lottie/src/schema/shapes/path.rs
new file mode 100644
index 0000000..6333477
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/shapes/path.rs
@@ -0,0 +1,17 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use super::shape::Shape;
+use crate::schema::animated_properties::shape_property::ShapeProperty;
+use serde::{Deserialize, Serialize};
+
+/// Animatable Bezier curve
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct PathShape {
+    #[serde(flatten)]
+    pub shape: Shape,
+
+    /// Bezier path
+    #[serde(rename = "ks")]
+    pub shape_property: ShapeProperty,
+}
diff --git a/shared/foreign-lottie/src/schema/shapes/polystar.rs b/shared/foreign-lottie/src/schema/shapes/polystar.rs
new file mode 100644
index 0000000..ed03c0b
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/shapes/polystar.rs
@@ -0,0 +1,40 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use crate::schema::animated_properties::value::FloatValue;
+use crate::schema::constants::star_type::StarType;
+use crate::schema::{animated_properties::position::Position, shapes::shape::Shape};
+use serde::{Deserialize, Serialize};
+
+/// Regular polygon or star.
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct PolyStarShape {
+    #[serde(flatten)]
+    pub shape: Shape,
+    /// Position
+    #[serde(rename = "p")]
+    pub position: Position,
+    /// Outer Radius
+    #[serde(rename = "or")]
+    pub outer_radius: FloatValue,
+    /// Outer Roundness as a percentage
+    #[serde(rename = "os")]
+    pub outer_roundness: FloatValue,
+    /// Rotation, clockwise in degrees
+    #[serde(rename = "r")]
+    pub rotation: FloatValue,
+    /// Points
+    #[serde(rename = "pt")]
+    pub points: FloatValue,
+    /// Star type, 1 for Star, 2 for Polygon
+    #[serde(rename = "sy")]
+    pub star_type: StarType,
+    /// If sy is 1 (star) you also have attributes defining the inner ends of
+    /// the star:
+    /// Points
+    #[serde(rename = "ir")]
+    pub inner_radius: Option<FloatValue>,
+    /// Star type, 1 for Star, 2 for Polygon
+    #[serde(rename = "is")]
+    pub inner_roundness: Option<FloatValue>,
+}
diff --git a/shared/foreign-lottie/src/schema/shapes/pucker_bloat.rs b/shared/foreign-lottie/src/schema/shapes/pucker_bloat.rs
new file mode 100644
index 0000000..fc0d715
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/shapes/pucker_bloat.rs
@@ -0,0 +1,18 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use crate::schema::shapes::{FloatValue, modifier::ModifierShape};
+use serde::{Deserialize, Serialize};
+
+/// Interpolates the shape with its center point and bezier tangents with the
+/// opposite direction
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct PuckerBloatShape {
+    #[serde(flatten)]
+    pub modifier: ModifierShape,
+
+    /// Amount as a percentage
+    #[serde(rename = "a")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub amount: Option<FloatValue>,
+}
diff --git a/shared/foreign-lottie/src/schema/shapes/rectangle.rs b/shared/foreign-lottie/src/schema/shapes/rectangle.rs
new file mode 100644
index 0000000..a9d69d8
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/shapes/rectangle.rs
@@ -0,0 +1,27 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use crate::schema::animated_properties::position::Position;
+use crate::schema::animated_properties::value::FloatValue;
+use crate::schema::{
+    animated_properties::multi_dimensional::MultiDimensional, shapes::shape::Shape,
+};
+use serde::{Deserialize, Serialize};
+
+use super::graphic_element::GraphicElementShape;
+
+/// A rectangle, defined by its center point and size.
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct RectangleShape {
+    #[serde(flatten)]
+    pub shape: Shape,
+    /// Center of the rectangle
+    #[serde(rename = "p")]
+    pub position: Position,
+    /// Size
+    #[serde(rename = "s")]
+    pub size: MultiDimensional,
+    /// Rounded corners radius
+    #[serde(rename = "r")]
+    pub rounded_corner_radius: FloatValue,
+}
diff --git a/shared/foreign-lottie/src/schema/shapes/repeater.rs b/shared/foreign-lottie/src/schema/shapes/repeater.rs
new file mode 100644
index 0000000..cbb489a
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/shapes/repeater.rs
@@ -0,0 +1,35 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde::{Deserialize, Serialize};
+
+use crate::schema::animated_properties::value::FloatValue;
+use crate::schema::constants::composite::Composite;
+use crate::schema::shapes::modifier::ModifierShape;
+
+use super::repeater_transform::RepeaterTransformShape;
+
+/// Duplicates previous shapes in a group
+
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct RepeaterShape {
+    #[serde(flatten)]
+    pub modifier: ModifierShape,
+
+    /// Number of copies
+    #[serde(rename = "c")]
+    pub copies: FloatValue,
+
+    #[serde(rename = "o")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub offset: Option<FloatValue>,
+
+    /// Stacking order
+    #[serde(rename = "m")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub composite: Option<Composite>,
+
+    /// Transform applied to each copy
+    #[serde(rename = "tr")]
+    pub transform: RepeaterTransformShape,
+}
diff --git a/shared/foreign-lottie/src/schema/shapes/repeater_transform.rs b/shared/foreign-lottie/src/schema/shapes/repeater_transform.rs
new file mode 100644
index 0000000..4f41c11
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/shapes/repeater_transform.rs
@@ -0,0 +1,23 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use crate::schema::shapes::{FloatValue, transform::TransformShape};
+use serde::{Deserialize, Serialize};
+
+/// Transform used by a repe…equent repeated object.
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct RepeaterTransformShape {
+    #[serde(flatten)]
+    pub transform: TransformShape,
+
+    /// Transform used by a repeater, the transform is applied to each
+    /// subsequent repeated object.
+    #[serde(rename = "so")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub start_opacity: Option<FloatValue>,
+
+    // Opacity of the last repeated object
+    #[serde(rename = "eo")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub end_opacity: Option<FloatValue>,
+}
diff --git a/shared/foreign-lottie/src/schema/shapes/rounded_corners.rs b/shared/foreign-lottie/src/schema/shapes/rounded_corners.rs
new file mode 100644
index 0000000..3889599
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/shapes/rounded_corners.rs
@@ -0,0 +1,19 @@
+// Copyright 2025 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde::{Deserialize, Serialize};
+
+use crate::schema::{
+    animated_properties::{position::Position, value::FloatValue},
+    shapes::modifier::ModifierShape,
+};
+
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct RoundedCornersShape {
+    #[serde(flatten)]
+    pub modifier: ModifierShape,
+
+    /// The radius of the rounded corners.
+    #[serde(rename = "r")]
+    pub radius: FloatValue,
+}
diff --git a/shared/foreign-lottie/src/schema/shapes/shape.rs b/shared/foreign-lottie/src/schema/shapes/shape.rs
new file mode 100644
index 0000000..429f324
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/shapes/shape.rs
@@ -0,0 +1,18 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use super::graphic_element::GraphicElementShape;
+use crate::schema::constants::shape_direction::ShapeDirection;
+use serde::{Deserialize, Serialize};
+
+/// Drawable shape
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct Shape {
+    #[serde(flatten)]
+    pub graphic_element: GraphicElementShape,
+
+    /// Direction the shape is drawn as, mostly relevant when using trim path
+    #[serde(rename = "d")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub direction: Option<ShapeDirection>,
+}
diff --git a/shared/foreign-lottie/src/schema/shapes/shape_style.rs b/shared/foreign-lottie/src/schema/shapes/shape_style.rs
new file mode 100644
index 0000000..e027569
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/shapes/shape_style.rs
@@ -0,0 +1,18 @@
+// Copyright 2025 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde::{Deserialize, Serialize};
+
+use crate::schema::{
+    animated_properties::value::FloatValue, shapes::graphic_element::GraphicElementShape,
+};
+
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct ShapeStyleShape {
+    #[serde(flatten)]
+    pub graphic_element: GraphicElementShape,
+
+    /// Opacity, 100 means fully opaque
+    #[serde(rename = "o")]
+    pub opacity: FloatValue,
+}
diff --git a/shared/foreign-lottie/src/schema/shapes/stroke.rs b/shared/foreign-lottie/src/schema/shapes/stroke.rs
new file mode 100644
index 0000000..21c1207
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/shapes/stroke.rs
@@ -0,0 +1,26 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use super::graphic_element::GraphicElementShape;
+use super::stroke_dash::StrokeDashShape;
+use crate::schema::animated_properties::value::FloatValue;
+use crate::schema::constants::line_cap::LineCap;
+use crate::schema::constants::line_join::LineJoin;
+use crate::schema::shapes::base_stroke::BaseStrokeShape;
+use crate::schema::{
+    animated_properties::color_value::ColorValue, shapes::shape_style::ShapeStyleShape,
+};
+use serde::{Deserialize, Serialize};
+
+/// Defines a stroke.
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct StrokeShape {
+    #[serde(flatten)]
+    pub shape_style: ShapeStyleShape,
+    #[serde(flatten)]
+    pub base_stroke: BaseStrokeShape,
+
+    /// Stroke color
+    #[serde(rename = "c")]
+    pub stroke_color: ColorValue,
+}
diff --git a/shared/foreign-lottie/src/schema/shapes/stroke_dash.rs b/shared/foreign-lottie/src/schema/shapes/stroke_dash.rs
new file mode 100644
index 0000000..3d2df84
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/shapes/stroke_dash.rs
@@ -0,0 +1,24 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use crate::schema::animated_properties::value::FloatValue;
+use crate::schema::constants::stroke_dash_type::StrokeDashType;
+use crate::schema::helpers::visual_object::VisualObject;
+use serde::{Deserialize, Serialize};
+
+/// An item used to described the dashe pattern in a stroked path
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct StrokeDashShape {
+    #[serde(flatten)]
+    visual_object: VisualObject,
+
+    /// Type of the dash
+    #[serde(rename = "n")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    dash_type: Option<StrokeDashType>,
+
+    /// Length of the dash
+    #[serde(rename = "v")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    length: Option<FloatValue>,
+}
diff --git a/shared/foreign-lottie/src/schema/shapes/transform.rs b/shared/foreign-lottie/src/schema/shapes/transform.rs
new file mode 100644
index 0000000..a75ca3c
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/shapes/transform.rs
@@ -0,0 +1,15 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use super::graphic_element::GraphicElementShape;
+use crate::schema::helpers::transform::Transform;
+use serde::{Deserialize, Serialize};
+
+/// A rectangle, defined by its center point and size.
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct TransformShape {
+    #[serde(flatten)]
+    pub graphic_element: GraphicElementShape,
+    #[serde(flatten)]
+    pub transform: Transform,
+}
diff --git a/shared/foreign-lottie/src/schema/shapes/trim_path.rs b/shared/foreign-lottie/src/schema/shapes/trim_path.rs
new file mode 100644
index 0000000..6cb7168
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/shapes/trim_path.rs
@@ -0,0 +1,32 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use crate::schema::constants::trim_multiple_shapes::TrimMultipleShapes;
+use crate::schema::{animated_properties::value::FloatValue, shapes::modifier::ModifierShape};
+use serde::{Deserialize, Serialize};
+
+use super::graphic_element::GraphicElementShape;
+
+/// Trims shapes into a segment.
+#[derive(Debug, Serialize, Deserialize, Clone, PartialEq)]
+pub struct TrimPathShape {
+    #[serde(flatten)]
+    pub modifier: ModifierShape,
+
+    /// Segment start.
+    #[serde(rename = "s")]
+    pub start: FloatValue,
+
+    /// Segment end.
+    #[serde(rename = "e")]
+    pub end: FloatValue,
+
+    /// Offset.
+    #[serde(rename = "o")]
+    pub offset: FloatValue,
+
+    /// How to treat multiple copies.
+    #[serde(rename = "m")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub multiple: Option<TrimMultipleShapes>,
+}
diff --git a/shared/foreign-lottie/src/schema/shapes/twist.rs b/shared/foreign-lottie/src/schema/shapes/twist.rs
new file mode 100644
index 0000000..890fcc3
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/shapes/twist.rs
@@ -0,0 +1,23 @@
+// Copyright 2025 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use serde::{Deserialize, Serialize};
+
+use crate::schema::{
+    animated_properties::{position::Position, value::FloatValue},
+    shapes::modifier::ModifierShape,
+};
+
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct TwistShape {
+    #[serde(flatten)]
+    pub modifier: ModifierShape,
+
+    /// The angle of the twist in degrees.
+    #[serde(rename = "a")]
+    pub angle: FloatValue,
+
+    /// The position of the center of the twist effect.
+    #[serde(rename = "p")]
+    pub position: Position,
+}
diff --git a/shared/foreign-lottie/src/schema/styles/color_overlay_style.rs b/shared/foreign-lottie/src/schema/styles/color_overlay_style.rs
new file mode 100644
index 0000000..cf7b5e2
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/styles/color_overlay_style.rs
@@ -0,0 +1,26 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use super::layer_style::LayerStyle;
+use crate::schema::animated_properties::color_value::ColorValue;
+use crate::schema::animated_properties::value::FloatValue;
+use serde::{Deserialize, Serialize};
+
+///
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct ColorOverlayStyle {
+    #[serde(flatten)]
+    pub layer_style: LayerStyle,
+    ///
+    #[serde(rename = "bm")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub blend_mode: Option<FloatValue>,
+    ///
+    #[serde(rename = "c")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub color: Option<ColorValue>,
+    ///
+    #[serde(rename = "so")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub opacity: Option<FloatValue>,
+}
diff --git a/shared/foreign-lottie/src/schema/styles/gradient_overlay_style.rs b/shared/foreign-lottie/src/schema/styles/gradient_overlay_style.rs
new file mode 100644
index 0000000..2454179
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/styles/gradient_overlay_style.rs
@@ -0,0 +1,60 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use super::layer_style::LayerStyle;
+use crate::schema::animated_properties::color_value::ColorValue;
+use crate::schema::animated_properties::gradient_colors::GradientColors;
+use crate::schema::animated_properties::value::FloatValue;
+use crate::schema::constants::gradient_type::GradientType;
+use serde::{Deserialize, Serialize};
+
+///
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct GradientOverlayStyle {
+    #[serde(flatten)]
+    pub layer_style: LayerStyle,
+    ///
+    #[serde(rename = "bm")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub blend_mode: Option<FloatValue>,
+    ///
+    #[serde(rename = "c")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub color: Option<ColorValue>,
+    ///
+    #[serde(rename = "o")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub opacity: Option<FloatValue>,
+    ///
+    #[serde(rename = "gf")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub gradient: Option<GradientColors>,
+    ///
+    #[serde(rename = "gs")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub smoothness: Option<FloatValue>,
+    ///
+    #[serde(rename = "a")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub angle: Option<FloatValue>,
+    ///
+    #[serde(rename = "gt")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub gradient_type: Option<GradientType>,
+    ///
+    #[serde(rename = "re")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub reverse: Option<FloatValue>,
+    /// Align with layer
+    #[serde(rename = "al")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub align: Option<FloatValue>,
+    ///
+    #[serde(rename = "s")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub scale: Option<FloatValue>,
+    ///
+    #[serde(rename = "of")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub offset: Option<FloatValue>,
+}
diff --git a/shared/foreign-lottie/src/schema/styles/layer_style.rs b/shared/foreign-lottie/src/schema/styles/layer_style.rs
new file mode 100644
index 0000000..09c754d
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/styles/layer_style.rs
@@ -0,0 +1,31 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use crate::schema::helpers::visual_object::VisualObject;
+use serde::{Deserialize, Serialize};
+use serde_repr::{Deserialize_repr, Serialize_repr};
+
+/// Style Type
+#[repr(u8)]
+#[derive(Deserialize_repr, Serialize_repr, Debug, Clone, PartialEq)]
+pub enum StyleType {
+    Stroke = 0,
+    DropShadow = 1,
+    InnerShadow = 2,
+    OuterGlow = 3,
+    InnerGlow = 4,
+    BevelEmboss = 5,
+    Satin = 6,
+    ColorOverlay = 7,
+    GradientOverlay = 8,
+}
+
+/// Style applied to a layer
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct LayerStyle {
+    #[serde(flatten)]
+    pub visual_object: VisualObject,
+    /// Style Type
+    #[serde(rename = "ty")]
+    pub style_type: StyleType,
+}
diff --git a/shared/foreign-lottie/src/schema/styles/mod.rs b/shared/foreign-lottie/src/schema/styles/mod.rs
new file mode 100644
index 0000000..eb6ea09
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/styles/mod.rs
@@ -0,0 +1,14 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+pub mod color_overlay_style;
+pub mod gradient_overlay_style;
+pub mod layer_style;
+pub mod outer_glow_style;
+pub mod satin_style;
+// todo pub mod bevel_embess_style;
+// todo pub mod inner_glow_style;
+// todo pub mod stroke_style;
+// todo pub mod drop_shadow_style;
+// todo pub mod inner_shadow_style;
+// todo pub mod layer_style;
diff --git a/shared/foreign-lottie/src/schema/styles/outer_glow_style.rs b/shared/foreign-lottie/src/schema/styles/outer_glow_style.rs
new file mode 100644
index 0000000..4d8dbd9
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/styles/outer_glow_style.rs
@@ -0,0 +1,42 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use super::layer_style::LayerStyle;
+use crate::schema::animated_properties::color_value::ColorValue;
+use crate::schema::animated_properties::value::FloatValue;
+use serde::{Deserialize, Serialize};
+
+///
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct OuterGlowStyle {
+    #[serde(flatten)]
+    pub layer_style: LayerStyle,
+    ///
+    #[serde(rename = "bm")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub blend_mode: Option<FloatValue>,
+    ///
+    #[serde(rename = "c")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub color: Option<ColorValue>,
+    ///
+    #[serde(rename = "o")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub opacity: Option<FloatValue>,
+    ///
+    #[serde(rename = "r")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub range: Option<FloatValue>,
+    ///
+    #[serde(rename = "ch")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub choke_spread: Option<FloatValue>,
+    ///
+    #[serde(rename = "no")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub noise: Option<FloatValue>,
+    ///
+    #[serde(rename = "j")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub jitter: Option<FloatValue>,
+}
diff --git a/shared/foreign-lottie/src/schema/styles/satin_style.rs b/shared/foreign-lottie/src/schema/styles/satin_style.rs
new file mode 100644
index 0000000..c8282c1
--- /dev/null
+++ b/shared/foreign-lottie/src/schema/styles/satin_style.rs
@@ -0,0 +1,35 @@
+// Copyright 2024 the Velato Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+use super::layer_style::LayerStyle;
+use crate::schema::animated_properties::color_value::ColorValue;
+use crate::schema::animated_properties::value::FloatValue;
+use serde::{Deserialize, Serialize};
+
+/// Style applied to a layer
+#[derive(Deserialize, Serialize, Debug, Clone, PartialEq)]
+pub struct SatinStyle {
+    #[serde(flatten)]
+    pub layer_style: LayerStyle,
+    #[serde(rename = "bm")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub blend_mode: Option<FloatValue>,
+    #[serde(rename = "c")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub color: Option<ColorValue>,
+    #[serde(rename = "o")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub opacity: Option<FloatValue>,
+    #[serde(rename = "a")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub angle: Option<FloatValue>,
+    #[serde(rename = "d")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub distance: Option<FloatValue>,
+    #[serde(rename = "s")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub size: Option<FloatValue>,
+    #[serde(rename = "in")]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub invert: Option<FloatValue>,
+}
diff --git a/shared/foreign-lottie/tests/no_panic_fork.rs b/shared/foreign-lottie/tests/no_panic_fork.rs
new file mode 100644
index 0000000..d38440f
--- /dev/null
+++ b/shared/foreign-lottie/tests/no_panic_fork.rs
@@ -0,0 +1,71 @@
+//! Tests del fork tawasuyu: los Lotties que en velato 0.9 upstream
+//! **paniqueaban** (`todo!()`/`unimplemented!()` en el importador) ahora se
+//! importan con degradación graciosa, sin panic. Cada caso construye una
+//! `Composition` y exige que vuelva `Ok`.
+
+use foreign_lottie::Composition;
+
+/// Lottie con un layer cuyo transform NO trae campo de rotación (`r`).
+/// Upstream: `None => todo!("split rotation")`. Fork: rotación 0.
+#[test]
+fn transform_sin_rotacion_no_paniquea() {
+    let json = r#"{"v":"5.5.2","fr":30,"ip":0,"op":60,"w":100,"h":100,
+        "layers":[{"ty":4,"ip":0,"op":60,"st":0,"sr":1,
+        "ks":{"p":{"a":0,"k":[0,0]}},"shapes":[]}]}"#;
+    assert!(Composition::from_slice(json).is_ok());
+}
+
+/// Transform con rotación **splitteada** (`r` = {x,y,z,or}). Upstream:
+/// `SplitRotation => todo!()`. Fork: usa la componente z.
+#[test]
+fn split_rotation_no_paniquea() {
+    let json = r#"{"v":"5.5.2","fr":30,"ip":0,"op":60,"w":100,"h":100,
+        "layers":[{"ty":4,"ip":0,"op":60,"st":0,"sr":1,
+        "ks":{"p":{"a":0,"k":[0,0]},
+              "r":{"x":{"a":0,"k":0},"y":{"a":0,"k":0},"z":{"a":0,"k":45},
+                   "or":{"a":0,"k":[0,0,0]}}},
+        "shapes":[]}]}"#;
+    assert!(Composition::from_slice(json).is_ok());
+}
+
+/// Transform con posición **splitteada** (`p` = {s:true,x,y}). Upstream del
+/// shape-transform: `SplitPosition => todo!("split position")`. Fork: la arma
+/// desde x/y. (Lo metemos dentro de un group-shape con su transform para
+/// ejercitar `conv_shape_transform`.)
+#[test]
+fn split_position_en_shape_no_paniquea() {
+    let json = r#"{"v":"5.5.2","fr":30,"ip":0,"op":60,"w":100,"h":100,
+        "layers":[{"ty":4,"ip":0,"op":60,"st":0,"sr":1,
+        "ks":{"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0}},
+        "shapes":[{"ty":"gr","it":[
+            {"ty":"tr",
+             "p":{"s":true,"x":{"a":0,"k":10},"y":{"a":0,"k":20}},
+             "a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},
+             "r":{"a":0,"k":0},"o":{"a":0,"k":100}}
+        ]}]}]}"#;
+    assert!(Composition::from_slice(json).is_ok());
+}
+
+/// Blend mode `Add` (be=10) en un layer. Upstream: `Add => unimplemented!()`.
+/// Fork: compositing aditivo (Compose::Plus).
+#[test]
+fn blend_add_no_paniquea() {
+    let json = r#"{"v":"5.5.2","fr":30,"ip":0,"op":60,"w":100,"h":100,
+        "layers":[{"ty":4,"ip":0,"op":60,"st":0,"sr":1,"bm":10,
+        "ks":{"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0}},"shapes":[]}]}"#;
+    assert!(Composition::from_slice(json).is_ok());
+}
+
+/// Un Lottie sano sigue parseando (no rompimos el camino feliz).
+#[test]
+fn lottie_sano_sigue_ok() {
+    let json = r#"{"v":"5.5.2","fr":30,"ip":0,"op":60,"w":100,"h":100,
+        "layers":[{"ty":4,"ip":0,"op":60,"st":0,"sr":1,
+        "ks":{"p":{"a":0,"k":[50,50]},"r":{"a":0,"k":0}},
+        "shapes":[
+          {"ty":"rc","p":{"a":0,"k":[50,50]},"s":{"a":0,"k":[80,80]},"r":{"a":0,"k":0}},
+          {"ty":"fl","c":{"a":0,"k":[0.8,0,0,1]},"o":{"a":0,"k":100}}
+        ]}]}"#;
+    let comp = Composition::from_slice(json).expect("lottie sano parsea");
+    assert_eq!((comp.width, comp.height), (100, 100));
+}
diff --git a/shared/foreign-vox/Cargo.toml b/shared/foreign-vox/Cargo.toml
index 62ea03f..527ee9e 100644
--- a/shared/foreign-vox/Cargo.toml
+++ b/shared/foreign-vox/Cargo.toml
@@ -19,7 +19,6 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "shared/foreign-vox — puente al formato MagicaVoxel (.vox): lee/escribe modelos voxel (SIZE/XYZI/RGBA) como un VoxModel neutral, para importar sets y personajes al motor voxel."
 
 [dependencies]
diff --git a/shared/foreign-vox/LEEME.md b/shared/foreign-vox/LEEME.md
new file mode 100644
index 0000000..668d528
--- /dev/null
+++ b/shared/foreign-vox/LEEME.md
@@ -0,0 +1,24 @@
+# foreign-vox
+
+*Read this in English: [README.md](README.md).*
+
+# foreign-vox — puente al formato **MagicaVoxel `.vox`**
+
+Lee y escribe modelos voxel en el formato de MagicaVoxel (estructura de
+*chunks* tipo-RIFF: `MAIN` → `SIZE`/`XYZI`/`RGBA`) y los expone como un
+`VoxModel` **neutral**: dimensiones + lista de voxels `(x,y,z,índice)` +
+una paleta de 256 colores RGBA indexada por el índice del voxel.
+
+Sin dependencias (sólo `std`): el formato son bytes planos *little-endian*.
+**No** conoce el motor — el conversor a `VoxelGrid` vive en `llimphi-voxel`
+(CLAUDE.md regla #4: lo ajeno entra por el puente, el núcleo trabaja nativo).
+
+Convención de color: el índice `i` de un voxel (1..255; `0` = vacío) indexa
+`VoxModel::palette``[i]`. Al leer el chunk `RGBA` (256 entradas crudas) se
+aplica el corrimiento documentado por MagicaVoxel (`palette[i] = crudo[i-1]`).
+Si el archivo no trae `RGBA`, se usa una paleta por defecto (rampa HSV) — los
+exportes reales de MagicaVoxel siempre incluyen `RGBA`, así que es un fallback.
+
+---
+
+Parte de **shared** — ver [shared](../LEEME.md).
diff --git a/shared/foreign-vox/README.md b/shared/foreign-vox/README.md
new file mode 100644
index 0000000..451afac
--- /dev/null
+++ b/shared/foreign-vox/README.md
@@ -0,0 +1,17 @@
+# foreign-vox
+
+Bridge to the **MagicaVoxel `.vox`** format.
+
+It reads and writes voxel models in MagicaVoxel's format (a RIFF-like *chunk*
+structure: `MAIN` → `SIZE`/`XYZI`/`RGBA`) and exposes them as a **neutral**
+`VoxModel`: dimensions + a list of `(x, y, z, index)` voxels + a 256-colour RGBA
+palette indexed by the voxel's index.
+
+No dependencies (only `std`): the format is flat *little-endian* bytes. It knows
+**nothing** about the engine — the converter to `VoxelGrid` lives in
+`llimphi-voxel` (CLAUDE.md rule #4: the foreign thing enters through the bridge,
+the core works natively).
+
+---
+
+Part of **shared** — see [shared](../README.md).
diff --git a/shared/foreign-vox/src/lib.rs b/shared/foreign-vox/src/lib.rs
index 30f5fc9..d199543 100644
--- a/shared/foreign-vox/src/lib.rs
+++ b/shared/foreign-vox/src/lib.rs
@@ -107,7 +107,7 @@ enum Node {
 
 /// Lee un `.vox` y devuelve todos sus modelos (uno por par `SIZE`+`XYZI`). La
 /// paleta `RGBA`, si existe, se aplica a todos. Ignora el grafo de escena — para
-/// escenas multi-modelo con posición usá [`parse_scene`].
+/// escenas multi-modelo con posición usa [`parse_scene`].
 pub fn parse(bytes: &[u8]) -> Result<Vec<VoxModel>, VoxError> {
     Ok(parse_scene(bytes)?.models)
 }
diff --git a/shared/grafo/Cargo.toml b/shared/grafo/Cargo.toml
new file mode 100644
index 0000000..f44f494
--- /dev/null
+++ b/shared/grafo/Cargo.toml
@@ -0,0 +1,30 @@
+# =============================================================================
+#  grafo-nav — la abstracción de "DAG navegable", una sola vez (PLAN-GRAFO F1)
+# -----------------------------------------------------------------------------
+#  El repo está lleno de DAGs (Mónadas de nahual, commit-DAG de minga, celdas de
+#  notebook, mensajes de ayni, morfismos de nakui...). Cada dominio los maneja
+#  por su cuenta. Esta primitiva define el CONTRATO común para verlos y
+#  gestionarlos con un vocabulario único de verbos — ver · restablecer ·
+#  cercenar · conciliar — sobre el cockpit compartido (`llimphi-widget-
+#  navigator::cockpit_grafo_view`).
+#
+#  Deliberadamente AGNÓSTICA DE UI y de dominio: sólo topología (nodos + aristas
+#  dirigidas) y los verbos que el dominio permite. Las derivadas estructurales
+#  (raíces, cabezas, cono, bifurcación) son por defecto y puras.
+#
+#  `#![no_std]` (sólo `alloc`), como `format`/`umbral`: un dominio-core que ya
+#  es no_std (minga-commit cruza al kernel algún día) puede implementarla sin
+#  arrastrar `std` ni la UI.
+# =============================================================================
+
+[package]
+name = "grafo-nav"
+version = "0.1.0"
+edition = "2021"
+license = "MPL-2.0"
+authors = ["JL Soltech <gerencia@jlsoltech.com>"]
+description = "grafo-nav — contrato del DAG navegable: topología + verbos (ver/restablecer/cercenar/conciliar), agnóstico de UI y dominio"
+
+[lib]
+bench = false
+doctest = false
diff --git a/shared/grafo/LEEME.md b/shared/grafo/LEEME.md
new file mode 100644
index 0000000..c7827e3
--- /dev/null
+++ b/shared/grafo/LEEME.md
@@ -0,0 +1,24 @@
+# grafo-nav
+
+*Read this in English: [README.md](README.md).*
+
+El contrato del DAG navegable, una sola vez (PLAN-GRAFO F1)
+
+Un DAG cualquiera del repo (Mónadas, commits, celdas, mensajes) se vuelve
+navegable y gestionable implementando `GrafoNavegable`: dice sus nodos, sus
+aristas dirigidas `(padre → hijo)`, y qué `Verbo`s permite para la
+selección. Todo lo estructural — raíces, cabezas, cono, bifurcación — se
+deriva solo, puro, de las aristas.
+
+El cockpit compartido (`llimphi-widget-navigator::cockpit_grafo_view`) toma
+cualquier `impl GrafoNavegable` y lo pinta con pan/zoom/selección y la paleta
+de verbos. Esta caja NO conoce la UI: sólo topología y vocabulario.
+
+Convención de dirección de arista: `(from, to)` = `ancestro → descendiente`
+(padre → hijo). Así una **raíz** no tiene aristas entrantes (commit inicial)
+y una **cabeza** no tiene salientes (tip / mensaje sin respuesta) — coincide
+con `minga::GrafoCommits` y con el layout por rango del nodegraph.
+
+---
+
+Parte de **shared** — ver [shared](../LEEME.md).
diff --git a/shared/grafo/README.md b/shared/grafo/README.md
new file mode 100644
index 0000000..96cdccd
--- /dev/null
+++ b/shared/grafo/README.md
@@ -0,0 +1,19 @@
+# grafo-nav
+
+The navigable DAG contract, written once.
+
+Any DAG in the repo (Monads, commits, cells, messages) becomes navigable and
+manageable by implementing `GrafoNavegable`: it declares its nodes, its directed
+edges `(parent → child)`, and which `Verbo`s it allows on the selection.
+Everything structural — roots, heads, cone, fork — derives itself, purely, from
+the edges.
+
+The shared cockpit (`llimphi-widget-navigator::cockpit_grafo_view`) takes any
+`impl GrafoNavegable` and paints it with pan/zoom/selection and the verb palette.
+This crate knows NOTHING about the UI: only topology and vocabulary.
+
+Edge direction convention: `(from, to)` = `ancestor → descendant`.
+
+---
+
+Part of **shared** — see [shared](../README.md).
diff --git a/shared/grafo/examples/verbos.rs b/shared/grafo/examples/verbos.rs
new file mode 100644
index 0000000..0dfdc72
--- /dev/null
+++ b/shared/grafo/examples/verbos.rs
@@ -0,0 +1,124 @@
+//! `verbos` — uso canónico de [`grafo_nav`]: cómo un dominio implementa
+//! [`GrafoNavegable`] y resuelve los verbos (*cercenar*, *conciliar*) sobre su
+//! propio modelo. Headless a propósito — certifica la semántica en texto, sin
+//! UI (los adaptadores reales lo copian y le enchufan `cockpit_grafo_view`).
+//!
+//! Correr: `cargo run -p grafo-nav --example verbos`
+
+use grafo_nav::{GrafoNavegable, Nodo, NodoId, Rol, Verbo};
+
+/// Un dominio sintético: una "historia" de nodos encadenados. En un dominio
+/// real esto sería `minga::GrafoCommits`, `ayni::Conversacion`, etc.
+struct Historia {
+    nodos: Vec<(NodoId, String)>,
+    aristas: Vec<(NodoId, NodoId)>,
+    activo: Option<NodoId>,
+}
+
+impl GrafoNavegable for Historia {
+    fn nodos(&self) -> Vec<Nodo> {
+        self.nodos
+            .iter()
+            .map(|(id, et)| {
+                let rol = if self.activo == Some(*id) { Rol::Activo } else { Rol::Normal };
+                Nodo::new(*id, et.clone(), rol)
+            })
+            .collect()
+    }
+
+    fn aristas(&self) -> Vec<(NodoId, NodoId)> {
+        self.aristas.clone()
+    }
+
+    /// La política de verbos del dominio: saltar siempre; restablecer/cercenar
+    /// requieren selección; conciliar sólo si el grafo bifurcó.
+    fn acciones(&self, seleccion: Option<NodoId>) -> Vec<Verbo> {
+        let mut v = vec![Verbo::Saltar];
+        if seleccion.is_some() {
+            v.push(Verbo::Restablecer);
+            v.push(Verbo::Cercenar);
+        }
+        if self.bifurcado() {
+            v.push(Verbo::Conciliar);
+        }
+        v
+    }
+}
+
+impl Historia {
+    /// *Cercenar*: poda un nodo y todo su cono descendente. En minga sería el gc
+    /// de inalcanzables; en un notebook, borrar la celda con sus dependientes.
+    fn cercenar(&mut self, id: NodoId) {
+        let cono = self.cono_descendente(id); // ya ordenado, incluye `id`
+        self.nodos.retain(|(n, _)| !cono.contains(n));
+        self.aristas
+            .retain(|(f, t)| !cono.contains(f) && !cono.contains(t));
+        if self.activo.map(|a| cono.contains(&a)).unwrap_or(false) {
+            self.activo = None;
+        }
+    }
+
+    /// *Conciliar*: si hay bifurcación, crea un nodo-merge que apunta desde todas
+    /// las cabezas — la fusión de minga, el merge de cabezas de ayni.
+    fn conciliar(&mut self, nuevo_id: NodoId, etiqueta: &str) {
+        let mut cabezas = self.cabezas();
+        cabezas.sort_unstable();
+        if cabezas.len() < 2 {
+            return;
+        }
+        self.nodos.push((nuevo_id, etiqueta.to_string()));
+        for c in cabezas {
+            self.aristas.push((c, nuevo_id));
+        }
+        self.activo = Some(nuevo_id);
+    }
+}
+
+fn resumen(h: &Historia, titulo: &str) {
+    let mut cabezas = h.cabezas();
+    cabezas.sort_unstable();
+    println!("── {titulo}");
+    println!("   nodos={}  raíces={:?}  cabezas={:?}  bifurcado={}",
+        h.nodos.len(), h.raices(), cabezas, h.bifurcado());
+}
+
+fn main() {
+    // Diamante con una cabeza extra suelta:
+    //   1→2, 1→3, 2→4, 3→4  (diamante)   +   1→5  (cabeza suelta)
+    let mut h = Historia {
+        nodos: vec![
+            (1, "raíz".into()),
+            (2, "rama A".into()),
+            (3, "rama B".into()),
+            (4, "merge previo".into()),
+            (5, "experimento".into()),
+        ],
+        aristas: vec![(1, 2), (1, 3), (2, 4), (3, 4), (1, 5)],
+        activo: Some(4),
+    };
+
+    resumen(&h, "inicial");
+    println!("   acciones(sel=Some(5)) = {:?}",
+        h.acciones(Some(5)).iter().map(|v| v.etiqueta()).collect::<Vec<_>>());
+
+    // Cercenar el experimento (nodo 5): desaparece esa cabeza suelta.
+    println!("\n>> Cercenar(5)  — poda el nodo y su cono");
+    h.cercenar(5);
+    resumen(&h, "tras cercenar");
+    assert!(!h.nodos.iter().any(|(n, _)| *n == 5), "5 fue podado");
+    assert!(!h.bifurcado(), "ya no bifurca: única cabeza = 4");
+
+    // Forzar una bifurcación nueva y conciliarla.
+    println!("\n>> añadir una rama divergente y Conciliar");
+    h.nodos.push((6, "hotfix".into()));
+    h.aristas.push((1, 6)); // 6 cuelga de la raíz → segunda cabeza
+    resumen(&h, "con divergencia");
+    assert!(h.bifurcado(), "dos cabezas: 4 y 6");
+    h.conciliar(7, "conciliación");
+    resumen(&h, "tras conciliar");
+    assert!(!h.bifurcado(), "conciliado: única cabeza = 7");
+    assert_eq!(h.cabezas(), vec![7]);
+    assert_eq!(h.activo, Some(7));
+
+    println!("\nOK — verbos cercenar/conciliar coherentes con la estructura derivada.");
+}
diff --git a/shared/grafo/src/lib.rs b/shared/grafo/src/lib.rs
new file mode 100644
index 0000000..9c51af9
--- /dev/null
+++ b/shared/grafo/src/lib.rs
@@ -0,0 +1,262 @@
+// =============================================================================
+//  grafo-nav — el contrato del DAG navegable, una sola vez (PLAN-GRAFO F1)
+// -----------------------------------------------------------------------------
+//  Un DAG cualquiera del repo (Mónadas, commits, celdas, mensajes) se vuelve
+//  navegable y gestionable implementando [`GrafoNavegable`]: dice sus nodos, sus
+//  aristas dirigidas `(padre → hijo)`, y qué [`Verbo`]s permite para la
+//  selección. Todo lo estructural — raíces, cabezas, cono, bifurcación — se
+//  deriva solo, puro, de las aristas.
+//
+//  El cockpit compartido (`llimphi-widget-navigator::cockpit_grafo_view`) toma
+//  cualquier `impl GrafoNavegable` y lo pinta con pan/zoom/selección y la paleta
+//  de verbos. Esta caja NO conoce la UI: sólo topología y vocabulario.
+//
+//  Convención de dirección de arista: `(from, to)` = `ancestro → descendiente`
+//  (padre → hijo). Así una **raíz** no tiene aristas entrantes (commit inicial)
+//  y una **cabeza** no tiene salientes (tip / mensaje sin respuesta) — coincide
+//  con `minga::GrafoCommits` y con el layout por rango del nodegraph.
+// =============================================================================
+
+#![no_std]
+#![forbid(unsafe_code)]
+
+extern crate alloc;
+
+use alloc::string::String;
+use alloc::vec::Vec;
+
+/// Identificador opaco de un nodo. Lo asigna el dominio (un índice a su propio
+/// mapa `id → CommitHash | MensajeId | MonadId`); el visor no lo interpreta.
+pub type NodoId = u64;
+
+/// Estado **de dominio** de un nodo — lo que la topología no puede deducir sola
+/// (a diferencia de raíz/cabeza, que sí se derivan de las aristas). Elige tinte
+/// y matiza los verbos.
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Rol {
+    /// Nodo interior corriente.
+    Normal,
+    /// El nodo "activo": HEAD actual, celda en foco, último leído.
+    Activo,
+    /// Marcado como desactualizado por el dominio (hija stale de pluma, celda
+    /// con dependencia cambiada) — candidato a *restablecer*.
+    Stale,
+    /// Inalcanzable / colgante — candidato a *cercenar*.
+    Huerfano,
+}
+
+impl Default for Rol {
+    fn default() -> Self {
+        Rol::Normal
+    }
+}
+
+/// Un nodo del grafo: id opaco, etiqueta legible y su rol de dominio.
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct Nodo {
+    pub id: NodoId,
+    pub etiqueta: String,
+    pub rol: Rol,
+}
+
+impl Nodo {
+    pub fn new(id: NodoId, etiqueta: impl Into<String>, rol: Rol) -> Self {
+        Self { id, etiqueta: etiqueta.into(), rol }
+    }
+}
+
+/// Los cuatro verbos compartidos. El mismo vocabulario para todos los dominios;
+/// cada uno los implementa a su manera (minga: checkout/gc/fusionar; ayni: merge
+/// de cabezas; notebook: run_from / borrar celda).
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Verbo {
+    /// Enfocar / ir al nodo (navegación pura, siempre disponible).
+    Saltar,
+    /// Mover el puntero/HEAD a este nodo (reset, checkout, re-ejecutar cono).
+    Restablecer,
+    /// Podar este nodo y su cono descendente (gc, borrar celda + dependientes).
+    Cercenar,
+    /// Unir cabezas divergentes (fusionar commits, merge de mensajes/CRDT).
+    Conciliar,
+}
+
+impl Verbo {
+    /// Rótulo para el menú contextual del cockpit.
+    pub fn etiqueta(self) -> &'static str {
+        match self {
+            Verbo::Saltar => "Saltar",
+            Verbo::Restablecer => "Restablecer",
+            Verbo::Cercenar => "Cercenar",
+            Verbo::Conciliar => "Conciliar",
+        }
+    }
+
+    /// Los cuatro, en orden canónico (de menos a más destructivo).
+    pub const TODOS: [Verbo; 4] = [
+        Verbo::Saltar,
+        Verbo::Restablecer,
+        Verbo::Cercenar,
+        Verbo::Conciliar,
+    ];
+}
+
+/// El contrato. Un dominio lo implementa sobre su modelo ya existente; las
+/// derivadas estructurales vienen gratis.
+pub trait GrafoNavegable {
+    /// Los nodos a mostrar.
+    fn nodos(&self) -> Vec<Nodo>;
+
+    /// Aristas dirigidas `(ancestro, descendiente)`.
+    fn aristas(&self) -> Vec<(NodoId, NodoId)>;
+
+    /// Verbos permitidos para la selección (o para el grafo entero si `None`).
+    /// El dominio decide la política: p.ej. `Conciliar` sólo si hay bifurcación,
+    /// `Restablecer` sólo sobre un nodo histórico, `Cercenar` sólo lo inalcanzable.
+    fn acciones(&self, seleccion: Option<NodoId>) -> Vec<Verbo>;
+
+    // ── derivadas puras (default; el dominio rara vez las sobreescribe) ──────
+
+    /// Raíces: nodos sin aristas entrantes (ancestros de todo).
+    fn raices(&self) -> Vec<NodoId> {
+        let edges = self.aristas();
+        self.nodos()
+            .into_iter()
+            .map(|n| n.id)
+            .filter(|id| !edges.iter().any(|(_, t)| t == id))
+            .collect()
+    }
+
+    /// Cabezas: nodos sin aristas salientes (los tips / lo más nuevo).
+    fn cabezas(&self) -> Vec<NodoId> {
+        let edges = self.aristas();
+        self.nodos()
+            .into_iter()
+            .map(|n| n.id)
+            .filter(|id| !edges.iter().any(|(f, _)| f == id))
+            .collect()
+    }
+
+    /// `true` si el grafo **bifurcó** (más de una cabeza) — condición para que
+    /// *conciliar* tenga sentido.
+    fn bifurcado(&self) -> bool {
+        self.cabezas().len() > 1
+    }
+
+    /// Cono **ascendente** de `id`: sus ancestros, incluido `id`.
+    fn cono_ascendente(&self, id: NodoId) -> Vec<NodoId> {
+        cono(&self.aristas(), id, Sentido::Arriba)
+    }
+
+    /// Cono **descendente** de `id`: sus descendientes, incluido `id` (lo que se
+    /// arrastra al *cercenar*).
+    fn cono_descendente(&self, id: NodoId) -> Vec<NodoId> {
+        cono(&self.aristas(), id, Sentido::Abajo)
+    }
+}
+
+#[derive(Clone, Copy)]
+enum Sentido {
+    Arriba,
+    Abajo,
+}
+
+/// BFS del cono en un sentido, con dedup por `Vec::contains` (sin `std`; apto
+/// para los grafos modestos que maneja un cockpit interactivo).
+fn cono(edges: &[(NodoId, NodoId)], id: NodoId, sentido: Sentido) -> Vec<NodoId> {
+    let mut visto: Vec<NodoId> = Vec::new();
+    visto.push(id);
+    let mut i = 0;
+    while i < visto.len() {
+        let cur = visto[i];
+        i += 1;
+        for &(f, t) in edges {
+            let vecino = match sentido {
+                Sentido::Arriba if t == cur => Some(f),
+                Sentido::Abajo if f == cur => Some(t),
+                _ => None,
+            };
+            if let Some(v) = vecino {
+                if !visto.contains(&v) {
+                    visto.push(v);
+                }
+            }
+        }
+    }
+    visto.sort_unstable();
+    visto
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use alloc::vec;
+
+    /// Grafo sintético en diamante con una segunda cabeza suelta:
+    ///   1 → 2, 1 → 3, 2 → 4, 3 → 4   (diamante),   1 → 5   (cabeza extra)
+    /// Raíz: 1.  Cabezas: 4 y 5  ⇒ bifurcado.
+    struct Diamante;
+    impl GrafoNavegable for Diamante {
+        fn nodos(&self) -> Vec<Nodo> {
+            vec![
+                Nodo::new(1, "raíz", Rol::Normal),
+                Nodo::new(2, "A", Rol::Normal),
+                Nodo::new(3, "B", Rol::Normal),
+                Nodo::new(4, "merge", Rol::Activo),
+                Nodo::new(5, "suelto", Rol::Huerfano),
+            ]
+        }
+        fn aristas(&self) -> Vec<(NodoId, NodoId)> {
+            vec![(1, 2), (1, 3), (2, 4), (3, 4), (1, 5)]
+        }
+        fn acciones(&self, seleccion: Option<NodoId>) -> Vec<Verbo> {
+            let mut v = vec![Verbo::Saltar];
+            if seleccion.is_some() {
+                v.push(Verbo::Cercenar);
+            }
+            if self.bifurcado() {
+                v.push(Verbo::Conciliar);
+            }
+            v
+        }
+    }
+
+    #[test]
+    fn raices_y_cabezas_derivadas() {
+        let g = Diamante;
+        assert_eq!(g.raices(), vec![1]);
+        let mut cab = g.cabezas();
+        cab.sort_unstable();
+        assert_eq!(cab, vec![4, 5]);
+        assert!(g.bifurcado(), "dos cabezas ⇒ bifurcado");
+    }
+
+    #[test]
+    fn conos_ascendente_y_descendente() {
+        let g = Diamante;
+        assert_eq!(g.cono_ascendente(4), vec![1, 2, 3, 4]);
+        assert_eq!(g.cono_descendente(1), vec![1, 2, 3, 4, 5]);
+        // una hoja sólo se contiene a sí misma hacia abajo.
+        assert_eq!(g.cono_descendente(4), vec![4]);
+        // una raíz sólo se contiene a sí misma hacia arriba.
+        assert_eq!(g.cono_ascendente(1), vec![1]);
+    }
+
+    #[test]
+    fn acciones_dependen_de_la_seleccion() {
+        let g = Diamante;
+        // Sin selección: no ofrece cercenar.
+        let sin = g.acciones(None);
+        assert!(sin.contains(&Verbo::Saltar));
+        assert!(!sin.contains(&Verbo::Cercenar));
+        assert!(sin.contains(&Verbo::Conciliar)); // bifurcado
+        // Con selección: aparece cercenar.
+        assert!(g.acciones(Some(4)).contains(&Verbo::Cercenar));
+    }
+
+    #[test]
+    fn verbo_etiquetas_y_orden() {
+        assert_eq!(Verbo::TODOS.len(), 4);
+        assert_eq!(Verbo::Saltar.etiqueta(), "Saltar");
+        assert_eq!(Verbo::Conciliar.etiqueta(), "Conciliar");
+    }
+}
diff --git a/widgets/app-header/Cargo.toml b/widgets/app-header/Cargo.toml
index 31b5e18..8cfba03 100644
--- a/widgets/app-header/Cargo.toml
+++ b/widgets/app-header/Cargo.toml
@@ -5,10 +5,12 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-app-header — tira superior estándar para apps Llimphi: label dinámico a la izquierda + slot de acciones opcional a la derecha. Análogo Llimphi al `nahual-widget-app-header` GPUI."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
 llimphi-widget-panel = { workspace = true }
+# Ícono de marca de la app en el titlebar (app_header_iconed).
+llimphi-icons = { workspace = true }
diff --git a/widgets/app-header/src/lib.rs b/widgets/app-header/src/lib.rs
index f9f7d65..f37edf7 100644
--- a/widgets/app-header/src/lib.rs
+++ b/widgets/app-header/src/lib.rs
@@ -57,6 +57,9 @@ impl AppHeaderPalette {
     }
 }
 
+/// Re-export del catálogo de íconos de marca para [`app_header_iconed`].
+pub use llimphi_icons::app_icons::AppIcon;
+
 /// Header con `label` a la izquierda y `actions` a la derecha. `actions`
 /// es vacío para apps sin toolbar; viene como Vec para que la app meta
 /// botones / switcher / status pill / lo que necesite.
@@ -65,6 +68,54 @@ pub fn app_header<Msg: Clone + 'static>(
     actions: Vec<View<Msg>>,
     palette: &AppHeaderPalette,
 ) -> View<Msg> {
+    header_impl(None, label, actions, palette)
+}
+
+/// Como [`app_header`] pero con el **ícono de marca** de la app a la izquierda
+/// del título (titlebar con identidad). El ícono se pinta vectorial, en su color
+/// de marca — determinista en toda máquina.
+pub fn app_header_iconed<Msg: Clone + 'static>(
+    icon: AppIcon,
+    label: impl Into<String>,
+    actions: Vec<View<Msg>>,
+    palette: &AppHeaderPalette,
+) -> View<Msg> {
+    header_impl(Some(icon), label, actions, palette)
+}
+
+fn header_impl<Msg: Clone + 'static>(
+    icon: Option<AppIcon>,
+    label: impl Into<String>,
+    actions: Vec<View<Msg>>,
+    palette: &AppHeaderPalette,
+) -> View<Msg> {
+    // Caja del ícono de marca (si hay), cuadrada, centrada vertical.
+    let icon_box = icon.map(|ic| {
+        let side = (palette.height * 0.5).clamp(16.0, 26.0);
+        // Spacer izquierdo (14px) + caja cuadrada del ícono — sin `margin` para
+        // no pelearnos con el tipo LengthPercentageAuto de taffy.
+        View::new(Style {
+            flex_direction: FlexDirection::Row,
+            size: Size { width: length(side + 14.0), height: length(palette.height) },
+            flex_shrink: 0.0,
+            padding: Rect {
+                left: length(14.0_f32),
+                right: length(0.0_f32),
+                top: length(0.0_f32),
+                bottom: length(0.0_f32),
+            },
+            align_items: Some(AlignItems::Center),
+            ..Default::default()
+        })
+        .children(vec![View::new(Style {
+            size: Size { width: length(side), height: length(side) },
+            flex_shrink: 0.0,
+            ..Default::default()
+        })
+        .children(vec![llimphi_icons::app_icons::app_icon_view(ic, 1.8)])])
+    });
+    // Con ícono, el título arranca más cerca (el ícono ya da el aire izquierdo).
+    let label_left: f32 = if icon.is_some() { 10.0 } else { 16.0 };
     let label_view = View::new(Style {
         size: Size {
             width: percent(1.0_f32),
@@ -72,7 +123,7 @@ pub fn app_header<Msg: Clone + 'static>(
         },
         flex_grow: 1.0,
         padding: Rect {
-            left: length(16.0_f32),
+            left: length(label_left),
             right: length(16.0_f32),
             top: length(0.0_f32),
             bottom: length(0.0_f32),
@@ -119,13 +170,17 @@ pub fn app_header<Msg: Clone + 'static>(
         align_items: Some(AlignItems::Center),
         ..Default::default()
     };
+    let mut bar_children: Vec<View<Msg>> = Vec::with_capacity(3);
+    if let Some(b) = icon_box {
+        bar_children.push(b);
+    }
+    bar_children.push(label_view);
+    bar_children.push(actions_view);
     let bar = match palette.signature {
         Some(style) => View::new(bar_style)
             .paint_with(panel_signature_painter(style))
-            .children(vec![label_view, actions_view]),
-        None => View::new(bar_style)
-            .fill(palette.bg)
-            .children(vec![label_view, actions_view]),
+            .children(bar_children),
+        None => View::new(bar_style).fill(palette.bg).children(bar_children),
     };
 
     let underline = View::new(Style {
diff --git a/widgets/avatar/Cargo.toml b/widgets/avatar/Cargo.toml
index 72684ca..862fb0a 100644
--- a/widgets/avatar/Cargo.toml
+++ b/widgets/avatar/Cargo.toml
@@ -5,8 +5,8 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-avatar — círculo de identidad con inicial sobre color generado del hash del nombre. Determinista (mismo nombre → mismo color) y tonal (paleta limitada para que no choque)."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
diff --git a/widgets/avatar/LEEME.md b/widgets/avatar/LEEME.md
new file mode 100644
index 0000000..fa3cd89
--- /dev/null
+++ b/widgets/avatar/LEEME.md
@@ -0,0 +1,20 @@
+# llimphi-widget-avatar
+
+*Read this in English: [README.md](README.md).*
+
+Círculo de identidad con inicial.
+
+Genera un avatar **determinista** de un nombre: el color de fondo
+viene de un hash del nombre, mapeado a una paleta limitada de 8
+tonos (para que dos usuarios distintos no acaben con colores que
+se confundan). La inicial es la primera letra del nombre (uppercase),
+pintada centrada en blanco-cálido.
+
+Útil para chats (ayni), authorship en pluma, presencia en
+herramientas colaborativas. Una sola función — sin state, sin
+animación, sin paleta configurable (la consistencia importa más
+que la personalización).
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/avatar/README.md b/widgets/avatar/README.md
new file mode 100644
index 0000000..a8687d5
--- /dev/null
+++ b/widgets/avatar/README.md
@@ -0,0 +1,16 @@
+# llimphi-widget-avatar
+
+Identity circle with an initial.
+
+Generates a **deterministic** avatar from a name: the background colour comes
+from a hash of the name, mapped onto a limited palette of 8 tones (so two
+different users don't end up with colours that are easy to confuse). The initial
+is the first letter of the name (uppercased), painted centred in warm white.
+
+Useful for chats (suilad), authorship in pluma, presence in collaborative tools.
+A single function — no state, no animation, no configurable palette (consistency
+matters more than personalization here).
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/badge/Cargo.toml b/widgets/badge/Cargo.toml
index 5cfeed3..8a232cd 100644
--- a/widgets/badge/Cargo.toml
+++ b/widgets/badge/Cargo.toml
@@ -5,8 +5,8 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-badge — chip pequeño (count o dot) para notificaciones, contadores, estado de conexión. Cuatro variants semánticas."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
diff --git a/widgets/badge/LEEME.md b/widgets/badge/LEEME.md
new file mode 100644
index 0000000..7710f0f
--- /dev/null
+++ b/widgets/badge/LEEME.md
@@ -0,0 +1,19 @@
+# llimphi-widget-badge
+
+*Read this in English: [README.md](README.md).*
+
+Chip pequeño para conteo o estado.
+
+Dos formas:
+- `count_badge_view(n, kind)` — chip ovalado con número adentro
+  ("3", "12", "99+"). Para notificaciones, items sin leer, etc.
+- `dot_badge_view(kind)` — círculo de 8px sin contenido. Para
+  estado de conexión (online/offline/idle) o "hay algo nuevo".
+
+Cuatro `BadgeKind` con paleta semántica (Info / Success / Warning
+/ Error / Neutral) — los colores no cambian con el theme para
+mantener la consistencia semántica.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/badge/README.md b/widgets/badge/README.md
new file mode 100644
index 0000000..51abe4b
--- /dev/null
+++ b/widgets/badge/README.md
@@ -0,0 +1,18 @@
+# llimphi-widget-badge
+
+Small chip for a count or a status.
+
+Two shapes:
+
+- `count_badge_view(n, kind)` — oval chip with a number inside ("3", "12",
+  "99+"). For notifications, unread items and so on.
+- `dot_badge_view(kind)` — an 8px circle with no content. For connection state
+  (online/offline/idle) or "there is something new".
+
+Four `BadgeKind`s with a semantic palette (Info / Success / Warning / Error /
+Neutral) — the colours do **not** change with the theme, so the semantics stay
+consistent.
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/banner/Cargo.toml b/widgets/banner/Cargo.toml
index d29efa3..6e23b9c 100644
--- a/widgets/banner/Cargo.toml
+++ b/widgets/banner/Cargo.toml
@@ -5,8 +5,8 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-banner — tiras horizontales de status (Info/Success/Warning/Error). Colores semánticos hardcoded por severidad — no dependen del theme. Análogo Llimphi al `nahual-widget-banner` GPUI."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
diff --git a/widgets/banner/src/lib.rs b/widgets/banner/src/lib.rs
index 406eb8b..794f1ce 100644
--- a/widgets/banner/src/lib.rs
+++ b/widgets/banner/src/lib.rs
@@ -75,7 +75,7 @@ pub fn banner_view<Msg: Clone + 'static>(
     })
     .fill(kind.fg());
 
-    // Contenedor del mensaje: padding original ahora vive acá para que
+    // Contenedor del mensaje: padding original ahora vive aquí para que
     // el rail pegue al borde sin offset y el texto arranque después.
     let body = View::new(Style {
         size: Size {
diff --git a/widgets/breadcrumb/Cargo.toml b/widgets/breadcrumb/Cargo.toml
index bf8a7bb..efa0f3d 100644
--- a/widgets/breadcrumb/Cargo.toml
+++ b/widgets/breadcrumb/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-breadcrumb — ruta navegable con separadores chevron. Cada segmento clicable salta a su nivel."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/breadcrumb/LEEME.md b/widgets/breadcrumb/LEEME.md
new file mode 100644
index 0000000..f550524
--- /dev/null
+++ b/widgets/breadcrumb/LEEME.md
@@ -0,0 +1,13 @@
+# llimphi-widget-breadcrumb
+
+*Read this in English: [README.md](README.md).*
+
+Ruta navegable con separadores chevron.
+
+Patrón clásico: `home › docs › 2026 › nota.md`. Cada segmento es
+clicable y emite un Msg con su índice. El último segmento (la
+"página actual") se renderiza con énfasis y sin click handler.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/breadcrumb/README.md b/widgets/breadcrumb/README.md
new file mode 100644
index 0000000..c8c324f
--- /dev/null
+++ b/widgets/breadcrumb/README.md
@@ -0,0 +1,11 @@
+# llimphi-widget-breadcrumb
+
+Navigable path with chevron separators.
+
+The classic pattern: `home › docs › 2026 › note.md`. Every segment is clickable
+and emits a `Msg` with its index. The last segment (the "current page") is
+rendered with emphasis and no click handler.
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/breadcrumb/src/lib.rs b/widgets/breadcrumb/src/lib.rs
index f5d1c6a..81d92b5 100644
--- a/widgets/breadcrumb/src/lib.rs
+++ b/widgets/breadcrumb/src/lib.rs
@@ -91,10 +91,11 @@ fn segment_view<Msg: Clone + 'static>(
     palette: &BreadcrumbPalette,
 ) -> View<Msg> {
     let fg = if is_current { palette.fg_current } else { palette.fg_link };
-    let approx_w = label.chars().count() as f32 * 6.5 + SEG_PAD * 2.0;
+    // Ancho por glifos reales (fuente proporcional), no `chars*const`.
+    let seg_w = llimphi_ui::llimphi_text::text_width(label, FONT) + SEG_PAD * 2.0;
     let mut node = View::new(Style {
         size: Size {
-            width: length(approx_w),
+            width: length(seg_w),
             height: length(SEG_H),
         },
         align_items: Some(AlignItems::Center),
diff --git a/widgets/button/Cargo.toml b/widgets/button/Cargo.toml
index 0e1fae5..e6fd20c 100644
--- a/widgets/button/Cargo.toml
+++ b/widgets/button/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-button — botón clicable con estado hover. Reusable entre apps Llimphi; cambia el bg cuando el cursor pasa por encima. Compuesto de `View::fill().hover_fill().on_click()` con una paleta tematizable."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/button/examples/button_demo.rs b/widgets/button/examples/button_demo.rs
index 2e0381f..c523b03 100644
--- a/widgets/button/examples/button_demo.rs
+++ b/widgets/button/examples/button_demo.rs
@@ -1,6 +1,6 @@
 //! Showcase de `llimphi-widget-button`: tres botones con hover.
 //!
-//! Corré con: `cargo run -p llimphi-widget-button --example showcase --release`.
+//! Corre con: `cargo run -p llimphi-widget-button --example showcase --release`.
 
 use llimphi_ui::llimphi_layout::taffy::{
     prelude::{length, percent, FlexDirection, Size, Style},
diff --git a/widgets/button/src/lib.rs b/widgets/button/src/lib.rs
index a1ee64d..68e9d3f 100644
--- a/widgets/button/src/lib.rs
+++ b/widgets/button/src/lib.rs
@@ -87,6 +87,31 @@ fn ripple_ink(palette: &ButtonPalette) -> Color {
     Color { components: [c[0], c[1], c[2], 0.22], ..palette.fg }
 }
 
+/// Mezcla lineal `a → b` por `t∈[0,1]` en el espacio de `components`,
+/// conservando el alpha de `a`. Base de los tintes derivados (sheen, borde).
+fn mix(a: Color, b: Color, t: f32) -> Color {
+    let (ca, cb) = (a.components, b.components);
+    Color {
+        components: [
+            ca[0] + (cb[0] - ca[0]) * t,
+            ca[1] + (cb[1] - ca[1]) * t,
+            ca[2] + (cb[2] - ca[2]) * t,
+            ca[3],
+        ],
+        ..a
+    }
+}
+
+/// Luminancia percibida (Rec. 709) del color — decide si el botón es claro u
+/// oscuro para modular sheen/borde/sombra sin depender del nombre del theme.
+fn luminance(c: Color) -> f32 {
+    let k = c.components;
+    0.2126 * k[0] + 0.7152 * k[1] + 0.0722 * k[2]
+}
+
+const WHITE: Color = Color::from_rgba8(255, 255, 255, 255);
+const BLACK: Color = Color::from_rgba8(0, 0, 0, 255);
+
 /// Como [`button_view`] pero con feedback **ripple/InkWell**: al presionarlo
 /// emite la salpicadura Material (círculo que se expande desde el punto del
 /// tap y se desvanece, recortado al contorno del botón). `key` debe ser
@@ -117,18 +142,52 @@ pub fn button_styled<Msg: Clone + 'static>(
     // caller le pasó un label vacío (botones puramente icónicos), igual sale
     // como Button — lo correcto es agregarle un aria_label propio desde fuera.
     let aria = label.clone();
-    // Gloss superior: gradient blanco alpha 28 → 0 sobre la mitad de
-    // arriba. `paint_with` corre entre el fill (que respeta hover_fill)
-    // y el texto, así que la luz se suma al color de base sin sustituirlo
-    // — el hover sigue funcionando idéntico. El RoundedRect cubre el
-    // botón completo y `Extend::Pad` (default de peniko) deja la mitad
-    // inferior en alpha 0. Match: chrome/splash — superficie con luz
-    // descendente desde el edge superior.
     let radius = palette.radius;
+    let bg = palette.bg;
+    // Luminancia del botón: gobierna la intensidad y la dirección del relieve
+    // para que se vea igual de refinado en themes claros y oscuros (sin mirar
+    // el nombre del theme). `dark` alto ⇒ botón oscuro.
+    let lum = luminance(bg);
+    let dark = 1.0 - lum;
+
+    // --- Capa 1: sombra suave y ceñida (elevación discreta) ---------------
+    // `spread: -1` la deja un pelo más chica que el botón: levanta sin flotar.
+    // Sobre fondo claro es la que da la profundidad; sobre fondo oscuro casi no
+    // se ve (una sombra negra sobre negro no lee) y el relieve lo carga el
+    // borde-luz de abajo. Alpha modesto para no ensuciar toolbars densas.
+    let shadow = llimphi_ui::Shadow {
+        color: Color::from_rgba8(0, 0, 0, 38),
+        blur: 5.0,
+        dx: 0.0,
+        dy: 1.5,
+        spread: -1.0,
+    };
+
+    // --- Capa 2: borde hairline (contorno/bisel) --------------------------
+    // En botón oscuro, un borde un toque más CLARO lee como rim-light/bisel;
+    // en botón claro, uno más OSCURO da un canto nítido. 1 px, sutil.
+    let border_col = if lum < 0.5 {
+        mix(bg, WHITE, 0.16)
+    } else {
+        mix(bg, BLACK, 0.14)
+    };
+
+    // --- Capa 4: sheen vertical translúcido (dimensión) -------------------
+    // Va en `paint_with` (entre el fill —que respeta hover_fill— y el texto),
+    // así el relieve se SUMA al color base y el hover sigue intacto. 3 stops:
+    // luz arriba → neutro al medio → sombra abajo. La luz sube cuanto más
+    // oscuro el botón (`dark`); la sombra de abajo es constante y tenue.
+    let top_a = (0.10 + 0.12 * dark).min(0.22);
+    let sheen_top = Color { components: [1.0, 1.0, 1.0, top_a], ..WHITE };
+    let sheen_mid = Color::from_rgba8(255, 255, 255, 0);
+    let sheen_bot = Color::from_rgba8(0, 0, 0, 26);
+
     View::new(style)
         .fill(palette.bg)
         .hover_fill(palette.bg_hover)
         .radius(radius)
+        .shadow(shadow)
+        .border(1.0, border_col)
         .paint_with(move |scene, _ts, rect| {
             use llimphi_ui::llimphi_raster::kurbo::{Affine, Point, RoundedRect};
             use llimphi_ui::llimphi_raster::peniko::{Fill, Gradient};
@@ -139,13 +198,17 @@ pub fn button_styled<Msg: Clone + 'static>(
             let y0 = rect.y as f64;
             let x1 = (rect.x + rect.w) as f64;
             let y1 = (rect.y + rect.h) as f64;
-            let y_mid = y0 + (y1 - y0) * 0.5;
             let rr = RoundedRect::new(x0, y0, x1, y1, radius);
-            let top = Color::from_rgba8(255, 255, 255, 28);
-            let bot = Color::from_rgba8(255, 255, 255, 0);
-            let gradient = Gradient::new_linear(Point::new(x0, y0), Point::new(x0, y_mid))
-                .with_stops([top, bot].as_slice());
-            scene.fill(Fill::NonZero, Affine::IDENTITY, &gradient, None, &rr);
+            // Sheen de arriba a abajo sobre todo el alto.
+            let sheen = Gradient::new_linear(Point::new(x0, y0), Point::new(x0, y1))
+                .with_stops([sheen_top, sheen_mid, sheen_bot].as_slice());
+            scene.fill(Fill::NonZero, Affine::IDENTITY, &sheen, None, &rr);
+            // Specular: hairline brillante pegado al borde superior interno —
+            // el catch-light que hace que el canto "prenda". 1.2 px de alto.
+            let inset = radius.min(1.0).max(0.5);
+            let cap = RoundedRect::new(x0 + inset, y0 + 0.6, x1 - inset, y0 + 1.8, radius * 0.5);
+            let spec = Color { components: [1.0, 1.0, 1.0, (0.22 + 0.20 * dark).min(0.5)], ..WHITE };
+            scene.fill(Fill::NonZero, Affine::IDENTITY, &spec, None, &cap);
         })
         .text_aligned(label, 13.0, palette.fg, text_alignment)
         .role(llimphi_ui::Role::Button)
diff --git a/widgets/calendar/Cargo.toml b/widgets/calendar/Cargo.toml
index 8b0f5fa..732c197 100644
--- a/widgets/calendar/Cargo.toml
+++ b/widgets/calendar/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-calendar — vista mensual del calendario (grilla 7×6) con navegación entre meses, día seleccionado y día actual resaltados. Base del date-picker; útil también solo para agendas, planning y ERP."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/calendar/LEEME.md b/widgets/calendar/LEEME.md
new file mode 100644
index 0000000..14fb2be
--- /dev/null
+++ b/widgets/calendar/LEEME.md
@@ -0,0 +1,22 @@
+# llimphi-widget-calendar
+
+*Read this in English: [README.md](README.md).*
+
+Vista mensual del calendario.
+
+Una grilla 7 (columnas = días de la semana) × 6 (filas = semanas)
+mostrando los días del mes en foco, con header de mes/año + flechas de
+navegación, fila de iniciales de día, día seleccionado y día actual
+resaltados. El widget **no tiene estado propio**: el mes en foco, la
+selección y la fecha "hoy" viven en el `Model` del caller; el widget
+emite `Msg`s para navegar y para seleccionar.
+
+Base del **date-picker** (un `field` + un overlay que muestra este
+calendar) y útil por sí solo para agendas, planning, ERP. La lógica
+del calendario (días del mes, primer día de la semana, grilla 6×7) es
+pública y testeable: ver `days_in_month`, `first_weekday`,
+`month_grid`.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/calendar/README.md b/widgets/calendar/README.md
new file mode 100644
index 0000000..b8ab64d
--- /dev/null
+++ b/widgets/calendar/README.md
@@ -0,0 +1,18 @@
+# llimphi-widget-calendar
+
+Month view of a calendar.
+
+A 7 (columns = weekdays) × 6 (rows = weeks) grid showing the days of the focused
+month, with a month/year header plus navigation arrows, a row of weekday
+initials, and the selected day and today highlighted. The widget has **no state
+of its own**: the focused month, the selection and "today" live in the caller's
+`Model`; the widget emits `Msg`s to navigate and to select.
+
+It is the base of the **date picker** (a `field` plus an overlay showing this
+calendar) and useful on its own for agendas, planning and ERP screens. The
+calendar logic (days in month, first weekday, the 6×7 grid) is public and
+testable: see `days_in_month`, `first_weekday`, `month_grid`.
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/calendar/src/lib.rs b/widgets/calendar/src/lib.rs
index ef8f8fb..02c16c5 100644
--- a/widgets/calendar/src/lib.rs
+++ b/widgets/calendar/src/lib.rs
@@ -133,6 +133,47 @@ pub fn shift_month(year: i32, month: u32, delta: i32) -> (i32, u32) {
     (y, m)
 }
 
+/// Un movimiento de teclado sobre el calendario, tal como lo mapea un
+/// `<input type=date>` / DatePicker nativo.
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum CalMove {
+    /// ← / → : un día.
+    Day(i32),
+    /// ↑ / ↓ : una semana (∓7 días).
+    Week(i32),
+    /// PageUp / PageDown : un mes (calendario, preserva el día si existe).
+    Month(i32),
+    /// Home / End : primer / último día del mes.
+    MonthEdge(bool),
+}
+
+/// Aplica un [`CalMove`] a la fecha enfocada y devuelve la nueva fecha —
+/// la fuente de verdad de la navegación por teclado (el host guarda la
+/// fecha en foco y dispatcha su `Msg` con este resultado). `Day`/`Week`
+/// usan aritmética de días real (cruzan meses y años); `Month` preserva
+/// el día clampeándolo al último del mes destino (31-ene + 1 mes → 28/29-feb).
+pub fn nav_date(date: NaiveDate, mov: CalMove) -> NaiveDate {
+    match mov {
+        CalMove::Day(n) => date + chrono::Duration::days(n as i64),
+        CalMove::Week(n) => date + chrono::Duration::days((n * 7) as i64),
+        CalMove::Month(n) => {
+            let (y, m) = shift_month(date.year(), date.month(), n);
+            let last = days_in_month(y, m);
+            let day = date.day().min(last);
+            NaiveDate::from_ymd_opt(y, m, day).expect("día clampeado al mes es válido")
+        }
+        CalMove::MonthEdge(to_end) => {
+            let day = if to_end {
+                days_in_month(date.year(), date.month())
+            } else {
+                1
+            };
+            NaiveDate::from_ymd_opt(date.year(), date.month(), day)
+                .expect("borde de mes válido")
+        }
+    }
+}
+
 /// Paleta del calendario.
 #[derive(Debug, Clone, Copy)]
 pub struct CalendarPalette {
@@ -276,7 +317,7 @@ where
     };
     let title = format!("{} {}", month_name_es(view_month), view_year);
     let title_box = View::<Msg>::new(Style {
-        size: Size { width: percent(1.0), height: length(HEADER_H) },
+        size: Size { width: percent(1.0_f32), height: length(HEADER_H) },
         flex_grow: 1.0,
         align_items: Some(AlignItems::Center),
         justify_content: Some(JustifyContent::Center),
@@ -286,7 +327,7 @@ where
     let header = View::<Msg>::new(Style {
         flex_direction: FlexDirection::Row,
         align_items: Some(AlignItems::Center),
-        size: Size { width: percent(1.0), height: length(HEADER_H) },
+        size: Size { width: percent(1.0_f32), height: length(HEADER_H) },
         ..Default::default()
     })
     .children(vec![prev, title_box, next]);
@@ -396,6 +437,32 @@ where
 mod tests {
     use super::*;
 
+    #[test]
+    fn nav_date_dia_y_semana_cruzan_meses() {
+        let d = NaiveDate::from_ymd_opt(2026, 1, 31).unwrap();
+        assert_eq!(nav_date(d, CalMove::Day(1)), NaiveDate::from_ymd_opt(2026, 2, 1).unwrap());
+        assert_eq!(nav_date(d, CalMove::Week(1)), NaiveDate::from_ymd_opt(2026, 2, 7).unwrap());
+        let ene1 = NaiveDate::from_ymd_opt(2026, 1, 1).unwrap();
+        assert_eq!(nav_date(ene1, CalMove::Day(-1)), NaiveDate::from_ymd_opt(2025, 12, 31).unwrap());
+    }
+
+    #[test]
+    fn nav_date_mes_clampa_el_dia_al_destino() {
+        // 31-ene + 1 mes → febrero no tiene 31 → clampa a 28 (2026 no bisiesto).
+        let d = NaiveDate::from_ymd_opt(2026, 1, 31).unwrap();
+        assert_eq!(nav_date(d, CalMove::Month(1)), NaiveDate::from_ymd_opt(2026, 2, 28).unwrap());
+        // En bisiesto clampa a 29.
+        let d24 = NaiveDate::from_ymd_opt(2024, 1, 31).unwrap();
+        assert_eq!(nav_date(d24, CalMove::Month(1)), NaiveDate::from_ymd_opt(2024, 2, 29).unwrap());
+    }
+
+    #[test]
+    fn nav_date_home_end_saltan_a_los_bordes_del_mes() {
+        let d = NaiveDate::from_ymd_opt(2026, 2, 15).unwrap();
+        assert_eq!(nav_date(d, CalMove::MonthEdge(false)), NaiveDate::from_ymd_opt(2026, 2, 1).unwrap());
+        assert_eq!(nav_date(d, CalMove::MonthEdge(true)), NaiveDate::from_ymd_opt(2026, 2, 28).unwrap());
+    }
+
     #[test]
     fn days_in_month_meses_estandar() {
         assert_eq!(days_in_month(2026, 1), 31);
diff --git a/widgets/card/Cargo.toml b/widgets/card/Cargo.toml
index 89117f0..6f56916 100644
--- a/widgets/card/Cargo.toml
+++ b/widgets/card/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-card — container card-shape con padding consistente, esquinas redondeadas y opcional accent border a la izquierda. Análogo Llimphi al `nahual-widget-card` GPUI."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/carousel/Cargo.toml b/widgets/carousel/Cargo.toml
index ce60f65..86acf65 100644
--- a/widgets/carousel/Cargo.toml
+++ b/widgets/carousel/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-carousel — pager paginado de N páginas con dots indicadores y flechas opcionales a los lados. El caller maneja solo `current_index`; cada cambio dispara `on_change(i)`. Útil para onboarding, galerías, slideshows."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/carousel/LEEME.md b/widgets/carousel/LEEME.md
new file mode 100644
index 0000000..bc5d4c3
--- /dev/null
+++ b/widgets/carousel/LEEME.md
@@ -0,0 +1,23 @@
+# llimphi-widget-carousel
+
+*Read this in English: [README.md](README.md).*
+
+Pager paginado.
+
+Una vista que muestra N páginas, una a la vez, con **dots indicadores**
+abajo (clickeables para saltar a la página i) y **flechas opcionales**
+a los costados. El caller mantiene un único `current_index: usize` en
+su modelo y recibe `on_change(i)` cuando el usuario cambia de página.
+
+v1 **sin swipe** — la navegación va por dots y por flechas. Una v2
+puede agregar swipe horizontal usando `View::draggable_velocity` +
+`fling_step` para snap-on-release (el seam ya existe; sumarlo es
+composición).
+
+Helpers puros para wrap/clamp del índice (`wrap_index`,
+`clamp_index`) — útiles para la lógica del `update` del caller (las
+flechas en los extremos pueden envolver o quedarse).
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/carousel/README.md b/widgets/carousel/README.md
new file mode 100644
index 0000000..e7a9b8e
--- /dev/null
+++ b/widgets/carousel/README.md
@@ -0,0 +1,19 @@
+# llimphi-widget-carousel
+
+Paged pager.
+
+A view that shows N pages one at a time, with **indicator dots** at the bottom
+(clickable, to jump to page *i*) and **optional arrows** on the sides. The caller
+keeps a single `current_index: usize` in its model and receives `on_change(i)`
+when the user changes page.
+
+v1 has **no swipe** — navigation goes through dots and arrows. A v2 can add
+horizontal swipe using `View::draggable_velocity` + `fling_step` for
+snap-on-release (the seam already exists; adding it is composition).
+
+Pure helpers for wrapping and clamping the index (`wrap_index`, `clamp_index`)
+— useful in the caller's `update` (arrows at the ends may wrap or stay put).
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/carousel/examples/carousel_demo.rs b/widgets/carousel/examples/carousel_demo.rs
new file mode 100644
index 0000000..25c16ed
--- /dev/null
+++ b/widgets/carousel/examples/carousel_demo.rs
@@ -0,0 +1,145 @@
+//! Showcase de `llimphi-widget-carousel`: 4 páginas de color con dots,
+//! flechas, **swipe** (arrastra la página y suelta), **teclado** (←/→) y
+//! **auto-play** (avanza sola cada 3 s; cualquier interacción no la detiene,
+//! es un demo).
+//!
+//! Corre con: `cargo run -p llimphi-widget-carousel --example carousel_demo --release`.
+
+use std::sync::Arc;
+use std::time::Duration;
+
+use llimphi_ui::llimphi_layout::taffy::{
+    prelude::{percent, Size, Style},
+    AlignItems, JustifyContent,
+};
+use llimphi_ui::llimphi_raster::peniko::Color;
+use llimphi_ui::{App, Handle, Key, KeyEvent, KeyState, NamedKey, View};
+use llimphi_widget_carousel::{
+    carousel_view, navigate, CarouselPalette, CarouselSpec, CarouselTransition, CarouselWrap,
+};
+
+const N: usize = 4;
+/// Cuánto avanza la transición por tick (~60fps → ~180ms de deslizamiento).
+const TRANS_STEP: f32 = 0.12;
+
+#[derive(Clone)]
+enum Msg {
+    Goto(usize),
+    Swipe(i32),
+    Tick,
+    TransTick,
+}
+
+struct Model {
+    current: usize,
+    transition: Option<CarouselTransition>,
+}
+
+/// Arranca una transición desde `from` hacia la página actual.
+fn begin(m: &mut Model, from: usize) {
+    if from != m.current {
+        m.transition = Some(CarouselTransition { from, t: 0.0 });
+    }
+}
+
+struct Showcase;
+
+impl App for Showcase {
+    type Model = Model;
+    type Msg = Msg;
+
+    fn title() -> &'static str {
+        "llimphi · carousel (swipe · ←/→ · auto-play)"
+    }
+
+    fn initial_size() -> (u32, u32) {
+        (720, 480)
+    }
+
+    fn init(handle: &Handle<Msg>) -> Model {
+        // Auto-play: un tick cada 3 s que avanza una página.
+        handle.spawn_periodic(Duration::from_secs(3), || Msg::Tick);
+        // Animación de la transición (~60 fps).
+        handle.spawn_periodic(Duration::from_millis(16), || Msg::TransTick);
+        Model { current: 0, transition: None }
+    }
+
+    fn on_key(_model: &Model, event: &KeyEvent) -> Option<Msg> {
+        if event.state != KeyState::Pressed {
+            return None;
+        }
+        match &event.key {
+            Key::Named(NamedKey::ArrowLeft) => Some(Msg::Swipe(-1)),
+            Key::Named(NamedKey::ArrowRight) => Some(Msg::Swipe(1)),
+            _ => None,
+        }
+    }
+
+    fn update(model: Model, msg: Msg, _: &Handle<Msg>) -> Model {
+        let mut m = model;
+        match msg {
+            Msg::Goto(i) => {
+                let from = m.current;
+                m.current = i.min(N - 1);
+                begin(&mut m, from);
+            }
+            Msg::Swipe(d) => {
+                let from = m.current;
+                m.current = navigate(m.current, N, d, CarouselWrap::Wrap);
+                begin(&mut m, from);
+            }
+            Msg::Tick => {
+                let from = m.current;
+                m.current = navigate(m.current, N, 1, CarouselWrap::Wrap);
+                begin(&mut m, from);
+            }
+            Msg::TransTick => {
+                if let Some(mut tr) = m.transition {
+                    tr.t += TRANS_STEP;
+                    m.transition = if tr.t >= 1.0 { None } else { Some(tr) };
+                }
+            }
+        }
+        m
+    }
+
+    fn view(model: &Model) -> View<Msg> {
+        let colors = [
+            Color::from_rgba8(58, 90, 140, 255),
+            Color::from_rgba8(140, 72, 82, 255),
+            Color::from_rgba8(70, 130, 100, 255),
+            Color::from_rgba8(120, 100, 150, 255),
+        ];
+        let pages: Vec<View<Msg>> = (0..N)
+            .map(|i| {
+                View::new(Style {
+                    size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+                    align_items: Some(AlignItems::Center),
+                    justify_content: Some(JustifyContent::Center),
+                    ..Default::default()
+                })
+                .fill(colors[i])
+                .text(
+                    format!("Página {}", i + 1),
+                    28.0,
+                    Color::from_rgba8(240, 244, 250, 255),
+                )
+            })
+            .collect();
+
+        carousel_view(CarouselSpec {
+            pages,
+            current: model.current,
+            wrap: CarouselWrap::Wrap,
+            show_arrows: true,
+            palette: CarouselPalette::default(),
+            on_change: Arc::new(Msg::Goto),
+            on_swipe: Some(Arc::new(Msg::Swipe)),
+            transition: model.transition,
+        })
+    }
+}
+
+fn main() {
+    llimphi_ui::run::<Showcase>();
+}
diff --git a/widgets/carousel/src/lib.rs b/widgets/carousel/src/lib.rs
index 0784119..201d2dc 100644
--- a/widgets/carousel/src/lib.rs
+++ b/widgets/carousel/src/lib.rs
@@ -111,6 +111,57 @@ pub fn navigate(current: usize, total: usize, delta: i32, wrap: CarouselWrap) ->
     }
 }
 
+/// Umbral de distancia (px) para que un swipe cambie de página.
+pub const SWIPE_DIST: f32 = 50.0;
+/// Umbral de velocidad (px/s) para un "fling" que cambia de página aunque
+/// el desplazamiento sea corto.
+pub const SWIPE_FLING: f32 = 450.0;
+
+/// Decide el cambio de página de un swipe horizontal a partir del
+/// desplazamiento total (`total_dx`, px, acumulado desde el press) y la
+/// velocidad al soltar (`vx`, px/s). Convención natural: arrastrar **hacia la
+/// izquierda** (dx<0) avanza a la **página siguiente** (`+1`); hacia la derecha
+/// (`-1`). Devuelve `0` si no llega a ningún umbral. Pura y testeable.
+pub fn swipe_decision(total_dx: f32, vx: f32) -> i32 {
+    // Fling rápido gana aunque el arrastre haya sido corto.
+    if vx <= -SWIPE_FLING {
+        return 1;
+    }
+    if vx >= SWIPE_FLING {
+        return -1;
+    }
+    if total_dx <= -SWIPE_DIST {
+        return 1;
+    }
+    if total_dx >= SWIPE_DIST {
+        return -1;
+    }
+    0
+}
+
+/// Transición animada entre páginas: mientras `t` va de 0→1, la página `from`
+/// se desliza hacia afuera y la actual entra desde el lado opuesto. El host lo
+/// anima con `llimphi-motion` y lo pone en `None` al terminar.
+#[derive(Debug, Clone, Copy)]
+pub struct CarouselTransition {
+    /// Página que sale (la anterior).
+    pub from: usize,
+    /// Progreso 0→1.
+    pub t: f32,
+}
+
+/// Desplazamientos horizontales (fracción del ancho) de las páginas saliente y
+/// entrante durante una transición de progreso `t`. `forward = true` (voy a una
+/// página mayor) → la entrante viene desde la derecha. Pura y testeable.
+pub fn slide_offsets(t: f32, forward: bool) -> (f32, f32) {
+    let t = t.clamp(0.0, 1.0);
+    if forward {
+        (-t, 1.0 - t) // saliente ← ; entrante desde la derecha
+    } else {
+        (t, t - 1.0) // saliente → ; entrante desde la izquierda
+    }
+}
+
 /// Especificación del carousel.
 pub struct CarouselSpec<Msg> {
     /// Páginas a mostrar. Se renderiza sólo la página `current`.
@@ -125,6 +176,13 @@ pub struct CarouselSpec<Msg> {
     /// Disparado al hacer click en un dot o una flecha — recibe el nuevo
     /// índice (`0..pages.len()`).
     pub on_change: Arc<dyn Fn(usize) -> Msg + Send + Sync>,
+    /// Swipe horizontal: al arrastrar el área de página y soltar, recibe `+1`
+    /// (siguiente) o `-1` (anterior) según [`swipe_decision`]. `None` = sin
+    /// swipe (sólo dots/flechas). El caller resuelve el índice con [`navigate`].
+    pub on_swipe: Option<Arc<dyn Fn(i32) -> Msg + Send + Sync>>,
+    /// Transición animada en curso (deslizamiento entre `from` y `current`).
+    /// `None` = cambio instantáneo (comportamiento previo).
+    pub transition: Option<CarouselTransition>,
 }
 
 /// Vista del carousel. Devuelve un `View<Msg>` con el slot que el
@@ -141,47 +199,77 @@ where
         show_arrows,
         palette,
         on_change,
+        on_swipe,
+        transition,
     } = spec;
 
     let total = pages.len();
     if total == 0 {
         return View::<Msg>::new(Style {
-            size: Size { width: percent(1.0), height: percent(1.0) },
+            size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
             ..Default::default()
         });
     }
     let cur = current.min(total - 1);
 
-    // Página visible — drenamos el vector para no clonar.
-    let page = std::mem::replace(
-        &mut pages[cur],
-        View::<Msg>::new(Style::default()),
-    );
+    // Wrapper de página a una fracción horizontal del ancho (para la transición).
+    let slide_wrapper = |page: View<Msg>, frac: f32| -> View<Msg> {
+        View::<Msg>::new(Style {
+            position: Position::Absolute,
+            inset: Rect {
+                left: percent(frac),
+                top: length(0.0_f32),
+                bottom: length(0.0_f32),
+                right: llimphi_ui::llimphi_layout::taffy::prelude::auto(),
+            },
+            size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+            ..Default::default()
+        })
+        .children(vec![page])
+    };
 
-    // Wrapper de la página: 100% × resto (todo menos la barra de dots).
-    let page_layer = View::<Msg>::new(Style {
-        position: Position::Relative,
-        size: Size { width: percent(1.0), height: percent(1.0) },
-        ..Default::default()
-    })
-    .children(vec![page]);
+    // ¿Transición activa (from ≠ cur, en curso)? Renderiza dos páginas
+    // deslizándose; si no, una sola.
+    let tr_active = transition.filter(|tr| tr.from != cur && tr.from < total && tr.t > 0.0 && tr.t < 1.0);
+    let mut page_children: Vec<View<Msg>> = if let Some(tr) = tr_active {
+        // Dirección robusta ante wrap en los extremos.
+        let forward = if tr.from == total - 1 && cur == 0 {
+            true
+        } else if tr.from == 0 && cur == total - 1 {
+            false
+        } else {
+            cur > tr.from
+        };
+        let (out_frac, in_frac) = slide_offsets(tr.t, forward);
+        let empty = || View::<Msg>::new(Style::default());
+        let out_page = std::mem::replace(&mut pages[tr.from], empty());
+        let in_page = std::mem::replace(&mut pages[cur], empty());
+        vec![slide_wrapper(out_page, out_frac), slide_wrapper(in_page, in_frac)]
+    } else {
+        let page = std::mem::replace(&mut pages[cur], View::<Msg>::new(Style::default()));
+        vec![View::<Msg>::new(Style {
+            position: Position::Relative,
+            size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+            ..Default::default()
+        })
+        .children(vec![page])]
+    };
 
     // Flechas opcionales superpuestas a los lados.
-    let mut page_children: Vec<View<Msg>> = vec![page_layer];
     if show_arrows && total > 1 {
         let on_prev = on_change.clone();
         let prev_idx = navigate(cur, total, -1, wrap);
         let prev = View::<Msg>::new(Style {
             position: Position::Absolute,
             inset: Rect {
-                left: length(0.0),
-                top: length(0.0),
-                bottom: length(0.0),
+                left: length(0.0_f32),
+                top: length(0.0_f32),
+                bottom: length(0.0_f32),
                 right: llimphi_ui::llimphi_layout::taffy::prelude::auto(),
             },
             size: Size {
                 width: length(ARROW_W),
-                height: percent(1.0),
+                height: percent(1.0_f32),
             },
             align_items: Some(AlignItems::Center),
             justify_content: Some(JustifyContent::Center),
@@ -197,14 +285,14 @@ where
         let next = View::<Msg>::new(Style {
             position: Position::Absolute,
             inset: Rect {
-                right: length(0.0),
-                top: length(0.0),
-                bottom: length(0.0),
+                right: length(0.0_f32),
+                top: length(0.0_f32),
+                bottom: length(0.0_f32),
                 left: llimphi_ui::llimphi_layout::taffy::prelude::auto(),
             },
             size: Size {
                 width: length(ARROW_W),
-                height: percent(1.0),
+                height: percent(1.0_f32),
             },
             align_items: Some(AlignItems::Center),
             justify_content: Some(JustifyContent::Center),
@@ -218,14 +306,43 @@ where
         page_children.push(prev);
         page_children.push(next);
     }
-    let page_area = View::<Msg>::new(Style {
+    let mut page_area = View::<Msg>::new(Style {
         position: Position::Relative,
-        size: Size { width: percent(1.0), height: percent(1.0) },
+        size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
         flex_grow: 1.0,
         ..Default::default()
     })
     .children(page_children);
 
+    // Swipe horizontal: arrastrar el área y soltar cambia de página. Acumulamos
+    // el desplazamiento (los deltas llegan por-evento con la vista congelada) y
+    // en End decidimos con velocidad + distancia. Los hijos interactivos (dots,
+    // flechas, contenido) ganan el hit-test; el drag toma el fondo de la página.
+    if let (Some(on_swipe), true) = (on_swipe, total > 1) {
+        let acc = std::sync::Arc::new(std::sync::Mutex::new(0.0_f32));
+        page_area = page_area.draggable_velocity(
+            move |phase: llimphi_ui::DragPhase, dx: f32, _dy: f32, vx: f32, _vy: f32| {
+                let mut a = acc.lock().unwrap_or_else(|e| e.into_inner());
+                match phase {
+                    llimphi_ui::DragPhase::Move => {
+                        *a += dx;
+                        None
+                    }
+                    llimphi_ui::DragPhase::End => {
+                        let total_dx = *a;
+                        *a = 0.0;
+                        let d = swipe_decision(total_dx, vx);
+                        if d != 0 {
+                            Some((on_swipe)(d))
+                        } else {
+                            None
+                        }
+                    }
+                }
+            },
+        );
+    }
+
     // Fila de dots abajo.
     let mut dots: Vec<View<Msg>> = Vec::with_capacity(total);
     for i in 0..total {
@@ -251,16 +368,16 @@ where
         justify_content: Some(JustifyContent::Center),
         gap: llimphi_ui::llimphi_layout::taffy::Size {
             width: length(DOT_GAP),
-            height: length(0.0),
+            height: length(0.0_f32),
         },
-        size: Size { width: percent(1.0), height: length(DOT_ROW_H) },
+        size: Size { width: percent(1.0_f32), height: length(DOT_ROW_H) },
         ..Default::default()
     })
     .children(dots);
 
     View::<Msg>::new(Style {
         flex_direction: FlexDirection::Column,
-        size: Size { width: percent(1.0), height: percent(1.0) },
+        size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
         ..Default::default()
     })
     .children(vec![page_area, dot_row])
@@ -300,4 +417,37 @@ mod tests {
         assert_eq!(navigate(4, 5, 1, CarouselWrap::Wrap), 0);
         assert_eq!(navigate(4, 5, 1, CarouselWrap::Clamp), 4);
     }
+
+    #[test]
+    fn swipe_por_distancia() {
+        // Arrastrar a la izquierda lo suficiente → siguiente (+1).
+        assert_eq!(swipe_decision(-SWIPE_DIST - 1.0, 0.0), 1);
+        // A la derecha → anterior (-1).
+        assert_eq!(swipe_decision(SWIPE_DIST + 1.0, 0.0), -1);
+        // Corto y lento → nada.
+        assert_eq!(swipe_decision(-10.0, 0.0), 0);
+        assert_eq!(swipe_decision(10.0, 50.0), 0);
+    }
+
+    #[test]
+    fn swipe_por_fling_gana_aunque_sea_corto() {
+        // Fling rápido a la izquierda con desplazamiento corto → siguiente.
+        assert_eq!(swipe_decision(-5.0, -SWIPE_FLING - 10.0), 1);
+        // Fling a la derecha → anterior.
+        assert_eq!(swipe_decision(5.0, SWIPE_FLING + 10.0), -1);
+    }
+
+    #[test]
+    fn slide_offsets_desliza_entrante_y_saliente() {
+        // Forward: al inicio (t=0) la saliente está centrada (0) y la entrante
+        // fuera a la derecha (+1); al final (t=1) la saliente salió (-1) y la
+        // entrante quedó centrada (0).
+        assert_eq!(slide_offsets(0.0, true), (0.0, 1.0));
+        assert_eq!(slide_offsets(1.0, true), (-1.0, 0.0));
+        let (o, i) = slide_offsets(0.5, true);
+        assert!((o + 0.5).abs() < 1e-4 && (i - 0.5).abs() < 1e-4);
+        // Backward: la entrante viene desde la izquierda (-1 → 0).
+        assert_eq!(slide_offsets(0.0, false), (0.0, -1.0));
+        assert_eq!(slide_offsets(1.0, false), (1.0, 0.0));
+    }
 }
diff --git a/widgets/chip/Cargo.toml b/widgets/chip/Cargo.toml
index 3f732da..fb7c923 100644
--- a/widgets/chip/Cargo.toml
+++ b/widgets/chip/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-chip — chip compacto (filter / choice / input) con estado opcional seleccionado y x removible. Para tags, filtros, multi-select compacto."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/chip/LEEME.md b/widgets/chip/LEEME.md
new file mode 100644
index 0000000..c79022a
--- /dev/null
+++ b/widgets/chip/LEEME.md
@@ -0,0 +1,17 @@
+# llimphi-widget-chip
+
+*Read this in English: [README.md](README.md).*
+
+Chip compacto con cuatro sabores: **filter** (toggle binario), **choice** (radio dentro de un grupo), **input** (etiqueta removible con × al final) y **assist** (chip-acción con ícono opcional).
+
+Forma: rectángulo redondeado bien pegado (radius pill), padding
+horizontal 10/4, alto 24 px. Tema-consciente: cuando `selected`,
+pinta `accent` apenas tinted (alpha bajo) — sobrio, no chillón.
+
+Como toda la elegancia de Llimphi, hereda de `llimphi-theme::motion`
+para la transición de fill al togglear (animación implícita via
+`View::animated(key, motion::MICRO)`).
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/chip/README.md b/widgets/chip/README.md
new file mode 100644
index 0000000..5e277d7
--- /dev/null
+++ b/widgets/chip/README.md
@@ -0,0 +1,17 @@
+# llimphi-widget-chip
+
+Compact chip in four flavours: **filter** (binary toggle), **choice** (a radio
+inside a group), **input** (removable label with a trailing ×) and **assist**
+(an action chip with an optional icon).
+
+Shape: a tightly padded rounded rectangle (pill radius), horizontal padding
+10/4, 24 px tall. Theme-aware: when `selected` it paints `accent` barely tinted
+(low alpha) — sober, not loud.
+
+Like the rest of Llimphi's elegance kit it inherits from
+`llimphi-theme::motion` for the fill transition on toggle (implicit animation
+via `View::animated(key, motion::MICRO)`).
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/chip/src/lib.rs b/widgets/chip/src/lib.rs
index 86bcc76..263709c 100644
--- a/widgets/chip/src/lib.rs
+++ b/widgets/chip/src/lib.rs
@@ -83,17 +83,52 @@ pub fn chip_view<Msg: Clone + 'static>(
     palette: &ChipPalette,
     on_click: Msg,
     on_remove: Option<Msg>,
+) -> View<Msg> {
+    chip_view_icon(None::<String>, label, kind, selected, key, palette, on_click, on_remove)
+}
+
+/// Como [`chip_view`] pero con **glyph líder** opcional (el "ícono opcional"
+/// que el assist-chip promete). `icon` `None` = sin ícono (idéntico a
+/// [`chip_view`]).
+#[allow(clippy::too_many_arguments)]
+pub fn chip_view_icon<Msg: Clone + 'static>(
+    icon: Option<impl Into<String>>,
+    label: impl Into<String>,
+    kind: ChipKind,
+    selected: bool,
+    key: u64,
+    palette: &ChipPalette,
+    on_click: Msg,
+    on_remove: Option<Msg>,
 ) -> View<Msg> {
     let bg = if selected { palette.bg_selected } else { palette.bg_idle };
     let fg = if selected { palette.fg_selected } else { palette.fg_idle };
 
     let label: String = label.into();
     let aria = label.clone();
-    let mut children = vec![View::new(Style {
-        size: Size { width: auto(), height: auto() },
-        ..Default::default()
-    })
-    .text_aligned(label, 12.0, fg, Alignment::Center)];
+    let mut children: Vec<View<Msg>> = Vec::with_capacity(3);
+    if let Some(g) = icon {
+        children.push(
+            View::new(Style {
+                size: Size { width: auto(), height: auto() },
+                margin: Rect {
+                    left: length(0.0_f32),
+                    right: length(5.0_f32),
+                    top: length(0.0_f32),
+                    bottom: length(0.0_f32),
+                },
+                ..Default::default()
+            })
+            .text_aligned(g.into(), 12.0, fg, Alignment::Center),
+        );
+    }
+    children.push(
+        View::new(Style {
+            size: Size { width: auto(), height: auto() },
+            ..Default::default()
+        })
+        .text_aligned(label, 12.0, fg, Alignment::Center),
+    );
 
     if let (ChipKind::Input, Some(rm)) = (kind, on_remove) {
         // ×: glifo pequeño a la derecha con on_click propio. No es
@@ -187,3 +222,15 @@ pub fn assist_chip<Msg: Clone + 'static>(
 ) -> View<Msg> {
     chip_view(label, ChipKind::Assist, false, key, palette, on_click, None)
 }
+
+/// Atajo: chip assist con **glyph líder** (el "chip-acción con ícono" del
+/// docstring del módulo).
+pub fn assist_chip_icon<Msg: Clone + 'static>(
+    icon: impl Into<String>,
+    label: impl Into<String>,
+    key: u64,
+    palette: &ChipPalette,
+    on_click: Msg,
+) -> View<Msg> {
+    chip_view_icon(Some(icon), label, ChipKind::Assist, false, key, palette, on_click, None)
+}
diff --git a/widgets/clipboard/Cargo.toml b/widgets/clipboard/Cargo.toml
index 4368cb8..df8a229 100644
--- a/widgets/clipboard/Cargo.toml
+++ b/widgets/clipboard/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-clipboard — backend de portapapeles del sistema (vía arboard) que implementa el trait Clipboard del text-editor. Una línea para que el menú de edición y los atajos Ctrl+C/X/V de cualquier app Llimphi usen el clipboard real del SO, con degradación silenciosa a no-op si no hay display."
 
+repository.workspace = true
 [dependencies]
 llimphi-widget-text-editor = { workspace = true }
 arboard = { workspace = true }
diff --git a/widgets/clipboard/LEEME.md b/widgets/clipboard/LEEME.md
new file mode 100644
index 0000000..521e1e8
--- /dev/null
+++ b/widgets/clipboard/LEEME.md
@@ -0,0 +1,21 @@
+# llimphi-clipboard
+
+*Read this in English: [README.md](README.md).*
+
+El portapapeles del sistema para apps Llimphi.
+
+El `text-editor` define el trait `Clipboard` pero deja el backend al
+caller (no quiere acoplarse a X11/Wayland/macOS/Windows). Este crate
+aporta el backend obvio — `arboard` — para que cualquier app lo
+enchufe en una línea:
+```ignore
+let mut clip = llimphi_clipboard::SystemClipboard::new();
+editor.apply_key_with_clipboard(&ev, &mut clip);
+```
+Si no hay display (CI headless, sesión sin servidor gráfico) degrada
+a no-op silencioso: `get` devuelve `None`, `set` descarta. Nunca
+panica.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/clipboard/README.md b/widgets/clipboard/README.md
new file mode 100644
index 0000000..18c7e6f
--- /dev/null
+++ b/widgets/clipboard/README.md
@@ -0,0 +1,20 @@
+# llimphi-clipboard
+
+The system clipboard for Llimphi apps.
+
+The `text-editor` defines the `Clipboard` trait but leaves the backend to the
+caller (it does not want to couple itself to X11/Wayland/macOS/Windows). This
+crate provides the obvious backend — `arboard` — so any app can plug it in with
+one line:
+
+```ignore
+let mut clip = llimphi_clipboard::SystemClipboard::new();
+editor.apply_key_with_clipboard(&ev, &mut clip);
+```
+
+With no display (headless CI, a session without a graphics server) it degrades
+to a silent no-op: `get` returns `None`, `set` discards. It never panics.
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/color-picker/Cargo.toml b/widgets/color-picker/Cargo.toml
index 19ee47d..c984dbb 100644
--- a/widgets/color-picker/Cargo.toml
+++ b/widgets/color-picker/Cargo.toml
@@ -5,11 +5,17 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
-description = "llimphi-widget-color-picker — selector de color RGBA: swatch actual + paleta de chips preestablecidos + sliders RGBA. Agnóstico (emite [u8;4])."
+description = "llimphi-widget-color-picker — selección de color agnóstica (emite [u8;4]): el picker inline (swatch + chips + sliders RGBA) y el popover rico (cono HSV/HSB en 3D orbitable, pad S/V, barras tono/alfa, caché de recientes, hex + campos numéricos scrubbables)."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
 llimphi-widget-slider = { workspace = true }
 llimphi-widget-text-input = { workspace = true }
+
+[dev-dependencies]
+# Volcado headless del popover a PNG (llvmpipe en sandbox) para VER el cono 3D
+# — mismo patrón que los dumps de terminal / llimphi-3d.
+png = { workspace = true }
+pollster = { workspace = true }
diff --git a/widgets/color-picker/LEEME.md b/widgets/color-picker/LEEME.md
new file mode 100644
index 0000000..06b90af
--- /dev/null
+++ b/widgets/color-picker/LEEME.md
@@ -0,0 +1,27 @@
+# llimphi-widget-color-picker
+
+*Read this in English: [README.md](README.md).*
+
+Selector de color RGBA agnóstico.
+
+Compone tres piezas, de arriba abajo:
+1. un **swatch** del color actual,
+2. una **paleta de chips** preestablecidos (clic = fija el RGB conservando
+   el alfa actual), envuelta si no entra en una fila,
+3. cuatro **sliders RGBA** para el ajuste fino.
+
+Es agnóstico: no sabe de config ni de `FieldValue`. Recibe el color como
+`[u8; 4]` y emite el color nuevo por `on_change([u8; 4]) -> Msg`. Cualquier
+app llimphi lo usa pasando su propio `Msg`.
+```ignore
+color_picker_view(
+    self.border,
+    DEFAULT_SWATCHES,
+    &ColorPickerPalette::from_theme(&theme),
+    |rgba| Msg::SetBorderColor(rgba),
+)
+```
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/color-picker/README.md b/widgets/color-picker/README.md
new file mode 100644
index 0000000..bfc831f
--- /dev/null
+++ b/widgets/color-picker/README.md
@@ -0,0 +1,27 @@
+# llimphi-widget-color-picker
+
+Agnostic RGBA colour picker.
+
+It composes three pieces, top to bottom:
+
+1. a **swatch** of the current colour,
+2. a **palette of preset chips** (a click sets the RGB while keeping the current
+   alpha), wrapped if it does not fit in one row,
+3. four **RGBA sliders** for fine adjustment.
+
+It is agnostic: it knows nothing about config or `FieldValue`. It takes the
+colour as `[u8; 4]` and emits the new one through `on_change([u8; 4]) -> Msg`.
+Any llimphi app uses it by passing its own `Msg`.
+
+```ignore
+color_picker_view(
+    self.border,
+    DEFAULT_SWATCHES,
+    &ColorPickerPalette::from_theme(&theme),
+    |rgba| Msg::SetBorderColor(rgba),
+)
+```
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/color-picker/examples/color_popup_demo.rs b/widgets/color-picker/examples/color_popup_demo.rs
new file mode 100644
index 0000000..8ad4b93
--- /dev/null
+++ b/widgets/color-picker/examples/color_popup_demo.rs
@@ -0,0 +1,227 @@
+//! `color_popup_demo` — el **popover de color** completo: cono HSV en 3D
+//! orbitable, pad S/V, barras de tono/alfa, caché de recientes, presets,
+//! campo hex editable y valores R G B / H S V *scrubbables* (arrastre
+//! vertical).
+//!
+//! - Click en el **swatch** para abrir/cerrar el popover.
+//! - Arrastra el **cono** para orbitarlo; su marcador sigue al color actual.
+//! - Arrastra el **pad** (S×V), las **barras** (tono/alfa) o los **campos
+//!   numéricos** (arriba/abajo) para editar.
+//! - Click en un **reciente**/**preset** lo aplica. Al cerrar, el color entra
+//!   en la caché de recientes.
+//! - `Esc` cierra.
+//!
+//! Corre con:
+//!   cargo run -p llimphi-widget-color-picker --example color_popup_demo --release
+
+use std::sync::Arc;
+
+use llimphi_theme::Theme;
+use llimphi_ui::llimphi_layout::taffy::{
+    prelude::{length, percent, FlexDirection, Size, Style},
+    AlignItems, Rect,
+};
+use llimphi_ui::llimphi_text::Alignment;
+use llimphi_ui::{App, Handle, Key, KeyEvent, KeyState, NamedKey, View};
+use llimphi_widget_color_picker::{
+    color_popup_view, color_trigger_view, push_recent, rgba_to_hex, ColorPopupPalette,
+    ColorPopupSpec, ConeOrbit, HexField, DEFAULT_SWATCHES,
+};
+use llimphi_widget_text_input::{
+    NullClipboard, TextInputEvent, TextInputState,
+};
+
+#[derive(Clone)]
+enum Msg {
+    Open,
+    Dismiss,
+    SetColor([u8; 4]),
+    Orbit(f32, f32),
+    HexFocus,
+    HexMouse(TextInputEvent),
+    HexKey(KeyEvent),
+    Resize(f32, f32),
+}
+
+struct Model {
+    theme: Theme,
+    palette: ColorPopupPalette,
+    rgba: [u8; 4],
+    open: bool,
+    orbit: ConeOrbit,
+    recent: Vec<[u8; 4]>,
+    hex_focused: bool,
+    hex_state: TextInputState,
+    viewport: (f32, f32),
+}
+
+impl App for Model {
+    type Model = Model;
+    type Msg = Msg;
+
+    fn init(_handle: &Handle<Msg>) -> Model {
+        let theme = Theme::dark();
+        let palette = ColorPopupPalette::from_theme(&theme);
+        Model {
+            theme,
+            palette,
+            rgba: [92, 143, 235, 255],
+            open: false,
+            orbit: ConeOrbit::default(),
+            recent: vec![[244, 67, 54, 255], [76, 175, 80, 255], [255, 193, 7, 255]],
+            hex_focused: false,
+            hex_state: TextInputState::new(),
+            viewport: (900.0, 780.0),
+        }
+    }
+
+    fn update(mut model: Model, msg: Msg, _handle: &Handle<Msg>) -> Model {
+        match msg {
+            Msg::Open => {
+                model.open = true;
+                model.hex_focused = false;
+            }
+            Msg::Dismiss => {
+                if model.open {
+                    push_recent(&mut model.recent, model.rgba, 12);
+                }
+                model.open = false;
+                model.hex_focused = false;
+            }
+            Msg::SetColor(c) => {
+                model.rgba = c;
+                if model.hex_focused {
+                    model.hex_state.set_text(rgba_to_hex(c));
+                }
+            }
+            Msg::Orbit(dy, dp) => model.orbit.orbit(dy, dp),
+            Msg::HexFocus => {
+                model.hex_focused = true;
+                model.hex_state.set_text(rgba_to_hex(model.rgba));
+            }
+            Msg::HexMouse(ev) => {
+                let mut clip = NullClipboard;
+                model.hex_state.handle(ev, &mut clip);
+            }
+            Msg::HexKey(ev) => {
+                model.hex_state.apply_key(&ev);
+                // Reconstruir el color desde el texto si es un hex válido.
+                if let Some(c) = llimphi_widget_color_picker::parse_hex(
+                    &model.hex_state.text(),
+                    model.rgba[3],
+                ) {
+                    model.rgba = c;
+                }
+            }
+            Msg::Resize(w, h) => model.viewport = (w, h),
+        }
+        model
+    }
+
+    fn on_resize(_model: &Model, width: u32, height: u32) -> Option<Msg> {
+        Some(Msg::Resize(width as f32, height as f32))
+    }
+
+    fn on_key(model: &Model, event: &KeyEvent) -> Option<Msg> {
+        if event.state != KeyState::Pressed {
+            return None;
+        }
+        // Esc cierra el popover.
+        if let Key::Named(NamedKey::Escape) = event.key {
+            if model.open {
+                return Some(Msg::Dismiss);
+            }
+        }
+        if model.hex_focused {
+            return Some(Msg::HexKey(event.clone()));
+        }
+        None
+    }
+
+    fn ime_allowed() -> bool {
+        true
+    }
+
+    fn view(model: &Model) -> View<Msg> {
+        let t = &model.theme;
+        let trigger = color_trigger_view(model.rgba, &model.palette, Msg::Open);
+
+        // Muestra grande del color actual + su hex.
+        let big = View::new(Style {
+            size: Size { width: length(120.0_f32), height: length(64.0_f32) },
+            ..Default::default()
+        })
+        .fill(llimphi_ui::llimphi_raster::peniko::Color::from_rgba8(
+            model.rgba[0],
+            model.rgba[1],
+            model.rgba[2],
+            model.rgba[3],
+        ))
+        .radius(8.0)
+        .border(1.0, t.border);
+
+        let hex = View::new(Style {
+            size: Size { width: length(120.0_f32), height: length(20.0_f32) },
+            ..Default::default()
+        })
+        .text_aligned(rgba_to_hex(model.rgba), 14.0, t.fg_text, Alignment::Start);
+
+        let hint = View::new(Style {
+            size: Size { width: length(360.0_f32), height: length(40.0_f32) },
+            ..Default::default()
+        })
+        .text_aligned(
+            "Click el swatch → abre el popover. Arrastra el cono para orbitar.".to_string(),
+            12.5,
+            t.fg_muted,
+            Alignment::Start,
+        );
+
+        View::new(Style {
+            size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+            flex_direction: FlexDirection::Column,
+            padding: Rect {
+                left: length(40.0_f32),
+                right: length(40.0_f32),
+                top: length(40.0_f32),
+                bottom: length(40.0_f32),
+            },
+            gap: Size { width: length(0.0_f32), height: length(16.0_f32) },
+            align_items: Some(AlignItems::Start),
+            ..Default::default()
+        })
+        .fill(t.bg_app)
+        .children(vec![big, hex, trigger, hint])
+    }
+
+    fn view_overlay(model: &Model) -> Option<View<Msg>> {
+        if !model.open {
+            return None;
+        }
+        let on_input: Arc<dyn Fn(TextInputEvent) -> Msg + Send + Sync> =
+            Arc::new(Msg::HexMouse);
+        let hex = HexField {
+            focused: model.hex_focused,
+            state: Some(&model.hex_state),
+            on_focus: Msg::HexFocus,
+            on_input,
+        };
+        Some(color_popup_view(ColorPopupSpec {
+            anchor: (60.0, 150.0),
+            viewport: model.viewport,
+            rgba: model.rgba,
+            orbit: model.orbit,
+            recent: &model.recent,
+            swatches: DEFAULT_SWATCHES,
+            hex: Some(hex),
+            palette: &model.palette,
+            on_change: Arc::new(Msg::SetColor),
+            on_orbit: Arc::new(Msg::Orbit),
+            on_dismiss: Msg::Dismiss,
+        }))
+    }
+}
+
+fn main() {
+    llimphi_ui::run::<Model>();
+}
diff --git a/widgets/color-picker/examples/cono_png.rs b/widgets/color-picker/examples/cono_png.rs
new file mode 100644
index 0000000..6b04033
--- /dev/null
+++ b/widgets/color-picker/examples/cono_png.rs
@@ -0,0 +1,140 @@
+//! `cono_png` — volcado **headless** del popover de color a PNG, para VER el
+//! cono HSV/HSB en 3D (evidencia visual del render nuevo, no aserción).
+//!
+//! Rasteriza el mismo `color_popup_view` que usa la app real (mount → layout →
+//! paint por la maquinaria de Llimphi), así que el PNG es exactamente lo que
+//! vería el usuario. Corre con:
+//!   cargo run -p llimphi-widget-color-picker --example cono_png --release [out.png]
+
+use std::fs::File;
+use std::io::BufWriter;
+use std::sync::Arc;
+
+use llimphi_ui::llimphi_compositor::{measure_text_node, mount, paint};
+use llimphi_ui::llimphi_hal::{wgpu, Hal};
+use llimphi_ui::llimphi_layout::{taffy, LayoutTree};
+use llimphi_ui::llimphi_raster::peniko::Color;
+use llimphi_ui::llimphi_raster::{vello, Renderer};
+use llimphi_ui::llimphi_text::Typesetter;
+use llimphi_widget_color_picker::{
+    color_popup_view, ColorPopupPalette, ColorPopupSpec, ConeOrbit, DEFAULT_SWATCHES,
+};
+
+const W: u32 = 340;
+const H: u32 = 680;
+const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
+
+fn main() {
+    let out = std::env::args().nth(1).unwrap_or_else(|| "cono.png".to_string());
+    let theme = llimphi_theme::Theme::dark();
+    let palette = ColorPopupPalette::from_theme(&theme);
+    let rgba = [92, 143, 235, 255];
+    let recent = [[244, 67, 54, 255], [76, 175, 80, 255], [255, 193, 7, 255]];
+
+    // El popover completo, con callbacks no-op (Msg = ()).
+    let root = color_popup_view(ColorPopupSpec::<()> {
+        anchor: (8.0, 8.0),
+        viewport: (W as f32, H as f32),
+        rgba,
+        orbit: ConeOrbit::default(),
+        recent: &recent,
+        swatches: DEFAULT_SWATCHES,
+        hex: None,
+        palette: &palette,
+        on_change: Arc::new(|_| ()),
+        on_orbit: Arc::new(|_, _| ()),
+        on_dismiss: (),
+    });
+
+    let mut layout = LayoutTree::new();
+    let mounted = mount(&mut layout, root);
+    let mut ts = Typesetter::new();
+    let computed = {
+        let tmap = &mounted.text_measures;
+        layout
+            .compute_with_measure(mounted.root, (W as f32, H as f32), |nid, known, avail| {
+                match tmap.get(&nid) {
+                    Some(tm) => measure_text_node(&mut ts, tm, known, avail),
+                    None => taffy::Size::ZERO,
+                }
+            })
+            .expect("layout")
+    };
+    let mut scene = vello::Scene::new();
+    paint(&mut scene, &mounted, &computed, &mut ts, None, None);
+
+    let hal = pollster::block_on(Hal::new(None)).expect("hal");
+    let mut renderer = Renderer::new(&hal).expect("renderer");
+    let target = hal.device.create_texture(&wgpu::TextureDescriptor {
+        label: Some("cono-png"),
+        size: wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+        mip_level_count: 1,
+        sample_count: 1,
+        dimension: wgpu::TextureDimension::D2,
+        format: FMT,
+        usage: wgpu::TextureUsages::STORAGE_BINDING
+            | wgpu::TextureUsages::RENDER_ATTACHMENT
+            | wgpu::TextureUsages::COPY_SRC,
+        view_formats: &[],
+    });
+    let view = target.create_view(&wgpu::TextureViewDescriptor::default());
+    renderer
+        .render_to_view(&hal, &scene, &view, W, H, Color::from_rgba8(24, 24, 30, 255))
+        .expect("render_to_view");
+    write_png(&hal, &target, &out);
+    eprintln!("cono_png: {out} ({W}x{H})");
+}
+
+fn write_png(hal: &Hal, target: &wgpu::Texture, path: &str) {
+    let unpadded = (W * 4) as usize;
+    let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize;
+    let padded = unpadded.div_ceil(align) * align;
+    let buf = hal.device.create_buffer(&wgpu::BufferDescriptor {
+        label: Some("readback"),
+        size: (padded * H as usize) as u64,
+        usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
+        mapped_at_creation: false,
+    });
+    let mut enc = hal
+        .device
+        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+    enc.copy_texture_to_buffer(
+        wgpu::TexelCopyTextureInfo {
+            texture: target,
+            mip_level: 0,
+            origin: wgpu::Origin3d::ZERO,
+            aspect: wgpu::TextureAspect::All,
+        },
+        wgpu::TexelCopyBufferInfo {
+            buffer: &buf,
+            layout: wgpu::TexelCopyBufferLayout {
+                offset: 0,
+                bytes_per_row: Some(padded as u32),
+                rows_per_image: Some(H),
+            },
+        },
+        wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 },
+    );
+    hal.queue.submit(std::iter::once(enc.finish()));
+    let slice = buf.slice(..);
+    let (tx, rx) = std::sync::mpsc::channel();
+    slice.map_async(wgpu::MapMode::Read, move |r| {
+        let _ = tx.send(r);
+    });
+    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
+    rx.recv().unwrap().unwrap();
+    let data = slice.get_mapped_range();
+    let mut pixels = Vec::with_capacity((W * H * 4) as usize);
+    for row in 0..H as usize {
+        let s = row * padded;
+        pixels.extend_from_slice(&data[s..s + unpadded]);
+    }
+    drop(data);
+    buf.unmap();
+    let file = File::create(path).expect("png");
+    let mut enc = png::Encoder::new(BufWriter::new(file), W, H);
+    enc.set_color(png::ColorType::Rgba);
+    enc.set_depth(png::BitDepth::Eight);
+    let mut w = enc.write_header().unwrap();
+    w.write_image_data(&pixels).unwrap();
+}
diff --git a/widgets/color-picker/src/cone.rs b/widgets/color-picker/src/cone.rs
new file mode 100644
index 0000000..bc6ae47
--- /dev/null
+++ b/widgets/color-picker/src/cone.rs
@@ -0,0 +1,214 @@
+//! Geometría y proyección del **cono HSV/HSB en 3D** — la parte de sólo
+//! matemática (sin `View` ni vello), para poder testearla con asserts.
+//!
+//! ## El sólido HSV como cono
+//!
+//! El modelo HSV se representa canónicamente como un **cono** parado sobre su
+//! vértice: el ángulo alrededor del eje es el **tono** (H), la altura es el
+//! **valor** (V) y el radio es `S·V` (la **saturación** escala el radio del
+//! disco de ese valor). Así:
+//!
+//! - el **vértice** inferior (`V=0`) es negro (radio 0);
+//! - la **tapa** superior (`V=1`) es un disco: centro blanco (`S=0`), borde
+//!   con el tono a plena saturación (`S=1`);
+//! - la **superficie lateral** (`S=1`) va del vértice negro al aro de colores
+//!   puros.
+//!
+//! El sólido se centra en el origen: `z = v - 0.5` (rango `[-0.5, 0.5]`),
+//! `radio = s·v` (rango `[0, 1]`), `ángulo = h`.
+//!
+//! ## Proyección
+//!
+//! [`project_cone_point`] aplica **yaw** (giro sobre el eje vertical) + **pitch**
+//! (inclinación hacia el observador) y proyecta ortográficamente a coordenadas
+//! de pantalla normalizadas (`sx, sy ≈ [-1.4, 1.4]`, `sy` hacia arriba) más una
+//! **profundidad** para ordenar las caras de atrás hacia adelante (painter).
+//! El widget escala eso al rect del canvas.
+
+use core::f32::consts::PI;
+
+/// Segmentos alrededor del tono (H). Más = cono más redondo.
+pub const CONE_SEGMENTS: usize = 48;
+/// Anillos de valor (V) en la superficie lateral.
+pub const CONE_RINGS: usize = 12;
+/// Anillos de saturación (S) en la tapa superior.
+pub const CAP_RINGS: usize = 5;
+
+/// Orientación de la cámara que orbita el cono. `yaw` gira sobre el eje
+/// vertical; `pitch` inclina (positivo = ver el cono más "desde arriba").
+/// El caller la posee en su `Model` y la muta con [`ConeOrbit::orbit`].
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub struct ConeOrbit {
+    /// Giro alrededor del eje vertical (radianes).
+    pub yaw: f32,
+    /// Inclinación hacia el observador (radianes), acotada a `[0.05, 1.45]`.
+    pub pitch: f32,
+}
+
+impl Default for ConeOrbit {
+    fn default() -> Self {
+        // Un 3/4 clásico: girado y visto un poco desde arriba.
+        Self { yaw: 0.6, pitch: 0.55 }
+    }
+}
+
+impl ConeOrbit {
+    /// Acumula un arrastre en la órbita. `dyaw`/`dpitch` en radianes. El pitch
+    /// queda acotado para no cruzar los polos (el cono nunca se ve "de canto"
+    /// exacto ni invertido).
+    pub fn orbit(&mut self, dyaw: f32, dpitch: f32) {
+        self.yaw = (self.yaw + dyaw).rem_euclid(2.0 * PI);
+        self.pitch = (self.pitch + dpitch).clamp(0.05, 1.45);
+    }
+}
+
+/// Punto del sólido HSV en coordenadas de modelo, centrado en el origen.
+/// `h` en grados, `s`,`v` en `0..1`.
+pub fn hsv_model_point(h: f32, s: f32, v: f32) -> [f32; 3] {
+    let r = s * v; // radio del disco de valor `v`, escalado por saturación
+    let a = h.to_radians();
+    [r * a.cos(), r * a.sin(), v - 0.5]
+}
+
+/// Proyecta un punto de modelo a pantalla normalizada según la órbita.
+/// Devuelve `(sx, sy, depth)`: `sx` derecha, `sy` **arriba**, `depth` crece
+/// hacia el observador (ordenar ascendente = pintar de atrás hacia adelante).
+pub fn project_cone_point(p: [f32; 3], orbit: ConeOrbit) -> (f32, f32, f32) {
+    let (sy, cy) = orbit.yaw.sin_cos();
+    // Yaw sobre el eje vertical (z).
+    let x1 = p[0] * cy - p[1] * sy;
+    let y1 = p[0] * sy + p[1] * cy;
+    let z1 = p[2];
+    // Pitch sobre el eje x1 (inclina el eje vertical hacia el observador).
+    let (sp, cp) = orbit.pitch.sin_cos();
+    let y2 = y1 * cp - z1 * sp; // hacia adentro/afuera de la pantalla
+    let z2 = y1 * sp + z1 * cp; // vertical de pantalla
+    (x1, z2, y2)
+}
+
+/// Una cara del cono ya coloreada, en coordenadas de modelo (la proyección se
+/// hace al pintar, que es lo que depende de la órbita).
+#[derive(Debug, Clone, Copy)]
+pub struct ConeFacet {
+    /// Las 4 esquinas en coordenadas de modelo (quad, puede degenerar a
+    /// triángulo cerca del vértice).
+    pub corners: [[f32; 3]; 4],
+    /// Color plano de la cara (flat shading), RGB.
+    pub color: [u8; 3],
+}
+
+/// Genera la malla completa del cono: superficie lateral (`S=1`) + tapa
+/// superior (`V=1`). Geometría y color son fijos; la órbita sólo afecta la
+/// proyección. Con las constantes por defecto son `SEG·RINGS + SEG·CAP_RINGS`
+/// caras (~816).
+pub fn cone_facets() -> Vec<ConeFacet> {
+    let seg = CONE_SEGMENTS;
+    let mut out = Vec::with_capacity(seg * (CONE_RINGS + CAP_RINGS));
+    let dtheta = 360.0 / seg as f32;
+
+    // Superficie lateral: S = 1, v de 0 (vértice) a 1 (aro).
+    for ri in 0..CONE_RINGS {
+        let v0 = ri as f32 / CONE_RINGS as f32;
+        let v1 = (ri + 1) as f32 / CONE_RINGS as f32;
+        for si in 0..seg {
+            let t0 = si as f32 * dtheta;
+            let t1 = (si + 1) as f32 * dtheta;
+            let corners = [
+                hsv_model_point(t0, 1.0, v0),
+                hsv_model_point(t1, 1.0, v0),
+                hsv_model_point(t1, 1.0, v1),
+                hsv_model_point(t0, 1.0, v1),
+            ];
+            let color = crate::hsv_to_rgb((t0 + t1) * 0.5, 1.0, (v0 + v1) * 0.5);
+            out.push(ConeFacet { corners, color });
+        }
+    }
+
+    // Tapa superior: V = 1, s de 0 (centro blanco) a 1 (borde saturado).
+    for ri in 0..CAP_RINGS {
+        let s0 = ri as f32 / CAP_RINGS as f32;
+        let s1 = (ri + 1) as f32 / CAP_RINGS as f32;
+        for si in 0..seg {
+            let t0 = si as f32 * dtheta;
+            let t1 = (si + 1) as f32 * dtheta;
+            let corners = [
+                hsv_model_point(t0, s0, 1.0),
+                hsv_model_point(t1, s0, 1.0),
+                hsv_model_point(t1, s1, 1.0),
+                hsv_model_point(t0, s1, 1.0),
+            ];
+            let color = crate::hsv_to_rgb((t0 + t1) * 0.5, (s0 + s1) * 0.5, 1.0);
+            out.push(ConeFacet { corners, color });
+        }
+    }
+    out
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn vertice_es_el_negro_en_el_origen() {
+        // V=0 → radio 0, z=-0.5, sin importar tono/saturación.
+        for h in [0.0, 120.0, 240.0] {
+            let p = hsv_model_point(h, 1.0, 0.0);
+            assert!(p[0].abs() < 1e-6 && p[1].abs() < 1e-6);
+            assert!((p[2] + 0.5).abs() < 1e-6);
+        }
+    }
+
+    #[test]
+    fn aro_superior_tiene_radio_unidad() {
+        // V=1, S=1 → radio 1 en la tapa.
+        let p = hsv_model_point(0.0, 1.0, 1.0);
+        assert!(((p[0] * p[0] + p[1] * p[1]).sqrt() - 1.0).abs() < 1e-5);
+        assert!((p[2] - 0.5).abs() < 1e-6);
+    }
+
+    #[test]
+    fn centro_de_la_tapa_es_blanco_en_el_eje() {
+        // S=0 en V=1 → sobre el eje (radio 0), arriba.
+        let p = hsv_model_point(37.0, 0.0, 1.0);
+        assert!(p[0].abs() < 1e-6 && p[1].abs() < 1e-6);
+        assert!((p[2] - 0.5).abs() < 1e-6);
+        assert_eq!(crate::hsv_to_rgb(37.0, 0.0, 1.0), [255, 255, 255]);
+    }
+
+    #[test]
+    fn proyeccion_ordena_profundidad_frente_vs_dorso() {
+        let orbit = ConeOrbit::default();
+        // Dos puntos opuestos del aro: uno adelante, otro atrás. Su
+        // profundidad proyectada debe tener signo opuesto.
+        let front = project_cone_point(hsv_model_point(90.0, 1.0, 1.0), orbit);
+        let back = project_cone_point(hsv_model_point(270.0, 1.0, 1.0), orbit);
+        assert!(front.2 * back.2 < 0.0, "un lado adelante y otro atrás");
+    }
+
+    #[test]
+    fn pitch_mayor_sube_la_tapa_respecto_al_vertice() {
+        let orbit = ConeOrbit { yaw: 0.0, pitch: 0.6 };
+        let cima = project_cone_point([0.0, 0.0, 0.5], orbit); // centro tapa
+        let base = project_cone_point([0.0, 0.0, -0.5], orbit); // vértice
+        assert!(cima.1 > base.1, "la tapa se pinta más arriba que el vértice");
+    }
+
+    #[test]
+    fn orbit_acota_el_pitch() {
+        let mut o = ConeOrbit::default();
+        for _ in 0..100 {
+            o.orbit(0.1, 0.1);
+        }
+        assert!(o.pitch <= 1.45 + 1e-6);
+        for _ in 0..100 {
+            o.orbit(0.1, -0.1);
+        }
+        assert!(o.pitch >= 0.05 - 1e-6);
+    }
+
+    #[test]
+    fn malla_tiene_el_conteo_esperado() {
+        let f = cone_facets();
+        assert_eq!(f.len(), CONE_SEGMENTS * (CONE_RINGS + CAP_RINGS));
+    }
+}
diff --git a/widgets/color-picker/src/lib.rs b/widgets/color-picker/src/lib.rs
index 845246b..d80f49b 100644
--- a/widgets/color-picker/src/lib.rs
+++ b/widgets/color-picker/src/lib.rs
@@ -21,6 +21,15 @@
 
 #![forbid(unsafe_code)]
 
+mod cone;
+mod popup;
+pub use cone::{cone_facets, project_cone_point, ConeFacet, ConeOrbit, CONE_RINGS, CONE_SEGMENTS};
+pub use popup::{
+    alpha_strip_view, apply_scrub, color_popup_view, color_trigger_view, hsv_cone_view,
+    hue_strip_view, push_recent, scrub_channel_value, scrub_field_view, sv_pad_view,
+    ColorPopupPalette, ColorPopupSpec, ScrubChannel,
+};
+
 use llimphi_ui::llimphi_layout::taffy::{
     prelude::{length, percent, Dimension, FlexDirection, Size, Style},
     FlexWrap, Rect,
@@ -28,7 +37,10 @@ use llimphi_ui::llimphi_layout::taffy::{
 use llimphi_ui::llimphi_raster::peniko::Color;
 use llimphi_ui::{DragPhase, View};
 use llimphi_widget_slider::{slider_view, SliderPalette};
-use llimphi_widget_text_input::{text_input_view, TextInputPalette, TextInputState};
+use llimphi_widget_text_input::{
+    text_input_view, text_input_view_full, TextInputEvent, TextInputPalette, TextInputState,
+};
+use std::sync::Arc;
 
 /// Paleta del color-picker: la del slider RGBA + los bordes de los chips + la
 /// del campo hex.
@@ -74,8 +86,12 @@ pub struct HexField<'a, Msg> {
     pub focused: bool,
     /// Buffer prestado por el caller mientras se edita.
     pub state: Option<&'a TextInputState>,
-    /// Mensaje al clickear el campo (el caller arranca a editarlo).
+    /// Mensaje al clickear el campo **sin foco** (el caller arranca a editarlo).
     pub on_focus: Msg,
+    /// Envuelve los eventos de **mouse** del campo focado (caret / doble-click →
+    /// palabra / arrastre → selección). El caller los aplica con `state.handle`.
+    /// Así el hex tiene el MISMO comportamiento completo que cualquier text-input.
+    pub on_input: Arc<dyn Fn(TextInputEvent) -> Msg + Send + Sync>,
 }
 
 /// `#RRGGBB` del color (descarta el alfa, que se edita con el slider A).
@@ -186,6 +202,16 @@ where
     .children(rows)
 }
 
+/// La fila del campo hex `#RRGGBB` como pieza reusable (la usa el popover).
+/// Ver [`hex_row`].
+pub fn hex_row_pub<Msg: Clone + 'static>(
+    rgba: [u8; 4],
+    hex: HexField<Msg>,
+    palette: &ColorPickerPalette,
+) -> View<Msg> {
+    hex_row(rgba, hex, palette)
+}
+
 /// La fila del campo hex `#RRGGBB`: un input de ancho fijo. Cuando está focado
 /// usa el buffer prestado; si no, muestra el hex del color actual.
 fn hex_row<Msg: Clone + 'static>(
@@ -194,7 +220,12 @@ fn hex_row<Msg: Clone + 'static>(
     palette: &ColorPickerPalette,
 ) -> View<Msg> {
     let input = match (hex.focused, hex.state) {
-        (true, Some(st)) => text_input_view(st, "", true, &palette.hex_input, hex.on_focus),
+        // Focado: comportamiento COMPLETO (caret/doble-click/selección) via el wrap.
+        (true, Some(st)) => {
+            let on_input = hex.on_input;
+            text_input_view_full(st, "", true, &palette.hex_input, move |ev| on_input(ev))
+        }
+        // Sin foco: display en reposo; un click lo enfoca.
         _ => {
             let mut tmp = TextInputState::new();
             tmp.set_text(rgba_to_hex(rgba));
@@ -382,7 +413,7 @@ where
 }
 
 /// Convierte RGB (`[u8;3]`) a HSV: `(h en 0..360, s en 0..1, v en 0..1)`.
-fn rgb_to_hsv(rgb: [u8; 3]) -> (f32, f32, f32) {
+pub fn rgb_to_hsv(rgb: [u8; 3]) -> (f32, f32, f32) {
     let r = rgb[0] as f32 / 255.0;
     let g = rgb[1] as f32 / 255.0;
     let b = rgb[2] as f32 / 255.0;
@@ -404,7 +435,7 @@ fn rgb_to_hsv(rgb: [u8; 3]) -> (f32, f32, f32) {
 }
 
 /// Convierte HSV (`h en 0..360, s,v en 0..1`) a RGB (`[u8;3]`).
-fn hsv_to_rgb(h: f32, s: f32, v: f32) -> [u8; 3] {
+pub fn hsv_to_rgb(h: f32, s: f32, v: f32) -> [u8; 3] {
     let c = v * s;
     let hp = (h.rem_euclid(360.0)) / 60.0;
     let x = c * (1.0 - (hp.rem_euclid(2.0) - 1.0).abs());
diff --git a/widgets/color-picker/src/popup.rs b/widgets/color-picker/src/popup.rs
new file mode 100644
index 0000000..52028dd
--- /dev/null
+++ b/widgets/color-picker/src/popup.rs
@@ -0,0 +1,917 @@
+//! `popup` — el selector de color **en ventanita flotante** (popover): el
+//! hermano rico del [`color_picker_view`](crate::color_picker_view) inline.
+//!
+//! Se monta en [`App::view_overlay`](llimphi_ui::App::view_overlay), como el
+//! `select` o el `context-menu`: un scrim full-screen que dismissa al
+//! click-fuera + un panel absoluto anclado bajo el disparador. Contiene, de
+//! arriba abajo:
+//!
+//! 1. **Cono HSV/HSB en 3D** ([`hsv_cone_view`]) — el sólido de color orbitable
+//!    con arrastre, con un marcador en la posición del color actual. La
+//!    innovación: ver *dónde* cae tu color dentro del espacio HSV.
+//! 2. **Panel S/V** ([`sv_pad_view`]) — saturación (x) × valor (y) del tono
+//!    actual, arrastrable.
+//! 3. **Barra de tono** ([`hue_strip_view`]) y **barra de alfa**
+//!    ([`alpha_strip_view`]).
+//! 4. **Colores recientes** — caché que el caller posee (ver [`push_recent`]) +
+//!    paleta de presets.
+//! 5. **Campos numéricos** — hex editable + valores **R G B** y **H S V**
+//!    *scrubbables* (arrastre vertical, sin foco de teclado) ([`scrub_field_view`]).
+//!
+//! Es agnóstico como el resto: recibe `[u8; 4]` y emite el color nuevo por
+//! callbacks `Msg`. Todo el estado (color actual, órbita, recientes, foco del
+//! hex) lo posee el caller.
+
+use std::sync::{Arc, Mutex};
+
+use llimphi_ui::llimphi_layout::taffy::{
+    prelude::{auto, length, percent, Dimension, FlexDirection, Position, Size, Style},
+    AlignItems, FlexWrap, JustifyContent, Rect,
+};
+use llimphi_ui::llimphi_raster::peniko::Color;
+use llimphi_ui::llimphi_text::Alignment;
+use llimphi_ui::{DragPhase, View};
+
+use crate::cone::{cone_facets, hsv_model_point, project_cone_point, ConeOrbit};
+use crate::{
+    hex_row_pub, rgb_to_hsv, hsv_to_rgb, ColorPickerPalette, HexField,
+};
+
+// ─────────────────────────────────────────────────────────────────────────
+// Dimensiones del panel (anchos fijos → los deltas de arrastre escalan bien).
+// ─────────────────────────────────────────────────────────────────────────
+
+const PANEL_W: f32 = 300.0;
+const PAD: f32 = 12.0;
+/// Ancho interior útil (lo que ocupan cono/pad/barras).
+const INNER: f32 = PANEL_W - 2.0 * PAD;
+const CONE_H: f32 = 190.0;
+const SV_H: f32 = 150.0;
+const STRIP_H: f32 = 16.0;
+const GAP: f32 = 8.0;
+/// Estimación del alto del panel para acotarlo al viewport (contenido real es
+/// auto; esto sólo posiciona).
+const PANEL_H_EST: f32 = 640.0;
+
+// ─────────────────────────────────────────────────────────────────────────
+// Paleta
+// ─────────────────────────────────────────────────────────────────────────
+
+/// Paleta del popover, derivada del `Theme`.
+#[derive(Debug, Clone, Copy)]
+pub struct ColorPopupPalette {
+    /// Paleta del picker inline (sliders/hex/chips) — reusada.
+    pub picker: ColorPickerPalette,
+    /// Fondo del panel elevado.
+    pub panel: Color,
+    /// Fondo de un chip/campo hundido.
+    pub inset: Color,
+    /// Borde del panel y de los campos.
+    pub border: Color,
+    /// Scrim translúcido de dismiss.
+    pub scrim: Color,
+    /// Texto normal / atenuado / acento.
+    pub fg_text: Color,
+    pub fg_muted: Color,
+    pub accent: Color,
+    /// Contorno de los marcadores sobre cono / pad / barras.
+    pub marker: Color,
+    /// Radio de las esquinas del panel.
+    pub radius: f64,
+}
+
+impl Default for ColorPopupPalette {
+    fn default() -> Self {
+        Self::from_theme(&llimphi_theme::Theme::dark())
+    }
+}
+
+impl ColorPopupPalette {
+    /// Construye la paleta desde un `Theme` semántico.
+    pub fn from_theme(t: &llimphi_theme::Theme) -> Self {
+        Self {
+            picker: ColorPickerPalette::from_theme(t),
+            panel: t.bg_panel,
+            inset: t.bg_input,
+            border: t.border,
+            scrim: Color::from_rgba8(0, 0, 0, 96),
+            fg_text: t.fg_text,
+            fg_muted: t.fg_muted,
+            accent: t.accent,
+            marker: Color::from_rgba8(255, 255, 255, 235),
+            radius: 10.0,
+        }
+    }
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Caché de colores recientes
+// ─────────────────────────────────────────────────────────────────────────
+
+/// Empuja `color` al frente de la caché de recientes que el caller posee,
+/// deduplicando (si ya estaba, sube al frente) y recortando a `cap`. Llamalo
+/// cuando el usuario "confirma" un color (cierra el popover, suelta el drag,
+/// etc.) — no en cada micro-cambio del arrastre.
+pub fn push_recent(list: &mut Vec<[u8; 4]>, color: [u8; 4], cap: usize) {
+    list.retain(|c| *c != color);
+    list.insert(0, color);
+    if list.len() > cap {
+        list.truncate(cap);
+    }
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Popover completo
+// ─────────────────────────────────────────────────────────────────────────
+
+/// Todo lo que el popover necesita, prestado del `Model` del caller.
+pub struct ColorPopupSpec<'a, Msg: Clone + 'static> {
+    /// Esquina superior-izquierda deseada (típico: bajo el disparador).
+    pub anchor: (f32, f32),
+    /// Tamaño del viewport, para acotar el panel a la pantalla.
+    pub viewport: (f32, f32),
+    /// Color actual.
+    pub rgba: [u8; 4],
+    /// Órbita del cono 3D (la posee el caller).
+    pub orbit: ConeOrbit,
+    /// Caché de recientes (ver [`push_recent`]). Puede ir vacía.
+    pub recent: &'a [[u8; 4]],
+    /// Presets fijos (p. ej. [`DEFAULT_SWATCHES`](crate::DEFAULT_SWATCHES)).
+    pub swatches: &'a [[u8; 3]],
+    /// Campo hex editable (foco del caller). `None` = sin campo hex.
+    pub hex: Option<HexField<'a, Msg>>,
+    pub palette: &'a ColorPopupPalette,
+    /// Nuevo color elegido (cualquier control).
+    pub on_change: Arc<dyn Fn([u8; 4]) -> Msg + Send + Sync>,
+    /// Arrastre sobre el cono: `(d_yaw, d_pitch)` en radianes.
+    pub on_orbit: Arc<dyn Fn(f32, f32) -> Msg + Send + Sync>,
+    /// Click fuera (scrim) o Esc.
+    pub on_dismiss: Msg,
+}
+
+/// Compone el popover completo como `View<Msg>` para
+/// [`App::view_overlay`](llimphi_ui::App::view_overlay).
+pub fn color_popup_view<Msg: Clone + Send + Sync + 'static>(
+    spec: ColorPopupSpec<'_, Msg>,
+) -> View<Msg> {
+    let ColorPopupSpec {
+        anchor,
+        viewport,
+        rgba,
+        orbit,
+        recent,
+        swatches,
+        hex,
+        palette,
+        on_change,
+        on_orbit,
+        on_dismiss,
+    } = spec;
+
+    let mut rows: Vec<View<Msg>> = Vec::with_capacity(10);
+
+    // 1. Cono HSV 3D.
+    rows.push(hsv_cone_view(rgba, orbit, (INNER, CONE_H), palette, on_orbit));
+    // 2. Pad S/V.
+    rows.push(sv_pad_view(rgba, (INNER, SV_H), palette, on_change.clone()));
+    // 3. Barras tono + alfa.
+    rows.push(hue_strip_view(rgba, INNER, palette, on_change.clone()));
+    rows.push(alpha_strip_view(rgba, INNER, palette, on_change.clone()));
+    // 4. Recientes + presets.
+    if !recent.is_empty() {
+        rows.push(section_label("Recientes", palette));
+        rows.push(chip_row(recent.iter().copied().collect(), rgba, palette, &on_change));
+    }
+    if !swatches.is_empty() {
+        rows.push(section_label("Presets", palette));
+        let cur_a = rgba[3];
+        let presets: Vec<[u8; 4]> =
+            swatches.iter().map(|c| [c[0], c[1], c[2], cur_a]).collect();
+        rows.push(chip_row(presets, rgba, palette, &on_change));
+    }
+    // 5. Numéricos: hex + R G B + H S V.
+    if let Some(hex) = hex {
+        rows.push(hex_row_pub(rgba, hex, &palette.picker));
+    }
+    rows.push(scrub_row(
+        rgba,
+        [ScrubChannel::R, ScrubChannel::G, ScrubChannel::B],
+        palette,
+        &on_change,
+    ));
+    rows.push(scrub_row(
+        rgba,
+        [ScrubChannel::H, ScrubChannel::S, ScrubChannel::V],
+        palette,
+        &on_change,
+    ));
+
+    // Clamp del ancla al viewport.
+    let margin = 6.0;
+    let x = anchor
+        .0
+        .min((viewport.0 - PANEL_W - margin).max(margin))
+        .max(margin);
+    let y = anchor
+        .1
+        .min((viewport.1 - PANEL_H_EST - margin).max(margin))
+        .max(margin);
+
+    // Panel: nodo exterior = borde; interior = fondo + padding + columna.
+    let panel = View::new(Style {
+        position: Position::Absolute,
+        inset: Rect { left: length(x), top: length(y), right: auto(), bottom: auto() },
+        size: Size { width: length(PANEL_W), height: Dimension::auto() },
+        padding: Rect {
+            left: length(1.0_f32),
+            right: length(1.0_f32),
+            top: length(1.0_f32),
+            bottom: length(1.0_f32),
+        },
+        ..Default::default()
+    })
+    .fill(palette.border)
+    .radius(palette.radius)
+    .children(vec![View::new(Style {
+        flex_direction: FlexDirection::Column,
+        size: Size { width: percent(1.0_f32), height: Dimension::auto() },
+        padding: Rect {
+            left: length(PAD),
+            right: length(PAD),
+            top: length(PAD),
+            bottom: length(PAD),
+        },
+        gap: Size { width: length(0.0_f32), height: length(GAP) },
+        align_items: Some(AlignItems::Center),
+        ..Default::default()
+    })
+    .fill(palette.panel)
+    .radius((palette.radius - 1.0).max(0.0))
+    .children(rows)]);
+
+    // Scrim full-screen que dismissa.
+    View::new(Style {
+        size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+        ..Default::default()
+    })
+    .fill(palette.scrim)
+    .on_click(on_dismiss)
+    .children(vec![panel])
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// El cono HSV/HSB en 3D
+// ─────────────────────────────────────────────────────────────────────────
+
+/// Sensibilidad del arrastre de órbita (radianes por px).
+const ORBIT_K: f32 = 0.01;
+
+/// El **cono HSV en 3D**: pinta el sólido de color con flat-shading + orden de
+/// pintor (painter), un marcador en la posición del color actual, y orbita con
+/// arrastre. `size` = `(ancho, alto)` del canvas en px. `on_orbit(d_yaw,
+/// d_pitch)` acumula el giro en el `Model` del caller.
+pub fn hsv_cone_view<Msg: Clone + Send + Sync + 'static>(
+    rgba: [u8; 4],
+    orbit: ConeOrbit,
+    size: (f32, f32),
+    palette: &ColorPopupPalette,
+    on_orbit: Arc<dyn Fn(f32, f32) -> Msg + Send + Sync>,
+) -> View<Msg> {
+    let (w, h) = size;
+    let facets = cone_facets();
+    let (hue, sat, val) = rgb_to_hsv([rgba[0], rgba[1], rgba[2]]);
+    let marker_col = palette.marker;
+
+    let handler = move |phase: DragPhase, dx: f32, dy: f32| -> Option<Msg> {
+        match phase {
+            DragPhase::Move => Some(on_orbit(dx * ORBIT_K, dy * ORBIT_K)),
+            DragPhase::End => None,
+        }
+    };
+
+    View::new(Style {
+        size: Size { width: length(w), height: length(h) },
+        flex_shrink: 0.0,
+        ..Default::default()
+    })
+    .draggable(handler)
+    .paint_with(move |scene, _ts, rect| {
+        use llimphi_ui::llimphi_raster::kurbo::{Affine, BezPath, Circle, Point};
+        use llimphi_ui::llimphi_raster::peniko::Fill;
+        if rect.w <= 1.0 || rect.h <= 1.0 {
+            return;
+        }
+        let cx = (rect.x + rect.w * 0.5) as f64;
+        let cy = (rect.y + rect.h * 0.5) as f64;
+        let scale = (rect.w.min(rect.h) * 0.40) as f64;
+        let to_px = |m: [f32; 3]| -> (f64, f64, f32) {
+            let (sx, sy, depth) = project_cone_point(m, orbit);
+            (cx + sx as f64 * scale, cy - sy as f64 * scale, depth)
+        };
+
+        // Proyectar cada cara y ordenarla por profundidad (atrás → adelante).
+        let mut prepared: Vec<([(f64, f64); 4], f32, [u8; 3])> = facets
+            .iter()
+            .map(|f| {
+                let mut pts = [(0.0, 0.0); 4];
+                let mut dsum = 0.0;
+                for (i, c) in f.corners.iter().enumerate() {
+                    let (px, py, d) = to_px(*c);
+                    pts[i] = (px, py);
+                    dsum += d;
+                }
+                (pts, dsum * 0.25, f.color)
+            })
+            .collect();
+        prepared.sort_by(|a, b| a.1.partial_cmp(&b.1).unwrap_or(core::cmp::Ordering::Equal));
+
+        for (pts, depth, color) in &prepared {
+            // Sombreado sutil por profundidad: las caras del frente, más claras.
+            let shade = 0.74 + 0.26 * ((depth + 0.9) / 1.8).clamp(0.0, 1.0);
+            let sc = |c: u8| ((c as f32 * shade).round().clamp(0.0, 255.0)) as u8;
+            let col = Color::from_rgba8(sc(color[0]), sc(color[1]), sc(color[2]), 255);
+            let mut bp = BezPath::new();
+            bp.move_to(Point::new(pts[0].0, pts[0].1));
+            bp.line_to(Point::new(pts[1].0, pts[1].1));
+            bp.line_to(Point::new(pts[2].0, pts[2].1));
+            bp.line_to(Point::new(pts[3].0, pts[3].1));
+            bp.close_path();
+            scene.fill(Fill::NonZero, Affine::IDENTITY, &col, None, &bp);
+        }
+
+        // Marcador del color actual dentro del sólido.
+        let (mx, my, _) = to_px(hsv_model_point(hue, sat, val));
+        let center = Point::new(mx, my);
+        let dark = Color::from_rgba8(0, 0, 0, 235);
+        scene.fill(Fill::NonZero, Affine::IDENTITY, &dark, None, &Circle::new(center, 6.0));
+        let cur = Color::from_rgba8(rgba[0], rgba[1], rgba[2], 255);
+        scene.fill(Fill::NonZero, Affine::IDENTITY, &cur, None, &Circle::new(center, 4.5));
+        // Aro exterior claro.
+        let ring = kurbo_ring(center, 6.0, 1.3);
+        scene.fill(Fill::NonZero, Affine::IDENTITY, &marker_col, None, &ring);
+    })
+}
+
+/// Anillo (annulus) como `BezPath` de dos círculos con regla par-impar.
+fn kurbo_ring(
+    center: llimphi_ui::llimphi_raster::kurbo::Point,
+    r_out: f64,
+    width: f64,
+) -> llimphi_ui::llimphi_raster::kurbo::BezPath {
+    use llimphi_ui::llimphi_raster::kurbo::{BezPath, Circle, Shape};
+    let mut bp = BezPath::new();
+    for e in Circle::new(center, r_out).path_elements(0.1) {
+        bp.push(e);
+    }
+    for e in Circle::new(center, (r_out - width).max(0.1)).path_elements(0.1) {
+        bp.push(e);
+    }
+    bp
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Pad S/V (saturación × valor del tono actual)
+// ─────────────────────────────────────────────────────────────────────────
+
+/// El **pad Saturación/Valor**: un cuadrado con S en x (izq→der) y V en y
+/// (arriba→abajo), teñido con el tono actual. **Click salta** al punto exacto
+/// y **arrastrar** sigue al cursor (posición absoluta, no delta relativo). Un
+/// marcador anular señala `(S, V)`. `size` = `(ancho, alto)` en px.
+pub fn sv_pad_view<Msg: Clone + Send + Sync + 'static>(
+    rgba: [u8; 4],
+    size: (f32, f32),
+    palette: &ColorPopupPalette,
+    on_change: Arc<dyn Fn([u8; 4]) -> Msg + Send + Sync>,
+) -> View<Msg> {
+    let (w, h) = size;
+    // El pad opera sobre el tono actual; para un negro/gris el tono queda como
+    // esté (0 = rojo), permitiendo "entrar" a un color al mover S/V.
+    let (hue, sat, val) = rgb_to_hsv([rgba[0], rgba[1], rgba[2]]);
+    let alpha = rgba[3];
+    let marker_col = palette.marker;
+    let border = palette.border;
+
+    // Posición local → color, **absoluta** (S = x/w, V = 1 - y/h).
+    let at_to_color = move |px: f32, py: f32, rw: f32, rh: f32| -> [u8; 4] {
+        let s = (px / rw.max(1.0)).clamp(0.0, 1.0);
+        let v = (1.0 - py / rh.max(1.0)).clamp(0.0, 1.0);
+        let c = hsv_to_rgb(hue, s, v);
+        [c[0], c[1], c[2], alpha]
+    };
+
+    // Click: salta al punto exacto (fires on press).
+    let on_click = on_change.clone();
+    let click = move |lx: f32, ly: f32, rw: f32, rh: f32| -> Option<Msg> {
+        Some(on_click(at_to_color(lx, ly, rw, rh)))
+    };
+    // Drag: acumula la posición local (sembrada en el press `lx0/ly0`) para
+    // seguir al cursor de forma absoluta, sin depender del estado congelado.
+    let live: Arc<Mutex<Option<(f32, f32)>>> = Arc::new(Mutex::new(None));
+    let on_drag = on_change.clone();
+    let drag = move |phase: DragPhase, dx: f32, dy: f32, lx0: f32, ly0: f32| -> Option<Msg> {
+        match phase {
+            DragPhase::Move => {
+                let mut l = live.lock().unwrap();
+                let cur = l.unwrap_or((lx0, ly0));
+                let np = ((cur.0 + dx).clamp(0.0, w), (cur.1 + dy).clamp(0.0, h));
+                *l = Some(np);
+                Some(on_drag(at_to_color(np.0, np.1, w, h)))
+            }
+            DragPhase::End => {
+                *live.lock().unwrap() = None;
+                None
+            }
+        }
+    };
+
+    let pure = hsv_to_rgb(hue, 1.0, 1.0);
+    View::new(Style {
+        size: Size { width: length(w), height: length(h) },
+        flex_shrink: 0.0,
+        ..Default::default()
+    })
+    .radius(6.0)
+    .border(1.0, border)
+    .on_click_at(click)
+    .draggable_at(drag)
+    .paint_with(move |scene, _ts, rect| {
+        use llimphi_ui::llimphi_raster::kurbo::{Affine, Circle, Point, RoundedRect};
+        use llimphi_ui::llimphi_raster::peniko::{Fill, Gradient};
+        if rect.w <= 1.0 || rect.h <= 1.0 {
+            return;
+        }
+        let x0 = rect.x as f64;
+        let y0 = rect.y as f64;
+        let x1 = (rect.x + rect.w) as f64;
+        let y1 = (rect.y + rect.h) as f64;
+        let rr = RoundedRect::new(x0, y0, x1, y1, 6.0);
+        // Base: blanco (S=0) → tono puro (S=1), horizontal.
+        let white = Color::from_rgba8(255, 255, 255, 255);
+        let pure_c = Color::from_rgba8(pure[0], pure[1], pure[2], 255);
+        let gh = Gradient::new_linear(Point::new(x0, y0), Point::new(x1, y0))
+            .with_stops([white, pure_c].as_slice());
+        scene.fill(Fill::NonZero, Affine::IDENTITY, &gh, None, &rr);
+        // Valor: transparente (V=1, arriba) → negro (V=0, abajo), vertical.
+        let clear = Color::from_rgba8(0, 0, 0, 0);
+        let black = Color::from_rgba8(0, 0, 0, 255);
+        let gv = Gradient::new_linear(Point::new(x0, y0), Point::new(x0, y1))
+            .with_stops([clear, black].as_slice());
+        scene.fill(Fill::NonZero, Affine::IDENTITY, &gv, None, &rr);
+        // Marcador en (S, V).
+        let mx = x0 + (x1 - x0) * sat as f64;
+        let my = y0 + (y1 - y0) * (1.0 - val as f64);
+        let center = Point::new(mx.clamp(x0, x1), my.clamp(y0, y1));
+        let dark = Color::from_rgba8(0, 0, 0, 220);
+        scene.fill(Fill::NonZero, Affine::IDENTITY, &dark, None, &Circle::new(center, 6.0));
+        scene.fill(Fill::NonZero, Affine::IDENTITY, &marker_col, None, &kurbo_ring(center, 6.0, 1.5));
+    })
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Barra de tono
+// ─────────────────────────────────────────────────────────────────────────
+
+/// La **barra de tono** (arcoíris): click/arrastre **absolutos** fijan H por
+/// la posición, conservando S/V/A. `width` en px (fijo).
+pub fn hue_strip_view<Msg: Clone + Send + Sync + 'static>(
+    rgba: [u8; 4],
+    width: f32,
+    palette: &ColorPopupPalette,
+    on_change: Arc<dyn Fn([u8; 4]) -> Msg + Send + Sync>,
+) -> View<Msg> {
+    let (h, mut s, mut v) = rgb_to_hsv([rgba[0], rgba[1], rgba[2]]);
+    if s < 0.02 {
+        s = 1.0;
+        if v < 0.02 {
+            v = 1.0;
+        }
+    }
+    let alpha = rgba[3];
+    let thumb_ratio = h / 360.0;
+    let marker_col = palette.marker;
+
+    // Tono absoluto = x/w · 360.
+    let at_to_color = move |px: f32, rw: f32| -> [u8; 4] {
+        let nh = (px / rw.max(1.0)).clamp(0.0, 1.0) * 360.0;
+        let c = hsv_to_rgb(nh, s, v);
+        [c[0], c[1], c[2], alpha]
+    };
+    let on_click = on_change.clone();
+    let click = move |lx: f32, _ly: f32, rw: f32, _rh: f32| -> Option<Msg> {
+        Some(on_click(at_to_color(lx, rw)))
+    };
+    let live: Arc<Mutex<Option<f32>>> = Arc::new(Mutex::new(None));
+    let on_drag = on_change.clone();
+    let drag = move |phase: DragPhase, dx: f32, _dy: f32, lx0: f32, _ly0: f32| -> Option<Msg> {
+        match phase {
+            DragPhase::Move => {
+                let mut l = live.lock().unwrap();
+                let cur = l.unwrap_or(lx0);
+                let np = (cur + dx).clamp(0.0, width);
+                *l = Some(np);
+                Some(on_drag(at_to_color(np, width)))
+            }
+            DragPhase::End => {
+                *live.lock().unwrap() = None;
+                None
+            }
+        }
+    };
+
+    View::new(Style {
+        size: Size { width: length(width), height: length(STRIP_H) },
+        flex_shrink: 0.0,
+        ..Default::default()
+    })
+    .radius(4.0)
+    .on_click_at(click)
+    .draggable_at(drag)
+    .paint_with(move |scene, _ts, rect| {
+        use llimphi_ui::llimphi_raster::kurbo::{Affine, Point, RoundedRect};
+        use llimphi_ui::llimphi_raster::peniko::{Fill, Gradient};
+        if rect.w <= 1.0 || rect.h <= 1.0 {
+            return;
+        }
+        let x0 = rect.x as f64;
+        let y0 = rect.y as f64;
+        let x1 = (rect.x + rect.w) as f64;
+        let y1 = (rect.y + rect.h) as f64;
+        let rr = RoundedRect::new(x0, y0, x1, y1, 4.0);
+        let stops = [
+            Color::from_rgba8(255, 0, 0, 255),
+            Color::from_rgba8(255, 255, 0, 255),
+            Color::from_rgba8(0, 255, 0, 255),
+            Color::from_rgba8(0, 255, 255, 255),
+            Color::from_rgba8(0, 0, 255, 255),
+            Color::from_rgba8(255, 0, 255, 255),
+            Color::from_rgba8(255, 0, 0, 255),
+        ];
+        let g = Gradient::new_linear(Point::new(x0, y0), Point::new(x1, y0))
+            .with_stops(stops.as_slice());
+        scene.fill(Fill::NonZero, Affine::IDENTITY, &g, None, &rr);
+        let tx = x0 + (x1 - x0) * thumb_ratio as f64;
+        let thumb = RoundedRect::new(tx - 1.5, y0 - 1.0, tx + 1.5, y1 + 1.0, 1.5);
+        scene.fill(Fill::NonZero, Affine::IDENTITY, &marker_col, None, &thumb);
+    })
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Barra de alfa
+// ─────────────────────────────────────────────────────────────────────────
+
+/// La **barra de alfa**: damero + degradé del color actual de transparente a
+/// opaco. Click/arrastre **absolutos** fijan el alfa por la posición.
+pub fn alpha_strip_view<Msg: Clone + Send + Sync + 'static>(
+    rgba: [u8; 4],
+    width: f32,
+    palette: &ColorPopupPalette,
+    on_change: Arc<dyn Fn([u8; 4]) -> Msg + Send + Sync>,
+) -> View<Msg> {
+    let rgb = [rgba[0], rgba[1], rgba[2]];
+    let thumb_ratio = rgba[3] as f32 / 255.0;
+    let marker_col = palette.marker;
+
+    // Alfa absoluto = x/w · 255.
+    let at_to_color = move |px: f32, rw: f32| -> [u8; 4] {
+        let na = ((px / rw.max(1.0)).clamp(0.0, 1.0) * 255.0).round() as u8;
+        [rgb[0], rgb[1], rgb[2], na]
+    };
+    let on_click = on_change.clone();
+    let click = move |lx: f32, _ly: f32, rw: f32, _rh: f32| -> Option<Msg> {
+        Some(on_click(at_to_color(lx, rw)))
+    };
+    let live: Arc<Mutex<Option<f32>>> = Arc::new(Mutex::new(None));
+    let on_drag = on_change.clone();
+    let drag = move |phase: DragPhase, dx: f32, _dy: f32, lx0: f32, _ly0: f32| -> Option<Msg> {
+        match phase {
+            DragPhase::Move => {
+                let mut l = live.lock().unwrap();
+                let cur = l.unwrap_or(lx0);
+                let np = (cur + dx).clamp(0.0, width);
+                *l = Some(np);
+                Some(on_drag(at_to_color(np, width)))
+            }
+            DragPhase::End => {
+                *live.lock().unwrap() = None;
+                None
+            }
+        }
+    };
+
+    View::new(Style {
+        size: Size { width: length(width), height: length(STRIP_H) },
+        flex_shrink: 0.0,
+        ..Default::default()
+    })
+    .radius(4.0)
+    .on_click_at(click)
+    .draggable_at(drag)
+    .paint_with(move |scene, _ts, rect| {
+        use llimphi_ui::llimphi_raster::kurbo::{Affine, Point, Rect as KRect, RoundedRect};
+        use llimphi_ui::llimphi_raster::peniko::{Fill, Gradient, Mix};
+        if rect.w <= 1.0 || rect.h <= 1.0 {
+            return;
+        }
+        let x0 = rect.x as f64;
+        let y0 = rect.y as f64;
+        let x1 = (rect.x + rect.w) as f64;
+        let y1 = (rect.y + rect.h) as f64;
+        let rr = RoundedRect::new(x0, y0, x1, y1, 4.0);
+        scene.push_layer(Fill::NonZero, Mix::Normal, 1.0, Affine::IDENTITY, &rr);
+        // Damero.
+        let cell = 8.0;
+        let light = Color::from_rgba8(200, 200, 200, 255);
+        let dark = Color::from_rgba8(150, 150, 150, 255);
+        let cols = ((x1 - x0) / cell).ceil() as i32;
+        let rows = ((y1 - y0) / cell).ceil() as i32;
+        for r in 0..rows {
+            for c in 0..cols {
+                let col = if (r + c) % 2 == 0 { light } else { dark };
+                let cxx = x0 + c as f64 * cell;
+                let cyy = y0 + r as f64 * cell;
+                let sq = KRect::new(cxx, cyy, (cxx + cell).min(x1), (cyy + cell).min(y1));
+                scene.fill(Fill::NonZero, Affine::IDENTITY, &col, None, &sq);
+            }
+        }
+        // Degradé del color: transparente → opaco.
+        let c0 = Color::from_rgba8(rgb[0], rgb[1], rgb[2], 0);
+        let c1 = Color::from_rgba8(rgb[0], rgb[1], rgb[2], 255);
+        let g = Gradient::new_linear(Point::new(x0, y0), Point::new(x1, y0))
+            .with_stops([c0, c1].as_slice());
+        scene.fill(Fill::NonZero, Affine::IDENTITY, &g, None, &rr);
+        scene.pop_layer();
+        // Thumb.
+        let tx = x0 + (x1 - x0) * thumb_ratio as f64;
+        let thumb = RoundedRect::new(tx - 1.5, y0 - 1.0, tx + 1.5, y1 + 1.0, 1.5);
+        scene.fill(Fill::NonZero, Affine::IDENTITY, &marker_col, None, &thumb);
+    })
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Chips (recientes / presets)
+// ─────────────────────────────────────────────────────────────────────────
+
+fn section_label<Msg: Clone + 'static>(text: &str, palette: &ColorPopupPalette) -> View<Msg> {
+    View::new(Style {
+        size: Size { width: percent(1.0_f32), height: length(14.0_f32) },
+        flex_shrink: 0.0,
+        ..Default::default()
+    })
+    .text_aligned(text.to_string(), 11.0, palette.fg_muted, Alignment::Start)
+}
+
+type ColorCb<Msg> = Arc<dyn Fn([u8; 4]) -> Msg + Send + Sync>;
+
+fn chip_row<Msg: Clone + Send + Sync + 'static>(
+    colors: Vec<[u8; 4]>,
+    cur: [u8; 4],
+    palette: &ColorPopupPalette,
+    on_change: &ColorCb<Msg>,
+) -> View<Msg> {
+    let cb: &(dyn Fn([u8; 4]) -> Msg + Send + Sync) = &**on_change;
+    let chips: Vec<View<Msg>> = colors
+        .into_iter()
+        .map(|c| {
+            let active = c[0] == cur[0] && c[1] == cur[1] && c[2] == cur[2] && c[3] == cur[3];
+            View::new(Style {
+                size: Size { width: length(22.0_f32), height: length(22.0_f32) },
+                flex_shrink: 0.0,
+                ..Default::default()
+            })
+            .fill(Color::from_rgba8(c[0], c[1], c[2], c[3]))
+            .radius(5.0)
+            .border(
+                if active { 2.0 } else { 1.0 },
+                if active { palette.accent } else { palette.border },
+            )
+            .on_click(cb(c))
+        })
+        .collect();
+    View::new(Style {
+        flex_direction: FlexDirection::Row,
+        flex_wrap: FlexWrap::Wrap,
+        size: Size { width: percent(1.0_f32), height: Dimension::auto() },
+        gap: Size { width: length(5.0_f32), height: length(5.0_f32) },
+        ..Default::default()
+    })
+    .children(chips)
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Campos numéricos "scrubbables"
+// ─────────────────────────────────────────────────────────────────────────
+
+/// Un canal editable por arrastre vertical en [`scrub_field_view`].
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum ScrubChannel {
+    R,
+    G,
+    B,
+    A,
+    /// Tono 0..360.
+    H,
+    /// Saturación 0..100 (%).
+    S,
+    /// Valor/Brillo 0..100 (%).
+    V,
+}
+
+impl ScrubChannel {
+    fn label(self) -> &'static str {
+        match self {
+            ScrubChannel::R => "R",
+            ScrubChannel::G => "G",
+            ScrubChannel::B => "B",
+            ScrubChannel::A => "A",
+            ScrubChannel::H => "H",
+            ScrubChannel::S => "S",
+            ScrubChannel::V => "V",
+        }
+    }
+
+    /// Unidades de canal por px arrastrado (arriba = subir).
+    fn sensitivity(self) -> f32 {
+        match self {
+            ScrubChannel::R | ScrubChannel::G | ScrubChannel::B | ScrubChannel::A => 1.0,
+            ScrubChannel::H => 1.5,
+            ScrubChannel::S | ScrubChannel::V => 0.6,
+        }
+    }
+}
+
+/// Valor entero actual del canal para mostrar.
+pub fn scrub_channel_value(rgba: [u8; 4], ch: ScrubChannel) -> i32 {
+    let (h, s, v) = rgb_to_hsv([rgba[0], rgba[1], rgba[2]]);
+    match ch {
+        ScrubChannel::R => rgba[0] as i32,
+        ScrubChannel::G => rgba[1] as i32,
+        ScrubChannel::B => rgba[2] as i32,
+        ScrubChannel::A => rgba[3] as i32,
+        ScrubChannel::H => h.round() as i32,
+        ScrubChannel::S => (s * 100.0).round() as i32,
+        ScrubChannel::V => (v * 100.0).round() as i32,
+    }
+}
+
+/// Aplica un incremento `d` (en unidades del canal) al color y devuelve el nuevo
+/// RGBA. Público para testear la aritmética sin UI.
+pub fn apply_scrub(rgba: [u8; 4], ch: ScrubChannel, d: f32) -> [u8; 4] {
+    let mut out = rgba;
+    match ch {
+        ScrubChannel::R | ScrubChannel::G | ScrubChannel::B | ScrubChannel::A => {
+            let idx = match ch {
+                ScrubChannel::R => 0,
+                ScrubChannel::G => 1,
+                ScrubChannel::B => 2,
+                _ => 3,
+            };
+            out[idx] = (rgba[idx] as f32 + d).clamp(0.0, 255.0).round() as u8;
+        }
+        ScrubChannel::H | ScrubChannel::S | ScrubChannel::V => {
+            let (h, s, v) = rgb_to_hsv([rgba[0], rgba[1], rgba[2]]);
+            let (nh, ns, nv) = match ch {
+                ScrubChannel::H => ((h + d).rem_euclid(360.0), s, v),
+                ScrubChannel::S => (h, (s + d / 100.0).clamp(0.0, 1.0), v),
+                _ => (h, s, (v + d / 100.0).clamp(0.0, 1.0)),
+            };
+            let c = hsv_to_rgb(nh, ns, nv);
+            out = [c[0], c[1], c[2], rgba[3]];
+        }
+    }
+    out
+}
+
+/// Un campo numérico **scrubbable**: muestra `label valor` y responde al
+/// arrastre vertical (arriba = subir) sin robar el foco de teclado. Emite el
+/// color nuevo por `on_change`.
+pub fn scrub_field_view<Msg: Clone + Send + Sync + 'static>(
+    rgba: [u8; 4],
+    ch: ScrubChannel,
+    palette: &ColorPopupPalette,
+    on_change: Arc<dyn Fn([u8; 4]) -> Msg + Send + Sync>,
+) -> View<Msg> {
+    let value = scrub_channel_value(rgba, ch);
+    let sens = ch.sensitivity();
+    // El handler del drag queda congelado en el press: acumulamos el delta
+    // TOTAL desde el press y lo aplicamos a la base (color al iniciar), en vez
+    // de recomputar sobre un estado que no avanza entre eventos.
+    let base = rgba;
+    let acc: Arc<Mutex<f32>> = Arc::new(Mutex::new(0.0));
+    let handler = move |phase: DragPhase, _dx: f32, dy: f32| -> Option<Msg> {
+        match phase {
+            // Arrastre hacia arriba (dy negativo) = subir el valor.
+            DragPhase::Move => {
+                let mut a = acc.lock().unwrap();
+                *a += -dy * sens;
+                Some(on_change(apply_scrub(base, ch, *a)))
+            }
+            DragPhase::End => {
+                *acc.lock().unwrap() = 0.0;
+                None
+            }
+        }
+    };
+    View::new(Style {
+        flex_grow: 1.0,
+        flex_basis: percent(0.0_f32),
+        size: Size { width: Dimension::auto(), height: length(26.0_f32) },
+        align_items: Some(AlignItems::Center),
+        justify_content: Some(JustifyContent::Center),
+        ..Default::default()
+    })
+    .fill(palette.inset)
+    .radius(5.0)
+    .border(1.0, palette.border)
+    .draggable(handler)
+    .text(format!("{} {}", ch.label(), value), 12.0, palette.fg_text)
+}
+
+fn scrub_row<Msg: Clone + Send + Sync + 'static>(
+    rgba: [u8; 4],
+    channels: [ScrubChannel; 3],
+    palette: &ColorPopupPalette,
+    on_change: &ColorCb<Msg>,
+) -> View<Msg> {
+    let cells: Vec<View<Msg>> = channels
+        .iter()
+        .map(|ch| scrub_field_view(rgba, *ch, palette, on_change.clone()))
+        .collect();
+    View::new(Style {
+        flex_direction: FlexDirection::Row,
+        size: Size { width: percent(1.0_f32), height: length(26.0_f32) },
+        gap: Size { width: length(6.0_f32), height: length(0.0_f32) },
+        ..Default::default()
+    })
+    .children(cells)
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Disparador (swatch que abre el popover)
+// ─────────────────────────────────────────────────────────────────────────
+
+/// El **swatch disparador**: una muestra del color actual (con damero de alfa
+/// implícito por el borde) que, al click, emite `on_open`. El caller abre el
+/// popover en `view_overlay`.
+pub fn color_trigger_view<Msg: Clone + 'static>(
+    rgba: [u8; 4],
+    palette: &ColorPopupPalette,
+    on_open: Msg,
+) -> View<Msg> {
+    View::new(Style {
+        size: Size { width: length(40.0_f32), height: length(24.0_f32) },
+        flex_shrink: 0.0,
+        ..Default::default()
+    })
+    .fill(Color::from_rgba8(rgba[0], rgba[1], rgba[2], rgba[3]))
+    .radius(5.0)
+    .border(1.0, palette.border)
+    .on_click(on_open)
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn recientes_dedup_y_cap() {
+        let mut r = Vec::new();
+        push_recent(&mut r, [1, 0, 0, 255], 4);
+        push_recent(&mut r, [2, 0, 0, 255], 4);
+        push_recent(&mut r, [1, 0, 0, 255], 4); // ya estaba → sube al frente
+        assert_eq!(r, vec![[1, 0, 0, 255], [2, 0, 0, 255]]);
+        for i in 0..10u8 {
+            push_recent(&mut r, [i, i, i, 255], 4);
+        }
+        assert_eq!(r.len(), 4);
+    }
+
+    #[test]
+    fn scrub_rgb_sube_y_clampa() {
+        assert_eq!(apply_scrub([100, 0, 0, 255], ScrubChannel::R, 20.0), [120, 0, 0, 255]);
+        assert_eq!(apply_scrub([250, 0, 0, 255], ScrubChannel::R, 20.0), [255, 0, 0, 255]);
+        assert_eq!(apply_scrub([5, 0, 0, 255], ScrubChannel::R, -20.0), [0, 0, 0, 255]);
+    }
+
+    #[test]
+    fn scrub_valor_hsv_oscurece() {
+        // V baja → color más oscuro conservando tono.
+        let c = apply_scrub([255, 0, 0, 255], ScrubChannel::V, -50.0);
+        assert!(c[0] < 255 && c[1] == 0 && c[2] == 0);
+        assert_eq!(c[3], 255);
+    }
+
+    #[test]
+    fn scrub_tono_gira_conservando_alfa() {
+        let c = apply_scrub([255, 0, 0, 128], ScrubChannel::H, 120.0);
+        // 0°+120° = verde puro.
+        assert_eq!(c, [0, 255, 0, 128]);
+    }
+
+    #[test]
+    fn scrub_channel_value_lee_hsv() {
+        assert_eq!(scrub_channel_value([255, 0, 0, 255], ScrubChannel::H), 0);
+        assert_eq!(scrub_channel_value([255, 0, 0, 255], ScrubChannel::S), 100);
+        assert_eq!(scrub_channel_value([255, 0, 0, 255], ScrubChannel::V), 100);
+        assert_eq!(scrub_channel_value([0, 0, 0, 200], ScrubChannel::A), 200);
+    }
+}
diff --git a/widgets/context-menu/Cargo.toml b/widgets/context-menu/Cargo.toml
index 247c216..8b98cf2 100644
--- a/widgets/context-menu/Cargo.toml
+++ b/widgets/context-menu/Cargo.toml
@@ -5,10 +5,16 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
-description = "llimphi-widget-context-menu — menú contextual tawasuyu: panel negro, barra accent vertical de 3px a la izquierda, sin esquinas redondeadas ni sombras, header en uppercase tiny. Se monta sobre App::view_overlay con un scrim full-screen que dismissa al click-fuera."
+description = "llimphi-widget-context-menu — menú contextual tawasuyu: panel elevado (esquinas redondeadas + borde hairline + sombra), filas-píldora con hover/activo, gutter de ícono o check, submenús con flip, header uppercase tiny. Teclado por helpers puros (step_active/edge_active/type_ahead). Se monta sobre App::view_overlay con un scrim full-screen que dismissa al click-fuera."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
 llimphi-widget-panel = { workspace = true }
+# Resuelve el glifo del gutter a ícono vectorial (determinista); fallback a texto.
+llimphi-icons = { workspace = true }
+
+[dev-dependencies]
+# Sólo para el example `menu_demo` (animación de aparición con Tween).
+llimphi-motion = { workspace = true }
diff --git a/widgets/context-menu/examples/menu_demo.rs b/widgets/context-menu/examples/menu_demo.rs
new file mode 100644
index 0000000..d76a667
--- /dev/null
+++ b/widgets/context-menu/examples/menu_demo.rs
@@ -0,0 +1,383 @@
+//! Demo de `llimphi-widget-context-menu`: paridad con un menú contextual
+//! nativo / Material, en vivo.
+//!
+//! Corre con: `cargo run -p llimphi-widget-context-menu --example menu_demo --release`.
+//!
+//! Qué mirar / probar:
+//! - **Teclado** (el foco lo maneja este host con los helpers puros del widget):
+//!   - `↑`/`↓` navegan (saltean separadores y deshabilitados) — `step_active`.
+//!   - `Inicio`/`Fin` van al primero/último — `edge_active`.
+//!   - **Teclea una letra** para saltar por mnemónico (repetí para rotar) —
+//!     `type_ahead`. Ej: `t` salta a «Tema», `e` a «Exportar»/«Eliminar».
+//!   - `→` entra al submenú resaltado, `←` vuelve, `Enter` activa, `Esc` cierra.
+//! - **Items chequeables**: «Ajustar texto» / «Números de línea» muestran ✓ y
+//!   alternan al activarlos (accent en el gutter).
+//! - **Submenús con flip**: «Tema» y «Exportar» abren un flyout. El menú arranca
+//!   pegado a la izquierda → abre a la derecha; **muévelo con `Tab`** para
+//!   anclarlo al borde derecho y ver el flyout **flipear a la izquierda**.
+//! - **Elevación**: el panel flota con sombra suave + borde hairline + esquinas
+//!   redondeadas (look webpage). Aparición animada (fade + leve slide).
+//! - Separador, item deshabilitado («Pegar»), item destructivo («Eliminar»).
+
+use std::sync::Arc;
+
+use llimphi_motion::{animate, motion, Tween};
+use llimphi_ui::llimphi_layout::taffy::{
+    prelude::{length, percent, FlexDirection, Size, Style},
+    AlignItems, Rect,
+};
+use llimphi_ui::llimphi_raster::peniko::Color;
+use llimphi_ui::llimphi_text::Alignment;
+use llimphi_ui::{App, Handle, Key, KeyEvent, KeyState, NamedKey, View};
+use llimphi_widget_context_menu::{
+    context_menu_view_ex, edge_active, step_active, type_ahead, ContextMenuExtras, ContextMenuItem,
+    ContextMenuPalette, ContextMenuSpec,
+};
+
+#[derive(Clone, Debug)]
+enum Msg {
+    Pick(usize),
+    PickSub(usize, usize),
+    Hover(Option<usize>),
+    Key(KeyEvent),
+    Resize(f32, f32),
+    Dismiss,
+    Tick,
+}
+
+struct Model {
+    items: Vec<ContextMenuItem>,
+    active: usize,
+    open_sub: Option<usize>,
+    sub_active: usize,
+    appear: Tween<f32>,
+    viewport: (f32, f32),
+    /// Posiciones de ancla que rotan con `Tab` (para probar el flip).
+    anchors: Vec<(f32, f32)>,
+    anchor_idx: usize,
+    log: String,
+}
+
+/// Construye el menú raíz. `wrap`/`line_nums` son el estado de los checkables.
+fn build_items(wrap: bool, line_nums: bool) -> Vec<ContextMenuItem> {
+    vec![
+        ContextMenuItem::action("Cortar")
+            .icon("✂")
+            .with_shortcut("Ctrl+X"),
+        ContextMenuItem::action("Copiar")
+            .icon("⧉")
+            .with_shortcut("Ctrl+C"),
+        ContextMenuItem::action("Pegar")
+            .icon("⎘")
+            .with_shortcut("Ctrl+V")
+            .disabled(),
+        ContextMenuItem::separator(),
+        ContextMenuItem::action("Ajustar texto").checked(wrap),
+        ContextMenuItem::action("Números de línea").checked(line_nums),
+        ContextMenuItem::separator(),
+        ContextMenuItem::action("Tema").icon("◐").submenu(vec![
+            ContextMenuItem::action("Oscuro").checked(true),
+            ContextMenuItem::action("Claro").checked(false),
+            ContextMenuItem::action("Sistema").checked(false),
+        ]),
+        ContextMenuItem::action("Exportar").icon("⇪").submenu(vec![
+            ContextMenuItem::action("PDF"),
+            ContextMenuItem::action("PNG"),
+            ContextMenuItem::action("SVG").disabled(),
+        ]),
+        ContextMenuItem::separator(),
+        ContextMenuItem::action("Eliminar")
+            .icon("🗑")
+            .with_shortcut("Supr")
+            .destructive(),
+    ]
+}
+
+struct Demo;
+
+impl Demo {
+    fn reappear(m: &mut Model, handle: &Handle<Msg>) {
+        m.appear = Tween::new(0.0, 1.0, motion::NORMAL, motion::ease_out_cubic);
+        animate(handle, motion::NORMAL, || Msg::Tick);
+    }
+}
+
+impl App for Demo {
+    type Model = Model;
+    type Msg = Msg;
+
+    fn title() -> &'static str {
+        "llimphi · menú contextual (paridad nativa)"
+    }
+
+    fn initial_size() -> (u32, u32) {
+        (920, 640)
+    }
+
+    fn init(handle: &Handle<Msg>) -> Model {
+        animate(handle, motion::NORMAL, || Msg::Tick);
+        Model {
+            items: build_items(true, false),
+            active: usize::MAX,
+            open_sub: None,
+            sub_active: usize::MAX,
+            appear: Tween::new(0.0, 1.0, motion::NORMAL, motion::ease_out_cubic),
+            viewport: (920.0, 640.0),
+            anchors: vec![(60.0, 90.0), (430.0, 90.0), (9000.0, 90.0)],
+            anchor_idx: 0,
+            log: String::from("Prueba el teclado: ↑↓ · Inicio/Fin · una letra (type-ahead) · → submenú · Enter · Tab mueve el ancla"),
+        }
+    }
+
+    fn on_resize(_m: &Model, w: u32, h: u32) -> Option<Msg> {
+        Some(Msg::Resize(w as f32, h as f32))
+    }
+
+    fn on_key(_m: &Model, event: &KeyEvent) -> Option<Msg> {
+        (event.state == KeyState::Pressed).then(|| Msg::Key(event.clone()))
+    }
+
+    fn update(model: Model, msg: Msg, handle: &Handle<Msg>) -> Model {
+        let mut m = model;
+        match msg {
+            Msg::Tick => {}
+            Msg::Resize(w, h) => m.viewport = (w, h),
+            Msg::Hover(sub) => {
+                m.open_sub = sub;
+                if let Some(p) = sub {
+                    // Al abrir por hover, resalta el primero del submenú.
+                    if let Some(parent) = m.items.get(p) {
+                        m.sub_active = edge_active(&parent.children, false);
+                    }
+                } else {
+                    m.sub_active = usize::MAX;
+                }
+            }
+            Msg::Pick(i) => Demo::pick_root(&mut m, i, handle),
+            Msg::PickSub(p, c) => Demo::pick_sub(&mut m, p, c),
+            Msg::Dismiss => {
+                m.active = usize::MAX;
+                m.open_sub = None;
+                m.sub_active = usize::MAX;
+                m.log = String::from("(cerrado — clickea o navega para reabrir)");
+                Demo::reappear(&mut m, handle);
+            }
+            Msg::Key(e) => Demo::on_key_press(&mut m, e, handle),
+        }
+        m
+    }
+
+    fn view(model: &Model) -> View<Msg> {
+        // Fondo con instrucciones + el log de la última acción.
+        let bg = View::new(Style {
+            flex_direction: FlexDirection::Column,
+            size: Size {
+                width: percent(1.0_f32),
+                height: percent(1.0_f32),
+            },
+            padding: Rect {
+                left: length(40.0_f32),
+                right: length(40.0_f32),
+                top: length(28.0_f32),
+                bottom: length(28.0_f32),
+            },
+            gap: Size {
+                width: length(0.0_f32),
+                height: length(10.0_f32),
+            },
+            align_items: Some(AlignItems::FlexEnd),
+            ..Default::default()
+        })
+        .fill(Color::from_rgba8(16, 19, 26, 255))
+        .children(vec![View::new(Style {
+            size: Size {
+                width: percent(0.62_f32),
+                height: length(28.0_f32),
+            },
+            ..Default::default()
+        })
+        .text_aligned(
+            model.log.clone(),
+            13.0,
+            Color::from_rgba8(150, 160, 180, 255),
+            Alignment::End,
+        )]);
+        bg
+    }
+
+    fn view_overlay(model: &Model) -> Option<View<Msg>> {
+        let mut pal = ContextMenuPalette::from_theme(&llimphi_theme::Theme::default());
+        pal.scrim = Color::from_rgba8(0, 0, 0, 90);
+        let items = model.items.clone();
+        let spec = ContextMenuSpec {
+            anchor: model.anchors[model.anchor_idx],
+            viewport: model.viewport,
+            header: Some("Editar".into()),
+            items,
+            active: model.active,
+            on_pick: Arc::new(Msg::Pick),
+            on_dismiss: Msg::Dismiss,
+            palette: pal,
+        };
+        let extras = ContextMenuExtras {
+            open_sub: model.open_sub,
+            appear: model.appear.value(),
+            on_pick_sub: Some(Arc::new(Msg::PickSub)),
+            on_hover: Some(Arc::new(Msg::Hover)),
+        };
+        Some(context_menu_view_ex(spec, extras))
+    }
+}
+
+impl Demo {
+    fn pick_root(m: &mut Model, i: usize, handle: &Handle<Msg>) {
+        let Some(item) = m.items.get(i) else { return };
+        if item.has_submenu() {
+            // Click en un item con submenú: alterná su flyout.
+            m.open_sub = if m.open_sub == Some(i) { None } else { Some(i) };
+            m.sub_active = edge_active(&item.children.clone(), false);
+            return;
+        }
+        // Toggle de los checkables por label (demo).
+        match item.label.as_str() {
+            "Ajustar texto" => {
+                let cur = item.is_checked();
+                Self::rebuild(m, |w| *w = !cur, |_| {});
+                m.log = format!("Ajustar texto → {}", if !cur { "sí" } else { "no" });
+            }
+            "Números de línea" => {
+                let cur = item.is_checked();
+                Self::rebuild(m, |_| {}, |l| *l = !cur);
+                m.log = format!("Números de línea → {}", if !cur { "sí" } else { "no" });
+            }
+            other => m.log = format!("Elegiste: {other}"),
+        }
+        m.open_sub = None;
+        Self::reappear(m, handle);
+    }
+
+    fn pick_sub(m: &mut Model, p: usize, c: usize) {
+        let label = m
+            .items
+            .get(p)
+            .and_then(|it| it.children.get(c))
+            .map(|it| it.label.clone())
+            .unwrap_or_default();
+        let parent = m.items.get(p).map(|it| it.label.clone()).unwrap_or_default();
+        m.log = format!("{parent} → {label}");
+        m.open_sub = None;
+        m.sub_active = usize::MAX;
+    }
+
+    /// Reconstruye los items preservando el estado de los dos checkables.
+    fn rebuild(m: &mut Model, mutate_wrap: impl FnOnce(&mut bool), mutate_ln: impl FnOnce(&mut bool)) {
+        let mut wrap = m
+            .items
+            .iter()
+            .find(|it| it.label == "Ajustar texto")
+            .map(|it| it.is_checked())
+            .unwrap_or(false);
+        let mut line_nums = m
+            .items
+            .iter()
+            .find(|it| it.label == "Números de línea")
+            .map(|it| it.is_checked())
+            .unwrap_or(false);
+        mutate_wrap(&mut wrap);
+        mutate_ln(&mut line_nums);
+        m.items = build_items(wrap, line_nums);
+    }
+
+    fn on_key_press(m: &mut Model, e: KeyEvent, handle: &Handle<Msg>) {
+        match e.key {
+            Key::Named(NamedKey::ArrowDown) => {
+                if let Some(p) = m.open_sub {
+                    let ch = m.items[p].children.clone();
+                    m.sub_active = step_active(&ch, m.sub_active, 1);
+                } else {
+                    m.active = step_active(&m.items, m.active, 1);
+                }
+            }
+            Key::Named(NamedKey::ArrowUp) => {
+                if let Some(p) = m.open_sub {
+                    let ch = m.items[p].children.clone();
+                    m.sub_active = step_active(&ch, m.sub_active, -1);
+                } else {
+                    m.active = step_active(&m.items, m.active, -1);
+                }
+            }
+            Key::Named(NamedKey::Home) => {
+                if let Some(p) = m.open_sub {
+                    m.sub_active = edge_active(&m.items[p].children.clone(), false);
+                } else {
+                    m.active = edge_active(&m.items, false);
+                }
+            }
+            Key::Named(NamedKey::End) => {
+                if let Some(p) = m.open_sub {
+                    m.sub_active = edge_active(&m.items[p].children.clone(), true);
+                } else {
+                    m.active = edge_active(&m.items, true);
+                }
+            }
+            Key::Named(NamedKey::ArrowRight) => {
+                if m.open_sub.is_none()
+                    && m.active != usize::MAX
+                    && m.items.get(m.active).map(|it| it.has_submenu()) == Some(true)
+                {
+                    m.open_sub = Some(m.active);
+                    m.sub_active = edge_active(&m.items[m.active].children.clone(), false);
+                }
+            }
+            Key::Named(NamedKey::ArrowLeft) => {
+                if m.open_sub.is_some() {
+                    m.open_sub = None;
+                    m.sub_active = usize::MAX;
+                }
+            }
+            Key::Named(NamedKey::Enter) => {
+                if let Some(p) = m.open_sub {
+                    if m.sub_active != usize::MAX {
+                        Self::pick_sub(m, p, m.sub_active);
+                    }
+                } else if m.active != usize::MAX {
+                    Self::pick_root(m, m.active, handle);
+                }
+            }
+            Key::Named(NamedKey::Escape) => {
+                if m.open_sub.is_some() {
+                    m.open_sub = None;
+                    m.sub_active = usize::MAX;
+                } else {
+                    m.active = usize::MAX;
+                }
+            }
+            Key::Named(NamedKey::Tab) => {
+                m.anchor_idx = (m.anchor_idx + 1) % m.anchors.len();
+                m.log = format!("Ancla #{} — mira de qué lado abre el submenú", m.anchor_idx + 1);
+            }
+            _ => {
+                // Type-ahead: primera letra del texto tecleado.
+                if let Some(ch) = e.text.as_deref().and_then(|t| t.chars().next()) {
+                    if ch.is_alphanumeric() {
+                        if let Some(p) = m.open_sub {
+                            let sub = type_ahead(&m.items[p].children.clone(), m.sub_active, ch);
+                            if sub != usize::MAX {
+                                m.sub_active = sub;
+                            }
+                        } else {
+                            let a = type_ahead(&m.items, m.active, ch);
+                            if a != usize::MAX {
+                                m.active = a;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+fn main() {
+    llimphi_ui::run::<Demo>();
+}
diff --git a/widgets/context-menu/src/lib.rs b/widgets/context-menu/src/lib.rs
index 1355c2a..282e236 100644
--- a/widgets/context-menu/src/lib.rs
+++ b/widgets/context-menu/src/lib.rs
@@ -3,17 +3,26 @@
 //! Distintivo y minimalista:
 //!
 //! ```text
-//!   ┃ B5                          ← header (uppercase tiny)
-//!   ┃ ✂  Cortar          Ctrl+X
-//!   ┃ ⧉  Copiar          Ctrl+C   ← gutter de íconos + barra accent (3px)
-//!   ┃ ⎘  Pegar           Ctrl+V
-//!   ┃ ─────────────────────
-//!   ┃ ◐  Tema             ▸       ← submenú (flyout a la derecha)
+//!   ┌─────────────────────────┐   ← panel redondeado + borde hairline + sombra
+//!   │  B5                     │   ← header (uppercase tiny)
+//!   │ ✂  Cortar        Ctrl+X │
+//!   │ ⧉  Copiar        Ctrl+C │   ← gutter (ícono o ✓) · fila-píldora
+//!   │ ⎘  Pegar         Ctrl+V │
+//!   │ ─────────────────────── │
+//!   │ ✓  Ajustar texto        │   ← item chequeable
+//!   │ ◐  Tema             ▸   │   ← submenú (flyout, flipea si no cabe)
+//!   └─────────────────────────┘
 //! ```
 //!
-//! Cada fila: barra accent vertical (firma) · gutter de ícono · label
-//! (centrado vertical) · atajo o chevron de submenú. Sin radios, sin
-//! sombras: color sólido + tipografía + la barra accent.
+//! Cada fila es una píldora: indicador accent (firma, sólo en la activa) ·
+//! gutter (ícono vectorial o ✓ de check) · label (centrado vertical) ·
+//! atajo o chevron de submenú. El panel se eleva con esquinas redondeadas,
+//! borde hairline y una sombra suave (look "webpage" moderno).
+//!
+//! **Teclado (helpers puros que el host cablea):** [`step_active`] (↑/↓,
+//! saltea sep/disabled), [`edge_active`] (Home/End), [`type_ahead`]
+//! (mnemónico por primera letra). El submenú se navega llamando
+//! [`step_active`] sobre `parent.children` (ver `examples/menu_demo.rs`).
 //!
 //! Se monta como `View<Msg>` que se devuelve desde
 //! [`llimphi_ui::App::view_overlay`]. Internamente arma:
@@ -109,6 +118,11 @@ pub struct ContextMenuItem {
     pub enabled: bool,
     pub separator: bool,
     pub destructive: bool,
+    /// Estado chequeable (Material `CheckedPopupMenuItem` / check nativo).
+    /// `None` = no chequeable (usa `icon`). `Some(true/false)` = chequeable:
+    /// `true` pinta ✓ en el gutter (accent), `false` deja el gutter vacío
+    /// pero reservado para que el label no salte al alternar.
+    pub checked: Option<bool>,
     /// Items del submenú. Vacío = acción simple.
     pub children: Vec<ContextMenuItem>,
 }
@@ -122,6 +136,7 @@ impl ContextMenuItem {
             enabled: true,
             separator: false,
             destructive: false,
+            checked: None,
             children: Vec::new(),
         }
     }
@@ -147,6 +162,17 @@ impl ContextMenuItem {
         self
     }
 
+    /// Marca el item como chequeable con el estado dado (✓ cuando `on`).
+    /// El gutter muestra el check en vez del ícono.
+    pub fn checked(mut self, on: bool) -> Self {
+        self.checked = Some(on);
+        self
+    }
+
+    pub fn is_checked(&self) -> bool {
+        self.checked == Some(true)
+    }
+
     /// Convierte el item en submenú con estos hijos.
     pub fn submenu(mut self, children: Vec<ContextMenuItem>) -> Self {
         self.children = children;
@@ -165,6 +191,7 @@ impl ContextMenuItem {
             enabled: false,
             separator: true,
             destructive: false,
+            checked: None,
             children: Vec::new(),
         }
     }
@@ -286,7 +313,7 @@ pub fn context_menu_view_ex<Msg: Clone + 'static>(
     // Flyout del submenú abierto (sólo si la app provee `on_pick_sub`).
     if let (Some(pidx), Some(on_pick_sub)) = (open_sub, on_pick_sub.as_ref()) {
         if let Some(parent) = items.get(pidx).filter(|it| it.has_submenu()) {
-            let sub_anchor = submenu_anchor(panel_x, panel_y, &header, &items, pidx);
+            let sub_anchor = submenu_anchor(panel_x, panel_y, viewport, &header, &items, pidx);
             let flyout = submenu_view(
                 sub_anchor,
                 viewport,
@@ -441,6 +468,16 @@ fn panel_container<Msg: Clone + 'static>(
     })
     .fill(palette.border)
     .radius(palette.radius as f64)
+    // Elevación: el menú flota sobre el contenido. Sombra suave hacia abajo
+    // (misma técnica del `llimphi-button`, más difusa por ser overlay). El
+    // fill opaco del borde tapa el solape, así sólo asoma el halo.
+    .shadow(llimphi_ui::Shadow {
+        color: Color::from_rgba8(0, 0, 0, 56),
+        blur: 18.0,
+        dx: 0.0,
+        dy: 7.0,
+        spread: -2.0,
+    })
     .children(vec![View::new(Style {
         flex_direction: FlexDirection::Column,
         flex_grow: 1.0,
@@ -461,10 +498,14 @@ fn panel_container<Msg: Clone + 'static>(
     .children(children)])
 }
 
-/// Ancla del flyout: a la derecha del panel padre, alineado al item.
+/// Ancla del flyout: por defecto a la derecha del panel padre alineado al
+/// item; si no cabe a la derecha del viewport, **flipea** y abre a la
+/// izquierda (comportamiento nativo). El pequeño solape (`PANEL_PAD`) hace
+/// que el flyout se lea continuo con el padre.
 fn submenu_anchor(
     panel_x: f32,
     panel_y: f32,
+    viewport: (f32, f32),
     header: &Option<String>,
     items: &[ContextMenuItem],
     parent_idx: usize,
@@ -474,8 +515,16 @@ fn submenu_anchor(
     for it in items.iter().take(parent_idx) {
         off += if it.separator { SEP_H } else { ITEM_H };
     }
-    // pequeño solape para que el flyout se lea continuo con el padre.
-    (panel_x + PANEL_W - PANEL_PAD, panel_y + off)
+    let margin = 4.0;
+    let right_x = panel_x + PANEL_W - PANEL_PAD;
+    // Si el flyout a la derecha se saldría del viewport, abrirlo a la
+    // izquierda del panel padre.
+    let x = if right_x + PANEL_W + margin > viewport.0 {
+        panel_x - PANEL_W + PANEL_PAD
+    } else {
+        right_x
+    };
+    (x, panel_y + off)
 }
 
 fn header_view<Msg: Clone + 'static>(text: String, palette: &ContextMenuPalette) -> View<Msg> {
@@ -523,11 +572,11 @@ fn item_view<Msg: Clone + 'static>(
     } else {
         (palette.fg_text, palette.fg_shortcut)
     };
-    // Ícono: accent cuando la fila está activa (cue del menú), si no
-    // apagado.
+    // Ícono: accent cuando la fila está activa o chequeada (cue del menú),
+    // si no apagado.
     let icon_fg = if !item.enabled {
         palette.fg_disabled
-    } else if is_active {
+    } else if item.is_checked() || is_active {
         palette.accent
     } else {
         palette.fg_icon
@@ -549,7 +598,24 @@ fn item_view<Msg: Clone + 'static>(
         indicator
     };
 
-    // Gutter de ícono — auto height para que el row lo centre vertical.
+    // Gutter — para un item chequeable pinta ✓ (o vacío si está off); si no,
+    // el glifo declarado se resuelve a un ícono VECTORIAL (determinista en
+    // toda máquina); si el catálogo no lo conoce, cae a texto.
+    let glifo = match item.checked {
+        Some(true) => "\u{2713}".to_string(), // ✓
+        Some(false) => String::new(),
+        None => item.icon.clone().unwrap_or_default(),
+    };
+    let icon_inner: View<Msg> = match llimphi_icons::Icon::from_glyph(&glifo) {
+        Some(icon) => View::new(Style {
+            size: Size { width: length(15.0_f32), height: length(15.0_f32) },
+            flex_shrink: 0.0,
+            ..Default::default()
+        })
+        .children(vec![llimphi_icons::icon_view(icon, icon_fg, 1.6)]),
+        None => View::new(Style { size: Size { width: auto(), height: auto() }, ..Default::default() })
+            .text_aligned(glifo, 13.0, icon_fg, Alignment::Center),
+    };
     let icon_cell = View::new(Style {
         size: Size {
             width: length(ICON_W),
@@ -560,7 +626,7 @@ fn item_view<Msg: Clone + 'static>(
         justify_content: Some(JustifyContent::Center),
         ..Default::default()
     })
-    .text_aligned(item.icon.clone().unwrap_or_default(), 13.0, icon_fg, Alignment::Center);
+    .children(vec![icon_inner]);
 
     // Label — auto height (lo centra el align_items Center del row).
     let label = View::new(Style {
@@ -717,6 +783,42 @@ pub fn step_active(items: &[ContextMenuItem], current: usize, direction: i32) ->
     usize::MAX
 }
 
+/// Home/End: primer (`to_end=false`) o último (`to_end=true`) item
+/// elegible (saltea separators y disabled). `usize::MAX` si no hay ninguno.
+pub fn edge_active(items: &[ContextMenuItem], to_end: bool) -> usize {
+    let pickable = |it: &ContextMenuItem| !it.separator && it.enabled;
+    if to_end {
+        items.iter().rposition(pickable)
+    } else {
+        items.iter().position(pickable)
+    }
+    .unwrap_or(usize::MAX)
+}
+
+/// Type-ahead / mnemónico: siguiente item elegible cuyo label empieza por
+/// `ch` (case-insensitive), buscando desde `current + 1` y ciclando (así
+/// teclar la misma letra rota entre coincidencias). `usize::MAX` si ninguno.
+pub fn type_ahead(items: &[ContextMenuItem], current: usize, ch: char) -> usize {
+    let n = items.len();
+    if n == 0 {
+        return usize::MAX;
+    }
+    let needle = ch.to_ascii_lowercase();
+    let start = if current == usize::MAX { 0 } else { current };
+    for k in 1..=n {
+        let i = (start + k) % n;
+        let it = &items[i];
+        if it.separator || !it.enabled {
+            continue;
+        }
+        let first = it.label.chars().next().map(|c| c.to_ascii_lowercase());
+        if first == Some(needle) {
+            return i;
+        }
+    }
+    usize::MAX
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;
@@ -756,6 +858,83 @@ mod tests {
         assert_eq!(item.icon.as_deref(), Some("◐"));
     }
 
+    #[test]
+    fn edge_active_home_end_saltea_bordes() {
+        let items = vec![
+            ContextMenuItem::separator(),
+            it("A").disabled(),
+            it("B"),
+            it("C"),
+            it("D").disabled(),
+            ContextMenuItem::separator(),
+        ];
+        // Home = primer elegible (B, idx 2), no el separator ni el disabled.
+        assert_eq!(edge_active(&items, false), 2);
+        // End = último elegible (C, idx 3), no el disabled ni el separator.
+        assert_eq!(edge_active(&items, true), 3);
+    }
+
+    #[test]
+    fn edge_active_sin_elegibles_es_max() {
+        let items = vec![ContextMenuItem::separator(), it("X").disabled()];
+        assert_eq!(edge_active(&items, false), usize::MAX);
+        assert_eq!(edge_active(&items, true), usize::MAX);
+    }
+
+    #[test]
+    fn type_ahead_salta_por_primera_letra_y_cicla() {
+        let items = vec![it("Abrir"), it("Buscar"), it("Borrar"), it("Cerrar")];
+        // Desde ninguno, 'b' → primer "B" (Buscar, idx 1).
+        assert_eq!(type_ahead(&items, usize::MAX, 'b'), 1);
+        // Estando en Buscar, otra 'b' → siguiente "B" (Borrar, idx 2).
+        assert_eq!(type_ahead(&items, 1, 'b'), 2);
+        // Estando en Borrar, otra 'b' → cicla de vuelta a Buscar.
+        assert_eq!(type_ahead(&items, 2, 'b'), 1);
+        // Case-insensitive.
+        assert_eq!(type_ahead(&items, usize::MAX, 'C'), 3);
+        // Sin coincidencia.
+        assert_eq!(type_ahead(&items, usize::MAX, 'z'), usize::MAX);
+    }
+
+    #[test]
+    fn type_ahead_saltea_disabled_y_separators() {
+        let items = vec![
+            it("Alfa").disabled(),
+            ContextMenuItem::separator(),
+            it("Ajuste"),
+        ];
+        assert_eq!(type_ahead(&items, usize::MAX, 'a'), 2);
+    }
+
+    #[test]
+    fn checked_builder_y_gutter() {
+        let on = it("Ajustar texto").checked(true);
+        let off = it("Ajustar texto").checked(false);
+        assert_eq!(on.checked, Some(true));
+        assert!(on.is_checked());
+        assert_eq!(off.checked, Some(false));
+        assert!(!off.is_checked());
+        // Un item normal no es chequeable.
+        assert_eq!(it("X").checked, None);
+    }
+
+    #[test]
+    fn submenu_flipea_a_la_izquierda_sin_espacio() {
+        let items = vec![it("Tema").submenu(vec![it("Oscuro")])];
+        // Panel pegado al borde derecho: no cabe a la derecha → abre a la izq.
+        let vp = (400.0, 600.0);
+        let panel_x = vp.0 - PANEL_W - 4.0; // clampeado al borde derecho
+        let (x_flip, _) = submenu_anchor(panel_x, 20.0, vp, &None, &items, 0);
+        assert!(
+            x_flip < panel_x,
+            "sin espacio a la derecha, el flyout debe abrir a la izquierda (x_flip={x_flip}, panel_x={panel_x})"
+        );
+        // Con panel a la izquierda y viewport ancho: abre a la derecha.
+        let vp_wide = (2000.0, 600.0);
+        let (x_right, _) = submenu_anchor(20.0, 20.0, vp_wide, &None, &items, 0);
+        assert!(x_right > 20.0, "con espacio, abre a la derecha");
+    }
+
     #[test]
     fn extras_default_es_menu_clasico() {
         let extras: ContextMenuExtras<u8> = ContextMenuExtras::default();
diff --git a/widgets/detail-table/Cargo.toml b/widgets/detail-table/Cargo.toml
index ea384e8..599e5aa 100644
--- a/widgets/detail-table/Cargo.toml
+++ b/widgets/detail-table/Cargo.toml
@@ -5,9 +5,10 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-detail-table — grilla read-only con columnas de ancho flex/fijo y encabezados clicables que ordenan (▲/▼). La vista 'detalle' de un file manager: una fila por nodo, selección resaltada, click de fila y click de encabezado emiten Msg. Stateless; el caller pasa filas ya ordenadas/visibles."
 
+repository.workspace = true
 [dependencies]
+llimphi-widget-list = { workspace = true }
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/detail-table/LEEME.md b/widgets/detail-table/LEEME.md
new file mode 100644
index 0000000..e62e8a2
--- /dev/null
+++ b/widgets/detail-table/LEEME.md
@@ -0,0 +1,40 @@
+# llimphi-widget-detail-table
+
+*Read this in English: [README.md](README.md).*
+
+La vista **detalle** de un file manager.
+
+Una grilla read-only de columnas (nombre · tamaño · fecha · tipo…) con
+**encabezados clicables que ordenan**: click en una columna emite
+`on_sort(col)`; la columna activa muestra una flecha `▲`/`▼`. Cada fila
+es clicable (selección) y opcionalmente lleva un tinte de acento (para
+labels/colores, Fase 4.5).
+
+Como el resto de los widgets Llimphi es **render-only y stateless**: el
+orden, el filtro y la selección viven en el `Model` del caller (típicamente
+un `nahual_source_core::Navigator`); el widget recibe las filas **ya
+ordenadas y ya filtradas** (igual que `widget-list` recibe sólo la ventana
+visible) y sólo pinta + avisa.
+
+Las columnas declaran su ancho como `ColWidth::Flex` (reparte el sobrante
+proporcionalmente — para la columna nombre) o `ColWidth::Fixed` (px
+constantes — para tamaño/fecha/tipo). Encabezado y filas usan el MISMO
+reparto, así que las columnas quedan alineadas.
+```ignore
+detail_table_view(
+    DetailSpec {
+        columns: &[Column::flex("Nombre", 1.0), Column::fixed("Tamaño", 90.0).right(),
+                   Column::fixed("Modificado", 150.0), Column::fixed("Tipo", 80.0)],
+        rows,                       // ya ordenadas/filtradas por el caller
+        sort: Some((1, SortDir::Desc)),
+        row_height: 22.0,
+        caption: Some("42 entradas".into()),
+        palette: DetailPalette::from_theme(&theme),
+    },
+    Msg::SortBy,                    // Fn(usize) -> Msg
+)
+```
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/detail-table/README.md b/widgets/detail-table/README.md
new file mode 100644
index 0000000..c7a09c6
--- /dev/null
+++ b/widgets/detail-table/README.md
@@ -0,0 +1,38 @@
+# llimphi-widget-detail-table
+
+The **details** view of a file manager.
+
+A read-only grid of columns (name · size · date · type…) with **clickable
+headers that sort**: clicking a column emits `on_sort(col)`; the active column
+shows a `▲`/`▼` arrow. Every row is clickable (selection) and can optionally
+carry an accent tint (for labels and colours).
+
+Like the rest of the Llimphi widgets it is **render-only and stateless**: sort,
+filter and selection live in the caller's `Model` (typically a
+`nahual_source_core::Navigator`); the widget receives the rows **already sorted
+and already filtered** (just as `widget-list` receives only the visible window)
+and merely paints and notifies.
+
+Columns declare their width as `ColWidth::Flex` (distributes the leftover
+proportionally — for the name column) or `ColWidth::Fixed` (constant px — for
+size/date/type). Header and rows use the SAME distribution, so the columns stay
+aligned.
+
+```ignore
+detail_table_view(
+    DetailSpec {
+        columns: &[Column::flex("Name", 1.0), Column::fixed("Size", 90.0).right(),
+                   Column::fixed("Modified", 150.0), Column::fixed("Type", 80.0)],
+        rows,                       // already sorted/filtered by the caller
+        sort: Some((1, SortDir::Desc)),
+        row_height: 22.0,
+        caption: Some("42 entries".into()),
+        palette: DetailPalette::from_theme(&theme),
+    },
+    Msg::SortBy,                    // Fn(usize) -> Msg
+)
+```
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/detail-table/src/lib.rs b/widgets/detail-table/src/lib.rs
index b523469..904fb3d 100644
--- a/widgets/detail-table/src/lib.rs
+++ b/widgets/detail-table/src/lib.rs
@@ -101,6 +101,11 @@ pub struct DetailRow<Msg> {
     pub selected: bool,
     /// Tinte de fila opcional (labels/colores, Fase 4.5). `None` = sin tinte.
     pub accent: Option<Color>,
+    /// Ícono vectorial líder opcional para la columna nombre (columna 0). Un
+    /// `View<Msg>` ya construido por el caller (p.ej. `spec_view`); el widget lo
+    /// coloca antes del texto de esa celda y deja el sitio. `None` = sin ícono
+    /// (comportamiento previo intacto). Aditivo.
+    pub icon: Option<View<Msg>>,
     pub on_click: Msg,
 }
 
@@ -108,6 +113,10 @@ pub struct DetailRow<Msg> {
 #[derive(Debug, Clone, Copy)]
 pub struct DetailPalette {
     pub bg_panel: Color,
+    /// Fondo de las filas **impares** (zebra). Por defecto igual a `bg_panel`
+    /// → zebra invisible (sin cambio). El caller la enciende con un tinte:
+    /// `let mut p = DetailPalette::from_theme(t); p.bg_row_alt = t.bg_panel_alt;`
+    pub bg_row_alt: Color,
     pub bg_header: Color,
     pub bg_selected: Color,
     pub bg_hover: Color,
@@ -128,6 +137,9 @@ impl DetailPalette {
     pub fn from_theme(t: &llimphi_theme::Theme) -> Self {
         Self {
             bg_panel: t.bg_panel,
+            // Zebra apagada por defecto (= bg_panel) para no cambiar el look de
+            // los 36 callers; se enciende poniendo un tinte en el campo.
+            bg_row_alt: t.bg_panel,
             bg_header: t.bg_panel_alt,
             bg_selected: t.bg_selected,
             bg_hover: t.bg_row_hover,
@@ -156,6 +168,39 @@ pub struct DetailSpec<'a, Msg> {
 /// Compone la grilla detalle. `on_sort(col)` se emite al clickear un
 /// encabezado.
 pub fn detail_table_view<Msg, FSort>(spec: DetailSpec<Msg>, on_sort: FSort) -> View<Msg>
+where
+    Msg: Clone + 'static,
+    FSort: Fn(usize) -> Msg + Clone + 'static,
+{
+    detail_table_view_con(spec, on_sort, None)
+}
+
+/// [`detail_table_view`] con **arrastre y soltado** por fila (mismo `RowDnd`
+/// que la lista y la grilla). Con `dnd = None` es la tabla de siempre.
+pub fn detail_table_view_dnd<Msg, FSort>(
+    spec: DetailSpec<Msg>,
+    on_sort: FSort,
+    dnd: Option<llimphi_widget_list::RowDnd<Msg>>,
+) -> View<Msg>
+where
+    Msg: Clone + Send + Sync + 'static,
+    FSort: Fn(usize) -> Msg + Clone + 'static,
+{
+    match dnd {
+        Some(d) => detail_table_view_con(
+            spec,
+            on_sort,
+            Some(&move |v, i, click| llimphi_widget_list::con_dnd(v, i, click, &d)),
+        ),
+        None => detail_table_view_con(spec, on_sort, None),
+    }
+}
+
+fn detail_table_view_con<Msg, FSort>(
+    spec: DetailSpec<Msg>,
+    on_sort: FSort,
+    deco: Option<llimphi_widget_list::FilaDeco<'_, Msg>>,
+) -> View<Msg>
 where
     Msg: Clone + 'static,
     FSort: Fn(usize) -> Msg + Clone + 'static,
@@ -188,7 +233,10 @@ where
                 _ => "",
             };
             let label = format!("{}{flecha}", col.title);
-            let fg = if activa { palette.fg_header } else { palette.fg_header };
+            // La columna ordenada resalta con el fg pleno; el resto queda
+            // apagado. (Antes ambas ramas eran `fg_header` — un `if` no-op
+            // que fingía destacar la columna activa y no lo hacía.)
+            let fg = if activa { palette.fg_text } else { palette.fg_header };
             col_cell(
                 col.width,
                 View::new(full())
@@ -206,13 +254,24 @@ where
     );
 
     // Filas de datos.
-    for row in rows {
-        let DetailRow { cells, selected, accent, on_click } = row;
-        let bg = if selected { palette.bg_selected } else { palette.bg_panel };
+    for (ri, row) in rows.into_iter().enumerate() {
+        let DetailRow { cells, selected, accent, icon, on_click } = row;
+        // Zebra: filas impares con bg_row_alt (= bg_panel salvo que el caller
+        // lo tiña). La selección gana sobre la zebra.
+        let bg = if selected {
+            palette.bg_selected
+        } else if ri % 2 == 1 {
+            palette.bg_row_alt
+        } else {
+            palette.bg_panel
+        };
+        // Ícono líder de la columna nombre (se consume una sola vez, en i==0).
+        let mut icon = icon;
+        let icon_px = (row_height * 0.72).clamp(13.0, 18.0);
         let cell_views: Vec<View<Msg>> = columns
             .iter()
             .enumerate()
-            .map(|(i, col)| {
+            .map(move |(i, col)| {
                 let text = cells.get(i).cloned().unwrap_or_default();
                 // La primera columna (nombre) lleva el acento si hay; el resto
                 // va en fg_muted salvo el nombre que va en fg_text.
@@ -221,21 +280,41 @@ where
                 } else {
                     palette.fg_muted
                 };
-                col_cell(
-                    col.width,
-                    View::new(full())
-                        .text_aligned(text, 11.5, fg, col.align)
-                        .ellipsis(1),
-                )
+                let texto = View::new(full())
+                    .text_aligned(text, 11.5, fg, col.align)
+                    .ellipsis(1);
+                // Columna nombre con ícono: [ícono] etiqueta, en una fila.
+                if i == 0 {
+                    if let Some(ic) = icon.take() {
+                        let caja = View::new(Style {
+                            size: Size { width: length(icon_px), height: length(icon_px) },
+                            flex_shrink: 0.0,
+                            ..Default::default()
+                        })
+                        .children(vec![ic]);
+                        let fila = View::new(Style {
+                            flex_direction: FlexDirection::Row,
+                            align_items: Some(AlignItems::Center),
+                            gap: Size { width: length(6.0_f32), height: length(0.0_f32) },
+                            size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+                            ..Default::default()
+                        })
+                        .children(vec![caja, texto]);
+                        return col_cell(col.width, fila);
+                    }
+                }
+                col_cell(col.width, texto)
             })
             .collect();
-        children.push(
-            row_box(row_height)
-                .fill(bg)
-                .hover_fill(palette.bg_hover)
-                .on_click(on_click)
-                .children(cell_views),
-        );
+        let fila = row_box(row_height)
+            .fill(bg)
+            .hover_fill(palette.bg_hover)
+            .on_click(on_click.clone())
+            .children(cell_views);
+        children.push(match deco {
+            Some(f) => f(fila, ri, on_click),
+            None => fila,
+        });
     }
 
     View::new(Style {
@@ -311,3 +390,69 @@ fn pad_lr(px: f32) -> Rect<llimphi_ui::llimphi_layout::taffy::LengthPercentage>
         bottom: length(0.0_f32),
     }
 }
+
+// ─────────────────────────────────────────────────────────────────────────
+// Navegación por teclado + resize de columnas (helpers puros, lado host)
+// ─────────────────────────────────────────────────────────────────────────
+
+/// Mueve la fila seleccionada con ↑/↓: índice siguiente **clampeado** a
+/// `[0, len-1]` (una DataTable no envuelve). `current == usize::MAX` (nada
+/// seleccionado) arranca por el extremo según la dirección. El host lo cablea
+/// en `update` y dispatcha su `Msg::Select(nuevo)`.
+pub fn step_row(len: usize, current: usize, direction: i32) -> usize {
+    if len == 0 {
+        return 0;
+    }
+    let last = len - 1;
+    if current == usize::MAX {
+        return if direction >= 0 { 0 } else { last };
+    }
+    (current as i64 + direction as i64).clamp(0, last as i64) as usize
+}
+
+/// Extremo para Home/End (PageUp/PageDown grandes): `0` o `len-1`.
+pub fn edge_row(len: usize, to_end: bool) -> usize {
+    if len == 0 {
+        0
+    } else if to_end {
+        len - 1
+    } else {
+        0
+    }
+}
+
+/// Redimensiona la columna `i` sumándole `delta` px a su ancho, con piso
+/// `min`. Devuelve el ancho nuevo; el host lo guarda en su `Vec<ColWidth>`
+/// (columnas `Fixed`). Pensado para cablearse a un drag sobre el borde
+/// derecho del encabezado. Pura y testeable.
+pub fn resize_col(current_w: f32, delta: f32, min: f32) -> f32 {
+    (current_w + delta).max(min)
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn step_row_clampa_sin_envolver() {
+        assert_eq!(step_row(5, 0, 1), 1);
+        assert_eq!(step_row(5, 4, 1), 4); // tope
+        assert_eq!(step_row(5, 0, -1), 0); // piso
+        assert_eq!(step_row(5, usize::MAX, 1), 0);
+        assert_eq!(step_row(5, usize::MAX, -1), 4);
+        assert_eq!(step_row(0, 0, 1), 0);
+    }
+
+    #[test]
+    fn edge_row_home_end() {
+        assert_eq!(edge_row(5, false), 0);
+        assert_eq!(edge_row(5, true), 4);
+        assert_eq!(edge_row(0, true), 0);
+    }
+
+    #[test]
+    fn resize_col_respeta_piso() {
+        assert_eq!(resize_col(120.0, 30.0, 40.0), 150.0);
+        assert_eq!(resize_col(50.0, -40.0, 40.0), 40.0); // no baja del min
+    }
+}
diff --git a/widgets/dock-rail/Cargo.toml b/widgets/dock-rail/Cargo.toml
index b10dca1..76f18a9 100644
--- a/widgets/dock-rail/Cargo.toml
+++ b/widgets/dock-rail/Cargo.toml
@@ -5,9 +5,10 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-dock-rail — rail vertical de dientes (pestañas con barra de acento + icono) para sidebars acoplables; clic activa, arrastre mueve entre rails."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
+llimphi-widget-badge = { workspace = true }
diff --git a/widgets/dock-rail/LEEME.md b/widgets/dock-rail/LEEME.md
new file mode 100644
index 0000000..c0b370e
--- /dev/null
+++ b/widgets/dock-rail/LEEME.md
@@ -0,0 +1,40 @@
+# llimphi-widget-dock-rail
+
+*Read this in English: [README.md](README.md).*
+
+Rail vertical de **dientes** para sidebars acoplables.
+
+Cada diente es una pestaña vertical: una **barra de acento** de 3px
+pegada al borde interno (encendida cuando el item está activo) + un
+**icono** centrado. Los dientes apilan en una columna redondeada que
+se pinta como una franja flotante al borde del centro — el patrón del
+dock de cosmos, ahora reutilizable.
+
+Render-only y agnóstico del `Msg`: el item se identifica por un `u64`
+opaco. El clic (en el *press*, para no pelear con el arrastre) activa
+vía `on_activate(id)`; el diente es **arrastrable** con su `id` como
+payload, y el rail entero es **drop target** (`on_drop(payload)`) —
+así una app puede mover un diente de un sidebar a otro soltándolo
+sobre el rail opuesto. El icono lo dibuja el caller (`make_icon`), que
+recibe el color ya resuelto según el estado activo/inactivo.
+
+Opcionalmente un diente lleva un **distintivo** ("bubble number") en su
+esquina externa: `dock_rail_view_badged` toma `make_badge(id)` que
+devuelve un `DockBadge` (chip con número o punto de estado, reusando
+`llimphi_widget_badge`). Como se deriva del `id`, basta cambiar el modelo
+y re-pintar para que el contador cambie en vivo.
+```ignore
+let items = [DockRailItem { id: 0, active: true }, DockRailItem { id: 1, active: false }];
+dock_rail_view(
+    &items,
+    44.0,
+    &DockRailPalette::from_theme(&theme),
+    |id, size, color| my_icon_view(id, size, color),
+    |id| Msg::DockActivate(side, id),
+    move |payload| Some(Msg::DockDrop(side, payload)),
+)
+```
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/dock-rail/README.md b/widgets/dock-rail/README.md
new file mode 100644
index 0000000..7cf0d9d
--- /dev/null
+++ b/widgets/dock-rail/README.md
@@ -0,0 +1,38 @@
+# llimphi-widget-dock-rail
+
+Vertical rail of **teeth** (*dientes*) for dockable sidebars.
+
+Each tooth is a vertical tab: a 3px **accent bar** hugging the inner edge (lit
+when the item is active) plus a centred **icon**. The teeth stack into a rounded
+column painted as a strip floating at the edge of the centre — the cosmos dock
+pattern, now reusable.
+
+Render-only and `Msg`-agnostic: an item is identified by an opaque `u64`. The
+click (on *press*, so it does not fight the drag) activates through
+`on_activate(id)`; a tooth is **draggable** with its `id` as payload, and the
+whole rail is a **drop target** (`on_drop(payload)`) — so an app can move a
+tooth from one sidebar to another by dropping it on the opposite rail. The icon
+is drawn by the caller (`make_icon`), which receives the colour already resolved
+for the active/inactive state.
+
+Optionally a tooth carries a **badge** ("bubble number") on its outer corner:
+`dock_rail_view_badged` takes `make_badge(id)` returning a `DockBadge` (a chip
+with a number, or a status dot, reusing `llimphi_widget_badge`). Since it is
+derived from the `id`, changing the model and repainting is enough for the
+counter to change live.
+
+```ignore
+let items = [DockRailItem { id: 0, active: true }, DockRailItem { id: 1, active: false }];
+dock_rail_view(
+    &items,
+    44.0,
+    &DockRailPalette::from_theme(&theme),
+    |id, size, color| my_icon_view(id, size, color),
+    |id| Msg::DockActivate(side, id),
+    move |payload| Some(Msg::DockDrop(side, payload)),
+)
+```
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/dock-rail/src/lib.rs b/widgets/dock-rail/src/lib.rs
index d0907e4..4b31226 100644
--- a/widgets/dock-rail/src/lib.rs
+++ b/widgets/dock-rail/src/lib.rs
@@ -15,6 +15,12 @@
 //! sobre el rail opuesto. El icono lo dibuja el caller (`make_icon`), que
 //! recibe el color ya resuelto según el estado activo/inactivo.
 //!
+//! Opcionalmente un diente lleva un **distintivo** ("bubble number") en su
+//! esquina externa: [`dock_rail_view_badged`] toma `make_badge(id)` que
+//! devuelve un [`DockBadge`] (chip con número o punto de estado, reusando
+//! [`llimphi_widget_badge`]). Como se deriva del `id`, basta cambiar el modelo
+//! y re-pintar para que el contador cambie en vivo.
+//!
 //! ```ignore
 //! let items = [DockRailItem { id: 0, active: true }, DockRailItem { id: 1, active: false }];
 //! dock_rail_view(
@@ -29,14 +35,19 @@
 
 #![forbid(unsafe_code)]
 
+use std::sync::Arc;
+
 use llimphi_ui::llimphi_layout::taffy::{
-    prelude::{auto, length, percent, FlexDirection, Size, Style},
-    AlignItems, JustifyContent,
+    prelude::{auto, length, percent, FlexDirection, Position, Size, Style},
+    AlignItems, JustifyContent, Rect,
 };
 use llimphi_ui::llimphi_raster::peniko::Color;
-use llimphi_ui::{DragPhase, View};
+use llimphi_ui::{DragPhase, PaintRect, View};
 use llimphi_theme::Theme;
 
+pub use llimphi_widget_badge::BadgeKind;
+use llimphi_widget_badge::{count_badge_view, dot_badge_view};
+
 /// Alto de cada diente (px).
 const TOOTH_H: f32 = 42.0;
 /// Alto de la barra de acento (px) — un poco menor que el diente para
@@ -58,6 +69,14 @@ pub struct DockRailPalette {
     pub accent: Color,
     /// Color del icono de un diente inactivo.
     pub icon_inactive: Color,
+    /// Sigma del **cristal esmerilado** del diente activo (px, `0.0` = sin
+    /// glass, el default). Cuando es `> 0`, la franja del rail deja de pintar
+    /// su fondo (se vuelve **transparente**, así asoma lo que haya detrás) y
+    /// **sólo la pestaña activa** se pinta como vidrio: `backdrop_blur(glass)`
+    /// + un tinte translúcido de `bg_active`. Es un atributo del *look* —lo
+    /// enciende el theme (p. ej. «mirada» con `glass_blur > 0`)— no un toggle
+    /// del widget; los dientes inactivos quedan icono sobre el vacío.
+    pub glass: f32,
 }
 
 impl DockRailPalette {
@@ -68,6 +87,9 @@ impl DockRailPalette {
             bg_hover: t.bg_row_hover,
             accent: t.accent,
             icon_inactive: t.fg_muted,
+            // Sin glass por defecto: el look opaco de siempre. El host que corre
+            // bajo un theme con cristal (mirada `glass_blur > 0`) lo sube.
+            glass: 0.0,
         }
     }
 }
@@ -79,6 +101,43 @@ pub struct DockRailItem {
     pub active: bool,
 }
 
+/// Distintivo ("bubble number") que se superpone en la esquina externa de un
+/// diente — la esquina hacia la que el diente *sobresale*. Reusa el widget
+/// [`llimphi_widget_badge`]: un chip con número (`Count`) o un punto de estado
+/// (`Dot`). Es `Copy` para encajar en cierres `Fn(u64) -> Option<DockBadge>`
+/// sin clonar; usa [`dock_rail_view_badged`] para pintarlos.
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum DockBadge {
+    /// Chip ovalado con un número adentro (`>= 100` se muestra como "99+").
+    Count(u32, BadgeKind),
+    /// Punto sólido sin número — "hay algo" / estado de conexión.
+    Dot(BadgeKind),
+}
+
+impl DockBadge {
+    fn view<Msg: Clone + 'static>(self) -> View<Msg> {
+        match self {
+            DockBadge::Count(n, kind) => count_badge_view(n, kind),
+            DockBadge::Dot(kind) => dot_badge_view(kind),
+        }
+    }
+}
+
+/// A qué borde se pega el rail — decide hacia dónde **sobresalen** los dientes.
+/// `InnerLeft` (default) es para un sidebar a la **izquierda**: la barra de acento
+/// queda a la izquierda y el diente abre hacia la derecha (hacia el centro).
+/// `InnerRight` espeja todo para un sidebar a la **derecha**: barra a la derecha,
+/// el diente abre hacia la izquierda (también hacia el centro). El uso canónico de
+/// cosmos usa el default; las apps con dientes a ambos lados pasan el lado.
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
+pub enum DockRailSide {
+    /// Sidebar izquierdo: dientes sobresalen hacia la derecha.
+    #[default]
+    InnerLeft,
+    /// Sidebar derecho: dientes sobresalen hacia la izquierda (espejado).
+    InnerRight,
+}
+
 /// Construye el rail de dientes.
 ///
 /// - `items`: en el orden en que se quieren mostrar (el widget no
@@ -103,8 +162,324 @@ where
     FAct: Fn(u64) -> Msg,
     FDrop: Fn(u64) -> Option<Msg> + Send + Sync + 'static,
 {
+    dock_rail_view_side(
+        items,
+        width,
+        DockRailSide::InnerLeft,
+        palette,
+        make_icon,
+        on_activate,
+        on_drop,
+    )
+}
+
+/// Como [`dock_rail_view`] pero eligiendo el [`DockRailSide`]: en `InnerRight` el
+/// diente se **espeja** (barra de acento a la derecha, esquinas redondeadas a la
+/// izquierda) para un sidebar a la derecha. `dock_rail_view` es el atajo a
+/// `InnerLeft`.
+pub fn dock_rail_view_side<Msg, FIcon, FAct, FDrop>(
+    items: &[DockRailItem],
+    width: f32,
+    side: DockRailSide,
+    palette: &DockRailPalette,
+    make_icon: FIcon,
+    on_activate: FAct,
+    on_drop: FDrop,
+) -> View<Msg>
+where
+    Msg: Clone + Send + Sync + 'static,
+    FIcon: Fn(u64, f32, Color) -> View<Msg>,
+    FAct: Fn(u64) -> Msg,
+    FDrop: Fn(u64) -> Option<Msg> + Send + Sync + 'static,
+{
+    dock_rail_view_core(
+        items,
+        width,
+        side,
+        palette,
+        make_icon,
+        |_| None,
+        |_| false,
+        |_| None,
+        on_activate,
+        on_drop,
+        None,
+    )
+}
+
+/// Como [`dock_rail_view_side`] pero con **distintivos** ("bubble numbers"):
+/// `make_badge(id)` devuelve un [`DockBadge`] opcional que se superpone en la
+/// esquina externa del diente (la esquina hacia la que sobresale). El badge no
+/// captura clics — clickear sobre él sigue activando el diente. Igual que
+/// `make_icon`, el badge se deriva del `id`, así que basta variar el modelo y
+/// re-pintar para que el contador cambie en vivo.
+#[allow(clippy::too_many_arguments)]
+pub fn dock_rail_view_badged<Msg, FIcon, FBadge, FAct, FDrop>(
+    items: &[DockRailItem],
+    width: f32,
+    side: DockRailSide,
+    palette: &DockRailPalette,
+    make_icon: FIcon,
+    make_badge: FBadge,
+    on_activate: FAct,
+    on_drop: FDrop,
+) -> View<Msg>
+where
+    Msg: Clone + Send + Sync + 'static,
+    FIcon: Fn(u64, f32, Color) -> View<Msg>,
+    FBadge: Fn(u64) -> Option<DockBadge>,
+    FAct: Fn(u64) -> Msg,
+    FDrop: Fn(u64) -> Option<Msg> + Send + Sync + 'static,
+{
+    dock_rail_view_core(
+        items,
+        width,
+        side,
+        palette,
+        make_icon,
+        make_badge,
+        |_| false,
+        |_| None,
+        on_activate,
+        on_drop,
+        None,
+    )
+}
+
+/// Como [`dock_rail_view_side`] pero con **separadores de grupo**: `sep_before(id)`
+/// devuelve `true` para el primer diente de un grupo nuevo, y el rail pinta una
+/// línea tenue *encima* suyo (nunca antes del primero) para agrupar sin resaltar.
+#[allow(clippy::too_many_arguments)]
+pub fn dock_rail_view_grouped<Msg, FIcon, FSep, FAct, FDrop>(
+    items: &[DockRailItem],
+    width: f32,
+    side: DockRailSide,
+    palette: &DockRailPalette,
+    make_icon: FIcon,
+    sep_before: FSep,
+    on_activate: FAct,
+    on_drop: FDrop,
+) -> View<Msg>
+where
+    Msg: Clone + Send + Sync + 'static,
+    FIcon: Fn(u64, f32, Color) -> View<Msg>,
+    FSep: Fn(u64) -> bool,
+    FAct: Fn(u64) -> Msg,
+    FDrop: Fn(u64) -> Option<Msg> + Send + Sync + 'static,
+{
+    dock_rail_view_core(
+        items,
+        width,
+        side,
+        palette,
+        make_icon,
+        |_| None,
+        sep_before,
+        |_| None,
+        on_activate,
+        on_drop,
+        None,
+    )
+}
+
+/// Como [`dock_rail_view_grouped`] pero además con **grupos colapsables**: un
+/// diente puede ser el **cabezal** de un grupo que se pliega/despliega. `chevron(id)`
+/// devuelve `Some(expanded)` para un diente-cabezal —`true` si su grupo está
+/// desplegado (sus miembros a la vista), `false` si está plegado (escondidos)— y
+/// `None` para un diente normal. El rail le dibuja una **flechita** (chevron) en la
+/// esquina interna-inferior: ▾ desplegado, ▸ plegado. La flechita es sólo indicador
+/// —no captura clics—; **esconder los miembros y alternar el estado los decide el
+/// host**: al activar el cabezal alterna su `collapsed` y omite de `items` los dientes
+/// de un grupo plegado (conservando el `id` de cada diente visible). Así el widget
+/// aporta el «desplegable» sin dueño de estado nuevo.
+#[allow(clippy::too_many_arguments)]
+pub fn dock_rail_view_collapsible<Msg, FIcon, FSep, FChev, FAct, FDrop>(
+    items: &[DockRailItem],
+    width: f32,
+    side: DockRailSide,
+    palette: &DockRailPalette,
+    make_icon: FIcon,
+    sep_before: FSep,
+    chevron: FChev,
+    on_activate: FAct,
+    on_drop: FDrop,
+) -> View<Msg>
+where
+    Msg: Clone + Send + Sync + 'static,
+    FIcon: Fn(u64, f32, Color) -> View<Msg>,
+    FSep: Fn(u64) -> bool,
+    FChev: Fn(u64) -> Option<bool>,
+    FAct: Fn(u64) -> Msg,
+    FDrop: Fn(u64) -> Option<Msg> + Send + Sync + 'static,
+{
+    dock_rail_view_core(
+        items,
+        width,
+        side,
+        palette,
+        make_icon,
+        |_| None,
+        sep_before,
+        chevron,
+        on_activate,
+        on_drop,
+        None,
+    )
+}
+
+/// Callback de **reorden por arrastre**: `(payload, target)` — el `id` del diente
+/// arrastrado y el `id` del diente sobre el que se soltó. La app traduce ambos ids a
+/// posiciones y reordena. `None` = no hacer nada (p. ej. si el payload no pertenece a
+/// este rail). Se comparte por-diente vía `Arc` para no re-crear la lógica N veces.
+pub type ReorderFn<Msg> = Arc<dyn Fn(u64, u64) -> Option<Msg> + Send + Sync>;
+
+/// Como [`dock_rail_view_badged`] pero además **reordenable por arrastre**: cada diente
+/// es también un *drop target*, así soltar un diente sobre otro emite
+/// `on_reorder(payload_arrastrado, id_destino)`. El `on_drop` del rail entero sigue
+/// activo para soltar sobre el hueco (mover de un rail a otro); el drop sobre un diente
+/// concreto tiene prioridad (es el target más interno) y da la POSICIÓN destino que el
+/// `on_drop` a nivel-rail no podía expresar. Es el rail que usa el rag-sidebar para dar
+/// reorden de dientes (sesiones, escritorios, playlists…).
+#[allow(clippy::too_many_arguments)]
+pub fn dock_rail_view_full<Msg, FIcon, FBadge, FSep, FAct, FDrop>(
+    items: &[DockRailItem],
+    width: f32,
+    side: DockRailSide,
+    palette: &DockRailPalette,
+    make_icon: FIcon,
+    make_badge: FBadge,
+    sep_before: FSep,
+    on_activate: FAct,
+    on_drop: FDrop,
+    on_reorder: Option<ReorderFn<Msg>>,
+) -> View<Msg>
+where
+    Msg: Clone + Send + Sync + 'static,
+    FIcon: Fn(u64, f32, Color) -> View<Msg>,
+    FBadge: Fn(u64) -> Option<DockBadge>,
+    FSep: Fn(u64) -> bool,
+    FAct: Fn(u64) -> Msg,
+    FDrop: Fn(u64) -> Option<Msg> + Send + Sync + 'static,
+{
+    dock_rail_view_core(
+        items,
+        width,
+        side,
+        palette,
+        make_icon,
+        make_badge,
+        sep_before,
+        |_| None,
+        on_activate,
+        on_drop,
+        on_reorder,
+    )
+}
+
+/// La **flechita** (chevron) de un diente-cabezal de grupo colapsable, dibujada
+/// como vector (no glifo de fuente, así es determinista en toda máquina — evita el
+/// notdef en hardware sin la fuente). Apunta ▾ (abajo) cuando el grupo está
+/// desplegado y ▸ (derecha) cuando está plegado, del `color` ya resuelto del diente
+/// (acento si activo). Se superpone en la esquina interna-inferior y no captura
+/// clics; el host alterna el estado al activar el cabezal.
+fn chevron_view<Msg: Clone + 'static>(expanded: bool, color: Color, mirror: bool) -> View<Msg> {
+    // Esquina INTERNA-inferior: el borde interno es la izquierda en InnerLeft y la
+    // derecha en InnerRight (espejado), del mismo lado que la barra de acento.
+    let inset = if mirror {
+        Rect { top: auto(), bottom: length(2.0_f32), left: auto(), right: length(3.0_f32) }
+    } else {
+        Rect { top: auto(), bottom: length(2.0_f32), left: length(3.0_f32), right: auto() }
+    };
+    View::new(Style {
+        position: Position::Absolute,
+        inset,
+        size: Size { width: length(11.0_f32), height: length(11.0_f32) },
+        ..Default::default()
+    })
+    .paint_with(move |scene, _ts, rect| paint_chevron(scene, rect, expanded, color))
+}
+
+/// Pinta un triángulo relleno (la flechita) centrado en `rect`: apunta abajo si
+/// `expanded`, a la derecha si no.
+fn paint_chevron(scene: &mut llimphi_ui::llimphi_raster::vello::Scene, rect: PaintRect, expanded: bool, color: Color) {
+    use llimphi_ui::llimphi_raster::kurbo::{Affine, BezPath};
+    use llimphi_ui::llimphi_raster::peniko::Fill;
+    if rect.w <= 0.0 || rect.h <= 0.0 {
+        return;
+    }
+    let cx = (rect.x + rect.w * 0.5) as f64;
+    let cy = (rect.y + rect.h * 0.5) as f64;
+    let s = 3.4_f64; // media-extensión del triángulo
+    let mut p = BezPath::new();
+    if expanded {
+        // ▾ apunta hacia abajo (grupo desplegado).
+        p.move_to((cx - s, cy - s * 0.55));
+        p.line_to((cx + s, cy - s * 0.55));
+        p.line_to((cx, cy + s * 0.85));
+    } else {
+        // ▸ apunta a la derecha (grupo plegado).
+        p.move_to((cx - s * 0.55, cy - s));
+        p.line_to((cx + s * 0.85, cy));
+        p.line_to((cx - s * 0.55, cy + s));
+    }
+    p.close_path();
+    scene.fill(Fill::NonZero, Affine::IDENTITY, &color, None, &p);
+}
+
+/// Una línea separadora tenue entre grupos de dientes del rail.
+fn rail_separator_view<Msg: Clone + 'static>(width: f32, palette: &DockRailPalette) -> View<Msg> {
+    let line = View::new(Style {
+        size: Size { width: percent(1.0_f32), height: length(1.0_f32) },
+        ..Default::default()
+    })
+    .fill(palette.icon_inactive.multiply_alpha(0.30))
+    .radius(0.5);
+    View::new(Style {
+        size: Size { width: length(width), height: length(11.0_f32) },
+        flex_shrink: 0.0,
+        align_items: Some(AlignItems::Center),
+        justify_content: Some(JustifyContent::Center),
+        padding: Rect {
+            left: length(9.0_f32),
+            right: length(9.0_f32),
+            top: length(5.0_f32),
+            bottom: length(5.0_f32),
+        },
+        ..Default::default()
+    })
+    .children(vec![line])
+}
+
+#[allow(clippy::too_many_arguments)]
+fn dock_rail_view_core<Msg, FIcon, FBadge, FSep, FChev, FAct, FDrop>(
+    items: &[DockRailItem],
+    width: f32,
+    side: DockRailSide,
+    palette: &DockRailPalette,
+    make_icon: FIcon,
+    make_badge: FBadge,
+    sep_before: FSep,
+    chevron: FChev,
+    on_activate: FAct,
+    on_drop: FDrop,
+    on_reorder: Option<ReorderFn<Msg>>,
+) -> View<Msg>
+where
+    Msg: Clone + Send + Sync + 'static,
+    FIcon: Fn(u64, f32, Color) -> View<Msg>,
+    FBadge: Fn(u64) -> Option<DockBadge>,
+    FSep: Fn(u64) -> bool,
+    FChev: Fn(u64) -> Option<bool>,
+    FAct: Fn(u64) -> Msg,
+    FDrop: Fn(u64) -> Option<Msg> + Send + Sync + 'static,
+{
+    let mirror = side == DockRailSide::InnerRight;
     let mut teeth: Vec<View<Msg>> = Vec::with_capacity(items.len());
     for item in items {
+        // Separador de grupo ENCIMA de este diente (nunca antes del primero).
+        if sep_before(item.id) && !teeth.is_empty() {
+            teeth.push(rail_separator_view(width, palette));
+        }
         let fg = if item.active {
             palette.accent
         } else {
@@ -140,6 +515,47 @@ where
 
         let id = item.id;
         let msg = on_activate(id);
+        // En un sidebar derecho (mirror) la barra de acento va a la DERECHA y el
+        // icono a la izquierda → el diente sobresale hacia el centro (a la izq.).
+        let mut tooth_children = if mirror {
+            vec![icon_box, accent_bar]
+        } else {
+            vec![accent_bar, icon_box]
+        };
+        // Distintivo opcional, superpuesto en la esquina externa superior — la
+        // esquina hacia la que el diente sobresale (derecha en InnerLeft, izquierda
+        // en InnerRight). Va `Absolute` para flotar sobre el icono sin empujarlo.
+        if let Some(badge) = make_badge(id) {
+            let inset = if mirror {
+                Rect {
+                    top: length(2.0_f32),
+                    left: length(2.0_f32),
+                    right: auto(),
+                    bottom: auto(),
+                }
+            } else {
+                Rect {
+                    top: length(2.0_f32),
+                    right: length(2.0_f32),
+                    left: auto(),
+                    bottom: auto(),
+                }
+            };
+            tooth_children.push(
+                View::new(Style {
+                    position: Position::Absolute,
+                    inset,
+                    ..Default::default()
+                })
+                .children(vec![badge.view::<Msg>()]),
+            );
+        }
+        // Flechita de grupo colapsable (sólo dientes-cabezal): ▾ desplegado, ▸
+        // plegado. Va en la esquina interna-inferior y NO captura clics —el toggle
+        // lo decide el host al activar el cabezal—. `fg` la tiñe (acento si activo).
+        if let Some(expanded) = chevron(id) {
+            tooth_children.push(chevron_view(expanded, fg, mirror));
+        }
         let mut tooth = View::new(Style {
             flex_direction: FlexDirection::Row,
             size: Size {
@@ -157,22 +573,54 @@ where
             DragPhase::Move | DragPhase::End => None,
         })
         .drag_payload(id)
-        .children(vec![accent_bar, icon_box]);
+        .children(tooth_children);
         if item.active {
-            // Pestaña activa: además del fill, redondea el lado que sobresale
-            // hacia el contenido (la barra de acento marca el borde interno a
-            // la izquierda, así que el diente abre a la derecha). Le da el look
-            // de pestaña que sale del rail en vez de un rectángulo plano.
+            // Pestaña activa: además del fill, redondea el lado que sobresale hacia
+            // el contenido. La barra de acento marca el borde interno; el diente abre
+            // hacia el lado opuesto (derecha en InnerLeft, izquierda en InnerRight) →
+            // look de pestaña que sale del rail, no un rectángulo plano.
+            let corners = if mirror {
+                (8.0, 0.0, 0.0, 8.0)
+            } else {
+                (0.0, 8.0, 8.0, 0.0)
+            };
+            tooth = tooth.radius_corners(corners.0, corners.1, corners.2, corners.3);
+            if palette.glass > 0.0 {
+                // Cristal esmerilado SÓLO en la pestaña activa: tinte translúcido
+                // de `bg_active` para que el fondo asome, + `backdrop_blur` que lo
+                // borronea. Con la franja transparente (ver abajo), el diente activo
+                // es el único vidrio del rail; los inactivos quedan icono al aire.
+                tooth = tooth
+                    .fill(palette.bg_active.multiply_alpha(0.55))
+                    .backdrop_blur(palette.glass);
+            } else {
+                tooth = tooth.fill(palette.bg_active);
+            }
+        }
+        // Reorden por arrastre: el diente es TAMBIÉN drop target. Soltar el payload
+        // arrastrado sobre ÉL da la posición destino (lo que el `on_drop` a nivel-rail
+        // no podía). El drop sobre un diente concreto es el target más interno → tiene
+        // prioridad sobre el del rail; soltar en el hueco de abajo sigue yendo al rail.
+        if let Some(reorder) = &on_reorder {
+            let r = reorder.clone();
+            let tid = id;
             tooth = tooth
-                .fill(palette.bg_active)
-                .radius_corners(0.0, 8.0, 8.0, 0.0);
+                .on_drop(move |payload| (r)(payload, tid))
+                .drop_hover_fill(palette.bg_hover);
         }
         teeth.push(tooth);
     }
 
     // La franja: sólo del alto de los dientes (el hueco de abajo lo deja
     // libre para que el área central lo aproveche si el rail flota como
-    // overlay). Es además el drop target del lado.
+    // overlay). Es además el drop target del lado. Con glass, el fondo de la
+    // franja se vuelve transparente — «el resto de la barra» deja ver lo que
+    // haya detrás y sólo los dientes (el activo) portan el vidrio.
+    let rail_bg = if palette.glass > 0.0 {
+        palette.bg_rail.multiply_alpha(0.0)
+    } else {
+        palette.bg_rail
+    };
     View::new(Style {
         flex_direction: FlexDirection::Column,
         size: Size {
@@ -182,9 +630,163 @@ where
         flex_shrink: 0.0,
         ..Default::default()
     })
-    .fill(palette.bg_rail)
+    .fill(rail_bg)
     .radius(5.0)
     .on_drop(on_drop)
     .drop_hover_fill(palette.bg_hover)
     .children(teeth)
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    fn palette() -> DockRailPalette {
+        DockRailPalette {
+            bg_rail: Color::BLACK,
+            bg_active: Color::BLACK,
+            bg_hover: Color::BLACK,
+            accent: Color::WHITE,
+            icon_inactive: Color::WHITE,
+            glass: 0.0,
+        }
+    }
+
+    fn empty_icon(_id: u64, _size: f32, _color: Color) -> View<i32> {
+        View::new(Style::default())
+    }
+
+    /// Un diente con badge gana exactamente un hijo extra (el overlay absoluto)
+    /// frente a uno sin badge — certifica que el distintivo se inserta en el árbol.
+    #[test]
+    fn badge_agrega_hijo_overlay() {
+        let items = [
+            DockRailItem { id: 0, active: false }, // con badge
+            DockRailItem { id: 1, active: false }, // sin badge
+        ];
+        let rail = dock_rail_view_badged(
+            &items,
+            44.0,
+            DockRailSide::InnerLeft,
+            &palette(),
+            empty_icon,
+            |id| (id == 0).then_some(DockBadge::Count(5, BadgeKind::Error)),
+            |_id| 0i32,
+            |_p| None,
+        );
+        // rail.children = dientes; cada diente lleva [accent_bar, icon_box] (+ badge).
+        let teeth = &rail.children;
+        assert_eq!(teeth.len(), 2);
+        assert_eq!(teeth[0].children.len(), 3, "diente con badge: +1 hijo");
+        assert_eq!(teeth[1].children.len(), 2, "diente sin badge: solo barra+icono");
+    }
+
+    /// Sin `make_badge` (las funciones públicas viejas), ningún diente lleva badge.
+    #[test]
+    fn sin_badge_dos_hijos() {
+        let items = [DockRailItem { id: 0, active: true }];
+        let rail = dock_rail_view(&items, 44.0, &palette(), empty_icon, |_id| 0i32, |_p| None);
+        assert_eq!(rail.children[0].children.len(), 2);
+    }
+
+    /// Con `on_reorder`, cada diente es TAMBIÉN drop target (`on_drop`), así soltar
+    /// uno sobre otro da la posición destino. Sin él, los dientes no reciben drop (sólo
+    /// el rail entero). Certifica el reorden por-diente sin depender del runtime de drag.
+    #[test]
+    fn reorder_hace_cada_diente_drop_target() {
+        let items = [
+            DockRailItem { id: 10, active: false },
+            DockRailItem { id: 20, active: false },
+        ];
+        // Sin reorder: ningún diente es drop target.
+        let sin = dock_rail_view(&items, 44.0, &palette(), empty_icon, |_| 0i32, |_| None);
+        assert!(sin.children[0].on_drop.is_none(), "sin reorder: el diente no recibe drop");
+        // Con reorder: cada diente recibe drop y emite (payload, target) → aquí lo
+        // codificamos como payload*100 + target para verificar que llega el par correcto.
+        let reorder: ReorderFn<i32> = Arc::new(|payload, target| Some((payload * 100 + target) as i32));
+        let con = dock_rail_view_full(
+            &items,
+            44.0,
+            DockRailSide::InnerLeft,
+            &palette(),
+            empty_icon,
+            |_| None,
+            |_| false,
+            |_| 0i32,
+            |_| None,
+            Some(reorder),
+        );
+        // Soltar el diente 10 sobre el diente 20 (índice 1) → 10*100 + 20 = 1020.
+        let drop_en_20 = con.children[1].on_drop.as_ref().expect("diente es drop target");
+        assert_eq!(drop_en_20(10), Some(1020), "el drop da (payload=10, target=20)");
+    }
+
+    /// Con `glass > 0`: la franja del rail se pinta transparente (alpha 0) y
+    /// **sólo la pestaña activa** lleva `backdrop_blur`; las inactivas no. Sin
+    /// glass, la franja mantiene su fondo opaco y nadie borronea el fondo.
+    #[test]
+    fn glass_transparenta_franja_y_borronea_solo_el_activo() {
+        let items = [
+            DockRailItem { id: 0, active: true },  // activo → vidrio
+            DockRailItem { id: 1, active: false }, // inactivo → sin blur
+        ];
+        // Sin glass: franja opaca, ningún diente borronea.
+        let mut pal = palette();
+        let sin = dock_rail_view(&items, 44.0, &pal, empty_icon, |_| 0i32, |_| None);
+        assert_eq!(sin.fill.map(|c| c.components[3]), Some(1.0), "sin glass: franja opaca");
+        assert!(sin.children[0].backdrop_blur.is_none(), "sin glass: el activo no borronea");
+
+        // Con glass: franja transparente + blur SÓLO en el activo.
+        pal.glass = 6.0;
+        let con = dock_rail_view(&items, 44.0, &pal, empty_icon, |_| 0i32, |_| None);
+        assert_eq!(con.fill.map(|c| c.components[3]), Some(0.0), "con glass: franja transparente");
+        assert_eq!(con.children[0].backdrop_blur, Some(6.0), "con glass: el activo es vidrio");
+        assert!(con.children[1].backdrop_blur.is_none(), "con glass: el inactivo NO borronea");
+    }
+
+    /// Un diente-cabezal (chevron `Some`) gana un hijo overlay extra (la flechita)
+    /// frente a un diente normal (chevron `None`); el cabezal no es drop target ni
+    /// captura clics distintos —sigue activando el diente—.
+    #[test]
+    fn chevron_agrega_flechita_solo_en_el_cabezal() {
+        let items = [
+            DockRailItem { id: 0, active: false }, // cabezal (chevron)
+            DockRailItem { id: 1, active: false }, // diente normal
+        ];
+        let rail = dock_rail_view_collapsible(
+            &items,
+            44.0,
+            DockRailSide::InnerLeft,
+            &palette(),
+            empty_icon,
+            |_| false,
+            |id| (id == 0).then_some(true), // el 0 es cabezal desplegado
+            |_id| 0i32,
+            |_p| None,
+        );
+        assert_eq!(rail.children.len(), 2);
+        assert_eq!(rail.children[0].children.len(), 3, "cabezal: barra+icono+flechita");
+        assert_eq!(rail.children[1].children.len(), 2, "diente normal: barra+icono");
+    }
+
+    /// En `InnerRight` el badge se ancla a la izquierda (esquina externa espejada).
+    #[test]
+    fn badge_espeja_inset_en_inner_right() {
+        use llimphi_ui::llimphi_layout::taffy::style_helpers::TaffyAuto;
+        let items = [DockRailItem { id: 0, active: false }];
+        let rail = dock_rail_view_badged(
+            &items,
+            44.0,
+            DockRailSide::InnerRight,
+            &palette(),
+            empty_icon,
+            |_id| Some(DockBadge::Dot(BadgeKind::Success)),
+            |_id| 0i32,
+            |_p| None,
+        );
+        let badge_overlay = rail.children[0].children.last().expect("overlay presente");
+        // Espejo: left fijo, right auto.
+        assert_ne!(badge_overlay.style.inset.left, TaffyAuto::AUTO);
+        assert_eq!(badge_overlay.style.inset.right, TaffyAuto::AUTO);
+    }
+}
diff --git a/widgets/edit-menu/Cargo.toml b/widgets/edit-menu/Cargo.toml
index 6527191..f23eaac 100644
--- a/widgets/edit-menu/Cargo.toml
+++ b/widgets/edit-menu/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-edit-menu — el menú de edición estándar (Deshacer/Rehacer/Cortar/Copiar/Pegar/Eliminar/Seleccionar todo) para cualquier campo que use EditorState (input single-line e IDE enriquecido). Arma el ContextMenuSpec desde flags derivados del estado y aplica las acciones reutilizando apply_key_with_clipboard."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/edit-menu/LEEME.md b/widgets/edit-menu/LEEME.md
new file mode 100644
index 0000000..e16f226
--- /dev/null
+++ b/widgets/edit-menu/LEEME.md
@@ -0,0 +1,37 @@
+# llimphi-widget-edit-menu
+
+*Read this in English: [README.md](README.md).*
+
+El menú de edición estándar para cualquier campo de texto Llimphi.
+
+Tanto el input single-line (`llimphi_widget_text_input`) como el
+editor IDE enriquecido (`llimphi_widget_text_editor`) se apoyan en
+el mismo `EditorState`. Este widget arma, a partir de ese estado,
+el menú contextual canónico:
+```text
+  ┃ EDICIÓN
+  ┃ Deshacer            Ctrl+Z
+  ┃ Rehacer             Ctrl+Y
+  ┃ ─────────────────────
+  ┃ Cortar              Ctrl+X
+  ┃ Copiar              Ctrl+C
+  ┃ Pegar               Ctrl+V
+  ┃ Eliminar            Supr
+  ┃ ─────────────────────
+  ┃ Seleccionar todo    Ctrl+A
+```
+Cada ítem se habilita o no según el estado real (sin selección →
+Cortar/Copiar/Eliminar grises; sin historial → Deshacer gris; etc).
+
+Uso típico, en tres pasos por app:
+1. El campo emite la posición del click derecho — `View::on_right_click_at`
+   → `Msg::AbrirMenuEdicion(x, y)`. El `update` guarda el ancla.
+2. `App::view_overlay` devuelve
+   `Some(context_menu_view(edit_menu::edit_context_menu(...)))` cuando el
+   ancla está presente.
+3. El pick produce `Msg::Edicion(EditAction)`; el `update` llama a
+   `apply` con el `EditorState` del campo focuseado y el clipboard.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/edit-menu/README.md b/widgets/edit-menu/README.md
new file mode 100644
index 0000000..fbd7114
--- /dev/null
+++ b/widgets/edit-menu/README.md
@@ -0,0 +1,37 @@
+# llimphi-widget-edit-menu
+
+The standard edit menu for any Llimphi text field.
+
+Both the single-line input (`llimphi_widget_text_input`) and the rich IDE editor
+(`llimphi_widget_text_editor`) build on the same `EditorState`. From that state
+this widget assembles the canonical context menu:
+
+```text
+  ┃ EDIT
+  ┃ Undo                Ctrl+Z
+  ┃ Redo                Ctrl+Y
+  ┃ ─────────────────────
+  ┃ Cut                 Ctrl+X
+  ┃ Copy                Ctrl+C
+  ┃ Paste               Ctrl+V
+  ┃ Delete              Del
+  ┃ ─────────────────────
+  ┃ Select all          Ctrl+A
+```
+
+Every item is enabled or not according to the real state (no selection →
+Cut/Copy/Delete greyed; no history → Undo greyed; and so on).
+
+Typical use, in three steps per app:
+
+1. The field emits the right-click position — `View::on_right_click_at` →
+   `Msg::OpenEditMenu(x, y)`. The `update` stores the anchor.
+2. `App::view_overlay` returns
+   `Some(context_menu_view(edit_menu::edit_context_menu(...)))` while the anchor
+   is present.
+3. The pick produces `Msg::Edit(EditAction)`; the `update` calls `apply` with the
+   focused field's `EditorState` and the clipboard.
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/edit-menu/src/lib.rs b/widgets/edit-menu/src/lib.rs
index 777900e..ba686b1 100644
--- a/widgets/edit-menu/src/lib.rs
+++ b/widgets/edit-menu/src/lib.rs
@@ -65,7 +65,7 @@ pub struct EditFlags {
     /// Hay algo que rehacer.
     pub can_redo: bool,
     /// El clipboard tiene contenido pegable → Pegar habilitado. Si no se
-    /// puede saber barato, pasá `true` (Pegar no-opea si está vacío).
+    /// puede saber barato, pasa `true` (Pegar no-opea si está vacío).
     pub can_paste: bool,
     /// El buffer no está vacío → Seleccionar todo habilitado.
     pub has_text: bool,
diff --git a/widgets/empty/Cargo.toml b/widgets/empty/Cargo.toml
index dbbad55..a80cd4b 100644
--- a/widgets/empty/Cargo.toml
+++ b/widgets/empty/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-empty — empty-state con icono grande, título y descripción opcional. Reemplaza pantallas en blanco crudas con orientación al usuario."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/empty/LEEME.md b/widgets/empty/LEEME.md
new file mode 100644
index 0000000..6bd15a8
--- /dev/null
+++ b/widgets/empty/LEEME.md
@@ -0,0 +1,15 @@
+# llimphi-widget-empty
+
+*Read this in English: [README.md](README.md).*
+
+Empty state con icono, título y descripción.
+
+Patrón para reemplazar pantallas en blanco con orientación: cuando
+una lista no tiene items, un editor no tiene archivo abierto, una
+búsqueda no arrojó resultados — en vez de fondo plano, mostrar
+un icono grande apagado + título + descripción corta + (opcional)
+botón de acción primaria.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/empty/README.md b/widgets/empty/README.md
new file mode 100644
index 0000000..5011dc7
--- /dev/null
+++ b/widgets/empty/README.md
@@ -0,0 +1,12 @@
+# llimphi-widget-empty
+
+Empty state with icon, title and description.
+
+The pattern that replaces blank screens with orientation: when a list has no
+items, an editor has no file open, a search returned nothing — instead of a flat
+background, show a large muted icon + title + short description + (optionally) a
+primary action button.
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/fab/Cargo.toml b/widgets/fab/Cargo.toml
index 944b3f0..fb347b0 100644
--- a/widgets/fab/Cargo.toml
+++ b/widgets/fab/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-fab — Floating Action Button: botón circular elevado (sombra E3), color de acento, hover lift sutil. Para la acción primaria de una página (compose, nuevo, +)."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/fab/LEEME.md b/widgets/fab/LEEME.md
new file mode 100644
index 0000000..73403c7
--- /dev/null
+++ b/widgets/fab/LEEME.md
@@ -0,0 +1,18 @@
+# llimphi-widget-fab
+
+*Read this in English: [README.md](README.md).*
+
+Floating Action Button.
+
+Botón circular elevado pensado para la **acción primaria** de una
+pantalla (componer, nuevo, +, capturar). Heredamos el patrón
+Material/Flutter: rest sobre sombra E3, círculo del color `accent`,
+glyph blanco centrado, y **feedback de hover** (el fill se aviva al
+pasar el cursor, vía `hover_fill` del compositor — sin estado en el host).
+
+La **entrada** usa `animated_pop_in` para el "pop" canónico de Material
+(scale 0.6 → 1.0 + fade-in) en vez de aparecer de golpe.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/fab/README.md b/widgets/fab/README.md
new file mode 100644
index 0000000..b0114c2
--- /dev/null
+++ b/widgets/fab/README.md
@@ -0,0 +1,16 @@
+# llimphi-widget-fab
+
+Floating Action Button.
+
+A raised circular button for a screen's **primary action** (compose, new, +,
+capture). It inherits the Material/Flutter pattern: at rest over an E3 shadow, a
+circle in the `accent` colour, a centred white glyph, and **hover feedback** (the
+fill brightens under the cursor, through the compositor's `hover_fill` — no state
+in the host).
+
+The **entrance** uses `animated_pop_in` for Material's canonical "pop"
+(scale 0.6 → 1.0 + fade-in) instead of appearing abruptly.
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/fab/src/lib.rs b/widgets/fab/src/lib.rs
index e84d2a5..233a671 100644
--- a/widgets/fab/src/lib.rs
+++ b/widgets/fab/src/lib.rs
@@ -3,11 +3,11 @@
 //! Botón circular elevado pensado para la **acción primaria** de una
 //! pantalla (componer, nuevo, +, capturar). Heredamos el patrón
 //! Material/Flutter: rest sobre sombra E3, círculo del color `accent`,
-//! glyph blanco centrado, sombra que **respira** al hover (sube a E5).
+//! glyph blanco centrado, y **feedback de hover** (el fill se aviva al
+//! pasar el cursor, vía `hover_fill` del compositor — sin estado en el host).
 //!
-//! La firma cinética viene del tween de fill+shadow vía `View::animated`,
-//! con `animated_pop_in` para que la **entrada** del FAB sea el "pop" canónico
-//! de Material (scale 0.6 → 1.0 + fade-in) en vez de aparecer de golpe.
+//! La **entrada** usa `animated_pop_in` para el "pop" canónico de Material
+//! (scale 0.6 → 1.0 + fade-in) en vez de aparecer de golpe.
 
 #![forbid(unsafe_code)]
 
@@ -22,15 +22,28 @@ use llimphi_ui::View;
 use llimphi_theme::{elevation, motion, Theme};
 
 /// Tamaño del FAB. El estándar Material es 56 px; el "mini" 40 px;
-/// "extended" lleva texto + ícono y crece el ancho (no implementado
-/// como variante separada para mantener la API mínima — quien lo
-/// necesite usa `fab_styled`).
+/// el "extended" (texto + glyph, píldora ancha) es [`fab_extended`] /
+/// [`fab_extended_icon`], no un `FabSize`.
 #[derive(Debug, Clone, Copy)]
 pub enum FabSize {
     Regular,
     Mini,
 }
 
+/// Aviva un color hacia el blanco en `t` (0..1) — feedback de hover.
+fn brighten(c: Color, t: f32) -> Color {
+    let [r, g, b, a] = c.components;
+    Color {
+        components: [
+            r + (1.0 - r) * t,
+            g + (1.0 - g) * t,
+            b + (1.0 - b) * t,
+            a,
+        ],
+        ..c
+    }
+}
+
 impl FabSize {
     pub fn px(self) -> f32 {
         match self {
@@ -87,6 +100,7 @@ pub fn fab_view<Msg: Clone + 'static>(
         ..Default::default()
     })
     .fill(palette.bg)
+    .hover_fill(brighten(palette.bg, 0.12))
     .radius((s as f64) * 0.5)
     .shadow(shadow)
     .animated_pop_in(key, motion::FAST)
@@ -105,15 +119,29 @@ pub fn fab_view<Msg: Clone + 'static>(
     .cursor(llimphi_ui::Cursor::Pointer)
 }
 
-/// FAB con texto + glyph (Extended FAB de Material). Pildora ancha en
-/// vez de círculo.
+/// Extended FAB (Material): píldora ancha con **texto**. Para texto + glyph
+/// líder, usar [`fab_extended_icon`].
 pub fn fab_extended<Msg: Clone + 'static>(
     label: impl Into<String>,
     key: u64,
     palette: &FabPalette,
     on_click: Msg,
+) -> View<Msg> {
+    fab_extended_icon(None::<String>, label, key, palette, on_click)
+}
+
+/// Extended FAB con **glyph líder + texto** (el "texto + ícono" que promete
+/// el patrón Material). `glyph` `None` = sólo texto (equivale a
+/// [`fab_extended`]).
+pub fn fab_extended_icon<Msg: Clone + 'static>(
+    glyph: Option<impl Into<String>>,
+    label: impl Into<String>,
+    key: u64,
+    palette: &FabPalette,
+    on_click: Msg,
 ) -> View<Msg> {
     let label: String = label.into();
+    let aria = label.clone();
     let h = 48.0_f32;
     let (a, blur, dy) = elevation::E3;
     let shadow = Shadow {
@@ -123,11 +151,44 @@ pub fn fab_extended<Msg: Clone + 'static>(
         dy,
         spread: 0.0,
     };
+
+    let mut children: Vec<View<Msg>> = Vec::with_capacity(2);
+    if let Some(g) = glyph {
+        children.push(
+            View::new(Style {
+                size: Size { width: length(20.0_f32), height: length(h) },
+                align_items: Some(AlignItems::Center),
+                justify_content: Some(JustifyContent::Center),
+                margin: llimphi_ui::llimphi_layout::taffy::Rect {
+                    left: length(0.0_f32),
+                    right: length(8.0_f32),
+                    top: length(0.0_f32),
+                    bottom: length(0.0_f32),
+                },
+                ..Default::default()
+            })
+            .text_aligned(g.into(), 18.0, palette.fg, Alignment::Center),
+        );
+    }
+    children.push(
+        View::new(Style {
+            size: Size {
+                width: llimphi_ui::llimphi_layout::taffy::prelude::auto(),
+                height: length(h),
+            },
+            align_items: Some(AlignItems::Center),
+            justify_content: Some(JustifyContent::Center),
+            ..Default::default()
+        })
+        .text_aligned(label, 14.0, palette.fg, Alignment::Center),
+    );
+
     View::new(Style {
         size: Size {
             width: llimphi_ui::llimphi_layout::taffy::prelude::auto(),
             height: length(h),
         },
+        flex_direction: llimphi_ui::llimphi_layout::taffy::prelude::FlexDirection::Row,
         align_items: Some(AlignItems::Center),
         justify_content: Some(JustifyContent::Center),
         padding: llimphi_ui::llimphi_layout::taffy::Rect {
@@ -139,12 +200,13 @@ pub fn fab_extended<Msg: Clone + 'static>(
         ..Default::default()
     })
     .fill(palette.bg)
+    .hover_fill(brighten(palette.bg, 0.12))
     .radius((h as f64) * 0.5)
     .shadow(shadow)
     .animated_pop_in(key, motion::FAST)
-    .text_aligned(label.clone(), 14.0, palette.fg, Alignment::Center)
     .role(llimphi_ui::Role::Button)
-    .aria_label(label)
+    .aria_label(aria)
     .on_click(on_click)
     .cursor(llimphi_ui::Cursor::Pointer)
+    .children(children)
 }
diff --git a/widgets/field/Cargo.toml b/widgets/field/Cargo.toml
index f29b7f8..7a80465 100644
--- a/widgets/field/Cargo.toml
+++ b/widgets/field/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-field — wrapper de formulario: label arriba + slot del input + descripción/error abajo. Patrón estándar para formularios accesibles."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/field/LEEME.md b/widgets/field/LEEME.md
new file mode 100644
index 0000000..9da7e07
--- /dev/null
+++ b/widgets/field/LEEME.md
@@ -0,0 +1,19 @@
+# llimphi-widget-field
+
+*Read this in English: [README.md](README.md).*
+
+Wrapper de formulario para inputs.
+
+Patrón estándar de campo:
+```text
+Nombre del campo            (label — bold, fg_text)
+[ input control aquí ]      (slot — viene como View<Msg>)
+Descripción o error abajo   (helper — fg_muted o fg_destructive)
+```
+El widget no implementa el input — lo recibe como `View<Msg>` y lo
+envuelve. Esto permite usarlo con `text-input`, `text-area`, `switch`,
+`segmented` o cualquier otro control.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/field/README.md b/widgets/field/README.md
new file mode 100644
index 0000000..ba6c09c
--- /dev/null
+++ b/widgets/field/README.md
@@ -0,0 +1,19 @@
+# llimphi-widget-field
+
+Form wrapper for inputs.
+
+The standard field pattern:
+
+```text
+Field name                  (label — bold, fg_text)
+[ input control here ]      (slot — arrives as View<Msg>)
+Description or error below  (helper — fg_muted or fg_destructive)
+```
+
+The widget does not implement the input — it receives it as a `View<Msg>` and
+wraps it. That lets you use it with `text-input`, `text-area`, `switch`,
+`segmented` or any other control.
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/fitted-box/Cargo.toml b/widgets/fitted-box/Cargo.toml
index 5766c9e..fd8feab 100644
--- a/widgets/fitted-box/Cargo.toml
+++ b/widgets/fitted-box/Cargo.toml
@@ -5,8 +5,8 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-fitted-box — escala un subárbol arbitrario para que entre en el slot del padre, con políticas BoxFit::{Contain, Cover, Fill, None, ScaleDown}. Análogo a `FittedBox` de Flutter. Compone sobre el seam LayoutBuilder."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
diff --git a/widgets/fitted-box/LEEME.md b/widgets/fitted-box/LEEME.md
new file mode 100644
index 0000000..4b0e70e
--- /dev/null
+++ b/widgets/fitted-box/LEEME.md
@@ -0,0 +1,40 @@
+# llimphi-widget-fitted-box
+
+*Read this in English: [README.md](README.md).*
+
+Escala un subárbol al slot disponible.
+
+Análogo a `FittedBox` de Flutter: el caller le pasa el **tamaño
+natural** del contenido y una **política de fit**, y el widget aplica
+un `transform` afín al subárbol para que entre en el slot real
+(medido por el seam `LayoutBuilder` del compositor). El subárbol
+queda **centrado** y, salvo `BoxFit::Fill`, **preserva su aspect
+ratio**.
+
+Por qué no sale solo: `taffy` dimensiona contenedores, pero el
+contenido (texto, imagen, painter custom) no escala con su contenedor
+— sólo se posiciona dentro. `FittedBox` aplica un escalado VISUAL
+sobre el subárbol completo, así un canvas `paint_with` o un texto
+grande caben en una celda chiquita sin que el caller los re-mida.
+
+El padre del widget tiene `clip(true)` para que ningún píxel se salga
+del slot (sólo importa cuando el aspect del contenido NO coincide con
+el slot bajo `BoxFit::None`, o nunca con `Contain`/`Fill`).
+
+## API
+```ignore
+use llimphi_widget_fitted_box::{fitted_box, BoxFit};
+// Una imagen 800×600 que tiene que caber en cualquier slot, preservando
+// aspect (mostrar entera, posibles bandas).
+fitted_box((800.0, 600.0), BoxFit::Contain, || my_image_view())
+```
+## Funciones puras
+
+`compute_fit` devuelve `(sx, sy, dx, dy)` para un `(slot, inner,
+fit)` dado y es testeable sin runtime. Útil para validar el algoritmo
+y para casos donde el caller ya tiene una transformación propia que
+quiere componer.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/fitted-box/README.md b/widgets/fitted-box/README.md
new file mode 100644
index 0000000..d32648e
--- /dev/null
+++ b/widgets/fitted-box/README.md
@@ -0,0 +1,38 @@
+# llimphi-widget-fitted-box
+
+Scales a subtree to the available slot.
+
+The analogue of Flutter's `FittedBox`: the caller passes the content's **natural
+size** and a **fit policy**, and the widget applies an affine `transform` to the
+subtree so it fits the real slot (measured through the compositor's
+`LayoutBuilder` seam). The subtree ends up **centred** and, except under
+`BoxFit::Fill`, **preserves its aspect ratio**.
+
+Why it does not come for free: `taffy` sizes containers, but the content (text,
+image, custom painter) does not scale with its container — it is only positioned
+inside it. `FittedBox` applies a VISUAL scale over the whole subtree, so a
+`paint_with` canvas or a large piece of text fits into a tiny cell without the
+caller re-measuring anything.
+
+The widget's parent has `clip(true)` so no pixel escapes the slot (it only
+matters when the content's aspect does NOT match the slot under `BoxFit::None`,
+and never with `Contain`/`Fill`).
+
+## API
+
+```ignore
+use llimphi_widget_fitted_box::{fitted_box, BoxFit};
+// An 800×600 image that must fit any slot, preserving aspect
+// (shown whole, possibly with bands).
+fitted_box((800.0, 600.0), BoxFit::Contain, || my_image_view())
+```
+
+## Pure functions
+
+`compute_fit` returns `(sx, sy, dx, dy)` for a given `(slot, inner, fit)` and is
+testable without a runtime. Useful to validate the algorithm, and for cases where
+the caller already has its own transform to compose with.
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/fitted-box/src/lib.rs b/widgets/fitted-box/src/lib.rs
index 0301f4f..bed5932 100644
--- a/widgets/fitted-box/src/lib.rs
+++ b/widgets/fitted-box/src/lib.rs
@@ -116,7 +116,7 @@ where
 {
     let (iw, ih) = inner_size;
     View::<Msg>::new(Style {
-        size: Size { width: percent(1.0), height: percent(1.0) },
+        size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
         ..Default::default()
     })
     .clip(true)
@@ -145,8 +145,8 @@ where
         let inner_wrap = View::<Msg>::new(Style {
             position: llimphi_ui::llimphi_layout::taffy::Position::Absolute,
             inset: llimphi_ui::llimphi_layout::taffy::Rect {
-                top: length(0.0),
-                left: length(0.0),
+                top: length(0.0_f32),
+                left: length(0.0_f32),
                 right: llimphi_ui::llimphi_layout::taffy::prelude::auto(),
                 bottom: llimphi_ui::llimphi_layout::taffy::prelude::auto(),
             },
diff --git a/widgets/gallery/Cargo.toml b/widgets/gallery/Cargo.toml
index 8a09efe..d587686 100644
--- a/widgets/gallery/Cargo.toml
+++ b/widgets/gallery/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-gallery — app demo que pinta todos los widgets de llimphi en una sola ventana. Pensado como referencia visual y como smoke test al introducir cambios al theme o a los widgets."
 
+repository.workspace = true
 [[bin]]
 name = "llimphi-widget-gallery"
 path = "src/main.rs"
diff --git a/widgets/gallery/src/main.rs b/widgets/gallery/src/main.rs
index af16bc4..ca2bf51 100644
--- a/widgets/gallery/src/main.rs
+++ b/widgets/gallery/src/main.rs
@@ -2,7 +2,7 @@
 //! ventana. Útil como referencia visual y smoke test al cambiar el
 //! theme o cualquier widget.
 //!
-//! Corré con: `cargo run -p llimphi-widget-gallery --release`.
+//! Corre con: `cargo run -p llimphi-widget-gallery --release`.
 
 use std::sync::Arc;
 
@@ -14,14 +14,16 @@ use llimphi_ui::llimphi_layout::taffy::{
 use llimphi_ui::llimphi_raster::peniko::Color;
 use llimphi_ui::llimphi_text::Alignment;
 use llimphi_ui::{App, DragPhase, Handle, View};
-use llimphi_widget_app_header::{app_header, AppHeaderPalette};
+use llimphi_widget_app_header::{app_header_iconed, AppHeaderPalette, AppIcon};
 use llimphi_widget_banner::{banner_view, BannerKind};
 use llimphi_widget_button::{button_view, ButtonPalette};
 use llimphi_widget_list::{list_view, ListPalette, ListRow, ListSpec};
 use llimphi_widget_splitter::{splitter_two, Direction, PaneSize, SplitterPalette};
 use llimphi_widget_stat_card::{stat_card_view, StatCardPalette};
 use llimphi_widget_tabs::{tabs_view, TabsPalette, TabsSpec};
-use llimphi_widget_text_input::{text_input_view, TextInputPalette, TextInputState};
+use llimphi_widget_text_input::{
+    text_input_view_full, MemClipboard, TextInputEvent, TextInputPalette, TextInputState,
+};
 use llimphi_widget_theme_switcher::theme_switcher_view;
 use llimphi_widget_tiled::{tiled_view_reorderable, TileSpec, TiledPalette};
 use llimphi_widget_context_menu::{
@@ -33,7 +35,9 @@ use app_bus::{AppMenu, Menu, MenuItem};
 
 #[derive(Clone)]
 enum Msg {
-    EditKey(llimphi_ui::KeyEvent),
+    /// Todo lo del text-input (teclado/IME/mouse) por un solo Msg — el camino
+    /// frictionless de F1: `state.handle(ev, &mut clip)`.
+    Field(TextInputEvent),
     SelectRow(usize),
     SelectTab(usize),
     ClickAction(u32),
@@ -50,6 +54,8 @@ enum Msg {
 
 struct Model {
     text: TextInputState,
+    /// Portapapeles intra-app para copiar/pegar en el campo.
+    clip: MemClipboard,
     list_sel: usize,
     tab: usize,
     last_action: Option<u32>,
@@ -79,6 +85,7 @@ impl App for Gallery {
     fn init(_: &Handle<Msg>) -> Model {
         Model {
             text: TextInputState::new(),
+            clip: MemClipboard::new(),
             list_sel: 0,
             tab: 0,
             last_action: None,
@@ -91,14 +98,14 @@ impl App for Gallery {
     }
 
     fn on_key(_: &Model, e: &llimphi_ui::KeyEvent) -> Option<Msg> {
-        Some(Msg::EditKey(e.clone()))
+        Some(Msg::Field(TextInputEvent::Key(e.clone())))
     }
 
     fn update(model: Model, msg: Msg, handle: &Handle<Msg>) -> Model {
         let mut m = model;
         match msg {
-            Msg::EditKey(ev) => {
-                m.text.apply_key(&ev);
+            Msg::Field(ev) => {
+                m.text.handle(ev, &mut m.clip);
             }
             Msg::SelectRow(i) => m.list_sel = i,
             Msg::SelectTab(i) => m.tab = i,
@@ -146,7 +153,8 @@ impl App for Gallery {
         let input_palette = TextInputPalette::from_theme(&theme);
 
         // --- Header con acción a la derecha ---
-        let header = app_header(
+        let header = app_header_iconed(
+            AppIcon::Llimphi,
             format!(
                 "llimphi widget gallery · última acción: {}",
                 match model.last_action {
@@ -215,6 +223,10 @@ impl App for Gallery {
             tab_height: 32.0,
             palette: tabs_palette,
             tab_width: Some(120.0),
+            on_close: None,
+            on_reorder: None,
+            strip_offset: 0.0,
+            on_strip_scroll: None,
         });
 
         let body = splitter_two(
@@ -471,17 +483,17 @@ fn input_pane(state: &TextInputState, palette: &TextInputPalette, theme: &Theme)
         ..Default::default()
     })
     .text_aligned(
-        "Probá tipear acá:".to_string(),
+        "Prueba tipear aquí:".to_string(),
         12.0,
         theme.fg_muted,
         Alignment::Start,
     );
-    let input = text_input_view(
+    let input = text_input_view_full(
         state,
         "lo que sea",
         true, // siempre focado en este demo
         palette,
-        Msg::ClickAction(0),
+        Msg::Field,
     );
 
     View::new(Style {
diff --git a/widgets/gauge/Cargo.toml b/widgets/gauge/Cargo.toml
index 9504d9e..29576f7 100644
--- a/widgets/gauge/Cargo.toml
+++ b/widgets/gauge/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-gauge — medidor radial (arco de 270°) con aguja y valor central. Para dashboards y stat panels donde el valor tiene un rango natural (0..max) y el contexto importa más que la cifra exacta."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/gauge/LEEME.md b/widgets/gauge/LEEME.md
new file mode 100644
index 0000000..cd2a5d5
--- /dev/null
+++ b/widgets/gauge/LEEME.md
@@ -0,0 +1,15 @@
+# llimphi-widget-gauge
+
+*Read this in English: [README.md](README.md).*
+
+Medidor radial.
+
+Arco de 270° (de 7:30 a 4:30, manecillas de reloj) con un track
+gris fino y un arco activo del color `accent` que crece con el
+valor. En el centro, una etiqueta opcional con el valor formateado.
+Pensado para dashboards (CPU, RAM, throughput) y métricas con
+contexto (lleno / vacío / objetivo).
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/gauge/README.md b/widgets/gauge/README.md
new file mode 100644
index 0000000..39d84c6
--- /dev/null
+++ b/widgets/gauge/README.md
@@ -0,0 +1,12 @@
+# llimphi-widget-gauge
+
+Radial meter.
+
+A 270° arc (from 7:30 to 4:30, clockwise) with a thin grey track and an active
+arc in the `accent` colour that grows with the value. In the centre, an optional
+label with the formatted value. Meant for dashboards (CPU, RAM, throughput) and
+for metrics that need context (full / empty / target).
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/grid/Cargo.toml b/widgets/grid/Cargo.toml
index 4b9f8a7..28785ed 100644
--- a/widgets/grid/Cargo.toml
+++ b/widgets/grid/Cargo.toml
@@ -5,9 +5,10 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-grid — grilla virtualizada 2D para Llimphi: celdas clicables en mosaico, selección, caption/hint opcionales, recorte de overflow. El caller hace la virtualización (calcula la ventana visible con `ventana_visible` y pasa sólo las celdas visibles); el widget las compone en filas. Base para galerías de miniaturas tipo gThumb/FastStone — agnóstico del contenido de la celda (el caller arma cada `View`: thumb, placeholder, lo que sea)."
 
+repository.workspace = true
 [dependencies]
+llimphi-widget-list = { workspace = true }
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/grid/LEEME.md b/widgets/grid/LEEME.md
new file mode 100644
index 0000000..13125ae
--- /dev/null
+++ b/widgets/grid/LEEME.md
@@ -0,0 +1,49 @@
+# llimphi-widget-grid
+
+*Read this in English: [README.md](README.md).*
+
+Grilla virtualizada 2D para Llimphi.
+
+Hermano de `llimphi-widget-list`, pero en mosaico: celdas clicables
+dispuestas en `cols` columnas × filas, con selección, caption/hint
+opcionales y recorte de overflow. Pensado como base para galerías de
+miniaturas tipo gThumb / FastStone — capaz de listar miles de archivos
+sin montar todo: el caller renderea **sólo la ventana visible**.
+
+Como `list`, el widget **no** scrollea por sí mismo. La virtualización
+es del caller, que mantiene `scroll_fila` (primera fila de celdas
+visible) en su estado y lo actualiza con la rueda (calco de
+`nahual-file-explorer`). La diferencia con `list` es que en 2D el
+cálculo de la ventana no es trivial — cuántas columnas caben depende
+del ancho del viewport — así que este crate lo provee como función
+pura testeable: `ventana_visible`.
+
+El widget es **agnóstico del contenido**: cada `GridCell` lleva un
+`View<Msg>` que el caller arma (un thumb `peniko::Image`, un skeleton
+mientras decodifica, un ícono…). Así el pipeline de miniaturas (cola
+async + cache) vive afuera y sólo llena la celda con imagen o
+placeholder.
+
+Flujo típico del caller:
+```ignore
+let v = ventana_visible(total, viewport_w, viewport_h, scroll_fila, &metrics);
+let cells: Vec<GridCell<Msg>> = (v.first..v.first + v.count)
+    .map(|i| GridCell {
+        content: thumb_o_placeholder(i),     // el caller decide
+        label: Some(nombre(i)),
+        selected: i == seleccionado,
+        on_click: Msg::Seleccionar(i),
+    })
+    .collect();
+let grid = grid_view(GridSpec {
+    cells, cols: v.cols, metrics,
+    caption: Some(format!("{total} imágenes")),
+    truncated_hint: (v.first + v.count < total)
+        .then(|| format!("… y {} más", total - (v.first + v.count))),
+    palette: GridPalette::default(),
+});
+```
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/grid/README.md b/widgets/grid/README.md
new file mode 100644
index 0000000..177dd39
--- /dev/null
+++ b/widgets/grid/README.md
@@ -0,0 +1,46 @@
+# llimphi-widget-grid
+
+2D virtualized grid for Llimphi.
+
+Sibling of `llimphi-widget-list`, but tiled: clickable cells laid out in `cols`
+columns × rows, with selection, optional caption/hint and overflow clipping.
+Designed as the base for thumbnail galleries in the gThumb / FastStone vein —
+able to list thousands of files without mounting them all: the caller renders
+**only the visible window**.
+
+Like `list`, the widget does **not** scroll by itself. Virtualization belongs to
+the caller, which keeps `scroll_row` (the first visible row of cells) in its
+state and updates it with the wheel. The difference from `list` is that in 2D
+computing the window is not trivial — how many columns fit depends on the
+viewport width — so this crate provides it as a pure, testable function:
+`ventana_visible`.
+
+The widget is **content-agnostic**: each `GridCell` carries a `View<Msg>` the
+caller builds (a `peniko::Image` thumbnail, a skeleton while decoding, an
+icon…). That way the thumbnail pipeline (async queue + cache) lives outside and
+merely fills the cell with an image or a placeholder.
+
+Typical caller flow:
+
+```ignore
+let v = ventana_visible(total, viewport_w, viewport_h, scroll_row, &metrics);
+let cells: Vec<GridCell<Msg>> = (v.first..v.first + v.count)
+    .map(|i| GridCell {
+        content: thumb_or_placeholder(i),    // the caller decides
+        label: Some(name(i)),
+        selected: i == selected,
+        on_click: Msg::Select(i),
+    })
+    .collect();
+let grid = grid_view(GridSpec {
+    cells, cols: v.cols, metrics,
+    caption: Some(format!("{total} images")),
+    truncated_hint: (v.first + v.count < total)
+        .then(|| format!("… and {} more", total - (v.first + v.count))),
+    palette: GridPalette::default(),
+});
+```
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/grid/src/lib.rs b/widgets/grid/src/lib.rs
index 72a61bc..e62a1d8 100644
--- a/widgets/grid/src/lib.rs
+++ b/widgets/grid/src/lib.rs
@@ -197,6 +197,29 @@ pub struct GridSpec<Msg> {
 /// `cols` celdas y las apila. El contenedor recorta (`clip`) para que las
 /// celdas no sangren a vecinos cuando el caller subestima el área.
 pub fn grid_view<Msg: Clone + 'static>(spec: GridSpec<Msg>) -> View<Msg> {
+    grid_view_con(spec, None)
+}
+
+/// [`grid_view`] con **arrastre y soltado** por celda (mismo `RowDnd` que la
+/// lista: el índice es la posición de la celda dentro de `cells`). Con `dnd =
+/// None` es la grilla de siempre.
+pub fn grid_view_dnd<Msg: Clone + Send + Sync + 'static>(
+    spec: GridSpec<Msg>,
+    dnd: Option<llimphi_widget_list::RowDnd<Msg>>,
+) -> View<Msg> {
+    match dnd {
+        Some(d) => grid_view_con(
+            spec,
+            Some(&move |v, i, click| llimphi_widget_list::con_dnd(v, i, click, &d)),
+        ),
+        None => grid_view_con(spec, None),
+    }
+}
+
+fn grid_view_con<Msg: Clone + 'static>(
+    spec: GridSpec<Msg>,
+    deco: Option<llimphi_widget_list::FilaDeco<'_, Msg>>,
+) -> View<Msg> {
     let GridSpec {
         cells,
         cols,
@@ -215,12 +238,15 @@ pub fn grid_view<Msg: Clone + 'static>(spec: GridSpec<Msg>) -> View<Msg> {
 
     // Agrupar en filas de `cols`. La última fila puede quedar incompleta.
     let mut iter = cells.into_iter();
+    let mut base = 0usize;
     loop {
         let fila: Vec<GridCell<Msg>> = iter.by_ref().take(cols).collect();
         if fila.is_empty() {
             break;
         }
-        children.push(fila_view(fila, &metrics, &palette));
+        let n = fila.len();
+        children.push(fila_view(fila, base, &metrics, &palette, deco));
+        base += n;
     }
 
     if let Some(text) = truncated_hint {
@@ -252,12 +278,22 @@ pub fn grid_view<Msg: Clone + 'static>(spec: GridSpec<Msg>) -> View<Msg> {
 
 fn fila_view<Msg: Clone + 'static>(
     fila: Vec<GridCell<Msg>>,
+    base: usize,
     m: &GridMetrics,
     palette: &GridPalette,
+    deco: Option<llimphi_widget_list::FilaDeco<'_, Msg>>,
 ) -> View<Msg> {
     let celdas: Vec<View<Msg>> = fila
         .into_iter()
-        .map(|c| celda_view(c, m, palette))
+        .enumerate()
+        .map(|(k, c)| {
+            let click = c.on_click.clone();
+            let v = celda_view(c, m, palette);
+            match deco {
+                Some(f) => f(v, base + k, click),
+                None => v,
+            }
+        })
         .collect();
     View::new(Style {
         flex_direction: FlexDirection::Row,
diff --git a/widgets/hero/Cargo.toml b/widgets/hero/Cargo.toml
index 6b06895..e87ec11 100644
--- a/widgets/hero/Cargo.toml
+++ b/widgets/hero/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-hero — entrada dramática con curva de overshoot para elementos destacados (modal, dialog, página recién montada). NO es shared-element transition real (esa requiere un registry retenido en el runtime); es la firma cinética que Flutter Hero usa al aterrizar."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/hero/LEEME.md b/widgets/hero/LEEME.md
new file mode 100644
index 0000000..4a3e652
--- /dev/null
+++ b/widgets/hero/LEEME.md
@@ -0,0 +1,21 @@
+# llimphi-widget-hero
+
+*Read this in English: [README.md](README.md).*
+
+Shared-element transitions estilo Flutter Hero.
+
+El runtime de Llimphi tiene un `HeroRegistry`
+retenido entre frames: si la misma `key` aparece en un rect distinto entre
+dos frames consecutivos, el runtime interpola `transform` para que el nodo
+"vuele" del rect anterior al actual. Este widget es el envoltorio canónico
+que marca al `child` como hero con la `key` indicada — la app no necesita
+tocar `View::hero` a mano si compone con esto.
+
+Mantenemos las firmas previas (`hero_view`, `hero_quick`) para no romper
+callers. Antes envolvían sólo con `animated_inout` (fade); ahora componen
+`hero` + `animated_inout` para que un caller que reusa la misma `key` entre
+rutas obtenga el fly real **y** el fade de aterrizaje juntos.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/hero/README.md b/widgets/hero/README.md
new file mode 100644
index 0000000..f82f1c4
--- /dev/null
+++ b/widgets/hero/README.md
@@ -0,0 +1,19 @@
+# llimphi-widget-hero
+
+Shared-element transitions, Flutter-Hero style.
+
+The Llimphi runtime keeps a `HeroRegistry` retained between frames: if the same
+`key` appears in a different rect across two consecutive frames, the runtime
+interpolates `transform` so the node "flies" from the previous rect to the
+current one. This widget is the canonical wrapper that marks the `child` as a
+hero with the given `key` — an app composing with it never has to touch
+`View::hero` by hand.
+
+The previous signatures (`hero_view`, `hero_quick`) are kept so callers do not
+break. They used to wrap only with `animated_inout` (fade); now they compose
+`hero` + `animated_inout`, so a caller reusing the same `key` across routes gets
+the real fly **and** the landing fade together.
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/lazy-list/Cargo.toml b/widgets/lazy-list/Cargo.toml
new file mode 100644
index 0000000..f6bb6c5
--- /dev/null
+++ b/widgets/lazy-list/Cargo.toml
@@ -0,0 +1,13 @@
+[package]
+name = "llimphi-widget-lazy-list"
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+authors.workspace = true
+publish.workspace = true
+description = "llimphi-widget-lazy-list — lista perezosa llave-en-mano para Llimphi (Bloque 22 de PLAN-NUCLEO-RETENIDO.md): recibe un builder `item: Fn(usize)->View` + `total` y sólo construye la ventana visible + overscan. A diferencia de `list`/`grid` (el caller windowea a mano) o `scroll_y` (recibe el contenido ya construido), aquí el widget es dueño de la matemática de ventana y NUNCA materializa las filas fuera de pantalla. Extent fijo (O(1)) y variado (O(log n) sobre offsets precomputados). Compone la barra/física de `llimphi-widget-scroll`."
+
+[dependencies]
+llimphi-ui = { workspace = true }
+llimphi-theme = { workspace = true }
+llimphi-widget-scroll = { workspace = true }
diff --git a/widgets/lazy-list/LEEME.md b/widgets/lazy-list/LEEME.md
new file mode 100644
index 0000000..3885545
--- /dev/null
+++ b/widgets/lazy-list/LEEME.md
@@ -0,0 +1,52 @@
+# llimphi-widget-lazy-list
+
+*Read this in English: [README.md](README.md).*
+
+Lista **perezosa** llave-en-mano.
+
+Bloque 22 de `PLAN-NUCLEO-RETENIDO.md`. Ataca la Brecha #2 (scroll sin
+lazy): hoy `list`/`grid`/`table` **construyen todas las filas que se les
+pasan**, y `scroll_y` recibe el contenido **ya construido** — así, montar
+1M de filas mide ~4 s/frame porque el árbol entero se rearma cada cuadro
+(ver el baseline del Bloque 21).
+
+Este widget invierte el contrato: en vez de un `content: View` ya armado,
+recibe un **builder** `item: Fn(usize) -> View<Msg>` + `total`, y **sólo
+llama `item(i)` para la ventana visible + overscan**. Las filas fuera de
+pantalla no existen: no se construyen, no se montan, no se layoutean. El
+costo por frame pasa a ser ∝ *lo visible*, no ∝ *el total*.
+
+Fiel al bucle Elm, es **sin estado**: el `offset` (px) vive en el `Model`
+del caller, igual que en `llimphi_widget_scroll`, cuya barra/física
+(thumb, page-jump, fling, rubber-band) se reusa tal cual — este crate sólo
+agrega la **virtualización real** que faltaba.
+
+Dos modelos de extent:
+- `lazy_list_fixed` — filas de alto **uniforme** (`item_h`). Ventana O(1).
+  Cubre el 90% (logs, filas de tabla, file-lists).
+- `lazy_list_varied` — alto **por fila**, vía un arreglo de offsets
+  acumulados **precomputado por el caller** (`offsets[i]` = tope de la fila
+  `i` en coords de contenido; `offsets[total]` = alto total). Ventana
+  O(log n) por búsqueda binaria; el caller reconstruye `offsets` cuando
+  cambian los datos/alturas, **no** por frame.
+```ignore
+// view (item_h fijo):
+lazy_list_fixed(
+    model.rows.len(),          // total
+    28.0,                      // item_h
+    model.offset,              // offset px (en el Model)
+    panel_h,                   // viewport_h
+    DEFAULT_OVERSCAN,
+    |i| fila_view(&model.rows[i]),   // sólo se llama para lo visible
+    Msg::ScrollBy,                   // Fn(f32)->Msg, delta px
+    &ScrollPalette::default(),
+)
+// update:
+Msg::ScrollBy(d) => {
+    m.offset = clamp_offset(m.offset + d, m.rows.len() as f32 * 28.0, panel_h);
+}
+```
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/lazy-list/README.md b/widgets/lazy-list/README.md
new file mode 100644
index 0000000..2291288
--- /dev/null
+++ b/widgets/lazy-list/README.md
@@ -0,0 +1,51 @@
+# llimphi-widget-lazy-list
+
+A turnkey **lazy** list.
+
+It attacks the "scroll without laziness" gap: `list`/`grid`/`table` **build every
+row handed to them**, and `scroll_y` receives content **already built** — so
+mounting 1M rows measured ~4 s/frame, because the whole tree is rebuilt each
+frame.
+
+This widget inverts the contract: instead of a ready-made `content: View`, it
+takes a **builder** `item: Fn(usize) -> View<Msg>` plus `total`, and **only calls
+`item(i)` for the visible window + overscan**. Off-screen rows do not exist: not
+built, not mounted, not laid out. The per-frame cost becomes ∝ *what is visible*,
+not ∝ *the total*.
+
+True to the Elm loop it is **stateless**: the `offset` (px) lives in the caller's
+`Model`, just as in `llimphi_widget_scroll`, whose scrollbar and physics (thumb,
+page jump, fling, rubber band) are reused as-is — this crate only adds the **real
+virtualization** that was missing.
+
+Two extent models:
+
+- `lazy_list_fixed` — rows of **uniform** height (`item_h`). O(1) window. Covers
+  90% of cases (logs, table rows, file lists).
+- `lazy_list_varied` — **per-row** height, through an array of accumulated
+  offsets **precomputed by the caller** (`offsets[i]` = top of row `i` in content
+  coordinates; `offsets[total]` = total height). O(log n) window by binary
+  search; the caller rebuilds `offsets` when the data or the heights change,
+  **not** every frame.
+
+```ignore
+// view (fixed item_h):
+lazy_list_fixed(
+    model.rows.len(),          // total
+    28.0,                      // item_h
+    model.offset,              // offset px (in the Model)
+    panel_h,                   // viewport_h
+    DEFAULT_OVERSCAN,
+    |i| row_view(&model.rows[i]),    // only called for what is visible
+    Msg::ScrollBy,                   // Fn(f32)->Msg, delta px
+    &ScrollPalette::default(),
+)
+// update:
+Msg::ScrollBy(d) => {
+    m.offset = clamp_offset(m.offset + d, m.rows.len() as f32 * 28.0, panel_h);
+}
+```
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/lazy-list/examples/stress_lazy.rs b/widgets/lazy-list/examples/stress_lazy.rs
new file mode 100644
index 0000000..7a85017
--- /dev/null
+++ b/widgets/lazy-list/examples/stress_lazy.rs
@@ -0,0 +1,157 @@
+//! stress_lazy — contraparte de `llimphi-ui/examples/stress_grid` para el
+//! Bloque 22: una lista de N filas **a través de `lazy_list_fixed`**. Con el
+//! perfilador del Bloque 21 encendido, `n_nodos` y `mount/layout/paint µs`
+//! deben quedar **planos respecto a N** (sólo se monta la ventana visible),
+//! frente al crecimiento lineal de `stress_grid`.
+//!
+//! ```bash
+//! LLIMPHI_PERF=1 cargo run -p llimphi-widget-lazy-list --example stress_lazy --release -- --nodes 5000
+//! LLIMPHI_PERF=1 cargo run -p llimphi-widget-lazy-list --example stress_lazy --release -- --nodes 1000000
+//! ```
+//! Comparás las dos líneas `[llimphi-perf]`: casi idénticas ⇒ Brecha #2 cerrada.
+
+use llimphi_ui::llimphi_layout::taffy::prelude::{length, percent, FlexDirection, Size, Style};
+use llimphi_ui::llimphi_raster::peniko::Color;
+use llimphi_ui::{App, Handle, View};
+use llimphi_widget_lazy_list::{
+    clamp_offset, content_height, lazy_list_fixed, ScrollPalette, DEFAULT_OVERSCAN,
+};
+use std::time::Duration;
+
+const ITEM_H: f32 = 24.0;
+const VIEWPORT_H: f32 = 540.0;
+
+#[derive(Clone)]
+enum Msg {
+    ScrollBy(f32),
+    Auto,
+}
+
+struct Stress;
+
+struct Model {
+    total: usize,
+    offset: f32,
+    dir: f32,
+    frame: u64,
+    quit_after: u64,
+    palette: ScrollPalette,
+}
+
+/// Lee un flag `--<name> <valor>` numérico de la línea de comando.
+fn arg_u64(name: &str, default: u64) -> u64 {
+    let mut args = std::env::args();
+    while let Some(a) = args.next() {
+        if a == name {
+            if let Some(v) = args.next() {
+                if let Ok(n) = v.parse::<u64>() {
+                    return n;
+                }
+            }
+        }
+    }
+    default
+}
+
+impl App for Stress {
+    type Model = Model;
+    type Msg = Msg;
+
+    fn title() -> &'static str {
+        "llimphi · stress_lazy"
+    }
+
+    fn initial_size() -> (u32, u32) {
+        (720, VIEWPORT_H as u32)
+    }
+
+    fn init(handle: &Handle<Self::Msg>) -> Self::Model {
+        let total = arg_u64("--nodes", 5_000).max(1) as usize;
+        // Se cierra solo a los N frames (default 240 ≈ 4 reportes). `--frames 0`
+        // corre indefinido (cierras la ventana a mano).
+        let quit_after = arg_u64("--frames", 240);
+        // Auto-scroll: mueve la ventana sin parar → frames de camino completo
+        // Y ejercita el windowing (los índices visibles cambian cada frame).
+        handle.spawn_periodic(Duration::from_millis(16), || Msg::Auto);
+        eprintln!(
+            "[stress_lazy] filas={total} item_h={ITEM_H} — LLIMPHI_PERF=1; \
+             sale solo a los {quit_after} frames (--frames 0 = infinito)"
+        );
+        Model {
+            total,
+            offset: 0.0,
+            dir: 1.0,
+            frame: 0,
+            quit_after,
+            palette: ScrollPalette::default(),
+        }
+    }
+
+    fn update(mut model: Self::Model, msg: Self::Msg, handle: &Handle<Self::Msg>) -> Self::Model {
+        let content = content_height(model.total, ITEM_H);
+        match msg {
+            Msg::ScrollBy(d) => {
+                model.offset = clamp_offset(model.offset + d, content, VIEWPORT_H);
+            }
+            Msg::Auto => {
+                let max = (content - VIEWPORT_H).max(0.0);
+                model.offset += model.dir * 40.0;
+                if model.offset >= max {
+                    model.offset = max;
+                    model.dir = -1.0;
+                } else if model.offset <= 0.0 {
+                    model.offset = 0.0;
+                    model.dir = 1.0;
+                }
+                model.frame = model.frame.wrapping_add(1);
+                if model.quit_after != 0 && model.frame >= model.quit_after {
+                    handle.quit();
+                }
+            }
+        }
+        model
+    }
+
+    fn view(model: &Self::Model) -> View<Self::Msg> {
+        let list = lazy_list_fixed(
+            model.total,
+            ITEM_H,
+            model.offset,
+            VIEWPORT_H,
+            DEFAULT_OVERSCAN,
+            |i| {
+                let shade = if i % 2 == 0 { 28u8 } else { 22u8 };
+                View::new(Style {
+                    size: Size {
+                        width: percent(1.0_f32),
+                        height: length(ITEM_H),
+                    },
+                    ..Default::default()
+                })
+                .fill(Color::from_rgba8(shade, shade + 6, shade + 14, 255))
+                .text(
+                    format!("fila {i}"),
+                    14.0,
+                    Color::from_rgba8(210, 214, 222, 255),
+                )
+            },
+            Msg::ScrollBy,
+            &model.palette,
+        );
+
+        View::new(Style {
+            flex_direction: FlexDirection::Column,
+            size: Size {
+                width: percent(1.0_f32),
+                height: percent(1.0_f32),
+            },
+            ..Default::default()
+        })
+        .fill(Color::from_rgba8(14, 16, 22, 255))
+        .children(vec![list])
+    }
+}
+
+fn main() {
+    llimphi_ui::run::<Stress>();
+}
diff --git a/widgets/lazy-list/src/lib.rs b/widgets/lazy-list/src/lib.rs
new file mode 100644
index 0000000..00ed9e8
--- /dev/null
+++ b/widgets/lazy-list/src/lib.rs
@@ -0,0 +1,873 @@
+//! `llimphi-widget-lazy-list` — lista **perezosa** llave-en-mano.
+//!
+//! Bloque 22 de [`PLAN-NUCLEO-RETENIDO.md`]. Ataca la Brecha #2 (scroll sin
+//! lazy): hoy `list`/`grid`/`table` **construyen todas las filas que se les
+//! pasan**, y `scroll_y` recibe el contenido **ya construido** — así, montar
+//! 1M de filas mide ~4 s/frame porque el árbol entero se rearma cada cuadro
+//! (ver el baseline del Bloque 21).
+//!
+//! Este widget invierte el contrato: en vez de un `content: View` ya armado,
+//! recibe un **builder** `item: Fn(usize) -> View<Msg>` + `total`, y **sólo
+//! llama `item(i)` para la ventana visible + overscan**. Las filas fuera de
+//! pantalla no existen: no se construyen, no se montan, no se layoutean. El
+//! costo por frame pasa a ser ∝ *lo visible*, no ∝ *el total*.
+//!
+//! Fiel al bucle Elm, es **sin estado**: el `offset` (px) vive en el `Model`
+//! del caller, igual que en [`llimphi_widget_scroll`], cuya barra/física
+//! (thumb, page-jump, fling, rubber-band) se reusa tal cual — este crate sólo
+//! agrega la **virtualización real** que faltaba.
+//!
+//! Dos modelos de extent:
+//! - [`lazy_list_fixed`] — filas de alto **uniforme** (`item_h`). Ventana O(1).
+//!   Cubre el 90% (logs, filas de tabla, file-lists).
+//! - [`lazy_list_varied`] — alto **por fila**, vía un arreglo de offsets
+//!   acumulados **precomputado por el caller** (`offsets[i]` = tope de la fila
+//!   `i` en coords de contenido; `offsets[total]` = alto total). Ventana
+//!   O(log n) por búsqueda binaria; el caller reconstruye `offsets` cuando
+//!   cambian los datos/alturas, **no** por frame.
+//!
+//! ```ignore
+//! // view (item_h fijo):
+//! lazy_list_fixed(
+//!     model.rows.len(),          // total
+//!     28.0,                      // item_h
+//!     model.offset,              // offset px (en el Model)
+//!     panel_h,                   // viewport_h
+//!     DEFAULT_OVERSCAN,
+//!     |i| fila_view(&model.rows[i]),   // sólo se llama para lo visible
+//!     Msg::ScrollBy,                   // Fn(f32)->Msg, delta px
+//!     &ScrollPalette::default(),
+//! )
+//! // update:
+//! Msg::ScrollBy(d) => {
+//!     m.offset = clamp_offset(m.offset + d, m.rows.len() as f32 * 28.0, panel_h);
+//! }
+//! ```
+
+#![forbid(unsafe_code)]
+
+use std::sync::Arc;
+
+use llimphi_ui::llimphi_layout::taffy::prelude::{
+    auto, length, percent, FlexDirection, Position, Rect, Size, Style,
+};
+use llimphi_ui::{DragPhase, View};
+
+// Reexport de la física/barra/paleta: el caller usa un solo `use`.
+pub use llimphi_widget_scroll::{
+    approach, clamp_offset, fling_settled, fling_step, max_offset, rubber_band, scroll_take,
+    sticky_y, thumb_geometry, track_page_jump, ScrollPalette, FLING_FRICTION, FLING_STOP,
+};
+
+/// Filas extra a construir por encima y por debajo de la ventana estrictamente
+/// visible — amortiguan el "borde" al scrollear (una fila entra ya construida).
+pub const DEFAULT_OVERSCAN: usize = 3;
+
+/// Ventana de índices a materializar: `[first, first+count)`, con el tope de la
+/// primera fila en `y0` (coords de contenido). El resto del árbol no se
+/// construye.
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub struct Window {
+    pub first: usize,
+    pub count: usize,
+    pub y0: f32,
+}
+
+impl Window {
+    pub const EMPTY: Window = Window {
+        first: 0,
+        count: 0,
+        y0: 0.0,
+    };
+    /// Índice pasado el último (medio-abierto): `first + count`.
+    pub fn end(&self) -> usize {
+        self.first + self.count
+    }
+}
+
+/// Alto total del contenido con filas de alto uniforme.
+pub fn content_height(total: usize, item_h: f32) -> f32 {
+    total as f32 * item_h.max(0.0)
+}
+
+/// Ventana visible para filas de **alto uniforme**. O(1): matemática pura, sin
+/// tocar los datos. `overscan` filas de colchón a cada lado, acotadas a
+/// `[0, total)`.
+pub fn visible_window(
+    total: usize,
+    item_h: f32,
+    offset: f32,
+    viewport_h: f32,
+    overscan: usize,
+) -> Window {
+    if total == 0 || item_h <= 0.0 || viewport_h <= 0.0 {
+        return Window::EMPTY;
+    }
+    let off = offset.max(0.0);
+    let first_visible = (off / item_h).floor() as usize;
+    // Última fila cuyo tope cae antes del borde inferior del viewport.
+    let last_visible = ((off + viewport_h) / item_h).ceil() as usize;
+    // `last_visible` es exclusivo-ish (ceil); sumamos overscan y acotamos.
+    let last_excl = (last_visible + overscan).min(total);
+    // `first` acotado a `last_excl`: con offset más allá del contenido (el
+    // caller no clampeó), first_visible puede superar `total` — sin esto,
+    // `first` quedaría fuera de rango con `count == 0` y un `y0` disparatado.
+    let first = first_visible.saturating_sub(overscan).min(last_excl);
+    let count = last_excl - first;
+    Window {
+        first,
+        count,
+        y0: first as f32 * item_h,
+    }
+}
+
+/// Ventana visible para filas de **alto variado**, sobre `offsets` acumulados
+/// (`offsets[i]` = tope de la fila `i`; longitud `total + 1`, con
+/// `offsets[total]` = alto total). O(log n) por búsqueda binaria. `offsets`
+/// debe ser monótono no-decreciente y empezar en `0.0`.
+pub fn visible_window_varied(
+    offsets: &[f32],
+    offset: f32,
+    viewport_h: f32,
+    overscan: usize,
+) -> Window {
+    let total = offsets.len().saturating_sub(1);
+    if total == 0 || viewport_h <= 0.0 {
+        return Window::EMPTY;
+    }
+    let off = offset.max(0.0);
+    // Primera fila cuyo tope es <= offset: partition_point cuenta topes <= off.
+    let first_visible = offsets.partition_point(|&t| t <= off).saturating_sub(1);
+    // Primera fila cuyo tope es >= borde inferior → fin de lo visible.
+    let last_excl = offsets.partition_point(|&t| t < off + viewport_h);
+    let last_excl = (last_excl + overscan).min(total);
+    // Idem [`visible_window`]: acota `first` a `last_excl` para offset pasado.
+    let first = first_visible.saturating_sub(overscan).min(last_excl);
+    let count = last_excl - first;
+    Window {
+        first,
+        count,
+        y0: offsets[first.min(total)],
+    }
+}
+
+// ── Barra de scroll (reusa la geometría de `scroll`; ensambla el View aquí) ──
+
+fn scrollbar<Msg, F>(
+    offset: f32,
+    content_len: f32,
+    viewport_h: f32,
+    on_scroll: Arc<F>,
+    palette: &ScrollPalette,
+) -> Option<View<Msg>>
+where
+    Msg: Clone + 'static,
+    F: Fn(f32) -> Msg + Send + Sync + 'static,
+{
+    if max_offset(content_len, viewport_h) <= 0.0 {
+        return None;
+    }
+    let (thumb_h, thumb_y, offset_per_px) = thumb_geometry(offset, content_len, viewport_h);
+
+    let on_thumb = on_scroll.clone();
+    let thumb = View::new(Style {
+        position: Position::Absolute,
+        inset: Rect {
+            top: length(thumb_y),
+            right: length(0.0_f32),
+            left: auto(),
+            bottom: auto(),
+        },
+        size: Size {
+            width: length(palette.bar_width),
+            height: length(thumb_h),
+        },
+        ..Default::default()
+    })
+    .fill(
+        palette
+            .thumb
+            .multiply_alpha(palette.thumb_idle_alpha.clamp(0.0, 1.0)),
+    )
+    .hover_fill(palette.thumb_hover)
+    .radius((palette.bar_width * 0.5) as f64)
+    .draggable(move |phase, _dx, dy| match phase {
+        DragPhase::Move => Some((on_thumb)(dy * offset_per_px)),
+        DragPhase::End => None,
+    });
+
+    let on_track = on_scroll;
+    let track = View::new(Style {
+        position: Position::Absolute,
+        inset: Rect {
+            top: length(0.0_f32),
+            right: length(0.0_f32),
+            bottom: length(0.0_f32),
+            left: auto(),
+        },
+        size: Size {
+            width: length(palette.bar_width),
+            height: auto(),
+        },
+        ..Default::default()
+    })
+    .fill(palette.track)
+    .on_click_at(move |_lx, ly, _w, _h| {
+        let delta = track_page_jump(ly, thumb_y, thumb_h, viewport_h);
+        if delta != 0.0 {
+            Some((on_track)(delta))
+        } else {
+            None
+        }
+    })
+    .children(vec![thumb]);
+
+    Some(track)
+}
+
+fn viewport_wrap<Msg, F>(
+    inner: View<Msg>,
+    bar: Option<View<Msg>>,
+    offset: f32,
+    content_len: f32,
+    viewport_h: f32,
+    on_scroll: Arc<F>,
+    line_px: f32,
+) -> View<Msg>
+where
+    Msg: Clone + 'static,
+    F: Fn(f32) -> Msg + Send + Sync + 'static,
+{
+    let mut children = vec![inner];
+    if let Some(bar) = bar {
+        children.push(bar);
+    }
+    // Scroll anidado con reparto PARCIAL: consume hasta el tope y el sobrante
+    // (en líneas) sigue al ancestro scrollable en el mismo evento (idéntico a
+    // `scroll_y`). El eje x pasa entero (la lista es vertical).
+    let max_off = max_offset(content_len, viewport_h);
+    View::new(Style {
+        position: Position::Relative,
+        size: Size {
+            width: percent(1.0_f32),
+            height: length(viewport_h),
+        },
+        ..Default::default()
+    })
+    .clip(true)
+    .on_scroll_take(move |dx, dy| {
+        let (can, rest) = scroll_take(dy * line_px, offset, max_off);
+        let msg = (can.abs() > f32::EPSILON).then(|| (on_scroll)(can));
+        (msg, dx, rest / line_px)
+    })
+    .children(children)
+}
+
+/// Lista perezosa de filas de **alto uniforme**. Sólo se llama `item(i)` para
+/// los índices de la ventana visible + `overscan`; el resto no se construye.
+///
+/// - `total` — cantidad total de filas (puede ser millones).
+/// - `item_h` — alto de cada fila en px.
+/// - `offset` — desplazamiento actual (px, ya clampeado por el caller con
+///   [`clamp_offset`]).
+/// - `viewport_h` — alto visible.
+/// - `overscan` — filas de colchón a cada lado ([`DEFAULT_OVERSCAN`]).
+/// - `item(i)` — construye la fila `i`. Se envuelve en una caja de alto
+///   `item_h` para garantizar la alineación aunque la fila no se auto-dimensione.
+/// - `on_scroll(delta_px)` — delta a sumar al offset (rueda + arrastre de barra).
+pub fn lazy_list_fixed<Msg, I, F>(
+    total: usize,
+    item_h: f32,
+    offset: f32,
+    viewport_h: f32,
+    overscan: usize,
+    item: I,
+    on_scroll: F,
+    palette: &ScrollPalette,
+) -> View<Msg>
+where
+    Msg: Clone + 'static,
+    I: Fn(usize) -> View<Msg>,
+    F: Fn(f32) -> Msg + Send + Sync + 'static,
+{
+    let content_len = content_height(total, item_h);
+    let win = visible_window(total, item_h, offset, viewport_h, overscan);
+    let on_scroll = Arc::new(on_scroll);
+
+    let mut rows = Vec::with_capacity(win.count);
+    for k in 0..win.count {
+        let i = win.first + k;
+        rows.push(
+            View::new(Style {
+                size: Size {
+                    width: percent(1.0_f32),
+                    height: length(item_h),
+                },
+                flex_shrink: 0.0,
+                ..Default::default()
+            })
+            .children(vec![item(i)]),
+        );
+    }
+
+    let inner = View::new(Style {
+        position: Position::Absolute,
+        inset: Rect {
+            top: length(win.y0 - offset),
+            left: length(0.0_f32),
+            right: length(0.0_f32),
+            bottom: auto(),
+        },
+        flex_direction: FlexDirection::Column,
+        ..Default::default()
+    })
+    .children(rows);
+
+    let bar = scrollbar(offset, content_len, viewport_h, on_scroll.clone(), palette);
+    viewport_wrap(
+        inner,
+        bar,
+        offset,
+        content_len,
+        viewport_h,
+        on_scroll,
+        palette.line_px,
+    )
+}
+
+/// Lista perezosa de filas de **alto variado**, sobre `offsets` acumulados
+/// (longitud `total + 1`; `offsets[i]` = tope de la fila `i`, `offsets[total]`
+/// = alto total). El caller construye `offsets` cuando cambian los datos y lo
+/// mantiene en su Model — **no** se recomputa por frame. Sólo se llama
+/// `item(i)` para la ventana visible + `overscan`.
+pub fn lazy_list_varied<Msg, I, F>(
+    offsets: &[f32],
+    offset: f32,
+    viewport_h: f32,
+    overscan: usize,
+    item: I,
+    on_scroll: F,
+    palette: &ScrollPalette,
+) -> View<Msg>
+where
+    Msg: Clone + 'static,
+    I: Fn(usize) -> View<Msg>,
+    F: Fn(f32) -> Msg + Send + Sync + 'static,
+{
+    let total = offsets.len().saturating_sub(1);
+    let content_len = offsets.last().copied().unwrap_or(0.0);
+    let win = visible_window_varied(offsets, offset, viewport_h, overscan);
+    let on_scroll = Arc::new(on_scroll);
+
+    let mut rows = Vec::with_capacity(win.count);
+    for k in 0..win.count {
+        let i = win.first + k;
+        // Alto real de la fila desde los offsets (protege la alineación).
+        let h = (offsets[(i + 1).min(total)] - offsets[i.min(total)]).max(0.0);
+        rows.push(
+            View::new(Style {
+                size: Size {
+                    width: percent(1.0_f32),
+                    height: length(h),
+                },
+                flex_shrink: 0.0,
+                ..Default::default()
+            })
+            .children(vec![item(i)]),
+        );
+    }
+
+    let inner = View::new(Style {
+        position: Position::Absolute,
+        inset: Rect {
+            top: length(win.y0 - offset),
+            left: length(0.0_f32),
+            right: length(0.0_f32),
+            bottom: auto(),
+        },
+        flex_direction: FlexDirection::Column,
+        ..Default::default()
+    })
+    .children(rows);
+
+    let bar = scrollbar(offset, content_len, viewport_h, on_scroll.clone(), palette);
+    viewport_wrap(
+        inner,
+        bar,
+        offset,
+        content_len,
+        viewport_h,
+        on_scroll,
+        palette.line_px,
+    )
+}
+
+/// Construye los `offsets` acumulados para [`lazy_list_varied`] **midiendo** el
+/// alto real de cada ítem a `width` (vía `llimphi_ui::measured_height`, que
+/// layoutea el ítem con el shaping de texto real). Destraba las listas de alto
+/// **variado dependiente del contenido** (reflow) —como las páginas de un
+/// documento— que no se pueden precomputar a mano.
+///
+/// Es **O(total)**: construye y mide TODOS los ítems. Por eso el caller lo llama
+/// **cuando cambia el contenido/ancho**, cachea el `Vec<f32>` resultante en su
+/// Model, y por frame se lo pasa a [`lazy_list_varied`] (que sólo construye la
+/// ventana visible). Longitud del resultado: `total + 1` (`offsets[i]` = tope de
+/// la fila `i`; `offsets[total]` = alto total).
+///
+/// ```ignore
+/// // al cambiar el documento / el ancho del panel:
+/// model.offsets = item_offsets(paginas.len(), ancho, |i| pagina_view(&paginas[i]));
+/// // por frame:
+/// lazy_list_varied(&model.offsets, model.scroll, viewport_h, DEFAULT_OVERSCAN,
+///     |i| pagina_view(&paginas[i]), Msg::Scroll, &pal)
+/// ```
+pub fn item_offsets<Msg, I>(total: usize, width: f32, item: I) -> Vec<f32>
+where
+    Msg: Clone,
+    I: Fn(usize) -> View<Msg>,
+{
+    let mut offsets = Vec::with_capacity(total + 1);
+    offsets.push(0.0);
+    let mut acc = 0.0;
+    for i in 0..total {
+        acc += llimphi_ui::measured_height(item(i), width).max(0.0);
+        offsets.push(acc);
+    }
+    offsets
+}
+
+// ── Secciones con encabezado sticky (cierra el "llave-en-mano" del Tier 5) ──
+
+/// Unidad visible de una lista **seccionada**: encabezado o fila, con su tope
+/// `y` en coordenadas de contenido.
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub enum SectionUnit {
+    /// Encabezado de la sección `section`.
+    Header { section: usize, y: f32 },
+    /// Fila `row` (índice local) de la sección `section`.
+    Row { section: usize, row: usize, y: f32 },
+}
+
+/// Tope de cada sección + alto total del contenido. O(#secciones) — las
+/// secciones son pocas (letras, fechas, categorías); las filas pueden ser
+/// millones y NO se recorren.
+pub fn section_tops(rows_por_seccion: &[usize], item_h: f32, header_h: f32) -> (Vec<f32>, f32) {
+    let mut tops = Vec::with_capacity(rows_por_seccion.len());
+    let mut y = 0.0_f32;
+    for &n in rows_por_seccion {
+        tops.push(y);
+        y += header_h.max(0.0) + n as f32 * item_h.max(0.0);
+    }
+    (tops, y)
+}
+
+/// Unidades a materializar para el viewport `[offset, offset + viewport_h)`
+/// con `overscan` filas de colchón. O(#secciones + visibles): dentro de cada
+/// sección el rango de filas sale por aritmética de extent fijo, sin
+/// materializar offsets por fila.
+pub fn sections_window(
+    rows_por_seccion: &[usize],
+    item_h: f32,
+    header_h: f32,
+    offset: f32,
+    viewport_h: f32,
+    overscan: usize,
+) -> Vec<SectionUnit> {
+    let mut out = Vec::new();
+    if item_h <= 0.0 || viewport_h <= 0.0 {
+        return out;
+    }
+    let pad = overscan as f32 * item_h;
+    let lo = offset - pad;
+    let hi = offset + viewport_h + pad;
+    let mut top = 0.0_f32;
+    for (s, &n) in rows_por_seccion.iter().enumerate() {
+        let sec_h = header_h + n as f32 * item_h;
+        if top >= hi {
+            break;
+        }
+        if top + sec_h > lo {
+            // Encabezado en flujo (el pineado va aparte, ver sticky_section).
+            if top + header_h > lo {
+                out.push(SectionUnit::Header { section: s, y: top });
+            }
+            let rows_top = top + header_h;
+            if rows_top < hi && n > 0 {
+                let first = (((lo - rows_top) / item_h).floor().max(0.0)) as usize;
+                let last_excl = ((((hi - rows_top) / item_h).ceil()).max(0.0) as usize).min(n);
+                for r in first..last_excl {
+                    out.push(SectionUnit::Row { section: s, row: r, y: rows_top + r as f32 * item_h });
+                }
+            }
+        }
+        top += sec_h;
+    }
+    out
+}
+
+/// La sección **activa** (la que cruza el tope del viewport) y la `y` en
+/// coordenadas de viewport donde clavar su encabezado: pegado arriba mientras
+/// la sección dura, y **empujado hacia afuera** por la sección siguiente
+/// (clásico sticky de agenda/contactos). `None` sin secciones.
+pub fn sticky_section(
+    rows_por_seccion: &[usize],
+    item_h: f32,
+    header_h: f32,
+    offset: f32,
+) -> Option<(usize, f32)> {
+    if rows_por_seccion.is_empty() || item_h <= 0.0 {
+        return None;
+    }
+    let (tops, _total) = section_tops(rows_por_seccion, item_h, header_h);
+    let active = tops.partition_point(|&t| t <= offset.max(0.0)).saturating_sub(1);
+    let sec_h = header_h + rows_por_seccion[active] as f32 * item_h;
+    Some((active, sticky_y(offset, tops[active], sec_h, header_h)))
+}
+
+/// Lista perezosa **seccionada** con encabezado sticky llave-en-mano. Como
+/// [`lazy_list_fixed`] pero las filas van agrupadas en secciones con un
+/// encabezado de alto `header_h`; el de la sección activa queda **pineado**
+/// al tope del viewport y la sección siguiente lo empuja al salir. Sólo se
+/// construyen las unidades de la ventana visible + overscan.
+///
+/// - `rows_por_seccion` — filas de cada sección (el largo es #secciones).
+/// - `header(s)` — encabezado de la sección `s`. Pintale un fill opaco: el
+///   pineado se dibuja ENCIMA de las filas que pasan por debajo.
+/// - `item(s, r)` — fila `r` (índice local) de la sección `s`.
+///
+/// El encabezado activo se construye una sola vez (la copia pineada); su
+/// instancia en flujo se omite para no pintarlo doble.
+#[allow(clippy::too_many_arguments)]
+pub fn lazy_list_sections<Msg, H, I, F>(
+    rows_por_seccion: &[usize],
+    item_h: f32,
+    header_h: f32,
+    offset: f32,
+    viewport_h: f32,
+    overscan: usize,
+    header: H,
+    item: I,
+    on_scroll: F,
+    palette: &ScrollPalette,
+) -> View<Msg>
+where
+    Msg: Clone + 'static,
+    H: Fn(usize) -> View<Msg>,
+    I: Fn(usize, usize) -> View<Msg>,
+    F: Fn(f32) -> Msg + Send + Sync + 'static,
+{
+    let (_tops, content_len) = section_tops(rows_por_seccion, item_h, header_h);
+    let sticky = sticky_section(rows_por_seccion, item_h, header_h, offset);
+    let on_scroll = Arc::new(on_scroll);
+
+    let caja = |y_viewport: f32, h: f32, contenido: View<Msg>| -> View<Msg> {
+        View::new(Style {
+            position: Position::Absolute,
+            inset: Rect {
+                top: length(y_viewport),
+                left: length(0.0_f32),
+                right: length(0.0_f32),
+                bottom: auto(),
+            },
+            size: Size { width: auto(), height: length(h) },
+            ..Default::default()
+        })
+        .children(vec![contenido])
+    };
+
+    let mut kids: Vec<View<Msg>> = Vec::new();
+    for u in sections_window(rows_por_seccion, item_h, header_h, offset, viewport_h, overscan) {
+        match u {
+            SectionUnit::Header { section, y } => {
+                // El activo va pineado (abajo); omitir su copia en flujo.
+                if sticky.map(|(a, _)| a) != Some(section) {
+                    kids.push(caja(y - offset, header_h, header(section)));
+                }
+            }
+            SectionUnit::Row { section, row, y } => {
+                kids.push(caja(y - offset, item_h, item(section, row)));
+            }
+        }
+    }
+    // El pineado se agrega ÚLTIMO: pinta encima de las filas que le pasan
+    // por debajo.
+    if let Some((active, y)) = sticky {
+        kids.push(caja(y, header_h, header(active)));
+    }
+
+    let inner = View::new(Style {
+        position: Position::Relative,
+        size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+        ..Default::default()
+    })
+    .children(kids);
+
+    let bar = scrollbar(offset, content_len, viewport_h, on_scroll.clone(), palette);
+    viewport_wrap(inner, bar, offset, content_len, viewport_h, on_scroll, palette.line_px)
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use std::cell::Cell;
+
+    #[test]
+    fn item_offsets_mide_alturas_reales() {
+        use llimphi_ui::llimphi_layout::taffy::prelude::{auto, percent, Size, Style};
+        use llimphi_ui::llimphi_raster::peniko::Color;
+        // Ítems de texto: el del medio es largo → envuelve más alto a poco ancho.
+        let textos = [
+            "corto",
+            "palabra palabra palabra palabra palabra palabra palabra palabra",
+            "chico",
+        ];
+        let item = |i: usize| -> View<()> {
+            View::<()>::new(Style {
+                size: Size { width: percent(1.0_f32), height: auto() },
+                ..Default::default()
+            })
+            .text(textos[i].to_string(), 16.0, Color::WHITE)
+        };
+
+        let offs = item_offsets(3, 70.0, &item);
+        assert_eq!(offs.len(), 4);
+        assert_eq!(offs[0], 0.0);
+        // Monótono creciente (offsets acumulados).
+        assert!(offs[1] < offs[2] && offs[2] < offs[3], "offsets={offs:?}");
+        let (h0, h1, h2) = (offs[1] - offs[0], offs[2] - offs[1], offs[3] - offs[2]);
+        assert!(h0 > 0.0 && h1 > 0.0 && h2 > 0.0);
+        // El texto largo (1) envuelve a varias líneas → más alto que los cortos.
+        assert!(h1 > h0 && h1 > h2, "el largo envuelve más alto: h0={h0} h1={h1} h2={h2}");
+
+        // Más ancho ⇒ el largo envuelve menos ⇒ más bajo. Prueba que la medida
+        // depende del ancho (el punto de la altura medida).
+        let offs_ancho = item_offsets(3, 500.0, &item);
+        let h1_ancho = offs_ancho[2] - offs_ancho[1];
+        assert!(h1_ancho < h1, "más ancho = más bajo: {h1_ancho} < {h1}");
+    }
+
+    #[test]
+    fn ventana_fija_basica_y_topes() {
+        // 1000 filas de 20px, viewport 400 (20 visibles), overscan 0.
+        let w = visible_window(1000, 20.0, 0.0, 400.0, 0);
+        assert_eq!(w.first, 0);
+        assert_eq!(w.y0, 0.0);
+        // 20 visibles + 1 por el ceil del borde.
+        assert!(w.count >= 20 && w.count <= 21, "count={}", w.count);
+
+        // Scrolleado a la mitad: la ventana arranca en la fila correcta.
+        let w = visible_window(1000, 20.0, 5000.0, 400.0, 0);
+        assert_eq!(w.first, 250); // 5000/20
+        assert_eq!(w.y0, 5000.0);
+
+        // Al final: no se pasa de `total`.
+        let w = visible_window(1000, 20.0, 100_000.0, 400.0, 3);
+        assert_eq!(w.end().min(1000), w.end());
+        assert!(w.end() <= 1000);
+    }
+
+    #[test]
+    fn ventana_overscan_y_clamp_inferior() {
+        // Cerca del tope, el overscan no produce índices negativos.
+        let w = visible_window(1000, 20.0, 10.0, 400.0, 3);
+        assert_eq!(w.first, 0); // 0.saturating_sub(3)
+        // Con overscan la ventana es más ancha que lo estrictamente visible.
+        let sin = visible_window(1000, 20.0, 5000.0, 400.0, 0);
+        let con = visible_window(1000, 20.0, 5000.0, 400.0, 3);
+        assert!(con.count > sin.count);
+        assert_eq!(con.first, sin.first - 3);
+    }
+
+    #[test]
+    fn ventana_casos_degenerados() {
+        assert_eq!(visible_window(0, 20.0, 0.0, 400.0, 3), Window::EMPTY);
+        assert_eq!(visible_window(100, 0.0, 0.0, 400.0, 3), Window::EMPTY);
+        assert_eq!(visible_window(100, 20.0, 0.0, 0.0, 3), Window::EMPTY);
+    }
+
+    #[test]
+    fn ventana_variada_binaria() {
+        // 5 filas de alturas [10, 20, 30, 40, 50] → offsets acumulados.
+        let offsets = [0.0, 10.0, 30.0, 60.0, 100.0, 150.0];
+        // Viewport [25, 25+50=75): toca filas 1 (10..30), 2 (30..60), 3 (60..100).
+        let w = visible_window_varied(&offsets, 25.0, 50.0, 0);
+        assert_eq!(w.first, 1);
+        assert_eq!(w.y0, 10.0);
+        assert!(w.end() >= 4, "debe cubrir hasta la fila 3 inclusive: {w:?}");
+        // Total correcto y sin desbordar.
+        assert!(w.end() <= 5);
+    }
+
+    #[test]
+    fn solo_construye_la_ventana() {
+        // La prueba central del Bloque 22: con 1M de filas, `item` se llama
+        // SÓLO para la ventana visible, no para el total.
+        let total = 1_000_000usize;
+        let item_h = 20.0;
+        let viewport = 400.0;
+        let overscan = 3;
+        let calls = Cell::new(0usize);
+        let pal = ScrollPalette::default();
+        let _view: View<()> = lazy_list_fixed(
+            total,
+            item_h,
+            8000.0, // scrolleado bien adentro
+            viewport,
+            overscan,
+            |_i| {
+                calls.set(calls.get() + 1);
+                View::new(Style::default())
+            },
+            |_d| (),
+            &pal,
+        );
+        let win = visible_window(total, item_h, 8000.0, viewport, overscan);
+        // `item` se llamó exactamente `count` veces...
+        assert_eq!(calls.get(), win.count);
+        // ...y `count` es acotado (≈ visibles + 2·overscan), NO ~1M.
+        assert!(
+            calls.get() <= (viewport / item_h) as usize + 2 * overscan + 2,
+            "construyó {} filas (debería ser ~{})",
+            calls.get(),
+            (viewport / item_h) as usize + 2 * overscan
+        );
+        assert!(calls.get() < 40);
+    }
+
+    #[test]
+    fn variada_solo_construye_ventana() {
+        // Idem con extent variado sobre offsets precomputados.
+        let total = 100_000usize;
+        let offsets: Vec<f32> = (0..=total).map(|i| i as f32 * 15.0).collect();
+        let calls = Cell::new(0usize);
+        let pal = ScrollPalette::default();
+        let _v: View<()> = lazy_list_varied(
+            &offsets,
+            300_000.0,
+            600.0,
+            2,
+            |_i| {
+                calls.set(calls.get() + 1);
+                View::new(Style::default())
+            },
+            |_d| (),
+            &pal,
+        );
+        let win = visible_window_varied(&offsets, 300_000.0, 600.0, 2);
+        assert_eq!(calls.get(), win.count);
+        assert!(calls.get() < 60, "construyó {}", calls.get());
+    }
+
+    // ── Secciones + sticky ──
+
+    #[test]
+    fn section_tops_acumula_headers_y_filas() {
+        // 3 secciones de [2, 0, 5] filas, item 20, header 30.
+        let (tops, total) = section_tops(&[2, 0, 5], 20.0, 30.0);
+        assert_eq!(tops, vec![0.0, 70.0, 100.0]); // 30+40=70; +30+0=100
+        assert_eq!(total, 230.0); // 100 + 30 + 100
+    }
+
+    #[test]
+    fn sections_window_solo_lo_visible() {
+        // 2 secciones de 100 filas c/u, item 20, header 30. Viewport 100 en
+        // offset 0: header 0 + primeras filas de la sección 0, nada de la 1.
+        let rows = [100usize, 100];
+        let w = sections_window(&rows, 20.0, 30.0, 0.0, 100.0, 0);
+        assert!(matches!(w[0], SectionUnit::Header { section: 0, y } if y == 0.0));
+        let filas = w.iter().filter(|u| matches!(u, SectionUnit::Row { .. })).count();
+        // (100 - 30) / 20 = 3.5 → 4 filas tocadas.
+        assert_eq!(filas, 4);
+        assert!(!w.iter().any(|u| matches!(u, SectionUnit::Header { section: 1, .. })));
+
+        // Offset dentro de la sección 1: su header quedó arriba (fuera de la
+        // ventana en flujo) pero sus filas sí aparecen, con índice LOCAL.
+        let s1_top = 30.0 + 100.0 * 20.0; // 2030
+        let w = sections_window(&rows, 20.0, 30.0, s1_top + 500.0, 100.0, 0);
+        assert!(w.iter().all(|u| matches!(u, SectionUnit::Row { section: 1, .. })));
+        if let SectionUnit::Row { row, y, .. } = w[0] {
+            // (500 - 30) / 20 = 23.5 → primera fila tocada = 23.
+            assert_eq!(row, 23);
+            assert_eq!(y, s1_top + 30.0 + 23.0 * 20.0);
+        } else {
+            panic!("esperaba fila");
+        }
+    }
+
+    #[test]
+    fn sticky_pinea_y_la_siguiente_lo_empuja() {
+        // 2 secciones de 10 filas, item 20, header 30 → sección = 230 px.
+        let rows = [10usize, 10];
+        // En el medio de la sección 0: pineado en 0.
+        assert_eq!(sticky_section(&rows, 20.0, 30.0, 100.0), Some((0, 0.0)));
+        // Al inicio exacto: posición natural (0) — coincide con el flujo.
+        assert_eq!(sticky_section(&rows, 20.0, 30.0, 0.0), Some((0, 0.0)));
+        // A 10 px de terminar la sección 0 (bottom en viewport = 10 < header):
+        // el header sale empujado (y negativo).
+        let (s, y) = sticky_section(&rows, 20.0, 30.0, 220.0).unwrap();
+        assert_eq!(s, 0);
+        assert_eq!(y, -20.0); // 230-220-30
+        // Ya en la sección 1: pineado en 0 de nuevo.
+        assert_eq!(sticky_section(&rows, 20.0, 30.0, 300.0), Some((1, 0.0)));
+        // Degenerados.
+        assert_eq!(sticky_section(&[], 20.0, 30.0, 0.0), None);
+    }
+
+    #[test]
+    fn seccionada_solo_construye_la_ventana() {
+        // 10 secciones de 100k filas = 1M. Los builders se llaman SÓLO para
+        // la ventana + el header pineado, no para el total.
+        let rows = [100_000usize; 10];
+        let headers = Cell::new(0usize);
+        let items = Cell::new(0usize);
+        let pal = ScrollPalette::default();
+        let _v: View<()> = lazy_list_sections(
+            &rows,
+            20.0,
+            30.0,
+            5_000_000.0, // bien adentro
+            400.0,
+            3,
+            |_s| {
+                headers.set(headers.get() + 1);
+                View::new(Style::default())
+            },
+            |_s, _r| {
+                items.set(items.get() + 1);
+                View::new(Style::default())
+            },
+            |_d| (),
+            &pal,
+        );
+        // ~20 visibles + 2·3 overscan; el header activo se construye 1 vez.
+        assert!(items.get() < 40, "construyó {} filas", items.get());
+        assert_eq!(headers.get(), 1, "sólo el header pineado");
+    }
+
+    #[test]
+    fn seccionada_no_duplica_el_header_activo() {
+        // Viewport al inicio: el header de la sección 0 está en su posición
+        // natural — debe construirse UNA vez (la copia pineada) y aparecer
+        // también el de la sección 1 si entra en ventana.
+        let rows = [3usize, 3];
+        let headers = Cell::new(0usize);
+        let pal = ScrollPalette::default();
+        let _v: View<()> = lazy_list_sections(
+            &rows,
+            20.0,
+            30.0,
+            0.0,
+            400.0, // alcanza para ver ambas secciones (2·(30+60) = 180)
+            0,
+            |_s| {
+                headers.set(headers.get() + 1);
+                View::new(Style::default())
+            },
+            |_s, _r| View::new(Style::default()),
+            |_d| (),
+            &pal,
+        );
+        // Sección 0 pineada (1) + sección 1 en flujo (1) = 2 construcciones.
+        assert_eq!(headers.get(), 2);
+    }
+}
diff --git a/widgets/list/Cargo.toml b/widgets/list/Cargo.toml
index 51b9635..dbc9e97 100644
--- a/widgets/list/Cargo.toml
+++ b/widgets/list/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-list — lista vertical virtualizada para Llimphi: filas clicables, selección, caption opcional, recorte de overflow. El caller hace la virtualización (pasa sólo las filas visibles) y el widget las compone."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/list/examples/reorderable_list_demo.rs b/widgets/list/examples/reorderable_list_demo.rs
index 759f8c2..6abef0b 100644
--- a/widgets/list/examples/reorderable_list_demo.rs
+++ b/widgets/list/examples/reorderable_list_demo.rs
@@ -1,6 +1,6 @@
 //! Showcase de [`llimphi_widget_list::reorderable_list_view`] (Bloque
 //! 14 de PARIDAD-FLUTTER, primera variante de Tier 5 backlog). Una
-//! lista de tareas con drag-handle al borde izquierdo (`⋮⋮`); arrastrá
+//! lista de tareas con drag-handle al borde izquierdo (`⋮⋮`); arrastra
 //! una fila y soltala sobre otra para intercambiarlas. El destino se
 //! ilumina con `bg_drop_hover` mientras está bajo el cursor.
 //!
diff --git a/widgets/list/src/lib.rs b/widgets/list/src/lib.rs
index f33f8c1..11d624d 100644
--- a/widgets/list/src/lib.rs
+++ b/widgets/list/src/lib.rs
@@ -55,6 +55,9 @@ pub struct ListPalette {
     pub bg_selected: Color,
     pub fg_text: Color,
     pub fg_muted: Color,
+    /// Resalte de hover sobre una fila (feedback al pasar el cursor). Antes
+    /// las filas normales NO tenían hover (inconsistente con `tree`, que sí).
+    pub bg_hover: Color,
     /// Resalte de la fila destino mientras un drag de reorder pasa por
     /// encima. Sólo se usa en [`reorderable_list_view`]. Default = accent
     /// translúcido (40 %) sobre `bg_selected` — distinguible del hover y
@@ -81,6 +84,7 @@ impl ListPalette {
             bg_selected: t.bg_selected,
             fg_text: t.fg_text,
             fg_muted: t.fg_muted,
+            bg_hover: t.bg_row_hover,
             bg_drop_hover: drop,
         }
     }
@@ -189,12 +193,13 @@ pub fn list_view<Msg: Clone + 'static>(spec: ListSpec<Msg>) -> View<Msg> {
 }
 
 fn row_view<Msg: Clone + 'static>(row: ListRow<Msg>, height: f32, palette: &ListPalette) -> View<Msg> {
-    let bg = if row.selected {
+    let selected = row.selected;
+    let bg = if selected {
         palette.bg_selected
     } else {
         palette.bg_panel
     };
-    View::new(Style {
+    let mut v = View::new(Style {
         size: Size {
             width: percent(1.0_f32),
             height: length(height),
@@ -212,7 +217,203 @@ fn row_view<Msg: Clone + 'static>(row: ListRow<Msg>, height: f32, palette: &List
     .text_aligned(row.label, 12.0, palette.fg_text, Alignment::Start)
     // Labels largos terminan en `…` (single-line) en vez de cortarse seco.
     .ellipsis(1)
+    .on_click(row.on_click);
+    // Hover sólo en filas no seleccionadas (para no tapar el tinte de selección).
+    if !selected {
+        v = v.hover_fill(palette.bg_hover);
+    }
+    v
+}
+
+// =============================================================================
+//  Variante con ícono líder
+// =============================================================================
+
+/// Como [`ListRow`] pero con un **ícono vectorial** opcional al inicio de la
+/// fila. El ícono es un `View<Msg>` ya construido por el caller (p.ej. con
+/// `tullpu_icon_llimphi::spec_view`) — el widget no conoce tullpu ni el motor de
+/// íconos, sólo lo coloca y deja sitio. Pensado para listas de módulos/apps que
+/// quieren un emblema por fila sin caer en glifos de fuente.
+pub struct IconRow<Msg> {
+    pub icon: Option<View<Msg>>,
+    pub label: String,
+    pub selected: bool,
+    pub on_click: Msg,
+}
+
+/// Especificación de una lista con íconos líderes. Misma forma que [`ListSpec`].
+pub struct IconListSpec<Msg> {
+    pub rows: Vec<IconRow<Msg>>,
+    pub total: usize,
+    pub caption: Option<String>,
+    pub truncated_hint: Option<String>,
+    pub row_height: f32,
+    pub palette: ListPalette,
+}
+
+/// Compone una lista con un ícono opcional por fila. Equivalente a [`list_view`]
+/// pero cada fila es `[icono] etiqueta`. Aditivo: no afecta a [`list_view`].
+/// Arrastre y soltado **por fila**, aditivo sobre los widgets de lista/grilla:
+/// el widget sigue componiendo la fila igual, sólo le cuelga el drag/drop.
+///
+/// - `payload(i)` — el `u64` que viaja al arrastrar la fila `i`; `None` = fila
+///   no arrastrable.
+/// - `on_drop(i, payload)` — el `Msg` al soltar sobre la fila `i`; `None` = la
+///   fila no es destino (p. ej. un archivo: sólo las carpetas reciben).
+/// - `hover` — tinte de la fila mientras un arrastre la sobrevuela.
+///
+/// Ojo de diseño: una fila arrastrable emite su click por `on_click_at` (en el
+/// **press**), porque `draggable` a secas se come el `on_click`. Es la única
+/// combinación que el runtime deja coexistir (ver `draggable_at`).
+pub struct RowDnd<Msg> {
+    pub payload: Arc<dyn Fn(usize) -> Option<u64> + Send + Sync>,
+    pub on_drop: Arc<dyn Fn(usize, u64) -> Option<Msg> + Send + Sync>,
+    pub hover: Color,
+}
+
+impl<Msg> Clone for RowDnd<Msg> {
+    fn clone(&self) -> Self {
+        Self {
+            payload: self.payload.clone(),
+            on_drop: self.on_drop.clone(),
+            hover: self.hover,
+        }
+    }
+}
+
+/// Aplica a una fila ya compuesta el arrastre/soltado de `dnd` para el índice
+/// `i`. `click` es el `Msg` que la fila emitía por `on_click` — se re-emite por
+/// `on_click_at` cuando la fila pasa a ser arrastrable.
+pub fn con_dnd<Msg: Clone + Send + Sync + 'static>(
+    fila: View<Msg>,
+    i: usize,
+    click: Msg,
+    dnd: &RowDnd<Msg>,
+) -> View<Msg> {
+    let mut fila = fila;
+    if let Some(p) = (dnd.payload)(i) {
+        fila = fila
+            .draggable(move |_phase, _dx, _dy| None)
+            .drag_payload(p)
+            .on_click_at(move |_lx, _ly, _w, _h| Some(click.clone()));
+    }
+    let on_drop = dnd.on_drop.clone();
+    fila.on_drop(move |payload| (on_drop)(i, payload)).drop_hover_fill(dnd.hover)
+}
+
+pub fn icon_list_view<Msg: Clone + 'static>(spec: IconListSpec<Msg>) -> View<Msg> {
+    icon_list_view_con(spec, None)
+}
+
+/// [`icon_list_view`] con **arrastre y soltado** opcional por fila. Con `dnd =
+/// None` es exactamente la lista de siempre.
+///
+/// El `Send + Sync` extra lo pide el runtime para los handlers de drag/drop; la
+/// variante sin DnD conserva el bound histórico (`Clone`), así los callers
+/// genéricos que no arrastran nada no pagan el peaje.
+pub fn icon_list_view_dnd<Msg: Clone + Send + Sync + 'static>(
+    spec: IconListSpec<Msg>,
+    dnd: Option<RowDnd<Msg>>,
+) -> View<Msg> {
+    match dnd {
+        Some(d) => icon_list_view_con(spec, Some(&move |v, i, click| con_dnd(v, i, click, &d))),
+        None => icon_list_view_con(spec, None),
+    }
+}
+
+/// Decorador de fila: recibe la fila ya compuesta, su índice y el `Msg` que
+/// emitía por click, y devuelve la fila decorada. Es el punto de extensión que
+/// usa el DnD sin contagiar sus bounds al camino común.
+pub type FilaDeco<'a, Msg> = &'a dyn Fn(View<Msg>, usize, Msg) -> View<Msg>;
+
+fn icon_list_view_con<Msg: Clone + 'static>(
+    spec: IconListSpec<Msg>,
+    deco: Option<FilaDeco<'_, Msg>>,
+) -> View<Msg> {
+    let IconListSpec { rows, total: _, caption, truncated_hint, row_height, palette } = spec;
+    let mut children: Vec<View<Msg>> = Vec::with_capacity(rows.len() + 2);
+
+    if let Some(text) = caption {
+        children.push(
+            View::new(Style {
+                size: Size { width: percent(1.0_f32), height: length(20.0_f32) },
+                padding: Rect { left: length(10.0_f32), right: length(10.0_f32), top: length(0.0_f32), bottom: length(0.0_f32) },
+                align_items: Some(AlignItems::Center),
+                ..Default::default()
+            })
+            .text_aligned(text, 10.0, palette.fg_muted, Alignment::Start),
+        );
+    }
+
+    for (i, row) in rows.into_iter().enumerate() {
+        let click = row.on_click.clone();
+        let fila = icon_row_view(row, row_height, &palette);
+        children.push(match deco {
+            Some(f) => f(fila, i, click),
+            None => fila,
+        });
+    }
+
+    if let Some(text) = truncated_hint {
+        children.push(
+            View::new(Style {
+                size: Size { width: percent(1.0_f32), height: length(16.0_f32) },
+                padding: Rect { left: length(10.0_f32), right: length(10.0_f32), top: length(0.0_f32), bottom: length(0.0_f32) },
+                ..Default::default()
+            })
+            .text_aligned(text, 10.0, palette.fg_muted, Alignment::Start),
+        );
+    }
+
+    View::new(Style {
+        flex_direction: FlexDirection::Column,
+        size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+        padding: Rect { left: length(0.0_f32), right: length(0.0_f32), top: length(6.0_f32), bottom: length(6.0_f32) },
+        ..Default::default()
+    })
+    .fill(palette.bg_panel)
+    .clip(true)
+    .children(children)
+}
+
+fn icon_row_view<Msg: Clone + 'static>(row: IconRow<Msg>, height: f32, palette: &ListPalette) -> View<Msg> {
+    let selected = row.selected;
+    let bg = if selected { palette.bg_selected } else { palette.bg_panel };
+    let icon_px = (height * 0.66).min(20.0).max(12.0);
+
+    let label = View::new(Style {
+        size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+        align_items: Some(AlignItems::Center),
+        ..Default::default()
+    })
+    .text_aligned(row.label, 12.0, palette.fg_text, Alignment::Start)
+    .ellipsis(1);
+
+    let mut children: Vec<View<Msg>> = Vec::with_capacity(2);
+    if let Some(icon) = row.icon {
+        children.push(
+            View::new(Style {
+                size: Size { width: length(icon_px), height: length(icon_px) },
+                flex_shrink: 0.0,
+                ..Default::default()
+            })
+            .children(vec![icon]),
+        );
+    }
+    children.push(label);
+
+    View::new(Style {
+        flex_direction: FlexDirection::Row,
+        size: Size { width: percent(1.0_f32), height: length(height) },
+        padding: Rect { left: length(10.0_f32), right: length(10.0_f32), top: length(0.0_f32), bottom: length(0.0_f32) },
+        align_items: Some(AlignItems::Center),
+        gap: Size { width: length(8.0_f32), height: length(0.0_f32) },
+        ..Default::default()
+    })
+    .fill(bg)
+    .children(children)
     .on_click(row.on_click)
+    .hover_fill(if selected { palette.bg_selected } else { palette.bg_hover })
 }
 
 /// Función que el caller usa para reaccionar a un reorder. Recibe `(from,
@@ -394,3 +595,87 @@ where
     .drop_hover_fill(palette.bg_drop_hover)
     .children(vec![gripper, label])
 }
+
+/// Mueve la selección/foco con teclado (↑/↓) sobre una lista de `len`
+/// filas: índice siguiente **clampeado** a `[0, len-1]` (una lista no
+/// envuelve, a diferencia de tabs/segmented). `current == usize::MAX`
+/// (nada seleccionado) arranca por el extremo según la dirección. El host
+/// lo cablea en `update` y dispatcha su `Msg::Select(nuevo)`.
+pub fn step_visible(len: usize, current: usize, direction: i32) -> usize {
+    if len == 0 {
+        return 0;
+    }
+    let last = len - 1;
+    if current == usize::MAX {
+        return if direction >= 0 { 0 } else { last };
+    }
+    let next = current as i64 + direction as i64;
+    next.clamp(0, last as i64) as usize
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn step_visible_clampa_sin_envolver() {
+        assert_eq!(step_visible(5, 0, 1), 1);
+        assert_eq!(step_visible(5, 4, 1), 4); // tope, no envuelve
+        assert_eq!(step_visible(5, 0, -1), 0); // piso, no envuelve
+        assert_eq!(step_visible(5, 2, -1), 1);
+    }
+
+    #[test]
+    fn step_visible_arranca_desde_ninguno() {
+        assert_eq!(step_visible(5, usize::MAX, 1), 0);
+        assert_eq!(step_visible(5, usize::MAX, -1), 4);
+        assert_eq!(step_visible(0, usize::MAX, 1), 0);
+    }
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Multi-selección estilo file-manager (helpers puros, lado host)
+// ─────────────────────────────────────────────────────────────────────────
+
+/// Ctrl/Cmd-click: **alterna** `idx` en el conjunto de índices seleccionados
+/// (lo agrega si falta, lo quita si está). El host guarda su `Vec<usize>` de
+/// selección y lo muta con esto. Pura y testeable.
+pub fn toggle_selection(selected: &mut Vec<usize>, idx: usize) {
+    if let Some(pos) = selected.iter().position(|&i| i == idx) {
+        selected.remove(pos);
+    } else {
+        selected.push(idx);
+    }
+}
+
+/// Shift-click: rango inclusivo `[anchor, idx]` **ordenado** (funciona en
+/// cualquier dirección). El host reemplaza (o une) su selección con estos
+/// índices — `selection_range(a, b).collect::<Vec<_>>()`.
+pub fn selection_range(anchor: usize, idx: usize) -> std::ops::RangeInclusive<usize> {
+    if anchor <= idx {
+        anchor..=idx
+    } else {
+        idx..=anchor
+    }
+}
+
+#[cfg(test)]
+mod multiselect_tests {
+    use super::*;
+
+    #[test]
+    fn toggle_agrega_y_quita() {
+        let mut sel = vec![1usize, 3];
+        toggle_selection(&mut sel, 2);
+        assert!(sel.contains(&2));
+        toggle_selection(&mut sel, 1);
+        assert!(!sel.contains(&1)); // estaba → se quita
+    }
+
+    #[test]
+    fn range_ordena_en_cualquier_direccion() {
+        assert_eq!(selection_range(2, 5).collect::<Vec<_>>(), vec![2, 3, 4, 5]);
+        assert_eq!(selection_range(5, 2).collect::<Vec<_>>(), vec![2, 3, 4, 5]);
+        assert_eq!(selection_range(3, 3).collect::<Vec<_>>(), vec![3]);
+    }
+}
diff --git a/widgets/menubar/Cargo.toml b/widgets/menubar/Cargo.toml
index fc8d907..adebf16 100644
--- a/widgets/menubar/Cargo.toml
+++ b/widgets/menubar/Cargo.toml
@@ -5,12 +5,12 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-menubar — barra de menú principal in-window (Archivo/Editar/Ver/Ayuda) que cualquier app Llimphi monta a partir de un app_bus::AppMenu. menubar_view() pinta la fila de títulos; menubar_overlay() el dropdown (vía context-menu) para App::view_overlay. Decoplado del Surface del launcher: sirve dentro de la ventana de cada app."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
 llimphi-widget-button = { workspace = true }
 llimphi-widget-context-menu = { workspace = true }
-app-bus = { workspace = true }
+app-bus = { path = "../../shared/app-bus", version = "0.1.0" }
diff --git a/widgets/menubar/LEEME.md b/widgets/menubar/LEEME.md
new file mode 100644
index 0000000..2d99b1b
--- /dev/null
+++ b/widgets/menubar/LEEME.md
@@ -0,0 +1,28 @@
+# llimphi-widget-menubar
+
+*Read this in English: [README.md](README.md).*
+
+La barra de menú principal de una app.
+
+Toda app Llimphi declara un `app_bus::AppMenu` (Archivo / Editar /
+Ver / Ayuda …) y lo monta in-window con este widget. Es el gemelo de
+la barra global de `launcher_llimphi`, pero vive **dentro** de la
+ventana de la app — para las apps que corren standalone y no bajo el
+shell del launcher.
+
+Sin estado, al estilo Llimphi: el `Model` del host lleva qué menú raíz
+está abierto (`Option<usize>`); el widget aplana el `AppMenu` y emite
+`Msg` en cada interacción.
+
+Dos entradas:
+- `menubar_view` → la fila de títulos, para el tope de `App::view`.
+- `menubar_overlay` → el dropdown del menú abierto, para
+  `App::view_overlay` (devuelve `None` si no hay nada abierto).
+
+El `command` de cada ítem es el id que la app entiende (convención
+`menu.<verbo>`, ver `app_bus::AppMenu::standard`); el widget lo
+rebota por `on_command`.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/menubar/README.md b/widgets/menubar/README.md
new file mode 100644
index 0000000..3158550
--- /dev/null
+++ b/widgets/menubar/README.md
@@ -0,0 +1,26 @@
+# llimphi-widget-menubar
+
+An app's main menu bar.
+
+Every Llimphi app declares an `app_bus::AppMenu` (File / Edit / View / Help …)
+and mounts it in-window with this widget. It is the twin of `launcher_llimphi`'s
+global bar, but it lives **inside** the app's window — for apps that run
+standalone rather than under the launcher shell.
+
+Stateless, Llimphi style: the host's `Model` carries which root menu is open
+(`Option<usize>`); the widget flattens the `AppMenu` and emits a `Msg` on each
+interaction.
+
+Two entry points:
+
+- `menubar_view` → the row of titles, for the top of `App::view`.
+- `menubar_overlay` → the open menu's dropdown, for `App::view_overlay` (returns
+  `None` when nothing is open).
+
+Each item's `command` is the id the app understands (convention `menu.<verb>`,
+see `app_bus::AppMenu::standard`); the widget bounces it back through
+`on_command`.
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/menubar/src/lib.rs b/widgets/menubar/src/lib.rs
index abd178d..2c79d93 100644
--- a/widgets/menubar/src/lib.rs
+++ b/widgets/menubar/src/lib.rs
@@ -13,7 +13,7 @@
 //! Dos entradas:
 //! - [`menubar_view`] → la fila de títulos, para el tope de `App::view`.
 //! - [`menubar_overlay`] → el dropdown del menú abierto, para
-//!   `App::view_overlay` (devolvé `None` si no hay nada abierto).
+//!   `App::view_overlay` (devuelve `None` si no hay nada abierto).
 //!
 //! El `command` de cada ítem es el id que la app entiende (convención
 //! `menu.<verbo>`, ver [`app_bus::AppMenu::standard`]); el widget lo
@@ -292,10 +292,13 @@ fn title_style() -> Style {
     }
 }
 
-/// Ancho aproximado de un título — mismo criterio que `launcher-llimphi`
-/// para anclar el dropdown sin medir la fuente.
+/// Ancho real de un título de la barra, para anclar el dropdown bajo él.
+/// Mide los glifos con la fuente UI (el `button_styled` del título usa 13px)
+/// y suma el padding horizontal de `title_style` (10+10) más el gap de fila
+/// (2) — así el `x` del dropdown cae clavado bajo el título, sin el viejo
+/// `chars*8` monoespaciado que derivaba al acumular títulos anchos.
 fn approx_title_width(label: &str) -> f32 {
-    label.chars().count() as f32 * 8.0 + 22.0
+    llimphi_ui::llimphi_text::text_width(label, 13.0) + 20.0 + 2.0
 }
 
 #[cfg(test)]
diff --git a/widgets/modal/Cargo.toml b/widgets/modal/Cargo.toml
index b77ade4..28b10cc 100644
--- a/widgets/modal/Cargo.toml
+++ b/widgets/modal/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-modal — diálogo genérico (título + body arbitrario + botones primary/cancel/destructive) con scrim y centrado. Para menús contextuales usar llimphi-widget-context-menu."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/modal/LEEME.md b/widgets/modal/LEEME.md
new file mode 100644
index 0000000..04019af
--- /dev/null
+++ b/widgets/modal/LEEME.md
@@ -0,0 +1,24 @@
+# llimphi-widget-modal
+
+*Read this in English: [README.md](README.md).*
+
+Diálogo genérico centrado con scrim.
+
+Distinto del `context-menu` (chico, anclado a un click): el modal
+ocupa una región central de tamaño configurable, presenta un título,
+un cuerpo arbitrario (lo arma la app) y una barra de botones.
+
+Uso típico:
+1. La app guarda `Option<ModalState>` en su modelo.
+2. `view_overlay` devuelve `Some(modal_view(spec))` cuando hay
+   state, `None` cuando se cerró.
+3. La app captura `Esc` en `on_key` → cierra; `Enter` → primary.
+
+Tres severidades de botón:
+- `Primary` — verde/accent, acción principal.
+- `Cancel` — neutral, descarta.
+- `Destructive` — rojo, acción irreversible (eliminar, etc).
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/modal/README.md b/widgets/modal/README.md
new file mode 100644
index 0000000..5efc7f7
--- /dev/null
+++ b/widgets/modal/README.md
@@ -0,0 +1,24 @@
+# llimphi-widget-modal
+
+Generic centred dialog with a scrim.
+
+Different from the `context-menu` (small, anchored to a click): the modal takes a
+central region of configurable size, presents a title, an arbitrary body (built
+by the app) and a button bar.
+
+Typical use:
+
+1. The app keeps `Option<ModalState>` in its model.
+2. `view_overlay` returns `Some(modal_view(spec))` while there is state, `None`
+   once it is closed.
+3. The app captures `Esc` in `on_key` → close; `Enter` → primary.
+
+Three button severities:
+
+- `Primary` — green/accent, the main action.
+- `Cancel` — neutral, dismisses.
+- `Destructive` — red, irreversible action (delete, etc).
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/modal/src/lib.rs b/widgets/modal/src/lib.rs
index f58292d..4aa61ad 100644
--- a/widgets/modal/src/lib.rs
+++ b/widgets/modal/src/lib.rs
@@ -98,6 +98,20 @@ impl<Msg> ModalButton<Msg> {
     }
 }
 
+/// Scroll interno del cuerpo del modal, para contenido más alto que el panel.
+/// Sin esto, un `body` alto se recorta (el panel tiene `clip`). El caller
+/// guarda `offset` en su modelo y lo acumula con el delta de rueda; el widget
+/// **clampea** al alto disponible (conoce el área del cuerpo) — el caller sólo
+/// evita que baje de 0.
+pub struct ModalBodyScroll<Msg> {
+    /// Desplazamiento vertical actual (px, ≥ 0).
+    pub offset: f32,
+    /// Alto natural del contenido del `body` (px) — lo mide/estima el caller.
+    pub content_h: f32,
+    /// Rueda sobre el cuerpo → delta (px) a sumar al `offset`.
+    pub on_scroll: std::sync::Arc<dyn Fn(f32) -> Msg + Send + Sync>,
+}
+
 /// Spec completo del modal.
 pub struct ModalSpec<Msg: Clone + 'static> {
     pub title: String,
@@ -112,6 +126,19 @@ pub struct ModalSpec<Msg: Clone + 'static> {
     /// Esc en su `on_key`; este Msg es el del click).
     pub on_dismiss: Msg,
     pub palette: ModalPalette,
+    /// Scroll del cuerpo si el contenido excede el panel. `None` = sin scroll
+    /// (comportamiento previo: se recorta).
+    pub body_scroll: Option<ModalBodyScroll<Msg>>,
+}
+
+/// Px de scroll por «tick» de rueda en el cuerpo del modal.
+const BODY_WHEEL_LINE: f32 = 40.0;
+
+/// Alto disponible para el contenido del cuerpo dentro de un panel de alto `h`
+/// (descuenta título, botones, separador y el padding del cuerpo). Pública para
+/// que el caller estime cuánto entra sin scroll.
+pub fn body_viewport_height(h: f32) -> f32 {
+    (h - TITLE_H - BUTTONS_H - 1.0 - 2.0 * PAD).max(0.0)
 }
 
 const TITLE_H: f32 = 40.0;
@@ -129,6 +156,7 @@ pub fn modal_view<Msg: Clone + 'static>(spec: ModalSpec<Msg>) -> View<Msg> {
         viewport,
         on_dismiss,
         palette,
+        body_scroll,
     } = spec;
 
     let (w, h) = (
@@ -181,8 +209,33 @@ pub fn modal_view<Msg: Clone + 'static>(spec: ModalSpec<Msg>) -> View<Msg> {
             bottom: length(PAD),
         },
         ..Default::default()
-    })
-    .children(vec![body]);
+    });
+    let body_wrap = match body_scroll {
+        // Con scroll: recorta el área y desplaza el contenido -offset (clampeado
+        // al alto disponible). La rueda emite el delta para que el host acumule.
+        Some(bs) => {
+            let vp_h = body_viewport_height(h);
+            let max_off = (bs.content_h - vp_h).max(0.0);
+            let off = bs.offset.clamp(0.0, max_off);
+            let on_scroll = bs.on_scroll;
+            let inner = View::new(Style {
+                size: Size { width: percent(1.0_f32), height: auto() },
+                margin: Rect {
+                    left: length(0.0_f32),
+                    right: length(0.0_f32),
+                    top: length(-off),
+                    bottom: length(0.0_f32),
+                },
+                ..Default::default()
+            })
+            .children(vec![body]);
+            body_wrap
+                .clip(true)
+                .on_scroll(move |_dx, dy| Some((on_scroll)(dy * BODY_WHEEL_LINE)))
+                .children(vec![inner])
+        }
+        None => body_wrap.children(vec![body]),
+    };
 
     // Botones — flex-row justify-end con gap.
     let btn_children: Vec<View<Msg>> = buttons
@@ -301,7 +354,8 @@ fn button_view<Msg: Clone + 'static>(btn: ModalButton<Msg>, palette: &ModalPalet
     let label = btn.label.clone();
     View::new(Style {
         size: Size {
-            width: length(label.chars().count() as f32 * 7.5 + 28.0),
+            // Ancho por glifos reales (fuente proporcional), con mínimo cómodo.
+            width: length((llimphi_ui::llimphi_text::text_width(&label, BTN_FONT) + 28.0).max(64.0)),
             height: length(32.0_f32),
         },
         align_items: Some(AlignItems::Center),
@@ -334,3 +388,52 @@ fn brighten(c: Color, delta: f32) -> Color {
         a,
     ])
 }
+
+/// **Focus trap** para teclado: dado el nº de elementos enfocables del modal
+/// (típicamente los botones de la barra de acciones) y el índice actual,
+/// devuelve el siguiente al pulsar Tab (`forward = true`) o Shift+Tab
+/// (`false`), **ciclando** dentro del modal — el foco nunca escapa al fondo
+/// (esa era la fuga: sin trap, Tab llevaba a widgets detrás del scrim). El
+/// host guarda el índice enfocado y lo actualiza con esto. `current ==
+/// usize::MAX` (nada enfocado) arranca por el primero (Tab) o el último
+/// (Shift+Tab).
+pub fn trap_focus(len: usize, current: usize, forward: bool) -> usize {
+    if len == 0 {
+        return 0;
+    }
+    if current == usize::MAX {
+        return if forward { 0 } else { len - 1 };
+    }
+    let n = len as i64;
+    let dir = if forward { 1 } else { -1 };
+    (current as i64 + dir).rem_euclid(n) as usize
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn trap_focus_cicla_dentro_del_modal() {
+        assert_eq!(trap_focus(3, 0, true), 1);
+        assert_eq!(trap_focus(3, 2, true), 0); // Tab en el último → vuelve al primero
+        assert_eq!(trap_focus(3, 0, false), 2); // Shift+Tab en el primero → al último
+        assert_eq!(trap_focus(3, 1, false), 0);
+    }
+
+    #[test]
+    fn trap_focus_arranca_desde_ninguno() {
+        assert_eq!(trap_focus(3, usize::MAX, true), 0);
+        assert_eq!(trap_focus(3, usize::MAX, false), 2);
+        assert_eq!(trap_focus(0, usize::MAX, true), 0);
+    }
+
+    #[test]
+    fn body_viewport_descuenta_cromo_y_no_es_negativo() {
+        // Panel alto: el área del cuerpo es el alto menos título/botones/pads.
+        let vp = body_viewport_height(400.0);
+        assert!((vp - (400.0 - TITLE_H - BUTTONS_H - 1.0 - 2.0 * PAD)).abs() < 1e-3);
+        // Panel diminuto: nunca negativo.
+        assert_eq!(body_viewport_height(10.0), 0.0);
+    }
+}
diff --git a/widgets/navigator/Cargo.toml b/widgets/navigator/Cargo.toml
index 44afb58..5fb0606 100644
--- a/widgets/navigator/Cargo.toml
+++ b/widgets/navigator/Cargo.toml
@@ -5,14 +5,16 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-navigator — navegador data-agnóstico de nodos (Mónada/Dir/Archivo) en dos modos conmutables: árbol y grafo; click selecciona, right-click abre."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
 llimphi-widget-tree = { workspace = true }
 llimphi-widget-nodegraph = { workspace = true }
+llimphi-widget-context-menu = { workspace = true }
+grafo-nav = { workspace = true }
 
 [dev-dependencies]
-llimphi-widget-segmented = { path = "../segmented" }
+llimphi-widget-segmented = { workspace = true }
diff --git a/widgets/navigator/LEEME.md b/widgets/navigator/LEEME.md
new file mode 100644
index 0000000..11188b4
--- /dev/null
+++ b/widgets/navigator/LEEME.md
@@ -0,0 +1,35 @@
+# llimphi-widget-navigator
+
+*Read this in English: [README.md](README.md).*
+
+Navegador **data-agnóstico** de nodos en dos modos conmutables: **árbol** (`tree`) y **grafo** (`nodegraph`).
+
+Nació para que `pata` muestre las **Mónadas** de nouser y sus archivos
+en un sidebar, pero el widget no sabe de nouser: recibe un bosque de
+`NavNode`s (id opaco + label + `NavKind` + hijos) y emite `Msg`s al
+interactuar. El caller mapea cada `id` a lo suyo (un `MonadId`, un path)
+y decide qué hacer al seleccionar/abrir.
+
+Igual que el resto de widgets Llimphi, es **render-only y stateless**:
+el estado (qué nodos están expandidos, cuál está seleccionado, en qué
+modo está) vive en el `Model` del App; el widget sólo pinta y avisa.
+
+- **Árbol** — reusa `llimphi_widget_tree`. El navegador aplana el
+  bosque respetando `is_expanded`, dibuja un icono por `NavKind` entre
+  el chevron y el label, y cablea toggle / select / context por fila.
+- **Grafo** — reusa `llimphi_widget_nodegraph`. Coloca los nodos
+  visibles en columnas por profundidad, con cables de **contención**
+  (padre→hijo). El nodo seleccionado se resalta; arrastrar un nodo lo
+  selecciona; el right-click abre el menú contextual.
+```ignore
+navigator_view(
+    NavSpec { roots: &model.nodes, mode: model.mode,
+              selected: model.selected, palette, guides: true },
+    |id| model.expanded.contains(&id),
+    Msg::Toggle, Msg::Select, Some(Msg::Open),
+)
+```
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/navigator/README.md b/widgets/navigator/README.md
new file mode 100644
index 0000000..e7a315c
--- /dev/null
+++ b/widgets/navigator/README.md
@@ -0,0 +1,34 @@
+# llimphi-widget-navigator
+
+**Data-agnostic** node navigator in two switchable modes: **tree** (`tree`) and
+**graph** (`nodegraph`).
+
+It was born so `pata` could show nouser's **Monads** and their files in a
+sidebar, but the widget knows nothing about nouser: it receives a forest of
+`NavNode`s (opaque id + label + `NavKind` + children) and emits `Msg`s on
+interaction. The caller maps each `id` to whatever it means (a `MonadId`, a path)
+and decides what to do on select/open.
+
+Like the rest of the Llimphi widgets it is **render-only and stateless**: the
+state (which nodes are expanded, which one is selected, which mode it is in)
+lives in the App's `Model`; the widget only paints and notifies.
+
+- **Tree** — reuses `llimphi_widget_tree`. The navigator flattens the forest
+  honouring `is_expanded`, draws an icon per `NavKind` between the chevron and
+  the label, and wires toggle / select / context per row.
+- **Graph** — reuses `llimphi_widget_nodegraph`. It places the visible nodes in
+  columns by depth, with **containment** wires (parent→child). The selected node
+  is highlighted; dragging a node selects it; right-click opens the context menu.
+
+```ignore
+navigator_view(
+    NavSpec { roots: &model.nodes, mode: model.mode,
+              selected: model.selected, palette, guides: true },
+    |id| model.expanded.contains(&id),
+    Msg::Toggle, Msg::Select, Some(Msg::Open),
+)
+```
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/navigator/examples/navigator_demo.rs b/widgets/navigator/examples/navigator_demo.rs
index a5fb121..936efbc 100644
--- a/widgets/navigator/examples/navigator_demo.rs
+++ b/widgets/navigator/examples/navigator_demo.rs
@@ -1,9 +1,9 @@
 //! Showcase de `llimphi-widget-navigator`: un bosque de "Mónadas" con sus
 //! archivos, conmutable entre **árbol** y **grafo** con un control
 //! segmentado. Click selecciona; click en el chevron expande/colapsa;
-//! right-click "abre" (acá sólo registra el id en el header).
+//! right-click "abre" (aquí sólo registra el id en el header).
 //!
-//! Corré con:
+//! Corre con:
 //! `cargo run -p llimphi-widget-navigator --example navigator_demo --release`.
 
 use std::collections::HashSet;
diff --git a/widgets/navigator/src/lib.rs b/widgets/navigator/src/lib.rs
index bec3718..24c998c 100644
--- a/widgets/navigator/src/lib.rs
+++ b/widgets/navigator/src/lib.rs
@@ -30,6 +30,9 @@
 
 #![forbid(unsafe_code)]
 
+use std::collections::{HashMap, HashSet};
+use std::sync::Arc;
+
 use llimphi_ui::llimphi_layout::taffy::{
     prelude::{Size, Style},
     AlignItems, JustifyContent,
@@ -38,9 +41,15 @@ use llimphi_ui::llimphi_raster::peniko::Color;
 use llimphi_ui::{DragPhase, View};
 use llimphi_theme::Theme;
 use llimphi_widget_nodegraph::{
-    nodegraph_view_styled, NodeId, NodeSpec, NodeTint, NodegraphMetrics, NodegraphPalette, Wire,
+    cono_descendente, fit_to_view, layout_por_rango, nodegraph_view_styled, nodegraph_view_spec,
+    Camera, Edge, LayoutRango, NodeId, NodeSpec, NodeTint, NodegraphMetrics, NodegraphPalette,
+    NodegraphSpec, Wire,
 };
 use llimphi_widget_tree::{tree_view, TreePalette, TreeRow, TreeSpec};
+use llimphi_widget_context_menu::{
+    context_menu_view, ContextMenuItem, ContextMenuPalette, ContextMenuSpec,
+};
+use grafo_nav::{GrafoNavegable, Rol, Verbo};
 
 /// Identificador opaco de un nodo. El caller lo asigna y lo recibe de vuelta
 /// sin que el widget lo interprete (típicamente un índice a su propio mapa
@@ -490,6 +499,498 @@ fn kind_glyph(kind: NavKind) -> &'static str {
     }
 }
 
+// =====================================================================
+// Cockpit de DAG — grafo general (múltiples padres) + cámara navegable
+// =====================================================================
+
+/// Un nodo **plano** de un DAG general. A diferencia de [`NavNode`] (un árbol
+/// de contención, un solo padre), aquí la topología va aparte en `edges`, así un
+/// nodo puede tener **varios padres** (un merge de commits, un mensaje que
+/// responde a dos, una celda con dos dependencias). El id sigue siendo opaco.
+#[derive(Debug, Clone)]
+pub struct NavFlatNode {
+    pub id: NavId,
+    pub label: String,
+    pub kind: NavKind,
+}
+
+impl NavFlatNode {
+    pub fn new(id: NavId, label: impl Into<String>, kind: NavKind) -> Self {
+        Self { id, label: label.into(), kind }
+    }
+}
+
+/// Lo que el cockpit necesita para pintar un DAG general, sin los callbacks.
+pub struct NavDagSpec<'a> {
+    /// Los nodos del grafo (lista plana).
+    pub nodes: &'a [NavFlatNode],
+    /// Aristas dirigidas `(from, to)` por id. Ids ausentes se ignoran.
+    pub edges: &'a [(NavId, NavId)],
+    /// Cámara (pan/zoom). El caller la guarda en su `Model`; usar
+    /// [`llimphi_widget_nodegraph::fit_to_view`] para el encuadre inicial.
+    pub camera: Camera,
+    /// Nodo seleccionado: borde de acento + resaltado de su **cono descendente**
+    /// (lo que se toca al *cercenar*). `None` = ninguno.
+    pub selected: Option<NavId>,
+    /// Paleta.
+    pub palette: NavPalette,
+    /// `true` = layout apilado de arriba hacia abajo (rangos en Y), aristas
+    /// verticales; `false` = de izquierda a derecha. Autoequilibrado en ambos.
+    pub vertical: bool,
+    /// Overrides de posición `(id, x, y)` (canvas) para nodos **arrastrados a
+    /// mano**. Los ids presentes usan su posición dada; el resto cae al
+    /// auto-layout. Vacío = todo automático. Sembrar con [`grafo_posiciones`].
+    pub posiciones: &'a [(NavId, f32, f32)],
+    /// Fase 0..1 del flujo animado de las aristas. `0.0` = sin flujo. La app la
+    /// avanza con un tick (`Handle::spawn_periodic`).
+    pub flujo: f32,
+}
+
+/// Métricas del cockpit de DAG, compartidas por el render y el encuadre. Nodos
+/// algo anchos para las etiquetas y `wire_nearest_side` para que en un grafo de
+/// relaciones los cables enganchen por el lado que mira al otro nodo (no dan la
+/// vuelta).
+fn dag_metrics(vertical: bool) -> NodegraphMetrics {
+    NodegraphMetrics {
+        node_width: 168.0,
+        wire_nearest_side: true,
+        node_elevacion: 14.0,
+        vertical,
+        ..NodegraphMetrics::default()
+    }
+}
+
+// ── Color: variación de matiz por nodo/arista desde el acento ────────────────
+
+fn rgb_to_hsl(r: f32, g: f32, b: f32) -> (f32, f32, f32) {
+    let max = r.max(g).max(b);
+    let min = r.min(g).min(b);
+    let l = (max + min) * 0.5;
+    let d = max - min;
+    if d.abs() < 1e-6 {
+        return (0.0, 0.0, l);
+    }
+    let s = if l > 0.5 { d / (2.0 - max - min) } else { d / (max + min) };
+    let h = if max == r {
+        (g - b) / d + if g < b { 6.0 } else { 0.0 }
+    } else if max == g {
+        (b - r) / d + 2.0
+    } else {
+        (r - g) / d + 4.0
+    };
+    (h * 60.0, s, l)
+}
+
+fn hsl_to_rgb(h: f32, s: f32, l: f32) -> (f32, f32, f32) {
+    if s.abs() < 1e-6 {
+        return (l, l, l);
+    }
+    let q = if l < 0.5 { l * (1.0 + s) } else { l + s - l * s };
+    let p = 2.0 * l - q;
+    let hk = h / 360.0;
+    let tc = |mut t: f32| {
+        if t < 0.0 {
+            t += 1.0;
+        }
+        if t > 1.0 {
+            t -= 1.0;
+        }
+        if t < 1.0 / 6.0 {
+            p + (q - p) * 6.0 * t
+        } else if t < 0.5 {
+            q
+        } else if t < 2.0 / 3.0 {
+            p + (q - p) * (2.0 / 3.0 - t) * 6.0
+        } else {
+            p
+        }
+    };
+    (tc(hk + 1.0 / 3.0), tc(hk), tc(hk - 1.0 / 3.0))
+}
+
+/// Rota el matiz de `base` `deg` grados (HSL), conservando saturación, luz y
+/// alfa. Base de la variación de color por nodo/arista.
+fn hue_shift(base: Color, deg: f32) -> Color {
+    let [r, g, b, a] = base.components;
+    let (h, s, l) = rgb_to_hsl(r, g, b);
+    let (nr, ng, nb) = hsl_to_rgb((h + deg).rem_euclid(360.0), s, l);
+    Color { components: [nr, ng, nb, a], ..base }
+}
+
+/// Baja la saturación de `base` por `factor` (0..1). Para nodos apagados
+/// (stale/huérfano).
+fn desaturar(base: Color, factor: f32) -> Color {
+    let [r, g, b, a] = base.components;
+    let (h, s, l) = rgb_to_hsl(r, g, b);
+    let (nr, ng, nb) = hsl_to_rgb(h, s * factor, l);
+    Color { components: [nr, ng, nb, a], ..base }
+}
+
+/// Sube la luz de `base` por `amt` (aclara). Para resaltar el cono.
+fn aclarar(base: Color, amt: f32) -> Color {
+    let [r, g, b, a] = base.components;
+    let (h, s, l) = rgb_to_hsl(r, g, b);
+    let (nr, ng, nb) = hsl_to_rgb(h, s, (l + amt).clamp(0.0, 1.0));
+    Color { components: [nr, ng, nb, a], ..base }
+}
+
+/// El color del título de un nodo según su clase e índice: el nodo activo lleva
+/// el acento pleno, los apagados van desaturados, y los corrientes **varían su
+/// matiz** por índice (paso ~43° para separar hues vecinos).
+fn color_de_nodo(kind: NavKind, id: NodeId, accent: Color) -> Color {
+    match kind {
+        NavKind::Monad => accent,
+        NavKind::Other => desaturar(accent, 0.5),
+        _ => hue_shift(accent, (id as f32) * 43.0),
+    }
+}
+
+/// Mapea un [`GrafoNavegable`] a nodos planos + aristas del cockpit. Único punto
+/// de traducción trait→visor, así el render y el encuadre coinciden exactos.
+fn flat_from_grafo<G: GrafoNavegable>(grafo: &G) -> (Vec<NavFlatNode>, Vec<(NavId, NavId)>) {
+    let nodes = grafo
+        .nodos()
+        .into_iter()
+        .map(|n| NavFlatNode { id: n.id, label: n.etiqueta, kind: navkind_de_rol(n.rol) })
+        .collect();
+    let edges = grafo.aristas();
+    (nodes, edges)
+}
+
+/// Posiciona los nodos planos por rango topológico y devuelve los `NodeSpec`
+/// listos para pintar + las aristas en espacio de índices. Compartido por
+/// [`navigator_dag_view`] y [`grafo_fit_camera`] para que el encuadre calce con
+/// lo que se dibuja.
+fn dag_positioned_nodes(
+    nodes: &[NavFlatNode],
+    edges: &[(NavId, NavId)],
+    metrics: &NodegraphMetrics,
+    vertical: bool,
+    overrides: &[(NavId, f32, f32)],
+) -> (Vec<NodeSpec>, Vec<(NodeId, NodeId)>) {
+    let index: HashMap<NavId, NodeId> =
+        nodes.iter().enumerate().map(|(i, n)| (n.id, i as NodeId)).collect();
+    let edges_ii: Vec<(NodeId, NodeId)> = edges
+        .iter()
+        .filter_map(|(f, t)| Some((*index.get(f)?, *index.get(t)?)))
+        .collect();
+    let ids: Vec<NodeId> = (0..nodes.len() as NodeId).collect();
+    let pos = layout_por_rango(&ids, &edges_ii, metrics, LayoutRango { vertical, ..LayoutRango::default() });
+    let posmap: HashMap<NodeId, (f32, f32)> =
+        pos.iter().map(|p| (p.id, (p.x, p.y))).collect();
+    let mut specs: Vec<NodeSpec> = nodes
+        .iter()
+        .enumerate()
+        .map(|(i, n)| {
+            let (x, y) = posmap.get(&(i as NodeId)).copied().unwrap_or((0.0, 0.0));
+            NodeSpec {
+                id: i as NodeId,
+                label: format!("{} {}", kind_glyph(n.kind), n.label),
+                x,
+                y,
+                inputs: Vec::new(),
+                outputs: Vec::new(),
+            }
+        })
+        .collect();
+    // Overrides de drag manual: pisan la posición del auto-layout.
+    for &(navid, x, y) in overrides {
+        if let Some(&ci) = index.get(&navid) {
+            if let Some(s) = specs.get_mut(ci as usize) {
+                s.x = x;
+                s.y = y;
+            }
+        }
+    }
+    (specs, edges_ii)
+}
+
+/// Cámara que **encuadra** el grafo de un [`GrafoNavegable`] en un viewport dado,
+/// con el mismo layout que dibuja [`cockpit_grafo_view`]. Usar en el `init` de la
+/// app para que el DAG aparezca centrado y a escala en vez de arrancar en una
+/// esquina con la cámara identidad.
+pub fn grafo_fit_camera<G: GrafoNavegable>(
+    grafo: &G,
+    viewport_w: f32,
+    viewport_h: f32,
+    vertical: bool,
+) -> Camera {
+    let (nodes, edges) = flat_from_grafo(grafo);
+    let metrics = dag_metrics(vertical);
+    let (specs, _) = dag_positioned_nodes(&nodes, &edges, &metrics, vertical, &[]);
+    fit_to_view(&specs, &metrics, viewport_w, viewport_h)
+}
+
+/// Devuelve la posición `(id, x, y)` que el **auto-layout** asigna a cada nodo
+/// del grafo, en la orientación dada. Sirve para **sembrar** las posiciones
+/// iniciales de un cockpit con drag manual (`NavDagSpec::posiciones`): la app
+/// arranca con estas y luego actualiza la del nodo arrastrado.
+pub fn grafo_posiciones<G: GrafoNavegable>(grafo: &G, vertical: bool) -> Vec<(NavId, f32, f32)> {
+    let (nodes, edges) = flat_from_grafo(grafo);
+    let metrics = dag_metrics(vertical);
+    let (specs, _) = dag_positioned_nodes(&nodes, &edges, &metrics, vertical, &[]);
+    nodes
+        .iter()
+        .zip(specs.iter())
+        .map(|(n, s)| (n.id, s.x, s.y))
+        .collect()
+}
+
+/// Compone el **cockpit de DAG**: un grafo general navegable sobre
+/// [`nodegraph_view_spec`] (pan/zoom/selección reales), con auto-layout por
+/// rango topológico ([`layout_por_rango`]) y aristas simples ([`Edge`]) — sin
+/// pins dummy. Es el visor universal de DAGs; el caller mapea cada [`NavId`] a
+/// su dominio (un commit, un mensaje, una Mónada) y decide los verbos.
+///
+/// No sustituye a [`navigator_view`] (árbol ↔ grafo de contención); es la
+/// entrada para grafos con múltiples padres que aquél no puede expresar.
+///
+/// - `on_select(id)` — click en un nodo (o soltar su arrastre);
+/// - `on_context(id)` — right-click sobre el nodo (paleta de verbos); `None`;
+/// - `on_pan(phase, dx, dy)` — arrastre del fondo;
+/// - `on_zoom(dy)` — rueda (resolver con `zoom_step`/`zoom_at_center`).
+#[allow(clippy::too_many_arguments)]
+pub fn navigator_dag_view<Msg, FSel, FCtx, FMove, FPan, FZoom>(
+    spec: NavDagSpec,
+    on_select: FSel,
+    on_context: Option<FCtx>,
+    on_move: FMove,
+    on_pan: FPan,
+    on_zoom: FZoom,
+) -> View<Msg>
+where
+    Msg: Clone + Send + Sync + 'static,
+    FSel: Fn(NavId) -> Msg + Send + Sync + 'static,
+    FCtx: Fn(NavId) -> Msg + Send + Sync + 'static,
+    FMove: Fn(NavId, f32, f32) -> Option<Msg> + Send + Sync + 'static,
+    FPan: Fn(DragPhase, f32, f32) -> Option<Msg> + Send + Sync + 'static,
+    FZoom: Fn(f32) -> Option<Msg> + Send + Sync + 'static,
+{
+    let metrics = dag_metrics(spec.vertical);
+
+    // id de dominio → índice compacto (NodeId), y su inverso para los callbacks.
+    let index: HashMap<NavId, NodeId> = spec
+        .nodes
+        .iter()
+        .enumerate()
+        .map(|(i, n)| (n.id, i as NodeId))
+        .collect();
+    let nav_ids: Vec<NavId> = spec.nodes.iter().map(|n| n.id).collect();
+
+    // Nodos posicionados por rango topológico + aristas en espacio de índices
+    // (mismo helper que usa el encuadre, para que calcen).
+    let (nodes, edges_ii) =
+        dag_positioned_nodes(spec.nodes, spec.edges, &metrics, spec.vertical, spec.posiciones);
+    let edges: Vec<Edge> = edges_ii
+        .iter()
+        .map(|(f, t)| Edge { from_node: *f, to_node: *t })
+        .collect();
+
+    // Selección + cono descendente resaltado (previsualiza qué toca cercenar).
+    let sel_idx: Option<NodeId> = spec.selected.and_then(|s| index.get(&s).copied());
+    let cone: HashSet<NodeId> = match sel_idx {
+        Some(s) => cono_descendente(&edges_ii, s).into_iter().collect(),
+        None => HashSet::new(),
+    };
+    let accent = spec.palette.accent;
+
+    // Callbacks. `on_select` se comparte entre click-en-nodo y fin-de-arrastre.
+    let on_select: Arc<dyn Fn(NavId) -> Msg + Send + Sync> = Arc::new(on_select);
+
+    // Arrastre: el delta (ya en coords de canvas) va a `on_move`, y al soltar
+    // se selecciona. La app acumula la posición (sembrada con `grafo_posiciones`).
+    let move_h: Arc<dyn Fn(NavId, f32, f32) -> Option<Msg> + Send + Sync> = Arc::new(on_move);
+    let drag_ids = nav_ids.clone();
+    let sel_drag = on_select.clone();
+    let move_drag = move_h.clone();
+    let on_drag_node: Arc<
+        dyn Fn(NodeId, DragPhase, f32, f32) -> Option<Msg> + Send + Sync,
+    > = Arc::new(move |id, phase, dx, dy| {
+        let nid = *drag_ids.get(id as usize)?;
+        match phase {
+            DragPhase::Move => (move_drag)(nid, dx, dy),
+            DragPhase::End => Some((sel_drag)(nid)),
+        }
+    });
+
+    let on_connect: Arc<
+        dyn Fn(NodeId, u16, NodeId, u16) -> Option<Msg> + Send + Sync,
+    > = Arc::new(|_, _, _, _| None);
+
+    let sel_click = on_select.clone();
+    let click_ids = nav_ids.clone();
+    let on_select_node: Option<Arc<dyn Fn(NodeId) -> Option<Msg> + Send + Sync>> =
+        Some(Arc::new(move |id| {
+            click_ids.get(id as usize).map(|nid| (sel_click)(*nid))
+        }));
+
+    let on_right_click_node: Option<Arc<dyn Fn(NodeId) -> Option<Msg> + Send + Sync>> =
+        on_context.map(|f| {
+            let ctx_ids = nav_ids.clone();
+            Arc::new(move |id: NodeId| ctx_ids.get(id as usize).map(|nid| f(*nid)))
+                as Arc<dyn Fn(NodeId) -> Option<Msg> + Send + Sync>
+        });
+
+    // Estilo. Cada nodo lleva un color de título DERIVADO del acento y variado
+    // por su índice/clase; cada arista hereda el color de su nodo origen. El cono
+    // descendente de la selección se aclara (nodos) y va al acento (aristas) para
+    // previsualizar qué toca cercenar; el seleccionado lleva borde de acento.
+    let kinds: Vec<NavKind> = spec.nodes.iter().map(|n| n.kind).collect();
+    let kinds_nodo = kinds.clone();
+    let cone_nodes = cone.clone();
+    let node_tint = move |id: NodeId| -> Option<NodeTint> {
+        let kind = kinds_nodo.get(id as usize).copied().unwrap_or(NavKind::Other);
+        let mut title = color_de_nodo(kind, id, accent);
+        if cone_nodes.contains(&id) && Some(id) != sel_idx {
+            title = aclarar(title, 0.14);
+        }
+        Some(NodeTint { bg_title: Some(title), ..NodeTint::default() })
+    };
+    let selected_pred = move |id: NodeId| Some(id) == sel_idx;
+    let cone_edges = cone;
+    let kinds_edge = kinds;
+    let edge_tint = move |e: &Edge| -> Option<Color> {
+        if cone_edges.contains(&e.from_node) && cone_edges.contains(&e.to_node) {
+            return Some(accent);
+        }
+        let kind = kinds_edge.get(e.from_node as usize).copied().unwrap_or(NavKind::Group);
+        Some(color_de_nodo(kind, e.from_node, accent))
+    };
+
+    let palette = spec.palette.graph;
+    nodegraph_view_spec(NodegraphSpec {
+        nodes: &nodes,
+        wires: &[],
+        edges: &edges,
+        palette: &palette,
+        metrics: &metrics,
+        camera: spec.camera,
+        on_drag_node,
+        on_connect,
+        on_right_click_node,
+        node_tint: Some(&node_tint),
+        wire_tint: None,
+        edge_tint: Some(&edge_tint),
+        flujo: spec.flujo,
+        selected: Some(&selected_pred),
+        on_select_node,
+        on_canvas_click: None,
+        on_pan: Some(Arc::new(on_pan)),
+        on_zoom: Some(Arc::new(on_zoom)),
+    })
+}
+
+/// Traduce el [`Rol`] de dominio de un nodo a su icono en el cockpit. El rol es
+/// estructural/semántico (activo, stale, huérfano); aquí sólo elige el glifo.
+fn navkind_de_rol(rol: Rol) -> NavKind {
+    match rol {
+        Rol::Activo => NavKind::Monad,   // el nodo en foco: diamante de acento
+        Rol::Stale => NavKind::Other,    // desactualizado: punto tenue
+        Rol::Huerfano => NavKind::Other, // colgante: punto tenue
+        Rol::Normal => NavKind::Group,   // corriente: cuadrado
+    }
+}
+
+/// Pinta cualquier [`GrafoNavegable`] en el cockpit: mapea sus nodos/aristas a
+/// [`navigator_dag_view`] y traduce el [`Rol`] de cada nodo a su icono. Es la
+/// entrada única **dominio → visor universal** (F1): un adaptador de dominio
+/// implementa el trait y llama aquí, sin saber de layout ni de cámara. El caller
+/// arma su menú de verbos con `grafo.acciones(seleccion)` + [`grafo_nav::Verbo`]
+/// y lo dispara desde `on_context`.
+/// `vertical` elige la orientación del layout (apilado arriba→abajo vs.
+/// izquierda→derecha, autoequilibrado); combinar con
+/// [`grafo_fit_camera`] con el mismo flag para el encuadre inicial.
+/// `posiciones` son overrides de drag manual (sembrar con [`grafo_posiciones`],
+/// vacío = auto-layout); `on_move(id, dx, dy)` recibe el delta de arrastre en
+/// coords de canvas para que la app acumule la nueva posición del nodo.
+#[allow(clippy::too_many_arguments)]
+pub fn cockpit_grafo_view<'a, G, Msg, FSel, FCtx, FMove, FPan, FZoom>(
+    grafo: &G,
+    camera: Camera,
+    selected: Option<NavId>,
+    palette: NavPalette,
+    vertical: bool,
+    posiciones: &'a [(NavId, f32, f32)],
+    flujo: f32,
+    on_select: FSel,
+    on_context: Option<FCtx>,
+    on_move: FMove,
+    on_pan: FPan,
+    on_zoom: FZoom,
+) -> View<Msg>
+where
+    G: GrafoNavegable,
+    Msg: Clone + Send + Sync + 'static,
+    FSel: Fn(NavId) -> Msg + Send + Sync + 'static,
+    FCtx: Fn(NavId) -> Msg + Send + Sync + 'static,
+    FMove: Fn(NavId, f32, f32) -> Option<Msg> + Send + Sync + 'static,
+    FPan: Fn(DragPhase, f32, f32) -> Option<Msg> + Send + Sync + 'static,
+    FZoom: Fn(f32) -> Option<Msg> + Send + Sync + 'static,
+{
+    let (nodes, edges) = flat_from_grafo(grafo);
+    navigator_dag_view(
+        NavDagSpec { nodes: &nodes, edges: &edges, camera, selected, palette, vertical, posiciones, flujo },
+        on_select,
+        on_context,
+        on_move,
+        on_pan,
+        on_zoom,
+    )
+}
+
+/// Glifo del verbo para el menú contextual.
+fn glifo_verbo(v: Verbo) -> &'static str {
+    match v {
+        Verbo::Saltar => "→",
+        Verbo::Restablecer => "⟳",
+        Verbo::Cercenar => "✂",
+        Verbo::Conciliar => "⑃",
+    }
+}
+
+/// Construye el **menú de verbos** del cockpit a partir de los verbos que el
+/// dominio declara para la selección (`grafo.acciones(sel)`). Cada item despacha
+/// su [`Verbo`] vía `on_pick`; *Cercenar* se marca destructivo. Es la pieza que
+/// traduce el vocabulario compartido en UI: la app abre este menú al recibir el
+/// `on_context` del cockpit (con el ancla del cursor) y lo cierra con
+/// `on_dismiss`, sin que el cockpit conozca los `Msg` de cada dominio.
+pub fn menu_verbos_view<Msg, F>(
+    verbos: &[Verbo],
+    anchor: (f32, f32),
+    viewport: (f32, f32),
+    active: usize,
+    on_pick: F,
+    on_dismiss: Msg,
+    theme: &Theme,
+) -> View<Msg>
+where
+    Msg: Clone + Send + Sync + 'static,
+    F: Fn(Verbo) -> Msg + Send + Sync + 'static,
+{
+    let items: Vec<ContextMenuItem> = verbos
+        .iter()
+        .map(|v| {
+            let it = ContextMenuItem::action(v.etiqueta()).icon(glifo_verbo(*v));
+            if *v == Verbo::Cercenar {
+                it.destructive()
+            } else {
+                it
+            }
+        })
+        .collect();
+    let verbos_owned: Vec<Verbo> = verbos.to_vec();
+    context_menu_view(ContextMenuSpec {
+        anchor,
+        viewport,
+        header: None,
+        items,
+        active,
+        on_pick: std::sync::Arc::new(move |idx| on_pick(verbos_owned[idx])),
+        on_dismiss,
+        palette: ContextMenuPalette::from_theme(theme),
+    })
+}
+
 // =====================================================================
 // Icono vectorial por clase (para el árbol)
 // =====================================================================
@@ -602,6 +1103,144 @@ mod tests {
         assert_eq!(expanded[1].depth, 1);
     }
 
+    #[test]
+    fn dag_cockpit_construye_con_multiples_padres() {
+        // Un DAG con un merge (nodo 4 con dos padres) — imposible en NavNode.
+        let nodes = vec![
+            NavFlatNode::new(1, "raíz", NavKind::Monad),
+            NavFlatNode::new(2, "rama A", NavKind::Group),
+            NavFlatNode::new(3, "rama B", NavKind::Group),
+            NavFlatNode::new(4, "merge", NavKind::File),
+        ];
+        let edges = vec![(1u64, 2u64), (1, 3), (2, 4), (3, 4)];
+        let _v: View<Msg> = navigator_dag_view(
+            NavDagSpec {
+                nodes: &nodes,
+                edges: &edges,
+                camera: Camera::default(),
+                selected: Some(1),
+                palette: NavPalette::default(),
+                vertical: false,
+                posiciones: &[],
+                flujo: 0.0,
+            },
+            Msg::Select,
+            Some(Msg::Open),
+            |_id, _dx, _dy| None,
+            |_phase, _dx, _dy| None,
+            |_dy| None,
+        );
+    }
+
+    #[test]
+    fn color_por_nodo_varia_y_es_determinista() {
+        let accent = Color::from_rgba8(80, 140, 240, 255);
+        // Rotar 0° ≈ identidad.
+        let c0 = hue_shift(accent, 0.0);
+        for k in 0..4 {
+            assert!((c0.components[k] - accent.components[k]).abs() < 1e-3);
+        }
+        // Nodos corrientes distintos → colores distintos (varía el matiz).
+        let a = color_de_nodo(NavKind::Group, 1, accent);
+        let b = color_de_nodo(NavKind::Group, 2, accent);
+        assert!(a.components != b.components, "cada nodo varía su matiz");
+        // Determinista para el mismo índice.
+        assert_eq!(
+            color_de_nodo(NavKind::Group, 5, accent).components,
+            color_de_nodo(NavKind::Group, 5, accent).components
+        );
+        // El activo lleva el acento pleno.
+        assert_eq!(color_de_nodo(NavKind::Monad, 3, accent).components, accent.components);
+    }
+
+    #[test]
+    fn grafo_fit_camera_encuadra_y_clampa() {
+        use grafo_nav::{Nodo, NodoId, Verbo};
+        struct G;
+        impl GrafoNavegable for G {
+            fn nodos(&self) -> Vec<Nodo> {
+                (1..=5).map(|i| Nodo::new(i, "n", Rol::Normal)).collect()
+            }
+            fn aristas(&self) -> Vec<(NodoId, NodoId)> {
+                vec![(1, 2), (2, 3), (3, 4), (4, 5)]
+            }
+            fn acciones(&self, _: Option<NodoId>) -> Vec<Verbo> {
+                vec![Verbo::Saltar]
+            }
+        }
+        let cam = grafo_fit_camera(&G, 800.0, 600.0, false);
+        let cam_v = grafo_fit_camera(&G, 800.0, 600.0, true);
+        assert!(cam_v.zoom >= 0.25 && cam_v.zoom <= 4.0);
+        assert!(cam.zoom >= 0.25 && cam.zoom <= 4.0, "zoom clampeado");
+        // Cadena de 5 nodos anchos ⇒ hay que alejar para que quepa a lo ancho.
+        assert!(cam.zoom < 1.0, "encuadre reduce el zoom para caber");
+    }
+
+    #[test]
+    fn menu_de_verbos_se_construye_desde_las_acciones() {
+        use grafo_nav::Verbo;
+        // Los verbos vendrían de grafo.acciones(sel); aquí un set con Cercenar
+        // (destructivo) para ejercitar el mapeo completo.
+        let verbos = [Verbo::Saltar, Verbo::Restablecer, Verbo::Cercenar];
+        let _v: View<Msg> = menu_verbos_view(
+            &verbos,
+            (120.0, 80.0),
+            (800.0, 600.0),
+            usize::MAX,
+            |verbo| match verbo {
+                Verbo::Cercenar => Msg::Open(0),
+                _ => Msg::Select(0),
+            },
+            Msg::Toggle(0),
+            &Theme::dark(),
+        );
+        // Glifos definidos para los cuatro verbos.
+        for v in Verbo::TODOS {
+            assert!(!glifo_verbo(v).is_empty());
+        }
+    }
+
+    #[test]
+    fn cockpit_grafo_view_pinta_un_grafonavegable() {
+        use grafo_nav::{Nodo, NodoId, Verbo};
+        // Adaptador mínimo: diamante con merge (nodo 4, dos padres).
+        struct G;
+        impl GrafoNavegable for G {
+            fn nodos(&self) -> Vec<Nodo> {
+                vec![
+                    Nodo::new(1, "raíz", Rol::Normal),
+                    Nodo::new(2, "A", Rol::Normal),
+                    Nodo::new(3, "B", Rol::Stale),
+                    Nodo::new(4, "merge", Rol::Activo),
+                ]
+            }
+            fn aristas(&self) -> Vec<(NodoId, NodoId)> {
+                vec![(1, 2), (1, 3), (2, 4), (3, 4)]
+            }
+            fn acciones(&self, sel: Option<NodoId>) -> Vec<Verbo> {
+                if sel.is_some() { vec![Verbo::Saltar, Verbo::Cercenar] } else { vec![Verbo::Saltar] }
+            }
+        }
+        let g = G;
+        let _v: View<Msg> = cockpit_grafo_view(
+            &g,
+            Camera::default(),
+            Some(4),
+            NavPalette::default(),
+            true, // vertical
+            &[],  // sin overrides de posición
+            0.0,  // sin flujo
+            Msg::Select,
+            Some(Msg::Open),
+            |_id, _dx, _dy| None,
+            |_p, _dx, _dy| None,
+            |_dy| None,
+        );
+        // El trait deriva la estructura sin que el adaptador la calcule.
+        assert_eq!(g.raices(), vec![1]);
+        assert_eq!(g.cabezas(), vec![4]);
+    }
+
     #[test]
     fn navigator_view_construye_en_ambos_modos() {
         // No paniquea construyendo el View en cada modo (smoke).
diff --git a/widgets/nodegraph/Cargo.toml b/widgets/nodegraph/Cargo.toml
index 0a2ff96..aba6b4a 100644
--- a/widgets/nodegraph/Cargo.toml
+++ b/widgets/nodegraph/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-nodegraph — lienzo de nodos con pins y cables Bezier. Reusable por pluma (DAG), nakui (fórmulas yupay), tullpu (ajustes no destructivos), dominium (sistemas), takiy (cadena de audio)."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/nodegraph/examples/nodegraph_demo.rs b/widgets/nodegraph/examples/nodegraph_demo.rs
index a78117a..5f6a294 100644
--- a/widgets/nodegraph/examples/nodegraph_demo.rs
+++ b/widgets/nodegraph/examples/nodegraph_demo.rs
@@ -1,43 +1,46 @@
-//! Showcase de `llimphi-widget-nodegraph`. Cuatro nodos pre-conectados
-//! representando una cadena de audio (`Source → Filter → Mixer →
-//! Output`) y un `LFO` huérfano para que el usuario lo conecte
-//! arrastrando desde su pin de salida hasta el `mod` del filtro.
+//! Showcase de `llimphi-widget-nodegraph` como **editor navegable**:
+//! cadena de audio (`Source → Filter → Mixer → Output`) + un `LFO` suelto.
 //!
-//! - Arrastrá la title bar de cualquier nodo para moverlo.
-//! - Arrastrá desde un pin de salida (lado derecho) y soltá sobre un
-//!   pin de entrada (lado izquierdo) de otro nodo para conectar.
+//! - Arrastra la title bar de un nodo → lo mueve.
+//! - Arrastra desde un pin de salida (derecha) a uno de entrada (izquierda) →
+//!   conecta.
+//! - Arrastra el **fondo vacío** → paneo del lienzo.
+//! - **Rueda** → zoom (centrado en el viewport).
+//! - Click en el cuerpo de un nodo → lo selecciona (borde de acento). Click en
+//!   el fondo → deselecciona.
+//! - **Supr/Backspace** → borra el nodo seleccionado (y sus cables). **Esc** →
+//!   deselecciona.
 //!
-//! Corré con: `cargo run -p llimphi-widget-nodegraph --example
-//! nodegraph_demo --release`.
+//! Corre con: `cargo run -p llimphi-widget-nodegraph --example nodegraph_demo --release`.
+
+use std::sync::Arc;
 
 use llimphi_theme::Theme;
-use llimphi_ui::{App, DragPhase, Handle, View};
+use llimphi_ui::{App, DragPhase, Handle, Key, KeyEvent, KeyState, NamedKey, View};
 use llimphi_widget_nodegraph::{
-    nodegraph_view, NodeId, NodeSpec, NodegraphMetrics, NodegraphPalette, PinIdx, Wire,
+    nodegraph_view_spec, zoom_at_center, zoom_step, Camera, NodeId, NodeSpec, NodegraphMetrics,
+    NodegraphPalette, NodegraphSpec, PinIdx, Wire,
 };
 
+const VIEWPORT_W: f32 = 1100.0;
+const VIEWPORT_H: f32 = 720.0;
+
 #[derive(Clone)]
 enum Msg {
-    DragNode {
-        id: NodeId,
-        // El demo no diferencia Move/End; lo dejamos en el Msg por si
-        // un caller real quiere persistir layout solo en End.
-        #[allow(dead_code)]
-        phase: DragPhase,
-        dx: f32,
-        dy: f32,
-    },
-    Connect {
-        from_node: NodeId,
-        from_pin: PinIdx,
-        to_node: NodeId,
-        to_pin: PinIdx,
-    },
+    DragNode { id: NodeId, dx: f32, dy: f32 },
+    Connect { from_node: NodeId, from_pin: PinIdx, to_node: NodeId, to_pin: PinIdx },
+    Pan { dx: f32, dy: f32 },
+    Zoom(f32),
+    Select(NodeId),
+    Deselect,
+    DeleteSelected,
 }
 
 struct Model {
     nodes: Vec<NodeSpec>,
     wires: Vec<Wire>,
+    camera: Camera,
+    selected: Option<NodeId>,
 }
 
 const ID_SOURCE: NodeId = 1;
@@ -53,117 +56,80 @@ impl App for Showcase {
     type Msg = Msg;
 
     fn title() -> &'static str {
-        "llimphi · nodegraph showcase (drag títulos, arrastrá pin → pin)"
+        "llimphi · nodegraph editor (pan fondo · rueda zoom · click selecciona · Supr borra)"
     }
 
     fn initial_size() -> (u32, u32) {
-        (1100, 720)
+        (VIEWPORT_W as u32, VIEWPORT_H as u32)
     }
 
     fn init(_: &Handle<Msg>) -> Model {
         Model {
             nodes: vec![
-                NodeSpec {
-                    id: ID_SOURCE,
-                    label: "Source".into(),
-                    x: 60.0,
-                    y: 80.0,
-                    inputs: vec![],
-                    outputs: vec!["out".into()],
-                },
-                NodeSpec {
-                    id: ID_FILTER,
-                    label: "Filter".into(),
-                    x: 290.0,
-                    y: 80.0,
-                    inputs: vec!["in".into(), "mod".into()],
-                    outputs: vec!["out".into()],
-                },
-                NodeSpec {
-                    id: ID_MIXER,
-                    label: "Mixer".into(),
-                    x: 520.0,
-                    y: 80.0,
-                    inputs: vec!["a".into(), "b".into()],
-                    outputs: vec!["out".into()],
-                },
-                NodeSpec {
-                    id: ID_OUTPUT,
-                    label: "Output".into(),
-                    x: 750.0,
-                    y: 80.0,
-                    inputs: vec!["in".into()],
-                    outputs: vec![],
-                },
-                NodeSpec {
-                    id: ID_LFO,
-                    label: "LFO".into(),
-                    x: 290.0,
-                    y: 260.0,
-                    inputs: vec![],
-                    outputs: vec!["out".into()],
-                },
+                NodeSpec { id: ID_SOURCE, label: "Source".into(), x: 60.0, y: 80.0, inputs: vec![], outputs: vec!["out".into()] },
+                NodeSpec { id: ID_FILTER, label: "Filter".into(), x: 290.0, y: 80.0, inputs: vec!["in".into(), "mod".into()], outputs: vec!["out".into()] },
+                NodeSpec { id: ID_MIXER, label: "Mixer".into(), x: 520.0, y: 80.0, inputs: vec!["a".into(), "b".into()], outputs: vec!["out".into()] },
+                NodeSpec { id: ID_OUTPUT, label: "Output".into(), x: 750.0, y: 80.0, inputs: vec!["in".into()], outputs: vec![] },
+                NodeSpec { id: ID_LFO, label: "LFO".into(), x: 290.0, y: 260.0, inputs: vec![], outputs: vec!["out".into()] },
             ],
             wires: vec![
-                Wire {
-                    from_node: ID_SOURCE,
-                    from_output: 0,
-                    to_node: ID_FILTER,
-                    to_input: 0,
-                },
-                Wire {
-                    from_node: ID_FILTER,
-                    from_output: 0,
-                    to_node: ID_MIXER,
-                    to_input: 0,
-                },
-                Wire {
-                    from_node: ID_MIXER,
-                    from_output: 0,
-                    to_node: ID_OUTPUT,
-                    to_input: 0,
-                },
+                Wire { from_node: ID_SOURCE, from_output: 0, to_node: ID_FILTER, to_input: 0 },
+                Wire { from_node: ID_FILTER, from_output: 0, to_node: ID_MIXER, to_input: 0 },
+                Wire { from_node: ID_MIXER, from_output: 0, to_node: ID_OUTPUT, to_input: 0 },
             ],
+            camera: Camera::default(),
+            selected: None,
+        }
+    }
+
+    fn on_key(_model: &Model, event: &KeyEvent) -> Option<Msg> {
+        if event.state != KeyState::Pressed {
+            return None;
+        }
+        match &event.key {
+            Key::Named(NamedKey::Delete) | Key::Named(NamedKey::Backspace) => {
+                Some(Msg::DeleteSelected)
+            }
+            Key::Named(NamedKey::Escape) => Some(Msg::Deselect),
+            _ => None,
         }
     }
 
     fn update(model: Model, msg: Msg, _: &Handle<Msg>) -> Model {
         let mut m = model;
         match msg {
-            Msg::DragNode { id, phase: _, dx, dy } => {
+            Msg::DragNode { id, dx, dy } => {
                 if let Some(n) = m.nodes.iter_mut().find(|n| n.id == id) {
                     n.x += dx;
                     n.y += dy;
-                    if n.x < 0.0 {
-                        n.x = 0.0;
-                    }
-                    if n.y < 0.0 {
-                        n.y = 0.0;
-                    }
                 }
             }
-            Msg::Connect {
-                from_node,
-                from_pin,
-                to_node,
-                to_pin,
-            } => {
-                if from_node == to_node {
-                    return m;
+            Msg::Connect { from_node, from_pin, to_node, to_pin } => {
+                if from_node != to_node
+                    && !m.wires.iter().any(|w| {
+                        w.from_node == from_node
+                            && w.from_output == from_pin
+                            && w.to_node == to_node
+                            && w.to_input == to_pin
+                    })
+                {
+                    m.wires.push(Wire { from_node, from_output: from_pin, to_node, to_input: to_pin });
                 }
-                let exists = m.wires.iter().any(|w| {
-                    w.from_node == from_node
-                        && w.from_output == from_pin
-                        && w.to_node == to_node
-                        && w.to_input == to_pin
-                });
-                if !exists {
-                    m.wires.push(Wire {
-                        from_node,
-                        from_output: from_pin,
-                        to_node,
-                        to_input: to_pin,
-                    });
+            }
+            Msg::Pan { dx, dy } => {
+                m.camera.pan_x += dx;
+                m.camera.pan_y += dy;
+            }
+            Msg::Zoom(dy) => {
+                let nz = zoom_step(m.camera.zoom, dy);
+                m.camera = zoom_at_center(m.camera, nz, VIEWPORT_W, VIEWPORT_H);
+            }
+            Msg::Select(id) => m.selected = Some(id),
+            Msg::Deselect => m.selected = None,
+            Msg::DeleteSelected => {
+                if let Some(id) = m.selected.take() {
+                    m.nodes.retain(|n| n.id != id);
+                    m.wires.retain(|w| w.from_node != id && w.to_node != id);
                 }
             }
         }
@@ -174,21 +140,32 @@ impl App for Showcase {
         let theme = Theme::dark();
         let palette = NodegraphPalette::from_theme(&theme);
         let metrics = NodegraphMetrics::default();
-        nodegraph_view(
-            &model.nodes,
-            &model.wires,
-            &palette,
-            &metrics,
-            |id, phase, dx, dy| Some(Msg::DragNode { id, phase, dx, dy }),
-            |from_node, from_pin, to_node, to_pin| {
-                Some(Msg::Connect {
-                    from_node,
-                    from_pin,
-                    to_node,
-                    to_pin,
-                })
-            },
-        )
+        let selected = model.selected;
+        nodegraph_view_spec(NodegraphSpec {
+            nodes: &model.nodes,
+            wires: &model.wires,
+            edges: &[],
+            palette: &palette,
+            metrics: &metrics,
+            camera: model.camera,
+            on_drag_node: Arc::new(|id, _phase, dx, dy| Some(Msg::DragNode { id, dx, dy })),
+            on_connect: Arc::new(|from_node, from_pin, to_node, to_pin| {
+                Some(Msg::Connect { from_node, from_pin, to_node, to_pin })
+            }),
+            on_right_click_node: None,
+            node_tint: None,
+            wire_tint: None,
+            edge_tint: None,
+            flujo: 0.0,
+            selected: Some(&move |id| Some(id) == selected),
+            on_select_node: Some(Arc::new(|id| Some(Msg::Select(id)))),
+            on_canvas_click: Some(Msg::Deselect),
+            on_pan: Some(Arc::new(|phase, dx, dy| match phase {
+                DragPhase::Move => Some(Msg::Pan { dx, dy }),
+                DragPhase::End => None,
+            })),
+            on_zoom: Some(Arc::new(|dy| Some(Msg::Zoom(dy)))),
+        })
     }
 }
 
diff --git a/widgets/nodegraph/src/lib.rs b/widgets/nodegraph/src/lib.rs
index 7af7238..1acb3a5 100644
--- a/widgets/nodegraph/src/lib.rs
+++ b/widgets/nodegraph/src/lib.rs
@@ -29,6 +29,7 @@
 
 #![forbid(unsafe_code)]
 
+use std::collections::{HashMap, HashSet, VecDeque};
 use std::sync::Arc;
 
 use llimphi_ui::llimphi_layout::taffy::{
@@ -38,7 +39,7 @@ use llimphi_ui::llimphi_layout::taffy::{
 use llimphi_ui::llimphi_raster::kurbo::{Affine, BezPath, Stroke};
 use llimphi_ui::llimphi_raster::peniko::Color;
 use llimphi_ui::llimphi_text::Alignment;
-use llimphi_ui::{DragPhase, View};
+use llimphi_ui::{DragPhase, Shadow, View};
 
 /// Identificador opaco de un nodo. El caller asigna estos valores; el
 /// widget los pasa de vuelta sin interpretarlos.
@@ -73,6 +74,19 @@ pub struct Wire {
     pub to_input: PinIdx,
 }
 
+/// Arista **simple** nodo→nodo, sin pins. A diferencia de [`Wire`] (que engancha
+/// en puertos concretos de dataflow), una arista se ancla en el **centro
+/// vertical** de cada nodo y en el **borde horizontal más cercano** al otro
+/// nodo (como `wire_nearest_side`, pero sin depender de que existan pins). Es la
+/// forma de primera clase para grafos de relación / contención / DAG genérico
+/// donde los nodos no tienen puertos — antes había que fabricar pins dummy de
+/// string vacío (churay, navigator, anim-studio lo hacían así).
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub struct Edge {
+    pub from_node: NodeId,
+    pub to_node: NodeId,
+}
+
 /// Tinte opcional de un nodo resaltado. Cada campo `Some` sobrescribe
 /// el color correspondiente de la paleta global para *ese* nodo; los
 /// `None` heredan la paleta. Sirve para que el caller marque un subgrafo
@@ -133,6 +147,23 @@ pub struct NodegraphMetrics {
     pub title_text_size: f32,
     pub wire_stroke: f32,
     pub node_radius: f64,
+    /// Si `true`, cada cable **sale y entra por el lado más cercano** al otro
+    /// nodo (derecha→izquierda si el destino está a la derecha, izquierda→derecha
+    /// si está a la izquierda), en vez de siempre salida-derecha → entrada-
+    /// izquierda. Evita cables que dan la vuelta al nodo cuando el grafo no es
+    /// un DAG estricto de izquierda a derecha (p.ej. un grafo de relaciones).
+    /// Como cada nodo tiene un pin a cada lado, el cable engancha en un pin real
+    /// de ambos extremos. Default `false` (semántica direccional clásica).
+    pub wire_nearest_side: bool,
+    /// Elevación (blur de la sombra en px) de cada nodo sobre el fondo. `0.0`
+    /// (default) = sin sombra, para no cambiar el look de los consumidores
+    /// clásicos; el cockpit de DAG la enciende. Escala con el zoom.
+    pub node_elevacion: f32,
+    /// Si `true`, las **aristas simples** (`Edge`) se rutean verticalmente:
+    /// anclan en el borde superior/inferior de cada nodo con tangente vertical
+    /// (para un DAG apilado de arriba hacia abajo). `false` (default) = ruteo
+    /// horizontal clásico. No afecta a los cables con pin (`Wire`).
+    pub vertical: bool,
 }
 
 impl Default for NodegraphMetrics {
@@ -146,6 +177,9 @@ impl Default for NodegraphMetrics {
             title_text_size: 11.0,
             wire_stroke: 1.6,
             node_radius: 4.0,
+            wire_nearest_side: false,
+            node_elevacion: 0.0,
+            vertical: false,
         }
     }
 }
@@ -170,6 +204,268 @@ impl NodegraphMetrics {
     pub fn output_pin_y(&self, node_y: f32, pin: PinIdx) -> f32 {
         self.input_pin_y(node_y, pin)
     }
+
+    /// Escala todas las longitudes por `zoom` (para el render con cámara). Los
+    /// tamaños de fuente escalan también, así el zoom es real (no un stretch).
+    fn scaled(&self, zoom: f32) -> Self {
+        Self {
+            node_width: self.node_width * zoom,
+            title_height: self.title_height * zoom,
+            pin_row_height: self.pin_row_height * zoom,
+            pin_radius: self.pin_radius * zoom,
+            pin_label_size: self.pin_label_size * zoom,
+            title_text_size: self.title_text_size * zoom,
+            wire_stroke: self.wire_stroke * zoom,
+            node_radius: self.node_radius * zoom as f64,
+            wire_nearest_side: self.wire_nearest_side,
+            node_elevacion: self.node_elevacion * zoom,
+            vertical: self.vertical,
+        }
+    }
+}
+
+/// Cámara del lienzo: desplazamiento (pan) + escala (zoom). El caller la
+/// guarda en su `Model`; el widget transforma las coordenadas de canvas de
+/// cada nodo/cable a coordenadas de pantalla con `screen = canvas * zoom +
+/// pan`. `Default` = identidad (sin pan, zoom 1) → render idéntico al clásico.
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub struct Camera {
+    pub pan_x: f32,
+    pub pan_y: f32,
+    pub zoom: f32,
+}
+
+impl Default for Camera {
+    fn default() -> Self {
+        Self { pan_x: 0.0, pan_y: 0.0, zoom: 1.0 }
+    }
+}
+
+/// Zoom mínimo/máximo del lienzo.
+pub const ZOOM_MIN: f32 = 0.25;
+pub const ZOOM_MAX: f32 = 4.0;
+
+impl Camera {
+    /// Coordenada de pantalla de un punto de canvas.
+    pub fn apply(&self, x: f32, y: f32) -> (f32, f32) {
+        (x * self.zoom + self.pan_x, y * self.zoom + self.pan_y)
+    }
+
+    /// Coordenada de canvas de un punto de pantalla (inversa de [`apply`]).
+    pub fn invert(&self, sx: f32, sy: f32) -> (f32, f32) {
+        let z = self.zoom.max(f32::EPSILON);
+        ((sx - self.pan_x) / z, (sy - self.pan_y) / z)
+    }
+}
+
+/// Nuevo zoom tras un `delta` de rueda (típico `dy`), multiplicativo y
+/// clampeado a `[ZOOM_MIN, ZOOM_MAX]`. `delta > 0` acerca. Pura y testeable.
+pub fn zoom_step(zoom: f32, wheel_delta: f32) -> f32 {
+    // Factor exponencial suave: cada tick escala ~10 %.
+    let factor = (wheel_delta * 0.1).exp();
+    (zoom * factor).clamp(ZOOM_MIN, ZOOM_MAX)
+}
+
+/// Aplica un nuevo zoom manteniendo **fijo el centro del viewport** (el punto
+/// de canvas bajo el centro no se mueve en pantalla). Devuelve la cámara
+/// ajustada. El caller pasa el tamaño del viewport (que conoce de su layout),
+/// igual que el contrato del `scroll` widget. Sin esto, el zoom "escapa" hacia
+/// la esquina.
+pub fn zoom_at_center(cam: Camera, new_zoom: f32, viewport_w: f32, viewport_h: f32) -> Camera {
+    let new_zoom = new_zoom.clamp(ZOOM_MIN, ZOOM_MAX);
+    let (cx, cy) = (viewport_w * 0.5, viewport_h * 0.5);
+    // Punto de canvas actualmente bajo el centro.
+    let (canvas_cx, canvas_cy) = cam.invert(cx, cy);
+    // Reponer el pan para que ese mismo punto siga bajo el centro con el zoom nuevo.
+    Camera {
+        pan_x: cx - canvas_cx * new_zoom,
+        pan_y: cy - canvas_cy * new_zoom,
+        zoom: new_zoom,
+    }
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Navegación de DAGs — layout automático, encuadre y conos (puros, testeables)
+// ─────────────────────────────────────────────────────────────────────────
+
+/// Posición asignada por [`layout_por_rango`] a un nodo.
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub struct LayoutPos {
+    pub id: NodeId,
+    pub x: f32,
+    pub y: f32,
+}
+
+/// Opciones del layout por rango topológico.
+#[derive(Debug, Clone, Copy)]
+pub struct LayoutRango {
+    /// Margen desde el origen del lienzo.
+    pub margin: f32,
+    /// Separación horizontal extra entre columnas (rangos).
+    pub col_gap: f32,
+    /// Separación vertical entre filas dentro de un rango.
+    pub row_gap: f32,
+    /// Si `true`, los rangos apilan de **arriba hacia abajo** (eje principal Y) y
+    /// los nodos de un rango se reparten en X. `false` (default) = rangos de
+    /// izquierda a derecha. En ambos casos cada rango se **centra** respecto del
+    /// más poblado (autoequilibrado).
+    pub vertical: bool,
+}
+
+impl Default for LayoutRango {
+    fn default() -> Self {
+        Self { margin: 24.0, col_gap: 36.0, row_gap: 12.0, vertical: false }
+    }
+}
+
+/// Asigna posiciones a un DAG por **rango topológico**: la columna de un nodo =
+/// longitud del camino más largo desde una raíz (rank), la fila = su orden
+/// (estable) dentro del rango. `edges` son aristas dirigidas `(from, to)`. Es la
+/// única implementación de este layout — antes vivía atada a
+/// `pluma-notebook-graph`. Determinista y pura. Nodos en ciclo o inalcanzables
+/// caen al rango 0 (mejor esfuerzo, sin colgarse).
+pub fn layout_por_rango(
+    ids: &[NodeId],
+    edges: &[(NodeId, NodeId)],
+    metrics: &NodegraphMetrics,
+    opts: LayoutRango,
+) -> Vec<LayoutPos> {
+    let n = ids.len();
+    let index: HashMap<NodeId, usize> = ids.iter().enumerate().map(|(i, &id)| (id, i)).collect();
+
+    let mut adj: Vec<Vec<usize>> = vec![Vec::new(); n];
+    let mut indeg = vec![0usize; n];
+    for &(f, t) in edges {
+        if let (Some(&fi), Some(&ti)) = (index.get(&f), index.get(&t)) {
+            adj[fi].push(ti);
+            indeg[ti] += 1;
+        }
+    }
+
+    // Kahn + longest-path para el rank.
+    let mut rank = vec![0i32; n];
+    let mut remaining = indeg.clone();
+    let mut queue: VecDeque<usize> = (0..n).filter(|&i| indeg[i] == 0).collect();
+    while let Some(u) = queue.pop_front() {
+        for &v in &adj[u] {
+            if rank[u] + 1 > rank[v] {
+                rank[v] = rank[u] + 1;
+            }
+            remaining[v] -= 1;
+            if remaining[v] == 0 {
+                queue.push_back(v);
+            }
+        }
+    }
+
+    let max_rank = rank.iter().copied().max().unwrap_or(0);
+    let n_ranks = (max_rank + 1) as usize;
+
+    // Conteo por rango, para centrar cada rango respecto del más poblado.
+    let mut count = vec![0i32; n_ranks];
+    for &r in &rank {
+        count[r as usize] += 1;
+    }
+    let max_count = count.iter().copied().max().unwrap_or(1).max(1);
+
+    let node_h = metrics.node_height(1, 1);
+    // Eje principal = entre rangos; eje cruzado = entre nodos de un rango.
+    let (main_step, cross_step) = if opts.vertical {
+        (node_h + opts.row_gap, metrics.node_width + opts.col_gap)
+    } else {
+        (metrics.node_width + opts.col_gap, node_h + opts.row_gap)
+    };
+
+    let mut row_in_rank = vec![0i32; n_ranks];
+    let mut out = Vec::with_capacity(n);
+    for (i, &id) in ids.iter().enumerate() {
+        let r = rank[i] as usize;
+        let row = row_in_rank[r];
+        row_in_rank[r] += 1;
+        // Autoequilibrado: media diferencia de población respecto del rango mayor.
+        let cross_offset = (max_count - count[r]) as f32 * cross_step * 0.5;
+        let main = opts.margin + rank[i] as f32 * main_step;
+        let cross = opts.margin + cross_offset + row as f32 * cross_step;
+        let (x, y) = if opts.vertical { (cross, main) } else { (main, cross) };
+        out.push(LayoutPos { id, x, y });
+    }
+    out
+}
+
+/// Cámara que **encuadra** todos los nodos en un viewport dado, con un pequeño
+/// margen relativo. Sin nodos → [`Camera::default`]. El zoom se clampa a
+/// `[ZOOM_MIN, ZOOM_MAX]`. Pura; base del botón "encuadrar" y del arranque
+/// centrado. Espeja el contrato de [`zoom_at_center`] (el caller pasa el tamaño
+/// del viewport que conoce de su layout).
+pub fn fit_to_view(
+    nodes: &[NodeSpec],
+    metrics: &NodegraphMetrics,
+    viewport_w: f32,
+    viewport_h: f32,
+) -> Camera {
+    if nodes.is_empty() || viewport_w <= 0.0 || viewport_h <= 0.0 {
+        return Camera::default();
+    }
+    let mut min_x = f32::INFINITY;
+    let mut min_y = f32::INFINITY;
+    let mut max_x = f32::NEG_INFINITY;
+    let mut max_y = f32::NEG_INFINITY;
+    for n in nodes {
+        let h = metrics.node_height(n.inputs.len(), n.outputs.len());
+        min_x = min_x.min(n.x);
+        min_y = min_y.min(n.y);
+        max_x = max_x.max(n.x + metrics.node_width);
+        max_y = max_y.max(n.y + h);
+    }
+    let content_w = (max_x - min_x).max(1.0);
+    let content_h = (max_y - min_y).max(1.0);
+    // 0.9 deja un respiro alrededor del contenido.
+    let zoom = ((viewport_w / content_w).min(viewport_h / content_h) * 0.9)
+        .clamp(ZOOM_MIN, ZOOM_MAX);
+    let content_cx = (min_x + max_x) * 0.5;
+    let content_cy = (min_y + max_y) * 0.5;
+    Camera {
+        pan_x: viewport_w * 0.5 - content_cx * zoom,
+        pan_y: viewport_h * 0.5 - content_cy * zoom,
+        zoom,
+    }
+}
+
+/// Nodos **aguas-arriba** de `id` (sus ancestros por `edges` dirigidas
+/// `(from, to)`), incluyendo `id`. Ordenado y sin duplicados. Sirve para
+/// resaltar qué toca *cercenar* o *conciliar* antes de confirmar.
+pub fn cono_ascendente(edges: &[(NodeId, NodeId)], id: NodeId) -> Vec<NodeId> {
+    let mut visited: HashSet<NodeId> = HashSet::new();
+    visited.insert(id);
+    let mut stack = vec![id];
+    while let Some(cur) = stack.pop() {
+        for &(f, t) in edges {
+            if t == cur && visited.insert(f) {
+                stack.push(f);
+            }
+        }
+    }
+    let mut out: Vec<NodeId> = visited.into_iter().collect();
+    out.sort_unstable();
+    out
+}
+
+/// Nodos **aguas-abajo** de `id` (sus descendientes por `edges`), incluyendo
+/// `id`. Ordenado y sin duplicados.
+pub fn cono_descendente(edges: &[(NodeId, NodeId)], id: NodeId) -> Vec<NodeId> {
+    let mut visited: HashSet<NodeId> = HashSet::new();
+    visited.insert(id);
+    let mut stack = vec![id];
+    while let Some(cur) = stack.pop() {
+        for &(f, t) in edges {
+            if f == cur && visited.insert(t) {
+                stack.push(t);
+            }
+        }
+    }
+    let mut out: Vec<NodeId> = visited.into_iter().collect();
+    out.sort_unstable();
+    out
 }
 
 type DragNodeFn<Msg> =
@@ -295,7 +591,7 @@ where
     let mut children: Vec<View<Msg>> = Vec::with_capacity(nodes.len() + 1);
 
     // Capa 0 — cables (van detrás de los nodos).
-    children.push(wires_layer(painted, stroke_px));
+    children.push(wires_layer(painted, stroke_px, 0.0));
 
     // Capa 1..N — nodos.
     for node in nodes {
@@ -311,6 +607,8 @@ where
             &on_connect,
             right_click_msg,
             tint,
+            false,
+            None,
         ));
     }
 
@@ -326,13 +624,171 @@ where
     .children(children)
 }
 
+// ─────────────────────────────────────────────────────────────────────────
+// Variante con cámara (pan/zoom) + selección — `nodegraph_view_spec`
+// ─────────────────────────────────────────────────────────────────────────
+
+type NodeMsgFn<Msg> = Arc<dyn Fn(NodeId) -> Option<Msg> + Send + Sync>;
+type PanFn<Msg> = Arc<dyn Fn(DragPhase, f32, f32) -> Option<Msg> + Send + Sync>;
+type ZoomFn<Msg> = Arc<dyn Fn(f32) -> Option<Msg> + Send + Sync>;
+
+/// Especificación completa del lienzo **navegable**: además de mover nodos y
+/// conectar pins, soporta **cámara** (pan/zoom), **selección** de nodos y
+/// **deselección** al clickear el fondo. Es el editor de grafo real (vs. el
+/// visualizador de las funciones `nodegraph_view*`, que son este spec con
+/// cámara identidad y sin selección).
+///
+/// Todo lo interactivo es opcional: deja los `None` y `Camera::default()` para
+/// obtener el comportamiento clásico. Las coordenadas de `nodes` son de
+/// **canvas** (lógicas); el widget las proyecta a pantalla con la cámara. El
+/// delta de arrastre de un nodo se devuelve ya **en coordenadas de canvas**
+/// (dividido por el zoom), así el caller lo suma directo a `node.x/y`.
+pub struct NodegraphSpec<'a, Msg: Clone + Send + Sync + 'static> {
+    pub nodes: &'a [NodeSpec],
+    pub wires: &'a [Wire],
+    /// Aristas simples nodo→nodo (sin pins), pintadas junto a los cables. Para
+    /// grafos de relación/DAG genérico; dejar `&[]` para el clásico de pins.
+    pub edges: &'a [Edge],
+    pub palette: &'a NodegraphPalette,
+    pub metrics: &'a NodegraphMetrics,
+    pub camera: Camera,
+    pub on_drag_node: DragNodeFn<Msg>,
+    pub on_connect: ConnectFn<Msg>,
+    pub on_right_click_node: Option<NodeMsgFn<Msg>>,
+    pub node_tint: Option<&'a dyn Fn(NodeId) -> Option<NodeTint>>,
+    pub wire_tint: Option<&'a dyn Fn(&Wire) -> Option<Color>>,
+    /// Recolorea aristas simples (p.ej. el cono resaltado). `None` = paleta.
+    pub edge_tint: Option<&'a dyn Fn(&Edge) -> Option<Color>>,
+    /// Fase 0..1 del **flujo** animado de las aristas (un guion sutil que corre
+    /// ancestro→descendiente). `0.0` = sin flujo. La app la avanza con un tick.
+    pub flujo: f32,
+    /// Predicado de selección: `true` = el nodo se pinta con borde de acento.
+    pub selected: Option<&'a dyn Fn(NodeId) -> bool>,
+    /// Click en el cuerpo de un nodo → `on_select(id)`.
+    pub on_select_node: Option<NodeMsgFn<Msg>>,
+    /// Click en el fondo vacío del lienzo → este `Msg` (deseleccionar).
+    pub on_canvas_click: Option<Msg>,
+    /// Arrastre del fondo vacío → `on_pan(phase, dx, dy)` (delta de pantalla).
+    pub on_pan: Option<PanFn<Msg>>,
+    /// Rueda sobre el lienzo → `on_zoom(dy)` (el caller resuelve con
+    /// [`zoom_step`]/[`zoom_at_center`]).
+    pub on_zoom: Option<ZoomFn<Msg>>,
+}
+
+/// Compone el lienzo navegable a partir de un [`NodegraphSpec`].
+pub fn nodegraph_view_spec<Msg>(spec: NodegraphSpec<'_, Msg>) -> View<Msg>
+where
+    Msg: Clone + Send + Sync + 'static,
+{
+    let NodegraphSpec {
+        nodes,
+        wires,
+        edges,
+        palette,
+        metrics,
+        camera,
+        on_drag_node,
+        on_connect,
+        on_right_click_node,
+        node_tint,
+        wire_tint,
+        edge_tint,
+        flujo,
+        selected,
+        on_select_node,
+        on_canvas_click,
+        on_pan,
+        on_zoom,
+    } = spec;
+
+    let zoom = camera.zoom.max(f32::EPSILON);
+    // Métricas escaladas + nodos en coordenadas de PANTALLA (canvas·zoom+pan).
+    let scaled = metrics.scaled(zoom);
+    let screen_nodes: Vec<NodeSpec> = nodes
+        .iter()
+        .map(|n| {
+            let (sx, sy) = camera.apply(n.x, n.y);
+            NodeSpec { x: sx, y: sy, ..n.clone() }
+        })
+        .collect();
+
+    // El delta de arrastre llega en px de pantalla; lo pasamos a canvas (÷zoom)
+    // antes de dárselo al caller, así suma directo a node.x/y lógicos.
+    let on_drag_canvas: DragNodeFn<Msg> = {
+        let inner = on_drag_node.clone();
+        Arc::new(move |id, phase, dx, dy| (inner)(id, phase, dx / zoom, dy / zoom))
+    };
+
+    let mut painted = precompute_wires(&screen_nodes, wires, &scaled, palette.wire, wire_tint);
+    painted.extend(precompute_edges(&screen_nodes, edges, &scaled, palette.wire, edge_tint));
+    let stroke_px = scaled.wire_stroke;
+
+    let mut children: Vec<View<Msg>> = Vec::with_capacity(nodes.len() + 1);
+
+    // Capa 0 — cables + captura de click/deselección en el fondo. El click sin
+    // mover deselecciona; el arrastre (pan) lo toma el root draggable.
+    let mut wires = wires_layer(painted, stroke_px, flujo);
+    if let Some(msg) = on_canvas_click {
+        wires = wires.on_click(msg);
+    }
+    children.push(wires);
+
+    // Capa 1..N — nodos (en coords de pantalla), con selección.
+    for node in &screen_nodes {
+        let right_click_msg = on_right_click_node.as_ref().and_then(|f| f(node.id));
+        let tint = node_tint.and_then(|f| f(node.id));
+        let is_sel = selected.map(|f| f(node.id)).unwrap_or(false);
+        let select_msg = on_select_node.as_ref().and_then(|f| f(node.id));
+        children.push(node_view(
+            node,
+            palette,
+            &scaled,
+            &on_drag_canvas,
+            &on_connect,
+            right_click_msg,
+            tint,
+            is_sel,
+            select_msg,
+        ));
+    }
+
+    let mut root = View::new(Style {
+        size: Size {
+            width: percent(1.0_f32),
+            height: percent(1.0_f32),
+        },
+        ..Default::default()
+    })
+    .fill(palette.bg_canvas)
+    .clip(true)
+    .children(children);
+
+    // Pan: arrastre del fondo (los nodos/pins, draggables internos, ganan).
+    if let Some(pan) = on_pan {
+        root = root.draggable(move |phase, dx, dy| (pan)(phase, dx, dy));
+    }
+    // Zoom con la rueda.
+    if let Some(zoomf) = on_zoom {
+        root = root.on_scroll(move |_dx, dy| (zoomf)(dy));
+    }
+    root
+}
+
 #[derive(Debug, Clone, Copy)]
 struct WirePainted {
     x1: f32,
     y1: f32,
     x2: f32,
     y2: f32,
+    /// Signo de la tangente horizontal en cada extremo (+1 sale hacia la
+    /// derecha, -1 hacia la izquierda). Permite curvar el Bezier hacia afuera
+    /// del lado por el que engancha cada punta.
+    d1: f32,
+    d2: f32,
     color: Color,
+    /// Si `true`, la tangente del Bezier es vertical (aristas apiladas
+    /// arriba→abajo) en vez de horizontal.
+    vertical: bool,
 }
 
 fn precompute_wires(
@@ -347,24 +803,75 @@ fn precompute_wires(
         let from = nodes.iter().find(|n| n.id == w.from_node);
         let to = nodes.iter().find(|n| n.id == w.to_node);
         if let (Some(a), Some(b)) = (from, to) {
-            let x1 = a.x + metrics.node_width;
             let y1 = metrics.output_pin_y(a.y, w.from_output);
-            let x2 = b.x;
             let y2 = metrics.input_pin_y(b.y, w.to_input);
+            // Modo direccional (default): salida por la derecha de `a`, entrada
+            // por la izquierda de `b`. Modo `nearest`: el destino a la izquierda
+            // invierte los lados para que el cable no dé la vuelta.
+            let destino_a_la_derecha = b.x + metrics.node_width * 0.5 >= a.x + metrics.node_width * 0.5;
+            let (x1, d1, x2, d2) = if !metrics.wire_nearest_side || destino_a_la_derecha {
+                (a.x + metrics.node_width, 1.0, b.x, -1.0)
+            } else {
+                (a.x, -1.0, b.x + metrics.node_width, 1.0)
+            };
             let color = wire_tint.and_then(|f| f(w)).unwrap_or(default_color);
-            out.push(WirePainted {
-                x1,
-                y1,
-                x2,
-                y2,
-                color,
-            });
+            out.push(WirePainted { x1, y1, x2, y2, d1, d2, color, vertical: false });
         }
     }
     out
 }
 
-fn wires_layer<Msg>(wires: Vec<WirePainted>, stroke_px: f32) -> View<Msg>
+/// Geometría de las aristas simples: ancla en el centro vertical de cada nodo y
+/// en el borde horizontal del lado más cercano al otro nodo (sin depender de
+/// pins). Comparte el tipo pintado con los cables, así viajan en la misma capa.
+fn precompute_edges(
+    nodes: &[NodeSpec],
+    edges: &[Edge],
+    metrics: &NodegraphMetrics,
+    default_color: Color,
+    edge_tint: Option<&dyn Fn(&Edge) -> Option<Color>>,
+) -> Vec<WirePainted> {
+    let mut out = Vec::with_capacity(edges.len());
+    for e in edges {
+        let from = nodes.iter().find(|n| n.id == e.from_node);
+        let to = nodes.iter().find(|n| n.id == e.to_node);
+        if let (Some(a), Some(b)) = (from, to) {
+            let a_h = metrics.node_height(a.inputs.len(), a.outputs.len());
+            let b_h = metrics.node_height(b.inputs.len(), b.outputs.len());
+            let color = edge_tint.and_then(|f| f(e)).unwrap_or(default_color);
+            let painted = if metrics.vertical {
+                // Vertical: ancla en el centro-x, borde superior/inferior más
+                // cercano al otro nodo; tangente vertical.
+                let ax = a.x + metrics.node_width * 0.5;
+                let bx = b.x + metrics.node_width * 0.5;
+                let a_cy = a.y + a_h * 0.5;
+                let b_cy = b.y + b_h * 0.5;
+                let (y1, d1, y2, d2) = if b_cy >= a_cy {
+                    (a.y + a_h, 1.0, b.y, -1.0)
+                } else {
+                    (a.y, -1.0, b.y + b_h, 1.0)
+                };
+                WirePainted { x1: ax, y1, x2: bx, y2, d1, d2, color, vertical: true }
+            } else {
+                // Horizontal: centro-y, borde izquierdo/derecho más cercano.
+                let ay = a.y + a_h * 0.5;
+                let by = b.y + b_h * 0.5;
+                let a_cx = a.x + metrics.node_width * 0.5;
+                let b_cx = b.x + metrics.node_width * 0.5;
+                let (x1, d1, x2, d2) = if b_cx >= a_cx {
+                    (a.x + metrics.node_width, 1.0, b.x, -1.0)
+                } else {
+                    (a.x, -1.0, b.x + metrics.node_width, 1.0)
+                };
+                WirePainted { x1, y1: ay, x2, y2: by, d1, d2, color, vertical: false }
+            };
+            out.push(painted);
+        }
+    }
+    out
+}
+
+fn wires_layer<Msg>(wires: Vec<WirePainted>, stroke_px: f32, flujo: f32) -> View<Msg>
 where
     Msg: Clone + 'static,
 {
@@ -387,22 +894,53 @@ where
     }
     nodo.paint_with(move |scene, _ts, rect| {
         let stroke = Stroke::new(stroke_px as f64);
+        // Flujo (opt-in): un guion animado, MUY sutil, corriendo por cada arista
+        // en el sentido ancestro→descendiente. `flujo` es la fase 0..1 que la app
+        // avanza con un tick; el offset del dash la traduce en movimiento.
+        let flujo_dash = if flujo > 0.0 {
+            let dash = (stroke_px as f64 * 3.0).max(5.0);
+            let gap = dash * 2.4;
+            let period = dash + gap;
+            let offset = -(flujo as f64) * period;
+            Some(Stroke::new((stroke_px * 0.9) as f64).with_dashes(offset, [dash, gap]))
+        } else {
+            None
+        };
         for w in &wires {
             // Bezier cúbica con tangentes horizontales — mismo patrón
-            // que las hebras de pluma-editor-llimphi.
-            let dx = ((w.x2 - w.x1).abs().max(40.0) * 0.5) as f64;
+            // que las hebras de pluma-editor-llimphi. `d1`/`d2` orientan la
+            // tangente hacia afuera del lado por el que engancha cada punta.
             let x1 = (rect.x + w.x1) as f64;
             let y1 = (rect.y + w.y1) as f64;
             let x2 = (rect.x + w.x2) as f64;
             let y2 = (rect.y + w.y2) as f64;
             let mut path = BezPath::new();
             path.move_to((x1, y1));
-            path.curve_to((x1 + dx, y1), (x2 - dx, y2), (x2, y2));
+            if w.vertical {
+                // Tangente vertical: los controles se separan en Y.
+                let mag = (y2 - y1).abs().max(40.0) * 0.5;
+                path.curve_to((x1, y1 + w.d1 as f64 * mag), (x2, y2 + w.d2 as f64 * mag), (x2, y2));
+            } else {
+                // Tangente horizontal: los controles se separan en X.
+                let dx = ((w.x2 - w.x1).abs().max(40.0) * 0.5) as f64;
+                path.curve_to((x1 + w.d1 as f64 * dx, y1), (x2 + w.d2 as f64 * dx, y2), (x2, y2));
+            }
             scene.stroke(&stroke, Affine::IDENTITY, w.color, None, &path);
+            // Guion de flujo: versión aclarada y semitransparente del color de la
+            // arista, para que se lea como un brillo que corre sin tapar el cable.
+            if let Some(dash) = &flujo_dash {
+                let c = w.color.components;
+                let flow_color = Color {
+                    components: [(c[0] + 1.0) * 0.5, (c[1] + 1.0) * 0.5, (c[2] + 1.0) * 0.5, 0.5],
+                    ..w.color
+                };
+                scene.stroke(dash, Affine::IDENTITY, flow_color, None, &path);
+            }
         }
     })
 }
 
+#[allow(clippy::too_many_arguments)]
 fn node_view<Msg>(
     node: &NodeSpec,
     palette: &NodegraphPalette,
@@ -411,6 +949,8 @@ fn node_view<Msg>(
     on_connect: &ConnectFn<Msg>,
     on_right_click_msg: Option<Msg>,
     tint: Option<NodeTint>,
+    selected: bool,
+    on_select_msg: Option<Msg>,
 ) -> View<Msg>
 where
     Msg: Clone + Send + Sync + 'static,
@@ -493,7 +1033,7 @@ where
     })
     .children(pin_layer_children);
 
-    View::new(Style {
+    let mut root = View::new(Style {
         position: Position::Absolute,
         inset: Rect {
             left: length(node.x),
@@ -509,7 +1049,24 @@ where
     })
     .fill(bg_node)
     .radius(metrics.node_radius)
-    .children(vec![title_bar, pin_layer])
+    .children(vec![title_bar, pin_layer]);
+
+    // Elevación: sombra suave sobre el fondo (opt-in por métrica).
+    if metrics.node_elevacion > 0.0 {
+        let blur = metrics.node_elevacion as f64;
+        root = root.shadow(Shadow::soft(90, blur).offset(0.0, blur * 0.22));
+    }
+
+    // Selección: borde de acento alrededor del nodo elegido.
+    if selected {
+        root = root.border(2.0, palette.wire);
+    }
+    // Click en el cuerpo del nodo (no en el título draggable ni en los pins) →
+    // seleccionar. El árbitro de hit-test da prioridad a los hijos interactivos.
+    if let Some(msg) = on_select_msg {
+        root = root.on_click(msg);
+    }
+    root
 }
 
 #[derive(Debug, Clone, Copy)]
@@ -590,9 +1147,9 @@ where
         position: Position::Absolute,
         inset: Rect {
             left: length(diam + 4.0),
-            top: length(0.0),
+            top: length(0.0_f32),
             right: length(diam + 4.0),
-            bottom: length(0.0),
+            bottom: length(0.0_f32),
         },
         size: Size {
             width: Dimension::auto(),
@@ -610,9 +1167,9 @@ where
     View::new(Style {
         position: Position::Absolute,
         inset: Rect {
-            left: length(0.0),
+            left: length(0.0_f32),
             top: length(y_top),
-            right: length(0.0),
+            right: length(0.0_f32),
             bottom: length(0.0_f32),
         },
         size: Size {
@@ -628,6 +1185,49 @@ where
 mod tests {
     use super::*;
 
+    #[test]
+    fn camera_apply_e_invert_son_inversas() {
+        let cam = Camera { pan_x: 30.0, pan_y: -10.0, zoom: 2.0 };
+        let (sx, sy) = cam.apply(50.0, 40.0);
+        assert!((sx - (50.0 * 2.0 + 30.0)).abs() < 1e-3);
+        assert!((sy - (40.0 * 2.0 - 10.0)).abs() < 1e-3);
+        let (cx, cy) = cam.invert(sx, sy);
+        assert!((cx - 50.0).abs() < 1e-3 && (cy - 40.0).abs() < 1e-3);
+    }
+
+    #[test]
+    fn zoom_step_multiplica_y_clampa() {
+        // Acercar sube, alejar baja.
+        assert!(zoom_step(1.0, 1.0) > 1.0);
+        assert!(zoom_step(1.0, -1.0) < 1.0);
+        // Clamp en los extremos.
+        assert_eq!(zoom_step(ZOOM_MAX, 5.0), ZOOM_MAX);
+        assert_eq!(zoom_step(ZOOM_MIN, -5.0), ZOOM_MIN);
+    }
+
+    #[test]
+    fn zoom_at_center_mantiene_fijo_el_centro() {
+        let cam = Camera::default();
+        let (vw, vh) = (800.0_f32, 600.0_f32);
+        // Punto de canvas bajo el centro antes de zoomear.
+        let before = cam.invert(vw * 0.5, vh * 0.5);
+        let cam2 = zoom_at_center(cam, 2.5, vw, vh);
+        assert!((cam2.zoom - 2.5).abs() < 1e-3);
+        // El mismo punto de canvas sigue proyectándose al centro.
+        let (sx, sy) = cam2.apply(before.0, before.1);
+        assert!((sx - vw * 0.5).abs() < 1e-2, "cx fijo (dio {sx})");
+        assert!((sy - vh * 0.5).abs() < 1e-2, "cy fijo (dio {sy})");
+    }
+
+    #[test]
+    fn scaled_metrics_escala_todo_por_zoom() {
+        let m = NodegraphMetrics::default();
+        let s = m.scaled(2.0);
+        assert!((s.node_width - m.node_width * 2.0).abs() < 1e-3);
+        assert!((s.title_text_size - m.title_text_size * 2.0).abs() < 1e-3);
+        assert!((s.node_radius - m.node_radius * 2.0).abs() < 1e-9);
+    }
+
     #[test]
     fn payload_roundtrip() {
         for (n, p) in [
@@ -683,6 +1283,48 @@ mod tests {
         assert!(pre.is_empty());
     }
 
+    fn dos_nodos(xa: f32, xb: f32) -> Vec<NodeSpec> {
+        vec![
+            NodeSpec { id: 1, label: "a".into(), x: xa, y: 0.0, inputs: vec!["".into()], outputs: vec!["".into()] },
+            NodeSpec { id: 2, label: "b".into(), x: xb, y: 0.0, inputs: vec!["".into()], outputs: vec!["".into()] },
+        ]
+    }
+    const UN_CABLE: Wire = Wire { from_node: 1, from_output: 0, to_node: 2, to_input: 0 };
+    const NEGRO: Color = Color::from_rgba8(0, 0, 0, 255);
+
+    #[test]
+    fn direccional_siempre_sale_derecha_entra_izquierda() {
+        // Modo clásico: aunque el destino esté a la IZQUIERDA, el cable sale por
+        // la derecha de `a` y entra por la izquierda de `b` (semántica DAG).
+        let m = NodegraphMetrics::default();
+        let pre = precompute_wires(&dos_nodos(300.0, 0.0), &[UN_CABLE], &m, NEGRO, None);
+        assert!((pre[0].x1 - (300.0 + m.node_width)).abs() < 1e-3);
+        assert!((pre[0].x2 - 0.0).abs() < 1e-3);
+        assert_eq!((pre[0].d1, pre[0].d2), (1.0, -1.0));
+    }
+
+    #[test]
+    fn nearest_side_invierte_lados_si_destino_a_la_izquierda() {
+        // Con `wire_nearest_side`, el destino a la izquierda hace que el cable
+        // salga por la IZQUIERDA de `a` (x1 = a.x) y entre por la DERECHA de `b`
+        // (x2 = b.x + node_width) — sin dar la vuelta al nodo.
+        let m = NodegraphMetrics { wire_nearest_side: true, ..Default::default() };
+        let pre = precompute_wires(&dos_nodos(300.0, 0.0), &[UN_CABLE], &m, NEGRO, None);
+        assert!((pre[0].x1 - 300.0).abs() < 1e-3);
+        assert!((pre[0].x2 - m.node_width).abs() < 1e-3);
+        assert_eq!((pre[0].d1, pre[0].d2), (-1.0, 1.0));
+    }
+
+    #[test]
+    fn nearest_side_coincide_con_direccional_si_destino_a_la_derecha() {
+        // Destino a la derecha: `nearest` no cambia nada respecto del direccional.
+        let m = NodegraphMetrics { wire_nearest_side: true, ..Default::default() };
+        let pre = precompute_wires(&dos_nodos(0.0, 300.0), &[UN_CABLE], &m, NEGRO, None);
+        assert!((pre[0].x1 - m.node_width).abs() < 1e-3);
+        assert!((pre[0].x2 - 300.0).abs() < 1e-3);
+        assert_eq!((pre[0].d1, pre[0].d2), (1.0, -1.0));
+    }
+
     #[test]
     fn precompute_resolves_existing_wires() {
         let nodes = vec![
@@ -715,4 +1357,157 @@ mod tests {
         assert!((pre[0].x1 - m.node_width).abs() < 1e-3);
         assert!((pre[0].x2 - 200.0).abs() < 1e-3);
     }
+
+    // ── Aristas simples (F0.1) ────────────────────────────────────────────
+
+    fn nodo_sin_pins(id: NodeId, x: f32, y: f32) -> NodeSpec {
+        NodeSpec { id, label: format!("n{id}"), x, y, inputs: vec![], outputs: vec![] }
+    }
+
+    #[test]
+    fn edge_ancla_en_centro_y_lado_cercano() {
+        let m = NodegraphMetrics::default();
+        // b a la derecha de a → sale por la derecha de a, entra por la izq de b.
+        let nodes = vec![nodo_sin_pins(1, 0.0, 0.0), nodo_sin_pins(2, 300.0, 40.0)];
+        let edges = vec![Edge { from_node: 1, to_node: 2 }];
+        let pre = precompute_edges(&nodes, &edges, &m, NEGRO, None);
+        assert_eq!(pre.len(), 1);
+        let half = m.node_height(0, 0) * 0.5;
+        assert!((pre[0].x1 - m.node_width).abs() < 1e-3, "sale por borde derecho de a");
+        assert!((pre[0].y1 - half).abs() < 1e-3, "ancla en centro vertical de a");
+        assert!((pre[0].x2 - 300.0).abs() < 1e-3, "entra por borde izquierdo de b");
+        assert!((pre[0].y2 - (40.0 + half)).abs() < 1e-3, "centro vertical de b");
+        assert_eq!((pre[0].d1, pre[0].d2), (1.0, -1.0));
+    }
+
+    #[test]
+    fn edge_lado_cercano_si_destino_a_la_izquierda() {
+        let m = NodegraphMetrics::default();
+        let nodes = vec![nodo_sin_pins(1, 300.0, 0.0), nodo_sin_pins(2, 0.0, 0.0)];
+        let edges = vec![Edge { from_node: 1, to_node: 2 }];
+        let pre = precompute_edges(&nodes, &edges, &m, NEGRO, None);
+        // Destino a la izquierda: sale por la izq de a, entra por la der de b.
+        assert!((pre[0].x1 - 300.0).abs() < 1e-3);
+        assert!((pre[0].x2 - m.node_width).abs() < 1e-3);
+        assert_eq!((pre[0].d1, pre[0].d2), (-1.0, 1.0));
+    }
+
+    #[test]
+    fn edge_colgante_se_descarta() {
+        let m = NodegraphMetrics::default();
+        let nodes = vec![nodo_sin_pins(1, 0.0, 0.0)];
+        let edges = vec![Edge { from_node: 1, to_node: 99 }];
+        assert!(precompute_edges(&nodes, &edges, &m, NEGRO, None).is_empty());
+    }
+
+    // ── Layout por rango topológico (F0.3) ────────────────────────────────
+
+    #[test]
+    fn layout_cadena_lineal_columnas_crecientes() {
+        let m = NodegraphMetrics::default();
+        let ids = vec![1u32, 2, 3];
+        let edges = vec![(1, 2), (2, 3)];
+        let pos = layout_por_rango(&ids, &edges, &m, LayoutRango::default());
+        assert!(pos[0].x < pos[1].x && pos[1].x < pos[2].x, "cada eslabón una columna más");
+        // Rangos distintos ⇒ cada uno en la fila 0 de su columna (mismo y).
+        assert!((pos[0].y - pos[1].y).abs() < 1e-3);
+    }
+
+    #[test]
+    fn layout_diamante_merge_en_rango_mas_profundo() {
+        // a→b, a→c, b→d, c→d : d debe caer en el rango 2 (max de sus padres +1).
+        let m = NodegraphMetrics::default();
+        let ids = vec![10u32, 11, 12, 13]; // a,b,c,d
+        let edges = vec![(10, 11), (10, 12), (11, 13), (12, 13)];
+        let pos = layout_por_rango(&ids, &edges, &m, LayoutRango::default());
+        let col = |id: u32| pos.iter().find(|p| p.id == id).unwrap().x;
+        let opts = LayoutRango::default();
+        let col_w = m.node_width + opts.col_gap;
+        assert!((col(10) - opts.margin).abs() < 1e-3, "a en rango 0");
+        assert!((col(11) - (opts.margin + col_w)).abs() < 1e-3, "b en rango 1");
+        assert!((col(13) - (opts.margin + 2.0 * col_w)).abs() < 1e-3, "d (merge) en rango 2");
+    }
+
+    #[test]
+    fn layout_ciclo_no_cuelga() {
+        let m = NodegraphMetrics::default();
+        let ids = vec![1u32, 2];
+        let edges = vec![(1, 2), (2, 1)];
+        // No debe colgarse; ambos caen a rango 0 (mejor esfuerzo).
+        let pos = layout_por_rango(&ids, &edges, &m, LayoutRango::default());
+        assert_eq!(pos.len(), 2);
+    }
+
+    // ── Encuadre y conos (F0.5) ───────────────────────────────────────────
+
+    #[test]
+    fn fit_to_view_centra_y_clampa() {
+        let m = NodegraphMetrics::default();
+        let nodes = vec![nodo_sin_pins(1, 0.0, 0.0), nodo_sin_pins(2, 400.0, 300.0)];
+        let (vw, vh) = (800.0_f32, 600.0_f32);
+        let cam = fit_to_view(&nodes, &m, vw, vh);
+        assert!(cam.zoom >= ZOOM_MIN && cam.zoom <= ZOOM_MAX);
+        // El centro del contenido se proyecta al centro del viewport.
+        let mut min_x = f32::INFINITY; let mut max_x = f32::NEG_INFINITY;
+        let mut min_y = f32::INFINITY; let mut max_y = f32::NEG_INFINITY;
+        for n in &nodes {
+            let h = m.node_height(0, 0);
+            min_x = min_x.min(n.x); max_x = max_x.max(n.x + m.node_width);
+            min_y = min_y.min(n.y); max_y = max_y.max(n.y + h);
+        }
+        let (ccx, ccy) = ((min_x + max_x) * 0.5, (min_y + max_y) * 0.5);
+        let (sx, sy) = cam.apply(ccx, ccy);
+        assert!((sx - vw * 0.5).abs() < 1e-2 && (sy - vh * 0.5).abs() < 1e-2);
+    }
+
+    #[test]
+    fn fit_to_view_sin_nodos_es_identidad() {
+        let m = NodegraphMetrics::default();
+        assert_eq!(fit_to_view(&[], &m, 800.0, 600.0), Camera::default());
+    }
+
+    #[test]
+    fn cono_ascendente_y_descendente_en_diamante() {
+        // a→b, a→c, b→d, c→d
+        let edges = vec![(10u32, 11), (10, 12), (11, 13), (12, 13)];
+        let mut asc = cono_ascendente(&edges, 13); // ancestros de d + d
+        asc.sort_unstable();
+        assert_eq!(asc, vec![10, 11, 12, 13]);
+        let mut desc = cono_descendente(&edges, 10); // descendientes de a + a
+        desc.sort_unstable();
+        assert_eq!(desc, vec![10, 11, 12, 13]);
+        // Una hoja no tiene descendientes salvo ella misma.
+        assert_eq!(cono_descendente(&edges, 13), vec![13]);
+        // Una raíz no tiene ancestros salvo ella misma.
+        assert_eq!(cono_ascendente(&edges, 10), vec![10]);
+    }
+
+    // ── Orientación vertical (F0 visual) ──────────────────────────────────
+
+    #[test]
+    fn edge_vertical_ancla_arriba_y_abajo() {
+        let m = NodegraphMetrics { vertical: true, ..Default::default() };
+        // b debajo de a → sale por el borde inferior de a, entra por el superior de b.
+        let nodes = vec![nodo_sin_pins(1, 0.0, 0.0), nodo_sin_pins(2, 40.0, 300.0)];
+        let pre = precompute_edges(&nodes, &[Edge { from_node: 1, to_node: 2 }], &m, NEGRO, None);
+        let h = m.node_height(0, 0);
+        assert!((pre[0].x1 - m.node_width * 0.5).abs() < 1e-3, "centro-x de a");
+        assert!((pre[0].y1 - h).abs() < 1e-3, "borde inferior de a");
+        assert!((pre[0].x2 - (40.0 + m.node_width * 0.5)).abs() < 1e-3, "centro-x de b");
+        assert!((pre[0].y2 - 300.0).abs() < 1e-3, "borde superior de b");
+        assert!(pre[0].vertical);
+        assert_eq!((pre[0].d1, pre[0].d2), (1.0, -1.0));
+    }
+
+    #[test]
+    fn layout_vertical_apila_rangos_en_y() {
+        let m = NodegraphMetrics::default();
+        let ids = vec![1u32, 2, 3];
+        let edges = vec![(1, 2), (2, 3)];
+        let opts = LayoutRango { vertical: true, ..Default::default() };
+        let pos = layout_por_rango(&ids, &edges, &m, opts);
+        // Cadena: cada eslabón un rango más abajo (y crece), misma columna (x igual).
+        assert!(pos[0].y < pos[1].y && pos[1].y < pos[2].y);
+        assert!((pos[0].x - pos[1].x).abs() < 1e-3);
+    }
 }
diff --git a/widgets/panel/Cargo.toml b/widgets/panel/Cargo.toml
index e7ab4c4..aac65d2 100644
--- a/widgets/panel/Cargo.toml
+++ b/widgets/panel/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-panel — firma visual transversal: gradiente vertical casi imperceptible + hairline accent en el top edge. Helper paint_with + wrapper panel_view. La capa que vuelve reconocible al sistema sin cargar."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/panel/LEEME.md b/widgets/panel/LEEME.md
new file mode 100644
index 0000000..91c3250
--- /dev/null
+++ b/widgets/panel/LEEME.md
@@ -0,0 +1,40 @@
+# llimphi-widget-panel
+
+*Read this in English: [README.md](README.md).*
+
+Firma visual transversal de los paneles tawasuyu.
+
+Aporta dos detalles que aplicados consistentemente vuelven al sistema
+reconocible sin que se note "diseñado":
+
+1. **Gradiente vertical casi imperceptible** — el fondo del panel no
+   es un color sólido sino una interpolación lineal entre una versión
+   ligeramente más clara (top) y una ligeramente más oscura (bot) del
+   color base. La diferencia es ~4% en valor — invisible al primer
+   vistazo pero el ojo lo registra como "tallado" en vez de "pintado".
+
+2. **Hairline accent en el top edge** — una línea horizontal de 1px
+   en el color accent del theme, al ~30% de alpha, justo en el borde
+   superior del panel. Funciona como "hilo de identidad" que cose
+   todos los paneles del sistema: aparece en modales, dropdowns,
+   cards, sidebars; siempre el mismo grosor, siempre el mismo color.
+
+## API
+
+- `PanelStyle` — bundle de tokens (color base, accent, radio,
+  alpha del hairline, fuerza del gradiente).
+- `panel_signature_painter` — `Fn` para `View::paint_with`. Útil si
+  ya tienes un View configurado y quieres sumarle la firma sin envolver.
+- `panel_view` — convenience: arma el View completo con la firma
+  aplicada, recibe los hijos como `Vec<View<Msg>>`.
+
+## Cuándo usarlo
+
+- SÍ: modales, dropdowns, cards prominentes, columnas de layout,
+  shortcuts-help, paneles flotantes.
+- NO: chips, badges, toasts, items de lista (la firma es para
+  superficies grandes; en piezas chiquitas es ruido).
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/panel/README.md b/widgets/panel/README.md
new file mode 100644
index 0000000..d93282a
--- /dev/null
+++ b/widgets/panel/README.md
@@ -0,0 +1,38 @@
+# llimphi-widget-panel
+
+The cross-cutting visual signature of tawasuyu panels.
+
+It contributes two details that, applied consistently, make the system
+recognizable without looking "designed":
+
+1. **A nearly imperceptible vertical gradient** — the panel background is not a
+   solid colour but a linear interpolation between a slightly lighter version
+   (top) and a slightly darker one (bottom) of the base colour. The difference is
+   ~4% in value — invisible at first glance, but the eye registers it as "carved"
+   rather than "painted".
+
+2. **A hairline accent on the top edge** — a 1px horizontal line in the theme's
+   accent colour at ~30% alpha, right at the panel's upper border. It works as an
+   "identity thread" stitching every panel of the system together: it appears in
+   modals, dropdowns, cards and sidebars; always the same thickness, always the
+   same colour.
+
+## API
+
+- `PanelStyle` — the token bundle (base colour, accent, radius, hairline alpha,
+  gradient strength).
+- `panel_signature_painter` — an `Fn` for `View::paint_with`. Useful when you
+  already have a configured View and want to add the signature without wrapping.
+- `panel_view` — convenience: builds the complete View with the signature
+  applied, taking the children as `Vec<View<Msg>>`.
+
+## When to use it
+
+- YES: modals, dropdowns, prominent cards, layout columns, shortcuts-help,
+  floating panels.
+- NO: chips, badges, toasts, list items (the signature is for large surfaces; on
+  small pieces it is noise).
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/panel/src/lib.rs b/widgets/panel/src/lib.rs
index ffa5765..9261970 100644
--- a/widgets/panel/src/lib.rs
+++ b/widgets/panel/src/lib.rs
@@ -20,7 +20,7 @@
 //! - [`PanelStyle`] — bundle de tokens (color base, accent, radio,
 //!   alpha del hairline, fuerza del gradiente).
 //! - [`panel_signature_painter`] — `Fn` para `View::paint_with`. Útil si
-//!   ya tenés un View configurado y querés sumarle la firma sin envolver.
+//!   ya tienes un View configurado y quieres sumarle la firma sin envolver.
 //! - [`panel_view`] — convenience: arma el View completo con la firma
 //!   aplicada, recibe los hijos como `Vec<View<Msg>>`.
 //!
diff --git a/widgets/panes/Cargo.toml b/widgets/panes/Cargo.toml
index 7b0fb87..cf7e239 100644
--- a/widgets/panes/Cargo.toml
+++ b/widgets/panes/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-panes — árbol de paneles BSP estilo tmux: hojas opacas (`View<Msg>`) que se parten horizontal/vertical, se cierran, enfocan y redimensionan arrastrando divisores. La base para montar cualquier componente de tawasuyu en un layout intercambiable."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/panes/LEEME.md b/widgets/panes/LEEME.md
new file mode 100644
index 0000000..e5fa858
--- /dev/null
+++ b/widgets/panes/LEEME.md
@@ -0,0 +1,38 @@
+# llimphi-widget-panes
+
+*Read this in English: [README.md](README.md).*
+
+Árbol de paneles BSP estilo tmux.
+
+La pieza que faltaba para "montar cualquier componente de tawasuyu en un
+layout intercambiable con splits resizables". El widget NO conoce los
+dominios: hospeda hojas opacas (`View<Msg>`) en un árbol binario que el
+usuario parte (horizontal/vertical), cierra, enfoca (click) y
+redimensiona (arrastrando los divisores). tmux, pero in-process y sobre
+el bucle Elm de Llimphi.
+
+No confundir con `llimphi-widget-panel` (el chrome de UN panel con
+título): esto es el árbol de N panes.
+
+## Modelo
+
+- `Layout` es la **estructura** del árbol (qué hoja vive dónde, con
+  qué ratio cada split). Vive en el `Model` del host y se manipula con
+  `Layout::split`, `Layout::without` y `Layout::resize`.
+- El **contenido** de cada hoja lo provee el host vía un closure
+  `FnMut(PaneId) -> View<Msg>` que se invoca al construir la vista —
+  por eso puede tomar prestado el `Model` (no necesita ser `'static`).
+- El handler de resize sí se guarda en el árbol de vistas (lo agarra el
+  divisor draggable), así que ése debe ser `'static + Send + Sync`. El
+  de focus se evalúa al construir (porque `on_click` toma el `Msg` por
+  valor), así que no tiene esa restricción.
+
+## Por qué no `Box<dyn Any>`
+
+Igual que el resto del repo: el host mantiene un `enum` de sus tipos de
+panel y hace dispatch estático. El widget es genérico sobre `Msg`; el
+host decide cómo materializar cada hoja. Cero downcasting.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/panes/README.md b/widgets/panes/README.md
new file mode 100644
index 0000000..2c1c57e
--- /dev/null
+++ b/widgets/panes/README.md
@@ -0,0 +1,35 @@
+# llimphi-widget-panes
+
+A tmux-style BSP pane tree.
+
+The missing piece for "mount any tawasuyu component in an interchangeable layout
+with resizable splits". The widget knows nothing about the domains: it hosts
+opaque leaves (`View<Msg>`) in a binary tree the user splits
+(horizontal/vertical), closes, focuses (click) and resizes (dragging the
+dividers). tmux, but in-process and on Llimphi's Elm loop.
+
+Not to be confused with `llimphi-widget-panel` (the chrome of ONE titled panel):
+this is the tree of N panes.
+
+## Model
+
+- `Layout` is the tree's **structure** (which leaf lives where, with which ratio
+  per split). It lives in the host's `Model` and is manipulated with
+  `Layout::split`, `Layout::without` and `Layout::resize`.
+- The **content** of each leaf is provided by the host through a
+  `FnMut(PaneId) -> View<Msg>` closure invoked while building the view — which is
+  why it can borrow the `Model` (it need not be `'static`).
+- The resize handler *is* stored in the view tree (the draggable divider takes
+  it), so that one must be `'static + Send + Sync`. The focus one is evaluated at
+  build time (because `on_click` takes the `Msg` by value), so it carries no such
+  restriction.
+
+## Why not `Box<dyn Any>`
+
+Same as the rest of the repo: the host keeps an `enum` of its panel types and
+dispatches statically. The widget is generic over `Msg`; the host decides how to
+materialize each leaf. Zero downcasting.
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/panes/examples/panes_demo.rs b/widgets/panes/examples/panes_demo.rs
index 04522ec..8031fef 100644
--- a/widgets/panes/examples/panes_demo.rs
+++ b/widgets/panes/examples/panes_demo.rs
@@ -70,7 +70,7 @@ impl App for Demo {
             2,
             Pane {
                 title: "Notas".into(),
-                kind: Kind::Notes(vec!["arrastrá el divisor del medio →".into()]),
+                kind: Kind::Notes(vec!["arrastra el divisor del medio →".into()]),
             },
         );
         let mut layout = Layout::single(1);
diff --git a/widgets/panes/src/lib.rs b/widgets/panes/src/lib.rs
index 3aca542..dcb0472 100644
--- a/widgets/panes/src/lib.rs
+++ b/widgets/panes/src/lib.rs
@@ -364,7 +364,7 @@ where
     View::new(Style {
         flex_grow: grow.max(0.01),
         flex_shrink: 1.0,
-        flex_basis: length(0.0),
+        flex_basis: length(0.0_f32),
         size: full(),
         min_size: zero(),
         ..Default::default()
diff --git a/widgets/progress/Cargo.toml b/widgets/progress/Cargo.toml
index 8b97a10..4f8d87c 100644
--- a/widgets/progress/Cargo.toml
+++ b/widgets/progress/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-progress — barras de progreso lineales y radiales determinadas (0.0-1.0). Para indeterminadas usar llimphi-widget-spinner."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/progress/LEEME.md b/widgets/progress/LEEME.md
new file mode 100644
index 0000000..dcdd0ac
--- /dev/null
+++ b/widgets/progress/LEEME.md
@@ -0,0 +1,17 @@
+# llimphi-widget-progress
+
+*Read this in English: [README.md](README.md).*
+
+Progreso determinado, lineal o radial.
+
+Determinado = la app conoce el porcentaje (`0.0..=1.0`). Para
+progreso indeterminado (la op está corriendo, no sé cuánto falta),
+usar `llimphi-widget-spinner`.
+
+Dos formas:
+- `linear_progress_view` — barra horizontal con relleno proporcional.
+- `radial_progress_view` — anillo cuya porción llena indica el avance.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/progress/README.md b/widgets/progress/README.md
new file mode 100644
index 0000000..79e8f29
--- /dev/null
+++ b/widgets/progress/README.md
@@ -0,0 +1,16 @@
+# llimphi-widget-progress
+
+Determinate progress, linear or radial.
+
+Determinate = the app knows the percentage (`0.0..=1.0`). For indeterminate
+progress (the operation is running, I don't know how much is left) use
+`llimphi-widget-spinner`.
+
+Two shapes:
+
+- `linear_progress_view` — a horizontal bar with proportional fill.
+- `radial_progress_view` — a ring whose filled portion shows the advance.
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/rag-sidebar/Cargo.toml b/widgets/rag-sidebar/Cargo.toml
new file mode 100644
index 0000000..d4e8756
--- /dev/null
+++ b/widgets/rag-sidebar/Cargo.toml
@@ -0,0 +1,15 @@
+[package]
+name = "llimphi-widget-rag-sidebar"
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+authors.workspace = true
+publish.workspace = true
+description = "llimphi-widget-rag-sidebar — el chrome reusable de un sidebar acoplable: cabezal uniforme + buscador jerárquico + control mutable con multiswitch de disposición. Render-only, agnóstico del Msg; el host aporta los dientes (rail dock-rail) y el cuerpo del panel."
+
+[dependencies]
+llimphi-ui = { workspace = true }
+llimphi-theme = { workspace = true }
+llimphi-icons = { workspace = true }
+llimphi-widget-segmented = { workspace = true }
+llimphi-widget-dock-rail = { workspace = true }
diff --git a/widgets/rag-sidebar/LEEME.md b/widgets/rag-sidebar/LEEME.md
new file mode 100644
index 0000000..9c43ba8
--- /dev/null
+++ b/widgets/rag-sidebar/LEEME.md
@@ -0,0 +1,34 @@
+# llimphi-widget-rag-sidebar
+
+*Read this in English: [README.md](README.md).*
+
+El **chrome reusable** de un sidebar acoplable ("rag sidebar"): la barra con **buscador jerárquico** + **control mutable**, el **cabezal uniforme** de panel, y el **popover multiswitch** de disposición.
+
+Render-only y agnóstico del `Msg`. El widget NO conoce el dominio: el host
+(pata, wawa-panel, cualquier app) aporta
+
+- los **dientes** del rail (con `llimphi_widget_dock_rail`, aparte),
+- el **cuerpo** del panel abierto (una `View<Msg>` ya pintada por el host),
+- los **grupos** del multiswitch (cada uno un `segmented` con su callback),
+
+y el widget pinta el chrome uniforme alrededor. Así **un solo dueño** pinta el
+header/buscador/control en todas las apps, en vez de que cada una lo re-derive.
+
+(No confundir con `pata-llimphi/src/rag.rs`, que es un *diente* concreto —
+preguntarle al correo con RAG—; aquí "rag" es el nombre del sidebar.)
+```ignore
+let body = mi_panel(...);                 // el host pinta el cuerpo
+let spec = RagSidebarSpec {
+    title: "Archivos".into(), no_header: false, accessory: Some(toggle), body,
+    search: nav.search.clone(), search_focused: nav.focused, search_hits: hay,
+    on_search_focus: Arc::new(|f| Msg::SearchFocus(f)),
+    control_open: nav.control_open, t, on_control_toggle: Msg::ControlToggle,
+    groups: vec![RagSwitchGroup::new("Rail", &["Adentro","Afuera"], outside as usize,
+                   move |i| Msg::SetOutside(i==1))],
+};
+rag_drawer_view(spec, w, h, &RagSidebarPalette::from_theme(&theme))
+```
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/rag-sidebar/README.md b/widgets/rag-sidebar/README.md
new file mode 100644
index 0000000..ca41f46
--- /dev/null
+++ b/widgets/rag-sidebar/README.md
@@ -0,0 +1,36 @@
+# llimphi-widget-rag-sidebar
+
+The **reusable chrome** of a dockable sidebar (the "rag sidebar"): the bar with a
+**hierarchical search box** + a **mutable control**, the uniform panel
+**header**, and the layout **multiswitch popover**.
+
+Render-only and `Msg`-agnostic. The widget does NOT know the domain: the host
+(pata, wawa-panel, any app) supplies
+
+- the rail's **teeth** (through `llimphi_widget_dock_rail`, separately),
+- the **body** of the open panel (a `View<Msg>` already painted by the host),
+- the multiswitch **groups** (each a `segmented` with its callback),
+
+and the widget paints the uniform chrome around them. That way **one single
+owner** paints the header/search/control across every app, instead of each one
+re-deriving it.
+
+(Not to be confused with `pata-llimphi/src/rag.rs`, which is a concrete *tooth* —
+asking your mail through RAG. Here "rag" is the sidebar's name.)
+
+```ignore
+let body = my_panel(...);                 // the host paints the body
+let spec = RagSidebarSpec {
+    title: "Files".into(), no_header: false, accessory: Some(toggle), body,
+    search: nav.search.clone(), search_focused: nav.focused, search_hits: hits,
+    on_search_focus: Arc::new(|f| Msg::SearchFocus(f)),
+    control_open: nav.control_open, t, on_control_toggle: Msg::ControlToggle,
+    groups: vec![RagSwitchGroup::new("Rail", &["Inside","Outside"], outside as usize,
+                   move |i| Msg::SetOutside(i==1))],
+};
+rag_drawer_view(spec, w, h, &RagSidebarPalette::from_theme(&theme))
+```
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/rag-sidebar/src/lib.rs b/widgets/rag-sidebar/src/lib.rs
new file mode 100644
index 0000000..c2a5fea
--- /dev/null
+++ b/widgets/rag-sidebar/src/lib.rs
@@ -0,0 +1,689 @@
+//! `llimphi-widget-rag-sidebar` — el **chrome reusable** de un sidebar acoplable
+//! ("rag sidebar"): la barra con **buscador jerárquico** + **control mutable**, el
+//! **cabezal uniforme** de panel, y el **popover multiswitch** de disposición.
+//!
+//! Render-only y agnóstico del `Msg`. El widget NO conoce el dominio: el host
+//! (pata, wawa-panel, cualquier app) aporta
+//!
+//! - los **dientes** del rail (con [`llimphi_widget_dock_rail`], aparte),
+//! - el **cuerpo** del panel abierto (una `View<Msg>` ya pintada por el host),
+//! - los **grupos** del multiswitch (cada uno un `segmented` con su callback),
+//!
+//! y el widget pinta el chrome uniforme alrededor. Así **un solo dueño** pinta el
+//! header/buscador/control en todas las apps, en vez de que cada una lo re-derive.
+//!
+//! (No confundir con `pata-llimphi/src/rag.rs`, que es un *diente* concreto —
+//! preguntarle al correo con RAG—; aquí "rag" es el nombre del sidebar.)
+//!
+//! ```ignore
+//! let body = mi_panel(...);                 // el host pinta el cuerpo
+//! let spec = RagSidebarSpec {
+//!     title: "Archivos".into(), no_header: false, accessory: Some(toggle), body,
+//!     search: nav.search.clone(), search_focused: nav.focused, search_hits: hay,
+//!     on_search_focus: Arc::new(|f| Msg::SearchFocus(f)),
+//!     control_open: nav.control_open, t, on_control_toggle: Msg::ControlToggle,
+//!     groups: vec![RagSwitchGroup::new("Rail", &["Adentro","Afuera"], outside as usize,
+//!                    move |i| Msg::SetOutside(i==1))],
+//! };
+//! rag_drawer_view(spec, w, h, &RagSidebarPalette::from_theme(&theme))
+//! ```
+
+#![forbid(unsafe_code)]
+
+mod state;
+mod unified;
+
+pub use state::{RagSidebarMsg, RagSidebarState, RagSide};
+pub use unified::{
+    rag_multiselect_view, rag_panel_view, rag_rail_view, rag_sidebar_view, RagOptions,
+    RagSidebarView, RagTooth,
+};
+
+use std::sync::Arc;
+
+use llimphi_ui::llimphi_layout::taffy::{
+    prelude::{auto, length, percent, AlignItems, FlexDirection, JustifyContent, Position, Size, Style},
+    Rect as TaffyRect,
+};
+use llimphi_ui::llimphi_raster::peniko::Color;
+use llimphi_ui::llimphi_text::Alignment;
+use llimphi_ui::{PaintRect, View};
+use llimphi_theme::Theme;
+
+use llimphi_widget_segmented::{segmented_view, SegmentedPalette};
+
+/// Alto de la barra de chrome (buscador + control), en px.
+pub const BAR_H: f32 = 28.0;
+/// Alto del cabezal uniforme de panel, en px.
+pub const HEADER_H: f32 = 40.0;
+/// Padding interno del chrome, en px.
+const PAD: f32 = 8.0;
+
+/// Paleta del chrome, derivada del `Theme` (sin colores hardcodeados).
+#[derive(Debug, Clone, Copy)]
+pub struct RagSidebarPalette {
+    pub bg_panel: Color,
+    pub bg_panel_alt: Color,
+    pub bg_input: Color,
+    pub bg_input_focus: Color,
+    pub bg_button: Color,
+    pub bg_button_hover: Color,
+    pub bg_selected: Color,
+    pub fg_text: Color,
+    pub fg_muted: Color,
+    pub border: Color,
+    pub accent: Color,
+    pub segmented: SegmentedPalette,
+    /// Paleta del rail de dientes (el widget unificado lo pinta adentro).
+    pub rail: llimphi_widget_dock_rail::DockRailPalette,
+}
+
+impl RagSidebarPalette {
+    pub fn from_theme(t: &Theme) -> Self {
+        Self {
+            bg_panel: t.bg_panel,
+            bg_panel_alt: t.bg_panel_alt,
+            bg_input: t.bg_input,
+            bg_input_focus: t.bg_input_focus,
+            bg_button: t.bg_button,
+            bg_button_hover: t.bg_button_hover,
+            bg_selected: t.bg_selected,
+            fg_text: t.fg_text,
+            fg_muted: t.fg_muted,
+            border: t.border,
+            accent: t.accent,
+            segmented: SegmentedPalette::from_theme(t),
+            rail: llimphi_widget_dock_rail::DockRailPalette::from_theme(t),
+        }
+    }
+}
+
+/// Un grupo **excluyente** del multiswitch: un rótulo + un `segmented`. El host lo
+/// arma con su callback (`Fn(usize)->Msg`), así el widget no conoce las acciones.
+pub struct RagSwitchGroup<Msg> {
+    pub label: String,
+    pub options: Vec<String>,
+    pub selected: usize,
+    pub on_select: Arc<dyn Fn(usize) -> Msg + Send + Sync>,
+}
+
+impl<Msg: Clone + Send + Sync + 'static> RagSwitchGroup<Msg> {
+    /// Atajo: `label`, opciones estáticas, índice activo y el callback de selección.
+    pub fn new(
+        label: impl Into<String>,
+        options: &[&str],
+        selected: usize,
+        on_select: impl Fn(usize) -> Msg + Send + Sync + 'static,
+    ) -> Self {
+        Self {
+            label: label.into(),
+            options: options.iter().map(|s| s.to_string()).collect(),
+            selected,
+            on_select: Arc::new(on_select),
+        }
+    }
+}
+
+/// Todo lo que el host aporta para pintar el drawer. Genérico sobre `Msg`; los
+/// cuerpos y dientes los pinta el host (el widget solo pone el chrome).
+pub struct RagSidebarSpec<Msg> {
+    // --- Cabezal ---
+    /// Título del panel abierto (lo pinta el cabezal uniforme).
+    pub title: String,
+    /// Si `true`, el panel no lleva cabezal (para paneles de puro lienzo).
+    pub no_header: bool,
+    /// Slot derecho del cabezal (p. ej. un toggle Árbol/Grafo). `None` = sin él.
+    pub accessory: Option<View<Msg>>,
+    /// El cuerpo del panel abierto, ya pintado y **dimensionado** por el host a
+    /// [`body_height`] (el widget solo lo coloca debajo del cabezal).
+    pub body: View<Msg>,
+    // --- Buscador ---
+    /// Texto del buscador (vacío = idle).
+    pub search: String,
+    /// El buscador tiene el foco de teclado (dibuja el cursor).
+    pub search_focused: bool,
+    /// Hay coincidencias del buscador (tiñe el control idle de acento).
+    pub search_hits: bool,
+    /// Callback al tomar/soltar el foco del buscador (click en la caja / commit).
+    pub on_search_focus: Arc<dyn Fn(bool) -> Msg + Send + Sync>,
+    // --- Control mutable + multiswitch ---
+    /// El popover multiswitch está desplegado.
+    pub control_open: bool,
+    /// Reloj de animación (~20 Hz) para el morph topológico del control idle.
+    pub t: f64,
+    /// `Msg` al clickear el control en idle (abre/cierra el popover).
+    pub on_control_toggle: Msg,
+    /// Grupos excluyentes del popover (los provee el host; vacío = sin popover útil).
+    pub groups: Vec<RagSwitchGroup<Msg>>,
+}
+
+/// Alto disponible para el **cuerpo** del panel dado el alto total del drawer y si
+/// lleva cabezal. El host dimensiona su cuerpo con esto antes de pasarlo al spec.
+pub fn body_height(drawer_h: f32, no_header: bool) -> f32 {
+    let header = if no_header { 0.0 } else { HEADER_H };
+    (drawer_h - BAR_H - header).max(0.0)
+}
+
+/// El **drawer** completo: barra (buscador + control) + cabezal uniforme + cuerpo,
+/// con el popover multiswitch flotando encima si `control_open`. `(w, h)` es el
+/// tamaño del drawer en px.
+pub fn rag_drawer_view<Msg: Clone + Send + Sync + 'static>(
+    spec: RagSidebarSpec<Msg>,
+    w: f32,
+    h: f32,
+    palette: &RagSidebarPalette,
+) -> View<Msg> {
+    drawer_inner(spec, Some((w, h)), palette)
+}
+
+/// Como [`rag_drawer_view`] pero **fill**: en vez de un tamaño en px, el drawer
+/// llena su contenedor (`width/height = 100%`, con el cuerpo en un item flex que
+/// crece). Es la forma para paneles montados en un **pane de splitter** in-app (que
+/// tienen alto flexible), donde no hay un alto en px conocido. El host dimensiona su
+/// `body` a `height: 100%` (no a [`body_height`]).
+pub fn rag_drawer_view_fill<Msg: Clone + Send + Sync + 'static>(
+    spec: RagSidebarSpec<Msg>,
+    palette: &RagSidebarPalette,
+) -> View<Msg> {
+    drawer_inner(spec, None, palette)
+}
+
+/// Ensamblado común del drawer: barra + cabezal + cuerpo (+ popover). `size_px =
+/// Some((w,h))` fija el tamaño en px (drawer de pata, alto conocido); `None` = fill
+/// (llena su contenedor, para panes de splitter in-app).
+fn drawer_inner<Msg: Clone + Send + Sync + 'static>(
+    spec: RagSidebarSpec<Msg>,
+    size_px: Option<(f32, f32)>,
+    palette: &RagSidebarPalette,
+) -> View<Msg> {
+    let RagSidebarSpec {
+        title,
+        no_header,
+        accessory,
+        body,
+        search,
+        search_focused,
+        search_hits,
+        on_search_focus,
+        control_open,
+        t,
+        on_control_toggle,
+        groups,
+    } = spec;
+
+    let bar = sidebar_bar(
+        &search,
+        search_focused,
+        search_hits,
+        control_open,
+        t,
+        on_search_focus,
+        on_control_toggle,
+        palette,
+    );
+
+    let mut panel_hijos: Vec<View<Msg>> = Vec::with_capacity(2);
+    if !no_header {
+        panel_hijos.push(panel_header(&title, accessory, palette));
+    }
+    // Estilo del panel (bajo la barra) y del contenedor externo, según px vs fill.
+    let (panel_style, outer_size) = match size_px {
+        Some((w, h)) => {
+            let cuerpo_h = (h - BAR_H).max(0.0);
+            panel_hijos.push(body);
+            (
+                Style {
+                    flex_direction: FlexDirection::Column,
+                    size: Size { width: percent(1.0_f32), height: length(cuerpo_h) },
+                    ..Default::default()
+                },
+                Size { width: length(w), height: length(h) },
+            )
+        }
+        None => {
+            // Fill: el cuerpo va en un item que crece para llenar el alto restante
+            // (el host pasa su body a `height: 100%`); el panel también crece.
+            panel_hijos.push(
+                View::new(Style {
+                    flex_grow: 1.0,
+                    size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+                    min_size: Size { width: length(0.0_f32), height: length(0.0_f32) },
+                    ..Default::default()
+                })
+                .children(vec![body]),
+            );
+            (
+                Style {
+                    flex_direction: FlexDirection::Column,
+                    flex_grow: 1.0,
+                    size: Size { width: percent(1.0_f32), height: auto() },
+                    min_size: Size { width: length(0.0_f32), height: length(0.0_f32) },
+                    ..Default::default()
+                },
+                Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+            )
+        }
+    };
+    let panel = View::new(panel_style).fill(palette.bg_panel).children(panel_hijos);
+
+    let mut hijos = vec![bar, panel];
+    if control_open && !groups.is_empty() {
+        hijos.push(multiswitch_popover(groups, palette));
+    }
+    View::new(Style {
+        flex_direction: FlexDirection::Column,
+        size: outer_size,
+        ..Default::default()
+    })
+    .fill(palette.bg_panel)
+    .children(hijos)
+}
+
+/// El **cabezal uniforme** de un panel: título a la izquierda + accesorio opcional
+/// a la derecha, sobre una franja `bg_panel_alt` con relieve (sheen) + hairline.
+/// Público para que el host lo reuse en previews sin el drawer entero.
+pub fn panel_header<Msg: Clone + Send + Sync + 'static>(
+    title: &str,
+    accessory: Option<View<Msg>>,
+    palette: &RagSidebarPalette,
+) -> View<Msg> {
+    let mut fila_hijos: Vec<View<Msg>> = vec![View::new(Style {
+        flex_grow: 1.0,
+        size: Size { width: percent(0.0_f32), height: length(HEADER_H - 1.0) },
+        align_items: Some(AlignItems::Center),
+        ..Default::default()
+    })
+    .text(title.to_string(), 13.0, palette.fg_text)];
+    if let Some(a) = accessory {
+        fila_hijos.push(a);
+    }
+    let fila = View::new(Style {
+        flex_direction: FlexDirection::Row,
+        size: Size { width: percent(1.0_f32), height: length(HEADER_H - 1.0) },
+        align_items: Some(AlignItems::Center),
+        justify_content: Some(JustifyContent::SpaceBetween),
+        padding: TaffyRect {
+            left: length(PAD),
+            right: length(PAD),
+            top: length(0.0_f32),
+            bottom: length(0.0_f32),
+        },
+        gap: Size { width: length(8.0_f32), height: length(0.0_f32) },
+        flex_shrink: 0.0,
+        ..Default::default()
+    })
+    .fill(palette.bg_panel_alt)
+    .paint_with(|scene, _ts, rect| paint_sheen(scene, rect, 0.0, 12, 14))
+    .children(fila_hijos);
+    let hairline = View::new(Style {
+        size: Size { width: percent(1.0_f32), height: length(1.0_f32) },
+        flex_shrink: 0.0,
+        ..Default::default()
+    })
+    .fill(palette.border);
+    View::new(Style {
+        flex_direction: FlexDirection::Column,
+        size: Size { width: percent(1.0_f32), height: length(HEADER_H) },
+        flex_shrink: 0.0,
+        ..Default::default()
+    })
+    .children(vec![fila, hairline])
+}
+
+/// La **barra de chrome**: buscador (crece) + control mutable.
+#[allow(clippy::too_many_arguments)]
+fn sidebar_bar<Msg: Clone + Send + Sync + 'static>(
+    search: &str,
+    focused: bool,
+    hits: bool,
+    control_open: bool,
+    t: f64,
+    on_search_focus: Arc<dyn Fn(bool) -> Msg + Send + Sync>,
+    on_control_toggle: Msg,
+    palette: &RagSidebarPalette,
+) -> View<Msg> {
+    View::new(Style {
+        flex_direction: FlexDirection::Row,
+        size: Size { width: percent(1.0_f32), height: length(BAR_H) },
+        align_items: Some(AlignItems::Center),
+        padding: TaffyRect {
+            left: length(PAD),
+            right: length(PAD),
+            top: length(0.0_f32),
+            bottom: length(0.0_f32),
+        },
+        gap: Size { width: length(6.0_f32), height: length(0.0_f32) },
+        flex_shrink: 0.0,
+        ..Default::default()
+    })
+    .fill(palette.bg_panel_alt)
+    .paint_with(|scene, _ts, rect| paint_sheen(scene, rect, 0.0, 10, 12))
+    .children(vec![
+        search_box(search, focused, on_search_focus.clone(), palette),
+        mutable_control(search, hits, control_open, t, on_search_focus, on_control_toggle, palette),
+    ])
+}
+
+/// La caja del **buscador**: lupa + texto (o placeholder) + cursor si tiene foco.
+fn search_box<Msg: Clone + Send + Sync + 'static>(
+    search: &str,
+    focused: bool,
+    on_focus: Arc<dyn Fn(bool) -> Msg + Send + Sync>,
+    palette: &RagSidebarPalette,
+) -> View<Msg> {
+    let hay = !search.is_empty();
+    let texto = if hay {
+        if focused { format!("{search}▌") } else { search.to_string() }
+    } else if focused {
+        "▌".to_string()
+    } else {
+        "Buscar…".to_string()
+    };
+    let color = if hay { palette.fg_text } else { palette.fg_muted };
+    let lupa = View::new(Style {
+        size: Size { width: length(16.0_f32), height: length(16.0_f32) },
+        align_items: Some(AlignItems::Center),
+        justify_content: Some(JustifyContent::Center),
+        flex_shrink: 0.0,
+        ..Default::default()
+    })
+    .children(vec![llimphi_icons::icon_view::<Msg>(llimphi_icons::Icon::Search, palette.fg_muted, 1.8)]);
+    let campo = View::new(Style {
+        flex_grow: 1.0,
+        size: Size { width: percent(0.0_f32), height: length(BAR_H - 8.0) },
+        align_items: Some(AlignItems::Center),
+        ..Default::default()
+    })
+    .text_aligned(texto, 12.5, color, Alignment::Start);
+    View::new(Style {
+        flex_direction: FlexDirection::Row,
+        flex_grow: 1.0,
+        size: Size { width: percent(0.0_f32), height: length(BAR_H - 6.0) },
+        align_items: Some(AlignItems::Center),
+        padding: TaffyRect {
+            left: length(8.0_f32),
+            right: length(8.0_f32),
+            top: length(0.0_f32),
+            bottom: length(0.0_f32),
+        },
+        gap: Size { width: length(6.0_f32), height: length(0.0_f32) },
+        ..Default::default()
+    })
+    .fill(if focused { palette.bg_input_focus } else { palette.bg_input })
+    .hover_fill(palette.bg_input_focus)
+    .radius(7.0)
+    .on_click((on_focus)(true))
+    .children(vec![lupa, campo])
+}
+
+/// El **control mutable**: lupa "buscar" con texto / gear+halo que respira en idle
+/// (comunicador de estado que abre el multiswitch como switch).
+#[allow(clippy::too_many_arguments)]
+fn mutable_control<Msg: Clone + Send + Sync + 'static>(
+    search: &str,
+    hits: bool,
+    control_open: bool,
+    t: f64,
+    on_search_focus: Arc<dyn Fn(bool) -> Msg + Send + Sync>,
+    on_control_toggle: Msg,
+    palette: &RagSidebarPalette,
+) -> View<Msg> {
+    let side = BAR_H - 6.0;
+    let hay_texto = !search.is_empty();
+    let (icon, tint, bg, msg) = if hay_texto {
+        (llimphi_icons::Icon::Search, palette.accent, palette.bg_button, (on_search_focus)(false))
+    } else {
+        let tint = if control_open || hits { palette.accent } else { palette.fg_muted };
+        let bg = if control_open { palette.bg_selected } else { palette.bg_button };
+        (llimphi_icons::Icon::Settings, tint, bg, on_control_toggle)
+    };
+    let icono = View::new(Style {
+        size: Size { width: length(18.0_f32), height: length(18.0_f32) },
+        align_items: Some(AlignItems::Center),
+        justify_content: Some(JustifyContent::Center),
+        ..Default::default()
+    })
+    .children(vec![llimphi_icons::icon_view::<Msg>(icon, tint, 1.9)]);
+    let mut caja = View::new(Style {
+        size: Size { width: length(side), height: length(side) },
+        align_items: Some(AlignItems::Center),
+        justify_content: Some(JustifyContent::Center),
+        flex_shrink: 0.0,
+        ..Default::default()
+    })
+    .fill(bg)
+    .hover_fill(palette.bg_button_hover)
+    .radius(8.0)
+    .on_click(msg);
+    if !hay_texto {
+        let halo = if control_open || hits { palette.accent } else { palette.fg_muted };
+        caja = caja.paint_with(move |scene, _ts, rect| paint_pulse_halo(scene, rect, t, halo));
+    }
+    caja.children(vec![icono])
+}
+
+/// La **card** del multiswitch: los grupos excluyentes del host, apilados, con
+/// fondo/borde/sheen. **Sin posicionar** — el caller la coloca (popover inline, o
+/// ventana/overlay externa que no queda clipeada por el panel). Público al crate para
+/// que la vista unificada la exponga como control externo.
+pub(crate) fn multiswitch_card<Msg: Clone + Send + Sync + 'static>(
+    groups: Vec<RagSwitchGroup<Msg>>,
+    palette: &RagSidebarPalette,
+) -> View<Msg> {
+    let titulo = View::new(Style {
+        size: Size { width: percent(1.0_f32), height: length(18.0_f32) },
+        align_items: Some(AlignItems::Center),
+        ..Default::default()
+    })
+    .text_aligned("Disposición".to_string(), 11.0, palette.fg_muted, Alignment::Start);
+    let mut filas: Vec<View<Msg>> = vec![titulo];
+    for g in groups {
+        let opts: Vec<&str> = g.options.iter().map(|s| s.as_str()).collect();
+        let sel = g.on_select.clone();
+        let seg = View::new(Style {
+            flex_grow: 1.0,
+            size: Size { width: percent(0.0_f32), height: length(22.0_f32) },
+            ..Default::default()
+        })
+        .children(vec![segmented_view(&opts, g.selected, move |i| (sel)(i), &palette.segmented)]);
+        let lab = View::new(Style {
+            size: Size { width: length(60.0_f32), height: length(22.0_f32) },
+            align_items: Some(AlignItems::Center),
+            flex_shrink: 0.0,
+            ..Default::default()
+        })
+        .text_aligned(g.label.clone(), 11.5, palette.fg_muted, Alignment::Start);
+        filas.push(
+            View::new(Style {
+                flex_direction: FlexDirection::Row,
+                size: Size { width: percent(1.0_f32), height: length(22.0_f32) },
+                align_items: Some(AlignItems::Center),
+                gap: Size { width: length(8.0_f32), height: length(0.0_f32) },
+                ..Default::default()
+            })
+            .children(vec![lab, seg]),
+        );
+    }
+    let card = View::new(Style {
+        flex_direction: FlexDirection::Column,
+        size: Size { width: length(238.0_f32), height: auto() },
+        padding: TaffyRect {
+            left: length(10.0_f32),
+            right: length(10.0_f32),
+            top: length(8.0_f32),
+            bottom: length(10.0_f32),
+        },
+        gap: Size { width: length(0.0_f32), height: length(7.0_f32) },
+        ..Default::default()
+    })
+    .fill(palette.bg_panel_alt)
+    .radius(10.0)
+    .border(1.0, palette.border)
+    .paint_with(|scene, _ts, rect| paint_sheen(scene, rect, 10.0, 14, 16))
+    .children(filas);
+    card
+}
+
+/// El **popover multiswitch** inline: la [`multiswitch_card`] posicionada en absoluto
+/// bajo la barra, arrimada a la derecha. Uso legacy del drawer de pata; la vista
+/// unificada lo saca a una ventana/overlay externa (ver `rag_multiselect_view`).
+fn multiswitch_popover<Msg: Clone + Send + Sync + 'static>(
+    groups: Vec<RagSwitchGroup<Msg>>,
+    palette: &RagSidebarPalette,
+) -> View<Msg> {
+    View::new(Style {
+        position: Position::Absolute,
+        inset: TaffyRect {
+            top: length(BAR_H + 2.0),
+            right: length(PAD),
+            left: auto(),
+            bottom: auto(),
+        },
+        ..Default::default()
+    })
+    .children(vec![multiswitch_card(groups, palette)])
+}
+
+/// Una **encía**: el botón que hace *crecer un diente nuevo* en una posición del
+/// rail — al **final** de una lista iterativa, o en un **hueco intermedio** cuando
+/// los dientes tienen saltos. NO es un diente (es el tejido del que brota uno): se
+/// ve SIEMPRE igual (cajita chica con borde, media altura de diente); solo cambia
+/// el `glyph` interior (aquí `"+"`). El host decide dónde va —entre qué dientes— y
+/// qué hace (`on_grow`); el widget solo aporta su forma reusable.
+///
+/// ```ignore
+/// // Intercalada por el host entre los dientes de un dock-rail:
+/// rag_encia_view("+", "Nuevo escritorio", Msg::NuevoWorkspace(4), &palette)
+/// ```
+pub fn rag_encia_view<Msg: Clone + Send + Sync + 'static>(
+    glyph: &str,
+    tooltip: impl Into<String>,
+    on_grow: Msg,
+    palette: &RagSidebarPalette,
+) -> View<Msg> {
+    View::new(Style {
+        size: Size { width: length(30.0_f32), height: length(18.0_f32) },
+        align_items: Some(AlignItems::Center),
+        justify_content: Some(JustifyContent::Center),
+        flex_shrink: 0.0,
+        ..Default::default()
+    })
+    .radius(5.0)
+    .border(1.0, palette.border)
+    .hover_fill(palette.bg_button_hover)
+    .tooltip(tooltip.into())
+    .on_click(on_grow)
+    .text(glyph.to_string(), 13.0, palette.fg_muted)
+}
+
+/// Un **sheen vertical** sutil (highlight arriba → sombra abajo) para dar relieve a
+/// una franja del chrome, con la técnica de gradiente del `llimphi-button`. Público
+/// para que el host lo reuse en sus propias franjas.
+pub fn paint_sheen(
+    scene: &mut llimphi_ui::llimphi_raster::vello::Scene,
+    rect: PaintRect,
+    radius: f64,
+    top_a: u8,
+    bot_a: u8,
+) {
+    use llimphi_ui::llimphi_raster::kurbo::{Affine, Point, RoundedRect};
+    use llimphi_ui::llimphi_raster::peniko::{Fill, Gradient};
+    if rect.w <= 0.0 || rect.h <= 0.0 {
+        return;
+    }
+    let x0 = rect.x as f64;
+    let y0 = rect.y as f64;
+    let x1 = (rect.x + rect.w) as f64;
+    let y1 = (rect.y + rect.h) as f64;
+    let rr = RoundedRect::new(x0, y0, x1, y1, radius);
+    let top = Color::from_rgba8(255, 255, 255, top_a);
+    let mid = Color::from_rgba8(255, 255, 255, 0);
+    let bot = Color::from_rgba8(0, 0, 0, bot_a);
+    let g = Gradient::new_linear(Point::new(x0, y0), Point::new(x0, y1))
+        .with_stops([top, mid, bot].as_slice());
+    scene.fill(Fill::NonZero, Affine::IDENTITY, &g, None, &rr);
+}
+
+/// Un **halo que respira** detrás del control idle: un glow de `color` cuyo alpha
+/// late suave con `t` (el "comunicador de estado que se transforma").
+fn paint_pulse_halo(
+    scene: &mut llimphi_ui::llimphi_raster::vello::Scene,
+    rect: PaintRect,
+    t: f64,
+    color: Color,
+) {
+    use llimphi_ui::llimphi_raster::kurbo::{Affine, Ellipse, Point};
+    use llimphi_ui::llimphi_raster::peniko::Fill;
+    if rect.w <= 0.0 || rect.h <= 0.0 {
+        return;
+    }
+    // Respiración: 0.35..0.75 del alpha base, ~0.5 Hz.
+    let breath = 0.55 + 0.20 * (t * std::f64::consts::TAU * 0.5).sin();
+    let a = (breath * 90.0).clamp(0.0, 255.0) as u8;
+    let cx = (rect.x + rect.w * 0.5) as f64;
+    let cy = (rect.y + rect.h * 0.5) as f64;
+    let r = (rect.w.min(rect.h) as f64) * 0.5 * breath;
+    let glow = Color { components: [color.components[0], color.components[1], color.components[2], a as f32 / 255.0], ..color };
+    let e = Ellipse::new(Point::new(cx, cy), (r, r), 0.0);
+    scene.fill(Fill::NonZero, Affine::IDENTITY, &glow, None, &e);
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    fn palette() -> RagSidebarPalette {
+        RagSidebarPalette::from_theme(&Theme::dark())
+    }
+
+    fn spec(no_header: bool, control_open: bool) -> RagSidebarSpec<i32> {
+        RagSidebarSpec {
+            title: "Panel".into(),
+            no_header,
+            accessory: None,
+            body: View::new(Style::default()),
+            search: String::new(),
+            search_focused: false,
+            search_hits: false,
+            on_search_focus: Arc::new(|_| 0i32),
+            control_open,
+            t: 0.0,
+            on_control_toggle: 1i32,
+            groups: vec![RagSwitchGroup::new("Rail", &["A", "B"], 0, |_| 2i32)],
+        }
+    }
+
+    /// El drawer siempre trae la barra + el panel; con el popover abierto, +1 hijo.
+    #[test]
+    fn drawer_estructura() {
+        let cerrado = rag_drawer_view(spec(false, false), 300.0, 400.0, &palette());
+        assert_eq!(cerrado.children.len(), 2, "barra + panel");
+        let abierto = rag_drawer_view(spec(false, true), 300.0, 400.0, &palette());
+        assert_eq!(abierto.children.len(), 3, "barra + panel + popover");
+    }
+
+    /// Con `no_header`, el panel es solo el cuerpo (1 hijo); con header, 2.
+    #[test]
+    fn header_opcional() {
+        let con = rag_drawer_view(spec(false, false), 300.0, 400.0, &palette());
+        assert_eq!(con.children[1].children.len(), 2, "cabezal + cuerpo");
+        let sin = rag_drawer_view(spec(true, false), 300.0, 400.0, &palette());
+        assert_eq!(sin.children[1].children.len(), 1, "solo cuerpo");
+    }
+
+    /// La encía es un botón con su glifo; el host le cuelga el `on_grow`.
+    #[test]
+    fn encia_lleva_glifo() {
+        let e = rag_encia_view::<i32>("+", "Nuevo", 7, &palette());
+        // Es un nodo clickeable con el texto del glifo (no un diente).
+        assert!(!e.children.is_empty() || e.text.is_some());
+    }
+
+    /// `body_height` descuenta la barra y (si aplica) el cabezal.
+    #[test]
+    fn body_height_descuenta() {
+        assert_eq!(body_height(400.0, false), 400.0 - BAR_H - HEADER_H);
+        assert_eq!(body_height(400.0, true), 400.0 - BAR_H);
+        assert_eq!(body_height(10.0, false), 0.0);
+    }
+}
diff --git a/widgets/rag-sidebar/src/state.rs b/widgets/rag-sidebar/src/state.rs
new file mode 100644
index 0000000..ed69fcc
--- /dev/null
+++ b/widgets/rag-sidebar/src/state.rs
@@ -0,0 +1,337 @@
+//! Estado + reducer **compartido** del rag-sidebar. Aquí viven, en UN solo lugar,
+//! los cuatro ejes de disposición ("Rail Adentro/Afuera", "Espacio Flota/Fijo",
+//! "Ocultar Autohide", "Dientes Un/Dos pasos"), el diente abierto/seleccionado y
+//! el comportamiento de cada opción. Cada app guarda un [`RagSidebarState`] en su
+//! Model y le enruta los [`RagSidebarMsg`] que emite la vista; así **todas** las
+//! apps se comportan idéntico sin re-derivar la lógica.
+//!
+//! Es render-agnóstico: no conoce ni el `Msg` del host ni cómo se pinta. La vista
+//! (`unified.rs`) lee este estado; el host lo muta con [`RagSidebarState::update`].
+
+/// Ancho mínimo del panel al redimensionar (px).
+pub const RAG_PANEL_MIN_W: f32 = 150.0;
+/// Ancho máximo del panel al redimensionar (px).
+pub const RAG_PANEL_MAX_W: f32 = 680.0;
+
+/// El lado del que cuelga el sidebar — decide hacia dónde sobresalen los dientes.
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
+pub enum RagSide {
+    /// Sidebar a la izquierda (dientes sobresalen hacia el centro, a la derecha).
+    #[default]
+    Left,
+    /// Sidebar a la derecha (dientes espejados, sobresalen hacia la izquierda).
+    Right,
+}
+
+/// Los cuatro ejes de disposición + el estado vivo del sidebar. El host persiste
+/// los ejes donde quiera (TOML, perfil…) y reconstruye el resto por sesión.
+#[derive(Debug, Clone)]
+pub struct RagSidebarState {
+    /// Rail **AFUERA** (franja/columna reservada, el diente "afuera" del panel) vs
+    /// **ADENTRO** (`false`, el rail flota como overlay sobre el borde del panel).
+    /// Eje "Rail Adentro/Afuera".
+    pub rail_outside: bool,
+    /// **FIJO** (`true`, el sidebar reserva su ancho en el layout) vs **FLOTA**
+    /// (`false`, overlay que se **guarda al desenfocar**). Eje "Espacio Flota/Fijo".
+    pub docked: bool,
+    /// El sidebar se **esconde** y reaparece al hover del borde. Eje "Ocultar".
+    pub autohide: bool,
+    /// Click del diente: `false` = **un paso** (un click despliega); `true` = **dos
+    /// pasos** (click 1 selecciona sin desplegar, click 2 despliega). Eje "Dientes".
+    pub dos_pasos: bool,
+    /// Diente **DESPLEGADO** (su panel es visible). `None` = colapsado (solo rail).
+    pub open: Option<u64>,
+    /// Diente **SELECCIONADO** (resaltado en el rail). En un-paso sigue a `open`;
+    /// en dos-pasos puede estar seleccionado con el panel replegado.
+    pub selected: Option<u64>,
+    /// Ancho del panel de contenido (px), **redimensionable** arrastrando el divisor
+    /// del borde interno ([`RagSidebarMsg::Resize`]). El rail suma su propio ancho
+    /// aparte. El alto lo llena el contenedor del host.
+    pub panel_w: f32,
+    /// El popover multiswitch de disposición está desplegado.
+    pub control_open: bool,
+    /// Texto del buscador jerárquico (vacío = idle). El host aplica su semántica.
+    pub search: String,
+    /// El buscador tiene el foco de teclado (las teclas van al buscador).
+    pub search_focused: bool,
+    /// El puntero está sobre el sidebar o su zona de reaparición. Gobierna el
+    /// reveal con [`Self::autohide`] y el guardado al desenfocar con FLOTA.
+    pub revealed: bool,
+}
+
+impl Default for RagSidebarState {
+    fn default() -> Self {
+        Self {
+            rail_outside: false,
+            docked: true,
+            autohide: false,
+            dos_pasos: false,
+            open: None,
+            selected: None,
+            panel_w: 260.0,
+            control_open: false,
+            search: String::new(),
+            search_focused: false,
+            revealed: false,
+        }
+    }
+}
+
+/// Los mensajes que emite la vista del rag-sidebar; el host los enruta a
+/// [`RagSidebarState::update`] (típicamente vía una única variante
+/// `Msg::Sidebar(RagSidebarMsg)`).
+#[derive(Debug, Clone, PartialEq)]
+pub enum RagSidebarMsg {
+    /// Click en el diente `id` (respeta un/dos pasos).
+    Activate(u64),
+    /// Eje "Rail": `true` = Afuera, `false` = Adentro.
+    SetRailOutside(bool),
+    /// Eje "Espacio": `true` = Fijo, `false` = Flota.
+    SetDocked(bool),
+    /// Eje "Ocultar": `true` = Autoesconde.
+    SetAutohide(bool),
+    /// Eje "Dientes": `true` = Dos pasos.
+    SetDosPasos(bool),
+    /// Redimensiona el panel: suma `dx` (px) al ancho, con clamp
+    /// [`RAG_PANEL_MIN_W`]..[`RAG_PANEL_MAX_W`]. Lo emite el divisor arrastrable.
+    Resize(f32),
+    /// Abre/cierra el popover de disposición.
+    ControlToggle,
+    /// Toma (`true`) o suelta (`false`) el foco del buscador.
+    SearchFocus(bool),
+    /// Reemplaza el texto del buscador.
+    SearchSet(String),
+    /// El puntero entró (`true`) o salió (`false`) del sidebar / su zona de
+    /// reaparición. Con FLOTA y sin foco de buscador, salir **guarda** el panel;
+    /// con AUTOHIDE controla el reveal del rail.
+    Reveal(bool),
+    /// Desenfoque duro (la ventana/superficie perdió el foco): con FLOTA guarda el
+    /// panel replegándolo.
+    Blur,
+}
+
+impl RagSidebarState {
+    /// `true` si el diente `id` está desplegado (su panel visible).
+    pub fn is_open(&self, id: u64) -> bool {
+        self.open == Some(id)
+    }
+
+    /// `true` si el diente `id` está seleccionado (resaltado en el rail).
+    pub fn is_selected(&self, id: u64) -> bool {
+        self.selected == Some(id)
+    }
+
+    /// El panel de contenido está visible ahora (hay un diente desplegado).
+    pub fn panel_visible(&self) -> bool {
+        self.open.is_some()
+    }
+
+    /// El sidebar está **oculto**: en modo autohide, sin panel desplegado y sin
+    /// hover — el host puede pintar solo una fina zona de reaparición en el borde.
+    pub fn hidden(&self) -> bool {
+        self.autohide && !self.revealed && self.open.is_none()
+    }
+
+    /// `true` si el sidebar (unificado rail+panel de las apps no-delegadas) debe
+    /// **reservar** su ancho en el layout: Fijo y sin autohide. Con FLOTA o AUTOHIDE
+    /// flota como overlay sin empujar el contenido. (En pata, que SÍ separa el rail
+    /// del panel en dos surfaces, la reserva del panel abierto sigue a Fijo aunque
+    /// autoesconda — eso lo resuelve `aplicar_geometria_sidebar`, no este helper.)
+    pub fn reserves_space(&self) -> bool {
+        self.docked && !self.autohide
+    }
+
+    /// Aplica un mensaje al estado. Es el **único** lugar donde se decide qué hace
+    /// cada opción, para que todas las apps se comporten igual.
+    pub fn update(&mut self, msg: RagSidebarMsg) {
+        match msg {
+            RagSidebarMsg::Activate(id) => self.activate(id),
+            RagSidebarMsg::SetRailOutside(b) => self.rail_outside = b,
+            RagSidebarMsg::SetDocked(b) => {
+                self.docked = b;
+                // Al pasar a FIJO el panel deja de guardarse al desenfocar; nada más
+                // que hacer. Al pasar a FLOTA se mantiene abierto hasta el próximo
+                // `Reveal(false)`/`Blur`.
+            }
+            RagSidebarMsg::SetAutohide(b) => {
+                self.autohide = b;
+                if b {
+                    // "Autoesconde" → se esconde YA: repliega el panel y se oculta
+                    // (queda solo la franja caliente hasta que el puntero la toque).
+                    self.open = None;
+                    self.revealed = false;
+                } else {
+                    // Apagarlo revela siempre (el rail vuelve a estar a la vista).
+                    self.revealed = true;
+                }
+            }
+            RagSidebarMsg::SetDosPasos(b) => self.dos_pasos = b,
+            RagSidebarMsg::Resize(dx) => {
+                self.panel_w = (self.panel_w + dx).clamp(RAG_PANEL_MIN_W, RAG_PANEL_MAX_W);
+            }
+            RagSidebarMsg::ControlToggle => self.control_open = !self.control_open,
+            RagSidebarMsg::SearchFocus(f) => self.search_focused = f,
+            RagSidebarMsg::SearchSet(s) => self.search = s,
+            RagSidebarMsg::Reveal(v) => {
+                self.revealed = v;
+                if v {
+                    // FIJO + autohide: al autodesesconderse queda DESPLEGADO (el panel
+                    // del diente seleccionado). FLOTA + autohide: revela solo el rail
+                    // (lo abres vos). Es lo que hace "combinar" fijo con autohide.
+                    if self.docked && self.autohide && self.open.is_none() {
+                        self.open = self.selected;
+                    }
+                } else {
+                    self.guardar_si_flota();
+                }
+            }
+            RagSidebarMsg::Blur => {
+                self.revealed = false;
+                self.control_open = false;
+                self.guardar_si_flota();
+            }
+        }
+    }
+
+    /// Repliega el panel al perder el hover/foco cuando corresponde: con FLOTA (no
+    /// docked) — "si no está dock, se guarda cuando no está enfocado" — o con AUTOHIDE
+    /// (el sidebar se esconde entero al irse el puntero). Nunca con el buscador
+    /// enfocado (estás tipeando).
+    fn guardar_si_flota(&mut self) {
+        if (!self.docked || self.autohide) && !self.search_focused {
+            self.open = None;
+        }
+    }
+
+    /// Click en el diente `id`, respetando el modo un/dos pasos. Espeja la lógica
+    /// canónica de `pata::NavState::activate_tab`.
+    fn activate(&mut self, id: u64) {
+        // Cualquier interacción con un diente cuenta como "revelado".
+        self.revealed = true;
+        if !self.dos_pasos {
+            // Un paso: un click despliega/repliega; `selected` sigue a `open`.
+            if self.open == Some(id) {
+                self.open = None;
+                self.selected = None;
+            } else {
+                self.open = Some(id);
+                self.selected = Some(id);
+            }
+            return;
+        }
+        // Dos pasos: primer click selecciona sin desplegar; segundo despliega/repliega.
+        if self.selected != Some(id) {
+            self.selected = Some(id);
+            self.open = None;
+        } else if self.open == Some(id) {
+            self.open = None;
+        } else {
+            self.open = Some(id);
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn un_paso_despliega_y_repliega() {
+        let mut s = RagSidebarState { dos_pasos: false, ..Default::default() };
+        s.update(RagSidebarMsg::Activate(3));
+        assert!(s.is_open(3) && s.is_selected(3));
+        s.update(RagSidebarMsg::Activate(3));
+        assert!(!s.panel_visible() && s.selected.is_none());
+    }
+
+    #[test]
+    fn dos_pasos_primero_selecciona_luego_despliega() {
+        let mut s = RagSidebarState { dos_pasos: true, ..Default::default() };
+        s.update(RagSidebarMsg::Activate(1));
+        assert!(s.is_selected(1) && !s.panel_visible(), "primer click: selecciona sin abrir");
+        s.update(RagSidebarMsg::Activate(1));
+        assert!(s.is_open(1), "segundo click: despliega");
+        s.update(RagSidebarMsg::Activate(1));
+        assert!(!s.panel_visible() && s.is_selected(1), "tercer click: repliega, sigue seleccionado");
+    }
+
+    #[test]
+    fn flota_se_guarda_al_desenfocar() {
+        let mut s = RagSidebarState { docked: false, ..Default::default() };
+        s.update(RagSidebarMsg::Activate(2));
+        assert!(s.is_open(2));
+        s.update(RagSidebarMsg::Reveal(false));
+        assert!(!s.panel_visible(), "flota + sin hover → se guarda");
+    }
+
+    #[test]
+    fn fijo_no_se_guarda_al_desenfocar() {
+        let mut s = RagSidebarState { docked: true, ..Default::default() };
+        s.update(RagSidebarMsg::Activate(2));
+        s.update(RagSidebarMsg::Reveal(false));
+        assert!(s.is_open(2), "fijo → sigue abierto sin hover");
+    }
+
+    #[test]
+    fn buscador_enfocado_no_se_guarda() {
+        let mut s = RagSidebarState { docked: false, ..Default::default() };
+        s.update(RagSidebarMsg::Activate(2));
+        s.update(RagSidebarMsg::SearchFocus(true));
+        s.update(RagSidebarMsg::Blur);
+        assert!(s.is_open(2), "con el buscador enfocado no se guarda");
+    }
+
+    #[test]
+    fn fijo_mas_autohide_revela_desplegado() {
+        // Fijo (docked) + autohide: al revelar queda DESPLEGADO (panel abierto).
+        let mut s = RagSidebarState {
+            docked: true,
+            autohide: true,
+            selected: Some(7),
+            ..Default::default()
+        };
+        assert!(s.hidden() && !s.panel_visible(), "arranca oculto");
+        s.update(RagSidebarMsg::Reveal(true));
+        assert!(s.is_open(7), "fijo+autohide al revelar despliega el diente seleccionado");
+        // Flota + autohide: revelar NO despliega (solo el rail).
+        let mut f = RagSidebarState {
+            docked: false,
+            autohide: true,
+            selected: Some(7),
+            ..Default::default()
+        };
+        f.update(RagSidebarMsg::Reveal(true));
+        assert!(!f.panel_visible(), "flota+autohide al revelar muestra solo el rail");
+    }
+
+    #[test]
+    fn autohide_oculta_sin_panel_ni_hover() {
+        let mut s = RagSidebarState { autohide: true, ..Default::default() };
+        assert!(s.hidden(), "autohide + sin panel + sin hover → oculto");
+        s.update(RagSidebarMsg::Reveal(true));
+        assert!(!s.hidden(), "hover lo revela");
+    }
+
+    #[test]
+    fn resize_suma_y_clampea() {
+        let mut s = RagSidebarState { panel_w: 260.0, ..Default::default() };
+        s.update(RagSidebarMsg::Resize(40.0));
+        assert_eq!(s.panel_w, 300.0);
+        s.update(RagSidebarMsg::Resize(-9999.0));
+        assert_eq!(s.panel_w, RAG_PANEL_MIN_W);
+        s.update(RagSidebarMsg::Resize(9999.0));
+        assert_eq!(s.panel_w, RAG_PANEL_MAX_W);
+    }
+
+    #[test]
+    fn reserva_espacio_solo_fijo_no_autohide() {
+        // El sidebar unificado (nakui/wawa) reserva sólo Fijo y sin autohide.
+        let mut s = RagSidebarState { docked: true, autohide: false, ..Default::default() };
+        assert!(s.reserves_space());
+        s.autohide = true;
+        assert!(!s.reserves_space(), "autohide → el sidebar unificado no reserva");
+        s.autohide = false;
+        s.docked = false;
+        assert!(!s.reserves_space(), "Flota → no reserva");
+    }
+}
diff --git a/widgets/rag-sidebar/src/unified.rs b/widgets/rag-sidebar/src/unified.rs
new file mode 100644
index 0000000..af7ba82
--- /dev/null
+++ b/widgets/rag-sidebar/src/unified.rs
@@ -0,0 +1,812 @@
+//! La **vista unificada** del rag-sidebar: UN solo widget que es dueño del rail de
+//! dientes (vía `dock-rail`, adentro) **y** del panel + chrome (buscador + control
+//! + popover de las 4 opciones). Cada app monta esto con sus dientes y su
+//! [`RagSidebarState`]; hereda el comportamiento de las 4 opciones sin re-derivarlo.
+//!
+//! Antes había dos cosas: `dock-rail` (los dientes) y `rag-sidebar` (el chrome, sin
+//! rail). Por eso las apps componían a mano y "Rail Adentro/Afuera" no hacía nada.
+//! Ahora el rail vive **dentro** del widget, que decide su posición según el estado.
+//!
+//! El widget sigue siendo render-only y agnóstico del `Msg` del host: emite
+//! [`RagSidebarMsg`] a través de un `map` que el host enruta a
+//! [`RagSidebarState::update`].
+//!
+//! ```ignore
+//! let spec = RagSidebarView {
+//!     teeth: vec![RagTooth::new(0, "Árbol", Arc::new(|s,c| icono(s,c)))],
+//!     body: mi_panel(body_height(h, false)),   // cuerpo del diente abierto
+//!     accessory: None, search_hits: false, t, rail_w: 44.0,
+//!     map: Arc::new(Msg::Sidebar), on_drop: None, on_reorder: None, grow: None,
+//! };
+//! rag_sidebar_view(&model.sidebar, spec, RagSide::Left, panel_w, h, &palette)
+//! ```
+
+use std::sync::Arc;
+
+use llimphi_ui::llimphi_layout::taffy::{
+    prelude::{auto, length, percent, AlignItems, FlexDirection, JustifyContent, Position, Size, Style},
+    Rect as TaffyRect,
+};
+use llimphi_ui::llimphi_raster::peniko::Color;
+use llimphi_ui::{PaintRect, View};
+
+use llimphi_widget_dock_rail::{dock_rail_view_full, DockBadge, DockRailItem, DockRailSide, ReorderFn};
+
+use crate::state::{RagSide, RagSidebarMsg, RagSidebarState};
+use crate::{RagSidebarPalette, RagSidebarSpec, RagSwitchGroup};
+
+/// Un **diente** del sidebar unificado: su `id`, el título de su panel y cómo se
+/// dibuja su icono en el rail. El `body` (cuerpo del panel abierto) NO va aquí — lo
+/// aporta el host una sola vez en [`RagSidebarView::body`], para el diente abierto.
+pub struct RagTooth<Msg> {
+    /// Identidad estable del diente (la usa `RagSidebarMsg::Activate`).
+    pub id: u64,
+    /// Título del panel cuando este diente está abierto (lo pinta el cabezal).
+    pub title: String,
+    /// El panel de este diente no lleva cabezal (para paneles de puro lienzo).
+    pub no_header: bool,
+    /// Dibuja el icono del diente: `(size, color)` → `View`. El `color` es el que
+    /// resuelve el rail (acento si activo, atenuado si no); el host puede ignorarlo.
+    pub icon: Arc<dyn Fn(f32, Color) -> View<Msg> + Send + Sync>,
+    /// Distintivo ("bubble number") opcional en la esquina externa del diente.
+    pub badge: Option<DockBadge>,
+    /// Dibuja un **separador** sutil (una fina línea tenue de alto mínimo) *encima*
+    /// de este diente en el rail, para **agrupar** dientes sin resaltarlos. No aplica
+    /// al primer diente (no hay nada que separar arriba). `false` = sin separador.
+    pub separator_before: bool,
+    /// **Fuerza** el resaltado del diente en vez de derivarlo del estado del sidebar.
+    /// `None` (default) = el rail decide por `state.is_selected||is_open` (dientes que
+    /// despliegan el panel del sidebar). `Some(b)` = el host manda: para dientes cuyo
+    /// "activo" NO es el panel abierto sino su propio estado —shuma abierto, un diente
+    /// hospedado activo, la sesión de terminal en foco— que conviven en el mismo rail.
+    pub force_active: Option<bool>,
+    /// **Encía intercalada** justo DESPUÉS de este diente (glifo, tooltip, `Msg`). Es
+    /// el botón que hace *crecer un diente nuevo* PEGADO a su grupo —el «+» de
+    /// escritorios va tras la última celda de escritorio, no al final del rail—. `None`
+    /// (default) = sin encía. Se distingue de [`RagSidebarView::grow`], que va al final.
+    pub grow_after: Option<(String, String, Msg)>,
+}
+
+impl<Msg> RagTooth<Msg> {
+    /// Atajo: diente con cabezal, sin badge, sin separador.
+    pub fn new(
+        id: u64,
+        title: impl Into<String>,
+        icon: Arc<dyn Fn(f32, Color) -> View<Msg> + Send + Sync>,
+    ) -> Self {
+        Self {
+            id,
+            title: title.into(),
+            no_header: false,
+            icon,
+            badge: None,
+            separator_before: false,
+            force_active: None,
+            grow_after: None,
+        }
+    }
+
+    /// Intercala una **encía** (botón «+») justo después de este diente (dentro de su
+    /// grupo), en vez de al final del rail. Encadenable.
+    pub fn grow_after(mut self, glyph: impl Into<String>, tooltip: impl Into<String>, on_grow: Msg) -> Self {
+        self.grow_after = Some((glyph.into(), tooltip.into(), on_grow));
+        self
+    }
+
+    /// Marca que este diente arranca un **grupo nuevo**: el rail pinta un separador
+    /// tenue justo encima suyo.
+    pub fn separator_before(mut self) -> Self {
+        self.separator_before = true;
+        self
+    }
+
+    /// Fuerza el resaltado del diente (para dientes cuyo activo lo gobierna el host,
+    /// no el panel abierto del sidebar).
+    pub fn active(mut self, on: bool) -> Self {
+        self.force_active = Some(on);
+        self
+    }
+}
+
+/// Todo lo que el host aporta para pintar el sidebar unificado. Genérico sobre
+/// `Msg`; el widget compone rail + chrome + panel y decide la disposición leyendo
+/// el [`RagSidebarState`].
+pub struct RagSidebarView<Msg> {
+    /// Los dientes del rail, en orden.
+    pub teeth: Vec<RagTooth<Msg>>,
+    /// El cuerpo del diente **abierto**, ya dimensionado por el host a
+    /// [`crate::body_height`]. Ignorado si no hay panel visible.
+    pub body: View<Msg>,
+    /// Accesorio derecho del cabezal del panel (p. ej. un toggle Árbol/Grafo).
+    pub accessory: Option<View<Msg>>,
+    /// Hay coincidencias del buscador (tiñe el control de acento).
+    pub search_hits: bool,
+    /// Reloj de animación (~20 Hz) para el halo del control idle.
+    pub t: f64,
+    /// Ancho del rail de dientes, en px.
+    pub rail_w: f32,
+    /// Enruta los `Msg` internos del widget al `Msg` del host.
+    pub map: Arc<dyn Fn(RagSidebarMsg) -> Msg + Send + Sync>,
+    /// Callback opcional al soltar un diente arrastrado sobre el **rail** (hueco o
+    /// rail entero) — para MOVER un diente de un sidebar a otro (payload = id
+    /// arrastrado). Para reordenar DENTRO del rail usa [`Self::on_reorder`].
+    pub on_drop: Option<Arc<dyn Fn(u64) -> Option<Msg> + Send + Sync>>,
+    /// Callback opcional de **reorden por arrastre**: `(payload, target)` = id del
+    /// diente arrastrado y id del diente sobre el que se soltó. Hace que cada diente
+    /// sea drop target y da la POSICIÓN destino; la app traduce ids→índices y reordena.
+    /// `None` = dientes no reordenables. Se distingue de [`Self::on_drop`] (mover de
+    /// rail a rail, sin posición).
+    pub on_reorder: Option<ReorderFn<Msg>>,
+    /// **Encía** opcional al final del rail: `(glifo, tooltip, Msg)`. Es el botón
+    /// que hace *crecer un diente nuevo* (p. ej. "+" para agregar una playlist / un
+    /// escritorio). `None` = sin encía.
+    pub grow: Option<(String, String, Msg)>,
+}
+
+/// Qué opciones del multiselect **ofrece** una app. Una app que resuelve un eje por
+/// su cuenta (p. ej. media tiene su propio autohide estilo mpv) puede **deshabilitar**
+/// ese switch para no ofrecer un control redundante/conflictivo. Todas `true` por
+/// defecto.
+#[derive(Debug, Clone, Copy)]
+pub struct RagOptions {
+    /// "Rail: Adentro/Afuera".
+    pub rail: bool,
+    /// "Espacio: Flota/Fijo".
+    pub espacio: bool,
+    /// "Ocultar: Autoesconde".
+    pub ocultar: bool,
+    /// "Dientes: Un/Dos pasos".
+    pub dientes: bool,
+}
+
+impl Default for RagOptions {
+    fn default() -> Self {
+        Self { rail: true, espacio: true, ocultar: true, dientes: true }
+    }
+}
+
+/// Los grupos excluyentes del popover de disposición **habilitados** (`opts`),
+/// armados desde el estado. Una app deshabilita los que resuelve por su cuenta.
+fn dispo_groups<Msg: Clone + Send + Sync + 'static>(
+    state: &RagSidebarState,
+    opts: RagOptions,
+    map: &Arc<dyn Fn(RagSidebarMsg) -> Msg + Send + Sync>,
+) -> Vec<RagSwitchGroup<Msg>> {
+    let mut groups: Vec<RagSwitchGroup<Msg>> = Vec::with_capacity(4);
+    if opts.rail {
+        let m = map.clone();
+        groups.push(RagSwitchGroup::new("Rail", &["Adentro", "Afuera"], state.rail_outside as usize, move |i| {
+            (m)(RagSidebarMsg::SetRailOutside(i == 1))
+        }));
+    }
+    if opts.espacio {
+        let m = map.clone();
+        groups.push(RagSwitchGroup::new("Espacio", &["Flota", "Fijo"], state.docked as usize, move |i| {
+            (m)(RagSidebarMsg::SetDocked(i == 1))
+        }));
+    }
+    if opts.ocultar {
+        let m = map.clone();
+        groups.push(RagSwitchGroup::new("Ocultar", &["Nunca", "Autoesconde"], state.autohide as usize, move |i| {
+            (m)(RagSidebarMsg::SetAutohide(i == 1))
+        }));
+    }
+    if opts.dientes {
+        let m = map.clone();
+        groups.push(RagSwitchGroup::new("Dientes", &["Un paso", "Dos pasos"], state.dos_pasos as usize, move |i| {
+            (m)(RagSidebarMsg::SetDosPasos(i == 1))
+        }));
+    }
+    groups
+}
+
+/// El **panel** del diente abierto: barra buscador+control + cabezal + `body`, SIN el
+/// rail. Llena su contenedor (fill). Público para el modo **DELEGADO** (pata pinta el
+/// rail prestando los dientes; la app pinta solo el panel) — ver la actividad de
+/// delegado+arrastre universal. En modo normal usa [`rag_sidebar_view`] (rail+panel).
+pub fn rag_panel_view<Msg: Clone + Send + Sync + 'static>(
+    state: &RagSidebarState,
+    teeth: &[RagTooth<Msg>],
+    body: View<Msg>,
+    accessory: Option<View<Msg>>,
+    search_hits: bool,
+    t: f64,
+    palette: &RagSidebarPalette,
+    map: Arc<dyn Fn(RagSidebarMsg) -> Msg + Send + Sync>,
+) -> View<Msg> {
+    let drawer = panel_spec(state, teeth, body, accessory, search_hits, t, map);
+    crate::rag_drawer_view_fill(drawer, palette)
+}
+
+/// Arma el [`RagSidebarSpec`] del panel desde el estado: título/no_header del diente
+/// abierto, buscador/control desde `state` y los 4 grupos de disposición.
+fn panel_spec<Msg: Clone + Send + Sync + 'static>(
+    state: &RagSidebarState,
+    teeth: &[RagTooth<Msg>],
+    body: View<Msg>,
+    accessory: Option<View<Msg>>,
+    search_hits: bool,
+    t: f64,
+    map: Arc<dyn Fn(RagSidebarMsg) -> Msg + Send + Sync>,
+) -> RagSidebarSpec<Msg> {
+    let open = state.open.and_then(|id| teeth.iter().find(|tt| tt.id == id));
+    let (title, no_header) = open.map(|tt| (tt.title.clone(), tt.no_header)).unwrap_or_default();
+    let m_focus = map.clone();
+    RagSidebarSpec {
+        title,
+        no_header,
+        accessory,
+        body,
+        search: state.search.clone(),
+        search_focused: state.search_focused,
+        search_hits,
+        on_search_focus: Arc::new(move |f| (m_focus)(RagSidebarMsg::SearchFocus(f))),
+        control_open: state.control_open,
+        t,
+        on_control_toggle: (map)(RagSidebarMsg::ControlToggle),
+        // SIN popover inline: el multiselect va como ventana/overlay EXTERNO que el
+        // host pinta con `rag_multiselect_view` (así no lo clipea el panel al achicar).
+        groups: Vec::new(),
+    }
+}
+
+/// El **multiselect** de disposición (los 4 grupos excluyentes) como vista
+/// **standalone**, para que el host la pinte como **ventana/overlay externo** cerca
+/// del control cuando `state.control_open` — NO clipeada por el panel. Es la card sin
+/// posicionar; el host la ubica (y le pone un fondo/backdrop si quiere).
+pub fn rag_multiselect_view<Msg: Clone + Send + Sync + 'static>(
+    state: &RagSidebarState,
+    opts: RagOptions,
+    map: Arc<dyn Fn(RagSidebarMsg) -> Msg + Send + Sync>,
+    palette: &RagSidebarPalette,
+) -> View<Msg> {
+    crate::multiswitch_card(dispo_groups(state, opts, &map), palette)
+}
+
+/// El **rail** de dientes (interno): un `dock-rail` con el activo resaltado desde el
+/// estado y el click enrutado a `Activate`.
+fn build_rail<Msg: Clone + Send + Sync + 'static>(
+    state: &RagSidebarState,
+    teeth: &[RagTooth<Msg>],
+    rail_w: f32,
+    side: RagSide,
+    palette: &RagSidebarPalette,
+    map: &Arc<dyn Fn(RagSidebarMsg) -> Msg + Send + Sync>,
+    on_drop: Option<Arc<dyn Fn(u64) -> Option<Msg> + Send + Sync>>,
+    on_reorder: Option<ReorderFn<Msg>>,
+    grow: Option<(String, String, Msg)>,
+) -> View<Msg> {
+    let items: Vec<DockRailItem> = teeth
+        .iter()
+        .map(|t| DockRailItem {
+            id: t.id,
+            // El rail resalta el diente SELECCIONADO (que en dos-pasos puede estar
+            // activo con el panel replegado), o el desplegado — salvo que el diente
+            // FUERCE su activo (shuma/hospedado/terminal, cuyo activo no es el panel).
+            active: t.force_active.unwrap_or_else(|| state.is_selected(t.id) || state.is_open(t.id)),
+        })
+        .collect();
+    let icons: Vec<(u64, Arc<dyn Fn(f32, Color) -> View<Msg> + Send + Sync>)> =
+        teeth.iter().map(|t| (t.id, t.icon.clone())).collect();
+    let badges: Vec<(u64, DockBadge)> =
+        teeth.iter().filter_map(|t| t.badge.map(|b| (t.id, b))).collect();
+    let dside = match side {
+        RagSide::Left => DockRailSide::InnerLeft,
+        RagSide::Right => DockRailSide::InnerRight,
+    };
+    let map_act = map.clone();
+    let mut dientes = dock_rail_view_full(
+        &items,
+        rail_w,
+        dside,
+        &palette.rail,
+        move |id, size, color| {
+            icons
+                .iter()
+                .find(|(i, _)| *i == id)
+                .map(|(_, f)| (f)(size, color))
+                .unwrap_or_else(|| View::new(Style::default()))
+        },
+        move |id| badges.iter().find(|(i, _)| *i == id).map(|(_, b)| *b),
+        |_| false,
+        move |id| (map_act)(RagSidebarMsg::Activate(id)),
+        move |id| on_drop.as_ref().and_then(|f| (f)(id)),
+        on_reorder,
+    );
+    // Intercala **separadores** de grupo y **encías** (`grow_after`) inline: `dock-rail`
+    // devuelve una columna cuyos hijos son los dientes 1:1 con `teeth` en orden. Se
+    // recorre de atrás hacia adelante para no correr los índices ya insertados. Por cada
+    // diente: una encía justo DESPUÉS (index i+1) si tiene `grow_after` —el «+» pegado a
+    // su grupo, p. ej. en cada hueco de escritorios—, y un separador ANTES (index i) si
+    // pide `separator_before` (nunca el primero: no hay nada arriba que separar).
+    for (i, t) in teeth.iter().enumerate().rev() {
+        if let Some((glyph, tip, msg)) = &t.grow_after {
+            let encia = crate::rag_encia_view(glyph, tip.clone(), msg.clone(), palette);
+            // Centrada en el ancho del rail: la encía es 30px y la columna del
+            // dock-rail no centra sus hijos sueltos, así que sin este envoltorio caía
+            // a la izquierda («chueca»). Los dientes ya vienen centrados por dock-rail.
+            let centrada = View::new(Style {
+                size: Size { width: length(rail_w), height: auto() },
+                align_items: Some(AlignItems::Center),
+                justify_content: Some(JustifyContent::Center),
+                flex_shrink: 0.0,
+                ..Default::default()
+            })
+            .children(vec![encia]);
+            dientes.children.insert(i + 1, centrada);
+        }
+        if i >= 1 && t.separator_before {
+            dientes.children.insert(i, rail_separator(rail_w, palette));
+        }
+    }
+    // Encía opcional al final del rail (el botón que crece un diente nuevo).
+    match grow {
+        None => dientes,
+        Some((glyph, tooltip, msg)) => View::new(Style {
+            flex_direction: FlexDirection::Column,
+            size: Size { width: length(rail_w), height: llimphi_ui::llimphi_layout::taffy::prelude::auto() },
+            align_items: Some(AlignItems::Center),
+            gap: Size { width: length(0.0_f32), height: length(4.0_f32) },
+            ..Default::default()
+        })
+        .children(vec![dientes, crate::rag_encia_view(&glyph, tooltip, msg, palette)]),
+    }
+}
+
+/// Un **separador** de grupo dentro del rail: una fina hairline tenue (color
+/// `border`) de **alto mínimo**, con un pequeño margen lateral para que no toque los
+/// bordes. Separa dientes sin robar altura ni resaltar — lo justo para leer un corte
+/// entre grupos. Se intercala en la columna del rail (ver [`build_rail`]).
+fn rail_separator<Msg: Clone + Send + Sync + 'static>(
+    rail_w: f32,
+    palette: &RagSidebarPalette,
+) -> View<Msg> {
+    let linea = View::new(Style {
+        size: Size { width: percent(1.0_f32), height: length(1.0_f32) },
+        flex_shrink: 0.0,
+        ..Default::default()
+    })
+    .fill(palette.border);
+    View::new(Style {
+        flex_direction: FlexDirection::Column,
+        size: Size { width: length(rail_w), height: length(7.0_f32) },
+        align_items: Some(AlignItems::Center),
+        justify_content: Some(JustifyContent::Center),
+        padding: TaffyRect {
+            left: length(7.0_f32),
+            right: length(7.0_f32),
+            top: length(0.0_f32),
+            bottom: length(0.0_f32),
+        },
+        flex_shrink: 0.0,
+        ..Default::default()
+    })
+    .children(vec![linea])
+}
+
+/// Envuelve el rail en una **franja** de alto completo (fill) con fondo. Ancho fijo
+/// `rail_w`; alto 100% del contenedor.
+fn rail_franja<Msg: Clone + Send + Sync + 'static>(
+    rail: View<Msg>,
+    rail_w: f32,
+    palette: &RagSidebarPalette,
+) -> View<Msg> {
+    View::new(Style {
+        flex_direction: FlexDirection::Column,
+        size: Size { width: length(rail_w), height: percent(1.0_f32) },
+        align_items: Some(AlignItems::Center),
+        flex_shrink: 0.0,
+        ..Default::default()
+    })
+    .fill(palette.bg_panel_alt)
+    .children(vec![rail])
+}
+
+/// Como [`rail_franja`], pero con **dientes de footer** anclados al fondo: entre la
+/// columna de arriba y el footer va un espaciador `flex_grow` que empuja el footer al
+/// borde inferior de la franja (alto 100%). Con `footer` vacío es equivalente a
+/// [`rail_franja`]. Es el patrón «diente de sistema abajo del todo».
+#[allow(clippy::too_many_arguments)]
+fn rail_franja_footer<Msg: Clone + Send + Sync + 'static>(
+    columna: View<Msg>,
+    footer: Vec<RagTooth<Msg>>,
+    state: &RagSidebarState,
+    rail_w: f32,
+    side: RagSide,
+    palette: &RagSidebarPalette,
+    map: &Arc<dyn Fn(RagSidebarMsg) -> Msg + Send + Sync>,
+) -> View<Msg> {
+    if footer.is_empty() {
+        return rail_franja(columna, rail_w, palette);
+    }
+    let footer_rail = build_rail(state, &footer, rail_w, side, palette, map, None, None, None);
+    let espaciador = View::new(Style {
+        size: Size { width: length(rail_w), height: length(0.0_f32) },
+        flex_grow: 1.0,
+        flex_shrink: 0.0,
+        ..Default::default()
+    });
+    View::new(Style {
+        flex_direction: FlexDirection::Column,
+        size: Size { width: length(rail_w), height: percent(1.0_f32) },
+        align_items: Some(AlignItems::Center),
+        flex_shrink: 0.0,
+        ..Default::default()
+    })
+    .fill(palette.bg_panel_alt)
+    .children(vec![columna, espaciador, footer_rail])
+}
+
+/// El **divisor** arrastrable del borde interno del panel: agranda/achica
+/// `state.panel_w`. En un sidebar izquierdo el borde interno es la derecha (arrastrar
+/// a la derecha agranda → `+dx`); en uno derecho es la izquierda (se invierte).
+fn resize_divider<Msg: Clone + Send + Sync + 'static>(
+    side: RagSide,
+    palette: &RagSidebarPalette,
+    map: Arc<dyn Fn(RagSidebarMsg) -> Msg + Send + Sync>,
+) -> View<Msg> {
+    let (sign, inset) = match side {
+        RagSide::Left => (
+            1.0_f32,
+            TaffyRect { left: auto(), right: length(0.0_f32), top: length(0.0_f32), bottom: length(0.0_f32) },
+        ),
+        RagSide::Right => (
+            -1.0_f32,
+            TaffyRect { left: length(0.0_f32), right: auto(), top: length(0.0_f32), bottom: length(0.0_f32) },
+        ),
+    };
+    View::new(Style {
+        position: Position::Absolute,
+        inset,
+        size: Size { width: length(6.0_f32), height: auto() },
+        ..Default::default()
+    })
+    .hover_fill(palette.accent)
+    .draggable(move |phase, dx, _dy| match phase {
+        llimphi_ui::DragPhase::Move => Some((map)(RagSidebarMsg::Resize(sign * dx))),
+        _ => None,
+    })
+}
+
+/// La **zona caliente** de reaparición: una fina franja al borde que, al recibir el
+/// puntero, revela el sidebar (autohide). Es lo único que se pinta cuando el sidebar
+/// está oculto ([`RagSidebarState::hidden`]).
+fn edge_hotzone<Msg: Clone + Send + Sync + 'static>(
+    palette: &RagSidebarPalette,
+    map: Arc<dyn Fn(RagSidebarMsg) -> Msg + Send + Sync>,
+) -> View<Msg> {
+    // `hover_fill` es OBLIGATORIO: el runtime solo despacha `on_pointer_enter` para
+    // el nodo que `hit_test_hover` elige, y ese hit-test SOLO considera nodos con
+    // `hover_fill`. Sin él, la franja nunca revelaría.
+    View::new(Style {
+        size: Size { width: length(5.0_f32), height: percent(1.0_f32) },
+        flex_shrink: 0.0,
+        ..Default::default()
+    })
+    .fill(palette.border)
+    .hover_fill(palette.accent)
+    .on_pointer_enter((map)(RagSidebarMsg::Reveal(true)))
+}
+
+/// El **botón de línea punteada** al tope del rail **colapsado** ("guardado"): una
+/// franja finísima (alto mínimo, ancho del rail) que, al clickearse, abre el popover
+/// de disposición con el mismo [`RagSidebarMsg::ControlToggle`] que el control gear.
+///
+/// Existe porque con el sidebar guardado el chrome (buscador + control) NO está a la
+/// vista, así que no habría cómo llegar a las opciones del rag. La línea punteada las
+/// devuelve a mano sin robarle altura a los dientes (se tiñe de acento si el popover
+/// está abierto).
+fn control_dotted_button<Msg: Clone + Send + Sync + 'static>(
+    rail_w: f32,
+    control_open: bool,
+    palette: &RagSidebarPalette,
+    map: &Arc<dyn Fn(RagSidebarMsg) -> Msg + Send + Sync>,
+) -> View<Msg> {
+    let color = if control_open { palette.accent } else { palette.fg_muted };
+    let m = map.clone();
+    View::new(Style {
+        size: Size { width: length(rail_w), height: length(11.0_f32) },
+        align_items: Some(AlignItems::Center),
+        justify_content: Some(JustifyContent::Center),
+        flex_shrink: 0.0,
+        ..Default::default()
+    })
+    .radius(4.0)
+    .hover_fill(palette.bg_button_hover)
+    .tooltip("Opciones de disposición".to_string())
+    .on_click((m)(RagSidebarMsg::ControlToggle))
+    .paint_with(move |scene, _ts, rect| paint_dotted_line(scene, rect, color))
+}
+
+/// Una **línea horizontal punteada** centrada en `rect`: puntitos redondos del color
+/// dado, espaciados, con un margen a los costados. La firma del botón de opciones del
+/// rail colapsado (mismo lenguaje que la hebra punteada de una madre *stale*).
+fn paint_dotted_line(scene: &mut llimphi_ui::llimphi_raster::vello::Scene, rect: PaintRect, color: Color) {
+    use llimphi_ui::llimphi_raster::kurbo::{Affine, RoundedRect};
+    use llimphi_ui::llimphi_raster::peniko::Fill;
+    if rect.w <= 0.0 || rect.h <= 0.0 {
+        return;
+    }
+    let cy = (rect.y + rect.h * 0.5) as f64;
+    let dot = 2.0_f64; // diámetro del punto
+    let step = dot + 3.0_f64; // punto + hueco
+    let margin = 6.0_f64;
+    let x0 = rect.x as f64 + margin;
+    let x1 = (rect.x + rect.w) as f64 - margin;
+    let mut x = x0;
+    while x + dot <= x1 {
+        let rr = RoundedRect::new(x, cy - dot / 2.0, x + dot, cy + dot / 2.0, dot / 2.0);
+        scene.fill(Fill::NonZero, Affine::IDENTITY, &color, None, &rr);
+        x += step;
+    }
+}
+
+/// **La** vista del sidebar (una sola forma): rail (dock-rail) + panel + chrome +
+/// las 4 opciones + **divisor de ancho arrastrable**, en un `View`. El **ancho** lo
+/// fija `state.panel_w` (redimensionable con el divisor) más el del rail; el **alto**
+/// lo llena el contenedor del host. El host lo monta donde quiera (pane, columna,
+/// overlay).
+///
+/// - Sin diente abierto → solo el rail (franja `rail_w`, sin divisor).
+/// - AFUERA (`rail_outside`) → el rail va al borde EXTERNO (pegado al borde de la
+///   ventana): `[rail][panel]` en un sidebar izquierdo.
+/// - ADENTRO (`!rail_outside`) → el rail va al borde INTERNO, **entre el panel y el
+///   canvas**: `[panel][rail]` en un sidebar izquierdo.
+pub fn rag_sidebar_view<Msg: Clone + Send + Sync + 'static>(
+    state: &RagSidebarState,
+    spec: RagSidebarView<Msg>,
+    side: RagSide,
+    palette: &RagSidebarPalette,
+) -> View<Msg> {
+    let RagSidebarView { teeth, body, accessory, search_hits, t, rail_w, map, on_drop, on_reorder, grow } = spec;
+
+    // Autohide oculto (sin panel ni reveal): solo la franja caliente de reaparición.
+    if state.hidden() {
+        return edge_hotzone(palette, map);
+    }
+
+    let rail = build_rail(state, &teeth, rail_w, side, palette, &map, on_drop, on_reorder, grow);
+    let panel_w = state.panel_w;
+
+    let inner = if !state.panel_visible() {
+        // Colapsado ("guardado"): solo el rail (ancho = rail_w). Sin panel ni divisor,
+        // y por tanto sin el chrome (buscador + control) que abre las opciones. Para no
+        // perderlas, una fina LÍNEA PUNTEADA al tope del rail las despliega
+        // (`ControlToggle`), robándole el mínimo de altura a los dientes.
+        let boton = control_dotted_button(rail_w, state.control_open, palette, &map);
+        let columna = View::new(Style {
+            flex_direction: FlexDirection::Column,
+            size: Size { width: length(rail_w), height: auto() },
+            align_items: Some(AlignItems::Center),
+            gap: Size { width: length(0.0_f32), height: length(4.0_f32) },
+            flex_shrink: 0.0,
+            ..Default::default()
+        })
+        .children(vec![boton, rail]);
+        rail_franja(columna, rail_w, palette)
+    } else {
+        // Panel visible. El rail va como franja a UN lado del panel:
+        //  - AFUERA: borde EXTERNO (pegado al borde de la ventana).
+        //  - ADENTRO: borde INTERNO (ENTRE el panel y el canvas).
+        // El eje `rail_outside` + el lado del sidebar deciden el orden en el Row.
+        let franja = rail_franja(rail, rail_w, palette);
+        let panel = View::new(Style {
+            size: Size { width: length(panel_w), height: percent(1.0_f32) },
+            flex_shrink: 0.0,
+            ..Default::default()
+        })
+        .children(vec![rag_panel_view(state, &teeth, body, accessory, search_hits, t, palette, map.clone())]);
+        // ¿El rail va PRIMERO (extremo del contenedor) en el Row? Sí para un sidebar
+        // izquierdo AFUERA (rail contra el borde izquierdo de ventana) o un sidebar
+        // derecho ADENTRO (rail hacia el centro). Al revés en los otros dos casos.
+        let rail_primero = match side {
+            RagSide::Left => state.rail_outside,
+            RagSide::Right => !state.rail_outside,
+        };
+        let mut hijos = if rail_primero { vec![franja, panel] } else { vec![panel, franja] };
+        hijos.push(resize_divider(side, palette, map.clone()));
+        View::new(Style {
+            position: Position::Relative,
+            flex_direction: FlexDirection::Row,
+            size: Size { width: length(rail_w + panel_w), height: percent(1.0_f32) },
+            flex_shrink: 0.0,
+            ..Default::default()
+        })
+        .children(hijos)
+    };
+
+    // Reaparición/guardado: solo cuando el sidebar puede esconderse (autohide) o
+    // flota (se guarda al desenfocar). Para un Fijo no-autohide no hace falta
+    // rastrear el puntero (evita churn). `map` sigue vivo (todos sus usos previos
+    // fueron por préstamo).
+    if state.autohide || !state.docked {
+        inner
+            .on_pointer_enter((map)(RagSidebarMsg::Reveal(true)))
+            .on_pointer_leave((map)(RagSidebarMsg::Reveal(false)))
+    } else {
+        inner
+    }
+}
+
+/// La **franja-rail** standalone, como pieza pública — para hosts que DEBEN pintar
+/// el rail en una superficie SEPARADA del panel. Es el caso de **pata en
+/// layer-shell**: el rail y el drawer son dos surfaces Wayland distintas porque
+/// crecer UNA sola surface por-diente reconfiguraba el swapchain y crasheaba en Iris
+/// Xe (ver `pata .../sidebar.rs`). Aun partido en dos surfaces, el host sigue usando
+/// **sólo código del widget** para el rail (cero rail propio): esta fn produce
+/// EXACTAMENTE lo que pinta la rama colapsada de [`rag_sidebar_view`] — la franja de
+/// fondo con el **botón punteado** de opciones encima de los dientes (+ encía +
+/// separadores de grupo). El panel se pinta aparte con [`rag_panel_view`]; ambos son
+/// del widget, split sólo en la frontera de surfaces.
+///
+/// `dock-rail` queda **encapsulado adentro** del widget: el host nunca lo toca.
+///
+/// `footer` son dientes **anclados al fondo** de la franja (separados de los dientes
+/// de arriba por un espaciador flexible): el lugar canónico para el diente de
+/// sistema/sesión, que vive abajo del todo estilo VSCode/Slack. Vacío = sin footer.
+#[allow(clippy::too_many_arguments)]
+pub fn rag_rail_view<Msg: Clone + Send + Sync + 'static>(
+    state: &RagSidebarState,
+    teeth: Vec<RagTooth<Msg>>,
+    rail_w: f32,
+    side: RagSide,
+    palette: &RagSidebarPalette,
+    map: Arc<dyn Fn(RagSidebarMsg) -> Msg + Send + Sync>,
+    on_drop: Option<Arc<dyn Fn(u64) -> Option<Msg> + Send + Sync>>,
+    on_reorder: Option<ReorderFn<Msg>>,
+    grow: Option<(String, String, Msg)>,
+    footer: Vec<RagTooth<Msg>>,
+) -> View<Msg> {
+    // Autohide oculto: sólo la fina zona caliente de reaparición al borde.
+    if state.hidden() {
+        return edge_hotzone(palette, map);
+    }
+    let rail = build_rail(state, &teeth, rail_w, side, palette, &map, on_drop, on_reorder, grow);
+    // En un host de dos superficies el chrome (buscador + control) vive en la surface
+    // del PANEL, así que el rail necesita su propia entrada a las opciones — la misma
+    // línea punteada que la rama colapsada del widget.
+    let boton = control_dotted_button(rail_w, state.control_open, palette, &map);
+    let columna = View::new(Style {
+        flex_direction: FlexDirection::Column,
+        size: Size { width: length(rail_w), height: auto() },
+        align_items: Some(AlignItems::Center),
+        gap: Size { width: length(0.0_f32), height: length(4.0_f32) },
+        flex_shrink: 0.0,
+        ..Default::default()
+    })
+    .children(vec![boton, rail]);
+    let franja = rail_franja_footer(columna, footer, state, rail_w, side, palette, &map);
+    // Reaparición/guardado sólo si puede esconderse (autohide) o flota.
+    if state.autohide || !state.docked {
+        franja
+            .on_pointer_enter((map.clone())(RagSidebarMsg::Reveal(true)))
+            .on_pointer_leave((map)(RagSidebarMsg::Reveal(false)))
+    } else {
+        franja
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use crate::RagSidebarPalette;
+    use llimphi_theme::Theme;
+
+    fn spec() -> RagSidebarView<i32> {
+        RagSidebarView {
+            teeth: vec![
+                RagTooth::new(1, "A", Arc::new(|_, _| View::new(Style::default()))),
+                RagTooth::new(2, "B", Arc::new(|_, _| View::new(Style::default()))),
+            ],
+            body: View::new(Style::default()),
+            accessory: None,
+            search_hits: false,
+            t: 0.0,
+            rail_w: 44.0,
+            map: Arc::new(|m| match m {
+                RagSidebarMsg::ControlToggle => 99,
+                _ => 0,
+            }),
+            on_drop: None,
+            on_reorder: None,
+            grow: None,
+        }
+    }
+
+    /// Colapsado ("guardado"): el rail lleva una columna [línea-punteada, dientes] —
+    /// el botón que devuelve las opciones cuando el chrome no está a la vista.
+    #[test]
+    fn colapsado_trae_boton_punteado_sobre_los_dientes() {
+        let pal = RagSidebarPalette::from_theme(&Theme::dark());
+        let st = RagSidebarState { open: None, ..Default::default() };
+        let v = rag_sidebar_view(&st, spec(), RagSide::Left, &pal);
+        // rail_franja → [columna]; columna → [boton_punteado, rail].
+        let columna = &v.children[0];
+        assert_eq!(columna.children.len(), 2, "línea punteada + rail de dientes");
+        // El botón emite ControlToggle al clickearse (map → 99).
+        assert_eq!(columna.children[0].on_click, Some(99), "la línea punteada abre las opciones");
+    }
+
+    /// Un diente marcado con `separator_before` intercala **una** línea tenue justo
+    /// encima suyo en la columna del rail; el primer diente nunca lleva separador.
+    #[test]
+    fn separador_intercala_una_linea_en_el_rail() {
+        let pal = RagSidebarPalette::from_theme(&Theme::dark());
+        let st = RagSidebarState::default();
+        let map: Arc<dyn Fn(RagSidebarMsg) -> i32 + Send + Sync> = Arc::new(|_| 0);
+        let teeth = vec![
+            // El primero pide separador: se ignora (nada arriba que separar).
+            RagTooth::new(1, "A", Arc::new(|_, _| View::new(Style::default()))).separator_before(),
+            RagTooth::new(2, "B", Arc::new(|_, _| View::new(Style::default()))).separator_before(),
+            RagTooth::new(3, "C", Arc::new(|_, _| View::new(Style::default()))),
+        ];
+        let rail = build_rail(&st, &teeth, 44.0, RagSide::Left, &pal, &map, None, None, None);
+        // 3 dientes + 1 separador (antes de B) = 4 hijos; el de A no cuenta.
+        assert_eq!(rail.children.len(), 4, "un solo separador intercalado");
+        // El separador quedó en el índice 1 (entre A y B): es un contenedor de alto
+        // mínimo, no un diente clickeable.
+        assert!(rail.children[1].on_click.is_none(), "el separador no es interactivo");
+    }
+
+    /// `rag_rail_view` (la mitad-rail standalone, para hosts de dos superficies como
+    /// pata/Iris Xe) produce la franja con la columna [línea-punteada, dientes] — el
+    /// mismo rail del widget, sin que el host toque `dock-rail`.
+    #[test]
+    fn rail_standalone_trae_boton_y_dientes_del_widget() {
+        let pal = RagSidebarPalette::from_theme(&Theme::dark());
+        let st = RagSidebarState { open: None, ..Default::default() };
+        let map: Arc<dyn Fn(RagSidebarMsg) -> i32 + Send + Sync> =
+            Arc::new(|m| if matches!(m, RagSidebarMsg::ControlToggle) { 99 } else { 0 });
+        let teeth = vec![
+            RagTooth::new(1, "A", Arc::new(|_, _| View::new(Style::default()))),
+            RagTooth::new(2, "B", Arc::new(|_, _| View::new(Style::default()))),
+        ];
+        let v = rag_rail_view(&st, teeth, 44.0, RagSide::Left, &pal, map, None, None, None, Vec::new());
+        // rail_franja → [columna]; columna → [boton_punteado, rail].
+        let columna = &v.children[0];
+        assert_eq!(columna.children.len(), 2, "línea punteada + rail de dientes");
+        assert_eq!(columna.children[0].on_click, Some(99), "la línea punteada abre las opciones");
+    }
+
+    /// Con `footer` no vacío, la franja lleva [columna, espaciador, footer_rail]: el
+    /// espaciador `flex_grow` empuja el diente de footer al borde inferior.
+    #[test]
+    fn footer_ancla_diente_al_fondo() {
+        let pal = RagSidebarPalette::from_theme(&Theme::dark());
+        let st = RagSidebarState { open: None, ..Default::default() };
+        let map: Arc<dyn Fn(RagSidebarMsg) -> i32 + Send + Sync> = Arc::new(|_| 0);
+        let teeth = vec![RagTooth::new(1, "A", Arc::new(|_, _| View::new(Style::default())))];
+        let footer = vec![RagTooth::new(5_000_000, "Sistema", Arc::new(|_, _| View::new(Style::default())))];
+        let v = rag_rail_view(&st, teeth, 44.0, RagSide::Left, &pal, map, None, None, None, footer);
+        // La franja con footer es una columna [columna_arriba, espaciador, footer_rail].
+        assert_eq!(v.children.len(), 3, "columna + espaciador + footer");
+        // El espaciador crece (flex_grow) para empujar el footer al fondo.
+        assert!(v.children[1].style.flex_grow > 0.0, "el espaciador empuja el footer abajo");
+    }
+
+    /// Sin ningún `separator_before`, el rail es solo los dientes (sin líneas extra).
+    #[test]
+    fn sin_separadores_rail_intacto() {
+        let pal = RagSidebarPalette::from_theme(&Theme::dark());
+        let st = RagSidebarState::default();
+        let map: Arc<dyn Fn(RagSidebarMsg) -> i32 + Send + Sync> = Arc::new(|_| 0);
+        let teeth = vec![
+            RagTooth::new(1, "A", Arc::new(|_, _| View::new(Style::default()))),
+            RagTooth::new(2, "B", Arc::new(|_, _| View::new(Style::default()))),
+        ];
+        let rail = build_rail(&st, &teeth, 44.0, RagSide::Left, &pal, &map, None, None, None);
+        assert_eq!(rail.children.len(), 2, "dos dientes, sin separadores");
+    }
+
+    /// Con un diente abierto NO va el botón: el chrome (buscador + control gear) ya
+    /// está a la vista en el panel, así que no se duplica.
+    #[test]
+    fn desplegado_no_trae_boton_punteado() {
+        let pal = RagSidebarPalette::from_theme(&Theme::dark());
+        let st = RagSidebarState { open: Some(1), ..Default::default() };
+        let v = rag_sidebar_view(&st, spec(), RagSide::Left, &pal);
+        // Panel visible → Row [franja-rail, panel, divisor]; ningún hijo es la columna
+        // con el botón punteado (la franja envuelve el rail a secas).
+        assert!(v.children.len() >= 2, "rail + panel (+ divisor)");
+    }
+}
diff --git a/widgets/range-slider/Cargo.toml b/widgets/range-slider/Cargo.toml
index 32c2852..4050fe8 100644
--- a/widgets/range-slider/Cargo.toml
+++ b/widgets/range-slider/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-range-slider — slider con dos thumbs para definir un rango [lo, hi] sobre un track. Para filtros (precio entre $X y $Y), ecualizadores y rangos temporales."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/range-slider/LEEME.md b/widgets/range-slider/LEEME.md
new file mode 100644
index 0000000..49922e7
--- /dev/null
+++ b/widgets/range-slider/LEEME.md
@@ -0,0 +1,21 @@
+# llimphi-widget-range-slider
+
+*Read this in English: [README.md](README.md).*
+
+Slider de dos thumbs sobre un track.
+
+Análogo a `RangeSlider` de Flutter o `RangeSlider` de Material 3.
+El caller mantiene `(lo, hi)` en su modelo (fracciones en `[0,1]`);
+el widget reporta el nuevo valor por `on_change(lo, hi)` cuando el
+usuario arrastra cualquiera de los dos thumbs.
+
+Diseño:
+- Track de 4 px, franja activa del color `accent` entre los dos thumbs.
+- Thumbs de 14 px (círculos), borde 2 px del color `accent`,
+  sombra E1 — la firma de elevación canónica.
+- Drag con `draggable` por thumb → callback recibe (lo, hi)
+  normalizado y monotónicamente ordenado (el bajo nunca supera al alto).
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/range-slider/README.md b/widgets/range-slider/README.md
new file mode 100644
index 0000000..ea66b3b
--- /dev/null
+++ b/widgets/range-slider/README.md
@@ -0,0 +1,20 @@
+# llimphi-widget-range-slider
+
+Two-thumb slider over a track.
+
+The analogue of Flutter's `RangeSlider` or Material 3's. The caller keeps
+`(lo, hi)` in its model (fractions in `[0,1]`); the widget reports the new value
+through `on_change(lo, hi)` when the user drags either thumb.
+
+Design:
+
+- A 4 px track, with the active band in the `accent` colour between the two
+  thumbs.
+- 14 px thumbs (circles), 2 px border in the `accent` colour, E1 shadow — the
+  canonical elevation signature.
+- Drag through `draggable` per thumb → the callback receives `(lo, hi)`
+  normalized and monotonically ordered (the low one never overtakes the high).
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/range-slider/src/lib.rs b/widgets/range-slider/src/lib.rs
index 63ba770..4acfe9e 100644
--- a/widgets/range-slider/src/lib.rs
+++ b/widgets/range-slider/src/lib.rs
@@ -108,6 +108,12 @@ where
                     lo: f32,
                     hi: f32,
                     track_w: f32| {
+        // ACUMULADOR de deltas (igual que el `slider` hermano): durante un
+        // drag el runtime reusa este handler con la vista CONGELADA, y los
+        // `dx` llegan por-evento (no acumulados). Sin acumular, `lo + dx/w`
+        // usa el `lo` fijo del press + sólo el último delta → el thumb queda
+        // casi inmóvil. Sumamos los deltas dentro de la instancia del handler.
+        let acc = std::sync::Arc::new(std::sync::Mutex::new(0.0_f32));
         View::new(Style {
             position: Position::Absolute,
             size: Size { width: length(14.0_f32), height: length(14.0_f32) },
@@ -123,19 +129,20 @@ where
         .radius(7.0)
         .border(2.0, palette.thumb_stroke)
         .shadow(thumb_shadow)
-        .draggable(move |phase: DragPhase, dx: f32, _dy: f32| match phase {
-            DragPhase::Move => {
-                let dfrac = dx / track_w;
-                let (new_lo, new_hi) = if is_lo {
-                    let nl = (lo + dfrac).clamp(0.0, hi);
-                    (nl, hi)
-                } else {
-                    let nh = (hi + dfrac).clamp(lo, 1.0);
-                    (lo, nh)
-                };
-                Some(on_change(new_lo, new_hi))
+        .draggable(move |phase: DragPhase, dx: f32, _dy: f32| {
+            let mut a = acc.lock().unwrap_or_else(|e| e.into_inner());
+            *a += dx / track_w;
+            let dfrac = *a;
+            if matches!(phase, DragPhase::End) {
+                *a = 0.0; // listo para el próximo drag
+            }
+            match phase {
+                DragPhase::Move => {
+                    let (new_lo, new_hi) = apply_drag(is_lo, lo, hi, dfrac);
+                    Some(on_change(new_lo, new_hi))
+                }
+                DragPhase::End => None,
             }
-            DragPhase::End => None,
         })
         .cursor(llimphi_ui::Cursor::Pointer)
     };
@@ -143,9 +150,55 @@ where
     let thumb_lo = mk_thumb(lo_x, true, on_change.clone(), lo, hi, track_w);
     let thumb_hi = mk_thumb(hi_x, false, on_change, lo, hi, track_w);
 
+    let aria_value = format!("{:.0}%–{:.0}%", lo * 100.0, hi * 100.0);
     View::new(Style {
         size: Size { width: length(width_px), height: length(28.0_f32) },
         ..Default::default()
     })
+    // a11y: el widget entero se anuncia como deslizador de rango con su
+    // valor "lo–hi" (antes NO tenía rol ni aria — el slider simple sí).
+    .role(llimphi_ui::Role::Slider)
+    .aria_label("rango".to_string())
+    .aria_value(aria_value)
     .children(vec![track_idle, track_active, thumb_lo, thumb_hi])
 }
+
+/// Aplica un delta fraccional al thumb `lo` o `hi` desde su base, con clamp
+/// monotónico (el bajo nunca supera al alto ni sale de `[0,1]`, y viceversa).
+/// Pura y testeable — la usa el handler de drag tras acumular los deltas.
+pub fn apply_drag(is_lo: bool, lo: f32, hi: f32, dfrac: f32) -> (f32, f32) {
+    if is_lo {
+        ((lo + dfrac).clamp(0.0, hi), hi)
+    } else {
+        (lo, (hi + dfrac).clamp(lo, 1.0))
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn drag_lo_no_supera_al_hi() {
+        // Empujar el thumb bajo muy a la derecha: se clampea al hi, no lo cruza.
+        let (lo, hi) = apply_drag(true, 0.3, 0.6, 0.9);
+        assert_eq!(hi, 0.6);
+        assert!((lo - 0.6).abs() < 1e-6, "lo se clampea a hi (dio {lo})");
+    }
+
+    #[test]
+    fn drag_hi_no_baja_del_lo_ni_pasa_de_uno() {
+        let (lo, hi) = apply_drag(false, 0.3, 0.6, -0.9);
+        assert_eq!(lo, 0.3);
+        assert!((hi - 0.3).abs() < 1e-6, "hi se clampea a lo (dio {hi})");
+        let (_, hi2) = apply_drag(false, 0.3, 0.6, 0.9);
+        assert!((hi2 - 1.0).abs() < 1e-6, "hi se clampea a 1.0 (dio {hi2})");
+    }
+
+    #[test]
+    fn drag_pequeno_mueve_proporcional() {
+        let (lo, hi) = apply_drag(true, 0.30, 0.80, 0.10);
+        assert!((lo - 0.40).abs() < 1e-6, "lo = base + dfrac (dio {lo})");
+        assert_eq!(hi, 0.80);
+    }
+}
diff --git a/widgets/rating/Cargo.toml b/widgets/rating/Cargo.toml
index caeb1d2..ba05691 100644
--- a/widgets/rating/Cargo.toml
+++ b/widgets/rating/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-rating — N estrellas clicables (típicamente 5) que reflejan un valor y emiten on_change al elegir otro nivel. Para reseñas, encuestas, quality flags."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/rating/LEEME.md b/widgets/rating/LEEME.md
new file mode 100644
index 0000000..1d58adb
--- /dev/null
+++ b/widgets/rating/LEEME.md
@@ -0,0 +1,16 @@
+# llimphi-widget-rating
+
+*Read this in English: [README.md](README.md).*
+
+N estrellas clicables.
+
+Render: estrellas dibujadas a mano con `paint_with` (polígono de 10
+vértices). El caller pasa `value` (0..=max) y `max` (típicamente 5).
+Cada estrella es clickable: emite `on_change(idx + 1)`.
+
+Sober, no chillón: las estrellas inactivas son `border` (gris),
+las activas `accent`. Tamaño configurable, default 18 px.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/rating/README.md b/widgets/rating/README.md
new file mode 100644
index 0000000..b505fd4
--- /dev/null
+++ b/widgets/rating/README.md
@@ -0,0 +1,14 @@
+# llimphi-widget-rating
+
+N clickable stars.
+
+Render: stars drawn by hand with `paint_with` (a 10-vertex polygon). The caller
+passes `value` (0..=max) and `max` (typically 5). Every star is clickable: it
+emits `on_change(idx + 1)`.
+
+Sober, not loud: inactive stars are `border` (grey), active ones `accent`.
+Configurable size, 18 px by default.
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/rating/src/lib.rs b/widgets/rating/src/lib.rs
index 8bbacf4..5d5c811 100644
--- a/widgets/rating/src/lib.rs
+++ b/widgets/rating/src/lib.rs
@@ -74,6 +74,24 @@ where
     .children(children)
 }
 
+/// Nuevo valor tras un paso de teclado (←/→): `value + dir`, clampeado a
+/// `[0, max]`. El host mapea las flechas a esto y dispatcha `on_change`.
+pub fn step_rating(value: u32, direction: i32, max: u32) -> u32 {
+    let v = value as i32 + direction;
+    v.clamp(0, max as i32) as u32
+}
+
+/// Valor tras clickear la estrella `clicked` (1-based). Si se clickea la
+/// que ya marca el tope actual, **limpia a 0** (toggle — como los ratings
+/// que permiten desmarcar); si no, fija `clicked`.
+pub fn click_value(value: u32, clicked: u32) -> u32 {
+    if value == clicked {
+        0
+    } else {
+        clicked
+    }
+}
+
 /// Polígono de estrella de 5 puntas centrado en `rect`. Radios `R`
 /// (exterior) y `R·0.42` (interior).
 fn paint_star(
@@ -107,3 +125,23 @@ fn paint_star(
     p.close_path();
     scene.fill(Fill::NonZero, Affine::IDENTITY, color, None, &p);
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn step_rating_clampa_en_0_y_max() {
+        assert_eq!(step_rating(3, 1, 5), 4);
+        assert_eq!(step_rating(3, -1, 5), 2);
+        assert_eq!(step_rating(5, 1, 5), 5); // tope
+        assert_eq!(step_rating(0, -1, 5), 0); // piso
+    }
+
+    #[test]
+    fn click_value_togglea_a_cero_en_la_misma() {
+        assert_eq!(click_value(3, 5), 5); // subir
+        assert_eq!(click_value(5, 3), 3); // bajar
+        assert_eq!(click_value(4, 4), 0); // click en la actual → limpia
+    }
+}
diff --git a/widgets/rive-button/Cargo.toml b/widgets/rive-button/Cargo.toml
new file mode 100644
index 0000000..f436640
--- /dev/null
+++ b/widgets/rive-button/Cargo.toml
@@ -0,0 +1,13 @@
+[package]
+name = "llimphi-widget-rive-button"
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+authors.workspace = true
+publish.workspace = true
+description = "llimphi-widget-rive-button — botón reactivo dirigido por máquina de estados estilo Rive (llimphi-anim). Tres estados idle/hover/press con clips Lottie, transiciones por hover (bool) y click (trigger), crossfade entre estados. Primer consumidor real de la StateMachine fuera del studio."
+
+[dependencies]
+llimphi-ui = { workspace = true }
+llimphi-anim = { workspace = true }
+llimphi-lottie = { workspace = true }
diff --git a/widgets/rive-button/LEEME.md b/widgets/rive-button/LEEME.md
new file mode 100644
index 0000000..73df507
--- /dev/null
+++ b/widgets/rive-button/LEEME.md
@@ -0,0 +1,41 @@
+# llimphi-widget-rive-button
+
+*Read this in English: [README.md](README.md).*
+
+Botón **reactivo** dirigido por una máquina de estados estilo Rive ([`llimphi_anim::StateMachine`]).
+
+Es el primer consumidor *real* de la máquina de estados fuera del
+`llimphi-anim-studio` (que la autora) y de los examples de `llimphi-lottie`.
+Encapsula la composición canónica del demo `pointer_listeners_demo` como un
+widget reusable: tres estados —`idle` / `hover` / `press`— cada uno con su
+clip Lottie, hilados por inputs que el motor deriva del puntero crudo:
+
+- **hover** (`bool`): los listeners `Enter`/`Exit` sobre toda la superficie
+  prenden/apagan el input `hovered`; `idle ⇄ hover` con crossfade.
+- **press** (`trigger`): el host llama `RiveButton::press` desde su
+  `on_click`; dispara el trigger `pressed`, la máquina entra al estado `press`
+  (clip **no-loop**) y, al terminar el clip (`ClipDone`), vuelve a `hover` o
+  `idle` según siga el puntero encima.
+
+El widget es **stateful** (como `text-editor`/`nodegraph`): el host lo guarda
+en su `Model`, lo avanza con `advance` desde un tick periódico, le reenvía
+el puntero con `pointer` y el click con `press`, y lo pinta con `view`.
+El hit-testing vive en el motor, no en la app.
+```ignore
+// En el Model del host:
+boton: RiveButton::builtin(),
+// update:
+Msg::Tick      => m.boton.advance(DT),
+Msg::Pointer(p)=> m.boton.pointer(p),
+Msg::Click     => { m.boton.press(); /* acción del host */ }
+// view:
+m.boton.view(Msg::Pointer, Msg::Click)
+```
+`advance`: RiveButton::advance
+`pointer`: RiveButton::pointer
+`press`: RiveButton::press
+`view`: RiveButton::view
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/rive-button/README.md b/widgets/rive-button/README.md
new file mode 100644
index 0000000..ec9a6be
--- /dev/null
+++ b/widgets/rive-button/README.md
@@ -0,0 +1,37 @@
+# llimphi-widget-rive-button
+
+A **reactive** button driven by a Rive-style state machine
+(`llimphi_anim::StateMachine`).
+
+It is the first *real* consumer of the state machine outside `llimphi-anim-studio`
+(which authors it) and the `llimphi-lottie` examples. It encapsulates the
+canonical composition of the `pointer_listeners_demo` as a reusable widget: three
+states — `idle` / `hover` / `press` — each with its own Lottie clip, threaded by
+inputs the engine derives from the raw pointer:
+
+- **hover** (`bool`): the `Enter`/`Exit` listeners over the whole surface turn the
+  `hovered` input on and off; `idle ⇄ hover` with a crossfade.
+- **press** (`trigger`): the host calls `RiveButton::press` from its `on_click`;
+  that fires the `pressed` trigger, the machine enters the `press` state (a
+  **non-looping** clip) and, when the clip finishes (`ClipDone`), returns to
+  `hover` or `idle` depending on whether the pointer is still over it.
+
+The widget is **stateful** (like `text-editor`/`nodegraph`): the host keeps it in
+its `Model`, advances it with `advance` from a periodic tick, forwards the
+pointer with `pointer` and the click with `press`, and paints it with `view`.
+Hit-testing lives in the engine, not in the app.
+
+```ignore
+// In the host's Model:
+button: RiveButton::builtin(),
+// update:
+Msg::Tick       => m.button.advance(DT),
+Msg::Pointer(p) => m.button.pointer(p),
+Msg::Click      => { m.button.press(); /* the host's action */ }
+// view:
+m.button.view(Msg::Pointer, Msg::Click)
+```
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/rive-button/examples/rive_button_demo.rs b/widgets/rive-button/examples/rive_button_demo.rs
new file mode 100644
index 0000000..e457345
--- /dev/null
+++ b/widgets/rive-button/examples/rive_button_demo.rs
@@ -0,0 +1,121 @@
+//! Demo del `llimphi-widget-rive-button`: un botón reactivo dirigido por máquina
+//! de estados. Pasa el puntero por encima (idle→hover, gira) y haz click
+//! (pop de press). El widget guarda toda la máquina; la app sólo reenvía
+//! puntero/click y avanza el reloj.
+//!
+//!   `cargo run -p llimphi-widget-rive-button --example rive_button_demo --release`
+
+use std::time::Duration;
+
+use llimphi_ui::llimphi_layout::taffy::{
+    prelude::{length, percent, FlexDirection, Size, Style},
+    AlignItems, JustifyContent, Rect,
+};
+use llimphi_ui::llimphi_raster::peniko::Color;
+use llimphi_ui::{App, Handle, View};
+use llimphi_widget_rive_button::RiveButton;
+
+const TICK: Duration = Duration::from_millis(16);
+
+#[derive(Clone)]
+enum Msg {
+    Tick,
+    Pointer(Option<(f64, f64)>),
+    Click,
+}
+
+struct Model {
+    boton: RiveButton,
+    clicks: u32,
+}
+
+struct Demo;
+
+impl App for Demo {
+    type Model = Model;
+    type Msg = Msg;
+
+    fn title() -> &'static str {
+        "llimphi · rive-button"
+    }
+
+    fn initial_size() -> (u32, u32) {
+        (420, 500)
+    }
+
+    fn init(handle: &Handle<Self::Msg>) -> Self::Model {
+        handle.spawn_periodic(TICK, || Msg::Tick);
+        Model { boton: RiveButton::builtin(), clicks: 0 }
+    }
+
+    fn update(mut model: Self::Model, msg: Self::Msg, _: &Handle<Self::Msg>) -> Self::Model {
+        match msg {
+            Msg::Tick => model.boton.advance(TICK.as_secs_f64()),
+            Msg::Pointer(p) => model.boton.pointer(p),
+            Msg::Click => {
+                model.boton.press();
+                model.clicks += 1;
+            }
+        }
+        model
+    }
+
+    fn view(model: &Self::Model) -> View<Self::Msg> {
+        let stage = View::new(Style {
+            size: Size { width: length(240.0_f32), height: length(240.0_f32) },
+            flex_shrink: 0.0,
+            align_items: Some(AlignItems::Center),
+            justify_content: Some(JustifyContent::Center),
+            ..Default::default()
+        })
+        .radius(16.0)
+        .fill(Color::from_rgba8(26, 30, 40, 255))
+        .children(vec![model.boton.view(Msg::Pointer, Msg::Click)]);
+
+        let estado = if model.boton.is_transitioning() {
+            "· · · crossfade · · ·".to_string()
+        } else {
+            format!("estado: {}   ·   clicks: {}", model.boton.current_state(), model.clicks)
+        };
+        let status = View::new(Style {
+            size: Size { width: percent(1.0_f32), height: length(26.0_f32) },
+            align_items: Some(AlignItems::Center),
+            justify_content: Some(JustifyContent::Center),
+            ..Default::default()
+        })
+        .text(estado, 17.0, Color::from_rgba8(180, 200, 230, 255));
+
+        let hint = View::new(Style {
+            size: Size { width: percent(1.0_f32), height: length(22.0_f32) },
+            align_items: Some(AlignItems::Center),
+            justify_content: Some(JustifyContent::Center),
+            ..Default::default()
+        })
+        .text(
+            "puntero encima = hover · click = press".to_string(),
+            14.0,
+            Color::from_rgba8(120, 135, 160, 255),
+        );
+
+        View::new(Style {
+            flex_direction: FlexDirection::Column,
+            size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+            gap: Size { width: length(0.0_f32), height: length(16.0_f32) },
+            align_items: Some(AlignItems::Center),
+            justify_content: Some(JustifyContent::Center),
+            padding: Rect {
+                left: length(24.0_f32),
+                right: length(24.0_f32),
+                top: length(24.0_f32),
+                bottom: length(24.0_f32),
+            },
+            ..Default::default()
+        })
+        .fill(Color::from_rgba8(18, 22, 30, 255))
+        .children(vec![stage, status, hint])
+    }
+}
+
+fn main() {
+    llimphi_ui::run::<Demo>();
+}
diff --git a/widgets/rive-button/src/lib.rs b/widgets/rive-button/src/lib.rs
new file mode 100644
index 0000000..b3dbcde
--- /dev/null
+++ b/widgets/rive-button/src/lib.rs
@@ -0,0 +1,277 @@
+//! `llimphi-widget-rive-button` — botón **reactivo** dirigido por una máquina de
+//! estados estilo Rive ([`llimphi_anim::StateMachine`]).
+//!
+//! Es el primer consumidor *real* de la máquina de estados fuera del
+//! `llimphi-anim-studio` (que la autora) y de los examples de `llimphi-lottie`.
+//! Encapsula la composición canónica del demo `pointer_listeners_demo` como un
+//! widget reusable: tres estados —`idle` / `hover` / `press`— cada uno con su
+//! clip Lottie, hilados por inputs que el motor deriva del puntero crudo:
+//!
+//! - **hover** (`bool`): los listeners `Enter`/`Exit` sobre toda la superficie
+//!   prenden/apagan el input `hovered`; `idle ⇄ hover` con crossfade.
+//! - **press** (`trigger`): el host llama [`RiveButton::press`] desde su
+//!   `on_click`; dispara el trigger `pressed`, la máquina entra al estado `press`
+//!   (clip **no-loop**) y, al terminar el clip (`ClipDone`), vuelve a `hover` o
+//!   `idle` según siga el puntero encima.
+//!
+//! El widget es **stateful** (como `text-editor`/`nodegraph`): el host lo guarda
+//! en su `Model`, lo avanza con [`advance`] desde un tick periódico, le reenvía
+//! el puntero con [`pointer`] y el click con [`press`], y lo pinta con [`view`].
+//! El hit-testing vive en el motor, no en la app.
+//!
+//! ```ignore
+//! // En el Model del host:
+//! boton: RiveButton::builtin(),
+//! // update:
+//! Msg::Tick      => m.boton.advance(DT),
+//! Msg::Pointer(p)=> m.boton.pointer(p),
+//! Msg::Click     => { m.boton.press(); /* acción del host */ }
+//! // view:
+//! m.boton.view(Msg::Pointer, Msg::Click)
+//! ```
+//!
+//! [`advance`]: RiveButton::advance
+//! [`pointer`]: RiveButton::pointer
+//! [`press`]: RiveButton::press
+//! [`view`]: RiveButton::view
+
+#![forbid(unsafe_code)]
+
+use llimphi_anim::{Action, Area, Condition, Instance, PointerTrigger, StateMachine};
+use llimphi_lottie::{state_machine_view, LottieAsset};
+use llimphi_ui::llimphi_layout::taffy::prelude::{percent, Size, Style};
+use llimphi_ui::View;
+
+/// id de clip = índice en el `Vec<LottieAsset>` que se pasa a `state_machine_view`.
+const IDLE: u32 = 0;
+const HOVER: u32 = 1;
+const PRESS: u32 = 2;
+
+/// Botón reactivo: la máquina de estados viva + sus tres clips.
+pub struct RiveButton {
+    inst: Instance,
+    clips: Vec<LottieAsset>,
+}
+
+impl RiveButton {
+    /// Construye el botón a partir de tres clips Lottie propios.
+    ///
+    /// - `idle` / `hover` / `press`: los clips de cada estado.
+    /// - `press_secs`: duración del clip de `press` (segundos) — la condición
+    ///   `ClipDone` la usa para devolver el estado a `hover`/`idle`.
+    /// - `blend_secs`: crossfade entre estados (`0.0` = salto seco).
+    pub fn new(
+        idle: LottieAsset,
+        hover: LottieAsset,
+        press: LottieAsset,
+        press_secs: f64,
+        blend_secs: f64,
+    ) -> Self {
+        let mut sm = StateMachine::new();
+        let s_idle = sm.add_state("idle", IDLE, 1.0, true);
+        let s_hover = sm.add_state("hover", HOVER, 1.0, true);
+        let s_press = sm.add_state("press", PRESS, 1.0, false);
+        sm.set_clip_duration(PRESS, press_secs);
+        sm.set_entry(s_idle);
+
+        // Hover: idle ⇄ hover según el bool `hovered`.
+        sm.transition(s_idle, s_hover, vec![Condition::bool("hovered", true)], blend_secs);
+        sm.transition(s_hover, s_idle, vec![Condition::bool("hovered", false)], blend_secs);
+        // Press: desde cualquier estado, el trigger `pressed` entra a `press`
+        // (blend corto para que el pop se sienta inmediato).
+        sm.transition_any(s_press, vec![Condition::trigger("pressed")], blend_secs.min(0.06));
+        // Salida de press al terminar el clip: vuelve a donde corresponda según
+        // el puntero (sin loops: `press` es no-loop, así `ClipDone` aplica).
+        sm.transition(s_press, s_hover, vec![Condition::clip_done(), Condition::bool("hovered", true)], blend_secs);
+        sm.transition(s_press, s_idle, vec![Condition::clip_done(), Condition::bool("hovered", false)], blend_secs);
+
+        Self::from_state_machine(sm, vec![idle, hover, press])
+    }
+
+    /// Envuelve una `StateMachine` **ya armada** como botón reactivo — el seam por
+    /// el que entra una máquina **authored en `llimphi-anim-studio`**
+    /// (`Project::load(..).doc.compile()`), cerrando el lazo autor→consumidor.
+    ///
+    /// Le agrega los listeners de puntero estándar (`Enter`/`Exit` → input
+    /// `hovered`) para que el hover ande, ya que el `Doc` del studio es grafo
+    /// puro sin listeners. La máquina debe usar por convención el bool `hovered`
+    /// y el trigger `pressed`, y un estado de press no-loop; `clips` se indexa por
+    /// `ClipId` (= índice de estado en las máquinas del studio).
+    pub fn from_state_machine(mut sm: StateMachine, clips: Vec<LottieAsset>) -> Self {
+        sm.listener(Area::All, PointerTrigger::Enter, Action::set_bool("hovered", true));
+        sm.listener(Area::All, PointerTrigger::Exit, Action::set_bool("hovered", false));
+        Self { inst: sm.instance(), clips }
+    }
+
+    /// Botón listo para usar con clips Lottie embebidos (círculo que late en
+    /// reposo, gira en hover y da un cuarto de giro al apretarlo). Útil para
+    /// demos, tests y como placeholder hasta que la app traiga sus propios clips.
+    pub fn builtin() -> Self {
+        let idle = LottieAsset::from_str(IDLE_LOTTIE).expect("idle lottie embebido válido");
+        let hover = LottieAsset::from_str(HOVER_LOTTIE).expect("hover lottie embebido válido");
+        let press = LottieAsset::from_str(PRESS_LOTTIE).expect("press lottie embebido válido");
+        // press = 12 frames @ 30 fps = 0.4 s.
+        Self::new(idle, hover, press, 0.4, 0.18)
+    }
+
+    /// Avanza la animación `dt` segundos. Llamar desde un tick periódico del host
+    /// (`Handle::spawn_periodic`) mientras el botón esté visible.
+    pub fn advance(&mut self, dt: f64) {
+        self.inst.advance(dt);
+    }
+
+    /// Reenvía el puntero crudo en coords normalizadas `0..1` sobre el rect del
+    /// botón (o `None` si salió). Los listeners del motor derivan `hovered`.
+    pub fn pointer(&mut self, pos: Option<(f64, f64)>) {
+        self.inst.pointer_move(pos);
+    }
+
+    /// Dispara la animación de press (típico: desde el `on_click` del host). El
+    /// host hace además su propia acción de click; el widget sólo anima.
+    pub fn press(&mut self) {
+        self.inst.fire("pressed");
+    }
+
+    /// Nombre del estado actual (`"idle"` / `"hover"` / `"press"`; el de origen
+    /// mientras hay crossfade).
+    pub fn current_state(&self) -> &str {
+        self.inst.current_state()
+    }
+
+    /// ¿Hay un crossfade entre estados en curso?
+    pub fn is_transitioning(&self) -> bool {
+        self.inst.is_transitioning()
+    }
+
+    /// La vista del botón: pinta el frame de la máquina (con crossfade) y reenvía
+    /// puntero + click como mensajes del host.
+    ///
+    /// - `on_pointer`: mapea la posición normalizada `0..1` (o `None` al salir) a
+    ///   un `Msg`; el host lo rutea a [`pointer`](RiveButton::pointer).
+    /// - `on_click`: `Msg` emitido al click; el host debe llamar
+    ///   [`press`](RiveButton::press) al recibirlo (además de su propia acción).
+    pub fn view<Msg, F>(&self, on_pointer: F, on_click: Msg) -> View<Msg>
+    where
+        Msg: Clone + 'static,
+        F: Fn(Option<(f64, f64)>) -> Msg + Clone + Send + Sync + 'static,
+    {
+        let leave = on_pointer.clone();
+        View::new(fill())
+            .children(vec![state_machine_view::<Msg>(self.inst.render_frame(), self.clips.clone())])
+            .on_pointer_move_at(move |lx, ly, w, h| {
+                if w > 0.0 && h > 0.0 {
+                    Some(on_pointer(Some((lx as f64 / w as f64, ly as f64 / h as f64))))
+                } else {
+                    None
+                }
+            })
+            .on_pointer_leave(leave(None))
+            .on_click(on_click)
+    }
+}
+
+/// "Ocupa todo el rect del padre" — el caller envuelve esto en un contenedor con
+/// el tamaño que necesite.
+fn fill() -> Style {
+    Style {
+        size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+        ..Default::default()
+    }
+}
+
+/// idle: círculo azul cuya opacidad late (100→55→100) en 2 s.
+const IDLE_LOTTIE: &str = r#"{
+  "v":"5.5.2","fr":30,"ip":0,"op":60,"w":100,"h":100,
+  "layers":[{"ty":4,"ip":0,"op":60,"st":0,"sr":1,
+    "ks":{"o":{"a":1,"k":[
+        {"i":{"x":[0.5],"y":[0.5]},"o":{"x":[0.5],"y":[0.5]},"t":0,"s":[100]},
+        {"i":{"x":[0.5],"y":[0.5]},"o":{"x":[0.5],"y":[0.5]},"t":30,"s":[55]},
+        {"t":60,"s":[100]}]},
+      "r":{"a":0,"k":0},"p":{"a":0,"k":[50,50]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]}},
+    "shapes":[{"ty":"gr","it":[
+      {"ty":"el","p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[64,64]}},
+      {"ty":"fl","c":{"a":0,"k":[0.30,0.55,0.95]},"o":{"a":0,"k":100}},
+      {"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100}}]}]}]}"#;
+
+/// hover: círculo verde que gira 360° en 2 s (loop).
+const HOVER_LOTTIE: &str = r#"{
+  "v":"5.5.2","fr":30,"ip":0,"op":60,"w":100,"h":100,
+  "layers":[{"ty":4,"ip":0,"op":60,"st":0,"sr":1,
+    "ks":{"o":{"a":0,"k":100},
+      "r":{"a":1,"k":[
+        {"i":{"x":[0.5],"y":[0.5]},"o":{"x":[0.5],"y":[0.5]},"t":0,"s":[0]},
+        {"t":60,"s":[360]}]},
+      "p":{"a":0,"k":[50,50]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]}},
+    "shapes":[{"ty":"gr","it":[
+      {"ty":"rc","p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[60,60]},"r":{"a":0,"k":12}},
+      {"ty":"fl","c":{"a":0,"k":[0.30,0.80,0.45]},"o":{"a":0,"k":100}},
+      {"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100}}]}]}]}"#;
+
+/// press: cuadrado naranja que da un cuarto de giro rápido (0→90° en 0,4 s), no-loop.
+const PRESS_LOTTIE: &str = r#"{
+  "v":"5.5.2","fr":30,"ip":0,"op":12,"w":100,"h":100,
+  "layers":[{"ty":4,"ip":0,"op":12,"st":0,"sr":1,
+    "ks":{"o":{"a":0,"k":100},
+      "r":{"a":1,"k":[
+        {"i":{"x":[0.5],"y":[0.5]},"o":{"x":[0.5],"y":[0.5]},"t":0,"s":[0]},
+        {"t":12,"s":[90]}]},
+      "p":{"a":0,"k":[50,50]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]}},
+    "shapes":[{"ty":"gr","it":[
+      {"ty":"rc","p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[66,66]},"r":{"a":0,"k":14}},
+      {"ty":"fl","c":{"a":0,"k":[0.95,0.55,0.15]},"o":{"a":0,"k":100}},
+      {"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100}}]}]}]}"#;
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    /// El ciclo completo idle → hover → press → hover → idle dirigido sólo por
+    /// puntero y click, certificando la máquina sin GPU.
+    #[test]
+    fn ciclo_hover_press_certificado() {
+        let mut rb = RiveButton::builtin();
+        assert_eq!(rb.current_state(), "idle");
+
+        // Puntero al centro → Enter prende `hovered` → idle→hover (tras el blend).
+        rb.pointer(Some((0.5, 0.5)));
+        rb.advance(0.5);
+        assert_eq!(rb.current_state(), "hover", "el hover no entró con el puntero encima");
+
+        // Click → trigger `pressed` → estado press (clip no-loop).
+        rb.press();
+        rb.advance(0.2);
+        assert_eq!(rb.current_state(), "press", "el click no disparó el press");
+
+        // El clip de press (0,4 s) termina → ClipDone → vuelve a hover (sigue encima).
+        rb.advance(0.6);
+        assert_eq!(rb.current_state(), "hover", "press no volvió a hover al terminar el clip");
+
+        // Puntero fuera → Exit apaga `hovered` → hover→idle.
+        rb.pointer(None);
+        rb.advance(0.5);
+        assert_eq!(rb.current_state(), "idle", "el botón no volvió a idle al salir el puntero");
+    }
+
+    /// Un press estando fuera (sin hover) vuelve a `idle`, no a `hover`.
+    #[test]
+    fn press_sin_hover_vuelve_a_idle() {
+        let mut rb = RiveButton::builtin();
+        rb.press();
+        rb.advance(0.2);
+        assert_eq!(rb.current_state(), "press");
+        rb.advance(0.6);
+        assert_eq!(rb.current_state(), "idle", "sin puntero encima, press debe volver a idle");
+    }
+
+    /// La vista se construye sin panic con un Msg real (humo del cableado de hooks).
+    #[test]
+    fn view_se_construye() {
+        #[derive(Clone)]
+        enum Msg {
+            Pointer(Option<(f64, f64)>),
+            Click,
+        }
+        let rb = RiveButton::builtin();
+        let _v = rb.view(Msg::Pointer, Msg::Click);
+    }
+}
diff --git a/widgets/router/Cargo.toml b/widgets/router/Cargo.toml
new file mode 100644
index 0000000..6497807
--- /dev/null
+++ b/widgets/router/Cargo.toml
@@ -0,0 +1,16 @@
+[package]
+name = "llimphi-widget-router"
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+authors.workspace = true
+publish.workspace = true
+description = "llimphi-widget-router — navegación por pila de rutas con transiciones de página (None/Fade/Slide/Zoom). Análogo al Navigator de Flutter: RouteStack<R> puro en el Model + router_view que compone animated_switch_from sobre el seam LayoutBuilder. Los Hero cruzan rutas gratis (misma key en ambas páginas)."
+
+[dependencies]
+llimphi-ui = { workspace = true }
+
+[dev-dependencies]
+llimphi-theme = { workspace = true }
+llimphi-widget-button = { workspace = true }
+llimphi-widget-hero = { workspace = true }
diff --git a/widgets/router/LEEME.md b/widgets/router/LEEME.md
new file mode 100644
index 0000000..b68a766
--- /dev/null
+++ b/widgets/router/LEEME.md
@@ -0,0 +1,55 @@
+# llimphi-widget-router
+
+*Read this in English: [README.md](README.md).*
+
+Navegación por **pila de rutas** con transiciones de página. Es el análogo del `Navigator` de Flutter, resuelto a la Elm:
+
+- La pila (`RouteStack`) vive en el `Model` del App — pura, testeable,
+  serializable si `R` lo es. El widget no retiene nada.
+- `router_view` pinta **sólo la ruta actual** y compone
+  `View::animated_switch_from` (compositor) para la transición: al cambiar
+  la ruta, la página vieja sale como fantasma direccional y la nueva entra
+  desde el lado opuesto. La dirección la decide el último op de la pila:
+  **push entra desde la derecha, pop desde la izquierda** (LTR clásico).
+- Los **Hero** cruzan rutas gratis: un nodo con `View::hero(key, dur)` (o
+  `hero_view` del widget hero) presente en la página saliente y en la
+  entrante con la misma `key` **vuela** entre sus dos rects — el
+  `HeroRegistry` del runtime ya enlaza identidad entre frames.
+
+## Uso
+```ignore
+// Model
+struct Model { nav: RouteStack<Ruta> }
+#[derive(Clone, PartialEq, Hash)]
+enum Ruta { Lista, Detalle(u32), Config }
+
+// update
+Msg::Abrir(id) => m.nav.push(Ruta::Detalle(id)),
+Msg::Volver    => { m.nav.pop(); }
+
+// view
+router_view(1, &m.nav, PageTransition::Slide, motion::SLOW, move |r| {
+    match r {
+        Ruta::Lista      => lista_view(m),
+        Ruta::Detalle(i) => detalle_view(m, *i),
+        Ruta::Config     => config_view(m),
+    }
+})
+```
+## Limitaciones honestas
+
+- ~~El fantasma se pinta encima del contenido nuevo~~ → resuelto con el
+  **scene-split de fantasmas** (`SwitchStyle::exit_under`): la página
+  saliente se pinta DEBAJO de la entrante, en su posición z real. Eso
+  habilita `PageTransition::Cover` — push opaco estilo UIKit (la nueva
+  tapa sin fade; el pop desliza la vieja por encima, revelando).
+- `router_view` usa el seam `LayoutBuilder` para conocer el slot; el límite
+  v1 del seam es **sin anidamiento** — si una página contiene otro
+  `layout_builder` (p. ej. `fitted_box`), usar `router_view_sized` con el
+  tamaño que la app ya trackea por `on_resize`.
+- Una transición en curso no se "revierte" al conmutar de nuevo: la
+  variante cambia y arranca la nueva (el fantasma anterior sigue su fade).
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/router/README.md b/widgets/router/README.md
new file mode 100644
index 0000000..1b60e7a
--- /dev/null
+++ b/widgets/router/README.md
@@ -0,0 +1,56 @@
+# llimphi-widget-router
+
+Navigation by a **route stack** with page transitions. The analogue of Flutter's
+`Navigator`, solved the Elm way:
+
+- The stack (`RouteStack`) lives in the App's `Model` — pure, testable,
+  serializable if `R` is. The widget retains nothing.
+- `router_view` paints **only the current route** and composes
+  `View::animated_switch_from` (compositor) for the transition: when the route
+  changes, the old page leaves as a directional ghost and the new one enters from
+  the opposite side. The direction is decided by the stack's last op: **push
+  enters from the right, pop from the left** (classic LTR).
+- **Heroes** cross routes for free: a node with `View::hero(key, dur)` (or the
+  hero widget's `hero_view`) present both in the outgoing page and in the
+  incoming one under the same `key` **flies** between its two rects — the
+  runtime's `HeroRegistry` already links identity across frames.
+
+## Use
+
+```ignore
+// Model
+struct Model { nav: RouteStack<Route> }
+#[derive(Clone, PartialEq, Hash)]
+enum Route { List, Detail(u32), Config }
+
+// update
+Msg::Open(id) => m.nav.push(Route::Detail(id)),
+Msg::Back     => { m.nav.pop(); }
+
+// view
+router_view(1, &m.nav, PageTransition::Slide, motion::SLOW, move |r| {
+    match r {
+        Route::List      => list_view(m),
+        Route::Detail(i) => detail_view(m, *i),
+        Route::Config    => config_view(m),
+    }
+})
+```
+
+## Honest limitations
+
+- ~~The ghost paints over the new content~~ → solved with the **ghost scene
+  split** (`SwitchStyle::exit_under`): the outgoing page paints UNDER the
+  incoming one, at its real z position. That enables `PageTransition::Cover` —
+  an opaque UIKit-style push (the new one covers without a fade; the pop slides
+  the old one over the top, revealing).
+- `router_view` uses the `LayoutBuilder` seam to learn its slot; the seam's v1
+  limit is **no nesting** — if a page contains another `layout_builder` (say a
+  `fitted_box`), use `router_view_sized` with the size the app already tracks
+  through `on_resize`.
+- A transition in flight is not "reverted" when switching again: the variant
+  changes and the new one starts (the previous ghost carries on with its fade).
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/router/examples/router_demo.rs b/widgets/router/examples/router_demo.rs
new file mode 100644
index 0000000..e8455ff
--- /dev/null
+++ b/widgets/router/examples/router_demo.rs
@@ -0,0 +1,307 @@
+//! Demo del router: tres rutas (Lista → Detalle con hero → Config), pila en
+//! el Model, transiciones de página y vuelo de hero entre rutas.
+//!
+//! - Click en una fila → push a Detalle (el avatar VUELA de la fila al
+//!   encabezado, cortesía del HeroRegistry — misma key en ambas páginas).
+//! - `Esc`/`Backspace` o el botón «‹ Volver» → pop (slide inverso).
+//! - `T` cicla la transición (Slide → Cover → Zoom → Fade → None).
+//!   Cover = push opaco estilo UIKit (la nueva tapa; al volver, la vieja
+//!   se desliza por encima revelando la de abajo — scene-split de fantasmas).
+//!
+//! Corre con: `cargo run -p llimphi-widget-router --example router_demo --release`
+
+use std::time::Duration;
+
+use llimphi_ui::llimphi_layout::taffy::{
+    prelude::{length, percent, FlexDirection, Size, Style},
+    AlignItems, Rect as TRect,
+};
+use llimphi_ui::llimphi_raster::peniko::Color;
+use llimphi_ui::{App, Handle, Key, KeyEvent, KeyState, NamedKey, View};
+use llimphi_theme::Theme;
+use llimphi_widget_button::{button_view, ButtonPalette};
+use llimphi_widget_router::{router_view, PageTransition, RouteStack};
+
+#[derive(Debug, Clone, PartialEq, Hash)]
+enum Ruta {
+    Lista,
+    Detalle(usize),
+    Config,
+}
+
+#[derive(Clone)]
+enum Msg {
+    Abrir(usize),
+    Config,
+    Volver,
+    CicloTransicion,
+}
+
+struct Model {
+    nav: RouteStack<Ruta>,
+    transition: PageTransition,
+}
+
+/// Los "contactos" del demo: nombre + color de avatar.
+const GENTE: [(&str, (u8, u8, u8)); 5] = [
+    ("Amaru", (231, 111, 81)),
+    ("Killa", (42, 157, 143)),
+    ("Inti", (233, 196, 106)),
+    ("Wayra", (138, 99, 210)),
+    ("Nina", (214, 64, 105)),
+];
+
+/// Key de hero por persona — estable y única entre las presentes en un frame.
+fn hero_key(i: usize) -> u64 {
+    100 + i as u64
+}
+
+fn siguiente_transicion(t: PageTransition) -> PageTransition {
+    match t {
+        PageTransition::Slide => PageTransition::Cover,
+        PageTransition::Cover => PageTransition::Zoom,
+        PageTransition::Zoom => PageTransition::Fade,
+        PageTransition::Fade => PageTransition::None,
+        PageTransition::None => PageTransition::Slide,
+    }
+}
+
+/// Avatar cuadrado con radio — el nodo que vuela entre Lista y Detalle.
+fn avatar(i: usize, lado: f32) -> View<Msg> {
+    let (_, (r, g, b)) = GENTE[i];
+    View::new(Style {
+        size: Size { width: length(lado), height: length(lado) },
+        flex_shrink: 0.0,
+        ..Default::default()
+    })
+    .fill(Color::from_rgba8(r, g, b, 255))
+    .radius((lado * 0.22) as f64)
+    .hero(hero_key(i), Duration::from_millis(320))
+}
+
+fn fila(i: usize, theme: &Theme) -> View<Msg> {
+    let (nombre, _) = GENTE[i];
+    View::new(Style {
+        flex_direction: FlexDirection::Row,
+        align_items: Some(AlignItems::Center),
+        size: Size { width: percent(1.0_f32), height: length(56.0_f32) },
+        gap: Size { width: length(12.0_f32), height: length(0.0_f32) },
+        padding: TRect {
+            left: length(12.0_f32),
+            right: length(12.0_f32),
+            top: length(8.0_f32),
+            bottom: length(8.0_f32),
+        },
+        ..Default::default()
+    })
+    .fill(theme.bg_panel)
+    .hover_fill(theme.bg_button_hover)
+    .radius(8.0)
+    .on_click(Msg::Abrir(i))
+    .children(vec![
+        avatar(i, 40.0),
+        View::new(Style { flex_grow: 1.0, ..Default::default() })
+            .text(nombre.to_string(), 18.0, theme.fg_text),
+        View::new(Style {
+            size: Size { width: length(20.0_f32), height: percent(1.0_f32) },
+            ..Default::default()
+        })
+        .text("›".to_string(), 18.0, theme.fg_muted),
+    ])
+}
+
+fn titulo(texto: &str, theme: &Theme) -> View<Msg> {
+    View::new(Style {
+        size: Size { width: percent(1.0_f32), height: length(40.0_f32) },
+        ..Default::default()
+    })
+    .text(texto.to_string(), 26.0, theme.fg_text)
+    .bold()
+}
+
+fn pagina(theme: &Theme, hijos: Vec<View<Msg>>) -> View<Msg> {
+    View::new(Style {
+        flex_direction: FlexDirection::Column,
+        size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+        gap: Size { width: length(0.0_f32), height: length(10.0_f32) },
+        padding: TRect {
+            left: length(24.0_f32),
+            right: length(24.0_f32),
+            top: length(24.0_f32),
+            bottom: length(24.0_f32),
+        },
+        ..Default::default()
+    })
+    .fill(theme.bg_app)
+    .children(hijos)
+}
+
+fn boton_fila(items: Vec<View<Msg>>) -> View<Msg> {
+    View::new(Style {
+        flex_direction: FlexDirection::Row,
+        size: Size { width: percent(1.0_f32), height: length(30.0_f32) },
+        gap: Size { width: length(10.0_f32), height: length(0.0_f32) },
+        ..Default::default()
+    })
+    .children(
+        items
+            .into_iter()
+            .map(|b| {
+                View::new(Style {
+                    size: Size { width: length(140.0_f32), height: length(30.0_f32) },
+                    ..Default::default()
+                })
+                .children(vec![b])
+            })
+            .collect(),
+    )
+}
+
+fn pagina_lista(m: &Model, theme: &Theme, botones: &ButtonPalette) -> View<Msg> {
+    let mut hijos = vec![
+        titulo("Contactos", theme),
+        View::new(Style {
+            size: Size { width: percent(1.0_f32), height: length(22.0_f32) },
+            ..Default::default()
+        })
+        .text(
+            format!("transición: {:?} — tecla T la cicla · Esc vuelve", m.transition),
+            14.0,
+            theme.fg_muted,
+        ),
+    ];
+    hijos.extend((0..GENTE.len()).map(|i| fila(i, theme)));
+    hijos.push(boton_fila(vec![button_view("Config ⚙", botones, Msg::Config)]));
+    pagina(theme, hijos)
+}
+
+fn pagina_detalle(i: usize, theme: &Theme, botones: &ButtonPalette) -> View<Msg> {
+    let (nombre, _) = GENTE[i];
+    pagina(
+        theme,
+        vec![
+            boton_fila(vec![button_view("‹ Volver", botones, Msg::Volver)]),
+            View::new(Style {
+                flex_direction: FlexDirection::Row,
+                align_items: Some(AlignItems::Center),
+                size: Size { width: percent(1.0_f32), height: length(140.0_f32) },
+                gap: Size { width: length(20.0_f32), height: length(0.0_f32) },
+                ..Default::default()
+            })
+            .children(vec![
+                // El MISMO hero key que la fila: el avatar vuela 40px → 120px.
+                avatar(i, 120.0),
+                titulo(nombre, theme),
+            ]),
+            View::new(Style {
+                size: Size { width: percent(1.0_f32), height: length(60.0_f32) },
+                ..Default::default()
+            })
+            .text(
+                "El avatar voló desde la fila de la lista: mismo `hero(key)` en \
+                 las dos páginas — el router no tuvo que hacer nada."
+                    .to_string(),
+                15.0,
+                theme.fg_muted,
+            ),
+        ],
+    )
+}
+
+fn pagina_config(theme: &Theme, botones: &ButtonPalette) -> View<Msg> {
+    pagina(
+        theme,
+        vec![
+            boton_fila(vec![button_view("‹ Volver", botones, Msg::Volver)]),
+            titulo("Config", theme),
+            View::new(Style {
+                size: Size { width: percent(1.0_f32), height: length(40.0_f32) },
+                ..Default::default()
+            })
+            .text(
+                "Una página cualquiera para ejercitar push/pop desde otra ruta."
+                    .to_string(),
+                15.0,
+                theme.fg_muted,
+            ),
+        ],
+    )
+}
+
+struct Demo;
+
+impl App for Demo {
+    type Model = Model;
+    type Msg = Msg;
+
+    fn title() -> &'static str {
+        "llimphi · router demo"
+    }
+
+    fn init(_: &Handle<Self::Msg>) -> Self::Model {
+        Model {
+            nav: RouteStack::new(Ruta::Lista),
+            transition: PageTransition::Slide,
+        }
+    }
+
+    fn update(mut m: Self::Model, msg: Self::Msg, _: &Handle<Self::Msg>) -> Self::Model {
+        match msg {
+            Msg::Abrir(i) => m.nav.push(Ruta::Detalle(i)),
+            Msg::Config => m.nav.push(Ruta::Config),
+            Msg::Volver => {
+                m.nav.pop();
+            }
+            Msg::CicloTransicion => m.transition = siguiente_transicion(m.transition),
+        }
+        m
+    }
+
+    fn on_key(_: &Self::Model, e: &KeyEvent) -> Option<Self::Msg> {
+        if e.state != KeyState::Pressed {
+            return None;
+        }
+        match &e.key {
+            Key::Named(NamedKey::Escape) | Key::Named(NamedKey::Backspace) => {
+                Some(Msg::Volver)
+            }
+            Key::Character(c) if c.eq_ignore_ascii_case("t") => Some(Msg::CicloTransicion),
+            _ => None,
+        }
+    }
+
+    fn view(m: &Self::Model) -> View<Self::Msg> {
+        let theme = Theme::dark();
+        let botones = ButtonPalette::from_theme(&theme);
+        let transition = m.transition;
+        router_view(
+            1,
+            &m.nav,
+            transition,
+            Duration::from_millis(320),
+            move |r| match r {
+                Ruta::Lista => pagina_lista_owned(transition, &theme, &botones),
+                Ruta::Detalle(i) => pagina_detalle(*i, &theme, &botones),
+                Ruta::Config => pagina_config(&theme, &botones),
+            },
+        )
+    }
+}
+
+/// La página de lista necesita la transición actual para el subtítulo, pero la
+/// closure del router no captura el Model — le pasamos lo mínimo.
+fn pagina_lista_owned(
+    transition: PageTransition,
+    theme: &Theme,
+    botones: &ButtonPalette,
+) -> View<Msg> {
+    let m = Model {
+        nav: RouteStack::new(Ruta::Lista),
+        transition,
+    };
+    pagina_lista(&m, theme, botones)
+}
+
+fn main() {
+    llimphi_ui::run::<Demo>();
+}
diff --git a/widgets/router/src/lib.rs b/widgets/router/src/lib.rs
new file mode 100644
index 0000000..3552e91
--- /dev/null
+++ b/widgets/router/src/lib.rs
@@ -0,0 +1,543 @@
+//! `llimphi-widget-router` — navegación por **pila de rutas** con transiciones
+//! de página. Es el análogo del `Navigator` de Flutter, resuelto a la Elm:
+//!
+//! - La pila ([`RouteStack`]) vive en el `Model` del App — pura, testeable,
+//!   serializable si `R` lo es. El widget no retiene nada.
+//! - [`router_view`] pinta **sólo la ruta actual** y compone
+//!   `View::animated_switch_from` (compositor) para la transición: al cambiar
+//!   la ruta, la página vieja sale como fantasma direccional y la nueva entra
+//!   desde el lado opuesto. La dirección la decide el último op de la pila:
+//!   **push entra desde la derecha, pop desde la izquierda** (LTR clásico).
+//! - Los **Hero** cruzan rutas gratis: un nodo con `View::hero(key, dur)` (o
+//!   `hero_view` del widget hero) presente en la página saliente y en la
+//!   entrante con la misma `key` **vuela** entre sus dos rects — el
+//!   `HeroRegistry` del runtime ya enlaza identidad entre frames.
+//!
+//! ## Uso
+//!
+//! ```ignore
+//! // Model
+//! struct Model { nav: RouteStack<Ruta> }
+//! #[derive(Clone, PartialEq, Hash)]
+//! enum Ruta { Lista, Detalle(u32), Config }
+//!
+//! // update
+//! Msg::Abrir(id) => m.nav.push(Ruta::Detalle(id)),
+//! Msg::Volver    => { m.nav.pop(); }
+//!
+//! // view
+//! router_view(1, &m.nav, PageTransition::Slide, motion::SLOW, move |r| {
+//!     match r {
+//!         Ruta::Lista      => lista_view(m),
+//!         Ruta::Detalle(i) => detalle_view(m, *i),
+//!         Ruta::Config     => config_view(m),
+//!     }
+//! })
+//! ```
+//!
+//! ## Limitaciones honestas
+//!
+//! - ~~El fantasma se pinta encima del contenido nuevo~~ → resuelto con el
+//!   **scene-split de fantasmas** (`SwitchStyle::exit_under`): la página
+//!   saliente se pinta DEBAJO de la entrante, en su posición z real. Eso
+//!   habilita [`PageTransition::Cover`] — push opaco estilo UIKit (la nueva
+//!   tapa sin fade; el pop desliza la vieja por encima, revelando).
+//! - `router_view` usa el seam `LayoutBuilder` para conocer el slot; el límite
+//!   v1 del seam es **sin anidamiento** — si una página contiene otro
+//!   `layout_builder` (p. ej. `fitted_box`), usar [`router_view_sized`] con el
+//!   tamaño que la app ya trackea por `on_resize`.
+//! - Una transición en curso no se "revierte" al conmutar de nuevo: la
+//!   variante cambia y arranca la nueva (el fantasma anterior sigue su fade).
+
+#![forbid(unsafe_code)]
+
+use std::hash::{Hash, Hasher};
+use std::time::Duration;
+
+use llimphi_ui::llimphi_layout::taffy::prelude::{percent, Size, Style};
+use llimphi_ui::llimphi_raster::kurbo::Affine;
+use llimphi_ui::View;
+
+// Estilo del switch direccional del compositor (re-export para callers que
+// quieran armar transiciones custom con `transition_style` como base).
+pub use llimphi_ui::llimphi_compositor::SwitchStyle;
+
+/// El último cambio aplicado a la pila — decide la **dirección** de la
+/// transición (push avanza, pop retrocede).
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum NavOp {
+    /// Se apiló una ruta nueva (avanza).
+    Push,
+    /// Se desapiló la ruta del tope (retrocede).
+    Pop,
+    /// Se sustituyó la ruta del tope (avanza, sin crecer la pila).
+    Replace,
+    /// La pila volvió a su raíz o se reinició (retrocede).
+    Reset,
+}
+
+impl NavOp {
+    /// `true` si el op avanza (entra "hacia adelante"); `false` si retrocede.
+    pub fn avanza(self) -> bool {
+        matches!(self, NavOp::Push | NavOp::Replace)
+    }
+}
+
+/// Pila de rutas pura — vive en el `Model` del App. `R` es el tipo de ruta del
+/// dominio (típicamente un enum). Nunca queda vacía: siempre hay una raíz.
+#[derive(Debug, Clone)]
+pub struct RouteStack<R> {
+    routes: Vec<R>,
+    last_op: NavOp,
+}
+
+impl<R: Clone + PartialEq + Hash> RouteStack<R> {
+    /// Pila con una sola ruta raíz.
+    pub fn new(root: R) -> Self {
+        Self { routes: vec![root], last_op: NavOp::Reset }
+    }
+
+    /// Apila una ruta nueva encima de la actual.
+    pub fn push(&mut self, route: R) {
+        self.routes.push(route);
+        self.last_op = NavOp::Push;
+    }
+
+    /// Desapila la ruta del tope. Devuelve `false` (y no hace nada) si la
+    /// pila está en la raíz — la raíz no se puede poppear.
+    pub fn pop(&mut self) -> bool {
+        if self.routes.len() <= 1 {
+            return false;
+        }
+        self.routes.pop();
+        self.last_op = NavOp::Pop;
+        true
+    }
+
+    /// Sustituye la ruta del tope (sin crecer la pila). Si la ruta nueva es
+    /// igual a la actual, no registra op (la vista no transiciona).
+    pub fn replace(&mut self, route: R) {
+        if *self.current() == route {
+            return;
+        }
+        *self.routes.last_mut().expect("pila nunca vacía") = route;
+        self.last_op = NavOp::Replace;
+    }
+
+    /// Descarta todo menos la raíz.
+    pub fn pop_to_root(&mut self) {
+        if self.routes.len() > 1 {
+            self.routes.truncate(1);
+            self.last_op = NavOp::Reset;
+        }
+    }
+
+    /// Reinicia la pila con una raíz nueva.
+    pub fn reset(&mut self, root: R) {
+        self.routes.clear();
+        self.routes.push(root);
+        self.last_op = NavOp::Reset;
+    }
+
+    /// La ruta visible (tope de la pila).
+    pub fn current(&self) -> &R {
+        self.routes.last().expect("pila nunca vacía")
+    }
+
+    /// Cantidad de rutas apiladas (≥ 1).
+    pub fn depth(&self) -> usize {
+        self.routes.len()
+    }
+
+    /// `true` si hay a dónde volver (no estamos en la raíz).
+    pub fn can_pop(&self) -> bool {
+        self.routes.len() > 1
+    }
+
+    /// El último cambio aplicado — dirección de la próxima transición.
+    pub fn last_op(&self) -> NavOp {
+        self.last_op
+    }
+
+    /// Discriminador de contenido para el `animated_switch` del router:
+    /// mezcla profundidad + ruta actual, así push/pop/replace cambian la
+    /// variante (y disparan transición) pero un rebuild sin cambios no.
+    pub fn variant(&self) -> u64 {
+        let mut h = std::hash::DefaultHasher::new();
+        self.routes.len().hash(&mut h);
+        self.current().hash(&mut h);
+        h.finish()
+    }
+}
+
+/// Transición entre páginas.
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
+pub enum PageTransition {
+    /// Corte seco (sin captura de subescena — coste cero).
+    None,
+    /// Cross-fade en el lugar.
+    Fade,
+    /// Deslizamiento horizontal + fade (Material *shared-axis X*): push entra
+    /// desde la derecha y lo viejo sale un 30 % hacia la izquierda; pop, lo
+    /// inverso.
+    #[default]
+    Slide,
+    /// La página nueva "emerge" (scale 0.92 → 1) y la vieja se agranda
+    /// levemente al irse (Material *fade-through*). Sin dirección.
+    Zoom,
+    /// Push **opaco** estilo UIKit: la página nueva entra deslizándose desde
+    /// la derecha SIN fade y cubre a la vieja (que queda quieta debajo, sin
+    /// desvanecerse); al volver, la que se va desliza hacia la derecha por
+    /// encima revelando la de abajo. Usa el scene-split de fantasmas
+    /// (`exit_under`/`exit_hold`).
+    Cover,
+}
+
+/// Fracción del ancho que retrocede la página que queda "debajo" en un
+/// [`PageTransition::Slide`] (parallax de salida, estilo iOS/Material).
+const SLIDE_PARALLAX: f64 = 0.30;
+/// Escala inicial de la página entrante en [`PageTransition::Zoom`].
+const ZOOM_ENTER: f64 = 0.92;
+/// Escala final de la página saliente en [`PageTransition::Zoom`].
+const ZOOM_EXIT: f64 = 1.05;
+
+/// Estilo completo ([`SwitchStyle`]) de una transición sobre un slot `(w, h)`,
+/// según la dirección del op. Pura y testeable. En todas menos `Cover`-pop el
+/// fantasma va **debajo** del contenido nuevo (`exit_under` — su posición z
+/// real); en `Cover` además no se desvanece (`exit_hold`).
+pub fn transition_style(
+    transition: PageTransition,
+    op: NavOp,
+    slot: (f32, f32),
+) -> SwitchStyle {
+    let (w, _h) = (slot.0 as f64, slot.1 as f64);
+    let base = SwitchStyle {
+        exit_under: true,
+        ..Default::default()
+    };
+    match transition {
+        PageTransition::None | PageTransition::Fade => base,
+        PageTransition::Slide => {
+            let paralaje = w * SLIDE_PARALLAX;
+            if op.avanza() {
+                // Entra desde la derecha; lo viejo retrocede a la izquierda.
+                SwitchStyle {
+                    enter_from_xf: Some(Affine::translate((w, 0.0))),
+                    exit_to_xf: Some(Affine::translate((-paralaje, 0.0))),
+                    ..base
+                }
+            } else {
+                // Vuelve: entra desde la izquierda (donde había retrocedido);
+                // lo viejo se va del todo hacia la derecha.
+                SwitchStyle {
+                    enter_from_xf: Some(Affine::translate((-paralaje, 0.0))),
+                    exit_to_xf: Some(Affine::translate((w, 0.0))),
+                    ..base
+                }
+            }
+        }
+        PageTransition::Zoom => SwitchStyle {
+            enter_from_xf: Some(Affine::scale(ZOOM_ENTER)),
+            exit_to_xf: Some(Affine::scale(ZOOM_EXIT)),
+            ..base
+        },
+        PageTransition::Cover => {
+            if op.avanza() {
+                // Push UIKit: la nueva entra OPACA desde la derecha; la vieja
+                // queda quieta DEBAJO, sin desvanecerse, hasta quedar cubierta.
+                SwitchStyle {
+                    enter_from_xf: Some(Affine::translate((w, 0.0))),
+                    enter_fade: false,
+                    exit_to_xf: None,
+                    exit_under: true,
+                    exit_hold: true,
+                }
+            } else {
+                // Pop UIKit: la que se va desliza hacia la derecha POR ENCIMA
+                // (fantasma arriba, opaco) revelando a la nueva, que aparece
+                // quieta y entera debajo.
+                SwitchStyle {
+                    enter_from_xf: None,
+                    enter_fade: false,
+                    exit_to_xf: Some(Affine::translate((w, 0.0))),
+                    exit_under: false,
+                    exit_hold: true,
+                }
+            }
+        }
+    }
+}
+
+/// Compat: sólo las afines `(enter_from, exit_to)` de una transición. Para el
+/// estilo completo (placement/hold/fade del push opaco) usar
+/// [`transition_style`].
+pub fn transition_affines(
+    transition: PageTransition,
+    op: NavOp,
+    slot: (f32, f32),
+) -> (Option<Affine>, Option<Affine>) {
+    let s = transition_style(transition, op, slot);
+    (s.enter_from_xf, s.exit_to_xf)
+}
+
+/// Compone el router: pinta la ruta actual de `stack` vía `page` y anima el
+/// cambio de ruta con `transition`. `key` identifica ESTE router (estable,
+/// única entre routers montados a la vez — permite routers anidados).
+///
+/// Mide su slot con el seam `LayoutBuilder` (límite v1: una página no puede
+/// contener otro `layout_builder`; en ese caso usar [`router_view_sized`]).
+/// `page` es una closure porque `View<Msg>` no es `Clone` — el seam puede
+/// invocarla más de una vez en su resolución de dos pasadas.
+pub fn router_view<R, Msg, F>(
+    key: u64,
+    stack: &RouteStack<R>,
+    transition: PageTransition,
+    duration: Duration,
+    page: F,
+) -> View<Msg>
+where
+    R: Clone + PartialEq + Hash + Send + Sync + 'static,
+    Msg: Clone + 'static,
+    F: Fn(&R) -> View<Msg> + Send + Sync + 'static,
+{
+    let route = stack.current().clone();
+    let variant = stack.variant();
+    let op = stack.last_op();
+    View::<Msg>::new(Style {
+        size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+        ..Default::default()
+    })
+    .layout_builder(move |c| {
+        pagina_conmutada(
+            key,
+            &route,
+            variant,
+            op,
+            transition,
+            duration,
+            (c.max_width, c.max_height),
+            &page,
+        )
+    })
+}
+
+/// Variante de [`router_view`] con el slot **explícito** (la app lo trackea
+/// por `on_resize`). No usa `LayoutBuilder` — las páginas pueden contener
+/// otros `layout_builder` (p. ej. `fitted_box`) sin chocar con el límite v1
+/// de anidamiento del seam.
+pub fn router_view_sized<R, Msg, F>(
+    key: u64,
+    stack: &RouteStack<R>,
+    transition: PageTransition,
+    duration: Duration,
+    slot: (f32, f32),
+    page: F,
+) -> View<Msg>
+where
+    R: Clone + PartialEq + Hash,
+    Msg: Clone + 'static,
+    F: Fn(&R) -> View<Msg>,
+{
+    pagina_conmutada(
+        key,
+        stack.current(),
+        stack.variant(),
+        stack.last_op(),
+        transition,
+        duration,
+        slot,
+        &page,
+    )
+}
+
+/// El nodo conmutado común a ambas variantes: la página actual envuelta en el
+/// `animated_switch_from` (o pelada, si la transición es `None`).
+#[allow(clippy::too_many_arguments)]
+fn pagina_conmutada<R, Msg, F>(
+    key: u64,
+    route: &R,
+    variant: u64,
+    op: NavOp,
+    transition: PageTransition,
+    duration: Duration,
+    slot: (f32, f32),
+    page: &F,
+) -> View<Msg>
+where
+    Msg: Clone + 'static,
+    F: Fn(&R) -> View<Msg>,
+{
+    let contenido = page(route);
+    let wrap = View::<Msg>::new(Style {
+        size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+        ..Default::default()
+    })
+    .children(vec![contenido])
+    .clip(true);
+    if transition == PageTransition::None {
+        // Corte seco: sin switch no hay captura de subescena por frame.
+        return wrap;
+    }
+    wrap.animated_switch_styled(key, variant, duration, transition_style(transition, op, slot))
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[derive(Debug, Clone, PartialEq, Hash)]
+    enum Ruta {
+        Lista,
+        Detalle(u32),
+        Config,
+    }
+
+    #[derive(Clone, Debug, PartialEq)]
+    enum Msg {}
+
+    #[test]
+    fn pila_push_pop_replace_reset() {
+        let mut s = RouteStack::new(Ruta::Lista);
+        assert_eq!(*s.current(), Ruta::Lista);
+        assert!(!s.can_pop(), "la raíz no se poppea");
+        assert!(!s.pop(), "pop en la raíz no hace nada");
+
+        s.push(Ruta::Detalle(7));
+        assert_eq!(*s.current(), Ruta::Detalle(7));
+        assert_eq!(s.depth(), 2);
+        assert_eq!(s.last_op(), NavOp::Push);
+        assert!(s.can_pop());
+
+        s.replace(Ruta::Detalle(9));
+        assert_eq!(*s.current(), Ruta::Detalle(9));
+        assert_eq!(s.depth(), 2, "replace no crece la pila");
+        assert_eq!(s.last_op(), NavOp::Replace);
+
+        assert!(s.pop());
+        assert_eq!(*s.current(), Ruta::Lista);
+        assert_eq!(s.last_op(), NavOp::Pop);
+
+        s.push(Ruta::Config);
+        s.push(Ruta::Detalle(1));
+        s.pop_to_root();
+        assert_eq!(*s.current(), Ruta::Lista);
+        assert_eq!(s.depth(), 1);
+        assert_eq!(s.last_op(), NavOp::Reset);
+
+        s.reset(Ruta::Config);
+        assert_eq!(*s.current(), Ruta::Config);
+        assert_eq!(s.depth(), 1);
+    }
+
+    #[test]
+    fn replace_con_la_misma_ruta_no_registra_op() {
+        let mut s = RouteStack::new(Ruta::Lista);
+        s.push(Ruta::Config);
+        let v = s.variant();
+        s.replace(Ruta::Config);
+        assert_eq!(s.last_op(), NavOp::Push, "replace idéntico = no-op");
+        assert_eq!(s.variant(), v, "la variante no cambia");
+    }
+
+    #[test]
+    fn variante_cambia_con_push_pop_y_replace() {
+        let mut s = RouteStack::new(Ruta::Lista);
+        let v0 = s.variant();
+        s.push(Ruta::Detalle(1));
+        let v1 = s.variant();
+        assert_ne!(v0, v1, "push cambia la variante");
+        s.replace(Ruta::Detalle(2));
+        let v2 = s.variant();
+        assert_ne!(v1, v2, "replace cambia la variante");
+        s.pop();
+        assert_eq!(s.variant(), v0, "pop vuelve a la variante de la raíz");
+        // Rebuild sin cambios: variante estable (no dispara transición).
+        assert_eq!(s.variant(), s.variant());
+    }
+
+    #[test]
+    fn slide_direccional_segun_el_op() {
+        let slot = (800.0, 600.0);
+        // Push: entra desde +w, lo viejo retrocede -30 %.
+        let (enter, exit) = transition_affines(PageTransition::Slide, NavOp::Push, slot);
+        assert_eq!(enter.unwrap().as_coeffs()[4], 800.0);
+        assert_eq!(exit.unwrap().as_coeffs()[4], -240.0);
+        // Pop: entra desde el parallax izquierdo, lo viejo se va del todo a +w.
+        let (enter, exit) = transition_affines(PageTransition::Slide, NavOp::Pop, slot);
+        assert_eq!(enter.unwrap().as_coeffs()[4], -240.0);
+        assert_eq!(exit.unwrap().as_coeffs()[4], 800.0);
+        // Reset retrocede como pop; Replace avanza como push.
+        assert!(!NavOp::Reset.avanza());
+        assert!(NavOp::Replace.avanza());
+        // Fade y None: sin afines.
+        assert_eq!(
+            transition_affines(PageTransition::Fade, NavOp::Push, slot),
+            (None, None)
+        );
+    }
+
+    #[test]
+    fn zoom_escala_sin_direccion() {
+        for op in [NavOp::Push, NavOp::Pop] {
+            let (enter, exit) = transition_affines(PageTransition::Zoom, op, (800.0, 600.0));
+            assert_eq!(enter.unwrap().as_coeffs()[0], 0.92);
+            assert_eq!(exit.unwrap().as_coeffs()[0], 1.05);
+        }
+    }
+
+    #[test]
+    fn cover_es_opaco_y_asimetrico() {
+        let slot = (800.0, 600.0);
+        // Push: la nueva entra opaca desde +w; la vieja queda quieta DEBAJO
+        // sin desvanecerse (under + hold, sin exit_to).
+        let s = transition_style(PageTransition::Cover, NavOp::Push, slot);
+        assert_eq!(s.enter_from_xf.unwrap().as_coeffs()[4], 800.0);
+        assert!(!s.enter_fade, "push opaco: sin fade-in");
+        assert!(s.exit_to_xf.is_none(), "la vieja no se mueve");
+        assert!(s.exit_under && s.exit_hold);
+        // Pop: la vieja se va POR ENCIMA hacia +w (sin under) revelando a la
+        // nueva, que aparece quieta (sin enter).
+        let s = transition_style(PageTransition::Cover, NavOp::Pop, slot);
+        assert!(s.enter_from_xf.is_none() && !s.enter_fade);
+        assert_eq!(s.exit_to_xf.unwrap().as_coeffs()[4], 800.0);
+        assert!(!s.exit_under && s.exit_hold);
+        // El resto de las transiciones ponen el fantasma DEBAJO (posición z).
+        for tr in [PageTransition::Fade, PageTransition::Slide, PageTransition::Zoom] {
+            assert!(transition_style(tr, NavOp::Push, slot).exit_under, "{tr:?}");
+        }
+    }
+
+    #[test]
+    fn router_view_construye_en_todas_las_transiciones() {
+        let mut s = RouteStack::new(Ruta::Lista);
+        s.push(Ruta::Detalle(3));
+        for tr in [
+            PageTransition::None,
+            PageTransition::Fade,
+            PageTransition::Slide,
+            PageTransition::Zoom,
+        ] {
+            let _v: View<Msg> = router_view(
+                1,
+                &s,
+                tr,
+                Duration::from_millis(320),
+                |r: &Ruta| {
+                    let _ = r;
+                    View::new(Style::default())
+                },
+            );
+            let _v: View<Msg> = router_view_sized(
+                2,
+                &s,
+                tr,
+                Duration::from_millis(320),
+                (800.0, 600.0),
+                |r: &Ruta| {
+                    let _ = r;
+                    View::new(Style::default())
+                },
+            );
+        }
+    }
+}
diff --git a/widgets/scaffold/Cargo.toml b/widgets/scaffold/Cargo.toml
index 401f811..b2a9c7d 100644
--- a/widgets/scaffold/Cargo.toml
+++ b/widgets/scaffold/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-scaffold — chasis de página estilo Flutter Scaffold: app bar opcional arriba, bottom bar opcional abajo, body que ocupa el resto, FAB anclado bottom-end opcional, drawers laterales opcionales (slide in)."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/scaffold/LEEME.md b/widgets/scaffold/LEEME.md
new file mode 100644
index 0000000..67bf53f
--- /dev/null
+++ b/widgets/scaffold/LEEME.md
@@ -0,0 +1,29 @@
+# llimphi-widget-scaffold
+
+*Read this in English: [README.md](README.md).*
+
+Chasis de página.
+
+Inspiración Flutter `Scaffold`/Material 3 layout. Compone un layout
+de página común:
+```text
+┌──────────────────────────────┐
+│  app bar (opcional)          │  ← 48 px
+├──────────────────────────────┤
+│                              │
+│   body (flex-grow 1)         │
+│                          ╭──╮│
+│                          │+ ││  ← FAB opcional (bottom-end)
+│                          ╰──╯│
+├──────────────────────────────┤
+│  bottom bar (opcional)       │  ← 56 px
+└──────────────────────────────┘
+```
+Los drawers laterales se ofrecen como **overlays** (la app los pasa
+por `view_overlay`, no por el body — así no roban el layout cuando
+están cerrados). Este widget sólo aporta el chasis central; los
+drawers son responsabilidad de quien los abre.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/scaffold/README.md b/widgets/scaffold/README.md
new file mode 100644
index 0000000..c6a2eac
--- /dev/null
+++ b/widgets/scaffold/README.md
@@ -0,0 +1,29 @@
+# llimphi-widget-scaffold
+
+Page chassis.
+
+Inspired by Flutter's `Scaffold` / Material 3 layout. It composes a common page
+layout:
+
+```text
+┌──────────────────────────────┐
+│  app bar (optional)          │  ← 48 px
+├──────────────────────────────┤
+│                              │
+│   body (flex-grow 1)         │
+│                          ╭──╮│
+│                          │+ ││  ← optional FAB (bottom-end)
+│                          ╰──╯│
+├──────────────────────────────┤
+│  bottom bar (optional)       │  ← 56 px
+└──────────────────────────────┘
+```
+
+Side drawers are offered as **overlays** (the app passes them through
+`view_overlay`, not through the body — that way they do not steal layout while
+closed). This widget only contributes the central chassis; the drawers are the
+responsibility of whoever opens them.
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/scroll/Cargo.toml b/widgets/scroll/Cargo.toml
index 689d508..b167cf9 100644
--- a/widgets/scroll/Cargo.toml
+++ b/widgets/scroll/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-scroll — área de scroll vertical reutilizable: viewport clipeado + contenido desplazado + barra arrastrable. Stateless (el offset vive en el Model); rueda autocontenida vía View::on_scroll. Helpers puros: clamp_offset, ensure_visible, approach (scroll suave)."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/scroll/LEEME.md b/widgets/scroll/LEEME.md
new file mode 100644
index 0000000..4300abf
--- /dev/null
+++ b/widgets/scroll/LEEME.md
@@ -0,0 +1,53 @@
+# llimphi-widget-scroll
+
+*Read this in English: [README.md](README.md).*
+
+Área de scroll vertical reutilizable.
+
+Hasta ahora cada app rearmaba el scroll a mano: `App::on_wheel` + un
+offset en el `Model` + `clip` + virtualización. Este widget empaqueta
+ese patrón en un solo builder, **sin estado propio** (el offset sigue
+viviendo en el `Model`, fiel al bucle Elm):
+
+- **viewport clipeado** de alto fijo (`viewport_len`),
+- **contenido desplazado** `-offset` px (overflow recortado),
+- **barra de scroll arrastrable** a la derecha (sólo si el contenido
+  excede el viewport),
+- **rueda autocontenida** vía `View::on_scroll`: girar la rueda con
+  el cursor sobre el área emite un `Msg` sin que la app rutee nada por
+  su `on_wheel` global.
+
+El caller debe conocer el **alto total del contenido** (`content_len`)
+y el **alto visible** (`viewport_len`) — igual que `list`/`grid` ya
+piden la ventana visible. Para contenido de filas uniformes es
+`n_filas * alto_fila`.
+
+## Convención del callback `on_scroll`
+
+`on_scroll` recibe el **delta en px** a sumar al offset (no el offset
+absoluto): tanto la rueda como el arrastre de la barra emiten deltas,
+y el caller acumula + clampea en su `update` con `clamp_offset`. Es
+la misma idea que el `splitter` (el handler de drag se reusa durante
+todo el arrastre, así que un offset absoluto capturado se quedaría
+viejo; el delta-por-evento siempre es correcto).
+```ignore
+// view:
+scroll_y(
+    model.offset,
+    model.rows.len() as f32 * ROW_H,
+    panel_h,
+    lista_view,
+    Msg::ScrollBy,            // Fn(f32) -> Msg, arg = delta px
+    &ScrollPalette::default(),
+)
+// update:
+Msg::ScrollBy(d) => {
+    m.offset = clamp_offset(m.offset + d, content_len, viewport_len);
+}
+```
+Para llevar una selección a la vista (teclado), ver `ensure_visible`;
+para scroll suave/inercia, ver `approach`.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/scroll/README.md b/widgets/scroll/README.md
new file mode 100644
index 0000000..8328e16
--- /dev/null
+++ b/widgets/scroll/README.md
@@ -0,0 +1,51 @@
+# llimphi-widget-scroll
+
+Reusable vertical scroll area.
+
+Until now every app rebuilt scrolling by hand: `App::on_wheel` + an offset in the
+`Model` + `clip` + virtualization. This widget packages that pattern into a single
+builder, **with no state of its own** (the offset still lives in the `Model`,
+true to the Elm loop):
+
+- a **clipped viewport** of fixed height (`viewport_len`),
+- **content displaced** by `-offset` px (overflow clipped),
+- a **draggable scrollbar** on the right (only when the content exceeds the
+  viewport),
+- a **self-contained wheel** through `View::on_scroll`: turning the wheel with
+  the cursor over the area emits a `Msg` without the app routing anything through
+  its global `on_wheel`.
+
+The caller must know the content's **total height** (`content_len`) and the
+**visible height** (`viewport_len`) — just as `list`/`grid` already ask for the
+visible window. For uniform rows that is `n_rows * row_height`.
+
+## The `on_scroll` callback convention
+
+`on_scroll` receives the **delta in px** to add to the offset (not the absolute
+offset): both the wheel and the scrollbar drag emit deltas, and the caller
+accumulates and clamps in its `update` with `clamp_offset`. It is the same idea
+as the `splitter` (the drag handler is reused for the whole drag, so a captured
+absolute offset would go stale; a delta per event is always correct).
+
+```ignore
+// view:
+scroll_y(
+    model.offset,
+    model.rows.len() as f32 * ROW_H,
+    panel_h,
+    list_view,
+    Msg::ScrollBy,            // Fn(f32) -> Msg, arg = delta px
+    &ScrollPalette::default(),
+)
+// update:
+Msg::ScrollBy(d) => {
+    m.offset = clamp_offset(m.offset + d, content_len, viewport_len);
+}
+```
+
+To bring a selection into view (keyboard) see `ensure_visible`; for smooth or
+inertial scrolling see `approach`.
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/scroll/examples/scroll_avanzado.rs b/widgets/scroll/examples/scroll_avanzado.rs
index 489b848..b25ad72 100644
--- a/widgets/scroll/examples/scroll_avanzado.rs
+++ b/widgets/scroll/examples/scroll_avanzado.rs
@@ -3,7 +3,7 @@
 //! maneja el colapso del header y el scroll del cuerpo; los botones "Fling"
 //! sueltan una velocidad que decae con [`fling_step`] vía un ticker periódico.
 //!
-//! Corré con:
+//! Corre con:
 //! ```text
 //! cargo run -p llimphi-widget-scroll --example scroll_avanzado --release
 //! ```
@@ -74,7 +74,7 @@ impl App for Demo {
             Msg::ScrollBy(d) => {
                 model.velocity = 0.0; // un scroll manual corta la inercia
                 model.offset = clamp_offset(model.offset + d, max_off() + VIEWPORT, VIEWPORT);
-                // (clamp_offset usa content/viewport; acá el "content" efectivo
+                // (clamp_offset usa content/viewport; aquí el "content" efectivo
                 // es max_off + viewport, así max_offset(...) == max_off.)
             }
             Msg::Fling(v) => model.velocity = v,
diff --git a/widgets/scroll/src/lib.rs b/widgets/scroll/src/lib.rs
index 4a323de..903368a 100644
--- a/widgets/scroll/src/lib.rs
+++ b/widgets/scroll/src/lib.rs
@@ -142,7 +142,7 @@ pub fn ensure_visible(offset: f32, viewport_len: f32, item_top: f32, item_h: f32
         // El item arranca por encima del viewport: subí hasta su tope.
         item_top.max(0.0)
     } else if item_top + item_h > offset + viewport_len {
-        // El item termina por debajo: bajá hasta que su fondo toque el borde.
+        // El item termina por debajo: baja hasta que su fondo toque el borde.
         (item_top + item_h - viewport_len).max(0.0)
     } else {
         offset
@@ -229,9 +229,9 @@ pub const THUMB_FADE_SECS: f32 = 0.4;
 /// [`THUMB_HOLD_SECS`], luego baja linealmente a `0.0` en [`THUMB_FADE_SECS`].
 ///
 /// El bucle Elm reconstruye el `View` sin estado retenido, así que el timer lo
-/// lleva la app (igual que el fling): trackeá `last_scroll: Instant` en el
+/// lleva la app (igual que el fling): trackea `last_scroll: Instant` en el
 /// Model, reseteándolo en cada `on_scroll`, y antes de llamar a
-/// `scroll_y`/`scroll_xy` hacé `palette.thumb_idle_alpha =
+/// `scroll_y`/`scroll_xy` haz `palette.thumb_idle_alpha =
 /// thumb_autohide_alpha(last_scroll.elapsed().as_secs_f32())`. Mientras
 /// [`thumb_autohide_active`] sea `true`, pedí frames (`Handle::spawn_periodic`).
 /// En reposo el thumb queda invisible pero su `hover_fill` lo revela al pasar
@@ -315,6 +315,22 @@ pub fn sliver_max_offset(
 /// llegar la próxima sección, ésta lo **empuja** hacia arriba (no pasa de
 /// `section_bottom - header_h`). Antes de que la sección llegue al tope, sigue
 /// su posición natural. El caller posiciona el encabezado absoluto en esta `y`.
+/// Cuánto de un `delta` (px, `+` = hacia abajo) puede **consumir** un área con
+/// `offset` actual y `max_off`: el tramo que le queda hasta el tope en esa
+/// dirección. Devuelve `(consumido, sobrante)`, ambos con el signo del delta.
+/// Base del reparto parcial del scroll anidado (`View::on_scroll_take`): el
+/// sobrante sigue al ancestro scrollable en el mismo evento.
+pub fn scroll_take(delta: f32, offset: f32, max_off: f32) -> (f32, f32) {
+    let can = if delta > 0.0 {
+        delta.min((max_off - offset).max(0.0))
+    } else if delta < 0.0 {
+        delta.max(-offset.max(0.0))
+    } else {
+        0.0
+    };
+    (can, delta - can)
+}
+
 pub fn sticky_y(offset: f32, section_top: f32, section_h: f32, header_h: f32) -> f32 {
     let natural = section_top - offset; // y del encabezado sin sticky
     let section_bottom = section_top + section_h - offset;
@@ -342,6 +358,22 @@ pub fn thumb_geometry(offset: f32, content_len: f32, viewport_len: f32) -> (f32,
     (thumb_h, thumb_y, offset_per_px)
 }
 
+/// Delta de offset para un **click en el canal** de la barra (page-jump, como
+/// un scrollbar de escritorio): si el click cae **antes** del thumb, sube una
+/// página (`-viewport·0.9`); si cae **después**, baja una. `0` si cae sobre el
+/// thumb (ese click lo maneja el drag). Pura y testeable; el caller la suma al
+/// offset con [`clamp_offset`].
+pub fn track_page_jump(click_y: f32, thumb_y: f32, thumb_h: f32, viewport_len: f32) -> f32 {
+    let page = viewport_len * 0.9;
+    if click_y < thumb_y {
+        -page
+    } else if click_y > thumb_y + thumb_h {
+        page
+    } else {
+        0.0
+    }
+}
+
 /// Área de scroll vertical. `offset` es el desplazamiento actual (px, ya
 /// clampeado por el caller). `content_len`/`viewport_len` el alto total y
 /// visible. `content` se desplaza `-offset` y se recorta al viewport.
@@ -371,8 +403,8 @@ where
         position: Position::Absolute,
         inset: Rect {
             top: length(-offset),
-            left: length(0.0),
-            right: length(0.0),
+            left: length(0.0_f32),
+            right: length(0.0_f32),
             bottom: auto(),
         },
         ..Default::default()
@@ -391,7 +423,7 @@ where
             position: Position::Absolute,
             inset: Rect {
                 top: length(thumb_y),
-                right: length(0.0),
+                right: length(0.0_f32),
                 left: auto(),
                 bottom: auto(),
             },
@@ -411,12 +443,14 @@ where
             DragPhase::End => None,
         });
 
+        // Click en el canal (fuera del thumb) = salto de página hacia el click.
+        let on_track = on_scroll.clone();
         let track = View::new(Style {
             position: Position::Absolute,
             inset: Rect {
-                top: length(0.0),
-                right: length(0.0),
-                bottom: length(0.0),
+                top: length(0.0_f32),
+                right: length(0.0_f32),
+                bottom: length(0.0_f32),
                 left: auto(),
             },
             size: Size {
@@ -426,6 +460,14 @@ where
             ..Default::default()
         })
         .fill(palette.track)
+        .on_click_at(move |_lx, ly, _w, _h| {
+            let delta = track_page_jump(ly, thumb_y, thumb_h, viewport_len);
+            if delta != 0.0 {
+                Some((on_track)(delta))
+            } else {
+                None
+            }
+        })
         .children(vec![thumb]);
 
         children.push(track);
@@ -442,23 +484,22 @@ where
     let line_px = palette.line_px;
     let on_wheel = on_scroll;
     let max_off = max_offset(content_len, viewport_len);
-    let at_top = offset <= 0.0;
-    let at_bottom = offset >= max_off;
     View::new(Style {
         position: Position::Relative,
         size: Size {
-            width: percent(1.0),
+            width: percent(1.0_f32),
             height: length(viewport_len),
         },
         ..Default::default()
     })
     .clip(true)
-    .on_scroll(move |_dx, dy| {
-        let delta = dy * line_px;
-        if (delta < 0.0 && at_top) || (delta > 0.0 && at_bottom) {
-            return None;
-        }
-        Some((on_wheel)(delta))
+    // Reparto parcial: consume hasta el tope y devuelve el sobrante (en
+    // líneas) para que siga al ancestro scrollable en el mismo evento. El
+    // eje x pasa entero (esta área es vertical).
+    .on_scroll_take(move |dx, dy| {
+        let (can, rest) = scroll_take(dy * line_px, offset, max_off);
+        let msg = (can.abs() > f32::EPSILON).then(|| (on_wheel)(can));
+        (msg, dx, rest / line_px)
     })
     .children(children)
 }
@@ -466,7 +507,7 @@ where
 /// Área de scroll **2D** (horizontal + vertical). Generaliza [`scroll_y`] a dos
 /// ejes: el contenido toma su tamaño natural y se desplaza `(-x, -y)`, recortado
 /// al viewport; aparece una barra por eje que tenga overflow (ninguna, una o
-/// las dos). Para scroll puramente horizontal, pasá `content_size.1 ==
+/// las dos). Para scroll puramente horizontal, pasa `content_size.1 ==
 /// viewport_size.1` (no sale barra vertical).
 ///
 /// `on_scroll(dx, dy)` recibe el **delta en px por eje** a sumar a cada offset
@@ -513,7 +554,7 @@ where
         let f = on_scroll.clone();
         let thumb = View::new(Style {
             position: Position::Absolute,
-            inset: Rect { top: length(thumb_y), right: length(0.0), left: auto(), bottom: auto() },
+            inset: Rect { top: length(thumb_y), right: length(0.0_f32), left: auto(), bottom: auto() },
             size: Size { width: length(palette.bar_width), height: length(thumb_h) },
             ..Default::default()
         })
@@ -526,7 +567,7 @@ where
         });
         let track = View::new(Style {
             position: Position::Absolute,
-            inset: Rect { top: length(0.0), right: length(0.0), bottom: length(0.0), left: auto() },
+            inset: Rect { top: length(0.0_f32), right: length(0.0_f32), bottom: length(0.0_f32), left: auto() },
             size: Size { width: length(palette.bar_width), height: auto() },
             ..Default::default()
         })
@@ -541,7 +582,7 @@ where
         let f = on_scroll.clone();
         let thumb = View::new(Style {
             position: Position::Absolute,
-            inset: Rect { left: length(thumb_x), bottom: length(0.0), top: auto(), right: auto() },
+            inset: Rect { left: length(thumb_x), bottom: length(0.0_f32), top: auto(), right: auto() },
             size: Size { width: length(thumb_w), height: length(palette.bar_width) },
             ..Default::default()
         })
@@ -554,7 +595,7 @@ where
         });
         let track = View::new(Style {
             position: Position::Absolute,
-            inset: Rect { left: length(0.0), right: length(0.0), bottom: length(0.0), top: auto() },
+            inset: Rect { left: length(0.0_f32), right: length(0.0_f32), bottom: length(0.0_f32), top: auto() },
             size: Size { width: auto(), height: length(palette.bar_width) },
             ..Default::default()
         })
@@ -571,10 +612,6 @@ where
     let on_wheel = on_scroll;
     let max_ox = max_offset(cw, vw);
     let max_oy = max_offset(ch, vh);
-    let at_left = ox <= 0.0;
-    let at_right = ox >= max_ox;
-    let at_top = oy <= 0.0;
-    let at_bottom = oy >= max_oy;
     View::new(Style {
         position: Position::Relative,
         size: Size { width: length(vw), height: length(vh) },
@@ -583,19 +620,14 @@ where
     .clip(true)
     // Rueda: dy = eje vertical; dx = eje horizontal (ratones/touchpads 2D, o
     // Shift+rueda en algunos backends). Ambos en px-línea.
-    .on_scroll(move |dx, dy| {
-        let ddx = dx * line_px;
-        let ddy = dy * line_px;
-        let x_blocked = (ddx < 0.0 && at_left)
-            || (ddx > 0.0 && at_right)
-            || ddx == 0.0;
-        let y_blocked = (ddy < 0.0 && at_top)
-            || (ddy > 0.0 && at_bottom)
-            || ddy == 0.0;
-        if x_blocked && y_blocked {
-            return None;
-        }
-        Some((on_wheel)(ddx, ddy))
+    .on_scroll_take(move |dx, dy| {
+        // Reparto parcial por eje: cada uno consume hasta su tope y el
+        // sobrante (en líneas) sigue al ancestro en el mismo evento.
+        let (cx, rx) = scroll_take(dx * line_px, ox, max_ox);
+        let (cy, ry) = scroll_take(dy * line_px, oy, max_oy);
+        let msg = (cx.abs() > f32::EPSILON || cy.abs() > f32::EPSILON)
+            .then(|| (on_wheel)(cx, cy));
+        (msg, rx / line_px, ry / line_px)
     })
     .children(children)
 }
@@ -710,7 +742,7 @@ where
     // Header pinned (altura `h`), recortado, con rueda propia.
     let s_head = on_scroll.clone();
     let header_box = View::new(Style {
-        size: Size { width: percent(1.0), height: length(h) },
+        size: Size { width: percent(1.0_f32), height: length(h) },
         ..Default::default()
     })
     .clip(true)
@@ -731,7 +763,7 @@ where
     View::new(Style {
         flex_direction:
             llimphi_ui::llimphi_layout::taffy::prelude::FlexDirection::Column,
-        size: Size { width: percent(1.0), height: length(viewport_len) },
+        size: Size { width: percent(1.0_f32), height: length(viewport_len) },
         ..Default::default()
     })
     .clip(true)
@@ -742,6 +774,37 @@ where
 mod tests {
     use super::*;
 
+    #[test]
+    fn scroll_take_consume_hasta_el_tope_y_devuelve_el_resto() {
+        // offset 70 de max 100: bajando 50 consume 30 y sobran 20.
+        assert_eq!(scroll_take(50.0, 70.0, 100.0), (30.0, 20.0));
+        // Subiendo 50 con offset 20: consume -20 y sobran -30.
+        assert_eq!(scroll_take(-50.0, 20.0, 100.0), (-20.0, -30.0));
+        // Lejos de los topes: consume todo, resto 0.
+        assert_eq!(scroll_take(10.0, 50.0, 100.0), (10.0, 0.0));
+        assert_eq!(scroll_take(-10.0, 50.0, 100.0), (-10.0, 0.0));
+        // Topado exacto: no consume nada.
+        assert_eq!(scroll_take(10.0, 100.0, 100.0), (0.0, 10.0));
+        assert_eq!(scroll_take(-10.0, 0.0, 100.0), (0.0, -10.0));
+        // Overscrolleado (rubber-band, offset fuera de rango): no consume —
+        // se comporta como topado, igual que el gate at_top/at_bottom viejo.
+        assert_eq!(scroll_take(-5.0, -20.0, 100.0), (0.0, -5.0));
+        assert_eq!(scroll_take(5.0, 120.0, 100.0), (0.0, 5.0));
+        // Delta cero.
+        assert_eq!(scroll_take(0.0, 50.0, 100.0), (0.0, 0.0));
+    }
+
+    #[test]
+    fn track_page_jump_sube_baja_o_ignora_sobre_el_thumb() {
+        // thumb en y=100, alto 50 → ocupa [100,150]; viewport 400 → página 360.
+        // Click arriba del thumb → sube una página.
+        assert_eq!(track_page_jump(40.0, 100.0, 50.0, 400.0), -360.0);
+        // Click debajo del thumb → baja una página.
+        assert_eq!(track_page_jump(300.0, 100.0, 50.0, 400.0), 360.0);
+        // Click sobre el thumb → sin salto (lo maneja el drag).
+        assert_eq!(track_page_jump(120.0, 100.0, 50.0, 400.0), 0.0);
+    }
+
     #[test]
     fn thumb_autohide_hold_fade_y_oculto() {
         // Pleno durante el hold.
diff --git a/widgets/segmented/Cargo.toml b/widgets/segmented/Cargo.toml
index f380585..86f717c 100644
--- a/widgets/segmented/Cargo.toml
+++ b/widgets/segmented/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-segmented — control de opciones mutuamente exclusivas (radio horizontal). Para 2-5 opciones en línea."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/segmented/LEEME.md b/widgets/segmented/LEEME.md
new file mode 100644
index 0000000..f9ea797
--- /dev/null
+++ b/widgets/segmented/LEEME.md
@@ -0,0 +1,16 @@
+# llimphi-widget-segmented
+
+*Read this in English: [README.md](README.md).*
+
+Control de opciones mutuamente exclusivas.
+
+N opciones horizontales con UNA activa. Patrón iOS/macOS para
+alternativas radio-style cuando son pocas (2-5) y caben en línea.
+Si son más, usar un `tabs` o un dropdown.
+
+Render-only: la app guarda `selected: usize` en el modelo y
+dispatcha `Msg::SelectSegment(usize)` al click.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/segmented/README.md b/widgets/segmented/README.md
new file mode 100644
index 0000000..20dcecb
--- /dev/null
+++ b/widgets/segmented/README.md
@@ -0,0 +1,14 @@
+# llimphi-widget-segmented
+
+Mutually exclusive option control.
+
+N horizontal options with ONE active. The iOS/macOS pattern for radio-style
+alternatives when there are few (2–5) and they fit on a line. If there are more,
+use `tabs` or a dropdown.
+
+Render-only: the app keeps `selected: usize` in the model and dispatches
+`Msg::SelectSegment(usize)` on click.
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/segmented/src/lib.rs b/widgets/segmented/src/lib.rs
index 181c6ac..2a2830c 100644
--- a/widgets/segmented/src/lib.rs
+++ b/widgets/segmented/src/lib.rs
@@ -25,7 +25,12 @@ pub struct SegmentedPalette {
     pub bg_active: Color,
     pub fg_active: Color,
     pub fg_inactive: Color,
-    pub fg_hover: Color,
+    /// Relleno de hover sobre un segmento **inactivo**. Antes existía un
+    /// `fg_hover` (color de texto en hover) que NINGÚN código aplicaba —
+    /// un campo muerto que anunciaba un hover inexistente. `View` sólo
+    /// puede cambiar el fondo en hover (`hover_fill`), no el color de
+    /// texto, así que el hover real es de fondo.
+    pub bg_hover: Color,
 }
 
 impl SegmentedPalette {
@@ -35,11 +40,127 @@ impl SegmentedPalette {
             bg_active: t.bg_panel,
             fg_active: t.fg_text,
             fg_inactive: t.fg_muted,
-            fg_hover: t.fg_text,
+            bg_hover: t.bg_row_hover,
         }
     }
 }
 
+/// Posición del indicador deslizante como fracciones del ancho del track:
+/// `(left, width)` en `[0,1]`, con `width = 1/n` y `left = t/n` clampeado para
+/// no salirse. `t` es la posición **animada** (0..n-1) que el host tween-ea
+/// hacia el `selected`. Pura y testeable; casa exacto con segmentos de igual
+/// ancho y gap 0.
+pub fn indicator_bounds(t: f32, n: usize) -> (f32, f32) {
+    if n == 0 {
+        return (0.0, 1.0);
+    }
+    let nf = n as f32;
+    let width = 1.0 / nf;
+    let left = (t / nf).clamp(0.0, 1.0 - width);
+    (left, width)
+}
+
+/// Variante con **indicador deslizante animado**: en vez de pintar el fondo del
+/// segmento activo, un único realce flota y se desliza a la posición `indicator_t`
+/// (que el host anima con `llimphi-motion` hacia `selected`). Segmentos de igual
+/// ancho, gap 0 → el realce cae exacto sobre cada uno. `selected` sólo decide el
+/// color del texto. El resto (teclado con [`step_segment`], a11y) igual que
+/// [`segmented_view`].
+pub fn segmented_view_sliding<Msg, F>(
+    labels: &[&str],
+    selected: usize,
+    indicator_t: f32,
+    make_msg: F,
+    palette: &SegmentedPalette,
+) -> View<Msg>
+where
+    Msg: Clone + 'static,
+    F: Fn(usize) -> Msg,
+{
+    let n = labels.len();
+    let (left_frac, width_frac) = indicator_bounds(indicator_t, n);
+
+    // Realce flotante: nodo absoluto posicionado por porcentaje del track.
+    let seg_radius = radius::XS;
+    let indicator = View::new(Style {
+        position: llimphi_ui::llimphi_layout::taffy::prelude::Position::Absolute,
+        inset: Rect {
+            left: percent(left_frac),
+            top: length(0.0_f32),
+            right: llimphi_ui::llimphi_layout::taffy::prelude::auto(),
+            bottom: length(0.0_f32),
+        },
+        size: Size { width: percent(width_frac), height: percent(1.0_f32) },
+        ..Default::default()
+    })
+    .fill(palette.bg_active)
+    .radius(seg_radius)
+    .paint_with(move |scene, _ts, rect| {
+        // Mismo gloss superior que el segmento activo estático.
+        use llimphi_ui::llimphi_raster::kurbo::{Affine, Point, RoundedRect};
+        use llimphi_ui::llimphi_raster::peniko::{Fill, Gradient};
+        if rect.w <= 0.0 || rect.h <= 0.0 {
+            return;
+        }
+        let (x0, y0) = (rect.x as f64, rect.y as f64);
+        let (x1, y1) = ((rect.x + rect.w) as f64, (rect.y + rect.h) as f64);
+        let rr = RoundedRect::new(x0, y0, x1, y1, seg_radius);
+        let g = Gradient::new_linear(Point::new(x0, y0), Point::new(x0, y0 + (y1 - y0) * 0.5))
+            .with_stops([Color::from_rgba8(255, 255, 255, 28), Color::from_rgba8(255, 255, 255, 0)].as_slice());
+        scene.fill(Fill::NonZero, Affine::IDENTITY, &g, None, &rr);
+    });
+
+    // Segmentos: sólo texto (el realce lo da el indicador) + hover en inactivos.
+    let seg_nodes: Vec<View<Msg>> = labels
+        .iter()
+        .enumerate()
+        .map(|(i, label)| {
+            let is_active = i == selected;
+            let fg = if is_active { palette.fg_active } else { palette.fg_inactive };
+            let mut node = View::new(Style {
+                size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+                flex_grow: 1.0,
+                align_items: Some(AlignItems::Center),
+                justify_content: Some(JustifyContent::Center),
+                ..Default::default()
+            })
+            .radius(seg_radius)
+            .text_aligned(label.to_string(), 11.5, fg, Alignment::Center)
+            .role(llimphi_ui::Role::Tab)
+            .aria_label(label.to_string())
+            .aria_pressed(is_active)
+            .on_click(make_msg(i));
+            if !is_active {
+                node = node.hover_fill(palette.bg_hover);
+            }
+            node
+        })
+        .collect();
+
+    let seg_row = View::new(Style {
+        position: llimphi_ui::llimphi_layout::taffy::prelude::Position::Relative,
+        flex_direction: FlexDirection::Row,
+        size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+        ..Default::default()
+    })
+    .children(seg_nodes);
+
+    View::new(Style {
+        position: llimphi_ui::llimphi_layout::taffy::prelude::Position::Relative,
+        size: Size { width: percent(1.0_f32), height: length(28.0_f32) },
+        padding: Rect {
+            left: length(2.0_f32),
+            right: length(2.0_f32),
+            top: length(2.0_f32),
+            bottom: length(2.0_f32),
+        },
+        ..Default::default()
+    })
+    .fill(palette.bg_track)
+    .radius(radius::SM)
+    .children(vec![indicator, seg_row])
+}
+
 /// Construye el control. `labels` son los textos visibles; `selected`
 /// es el índice activo (0-based). `make_msg(i)` se llama al click.
 pub fn segmented_view<Msg, F>(
@@ -120,6 +241,12 @@ fn segment_view<Msg: Clone + 'static>(
     .aria_pressed(is_active)
     .on_click(msg);
 
+    if !is_active {
+        // Hover real sobre segmentos inactivos (feedback que el viejo
+        // `fg_hover` prometía y no daba).
+        node = node.hover_fill(palette.bg_hover);
+    }
+
     if let Some(c) = bg {
         node = node.fill(c).paint_with(move |scene, _ts, rect| {
             // Gloss superior sólo en el segmento activo — refuerza
@@ -146,3 +273,59 @@ fn segment_view<Msg: Clone + 'static>(
     }
     node
 }
+
+/// Mueve la selección con teclado (←/→): dado el índice activo, la
+/// dirección (`+1`/`-1`) y el total, devuelve el siguiente índice
+/// **envolviendo** en los extremos (rol `Tab` implica navegación por
+/// flechas). El host lo cablea en `update` mapeando ←/→ a esto y
+/// dispatchando su `Msg::SelectSegment(nuevo)`.
+pub fn step_segment(len: usize, current: usize, direction: i32) -> usize {
+    if len == 0 {
+        return 0;
+    }
+    let n = len as i32;
+    let mut i = current as i32 + direction;
+    if i < 0 {
+        i = n - 1;
+    } else if i >= n {
+        i = 0;
+    }
+    i as usize
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn step_segment_avanza_y_envuelve() {
+        assert_eq!(step_segment(3, 0, 1), 1);
+        assert_eq!(step_segment(3, 2, 1), 0); // envuelve al inicio
+        assert_eq!(step_segment(3, 0, -1), 2); // envuelve al final
+        assert_eq!(step_segment(3, 1, -1), 0);
+    }
+
+    #[test]
+    fn step_segment_lista_vacia_es_cero() {
+        assert_eq!(step_segment(0, 0, 1), 0);
+    }
+
+    #[test]
+    fn indicator_bounds_cae_sobre_cada_segmento() {
+        // n=3: ancho 1/3; left = t/3.
+        let (l0, w) = indicator_bounds(0.0, 3);
+        assert!((w - 1.0 / 3.0).abs() < 1e-4 && l0.abs() < 1e-4);
+        let (l1, _) = indicator_bounds(1.0, 3);
+        assert!((l1 - 1.0 / 3.0).abs() < 1e-4);
+        let (l2, _) = indicator_bounds(2.0, 3);
+        assert!((l2 - 2.0 / 3.0).abs() < 1e-4);
+        // A mitad de camino entre 0 y 1 → left intermedio.
+        let (lh, _) = indicator_bounds(0.5, 3);
+        assert!(lh > 0.0 && lh < 1.0 / 3.0);
+        // Clamp: no se sale por la derecha.
+        let (lc, wc) = indicator_bounds(5.0, 3);
+        assert!((lc + wc - 1.0).abs() < 1e-4, "el borde derecho no pasa de 1");
+        // n=0 defensivo.
+        assert_eq!(indicator_bounds(0.0, 0), (0.0, 1.0));
+    }
+}
diff --git a/widgets/select/Cargo.toml b/widgets/select/Cargo.toml
index a24b033..dfc0ba8 100644
--- a/widgets/select/Cargo.toml
+++ b/widgets/select/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-select — control select/dropdown moderno para Llimphi: disparador cerrado + menú flotante (view_overlay) con búsqueda, ítems ricos (icono · sublabel · badge), selección múltiple y estados de carga asíncrona (Cargando / Error+reintento / vacío)."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/select/LEEME.md b/widgets/select/LEEME.md
new file mode 100644
index 0000000..7b99657
--- /dev/null
+++ b/widgets/select/LEEME.md
@@ -0,0 +1,53 @@
+# llimphi-widget-select
+
+*Read this in English: [README.md](README.md).*
+
+Control *select* / dropdown moderno.
+
+Modelado como un **gradiente de complejidad**: la misma pieza sirve
+desde el select más tonto hasta uno con carga asíncrona y badges, sin
+cambiar de widget — sólo se van encendiendo capas.
+```text
+  ┌──────────────────────────────┐
+  │ ◷  Pendiente            ●  ▾ │   ← disparador (cerrado)
+  └──────────────────────────────┘
+       │ click → view_overlay
+       ▼
+  ┃ ⌕ Buscar…                     ← caja de búsqueda (capa 2)
+  ┃ ✓ ◷  Pendiente        12      ← ítem rico: check · icono · label · badge (capa 3)
+  ┃   ◔  En curso          3
+  ┃   ◉  Hecho             ·       ← badge dot
+  ┃ ─────────────────────
+  ┃ ⟳  Cargando…                  ← estado async (capa 4): Loading / Error+reintento / vacío
+```
+## Las cuatro capas
+
+1. **Select simple.** `SelectItem::new` + `select_trigger_view` (el
+   botón cerrado que muestra lo elegido) + `select_menu_view` con
+   `SelectPhase::Ready` montado en `App::view_overlay`. `on_pick(idx)`
+   devuelve el índice **original** del ítem elegido; la app lo guarda y
+   cierra el menú. Eso es todo.
+2. **Buscable (combobox).** Pon `searchable: true`. La caja de arriba
+   pinta `query`; el tecleo lo rutea la app por `on_key` a un
+   `TextInputState` y re-filtra con `filter`. `step_active` mueve el
+   resaltado con ↑/↓ saltando deshabilitados; `resolve` traduce la
+   posición resaltada al índice original para Enter.
+3. **Ítems ricos + badges.** Cada `SelectItem` lleva `icon`, `sublabel`
+   y un `SelectBadge` (conteo `12`, chip de texto `beta`, o dot de
+   estado) — reusa `llimphi-widget-badge`. La selección múltiple sale
+   sola: pasa varios índices en `selected` y el menú pinta el check ✓ en
+   cada uno (la semántica toggle/cerrar la decide la app).
+4. **Carga asíncrona.** El menú no exige tener los datos: `SelectPhase`
+   distingue `Loading` (fila "Cargando…"), `Error` (mensaje + acción
+   `on_retry`) y `Ready`. El patrón: la app abre el menú, lanza
+   `Handle::spawn`, pinta `Loading`, y al volver el worker cambia a
+   `Ready`. Una *generación* (`u64`) descarta respuestas viejas si el
+   usuario reabrió/retecleó — ver el ejemplo `select_demo`.
+
+El look es el de `context-menu`: panel redondeado con borde hairline,
+filas como píldoras con hover suave, indicador accent en la fila activa,
+scrim full-screen que dismissa al click-fuera.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/select/README.md b/widgets/select/README.md
new file mode 100644
index 0000000..e5474bf
--- /dev/null
+++ b/widgets/select/README.md
@@ -0,0 +1,52 @@
+# llimphi-widget-select
+
+Modern *select* / dropdown control.
+
+Modelled as a **gradient of complexity**: the same piece serves everything from
+the dumbest select to one with async loading and badges, without changing widget
+— you just switch layers on.
+
+```text
+  ┌──────────────────────────────┐
+  │ ◷  Pending              ●  ▾ │   ← trigger (closed)
+  └──────────────────────────────┘
+       │ click → view_overlay
+       ▼
+  ┃ ⌕ Search…                     ← search box (layer 2)
+  ┃ ✓ ◷  Pending          12      ← rich item: check · icon · label · badge (layer 3)
+  ┃   ◔  In progress       3
+  ┃   ◉  Done              ·       ← dot badge
+  ┃ ─────────────────────
+  ┃ ⟳  Loading…                   ← async state (layer 4): Loading / Error+retry / empty
+```
+
+## The four layers
+
+1. **Simple select.** `SelectItem::new` + `select_trigger_view` (the closed
+   button showing the choice) + `select_menu_view` with `SelectPhase::Ready`
+   mounted in `App::view_overlay`. `on_pick(idx)` returns the **original** index
+   of the chosen item; the app stores it and closes the menu. That is all.
+2. **Searchable (combobox).** Set `searchable: true`. The box on top paints
+   `query`; the app routes typing through `on_key` into a `TextInputState` and
+   re-filters with `filter`. `step_active` moves the highlight with ↑/↓ skipping
+   disabled entries; `resolve` translates the highlighted position back to the
+   original index for Enter.
+3. **Rich items + badges.** Every `SelectItem` carries `icon`, `sublabel` and a
+   `SelectBadge` (a `12` count, a `beta` text chip, or a status dot) — reusing
+   `llimphi-widget-badge`. Multiple selection falls out for free: pass several
+   indices in `selected` and the menu paints a ✓ on each (the toggle/close
+   semantics are the app's call).
+4. **Async loading.** The menu does not require having the data: `SelectPhase`
+   distinguishes `Loading` (a "Loading…" row), `Error` (message + an `on_retry`
+   action) and `Ready`. The pattern: the app opens the menu, fires
+   `Handle::spawn`, paints `Loading`, and switches to `Ready` when the worker
+   returns. A *generation* (`u64`) discards stale answers if the user reopened or
+   retyped — see the `select_demo` example.
+
+The look is that of `context-menu`: a rounded panel with a hairline border, rows
+as pills with a soft hover, an accent indicator on the active row, and a
+full-screen scrim that dismisses on click-outside.
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/select/examples/select_demo.rs b/widgets/select/examples/select_demo.rs
index 75b17a7..705b142 100644
--- a/widgets/select/examples/select_demo.rs
+++ b/widgets/select/examples/select_demo.rs
@@ -4,11 +4,11 @@
 //! 1. **Simple** — estado de una tarea, sin búsqueda.
 //! 2. **Buscable + badges** — asignar a una persona: icono, sublabel y
 //!    badge de conteo; teclear filtra, ↑/↓ navega, Enter elige.
-//! 3. **Async** — el primer load *falla* (mirá el error + Reintentar); el
+//! 3. **Async** — el primer load *falla* (mira el error + Reintentar); el
 //!    reintento trae los datos tras ~900 ms vía `Handle::spawn`, con guard
 //!    de generación para descartar respuestas viejas.
 //!
-//! Corré con:
+//! Corre con:
 //!   cargo run -p llimphi-widget-select --example select_demo --release
 
 use std::time::Duration;
@@ -266,7 +266,7 @@ impl App for Demo {
             SEL_ESTADO,
             select_trigger_view(
                 model.estado_sel.and_then(|i| model.estado_items.get(i)),
-                "Elegí un estado…",
+                "Elige un estado…",
                 model.open == Some(SEL_ESTADO),
                 Some(W),
                 &pal,
diff --git a/widgets/select/src/lib.rs b/widgets/select/src/lib.rs
index efd48ed..896151c 100644
--- a/widgets/select/src/lib.rs
+++ b/widgets/select/src/lib.rs
@@ -25,7 +25,7 @@
 //!    [`SelectPhase::Ready`] montado en [`App::view_overlay`]. `on_pick(idx)`
 //!    devuelve el índice **original** del ítem elegido; la app lo guarda y
 //!    cierra el menú. Eso es todo.
-//! 2. **Buscable (combobox).** Poné `searchable: true`. La caja de arriba
+//! 2. **Buscable (combobox).** Pon `searchable: true`. La caja de arriba
 //!    pinta `query`; el tecleo lo rutea la app por `on_key` a un
 //!    `TextInputState` y re-filtra con [`filter`]. [`step_active`] mueve el
 //!    resaltado con ↑/↓ saltando deshabilitados; [`resolve`] traduce la
@@ -33,7 +33,7 @@
 //! 3. **Ítems ricos + badges.** Cada [`SelectItem`] lleva `icon`, `sublabel`
 //!    y un [`SelectBadge`] (conteo `12`, chip de texto `beta`, o dot de
 //!    estado) — reusa `llimphi-widget-badge`. La selección múltiple sale
-//!    sola: pasá varios índices en `selected` y el menú pinta el check ✓ en
+//!    sola: pasa varios índices en `selected` y el menú pinta el check ✓ en
 //!    cada uno (la semántica toggle/cerrar la decide la app).
 //! 4. **Carga asíncrona.** El menú no exige tener los datos: [`SelectPhase`]
 //!    distingue `Loading` (fila "Cargando…"), `Error` (mensaje + acción
@@ -54,7 +54,7 @@ use llimphi_ui::llimphi_layout::taffy::{
     prelude::{auto, length, percent, FlexDirection, Position, Size, Style},
     AlignItems, JustifyContent, Rect,
 };
-use llimphi_ui::llimphi_raster::peniko::Color;
+use llimphi_ui::llimphi_raster::peniko::{Color, ImageBrush as Image};
 use llimphi_ui::llimphi_text::Alignment;
 use llimphi_ui::View;
 use llimphi_widget_badge::{count_badge_view, dot_badge_view};
@@ -159,7 +159,8 @@ impl SelectBadge {
 /// Chip de texto corto (no existe en `llimphi-widget-badge`, que sólo da
 /// count y dot). Mismo lenguaje visual: bg sólido semántico + texto claro.
 fn label_chip_view<Msg: Clone + 'static>(text: &str, kind: BadgeKind) -> View<Msg> {
-    let w = (text.chars().count() as f32 * 6.5 + 14.0).max(18.0);
+    // Ancho por glifos reales (no `chars*const` sobre fuente proporcional).
+    let w = (llimphi_ui::llimphi_text::text_width(text, 10.0) + 14.0).max(18.0);
     View::new(Style {
         size: Size { width: length(w), height: length(16.0_f32) },
         align_items: Some(AlignItems::Center),
@@ -183,6 +184,9 @@ pub struct SelectItem {
     pub label: String,
     pub sublabel: Option<String>,
     pub icon: Option<String>,
+    /// Imagen del gutter izquierdo (avatar, favicon, thumbnail…). Gana sobre el
+    /// glifo [`Self::icon`] si ambos están. Decodificada (peniko::Image).
+    pub image: Option<Image>,
     pub badge: Option<SelectBadge>,
     pub enabled: bool,
 }
@@ -193,6 +197,7 @@ impl SelectItem {
             label: label.into(),
             sublabel: None,
             icon: None,
+            image: None,
             badge: None,
             enabled: true,
         }
@@ -207,6 +212,11 @@ impl SelectItem {
         self.icon = Some(glyph.into());
         self
     }
+    /// Imagen del gutter izquierdo (avatar/thumbnail). Gana sobre el glifo.
+    pub fn with_image(mut self, image: Image) -> Self {
+        self.image = Some(image);
+        self
+    }
     pub fn badge(mut self, badge: SelectBadge) -> Self {
         self.badge = Some(badge);
         self
@@ -267,14 +277,22 @@ const APPEAR_SLIDE: f32 = 8.0;
 /// El botón cerrado del select. Muestra el ítem elegido (icono + label +
 /// badge) o el `placeholder` si no hay nada. El chevron ▾/▴ refleja `open`.
 /// Click emite `on_toggle` (la app alterna su flag de menú abierto).
-pub fn select_trigger_view<Msg: Clone + 'static>(
+pub fn select_trigger_view<Msg, F>(
     selected: Option<&SelectItem>,
     placeholder: &str,
     open: bool,
     width: Option<f32>,
     palette: &SelectPalette,
-    on_toggle: Msg,
-) -> View<Msg> {
+    on_toggle: F,
+) -> View<Msg>
+where
+    Msg: Clone + 'static,
+    // El disparador se cablea con `on_click_screen`: al abrir, el handler recibe
+    // el RECT ABSOLUTO del disparador `(x, y, w, h)` en coords de ventana, para
+    // anclar el menú a su borde inferior y copiar su ancho. Callers que no lo
+    // necesiten ignoran los args.
+    F: Fn(f32, f32, f32, f32) -> Msg + Send + Sync + 'static,
+{
     let size_width = match width {
         Some(w) => length(w),
         None => percent(1.0_f32),
@@ -283,17 +301,8 @@ pub fn select_trigger_view<Msg: Clone + 'static>(
     let mut row: Vec<View<Msg>> = Vec::with_capacity(4);
 
     if let Some(item) = selected {
-        if let Some(icon) = &item.icon {
-            row.push(
-                View::new(Style {
-                    size: Size { width: length(ICON_W), height: auto() },
-                    flex_shrink: 0.0,
-                    align_items: Some(AlignItems::Center),
-                    justify_content: Some(JustifyContent::Center),
-                    ..Default::default()
-                })
-                .text_aligned(icon.clone(), 13.0, palette.fg_muted, Alignment::Center),
-            );
+        if let Some(g) = gutter_view(item, palette.fg_muted) {
+            row.push(g);
         }
         row.push(
             View::new(Style {
@@ -341,6 +350,12 @@ pub fn select_trigger_view<Msg: Clone + 'static>(
         (palette.bg_trigger, palette.border)
     };
 
+    // a11y: el disparador es un combobox → lo anunciamos como botón con el
+    // valor elegido (o el placeholder) y su estado abierto/cerrado.
+    let aria = selected
+        .map(|it| it.label.clone())
+        .unwrap_or_else(|| placeholder.to_string());
+
     // Borde de 1px (rect padre coloreado) + relleno interno con la fila.
     View::new(Style {
         size: Size { width: size_width, height: length(TRIGGER_H + 2.0) },
@@ -354,7 +369,10 @@ pub fn select_trigger_view<Msg: Clone + 'static>(
     })
     .fill(border)
     .radius(7.0)
-    .on_click(on_toggle)
+    .role(llimphi_ui::Role::Button)
+    .aria_label(aria)
+    .aria_pressed(open)
+    .on_click_screen(move |x, y, w, h| Some(on_toggle(x, y, w, h)))
     .children(vec![View::new(Style {
         size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
         flex_direction: FlexDirection::Row,
@@ -700,6 +718,36 @@ fn error_row_view<Msg: Clone + 'static>(
     .children(children)
 }
 
+/// El gutter izquierdo de un ítem/disparador: la **imagen** si la hay (gana), si
+/// no el **glifo** con `glyph_color`, o nada. Compartido por el disparador y las
+/// filas del menú, para que imágenes y glifos se rindan idénticos en ambos.
+fn gutter_view<Msg: Clone + 'static>(item: &SelectItem, glyph_color: Color) -> Option<View<Msg>> {
+    if let Some(img) = &item.image {
+        return Some(
+            View::new(Style {
+                size: Size { width: length(ICON_W), height: length(ICON_W) },
+                flex_shrink: 0.0,
+                ..Default::default()
+            })
+            .radius(4.0)
+            .image(img.clone()),
+        );
+    }
+    if let Some(icon) = &item.icon {
+        return Some(
+            View::new(Style {
+                size: Size { width: length(ICON_W), height: auto() },
+                flex_shrink: 0.0,
+                align_items: Some(AlignItems::Center),
+                justify_content: Some(JustifyContent::Center),
+                ..Default::default()
+            })
+            .text_aligned(icon.clone(), 13.0, glyph_color, Alignment::Center),
+        );
+    }
+    None
+}
+
 /// Una fila de ítem. `is_active` = resaltado por teclado/hover; `is_checked`
 /// = está en `selected`.
 #[allow(clippy::too_many_arguments)]
@@ -760,17 +808,8 @@ fn item_row_view<Msg: Clone + 'static>(
 
     let mut row_children: Vec<View<Msg>> = vec![indicator, check];
 
-    if let Some(icon) = &item.icon {
-        row_children.push(
-            View::new(Style {
-                size: Size { width: length(ICON_W), height: auto() },
-                flex_shrink: 0.0,
-                align_items: Some(AlignItems::Center),
-                justify_content: Some(JustifyContent::Center),
-                ..Default::default()
-            })
-            .text_aligned(icon.clone(), 13.0, icon_fg, Alignment::Center),
-        );
+    if let Some(g) = gutter_view(item, icon_fg) {
+        row_children.push(g);
     }
 
     // Columna label + sublabel.
@@ -824,6 +863,12 @@ fn item_row_view<Msg: Clone + 'static>(
         row = row.fill(palette.bg_active);
     }
 
+    // a11y: cada fila es una opción; el lector anuncia label + si está elegida.
+    row = row
+        .role(llimphi_ui::Role::Button)
+        .aria_label(item.label.clone())
+        .aria_pressed(is_checked);
+
     if item.enabled {
         row = row.hover_fill(palette.bg_hover);
         let on_pick = on_pick.clone();
@@ -950,6 +995,56 @@ pub fn resolve(visible: &[usize], pos: usize) -> Option<usize> {
     visible.get(pos).copied()
 }
 
+/// Extremo habilitado para Home/End: la primera (`to_end = false`) o última
+/// (`true`) posición **habilitada** de `visible`. `usize::MAX` si no hay
+/// ninguna elegible. Mismo criterio que `context-menu::edge_active`.
+pub fn edge_active(items: &[SelectItem], visible: &[usize], to_end: bool) -> usize {
+    let n = visible.len();
+    if n == 0 {
+        return usize::MAX;
+    }
+    let iter: Box<dyn Iterator<Item = usize>> = if to_end {
+        Box::new((0..n).rev())
+    } else {
+        Box::new(0..n)
+    };
+    for pos in iter {
+        if let Some(item) = items.get(visible[pos]) {
+            if item.enabled {
+                return pos;
+            }
+        }
+    }
+    usize::MAX
+}
+
+/// Type-ahead: dada una tecla imprimible `ch`, salta a la siguiente posición
+/// **habilitada** de `visible` cuyo label empieza por esa letra (case-insensitive),
+/// **ciclando** desde la posición actual. Devuelve la nueva posición o
+/// `usize::MAX` si ninguna coincide. Permite navegar un `<select>` tipeando la
+/// inicial, sin caja de búsqueda. `current == usize::MAX` arranca desde el inicio.
+pub fn type_ahead(items: &[SelectItem], visible: &[usize], current: usize, ch: char) -> usize {
+    let n = visible.len();
+    if n == 0 {
+        return usize::MAX;
+    }
+    let target = ch.to_lowercase().next().unwrap_or(ch);
+    let start = if current == usize::MAX { 0 } else { (current + 1) % n };
+    for k in 0..n {
+        let pos = (start + k) % n;
+        if let Some(item) = items.get(visible[pos]) {
+            if !item.enabled {
+                continue;
+            }
+            let first = item.label.chars().next().and_then(|c| c.to_lowercase().next());
+            if first == Some(target) {
+                return pos;
+            }
+        }
+    }
+    usize::MAX
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;
@@ -1021,6 +1116,52 @@ mod tests {
         assert_eq!(resolve(&vis, 9), None);
     }
 
+    #[test]
+    fn edge_active_salta_bordes_deshabilitados() {
+        let it = items(); // pos 1 = "En curso" disabled
+        let vis = filter(&it, "");
+        assert_eq!(edge_active(&it, &vis, false), 0); // primero habilitado
+        assert_eq!(edge_active(&it, &vis, true), 3); // último habilitado
+        // Con el primero deshabilitado, Home cae en el 2º.
+        let it2 = vec![
+            SelectItem::new("uno").disabled(),
+            SelectItem::new("dos"),
+        ];
+        let vis2 = filter(&it2, "");
+        assert_eq!(edge_active(&it2, &vis2, false), 1);
+    }
+
+    #[test]
+    fn type_ahead_salta_por_inicial_y_cicla() {
+        let it = vec![
+            SelectItem::new("Argentina"),
+            SelectItem::new("Brasil"),
+            SelectItem::new("Bolivia"),
+            SelectItem::new("Chile"),
+        ];
+        let vis = filter(&it, "");
+        // Desde el inicio, 'b' → primer país con B (pos 1).
+        assert_eq!(type_ahead(&it, &vis, usize::MAX, 'b'), 1);
+        // Estando en 1, otra 'b' cicla al siguiente con B (pos 2).
+        assert_eq!(type_ahead(&it, &vis, 1, 'b'), 2);
+        // Desde 2, 'b' vuelve a 1 (ciclo).
+        assert_eq!(type_ahead(&it, &vis, 2, 'b'), 1);
+        // Mayúscula funciona igual (case-insensitive).
+        assert_eq!(type_ahead(&it, &vis, usize::MAX, 'C'), 3);
+        // Sin match → MAX.
+        assert_eq!(type_ahead(&it, &vis, usize::MAX, 'z'), usize::MAX);
+    }
+
+    #[test]
+    fn type_ahead_saltea_deshabilitados() {
+        let it = vec![
+            SelectItem::new("Beta").disabled(),
+            SelectItem::new("Bravo"),
+        ];
+        let vis = filter(&it, "");
+        assert_eq!(type_ahead(&it, &vis, usize::MAX, 'b'), 1); // salta el disabled
+    }
+
     #[test]
     fn badge_constructores() {
         let c = SelectBadge::count(12, BadgeKind::Info);
diff --git a/widgets/shortcuts-help/Cargo.toml b/widgets/shortcuts-help/Cargo.toml
index 38d5828..82dc671 100644
--- a/widgets/shortcuts-help/Cargo.toml
+++ b/widgets/shortcuts-help/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-shortcuts-help — overlay '?' que muestra los atajos de teclado del contexto actual, agrupados por categoría."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/shortcuts-help/LEEME.md b/widgets/shortcuts-help/LEEME.md
new file mode 100644
index 0000000..bf7820a
--- /dev/null
+++ b/widgets/shortcuts-help/LEEME.md
@@ -0,0 +1,17 @@
+# llimphi-widget-shortcuts-help
+
+*Read this in English: [README.md](README.md).*
+
+Overlay de atajos de teclado.
+
+Convención "press ? for help": cuando el usuario aprieta `?`,
+aparece un panel centrado con todos los atajos del contexto actual
+agrupados por categoría. Cualquier tecla cierra (la app maneja eso).
+
+La app construye un `ShortcutsHelpSpec` con grupos y entries, lo
+guarda en su modelo cuando se abre, y lo devuelve desde
+`view_overlay`.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/shortcuts-help/README.md b/widgets/shortcuts-help/README.md
new file mode 100644
index 0000000..9eec0fa
--- /dev/null
+++ b/widgets/shortcuts-help/README.md
@@ -0,0 +1,14 @@
+# llimphi-widget-shortcuts-help
+
+Keyboard shortcuts overlay.
+
+The "press ? for help" convention: when the user hits `?`, a centred panel
+appears with every shortcut of the current context grouped by category. Any key
+closes it (the app handles that).
+
+The app builds a `ShortcutsHelpSpec` with groups and entries, stores it in its
+model while open, and returns it from `view_overlay`.
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/skeleton/Cargo.toml b/widgets/skeleton/Cargo.toml
index afcf99d..4b13ff4 100644
--- a/widgets/skeleton/Cargo.toml
+++ b/widgets/skeleton/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-skeleton — bloque animado con shimmer para placeholders de contenido en carga. Alternativa a spinner cuando se conoce la forma del contenido (lista de N items, card con título+texto+imagen)."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/skeleton/LEEME.md b/widgets/skeleton/LEEME.md
new file mode 100644
index 0000000..1a96d7b
--- /dev/null
+++ b/widgets/skeleton/LEEME.md
@@ -0,0 +1,25 @@
+# llimphi-widget-skeleton
+
+*Read this in English: [README.md](README.md).*
+
+Placeholder de carga con shimmer.
+
+Cuando una pantalla está cargando contenido cuya forma es predecible
+(ej. una lista de 5 cards, un avatar+nombre+timestamp), un skeleton
+es más informativo que un spinner: el usuario ya ve QUÉ vendrá,
+sólo no tiene los valores reales todavía.
+
+El brillo (shimmer) viene de una **banda de gradiente que cruza** el
+rect de izquierda a derecha cíclicamente. Los stops son
+`[low, high, low]` sobre una franja del ~50% del ancho, con `Extend::Pad`
+por default — fuera de la banda el rect queda en `low`, dentro el
+`high` pinta el destello. Es el patrón canónico de Material/Apple/
+sistemas modernos, más legible que la oscilación uniforme previa.
+
+Como `spinner`, requiere que la app fuerce redraws periódicos para
+que la animación corra (típico: `Handle::spawn_periodic(50ms, …)`
+mientras hay skeletons visibles).
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/skeleton/README.md b/widgets/skeleton/README.md
new file mode 100644
index 0000000..2c4bbf5
--- /dev/null
+++ b/widgets/skeleton/README.md
@@ -0,0 +1,21 @@
+# llimphi-widget-skeleton
+
+Loading placeholder with a shimmer.
+
+When a screen is loading content whose shape is predictable (say a list of 5
+cards, or avatar + name + timestamp), a skeleton is more informative than a
+spinner: the user already sees WHAT is coming, they just don't have the real
+values yet.
+
+The shimmer comes from a **gradient band that crosses** the rect left to right
+cyclically. The stops are `[low, high, low]` over a band about 50% of the width,
+with `Extend::Pad` by default — outside the band the rect stays at `low`, inside
+it `high` paints the glint. It is the canonical Material/Apple pattern, more
+legible than the previous uniform oscillation.
+
+Like `spinner`, it needs the app to force periodic redraws for the animation to
+run (typically `Handle::spawn_periodic(50ms, …)` while skeletons are visible).
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/slider/Cargo.toml b/widgets/slider/Cargo.toml
index 5c46c3c..40f09c7 100644
--- a/widgets/slider/Cargo.toml
+++ b/widgets/slider/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-slider — slider horizontal con etiqueta + track draggable + valor numérico. El track es un fillbar (sin pulgar): cambia el ancho relleno según la fracción `(value-min)/(max-min)`. El drag emite el delta de valor (no pixels) en cada `Move`, listo para reentrar al update."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/slider/examples/slider_demo.rs b/widgets/slider/examples/slider_demo.rs
index fcd50d1..4dfb472 100644
--- a/widgets/slider/examples/slider_demo.rs
+++ b/widgets/slider/examples/slider_demo.rs
@@ -1,5 +1,5 @@
 //! Showcase de `llimphi-widget-slider`: tres sliders sobre un Model que
-//! acumula deltas en vivo. Corré con:
+//! acumula deltas en vivo. Corre con:
 //!
 //! ```text
 //! cargo run -p llimphi-widget-slider --example slider_demo
@@ -64,7 +64,7 @@ impl App for Demo {
             ..Default::default()
         })
         .text_aligned(
-            "ajustá los sliders — el Model acumula deltas en vivo".to_string(),
+            "ajusta los sliders — el Model acumula deltas en vivo".to_string(),
             13.0,
             theme.fg_text,
             Alignment::Start,
diff --git a/widgets/slider/src/lib.rs b/widgets/slider/src/lib.rs
index 4ee59cf..77857e0 100644
--- a/widgets/slider/src/lib.rs
+++ b/widgets/slider/src/lib.rs
@@ -42,7 +42,7 @@ use llimphi_ui::llimphi_raster::peniko::Color;
 use llimphi_ui::llimphi_text::Alignment;
 use llimphi_ui::{DragPhase, View};
 
-/// Paleta del slider. Las dimensiones también viajan acá porque definen
+/// Paleta del slider. Las dimensiones también viajan aquí porque definen
 /// el layout fila — el caller no toca el `Style` del slider directamente.
 #[derive(Debug, Clone, Copy)]
 pub struct SliderPalette {
@@ -252,6 +252,22 @@ where
     .children(vec![label_view, track_cell, value_view])
 }
 
+/// Valor absoluto correspondiente a un click en `local_x` px desde el borde
+/// izquierdo del track (posicionamiento directo, no relativo — lo que hace un
+/// `<input type=range>` al clickear el canal). El host lo cablea con
+/// `on_click_at` sobre el track. Pura y testeable.
+pub fn value_at_x(local_x: f32, track_w: f32, min: f32, max: f32) -> f32 {
+    let w = track_w.max(f32::EPSILON);
+    let ratio = (local_x / w).clamp(0.0, 1.0);
+    min + (max - min) * ratio
+}
+
+/// Nuevo valor tras un paso de teclado (←/→): `value + dir*step`, clampeado a
+/// `[min, max]`. Home/End = `min`/`max` los resuelve el host directamente.
+pub fn step_value(value: f32, min: f32, max: f32, step: f32, dir: i32) -> f32 {
+    (value + dir as f32 * step).clamp(min.min(max), min.max(max))
+}
+
 /// Formato uniforme para los valores: 2 decimales con signo explícito si
 /// la magnitud es chica, 1 decimal si es grande. Cabe en `value_width: 56`.
 fn format_value(v: f32) -> String {
@@ -276,4 +292,24 @@ mod tests {
         assert_eq!(format_value(42.5), "42.5");
         assert_eq!(format_value(1234.0), "1234");
     }
+
+    #[test]
+    fn value_at_x_mapea_click_a_valor_absoluto() {
+        assert!((value_at_x(0.0, 100.0, 0.0, 1.0) - 0.0).abs() < 1e-6);
+        assert!((value_at_x(100.0, 100.0, 0.0, 1.0) - 1.0).abs() < 1e-6);
+        assert!((value_at_x(50.0, 100.0, 0.0, 1.0) - 0.5).abs() < 1e-6);
+        // Rango con offset y magnitud.
+        assert!((value_at_x(30.0, 120.0, -1.0, 1.0) - (-0.5)).abs() < 1e-6);
+        // Fuera de rango → clamp.
+        assert!((value_at_x(-20.0, 100.0, 0.0, 10.0) - 0.0).abs() < 1e-6);
+        assert!((value_at_x(999.0, 100.0, 0.0, 10.0) - 10.0).abs() < 1e-6);
+    }
+
+    #[test]
+    fn step_value_avanza_y_clampa() {
+        assert!((step_value(0.5, 0.0, 1.0, 0.1, 1) - 0.6).abs() < 1e-6);
+        assert!((step_value(0.5, 0.0, 1.0, 0.1, -1) - 0.4).abs() < 1e-6);
+        assert!((step_value(0.95, 0.0, 1.0, 0.1, 1) - 1.0).abs() < 1e-6); // clamp arriba
+        assert!((step_value(0.05, 0.0, 1.0, 0.1, -1) - 0.0).abs() < 1e-6); // clamp abajo
+    }
 }
diff --git a/widgets/spinner/Cargo.toml b/widgets/spinner/Cargo.toml
index a6dff41..0d9ead5 100644
--- a/widgets/spinner/Cargo.toml
+++ b/widgets/spinner/Cargo.toml
@@ -5,8 +5,8 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-spinner — spinner circular animado por reloj absoluto (no requiere ticks del modelo). Stroke gradient circular. Default 24×24 pero escalable."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
diff --git a/widgets/spinner/LEEME.md b/widgets/spinner/LEEME.md
new file mode 100644
index 0000000..41e13f8
--- /dev/null
+++ b/widgets/spinner/LEEME.md
@@ -0,0 +1,22 @@
+# llimphi-widget-spinner
+
+*Read this in English: [README.md](README.md).*
+
+Spinner circular animado por reloj absoluto.
+
+El paint usa `Instant::now()` para calcular el ángulo de rotación,
+así no hace falta que la app guarde un tween ni dispatchee ticks:
+cuando llimphi-ui rasterize un frame (porque algo cambió en el
+modelo o porque la app pidió un repaint), el spinner se ve girando.
+
+**Nota**: el spinner sólo se anima si HAY frames. Una app idle no
+repintará por sí sola — usar `Handle::spawn_periodic(50ms, …)`
+mientras el spinner esté visible para forzar redraw. O conectar
+el spinner a un `Tween` y leer su `progress()` desde la `view`.
+
+Diseño visual: arco de 270° con stroke variable (más grueso al
+frente del giro, más fino atrás) para dar sensación de aceleración.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/spinner/README.md b/widgets/spinner/README.md
new file mode 100644
index 0000000..6a67996
--- /dev/null
+++ b/widgets/spinner/README.md
@@ -0,0 +1,20 @@
+# llimphi-widget-spinner
+
+Circular spinner animated by absolute clock.
+
+The paint uses `Instant::now()` to compute the rotation angle, so the app need
+not keep a tween or dispatch ticks: whenever llimphi-ui rasterizes a frame
+(because something changed in the model, or because the app asked for a repaint),
+the spinner appears to be turning.
+
+**Note**: the spinner only animates if there ARE frames. An idle app will not
+repaint on its own — use `Handle::spawn_periodic(50ms, …)` while the spinner is
+visible to force redraws. Or connect the spinner to a `Tween` and read its
+`progress()` from the `view`.
+
+Visual design: a 270° arc with a varying stroke (thicker at the leading edge of
+the turn, thinner behind) to convey acceleration.
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/splash/Cargo.toml b/widgets/splash/Cargo.toml
index e8527eb..6d6d701 100644
--- a/widgets/splash/Cargo.toml
+++ b/widgets/splash/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-splash — splash de arranque tawasuyu: cuatro cuadrantes (unanchay/yachay/ruway/ukupacha) animados con tween de entrada secuencial. Identidad visual del SO."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/splash/LEEME.md b/widgets/splash/LEEME.md
new file mode 100644
index 0000000..96a105e
--- /dev/null
+++ b/widgets/splash/LEEME.md
@@ -0,0 +1,29 @@
+# llimphi-widget-splash
+
+*Read this in English: [README.md](README.md).*
+
+Splash de arranque tawasuyu.
+
+Identidad visual del SO al boot: cuatro cuadrantes ordenados como
+una cruz andina, cada uno con su nombre quechua y color simbólico,
+que **entran en secuencia** con un tween de fade+escala.
+
+Los cuadrantes (en orden de entrada):
+1. `unanchay` — PERCIBIR  — cyan (índigo claro)
+2. `yachay`   — CONOCER   — verde aurora
+3. `ruway`    — HACER     — naranja sunset
+4. `ukupacha` — RAÍZ      — púrpura profundo
+
+Cada cuadrante hace fade-in + slight scale-up, con un offset de
+`motion::NORMAL / 2` entre uno y el siguiente. La app pasa un
+`Instant` de inicio y el splash calcula las fases relativas — no
+requiere ningún tween del modelo.
+
+Cuando el splash termina (todos visibles), la app puede:
+- mantenerlo unos segundos más como pantalla de carga,
+- hacer un fade-out completo cuando el sistema esté listo,
+- o reemplazarlo por la UI principal.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/splash/README.md b/widgets/splash/README.md
new file mode 100644
index 0000000..cfce3dd
--- /dev/null
+++ b/widgets/splash/README.md
@@ -0,0 +1,26 @@
+# llimphi-widget-splash
+
+The tawasuyu boot splash.
+
+The OS's visual identity at boot: four quadrants arranged as an Andean cross,
+each with its Quechua name and symbolic colour, **entering in sequence** with a
+fade + scale tween.
+
+The quadrants (in order of entrance):
+
+1. `unanchay` — PERCEIVE — cyan (light indigo)
+2. `yachay`   — KNOW     — aurora green
+3. `ruway`    — DO       — sunset orange
+4. `ukupacha` — ROOT     — deep purple
+
+Each quadrant fades in with a slight scale-up, offset by `motion::NORMAL / 2`
+from the previous one. The app passes a start `Instant` and the splash computes
+the relative phases — it needs no tween in the model.
+
+When the splash finishes (all visible), the app can keep it a few more seconds as
+a loading screen, fade it out completely once the system is ready, or replace it
+with the main UI.
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/splitter/Cargo.toml b/widgets/splitter/Cargo.toml
index 198d7ed..d1f38f4 100644
--- a/widgets/splitter/Cargo.toml
+++ b/widgets/splitter/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-splitter — split container con divisor draggable. Análogo Llimphi al `nahual-widget-splitter` GPUI: dos panes, divisor sólido del ancho del thickness configurable, drag emite Msg con el delta del eje principal."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/splitter/examples/splitter_demo.rs b/widgets/splitter/examples/splitter_demo.rs
index 45e1133..da5d7e2 100644
--- a/widgets/splitter/examples/splitter_demo.rs
+++ b/widgets/splitter/examples/splitter_demo.rs
@@ -1,9 +1,9 @@
 //! Showcase de `llimphi-widget-splitter`: dos splits anidados
 //! draggables (Row con Column adentro).
 //!
-//! Corré con: `cargo run -p llimphi-widget-splitter --example showcase --release`.
+//! Corre con: `cargo run -p llimphi-widget-splitter --example showcase --release`.
 //!
-//! Probá: agarrá el divisor vertical y arrastralo izquierda/derecha
+//! Prueba: agarrá el divisor vertical y arrástralo izquierda/derecha
 //! para resizar el pane izquierdo; agarrá el divisor horizontal de la
 //! derecha para resizar el pane superior derecho.
 
diff --git a/widgets/splitter/src/lib.rs b/widgets/splitter/src/lib.rs
index f8eeb7f..275e75f 100644
--- a/widgets/splitter/src/lib.rs
+++ b/widgets/splitter/src/lib.rs
@@ -52,7 +52,7 @@ pub enum PaneSize {
 }
 
 /// Paleta del divisor. Cambia de color al hover para señalar
-/// "agarrame y arrastrá".
+/// "agarrame y arrastra".
 #[derive(Debug, Clone, Copy)]
 pub struct SplitterPalette {
     pub divider: Color,
@@ -125,6 +125,17 @@ where
     .children(vec![pane_a, divider, pane_b])
 }
 
+/// Aplica un delta de drag al tamaño de un pane con **clamp min/max** — la
+/// pieza que el widget no ofrecía y cada caller tenía que replicar (o se
+/// olvidaba, dejando que un pane se comiera al otro). El caller la usa en su
+/// `update` al recibir `Msg::Resize(delta)`: `self.size = apply_resize(
+/// self.size, delta, MIN, MAX)`. Como el delta llega por-evento y el caller
+/// acumula en su modelo (`size += …`), el clamp por-paso mantiene el rango
+/// aun con la vista congelada durante el drag.
+pub fn apply_resize(current: f32, delta: f32, min: f32, max: f32) -> f32 {
+    (current + delta).clamp(min.min(max), min.max(max))
+}
+
 fn wrap_pane<Msg>(view: View<Msg>, direction: Direction, size: PaneSize) -> View<Msg> {
     // El panel Flex usa flex-basis 0 en el eje principal (no `auto`): así su
     // tamaño es la porción de espacio libre que le toca por `flex_grow`, en
@@ -184,3 +195,22 @@ where
     .cursor(cursor)
     .draggable(handler)
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn apply_resize_respeta_min_max() {
+        assert_eq!(apply_resize(200.0, 30.0, 100.0, 400.0), 230.0);
+        assert_eq!(apply_resize(120.0, -50.0, 100.0, 400.0), 100.0); // clamp min
+        assert_eq!(apply_resize(380.0, 50.0, 100.0, 400.0), 400.0); // clamp max
+    }
+
+    #[test]
+    fn apply_resize_tolera_min_max_invertidos() {
+        // Si el caller pasa (max, min) por error, no explota.
+        assert_eq!(apply_resize(200.0, 0.0, 400.0, 100.0), 200.0);
+        assert_eq!(apply_resize(50.0, 0.0, 400.0, 100.0), 100.0);
+    }
+}
diff --git a/widgets/stat-card/Cargo.toml b/widgets/stat-card/Cargo.toml
index bd2e66e..5d0f090 100644
--- a/widgets/stat-card/Cargo.toml
+++ b/widgets/stat-card/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-stat-card — tarjeta de dashboard con label chico + valor grande + descripción + accent vertical. Análogo Llimphi al `nahual-widget-stat-card` GPUI."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/status-bar/Cargo.toml b/widgets/status-bar/Cargo.toml
index f432be8..5103a7e 100644
--- a/widgets/status-bar/Cargo.toml
+++ b/widgets/status-bar/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-status-bar — barra inferior con segmentos left/center/right configurables. Cada segmento puede llevar icono opcional y handler de click."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/status-bar/LEEME.md b/widgets/status-bar/LEEME.md
new file mode 100644
index 0000000..f8af7a1
--- /dev/null
+++ b/widgets/status-bar/LEEME.md
@@ -0,0 +1,17 @@
+# llimphi-widget-status-bar
+
+*Read this in English: [README.md](README.md).*
+
+Barra de estado inferior.
+
+Patrón clásico de IDEs/editores: barra delgada en el borde inferior
+de la ventana con tres regiones (left/center/right). Cada región
+tiene N segmentos, cada uno puede llevar icono + texto + handler de
+click opcional.
+
+Útil para mostrar: rama git activa, posición del cursor, tipo de
+archivo, modo (insert/normal), notificaciones pendientes, etc.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/status-bar/README.md b/widgets/status-bar/README.md
new file mode 100644
index 0000000..d8ec277
--- /dev/null
+++ b/widgets/status-bar/README.md
@@ -0,0 +1,14 @@
+# llimphi-widget-status-bar
+
+Bottom status bar.
+
+The classic IDE/editor pattern: a thin bar at the window's lower edge with three
+regions (left/center/right). Each region holds N segments, and each segment can
+carry an icon + text + an optional click handler.
+
+Useful for showing: the active git branch, cursor position, file type, mode
+(insert/normal), pending notifications, and so on.
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/switch/Cargo.toml b/widgets/switch/Cargo.toml
index 35af120..290d9e6 100644
--- a/widgets/switch/Cargo.toml
+++ b/widgets/switch/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-switch — toggle binario on/off (track + thumb) con paleta del theme. Para preferencias, modos y feature flags."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/switch/LEEME.md b/widgets/switch/LEEME.md
new file mode 100644
index 0000000..297ef66
--- /dev/null
+++ b/widgets/switch/LEEME.md
@@ -0,0 +1,20 @@
+# llimphi-widget-switch
+
+*Read this in English: [README.md](README.md).*
+
+Toggle binario (track + thumb).
+
+Render-only: la app guarda el `bool` en su modelo y dispatcha el
+Msg de toggle al click. Visualmente:
+- Track horizontal (40×22 default) con color del estado activo.
+- Thumb circular (18px) que se posiciona a la izquierda (off) o
+  derecha (on) del track.
+
+Para animar la transición, la app puede guardar un `Tween<f32>` con
+el progreso 0→1 y leerlo desde `view` para interpolar la posición
+del thumb. Sin tween la transición es instantánea — funcional pero
+menos elegante.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/switch/README.md b/widgets/switch/README.md
new file mode 100644
index 0000000..c6e6646
--- /dev/null
+++ b/widgets/switch/README.md
@@ -0,0 +1,18 @@
+# llimphi-widget-switch
+
+Binary toggle (track + thumb).
+
+Render-only: the app keeps the `bool` in its model and dispatches the toggle
+`Msg` on click. Visually:
+
+- A horizontal track (40×22 by default) coloured by the active state.
+- A circular thumb (18 px) positioned at the left (off) or the right (on) of the
+  track.
+
+To animate the transition the app can keep a `Tween<f32>` with progress 0→1 and
+read it from `view` to interpolate the thumb's position. Without a tween the
+transition is instantaneous — functional but less elegant.
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/table/Cargo.toml b/widgets/table/Cargo.toml
index 5330aa8..c4cd9f1 100644
--- a/widgets/table/Cargo.toml
+++ b/widgets/table/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-table — tabla y lista editables: celdas-texto con quitar/agregar fila. Stateless (el caller posee el foco). Agnóstico."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/table/LEEME.md b/widgets/table/LEEME.md
new file mode 100644
index 0000000..c6f9723
--- /dev/null
+++ b/widgets/table/LEEME.md
@@ -0,0 +1,24 @@
+# llimphi-widget-table
+
+*Read this in English: [README.md](README.md).*
+
+Tabla y lista editables para Llimphi.
+
+Una grilla de celdas-texto: encabezados opcionales por columna, una fila por
+registro con botón **quitar** y un botón **agregar** al pie. La variante
+`list_view` es el caso de una sola columna sin encabezado.
+
+**Stateless por diseño.** Como `text_input_view`, el widget no posee el
+foco ni los buffers de edición: el caller le dice cuál celda está focada
+(`focused`) y le presta su `TextInputState` (`focused_state`); el resto de
+las celdas se pintan desde su texto. El tecleo lo enruta el caller a su
+`TextInputState` y reconstruye el valor — igual que con un text-input suelto.
+
+Es agnóstico: no sabe de config. Emite el `Msg` del caller por tres
+callbacks (`on_focus_cell`, `on_remove_row`, `on_add_row`). El protocolo de
+"qué cambió" (reemplazar una celda, sumar/quitar una fila) lo decide el
+caller; el widget sólo dispara el evento con la coordenada.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/table/README.md b/widgets/table/README.md
new file mode 100644
index 0000000..9be3d30
--- /dev/null
+++ b/widgets/table/README.md
@@ -0,0 +1,22 @@
+# llimphi-widget-table
+
+Editable table and list for Llimphi.
+
+A grid of text cells: optional per-column headers, one row per record with a
+**remove** button, and an **add** button at the foot. The `list_view` variant is
+the single-column, header-less case.
+
+**Stateless by design.** Like `text_input_view`, the widget owns neither the
+focus nor the editing buffers: the caller says which cell is focused (`focused`)
+and lends it its `TextInputState` (`focused_state`); the remaining cells are
+painted from their text. Typing is routed by the caller into its `TextInputState`
+and the value is rebuilt — exactly as with a standalone text input.
+
+It is agnostic: it knows nothing about config. It emits the caller's `Msg`
+through three callbacks (`on_focus_cell`, `on_remove_row`, `on_add_row`). The
+"what changed" protocol (replace a cell, add/remove a row) is decided by the
+caller; the widget only fires the event with the coordinate.
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/table/src/lib.rs b/widgets/table/src/lib.rs
index 68e44e2..0bd9f11 100644
--- a/widgets/table/src/lib.rs
+++ b/widgets/table/src/lib.rs
@@ -318,3 +318,102 @@ fn add_button<Msg: Clone + 'static>(label: &str, msg: Msg, palette: &TablePalett
     .on_click(msg)
     .text_aligned(label.to_string(), 11.5, palette.add_fg, Alignment::Center)
 }
+
+// ─────────────────────────────────────────────────────────────────────────
+// Navegación de celda estilo planilla (helper puro, lado host)
+// ─────────────────────────────────────────────────────────────────────────
+
+/// Un movimiento del foco de celda en la grilla editable, como en una planilla.
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum CellMove {
+    /// Flechas: mueve una celda, clampeado a los bordes.
+    Up,
+    Down,
+    Left,
+    Right,
+    /// Tab: siguiente celda; al final de la fila salta al inicio de la
+    /// siguiente; en la última celda se queda.
+    Tab,
+    /// Shift+Tab: celda anterior; al inicio de la fila salta al final de la
+    /// anterior; en la primera celda se queda.
+    ShiftTab,
+    /// Enter: baja una fila (misma columna), clampeado.
+    Enter,
+}
+
+/// Mueve el foco `(row, col)` según `mv` dentro de una grilla de `nrows`×`ncols`.
+/// Las flechas y Enter clampean a los bordes; Tab/Shift+Tab avanzan en orden de
+/// lectura sin envolver más allá del último/primer registro. Pura y testeable —
+/// el host la cablea en `on_key` y dispatcha `on_focus_cell(r, c)` con el
+/// resultado.
+pub fn next_cell(row: usize, col: usize, nrows: usize, ncols: usize, mv: CellMove) -> (usize, usize) {
+    if nrows == 0 || ncols == 0 {
+        return (0, 0);
+    }
+    let last_r = nrows - 1;
+    let last_c = ncols - 1;
+    match mv {
+        CellMove::Up => (row.saturating_sub(1), col.min(last_c)),
+        CellMove::Down => ((row + 1).min(last_r), col.min(last_c)),
+        CellMove::Left => (row.min(last_r), col.saturating_sub(1)),
+        CellMove::Right => (row.min(last_r), (col + 1).min(last_c)),
+        CellMove::Enter => ((row + 1).min(last_r), col.min(last_c)),
+        CellMove::Tab => {
+            if col < last_c {
+                (row, col + 1)
+            } else if row < last_r {
+                (row + 1, 0)
+            } else {
+                (last_r, last_c) // fin de la grilla: se queda
+            }
+        }
+        CellMove::ShiftTab => {
+            if col > 0 {
+                (row.min(last_r), col - 1)
+            } else if row > 0 {
+                (row - 1, last_c)
+            } else {
+                (0, 0) // inicio de la grilla: se queda
+            }
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn flechas_clampan_en_los_bordes() {
+        // grilla 3 filas × 2 cols
+        assert_eq!(next_cell(0, 0, 3, 2, CellMove::Up), (0, 0));
+        assert_eq!(next_cell(0, 0, 3, 2, CellMove::Down), (1, 0));
+        assert_eq!(next_cell(2, 1, 3, 2, CellMove::Down), (2, 1)); // tope
+        assert_eq!(next_cell(1, 0, 3, 2, CellMove::Left), (1, 0)); // piso col
+        assert_eq!(next_cell(1, 0, 3, 2, CellMove::Right), (1, 1));
+    }
+
+    #[test]
+    fn tab_avanza_en_orden_de_lectura() {
+        assert_eq!(next_cell(0, 0, 3, 2, CellMove::Tab), (0, 1));
+        assert_eq!(next_cell(0, 1, 3, 2, CellMove::Tab), (1, 0)); // salta de fila
+        assert_eq!(next_cell(2, 1, 3, 2, CellMove::Tab), (2, 1)); // fin: se queda
+    }
+
+    #[test]
+    fn shift_tab_retrocede() {
+        assert_eq!(next_cell(1, 0, 3, 2, CellMove::ShiftTab), (0, 1)); // sube de fila
+        assert_eq!(next_cell(0, 0, 3, 2, CellMove::ShiftTab), (0, 0)); // inicio: se queda
+    }
+
+    #[test]
+    fn enter_baja_una_fila() {
+        assert_eq!(next_cell(0, 1, 3, 2, CellMove::Enter), (1, 1));
+        assert_eq!(next_cell(2, 1, 3, 2, CellMove::Enter), (2, 1)); // tope
+    }
+
+    #[test]
+    fn grilla_vacia_es_origen() {
+        assert_eq!(next_cell(0, 0, 0, 0, CellMove::Tab), (0, 0));
+    }
+}
diff --git a/widgets/tabs/Cargo.toml b/widgets/tabs/Cargo.toml
index e480e40..c120b9d 100644
--- a/widgets/tabs/Cargo.toml
+++ b/widgets/tabs/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-tabs — tira de tabs + área de contenido. Análogo Llimphi al `nahual-widget-tabs` GPUI. El caller mantiene el índice activo en el `Model` y le da al widget las labels + el view del tab activo."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/tabs/examples/tabs_demo.rs b/widgets/tabs/examples/tabs_demo.rs
index 25c44d6..58ff44a 100644
--- a/widgets/tabs/examples/tabs_demo.rs
+++ b/widgets/tabs/examples/tabs_demo.rs
@@ -1,7 +1,14 @@
-//! Showcase de `llimphi-widget-tabs`: 3 tabs con contenido distinto
-//! cada uno. Hover en los tabs inactivos cambia el bg.
+//! Showcase de `llimphi-widget-tabs` con las 3 features nuevas:
+//! **cerrar** (× por tab), **reordenar** (arrastrar un tab sobre otro) y
+//! **overflow** (9 tabs que no caben → la tira scrollea con la rueda).
 //!
-//! Corré con: `cargo run -p llimphi-widget-tabs --example showcase --release`.
+//! Corre con: `cargo run -p llimphi-widget-tabs --example tabs_demo --release`.
+//! - Click en un tab → lo activa.
+//! - Click en el × → cierra ese tab.
+//! - Arrastra un tab sobre otro → los reordena.
+//! - Rueda sobre la tira → scroll horizontal cuando desbordan.
+
+use std::sync::Arc;
 
 use llimphi_ui::llimphi_layout::taffy::{
     prelude::{length, percent, Size, Style},
@@ -10,15 +17,28 @@ use llimphi_ui::llimphi_layout::taffy::{
 use llimphi_ui::llimphi_raster::peniko::Color;
 use llimphi_ui::llimphi_text::Alignment;
 use llimphi_ui::{App, Handle, View};
-use llimphi_widget_tabs::{tabs_view, TabsPalette, TabsSpec};
+use llimphi_widget_tabs::{
+    clamp_strip_offset, reorder, strip_width, tabs_view, TabsPalette, TabsSpec,
+};
+
+/// Ancho fijo de cada tab; con 9 tabs (9·150 + gaps ≈ 1366) desborda la
+/// ventana de 900 → se ejercita el overflow.
+const TAB_W: f32 = 150.0;
+/// Ancho aproximado de la barra (≈ ancho de ventana) para clampear el scroll.
+const BAR_W: f32 = 900.0;
 
 #[derive(Clone)]
 enum Msg {
     SelectTab(usize),
+    CloseTab(usize),
+    ReorderTab(usize, usize),
+    ScrollStrip(f32),
 }
 
 struct Model {
+    tabs: Vec<String>,
     active: usize,
+    strip_offset: f32,
 }
 
 struct Showcase;
@@ -36,48 +56,80 @@ impl App for Showcase {
     }
 
     fn init(_: &Handle<Msg>) -> Model {
-        Model { active: 0 }
+        Model {
+            tabs: vec![
+                "General".into(),
+                "Avanzado".into(),
+                "Logs".into(),
+                "Red".into(),
+                "Audio".into(),
+                "Video".into(),
+                "Atajos".into(),
+                "Plugins".into(),
+                "Acerca de".into(),
+            ],
+            active: 0,
+            strip_offset: 0.0,
+        }
     }
 
     fn update(model: Model, msg: Msg, _: &Handle<Msg>) -> Model {
         let mut m = model;
         match msg {
-            Msg::SelectTab(i) => m.active = i,
+            Msg::SelectTab(i) => m.active = i.min(m.tabs.len().saturating_sub(1)),
+            Msg::CloseTab(i) => {
+                if i < m.tabs.len() {
+                    m.tabs.remove(i);
+                    // Reajustar el activo tras el cierre.
+                    if m.active >= i && m.active > 0 {
+                        m.active -= 1;
+                    }
+                    m.active = m.active.min(m.tabs.len().saturating_sub(1));
+                }
+            }
+            Msg::ReorderTab(from, to) => {
+                let active_name = m.tabs.get(m.active).cloned();
+                reorder(&mut m.tabs, from, to);
+                // Mantener activo el mismo tab (por nombre) tras mover.
+                if let Some(name) = active_name {
+                    if let Some(pos) = m.tabs.iter().position(|t| *t == name) {
+                        m.active = pos;
+                    }
+                }
+            }
+            Msg::ScrollStrip(delta) => {
+                let content = strip_width(&m.tabs, Some(TAB_W), true);
+                m.strip_offset = clamp_strip_offset(m.strip_offset + delta, content, BAR_W);
+            }
         }
         m
     }
 
     fn view(model: &Model) -> View<Msg> {
-        let body = match model.active {
-            0 => content_pane(
-                "General",
-                "Acá vivirían los settings principales del módulo.\n\
-                 El click cambia de tab; el hover sobre tabs inactivos\n\
-                 ilumina el fondo levemente.",
-                Color::from_rgba8(220, 230, 245, 255),
-            ),
-            1 => content_pane(
-                "Avanzado",
-                "Variables esotéricas, banderas experimentales.\n\
-                 Probablemente no las toques.",
-                Color::from_rgba8(200, 220, 240, 255),
-            ),
-            _ => content_pane(
-                "Logs",
-                "[12:01:33] arranqué\n[12:01:34] cargué config\n\
-                 [12:01:35] esperando eventos…",
-                Color::from_rgba8(180, 195, 215, 255),
-            ),
-        };
+        let title = model
+            .tabs
+            .get(model.active)
+            .cloned()
+            .unwrap_or_else(|| "—".into());
+        let body = content_pane(
+            &title,
+            "Click cambia de tab · el × cierra · arrastra un tab sobre otro para\n\
+             reordenar · la rueda sobre la tira scrollea cuando los tabs desbordan.",
+            Color::from_rgba8(220, 230, 245, 255),
+        );
 
         tabs_view(TabsSpec {
-            labels: vec!["General".into(), "Avanzado".into(), "Logs".into()],
+            labels: model.tabs.clone(),
             active: model.active,
             on_select: Msg::SelectTab,
             content: body,
             tab_height: 36.0,
             palette: TabsPalette::default(),
-            tab_width: Some(160.0),
+            tab_width: Some(TAB_W),
+            on_close: Some(Arc::new(Msg::CloseTab)),
+            on_reorder: Some(Arc::new(|from, to| Msg::ReorderTab(from, to))),
+            strip_offset: model.strip_offset,
+            on_strip_scroll: Some(Arc::new(Msg::ScrollStrip)),
         })
     }
 }
diff --git a/widgets/tabs/src/lib.rs b/widgets/tabs/src/lib.rs
index 0abc6dd..43a80f4 100644
--- a/widgets/tabs/src/lib.rs
+++ b/widgets/tabs/src/lib.rs
@@ -5,24 +5,40 @@
 //! widget las labels + el `View` del tab activo, y maneja el Msg de
 //! cambio de tab.
 //!
-//! Uso típico:
+//! Capacidades de un tab bar moderno (todas **opcionales**, aditivas):
+//! - **Cerrar** (`on_close`): cada tab muestra un × que emite `on_close(i)`.
+//! - **Reordenar** (`on_reorder`): los tabs se arrastran; al soltar sobre otro
+//!   emite `on_reorder(from, to)` (mismo patrón que `reorderable_list_view`).
+//! - **Overflow** (`on_strip_scroll` + `strip_offset`): cuando los tabs no
+//!   caben, la tira scrollea horizontalmente con la rueda. El host clampea el
+//!   offset con [`clamp_strip_offset`] (usando [`strip_width`] para el ancho de
+//!   contenido) — mismo contrato que el `scroll` widget.
+//!
+//! Uso mínimo (sin extras):
 //!
 //! ```ignore
-//! tabs_view(
-//!     TabsSpec {
-//!         labels: vec!["General".into(), "Avanzado".into(), "Logs".into()],
-//!         active: model.active_tab,
-//!         on_select: |i| Msg::SelectTab(i),
-//!         content: render_active_tab(model),
-//!         palette: TabsPalette::default(),
-//!     }
-//! )
+//! tabs_view(TabsSpec {
+//!     labels: vec!["General".into(), "Avanzado".into(), "Logs".into()],
+//!     active: model.active_tab,
+//!     on_select: |i| Msg::SelectTab(i),
+//!     content: render_active_tab(model),
+//!     tab_height: 32.0,
+//!     palette: TabsPalette::default(),
+//!     tab_width: None,
+//!     // Extras opcionales (todos en su valor neutro):
+//!     on_close: None,
+//!     on_reorder: None,
+//!     strip_offset: 0.0,
+//!     on_strip_scroll: None,
+//! })
 //! ```
 
 #![forbid(unsafe_code)]
 
+use std::sync::Arc;
+
 use llimphi_ui::llimphi_layout::taffy::{
-    prelude::{auto, length, percent, Dimension, FlexDirection, Size, Style},
+    prelude::{auto, length, percent, Dimension, FlexDirection, Position, Size, Style},
     AlignItems, JustifyContent, Rect,
 };
 
@@ -33,9 +49,16 @@ const DEFAULT_MIN_TAB_WIDTH: f32 = 120.0;
 /// Separación horizontal entre tabs — deja ver el `bg_bar` como hilo
 /// fino, suaviza el bloque sólido de antes.
 const TAB_GAP: f32 = 2.0;
+/// Padding horizontal (cada lado) del label dentro del tab.
+const TAB_PAD_X: f32 = 16.0;
+/// Ancho reservado para el botón × de cierre.
+const CLOSE_W: f32 = 20.0;
+/// Px de scroll horizontal por «tick» de rueda en modo overflow.
+const WHEEL_LINE: f32 = 40.0;
+
 use llimphi_ui::llimphi_raster::peniko::Color;
 use llimphi_ui::llimphi_text::Alignment;
-use llimphi_ui::View;
+use llimphi_ui::{DragPhase, View};
 use llimphi_widget_panel::{panel_signature_painter, PanelStyle};
 
 /// Paleta del tab bar.
@@ -53,6 +76,8 @@ pub struct TabsPalette {
     /// del tab activo justo encima ya cumple el rol del hairline). `None`
     /// cae al fill plano de `bg_tab_active` (back-compat).
     pub content_signature: Option<PanelStyle>,
+    /// Resalte de la fila destino mientras un drag de reorder pasa por encima.
+    pub bg_drop_hover: Color,
 }
 
 impl Default for TabsPalette {
@@ -64,6 +89,8 @@ impl Default for TabsPalette {
 impl TabsPalette {
     /// Construye la paleta desde un `Theme` semántico.
     pub fn from_theme(t: &llimphi_theme::Theme) -> Self {
+        let mut drop = t.accent;
+        drop.components[3] *= 0.40;
         Self {
             bg_bar: t.bg_panel_alt,
             bg_tab_inactive: t.bg_panel,
@@ -77,6 +104,7 @@ impl TabsPalette {
                 bg_base: t.bg_app,
                 ..PanelStyle::neutral(t)
             }),
+            bg_drop_hover: drop,
         }
     }
 }
@@ -92,8 +120,22 @@ pub struct TabsSpec<Msg, F> {
     pub content: View<Msg>,
     pub tab_height: f32,
     pub palette: TabsPalette,
-    /// Ancho de cada tab. `None` = tamaño según contenido (auto).
+    /// Ancho de cada tab. `None` = tamaño según el label (medido con la
+    /// fuente real), con `DEFAULT_MIN_TAB_WIDTH` de piso.
     pub tab_width: Option<f32>,
+    /// Cerrar (×) por tab. `Some` → cada tab muestra un × que emite
+    /// `on_close(i)`. `None` → tabs sin botón de cierre.
+    pub on_close: Option<Arc<dyn Fn(usize) -> Msg + Send + Sync>>,
+    /// Reordenar por drag. `Some` → los tabs se arrastran y al soltar sobre
+    /// otro emite `on_reorder(from, to)`. `None` → tabs fijos.
+    pub on_reorder: Option<Arc<dyn Fn(usize, usize) -> Msg + Send + Sync>>,
+    /// Desplazamiento horizontal actual de la tira (px), para overflow. El
+    /// host lo guarda y lo clampea con [`clamp_strip_offset`]. Ignorado si
+    /// `on_strip_scroll` es `None`.
+    pub strip_offset: f32,
+    /// Callback de rueda en modo overflow: recibe el delta (px) a sumar al
+    /// `strip_offset`. `None` → sin scroll horizontal (los tabs desbordan).
+    pub on_strip_scroll: Option<Arc<dyn Fn(f32) -> Msg + Send + Sync>>,
 }
 
 /// Compone la barra de tabs + área de contenido. La función `on_select`
@@ -111,38 +153,89 @@ where
         tab_height,
         palette,
         tab_width,
+        on_close,
+        on_reorder,
+        strip_offset,
+        on_strip_scroll,
     } = spec;
 
-    let mut bar_children: Vec<View<Msg>> = Vec::with_capacity(labels.len() + 1);
+    let closable = on_close.is_some();
+    let reorderable = on_reorder.is_some();
+
+    let mut tab_nodes: Vec<View<Msg>> = Vec::with_capacity(labels.len());
     for (i, label) in labels.iter().enumerate() {
-        bar_children.push(tab_button(
+        let w = tab_intrinsic_width(label, tab_width, closable);
+        tab_nodes.push(tab_button(
             label,
+            i,
             i == active,
             tab_height,
-            tab_width,
+            w,
             &palette,
             on_select(i),
+            on_close.as_ref().map(|f| f(i)),
+            on_reorder.clone(),
         ));
     }
-    // Spacer al final: empuja los tabs al inicio y rellena el resto del
-    // ancho con el bg_bar.
-    bar_children.push(
-        View::new(Style {
-            size: Size {
-                width: Dimension::auto(),
-                height: length(tab_height),
-            },
-            flex_grow: 1.0,
-            ..Default::default()
-        })
-        .fill(palette.bg_bar),
-    );
+
+    let bar_inner_h = tab_height + accent_thickness(&palette);
+
+    // Cuerpo de la barra: modo overflow (tira scrollable) o simple (tabs +
+    // spacer que rellena el resto con `bg_bar`).
+    let bar_body: Vec<View<Msg>> = match on_strip_scroll {
+        Some(on_scroll) => {
+            // Fila interna con su ancho natural, desplazada -offset y recortada.
+            let inner = View::new(Style {
+                position: Position::Absolute,
+                inset: Rect {
+                    left: length(-strip_offset),
+                    top: length(0.0_f32),
+                    right: auto(),
+                    bottom: auto(),
+                },
+                flex_direction: FlexDirection::Row,
+                size: Size { width: auto(), height: length(bar_inner_h) },
+                gap: Size { width: length(TAB_GAP), height: length(0.0_f32) },
+                ..Default::default()
+            })
+            .children(tab_nodes);
+
+            let strip = View::new(Style {
+                position: Position::Relative,
+                size: Size { width: auto(), height: length(bar_inner_h) },
+                flex_grow: 1.0,
+                ..Default::default()
+            })
+            .fill(palette.bg_bar)
+            .clip(true)
+            .on_scroll(move |dx, dy| {
+                // Rueda vertical u horizontal → desplazamiento horizontal.
+                let d = if dx != 0.0 { dx } else { dy } * WHEEL_LINE;
+                Some((on_scroll)(d))
+            })
+            .children(vec![inner]);
+            vec![strip]
+        }
+        None => {
+            let mut body = tab_nodes;
+            // Spacer al final: empuja los tabs al inicio y rellena con bg_bar.
+            body.push(
+                View::new(Style {
+                    size: Size { width: Dimension::auto(), height: length(bar_inner_h) },
+                    flex_grow: 1.0,
+                    ..Default::default()
+                })
+                .fill(palette.bg_bar),
+            );
+            body
+        }
+    };
 
     let bar = View::new(Style {
         flex_direction: FlexDirection::Row,
         size: Size {
             width: percent(1.0_f32),
-            height: length(tab_height + accent_thickness(&palette)),
+            height: length(bar_inner_h),
         },
         // No comprimir verticalmente cuando el contenido del tab activo
         // pide percent(1.0): si no, el column padre reparte overflow y
@@ -155,7 +248,7 @@ where
         ..Default::default()
     })
     .fill(palette.bg_bar)
-    .children(bar_children);
+    .children(bar_body);
 
     let content_style = Style {
         size: Size {
@@ -174,6 +267,7 @@ where
             .children(vec![content]),
     };
 
+    let _ = reorderable;
     View::new(Style {
         flex_direction: FlexDirection::Column,
         size: Size {
@@ -185,81 +279,155 @@ where
     .children(vec![bar, content_wrap])
 }
 
+/// Ancho intrínseco de un tab: `tab_width` explícito, o el ancho del label
+/// medido con la fuente real (`+ padding`, con piso `DEFAULT_MIN_TAB_WIDTH`);
+/// más el hueco del × si es cerrable. Es la fuente de verdad que comparten el
+/// render y [`strip_width`] — así el clamp de overflow coincide con lo pintado.
+pub fn tab_intrinsic_width(label: &str, tab_width: Option<f32>, closable: bool) -> f32 {
+    let base = match tab_width {
+        Some(px) => px,
+        None => (llimphi_ui::llimphi_text::text_width(label, 13.0) + TAB_PAD_X * 2.0)
+            .max(DEFAULT_MIN_TAB_WIDTH),
+    };
+    base + if closable { CLOSE_W } else { 0.0 }
+}
+
+/// Ancho total de la tira de tabs (suma de anchos + gaps). El host lo usa
+/// junto al ancho del viewport para clampear `strip_offset`.
+pub fn strip_width(labels: &[String], tab_width: Option<f32>, closable: bool) -> f32 {
+    if labels.is_empty() {
+        return 0.0;
+    }
+    let sum: f32 = labels
+        .iter()
+        .map(|l| tab_intrinsic_width(l, tab_width, closable))
+        .sum();
+    sum + TAB_GAP * (labels.len() as f32 - 1.0)
+}
+
+/// Clampa el desplazamiento de la tira a `[0, max(0, content - viewport)]` —
+/// el mismo contrato que `scroll::clamp_offset`. El host lo llama en su
+/// `update` al recibir el delta de rueda: `off = clamp_strip_offset(off +
+/// delta, strip_width(...), ancho_barra)`.
+pub fn clamp_strip_offset(offset: f32, content_w: f32, viewport_w: f32) -> f32 {
+    offset.clamp(0.0, (content_w - viewport_w).max(0.0))
+}
+
+#[allow(clippy::too_many_arguments)]
 fn tab_button<Msg: Clone + 'static>(
     label: &str,
+    idx: usize,
     active: bool,
     height: f32,
-    width: Option<f32>,
+    width: f32,
     palette: &TabsPalette,
     on_click: Msg,
+    on_close: Option<Msg>,
+    on_reorder: Option<Arc<dyn Fn(usize, usize) -> Msg + Send + Sync>>,
 ) -> View<Msg> {
     let (bg, fg) = if active {
         (palette.bg_tab_active, palette.fg_text_active)
     } else {
         (palette.bg_tab_inactive, palette.fg_text)
     };
-    let w = match width {
-        Some(px) => length(px),
-        None => Dimension::auto(),
-    };
-    // Cuando el tab es auto-width, garantizamos min para que un label
-    // corto («main.rs», 7 chars) no apriete al vecino.
-    let min_w = match width {
-        Some(_) => auto(),
-        None => length(DEFAULT_MIN_TAB_WIDTH),
-    };
 
-    let label_view = View::new(Style {
-        size: Size {
-            width: w,
-            height: length(height),
-        },
-        min_size: Size { width: min_w, height: auto() },
+    // Label — ocupa todo el ancho salvo el ×; su on_click selecciona el tab.
+    let label_node = View::new(Style {
+        size: Size { width: auto(), height: length(height) },
+        flex_grow: 1.0,
+        align_items: Some(AlignItems::Center),
+        justify_content: Some(JustifyContent::Center),
         padding: Rect {
-            left: length(16.0_f32),
-            right: length(16.0_f32),
+            left: length(TAB_PAD_X),
+            right: length(if on_close.is_some() { 4.0 } else { TAB_PAD_X }),
             top: length(0.0_f32),
             bottom: length(0.0_f32),
         },
+        ..Default::default()
+    })
+    .text_aligned(label.to_string(), 13.0, fg, Alignment::Center)
+    .ellipsis(1)
+    .on_click(on_click);
+
+    let mut row_children: Vec<View<Msg>> = vec![label_node];
+
+    // Botón × de cierre (hit-test interno gana sobre el select del label).
+    if let Some(close_msg) = on_close {
+        row_children.push(
+            View::new(Style {
+                size: Size { width: length(CLOSE_W), height: length(height) },
+                flex_shrink: 0.0,
+                align_items: Some(AlignItems::Center),
+                justify_content: Some(JustifyContent::Center),
+                ..Default::default()
+            })
+            .text_aligned("×".to_string(), 14.0, palette.fg_text, Alignment::Center)
+            .hover_fill(palette.bg_tab_hover)
+            .radius(4.0)
+            .cursor(llimphi_ui::Cursor::Pointer)
+            .on_click(close_msg),
+        );
+    }
+
+    let row = View::new(Style {
+        flex_direction: FlexDirection::Row,
+        size: Size { width: length(width), height: length(height) },
         align_items: Some(AlignItems::Center),
-        justify_content: Some(JustifyContent::Center),
         ..Default::default()
     })
     .fill(bg)
     .hover_fill(palette.bg_tab_hover)
-    .text_aligned(label.to_string(), 13.0, fg, Alignment::Center)
-    .on_click(on_click);
+    .children(row_children);
 
-    // Línea de acento bajo el tab activo. Para inactivos se dibuja con el
-    // bg_bar (transparente al ojo).
+    // Línea de acento bajo el tab activo.
     let accent_color = match (palette.accent, active) {
         (Some(c), true) => c,
         _ => palette.bg_bar,
     };
     let accent = View::new(Style {
         size: Size {
-            width: w,
+            width: length(width),
             height: length(accent_thickness(palette)),
         },
-        min_size: Size { width: min_w, height: auto() },
         ..Default::default()
     })
     .fill(accent_color);
 
-    View::new(Style {
+    let mut tab = View::new(Style {
         flex_direction: FlexDirection::Column,
         size: Size {
-            width: w,
+            width: length(width),
             height: length(height + accent_thickness(palette)),
         },
-        min_size: Size { width: min_w, height: auto() },
-        // Cuando hay muchos tabs y el ancho total excede la bar, no
-        // comprimir cada tab — preferimos overflow a verlos como una
-        // lasca delgada. (Eventualmente: scroll horizontal.)
+        // No comprimir cada tab cuando desbordan — preferimos overflow/scroll
+        // a verlos como lascas.
         flex_shrink: 0.0,
         ..Default::default()
     })
-    .children(vec![label_view, accent])
+    .children(vec![row, accent]);
+
+    // Reorder: el tab es a la vez fuente de drag (payload = idx) y destino de
+    // drop (reordena al soltar otro encima). El drag reordena; el click sobre
+    // el label sigue seleccionando (el runtime arbitra press-sin-mover=click,
+    // press-con-mover=drag del ancestro). Mismo patrón que reorderable_list.
+    if let Some(reorder) = on_reorder {
+        let to_idx = idx;
+        tab = tab
+            .draggable(|_phase: DragPhase, _dx: f32, _dy: f32| None)
+            .drag_payload(idx as u64)
+            .drop_hover_fill(palette.bg_drop_hover)
+            .on_drop(move |from: u64| {
+                let from = from as usize;
+                if from == to_idx {
+                    None
+                } else {
+                    Some((reorder)(from, to_idx))
+                }
+            })
+            .cursor(llimphi_ui::Cursor::Grab);
+    }
+
+    tab
 }
 
 fn accent_thickness(palette: &TabsPalette) -> f32 {
@@ -269,3 +437,107 @@ fn accent_thickness(palette: &TabsPalette) -> f32 {
         0.0
     }
 }
+
+/// Mueve la pestaña activa con teclado (←/→): índice siguiente **envolviendo**
+/// en los extremos (el rol Tab implica navegación por flechas). El host lo
+/// cablea en `update` y dispatcha su `Msg::SelectTab(nuevo)`.
+pub fn step_tab(len: usize, current: usize, direction: i32) -> usize {
+    if len == 0 {
+        return 0;
+    }
+    let n = len as i32;
+    let mut i = current as i32 + direction;
+    if i < 0 {
+        i = n - 1;
+    } else if i >= n {
+        i = 0;
+    }
+    i as usize
+}
+
+/// Extremo para Home/End: `0` o `len-1`.
+pub fn edge_tab(len: usize, to_end: bool) -> usize {
+    if len == 0 {
+        0
+    } else if to_end {
+        len - 1
+    } else {
+        0
+    }
+}
+
+/// Aplica un reordenamiento a un vector de tabs: mueve el elemento `from` a la
+/// posición `to`, desplazando el resto. El host lo usa en `update` sobre su
+/// lista de tabs al recibir `on_reorder(from, to)`. Pura y testeable.
+pub fn reorder<T>(items: &mut Vec<T>, from: usize, to: usize) {
+    if from >= items.len() || to >= items.len() || from == to {
+        return;
+    }
+    let it = items.remove(from);
+    items.insert(to, it);
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn step_tab_envuelve() {
+        assert_eq!(step_tab(4, 0, 1), 1);
+        assert_eq!(step_tab(4, 3, 1), 0);
+        assert_eq!(step_tab(4, 0, -1), 3);
+        assert_eq!(step_tab(0, 0, 1), 0);
+    }
+
+    #[test]
+    fn edge_tab_home_end() {
+        assert_eq!(edge_tab(4, false), 0);
+        assert_eq!(edge_tab(4, true), 3);
+        assert_eq!(edge_tab(0, true), 0);
+    }
+
+    #[test]
+    fn intrinsic_width_respeta_piso_y_hueco_de_cierre() {
+        // Label corto → piso mínimo.
+        let w = tab_intrinsic_width("io", None, false);
+        assert!(w >= DEFAULT_MIN_TAB_WIDTH);
+        // Cerrable → suma el hueco del ×.
+        let wc = tab_intrinsic_width("io", None, true);
+        assert!((wc - (w + CLOSE_W)).abs() < 1e-3);
+        // Ancho fijo se respeta (+ cierre).
+        assert_eq!(tab_intrinsic_width("x", Some(80.0), false), 80.0);
+        assert_eq!(tab_intrinsic_width("x", Some(80.0), true), 80.0 + CLOSE_W);
+    }
+
+    #[test]
+    fn strip_width_suma_anchos_y_gaps() {
+        let labels = vec!["a".to_string(), "b".to_string(), "c".to_string()];
+        let expected: f32 = labels.iter().map(|l| tab_intrinsic_width(l, Some(100.0), false)).sum::<f32>()
+            + TAB_GAP * 2.0;
+        assert_eq!(strip_width(&labels, Some(100.0), false), expected);
+        assert_eq!(strip_width(&[], None, false), 0.0);
+    }
+
+    #[test]
+    fn clamp_strip_offset_no_pasa_del_maximo() {
+        // content 500, viewport 300 → max 200.
+        assert_eq!(clamp_strip_offset(250.0, 500.0, 300.0), 200.0);
+        assert_eq!(clamp_strip_offset(-10.0, 500.0, 300.0), 0.0);
+        assert_eq!(clamp_strip_offset(120.0, 500.0, 300.0), 120.0);
+        // Sin overflow (content < viewport) → siempre 0.
+        assert_eq!(clamp_strip_offset(50.0, 200.0, 300.0), 0.0);
+    }
+
+    #[test]
+    fn reorder_mueve_y_desplaza() {
+        let mut v = vec!['a', 'b', 'c', 'd'];
+        reorder(&mut v, 0, 2); // 'a' al índice 2
+        assert_eq!(v, vec!['b', 'c', 'a', 'd']);
+        reorder(&mut v, 3, 0); // 'd' al inicio
+        assert_eq!(v, vec!['d', 'b', 'c', 'a']);
+        // No-ops seguros.
+        reorder(&mut v, 1, 1);
+        reorder(&mut v, 9, 0);
+        assert_eq!(v, vec!['d', 'b', 'c', 'a']);
+    }
+}
diff --git a/widgets/terminal/Cargo.toml b/widgets/terminal/Cargo.toml
index 7c1e933..9f4b2ef 100644
--- a/widgets/terminal/Cargo.toml
+++ b/widgets/terminal/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-terminal — superficie de terminal infinita y virtualizada (ver 02_ruway/shuma/SDD-TERMINAL.md). Fase 0: store de scrollback append-only (acceso O(1), cap por memoria). Fase 1: virtualización modo línea (sólo se pinta la ventana visible, numeración global + color, scroll propio del widget — costo de render constante a scrollback ilimitado)."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
@@ -16,7 +16,7 @@ llimphi-widget-scroll = { workspace = true }
 # del cell renderer (Fase 4 del SDD-TERMINAL).
 llimphi-hal = { path = "../../llimphi-hal", version = "0.1.0" }
 # Rasterizador de glifos para el atlas GPU del modo grilla (Fase 4 del
-# SDD-TERMINAL). Default features de fontdue alcanzan acá (std host).
+# SDD-TERMINAL). Default features de fontdue alcanzan aquí (std host).
 fontdue = "0.9"
 
 [dev-dependencies]
diff --git a/widgets/terminal/LEEME.md b/widgets/terminal/LEEME.md
new file mode 100644
index 0000000..9352156
--- /dev/null
+++ b/widgets/terminal/LEEME.md
@@ -0,0 +1,31 @@
+# llimphi-widget-terminal
+
+*Read this in English: [README.md](README.md).*
+
+Superficie de terminal **infinita y virtualizada**.
+
+Diseño completo: `02_ruway/shuma/SDD-TERMINAL.md`. El control reemplaza por
+fases al `output_pane` del shell: scrollback ilimitado a costo de render
+**constante** (sólo se pinta la ventana visible), tres modos sobre la misma
+tela (línea IDE / grilla TUI / híbrido) y GPU directo donde paga.
+
+**Fase 0:** la **Capa 0** — el `store::Scrollback`, store de scrollback
+append-only con índice de líneas, cap por memoria y acceso O(1). Puro, sin
+dependencias de UI: el núcleo agnóstico vive aparte de quien lo pinta
+(Regla 2).
+
+**Fase 1:** modo línea — `view::line_surface` materializa sólo las filas
+visibles bajo un `scroll_y` propio del widget (costo de render **constante**
+a scrollback ilimitado), numeración global y color por runs.
+
+**Fase 2 (esto):** la **Capa 1** — el modelo de **bloques** (`blocks`):
+el stream es una secuencia de `blocks::Item`s (chrome de alto fijo que el
+caller pinta + rangos de líneas del store), virtualizados sobre alturas
+mixtas con búsqueda binaria; colapsar un bloque = no emitir su body. Mapea
+el `output_pane` del shell (header/badge/etapas/colapso) sin que el widget
+sepa de comandos (Regla 2). El modo línea de la Fase 1 es el caso de un solo
+`Item::Lines`.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/terminal/README.md b/widgets/terminal/README.md
new file mode 100644
index 0000000..c1eefeb
--- /dev/null
+++ b/widgets/terminal/README.md
@@ -0,0 +1,27 @@
+# llimphi-widget-terminal
+
+**Infinite, virtualized** terminal surface.
+
+Full design: `02_ruway/shuma/SDD-TERMINAL.md`. The control replaces the shell's
+`output_pane` in phases: unlimited scrollback at **constant** render cost (only
+the visible window is painted), three modes over the same cloth (IDE line / TUI
+grid / hybrid) and direct GPU where it pays off.
+
+**Phase 0:** **Layer 0** — `store::Scrollback`, an append-only scrollback store
+with a line index, a memory cap and O(1) access. Pure, with no UI dependencies:
+the agnostic core lives apart from whoever paints it (Rule 2).
+
+**Phase 1:** line mode — `view::line_surface` materializes only the visible rows
+under the widget's own `scroll_y` (**constant** render cost at unlimited
+scrollback), global numbering and colour by runs.
+
+**Phase 2:** **Layer 1** — the **blocks** model (`blocks`): the stream is a
+sequence of `blocks::Item`s (fixed-height chrome painted by the caller + ranges
+of store lines), virtualized over mixed heights with binary search; collapsing a
+block means not emitting its body. It maps the shell's `output_pane`
+(header/badge/stages/collapse) without the widget knowing about commands
+(Rule 2). Phase 1's line mode is the single-`Item::Lines` case.
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/terminal/src/blocks.rs b/widgets/terminal/src/blocks.rs
index a0f1f72..e7cac60 100644
--- a/widgets/terminal/src/blocks.rs
+++ b/widgets/terminal/src/blocks.rs
@@ -27,7 +27,7 @@ use llimphi_ui::{DragPhase, PaintRect, View};
 use llimphi_widget_scroll::{max_offset, thumb_geometry, DEFAULT_LINE_PX};
 
 use crate::store::Scrollback;
-use crate::select::{selection_rects, SelectionRange};
+use crate::select::{caret_rect, selection_rects, Point, SelectionRange};
 use crate::view::{LineStyle, TermMetrics, TermPalette};
 
 /// Ancho de la barra de scroll, en px.
@@ -35,20 +35,75 @@ const BAR_WIDTH: f32 = 10.0;
 /// Alto mínimo del thumb, en px (para que no desaparezca con scrollback enorme).
 const MIN_THUMB: f32 = 28.0;
 
+/// Cómo obtener la `View` de un chrome. El widget la pide **sólo si va a
+/// pintarla**, así que un item fuera del viewport no cuesta más que su alto.
+///
+/// [`Chrome::hecha`] envuelve una vista ya construida (para chromes baratos:
+/// un header suelto, un badge). [`Chrome::perezosa`] toma el constructor y
+/// difiere todo el trabajo. La diferencia importa cuando el chrome no es un
+/// rótulo sino una tabla de cientos de filas y hay cientos de bloques: ahí lo
+/// eager arma —y tira— decenas de miles de nodos por frame.
+pub struct Chrome<'a, Msg>(Box<dyn FnOnce() -> View<Msg> + 'a>);
+
+impl<'a, Msg: 'a> Chrome<'a, Msg> {
+    /// Vista ya construida. Cómoda y correcta cuando armarla es trivial.
+    pub fn hecha(view: View<Msg>) -> Self {
+        Self(Box::new(move || view))
+    }
+
+    /// Constructor diferido: no corre si el item queda fuera del viewport.
+    pub fn perezosa(f: impl FnOnce() -> View<Msg> + 'a) -> Self {
+        Self(Box::new(f))
+    }
+
+    /// Materializa la vista. Consume el chrome — se llama una sola vez, en el
+    /// render, y sólo para los items visibles.
+    fn materializar(self) -> View<Msg> {
+        (self.0)()
+    }
+}
+
 /// Un item del stream virtualizado: chrome opaco (alto fijo, lo pinta el caller)
 /// o un rango de líneas del store (modo línea).
-pub enum Item<Msg> {
+pub enum Item<'a, Msg> {
     /// Chrome de alto fijo provisto por el caller — header de card, fila de
     /// etapas, badge. El widget lo ubica en su `top` y recorta lo que sobra.
-    Chrome { height: f32, view: View<Msg> },
+    /// `sticky`: si es `true`, cuando su posición natural scrollea por encima
+    /// del tope del viewport el widget lo **fija** (pin) al tope —estilo
+    /// sticky-header / SliverList— hasta que el próximo chrome sticky lo empuja
+    /// hacia arriba. Un solo nivel de pin a la vez (el del bloque vigente).
+    Chrome { height: f32, view: Chrome<'a, Msg>, sticky: bool },
     /// Rango `[start, end)` de líneas del store (índices 0-based vigentes).
     Lines { start: usize, end: usize },
 }
 
-impl<Msg> Item<Msg> {
-    /// Chrome de alto fijo (header, etapa, badge…).
+impl<'a, Msg: 'a> Item<'a, Msg> {
+    /// Chrome de alto fijo (header, etapa, badge…). No sticky. Vista **ya
+    /// construida** — para chromes baratos. Si armarlo cuesta, ver
+    /// [`Self::chrome_perezoso`].
     pub fn chrome(height: f32, view: View<Msg>) -> Self {
-        Self::Chrome { height, view }
+        Self::Chrome { height, view: Chrome::hecha(view), sticky: false }
+    }
+
+    /// Como [`Self::chrome`] pero difiriendo la construcción: el closure sólo
+    /// corre si el item cae en el viewport.
+    pub fn chrome_perezoso(height: f32, f: impl FnOnce() -> View<Msg> + 'a) -> Self {
+        Self::Chrome { height, view: Chrome::perezosa(f), sticky: false }
+    }
+
+    /// Chrome de alto fijo que además **se fija al tope** (pin) mientras el
+    /// contenido de su bloque ocupa el viewport — el header del desplegable
+    /// queda visible al scrollear el cuerpo, como el sticky scroll de VSCode /
+    /// los `SliverPersistentHeader` de Flutter.
+    pub fn chrome_sticky(height: f32, view: View<Msg>) -> Self {
+        Self::Chrome { height, view: Chrome::hecha(view), sticky: true }
+    }
+
+    /// [`Self::chrome_sticky`] con construcción diferida. Ojo: un sticky se
+    /// materializa también cuando está **fijado** al tope aunque su posición
+    /// natural haya scrolleado fuera.
+    pub fn chrome_sticky_perezoso(height: f32, f: impl FnOnce() -> View<Msg> + 'a) -> Self {
+        Self::Chrome { height, view: Chrome::perezosa(f), sticky: true }
     }
 
     /// Filas del store `[start, end)`.
@@ -133,14 +188,47 @@ fn visible_rows_in_item(top: f32, nrows: usize, off: f32, vp: f32, row_h: f32) -
     (k0, k1.max(k0))
 }
 
+/// Calcula qué chrome sticky va fijado al tope del viewport y su `y` (coords de
+/// viewport). El pin vigente = el **último** item sticky cuyo `top` natural ya
+/// alcanzó/pasó `off` (el tope del viewport). Si el próximo sticky está a menos
+/// de su alto del tope, empuja al vigente hacia arriba (`y < 0`) para una
+/// transición suave (estilo sticky-header). `None` = ningún header fijado
+/// (ningún sticky scrolleó todavía por encima del tope). **Puro**.
+fn sticky_pin<Msg>(items: &[Item<'_, Msg>], tops: &[f32], off: f32) -> (Option<usize>, f32) {
+    let mut current: Option<(usize, f32)> = None; // (idx, alto)
+    let mut next_sticky_top: Option<f32> = None;
+    for (i, it) in items.iter().enumerate() {
+        if let Item::Chrome { height, sticky: true, .. } = it {
+            if tops[i] <= off + 0.5 {
+                current = Some((i, *height));
+            } else {
+                // `tops` es monótono: el primer sticky por debajo del tope es
+                // el "siguiente" que puede empujar al vigente.
+                next_sticky_top = Some(tops[i]);
+                break;
+            }
+        }
+    }
+    match current {
+        Some((idx, h)) => {
+            let y = match next_sticky_top {
+                Some(nt) => ((nt - off) - h).min(0.0),
+                None => 0.0,
+            };
+            (Some(idx), y)
+        }
+        None => (None, 0.0),
+    }
+}
+
 /// Alto total del contenido de una lista de items, en px.
-pub fn blocks_height<Msg>(items: &[Item<Msg>], row_h: f32) -> f32 {
+pub fn blocks_height<Msg>(items: &[Item<'_, Msg>], row_h: f32) -> f32 {
     items.iter().map(|it| it.height(row_h)).sum()
 }
 
 /// El `scroll_y` que ancla el stream **al fondo** (estilo terminal): el máximo
 /// offset posible dada la altura total de los bloques.
-pub fn blocks_scroll_to_bottom<Msg>(items: &[Item<Msg>], viewport_h: f32, row_h: f32) -> f32 {
+pub fn blocks_scroll_to_bottom<Msg>(items: &[Item<'_, Msg>], viewport_h: f32, row_h: f32) -> f32 {
     max_offset(blocks_height(items, row_h), viewport_h)
 }
 
@@ -151,14 +239,17 @@ pub fn blocks_scroll_to_bottom<Msg>(items: &[Item<Msg>], viewport_h: f32, row_h:
 /// respecto del scrollback y del tamaño de cada body. `on_scroll(delta_px)`,
 /// `line_style` y `measure` son como en [`crate::view::line_surface`].
 ///
-/// El caller construye **todos** los chrome `View`s (los headers de card); sólo
-/// los visibles se pintan (los demás se descartan). Para cientos de bloques —el
-/// caso de un shell— es trivial; las **líneas** (los millones) sí se virtualizan
-/// de raíz.
+/// Los chrome se materializan **sólo si caen en el viewport** (o si son el
+/// sticky fijado): con [`Item::chrome_perezoso`] el caller entrega el
+/// constructor y el widget decide si corre. Antes el caller armaba *todos* los
+/// `View`s y el widget descartaba los invisibles — aceptable mientras un chrome
+/// era un rótulo, ruinoso cuando pasó a ser una tabla de cientos de filas con
+/// cientos de bloques en el stream. Las **líneas** (los millones) se virtualizan
+/// de raíz aparte.
 #[allow(clippy::too_many_arguments)]
 pub fn block_surface<Msg, S, F>(
     store: &Scrollback,
-    items: Vec<Item<Msg>>,
+    items: Vec<Item<'_, Msg>>,
     scroll_y: f32,
     viewport_h: f32,
     metrics: TermMetrics,
@@ -206,6 +297,10 @@ pub struct SelectionConfig<'a, Msg> {
     /// viewport. El caller lo resuelve a una palabra y la selecciona —
     /// paridad con la UX clásica de terminal (double-click select-word).
     pub on_double_click: Option<Arc<dyn Fn(f32, f32, f32, f32) -> Option<Msg> + Send + Sync>>,
+    /// Posición del **caret readonly** (copy-mode). Si está, se pinta una barra
+    /// vertical sólida ahí — no parpadea (el panel es de sólo lectura). `None` =
+    /// sin caret (el modo normal de scroll no lo muestra).
+    pub caret: Option<Point>,
 }
 
 impl<Msg> Default for SelectionConfig<'_, Msg> {
@@ -214,6 +309,7 @@ impl<Msg> Default for SelectionConfig<'_, Msg> {
             range: None,
             on_drag: None,
             on_double_click: None,
+            caret: None,
         }
     }
 }
@@ -225,6 +321,7 @@ impl<'a, Msg> SelectionConfig<'a, Msg> {
             range: Some(range),
             on_drag: None,
             on_double_click: None,
+            caret: None,
         }
     }
 }
@@ -234,7 +331,7 @@ impl<'a, Msg> SelectionConfig<'a, Msg> {
 #[allow(clippy::too_many_arguments)]
 pub fn block_surface_with_selection<Msg, S, F>(
     store: &Scrollback,
-    items: Vec<Item<Msg>>,
+    items: Vec<Item<'_, Msg>>,
     scroll_y: f32,
     viewport_h: f32,
     metrics: TermMetrics,
@@ -261,7 +358,7 @@ where
 #[allow(clippy::too_many_arguments)]
 pub fn block_surface_with_scroll<Msg, S, F>(
     store: &Scrollback,
-    items: Vec<Item<Msg>>,
+    items: Vec<Item<'_, Msg>>,
     scroll_y: f32,
     scroll_x: f32,
     viewport_h: f32,
@@ -284,6 +381,10 @@ where
     let off = scroll_y.clamp(0.0, max_offset(total, viewport_h));
     let (first, last) = visible_items(&tops, total, off, viewport_h);
 
+    // Sticky header (SliverList): qué chrome sticky va fijado al tope y su `y`.
+    // Precomputado contra `&items` antes de consumirlos en la iteración.
+    let (pinned_idx, pinned_y) = sticky_pin(&items, &tops, off);
+
     // Highlight de selección: precomputado contra `&items` antes de consumirlos
     // en la iteración. La pintada va DESPUÉS del texto para que se vea encima
     // (alpha de la paleta) y ANTES del scrollbar.
@@ -293,36 +394,52 @@ where
         }
         _ => Vec::new(),
     };
+    // Caret readonly (copy-mode): barra sólida en su posición, precomputada
+    // contra `&items` antes de consumirlos. Se pinta junto al overlay.
+    let caret_r = selection
+        .caret
+        .and_then(|c| caret_rect(&items, off, viewport_h, metrics, gw, store, c));
 
     // Hijos absolutos en coords de viewport (content - off). Sólo los items
     // visibles y, dentro de un Lines, sólo sus sub-filas visibles.
     let mut children: Vec<View<Msg>> = Vec::new();
+    // Header sticky fijado: se pinta AL FINAL (encima del texto y del overlay
+    // de selección), opaco, para que el cuerpo scrollee por debajo.
+    let mut pinned_node: Option<View<Msg>> = None;
 
     for (i, item) in items.into_iter().enumerate() {
-        if i < first || i >= last {
-            // Fuera de la ventana: el View de chrome se descarta acá (cheap).
+        let is_pinned = Some(i) == pinned_idx;
+        if (i < first || i >= last) && !is_pinned {
+            // Fuera de la ventana (y no es el header fijado): el chrome se
+            // descarta SIN materializarse — su constructor nunca corre.
             continue;
         }
         let top = tops[i];
         match item {
-            Item::Chrome { height, view } => {
-                children.push(
-                    View::new(Style {
-                        position: Position::Absolute,
-                        inset: Rect {
-                            top: length(top - off),
-                            left: length(0.0_f32),
-                            right: length(0.0_f32),
-                            bottom: auto(),
-                        },
-                        size: Size {
-                            width: percent(1.0_f32),
-                            height: length(height),
-                        },
-                        ..Default::default()
-                    })
-                    .children(vec![view]),
-                );
+            Item::Chrome { height, view, .. } => {
+                // Un header fijado se ancla a `pinned_y` (≈ tope del viewport);
+                // el resto, a su posición natural `top - off`.
+                let y = if is_pinned { pinned_y } else { top - off };
+                let node = View::new(Style {
+                    position: Position::Absolute,
+                    inset: Rect {
+                        top: length(y),
+                        left: length(0.0_f32),
+                        right: length(0.0_f32),
+                        bottom: auto(),
+                    },
+                    size: Size {
+                        width: percent(1.0_f32),
+                        height: length(height),
+                    },
+                    ..Default::default()
+                })
+                .children(vec![view.materializar()]);
+                if is_pinned {
+                    pinned_node = Some(node);
+                } else {
+                    children.push(node);
+                }
             }
             Item::Lines { start, end } => {
                 let nrows = end.saturating_sub(start);
@@ -361,6 +478,16 @@ where
     for r in &sel_rects {
         children.push(selection_overlay_rect::<Msg>(*r, palette.bg_selection));
     }
+    // Caret readonly: barra sólida (color de texto pleno) encima del overlay.
+    if let Some(r) = caret_r {
+        children.push(selection_overlay_rect::<Msg>(r, palette.fg_text));
+    }
+
+    // Header sticky fijado — encima del cuerpo y del overlay de selección
+    // (el header es chrome opaco, no seleccionable), debajo del scrollbar.
+    if let Some(node) = pinned_node {
+        children.push(node);
+    }
 
     let on_wheel = Arc::new(on_scroll);
     if max_offset(total, viewport_h) > 0.0 {
@@ -666,7 +793,7 @@ mod tests {
 
     const ROW: f32 = 18.0;
 
-    fn lines<Msg>(n: usize) -> Item<Msg> {
+    fn lines<'a, Msg: 'a>(n: usize) -> Item<'a, Msg> {
         Item::lines(0, n)
     }
 
@@ -721,7 +848,7 @@ mod tests {
 
     #[test]
     fn blocks_height_and_bottom() {
-        let items: Vec<Item<()>> = vec![
+        let items: Vec<Item<'_, ()>> = vec![
             Item::chrome(30.0, View::new(Style::default())),
             lines(10),
             Item::chrome(30.0, View::new(Style::default())),
@@ -776,6 +903,56 @@ mod tests {
         assert_eq!(line_top_in_content(&items, 16.0, 99), None);
     }
 
+    #[test]
+    fn sticky_pin_fija_el_header_vigente() {
+        // [Chrome-sticky(20), Lines(0..10), Chrome-sticky(20), Lines(10..20)]
+        // Bloque A: header en top 0, cuerpo 20..200. Bloque B: header en 200,
+        // cuerpo 220..400. row_h=18 → 10 filas = 180 px.
+        let items: Vec<Item<'_, ()>> = vec![
+            Item::chrome_sticky(20.0, View::new(Style::default())),
+            Item::lines(0, 10),
+            Item::chrome_sticky(20.0, View::new(Style::default())),
+            Item::lines(10, 20),
+        ];
+        let heights: Vec<f32> = items.iter().map(|it| it.height(ROW)).collect();
+        let (tops, _total) = item_tops(&heights);
+        // tops = [0, 20, 200, 220].
+        assert_eq!(tops, vec![0.0, 20.0, 200.0, 220.0]);
+
+        // Sin scroll: el header A (top 0) ya está en el tope → fijado en y=0.
+        let (idx, y) = sticky_pin(&items, &tops, 0.0);
+        assert_eq!(idx, Some(0));
+        assert_eq!(y, 0.0);
+
+        // Scrolleado dentro del cuerpo de A (off=100): A sigue fijado, B (top
+        // 200) todavía lejos → y=0.
+        let (idx, y) = sticky_pin(&items, &tops, 100.0);
+        assert_eq!(idx, Some(0));
+        assert_eq!(y, 0.0);
+
+        // Transición: off=190 → B (top 200) a 10 px del tope, menos que su
+        // alto (20) → empuja a A hacia arriba: y = (200-190) - 20 = -10.
+        let (idx, y) = sticky_pin(&items, &tops, 190.0);
+        assert_eq!(idx, Some(0));
+        assert_eq!(y, -10.0);
+
+        // off=200: B ya alcanzó el tope → pasa a ser el vigente, fijado en 0.
+        let (idx, y) = sticky_pin(&items, &tops, 200.0);
+        assert_eq!(idx, Some(2));
+        assert_eq!(y, 0.0);
+    }
+
+    #[test]
+    fn sticky_pin_none_sin_sticky() {
+        let items: Vec<Item<'_, ()>> = vec![
+            Item::chrome(20.0, View::new(Style::default())),
+            Item::lines(0, 10),
+        ];
+        let heights: Vec<f32> = items.iter().map(|it| it.height(ROW)).collect();
+        let (tops, _t) = item_tops(&heights);
+        assert_eq!(sticky_pin(&items, &tops, 100.0), (None, 0.0));
+    }
+
     #[test]
     fn gutter_grows_with_line_count() {
         let m = TermMetrics::for_font_size(13.0);
diff --git a/widgets/terminal/src/cell_pipeline.rs b/widgets/terminal/src/cell_pipeline.rs
index ae16d0d..d284609 100644
--- a/widgets/terminal/src/cell_pipeline.rs
+++ b/widgets/terminal/src/cell_pipeline.rs
@@ -3,7 +3,7 @@
 //! Define las **estructuras POD** (instance + uniforms), el **shader WGSL**
 //! y el **pipeline wgpu** (`CellPipeline`) que las consume. El wireado al
 //! `generic_grid_panel` vía `gpu_paint_with` va en el commit siguiente —
-//! acá ya se valida que el shader compila en un device headless.
+//! aquí ya se valida que el shader compila en un device headless.
 //!
 //! ## Layouts
 //!
@@ -475,7 +475,7 @@ mod tests {
 
     #[test]
     fn cell_instance_size_es_32_bytes() {
-        // El pipeline asume `array_stride = 32`; un cambio acá rompería el
+        // El pipeline asume `array_stride = 32`; un cambio aquí rompería el
         // vertex layout silenciosamente. Tener el chequeo en test fija el
         // contrato.
         assert_eq!(CellInstance::SIZE, 32);
diff --git a/widgets/terminal/src/find.rs b/widgets/terminal/src/find.rs
index 5109c61..a1f62bc 100644
--- a/widgets/terminal/src/find.rs
+++ b/widgets/terminal/src/find.rs
@@ -68,7 +68,7 @@ pub fn find_matches(store: &Scrollback, query: &str, opts: FindOpts) -> Vec<Find
             out.push(FindMatch { line, start, end });
             // Avance no-superposición: una ocurrencia consume su rango, la
             // siguiente arranca DESPUÉS. Si la query es vacía no llegamos
-            // acá (ya filtrado arriba), así que `end > start` siempre.
+            // aquí (ya filtrado arriba), así que `end > start` siempre.
             cursor = end;
         }
     }
diff --git a/widgets/terminal/src/lib.rs b/widgets/terminal/src/lib.rs
index 44067ab..b601883 100644
--- a/widgets/terminal/src/lib.rs
+++ b/widgets/terminal/src/lib.rs
@@ -43,7 +43,10 @@ pub use cell_pipeline::{
     instances_to_bytes, pack_rgba, CellInstance, CellPipeline, CellUniforms, CELL_WGSL,
 };
 pub use glyph_atlas::{DirtyRect, GlyphAtlas, GlyphSlot};
-pub use select::{point_at, point_at_geo, selection_rects, HighlightRect, Point, SelectionRange};
+pub use select::{
+    caret_rect, caret_reveal_scroll, point_at, point_at_geo, selection_rects, HighlightRect,
+    Motion, Point, SelectionRange, CARET_W,
+};
 pub use store::{Scrollback, SpillStore};
 pub use view::{
     content_height, line_surface, scroll_to_bottom, visible_window, LineStyle, TermMetrics,
diff --git a/widgets/terminal/src/select.rs b/widgets/terminal/src/select.rs
index 84e7f31..64e2a83 100644
--- a/widgets/terminal/src/select.rs
+++ b/widgets/terminal/src/select.rs
@@ -172,7 +172,7 @@ fn clamp_char_boundary(text: &str, col: usize) -> usize {
 /// asume 1 cell por char (CJK doble queda fuera del MVP). Si el click cae
 /// más allá del fin del texto, snapea al fin.
 pub fn point_at<Msg>(
-    items: &[Item<Msg>],
+    items: &[Item<'_, Msg>],
     scroll_y: f32,
     viewport_h: f32,
     metrics: TermMetrics,
@@ -278,7 +278,7 @@ pub struct HighlightRect {
 /// en **columnas visuales** (chars contados, mono = 1 cell por char). CJK
 /// ancho doble queda fuera del MVP — emite rects de 1 cell por char.
 pub fn selection_rects<Msg>(
-    items: &[Item<Msg>],
+    items: &[Item<'_, Msg>],
     scroll_y: f32,
     viewport_h: f32,
     metrics: TermMetrics,
@@ -344,6 +344,289 @@ pub fn selection_rects<Msg>(
     out
 }
 
+/// Ancho en px del caret readonly (barra vertical sólida). No parpadea: el
+/// panel es de sólo lectura, así que el caret marca la posición sin titilar.
+pub const CARET_W: f32 = 2.0;
+
+/// Un movimiento del caret readonly (copy-mode del panel de output). El caret
+/// **es** el `head` de la selección: extenderlo con Shift mantiene el `anchor`,
+/// moverlo sin Shift lo colapsa.
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Motion {
+    CharLeft,
+    CharRight,
+    WordLeft,
+    WordRight,
+    LineHome,
+    LineEnd,
+    LineUp,
+    LineDown,
+    /// Sube `n` filas (medio/una página).
+    PageUp(usize),
+    /// Baja `n` filas.
+    PageDown(usize),
+    DocTop,
+    DocBottom,
+}
+
+impl SelectionRange {
+    /// Mueve el caret (`head`) según `motion` sobre `store`. Con `extend` = true
+    /// (Shift) mantiene el `anchor` y la selección crece/encoge; con `extend` =
+    /// false colapsa (`anchor = head`). Todo clampeado a los límites del store y
+    /// a boundaries UTF-8 — nunca deja `col` a media codepoint ni `line` fuera
+    /// de rango.
+    pub fn move_caret(&mut self, store: &Scrollback, motion: Motion, extend: bool) {
+        let h = move_point(store, self.head, motion);
+        self.head = h;
+        if !extend {
+            self.anchor = h;
+        }
+    }
+}
+
+/// Resuelve la nueva posición del caret aplicando `motion` a `p`. **Puro**.
+fn move_point(store: &Scrollback, p: Point, motion: Motion) -> Point {
+    let n = store.len();
+    if n == 0 {
+        return Point::new(0, 0);
+    }
+    let last = n - 1;
+    let line = p.line.min(last);
+    let text = store.line(line).unwrap_or("");
+    let col = clamp_char_boundary(text, p.col);
+    let line_len = |l: usize| store.line(l).map(|t| t.len()).unwrap_or(0);
+    match motion {
+        Motion::CharLeft => {
+            if col > 0 {
+                Point::new(line, prev_boundary(text, col))
+            } else if line > 0 {
+                Point::new(line - 1, line_len(line - 1))
+            } else {
+                Point::new(0, 0)
+            }
+        }
+        Motion::CharRight => {
+            if col < text.len() {
+                Point::new(line, next_boundary(text, col))
+            } else if line < last {
+                Point::new(line + 1, 0)
+            } else {
+                Point::new(line, text.len())
+            }
+        }
+        Motion::WordLeft => {
+            if col > 0 {
+                Point::new(line, prev_word(text, col))
+            } else if line > 0 {
+                Point::new(line - 1, line_len(line - 1))
+            } else {
+                Point::new(0, 0)
+            }
+        }
+        Motion::WordRight => {
+            if col < text.len() {
+                Point::new(line, next_word(text, col))
+            } else if line < last {
+                Point::new(line + 1, 0)
+            } else {
+                Point::new(line, text.len())
+            }
+        }
+        Motion::LineHome => Point::new(line, 0),
+        Motion::LineEnd => Point::new(line, text.len()),
+        Motion::LineUp => {
+            if line > 0 {
+                snap_col(store, line - 1, col_visual(text, col))
+            } else {
+                Point::new(0, 0)
+            }
+        }
+        Motion::LineDown => {
+            if line < last {
+                snap_col(store, line + 1, col_visual(text, col))
+            } else {
+                Point::new(line, text.len())
+            }
+        }
+        Motion::PageUp(k) => snap_col(store, line.saturating_sub(k), col_visual(text, col)),
+        Motion::PageDown(k) => snap_col(store, (line + k).min(last), col_visual(text, col)),
+        Motion::DocTop => Point::new(0, 0),
+        Motion::DocBottom => Point::new(last, line_len(last)),
+    }
+}
+
+/// Boundary UTF-8 inmediatamente a la izquierda de `col` (`col` ya clampeada).
+fn prev_boundary(text: &str, col: usize) -> usize {
+    let mut c = col.min(text.len());
+    if c == 0 {
+        return 0;
+    }
+    c -= 1;
+    while c > 0 && !text.is_char_boundary(c) {
+        c -= 1;
+    }
+    c
+}
+
+/// Boundary UTF-8 inmediatamente a la derecha de `col`.
+fn next_boundary(text: &str, col: usize) -> usize {
+    let mut c = (col + 1).min(text.len());
+    while c < text.len() && !text.is_char_boundary(c) {
+        c += 1;
+    }
+    c
+}
+
+/// Columna **visual** (nº de chars antes de `col`) — para preservar la columna
+/// al subir/bajar de línea (mono = 1 celda por char).
+fn col_visual(text: &str, col: usize) -> usize {
+    let c = clamp_char_boundary(text, col);
+    text[..c].chars().count()
+}
+
+/// Convierte una columna visual a byte-col en la línea `line`, clampeada al fin.
+fn snap_col(store: &Scrollback, line: usize, vis: usize) -> Point {
+    let text = store.line(line).unwrap_or("");
+    let mut chars = 0;
+    for (b, _) in text.char_indices() {
+        if chars == vis {
+            return Point::new(line, b);
+        }
+        chars += 1;
+    }
+    Point::new(line, text.len())
+}
+
+/// Char de palabra: alfanumérico o `_`. Puntuación y espacio son separadores
+/// (semántica "WORD" de vim — apta para paths y símbolos del terminal).
+fn is_word(c: char) -> bool {
+    c.is_alphanumeric() || c == '_'
+}
+
+/// Byte-col del inicio de la palabra siguiente a `col` dentro de `text`.
+fn next_word(text: &str, col: usize) -> usize {
+    let cols: Vec<(usize, char)> = text.char_indices().collect();
+    let start_ci = cols.iter().position(|(b, _)| *b >= col).unwrap_or(cols.len());
+    if start_ci >= cols.len() {
+        return text.len();
+    }
+    let mut i = start_ci;
+    let cur = is_word(cols[i].1);
+    while i < cols.len() && is_word(cols[i].1) == cur {
+        i += 1;
+    }
+    while i < cols.len() && !is_word(cols[i].1) {
+        i += 1;
+    }
+    if i >= cols.len() {
+        text.len()
+    } else {
+        cols[i].0
+    }
+}
+
+/// Byte-col del inicio de la palabra anterior a `col` dentro de `text`.
+fn prev_word(text: &str, col: usize) -> usize {
+    let cols: Vec<(usize, char)> = text.char_indices().collect();
+    let col = clamp_char_boundary(text, col);
+    let mut i = cols.iter().take_while(|(b, _)| *b < col).count();
+    if i == 0 {
+        return 0;
+    }
+    i -= 1;
+    while i > 0 && !is_word(cols[i].1) {
+        i -= 1;
+    }
+    while i > 0 && is_word(cols[i - 1].1) {
+        i -= 1;
+    }
+    cols[i].0
+}
+
+/// Rectángulo del caret readonly — barra vertical sólida de [`CARET_W`] px en
+/// la posición `caret` (línea + col en bytes). Coords **relativas al viewport**
+/// (scroll descontado). `None` si la línea del caret no cae en un `Item::Lines`
+/// visible. **Puro**, hermano de [`selection_rects`].
+pub fn caret_rect<Msg>(
+    items: &[Item<'_, Msg>],
+    scroll_y: f32,
+    viewport_h: f32,
+    metrics: TermMetrics,
+    gutter_w: f32,
+    store: &Scrollback,
+    caret: Point,
+) -> Option<HighlightRect> {
+    if viewport_h <= 0.0 || metrics.line_height <= 0.0 {
+        return None;
+    }
+    let row_h = metrics.line_height;
+    let char_w = metrics.char_width.max(0.5);
+    let mut item_top = 0.0_f32;
+    for it in items {
+        let item_h = it.height(row_h);
+        if let Item::Lines { start, end } = it {
+            if caret.line >= *start && caret.line < *end {
+                let k = caret.line - start;
+                let row_y = item_top + k as f32 * row_h - scroll_y;
+                if row_y + row_h < 0.0 || row_y > viewport_h {
+                    return None;
+                }
+                let text = store.line(caret.line).unwrap_or("");
+                let cb = clamp_char_boundary(text, caret.col);
+                let vis = text[..cb].chars().count() as f32;
+                let text_x0 = gutter_w + crate::blocks::TEXT_LEFT_PADDING_PX;
+                return Some(HighlightRect {
+                    x: text_x0 + vis * char_w,
+                    y: row_y,
+                    w: CARET_W,
+                    h: row_h,
+                });
+            }
+        }
+        item_top += item_h;
+    }
+    None
+}
+
+/// Dado el layout (`items_geo`), el `scroll_y` actual y la línea del caret,
+/// devuelve `(scroll_y_nuevo, overflow)`: el desplazamiento mínimo que deja la
+/// línea del caret **visible** dentro del viewport (sube o baja lo justo), y el
+/// overflow total (para que el caller lo reconvierta a su métrica de scroll).
+/// **Puro** — no pinta ni toca estado. Si el caret no cae en ninguna línea,
+/// devuelve el `scroll_y` clampeado sin cambios.
+pub fn caret_reveal_scroll(
+    items: &[ItemGeo],
+    scroll_y: f32,
+    viewport_h: f32,
+    metrics: TermMetrics,
+    caret_line: usize,
+) -> (f32, f32) {
+    let row_h = metrics.line_height.max(1.0);
+    let mut item_top = 0.0_f32;
+    let mut caret_y = None;
+    for it in items {
+        let h = it.height(row_h);
+        if let ItemGeo::Lines(start, end) = it {
+            if caret_line >= *start && caret_line < *end {
+                caret_y = Some(item_top + (caret_line - *start) as f32 * row_h);
+            }
+        }
+        item_top += h;
+    }
+    let overflow = (item_top - viewport_h).max(0.0);
+    let Some(cy) = caret_y else {
+        return (scroll_y.clamp(0.0, overflow), overflow);
+    };
+    let mut sy = scroll_y.clamp(0.0, overflow);
+    if cy < sy {
+        sy = cy;
+    }
+    if cy + row_h > sy + viewport_h {
+        sy = cy + row_h - viewport_h;
+    }
+    (sy.clamp(0.0, overflow), overflow)
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;
@@ -486,7 +769,7 @@ mod tests {
     }
 
     fn rects<Msg>(
-        items: &[Item<Msg>],
+        items: &[Item<'_, Msg>],
         scroll_y: f32,
         viewport_h: f32,
         gutter_w: f32,
@@ -502,7 +785,7 @@ mod tests {
     }
 
     fn point(
-        items: &[Item<()>],
+        items: &[Item<'_, ()>],
         scroll_y: f32,
         gutter_w: f32,
         store: &Scrollback,
@@ -520,7 +803,7 @@ mod tests {
     #[test]
     fn point_at_resuelve_linea_y_columna_para_un_click_simple() {
         let store = store_of(&["abcdef", "ghijkl"]);
-        let items: Vec<Item<()>> = vec![Item::lines(0, 2)];
+        let items: Vec<Item<'_, ()>> = vec![Item::lines(0, 2)];
         // Click en línea 1 (y = 20 → fila 1 con row_h=16), col visual = (50-30)/8 = 2.
         let p = point(&items, 0.0, 30.0, &store, 50.0, 20.0).unwrap();
         assert_eq!(p, Point::new(1, 2));
@@ -530,7 +813,7 @@ mod tests {
     fn point_at_clampea_click_fuera_del_texto_al_fin_de_linea() {
         // Línea de 4 chars, click muy a la derecha → snap al fin (col 4).
         let store = store_of(&["abcd"]);
-        let items: Vec<Item<()>> = vec![Item::lines(0, 1)];
+        let items: Vec<Item<'_, ()>> = vec![Item::lines(0, 1)];
         let p = point(&items, 0.0, 30.0, &store, 1000.0, 5.0).unwrap();
         assert_eq!(p, Point::new(0, 4));
     }
@@ -539,7 +822,7 @@ mod tests {
     fn point_at_en_el_gutter_cae_a_col_0() {
         // Click dentro del gutter (lx < gutter_w) → col visual = 0 → byte col = 0.
         let store = store_of(&["xyz"]);
-        let items: Vec<Item<()>> = vec![Item::lines(0, 1)];
+        let items: Vec<Item<'_, ()>> = vec![Item::lines(0, 1)];
         let p = point(&items, 0.0, 30.0, &store, 10.0, 5.0).unwrap();
         assert_eq!(p, Point::new(0, 0));
     }
@@ -549,7 +832,7 @@ mod tests {
         // Item 0 = chrome (alto 24); item 1 = 2 líneas. Click en y=10 cae en chrome.
         let store = store_of(&["aa", "bb"]);
         let chrome_view: llimphi_ui::View<()> = llimphi_ui::View::new(Default::default());
-        let items: Vec<Item<()>> = vec![Item::chrome(24.0, chrome_view), Item::lines(0, 2)];
+        let items: Vec<Item<'_, ()>> = vec![Item::chrome(24.0, chrome_view), Item::lines(0, 2)];
         assert_eq!(point(&items, 0.0, 30.0, &store, 50.0, 10.0), None);
         // y > total: fuera del stream → None.
         assert_eq!(point(&items, 0.0, 30.0, &store, 50.0, 1000.0), None);
@@ -561,7 +844,7 @@ mod tests {
         // floor((800+8)/16) = 50.
         let lines: Vec<&str> = (0..100).map(|_| "ab").collect();
         let store = store_of(&lines);
-        let items: Vec<Item<()>> = vec![Item::lines(0, 100)];
+        let items: Vec<Item<'_, ()>> = vec![Item::lines(0, 100)];
         let p = point(&items, 800.0, 30.0, &store, 30.0, 8.0).unwrap();
         assert_eq!(p, Point::new(50, 0));
     }
@@ -570,7 +853,7 @@ mod tests {
     fn point_at_convierte_visual_a_byte_para_utf8() {
         // "héllo": vis 0='h', vis 1='é' (2 bytes), vis 2='l' (byte 3), vis 3='l' (byte 4).
         let store = store_of(&["héllo"]);
-        let items: Vec<Item<()>> = vec![Item::lines(0, 1)];
+        let items: Vec<Item<'_, ()>> = vec![Item::lines(0, 1)];
         // Click en vis col 2 (lx = 30 + 4 + 2*8 = 50) — el +4 es
         // TEXT_LEFT_PADDING_PX → byte col 3.
         let p = point(&items, 0.0, 30.0, &store, 50.0, 5.0).unwrap();
@@ -580,7 +863,7 @@ mod tests {
     #[test]
     fn rects_de_seleccion_vacia_son_vacio() {
         let store = store_of(&["abc"]);
-        let items: Vec<Item<()>> = vec![Item::lines(0, 1)];
+        let items: Vec<Item<'_, ()>> = vec![Item::lines(0, 1)];
         let sel = SelectionRange::collapsed(Point::new(0, 1));
         assert_eq!(rects(&items, 0.0, 100.0, 30.0, &store, &sel), Vec::new());
     }
@@ -590,7 +873,7 @@ mod tests {
         // Línea 0 entera (3 chars). x = gutter + TEXT_LEFT_PADDING (4) + 0,
         // w = 3 * char_w. El +4 es el padding interno del text_row.
         let store = store_of(&["abc"]);
-        let items: Vec<Item<()>> = vec![Item::lines(0, 1)];
+        let items: Vec<Item<'_, ()>> = vec![Item::lines(0, 1)];
         let sel = SelectionRange {
             anchor: Point::new(0, 0),
             head: Point::new(0, 3),
@@ -608,7 +891,7 @@ mod tests {
     fn rect_multi_line_emite_uno_por_renglon() {
         // 3 líneas, selección abarca las 3 (primera/última recortadas).
         let store = store_of(&["alpha", "beta", "gamma"]);
-        let items: Vec<Item<()>> = vec![Item::lines(0, 3)];
+        let items: Vec<Item<'_, ()>> = vec![Item::lines(0, 3)];
         let sel = SelectionRange {
             anchor: Point::new(0, 2), // "pha"
             head: Point::new(2, 3),   // "gam"
@@ -631,7 +914,7 @@ mod tests {
         // 100 líneas, viewport 32 px (=2 filas), scroll a la mitad → sólo 2-3 rects.
         let lines: Vec<&str> = (0..100).map(|_| "row").collect();
         let store = store_of(&lines);
-        let items: Vec<Item<()>> = vec![Item::lines(0, 100)];
+        let items: Vec<Item<'_, ()>> = vec![Item::lines(0, 100)];
         // Selección sobre TODAS las líneas, pero sólo 2-3 entran al viewport.
         let sel = SelectionRange {
             anchor: Point::new(0, 0),
@@ -650,7 +933,7 @@ mod tests {
         // líneas. El chrome no debe aportar rects.
         let store = store_of(&["aa", "bb"]);
         let chrome_view: llimphi_ui::View<()> = llimphi_ui::View::new(Default::default());
-        let items: Vec<Item<()>> = vec![Item::chrome(20.0, chrome_view), Item::lines(0, 2)];
+        let items: Vec<Item<'_, ()>> = vec![Item::chrome(20.0, chrome_view), Item::lines(0, 2)];
         let sel = SelectionRange {
             anchor: Point::new(0, 0),
             head: Point::new(1, 2),
@@ -668,7 +951,7 @@ mod tests {
         // "héllo" — 'é' es 2 bytes, pero 1 char visual. Selección de col 0 a
         // col 3 (byte) → snap a 3 (después de "hé"), 2 chars visuales.
         let store = store_of(&["héllo"]);
-        let items: Vec<Item<()>> = vec![Item::lines(0, 1)];
+        let items: Vec<Item<'_, ()>> = vec![Item::lines(0, 1)];
         let sel = SelectionRange {
             anchor: Point::new(0, 0),
             head: Point::new(0, 3),
@@ -679,11 +962,78 @@ mod tests {
         assert_eq!(r[0].w, 16.0);
     }
 
+    #[test]
+    fn move_caret_char_cruza_lineas_y_colapsa_sin_extend() {
+        let store = store_of(&["ab", "cd"]);
+        let mut sel = SelectionRange::collapsed(Point::new(0, 2)); // fin de "ab"
+        sel.move_caret(&store, Motion::CharRight, false);
+        assert_eq!(sel.head, Point::new(1, 0)); // baja a inicio de "cd"
+        assert!(sel.is_empty()); // colapsó (anchor == head)
+        sel.move_caret(&store, Motion::CharLeft, false);
+        assert_eq!(sel.head, Point::new(0, 2)); // vuelve al fin de "ab"
+    }
+
+    #[test]
+    fn move_caret_extend_mantiene_anchor() {
+        let store = store_of(&["hola mundo"]);
+        let mut sel = SelectionRange::collapsed(Point::new(0, 0));
+        sel.move_caret(&store, Motion::WordRight, true); // extiende hasta "mundo"
+        assert_eq!(sel.anchor, Point::new(0, 0));
+        assert_eq!(sel.head, Point::new(0, 5)); // inicio de "mundo"
+        assert_eq!(sel.slice_text(&store), "hola ");
+    }
+
+    #[test]
+    fn word_motions_saltan_palabra_y_separadores() {
+        let store = store_of(&["the quick brown"]);
+        assert_eq!(next_word("the quick brown", 0), 4); // → "quick"
+        assert_eq!(next_word("the quick brown", 4), 10); // → "brown"
+        assert_eq!(prev_word("the quick brown", 15), 10); // ← "brown"
+        assert_eq!(prev_word("the quick brown", 10), 4); // ← "quick"
+        let _ = store;
+    }
+
+    #[test]
+    fn move_caret_vertical_preserva_columna_visual() {
+        let store = store_of(&["abcdef", "xy", "ghijkl"]);
+        let mut sel = SelectionRange::collapsed(Point::new(0, 4)); // col visual 4
+        sel.move_caret(&store, Motion::LineDown, false);
+        assert_eq!(sel.head, Point::new(1, 2)); // "xy" sólo tiene 2 → clampa al fin
+        sel.move_caret(&store, Motion::LineDown, false);
+        assert_eq!(sel.head, Point::new(2, 2)); // baja preservando la col 2
+    }
+
+    #[test]
+    fn move_caret_doc_edges() {
+        let store = store_of(&["uno", "dos", "tres"]);
+        let mut sel = SelectionRange::collapsed(Point::new(1, 1));
+        sel.move_caret(&store, Motion::DocBottom, false);
+        assert_eq!(sel.head, Point::new(2, 4)); // fin de "tres"
+        sel.move_caret(&store, Motion::DocTop, false);
+        assert_eq!(sel.head, Point::new(0, 0));
+    }
+
+    #[test]
+    fn caret_rect_ubica_la_barra_en_head() {
+        let store = store_of(&["abcdef"]);
+        let items: Vec<Item<'_, ()>> = vec![Item::lines(0, 1)];
+        let metrics = TermMetrics {
+            font_size: 12.0,
+            line_height: 16.0,
+            char_width: 8.0,
+        };
+        // Caret en col 3 → x = 30(gutter) + 4(padding) + 3*8 = 58, w = CARET_W.
+        let r = caret_rect(&items, 0.0, 100.0, metrics, 30.0, &store, Point::new(0, 3)).unwrap();
+        assert_eq!(r.x, 58.0);
+        assert_eq!(r.w, CARET_W);
+        assert_eq!(r.h, 16.0);
+    }
+
     #[test]
     fn slice_text_a_linea_intermedia_omite_las_que_no_existen() {
-        // Si una línea intermedia desaparece (no debería pasar acá pero el
+        // Si una línea intermedia desaparece (no debería pasar aquí pero el
         // store sólo expone `line()`), se omite — no se inserta `\n` extra.
-        // Acá lo cubrimos indirectamente con un store contiguo.
+        // Aquí lo cubrimos indirectamente con un store contiguo.
         let store = store_of(&["aa", "bb", "cc"]);
         let sel = SelectionRange {
             anchor: Point::new(0, 1),
diff --git a/widgets/terminal/src/store.rs b/widgets/terminal/src/store.rs
index 233835a..ebfbb4f 100644
--- a/widgets/terminal/src/store.rs
+++ b/widgets/terminal/src/store.rs
@@ -10,13 +10,13 @@
 //! tiene un **id global estable** (`line_id = dropped + idx`) que sobrevive al
 //! recorte del frente. Eso permite anclar el scroll a un id (no a px desde el
 //! fondo) y preservar la posición de lectura mientras llega output —
-//! exactamente la deuda B del PLAN-OUTPUT, que acá nace resuelta de raíz.
+//! exactamente la deuda B del PLAN-OUTPUT, que aquí nace resuelta de raíz.
 //!
 //! Una línea es **un renglón lógico sin `'\n'`** (el caller lo separa; en shuma
 //! cada `OutputLine` ya es una línea). El store no interpreta el contenido.
 
 /// Límite de memoria por defecto del scrollback: 64 MiB ≈ cientos de miles de
-/// líneas. "Infinito" en la práctica = "acotado por una memoria que elegís".
+/// líneas. "Infinito" en la práctica = "acotado por una memoria que eliges".
 pub const DEFAULT_LIMIT_BYTES: usize = 64 * 1024 * 1024;
 
 /// Persistencia opcional de las líneas que el cap recorta del frente: en vez
@@ -562,7 +562,7 @@ mod tests {
     fn spill_sobrevive_a_clones_del_scrollback() {
         // `Scrollback` es Clone (Pata clona el state del shell); el spill
         // se comparte por Arc, así las dos instancias appendean al MISMO
-        // archivo. Acá comprobamos que el spilled_count se ve desde ambos.
+        // archivo. Aquí comprobamos que el spilled_count se ve desde ambos.
         let dir = tempfile::tempdir().unwrap();
         let path = dir.path().join("spill.log");
         let spill = SpillStore::create(&path).unwrap();
diff --git a/widgets/terminal/src/view.rs b/widgets/terminal/src/view.rs
index cc05b26..14a7256 100644
--- a/widgets/terminal/src/view.rs
+++ b/widgets/terminal/src/view.rs
@@ -1,6 +1,6 @@
 //! Tipos de la superficie + render virtualizado **modo línea** (Capas 1–2).
 //!
-//! Acá viven los tipos compartidos ([`TermMetrics`], [`TermPalette`],
+//! Aquí viven los tipos compartidos ([`TermMetrics`], [`TermPalette`],
 //! [`LineStyle`]) y la matemática pura de la ventana visible de **filas
 //! uniformes** ([`visible_window`]). El render modo línea, [`line_surface`], es
 //! el caso particular —un solo bloque de líneas que cubre todo el store— del
@@ -169,7 +169,7 @@ pub fn scroll_to_bottom(total_rows: usize, viewport_h: f32, row_h: f32) -> f32 {
 /// Calcula la ventana de filas a materializar para un stream **de filas
 /// uniformes** (sin bloques). **Puro** — sin GPU, sin Views.
 ///
-/// `scroll_y` se clampea a `[0, max_offset]` acá mismo (defensa en
+/// `scroll_y` se clampea a `[0, max_offset]` aquí mismo (defensa en
 /// profundidad). La ventana incluye una fila de guarda extra al fondo para
 /// cubrir el renglón parcialmente visible del borde inferior.
 pub fn visible_window(
diff --git a/widgets/text-area/Cargo.toml b/widgets/text-area/Cargo.toml
index a57644c..0d2ebbe 100644
--- a/widgets/text-area/Cargo.toml
+++ b/widgets/text-area/Cargo.toml
@@ -5,9 +5,8 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
-description = "llimphi-widget-text-area — input de texto multilínea para Llimphi: estado plano (String con \\n), apply_key con Enter→\\n + Backspace + caracteres imprimibles, render multilínea con caret bloque al final del último renglón."
+description = "llimphi-widget-text-area — input de texto multilínea para Llimphi: fachada del motor real que vive en llimphi-widget-text-input (módulo area). Mismo EditorState que el single-line: hit-testing 2D, selección a través de líneas, undo/redo, copiar/pegar, IME. Ya NO es el String plano con caret al final (ese plástico se reemplazó)."
 
+repository.workspace = true
 [dependencies]
-llimphi-ui = { workspace = true }
-llimphi-theme = { workspace = true }
+llimphi-widget-text-input = { workspace = true }
diff --git a/widgets/text-area/src/lib.rs b/widgets/text-area/src/lib.rs
index f480c03..42c3ce5 100644
--- a/widgets/text-area/src/lib.rs
+++ b/widgets/text-area/src/lib.rs
@@ -1,261 +1,67 @@
-//! `llimphi-widget-text-area` — input de texto multilínea para Llimphi.
+//! `llimphi-widget-text-area` — input de texto **multilínea**.
 //!
-//! Versión multilínea del [`llimphi-widget-text-input`]. Mismo contrato Elm
-//! (estado en el `Model`, `apply_key` desde el `update`, view con foco),
-//! pero acepta `\n` como contenido válido: Enter inserta salto de línea
-//! en lugar de "submit". El llamador decide cómo commitear (típicamente
-//! Ctrl+Enter o un botón ✓ aparte).
+//! **El motor real vive en [`llimphi_widget_text_input`]** (módulo `area`): el
+//! mismo `EditorState` que el single-line, con hit-testing 2D (renglón + columna
+//! por glifos reales), caret y selección a través de líneas, undo/redo,
+//! copiar/pegar e IME. Este crate es una **fachada** que re-exporta esa
+//! implementación con los nombres del text-area — no hay estado paralelo.
 //!
-//! El render aprovecha que `View::text_aligned` ya hace layout multilínea
-//! vía parley (line wrap por `max_width`, saltos `\n` respetados).
+//! Reemplazó al viejo text-area de `String` plano (Enter→`\n`, Backspace, caret
+//! bloque al final del último renglón, sin posicionar, sin selección): era un
+//! sustituto de plástico del motor que ya existía. Ahora hay **una sola fuente
+//! de verdad**.
 //!
-//! Limitaciones del PMV (heredadas del text-input): sin posicionamiento
-//! del cursor con flechas, sin selección, sin copy/paste, sin IME. El
-//! caret se simula como un bloque sólido al final del texto.
+//! ## Uso
+//!
+//! ```ignore
+//! use llimphi_widget_text_area::{new_state, text_area_view, TextAreaEvent, TextAreaPalette};
+//!
+//! // En el Model: un estado multilínea + un clipboard.
+//! let mut estado = new_state();               // = TextInputState::multiline()
+//! // En view():
+//! text_area_view(&estado, "Escribe…", focado, 6 /*renglones*/, &pal,
+//!     |ev| Msg::Area(ev));
+//! // En update(): estado.handle_area(ev, &mut clipboard);
+//! ```
+//!
+//! Demo ejecutable: `cargo run -p llimphi-widget-text-input --example area_demo`.
 
 #![forbid(unsafe_code)]
 
-use llimphi_ui::llimphi_layout::taffy::{
-    prelude::{length, percent, Size, Style},
-    Rect,
+pub use llimphi_widget_text_input::{
+    text_area_view, Clipboard, MemClipboard, NullClipboard, TextAreaEvent, AREA_LINE_H,
 };
-use llimphi_ui::llimphi_raster::peniko::Color;
-use llimphi_ui::llimphi_text::Alignment;
-use llimphi_ui::{Key, KeyEvent, KeyState, NamedKey, View};
 
-/// Paleta del text-area — mismos slots que el text-input.
-#[derive(Debug, Clone, Copy)]
-pub struct TextAreaPalette {
-    pub bg: Color,
-    pub bg_focus: Color,
-    pub border: Color,
-    pub border_focus: Color,
-    pub fg_text: Color,
-    pub fg_placeholder: Color,
-}
+/// El estado del text-area **es** el del text-input en modo multilínea: mismo
+/// motor, sin wrapper. Crea siempre con [`new_state`] (o
+/// `TextInputState::multiline`) — el `Default`/`new` de `TextInputState` es
+/// single-line y **no** aceptaría saltos de línea.
+pub use llimphi_widget_text_input::TextInputState as TextAreaState;
 
-impl Default for TextAreaPalette {
-    fn default() -> Self {
-        Self::from_theme(&llimphi_theme::Theme::dark())
-    }
-}
+/// La paleta es la misma del text-input (mismos tokens del theme).
+pub use llimphi_widget_text_input::TextInputPalette as TextAreaPalette;
 
-impl TextAreaPalette {
-    pub fn from_theme(t: &llimphi_theme::Theme) -> Self {
-        Self {
-            bg: t.bg_input,
-            bg_focus: t.bg_input_focus,
-            border: t.border,
-            border_focus: t.border_focus,
-            fg_text: t.fg_text,
-            fg_placeholder: t.fg_placeholder,
-        }
-    }
-}
-
-/// Estado del text-area. Vive en el `Model`; `apply_key` se llama desde
-/// el `update` para ediciones por tecla.
-#[derive(Debug, Clone, Default)]
-pub struct TextAreaState {
-    text: String,
-}
-
-impl TextAreaState {
-    pub fn new() -> Self {
-        Self::default()
-    }
-
-    pub fn text(&self) -> &str {
-        &self.text
-    }
-
-    pub fn is_empty(&self) -> bool {
-        self.text.is_empty()
-    }
-
-    pub fn clear(&mut self) {
-        self.text.clear();
-    }
-
-    pub fn set_text(&mut self, s: impl Into<String>) {
-        self.text = s.into();
-    }
-
-    /// Cantidad de líneas (≥ 1, mismo criterio que `str::lines` + 1 si
-    /// el texto termina en `\n`).
-    pub fn line_count(&self) -> usize {
-        if self.text.is_empty() {
-            return 1;
-        }
-        let mut n = self.text.lines().count();
-        if self.text.ends_with('\n') {
-            n += 1;
-        }
-        n.max(1)
-    }
-
-    /// Aplica una tecla al estado. Devuelve `true` si cambió el contenido.
-    ///
-    /// Maneja: Backspace, Enter (inserta `\n`), e inserción de
-    /// caracteres imprimibles vía `event.text`. NO maneja: Tab (lo
-    /// dejamos al caller — típicamente cambio de foco o indent),
-    /// Escape, flechas.
-    pub fn apply_key(&mut self, event: &KeyEvent) -> bool {
-        if event.state != KeyState::Pressed {
-            return false;
-        }
-        match &event.key {
-            Key::Named(NamedKey::Backspace) => self.text.pop().is_some(),
-            Key::Named(NamedKey::Enter) => {
-                self.text.push('\n');
-                true
-            }
-            _ => {
-                let Some(text) = event.text.as_ref() else {
-                    return false;
-                };
-                // Filtramos caracteres de control — el `\n` lo metemos
-                // sólo desde NamedKey::Enter para tener un único path.
-                if text.is_empty() || text.chars().any(|c| c.is_control()) {
-                    return false;
-                }
-                self.text.push_str(text);
-                true
-            }
-        }
-    }
-}
-
-/// Render del text-area. `body_height` es el alto disponible del bloque
-/// (el widget no calcula altura automática; el caller decide). Con foco
-/// se pinta un caret bloque al final del texto.
-pub fn text_area_view<Msg: Clone + 'static>(
-    state: &TextAreaState,
-    placeholder: &str,
-    focused: bool,
-    body_height: f32,
-    palette: &TextAreaPalette,
-    on_focus: Msg,
-) -> View<Msg> {
-    let is_empty = state.is_empty();
-    let display = if is_empty {
-        placeholder.to_string()
-    } else {
-        state.text.clone()
-    };
-    let text_color = if is_empty { palette.fg_placeholder } else { palette.fg_text };
-    let (bg, border) = if focused {
-        (palette.bg_focus, palette.border_focus)
-    } else {
-        (palette.bg, palette.border)
-    };
-
-    let inner = View::new(Style {
-        size: Size {
-            width: percent(1.0_f32),
-            height: length(body_height),
-        },
-        padding: Rect {
-            left: length(6.0_f32),
-            right: length(6.0_f32),
-            top: length(4.0_f32),
-            bottom: length(4.0_f32),
-        },
-        ..Default::default()
-    })
-    .fill(bg)
-    .text_aligned(display, 12.0, text_color, Alignment::Start);
-
-    // Wrapper que pinta el borde como fill del padre (1 px alrededor
-    // del inner gracias al padding del padre).
-    View::new(Style {
-        size: Size {
-            width: percent(1.0_f32),
-            height: length(body_height + 2.0),
-        },
-        padding: Rect {
-            left: length(1.0_f32),
-            right: length(1.0_f32),
-            top: length(1.0_f32),
-            bottom: length(1.0_f32),
-        },
-        ..Default::default()
-    })
-    .fill(border)
-    .on_click(on_focus)
-    .children(vec![inner])
+/// Constructor correcto de un estado de text-area: `EditorState` **multilínea**
+/// (acepta `Enter` como salto de línea). Evita el footgun de `TextAreaState::new`
+/// (que hereda el single-line del text-input).
+pub fn new_state() -> TextAreaState {
+    TextAreaState::multiline()
 }
 
 #[cfg(test)]
 mod tests {
     use super::*;
-    use llimphi_ui::Modifiers;
 
-    fn k(named: NamedKey) -> KeyEvent {
-        KeyEvent {
-            key: Key::Named(named),
-            state: KeyState::Pressed,
-            text: None,
-            modifiers: Modifiers::default(),
-            repeat: false,
-        }
-    }
-
-    fn k_text(s: &str) -> KeyEvent {
-        KeyEvent {
-            key: Key::Character(s.into()),
-            state: KeyState::Pressed,
-            text: Some(s.to_owned()),
-            modifiers: Modifiers::default(),
-            repeat: false,
-        }
+    #[test]
+    fn new_state_es_multilinea() {
+        assert!(new_state().is_multiline());
     }
 
     #[test]
-    fn enter_inserta_salto_de_linea() {
-        let mut s = TextAreaState::new();
-        s.apply_key(&k_text("a"));
-        s.apply_key(&k(NamedKey::Enter));
-        s.apply_key(&k_text("b"));
-        assert_eq!(s.text(), "a\nb");
-        assert_eq!(s.line_count(), 2);
-    }
-
-    #[test]
-    fn backspace_borra_el_salto_y_une_lineas() {
-        let mut s = TextAreaState::new();
-        s.set_text("a\nb");
-        s.apply_key(&k(NamedKey::Backspace));
-        s.apply_key(&k(NamedKey::Backspace));
-        assert_eq!(s.text(), "a");
-    }
-
-    #[test]
-    fn line_count_vacio_es_uno() {
-        let s = TextAreaState::new();
-        assert_eq!(s.line_count(), 1);
-    }
-
-    #[test]
-    fn line_count_cuenta_trailing_newline() {
-        let mut s = TextAreaState::new();
-        s.set_text("a\nb\n");
-        assert_eq!(s.line_count(), 3);
-    }
-
-    #[test]
-    fn caracteres_de_control_se_filtran() {
-        let mut s = TextAreaState::new();
-        s.apply_key(&k_text("\t"));
-        assert!(s.is_empty());
-    }
-
-    #[test]
-    fn set_text_roundtrip() {
-        let mut s = TextAreaState::new();
-        s.set_text("hola\nmundo");
-        assert_eq!(s.text(), "hola\nmundo");
-        s.clear();
-        assert!(s.is_empty());
+    fn acepta_saltos_de_linea() {
+        let mut s = new_state();
+        s.set_text("a\nb\nc");
+        assert_eq!(s.text(), "a\nb\nc");
+        assert_eq!(s.editor().line_count(), 3);
     }
 }
diff --git a/widgets/text-editor-core/Cargo.toml b/widgets/text-editor-core/Cargo.toml
index baccb4a..f13cffb 100644
--- a/widgets/text-editor-core/Cargo.toml
+++ b/widgets/text-editor-core/Cargo.toml
@@ -5,15 +5,28 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-text-editor-core — núcleo agnóstico del editor de código: rope buffer (ropey), cursor + selección, undo/redo, bracket matching, find, diagnostics y syntax highlighting (tree-sitter). Sin dependencias de render — reutilizable en TUI/web/headless. La capa Llimphi (state + view) vive en `llimphi-widget-text-editor`."
 
+repository.workspace = true
 [dependencies]
 ropey = { workspace = true }
-tree-sitter = { workspace = true }
-tree-sitter-rust = { workspace = true }
-tree-sitter-python = { workspace = true }
+# tree-sitter + gramáticas: el runtime y los parsers son C (`lib.c`,
+# `parser.c`) compilados por cc-rs. Por eso viven tras la feature
+# `treesitter` (default-on): sin ella el highlight de Rust/Python degrada
+# a texto plano (WAT sigue, es tokenizer Rust puro) y el crate compila en
+# targets sin toolchain C de la plataforma (cross-compile Mac/Windows
+# desde Linux). En un host nativo (incl. el propio Mac/Windows) la feature
+# está activa por default y se compila todo.
+tree-sitter = { workspace = true, optional = true }
+tree-sitter-rust = { workspace = true, optional = true }
+tree-sitter-python = { workspace = true, optional = true }
 # peniko sólo aporta el tipo de color (peniko::Color) para SyntaxPalette;
 # es un crate de tipos sin GPU — no arrastra wgpu/vello. Versión alineada
 # con la que expone vello 0.7 (ver workspace root).
 peniko = "0.6"
+
+[features]
+default = ["treesitter"]
+# Activa el syntax highlighting con tree-sitter (Rust/Python). Sin ella,
+# esos lenguajes caen a `Plain` y no se arrastra ningún C.
+treesitter = ["dep:tree-sitter", "dep:tree-sitter-rust", "dep:tree-sitter-python"]
diff --git a/widgets/text-editor-core/LEEME.md b/widgets/text-editor-core/LEEME.md
new file mode 100644
index 0000000..d52f2e0
--- /dev/null
+++ b/widgets/text-editor-core/LEEME.md
@@ -0,0 +1,27 @@
+# llimphi-widget-text-editor-core
+
+*Read this in English: [README.md](README.md).*
+
+Núcleo agnóstico del editor de código.
+
+Capas finas y **puras** (sin IO, sin Llimphi, sin GPU) sobre `ropey`:
+
+- `buffer` — wrapper de `Rope` con conversiones (línea, col) ↔ char_offset.
+- `cursor` — `Cursor` + `Selection`; movimiento por char/word/line/page.
+- `ops` — operaciones puras de edición sobre `(Buffer, Cursor) → (Buffer, Cursor)`.
+- `undo` — pila reversible: cada operación se registra como `EditDelta`.
+- `bracket` — matching de paréntesis/llaves/corchetes.
+- `find` — búsqueda incremental sobre el buffer.
+- `diagnostics` — modelo de diagnósticos (errores/warnings) por rango.
+- `clipboard` — abstracción de portapapeles (mem/null) sin tocar el SO.
+- `highlight` — syntax highlighting con tree-sitter (Rust/Python/WAT/Plain).
+
+Único acoplamiento externo: `peniko::Color` en `highlight::SyntaxPalette`
+— un tipo de color, no el stack de render. Eso deja el núcleo reutilizable
+desde un TUI, una mini-REPL, un text-input single-line, un backend web, etc.
+La capa visual (state + view sobre Llimphi) vive en
+`llimphi-widget-text-editor`, que re-exporta todo este núcleo.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/text-editor-core/README.md b/widgets/text-editor-core/README.md
new file mode 100644
index 0000000..92fc6fe
--- /dev/null
+++ b/widgets/text-editor-core/README.md
@@ -0,0 +1,25 @@
+# llimphi-widget-text-editor-core
+
+The agnostic core of the code editor.
+
+Thin, **pure** layers (no IO, no Llimphi, no GPU) over `ropey`:
+
+- `buffer` — a `Rope` wrapper with (line, col) ↔ char_offset conversions.
+- `cursor` — `Cursor` + `Selection`; movement by char/word/line/page.
+- `ops` — pure editing operations over `(Buffer, Cursor) → (Buffer, Cursor)`.
+- `undo` — reversible stack: every operation is recorded as an `EditDelta`.
+- `bracket` — matching of parentheses, braces and brackets.
+- `find` — incremental search over the buffer.
+- `diagnostics` — the model of diagnostics (errors/warnings) by range.
+- `clipboard` — a clipboard abstraction (mem/null) that never touches the OS.
+- `highlight` — syntax highlighting with tree-sitter (Rust/Python/WAT/Plain).
+
+Its only external coupling is `peniko::Color` in `highlight::SyntaxPalette` — a
+colour type, not the render stack. That leaves the core reusable from a TUI, a
+mini-REPL, a single-line text input, a web backend, and so on. The visual layer
+(state + view over Llimphi) lives in `llimphi-widget-text-editor`, which
+re-exports this whole core.
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/text-editor-core/src/cursor.rs b/widgets/text-editor-core/src/cursor.rs
index cf21501..7dc736c 100644
--- a/widgets/text-editor-core/src/cursor.rs
+++ b/widgets/text-editor-core/src/cursor.rs
@@ -13,6 +13,37 @@ fn is_word(c: char) -> bool {
 fn is_ws(c: char) -> bool {
     c.is_whitespace() && c != '\n'
 }
+/// "Hueco" entre palabras para el salto por palabra (Ctrl+←/→): espacios **y
+/// puntuación** (`.` `,` `/` `(` …) cuentan igual, así el caret aterriza en el
+/// arranque de la próxima palabra en vez de frenar en un signo suelto — que es
+/// lo que molestaba. El `\n` NO es hueco: el salto por palabra se detiene en fin
+/// de línea (como antes).
+fn is_gap(c: char) -> bool {
+    c != '\n' && !is_word(c)
+}
+
+/// Clase de un char para la selección por doble-click: una palabra, un
+/// run de espacios, un salto de línea o puntuación suelta. Dos chars de
+/// la misma clase pertenecen a la misma "unidad" seleccionable.
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+enum CharClass {
+    Word,
+    Space,
+    Newline,
+    Punct,
+}
+
+fn classify(c: char) -> CharClass {
+    if c == '\n' {
+        CharClass::Newline
+    } else if is_word(c) {
+        CharClass::Word
+    } else if c.is_whitespace() {
+        CharClass::Space
+    } else {
+        CharClass::Punct
+    }
+}
 
 /// Posición lógica del cursor — (línea, columna en chars).
 #[derive(Debug, Clone, Copy, PartialEq, Eq, PartialOrd, Ord)]
@@ -156,12 +187,23 @@ impl Cursor {
         }
     }
 
-    pub fn move_home(&mut self, _buf: &Buffer, extending: bool) {
+    /// Home "inteligente": el primer Home lleva el caret al primer carácter
+    /// no-blanco de la línea (el inicio real del texto, salteando la
+    /// indentación); un segundo Home —ya parado ahí— va a la columna 0. Es
+    /// el comportamiento de VS Code / Sublime / la mayoría de los editores.
+    pub fn move_home(&mut self, buf: &Buffer, extending: bool) {
         self.set_extending(extending);
-        // Atajo: ir al inicio del primer non-whitespace; segundo Home
-        // iría al 0 — por ahora siempre al 0.
-        self.caret.col = 0;
-        self.desired_col = 0;
+        let line = buf.line(self.caret.line);
+        let indent = line
+            .chars()
+            .take_while(|c| c.is_whitespace() && *c != '\n')
+            .count()
+            .min(buf.line_len_chars(self.caret.line));
+        // Si ya estamos en el primer no-blanco, el toggle va a col 0; si no
+        // (incluida col 0), va al primer no-blanco.
+        let target = if self.caret.col == indent { 0 } else { indent };
+        self.caret.col = target;
+        self.desired_col = target;
     }
 
     pub fn move_end(&mut self, buf: &Buffer, extending: bool) {
@@ -197,12 +239,13 @@ impl Cursor {
 
     // ----- Word movement -----
 
-    /// Movimiento por palabra a la izquierda — salta whitespace, después
-    /// caracteres de palabra (alfanumérico + `_`).
+    /// Movimiento por palabra a la izquierda — salta el hueco (espacios +
+    /// puntuación), después los caracteres de palabra (alfanumérico + `_`). Se
+    /// detiene en fin de línea (`\n` no es hueco).
     pub fn move_word_left(&mut self, buf: &Buffer, extending: bool) {
         self.set_extending(extending);
         let mut off = buf.pos_to_offset(self.caret.line, self.caret.col);
-        while off > 0 && buf.char_at(off - 1).map_or(false, is_ws) {
+        while off > 0 && buf.char_at(off - 1).map_or(false, is_gap) {
             off -= 1;
         }
         while off > 0 && buf.char_at(off - 1).map_or(false, is_word) {
@@ -220,7 +263,7 @@ impl Cursor {
         while off < len && buf.char_at(off).map_or(false, is_word) {
             off += 1;
         }
-        while off < len && buf.char_at(off).map_or(false, is_ws) {
+        while off < len && buf.char_at(off).map_or(false, is_gap) {
             off += 1;
         }
         let (l, c) = buf.offset_to_pos(off);
@@ -228,6 +271,92 @@ impl Cursor {
         self.desired_col = c;
     }
 
+    // ----- Selección por palabra / párrafo (doble / triple click) -----
+
+    /// Selecciona la "palabra" bajo `pos` (doble-click): ancla al inicio y
+    /// caret al fin del run de chars de la misma clase que `pos`. Sobre una
+    /// palabra toma el run alfanumérico; sobre whitespace, el run de
+    /// espacios; sobre puntuación, el run de puntuación. Si el click cae
+    /// justo después de una palabra, prefiere la palabra. No-op de
+    /// selección (sólo caret) si la línea está vacía o estamos al final.
+    pub fn select_word(&mut self, buf: &Buffer, pos: Pos) {
+        let line = pos.line.min(buf.len_lines().saturating_sub(1));
+        let col = pos.col.min(buf.line_len_chars(line));
+        let off = buf.pos_to_offset(line, col);
+        let len = buf.len_chars();
+        let class_at = |o: usize| buf.char_at(o).map(classify);
+
+        // Clase de referencia: el char en `off`; pero si ahí hay algo que no
+        // es palabra y el char anterior sí lo es, preferí la palabra (click
+        // pegado al borde derecho de una palabra).
+        let class = match class_at(off) {
+            Some(CharClass::Word) => Some(CharClass::Word),
+            other => {
+                if off > 0 && class_at(off - 1) == Some(CharClass::Word) {
+                    Some(CharClass::Word)
+                } else {
+                    other.or_else(|| off.checked_sub(1).and_then(class_at))
+                }
+            }
+        };
+        let Some(class) = class else {
+            self.set_caret(buf, Pos::new(line, col));
+            return;
+        };
+        if class == CharClass::Newline {
+            self.set_caret(buf, Pos::new(line, col));
+            return;
+        }
+        let mut start = off;
+        while start > 0 && class_at(start - 1) == Some(class) {
+            start -= 1;
+        }
+        let mut end = off;
+        while end < len && class_at(end) == Some(class) {
+            end += 1;
+        }
+        if start == end {
+            // `off` quedó en el borde derecho del run: incluí el char previo.
+            start = off.saturating_sub(1);
+        }
+        let (sl, sc) = buf.offset_to_pos(start);
+        let (el, ec) = buf.offset_to_pos(end);
+        self.anchor = Some(Pos::new(sl, sc));
+        self.caret = Pos::new(el, ec);
+        self.desired_col = ec;
+    }
+
+    /// Selecciona el párrafo que contiene `pos` (triple-click): bloque de
+    /// líneas no-vacías consecutivas, delimitado por líneas en blanco (las
+    /// que separan átomos con `\n\n`). Ancla al inicio de la primera línea,
+    /// caret al fin de la última. Sobre una línea separadora, selecciona
+    /// sólo esa línea.
+    pub fn select_paragraph(&mut self, buf: &Buffer, pos: Pos) {
+        let n = buf.len_lines();
+        if n == 0 {
+            return;
+        }
+        let line = pos.line.min(n - 1);
+        let is_blank = |l: usize| buf.line(l).trim().is_empty();
+        if is_blank(line) {
+            self.anchor = Some(Pos::new(line, 0));
+            self.caret = Pos::new(line, buf.line_len_chars(line));
+            self.desired_col = self.caret.col;
+            return;
+        }
+        let mut start = line;
+        while start > 0 && !is_blank(start - 1) {
+            start -= 1;
+        }
+        let mut end = line;
+        while end + 1 < n && !is_blank(end + 1) {
+            end += 1;
+        }
+        self.anchor = Some(Pos::new(start, 0));
+        self.caret = Pos::new(end, buf.line_len_chars(end));
+        self.desired_col = self.caret.col;
+    }
+
     // ----- Setters -----
 
     pub fn set_caret(&mut self, buf: &Buffer, pos: Pos) {
@@ -322,4 +451,87 @@ mod tests {
         c.move_doc_start(&b, false);
         assert_eq!(c.caret, Pos::ORIGIN);
     }
+
+    #[test]
+    fn salto_de_palabra_no_frena_en_puntuacion() {
+        // "foo.bar baz" — Ctrl+→ NO debe frenar en el punto: salta de palabra
+        // a palabra (foo → bar → baz), tratando el `.` como hueco.
+        let b = Buffer::from_str("foo.bar baz");
+        let mut c = Cursor::new(); // (0,0), antes de "foo"
+        c.move_word_right(&b, false);
+        assert_eq!(c.caret, Pos::new(0, 4), "esperaba el arranque de 'bar', no el punto (col 3)");
+        c.move_word_right(&b, false);
+        assert_eq!(c.caret, Pos::new(0, 8), "esperaba el arranque de 'baz'");
+    }
+
+    #[test]
+    fn salto_de_palabra_izquierda_tambien_cruza_puntuacion() {
+        let b = Buffer::from_str("hola, mundo");
+        let mut c = Cursor::at(0, 11); // fin de "mundo"
+        c.move_word_left(&b, false);
+        assert_eq!(c.caret, Pos::new(0, 6), "esperaba el arranque de 'mundo'");
+        c.move_word_left(&b, false);
+        // Cruza la coma y el espacio sin frenar en la coma (col 4).
+        assert_eq!(c.caret, Pos::new(0, 0), "esperaba el arranque de 'hola'");
+    }
+
+    #[test]
+    fn salto_de_palabra_se_detiene_en_fin_de_linea() {
+        // El `\n` NO es hueco: un salto por palabra no cruza el renglón.
+        let b = Buffer::from_str("uno\ndos");
+        let mut c = Cursor::new();
+        c.move_word_right(&b, false);
+        assert_eq!(c.caret, Pos::new(0, 3), "se queda en fin de la línea 0, no salta a 'dos'");
+    }
+
+    #[test]
+    fn select_word_toma_la_palabra_completa() {
+        let b = Buffer::from_str("hola mundo cruel");
+        let mut c = Cursor::new();
+        // click en medio de "mundo" (col 7).
+        c.select_word(&b, Pos::new(0, 7));
+        let (s, e) = c.selection_range(&b);
+        assert_eq!(b.slice(s, e), "mundo");
+    }
+
+    #[test]
+    fn select_word_borde_derecho_prefiere_palabra() {
+        let b = Buffer::from_str("hola mundo");
+        let mut c = Cursor::new();
+        // click justo después de la "a" de "hola" (col 4 = el espacio).
+        c.select_word(&b, Pos::new(0, 4));
+        let (s, e) = c.selection_range(&b);
+        assert_eq!(b.slice(s, e), "hola");
+    }
+
+    #[test]
+    fn select_paragraph_entre_lineas_en_blanco() {
+        let b = Buffer::from_str("uno\ndos\n\ntres\ncuatro\n\ncinco");
+        let mut c = Cursor::new();
+        // click en "tres" (línea 3) → párrafo "tres\ncuatro".
+        c.select_paragraph(&b, Pos::new(3, 1));
+        let (s, e) = c.selection_range(&b);
+        assert_eq!(b.slice(s, e), "tres\ncuatro");
+    }
+
+    #[test]
+    fn smart_home_alterna_indent_y_col0() {
+        let b = Buffer::from_str("    hola mundo");
+        let mut c = Cursor::at(0, 9); // en medio del texto
+        c.move_home(&b, false);
+        assert_eq!(c.caret.col, 4); // primer no-blanco
+        c.move_home(&b, false);
+        assert_eq!(c.caret.col, 0); // segundo Home → col 0
+        c.move_home(&b, false);
+        assert_eq!(c.caret.col, 4); // y vuelve al no-blanco
+    }
+
+    #[test]
+    fn select_paragraph_primer_bloque() {
+        let b = Buffer::from_str("uno\ndos\n\ntres");
+        let mut c = Cursor::new();
+        c.select_paragraph(&b, Pos::new(0, 0));
+        let (s, e) = c.selection_range(&b);
+        assert_eq!(b.slice(s, e), "uno\ndos");
+    }
 }
diff --git a/widgets/text-editor-core/src/find.rs b/widgets/text-editor-core/src/find.rs
index 5a97d00..b9dabc2 100644
--- a/widgets/text-editor-core/src/find.rs
+++ b/widgets/text-editor-core/src/find.rs
@@ -95,6 +95,72 @@ fn positions_of(buf: &Buffer, (start, end): (usize, usize)) -> (Pos, Pos) {
     (Pos::new(sl, sc), Pos::new(el, ec))
 }
 
+/// Reemplaza la **próxima** ocurrencia desde el caret por `replacement` y
+/// deja el caret al final del texto insertado. Devuelve el [`EditDelta`]
+/// para la pila de undo, o `None` si no hay ninguna ocurrencia. El
+/// wrap-around es el de [`find_next`].
+pub fn replace_next(
+    buf: &mut Buffer,
+    find: &FindState,
+    cursor: &mut Cursor,
+    replacement: &str,
+) -> Option<crate::ops::EditDelta> {
+    let (start_pos, end_pos) = find_next(buf, find, cursor)?;
+    cursor.anchor = Some(start_pos);
+    cursor.caret = end_pos;
+    Some(crate::ops::replace_selection(buf, cursor, replacement))
+}
+
+/// Reemplaza **todas** las ocurrencias del query por `replacement` en una
+/// sola operación reversible. Devuelve `(delta, n)` con el delta para undo
+/// y la cantidad reemplazada, o `None` si no había ninguna. El reemplazo
+/// es literal (sin grupos/regex).
+pub fn replace_all(
+    buf: &mut Buffer,
+    find: &FindState,
+    cursor: &mut Cursor,
+    replacement: &str,
+) -> Option<(crate::ops::EditDelta, usize)> {
+    let matches = all_matches(buf, find);
+    if matches.is_empty() {
+        return None;
+    }
+    let n = matches.len();
+    // Región mínima que cubre de la primera a la última match: un único
+    // delta atómico (un solo undo deshace todo el reemplazo).
+    let region_start = matches.first().unwrap().0;
+    let region_end = matches.last().unwrap().1;
+    let removed = buf.slice(region_start, region_end);
+
+    // Reconstruimos la región reemplazando cada match, copiando lo de entre
+    // medio tal cual.
+    let mut inserted = String::with_capacity(removed.len());
+    let mut prev_end = region_start;
+    for (s, e) in &matches {
+        inserted.push_str(&buf.slice(prev_end, *s));
+        inserted.push_str(replacement);
+        prev_end = *e;
+    }
+    inserted.push_str(&buf.slice(prev_end, region_end));
+
+    let before = *cursor;
+    buf.delete(region_start, region_end);
+    buf.insert(region_start, &inserted);
+    let new_off = region_start + inserted.chars().count();
+    let (line, col) = buf.offset_to_pos(new_off);
+    cursor.caret = Pos::new(line, col);
+    cursor.desired_col = col;
+    cursor.anchor = None;
+    let delta = crate::ops::EditDelta {
+        start: region_start,
+        removed,
+        inserted,
+        cursor_before: before,
+        cursor_after: *cursor,
+    };
+    Some((delta, n))
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;
@@ -155,6 +221,36 @@ mod tests {
         assert_eq!(a, Pos::new(0, 0));
     }
 
+    #[test]
+    fn replace_next_reemplaza_una() {
+        let mut b = Buffer::from_str("ab cd ab");
+        let f = FindState::with_query("ab");
+        let mut c = Cursor::at(0, 0);
+        replace_next(&mut b, &f, &mut c, "XY");
+        assert_eq!(b.text(), "XY cd ab");
+    }
+
+    #[test]
+    fn replace_all_reemplaza_todas() {
+        let mut b = Buffer::from_str("ab cd ab ef ab");
+        let f = FindState::with_query("ab");
+        let mut c = Cursor::at(0, 0);
+        let (_, n) = replace_all(&mut b, &f, &mut c, "Z").unwrap();
+        assert_eq!(n, 3);
+        assert_eq!(b.text(), "Z cd Z ef Z");
+    }
+
+    #[test]
+    fn replace_all_distinto_largo_y_undo() {
+        let mut b = Buffer::from_str("foo foo");
+        let f = FindState::with_query("foo");
+        let mut c = Cursor::at(0, 0);
+        let (delta, _) = replace_all(&mut b, &f, &mut c, "barbar").unwrap();
+        assert_eq!(b.text(), "barbar barbar");
+        delta.undo(&mut b, &mut c);
+        assert_eq!(b.text(), "foo foo");
+    }
+
     #[test]
     fn find_next_avanza_si_caret_va_al_fin_de_match_anterior() {
         let b = Buffer::from_str("ab ab ab");
diff --git a/widgets/text-editor-core/src/highlight.rs b/widgets/text-editor-core/src/highlight.rs
index 57b58f2..4b1671a 100644
--- a/widgets/text-editor-core/src/highlight.rs
+++ b/widgets/text-editor-core/src/highlight.rs
@@ -101,6 +101,7 @@ impl SyntaxPalette {
 // lenguaje es un ahorro grande. `tree_sitter::Parser` no es Send/
 // Sync ni Clone, así que vive en thread-local — un parser por
 // lenguaje por thread.
+#[cfg(feature = "treesitter")]
 thread_local! {
     static PARSER_POOL: std::cell::RefCell<std::collections::HashMap<Language, tree_sitter::Parser>>
         = std::cell::RefCell::new(std::collections::HashMap::new());
@@ -118,19 +119,23 @@ thread_local! {
 /// hacer `set_text` o cambios masivos donde el hint puede confundir
 /// más que ayudar. No es estrictamente necesario, pero es defensivo.
 pub fn invalidate_tree_cache(language: Language) {
+    #[cfg(feature = "treesitter")]
     TREE_CACHE.with(|c| {
         c.borrow_mut().remove(&language);
     });
+    #[cfg(not(feature = "treesitter"))]
+    let _ = language;
 }
 
 /// Aplica una lista de `InputEdit` al tree cached del `language`.
 /// Llamarlo ANTES de `parse(source, Some(&old_tree))` activa el modo
 /// incremental real de tree-sitter — solo reconstruye los subtrees
 /// afectados por las edits.
-pub fn apply_pending_edits(language: Language, edits: &[tree_sitter::InputEdit]) {
+pub fn apply_pending_edits(language: Language, edits: &[crate::tsedit::InputEdit]) {
     if edits.is_empty() {
         return;
     }
+    #[cfg(feature = "treesitter")]
     TREE_CACHE.with(|c| {
         let mut c = c.borrow_mut();
         if let Some(tree) = c.get_mut(&language) {
@@ -139,6 +144,9 @@ pub fn apply_pending_edits(language: Language, edits: &[tree_sitter::InputEdit])
             }
         }
     });
+    // Sin tree-sitter no hay árbol que editar: los edits son inertes.
+    #[cfg(not(feature = "treesitter"))]
+    let _ = language;
 }
 
 /// Highlighter — fina capa sin estado mutable propio. La parser real
@@ -166,11 +174,17 @@ impl Highlighter {
         match self.language {
             Language::Plain => plain_lines(source),
             Language::Wat => highlight_wat(source),
+            // Rust/Python: con tree-sitter, parsing real; sin él, texto plano.
+            #[cfg(feature = "treesitter")]
             Language::Rust => self.highlight_treesitter(source, rust_kind),
+            #[cfg(feature = "treesitter")]
             Language::Python => self.highlight_treesitter(source, python_kind),
+            #[cfg(not(feature = "treesitter"))]
+            Language::Rust | Language::Python => plain_lines(source),
         }
     }
 
+    #[cfg(feature = "treesitter")]
     fn highlight_treesitter(
         &mut self,
         source: &str,
@@ -254,6 +268,7 @@ impl Highlighter {
     }
 }
 
+#[cfg(feature = "treesitter")]
 fn make_ts_parser(language: Language) -> Option<tree_sitter::Parser> {
     let mut parser = tree_sitter::Parser::new();
     let lang: tree_sitter::Language = match language {
@@ -266,6 +281,7 @@ fn make_ts_parser(language: Language) -> Option<tree_sitter::Parser> {
 }
 
 /// Mapeo de tree-sitter node `kind` → TokenKind para Rust.
+#[cfg(feature = "treesitter")]
 fn rust_kind(kind: &str) -> Option<TokenKind> {
     // Lista deliberadamente acotada al subset común; nodos no listados
     // caen como Identifier/Other vía fill_gaps.
@@ -292,6 +308,7 @@ fn rust_kind(kind: &str) -> Option<TokenKind> {
 }
 
 /// Mapeo para Python.
+#[cfg(feature = "treesitter")]
 fn python_kind(kind: &str) -> Option<TokenKind> {
     match kind {
         "def" | "class" | "if" | "elif" | "else" | "for" | "while" | "return"
@@ -550,6 +567,7 @@ mod tests {
     }
 
     #[test]
+    #[cfg(feature = "treesitter")]
     fn rust_keyword_fn() {
         let mut h = Highlighter::new(Language::Rust);
         let r = h.highlight("fn main() {}");
@@ -558,6 +576,7 @@ mod tests {
     }
 
     #[test]
+    #[cfg(feature = "treesitter")]
     fn python_keyword_def() {
         let mut h = Highlighter::new(Language::Python);
         let r = h.highlight("def f():\n    return 1");
diff --git a/widgets/text-editor-core/src/lib.rs b/widgets/text-editor-core/src/lib.rs
index d28fb8c..70bee08 100644
--- a/widgets/text-editor-core/src/lib.rs
+++ b/widgets/text-editor-core/src/lib.rs
@@ -28,9 +28,11 @@ pub mod diagnostics;
 pub mod find;
 pub mod highlight;
 pub mod ops;
+pub mod tsedit;
 pub mod undo;
 
 pub use buffer::Buffer;
+pub use tsedit::{InputEdit, Point};
 pub use clipboard::{Clipboard, MemClipboard, NullClipboard};
 pub use cursor::{Cursor, Pos, Selection};
 pub use diagnostics::{Diagnostic, DiagnosticRange, Severity};
diff --git a/widgets/text-editor-core/src/ops.rs b/widgets/text-editor-core/src/ops.rs
index 0381d17..57fbcdd 100644
--- a/widgets/text-editor-core/src/ops.rs
+++ b/widgets/text-editor-core/src/ops.rs
@@ -131,6 +131,240 @@ pub fn delete_forward(buf: &mut Buffer, cursor: &mut Cursor) -> Option<EditDelta
     })
 }
 
+/// Borra la palabra a la izquierda del caret (Ctrl+Backspace). Si hay
+/// selección, la borra como [`delete_backward`]. El límite de palabra es
+/// el mismo que usa `Ctrl+Left` ([`Cursor::move_word_left`]): salta el
+/// whitespace y luego el run de caracteres de palabra. `None` si el caret
+/// ya estaba al inicio del buffer.
+pub fn delete_word_backward(buf: &mut Buffer, cursor: &mut Cursor) -> Option<EditDelta> {
+    if cursor.has_selection() {
+        return Some(replace_selection(buf, cursor, ""));
+    }
+    let before = *cursor;
+    let caret_off = buf.pos_to_offset(cursor.caret.line, cursor.caret.col);
+    if caret_off == 0 {
+        return None;
+    }
+    let mut probe = *cursor;
+    probe.move_word_left(buf, false);
+    let target = buf.pos_to_offset(probe.caret.line, probe.caret.col);
+    let (start, end) = (target.min(caret_off), target.max(caret_off));
+    if start == end {
+        return None;
+    }
+    let removed = buf.slice(start, end);
+    buf.delete(start, end);
+    let (line, col) = buf.offset_to_pos(start);
+    cursor.caret = Pos::new(line, col);
+    cursor.desired_col = col;
+    cursor.anchor = None;
+    Some(EditDelta {
+        start,
+        removed,
+        inserted: String::new(),
+        cursor_before: before,
+        cursor_after: *cursor,
+    })
+}
+
+/// Borra la palabra a la derecha del caret (Ctrl+Delete). Espejo de
+/// [`delete_word_backward`] usando el límite de `Ctrl+Right`. `None` si el
+/// caret ya estaba al final del buffer.
+pub fn delete_word_forward(buf: &mut Buffer, cursor: &mut Cursor) -> Option<EditDelta> {
+    if cursor.has_selection() {
+        return Some(replace_selection(buf, cursor, ""));
+    }
+    let before = *cursor;
+    let caret_off = buf.pos_to_offset(cursor.caret.line, cursor.caret.col);
+    if caret_off >= buf.len_chars() {
+        return None;
+    }
+    let mut probe = *cursor;
+    probe.move_word_right(buf, false);
+    let target = buf.pos_to_offset(probe.caret.line, probe.caret.col);
+    let (start, end) = (caret_off.min(target), caret_off.max(target));
+    if start == end {
+        return None;
+    }
+    let removed = buf.slice(start, end);
+    buf.delete(start, end);
+    // El caret se queda en `start` (= caret original).
+    cursor.anchor = None;
+    Some(EditDelta {
+        start,
+        removed,
+        inserted: String::new(),
+        cursor_before: before,
+        cursor_after: *cursor,
+    })
+}
+
+/// Duplica la línea del caret hacia abajo (Ctrl+D). La copia queda
+/// inmediatamente debajo y el caret baja a ella conservando la columna.
+pub fn duplicate_line(buf: &mut Buffer, cursor: &mut Cursor) -> EditDelta {
+    let before = *cursor;
+    let line = cursor.caret.line;
+    let start = buf.pos_to_offset(line, 0);
+    let text = buf.line(line); // incluye '\n' salvo en la última línea
+    let after_line = start + text.chars().count();
+    // Si la línea ya termina en '\n', la copia es el texto tal cual; si es
+    // la última (sin '\n'), anteponemos uno para abrir renglón nuevo.
+    let inserted = if text.ends_with('\n') {
+        text.clone()
+    } else {
+        format!("\n{text}")
+    };
+    buf.insert(after_line, &inserted);
+    let col = cursor.caret.col.min(buf.line_len_chars(line + 1));
+    cursor.caret = Pos::new(line + 1, col);
+    cursor.desired_col = col;
+    cursor.anchor = None;
+    EditDelta {
+        start: after_line,
+        removed: String::new(),
+        inserted,
+        cursor_before: before,
+        cursor_after: *cursor,
+    }
+}
+
+/// Texto de las dos líneas `l` y `l+1` intercambiadas, listo para
+/// reemplazar la región `[inicio_de_l .. inicio_de_l+2)`. `None` si no hay
+/// línea siguiente. No muta el buffer.
+fn swap_lines_text(buf: &Buffer, l: usize) -> Option<(usize, String, String)> {
+    if l + 1 >= buf.len_lines() {
+        return None;
+    }
+    let start = buf.pos_to_offset(l, 0);
+    let a = buf.line(l); // "A\n"
+    let b = buf.line(l + 1); // "B\n" o "B" (si es la última)
+    let removed = format!("{a}{b}");
+    let inserted = if b.ends_with('\n') {
+        format!("{b}{a}")
+    } else {
+        // `b` es la última línea (sin '\n'); `a` sí termina en '\n'.
+        let a_no_nl = a.strip_suffix('\n').unwrap_or(a.as_str());
+        format!("{b}\n{a_no_nl}")
+    };
+    Some((start, removed, inserted))
+}
+
+/// Mueve la línea del caret una posición hacia abajo (Alt+Down),
+/// intercambiándola con la siguiente. El caret la sigue. `None` si ya está
+/// en la última línea.
+pub fn move_line_down(buf: &mut Buffer, cursor: &mut Cursor) -> Option<EditDelta> {
+    let l = cursor.caret.line;
+    let before = *cursor;
+    let (start, removed, inserted) = swap_lines_text(buf, l)?;
+    buf.delete(start, start + removed.chars().count());
+    buf.insert(start, &inserted);
+    let col = cursor.caret.col.min(buf.line_len_chars(l + 1));
+    cursor.caret = Pos::new(l + 1, col);
+    cursor.desired_col = col;
+    cursor.anchor = None;
+    Some(EditDelta {
+        start,
+        removed,
+        inserted,
+        cursor_before: before,
+        cursor_after: *cursor,
+    })
+}
+
+/// Mueve la línea del caret una posición hacia arriba (Alt+Up). `None` si
+/// ya está en la primera línea.
+pub fn move_line_up(buf: &mut Buffer, cursor: &mut Cursor) -> Option<EditDelta> {
+    let l = cursor.caret.line;
+    if l == 0 {
+        return None;
+    }
+    let before = *cursor;
+    let (start, removed, inserted) = swap_lines_text(buf, l - 1)?;
+    buf.delete(start, start + removed.chars().count());
+    buf.insert(start, &inserted);
+    let col = cursor.caret.col.min(buf.line_len_chars(l - 1));
+    cursor.caret = Pos::new(l - 1, col);
+    cursor.desired_col = col;
+    cursor.anchor = None;
+    Some(EditDelta {
+        start,
+        removed,
+        inserted,
+        cursor_before: before,
+        cursor_after: *cursor,
+    })
+}
+
+/// Comenta o descomenta las líneas tocadas por la selección (o la línea
+/// del caret) con el `token` de comentario de línea (`//`, `#`, `--`…).
+/// Si **todas** las líneas no vacías ya están comentadas, las
+/// descomenta; si no, las comenta insertando `token ` tras la
+/// indentación. `None` si no hay cambio que aplicar.
+pub fn toggle_line_comment(buf: &mut Buffer, cursor: &mut Cursor, token: &str) -> Option<EditDelta> {
+    if token.is_empty() {
+        return None;
+    }
+    let before = *cursor;
+    let (sel_start, sel_end) = cursor.selection_range(buf);
+    let l0 = buf.char_to_line(sel_start);
+    let l1 = if sel_end > sel_start {
+        buf.char_to_line(sel_end - 1)
+    } else {
+        l0
+    };
+    let start = buf.pos_to_offset(l0, 0);
+    let end = if l1 + 1 < buf.len_lines() {
+        buf.pos_to_offset(l1 + 1, 0)
+    } else {
+        buf.len_chars()
+    };
+    let removed = buf.slice(start, end);
+
+    let lines: Vec<&str> = removed.split_inclusive('\n').collect();
+    let all_commented = lines
+        .iter()
+        .filter(|l| !l.trim().is_empty())
+        .all(|l| l.trim_start().starts_with(token));
+
+    let mut out = String::with_capacity(removed.len() + lines.len() * (token.len() + 1));
+    for line in &lines {
+        if line.trim().is_empty() {
+            out.push_str(line);
+            continue;
+        }
+        let indent_len = line.len() - line.trim_start().len();
+        let (indent, rest) = line.split_at(indent_len);
+        out.push_str(indent);
+        if all_commented {
+            let rest = rest.strip_prefix(token).unwrap_or(rest);
+            let rest = rest.strip_prefix(' ').unwrap_or(rest);
+            out.push_str(rest);
+        } else {
+            out.push_str(token);
+            out.push(' ');
+            out.push_str(rest);
+        }
+    }
+    if out == removed {
+        return None;
+    }
+
+    buf.delete(start, end);
+    buf.insert(start, &out);
+    let line = before.caret.line.min(buf.len_lines().saturating_sub(1));
+    let col = before.caret.col.min(buf.line_len_chars(line));
+    cursor.caret = Pos::new(line, col);
+    cursor.desired_col = col;
+    cursor.anchor = None;
+    Some(EditDelta {
+        start,
+        removed,
+        inserted: out,
+        cursor_before: before,
+        cursor_after: *cursor,
+    })
+}
+
 /// Inserta un salto de línea con **indentación automática**: copia los
 /// whitespace iniciales del renglón actual al renglón nuevo.
 pub fn insert_newline_auto_indent(buf: &mut Buffer, cursor: &mut Cursor) -> EditDelta {
@@ -326,6 +560,101 @@ mod tests {
         assert_eq!(b.text(), "b");
     }
 
+    #[test]
+    fn ctrl_backspace_borra_palabra() {
+        let mut b = Buffer::from_str("hola mundo");
+        let mut c = Cursor::at(0, 10); // al final
+        delete_word_backward(&mut b, &mut c);
+        assert_eq!(b.text(), "hola ");
+        assert_eq!(c.caret, Pos::new(0, 5));
+    }
+
+    #[test]
+    fn ctrl_backspace_en_inicio_no_hace_nada() {
+        let mut b = Buffer::from_str("hola");
+        let mut c = Cursor::at(0, 0);
+        assert!(delete_word_backward(&mut b, &mut c).is_none());
+    }
+
+    #[test]
+    fn ctrl_delete_borra_palabra_adelante() {
+        let mut b = Buffer::from_str("hola mundo");
+        let mut c = Cursor::at(0, 0);
+        delete_word_forward(&mut b, &mut c);
+        // borra "hola" + el espacio siguiente (límite de Ctrl+Right).
+        assert_eq!(b.text(), "mundo");
+        assert_eq!(c.caret, Pos::new(0, 0));
+    }
+
+    #[test]
+    fn duplicate_line_copia_debajo() {
+        let mut b = Buffer::from_str("uno\ndos");
+        let mut c = Cursor::at(0, 1);
+        duplicate_line(&mut b, &mut c);
+        assert_eq!(b.text(), "uno\nuno\ndos");
+        assert_eq!(c.caret, Pos::new(1, 1));
+    }
+
+    #[test]
+    fn duplicate_line_ultima_sin_newline() {
+        let mut b = Buffer::from_str("uno\ndos");
+        let mut c = Cursor::at(1, 0);
+        duplicate_line(&mut b, &mut c);
+        assert_eq!(b.text(), "uno\ndos\ndos");
+    }
+
+    #[test]
+    fn move_line_down_intercambia() {
+        let mut b = Buffer::from_str("uno\ndos\ntres");
+        let mut c = Cursor::at(0, 2);
+        move_line_down(&mut b, &mut c);
+        assert_eq!(b.text(), "dos\nuno\ntres");
+        assert_eq!(c.caret, Pos::new(1, 2));
+    }
+
+    #[test]
+    fn move_line_down_con_ultima_sin_newline() {
+        let mut b = Buffer::from_str("uno\ndos");
+        let mut c = Cursor::at(0, 0);
+        move_line_down(&mut b, &mut c);
+        assert_eq!(b.text(), "dos\nuno");
+    }
+
+    #[test]
+    fn move_line_up_intercambia() {
+        let mut b = Buffer::from_str("uno\ndos\ntres");
+        let mut c = Cursor::at(2, 1);
+        move_line_up(&mut b, &mut c);
+        assert_eq!(b.text(), "uno\ntres\ndos");
+        assert_eq!(c.caret, Pos::new(1, 1));
+    }
+
+    #[test]
+    fn move_line_up_en_primera_no_hace_nada() {
+        let mut b = Buffer::from_str("uno\ndos");
+        let mut c = Cursor::at(0, 0);
+        assert!(move_line_up(&mut b, &mut c).is_none());
+    }
+
+    #[test]
+    fn toggle_comment_comenta_y_descomenta() {
+        let mut b = Buffer::from_str("uno\ndos");
+        let mut c = Cursor::at(0, 0);
+        // sin selección → línea del caret
+        toggle_line_comment(&mut b, &mut c, "//");
+        assert_eq!(b.text(), "// uno\ndos");
+        toggle_line_comment(&mut b, &mut c, "//");
+        assert_eq!(b.text(), "uno\ndos");
+    }
+
+    #[test]
+    fn toggle_comment_seleccion_multilinea_respeta_indent() {
+        let mut b = Buffer::from_str("  uno\n  dos");
+        let mut c = Cursor { caret: Pos::new(1, 5), anchor: Some(Pos::new(0, 0)), desired_col: 5 };
+        toggle_line_comment(&mut b, &mut c, "#");
+        assert_eq!(b.text(), "  # uno\n  # dos");
+    }
+
     #[test]
     fn newline_copia_indent_del_renglon_anterior() {
         let mut b = Buffer::from_str("    hola");
diff --git a/widgets/text-editor-core/src/tsedit.rs b/widgets/text-editor-core/src/tsedit.rs
new file mode 100644
index 0000000..303ca58
--- /dev/null
+++ b/widgets/text-editor-core/src/tsedit.rs
@@ -0,0 +1,37 @@
+//! Tipos de edición incremental compartidos con tree-sitter.
+//!
+//! El editor acumula un [`InputEdit`] por delta para alimentar el parsing
+//! incremental (ver [`crate::highlight::apply_pending_edits`]). Esos tipos
+//! son de `tree-sitter`, pero su *construcción* no toca el runtime C — sólo
+//! el parsing real lo hace. Para que el tracking de edits compile aunque
+//! tree-sitter esté apagado (feature `treesitter` off, p. ej. cross-compile
+//! Mac/Windows desde Linux), este módulo expone los tipos:
+//!
+//! - con `treesitter` **on**: alias directos de `tree_sitter::{InputEdit, Point}`
+//!   (cero costo, misma identidad de tipo que consume el parser).
+//! - con `treesitter` **off**: structs locales con los mismos campos. Los
+//!   edits se siguen calculando pero `apply_pending_edits` es un no-op (no
+//!   hay árbol que editar), así que son inertes y baratos.
+
+#[cfg(feature = "treesitter")]
+pub use tree_sitter::{InputEdit, Point};
+
+/// Posición fila/columna-byte equivalente a `tree_sitter::Point`.
+#[cfg(not(feature = "treesitter"))]
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash)]
+pub struct Point {
+    pub row: usize,
+    pub column: usize,
+}
+
+/// Edición incremental equivalente a `tree_sitter::InputEdit`.
+#[cfg(not(feature = "treesitter"))]
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub struct InputEdit {
+    pub start_byte: usize,
+    pub old_end_byte: usize,
+    pub new_end_byte: usize,
+    pub start_position: Point,
+    pub old_end_position: Point,
+    pub new_end_position: Point,
+}
diff --git a/widgets/text-editor-core/src/undo.rs b/widgets/text-editor-core/src/undo.rs
index 6de8ad4..3de5817 100644
--- a/widgets/text-editor-core/src/undo.rs
+++ b/widgets/text-editor-core/src/undo.rs
@@ -47,6 +47,33 @@ impl UndoStack {
         }
     }
 
+    /// Registra un delta intentando **fusionarlo** con el anterior cuando
+    /// `coalesce` es true. Sirve para que una ráfaga de tecleo cuente como
+    /// un solo undo en vez de uno por carácter. Sólo fusiona inserciones
+    /// puras (sin borrado) y contiguas (el nuevo arranca justo donde
+    /// terminó el previo), y nunca a través de un salto de línea. En
+    /// cualquier otro caso cae a [`Self::push`] normal. El caller pasa
+    /// `coalesce = false` para forzar un corte de grupo (movimiento de
+    /// caret, pegado, borrado, etc.).
+    pub fn push_coalesce(&mut self, delta: EditDelta, coalesce: bool) {
+        if coalesce {
+            if let Some(prev) = self.done.last_mut() {
+                let prev_insert = prev.removed.is_empty() && !prev.inserted.is_empty();
+                let new_insert = delta.removed.is_empty() && !delta.inserted.is_empty();
+                let contiguous = delta.start == prev.start + prev.inserted.chars().count();
+                let no_newline =
+                    !prev.inserted.ends_with('\n') && !delta.inserted.contains('\n');
+                if prev_insert && new_insert && contiguous && no_newline {
+                    prev.inserted.push_str(&delta.inserted);
+                    prev.cursor_after = delta.cursor_after;
+                    self.undone.clear();
+                    return;
+                }
+            }
+        }
+        self.push(delta);
+    }
+
     pub fn can_undo(&self) -> bool {
         !self.done.is_empty()
     }
@@ -116,6 +143,41 @@ mod tests {
         assert!(!st.can_redo());
     }
 
+    #[test]
+    fn push_coalesce_fusiona_tecleo_contiguo() {
+        let mut b = Buffer::from_str("");
+        let mut c = Cursor::at(0, 0);
+        let mut st = UndoStack::new();
+        // Tipear "abc" carácter por carácter, coalescing.
+        for ch in ["a", "b", "c"] {
+            let d = replace_selection(&mut b, &mut c, ch);
+            st.push_coalesce(d, true);
+        }
+        assert_eq!(b.text(), "abc");
+        // Un solo undo borra los tres.
+        assert!(st.undo(&mut b, &mut c));
+        assert_eq!(b.text(), "");
+        assert!(!st.can_undo());
+    }
+
+    #[test]
+    fn push_coalesce_corta_en_newline_y_sin_coalesce() {
+        let mut b = Buffer::from_str("");
+        let mut c = Cursor::at(0, 0);
+        let mut st = UndoStack::new();
+        st.push_coalesce(replace_selection(&mut b, &mut c, "ab"), true);
+        // Enter / salto de línea = grupo aparte (coalesce false).
+        st.push_coalesce(replace_selection(&mut b, &mut c, "\n"), false);
+        st.push_coalesce(replace_selection(&mut b, &mut c, "cd"), true);
+        assert_eq!(b.text(), "ab\ncd");
+        st.undo(&mut b, &mut c);
+        assert_eq!(b.text(), "ab\n"); // sólo "cd"
+        st.undo(&mut b, &mut c);
+        assert_eq!(b.text(), "ab"); // sólo el "\n"
+        st.undo(&mut b, &mut c);
+        assert_eq!(b.text(), ""); // "ab"
+    }
+
     #[test]
     fn capacity_descartan_viejos() {
         let mut b = Buffer::from_str("");
diff --git a/widgets/text-editor-lsp/Cargo.toml b/widgets/text-editor-lsp/Cargo.toml
index 15b36fb..eb1b925 100644
--- a/widgets/text-editor-lsp/Cargo.toml
+++ b/widgets/text-editor-lsp/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-text-editor-lsp — trait LspClient + NoopLspClient como foundation. El cliente real (rust-analyzer/pylsp con tokio + jsonrpc) queda como TODO para una sesión dedicada."
 
+repository.workspace = true
 [dependencies]
 llimphi-widget-text-editor = { workspace = true }
 serde_json = { workspace = true }
diff --git a/widgets/text-editor/Cargo.toml b/widgets/text-editor/Cargo.toml
index b067026..ae93bd3 100644
--- a/widgets/text-editor/Cargo.toml
+++ b/widgets/text-editor/Cargo.toml
@@ -5,15 +5,26 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-text-editor — capa visual Llimphi del editor de código (gutter, caret, selección, scroll, integración de teclado al update Elm). El núcleo agnóstico (buffer/cursor/ops/undo/highlight/…) vive en llimphi-widget-text-editor-core y se re-exporta. LSP queda para una capa superior."
 
+repository.workspace = true
 [dependencies]
-llimphi-widget-text-editor-core = { workspace = true }
+# default-features = false para que el flag `treesitter` de este widget
+# gobierne si el núcleo arrastra el C de tree-sitter. state.rs construye
+# los InputEdit/Point vía el shim re-exportado del núcleo
+# (`crate::tsedit`), así que el widget ya no depende de tree-sitter directo.
+# Path directo (no `workspace = true`): heredar de [workspace.dependencies]
+# sólo permite *añadir* features, nunca apagar default-features — el flag
+# se ignoraría y el C de tree-sitter entraría igual. Con path directo sí
+# manda el `default-features = false`.
+llimphi-widget-text-editor-core = { path = "../text-editor-core", version = "0.1.0", default-features = false }
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
-# state.rs construye tree_sitter::InputEdit/Point para alimentar el
-# parsing incremental del núcleo (el resto de tree-sitter vive en core).
-tree-sitter = { workspace = true }
+
+[features]
+default = ["treesitter"]
+# Propaga el highlight tree-sitter al núcleo. Off → editor sin resaltado
+# de Rust/Python (texto plano), compilable sin toolchain C de la plataforma.
+treesitter = ["llimphi-widget-text-editor-core/treesitter"]
 
 [dev-dependencies]
diff --git a/widgets/text-editor/LEEME.md b/widgets/text-editor/LEEME.md
index 85de610..7f656ec 100644
--- a/widgets/text-editor/LEEME.md
+++ b/widgets/text-editor/LEEME.md
@@ -2,4 +2,4 @@
 
 > Editor de código (rope · cursor · undo · highlight · clipboard · find) para [llimphi](../../README.md).
 
-Rope con `crop` o `xi-rope` interno (eficiente para edits grandes). Cursores múltiples opcionales, syntax highlight (tree-sitter), clipboard real (`arboard`), find/replace con regex, undo grouped. Base de `nada`, `pluma-editor`, `pluma-notebook`, `nakui-sheet`.
+Rope con `crop` o `xi-rope` interno (eficiente para edits grandes). Cursores múltiples opcionales, syntax highlight (tree-sitter), clipboard real (`arboard`), find/replace con regex, undo grouped. Base de `nada`, `pluma-editor-llimphi`, `pluma-notebook-llimphi`, `nakui-sheet-llimphi`.
diff --git a/widgets/text-editor/README.md b/widgets/text-editor/README.md
index d45991d..cd95f94 100644
--- a/widgets/text-editor/README.md
+++ b/widgets/text-editor/README.md
@@ -2,4 +2,4 @@
 
 > Code editor (rope · cursor · undo · highlight · clipboard · find) for [llimphi](../../README.md).
 
-Internal rope with `crop` or `xi-rope` (efficient for large edits). Optional multi-cursor, syntax highlight (tree-sitter), real clipboard (`arboard`), regex find/replace, grouped undo. Foundation of `nada`, `pluma-editor`, `pluma-notebook`, `nakui-sheet`.
+Internal rope with `crop` or `xi-rope` (efficient for large edits). Optional multi-cursor, syntax highlight (tree-sitter), real clipboard (`arboard`), regex find/replace, grouped undo. Foundation of `nada`, `pluma-editor-llimphi`, `pluma-notebook-llimphi`, `nakui-sheet-llimphi`.
diff --git a/widgets/text-editor/src/lib.rs b/widgets/text-editor/src/lib.rs
index d7b39f4..1427abc 100644
--- a/widgets/text-editor/src/lib.rs
+++ b/widgets/text-editor/src/lib.rs
@@ -20,7 +20,7 @@
 // Núcleo agnóstico re-exportado como módulos del crate: mantiene viva la
 // ruta `crate::<mod>::…` que usan `state`/`view` y los consumidores externos.
 pub use llimphi_widget_text_editor_core::{
-    bracket, buffer, clipboard, cursor, diagnostics, find, highlight, ops, undo,
+    bracket, buffer, clipboard, cursor, diagnostics, find, highlight, ops, tsedit, undo,
 };
 
 // Capa Llimphi propia de este widget.
@@ -38,7 +38,8 @@ pub use state::{ApplyResult, EditorOptions, EditorState, Preedit};
 pub use undo::UndoStack;
 pub use view::{
     text_editor_view, text_editor_view_colored, text_editor_view_full,
-    text_editor_view_highlighted, EditorMetrics, EditorPalette, GutterStyle, PointerEvent,
+    text_editor_view_highlighted, text_editor_view_styled, EditorMetrics, EditorPalette,
+    GutterStyle, PointerEvent, StyledSpan,
 };
 
 use llimphi_ui::llimphi_raster::peniko::Color;
diff --git a/widgets/text-editor/src/state.rs b/widgets/text-editor/src/state.rs
index d473248..5affb8e 100644
--- a/widgets/text-editor/src/state.rs
+++ b/widgets/text-editor/src/state.rs
@@ -12,8 +12,9 @@ use crate::clipboard::{Clipboard, NullClipboard};
 use crate::cursor::{Cursor, Pos};
 use crate::highlight::{Highlighter, Language, Span};
 use crate::ops::{
-    dedent, delete_backward, delete_forward, indent_or_insert_tab,
-    insert_newline_auto_indent, replace_selection,
+    dedent, delete_backward, delete_forward, delete_word_backward, delete_word_forward,
+    duplicate_line, indent_or_insert_tab, insert_newline_auto_indent, move_line_down,
+    move_line_up, replace_selection, toggle_line_comment,
 };
 use crate::undo::UndoStack;
 
@@ -28,6 +29,13 @@ pub struct EditorOptions {
     /// `true` = Enter no inserta `\n`; el caller maneja submit. (modo
     /// single-line para el text-input refactorizado).
     pub single_line: bool,
+    /// Token de comentario de línea para el toggle de Ctrl+/. Lo fija el
+    /// caller según el lenguaje (`//`, `#`, `--`, `;`…). Default `//`.
+    pub line_comment: &'static str,
+    /// `true` = al tipear un bracket/comilla de apertura se inserta el
+    /// cierre y el caret queda en medio; tipear el cierre justo antes de
+    /// uno igual lo "saltea" en vez de duplicarlo. Default `true`.
+    pub auto_close_brackets: bool,
 }
 
 impl Default for EditorOptions {
@@ -37,6 +45,8 @@ impl Default for EditorOptions {
             indent_size: 2,
             page_size: 12,
             single_line: false,
+            line_comment: "//",
+            auto_close_brackets: true,
         }
     }
 }
@@ -93,14 +103,42 @@ pub struct EditorState {
     /// al `Tree` cached del highlighter. El highlight, antes de
     /// reparsear, los drena y los aplica al tree → parseo incremental
     /// real (tree-sitter sólo reconstruye los subtrees afectados).
-    pub pending_input_edits: RefCell<Vec<tree_sitter::InputEdit>>,
+    pub pending_input_edits: RefCell<Vec<crate::tsedit::InputEdit>>,
     /// Cache memoizado del syntax highlight. Interior mutability vía
     /// `RefCell` para que el view (que recibe `&EditorState`) lo
     /// actualice on-demand. Se invalida cuando cambian `edit_seq` o el
     /// `Language` solicitado.
     pub highlight_cache: RefCell<Option<HighlightCache>>,
+    /// Último click registrado por [`Self::register_click`]: instante +
+    /// posición. Sirve para contar clicks consecutivos (doble/triple) sin
+    /// que el caller lleve el tiempo. `None` = no hubo click reciente.
+    last_click: Option<(std::time::Instant, Pos)>,
+    /// Cuántos clicks consecutivos cercanos lleva la racha actual (1 = simple,
+    /// 2 = palabra, 3 = párrafo). Cicla 1→2→3→1. Ver [`Self::register_click`].
+    click_count: u32,
+    /// Drag de selección en curso (origen del press + delta acumulado), para
+    /// que [`Self::pointer_drag`] ancle bien y no acumule deriva. `None` = sin
+    /// drag activo.
+    drag: Option<DragSel>,
+    /// Fase visible del caret para el parpadeo: `true` = dibujado, `false` =
+    /// apagado. El caller lo alterna con [`Self::blink_toggle`] desde un timer
+    /// (~530 ms). Default `true`; cualquier edición/movimiento lo fuerza a
+    /// `true` ([`Self::caret_show`]) para que el caret no desaparezca mientras
+    /// se escribe. Sin timer, queda siempre visible (comportamiento previo).
+    pub caret_on: bool,
 }
 
+/// Estado de un drag de selección con mouse: punto del press (constante
+/// durante el drag) + delta acumulado desde el press. Ver [`EditorState::pointer_drag`].
+#[derive(Debug, Clone, Copy)]
+struct DragSel {
+    origin: (f32, f32),
+    accum: (f32, f32),
+}
+
+/// Ventana máxima entre dos clicks para que cuenten como doble/triple.
+const MULTI_CLICK_WINDOW: std::time::Duration = std::time::Duration::from_millis(450);
+
 /// Texto en composición del IME — el que el método de entrada está
 /// armando antes de confirmarlo (un acento muerto a medio componer, una
 /// sílaba CJK con su ventana de candidatos, un emoji del picker). No
@@ -147,6 +185,10 @@ impl EditorState {
             edit_seq: 0,
             pending_input_edits: RefCell::new(Vec::new()),
             highlight_cache: RefCell::new(None),
+            last_click: None,
+            click_count: 0,
+            drag: None,
+            caret_on: true,
         }
     }
 
@@ -268,7 +310,7 @@ impl EditorState {
         }
         // Aplica los InputEdits pending al tree cached antes de parsear
         // — eso convierte el parseo de "full" a "incremental real".
-        let edits: Vec<tree_sitter::InputEdit> =
+        let edits: Vec<crate::tsedit::InputEdit> =
             self.pending_input_edits.borrow_mut().drain(..).collect();
         crate::highlight::apply_pending_edits(language, &edits);
 
@@ -305,6 +347,96 @@ impl EditorState {
         }
     }
 
+    /// Selecciona la palabra bajo `(line, col)` (doble-click). Delegado a
+    /// [`Cursor::select_word`].
+    pub fn select_word_at(&mut self, line: usize, col: usize) {
+        self.cursor.select_word(&self.buffer, Pos::new(line, col));
+    }
+
+    /// Selecciona el párrafo bajo `(line, col)` (triple-click). Delegado a
+    /// [`Cursor::select_paragraph`].
+    pub fn select_paragraph_at(&mut self, line: usize, col: usize) {
+        self.cursor.select_paragraph(&self.buffer, Pos::new(line, col));
+    }
+
+    /// Registra un click del mouse en `(line, col)` y aplica la selección
+    /// según cuántos clicks consecutivos cercanos hubo:
+    /// **1** = caret simple · **2** = palabra · **3** = párrafo · **4+** =
+    /// vuelve a caret. La racha se reinicia si pasó más de
+    /// [`MULTI_CLICK_WINDOW`] desde el click anterior o si éste cayó lejos
+    /// (otra línea, o más de un char de distancia). Reemplaza a
+    /// [`Self::set_caret_at`] como handler de `PointerEvent::Click` cuando
+    /// se quiere doble/triple click.
+    pub fn register_click(&mut self, line: usize, col: usize) {
+        let now = std::time::Instant::now();
+        let pos = Pos::new(line, col);
+        let n = match self.last_click {
+            Some((t, p))
+                if now.duration_since(t) <= MULTI_CLICK_WINDOW
+                    && p.line == pos.line
+                    && p.col.abs_diff(pos.col) <= 1 =>
+            {
+                self.click_count = self.click_count % 3 + 1;
+                self.click_count
+            }
+            _ => {
+                self.click_count = 1;
+                1
+            }
+        };
+        self.last_click = Some((now, pos));
+        self.drag = None; // un click nuevo cierra cualquier drag previo
+        self.caret_show();
+        match n {
+            2 => self.select_word_at(line, col),
+            3 => self.select_paragraph_at(line, col),
+            _ => self.set_caret_at(line, col),
+        }
+    }
+
+    /// Procesa un paso de **drag de selección** con el mouse. `press` es la
+    /// posición del botón apretado (constante durante el drag, en coords
+    /// locales del área de texto); `(dx, dy)` el delta desde el evento
+    /// anterior. El widget ancla la selección en el punto de press la primera
+    /// vez y la extiende hasta la posición actual (= press + delta acumulado).
+    /// Detecta un drag nuevo porque `press` cambia, y reinicia el acumulador
+    /// sin acumular deriva — así no hace falta que el caller lleve estado.
+    pub fn pointer_drag(&mut self, metrics: crate::EditorMetrics, press: (f32, f32), dx: f32, dy: f32) {
+        let nuevo = self.drag.map_or(true, |d| d.origin != press);
+        if nuevo {
+            // Ancla en el punto de press.
+            let (l0, c0) = metrics.screen_to_pos(press.0, press.1, self.scroll_offset);
+            self.set_caret_at(l0, c0);
+            self.drag = Some(DragSel { origin: press, accum: (0.0, 0.0) });
+        }
+        let d = self.drag.as_mut().expect("drag recién seteado");
+        d.accum.0 += dx;
+        d.accum.1 += dy;
+        let (cx, cy) = (press.0 + d.accum.0, press.1 + d.accum.1);
+        let (l, c) = metrics.screen_to_pos(cx, cy, self.scroll_offset);
+        self.extend_selection_to(l, c);
+        self.caret_show();
+    }
+
+    /// Termina el drag de selección en curso (al soltar el botón). La
+    /// selección resultante queda como está.
+    pub fn end_drag(&mut self) {
+        self.drag = None;
+    }
+
+    /// Alterna la fase del parpadeo del caret. Lo llama el caller desde un
+    /// timer periódico (~530 ms). No-op semántico si no hay timer.
+    pub fn blink_toggle(&mut self) {
+        self.caret_on = !self.caret_on;
+    }
+
+    /// Fuerza el caret a visible y reinicia la fase de parpadeo. Se llama en
+    /// cada edición/movimiento para que el caret no titile-apague justo
+    /// mientras el usuario escribe o navega.
+    pub fn caret_show(&mut self) {
+        self.caret_on = true;
+    }
+
     /// `true` si la línea `line` figura en `guard_lines`.
     pub fn is_guard_line(&self, line: usize) -> bool {
         self.guard_lines.binary_search(&line).is_ok()
@@ -313,7 +445,7 @@ impl EditorState {
     /// Reemplaza la lista de líneas-guarda. La entrada se ordena y
     /// deduplica — el caller puede pasarlas en cualquier orden. Tras
     /// el cambio NO se snappea el caret automáticamente: si tu nueva
-    /// lista deja al caret sobre una guarda, llamá a
+    /// lista deja al caret sobre una guarda, llama a
     /// [`Self::snap_off_guards`] explícitamente.
     pub fn set_guard_lines(&mut self, mut lines: Vec<usize>) {
         lines.sort_unstable();
@@ -395,7 +527,7 @@ impl EditorState {
     /// caller decida si rebuildear el view.
     ///
     /// Copy/cut/paste (Ctrl+C/X/V) son ignorados — para habilitarlos,
-    /// usá [`Self::apply_key_with_clipboard`] pasando un backend.
+    /// usa [`Self::apply_key_with_clipboard`] pasando un backend.
     pub fn apply_key(&mut self, event: &KeyEvent) -> ApplyResult {
         self.apply_key_with_clipboard(event, &mut NullClipboard)
     }
@@ -472,6 +604,10 @@ impl EditorState {
         if r.changed() {
             self.bump_edit_seq();
         }
+        if r.touched() {
+            // Tecleo/movimiento → caret visible (no titilar-apagar al escribir).
+            self.caret_show();
+        }
         if r.touched() && !self.guard_lines.is_empty() && !self.cursor.has_selection() {
             // Si hay selección viva (shift+arrow / drag) no snappeamos:
             // el usuario está seleccionando a través de la guarda y
@@ -506,7 +642,7 @@ impl EditorState {
 
         // Multi-cursor: Ctrl+Alt+ArrowDown/Up agrega un cursor en la
         // línea siguiente/anterior usando la misma desired_col. Esc del
-        // caller debería colapsar — no lo manejamos acá porque el caller
+        // caller debería colapsar — no lo manejamos aquí porque el caller
         // puede querer usar Esc para otras cosas (cerrar find, cancelar
         // edit). El caller chequea has_multi_cursor() antes.
         if ctrl && alt {
@@ -550,12 +686,29 @@ impl EditorState {
                 ApplyResult::CursorMoved
             }
             Key::Named(NamedKey::ArrowUp) => {
-                self.apply_move_all(|b, c| c.move_up(b, extending));
-                ApplyResult::CursorMoved
+                // Alt+Up (sin Ctrl) = mover la línea hacia arriba.
+                if alt && !ctrl {
+                    if self.apply_edit_all(|b, c, _o| move_line_up(b, c)) {
+                        ApplyResult::Changed
+                    } else {
+                        ApplyResult::Ignored
+                    }
+                } else {
+                    self.apply_move_all(|b, c| c.move_up(b, extending));
+                    ApplyResult::CursorMoved
+                }
             }
             Key::Named(NamedKey::ArrowDown) => {
-                self.apply_move_all(|b, c| c.move_down(b, extending));
-                ApplyResult::CursorMoved
+                if alt && !ctrl {
+                    if self.apply_edit_all(|b, c, _o| move_line_down(b, c)) {
+                        ApplyResult::Changed
+                    } else {
+                        ApplyResult::Ignored
+                    }
+                } else {
+                    self.apply_move_all(|b, c| c.move_down(b, extending));
+                    ApplyResult::CursorMoved
+                }
             }
             Key::Named(NamedKey::Home) => {
                 if ctrl {
@@ -591,14 +744,24 @@ impl EditorState {
                 ApplyResult::Changed
             }
             Key::Named(NamedKey::Backspace) => {
-                if self.apply_edit_all(|b, c, _opts| delete_backward(b, c)) {
+                let changed = if ctrl {
+                    self.apply_edit_all(|b, c, _opts| delete_word_backward(b, c))
+                } else {
+                    self.apply_edit_all(|b, c, _opts| delete_backward(b, c))
+                };
+                if changed {
                     ApplyResult::Changed
                 } else {
                     ApplyResult::Ignored
                 }
             }
             Key::Named(NamedKey::Delete) => {
-                if self.apply_edit_all(|b, c, _opts| delete_forward(b, c)) {
+                let changed = if ctrl {
+                    self.apply_edit_all(|b, c, _opts| delete_word_forward(b, c))
+                } else {
+                    self.apply_edit_all(|b, c, _opts| delete_forward(b, c))
+                };
+                if changed {
                     ApplyResult::Changed
                 } else {
                     ApplyResult::Ignored
@@ -668,6 +831,24 @@ impl EditorState {
                 if did { ApplyResult::Changed } else { ApplyResult::Ignored }
             }
 
+            // Duplicar línea (Ctrl+D).
+            Key::Character(s) if ctrl && s.as_str().eq_ignore_ascii_case("d") => {
+                if self.apply_edit_all(|b, c, _o| Some(duplicate_line(b, c))) {
+                    ApplyResult::Changed
+                } else {
+                    ApplyResult::Ignored
+                }
+            }
+            // Comentar / descomentar (Ctrl+/).
+            Key::Character(s) if ctrl && s.as_str() == "/" => {
+                let token = self.options.line_comment;
+                if self.apply_edit_all(|b, c, _o| toggle_line_comment(b, c, token)) {
+                    ApplyResult::Changed
+                } else {
+                    ApplyResult::Ignored
+                }
+            }
+
             // Inserción de chars imprimibles vía event.text (respeta IME +
             // layouts no-US). Ignoramos cuando ctrl/meta están activos
             // para no comernos Ctrl+S, Ctrl+C, etc. (eso lo hace el
@@ -683,7 +864,14 @@ impl EditorState {
                     return ApplyResult::Ignored;
                 }
                 let text = text.clone();
-                self.apply_edit_all(|b, c, _opts| Some(replace_selection(b, c, &text)));
+                // Auto-cierre de brackets/comillas (un solo char, sin
+                // multi-cursor): puede insertar el par o saltear el cierre.
+                if let Some(res) = self.try_auto_close(&text) {
+                    return res;
+                }
+                // Tecleo normal: coalescing de undo cuando hay un solo cursor.
+                let coalesce = self.extra_cursors.is_empty();
+                self.apply_edit_all_co(|b, c, _opts| Some(replace_selection(b, c, &text)), coalesce);
                 ApplyResult::Changed
             }
         }
@@ -709,9 +897,20 @@ impl EditorState {
     /// cursores. Procesa en orden de offset descendente para que las
     /// ediciones tempranas no desplacen las posiciones de las
     /// posteriores. Devuelve `true` si al menos uno produjo un delta.
-    /// Cada delta también genera un `tree_sitter::InputEdit` que va a
+    /// Cada delta también genera un `crate::tsedit::InputEdit` que va a
     /// `pending_input_edits` para alimentar el incremental parsing.
-    fn apply_edit_all<F>(&mut self, mut f: F) -> bool
+    fn apply_edit_all<F>(&mut self, f: F) -> bool
+    where
+        F: FnMut(&mut Buffer, &mut Cursor, &EditorOptions) -> Option<crate::ops::EditDelta>,
+    {
+        self.apply_edit_all_co(f, false)
+    }
+
+    /// Como [`Self::apply_edit_all`] pero con `coalesce`: cuando es `true`,
+    /// cada delta se registra con [`UndoStack::push_coalesce`] para que una
+    /// ráfaga de tecleo cuente como un solo undo. Lo usa sólo el camino de
+    /// inserción de caracteres imprimibles (con un cursor).
+    fn apply_edit_all_co<F>(&mut self, mut f: F, coalesce: bool) -> bool
     where
         F: FnMut(&mut Buffer, &mut Cursor, &EditorOptions) -> Option<crate::ops::EditDelta>,
     {
@@ -740,12 +939,12 @@ impl EditorState {
             let start_byte = self.buffer.char_to_byte(start_char);
             let start_line = self.buffer.char_to_line(start_char);
             let start_col_byte = start_byte - self.buffer.line_to_byte(start_line);
-            let pre_pt = tree_sitter::Point { row: start_line, column: start_col_byte };
+            let pre_pt = crate::tsedit::Point { row: start_line, column: start_col_byte };
 
             if let Some(d) = f(&mut self.buffer, cursor, &opts) {
                 let edit = compute_input_edit(start_byte, pre_pt, &d);
                 self.pending_input_edits.borrow_mut().push(edit);
-                self.undo.push(d);
+                self.undo.push_coalesce(d, coalesce);
                 any = true;
             }
         }
@@ -753,6 +952,91 @@ impl EditorState {
         any
     }
 
+    /// Auto-cierre de brackets/comillas para un carácter tecleado. Devuelve
+    /// `Some(resultado)` si manejó la tecla (insertó el par o salteó el
+    /// cierre), `None` para que siga el camino de inserción normal.
+    fn try_auto_close(&mut self, text: &str) -> Option<ApplyResult> {
+        if !self.options.auto_close_brackets
+            || self.options.single_line
+            || !self.extra_cursors.is_empty()
+        {
+            return None;
+        }
+        if self.cursor.has_selection() {
+            return None;
+        }
+        let mut it = text.chars();
+        let ch = it.next()?;
+        if it.next().is_some() {
+            return None; // más de un char (p.ej. un commit de IME)
+        }
+        let caret_off = self
+            .buffer
+            .pos_to_offset(self.cursor.caret.line, self.cursor.caret.col);
+        let next_char = self.buffer.char_at(caret_off);
+        let prev_char = caret_off.checked_sub(1).and_then(|o| self.buffer.char_at(o));
+
+        let is_quote = |c: char| matches!(c, '"' | '\'' | '`');
+        let close_for = |c: char| match c {
+            '(' => Some(')'),
+            '[' => Some(']'),
+            '{' => Some('}'),
+            _ => None,
+        };
+        let is_closer = |c: char| matches!(c, ')' | ']' | '}');
+
+        // Saltear el cierre: tecleas un cierre (o comilla) y justo adelante ya
+        // está ese mismo char — lo que el auto-cierre había puesto.
+        if (is_closer(ch) || is_quote(ch)) && next_char == Some(ch) {
+            self.cursor.move_right(&self.buffer, false);
+            return Some(ApplyResult::CursorMoved);
+        }
+
+        let close = if let Some(cl) = close_for(ch) {
+            cl
+        } else if is_quote(ch) {
+            // No autocerrar comillas pegadas a una palabra (apóstrofes).
+            if prev_char.is_some_and(|c| c.is_alphanumeric()) {
+                return None;
+            }
+            ch
+        } else {
+            return None;
+        };
+        // No autocerrar pegado al inicio de una palabra (evita `(` antes de
+        // texto existente como `(foo` → `()foo`).
+        if next_char.is_some_and(|c| c.is_alphanumeric() || c == '_') {
+            return None;
+        }
+        self.insert_pair(ch, close);
+        Some(ApplyResult::Changed)
+    }
+
+    /// Inserta el par `open``close` en el caret y lo deja en el medio.
+    /// Registra un delta propio (no coalescente) en la pila de undo.
+    fn insert_pair(&mut self, open: char, close: char) {
+        let before = self.cursor;
+        let caret_off = self
+            .buffer
+            .pos_to_offset(self.cursor.caret.line, self.cursor.caret.col);
+        let mut s = String::with_capacity(2);
+        s.push(open);
+        s.push(close);
+        self.buffer.insert(caret_off, &s);
+        let (l, c) = self.buffer.offset_to_pos(caret_off + 1);
+        self.cursor.caret = Pos::new(l, c);
+        self.cursor.desired_col = c;
+        self.cursor.anchor = None;
+        let delta = crate::ops::EditDelta {
+            start: caret_off,
+            removed: String::new(),
+            inserted: s,
+            cursor_before: before,
+            cursor_after: self.cursor,
+        };
+        self.undo.push_coalesce(delta, false);
+    }
+
     /// Elimina cursores extras que están en la misma posición que el
     /// primary o que otros extras (después de una edición pueden
     /// converger).
@@ -822,9 +1106,9 @@ fn snap_cursor_off_guard(
 /// ANTES del cambio (el caller las captura).
 fn compute_input_edit(
     start_byte: usize,
-    start_point: tree_sitter::Point,
+    start_point: crate::tsedit::Point,
     delta: &crate::ops::EditDelta,
-) -> tree_sitter::InputEdit {
+) -> crate::tsedit::InputEdit {
     let removed_bytes = delta.removed.len();
     let inserted_bytes = delta.inserted.len();
 
@@ -834,7 +1118,7 @@ fn compute_input_edit(
     let old_end_point = advance_point(start_point, &delta.removed);
     let new_end_point = advance_point(start_point, &delta.inserted);
 
-    tree_sitter::InputEdit {
+    crate::tsedit::InputEdit {
         start_byte,
         old_end_byte,
         new_end_byte,
@@ -846,16 +1130,16 @@ fn compute_input_edit(
 
 /// Avanza un Point por el contenido de `text`: cuenta `\n` para filas,
 /// bytes de la última línea para columna.
-fn advance_point(start: tree_sitter::Point, text: &str) -> tree_sitter::Point {
+fn advance_point(start: crate::tsedit::Point, text: &str) -> crate::tsedit::Point {
     let newlines = text.bytes().filter(|b| *b == b'\n').count();
     if newlines == 0 {
-        tree_sitter::Point {
+        crate::tsedit::Point {
             row: start.row,
             column: start.column + text.len(),
         }
     } else {
         let after_last_nl = text.rsplit('\n').next().unwrap_or("").len();
-        tree_sitter::Point {
+        crate::tsedit::Point {
             row: start.row + newlines,
             column: after_last_nl,
         }
@@ -916,6 +1200,116 @@ mod tests {
         assert_eq!(s.text(), "hi");
     }
 
+    #[test]
+    fn register_click_cuenta_simple_doble_triple() {
+        let mut s = EditorState::new();
+        s.set_text("hola mundo\notro\n\nparrafo dos");
+
+        // Click simple en "mundo": caret, sin selección.
+        s.register_click(0, 7);
+        assert!(!s.cursor.has_selection());
+
+        // Doble click (mismo punto, dentro de la ventana): palabra.
+        s.register_click(0, 7);
+        let (a, b) = s.cursor.selection_range(&s.buffer);
+        assert_eq!(s.buffer.slice(a, b), "mundo");
+
+        // Triple click: párrafo (bloque de líneas no vacías).
+        s.register_click(0, 7);
+        let (a, b) = s.cursor.selection_range(&s.buffer);
+        assert_eq!(s.buffer.slice(a, b), "hola mundo\notro");
+
+        // Cuarto click: vuelve a caret simple.
+        s.register_click(0, 7);
+        assert!(!s.cursor.has_selection());
+    }
+
+    #[test]
+    fn register_click_lejos_reinicia_a_simple() {
+        let mut s = EditorState::new();
+        s.set_text("hola mundo");
+        s.register_click(0, 1);
+        // Segundo click en otra columna lejana → racha reiniciada, no palabra.
+        s.register_click(0, 8);
+        assert!(!s.cursor.has_selection());
+    }
+
+    #[test]
+    fn ctrl_d_duplica_linea() {
+        let mut s = EditorState::new();
+        s.set_text("uno\ndos");
+        s.cursor.set_caret(&s.buffer, Pos::new(0, 1));
+        s.apply_key(&evtext("d", false, true));
+        assert_eq!(s.text(), "uno\nuno\ndos");
+    }
+
+    #[test]
+    fn alt_down_mueve_linea() {
+        let mut s = EditorState::new();
+        s.set_text("uno\ndos\ntres");
+        s.cursor.set_caret(&s.buffer, Pos::new(0, 0));
+        let ev = KeyEvent {
+            key: Key::Named(NamedKey::ArrowDown),
+            state: KeyState::Pressed,
+            text: None,
+            modifiers: Modifiers { shift: false, ctrl: false, alt: true, meta: false },
+            repeat: false,
+        };
+        s.apply_key(&ev);
+        assert_eq!(s.text(), "dos\nuno\ntres");
+    }
+
+    #[test]
+    fn ctrl_slash_comenta() {
+        let mut s = EditorState::new();
+        s.set_text("uno");
+        s.apply_key(&evtext("/", false, true));
+        assert_eq!(s.text(), "// uno");
+    }
+
+    #[test]
+    fn pointer_drag_ancla_en_press_y_extiende() {
+        let mut s = EditorState::new();
+        s.set_text("hola mundo cruel");
+        let m = crate::EditorMetrics::for_font_size(13.0);
+        let cw = m.char_width;
+        // Press en (col 0, línea 0); el ancla queda ahí.
+        let press = (crate::view::PAD_X, crate::view::PAD_Y + 1.0);
+        s.pointer_drag(m, press, cw * 5.0, 0.0); // arrastrar 5 chars a la derecha
+        assert!(s.cursor.has_selection());
+        let (a, b) = s.cursor.selection_range(&s.buffer);
+        assert_eq!((a, b), (0, 5)); // "hola " seleccionado desde el press
+        // Más arrastre extiende sin reiniciar (mismo press).
+        s.pointer_drag(m, press, cw * 5.0, 0.0);
+        let (a, b) = s.cursor.selection_range(&s.buffer);
+        assert_eq!((a, b), (0, 10));
+    }
+
+    #[test]
+    fn auto_close_inserta_par_y_saltea_cierre() {
+        let mut s = EditorState::new();
+        // tipear '(' inserta '()' con el caret en medio
+        s.apply_key(&evtext("(", false, false));
+        assert_eq!(s.text(), "()");
+        assert_eq!(s.cursor.caret, Pos::new(0, 1));
+        // tipear ')' justo antes del ')' existente lo saltea, no duplica
+        s.apply_key(&evtext(")", false, false));
+        assert_eq!(s.text(), "()");
+        assert_eq!(s.cursor.caret, Pos::new(0, 2));
+    }
+
+    #[test]
+    fn tecleo_coalesce_en_un_solo_undo() {
+        let mut s = EditorState::new();
+        for ch in ["h", "o", "l", "a"] {
+            s.apply_key(&evtext(ch, false, false));
+        }
+        assert_eq!(s.text(), "hola");
+        // Un solo Ctrl+Z borra toda la ráfaga.
+        s.apply_key(&evtext("z", false, true));
+        assert_eq!(s.text(), "");
+    }
+
     #[test]
     fn enter_con_indent_auto() {
         let mut s = EditorState::new();
@@ -958,11 +1352,12 @@ mod tests {
     #[test]
     fn ctrl_z_y_ctrl_y_son_undo_redo() {
         let mut s = EditorState::new();
+        // "a" y "b" contiguos coalescen en un solo grupo de undo.
         s.apply_key(&evtext("a", false, false));
         s.apply_key(&evtext("b", false, false));
         assert_eq!(s.text(), "ab");
         s.apply_key(&evtext("z", false, true));
-        assert_eq!(s.text(), "a");
+        assert_eq!(s.text(), ""); // un Ctrl+Z deshace toda la ráfaga
         s.apply_key(&evtext("y", false, true));
         assert_eq!(s.text(), "ab");
     }
@@ -1204,6 +1599,7 @@ mod tests {
     }
 
     #[test]
+    #[cfg(feature = "treesitter")]
     fn highlight_cache_invalida_con_cambio_de_lenguaje() {
         use crate::highlight::Language;
         let mut s = EditorState::new();
diff --git a/widgets/text-editor/src/view.rs b/widgets/text-editor/src/view.rs
index fc27dbd..2a2420b 100644
--- a/widgets/text-editor/src/view.rs
+++ b/widgets/text-editor/src/view.rs
@@ -104,11 +104,14 @@ pub enum GutterStyle {
     #[default]
     Numbers,
     Phantom,
+    /// Sin gutter: ancho 0, nada dibujado. Para vistas tipo terminal donde
+    /// numerar líneas es ruido.
+    None,
 }
 
 /// Métricas del editor — todo derivado del `font_size`. Cambiar la
 /// fuente requiere recalcular `char_width` empíricamente para la mono
-/// que use llimphi-text; los valores acá son razonables para
+/// que use llimphi-text; los valores aquí son razonables para
 /// `font_size = 12` con la mono default de parley.
 #[derive(Debug, Clone, Copy)]
 pub struct EditorMetrics {
@@ -126,7 +129,7 @@ pub struct EditorMetrics {
     /// Si `true`, cada línea **guarda** (índices en
     /// `EditorState::guard_lines`) recibe un segmento horizontal con
     /// baja opacidad atravesando su centro — un divisor fantasma que
-    /// sugiere "acá termina un bloque" sin gritar. Sin guardas, esto
+    /// sugiere "aquí termina un bloque" sin gritar. Sin guardas, esto
     /// no hace nada visible. Default `false`: comportamiento IDE
     /// clásico.
     pub phantom_guard_lines: bool,
@@ -168,6 +171,19 @@ impl EditorMetrics {
         }
     }
 
+    /// Variante "terminal": sin gutter (ancho 0, sin números ni ticks) — para
+    /// pintar la salida de un PTY como texto plano donde numerar es ruido.
+    pub const fn terminal(font_size: f32) -> Self {
+        Self {
+            font_size,
+            line_height: font_size * 1.4,
+            char_width: font_size * 0.6,
+            gutter_width: 0.0,
+            gutter_style: GutterStyle::None,
+            phantom_guard_lines: false,
+        }
+    }
+
     /// Convierte coords locales del **área de contenido** (no del gutter)
     /// a `(line, col)` absolutas en el buffer. `local_x` se mide desde el
     /// borde izquierdo del área de texto (sin el padding interno de 4 px);
@@ -177,12 +193,35 @@ impl EditorMetrics {
     /// generalmente las pasa a `EditorState::set_caret_at` que clampea
     /// `col` al ancho real de la línea.
     pub fn screen_to_pos(self, local_x: f32, local_y: f32, scroll_offset: usize) -> (usize, usize) {
-        let line_local = (local_y / self.line_height).max(0.0) as usize;
-        let col = ((local_x - 4.0).max(0.0) / self.char_width).round() as usize;
+        let line_local = ((local_y - PAD_Y).max(0.0) / self.line_height) as usize;
+        let col = ((local_x - PAD_X).max(0.0) / self.char_width).round() as usize;
         (scroll_offset + line_local, col)
     }
 }
 
+/// Sangría izquierda del área de texto (px): aire entre el gutter y el
+/// primer carácter. El caret, la selección, el preedit y `screen_to_pos`
+/// usan la misma constante para no desalinearse.
+pub(crate) const PAD_X: f32 = 10.0;
+/// Aire vertical arriba de la primera línea (px). El gutter lo respeta para
+/// que los números queden a la par del texto.
+pub(crate) const PAD_Y: f32 = 7.0;
+/// Margen izquierdo del número de línea (px) — separa del borde del panel.
+const GUTTER_PAD_L: f32 = 6.0;
+/// Respiro entre el número de línea y el texto (px).
+const GUTTER_PAD_R: f32 = 8.0;
+
+/// X (px, dentro del área de contenido) del carácter en la columna `col`.
+#[inline]
+fn text_x(col: usize, m: EditorMetrics) -> f32 {
+    PAD_X + col as f32 * m.char_width
+}
+/// Y (px) del tope de la línea `local_line` (relativa al viewport).
+#[inline]
+fn text_y(local_line: usize, m: EditorMetrics) -> f32 {
+    PAD_Y + local_line as f32 * m.line_height
+}
+
 /// Render principal sin syntax highlight — todas las líneas visibles
 /// en `palette.fg_text`. `visible_lines` es cuántas líneas mostrar como
 /// máximo en el viewport.
@@ -221,6 +260,84 @@ pub enum PointerEvent {
     Drag { initial_x: f32, initial_y: f32, dx: f32, dy: f32 },
 }
 
+/// Override de estilo de texto sobre un rango de **columnas-char**
+/// `[start_col, end_col)` de una línea. A diferencia de [`Span`] (que sólo
+/// lleva una `TokenKind` → color), un `StyledSpan` lleva el set completo de
+/// propiedades rich-text que el caller quiera pisar: color de glifo, color de
+/// fondo (resaltado), familia, tamaño, peso, itálica, subrayado y tachado.
+/// Cada campo es opcional — `None` hereda del default del editor.
+///
+/// El widget traduce internamente las columnas-char a offsets de byte (que es
+/// lo que consume `text_spans`/parley) y pinta el `bg` como rect por debajo
+/// del texto (parley no lleva fondo por span). Pensado para editores de prosa
+/// que estilan zonas o la selección (pluma multilienzo); no se combina con el
+/// syntax highlight por `Language` — es una vía de pintado paralela.
+#[derive(Debug, Clone, Default, PartialEq)]
+pub struct StyledSpan {
+    pub start_col: usize,
+    pub end_col: usize,
+    pub fg: Option<Color>,
+    pub bg: Option<Color>,
+    pub font_family: Option<String>,
+    pub size_px: Option<f32>,
+    pub weight: Option<f32>,
+    pub italic: Option<bool>,
+    pub underline: Option<bool>,
+    pub strikethrough: Option<bool>,
+}
+
+/// Como [`text_editor_view_highlighted`] pero el caller provee, por línea, un
+/// conjunto de [`StyledSpan`] con estilo rich-text completo (color/fondo/
+/// fuente/tamaño/peso/itálica/subrayado/tachado). `styled_per_line[n]` son los
+/// spans de la línea `n` del buffer (índice absoluto). Las líneas sin spans se
+/// pintan planas en `palette.fg_text`. Va por encima del syntax highlight: si
+/// pasas spans, mandan ellos (el caso de pluma, que es prosa sin lenguaje).
+pub fn text_editor_view_styled<Msg: Clone + 'static>(
+    state: &EditorState,
+    palette: &EditorPalette,
+    metrics: EditorMetrics,
+    visible_lines: usize,
+    styled_per_line: &[Vec<StyledSpan>],
+    match_ranges: &[(usize, usize)],
+    on_pointer: impl Fn(PointerEvent) -> Option<Msg> + Send + Sync + Clone + 'static,
+) -> View<Msg> {
+    let caret = state.cursor.caret;
+    let syntax = crate::syntax_palette_dark(&llimphi_theme::Theme::dark());
+
+    let visible = visible_lines.max(1).min(200);
+    let line_count = state.line_count();
+    let scroll = state.scroll_offset.min(line_count.saturating_sub(1));
+    let end_line = (scroll + visible).min(line_count);
+    let height = (end_line - scroll) as f32 * metrics.line_height;
+
+    let gutter = build_gutter(state, scroll, end_line, caret.line, metrics, palette);
+    let content = build_content(
+        state,
+        palette,
+        metrics,
+        height,
+        scroll,
+        end_line,
+        Vec::new(),
+        &syntax,
+        match_ranges,
+        None,
+        Some(styled_per_line),
+        on_pointer,
+    );
+
+    View::new(Style {
+        flex_direction: FlexDirection::Row,
+        flex_grow: 1.0,
+        size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+        min_size: Size { width: auto(), height: length(height) },
+        ..Default::default()
+    })
+    .fill(palette.bg)
+    .clip(true)
+    .children(vec![gutter, content])
+}
+
 /// Render con syntax highlight + **viewport scrolling**: sólo se renderizan
 /// las líneas en `[state.scroll_offset, scroll_offset + visible_lines)`.
 ///
@@ -289,12 +406,20 @@ pub fn text_editor_view_full<Msg: Clone + 'static>(
         &syntax,
         match_ranges,
         None,
+        None,
         on_pointer,
     );
 
+    // Llena el alto disponible (para verse como UN campo continuo: se puede
+    // clickear/tipear debajo de la última línea), pero nunca colapsa por debajo
+    // del alto del contenido — `min_size` es el piso si el contenedor es
+    // chico/indefinido. El caret y los clicks debajo del texto aterrizan en la
+    // última línea (los clampea `set_caret_at`).
     View::new(Style {
         flex_direction: FlexDirection::Row,
-        size: Size { width: percent(1.0_f32), height: length(height) },
+        flex_grow: 1.0,
+        size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+        min_size: Size { width: auto(), height: length(height) },
         ..Default::default()
     })
     .fill(palette.bg)
@@ -337,6 +462,7 @@ pub fn text_editor_view_colored<Msg: Clone + 'static>(
         &syntax,
         &[],
         Some(line_color_runs),
+        None,
         on_pointer,
     );
     View::new(Style {
@@ -374,21 +500,26 @@ fn build_gutter<Msg: Clone + 'static>(
         } else {
             palette.fg_line_number
         };
-        let y = (n - scroll) as f32 * metrics.line_height;
+        let y = text_y(n - scroll, metrics);
         match metrics.gutter_style {
             GutterStyle::Numbers => {
                 let label = (n + 1).to_string();
+                // Número alineado a la derecha con un respiro de `GUTTER_PAD_R`
+                // hasta el texto (antes 4 px → se pegaba y el clip lo cortaba) y
+                // un margen izquierdo para que no toque el borde de la pantalla.
                 children.push(
                     View::new(Style {
                         position: Position::Absolute,
                         inset: Rect {
-                            left: length(0.0_f32),
+                            left: length(GUTTER_PAD_L),
                             top: length(y),
-                            right: length(4.0_f32),
+                            right: length(GUTTER_PAD_R),
                             bottom: auto(),
                         },
                         size: Size {
-                            width: length(metrics.gutter_width - 4.0),
+                            width: length(
+                                (metrics.gutter_width - GUTTER_PAD_L - GUTTER_PAD_R).max(1.0),
+                            ),
                             height: length(metrics.line_height),
                         },
                         align_items: Some(AlignItems::Center),
@@ -398,6 +529,7 @@ fn build_gutter<Msg: Clone + 'static>(
                     .mono(),
                 );
             }
+            GutterStyle::None => {}
             GutterStyle::Phantom => {
                 // Tick fantasma — un segmento horizontal corto centrado
                 // verticalmente en la línea, con la opacidad bajada.
@@ -432,7 +564,7 @@ fn build_gutter<Msg: Clone + 'static>(
     // se mezcla con el fondo del editor. El gutter "está sin estar".
     let bg = match metrics.gutter_style {
         GutterStyle::Numbers => palette.bg_gutter,
-        GutterStyle::Phantom => palette.bg,
+        GutterStyle::Phantom | GutterStyle::None => palette.bg,
     };
     View::new(Style {
         size: Size {
@@ -469,6 +601,10 @@ fn build_content<Msg: Clone + 'static>(
     // gana sobre el syntax highlight — para callers que colorean por semántica
     // propia (un shell que tinta `ls`, paths, urls…). `None` = highlight normal.
     color_runs: Option<&[Vec<(usize, usize, Color)>]>,
+    // Spans rich-text por línea (color/fondo/fuente/tamaño/peso/itálica/…).
+    // Cuando es `Some`, ganan sobre el syntax highlight — la vía de pluma para
+    // estilar zonas y selección de prosa. `None` = comportamiento previo.
+    styled_per_line: Option<&[Vec<StyledSpan>]>,
     on_pointer: impl Fn(PointerEvent) -> Option<Msg> + Send + Sync + Clone + 'static,
 ) -> View<Msg> {
     let caret = state.cursor.caret;
@@ -495,6 +631,17 @@ fn build_content<Msg: Clone + 'static>(
         children.extend(match_rects(state, *s, *e, scroll, end_line, metrics, palette));
     }
 
+    // 1c) Fondos de los spans estilados (resaltado). Por debajo de la
+    //     selección y del texto, igual que los tintes — un rect por span
+    //     con `bg`. Char-cols → x/w vía `char_width` (mono).
+    if let Some(styled) = styled_per_line {
+        for n in scroll..end_line {
+            if let Some(line_spans) = styled.get(n) {
+                children.extend(styled_bg_rects(n - scroll, line_spans, metrics));
+            }
+        }
+    }
+
     // 2) Selección — por cada cursor que tenga selección.
     for c in state.all_cursors() {
         if c.has_selection() {
@@ -526,7 +673,9 @@ fn build_content<Msg: Clone + 'static>(
             children.push(phantom_guard_divider(local_line, metrics, palette));
             continue;
         }
-        if let Some(runs) = color_runs.and_then(|cr| cr.get(n)) {
+        if let Some(line_spans) = styled_per_line.and_then(|s| s.get(n)).filter(|s| !s.is_empty()) {
+            children.push(line_text_styled(local_line, &text, line_spans, metrics, palette));
+        } else if let Some(runs) = color_runs.and_then(|cr| cr.get(n)) {
             children.push(line_text_color_runs(local_line, &text, runs, metrics, palette));
         } else if let Some(line_spans) = spans_per_line.get(n) {
             children.push(line_text_tokens(local_line, &text, line_spans, metrics, palette, syntax));
@@ -543,11 +692,12 @@ fn build_content<Msg: Clone + 'static>(
     // 4) Caret — uno por cursor, sólo si visible. El caret del cursor
     //    primario se corre detrás del preedit del IME en composición (el
     //    texto compuesto se pinta desde `p.col`), para que quede al final
-    //    de lo que el usuario está tecleando.
+    //    de lo que el usuario está tecleando. En la fase "apagada" del
+    //    parpadeo (`caret_on == false`) no se dibuja ningún caret.
     let preedit_cols = state.preedit.as_ref().map_or(0, |p| p.text.chars().count());
     for c in state.all_cursors() {
         let p = c.caret;
-        if p.line >= scroll && p.line < end_line {
+        if state.caret_on && p.line >= scroll && p.line < end_line {
             let is_primary = std::ptr::eq(c, &state.cursor);
             let col = if is_primary { p.col + preedit_cols } else { p.col };
             let local = crate::cursor::Pos::new(p.line - scroll, col);
@@ -571,11 +721,16 @@ fn build_content<Msg: Clone + 'static>(
     let drag_cb = on_pointer;
     View::new(Style {
         flex_grow: 1.0,
-        size: Size { width: percent(1.0_f32), height: length(height) },
+        // Llena el alto del editor (campo continuo), con piso en el alto del
+        // contenido para el modo embebido que scrollea (`_colored`).
+        size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+        min_size: Size { width: auto(), height: length(height) },
         ..Default::default()
     })
     .fill(palette.bg)
     .clip(true)
+    // Cursor de texto (I-beam) sobre el área editable; fuera vuelve al normal.
+    .cursor(llimphi_ui::Cursor::Text)
     .on_click_at(move |x, y, _w, _h| click_cb(PointerEvent::Click { x, y }))
     .draggable_at(move |phase, dx, dy, lx, ly| match phase {
         llimphi_ui::DragPhase::Move => drag_cb(PointerEvent::Drag {
@@ -601,7 +756,7 @@ fn line_tint<Msg: Clone + 'static>(
         position: Position::Absolute,
         inset: Rect {
             left: length(0.0_f32),
-            top: length(line as f32 * metrics.line_height),
+            top: length(text_y(line, metrics)),
             right: length(0.0_f32),
             bottom: auto(),
         },
@@ -623,7 +778,7 @@ fn line_highlight<Msg: Clone + 'static>(
         position: Position::Absolute,
         inset: Rect {
             left: length(0.0_f32),
-            top: length(line as f32 * metrics.line_height),
+            top: length(text_y(line, metrics)),
             right: length(0.0_f32),
             bottom: auto(),
         },
@@ -646,7 +801,7 @@ fn phantom_guard_divider<Msg: Clone + 'static>(
     palette: &EditorPalette,
 ) -> View<Msg> {
     let h = 1.0_f32;
-    let y = line as f32 * metrics.line_height + (metrics.line_height - h) * 0.5;
+    let y = text_y(line, metrics) + (metrics.line_height - h) * 0.5;
     // Largo visual del divisor — generoso pero no infinito.
     let w = 320.0_f32;
     View::new(Style {
@@ -675,8 +830,8 @@ fn line_text_plain<Msg: Clone + 'static>(
     View::new(Style {
         position: Position::Absolute,
         inset: Rect {
-            left: length(4.0_f32),
-            top: length(line as f32 * metrics.line_height),
+            left: length(PAD_X),
+            top: length(text_y(line, metrics)),
             right: auto(),
             bottom: auto(),
         },
@@ -731,8 +886,8 @@ fn line_text_tokens<Msg: Clone + 'static>(
     View::new(Style {
         position: Position::Absolute,
         inset: Rect {
-            left: length(4.0_f32),
-            top: length(line as f32 * metrics.line_height),
+            left: length(PAD_X),
+            top: length(text_y(line, metrics)),
             right: auto(),
             bottom: auto(),
         },
@@ -762,8 +917,8 @@ fn line_text_color_runs<Msg: Clone + 'static>(
     View::new(Style {
         position: Position::Absolute,
         inset: Rect {
-            left: length(4.0_f32),
-            top: length(line as f32 * metrics.line_height),
+            left: length(PAD_X),
+            top: length(text_y(line, metrics)),
             right: auto(),
             bottom: auto(),
         },
@@ -780,13 +935,115 @@ fn line_text_color_runs<Msg: Clone + 'static>(
     .mono()
 }
 
+/// Renderiza una línea con spans rich-text ([`StyledSpan`]): construye los
+/// [`llimphi_text::TextSpan`] (offsets en byte, vía el mapa char→byte) y los
+/// pasa a `text_spans`. El fondo de cada span lo pinta [`styled_bg_rects`]
+/// aparte. El texto fuera de todo span va en `palette.fg_text` /
+/// `metrics.font_size`. Mantiene `.mono()` para que el posicionamiento por
+/// `char_width` (caret/selección) siga cuadrando.
+fn line_text_styled<Msg: Clone + 'static>(
+    line: usize,
+    text: &str,
+    spans: &[StyledSpan],
+    metrics: EditorMetrics,
+    palette: &EditorPalette,
+) -> View<Msg> {
+    // char-col → byte-offset (parley rangea por bytes; los spans, por chars).
+    let mut byte_at: Vec<usize> = Vec::with_capacity(text.len() + 1);
+    let mut acc = 0usize;
+    byte_at.push(0);
+    for ch in text.chars() {
+        acc += ch.len_utf8();
+        byte_at.push(acc);
+    }
+    let nchars = byte_at.len() - 1;
+
+    let mut ts: Vec<llimphi_ui::llimphi_text::TextSpan> = Vec::with_capacity(spans.len());
+    for s in spans {
+        if s.start_col >= nchars {
+            continue;
+        }
+        let end = s.end_col.min(nchars);
+        if end <= s.start_col {
+            continue;
+        }
+        let style = llimphi_ui::llimphi_text::TextSpanStyle {
+            size_px: s.size_px,
+            weight: s.weight,
+            italic: s.italic,
+            font_family: s.font_family.clone(),
+            color: s.fg,
+            underline: s.underline,
+            strikethrough: s.strikethrough,
+        };
+        ts.push(llimphi_ui::llimphi_text::TextSpan::new(
+            byte_at[s.start_col],
+            byte_at[end],
+            style,
+        ));
+    }
+
+    View::new(Style {
+        position: Position::Absolute,
+        inset: Rect {
+            left: length(PAD_X),
+            top: length(text_y(line, metrics)),
+            right: auto(),
+            bottom: auto(),
+        },
+        size: Size { width: length(2000.0_f32), height: length(metrics.line_height) },
+        ..Default::default()
+    })
+    .text_spans(
+        text.to_string(),
+        metrics.font_size,
+        palette.fg_text,
+        ts,
+        Alignment::Start,
+    )
+    .mono()
+}
+
+/// Rects de fondo (resaltado) de los spans de una línea con `bg` definido.
+/// Char-cols → x/w por `char_width` (mono), mismo origen que el texto.
+fn styled_bg_rects<Msg: Clone + 'static>(
+    local_line: usize,
+    spans: &[StyledSpan],
+    metrics: EditorMetrics,
+) -> Vec<View<Msg>> {
+    let mut out: Vec<View<Msg>> = Vec::new();
+    for s in spans {
+        let Some(bg) = s.bg else { continue };
+        if s.end_col <= s.start_col {
+            continue;
+        }
+        let x = text_x(s.start_col, metrics);
+        let w = (s.end_col - s.start_col) as f32 * metrics.char_width;
+        out.push(
+            View::new(Style {
+                position: Position::Absolute,
+                inset: Rect {
+                    left: length(x),
+                    top: length(text_y(local_line, metrics)),
+                    right: auto(),
+                    bottom: auto(),
+                },
+                size: Size { width: length(w), height: length(metrics.line_height) },
+                ..Default::default()
+            })
+            .fill(bg),
+        );
+    }
+    out
+}
+
 fn caret_rect<Msg: Clone + 'static>(
     caret: Pos,
     metrics: EditorMetrics,
     palette: &EditorPalette,
 ) -> View<Msg> {
-    let x = 4.0 + caret.col as f32 * metrics.char_width;
-    let y = caret.line as f32 * metrics.line_height;
+    let x = text_x(caret.col, metrics);
+    let y = text_y(caret.line, metrics);
     View::new(Style {
         position: Position::Absolute,
         inset: Rect {
@@ -812,8 +1069,8 @@ fn preedit_views<Msg: Clone + 'static>(
     metrics: EditorMetrics,
     palette: &EditorPalette,
 ) -> Vec<View<Msg>> {
-    let x = 4.0 + col as f32 * metrics.char_width;
-    let y = local_line as f32 * metrics.line_height;
+    let x = text_x(col, metrics);
+    let y = text_y(local_line, metrics);
     let w = (text.chars().count() as f32 * metrics.char_width).max(metrics.char_width);
     vec![
         // Texto provisional, en el color de texto normal.
@@ -852,8 +1109,8 @@ fn bracket_highlight<Msg: Clone + 'static>(
     metrics: EditorMetrics,
     palette: &EditorPalette,
 ) -> View<Msg> {
-    let x = 4.0 + pos.col as f32 * metrics.char_width;
-    let y = pos.line as f32 * metrics.line_height;
+    let x = text_x(pos.col, metrics);
+    let y = text_y(pos.line, metrics);
     View::new(Style {
         position: Position::Absolute,
         inset: Rect {
@@ -898,10 +1155,10 @@ fn diagnostic_underline<Msg: Clone + 'static>(
         if col_end <= col_start {
             continue;
         }
-        let x = 4.0 + col_start as f32 * metrics.char_width;
+        let x = text_x(col_start, metrics);
         let w = (col_end - col_start) as f32 * metrics.char_width;
         // Subrayado de 1.5 px al final de la línea.
-        let y = (line - scroll) as f32 * metrics.line_height + metrics.line_height - 2.0;
+        let y = text_y(line - scroll, metrics) + metrics.line_height - 2.0;
         out.push(
             View::new(Style {
                 position: Position::Absolute,
@@ -947,9 +1204,9 @@ fn match_rects<Msg: Clone + 'static>(
         if col_end <= col_start {
             continue;
         }
-        let x = 4.0 + col_start as f32 * metrics.char_width;
+        let x = text_x(col_start, metrics);
         let w = (col_end - col_start) as f32 * metrics.char_width;
-        let local_y = (line - scroll) as f32 * metrics.line_height;
+        let local_y = text_y(line - scroll, metrics);
         out.push(
             View::new(Style {
                 position: Position::Absolute,
@@ -993,13 +1250,13 @@ fn selection_rects_for_cursor<Msg: Clone + 'static>(
         let line_len = state.buffer.line_len_chars(line);
         let col_start = if line == start_line { start_col } else { 0 };
         let col_end = if line == end_line { end_col } else { line_len };
-        let x = 4.0 + col_start as f32 * metrics.char_width;
+        let x = text_x(col_start, metrics);
         let extra = if line < end_line { 1.0 } else { 0.0 };
         let w = ((col_end - col_start) as f32 + extra) * metrics.char_width;
         if w <= 0.0 {
             continue;
         }
-        let local_y = (line - scroll) as f32 * metrics.line_height;
+        let local_y = text_y(line - scroll, metrics);
         out.push(
             View::new(Style {
                 position: Position::Absolute,
diff --git a/widgets/text-input/Cargo.toml b/widgets/text-input/Cargo.toml
index d54e0d2..46d0140 100644
--- a/widgets/text-input/Cargo.toml
+++ b/widgets/text-input/Cargo.toml
@@ -5,10 +5,14 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-text-input — input de texto single-line para Llimphi. Wrappea el llimphi-widget-text-editor en modo single_line para heredar selección con shift+arrows, undo/redo, word-jump con Ctrl, sin perder la API compacta original."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
 llimphi-widget-text-editor = { workspace = true }
+
+[dev-dependencies]
+# Sólo para el example `campo_demo` (animación del label flotante con Tween).
+llimphi-motion = { workspace = true }
diff --git a/widgets/text-input/examples/area_demo.rs b/widgets/text-input/examples/area_demo.rs
new file mode 100644
index 0000000..458439c
--- /dev/null
+++ b/widgets/text-input/examples/area_demo.rs
@@ -0,0 +1,149 @@
+//! Demo de `text_area_view`: el input de texto **multilínea** con paridad real
+//! (mismo motor que el single-line), en vivo.
+//!
+//! Corre con: `cargo run -p llimphi-widget-text-input --example area_demo --release`.
+//!
+//! Qué mirar / probar (esto es lo que el viejo text-area de `String` plano NO
+//! podía — su caret era un bloque fijo al final del texto):
+//! - **Click en cualquier lado** coloca el caret en el renglón + columna exactos
+//!   (glifos reales, no ancho fijo, no "el final").
+//! - **↑/↓** navegan entre renglones (preservan la columna deseada); ←/→,
+//!   Inicio/Fin, salto de palabra (Ctrl+←/→).
+//! - **Selección**: arrastre a través de líneas, doble-click = palabra,
+//!   triple = renglón, Shift+flechas.
+//! - **Copiar/cortar/pegar** (Ctrl+C/X/V), **deshacer/rehacer** (Ctrl+Z/Y),
+//!   **acentos/IME** (´ + a → á).
+//! - **Soft-wrap**: la línea larga se **envuelve** sola al ancho de la caja
+//!   (redimensiona la ventana y se re-acomoda) — el click sigue cayendo en la
+//!   columna correcta del renglón envuelto.
+//! - **Scroll vertical**: hay más líneas que renglones visibles; muévete con ↑/↓
+//!   más allá del borde y el bloque **scrollea** para mantener el caret a la vista.
+//! - **Enter** inserta salto de línea (no "submit").
+
+use llimphi_ui::llimphi_layout::taffy::{
+    prelude::{length, percent, FlexDirection, Size, Style},
+    AlignItems, Rect,
+};
+use llimphi_ui::llimphi_raster::peniko::Color;
+use llimphi_ui::llimphi_text::Alignment;
+use llimphi_ui::{App, Handle, KeyEvent, View};
+use llimphi_widget_text_input::{
+    text_area_view, MemClipboard, TextAreaEvent, TextInputPalette, TextInputState,
+};
+
+#[derive(Clone, Debug)]
+enum Msg {
+    Area(TextAreaEvent),
+    Tecla(KeyEvent),
+}
+
+struct Model {
+    texto: TextInputState,
+    focado: bool,
+    clip: MemClipboard,
+}
+
+struct Demo;
+
+impl App for Demo {
+    type Model = Model;
+    type Msg = Msg;
+
+    fn title() -> &'static str {
+        "llimphi · text-area (input multilínea, paridad real)"
+    }
+
+    fn initial_size() -> (u32, u32) {
+        (720, 460)
+    }
+
+    fn init(_: &Handle<Msg>) -> Model {
+        let mut texto = TextInputState::multiline();
+        texto.set_text(
+            "Este es un text-area REAL sobre el mismo motor EditorState que el input de una línea, así que hereda selección, undo, copiar/pegar e IME — y además esta primera línea es deliberadamente larga para que veas el soft-wrap: se parte sola al ancho de la caja.\n\nClickeá en cualquier palabra: el caret cae donde haces click (renglón y columna real), no al final.\n\nArrastrá para seleccionar a través de líneas.\nDoble-click = palabra, triple = renglón.\nCtrl+C / Ctrl+X / Ctrl+V, Ctrl+Z para deshacer.\n↑/↓ navegan; hay más líneas que las visibles,\nasí que al bajar el bloque scrollea solo.\n\nEnter agrega líneas. Prueba redimensionar la\nventana: el wrap se re-acomoda al ancho nuevo.",
+        );
+        Model {
+            texto,
+            focado: true,
+            clip: MemClipboard::new(),
+        }
+    }
+
+    fn on_key(model: &Model, event: &KeyEvent) -> Option<Msg> {
+        model.focado.then(|| Msg::Tecla(event.clone()))
+    }
+
+    fn ime_allowed() -> bool {
+        true
+    }
+
+    fn update(model: Model, msg: Msg, _handle: &Handle<Msg>) -> Model {
+        let mut m = model;
+        let mut clip = std::mem::take(&mut m.clip);
+        match msg {
+            Msg::Area(ev) => {
+                if matches!(ev, TextAreaEvent::Press(..) | TextAreaEvent::Context { .. }) {
+                    m.focado = true;
+                }
+                m.texto.handle_area(ev, &mut clip);
+            }
+            Msg::Tecla(e) => {
+                m.texto.handle_area(TextAreaEvent::Key(e), &mut clip);
+            }
+        }
+        m.clip = clip;
+        m
+    }
+
+    fn view(model: &Model) -> View<Msg> {
+        let pal = TextInputPalette::default();
+        let area = text_area_view(
+            &model.texto,
+            "Escribe algo multilínea…",
+            model.focado,
+            7,
+            &pal,
+            Msg::Area,
+        );
+
+        let hint = View::new(Style {
+            size: Size {
+                width: percent(1.0_f32),
+                height: length(22.0_f32),
+            },
+            ..Default::default()
+        })
+        .text_aligned(
+            "click = caret 2D · arrastre/doble-click = selección · ↑↓ renglones · Ctrl+C/V · Enter = salto".to_string(),
+            11.5,
+            Color::from_rgba8(150, 160, 180, 255),
+            Alignment::Start,
+        );
+
+        View::new(Style {
+            flex_direction: FlexDirection::Column,
+            size: Size {
+                width: percent(1.0_f32),
+                height: percent(1.0_f32),
+            },
+            gap: Size {
+                width: length(0.0_f32),
+                height: length(12.0_f32),
+            },
+            padding: Rect {
+                left: length(28.0_f32),
+                right: length(28.0_f32),
+                top: length(24.0_f32),
+                bottom: length(24.0_f32),
+            },
+            align_items: Some(AlignItems::Stretch),
+            ..Default::default()
+        })
+        .fill(Color::from_rgba8(16, 19, 26, 255))
+        .children(vec![hint, area])
+    }
+}
+
+fn main() {
+    llimphi_ui::run::<Demo>();
+}
diff --git a/widgets/text-input/examples/campo_demo.rs b/widgets/text-input/examples/campo_demo.rs
new file mode 100644
index 0000000..a02be69
--- /dev/null
+++ b/widgets/text-input/examples/campo_demo.rs
@@ -0,0 +1,187 @@
+//! Demo de `llimphi-widget-text-input`: la paridad TextField/Flutter en vivo.
+//!
+//! Corre con: `cargo run -p llimphi-widget-text-input --example campo_demo --release`.
+//!
+//! Qué mirar:
+//! - **Label flotante ANIMADO**: al focar (o escribir), el rótulo **sube** con
+//!   una animación, se achica, cambia al color de foco y **corta el borde**
+//!   (notched outline de Material) — el hueco del borde se ajusta a su ancho.
+//! - **Relieve**: sombra + sheen + esquinas redondeadas; el borde engorda al focar.
+//! - **Scroll horizontal**: escribe más de lo que entra — el caret se mantiene a
+//!   la vista y el texto se corre (o mira el campo prellenado largo).
+//! - **Selección real**: doble-click = palabra, triple = todo, arrastre = rango;
+//!   el click cae en la letra correcta (glifos reales, no ancho fijo).
+//! - **Password**: puntos, sin filtrar el valor.
+
+use llimphi_motion::{animate, motion, Tween};
+use llimphi_ui::llimphi_layout::taffy::{
+    prelude::{length, percent, FlexDirection, Size, Style},
+    AlignItems, Rect,
+};
+use llimphi_ui::llimphi_raster::peniko::Color;
+use llimphi_ui::{App, Handle, KeyEvent, View};
+use llimphi_widget_text_input::{
+    float_target, text_input_field_view, text_input_view_full, MemClipboard, TextInputEvent,
+    TextInputPalette, TextInputState,
+};
+
+/// Cuántos campos usan label flotante (los tres primeros).
+const N_LABEL: usize = 3;
+/// Rótulos de los campos con label flotante.
+const LABELS: &[&str] = &["Nombre", "Correo", "Buscar (escribe para desbordar)"];
+
+#[derive(Clone, Debug)]
+enum Msg {
+    Campo(usize, TextInputEvent),
+    Tecla(KeyEvent),
+    /// Tick de animación (sólo dispara re-render; la view lee el Tween).
+    Tick,
+}
+
+struct Model {
+    campos: Vec<TextInputState>,
+    foco: Option<usize>,
+    clip: MemClipboard,
+    /// Animación del label flotante de cada campo con label (0=dentro, 1=arriba).
+    floats: Vec<Tween<f32>>,
+    /// Destino actual de cada `float` (para saber cuándo relanzar el tween).
+    targets: Vec<f32>,
+}
+
+struct Demo;
+
+impl Demo {
+    /// Tras un cambio, relanza el tween de los labels cuyo destino cambió (focar,
+    /// desfocar, o pasar de vacío↔con-texto) y arranca los ticks de animación.
+    fn reanimar(m: &mut Model, handle: &Handle<Msg>) {
+        for i in 0..N_LABEL {
+            let tgt = float_target(m.foco == Some(i), &m.campos[i]);
+            if (tgt - m.targets[i]).abs() > f32::EPSILON {
+                let actual = m.floats[i].value();
+                m.floats[i] = Tween::new(actual, tgt, motion::NORMAL, motion::ease_out_cubic);
+                m.targets[i] = tgt;
+                animate(handle, motion::NORMAL, || Msg::Tick);
+            }
+        }
+    }
+}
+
+impl App for Demo {
+    type Model = Model;
+    type Msg = Msg;
+
+    fn title() -> &'static str {
+        "llimphi · campo de texto (paridad TextField)"
+    }
+
+    fn init(_: &Handle<Msg>) -> Model {
+        let mut prellenado = TextInputState::new();
+        prellenado
+            .set_text("un texto largo que desborda la caja para ver el scroll horizontal del caret");
+        let campos = vec![
+            TextInputState::new(),    // 0: label "Nombre"
+            TextInputState::new(),    // 1: label "Correo"
+            prellenado,               // 2: label + scroll (arranca con texto → flotado)
+            TextInputState::new(),    // 3: plano
+            TextInputState::masked(), // 4: password
+        ];
+        // El campo 2 arranca con texto → su label ya está flotado.
+        let targets: Vec<f32> = (0..N_LABEL).map(|i| float_target(false, &campos[i])).collect();
+        let floats = targets.iter().map(|&t| Tween::idle(t)).collect();
+        Model {
+            campos,
+            foco: None,
+            clip: MemClipboard::new(),
+            floats,
+            targets,
+        }
+    }
+
+    fn on_key(model: &Model, event: &KeyEvent) -> Option<Msg> {
+        model.foco.map(|_| Msg::Tecla(event.clone()))
+    }
+
+    fn ime_allowed() -> bool {
+        true
+    }
+
+    fn update(model: Model, msg: Msg, handle: &Handle<Msg>) -> Model {
+        let mut m = model;
+        match msg {
+            Msg::Tick => {}
+            Msg::Campo(i, ev) => {
+                if matches!(ev, TextInputEvent::Press(_) | TextInputEvent::Context { .. })
+                    && m.foco != Some(i)
+                {
+                    m.foco = Some(i);
+                }
+                if let Some(st) = m.campos.get_mut(i) {
+                    let mut clip = std::mem::take(&mut m.clip);
+                    st.handle(ev, &mut clip);
+                    m.clip = clip;
+                }
+                Demo::reanimar(&mut m, handle);
+            }
+            Msg::Tecla(e) => {
+                if let Some(i) = m.foco {
+                    if let Some(st) = m.campos.get_mut(i) {
+                        let mut clip = std::mem::take(&mut m.clip);
+                        st.handle(TextInputEvent::Key(e), &mut clip);
+                        m.clip = clip;
+                    }
+                }
+                Demo::reanimar(&mut m, handle);
+            }
+        }
+        m
+    }
+
+    fn view(model: &Model) -> View<Msg> {
+        let pal = TextInputPalette::default();
+        let mut filas: Vec<View<Msg>> = Vec::new();
+
+        for (i, label) in LABELS.iter().enumerate() {
+            let focado = model.foco == Some(i);
+            let t = model.floats[i].value();
+            let idx = i;
+            filas.push(text_input_field_view(
+                &model.campos[i],
+                label,
+                focado,
+                t,
+                &pal,
+                move |ev| Msg::Campo(idx, ev),
+            ));
+        }
+        for (i, ph) in [(3usize, "campo plano (placeholder)"), (4, "contraseña")] {
+            let focado = model.foco == Some(i);
+            filas.push(text_input_view_full(
+                &model.campos[i],
+                ph,
+                focado,
+                &pal,
+                move |ev| Msg::Campo(i, ev),
+            ));
+        }
+
+        View::new(Style {
+            flex_direction: FlexDirection::Column,
+            size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+            gap: Size { width: length(0.0_f32), height: length(20.0_f32) },
+            padding: Rect {
+                left: length(40.0_f32),
+                right: length(40.0_f32),
+                top: length(36.0_f32),
+                bottom: length(36.0_f32),
+            },
+            align_items: Some(AlignItems::Stretch),
+            ..Default::default()
+        })
+        .fill(Color::from_rgba8(18, 21, 28, 255))
+        .children(filas)
+    }
+}
+
+fn main() {
+    llimphi_ui::run::<Demo>();
+}
diff --git a/widgets/text-input/src/area.rs b/widgets/text-input/src/area.rs
new file mode 100644
index 0000000..816650e
--- /dev/null
+++ b/widgets/text-input/src/area.rs
@@ -0,0 +1,744 @@
+//! Text-area (input de texto **multilínea**) sobre el mismo motor que el
+//! single-line: [`super::TextInputState`] con un `EditorState` construido con
+//! [`super::TextInputState::multiline`]. No hay estado paralelo ni un `String`
+//! plano: hereda selección, undo/redo, salto de palabra, Home/End, copiar/pegar
+//! e IME del motor, y agrega lo que faltaba para multilínea:
+//!
+//! - **Layout visual** ([`visual_layout`]): parte cada línea lógica en
+//!   **renglones visuales** según el ancho disponible (soft-wrap por palabra, con
+//!   corte duro para palabras larguísimas). Es la **fuente única** que comparten
+//!   el render, el hit-testing y el pintado del caret — así los tres coinciden.
+//! - **Hit-testing 2D real**: cada renglón visual se pinta como un nodo de alto
+//!   fijo [`AREA_LINE_H`] → `y → renglón visual` exacto; dentro, `x → columna`
+//!   midiendo los **glifos reales** del segmento ([`super::col_from_x_pad`]).
+//! - **Scroll vertical**: si hay más renglones visuales que `rows`, el bloque se
+//!   desplaza para mantener el caret a la vista (mínimo, con histéresis: sólo
+//!   scrollea al salir del viewport). Espeja el scroll horizontal del single-line.
+//! - **Caret y selección a través de líneas/wraps**: un `paint_over` los dibuja en
+//!   coordenadas de renglón visual, restando el scroll.
+//!
+//! Limitación conocida (follow-up, anotada — no fingida): **↑/↓ navegan por línea
+//! lógica**, no por renglón visual (el motor `EditorState` razona en líneas
+//! lógicas). El click 2D sí cae en el renglón visual correcto de una línea
+//! envuelta; sólo la navegación vertical por teclado salta la línea entera.
+
+use std::sync::atomic::Ordering;
+
+use llimphi_ui::llimphi_text::Alignment;
+use llimphi_ui::{ImeEvent, Key, KeyEvent, NamedKey, View};
+
+use super::{
+    col_from_x_pad_m, prefix_width_colapsando, prefix_width_m, Clipboard, Metricas,
+    TextInputPalette, TextInputState,
+};
+
+/// Alto (px) de cada renglón visual del text-area con la métrica default.
+/// Se mantiene como constante pública porque varios hosts dimensionan su caja
+/// con ella; la métrica real de un cuadro es [`Metricas::line_h`].
+pub const AREA_LINE_H: f32 = 19.0;
+
+/// Un **renglón visual**: un tramo `[start, end)` (en columnas de carácter) de la
+/// línea lógica `line`. Una línea que entra en el ancho es un solo renglón; una
+/// que se envuelve son varios contiguos que cubren toda la línea.
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub(crate) struct VisualRow {
+    pub(crate) line: usize,
+    pub(crate) start: usize,
+    pub(crate) end: usize,
+}
+
+/// Ancho (px) del subtramo `[a, b)` de `line`, por diferencia de prefijos
+/// medidos con la fuente real (misma que el render).
+fn seg_width(line: &str, a: usize, b: usize, m: &Metricas) -> f32 {
+    prefix_width_colapsando(line, b, m) - prefix_width_colapsando(line, a, m)
+}
+
+/// Parte `text` en renglones visuales para el `wrap_w` dado (ancho del área de
+/// texto, px). `wrap_w <= 1` (aún sin medir la caja) ⇒ sin envolver (un renglón
+/// por línea lógica). Word-wrap: corta en el último espacio que entra; si una
+/// palabra sola no entra, corte duro por carácter (siempre progresa).
+pub(crate) fn visual_layout(text: &str, wrap_w: f32, m: &Metricas) -> Vec<VisualRow> {
+    let logical: Vec<&str> = if text.is_empty() {
+        vec![""]
+    } else {
+        text.split('\n').collect()
+    };
+    let mut rows = Vec::new();
+    for (li, line) in logical.iter().enumerate() {
+        let n = line.chars().count();
+        if n == 0 {
+            rows.push(VisualRow { line: li, start: 0, end: 0 });
+            continue;
+        }
+        if wrap_w <= 1.0 || seg_width(line, 0, n, m) <= wrap_w {
+            rows.push(VisualRow { line: li, start: 0, end: n });
+            continue;
+        }
+        let chars: Vec<char> = line.chars().collect();
+        let mut start = 0usize;
+        while start < n {
+            let mut end = start;
+            let mut last_space: Option<usize> = None; // corte tras un espacio
+            while end < n {
+                if seg_width(line, start, end + 1, m) > wrap_w && end > start {
+                    break;
+                }
+                end += 1;
+                if chars[end - 1] == ' ' {
+                    last_space = Some(end);
+                }
+            }
+            let brk = if end >= n {
+                n
+            } else {
+                last_space.filter(|&b| b > start).unwrap_or(end)
+            };
+            let brk = brk.clamp(start + 1, n);
+            rows.push(VisualRow { line: li, start, end: brk });
+            start = brk;
+        }
+    }
+    if rows.is_empty() {
+        rows.push(VisualRow { line: 0, start: 0, end: 0 });
+    }
+    rows
+}
+
+/// n-ésima línea lógica de `text` (o `""`).
+pub(crate) fn nth_line(text: &str, i: usize) -> &str {
+    if text.is_empty() {
+        return "";
+    }
+    text.split('\n').nth(i).unwrap_or("")
+}
+
+/// Índice del renglón visual que contiene el caret. En un borde de wrap
+/// (`col == end`) prefiere el renglón de continuación (inicio del siguiente).
+pub(crate) fn caret_vrow(rows: &[VisualRow], caret_line: usize, caret_col: usize) -> usize {
+    let mut idx = 0;
+    for (i, r) in rows.iter().enumerate() {
+        if r.line == caret_line && caret_col >= r.start && caret_col <= r.end {
+            idx = i;
+            if caret_col < r.end {
+                break;
+            }
+        }
+    }
+    idx
+}
+
+/// Eventos de entrada del text-area — ver el enum en el crate. Idéntico patrón
+/// que [`super::TextInputEvent`] pero los gestos de mouse llevan `(x, y)`.
+#[derive(Debug, Clone)]
+pub enum TextAreaEvent {
+    /// Tecla (con modificadores). Ctrl+C/X/V sobre el clipboard. Enter = `\n`.
+    Key(KeyEvent),
+    /// Evento de IME (acentos compuestos, CJK, emoji).
+    Ime(ImeEvent),
+    /// Mouse-down a `(x, y)` px locales al bloque de texto: coloca el caret y
+    /// escala a palabra/todo por doble/triple-click.
+    Press(f32, f32),
+    /// Arrastre: `anchor` = press (px), `dx`/`dy` = delta. Extiende selección 2D.
+    Drag { anchor: (f32, f32), dx: f32, dy: f32 },
+    /// Fin del arrastre.
+    DragEnd,
+    /// Click derecho a `(x, y)` (coords absolutas de ventana): pide el menú de
+    /// edición. No cambia el estado (lo intercepta el host).
+    Context { x: f32, y: f32 },
+}
+
+impl TextInputState {
+    /// Ancho (px) del área de texto según el último frame pintado. `0` si la caja
+    /// aún no se midió (primer frame) ⇒ sin soft-wrap ese frame.
+    fn area_wrap_w(&self) -> f32 {
+        let m = self.metricas();
+        let bw = f32::from_bits(self.box_w.load(Ordering::Relaxed));
+        if bw <= 1.0 {
+            return 0.0;
+        }
+        (bw - m.pad_x - m.pad_r).max(0.0)
+    }
+
+    /// Cuántos **renglones visuales** ocupa hoy el texto con el ancho y la
+    /// métrica del último cuadro pintado (1 si todavía no se midió la caja).
+    ///
+    /// Lo necesita un host que **crece con el contenido**: en un layer-shell la
+    /// vista no puede desbordar su surface, así que la altura la decide el host,
+    /// y para decidirla tiene que poder preguntar cuánto va a ocupar el texto
+    /// *antes* de pintarlo. Sin esto, cada host se reimplementa el ajuste blando
+    /// —y el suyo y el del widget se desfasan en el primer caso raro.
+    pub fn renglones_visuales(&self) -> usize {
+        let m = self.metricas();
+        visual_layout(&self.text(), self.area_wrap_w(), &m).len()
+    }
+
+    /// Como [`Self::renglones_visuales`] pero sobre un texto arbitrario — para
+    /// preguntar "¿cuánto ocuparía *esto*?" sin tocar el estado (p. ej. decidir
+    /// si conviene crecer antes de insertar).
+    pub fn renglones_visuales_de(&self, texto: &str) -> usize {
+        let m = self.metricas();
+        visual_layout(texto, self.area_wrap_w(), &m).len()
+    }
+
+    /// Largo (en caracteres) del último renglón visual y cuántos caracteres
+    /// entran en un renglón lleno. Es lo que necesita un overlay pegado a la
+    /// derecha del input para saber si el texto lo está por alcanzar.
+    ///
+    /// Con más de un renglón devuelve `(cols, cols)`: los de arriba **ya**
+    /// llegaron al borde derecho y pasan por detrás del overlay, por corta que
+    /// sea la última fila.
+    pub fn avance_en_renglon(&self) -> (usize, usize) {
+        let m = self.metricas();
+        let texto = self.text();
+        let rows = visual_layout(&texto, self.area_wrap_w(), &m);
+        // Ancho útil en caracteres, medido con un dígito (en mono es exacto; en
+        // proporcional es una estimación honesta, que es todo lo que un overlay
+        // necesita para decidir si esquivar).
+        let char_w = prefix_width_m("0", 1, &m).max(1.0);
+        let cols = (self.area_wrap_w() / char_w).floor().max(1.0) as usize;
+        if rows.len() > 1 {
+            return (cols, cols);
+        }
+        let ultima = rows.last().map(|r| r.end - r.start).unwrap_or(0);
+        (ultima, cols)
+    }
+
+    /// Fija a mano el ancho (px) de la caja de texto, como si ya se hubiera
+    /// pintado un cuadro.
+    ///
+    /// Sirve para dos cosas concretas: que un host que ya sabe su ancho no se
+    /// coma el primer cuadro **sin** ajuste blando (el texto entra de una tira y
+    /// salta al reflujo en el segundo), y que se pueda testear el wrap sin
+    /// levantar una GPU.
+    pub fn fijar_ancho_caja(&self, ancho_px: f32) {
+        self.box_w.store(ancho_px.max(0.0).to_bits(), Ordering::Relaxed);
+    }
+
+    /// Ancho (px) de un carácter con la métrica del último cuadro. Exacto en
+    /// mono; en proporcional es el ancho del `0`, que es lo que un host puede
+    /// usar para traducir un ancho suyo a "cuántos caracteres entran".
+    pub fn ancho_caracter(&self) -> f32 {
+        prefix_width_m("0", 1, &self.metricas())
+    }
+
+    /// Mapea `(x, y)` locales al bloque (viewport) → `(línea lógica, columna)`,
+    /// atravesando el layout visual (wrap) y el scroll vertical del último frame.
+    fn line_col_at(&self, local_x: f32, local_y: f32) -> (usize, usize) {
+        let m = self.metricas();
+        let text = self.text();
+        let rows = visual_layout(&text, self.area_wrap_w(), &m);
+        let scroll_y = f32::from_bits(self.area_scroll_y.load(Ordering::Relaxed));
+        let content_y = local_y + scroll_y; // deshacer la traslación del render
+        let vi = (((content_y - m.pad_y).max(0.0)) / m.line_h) as usize;
+        let vi = vi.min(rows.len().saturating_sub(1));
+        let vr = rows[vi];
+        let line_str = nth_line(&text, vr.line);
+        let seg: String = line_str
+            .chars()
+            .skip(vr.start)
+            .take(vr.end - vr.start)
+            .collect();
+        let col_in_seg = col_from_x_pad_m(&seg, local_x, m.pad_x, &m);
+        let col = (vr.start + col_in_seg).min(vr.end);
+        (vr.line, col)
+    }
+
+    /// Coloca el caret (o escala a palabra/todo por doble/triple-click) bajo
+    /// `(x, y)`. Multilínea análogo de [`TextInputState::pointer_click`].
+    pub fn place_caret_2d(&mut self, local_x: f32, local_y: f32) {
+        self.area_goal_x = None;
+        let (line, col) = self.line_col_at(local_x, local_y);
+        self.inner.register_click(line, col);
+    }
+
+    /// Ancla el caret (sin escalar) en `(x, y)` — inicio de un arrastre.
+    pub fn set_caret_2d(&mut self, local_x: f32, local_y: f32) {
+        self.area_goal_x = None;
+        let (line, col) = self.line_col_at(local_x, local_y);
+        self.inner.set_caret_at(line, col);
+    }
+
+    /// Extiende la selección hasta `(x, y)` — extremo vivo del arrastre.
+    pub fn extend_sel_2d(&mut self, local_x: f32, local_y: f32) {
+        self.area_goal_x = None;
+        let (line, col) = self.line_col_at(local_x, local_y);
+        self.inner.extend_selection_to(line, col);
+    }
+
+    /// Mueve el caret **un renglón visual** hacia arriba (`dir=-1`) o abajo
+    /// (`dir=+1`), preservando la posición horizontal en px (columna meta) para no
+    /// derivar sobre fuente proporcional / wrap. `extend=true` (Shift) arrastra la
+    /// selección. Es lo que hace ↑/↓ un renglón envuelto correcto (a diferencia
+    /// del motor, que salta la línea lógica entera). Devuelve `true` (repintar).
+    pub fn move_vertical_visual(&mut self, dir: i32, extend: bool) -> bool {
+        let m = self.metricas();
+        let text = self.text();
+        let rows = visual_layout(&text, self.area_wrap_w(), &m);
+        let caret = self.inner.cursor.caret;
+        let cv = caret_vrow(&rows, caret.line, caret.col);
+        let cur = rows[cv];
+        // Columna meta (px desde el inicio del renglón): la guardada, o la actual.
+        let goal_x = self.area_goal_x.unwrap_or_else(|| {
+            let line = nth_line(&text, cur.line);
+            seg_width(line, cur.start, caret.col, &m)
+        });
+
+        let target = cv as i32 + dir;
+        let apply = |st: &mut TextInputState, line: usize, col: usize| {
+            if extend {
+                st.inner.extend_selection_to(line, col);
+            } else {
+                st.inner.set_caret_at(line, col);
+            }
+        };
+
+        if target < 0 {
+            // ↑ en el primer renglón → inicio del documento.
+            apply(self, 0, 0);
+            self.area_goal_x = None;
+            return true;
+        }
+        if target as usize >= rows.len() {
+            // ↓ en el último renglón → fin del documento.
+            let last = rows[rows.len() - 1];
+            apply(self, last.line, last.end);
+            self.area_goal_x = None;
+            return true;
+        }
+
+        let tv = rows[target as usize];
+        let tline = nth_line(&text, tv.line);
+        let seg: String = tline.chars().skip(tv.start).take(tv.end - tv.start).collect();
+        // La columna del renglón destino cuyo x se acerca más a la meta.
+        let col_in_seg = col_from_x_pad_m(&seg, goal_x + m.pad_x, m.pad_x, &m);
+        let tcol = (tv.start + col_in_seg).min(tv.end);
+        apply(self, tv.line, tcol);
+        self.area_goal_x = Some(goal_x);
+        true
+    }
+
+    /// Lleva el caret al **inicio o fin del renglón visual** donde está.
+    ///
+    /// El motor mueve al inicio/fin de la línea *lógica*, que en texto envuelto
+    /// es todo el párrafo: con tres renglones de ajuste blando, End saltaba al
+    /// final del último y Home al principio del primero — o sea, Home/End se
+    /// portaban como Ctrl+Home/Ctrl+End. Un editor de verdad los mueve renglón a
+    /// renglón, que es donde está el ojo. `Ctrl+Home`/`Ctrl+End` (documento
+    /// entero) siguen yendo al motor, sin tocar.
+    ///
+    /// `extend=true` (Shift) arrastra la selección. Devuelve `true` (repintar).
+    pub fn move_horizontal_visual(&mut self, al_final: bool, extend: bool) -> bool {
+        let m = self.metricas();
+        let text = self.text();
+        let rows = visual_layout(&text, self.area_wrap_w(), &m);
+        let caret = self.inner.cursor.caret;
+        let vr = rows[caret_vrow(&rows, caret.line, caret.col)];
+        // El fin de un renglón CORTADO POR AJUSTE cae sobre el espacio que lo
+        // separa del siguiente; parar antes de él es lo que espera la mano (si
+        // no, un End seguido de escribir mete texto del otro lado del corte).
+        let col = if al_final {
+            let linea = nth_line(&text, vr.line);
+            let corte_blando = vr.end < linea.chars().count();
+            let termina_en_espacio = linea
+                .chars()
+                .nth(vr.end.saturating_sub(1))
+                .is_some_and(|c| c == ' ');
+            if corte_blando && termina_en_espacio && vr.end > vr.start {
+                vr.end - 1
+            } else {
+                vr.end
+            }
+        } else {
+            vr.start
+        };
+        if extend {
+            self.inner.extend_selection_to(vr.line, col);
+        } else {
+            self.inner.set_caret_at(vr.line, col);
+        }
+        self.area_goal_x = None;
+        true
+    }
+
+    /// Procesa un [`TextAreaEvent`] y devuelve `true` si hay que repintar. Espeja
+    /// [`TextInputState::handle`] en 2D: un solo `Msg` cubre escribir, mover
+    /// (incl. ↑/↓), seleccionar, copiar/pegar, acentos, click, doble/triple-click
+    /// y arrastre.
+    pub fn handle_area(&mut self, ev: TextAreaEvent, clipboard: &mut dyn Clipboard) -> bool {
+        match ev {
+            TextAreaEvent::Key(e) => {
+                // ↑/↓ (sin Ctrl/Alt) navegan por **renglón visual**, no por línea
+                // lógica: interceptamos antes de delegar en el motor (que salta la
+                // línea entera en texto envuelto). Shift arrastra la selección.
+                if matches!(e.key, Key::Named(NamedKey::ArrowUp | NamedKey::ArrowDown))
+                    && !e.modifiers.ctrl
+                    && !e.modifiers.alt
+                    && e.state == llimphi_ui::KeyState::Pressed
+                {
+                    let dir = if matches!(e.key, Key::Named(NamedKey::ArrowUp)) { -1 } else { 1 };
+                    return self.move_vertical_visual(dir, e.modifiers.shift);
+                }
+                // Home/End PELADOS: por renglón visual, igual que ↑/↓ y por la
+                // misma razón. Con Ctrl siguen yendo al motor (documento entero).
+                if matches!(e.key, Key::Named(NamedKey::Home | NamedKey::End))
+                    && !e.modifiers.ctrl
+                    && !e.modifiers.alt
+                    && e.state == llimphi_ui::KeyState::Pressed
+                {
+                    let al_final = matches!(e.key, Key::Named(NamedKey::End));
+                    return self.move_horizontal_visual(al_final, e.modifiers.shift);
+                }
+                // Cualquier otra tecla resetea la columna meta y delega en el motor.
+                self.area_goal_x = None;
+                self.apply_key_with_clipboard(&e, clipboard)
+            }
+            TextAreaEvent::Ime(e) => {
+                self.area_goal_x = None;
+                self.apply_ime(&e)
+            }
+            TextAreaEvent::Press(x, y) => {
+                self.drag_active = false;
+                self.drag_x = x;
+                self.drag_y = y;
+                self.place_caret_2d(x, y);
+                true
+            }
+            TextAreaEvent::Drag { anchor, dx, dy } => {
+                if !self.drag_active {
+                    self.set_caret_2d(anchor.0, anchor.1);
+                    self.drag_x = anchor.0;
+                    self.drag_y = anchor.1;
+                    self.drag_active = true;
+                }
+                self.drag_x += dx;
+                self.drag_y += dy;
+                self.extend_sel_2d(self.drag_x, self.drag_y);
+                true
+            }
+            TextAreaEvent::DragEnd => {
+                self.drag_active = false;
+                false
+            }
+            TextAreaEvent::Context { .. } => false,
+        }
+    }
+}
+
+/// Ancho (px) del prefijo de `line` hasta `cols` chars, medido con el
+/// `Typesetter` del pintado (misma fuente/tamaño que el render → exacto).
+pub(crate) fn measure_prefix(
+    ts: &mut llimphi_ui::llimphi_text::Typesetter,
+    line: &str,
+    cols: usize,
+    m: &Metricas,
+) -> f64 {
+    if cols == 0 {
+        return 0.0;
+    }
+    let p: String = line.chars().take(cols).collect();
+    // Ancla contra el colapso del espacio final — ver `prefix_width_m`. Sin
+    // esto el caret parado tras un espacio se dibuja un carácter a la izquierda.
+    if p.ends_with(char::is_whitespace) {
+        const ANCLA: &str = "0";
+        return medir_con(ts, &format!("{p}{ANCLA}"), m) - medir_con(ts, ANCLA, m);
+    }
+    medir_con(ts, &p, m)
+}
+
+/// Mide un texto con el `Typesetter` del pintado (misma fuente/tamaño que el
+/// render → exacto), tal cual lo shapea parley.
+fn medir_con(ts: &mut llimphi_ui::llimphi_text::Typesetter, p: &str, m: &Metricas) -> f64 {
+    let lp = ts.layout(
+        p,
+        m.font_size,
+        None,
+        Alignment::Start,
+        1.2,
+        false,
+        m.font_family.as_deref(),
+        400.0,
+        false,
+        false,
+        0.0,
+        0.0,
+    );
+    llimphi_ui::llimphi_text::measurement(&lp).width as f64
+}
+
+/// Vista del text-area: bloque multilínea con **soft-wrap**, **scroll
+/// vertical**, caret 2D, selección a través de líneas, teclado completo,
+/// copiar/pegar y menú contextual. `rows` = renglones **visibles**.
+///
+/// Es [`super::rico::text_area_view_rico`] con los adornos vacíos y la métrica
+/// default. No hay dos renderizadores: cuando había un pintor "simple" y otro
+/// "rico" se desincronizaban en cuanto uno de los dos tocaba una medida.
+pub fn text_area_view<Msg, F>(
+    state: &TextInputState,
+    placeholder: &str,
+    focused: bool,
+    rows: usize,
+    palette: &TextInputPalette,
+    wrap: F,
+) -> View<Msg>
+where
+    Msg: Clone + 'static,
+    F: Fn(TextAreaEvent) -> Msg + Send + Sync + 'static,
+{
+    let adornos = super::rico::Adornos {
+        placeholder: (!placeholder.is_empty())
+            .then(|| super::rico::Placeholder::texto(placeholder, palette.fg_placeholder)),
+        caret: super::rico::CaretEstilo {
+            parpadeo: false,
+            ..super::rico::CaretEstilo::default()
+        },
+        ..Default::default()
+    };
+    // `caret_visible == false` (la fase que alternaba el host) se respeta
+    // dejando el caret sin pintar: el ancho a cero es el equivalente exacto.
+    let adornos = if palette.caret_visible {
+        adornos
+    } else {
+        super::rico::Adornos { caret: super::rico::CaretEstilo { ancho: 0.0, ..adornos.caret }, ..adornos }
+    };
+    super::rico::text_area_view_rico(
+        state,
+        focused,
+        rows,
+        palette,
+        &Metricas::default(),
+        &adornos,
+        wrap,
+    )
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    /// Métrica mono de prueba y el ancho (px) que dan exactamente `cols`
+    /// caracteres de texto útil. Con mono el ancho de carácter es constante, así
+    /// que la cuenta es exacta y los asserts se leen en columnas.
+    fn mono_cols(cols: usize) -> (Metricas, f32) {
+        let m = Metricas::mono(13.0);
+        let cw = prefix_width_m("0", 1, &m);
+        (m, cw * cols as f32)
+    }
+
+    /// Los textos de cada renglón visual, para leer los asserts sin contar
+    /// columnas.
+    fn textos(t: &str, cols: usize) -> Vec<String> {
+        let (m, w) = mono_cols(cols);
+        visual_layout(t, w, &m)
+            .into_iter()
+            .map(|vr| {
+                nth_line(t, vr.line)
+                    .chars()
+                    .skip(vr.start)
+                    .take(vr.end - vr.start)
+                    .collect()
+            })
+            .collect()
+    }
+
+    #[test]
+    fn una_linea_corta_es_un_solo_renglon() {
+        assert_eq!(textos("hola", 20), vec!["hola"]);
+        // Vacío: un renglón vacío, no cero (el caret tiene que caer en algún lado).
+        assert_eq!(textos("", 20), vec![""]);
+    }
+
+    #[test]
+    fn los_saltos_duros_siguen_cortando() {
+        assert_eq!(textos("uno\ndos", 20), vec!["uno", "dos"]);
+        // Línea vacía en el medio: se conserva.
+        assert_eq!(textos("a\n\nb", 20), vec!["a", "", "b"]);
+    }
+
+    #[test]
+    fn corta_por_palabra_no_por_letra() {
+        // 8 columnas: la palabra viaja entera al renglón siguiente, nunca se
+        // parte por la mitad si hay dónde cortar.
+        assert_eq!(textos("hola mundo cruel", 8), vec!["hola ", "mundo ", "cruel"]);
+    }
+
+    #[test]
+    fn el_espacio_final_cuelga_en_el_margen() {
+        // "hola mundo " son 11 caracteres, pero entra en 10 columnas: el espacio
+        // que queda al final del renglón **no ocupa ancho** (parley colapsa el
+        // whitespace final, como hace cualquier editor — si no, escribir un
+        // espacio al llegar al borde abriría un renglón vacío de golpe).
+        assert_eq!(textos("hola mundo cruel", 10), vec!["hola mundo ", "cruel"]);
+    }
+
+    #[test]
+    fn una_palabra_mas_larga_que_el_ancho_se_parte_a_lo_bruto() {
+        // Sin espacio donde cortar, el corte es duro — pero nunca deja renglón
+        // vacío: eso colgaría el bucle sin avanzar nunca.
+        assert_eq!(textos("aaaaaaaa", 3), vec!["aaa", "aaa", "aa"]);
+    }
+
+    #[test]
+    fn reconstruye_el_texto_exacto() {
+        // Ni un carácter de más ni de menos: los renglones son una partición del
+        // texto salvo los `\n`, que se los comen los cortes duros.
+        let t = "un texto largo con varias palabras\ny un salto duro adentro";
+        assert_eq!(textos(t, 11).concat(), t.replace('\n', ""));
+    }
+
+    #[test]
+    fn sin_ancho_medido_no_hay_ajuste() {
+        // Antes del primer cuadro (o con `fijar_ancho_caja(0)`) el texto no se
+        // parte por ancho, sólo por `\n`.
+        let t = "una linea larguisima que no deberia partirse todavia";
+        let m = Metricas::mono(13.0);
+        assert_eq!(visual_layout(t, 0.0, &m).len(), 1);
+    }
+
+    #[test]
+    fn el_caret_al_final_de_un_corte_blando_baja_al_renglon_siguiente() {
+        let (m, w) = mono_cols(8);
+        let t = "hola mundo cruel"; // ["hola ", "mundo ", "cruel"]
+        let rows = visual_layout(t, w, &m);
+        assert_eq!(rows.len(), 3);
+        // Columna 5 = final del renglón 0 y principio del 1: se muestra abajo,
+        // como en cualquier editor con ajuste blando.
+        assert_eq!(caret_vrow(&rows, 0, 5), 1);
+        assert_eq!(caret_vrow(&rows, 0, 0), 0);
+        assert_eq!(caret_vrow(&rows, 0, t.chars().count()), 2);
+    }
+
+    #[test]
+    fn el_caret_al_final_de_una_linea_con_salto_duro_se_queda_arriba() {
+        let (m, w) = mono_cols(20);
+        let rows = visual_layout("uno\ndos", w, &m);
+        // Fin de "uno" (línea 0, col 3): NO baja — la de abajo es otra línea lógica.
+        assert_eq!(caret_vrow(&rows, 0, 3), 0);
+        assert_eq!(caret_vrow(&rows, 1, 0), 1);
+    }
+
+    #[test]
+    fn renglones_visuales_usa_el_ancho_fijado() {
+        let mut st = TextInputState::multiline();
+        let (m, w) = mono_cols(8);
+        st.aplicar_metricas(&m);
+        // El ancho de CAJA incluye los paddings; `area_wrap_w` se los resta.
+        st.fijar_ancho_caja(w + m.pad_x + m.pad_r);
+        st.set_text("hola mundo cruel");
+        assert_eq!(st.renglones_visuales(), 3);
+        // Y se puede preguntar por un texto hipotético sin tocar el estado.
+        assert_eq!(st.renglones_visuales_de("hola"), 1);
+        assert_eq!(st.text(), "hola mundo cruel", "preguntar no muta");
+    }
+}
+
+#[cfg(test)]
+mod tests_espacio {
+    use super::*;
+
+    /// El caret parado **después de un espacio** tiene que dibujarse después del
+    /// espacio, no antes.
+    ///
+    /// parley —como CSS— le da ancho cero al whitespace que queda al final de lo
+    /// que se mide, así que medir el prefijo `"ab "` daba lo mismo que `"ab"` y
+    /// el caret al principio de cada palabra aparecía un carácter corrido a la
+    /// izquierda. Como el caret lógico sí estaba bien, Delete borraba de la
+    /// palabra y no el espacio que el usuario veía a su derecha: el dibujo
+    /// mentía, no la edición.
+    #[test]
+    fn el_caret_tras_un_espacio_no_se_corre_al_espacio() {
+        let m = Metricas::mono(13.0);
+        let cw = prefix_width_m("0", 1, &m);
+        let t = "ab cd";
+        // Columna 3 = justo antes de la `c`, o sea después del espacio.
+        let x = prefix_width_m(t, 3, &m);
+        assert!(
+            (x - 3.0 * cw).abs() < 0.5,
+            "el prefijo \"ab \" tiene que medir 3 caracteres, midió {x:.2} (cw={cw:.2})"
+        );
+        // Y sigue siendo estrictamente mayor que el prefijo sin el espacio.
+        assert!(x > prefix_width_m(t, 2, &m) + cw * 0.5);
+    }
+
+    /// Pero el ajuste blando sigue **colgando** el espacio final en el margen:
+    /// si contara, escribir un espacio al llegar al borde abriría un renglón
+    /// vacío de golpe.
+    #[test]
+    fn el_wrap_sigue_colgando_el_espacio_final() {
+        let m = Metricas::mono(13.0);
+        let cw = prefix_width_m("0", 1, &m);
+        assert!(
+            seg_width("ab ", 0, 3, &m) <= 2.0 * cw + 0.5,
+            "para envolver, el espacio final no ocupa"
+        );
+    }
+}
+
+
+#[cfg(test)]
+mod tests_home_end {
+    use super::*;
+    use llimphi_ui::{Key, KeyEvent, KeyState, Modifiers, NamedKey};
+
+    fn tecla(key: Key, ctrl: bool, shift: bool) -> KeyEvent {
+        KeyEvent {
+            key,
+            state: KeyState::Pressed,
+            text: None,
+            modifiers: Modifiers { ctrl, shift, ..Default::default() },
+            repeat: false,
+        }
+    }
+
+    /// Un área multilínea con el texto ya envuelto en varios renglones visuales.
+    fn area_envuelta() -> (TextInputState, usize) {
+        let mut st = TextInputState::multiline();
+        // ~48 px de caja con la métrica default: corta cada pocas palabras.
+        st.fijar_ancho_caja(260.0);
+        st.set_text(
+            "uno dos tres cuatro cinco seis siete ocho nueve diez once doce trece \
+             catorce quince dieciseis diecisiete dieciocho diecinueve veinte",
+        );
+        let m = st.metricas();
+        let filas = visual_layout(&st.text(), st.area_wrap_w(), &m).len();
+        (st, filas)
+    }
+
+    #[test]
+    fn home_y_end_se_mueven_por_renglon_visual_no_por_parrafo() {
+        let (mut st, filas) = area_envuelta();
+        assert!(filas >= 3, "hacen falta 3 renglones: el 2º tiene que ser del MEDIO");
+
+        // Bajamos al segundo renglón y pedimos End.
+        let mut clip = crate::NullClipboard;
+        st.handle_area(TextAreaEvent::Key(tecla(Key::Named(NamedKey::Home), true, false)), &mut clip);
+        st.handle_area(TextAreaEvent::Key(tecla(Key::Named(NamedKey::ArrowDown), false, false)), &mut clip);
+        st.handle_area(TextAreaEvent::Key(tecla(Key::Named(NamedKey::End), false, false)), &mut clip);
+
+        let texto = st.text();
+        let m = st.metricas();
+        let rows = visual_layout(&texto, st.area_wrap_w(), &m);
+        let caret = st.editor().cursor.caret;
+        let vr = caret_vrow(&rows, caret.line, caret.col);
+        assert_eq!(vr, 1, "el caret sigue en el SEGUNDO renglón, no saltó al final");
+        assert!(caret.col < texto.chars().count(), "no se fue al fin del párrafo");
+
+        // Y Home lo lleva al inicio de ESE renglón, no del párrafo.
+        st.handle_area(TextAreaEvent::Key(tecla(Key::Named(NamedKey::Home), false, false)), &mut clip);
+        let caret = st.editor().cursor.caret;
+        let rows = visual_layout(&st.text(), st.area_wrap_w(), &m);
+        assert_eq!(caret.col, rows[1].start, "inicio del renglón visual");
+        assert_ne!(caret.col, 0, "y NO el inicio del párrafo");
+    }
+
+    #[test]
+    fn ctrl_home_y_ctrl_end_siguen_siendo_el_documento() {
+        let (mut st, _) = area_envuelta();
+        let mut clip = crate::NullClipboard;
+        st.handle_area(TextAreaEvent::Key(tecla(Key::Named(NamedKey::End), true, false)), &mut clip);
+        let fin = st.editor().cursor.caret;
+        st.handle_area(TextAreaEvent::Key(tecla(Key::Named(NamedKey::Home), true, false)), &mut clip);
+        let ini = st.editor().cursor.caret;
+        assert_eq!((ini.line, ini.col), (0, 0), "Ctrl+Home = principio del documento");
+        assert!(fin.col > ini.col, "Ctrl+End se fue lejos: {fin:?}");
+    }
+}
diff --git a/widgets/text-input/src/lib.rs b/widgets/text-input/src/lib.rs
index 91c3c2a..93f0d49 100644
--- a/widgets/text-input/src/lib.rs
+++ b/widgets/text-input/src/lib.rs
@@ -14,15 +14,40 @@
 
 #![forbid(unsafe_code)]
 
+use std::cell::RefCell;
+use std::sync::atomic::{AtomicBool, AtomicU32, AtomicU64, Ordering};
+use std::sync::{Arc, Mutex};
+
 use llimphi_ui::llimphi_layout::taffy::{
     prelude::{auto, length, percent, Size, Style},
-    AlignItems, Rect,
+    AlignItems, Position, Rect,
 };
 use llimphi_ui::llimphi_raster::peniko::Color;
 use llimphi_ui::llimphi_text::Alignment;
-use llimphi_ui::{KeyEvent, View};
+use llimphi_ui::{DragPhase, ImeEvent, KeyEvent, View};
 use llimphi_widget_text_editor::{EditorOptions, EditorState};
 
+// Backends de clipboard re-exportados para que los callers puedan sostener
+// uno en su Model (`MemClipboard` intra-app; `NullClipboard` si no quieren
+// copiar/pegar) y pasarlo a [`TextInputState::handle`] / [`TextInputState::
+// apply_key_with_clipboard`]. Para portapapeles del SO, el caller puentea su
+// propio backend (p. ej. `arboard`) implementando el trait `Clipboard`.
+pub use llimphi_widget_text_editor::{Clipboard, MemClipboard, NullClipboard};
+
+/// Variante **multilínea** (text-area): mismo motor `EditorState`, hit-testing
+/// 2D real (renglón + columna con glifos medidos), caret y selección pintados
+/// a través de líneas. Reemplaza al viejo `llimphi-widget-text-area` de `String`
+/// plano. Ver [`area::text_area_view`] y [`area::TextAreaEvent`].
+mod area;
+pub use area::{text_area_view, TextAreaEvent, AREA_LINE_H};
+
+/// Vista **rica** del text-area: la misma edición, más los adornos de
+/// presentación que hacían que una app se dibujara su propio input a mano
+/// (métrica mono/zoom, color por tramos, sugerencia fantasma, placeholder con
+/// ícono, caret con estela). Ver [`rico::text_area_view_rico`].
+mod rico;
+pub use rico::{text_area_view_rico, Adornos, CaretEstilo, Placeholder};
+
 /// Paleta del input. Defaults son una variante dark con borde tenue que
 /// se enciende al focar, equivalente conceptual al `nahual-theme` dark.
 #[derive(Debug, Clone, Copy)]
@@ -37,6 +62,23 @@ pub struct TextInputPalette {
     /// está focado. Default = `fg_text` (sigue al texto, como `caret-color:
     /// auto` en CSS).
     pub caret: Color,
+    /// Fase del parpadeo del caret: `true` = visible, `false` = apagado. El
+    /// caret sólo se pinta cuando el input está focado **y** esta fase está en
+    /// `true`. Default `true` (visible sin parpadeo — un consumidor que quiera
+    /// blink alterna este flag con un timer). Fase 7.1267.
+    pub caret_visible: bool,
+    /// Fondo del texto seleccionado (con Shift+flechas o doble/triple click).
+    pub selection: Color,
+    // --- Decoración (themizable: sale de los tokens del theme, no hardcodeada) ---
+    /// Radio de las esquinas (px). Sale de `llimphi_theme::radius::*`. Un theme
+    /// con inputs cuadrados lo baja a `XS`; uno redondeado, a `MD`/`LG`.
+    pub radius: f32,
+    /// Sombra de elevación `(alpha 0–255, blur px, dy px)` — de
+    /// `llimphi_theme::elevation::*`. Sólo se pinta si [`Self::relieve`].
+    pub elevation: (u8, f64, f64),
+    /// Si el input lleva **relieve** (sombra + sheen). `false` = plano. Es el
+    /// interruptor de carácter: un theme flat lo apaga, uno con dimensión lo deja.
+    pub relieve: bool,
 }
 
 impl Default for TextInputPalette {
@@ -56,15 +98,321 @@ impl TextInputPalette {
             fg_text: t.fg_text,
             fg_placeholder: t.fg_placeholder,
             caret: t.fg_text,
+            caret_visible: true,
+            selection: t.bg_selected,
+            // Decoración desde los tokens canónicos del theme.
+            radius: llimphi_theme::radius::MD as f32,
+            elevation: llimphi_theme::elevation::E1,
+            relieve: true,
         }
     }
 }
 
+/// **Métrica del texto**: tamaño, alto de renglón, familia y paddings. Existe
+/// porque el widget tenía estos cuatro valores clavados en constantes, y con
+/// ellos clavados no puede ser un input *monoespaciado* (una terminal, un prompt
+/// de shell) ni acompañar un **zoom de fuente**: el ajuste blando, el caret, la
+/// selección y el mapeo click→columna se calculan todos con esta métrica, así
+/// que o cambian los cuatro juntos o se desalinean entre sí.
+///
+/// [`Metricas::default`] reproduce **exactamente** las constantes históricas, de
+/// modo que las vistas que no la mencionan se comportan igual que siempre.
+#[derive(Debug, Clone, PartialEq)]
+pub struct Metricas {
+    /// Tamaño de fuente (px) del texto, el caret y las mediciones.
+    pub font_size: f32,
+    /// Alto (px) de cada renglón visual. Fijo a propósito (no derivado de las
+    /// métricas internas de parley): el render pinta un nodo por renglón con
+    /// esta altura, así el hit-testing `y → renglón` coincide con lo dibujado.
+    pub line_h: f32,
+    /// Familia CSS-like de la fuente. `None` = la sans de la UI. Para un input
+    /// de terminal, `Some(llimphi_text::MONOSPACE.into())`.
+    ///
+    /// **No es cosmético:** sin familia, el camino de texto multicolor shapea
+    /// con la sans aunque el resto del input sea mono, y las columnas se
+    /// desalinean en silencio (la misma trampa que torcía las tablas).
+    pub font_family: Option<String>,
+    /// Padding izquierdo del texto dentro del renglón (px).
+    pub pad_x: f32,
+    /// Padding derecho del bloque (px) — aire antes del borde.
+    pub pad_r: f32,
+    /// Padding superior/inferior del bloque de renglones (px).
+    pub pad_y: f32,
+}
+
+impl Default for Metricas {
+    fn default() -> Self {
+        Self {
+            font_size: FONT_SIZE,
+            line_h: 19.0,
+            font_family: None,
+            pad_x: 8.0,
+            pad_r: 6.0,
+            pad_y: 5.0,
+        }
+    }
+}
+
+impl Metricas {
+    /// Métrica **monoespaciada** a `font_size` px, con el alto de renglón en la
+    /// proporción clásica de terminal (1.4×) y la familia mono embebida.
+    pub fn mono(font_size: f32) -> Self {
+        Self {
+            font_size,
+            line_h: (font_size * 1.4).round(),
+            font_family: Some(llimphi_ui::llimphi_text::MONOSPACE.to_string()),
+            ..Self::default()
+        }
+    }
+
+    /// La misma métrica escalada por un factor de zoom (clampeado a 0.5–3×).
+    /// Escala tamaño y alto de renglón; los paddings quedan (son aire del marco,
+    /// no del texto).
+    pub fn con_zoom(mut self, zoom: f32) -> Self {
+        let z = zoom.clamp(0.5, 3.0);
+        self.font_size *= z;
+        self.line_h = (self.line_h * z).round();
+        self
+    }
+}
+
+/// Tamaño de fuente (px) con el que el widget renderiza el texto. El caret, la
+/// selección y el hit-testing del mouse miden con ESTE tamaño para coincidir al
+/// píxel — el render (`build_input`) y el `paint_over` usan el mismo valor.
+const FONT_SIZE: f32 = 13.0;
+/// Padding izquierdo del texto dentro del box: borde de 1 px + padding interno
+/// de 10 px. `col_from_x` lo resta antes de mapear a columna.
+const PAD_X: f32 = 11.0;
+
+thread_local! {
+    /// Typesetter dedicado a medir texto en el hilo de UI para el hit-testing
+    /// del mouse (x→columna). `Typesetter::new` instala la MISMA fuente UI que
+    /// usa el compositor, así el click cae exactamente donde se dibuja el glifo.
+    /// El costo de instalar la fuente se paga una sola vez por hilo.
+    static MEASURE_TS: RefCell<llimphi_ui::llimphi_text::Typesetter> =
+        RefCell::new(llimphi_ui::llimphi_text::Typesetter::new());
+}
+
+/// Ancho (px) del prefijo de `text` hasta la columna `cols` (nº de chars),
+/// medido con la fuente real — el MISMO cálculo que hace el `paint_over` para
+/// posicionar el caret. `cols == 0` → 0.0. Es la fuente de verdad del mapeo
+/// x↔columna: sustituye el viejo `font_size * 0.5` (ancho monoespaciado falso
+/// sobre una fuente proporcional), que era la causa de que la selección
+/// "agarrara" texto equivocado y derivara al arrastrar.
+fn prefix_width(text: &str, cols: usize) -> f32 {
+    prefix_width_m(text, cols, &Metricas::default())
+}
+
+/// [`prefix_width`] con **métrica explícita** — mide con el tamaño y la familia
+/// que realmente se van a pintar. Es el que usa el camino multilínea/rico: medir
+/// mono con la métrica de la sans (o al revés) desplaza el caret y el ajuste
+/// blando respecto de los glifos dibujados.
+fn prefix_width_m(text: &str, cols: usize, m: &Metricas) -> f32 {
+    if cols == 0 {
+        return 0.0;
+    }
+    let prefix: String = text.chars().take(cols).collect();
+    if !prefix.ends_with(char::is_whitespace) {
+        return medir_crudo(&prefix, m);
+    }
+    // parley —como CSS— le da ancho **cero** al whitespace que queda al final de
+    // lo que mide. Medido: en mono de 13 px, `"ab"` y `"ab "` dan los dos 15.603.
+    //
+    // Para envolver eso es lo correcto (el espacio cuelga en el margen). Para
+    // **posicionar** es un error de un carácter entero: el caret parado al
+    // principio de una palabra se dibujaba antes del espacio que la precede, y
+    // entonces Delete parecía borrar la letra equivocada — el caret estaba bien,
+    // mentía el dibujo. Se mide con un ancla detrás y se le resta el ancla.
+    const ANCLA: &str = "0";
+    medir_crudo(&format!("{prefix}{ANCLA}"), m) - medir_crudo(ANCLA, m)
+}
+
+/// Ancho del prefijo **colapsando** el espacio final, que es lo que quiere el
+/// ajuste blando: una línea que termina justo en un espacio no debe abrir un
+/// renglón por ese espacio (colgaría un renglón vacío al tipear en el borde).
+fn prefix_width_colapsando(text: &str, cols: usize, m: &Metricas) -> f32 {
+    if cols == 0 {
+        return 0.0;
+    }
+    let prefix: String = text.chars().take(cols).collect();
+    medir_crudo(&prefix, m)
+}
+
+/// Mide un texto tal cual lo shapea parley (con el colapso del espacio final).
+fn medir_crudo(prefix: &str, m: &Metricas) -> f32 {
+    MEASURE_TS.with(|ts| {
+        let mut ts = ts.borrow_mut();
+        let lp = ts.layout(
+            prefix,
+            m.font_size,
+            None,
+            Alignment::Start,
+            1.2,
+            false,
+            m.font_family.as_deref(),
+            400.0,
+            false,
+            false,
+            0.0,
+            0.0,
+        );
+        llimphi_ui::llimphi_text::measurement(&lp).width as f32
+    })
+}
+
+/// Mapea `local_x` (px desde el borde izquierdo del box) a la columna de
+/// carácter cuyo **borde real** cae más cerca del punto de inserción, midiendo
+/// los glifos con la fuente proporcional. `display` es el texto MOSTRADO (crudo,
+/// o `•` en masked) — se mide lo que se ve, así el click coincide con el caret
+/// dibujado. Escaneo lineal (los inputs son cortos): avanza hasta pasarse de
+/// `local_x` y elige, entre la columna previa y la actual, el borde más próximo
+/// (punto medio del glifo). Devuelve la columna del punto de inserción.
+fn col_from_x(display: &str, local_x: f32) -> usize {
+    col_from_x_pad(display, local_x, PAD_X)
+}
+
+/// Como [`col_from_x`] pero con el padding izquierdo del texto explícito — lo
+/// usa el text-area (multilínea), cuyos renglones tienen su propio pad interno
+/// distinto del box single-line. Mide glifos reales por línea (misma fuente).
+fn col_from_x_pad(display: &str, local_x: f32, pad: f32) -> usize {
+    col_from_x_pad_m(display, local_x, pad, &Metricas::default())
+}
+
+/// [`col_from_x_pad`] con métrica explícita — ver [`prefix_width_m`].
+fn col_from_x_pad_m(display: &str, local_x: f32, pad: f32, m: &Metricas) -> usize {
+    let target = (local_x - pad).max(0.0);
+    let n = display.chars().count();
+    if n == 0 || target <= 0.0 {
+        return 0;
+    }
+    let mut prev_w = 0.0_f32;
+    for col in 1..=n {
+        let w = prefix_width_m(display, col, m);
+        if target < w {
+            let mid = (prev_w + w) * 0.5;
+            return if target < mid { col - 1 } else { col };
+        }
+        prev_w = w;
+    }
+    n
+}
+
+/// Luminancia perceptual [0,1] de un color (para modular el relieve según el
+/// theme sin mirar su nombre, igual que el `llimphi-button`).
+fn luminance(c: Color) -> f32 {
+    let [r, g, b, _] = c.components;
+    0.2126 * r + 0.7152 * g + 0.0722 * b
+}
+
+/// Interpolación lineal escalar.
+fn lerp(a: f32, b: f32, t: f32) -> f32 {
+    a + (b - a) * t
+}
+
+/// Mezcla lineal `a`→`b` por `t∈[0,1]`, conservando el alpha de `a`.
+fn mix(a: Color, b: Color, t: f32) -> Color {
+    let [ar, ag, ab, aa] = a.components;
+    let [br, bg, bb, _] = b.components;
+    Color {
+        components: [
+            ar + (br - ar) * t,
+            ag + (bg - ag) * t,
+            ab + (bb - ab) * t,
+            aa,
+        ],
+        ..a
+    }
+}
+
 /// Estado del input. Wrappea un `EditorState` single-line.
-#[derive(Debug, Clone, Default)]
+#[derive(Debug, Clone)]
 pub struct TextInputState {
     inner: EditorState,
     masked: bool,
+    /// Ancho (px) de la caja tal como se pintó el último frame — lo escribe el
+    /// `paint_over` y lo lee el render/hit-testing para el **scroll horizontal**
+    /// (mantener el caret a la vista cuando el texto desborda). `Arc<AtomicU32>`
+    /// (bits de un `f32`) para que el estado siga `Clone + Send + Sync` y el
+    /// closure de pintado pueda escribirlo. 0 = todavía sin pintar (sin scroll).
+    box_w: Arc<AtomicU32>,
+    /// Estado del arrastre de selección con mouse. `drag_x` es la x acumulada
+    /// (px desde el borde) del extremo vivo; `drag_active` marca si ya se
+    /// ancló el otro extremo en el press. Ver [`Self::handle`].
+    drag_x: f32,
+    /// Componente vertical acumulada del arrastre — sólo la usa el text-area
+    /// (multilínea) para extender la selección en 2D. Ver [`area`].
+    drag_y: f32,
+    drag_active: bool,
+    /// Offset vertical (px, bits de `f32`) del scroll del text-area multilínea —
+    /// lo escribe la vista (para mantener el caret a la vista cuando hay más
+    /// renglones visuales que `rows`) y lo lee el hit-testing 2D del próximo
+    /// frame. Sólo lo usa [`area`]; en single-line queda en 0.
+    area_scroll_y: Arc<AtomicU32>,
+    /// Columna "meta" en **px** (offset horizontal desde el inicio del renglón
+    /// visual) que preserva la posición al navegar ↑/↓ por renglones visuales en
+    /// el text-area — el análogo de `desired_col` pero en píxeles, así no deriva
+    /// sobre fuente proporcional / wrap. `None` = recalcular del caret. La resetea
+    /// cualquier movimiento no-vertical. Sólo lo usa [`area`].
+    area_goal_x: Option<f32>,
+    /// La [`Metricas`] con la que la vista pintó el último frame. El
+    /// hit-testing (`x → columna`, `y → renglón`) corre en el `update`, donde no
+    /// hay vista a mano: sin esto mediría con la métrica default aunque el input
+    /// se esté pintando en mono a 3× de zoom, y el click caería en otra letra.
+    /// La escribe la vista, la lee el `update`.
+    metricas: Arc<Mutex<Metricas>>,
+    /// Unix-ms de la última actividad del usuario (tecla o click), que la
+    /// escribe el host con [`Self::marcar_actividad`]. El caret la usa para
+    /// quedarse **sólido** mientras se escribe y recién después titilar, y para
+    /// arrancar la estela. `0` = todavía sin actividad.
+    actividad_ms: Arc<AtomicU64>,
+    /// Posición animada del caret `(x, y)` en px del bloque de texto, más el
+    /// unix-ms en que se muestreó — el estado de la **estela**. Lo escribe el
+    /// pintor cada cuadro (persigue al caret real) y lo lee el cuadro siguiente.
+    /// Empaquetado en atómicos para que el estado siga `Clone + Send + Sync`.
+    caret_anim: Arc<CaretAnim>,
+}
+
+/// Posición animada del caret — el estado que hace posible la **estela**: sin
+/// recordar dónde estaba y cuándo, cada cuadro dibujaría el caret ya en su
+/// destino y no habría nada que arrastrar.
+#[derive(Debug)]
+struct CaretAnim {
+    /// x actual (bits de `f32`), px desde el inicio del bloque de texto.
+    x: AtomicU32,
+    /// y actual (bits de `f32`), px desde el tope del bloque de texto.
+    y: AtomicU32,
+    /// Alto del caret (bits de `f32`) — se anima junto con la posición para que
+    /// un cambio de zoom no lo haga saltar.
+    h: AtomicU32,
+    /// Unix-ms del último muestreo. `0` = sin muestrear (el primer cuadro se
+    /// clava en el destino, sin estela de entrada).
+    t_ms: AtomicU64,
+    /// `true` mientras el rastro va en camino al caret. Distingue «arrancó un
+    /// viaje» de «el caret se corrió un poco»: sin esto, el umbral de salto
+    /// cortaría la estela a mitad de camino, justo cuando lo que falta ya es
+    /// menos que el umbral.
+    persiguiendo: AtomicBool,
+}
+
+impl Default for CaretAnim {
+    fn default() -> Self {
+        Self {
+            x: AtomicU32::new(0),
+            y: AtomicU32::new(0),
+            h: AtomicU32::new(0),
+            t_ms: AtomicU64::new(0),
+            persiguiendo: AtomicBool::new(false),
+        }
+    }
+}
+
+impl Default for TextInputState {
+    /// **Single-line** como [`Self::new`] — importa porque `EditorState::
+    /// default()` es multilínea; derivar `Default` dejaba el input aceptando
+    /// `Enter`/saltos de línea. Un campo default es un campo vacío single-line.
+    fn default() -> Self {
+        Self::new()
+    }
 }
 
 impl TextInputState {
@@ -76,6 +424,69 @@ impl TextInputState {
                 ..EditorOptions::default()
             }),
             masked: false,
+            box_w: Arc::new(AtomicU32::new(0)),
+            drag_x: 0.0,
+            drag_y: 0.0,
+            drag_active: false,
+            area_scroll_y: Arc::new(AtomicU32::new(0)),
+            area_goal_x: None,
+            metricas: Arc::new(Mutex::new(Metricas::default())),
+            actividad_ms: Arc::new(AtomicU64::new(0)),
+            caret_anim: Arc::new(CaretAnim::default()),
+        }
+    }
+
+    /// Estampa "el usuario acaba de tocar el input" en unix-ms. El host la llama
+    /// en cada tecla/click aceptado; el caret la usa para quedarse **sólido**
+    /// mientras se escribe y titilar recién después.
+    ///
+    /// Va por afuera de [`Self::handle`] a propósito: el widget no tiene reloj
+    /// (ni debe tenerlo — sería un `SystemTime::now()` escondido dentro de una
+    /// función pura y sin forma de testearlo), así que la hora la trae el host,
+    /// que ya la tiene.
+    pub fn marcar_actividad(&self, ahora_ms: u64) {
+        self.actividad_ms.store(ahora_ms, Ordering::Relaxed);
+    }
+
+    /// Unix-ms de la última actividad (0 = ninguna todavía).
+    pub fn actividad_ms(&self) -> u64 {
+        self.actividad_ms.load(Ordering::Relaxed)
+    }
+
+    /// La [`Metricas`] con la que se pintó el último cuadro. El `update` la lee
+    /// para hit-testear con la misma métrica que se dibujó.
+    pub fn metricas(&self) -> Metricas {
+        self.metricas.lock().map(|m| m.clone()).unwrap_or_default()
+    }
+
+    /// Fija la métrica **antes** de pintar. La vista la publica sola en cada
+    /// cuadro; esto es para el host que necesita hit-testear (o preguntar
+    /// cuántos renglones ocupa el texto) *antes* del primer pintado — si no, el
+    /// primer click de la sesión mediría con la métrica default.
+    pub fn aplicar_metricas(&self, m: &Metricas) {
+        self.set_metricas(m);
+    }
+
+    /// Inserta texto en el caret, reemplazando la selección viva si la hay, y
+    /// registrándolo en el **undo**. Es el equivalente programático de tipear:
+    /// lo usa el host para pegar, aplicar un autocompletado o insertar un salto
+    /// de línea sin fabricar un `KeyEvent` falso.
+    pub fn insertar(&mut self, s: &str) {
+        if s.is_empty() {
+            return;
+        }
+        let ed = &mut self.inner;
+        let d = llimphi_widget_text_editor::ops::replace_selection(&mut ed.buffer, &mut ed.cursor, s);
+        ed.undo.push(d);
+        ed.bump_edit_seq();
+    }
+
+    /// Guarda la métrica del cuadro (la llama la vista).
+    fn set_metricas(&self, m: &Metricas) {
+        if let Ok(mut g) = self.metricas.lock() {
+            if *g != *m {
+                *g = m.clone();
+            }
         }
     }
 
@@ -84,6 +495,27 @@ impl TextInputState {
         Self { masked: true, ..Self::new() }
     }
 
+    /// Input **multilínea** — acepta `Enter` como salto de línea (no "submit").
+    /// Es el estado que usa `llimphi-widget-text-area`: hereda del mismo motor
+    /// [`EditorState`] toda la edición (selección, undo/redo, word-jump, Home/End,
+    /// copiar/pegar, IME) — la misma `handle`/`apply_key` que el single-line, sin
+    /// una implementación paralela. El caret/selección con mouse se posicionan en
+    /// 2D con [`Self::place_caret_2d`] / [`Self::extend_sel_2d`].
+    pub fn multiline() -> Self {
+        Self {
+            inner: EditorState::with_options(EditorOptions {
+                single_line: false,
+                ..EditorOptions::default()
+            }),
+            ..Self::new()
+        }
+    }
+
+    /// `true` si el estado acepta saltos de línea (creado con [`Self::multiline`]).
+    pub fn is_multiline(&self) -> bool {
+        !self.inner.options.single_line
+    }
+
     /// Texto actual. Devuelve `String` (antes `&str` — el rope no expone
     /// slice borrowed sin clone). Para evitar copias innecesarias, los
     /// callers que sólo necesitan derivar `.trim()` o `.is_empty()`
@@ -135,6 +567,173 @@ impl TextInputState {
     pub fn editor_mut(&mut self) -> &mut EditorState {
         &mut self.inner
     }
+
+    /// El texto tal como se MUESTRA: `•` por carácter en masked, o el crudo. Es
+    /// lo que se mide para el hit-testing del mouse (así el click coincide con lo
+    /// que se ve). Vacío ⇒ cadena vacía (no se hit-testea el placeholder).
+    fn display_text(&self) -> String {
+        let raw = self.inner.text();
+        if self.masked {
+            "\u{2022}".repeat(raw.chars().count())
+        } else {
+            raw
+        }
+    }
+
+    /// Offset horizontal (px) del texto para mantener el **caret a la vista**
+    /// cuando el contenido desborda la caja. `0` si el texto entra o si la caja
+    /// aún no se pintó (no sabemos su ancho). Stateless: lo deriva del ancho del
+    /// último frame ([`Self::box_w`]) + la posición real del caret. Lo comparten
+    /// el render (traslada el nodo de texto), el `paint_over` (caret/selección) y
+    /// el hit-testing (x↔columna) para que todo quede alineado.
+    fn scroll_x(&self, display: &str) -> f32 {
+        let box_w = f32::from_bits(self.box_w.load(Ordering::Relaxed));
+        if box_w <= 1.0 {
+            return 0.0;
+        }
+        let area = box_w - 2.0 * PAD_X;
+        let total = prefix_width(display, display.chars().count());
+        if area <= 1.0 || total <= area {
+            return 0.0;
+        }
+        let n = display.chars().count();
+        let caret_x = prefix_width(display, self.inner.cursor.caret.col.min(n));
+        const MARGIN: f32 = 8.0;
+        (caret_x - area + MARGIN).clamp(0.0, total - area)
+    }
+
+    /// Registra un click del mouse a `local_x` px del borde izquierdo del box
+    /// (coords del nodo, incluido el borde de 1 px + el padding de 10 px).
+    /// Mapea x → columna midiendo los **glifos reales** ([`col_from_x`]) y delega
+    /// en [`EditorState::register_click`], que escala **1 click = caret**,
+    /// **2 = palabra**, **3 = todo** por ventana de tiempo. El parámetro
+    /// `_font_size` quedó por compatibilidad de firma: el render es a
+    /// [`FONT_SIZE`] fijo y la medición usa la fuente real, no un ancho fijo.
+    pub fn pointer_click(&mut self, local_x: f32, _font_size: f32) {
+        let col = col_from_x(&self.display_text(), local_x);
+        // Single-line ⇒ línea 0; register_click clampa la columna al texto.
+        self.inner.register_click(0, col);
+    }
+
+    /// Selecciona todo el texto (equivalente a triple-click / Ctrl+A).
+    pub fn select_all(&mut self) {
+        self.inner.select_all();
+    }
+
+    /// Mapea `local_x` (px desde el borde izquierdo del box) a columna de
+    /// carácter midiendo los **glifos reales** de la fuente ([`col_from_x`]) — no
+    /// un ancho fijo. Suma el [`Self::scroll_x`] para que el click acierte aun
+    /// con el texto desplazado (caret a la vista). Coincide con la posición donde
+    /// el `paint_over` dibuja el caret. Usado por el press y el arrastre.
+    fn col_at_x(&self, local_x: f32) -> usize {
+        let display = self.display_text();
+        col_from_x(&display, local_x + self.scroll_x(&display))
+    }
+
+    /// Aplica una tecla con **clipboard activo**: Ctrl+C copia la selección,
+    /// Ctrl+X la corta, Ctrl+V pega. El resto es idéntico a [`Self::apply_key`]
+    /// (que pasa un `NullClipboard`, por eso ahí copiar/pegar no hacen nada).
+    /// Devuelve `true` si hay que repintar. El caller sostiene el `Clipboard`
+    /// (típico: un [`MemClipboard`] en su Model, o un puente al portapapeles
+    /// del SO).
+    pub fn apply_key_with_clipboard(
+        &mut self,
+        event: &KeyEvent,
+        clipboard: &mut dyn Clipboard,
+    ) -> bool {
+        self.inner.apply_key_with_clipboard(event, clipboard).touched()
+    }
+
+    /// Aplica un evento de IME — el camino de los acentos compuestos (dead
+    /// keys: `´` + `a` → `á`), CJK y el emoji picker cuando la app habilita
+    /// `App::ime_allowed`. Devuelve `true` si cambió algo visible.
+    pub fn apply_ime(&mut self, event: &ImeEvent) -> bool {
+        self.inner.apply_ime_event(event).touched()
+    }
+
+    /// Extiende la selección hasta `local_x` (px desde el borde) — el extremo
+    /// vivo del arrastre. El otro extremo quedó anclado por el press. Pensado
+    /// para el arrastre con mouse; ver [`Self::handle`] con
+    /// [`TextInputEvent::Drag`], que lo maneja acumulando el delta.
+    pub fn pointer_drag(&mut self, local_x: f32) {
+        let col = self.col_at_x(local_x);
+        self.inner.extend_selection_to(0, col);
+    }
+
+    /// Procesa un [`TextInputEvent`] (teclado, IME o mouse) y devuelve `true`
+    /// si hay que repintar. Es el **camino sin fricción**: el caller envuelve
+    /// este enum en su propio `Msg` y en `update` hace
+    /// `state.handle(ev, &mut clipboard)` — un solo `Msg` cubre escribir,
+    /// mover, seleccionar, copiar/pegar, acentos, click, doble/triple-click y
+    /// arrastre. Combinar con [`text_input_view_full`], que emite los eventos
+    /// de mouse ya envueltos.
+    pub fn handle(&mut self, ev: TextInputEvent, clipboard: &mut dyn Clipboard) -> bool {
+        match ev {
+            TextInputEvent::Key(e) => self.apply_key_with_clipboard(&e, clipboard),
+            TextInputEvent::Ime(e) => self.apply_ime(&e),
+            TextInputEvent::Press(x) => {
+                // Click plano: coloca el caret y escala a palabra/todo por la
+                // ventana de tiempo de `register_click` (2 = palabra, 3 = todo).
+                self.drag_active = false;
+                self.drag_x = x;
+                self.inner.register_click(0, self.col_at_x(x));
+                true
+            }
+            TextInputEvent::Drag { anchor_x, dx } => {
+                // Primer `Move` del arrastre: ancla el caret en la posición del
+                // press (`anchor_x`) antes de extender. Los siguientes acumulan
+                // el delta sobre `drag_x` (el runtime da deltas, no absolutos).
+                if !self.drag_active {
+                    self.inner.set_caret_at(0, self.col_at_x(anchor_x));
+                    self.drag_x = anchor_x;
+                    self.drag_active = true;
+                }
+                self.drag_x += dx;
+                self.pointer_drag(self.drag_x);
+                true
+            }
+            TextInputEvent::DragEnd => {
+                self.drag_active = false;
+                false
+            }
+            // Click derecho: no toca el estado del input. El host lo intercepta
+            // (antes de llamar a `handle`) para abrir el menú de edición en la
+            // posición. Si llega hasta aquí, es no-op — nada que repintar.
+            TextInputEvent::Context { .. } => false,
+        }
+    }
+}
+
+/// Evento de entrada dirigido a un text-input: teclado, IME o mouse. El caller
+/// lo envuelve en su propio `Msg` (típicamente `Msg::Field(id, TextInputEvent)`)
+/// y lo reenvía a [`TextInputState::handle`] — así **un campo se cablea con un
+/// solo `Msg`** en vez de uno por gesto. Los eventos de mouse ([`Self::Press`]
+/// y [`Self::Drag`]/[`Self::DragEnd`]) los produce [`text_input_view_full`]; los
+/// de teclado/IME los inyecta el handler global de la app.
+/// Deriva `Debug` (sus campos `KeyEvent`/`ImeEvent`/`f32` lo son) para que los
+/// `enum Msg` de las apps que lo envuelvan puedan seguir derivando `Debug`.
+#[derive(Debug, Clone)]
+pub enum TextInputEvent {
+    /// Tecla (con modificadores). Ctrl+C/X/V operan sobre el clipboard pasado.
+    Key(KeyEvent),
+    /// Evento de IME (acentos compuestos, CJK, emoji).
+    Ime(ImeEvent),
+    /// Mouse-down a `local_x` px del borde: coloca el caret y escala a
+    /// palabra/todo por doble/triple-click.
+    Press(f32),
+    /// Arrastre: `anchor_x` = posición del press (px), `dx` = delta desde el
+    /// evento anterior. Extiende la selección.
+    Drag { anchor_x: f32, dx: f32 },
+    /// Fin del arrastre (soltar el botón).
+    DragEnd,
+    /// Click **derecho** a `(x, y)` (coords **absolutas de ventana**, vía
+    /// `on_right_click_screen`): pide abrir el menú de edición
+    /// (cortar/copiar/pegar/…) anclado al puntero. El estado del input no cambia — es un
+    /// evento de *overlay* que el host resuelve montando
+    /// [`llimphi_widget_edit_menu`] en su `view_overlay` con `(x, y)` de ancla.
+    /// Por eso [`TextInputState::handle`] lo trata como no-op (devuelve `false`):
+    /// el host lo intercepta antes de delegar en `handle`.
+    Context { x: f32, y: f32 },
 }
 
 /// Compone el input box: borde de 1 px (rect padre coloreado), relleno
@@ -150,6 +749,180 @@ pub fn text_input_view<Msg: Clone + 'static>(
     focused: bool,
     palette: &TextInputPalette,
     on_focus: Msg,
+) -> View<Msg> {
+    build_input(state, placeholder, focused, palette, ClickHandler::Focus(on_focus), true)
+}
+
+/// Cómo responde el box al click.
+enum ClickHandler<Msg> {
+    /// Click plano → un solo `Msg` (toma foco). Sin selección por mouse: es el
+    /// render en **reposo** (campo sin foco). Para el campo focado se usa
+    /// [`ClickHandler::Full`], que da caret/selección/arrastre.
+    Focus(Msg),
+    /// Camino completo: el box emite [`TextInputEvent`]s de mouse
+    /// (`Press`/`Drag`/`DragEnd`) ya envueltos por la closure. Habilita
+    /// click→caret, doble/triple-click→palabra/todo y **arrastre→selección**
+    /// sin que el caller cablee cada gesto. Ver [`text_input_view_full`].
+    Full(Arc<dyn Fn(TextInputEvent) -> Msg + Send + Sync>),
+}
+
+/// Input con **paridad de comportamiento** tipo `TextField`: el box emite
+/// [`TextInputEvent`]s de mouse (click→caret, doble/triple-click→palabra/todo,
+/// **arrastre→selección**) ya envueltos por `wrap`, y el caller sólo hace
+/// `state.handle(ev, &mut clipboard)` en `update`. Combinado con reenviar
+/// `TextInputEvent::Key`/`Ime` desde el handler global, un campo queda con
+/// selección, copiar/pegar, undo/redo, salto de palabra y acentos — todo con
+/// **un solo `Msg`** (`Msg::Field(id, TextInputEvent)`), sin un mensaje por
+/// gesto. Es la vista de un campo **focado** (editable con paridad TextField);
+/// para el render en reposo (sin foco, click→foco) está [`text_input_view`].
+pub fn text_input_view_full<Msg, F>(
+    state: &TextInputState,
+    placeholder: &str,
+    focused: bool,
+    palette: &TextInputPalette,
+    wrap: F,
+) -> View<Msg>
+where
+    Msg: Clone + 'static,
+    F: Fn(TextInputEvent) -> Msg + Send + Sync + 'static,
+{
+    build_input(state, placeholder, focused, palette, ClickHandler::Full(Arc::new(wrap)), true)
+}
+
+/// Campo de texto **con label flotante** — el look característico de Material /
+/// Flutter. El `label` descansa dentro del campo (como un placeholder) cuando
+/// está vacío y sin foco, y **flota hacia arriba** (más chico, en el color de
+/// foco) al focar o cuando hay texto. `float_t ∈ [0,1]` controla la posición:
+/// `0` = descansando, `1` = flotado; el host puede animarlo con un tween (o
+/// pasar `if focused || !state.is_empty() { 1.0 } else { 0.0 }` para el salto
+/// sin animar — [`float_target`] lo calcula). El campo en sí es el mismo
+/// [`text_input_view_full`] (scroll, selección, menú, relieve), sin placeholder
+/// (el label lo reemplaza). `wrap` envuelve los [`TextInputEvent`] como siempre.
+pub fn text_input_field_view<Msg, F>(
+    state: &TextInputState,
+    label: &str,
+    focused: bool,
+    float_t: f32,
+    palette: &TextInputPalette,
+    wrap: F,
+) -> View<Msg>
+where
+    Msg: Clone + 'static,
+    F: Fn(TextInputEvent) -> Msg + Send + Sync + 'static,
+{
+    let t = float_t.clamp(0.0, 1.0);
+    // Geometría (px). `LABEL_SPACE` es el aire arriba donde vive el label flotado
+    // (sobre la línea del borde superior del campo, que empieza en `LABEL_SPACE`).
+    const LABEL_SPACE: f32 = 14.0;
+    const FIELD_H: f32 = 34.0;
+    const LABEL_LEFT: f32 = 12.0;
+    const GAP_PAD: f32 = 4.0; // aire a los lados del label dentro de la muesca
+    // El campo, SIN borde propio (lo dibuja el notched outline de abajo) y sin
+    // placeholder (el label ocupa ese rol).
+    let field = build_input(state, "", focused, palette, ClickHandler::Full(Arc::new(wrap)), false);
+
+    // Label: interpola tamaño, color y posición vertical entre reposo (dentro,
+    // centrado en el campo) y flotado (sobre la línea del borde superior).
+    let size = lerp(13.0, 11.0, t);
+    let color = mix(palette.fg_placeholder, palette.border_focus, t);
+    let resting_y = LABEL_SPACE + (FIELD_H - 13.0) * 0.5; // centro vertical del campo
+    let floating_y = LABEL_SPACE - size * 0.62; // centrado sobre la línea del borde
+    let y = lerp(resting_y, floating_y, t);
+    let label_node = View::new(Style {
+        position: Position::Absolute,
+        inset: Rect {
+            left: length(LABEL_LEFT),
+            top: length(y),
+            right: auto(),
+            bottom: auto(),
+        },
+        ..Default::default()
+    })
+    .text_aligned(label.to_string(), size, color, Alignment::Start);
+
+    // Notched outline: borde del campo dibujado como TRAZO, con una muesca en el
+    // borde superior por donde asoma el label. El hueco crece con `t` y su ancho
+    // se ajusta al ancho medido del label (a su tamaño flotado). Va en un
+    // `paint_over` del contenedor (sobre el campo, bajo el label que queda en el
+    // hueco). Espeja el `OutlineInputBorder` de Material.
+    let (bcol, bw) = if focused {
+        (palette.border_focus, 2.0_f32)
+    } else {
+        (palette.border, 1.0_f32)
+    };
+    let lw_float = prefix_width(label, label.chars().count()) * (11.0 / 13.0);
+    let radius_f = palette.radius as f64; // themizable
+
+    // Contenedor: reserva el espacio del label arriba, campo debajo, label absoluto
+    // encima. El borde (trazo con muesca) se pinta al final con `paint_over`.
+    View::new(Style {
+        size: Size { width: percent(1.0_f32), height: length(LABEL_SPACE + FIELD_H) },
+        padding: Rect {
+            left: length(0.0_f32),
+            right: length(0.0_f32),
+            top: length(LABEL_SPACE),
+            bottom: length(0.0_f32),
+        },
+        ..Default::default()
+    })
+    .children(vec![field, label_node])
+    .paint_over(move |scene, _ts, rect| {
+        use llimphi_ui::llimphi_raster::kurbo::{Affine, BezPath, Stroke};
+        if rect.w <= 0.0 {
+            return;
+        }
+        let r = radius_f;
+        let hw = bw as f64 * 0.5;
+        let ox = rect.x as f64;
+        let oy = rect.y as f64;
+        let x0 = ox + hw;
+        let x1 = ox + rect.w as f64 - hw;
+        let y0 = oy + LABEL_SPACE as f64 + hw; // línea del borde superior
+        let y1 = oy + (LABEL_SPACE + FIELD_H) as f64 - hw;
+        // Muesca: centrada en el label; de un punto (t=0) al hueco completo (t=1).
+        let g0_full = ox + (LABEL_LEFT - GAP_PAD) as f64;
+        let g1_full = ox + (LABEL_LEFT + GAP_PAD) as f64 + lw_float as f64;
+        let center = (g0_full + g1_full) * 0.5;
+        let nx0 = (center - (center - g0_full) * t as f64).clamp(x0 + r, x1 - r);
+        let nx1 = (center + (g1_full - center) * t as f64).clamp(x0 + r, x1 - r);
+        // Trazo abierto en sentido horario, arrancando a la DERECHA de la muesca
+        // y terminando a su IZQUIERDA → deja el hueco en el borde superior.
+        let mut p = BezPath::new();
+        p.move_to((nx1, y0));
+        p.line_to((x1 - r, y0));
+        p.quad_to((x1, y0), (x1, y0 + r)); // esquina sup-der
+        p.line_to((x1, y1 - r));
+        p.quad_to((x1, y1), (x1 - r, y1)); // inf-der
+        p.line_to((x0 + r, y1));
+        p.quad_to((x0, y1), (x0, y1 - r)); // inf-izq
+        p.line_to((x0, y0 + r));
+        p.quad_to((x0, y0), (x0 + r, y0)); // sup-izq
+        p.line_to((nx0, y0)); // borde superior hasta el inicio de la muesca
+        scene.stroke(&Stroke::new(bw as f64), Affine::IDENTITY, bcol, None, &p);
+    })
+}
+
+/// El `float_t` objetivo (sin animar) de un [`text_input_field_view`]: `1.0` si
+/// el campo está focado o tiene texto (el label flota), `0.0` si no (descansa
+/// adentro). Un host que quiera animar interpola hacia este valor con un tween.
+pub fn float_target(focused: bool, state: &TextInputState) -> f32 {
+    if focused || !state.is_empty() {
+        1.0
+    } else {
+        0.0
+    }
+}
+
+fn build_input<Msg: Clone + 'static>(
+    state: &TextInputState,
+    placeholder: &str,
+    focused: bool,
+    palette: &TextInputPalette,
+    click: ClickHandler<Msg>,
+    // `false` = el campo NO dibuja su borde macizo (el ring queda del color del
+    // fondo): lo usa [`text_input_field_view`], que pinta un **borde con muesca**
+    // (notched outline de Material) alrededor, con hueco para el label flotado.
+    bordered: bool,
 ) -> View<Msg> {
     let raw = state.text();
     let is_empty = raw.is_empty();
@@ -172,6 +945,17 @@ pub fn text_input_view<Msg: Clone + 'static>(
     } else {
         String::new()
     };
+    // Rango de selección en columnas (= char offsets, single-line). `None` si
+    // no hay selección o el input no está focado. Se captura por valor para el
+    // closure de pintado (no puede tomar prestado `state`).
+    let sel_cols: Option<(usize, usize)> = if focused {
+        let ed = state.editor();
+        let (s, e) = ed.cursor.selection_range(&ed.buffer);
+        (s != e).then_some((s, e))
+    } else {
+        None
+    };
+    let sel_color = palette.selection;
     let text_color = if is_empty {
         palette.fg_placeholder
     } else {
@@ -182,8 +966,15 @@ pub fn text_input_view<Msg: Clone + 'static>(
     } else {
         (palette.bg, palette.border)
     };
+    // Decoración THEMIZABLE (de la paleta, que sale de los tokens del theme).
+    let radius = palette.radius as f64;
+    let relieve = palette.relieve;
+    // Scroll horizontal: cuánto correr el texto a la izquierda para que el caret
+    // quede a la vista cuando desborda. Sólo focado (sin foco no hay caret que
+    // seguir; el texto va desde el inicio). `box_w` la escribe el `paint_over`.
+    let scroll = if focused { state.scroll_x(&display) } else { 0.0 };
 
-    let mut inner = View::new(Style {
+    let inner = View::new(Style {
         size: Size {
             width: percent(1.0_f32),
             height: percent(1.0_f32),
@@ -198,35 +989,86 @@ pub fn text_input_view<Msg: Clone + 'static>(
         ..Default::default()
     })
     .fill(bg)
-    .radius(3.0);
+    .radius(radius - 1.0)
+    // Recorta el texto desplazado para que no se derrame fuera de la caja.
+    .clip(true);
+    // Sheen: gradiente vertical translúcido que le da dimensión al fondo (luz
+    // arriba → neutro → sombra abajo), derivado de la luminancia del fondo para
+    // leer igual en themes claros y oscuros. Va en `paint_with` (entre el fill y
+    // el texto): no re-pinta texto (no reintroduce el "bold") y respeta el color.
+    // Sólo si el theme pide relieve (un theme flat lo apaga).
+    let inner = if !relieve {
+        inner
+    } else {
+        let dark = 1.0 - luminance(bg);
+        let radius_in = radius - 1.0;
+        let top_a = (0.06 + 0.10 * dark).min(0.18);
+        inner.paint_with(move |scene, _ts, rect| {
+            use llimphi_ui::llimphi_raster::kurbo::{Affine, Point, RoundedRect};
+            use llimphi_ui::llimphi_raster::peniko::{Color as PColor, Fill, Gradient};
+            if rect.w <= 0.0 || rect.h <= 0.0 {
+                return;
+            }
+            let x0 = rect.x as f64;
+            let y0 = rect.y as f64;
+            let x1 = (rect.x + rect.w) as f64;
+            let y1 = (rect.y + rect.h) as f64;
+            let rr = RoundedRect::new(x0, y0, x1, y1, radius_in);
+            let top = PColor { components: [1.0, 1.0, 1.0, top_a], ..PColor::WHITE };
+            let midc = PColor::from_rgba8(255, 255, 255, 0);
+            let bot = PColor::from_rgba8(0, 0, 0, 20);
+            let sheen = Gradient::new_linear(Point::new(x0, y0), Point::new(x0, y1))
+                .with_stops([top, midc, bot].as_slice());
+            scene.fill(Fill::NonZero, Affine::IDENTITY, &sheen, None, &rr);
+        })
+    };
+    // El TEXTO va SIEMPRE como nodo hijo (mismo render del compositor, peso normal),
+    // focado o no. Antes el camino focado lo re-pintaba con `draw_layout` en un
+    // `paint_over` (dentro de un `push_layer`), y eso lo dejaba **más pesado/ilegible
+    // al escribir** (la fuente del bundle es de un solo peso: no es `FontWeight`, es
+    // el re-pintado en la capa). Ahora el `paint_over` sólo dibuja el **caret** y el
+    // **resaltado de selección** (translúcido, encima del texto) — nunca el texto.
+    // (Trade-off: se perdió el scroll horizontal del caret en campos que desbordan;
+    // follow-up. Para campos cortos —lo típico en config— no hace falta.)
+    let mut texto = View::new(Style {
+        size: Size { width: percent(1.0_f32), height: auto() },
+        ..Default::default()
+    })
+    .text_aligned(display.clone(), 13.0, text_color, Alignment::Start);
+    // Traslada el texto por el scroll (mismo render del compositor, sin re-pintar
+    // en capa → sin el bug del "bold"). El caret/selección abajo restan el mismo
+    // offset, así todo queda alineado.
+    if scroll > 0.0 {
+        use llimphi_ui::llimphi_raster::kurbo::{Affine, Vec2};
+        texto = texto.transform(Affine::translate(Vec2::new(-scroll as f64, 0.0)));
+    }
+    let base = inner.children(vec![texto]);
     let inner = if focused {
-        // Caret v3 — scroll horizontal (Fase 7.1255). Cuando el input está
-        // focado, la propia hoja pinta el texto Y el caret en un solo `paint_over`
-        // (pasada vello FINAL): así puede DESPLAZAR el texto a la izquierda cuando
-        // el cursor se saldría por el borde derecho, manteniéndolo visible — el
-        // clásico scroll del caret de los `<input>`. El offset (`scroll`) depende
-        // del ancho de layout y de la posición del caret, ambos conocidos sólo en
-        // tiempo de pintado (acá `rect.w` ya está resuelto y `ts` puede medir), no
-        // en `view()` — por eso no se hace con un nodo hijo + `transform` estático.
-        // Sin foco se usa el camino de nodo-hijo de abajo (sin caret, sin scroll).
         let caret_color = palette.caret;
+        let caret_visible = palette.caret_visible;
+        // Selección translúcida (deja ver el texto que está debajo).
+        let sel_translucida = Color {
+            components: [sel_color.components[0], sel_color.components[1], sel_color.components[2], 0.4],
+            ..sel_color
+        };
         let display_c = display;
         let caret_prefix_c = caret_prefix;
-        let tcolor = text_color;
-        inner.paint_over(move |scene, ts, rect| {
+        let sel_cols_c = sel_cols;
+        let scroll_c = scroll as f64;
+        let box_w_cell = state.box_w.clone();
+        base.paint_over(move |scene, ts, rect| {
             use llimphi_ui::llimphi_raster::kurbo::{Affine, Rect as KRect};
-            use llimphi_ui::llimphi_raster::peniko::{BlendMode, Fill};
-            use llimphi_ui::llimphi_text::{draw_layout, measurement, Alignment};
+            use llimphi_ui::llimphi_raster::peniko::Fill;
+            use llimphi_ui::llimphi_text::{measurement, Alignment};
+            // Guarda el ancho pintado para el scroll del próximo frame.
+            box_w_cell.store((rect.w).to_bits(), Ordering::Relaxed);
             let pad = 10.0_f64;
-            // Ancho visible interno (entre los dos paddings de 10 px).
-            let vis_w = (rect.w as f64 - 2.0 * pad).max(0.0);
-            // Layout del texto completo en una sola línea (sin wrap).
-            let layout = ts.layout(
-                &display_c, 13.0, None, Alignment::Start, 1.2, false, None, 400.0, false, false,
-                0.0, 0.0,
-            );
-            let th = measurement(&layout).height as f64;
-            // Ancho del prefijo hasta el caret = posición x del caret en el texto.
+            let cx0 = rect.x as f64 + pad - scroll_c; // origen del texto, corrido por el scroll
+            let x_min = rect.x as f64 + pad; // borde visible izq del área de texto
+            let x_max = rect.x as f64 + rect.w as f64 - pad; // borde visible der
+            let th = 16.0_f64; // alto aprox del resaltado/caret
+            let oy = rect.y as f64 + (rect.h as f64 - th) * 0.5;
+            // Ancho del prefijo hasta el caret = x del caret dentro del texto.
             let caret_w = if caret_prefix_c.is_empty() {
                 0.0
             } else {
@@ -236,61 +1078,73 @@ pub fn text_input_view<Msg: Clone + 'static>(
                 );
                 measurement(&lp).width as f64
             };
-            // Scroll: si el caret cae más allá del ancho visible, corre el texto a
-            // la izquierda lo justo para que el caret quede al borde (con 2 px de
-            // aire). Texto que entra ⇒ scroll 0 (anclado al padding-left).
-            let scroll = (caret_w - vis_w + 2.0).max(0.0);
-            let cx0 = rect.x as f64 + pad;
-            // Recorte al área de contenido para que el texto desplazado no se
-            // derrame sobre el padding ni fuera de la caja.
-            let clip = KRect::new(
-                cx0,
-                rect.y as f64,
-                rect.x as f64 + rect.w as f64 - pad,
-                rect.y as f64 + rect.h as f64,
-            );
-            scene.push_layer(Fill::NonZero, BlendMode::default(), 1.0, Affine::IDENTITY, &clip);
-            let oy = rect.y as f64 + (rect.h as f64 - th) * 0.5;
-            draw_layout(scene, &layout, tcolor, (cx0 - scroll, oy));
-            scene.pop_layer();
-            // Caret: barra vertical en la posición del caret, desplazada por el
-            // mismo scroll. Fuera del clip para que nunca se recorte en el borde.
-            let x = cx0 + caret_w - scroll;
-            let h = 16.0_f64;
-            let cy = rect.y as f64 + rect.h as f64 * 0.5;
-            let bar = KRect::new(x, cy - h * 0.5, x + 1.5, cy + h * 0.5);
-            scene.fill(Fill::NonZero, Affine::IDENTITY, caret_color, None, &bar);
+            // Selección: rect translúcido encima del texto, recortado al área visible.
+            if let Some((s, e)) = sel_cols_c {
+                let mut prefix_w = |n: usize| -> f64 {
+                    if n == 0 {
+                        return 0.0;
+                    }
+                    let p: String = display_c.chars().take(n).collect();
+                    let lp = ts.layout(
+                        &p, 13.0, None, Alignment::Start, 1.2, false, None, 400.0, false, false, 0.0,
+                        0.0,
+                    );
+                    measurement(&lp).width as f64
+                };
+                let xs = (cx0 + prefix_w(s)).clamp(x_min, x_max);
+                let xe = (cx0 + prefix_w(e)).clamp(x_min, x_max);
+                if xe > xs {
+                    let sel_rect = KRect::new(xs, oy, xe, oy + th);
+                    scene.fill(Fill::NonZero, Affine::IDENTITY, sel_translucida, None, &sel_rect);
+                }
+            }
+            // Caret: barra vertical (el scroll lo mantiene dentro del área visible).
+            if caret_visible {
+                let x = (cx0 + caret_w).clamp(x_min, x_max);
+                let cy = rect.y as f64 + rect.h as f64 * 0.5;
+                let bar = KRect::new(x, cy - 8.0, x + 1.5, cy + 8.0);
+                scene.fill(Fill::NonZero, Affine::IDENTITY, caret_color, None, &bar);
+            }
         })
     } else {
-        // Sin foco: el texto va en un nodo HIJO de alto automático, centrado
-        // verticalmente por el contenedor (`align_items: Center`). (`align_items`
-        // no centra el texto PROPIO de un nodo — por eso el hijo.)
-        let texto = View::new(Style {
-            size: Size {
-                width: percent(1.0_f32),
-                height: auto(),
-            },
-            ..Default::default()
-        })
-        .text_aligned(display, 13.0, text_color, Alignment::Start);
-        inner.children(vec![texto])
+        base
     };
 
-    View::new(Style {
+    // Borde: 1 px en reposo, 2 px al focar (énfasis de foco, como Material). El
+    // borde se pinta como padding coloreado del nodo exterior sobre el interior.
+    let bw = if focused { 2.0_f32 } else { 1.0_f32 };
+    // Sombra de elevación (themizable): `palette.elevation` sale de
+    // `llimphi_theme::elevation::*`. Un pelo más marcada al focar (el campo activo
+    // "sube"). Sólo se pinta si el theme pide relieve.
+    let (elev_a, elev_blur, elev_dy) = palette.elevation;
+    let shadow = llimphi_ui::Shadow {
+        color: Color::from_rgba8(0, 0, 0, if focused { elev_a.saturating_add(16) } else { elev_a }),
+        blur: if focused { elev_blur * 1.5 } else { elev_blur },
+        dx: 0.0,
+        dy: elev_dy,
+        spread: -1.0,
+    };
+    let mut node = View::new(Style {
         size: Size {
             width: percent(1.0_f32),
             height: length(34.0_f32),
         },
         padding: Rect {
-            left: length(1.0_f32),
-            right: length(1.0_f32),
-            top: length(1.0_f32),
-            bottom: length(1.0_f32),
+            left: length(bw),
+            right: length(bw),
+            top: length(bw),
+            bottom: length(bw),
         },
         ..Default::default()
     })
-    .fill(border)
-    .radius(4.0)
+    // Sin borde propio, el ring va del color del fondo (invisible) → lo dibuja
+    // el notched outline del campo con label.
+    .fill(if bordered { border } else { bg })
+    .radius(radius);
+    if relieve {
+        node = node.shadow(shadow);
+    }
+    let node = node
     // Semántica: input de texto + el valor crudo como `value` (no el "•"
     // del modo masked — los lectores no deben dictar la contraseña en
     // voz alta; AccessKit ya marca el control como TextInput y el lector
@@ -299,16 +1153,42 @@ pub fn text_input_view<Msg: Clone + 'static>(
     // que el lector lo enuncie como pista. `value` queda vacío en masked.
     .role(llimphi_ui::Role::TextInput)
     .aria_value(if state.masked { String::new() } else { state.text() })
-    .aria_description(if is_empty { placeholder.to_string() } else { String::new() })
-    .on_click(on_focus)
-    .cursor(llimphi_ui::Cursor::Text)
-    .children(vec![inner])
+    .aria_description(if is_empty { placeholder.to_string() } else { String::new() });
+    // Click: plano (toma foco) o con posición (foco + caret/selección). El
+    // `on_click_at` da `x` relativo al rect del box; el caller lo pasa a
+    // `pointer_click`.
+    let node = match click {
+        ClickHandler::Focus(m) => node.on_click(m),
+        ClickHandler::Full(cb) => {
+            // `on_click_at` (press→caret, escala palabra/todo por timing) y
+            // `draggable_at` (arrastre→selección) conviven en el mismo nodo
+            // (patrón dominium). El click no dispara si el gesto deriva en
+            // arrastre; el arrastre da deltas + la posición del press (`x0`).
+            let press = cb.clone();
+            let drag = cb.clone();
+            let ctx = cb.clone();
+            node.on_click_at(move |x, _y, _w, _h| Some(press(TextInputEvent::Press(x))))
+                .draggable_at(move |phase, dx, _dy, x0, _y0| match phase {
+                    DragPhase::Move => Some(drag(TextInputEvent::Drag { anchor_x: x0, dx })),
+                    DragPhase::End => Some(drag(TextInputEvent::DragEnd)),
+                })
+                // Click derecho → abrir el menú de edición anclado al puntero.
+                // `on_right_click_screen` da coords ABSOLUTAS de ventana (no
+                // locales al nodo), que es lo que quiere el menú: aparecer donde
+                // está el cursor. (Con `on_right_click_at` —local— el menú saltaba
+                // a la esquina cuando el campo no estaba pegado al origen.)
+                .on_right_click_screen(move |x, y, _w, _h| {
+                    Some(ctx(TextInputEvent::Context { x, y }))
+                })
+        }
+    };
+    node.cursor(llimphi_ui::Cursor::Text).children(vec![inner])
 }
 
 #[cfg(test)]
 mod tests {
     use super::*;
-    use llimphi_ui::{Key, KeyState, NamedKey};
+    use llimphi_ui::{Key, KeyState, Modifiers, NamedKey};
 
     fn key_press(key: Key, text: Option<&str>) -> KeyEvent {
         KeyEvent {
@@ -365,6 +1245,32 @@ mod tests {
         assert_eq!(s.text(), "a");
     }
 
+    #[test]
+    fn pointer_click_escalates_caret_word_all() {
+        let mut s = TextInputState::new();
+        s.set_text("hola mundo");
+        // x cae dentro de "mundo" (col ~7 con char_w = 13*0.5 = 6.5; x = 11 + 7*6.5).
+        let x = 11.0 + 7.0 * 6.5;
+        // 1 click: caret simple, sin selección.
+        s.pointer_click(x, 13.0);
+        assert!(!s.editor().has_selection(), "1 click no debe seleccionar");
+        // 2 clicks: palabra bajo el cursor.
+        s.pointer_click(x, 13.0);
+        assert!(s.editor().has_selection(), "2 clicks debe seleccionar palabra");
+        assert_eq!(s.editor().selected_text().as_deref(), Some("mundo"));
+        // 3 clicks: todo (párrafo = la línea entera en single-line).
+        s.pointer_click(x, 13.0);
+        assert_eq!(s.editor().selected_text().as_deref(), Some("hola mundo"));
+    }
+
+    #[test]
+    fn select_all_selecciona_todo() {
+        let mut s = TextInputState::new();
+        s.set_text("Frida Kahlo");
+        s.select_all();
+        assert_eq!(s.editor().selected_text().as_deref(), Some("Frida Kahlo"));
+    }
+
     #[test]
     fn apply_key_backspace_pops() {
         let mut s = TextInputState::new();
@@ -407,4 +1313,211 @@ mod tests {
         assert_eq!(s.pop(), Some('a'));
         assert_eq!(s.text(), "hol");
     }
+
+    fn key_ctrl(ch: &str) -> KeyEvent {
+        KeyEvent {
+            key: Key::Character(ch.into()),
+            state: KeyState::Pressed,
+            text: Some(ch.to_string()),
+            modifiers: Modifiers { ctrl: true, ..Default::default() },
+            repeat: false,
+        }
+    }
+
+    #[test]
+    fn copiar_y_pegar_por_clipboard() {
+        // Ctrl+A + Ctrl+C copia; Ctrl+V al final pega. `apply_key` (sin
+        // clipboard) NO copiaría — por eso el hueco que cierra F1.
+        let mut s = TextInputState::new();
+        s.set_text("hola");
+        let mut clip = MemClipboard::new();
+        s.select_all();
+        assert!(s.apply_key_with_clipboard(&key_ctrl("c"), &mut clip));
+        assert_eq!(clip.get().as_deref(), Some("hola"));
+        // Caret al final (colapsa la selección a la derecha) y pega.
+        let end = key_press(Key::Named(NamedKey::End), None);
+        s.apply_key(&end);
+        assert!(s.apply_key_with_clipboard(&key_ctrl("v"), &mut clip));
+        assert_eq!(s.text(), "holahola");
+    }
+
+    #[test]
+    fn apply_key_sin_clipboard_no_pega() {
+        // Contraste: el camino viejo (NullClipboard) deja Ctrl+V sin efecto.
+        let mut s = TextInputState::new();
+        s.set_text("hola");
+        s.apply_key(&key_press(Key::Named(NamedKey::End), None));
+        s.apply_key(&key_ctrl("v")); // NullClipboard.get() = None
+        assert_eq!(s.text(), "hola");
+    }
+
+    #[test]
+    fn ime_compone_acento() {
+        // Dead key: `´` en preedit y luego commit `á`.
+        use llimphi_ui::ImeEvent;
+        let mut s = TextInputState::new();
+        s.apply_ime(&ImeEvent::Preedit { text: "´".into(), cursor: None });
+        assert!(s.apply_ime(&ImeEvent::Commit("á".into())));
+        assert_eq!(s.text(), "á");
+    }
+
+    #[test]
+    fn handle_press_coloca_caret_y_drag_selecciona() {
+        // El camino frictionless: Press ancla, Drag extiende — sin un Msg por
+        // gesto. "hola mundo": press dentro de "hola" (col ~2), arrastre a la
+        // derecha selecciona hacia "mundo".
+        let mut s = TextInputState::new();
+        s.set_text("hola mundo");
+        let mut clip = NullClipboard;
+        // Press cerca del inicio (col 0-ish).
+        let x0 = 11.0 + 0.0 * 6.5;
+        s.handle(TextInputEvent::Press(x0), &mut clip);
+        assert!(!s.editor().has_selection());
+        // Arrastre: primer Move ancla en x0, luego +delta hasta col ~10.
+        s.handle(TextInputEvent::Drag { anchor_x: x0, dx: 10.0 * 6.5 }, &mut clip);
+        assert!(s.editor().has_selection(), "el arrastre debe seleccionar");
+        s.handle(TextInputEvent::DragEnd, &mut clip);
+    }
+
+    #[test]
+    fn hit_testing_usa_glifos_reales_no_ancho_fijo() {
+        // La prueba de que el fix es real: con glifos de ancho MUY distinto
+        // ("iii" angostas, "WWW" anchas), el borde entre ambos grupos NO cae
+        // donde un ancho monoespaciado fijo lo pondría. `col_from_x` en el x del
+        // borde real (medido con la fuente) debe devolver la columna 3 exacta.
+        let display = "iiiWWW";
+        // x del borde real entre la 3ª y 4ª columna (fin de "iii"), + el PAD.
+        let borde = PAD_X + prefix_width(display, 3);
+        assert_eq!(
+            col_from_x(display, borde),
+            3,
+            "el click en el borde real de 'iii|WWW' debe dar columna 3"
+        );
+        // Y el viejo cálculo (ancho fijo = 13*0.5 = 6.5 px/char) habría dado otra
+        // columna en ese mismo x — evidencia de que ahora medimos de verdad.
+        let col_viejo = (((borde - PAD_X) / 6.5).round()) as usize;
+        assert_ne!(
+            col_viejo, 3,
+            "el ancho fijo erraba la columna en ese x (por eso 'la selección agarraba mal')"
+        );
+        // Click bien dentro de las anchas 'W' cae en una columna > 3.
+        let dentro_w = PAD_X + prefix_width(display, 5);
+        assert!(col_from_x(display, dentro_w) >= 4);
+    }
+
+    #[test]
+    fn scroll_horizontal_mantiene_el_caret_a_la_vista() {
+        // El caret nunca debe quedar fuera de la caja cuando el texto desborda.
+        let mut s = TextInputState::new();
+        s.set_text("abcdefghijklmnopqrstuvwxyz0123456789");
+        let display = s.display_text();
+        let total = prefix_width(&display, display.chars().count());
+        // Sin ancho pintado todavía → sin scroll (no sabemos el tamaño).
+        assert_eq!(s.scroll_x(&display), 0.0);
+        // Simulá el ancho de caja que escribiría el paint_over: caja angosta.
+        let box_w = 80.0_f32;
+        s.box_w.store(box_w.to_bits(), Ordering::Relaxed);
+        let area = box_w - 2.0 * PAD_X;
+        assert!(total > area, "el texto debe desbordar para ejercitar el scroll");
+        // Caret al final → el scroll muestra el final; el caret cae dentro del área.
+        s.apply_key(&key_press(Key::Named(NamedKey::End), None));
+        let scroll = s.scroll_x(&display);
+        let caret_visible = prefix_width(&display, s.editor().cursor.caret.col) - scroll;
+        assert!(
+            caret_visible >= 0.0 && caret_visible <= area + 1.0,
+            "caret a la vista con el offset: {caret_visible} debe caer en [0, {area}]"
+        );
+        // Caret al inicio → sin scroll (se ve el principio del texto).
+        s.apply_key(&key_press(Key::Named(NamedKey::Home), None));
+        assert_eq!(s.scroll_x(&display), 0.0, "con el caret al inicio no hay scroll");
+    }
+
+    #[test]
+    fn decoracion_sale_de_los_tokens_del_theme() {
+        // Themizable: el radio y la elevación de la paleta salen de los tokens
+        // canónicos del theme, no de números mágicos hardcodeados.
+        let pal = TextInputPalette::from_theme(&llimphi_theme::Theme::dark());
+        assert_eq!(pal.radius, llimphi_theme::radius::MD as f32);
+        assert_eq!(pal.elevation, llimphi_theme::elevation::E1);
+        assert!(pal.relieve, "por defecto el input lleva relieve");
+        // Un theme/consumidor flat lo apaga sin tocar el widget.
+        let flat = TextInputPalette { relieve: false, radius: 0.0, ..pal };
+        assert!(!flat.relieve);
+        assert_eq!(flat.radius, 0.0);
+    }
+
+    #[test]
+    fn multiline_acepta_enter_y_single_no() {
+        // `multiline()` comparte el MISMO motor que el single-line; sólo cambia
+        // `single_line`. Enter inserta salto en multi, se ignora en single.
+        let mut m = TextInputState::multiline();
+        assert!(m.is_multiline());
+        m.set_text("a");
+        m.apply_key(&key_press(Key::Named(NamedKey::Enter), None));
+        // insertar 'b' tras el salto
+        m.apply_key(&key_press(Key::Character("b".into()), Some("b")));
+        assert_eq!(m.text(), "a\nb");
+        let mut s = TextInputState::new();
+        assert!(!s.is_multiline());
+        s.set_text("a");
+        s.apply_key(&key_press(Key::Named(NamedKey::Enter), None));
+        assert_eq!(s.text(), "a", "single-line ignora Enter");
+    }
+
+    #[test]
+    fn float_target_sube_con_foco_o_texto() {
+        let mut s = TextInputState::new();
+        // Vacío + sin foco → descansa dentro.
+        assert_eq!(float_target(false, &s), 0.0);
+        // Con foco (aunque vacío) → flota.
+        assert_eq!(float_target(true, &s), 1.0);
+        // Con texto (aunque sin foco) → flota.
+        s.set_text("hola");
+        assert_eq!(float_target(false, &s), 1.0);
+    }
+
+    #[test]
+    fn context_no_toca_el_estado() {
+        // El click derecho es un evento de overlay: `handle` no cambia el texto
+        // ni el caret (devuelve false); el host lo intercepta para abrir el menú.
+        let mut s = TextInputState::new();
+        s.set_text("hola");
+        let caret_antes = s.editor().cursor.caret.col;
+        let mut clip = NullClipboard;
+        assert!(!s.handle(TextInputEvent::Context { x: 5.0, y: 9.0 }, &mut clip));
+        assert_eq!(s.text(), "hola");
+        assert_eq!(s.editor().cursor.caret.col, caret_antes);
+        assert!(!s.editor().has_selection());
+    }
+
+    #[test]
+    fn context_se_emite_en_la_vista_full() {
+        // La vista full registra el handler de click derecho; la de reposo no
+        // (solo toma foco). Verificamos el wiring montando ambas.
+        use llimphi_ui::llimphi_layout::LayoutTree;
+        use llimphi_ui::mount;
+        let mut st = TextInputState::new();
+        st.set_text("hola");
+        let pal = TextInputPalette::default();
+        let mut lt = LayoutTree::new();
+        let full = mount(
+            &mut lt,
+            text_input_view_full(&st, "", true, &pal, |ev| ev),
+        );
+        assert!(
+            llimphi_ui::has_right_click_handler(&full),
+            "la vista full debe emitir el click derecho (menú de edición)"
+        );
+    }
+
+    #[test]
+    fn default_es_single_line() {
+        // Regresión: `TextInputState::default()` debe ser single-line (Enter
+        // ignorado), no heredar el multilínea de `EditorState::default()`.
+        let mut s = TextInputState::default();
+        s.set_text("hola");
+        let enter = key_press(Key::Named(NamedKey::Enter), None);
+        assert!(!s.apply_key(&enter));
+        assert_eq!(s.text(), "hola");
+    }
 }
diff --git a/widgets/text-input/src/rico.rs b/widgets/text-input/src/rico.rs
new file mode 100644
index 0000000..c7b71a3
--- /dev/null
+++ b/widgets/text-input/src/rico.rs
@@ -0,0 +1,893 @@
+//! Vista **rica** del text-area: el mismo motor de edición del resto del widget
+//! ([`TextInputState`] sobre `EditorState`), pero con los adornos que hasta hoy
+//! cada app se dibujaba por su cuenta con un pintor propio.
+//!
+//! Nació de una constatación concreta: shuma tenía en su barra un input hecho a
+//! mano —ajuste blando, coloreo por token, sugerencia fantasma, placeholder con
+//! ícono, caret dibujado a mano— que reimplementaba (peor, y sólo para shuma)
+//! lo que este widget ya hacía, y a cambio se perdía el salto de palabra con
+//! selección, el undo, el IME y el doble/triple click. Lo que le faltaba al
+//! widget para reemplazarlo era **presentación**, no edición:
+//!
+//! - **Métrica configurable** ([`Metricas`]): mono + zoom. Sin esto el widget no
+//!   puede ser el prompt de una terminal.
+//! - **Tramos de color** ([`Adornos::tramos`]): rangos de bytes → color, para
+//!   que el host coloree por sintaxis sin dejar de usar el widget.
+//! - **Sugerencia fantasma** ([`Adornos::ghost`]): el sufijo tenue tras el caret.
+//! - **Placeholder rico** ([`Placeholder`]): ícono con color propio, itálica y
+//!   fundido — el canal por el que shuma narra avisos en el hueco del input.
+//! - **Caret con estela** ([`CaretEstilo`]): el eyecandy en honor a kitty.
+//!
+//! Todo es opcional: [`Adornos::default`] + [`Metricas::default`] dan exactamente
+//! el text-area de siempre, y por eso [`super::text_area_view`] no es más que
+//! esta vista con los adornos vacíos — un solo renderizador, no dos.
+
+use std::sync::atomic::Ordering;
+use std::sync::Arc;
+
+use llimphi_ui::llimphi_layout::taffy::{
+    prelude::{length, percent, Size, Style},
+    Rect,
+};
+use llimphi_ui::llimphi_raster::peniko::Color;
+use llimphi_ui::{DragPhase, View};
+
+use super::area::{caret_vrow, measure_prefix, visual_layout, TextAreaEvent, VisualRow};
+use super::{Metricas, TextInputPalette, TextInputState};
+
+/// Placeholder **rico**: el texto que ocupa el input vacío, con un ícono de
+/// color propio delante, itálica opcional y un alpha para fundirlo.
+///
+/// El ícono va como bloque aparte (y no pegado al texto) porque lleva **su
+/// propio color**: es el punto donde el host codifica urgencia —un ⚠ ámbar, un
+/// ● calmo— sin que el widget sepa nada de urgencias.
+#[derive(Debug, Clone)]
+pub struct Placeholder {
+    pub texto: String,
+    pub color: Color,
+    /// Itálica — la convención para "esto es un murmullo, no tu texto".
+    pub italic: bool,
+    /// Glifo delante del texto, con color propio.
+    pub icono: Option<char>,
+    /// Color del ícono. `None` = el mismo del texto.
+    pub icono_color: Option<Color>,
+    /// Opacidad global `[0,1]` — el host la anima para fundir entradas/salidas.
+    pub alpha: f32,
+}
+
+impl Default for Placeholder {
+    fn default() -> Self {
+        Self {
+            texto: String::new(),
+            color: Color::from_rgba8(128, 128, 128, 255),
+            italic: false,
+            icono: None,
+            icono_color: None,
+            alpha: 1.0,
+        }
+    }
+}
+
+impl Placeholder {
+    /// Placeholder simple: sólo texto, sin ícono ni itálica, opaco.
+    pub fn texto(t: impl Into<String>, color: Color) -> Self {
+        Self { texto: t.into(), color, ..Self::default() }
+    }
+}
+
+/// Estilo del caret: grosor, parpadeo y **estela**.
+///
+/// El parpadeo no es un booleano que alterne el host: el widget lo deriva del
+/// reloj y de [`TextInputState::marcar_actividad`], porque un `bool` alternado
+/// por un timer externo se muestrea mal cuando el panel repinta lento — el caret
+/// se apaga por segundos justo mientras se escribe, que es cuando más se
+/// necesita. Con `solido_ms` el caret queda **fijo** mientras hay actividad y
+/// recién después titila.
+#[derive(Debug, Clone)]
+pub struct CaretEstilo {
+    /// Ancho de la barra (px).
+    pub ancho: f32,
+    /// Si titila (tras el período sólido). `false` = siempre visible.
+    pub parpadeo: bool,
+    /// Cuánto queda **sólido** tras la última actividad (ms).
+    pub solido_ms: u64,
+    /// Medio período del parpadeo (ms): tiempo encendido = tiempo apagado.
+    pub medio_periodo_ms: u64,
+    /// Si deja **estela** al moverse (el eyecandy en honor a kitty): la barra
+    /// se dibuja siempre en su posición real —donde va a caer la próxima
+    /// letra— y detrás queda un rastro que se encoge hasta desaparecer.
+    pub estela: bool,
+    /// Constante de tiempo (ms) del encogido de la estela: a mayor, más larga.
+    pub tau_ms: f32,
+    /// Salto horizontal (px) a partir del cual el movimiento cuenta como **viaje
+    /// entero** y usa `tau_ms` completo. Por debajo, el rastro se acorta de
+    /// forma continua hacia `tau_rapido` — así escribir deja apenas un destello
+    /// y un click lejano deja la estela larga, sin un umbral donde el efecto
+    /// aparezca de golpe. Del orden de dos caracteres.
+    pub salto_min: f32,
+    /// Constante de tiempo (ms) del rastro de los movimientos **chicos** (una
+    /// tecla). Muy corta a propósito: se intuye, no se lee.
+    pub tau_rapido: f32,
+}
+
+impl Default for CaretEstilo {
+    fn default() -> Self {
+        Self {
+            ancho: 1.5,
+            parpadeo: false,
+            solido_ms: 1_200,
+            medio_periodo_ms: 530,
+            estela: false,
+            tau_ms: 55.0,
+            salto_min: 16.0,
+            tau_rapido: 14.0,
+        }
+    }
+}
+
+impl CaretEstilo {
+    /// El caret de un input vivo: titila tras un segundo largo de quietud y
+    /// deja estela al moverse.
+    pub fn vivo() -> Self {
+        Self { parpadeo: true, estela: true, ancho: 2.0, ..Self::default() }
+    }
+
+    /// ¿Se pinta la barra en este instante? Sólida mientras hubo actividad
+    /// reciente; después, media onda cuadrada.
+    pub fn visible_en(&self, ahora_ms: u64, actividad_ms: u64) -> bool {
+        if !self.parpadeo {
+            return true;
+        }
+        let transcurrido = ahora_ms.saturating_sub(actividad_ms);
+        if transcurrido < self.solido_ms {
+            return true;
+        }
+        let periodo = self.medio_periodo_ms.max(1);
+        ((transcurrido - self.solido_ms) / periodo) % 2 == 0
+    }
+}
+
+/// Dónde queda el punto **rezagado** del rastro este cuadro, y si el viaje
+/// sigue en curso. Pura: es toda la política de la estela en un solo lugar.
+///
+/// `primer_cuadro` = todavía no hay muestreo previo (o el reloj retrocedió):
+/// el rastro se clava en el destino, si no un input recién montado estrenaría
+/// una estela desde el origen de coordenadas.
+///
+/// Devuelve `((x, y), persiguiendo)`.
+pub(crate) fn perseguir(
+    destino: (f64, f64),
+    rezagado: (f64, f64),
+    persiguiendo: bool,
+    dt_ms: f32,
+    estilo: &CaretEstilo,
+    primer_cuadro: bool,
+) -> ((f64, f64), bool) {
+    let (cx, cy) = destino;
+    let (mut nx, mut ny) = rezagado;
+    let salto_x = (cx - nx).abs();
+    let cambio_renglon = (cy - ny).abs() > 0.5;
+    if !estilo.estela || primer_cuadro || cambio_renglon {
+        return ((cx, cy), false);
+    }
+    if !persiguiendo && salto_x < 0.5 {
+        return ((cx, cy), false); // quieto: nada que perseguir
+    }
+    // Tau por TAMAÑO del movimiento. Cortar en seco los movimientos chicos
+    // dejaba el caret «muy normalito»: el rastro desaparecía justo en el gesto
+    // más frecuente, que es escribir. Un salto de un carácter deja un rastro
+    // brevísimo —se intuye más que se ve— y un viaje de verdad (click lejos,
+    // Home/End, salto por palabra) deja el rastro entero. La escala es continua:
+    // no hay un umbral donde el efecto aparezca de golpe.
+    let viaje = (salto_x / estilo.salto_min.max(1.0) as f64).clamp(0.0, 1.0) as f32;
+    let tau = estilo.tau_rapido + (estilo.tau_ms - estilo.tau_rapido) * viaje;
+    let k = (1.0 - (-dt_ms / tau.max(1.0)).exp()) as f64;
+    nx += (cx - nx) * k;
+    ny += (cy - ny) * k;
+    // Cerca del destino, clavarlo: si no queda un rastro de sub-píxel eterno
+    // que obliga a repintar para siempre.
+    let llego = (cx - nx).abs() < 0.5 && (cy - ny).abs() < 0.5;
+    if llego {
+        return ((cx, cy), false);
+    }
+    ((nx, ny), true)
+}
+
+/// Los adornos de presentación de la vista rica. `default()` = el text-area de
+/// siempre (sin color por tramos, sin ghost, placeholder plano, caret simple).
+#[derive(Debug, Clone)]
+pub struct Adornos {
+    /// Tramos `(ini, fin, color)` en **bytes sobre el texto completo** (con los
+    /// `\n` contando como un byte, igual que el `String` que devuelve
+    /// [`TextInputState::text`]). Los que caen fuera se ignoran; los que cruzan
+    /// un renglón visual se recortan a cada tramo. Vacío = todo en `fg_text`.
+    pub tramos: Vec<(usize, usize, Color)>,
+    /// Sufijo tenue tras el caret (autocompletado inline). Sólo se pinta si el
+    /// caret está al **final** del texto: en medio, un fantasma miente sobre
+    /// dónde va a caer lo que se escriba.
+    pub ghost: Option<String>,
+    /// Placeholder del input vacío. `None` = sin placeholder.
+    pub placeholder: Option<Placeholder>,
+    /// Estilo del caret.
+    pub caret: CaretEstilo,
+    /// Unix-ms **de este cuadro** — el reloj del parpadeo y de la estela. El
+    /// widget no lo consulta por su cuenta a propósito (ver
+    /// [`TextInputState::marcar_actividad`]).
+    pub ahora_ms: u64,
+    /// Si el widget dibuja **su propia caja** (borde + fondo + relieve).
+    /// `true` = como siempre.
+    ///
+    /// `false` la necesita un host que ya tiene su marco y no quiere el del
+    /// widget encima. El caso real: la barra de shuma flota sobre el cristal
+    /// del compositor, y la caja del widget arma su borde con un *relleno
+    /// opaco* del tamaño del nodo (el truco clásico de marco de 1 px). Ese
+    /// relleno, aunque se vea como un borde fino, es una capa opaca de lado a
+    /// lado **debajo** del texto: tapa el backdrop y el input deja de glasear.
+    /// Sin marco, el widget aporta sólo texto, selección y caret, y el fondo lo
+    /// pone —o lo deja pasar— el host.
+    pub marco: bool,
+}
+
+impl Default for Adornos {
+    fn default() -> Self {
+        Self {
+            tramos: Vec::new(),
+            ghost: None,
+            placeholder: None,
+            caret: CaretEstilo::default(),
+            ahora_ms: 0,
+            marco: true,
+        }
+    }
+}
+
+/// TEMPORAL (diagnóstico, 2026-07-22). Deja rastro cuando el mismo input se
+/// pinta con **dos anchos distintos alternándose** — la firma de que hay dos
+/// vistas del mismo estado peleándose (p. ej. la barra y el cajón, que no miden
+/// igual). Con el ancho estable no escribe nada ni cuesta nada: es una
+/// comparación de `f32`.
+///
+/// Existe porque el síntoma que hay que cazar es exactamente ése: el texto se
+/// reparte una y otra vez entre dos anchos y salta sin que nadie escriba.
+fn avisar_ancho_inestable(previo: f32, ahora: f32) {
+    use std::sync::atomic::AtomicUsize;
+    if previo <= 1.0 || (previo - ahora).abs() < 1.0 {
+        return;
+    }
+    static VECES: AtomicUsize = AtomicUsize::new(0);
+    // Tope duro: interesa la firma, no llenar el disco si esto queda prendido.
+    let n = VECES.fetch_add(1, Ordering::Relaxed);
+    if n >= 200 {
+        return;
+    }
+    use std::io::Write;
+    if let Ok(mut f) = std::fs::OpenOptions::new()
+        .create(true)
+        .append(true)
+        .open("/tmp/llimphi-input-jitter.log")
+    {
+        let _ = writeln!(f, "#{n} ancho {previo:.1} -> {ahora:.1}");
+    }
+}
+
+/// Vista rica del text-area. Mismo cableado de mouse y mismo motor que
+/// [`super::text_area_view`]; lo que cambia es que el texto, la selección, el
+/// ghost, el placeholder y el caret los dibuja **un solo pintor** con la
+/// [`Metricas`] dada, en vez de un nodo de texto por renglón.
+///
+/// Un solo pintor no es capricho: cuando el texto vive en nodos y el caret en un
+/// `paint_over`, los dos miden por caminos distintos y se desalinean apenas la
+/// fuente deja de ser la default. Midiendo y dibujando en el mismo lugar, el
+/// caret cae siempre entre los glifos que se ven.
+pub fn text_area_view_rico<Msg, F>(
+    state: &TextInputState,
+    focused: bool,
+    rows: usize,
+    palette: &TextInputPalette,
+    metricas: &Metricas,
+    adornos: &Adornos,
+    wrap: F,
+) -> View<Msg>
+where
+    Msg: Clone + 'static,
+    F: Fn(TextAreaEvent) -> Msg + Send + Sync + 'static,
+{
+    // La métrica del cuadro queda publicada para el hit-testing del `update`.
+    state.set_metricas(metricas);
+
+    let m = metricas.clone();
+    let raw = state.text();
+    let is_empty = raw.is_empty();
+    let (bg, border) = if focused {
+        (palette.bg_focus, palette.border_focus)
+    } else {
+        (palette.bg, palette.border)
+    };
+    let visible = rows.max(1);
+    let body_h = visible as f32 * m.line_h + 2.0 * m.pad_y;
+
+    // El ajuste blando y el scroll se resuelven DENTRO del pintor, con el
+    // `rect.w` de ese mismo cuadro.
+    //
+    // Antes se calculaban acá, con el ancho que el pintor había guardado el
+    // cuadro anterior. Eso es un ancho **compartido**: si el mismo input se
+    // pinta en dos lados (la barra y el cajón, que no miden igual), cada vista
+    // envuelve con el ancho de la otra y el texto salta entre dos repartos, ida
+    // y vuelta, mientras las dos sigan repintando — aunque nadie escriba. Con el
+    // ancho tomado del propio rect no hay ningún cuadro en que el texto se
+    // reparta para un ancho que no es el suyo.
+    let caret = state.editor().cursor.caret;
+
+    // --- Datos que viajan al pintor (todo por valor: el closure es 'static) ---
+    let caret_anchor = state.editor().cursor.anchor;
+    let raw_lines: Vec<String> = raw.split('\n').map(str::to_string).collect();
+    // Offset de byte donde arranca cada línea lógica — el puente entre los
+    // `tramos` (bytes del texto entero) y los renglones visuales (columnas de
+    // carácter dentro de una línea).
+    let line_byte0: Vec<usize> = {
+        let mut acc = 0usize;
+        let mut v = Vec::with_capacity(raw_lines.len());
+        for l in &raw_lines {
+            v.push(acc);
+            acc += l.len() + 1; // +1 por el '\n'
+        }
+        v
+    };
+    let raw_paint = raw.clone();
+    let box_w_cell = state.box_w.clone();
+    let scroll_cell = state.area_scroll_y.clone();
+    let anim = state.caret_anim.clone();
+    let actividad_ms = state.actividad_ms();
+    let fg_text = palette.fg_text;
+    let sel_color = palette.selection;
+    let caret_color = palette.caret;
+    let caret_estilo = adornos.caret.clone();
+    let ahora_ms = adornos.ahora_ms;
+    let tramos = adornos.tramos.clone();
+    let ghost = adornos.ghost.clone();
+    let placeholder = adornos.placeholder.clone();
+    let caret_al_final = caret.line + 1 == raw_lines.len()
+        && caret.col == raw_lines.last().map(|l| l.chars().count()).unwrap_or(0);
+    let mp = m.clone();
+
+    let content = View::new(Style {
+        size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
+        padding: Rect {
+            left: length(m.pad_x),
+            right: length(m.pad_r),
+            top: length(m.pad_y),
+            bottom: length(m.pad_y),
+        },
+        ..Default::default()
+    })
+    .fill(if adornos.marco { bg } else { bg.with_alpha(0.0) })
+    .radius((palette.radius - 1.0).max(0.0) as f64)
+    .clip(true)
+    .paint_with(move |scene, ts, rect| {
+        use llimphi_ui::llimphi_raster::kurbo::{Affine, BezPath, Rect as KRect};
+        use llimphi_ui::llimphi_raster::peniko::Fill;
+        use llimphi_ui::llimphi_text::{
+            draw_layout, draw_layout_runs, layout_block, Alignment as TAlign, TextBlock,
+        };
+
+        // El ancho queda publicado para las consultas del host (cuántos
+        // renglones va a ocupar, dónde cae un click). Para **este** pintado no se
+        // usa: se usa el rect de acá.
+        let ancho_previo = f32::from_bits(box_w_cell.load(Ordering::Relaxed));
+        box_w_cell.store(rect.w.to_bits(), Ordering::Relaxed);
+        avisar_ancho_inestable(ancho_previo, rect.w);
+        if rect.w <= 0.0 || rect.h <= 0.0 {
+            return;
+        }
+        let line_h = mp.line_h as f64;
+        let ff = mp.font_family.as_deref();
+
+        // Ajuste blando con el ancho REAL de este cuadro.
+        let wrap_w = (rect.w - mp.pad_x - mp.pad_r).max(0.0);
+        let vrows_paint = visual_layout(&raw_paint, wrap_w, &mp);
+        let total = vrows_paint.len();
+
+        // Scroll vertical con histéresis: parte del scroll del cuadro previo y
+        // sólo se mueve si el renglón del caret sale del viewport. Persistido
+        // para que el hit-test del próximo cuadro reste el mismo offset.
+        let max_scroll_row = total.saturating_sub(visible);
+        let prev_px = f32::from_bits(scroll_cell.load(Ordering::Relaxed));
+        let mut sr = ((prev_px / mp.line_h).round() as usize).min(max_scroll_row);
+        if focused {
+            let cv = caret_vrow(&vrows_paint, caret.line, caret.col);
+            if cv < sr {
+                sr = cv;
+            } else if cv >= sr + visible {
+                sr = cv + 1 - visible;
+            }
+        }
+        sr = sr.min(max_scroll_row);
+        let scroll_y = sr as f32 * mp.line_h;
+        scroll_cell.store(scroll_y.to_bits(), Ordering::Relaxed);
+
+        let ox = rect.x as f64 + mp.pad_x as f64;
+        let oy = rect.y as f64 + mp.pad_y as f64 - scroll_y as f64;
+
+        // Segmento (string) de un renglón visual.
+        let seg_of = |vr: &VisualRow| -> String {
+            raw_lines
+                .get(vr.line)
+                .map(|l| l.chars().skip(vr.start).take(vr.end - vr.start).collect())
+                .unwrap_or_default()
+        };
+        let line_len = |li: usize| raw_lines.get(li).map(|l| l.chars().count()).unwrap_or(0);
+
+        // --- Placeholder (input vacío) ---
+        if let Some(ph) = placeholder.as_ref().filter(|_| raw_lines.len() == 1 && raw_lines[0].is_empty())
+        {
+            let a = ph.alpha.clamp(0.0, 1.0);
+            if a > 0.01 {
+                let mut x = ox;
+                if let Some(g) = ph.icono {
+                    let icol = ph.icono_color.unwrap_or(ph.color).with_alpha(a);
+                    let gtxt = format!("{g} ");
+                    let gb = TextBlock {
+                        text: &gtxt,
+                        size_px: mp.font_size,
+                        color: icol,
+                        origin: (x, oy),
+                        max_width: None,
+                        alignment: TAlign::Start,
+                        line_height: 1.2,
+                        italic: false,
+                        font_family: mp.font_family.clone(),
+                    };
+                    let gl = layout_block(ts, &gb);
+                    draw_layout(scene, &gl, icol, (x, oy));
+                    x += llimphi_ui::llimphi_text::measurement(&gl).width as f64;
+                }
+                let color = ph.color.with_alpha(ph.color.components[3] * a);
+                let b = TextBlock {
+                    text: &ph.texto,
+                    size_px: mp.font_size,
+                    color,
+                    origin: (x, oy),
+                    max_width: None,
+                    alignment: TAlign::Start,
+                    line_height: 1.2,
+                    italic: ph.italic,
+                    font_family: mp.font_family.clone(),
+                };
+                let l = layout_block(ts, &b);
+                draw_layout(scene, &l, color, (x, oy));
+            }
+        }
+
+        // Selección normalizada por (línea, columna).
+        let sel = caret_anchor.and_then(|a| {
+            let (s, e) = if (a.line, a.col) <= (caret.line, caret.col) {
+                (a, caret)
+            } else {
+                (caret, a)
+            };
+            ((s.line, s.col) != (e.line, e.col)).then_some((s, e))
+        });
+
+        // Posición del caret en coords de escena; se resuelve mientras se
+        // recorren los renglones (así se mide con los mismos glifos que se
+        // dibujan) y se usa después para la barra y la estela.
+        let mut caret_xy: Option<(f64, f64)> = None;
+        let mut fin_texto: Option<(f64, f64)> = None;
+
+        for (vi, vr) in vrows_paint.iter().enumerate() {
+            let y = oy + vi as f64 * line_h;
+            // Fuera del viewport: ni se mide ni se pinta (el clip lo taparía
+            // igual, pero medir texto no dibujado es el costo que se paga por
+            // cuadro en una conversación larga).
+            if y + line_h < rect.y as f64 || y > (rect.y + rect.h) as f64 {
+                continue;
+            }
+            let seg = seg_of(vr);
+
+            // --- Selección en este renglón ---
+            if let Some((s, e)) = sel {
+                if vr.line >= s.line && vr.line <= e.line {
+                    let sc = if vr.line == s.line { s.col.max(vr.start) } else { vr.start };
+                    let ec = if vr.line == e.line { e.col.min(vr.end) } else { vr.end };
+                    if ec >= sc {
+                        let x0 = measure_prefix(ts, &seg, sc.saturating_sub(vr.start), &mp);
+                        let is_line_end = vr.end == line_len(vr.line);
+                        let covers_nl = is_line_end && vr.line < e.line && ec == vr.end;
+                        let x1 = if covers_nl {
+                            measure_prefix(ts, &seg, seg.chars().count(), &mp) + 6.0
+                        } else {
+                            measure_prefix(ts, &seg, ec.saturating_sub(vr.start), &mp)
+                        };
+                        if x1 > x0 || covers_nl {
+                            let sc4 = sel_color.with_alpha(0.4);
+                            let r = KRect::new(ox + x0, y + 1.0, ox + x1.max(x0), y + line_h - 1.0);
+                            scene.fill(Fill::NonZero, Affine::IDENTITY, sc4, None, &r);
+                        }
+                    }
+                }
+            }
+
+            // --- Texto del renglón ---
+            if !seg.is_empty() {
+                // Rango de BYTES que cubre este renglón visual dentro del texto
+                // completo, para recortarle los tramos de color.
+                let linea = raw_lines.get(vr.line).map(String::as_str).unwrap_or("");
+                let b_ini = line_byte0.get(vr.line).copied().unwrap_or(0)
+                    + linea.chars().take(vr.start).map(char::len_utf8).sum::<usize>();
+                let b_fin = b_ini + seg.len();
+                let runs: Vec<(usize, usize, Color)> = tramos
+                    .iter()
+                    .filter_map(|&(a, b, c)| {
+                        let a = a.max(b_ini);
+                        let b = b.min(b_fin);
+                        (a < b).then(|| (a - b_ini, b - b_ini, c))
+                    })
+                    .collect();
+                if runs.is_empty() {
+                    let blk = TextBlock {
+                        text: &seg,
+                        size_px: mp.font_size,
+                        color: fg_text,
+                        origin: (ox, y),
+                        max_width: None,
+                        alignment: TAlign::Start,
+                        line_height: 1.2,
+                        italic: false,
+                        font_family: mp.font_family.clone(),
+                    };
+                    let l = layout_block(ts, &blk);
+                    draw_layout(scene, &l, fg_text, (ox, y));
+                } else {
+                    // Camino multicolor. La familia va explícita: sin ella este
+                    // camino shapea con la sans aunque el input sea mono, y las
+                    // columnas se desalinean en silencio.
+                    let l = ts.layout_runs(
+                        &seg,
+                        mp.font_size,
+                        fg_text,
+                        &runs,
+                        TAlign::Start,
+                        1.2,
+                        400.0,
+                        false,
+                        false,
+                        ff,
+                    );
+                    draw_layout_runs(scene, &l, (ox, y));
+                }
+            }
+
+            // --- ¿Cae el caret en este renglón? ---
+            if caret_vrow(&vrows_paint, caret.line, caret.col) == vi {
+                let off = caret.col.saturating_sub(vr.start);
+                caret_xy = Some((ox + measure_prefix(ts, &seg, off, &mp), y));
+            }
+            if vi + 1 == vrows_paint.len() {
+                fin_texto = Some((ox + measure_prefix(ts, &seg, seg.chars().count(), &mp), y));
+            }
+        }
+
+        // --- Sugerencia fantasma, pegada al final del texto ---
+        if let (Some(g), Some((gx, gy))) = (ghost.as_ref().filter(|g| !g.is_empty()), fin_texto) {
+            if caret_al_final {
+                let col = fg_text.with_alpha(0.38);
+                let blk = TextBlock {
+                    text: g,
+                    size_px: mp.font_size,
+                    color: col,
+                    origin: (gx, gy),
+                    max_width: None,
+                    alignment: TAlign::Start,
+                    line_height: 1.2,
+                    italic: false,
+                    font_family: mp.font_family.clone(),
+                };
+                let l = layout_block(ts, &blk);
+                draw_layout(scene, &l, col, (gx, gy));
+            }
+        }
+
+        // --- Caret + estela ---
+        if !focused {
+            return;
+        }
+        let Some((cx, cy)) = caret_xy else { return };
+        let alto = line_h - 3.0;
+        let visible_ahora = caret_estilo.visible_en(ahora_ms, actividad_ms);
+
+        // Persecución exponencial del punto rezagado. El primer cuadro (o con la
+        // estela apagada) se clava en el destino: sin esto, un input recién
+        // montado estrenaría una estela desde el origen de coordenadas.
+        let prev_t = anim.t_ms.load(Ordering::Relaxed);
+        let (mut nx, mut ny) = (
+            f32::from_bits(anim.x.load(Ordering::Relaxed)) as f64,
+            f32::from_bits(anim.y.load(Ordering::Relaxed)) as f64,
+        );
+        // La estela es un efecto de «el caret se fue de viaje». La política —qué
+        // cuenta como viaje— vive entera en `perseguir`, que es pura y testeable.
+        let primer_cuadro = prev_t == 0 || ahora_ms < prev_t;
+        let dt = ahora_ms.saturating_sub(prev_t) as f32;
+        let ((px, py), sigue) = perseguir(
+            (cx, cy),
+            (nx, ny),
+            anim.persiguiendo.load(Ordering::Relaxed),
+            dt,
+            &caret_estilo,
+            primer_cuadro,
+        );
+        nx = px;
+        ny = py;
+        anim.persiguiendo.store(sigue, Ordering::Relaxed);
+        anim.x.store((nx as f32).to_bits(), Ordering::Relaxed);
+        anim.y.store((ny as f32).to_bits(), Ordering::Relaxed);
+        anim.h.store((alto as f32).to_bits(), Ordering::Relaxed);
+        anim.t_ms.store(ahora_ms, Ordering::Relaxed);
+
+        if !visible_ahora {
+            return;
+        }
+        let w = caret_estilo.ancho as f64;
+
+        // La estela: el casco convexo de la barra en su posición rezagada y en
+        // la real. Sale un cuadrilátero que también funciona en diagonal (salto
+        // de renglón), no sólo horizontal.
+        if caret_estilo.estela && ((cx - nx).abs() > 0.5 || (cy - ny).abs() > 0.5) {
+            let mut p = BezPath::new();
+            p.move_to((nx, ny + 1.5));
+            p.line_to((cx + w, cy + 1.5));
+            p.line_to((cx + w, cy + 1.5 + alto));
+            p.line_to((nx, ny + 1.5 + alto));
+            p.close_path();
+            scene.fill(
+                Fill::NonZero,
+                Affine::IDENTITY,
+                caret_color.with_alpha(0.28),
+                None,
+                &p,
+            );
+        }
+
+        // La barra sólida va SIEMPRE en la posición real, nunca en la rezagada:
+        // el caret marca dónde cae la próxima letra, y un caret que llega tarde
+        // a su lugar es un caret que miente. Lo que se atrasa es el rastro.
+        let bar = KRect::new(cx, cy + 1.5, cx + w, cy + 1.5 + alto);
+        scene.fill(Fill::NonZero, Affine::IDENTITY, caret_color, None, &bar);
+    });
+
+    // --- Cableado de mouse (idéntico al text-area plano) ---
+    let press = Arc::new(wrap);
+    let drag = press.clone();
+    let ctx = press.clone();
+    let aria = if is_empty {
+        adornos.placeholder.as_ref().map(|p| p.texto.clone()).unwrap_or_default()
+    } else {
+        String::new()
+    };
+    let content = content
+        .on_click_at(move |x, y, _w, _h| Some(press(TextAreaEvent::Press(x, y))))
+        .draggable_at(move |phase, dx, dy, x0, y0| match phase {
+            DragPhase::Move => Some(drag(TextAreaEvent::Drag { anchor: (x0, y0), dx, dy })),
+            DragPhase::End => Some(drag(TextAreaEvent::DragEnd)),
+        })
+        .on_right_click_screen(move |x, y, _w, _h| Some(ctx(TextAreaEvent::Context { x, y })))
+        .cursor(llimphi_ui::Cursor::Text)
+        .role(llimphi_ui::Role::TextInput)
+        .aria_value(raw.clone())
+        .aria_description(aria);
+
+    // Sin marco propio, el contenido ES la vista: el host lo mete en su caja.
+    if !adornos.marco {
+        return content;
+    }
+
+    // Box exterior: borde + radius + relieve opcional.
+    let bw = if focused { 2.0_f32 } else { 1.0_f32 };
+    let mut node = View::new(Style {
+        size: Size { width: percent(1.0_f32), height: length(body_h + 2.0 * bw) },
+        padding: Rect {
+            left: length(bw),
+            right: length(bw),
+            top: length(bw),
+            bottom: length(bw),
+        },
+        ..Default::default()
+    })
+    .fill(border)
+    .radius(palette.radius as f64);
+    if palette.relieve {
+        let (elev_a, elev_blur, elev_dy) = palette.elevation;
+        node = node.shadow(llimphi_ui::Shadow {
+            color: Color::from_rgba8(
+                0,
+                0,
+                0,
+                if focused { elev_a.saturating_add(16) } else { elev_a },
+            ),
+            blur: if focused { elev_blur * 1.5 } else { elev_blur },
+            dx: 0.0,
+            dy: elev_dy,
+            spread: -1.0,
+        });
+    }
+    node.children(vec![content])
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    fn c(r: u8, g: u8, b: u8) -> Color {
+        Color::from_rgba8(r, g, b, 255)
+    }
+
+    #[test]
+    fn el_caret_queda_solido_mientras_se_escribe_y_titila_despues() {
+        let e = CaretEstilo::vivo();
+        // Recién tecleado: sólido, pase lo que pase con la fase.
+        assert!(e.visible_en(1_000, 1_000));
+        assert!(e.visible_en(1_000 + e.solido_ms - 1, 1_000));
+        // Pasado el período sólido arranca la onda cuadrada.
+        let t0 = 1_000 + e.solido_ms;
+        assert!(e.visible_en(t0, 1_000), "primer medio período: encendido");
+        assert!(
+            !e.visible_en(t0 + e.medio_periodo_ms, 1_000),
+            "segundo medio período: apagado"
+        );
+        assert!(e.visible_en(t0 + 2 * e.medio_periodo_ms, 1_000));
+    }
+
+    #[test]
+    fn sin_parpadeo_el_caret_siempre_se_ve() {
+        let e = CaretEstilo::default();
+        assert!(!e.parpadeo);
+        for t in [0u64, 5_000, 1_000_000] {
+            assert!(e.visible_en(t, 0), "t={t}");
+        }
+    }
+
+    #[test]
+    fn la_metrica_mono_da_ancho_fijo_y_escala_con_el_zoom() {
+        let m = Metricas::mono(13.0);
+        assert_eq!(m.font_family.as_deref(), Some(llimphi_ui::llimphi_text::MONOSPACE));
+        let z = m.clone().con_zoom(2.0);
+        assert_eq!(z.font_size, 26.0);
+        assert_eq!(z.line_h, (m.line_h * 2.0).round());
+        // El clamp protege de un zoom absurdo (una métrica de 0 px colgaría el
+        // ajuste blando en un bucle sin avanzar).
+        assert_eq!(m.clone().con_zoom(0.01).font_size, 13.0 * 0.5);
+        assert_eq!(m.clone().con_zoom(99.0).font_size, 13.0 * 3.0);
+    }
+
+    #[test]
+    fn los_tramos_se_recortan_al_renglon() {
+        // Espeja el recorte que hace el pintor: un tramo que cruza el borde del
+        // renglón se corta, y el que queda afuera desaparece.
+        let (b_ini, b_fin) = (10usize, 20usize);
+        let tramos = vec![(0usize, 15usize, c(1, 0, 0)), (18, 30, c(0, 1, 0)), (40, 50, c(0, 0, 1))];
+        let runs: Vec<(usize, usize, Color)> = tramos
+            .iter()
+            .filter_map(|&(a, b, col)| {
+                let a = a.max(b_ini);
+                let b = b.min(b_fin);
+                (a < b).then(|| (a - b_ini, b - b_ini, col))
+            })
+            .collect();
+        assert_eq!(runs.len(), 2, "el tramo lejano no entra");
+        assert_eq!((runs[0].0, runs[0].1), (0, 5), "recortado por la izquierda");
+        assert_eq!((runs[1].0, runs[1].1), (8, 10), "recortado por la derecha");
+    }
+
+    #[test]
+    fn adornos_vacios_son_el_text_area_de_siempre() {
+        let a = Adornos::default();
+        assert!(a.tramos.is_empty());
+        assert!(a.ghost.is_none());
+        assert!(a.placeholder.is_none());
+        assert!(!a.caret.parpadeo, "sin parpadeo, como el caret_visible de antes");
+        assert!(!a.caret.estela);
+    }
+
+    // ── Política de la estela ────────────────────────────────────────
+
+    /// Un cuadro a 60 Hz con el caret vivo.
+    fn paso(destino: f64, rezagado: f64, persiguiendo: bool) -> ((f64, f64), bool) {
+        perseguir(
+            (destino, 0.0),
+            (rezagado, 0.0),
+            persiguiendo,
+            16.0,
+            &CaretEstilo::vivo(),
+            false,
+        )
+    }
+
+    #[test]
+    fn tipear_deja_apenas_un_destello() {
+        // Escribir corre el caret un carácter (~8 px): queda un rastro, pero
+        // brevísimo — a 16 ms ya recorrió la mayor parte del camino.
+        let ((x, _), _) = paso(108.0, 100.0, false);
+        let recorrido = (x - 100.0) / 8.0;
+        // A 16 ms recorre ~1/3: el rastro de una tecla vive unos tres cuadros.
+        // Se nota que respira sin dejar reguero — que es lo que se buscaba.
+        assert!(recorrido > 0.25, "avanza de verdad en un cuadro: {recorrido:.2}");
+        assert!(x < 108.0, "y todavía hay algo que dibujar: {x}");
+    }
+
+    #[test]
+    fn un_viaje_es_mucho_mas_lento_que_una_tecla() {
+        // La misma fracción de camino no se recorre igual: el rastro de un
+        // salto grande dura varios cuadros, el de una tecla casi ninguno.
+        let ((corto, _), _) = paso(108.0, 100.0, false);
+        let frac_tecla = (corto - 100.0) / 8.0;
+        let ((largo, _), _) = paso(300.0, 100.0, false);
+        let frac_viaje = (largo - 100.0) / 200.0;
+        assert!(
+            frac_viaje < frac_tecla,
+            "el viaje se rezaga más: {frac_viaje:.2} vs {frac_tecla:.2}"
+        );
+    }
+
+    #[test]
+    fn un_salto_deliberado_si_deja_estela() {
+        // Un click 200 px más allá (o Home/End, o salto de palabra).
+        let ((x, _), sigue) = paso(300.0, 100.0, false);
+        assert!(x > 100.0 && x < 300.0, "el rastro queda atrás: {x}");
+        assert!(sigue, "el viaje sigue en curso");
+    }
+
+    #[test]
+    fn el_viaje_no_se_corta_al_acercarse() {
+        // Ya persiguiendo, lo que falta baja del umbral de salto — y aun así
+        // debe terminar el recorrido en vez de teletransportarse.
+        let ((x, _), sigue) = paso(300.0, 295.0, true);
+        assert!(sigue || x == 300.0);
+        let ((x2, _), _) = paso(300.0, 240.0, true);
+        assert!(x2 > 240.0 && x2 < 300.0, "sigue persiguiendo: {x2}");
+    }
+
+    #[test]
+    fn cambiar_de_renglon_se_clava_sin_tajo_diagonal() {
+        // El caso que ensuciaba todo: con ajuste blando, escribir cerca del
+        // final reacomoda la última palabra al renglón de abajo y el caret salta
+        // al principio. Un casco convexo entre esos dos puntos es un tajo
+        // diagonal a lo ancho de la caja — y el usuario no navegó a ningún lado.
+        let ((x, y), sigue) = perseguir(
+            (4.0, 20.0),      // principio del renglón siguiente
+            (600.0, 0.0),     // final del anterior
+            false,
+            16.0,
+            &CaretEstilo::vivo(),
+            false,
+        );
+        assert_eq!((x, y), (4.0, 20.0), "se clava, no cruza en diagonal");
+        assert!(!sigue);
+    }
+
+    #[test]
+    fn el_primer_cuadro_no_estrena_estela_desde_el_origen() {
+        let ((x, y), sigue) = perseguir(
+            (300.0, 0.0),
+            (0.0, 0.0),
+            false,
+            16.0,
+            &CaretEstilo::vivo(),
+            true,
+        );
+        assert_eq!((x, y), (300.0, 0.0));
+        assert!(!sigue);
+    }
+
+    #[test]
+    fn sin_estela_el_rastro_no_existe() {
+        let ((x, _), sigue) = perseguir(
+            (300.0, 0.0),
+            (100.0, 0.0),
+            false,
+            16.0,
+            &CaretEstilo::default(), // estela: false
+            false,
+        );
+        assert_eq!(x, 300.0);
+        assert!(!sigue);
+    }
+}
diff --git a/widgets/theme-switcher/Cargo.toml b/widgets/theme-switcher/Cargo.toml
index a074cf7..c3ca4de 100644
--- a/widgets/theme-switcher/Cargo.toml
+++ b/widgets/theme-switcher/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-theme-switcher — botón que cicla los presets de `llimphi_theme::Theme`. Análogo Llimphi del `nahual-widget-theme-switcher` GPUI: el caller lifta `Msg::ChangeTheme(Theme)` y reasigna el theme en su Model."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/theme-switcher/examples/theme_switcher_demo.rs b/widgets/theme-switcher/examples/theme_switcher_demo.rs
index 157391e..2c5652a 100644
--- a/widgets/theme-switcher/examples/theme_switcher_demo.rs
+++ b/widgets/theme-switcher/examples/theme_switcher_demo.rs
@@ -5,7 +5,7 @@
 //! propaga a la UI: al hacer click en el switcher, los paneles se
 //! repintan con el siguiente preset.
 //!
-//! Corré: `cargo run -p llimphi-widget-theme-switcher --example theme_switcher_demo --release`.
+//! Corre: `cargo run -p llimphi-widget-theme-switcher --example theme_switcher_demo --release`.
 
 use llimphi_theme::Theme;
 use llimphi_ui::llimphi_layout::taffy::{
diff --git a/widgets/tiled/Cargo.toml b/widgets/tiled/Cargo.toml
index d71de0c..ca2a97d 100644
--- a/widgets/tiled/Cargo.toml
+++ b/widgets/tiled/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-tiled — grid auto cols×rows con title bar por tile. Análogo Llimphi al `nahual-widget-tiled` GPUI (sin drag-to-swap todavía: requiere drop-targets globales que llimphi-ui aún no expone)."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/tiled/examples/tiled_demo.rs b/widgets/tiled/examples/tiled_demo.rs
index 07e775f..2062252 100644
--- a/widgets/tiled/examples/tiled_demo.rs
+++ b/widgets/tiled/examples/tiled_demo.rs
@@ -1,8 +1,8 @@
 //! Showcase de `llimphi-widget-tiled` con drag-to-swap. Cinco paneles
-//! heterogéneos; arrastrá la title bar de uno sobre otro para
+//! heterogéneos; arrastra la title bar de uno sobre otro para
 //! intercambiarlos. El destino se ilumina mientras está bajo el cursor.
 //!
-//! Corré con: `cargo run -p llimphi-widget-tiled --example tiled_demo --release`.
+//! Corre con: `cargo run -p llimphi-widget-tiled --example tiled_demo --release`.
 
 use llimphi_theme::Theme;
 use llimphi_ui::llimphi_layout::taffy::{
diff --git a/widgets/timeline/Cargo.toml b/widgets/timeline/Cargo.toml
index 9c21d8d..7a9de0c 100644
--- a/widgets/timeline/Cargo.toml
+++ b/widgets/timeline/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-timeline — barra de progreso/scrub clickeable (seek absoluto). El widget es stateless: el caller pasa la fracción de avance y un handler fracción→Msg."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/timeline/LEEME.md b/widgets/timeline/LEEME.md
new file mode 100644
index 0000000..a11c6f1
--- /dev/null
+++ b/widgets/timeline/LEEME.md
@@ -0,0 +1,29 @@
+# llimphi-widget-timeline
+
+*Read this in English: [README.md](README.md).*
+
+Barra de progreso/scrub clickeable.
+
+Pattern análogo a `llimphi-widget-slider`/`-progress`: el widget **no
+mantiene estado**. El caller guarda la posición actual en su `Model`,
+le pasa la **fracción de avance** (`0.0..=1.0` = posición/duración) y un
+handler `Fn(f32) -> Option<Msg>` que recibe la fracción **donde el
+usuario clickeó** (scrub absoluto, estilo VLC). El widget no sabe de
+tiempo ni de duración: sólo pinta el avance y reporta dónde se clickeó
+como fracción del ancho de la barra (`on_click_at`). Quien mapea esa
+fracción a un seek concreto es la app.
+```text
+  [ ██████████▏░░░░░░░░░░░░ ]
+       recorrido  playhead   resto
+```
+Uso típico (reproductor):
+```ignore
+let frac = pos.as_secs_f64() / dur.as_secs_f64();
+timeline_view(frac as f32, &TimelinePalette::default(), |f| {
+    Some(Msg::Command(MediaCommand::SeekTo { fraction: f }))
+})
+```
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/timeline/README.md b/widgets/timeline/README.md
new file mode 100644
index 0000000..09e84d3
--- /dev/null
+++ b/widgets/timeline/README.md
@@ -0,0 +1,30 @@
+# llimphi-widget-timeline
+
+Clickable progress / scrub bar.
+
+The pattern is analogous to `llimphi-widget-slider` / `-progress`: the widget
+keeps **no state**. The caller stores the current position in its `Model`, passes
+the **progress fraction** (`0.0..=1.0` = position/duration) and a
+`Fn(f32) -> Option<Msg>` handler that receives the fraction **where the user
+clicked** (absolute scrub, VLC style). The widget knows nothing about time or
+duration: it only paints progress and reports where the click landed as a
+fraction of the bar's width (`on_click_at`). Mapping that fraction to a concrete
+seek is the app's job.
+
+```text
+  [ ██████████▏░░░░░░░░░░░░ ]
+      elapsed   playhead   rest
+```
+
+Typical use (a player):
+
+```ignore
+let frac = pos.as_secs_f64() / dur.as_secs_f64();
+timeline_view(frac as f32, &TimelinePalette::default(), |f| {
+    Some(Msg::Command(MediaCommand::SeekTo { fraction: f }))
+})
+```
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/timeline/src/lib.rs b/widgets/timeline/src/lib.rs
index 319083d..bdda046 100644
--- a/widgets/timeline/src/lib.rs
+++ b/widgets/timeline/src/lib.rs
@@ -30,7 +30,7 @@ use llimphi_ui::llimphi_raster::kurbo::{Affine, Rect};
 use llimphi_ui::llimphi_raster::peniko::{Color, Fill};
 use llimphi_ui::View;
 
-/// Paleta + dimensiones del timeline. Las medidas viajan acá (igual que
+/// Paleta + dimensiones del timeline. Las medidas viajan aquí (igual que
 /// `SliderPalette`) porque definen cómo se ve la barra — el caller no
 /// toca el `Style` directamente.
 #[derive(Debug, Clone, Copy)]
@@ -76,7 +76,7 @@ impl TimelinePalette {
 /// `progress` es la fracción recorrida (`0.0..=1.0`); se clampea. El
 /// handler `on_seek` recibe la fracción `0.0..=1.0` donde el usuario
 /// clickeó (`local_x / ancho`) y devuelve el `Msg` a despachar (o `None`
-/// para ignorar el click). El widget es stateless: redibujá pasando un
+/// para ignorar el click). El widget es stateless: redibuja pasando un
 /// `progress` nuevo en cada frame y el playhead avanza solo.
 pub fn timeline_view<Msg, F>(progress: f32, palette: &TimelinePalette, on_seek: F) -> View<Msg>
 where
diff --git a/widgets/toast/Cargo.toml b/widgets/toast/Cargo.toml
index f5d78c6..786c388 100644
--- a/widgets/toast/Cargo.toml
+++ b/widgets/toast/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-toast — notificaciones efímeras apiladas bottom-right. Severidades info/success/warning/error. Auto-dismiss configurable. Render-only; el ciclo de vida lo maneja la app."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/toast/LEEME.md b/widgets/toast/LEEME.md
new file mode 100644
index 0000000..c667cae
--- /dev/null
+++ b/widgets/toast/LEEME.md
@@ -0,0 +1,26 @@
+# llimphi-widget-toast
+
+*Read this in English: [README.md](README.md).*
+
+Notificaciones efímeras apiladas.
+
+Cuatro severidades (Info / Success / Warning / Error) con color
+semántico hardcoded — un Error debe leerse rojo aunque la app esté
+en tema "sunset". Cada toast lleva un icono de `llimphi-icons` y
+un texto corto.
+
+El widget es **render-only**: recibe una lista de `Toast`s ya
+filtrados por la app (los que aún no expiraron) y los apila en la
+esquina bottom-right. El ciclo de vida (push, auto-dismiss tras
+`duration`, dismiss manual al click) lo maneja la app desde su
+`update`/`spawn`.
+
+Patrón típico:
+1. App tiene `Vec<Toast>` en el modelo + `next_id: u64`.
+2. Para pushear: agregar Toast con `expires_at = Instant::now() + dur`
+   + `handle.spawn(move || { sleep(dur); Msg::ToastExpire(id) })`.
+3. `view_overlay` filtra los no expirados y los pasa a `toast_stack_view`.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/toast/README.md b/widgets/toast/README.md
new file mode 100644
index 0000000..cba2a96
--- /dev/null
+++ b/widgets/toast/README.md
@@ -0,0 +1,24 @@
+# llimphi-widget-toast
+
+Stacked ephemeral notifications.
+
+Four severities (Info / Success / Warning / Error) with hardcoded semantic
+colours — an Error must read as red even if the app is on the "sunset" theme.
+Each toast carries an icon from `llimphi-icons` and a short text.
+
+The widget is **render-only**: it receives a list of `Toast`s already filtered by
+the app (those that have not expired) and stacks them in the bottom-right corner.
+The lifecycle (push, auto-dismiss after `duration`, manual dismiss on click) is
+handled by the app from its `update`/`spawn`.
+
+Typical pattern:
+
+1. The app keeps `Vec<Toast>` in the model plus `next_id: u64`.
+2. To push: add a Toast with `expires_at = Instant::now() + dur` and
+   `handle.spawn(move || { sleep(dur); Msg::ToastExpire(id) })`.
+3. `view_overlay` filters the unexpired ones and passes them to
+   `toast_stack_view`.
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/toast/src/lib.rs b/widgets/toast/src/lib.rs
index 98c2129..300d04e 100644
--- a/widgets/toast/src/lib.rs
+++ b/widgets/toast/src/lib.rs
@@ -83,6 +83,10 @@ pub struct Toast {
     /// Cuándo expira. El render no chequea esto — sólo apila lo que
     /// recibe; la app filtra antes.
     pub expires_at: Instant,
+    /// Acciones `(clave, etiqueta)` a pintar como botones. Vacío = sin
+    /// botones (un toast informativo normal). Las pinta
+    /// [`toast_stack_view_con_acciones`]; [`toast_stack_view`] las ignora.
+    pub actions: Vec<(String, String)>,
 }
 
 const TOAST_W: f32 = 320.0;
@@ -106,16 +110,53 @@ where
     Msg: Clone + 'static,
     F: Fn(u64) -> Msg,
 {
-    let n = toasts.len() as f32;
+    let children: Vec<View<Msg>> = toasts
+        .iter()
+        .map(|t| single_toast_view(t, make_dismiss(t.id), Vec::new()))
+        .collect();
+    armar_stack(children, toasts.len(), viewport)
+}
+
+/// Igual que [`toast_stack_view`] pero pinta los botones de acción de cada
+/// toast (`Toast::actions`). `make_action(id, clave)` arma el `Msg` que la app
+/// recibe al clickear un botón. El click en el cuerpo (fuera de un botón) sigue
+/// disparando `make_dismiss`.
+pub fn toast_stack_view_con_acciones<Msg, FD, FA>(
+    toasts: &[Toast],
+    viewport: (f32, f32),
+    make_dismiss: FD,
+    make_action: FA,
+) -> View<Msg>
+where
+    Msg: Clone + 'static,
+    FD: Fn(u64) -> Msg,
+    FA: Fn(u64, &str) -> Msg,
+{
+    let children: Vec<View<Msg>> = toasts
+        .iter()
+        .map(|t| {
+            let botones: Vec<(String, Msg)> = t
+                .actions
+                .iter()
+                .map(|(clave, etiqueta)| (etiqueta.clone(), make_action(t.id, clave)))
+                .collect();
+            single_toast_view(t, make_dismiss(t.id), botones)
+        })
+        .collect();
+    armar_stack(children, toasts.len(), viewport)
+}
+
+/// Apila las tarjetas ya construidas en la esquina bottom-right del viewport.
+fn armar_stack<Msg: Clone + 'static>(
+    children: Vec<View<Msg>>,
+    n: usize,
+    viewport: (f32, f32),
+) -> View<Msg> {
+    let n = n as f32;
     let stack_h = n * TOAST_H + (n - 1.0).max(0.0) * GAP;
     let stack_y = (viewport.1 - stack_h - MARGIN).max(MARGIN);
     let stack_x = (viewport.0 - TOAST_W - MARGIN).max(MARGIN);
 
-    let children: Vec<View<Msg>> = toasts
-        .iter()
-        .map(|t| single_toast_view(t, make_dismiss(t.id)))
-        .collect();
-
     let stack = View::new(Style {
         position: Position::Absolute,
         inset: Rect {
@@ -147,7 +188,32 @@ where
     .children(vec![stack])
 }
 
-fn single_toast_view<Msg: Clone + 'static>(toast: &Toast, on_dismiss: Msg) -> View<Msg> {
+/// Un botón de acción: pequeño, click emite su `Msg` (gana al click de dismiss
+/// del cuerpo porque el hit-test toma el nodo más profundo).
+fn boton_accion<Msg: Clone + 'static>(etiqueta: String, msg: Msg, fg: Color) -> View<Msg> {
+    View::new(Style {
+        size: Size { width: auto(), height: length(26.0_f32) },
+        align_items: Some(AlignItems::Center),
+        flex_shrink: 0.0,
+        padding: Rect {
+            left: length(10.0_f32),
+            right: length(10.0_f32),
+            top: length(0.0_f32),
+            bottom: length(0.0_f32),
+        },
+        ..Default::default()
+    })
+    .fill(Color::from_rgba8(255, 255, 255, 30))
+    .radius(6.0_f64)
+    .text_aligned(etiqueta, 11.0, fg, Alignment::Center)
+    .on_click(msg)
+}
+
+fn single_toast_view<Msg: Clone + 'static>(
+    toast: &Toast,
+    on_dismiss: Msg,
+    botones: Vec<(String, Msg)>,
+) -> View<Msg> {
     let bg = toast.kind.bg();
     let fg = toast.kind.fg();
     let icon = toast.kind.icon();
@@ -228,23 +294,35 @@ fn single_toast_view<Msg: Clone + 'static>(toast: &Toast, on_dismiss: Msg) -> Vi
     .animated_inout(toast.id, motion::NORMAL)
     .clip(true)
     .on_click(on_dismiss)
-    .children(vec![rail, icon_cell, text])
+    .children({
+        let mut hijos = vec![rail, icon_cell, text];
+        for (etiqueta, msg) in botones {
+            hijos.push(boton_accion(etiqueta, msg, fg));
+        }
+        hijos
+    })
 }
 
 /// Helper de construcción para uso inmediato:
 /// `Toast::info(1, "guardado", Duration::from_secs(3))`.
 impl Toast {
     pub fn info(id: u64, text: impl Into<String>, dur: std::time::Duration) -> Self {
-        Self { id, kind: ToastKind::Info, text: text.into(), expires_at: Instant::now() + dur }
+        Self { id, kind: ToastKind::Info, text: text.into(), expires_at: Instant::now() + dur, actions: Vec::new() }
     }
     pub fn success(id: u64, text: impl Into<String>, dur: std::time::Duration) -> Self {
-        Self { id, kind: ToastKind::Success, text: text.into(), expires_at: Instant::now() + dur }
+        Self { id, kind: ToastKind::Success, text: text.into(), expires_at: Instant::now() + dur, actions: Vec::new() }
     }
     pub fn warning(id: u64, text: impl Into<String>, dur: std::time::Duration) -> Self {
-        Self { id, kind: ToastKind::Warning, text: text.into(), expires_at: Instant::now() + dur }
+        Self { id, kind: ToastKind::Warning, text: text.into(), expires_at: Instant::now() + dur, actions: Vec::new() }
     }
     pub fn error(id: u64, text: impl Into<String>, dur: std::time::Duration) -> Self {
-        Self { id, kind: ToastKind::Error, text: text.into(), expires_at: Instant::now() + dur }
+        Self { id, kind: ToastKind::Error, text: text.into(), expires_at: Instant::now() + dur, actions: Vec::new() }
+    }
+
+    /// Adjunta acciones `(clave, etiqueta)` que se pintarán como botones.
+    pub fn con_acciones(mut self, actions: Vec<(String, String)>) -> Self {
+        self.actions = actions;
+        self
     }
 
     pub fn is_alive(&self, now: Instant) -> bool {
diff --git a/widgets/toolbar/Cargo.toml b/widgets/toolbar/Cargo.toml
index 63a0a3f..6fd04aa 100644
--- a/widgets/toolbar/Cargo.toml
+++ b/widgets/toolbar/Cargo.toml
@@ -5,12 +5,12 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-toolbar — barra de herramientas moderna: grupos de botones-ícono planos con hover redondeado, estado activo con acento y separadores sutiles. Los grupos son datos (Vec<ToolbarGroup>) → componibles/configurables por el caller; los íconos los dibuja el caller (closure), igual que dock-rail."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
 
 [dev-dependencies]
-llimphi-icons = { path = "../../llimphi-icons" }
+llimphi-icons = { workspace = true }
diff --git a/widgets/toolbar/LEEME.md b/widgets/toolbar/LEEME.md
new file mode 100644
index 0000000..2fc535e
--- /dev/null
+++ b/widgets/toolbar/LEEME.md
@@ -0,0 +1,37 @@
+# llimphi-widget-toolbar
+
+*Read this in English: [README.md](README.md).*
+
+Barra de herramientas moderna.
+
+Grupos de botones-ícono planos: hover con fondo redondeado, estado
+**activo** con fondo de selección + ícono en acento, **deshabilitado**
+atenuado y sin click. Entre grupos, un separador vertical sutil.
+
+El widget es render-only y agnóstico del `Msg`:
+- los **íconos los dibuja el caller** vía closure `Fn(size, color) ->
+  View` (mismo contrato que `dock-rail::make_icon`) — el widget resuelve
+  el color según el estado (activo/normal/deshabilitado);
+- los **grupos son datos** (`Vec<ToolbarGroup>`): el caller los arma,
+  reordena o filtra — la barra es componible/configurable por
+  construcción, sin sistema de config propio.
+```ignore
+let barra = toolbar_view(
+    vec![
+        ToolbarGroup::new(vec![
+            ToolbarItem::new(|s, c| icon_view(Icon::ChevronUp, c, 1.7), Msg::Subir)
+                .with_label("subir"),
+        ]),
+        ToolbarGroup::new(vec![
+            ToolbarItem::new(|s, c| icon_view(Icon::Rows, c, 1.7), Msg::Vista(0)).active(lista),
+            ToolbarItem::new(|s, c| icon_view(Icon::Grid, c, 1.7), Msg::Vista(2)).active(iconos),
+        ]),
+    ],
+    36.0,
+    &ToolbarPalette::from_theme(&theme),
+);
+```
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/toolbar/README.md b/widgets/toolbar/README.md
new file mode 100644
index 0000000..c26fe81
--- /dev/null
+++ b/widgets/toolbar/README.md
@@ -0,0 +1,37 @@
+# llimphi-widget-toolbar
+
+Modern toolbar.
+
+Groups of flat icon buttons: hover with a rounded background, the **active**
+state with a selection background and an accent icon, **disabled** dimmed and
+unclickable. Between groups, a subtle vertical separator.
+
+The widget is render-only and `Msg`-agnostic:
+
+- the **icons are drawn by the caller** through a `Fn(size, color) -> View`
+  closure (the same contract as `dock-rail::make_icon`) — the widget resolves the
+  colour from the state (active/normal/disabled);
+- the **groups are data** (`Vec<ToolbarGroup>`): the caller builds, reorders or
+  filters them — the bar is composable and configurable by construction, with no
+  config system of its own.
+
+```ignore
+let bar = toolbar_view(
+    vec![
+        ToolbarGroup::new(vec![
+            ToolbarItem::new(|s, c| icon_view(Icon::ChevronUp, c, 1.7), Msg::Up)
+                .with_label("up"),
+        ]),
+        ToolbarGroup::new(vec![
+            ToolbarItem::new(|s, c| icon_view(Icon::Rows, c, 1.7), Msg::View(0)).active(list),
+            ToolbarItem::new(|s, c| icon_view(Icon::Grid, c, 1.7), Msg::View(2)).active(icons),
+        ]),
+    ],
+    36.0,
+    &ToolbarPalette::from_theme(&theme),
+);
+```
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/toolbar/src/lib.rs b/widgets/toolbar/src/lib.rs
index 9fd3581..2783c3b 100644
--- a/widgets/toolbar/src/lib.rs
+++ b/widgets/toolbar/src/lib.rs
@@ -255,3 +255,65 @@ fn separator<Msg: Clone + 'static>(bar_h: f32, palette: &ToolbarPalette) -> View
     })
     .fill(palette.separator)
 }
+
+// ─────────────────────────────────────────────────────────────────────────
+// Overflow → "más" (helper puro, lado host)
+// ─────────────────────────────────────────────────────────────────────────
+
+/// Cuántos ítems de la barra **caben** en `avail` px, reservando `more_w` para
+/// el botón "⋯/más" **sólo si** no entran todos. Devuelve el número de ítems a
+/// mostrar en línea; el resto va a un menú de overflow que el host arma con
+/// [`ToolbarItem`]s. El host mide los anchos (ícono fijo ≈ alto + label por
+/// `text_width` + padding) y llama a esto en su `update`/`view` con el ancho
+/// disponible (post-layout, que conoce de su propio contenedor). `gap` es la
+/// separación horizontal entre ítems. Pura y testeable.
+pub fn overflow_count(item_widths: &[f32], avail: f32, more_w: f32, gap: f32) -> usize {
+    let n = item_widths.len();
+    if n == 0 {
+        return 0;
+    }
+    // ¿Entran todos sin botón de overflow?
+    let total: f32 = item_widths.iter().sum::<f32>() + gap * (n as f32 - 1.0);
+    if total <= avail {
+        return n;
+    }
+    // No entran: reservar el botón "más" y contar los que caben.
+    let budget = (avail - more_w).max(0.0);
+    let mut used = 0.0_f32;
+    let mut count = 0usize;
+    for w in item_widths {
+        let add = if count == 0 { *w } else { gap + *w };
+        if used + add <= budget {
+            used += add;
+            count += 1;
+        } else {
+            break;
+        }
+    }
+    count
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn caben_todos_sin_boton_de_mas() {
+        // 3 ítems de 40 + 2 gaps de 4 = 128 ≤ 200 → todos.
+        assert_eq!(overflow_count(&[40.0, 40.0, 40.0], 200.0, 30.0, 4.0), 3);
+    }
+
+    #[test]
+    fn reserva_el_boton_y_corta() {
+        // 5 ítems de 40 (+gaps) no entran en 150; con more_w=30 el budget es 120:
+        // 40, +4+40=84, +4+40=128 > 120 → caben 2.
+        assert_eq!(overflow_count(&[40.0, 40.0, 40.0, 40.0, 40.0], 150.0, 30.0, 4.0), 2);
+    }
+
+    #[test]
+    fn cero_items_o_espacio_nulo() {
+        assert_eq!(overflow_count(&[], 100.0, 30.0, 4.0), 0);
+        // Espacio 0: no cabe ninguno (budget negativo → 0).
+        assert_eq!(overflow_count(&[40.0, 40.0], 0.0, 30.0, 4.0), 0);
+    }
+}
diff --git a/widgets/tooltip/Cargo.toml b/widgets/tooltip/Cargo.toml
index 13b7f56..96863af 100644
--- a/widgets/tooltip/Cargo.toml
+++ b/widgets/tooltip/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-tooltip — tooltip flotante posicionado por anchor + viewport. Render-only: la app decide cuándo abrir (típico: hover-after-delay manejado en update)."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/tooltip/LEEME.md b/widgets/tooltip/LEEME.md
new file mode 100644
index 0000000..f09951a
--- /dev/null
+++ b/widgets/tooltip/LEEME.md
@@ -0,0 +1,23 @@
+# llimphi-widget-tooltip
+
+*Read this in English: [README.md](README.md).*
+
+Tooltip flotante con anchor + clamping.
+
+Render puro: el widget recibe el anchor (típicamente bottom-center
+del elemento que lo dispara), el viewport y el texto, y devuelve un
+`View<Msg>` posicionado en absolute para colgarlo de `view_overlay`.
+La app es responsable de:
+1. Detectar el hover sobre el elemento via `View::on_pointer_enter`
+   + un `Tween`/delay para evitar tooltips que parpadean al pasar.
+2. Guardar el `Option<TooltipSpec>` en su modelo.
+3. Devolverlo desde `view_overlay`.
+4. Cerrarlo con `View::on_pointer_leave` sobre el mismo elemento.
+
+No se incluye scrim — el tooltip es informativo, no modal: los
+clicks atraviesan al árbol principal. (Para popovers con
+interacción, usar `llimphi-widget-modal` o el `context-menu`).
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/tooltip/README.md b/widgets/tooltip/README.md
new file mode 100644
index 0000000..9568f31
--- /dev/null
+++ b/widgets/tooltip/README.md
@@ -0,0 +1,21 @@
+# llimphi-widget-tooltip
+
+Floating tooltip with anchor and clamping.
+
+Pure render: the widget receives the anchor (typically the bottom-centre of the
+element that triggers it), the viewport and the text, and returns an absolutely
+positioned `View<Msg>` to hang from `view_overlay`. The app is responsible for:
+
+1. Detecting hover over the element through `View::on_pointer_enter` plus a
+   `Tween`/delay, so tooltips don't flicker as the pointer passes.
+2. Storing the `Option<TooltipSpec>` in its model.
+3. Returning it from `view_overlay`.
+4. Closing it with `View::on_pointer_leave` over the same element.
+
+No scrim is included — a tooltip is informative, not modal: clicks pass through
+to the main tree. (For interactive popovers use `llimphi-widget-modal` or the
+`context-menu`.)
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/tooltip/src/lib.rs b/widgets/tooltip/src/lib.rs
index 52d0cb6..0c4143b 100644
--- a/widgets/tooltip/src/lib.rs
+++ b/widgets/tooltip/src/lib.rs
@@ -72,38 +72,77 @@ const PAD_X: f32 = 8.0;
 const PAD_Y: f32 = 5.0;
 const GAP: f32 = 6.0;
 const FONT_SIZE: f32 = 11.5;
-/// Ancho aproximado de un carácter (estimación zonal — Llimphi
-/// todavía no expone medición previa al layout). Sirve para clampear
-/// tooltips largos a un ancho razonable.
-const CHAR_W_APPROX: f32 = 6.5;
+const LINE_H: f32 = FONT_SIZE * 1.35;
 const MAX_W: f32 = 280.0;
+const MARGIN: f32 = 4.0;
+
+/// Mide el tooltip con la fuente real y decide su tamaño. Devuelve
+/// `(w, h)` incluyendo padding. El ancho de contenido se clampea a
+/// `MAX_W`; si el texto no entra en una línea, se estima el nº de
+/// renglones (el nodo de texto envuelve al ancho del panel).
+fn tooltip_size(text: &str) -> (f32, f32) {
+    let content_max = MAX_W - PAD_X * 2.0;
+    let full = llimphi_ui::llimphi_text::text_width(text, FONT_SIZE);
+    let inner = full.min(content_max);
+    let lines = if full <= content_max {
+        1.0
+    } else {
+        (full / content_max).ceil()
+    };
+    (inner + PAD_X * 2.0, lines * LINE_H + PAD_Y * 2.0)
+}
+
+/// Ubica el panel: elige el lado efectivo (FLIP real al contrario si no
+/// entra por el preferido) y devuelve `(x, y, side_efectivo)` ya
+/// clampeado al viewport. Pura y testeable — sin esto el "flip" del doc
+/// era en realidad un `clamp` que solapaba el tooltip con el anchor.
+fn place(
+    anchor: (f32, f32),
+    viewport: (f32, f32),
+    side: Side,
+    w: f32,
+    h: f32,
+) -> (f32, f32, Side) {
+    // ¿Entra por el lado preferido sin salirse del viewport?
+    let fits = |s: Side| -> bool {
+        match s {
+            Side::Bottom => anchor.1 + GAP + h <= viewport.1 - MARGIN,
+            Side::Top => anchor.1 - GAP - h >= MARGIN,
+            Side::Right => anchor.0 + GAP + w <= viewport.0 - MARGIN,
+            Side::Left => anchor.0 - GAP - w >= MARGIN,
+        }
+    };
+    let opposite = |s: Side| match s {
+        Side::Bottom => Side::Top,
+        Side::Top => Side::Bottom,
+        Side::Right => Side::Left,
+        Side::Left => Side::Right,
+    };
+    // Flip al contrario sólo si el preferido no entra y el opuesto sí.
+    let eff = if fits(side) || !fits(opposite(side)) {
+        side
+    } else {
+        opposite(side)
+    };
+
+    let (raw_x, raw_y) = match eff {
+        Side::Bottom => (anchor.0 - w * 0.5, anchor.1 + GAP),
+        Side::Top => (anchor.0 - w * 0.5, anchor.1 - GAP - h),
+        Side::Right => (anchor.0 + GAP, anchor.1 - h * 0.5),
+        Side::Left => (anchor.0 - GAP - w, anchor.1 - h * 0.5),
+    };
+
+    // Clamp del eje cruzado (y del principal como red de seguridad).
+    let x = raw_x.min((viewport.0 - w - MARGIN).max(MARGIN)).max(MARGIN);
+    let y = raw_y.min((viewport.1 - h - MARGIN).max(MARGIN)).max(MARGIN);
+    (x, y, eff)
+}
 
 pub fn tooltip_view<Msg: Clone + 'static>(spec: TooltipSpec) -> View<Msg> {
     let TooltipSpec { anchor, viewport, side, text, palette } = spec;
 
-    // Tamaño estimado del tooltip — Llimphi resuelve layout pero el
-    // posicionamiento absolute necesita un x,y; estimamos con el ancho
-    // del texto y limitamos al MAX_W. Ancho real puede diferir un
-    // píxel — al ojo es invisible.
-    let est_w = (text.chars().count() as f32 * CHAR_W_APPROX + PAD_X * 2.0).min(MAX_W);
-    let est_h = FONT_SIZE * 1.3 + PAD_Y * 2.0;
-
-    // Posicionamiento respecto del anchor.
-    let (raw_x, raw_y) = match side {
-        Side::Bottom => (anchor.0 - est_w * 0.5, anchor.1 + GAP),
-        Side::Top => (anchor.0 - est_w * 0.5, anchor.1 - GAP - est_h),
-        Side::Right => (anchor.0 + GAP, anchor.1 - est_h * 0.5),
-        Side::Left => (anchor.0 - GAP - est_w, anchor.1 - est_h * 0.5),
-    };
-
-    // Clamping al viewport (margen 4px para no pegarse al borde).
-    let margin = 4.0;
-    let x = raw_x
-        .min((viewport.0 - est_w - margin).max(margin))
-        .max(margin);
-    let y = raw_y
-        .min((viewport.1 - est_h - margin).max(margin))
-        .max(margin);
+    let (est_w, est_h) = tooltip_size(&text);
+    let (x, y, _eff) = place(anchor, viewport, side, est_w, est_h);
 
     let panel = View::new(Style {
         position: Position::Absolute,
@@ -164,3 +203,51 @@ pub fn tooltip_view<Msg: Clone + 'static>(spec: TooltipSpec) -> View<Msg> {
         panel,
     ])
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    const VP: (f32, f32) = (1000.0, 800.0);
+
+    #[test]
+    fn flip_bottom_a_top_cuando_no_entra_abajo() {
+        // Anchor pegado al borde inferior: Bottom no entra → flipea a Top.
+        let (_, y, eff) = place((500.0, 790.0), VP, Side::Bottom, 100.0, 40.0);
+        assert_eq!(eff, Side::Top);
+        // El panel queda ARRIBA del anchor (y + h <= anchor.y).
+        assert!(y + 40.0 <= 790.0, "el panel flipeado no debe solapar el anchor");
+    }
+
+    #[test]
+    fn flip_right_a_left_cuando_no_entra_a_la_derecha() {
+        let (x, _, eff) = place((990.0, 400.0), VP, Side::Right, 120.0, 40.0);
+        assert_eq!(eff, Side::Left);
+        assert!(x + 120.0 <= 990.0, "el panel debe quedar a la izquierda del anchor");
+    }
+
+    #[test]
+    fn no_flipea_si_entra_por_el_lado_preferido() {
+        let (_, y, eff) = place((500.0, 400.0), VP, Side::Bottom, 100.0, 40.0);
+        assert_eq!(eff, Side::Bottom);
+        assert!(y >= 400.0, "Bottom queda debajo del anchor");
+    }
+
+    #[test]
+    fn no_flipea_si_ninguno_de_los_dos_lados_entra() {
+        // Viewport minúsculo: ni Top ni Bottom entran → conserva el preferido.
+        let (_, _, eff) = place((25.0, 25.0), (50.0, 50.0), Side::Bottom, 100.0, 100.0);
+        assert_eq!(eff, Side::Bottom);
+    }
+
+    #[test]
+    fn size_multilinea_crece_en_alto() {
+        let corto = tooltip_size("ok");
+        let largo = tooltip_size(
+            "un texto bastante largo que sin duda excede el ancho máximo del \
+             tooltip y por lo tanto tiene que envolver a varios renglones seguidos",
+        );
+        assert!(largo.0 <= MAX_W, "el ancho se clampea a MAX_W");
+        assert!(largo.1 > corto.1, "el texto largo ocupa más alto (multilínea)");
+    }
+}
diff --git a/widgets/transport/Cargo.toml b/widgets/transport/Cargo.toml
index cb1377d..68029a4 100644
--- a/widgets/transport/Cargo.toml
+++ b/widgets/transport/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-transport — botones de transporte de reproductor (play/pause/prev/next/seek/volume/mute/repeat/shuffle/speed/snapshot/record/eq). Stateless: el caller pasa el estado por botón + un handler TransportAction → Msg."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/transport/LEEME.md b/widgets/transport/LEEME.md
new file mode 100644
index 0000000..03ca624
--- /dev/null
+++ b/widgets/transport/LEEME.md
@@ -0,0 +1,39 @@
+# llimphi-widget-transport
+
+*Read this in English: [README.md](README.md).*
+
+Botones de **transporte** para reproductores de medios (play/pause/prev/next/seek/volume/mute/repeat/shuffle/speed/ snapshot/record/eq).
+
+Pattern análogo a `llimphi-widget-timeline`/`-waveform`: el widget **no
+mantiene estado** del reproductor. El caller arma un
+`TransportButton` por cada botón visible (con el flag que define su
+estado activo, como `playing` o `muted`), lo pasa a
+`transport_button_view`, y recibe el `TransportAction` semántico en
+un closure cuando el usuario clickea. Quien mapea esas acciones al
+`MediaCommand` propio del dominio es la app.
+```text
+  [⏮ ] [⏯ ] [⏭ ] [⏪ ] [⏩ ] [🔊]
+```
+Uso típico (media-app):
+```ignore
+use llimphi_widget_transport::{transport_button_view, TransportAction as Ta,
+    TransportButton as Tb, TransportPalette};
+let pal = TransportPalette::from_theme(&theme);
+transport_button_view(
+    Tb::PlayPause { playing: !pause().is_paused() },
+    &pal,
+    |action| match action {
+        Ta::TogglePlay => Msg::Command(MediaCommand::TogglePause),
+        Ta::SeekBy(secs) => Msg::Command(MediaCommand::SeekBy { secs }),
+        /* … */
+    },
+)
+```
+Para una fila completa el caller mapea su `Vec<TransportButton>` con
+`.into_iter().map(|b| transport_button_view(b, &pal, on_action.clone()))`
+y lo pone como `children` de una `View` con `flex_direction: Row` y
+`gap: TransportPalette::gap`.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/transport/README.md b/widgets/transport/README.md
new file mode 100644
index 0000000..52c8483
--- /dev/null
+++ b/widgets/transport/README.md
@@ -0,0 +1,41 @@
+# llimphi-widget-transport
+
+**Transport** buttons for media players (play/pause/prev/next/seek/volume/mute/
+repeat/shuffle/speed/snapshot/record/eq).
+
+The pattern is analogous to `llimphi-widget-timeline` / `-waveform`: the widget
+keeps **no player state**. The caller builds a `TransportButton` per visible
+button (with the flag defining its active state, such as `playing` or `muted`),
+passes it to `transport_button_view`, and receives the semantic
+`TransportAction` in a closure when the user clicks. Mapping those actions to the
+domain's own `MediaCommand` is the app's job.
+
+```text
+  [⏮ ] [⏯ ] [⏭ ] [⏪ ] [⏩ ] [🔊]
+```
+
+Typical use (media-app):
+
+```ignore
+use llimphi_widget_transport::{transport_button_view, TransportAction as Ta,
+    TransportButton as Tb, TransportPalette};
+let pal = TransportPalette::from_theme(&theme);
+transport_button_view(
+    Tb::PlayPause { playing: !pause().is_paused() },
+    &pal,
+    |action| match action {
+        Ta::TogglePlay => Msg::Command(MediaCommand::TogglePause),
+        Ta::SeekBy(secs) => Msg::Command(MediaCommand::SeekBy { secs }),
+        /* … */
+    },
+)
+```
+
+For a whole row the caller maps its `Vec<TransportButton>` with
+`.into_iter().map(|b| transport_button_view(b, &pal, on_action.clone()))` and
+puts it as the `children` of a `View` with `flex_direction: Row` and
+`gap: TransportPalette::gap`.
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/transport/src/lib.rs b/widgets/transport/src/lib.rs
index 6653eb9..8aeeaec 100644
--- a/widgets/transport/src/lib.rs
+++ b/widgets/transport/src/lib.rs
@@ -203,7 +203,7 @@ impl TransportButton {
 }
 
 /// Paleta + dimensiones de los botones del transport. Las medidas viven
-/// acá porque definen la silueta de la barra; el caller no toca el
+/// aquí porque definen la silueta de la barra; el caller no toca el
 /// `Style` directamente.
 #[derive(Debug, Clone, Copy)]
 pub struct TransportPalette {
@@ -265,7 +265,7 @@ impl TransportPalette {
 ///
 /// El widget no mantiene estado: pasale el `TransportButton` con su
 /// estado vigente cada frame y el icono / color / bg-activo se ajusta
-/// solo. Para una **fila** de botones, mapeá tu `Vec<TransportButton>`
+/// solo. Para una **fila** de botones, mapea tu `Vec<TransportButton>`
 /// con `.iter().map(|b| transport_button_view(*b, &pal, on_action.clone()))`
 /// como children de una `View` con `flex_direction: Row` y
 /// `gap: palette.gap`.
diff --git a/widgets/tree/Cargo.toml b/widgets/tree/Cargo.toml
index c97023e..cf51649 100644
--- a/widgets/tree/Cargo.toml
+++ b/widgets/tree/Cargo.toml
@@ -5,9 +5,10 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-tree — árbol con expand/collapse y selección. Análogo Llimphi al `nahual-widget-tree` GPUI. El caller mantiene el set de nodos expandidos y el seleccionado en su Model; el widget aplana el árbol en filas con indentación y emite Msg al togglear o seleccionar."
 
+repository.workspace = true
 [dependencies]
+llimphi-widget-list = { workspace = true }
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/tree/examples/tree_demo.rs b/widgets/tree/examples/tree_demo.rs
index 4a7ad7d..92baf47 100644
--- a/widgets/tree/examples/tree_demo.rs
+++ b/widgets/tree/examples/tree_demo.rs
@@ -2,7 +2,7 @@
 //! selección. Click en ▸/▾ togglea; click en el resto de la fila
 //! selecciona.
 //!
-//! Corré con: `cargo run -p llimphi-widget-tree --example tree_demo --release`.
+//! Corre con: `cargo run -p llimphi-widget-tree --example tree_demo --release`.
 
 use std::collections::HashSet;
 
@@ -195,6 +195,7 @@ fn visit(
             icon: None,
             on_context: None,
             editor: None,
+            trailing: None,
         });
         if has_children && is_expanded {
             visit(*id, depth + 1, expanded, selected, out);
diff --git a/widgets/tree/src/lib.rs b/widgets/tree/src/lib.rs
index ed705d7..c383438 100644
--- a/widgets/tree/src/lib.rs
+++ b/widgets/tree/src/lib.rs
@@ -21,7 +21,7 @@
 #![forbid(unsafe_code)]
 
 use llimphi_ui::llimphi_layout::taffy::{
-    prelude::{length, percent, Dimension, FlexDirection, Size, Style},
+    prelude::{auto, length, percent, Dimension, FlexDirection, Size, Style},
     AlignItems, JustifyContent, Rect,
 };
 use llimphi_ui::llimphi_raster::kurbo::{Affine, Line as KurboLine, Stroke};
@@ -91,6 +91,11 @@ pub struct TreeRow<Msg> {
     /// cablea `on_select` (las teclas las rutea el App). `None` = fila
     /// normal de sólo-lectura.
     pub editor: Option<View<Msg>>,
+    /// Acción opcional alineada a la **derecha** de la fila (cualquier
+    /// `View`, típicamente un botón "+"/"Nueva"). Se pinta después del
+    /// label —que es elástico— así que queda pegada al borde derecho. Su
+    /// propio `on_click` tiene prioridad sobre el `on_select` de la fila.
+    pub trailing: Option<View<Msg>>,
 }
 
 impl<Msg> TreeRow<Msg> {
@@ -116,6 +121,7 @@ impl<Msg> TreeRow<Msg> {
             icon: None,
             on_context: None,
             editor: None,
+            trailing: None,
         }
     }
 
@@ -133,6 +139,11 @@ impl<Msg> TreeRow<Msg> {
         self.editor = Some(editor);
         self
     }
+
+    pub fn with_trailing(mut self, trailing: View<Msg>) -> Self {
+        self.trailing = Some(trailing);
+        self
+    }
 }
 
 /// Especificación completa del árbol a renderear.
@@ -163,6 +174,30 @@ impl<Msg> TreeSpec<Msg> {
 /// que filas que excedan el rect se recorten — usar dentro de un panel
 /// del tamaño deseado.
 pub fn tree_view<Msg: Clone + 'static>(spec: TreeSpec<Msg>) -> View<Msg> {
+    tree_view_con(spec, None)
+}
+
+/// [`tree_view`] aceptando **soltar** sobre sus filas (mismo `RowDnd` que la
+/// lista/grilla; el índice es la posición de la fila en `rows`). Un árbol de
+/// carpetas es el destino más natural de un arrastre, así que esto es lo que
+/// vuelve el sidebar un blanco válido. Con `dnd = None` es el árbol de siempre.
+pub fn tree_view_dnd<Msg: Clone + Send + Sync + 'static>(
+    spec: TreeSpec<Msg>,
+    dnd: Option<llimphi_widget_list::RowDnd<Msg>>,
+) -> View<Msg> {
+    match dnd {
+        Some(d) => tree_view_con(
+            spec,
+            Some(&move |v, i, click| llimphi_widget_list::con_dnd(v, i, click, &d)),
+        ),
+        None => tree_view_con(spec, None),
+    }
+}
+
+fn tree_view_con<Msg: Clone + 'static>(
+    spec: TreeSpec<Msg>,
+    deco: Option<llimphi_widget_list::FilaDeco<'_, Msg>>,
+) -> View<Msg> {
     let TreeSpec {
         rows,
         row_height,
@@ -173,7 +208,15 @@ pub fn tree_view<Msg: Clone + 'static>(spec: TreeSpec<Msg>) -> View<Msg> {
 
     let children: Vec<View<Msg>> = rows
         .into_iter()
-        .map(|row| tree_row_view(row, row_height, indent_px, guides, &palette))
+        .enumerate()
+        .map(|(i, row)| {
+            let select = row.on_select.clone();
+            let v = tree_row_view(row, row_height, indent_px, guides, &palette);
+            match deco {
+                Some(f) => f(v, i, select),
+                None => v,
+            }
+        })
         .collect();
 
     View::new(Style {
@@ -307,6 +350,30 @@ fn tree_row_view<Msg: Clone + 'static>(
     };
     row_children.push(label);
 
+    // Acción alineada a la derecha (botón "+"/"Nueva"). Va después del
+    // label elástico, así que el flex la empuja al borde derecho.
+    if let Some(trailing) = row.trailing {
+        row_children.push(
+            View::new(Style {
+                size: Size {
+                    width: auto(),
+                    height: length(height),
+                },
+                flex_shrink: 0.0,
+                align_items: Some(AlignItems::Center),
+                justify_content: Some(JustifyContent::Center),
+                padding: Rect {
+                    left: length(4.0_f32),
+                    right: length(6.0_f32),
+                    top: length(0.0_f32),
+                    bottom: length(0.0_f32),
+                },
+                ..Default::default()
+            })
+            .children(vec![trailing]),
+        );
+    }
+
     let mut v = View::new(Style {
         flex_direction: FlexDirection::Row,
         size: Size {
@@ -346,3 +413,139 @@ fn tree_row_view<Msg: Clone + 'static>(
 
     v
 }
+
+// =============================================================================
+//  Navegación por teclado (helpers puros, lado host)
+// =============================================================================
+
+/// Mueve el foco/selección con ↑/↓ sobre la lista **plana visible** de `len`
+/// filas: índice siguiente **clampeado** a `[0, len-1]` (un árbol no
+/// envuelve). `current == usize::MAX` (nada) arranca por el extremo según la
+/// dirección. El host lo cablea en `update`.
+pub fn step_visible(len: usize, current: usize, direction: i32) -> usize {
+    if len == 0 {
+        return 0;
+    }
+    let last = len - 1;
+    if current == usize::MAX {
+        return if direction >= 0 { 0 } else { last };
+    }
+    (current as i64 + direction as i64).clamp(0, last as i64) as usize
+}
+
+/// Acción que dispara ←/→ sobre la fila enfocada de un árbol — la semántica
+/// estándar de un TreeView. El host la resuelve contra su modelo (togglear el
+/// nodo, o mover la selección a padre/primer hijo).
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum TreeArrow {
+    /// → sobre un nodo colapsado con hijos: expandirlo.
+    Expand,
+    /// ← sobre un nodo expandido: colapsarlo.
+    Collapse,
+    /// → sobre un nodo ya expandido: bajar al primer hijo (la fila siguiente).
+    ToFirstChild,
+    /// ← sobre una hoja o un nodo colapsado: subir al nodo padre.
+    ToParent,
+    /// Sin efecto (→ sobre una hoja).
+    None,
+}
+
+/// Resuelve la flecha horizontal sobre la fila enfocada a partir de si tiene
+/// hijos y si está expandida. `right = true` es →, `false` es ←. Pura y
+/// testeable; refleja el comportamiento de `QTreeView`/explorers.
+pub fn arrow_action(has_children: bool, expanded: bool, right: bool) -> TreeArrow {
+    if right {
+        if !has_children {
+            TreeArrow::None
+        } else if expanded {
+            TreeArrow::ToFirstChild
+        } else {
+            TreeArrow::Expand
+        }
+    } else if has_children && expanded {
+        TreeArrow::Collapse
+    } else {
+        TreeArrow::ToParent
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn step_visible_clampa_sin_envolver() {
+        assert_eq!(step_visible(4, 0, 1), 1);
+        assert_eq!(step_visible(4, 3, 1), 3); // tope
+        assert_eq!(step_visible(4, 0, -1), 0); // piso
+        assert_eq!(step_visible(4, usize::MAX, 1), 0);
+        assert_eq!(step_visible(4, usize::MAX, -1), 3);
+    }
+
+    #[test]
+    fn arrow_derecha_expande_luego_baja() {
+        // nodo con hijos, colapsado → expandir
+        assert_eq!(arrow_action(true, false, true), TreeArrow::Expand);
+        // ya expandido → bajar al primer hijo
+        assert_eq!(arrow_action(true, true, true), TreeArrow::ToFirstChild);
+        // hoja → nada
+        assert_eq!(arrow_action(false, false, true), TreeArrow::None);
+    }
+
+    #[test]
+    fn arrow_izquierda_colapsa_o_sube() {
+        // nodo expandido → colapsar
+        assert_eq!(arrow_action(true, true, false), TreeArrow::Collapse);
+        // nodo colapsado → subir al padre
+        assert_eq!(arrow_action(true, false, false), TreeArrow::ToParent);
+        // hoja → subir al padre
+        assert_eq!(arrow_action(false, false, false), TreeArrow::ToParent);
+    }
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Multi-selección estilo file-manager (helpers puros, lado host)
+// ─────────────────────────────────────────────────────────────────────────
+
+/// Ctrl/Cmd-click: **alterna** `idx` en el conjunto de índices seleccionados
+/// (lo agrega si falta, lo quita si está). El host guarda su `Vec<usize>` de
+/// selección y lo muta con esto. Pura y testeable.
+pub fn toggle_selection(selected: &mut Vec<usize>, idx: usize) {
+    if let Some(pos) = selected.iter().position(|&i| i == idx) {
+        selected.remove(pos);
+    } else {
+        selected.push(idx);
+    }
+}
+
+/// Shift-click: rango inclusivo `[anchor, idx]` **ordenado** (funciona en
+/// cualquier dirección). El host reemplaza (o une) su selección con estos
+/// índices — `selection_range(a, b).collect::<Vec<_>>()`.
+pub fn selection_range(anchor: usize, idx: usize) -> std::ops::RangeInclusive<usize> {
+    if anchor <= idx {
+        anchor..=idx
+    } else {
+        idx..=anchor
+    }
+}
+
+#[cfg(test)]
+mod multiselect_tests {
+    use super::*;
+
+    #[test]
+    fn toggle_agrega_y_quita() {
+        let mut sel = vec![1usize, 3];
+        toggle_selection(&mut sel, 2);
+        assert!(sel.contains(&2));
+        toggle_selection(&mut sel, 1);
+        assert!(!sel.contains(&1)); // estaba → se quita
+    }
+
+    #[test]
+    fn range_ordena_en_cualquier_direccion() {
+        assert_eq!(selection_range(2, 5).collect::<Vec<_>>(), vec![2, 3, 4, 5]);
+        assert_eq!(selection_range(5, 2).collect::<Vec<_>>(), vec![2, 3, 4, 5]);
+        assert_eq!(selection_range(3, 3).collect::<Vec<_>>(), vec![3]);
+    }
+}
diff --git a/widgets/waveform/Cargo.toml b/widgets/waveform/Cargo.toml
index 232d159..1bd40d0 100644
--- a/widgets/waveform/Cargo.toml
+++ b/widgets/waveform/Cargo.toml
@@ -5,9 +5,9 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-waveform — visor de forma de onda en vivo (envelope min/max relleno + línea central + contorno). Stateless y agnóstico: el caller pasa un closure que rellena un buffer de samples y devuelve la cantidad de canales (fold a mono interno)."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
 llimphi-theme = { workspace = true }
diff --git a/widgets/waveform/LEEME.md b/widgets/waveform/LEEME.md
new file mode 100644
index 0000000..20169f7
--- /dev/null
+++ b/widgets/waveform/LEEME.md
@@ -0,0 +1,44 @@
+# llimphi-widget-waveform
+
+*Read this in English: [README.md](README.md).*
+
+Visor de **forma de onda en vivo**.
+
+Pattern análogo a [`llimphi-widget-timeline`](
+https://docs.rs/llimphi-widget-timeline): el widget **no mantiene
+estado** del audio (ni cpal, ni `AudioProbe`, ni ringbuffer). El caller
+le pasa un closure `Fn(&mut Vec<f32>) -> u16` que rellena un buffer con
+los últimos samples y devuelve cuántos **canales** intercalados trae;
+el widget hace el fold a mono y dibuja un **envelope min/max por
+columna** (polígono cerrado con relleno tenue + stroke por arriba y
+por abajo) sobre una **línea central** que siempre está presente como
+"ground" del visor. Sin handlers de mouse — paint-only.
+```text
+  ┌─────────────────────────────────────────────────┐
+  │   ▄▄▄    ▄  ▄▄▄  ▄▄    ▄▄  ▄                    │
+  │  ▄███▄  ▄█▄▄███▄▄██▄▄▄▄██▄▄█▄                   │
+  │──█████──███████████████████████─── centro ──────│
+  │  ▀███▀  ▀█▀▀███▀▀██▀▀▀▀██▀▀█▀                   │
+  │   ▀▀▀    ▀  ▀▀▀  ▀▀    ▀▀  ▀                    │
+  └─────────────────────────────────────────────────┘
+```
+Uso típico (reproductor con audio probe):
+```ignore
+use std::sync::Arc;
+let probe = audio_probe();        // Arc<AudioProbe> propia de la app
+let palette = WaveformPalette::default();
+waveform_view(
+    move |out| {
+        let (_sr, ch) = probe.snapshot(out);
+        ch                         // canales intercalados
+    },
+    &palette,
+)
+```
+Si el closure devuelve `0` canales (o no llena el buffer), el widget
+pinta sólo la línea central — útil para mostrar "visor vivo, sin
+señal" cuando el dispositivo de captura todavía no levantó.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/waveform/README.md b/widgets/waveform/README.md
new file mode 100644
index 0000000..2fda2b9
--- /dev/null
+++ b/widgets/waveform/README.md
@@ -0,0 +1,44 @@
+# llimphi-widget-waveform
+
+**Live waveform** viewer.
+
+The pattern is analogous to `llimphi-widget-timeline`: the widget keeps **no
+audio state** (no cpal, no `AudioProbe`, no ring buffer). The caller passes a
+`Fn(&mut Vec<f32>) -> u16` closure that fills a buffer with the latest samples
+and returns how many **interleaved channels** it carries; the widget folds to
+mono and draws a **min/max envelope per column** (a closed polygon with a faint
+fill plus a stroke above and below) over a **centre line** always present as the
+viewer's "ground". No mouse handlers — paint only.
+
+```text
+  ┌─────────────────────────────────────────────────┐
+  │   ▄▄▄    ▄  ▄▄▄  ▄▄    ▄▄  ▄                    │
+  │  ▄███▄  ▄█▄▄███▄▄██▄▄▄▄██▄▄█▄                   │
+  │──█████──███████████████████████─── centre ──────│
+  │  ▀███▀  ▀█▀▀███▀▀██▀▀▀▀██▀▀█▀                   │
+  │   ▀▀▀    ▀  ▀▀▀  ▀▀    ▀▀  ▀                    │
+  └─────────────────────────────────────────────────┘
+```
+
+Typical use (a player with an audio probe):
+
+```ignore
+use std::sync::Arc;
+let probe = audio_probe();        // the app's own Arc<AudioProbe>
+let palette = WaveformPalette::default();
+waveform_view(
+    move |out| {
+        let (_sr, ch) = probe.snapshot(out);
+        ch                         // interleaved channels
+    },
+    &palette,
+)
+```
+
+If the closure returns `0` channels (or does not fill the buffer), the widget
+paints only the centre line — useful to show "viewer alive, no signal" while the
+capture device has not come up yet.
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/waveform/src/lib.rs b/widgets/waveform/src/lib.rs
index b45f218..d80dfb6 100644
--- a/widgets/waveform/src/lib.rs
+++ b/widgets/waveform/src/lib.rs
@@ -112,7 +112,7 @@ impl WaveformPalette {
 /// caller lo usa para rellenar el buffer con los últimos samples
 /// intercalados y devolver cuántos canales trae. Si devuelve `0` (o el
 /// buffer queda vacío) el widget pinta sólo la línea central. El widget
-/// es stateless: redibujá pasando el mismo closure cada frame y la onda
+/// es stateless: redibuja pasando el mismo closure cada frame y la onda
 /// avanza sola con cada snapshot nuevo.
 ///
 /// El widget ocupa el espacio que le dé el padre (`width: auto`, `height:
@@ -219,7 +219,7 @@ where
                 envelope.line_to((x as f64, y_top as f64));
             }
         }
-        // Cierre del envelope: volvé por la línea de mínimos en sentido
+        // Cierre del envelope: vuelve por la línea de mínimos en sentido
         // inverso (sin recorrer samples otra vez — los mins ya están).
         for col in (0..cols).rev() {
             let x = inner_x + (col as f32 / denom) * inner_w;
diff --git a/widgets/wawa-mark/Cargo.toml b/widgets/wawa-mark/Cargo.toml
index 8d55b91..6cefbd8 100644
--- a/widgets/wawa-mark/Cargo.toml
+++ b/widgets/wawa-mark/Cargo.toml
@@ -5,8 +5,8 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-wawa-mark — sello vectorial de wawa: rombo con degradado azul índigo → púrpura profundo + 'W' implícita en trazo blanco continuo + Merkle Core luminoso en la sutura. Sin tipografía, todo geometría."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
diff --git a/widgets/wawa-mark/LEEME.md b/widgets/wawa-mark/LEEME.md
new file mode 100644
index 0000000..9c84797
--- /dev/null
+++ b/widgets/wawa-mark/LEEME.md
@@ -0,0 +1,77 @@
+# llimphi-widget-wawa-mark
+
+*Read this in English: [README.md](README.md).*
+
+Sello vectorial del SO wawa.
+
+## Spec (revisión 2026-05-29)
+
+Identidad nominal **implícita**: el rombo de fondo lleva la paleta
+oficial (Azul Índigo / Púrpura Profundo) y los trazos blancos forman
+las letras **"WA"** pero geométricamente — no son tipografía, son
+aristas internas que rebotan en los mismos 45° del rombo, así dan
+sensación de facetas talladas dentro del diamante.
+
+### Composición
+
+1. **Rombo de fondo** — degradado vertical inmaculado, sin sutura
+   visible: índigo arriba, púrpura abajo. El degradado lineal cubre
+   toda la altura del rombo (no sólo la mitad), de modo que el cambio
+   de tono es continuo.
+2. **Trazo "WA"** — un único `BezPath` con dos subtrazos:
+   - **W** (izquierda): zigzag de 4 segmentos, todos a 45° (matching
+     las aristas del rombo). Picos en la sutura azul/púrpura
+     (y = 0.50), valles en y = 0.60. Cinco vértices, cuatro segmentos.
+   - **A** (derecha): triángulo abierto formado por dos legs a 45°
+     + un crossbar horizontal a mitad de altura. Tres segmentos.
+   Las strokes diagonales (6 de las 7) son paralelas a las aristas
+   del rombo, por eso "leen" como filos cortados del diamante en vez
+   de letras pintadas encima.
+3. **Merkle Core** — punto luminoso con halo en el pico central de
+   la W (sobre la sutura, donde azul y púrpura se encuentran). Es el
+   nodo raíz que amarra el sistema.
+
+### Geometría (en coords normalizadas `[0, 1] × [0, 1]` del rect)
+```text
+                           Top
+                            ◇
+                           / \
+                          /   \              ← azul índigo
+                         /     \
+               P0    P2★    P4 A1
+                 ●─.   ●  .─●  ●─.  .─●     ← y = 0.50 (sutura)
+                    ╲ ╱ ╲ ╱     ╲      ╱
+                     ╳   ╳       ╲────╱     ← crossbar A (y=0.55)
+                    ╱ ╲ ╱ ╲     ╱      ╲
+                 ●─'   ●  '─●  ●─'    '─●  ← y = 0.60 (valles/pies)
+               P1    P3    A0    A2
+                         ↑
+                         gap entre W y A
+    Left  ◇─────────────────────────────────◇  Right
+                         (sutura, y = 0.50)
+                         /
+                        /
+                       /                     ← púrpura profundo
+                      /
+                     ◇
+                   Bottom
+```
+Las strokes diagonales todas a slope ±1, igual que las aristas del
+rombo. El crossbar de la A es la única horizontal — concesión mínima
+a la legibilidad de la letra, queda subordinado al patrón diamante.
+
+## Uso
+```ignore
+use llimphi_widget_wawa_mark::{wawa_mark_view, WawaMarkPalette};
+
+// En un view:
+View::new(Style { size: Size { width: length(128.0), height: length(128.0) }, ..Default::default() })
+    .children(vec![wawa_mark_view(&WawaMarkPalette::default())])
+```
+El widget rellena el rect del padre — pasarle un tamaño cuadrado para
+que el rombo no se distorsione (lo respeta igual, pero queda mejor
+cuadrado).
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/wawa-mark/README.md b/widgets/wawa-mark/README.md
new file mode 100644
index 0000000..eb5423d
--- /dev/null
+++ b/widgets/wawa-mark/README.md
@@ -0,0 +1,78 @@
+# llimphi-widget-wawa-mark
+
+The vector seal of the wawa OS.
+
+## Spec (revision 2026-05-29)
+
+Nominal identity is **implicit**: the background rhombus carries the official
+palette (Indigo Blue / Deep Purple) and the white strokes form the letters
+**"WA"**, but geometrically — they are not typography, they are internal edges
+bouncing at the rhombus's own 45°, which gives the sense of facets carved inside
+the diamond.
+
+### Composition
+
+1. **Background rhombus** — an immaculate vertical gradient with no visible seam:
+   indigo on top, purple below. The linear gradient covers the rhombus's whole
+   height (not just half), so the tonal change is continuous.
+2. **The "WA" stroke** — a single `BezPath` with two subpaths:
+   - **W** (left): a 4-segment zigzag, all at 45° (matching the rhombus's edges).
+     Peaks on the blue/purple seam (y = 0.50), valleys at y = 0.60. Five
+     vertices, four segments.
+   - **A** (right): an open triangle formed by two 45° legs plus a horizontal
+     crossbar at mid height. Three segments.
+
+   Six of the seven strokes are diagonals parallel to the rhombus's edges, which
+   is why they "read" as edges cut from the diamond rather than letters painted
+   on top.
+3. **Merkle Core** — a luminous dot with a halo at the W's central peak (on the
+   seam, where blue and purple meet). It is the root node that ties the system
+   together.
+
+### Geometry (in the rect's normalized `[0, 1] × [0, 1]` coordinates)
+
+```text
+                           Top
+                            ◇
+                           / \
+                          /   \              ← indigo blue
+                         /     \
+               P0    P2★    P4 A1
+                 ●─.   ●  .─●  ●─.  .─●     ← y = 0.50 (seam)
+                    ╲ ╱ ╲ ╱     ╲      ╱
+                     ╳   ╳       ╲────╱     ← A crossbar (y=0.55)
+                    ╱ ╲ ╱ ╲     ╱      ╲
+                 ●─'   ●  '─●  ●─'    '─●  ← y = 0.60 (valleys/feet)
+               P1    P3    A0    A2
+                         ↑
+                         gap between W and A
+    Left  ◇─────────────────────────────────◇  Right
+                         (seam, y = 0.50)
+                         /
+                        /
+                       /                     ← deep purple
+                      /
+                     ◇
+                   Bottom
+```
+
+Every diagonal stroke is at slope ±1, like the rhombus's edges. The A's crossbar
+is the only horizontal — a minimal concession to letter legibility, kept
+subordinate to the diamond pattern.
+
+## Use
+
+```ignore
+use llimphi_widget_wawa_mark::{wawa_mark_view, WawaMarkPalette};
+
+// In a view:
+View::new(Style { size: Size { width: length(128.0), height: length(128.0) }, ..Default::default() })
+    .children(vec![wawa_mark_view(&WawaMarkPalette::default())])
+```
+
+The widget fills the parent's rect — give it a square size so the rhombus is not
+distorted (it honours whatever it gets, but square looks right).
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/wrap/Cargo.toml b/widgets/wrap/Cargo.toml
index f4490e1..6c1eca5 100644
--- a/widgets/wrap/Cargo.toml
+++ b/widgets/wrap/Cargo.toml
@@ -5,8 +5,8 @@ edition.workspace = true
 license.workspace = true
 authors.workspace = true
 publish.workspace = true
-repository.workspace = true
 description = "llimphi-widget-wrap — contenedor flex que envuelve a la siguiente línea (FlexWrap::Wrap) con gap horizontal+vertical. Para chips, tags, galerías fluidas, toolbars que respiran."
 
+repository.workspace = true
 [dependencies]
 llimphi-ui = { workspace = true }
diff --git a/widgets/wrap/LEEME.md b/widgets/wrap/LEEME.md
new file mode 100644
index 0000000..99f7ae6
--- /dev/null
+++ b/widgets/wrap/LEEME.md
@@ -0,0 +1,15 @@
+# llimphi-widget-wrap
+
+*Read this in English: [README.md](README.md).*
+
+Contenedor con `flex-wrap: wrap` y gap.
+
+Lo que en Flutter es `Wrap` y en Compose `FlowRow`: items que fluyen
+horizontalmente y saltan a la siguiente línea cuando se acaba el
+ancho. Úsalo para chips, tags, galerías fluidas, toolbars que
+respiran. taffy ya soporta `flex-wrap`; este crate es el azúcar
+mínima para no repetir el `Style` boilerplate.
+
+---
+
+Parte de **llimphi** — ver [llimphi](../../LEEME.md).
diff --git a/widgets/wrap/README.md b/widgets/wrap/README.md
new file mode 100644
index 0000000..7db65c6
--- /dev/null
+++ b/widgets/wrap/README.md
@@ -0,0 +1,12 @@
+# llimphi-widget-wrap
+
+Container with `flex-wrap: wrap` and a gap.
+
+What `Wrap` is in Flutter and `FlowRow` in Compose: items that flow horizontally
+and jump to the next line when the width runs out. Use it for chips, tags, fluid
+galleries and toolbars that breathe. taffy already supports `flex-wrap`; this
+crate is the minimal sugar that saves repeating the `Style` boilerplate.
+
+---
+
+Part of **llimphi** — see [llimphi](../../README.md).
diff --git a/widgets/wrap/src/lib.rs b/widgets/wrap/src/lib.rs
index 6700c36..2b748d9 100644
--- a/widgets/wrap/src/lib.rs
+++ b/widgets/wrap/src/lib.rs
@@ -2,7 +2,7 @@
 //!
 //! Lo que en Flutter es `Wrap` y en Compose `FlowRow`: items que fluyen
 //! horizontalmente y saltan a la siguiente línea cuando se acaba el
-//! ancho. Usalo para chips, tags, galerías fluidas, toolbars que
+//! ancho. Úsalo para chips, tags, galerías fluidas, toolbars que
 //! respiran. taffy ya soporta `flex-wrap`; este crate es el azúcar
 //! mínima para no repetir el `Style` boilerplate.