# Figpong browser runtime v1

Use these pinned, Figpong-hosted browser libraries when they materially improve a one-file HTML artifact. They are the only external scripts and stylesheet allowed inside a rendered Figpong artifact.

## Imports

```html
<!-- Utility-first styling -->
<script src="https://figpong.vercel.app/vendor/v1/tailwind.js"></script>

<!-- Safe Markdown rendering: always use these together -->
<script src="https://figpong.vercel.app/vendor/v1/marked.js"></script>
<script src="https://figpong.vercel.app/vendor/v1/dompurify.js"></script>

<!-- Editable data grids -->
<link rel="stylesheet" href="https://figpong.vercel.app/vendor/v1/tabulator.css">
<script src="https://figpong.vercel.app/vendor/v1/tabulator.js"></script>
```

The standard browser globals are available: `marked`, `DOMPurify`, and `Tabulator`. Tailwind scans the document and generates styles in the browser. Use the libraries' normal public APIs; Figpong does not wrap or replace them.

Exact versions, licenses, file sizes, and SHA-256 hashes are published at `https://figpong.vercel.app/vendor/v1/manifest.json`. The `v1` URLs are permanent. A future breaking runtime will use a new versioned path.

## Security boundary

- Keep application HTML, custom CSS, JavaScript, icons, and sample data in the one HTML file.
- Do not load another CDN, package manager, remote script, stylesheet, font, image, iframe, worker, or API.
- Do not call `fetch`, `XMLHttpRequest`, `WebSocket`, or submit a form. The artifact Content Security Policy blocks network connections.
- Do not use cookies, `localStorage`, service workers, analytics, or browser secrets.
- Never put credentials, environment variables, private API keys, confidential data, or sensitive form responses in the artifact.
- A vendor-backed downloaded HTML file needs network access to these stable Figpong URLs. It is still one authored file, but it is not an offline bundle.

## Markdown

Marked parses Markdown but does not sanitize its output. Always sanitize before inserting HTML:

```js
const unsafeHtml = marked.parse(markdownSource, { gfm: true, breaks: true });
preview.innerHTML = DOMPurify.sanitize(unsafeHtml);
```

Never assign unsanitized Marked output to `innerHTML`.

## Persistence

Figpong saves explicitly marked values separately from V1/V2 HTML history. Saving a field does not create a new version.

For a native input, add one stable key:

```html
<input data-figpong-field="growth-rate" data-figpong-value="number" type="number" value="12">
<textarea data-figpong-field="markdown-source"># Initial document</textarea>
```

Supported native controls are text, number, range, checkbox, radio, textarea, select, and `contenteditable="true"`. Figpong listens to bubbling `input` and `change` events, autosaves after a short delay, reapplies remote state, and dispatches `figpong:state-applied` after hydration.

For a rich widget, persist one JSON string in a marked hidden textarea:

```html
<textarea id="table-state" data-figpong-field="table-data" hidden>[{"id":1,"name":"Example"}]</textarea>
<div id="table"></div>
<script>
  const state = document.querySelector('#table-state');
  const readRows = () => JSON.parse(state.value || '[]');
  const table = new Tabulator('#table', { data: readRows(), columns: [
    { title: 'Name', field: 'name', editor: 'input' }
  ]});

  const saveRows = () => {
    state.value = JSON.stringify(table.getData());
    state.dispatchEvent(new Event('input', { bubbles: true }));
  };
  table.on('cellEdited', saveRows);
  document.addEventListener('figpong:state-applied', () => table.replaceData(readRows()));
</script>
```

Field keys match `[a-z0-9][a-z0-9-]{0,79}`. Values are strings, finite numbers, booleans, or null. One value is limited to 64 KB; one version may retain 256 fields and 512 KB total state. `contenteditable` persists text only.

Persistence is version-scoped and last-write-wins per field. A rich table stored as one JSON field is appropriate for a small shared artifact; simultaneous edits to different cells are not merged like a realtime spreadsheet. Keep important structure in the HTML and use full version uploads for meaningful published revisions.

## Starting examples

- Markdown working document: `https://figpong.vercel.app/html-templates/markdown-working-document.html`
- Editable data table: `https://figpong.vercel.app/html-templates/editable-data-table.html`
- Full template catalog: `https://figpong.vercel.app/html-templates/index.md`