4c:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:Te3b,import { useState } from "react" import { ImageOffIcon } from "lucide-react" import { cn } from "@/lib/utils" import { Icon } from "./icon" import { imageVariants } from "./image-variants" import type { ImageProps } from "./image.types" /** * An image that holds its space, degrades deliberately, and serves an asset * matched to the screen. * * The box is reserved by the wrapper, from `width`/`height` or `aspectRatio`, * before the image exists. Letting the `img` size itself is what produces the * classic reflow: the page lays out at zero height, then jumps when the bytes * land — and jumps again for every image below it. */ function Image({ alt, aspectRatio, className, crossOrigin, decorative, decoding, densities, fallback, fetchPriority, height, loading, onError, onLoad, referrerPolicy, shape, sizes, src, style, width, ...props }: ImageProps) { const [failed, setFailed] = useState(false) /* * A new source deserves a fresh attempt, or one broken image poisons the * slot for every image that later occupies it. Adjusting during render * rather than in an effect: an effect would paint one frame of the previous * image's failure state against the new source. */ const [attempted, setAttempted] = useState(src) if (attempted !== src) { setAttempted(src) setFailed(false) } const srcSet = densities ? Object.entries(densities) .map(([ratio, url]) => `${url} ${ratio}x`) .join(", ") : undefined const showFallback = !src || failed /* * The remaining props land on the *wrapper*, not on the `img`. * * The wrapper is the thing that exists in every state; the `img` is not * there at all while the fallback is showing. Putting an `id`, a * `data-testid`, or an `aria-describedby` on the image would make it come * and go with the bytes — so only genuinely image-loading attributes are * destructured above and forwarded inward. */ return ( {showFallback ? ( fallback === false ? null : ( {fallback ?? ( )} ) ) : ( {decorative

{ setFailed(true) onError?.(event) }} /> )} ) } export { Image, imageVariants } export type { ImageProps } 4f:T636,import type * as React from "react" /** The shape steps an image can be masked to. */ export type ImageShape = | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" type Base = Omit, "alt" | "srcSet"> & { /** * Additional sources by device pixel ratio — `{ 2: "…@2x.png" }`. Emitted as * `srcset`, so the browser picks by the viewer's actual screen rather than by * anything this component would have to guess. */ densities?: Partial> /** * Holds the box before the image arrives. Either give both `width` and * `height`, or an `aspectRatio` that scales against the parent's width. */ aspectRatio?: React.CSSProperties["aspectRatio"] /** Masks the image, using the library's corner steps. */ shape?: ImageShape /** * Drawn when `src` is missing or fails to load. Defaults to a placeholder * surface with an icon; pass your own node, or `false` for an empty box. */ fallback?: React.ReactNode | false } /** * The alt text is required, and deliberately so — an image with no `alt` at all * is announced by its file name, which is the worst of the three outcomes. */ type Meaningful = Base & { alt: string; decorative?: false } /** * A decorative image says nothing a screen reader needs. Marking it is not the * same as forgetting to: this sets `alt=""` and hides it, which is what tells * assistive technology to skip it rather than to guess. */ type Decorative = Base & { decorative: true; alt?: never } export type ImageProps = Meaningful | Decorative 4b:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","class-variance-authority@^0.7.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority@^0.7.1"}]]}]}],["$","li","lucide-react@^1.33.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react@^1.33.0"}]]}]}]]}],["$","$L4c",null,{"namespace":"@materialcn","registryDependencies":["https://guillermo-rebolledo.github.io/materialcn/r/icon.json","https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json","https://guillermo-rebolledo.github.io/materialcn/r/utils.json"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"src/components/ui/image.tsx","content":"$4e","type":"registry:ui"},{"path":"src/components/ui/image-variants.ts","content":"/**\n * Variant definitions live beside the component rather than inside it — see\n * badge-variants.ts for why (React Fast Refresh boundaries).\n */\n\nimport { cva } from \"class-variance-authority\"\n\n/**\n * The mask lives on a wrapper rather than on the `img` itself, so the corner\n * step applies to the fallback too. An image whose placeholder is square and\n * whose photograph is rounded changes shape at the moment it loads, which is\n * the same jump the reserved box exists to prevent.\n */\nexport const imageVariants = cva(\n \"relative block overflow-hidden bg-m3-surface-container-highest\",\n {\n variants: {\n shape: {\n none: \"rounded-m3-none\",\n xs: \"rounded-m3-xs\",\n sm: \"rounded-m3-sm\",\n md: \"rounded-m3-md\",\n lg: \"rounded-m3-lg\",\n xl: \"rounded-m3-xl\",\n \"2xl\": \"rounded-m3-2xl\",\n full: \"rounded-m3-full\",\n },\n },\n defaultVariants: {\n shape: \"none\",\n },\n }\n)\n","type":"registry:ui"},{"path":"src/components/ui/image.types.ts","content":"$4f","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]