@peteai/presentation-editor 0.0.9 → 0.0.10

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

@@ -7,9 +7,10 @@
 	import SidebarUploadsTab from './sidebar-uploads-tab.svelte';
 	import type { Editor } from '../editor.svelte.js';
 	import type { ActiveSidebarTab } from '../types.js';
-	import PositionSidebar from './position-sidebar.svelte';
+	import { PositionSidebar } from './position-sidebar/index.js';
 	import { ColorSidebar } from './color-sidebar/index.js';
 	import { FontSidebar } from './font-sidebar/index.js';
+	import { TransitionSidebar } from './transition-sidebar/index.js';
 	import ImageCropSidebar from './image-crop-sidebar.svelte';
 
 	interface Props {
@@ -64,19 +65,25 @@
 	</div>
 
 	{#if editor.activeSidebarPopup || editor.activeSidebarTab || editor.imageCropLayer}
-		<div class="h-full w-80 shrink-0 overflow-y-auto border-r border-gray-200 bg-background p-2">
+		<div class="h-full w-80 shrink-0 overflow-y-auto border-r border-gray-200">
 			{#if editor.imageCropLayer}
-				<ImageCropSidebar layer={editor.imageCropLayer} />
-			{:else if editor.activeSidebarPopup === 'position'}
-				<PositionSidebar />
-			{:else if editor.activeSidebarPopup === 'font'}
-				<FontSidebar />
-			{:else if editor.activeSidebarPopup?.indexOf('Color')}
-				<ColorSidebar />
-			{:else if editor.activeSidebarTab === 'text'}
-				<SidebarTextTab />
-			{:else if editor.activeSidebarTab === 'uploads'}
-				<SidebarUploadsTab />
+				<ImageCropSidebar {editor} layer={editor.imageCropLayer} />
+			{:else if editor.activeSidebarPopup}
+				{#if editor.activeSidebarPopup === 'position'}
+					<PositionSidebar {editor} />
+				{:else if editor.activeSidebarPopup === 'font'}
+					<FontSidebar {editor} />
+				{:else if editor.activeSidebarPopup.indexOf('Color') > 0}
+					<ColorSidebar {editor} />
+				{:else if editor.activeSidebarPopup === 'transition'}
+					<TransitionSidebar {editor} />
+				{/if}
+			{:else if editor.activeSidebarTab}
+				{#if editor.activeSidebarTab === 'text'}
+					<SidebarTextTab {editor} />
+				{:else if editor.activeSidebarTab === 'uploads'}
+					<SidebarUploadsTab {editor} />
+				{/if}
 			{/if}
 		</div>
 	{/if}

package/dist/components/editor/sidebar/transition-sidebar/index.d.ts

@@ -0,0 +1,2 @@
+import TransitionSidebar from './transition-sidebar.svelte';
+export { TransitionSidebar };

package/dist/components/editor/sidebar/transition-sidebar/index.js

@@ -0,0 +1,2 @@
+import TransitionSidebar from './transition-sidebar.svelte';
+export { TransitionSidebar };

package/dist/components/editor/sidebar/transition-sidebar/transition-sidebar.svelte

@@ -0,0 +1,257 @@
+<script lang="ts">
+	import XIcon from '@lucide/svelte/icons/x';
+	import Button from '../../../ui/button/button.svelte';
+	import type { Editor } from '../../editor.svelte.js';
+	import type {
+		HistoryAction,
+		PageTransition,
+		PageTransitionDirection,
+		PageTransitionFlow,
+	} from '../../types.js';
+	import SidebarWrapper from '../sidebar-wrapper.svelte';
+	import { Slider } from '../../../ui/slider/index.js';
+	import { Input } from '../../../ui/input/index.js';
+	import { createDebouncedCallback } from '../../../../utils.js';
+
+	interface Props {
+		editor: Editor;
+	}
+
+	const { editor }: Props = $props();
+
+	let duration = $derived(editor.activePage.transition?.duration || 500);
+
+	const setDuration = (value: string | number, debounce = false) => {
+		if (!editor.activePage.transition) return;
+
+		value = Number(value);
+		duration = value * 1000;
+
+		if (editor.activePage.transition) {
+			setTransition({ ...editor.activePage.transition, duration }, debounce);
+		}
+	};
+
+	const directions: PageTransitionDirection[] = ['left', 'right', 'up', 'down'];
+	const flows: PageTransitionFlow[] = ['in', 'out'];
+
+	const transitionButtons: { type: string; label: string; getState: () => PageTransition }[] = [
+		{
+			type: 'fade',
+			label: 'Fade',
+			getState: () => ({ type: 'fade', duration }),
+		},
+		{
+			type: 'slide',
+			label: 'Slide',
+			getState: () => ({ type: 'slide', duration, direction: 'left' }),
+		},
+		{
+			type: 'circleWipe',
+			label: 'Circle Wipe',
+			getState: () => ({ type: 'circleWipe', duration, flow: 'in' }),
+		},
+		{
+			type: 'lineWipe',
+			label: 'Line Wipe',
+			getState: () => ({ type: 'lineWipe', duration, direction: 'left' }),
+		},
+		{
+			type: 'stack',
+			label: 'Stack',
+			getState: () => ({ type: 'stack', duration, direction: 'down' }),
+		},
+	];
+
+	let undo: object | null = null;
+
+	const debouncedUpdates = createDebouncedCallback((actions) => {
+		editor.historyPush(actions);
+		undo = null;
+	}, 500);
+
+	const setTransition = (value: PageTransition | null, debounce = false) => {
+		if (!undo) {
+			undo = { transition: $state.snapshot(editor.activePage.transition) };
+		}
+		const action: HistoryAction = {
+			type: 'pageUpdate',
+			pageId: editor.activePage.id,
+			undo,
+			redo: { transition: value },
+		};
+		if (debounce) {
+			debouncedUpdates(action);
+		} else {
+			editor.pageTransitionPreview = value;
+			editor.historyPush(action);
+			undo = null;
+		}
+	};
+
+	const allPagesHaveSameTransition = $derived.by(() => {
+		if (!editor.pages.length) return true;
+
+		const firstPageTransition = editor.pages[0].transition || {};
+		const firstPageTransitionKeys = Object.keys(firstPageTransition);
+		return editor.pages.every((page) => {
+			const transition = page.transition || {};
+
+			const keys = Object.keys(transition);
+			if (keys.length !== firstPageTransitionKeys.length) return false;
+
+			return keys.every(
+				(key) =>
+					key in firstPageTransition &&
+					(transition as Record<string, unknown>)[key] ===
+						(firstPageTransition as Record<string, unknown>)[key],
+			);
+		});
+	});
+
+	const setTransitionToAllPages = () => {
+		const redo = { transition: $state.snapshot(editor.activePage.transition) };
+		editor.historyPush(
+			editor.pages.map((page) => ({
+				type: 'pageUpdate',
+				pageId: page.id,
+				undo: { transition: $state.snapshot(page.transition) },
+				redo,
+			})),
+		);
+	};
+
+	// close sidebar if there is no next page
+	$effect(() => {
+		const nextPage = editor.sortedPages.find((p) => p.sortOrder > editor.activePage.sortOrder);
+		if (!nextPage) {
+			editor.activeSidebarPopup = null;
+		}
+	});
+</script>
+
+<SidebarWrapper name="Transition">
+	<div class="grid grid-cols-3 gap-2 p-2">
+		<Button
+			variant="outline"
+			size="vague"
+			class="aspect-square"
+			active={!editor.activePage.transition}
+			onclick={() => setTransition(null)}
+		>
+			<XIcon />
+		</Button>
+
+		{#each transitionButtons as button}
+			<Button
+				variant="outline"
+				size="vague"
+				class="aspect-square"
+				active={editor.activePage.transition?.type === button.type}
+				onclick={() => setTransition(button.getState())}
+				onmouseenter={() =>
+					(editor.pageTransitionPreview =
+						editor.activePage.transition?.type === button.type
+							? editor.activePage.transition
+							: button.getState())}
+				onmouseleave={() => (editor.pageTransitionPreview = null)}
+			>
+				{button.label}
+			</Button>
+		{/each}
+
+		{#if editor.activePage.transition}
+			{@const transition = editor.activePage.transition}
+			{@const buttonIndex =
+				transitionButtons.findIndex((button) => button.type === transition.type) + 1}
+			{@const rowIndex = Math.floor(buttonIndex / 3) + 1}
+			{@const colIndex = Math.floor(buttonIndex % 3) + 1}
+			<div class="col-span-full" style:grid-row={rowIndex + 1}>
+				<div class="grid grid-cols-3 gap-2">
+					<div
+						class="h-0 w-0 justify-self-center border-b-border"
+						style:border-bottom-width="10px"
+						style:border-left="10px solid transparent"
+						style:border-right="10px solid transparent"
+						style:grid-column="{colIndex} / {colIndex + 1}"
+					></div>
+				</div>
+				<div class="mb-4 rounded-md border border-border p-2">
+					<div class="py-2">
+						<div class="text-sm font-medium">Duration (seconds)</div>
+						<div class="flex items-center gap-2">
+							<div class="grow">
+								<Slider
+									type="single"
+									value={duration / 1000}
+									min={0.1}
+									max={2.5}
+									step={0.01}
+									onValueChange={(value) => setDuration(value, true)}
+								/>
+							</div>
+							<Input
+								class="w-12 bg-transparent p-0 text-center font-semibold leading-none [&::-webkit-inner-spin-button]:appearance-none"
+								inputmode="decimal"
+								placeholder="--"
+								value={duration / 1000}
+								onchange={(e) => setDuration(e.currentTarget.value)}
+							/>
+						</div>
+					</div>
+					{#if ['slide', 'lineWipe', 'circleWipe', 'stack'].includes(transition.type)}
+						<div class="flex flex-col gap-2 py-2">
+							<div class="text-sm font-medium">Direction</div>
+							<div class="grid grid-flow-col gap-2">
+								{#if transition.type === 'slide' || transition.type === 'lineWipe' || transition.type === 'stack'}
+									{#each directions as direction}
+										<Button
+											variant="outline"
+											active={transition.direction === direction}
+											onclick={() => {
+												setTransition({ ...transition, direction });
+											}}
+											onmouseenter={() => {
+												editor.pageTransitionPreview = { ...transition, direction };
+											}}
+											onmouseleave={() => {
+												editor.pageTransitionPreview = null;
+											}}
+										>
+											{direction}
+										</Button>
+									{/each}
+								{:else if transition.type === 'circleWipe'}
+									{#each flows as flow}
+										<Button
+											variant="outline"
+											active={transition.flow === flow}
+											onclick={() => {
+												setTransition({ ...transition, flow });
+											}}
+											onmouseenter={() => {
+												editor.pageTransitionPreview = { ...transition, flow };
+											}}
+											onmouseleave={() => {
+												editor.pageTransitionPreview = null;
+											}}
+										>
+											{flow}
+										</Button>
+									{/each}
+								{/if}
+							</div>
+						</div>
+					{/if}
+				</div>
+			</div>
+		{/if}
+	</div>
+	{#if !allPagesHaveSameTransition}
+		<div class="p-2">
+			<Button class="w-full" variant="outline" onclick={() => setTransitionToAllPages()}>
+				Apply between all pages
+			</Button>
+		</div>
+	{/if}
+</SidebarWrapper>

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

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

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

@@ -1,8 +1,8 @@
 import { type JSONContent } from '@tiptap/core';
-import type { HTMLAttributes } from 'svelte/elements';
+type OptionalKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
 export type ActiveSidebarTab = 'text' | 'uploads';
 type Colored = 'background' | 'text' | 'border';
-export type ActiveSidebarPopup = 'position' | 'font' | `${Colored}Color`;
+export type ActiveSidebarPopup = 'position' | 'font' | `${Colored}Color` | 'transition';
 export type Fonts = {
     [key: string]: {
         type: string;
@@ -63,6 +63,32 @@ export type Gradient = {
     colors: string[];
 };
 export type BackgroundImage = Pick<ImageLayer, 'opacity' | 'scale' | 'image' | 'imageRotate' | 'offsetX' | 'offsetY' | 'flipX' | 'flipY'>;
+interface BasePageTransition {
+    type: string;
+    duration: number;
+}
+export type PageTransitionDirection = 'left' | 'right' | 'up' | 'down';
+export type PageTransitionFlow = 'in' | 'out';
+export interface DirectionPageTransition extends BasePageTransition {
+    direction: PageTransitionDirection;
+}
+interface FadePageTransition extends BasePageTransition {
+    type: 'fade';
+}
+interface SlidePageTransition extends DirectionPageTransition {
+    type: 'slide';
+}
+export interface CircleWipePageTransition extends BasePageTransition {
+    type: 'circleWipe';
+    flow: PageTransitionFlow;
+}
+interface LineWipePageTransition extends DirectionPageTransition {
+    type: 'lineWipe';
+}
+interface StackPageTransition extends DirectionPageTransition {
+    type: 'stack';
+}
+export type PageTransition = FadePageTransition | SlidePageTransition | CircleWipePageTransition | LineWipePageTransition | StackPageTransition;
 export type Page = {
     id: string;
     backgroundColor: string | null;
@@ -71,7 +97,9 @@ export type Page = {
     layers: Layer[];
     sortOrder: number;
     locked: boolean;
+    transition: PageTransition | null;
 };
+export type PageInput = OptionalKeys<Page, "transition">;
 export type ActiveAction = {
     id: string;
     type: string;
@@ -267,15 +295,21 @@ interface BaseOptions {
 }
 interface MultipleModeOption extends BaseOptions {
     mode?: 'multiple';
-    pages?: Page[];
+    pages?: PageInput[];
 }
 interface SingleModeOption extends BaseOptions {
     mode: 'single';
-    page?: Page;
+    page?: PageInput;
 }
 export type EditorOptions = MultipleModeOption | SingleModeOption;
-export interface PageOptions extends HTMLAttributes<HTMLDivElement> {
-    page: Page;
+export interface DesignOptions {
+    pages: PageInput[];
+    thumbScale?: number;
+    fonts?: Fonts;
+    loadFont?: (family: string) => Promise<void>;
+}
+export interface PageOptions {
+    page: PageInput;
     thumbScale?: number;
     fonts?: Fonts;
     loadFont?: (family: string) => Promise<void>;

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

@@ -1,9 +1,9 @@
-import type { Gradient, Page } from './types.js';
+import type { Gradient, PageInput, 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 getPages: () => Page[];
+export declare const getPages: () => PageInput[];
 export declare const buildParagraphHtml: ({ text, fontSize, lineHeight, textAlign, uppercase, bold, italic, }: {
     text: string;
     fontSize?: number;

package/dist/components/editor/utils.js

@@ -426,6 +426,26 @@ const generateBackgroundColor = () => {
         return randomHexColor();
     }
 };
+const generateTransition = () => {
+    const duration = Math.floor(Math.random() * 1000) + 1000;
+    const transitions = [
+        { type: 'fade', duration },
+        { type: 'slide', duration, direction: 'left' },
+        { type: 'circleWipe', duration, flow: 'in' },
+        { type: 'lineWipe', duration, direction: 'left' },
+        { type: 'stack', duration, direction: 'down' },
+    ];
+    const transition = transitions[Math.floor(Math.random() * transitions.length)];
+    if ('direction' in transition) {
+        const directions = ['left', 'right', 'up', 'down'];
+        transition.direction = directions[Math.floor(Math.random() * directions.length)];
+    }
+    if ('flow' in transition) {
+        const flows = ['in', 'out'];
+        transition.flow = flows[Math.floor(Math.random() * flows.length)];
+    }
+    return transition;
+};
 export const cognitionPageToJson = (page) => {
     let sortOrder = 1;
     const layers = [];
@@ -474,5 +494,6 @@ export const cognitionPageToJson = (page) => {
         backgroundLocked: false,
         locked: false,
         layers,
+        transition: generateTransition(),
     };
 };

package/dist/components/ui/button/button.svelte

@@ -23,6 +23,7 @@
 				lg: 'h-11 rounded-md px-8',
 				icon: 'h-10 w-10',
 				'icon-xs': 'h-8 w-8',
+				vague: '',
 			},
 			active: {
 				true: '',
@@ -32,7 +33,7 @@
 			{
 				active: true,
 				variant: 'outline',
-				class: 'border-2 border-primary',
+				class: 'border-primary',
 			},
 			{
 				active: true,

package/dist/components/ui/button/button.svelte.d.ts

@@ -18,6 +18,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         lg: string;
         icon: string;
         'icon-xs': string;
+        vague: string;
     };
     active: {
         true: string;
@@ -39,6 +40,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         lg: string;
         icon: string;
         'icon-xs': string;
+        vague: string;
     };
     active: {
         true: string;
@@ -60,6 +62,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         lg: string;
         icon: string;
         'icon-xs': string;
+        vague: string;
     };
     active: {
         true: string;

package/dist/transitions/circleWipe.d.ts

@@ -0,0 +1,10 @@
+import type { TransitionConfig } from 'svelte/transition';
+export interface CircleWipeParams {
+    duration?: number;
+    easing?: (t: number) => number;
+    x?: string;
+    y?: string;
+    maxRadius?: number;
+    direction?: 'in' | 'out';
+}
+export declare function circleWipe(_node: HTMLElement, { duration, easing, x, y, maxRadius, direction, }?: CircleWipeParams): TransitionConfig;

package/dist/transitions/circleWipe.js

@@ -0,0 +1,16 @@
+export function circleWipe(_node, { duration = 600, easing = (t) => t, x = '50%', y = '50%', maxRadius = 100, direction = 'in', } = {}) {
+    return {
+        duration,
+        easing,
+        css: (t, u) => {
+            const r = (direction === 'in' ? u : t) * maxRadius;
+            const innerColor = direction === 'in' ? 'rgba(0,0,0,1)' : 'rgba(0,0,0,0)';
+            const outerColor = direction === 'in' ? 'rgba(0,0,0,0)' : 'rgba(0,0,0,1)';
+            const mask = `radial-gradient(circle at ${x} ${y}, ${outerColor} ${r}%, ${innerColor} ${r}%)`;
+            return `
+        mask: ${mask};
+        -webkit-mask: ${mask};
+      `;
+        },
+    };
+}

package/dist/transitions/lineWipe.d.ts

@@ -0,0 +1,9 @@
+import type { TransitionConfig } from 'svelte/transition';
+export interface LineWipeParams {
+    duration?: number;
+    easing?: (t: number) => number;
+    x?: string;
+    y?: string;
+    direction?: 'left' | 'right' | 'up' | 'down';
+}
+export declare function lineWipe(_node: HTMLElement, { duration, easing, direction }?: LineWipeParams): TransitionConfig;

package/dist/transitions/lineWipe.js

@@ -0,0 +1,17 @@
+export function lineWipe(_node, { duration = 600, easing = (t) => t, direction = 'left' } = {}) {
+    return {
+        duration,
+        easing,
+        css: (t) => {
+            const offset = t * 100;
+            const angle = { left: 270, up: 0, right: 90, down: 180 }[direction];
+            const startColor = 'rgba(0,0,0,1)';
+            const endColor = 'rgba(0,0,0,0)';
+            const mask = `linear-gradient(${angle}deg, ${startColor} ${offset}%, ${endColor} ${offset}%)`;
+            return `
+        mask: ${mask};
+        -webkit-mask: ${mask};
+      `;
+        },
+    };
+}

package/dist/transitions/stack.d.ts

@@ -0,0 +1,8 @@
+import type { TransitionConfig } from 'svelte/transition';
+export interface StackParams {
+    duration?: number;
+    easing?: (t: number) => number;
+    direction?: 'left' | 'right' | 'up' | 'down';
+    reverse?: boolean;
+}
+export declare function stack(_node: HTMLElement, { duration, easing, direction, reverse }?: StackParams): TransitionConfig;

package/dist/transitions/stack.js

@@ -0,0 +1,13 @@
+export function stack(_node, { duration = 600, easing = (t) => t, direction = 'left', reverse = false } = {}) {
+    return {
+        duration,
+        easing,
+        css: (t, u) => {
+            const offset = (direction === 'left' || direction === 'up' ? 1 : -1) * (reverse ? -t : u);
+            const axis = direction === 'left' || direction === 'right' ? 'X' : 'Y';
+            return `
+        transform: translate${axis}(${offset * 100}%);
+      `;
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@peteai/presentation-editor",
-	"version": "0.0.9",
+	"version": "0.0.10",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",

package/dist/components/editor/layers/types/image/image-layer-active.svelte

@@ -1,36 +0,0 @@
-<script lang="ts">
-	import type { ImageLayer } from '../../../types.js';
-	import { SideResizeControl } from '../../controls/side-resize-control/index.js';
-	import { CornerScaleControl } from '../../controls/corner-scale-control/index.js';
-	import { RotateControl } from '../../controls/rotate-control/index.js';
-	import { getEditorContext } from '../../../editor.svelte.js';
-
-	interface Props {
-		layer: ImageLayer;
-	}
-
-	let { layer = $bindable() }: Props = $props();
-
-	const editor = getEditorContext();
-</script>
-
-<div
-	class="pointer-events-none absolute left-0 top-0 h-full w-full"
-	style:width={`${layer.width * layer.scale * editor.zoom}px`}
-	style:height={`${layer.height * layer.scale * editor.zoom}px`}
-	style:transform={`translate(${layer.x * editor.zoom}px, ${layer.y * editor.zoom}px) rotate(${layer.rotate}deg)`}
->
-	<div class="h-full w-full outline-none transition-opacity duration-300">
-		<div class="flex h-full w-full items-center justify-center">
-			<SideResizeControl origin="left" bind:layer />
-			<SideResizeControl origin="right" bind:layer />
-			<SideResizeControl origin="top" bind:layer />
-			<SideResizeControl origin="bottom" bind:layer />
-			<CornerScaleControl origin="bottom-right" />
-			<CornerScaleControl origin="bottom-left" />
-			<CornerScaleControl origin="top-right" />
-			<CornerScaleControl origin="top-left" />
-			<RotateControl />
-		</div>
-	</div>
-</div>

package/dist/components/editor/layers/types/image/image-layer-active.svelte.d.ts

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