@page-speed/lightbox 0.0.1

package/dist/renderers/ComponentRenderer.d.ts

@@ -0,0 +1,9 @@
+import { LightboxItem } from "../types";
+interface ComponentRendererProps {
+    item: LightboxItem;
+}
+/**
+ * Renders a custom React component provided on the LightboxItem.
+ */
+export declare function ComponentRenderer({ item }: ComponentRendererProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/renderers/ImageRenderer.d.ts

@@ -0,0 +1,14 @@
+import { LightboxItem, LightboxLayoutType } from "../types";
+interface ImageRendererProps {
+    item: LightboxItem;
+    layout: LightboxLayoutType;
+}
+/**
+ * Basic image renderer.
+ *
+ * This intentionally uses a plain <img> tag so consuming apps can decide
+ * whether to wrap or replace it with @opensite/img when used inside the
+ * Semantic Site Builder.
+ */
+export declare function ImageRenderer({ item }: ImageRendererProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/renderers/PDFRenderer.d.ts

@@ -0,0 +1,11 @@
+import { LightboxItem, LightboxLayoutType } from "../types";
+interface PDFRendererProps {
+    item: LightboxItem;
+    layout: LightboxLayoutType;
+}
+/**
+ * Thin wrapper around @page-speed/pdf-viewer, loaded lazily so that the
+ * heavy PDF runtime is only fetched when a PDF item is actually viewed.
+ */
+export declare function PDFRenderer({ item }: PDFRendererProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/renderers/VideoRenderer.d.ts

@@ -0,0 +1,13 @@
+import { LightboxItem, LightboxLayoutType } from "../types";
+interface VideoRendererProps {
+    item: LightboxItem;
+    layout: LightboxLayoutType;
+}
+/**
+ * Basic HTML5 video renderer.
+ *
+ * For production Semantic Site Builder usage, this can be swapped for
+ * @opensite/video via composition without changing the Lightbox API.
+ */
+export declare function VideoRenderer({ item }: VideoRendererProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/renderers/index.css

@@ -0,0 +1,99 @@
+/* src/styles/Lightbox.module.css */
+.Lightbox_lightboxPortal2 {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.Lightbox_overlay2 {
+  position: fixed;
+  inset: 0;
+  background: var(--lightbox-overlay, rgba(0, 0, 0, 0.85));
+}
+.Lightbox_horizontalLayoutRoot2 {
+  position: relative;
+  max-width: var(--lightbox-max-width, 90vw);
+  width: 100%;
+  padding: var(--lightbox-padding, 24px);
+  box-sizing: border-box;
+}
+.Lightbox_horizontalLayoutContainer2 {
+  position: relative;
+  background: var(--lightbox-modal-bg, #111);
+  color: var(--lightbox-text, #fff);
+  border-radius: var(--lightbox-radius, 12px);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.Lightbox_mainContent2 {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--lightbox-content-bg, #000);
+}
+.Lightbox_toolbar2 {
+  border-top: 1px solid var(--lightbox-border, rgba(255, 255, 255, 0.1));
+}
+.Lightbox_media2 {
+  max-width: 100%;
+  max-height: 80vh;
+  object-fit: contain;
+}
+.Lightbox_chrome2 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  background: var(--lightbox-toolbar, rgba(0, 0, 0, 0.5));
+}
+.Lightbox_chromeSection2 {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.Lightbox_navButton2,
+.Lightbox_closeButton2 {
+  border: none;
+  border-radius: 999px;
+  padding: 6px 10px;
+  background: rgba(255, 255, 255, 0.08);
+  color: inherit;
+  cursor: pointer;
+}
+.Lightbox_navButton2:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.Lightbox_counter2 {
+  font-size: 12px;
+  opacity: 0.85;
+}
+.Lightbox_captionContainer2 {
+  display: flex;
+  flex-direction: column;
+}
+.Lightbox_captionTitle2 {
+  font-size: 14px;
+  font-weight: 600;
+}
+.Lightbox_captionText2 {
+  font-size: 12px;
+  opacity: 0.85;
+}
+.Lightbox_pdfContainer2 {
+  width: 100%;
+  height: 80vh;
+  background: #111;
+}
+.Lightbox_pdfFallback2 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--lightbox-text-muted, rgba(255, 255, 255, 0.7));
+}

package/dist/renderers/index.d.ts

@@ -0,0 +1,4 @@
+export { ImageRenderer } from "./ImageRenderer";
+export { VideoRenderer } from "./VideoRenderer";
+export { PDFRenderer } from "./PDFRenderer";
+export { ComponentRenderer } from "./ComponentRenderer";