@turnix-co/konva-editor 2.0.1 → 2.0.3

package/README.md

@@ -1,66 +1,31 @@
 # @turnix-co/konva-editor
 
-A powerful, private multi-slide canvas editor built with React, Konva, and Redux. Features drawing tools, media support, recording capabilities, and more.
+A powerful multi-slide canvas editor built with React and Konva. Create interactive presentations, whiteboards, and educational content with drawing, media, and recording capabilities.
 
-## 🔒 Private Package
+[![npm version](https://badge.fury.io/js/%40turnix-co%2Fkonva-editor.svg)](https://www.npmjs.com/package/@turnix-co/konva-editor)
 
-This package is **private** and only available to authorized Turnix team members via GitHub Packages.
+## Installation
 
-## 📦 Installation
-
-### For Team Members
-
-**Step 1:** Install the package from GitHub Packages:
-```bash
-npm install @turnix-co/konva-editor --registry=https://npm.pkg.github.com --legacy-peer-deps
-```
-
-**Step 2:** Install peer dependencies:
 ```bash
-npm install konva react-konva react-konva-utils
+npm install @turnix-co/konva-editor
 ```
 
-**Why separate?** Konva has platform-specific code (browser vs Node.js). Installing it separately ensures Next.js correctly resolves the browser version and avoids SSR errors.
-
-### Setup Authentication
-
-Contact your team lead for authentication credentials (.npmrc file).
-
-## ⚠️ CRITICAL SETUP REQUIREMENTS
-
-**Before you start**, understand these requirements or features WON'T work:
-
-1. **Layout Container Required**: Components MUST be wrapped in a div with:
-   - `width: '100vw'` and `height: '100vh'`
-   - `display: 'flex'` and `flexDirection: 'column'`
-   - Canvas wrapper needs `flex: 1` and `position: 'relative'`
+### Peer Dependencies
 
-2. **stageRef Required**: For video recording, you MUST:
-   - Create a `stageRef` with `useRef<Konva.Stage | null>(null)`
-   - Pass it to both `<Toolbar stageRef={stageRef} />` and `<Canvas onStageReady={...} />`
+Install the required peer dependencies:
 
-3. **CSS Import Required**: Import the package's CSS in your root layout
-
-❌ **Common Mistakes** (these will break video recording):
-```tsx
-// ❌ WRONG - No layout wrapper, no stageRef
-<ReduxProvider store={store}>
-  <Toolbar />
-  <Canvas />
-  <SlideNavigation />
-</ReduxProvider>
+```bash
+npm install konva react-konva react-konva-utils
 ```
 
-✅ **Correct Setup** (see Quick Start below)
+> **Note:** Konva has platform-specific code (browser vs Node.js). Installing it separately ensures Next.js correctly resolves the browser version and avoids SSR errors.
 
-## 🚀 Quick Start
+## Quick Start
 
 ### 1. Import the CSS styles
 
 **IMPORTANT:** You must import the package's CSS file for components to display properly.
 
-In your root layout or main CSS file (e.g., `app/layout.tsx` or `app/globals.css`):
-
 ```tsx
 // In your layout.tsx or _app.tsx
 import '@turnix-co/konva-editor/styles.css';
@@ -71,11 +36,7 @@ Or in your CSS file:
 @import '@turnix-co/konva-editor/styles.css';
 ```
 
-### 2. Create your editor page with auto-save
-
-**IMPORTANT:** To enable IndexedDB persistence (auto-save), you must call the `useSlidesPersistence()` hook.
-
-**CRITICAL FOR VIDEO RECORDING:** You MUST wrap components in a properly styled container for video recording to work correctly!
+### 2. Create your editor page
 
 ```tsx
 'use client';
@@ -94,7 +55,7 @@ import type Konva from 'konva';
 
 // Wrapper component to load persisted slides
 function PersistenceLoader({ children }: { children: React.ReactNode }) {
-  useSlidesPersistence(); // ← This loads slides from IndexedDB on mount
+  useSlidesPersistence(); // Loads slides from IndexedDB on mount
   return <>{children}</>;
 }
 
@@ -104,17 +65,15 @@ export default function EditorPage() {
   return (
     <ReduxProvider store={store}>
       <PersistenceLoader>
-        {/* CRITICAL: This wrapper is REQUIRED for video recording to work */}
         <div style={{
           width: '100vw',
           height: '100vh',
           display: 'flex',
           flexDirection: 'column',
-          overflow: 'hidden' // Prevents scrollbars
+          overflow: 'hidden'
         }}>
           <Toolbar stageRef={stageRef} />
 
-          {/* CRITICAL: Canvas wrapper needs flex: 1 and position: relative */}
           <div style={{ flex: 1, position: 'relative' }}>
             <Canvas onStageReady={(ref) => { stageRef.current = ref.current; }} />
           </div>
@@ -127,153 +86,70 @@ export default function EditorPage() {
 }
 ```
 
-**Important:**
-- Always add `'use client'` at the top!
-- Call `useSlidesPersistence()` inside `ReduxProvider` to enable auto-save
-- **MUST** have the wrapper div with `width: '100vw'` and `height: '100vh'`
-- **MUST** pass `stageRef` to both Toolbar and Canvas for recording to work
-
-### 3. Add Publishing (Optional)
-
-The package includes **automatic data persistence via IndexedDB + Redux**:
-- ✅ **Auto-save**: Slides are automatically saved to browser storage on every change
-- ✅ **Auto-restore**: Slides are automatically loaded when the page refreshes
-- ✅ **No backend needed**: Data persists in the user's browser
-
-**How it works:**
-1. `useSlidesPersistence()` hook loads slides from IndexedDB on mount
-2. Redux middleware automatically saves changes to IndexedDB (500ms debounce)
-3. Works completely offline - no server required!
-
-If you want to publish slides to your backend:
-
-```tsx
-'use client';
-
-import { useRef } from 'react';
-import {
-  Canvas,
-  Toolbar,
-  SlideNavigation,
-  PublishButton,
-  ReduxProvider,
-  store,
-  useSlidesPersistence,
-  type PublishProgress,
-  type PublishResponse,
-  type Slide
-} from '@turnix-co/konva-editor';
-import '@turnix-co/konva-editor/styles.css';
-import type Konva from 'konva';
-
-// Wrapper component for persistence
-function PersistenceLoader({ children }: { children: React.ReactNode }) {
-  useSlidesPersistence();
-  return <>{children}</>;
-}
-
-export default function EditorPage() {
-  const stageRef = useRef<Konva.Stage | null>(null);
-
-  // Your custom publish logic
-  const handlePublish = async (
-    slides: Slide[],
-    onProgress?: (progress: PublishProgress) => void
-  ): Promise<PublishResponse> => {
-    // Update progress
-    onProgress?.({
-      current: 0,
-      total: slides.length,
-      status: 'Preparing slides...'
-    });
-
-    // Call your API endpoint
-    const response = await fetch('/api/publish', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ slides })
-    });
-
-    const data = await response.json();
-
-    onProgress?.({
-      current: slides.length,
-      total: slides.length,
-      status: 'Published successfully!'
-    });
-
-    return {
-      success: true,
-      message: 'Slides published successfully!',
-      projectId: data.id,
-      url: data.url
-    };
-  };
+## Features
+
+- **Multi-slide Support** - Create presentations with up to 20 slides
+- **Freehand Drawing** - Smooth pen and brush tools with customizable colors and sizes
+- **Shapes** - Rectangle, circle, triangle, arrow, and line shapes
+- **Text** - Rich text with formatting options
+- **Images** - Drag & drop, resize, rotate with context menu
+- **Videos** - Upload and playback with thumbnail previews
+- **Flashcards** - Interactive flashcard elements
+- **Photo Frames** - Decorative frames with annotation support
+- **Quiz Elements** - Multiple choice, true/false, short answer, long answer, fill-in-the-blanks
+- **Audio Recording** - Record voice notes for individual objects
+- **Screen Recording** - Record entire canvas with audio
+- **Undo/Redo** - Full history management
+- **Auto-save** - Automatic persistence with IndexedDB + Redux
+- **Export** - Export slides as images
+
+## Components
 
-  return (
-    <ReduxProvider store={store}>
-      <PersistenceLoader>
-        {/* CRITICAL: This wrapper is REQUIRED */}
-        <div style={{
-          width: '100vw',
-          height: '100vh',
-          display: 'flex',
-          flexDirection: 'column',
-          overflow: 'hidden'
-        }}>
-          <Toolbar stageRef={stageRef} />
+### Core Components
 
-          <div style={{ flex: 1, position: 'relative' }}>
-            <Canvas onStageReady={(ref) => { stageRef.current = ref.current; }} />
-          </div>
+| Component | Description |
+|-----------|-------------|
+| `Canvas` | Main canvas component with drawing, images, videos, and text |
+| `Toolbar` | Toolbar with drawing tools, colors, and actions |
+| `SlideNavigation` | Multi-slide navigation and management |
+| `ScreenRecorder` | Screen recording functionality |
+| `PublishButton` | Customizable publish button with progress tracking |
+| `EditorRoot` | Root wrapper that scopes styles (optional) |
 
-          <SlideNavigation />
+### Redux Setup
 
-          {/* Add PublishButton with your custom publish function */}
-          <PublishButton
-            onPublish={handlePublish}
-            label="Save to Cloud"
-          />
-        </div>
-      </PersistenceLoader>
-    </ReduxProvider>
-  );
-}
-```
+| Export | Description |
+|--------|-------------|
+| `ReduxProvider` | Redux provider (from react-redux) |
+| `store` | Pre-configured Redux store |
+| `useDispatch` | Typed dispatch hook |
+| `useSelector` | Typed selector hook |
 
-## 📚 Components
+## Critical Setup Requirements
 
-### Core Components
+For all features to work correctly, ensure:
 
-- **`<Canvas />`** - Main canvas component with drawing, images, videos, and text
-- **`<Toolbar />`** - Toolbar with drawing tools, colors, and actions
-- **`<SlideNavigation />`** - Multi-slide navigation and management
-- **`<ScreenRecorder />`** - Screen recording functionality
-- **`<PublishButton />`** - Customizable publish button with progress tracking
+1. **Layout Container**: Components MUST be wrapped in a div with:
+   - `width: '100vw'` and `height: '100vh'`
+   - `display: 'flex'` and `flexDirection: 'column'`
+   - Canvas wrapper needs `flex: 1` and `position: 'relative'`
 
-### Redux Setup
+2. **stageRef Required for Recording**: You MUST:
+   - Create a `stageRef` with `useRef<Konva.Stage | null>(null)`
+   - Pass it to both `<Toolbar stageRef={stageRef} />` and `<Canvas onStageReady={...} />`
 
-- **`ReduxProvider`** - Redux provider (from react-redux)
-- **`store`** - Pre-configured Redux store
+3. **CSS Import Required**: Import the package's CSS in your root layout
 
-## 🎥 Using the Recording Feature
+## Recording Feature
 
-The Toolbar component includes a built-in recording button. To enable it, you need to pass the stage reference from the Canvas component to the Toolbar:
+The Toolbar includes a built-in recording button. To enable it:
 
 ```tsx
 'use client';
 
-import { useState, useRef } from 'react';
-import {
-  Canvas,
-  Toolbar,
-  SlideNavigation,
-  ReduxProvider,
-  store,
-  type CanvasProps,
-  type ToolbarProps
-} from '@turnix-co/konva-editor';
-import Konva from 'konva';
+import { useRef } from 'react';
+import { Canvas, Toolbar, SlideNavigation, ReduxProvider, store } from '@turnix-co/konva-editor';
+import type Konva from 'konva';
 
 export default function EditorPage() {
   const stageRef = useRef<Konva.Stage | null>(null);
@@ -281,18 +157,10 @@ export default function EditorPage() {
   return (
     <ReduxProvider store={store}>
       <div style={{ width: '100vw', height: '100vh', display: 'flex', flexDirection: 'column' }}>
-        {/* Pass stageRef to Toolbar to enable recording */}
         <Toolbar stageRef={stageRef} />
-
         <div style={{ flex: 1, position: 'relative' }}>
-          {/* Canvas provides the stageRef via onStageReady callback */}
-          <Canvas
-            onStageReady={(ref) => {
-              stageRef.current = ref.current;
-            }}
-          />
+          <Canvas onStageReady={(ref) => { stageRef.current = ref.current; }} />
         </div>
-
         <SlideNavigation />
       </div>
     </ReduxProvider>
@@ -300,259 +168,181 @@ export default function EditorPage() {
 }
 ```
 
-**Key points:**
-1. Create a `stageRef` using `useRef<Konva.Stage | null>(null)`
-2. Pass the `stageRef` to the `<Toolbar>` component
-3. Use the `onStageReady` callback on `<Canvas>` to populate the stageRef
-4. **IMPORTANT**: Wrap Canvas in a container with `flex: 1` and `position: 'relative'`
-5. **IMPORTANT**: The parent container MUST have `width: '100vw'` and `height: '100vh'` for recorded videos to display in full screen
-6. The recording button in the Toolbar will now work correctly
-
-Alternatively, you can handle recording externally:
-
-```tsx
-'use client';
-
-import { useState, useRef } from 'react';
-import {
-  Canvas,
-  Toolbar,
-  ScreenRecorder,
-  ReduxProvider,
-  store
-} from '@turnix-co/konva-editor';
-import Konva from 'konva';
-
-export default function EditorPage() {
-  const stageRef = useRef<Konva.Stage | null>(null);
-  const [showRecorder, setShowRecorder] = useState(false);
-
-  const handleRecordingComplete = (videoBlob: Blob, thumbnailDataUrl: string) => {
-    // Handle the recorded video
-    console.log('Recording completed', videoBlob);
-  };
-
-  return (
-    <ReduxProvider store={store}>
-      <div style={{ width: '100vw', height: '100vh' }}>
-        {/* Toolbar with custom recording handler */}
-        <Toolbar
-          onScreenRecord={() => setShowRecorder(true)}
-        />
-
-        <Canvas
-          onStageReady={(ref) => {
-            stageRef.current = ref.current;
-          }}
-        />
-
-        {/* External ScreenRecorder component */}
-        {showRecorder && (
-          <ScreenRecorder
-            onClose={() => setShowRecorder(false)}
-            stageRef={stageRef}
-            onRecordingComplete={handleRecordingComplete}
-          />
-        )}
-      </div>
-    </ReduxProvider>
-  );
-}
-```
-
-## 🎨 Features
-
-- ✏️ **Drawing tools** - Pen and eraser with customizable colors and sizes
-- 🖼️ **Image support** - Drag & drop, resize, rotate with context menu
-- 🎥 **Video support** - Upload and playback with thumbnail previews
-- 📝 **Text elements** - Add and edit text on canvas
-- 🎙️ **Audio recording** - Record voice notes for individual objects
-- 📹 **Screen recording** - Record entire canvas with audio
-- 📊 **Multi-slide presentations** - Create up to 20 slides
-- ↩️ **Undo/Redo** - Full history management
-- 💾 **Auto-save** - Automatic persistence with IndexedDB + Redux
-- 📤 **Export** - Export slides as images
-- 🚀 **Publishing** - Customizable publish button with progress tracking
+## Publishing
 
-## 🔧 Advanced Usage
+### Auto-save (Built-in)
 
-### Custom Actions
+The package includes automatic data persistence via IndexedDB + Redux:
+- Slides are automatically saved to browser storage on every change
+- Slides are automatically loaded when the page refreshes
+- Works completely offline - no server required
 
-```tsx
-import { useDispatch, addImage, setTool } from '@turnix/konva-editor';
-
-function CustomControls() {
-  const dispatch = useDispatch();
-
-  const handleAddImage = () => {
-    dispatch(addImage({
-      id: 'custom-id',
-      src: 'https://example.com/image.jpg',
-      x: 100,
-      y: 100,
-      width: 200,
-      height: 200,
-    }));
-  };
+### Custom Publishing
 
-  return <button onClick={handleAddImage}>Add Image</button>;
-}
-```
-
-### TypeScript Support
-
-Full TypeScript support with exported types:
+Add a publish button to save to your backend:
 
 ```tsx
-import type { RootState, ImageElement, CanvasState } from '@turnix/konva-editor';
-```
-
-## 📖 API Reference
-
-### PublishButton Props
-
-```tsx
-interface PublishButtonProps {
-  // Custom publish function (required)
-  onPublish?: (
-    slides: Slide[],
-    onProgress?: (progress: PublishProgress) => void
-  ) => Promise<PublishResponse>;
-
-  // Custom button label (optional, default: "Publish Slides")
-  label?: string;
-
-  // Custom className for positioning/styling (optional)
-  className?: string;
-}
-
-interface PublishProgress {
-  current: number;    // Current progress (e.g., 5)
-  total: number;      // Total items (e.g., 10)
-  status: string;     // Status message (e.g., "Uploading...")
-}
+import {
+  PublishButton,
+  type PublishProgress,
+  type PublishResponse,
+  type Slide
+} from '@turnix-co/konva-editor';
 
-interface PublishResponse {
-  success: boolean;   // Whether publish succeeded
-  message: string;    // Success/error message
-  projectId?: string; // Optional: ID from your backend
-  url?: string;       // Optional: URL to published project
-}
-```
+const handlePublish = async (
+  slides: Slide[],
+  onProgress?: (progress: PublishProgress) => void
+): Promise<PublishResponse> => {
+  onProgress?.({ current: 0, total: slides.length, status: 'Preparing...' });
 
-**Example API Endpoint** (`app/api/publish/route.ts`):
-```tsx
-import { NextRequest, NextResponse } from 'next/server';
+  const response = await fetch('/api/publish', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ slides })
+  });
 
-export async function POST(request: NextRequest) {
-  const { slides } = await request.json();
+  const data = await response.json();
 
-  // Save to your database
-  const project = await db.project.create({
-    data: {
-      slides: JSON.stringify(slides),
-      createdAt: new Date(),
-    }
-  });
+  return {
+    success: true,
+    message: 'Published successfully!',
+    projectId: data.id,
+    url: data.url
+  };
+};
 
-  return NextResponse.json({
-    id: project.id,
-    url: `/projects/${project.id}`,
-  });
-}
+// In your component:
+<PublishButton onPublish={handlePublish} label="Save to Cloud" />
 ```
 
-### Redux Actions
+## Redux Actions
 
-**Canvas Actions:**
-- `addImage(payload)` - Add image to canvas
-- `addVideo(payload)` - Add video to canvas
-- `addText(payload)` - Add text to canvas
-- `clearCanvas()` - Clear current slide
-- `undo()` - Undo last action
-- `redo()` - Redo undone action
-- `deleteElement(id)` - Delete element by ID
-
-**Slide Actions:**
+### Slide Management
 - `addSlide()` - Create new slide
 - `deleteSlide(id)` - Delete slide
 - `setCurrentSlide(id)` - Switch to slide
 - `duplicateSlide(id)` - Duplicate slide
+- `reorderSlides(payload)` - Reorder slides
+- `setBackgroundColor(color)` - Set slide background
+- `loadSlides(slides)` - Load slides from data
+
+### Elements
+- `addText`, `updateText`, `deleteText`, `duplicateText`
+- `addShape`, `updateShape`, `deleteShape`, `duplicateShape`
+- `addImage`, `updateImage`, `deleteImage`, `duplicateImage`
+- `addVideo`, `updateVideo`, `deleteVideo`, `duplicateVideo`
+- `addFlashcard`, `updateFlashcard`, `deleteFlashcard`
+- `addPhotoFrame`, `updatePhotoFrame`, `deletePhotoFrame`
+- `addMultipleChoice`, `addTrueFalse`, `addShortAnswer`, `addLongAnswer`, `addFillInTheBlanks`
+
+### Drawing
+- `addLine`, `removeLine`, `updateLastLine`
+- `setLines`, `deleteLineById`, `duplicateLine`
+
+### Canvas Operations
+- `clearCanvas()` - Clear current slide
+- `undo()` - Undo last action
+- `redo()` - Redo undone action
+- `bringToFront(id)`, `sendToBack(id)` - Layer ordering
 
-**Toolbar Actions:**
+### Toolbar Actions
 - `setTool(tool)` - Set active tool ('pen' | 'eraser' | 'text')
 - `setPenColor(color)` - Set pen color
 - `setStrokeWidth(width)` - Set stroke width
 
-### Utilities
+### Selectors
+- `selectCurrentSlide` - Get current slide
+- `selectAllSlides` - Get all slides
+- `selectCurrentSlideId` - Get current slide ID
+- `selectCanAddSlide` - Check if can add more slides
+- `selectSlideById(id)` - Get slide by ID
 
-- `exportSlideAsImage(slideId)` - Export slide as PNG
-- `exportSlideAsPDF(slideId)` - Export slide as PDF
+## Utilities
 
-## 🏗️ Architecture
+### Export Slides
 
-The package uses:
-- **React 19** for UI
-- **Konva** for canvas rendering
-- **Redux Toolkit** for state management
-- **IndexedDB** for persistence
-- **TypeScript** for type safety
+```tsx
+import { exportSlideAsImage, exportSlideAsBlob, getSlideDataURL } from '@turnix-co/konva-editor';
 
-## 🔐 Security
+// Export as downloadable image
+await exportSlideAsImage(stageRef, { pixelRatio: 2 });
 
-⚠️ **This is a private package.** Do not:
-- Share authentication credentials
-- Publish package code publicly
-- Include in public repositories
+// Get as Blob for upload
+const blob = await exportSlideAsBlob(stageRef, { format: 'png' });
 
-## 📝 License
+// Get as data URL
+const dataUrl = await getSlideDataURL(stageRef);
+```
 
-UNLICENSED - Private and proprietary software for Turnix team use only.
+### Line Simplification
 
-## 🆘 Support
+Reduce payload size by simplifying freehand lines:
 
-For issues or questions, contact the Turnix development team.
+```tsx
+import { simplifyLines, getCompressionStats } from '@turnix-co/konva-editor';
 
-## 🐛 Troubleshooting
+// Simplify all lines with tolerance (higher = more compression)
+const simplified = simplifyLines(lines, 3.0);
 
-### Recorded Video Not Displaying Full Screen
+// Get compression statistics
+const stats = getCompressionStats(originalPoints, simplifiedPoints);
+console.log(`Reduced by ${stats.reduction}`);
+```
 
-If your recorded video doesn't display in full screen when played:
+## TypeScript Support
 
-1. **Check Container Styling**: Ensure the Canvas is wrapped in a container that fills the viewport:
-   ```tsx
-   <div style={{ width: '100vw', height: '100vh', display: 'flex', flexDirection: 'column' }}>
-     <Toolbar stageRef={stageRef} />
-     <div style={{ flex: 1, position: 'relative' }}>
-       <Canvas onStageReady={(ref) => stageRef.current = ref.current} />
-     </div>
-   </div>
-   ```
+Full TypeScript support with exported types:
 
-2. **Verify stageRef is Passed**: Make sure you're passing the `stageRef` to the Toolbar component:
-   ```tsx
-   <Toolbar stageRef={stageRef} />
-   ```
+```tsx
+import type {
+  Slide,
+  Line,
+  TextElement,
+  Shape,
+  ImageElement,
+  VideoElement,
+  FlashcardElement,
+  PhotoFrameElement,
+  MultipleChoice,
+  TrueFalse,
+  ShortAnswer,
+  LongAnswer,
+  FillInTheBlanks,
+  CanvasProps,
+  ToolbarProps,
+  EditorRootProps,
+  ExportOptions,
+  PublishProgress,
+  PublishResponse,
+  RootState,
+  AppDispatch,
+} from '@turnix-co/konva-editor';
+```
 
-3. **Check onStageReady Callback**: Ensure the Canvas component's `onStageReady` callback is properly setting the stageRef:
-   ```tsx
-   <Canvas onStageReady={(ref) => { stageRef.current = ref.current; }} />
-   ```
+## Troubleshooting
 
-4. **No Fixed Dimensions**: Avoid setting fixed width/height on the Canvas container. Use `flex: 1` instead to allow it to fill available space.
+### Recorded Video Not Displaying Full Screen
 
-### Download and Re-record Buttons Not Visible
+1. **Check Container Styling**: Ensure Canvas is wrapped in a container with `width: '100vw'` and `height: '100vh'`
+2. **Verify stageRef**: Make sure `stageRef` is passed to both Toolbar and Canvas
+3. **Use flex: 1**: Canvas container should use `flex: 1` instead of fixed dimensions
 
-After recording stops, you should see a preview dialog with three buttons:
-- **Add to Canvas** - Adds the video to the canvas (clears existing content)
-- **Download** - Downloads the video file locally
-- **Re-record** - Discards the recording and starts over
+### Styles Not Applied
 
-If you don't see these buttons, ensure you're using version `1.3.3` or later:
-```bash
-npm install @turnix-co/konva-editor@latest --registry=https://npm.pkg.github.com
-```
+1. Make sure you imported `@turnix-co/konva-editor/styles.css`
+2. Wrap components in `EditorRoot` if you have CSS conflicts
+
+### SSR Errors
+
+If you see SSR errors with Konva:
+1. Make sure your component has `'use client'` directive
+2. Install Konva peer dependencies separately: `npm install konva react-konva react-konva-utils`
+
+## License
+
+UNLICENSED - Proprietary software by Turnix
 
----
+## Support
 
-**Built with ❤️ by the Turnix team**
+For issues and feature requests, please visit:
+https://github.com/turnix-co/schoopla-konva-editor/issues