create-nodebuilderjs 0.2.0 → 0.2.5

package/template/src/components/Tasks.tsx

@@ -0,0 +1,54 @@
+import {
+  Button, Card, Checkbox, Column, Dialog, For, Icon, Row, Show, Spacer, Text, TextField, createSignal, theme,
+} from "@nodebuilderjs/core";
+import { list, plus } from "../icons.js";
+import type { State } from "../state.js";
+
+export function Tasks(props: { state: State }) {
+  const { tasks, pending, add, clearCompleted } = props.state;
+  const [text, setText] = createSignal("");
+  const [confirming, setConfirming] = createSignal(false);
+  const submit = () => add(text()) && setText("");
+  const done = () => tasks().filter((t) => t.done()).length;
+
+  return (
+    <Card gap={12}>
+      <Row gap={8} align="center" color={() => theme.text.secondary}>
+        <Icon svg={list} size={16} />
+        <Text bold>Tasks</Text>
+        <Spacer />
+        <Text fontSize={12}>{() => `${pending()} pending`}</Text>
+      </Row>
+      <Row gap={8}>
+        <TextField grow={1} value={text} onInput={setText} onSubmit={submit} placeholder="New task" />
+        <Button variant="primary" onClick={submit} disabled={() => !text().trim()}>
+          <Icon svg={plus} size={16} />
+          <Text>Add</Text>
+        </Button>
+      </Row>
+      <Column gap={8}>
+        {/* For is keyed by reference: each task keeps its state when the list is reordered. */}
+        <For each={tasks} fallback={<Text color={() => theme.text.secondary}>Nothing here.</Text>}>
+          {(t) => <Checkbox checked={t.done} onChange={t.mark} label={t.title} />}
+        </For>
+      </Column>
+      <Show when={() => done() > 0}>
+        <Row>
+          <Button label="Clear completed" variant="flat" onClick={() => setConfirming(true)} />
+        </Row>
+      </Show>
+      {/* A modal on top of the window: Escape or a click outside calls onClose. */}
+      <Dialog
+        open={confirming}
+        onClose={() => setConfirming(false)}
+        title="Clear completed tasks?"
+        actions={[
+          <Button label="Cancel" variant="flat" onClick={() => setConfirming(false)} />,
+          <Button label="Clear" variant="danger" onClick={() => (clearCompleted(), setConfirming(false))} />,
+        ]}
+      >
+        <Text color={() => theme.text.secondary}>{() => `${done()} ${done() === 1 ? "task" : "tasks"} will be removed.`}</Text>
+      </Dialog>
+    </Card>
+  );
+}

package/template/src/icons.ts

@@ -0,0 +1,11 @@
+// SVG icons (drawn for this template). For more icons, `bun add lucide-static` and
+// `import x from "lucide-static/icons/x.svg" with { type: "text" }`: see the
+// nodebuilder-icons skill.
+const svg = (body: string) =>
+  `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${body}</svg>`;
+
+export const sparkle = svg('<path d="M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z"/><path d="M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8z"/>');
+export const plus = svg('<path d="M12 5v14M5 12h14"/>');
+export const list = svg('<path d="M9 6h11M9 12h11M9 18h11"/><circle cx="4.5" cy="6" r="1"/><circle cx="4.5" cy="12" r="1"/><circle cx="4.5" cy="18" r="1"/>');
+export const chart = svg('<path d="M4 20V10M10 20V4M16 20v-7M22 20H2"/>');
+export const pointer = svg('<path d="M5 3l14 8-6 2-3 6z"/>');

package/template/src/state.ts

@@ -0,0 +1,50 @@
+import { createMemo, createSignal } from "@nodebuilderjs/core";
+
+export interface Task {
+  id: number;
+  title: string;
+  done: () => boolean;
+  mark: (done: boolean) => void;
+}
+
+/**
+ * The app state in one place: signals and actions. Each <App /> creates its own (so do the
+ * tests), and the components receive it through props.
+ */
+export function createState() {
+  const [clicks, setClicks] = createSignal(0);
+  // One point per change, for the activity chart.
+  const [history, setHistory] = createSignal<{ step: number; clicks: number; pending: number }[]>([]);
+  const [tasks, setTasks] = createSignal<Task[]>([]);
+  let nextId = 1;
+
+  const pending = createMemo(() => tasks().filter((t) => !t.done()).length);
+  const record = () =>
+    setHistory((h) => [...h.slice(-29), { step: h[h.length - 1]!.step + 1, clicks: clicks(), pending: pending() }]);
+
+  const newTask = (title: string): Task => {
+    const [done, setDone] = createSignal(false);
+    return { id: nextId++, title, done, mark: (v) => (setDone(v), record()) };
+  };
+  setTasks([newTask("Read the README"), newTask("Write a component")]);
+  setHistory([{ step: 0, clicks: 0, pending: pending() }]);
+
+  return {
+    clicks,
+    history,
+    tasks,
+    pending,
+    click: () => (setClicks((c) => c + 1), record()),
+    reset: () => (setClicks(0), record()),
+    add: (title: string) => {
+      const text = title.trim();
+      if (!text) return false;
+      setTasks((ts) => [...ts, newTask(text)]);
+      record();
+      return true;
+    },
+    clearCompleted: () => (setTasks((ts) => ts.filter((t) => !t.done())), record()),
+  };
+}
+
+export type State = ReturnType<typeof createState>;

package/template/test/App.test.tsx

@@ -1,14 +1,59 @@
-import { expect, test } from "bun:test";
-import { click, findByText, mount } from "@nodebuilderjs/core/testing";
+import { afterEach, expect, test } from "bun:test";
+import { colorScheme, setTheme } from "@nodebuilderjs/core";
+import { findAll, findByText, interact, mount } from "@nodebuilderjs/core/testing";
 import { App } from "../src/App.js";
 
-test("o botão conta os cliques", () => {
-  const { root } = mount(() => <App />);
-  expect(findByText(root, "Você clicou 0 vezes")).toBeDefined();
+// Tests run without a window. interact() delivers mouse and keyboard like the real app.
 
-  click(findByText(root, "Clique aqui")!);
-  expect(findByText(root, "Você clicou 1 vez")).toBeDefined();
+afterEach(() => setTheme("light"));
 
-  click(findByText(root, "Zerar")!);
-  expect(findByText(root, "Você clicou 0 vezes")).toBeDefined();
+function setup() {
+  const app = mount(() => <App />, { width: 800, height: 900 });
+  const ui = interact(app.root);
+  const click = (text: string) => {
+    const target = findByText(app.root, text)!;
+    ui.press(target);
+    ui.release(target);
+    app.relayout();
+  };
+  return { ...app, ui, click };
+}
+
+test("the button counts clicks", () => {
+  const { root, click } = setup();
+  expect(findByText(root, "You clicked 0 times")).toBeDefined();
+  click("Click me");
+  expect(findByText(root, "You clicked 1 time")).toBeDefined();
+  click("Reset");
+  expect(findByText(root, "You clicked 0 times")).toBeDefined();
+});
+
+test("add, complete and clear tasks, confirming in a dialog", () => {
+  const { root, ui, relayout, click } = setup();
+  expect(findByText(root, "2 pending")).toBeDefined();
+
+  // Type in the field and confirm with Enter; empty text does not become a task.
+  ui.press(findAll(root, (n) => n.label === "TextField")[0]!);
+  ui.type("Write a test");
+  ui.key("Return");
+  ui.key("Return");
+  relayout();
+  expect(findByText(root, "Write a test")).toBeDefined();
+  expect(findByText(root, "3 pending")).toBeDefined();
+
+  click("Read the README"); // the task's text also ticks the box
+  expect(findByText(root, "2 pending")).toBeDefined();
+
+  click("Clear completed");
+  expect(findByText(root, "1 task will be removed.")).toBeDefined();
+  click("Clear");
+  expect(findByText(root, "Read the README")).toBeUndefined();
+  expect(findByText(root, "Clear completed tasks?")).toBeUndefined();
+  expect(findByText(root, "2 pending")).toBeDefined();
+});
+
+test("the toggle switches to the dark theme", () => {
+  const { click } = setup();
+  click("Dark");
+  expect(colorScheme()).toBe("dark");
 });

package/template/.agents/skills/nodebuilder-desempenho/SKILL.md

@@ -1,36 +0,0 @@
----
-name: nodebuilder-desempenho
-description: Medir e melhorar o desempenho de apps nodebuilder (fps, CPU, memória) e evitar padrões lentos em listas grandes, atualizações frequentes e animações. Use quando o app estiver lento, travando, usando muita CPU/memória, ou ao criar listas com centenas de itens, dados ao vivo ou animações.
----
-
-# Desempenho
-
-## Medir
-
-```sh
-NB_STATS=1 bun src/main.tsx      # por segundo: fps, ms de estado/layout/pintura/nativo, nós, memória
-NB_MAX_FPS=60 bun src/main.tsx   # teto de fps (padrão 120); também run(app, { maxFps: 60 })
-```
-
-Parado, o app não desenha nada (0% de CPU). Mudanças de estado agendam um frame; várias
-mudanças antes dele saem juntas no mesmo frame.
-
-## Padrões
-
-- **Listas grandes:** sempre dentro de `<Scroll>`; o que está fora da área visível não é
-  posicionado nem desenhado. Mesmo assim cada item vira nós: com milhares, filtre ou pagine.
-- **`<For>` é keyed por referência:** recriar os objetos (`lista.map((x) => ({ ...x }))`)
-  destrói e recria todas as linhas. Mantenha as referências e mude só o que mudou; para
-  campos que mudam muito, guarde um signal dentro do item (`{ id, cpu: createSignal(0) }`).
-- **Atualize o mínimo:** um signal por valor que muda, e funções finas nos props
-  (`text={() => fmt(item.cpu())}`) em vez de um signal gigante com o estado todo.
-- **Várias mudanças juntas:** `batch(() => { setA(1); setB(2); })` gera um único frame e
-  roda os effects uma vez.
-- **Animação e dados ao vivo:** use `requestAnimationFrame(cb)` (ritmado pela tela), não
-  `setInterval` curto. Para parar, simplesmente não peça o próximo frame.
-- **Texto:** medidas ficam em cache; textos que mudam todo frame (contadores, relógios)
-  custam pouco, mas evite gerar milhares de strings novas por frame.
-- **Imagens:** decodificar é caro e síncrono; reutilize o mesmo arquivo (é compartilhado) e
-  use arquivos do tamanho exibido.
-- Trabalho pesado de CPU (parse de arquivos grandes, cálculos) trava a interface: divida em
-  pedaços com `setTimeout(..., 0)` ou use um `Worker`.

package/template/.agents/skills/nodebuilder-desenho/SKILL.md

@@ -1,54 +0,0 @@
----
-name: nodebuilder-desenho
-description: Desenho livre no nodebuilder com o widget Canvas (linhas, polígonos, arcos, medidores, sparklines, anotações, visualizações sob medida). Use para formas que não são retângulos e gráficos que @nodebuilderjs/core/charts não cobre, no lugar do <canvas> do navegador ou D3. Para gráficos de linha, área, barra e pizza comuns, use a skill nodebuilder-graficos.
----
-
-# Desenho com `<Canvas>`
-
-```tsx
-import { Canvas, createSignal, theme } from "@nodebuilderjs/core";
-
-const [dados, setDados] = createSignal([12, 40, 33, 70, 55, 90]);
-
-<Canvas height={160} draw={(g) => {
-  const v = dados();                                      // signals lidos aqui redesenham o canvas
-  const x = (i: number) => (i / (v.length - 1)) * g.width;
-  const y = (n: number) => g.height - (n / 100) * g.height;
-  for (let n = 0; n <= 100; n += 25) g.line(0, y(n), g.width, y(n), "#0000001a", 1, "butt");  // grade
-  const pts = v.flatMap((n, i) => [x(i), y(n)]);
-  g.polygon([0, g.height, ...pts, g.width, g.height], "#3584e433");   // área
-  g.polyline(pts, theme.accent.base, 2);                              // linha
-  g.circle(x(v.length - 1), y(v[v.length - 1]!), 4, theme.accent.base);
-  g.text("máx 100", 4, 0, theme.text.secondary, 11);
-}} />
-```
-
-## API (`g`)
-
-| Método | O quê |
-|---|---|
-| `g.width`, `g.height` | tamanho do canvas (dentro do `padding`) |
-| `rect(x, y, w, h, cor, raio?)` | retângulo (barras) |
-| `line(x0, y0, x1, y1, cor, largura = 1, ponta = "round")` | segmento; ponta `round`, `butt` (reta) ou `square` |
-| `polyline(pontos, cor, largura = 1, { cap, closed })` | linha por vários pontos `[x0, y0, x1, y1, ...]`, junções redondas |
-| `polygon(pontos, cor)` | polígono preenchido (côncavo pode; cruzando a si mesmo não desenha) |
-| `circle(cx, cy, raio, cor)` | disco |
-| `arc(cx, cy, raioExterno, raioInterno, início, varredura, cor)` | fatia (interno 0) ou anel; radianos, 0 = cima, sentido horário |
-| `text(texto, x, y, cor, tamanho?, negrito?)`, `measureText(texto, tamanho?)` | rótulos; `y` é o topo da linha |
-
-## Regras
-
-- Dê tamanho ao canvas: `width`/`height` ou `grow`. Sem tamanho, `draw` não roda.
-- Coordenadas locais, com `y` para baixo. Inverta para gráficos: `g.height - valor * escala`.
-- `draw` deve só desenhar: nada de criar signals, effects ou chamar `set` lá dentro.
-- O canvas redesenha quando um signal lido em `draw` muda ou o tamanho muda; a geometria
-  fica gravada, então outras partes da janela redesenhando não custam nada aqui.
-- Dados ao vivo: atualize o signal com `requestAnimationFrame`; milhares de pontos
-  funcionam (5000 pontos de linha + área a ~120 fps).
-- Pizza/rosca: some as fatias em radianos (`fração * 2 * Math.PI`); um pequeno vão
-  (`- 0.03` na varredura) separa as fatias visualmente.
-- Cores translúcidas em `polyline` escurecem nas junções: prefira cores opacas para linhas
-  e translúcidas para áreas.
-- Interação (tooltip, clique num ponto, arrastar): use `onPointerMove`/`onClick` no próprio
-  `Canvas`; `e.localX`/`e.localY` estão nas mesmas coordenadas do desenho (o `padding`
-  desloca: subtraia-o).

package/template/.agents/skills/nodebuilder-empacotar/SKILL.md

@@ -1,37 +0,0 @@
----
-name: nodebuilder-empacotar
-description: Gerar e distribuir o app nodebuilder (AppImage, .deb, .rpm, .tar.gz) com nodebuilder package, incluir arquivos (imagens, dados) no executável e configurar nome, ícone e app id. Use ao preparar uma versão para instalar, ao mudar o nome/ícone do app ou quando o app empacotado se comporta diferente do bun run dev.
----
-
-# Empacotar
-
-```sh
-bun run package        # = nodebuilder package src/main.tsx --title "..." --app-id ...
-bunx nodebuilder package src/main.tsx --targets deb,rpm --icon assets/icone.svg --version 1.2.0
-bunx nodebuilder package --help
-```
-
-Gera em `dist/` um executável único (Bun + app + núcleo nativo, ~31 MB compactado) dentro de
-AppImage, `.deb`, `.rpm` e `.tar.gz`, com atalho no menu e ícone. Roda em distros com glibc
-2.34+ (Ubuntu 22.04+, Debian 12+, Fedora, RHEL 9+).
-
-## Regras
-
-- **Arquivos do app** (imagens, JSON, sons) entram no executável só se forem importados com
-  `with { type: "file" }` (o import vira o caminho). `readFileSync("./dados.json")` com
-  caminho solto funciona no dev e **falha no pacote**. Para JSON, `import dados from
-  "./dados.json"` também embute.
-- O `appId` da `<Window>` precisa ser igual ao `--app-id` (o template já faz isso); senão o
-  ícone e o agrupamento na barra de tarefas não funcionam.
-- `--icon`: `.svg` ou PNG 256x256. `--name` é o nome do executável/pacote (minúsculas).
-- Bibliotecas do sistema (Wayland, X11, EGL, FreeType, HarfBuzz, fontconfig) são
-  dependências declaradas dos pacotes, nunca embutidas. `libheif` (só para AVIF/HEIC) é
-  apenas sugerida.
-- Dados do usuário: salve em `~/.local/share/<app>` (`process.env.XDG_DATA_HOME`), nunca
-  ao lado do executável (em `/usr/bin` não dá para escrever).
-
-## Verificar
-
-- Rode o executável gerado fora da pasta do projeto (`cd / && caminho/do/app`) para pegar
-  arquivos que só existiam no disco do desenvolvimento.
-- AppImage: `chmod +x dist/*.AppImage && ./dist/*.AppImage`.

package/template/.agents/skills/nodebuilder-graficos/SKILL.md

@@ -1,87 +0,0 @@
----
-name: nodebuilder-graficos
-description: Gráficos de linha, área, barra, composto e pizza/rosca no nodebuilder com @nodebuilderjs/core/charts, que usa a mesma API do Recharts. Use ao criar dashboards, relatórios, séries temporais, comparações por categoria ou participação (pizza), e sempre que pensaria em usar Recharts, Chart.js ou Victory.
----
-
-# Gráficos com `@nodebuilderjs/core/charts`
-
-Já vem no `@nodebuilderjs/core` (não instale nada); só entra no app se for importado.
-
-```tsx
-import { createSignal, theme } from "@nodebuilderjs/core";
-import {
-  Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, Legend, Line, LineChart, Pie, PieChart, XAxis, YAxis,
-} from "@nodebuilderjs/core/charts";
-
-const [vendas] = createSignal([
-  { mes: "jan", receita: 120, meta: 100 },
-  { mes: "fev", receita: 150, meta: 110 },
-  { mes: "mar", receita: 90, meta: 120 },
-]);
-const canais = [{ nome: "Loja", valor: 42 }, { nome: "Site", valor: 31 }];
-
-export const graficos = () => (
-  <>
-    <LineChart data={vendas} height={240}>
-      <CartesianGrid vertical={false} />
-      <XAxis dataKey="mes" />
-      <YAxis tickFormatter={(v) => `R$ ${v}`} />
-      <Line dataKey="receita" name="Receita" />
-      <Line dataKey="meta" name="Meta" stroke="#e5a50a" type="monotone" dot={false} />
-      <Legend />
-    </LineChart>
-    <BarChart data={vendas} height={200}>
-      <XAxis dataKey="mes" />
-      <YAxis />
-      <Bar dataKey="receita" fill={theme.accent.base} radius={3} />
-    </BarChart>
-    <AreaChart data={vendas} height={160}>
-      <YAxis domain={[0, 200]} />
-      <Area dataKey="receita" type="monotone" />
-    </AreaChart>
-    <PieChart height={220}>
-      <Pie data={canais} dataKey="valor" nameKey="nome" innerRadius="50%" paddingAngle={2}>
-        <Cell fill="#3584e4" />
-        <Cell fill="#26a269" />
-      </Pie>
-      <Legend />
-    </PieChart>
-  </>
-);
-```
-
-## O que é suportado
-
-| Componente | Props |
-|---|---|
-| `LineChart`, `AreaChart`, `BarChart`, `ComposedChart` (mistura) | `data` (array ou signal), `height` (240), `width` ou `grow` e as props de estilo |
-| `Line` | `dataKey`, `name`, `stroke`, `strokeWidth` (2), `strokeDasharray` (`"6 4"`), `dot` (true), `type` (`linear`/`monotone`) |
-| `Area` | `dataKey`, `name`, `stroke`, `fill`, `fillOpacity` (0,25), `type`, `stackId` |
-| `Bar` | `dataKey`, `name`, `fill`, `radius`, `stackId`, `label` (true ou `(valor) => texto`) |
-| `XAxis` | `dataKey`, `tickFormatter`, `hide` |
-| `YAxis` | `domain={[min, max]}`, `tickCount`, `tickFormatter`, `hide` |
-| `CartesianGrid` | `horizontal`, `vertical`, `stroke`, `strokeDasharray` |
-| `PieChart` + `Pie` | `data`, `dataKey`, `nameKey`, `innerRadius`, `outerRadius` (px ou `"80%"`), `paddingAngle` (graus), `label` (true ou `({ name, value, percent }) => texto`); `<Cell fill>` por fatia |
-| `Tooltip` | `formatter(valor, nome)`, `labelFormatter(categoria)`; linha-guia na categoria sob o mouse (na pizza: a fatia) |
-| `Legend` | sem props (embaixo, centralizada) |
-
-`dataKey` é o nome do campo ou uma função `(linha) => valor`.
-
-## Diferenças do Recharts
-
-- **Sem `ResponsiveContainer`:** o gráfico já ocupa a largura do pai; dê `height`.
-- Séries com o mesmo `stackId` se empilham (barras numa coluna só, áreas uma sobre a outra);
-  o eixo y considera os totais.
-- O eixo x omite rótulos que se sobreporiam, mantendo o último (como `interval="preserveEnd"`).
-- Não existem ainda: `Brush`, `ReferenceLine`, `ScatterChart`, `RadarChart`, eixos
-  secundários, animações; em `Line`, o `label`.
-- Pizza começa no topo e gira no sentido horário (`startAngle`/`endAngle` não existem); os
-  rótulos ficam fora das fatias, então deixe `outerRadius` em ~70% para caberem.
-- Cores: sem `stroke`/`fill`, cada série pega a próxima cor da paleta (a primeira é
-  `theme.accent.base`).
-- Para algo fora disso, desenhe com `<Canvas>` (skill `nodebuilder-desenho`).
-
-## Desempenho
-
-Mudar o signal de `data` redesenha só aquele gráfico. Atualizar a cada frame (dados ao
-vivo com `requestAnimationFrame`) funciona; centenas de pontos por série são tranquilos.

package/template/.agents/skills/nodebuilder-icones/SKILL.md

@@ -1,53 +0,0 @@
----
-name: nodebuilder-icones
-description: Ícones e SVG no nodebuilder com o widget Icon, usando Lucide (lucide-static ou lucide) e Phosphor (@phosphor-icons/core). Use ao adicionar ícones a botões, menus, barras laterais ou listas, ao escolher uma biblioteca de ícones, ou ao mostrar qualquer arquivo .svg.
----
-
-# Ícones
-
-```sh
-bun add lucide-static              # arquivos .svg do Lucide
-bun add lucide                     # ou: os mesmos ícones como dados (import { Camera } from "lucide")
-bun add @phosphor-icons/core       # Phosphor: assets/<peso>/<nome>.svg
-```
-
-```tsx
-import { Button, Icon, Row, Text, createSignal, theme } from "@nodebuilderjs/core";
-import camera from "lucide-static/icons/camera.svg" with { type: "text" };
-import heart from "@phosphor-icons/core/assets/duotone/heart-duotone.svg" with { type: "text" };
-import { Star } from "lucide";
-
-const [ativo] = createSignal(false);
-
-<Icon svg={camera} />                                  // 20 px, cor do texto ao redor
-<Icon svg={heart} size={32} color="#e01b24" />
-<Icon svg={Star} size={16} strokeWidth={1.5} />        // espessura do traço (ícones de contorno)
-<Button variant="primary"><Icon svg={Star} size={16} /><Text>Favoritar</Text></Button>
-<Row color={() => (ativo() ? theme.accent.base : theme.text.secondary)}>
-  <Icon svg={camera} /><Text>Câmera</Text>              {/* ícone e texto mudam de cor juntos */}
-</Row>
-```
-
-## Regras
-
-- **Nunca** use `lucide-react`, `lucide-solid`, `@phosphor-icons/react`, `react-icons` ou
-  `@heroicons/react`: eles exigem React/DOM. Use os pacotes acima.
-- Importe arquivos `.svg` com `with { type: "text" }` (o import vira o texto do SVG e o
-  `nodebuilder package` o embute). `with { type: "file" }` (caminho) também funciona.
-- `svg` aceita: texto do SVG, caminho de um `.svg` ou os dados do pacote `lucide`. Pode ser
-  uma função (`svg={() => (aberto() ? chevronUp : chevronDown)}`).
-- `size` é a altura em px lógicos (padrão 20, `theme.icon.size`); a largura segue o
-  `viewBox`. A cor vem de `color` no próprio `Icon` ou é herdada de um pai, como no `Text`.
-- Trocar a cor é de graça (ícones de uma cor são tingidos na GPU); trocar o tamanho
-  rasteriza de novo (~0,5 ms). Ficam nítidos em telas HiDPI.
-- Pesos do Phosphor: `thin`, `light`, `regular`, `bold`, `fill`, `duotone` (pastas em
-  `assets/`; nomes com o sufixo do peso, exceto `regular`: `heart.svg`, `heart-fill.svg`).
-
-## Limites do SVG
-
-Suportado: `path` (com arcos e curvas), `rect`, `circle`, `ellipse`, `line`, `polyline`,
-`polygon`, `g`, `transform`, `fill`/`stroke` (cores, `currentColor`), espessura, pontas,
-junções, `fill-rule`, opacidades e `style=""` inline.
-Não suportado (o resto do desenho aparece): gradientes, padrões, texto, filtros, máscaras,
-recortes, `<use>`, tracejado e `<style>`. Logos e ilustrações assim: exporte um PNG 2x e
-use `Image`.

package/template/.agents/skills/nodebuilder-imagens/SKILL.md

@@ -1,50 +0,0 @@
----
-name: nodebuilder-imagens
-description: Mostrar imagens (PNG, JPEG, WebP, AVIF, HEIC) com o widget Image do nodebuilder e incluir os arquivos no app empacotado. Use ao adicionar fotos, logos, avatares, miniaturas ou qualquer arquivo de imagem à interface. Para ícones e SVG, use a skill nodebuilder-icones.
----
-
-# Imagens
-
-```tsx
-import { Image } from "@nodebuilderjs/core";
-import logo from "./assets/logo.png" with { type: "file" };
-
-<Image src={logo} width={64} />                       // altura segue a proporção
-<Image src={foto} width={200} height={120} fit="cover" radius={12} />
-<Image src={() => avatarDe(usuario())} width={32} height={32} radius={16} opacity={0.9} />
-```
-
-## Regras
-
-- **Importe arquivos com `with { type: "file" }`.** O import vira o caminho do arquivo, e o
-  `nodebuilder package` embute a imagem no executável. `new URL("./x.png", import.meta.url)`
-  e caminhos soltos funcionam no `bun run dev`, mas **quebram no app empacotado**.
-- `src` aceita: caminho (relativo ao diretório atual), `URL` `file:`, bytes do arquivo
-  (`Uint8Array`, ex.: de um `fetch`) ou pixels `{ width, height, data }` (RGBA 8 bits).
-  Pode ser uma função: trocar o `src` libera a imagem antiga.
-- Tamanho: sem `width`/`height`, usa os pixels do arquivo (1 pixel = 1 px lógico). Com só um
-  dos dois, o outro segue a proporção. Para telas HiDPI, use um arquivo 2x maior e fixe o
-  tamanho (`width={64}` para um PNG de 128 px).
-- `fit`: `contain` (padrão, imagem inteira centralizada), `cover` (preenche e corta), `fill`
-  (estica). `radius` arredonda; `opacity` vai de 0 a 1.
-- O mesmo arquivo em vários lugares é decodificado uma vez; a memória é liberada quando o
-  último `Image` sai da tela.
-- Arquivo que não carrega: aviso no console e nada desenhado (o app não quebra).
-
-## Formatos
-
-| Formato | Como | Observação |
-|---|---|---|
-| PNG, JPEG, WebP | decodificados em TypeScript | sempre funcionam; JPEG respeita a orientação do EXIF |
-| AVIF, HEIC | biblioteca do sistema `libheif` | sem ela, só esses dão erro ("needs libheif"); o pacote `.deb`/`.rpm` a sugere, mas não instala. Prefira WebP/PNG/JPEG para imagens do próprio app |
-| SVG | pelo widget `Icon` (skill `nodebuilder-icones`) | subconjunto para ícones; ilustrações com gradiente/texto: exporte PNG 2x |
-| GIF animado, vídeo | não suportado | |
-
-## Cuidados
-
-- A decodificação é síncrona: uma foto de 4 megapixels leva ~0,1 s e trava a interface
-  nesse meio-tempo. Reduza imagens grandes antes de colocar no app (ex.: miniaturas).
-- Imagens muito reduzidas na tela ficam serrilhadas (sem mipmaps): use arquivos perto do
-  tamanho exibido.
-- Em `bun test`, `Image` funciona sem janela (as texturas são simuladas); AVIF/HEIC
-  precisam do addon nativo e da libheif.

package/template/.agents/skills/nodebuilder-sem-react/SKILL.md

@@ -1,48 +0,0 @@
----
-name: nodebuilder-sem-react
-description: Tradução de hábitos de React, DOM, CSS e bibliotecas web para o nodebuilder, e quais pacotes npm funcionam. Use antes de instalar qualquer biblioteca de UI, ícones, componentes, estado ou estilo (lucide-react, MUI, Tailwind, styled-components, react-*, solid-js...), ao escrever useState/useEffect/className/div/onChange, ou ao portar código React/Solid/HTML para este app.
----
-
-# Vindo do React (ou da web)
-
-O nodebuilder desenha a interface com a GPU, sem navegador: **não existe DOM, CSS, React
-nem Solid**. O JSX parece o de sempre, mas os elementos são os widgets do
-`@nodebuilderjs/core`.
-
-## Tradução direta
-
-| Na web / React | No nodebuilder |
-|---|---|
-| `useState(0)` | `const [n, setN] = createSignal(0)`; leia com `n()` |
-| `useMemo` | `createMemo(() => ...)` |
-| `useEffect(() => ..., [deps])` | `createEffect(() => ...)` (deps automáticas) + `onCleanup` |
-| re-render do componente | não existe: o componente roda **uma vez** |
-| `{count}` em JSX | `{count}` (a função, não `count()`), senão fica fixo |
-| `style={{ padding: 8 }}`, `className` | props: `padding={8}`, `background="#fff"` |
-| `div`, `span`, `p`, `h1` | `Column`, `Row`, `Box`, `Text fontSize={24} bold` |
-| `onChange` de input | `TextField value={v} onInput={setV}` |
-| `list.map(...)` em JSX | `<For each={list}>{(item) => ...}</For>` |
-| `cond && <X/>` | `<Show when={() => cond()}><X/></Show>` |
-| `useContext` | módulos com signals exportados (estado global simples) |
-| CSS `:hover` | `onPointerEnter`/`onPointerLeave` + signal |
-| `fetch`, `fs`, timers | funcionam (APIs do Bun/Node); atualize signals com o resultado |
-
-## Bibliotecas npm
-
-- **Funcionam:** lógica pura sem DOM (date-fns, zod, lodash, clientes HTTP, SQLite do Bun,
-  parsers). Ícones em SVG puro com o widget `Icon`: `lucide-static`, `lucide` (os dados,
-  não o `createIcons()`) e `@phosphor-icons/core` (skill `nodebuilder-icones`).
-- **Não funcionam:** tudo que renderiza React/Solid/Vue ou mexe no DOM: `lucide-react`,
-  `lucide-solid`, `@phosphor-icons/react`, MUI, Chakra, shadcn/ui, Radix, Tailwind,
-  styled-components, react-router, bibliotecas de gráficos em canvas/SVG do navegador.
-- Gráficos: use `@nodebuilderjs/core/charts` (mesma API do Recharts; skill
-  `nodebuilder-graficos`) ou desenhe com `<Canvas>` (skill `nodebuilder-desenho`). Recharts,
-  Chart.js e D3 precisam do DOM e não funcionam.
-- Na dúvida: se o pacote importa `react`, `react-dom`, `solid-js/web` ou usa `document`,
-  ele não serve aqui.
-
-## Erros comuns
-
-- Ler o signal no corpo do componente (`const x = count();`) e esperar que atualize.
-- Desestruturar props reativas (`const { value } = props`) e perder a função.
-- Colocar `createSignal` dentro de um effect para "resetar" estado: crie fora e use `set`.

package/template/.agents/skills/nodebuilder-testes/SKILL.md

@@ -1,56 +0,0 @@
----
-name: nodebuilder-testes
-description: Escrever e depurar testes de apps nodebuilder com bun test, sem abrir janela (mount, findByText, click, interact para mouse e teclado, layout, debugTree). Use ao criar testes, ao verificar uma mudança de comportamento ou layout, ou quando um teste de componente falha.
----
-
-# Testes sem janela
-
-`bun test` roda os arquivos de `test/`. Nada abre janela: `mount` monta a árvore com
-métricas de texto falsas (**8 px por caractere, linha de 20 px**), então o layout é
-determinístico.
-
-```tsx
-import { expect, test } from "bun:test";
-import { click, findAll, findByText, mount } from "@nodebuilderjs/core/testing";
-import { debugTree } from "@nodebuilderjs/core";
-import { App } from "../src/App.js";
-
-test("adiciona uma tarefa", () => {
-  const { root, relayout, dispose } = mount(() => <App />, { width: 800, height: 600 });
-  click(findByText(root, "Adicionar")!);          // sobe até o pai com onClick (o Button)
-  expect(findByText(root, /1 tarefa/)).toBeDefined();
-  relayout();                                     // recalcula posições após mudanças
-  const item = findByText(root, "Nova tarefa")!;
-  expect(item.y).toBeGreaterThan(0);
-  dispose();                                      // descarta effects e signals do app
-});
-```
-
-## API (`@nodebuilderjs/core/testing`)
-
-- `mount(view, size?)` → `{ root, relayout, dispose }`. Layout feito uma vez no `mount`;
-  chame `relayout()` antes de checar `x`, `y`, `width`, `height` depois de mudar estado.
-- `findByText(root, "texto" | /regex/)`: primeiro `Text` cujo conteúdo inteiro bate.
-- `findAll(root, (n) => ...)`: busca livre; `n.label` é `"Text \"...\""`, `"Button"`, `"Row"`...
-- `click(node)`: dispara o `onClick` do nó ou do ancestral mais próximo (atalho rápido).
-- `interact(root)`: mouse e teclado entregues como no app de verdade (hover, foco, captura
-  ao arrastar, Tab): `hover(n)`, `press(n)`, `release(n)`, `drag(n, dx, dy)`, `move(x, y)`,
-  `scroll(n, dy)`, `key("Return")`, `type("texto")` e `focused`.
-
-```tsx
-const ui = interact(root);
-ui.press(campo);            // foca o TextField
-ui.type("Ana");             // digita no campo focado
-ui.key("Return");           // dispara o onSubmit
-ui.drag(slider, 80, 0);     // arrasta 80 px para a direita
-```
-- `debugTree(node)` (de `@nodebuilderjs/core`): árvore com posições, ótimo para ver o layout.
-
-## Dicas
-
-- Estado muda na hora (signals são síncronos); não há `await` nem `act()`.
-- Prefira `interact` a chamar handlers à mão: ele testa também foco, hover e propagação.
-  Depois de mudanças que movem nós, chame `relayout()` antes de interagir de novo.
-- Teste cálculos de layout com tamanhos fixos (`width`, `height`) para não depender das
-  métricas falsas.
-- Antes de concluir uma tarefa: `bun run typecheck && bun test`.