sunpeak 0.2.6 → 0.3.2

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

@@ -0,0 +1,178 @@
+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 OpenAICarouselState extends Record<string, unknown> {
+  currentIndex?: number
+}
+
+export type OpenAICarouselProps = {
+  children?: React.ReactNode
+  gap?: number
+  showArrows?: boolean
+  showEdgeGradients?: boolean
+  cardWidth?: number | { inline?: number; fullscreen?: number }
+  className?: string
+}
+
+export const OpenAICarousel = React.forwardRef<
+  HTMLDivElement,
+  OpenAICarouselProps
+>(
+  (
+    {
+      children,
+      gap = 16,
+      showArrows = true,
+      showEdgeGradients = true,
+      cardWidth,
+      className,
+    },
+    ref
+  ) => {
+    const [widgetState, setWidgetState] = useWidgetState<OpenAICarouselState>(() => ({
+      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({ 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>
+    )
+  }
+)
+OpenAICarousel.displayName = "OpenAICarousel"

package/template/src/styles/globals.css

@@ -1,219 +1,8 @@
 @import "tailwindcss";
+@import "@openai/apps-sdk-ui/css";
 
-@custom-variant dark (&:is(.dark *));
+/* Required for Tailwind to find class references in Apps SDK UI components. */
+@source "../node_modules/@openai/apps-sdk-ui";
 
-/* Tailwind v4 theme configuration */
-@theme {
-  /* ===================================
-   * COLORS - Mapped to shadcn and --sp- variables
-   * ===================================
-   */
-  --color-*: initial;
-
-  /* Shadcn colors */
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-border: var(--border);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-
-  /* Sunpeak semantic colors */
-  --color-success: var(--sp-success);
-  --color-warning: var(--sp-warning);
-  --color-error: var(--sp-error);
-  --color-info: var(--sp-info);
-
-  /* ===================================
-   * TYPOGRAPHY - Mapped to --sp- variables
-   * ===================================
-   */
-
-  /* Font families */
-  --font-sans: var(--sp-font-family);
-
-  /* Font sizes */
-  --text-xs: var(--sp-font-size-xs);
-  --text-sm: var(--sp-font-size-sm);
-  --text-base: var(--sp-font-size-base);
-  --text-lg: var(--sp-font-size-lg);
-  --text-xl: var(--sp-font-size-xl);
-
-  /* Font weights */
-  --font-weight-normal: var(--sp-font-weight-normal);
-  --font-weight-medium: var(--sp-font-weight-medium);
-  --font-weight-semibold: var(--sp-font-weight-semibold);
-  --font-weight-bold: var(--sp-font-weight-bold);
-
-  /* Line heights */
-  --leading-tight: var(--sp-line-height-tight);
-  --leading-normal: var(--sp-line-height-normal);
-  --leading-relaxed: var(--sp-line-height-relaxed);
-
-  /* ===================================
-   * SPACING - Mapped to --sp- variables
-   * ===================================
-   */
-  --spacing-1: var(--sp-spacing-1);
-  --spacing-2: var(--sp-spacing-2);
-  --spacing-3: var(--sp-spacing-3);
-  --spacing-4: var(--sp-spacing-4);
-  --spacing-5: var(--sp-spacing-5);
-  --spacing-6: var(--sp-spacing-6);
-  --spacing-8: var(--sp-spacing-8);
-
-  /* ===================================
-   * BORDER RADIUS - Mapped to --sp- variables
-   * ===================================
-   */
-  --radius-sm: var(--sp-radius-sm);
-  --radius-md: var(--sp-radius-md);
-  --radius-lg: var(--sp-radius-lg);
-  --radius-xl: var(--sp-radius-xl);
-  --radius-2xl: var(--sp-radius-2xl);
-  --radius-full: var(--sp-radius-full);
-
-  /* ===================================
-   * SHADOWS - Mapped to --sp- variables
-   * ===================================
-   */
-  --shadow-sm: var(--sp-shadow-sm);
-  --shadow-md: var(--sp-shadow-md);
-  --shadow-lg: var(--sp-shadow-lg);
-  --shadow-xl: var(--sp-shadow-xl);
-}
-
-/* ===================================
- * THEME MODE CLASSES
- * ===================================
- * Force light/dark mode on specific elements
- */
-
-.light {
-  --sp-color-bg-primary: var(--sp-light-color-bg-primary);
-  --sp-color-bg-secondary: var(--sp-light-color-bg-secondary);
-  --sp-color-bg-tertiary: var(--sp-light-color-bg-tertiary);
-  --sp-color-text-primary: var(--sp-light-color-text-primary);
-  --sp-color-text-secondary: var(--sp-light-color-text-secondary);
-  --sp-color-text-tertiary: var(--sp-light-color-text-tertiary);
-  --sp-color-text-inverted: var(--sp-light-color-text-inverted);
-  --sp-color-border: var(--sp-light-color-border);
-  --sp-success: var(--sp-light-success);
-  --sp-warning: var(--sp-light-warning);
-  --sp-error: var(--sp-light-error);
-  --sp-info: var(--sp-light-info);
-  --sp-accent: var(--sp-light-accent);
-  --sp-accent-hover: var(--sp-light-accent-hover);
-  --sp-accent-active: var(--sp-light-accent-active);
-  --sp-accent-foreground: var(--sp-light-accent-foreground);
-
-  /* shadcn/ui light mode variables */
-  --background: var(--sp-light-color-bg-primary);
-  --foreground: var(--sp-light-color-text-primary);
-  --card: var(--sp-light-color-bg-primary);
-  --card-foreground: var(--sp-light-color-text-primary);
-  --popover: var(--sp-light-color-bg-primary);
-  --popover-foreground: var(--sp-light-color-text-primary);
-  --primary: var(--sp-light-accent);
-  --primary-foreground: var(--sp-accent-foreground);
-  --secondary: var(--sp-light-color-bg-secondary);
-  --secondary-foreground: var(--sp-light-color-text-primary);
-  --muted: var(--sp-light-color-bg-tertiary);
-  --muted-foreground: var(--sp-light-color-text-tertiary);
-  --accent: var(--sp-light-accent);
-  --accent-foreground: var(--sp-accent-foreground);
-  --destructive: var(--sp-light-error);
-  --destructive-foreground: var(--sp-accent-foreground);
-  --border: var(--sp-light-color-border);
-  --input: var(--sp-light-color-bg-secondary);
-  --ring: var(--sp-light-accent);
-  --sidebar: var(--sp-light-sidebar);
-  --sidebar-foreground: var(--sp-light-color-text-primary);
-  --sidebar-primary: var(--sp-light-accent);
-  --sidebar-primary-foreground: var(--sp-light-color-text-primary);
-  --sidebar-accent: var(--sp-light-accent);
-  --sidebar-accent-foreground: var(--sp-light-color-text-primary);
-  --sidebar-border: var(--sp-light-color-border);
-  --sidebar-ring: var(--sp-light-accent);
-}
-
-.dark {
-  --sp-color-bg-primary: var(--sp-dark-color-bg-primary);
-  --sp-color-bg-secondary: var(--sp-dark-color-bg-secondary);
-  --sp-color-bg-tertiary: var(--sp-dark-color-bg-tertiary);
-  --sp-color-text-primary: var(--sp-dark-color-text-primary);
-  --sp-color-text-secondary: var(--sp-dark-color-text-secondary);
-  --sp-color-text-tertiary: var(--sp-dark-color-text-tertiary);
-  --sp-color-text-inverted: var(--sp-dark-color-text-inverted);
-  --sp-color-border: var(--sp-dark-color-border);
-  --sp-success: var(--sp-dark-success);
-  --sp-warning: var(--sp-dark-warning);
-  --sp-error: var(--sp-dark-error);
-  --sp-info: var(--sp-dark-info);
-  --sp-accent: var(--sp-dark-accent);
-  --sp-accent-hover: var(--sp-dark-accent-hover);
-  --sp-accent-active: var(--sp-dark-accent-active);
-  --sp-accent-foreground: var(--sp-dark-accent-foreground);
-
-  /* shadcn/ui dark mode variables */
-  --background: var(--sp-dark-color-bg-primary);
-  --foreground: var(--sp-dark-color-text-primary);
-  --card: var(--sp-dark-color-bg-primary);
-  --card-foreground: var(--sp-dark-color-text-primary);
-  --popover: var(--sp-dark-color-bg-primary);
-  --popover-foreground: var(--sp-dark-color-text-primary);
-  --primary: var(--sp-dark-accent);
-  --primary-foreground: var(--sp-accent-foreground);
-  --secondary: var(--sp-dark-color-bg-secondary);
-  --secondary-foreground: var(--sp-dark-color-text-primary);
-  --muted: var(--sp-dark-color-bg-tertiary);
-  --muted-foreground: var(--sp-dark-color-text-tertiary);
-  --accent: var(--sp-dark-accent);
-  --accent-foreground: var(--sp-accent-foreground);
-  --destructive: var(--sp-dark-error);
-  --destructive-foreground: var(--sp-accent-foreground);
-  --border: var(--sp-dark-color-border);
-  --input: var(--sp-dark-color-bg-secondary);
-  --ring: var(--sp-dark-accent);
-  --sidebar: var(--sp-dark-sidebar);
-  --sidebar-foreground: var(--sp-dark-color-text-primary);
-  --sidebar-primary: var(--sp-dark-accent);
-  --sidebar-primary-foreground: var(--sp-dark-color-text-primary);
-  --sidebar-accent: var(--sp-dark-accent);
-  --sidebar-accent-foreground: var(--sp-dark-color-text-primary);
-  --sidebar-border: var(--sp-dark-color-border);
-  --sidebar-ring: var(--sp-dark-accent);
-}
-
-@theme inline {
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
+/* Configure dark mode to use data-theme attribute (OpenAI SDK standard) */
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

package/template/vite.config.build.ts

@@ -0,0 +1,61 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import tailwindcss from '@tailwindcss/vite';
+import { readFileSync, writeFileSync, unlinkSync, existsSync } from 'fs';
+
+// Plugin to inline CSS into the JS bundle
+function inlineCssPlugin() {
+  return {
+    name: 'inline-css',
+    closeBundle() {
+      const distDir = path.resolve(__dirname, 'dist/chatgpt');
+      const jsFile = path.join(distDir, 'index.js');
+      const cssFile = path.join(distDir, 'style.css');
+
+      if (existsSync(cssFile) && existsSync(jsFile)) {
+        const css = readFileSync(cssFile, 'utf-8');
+        const js = readFileSync(jsFile, 'utf-8');
+
+        // Inject CSS at the start of the JS file
+        const injectCss = `(function(){var s=document.createElement('style');s.textContent=${JSON.stringify(css)};document.head.appendChild(s);})();`;
+        writeFileSync(jsFile, injectCss + js);
+
+        // Remove the separate CSS file
+        unlinkSync(cssFile);
+      }
+    },
+  };
+}
+
+export default defineConfig({
+  plugins: [react(), tailwindcss(), inlineCssPlugin()],
+  define: {
+    'process.env.NODE_ENV': JSON.stringify('production'),
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+    conditions: ['style', 'import', 'module', 'browser', 'default'],
+  },
+  build: {
+    target: 'es2020',
+    lib: {
+      entry: path.resolve(__dirname, 'src/index.chatgpt.tsx'),
+      name: 'SunpeakApp',
+      formats: ['iife'],
+      fileName: () => 'index.js',
+    },
+    outDir: 'dist/chatgpt',
+    cssCodeSplit: false,
+    rollupOptions: {
+      output: {
+        inlineDynamicImports: true,
+        assetFileNames: '[name][extname]',
+      },
+    },
+    minify: true,
+    cssMinify: true,
+  },
+});

package/template/vite.config.ts

@@ -18,8 +18,6 @@ export default defineConfig({
         '~': parentSrc,
       }),
     },
-    // Enable "style" condition for CSS-only packages like tw-animate-css
-    conditions: ['style'],
   },
   server: {
     port: 6767,