@hanzo/ui 8.4.12 → 8.5.0

package/dist/blocks/screenful.js

@@ -0,0 +1,103 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { ApplyTypography } from '../backends/gui/prose.js';
+import { Box } from '../box.js';
+import { cn } from '../core/cn.js';
+import { Content as Blocks } from './content.js';
+import { has } from './spec.js';
+/**
+ * Is the element mostly on screen?
+ *
+ * Native IntersectionObserver rather than a package: this is the only place in
+ * the library that needs it, and the hook it would replace is fifteen lines.
+ * 0.75 because the caller is deciding whether to PLAY a video — a strip of it
+ * appearing at the edge of the viewport is not someone watching.
+ */
+const useInView = (threshold = 0.75, initial = false) => {
+    const ref = React.useRef(null);
+    const [inView, setInView] = React.useState(initial);
+    React.useEffect(() => {
+        const el = ref.current;
+        if (!el || typeof IntersectionObserver === 'undefined')
+            return;
+        const io = new IntersectionObserver(([e]) => setInView(e.isIntersecting), { threshold });
+        io.observe(el);
+        return () => io.disconnect();
+    }, [threshold]);
+    return { ref, inView };
+};
+/**
+ * A background video that plays only while it is on screen.
+ *
+ * Mounted after the first client render, never on the server: a `<video>` in
+ * server markup is a download that starts before anything has decided the
+ * element is even visible.
+ */
+const Backdrop = ({ block, className, initialInView, }) => {
+    const [mounted, setMounted] = React.useState(false);
+    const { ref, inView } = useInView(0.75, initialInView);
+    React.useEffect(() => setMounted(true), []);
+    if (!mounted)
+        return null;
+    return (_jsx("div", { ref: ref, className: className, children: inView && (_jsx("video", { autoPlay: true, loop: true, muted: true, playsInline: true, style: { margin: 0, height: '100%', width: '100%', objectFit: 'cover' }, children: block.sources?.map((src, i) => (_jsx("source", { src: src }, i))) })) }));
+};
+/** The banner, as a still. It is also the video's first frame, so nothing jumps. */
+const Poster = ({ banner, className, children, }) => banner ? (_jsx(Box, { className: cn('relative', className), style: {
+        height: '100%',
+        width: '100%',
+        backgroundImage: `url(${typeof banner === 'string' ? banner : banner.poster})`,
+        backgroundSize: 'cover',
+        backgroundRepeat: 'no-repeat',
+    }, children: children })) : (_jsx(Box, { className: cn('h-full w-full relative', className), children: children }));
+/** One column of a screenful, placed by its own specifiers. */
+const Column = ({ blocks, specifiers, agent, className, }) => {
+    const spec = (s) => has(specifiers, s);
+    const phone = agent === 'phone';
+    const place = phone
+        ? cn('items-start', spec('mobile-vert-center') ? 'justify-center' : 'justify-start')
+        : cn(spec('right') ? 'items-end' : spec('center') ? 'items-center' : 'items-start', spec('bottom') ? 'justify-end' : spec('vert-center') ? 'justify-center' : 'justify-start', 
+        // Right-aligned running text is hard to read at phone widths, so this
+        // is a desktop-only hint on purpose.
+        spec('text-align-right') ? 'text-right' : 'text-left');
+    // h-full is what makes the vertical placement above mean anything — without a
+    // height there is no free space for `justify-*` to distribute.
+    return (_jsx(Box, { className: cn('flex flex-col justify-center h-full', place, className), children: _jsx(Blocks, { blocks: blocks, agent: agent }) }));
+};
+const Columns = ({ block: b, agent, className, }) => {
+    if (b.contentColumns.length === 1) {
+        return (_jsx(Column, { blocks: b.contentColumns[0], specifiers: b.columnSpecifiers?.[0], agent: agent, className: className }));
+    }
+    // `order` is one-based in flex, and the 5.x original tested the index for
+    // truthiness — so the column asked to come FIRST was the one that never moved.
+    const order = (i) => {
+        const at = b.mobileOrder?.indexOf(i);
+        return at !== undefined && at >= 0 ? `order-${at + 1} md:order-none` : '';
+    };
+    return (_jsx(Box, { className: cn('flex flex-col gap-2 sm:gap-4 h-full', agent !== 'phone' && `md:grid md:gap-8 md:grid-cols-${b.contentColumns.length}`, className), children: b.contentColumns.map((column, i) => (_jsx(Column, { blocks: column, specifiers: b.columnSpecifiers?.[i], agent: agent, className: order(i) }, i))) }));
+};
+/**
+ * One screenful: a full-height section, optionally over a banner, holding one
+ * to three columns of blocks.
+ *
+ * `snapTile` makes it a stop in a scroll-snapping sequence, which is why it
+ * fixes the height rather than setting a minimum — a snap point that can grow
+ * past the viewport can never be fully scrolled to.
+ */
+export const ScreenfulBlockComponent = ({ block, agent, initialInView = false, snapTile = false, className, contentClassName, bottom, }) => {
+    if (block.blockType !== 'screenful')
+        return _jsx(_Fragment, { children: "screenful block required" });
+    const b = block;
+    const spec = (s) => has(b.specifiers, s);
+    const video = b.banner && typeof b.banner === 'object';
+    const oneColumn = b.contentColumns.length === 1;
+    const vertCenter = spec('vert-center');
+    const gutters = spec('narrow-gutters')
+        ? cn('px-6 lg:px-8 2xl:px-2 pb-4 lg:pb-6 xl:pb-8', snapTile && 'pt-15 md:pt-26 lg:pt-28')
+        : spec('no-gutters')
+            ? cn('px-0 pb-0', snapTile && 'pt-11 lg:pt-20')
+            : 'px-[8vw] xl:px-[1vw] pb-[8vh] pt-[calc(44px+4vh)] md:pt-[calc(80px+6vh)]';
+    return (_jsxs(Box, { tag: "section", ...(b.anchorId ? { id: b.anchorId } : {}), className: cn(snapTile ? 'snap-start snap-always h-[100vh]' : 'min-h-screen', bottom && 'flex flex-col', className), children: [_jsx(ApplyTypography, { className: cn('w-full flex flex-row justify-center self-stretch', snapTile && (agent === 'desktop' ? 'h-full' : 'h-[100svh]'), bottom && 'grow'), children: _jsxs(Poster, { banner: b.banner, children: [video && (_jsx(Backdrop, { block: b.banner, className: "absolute top-0 left-0 bottom-0 right-0", initialInView: initialInView })), _jsxs(Box, { className: cn('xl:mx-auto overflow-y-hidden h-full', !spec('full-screen-width') && 'max-w-screen-xl', gutters, agent && agent !== 'desktop' && 'pt-15 sm:pt-17 pb-0 px-3 sm:px-8', snapTile ? 'absolute left-0 right-0 top-0 bottom-0' : 'flex min-h-screen w-full', contentClassName, vertCenter && cn('self-center', oneColumn && 'py-0')), children: [_jsx(Columns, { block: b, agent: agent, className: "w-full" }), b.footer] })] }) }), bottom] }));
+};
+export default ScreenfulBlockComponent;
+//# sourceMappingURL=screenful.js.map

package/dist/blocks/screenful.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"screenful.js","sourceRoot":"","sources":["../../src/blocks/screenful.tsx"],"names":[],"mappings":"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"}

package/dist/blocks/space.cjs

@@ -0,0 +1,38 @@
+'use client';"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpaceBlockComponent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const prose_1 = require("../backends/gui/prose.cjs");
+const box_1 = require("../box.cjs");
+const def_1 = require("./def.cjs");
+/** 0 is a paragraph's worth of space; 1–6 are the heading tags'. */
+const TAGS = ['div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+const SpaceBlockComponent = ({ block, className }) => {
+    if (block.blockType !== 'space')
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "space block required" });
+    const b = block;
+    // Measured against a heading: the space a level-N heading WOULD occupy, so a
+    // gap between sections matches the rhythm of the text around it.
+    //
+    // Tested against undefined, not for truth. Level 0 means "a paragraph's
+    // worth", and `if (b.level)` reads 0 as absent — so it fell through to the
+    // rung ladder below and the h-4 case it documents could never be reached.
+    if (b.level !== undefined) {
+        const Tag = TAGS[b.level];
+        return ((0, jsx_runtime_1.jsx)(prose_1.ApplyTypography, { className: className, children: (0, jsx_runtime_1.jsx)(box_1.Box, { tag: Tag, "aria-hidden": true, className: `invisible m-0 ${b.level === 0 ? 'h-4' : ''}`, children: "\u00A0" }) }));
+    }
+    // One number is that height at every rung.
+    if (typeof b.sizes === 'number') {
+        return (0, jsx_runtime_1.jsx)(box_1.Box, { "aria-hidden": true, className: `invisible w-[1px] h-${b.sizes} ${className ?? ''}` });
+    }
+    // Otherwise the given rungs sit over the defaults, and each becomes a
+    // prefixed class. `xs` lands at the base (see the VARIANT map in tw.ts), so
+    // the ladder has a floor and every larger rung overrides it in turn.
+    const sizes = { ...def_1.SPACE_DEFAULTS, ...b.sizes };
+    const rungs = Object.entries(sizes)
+        .map(([rung, v]) => `${rung}:h-${v}`)
+        .join(' ');
+    return (0, jsx_runtime_1.jsx)(box_1.Box, { "aria-hidden": true, className: `invisible w-[1px] ${rungs} ${className ?? ''}` });
+};
+exports.SpaceBlockComponent = SpaceBlockComponent;
+exports.default = exports.SpaceBlockComponent;

package/dist/blocks/space.d.ts

@@ -0,0 +1,4 @@
+import type { BlockComponentProps } from './spec.js';
+export declare const SpaceBlockComponent: ({ block, className }: BlockComponentProps) => import("react/jsx-runtime").JSX.Element;
+export default SpaceBlockComponent;
+//# sourceMappingURL=space.d.ts.map

package/dist/blocks/space.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"space.d.ts","sourceRoot":"","sources":["../../src/blocks/space.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAA;AAKjD,eAAO,MAAM,mBAAmB,yBAA0B,mBAAmB,4CAmC5E,CAAA;eAEc,mBAAmB"}

package/dist/blocks/space.js

@@ -0,0 +1,35 @@
+'use client';import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { ApplyTypography } from '../backends/gui/prose.js';
+import { Box } from '../box.js';
+import { SPACE_DEFAULTS } from './def.js';
+/** 0 is a paragraph's worth of space; 1–6 are the heading tags'. */
+const TAGS = ['div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+export const SpaceBlockComponent = ({ block, className }) => {
+    if (block.blockType !== 'space')
+        return _jsx(_Fragment, { children: "space block required" });
+    const b = block;
+    // Measured against a heading: the space a level-N heading WOULD occupy, so a
+    // gap between sections matches the rhythm of the text around it.
+    //
+    // Tested against undefined, not for truth. Level 0 means "a paragraph's
+    // worth", and `if (b.level)` reads 0 as absent — so it fell through to the
+    // rung ladder below and the h-4 case it documents could never be reached.
+    if (b.level !== undefined) {
+        const Tag = TAGS[b.level];
+        return (_jsx(ApplyTypography, { className: className, children: _jsx(Box, { tag: Tag, "aria-hidden": true, className: `invisible m-0 ${b.level === 0 ? 'h-4' : ''}`, children: "\u00A0" }) }));
+    }
+    // One number is that height at every rung.
+    if (typeof b.sizes === 'number') {
+        return _jsx(Box, { "aria-hidden": true, className: `invisible w-[1px] h-${b.sizes} ${className ?? ''}` });
+    }
+    // Otherwise the given rungs sit over the defaults, and each becomes a
+    // prefixed class. `xs` lands at the base (see the VARIANT map in tw.ts), so
+    // the ladder has a floor and every larger rung overrides it in turn.
+    const sizes = { ...SPACE_DEFAULTS, ...b.sizes };
+    const rungs = Object.entries(sizes)
+        .map(([rung, v]) => `${rung}:h-${v}`)
+        .join(' ');
+    return _jsx(Box, { "aria-hidden": true, className: `invisible w-[1px] ${rungs} ${className ?? ''}` });
+};
+export default SpaceBlockComponent;
+//# sourceMappingURL=space.js.map

package/dist/blocks/space.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"space.js","sourceRoot":"","sources":["../../src/blocks/space.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAE5B,OAAO,EAAE,cAAc,EAAmC,MAAM,OAAO,CAAA;AAGvE,oEAAoE;AACpE,MAAM,IAAI,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAA;AAEjE,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAuB,EAAE,EAAE;IAC/E,IAAI,KAAK,CAAC,SAAS,KAAK,OAAO;QAAE,OAAO,qDAAyB,CAAA;IACjE,MAAM,CAAC,GAAG,KAAmB,CAAA;IAE7B,6EAA6E;IAC7E,iEAAiE;IACjE,EAAE;IACF,wEAAwE;IACxE,2EAA2E;IAC3E,0EAA0E;IAC1E,IAAI,CAAC,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;QAC1B,MAAM,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;QACzB,OAAO,CACL,KAAC,eAAe,IAAC,SAAS,EAAE,SAAS,YACnC,KAAC,GAAG,IAAC,GAAG,EAAE,GAAG,uBAAc,SAAS,EAAE,iBAAiB,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,uBAE7E,GACU,CACnB,CAAA;IACH,CAAC;IAED,2CAA2C;IAC3C,IAAI,OAAO,CAAC,CAAC,KAAK,KAAK,QAAQ,EAAE,CAAC;QAChC,OAAO,KAAC,GAAG,yBAAa,SAAS,EAAE,uBAAuB,CAAC,CAAC,KAAK,IAAI,SAAS,IAAI,EAAE,EAAE,GAAI,CAAA;IAC5F,CAAC;IAED,sEAAsE;IACtE,4EAA4E;IAC5E,qEAAqE;IACrE,MAAM,KAAK,GAAsC,EAAE,GAAG,cAAc,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,CAAA;IAClF,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;SAChC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,IAAI,MAAM,CAAC,EAAE,CAAC;SACpC,IAAI,CAAC,GAAG,CAAC,CAAA;IAEZ,OAAO,KAAC,GAAG,yBAAa,SAAS,EAAE,qBAAqB,KAAK,IAAI,SAAS,IAAI,EAAE,EAAE,GAAI,CAAA;AACxF,CAAC,CAAA;AAED,eAAe,mBAAmB,CAAA"}

package/dist/blocks/spec.cjs

@@ -0,0 +1,58 @@
+'use client';"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.name = exports.fit = exports.has = exports.sx = void 0;
+const cn_1 = require("../core/cn.cjs");
+const tw_1 = require("../tw.cjs");
+/**
+ * Class notation as gui style props.
+ *
+ * A gui component takes `className` and passes it STRAIGHT to the element, so
+ * `<Card className="flex w-full">` renders `class="… flex w-full"` — four dead
+ * tokens against a stylesheet that defines none of them, since there is no
+ * Tailwind here to define them. Measured: every token survives to the DOM and
+ * nothing styles it.
+ *
+ * `<Box>` already solves this for host elements by converting the string first.
+ * This is the same conversion for the case Box cannot cover — a gui component
+ * that must stay itself. The classes become style props, gui compiles them to
+ * its own atomic rules, and no unqualified name reaches the document.
+ *
+ * So: `<Box className="…">` for an element, `{...sx('…')}` for a component.
+ *
+ * Anything `tw` does not read is handed back as `className`, exactly as Box
+ * does with it — dropping it would be worse than leaking it, because a class
+ * with a real rule behind it (`hz-prose`) is not something `tw` should be
+ * expected to know about, and silently discarding it would unstyle the element
+ * with nothing to show for it.
+ */
+const sx = (...classes) => {
+    const { props, rest } = (0, tw_1.tw)((0, cn_1.cn)(...classes));
+    return rest ? { ...props, className: rest } : props;
+};
+exports.sx = sx;
+/**
+ * Is `token` one of the hints in a specifier bag?
+ *
+ * A bag is space-separated and open — a site adds a hint by typing one, and an
+ * unknown hint is ignored rather than failing a build. Undefined reads as
+ * empty, so a block with no specifiers answers false rather than throwing.
+ */
+const has = (specifiers, token) => !!specifiers && specifiers.split(/\s+/).includes(token);
+exports.has = has;
+/**
+ * The largest box with `dim`'s aspect ratio that fits inside `within`.
+ *
+ * Which side binds is decided by comparing the two ratios, not by trying one
+ * and clamping: a portrait image in a landscape box is bound by height, and the
+ * reverse by width.
+ */
+const fit = (dim, within) => {
+    const ratio = dim.w / dim.h;
+    return ratio > within.w / within.h
+        ? { w: within.w, h: within.w / ratio }
+        : { w: within.h * ratio, h: within.h };
+};
+exports.fit = fit;
+/** The filename an image url ends in — the last-resort alt text. */
+const name = (src) => src.split('/').filter(Boolean).pop() ?? src;
+exports.name = name;

package/dist/blocks/spec.d.ts

@@ -0,0 +1,60 @@
+import { type ClassValue } from '../tw.js';
+import type { Dimensions } from '../types.js';
+import type { Block } from './def.js';
+/**
+ * Class notation as gui style props.
+ *
+ * A gui component takes `className` and passes it STRAIGHT to the element, so
+ * `<Card className="flex w-full">` renders `class="… flex w-full"` — four dead
+ * tokens against a stylesheet that defines none of them, since there is no
+ * Tailwind here to define them. Measured: every token survives to the DOM and
+ * nothing styles it.
+ *
+ * `<Box>` already solves this for host elements by converting the string first.
+ * This is the same conversion for the case Box cannot cover — a gui component
+ * that must stay itself. The classes become style props, gui compiles them to
+ * its own atomic rules, and no unqualified name reaches the document.
+ *
+ * So: `<Box className="…">` for an element, `{...sx('…')}` for a component.
+ *
+ * Anything `tw` does not read is handed back as `className`, exactly as Box
+ * does with it — dropping it would be worse than leaking it, because a class
+ * with a real rule behind it (`hz-prose`) is not something `tw` should be
+ * expected to know about, and silently discarding it would unstyle the element
+ * with nothing to show for it.
+ */
+export declare const sx: (...classes: ClassValue[]) => Record<string, unknown>;
+/**
+ * What every renderer is handed: the block to draw, plus the two things only
+ * the page above it knows.
+ *
+ * `agent` is the device class ('phone' | 'desktop'). It is a PROP rather than a
+ * media query because these blocks render on a server that has to emit the
+ * right markup first time — a phone layout that arrives as desktop markup and
+ * corrects itself on hydration is a visible jump, and for the video blocks it
+ * is a wasted download rather than a reflow.
+ */
+export interface BlockComponentProps {
+    block: Block;
+    className?: string;
+    agent?: string;
+}
+/**
+ * Is `token` one of the hints in a specifier bag?
+ *
+ * A bag is space-separated and open — a site adds a hint by typing one, and an
+ * unknown hint is ignored rather than failing a build. Undefined reads as
+ * empty, so a block with no specifiers answers false rather than throwing.
+ */
+export declare const has: (specifiers: string | undefined, token: string) => boolean;
+/**
+ * The largest box with `dim`'s aspect ratio that fits inside `within`.
+ *
+ * Which side binds is decided by comparing the two ratios, not by trying one
+ * and clamping: a portrait image in a landscape box is bound by height, and the
+ * reverse by width.
+ */
+export declare const fit: (dim: Dimensions, within: Dimensions) => Dimensions;
+/** The filename an image url ends in — the last-resort alt text. */
+export declare const name: (src: string) => string;
+//# sourceMappingURL=spec.d.ts.map

package/dist/blocks/spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spec.d.ts","sourceRoot":"","sources":["../../src/blocks/spec.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,UAAU,EAAM,MAAM,OAAO,CAAA;AAC3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAC1C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,OAAO,CAAA;AAElC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,EAAE,eAAgB,UAAU,EAAE,KAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAGnE,CAAA;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,KAAK,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED;;;;;;GAMG;AACH,eAAO,MAAM,GAAG,eAAgB,MAAM,GAAG,SAAS,SAAS,MAAM,KAAG,OACX,CAAA;AAEzD;;;;;;GAMG;AACH,eAAO,MAAM,GAAG,QAAS,UAAU,UAAU,UAAU,KAAG,UAKzD,CAAA;AAED,oEAAoE;AACpE,eAAO,MAAM,IAAI,QAAS,MAAM,KAAG,MAAqD,CAAA"}

package/dist/blocks/spec.js

@@ -0,0 +1,52 @@
+'use client';import { cn } from '../core/cn.js';
+import { tw } from '../tw.js';
+/**
+ * Class notation as gui style props.
+ *
+ * A gui component takes `className` and passes it STRAIGHT to the element, so
+ * `<Card className="flex w-full">` renders `class="… flex w-full"` — four dead
+ * tokens against a stylesheet that defines none of them, since there is no
+ * Tailwind here to define them. Measured: every token survives to the DOM and
+ * nothing styles it.
+ *
+ * `<Box>` already solves this for host elements by converting the string first.
+ * This is the same conversion for the case Box cannot cover — a gui component
+ * that must stay itself. The classes become style props, gui compiles them to
+ * its own atomic rules, and no unqualified name reaches the document.
+ *
+ * So: `<Box className="…">` for an element, `{...sx('…')}` for a component.
+ *
+ * Anything `tw` does not read is handed back as `className`, exactly as Box
+ * does with it — dropping it would be worse than leaking it, because a class
+ * with a real rule behind it (`hz-prose`) is not something `tw` should be
+ * expected to know about, and silently discarding it would unstyle the element
+ * with nothing to show for it.
+ */
+export const sx = (...classes) => {
+    const { props, rest } = tw(cn(...classes));
+    return rest ? { ...props, className: rest } : props;
+};
+/**
+ * Is `token` one of the hints in a specifier bag?
+ *
+ * A bag is space-separated and open — a site adds a hint by typing one, and an
+ * unknown hint is ignored rather than failing a build. Undefined reads as
+ * empty, so a block with no specifiers answers false rather than throwing.
+ */
+export const has = (specifiers, token) => !!specifiers && specifiers.split(/\s+/).includes(token);
+/**
+ * The largest box with `dim`'s aspect ratio that fits inside `within`.
+ *
+ * Which side binds is decided by comparing the two ratios, not by trying one
+ * and clamping: a portrait image in a landscape box is bound by height, and the
+ * reverse by width.
+ */
+export const fit = (dim, within) => {
+    const ratio = dim.w / dim.h;
+    return ratio > within.w / within.h
+        ? { w: within.w, h: within.w / ratio }
+        : { w: within.h * ratio, h: within.h };
+};
+/** The filename an image url ends in — the last-resort alt text. */
+export const name = (src) => src.split('/').filter(Boolean).pop() ?? src;
+//# sourceMappingURL=spec.js.map

package/dist/blocks/spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spec.js","sourceRoot":"","sources":["../../src/blocks/spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAA;AAC/B,OAAO,EAAmB,EAAE,EAAE,MAAM,OAAO,CAAA;AAI3C;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,OAAqB,EAA2B,EAAE;IACtE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,CAAC,CAAA;IAC1C,OAAO,IAAI,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC,CAAE,KAAiC,CAAA;AAClF,CAAC,CAAA;AAkBD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,UAA8B,EAAE,KAAa,EAAW,EAAE,CAC5E,CAAC,CAAC,UAAU,IAAI,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;AAEzD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,GAAe,EAAE,MAAkB,EAAc,EAAE;IACrE,MAAM,KAAK,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAA;IAC3B,OAAO,KAAK,GAAG,MAAM,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC;QAChC,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,KAAK,EAAE;QACtC,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,MAAM,CAAC,CAAC,EAAE,CAAA;AAC1C,CAAC,CAAA;AAED,oEAAoE;AACpE,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,GAAW,EAAU,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,IAAI,GAAG,CAAA"}

package/dist/blocks/video.cjs

@@ -0,0 +1,103 @@
+'use client';"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VideoBlockComponent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const video_1 = require("../backends/gui/video.cjs");
+const box_1 = require("../box.cjs");
+const cn_1 = require("../core/cn.cjs");
+const spec_1 = require("./spec.cjs");
+/**
+ * A video sized against the VIEWPORT.
+ *
+ * `sizing` asks for a fraction of the window (`{ vh: 60 }`, or
+ * `{ mobile: { vw: 70 } }`), and the window is not known on a server. So the
+ * first paint is the POSTER, drawn at exactly the box the video will occupy —
+ * computed in css units, which the browser can resolve without javascript. The
+ * player replaces it once the real measurement arrives.
+ *
+ * That ordering is the point: sizing the poster from a measured window would
+ * mean rendering nothing at all server-side, and the page would jump by the
+ * height of a video the moment it hydrated.
+ */
+const VideoBlockComponent = ({ block, className, agent, usePoster = false, size = 'md', constrainTo, }) => {
+    const [win, setWin] = React.useState(undefined);
+    React.useEffect(() => {
+        const measure = () => setWin({ w: window.innerWidth, h: window.innerHeight });
+        measure();
+        // Only a desktop window is worth tracking: a phone "resize" is mostly the
+        // url bar sliding away, which would re-lay-out the video for nothing.
+        if (agent !== 'desktop')
+            return;
+        window.addEventListener('resize', measure);
+        return () => window.removeEventListener('resize', measure);
+    }, [agent]);
+    if (block.blockType !== 'video')
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "video block required" });
+    const b = block;
+    const ratio = b.dim.md.w / b.dim.md.h;
+    const player = (dim) => ((0, jsx_runtime_1.jsx)(video_1.VideoPlayer, { ...(0, spec_1.sx)((0, cn_1.cn)('mx-auto', className)), sources: b.sources ?? [], width: dim.w, height: dim.h, ...b.videoProps }));
+    /** The poster at the exact box the video will fill, in css the server can emit. */
+    const poster = (width, height) => ((0, jsx_runtime_1.jsx)(box_1.Box, { style: {
+            maxWidth: '100%',
+            maxHeight: '100%',
+            width,
+            height,
+            backgroundImage: `url(${b.poster})`,
+            backgroundSize: 'contain',
+            backgroundRepeat: 'no-repeat',
+        } }));
+    const vw = b.sizing?.mobile?.vw;
+    const vh = b.sizing?.vh;
+    if (agent === 'phone' && vw) {
+        if (!win)
+            return poster(`${vw}vw`, `calc(${vw}vw / ${ratio})`);
+        const w = (vw / 100) * win.w;
+        return player({ w, h: w / ratio });
+    }
+    if (vh) {
+        if (!win)
+            return poster(`calc(${vh}vh * ${ratio})`, `${vh}vh`);
+        const h = (vh / 100) * win.h;
+        return player({ w: h * ratio, h });
+    }
+    const chosen = b.dim[size] ?? b.dim.md;
+    const dim = constrainTo ? (0, spec_1.fit)(chosen, constrainTo) : chosen;
+    return usePoster ? ((0, jsx_runtime_1.jsx)(box_1.Box, { tag: "img", src: b.poster, alt: "", width: dim.w, height: dim.h, className: className })) : (player(dim));
+};
+exports.VideoBlockComponent = VideoBlockComponent;
+exports.default = exports.VideoBlockComponent;

package/dist/blocks/video.d.ts

@@ -0,0 +1,22 @@
+import type { Dimensions, TShirtSize } from '../types.js';
+import { type BlockComponentProps } from './spec.js';
+/**
+ * A video sized against the VIEWPORT.
+ *
+ * `sizing` asks for a fraction of the window (`{ vh: 60 }`, or
+ * `{ mobile: { vw: 70 } }`), and the window is not known on a server. So the
+ * first paint is the POSTER, drawn at exactly the box the video will occupy —
+ * computed in css units, which the browser can resolve without javascript. The
+ * player replaces it once the real measurement arrives.
+ *
+ * That ordering is the point: sizing the poster from a measured window would
+ * mean rendering nothing at all server-side, and the page would jump by the
+ * height of a video the moment it hydrated.
+ */
+export declare const VideoBlockComponent: ({ block, className, agent, usePoster, size, constrainTo, }: BlockComponentProps & {
+    usePoster?: boolean;
+    size?: TShirtSize;
+    constrainTo?: Dimensions;
+}) => import("react/jsx-runtime").JSX.Element;
+export default VideoBlockComponent;
+//# sourceMappingURL=video.d.ts.map

package/dist/blocks/video.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../src/blocks/video.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAEtD,OAAO,EAAE,KAAK,mBAAmB,EAAW,MAAM,QAAQ,CAAA;AAE1D;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,mBAAmB,+DAO7B,mBAAmB,GAAG;IACvB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,WAAW,CAAC,EAAE,UAAU,CAAA;CACzB,4CAwEA,CAAA;eAEc,mBAAmB"}

package/dist/blocks/video.js

@@ -0,0 +1,67 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { VideoPlayer } from '../backends/gui/video.js';
+import { Box } from '../box.js';
+import { cn } from '../core/cn.js';
+import { fit, sx } from './spec.js';
+/**
+ * A video sized against the VIEWPORT.
+ *
+ * `sizing` asks for a fraction of the window (`{ vh: 60 }`, or
+ * `{ mobile: { vw: 70 } }`), and the window is not known on a server. So the
+ * first paint is the POSTER, drawn at exactly the box the video will occupy —
+ * computed in css units, which the browser can resolve without javascript. The
+ * player replaces it once the real measurement arrives.
+ *
+ * That ordering is the point: sizing the poster from a measured window would
+ * mean rendering nothing at all server-side, and the page would jump by the
+ * height of a video the moment it hydrated.
+ */
+export const VideoBlockComponent = ({ block, className, agent, usePoster = false, size = 'md', constrainTo, }) => {
+    const [win, setWin] = React.useState(undefined);
+    React.useEffect(() => {
+        const measure = () => setWin({ w: window.innerWidth, h: window.innerHeight });
+        measure();
+        // Only a desktop window is worth tracking: a phone "resize" is mostly the
+        // url bar sliding away, which would re-lay-out the video for nothing.
+        if (agent !== 'desktop')
+            return;
+        window.addEventListener('resize', measure);
+        return () => window.removeEventListener('resize', measure);
+    }, [agent]);
+    if (block.blockType !== 'video')
+        return _jsx(_Fragment, { children: "video block required" });
+    const b = block;
+    const ratio = b.dim.md.w / b.dim.md.h;
+    const player = (dim) => (_jsx(VideoPlayer, { ...sx(cn('mx-auto', className)), sources: b.sources ?? [], width: dim.w, height: dim.h, ...b.videoProps }));
+    /** The poster at the exact box the video will fill, in css the server can emit. */
+    const poster = (width, height) => (_jsx(Box, { style: {
+            maxWidth: '100%',
+            maxHeight: '100%',
+            width,
+            height,
+            backgroundImage: `url(${b.poster})`,
+            backgroundSize: 'contain',
+            backgroundRepeat: 'no-repeat',
+        } }));
+    const vw = b.sizing?.mobile?.vw;
+    const vh = b.sizing?.vh;
+    if (agent === 'phone' && vw) {
+        if (!win)
+            return poster(`${vw}vw`, `calc(${vw}vw / ${ratio})`);
+        const w = (vw / 100) * win.w;
+        return player({ w, h: w / ratio });
+    }
+    if (vh) {
+        if (!win)
+            return poster(`calc(${vh}vh * ${ratio})`, `${vh}vh`);
+        const h = (vh / 100) * win.h;
+        return player({ w: h * ratio, h });
+    }
+    const chosen = b.dim[size] ?? b.dim.md;
+    const dim = constrainTo ? fit(chosen, constrainTo) : chosen;
+    return usePoster ? (_jsx(Box, { tag: "img", src: b.poster, alt: "", width: dim.w, height: dim.h, className: className })) : (player(dim));
+};
+export default VideoBlockComponent;
+//# sourceMappingURL=video.js.map

package/dist/blocks/video.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"video.js","sourceRoot":"","sources":["../../src/blocks/video.tsx"],"names":[],"mappings":"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"}