sunpeak 0.5.36 → 0.5.39

package/template/node_modules/.vite/deps/@openai_apps-sdk-ui_components_Button.js

@@ -2,11 +2,11 @@ import {
   Button,
   ButtonLink,
   CopyButton
-} from "./chunk-675LFNY2.js";
-import "./chunk-QPJAV452.js";
-import "./chunk-XB525PXG.js";
+} from "./chunk-EVJ3DVH5.js";
 import "./chunk-YOJ6QPGS.js";
 import "./chunk-BAG6OO6S.js";
+import "./chunk-XB525PXG.js";
+import "./chunk-QPJAV452.js";
 import "./chunk-EGRHWZRV.js";
 import "./chunk-CNYJBM5F.js";
 import "./chunk-PTVT3RFX.js";

package/template/node_modules/.vite/deps/@openai_apps-sdk-ui_components_SegmentedControl.js

@@ -1,7 +1,3 @@
-import {
-  dist_exports4 as dist_exports
-} from "./chunk-SGWD4VEU.js";
-import "./chunk-KFGKZMLK.js";
 import {
   useResizeObserver
 } from "./chunk-YOJ6QPGS.js";
@@ -9,6 +5,10 @@ import {
   handlePressableMouseEnter,
   waitForAnimationFrame
 } from "./chunk-BAG6OO6S.js";
+import {
+  dist_exports4 as dist_exports
+} from "./chunk-SGWD4VEU.js";
+import "./chunk-KFGKZMLK.js";
 import "./chunk-EGRHWZRV.js";
 import {
   clsx_default

package/template/node_modules/.vite/deps/@openai_apps-sdk-ui_components_Select.js

@@ -1,14 +1,23 @@
-import {
-  Input
-} from "./chunk-CQ3GYAYB.js";
 import {
   Button,
   LoadingIndicator,
   TransitionGroup
-} from "./chunk-675LFNY2.js";
+} from "./chunk-EVJ3DVH5.js";
 import {
-  o
-} from "./chunk-QPJAV452.js";
+  useTimeout
+} from "./chunk-YOJ6QPGS.js";
+import {
+  handlePressableMouseEnter,
+  preventDefaultHandler,
+  toCssVariables,
+  waitForAnimationFrame
+} from "./chunk-BAG6OO6S.js";
+import {
+  dist_exports,
+  dist_exports3 as dist_exports2,
+  dist_exports5 as dist_exports3
+} from "./chunk-SGWD4VEU.js";
+import "./chunk-KFGKZMLK.js";
 import {
   Check_default,
   ChevronDownVector_default,
@@ -18,20 +27,11 @@ import {
   X_default
 } from "./chunk-XB525PXG.js";
 import {
-  dist_exports,
-  dist_exports3 as dist_exports2,
-  dist_exports5 as dist_exports3
-} from "./chunk-SGWD4VEU.js";
-import "./chunk-KFGKZMLK.js";
-import {
-  useTimeout
-} from "./chunk-YOJ6QPGS.js";
+  Input
+} from "./chunk-CQ3GYAYB.js";
 import {
-  handlePressableMouseEnter,
-  preventDefaultHandler,
-  toCssVariables,
-  waitForAnimationFrame
-} from "./chunk-BAG6OO6S.js";
+  o
+} from "./chunk-QPJAV452.js";
 import "./chunk-EGRHWZRV.js";
 import {
   clsx_default

package/template/node_modules/.vite/deps/@openai_apps-sdk-ui_components_Textarea.js

@@ -1,9 +1,9 @@
-import {
-  o
-} from "./chunk-QPJAV452.js";
 import {
   toCssVariables
 } from "./chunk-BAG6OO6S.js";
+import {
+  o
+} from "./chunk-QPJAV452.js";
 import "./chunk-EGRHWZRV.js";
 import {
   clsx_default

package/template/node_modules/.vite/deps/_metadata.json

@@ -7,118 +7,115 @@
     "react": {
       "src": "../../../../node_modules/.pnpm/react@19.2.0/node_modules/react/index.js",
       "file": "react.js",
-      "fileHash": "e328b168",
+      "fileHash": "1fcc4295",
       "needsInterop": true
     },
     "react-dom": {
       "src": "../../../../node_modules/.pnpm/react-dom@19.2.0_react@19.2.0/node_modules/react-dom/index.js",
       "file": "react-dom.js",
-      "fileHash": "24da7214",
+      "fileHash": "a3591f16",
       "needsInterop": true
     },
     "react/jsx-dev-runtime": {
       "src": "../../../../node_modules/.pnpm/react@19.2.0/node_modules/react/jsx-dev-runtime.js",
       "file": "react_jsx-dev-runtime.js",
-      "fileHash": "a22ed365",
+      "fileHash": "94686c0a",
       "needsInterop": true
     },
     "react/jsx-runtime": {
       "src": "../../../../node_modules/.pnpm/react@19.2.0/node_modules/react/jsx-runtime.js",
       "file": "react_jsx-runtime.js",
-      "fileHash": "995b8d9a",
+      "fileHash": "1e5db247",
       "needsInterop": true
     },
     "@openai/apps-sdk-ui/components/Button": {
       "src": "../../../../node_modules/.pnpm/@openai+apps-sdk-ui@0.2.0_@types+react-dom@19.2.3_@types+react@19.2.7__@types+react@19._60630c8dcc43ec213b3e346c9e26579b/node_modules/@openai/apps-sdk-ui/dist/es/components/Button/index.js",
       "file": "@openai_apps-sdk-ui_components_Button.js",
-      "fileHash": "46265110",
+      "fileHash": "d6d133fa",
       "needsInterop": false
     },
     "@openai/apps-sdk-ui/components/Checkbox": {
       "src": "../../../../node_modules/.pnpm/@openai+apps-sdk-ui@0.2.0_@types+react-dom@19.2.3_@types+react@19.2.7__@types+react@19._60630c8dcc43ec213b3e346c9e26579b/node_modules/@openai/apps-sdk-ui/dist/es/components/Checkbox/index.js",
       "file": "@openai_apps-sdk-ui_components_Checkbox.js",
-      "fileHash": "df3f5c67",
+      "fileHash": "ce84b869",
       "needsInterop": false
     },
     "@openai/apps-sdk-ui/components/Icon": {
       "src": "../../../../node_modules/.pnpm/@openai+apps-sdk-ui@0.2.0_@types+react-dom@19.2.3_@types+react@19.2.7__@types+react@19._60630c8dcc43ec213b3e346c9e26579b/node_modules/@openai/apps-sdk-ui/dist/es/components/Icon/index.js",
       "file": "@openai_apps-sdk-ui_components_Icon.js",
-      "fileHash": "baa257c2",
+      "fileHash": "060967f2",
       "needsInterop": false
     },
     "@openai/apps-sdk-ui/components/Input": {
       "src": "../../../../node_modules/.pnpm/@openai+apps-sdk-ui@0.2.0_@types+react-dom@19.2.3_@types+react@19.2.7__@types+react@19._60630c8dcc43ec213b3e346c9e26579b/node_modules/@openai/apps-sdk-ui/dist/es/components/Input/index.js",
       "file": "@openai_apps-sdk-ui_components_Input.js",
-      "fileHash": "b09a0706",
+      "fileHash": "a6e2b3d5",
       "needsInterop": false
     },
     "@openai/apps-sdk-ui/components/SegmentedControl": {
       "src": "../../../../node_modules/.pnpm/@openai+apps-sdk-ui@0.2.0_@types+react-dom@19.2.3_@types+react@19.2.7__@types+react@19._60630c8dcc43ec213b3e346c9e26579b/node_modules/@openai/apps-sdk-ui/dist/es/components/SegmentedControl/index.js",
       "file": "@openai_apps-sdk-ui_components_SegmentedControl.js",
-      "fileHash": "30f3b4fa",
+      "fileHash": "a5b2ba7d",
       "needsInterop": false
     },
     "@openai/apps-sdk-ui/components/Select": {
       "src": "../../../../node_modules/.pnpm/@openai+apps-sdk-ui@0.2.0_@types+react-dom@19.2.3_@types+react@19.2.7__@types+react@19._60630c8dcc43ec213b3e346c9e26579b/node_modules/@openai/apps-sdk-ui/dist/es/components/Select/index.js",
       "file": "@openai_apps-sdk-ui_components_Select.js",
-      "fileHash": "c07720fa",
+      "fileHash": "681ae142",
       "needsInterop": false
     },
     "@openai/apps-sdk-ui/components/Textarea": {
       "src": "../../../../node_modules/.pnpm/@openai+apps-sdk-ui@0.2.0_@types+react-dom@19.2.3_@types+react@19.2.7__@types+react@19._60630c8dcc43ec213b3e346c9e26579b/node_modules/@openai/apps-sdk-ui/dist/es/components/Textarea/index.js",
       "file": "@openai_apps-sdk-ui_components_Textarea.js",
-      "fileHash": "4d8a8d87",
+      "fileHash": "8085e72e",
       "needsInterop": false
     },
     "@openai/apps-sdk-ui/theme": {
       "src": "../../../../node_modules/.pnpm/@openai+apps-sdk-ui@0.2.0_@types+react-dom@19.2.3_@types+react@19.2.7__@types+react@19._60630c8dcc43ec213b3e346c9e26579b/node_modules/@openai/apps-sdk-ui/dist/es/lib/theme.js",
       "file": "@openai_apps-sdk-ui_theme.js",
-      "fileHash": "9e5b445c",
+      "fileHash": "dcd36bbb",
       "needsInterop": false
     },
     "clsx": {
       "src": "../../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs",
       "file": "clsx.js",
-      "fileHash": "8c4d2ac1",
+      "fileHash": "a4d88c05",
       "needsInterop": false
     },
     "embla-carousel-react": {
       "src": "../../../../node_modules/.pnpm/embla-carousel-react@8.6.0_react@19.2.0/node_modules/embla-carousel-react/esm/embla-carousel-react.esm.js",
       "file": "embla-carousel-react.js",
-      "fileHash": "3b8004d6",
+      "fileHash": "1c3b430c",
       "needsInterop": false
     },
     "embla-carousel-wheel-gestures": {
       "src": "../../../../node_modules/.pnpm/embla-carousel-wheel-gestures@8.1.0_embla-carousel@8.6.0/node_modules/embla-carousel-wheel-gestures/dist/embla-carousel-wheel-gestures.esm.js",
       "file": "embla-carousel-wheel-gestures.js",
-      "fileHash": "8678cd8b",
+      "fileHash": "b4318164",
       "needsInterop": false
     },
     "react-dom/client": {
       "src": "../../../../node_modules/.pnpm/react-dom@19.2.0_react@19.2.0/node_modules/react-dom/client.js",
       "file": "react-dom_client.js",
-      "fileHash": "df32aaf4",
+      "fileHash": "e6bdfdfa",
       "needsInterop": true
     },
     "tailwind-merge": {
       "src": "../../../../node_modules/.pnpm/tailwind-merge@3.4.0/node_modules/tailwind-merge/dist/bundle-mjs.mjs",
       "file": "tailwind-merge.js",
-      "fileHash": "11ec8e32",
+      "fileHash": "4eb4287f",
       "needsInterop": false
     }
   },
   "chunks": {
-    "chunk-CQ3GYAYB": {
-      "file": "chunk-CQ3GYAYB.js"
-    },
-    "chunk-675LFNY2": {
-      "file": "chunk-675LFNY2.js"
+    "chunk-EVJ3DVH5": {
+      "file": "chunk-EVJ3DVH5.js"
     },
-    "chunk-QPJAV452": {
-      "file": "chunk-QPJAV452.js"
+    "chunk-YOJ6QPGS": {
+      "file": "chunk-YOJ6QPGS.js"
     },
-    "chunk-XB525PXG": {
-      "file": "chunk-XB525PXG.js"
+    "chunk-BAG6OO6S": {
+      "file": "chunk-BAG6OO6S.js"
     },
     "chunk-SGWD4VEU": {
       "file": "chunk-SGWD4VEU.js"
@@ -126,11 +123,14 @@
     "chunk-KFGKZMLK": {
       "file": "chunk-KFGKZMLK.js"
     },
-    "chunk-YOJ6QPGS": {
-      "file": "chunk-YOJ6QPGS.js"
+    "chunk-XB525PXG": {
+      "file": "chunk-XB525PXG.js"
     },
-    "chunk-BAG6OO6S": {
-      "file": "chunk-BAG6OO6S.js"
+    "chunk-CQ3GYAYB": {
+      "file": "chunk-CQ3GYAYB.js"
+    },
+    "chunk-QPJAV452": {
+      "file": "chunk-QPJAV452.js"
     },
     "chunk-EGRHWZRV": {
       "file": "chunk-EGRHWZRV.js"

package/template/node_modules/.vite/deps/{chunk-675LFNY2.js → chunk-EVJ3DVH5.js}

@@ -1,10 +1,3 @@
-import {
-  o
-} from "./chunk-QPJAV452.js";
-import {
-  Check_default,
-  Copy_default
-} from "./chunk-XB525PXG.js";
 import {
   useTimeout
 } from "./chunk-YOJ6QPGS.js";
@@ -19,6 +12,13 @@ import {
   toTransformProperty,
   waitForAnimationFrame
 } from "./chunk-BAG6OO6S.js";
+import {
+  Check_default,
+  Copy_default
+} from "./chunk-XB525PXG.js";
+import {
+  o
+} from "./chunk-QPJAV452.js";
 import {
   clsx_default
 } from "./chunk-CNYJBM5F.js";
@@ -625,4 +625,4 @@ export {
   ButtonLink,
   CopyButton
 };
-//# sourceMappingURL=chunk-675LFNY2.js.map
+//# sourceMappingURL=chunk-EVJ3DVH5.js.map

package/template/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json

@@ -1 +1 @@
-{"version":"4.0.13","results":[[":src/components/resources/carousel-resource.test.tsx",{"duration":288.1622299999999,"failed":false}],[":src/components/album/albums.test.tsx",{"duration":326.12392699999987,"failed":false}],[":src/components/album/fullscreen-viewer.test.tsx",{"duration":260.0158970000002,"failed":false}],[":src/components/carousel/carousel.test.tsx",{"duration":69.38757799999985,"failed":false}],[":src/components/resources/counter-resource.test.tsx",{"duration":335.9426239999998,"failed":false}],[":src/components/resources/albums-resource.test.tsx",{"duration":287.460425,"failed":false}],[":src/components/album/film-strip.test.tsx",{"duration":444.058082,"failed":false}],[":src/components/album/album-card.test.tsx",{"duration":340.6524770000001,"failed":false}],[":src/components/card/card.test.tsx",{"duration":59.76885399999992,"failed":false}]]}
+{"version":"4.0.13","results":[[":src/components/album/fullscreen-viewer.test.tsx",{"duration":258.46369799999957,"failed":false}],[":src/components/resources/carousel-resource.test.tsx",{"duration":245.01015499999994,"failed":false}],[":src/components/album/albums.test.tsx",{"duration":330.82841299999995,"failed":false}],[":src/components/carousel/carousel.test.tsx",{"duration":62.86271500000021,"failed":false}],[":src/components/resources/counter-resource.test.tsx",{"duration":310.1445560000002,"failed":false}],[":src/components/resources/albums-resource.test.tsx",{"duration":264.3613190000001,"failed":false}],[":src/components/album/film-strip.test.tsx",{"duration":469.90154299999995,"failed":false}],[":src/components/album/album-card.test.tsx",{"duration":360.1429190000001,"failed":false}],[":src/components/card/card.test.tsx",{"duration":55.29722700000002,"failed":false}]]}

package/template/src/components/album/fullscreen-viewer.tsx

@@ -14,41 +14,103 @@ export const FullscreenViewer = React.forwardRef<HTMLDivElement, FullscreenViewe
     const maxHeight = useMaxHeight();
     const safeArea = useSafeArea();
     const [selectedIndex, setSelectedIndex] = React.useState(0);
+    const [width, setWidth] = React.useState(0);
+    const containerRef = React.useRef<HTMLDivElement>(null);
 
     React.useEffect(() => {
       setSelectedIndex(0);
     }, [album?.id]);
 
+    // Measure component width to determine mobile vs desktop layout
+    React.useEffect(() => {
+      const element = containerRef.current;
+      if (!element) return;
+
+      const updateWidth = () => {
+        setWidth(element.getBoundingClientRect().width);
+      };
+
+      updateWidth();
+
+      const resizeObserver = new ResizeObserver(updateWidth);
+      resizeObserver.observe(element);
+
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }, []);
+
+    // Combine refs
+    React.useImperativeHandle(ref, () => containerRef.current!);
+
     const selectedPhoto = album?.photos?.[selectedIndex];
+    const isMobile = width > 0 && width < 768;
 
     return (
       <div
-        ref={ref}
+        ref={containerRef}
         className={cn('relative w-full h-full bg-surface', className)}
         style={{
           maxHeight: maxHeight ?? undefined,
           height: maxHeight ?? undefined,
+          ['--safe-top' as string]: `${safeArea?.insets.top ?? 0}px`,
+          ['--safe-bottom' as string]: `${safeArea?.insets.bottom ?? 0}px`,
+          ['--safe-left' as string]: `${safeArea?.insets.left ?? 0}px`,
+          ['--safe-right' as string]: `${safeArea?.insets.right ?? 0}px`,
         }}
       >
-        <div className="absolute inset-0 flex flex-row overflow-hidden">
-          {/* Film strip */}
-          <div
-            className="hidden md:block absolute pointer-events-none z-10 left-0 top-0 bottom-0 w-40"
-            style={{
-              paddingLeft: `${safeArea?.insets.left ?? 0}px`,
-            }}
-          >
-            <FilmStrip album={album} selectedIndex={selectedIndex} onSelect={setSelectedIndex} />
-          </div>
+        <div
+          className={cn(
+            'absolute inset-0 flex overflow-hidden',
+            isMobile ? 'flex-col' : 'flex-row'
+          )}
+        >
+          {/* Album header - mobile only */}
+          {isMobile && (
+            <div
+              className="z-10 border-b border-subtle bg-surface/95 backdrop-blur-sm"
+              style={{
+                paddingTop: `calc(0.75rem + var(--safe-top))`,
+                paddingBottom: '0.75rem',
+                paddingLeft: `calc(1rem + var(--safe-left))`,
+                paddingRight: `calc(1rem + var(--safe-right))`,
+              }}
+            >
+              <h2 className="text-base font-semibold text-primary">{album.title}</h2>
+              <p className="text-sm text-secondary">
+                {selectedIndex + 1} / {album.photos.length}
+              </p>
+            </div>
+          )}
+
+          {/* Film strip - desktop only */}
+          {!isMobile && (
+            <div
+              className="absolute pointer-events-none z-10 left-0 top-0 bottom-0 w-40"
+              style={{
+                paddingLeft: `var(--safe-left)`,
+              }}
+            >
+              <FilmStrip album={album} selectedIndex={selectedIndex} onSelect={setSelectedIndex} />
+            </div>
+          )}
 
           {/* Main photo */}
           <div
-            className="flex-1 min-w-0 px-40 py-10 relative flex items-center justify-center"
+            className="flex-1 min-w-0 relative flex items-center justify-center"
             style={{
-              paddingTop: `calc(2.5rem + ${safeArea?.insets.top ?? 0}px)`,
-              paddingBottom: `calc(2.5rem + ${safeArea?.insets.bottom ?? 0}px)`,
-              paddingLeft: `calc(10rem + ${safeArea?.insets.left ?? 0}px)`,
-              paddingRight: `calc(10rem + ${safeArea?.insets.right ?? 0}px)`,
+              paddingTop: isMobile
+                ? `calc(1rem + var(--safe-top))`
+                : `calc(2.5rem + var(--safe-top))`,
+              paddingBottom: isMobile
+                ? `calc(1rem + var(--safe-bottom))`
+                : `calc(2.5rem + var(--safe-bottom))`,
+              paddingLeft: isMobile
+                ? `calc(1rem + var(--safe-left))`
+                : `calc(10rem + var(--safe-left))`,
+              paddingRight: isMobile
+                ? `calc(1rem + var(--safe-right))`
+                : `calc(10rem + var(--safe-right))`,
             }}
           >
             <div className="relative w-full h-full">