synthesisui 0.16.416 → 0.16.417

package/dist/anatomy-from-sketch.js

@@ -212,6 +212,23 @@ function nameOfTag(tag) {
         .replace(/[^a-z0-9]+/g, "-")
         .replace(/^-|-$/g, "");
 }
+/**
+ * A PROP QUE ALIMENTA O ELEMENTO, na mesma grafia dos outros nomes de part.
+ *
+ * `contentFrom` é a expressão verbatim que o JSX escreve, então ela pode ser um identificador
+ * simples (`label`), um acesso (`item.title`) ou uma chamada. Só o que é um nome simples vira
+ * nome de part: um pedaço de expressão viraria uma classe ilegível no CSS compilado, e o nó cai
+ * em `box` como antes. Medido nos dois censos: os 19 do `codelevel-ui` são todos identificadores
+ * simples, e dos 534 do `frontend-hub` a maioria também.
+ */
+function nameOfProp(expression) {
+    const clean = expression.trim();
+    if (!/^[A-Za-z_$][\w$]*$/.test(clean))
+        return undefined;
+    const name = nameOfTag(clean);
+    /** `children` é a palavra do React, não do design dele - ali o nó é um slot, não uma part. */
+    return name && name !== "children" ? name : undefined;
+}
 /**
  * O NOME QUE ELE MESMO DEU AO ELEMENTO - a classe do CSS Module.
  *
@@ -535,6 +552,31 @@ consumedAt) {
         const hasKids = children.length > 0;
         let as;
         let name;
+        /**
+         * O CONTEÚDO QUE VEM DE UMA PROP DELE É CONTEÚDO - A1 da etapa 15 (dono, 11/09).
+         *
+         * O QUE ELE VIA: o `CapabilityCard` dele desenhado como três losangos `✧` soltos, e o `Beam`
+         * como um `✧`. A pergunta dele foi a certa: *"mesmo tendo a receita vindo de um componente
+         * funcionando, não consigo entender o motivo"*.
+         *
+         * A SUPOSIÇÃO QUE ERRAVA estava escrita três linhas abaixo, em voz alta: *"a leaf box with no
+         * content of its own is a drawn SHAPE (...) `icon` is the form for 'a bare shape with no
+         * text'"*. Em React o texto quase nunca é literal no JSX - ele vem de `{label}`, `{children}`,
+         * `{value}`. **"Sem texto literal" não significa "sem conteúdo": significa "o conteúdo vem de
+         * fora".**
+         *
+         * E O COLETOR JÁ SABIA. `contentFrom` é a expressão que aquele elemento escreve, e o contrato
+         * a descreve como *"a evidência de QUAL prop alimenta este elemento"*. A derivação nunca a
+         * consultava. MEDIDO nos dois censos congelados: **19 nós** no `codelevel-ui` e **534** no
+         * `frontend-hub` - e no sistema dele isso era 36 dos 94 nós chegando como `icon`, 20 deles
+         * sem ser glifo nenhum (`label`, `value`, `title`, `eyebrow`, `meta`).
+         *
+         * É EVIDÊNCIA, NUNCA EXECUÇÃO: em outro projeto a prop tem outro nome, e o que atravessa é
+         * que ESTE elemento é onde o conteúdo entra. Por isso a regra lê a PRESENÇA do campo, e a
+         * palavra dele só vira o nome da part.
+         */
+        const writesContent = typeof node.contentFrom === "string" &&
+            node.contentFrom.trim().length > 0;
         if (capitalised) {
             // A primitive's member name is the client's own word for the element.
             name = nameOfTag(tag);
@@ -551,10 +593,25 @@ consumedAt) {
             else if (form)
                 as = form;
             else
-                as = hasKids ? arrangement(classes) : node.text ? "text" : "icon";
+                as = hasKids
+                    ? arrangement(classes)
+                    : node.text || writesContent
+                        ? "text"
+                        : "icon";
         }
         else if (byTag) {
-            name = byTag.name;
+            /**
+             * A PALAVRA DELE VENCE O NOME QUE A TAG SUGERE (A5 da etapa 15).
+             *
+             * `BY_TAG` dá a um `<span>` o nome `text` e a um `<div>` nada - nomes corretos e MUDOS,
+             * que dizem o que a tag é e nada sobre o papel daquele nó no componente dele. Quando o
+             * JSX escreve `<span>{eyebrow}</span>`, `eyebrow` é a palavra que ele usa para aquilo, e
+             * é ela que precisa chegar na tela e no seletor. Perde só para um nome que também é dele
+             * e mais específico: uma classe de module, ou o membro de um componente que ele escreveu.
+             */
+            name =
+                (writesContent ? nameOfProp(String(node.contentFrom)) : undefined) ??
+                    byTag.name;
             if (NEUTRAL.has(lower)) {
                 /**
                  * A leaf box with no content of its own is a drawn SHAPE - a dot, a
@@ -564,7 +621,7 @@ consumedAt) {
                 as =
                     hasKids || node.slot
                         ? arrangement(classes)
-                        : node.text
+                        : node.text || writesContent
                             ? "text"
                             : "icon";
             }
@@ -572,7 +629,7 @@ consumedAt) {
                 as = byTag.as;
         }
         else {
-            as = hasKids ? arrangement(classes) : "icon";
+            as = hasKids ? arrangement(classes) : writesContent ? "text" : "icon";
         }
         /**
          * ANYTHING HOLDING ELEMENTS ARRANGES THEM - the contract gives children to
@@ -598,9 +655,16 @@ consumedAt) {
             /**
              * `box` VIROU A ÚLTIMA OPÇÃO, não a primeira - ver `nameOfModule`. Um nó com
              * classe de module tem nome, e o nome é dele.
+             *
+             * E A PROP QUE ALIMENTA O ELEMENTO VEM ANTES DE `box` (A5 da etapa 15). Os dois nós de
+             * texto do `CapabilityCard` dele chegavam como `box` e `box` - dois irmãos com o mesmo
+             * nome, que é o mesmo que não ter nome. `contentFrom: "label"` é a palavra que o CÓDIGO
+             * DELE escreve, e ela é melhor que qualquer coisa que a gente derivasse da tag.
              */
             name =
-                nameOfModule(node.moduleClass) ?? "box";
+                nameOfModule(node.moduleClass) ??
+                    (writesContent ? nameOfProp(String(node.contentFrom)) : undefined) ??
+                    "box";
         /**
          * A NODE WHOSE CONTENT IS THE CALLER'S is a slot, and it keeps its own name
          * and classes - the border and the hover on a `<tr>{children}</tr>` are real

package/dist/install-marks.js

@@ -793,7 +793,7 @@ export const CHECKER_SINCE = "0.16.413";
  * deveriam estar lá. Quem tem censo gravado precisa de um `sync` para a fila de trabalho dele ser a
  * real; ver o livro-razão de `corpus.spec.ts`.
  */
-export const READER_SINCE = "0.16.408";
+export const READER_SINCE = "0.16.417";
 /**
  * O QUE ESTÁ INSTALADO AQUI FICOU PARA TRÁS - e as DUAS condições que fazem isso ser verdade.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "synthesisui",
-  "version": "0.16.416",
+  "version": "0.16.417",
   "description": "Bring SynthesisUI design systems into any project - tokens, typed components, whole pages and an agent-ready CLAUDE.md manifest.",
   "type": "module",
   "bin": {