@nanisoft/prism-ui 0.13.0 → 0.15.0

package/dist/blocks/backdrop-01/backdrop.js

@@ -0,0 +1,170 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from '../../components/ui/button.js';
+import { Section, SectionHeading } from '../../components/ui/section.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * The class each cycle is named by, which is the whole of how a Block picks one.
+ *
+ * Seven entries and no shorthand anywhere near them. `prism-ambient-travel` reads
+ * its length from `var(--ambient-travel)` and its easing from
+ * `var(--ambient-ease-linear)` in the one stylesheet a consumer downloads, so the
+ * component package states a mechanism and the token package prices it. The
+ * rejected shape is `animate-[prism-travel_7.2s_linear_infinite]`, which type
+ * checks, renders, and reintroduces exactly the two problems the ambient scale
+ * was written to solve: a duration that is a literal in a Block, and a mechanism
+ * smuggled into the value tier.
+ */
+const AMBIENT = {
+    travel: 'prism-ambient-travel',
+    sweep: 'prism-ambient-sweep',
+    drift: 'prism-ambient-drift',
+    scan: 'prism-ambient-scan',
+    pulse: 'prism-ambient-pulse',
+    shimmer: 'prism-ambient-shimmer',
+    rise: 'prism-ambient-rise',
+};
+/**
+ * The opacity each of the two steps sets.
+ *
+ * Tailwind's multiplier rather than a token, and that is the rule DESIGN.md states
+ * for the whole property: an opacity or alpha modifier takes its multiplier from
+ * Tailwind because the token tier publishes no opacity step, and what this Block
+ * is dimming is a figure drawn in contract colours, not a colour of its own. The
+ * two steps are a factor of two apart rather than a nudge, because the whole point
+ * of the prop is that a caller can see the difference. The rejected third step is
+ * `loud`, and a scale that opens a third step opens a fourth on the next request,
+ * and a backdrop whose intensity is a slider is decoration again.
+ */
+const INTENSITY = {
+    subtle: 'opacity-40',
+    present: 'opacity-80',
+};
+/**
+ * A band with a live field running behind it, and a control that stops the field.
+ *
+ * **The test that decides whether motion belongs here at all, in the terms this
+ * repository uses. Stop the animation. Look at the band. Is the figure still
+ * true, and is every mark of it still readable?** If both answers are yes then
+ * the movement was emphasis and it belongs on a band, because emphasis is a thing
+ * a reader can lose and get back. If stopping it leaves an empty rectangle, then
+ * the thing this was built from was never a figure at all. It was a video with
+ * extra steps, it is the Component it was built with that is wrong, and no
+ * amount of restraint on the Block will turn it back into a drawing. So the
+ * question is asked of the figure and not of the band, which is why `figure` is a
+ * required slot: a backdrop is a frame for somebody else's drawing, and the only
+ * claim this Item makes is that the drawing survives being still.
+ *
+ * **Which of the two figures this Block is, and why it refuses to decide for the
+ * caller.** The motion law sorts figures into two, and the two are different
+ * things rather than one thing with a flag. A figure that carries a claim has to
+ * name itself to a screen reader, because the claim is the whole of what it is
+ * for, and `PulseGraph` and `PulseSeries` both require a label for that reason. A
+ * figure that is atmosphere names nothing, because a field of dots is not
+ * information and a screen reader being made to read one is a cost with no reader
+ * attached, and `SignalField` is `aria-hidden` by default for exactly that
+ * reason. This Block is the **claim** half: `label` is required and the field
+ * layer publishes it, so a caller who has a claim to make has a name for it here
+ * and never has to reach past the band. What it will not do is grow a
+ * `decorative` arm for the other half, and the reason is specific rather than
+ * cautious: the figure is the caller's and the caller's figure has already
+ * answered the question. `SignalField` arrives `aria-hidden` and `PulseGraph`
+ * arrives named, so a `decorative` prop here would be a second answer to a
+ * question two Components have already answered, and the disagreement between
+ * them would be invisible in the rendered result and audible in a screen reader.
+ * The atmosphere half is not missing from this system. It is `SignalField` with
+ * nothing passed, which is the cheapest way to draw it and needs no flag here.
+ *
+ * **Intensity is opacity on a wrapper, and that is the whole of the decision.**
+ * It is not a new token and not a new keyframe, and it is not a length. A length
+ * would be the failure the ambient scale was built to close: a cycle measured in
+ * hundreds of milliseconds is a flicker, the emitted-contract test fails every
+ * `ambient` member below 1000ms and says so in the failure, and an intensity that
+ * scaled the cycle would let a caller reach that floor by asking for a brighter
+ * backdrop. A demonstration that reads as a flicker is the one outcome the floor
+ * exists to prevent, so the second axis is the only one left that cannot produce
+ * it. What the prop actually decides is how present the field is behind the copy,
+ * which is a question about contrast between two things on one surface and
+ * nothing to do with time.
+ *
+ * **The pause control is a real button, and its two labels are props.** That is
+ * the decision, and the reason to state it is the alternative:
+ * `prism-ambient-paused` is a published utility in the one stylesheet, and it is
+ * published rather than left to each consumer because the alternative is four
+ * products each writing their own stop mechanism and at least one of them getting
+ * it wrong in the specific way of restarting the cycle when the figure scrolls
+ * back into view. So the stop mechanism is one class, in one place, and the thing
+ * that puts it on is this control. The two labels are the caller's because they
+ * are the sentences a reader hears, and because a band whose button says "Pause"
+ * in a product whose language has no word for pausing is a control the consumer
+ * cannot fix without forking the library. The Block throws without them rather
+ * than shipping an English button, for the same reason `InstrumentPanel01` throws
+ * on a state with no words beside it.
+ *
+ * **It is a client Component, and the rejected alternative is the interesting
+ * part.** The pause is state, so the module carries `'use client'`, and the
+ * first answer considered was to keep this a server Component and take the
+ * control as a `ReactNode` slot. That would have been wrong for a specific
+ * reason rather than a stylistic one, and the props are where the reason shows.
+ * `pauseControl` is a boolean and `pauseLabel` and `resumeLabel` are two
+ * strings, so a slot is not merely rejected, it is inexpressible: those three
+ * props describe a control this Block draws, and a Block that handed the button
+ * back would be asking the caller for a different set of props and getting a
+ * second decision about whether the stop mechanism exists at all. A slot hands
+ * the stop mechanism back to the consumer, which is exactly what publishing
+ * `prism-ambient-paused` was meant to stop, and it would have put two more
+ * invented sentences in front of every call site, so forty call sites would be
+ * forty chances to write "Pause animation" in English. A slot is the right
+ * shape for a control the consumer owns, such as a range selector or a
+ * fullscreen toggle, and the wrong shape for the one control whose entire
+ * behaviour is this Block's own published class. The cost of the client
+ * boundary is real and worth naming: the module is measured by
+ * `check-client-budget`, and a consumer who does not want the button can leave
+ * `pauseControl` off and never instantiate the state. The caller's `children`
+ * and `figure` cross the boundary as slots, so a server-rendered figure stays
+ * server-rendered and this band costs a consumer the module and not the
+ * drawing.
+ *
+ * **Nothing here is hidden and nothing waits for a script.** No rule in the
+ * ambient layer sets a resting `opacity: 0` and no figure this Block wraps waits
+ * for an intersection, a timer or a frame, so the band is complete and legible at
+ * first paint, to a reader with scripting off, in a print stylesheet, and to a
+ * crawler. The `prefers-reduced-motion` block in the stylesheet is one
+ * `animation: none`, and because every element's resting state is its full form,
+ * that reader gets the same band with the field still drawn. The pause control is
+ * the manual equivalent of the same thing, which is why it is a first-class state
+ * rather than a prop that hides a wrapper: hiding the wrapper would take the
+ * figure with it, and pausing keeps it.
+ *
+ * **What the cycle suits is the caller's figure, and this Block will not hide
+ * that.** `drift` and `pulse` are the two whose resting form is the figure's own
+ * full form, so they are safe on any drawing. `travel`, `sweep`, `scan` and
+ * `shimmer` carry something *across* a field, which is what the stylesheet says
+ * they are for, and a caller who puts one on a figure narrower than the band is
+ * asking for a marker to leave. The band clips, so nothing escapes the frame, and
+ * a caller who pauses and finds the field thin has learned which cycle their
+ * figure wanted. That is the falsifiable test above doing its job, and it is a
+ * better outcome than the alternative this Block refused: choosing the cycle for
+ * the caller, which is a claim about their figure that a component cannot check.
+ *
+ * It is a client Component in its entirety, and the only thing in it that needs a
+ * client is the pause. The frame, the field layer, the wash and the section
+ * around them are server-renderable markup, and the two slots a caller fills
+ * cross the boundary rather than dragging their own trees into it.
+ */
+export function Backdrop01({ eyebrow, title, description, children, figure, label, field, intensity = 'subtle', paused = false, pauseControl = false, pauseLabel, resumeLabel, headingLevel = 'h2', className, }) {
+    if (pauseControl && (!pauseLabel || !resumeLabel)) {
+        throw new Error('Backdrop01: pauseControl is set and the two labels were not both passed, so the control would ' +
+            'ship a sentence this Block did not receive. Pass the words your readers use while the field runs ' +
+            'and while it is stopped, or leave pauseControl off and put your own control in children.');
+    }
+    // The Block's own stop, seeded from the caller's `paused` and owned from then on
+    // when `pauseControl` is set. With the control off, `paused` is exactly the
+    // caller's value and this state is never read, so a consumer that owns the
+    // state somewhere larger pays for a hook and nothing else.
+    const [stopped, setStopped] = useState(paused);
+    const isPaused = pauseControl ? stopped : paused;
+    return (_jsxs(Section, { children: [title ? (_jsx(SectionHeading, { as: headingLevel, align: "left", eyebrow: eyebrow, title: title, description: description, className: "mb-10" })) : null, _jsxs("div", { "data-slot": "backdrop-01", "data-field": field, "data-intensity": intensity, "data-paused": isPaused || undefined, className: cn('bg-card text-card-foreground relative isolate overflow-hidden rounded-xl border shadow-sm', className), children: [_jsx("div", { "data-slot": "backdrop-field", className: cn('pointer-events-none absolute inset-0 -z-20 overflow-hidden', AMBIENT[field], INTENSITY[intensity], isPaused && 'prism-ambient-paused'), children: _jsx("figure", { "data-slot": "backdrop-plot", "aria-label": label, className: "size-full", children: figure }) }), _jsx("div", { "data-slot": "backdrop-wash", "aria-hidden": "true", className: "bg-background/40 pointer-events-none absolute inset-0 -z-10" }), _jsxs("div", { "data-slot": "backdrop-content", className: "relative flex flex-col gap-6 p-6 sm:p-10", children: [children, pauseControl ? (_jsx("div", { "data-slot": "backdrop-controls", className: "flex items-center gap-2", children: _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setStopped((was) => !was), children: isPaused ? resumeLabel : pauseLabel }) })) : null] })] })] }));
+}
+export default Backdrop01;

package/dist/blocks/backdrop-01/index.d.ts

@@ -0,0 +1,3 @@
+export { Backdrop01, default } from './backdrop.js';
+export type { Backdrop01Field, Backdrop01Intensity, Backdrop01Props } from './backdrop.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/blocks/backdrop-01/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/backdrop-01/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAMhD,YAAY,EAAE,eAAe,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA"}

package/dist/blocks/backdrop-01/index.js

@@ -0,0 +1 @@
+export { Backdrop01, default } from './backdrop.js';

package/dist/blocks/bento-01/bento-01.d.ts

@@ -0,0 +1,136 @@
+import type { ReactNode } from 'react';
+import { type HeadingLevel } from '../../components/ui/section.js';
+/**
+ * How many of the six tracks a cell takes.
+ *
+ * Three named members and not a number, and the reason is that a number is a layout
+ * the Block has to honour exactly. A caller passing `colSpan: 3` has chosen a grid,
+ * and the Block's job becomes reproducing that grid rather than laying out a
+ * composition, which is the opposite of what a Block is for. Worse, a number has no
+ * opinion about whether it can be laid out: a `colSpan` of 7 in a six-track grid is
+ * a number that type-checks, renders, and produces a composition nobody can reason
+ * about. Three named spans are three layouts that compose, because two thirds and a
+ * half and a full width are the three relationships a set of cells can have to each
+ * other, and they compose without the caller having to do the arithmetic.
+ *
+ * The names describe the cell rather than the tracks, which is what makes them
+ * portable: a caller who means "a third of the width" does not have to know that
+ * this Block happens to be six tracks wide.
+ */
+export type BentoSpan = 'sm' | 'md' | 'lg';
+/**
+ * The surface a cell is drawn on.
+ *
+ * `default` is the card surface every other Component sits on. `muted` is the quiet
+ * surface, for a cell that carries supporting material rather than the argument.
+ * `primary` is the pack's own hue and means *this is the cell to read first*, which is
+ * a claim and therefore the caller's to make and rarely the right answer twice.
+ *
+ * The three are closed because a fourth would be a pastel, and a pastel is a fill for
+ * a large area and never a signal: a tile of pastel behind one word is a signal a
+ * reader has to learn, and a reader who has learned three of them has spent attention
+ * on a palette rather than on a page.
+ */
+export type BentoTone = 'default' | 'muted' | 'primary';
+/**
+ * One cell: an identifier, a span, and whatever the cell holds.
+ *
+ * `id` is required and is never rendered, for the reason `ProductGrid01`'s id is: it
+ * is the key, it is carried on the markup as `data-cell`, and a caller who can name
+ * a cell can address it in a test or in a `data-pack` boundary above it. A cell with
+ * no id and no title would be a box.
+ */
+export type BentoCell = {
+    /** A key unique within the set, carried on the markup as `data-cell`. */
+    id: string;
+    /** How much of the width the cell takes. See `BentoSpan`. */
+    span: BentoSpan;
+    /** The cell's title, rendered as a heading one step below the section. */
+    title?: string;
+    /** The cell's body. A node, so a caller may compose a list or a figure under it. */
+    body?: ReactNode;
+    /** The cell's media, drawn above the title. A node the consumer composes. */
+    media?: ReactNode;
+    /** The surface the cell is drawn on. See `BentoTone`. */
+    tone?: BentoTone;
+};
+/**
+ * The props a Bento01 takes. Every string is a prop and the Block ships none.
+ */
+export type Bento01Props = {
+    /**
+     * The cells, in the order the caller composed them.
+     *
+     * Order and span together are the composition, and both are the caller's. See the
+     * Block's own JSDoc for why this Block holds no opinion about which cell is the big
+     * one.
+     */
+    cells: readonly BentoCell[];
+    /** Optional label above the section title. See the No-Default-Eyebrow Rule. */
+    eyebrow?: string;
+    /** The section title. Omit it for a grid composed under its own heading. */
+    title?: string;
+    /** One or two sentences under the title. */
+    description?: string;
+    /**
+     * Heading level for the section title and, one step below it, for each cell's
+     * title. Defaults to `h2` because a Block is composed, not a page. See
+     * `HeadingLevel`.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Layout only, exactly as on every Component. Changing a Prism-owned visual
+     * property from here is prohibited.
+     */
+    className?: string;
+};
+/**
+ * An asymmetric grid whose composition the caller decides: the cells arrive with an
+ * explicit span and the Block lays them out and frames them.
+ *
+ * **This Block is a layout and not a design, and the whole of that is in whose hands
+ * the composition is.** The tempting version holds a fixed composition: one large
+ * cell, two medium ones, a row of three small ones, with the argument on the left.
+ * That version is a template. A template carries an opinion about hierarchy, every
+ * consumer inherits that opinion, and the consumer who wants the argument on the right
+ * has one of three answers: restyle a catalogue item, which the no-override-path rule
+ * does not allow; wrap it, which is the override path wearing another name; or accept
+ * a page whose most important cell is the one Prism happened to put in the second
+ * position. So the composition is the caller's and this Block holds none of it. It
+ * draws a six-track grid, honours the span it was given, and frames each cell the same
+ * way.
+ *
+ * **The span is a union of three names and not a number, and that is what makes the
+ * caller's composition composable.** A `colSpan: number` prop would be a way of
+ * handing this Block a grid rather than a cell: the Block's job would become
+ * reproducing an arrangement exactly, including the arrangements nobody can lay out,
+ * because a `colSpan` of 7 in a six-track grid type-checks and renders and produces a
+ * composition no reader can reason about. Three names are three relationships a set of
+ * cells can have to each other, a third of the width, half of it, and all of it, and
+ * they add up to compositions by arithmetic the caller never has to do: two thirds
+ * side by side, a half above a third and a third, a full width under a row of three.
+ *
+ * **The grid is six tracks at `lg` and one column below it.** A bento is the one
+ * arrangement on a marketing page that is worse on a phone than a list, because the
+ * asymmetry is the point and a phone has one column to be asymmetric in. Below the
+ * breakpoint every cell is full width and the composition is a stack, which loses the
+ * arrangement and keeps the content, and that is the right trade on a screen 360
+ * pixels wide.
+ *
+ * **Cells are cards, and a card's title is a heading one step below the section.** The
+ * set is a set of titled regions, so the outline says so, and the level is derived
+ * from `headingLevel` rather than written as an `h3`: a Block embedded one level
+ * deeper carries its outline with it instead of announcing six siblings of the section
+ * that introduces them. A cell with no title renders its body alone, which is a cell a
+ * reader cannot jump to by heading, so a title is the right default even though the
+ * type does not require it: a cell of media with no words is a poster.
+ *
+ * It composes `Section` and `SectionHeading`, so it inherits the container and the
+ * vertical rhythm rather than re-deriving either, and it adds no container width and
+ * no section padding of its own.
+ *
+ * It is a server Component: no hook, no state and no client code.
+ */
+export declare function Bento01({ cells, eyebrow, title, description, headingLevel, className, }: Bento01Props): import("react").JSX.Element;
+export default Bento01;
+//# sourceMappingURL=bento-01.d.ts.map

package/dist/blocks/bento-01/bento-01.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bento-01.d.ts","sourceRoot":"","sources":["../../../src/blocks/bento-01/bento-01.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,EAAuC,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAGpG;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE1C;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAA;AAEvD;;;;;;;GAOG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB,yEAAyE;IACzE,EAAE,EAAE,MAAM,CAAA;IACV,6DAA6D;IAC7D,IAAI,EAAE,SAAS,CAAA;IACf,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oFAAoF;IACpF,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,yDAAyD;IACzD,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB;;;;;;OAMG;IACH,KAAK,EAAE,SAAS,SAAS,EAAE,CAAA;IAC3B,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AA0CD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,OAAO,EACP,KAAK,EACL,WAAW,EACX,YAAmB,EACnB,SAAS,GACV,EAAE,YAAY,+BAyCd;AAED,eAAe,OAAO,CAAA"}

package/dist/blocks/bento-01/bento-01.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardDescription, CardTitle } from '../../components/ui/card.js';
+import { Section, SectionHeading, childLevel } from '../../components/ui/section.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * What each named span takes of the six tracks, at the breakpoint the grid appears.
+ *
+ * A map of machine values rather than three conditional class strings, so the
+ * relationship between a span name and a track count is one table a reader can check
+ * in one place. Every value is a `col-span` utility and nothing else: the grid
+ * placement is layout, and layout is the one thing `className` is for, so it lives
+ * here rather than on the caller.
+ */
+const SPAN = {
+    sm: 'lg:col-span-2',
+    md: 'lg:col-span-3',
+    lg: 'lg:col-span-6',
+};
+/**
+ * What each tone adds to the cell's own surface.
+ *
+ * **`primary` sets its own ink as well as its own fill, and that is the rule rather
+ * than a preference.** `check-variant-ink` exists because a fill without an ink is
+ * correct everywhere the design system put it and wrong everywhere else, and the
+ * failure it records measured 1.01:1 in lavender dark: a `Button` carrying
+ * `bg-background` with no `text-` inherited whatever was behind it. `toast.tsx` states
+ * the same rule on the surface where it bites hardest, and a bento cell is that
+ * surface: a cell is a coloured panel with body text sitting on it, so an inherited
+ * ink is not this package's foreground by accident. So `primary` states both halves.
+ *
+ * `muted` states only its fill, and that is a measured decision rather than an
+ * oversight: `Card` declares `bg-card text-card-foreground` on itself and the
+ * override replaces the fill while the ink arrives with the base, so a muted cell
+ * renders the muted surface behind the card's own ink. That pairing is 13.88:1 in the
+ * base pack's dark mode and 16.44:1 in its light, and it is the one pair
+ * `check-contrast.mjs` measures directly.
+ */
+const TONE = {
+    default: '',
+    muted: 'bg-muted',
+    primary: 'bg-primary text-primary-foreground',
+};
+/**
+ * An asymmetric grid whose composition the caller decides: the cells arrive with an
+ * explicit span and the Block lays them out and frames them.
+ *
+ * **This Block is a layout and not a design, and the whole of that is in whose hands
+ * the composition is.** The tempting version holds a fixed composition: one large
+ * cell, two medium ones, a row of three small ones, with the argument on the left.
+ * That version is a template. A template carries an opinion about hierarchy, every
+ * consumer inherits that opinion, and the consumer who wants the argument on the right
+ * has one of three answers: restyle a catalogue item, which the no-override-path rule
+ * does not allow; wrap it, which is the override path wearing another name; or accept
+ * a page whose most important cell is the one Prism happened to put in the second
+ * position. So the composition is the caller's and this Block holds none of it. It
+ * draws a six-track grid, honours the span it was given, and frames each cell the same
+ * way.
+ *
+ * **The span is a union of three names and not a number, and that is what makes the
+ * caller's composition composable.** A `colSpan: number` prop would be a way of
+ * handing this Block a grid rather than a cell: the Block's job would become
+ * reproducing an arrangement exactly, including the arrangements nobody can lay out,
+ * because a `colSpan` of 7 in a six-track grid type-checks and renders and produces a
+ * composition no reader can reason about. Three names are three relationships a set of
+ * cells can have to each other, a third of the width, half of it, and all of it, and
+ * they add up to compositions by arithmetic the caller never has to do: two thirds
+ * side by side, a half above a third and a third, a full width under a row of three.
+ *
+ * **The grid is six tracks at `lg` and one column below it.** A bento is the one
+ * arrangement on a marketing page that is worse on a phone than a list, because the
+ * asymmetry is the point and a phone has one column to be asymmetric in. Below the
+ * breakpoint every cell is full width and the composition is a stack, which loses the
+ * arrangement and keeps the content, and that is the right trade on a screen 360
+ * pixels wide.
+ *
+ * **Cells are cards, and a card's title is a heading one step below the section.** The
+ * set is a set of titled regions, so the outline says so, and the level is derived
+ * from `headingLevel` rather than written as an `h3`: a Block embedded one level
+ * deeper carries its outline with it instead of announcing six siblings of the section
+ * that introduces them. A cell with no title renders its body alone, which is a cell a
+ * reader cannot jump to by heading, so a title is the right default even though the
+ * type does not require it: a cell of media with no words is a poster.
+ *
+ * It composes `Section` and `SectionHeading`, so it inherits the container and the
+ * vertical rhythm rather than re-deriving either, and it adds no container width and
+ * no section padding of its own.
+ *
+ * It is a server Component: no hook, no state and no client code.
+ */
+export function Bento01({ cells, eyebrow, title, description, headingLevel = 'h2', className, }) {
+    // A cell's title is a heading one step below the section that introduces the set,
+    // derived rather than written, so a Block embedded one level deeper carries its
+    // outline with it.
+    const Title = childLevel(headingLevel);
+    return (_jsxs(Section, { "data-slot": "bento-01", className: className, children: [title ? (_jsx(SectionHeading, { as: headingLevel, align: "left", eyebrow: eyebrow, title: title, description: description, className: "mb-12" })) : null, _jsx("div", { "data-slot": "bento-01-grid", className: "grid gap-4 lg:grid-cols-6", children: cells.map((cell) => (_jsx("div", { "data-slot": "bento-01-cell", "data-span": cell.span, className: SPAN[cell.span], children: _jsxs(Card, { className: cn('h-full gap-4 py-6', TONE[cell.tone ?? 'default']), children: [cell.media ? _jsx("div", { "data-slot": "bento-01-media", children: cell.media }) : null, cell.title ? (_jsx(CardTitle, { as: Title, className: "text-base", children: cell.title })) : null, cell.body ? _jsx(CardDescription, { children: cell.body }) : null] }) }, cell.id))) })] }));
+}
+export default Bento01;

package/dist/blocks/bento-01/index.d.ts

@@ -0,0 +1,3 @@
+export { Bento01, default } from './bento-01.js';
+export type { BentoSpan, BentoTone, BentoCell, Bento01Props } from './bento-01.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/blocks/bento-01/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/bento-01/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAK7C,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA"}

package/dist/blocks/bento-01/index.js

@@ -0,0 +1 @@
+export { Bento01, default } from './bento-01.js';