@peteai/presentation-editor 0.0.6 → 0.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@peteai/presentation-editor",
-	"version": "0.0.6",
+	"version": "0.0.8",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
@@ -30,6 +30,10 @@
 	"types": "./dist/index.d.ts",
 	"type": "module",
 	"exports": {
+		"./*": [
+			"./src/*/index.ts",
+			"./src/*.ts"
+		],
 		".": {
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
@@ -43,57 +47,57 @@
 		"svelte": "^5.19.7"
 	},
 	"devDependencies": {
-		"@playwright/test": "^1.52.0",
-		"@sveltejs/adapter-auto": "^6.0.0",
-		"@sveltejs/kit": "^2.20.8",
-		"@sveltejs/package": "^2.3.11",
-		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@playwright/test": "^1.54.1",
+		"@sveltejs/adapter-auto": "^6.0.1",
+		"@sveltejs/kit": "^2.26.1",
+		"@sveltejs/package": "^2.4.0",
+		"@sveltejs/vite-plugin-svelte": "^6.1.0",
 		"@types/eslint": "^9.6.1",
 		"@types/uniqid": "^5.3.4",
 		"@types/webfontloader": "^1.6.38",
 		"autoprefixer": "^10.4.21",
-		"eslint": "^9.26.0",
-		"eslint-config-prettier": "^10.1.3",
-		"eslint-plugin-svelte": "^3.5.1",
-		"globals": "^16.1.0",
+		"eslint": "^9.32.0",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.11.0",
+		"globals": "^16.3.0",
 		"postcss-cli": "^11.0.1",
-		"prettier": "^3.5.3",
-		"prettier-plugin-svelte": "^3.3.3",
-		"prettier-plugin-tailwindcss": "^0.6.11",
+		"prettier": "^3.6.2",
+		"prettier-plugin-svelte": "^3.4.0",
+		"prettier-plugin-tailwindcss": "^0.6.14",
 		"publint": "^0.3.12",
-		"svelte": "^5.28.2",
-		"svelte-check": "^4.1.7",
+		"svelte": "^5.37.1",
+		"svelte-check": "^4.3.0",
 		"svelte-kit-sst": "^2.43.5",
 		"tailwindcss": "^3.4.17",
 		"typescript": "^5.8.3",
-		"typescript-eslint": "^8.32.0",
-		"vite": "^6.3.5",
-		"vitest": "^3.1.3"
+		"typescript-eslint": "^8.38.0",
+		"vite": "^7.0.6",
+		"vitest": "^3.2.4"
 	},
 	"dependencies": {
-		"@tiptap/core": "^2.11.5",
-		"@tiptap/extension-bold": "^2.11.5",
-		"@tiptap/extension-bullet-list": "^2.11.5",
-		"@tiptap/extension-color": "^2.11.5",
-		"@tiptap/extension-document": "^2.11.5",
-		"@tiptap/extension-italic": "^2.11.5",
-		"@tiptap/extension-list-item": "^2.11.5",
-		"@tiptap/extension-list-keymap": "^2.12.0",
-		"@tiptap/extension-ordered-list": "^2.11.5",
-		"@tiptap/extension-paragraph": "^2.11.5",
-		"@tiptap/extension-strike": "^2.11.5",
-		"@tiptap/extension-text": "^2.11.5",
-		"@tiptap/extension-text-align": "^2.11.5",
-		"@tiptap/extension-text-style": "^2.11.5",
-		"@tiptap/extension-underline": "^2.11.5",
-		"@tiptap/pm": "^2.11.5",
-		"bits-ui": "^1.4.6",
+		"@lucide/svelte": "^0.534.0",
+		"@tiptap/core": "^2.14.0",
+		"@tiptap/extension-bold": "^2.14.0",
+		"@tiptap/extension-bullet-list": "^2.14.0",
+		"@tiptap/extension-color": "^2.14.0",
+		"@tiptap/extension-document": "^2.14.0",
+		"@tiptap/extension-italic": "^2.14.0",
+		"@tiptap/extension-list-item": "^2.14.0",
+		"@tiptap/extension-list-keymap": "^2.14.0",
+		"@tiptap/extension-ordered-list": "^2.14.0",
+		"@tiptap/extension-paragraph": "^2.14.0",
+		"@tiptap/extension-strike": "^2.14.0",
+		"@tiptap/extension-text": "^2.14.0",
+		"@tiptap/extension-text-align": "^2.14.0",
+		"@tiptap/extension-text-style": "^2.14.0",
+		"@tiptap/extension-underline": "^2.14.0",
+		"@tiptap/pm": "^2.14.0",
+		"bits-ui": "^2.8.13",
 		"clsx": "^2.1.1",
 		"esm-env": "^1.2.2",
-		"lucide-svelte": "^0.508.0",
-		"svelte-dnd-action": "^0.9.57",
+		"svelte-dnd-action": "^0.9.64",
 		"svelte-radix": "^2.0.1",
-		"tailwind-merge": "^3.2.0",
+		"tailwind-merge": "^3.3.1",
 		"tailwind-variants": "^1.0.0",
 		"tailwindcss-animate": "^1.0.7",
 		"uniqid": "^5.4.0",

package/dist/components/presentation-editor/active-layers-buttons.svelte

@@ -1,53 +0,0 @@
-<script lang="ts">
-	import { Separator } from '../ui/separator/index.js';
-	import { BorderButton } from './layers/buttons/border-button/index.js';
-	import { CornerRadiusButton } from './layers/buttons/corner-radius-button/index.js';
-	import { FlipButton } from './layers/buttons/flip-button/index.js';
-	import { OpacityButton } from './layers/buttons/opacity-button/index.js';
-	import { AlignmentButton } from './layers/types/html/buttons/alignment-button/index.js';
-	import { BoldButton } from './layers/types/html/buttons/bold-button/index.js';
-	import { CaseButton } from './layers/types/html/buttons/case-button/index.js';
-	import { ColorButton } from './layers/types/html/buttons/color-button/index.js';
-	import { FontFamilyButton } from './layers/types/html/buttons/font-family-button/index.js';
-	import { FontSizeButton } from './layers/types/html/buttons/font-size-button/index.js';
-	import { ItalicButton } from './layers/types/html/buttons/italic-button/index.js';
-	import { ListButton } from './layers/types/html/buttons/list-button/index.js';
-	import { StrikethroughButton } from './layers/types/html/buttons/strikethrough-button/index.js';
-	import { UnderlineButton } from './layers/types/html/buttons/underline-button/index.js';
-	import { getPresentationEditorContext } from './presentation-editor.svelte.js';
-
-	const editor = getPresentationEditorContext();
-
-	let noLockedLayers = $derived(editor.activeLayers.filter((layer) => !layer.locked));
-	let imageLayers = $derived(noLockedLayers.filter((layer) => layer.type === 'image'));
-	let htmlLayers = $derived(noLockedLayers.filter((layer) => layer.type === 'html'));
-</script>
-
-{#if editor.activeLayers.length}
-	{#if imageLayers.length}
-		<Separator orientation="vertical" />
-		<BorderButton bind:layers={imageLayers} />
-		<CornerRadiusButton bind:layers={imageLayers} />
-		{#if htmlLayers.length === 0}
-			<Separator orientation="vertical" />
-			<FlipButton bind:layers={imageLayers} />
-		{/if}
-	{/if}
-	{#if htmlLayers.length}
-		<Separator orientation="vertical" />
-		<FontFamilyButton bind:layers={htmlLayers} />
-		<FontSizeButton bind:layers={htmlLayers} />
-		<ColorButton bind:layers={htmlLayers} />
-		<BoldButton bind:layers={htmlLayers} />
-		<ItalicButton bind:layers={htmlLayers} />
-		<UnderlineButton bind:layers={htmlLayers} />
-		<StrikethroughButton bind:layers={htmlLayers} />
-		<CaseButton bind:layers={htmlLayers} />
-		<AlignmentButton bind:layers={htmlLayers} />
-		<ListButton bind:layers={htmlLayers} />
-	{/if}
-	{#if noLockedLayers.length}
-		<Separator orientation="vertical" />
-		<OpacityButton bind:layers={noLockedLayers} />
-	{/if}
-{/if}

package/dist/components/presentation-editor/active-layers.svelte

@@ -1,181 +0,0 @@
-<script lang="ts">
-	import { getPresentationEditorContext } from './presentation-editor.svelte.js';
-	import {
-		calculateLayerTransform,
-		calculateGroupRotatedBoundingBox,
-		calculateRelativeRects,
-		isRotatedVertically,
-	} from './layers/utils.js';
-	import { SideScaleControl } from './layers/controls/side-scale-control/index.js';
-	import { SideResizeControl } from './layers/controls/side-resize-control/index.js';
-	import { GroupResizeControl } from './layers/controls/group-resize-control/index.js';
-	import { CornerScaleControl } from './layers/controls/corner-scale-control/index.js';
-	import { RotateControl } from './layers/controls/rotate-control/index.js';
-	import { HtmlLayerEdit } from './layers/index.js';
-	import type { HtmlLayer } from './types.js';
-
-	const editor = getPresentationEditorContext();
-
-	let htmlLayerEditing: HtmlLayer | undefined = $derived.by(() => {
-		if (editor.activeAction?.type === 'edit' && editor.activeLayers.length === 1) {
-			const layer = editor.activeLayers[0];
-			if (editor.activeAction.id == layer.id && layer.type === 'html') {
-				return layer;
-			}
-		}
-	});
-
-	const group = $derived.by(() => {
-		if (editor.activeBackground) {
-			return {
-				bbox: {
-					x: 0,
-					y: 0,
-					width: editor.width,
-					height: editor.height,
-					rotate: 0,
-				},
-				padding: 3,
-				items: [],
-			};
-		} else if (editor.activeLayers.length === 1) {
-			return {
-				bbox: calculateLayerTransform(editor.activeLayers[0]),
-				padding: 0,
-				items: [],
-			};
-		} else if (editor.activeLayers.length > 1) {
-			const transforms = editor.activeLayers.map(calculateLayerTransform);
-			const bbox = calculateGroupRotatedBoundingBox(transforms, editor.activeGroupRotate);
-			const items = calculateRelativeRects(bbox, transforms);
-
-			return { bbox, padding: 0, items };
-		}
-	});
-
-	/**
-	 * Determines if resizing should be forbidden based on the rotation of the group and its layers.
-	 *
-	 * @param {number} groupRotate - The rotation of the group in degrees.
-	 * @returns {(boolean|string)} - Returns 'horizontal' or 'vertical' if resizing should be forbidden in that direction, otherwise returns false.
-	 */
-	const getConstrainedResizeAxis = (groupRotate: number) => {
-		// Check if all active layers are of type 'html'
-		const htmlLayersOnly = editor.activeLayers.every((layer) => layer.type === 'html');
-		if (!htmlLayersOnly) return false; // If not all layers are 'html', resizing is not forbidden
-
-		// Calculate the rotation of the first layer relative to the group rotation
-		const firstLayerRelativeRotate = (editor.activeLayers[0].rotate || 0) - groupRotate;
-		// Determine if the first layer is rotated vertically
-		const firstLayerRotatedVertically = isRotatedVertically(firstLayerRelativeRotate);
-
-		// Check if all layers have the same rotation direction relative to the group rotation
-		const allLayersHaveSameRotationDirection = editor.activeLayers.every(
-			(layer) =>
-				isRotatedVertically((layer.rotate || 0) - groupRotate) === firstLayerRotatedVertically,
-		);
-		if (!allLayersHaveSameRotationDirection) return false; // If not all layers have the same rotation direction, resizing is not forbidden
-
-		// Based on the rotation direction, determine the direction in which resizing should be forbidden
-		return firstLayerRotatedVertically ? 'horizontal' : 'vertical';
-	};
-</script>
-
-{#if htmlLayerEditing}
-	<HtmlLayerEdit bind:layer={htmlLayerEditing} />
-{/if}
-
-{#if group}
-	<div
-		class="pointer-events-none absolute left-0 top-0 h-full w-full"
-		style:width={`${group.bbox.width * editor.zoom + group.padding * 2}px`}
-		style:height={`${group.bbox.height * editor.zoom + group.padding * 2}px`}
-		style:transform={`translate(${group.bbox.x * editor.zoom - group.padding}px, ${group.bbox.y * editor.zoom - group.padding}px) rotate(${group.bbox.rotate}deg)`}
-	>
-		{#if group.items.length < 2}
-			<div
-				class="border-primary absolute -inset-px border-2"
-				style:box-shadow="0 0 0 1px hsla(0, 0%, 100%, .07), inset 0 0 0 1px hsla(0, 0%, 100%, .07)"
-			></div>
-		{:else}
-			<div class="group-border absolute -inset-px"></div>
-			{#each group.items as item}
-				<div
-					class="border-primary absolute -left-px -top-px border-2"
-					style:box-shadow="0 0 0 1px hsla(0, 0%, 100%, .07), inset 0 0 0 1px hsla(0, 0%, 100%, .07)"
-					style:width={`${item.width * editor.zoom + 2}px`}
-					style:height={`${item.height * editor.zoom + 2}px`}
-					style:transform={`translate(${item.x * editor.zoom}px, ${item.y * editor.zoom}px) rotate(${item.rotate}deg)`}
-				></div>
-			{/each}
-		{/if}
-
-		{#if editor.activeLayers.length > 0 && !editor.activeSlide.locked && !editor.activeLayers.some((l) => l.locked)}
-			<div class="h-full w-full outline-none transition-opacity duration-300">
-				<div class="flex h-full w-full items-center justify-center">
-					{#if editor.activeLayers.length === 1}
-						{@const layer = editor.activeLayers[0]}
-						{#if layer.type === 'html'}
-							<SideScaleControl origin="left" {layer} />
-							<SideScaleControl origin="right" {layer} />
-						{:else if layer.type === 'image'}
-							<SideResizeControl origin="left" {layer} />
-							<SideResizeControl origin="right" {layer} />
-							<SideResizeControl origin="top" {layer} />
-							<SideResizeControl origin="bottom" {layer} />
-						{/if}
-					{:else}
-						{@const constrainedResizeAxis = getConstrainedResizeAxis(group.bbox.rotate)}
-						{#if constrainedResizeAxis !== 'horizontal'}
-							<GroupResizeControl origin="left" />
-							<GroupResizeControl origin="right" />
-						{/if}
-						{#if constrainedResizeAxis !== 'vertical'}
-							<GroupResizeControl origin="top" />
-							<GroupResizeControl origin="bottom" />
-						{/if}
-					{/if}
-					<CornerScaleControl origin="bottom-right" />
-					<CornerScaleControl origin="bottom-left" />
-					<CornerScaleControl origin="top-right" />
-					<CornerScaleControl origin="top-left" />
-					<RotateControl />
-				</div>
-			</div>
-		{/if}
-	</div>
-{/if}
-
-<style>
-	.group-border {
-		background-image: linear-gradient(90deg, #fff 60%, rgba(53, 71, 90, 0.2) 0),
-			linear-gradient(180deg, #fff 60%, rgba(53, 71, 90, 0.2) 0),
-			linear-gradient(90deg, #fff 60%, rgba(53, 71, 90, 0.2) 0),
-			linear-gradient(180deg, #fff 60%, rgba(53, 71, 90, 0.2) 0),
-			linear-gradient(90deg, rgba(57, 76, 96, 0.15), rgba(57, 76, 96, 0.15)),
-			linear-gradient(180deg, rgba(57, 76, 96, 0.15), rgba(57, 76, 96, 0.15)),
-			linear-gradient(90deg, rgba(57, 76, 96, 0.15), rgba(57, 76, 96, 0.15)),
-			linear-gradient(180deg, rgba(57, 76, 96, 0.15), rgba(57, 76, 96, 0.15));
-		background-position:
-			top,
-			100%,
-			bottom,
-			0,
-			center 2px,
-			calc(100% - 2px),
-			center calc(100% - 2px),
-			2px;
-		background-repeat: repeat-x, repeat-y, repeat-x, repeat-y, no-repeat, no-repeat, no-repeat,
-			no-repeat;
-		background-size:
-			6px 2px,
-			2px 6px,
-			6px 2px,
-			2px 6px,
-			calc(100% - 6px) 1px,
-			1px calc(100% - 4px),
-			calc(100% - 6px) 1px,
-			1px calc(100% - 4px);
-		box-shadow: 0 0 0 1px rgba(57, 76, 96, 0.15);
-	}
-</style>

package/dist/components/presentation-editor/active-layers.svelte.d.ts

@@ -1,3 +0,0 @@
-declare const ActiveLayers: import("svelte").Component<Record<string, never>, {}, "">;
-type ActiveLayers = ReturnType<typeof ActiveLayers>;
-export default ActiveLayers;

package/dist/components/presentation-editor/cursor-tooltip.svelte.d.ts

@@ -1,18 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const CursorTooltip: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type CursorTooltip = InstanceType<typeof CursorTooltip>;
-export default CursorTooltip;

package/dist/components/presentation-editor/dragged.svelte.d.ts

@@ -1,18 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Dragged: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Dragged = InstanceType<typeof Dragged>;
-export default Dragged;

package/dist/components/presentation-editor/header.svelte

@@ -1,54 +0,0 @@
-<script lang="ts">
-	import UndoIcon from 'lucide-svelte/icons/undo-2';
-	import RedoIcon from 'lucide-svelte/icons/redo-2';
-	import { Separator } from '../ui/separator/index.js';
-	import { Button } from '../ui/button/index.js';
-	import { getPresentationEditorContext } from './presentation-editor.svelte.js';
-	import { BackgroundLayerButtons } from './layers/index.js';
-	import ActiveLayersButtons from './active-layers-buttons.svelte';
-
-	const editor = getPresentationEditorContext();
-</script>
-
-<div class="bg-background h-12 w-full border-b border-gray-200 px-2">
-	<div class="flex h-full items-center justify-between">
-		<div class="grid grid-flow-col items-center gap-2">
-			<Button
-				variant="ghost"
-				size="icon-xs"
-				disabled={editor.historyIndex === -1}
-				onclick={() => editor.historyUndo()}
-			>
-				<UndoIcon class="h-6 w-6" />
-			</Button>
-			<Button
-				variant="ghost"
-				size="icon-xs"
-				disabled={editor.historyIndex === editor.historyActions.length - 1}
-				onclick={() => editor.historyRedo()}
-			>
-				<RedoIcon class="h-6 w-6" />
-			</Button>
-			<div class="grid grid-flow-col items-center gap-2 overflow-x-auto">
-				{#if !editor.activeSlide.locked}
-					{#if editor.activeBackground}
-						{#if !editor.activeSlide.backgroundLocked}
-							<BackgroundLayerButtons />
-						{/if}
-					{:else if editor.activeLayers.length}
-						<ActiveLayersButtons />
-					{/if}
-				{/if}
-			</div>
-			<Separator orientation="vertical" />
-			<Button
-				variant="ghost"
-				size="xs"
-				active={editor.activeSidebarPopup === 'position'}
-				onclick={() => editor.toggleActiveSidebarPopup('position')}
-			>
-				Position
-			</Button>
-		</div>
-	</div>
-</div>

package/dist/components/presentation-editor/header.svelte.d.ts

@@ -1,18 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Header: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Header = InstanceType<typeof Header>;
-export default Header;

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

@@ -1,2 +0,0 @@
-import PresentationEditor from './presentation-editor.svelte';
-export { PresentationEditor };

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

@@ -1,2 +0,0 @@
-import PresentationEditor from './presentation-editor.svelte';
-export { PresentationEditor };