sunpeak 0.1.0

package/README.md

@@ -0,0 +1,109 @@
+# sunpeak
+
+React library for cross-platform genAI App UIs. Supports **OpenAI ChatGPT Apps**, with pluggable architecture for **Gemini**, **Claude**, and other platforms.
+
+![ChatGPT Simulator](./assets/chatgpt-simulator.png)
+
+**Key Features:**
+- 📺 ChatGPT simulator for rapid UI component development.
+- 🧑‍💻 Interface for cross-platform custom components.
+  - Unified frontend API and design system.
+- 📱 Library of approved Apps and components.
+- 🧪 Test advanced platform behavior locally.
+
+## Development Quickstart
+
+Requirements: Node 18+, pnpm 8+
+
+```bash
+pnpm run dev
+```
+
+## Building Apps
+
+### Use a library App
+
+```tsx
+import { Carousel, Card } from 'sunpeak';
+
+export const MyCarousel = () => (
+  <Carousel>
+    <Card
+      image="https://sunpeak.ai/images/sun.svg"
+      imageAlt="Sunpeak logo"
+      imageMaxWidth={400}
+      imageMaxHeight={400}
+      header="Card Title"
+    >
+      Card content
+    </Card>
+  </Carousel>
+);
+```
+
+### Create a custom App
+
+```tsx
+import { GenAI } from 'sunpeak';
+import 'sunpeak/dist/index.css';
+
+export const MyApp = GenAI(({ maxHeight, colorScheme }) => (
+  <div style={{ padding: '20px' }}>
+    <h2>Hello GenAI!</h2>
+    <p>Theme: {colorScheme}</p>
+    <p>Available height: {maxHeight}px</p>
+  </div>
+));
+```
+## Supported Platforms
+
+- ✅ **OpenAI ChatGPT** - Fully supported ([design guidelines](https://developers.openai.com/apps-sdk/concepts/design-guidelines))
+- 🔄 **Google Gemini** - Design system available (SDK support coming soon)
+- 🔄 **Anthropic Claude** - Design system available (SDK support coming soon)
+- 🔧 **Custom platforms** - Implement your own platform adapter
+
+### Platform Auto-Detection
+
+Sunpeak automatically detects the active platform. No configuration needed for basic usage!
+
+## What's Included
+
+### Components
+- **GenAI Component** - Create platform-aware Apps with automatic theming
+  - Enforce requirements imposed by App platforms
+  - Provide a unified interface for App platform interactions
+- **Card** - Responsive card component that adapts to display mode
+- **Carousel** - Horizontal scrolling carousel for multiple cards
+- **Button** - Action button with required onClick and optional isPrimary styling
+
+### Hooks
+- **usePlatformGlobal** - Platform-agnostic global state access
+- **useDisplayMode** - Get current display mode
+- **useRequestDisplayMode** - Request a specific display mode (e.g., fullscreen)
+- **useWidgetProps** - Access tool output data
+- **useWidgetState** - Manage persistent widget state
+- **useMaxHeight** - Get height constraints
+
+### Design Systems
+- **ChatGPT** - Default, follows Apps SDK guidelines
+- **Gemini** - Google's design language (placeholder)
+- **Claude** - Anthropic's design language (placeholder)
+- **Custom** - Build your own via CSS variables
+
+**See [THEMING.md](./THEMING.md)** for creating custom design systems and complete theming documentation.
+
+## Deployment
+
+Automatically publishes to npm when a new release is created on GitHub:
+1. Runs all CI checks (lint, test, build)
+2. Publishes to npm
+
+## Resources
+
+- [OpenAI ChatGPT Apps SDK Design Guidelines](https://developers.openai.com/apps-sdk/concepts/design-guidelines)
+- [OpenAI ChatGPT Apps SDK Examples](https://github.com/openai/openai-apps-sdk-examples)
+- [Theming Guide](./THEMING.md)
+
+## License
+
+MIT

package/dist/components.css

@@ -0,0 +1,255 @@
+/**
+ * Sunpeak Component Styles
+ *
+ * Generic component styles that work with any design system.
+ * These styles use CSS variables defined by the design system.
+ */
+
+/* ===================================
+ * UTILITY CLASSES
+ * ===================================
+ */
+
+.sp-antialiased {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.sp-select-none {
+  user-select: none;
+}
+
+.sp-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ===================================
+ * CARD COMPONENT
+ * ===================================
+ */
+
+.sp-card {
+  background-color: var(--sp-color-bg-primary);
+  border-radius: var(--sp-radius-lg);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  font-family: var(--sp-font-family);
+}
+
+.sp-card-bordered {
+  border: 1px solid var(--sp-color-border);
+}
+
+.sp-card-elevated {
+  box-shadow: var(--sp-shadow-md);
+  border: 1px solid var(--sp-color-border-subtle);
+}
+
+.sp-card-image {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 1;
+  object-fit: cover;
+  border-radius: var(--sp-radius-lg);
+  display: block;
+}
+
+.sp-card-header {
+  font-size: var(--sp-font-size-base);
+  font-weight: var(--sp-font-weight-medium);
+  color: var(--sp-color-text-primary);
+  line-height: var(--sp-line-height-tight);
+}
+
+.sp-card-metadata {
+  font-size: var(--sp-font-size-xs);
+  color: var(--sp-color-text-secondary);
+  line-height: var(--sp-line-height-normal);
+  margin-top: 4px;
+}
+
+.sp-card-description {
+  font-size: var(--sp-font-size-sm);
+  color: var(--sp-color-text-primary);
+  line-height: var(--sp-line-height-normal);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* ===================================
+ * CAROUSEL COMPONENT
+ * ===================================
+ */
+
+.sp-carousel {
+  position: relative;
+  width: 100%;
+  padding: var(--sp-spacing-5) 0;
+}
+
+.sp-carousel-scroll {
+  display: flex;
+  align-items: stretch;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-behavior: smooth;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
+  user-select: none;
+}
+
+.sp-carousel-scroll::-webkit-scrollbar {
+  display: none; /* Chrome/Safari */
+}
+
+.sp-carousel-scroll:active {
+  scroll-behavior: auto;
+}
+
+.sp-carousel-item {
+  flex-shrink: 0;
+  width: var(--sp-card-width);
+  display: flex;
+}
+
+.sp-carousel-item > .sp-card {
+  height: 100%;
+}
+
+/* Edge gradients */
+.sp-carousel-edge {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 80px;
+  pointer-events: none;
+  z-index: 1;
+  transition: opacity 0.2s ease;
+}
+
+.sp-carousel-edge-left {
+  left: 0;
+  background: linear-gradient(
+    to right,
+    var(--sp-color-bg-primary) 0%,
+    transparent 100%
+  );
+}
+
+.sp-carousel-edge-right {
+  right: 0;
+  background: linear-gradient(
+    to left,
+    var(--sp-color-bg-primary) 0%,
+    transparent 100%
+  );
+}
+
+/* Navigation buttons */
+.sp-carousel-nav-button {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 32px;
+  height: 32px;
+  border-radius: var(--sp-radius-full);
+  border: none;
+  background-color: var(--sp-color-bg-primary);
+  box-shadow: var(--sp-shadow-md);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  transition: all 0.2s ease;
+  color: var(--sp-color-text-primary);
+}
+
+.sp-carousel-nav-button:hover {
+  box-shadow: var(--sp-shadow-lg);
+  transform: translateY(-50%) scale(1.05);
+}
+
+.sp-carousel-nav-button:active {
+  transform: translateY(-50%) scale(0.95);
+}
+
+.sp-carousel-nav-button-prev {
+  left: var(--sp-spacing-2);
+}
+
+.sp-carousel-nav-button-next {
+  right: var(--sp-spacing-2);
+}
+
+.sp-carousel-nav-icon {
+  width: 20px;
+  height: 20px;
+}
+
+/* ===================================
+ * BUTTON COMPONENT
+ * ===================================
+ */
+
+.sp-button {
+  font-family: var(--sp-font-family);
+  font-size: var(--sp-font-size-sm);
+  font-weight: var(--sp-font-weight-medium);
+  padding: var(--sp-button-padding-y) var(--sp-button-padding-x);
+  border-radius: var(--sp-radius-md);
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  line-height: var(--sp-line-height-tight);
+}
+
+.sp-button-primary {
+  background-color: var(--sp-accent);
+  color: white;
+  border: none;
+}
+
+.sp-button-primary:hover {
+  background-color: var(--sp-accent-hover);
+}
+
+.sp-button-primary:active {
+  background-color: var(--sp-accent-active);
+}
+
+.sp-button-secondary {
+  background-color: transparent;
+  color: var(--sp-color-text-primary);
+  border: 1px solid var(--sp-color-border);
+}
+
+.sp-button-secondary:hover {
+  background-color: var(--sp-color-bg-secondary);
+}
+
+.sp-button-secondary:active {
+  background-color: var(--sp-color-bg-tertiary);
+}
+
+/* ===================================
+ * TEXT UTILITIES
+ * ===================================
+ */
+
+.sp-text-primary {
+  color: var(--sp-color-text-primary);
+}
+
+.sp-text-secondary {
+  color: var(--sp-color-text-secondary);
+}
+
+.sp-text-tertiary {
+  color: var(--sp-color-text-tertiary);
+}

package/dist/design-systems/chatgpt.css

@@ -0,0 +1,243 @@
+/**
+ * OpenAI ChatGPT Apps SDK Design System
+ *
+ * Implements Sunpeak base variables according to OpenAI ChatGPT Apps SDK design guidelines.
+ * https://developers.openai.com/apps-sdk/concepts/design-guidelines
+ *
+ * Design Principles:
+ * - "Always inherit the system font stack"
+ * - "Use system colors for text, icons, and spatial elements"
+ * - "Use system grid spacing"
+ * - "Respect system specified corner rounds"
+ *
+ * ⚠️ These values should NOT be overridden unless you want to break
+ * compliance with OpenAI ChatGPT Apps SDK design guidelines.
+ */
+
+:root {
+  /* ===================================
+   * TYPOGRAPHY - System Fonts
+   * ===================================
+   * "Always inherit the system font stack"
+   * Platform-native: SF Pro (iOS/macOS), Roboto (Android), Segoe UI (Windows)
+   */
+
+  --sp-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+
+  /* Font sizes - System-defined scale */
+  --sp-font-size-xs: 0.75rem;    /* 12px - metadata */
+  --sp-font-size-sm: 0.875rem;   /* 14px - descriptions */
+  --sp-font-size-base: 1rem;     /* 16px - headers */
+  --sp-font-size-lg: 1.125rem;   /* 18px */
+  --sp-font-size-xl: 1.25rem;    /* 20px */
+
+  /* Font weights - System-defined */
+  --sp-font-weight-normal: 400;
+  --sp-font-weight-medium: 500;
+  --sp-font-weight-semibold: 600;
+  --sp-font-weight-bold: 700;
+
+  /* Line heights - System-defined */
+  --sp-line-height-tight: 1.25;
+  --sp-line-height-normal: 1.5;
+  --sp-line-height-relaxed: 1.75;
+
+  /* ===================================
+   * SYSTEM COLORS
+   * ===================================
+   * "Use system colors for text, icons, and spatial elements"
+   */
+
+  /* Light Mode - OpenAI ChatGPT System Colors */
+  --sp-light-color-bg-primary: #ffffff;
+  --sp-light-color-bg-secondary: #e8e8e8;
+  --sp-light-color-bg-tertiary: #f3f3f3;
+  --sp-light-color-text-primary: #0d0d0d;
+  --sp-light-color-text-secondary: #5d5d5d;
+  --sp-light-color-text-tertiary: #8f8f8f;
+  --sp-light-color-text-inverted: #8f8f8f;
+  --sp-light-color-border: rgba(0, 0, 0, 0.15);
+  --sp-light-color-border-subtle: rgba(0, 0, 0, 0.05);
+  --sp-light-success: #008635;
+  --sp-light-warning: #e25507;
+  --sp-light-error: #e02e2a;
+  --sp-light-info: #0285ff;
+  /* Customizable light styles (override in themes.css) */
+  --sp-light-accent: #f46c21;
+  --sp-light-accent-hover: rgba(244, 108, 33, 0.9);
+  --sp-light-accent-active: #d45e1c;
+  --sp-light-color-border: rgba(0, 0, 0, 0.15);
+  --sp-light-color-border-subtle: rgba(0, 0, 0, 0.05);
+
+  /* Dark Mode - OpenAI ChatGPT System Colors */
+  --sp-dark-color-bg-primary: #212121;
+  --sp-dark-color-bg-secondary: #303030;
+  --sp-dark-color-bg-tertiary: #414141;
+  --sp-dark-color-text-primary: #ffffff;
+  --sp-dark-color-text-secondary: #cdcdcd;
+  --sp-dark-color-text-tertiary: #afafaf;
+  --sp-dark-color-text-inverted: #afafaf;
+  --sp-dark-success: #40c977;
+  --sp-dark-warning: #ff9e6c;
+  --sp-dark-error: #ff8583;
+  --sp-dark-info: #0285ff;
+  /* Customizable dark styles (override in themes.css) */
+  --sp-dark-accent: #f46c21;
+  --sp-dark-accent-hover: rgba(244, 108, 33, 0.9);
+  --sp-dark-accent-active: #d45e1c;
+  --sp-dark-color-border: rgba(0, 0, 0, 0.15);
+  --sp-dark-color-border-subtle: rgba(0, 0, 0, 0.05);
+
+  /* Default to Light Mode */
+  --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-color-border-subtle: var(--sp-light-color-border-subtle);
+  --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-color-border: var(--sp-light-color-border);
+  --sp-color-border-subtle: var(--sp-light-color-border-subtle);
+
+  /* ===================================
+   * SPACING - System Grid
+   * ===================================
+   * "Use system grid spacing"
+   * 4px base grid system
+   */
+
+  --sp-spacing-1: 0.25rem;   /* 4px */
+  --sp-spacing-2: 0.5rem;    /* 8px */
+  --sp-spacing-3: 0.75rem;   /* 12px */
+  --sp-spacing-4: 1rem;      /* 16px */
+  --sp-spacing-5: 1.25rem;   /* 20px */
+  --sp-spacing-6: 1.5rem;    /* 24px */
+  --sp-spacing-8: 2rem;      /* 32px */
+
+  /* ===================================
+   * BORDER RADIUS
+   * ===================================
+   * "Respect system specified corner rounds"
+   */
+
+  --sp-radius-sm: 0.375rem;   /* 6px */
+  --sp-radius-md: 0.5rem;     /* 8px */
+  --sp-radius-lg: 0.75rem;    /* 12px */
+  --sp-radius-xl: 1rem;       /* 16px */
+  --sp-radius-2xl: 1.5rem;    /* 24px */
+  --sp-radius-full: 9999px;
+
+  /* ===================================
+   * SHADOWS - System Elevation
+   * ===================================
+   */
+
+  --sp-shadow-sm: 0px 1px 2px rgba(0, 0, 0, 0.05);
+  --sp-shadow-md: 0px 2px 6px rgba(0, 0, 0, 0.06);
+  --sp-shadow-lg: 0px 4px 12px rgba(0, 0, 0, 0.1);
+  --sp-shadow-xl: 0px 8px 24px rgba(0, 0, 0, 0.12);
+
+  /* ===================================
+   * COMPONENT DIMENSIONS
+   * ===================================
+   * Standard component sizing from OpenAI ChatGPT examples
+   */
+
+  /* Card width - 220px (OpenAI ChatGPT standard) */
+  --sp-card-width: 220px;
+
+  /* Card gap - 16px (OpenAI ChatGPT standard) */
+  --sp-card-gap: 1rem;
+
+  /* Button padding */
+  --sp-button-padding-x: 1rem;       /* 16px */
+  --sp-button-padding-y: 0.375rem;   /* 6px */
+  --sp-button-padding-x-sm: 0.75rem; /* 12px */
+  --sp-button-padding-y-sm: 0.25rem; /* 4px */
+}
+
+/* ===================================
+ * DARK MODE - System Colors
+ * ===================================
+ * Automatic dark mode via prefers-color-scheme
+ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --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-color-border-subtle: var(--sp-dark-color-border-subtle);
+    --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-color-border: var(--sp-dark-color-border);
+    --sp-color-border-subtle: var(--sp-dark-color-border-subtle);
+  }
+}
+
+/* ===================================
+ * THEME MODE CLASSES
+ * ===================================
+ * Force light/dark mode on specific elements
+ */
+
+.sp-theme-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-color-border-subtle: var(--sp-light-color-border-subtle);
+  --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-color-border: var(--sp-light-color-border);
+  --sp-color-border-subtle: var(--sp-light-color-border-subtle);
+}
+
+.sp-theme-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-color-border-subtle: var(--sp-dark-color-border-subtle);
+    --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-color-border: var(--sp-dark-color-border);
+    --sp-color-border-subtle: var(--sp-dark-color-border-subtle);
+}