Skip to main content

​
Design and preview a Parable

​
Sources

Docs: Pages, Panes, Powers Web App: Open a Composed Page or Pane in Pieces, then use its source and preview surfaces. Ask Ponder to compose it while the Piece is selected.

​
Story

A Parable can use the same approved controls as the app. The shared library contains Parable’s adapted components, typography, colors, square corners, and icon treatments.

​
Structure

Import controls through the Parable-facing entry:
The app build includes the library, its compiled styles, embedded fonts, and editor types in the isolated preview automatically. No directive or installation inside a Page is needed. Only this public entry is available; internal package paths and unrelated component libraries are not exposed. Use the components’ props for their variants. For layout, use ordinary CSS or inline styles. Arbitrary Tailwind class strings written after the app build are not compiled automatically. Other application components are imported through Panes declared in the Perception. The supported platform entries are react, react/jsx-runtime, react/jsx-dev-runtime, motion, motion/react, kysely, @psgen/scalar-lib, and parable/panes/placeholders. Package subpaths outside that list, unrelated libraries, direct Plot modules, foreign-Parable imports, and dynamic imports are refused. Ordinary JSX and CSS remain available.

​
Services

Kysely is included by default at version 0.29.5, in both the live authoring preview and compiled Page/Pane runtime. Its real declaration files are also supplied to the source editor.
Use Kysely to compile query structure into SQL and bound parameters. The library’s presence does not provide a database connection or permission to execute a query. Send the declared Plot name, compiled SQL, and matching typed parameters to plotApi.preview(name, query); values remain bound, and current input Policies are checked on execution. See Execution context for how the requester, definition version, and selected Report reading relate.

​
Design Powers

The built-in Design Basics and Design Transitions Powers bundles and their provisioning hooks have been removed. Unedited copies are excluded from the catalog and new responses; edited Workspace copies and historical responses are preserved.

​
Storage

Publish compiles every Page and Pane in the candidate version, with its selected CSS. A syntax error or unavailable import stops publication; the published version and deployment pointers stay unchanged. Runtime errors and unavailable data can still occur after a successful build and are shown in the content area. Builds are cached by source and compiler version. Opening the same saved draft again reuses its build without requiring Publish. Changing source creates a new build. Switching between Pages from the same build keeps the renderer running and reuses already evaluated modules. Outside editing mode, a deployment displays its own published version or the upstream version it has received. Pending Changes are not the displayed content. Editing mode opens the selected working changes. Personal Parables continue to use their directly saved content. When populating takes longer than a brief transition, a centered Populating… indicator appears. Fast navigation avoids flashing a loading label.

​
If the preview fails

Read the visible compile or runtime error and repair the smallest failing boundary. Check the Page or Pane source, imported local components, and the attached data or configuration Pieces. The current published version remains unchanged while the repair stays in a Patch.

​
Security

Saved Pages and Panes use compiled code in an isolated frame. That frame has its own opaque origin and cannot read the app’s cookies or document. Data requests travel through the host’s existing authorization checks over a document-specific message channel. Authored React is compiled, never executed, on the server. SQL executes on the server through the query service. view.plots controls source inspection, while permitted Pane use can receive compiled React and CSS under view.preferences. Executable assets necessarily reach the browser; hiding the source editor is not a secrecy guarantee. props.policies contains resolved decisions, not the Policies YAML settings. Unsaved edits retain the live sandbox bundler. Saving brings the Page back to the reusable compiled path. Both paths use the same shared controls and Pane SDK.

​
Stability

Check:
  • initial, loading, empty, error, and populated states;
  • Ivory and Obsidian themes;
  • keyboard order and visible focus;
  • reduced-motion behavior;
  • text wrapping and long synthetic values; and
  • XS, S, M, L, and XL logical viewport sizes where available.
The preview fits the selected logical viewport into the available canvas. A smaller on-screen image does not change the Page’s logical media or container queries.