@c9up/nebula 0.1.5 → 0.1.7

package/dist/lib/image.js

@@ -0,0 +1,331 @@
+/**
+ * Responsive image plumbing — the arithmetic behind `Image` and `Picture`.
+ *
+ * Everything here is pure: widths in, strings out. It lives apart from the
+ * components because the interesting part of a responsive image is not the
+ * markup, it is deciding *which* variants to offer the browser, and that
+ * decision is worth testing without a DOM.
+ *
+ * **Where the bytes come from is not nebula's business.** A component that
+ * imported an image processor would drag a native module into a package whose
+ * only peer is Aurora, and would pin every app to one way of serving images.
+ * So the URL is produced by a resolver the app installs once
+ * ({@link setImageResolver}). The default one points at `/__image`, the
+ * endpoint `@c9up/prism` registers; pointing it at a CDN instead is a
+ * one-line change and no component notices.
+ *
+ * The resolver asks for a width, a format and a quality — never a height and
+ * never a crop. Those three axes are the ones the server can safely allow-list,
+ * which is what keeps an open transformation endpoint from becoming a cache
+ * bomb. Cropping is `object-fit` on the element, where it costs nothing.
+ */
+/**
+ * Widths for elements that are not the width of a screen.
+ *
+ * Avatars, icons, thumbnails. Without them a 48px avatar's nearest offer is
+ * 640 — thirteen times the pixels it can show — because every other ladder
+ * starts at a phone's viewport.
+ */
+export const IMAGE_SIZES = [
+    16, 32, 48, 64, 96, 128, 256, 384,
+];
+/**
+ * The widths worth generating, from real device pixel counts.
+ *
+ * Astro's ladder, close to the one Next.js settled on independently — which is
+ * the reason to reuse it rather than invent one. They are device widths, not
+ * round numbers: 828 is the iPhone XR, 1668 is an iPad. A tidier
+ * `[400, 800, 1200, 1600]` misses every one of them and ships each device a
+ * slightly-too-large image.
+ *
+ * Density is what makes the ladder cheap to round up to. The nearest rung
+ * above 2400 here is 2560, six percent over; on a sparser ladder it would be
+ * 3840.
+ */
+export const DEFAULT_RESOLUTIONS = [
+    640, // older and lower-end phones
+    750, // iPhone 6-8
+    828, // iPhone XR/11
+    960, // older horizontal phones
+    1080, // iPhone 6-8 Plus
+    1280, // 720p
+    1668, // various iPads
+    1920, // 1080p
+    2048, // QXGA
+    2560, // WQXGA
+    3200, // QHD+
+    3840, // 4K
+    4480, // 4.5K
+    5120, // 5K
+    6016, // 6K
+];
+/**
+ * The ladder without the sizes only a desktop display asks for.
+ *
+ * Worth choosing deliberately for a full-width image: the top of
+ * {@link DEFAULT_RESOLUTIONS} is eleven extra variants to store and warm, for
+ * screens most sites see rarely.
+ */
+export const LIMITED_RESOLUTIONS = [
+    640, 750, 828, 1080, 1280, 1668, 2048, 2560,
+];
+/**
+ * Every width a component may ask for, ascending.
+ *
+ * This list and the endpoint's allow-list are the same list, and that is the
+ * contract between the two halves: a component that emits a width the endpoint
+ * does not serve produces a `srcset` where every entry is a 400, and the page
+ * silently falls back to the one `src`.
+ *
+ * It is also why a declared width is never emitted literally. `width: 1200`
+ * asking for 1200 and 2400 would be two widths no allow-list contains, and
+ * allow-listing whatever an author happens to type is not an allow-list.
+ */
+export function allSizes(breakpoints) {
+    return [...new Set([...IMAGE_SIZES, ...breakpoints])].sort((a, b) => a - b);
+}
+/**
+ * The smallest offered width that still covers `target`.
+ *
+ * Upwards, never downwards. Rounding down is how a 2x screen is handed an
+ * image with fewer pixels than it can show, and the result is soft in a way
+ * that is hard to attribute later. Falls back to the largest rung, which the
+ * endpoint clamps to the source anyway.
+ */
+function snapUp(target, sizes) {
+    return sizes.find((size) => size >= target) ?? sizes[sizes.length - 1] ?? 0;
+}
+/**
+ * The width to actually request for a declared one.
+ *
+ * The `src` attribute and a density entry are single URLs rather than ladders,
+ * and they are subject to the same contract: a literal declared width is a
+ * width no allow-list contains.
+ */
+export function offeredWidth(width, breakpoints = DEFAULT_RESOLUTIONS) {
+    return snapUp(width, allSizes(breakpoints));
+}
+/**
+ * The widths to offer, ascending.
+ *
+ * Every value comes off {@link allSizes} — see there for why a declared width
+ * is never emitted literally. 1x and 2x are always represented, rounded up, so
+ * the common case of a dense screen at the declared width is never served
+ * fewer pixels than it can show.
+ */
+export function imageWidths(options) {
+    const { width, layout, breakpoints = DEFAULT_RESOLUTIONS, originalWidth, } = options;
+    const every = allSizes(breakpoints);
+    /**
+     * Drop what the source cannot fill, but never return nothing.
+     *
+     * A source smaller than every rung still has to be offered at some width,
+     * and the endpoint clamps to the source rather than enlarging it.
+     */
+    const withinSource = (candidates) => {
+        if (originalWidth === undefined)
+            return candidates;
+        const kept = candidates.filter((candidate) => candidate <= originalWidth);
+        if (kept.length > 0)
+            return kept;
+        const smallest = candidates[0];
+        return smallest === undefined ? [] : [smallest];
+    };
+    if (layout === "full-width") {
+        return withinSource([...breakpoints]);
+    }
+    if (width === undefined || width <= 0)
+        return [];
+    const oneX = snapUp(width, every);
+    const twoX = snapUp(width * 2, every);
+    if (layout === "fixed") {
+        return withinSource([...new Set([oneX, twoX])].sort((a, b) => a - b));
+    }
+    if (layout === "constrained") {
+        // Below its declared width a constrained image is the width of the
+        // viewport, so the viewport rungs under the cap earn their place. The
+        // floor is the smallest device width: nothing narrower is a screen,
+        // and offering 32w to an image that is at least 640 wide is noise in
+        // every `srcset` on the page.
+        const floor = breakpoints[0] ?? 0;
+        const intermediate = every.filter((size) => size >= floor && size <= twoX);
+        return withinSource([...new Set([oneX, twoX, ...intermediate])].sort((a, b) => a - b));
+    }
+    return [];
+}
+/**
+ * The `sizes` attribute for a layout.
+ *
+ * Without it the browser assumes the image is the full width of the viewport
+ * and picks the largest variant on every screen — which is the failure mode
+ * where adding a `srcset` makes a page slower, not faster.
+ */
+export function imageSizes(options) {
+    const { width, layout } = options;
+    if (width === undefined || width <= 0) {
+        return layout === "full-width" ? "100vw" : undefined;
+    }
+    switch (layout) {
+        case "constrained":
+            // Wider screen than the cap: the image stops at the cap. Narrower:
+            // it is the screen.
+            return `(min-width: ${width}px) ${width}px, 100vw`;
+        case "fixed":
+            return `${width}px`;
+        case "full-width":
+            return "100vw";
+        default:
+            return undefined;
+    }
+}
+/** A `srcset` with `w` descriptors, or `undefined` when there is nothing to offer. */
+export function imageSrcSet(options) {
+    const { src, widths, format, quality, resolve = imageUrl } = options;
+    if (widths.length === 0)
+        return undefined;
+    return widths
+        .map((width) => `${resolve(src, { width, format, quality })} ${width}w`)
+        .join(", ");
+}
+/**
+ * A `srcset` with `x` descriptors.
+ *
+ * The alternative to widths, never a companion to them: a `srcset` mixing `w`
+ * and `x` descriptors is invalid, and browsers handle the mixture by ignoring
+ * the whole attribute.
+ */
+export function densitySrcSet(options) {
+    const { src, width, densities, format, quality, originalWidth, breakpoints = DEFAULT_RESOLUTIONS, resolve = imageUrl, } = options;
+    if (width <= 0 || densities.length === 0)
+        return undefined;
+    const seen = new Set();
+    const entries = [];
+    for (const density of [...densities].sort((a, b) => a - b)) {
+        if (density <= 0)
+            continue;
+        const target = offeredWidth(Math.round(width * density), breakpoints);
+        if (originalWidth !== undefined && target > originalWidth)
+            continue;
+        if (seen.has(target))
+            continue;
+        seen.add(target);
+        entries.push(`${resolve(src, { width: target, format, quality })} ${density}x`);
+    }
+    return entries.length === 0 ? undefined : entries.join(", ");
+}
+/**
+ * Where the default resolver sends its requests.
+ *
+ * `__`-prefixed because it is the framework's route rather than the
+ * application's, the same convention as `__assets` and `__relay`.
+ */
+let endpoint = "/__image";
+/** Point the built-in resolver at a different path. */
+export function setImageEndpoint(path) {
+    endpoint = path;
+}
+/**
+ * The resolver used when an application installs none.
+ *
+ * Parameter names are one letter because they end up in every `srcset` entry
+ * of every image on the page, and a `srcset` with fifteen entries repeats them
+ * fifteen times.
+ */
+export const defaultImageResolver = (src, transform) => {
+    const params = new URLSearchParams({
+        src,
+        w: String(Math.round(transform.width)),
+    });
+    if (transform.format !== undefined)
+        params.set("f", transform.format);
+    if (transform.quality !== undefined) {
+        params.set("q", String(Math.round(transform.quality)));
+    }
+    return `${endpoint}?${params.toString()}`;
+};
+let resolver = defaultImageResolver;
+/**
+ * Install the resolver every image uses.
+ *
+ * Call it once at startup — from the app's entry on the client, and from the
+ * same module on the server so SSR and hydration agree. They must agree: an
+ * `src` that differs between the two makes the browser discard the image the
+ * server already started fetching and request another.
+ *
+ * Passing `null` restores {@link defaultImageResolver}.
+ */
+export function setImageResolver(next) {
+    resolver = next ?? defaultImageResolver;
+}
+/** The resolver currently installed. */
+export function getImageResolver() {
+    return resolver;
+}
+/** Build one image URL through the installed resolver. */
+export function imageUrl(src, transform) {
+    return resolver(src, transform);
+}
+/** Tailwind classes for a layout. Height is always `auto` so the ratio holds. */
+export function layoutClasses(layout) {
+    switch (layout) {
+        case "full-width":
+            return "h-auto w-full";
+        case "constrained":
+            return "h-auto max-w-full";
+        default:
+            return "h-auto";
+    }
+}
+const FIT_CLASSES = {
+    cover: "object-cover",
+    contain: "object-contain",
+    fill: "object-fill",
+    none: "object-none",
+    "scale-down": "object-scale-down",
+};
+const POSITION_CLASSES = {
+    center: "object-center",
+    top: "object-top",
+    bottom: "object-bottom",
+    left: "object-left",
+    right: "object-right",
+    "top left": "object-left-top",
+    "top right": "object-right-top",
+    "bottom left": "object-left-bottom",
+    "bottom right": "object-right-bottom",
+};
+/** The `object-fit` class for a fit value. */
+export function fitClass(fit) {
+    return fit === undefined ? undefined : FIT_CLASSES[fit];
+}
+/** The `object-position` class for a position value. */
+export function positionClass(position) {
+    return position === undefined ? undefined : POSITION_CLASSES[position];
+}
+/** The MIME type a `<source type>` needs for a format. */
+export function mimeType(format) {
+    return `image/${format}`;
+}
+const EXTENSIONS = {
+    avif: "avif",
+    jpeg: "jpeg",
+    jpg: "jpeg",
+    png: "png",
+    webp: "webp",
+};
+/**
+ * The format a source's file name claims, if any.
+ *
+ * Used to pick the fallback of a `<picture>`: converting a PNG with
+ * transparency to JPEG puts a black box behind it, so the fallback follows the
+ * source rather than a fixed default. The extension is a claim, not proof —
+ * only the server knows what the bytes really are, and it re-reads them.
+ */
+export function formatFromSource(src) {
+    // Cut the query and fragment first, or `photo.png?v=2` has no extension.
+    const path = src.split(/[?#]/, 1)[0] ?? "";
+    const dot = path.lastIndexOf(".");
+    if (dot === -1)
+        return undefined;
+    return EXTENSIONS[path.slice(dot + 1).toLowerCase()];
+}

package/dist/lib/index.d.ts

@@ -9,4 +9,5 @@
 export { type ClassValue, clsx, cn, twMerge } from "./cn.js";
 export { type ClassOverrides, type CompoundVariant, cva, type VariantConfig, type VariantProps, type VariantSelection, type VariantShape, } from "./cva.js";
 export { byId, resetIds, uid } from "./id.js";
+export { allSizes, DEFAULT_RESOLUTIONS, defaultImageResolver, densitySrcSet, fitClass, formatFromSource, getImageResolver, type ImageFit, type ImageFormat, type ImageLayout, type ImagePosition, type ImageTransform, type ImageUrlResolver, imageSizes, imageSrcSet, imageUrl, imageWidths, LIMITED_RESOLUTIONS, layoutClasses, mimeType, positionClass, setImageEndpoint, setImageResolver, } from "./image.js";
 export { accessor, callHandler, type Reactive, read, readOr } from "./props.js";

package/dist/lib/index.js

@@ -9,4 +9,5 @@
 export { clsx, cn, twMerge } from "./cn.js";
 export { cva, } from "./cva.js";
 export { byId, resetIds, uid } from "./id.js";
+export { allSizes, DEFAULT_RESOLUTIONS, defaultImageResolver, densitySrcSet, fitClass, formatFromSource, getImageResolver, imageSizes, imageSrcSet, imageUrl, imageWidths, LIMITED_RESOLUTIONS, layoutClasses, mimeType, positionClass, setImageEndpoint, setImageResolver, } from "./image.js";
 export { accessor, callHandler, read, readOr } from "./props.js";

package/dist/lib/motion.d.ts

@@ -1,27 +1,36 @@
 /**
  * Enter and exit animations for overlays.
  *
- * shadcn drives these with `animate-in` / `animate-out` from `tw-animate-css`
- * — a Tailwind plugin, and a dependency. nebula declares the four keyframes it
- * needs in `theme.css` and references them through arbitrary animation values,
- * which every one of the three adapters supports and none of them needs a
- * plugin for.
+ * These are shadcn's own class strings, verbatim, and they come from the same
+ * place shadcn's do: `tw-animate-css`, which registers `animate-in` /
+ * `animate-out` and the `fade-*` / `zoom-*` / `slide-*` modifiers through
+ * `@theme inline` and `@utility`.
  *
- * The durations are asymmetric on purpose: entering is slower than leaving.
- * A surface appearing wants to be noticed, a surface dismissed wants to be out
- * of the way — matching them makes closing feel sluggish.
+ * nebula used to declare four bespoke keyframes and reference them through
+ * ARBITRARY animation values (`animate-[nebula-zoom-out_120ms_ease-in]`), to
+ * avoid the plugin. That is what made a missing stylesheet fatal rather than
+ * cosmetic: Tailwind compiles an arbitrary value unconditionally, so the
+ * `animation` property was always set while the keyframes behind it might exist
+ * nowhere — the browser then never fires `animationend` and every closed
+ * overlay stays in the document. With a theme-registered utility the class
+ * simply is not emitted when the theme is absent, the element animates not at
+ * all, and closing is instant. That is the whole reason upstream registers
+ * rather than inlines, and it is why the deviation is gone.
  *
- * Every string ends in `motion-reduce:animate-none`. That is not only a
- * courtesy: `onExitFinished` reads the computed style to decide whether to
- * wait, sees no animation, and removes the node immediately. Reduced motion
- * therefore gets an instant close rather than a delayed one, with no branch in
- * the component.
+ * The durations are shadcn's too, which means asymmetric by way of the sheet
+ * variants only; everything else takes `tw-animate-css`'s defaults.
  */
 import type { Side } from "../primitives/floating.js";
-/** Popovers, menus, selects — scale up from the anchor. */
-export declare const zoomInOut = "data-[state=open]:animate-[nebula-zoom-in_150ms_ease-out] data-[state=closed]:animate-[nebula-zoom-out_120ms_ease-in] motion-reduce:animate-none";
+/**
+ * Popovers, menus, selects — scale up from the anchor.
+ *
+ * shadcn's dialog and popover string. `motion-reduce:animate-none` is ours and
+ * stays: it also makes `onExitFinished` see no animation and remove the node at
+ * once, so reduced motion gets an instant close with no branch in the component.
+ */
+export declare const zoomInOut = "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 motion-reduce:animate-none";
 /** Backdrops and tooltips — no movement, just opacity. */
-export declare const fadeInOut = "data-[state=open]:animate-[nebula-fade-in_150ms_ease-out] data-[state=closed]:animate-[nebula-fade-out_120ms_ease-in] motion-reduce:animate-none";
+export declare const fadeInOut = "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 motion-reduce:animate-none";
 /**
  * Panels that slide in from an edge — Sheet, Drawer.
  *

package/dist/lib/motion.js

@@ -1,26 +1,35 @@
 /**
  * Enter and exit animations for overlays.
  *
- * shadcn drives these with `animate-in` / `animate-out` from `tw-animate-css`
- * — a Tailwind plugin, and a dependency. nebula declares the four keyframes it
- * needs in `theme.css` and references them through arbitrary animation values,
- * which every one of the three adapters supports and none of them needs a
- * plugin for.
+ * These are shadcn's own class strings, verbatim, and they come from the same
+ * place shadcn's do: `tw-animate-css`, which registers `animate-in` /
+ * `animate-out` and the `fade-*` / `zoom-*` / `slide-*` modifiers through
+ * `@theme inline` and `@utility`.
  *
- * The durations are asymmetric on purpose: entering is slower than leaving.
- * A surface appearing wants to be noticed, a surface dismissed wants to be out
- * of the way — matching them makes closing feel sluggish.
+ * nebula used to declare four bespoke keyframes and reference them through
+ * ARBITRARY animation values (`animate-[nebula-zoom-out_120ms_ease-in]`), to
+ * avoid the plugin. That is what made a missing stylesheet fatal rather than
+ * cosmetic: Tailwind compiles an arbitrary value unconditionally, so the
+ * `animation` property was always set while the keyframes behind it might exist
+ * nowhere — the browser then never fires `animationend` and every closed
+ * overlay stays in the document. With a theme-registered utility the class
+ * simply is not emitted when the theme is absent, the element animates not at
+ * all, and closing is instant. That is the whole reason upstream registers
+ * rather than inlines, and it is why the deviation is gone.
  *
- * Every string ends in `motion-reduce:animate-none`. That is not only a
- * courtesy: `onExitFinished` reads the computed style to decide whether to
- * wait, sees no animation, and removes the node immediately. Reduced motion
- * therefore gets an instant close rather than a delayed one, with no branch in
- * the component.
+ * The durations are shadcn's too, which means asymmetric by way of the sheet
+ * variants only; everything else takes `tw-animate-css`'s defaults.
  */
-/** Popovers, menus, selects — scale up from the anchor. */
-export const zoomInOut = "data-[state=open]:animate-[nebula-zoom-in_150ms_ease-out] data-[state=closed]:animate-[nebula-zoom-out_120ms_ease-in] motion-reduce:animate-none";
+/**
+ * Popovers, menus, selects — scale up from the anchor.
+ *
+ * shadcn's dialog and popover string. `motion-reduce:animate-none` is ours and
+ * stays: it also makes `onExitFinished` see no animation and remove the node at
+ * once, so reduced motion gets an instant close with no branch in the component.
+ */
+export const zoomInOut = "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 motion-reduce:animate-none";
 /** Backdrops and tooltips — no movement, just opacity. */
-export const fadeInOut = "data-[state=open]:animate-[nebula-fade-in_150ms_ease-out] data-[state=closed]:animate-[nebula-fade-out_120ms_ease-in] motion-reduce:animate-none";
+export const fadeInOut = "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 motion-reduce:animate-none";
 /**
  * Panels that slide in from an edge — Sheet, Drawer.
  *
@@ -28,12 +37,9 @@ export const fadeInOut = "data-[state=open]:animate-[nebula-fade-in_150ms_ease-o
  * depends on the panel's own size and only `translate-x-full` knows that.
  */
 export function slideFrom(side) {
-    const axis = side === "left"
-        ? "data-[state=closed]:-translate-x-full"
-        : side === "right"
-            ? "data-[state=closed]:translate-x-full"
-            : side === "top"
-                ? "data-[state=closed]:-translate-y-full"
-                : "data-[state=closed]:translate-y-full";
-    return `transition-transform duration-300 ease-in-out data-[state=open]:translate-x-0 data-[state=open]:translate-y-0 ${axis} motion-reduce:transition-none`;
+    // shadcn's sheet: a slide utility per side, and its asymmetric durations —
+    // entering is slower than leaving, because a surface appearing wants to be
+    // noticed while one dismissed wants to be out of the way.
+    const slide = `data-[state=open]:slide-in-from-${side} data-[state=closed]:slide-out-to-${side}`;
+    return `data-[state=open]:animate-in data-[state=closed]:animate-out ${slide} data-[state=open]:duration-500 data-[state=closed]:duration-300 motion-reduce:animate-none`;
 }

package/dist/molecules/Picture.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Picture — the same image in several formats, browser picks the first it can.
+ *
+ * `Image` asks for one format and trusts it to be supported. That is fine for
+ * WebP, which every current browser reads. It is not fine for AVIF, which is
+ * 20-30% smaller again and still not universal — so AVIF can only be offered
+ * *alongside* a fallback, which is what `<picture>` is for.
+ *
+ * ```ts
+ * Picture({ src: "/photos/hero.jpg", alt: "…", width: 1200, height: 800 })
+ * ```
+ *
+ * renders a `<source type="image/avif">`, a `<source type="image/webp">` and
+ * the original as the `<img>` underneath. The browser takes the first `type`
+ * it understands; one that understands none takes the `<img>`, which is also
+ * what a crawler reads.
+ *
+ * The `<img>` is `Image` itself, with every prop forwarded. That is what makes
+ * this a molecule rather than an atom, and it is deliberate: the `srcset`
+ * arithmetic, the `sizes`, the loading attributes and the layout classes have
+ * exactly one implementation, so a `<source>` can never end up offering a
+ * different ladder than the `<img>` beneath it.
+ */
+import { type ImageProps } from "../atoms/Image.js";
+import { type ImageFormat } from "../lib/image.js";
+import { type Reactive } from "../lib/props.js";
+export interface PictureProps extends ImageProps {
+    /**
+     * Formats to offer above the fallback, best first.
+     *
+     * Order is the whole contract: a browser takes the first `type` it
+     * supports without comparing sizes, so listing WebP before AVIF means no
+     * browser ever receives the smaller file.
+     */
+    formats?: Reactive<readonly ImageFormat[]>;
+    /**
+     * Format of the `<img>` underneath.
+     *
+     * Defaults to what the source's extension claims, falling back to JPEG.
+     * Following the source matters for PNG: a transparent logo flattened to
+     * JPEG arrives with a black background, and the fallback is exactly the
+     * path taken by the browsers least likely to be checked.
+     */
+    fallbackFormat?: Reactive<ImageFormat | undefined>;
+}
+export declare const Picture: (props?: PictureProps | undefined) => import("@c9up/aurora").TemplateResult;

package/dist/molecules/Picture.js

@@ -0,0 +1,62 @@
+/**
+ * Picture — the same image in several formats, browser picks the first it can.
+ *
+ * `Image` asks for one format and trusts it to be supported. That is fine for
+ * WebP, which every current browser reads. It is not fine for AVIF, which is
+ * 20-30% smaller again and still not universal — so AVIF can only be offered
+ * *alongside* a fallback, which is what `<picture>` is for.
+ *
+ * ```ts
+ * Picture({ src: "/photos/hero.jpg", alt: "…", width: 1200, height: 800 })
+ * ```
+ *
+ * renders a `<source type="image/avif">`, a `<source type="image/webp">` and
+ * the original as the `<img>` underneath. The browser takes the first `type`
+ * it understands; one that understands none takes the `<img>`, which is also
+ * what a crawler reads.
+ *
+ * The `<img>` is `Image` itself, with every prop forwarded. That is what makes
+ * this a molecule rather than an atom, and it is deliberate: the `srcset`
+ * arithmetic, the `sizes`, the loading attributes and the layout classes have
+ * exactly one implementation, so a `<source>` can never end up offering a
+ * different ladder than the `<img>` beneath it.
+ */
+import { component, html } from "@c9up/aurora";
+import { Image, resolvedSizes, resolvedSrcSet, } from "../atoms/Image.js";
+import { formatFromSource, mimeType } from "../lib/image.js";
+import { read, readOr } from "../lib/props.js";
+const DEFAULT_FORMATS = ["avif", "webp"];
+/**
+ * The format for the `<img>`, never one of the modern ones.
+ *
+ * A fallback in a format the `<source>` elements already cover is not a
+ * fallback — a browser that cannot read AVIF or WebP would be handed WebP.
+ */
+function fallbackOf(props) {
+    const explicit = read(props.fallbackFormat);
+    if (explicit !== undefined)
+        return explicit;
+    const claimed = formatFromSource(read(props.src));
+    return claimed === "png" ? "png" : "jpeg";
+}
+export const Picture = component((props) => {
+    const formats = () => readOr(props.formats, DEFAULT_FORMATS);
+    return html `<picture data-slot="picture">
+		${() => formats().map((format) => {
+        const srcset = resolvedSrcSet(props, format);
+        // A layout that generates no ladder (`none`, or a `fixed`
+        // image with no width) leaves nothing for a `<source>` to
+        // point at, and an empty `srcset` makes the browser pick that
+        // source and render nothing.
+        if (srcset === undefined)
+            return null;
+        return html `<source
+					data-slot="picture-source"
+					type="${mimeType(format)}"
+					srcset="${srcset}"
+					sizes="${() => resolvedSizes(props)}"
+				/>`;
+    })}
+		${() => Image({ ...props, format: fallbackOf(props) })}
+	</picture>`;
+});

package/dist/molecules/index.d.ts

@@ -29,6 +29,7 @@ export { InputOTP, type InputOTPProps } from "./InputOTP.js";
 export { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, type ItemProps, ItemSeparator, ItemTitle, type ItemVariants, itemVariants, } from "./Item.js";
 export { Message, type MessageProps } from "./Message.js";
 export { type PageSlot, Pagination, type PaginationProps, pageWindow, } from "./Pagination.js";
+export { Picture, type PictureProps } from "./Picture.js";
 export { RadioGroup, type RadioGroupProps, type RadioOption, } from "./RadioGroup.js";
 export { Resizable, type ResizableProps } from "./Resizable.js";
 export { Table, TableBody, TableCaption, TableCell, type TableCellProps, TableFooter, TableHead, TableHeader, type TableProps, TableRow, type TableRowProps, } from "./Table.js";

package/dist/molecules/index.js

@@ -29,6 +29,7 @@ export { InputOTP } from "./InputOTP.js";
 export { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemSeparator, ItemTitle, itemVariants, } from "./Item.js";
 export { Message } from "./Message.js";
 export { Pagination, pageWindow, } from "./Pagination.js";
+export { Picture } from "./Picture.js";
 export { RadioGroup, } from "./RadioGroup.js";
 export { Resizable } from "./Resizable.js";
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "./Table.js";

package/dist/organisms/Dialog.d.ts

@@ -16,7 +16,6 @@
  * required rather than optional — `srOnlyTitle` is there for designs that show
  * no visible heading.
  */
-import type { Child } from "../lib/children.js";
 import { type Slot } from "../lib/children.js";
 import { type Reactive } from "../lib/props.js";
 export declare const dialogBackdropClasses = "fixed inset-0 z-50 bg-black/50";
@@ -24,9 +23,17 @@ export declare const dialogPanelClasses = "bg-background fixed top-1/2 left-1/2
 export interface DialogProps {
     /** Rendered inside the trigger button. Omit to drive `open` yourself. */
     trigger?: Slot;
-    /** Announced on open. Hide it visually with `srOnlyTitle`. */
-    title: Child;
-    description?: Child;
+    /**
+     * Announced on open. Hide it visually with `srOnlyTitle`.
+     *
+     * A `Slot`, so it may be an accessor: one Dialog driven between "create" and
+     * "edit" needs a title that follows. It already behaved that way — the
+     * renderer binds whatever it is given — while the type said `Child` and
+     * refused the function, so the working call did not compile and the type
+     * disagreed with `children` beside it for no reason.
+     */
+    title: Slot;
+    description?: Slot;
     children?: Slot;
     /** Actions, laid out bottom-right. */
     footer?: Slot;

package/dist/organisms/Dialog.js

@@ -59,14 +59,14 @@ export const Dialog = component((props) => {
 							id="${titleId}"
 							data-slot="dialog-title"
 							class="${cn("text-lg leading-none font-semibold", props.srOnlyTitle === true ? "sr-only" : "")}"
-						>${props.title}</h2>
+						>${slot(props.title)}</h2>
 						${props.description === undefined
             ? null
             : html `<p
 									id="${descriptionId}"
 									data-slot="dialog-description"
 									class="text-muted-foreground text-sm"
-								>${props.description}</p>`}
+								>${slot(props.description)}</p>`}
 					</div>
 					${slot(props.children)}
 					${props.footer === undefined