# Pluggable side tabs

A side tab is added by **dropping files into this folder** — you do **not** edit
`app.py` (unless your tab needs a Python/@GPU backend). This lets several tabs be
built in parallel with zero shared-code conflicts.

## The 4 files (replace `<name>` with your tab's slug, e.g. `effects`)

| File | What it is | Globbed into |
|------|------------|--------------|
| `<name>.tab.html`    | the rail button | the left tab rail |
| `<name>.drawer.html` | the slide-in `<aside>` panel | the drawer container |
| `<name>.tab.css`     | styles for your tab | the page `<style>` |
| `<name>.tab.js`      | behavior | the drawer-JS scope (shared helpers available) |

All four are optional, but a useful tab has at least `.drawer.html` + `.tab.html`.
Files load in **sorted filename order** at import.

## ID conventions (the drawer manager auto-discovers these from the DOM)

- Rail button: `id="kimodo-<name>-toggle"`, `class="kimodo-left-tab"`,
  `data-drawer="kimodo-<name>-drawer"`.
- Drawer panel: `<aside id="kimodo-<name>-drawer" class="kimodo-drawer">` (add
  `kimodo-drawer--wide` for a wider panel). Opening it is handled for you
  (one drawer open at a time, tab-rail shift, camera re-centers beside it).

## Showing your tab

Minimal mode currently **hides every rail tab except COMPOSE**. Your `.tab.css`
must un-hide yours:

```css
#kimodo-<name>-toggle { display: block !important; }
```

## Hooking "drawer opened" (no setOpen edit)

```js
window.addEventListener('kimodo-drawer-open', (e) => {
  if (e.detail !== 'kimodo-<name>-drawer') return;
  // build/refresh your panel here
});
```

## Shared helpers your `.tab.js` can call (same scope)

- `fetchManifest()` → `[{id, prompt, ...}]` of all saved clips/stances.
- `fetchRecord(id)` → a clip record (incl. `posed_joints`, `global_quats_xyzw`).
- `loadIntoViewer(rec, id, label)` → play a clip in the 3D viewer (set
  `rec.num_joints` + `rec.bone_names = SMPLX22_BONES` first if missing).
- `previewFrame()` → the viewer iframe (for custom `postMessage`).
- `setOpen(drawerEl, bool)`, `sendViewportInset()`, `stitchPath(ids)`,
  `DATASET_BASE`, `KIMODO_BACKEND`.

## Tabs that need a Python/@GPU backend

Front-end-only tabs need nothing in `app.py`. If you need server generation, add a
hidden `gr` component + `.click` wiring **below** the
`NEW-TAB BACKEND EXTENSION POINT` marker in `app.py` (mirror the `compose_btn`
pattern: a hidden `#<name>-btn` your JS clicks; outputs → `[preview, meta, file_out]`).
That marker is the **only** shared line a backend tab touches — append only.

## Deploy

`tabs/` ships automatically with the Space (no ignore rule). `tabs/templates/` is a
subfolder, so its example files are **not** loaded (the globs are non-recursive).

See `tabs/templates/` for a complete, copy-paste example tab.