@peteai/presentation-editor 0.0.6 → 0.0.7

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';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@peteai/presentation-editor",
-	"version": "0.0.6",
+	"version": "0.0.7",
 	"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/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.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 };