Shells and frames

Every page of the hub sits in the viewer shell: a sidebar, a 52px toolbar, a stage and an index panel that slides over it. A slide on the stage sits in the fixed sheet, which scales a 1600 by 900 artifact to fit and draws the deck's edge grid on it. Every live figure on these docs pages sits in a plate. This page takes the three frames apart.

The viewer shellCopy Anchor Link

ViewerShell is a fixed frame over the whole viewport, so the plate draws a model of it at a window size: every region stands where the shell's stylesheets put it and draws only the edges the junction table gives it. The stage holds the live parts: the fixed Sheet with its SheetFrame in slide mode, the GridView in grid mode, and the flow Sheet holding a book page in book mode.

Window sets the model's size, and Stage switches the mode as the toolbar's segmented control does. List density picks the sidebar's two widths, List and Index open and close the sidebar and the index panel, and Present takes the chrome away. At 900 pixels and under the list starts closed and floats over the stage above a scrim when it opens, and the sheet pads 12 pixels and sits under the toolbar. A click on either half of the slide pages it.

The shell counts as narrow at 900 pixels and under, and on a phone on its side, which matches (pointer: coarse) and (max-height: 500px). Present closes the sidebar's column and removes the toolbar and the progress line, so the stage is the window.

Import and propsCopy Anchor Link

import { ViewerShell } from '@/components/viewer/ViewerShell';

<ViewerShell
  count='52 slides'
  id='deck'
  keys='paged'
  mark='gt'
  modes={['slide', 'grid', 'book']}
  sections={sections}
  surfaces={surfaces}
  thumb='shot'
  title='Deck'
>
  <Sheet variant='fixed'>{slides}</Sheet>
</ViewerShell>;

Children read the shell's state with usePtShell(): the mode, the active item, the count, narrow and present, and the setters.

The fixed sheetCopy Anchor Link

The fixed sheet is the edge of a fixed-size artifact: a slide, a site exhibit at 1440 pixels, a pane of the compare rig. The plate mounts the live Sheet and SheetFrame on a stage of the size the sliders give, inside the two contexts ViewerShell would publish, and prints what fitSheet() returns. Previous and Next page it, and so does a click on either half of the sheet.

fitSheet() scales the 1600 by 900 stage to the space left after the pad and centers it, then places the sheet's border box one pixel out, so the border sits around the scaled content and never over it. The ring is drawn as a mat with no shadow: a 1px --pt-hair border on the sheet, a 1px gap of paper, and a 1px --pt-hair-soft outline. The stage around it paints --pt-plate, the letterbox. At 900 pixels and under the pad drops to 12 pixels and the sheet sits under the toolbar, and Present removes the ring, the plate and the pad.

Import and propsCopy Anchor Link

import { Sheet, fitSheet } from '@/components/viewer/Sheet';

<Sheet variant='fixed' w={1600} h={900}>
  {slides}
</Sheet>;
<Sheet variant='flow' scrollRef={region}>
  {book}
</Sheet>;
const fit = fitSheet({ aw: 1232, ah: 846, w: 1600, h: 900, pad: 28 });

SheetFrame takes wordmark and counter, both on by default; thumbnail and page clones turn both off to carry the grid alone.

The reading columnCopy Anchor Link

The flow sheet holds the deck's book column: 1280 pixels at most, padded by --pt-col-pad-x at each side, --pt-title-clear over the title and 120 pixels under the last block. The column draws no border, no ground and no mat, and every structural rule of a book runs across the whole stage. The book mode of the plate above draws a book page as a skeleton at these values.

The plateCopy Anchor Link

Every live demo on these pages is a Plate: a card with the stage on top and the controls row under it, one hairline between them. This plate's own props are its controls, so the stage, the corner tag and the ground change as they are set.

The stage follows the docs theme unless night pins it to ink, which the GPU fields need because their palettes are tuned to an ink ground. A fit stage takes its content's height, padded 52 pixels over so the corner tag clears it. A lazy plate mounts its children only when it comes within 180 pixels of the viewport, and a moves plate says in its controls row when reduced motion holds it still.

Import and propsCopy Anchor Link

import { Choice, Range, Toggle } from '@/components/docs/demos/controls';
import Plate from '@/components/docs/demos/Plate';

<Plate controls={<Range label='Gap' max={7} min={1} step={0.5} value={gap} onChange={setGap} />} height={280} moves tag='<DoubledLine />'>
  {drawing}
</Plate>;

The plates on the page layout pages lay a page part out at its own width and scale it into the stage, so a 1440 pixel page reads inside the docs column without overflowing it. The media queries inside a model still follow the real viewport, so each model reads its breakpoint values from the width it is given.