@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.
@@ -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;CACpB;AAED,wBAAgB,eAAe,CAAC,EAC9B,SAAoB,EACpB,OAAY,EACZ,IAAY,EACZ,MAAU,EACV,SAAc,GACf,EAAE,oBAAoB,qBAuDtB"}
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 = 'to-top', opacity = 60, size = '50%', zIndex = 5, className = '', }) {
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":"AAEA,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAMf,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,oBAAoB,CAAC,EAAE,uBAAuB,CAAC;KAChD;CACF;AAED,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,cAAc;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,UAAU,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AAED,KAAK,aAAa,GAAG,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;AAErD;;;;;GAKG;AACH,cAAM,uBAAuB;IAC3B,OAAO,CAAC,cAAc,CAAiC;IACvD,OAAO,CAAC,YAAY,CAMlB;IACF,OAAO,CAAC,WAAW,CAA+B;IAClD,OAAO,CAAC,UAAU,CAAgB;IAClC,OAAO,CAAC,kBAAkB,CAAe;IAEzC;;OAEG;IACH,UAAU,CAAC,MAAM,EAAE,UAAU,EAAE,EAAE,OAAO,CAAC,EAAE;QACzC,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;KAC7B,GAAG,IAAI;IAgCR;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAYxB;;OAEG;IACH,OAAO,CAAC,eAAe;IAQvB,IAAI,IAAI,IAAI;IAgBZ,IAAI,IAAI,IAAI;IAgBZ,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAqBzB,KAAK,IAAI,IAAI;IAMb,MAAM,IAAI,IAAI;IAMd,MAAM,IAAI,IAAI;IASd,QAAQ,IAAI,cAAc;IAI1B,aAAa,CAAC,QAAQ,EAAE,aAAa,GAAG,MAAM,IAAI;IAMlD,OAAO,CAAC,eAAe;IAIvB;;OAEG;IACH,OAAO,IAAI,IAAI;CAIhB;AAqBD,MAAM,WAAW,cAAc;IAC7B,iCAAiC;IACjC,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACvC,+CAA+C;IAC/C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qGAAqG;IACrG,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,mCAAmC;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,UAAiB,EACjB,WAAkB,EAClB,UAAmB,EACnB,kBAAwB,EACxB,QAAe,EACf,UAAiB,EACjB,SAAgB,EAChB,SAAmB,EACnB,QAAQ,EACR,SAAc,EACd,cAAmB,GACpB,EAAE,cAAc,qBAgMhB;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,IAAI,qBAAqB,CAMzD;AAGD,eAAO,MAAM,YAAY,0BAAoB,CAAC"}
@@ -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={true}\n showArrows={true}\n className=\"w-full h-full\"\n >\n {/* Children are the route-specific overlays */}\n {children}\n </Slideshow>\n );\n}\n";
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={true}\n showArrows={true}\n className=\"w-full h-full\"\n >\n <TileOverlay />\n </Slideshow>\n );\n}\n";
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={true}\n showArrows={true}\n className=\"w-full h-full\"\n >\n <PageOverlay />\n </Slideshow>\n );\n}\n";
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,sqBAuBnC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,8gDAwCxC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,49GA4FxC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,q9DA0DxC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,+8HA+GxC,CAAC"}
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={true}
25
- showArrows={true}
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={true}
243
- showArrows={true}
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={true}
363
- showArrows={true}
362
+ showDots={false}
363
+ showArrows={false}
364
364
  className="w-full h-full"
365
365
  >
366
366
  <PageOverlay />
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thewhateverapp/tile-sdk",
3
- "version": "0.13.6",
3
+ "version": "0.13.8",
4
4
  "description": "SDK for building interactive tiles on The Whatever App platform",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",