tegumentar3

data-pipeline/package.json

@@ -7,7 +7,7 @@
     "fetch:models": "node scripts/fetch-real-models.mjs",
     "convert:models": "node scripts/convert-fbx.mjs",
     "extract:manifest": "node scripts/extract-manifest.mjs",
-    "build:tegumentar": "node seed/build-manifest.mjs && node scripts/build-seed-models.mjs",
+    "build:tegumentar": "node seed/build-manifest.mjs",
     "merge:manifest": "node scripts/merge-manifests.mjs",
     "seed:db": "node scripts/seed-db.mjs",
     "run:all": "npm run fetch:models && npm run convert:models && npm run extract:manifest && npm run build:tegumentar && npm run merge:manifest && npm run seed:db"

data-pipeline/scripts/build-seed-models.mjs

@@ -1,118 +0,0 @@
-import { Document, NodeIO } from "@gltf-transform/core";
-import { readFileSync, mkdirSync } from "node:fs";
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-import { buildGeometry } from "./geometry.mjs";
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const manifestPath = path.resolve(
-  __dirname,
-  process.argv[2] ?? "../seed/manifest-tegumentar.json",
-);
-const outDir = path.resolve(__dirname, "../seed/models");
-mkdirSync(outDir, { recursive: true });
-
-const { structures } = JSON.parse(readFileSync(manifestPath, "utf-8"));
-
-function eulerToQuat([x, y, z]) {
-  const cx = Math.cos(x / 2), sx = Math.sin(x / 2);
-  const cy = Math.cos(y / 2), sy = Math.sin(y / 2);
-  const cz = Math.cos(z / 2), sz = Math.sin(z / 2);
-  return [
-    sx * cy * cz - cx * sy * sz,
-    cx * sy * cz + sx * cy * sz,
-    cx * cy * sz - sx * sy * cz,
-    cx * cy * cz + sx * sy * sz,
-  ];
-}
-
-function hexToRgb(hex) {
-  const n = parseInt(hex.replace("#", ""), 16);
-  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255, 1];
-}
-
-const bySystem = new Map();
-for (const s of structures) {
-  if (!bySystem.has(s.system)) bySystem.set(s.system, []);
-  bySystem.get(s.system).push(s);
-}
-
-const systemColors = {
-  esqueletico: "#e8e2d0",
-  muscular: "#b5433a",
-  nervoso: "#f2c14e",
-  cardiovascular: "#c1121f",
-  respiratorio: "#4f7cff",
-  tegumentar: "#e0a96d",
-};
-
-for (const [systemSlug, items] of bySystem) {
-  const doc = new Document();
-  const buffer = doc.createBuffer();
-  const scene = doc.createScene(systemSlug);
-  doc.getRoot().setDefaultScene(scene);
-
-  // Cada item pode pedir uma cor própria (opts.color) pra se distinguir dos
-  // demais (ex: glândula amarela, vaso vermelho/azul, pelo castanho) em vez
-  // de todo o sistema sair de uma cor só — cache por hex evita recriar
-  // material repetido.
-  const materialCache = new Map();
-  function materialFor(hex) {
-    if (materialCache.has(hex)) return materialCache.get(hex);
-    const mat = doc
-      .createMaterial(hex)
-      .setBaseColorFactor(hexToRgb(hex))
-      .setRoughnessFactor(0.6)
-      .setMetallicFactor(0.05)
-      // O bloco de pele usa caixas com a face da frente removida (ver
-      // openFrontBox em geometry.mjs) pra dar pra ver o conteúdo por
-      // dentro — sem dupla face, as paredes de trás/lados ficariam
-      // invisíveis quando vistas "de dentro" da caixa aberta.
-      .setDoubleSided(true);
-    materialCache.set(hex, mat);
-    return mat;
-  }
-  const defaultHex = systemColors[systemSlug] ?? "#cccccc";
-
-  for (const item of items) {
-    const material = materialFor(item.color ?? defaultHex);
-    const geo = buildGeometry(item.shape);
-    const posAccessor = doc
-      .createAccessor()
-      .setType("VEC3")
-      .setArray(geo.positions)
-      .setBuffer(buffer);
-    const normAccessor = doc
-      .createAccessor()
-      .setType("VEC3")
-      .setArray(geo.normals)
-      .setBuffer(buffer);
-    const idxAccessor = doc
-      .createAccessor()
-      .setType("SCALAR")
-      .setArray(geo.indices)
-      .setBuffer(buffer);
-
-    const prim = doc
-      .createPrimitive()
-      .setAttribute("POSITION", posAccessor)
-      .setAttribute("NORMAL", normAccessor)
-      .setIndices(idxAccessor)
-      .setMaterial(material);
-
-    const mesh = doc.createMesh(item.meshName).addPrimitive(prim);
-    const node = doc
-      .createNode(item.meshName)
-      .setMesh(mesh)
-      .setTranslation(item.position)
-      .setRotation(eulerToQuat(item.rotation ?? [0, 0, 0]))
-      .setExtras({ slug: item.slug });
-
-    scene.addChild(node);
-  }
-
-  const io = new NodeIO();
-  const outFile = path.join(outDir, `${systemSlug}.glb`);
-  await io.write(outFile, doc);
-  console.log(`✓ ${outFile} (${items.length} estruturas)`);
-}

data-pipeline/scripts/geometry.mjs

@@ -1,146 +0,0 @@
-// Minimal parametric mesh generators (box/sphere/cylinder), dependency-free.
-// Returns { positions: Float32Array, normals: Float32Array, indices: Uint32Array }.
-
-// skipNormals: normais (como "0,-1,0") das faces a NÃO gerar — usado pelo
-// bloco de pele em corte (openFrontBox abaixo) pra deixar a face da frente
-// aberta, como uma caixa de diorama, revelando o conteúdo interno em vez de
-// escondê-lo atrás de uma parede opaca.
-export function box(w, h, d, skipNormals = []) {
-  const x = w / 2, y = h / 2, z = d / 2;
-  const positions = [];
-  const normals = [];
-  const indices = [];
-
-  const faces = [
-    // [normal, 4 corners CCW]
-    [[0, 0, 1], [[-x, -y, z], [x, -y, z], [x, y, z], [-x, y, z]]],
-    [[0, 0, -1], [[x, -y, -z], [-x, -y, -z], [-x, y, -z], [x, y, -z]]],
-    [[0, 1, 0], [[-x, y, z], [x, y, z], [x, y, -z], [-x, y, -z]]],
-    [[0, -1, 0], [[-x, -y, -z], [x, -y, -z], [x, -y, z], [-x, -y, z]]],
-    [[1, 0, 0], [[x, -y, z], [x, -y, -z], [x, y, -z], [x, y, z]]],
-    [[-1, 0, 0], [[-x, -y, -z], [-x, -y, z], [-x, y, z], [-x, y, -z]]],
-  ];
-
-  const skip = new Set(skipNormals.map((n) => n.join(",")));
-
-  for (const [n, corners] of faces) {
-    if (skip.has(n.join(","))) continue;
-    const base = positions.length / 3;
-    for (const c of corners) {
-      positions.push(...c);
-      normals.push(...n);
-    }
-    indices.push(base, base + 1, base + 2, base, base + 2, base + 3);
-  }
-
-  return {
-    positions: new Float32Array(positions),
-    normals: new Float32Array(normals),
-    indices: new Uint32Array(indices),
-  };
-}
-
-// Caixa "de diorama": todas as faces normais, exceto a de baixo em Y
-// (nosso eixo "frente/trás" no bloco de pele) — deixa a frente aberta pra
-// dar pra ver o conteúdo (folículos, glândulas, vasos) por dentro, em vez
-// de uma parede opaca escondendo tudo.
-export function openFrontBox(w, h, d) {
-  return box(w, h, d, [[0, -1, 0]]);
-}
-
-export function sphere(radius, widthSegments = 16, heightSegments = 12) {
-  const positions = [];
-  const normals = [];
-  const indices = [];
-
-  for (let y = 0; y <= heightSegments; y++) {
-    const v = y / heightSegments;
-    const theta = v * Math.PI;
-    for (let x = 0; x <= widthSegments; x++) {
-      const u = x / widthSegments;
-      const phi = u * Math.PI * 2;
-      const nx = -Math.cos(phi) * Math.sin(theta);
-      const ny = Math.cos(theta);
-      const nz = Math.sin(phi) * Math.sin(theta);
-      positions.push(radius * nx, radius * ny, radius * nz);
-      normals.push(nx, ny, nz);
-    }
-  }
-
-  const rowSize = widthSegments + 1;
-  for (let y = 0; y < heightSegments; y++) {
-    for (let x = 0; x < widthSegments; x++) {
-      const a = y * rowSize + x;
-      const b = a + rowSize;
-      indices.push(a, b, a + 1, b, b + 1, a + 1);
-    }
-  }
-
-  return {
-    positions: new Float32Array(positions),
-    normals: new Float32Array(normals),
-    indices: new Uint32Array(indices),
-  };
-}
-
-export function cylinder(radiusTop, radiusBottom, height, radialSegments = 12) {
-  const positions = [];
-  const normals = [];
-  const indices = [];
-  const halfH = height / 2;
-
-  // Side wall.
-  for (let y = 0; y <= 1; y++) {
-    const r = y === 0 ? radiusTop : radiusBottom;
-    const py = y === 0 ? halfH : -halfH;
-    for (let x = 0; x <= radialSegments; x++) {
-      const u = (x / radialSegments) * Math.PI * 2;
-      const nx = Math.sin(u);
-      const nz = Math.cos(u);
-      positions.push(r * nx, py, r * nz);
-      const slope = (radiusBottom - radiusTop) / height;
-      const len = Math.sqrt(1 + slope * slope);
-      normals.push(nx / len, -slope / len, nz / len);
-    }
-  }
-  const rowSize = radialSegments + 1;
-  for (let x = 0; x < radialSegments; x++) {
-    const a = x, b = a + rowSize;
-    indices.push(a, b, a + 1, b, b + 1, a + 1);
-  }
-
-  // Caps.
-  function cap(y, r, py, flip) {
-    const base = positions.length / 3;
-    const ny = flip ? 1 : -1;
-    positions.push(0, py, 0);
-    normals.push(0, ny, 0);
-    for (let x = 0; x <= radialSegments; x++) {
-      const u = (x / radialSegments) * Math.PI * 2;
-      positions.push(r * Math.sin(u), py, r * Math.cos(u));
-      normals.push(0, ny, 0);
-    }
-    for (let x = 0; x < radialSegments; x++) {
-      if (flip) indices.push(base, base + x + 2, base + x + 1);
-      else indices.push(base, base + x + 1, base + x + 2);
-    }
-  }
-  if (radiusTop > 0) cap(0, radiusTop, halfH, true);
-  if (radiusBottom > 0) cap(1, radiusBottom, -halfH, false);
-
-  return {
-    positions: new Float32Array(positions),
-    normals: new Float32Array(normals),
-    indices: new Uint32Array(indices),
-  };
-}
-
-export function buildGeometry(shape) {
-  switch (shape.type) {
-    case "box": return box(shape.w, shape.h, shape.d);
-    case "openFrontBox": return openFrontBox(shape.w, shape.h, shape.d);
-    case "sphere": return sphere(shape.r);
-    case "cylinder": return cylinder(shape.rt, shape.rb, shape.h);
-    default: throw new Error(`Unknown shape type: ${shape.type}`);
-  }
-}

data-pipeline/seed/build-manifest.mjs

@@ -1,24 +1,28 @@
-// Gera manifest-tegumentar.json: o Z-Anatomy-Sample não inclui camadas de
-// pele (epiderme/derme/hipoderme) nem seus anexos (folículo piloso, glândulas
-// etc.) — confirmado consultando a listagem completa de
-// Assets/Models/1.0 Models no repositório (só Skeletal, Muscular, Nervous,
-// CardioVascular, Visceral, Joints, LymphoidOrgans, Regions e Reference
-// lines) — são estruturas microscópicas, nenhum dataset de corpo inteiro as
-// modela como malha. Por isso o sistema tegumentar (só ele — os demais
-// sistemas continuam vindo de malhas reais via scripts/extract-manifest.mjs,
-// sem nenhuma mudança) usa um "bloco" esquemático construído com geometria
-// paramétrica simples (ver scripts/geometry.mjs e scripts/build-seed-models.mjs,
-// também exclusivos do tegumentar — só o script "build:tegumentar" os chama).
+// Gera manifest-tegumentar.json.
 //
-// MODELO "DIORAMA": uma caixa sólida (as 3 camadas empilhadas, cada uma uma
-// openFrontBox — ver geometry.mjs) com a face da frente removida, como uma
-// caixa de vidro sem uma parede, no estilo do desenho clássico de corte de
-// pele (Netter/Sobotta): de cima dá pra ver a superfície da epiderme com os
-// pelos saindo; do lado dá pra ver a "banda" de cor de cada camada; e pela
-// frente aberta dá pra ver os componentes (folículos, glândulas, vasos,
-// corpúsculos) soltos dentro do volume da derme/hipoderme, sem nada opaco
-// na frente escondendo-os. Gire o modelo com o mouse pra explorar de vários
-// ângulos.
+// HISTÓRICO: tentamos duas vezes um bloco 3D esquemático (geometria
+// procedural — caixas/esferas/cilindros) pro sistema tegumentar, já que o
+// Z-Anatomy-Sample não tem nenhum dado de pele (confirmado consultando a
+// listagem completa de Assets/Models/1.0 Models: só Skeletal, Muscular,
+// Nervous, CardioVascular, Visceral, Joints, LymphoidOrgans, Regions e
+// Reference lines). Nenhuma das duas ficou boa o suficiente pra estudo.
+//
+// DECISÃO ATUAL: em vez de insistir num modelo 3D (que exigiria ou uma
+// malha real licenciada — ex: Sketchfab, mas isso pede conta/token de API,
+// uma dependência externa nova — ou continuar no procedural, já reprovado),
+// o tegumentar agora é um DIAGRAMA 2D com pontos clicáveis (hotspots), como
+// a ilustração clássica de corte de pele. A imagem usada é de domínio
+// público (obra do governo dos EUA — National Cancer Institute / SEER
+// Training Modules, https://training.seer.cancer.gov/melanoma/anatomy/),
+// salva em frontend/public/tegumentar/skin-cross-section.jpg. Sem
+// restrição de uso — não precisa nem de atribuição, mas mantemos por boa
+// prática (ver frontend/src/components/SkinDiagram.tsx).
+//
+// As posições dos hotspots (x/y em % da imagem) ficam em
+// frontend/src/data/skinHotspots.ts, não aqui — são um detalhe de
+// apresentação (onde desenhar o marcador em cima da figura), enquanto este
+// arquivo só gera os DADOS da estrutura (nome, descrição) que entram no
+// banco, do mesmo jeito que qualquer outra estrutura do atlas.
 import { writeFileSync } from "node:fs";
 import { fileURLToPath } from "node:url";
 import path from "node:path";
@@ -27,288 +31,121 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 const structures = [];
 
-// Todo o desenho abaixo é escrito em "unidades de projeto" (a escala
-// original, pensada peça por peça) e só na hora de gerar a estrutura final
-// o add() aplica o fator SCALE — assim dá pra aumentar/diminuir o bloco
-// inteiro mudando um único número, sem recalcular à mão a posição de cada
-// uma das peças.
-const SCALE = 3;
-
-function scaleShape(shape) {
-  const scaled = { ...shape };
-  for (const key of ["w", "h", "d", "r", "rt", "rb"]) {
-    if (scaled[key] != null) scaled[key] *= SCALE;
-  }
-  return scaled;
-}
-
-// Escala a posição em torno da âncora do bloco (CX, CY, Z_TOP) — assim o
-// bloco cresce a partir do ponto onde "gruda" no antebraço, em vez de só se
-// afastar dele.
-function scalePosition([x, y, z]) {
-  return [CX + (x - CX) * SCALE, CY + (y - CY) * SCALE, Z_TOP - (Z_TOP - z) * SCALE];
-}
-
-function add(system, slug, namePt, nameEn, region, shape, position, opts = {}) {
+// modelFile/meshName são NOT NULL no schema mas não fazem sentido pro
+// tegumentar (não há malha 3D) — o frontend nunca tenta carregar um glb
+// pra esse sistema (ver o filtro em Scene.tsx), então usamos um valor-
+// sentinela só pra satisfazer o schema.
+function add(slug, namePt, nameEn, description, region = []) {
   structures.push({
-    system,
+    system: "tegumentar",
     slug,
     namePt,
     nameEn,
-    synonyms: opts.synonyms ?? [],
-    description: opts.description ?? "",
-    regionPath: region,
-    modelFile: `${system}.glb`,
+    synonyms: [],
+    description,
+    regionPath: ["Sistema Tegumentar", "Corte Transversal da Pele", ...region],
+    modelFile: "n/a",
     meshName: slug,
-    shape: scaleShape(shape),
-    position: scalePosition(position),
-    rotation: opts.rotation ?? [0, 0, 0],
-    color: opts.color,
   });
 }
 
-const TX = ["Sistema Tegumentar", "Corte Transversal da Pele (Diorama)"];
-
-// Centro/âncora do bloco (coordenadas do mundo, mesma escala do corpo
-// Z-Anatomy — colado na face do antebraço, como antes).
-const CX = 0.24;
-const CY = 0.85;
-
-const BLOCK_W = 0.14; // extensão em X (largura do bloco)
-const Y_DEPTH = 0.12; // profundidade em Y (frente-trás) — a mesma pras 3 camadas
-const Y_FRONT = CY - Y_DEPTH / 2; // onde fica a abertura (face removida)
-
-// Espessura (eixo Z) de cada camada e a profundidade onde cada uma começa/
-// termina — definidas uma vez aqui pra tudo (camadas E componentes) usar os
-// mesmos números e não desalinhar. Proporções exageradas (derme/hipoderme
-// bem mais grossas que na realidade) de propósito, pra caber e destacar os
-// componentes — como em qualquer diagrama didático de pele.
-const Z_TOP = 0.038; // superfície da epiderme
-const D_EPI = 0.012;
-const D_DERME = 0.035;
-const D_HIPO = 0.053;
-const Z_EPI_BOTTOM = Z_TOP - D_EPI; // limite epiderme/derme
-const Z_DERME_BOTTOM = Z_EPI_BOTTOM - D_DERME; // limite derme/hipoderme
-const Z_HIPO_BOTTOM = Z_DERME_BOTTOM - D_HIPO; // base do bloco
-
-const ROT_Z = [Math.PI / 2, 0, 0]; // deixa cilindros na vertical (eixo nasce em Y, isso gira pra Z)
-
-// ---- As 3 camadas da pele, como uma caixa de diorama (frente aberta) ----
 add(
-  "tegumentar", "epiderme", "Epiderme", "Epidermis", [...TX],
-  { type: "openFrontBox", w: BLOCK_W, h: Y_DEPTH, d: D_EPI },
-  [CX, CY, Z_TOP - D_EPI / 2],
-  {
-    color: "#e0a96d",
-    description:
-      "Camada mais externa e avascular da pele, formada por epitélio pavimentoso estratificado queratinizado; sua função é a principal barreira contra perda de água, atrito, micro-organismos e raios UV (com a ajuda da melanina). É a face de cima do bloco, de onde saem os pelos.",
-  },
+  "epiderme", "Epiderme", "Epidermis",
+  "Camada mais externa e avascular da pele, formada por epitélio pavimentoso estratificado queratinizado; principal barreira contra perda de água, atrito, micro-organismos e raios UV.",
 );
 add(
-  "tegumentar", "derme", "Derme", "Dermis", [...TX],
-  { type: "openFrontBox", w: BLOCK_W, h: Y_DEPTH, d: D_DERME },
-  [CX, CY, Z_EPI_BOTTOM - D_DERME / 2],
-  {
-    color: "#c97b4a",
-    description:
-      "Camada de tecido conjuntivo rica em colágeno e elastina, vasos sanguíneos, terminações nervosas e os anexos cutâneos (folículos pilosos, glândulas); sustenta a epiderme e dá à pele resistência e elasticidade. Visível como a faixa do meio no lado do bloco.",
-  },
+  "derme", "Derme", "Dermis",
+  "Camada de tecido conjuntivo abaixo da epiderme, rica em colágeno e elastina, vasos sanguíneos, nervos e os anexos cutâneos (folículos pilosos, glândulas); dá à pele resistência e elasticidade.",
 );
 add(
-  "tegumentar", "hipoderme", "Hipoderme (Tecido Subcutâneo)", "Hypodermis (Subcutaneous Tissue)", [...TX],
-  { type: "openFrontBox", w: BLOCK_W, h: Y_DEPTH, d: D_HIPO },
-  [CX, CY, Z_DERME_BOTTOM - D_HIPO / 2],
-  {
-    color: "#f2d4a3",
-    description:
-      "Camada mais profunda, rica em tecido adiposo; isola termicamente, absorve impactos e serve de reserva de energia — não é tecnicamente parte da pele, mas a conecta aos músculos e ossos subjacentes. É a faixa mais grossa, na base do bloco.",
-  },
-);
-
-// ---- 6 "colunas" de componentes, cada uma numa posição X própria, dentro
-// do volume aberto do bloco — a altura (Z) de cada peça já indica em qual
-// camada ela vive; um leve desvio em Y dá sensação de profundidade. ----
-const COL = (i) => CX - 0.06 + i * 0.024; // 6 colunas igualmente espaçadas
-
-// ---- Coluna 1: complexo pilossebáceo (pelo + folículo + músculo eretor + glândula sebácea) ----
-const HX = COL(0);
-const HY = CY - 0.02;
-const HAIR_TILT = [Math.PI / 2 + 0.3, 0.2, 0];
-
-add(
-  "tegumentar", "pelo", "Pelo (Haste Capilar)", "Hair Shaft", [...TX, "Complexo Pilossebáceo"],
-  { type: "cylinder", rt: 0.0006, rb: 0.001, h: 0.02 }, [HX, HY, Z_TOP + 0.01],
-  {
-    color: "#4a3527",
-    rotation: HAIR_TILT,
-    description:
-      "Porção do pelo visível acima da superfície da pele, formada por células queratinizadas mortas; sua cor vem da melanina produzida no bulbo piloso.",
-  },
+  "hipoderme", "Hipoderme (Subcútis)", "Subcutis (Hypodermis)",
+  "Camada mais profunda, rica em tecido adiposo; isola termicamente, absorve impactos e serve de reserva de energia — não é tecnicamente parte da pele, mas a conecta aos músculos e ossos subjacentes.",
 );
 add(
-  "tegumentar", "foliculo-piloso", "Folículo Piloso", "Hair Follicle", [...TX, "Complexo Pilossebáceo"],
-  { type: "cylinder", rt: 0.0022, rb: 0.0022, h: 0.058 }, [HX, HY, 0.009],
-  {
-    color: "#8a6a52",
-    rotation: HAIR_TILT,
-    description:
-      "Invaginação da epiderme para dentro da derme/hipoderme que envolve e forma a raiz do pelo; suas células-tronco também participam da regeneração da epiderme após lesões.",
-  },
+  "estrato-corneo", "Estrato Córneo", "Stratum Corneum",
+  "Camada mais superficial da epiderme, formada por células mortas cheias de queratina que se descamam continuamente; é a barreira física final contra o ambiente.",
+  ["Epiderme"],
 );
 add(
-  "tegumentar", "bulbo-piloso", "Bulbo Piloso", "Hair Bulb", [...TX, "Complexo Pilossebáceo"],
-  { type: "sphere", r: 0.004 }, [HX - 0.005, HY, -0.02],
-  {
-    color: "#6b4c38",
-    description:
-      "Base dilatada do folículo, na hipoderme; contém a papila dérmica (com vasos que nutrem o pelo) e a matriz germinativa, onde o pelo é produzido por divisão celular.",
-  },
+  "camada-pigmentar", "Camada Pigmentar", "Pigment Layer",
+  "Região da epiderme onde os melanócitos depositam melanina nas células vizinhas, dando à pele sua cor e protegendo o DNA celular da radiação UV.",
+  ["Epiderme"],
 );
 add(
-  "tegumentar", "musculo-eretor-do-pelo", "Músculo Eretor do Pelo", "Arrector Pili Muscle", [...TX, "Complexo Pilossebáceo"],
-  { type: "box", w: 0.0012, h: 0.014, d: 0.003 }, [HX + 0.005, HY, 0.017],
-  {
-    color: "#b5433a",
-    rotation: [1.05, 0, 0],
-    description:
-      "Pequeno músculo liso ligado obliquamente ao folículo; ao se contrair (frio, medo), eleva o pelo e comprime a glândula sebácea — é o responsável pela pele arrepiada (piloereção).",
-  },
+  "estrato-germinativo", "Estrato Germinativo (Basal + Espinhoso)", "Stratum Germinativum (Basale + Spinosum)",
+  "Camadas mais profundas da epiderme (estrato basal + estrato espinhoso), onde as células-tronco se dividem continuamente para repor as células que se perdem na superfície.",
+  ["Epiderme"],
 );
 add(
-  "tegumentar", "glandula-sebacea", "Glândula Sebácea", "Sebaceous Gland", [...TX, "Complexo Pilossebáceo"],
-  { type: "sphere", r: 0.005 }, [HX + 0.008, HY, 0.022],
-  {
-    color: "#f2c14e",
-    description:
-      "Glândula anexa ao folículo piloso que secreta sebo — mistura oleosa que lubrifica o pelo e a pele e ajuda a impermeabilizá-la; sua obstrução está por trás da acne.",
-  },
-);
-
-// ---- Fios de pelo extras, só decorativos (mesma descrição do "pelo"), pra
-// a superfície do bloco não ficar com um pelo solitário — no desenho de
-// referência vários pelos saem da epiderme ao mesmo tempo. ----
-const EXTRA_HAIRS = [
-  [COL(1) + 0.01, CY - 0.03],
-  [COL(2) - 0.008, CY - 0.015],
-  [COL(4) + 0.006, CY - 0.025],
-];
-EXTRA_HAIRS.forEach(([x, y], i) => {
-  add(
-    "tegumentar", `pelo-extra-${i + 1}`, "Pelo (Haste Capilar)", "Hair Shaft",
-    [...TX, "Complexo Pilossebáceo"],
-    { type: "cylinder", rt: 0.0006, rb: 0.001, h: 0.02 }, [x, y, Z_TOP + 0.01],
-    {
-      color: "#4a3527",
-      rotation: [Math.PI / 2 + (i - 1) * 0.15, 0.15, 0],
-      description:
-        "Porção do pelo visível acima da superfície da pele, formada por células queratinizadas mortas; sua cor vem da melanina produzida no bulbo piloso.",
-    },
-  );
-});
-
-// ---- Coluna 2: glândula sudorípara (écrina) + ducto + poro ----
-const SX = COL(1);
-const SY = CY;
-add(
-  "tegumentar", "glandula-sudoripara", "Glândula Sudorípara (Écrina)", "Eccrine Sweat Gland", [...TX, "Glândula Sudorípara"],
-  { type: "sphere", r: 0.006 }, [SX, SY, -0.045],
-  {
-    color: "#4f7cff",
-    description:
-      "Porção secretora enovelada, na derme profunda/hipoderme; produz o suor (água + eletrólitos), principal mecanismo de termorregulação do corpo por evaporação.",
-  },
+  "papila-dermica", "Papila Dérmica", "Dermal Papilla",
+  "Projeção da derme para dentro da epiderme, aumentando a área de contato entre as duas camadas e alojando as alças capilares que nutrem a epiderme (que não tem vasos próprios).",
+  ["Derme"],
 );
 add(
-  "tegumentar", "ducto-sudoriparo", "Ducto Sudoríparo", "Sweat Duct", [...TX, "Glândula Sudorípara"],
-  { type: "cylinder", rt: 0.0012, rb: 0.0012, h: 0.083 }, [SX, SY, -0.0035],
-  {
-    color: "#7ba6ff",
-    rotation: ROT_Z,
-    description:
-      "Canal que conduz o suor da glândula, atravessando a derme e a epiderme, até a superfície da pele.",
-  },
+  "pelo", "Pelo (Haste Capilar)", "Hair Shaft",
+  "Porção do pelo visível acima da superfície da pele, formada por células queratinizadas mortas; sua cor vem da melanina produzida na papila do pelo.",
+  ["Complexo Pilossebáceo"],
 );
 add(
-  "tegumentar", "poro-sudoriparo", "Poro Sudoríparo", "Sweat Pore", [...TX, "Glândula Sudorípara"],
-  { type: "sphere", r: 0.0012 }, [SX, SY, Z_TOP + 0.0005],
-  {
-    color: "#a9c6ff",
-    description: "Abertura do ducto sudoríparo na superfície da epiderme, por onde o suor é liberado.",
-  },
-);
-
-// ---- Coluna 3: plexo vascular dérmico ----
-const VX = COL(2);
-const VY = CY - 0.01;
-add(
-  "tegumentar", "arteriola-dermica", "Arteríola Dérmica", "Dermal Arteriole", [...TX, "Plexo Vascular Dérmico"],
-  { type: "cylinder", rt: 0.0012, rb: 0.0012, h: 0.02 }, [VX - 0.005, VY, 0.008],
-  {
-    color: "#c1121f",
-    rotation: ROT_Z,
-    description: "Ramo arterial que leva sangue oxigenado ao plexo de capilares da derme, nutrindo a pele (a epiderme em si não tem vasos).",
-  },
+  "foliculo-piloso", "Folículo Piloso", "Hair Follicle",
+  "Invaginação da epiderme para dentro da derme/hipoderme que envolve e forma a raiz do pelo; suas células-tronco também participam da regeneração da epiderme após lesões.",
+  ["Complexo Pilossebáceo"],
 );
 add(
-  "tegumentar", "venula-dermica", "Vênula Dérmica", "Dermal Venule", [...TX, "Plexo Vascular Dérmico"],
-  { type: "cylinder", rt: 0.0012, rb: 0.0012, h: 0.02 }, [VX + 0.005, VY, 0.008],
-  {
-    color: "#3457d5",
-    rotation: ROT_Z,
-    description: "Ramo venoso que drena o sangue do plexo capilar dérmico de volta à circulação.",
-  },
+  "papila-do-pelo", "Papila do Pelo", "Papilla of Hair",
+  "Estrutura na base do folículo, rica em vasos sanguíneos, que nutre a matriz germinativa responsável por produzir o pelo.",
+  ["Complexo Pilossebáceo"],
 );
 add(
-  "tegumentar", "alca-capilar-dermica", "Alça Capilar Dérmica", "Dermal Capillary Loop", [...TX, "Plexo Vascular Dérmico"],
-  { type: "cylinder", rt: 0.0006, rb: 0.0006, h: 0.012 }, [VX, VY, 0.024],
-  {
-    color: "#e0464f",
-    rotation: ROT_Z,
-    description: "Alça de capilares que sobe até as papilas dérmicas, logo abaixo da epiderme, levando nutrientes e oxigênio para a base da epiderme por difusão.",
-  },
+  "musculo-eretor-do-pelo", "Músculo Eretor do Pelo", "Arrector Pili Muscle",
+  "Pequeno músculo liso ligado obliquamente ao folículo; ao se contrair (frio, medo), eleva o pelo e comprime a glândula sebácea — é o responsável pela pele arrepiada (piloereção).",
+  ["Complexo Pilossebáceo"],
 );
-
-// ---- Coluna 4: corpúsculo de Meissner (toque leve) ----
 add(
-  "tegumentar", "corpusculo-de-meissner", "Corpúsculo de Meissner", "Meissner's Corpuscle", [...TX, "Receptores Sensoriais"],
-  { type: "sphere", r: 0.003 }, [COL(3), CY - 0.015, 0.024],
-  {
-    color: "#34d399",
-    description:
-      "Receptor sensorial encapsulado logo abaixo da epiderme; detecta toque leve e vibrações de baixa frequência — muito numeroso na ponta dos dedos e nos lábios.",
-  },
+  "glandula-sebacea", "Glândula Sebácea", "Sebaceous Gland",
+  "Glândula anexa ao folículo piloso que secreta sebo — mistura oleosa que lubrifica o pelo e a pele e ajuda a impermeabilizá-la; sua obstrução está por trás da acne.",
+  ["Complexo Pilossebáceo"],
 );
-
-// ---- Coluna 5: corpúsculo de Pacini (pressão profunda) ----
 add(
-  "tegumentar", "corpusculo-de-pacini", "Corpúsculo de Pacini", "Pacinian Corpuscle", [...TX, "Receptores Sensoriais"],
-  { type: "sphere", r: 0.008 }, [COL(4), CY + 0.02, -0.045],
-  {
-    color: "#22d3ee",
-    description:
-      "Grande receptor sensorial encapsulado em camadas (como uma cebola), na hipoderme; detecta pressão profunda e vibrações de alta frequência.",
-  },
+  "glandula-sudoripara", "Glândula Sudorípara (Écrina)", "Eccrine Sweat Gland",
+  "Porção secretora enovelada, na derme profunda/hipoderme; produz o suor (água + eletrólitos), principal mecanismo de termorregulação do corpo por evaporação.",
+  ["Glândula Sudorípara"],
+);
+add(
+  "poro-sudoriparo", "Poro Sudoríparo", "Sweat Pore",
+  "Abertura do ducto da glândula sudorípara na superfície da epiderme, por onde o suor é liberado.",
+  ["Glândula Sudorípara"],
+);
+add(
+  "fibra-nervosa", "Fibra Nervosa", "Nerve Fiber",
+  "Prolongamento de neurônio que percorre a derme levando informação sensorial (toque, dor, temperatura) captada na pele até o sistema nervoso central.",
+  ["Inervação da Pele"],
+);
+add(
+  "terminacao-nervosa-tato", "Terminação Nervosa Sensorial (Tato)", "Sensory Nerve Ending for Touch",
+  "Receptor sensorial na junção derme-epiderme que detecta toque leve — muito numeroso na ponta dos dedos e nos lábios (tipo Meissner).",
+  ["Inervação da Pele"],
+);
+add(
+  "corpusculo-de-pacini", "Corpúsculo de Pacini", "Pacinian Corpuscle",
+  "Grande receptor sensorial encapsulado em camadas (como uma cebola), na hipoderme; detecta pressão profunda e vibrações de alta frequência.",
+  ["Inervação da Pele"],
+);
+add(
+  "vasos-sanguineos-linfaticos", "Vasos Sanguíneos e Linfáticos", "Blood and Lymph Vessels",
+  "Rede de vasos na derme que nutre a pele (a epiderme em si não tem vasos), participa da termorregulação e drena o excesso de líquido tecidual.",
+  ["Vascularização da Pele"],
+);
+add(
+  "arteria", "Artéria (Ramo Cutâneo)", "Artery (Cutaneous Branch)",
+  "Ramo arterial que entra na derme profunda e alimenta o plexo de vasos que nutre a pele.",
+  ["Vascularização da Pele"],
+);
+add(
+  "veia", "Veia (Ramo Cutâneo)", "Vein (Cutaneous Branch)",
+  "Ramo venoso que drena o sangue do plexo vascular da pele de volta à circulação.",
+  ["Vascularização da Pele"],
 );
-
-// ---- Coluna 6: lóbulos de tecido adiposo, espalhados pela hipoderme ----
-const FX = COL(5);
-const FY = CY + 0.01;
-const FAT_OFFSETS = [
-  [0, -0.02], [0.012, -0.03], [-0.01, -0.025],
-  [0.005, -0.04], [-0.008, -0.045], [0.01, -0.052],
-];
-FAT_OFFSETS.forEach(([dx, dz], i) => {
-  add(
-    "tegumentar", `adipocito-${i + 1}`, `Lóbulo de Tecido Adiposo ${i + 1}`, `Adipose Tissue Lobule ${i + 1}`,
-    [...TX, "Tecido Adiposo"],
-    { type: "sphere", r: 0.007 }, [FX + dx, FY, dz],
-    {
-      color: "#f7e08c",
-      description:
-        "Grupo de adipócitos (células de gordura) da hipoderme; armazena energia, isola termicamente e amortece impactos mecânicos.",
-    },
-  );
-});
 
 writeFileSync(
   path.resolve(__dirname, "manifest-tegumentar.json"),