@peteai/presentation-editor 0.0.8 → 0.0.10

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.8",
+	"version": "0.0.10",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
@@ -47,35 +47,35 @@
 		"svelte": "^5.19.7"
 	},
 	"devDependencies": {
-		"@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",
+		"@playwright/test": "^1.55.1",
+		"@sveltejs/adapter-auto": "^6.1.0",
+		"@sveltejs/kit": "^2.43.4",
+		"@sveltejs/package": "^2.5.4",
+		"@sveltejs/vite-plugin-svelte": "^6.2.1",
 		"@types/eslint": "^9.6.1",
 		"@types/uniqid": "^5.3.4",
 		"@types/webfontloader": "^1.6.38",
 		"autoprefixer": "^10.4.21",
-		"eslint": "^9.32.0",
+		"eslint": "^9.36.0",
 		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.11.0",
-		"globals": "^16.3.0",
+		"eslint-plugin-svelte": "^3.12.4",
+		"globals": "^16.4.0",
 		"postcss-cli": "^11.0.1",
 		"prettier": "^3.6.2",
 		"prettier-plugin-svelte": "^3.4.0",
 		"prettier-plugin-tailwindcss": "^0.6.14",
-		"publint": "^0.3.12",
-		"svelte": "^5.37.1",
-		"svelte-check": "^4.3.0",
+		"publint": "^0.3.13",
+		"svelte": "^5.39.6",
+		"svelte-check": "^4.3.2",
 		"svelte-kit-sst": "^2.43.5",
 		"tailwindcss": "^3.4.17",
-		"typescript": "^5.8.3",
-		"typescript-eslint": "^8.38.0",
-		"vite": "^7.0.6",
+		"typescript": "^5.9.2",
+		"typescript-eslint": "^8.44.1",
+		"vite": "^7.1.7",
 		"vitest": "^3.2.4"
 	},
 	"dependencies": {
-		"@lucide/svelte": "^0.534.0",
+		"@lucide/svelte": "^0.544.0",
 		"@tiptap/core": "^2.14.0",
 		"@tiptap/extension-bold": "^2.14.0",
 		"@tiptap/extension-bullet-list": "^2.14.0",
@@ -92,11 +92,11 @@
 		"@tiptap/extension-text-style": "^2.14.0",
 		"@tiptap/extension-underline": "^2.14.0",
 		"@tiptap/pm": "^2.14.0",
-		"bits-ui": "^2.8.13",
+		"bits-ui": "^2.11.4",
 		"clsx": "^2.1.1",
 		"esm-env": "^1.2.2",
-		"svelte-dnd-action": "^0.9.64",
-		"svelte-radix": "^2.0.1",
+		"svelte-dnd-action": "^0.9.65",
+		"svelte-radix": "^2.0.2",
 		"tailwind-merge": "^3.3.1",
 		"tailwind-variants": "^1.0.0",
 		"tailwindcss-animate": "^1.0.7",

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;

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

@@ -1,136 +0,0 @@
-<script lang="ts">
-	import { flip } from 'svelte/animate';
-	import { dndzone, type DndEvent } from 'svelte-dnd-action';
-	import XIcon from '@lucide/svelte/icons/x';
-	import * as ContextMenu from '../../ui/context-menu/index.js';
-	import { Button } from '../../ui/button/index.js';
-	import {
-		LayerButton,
-		LayerThumbWrapper,
-		TextLayerContent,
-		ImageLayerContent,
-		BackgroundLayerContent,
-		GroupLayerContent,
-	} from '../layers/index.js';
-	import { getEditorContext } from '../editor.svelte.js';
-	import LayerMenuContent from '../menu/layer-menu-content.svelte';
-	import BackgroundMenuContent from '../menu/background-menu-content.svelte';
-	import type { Layer } from '../types.js';
-
-	const editor = $derived(getEditorContext());
-
-	const flipDurationMs = 300;
-	const otherOptions = { flipDurationMs, type: 'layers', dropTargetStyle: {} };
-
-	function handleDndConsider(e: CustomEvent<DndEvent<Layer>>) {
-		editor.rootLayers = e.detail.items;
-	}
-
-	async function handleDndFinalize(e: CustomEvent<DndEvent<Layer>>) {
-		console.log('handleDndFinalize', e);
-
-		editor.rootLayers = e.detail.items;
-
-		const index = e.detail.items.findIndex((item) => item.id === e.detail.info.id);
-		const item = e.detail.items[index];
-
-		let redo;
-		const prev = e.detail.items[index - 1];
-		const next = e.detail.items[index + 1];
-		if (prev && next) {
-			if (!(prev.sortOrder < item.sortOrder && next.sortOrder > item.sortOrder)) {
-				redo = { sortOrder: (prev.sortOrder + next.sortOrder) / 2 };
-			}
-		} else if (next) {
-			if (next && next.sortOrder <= item.sortOrder) {
-				redo = { sortOrder: next.sortOrder - 1 };
-			}
-		} else if (prev) {
-			if (prev && prev.sortOrder >= item.sortOrder) {
-				redo = { sortOrder: prev.sortOrder + 1 };
-			}
-		}
-
-		if (redo) {
-			editor.historyPush({
-				type: 'layerUpdate',
-				pageId: editor.activePage.id,
-				layer: { id: item.id, type: item.type },
-				undo: { sortOrder: item.sortOrder },
-				redo,
-			});
-		}
-	}
-</script>
-
-<div class="flex h-full flex-col gap-2">
-	<div class="flex items-center justify-between">
-		<div class="text-sm font-bold">Position</div>
-		<Button variant="ghost" size="icon" onclick={() => (editor.activeSidebarPopup = null)}>
-			<XIcon />
-		</Button>
-	</div>
-	<div class="text-lg font-medium text-gray-500">Layers</div>
-	<div class="flex-1 resize-none overflow-y-auto">
-		<div class="flex flex-col gap-2">
-			<section
-				class="flex flex-col-reverse gap-2"
-				aria-label="Layers"
-				use:dndzone={{
-					items: editor.rootLayers,
-					dragDisabled: editor.activePage.locked,
-					...otherOptions,
-				}}
-				onconsider={handleDndConsider}
-				onfinalize={handleDndFinalize}
-			>
-				{#each editor.rootLayers as layer (layer.id)}
-					<div aria-label={layer.type} animate:flip={{ duration: flipDurationMs }}>
-						<ContextMenu.Root
-							onOpenChange={(open) =>
-								open &&
-								!editor.activeLayers.find((l) => l.id === layer.id) &&
-								editor.setActiveLayers(layer.id)}
-						>
-							<ContextMenu.Trigger>
-								<LayerButton {layer}>
-									<LayerThumbWrapper {layer} thumb={{ width: 192, height: 32 }}>
-										{#snippet children({ thumbScale })}
-											{#if layer.type === 'text'}
-												<TextLayerContent {layer} {thumbScale} />
-											{:else if layer.type === 'image'}
-												<ImageLayerContent {layer} {thumbScale} />
-											{:else if layer.type === 'group'}
-												<GroupLayerContent page={editor.activePage} {layer} {thumbScale} />
-											{/if}
-										{/snippet}
-									</LayerThumbWrapper>
-								</LayerButton>
-							</ContextMenu.Trigger>
-							<ContextMenu.Content class="w-72">
-								<LayerMenuContent />
-							</ContextMenu.Content>
-						</ContextMenu.Root>
-					</div>
-				{/each}
-			</section>
-			<ContextMenu.Root>
-				<ContextMenu.Trigger>
-					<LayerButton>
-						{@const thumbScale = Math.max(192 / editor.width, 32 / editor.height)}
-						<div
-							class="absolute top-1/2 -translate-y-1/2"
-							style:width="{editor.width * thumbScale}px"
-							style:height="{editor.height * thumbScale}px"
-						>
-							<BackgroundLayerContent page={editor.activePage} {thumbScale} />
-						</div>
-					</LayerButton>
-				</ContextMenu.Trigger>
-				<ContextMenu.Content class="w-72">
-					<BackgroundMenuContent {editor} page={editor.activePage} />
-				</ContextMenu.Content>
-			</ContextMenu.Root>
-		</div>
-	</div>
-</div>

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

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