@peteai/presentation-editor 0.0.1 → 0.0.3

package/dist/components/ui/infinite-loader/infinite-loader.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+	import { onMount, onDestroy, type Snippet } from 'svelte';
+	import { LoaderState, STATUS } from './infinite-loader-state.svelte.js';
+	import type { LoopTracker } from './infinite-loader-loop-tracker.js';
+	import { Button } from '../button/index.js';
+	import { cn } from '../../../utils.js';
+
+	type InfiniteLoaderProps = {
+		triggerLoad: () => Promise<void>;
+		intersectionOptions?: Partial<IntersectionObserver>;
+		loaderState: LoaderState;
+		loopTracker?: LoopTracker;
+		class?: string;
+		loading?: Snippet;
+		noResults?: Snippet;
+		noData?: Snippet;
+		coolingOff?: Snippet;
+		error?: Snippet<[typeof attemptLoad]>;
+	};
+
+	const {
+		triggerLoad,
+		intersectionOptions = {},
+		loaderState,
+		loopTracker,
+		class: className,
+		loading: loadingSnippet,
+		noResults: noResultsSnippet,
+		noData: noDataSnippet,
+		coolingOff: coolingOffSnippet,
+		error: errorSnippet,
+	}: InfiniteLoaderProps = $props();
+
+	let intersectionTarget = $state<HTMLElement>();
+	let observer = $state<IntersectionObserver>();
+
+	let showLoading = $derived(loaderState.status === STATUS.LOADING);
+	let showError = $derived(loaderState.status === STATUS.ERROR);
+	let showNoResults = $derived(loaderState.status === STATUS.COMPLETE && loaderState.isFirstLoad);
+	let showNoData = $derived(loaderState.status === STATUS.COMPLETE && !loaderState.isFirstLoad);
+	let showCoolingOff = $derived(loaderState.status !== STATUS.COMPLETE && loopTracker?.coolingOff);
+
+	async function attemptLoad() {
+		// If we're complete, don't attempt to load again
+		// If we're not ready (i.e. in the middle of a fetch) don't attempt to load again
+		// However, if we're in an error state, allow the user to retry via btn click
+		if (
+			loaderState.status === STATUS.COMPLETE ||
+			(loaderState.status !== STATUS.READY && loaderState.status !== STATUS.ERROR)
+		) {
+			return;
+		}
+
+		loaderState.status = STATUS.LOADING;
+
+		// Skip loading if we're in infinite loop cool-off
+		if (!loopTracker?.coolingOff) {
+			await triggerLoad();
+			loopTracker?.track();
+		}
+
+		// @ts-expect-error - client can set status to 'COMPLETE' inside the
+		// `triggerLoad` fn above via `loaderState.complete()`, TS obviously doesn't know this.
+		if (loaderState.status !== STATUS.ERROR && loaderState.status !== STATUS.COMPLETE) {
+			if (loaderState.status === STATUS.LOADING) {
+				loaderState.isFirstLoad = false;
+				loaderState.status = STATUS.READY;
+			}
+		}
+	}
+
+	onMount(() => {
+		if (observer || !intersectionTarget) return;
+
+		const appliedIntersectionOptions = {
+			rootMargin: '0px 0px 200px 0px',
+			...intersectionOptions,
+		};
+		observer = new IntersectionObserver(async (entries) => {
+			if (entries[0]?.isIntersecting && loaderState.mounted) {
+				await attemptLoad();
+			}
+		}, appliedIntersectionOptions);
+		observer.observe(intersectionTarget);
+
+		loaderState.mounted = true;
+	});
+
+	onDestroy(() => {
+		if (loaderState.mounted) {
+			if (observer) {
+				observer.disconnect();
+			}
+			if (loopTracker) {
+				loopTracker.destroy();
+			}
+		}
+	});
+</script>
+
+<div
+	bind:this={intersectionTarget}
+	class={cn('flex min-h-px w-full flex-col items-center justify-center', className)}
+>
+	{#if showLoading}
+		{#if loadingSnippet}
+			{@render loadingSnippet()}
+		{:else}
+			Loading...
+		{/if}
+	{/if}
+
+	{#if showNoResults}
+		{#if noResultsSnippet}
+			{@render noResultsSnippet()}
+		{:else}
+			No results
+		{/if}
+	{/if}
+
+	{#if showNoData}
+		{#if noDataSnippet}
+			{@render noDataSnippet()}
+		{:else}
+			No more data
+		{/if}
+	{/if}
+
+	{#if showCoolingOff}
+		{#if coolingOffSnippet}
+			{@render coolingOffSnippet()}
+		{:else}
+			Potential loop detected, please wait and try again..
+		{/if}
+	{/if}
+
+	{#if showError}
+		{#if errorSnippet}
+			{@render errorSnippet(attemptLoad)}
+		{:else}
+			<div class="flex flex-col gap-1 text-sm">
+				<div class="text-destructive-foreground">Oops, something went wrong</div>
+				<Button disabled={loaderState.status === STATUS.COMPLETE} onclick={attemptLoad}>
+					Retry
+				</Button>
+			</div>
+		{/if}
+	{/if}
+</div>

package/dist/components/ui/infinite-loader/infinite-loader.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type Snippet } from 'svelte';
+import { LoaderState } from './infinite-loader-state.svelte.js';
+import type { LoopTracker } from './infinite-loader-loop-tracker.js';
+declare const InfiniteLoader: import("svelte").Component<{
+    triggerLoad: () => Promise<void>;
+    intersectionOptions?: Partial<IntersectionObserver>;
+    loaderState: LoaderState;
+    loopTracker?: LoopTracker;
+    class?: string;
+    loading?: Snippet;
+    noResults?: Snippet;
+    noData?: Snippet;
+    coolingOff?: Snippet;
+    error?: Snippet<[() => Promise<void>]>;
+}, {}, "">;
+type InfiniteLoader = ReturnType<typeof InfiniteLoader>;
+export default InfiniteLoader;

package/dist/components/ui/input/input.svelte

@@ -14,7 +14,7 @@
 <input
 	bind:this={ref}
 	class={cn(
-		'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+		'border-input bg-background placeholder:text-muted-foreground focus-visible:border-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
 		className,
 	)}
 	bind:value

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

@@ -14,21 +14,23 @@
 Discriminated Unions + Destructing (required for bindable) do not
 get along, so we shut typescript up by casting `value` to `never`.
 -->
-<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 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 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>

package/dist/components/ui/tabs/index.d.ts

@@ -0,0 +1,6 @@
+import { Tabs as TabsPrimitive } from "bits-ui";
+import Content from "./tabs-content.svelte";
+import List from "./tabs-list.svelte";
+import Trigger from "./tabs-trigger.svelte";
+declare const Root: import("svelte").Component<TabsPrimitive.RootProps, {}, "ref" | "value">;
+export { Root, Content, List, Trigger, Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger, };

package/dist/components/ui/tabs/index.js

@@ -0,0 +1,8 @@
+import { Tabs as TabsPrimitive } from "bits-ui";
+import Content from "./tabs-content.svelte";
+import List from "./tabs-list.svelte";
+import Trigger from "./tabs-trigger.svelte";
+const Root = TabsPrimitive.Root;
+export { Root, Content, List, Trigger, 
+//
+Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger, };

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.ContentProps = $props();
+</script>
+
+<TabsPrimitive.Content
+	bind:ref
+	class={cn(
+		"ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/tabs/tabs-content.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tabs as TabsPrimitive } from "bits-ui";
+declare const TabsContent: import("svelte").Component<TabsPrimitive.ContentProps, {}, "ref">;
+type TabsContent = ReturnType<typeof TabsContent>;
+export default TabsContent;

package/dist/components/ui/tabs/tabs-list.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.ListProps = $props();
+</script>
+
+<TabsPrimitive.List
+	bind:ref
+	class={cn(
+		"bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1",
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/tabs/tabs-list.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tabs as TabsPrimitive } from "bits-ui";
+declare const TabsList: import("svelte").Component<TabsPrimitive.ListProps, {}, "ref">;
+type TabsList = ReturnType<typeof TabsList>;
+export default TabsList;

package/dist/components/ui/tabs/tabs-trigger.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.TriggerProps = $props();
+</script>
+
+<TabsPrimitive.Trigger
+	bind:ref
+	class={cn(
+		"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm",
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/tabs/tabs-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tabs as TabsPrimitive } from "bits-ui";
+declare const TabsTrigger: import("svelte").Component<TabsPrimitive.TriggerProps, {}, "ref">;
+type TabsTrigger = ReturnType<typeof TabsTrigger>;
+export default TabsTrigger;

package/dist/components/ui/toggle/toggle.svelte

@@ -2,7 +2,8 @@
 	import { type VariantProps, tv } from 'tailwind-variants';
 
 	export const toggleVariants = tv({
-		base: 'ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+		base: 'ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+		// [&_svg]:size-4
 		variants: {
 			variant: {
 				default: 'bg-transparent',
@@ -46,6 +47,6 @@
 <TogglePrimitive.Root
 	bind:ref
 	bind:pressed
-	class={cn(toggleVariants({ variant, size, className }))}
+	class={cn(toggleVariants({ variant, size }), className)}
 	{...restProps}
 />

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

@@ -10,29 +10,7 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
         sm: string;
         lg: string;
     };
-}, undefined, "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 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;
-        outline: string;
-    };
-    size: {
-        default: string;
-        xs: string;
-        sm: string;
-        lg: string;
-    };
-}, {
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        xs: string;
-        sm: string;
-        lg: string;
-    };
-}>, {
+}, undefined, "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
     variant: {
         default: string;
         outline: string;
@@ -54,29 +32,7 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
         sm: string;
         lg: string;
     };
-}, undefined, "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 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;
-        outline: string;
-    };
-    size: {
-        default: string;
-        xs: string;
-        sm: string;
-        lg: string;
-    };
-}, {
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        xs: string;
-        sm: string;
-        lg: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined, "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", unknown, unknown, undefined>>;
 export type ToggleVariant = VariantProps<typeof toggleVariants>['variant'];
 export type ToggleSize = VariantProps<typeof toggleVariants>['size'];
 export type ToggleVariants = VariantProps<typeof toggleVariants>;

package/dist/index.d.ts

@@ -1,9 +1,8 @@
 import { PresentationEditor } from './components/presentation-editor/index.js';
-declare const createEditor: ({ target, props }: {
-    target: any;
-    props: any;
-}) => {
-    fillScreen: () => Promise<void>;
-    fitToScreen: () => void;
+import type { PresentationEditorOptions } from './components/presentation-editor/presentation-editor.svelte.js';
+type createEditorOptions = {
+    target: Document | Element | ShadowRoot;
+    props: PresentationEditorOptions;
 };
+declare const createEditor: (options: createEditorOptions) => Record<string, any>;
 export { PresentationEditor, createEditor };

package/dist/index.js

@@ -1,8 +1,5 @@
 // Reexport your entry components here
 import { mount } from 'svelte';
 import { PresentationEditor } from './components/presentation-editor/index.js';
-const createEditor = ({ target, props }) => mount(PresentationEditor, {
-    target,
-    props,
-});
+const createEditor = (options) => mount(PresentationEditor, options);
 export { PresentationEditor, createEditor };

package/dist/plugin.js

@@ -126,8 +126,9 @@ export default plugin(function ({ addBase }) {
                 sm: 'calc(var(--radius) - 4px)',
             },
             boxShadow: {
-                inner: 'inset 0 0 0 1px hsl(var(--accent))',
-                active: '0 0 0 1px hsl(var(--primary)), inset 0 0 0 2px hsl(var(--primary)), inset 0px 0px 0px 4px white',
+                'inner-1': 'inset 0 0 0 1px hsl(var(--muted-foreground))',
+                hover: 'inset 0 0 0 2px hsl(var(--muted-foreground)), inset 0px 0px 0px 4px hsl(var(--background))',
+                active: 'inset 0 0 0 2px hsl(var(--primary)), inset 0px 0px 0px 4px hsl(var(--background))',
             },
             keyframes: {
                 'accordion-down': {

package/dist/utils.d.ts

@@ -2,5 +2,6 @@ import { type ClassValue } from 'clsx';
 export declare function generateId(): string;
 export declare const noop: () => void;
 export declare function cn(...inputs: ClassValue[]): string;
+export declare const checkIfMac: () => boolean;
 export declare function createDebouncedCallback<T extends (...args: any[]) => any>(callback: T, delay: number): (...args: Parameters<T>) => void;
 export declare function createThrottleCallback<T extends (...args: unknown[]) => unknown>(callback: T, limit: number): (...args: Parameters<T>) => void;

package/dist/utils.js

@@ -10,6 +10,7 @@ export const noop = () => {
 export function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
+export const checkIfMac = () => /Mac OS X/.test(navigator.userAgent);
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function createDebouncedCallback(callback, delay) {
     let timeout = null;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@peteai/presentation-editor",
-	"version": "0.0.1",
+	"version": "0.0.3",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
@@ -43,36 +43,36 @@
 		"svelte": "^5.19.7"
 	},
 	"devDependencies": {
-		"@playwright/test": "^1.50.1",
-		"@sveltejs/adapter-auto": "^3.3.1",
-		"@sveltejs/kit": "^2.17.1",
-		"@sveltejs/package": "^2.3.10",
-		"@sveltejs/vite-plugin-svelte": "^4.0.4",
+		"@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",
+		"@tiptap/extension-list-keymap": "^2.12.0",
 		"@types/eslint": "^9.6.1",
 		"@types/uniqid": "^5.3.4",
-		"autoprefixer": "^10.4.20",
-		"bits-ui": "^1.0.0-next.82",
-		"eslint": "^9.19.0",
-		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.46.1",
-		"globals": "^15.14.0",
-		"lucide-svelte": "^0.456.0",
-		"postcss-cli": "^11.0.0",
-		"prettier": "^3.4.2",
+		"@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",
+		"postcss-cli": "^11.0.1",
+		"prettier": "^3.5.3",
 		"prettier-plugin-svelte": "^3.3.3",
 		"prettier-plugin-tailwindcss": "^0.6.11",
-		"publint": "^0.2.12",
-		"svelte": "^5.19.7",
-		"svelte-check": "^4.1.4",
+		"publint": "^0.3.12",
+		"svelte": "^5.28.2",
+		"svelte-check": "^4.1.7",
 		"svelte-kit-sst": "^2.43.5",
-		"tailwind-merge": "^2.6.0",
-		"tailwind-variants": "^0.2.1",
+		"tailwind-merge": "^3.2.0",
+		"tailwind-variants": "^1.0.0",
 		"tailwindcss": "^3.4.17",
 		"tailwindcss-animate": "^1.0.7",
-		"typescript": "^5.6.3",
-		"typescript-eslint": "^8.23.0",
-		"vite": "^5.4.14",
-		"vitest": "^2.1.9"
+		"typescript": "^5.8.3",
+		"typescript-eslint": "^8.32.0",
+		"vite": "^6.3.5",
+		"vitest": "^3.1.3"
 	},
 	"dependencies": {
 		"@tiptap/core": "^2.11.5",
@@ -90,10 +90,13 @@
 		"@tiptap/extension-text-style": "^2.11.5",
 		"@tiptap/extension-underline": "^2.11.5",
 		"@tiptap/pm": "^2.11.5",
+		"bits-ui": "^1.4.6",
 		"clsx": "^2.1.1",
 		"esm-env": "^1.2.2",
+		"lucide-svelte": "^0.508.0",
 		"svelte-dnd-action": "^0.9.57",
 		"svelte-radix": "^2.0.1",
-		"uniqid": "^5.4.0"
+		"uniqid": "^5.4.0",
+		"webfontloader": "^1.6.28"
 	}
 }

package/dist/components/presentation-editor/app.css

@@ -1,12 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-	* {
-		@apply border-border;
-	}
-	body {
-		@apply bg-background text-foreground;
-	}
-}

package/dist/components/presentation-editor/layers/hovered-layer.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
-	import type { Layer } from '../types.js';
-
-	interface Props {
-		layer: Layer | 'background';
-	}
-
-	let { layer }: Props = $props();
-
-	const editor = getPresentationEditorContext();
-
-	let x = $derived(layer === 'background' ? 0 : layer.x * editor.zoom);
-	let y = $derived(layer === 'background' ? 0 : layer.y * editor.zoom);
-	let width = $derived(
-		(layer === 'background' ? editor.width : layer.width * (layer.scale || 1)) * editor.zoom,
-	);
-	let height = $derived(
-		(layer === 'background' ? editor.height : layer.height * (layer.scale || 1)) * editor.zoom,
-	);
-	let rotate = $derived(layer === 'background' ? 0 : layer.rotate || 0);
-</script>
-
-<div
-	class="absolute"
-	style:width="{width}px"
-	style:height="{height}px"
-	style:transform={`translate(${x}px, ${y}px) rotate(${rotate}deg)`}
->
-	<div
-		class="absolute -inset-px border-2 border-purple-500"
-		style:box-shadow="0 0 0 1px hsla(0, 0%, 100%, .07), inset 0 0 0 1px hsla(0, 0%, 100%, .07)"
-	></div>
-</div>

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

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

package/dist/components/presentation-editor/layers/types/background/background-content.svelte

@@ -1,11 +0,0 @@
-<script lang="ts">
-	import type { Slide } from '../../../types.js';
-
-	interface Props {
-		slide: Slide;
-	}
-
-	let { slide }: Props = $props();
-</script>
-
-<div class="absolute inset-0" style:background-color={slide.backgroundColor}></div>

package/dist/components/presentation-editor/layers/types/background/background-content.svelte.d.ts

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

package/dist/components/presentation-editor/layers/types/background/background-layer-thumb.svelte

@@ -1,12 +0,0 @@
-<script lang="ts">
-	import type { Slide } from '../../../types.js';
-	import BackgroundContent from './background-content.svelte';
-
-	interface Props {
-		slide: Slide;
-	}
-
-	let { slide }: Props = $props();
-</script>
-
-<BackgroundContent {slide} />

package/dist/components/presentation-editor/layers/types/background/background-layer-thumb.svelte.d.ts

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