> ## Documentation Index
> Fetch the complete documentation index at: https://docs.parable.work/llms.txt
> Use this file to discover all available pages before exploring further.

# Design and Preview

> Use shared Parable controls in an isolated preview, with the same typography, colors, and component behavior as the app.

# Design and preview a Parable

## Sources

Docs: [Pages](/ponder/parables/pieces/pages), [Panes](/ponder/parables/pieces/panes),
[Powers](/ponder/agent-skills)

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:

```tsx theme={null}
import { Button, Input, Label } from 'parable/panes/placeholders';
```

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.

```tsx theme={null}
import {
  Kysely, DummyDriver, PostgresAdapter,
  PostgresIntrospector, PostgresQueryCompiler,
} from 'kysely';
```

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](/ponder/parables/execution-context) for how the
requester, definition version, and selected Report reading relate.

### Design Powers

The built-in **Design Basics** and **Design Transitions** [Powers](/ponder/agent-skills)
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.

<Image src="/images/ponder/viewport-fit-medium.png" alt="Synthetic Composed Page preview fitted to the medium logical viewport while preserving its layout" />