Build file viewers and editors
A file viewing and editing capability presents a file wherever Phials needs it: beside an Explorer selection, in a Page tab’s File mode, in Gallery, or inside a Markdown file embed. You supply the file-specific experience through PreviewProvider; Phials supplies the destination shell, error boundary, standard editor controls, and navigation chrome.
Build one reusable surface rather than separate compact and fullscreen components. Its layout responds to its rendered container, while destination-specific behavior is limited to real capability differences such as making a Markdown embed inspection-only.
This hub follows the complete provider path:
- Match files to a viewer or editor with stable criteria and deliberate priority.
- Build a responsive file surface that works at every supported container width.
- Add thumbnails and toolbar controls without duplicating host chrome.
- Share viewer state with a preview session so presentations do not diverge.
- Support File mode and Markdown embeds by opting into each destination and enforcing inspection-only embed behavior.
- Save edited files safely with revision checks, conflicts, retention, and finalization.
The provider contract
A complete provider can contribute five related pieces:
| Provider field | Responsibility |
|---|---|
surface | The responsive Svelte viewer or editor for one file. |
createSession | Optional presentation-independent state for that provider and file. |
toolbar | Optional provider-specific controls placed by the host. |
thumbnail | Optional bounded representation for thumbnail-capable file views. |
destinations | Explicit eligibility for Page-tab File mode and inspection-only Markdown embeds. |
The pieces remain independent. A read-only viewer may need only surface. An editor normally uses a session so dirty and saving state survive presentation changes. A thumbnail is not a small copy of the full viewer, and a toolbar contribution is not a second shell.
The examples use a small JSON-based diagram format and the typed text-file API. The same composition applies to media, documents, canvases, and other file-specific experiences; use the matching data API and release resources in the session or component that owns them.
For the generated signatures, see PreviewProvider, PreviewSurfaceProps, and PreviewSession.