​

Design and preview a Parable

​

Sources

​

Story

​

Structure

import { Button, Input, Label } from 'parable/panes/placeholders';

​

Layers

• A z-index inside a Pane orders things within that Pane only. One Pane’s tab labels or sticky headers never draw through another Pane’s tooltip.
• The Pane the reader points at, or works in, lies over the other Panes. A tooltip, menu or sheet that the Pane draws itself is on top where it spills over a neighbour.
• The Pane the reader points at lies over the Pane that holds the focus. A click focuses the button it lands on, so after a click in one Pane, the tooltip of the Pane the reader then points at still shows on top.
• A Pane that draws an open menu itself lies over every other Pane, also the Pane the reader points at. The menu stays on top when the pointer moves onto a neighbour.

​

Other people on the Page

​

Sound

import { playSound, useSoundEffects } from 'parable/panes/placeholders';

playSound('select');
const { play } = useSoundEffects();
play('toggleOn');

​

Outlines

import { IconSlot, OutlineNode, OutlineTree } from 'parable/panes/placeholders';

const [open, setOpen] = React.useState<string | null>(null);

<OutlineTree label="Types">
  <OutlineNode
    icon={<IconSlot name="user" />}
    name="Person"
    description="Someone the organization employs."
    meta="3 Providers"
    open={open === 'person'}
    onToggle={() => setOpen(open === 'person' ? null : 'person')}
    detail={<PersonProperties />}
    childrenLabel="Person's types"
  />
</OutlineTree>

• actions on a node shows its controls, such as add and remove, over the row’s end on hover or keyboard focus, beside the row’s button rather than inside it.
• onMove on the tree gives each node with an id a drag grabber at its row’s start. Dropping a row on another calls onMove(id, targetId, position): before or after it on the top or bottom quarter, inside it in the middle. On the grabber, Alt with Arrow Up or Down moves the node among its siblings, Alt with Arrow Right moves it into the sibling above, and Alt with Arrow Left moves it out after its parent. canDrop(sourceId, position) on a node refuses a landing, such as a node into its own subtree. The caller changes its data; the tree redraws from it.

<OutlineTree label="Categories" onMove={(id, targetId, position) => setItems(move(items, id, targetId, position))}>
  <OutlineNode
    id={item.id}
    icon={<IconSlot name={item.icon} />}
    name={item.name}
    open={open === item.id}
    onToggle={() => setOpen(open === item.id ? null : item.id)}
    canDrop={source => !subtreeOf(items, source).has(item.id)}
    actions={<Button variant="ghost" size="icon-xs" aria-label={`Remove ${item.name}`}><IconSlot name="trash-can" /></Button>}
  />
</OutlineTree>

​

Card trees

import { CardTree, CHART_COLORS } from 'parable/panes/placeholders';

const [items, setItems] = React.useState([
  { id: 'growth', parent: null, name: 'Growth', description: 'Work that brings revenue.', icon: 'rocket', color: CHART_COLORS[0] },
  { id: 'sales', parent: 'growth', name: 'Sales', description: 'Demos and deals.', icon: 'handshake', color: CHART_COLORS[1] },
]);

<CardTree
  items={items}
  label="Categories"
  editable={canEdit}
  reason={canEdit ? null : 'Ask an Editor to change categories.'}
  onChange={setItems}
  newItem={parent => ({ id: crypto.randomUUID(), parent, name: parent ? 'New subcategory' : 'New category' })}
  renderDetail={item => <CategoryPage category={item} />}
/>

• Editing. With editable and onChange, hovering or focusing a card shows add and remove, and a grabber that moves it by drag or by Alt and the arrow keys. The tree hands back the whole list after each change. A card never moves into its own subtree, and removing a card removes the cards under it. A reader who cannot edit sees add and remove disabled, with reason on hover and focus, and no grabber. newItem makes a new card. Without it, nothing can be added. words renames what the controls say, such as { root: 'Estimate', addChild: name => ... }. A new card opens. Removing the open card, or a card above it, makes the removed card’s parent the open card. Moving a card inside a closed card opens that card, so the moved card stays in view. When the moved card holds the open card, the open card stays open.
• Choosing. With onSelect, a click chooses a card instead of opening it, as a list of threads does. selected is the chosen card’s id. A tree that chooses folds nothing: every card stays on screen.
• Search. reveal takes the ids of the cards a filter matches. Every card above each one stays open, so the matches show without a click. Those cards show only the cards under them, not their pages. The reader can still close them. Opening another card leaves them open, so every match stays in view. A new reveal forgets which cards the reader closed, also when an earlier reveal comes back.
• Menus. renderMenu(item) returns ContextMenuItems. The menu opens on a right-click, or the Menu key or Shift+F10 on a card.
• Controls. controlsOf(item) returns a card’s own controls, such as a Switch. They show at the card’s end at all times, beside its row, so a click on them does not open the card. With them, add and remove also show at all times.
• open and onOpenChange hold the open card for a caller that needs it. open names the deepest open card, and every card above it is open too. Only the open card shows its page, or its parent when the open card cannot open (see the fold above). onOpenChange gets each new open card, from a click, an add, a remove or a move. renderIcon draws a card’s icon in place of icon, and describeOf its line under the name.

​

Logos

import { BrandLogo, useBrandLogo } from 'parable/panes/placeholders';

<BrandLogo domain="github.com" name="GitHub" />
<BrandLogo domain="anthropic.com" name="Claude" size={32} />
<BrandLogo domain="calendar.google.com" outline={false} />
<BrandLogo product="google-sheets" domain="docs.google.com" outline={false} />
<BrandLogo product="confluence" outline={false} />

const href = useBrandLogo('linear.app', { size: 16 }); // an SVG <image> in a chart

​

Links

import { ExternalLinkButton, TableCell, TableRow } from 'parable/panes/placeholders';

<TableRow>
  <TableCell>{row.title}</TableCell>
  <TableCell>
    <ExternalLinkButton href={row.html_url} label={`Open pull request #${row.number} on GitHub`} />
  </TableCell>
</TableRow>

​

Redacted values

import { PiiRedaction, RedactedText } from 'parable/panes/placeholders';

<PiiRedaction category="EMAIL" />       // the envelope glyph, "Email" and "••••••"
<RedactedText text={row.summary} />     // each token in the text drawn as a chip
<RedactedText text={note} redact />     // finds values in raw text first

SELECT
  regexp_replace(regexp_replace(regexp_replace(regexp_replace(regexp_replace(regexp_replace(regexp_replace(
    body,
    '[A-Za-z0-9._%+-]+@[A-Za-z0-9-]+(?:\.[A-Za-z0-9-]+)*\.[A-Za-z]{2,}', '⟦EMAIL⟧', 'g'),
    '\b(?:\d[ -]?){12,18}\d\b', '⟦PAYMENT_CARD⟧', 'g'),
    '\b\d{3}[ -]\d{2}[ -]\d{4}\b', '⟦US_SSN⟧', 'g'),
    '\b(?:(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\.){3}(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\b', '⟦IP_ADDRESS⟧', 'g'),
    '\b(?:(?:[0-9A-Fa-f]{1,4}:){7}[0-9A-Fa-f]{1,4}|(?:[0-9A-Fa-f]{1,4}:){1,6}(?::[0-9A-Fa-f]{1,4}){1,6})\b', '⟦IP_ADDRESS⟧', 'g'),
    '\b(date of birth|birth(?:day| ?date)|d\.?o\.?b\.?|born(?: on)?)(\s*[*_]*[:\u2013-]?[*_]*\s*)(?:\d{4}[-/.]\d{1,2}[-/.]\d{1,2}|\d{1,2}[-/.]\d{1,2}[-/.]\d{2,4}|(?:jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)[a-z]*\.?\s+\d{1,2}(?:st|nd|rd|th)?,?\s+\d{4}|\d{1,2}(?:st|nd|rd|th)?\s+(?:jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)[a-z]*\.?,?\s+\d{4})\b', '\1\2⟦DATE_OF_BIRTH⟧', 'gi'),
    '(?:\+1[ .-]?|\b1[ .-])?(?:\(\d{3}\) ?|\b\d{3}[ .-])\d{3}[ .-]\d{4}\b|\+\d{1,3}[ .-]?\d{1,4}(?:[ .-]?\d{2,4}){2,4}\b', '⟦PHONE⟧', 'g') AS body
FROM tickets

​

Artifact bodies

import { ArtifactBody } from 'parable/panes/placeholders';

<ArtifactBody text={ticket.body} format="markdown" />
<ArtifactBody text={email.body} format="html" />
<ArtifactBody text={note.text} />                          // plain text, the default
<ArtifactBody text={email.body} format="html" redact />    // finds values in raw text first

• markdown: paragraphs, headings, ordered, unordered and task lists, block quotes, fenced and inline code, bold, italic, strikethrough, links and images. A single newline is a line break, as in a GitHub issue. HTML inside Markdown shows as written text, and so do tables.
• html: read as structured text. Paragraphs, line breaks, headings, lists, block quotes, preformatted text, bold, italic and links keep their structure; tables and other containers read as paragraphs. Scripts, styles, the head, embedded media, form controls and hidden text, such as an email’s preview text, are dropped.
• text, the default: every line break, blank line and space stays.

​

Dates and times

import { formatAge, formatDateTime, formatTime } from 'parable/panes/placeholders';

formatTime(run.occurredAt); // "12:31pm ET" today, "Oct 6, 12:31pm ET" on another day
formatDateTime(run.occurredAt); // "Oct 7, 12:31pm ET"
formatDateTime(run.occurredAt, { long: true }); // "Wednesday, October 7, 2026 at 12:31pm ET"

<span title={formatDateTime(at, { long: true })}>{formatAge(at)}</span>; // "3 hrs ago"

​

Categories

import { CategorySet, DecisionStatements, RulesTable } from 'parable/panes/placeholders';

<CategorySet categories={work} selectedId={open} onSelect={setOpen} />
<DecisionStatements value={category.decision} onChange={decision => save({ decision })} />
<RulesTable columns={FACTS} rules={rules} categories={work} onChange={setRules} />

• CategorySet draws each category as a card (CategoryCard) with its color, its name, what it amounts to (value, such as hours), the first statement of its decision, and a line for counts (meta). A parent’s card holds its children’s cards, and its line counts them. While a pointer or the keyboard is on a card, a badge names how the category is decided: Decision by Ponder or Decision by Rules. DecisionMethodBadge draws that badge on its own.
• DecisionStatements edits a decision as a list of statements. Enter starts the next statement, and pasting several lines adds one statement per line. It reads and writes one string, the text Ponder reads: one statement as written, or several as - lines. Text with any line that is not a - , * or • bullet is one statement, so a decision written as a paragraph keeps its exact text. splitStatements, joinStatements and firstStatement read the same string anywhere else.
• RulesTable edits Rules. A rule has a priority, the category it decides, an On switch, and conditions, which must all hold. Rules run by priority, and the first that matches decides. With categories, the table is the whole set’s ordered list, and dragging a row renumbers it. Without them, it shows one category’s rules with their set-wide numbers; categoryId names the category a new rule decides, and allRules takes the whole set, so a new rule’s priority comes after every rule in it rather than tying a rule of another category. The table then hands back only that category’s rules, which the Pane puts back into the set.

​

Icons

import {
  ButtonGroup,
  IconGlyph,
  IconPicker,
  IconPickerButton,
  Input,
} from 'parable/panes/placeholders';

<ButtonGroup>
  <IconPickerButton value={icon} onChange={setIcon} aria-label="Category icon" />
  <Input value={name} onChange={event => setName(event.target.value)} aria-label="Name" />
</ButtonGroup>

<IconGlyph icon={category.icon} />

​

Ponder

​

Where to place it

• Place it on visuals, numbers, and values that need an explanation: a chart, a total, a rate, a value in a row.
• Do not place it on navigation, filters, settings, forms, or a plain list of links. A reader does not ask how a button came to be.
• Place one target per thing a reader points at. A card holds one target; a bar or a row inside it can be a target of its own.

​

How to place it

import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  ContextualPonder,
  ContextualPonderSparkle,
} from 'parable/panes/placeholders';

<ContextualPonder asChild target={{ label: `Meeting hours · ${hours} hrs`, plot: 'hoursByWeek' }}>
  <Card>
    <CardHeader>
      <CardTitle>
        Meeting hours
        <ContextualPonderSparkle />
      </CardTitle>
    </CardHeader>
    <CardContent>…</CardContent>
  </Card>
</ContextualPonder>

• asChild puts the target on its one child, so the target adds no box to the layout. Use it whenever the target is one element.
• Without children, ContextualPonderSparkle takes no room. Put it directly after the last word of a title, a value, or a label, where the line has empty space after the words. The sparkle shows in that space.
• side="start" shows the sparkle before the words that follow the spot. Use it for a value at the end of a row, where the space is on the left.
• With children, such as a card’s icon, the sparkle takes their place in the same box: they fade out as it fades in, and come back as it fades out.

<CardAction>
  <ContextualPonderSparkle>
    <IconSlot name="clock" />
  </ContextualPonderSparkle>
</CardAction>

• Ponder this… opens a small composer where it was chosen: at the sparkle, or at the pointer for a right-click. What the reader pointed at sits in it as a chip. Enter sends what they type, after a quoted line naming the Pane, as one Message in the Parable’s current Ponder thread; when no thread is open, Ponder opens one. The Message goes through Ponder’s own composer, with the Pane as the Message’s current view, and the thread comes into view. Whatever keeps the composer from sending, such as a reader who may read the thread but not add to it, refuses the Message in the composer’s words, and the typed words stay. So does a thread that has not opened within 30 seconds, and a Message refused that way is never sent later. The app draws this composer itself, over the Pane, so no Pane code can write a Message as the reader: a Pane names what was pointed at, never the words. That name shows only in the chip; the Message’s quoted line uses the Pane’s own name from the Parable, never words the Pane chose. The app also holds these rules for any code in the frame:
  • It opens only after the reader’s press in the Page, by the rule every press-gated call follows: the Page has the focus, the window has a press, and the app saw no press of its own since the Page took the focus. That stops a Page that asks on its own, on load or on a timer, or while the reader types in Ponder’s own composer. It does not prove the press was the reader’s: code in the frame can move the focus into the Page itself.
  • It never takes the keyboard. It opens in view saying Click to type, and the reader clicks it, or tabs to it, to type. Keys typed while the focus is in the Page or in Ponder’s own composer never reach it.
  • It closes when the focus moves into the Page and when the reader presses on the Page. While it is open the Page takes no pointer input, so that press closes it and does not reach the Page.
  • It opens only wholly inside the part of the Page on screen, never over the navigation or Ponder’s column. A place outside that part is not used: the composer opens at its top right corner instead. A Page scrolled out of sight, or showing too little of itself to hold the composer, opens none. On screen means where the frame is drawn: a frame drawn transparent still counts. Its field grows with the words to at most 12rem, and less where the composer has less room there, then scrolls, so the composer never grows out of that part.
  These rules do not stop Pane code from choosing when, right after a press, and where the composer opens, or from asking again each time it closes. So Pane code can put the field under the second press of a double-click or under a press repeated because the first did nothing, or just after its own last field so that a Tab lands in it, and keep it on the Page through every press. The reader’s words still go only when they send them. Inside the frame, the place a Pane names is also kept inside that Pane: the composer opens at the Pane’s top right corner for a place outside it. That holds Panes that ask through the design system; only the app’s rules above hold any code in the frame. Escape or a send in the composer closes it and puts the focus on the Page’s edge, so Tab goes back into the Page. The app never moves the focus into the Page itself: a focus it moved there would count as the reader’s press in the Page, and the reader’s next press inside a Page that already holds the focus is one the app cannot see. A press anywhere else outside the composer closes it too, and the focus stays where the reader put it. The Page frame’s runtime also closes it on Escape typed in the Page. The sparkle it was chosen from stays while it is open.
• Plot the path to this… opens a side sheet with the Plotted Path: how the answer came to be, from the tools its information comes from up to the Pane, in a few steps a CEO or an intern can follow. Each step is numbered and has a title and short bullets; the first is always where the information comes from, with each tool’s brand icon. The platform writes the steps in that order. It is on every Pane that reads a Plot, for every reader with or without Ponder, on the Workspace’s Parable page, in a Platform Parable’s tab and in Admin Ponder. Under View as it is not offered.
  • The steps are one walk: the step it is on is prominent and the others are faded, and still readable. Back and Next move it, and so do choosing a step and the Left and Right keys. They always sit outside the sheet, at its top left, beside it and its panels; where their words have no room, they stay there as two arrow buttons. On a phone, where the sheet fills the screen, they sit in its footer. There are no tabs and no other order.
  • A step’s … menu, shown while the step is hovered or holds focus (always, on a touch screen), lists under View Panes the Panes it links. Choosing one opens it in a side panel to the right of the sheet, titled “The name Pane”: what it is, its own steps, whether it has settings, and, where the Page on screen draws it, the Pane itself with its own controls. The panel slides in (at once for a reader who asks for reduced motion) with a sound, under the reader’s sound setting. A Pane opened from a panel opens to that panel’s right. A panel never covers the sheet, and Back and Next stay on the Page: where the Page is too narrow for all of them, the panels nearest the sheet close, and a lone panel narrows to what the sheet at its least width leaves it, down to a least width of its own. Escape closes the rightmost panel, and the focus goes back to the … it was opened from; the arrow keys in a panel are the Pane’s own. Closing the sheet hands the focus back to the control whose menu opened it: chosen from a Pane’s sparkle, the sparkle stays while the sheet is open and takes the focus back.
    • A Provider the Workspace has not connected is listed under the sources step with Connect.
  • The platform writes the explanation once per Pane and published Version, and keeps it, so it usually opens at once. A Page with filter Policies gets its own explanation of the Pane. A skeleton shows while one is written. Someone who publishes the Parable can choose Explain again. How it is written, and how to write Panes it explains well: Explaining Panes.
  Ponder this… is there for a reader who can use Ponder, and Plot the path to this… for every reader. View as gets neither.
• A Pane’s own entries come after Ponder’s, and a Pane can turn any entry off on every target in it:

import { useContextualPonder } from 'parable/panes/placeholders';

// Module scope, or useMemo: a new object registers again.
const MENU = { off: ['plotPath'] };

function Navigation() {
  useContextualPonder(MENU);
  return <nav>…</nav>;
}

import { ContextualPonder } from 'parable/panes/placeholders';

<ContextualPonder
  asChild
  target={{ label: `${row.region} · ${row.orders} orders`, plot: 'ordersByRegion', row: { region: row.region } }}
  entries={[{ id: 'viewProof', label: 'View Proof', icon: 'file-certificate', onSelect: () => openProof(row.region) }]}
>
  <li>…</li>
</ContextualPonder>

import { ArtifactBody, Button, usePonder, usePonderModels } from 'parable/panes/placeholders';

const ponder = usePonder();
const models = usePonderModels(); // [{ id, name, maker, logoDomain }]

<Button onClick={() => ponder.ask('Which category grew most this month, and why?', { model: 'strong' })}>
  Ask
</Button>
<ArtifactBody text={ponder.answer} format="markdown" />

import { PlottedPath, PlottedPathWalk } from 'parable/panes/placeholders';

const [walk, setWalk] = useState(0);
const path = {
  title: '128 late orders',
  steps: [
    {
      id: 'sources',
      title: 'Where it comes from',
      bullets: [{ icon: 'fa-brands fa-shopify', text: 'Your store’s orders.' }],
    },
    {
      id: 'regions',
      title: 'Late orders by region',
      bullets: [{ icon: 'fa-solid fa-truck', text: 'Orders that arrived after the promised date.' }],
    },
  ],
};

<PlottedPathWalk at={walk} count={path.steps.length} onWalk={setWalk} />
<PlottedPath path={path} walk={walk} onWalk={setWalk} />

import { PlottedPath, usePonderSource } from 'parable/panes/placeholders';

const source = usePonderSource();
const request = { target: { pane: 'plotsTab', label: plot.title }, part: plot.plot_key, subject: true as const };
const turn = source?.path?.(request, update => {
  if (update.kind === 'path') setPath(update.path);
});

​

Providers

• Its title is Populate this Parable while the Parable cannot populate (a Required group is not met, or no Provider has data yet), and Improve this Parable after that. No heading repeats it.
• Where the Parable has groups of both roles, two labels split them: Required, then Optional.
• Each group is a row of a card tree: its name, a mark that says whether its rule is met, and its rule (“At least 1”, “At most 1”, “Exactly 1”). The rule fades out once it is met, and back in while the row is hovered, focused or open. A group that is not met starts open.
• Open, a group lists its Providers by logo and name, with Connect, or Fix on one that needs attention. Neither a group nor a Provider shows a description.
• At the bottom of a group, each above a border: Connected folds the Providers the Workspace has, and, in an “exactly 1” or “at most 1” group that has its one, Other folds the Providers the reader cannot add.

import { ImproveParable } from 'parable/panes/placeholders';

const MEETINGS = [
  { provider: 'google', name: 'Google Workspace', domain: 'google.com', group: 'Calendars' },
  { provider: 'zoom', name: 'Zoom', domain: 'zoom.us', group: 'Calls' },
];

// A hook: the component calls it, inside its own error boundary.
function useConnections() {
  const read = plots.providerConnections();
  return read.status === 'ready' ? read.rows : null;
}

<ImproveParable providers={MEETINGS} emphasis={['Calendars']} useConnections={useConnections}>
  <HoursChart />
</ImproveParable>

WITH folded AS (
  SELECT
    w.id,
    trim(BOTH '_' FROM regexp_replace(lower(w.connector_slug), '[^a-z0-9]+', '_', 'g')) AS slug,
    CASE
      WHEN w.disabled_at IS NOT NULL THEN 'attention'
      WHEN coalesce(
        CASE WHEN w.connection_status IN ('sync_queued', 'initial_syncing', 'update_syncing')
             THEN w.last_non_sync_status END,
        w.connection_status
      ) IN ('sync_partial_success', 'transform_quality_degraded', 'ingestion_stale',
            'schedule_paused', 'manual_validation_required', 'validation_pending',
            'sync_failed', 'config_invalid', 'credential_error', 'internal_error', 'disabled')
        THEN 'attention'
      ELSE 'connected'
    END AS connection
  FROM workspace.providers w
  WHERE w.setup_finished
),
with_data AS (
  SELECT DISTINCT provider_id FROM workspace.stream_data
),
connected AS (
  SELECT
    CASE WHEN regexp_like(f.slug, '^[0-9]') THEN concat('p_', f.slug) ELSE f.slug END AS provider,
    bool_or(f.connection = 'connected') AS healthy,
    bool_or(d.provider_id IS NOT NULL) AS has_data
  FROM folded f
  LEFT JOIN with_data d ON d.provider_id = f.id
  GROUP BY 1
)
SELECT
  provider,
  CASE
    WHEN NOT healthy THEN 'attention'
    WHEN NOT has_data THEN 'waiting'
    ELSE 'connected'
  END AS connection
FROM connected

streams AS (
  SELECT provider_id, bool_or(enabled AND platform_tap_name = 'replies') AS replies_on
  FROM workspace.provider_connections
  GROUP BY provider_id
),
-- in folded's CASE, before ELSE 'connected':
--   WHEN lower(w.connector_slug) = 'slack' AND NOT coalesce(s.replies_on, false)
--     THEN 'attention'

• Wrapping a visual, it shows a chip at the visual’s bottom right on hover, with the logos of the unmet groups’ Providers. On a visual that ends in a <footer>, the chip centers on the footer’s row. The chip opens the Improve panel: in a side sheet for declared groups, else in a popover.
• With no children, it is the Improve this Parable band: how many of the groups are met, and the panel, folded until opened.
• PopulateParable wraps a Pane’s content and draws the panel in its place while a Required to Populate group has fewer connected than its rule asks, or while no Provider has data or needs attention, with a description of what the Parable shows once it has data. While a connected Provider waits for its first data, its heading is Waiting for first data from and the Provider’s name.

​

Audiences

import { AudiencePicker, audienceWidens } from 'parable/panes/placeholders';

<AudiencePicker
  label="Who can rename for everyone?"
  choices={choices}
  value={audience}
  onChange={next => save(next)}
  disabled={!canChange}
/>

​

Services

import {
  Kysely, DummyDriver, PostgresAdapter,
  PostgresIntrospector, PostgresQueryCompiler,
} from 'kysely';

​

Storage

​

If the preview fails

​

Security

​

Stability

• 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
• a small and a large device, from the device buttons, where the Pane has layouts for more than one size.