sunpeak 0.6.1 → 0.6.4

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

@@ -2,10 +2,10 @@ import {
   Button,
   ButtonLink,
   CopyButton
-} from "./chunk-DQAZDQU3.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";

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

@@ -2,15 +2,7 @@ import {
   Button,
   LoadingIndicator,
   TransitionGroup
-} from "./chunk-DQAZDQU3.js";
-import {
-  Check_default,
-  ChevronDownVector_default,
-  DropdownVector_default,
-  Info_default,
-  Search_default,
-  X_default
-} from "./chunk-XB525PXG.js";
+} from "./chunk-EVJ3DVH5.js";
 import {
   useTimeout
 } from "./chunk-YOJ6QPGS.js";
@@ -26,6 +18,14 @@ import {
   dist_exports5 as dist_exports3
 } from "./chunk-SGWD4VEU.js";
 import "./chunk-KFGKZMLK.js";
+import {
+  Check_default,
+  ChevronDownVector_default,
+  DropdownVector_default,
+  Info_default,
+  Search_default,
+  X_default
+} from "./chunk-XB525PXG.js";
 import {
   Input
 } from "./chunk-CQ3GYAYB.js";

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

@@ -7,112 +7,109 @@
     "react": {
       "src": "../../../../node_modules/.pnpm/react@19.2.0/node_modules/react/index.js",
       "file": "react.js",
-      "fileHash": "94bcffe9",
+      "fileHash": "709fc4d0",
       "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": "8fb77322",
+      "fileHash": "eafa73ff",
       "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": "ca004f1d",
+      "fileHash": "d42047ee",
       "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": "4f69b4ed",
+      "fileHash": "2da5ebc1",
       "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": "943d4cd6",
+      "fileHash": "d1e89e9a",
       "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": "9eeaf63b",
+      "fileHash": "2eb256ae",
       "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": "188194a5",
+      "fileHash": "999d1e76",
       "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": "bf451833",
+      "fileHash": "dbea2bc0",
       "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": "456dc53c",
+      "fileHash": "ab8d0314",
       "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": "8a137c67",
+      "fileHash": "eff0eed8",
       "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": "a5e61764",
+      "fileHash": "f422f1e9",
       "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": "21efb3b2",
+      "fileHash": "e7c6d178",
       "needsInterop": false
     },
     "clsx": {
       "src": "../../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs",
       "file": "clsx.js",
-      "fileHash": "68a7acff",
+      "fileHash": "5aa64b16",
       "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": "f2ad1539",
+      "fileHash": "c170b63c",
       "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": "90a4d0c8",
+      "fileHash": "784df595",
       "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": "02f8c5e8",
+      "fileHash": "4826be64",
       "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": "ace864a4",
+      "fileHash": "885aab86",
       "needsInterop": false
     }
   },
   "chunks": {
-    "chunk-DQAZDQU3": {
-      "file": "chunk-DQAZDQU3.js"
-    },
-    "chunk-XB525PXG": {
-      "file": "chunk-XB525PXG.js"
+    "chunk-EVJ3DVH5": {
+      "file": "chunk-EVJ3DVH5.js"
     },
     "chunk-YOJ6QPGS": {
       "file": "chunk-YOJ6QPGS.js"
@@ -126,6 +123,9 @@
     "chunk-KFGKZMLK": {
       "file": "chunk-KFGKZMLK.js"
     },
+    "chunk-XB525PXG": {
+      "file": "chunk-XB525PXG.js"
+    },
     "chunk-CQ3GYAYB": {
       "file": "chunk-CQ3GYAYB.js"
     },

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

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

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

@@ -1 +1 @@
-{"version":"4.0.13","results":[[":src/resources/counter-resource.test.tsx",{"duration":341.562457,"failed":false}],[":src/components/album/albums.test.tsx",{"duration":347.8453920000002,"failed":false}],[":src/resources/carousel-resource.test.tsx",{"duration":281.398232,"failed":false}],[":src/components/album/fullscreen-viewer.test.tsx",{"duration":245.63889299999983,"failed":false}],[":src/components/carousel/carousel.test.tsx",{"duration":64.06780200000003,"failed":false}],[":src/resources/albums-resource.test.tsx",{"duration":269.48677499999985,"failed":false}],[":src/components/album/film-strip.test.tsx",{"duration":490.057513,"failed":false}],[":src/components/album/album-card.test.tsx",{"duration":302.1487770000001,"failed":false}],[":src/components/card/card.test.tsx",{"duration":55.60354700000016,"failed":false}]]}
+{"version":"4.0.13","results":[[":src/resources/carousel-resource.test.tsx",{"duration":272.55451200000016,"failed":false}],[":src/resources/counter-resource.test.tsx",{"duration":403.50324999999975,"failed":false}],[":src/components/album/albums.test.tsx",{"duration":332.906375,"failed":false}],[":src/components/album/fullscreen-viewer.test.tsx",{"duration":238.23859200000015,"failed":false}],[":src/components/album/album-carousel.test.tsx",{"duration":64.19374000000016,"failed":false}],[":src/components/carousel/carousel.test.tsx",{"duration":96.49479299999985,"failed":false}],[":src/resources/albums-resource.test.tsx",{"duration":257.8042250000001,"failed":false}],[":src/components/album/film-strip.test.tsx",{"duration":407.23125600000003,"failed":false}],[":src/components/album/album-card.test.tsx",{"duration":254.80172800000014,"failed":false}],[":src/components/carousel/card.test.tsx",{"duration":54.36003299999993,"failed":false}]]}

package/template/src/components/album/album-carousel.test.tsx

@@ -0,0 +1,84 @@
+import { render } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { AlbumCarousel } from './album-carousel';
+
+const mockUseDisplayMode = vi.fn(() => 'inline');
+
+// Mock sunpeak hooks
+vi.mock('sunpeak', () => ({
+  useWidgetState: vi.fn(() => [{ currentIndex: 0 }, vi.fn()]),
+  useDisplayMode: () => mockUseDisplayMode(),
+}));
+
+// Mock embla-carousel-react
+vi.mock('embla-carousel-react', () => ({
+  default: vi.fn(() => [vi.fn(), null]),
+}));
+
+// Mock embla-carousel-wheel-gestures
+vi.mock('embla-carousel-wheel-gestures', () => ({
+  WheelGesturesPlugin: vi.fn(() => ({})),
+}));
+
+describe('AlbumCarousel', () => {
+  beforeEach(() => {
+    mockUseDisplayMode.mockReturnValue('inline');
+  });
+
+  it('renders all children with correct card width', () => {
+    const { container } = render(
+      <AlbumCarousel cardWidth={300}>
+        <div>Card 1</div>
+        <div>Card 2</div>
+        <div>Card 3</div>
+      </AlbumCarousel>
+    );
+
+    const cardContainers = container.querySelectorAll('.flex-none');
+    expect(cardContainers).toHaveLength(3);
+
+    cardContainers.forEach((cardContainer) => {
+      const element = cardContainer as HTMLElement;
+      expect(element.style.minWidth).toBe('300px');
+      expect(element.style.maxWidth).toBe('300px');
+    });
+  });
+
+  it('handles cardWidth object with inline/fullscreen modes', () => {
+    // Test inline mode
+    mockUseDisplayMode.mockReturnValue('inline');
+    const { container: inlineContainer } = render(
+      <AlbumCarousel cardWidth={{ inline: 250, fullscreen: 400 }}>
+        <div>Card 1</div>
+      </AlbumCarousel>
+    );
+
+    let cardContainer = inlineContainer.querySelector('.flex-none') as HTMLElement;
+    expect(cardContainer.style.minWidth).toBe('250px');
+
+    // Test fullscreen mode
+    mockUseDisplayMode.mockReturnValue('fullscreen');
+    const { container: fullscreenContainer } = render(
+      <AlbumCarousel cardWidth={{ inline: 250, fullscreen: 400 }}>
+        <div>Card 1</div>
+      </AlbumCarousel>
+    );
+
+    cardContainer = fullscreenContainer.querySelector('.flex-none') as HTMLElement;
+    expect(cardContainer.style.minWidth).toBe('400px');
+  });
+
+  it('applies custom gap between cards', () => {
+    const { container } = render(
+      <AlbumCarousel gap={24}>
+        <div>Card 1</div>
+        <div>Card 2</div>
+      </AlbumCarousel>
+    );
+
+    const carouselTrack = container.querySelector('.flex.touch-pan-y') as HTMLElement;
+    expect(carouselTrack.style.gap).toBe('24px');
+    expect(carouselTrack.style.marginLeft).toBe('-24px');
+    expect(carouselTrack.style.paddingLeft).toBe('24px');
+  });
+});

package/template/src/components/album/album-carousel.tsx

@@ -0,0 +1,168 @@
+import * as React from 'react';
+import useEmblaCarousel from 'embla-carousel-react';
+import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';
+import { ArrowLeft, ArrowRight } from '@openai/apps-sdk-ui/components/Icon';
+import { useWidgetState, useDisplayMode } from 'sunpeak';
+import { Button } from '@openai/apps-sdk-ui/components/Button';
+import { cn } from '../../lib/index';
+
+export interface AlbumCarouselState extends Record<string, unknown> {
+  currentIndex?: number;
+}
+
+export type AlbumCarouselProps = {
+  children?: React.ReactNode;
+  gap?: number;
+  showArrows?: boolean;
+  showEdgeGradients?: boolean;
+  cardWidth?: number | { inline?: number; fullscreen?: number };
+  className?: string;
+};
+
+export const AlbumCarousel = React.forwardRef<HTMLDivElement, AlbumCarouselProps>(
+  (
+    { children, gap = 16, showArrows = true, showEdgeGradients = true, cardWidth, className },
+    ref
+  ) => {
+    const [widgetState, setWidgetState] = useWidgetState<AlbumCarouselState>(() => ({
+      currentIndex: 0,
+    }));
+    const displayMode = useDisplayMode();
+
+    const [emblaRef, emblaApi] = useEmblaCarousel(
+      {
+        align: 'start',
+        dragFree: true,
+        containScroll: 'trimSnaps',
+      },
+      [WheelGesturesPlugin()]
+    );
+
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+    const scrollPrev = React.useCallback(() => {
+      if (emblaApi) emblaApi.scrollPrev();
+    }, [emblaApi]);
+
+    const scrollNext = React.useCallback(() => {
+      if (emblaApi) emblaApi.scrollNext();
+    }, [emblaApi]);
+
+    const onSelect = React.useCallback(() => {
+      if (!emblaApi) return;
+
+      setCanScrollPrev(emblaApi.canScrollPrev());
+      setCanScrollNext(emblaApi.canScrollNext());
+
+      const currentIndex = emblaApi.selectedScrollSnap();
+      if (widgetState?.currentIndex !== currentIndex) {
+        setWidgetState((prev) => ({ ...prev, currentIndex }));
+      }
+    }, [emblaApi, widgetState?.currentIndex, setWidgetState]);
+
+    React.useEffect(() => {
+      if (!emblaApi) return;
+
+      onSelect();
+      emblaApi.on('select', onSelect);
+      emblaApi.on('reInit', onSelect);
+
+      return () => {
+        emblaApi.off('select', onSelect);
+        emblaApi.off('reInit', onSelect);
+      };
+    }, [emblaApi, onSelect]);
+
+    const childArray = React.Children.toArray(children);
+
+    const getCardWidth = () => {
+      if (typeof cardWidth === 'number') {
+        return cardWidth;
+      }
+      if (cardWidth && typeof cardWidth === 'object') {
+        if (displayMode === 'fullscreen' && cardWidth.fullscreen) {
+          return cardWidth.fullscreen;
+        }
+        if (cardWidth.inline) {
+          return cardWidth.inline;
+        }
+      }
+      return 220;
+    };
+
+    const cardWidthPx = getCardWidth();
+
+    return (
+      <div ref={ref} className={cn('relative w-full', className)}>
+        {/* Left edge gradient */}
+        {showEdgeGradients && canScrollPrev && (
+          <div
+            className="pointer-events-none absolute left-0 top-0 z-10 h-full w-12 bg-gradient-to-r from-surface to-transparent"
+            aria-hidden="true"
+          />
+        )}
+
+        {/* Right edge gradient */}
+        {showEdgeGradients && canScrollNext && (
+          <div
+            className="pointer-events-none absolute right-0 top-0 z-10 h-full w-12 bg-gradient-to-l from-surface to-transparent"
+            aria-hidden="true"
+          />
+        )}
+
+        {/* Carousel viewport */}
+        <div ref={emblaRef} className="overflow-hidden w-full">
+          <div
+            className="flex touch-pan-y"
+            style={{
+              gap: `${gap}px`,
+              marginLeft: `-${gap}px`,
+              paddingLeft: `${gap}px`,
+            }}
+          >
+            {childArray.map((child, index) => (
+              <div
+                key={index}
+                className="flex-none"
+                style={{
+                  minWidth: `${cardWidthPx}px`,
+                  maxWidth: `${cardWidthPx}px`,
+                }}
+              >
+                {child}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Previous button */}
+        {showArrows && canScrollPrev && (
+          <Button
+            variant="soft"
+            color="secondary"
+            onClick={scrollPrev}
+            className="absolute left-2 top-1/2 -translate-y-1/2 z-20 h-8 w-8 min-w-8 rounded-full p-0 shadow-md"
+            aria-label="Previous slide"
+          >
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+        )}
+
+        {/* Next button */}
+        {showArrows && canScrollNext && (
+          <Button
+            variant="soft"
+            color="secondary"
+            onClick={scrollNext}
+            className="absolute right-2 top-1/2 -translate-y-1/2 z-20 h-8 w-8 min-w-8 rounded-full p-0 shadow-md"
+            aria-label="Next slide"
+          >
+            <ArrowRight className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+    );
+  }
+);
+AlbumCarousel.displayName = 'AlbumCarousel';

package/template/src/components/album/albums.test.tsx

@@ -29,8 +29,8 @@ vi.mock('./fullscreen-viewer', () => ({
   ),
 }));
 
-vi.mock('../carousel', () => ({
-  Carousel: ({ children }: { children: React.ReactNode }) => (
+vi.mock('./album-carousel', () => ({
+  AlbumCarousel: ({ children }: { children: React.ReactNode }) => (
     <div data-testid="carousel">{children}</div>
   ),
 }));

package/template/src/components/album/albums.tsx

@@ -6,7 +6,7 @@ import {
   useWidgetProps,
   useUserAgent,
 } from 'sunpeak';
-import { Carousel } from '../carousel';
+import { AlbumCarousel } from './album-carousel';
 import { AlbumCard } from './album-card';
 import { FullscreenViewer } from './fullscreen-viewer';
 
@@ -60,7 +60,7 @@ export const Albums = React.forwardRef<HTMLDivElement, AlbumsProps>(({ className
 
   return (
     <div ref={ref} className={className}>
-      <Carousel gap={20} showArrows={false} showEdgeGradients={false} cardWidth={272}>
+      <AlbumCarousel gap={20} showArrows={false} showEdgeGradients={false} cardWidth={272}>
         {albums.map((album: Album) => (
           <AlbumCard
             key={album.id}
@@ -69,7 +69,7 @@ export const Albums = React.forwardRef<HTMLDivElement, AlbumsProps>(({ className
             buttonSize={hasTouch ? 'lg' : 'md'}
           />
         ))}
-      </Carousel>
+      </AlbumCarousel>
     </div>
   );
 });

package/template/src/components/album/index.ts

@@ -1,4 +1,5 @@
 export * from './album-card';
+export * from './album-carousel';
 export * from './albums';
 export * from './fullscreen-viewer';
 export * from './film-strip';

package/template/src/components/carousel/index.ts

@@ -1 +1,2 @@
 export * from './carousel';
+export * from './card';

package/template/src/components/index.ts

@@ -1,3 +1,2 @@
-export * from './card';
 export * from './carousel';
 export * from './album';

package/template/src/resources/carousel-resource.test.tsx

@@ -32,13 +32,10 @@ vi.mock('sunpeak', () => ({
 }));
 
 // Mock child components
-vi.mock('../components/carousel/carousel', () => ({
+vi.mock('../components/carousel', () => ({
   Carousel: ({ children }: { children: React.ReactNode }) => (
     <div data-testid="carousel">{children}</div>
   ),
-}));
-
-vi.mock('../components/card/card', () => ({
   Card: ({ header, buttonSize }: { header: React.ReactNode; buttonSize?: string }) => (
     <div data-testid="card" data-button-size={buttonSize}>
       {header}

package/template/src/resources/carousel-resource.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { useWidgetProps, useSafeArea, useMaxHeight, useUserAgent } from 'sunpeak';
-import { Carousel } from '../components/carousel/carousel';
-import { Card } from '../components/card/card';
+import { Carousel, Card } from '../components/carousel';
 
 /**
  * Production-ready Carousel Resource

package/template/src/components/card/index.ts

@@ -1 +0,0 @@
-export * from './card';