@hanzo/ui 8.4.12 → 8.5.0

package/dist/backends/gui/link.js

@@ -0,0 +1,88 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Links.
+ *
+ * This package imports no framework — `next` is an optional peer and nothing in
+ * `src` reaches for it. But an internal link in a routed app has to go through
+ * that router, or every in-app navigation becomes a full page load. Both facts
+ * hold at once by letting the HOST name the component once:
+ *
+ *   import Next from 'next/link'
+ *   <Link value={Next}>{app}</Link>
+ *
+ * Everything below reads that value, so one line at the root fixes routing for
+ * every link the library renders. Unset, it is `'a'` — correct output, just
+ * without client-side navigation, which is also the right answer for a Vite or
+ * Tauri host that has no router to offer.
+ *
+ * The 5.x originals imported `next/link` directly, which is why they could only
+ * ever live in a `primitives/next/` folder that a non-Next host could not touch.
+ */
+import * as React from 'react';
+import { cn } from '../../core/cn.js';
+import { buttonVariants } from './button.js';
+/**
+ * The component every link renders through. `<Link value={NextLink}>` at the
+ * root of a routed app; left alone it is a plain anchor.
+ */
+export const Link = /* @__PURE__ */ React.createContext('a');
+export const useLink = () => React.useContext(Link);
+/** True when the href leaves the app, and so must not go through a router. */
+const external = (href) => /^(https?:|mailto:|tel:)/.test(href);
+/**
+ * A link in authored content — the `a` an .mdx file produces.
+ *
+ * Internal hrefs go through the host's link so navigation stays client-side;
+ * anything external opens in a new tab, with `rel` set because `target=_blank`
+ * without it hands the opened page a live reference back to this one.
+ */
+export const MDXLink = ({ href, children, ...rest }) => {
+    const Comp = useLink();
+    if (href && href.startsWith('/')) {
+        return (_jsx(Comp, { href: href, ...rest, children: children }));
+    }
+    return (_jsx("a", { href: href, target: "_blank", rel: "noreferrer noopener", ...rest, children: children }));
+};
+/**
+ * A link wearing a button's clothes, described by a {@link LinkDef}.
+ *
+ * Given children, they replace the whole label — `title`, `icon` and
+ * `iconAfter` are then ignored, since the caller has said what to render.
+ */
+export const LinkElement = ({ def, 
+// No defaults on anything that also appears in `def` — a default here would
+// outrank the def it is supposed to fall back to.
+onClick, size, variant, icon, iconAfter, className, style, children, }) => {
+    const Comp = useLink();
+    const { href, newTab, title } = def;
+    const nav = {};
+    if (external(href)) {
+        nav.rel = 'noreferrer noopener';
+        // An external link opens in a new tab unless the def says otherwise.
+        if (newTab ?? true)
+            nav.target = '_blank';
+    }
+    else if (newTab) {
+        nav.target = '_blank';
+    }
+    const label = () => {
+        if (React.Children.count(children) > 0)
+            return children;
+        // Props beat def fields beat defaults.
+        const mark = icon ?? def.icon;
+        const after = iconAfter ?? def.iconAfter ?? false;
+        // `title` is optional: an icon-only link is a legal one.
+        return (_jsxs(_Fragment, { children: [mark && !after && _jsx("span", { style: { paddingRight: 4 }, children: mark }), title && _jsx("span", { children: title }), mark && after && _jsx("span", { style: { paddingLeft: 4 }, children: mark })] }));
+    };
+    return (_jsx(Comp, { href: href, className: cn(buttonVariants({
+            variant: variant ?? def.variant ?? 'link',
+            size: size ?? def.size ?? 'default',
+        }), className), 
+        // A def with no href and no handler is a LABEL, not a link. Written as a
+        // style rather than a utility class because this renders a bare `<a>` and
+        // nothing in the shipped stylesheet defines `pointer-events-none` — the
+        // class would have been three dead tokens and a clickable label.
+        style: href.length > 0 || onClick ? style : { ...style, pointerEvents: 'none' }, ...(onClick ? { onClick } : {}), ...nav, children: label() }));
+};
+//# sourceMappingURL=link.js.map

package/dist/backends/gui/link.js.map

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

package/dist/backends/gui/prose.cjs

@@ -0,0 +1,33 @@
+'use client';"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ApplyTypography = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const box_1 = require("../../box.cjs");
+const cn_1 = require("../../core/cn.cjs");
+/**
+ * Namespaced, and this family especially: `.prose` is what Tailwind's own
+ * typography plugin claims. A site part-way through leaving that engine would
+ * otherwise have two stylesheets fighting over the same selector, and which one
+ * won would depend on import order.
+ */
+const RUNG = {
+    responsive: 'hz-prose-responsive',
+    // `base` is the unmodified `.hz-prose` rung, so it adds nothing.
+    base: '',
+    sm: 'hz-prose-sm',
+    lg: 'hz-prose-lg',
+    xl: 'hz-prose-xl',
+};
+/**
+ * Through `Box`, so a caller's layout classes are converted rather than
+ * emitted: `<ApplyTypography className="flex w-full">` used to put two dead
+ * tokens on the element, since nothing here defines them. `Box` with a `tag`
+ * renders that one element and nothing around it, so the `>` child selectors
+ * the prose rules depend on still reach the content.
+ *
+ * `hz-prose*` survives the conversion and stays on the element — it is real
+ * css in theme.css, which is exactly what `tw` leaves alone.
+ */
+const ApplyTypography = ({ children, className, asTag = 'div', size = 'responsive', ...rest }) => ((0, jsx_runtime_1.jsx)(box_1.Box, { tag: asTag, className: (0, cn_1.cn)('hz-prose', RUNG[size], className), ...rest, children: children }));
+exports.ApplyTypography = ApplyTypography;
+exports.default = exports.ApplyTypography;

package/dist/backends/gui/prose.d.ts

@@ -0,0 +1,39 @@
+/**
+ * ApplyTypography — turn on running-text styling for a subtree.
+ *
+ * Authored content (a CMS field, an .mdx file, a block's `content`) arrives as
+ * bare tags: `<h1>`, `<p>`, `<ul>`. Nothing inside it can carry a class, so the
+ * styling has to come from an ancestor and reach down by TAG. That is what this
+ * does, and it is the reason it exists rather than each block styling its own
+ * heading.
+ *
+ * The rules live in `theme.css` under `.prose`; this component only chooses
+ * which rung and which element. It is a plain host element on purpose — the
+ * rules select `>` children, and a gui `styled()` frame would insert one.
+ *
+ * `size` is 'responsive' by default and is the only rung that moves with the
+ * viewport. A t-shirt size is a decision the caller already made, so it stays
+ * put — asking for 'sm' and getting 'lg' on a wide screen would make the prop a
+ * suggestion.
+ */
+import * as React from 'react';
+export type TypographySize = 'responsive' | 'sm' | 'base' | 'lg' | 'xl';
+/** The tags a prose container is allowed to be — all of them block-level. */
+export type ProseTag = 'div' | 'section' | 'nav' | 'main' | 'article' | 'aside';
+export type ApplyTypographyProps = React.ComponentProps<'div'> & {
+    asTag?: ProseTag;
+    size?: TypographySize;
+};
+/**
+ * Through `Box`, so a caller's layout classes are converted rather than
+ * emitted: `<ApplyTypography className="flex w-full">` used to put two dead
+ * tokens on the element, since nothing here defines them. `Box` with a `tag`
+ * renders that one element and nothing around it, so the `>` child selectors
+ * the prose rules depend on still reach the content.
+ *
+ * `hz-prose*` survives the conversion and stays on the element — it is real
+ * css in theme.css, which is exactly what `tw` leaves alone.
+ */
+export declare const ApplyTypography: ({ children, className, asTag, size, ...rest }: ApplyTypographyProps) => import("react/jsx-runtime").JSX.Element;
+export default ApplyTypography;
+//# sourceMappingURL=prose.d.ts.map

package/dist/backends/gui/prose.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prose.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/prose.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,MAAM,cAAc,GAAG,YAAY,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,CAAA;AAEvE,6EAA6E;AAC7E,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAA;AAE/E,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/D,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,IAAI,CAAC,EAAE,cAAc,CAAA;CACtB,CAAA;AAiBD;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe,kDAMzB,oBAAoB,4CAMtB,CAAA;eAEc,eAAe"}

package/dist/backends/gui/prose.js

@@ -0,0 +1,30 @@
+'use client';import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '../../box.js';
+import { cn } from '../../core/cn.js';
+/**
+ * Namespaced, and this family especially: `.prose` is what Tailwind's own
+ * typography plugin claims. A site part-way through leaving that engine would
+ * otherwise have two stylesheets fighting over the same selector, and which one
+ * won would depend on import order.
+ */
+const RUNG = {
+    responsive: 'hz-prose-responsive',
+    // `base` is the unmodified `.hz-prose` rung, so it adds nothing.
+    base: '',
+    sm: 'hz-prose-sm',
+    lg: 'hz-prose-lg',
+    xl: 'hz-prose-xl',
+};
+/**
+ * Through `Box`, so a caller's layout classes are converted rather than
+ * emitted: `<ApplyTypography className="flex w-full">` used to put two dead
+ * tokens on the element, since nothing here defines them. `Box` with a `tag`
+ * renders that one element and nothing around it, so the `>` child selectors
+ * the prose rules depend on still reach the content.
+ *
+ * `hz-prose*` survives the conversion and stays on the element — it is real
+ * css in theme.css, which is exactly what `tw` leaves alone.
+ */
+export const ApplyTypography = ({ children, className, asTag = 'div', size = 'responsive', ...rest }) => (_jsx(Box, { tag: asTag, className: cn('hz-prose', RUNG[size], className), ...rest, children: children }));
+export default ApplyTypography;
+//# sourceMappingURL=prose.js.map

package/dist/backends/gui/prose.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prose.js","sourceRoot":"","sources":["../../../src/backends/gui/prose.tsx"],"names":[],"mappings":";AAmBA,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAC/B,OAAO,EAAE,EAAE,EAAE,MAAM,eAAe,CAAA;AAYlC;;;;;GAKG;AACH,MAAM,IAAI,GAAmC;IAC3C,UAAU,EAAE,qBAAqB;IACjC,iEAAiE;IACjE,IAAI,EAAE,EAAE;IACR,EAAE,EAAE,aAAa;IACjB,EAAE,EAAE,aAAa;IACjB,EAAE,EAAE,aAAa;CAClB,CAAA;AAED;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,KAAK,GAAG,KAAK,EACb,IAAI,GAAG,YAAY,EACnB,GAAG,IAAI,EACc,EAAE,EAAE,CAAC,CAG1B,KAAC,GAAG,IAAC,GAAG,EAAE,KAAc,EAAE,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,KAAO,IAAe,YAC7F,QAAQ,GACL,CACP,CAAA;AAED,eAAe,eAAe,CAAA"}

package/dist/backends/gui/video.cjs

@@ -0,0 +1,89 @@
+'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.YouTubeEmbed = exports.VideoPlayer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Video.
+ *
+ * `VideoPlayer` is a `<video>` that takes its sources as an array, because a
+ * block describes them that way and every caller was otherwise writing the same
+ * `<source>` map.
+ *
+ * `YouTubeEmbed` shows the poster first and mounts the iframe on click. That is
+ * not a nicety: an embed loads ~1MB and sets cookies on sight, so a page with
+ * several of them pays for all of them before anyone watches one. The
+ * `-nocookie` host is the same trade — YouTube's own domain for embeds that
+ * defers its cookie until playback starts.
+ */
+const React = __importStar(require("react"));
+exports.VideoPlayer = React.forwardRef(({ sources, ...rest }, ref) => ((0, jsx_runtime_1.jsx)("video", { ref: ref, ...rest, children: sources.map((src, i) => ((0, jsx_runtime_1.jsx)("source", { src: src }, i))) })));
+exports.VideoPlayer.displayName = 'VideoPlayer';
+/** YouTube's own play mark, drawn rather than imported so this pulls no icon set. */
+const Play = ({ size }) => ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size * 0.7, viewBox: "0 0 68 48", role: "img", "aria-hidden": true, style: { transition: 'transform .15s ease' }, children: [(0, jsx_runtime_1.jsx)("path", { d: "M66.5 7.7a8.6 8.6 0 0 0-6-6C55.2 0 34 0 34 0S12.8 0 7.5 1.6a8.6 8.6 0 0 0-6 6A89.7 89.7 0 0 0 0 24a89.7 89.7 0 0 0 1.5 16.3 8.6 8.6 0 0 0 6 6C12.8 48 34 48 34 48s21.2 0 26.5-1.6a8.6 8.6 0 0 0 6-6A89.7 89.7 0 0 0 68 24a89.7 89.7 0 0 0-1.5-16.3z", fill: "#f00" }), (0, jsx_runtime_1.jsx)("path", { d: "M27 34V14l18 10-18 10z", fill: "#fff" })] }));
+const YouTubeEmbed = ({ youtubeID, width, height, buttonSize = 100, timeAt, title, caption, className, }) => {
+    const [playing, setPlaying] = React.useState(false);
+    if (playing) {
+        // autoplay is honoured because the iframe mounts inside a click.
+        const q = `${timeAt ? `?t=${timeAt}&` : '?'}rel=0&autoplay=1`;
+        return ((0, jsx_runtime_1.jsx)("div", { className: className, children: (0, jsx_runtime_1.jsx)("iframe", { width: width, height: height, src: `https://www.youtube-nocookie.com/embed/${youtubeID}${q}`, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, title: title || 'YouTube video', style: { aspectRatio: '16 / 9', width: '100%', height: '100%', border: 0, padding: 0 } }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, children: (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => setPlaying(true), "aria-label": title ? `Play ${title}` : 'Play video', style: {
+                position: 'relative',
+                aspectRatio: '16 / 9',
+                width: '100%',
+                padding: 0,
+                border: 0,
+                background: 'transparent',
+                cursor: 'pointer',
+            }, children: [(0, jsx_runtime_1.jsx)("img", { src: `https://img.youtube.com/vi/${youtubeID}/maxresdefault.jpg`, alt: "", width: width, height: height, loading: "lazy", style: { width: '100%', height: '100%', objectFit: 'cover' } }), (0, jsx_runtime_1.jsx)("span", { style: {
+                        position: 'absolute',
+                        left: '50%',
+                        top: '50%',
+                        transform: 'translate(-50%, -50%)',
+                        display: 'grid',
+                        placeItems: 'center',
+                        opacity: 0.9,
+                    }, children: (0, jsx_runtime_1.jsx)(Play, { size: buttonSize }) }), caption && ((0, jsx_runtime_1.jsx)("p", { className: "hz-prose", style: {
+                        position: 'absolute',
+                        left: '50%',
+                        top: 20,
+                        transform: 'translateX(-50%)',
+                        whiteSpace: 'nowrap',
+                        margin: 0,
+                    }, children: caption }))] }) }));
+};
+exports.YouTubeEmbed = YouTubeEmbed;

package/dist/backends/gui/video.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Video.
+ *
+ * `VideoPlayer` is a `<video>` that takes its sources as an array, because a
+ * block describes them that way and every caller was otherwise writing the same
+ * `<source>` map.
+ *
+ * `YouTubeEmbed` shows the poster first and mounts the iframe on click. That is
+ * not a nicety: an embed loads ~1MB and sets cookies on sight, so a page with
+ * several of them pays for all of them before anyone watches one. The
+ * `-nocookie` host is the same trade — YouTube's own domain for embeds that
+ * defers its cookie until playback starts.
+ */
+import * as React from 'react';
+export type VideoPlayerProps = Omit<React.ComponentPropsWithoutRef<'video'>, 'src'> & {
+    sources: string[];
+};
+export declare const VideoPlayer: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "ref">, "src"> & {
+    sources: string[];
+} & React.RefAttributes<HTMLVideoElement>>;
+export type YouTubeEmbedProps = {
+    youtubeID: string;
+    width: number;
+    height: number;
+    buttonSize?: number;
+    /** Start offset, e.g. `'5s'`. */
+    timeAt?: string;
+    title?: string;
+    caption?: string;
+    className?: string;
+};
+export declare const YouTubeEmbed: ({ youtubeID, width, height, buttonSize, timeAt, title, caption, className, }: YouTubeEmbedProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=video.d.ts.map

package/dist/backends/gui/video.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/video.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,GAAG;IACpF,OAAO,EAAE,MAAM,EAAE,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,WAAW;aAHb,MAAM,EAAE;0CAWlB,CAAA;AAqBD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,YAAY,iFAStB,iBAAiB,4CA4EnB,CAAA"}

package/dist/backends/gui/video.js

@@ -0,0 +1,53 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Video.
+ *
+ * `VideoPlayer` is a `<video>` that takes its sources as an array, because a
+ * block describes them that way and every caller was otherwise writing the same
+ * `<source>` map.
+ *
+ * `YouTubeEmbed` shows the poster first and mounts the iframe on click. That is
+ * not a nicety: an embed loads ~1MB and sets cookies on sight, so a page with
+ * several of them pays for all of them before anyone watches one. The
+ * `-nocookie` host is the same trade — YouTube's own domain for embeds that
+ * defers its cookie until playback starts.
+ */
+import * as React from 'react';
+export const VideoPlayer = React.forwardRef(({ sources, ...rest }, ref) => (_jsx("video", { ref: ref, ...rest, children: sources.map((src, i) => (_jsx("source", { src: src }, i))) })));
+VideoPlayer.displayName = 'VideoPlayer';
+/** YouTube's own play mark, drawn rather than imported so this pulls no icon set. */
+const Play = ({ size }) => (_jsxs("svg", { width: size, height: size * 0.7, viewBox: "0 0 68 48", role: "img", "aria-hidden": true, style: { transition: 'transform .15s ease' }, children: [_jsx("path", { d: "M66.5 7.7a8.6 8.6 0 0 0-6-6C55.2 0 34 0 34 0S12.8 0 7.5 1.6a8.6 8.6 0 0 0-6 6A89.7 89.7 0 0 0 0 24a89.7 89.7 0 0 0 1.5 16.3 8.6 8.6 0 0 0 6 6C12.8 48 34 48 34 48s21.2 0 26.5-1.6a8.6 8.6 0 0 0 6-6A89.7 89.7 0 0 0 68 24a89.7 89.7 0 0 0-1.5-16.3z", fill: "#f00" }), _jsx("path", { d: "M27 34V14l18 10-18 10z", fill: "#fff" })] }));
+export const YouTubeEmbed = ({ youtubeID, width, height, buttonSize = 100, timeAt, title, caption, className, }) => {
+    const [playing, setPlaying] = React.useState(false);
+    if (playing) {
+        // autoplay is honoured because the iframe mounts inside a click.
+        const q = `${timeAt ? `?t=${timeAt}&` : '?'}rel=0&autoplay=1`;
+        return (_jsx("div", { className: className, children: _jsx("iframe", { width: width, height: height, src: `https://www.youtube-nocookie.com/embed/${youtubeID}${q}`, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, title: title || 'YouTube video', style: { aspectRatio: '16 / 9', width: '100%', height: '100%', border: 0, padding: 0 } }) }));
+    }
+    return (_jsx("div", { className: className, children: _jsxs("button", { type: "button", onClick: () => setPlaying(true), "aria-label": title ? `Play ${title}` : 'Play video', style: {
+                position: 'relative',
+                aspectRatio: '16 / 9',
+                width: '100%',
+                padding: 0,
+                border: 0,
+                background: 'transparent',
+                cursor: 'pointer',
+            }, children: [_jsx("img", { src: `https://img.youtube.com/vi/${youtubeID}/maxresdefault.jpg`, alt: "", width: width, height: height, loading: "lazy", style: { width: '100%', height: '100%', objectFit: 'cover' } }), _jsx("span", { style: {
+                        position: 'absolute',
+                        left: '50%',
+                        top: '50%',
+                        transform: 'translate(-50%, -50%)',
+                        display: 'grid',
+                        placeItems: 'center',
+                        opacity: 0.9,
+                    }, children: _jsx(Play, { size: buttonSize }) }), caption && (_jsx("p", { className: "hz-prose", style: {
+                        position: 'absolute',
+                        left: '50%',
+                        top: 20,
+                        transform: 'translateX(-50%)',
+                        whiteSpace: 'nowrap',
+                        margin: 0,
+                    }, children: caption }))] }) }));
+};
+//# sourceMappingURL=video.js.map

package/dist/backends/gui/video.js.map

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

package/dist/blocks/accordian.cjs

@@ -0,0 +1,19 @@
+'use client';"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordianBlockComponent = void 0;
+const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const accordion_1 = require("../backends/gui/accordion.cjs");
+const prose_1 = require("../backends/gui/prose.cjs");
+const box_1 = require("../box.cjs");
+const spec_1 = require("./spec.cjs");
+const AccordianBlockComponent = ({ block, className }) => {
+    if (block.blockType !== 'accordian')
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "accordian block required" });
+    const b = block;
+    return ((0, jsx_runtime_1.jsx)(accordion_1.Accordion, { type: "single", collapsible: true, ...(0, spec_1.sx)('w-full border rounded-xl overflow-hidden', className), children: b.items.map((item, i) => ((0, react_1.createElement)(accordion_1.AccordionItem, { ...(0, spec_1.sx)('border-b overflow-hidden'), value: `value-${i}`, key: i },
+            (0, jsx_runtime_1.jsx)(accordion_1.AccordionTrigger, { ...(0, spec_1.sx)('px-3 md:px-4 lg:px-6'), children: (0, jsx_runtime_1.jsx)(prose_1.ApplyTypography, { children: (0, jsx_runtime_1.jsx)(box_1.Box, { tag: "h6", className: "text-[1.05rem] font-semibold", children: item.trigger }) }) }),
+            (0, jsx_runtime_1.jsx)(accordion_1.AccordionContent, { ...(0, spec_1.sx)('p-4 border-t'), children: (0, jsx_runtime_1.jsx)(prose_1.ApplyTypography, { className: "items-start", children: typeof item.content === 'string' ? (0, jsx_runtime_1.jsx)(box_1.Box, { tag: "p", children: item.content }) : item.content }) })))) }));
+};
+exports.AccordianBlockComponent = AccordianBlockComponent;
+exports.default = exports.AccordianBlockComponent;

package/dist/blocks/accordian.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordian.d.ts","sourceRoot":"","sources":["../../src/blocks/accordian.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,KAAK,mBAAmB,EAAM,MAAM,QAAQ,CAAA;AAErD,eAAO,MAAM,uBAAuB,yBAA0B,mBAAmB,4CAgChF,CAAA;eAEc,uBAAuB"}

package/dist/blocks/accordian.js

@@ -0,0 +1,16 @@
+'use client';import { createElement as _createElement } from "react";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from '../backends/gui/accordion.js';
+import { ApplyTypography } from '../backends/gui/prose.js';
+import { Box } from '../box.js';
+import { sx } from './spec.js';
+export const AccordianBlockComponent = ({ block, className }) => {
+    if (block.blockType !== 'accordian')
+        return _jsx(_Fragment, { children: "accordian block required" });
+    const b = block;
+    return (_jsx(Accordion, { type: "single", collapsible: true, ...sx('w-full border rounded-xl overflow-hidden', className), children: b.items.map((item, i) => (_createElement(AccordionItem, { ...sx('border-b overflow-hidden'), value: `value-${i}`, key: i },
+            _jsx(AccordionTrigger, { ...sx('px-3 md:px-4 lg:px-6'), children: _jsx(ApplyTypography, { children: _jsx(Box, { tag: "h6", className: "text-[1.05rem] font-semibold", children: item.trigger }) }) }),
+            _jsx(AccordionContent, { ...sx('p-4 border-t'), children: _jsx(ApplyTypography, { className: "items-start", children: typeof item.content === 'string' ? _jsx(Box, { tag: "p", children: item.content }) : item.content }) })))) }));
+};
+export default AccordianBlockComponent;
+//# sourceMappingURL=accordian.js.map

package/dist/blocks/accordian.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordian.js","sourceRoot":"","sources":["../../src/blocks/accordian.tsx"],"names":[],"mappings":";;AAEA,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,aAAa,EACb,gBAAgB,GACjB,MAAM,2BAA2B,CAAA;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAE5B,OAAO,EAA4B,EAAE,EAAE,MAAM,QAAQ,CAAA;AAErD,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAuB,EAAE,EAAE;IACnF,IAAI,KAAK,CAAC,SAAS,KAAK,WAAW;QAAE,OAAO,yDAA6B,CAAA;IACzE,MAAM,CAAC,GAAG,KAAuB,CAAA;IAEjC,OAAO,CACL,KAAC,SAAS,IACR,IAAI,EAAC,QAAQ,EACb,WAAW,WACP,EAAE,CAAC,0CAA0C,EAAE,SAAS,CAAC,YAE5D,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CACxB,eAAC,aAAa,OACR,EAAE,CAAC,0BAA0B,CAAC,EAClC,KAAK,EAAE,SAAS,CAAC,EAAE,EACnB,GAAG,EAAE,CAAC;YAEN,KAAC,gBAAgB,OAAK,EAAE,CAAC,sBAAsB,CAAC,YAC9C,KAAC,eAAe,cACd,KAAC,GAAG,IAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAC,8BAA8B,YACnD,IAAI,CAAC,OAAO,GACT,GACU,GACD;YACnB,KAAC,gBAAgB,OAAK,EAAE,CAAC,cAAc,CAAC,YACtC,KAAC,eAAe,IAAC,SAAS,EAAC,aAAa,YACrC,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAC,GAAG,IAAC,GAAG,EAAC,GAAG,YAAE,IAAI,CAAC,OAAO,GAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,GACpE,GACD,CACL,CACjB,CAAC,GACQ,CACb,CAAA;AACH,CAAC,CAAA;AAED,eAAe,uBAAuB,CAAA"}

package/dist/blocks/bullet-cards.cjs

@@ -0,0 +1,40 @@
+'use client';"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BulletCardsBlockComponent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const box_1 = require("../box.cjs");
+const cn_1 = require("../core/cn.cjs");
+const grid_1 = require("./grid.cjs");
+const spec_1 = require("./spec.cjs");
+/** An icon given as a url is drawn at `size`; given as a node it renders as-is. */
+const Mark = ({ icon, size, phone, className, }) => {
+    if (!icon)
+        return null;
+    if (typeof icon === 'string') {
+        const s = phone ? size * 0.75 : size;
+        return (0, jsx_runtime_1.jsx)(box_1.Box, { tag: "img", src: icon, width: s, height: s, alt: "", className: className });
+    }
+    return (0, jsx_runtime_1.jsx)(box_1.Box, { className: className, children: icon });
+};
+/**
+ * A grid of one-line cards, each an icon beside its text.
+ *
+ * Borders arrive at `md` and not before: on a phone the grid is one column, so
+ * a border per card would draw a stack of boxes where the eye reads a list.
+ */
+const BulletCardsBlockComponent = ({ block, className, agent, }) => {
+    if (block.blockType !== 'bullet-cards')
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "bullet-cards block required" });
+    const b = block;
+    const spec = (s) => (0, spec_1.has)(b.specifiers, s);
+    const border = spec('no-card-border')
+        ? 'border-0'
+        : (0, cn_1.cn)('md:border', spec('border-muted-3')
+            ? 'md:border-muted-3'
+            : spec('border-muted-1')
+                ? 'md:border-muted-1'
+                : 'md:border-muted-2');
+    return ((0, jsx_runtime_1.jsx)(grid_1.GridBlockComponent, { block: { blockType: 'grid', grid: b.grid }, className: className, agent: agent, children: b.cards.map((card, i) => ((0, jsx_runtime_1.jsxs)(box_1.Box, { className: (0, cn_1.cn)('px-0 sm:px-4 py-1 md:py-4 rounded-lg', 'flex flex-row justify-start items-center text-foreground', border), children: [(0, jsx_runtime_1.jsx)(Mark, { icon: card.icon, size: b.iconSize ?? 28, phone: agent === 'phone', className: "shrink-0 mr-2 md:mr-4" }), (0, jsx_runtime_1.jsx)(box_1.Box, { tag: "p", className: (0, cn_1.cn)('m-0 sm:text-base', spec('mobile-small-text') ? 'text-xs' : 'text-sm'), children: card.text })] }, i))) }));
+};
+exports.BulletCardsBlockComponent = BulletCardsBlockComponent;
+exports.default = exports.BulletCardsBlockComponent;

package/dist/blocks/bullet-cards.d.ts

@@ -0,0 +1,10 @@
+import { type BlockComponentProps } from './spec.js';
+/**
+ * A grid of one-line cards, each an icon beside its text.
+ *
+ * Borders arrive at `md` and not before: on a phone the grid is one column, so
+ * a border per card would draw a stack of boxes where the eye reads a list.
+ */
+export declare const BulletCardsBlockComponent: ({ block, className, agent, }: BlockComponentProps) => import("react/jsx-runtime").JSX.Element;
+export default BulletCardsBlockComponent;
+//# sourceMappingURL=bullet-cards.d.ts.map

package/dist/blocks/bullet-cards.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bullet-cards.d.ts","sourceRoot":"","sources":["../../src/blocks/bullet-cards.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,mBAAmB,EAAO,MAAM,QAAQ,CAAA;AAsBtD;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,iCAInC,mBAAmB,4CA4CrB,CAAA;eAEc,yBAAyB"}

package/dist/blocks/bullet-cards.js

@@ -0,0 +1,37 @@
+'use client';import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../box.js';
+import { cn } from '../core/cn.js';
+import { GridBlockComponent } from './grid.js';
+import { has } from './spec.js';
+/** An icon given as a url is drawn at `size`; given as a node it renders as-is. */
+const Mark = ({ icon, size, phone, className, }) => {
+    if (!icon)
+        return null;
+    if (typeof icon === 'string') {
+        const s = phone ? size * 0.75 : size;
+        return _jsx(Box, { tag: "img", src: icon, width: s, height: s, alt: "", className: className });
+    }
+    return _jsx(Box, { className: className, children: icon });
+};
+/**
+ * A grid of one-line cards, each an icon beside its text.
+ *
+ * Borders arrive at `md` and not before: on a phone the grid is one column, so
+ * a border per card would draw a stack of boxes where the eye reads a list.
+ */
+export const BulletCardsBlockComponent = ({ block, className, agent, }) => {
+    if (block.blockType !== 'bullet-cards')
+        return _jsx(_Fragment, { children: "bullet-cards block required" });
+    const b = block;
+    const spec = (s) => has(b.specifiers, s);
+    const border = spec('no-card-border')
+        ? 'border-0'
+        : cn('md:border', spec('border-muted-3')
+            ? 'md:border-muted-3'
+            : spec('border-muted-1')
+                ? 'md:border-muted-1'
+                : 'md:border-muted-2');
+    return (_jsx(GridBlockComponent, { block: { blockType: 'grid', grid: b.grid }, className: className, agent: agent, children: b.cards.map((card, i) => (_jsxs(Box, { className: cn('px-0 sm:px-4 py-1 md:py-4 rounded-lg', 'flex flex-row justify-start items-center text-foreground', border), children: [_jsx(Mark, { icon: card.icon, size: b.iconSize ?? 28, phone: agent === 'phone', className: "shrink-0 mr-2 md:mr-4" }), _jsx(Box, { tag: "p", className: cn('m-0 sm:text-base', spec('mobile-small-text') ? 'text-xs' : 'text-sm'), children: card.text })] }, i))) }));
+};
+export default BulletCardsBlockComponent;
+//# sourceMappingURL=bullet-cards.js.map

package/dist/blocks/bullet-cards.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bullet-cards.js","sourceRoot":"","sources":["../../src/blocks/bullet-cards.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAA;AAE/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAA;AAC3C,OAAO,EAA4B,GAAG,EAAE,MAAM,QAAQ,CAAA;AAEtD,mFAAmF;AACnF,MAAM,IAAI,GAAG,CAAC,EACZ,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,SAAS,GAMV,EAAE,EAAE;IACH,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAA;IACtB,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC7B,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;QACpC,OAAO,KAAC,GAAG,IAAC,GAAG,EAAC,KAAK,EAAC,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,GAAG,EAAC,EAAE,EAAC,SAAS,EAAE,SAAS,GAAI,CAAA;IACvF,CAAC;IACD,OAAO,KAAC,GAAG,IAAC,SAAS,EAAE,SAAS,YAAG,IAAI,GAAO,CAAA;AAChD,CAAC,CAAA;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,EACxC,KAAK,EACL,SAAS,EACT,KAAK,GACe,EAAE,EAAE;IACxB,IAAI,KAAK,CAAC,SAAS,KAAK,cAAc;QAAE,OAAO,4DAAgC,CAAA;IAC/E,MAAM,CAAC,GAAG,KAAyB,CAAA;IACnC,MAAM,IAAI,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC,CAAA;IAEhD,MAAM,MAAM,GAAG,IAAI,CAAC,gBAAgB,CAAC;QACnC,CAAC,CAAC,UAAU;QACZ,CAAC,CAAC,EAAE,CACA,WAAW,EACX,IAAI,CAAC,gBAAgB,CAAC;YACpB,CAAC,CAAC,mBAAmB;YACrB,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC;gBACtB,CAAC,CAAC,mBAAmB;gBACrB,CAAC,CAAC,mBAAmB,CAC1B,CAAA;IAEL,OAAO,CACL,KAAC,kBAAkB,IACjB,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,EAC1C,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,YAEX,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CACxB,MAAC,GAAG,IAEF,SAAS,EAAE,EAAE,CACX,sCAAsC,EACtC,0DAA0D,EAC1D,MAAM,CACP,aAED,KAAC,IAAI,IACH,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,CAAC,CAAC,QAAQ,IAAI,EAAE,EACtB,KAAK,EAAE,KAAK,KAAK,OAAO,EACxB,SAAS,EAAC,uBAAuB,GACjC,EACF,KAAC,GAAG,IAAC,GAAG,EAAC,GAAG,EAAC,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,YAC9F,IAAI,CAAC,IAAI,GACN,KAfD,CAAC,CAgBF,CACP,CAAC,GACiB,CACtB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,yBAAyB,CAAA"}

package/dist/blocks/card.cjs

@@ -0,0 +1,58 @@
+'use client';"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardBlockComponent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const card_1 = require("../backends/gui/card.cjs");
+const card_2 = require("../backends/gui/card.cjs");
+const link_1 = require("../backends/gui/link.cjs");
+const prose_1 = require("../backends/gui/prose.cjs");
+const box_1 = require("../box.cjs");
+const cn_1 = require("../core/cn.cjs");
+const cta_1 = require("./cta.cjs");
+const image_1 = require("./image.cjs");
+const video_1 = require("./video.cjs");
+const spec_1 = require("./spec.cjs");
+const SIZES = ['responsive', 'sm', 'base', 'lg', 'xl'];
+/** `typography-lg` in the specifier bag picks the prose rung. */
+const rung = (specifiers) => {
+    const hint = specifiers?.split(/\s+/).find((t) => t.startsWith('typography-'));
+    const last = hint?.split('-').pop();
+    return last && SIZES.includes(last) ? last : 'responsive';
+};
+/** A link that reads as a row: label left, an arrow out on the right. */
+const LinkOut = ({ def }) => ((0, jsx_runtime_1.jsx)(link_1.LinkElement, { def: def, style: { justifyContent: 'space-between' }, variant: "link", iconAfter: true, icon: (0, jsx_runtime_1.jsx)("svg", { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, children: (0, jsx_runtime_1.jsx)("path", { d: "M7 17 17 7M7 7h10v10", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+/**
+ * A card: a heading, some media, some content, and a call to action — any of
+ * which may be absent.
+ *
+ * `ghost` is the variant with everything taken away: no border, no padding, a
+ * larger left-aligned title. It reads as content on the page rather than as a
+ * card, which is what a card in a grid of prose usually wants to be.
+ */
+const CardBlockComponent = ({ block, className, contentClassName, agent, }) => {
+    if (block.blockType !== 'card')
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "card block required" });
+    const card = block;
+    const spec = (s) => (0, spec_1.has)(card.specifiers, s);
+    const ghost = spec('ghost');
+    const dim = spec('appear-disabled');
+    const hover = spec('reveal-content-on-hover');
+    const inline = spec('icon-inline');
+    const pad = ghost ? 'px-0 py-0' : 'px-6 py-3';
+    const border = dim ? 'border-muted-4' : 'border-muted-3';
+    const bg = spec('bg-card') ? 'bg-level-1' : '';
+    const place = (0, cn_1.cn)(spec('content-left') ? 'items-start' : 'items-center', spec('content-top') && 'justify-start', contentClassName);
+    const Header = ({ inContent = false, className: cls }) => card.title || card.byline || card.icon ? ((0, jsx_runtime_1.jsxs)(card_2.CardHeader, { ...(0, spec_1.sx)((0, cn_1.cn)('text-accent', dim && 'text-muted-2', pad, ghost && 'border-0', cls)), children: [(0, jsx_runtime_1.jsxs)(box_1.Box, { className: inline || inContent ? 'flex flex-row justify-start items-end my-3' : '', children: [card.icon && !card.iconAfter && ((0, jsx_runtime_1.jsx)(box_1.Box, { className: inline ? 'mr-1' : 'mb-2', children: card.icon })), card.title && ((0, jsx_runtime_1.jsx)(card_2.CardTitle, { ...(0, spec_1.sx)((0, cn_1.cn)('text-center text-lg font-medium', spec('heading-style-title') && 'font-heading text-base leading-tight', ghost && 'text-left md:text-xl', inline && 'md:text-xl')), children: card.title })), card.icon && card.iconAfter && ((0, jsx_runtime_1.jsx)(box_1.Box, { className: inline ? 'ml-1' : 'my-1', children: card.icon }))] }), card.byline && (0, jsx_runtime_1.jsx)(card_2.CardDescription, { children: card.byline })] })) : null;
+    const prose = (content) => typeof content === 'string' ? (0, jsx_runtime_1.jsx)(box_1.Box, { tag: "p", children: content }) : content;
+    const Body = ({ className: cls }) => spec('media-left') ? ((0, jsx_runtime_1.jsxs)(card_2.CardContent, { ...(0, spec_1.sx)((0, cn_1.cn)('flex flex-row justify-start items-stretch p-0 grow', border, bg, place, cls)), children: [card.media && ((0, jsx_runtime_1.jsx)(box_1.Box, { className: (0, cn_1.cn)('box-content grow-0', pad), 
+                // This layout assumes the media is a video with an `sm` size — it
+                // is the width that decides the split, so it has to be known here.
+                style: { width: card.media.dim?.sm?.w }, children: (0, jsx_runtime_1.jsx)(video_1.VideoBlockComponent, { block: card.media, usePoster: spec('video-use-poster'), size: "sm", agent: agent, className: dim ? 'opacity-60' : '' }) })), card.content && ((0, jsx_runtime_1.jsx)(prose_1.ApplyTypography, { className: (0, cn_1.cn)('grow border-l flex flex-col justify-center', pad, border, place), size: rung(card.specifiers), children: prose(card.content) }))] })) : ((0, jsx_runtime_1.jsxs)(card_2.CardContent, { ...(0, spec_1.sx)((0, cn_1.cn)('grow flex flex-col justify-center', bg, pad, place, spec('full-width') && 'p-0', cls)), children: [hover && (0, jsx_runtime_1.jsx)(Header, { inContent: true }), card.content && spec('content-before') && prose(card.content), card.media &&
+                (card.media.blockType === 'image' ? ((0, jsx_runtime_1.jsx)(image_1.ImageBlockComponent, { block: card.media, agent: agent })) : ((0, jsx_runtime_1.jsx)(video_1.VideoBlockComponent, { block: card.media, agent: agent }))), card.content && !spec('content-before') && prose(card.content)] }));
+    const Foot = () => !card.cta ? null : spec('links-w-arrow') ? ((0, jsx_runtime_1.jsx)(card_2.CardFooter, { ...(0, spec_1.sx)((0, cn_1.cn)('flex flex-col justify-start items-stretch', pad)), children: (0, jsx_runtime_1.jsx)(cta_1.CTABlockComponent, { block: card.cta, agent: agent, renderLink: (def, key) => (0, jsx_runtime_1.jsx)(LinkOut, { def: def }, key) }) })) : ((0, jsx_runtime_1.jsx)(card_2.CardFooter, { ...(0, spec_1.sx)((0, cn_1.cn)('grid grid-cols-1 gap-2 md:flex md:flex-row md:justify-center', pad)), children: (0, jsx_runtime_1.jsx)(cta_1.CTABlockComponent, { block: card.cta, agent: agent }) }));
+    return ((0, jsx_runtime_1.jsxs)(card_1.Card, { ...(0, spec_1.sx)((0, cn_1.cn)('flex flex-col self-stretch', hover && 'group relative', border, (spec('no-outer-border') || ghost) && 'border-0', bg, ghost && 'gap-2', className)), children: [(0, jsx_runtime_1.jsx)(Header, { className: hover ? 'absolute top-0 left-0 w-full hidden' : '' }), (0, jsx_runtime_1.jsx)(Body, { className: hover
+                    ? 'items-start justify-start rounded-lg p-4 transition-opacity duration-500 ease-out opacity-100'
+                    : '' }), (0, jsx_runtime_1.jsx)(Foot, {})] }));
+};
+exports.CardBlockComponent = CardBlockComponent;
+exports.default = exports.CardBlockComponent;