Total: ${() => total.value}
\n\n \nStatus: ${() => (profile.user.online ? \"online\" : \"offline\")}
\n\n${() => (results.loading ? \"Loading...\" : `Results: ${results.value?.length ?? 0}`)}
\n${() => count.value * 2}
`;\n```\n\nWith the compiler enabled, you can often write:\n\n```js\nhtml`${count.value * 2}
`;\n```\n\nCompiler exports:\n\n- `guiVitePlugin()`\n- `guiEsbuildPlugin()`\n- `transformGuiTemplates()`\n\n### Vite\n\n```js\nimport { defineConfig } from \"vite\";\nimport { guiVitePlugin } from \"@bragamateus/gui/compiler\";\n\nexport default defineConfig({\n plugins: [guiVitePlugin()],\n});\n```\n\n### esbuild\n\n```js\nimport { build } from \"esbuild\";\nimport { guiEsbuildPlugin } from \"@bragamateus/gui/compiler\";\n\nawait build({\n entryPoints: [\"src/main.js\"],\n bundle: true,\n outfile: \"dist/main.js\",\n plugins: [guiEsbuildPlugin()],\n});\n```\n\n## Devtools and instrumentation\n\ngUI ships with two runtime observation layers:\n\n1. Root-package DOM update hooks:\n `setDomUpdateHook()` and `subscribeDomUpdates()`\n2. Visual inspector from `@bragamateus/gui/devtools`\n\nThe inspector is opt-in and is not mounted unless you explicitly import and start it:\n\n```js\nimport { createInspector } from \"@bragamateus/gui/devtools\";\n\ncreateInspector({\n target: \"#app\",\n title: \"Live DOM Lens\",\n});\n```\n\nThe inspector and hooks expose exact DOM writes, structure changes, source labels, and flush activity so you can verify that the runtime is doing direct binding updates instead of broad rerenders.\n\n## API overview\n\n### State and async\n\n- `signal(initialValue, { label? })`\n Mutable reactive state with `.value`, `.set()`, `.update()`, `.peek()`, and `.inspect()`.\n- `computed(fn, { label? })`\n Lazy cached derived state with `.value`, `.peek()`, `.inspect()`, and `.dispose()`.\n- `effect(fn, { label? })`\n Tracked side effects with cleanup support. Returns a callable handle with `.inspect()`.\n- `batch(fn)`\n Groups multiple writes into a single flush boundary.\n- `createStore(initialValue)`\n Deep reactive proxy for objects and arrays.\n- `unwrapStore(store)`\n Returns the underlying raw object or array from a store proxy.\n- `createResource(source?, fetcher, { initialValue? })`\n Async state wrapper that exposes `{ value, loading, error, refetch() }`.\n\n### Composition and forms\n\n- `createContext(defaultValue, { label? })`\n- `provideContext(context, value, render)`\n- `useContext(context)`\n- `mergeProps(...sources)`\n- `splitProps(props, ...keysets)`\n- `on(signalOrSetter, transform?)`\n\n### Routing\n\n- `Route({ path }, children)`\n- `Router({ mode?, fallback? }, routes)`\n- `useRouter()`\n- `push(path)`\n- `replace(path)`\n\n### Rendering\n\n- `html(strings, ...values)`\n- `isTemplateResult(value)`\n- `list(source, key, render, { label? })`\n- `Show({ when, children, fallback })`\n- `Match({ when, children })`\n- `Switch(cases, fallback)`\n- `Portal(target, children, { label? })`\n- `mount(target, value)`\n- `createApp(target, component)`\n\n### `defineElement(tag, setup, options?)`\n\nCompiles a gUI layout into a standard, reusable HTML Web Component. Exposes a reactive `props` store that auto-syncs with node attributes and JS properties.\n\n```js\ndefineElement(\"gui-counter\", (props) => {\n const count = signal(0);\n return html``;\n}, { attributes: [\"theme\"], shadow: true });\n```\n*(Usage in native DOM: `