@thewhateverapp/tile-sdk 0.13.6 → 0.13.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/react/overlay/OverlaySlot.d.ts +5 -1
- package/dist/react/overlay/OverlaySlot.d.ts.map +1 -1
- package/dist/react/overlay/OverlaySlot.js +7 -2
- package/dist/react/overlay/Slideshow.d.ts.map +1 -1
- package/dist/react/overlay/Slideshow.js +1 -2
- package/dist/templates/slideshow/layout.tsx.template.d.ts +3 -3
- package/dist/templates/slideshow/layout.tsx.template.d.ts.map +1 -1
- package/dist/templates/slideshow/layout.tsx.template.js +6 -6
- package/package.json +1 -1
|
@@ -51,6 +51,8 @@ export declare function FullOverlay({ children, className, background, zIndex, o
|
|
|
51
51
|
* Commonly used for bottom captions/controls on videos and images.
|
|
52
52
|
*/
|
|
53
53
|
export interface GradientOverlayProps {
|
|
54
|
+
/** Position shorthand: 'top' or 'bottom' (maps to direction) */
|
|
55
|
+
position?: 'top' | 'bottom';
|
|
54
56
|
/** Direction of gradient (default: 'to-top') */
|
|
55
57
|
direction?: 'to-top' | 'to-bottom' | 'to-left' | 'to-right';
|
|
56
58
|
/** Gradient start opacity 0-100 (default: 60) */
|
|
@@ -60,6 +62,8 @@ export interface GradientOverlayProps {
|
|
|
60
62
|
/** Z-index for stacking (default: 5) */
|
|
61
63
|
zIndex?: number;
|
|
62
64
|
className?: string;
|
|
65
|
+
/** Children rendered on top of the gradient */
|
|
66
|
+
children?: ReactNode;
|
|
63
67
|
}
|
|
64
|
-
export declare function GradientOverlay({ direction, opacity, size, zIndex, className, }: GradientOverlayProps): React.JSX.Element;
|
|
68
|
+
export declare function GradientOverlay({ position, direction: directionProp, opacity, size, zIndex, className, children, }: GradientOverlayProps): React.JSX.Element;
|
|
65
69
|
//# sourceMappingURL=OverlaySlot.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverlaySlot.d.ts","sourceRoot":"","sources":["../../../src/react/overlay/OverlaySlot.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9C,MAAM,MAAM,YAAY,GACpB,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,QAAQ,GACR,cAAc,GACd,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAEnB,MAAM,WAAW,gBAAgB;IAC/B,2BAA2B;IAC3B,QAAQ,EAAE,YAAY,CAAC;IACvB,qCAAqC;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,sDAAsD;IACtD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAgCD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,QAAQ,EACR,SAAc,EACd,OAAY,EACZ,WAAkB,EAClB,MAAW,GACZ,EAAE,gBAAgB,qBA2ClB;AAED;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAc,EACd,UAA0B,EAC1B,MAAW,EACX,OAAO,GACR,EAAE,gBAAgB,qBAkBlB;AAED;;;GAGG;AACH,MAAM,WAAW,oBAAoB;IACnC,gDAAgD;IAChD,SAAS,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"OverlaySlot.d.ts","sourceRoot":"","sources":["../../../src/react/overlay/OverlaySlot.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9C,MAAM,MAAM,YAAY,GACpB,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,QAAQ,GACR,cAAc,GACd,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAEnB,MAAM,WAAW,gBAAgB;IAC/B,2BAA2B;IAC3B,QAAQ,EAAE,YAAY,CAAC;IACvB,qCAAqC;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,sDAAsD;IACtD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAgCD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,QAAQ,EACR,SAAc,EACd,OAAY,EACZ,WAAkB,EAClB,MAAW,GACZ,EAAE,gBAAgB,qBA2ClB;AAED;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAc,EACd,UAA0B,EAC1B,MAAW,EACX,OAAO,GACR,EAAE,gBAAgB,qBAkBlB;AAED;;;GAGG;AACH,MAAM,WAAW,oBAAoB;IACnC,gEAAgE;IAChE,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B,gDAAgD;IAChD,SAAS,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EAAE,aAAa,EACxB,OAAY,EACZ,IAAY,EACZ,MAAU,EACV,SAAc,EACd,QAAQ,GACT,EAAE,oBAAoB,qBAmEtB"}
|
|
@@ -88,7 +88,9 @@ export function FullOverlay({ children, className = '', background = 'transparen
|
|
|
88
88
|
zIndex,
|
|
89
89
|
}, onClick: onClick }, children));
|
|
90
90
|
}
|
|
91
|
-
export function GradientOverlay({ direction
|
|
91
|
+
export function GradientOverlay({ position, direction: directionProp, opacity = 60, size = '50%', zIndex = 5, className = '', children, }) {
|
|
92
|
+
// Map position shorthand to direction
|
|
93
|
+
const direction = directionProp ?? (position === 'top' ? 'to-bottom' : 'to-top');
|
|
92
94
|
// Get positioning styles based on direction
|
|
93
95
|
const getDirectionStyles = () => {
|
|
94
96
|
switch (direction) {
|
|
@@ -130,9 +132,12 @@ export function GradientOverlay({ direction = 'to-top', opacity = 60, size = '50
|
|
|
130
132
|
return (React.createElement("div", { className: className, style: {
|
|
131
133
|
position: 'absolute',
|
|
132
134
|
pointerEvents: 'none',
|
|
135
|
+
display: 'flex',
|
|
136
|
+
flexDirection: 'column',
|
|
137
|
+
justifyContent: direction === 'to-top' ? 'flex-end' : 'flex-start',
|
|
133
138
|
...getDirectionStyles(),
|
|
134
139
|
...sizeStyle,
|
|
135
140
|
opacity: opacity / 100,
|
|
136
141
|
zIndex,
|
|
137
|
-
} }));
|
|
142
|
+
} }, children && (React.createElement("div", { style: { pointerEvents: 'auto' } }, children))));
|
|
138
143
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slideshow.d.ts","sourceRoot":"","sources":["../../../src/react/overlay/Slideshow.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Slideshow.d.ts","sourceRoot":"","sources":["../../../src/react/overlay/Slideshow.tsx"],"names":[],"mappings":"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"}
|
|
@@ -296,8 +296,7 @@ export function Slideshow({ images, intervalMs = 5000, autoAdvance = true, trans
|
|
|
296
296
|
showDots && state.totalSlides > 1 && (React.createElement("div", { className: "absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-1.5" }, images.map((_, index) => (React.createElement("button", { key: index, onClick: () => controls.goTo(index), disabled: state.isTransitioning, className: `w-2 h-2 rounded-full transition-colors ${index === state.currentIndex
|
|
297
297
|
? 'bg-white'
|
|
298
298
|
: 'bg-white/40 hover:bg-white/60'}`, "aria-label": `Go to slide ${index + 1}` }))))),
|
|
299
|
-
React.createElement("div", { className: "absolute inset-0 z-10 pointer-events-none" },
|
|
300
|
-
React.createElement("div", { className: "pointer-events-auto" }, children)))));
|
|
299
|
+
React.createElement("div", { className: "absolute inset-0 z-10 pointer-events-none" }, children))));
|
|
301
300
|
}
|
|
302
301
|
/**
|
|
303
302
|
* Hook to access slideshow state and controls from within Slideshow children.
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
* File path: src/app/(slideshow)/layout.tsx
|
|
8
8
|
* Routes: src/app/(slideshow)/tile/page.tsx, src/app/(slideshow)/page/page.tsx
|
|
9
9
|
*/
|
|
10
|
-
export declare const slideshowLayoutTemplate = "'use client';\n\nimport { Slideshow } from '@thewhateverapp/tile-sdk';\n\n// Slideshow configuration injected at generation time\nconst SLIDESHOW_CONFIG = __SLIDESHOW_CONFIG__;\n\nexport default function SlideshowLayout({ children }: { children: React.ReactNode }) {\n return (\n <Slideshow\n images={SLIDESHOW_CONFIG.images}\n autoAdvance={SLIDESHOW_CONFIG.autoAdvance}\n intervalMs={SLIDESHOW_CONFIG.intervalMs}\n transition={SLIDESHOW_CONFIG.transition}\n showDots={
|
|
10
|
+
export declare const slideshowLayoutTemplate = "'use client';\n\nimport { Slideshow } from '@thewhateverapp/tile-sdk';\n\n// Slideshow configuration injected at generation time\nconst SLIDESHOW_CONFIG = __SLIDESHOW_CONFIG__;\n\nexport default function SlideshowLayout({ children }: { children: React.ReactNode }) {\n return (\n <Slideshow\n images={SLIDESHOW_CONFIG.images}\n autoAdvance={SLIDESHOW_CONFIG.autoAdvance}\n intervalMs={SLIDESHOW_CONFIG.intervalMs}\n transition={SLIDESHOW_CONFIG.transition}\n showDots={false}\n showArrows={false}\n className=\"w-full h-full\"\n >\n {/* Children are the route-specific overlays */}\n {children}\n </Slideshow>\n );\n}\n";
|
|
11
11
|
/**
|
|
12
12
|
* Slideshow Tile Overlay Template
|
|
13
13
|
*
|
|
@@ -34,7 +34,7 @@ export declare const slideshowPageOverlayTemplate = "'use client';\n\nimport { u
|
|
|
34
34
|
*
|
|
35
35
|
* File path: src/app/_preview/tile.tsx
|
|
36
36
|
*/
|
|
37
|
-
export declare const slideshowPreviewTileTemplate = "'use client';\n\nimport { Slideshow, useSlideshowState, OverlaySlot, GradientOverlay, useTile } from '@thewhateverapp/tile-sdk';\n\n// Slideshow configuration injected at generation time\nconst SLIDESHOW_CONFIG = __SLIDESHOW_CONFIG__;\n\nfunction TileOverlay() {\n const tile = useTile();\n const { state } = useSlideshowState();\n\n return (\n <>\n {/* Expand button - opens full page view */}\n <OverlaySlot position=\"top-right\">\n <button\n onClick={() => tile.navigateToPage()}\n className=\"bg-black/40 backdrop-blur-sm p-2 rounded-full text-white hover:bg-black/60 transition-colors\"\n aria-label=\"Expand to full view\"\n >\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4\" />\n </svg>\n </button>\n </OverlaySlot>\n\n {/* Slide counter */}\n <OverlaySlot position=\"top-left\">\n <div className=\"bg-black/50 backdrop-blur-sm px-2 py-1 rounded text-xs text-white\">\n {state.currentIndex + 1} / {state.totalSlides}\n </div>\n </OverlaySlot>\n\n {/* Caption at bottom */}\n {state.images[state.currentIndex]?.caption && (\n <GradientOverlay position=\"bottom\" className=\"p-4\">\n <p className=\"text-white text-sm\">{state.images[state.currentIndex].caption}</p>\n </GradientOverlay>\n )}\n </>\n );\n}\n\nexport default function PreviewTile() {\n return (\n <Slideshow\n images={SLIDESHOW_CONFIG.images}\n autoAdvance={SLIDESHOW_CONFIG.autoAdvance}\n intervalMs={SLIDESHOW_CONFIG.intervalMs}\n transition={SLIDESHOW_CONFIG.transition}\n showDots={
|
|
37
|
+
export declare const slideshowPreviewTileTemplate = "'use client';\n\nimport { Slideshow, useSlideshowState, OverlaySlot, GradientOverlay, useTile } from '@thewhateverapp/tile-sdk';\n\n// Slideshow configuration injected at generation time\nconst SLIDESHOW_CONFIG = __SLIDESHOW_CONFIG__;\n\nfunction TileOverlay() {\n const tile = useTile();\n const { state } = useSlideshowState();\n\n return (\n <>\n {/* Expand button - opens full page view */}\n <OverlaySlot position=\"top-right\">\n <button\n onClick={() => tile.navigateToPage()}\n className=\"bg-black/40 backdrop-blur-sm p-2 rounded-full text-white hover:bg-black/60 transition-colors\"\n aria-label=\"Expand to full view\"\n >\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4\" />\n </svg>\n </button>\n </OverlaySlot>\n\n {/* Slide counter */}\n <OverlaySlot position=\"top-left\">\n <div className=\"bg-black/50 backdrop-blur-sm px-2 py-1 rounded text-xs text-white\">\n {state.currentIndex + 1} / {state.totalSlides}\n </div>\n </OverlaySlot>\n\n {/* Caption at bottom */}\n {state.images[state.currentIndex]?.caption && (\n <GradientOverlay position=\"bottom\" className=\"p-4\">\n <p className=\"text-white text-sm\">{state.images[state.currentIndex].caption}</p>\n </GradientOverlay>\n )}\n </>\n );\n}\n\nexport default function PreviewTile() {\n return (\n <Slideshow\n images={SLIDESHOW_CONFIG.images}\n autoAdvance={SLIDESHOW_CONFIG.autoAdvance}\n intervalMs={SLIDESHOW_CONFIG.intervalMs}\n transition={SLIDESHOW_CONFIG.transition}\n showDots={false}\n showArrows={false}\n className=\"w-full h-full\"\n >\n <TileOverlay />\n </Slideshow>\n );\n}\n";
|
|
38
38
|
/**
|
|
39
39
|
* Slideshow Preview Entry - Page
|
|
40
40
|
*
|
|
@@ -43,5 +43,5 @@ export declare const slideshowPreviewTileTemplate = "'use client';\n\nimport { S
|
|
|
43
43
|
*
|
|
44
44
|
* File path: src/app/_preview/page.tsx
|
|
45
45
|
*/
|
|
46
|
-
export declare const slideshowPreviewPageTemplate = "'use client';\n\nimport { Slideshow, useSlideshowState, OverlaySlot, GradientOverlay } from '@thewhateverapp/tile-sdk';\n\n// Slideshow configuration injected at generation time\nconst SLIDESHOW_CONFIG = __SLIDESHOW_CONFIG__;\n\nfunction PageOverlay() {\n const { state, controls } = useSlideshowState();\n\n return (\n <>\n {/* Slide counter */}\n <OverlaySlot position=\"top-right\">\n <div className=\"bg-black/50 backdrop-blur-sm px-3 py-1.5 rounded-full text-sm text-white\">\n {state.currentIndex + 1} / {state.totalSlides}\n </div>\n </OverlaySlot>\n\n {/* Navigation arrows (larger for full page) */}\n <OverlaySlot position=\"center-left\">\n <button\n onClick={controls.prev}\n className=\"bg-black/40 backdrop-blur-sm p-3 rounded-full text-white hover:bg-black/60 transition-colors\"\n aria-label=\"Previous slide\"\n >\n <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M15 19l-7-7 7-7\" />\n </svg>\n </button>\n </OverlaySlot>\n\n <OverlaySlot position=\"center-right\">\n <button\n onClick={controls.next}\n className=\"bg-black/40 backdrop-blur-sm p-3 rounded-full text-white hover:bg-black/60 transition-colors\"\n aria-label=\"Next slide\"\n >\n <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5l7 7-7 7\" />\n </svg>\n </button>\n </OverlaySlot>\n\n {/* Caption and controls at bottom */}\n <GradientOverlay position=\"bottom\" className=\"p-6\">\n <div className=\"space-y-3\">\n {/* Caption */}\n {state.images[state.currentIndex]?.caption && (\n <p className=\"text-white text-base\">{state.images[state.currentIndex].caption}</p>\n )}\n\n {/* Controls row */}\n <div className=\"flex items-center justify-between\">\n {/* Play/Pause autoplay */}\n <button\n onClick={controls.toggle}\n className=\"text-white hover:text-white/80 transition-colors flex items-center gap-2 text-sm\"\n >\n {state.isPaused ? (\n <>\n <svg className=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M8 5v14l11-7z\" />\n </svg>\n <span>Play slideshow</span>\n </>\n ) : (\n <>\n <svg className=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M6 4h4v16H6V4zm8 0h4v16h-4V4z\" />\n </svg>\n <span>Pause slideshow</span>\n </>\n )}\n </button>\n\n {/* Dot indicators */}\n <div className=\"flex gap-2\">\n {state.images.map((_, idx) => (\n <button\n key={idx}\n onClick={() => controls.goTo(idx)}\n className={`w-2 h-2 rounded-full transition-colors ${\n idx === state.currentIndex ? 'bg-white' : 'bg-white/40 hover:bg-white/60'\n }`}\n aria-label={`Go to slide ${idx + 1}`}\n />\n ))}\n </div>\n </div>\n </div>\n </GradientOverlay>\n </>\n );\n}\n\nexport default function PreviewPage() {\n return (\n <Slideshow\n images={SLIDESHOW_CONFIG.images}\n autoAdvance={SLIDESHOW_CONFIG.autoAdvance}\n intervalMs={SLIDESHOW_CONFIG.intervalMs}\n transition={SLIDESHOW_CONFIG.transition}\n showDots={
|
|
46
|
+
export declare const slideshowPreviewPageTemplate = "'use client';\n\nimport { Slideshow, useSlideshowState, OverlaySlot, GradientOverlay } from '@thewhateverapp/tile-sdk';\n\n// Slideshow configuration injected at generation time\nconst SLIDESHOW_CONFIG = __SLIDESHOW_CONFIG__;\n\nfunction PageOverlay() {\n const { state, controls } = useSlideshowState();\n\n return (\n <>\n {/* Slide counter */}\n <OverlaySlot position=\"top-right\">\n <div className=\"bg-black/50 backdrop-blur-sm px-3 py-1.5 rounded-full text-sm text-white\">\n {state.currentIndex + 1} / {state.totalSlides}\n </div>\n </OverlaySlot>\n\n {/* Navigation arrows (larger for full page) */}\n <OverlaySlot position=\"center-left\">\n <button\n onClick={controls.prev}\n className=\"bg-black/40 backdrop-blur-sm p-3 rounded-full text-white hover:bg-black/60 transition-colors\"\n aria-label=\"Previous slide\"\n >\n <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M15 19l-7-7 7-7\" />\n </svg>\n </button>\n </OverlaySlot>\n\n <OverlaySlot position=\"center-right\">\n <button\n onClick={controls.next}\n className=\"bg-black/40 backdrop-blur-sm p-3 rounded-full text-white hover:bg-black/60 transition-colors\"\n aria-label=\"Next slide\"\n >\n <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5l7 7-7 7\" />\n </svg>\n </button>\n </OverlaySlot>\n\n {/* Caption and controls at bottom */}\n <GradientOverlay position=\"bottom\" className=\"p-6\">\n <div className=\"space-y-3\">\n {/* Caption */}\n {state.images[state.currentIndex]?.caption && (\n <p className=\"text-white text-base\">{state.images[state.currentIndex].caption}</p>\n )}\n\n {/* Controls row */}\n <div className=\"flex items-center justify-between\">\n {/* Play/Pause autoplay */}\n <button\n onClick={controls.toggle}\n className=\"text-white hover:text-white/80 transition-colors flex items-center gap-2 text-sm\"\n >\n {state.isPaused ? (\n <>\n <svg className=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M8 5v14l11-7z\" />\n </svg>\n <span>Play slideshow</span>\n </>\n ) : (\n <>\n <svg className=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M6 4h4v16H6V4zm8 0h4v16h-4V4z\" />\n </svg>\n <span>Pause slideshow</span>\n </>\n )}\n </button>\n\n {/* Dot indicators */}\n <div className=\"flex gap-2\">\n {state.images.map((_, idx) => (\n <button\n key={idx}\n onClick={() => controls.goTo(idx)}\n className={`w-2 h-2 rounded-full transition-colors ${\n idx === state.currentIndex ? 'bg-white' : 'bg-white/40 hover:bg-white/60'\n }`}\n aria-label={`Go to slide ${idx + 1}`}\n />\n ))}\n </div>\n </div>\n </div>\n </GradientOverlay>\n </>\n );\n}\n\nexport default function PreviewPage() {\n return (\n <Slideshow\n images={SLIDESHOW_CONFIG.images}\n autoAdvance={SLIDESHOW_CONFIG.autoAdvance}\n intervalMs={SLIDESHOW_CONFIG.intervalMs}\n transition={SLIDESHOW_CONFIG.transition}\n showDots={false}\n showArrows={false}\n className=\"w-full h-full\"\n >\n <PageOverlay />\n </Slideshow>\n );\n}\n";
|
|
47
47
|
//# sourceMappingURL=layout.tsx.template.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout.tsx.template.d.ts","sourceRoot":"","sources":["../../../src/templates/slideshow/layout.tsx.template.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,eAAO,MAAM,uBAAuB,
|
|
1
|
+
{"version":3,"file":"layout.tsx.template.d.ts","sourceRoot":"","sources":["../../../src/templates/slideshow/layout.tsx.template.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,eAAO,MAAM,uBAAuB,wqBAuBnC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,8gDAwCxC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,49GA4FxC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,u9DA0DxC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,i9HA+GxC,CAAC"}
|
|
@@ -21,8 +21,8 @@ export default function SlideshowLayout({ children }: { children: React.ReactNod
|
|
|
21
21
|
autoAdvance={SLIDESHOW_CONFIG.autoAdvance}
|
|
22
22
|
intervalMs={SLIDESHOW_CONFIG.intervalMs}
|
|
23
23
|
transition={SLIDESHOW_CONFIG.transition}
|
|
24
|
-
showDots={
|
|
25
|
-
showArrows={
|
|
24
|
+
showDots={false}
|
|
25
|
+
showArrows={false}
|
|
26
26
|
className="w-full h-full"
|
|
27
27
|
>
|
|
28
28
|
{/* Children are the route-specific overlays */}
|
|
@@ -239,8 +239,8 @@ export default function PreviewTile() {
|
|
|
239
239
|
autoAdvance={SLIDESHOW_CONFIG.autoAdvance}
|
|
240
240
|
intervalMs={SLIDESHOW_CONFIG.intervalMs}
|
|
241
241
|
transition={SLIDESHOW_CONFIG.transition}
|
|
242
|
-
showDots={
|
|
243
|
-
showArrows={
|
|
242
|
+
showDots={false}
|
|
243
|
+
showArrows={false}
|
|
244
244
|
className="w-full h-full"
|
|
245
245
|
>
|
|
246
246
|
<TileOverlay />
|
|
@@ -359,8 +359,8 @@ export default function PreviewPage() {
|
|
|
359
359
|
autoAdvance={SLIDESHOW_CONFIG.autoAdvance}
|
|
360
360
|
intervalMs={SLIDESHOW_CONFIG.intervalMs}
|
|
361
361
|
transition={SLIDESHOW_CONFIG.transition}
|
|
362
|
-
showDots={
|
|
363
|
-
showArrows={
|
|
362
|
+
showDots={false}
|
|
363
|
+
showArrows={false}
|
|
364
364
|
className="w-full h-full"
|
|
365
365
|
>
|
|
366
366
|
<PageOverlay />
|