# Ship a custom SDK: theme and breakpoint exports

> Plainkit 0.28.0. Generated by scripts/build-skills.mjs from the theme editor's Custom SDK tab and dist/js/zip-store.js. Do not edit: change the source and run the generator.

A consumer's theme and breakpoint widths are two independent choices, both made in the theme editor's **Custom SDK** tab (`mountThemeEditor(el)`; the Theme page of the site has it, and `PkThemeEditor` shows the same tab in Blazor). Do not hand-edit `dist` to change a width: the tab does it with checked transforms.

1. **Only colours and styles (the common case):** tick Theme, untick Breakpoints, export. The zip is `plainkit-theme.css` (load it after `plainkit.css`: `<link rel="stylesheet" href="plainkit-theme.css">`), `plainkit.custom.json` and a `README.md`; no SDK file changes. Blazor: put the file in `wwwroot` and link it after the PlainKit stylesheet in `App.razor` or `_Host.cshtml`. The Download plainkit-theme.css button gives just the stylesheet.
2. **Different breakpoint widths:** tick Breakpoints (whole px 320 to 2560, ascending, at least 64 apart; `phone`, `tablet`, `wide` keep their names). The table shows which elements and properties change at each and which viewport widths flip. The export is a zip of `dist/` with every `@media` width, `--pk-bp-*` and the report rewritten and `manifest.json` recomputed (size and SHA-384 per file), (with `dist/modules/` too when the modules are deployed next to the runtime; each unit has its own recomputed manifest), plus `plainkit.custom.json` and a `README.md` naming the version and the settings. Tick Theme as well and the theme is also baked into `plainkit.css` and `plainkit.min.css`.
3. **Change it again later:** paste `plainkit.custom.json` into the tab's Import box.
4. Use the exported `dist/` wherever the release `dist` is used and keep scripts on `js/breakpoints.js` (it reads `--pk-bp-*`), never a literal width. It all runs in the browser with same-origin reads of the shipped files, each checked against its release hash; nothing leaves the page. A Blazor exporter is not built yet: its theme-only zip is the way to ship a theme in a Blazor app.

## The zip writer underneath

The export above is written by a general, dependency-free, store-only `.zip` builder; reuse it for your own export/download feature. The header of `js/zip-store.js`, verbatim:

```text
A store-only zip writer (no compression): no dependencies, no DOM, deterministic (a fixed timestamp), UTF-8 names. General-purpose — any
consumer app assembling a browser-side export/download can import this directly; it is not specific to the custom SDK export that uses it.

  const bytes = zipStore([{ path: 'dist/plainkit.css', data: Uint8Array }, ...]);   // -> Uint8Array of a .zip any unzip tool opens

Limits are the classic zip ones (no zip64): at most 65535 entries, and neither an entry nor the archive reaches 4 GiB; beyond that it throws.
```

```js
import { zipStore } from './plainkit/js/zip-store.js';

const blob = await zipStore([{ path: 'report.csv', data: csvText }]);
```