{"$schema":"https:\/\/ui.particle.academy\/schema\/registry-item.json","name":"image-element","type":"registry:ui","title":"ImageElement","description":"Slide image element renderer.","package":"fancy-slides","dependencies":[],"registryDependencies":["types"],"files":[{"path":"components\/fancy\/image-element\/ImageElement.tsx","content":"import type { CSSProperties } from \"react\";\r\nimport type { ImageElement } from \"..\/..\/..\/types\";\r\n\r\nexport interface ImageElementRendererProps {\r\n    element: ImageElement;\r\n}\r\n\r\n\/**\r\n * Renders an image element. When `element.crop` is set (a window in\r\n * image-relative 0..1 coords `{x,y,w,h}`), the image is shown cropped to that\r\n * window: an `overflow:hidden` box clips an inner `<img>` that's been scaled up\r\n * by `1\/w` \u00d7 `1\/h` and offset so the crop window exactly fills the box. Without\r\n * a crop it's the plain `object-fit` image. The same renderer feeds both the\r\n * editor canvas and the viewer, so a crop is visible everywhere.\r\n *\/\r\nexport function ImageElementRenderer({ element }: ImageElementRendererProps) {\r\n    const crop = element.crop;\r\n    const fit = element.fit ?? \"contain\";\r\n\r\n    if (crop && crop.w > 0 && crop.h > 0) {\r\n        \/\/ The inner image is scaled so the crop window (fraction w\u00d7h of the\r\n        \/\/ image) fills 100% of the box; then translated so the window's\r\n        \/\/ top-left aligns with the box's top-left.\r\n        const inner: CSSProperties = {\r\n            position: \"absolute\",\r\n            left: 0,\r\n            top: 0,\r\n            width: `${(1 \/ crop.w) * 100}%`,\r\n            height: `${(1 \/ crop.h) * 100}%`,\r\n            transform: `translate(${(-crop.x \/ crop.w) * 100}%, ${(-crop.y \/ crop.h) * 100}%)`,\r\n            transformOrigin: \"top left\",\r\n            objectFit: fit,\r\n            display: \"block\",\r\n        };\r\n        return (\r\n            <div style={{ position: \"relative\", width: \"100%\", height: \"100%\", overflow: \"hidden\" }}>\r\n                <img src={element.src} alt={element.alt ?? \"\"} style={inner} draggable={false} \/>\r\n            <\/div>\r\n        );\r\n    }\r\n\r\n    return (\r\n        <img\r\n            src={element.src}\r\n            alt={element.alt ?? \"\"}\r\n            style={{\r\n                width: \"100%\",\r\n                height: \"100%\",\r\n                objectFit: fit,\r\n                display: \"block\",\r\n            }}\r\n            draggable={false}\r\n        \/>\r\n    );\r\n}\r\n","type":"registry:ui","target":"components\/fancy\/image-element\/ImageElement.tsx"},{"path":"components\/fancy\/image-element\/index.ts","content":"export { ImageElementRenderer } from \".\/ImageElement\";\r\nexport type { ImageElementRendererProps } from \".\/ImageElement\";\r\n","type":"registry:ui","target":"components\/fancy\/image-element\/index.ts"}]}