* 📚 Add comprehensive documentation for .penpot file format (v3)
Create user-facing documentation for the .penpot binfile format to help
developers and power users understand and inspect the ZIP+JSON structure.
- Add technical specification with complete schema reference for all JSON
files (manifest, file metadata, pages, shapes, library assets, storage
objects, plugin data)
- Add user-friendly overview explaining the format structure, inspection
methods, and version history
- Update export-import-files.njk to clarify current format is not deprecated
and note that v2 was never released
- Add cross-links between documentation pages
- Include source code references to authoritative malli schemas
AI-assisted-by: qwen3.7-plus
* 📎 Add playwright dependency to the root package.json
* 📚 Add browser based .penpot file inspector to docs
Add a client-side, no-build inspector for .penpot (v3) files. The tool
runs entirely in the browser: JSZip is loaded lazily from a CDN, the
file is never uploaded. It provides a collapsible file tree, syntax-
highlighted JSON viewer with search, image previews, a summary panel
with file/shape/storage counts, shape summary cards with color swatches,
and clickable UUID cross-references with backlinks.
The inspector is added at
docs/technical-guide/developer/data-model/penpot-file-inspector.njk
and linked from the format spec and the user-facing format page.
AI-assisted-by: minimax-m3
* 📚 Use full page width and 2-column layout for inspector
The inspector previously sat inside the docs site's 42rem content
column, which forced a stacked layout and wasted the wide viewport.
- Hide the docs page-navigation sidebar on this page via :has()
- Use a 2-column CSS grid: file tree (280px, sticky) on the left,
content (flex: 1) on the right
- Restore the directory tree as a permanent left-rail navigation
(it was removed when the picker was first introduced, then added
back as a collapsible panel; a sticky rail is a better fit now
that horizontal space is plentiful)
- Remove the tree toggle button — the tree is always visible
- Collapses to 1 column on viewports below 900px
AI-assisted-by: minimax-m3
* 💄 Indent nested JSON values in inspector
The JSON tree view in the inspector was rendering all properties at
the same indent level, making it hard to see which values were
nested inside objects or arrays. Root-level properties and deeply
nested ones looked identical.
Add padding-left and a subtle vertical guide line to .jchildren so
each nesting level is visually distinct. Bump the toggle column to
1.2em and add a touch of vertical padding to .jrow for breathing
room.
AI-assisted-by: minimax-m3
