![\"Oja](\"assets/oja_icon.png\"){kind=icon}
\n\n \n
\n ![\"Oja\"](\"assets/oja_name.png\")
\n
No hosts yet
'),\n});\n```\n\n#### Async-safe DOM access\n\n`find()` resolves its scope from the active component context, which is only set during synchronous top-level execution. Inside `setTimeout`, async callbacks, or `effect()` handlers, the context is gone and `find()` falls back to `document`.\n\nTwo patterns to handle this:\n\n```js\nimport { find, scoped, ref } from '@agberohq/oja';\n\n// scoped() — capture bound query functions at top-level:\nconst { find: scopedFind, findAll: scopedFindAll } = scoped();\n\ncomponent.onMount(() => {\n setTimeout(() => {\n scopedFind('#status').textContent = 'ok'; // always correct\n scopedFindAll('.item').forEach(el => el.classList.add('ready'));\n }, 1000);\n});\n\n// ref() — capture a single element at top-level:\nconst syncDot = ref('#sync-dot');\n\nsetTimeout(async () => {\n const quota = await getVfsQuota();\n syncDot.el.title = `Saved · ${quota}`; // always safe\n}, 600);\n```\n\n`scoped()` gives you bound `find`/`findAll` functions for anything inside the container. `ref()` captures one specific element. Both are permanently bound to the container at the moment they are called — they work correctly from any callback, async function, or effect.\n\n---\n\n### 4. `make()` — build DOM without HTML strings\n\n```js\nimport { make } from '@agberohq/oja';\n\n// Build, place, and update in one chain\nmake.div({ class: 'host-card', data: { id: host.id } },\n make.h2({ class: 'hostname' }, host.name),\n make.span({ class: 'badge', style: { color: 'green' } }, 'Online'),\n make.button({\n class: 'btn-danger',\n on: { click: () => deleteHost(host.id) },\n }, 'Delete'),\n)\n.appendTo('#host-list')\n.update({ class: { add: 'loaded' } });\n\n// Placement methods — all return `this` so the chain never breaks\nmake.div({ class: 'toast' }, message).appendTo('#notifications');\nmake.div({ id: 'new' }).replace('#old');\nmake.li({ data: { id: '42' } }, 'New item').prependTo('#list');\n```\n\nAll placement methods: `.appendTo()` `.prependTo()` `.after()` `.before()` `.replace()`\n\n---\n\n## Component scripts — explicit imports, no magic\n\nEvery import in a component script is visible, IDE-friendly, and statically analysable. Nothing is injected automatically.\n\n```html\n\nLoading…\n\n\n```\n\n| Import | What it returns |\n|--------|----------------|\n| `find(sel)` | Enhanced element scoped to this component, or `document` if called outside |\n| `findAll(sel)` | NodeList scoped to this component |\n| `scoped()` | `{ find, findAll, el }` — permanently bound to this container, safe in async callbacks |\n| `ref(sel)` | `{ el }` — captures one element at call time, safe in async callbacks |\n| `container()` | The DOM element this script is mounted into |\n| `props()` | Read-only object of the data passed at mount time |\n| `ready()` | Signals setup is complete — resolves the mount promise |\n\nSignals in props are unwrapped automatically — access `props().tasks` and it calls `tasks()` for you.\n\n---\n\n## Auth — session management\n\nOja's auth module handles JWTs, opaque tokens, role checks, and route protection without any external library.\n\n### Quick setup\n\n```js\nimport { auth, context } from '@agberohq/oja';\n\nexport const [currentUser, setCurrentUser] = context('user', null);\n\n// Define access levels — called on every route check\nauth.level('public', () => true);\nauth.level('protected', () => auth.session.isActive());\nauth.level('admin', () => auth.session.isActive() && auth.hasRole('admin'));\n\n// Hooks — fire at session lifecycle points\nauth.session.OnStart(async (token) => {\n api.setToken(token); // set synchronously via tokenSync()\n const dest = auth.session.intendedPath() || '/';\n auth.session.clearIntendedPath();\n router.navigate(dest);\n});\n\nauth.session.OnRenew((newToken) => api.setToken(newToken));\n\nauth.session.OnExpiry(() => {\n setCurrentUser(null);\n router.navigate('/login');\n notify.warn('Session expired. Please sign in again.');\n});\n```\n\n### Starting a session after login\n\n```js\nform.on(loginForm, {\n submit: async (data) => {\n const user = await api.login(data.username, data.password);\n await auth.session.start(user.token); // stores token, fires OnStart\n setCurrentUser(user);\n return user;\n },\n success: () => notify.success('Welcome back!'),\n error: (err) => notify.error(err.message),\n});\n```\n\n### Session API\n\n| Method | Returns | Notes |\n|--------|---------|-------|\n| `auth.session.start(token, refreshToken?, options?)` | `Promise