{"version":3,"sources":["../../src/components/MountImage.tsx"],"sourcesContent":["import type { ImgHTMLAttributes, ReactNode } from 'react';\nimport { useObjectUrl } from '../hooks';\nimport type { SandboxMount } from '../mounts';\n\n/** Props for {@link MountImage}. Extends the native `<img>` attributes (minus `src`,\n *  which the component derives from the mounted file). */\nexport interface MountImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'> {\n  /** The mount whose file to display (`null`/`undefined` renders `loading`). */\n  mount: SandboxMount | null | undefined;\n  /** Mount-relative path to the image file (`null`/`undefined` renders `loading`). */\n  relPath: string | null | undefined;\n  /** Override the MIME type inferred from the extension (rarely needed). */\n  type?: string;\n  /** Rendered while the bytes load. Defaults to nothing. (Named `placeholder`, not\n   *  `loading`, so the native `<img loading=\"lazy\">` attribute still passes through.) */\n  placeholder?: ReactNode;\n  /** Rendered when the read fails or the file is missing. Defaults to nothing. */\n  fallback?: ReactNode;\n}\n\n/**\n * Display an image file from a mount. Reads the bytes off the sandbox ZenFS, turns\n * them into an object URL, and renders an `<img>` — revoking the URL for you on\n * unmount / prop change (via {@link useObjectUrl}). This is the drop-in for the\n * pattern apps used to hand-roll: read bytes → `Blob` → `createObjectURL` → revoke.\n *\n * Any extra `<img>` attribute (`className`, `style`, `onClick`, `width`, …) passes\n * straight through. Provide `loading` / `fallback` for the pending and error states.\n *\n * ```tsx\n * <MountImage\n *   mount={mount}\n *   relPath=\"photos/cat.png\"\n *   alt=\"cat\"\n *   placeholder={<Spinner />}\n *   fallback={<span>missing</span>}\n * />\n * ```\n */\nexport function MountImage({ mount, relPath, type, placeholder, fallback, alt = '', ...imgProps }: MountImageProps) {\n  const { url, loading, error } = useObjectUrl(mount, relPath, type ? { type } : undefined);\n  if (loading) return <>{placeholder ?? null}</>;\n  if (error || !url) return <>{fallback ?? null}</>;\n  return <img src={url} alt={alt} {...imgProps} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyCsB;AAxCtB,mBAA6B;AAsCtB,SAAS,WAAW,EAAE,OAAO,SAAS,MAAM,aAAa,UAAU,MAAM,IAAI,GAAG,SAAS,GAAoB;AAClH,QAAM,EAAE,KAAK,SAAS,MAAM,QAAI,2BAAa,OAAO,SAAS,OAAO,EAAE,KAAK,IAAI,MAAS;AACxF,MAAI,QAAS,QAAO,2EAAG,yBAAe,MAAK;AAC3C,MAAI,SAAS,CAAC,IAAK,QAAO,2EAAG,sBAAY,MAAK;AAC9C,SAAO,4CAAC,SAAI,KAAK,KAAK,KAAW,GAAG,UAAU;AAChD;","names":[]}