sunpeak 0.4.4 → 0.5.3

package/dist/mcp/types.d.ts

@@ -1,74 +1,28 @@
 import { Resource, Tool } from '@modelcontextprotocol/sdk/types.js';
 /**
- * Supported MCP provider platforms.
+ * MCP CallTool response data (subset used in simulations)
  */
-export declare enum MCPProvider {
-    ChatGPT = "chatgpt"
+export interface SimulationCallToolResult {
+    structuredContent?: Record<string, unknown> | null;
+    _meta?: Record<string, unknown>;
+}
+/**
+ * Simulation configuration for MCP server.
+ * Must include distPath for the built widget file.
+ */
+export interface SimulationWithDist {
+    distPath: string;
+    tool: Tool;
+    resource: Resource;
+    toolCall?: SimulationCallToolResult;
 }
 /**
  * Configuration for the MCP server.
+ * Takes an array of simulations with distPath for each built widget.
  */
 export interface MCPServerConfig {
     name?: string;
     version?: string;
     port?: number;
-    distPath: string;
-    toolName?: string;
-    toolDescription?: string;
-    dummyData?: Record<string, unknown>;
-    provider?: MCPProvider;
-}
-/**
- * Provider-specific metadata for widget descriptors.
- */
-export interface WidgetDescriptorMeta {
-    [key: string]: unknown;
-}
-/**
- * Provider-specific metadata for tool invocations.
- */
-export interface WidgetInvocationMeta {
-    [key: string]: unknown;
-}
-/**
- * Interface for platform-specific MCP provider implementations.
- */
-export interface MCPProviderImplementation {
-    /**
-     * Get metadata for widget descriptors (tools and resources).
-     */
-    getWidgetDescriptorMeta(): WidgetDescriptorMeta;
-    /**
-     * Get metadata for tool invocation responses.
-     */
-    getWidgetInvocationMeta(): WidgetInvocationMeta;
-    /**
-     * Read and wrap the widget content for the platform.
-     * @param distPath - Path to the built widget JS file.
-     * @returns The wrapped HTML content ready for the platform.
-     */
-    readWidgetContent(distPath: string): string;
-    /**
-     * Get the MIME type for widget resources.
-     */
-    getWidgetMimeType(): string;
-    /**
-     * Get the resource URI for the widget.
-     */
-    getWidgetResourceUri(): string;
-    /**
-     * Create the tool definition for the provider.
-     */
-    createTool(config: {
-        name: string;
-        description: string;
-        inputSchema: Tool["inputSchema"];
-    }): Tool;
-    /**
-     * Create the resource definition for the provider.
-     */
-    createResource(config: {
-        name: string;
-        description: string;
-    }): Resource;
+    simulations: SimulationWithDist[];
 }

package/dist/providers/index.d.ts

@@ -1,9 +1,7 @@
 import { WidgetProvider, WidgetGlobals, WidgetAPI } from './types';
 export type { WidgetGlobals, WidgetAPI, WidgetProvider } from './types';
-export { isOpenAiAvailable, getOpenAiProvider } from '../chatgpt/openai-provider';
 /**
- * Detect and return the appropriate provider for the current environment.
- * This function caches the result, so detection only happens once.
+ * Get the detected provider for the current environment.
  *
  * @returns The detected provider, or null if no provider is available.
  */

package/dist/providers/openai/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * OpenAI/ChatGPT provider implementation.
+ * This module provides the OpenAI-specific implementation of the WidgetProvider interface.
+ */
+export { isOpenAiAvailable, getOpenAiProvider } from './provider';
+export type { OpenAiGlobals, OpenAiAPI, CallTool, RequestDisplayMode, RequestModal, NotifyIntrinsicHeight, SetGlobalsEvent, } from './types';
+export { SET_GLOBALS_EVENT_TYPE } from './types';

package/dist/{chatgpt/openai-provider.d.ts → providers/openai/provider.d.ts}

@@ -1,4 +1,4 @@
-import { WidgetProvider, WidgetGlobals, WidgetAPI } from '../providers/types';
+import { WidgetProvider, WidgetGlobals, WidgetAPI } from '../types';
 /**
  * Check if the OpenAI provider is available.
  */

package/dist/{chatgpt/openai-types.d.ts → providers/openai/types.d.ts}

@@ -1,38 +1,9 @@
-export type UnknownObject = Record<string, unknown>;
-export type Theme = 'light' | 'dark';
-export type SafeAreaInsets = {
-    top: number;
-    bottom: number;
-    left: number;
-    right: number;
-};
-export type SafeArea = {
-    insets: SafeAreaInsets;
-};
-export type DeviceType = 'mobile' | 'tablet' | 'desktop' | 'unknown';
-export type UserAgent = {
-    device: {
-        type: DeviceType;
-    };
-    capabilities: {
-        hover: boolean;
-        touch: boolean;
-    };
-};
-export type DisplayMode = 'pip' | 'inline' | 'fullscreen';
+import { UnknownObject, Theme, UserAgent, DisplayMode, ViewMode, View, SafeArea, CallToolResponse } from '../../types/runtime';
 export type RequestDisplayMode = (args: {
     mode: DisplayMode;
 }) => Promise<{
     mode: DisplayMode;
 }>;
-export type ViewMode = 'modal' | 'default';
-export type View = {
-    mode: ViewMode;
-    params?: UnknownObject;
-};
-export type CallToolResponse = {
-    result: string;
-};
 export type CallTool = (name: string, args: Record<string, unknown>) => Promise<CallToolResponse>;
 export type OpenAiGlobals<ToolInput = UnknownObject, ToolOutput = UnknownObject, ToolResponseMetadata = UnknownObject, WidgetState = UnknownObject> = {
     theme: Theme;
@@ -46,14 +17,13 @@ export type OpenAiGlobals<ToolInput = UnknownObject, ToolOutput = UnknownObject,
     toolOutput: ToolOutput | null;
     toolResponseMetadata: ToolResponseMetadata | null;
     widgetState: WidgetState | null;
-    setWidgetState: (state: WidgetState) => Promise<void>;
 };
 export type RequestModal = (args: {
     mode: ViewMode;
     params?: UnknownObject;
 }) => Promise<void>;
 export type NotifyIntrinsicHeight = (height: number) => void;
-export type OpenAiAPI = {
+export type OpenAiAPI<WidgetState = UnknownObject> = {
     callTool: CallTool;
     sendFollowUpMessage: (args: {
         prompt: string;
@@ -64,6 +34,7 @@ export type OpenAiAPI = {
     requestDisplayMode: RequestDisplayMode;
     requestModal: RequestModal;
     notifyIntrinsicHeight: NotifyIntrinsicHeight;
+    setWidgetState: (state: WidgetState) => Promise<void>;
 };
 export declare const SET_GLOBALS_EVENT_TYPE = "openai:set_globals";
 export declare class SetGlobalsEvent extends CustomEvent<{

package/dist/providers/types.d.ts

@@ -1,12 +1,12 @@
-import { UnknownObject, Theme, UserAgent, DisplayMode, SafeArea, View, ViewMode, CallToolResponse } from '../chatgpt/openai-types';
+import { UnknownObject, Theme, UserAgent, DisplayMode, SafeArea, View, ViewMode, CallToolResponse } from '../types/runtime';
 /**
  * Provider-agnostic types for widget runtime environments.
  * These types abstract away the specific host (OpenAI/ChatGPT, etc.)
  */
-export type { UnknownObject, Theme, SafeAreaInsets, SafeArea, DeviceType, UserAgent, DisplayMode, ViewMode, View, CallToolResponse, } from '../chatgpt/openai-types';
+export type { UnknownObject, Theme, SafeAreaInsets, SafeArea, DeviceType, UserAgent, DisplayMode, ViewMode, View, CallToolResponse, } from '../types/runtime';
 /**
  * Global state available from the widget runtime environment.
- * This is a provider-agnostic alias for OpenAiGlobals.
+ * Provider-agnostic interface that abstracts widget globals.
  */
 export type WidgetGlobals<ToolInput = UnknownObject, ToolOutput = UnknownObject, ToolResponseMetadata = UnknownObject, WidgetState = UnknownObject> = {
     theme: Theme;
@@ -20,11 +20,10 @@ export type WidgetGlobals<ToolInput = UnknownObject, ToolOutput = UnknownObject,
     toolOutput: ToolOutput | null;
     toolResponseMetadata: ToolResponseMetadata | null;
     widgetState: WidgetState | null;
-    setWidgetState: (state: WidgetState) => Promise<void>;
 };
 /**
  * API methods available from the widget runtime environment.
- * This is a provider-agnostic alias for OpenAiAPI.
+ * Provider-agnostic interface that abstracts widget API methods.
  */
 export type WidgetAPI = {
     callTool?: (name: string, args: Record<string, unknown>) => Promise<CallToolResponse>;

package/dist/runtime/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Runtime utilities for widget environments.
+ *
+ * This module contains runtime-specific logic like provider detection
+ * that needs to know about concrete provider implementations.
+ */
+export { detectProvider, isProviderAvailable, resetProviderCache, } from './provider-detection';

package/dist/runtime/provider-detection.d.ts

@@ -0,0 +1,17 @@
+import { WidgetProvider } from '../providers/types';
+/**
+ * Detect and return the appropriate provider for the current environment.
+ * This function caches the result, so detection only happens once.
+ *
+ * @returns The detected provider, or null if no provider is available.
+ */
+export declare function detectProvider(): WidgetProvider | null;
+/**
+ * Check if any provider is available.
+ */
+export declare function isProviderAvailable(): boolean;
+/**
+ * Reset the provider detection cache.
+ * Useful for testing or when the environment changes.
+ */
+export declare function resetProviderCache(): void;

package/dist/types/index.d.ts

@@ -1,2 +1,3 @@
-export * from '../chatgpt/openai-types';
+export * from './runtime';
+export * from './simulation';
 export * from '../chatgpt/chatgpt-simulator-types';

package/dist/types/runtime.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Generic runtime types for widget environments.
+ * These types are provider-agnostic and can be used across different widget platforms.
+ */
+export type UnknownObject = Record<string, unknown>;
+export type Theme = 'light' | 'dark';
+export type SafeAreaInsets = {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};
+export type SafeArea = {
+    insets: SafeAreaInsets;
+};
+export type DeviceType = 'mobile' | 'tablet' | 'desktop' | 'unknown';
+export type UserAgent = {
+    device: {
+        type: DeviceType;
+    };
+    capabilities: {
+        hover: boolean;
+        touch: boolean;
+    };
+};
+export type DisplayMode = 'pip' | 'inline' | 'fullscreen';
+export type ViewMode = 'modal' | 'default';
+export type View = {
+    mode: ViewMode;
+    params?: UnknownObject;
+};
+export type CallToolResponse = {
+    result: string;
+};

package/dist/types/simulation.d.ts

@@ -0,0 +1,47 @@
+import { Tool, Resource } from '@modelcontextprotocol/sdk/types.js';
+import { Theme, DisplayMode, UserAgent, SafeArea, View } from './index';
+/**
+ * Core simulation types for development and testing.
+ * These types define how simulations are configured and used in both
+ * the dev simulator and MCP server contexts.
+ */
+import type * as React from 'react';
+/**
+ * Simulation globals that configure the simulator environment.
+ * These values are passed to the mock runtime to set initial values for development/testing.
+ * All fields are optional as simulations can use defaults.
+ * Globals initialized based on tool responses are instead set in SimulationCallToolResult:
+ *  (structuredContent > toolOutput, _meta > toolResponseMetadata)
+ */
+export interface SimulationGlobals {
+    theme?: Theme;
+    userAgent?: UserAgent;
+    locale?: string;
+    maxHeight?: number;
+    displayMode?: DisplayMode;
+    safeArea?: SafeArea;
+    view?: View | null;
+    toolInput?: Record<string, unknown>;
+    widgetState?: Record<string, unknown> | null;
+}
+/**
+ * MCP CallTool response data (subset used in simulations).
+ * Note: toolOutput (structuredContent) and toolResponseMetadata (_meta)
+ * are set here for use by the MCP server as well, not in SimulationGlobals.
+ */
+export interface SimulationCallToolResult {
+    structuredContent?: Record<string, unknown> | null;
+    _meta?: Record<string, unknown>;
+}
+/**
+ * A simulation packages a component with its example data and metadata.
+ * Each simulation represents a complete tool experience in the simulator.
+ */
+export interface Simulation {
+    resourceComponent: React.ComponentType;
+    userMessage?: string;
+    simulationGlobals?: SimulationGlobals;
+    tool: Tool;
+    resource: Resource;
+    toolCall?: SimulationCallToolResult;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sunpeak",
-  "version": "0.4.4",
+  "version": "0.5.3",
   "description": "The MCP App SDK. Quickstart, build, & test your ChatGPT App locally!",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -55,12 +55,12 @@
   "author": "Sunpeak AI",
   "license": "MIT",
   "peerDependencies": {
+    "@openai/apps-sdk-ui": "^0.2.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^0.5.0",
-    "@openai/apps-sdk-ui": "^0.2.0",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.4.0",
     "zod": "^3.23.8"

package/template/README.md

@@ -10,7 +10,7 @@ For an initial overview of your new app and the sunpeak API, refer to the [docum
 pnpm dev
 ```
 
-Edit [./src/components/apps/App.tsx](./src/components/apps/App.tsx) to build your app UI.
+Edit the resource files in [./src/components/resources/](./src/components/resources/) to build your resource UI.
 
 ## Development
 
@@ -40,19 +40,18 @@ pnpm dev
 Test your app directly in ChatGPT using the built-in MCP server:
 
 ```bash
-# 1. Build your app. You must rebuild your app for changes to take effect.
-pnpm build
-
-# 2. Start the MCP server.
+# Start the MCP server (rebuilds and restarts on file changes).
 pnpm mcp
 
-# 3. In another terminal, run a tunnel. For example:
+# In another terminal, run a tunnel. For example:
 ngrok http 6766
 ```
 
 You can then connect to the tunnel forwarding URL at the `/mcp` path from ChatGPT **in developer mode** to see your UI in action: `User > Settings > Apps & Connectors > Create`
 
-Once your app is connected, send `show app` to ChatGPT. Many changes require you to Refresh your app on the same settings modal.
+Once your app is connected, send the name of a tool, like `show counter`, to ChatGPT.
+
+When you make changes to the UI, refresh your app in ChatGPT after the MCP server has finished rebuilding your app: `User > Settings > Apps & Connectors > My App > Refresh`
 
 ## Build & Deploy
 

package/template/dev/main.tsx

@@ -2,11 +2,46 @@ import '../src/styles/globals.css';
 
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { ChatGPTSimulator } from 'sunpeak';
-import { simulations } from '../src/simulations';
+import { ChatGPTSimulator, type Simulation } from 'sunpeak';
+import { SIMULATIONS } from '../src/simulations';
+import * as Resources from '../src/components/resources';
+
+/**
+ * Extract the resource component name from a URI
+ * Example: 'ui://CounterResource.tsx' -> 'CounterResource'
+ */
+function getResourceComponentFromURI(uri: string): React.ComponentType {
+  // Extract component name from URI pattern: ui://ComponentName.tsx
+  const match = uri.match(/^ui:\/\/(.+)\.tsx$/);
+  if (!match) {
+    throw new Error(`Invalid resource URI format: ${uri}. Expected format: ui://ComponentName.tsx`);
+  }
+
+  const componentName = match[1];
+  const component = Resources[componentName as keyof typeof Resources];
+
+  if (!component) {
+    throw new Error(
+      `Resource component "${componentName}" not found. ` +
+      `Make sure it's exported from src/components/resources/index.ts`
+    );
+  }
+
+  return component as React.ComponentType;
+}
+
+// Package the resource component with the simulation
+const simulations: Simulation[] = Object.values(SIMULATIONS).map((simulation) => ({
+  ...simulation,
+  resourceComponent: getResourceComponentFromURI(simulation.resource.uri),
+}));
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <ChatGPTSimulator simulations={simulations} />
+    <ChatGPTSimulator
+      simulations={simulations}
+      appName="Sunpeak App"
+      appIcon="🌄"
+    />
   </StrictMode>
 );

package/template/mcp/server.ts

@@ -1,16 +1,19 @@
 import { runMCPServer } from 'sunpeak/mcp';
 import path from 'path';
 import { fileURLToPath } from 'url';
-import { activeConfig } from '../src/simulations/app-configs.js';
+import { SIMULATIONS } from '../src/simulations';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
+// Add distPath to each simulation for the MCP server
+const simulations = Object.entries(SIMULATIONS).map(([simulationKey, simulation]) => ({
+  ...simulation,
+  distPath: path.resolve(__dirname, `../dist/chatgpt/${simulationKey}.js`),
+}));
+
 runMCPServer({
-  name: activeConfig.appName,
+  name: 'Sunpeak App',
   version: '0.1.0',
-  distPath: path.resolve(__dirname, '../dist/chatgpt/index.js'),
-  toolName: activeConfig.toolName,
-  toolDescription: activeConfig.toolDescription,
-  dummyData: activeConfig.toolOutput ?? {},
+  simulations,
   port: 6766,
 });

package/template/nodemon.json

@@ -0,0 +1,7 @@
+{
+  "watch": ["src"],
+  "ext": "ts,tsx,js,jsx,css",
+  "ignore": ["dist", "node_modules", ".tmp"],
+  "exec": "pnpm build && pnpm mcp:serve",
+  "delay": 500
+}

package/template/package.json

@@ -4,9 +4,10 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "vite build --config vite.config.build.ts",
+    "build": "node scripts/build-all.mjs",
     "dev": "vite --port ${PORT:-6767}",
-    "mcp": "tsx mcp/server.ts",
+    "mcp": "nodemon",
+    "mcp:serve": "tsx mcp/server.ts",
     "lint": "eslint . --ext .ts,.tsx --fix",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
@@ -36,6 +37,7 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
     "jsdom": "^27.2.0",
+    "nodemon": "^3.1.11",
     "postcss": "^8.4.49",
     "prettier": "^3.6.2",
     "react": "^18.3.1",

package/template/scripts/build-all.mjs

@@ -0,0 +1,108 @@
+#!/usr/bin/env node
+import { execSync } from 'child_process';
+import { existsSync, rmSync, readdirSync, readFileSync, writeFileSync, mkdirSync, copyFileSync } from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const distDir = path.join(__dirname, '../dist/chatgpt');
+const buildDir = path.join(__dirname, '../dist/build-output');
+const tempDir = path.join(__dirname, '../.tmp');
+const resourcesDir = path.join(__dirname, '../src/components/resources');
+const templateFile = path.join(__dirname, '../src/index-resource.tsx');
+
+// Clean dist and temp directories
+if (existsSync(distDir)) {
+  rmSync(distDir, { recursive: true });
+}
+if (existsSync(tempDir)) {
+  rmSync(tempDir, { recursive: true });
+}
+mkdirSync(distDir, { recursive: true });
+mkdirSync(tempDir, { recursive: true });
+
+// Auto-discover all resources
+const resourceFiles = readdirSync(resourcesDir)
+  .filter(file => file.endsWith('Resource.tsx'))
+  .map(file => {
+    const resourceName = file.replace('Resource.tsx', '');
+    return {
+      componentName: `${resourceName}Resource`,
+      entry: `.tmp/index-${resourceName.toLowerCase()}.tsx`,
+      output: `${resourceName.toLowerCase()}.js`,
+      buildOutDir: path.join(buildDir, resourceName.toLowerCase()),
+    };
+  });
+
+console.log('Building all tools...\n');
+
+// Read the template
+const template = readFileSync(templateFile, 'utf-8');
+
+// Build all resources (but don't copy yet)
+resourceFiles.forEach(({ componentName, entry, output, buildOutDir }, index) => {
+  console.log(`[${index + 1}/${resourceFiles.length}] Building ${output}...`);
+
+  try {
+    // Create build directory if it doesn't exist
+    if (!existsSync(buildOutDir)) {
+      mkdirSync(buildOutDir, { recursive: true });
+    }
+
+    // Create entry file from template in temp directory
+    const entryContent = template
+      .replace('// RESOURCE_IMPORT', `import { ${componentName} } from '../src/components/resources/${componentName}';`)
+      .replace('// RESOURCE_MOUNT', `createRoot(root).render(<${componentName} />);`);
+
+    const entryPath = path.join(__dirname, '..', entry);
+    writeFileSync(entryPath, entryContent);
+
+    // Build with vite to build directory
+    execSync(
+      `vite build --config vite.config.build.ts`,
+      {
+        stdio: 'inherit',
+        env: {
+          ...process.env,
+          ENTRY_FILE: entry,
+          OUTPUT_FILE: output,
+          OUT_DIR: buildOutDir,
+        },
+      }
+    );
+  } catch (error) {
+    console.error(`Failed to build ${output}`);
+    process.exit(1);
+  }
+});
+
+// Now copy all files from build-output to dist/chatgpt
+console.log('\nCopying built files to dist/chatgpt...');
+resourceFiles.forEach(({ output, buildOutDir }) => {
+  const builtFile = path.join(buildOutDir, output);
+  const destFile = path.join(distDir, output);
+
+  if (existsSync(builtFile)) {
+    copyFileSync(builtFile, destFile);
+    console.log(`✓ Copied ${output}`);
+  } else {
+    console.error(`Built file not found: ${builtFile}`);
+    if (existsSync(buildOutDir)) {
+      console.log(`  Files in ${buildOutDir}:`, readdirSync(buildOutDir));
+    } else {
+      console.log(`  Build directory doesn't exist: ${buildOutDir}`);
+    }
+    process.exit(1);
+  }
+});
+
+// Clean up temp and build directories
+if (existsSync(tempDir)) {
+  rmSync(tempDir, { recursive: true });
+}
+if (existsSync(buildDir)) {
+  rmSync(buildDir, { recursive: true });
+}
+
+console.log('\n✓ All tools built successfully!');
+console.log(`\nBuilt files:`, readdirSync(distDir));

package/template/scripts/validate.mjs

@@ -100,17 +100,26 @@ try {
     throw new Error('pnpm build failed');
   }
   const chatgptDir = join(PROJECT_ROOT, 'dist', 'chatgpt');
-  const builtFile = join(chatgptDir, 'index.js');
-  if (!existsSync(builtFile)) {
-    printError('Missing expected file: ./dist/chatgpt/index.js');
-    process.exit(1);
+  const expectedFiles = ['counter.js', 'albums.js', 'carousel.js'];
+
+  // Check all expected files exist
+  for (const file of expectedFiles) {
+    const filePath = join(chatgptDir, file);
+    if (!existsSync(filePath)) {
+      printError(`Missing expected file: ./dist/chatgpt/${file}`);
+      process.exit(1);
+    }
   }
+
+  // Verify only expected files are present
   const files = readdirSync(chatgptDir);
-  if (files.length !== 1 || files[0] !== 'index.js') {
-    printError(`Unexpected files in ./dist/chatgpt/: ${files.join(', ')}`);
-    printError('Expected only: index.js');
+  const unexpectedFiles = files.filter(f => !expectedFiles.includes(f));
+  if (unexpectedFiles.length > 0) {
+    printError(`Unexpected files in ./dist/chatgpt/: ${unexpectedFiles.join(', ')}`);
+    printError(`Expected only: ${expectedFiles.join(', ')}`);
     process.exit(1);
   }
+
   console.log()
   printSuccess('pnpm build');
 

package/template/src/components/index.ts

@@ -1,4 +1,4 @@
 export * from './card';
 export * from './carousel';
 export * from './album';
-export * from './apps';
+export * from './resources';

package/template/src/components/resources/AlbumsResource.tsx

@@ -0,0 +1,13 @@
+import * as React from "react"
+import { Albums } from "../album/albums"
+
+/**
+ * Production-ready Albums Resource
+ *
+ * This resource displays photo albums in a carousel layout with fullscreen viewing capability.
+ * Can be dropped into any production environment without changes.
+ */
+export const AlbumsResource = React.forwardRef<HTMLDivElement>((_props, ref) => {
+  return <Albums ref={ref} />
+})
+AlbumsResource.displayName = "AlbumsResource"