# `mix tessera.gen.gallery`
[🔗](https://github.com/the-robot-lives/tessera/blob/v0.2.0/lib/mix/tasks/tessera.gen.gallery.ex#L1)

Scaffolds the tessera component gallery for a package in the current Mix
project:

    mix tessera.gen.gallery
    mix tessera.gen.gallery --package PersonaKit --out gallery

Every `use Noizu.Tessera.Package` includes gallery support by default
(it exposes `cem/0`); this task turns that into a runnable, FRAMEWORK-
AGNOSTIC gallery — a static HTML page plus the package's own component
bundles, no framework involved:

  * `gallery/index.html` — the static page;
  * `gallery/src/main.mjs` — esbuild entry importing the package's
    component `.mjs` modules (their load-bearing `register()` defines the
    elements) and the tessera gallery runtime (`priv/gallery/gallery.mjs`);
  * `gallery/custom-elements.json` — the package's CEM, which the runtime
    reads to render, per component: a live demo, typed attribute/property
    editors, slot-content editors, CSS custom-property editors and an
    event log (event name + camelCase detail);
  * `gallery/package.json` + `gallery/serve.mjs` — esbuild build and a
    dependency-free static server (http://localhost:5588, PORT overridable).

Then:

    npm install        # in the PACKAGE root — esbuild resolves the
                       # components' bare imports (lit, @noizu/tessera-core)
                       # from the component files' own directory chain
    cd gallery && npm install && npm run build && npm run serve

Re-run the task after changing the package's components to refresh the
entry + manifest. Compiles the project first.

---

*Consult [api-reference.md](api-reference.md) for complete listing*