slidecanvas 1.0.5 → 1.0.7

package/README.md

@@ -10,6 +10,9 @@
 - **AI-Powered Editing**: Integrated Gemini AI for smart text manipulation (Shorten, Reframe, Lengthen) with side-by-side controls.
 - **Enterprise-Grade Parsing**: Deep internal processing of XML-based PPTX structures.
 - **Professional Ribbon UI**: A high-density, Microsoft Office-style toolbar layout (120px height) with optimized visibility for all controls.
+- **Slash Commands (`/`)**: A fast, context-aware command menu triggered by typing `/` anywhere on the canvas or in a text box.
+- **AI-Powered Image Generation**: Integrated flow for generating design assets via optional `onGenerateImage` hook, with built-in preview and replacement logic.
+- **AI Suggestion Box**: A side-by-side text refinement UI for reviewing Shorten/Reframe/Lengthen suggestions before applying them.
 - **Smart Actions Group**: Prominent buttons for Present, Export (PPTX), and Delete, with a subtle "Saved" status indicator.
 - **Professional Export**: High-quality `.pptx` generation with support for transparency and layout mapping.
 - **S3 & Remote Support**: Built-in architecture for loading presentations via secure proxy tunnels.
@@ -72,7 +75,9 @@ import { PptEditor } from 'slidecanvas';
 export default function App() {
   const pptxUrl = "https://example.com/presentations/q1-report.pptx";
   
-  return <PptEditor url={pptxUrl} />;
+  // Custom proxy endpoint (defaults to undefined, causing direct fetch)
+  // If your app has an API route at /api/proxy, specify it here:
+  return <PptEditor url={pptxUrl} proxyUrl="/api/proxy" />;
 }
 ```
 
@@ -98,9 +103,34 @@ export async function GET(request: NextRequest) {
 }
 ```
 
-### 3. Enabling AI Features
+> [!IMPORTANT]
+> To use the custom proxy above, pass its path to the `proxyUrl` prop in the `PptEditor` component (e.g., `<PptEditor proxyUrl="/api/proxy" ... />`).
 
-SlideCanvas comes battery-included with Gemini AI support. To enable smart text actions (Shorten, Reframe, Lengthen), simply pass your Gemini API key to the component:
+### 4. Slash Commands & AI design
+SlideCanvas features a powerful Slash Command system. Type `/` at any time to:
+- **Insert Elements**: Instantly add Text, Images, or Shapes.
+- **AI Actions**: Trigger text transformations or **AI Image Generation** directly at your cursor.
+
+---
+
+### 5. Custom AI Image Generation
+You can integrate your own AI image provider (e.g., DALL-E, Midjourney, or a custom S3-backed service) by passing the `onGenerateImage` prop:
+
+```tsx
+<PptEditor 
+  onGenerateImage={async (prompt) => {
+    const response = await fetch('/api/my-ai', { body: JSON.stringify({ prompt }) });
+    const data = await response.json();
+    return data.s3ImageUrl; // Return a URL string
+  }}
+/>
+```
+
+> [!TIP]
+> When an image is generated, SlideCanvas provides a professional **Preview Modal** allowing users to **Insert** as new, **Replace** a selected image (preserving dimensions), or **Discard**.
+
+### 6. Enabling AI Text Refinement
+SlideCanvas comes battery-included with Gemini AI support for text.
 
 ```tsx
 import { PptEditor } from 'slidecanvas';
@@ -251,6 +281,8 @@ async function extractCaptions(fileBuffer: ArrayBuffer) {
 | `appName` | `string` | `"SlideCanvas"` | Brand name shown in the ribbon. |
 | `appBgColor` | `string` | `"#B7472A"` | Primary brand color for the UI. |
 | `geminiApiKey` | `string` | `undefined` | API key for built-in AI text actions. |
+| `onGenerateImage` | `(prompt: string) => Promise<string>` | `undefined` | Custom hook to handle AI image generation. |
+| `proxyUrl` | `string` | `undefined` | Base path for the proxy API (used for PPTX loading and image previews). |
 | `showHomeOnEmpty` | `boolean` | `false` | Shows a "New / Upload" splash if no data provided. |
 | `onChange` | `(pres: Presentation) => void` | `undefined` | Fired on any change to the deck. |
 | `onSourceChange` | `(src, url?) => void` | `undefined` | Fired when the deck origin changes (useful for routing). |

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import React from 'react';
 
 type ElementType = 'text' | 'image' | 'shape';
-type ShapeType = 'rect' | 'ellipse' | 'triangle' | 'line';
+type ShapeType = 'rect' | 'ellipse' | 'triangle' | 'rightTriangle' | 'rhombus' | 'parallelogram' | 'trapezoid' | 'pentagon' | 'hexagon' | 'heptagon' | 'octagon' | 'heart' | 'smiley' | 'sun' | 'moon' | 'arrowRight' | 'arrowLeft' | 'arrowUp' | 'arrowDown' | 'arrowLeftRight' | 'arrowUpDown' | 'star4' | 'star5' | 'star6' | 'star8' | 'cloud' | 'lightning' | 'plus' | 'minus' | 'multiply' | 'divide' | 'equal' | 'line';
 type PresentationSource = 'scratch' | 'uploaded' | 'url';
 interface BaseElement {
     id: string;
@@ -60,6 +60,8 @@ interface PptEditorProps {
     showHomeOnEmpty?: boolean;
     initialSource?: PresentationSource;
     onSourceChange?: (source: PresentationSource, url?: string) => void;
+    proxyUrl?: string;
+    onGenerateImage?: (prompt: string) => Promise<string>;
 }
 declare const PptEditor: React.FC<PptEditorProps>;
 

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 
 type ElementType = 'text' | 'image' | 'shape';
-type ShapeType = 'rect' | 'ellipse' | 'triangle' | 'line';
+type ShapeType = 'rect' | 'ellipse' | 'triangle' | 'rightTriangle' | 'rhombus' | 'parallelogram' | 'trapezoid' | 'pentagon' | 'hexagon' | 'heptagon' | 'octagon' | 'heart' | 'smiley' | 'sun' | 'moon' | 'arrowRight' | 'arrowLeft' | 'arrowUp' | 'arrowDown' | 'arrowLeftRight' | 'arrowUpDown' | 'star4' | 'star5' | 'star6' | 'star8' | 'cloud' | 'lightning' | 'plus' | 'minus' | 'multiply' | 'divide' | 'equal' | 'line';
 type PresentationSource = 'scratch' | 'uploaded' | 'url';
 interface BaseElement {
     id: string;
@@ -60,6 +60,8 @@ interface PptEditorProps {
     showHomeOnEmpty?: boolean;
     initialSource?: PresentationSource;
     onSourceChange?: (source: PresentationSource, url?: string) => void;
+    proxyUrl?: string;
+    onGenerateImage?: (prompt: string) => Promise<string>;
 }
 declare const PptEditor: React.FC<PptEditorProps>;