@peteai/presentation-editor 0.0.6 → 0.0.8

package/dist/components/{presentation-editor → editor}/sidebar/sidebar-text-tab-button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Button from '../../ui/button/button.svelte';
-	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
-	import { HtmlContent } from '../layers/types/html/index.js';
+	import { getEditorContext } from '../editor.svelte.js';
+	import { HtmlContent } from '../layers/types/text/index.js';
 	import type { DraggedHtml } from '../types.js';
 
 	interface Props {
@@ -12,7 +12,7 @@
 
 	let ref: HTMLDivElement;
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	let dragging = $state(false);
 
@@ -64,13 +64,13 @@
 
 	const createLayer = () => {
 		const rect = ref.getBoundingClientRect();
-		const layer = editor.buildHtmlLayer({
+		const layer = editor.buildTextLayer({
 			width: rect.width,
 			height: rect.height,
 			scale,
 			html,
 		});
-		editor.addLayers(editor.activeSlide.id, layer);
+		editor.addLayers(editor.activePage.id, layer);
 	};
 </script>
 

package/dist/components/{presentation-editor → editor}/sidebar/sidebar-text-tab.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import TextIcon from 'lucide-svelte/icons/type';
+	import TextIcon from '@lucide/svelte/icons/type';
 	import Button from '../../ui/button/button.svelte';
-	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
+	import { getEditorContext } from '../editor.svelte.js';
 	import { buildParagraphHtml } from '../utils.js';
 	import SidebarTextTabButton from './sidebar-text-tab-button.svelte';
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	const createTextBox = () => {
 		const fontSize = 80 / 0.75;
 		const lineHeight = 1;
-		const layer = editor.buildHtmlLayer({
+		const layer = editor.buildTextLayer({
 			html: buildParagraphHtml({
 				text: 'Your paragraph text',
 				fontSize,
@@ -23,7 +23,7 @@
 			width: 1280,
 			height: fontSize * lineHeight,
 		});
-		editor.addLayers(editor.activeSlide.id, layer);
+		editor.addLayers(editor.activePage.id, layer);
 	};
 
 	const defaultTextButtons = [

package/dist/components/{presentation-editor → editor}/sidebar/sidebar-uploads-tab.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import CloudUploadIcon from 'lucide-svelte/icons/cloud-upload';
-	import ImageIcon from 'lucide-svelte/icons/image';
+	import CloudUploadIcon from '@lucide/svelte/icons/cloud-upload';
+	import ImageIcon from '@lucide/svelte/icons/image';
 	import { Button, buttonVariants } from '../../ui/button/index.js';
 	import * as Dialog from '../../ui/dialog/index.js';
 	import { Input } from '../../ui/input/index.js';
 	import { Label } from '../../ui/label/index.js';
 	import UploadsImage from './uploads-image.svelte';
 	import { checkImage } from '../utils.js';
-	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
+	import { getEditorContext } from '../editor.svelte.js';
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	let open = $state(false);
 	let url = $state('');

package/dist/components/{presentation-editor → editor}/sidebar/sidebar-wrapper.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import XIcon from 'lucide-svelte/icons/x';
+	import XIcon from '@lucide/svelte/icons/x';
 	import { Button } from '../../ui/button/index.js';
-	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
+	import { getEditorContext } from '../editor.svelte.js';
 
 	interface Props {
 		name: string;
@@ -10,7 +10,7 @@
 
 	let { name, children }: Props = $props();
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 </script>
 
 <div class="flex h-full select-none flex-col gap-2">
@@ -21,5 +21,7 @@
 		</Button>
 	</div>
 
-	{@render children?.()}
+	<div class="flex flex-1 flex-col gap-2 overflow-y-auto">
+		{@render children?.()}
+	</div>
 </div>

package/dist/components/{presentation-editor → editor}/sidebar/sidebar.svelte

@@ -1,17 +1,22 @@
 <script lang="ts">
-	import type { Icon as LucideIcon } from 'lucide-svelte';
-	import TextIcon from 'lucide-svelte/icons/type';
-	import UploadIcon from 'lucide-svelte/icons/cloud-upload';
+	import type { Icon as LucideIcon } from '@lucide/svelte';
+	import TextIcon from '@lucide/svelte/icons/type';
+	import UploadIcon from '@lucide/svelte/icons/cloud-upload';
 	import Button from '../../ui/button/button.svelte';
 	import SidebarTextTab from './sidebar-text-tab.svelte';
 	import SidebarUploadsTab from './sidebar-uploads-tab.svelte';
-	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
+	import type { Editor } from '../editor.svelte.js';
 	import type { ActiveSidebarTab } from '../types.js';
-	import PositionSlidebar from './position-slidebar.svelte';
+	import PositionSidebar from './position-sidebar.svelte';
 	import { ColorSidebar } from './color-sidebar/index.js';
 	import { FontSidebar } from './font-sidebar/index.js';
+	import ImageCropSidebar from './image-crop-sidebar.svelte';
 
-	const editor = getPresentationEditorContext();
+	interface Props {
+		editor: Editor;
+	}
+
+	const { editor }: Props = $props();
 
 	const tabs: { id: ActiveSidebarTab; name: string; icon: typeof LucideIcon }[] = [
 		// {
@@ -58,13 +63,15 @@
 		{/each}
 	</div>
 
-	{#if editor.activeSidebarPopup || editor.activeSidebarTab}
+	{#if editor.activeSidebarPopup || editor.activeSidebarTab || editor.imageCropLayer}
 		<div class="bg-background h-full w-80 shrink-0 overflow-y-auto border-r border-gray-200 p-2">
-			{#if editor.activeSidebarPopup === 'position'}
-				<PositionSlidebar />
+			{#if editor.imageCropLayer}
+				<ImageCropSidebar layer={editor.imageCropLayer} />
+			{:else if editor.activeSidebarPopup === 'position'}
+				<PositionSidebar />
 			{:else if editor.activeSidebarPopup === 'font'}
 				<FontSidebar />
-			{:else if editor.activeSidebarPopup}
+			{:else if editor.activeSidebarPopup?.indexOf('Color')}
 				<ColorSidebar />
 			{:else if editor.activeSidebarTab === 'text'}
 				<SidebarTextTab />

package/dist/components/editor/sidebar/sidebar.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Editor } from '../editor.svelte.js';
+interface Props {
+    editor: Editor;
+}
+declare const Sidebar: import("svelte").Component<Props, {}, "">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/components/{presentation-editor → editor}/sidebar/uploads-image.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
+	import { getEditorContext } from '../editor.svelte.js';
 
 	let { image } = $props();
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	const height = 80;
 	const initialScale = height / image.height;
@@ -62,7 +62,7 @@
 	};
 
 	const createLayer = () => {
-		editor.addLayers(editor.activeSlide.id, editor.buildImageLayer({ image }));
+		editor.addLayers(editor.activePage.id, editor.buildImageLayer({ image }));
 	};
 </script>
 

package/dist/components/editor/types.d.ts

@@ -0,0 +1,283 @@
+import { type JSONContent } from '@tiptap/core';
+import type { HTMLAttributes } from 'svelte/elements';
+export type ActiveSidebarTab = 'text' | 'uploads';
+type Colored = 'background' | 'text' | 'border';
+export type ActiveSidebarPopup = 'position' | 'font' | `${Colored}Color`;
+export type Fonts = {
+    [key: string]: {
+        type: string;
+    };
+};
+export type Image = {
+    id: string;
+    src: string;
+    width: number;
+    height: number;
+};
+export type CursorTooltip = {
+    x: number;
+    y: number;
+    text: string;
+};
+export interface Transform {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotate: number;
+    scale: number;
+}
+interface BaseLayer extends Transform {
+    id: string;
+    groupId: string | null;
+    opacity: number;
+    sortOrder: number;
+    locked: boolean;
+}
+export interface TextLayer extends BaseLayer {
+    type: 'text';
+    html: JSONContent;
+}
+export type LayerBorder = {
+    borderStyle: 'solid' | 'dashed' | 'dotted';
+    borderWidth: number;
+    borderColor: string;
+};
+export interface ImageLayer extends BaseLayer, LayerBorder {
+    type: 'image';
+    image: Image;
+    imageRotate: number;
+    offsetX: number;
+    offsetY: number;
+    cornerRadius: number;
+    flipX: boolean;
+    flipY: boolean;
+}
+export type SimpleLayer = TextLayer | ImageLayer;
+export interface GroupLayer extends Omit<BaseLayer, 'groupId'> {
+    type: 'group';
+}
+export type Layer = GroupLayer | SimpleLayer;
+export type Gradient = {
+    type: 'linear90' | 'linear180' | 'linear135' | 'radialCenter' | 'radialTopLeft';
+    colors: string[];
+};
+export type BackgroundImage = Pick<ImageLayer, 'opacity' | 'scale' | 'image' | 'imageRotate' | 'offsetX' | 'offsetY' | 'flipX' | 'flipY'>;
+export type Page = {
+    id: string;
+    backgroundColor: string | null;
+    backgroundImage: BackgroundImage | null;
+    backgroundLocked: boolean;
+    layers: Layer[];
+    sortOrder: number;
+    locked: boolean;
+};
+export type ActiveAction = {
+    id: string;
+    type: string;
+    cursor?: string;
+    tooltip?: CursorTooltip | null;
+};
+interface BaseLayerGuide {
+    id: string;
+    type: string;
+    style: 'solid' | 'dashed' | 'dotted';
+}
+export interface LineLayerGuide extends BaseLayerGuide {
+    type: 'horizontal' | 'vertical';
+    x: number;
+    y: number;
+    length: number;
+}
+export interface BoxLayerGuide extends BaseLayerGuide {
+    type: 'box';
+    inset: number;
+}
+export type ActiveLayerGuide = LineLayerGuide | BoxLayerGuide;
+export type TextLayerInitial = {
+    layer: {
+        initial: TextLayer;
+        state: TextLayer;
+    };
+    groupLayer?: {
+        initial: GroupLayer;
+        state: GroupLayer;
+        childrenInitial: SimpleLayer[];
+        childrenState: SimpleLayer[];
+    };
+};
+interface BaseDragged {
+    x: number;
+    y: number;
+    offsetX: number;
+    offsetY: number;
+    opacity: number;
+    hidden: boolean;
+    sticky: boolean;
+    inside: boolean;
+    initialScale: number;
+    scale: number;
+    customScale?: number | null;
+    ref?: HTMLDivElement;
+}
+export interface DraggedImage extends BaseDragged {
+    image: ImageLayer['image'];
+}
+export interface DraggedHtml extends BaseDragged {
+    html: TextLayer['html'];
+}
+export type Dragged = DraggedHtml | DraggedImage;
+interface BaseEditorEvent {
+    type: string;
+    data: object;
+}
+interface EditorPageAddEvent extends BaseEditorEvent {
+    type: 'pageAdd';
+    data: {
+        page: Page;
+    };
+}
+interface EditorPageUpdateEvent extends BaseEditorEvent {
+    type: 'pageUpdate';
+    data: {
+        pageId: Page['id'];
+        diff: {
+            [key: string]: any;
+        };
+    };
+}
+interface EditorPageRemoveEvent extends BaseEditorEvent {
+    type: 'pageRemove';
+    data: {
+        pageId: Page['id'];
+    };
+}
+interface EditorBackgroundImageAddEvent extends BaseEditorEvent {
+    type: 'backgroundImageAdd';
+    data: {
+        pageId: Page['id'];
+        backgroundImage: BackgroundImage;
+    };
+}
+interface EditorBackgroundImageUpdateEvent extends BaseEditorEvent {
+    type: 'backgroundImageUpdate';
+    data: {
+        pageId: Page['id'];
+        diff: {
+            [key: string]: any;
+        };
+    };
+}
+interface EditorBackgroundImageRemoveEvent extends BaseEditorEvent {
+    type: 'backgroundImageRemove';
+    data: {
+        pageId: Page['id'];
+    };
+}
+interface EditorLayerAddEvent extends BaseEditorEvent {
+    type: 'layerAdd';
+    data: {
+        pageId: Page['id'];
+        layer: Layer;
+    };
+}
+interface EditorLayerUpdateEvent extends BaseEditorEvent {
+    type: 'layerUpdate';
+    data: {
+        pageId: Page['id'];
+        layerId: Layer['id'];
+        layerType: Layer['type'];
+        diff: {
+            [key: string]: any;
+        };
+    };
+}
+interface EditorLayerRemoveEvent extends BaseEditorEvent {
+    type: 'layerRemove';
+    data: {
+        pageId: Page['id'];
+        layerId: Layer['id'];
+        layerType: Layer['type'];
+    };
+}
+export type EditorEvent = EditorPageAddEvent | EditorPageUpdateEvent | EditorPageRemoveEvent | EditorBackgroundImageAddEvent | EditorBackgroundImageUpdateEvent | EditorBackgroundImageRemoveEvent | EditorLayerAddEvent | EditorLayerUpdateEvent | EditorLayerRemoveEvent;
+export type PageAddAction = {
+    type: 'pageAdd';
+    page: Page;
+};
+export type PageRemoveAction = {
+    type: 'pageRemove';
+    page: Page;
+    newPage?: Page;
+};
+export type PageUpdateAction = {
+    type: 'pageUpdate';
+    pageId: Page['id'];
+    undo: object;
+    redo: object;
+};
+export type LayerAddAction = {
+    type: 'layerAdd';
+    pageId: Page['id'];
+    layer: Layer;
+};
+export type LayerRemoveAction = {
+    type: 'layerRemove';
+    pageId: Page['id'];
+    layer: Layer;
+};
+export type LayerUpdateAction = {
+    type: 'layerUpdate';
+    pageId: Page['id'];
+    layer: {
+        id: string;
+        type: string;
+    };
+    undo: object;
+    redo: object;
+};
+export type BackgroundImageAddAction = {
+    type: 'backgroundImageAdd';
+    pageId: Page['id'];
+    backgroundImage: BackgroundImage;
+    previousBackgroundImage: Page['backgroundImage'];
+};
+export type BackgroundImageRemoveAction = {
+    type: 'backgroundImageRemove';
+    pageId: Page['id'];
+    previousBackgroundImage: Page['backgroundImage'];
+};
+export type BackgroundImageUpdateAction = {
+    type: 'backgroundImageUpdate';
+    pageId: Page['id'];
+    undo: object;
+    redo: object;
+};
+export type HistoryAction = PageAddAction | PageUpdateAction | PageRemoveAction | LayerAddAction | LayerRemoveAction | LayerUpdateAction | BackgroundImageAddAction | BackgroundImageRemoveAction | BackgroundImageUpdateAction;
+interface BaseOptions {
+    fonts?: Fonts;
+    images?: Image[];
+    width?: number;
+    height?: number;
+    generateId?: () => string;
+    loadFont?: (family: string) => Promise<void>;
+    searchFonts?: (q: string) => string[];
+    onImageUpload?: (file: File) => Promise<Image>;
+    onUpdate?: (events: EditorEvent[], pages: Page[]) => void;
+}
+interface MultipleModeOption extends BaseOptions {
+    mode?: 'multiple';
+    pages?: Page[];
+}
+interface SingleModeOption extends BaseOptions {
+    mode: 'single';
+    page?: Page;
+}
+export type EditorOptions = MultipleModeOption | SingleModeOption;
+export interface PageOptions extends HTMLAttributes<HTMLDivElement> {
+    page: Page;
+    thumbScale?: number;
+    fonts?: Fonts;
+    loadFont?: (family: string) => Promise<void>;
+}
+export {};

package/dist/components/{presentation-editor → editor}/utils.d.ts

@@ -1,9 +1,9 @@
-import type { Gradient, Slide } from './types.js';
+import type { Gradient, Page } from './types.js';
 export declare const arraysEqual: (a: unknown[], b: unknown[]) => boolean;
 export declare const checkImage: (url: string) => Promise<HTMLImageElement>;
 export declare function gradientToString(gradient: Gradient): string;
 export declare function stringToGradient(value: string): Gradient;
-export declare const getSlides: () => Slide[];
+export declare const getPages: () => Page[];
 export declare const buildParagraphHtml: ({ text, fontSize, lineHeight, textAlign, uppercase, bold, italic, }: {
     text: string;
     fontSize?: number;
@@ -31,7 +31,7 @@ export declare const buildParagraphHtml: ({ text, fontSize, lineHeight, textAlig
         }[];
     }[];
 };
-export declare const buildHtmlLayerParagraphFields: ({ text }: {
+export declare const buildTextLayerParagraphFields: ({ text }: {
     text: string;
 }) => {
     html: {
@@ -44,11 +44,19 @@ export declare const buildHtmlLayerParagraphFields: ({ text }: {
                 fontSize: number;
                 lineHeight: number;
             };
-            content: {
+            content: ({
+                type: string;
+                content: {
+                    type: string;
+                    text: string;
+                }[];
+                text?: undefined;
+            } | {
                 type: string;
                 text: string;
-            }[];
+                content?: undefined;
+            })[];
         }[];
     };
 };
-export declare const cognitionSlideToJson: (slide: any) => Slide;
+export declare const cognitionPageToJson: (page: any) => Page;