create-nodebuilderjs 0.2.1 → 0.3.0

package/template/AGENTS.md

@@ -1,34 +1,41 @@
 # AGENTS.md
 
-App nodebuilder: UI nativa para Linux em TSX, **sem DOM e sem React**. Leia antes de mudar código.
+nodebuilder app: native Linux UI in TSX, **no DOM and no React**. Read this before changing code.
 
-## Comandos
-- `bun run dev` abre o app; `bun test` roda os testes sem janela; `bun run typecheck` checa tipos.
-- Antes de concluir: `bun run typecheck && bun test`.
+## Commands
+- `bun run dev` opens the app; `bun test` runs the tests without a window; `bun run typecheck` checks types.
+- `bun run icons:add play pause` adds icon imports to `src/icons.ts` (after `bun add lucide-static`).
+- `bun run screenshot` renders the app to `screenshot.png` without a window (also with no
+  display server); add `-- --theme dark` or `-- --scale 2`.
+- Before finishing: `bun run typecheck && bun test`. **After a visual change, take a screenshot
+  and look at it** (open the PNG): tests check boxes, not colors, alignment or clipping.
 
-## Modelo (igual ao SolidJS, não ao React)
-- **Componentes rodam uma vez.** Não há re-render nem hooks. Estado é `createSignal`;
-  derivados são `createMemo`; efeitos são `createEffect` (+ `onCleanup`).
-- **Só funções são reativas.** `<Text>{count}</Text>` ou `text={() => ...}` atualizam;
-  `<Text>{count()}</Text>` é lido uma vez e nunca muda. O mesmo vale para estilo:
-  `background={() => (ativo() ? "#3584e4" : "#0000")}`.
-- Listas: `<For each={lista}>{(item) => ...}</For>` (chave por referência). Condicional:
-  `<Show when={() => ...} fallback={...}>`.
-- Estilo são props planas (`padding`, `gap`, `grow`, `background`...), não CSS. Não existem
-  `className`, `style={{}}`, `div`, `useState` nem bibliotecas de React (ex.: `lucide-react`).
+## Model (like SolidJS, not React)
+- **Components run once.** There is no re-render and there are no hooks. State is `createSignal`;
+  derived values are `createMemo`; effects are `createEffect` (+ `onCleanup`).
+- **Only functions are reactive.** `<Text>{count}</Text>` or `text={() => ...}` update;
+  `<Text>{count()}</Text>` is read once and never changes. The same goes for styles:
+  `background={() => (active() ? "#3584e4" : "#0000")}`, and for theme colors:
+  `color={() => theme.text.secondary}` follows a switch to the dark theme.
+- Lists: `<For each={list}>{(item) => ...}</For>` (keyed by reference) or
+  `<Index each={list}>{(item) => ...}</Index>` (by position; `item` is an accessor).
+  Conditions: `<Show when={() => ...} fallback={...}>`; several cases: `<Switch>` with
+  `<Match when={...}>`. Errors: `<ErrorBoundary fallback={(error, reset) => ...}>`.
+- Styles are flat props (`padding`, `gap`, `grow`, `background`...), not CSS. There is no
+  `className`, `style={{}}`, `div` or `useState`, and React libraries (e.g. `lucide-react`) don't work.
 
-## Skills (detalhes por assunto)
-Em `.agents/skills/<nome>/SKILL.md` (com links em `.claude/skills/` para o Claude Code). Agentes
-que suportam skills as carregam sozinhos; os outros devem ler a skill do assunto antes de começar:
+## Skills (details by topic)
+In `.agents/skills/<name>/SKILL.md` (linked from `.claude/skills/` for Claude Code). Agents
+that support skills load them on their own; others should read the topic's skill before starting:
 
-| Skill | Quando |
+| Skill | When |
 |---|---|
-| `nodebuilder-ui` | telas, widgets, props de estilo, layout, `For`/`Show`, tema |
-| `nodebuilder-sem-react` | antes de instalar bibliotecas ou portar código React/web |
-| `nodebuilder-imagens` | imagens (PNG, JPEG, WebP, AVIF), arquivos no app |
-| `nodebuilder-icones` | ícones (Lucide, Phosphor) e SVG com `Icon` |
-| `nodebuilder-graficos` | gráficos prontos (`@nodebuilderjs/core/charts`, API do Recharts) |
-| `nodebuilder-desenho` | desenho livre com `Canvas` |
-| `nodebuilder-testes` | testes sem janela (`mount`, `findByText`, `click`) |
-| `nodebuilder-empacotar` | AppImage/.deb/.rpm, arquivos embutidos, ícone e app id |
-| `nodebuilder-desempenho` | lentidão, listas grandes, dados ao vivo, animação |
+| `nodebuilder-ui` | screens, widgets (incl. custom title bar with `dragRegion`/`WindowControls`, `Toggle`, `RadioGroup`, `Slider`, `Select`, `Tabs`, `Tooltip`, `Dialog`, `ProgressBar`, `disabled`), style props (incl. gradient `background={{ linear, angle }}`), hover/press (`hoverStyle`, `pressStyle`, `createInteraction`), layout (`Grid` of equal columns, `wrap` rows of chips, `margin`, `aspectRatio`, equal columns in a row with `width={0} grow={1}`, `position="absolute"`, `zIndex`, `clip`, `shadow`, overflow warnings), events, own components, `For`/`Index`/`Show`/`Switch`, `ErrorBoundary`, scrolling (horizontal, scrollbars, keyboard, `scrollIntoView`), context, `ref` (focus, scroll), `onResize`, `Overlay` (dialog, menu, tooltip), `opacity`/`translate`, theme (light/dark, `setTheme`), animations (`createTween`, `animate`, `easing`, `mixColor`), selectable text, copy/paste |
+| `nodebuilder-from-react` | before installing libraries or porting React/web code |
+| `nodebuilder-images` | images (PNG, JPEG, WebP, AVIF), files in the app |
+| `nodebuilder-icons` | icons (Lucide, Phosphor) and SVG with `Icon`; `bun run icons:add <names...>` writes their imports into `src/icons.ts` |
+| `nodebuilder-charts` | ready-made charts (`@nodebuilderjs/core/charts`, Recharts API) |
+| `nodebuilder-drawing` | freehand drawing with `Canvas` (reactive `draw`, dashed lines, gradient fills with `g.linearGradient`, text cut to a width with "…") |
+| `nodebuilder-testing` | tests without a window (`mount`, `findByText`/`findAllByText`, `findByLabel` (`ariaLabel`), `click`, `interact`, hidden targets that throw, `layoutWarnings()`, real text metrics (`useRealTextMetrics`), `frames`, clipboard), screenshots (`nodebuilder screenshot`, `screenshot()`) |
+| `nodebuilder-packaging` | AppImage/.deb/.rpm, embedded files, icon and app id |
+| `nodebuilder-performance` | slowness, long lists, live data, animation, CPU use while idle (`NB_STATS`, `NB_TRACE=frames`) |

package/template/README.md

@@ -1,32 +1,33 @@
 # {{title}}
 
-App desktop nativo para Linux feito com [nodebuilder](https://www.npmjs.com/package/@nodebuilderjs/core):
-componentes TSX com reatividade estilo SolidJS, desenhados por um núcleo nativo (Wayland/X11 + GLES).
+Native Linux desktop app made with [nodebuilder](https://www.npmjs.com/package/@nodebuilderjs/core):
+TSX components with SolidJS-style reactivity, drawn by a native core (Wayland/X11 + GLES).
 
 ```sh
-bun run dev        # abre a janela e reinicia ao salvar
-bun start          # roda uma vez
-bun test           # testes sem janela (test/)
+bun run dev        # opens the window and restarts on save
+bun start          # runs once
+bun test           # tests without a window (test/)
 bun run typecheck  # TypeScript 7
-bun run package    # AppImage, .deb, .rpm e .tar.gz em dist/
+bun run screenshot # screenshot.png of the app, without opening a window
+bun run package    # AppImage, .deb, .rpm and .tar.gz in dist/
 ```
 
-## Estrutura
+## Structure
 
 ```
 src/
-  main.tsx             abre a janela: run(() => <App />)
-  App.tsx              layout da tela; cria o estado e o passa aos componentes
-  estado.ts            signals e ações do app (contador, tarefas, histórico)
-  icones.ts            ícones SVG usados pelo app
-  componentes/
-    Contador.tsx       botões e texto reativo
-    Tarefas.tsx        campo de texto, lista com For/Checkbox, Show
-    Atividade.tsx      gráfico (@nodebuilderjs/core/charts) que acompanha o estado
+  main.tsx             opens the window: run(() => <App />)
+  App.tsx              screen layout and dark mode toggle; creates the state and passes it down
+  state.ts             app signals and actions (counter, tasks, history)
+  icons.ts             SVG icons used by the app
+  components/
+    Counter.tsx        buttons, reactive text and a tooltip
+    Tasks.tsx          text field, list with For/Checkbox, Show and a confirmation Dialog
+    Activity.tsx       chart (@nodebuilderjs/core/charts) that follows the state
 test/
-  App.test.tsx         testes sem janela: mount + interact (clicar, digitar)
+  App.test.tsx         tests without a window: mount + interact (click, type)
 ```
 
-Para apagar o exemplo e começar do zero, deixe só a `<Window>` em `App.tsx`.
+To remove the example and start from scratch, keep only the `<Window>` in `App.tsx`.
 
-Requisitos: Linux com Wayland ou X11, [Bun](https://bun.sh) 1.4+.
+Requirements: Linux with Wayland or X11, [Bun](https://bun.sh) 1.4+.

package/template/_gitignore

@@ -1,2 +1,3 @@
 node_modules/
 dist/
+screenshot.png

package/template/src/App.tsx

@@ -1,29 +1,32 @@
-import { Column, Icon, Row, Scroll, Text, Window, theme } from "@nodebuilderjs/core";
-import { Atividade } from "./componentes/Atividade.js";
-import { Contador } from "./componentes/Contador.js";
-import { Tarefas } from "./componentes/Tarefas.js";
-import { criarEstado } from "./estado.js";
-import { brilho } from "./icones.js";
+import { Column, Icon, Row, Scroll, Spacer, Text, Toggle, Window, colorScheme, setTheme, theme } from "@nodebuilderjs/core";
+import { Activity } from "./components/Activity.js";
+import { Counter } from "./components/Counter.js";
+import { Tasks } from "./components/Tasks.js";
+import { sparkle } from "./icons.js";
+import { createState } from "./state.js";
 
 export function App() {
-  const estado = criarEstado();
+  const state = createState();
   return (
     <Window title="{{title}}" appId="{{appId}}" width={720} height={760}>
       <Scroll grow={1} padding={20} gap={16}>
         <Row gap={12} align="center">
-          <Icon svg={brilho} size={32} color={theme.accent.base} />
-          <Column gap={2}>
+          {/* Theme colors go inside functions, so they follow a theme switch. */}
+          <Icon svg={sparkle} size={32} color={() => theme.accent.base} />
+          <Column gap={2} grow={1}>
             <Text fontSize={22} bold>{"{{title}}"}</Text>
-            <Text color={theme.text.secondary}>Edite src/App.tsx e salve: o bun run dev reabre a janela.</Text>
+            <Text color={() => theme.text.secondary}>Edit src/App.tsx and save: bun run dev reopens the window.</Text>
           </Column>
+          <Spacer size={8} />
+          <Toggle checked={() => colorScheme() === "dark"} onChange={(on) => setTheme(on ? "dark" : "light")} label="Dark" />
         </Row>
         <Row gap={16} align="start">
           <Column grow={1} gap={16}>
-            <Contador estado={estado} />
-            <Atividade estado={estado} />
+            <Counter state={state} />
+            <Activity state={state} />
           </Column>
           <Column grow={1}>
-            <Tarefas estado={estado} />
+            <Tasks state={state} />
           </Column>
         </Row>
       </Scroll>

package/template/src/components/Activity.tsx

@@ -0,0 +1,24 @@
+import { Card, Icon, Row, Text, theme } from "@nodebuilderjs/core";
+import { Area, AreaChart, CartesianGrid, Legend, Line, Tooltip, YAxis } from "@nodebuilderjs/core/charts";
+import { chart } from "../icons.js";
+import type { State } from "../state.js";
+
+export function Activity(props: { state: State }) {
+  return (
+    <Card gap={8}>
+      <Row gap={8} align="center" color={() => theme.text.secondary}>
+        <Icon svg={chart} size={16} />
+        <Text bold>Activity</Text>
+      </Row>
+      {/* data is a signal: the chart follows every click and every task. */}
+      <AreaChart data={props.state.history} height={180}>
+        <CartesianGrid vertical={false} strokeDasharray="3 3" />
+        <YAxis />
+        <Area dataKey="clicks" name="Clicks" type="monotone" />
+        <Line dataKey="pending" name="Pending" stroke="#e5a50a" dot={false} />
+        <Tooltip />
+        <Legend />
+      </AreaChart>
+    </Card>
+  );
+}

package/template/src/components/Counter.tsx

@@ -0,0 +1,24 @@
+import { Button, Card, Icon, Row, Text, Tooltip, theme } from "@nodebuilderjs/core";
+import { pointer } from "../icons.js";
+import type { State } from "../state.js";
+
+export function Counter(props: { state: State }) {
+  const { clicks, click, reset } = props.state;
+  // Only functions are reactive: Text reads `times` again whenever `clicks` changes.
+  const times = () => `You clicked ${clicks()} ${clicks() === 1 ? "time" : "times"}`;
+  return (
+    <Card gap={12}>
+      <Row gap={8} align="center" color={() => theme.text.secondary}>
+        <Icon svg={pointer} size={16} />
+        <Text bold>Counter</Text>
+      </Row>
+      <Text fontSize={20}>{times}</Text>
+      <Row gap={8}>
+        <Tooltip text="Back to zero">
+          <Button label="Reset" variant="flat" onClick={reset} disabled={() => clicks() === 0} />
+        </Tooltip>
+        <Button label="Click me" variant="primary" onClick={click} />
+      </Row>
+    </Card>
+  );
+}

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,10 @@
+// SVG icons (drawn for this template). For more: `bun add lucide-static`, then
+// `bun run icons:add play pause` adds their imports below (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,49 +1,59 @@
-import { expect, test } from "bun:test";
+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";
 
-// Os testes rodam sem janela. interact() entrega mouse e teclado como no app de verdade.
+// Tests run without a window. interact() delivers mouse and keyboard like the real app.
 
-test("o botão conta os cliques", () => {
-  const { root, relayout } = mount(() => <App />);
-  const ui = interact(root);
-  expect(findByText(root, "Você clicou 0 vezes")).toBeDefined();
+afterEach(() => setTheme("light"));
 
-  ui.press(findByText(root, "Clique aqui")!);
-  ui.release(findByText(root, "Clique aqui")!);
-  relayout();
-  expect(findByText(root, "Você clicou 1 vez")).toBeDefined();
-
-  ui.press(findByText(root, "Zerar")!);
-  ui.release(findByText(root, "Zerar")!);
-  relayout();
-  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("adicionar, concluir e limpar tarefas", () => {
-  const { root, relayout } = mount(() => <App />, { width: 800, height: 900 });
-  const ui = interact(root);
-  const clique = (texto: string) => {
-    const alvo = findByText(root, texto)!;
-    ui.press(alvo);
-    ui.release(alvo);
-    relayout();
-  };
-  expect(findByText(root, "2 pendentes")).toBeDefined();
+test("add, complete and clear tasks, confirming in a dialog", () => {
+  const { root, ui, relayout, click } = setup();
+  expect(findByText(root, "2 pending")).toBeDefined();
 
-  // Digita no campo e confirma com Enter; texto vazio não vira tarefa.
+  // 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("Escrever um teste");
+  ui.type("Write a test");
   ui.key("Return");
   ui.key("Return");
   relayout();
-  expect(findByText(root, "Escrever um teste")).toBeDefined();
-  expect(findByText(root, "3 pendentes")).toBeDefined();
-
-  clique("Ler o README"); // o texto da tarefa também marca a caixa
-  expect(findByText(root, "2 pendentes")).toBeDefined();
+  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();
+});
 
-  clique("Limpar concluídas");
-  expect(findByText(root, "Ler o README")).toBeUndefined();
-  expect(findByText(root, "2 pendentes")).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`.