# @nibling/example-slopbox

slopbox: a local shell for `@nibling/kernel` demo apps. A catalog of Node apps, each
booted into its own runtime in the tab, with a console, a terminal pane for CLI apps,
and a bash Shell tab (bashkit) on the running app's own VFS.

This package depends on `@nibling/kernel` as a workspace package and reads two things
the runtime builds: its published assets (via the workspace link, `node_modules/@nibling/kernel/dist/runtime/`)
and its demo fixtures (`packages/kernel/dist/fixtures/`, read directly across the
monorepo — see the comment in `serve.mjs`). Both only exist after the runtime itself has
been built and fixtured.

## Scripts

- `pnpm run build` — bundles this package's own browser code (`terminal.js`, `shell.js`
  + `bashkit.wasm`) into `dist/demo/`.
- `pnpm run fixtures` — runs the runtime's `fixtures` script (`pnpm --filter
  @nibling/kernel fixtures`), which builds `packages/kernel/dist/fixtures/`.
- `pnpm run serve` — a static dev server on `http://localhost:8932/` (the runtime's own
  dev server defaults to :8931, so both can run at once).
- `pnpm run test` — builds the runtime, builds its fixtures, builds this package, then
  runs its Playwright suite. (Chosen over assuming a pre-built runtime so `pnpm --filter
  @nibling/example-slopbox test` works standalone; if you're iterating on both packages
  at once, running `pnpm --filter @nibling/kernel build` yourself first and skipping
  straight to `playwright test` is faster.)

## Layout

- `index.html`, `slopbox.js`, `slopbox.css`, `supervisor.js`, `shell.js`, `shell-fs.js`,
  `launchers.js`, `line-editor.js`, `terminal.js` — the page.
- `tests/` — `slopbox.spec.ts`, `shell.spec.ts`, `line-editor.spec.ts`.
- `scripts/screenshot-slopbox.mjs` — catalog/running/failed/CLI screenshots, light + dark.