27:T8710,
import card from "@/public/lightbox/card.jpg"
import field from "@/public/lightbox/field.jpg"
import lake from "@/public/lightbox/lake.jpg"
import peaks from "@/public/lightbox/peaks.jpg"
import prose from "@/public/lightbox/prose.jpg"
import river from "@/public/lightbox/river.jpg"
import shore from "@/public/lightbox/shore.jpg"
import small from "@/public/lightbox/small.jpg"
import square from "@/public/lightbox/square.jpg"
import tall from "@/public/lightbox/tall.jpg"
import wide from "@/public/lightbox/wide.jpg"

// The same Picsum photographs, prepared locally: no redirect or remote origin
// on the critical path. Next builds the blur and responsive candidates.
const PHOTOS: Record<number, StaticImage> = {
  1015: river,
  1024: peaks,
  1016: shore,
  1018: wide,
  1020: square,
  1035: field,
  1036: tall,
  1039: lake,
  1043: card,
  1044: prose,
}
const picsum = (id: number): Source => {
  const photo = PHOTOS[id]
  if (!photo) throw new Error(`Missing prepared photo ${id}`)
  return {
    src: photo.src,
    full: photo.src,
    srcset: imageRenditions(photo.src, nextImageLoader, { sizes: "100vw" })
      ?.srcSet,
    width: photo.width,
    height: photo.height,
    blur: `url(${JSON.stringify(photo.blurDataURL)})`,
  }
}
const preview = (source: Source) =>
  Object.values(PHOTOS).find((photo) => photo.src === source.src) ?? source.src

const GRID: Entry[] = [
  {
    id: "river",
    media: {
      kind: "image",
      source: picsum(1015),
      alt: "a river through a canyon",
    },
  },
  {
    id: "peaks",
    media: {
      kind: "image",
      source: picsum(1024),
      alt: "peaks, portrait",
    },
  },
  {
    id: "shore",
    media: {
      kind: "image",
      source: picsum(1016),
      alt: "a shoreline",
    },
  },
  {
    id: "wide",
    media: {
      kind: "image",
      source: picsum(1018),
      alt: "a wide valley",
    },
  },
  {
    id: "square",
    media: {
      kind: "image",
      source: picsum(1020),
      alt: "a bear, square",
    },
  },
  {
    id: "field",
    media: { kind: "image", source: picsum(1035), alt: "a field" },
  },
  {
    id: "tall",
    media: {
      kind: "image",
      source: picsum(1036),
      alt: "a tall view",
    },
  },
  {
    id: "lake",
    media: { kind: "image", source: picsum(1039), alt: "a lake" },
  },
]


<div className="flex flex-wrap gap-2">
  {GRID.map((e) => {
    const { source, alt } = e.media as { source: Source; alt: string }
    const aspect = source.width / source.height
    return (
      <div
        key={e.id}
        style={{ flex: `${aspect} 1 ${aspect * 160}px` }}
      >
        {/* The trigger carries the corner: it is the source rect the
            image flies from, and the focus ring follows it. */}
        <LightboxTrigger
          entry={e}
          render={
            <a
              href={source.full}
              className="block overflow-hidden rounded-lg"
            />
          }
        >
          <Image
            src={preview(source)}
            alt={alt}
            width={source.width}
            height={source.height}
            sizes="(max-width: 640px) 50vw, 33vw"
            className="w-full"
            style={{ aspectRatio: aspect }}
            loading="lazy"
          />
        </LightboxTrigger>
      </div>
    )
  })}
  <div className="grow-[10]" />
</div>
26:["$","div",null,{"className":"ag-code-scroll ag-edge-fade-xy","dangerouslySetInnerHTML":{"__html":"$27"}}]