@cueplusplus/ui 0.11.0 → 0.12.0

package/dist/layout/frames.js

@@ -0,0 +1,298 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { GROUND_CLASSES } from "./_ground.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/layout/frames.tsx
+/** One arrow press where nothing on the page has declared the space ladder's top rung. */
+const STEP_FALLBACK = 32;
+/** What a rem is worth where no document can be asked — `use-density.ts`'s own assumption. */
+const ASSUMED_ROOT_FONT_SIZE = 16;
+/** The root's font size, for a rung declared in rem. */
+function rootFontSize() {
+	if (typeof document === "undefined") return ASSUMED_ROOT_FONT_SIZE;
+	const size = Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
+	return Number.isFinite(size) && size > 0 ? size : ASSUMED_ROOT_FONT_SIZE;
+}
+/**
+* One rung of `--cue-space-8` in CSS pixels, read off the canvas itself.
+*
+* Off the canvas and not off the root, because the rung is a density token and
+* a canvas may sit inside a `<Density>` island — a compact board steps by a
+* compact rung, which is the whole point of spending a token instead of a
+* number. Read at the keypress rather than cached: the density under it can
+* change between two presses and nothing re-renders when it does.
+*
+* `null` is not a return value here. A page that declared nothing — a consumer
+* who imported no stylesheet, a server's first paint, jsdom — still has to move
+* when a reader presses an arrow, so there is a fallback and it is a number
+* this file owns.
+*/
+function rungOf(canvas) {
+	if (typeof window === "undefined") return STEP_FALLBACK;
+	const declared = window.getComputedStyle(canvas).getPropertyValue("--cue-space-8").trim();
+	const length = Number.parseFloat(declared);
+	if (!Number.isFinite(length) || length <= 0) return STEP_FALLBACK;
+	return declared.endsWith("rem") ? length * rootFontSize() : length;
+}
+/**
+* Where a drag may not start: the elements whose whole job is to be pressed.
+*
+* Matched with `closest` and not on the target alone, because a control in this
+* house is usually a box drawn round something else — an icon, a span, a label.
+* A drag that starts on the icon started on the button, and a pan that began
+* there would take the pointer capture with it and the press would never land.
+*
+* **The `[role=…]` half is the same sentence about controls this library draws
+* out of a `div`.** A `DropdownMenu.Item` is a `<div role="menuitem">` whose
+* label is a `<span>` inside it; an `option`, a `tab`, a `treeitem` are all that
+* shape. Without them here a reader who clicked a menu row *on its words* had
+* the canvas take the pointer capture and the `click` retargeted away — the row
+* worked from the keyboard and worked on its padding, and did nothing where the
+* text was. That was reported against the frame name menu and is a defect of
+* this predicate rather than of that menu.
+*
+* The list is ARIA's **standalone widget roles** — the ones that *are* a control
+* rather than a box holding controls, so a composite (`menu`, `listbox`,
+* `tablist`, `tree`, `radiogroup`, `toolbar`, `grid`) is deliberately absent:
+* those are chrome, and a drag on a menu's own padding is a pan. Three
+* standalone ones are absent too, each for its own reason — `progressbar` is
+* read and never operated, `tabpanel` is the content a `tab` switches to rather
+* than the thing pressed, and `gridcell` is a box holding content, so a drag
+* across a table inside a frame stays a pan.
+*
+* An allowlist and not a denylist of container roles, because the two fail in
+* opposite directions: a role missing from this list leaves the old behaviour
+* (the element itself is still matched by {@link ROLE_BEARING}), while a
+* container role missing from a denylist would silently stop the board panning.
+*/
+const CONTROLS = "button, a, input, select, textarea, [role=button], [role=checkbox], [role=link], [role=menuitem], [role=menuitemcheckbox], [role=menuitemradio], [role=option], [role=radio], [role=scrollbar], [role=searchbox], [role=separator], [role=slider], [role=spinbutton], [role=switch], [role=tab], [role=textbox], [role=treeitem]";
+/**
+* And the element directly under the pointer, if it bears a role of its own.
+*
+* On the target alone — `matches` and never `closest` — and that is the whole
+* difference between a canvas that pans and one that only offers to. A
+* `Preview` in its frame presentation is a `role="group"` and this canvas is a
+* `role="region"`, so nearly every point on a board has a role-bearing
+* ancestor. A board is mostly frames, and "drag to pan" that worked only in the
+* gaps between them would be a hint that lies. So a role-bearing *ancestor* is
+* a frame's chrome and a drag there is a pan; only a role-bearing element under
+* the pointer itself is something to press rather than something to grab.
+*
+* That is still true, and it is not the whole rule: the ancestors that are
+* *controls* rather than chrome are named in {@link CONTROLS} and matched with
+* `closest` there. This line stays `matches` for everything else, which is what
+* keeps a `role="group"` frame a thing to grab.
+*/
+const ROLE_BEARING = "[role]";
+/** Whether a pointer that went down here is pressing something rather than grabbing the board. */
+function isControl(target, canvas) {
+	if (target === canvas) return false;
+	return target.closest(CONTROLS) !== null || target.matches(ROLE_BEARING);
+}
+/** Static class per height, off the two the spec measured. Tailwind scans text. */
+const HEIGHT_CLASSES = {
+	short: "h-[18.5rem]",
+	tall: "h-[27rem]"
+};
+/**
+* The box: the height, the ground, the border, and the positioning context the
+* hint needs.
+*
+* Two elements and not one, because the hint has to stay in the corner while
+* the frames move under it. A hint absolutely positioned inside the scroller
+* would slide away with the first pan; one positioned against a box the
+* scroller fills stays where a reader left it. The ground is on the box for the
+* same reason — a board's grid does not move with its art.
+*/
+const ROOT_CLASS = "relative min-w-0 overflow-hidden rounded-(--radius-surface) border border-border";
+/**
+* The scroller: a row of frames, sideways only, with a rung of the space
+* ladder's top between them.
+*
+* `overflow-y: hidden` is the design and not an oversight — the board is "not
+* very high, not full screen", and a canvas that scrolled both ways would be a
+* viewport a reader can get lost in. `scroll-smooth` pairs with
+* `motion-reduce:scroll-auto` so the preference is honoured declaratively;
+* there is no frame loop here for `reduced-motion.test.ts` to find, and there
+* must not be.
+*/
+const CANVAS_CLASS = "flex h-full min-w-0 items-start gap-(--cue-space-8) overflow-x-auto overflow-y-hidden scroll-smooth p-(--cue-space-6) outline-none motion-reduce:scroll-auto focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent";
+/** The affordance, and only where there is something to afford. */
+const PANNABLE_CLASS = "cursor-grab";
+/**
+* While panning: the grabbing cursor, no text selection, and **no smooth
+* scrolling**. `scroll-behavior: smooth` animates every `scrollLeft` write, and
+* a drag writes one per pointer move — the canvas would lag the pointer by a
+* whole animation. `twMerge` resolves this against `scroll-smooth` above,
+* last one wins.
+*/
+const PANNING_CLASS = "cursor-grabbing scroll-auto select-none";
+/** The line in the corner. `pointer-events-none`, or it would swallow the drag it describes. */
+const HINT_CLASS = "pointer-events-none absolute right-(--cue-space-4) bottom-(--cue-space-3) z-10 font-mono text-(length:--cue-text-micro) text-fg-subtle";
+/**
+* The canvas: a short, wide, focusable scroll region that holds frames.
+*
+* **It knows nothing about its children.** It does not count them, index them
+* or select one — a canvas that knew its frames would be a manifest API, and
+* this is a slot API. `hint` is where a caller puts the count it knows and this
+* does not.
+*
+* @example
+* <Frames.Root label="Button frames" hint="drag to pan · 8 frames">
+*   <Preview presentation="frame" label="Tone" count={4}>…</Preview>
+* </Frames.Root>
+*/
+const FramesRoot = React.forwardRef(function FramesRoot({ children, label, height = "short", ground = "dots", hint, pan = true, className, ...elementProps }, ref) {
+	const drag = React.useRef(null);
+	const canvasRef = React.useRef(null);
+	const [panning, setPanning] = React.useState(false);
+	React.useEffect(() => {
+		if (pan) return;
+		const started = drag.current;
+		if (started === null) return;
+		canvasRef.current?.releasePointerCapture?.(started.id);
+		drag.current = null;
+		setPanning(false);
+	}, [pan]);
+	const scroll = (event) => {
+		if (event.defaultPrevented || event.target !== event.currentTarget) return;
+		const canvas = event.currentTarget;
+		let next = null;
+		if (event.key === "ArrowRight") next = canvas.scrollLeft + rungOf(canvas);
+		else if (event.key === "ArrowLeft") next = canvas.scrollLeft - rungOf(canvas);
+		else if (event.key === "PageDown") next = canvas.scrollLeft + canvas.clientWidth;
+		else if (event.key === "PageUp") next = canvas.scrollLeft - canvas.clientWidth;
+		else if (event.key === "Home") next = 0;
+		else if (event.key === "End") next = canvas.scrollWidth;
+		if (next === null) return;
+		event.preventDefault();
+		canvas.scrollLeft = Math.max(0, next);
+	};
+	const pointer = {
+		onPointerDown: (event) => {
+			if (event.button !== 0) return;
+			const canvas = event.currentTarget;
+			const target = event.target;
+			if (target !== null && isControl(target, canvas)) return;
+			canvas.setPointerCapture?.(event.pointerId);
+			drag.current = {
+				x: event.clientX,
+				left: canvas.scrollLeft,
+				id: event.pointerId
+			};
+			setPanning(true);
+		},
+		onPointerMove: (event) => {
+			const started = drag.current;
+			if (started === null) return;
+			event.currentTarget.scrollLeft = Math.max(0, started.left - (event.clientX - started.x));
+		},
+		onPointerUp: (event) => {
+			if (drag.current === null) return;
+			event.currentTarget.releasePointerCapture?.(event.pointerId);
+			drag.current = null;
+			setPanning(false);
+		},
+		onPointerCancel: () => {
+			drag.current = null;
+			setPanning(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...elementProps,
+		ref,
+		"data-slot": "frames",
+		className: cn(ROOT_CLASS, HEIGHT_CLASSES[height], GROUND_CLASSES[ground], className),
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: canvasRef,
+			role: "region",
+			tabIndex: 0,
+			"aria-label": label,
+			"data-slot": "frames-canvas",
+			"data-panning": panning ? "true" : void 0,
+			className: cn(CANVAS_CLASS, pan && PANNABLE_CLASS, panning && PANNING_CLASS),
+			onKeyDown: scroll,
+			...pan ? pointer : {},
+			children
+		}), hint === void 0 ? null : /* @__PURE__ */ jsx("span", {
+			"data-slot": "frames-hint",
+			className: HINT_CLASS,
+			children: hint
+		})]
+	});
+});
+/** One cell: the specimen, and the line under it. */
+const ITEM_CLASS = "flex min-w-0 shrink-0 flex-col items-center gap-(--cue-space-2) rounded-(--radius-control) p-(--cue-space-2)";
+/** The one a reader is inspecting. An outline and not a border: a border would move the cell. */
+const ITEM_SELECTED_CLASS = "outline-2 outline-solid -outline-offset-1 outline-accent";
+const ITEM_BODY_CLASS = "flex min-w-0 items-center justify-center";
+/**
+* The caption, and the two properties that decide whether it is painted.
+*
+* Properties and not props threaded down from the frame: the switch belongs to
+* the frame — a reader turns captions off for a whole frame from its settings
+* popover, never for one item — and a property is how a switch reaches every
+* descendant without every descendant declaring it.
+*
+* **`opacity`, never `visibility`.** Zero opacity keeps the box *and* keeps the
+* node in the accessibility tree, which is exactly what §4.1 Decision 4
+* refuses to give up; `visibility: hidden` would keep the box and drop the
+* node. `pointer-events` rides with it so an unpainted caption cannot be
+* clicked or dragged over — two properties because `opacity` wants a number
+* and `pointer-events` wants a keyword, and a custom property is untyped text
+* that cannot be both.
+*
+* The **fallbacks** are what make an item legal outside a Preview: nothing
+* declares either property there, so the caption resolves to `1` and `auto` and
+* behaves like any other line, rather than inheriting the empty string and
+* vanishing.
+*/
+const ITEM_CAPTION_CLASS = "min-w-0 truncate text-center font-mono text-(length:--cue-text-micro) text-fg-subtle [opacity:var(--preview-captions,1)] [pointer-events:var(--preview-captions-pe,auto)]";
+/**
+* A design canvas: frames side by side, each holding one axis of one component.
+*
+* `Frames.Root` is the canvas — short, wide, scrollable sideways, focusable,
+* and pannable with the pointer. `Frames.Item` is one captioned cell, and it is
+* used **inside a `Preview`** rather than inside the Root. The two are apart
+* because that is how they are used, and a props-only API cannot say it.
+*
+* **The canvas knows nothing about its children.** It does not count them, does
+* not index them and does not select one; `hint` is where a caller puts what it
+* knows. A canvas that knew its frames would be a manifest API, and this is a
+* slot API.
+*
+* @example
+* <Frames.Root label="Button frames" hint="drag to pan · 3 frames">
+*   <Preview presentation="frame" label="Tone" count={3} name={<ToneMenu />}>
+*     <div className="flex flex-wrap items-end gap-(--cue-space-6)">
+*       <Frames.Item caption="accent"><Button tone="accent">Take cue</Button></Frames.Item>
+*       <Frames.Item caption="ok"><Button tone="ok">Take cue</Button></Frames.Item>
+*       <Frames.Item caption="warn"><Button tone="warn">Take cue</Button></Frames.Item>
+*     </div>
+*   </Preview>
+* </Frames.Root>
+*/
+const Frames = {
+	Root: FramesRoot,
+	Item: React.forwardRef(function FramesItem({ children, caption, selected = false, className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsxs("div", {
+			...elementProps,
+			ref,
+			"data-slot": "frames-item",
+			"data-selected": selected ? "true" : void 0,
+			className: cn(ITEM_CLASS, selected && ITEM_SELECTED_CLASS, className),
+			children: [/* @__PURE__ */ jsx("div", {
+				"data-slot": "frames-item-body",
+				className: ITEM_BODY_CLASS,
+				children
+			}), caption === void 0 ? null : /* @__PURE__ */ jsx("span", {
+				"data-slot": "frames-item-caption",
+				className: ITEM_CAPTION_CLASS,
+				children: caption
+			})]
+		});
+	})
+};
+//#endregion
+export { Frames };

package/dist/layout/index.d.ts

@@ -8,10 +8,12 @@ import { Breadcrumb, BreadcrumbItem, BreadcrumbProps } from "./breadcrumb.js";
 import { Card, CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardRootProps, CardTitleProps } from "./card.js";
 import { Collapsible, CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps, Disclosure, DisclosureProps } from "./collapsible.js";
 import { DescriptionList, DescriptionListDetailProps, DescriptionListLayout, DescriptionListRootProps, DescriptionListTermProps } from "./description-list.js";
+import { PreviewGround } from "./_ground.js";
+import { Frames, FramesHeight, FramesItemProps, FramesRootProps } from "./frames.js";
 import { Grid, GridColumns, GridProps } from "./grid.js";
 import { Item, ItemProps, itemVariants } from "./item.js";
 import { Pagination, PaginationEntry, PaginationProps, paginationRange } from "./pagination.js";
-import { Preview, PreviewAxis, PreviewProps, PreviewResizeOptions } from "./preview.js";
+import { Preview, PreviewAxis, PreviewPresentation, PreviewProps, PreviewResizeOptions } from "./preview.js";
 import { Stepper, StepperProps, StepperState, StepperStep } from "./stepper.js";
 import { Timeline, TimelineContentProps, TimelineItemProps, TimelineMarkerProps, TimelineRootProps } from "./timeline.js";
-export { Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, Bento, type BentoColumns, type BentoMinHeight, type BentoRootProps, type BentoRowSpan, type BentoRows, type BentoSpan, type BentoTileProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, Collapsible, type CollapsiblePanelProps, type CollapsibleRootProps, type CollapsibleTriggerProps, Container, type ContainerProps, type ContainerWidth, DescriptionList, type DescriptionListDetailProps, type DescriptionListLayout, type DescriptionListRootProps, type DescriptionListTermProps, Disclosure, type DisclosureProps, Grid, type GridColumns, type GridProps, Item, type ItemProps, Link, type LinkProps, Pagination, type PaginationEntry, type PaginationProps, Preview, type PreviewAxis, type PreviewProps, type PreviewResizeOptions, Sidebar, type SidebarItemProps, type SidebarRailProps, type SidebarRootProps, type SidebarSectionProps, type SpaceStep, Stack, type StackAlign, type StackJustify, type StackProps, Stepper, type StepperProps, type StepperState, type StepperStep, Timeline, type TimelineContentProps, type TimelineItemProps, type TimelineMarkerProps, type TimelineRootProps, itemVariants, linkVariants, paginationRange, useSidebar };
+export { Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, Bento, type BentoColumns, type BentoMinHeight, type BentoRootProps, type BentoRowSpan, type BentoRows, type BentoSpan, type BentoTileProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, Collapsible, type CollapsiblePanelProps, type CollapsibleRootProps, type CollapsibleTriggerProps, Container, type ContainerProps, type ContainerWidth, DescriptionList, type DescriptionListDetailProps, type DescriptionListLayout, type DescriptionListRootProps, type DescriptionListTermProps, Disclosure, type DisclosureProps, Frames, type FramesHeight, type FramesItemProps, type FramesRootProps, Grid, type GridColumns, type GridProps, Item, type ItemProps, Link, type LinkProps, Pagination, type PaginationEntry, type PaginationProps, Preview, type PreviewAxis, type PreviewGround, type PreviewPresentation, type PreviewProps, type PreviewResizeOptions, Sidebar, type SidebarItemProps, type SidebarRailProps, type SidebarRootProps, type SidebarSectionProps, type SpaceStep, Stack, type StackAlign, type StackJustify, type StackProps, Stepper, type StepperProps, type StepperState, type StepperStep, Timeline, type TimelineContentProps, type TimelineItemProps, type TimelineMarkerProps, type TimelineRootProps, itemVariants, linkVariants, paginationRange, useSidebar };

package/dist/layout/index.js

@@ -8,10 +8,11 @@ import { Breadcrumb } from "./breadcrumb.js";
 import { Card } from "./card.js";
 import { Collapsible, Disclosure } from "./collapsible.js";
 import { DescriptionList } from "./description-list.js";
+import { Frames } from "./frames.js";
 import { Grid } from "./grid.js";
 import { Item, itemVariants } from "./item.js";
 import { Pagination, paginationRange } from "./pagination.js";
 import { Preview } from "./preview.js";
 import { Stepper } from "./stepper.js";
 import { Timeline } from "./timeline.js";
-export { Accordion, Bento, Breadcrumb, Card, Collapsible, Container, DescriptionList, Disclosure, Grid, Item, Link, Pagination, Preview, Sidebar, Stack, Stepper, Timeline, itemVariants, linkVariants, paginationRange, useSidebar };
+export { Accordion, Bento, Breadcrumb, Card, Collapsible, Container, DescriptionList, Disclosure, Frames, Grid, Item, Link, Pagination, Preview, Sidebar, Stack, Stepper, Timeline, itemVariants, linkVariants, paginationRange, useSidebar };

package/dist/layout/preview.d.ts

@@ -1,6 +1,9 @@
+import { PreviewGround } from "./_ground.js";
 import * as React from "react";
 import { Density, FontName, Mode, ThemeName } from "@cueplusplus/theme-base";
 //#region src/layout/preview.d.ts
+/** Where the chrome sits and what the stage's ground is. */
+type PreviewPresentation = "panel" | "frame";
 /** Which edges of the stage a reader may drag. */
 type PreviewAxis = "x" | "y" | "both";
 /** How far a resizable stage may go, in CSS pixels, and along which axes. */
@@ -74,11 +77,51 @@ interface PreviewProps extends Omit<React.ComponentPropsWithoutRef<"div">, "chil
   tools?: React.ReactNode;
   /** The strip under the stage: the thin text and the way out. Drawn outside the stage. */
   footer?: React.ReactNode;
+  /**
+   * `"panel"` (the default, and what every existing caller gets): a bordered
+   * card, `tools` floating at the stage's top right, `footer` under it.
+   * `"frame"`: a design-canvas frame — the label row drawn *above* the stage
+   * rather than over it, four crosshair corners at the stage's outer corners,
+   * and a transparent stage so whatever the frame sits on shows through.
+   */
+  presentation?: PreviewPresentation;
+  /**
+   * The label row's leading slot, drawn only in `"frame"`. A plain node, or a
+   * control: apps/docs passes a `DropdownMenu` whose trigger is the frame's
+   * name. Unset, the row opens with `label` as text.
+   *
+   * A slot and not a built-in menu, because `Preview` imports no overlay today
+   * and `/` draws seventeen of it under a 766-byte headroom.
+   */
+  name?: React.ReactNode;
+  /** The count drawn after the name — how many items this frame holds. Frame only. */
+  count?: number;
+  /**
+   * The stage's ground. Defaults to `"dots"` in `"panel"` and `"none"` in
+   * `"frame"`, where the canvas under it already carries a ground and two dot
+   * grids at different pitches read as a moiré.
+   */
+  ground?: PreviewGround;
+  /**
+   * Whether `Frames.Item` captions are shown inside this stage. Defaults to
+   * `true`. Off is paint and nothing more: a hidden caption is still rendered,
+   * still in the tree and still read aloud (§4.1 Decision 4).
+   */
+  captions?: boolean;
 }
 /**
- * A frame for one component: a stage that is its own theme island, a slot for
+ * A card for one component: a stage that is its own theme island, a slot for
  * tools at the top right, and a footer.
  *
+ * **Two presentations, one stage.** `"panel"`, the default and what every
+ * existing caller gets, is that card: a border, a fill, a dot grid under the
+ * specimen, and the tools floating over the stage's top right. `"frame"` is a
+ * design-canvas frame — no card, no border, no fill; the name, the count and
+ * the tools sit in a row *above* the stage rather than over it, four crosshairs
+ * mark the stage's outer corners, and the stage paints nothing by default, so
+ * whatever canvas the frame sits on shows through. Everything below holds in
+ * both.
+ *
  * **The stage is the island; the chrome is not.** `theme`, `mode`, `density`
  * and `font` land on the stage element only, and the stage republishes the
  * theme and density contexts so an overlay opened on it follows it. The tools,
@@ -94,7 +137,7 @@ interface PreviewProps extends Omit<React.ComponentPropsWithoutRef<"div">, "chil
  * that is under `maxWidth`. Not `Resizable`, which is split panes on an
  * optional peer.
  *
- * Props, not a compound: one stage and two slots, each saying what it is.
+ * Props, not a compound: one stage and its slots, each saying what it is.
  *
  * @example
  * <Preview label="Button preview" tools={<IconButton aria-label="Configure Button" icon={Wrench} />}>
@@ -104,7 +147,11 @@ interface PreviewProps extends Omit<React.ComponentPropsWithoutRef<"div">, "chil
  * <Preview label="Chip preview" theme="terminal" density="compact" resizable>
  *   <Chip tone="accent">Standby</Chip>
  * </Preview>
+ * @example
+ * <Preview label="Button" presentation="frame" count={3}>
+ *   <Button variant="primary">Take cue</Button>
+ * </Preview>
  */
 declare const Preview: React.ForwardRefExoticComponent<PreviewProps & React.RefAttributes<HTMLDivElement>>;
 //#endregion
-export { Preview, PreviewAxis, PreviewProps, PreviewResizeOptions };
+export { Preview, PreviewAxis, type PreviewGround, PreviewPresentation, PreviewProps, PreviewResizeOptions };