@peteai/presentation-editor 0.0.6 → 0.0.8

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

@@ -35,7 +35,7 @@ export function stringToGradient(value) {
         colors,
     };
 }
-export const getSlides = () => [
+export const getPages = () => [
     {
         id: uniqid(),
         backgroundColor: '#5ce1e6',
@@ -46,23 +46,25 @@ export const getSlides = () => [
         layers: [
             {
                 id: uniqid(),
+                groupId: null,
                 x: 200,
                 y: 250,
                 width: 1400,
                 height: 200,
-                type: 'html',
+                type: 'text',
                 sortOrder: 1,
                 locked: false,
-                scale: null,
-                rotate: null,
-                opacity: null,
+                scale: 1,
+                rotate: 0,
+                opacity: 1,
                 html: {
                     type: 'doc',
                     content: [
                         {
-                            type: 'bulletList',
+                            type: 'list',
                             attrs: {
                                 fontSize: 80,
+                                listStyleType: 'disc',
                             },
                             content: [
                                 {
@@ -142,23 +144,23 @@ export const getSlides = () => [
             },
             {
                 id: uniqid(),
+                groupId: null,
                 x: 200,
                 y: 300,
                 width: 400,
                 height: 200,
-                type: 'html',
+                type: 'text',
                 sortOrder: 2,
                 locked: false,
                 scale: 2,
                 rotate: 45,
-                opacity: null,
+                opacity: 1,
                 html: {
                     type: 'doc',
                     content: [
                         {
                             type: 'paragraph',
                             attrs: {
-                                color: '#ff914d',
                                 lineHeight: 1.2,
                                 fontSize: 112,
                                 textAlign: 'center',
@@ -168,7 +170,15 @@ export const getSlides = () => [
                                 {
                                     type: 'text',
                                     text: 'Some text',
-                                    marks: [{ type: 'bold' }],
+                                    marks: [
+                                        { type: 'bold' },
+                                        {
+                                            type: 'textStyle',
+                                            attrs: {
+                                                color: '#ff914d',
+                                            },
+                                        },
+                                    ],
                                 },
                             ],
                         },
@@ -177,16 +187,17 @@ export const getSlides = () => [
             },
             {
                 id: uniqid(),
+                groupId: null,
                 x: 1100,
                 y: 100,
                 width: 600,
                 height: 200,
-                type: 'html',
+                type: 'text',
                 sortOrder: 3,
                 locked: false,
-                scale: null,
-                rotate: null,
-                opacity: null,
+                scale: 1,
+                rotate: 0,
+                opacity: 1,
                 html: {
                     type: 'doc',
                     content: [
@@ -241,24 +252,32 @@ const getRandomFontFamily = () => {
     const randomIndex = Math.floor(Math.random() * fontFamilies.length);
     return fontFamilies[randomIndex];
 };
-const buildParagraphContent = ({ text, fontFamily = getRandomFontFamily(), fontSize = 40, lineHeight = 1.4, textAlign, }) => ({
-    type: 'paragraph',
+const buildParagraphContent = ({ text, fontFamily = getRandomFontFamily(), fontSize = 40, lineHeight = 1.4, textAlign, listItem, }) => ({
+    type: listItem ? 'listItem' : 'paragraph',
     attrs: {
         fontFamily,
         fontSize,
         lineHeight,
         ...(textAlign && { textAlign }),
     },
-    content: [{ type: 'text', text }],
+    content: [
+        listItem
+            ? {
+                type: 'listItemParagraph',
+                content: [{ type: 'text', text }],
+            }
+            : { type: 'text', text },
+    ],
 });
 const buildBulletListContent = ({ bullets }) => ({
-    type: 'bulletList',
-    content: bullets.map((bullet) => ({
-        type: 'listItem',
-        attrs: {
-            fontSize: 40,
-        },
-        content: [buildParagraphContent({ text: bullet, lineHeight: 1.5 })],
+    type: 'list',
+    attrs: {
+        listStyleType: 'disc',
+    },
+    content: bullets.map((bullet) => buildParagraphContent({
+        text: bullet,
+        lineHeight: 1.5,
+        listItem: true,
     })),
 });
 export const buildParagraphHtml = ({ text, fontSize = 56, lineHeight = 1.4, textAlign, uppercase, bold, italic, }) => {
@@ -287,16 +306,17 @@ export const buildParagraphHtml = ({ text, fontSize = 56, lineHeight = 1.4, text
 };
 const buildHeadlineLayer = ({ sortOrder, text, isTitle, withSubheadline, }) => ({
     id: uniqid(),
+    groupId: null,
     x: 200,
     y: isTitle ? (withSubheadline ? 300 : 450) : 50,
     width: 1520,
     height: 200,
-    type: 'html',
+    type: 'text',
     sortOrder,
     locked: false,
-    scale: null,
-    rotate: null,
-    opacity: null,
+    scale: 1,
+    rotate: 0,
+    opacity: 1,
     html: {
         type: 'doc',
         content: [
@@ -313,28 +333,29 @@ const buildHeadlineLayer = ({ sortOrder, text, isTitle, withSubheadline, }) => (
 });
 const buildSubheadlineLayer = ({ sortOrder, text, }) => ({
     id: uniqid(),
+    groupId: null,
     x: 400,
     y: 500,
     width: 1120,
     height: 200,
-    type: 'html',
+    type: 'text',
     sortOrder,
     locked: false,
-    scale: null,
-    rotate: null,
-    opacity: null,
+    scale: 1,
+    rotate: 0,
+    opacity: 1,
     html: {
         type: 'doc',
         content: [buildParagraphContent({ text, fontSize: 80, textAlign: 'center' })],
     },
 });
-export const buildHtmlLayerParagraphFields = ({ text }) => ({
+export const buildTextLayerParagraphFields = ({ text }) => ({
     html: {
         type: 'doc',
         content: [buildParagraphContent({ text, lineHeight: 1.5 })],
     },
 });
-const buildHtmlLayerBulletsFields = ({ bullets }) => ({
+const buildTextLayerBulletsFields = ({ bullets }) => ({
     html: {
         type: 'doc',
         content: [buildBulletListContent({ bullets })],
@@ -342,31 +363,41 @@ const buildHtmlLayerBulletsFields = ({ bullets }) => ({
 });
 const buildImageLayerFields = (image) => ({
     image,
+    imageRotate: 0,
+    offsetX: 0,
+    offsetY: 0,
+    cornerRadius: 0,
+    flipX: false,
+    flipY: false,
+    borderStyle: 'solid',
+    borderWidth: 0,
+    borderColor: '#000000',
 });
-const buildColumnLayer = ({ sortOrder, slide, isRight, }) => {
-    const type = slide[isRight ? 'right_type' : 'left_type'];
+const buildColumnLayer = ({ sortOrder, page, isRight, }) => {
+    const type = page[isRight ? 'right_type' : 'left_type'];
     return {
         id: uniqid(),
+        groupId: null,
         x: isRight ? 1020 : 100,
         y: 220,
         width: 800,
         height: 800,
-        type: type === 'image' ? 'image' : 'html',
+        type: type === 'image' ? 'image' : 'text',
         sortOrder,
         locked: false,
-        scale: null,
-        rotate: null,
-        opacity: null,
+        scale: 1,
+        rotate: 0,
+        opacity: 1,
         ...(type === 'image'
-            ? buildImageLayerFields(slide[isRight ? 'right_image' : 'left_image'])
+            ? buildImageLayerFields(page[isRight ? 'right_image' : 'left_image'])
             : type === 'bullets'
-                ? buildHtmlLayerBulletsFields({
-                    bullets: slide[isRight ? 'right_bullets' : 'left_bullets'],
+                ? buildTextLayerBulletsFields({
+                    bullets: page[isRight ? 'right_bullets' : 'left_bullets'],
                 })
-                : buildHtmlLayerParagraphFields({ text: slide[isRight ? 'right_text' : 'left_text'] })),
+                : buildTextLayerParagraphFields({ text: page[isRight ? 'right_text' : 'left_text'] })),
     };
 };
-let slideSortOrder = 1;
+let pageSortOrder = 1;
 const generateBackgroundColor = () => {
     const generateRandomHex = (length) => Math.floor(Math.random() * Math.pow(16, length))
         .toString(16)
@@ -395,49 +426,53 @@ const generateBackgroundColor = () => {
         return randomHexColor();
     }
 };
-export const cognitionSlideToJson = (slide) => {
+export const cognitionPageToJson = (page) => {
     let sortOrder = 1;
     const layers = [];
-    if (slide.type === 'title') {
+    if (page.type === 'title') {
         layers.push(buildHeadlineLayer({
             sortOrder: sortOrder++,
-            text: slide.headline,
+            text: page.headline,
             isTitle: true,
-            withSubheadline: !!slide.subheadline,
+            withSubheadline: !!page.subheadline,
         }));
-        if (slide.subheadline) {
-            layers.push(buildSubheadlineLayer({ sortOrder: sortOrder++, text: slide.subheadline }));
+        if (page.subheadline) {
+            layers.push(buildSubheadlineLayer({ sortOrder: sortOrder++, text: page.subheadline }));
         }
     }
-    else if (slide.type === 'columns') {
-        layers.push(buildHeadlineLayer({ sortOrder: sortOrder++, text: slide.headline }));
-        layers.push(buildColumnLayer({ sortOrder: sortOrder++, slide }));
-        layers.push(buildColumnLayer({ sortOrder: sortOrder++, slide, isRight: true }));
+    else if (page.type === 'columns') {
+        layers.push(buildHeadlineLayer({ sortOrder: sortOrder++, text: page.headline }));
+        layers.push(buildColumnLayer({ sortOrder: sortOrder++, page }));
+        layers.push(buildColumnLayer({ sortOrder: sortOrder++, page, isRight: true }));
     }
-    else if (slide.type === 'bullets') {
-        layers.push(buildHeadlineLayer({ sortOrder: sortOrder++, text: slide.headline }));
+    else if (page.type === 'bullets') {
+        layers.push(buildHeadlineLayer({ sortOrder: sortOrder++, text: page.headline }));
         layers.push({
             id: uniqid(),
+            groupId: null,
             x: 560,
             y: 220,
             width: 800,
             height: 800,
-            type: 'html',
+            type: 'text',
             sortOrder: sortOrder++,
             locked: false,
-            scale: null,
-            rotate: null,
-            opacity: null,
+            scale: 1,
+            rotate: 0,
+            opacity: 1,
             html: {
                 type: 'doc',
-                content: [buildBulletListContent({ bullets: slide.bullets })],
+                content: [buildBulletListContent({ bullets: page.bullets })],
             },
         });
     }
     return {
         id: uniqid(),
-        sortOrder: slideSortOrder++,
+        sortOrder: pageSortOrder++,
         backgroundColor: generateBackgroundColor(),
+        backgroundImage: null,
+        backgroundLocked: false,
+        locked: false,
         layers,
     };
 };

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import DeleteIcon from 'lucide-svelte/icons/trash-2';
-	import PipetteIcon from 'lucide-svelte/icons/pipette';
+	import DeleteIcon from '@lucide/svelte/icons/trash-2';
+	import PipetteIcon from '@lucide/svelte/icons/pipette';
 	import { untrack } from 'svelte';
 	import { Slider } from 'bits-ui';
 	import { BROWSER } from 'esm-env';

package/dist/components/ui/context-menu/context-menu-checkbox-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
-	import Check from 'lucide-svelte/icons/check';
-	import Minus from 'lucide-svelte/icons/minus';
+	import Check from '@lucide/svelte/icons/check';
+	import Minus from '@lucide/svelte/icons/minus';
 	import { cn } from '../../../utils.js';
 	import type { Snippet } from 'svelte';
 

package/dist/components/ui/context-menu/context-menu-radio-item.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive, type WithoutChild } from 'bits-ui';
-	import Circle from 'lucide-svelte/icons/circle';
+	import Circle from '@lucide/svelte/icons/circle';
 	import { cn } from '../../../utils.js';
 
 	let {

package/dist/components/ui/context-menu/context-menu-sub-trigger.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive, type WithoutChild } from 'bits-ui';
-	import ChevronRight from 'lucide-svelte/icons/chevron-right';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
 	import { cn } from '../../../utils.js';
 
 	let {

package/dist/components/ui/dialog/dialog-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
-	import X from 'lucide-svelte/icons/x';
+	import X from '@lucide/svelte/icons/x';
 	import type { Snippet } from 'svelte';
 	import * as Dialog from './index.js';
 	import { cn } from '../../../utils.js';
@@ -22,14 +22,14 @@
 	<DialogPrimitive.Content
 		bind:ref
 		class={cn(
-			'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 sm:rounded-lg',
+			'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] bg-background fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
 			className,
 		)}
 		{...restProps}
 	>
 		{@render children?.()}
 		<DialogPrimitive.Close
-			class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+			class="ring-offset-background focus:ring-ring absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
 		>
 			<X class="size-4" />
 			<span class="sr-only">Close</span>

package/dist/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
-	import Check from 'lucide-svelte/icons/check';
-	import Minus from 'lucide-svelte/icons/minus';
+	import Check from '@lucide/svelte/icons/check';
+	import Minus from '@lucide/svelte/icons/minus';
 	import { cn } from '../../../utils.js';
 	import type { Snippet } from 'svelte';
 
@@ -22,7 +22,7 @@
 	bind:checked
 	bind:indeterminate
 	class={cn(
-		'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
+		'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
 		className,
 	)}
 	{...restProps}

package/dist/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive, type WithoutChild } from 'bits-ui';
-	import Circle from 'lucide-svelte/icons/circle';
+	import Circle from '@lucide/svelte/icons/circle';
 	import { cn } from '../../../utils.js';
 
 	let {
@@ -14,7 +14,7 @@
 <DropdownMenuPrimitive.RadioItem
 	bind:ref
 	class={cn(
-		'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
+		'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
 		className,
 	)}
 	{...restProps}

package/dist/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-	import ChevronRight from 'lucide-svelte/icons/chevron-right';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
 	import { cn } from '../../../utils.js';
 
 	let {

package/dist/components/ui/dropdown-menu/index.d.ts

@@ -13,6 +13,7 @@ declare const Sub: import("svelte").Component<import("bits-ui").ContextMenuSubPr
 declare const Root: import("svelte").Component<{
     open?: boolean;
     onOpenChange?: import("bits-ui/dist/internal/types").OnChangeFn<boolean>;
+    onOpenChangeComplete?: import("bits-ui/dist/internal/types").OnChangeFn<boolean>;
     dir?: import("bits-ui").Direction;
 } & {
     children?: import("svelte").Snippet | undefined;

package/dist/components/ui/slider/slider.svelte

@@ -5,6 +5,7 @@
 	let {
 		ref = $bindable(null),
 		value = $bindable(),
+		orientation = 'horizontal',
 		class: className,
 		...restProps
 	}: WithoutChildrenOrChild<SliderPrimitive.RootProps> = $props();
@@ -14,23 +15,30 @@
 Discriminated Unions + Destructing (required for bindable) do not
 get along, so we shut typescript up by casting `value` to `never`.
 -->
-<div class="mx-2.5">
-	<SliderPrimitive.Root
-		bind:value={value as never}
-		bind:ref
-		class={cn('relative flex w-full touch-none select-none items-center', className)}
-		{...restProps}
-	>
-		{#snippet children({ thumbs })}
-			<span class="bg-secondary relative -mx-2.5 h-2 w-full grow overflow-hidden rounded-full">
-				<SliderPrimitive.Range class="bg-primary absolute h-full" />
-			</span>
-			{#each thumbs as thumb}
-				<SliderPrimitive.Thumb
-					index={thumb}
-					class="border-primary bg-background ring-offset-background focus-visible:ring-ring block size-5 rounded-full border-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
-				/>
-			{/each}
-		{/snippet}
-	</SliderPrimitive.Root>
-</div>
+<SliderPrimitive.Root
+	bind:ref
+	bind:value={value as never}
+	{orientation}
+	class={cn(
+		"relative flex touch-none select-none items-center data-[orientation='vertical']:h-full data-[orientation='vertical']:min-h-44 data-[orientation='horizontal']:w-full data-[orientation='vertical']:w-auto data-[orientation='vertical']:flex-col",
+		className,
+	)}
+	{...restProps}
+>
+	{#snippet children({ thumbs })}
+		<span
+			data-orientation={orientation}
+			class="bg-secondary relative grow overflow-hidden rounded-full data-[orientation='horizontal']:h-2 data-[orientation='vertical']:h-full data-[orientation='horizontal']:w-full data-[orientation='vertical']:w-2"
+		>
+			<SliderPrimitive.Range
+				class="bg-primary absolute data-[orientation='horizontal']:h-full data-[orientation='vertical']:w-full"
+			/>
+		</span>
+		{#each thumbs as thumb (thumb)}
+			<SliderPrimitive.Thumb
+				index={thumb}
+				class="border-primary bg-background ring-offset-background focus-visible:ring-ring block size-5 rounded-full border-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+			/>
+		{/each}
+	{/snippet}
+</SliderPrimitive.Root>

package/dist/index.d.ts

@@ -1,8 +1,14 @@
-import { PresentationEditor } from './components/presentation-editor/index.js';
-import type { PresentationEditorOptions } from './components/presentation-editor/presentation-editor.svelte.js';
-type createEditorOptions = {
+import { Editor, Page } from './components/editor/index.js';
+import type { EditorOptions, PageOptions } from './components/editor/types.js';
+export type CreateEditorOptions = {
     target: Document | Element | ShadowRoot;
-    props: PresentationEditorOptions;
+    props: EditorOptions;
 };
-declare const createEditor: (options: createEditorOptions) => Record<string, any>;
-export { PresentationEditor, createEditor };
+declare const createEditor: (options: CreateEditorOptions) => Record<string, any>;
+export type CreatePageOptions = {
+    target: Document | Element | ShadowRoot;
+    props: PageOptions;
+};
+declare const createPage: (options: CreatePageOptions) => {};
+export { Editor, Page, createEditor, createPage };
+export * from './components/editor/types.js';

package/dist/index.js

@@ -1,5 +1,7 @@
 // Reexport your entry components here
 import { mount } from 'svelte';
-import { PresentationEditor } from './components/presentation-editor/index.js';
-const createEditor = (options) => mount(PresentationEditor, options);
-export { PresentationEditor, createEditor };
+import { Editor, Page } from './components/editor/index.js';
+const createEditor = (options) => mount(Editor, options);
+const createPage = (options) => mount(Page, options);
+export { Editor, Page, createEditor, createPage };
+export * from './components/editor/types.js';