@peteai/presentation-editor 0.0.2 → 0.0.4

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

@@ -1,23 +1,18 @@
 import { type JSONContent } from '@tiptap/core';
-export type ActiveSidebar = 'images' | 'layers' | null;
+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 Dragged = {
-    id: string;
-    hidden: boolean;
-    sticky: boolean;
-    image: Image;
-    x: number;
-    y: number;
-    offsetX: number;
-    offsetY: number;
-    initialScale: number;
-    scale: number | null;
-};
 export type CursorTooltip = {
     x: number;
     y: number;
@@ -29,13 +24,14 @@ interface BaseLayer {
     y: number;
     width: number;
     height: number;
+    scale: number | null;
     rotate: number | null;
     opacity: number | null;
     sortOrder: number;
+    locked: boolean;
 }
 export interface HtmlLayer extends BaseLayer {
     type: 'html';
-    scale: number | null;
     html: JSONContent;
 }
 export type LayerBorder = {
@@ -45,7 +41,6 @@ export type LayerBorder = {
 };
 export interface ImageLayer extends BaseLayer, LayerBorder {
     type: 'image';
-    scale: number | null;
     image: Image;
     offsetX: number | null;
     offsetY: number | null;
@@ -54,19 +49,25 @@ export interface ImageLayer extends BaseLayer, LayerBorder {
     flipY: boolean;
 }
 export type Layer = HtmlLayer | ImageLayer;
+export type Gradient = {
+    type: 'linear90' | 'linear180' | 'linear135' | 'radialCenter' | 'radialTopLeft';
+    colors: string[];
+};
+export type BackgroundImage = Pick<ImageLayer, 'rotate' | 'opacity' | 'scale' | 'image' | 'offsetX' | 'offsetY' | 'flipX' | 'flipY'>;
 export type Slide = {
     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;
-    clientX: number;
-    clientY: number;
-    layer: Layer;
 };
 export type SlideAddAction = {
     type: 'slideAdd';
@@ -77,17 +78,20 @@ export type SlideRemoveAction = {
     slide: Slide;
     newSlide?: Slide;
 };
-export type LayerAddAction = {
-    type: 'layerAdd' | 'layerRemove';
-    layer: Layer;
-};
-export type SlideChangesAction = {
+export type SlideUpdateAction = {
     type: 'slide';
+    slideId: Slide['id'];
     undo: object;
     redo: object;
 };
-export type LayerChangesAction = {
+export type LayersToggleAction = {
+    type: 'layersAdd' | 'layersRemove';
+    slideId: Slide['id'];
+    layers: Layer[];
+};
+export type LayerUpdateAction = {
     type: 'layer';
+    slideId: Slide['id'];
     layer: {
         id: string;
         type: string;
@@ -95,10 +99,25 @@ export type LayerChangesAction = {
     undo: object;
     redo: object;
 };
-export type Action = SlideAddAction | SlideRemoveAction | LayerAddAction | SlideChangesAction | LayerChangesAction;
-export type HistoryAction = Action & {
-    slideId: string;
+type LayerAction = LayersToggleAction | LayerUpdateAction;
+export type LayersGroupAction = {
+    type: 'layersGroup';
+    actions: LayerAction[];
+};
+export type LayerToSlideBackgroundAction = {
+    type: 'layerToSlideBackground';
+    slideId: Slide['id'];
+    imageLayer: ImageLayer;
+    backgroundImage: Slide['backgroundImage'];
+    opposite?: boolean;
 };
+export type BackgroundImageUpdateAction = {
+    type: 'backgroundImage';
+    slideId: Slide['id'];
+    undo: object;
+    redo: object;
+};
+export type HistoryAction = SlideAddAction | SlideUpdateAction | SlideRemoveAction | LayerAction | LayersGroupAction | LayerToSlideBackgroundAction | BackgroundImageUpdateAction;
 interface BaseLayerGuide {
     id: string;
     type: string;
@@ -115,4 +134,25 @@ export interface BoxLayerGuide extends BaseLayerGuide {
     inset: number;
 }
 export type ActiveLayerGuide = LineLayerGuide | BoxLayerGuide;
+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: HtmlLayer['html'];
+}
+export type Dragged = DraggedHtml | DraggedImage;
 export {};

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

@@ -1,5 +1,54 @@
-import type { Slide } from './types.js';
+import type { Gradient, Slide } 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 buildParagraphHtml: ({ text, fontSize, lineHeight, textAlign, uppercase, bold, italic, }: {
+    text: string;
+    fontSize?: number;
+    lineHeight?: number;
+    textAlign?: string;
+    uppercase?: boolean;
+    bold?: boolean;
+    italic?: boolean;
+}) => {
+    type: string;
+    content: {
+        type: string;
+        attrs: {
+            textTransform?: string | undefined;
+            textAlign?: string | undefined;
+            fontSize: number;
+            lineHeight: number;
+        };
+        content: {
+            marks?: {
+                type: string;
+            }[] | undefined;
+            type: string;
+            text: string;
+        }[];
+    }[];
+};
+export declare const buildHtmlLayerParagraphFields: ({ text }: {
+    text: string;
+}) => {
+    html: {
+        type: string;
+        content: {
+            type: string;
+            attrs: {
+                textAlign?: string | undefined;
+                fontFamily: string;
+                fontSize: number;
+                lineHeight: number;
+            };
+            content: {
+                type: string;
+                text: string;
+            }[];
+        }[];
+    };
+};
 export declare const cognitionSlideToJson: (slide: any) => Slide;

package/dist/components/presentation-editor/utils.js

@@ -22,11 +22,27 @@ export const checkImage = (url) => new Promise((resolve, reject) => {
     image.onload = () => resolve(image);
     image.onerror = reject;
 });
+// Function to convert Gradient to a single string value
+export function gradientToString(gradient) {
+    return `${gradient.type}:${gradient.colors.join(',')}`;
+}
+// Function to convert a single string value back to Gradient
+export function stringToGradient(value) {
+    const [type, colorsString] = value.split(':');
+    const colors = colorsString.split(',');
+    return {
+        type: type,
+        colors,
+    };
+}
 export const getSlides = () => [
     {
         id: uniqid(),
         backgroundColor: '#5ce1e6',
+        backgroundImage: null,
+        backgroundLocked: false,
         sortOrder: 1,
+        locked: false,
         layers: [
             {
                 id: uniqid(),
@@ -36,6 +52,7 @@ export const getSlides = () => [
                 height: 200,
                 type: 'html',
                 sortOrder: 1,
+                locked: false,
                 scale: null,
                 rotate: null,
                 opacity: null,
@@ -131,6 +148,7 @@ export const getSlides = () => [
                 height: 200,
                 type: 'html',
                 sortOrder: 2,
+                locked: false,
                 scale: 2,
                 rotate: 45,
                 opacity: null,
@@ -165,6 +183,7 @@ export const getSlides = () => [
                 height: 200,
                 type: 'html',
                 sortOrder: 3,
+                locked: false,
                 scale: null,
                 rotate: null,
                 opacity: null,
@@ -204,10 +223,30 @@ export const getSlides = () => [
         ],
     },
 ];
-const buildParagraphContent = ({ text, fontSize = 40, textAlign, }) => ({
+const getRandomFontFamily = () => {
+    const fontFamilies = [
+        // Commonly available in most browsers
+        // 'Arial',
+        // 'Verdana',
+        // 'Times New Roman',
+        // 'Courier New',
+        // 'Georgia',
+        // Web fonts that may not be available by default
+        'Roboto',
+        'Open Sans',
+        'Lato',
+        'Montserrat',
+        'Oswald',
+    ];
+    const randomIndex = Math.floor(Math.random() * fontFamilies.length);
+    return fontFamilies[randomIndex];
+};
+const buildParagraphContent = ({ text, fontFamily = getRandomFontFamily(), fontSize = 40, lineHeight = 1.4, textAlign, }) => ({
     type: 'paragraph',
     attrs: {
-        ...(fontSize && { fontSize }),
+        fontFamily,
+        fontSize,
+        lineHeight,
         ...(textAlign && { textAlign }),
     },
     content: [{ type: 'text', text }],
@@ -219,9 +258,33 @@ const buildBulletListContent = ({ bullets }) => ({
         attrs: {
             fontSize: 40,
         },
-        content: [buildParagraphContent({ text: bullet })],
+        content: [buildParagraphContent({ text: bullet, lineHeight: 1.5 })],
     })),
 });
+export const buildParagraphHtml = ({ text, fontSize = 56, lineHeight = 1.4, textAlign, uppercase, bold, italic, }) => {
+    const marks = [];
+    if (bold) {
+        marks.push({ type: 'bold' });
+    }
+    if (italic) {
+        marks.push({ type: 'italic' });
+    }
+    return {
+        type: 'doc',
+        content: [
+            {
+                type: 'paragraph',
+                attrs: {
+                    fontSize,
+                    lineHeight,
+                    ...(textAlign && { textAlign }),
+                    ...(uppercase && { textTransform: 'uppercase' }),
+                },
+                content: [{ type: 'text', text, ...(marks.length && { marks }) }],
+            },
+        ],
+    };
+};
 const buildHeadlineLayer = ({ sortOrder, text, isTitle, withSubheadline, }) => ({
     id: uniqid(),
     x: 200,
@@ -230,6 +293,7 @@ const buildHeadlineLayer = ({ sortOrder, text, isTitle, withSubheadline, }) => (
     height: 200,
     type: 'html',
     sortOrder,
+    locked: false,
     scale: null,
     rotate: null,
     opacity: null,
@@ -255,6 +319,7 @@ const buildSubheadlineLayer = ({ sortOrder, text, }) => ({
     height: 200,
     type: 'html',
     sortOrder,
+    locked: false,
     scale: null,
     rotate: null,
     opacity: null,
@@ -263,10 +328,10 @@ const buildSubheadlineLayer = ({ sortOrder, text, }) => ({
         content: [buildParagraphContent({ text, fontSize: 80, textAlign: 'center' })],
     },
 });
-const buildHtmlLayerParagraphFields = ({ text }) => ({
+export const buildHtmlLayerParagraphFields = ({ text }) => ({
     html: {
         type: 'doc',
-        content: [buildParagraphContent({ text })],
+        content: [buildParagraphContent({ text, lineHeight: 1.5 })],
     },
 });
 const buildHtmlLayerBulletsFields = ({ bullets }) => ({
@@ -288,6 +353,7 @@ const buildColumnLayer = ({ sortOrder, slide, isRight, }) => {
         height: 800,
         type: type === 'image' ? 'image' : 'html',
         sortOrder,
+        locked: false,
         scale: null,
         rotate: null,
         opacity: null,
@@ -301,6 +367,34 @@ const buildColumnLayer = ({ sortOrder, slide, isRight, }) => {
     };
 };
 let slideSortOrder = 1;
+const generateBackgroundColor = () => {
+    const generateRandomHex = (length) => Math.floor(Math.random() * Math.pow(16, length))
+        .toString(16)
+        .padStart(length, '0');
+    const randomHexColor = (includeOpacity = false) => {
+        const color = `#${generateRandomHex(6)}`;
+        return `${color}${includeOpacity ? 'ff' : ''}`;
+    };
+    const isGradient = Math.random() > 0.5; // 50% chance to be a gradient
+    if (isGradient) {
+        const gradientTypes = [
+            'linear90',
+            'linear180',
+            'linear135',
+            'radialCenter',
+            'radialTopLeft',
+        ];
+        const randomGradientType = gradientTypes[Math.floor(Math.random() * gradientTypes.length)];
+        const randomColorCount = Math.floor(Math.random() * 7) + 2; // Random number of colors between 2 and 8
+        return gradientToString({
+            type: randomGradientType,
+            colors: Array.from({ length: randomColorCount }, () => randomHexColor(true)),
+        });
+    }
+    else {
+        return randomHexColor();
+    }
+};
 export const cognitionSlideToJson = (slide) => {
     let sortOrder = 1;
     const layers = [];
@@ -330,6 +424,7 @@ export const cognitionSlideToJson = (slide) => {
             height: 800,
             type: 'html',
             sortOrder: sortOrder++,
+            locked: false,
             scale: null,
             rotate: null,
             opacity: null,
@@ -342,7 +437,7 @@ export const cognitionSlideToJson = (slide) => {
     return {
         id: uniqid(),
         sortOrder: slideSortOrder++,
-        backgroundColor: '#5ce1e6',
+        backgroundColor: generateBackgroundColor(),
         layers,
     };
 };

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

@@ -4,8 +4,8 @@
 	import { type VariantProps, tv } from 'tailwind-variants';
 
 	export const buttonVariants = tv({
-		base: 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-		// ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+		base: 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+		// ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 [&_svg]:size-4
 		variants: {
 			variant: {
 				default: 'bg-primary text-primary-foreground hover:bg-primary/90',
@@ -14,6 +14,7 @@
 				secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
 				ghost: 'hover:bg-accent hover:text-accent-foreground',
 				link: 'text-primary underline-offset-4 hover:underline',
+				muted: 'bg-muted text-muted-foregound hover:bg-muted/80',
 			},
 			size: {
 				default: 'h-10 px-4 py-2',

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

@@ -9,6 +9,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         secondary: string;
         ghost: string;
         link: string;
+        muted: string;
     };
     size: {
         default: string;
@@ -21,47 +22,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     active: {
         true: string;
     };
-}, undefined, "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", import("tailwind-variants/dist/config").TVConfig<{
-    variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
-    };
-    size: {
-        default: string;
-        xs: string;
-        sm: string;
-        lg: string;
-        icon: string;
-        'icon-xs': string;
-    };
-    active: {
-        true: string;
-    };
-}, {
-    variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
-    };
-    size: {
-        default: string;
-        xs: string;
-        sm: string;
-        lg: string;
-        icon: string;
-        'icon-xs': string;
-    };
-    active: {
-        true: string;
-    };
-}>, {
+}, undefined, "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
     variant: {
         default: string;
         destructive: string;
@@ -69,6 +30,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         secondary: string;
         ghost: string;
         link: string;
+        muted: string;
     };
     size: {
         default: string;
@@ -89,6 +51,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         secondary: string;
         ghost: string;
         link: string;
+        muted: string;
     };
     size: {
         default: string;
@@ -101,47 +64,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     active: {
         true: string;
     };
-}, undefined, "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", import("tailwind-variants/dist/config").TVConfig<{
-    variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
-    };
-    size: {
-        default: string;
-        xs: string;
-        sm: string;
-        lg: string;
-        icon: string;
-        'icon-xs': string;
-    };
-    active: {
-        true: string;
-    };
-}, {
-    variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
-    };
-    size: {
-        default: string;
-        xs: string;
-        sm: string;
-        lg: string;
-        icon: string;
-        'icon-xs': string;
-    };
-    active: {
-        true: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined, "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", unknown, unknown, undefined>>;
 export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
 export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
 export type ButtonActive = VariantProps<typeof buttonVariants>['active'];

package/dist/components/ui/color-picker/color-picker-alpha-grid.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../../../utils.js';
+
+	interface Props {
+		size: number;
+	}
+
+	let {
+		size,
+		class: className,
+		children,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & Props = $props();
+</script>
+
+<div class={cn('alpha-grid h-full w-full', className)} style:--size="{size}px" {...restProps}>
+	{@render children?.()}
+</div>
+
+<style>
+	.alpha-grid {
+		background-color: hsl(var(--background));
+		background-image: linear-gradient(
+				-45deg,
+				hsl(var(--foreground)) 25%,
+				transparent 25%,
+				transparent 75%,
+				hsl(var(--foreground)) 75%
+			),
+			linear-gradient(
+				-45deg,
+				hsl(var(--foreground)) 25%,
+				transparent 25%,
+				transparent 75%,
+				hsl(var(--foreground)) 75%
+			);
+		background-position:
+			0 0,
+			calc(var(--size) / 2) calc(var(--size) / 2);
+		background-size: var(--size) var(--size);
+	}
+</style>

package/dist/components/ui/color-picker/color-picker-alpha-grid.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props {
+    size: number;
+}
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & Props;
+declare const ColorPickerAlphaGrid: import("svelte").Component<$$ComponentProps, {}, "">;
+type ColorPickerAlphaGrid = ReturnType<typeof ColorPickerAlphaGrid>;
+export default ColorPickerAlphaGrid;