@caqophony/ui 0.3.0 → 0.4.0

package/dist/material-art.d.mts

@@ -0,0 +1,125 @@
+import { ReactElement } from 'react';
+import { Tone } from './material-tones.mjs';
+
+/**
+ * #5962 (epic #5944 step 4) — the art slot's one renderer. A product's art is
+ * data, a closed tree a generated app holds as JSON, and this is the only code
+ * that turns it into SVG. So there is no art source to police: a script, a
+ * handler, an external reference, `foreignObject` or a computed element has no
+ * way to be written in the format, and this file has no case for it.
+ *
+ * Each attribute is written out by name from the node's own fields, so a key the
+ * format does not have reaches nothing. An element or a paint outside the format
+ * throws here, even if the tree skipped its check: the validator, which is not
+ * published, gives the exact errors at build time.
+ *
+ * Published alone as `@caqophony/ui/material-art`, built with no client directive
+ * (`server-entries.json`), so a server component can render art. It imports only
+ * the tone tables, and not `cn`: a client chunk here would carry the directive.
+ *
+ * Held from the authors until step 5, with the rest of `material`.
+ *
+ * Authored by Caqophony
+ */
+
+/** A tone, or no paint, or the colour of the surrounding text (a mark in a header). */
+type ArtPaint = Tone | 'none' | 'currentColor';
+type ArtTransform = {
+    op: 'translate';
+    x: number;
+    y: number;
+} | {
+    op: 'rotate';
+    deg: number;
+    cx?: number;
+    cy?: number;
+} | {
+    op: 'scale';
+    by: number;
+};
+/** What every element may say about how it is drawn. */
+interface ArtDrawing {
+    stroke?: ArtPaint;
+    strokeWidth?: number;
+    strokeDasharray?: readonly number[];
+    strokeLinecap?: 'butt' | 'round' | 'square';
+    strokeLinejoin?: 'miter' | 'round' | 'bevel';
+    opacity?: number;
+    transform?: readonly ArtTransform[];
+}
+/** A shape with an area. A `line` has none, so it takes no fill. */
+interface ArtFilled extends ArtDrawing {
+    fill?: ArtPaint;
+}
+interface ArtGroup extends ArtFilled {
+    el: 'g';
+    children: readonly ArtNode[];
+}
+interface ArtPath extends ArtFilled {
+    el: 'path';
+    d: string;
+}
+interface ArtRect extends ArtFilled {
+    el: 'rect';
+    x?: number;
+    y?: number;
+    width: number;
+    height: number;
+    rx?: number;
+    ry?: number;
+}
+interface ArtCircle extends ArtFilled {
+    el: 'circle';
+    cx: number;
+    cy: number;
+    r: number;
+}
+interface ArtEllipse extends ArtFilled {
+    el: 'ellipse';
+    cx: number;
+    cy: number;
+    rx: number;
+    ry: number;
+}
+interface ArtLine extends ArtDrawing {
+    el: 'line';
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+}
+interface ArtPoly extends ArtFilled {
+    el: 'polygon' | 'polyline';
+    points: ReadonlyArray<readonly [number, number]>;
+}
+interface ArtText extends ArtFilled {
+    el: 'text';
+    x: number;
+    y: number;
+    anchor?: 'start' | 'middle' | 'end';
+    fontSize: number;
+    fontWeight?: 400 | 500 | 600 | 700;
+    /** Words on the page, apart from the drawing: step 5 holds them to the Brief. */
+    copy: string;
+}
+type ArtNode = ArtGroup | ArtPath | ArtRect | ArtCircle | ArtEllipse | ArtLine | ArtPoly | ArtText;
+/** One SVG: `0 0 width height`, covering its box. */
+interface ArtFrame {
+    width: number;
+    height: number;
+    /** Which part stays in view when the box's shape differs. */
+    anchor: 'top' | 'center' | 'bottom' | 'right';
+    /** Show only on a phone or only from `md` up. */
+    only?: 'phone' | 'desktop';
+    nodes: readonly ArtNode[];
+}
+/** A piece of art: one frame, or a phone frame and a desktop frame. */
+interface ArtTree {
+    frames: readonly ArtFrame[];
+}
+/** Draws a piece of art, for a `Figure`'s slot or a mark. */
+declare function Art({ tree }: {
+    tree: ArtTree;
+}): ReactElement;
+
+export { Art, type ArtCircle, type ArtDrawing, type ArtEllipse, type ArtFilled, type ArtFrame, type ArtGroup, type ArtLine, type ArtNode, type ArtPaint, type ArtPath, type ArtPoly, type ArtRect, type ArtText, type ArtTransform, type ArtTree };

package/dist/material-art.js

@@ -0,0 +1,204 @@
+// src/material/tones.ts
+var FILL = {
+  "night-0": "fill-night-0",
+  "night-1": "fill-night-1",
+  "night-2": "fill-night-2",
+  "sky-0": "fill-sky-0",
+  "sky-1": "fill-sky-1",
+  "sky-2": "fill-sky-2",
+  "sky-3": "fill-sky-3",
+  "sky-4": "fill-sky-4",
+  glow: "fill-glow",
+  "glow-soft": "fill-glow-soft",
+  "glow-pale": "fill-glow-pale",
+  canvas: "fill-canvas",
+  "mist-1": "fill-mist-1",
+  "mist-2": "fill-mist-2",
+  "mist-3": "fill-mist-3",
+  paper: "fill-paper",
+  ink: "fill-ink",
+  page: "fill-background"
+};
+var STROKE = {
+  "night-0": "stroke-night-0",
+  "night-1": "stroke-night-1",
+  "night-2": "stroke-night-2",
+  "sky-0": "stroke-sky-0",
+  "sky-1": "stroke-sky-1",
+  "sky-2": "stroke-sky-2",
+  "sky-3": "stroke-sky-3",
+  "sky-4": "stroke-sky-4",
+  glow: "stroke-glow",
+  "glow-soft": "stroke-glow-soft",
+  "glow-pale": "stroke-glow-pale",
+  canvas: "stroke-canvas",
+  "mist-1": "stroke-mist-1",
+  "mist-2": "stroke-mist-2",
+  "mist-3": "stroke-mist-3",
+  paper: "stroke-paper",
+  ink: "stroke-ink",
+  page: "stroke-background"
+};
+
+// src/material/art.tsx
+import { Fragment, jsx } from "react/jsx-runtime";
+var ANCHOR = {
+  top: "xMidYMin slice",
+  center: "xMidYMid slice",
+  bottom: "xMidYMax slice",
+  right: "xMaxYMid slice"
+};
+var SHOWN = {
+  phone: "size-full md:hidden",
+  desktop: "hidden size-full md:block"
+};
+function classOf(table, paint, attribute) {
+  if (!Object.prototype.hasOwnProperty.call(table, paint))
+    throw new Error(
+      `Art: \`${attribute}\` is ${JSON.stringify(paint)}, which is not a tone`
+    );
+  return table[paint];
+}
+function painted({ fill, stroke }) {
+  const direct = (paint) => paint === "none" || paint === "currentColor" ? paint : void 0;
+  const classes = [
+    fill === void 0 || direct(fill) ? "" : classOf(FILL, fill, "fill"),
+    stroke === void 0 || direct(stroke) ? "" : classOf(STROKE, stroke, "stroke")
+  ].filter(Boolean);
+  return {
+    fill: direct(fill),
+    stroke: direct(stroke),
+    className: classes.length > 0 ? classes.join(" ") : void 0
+  };
+}
+function transformOf(step) {
+  switch (step.op) {
+    case "translate":
+      return `translate(${step.x} ${step.y})`;
+    case "scale":
+      return `scale(${step.by})`;
+    case "rotate":
+      return step.cx === void 0 || step.cy === void 0 ? `rotate(${step.deg})` : `rotate(${step.deg} ${step.cx} ${step.cy})`;
+  }
+}
+function drawn(node) {
+  return {
+    ...painted(node),
+    strokeWidth: node.strokeWidth,
+    strokeDasharray: node.strokeDasharray?.join(" "),
+    strokeLinecap: node.strokeLinecap,
+    strokeLinejoin: node.strokeLinejoin,
+    opacity: node.opacity,
+    transform: node.transform?.map(transformOf).join(" ")
+  };
+}
+function render(node, key) {
+  switch (node.el) {
+    case "g":
+      return /* @__PURE__ */ jsx("g", { ...drawn(node), children: node.children.map(render) }, key);
+    case "path":
+      return /* @__PURE__ */ jsx("path", { d: node.d, ...drawn(node) }, key);
+    case "rect":
+      return /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: node.x,
+          y: node.y,
+          width: node.width,
+          height: node.height,
+          rx: node.rx,
+          ry: node.ry,
+          ...drawn(node)
+        },
+        key
+      );
+    case "circle":
+      return /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: node.cx,
+          cy: node.cy,
+          r: node.r,
+          ...drawn(node)
+        },
+        key
+      );
+    case "ellipse":
+      return /* @__PURE__ */ jsx(
+        "ellipse",
+        {
+          cx: node.cx,
+          cy: node.cy,
+          rx: node.rx,
+          ry: node.ry,
+          ...drawn(node)
+        },
+        key
+      );
+    case "line":
+      return /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: node.x1,
+          y1: node.y1,
+          x2: node.x2,
+          y2: node.y2,
+          ...drawn(node)
+        },
+        key
+      );
+    case "polygon":
+      return /* @__PURE__ */ jsx(
+        "polygon",
+        {
+          points: node.points.map((p) => p.join(",")).join(" "),
+          ...drawn(node)
+        },
+        key
+      );
+    case "polyline":
+      return /* @__PURE__ */ jsx(
+        "polyline",
+        {
+          points: node.points.map((p) => p.join(",")).join(" "),
+          ...drawn(node)
+        },
+        key
+      );
+    case "text":
+      return /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: node.x,
+          y: node.y,
+          textAnchor: node.anchor,
+          fontSize: node.fontSize,
+          fontWeight: node.fontWeight,
+          ...drawn(node),
+          children: node.copy
+        },
+        key
+      );
+    default:
+      throw new Error(
+        `Art: <${String(node.el)}> is not an art element`
+        // SAFE: reached only by a tree that skipped its check
+      );
+  }
+}
+function Art({ tree }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: tree.frames.map((frame, i) => /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: `0 0 ${frame.width} ${frame.height}`,
+      preserveAspectRatio: ANCHOR[frame.anchor],
+      "aria-hidden": "true",
+      className: frame.only ? SHOWN[frame.only] : "size-full",
+      children: frame.nodes.map(render)
+    },
+    i
+  )) });
+}
+export {
+  Art
+};

package/dist/material-tones.d.mts

@@ -0,0 +1,23 @@
+/**
+ * #5956 — the closed tone vocabulary of the material layer. Each tone is a
+ * theme token, derived per project from its brand (`deriveMaterialRamp`), so a
+ * theme change reaches every band, figure and field. Every class is written
+ * out in full so an app's Tailwind scan sees it. `Tone` is held to the ramp's
+ * own step list by `material-primitives-5956.test.ts`.
+ *
+ * `paper` and `ink` hold in dark mode, as a brand step does: art printed on
+ * white stays on white. `page` is the page's own surface, in either scheme: the
+ * tone for a band that should follow it, such as the one behind a footer.
+ *
+ * Published alone as `@caqophony/ui/material-tones`, with no client directive
+ * (`server-entries.json`), so a server component's art can read `FILL` and
+ * `STROKE`. It must import nothing: a shared chunk would carry the directive.
+ *
+ * Authored by Caqophony
+ */
+type Tone = 'night-0' | 'night-1' | 'night-2' | 'sky-0' | 'sky-1' | 'sky-2' | 'sky-3' | 'sky-4' | 'glow' | 'glow-soft' | 'glow-pale' | 'canvas' | 'mist-1' | 'mist-2' | 'mist-3' | 'paper' | 'ink' | 'page';
+declare const FILL: Readonly<Record<Tone, string>>;
+declare const STROKE: Readonly<Record<Tone, string>>;
+declare const BG: Readonly<Record<Tone, string>>;
+
+export { BG, FILL, STROKE, type Tone };

package/dist/material-tones.js

@@ -0,0 +1,66 @@
+// src/material/tones.ts
+var FILL = {
+  "night-0": "fill-night-0",
+  "night-1": "fill-night-1",
+  "night-2": "fill-night-2",
+  "sky-0": "fill-sky-0",
+  "sky-1": "fill-sky-1",
+  "sky-2": "fill-sky-2",
+  "sky-3": "fill-sky-3",
+  "sky-4": "fill-sky-4",
+  glow: "fill-glow",
+  "glow-soft": "fill-glow-soft",
+  "glow-pale": "fill-glow-pale",
+  canvas: "fill-canvas",
+  "mist-1": "fill-mist-1",
+  "mist-2": "fill-mist-2",
+  "mist-3": "fill-mist-3",
+  paper: "fill-paper",
+  ink: "fill-ink",
+  page: "fill-background"
+};
+var STROKE = {
+  "night-0": "stroke-night-0",
+  "night-1": "stroke-night-1",
+  "night-2": "stroke-night-2",
+  "sky-0": "stroke-sky-0",
+  "sky-1": "stroke-sky-1",
+  "sky-2": "stroke-sky-2",
+  "sky-3": "stroke-sky-3",
+  "sky-4": "stroke-sky-4",
+  glow: "stroke-glow",
+  "glow-soft": "stroke-glow-soft",
+  "glow-pale": "stroke-glow-pale",
+  canvas: "stroke-canvas",
+  "mist-1": "stroke-mist-1",
+  "mist-2": "stroke-mist-2",
+  "mist-3": "stroke-mist-3",
+  paper: "stroke-paper",
+  ink: "stroke-ink",
+  page: "stroke-background"
+};
+var BG = {
+  "night-0": "bg-night-0",
+  "night-1": "bg-night-1",
+  "night-2": "bg-night-2",
+  "sky-0": "bg-sky-0",
+  "sky-1": "bg-sky-1",
+  "sky-2": "bg-sky-2",
+  "sky-3": "bg-sky-3",
+  "sky-4": "bg-sky-4",
+  glow: "bg-glow",
+  "glow-soft": "bg-glow-soft",
+  "glow-pale": "bg-glow-pale",
+  canvas: "bg-canvas",
+  "mist-1": "bg-mist-1",
+  "mist-2": "bg-mist-2",
+  "mist-3": "bg-mist-3",
+  paper: "bg-paper",
+  ink: "bg-ink",
+  page: "bg-background"
+};
+export {
+  BG,
+  FILL,
+  STROKE
+};

package/dist/material.d.mts

@@ -0,0 +1,279 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, ReactElement } from 'react';
+import { I as IconName } from './icon.d-DQqyySj2.mjs';
+import 'lucide-react';
+
+/**
+ * #5956 — the closed tone vocabulary of the material layer. Each tone is a
+ * theme token, derived per project from its brand (`deriveMaterialRamp`), so a
+ * theme change reaches every band, figure and field. Every class is written
+ * out in full so an app's Tailwind scan sees it. `Tone` is held to the ramp's
+ * own step list by `material-primitives-5956.test.ts`.
+ *
+ * `paper` and `ink` hold in dark mode, as a brand step does: art printed on
+ * white stays on white. `page` is the page's own surface, in either scheme: the
+ * tone for a band that should follow it, such as the one behind a footer.
+ *
+ * Published alone as `@caqophony/ui/material-tones`, with no client directive
+ * (`server-entries.json`), so a server component's art can read `FILL` and
+ * `STROKE`. It must import nothing: a shared chunk would carry the directive.
+ *
+ * Authored by Caqophony
+ */
+type Tone = 'night-0' | 'night-1' | 'night-2' | 'sky-0' | 'sky-1' | 'sky-2' | 'sky-3' | 'sky-4' | 'glow' | 'glow-soft' | 'glow-pale' | 'canvas' | 'mist-1' | 'mist-2' | 'mist-3' | 'paper' | 'ink' | 'page';
+
+interface BandEdgeSpec {
+    /** A layer of clouds behind this band's own. */
+    via?: Tone;
+    /** The same seed draws the same edge. */
+    seed: number;
+}
+interface BandProps {
+    /** The band's ground, a theme tone. */
+    tone: Tone;
+    /** Re-scope the library's tokens for the subtree: `night` turns every library component inside for a dark ground. */
+    surface?: 'day' | 'night';
+    /** Vertical rhythm. `none`: the content sets it. */
+    pad?: 'none' | 'tight' | 'section' | 'open';
+    /** The previous band's `Vignette placement="hang"` hangs over this one's top edge. */
+    under?: 'none' | 'overhang';
+    /** This band's clouds sit over the seam, so bands meet as layers, not a ruled line. They rise into the band above's bottom padding, up to 108px (58px on a phone). */
+    edge?: BandEdgeSpec;
+    /** Layered behind the content, clipped to the band, hidden from assistive tech. */
+    backdrop?: ReactNode;
+    /** Sit above the next band (its hanging `Vignette`). */
+    raised?: boolean;
+    id?: string;
+    children: ReactNode;
+}
+/** A full-bleed page section with a ground, a backdrop and a token surface. */
+declare function Band({ tone, surface, pad, under, edge, backdrop, raised, id, children, }: BandProps): react_jsx_runtime.JSX.Element;
+
+/** What a generated bitmap must be when it replaces this slot's stand-in. */
+interface FigureSpec {
+    role: string;
+    aspect: '16:9' | '8:5' | '4:3' | '3:2' | '1:1' | '4:5' | 'full-bleed';
+    /** The theme tones the bitmap must stay inside. */
+    palette: readonly Tone[];
+    prompt: string;
+}
+interface FigureProps {
+    spec: FigureSpec;
+    /** Real alt text; empty only for decoration, which hides the content from assistive tech. */
+    alt: string;
+    /**
+     * The art slot: one element of the app's own art, which shows until the bitmap
+     * exists and must look finished. An element, not a component: this is a client
+     * entry, and a server component cannot pass a function across that boundary.
+     * The type pins the shape; `Art`, drawing checked data, pins the content.
+     */
+    children: ReactElement;
+    /** `fill`: stretch to the parent box (a backdrop). */
+    fit?: 'aspect' | 'fill';
+}
+/** An image slot that records the spec of the bitmap that will replace it. */
+declare function Figure({ spec, alt, children, fit }: FigureProps): react_jsx_runtime.JSX.Element;
+
+declare const GAP: {
+    readonly 1: "gap-1";
+    readonly 2: "gap-2";
+    readonly 3: "gap-3";
+    readonly 4: "gap-4";
+    readonly 6: "gap-6";
+    readonly 8: "gap-8";
+    readonly 10: "gap-10";
+    readonly 12: "gap-12";
+    readonly 16: "gap-16";
+};
+type Gap = keyof typeof GAP;
+interface StackProps {
+    gap: Gap;
+    align?: 'stretch' | 'start' | 'center';
+    children: ReactNode;
+}
+/** A vertical run with one gap. */
+declare function Stack({ gap, align, children }: StackProps): react_jsx_runtime.JSX.Element;
+interface InlineProps {
+    gap: Gap;
+    justify?: 'start' | 'between' | 'center';
+    align?: 'center' | 'start';
+    /** Below `sm`, each child takes the full width (a phone's CTA row). */
+    fillOnPhone?: boolean;
+    children: ReactNode;
+}
+/** A wrapping horizontal run. */
+declare function Inline({ gap, justify, align, fillOnPhone, children, }: InlineProps): react_jsx_runtime.JSX.Element;
+interface ColumnsProps {
+    /** The desktop column count. */
+    count: 2 | 3 | 4;
+    gap: Gap;
+    /** On a phone: `stack` one column; `scroll` keep the columns in a side-scrolling row. */
+    phone: 'stack' | 'scroll';
+    /** A dashed route from each column to the next, level with a 48px marker. */
+    connect?: boolean;
+    children: ReactNode;
+}
+/** Equal columns that know what they do on a phone. */
+declare function Columns({ count, gap, phone, connect, children, }: ColumnsProps): react_jsx_runtime.JSX.Element;
+interface SplitProps {
+    /** How the width divides between the first and second child. */
+    ratio: 'even' | 'text-media';
+    /** Draw the second child first from `md` up. */
+    reverse?: boolean;
+    gap: Gap;
+    children: readonly [ReactNode, ReactNode];
+}
+/** Text beside media; stacks on a phone with the text first. */
+declare function Split({ ratio, reverse, gap, children }: SplitProps): react_jsx_runtime.JSX.Element;
+interface SpacerProps {
+    /** `phone-sky`: room for the backdrop's picture on a phone, nothing from `md` up. */
+    size: 'hero' | 'section' | 'phone-sky';
+}
+/** Empty rhythm between two things that are not in one `Stack`. */
+declare function Spacer({ size }: SpacerProps): react_jsx_runtime.JSX.Element;
+interface InsetProps {
+    pad: 3 | 4 | 6;
+    children: ReactNode;
+}
+/** Padding, for a library `Card` that has none without its header parts. */
+declare function Inset({ pad, children }: InsetProps): react_jsx_runtime.JSX.Element;
+
+interface SkyFieldProps {
+    width: number;
+    height: number;
+    /** Which part stays in view when the box's shape differs. */
+    anchor: 'top' | 'center' | 'bottom' | 'right';
+    /** Show only on a phone or only from `md` up. */
+    only?: 'phone' | 'desktop';
+    ground: Tone;
+    children: ReactNode;
+}
+/** A flat illustration field: an SVG that covers its box. */
+declare function SkyField({ width, height, anchor, only, ground, children, }: SkyFieldProps): react_jsx_runtime.JSX.Element;
+interface HaloProps {
+    cx: number;
+    cy: number;
+    /** Outermost first: each ring steps down the ramp, with no gradient. */
+    rings: ReadonlyArray<{
+        r: number;
+        tone: Tone;
+    }>;
+}
+/** Concentric stepped rings: a sun, or any glow, as flat print layers. */
+declare function Halo({ cx, cy, rings }: HaloProps): react_jsx_runtime.JSX.Element;
+interface CloudBankProps {
+    /** Field width and height. */
+    width: number;
+    height: number;
+    /** The bank's top line. */
+    y: number;
+    /** Bump radius range: `min` at least 0.1, `max` no less than `min`, at most 2000 bumps. */
+    min: number;
+    max: number;
+    /** How far the top line climbs from the left edge to the right. */
+    climb?: number;
+    /** Bumps wander around `y` instead of drifting from it: a long bank stays on its line. */
+    level?: boolean;
+    seed: number;
+    tone: Tone;
+}
+/** A scalloped cloud bank running edge to edge and filled to the field's bottom. */
+declare function CloudBank({ width, height, y, min, max, climb, level, seed, tone, }: CloudBankProps): react_jsx_runtime.JSX.Element;
+interface RidgeProps {
+    width: number;
+    height: number;
+    y: number;
+    /** How high the ridge rolls above `y`. */
+    rise: number;
+    /** The number of swells across the field. */
+    swells: number;
+    seed: number;
+    tone: Tone;
+}
+/** A smooth ridge line, filled to the field's bottom. */
+declare function Ridge({ width, height, y, rise, swells, seed, tone, }: RidgeProps): react_jsx_runtime.JSX.Element;
+interface StarsProps {
+    width: number;
+    /** The band they scatter in, from the top. */
+    height: number;
+    count: number;
+    seed: number;
+    tone: Tone;
+}
+/** A scatter of small dots. */
+declare function Stars({ width, height, count, seed, tone }: StarsProps): react_jsx_runtime.JSX.Element;
+interface RoutePoint {
+    x: number;
+    y: number;
+    label?: string;
+    /** Which side of the point its label sits. */
+    side?: 'above' | 'below' | 'left' | 'right';
+    /** `passed`: filled; `here`: ringed; `ahead`: hollow. */
+    state: 'passed' | 'here' | 'ahead';
+}
+interface RouteLineProps {
+    /** The waypoints, in order: at least one. */
+    points: readonly [RoutePoint, ...RoutePoint[]];
+    tone: Tone;
+    /** The halo behind a `here` point and the fill of `ahead` points. */
+    markTone: Tone;
+    /** The label size, in field units. */
+    labelSize: number;
+}
+/** A dashed route through waypoints, each marked by its state. */
+declare function RouteLine({ points, tone, markTone, labelSize, }: RouteLineProps): react_jsx_runtime.JSX.Element;
+
+interface DisplayProps {
+    /** The scale step; `poster` is the page's one largest moment. */
+    level: 'poster' | 'headline' | 'title';
+    /** The heading element (the document outline, separate from the size). */
+    as: 'h1' | 'h2' | 'h3';
+    align?: 'start' | 'center';
+    /** The line-length cap, in `ch` steps of the scale. */
+    measure?: 'narrow' | 'wide' | 'none';
+    children: ReactNode;
+}
+/** Display type: the theme's heading face on the display scale. */
+declare function Display({ level, as: Tag, align, measure, children, }: DisplayProps): react_jsx_runtime.JSX.Element;
+interface TextProps {
+    size?: 'lede' | 'body' | 'small' | 'micro';
+    tone?: 'default' | 'muted' | 'accent';
+    weight?: 'normal' | 'medium' | 'bold';
+    align?: 'start' | 'center';
+    /** Cap the line length for reading. */
+    measure?: boolean;
+    as?: 'p' | 'span' | 'div';
+    children: ReactNode;
+}
+/** Running text on the theme's body face. */
+declare function Text({ size, tone, weight, align, measure, as: Tag, children, }: TextProps): react_jsx_runtime.JSX.Element;
+
+interface VignetteProps {
+    /** The screen's name in the title bar, as the product calls it. */
+    title: string;
+    /** The title bar's icon. */
+    icon: IconName;
+    /** Marks the content as sample; required, a product view never makes a claim. */
+    sampleLabel: string;
+    /** The token surface inside the frame: the page's own tokens, or the night band's. */
+    surface?: 'day' | 'night';
+    /** `hang`: pull the frame over the band below it. */
+    placement?: 'inline' | 'hang';
+    /** `bottom`: cut the view off at a fixed height, fading out, as a crop. */
+    crop?: 'none' | 'bottom';
+    /** Real library components at their real size. */
+    children: ReactNode;
+}
+/** A raised window holding real library components, marked as sample. */
+declare function Vignette({ title, icon, sampleLabel, surface, placement, crop, children, }: VignetteProps): react_jsx_runtime.JSX.Element;
+
+interface WordmarkProps {
+    name: string;
+    /** The product's mark, drawn in `currentColor` in a 24px box. */
+    mark: ReactNode;
+    href: string;
+}
+/** A product name with its mark. */
+declare function Wordmark({ name, mark, href }: WordmarkProps): react_jsx_runtime.JSX.Element;
+
+export { Band, type BandEdgeSpec, type BandProps, CloudBank, type CloudBankProps, Columns, type ColumnsProps, Display, type DisplayProps, Figure, type FigureProps, type FigureSpec, type Gap, Halo, type HaloProps, Inline, type InlineProps, Inset, type InsetProps, Ridge, type RidgeProps, RouteLine, type RouteLineProps, type RoutePoint, SkyField, type SkyFieldProps, Spacer, type SpacerProps, Split, type SplitProps, Stack, type StackProps, Stars, type StarsProps, Text, type TextProps, type Tone, Vignette, type VignetteProps, Wordmark, type WordmarkProps };