@peteai/presentation-editor 0.0.6 → 0.0.7

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { Page } from '../../../types.js';
+	import { ColorIndicator } from '../../../color-indicator/index.js';
+	import BackgroundContentImage from './background-content-image.svelte';
+
+	interface Props {
+		page: Page;
+		thumbScale?: number;
+	}
+
+	let { page, thumbScale }: Props = $props();
+
+	let backgroundColor = $derived(page.backgroundColor || '#ffffff');
+</script>
+
+<div class="h-full w-full">
+	<ColorIndicator color={backgroundColor} />
+	{#if page.backgroundImage}
+		<BackgroundContentImage backgroundImage={page.backgroundImage} {thumbScale} />
+	{/if}
+</div>

package/dist/components/{presentation-editor → editor}/layers/types/background/background-layer-content.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { Slide } from '../../../types.js';
+import type { Page } from '../../../types.js';
 interface Props {
-    slide: Slide;
+    page: Page;
     thumbScale?: number;
 }
 declare const BackgroundLayerContent: import("svelte").Component<Props, {}, "">;

package/dist/components/{presentation-editor → editor}/layers/types/background/background-layer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import * as ContextMenu from '../../../../ui/context-menu/index.js';
-	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+	import { getEditorContext } from '../../../editor.svelte.js';
 	import BackgroundMenuContent from '../../../menu/background-menu-content.svelte';
 	import { BackgroundLayerContent } from './index.js';
 	import { calculateImageCover } from '../../utils.js';
@@ -13,7 +13,7 @@
 
 	let ref: HTMLDivElement;
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	const onMouseDown = (e: MouseEvent) => {
 		console.log('mousedown', 'background', e);
@@ -75,7 +75,7 @@
 					...calculateImageCover(dragged.image, { width: editor.width, height: editor.height }),
 					image: dragged.image,
 				});
-				editor.addLayers(editor.activeSlide.id, layer, 0);
+				editor.addLayers(editor.activePage.id, layer, 0);
 			} else {
 				const rect = ref.getBoundingClientRect();
 				const x = (e.clientX - rect.left - dragged.offsetX) / editor.zoom;
@@ -100,12 +100,10 @@
 			ondragover={onDragOver}
 			ondrop={onDrop}
 		>
-			<div class="h-full w-full">
-				<BackgroundLayerContent slide={editor.activeSlide} />
-			</div>
+			<BackgroundLayerContent page={editor.activePage} />
 		</div>
 	</ContextMenu.Trigger>
 	<ContextMenu.Content class="w-80">
-		<BackgroundMenuContent {editor} slide={editor.activeSlide} />
+		<BackgroundMenuContent {editor} page={editor.activePage} />
 	</ContextMenu.Content>
 </ContextMenu.Root>

package/dist/components/editor/layers/types/group/group-child-wrapper.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { getEditorContext } from '../../../editor.svelte.js';
+	import type { GroupLayer, SimpleLayer } from '../../../types.js';
+
+	interface Props {
+		groupLayer: GroupLayer;
+		layer: SimpleLayer;
+		children?: import('svelte').Snippet;
+	}
+
+	let { groupLayer, layer = $bindable(), children }: Props = $props();
+
+	const editor = getEditorContext();
+
+	const onClick = (e: MouseEvent) => {
+		console.log('click', layer.id, e);
+		if (editor.activeAction) return;
+		if (e.shiftKey) return;
+		e.stopPropagation();
+		editor.setActiveGroupChild(layer.id);
+	};
+
+	const onMouseDown = (e: MouseEvent) => {
+		console.log('mousedown', layer.id, e);
+		if (editor.activeAction) return;
+		if (editor.activeLayers.find((l) => l.id === groupLayer.id)) return;
+		if (e.shiftKey) return;
+		editor.setActiveGroupChild(layer.id);
+	};
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="absolute select-none"
+	style:width="{layer.width * layer.scale}px"
+	style:height="{layer.height * layer.scale}px"
+	style:transform={`translate(${layer.x}px, ${layer.y}px) rotate(${layer.rotate}deg)`}
+	style:opacity={layer.opacity}
+	onclick={onClick}
+	onmousedown={onMouseDown}
+>
+	{@render children?.()}
+</div>

package/dist/components/editor/layers/types/group/group-child-wrapper.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { GroupLayer, SimpleLayer } from '../../../types.js';
+interface Props {
+    groupLayer: GroupLayer;
+    layer: SimpleLayer;
+    children?: import('svelte').Snippet;
+}
+declare const GroupChildWrapper: import("svelte").Component<Props, {}, "layer">;
+type GroupChildWrapper = ReturnType<typeof GroupChildWrapper>;
+export default GroupChildWrapper;

package/dist/components/editor/layers/types/group/group-layer-content.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { Page, GroupLayer } from '../../../types.js';
+	import { TextLayerContent } from '../text/index.js';
+	import { ImageLayerContent } from '../image/index.js';
+
+	interface Props {
+		page: Page;
+		layer: GroupLayer;
+		thumbScale?: number;
+	}
+
+	let { page, layer: groupLayer, thumbScale = 1 }: Props = $props();
+
+	let children = $derived(
+		page.layers
+			.filter((l) => l.type !== 'group')
+			.filter((l) => l.groupId === groupLayer.id)
+			.toSorted((a, b) => a.sortOrder - b.sortOrder),
+	);
+
+	let scale = $derived(groupLayer.scale * thumbScale);
+</script>
+
+<div
+	class="origin-top-left"
+	style:width="{groupLayer.width / groupLayer.scale}px"
+	style:height="{groupLayer.height / groupLayer.scale}px"
+	style:transform={scale !== 1 ? `scale(${scale})` : null}
+>
+	{#each children as layer (layer.id)}
+		<div
+			class="absolute select-none"
+			style:width="{layer.width * layer.scale}px"
+			style:height="{layer.height * layer.scale}px"
+			style:transform={`translate(${layer.x}px, ${layer.y}px) rotate(${layer.rotate}deg)`}
+			style:opacity={layer.opacity}
+		>
+			{#if layer.type === 'text'}
+				<TextLayerContent {layer} />
+			{:else if layer.type === 'image'}
+				<ImageLayerContent {layer} />
+			{/if}
+		</div>
+	{/each}
+</div>

package/dist/components/editor/layers/types/group/group-layer-content.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Page, GroupLayer } from '../../../types.js';
+interface Props {
+    page: Page;
+    layer: GroupLayer;
+    thumbScale?: number;
+}
+declare const GroupLayerContent: import("svelte").Component<Props, {}, "">;
+type GroupLayerContent = ReturnType<typeof GroupLayerContent>;
+export default GroupLayerContent;

package/dist/components/editor/layers/types/group/group-layer.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { getEditorContext } from '../../../editor.svelte.js';
+	import type { Page, GroupLayer } from '../../../types.js';
+	import GroupChildWrapper from './group-child-wrapper.svelte';
+	import { ImageLayer } from '../image/index.js';
+	import { TextLayer } from '../text/index.js';
+
+	interface Props {
+		page: Page;
+		layer: GroupLayer;
+	}
+
+	let { page, layer: groupLayer }: Props = $props();
+
+	const editor = getEditorContext();
+</script>
+
+<div
+	class="origin-top-left"
+	style:width="{groupLayer.width / groupLayer.scale}px"
+	style:height="{groupLayer.height / groupLayer.scale}px"
+	style:transform={groupLayer.scale !== 1 ? `scale(${groupLayer.scale})` : null}
+>
+	{#each editor.findGroupChildren(page, groupLayer.id) as layer (layer.id)}
+		<GroupChildWrapper {groupLayer} {layer}>
+			{#if layer.type === 'text'}
+				<TextLayer {layer} />
+			{:else if layer.type === 'image'}
+				<ImageLayer {layer} />
+			{/if}
+		</GroupChildWrapper>
+	{/each}
+</div>

package/dist/components/editor/layers/types/group/group-layer.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Page, GroupLayer } from '../../../types.js';
+interface Props {
+    page: Page;
+    layer: GroupLayer;
+}
+declare const GroupLayer: import("svelte").Component<Props, {}, "">;
+type GroupLayer = ReturnType<typeof GroupLayer>;
+export default GroupLayer;

package/dist/components/editor/layers/types/group/index.d.ts

@@ -0,0 +1,3 @@
+import Root from './group-layer.svelte';
+import GroupLayerContent from './group-layer-content.svelte';
+export { Root, Root as GroupLayer, GroupLayerContent };

package/dist/components/editor/layers/types/group/index.js

@@ -0,0 +1,3 @@
+import Root from './group-layer.svelte';
+import GroupLayerContent from './group-layer-content.svelte';
+export { Root, Root as GroupLayer, GroupLayerContent };

package/dist/components/{presentation-editor → editor}/layers/types/image/image-layer-active.svelte

@@ -3,7 +3,7 @@
 	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 { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+	import { getEditorContext } from '../../../editor.svelte.js';
 
 	interface Props {
 		layer: ImageLayer;
@@ -11,17 +11,14 @@
 
 	let { layer = $bindable() }: Props = $props();
 
-	const editor = getPresentationEditorContext();
-
-	let scale = $derived(layer.scale || 1);
-	let rotate = $derived(layer.rotate || 0);
+	const editor = getEditorContext();
 </script>
 
 <div
 	class="pointer-events-none absolute left-0 top-0 h-full w-full"
-	style:width={`${layer.width * scale * editor.zoom}px`}
-	style:height={`${layer.height * scale * editor.zoom}px`}
-	style:transform={`translate(${layer.x * editor.zoom}px, ${layer.y * editor.zoom}px) rotate(${rotate}deg)`}
+	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">
@@ -29,11 +26,11 @@
 			<SideResizeControl origin="right" bind:layer />
 			<SideResizeControl origin="top" bind:layer />
 			<SideResizeControl origin="bottom" bind:layer />
-			<CornerScaleControl origin="bottom-right" bind:layer />
-			<CornerScaleControl origin="bottom-left" bind:layer />
-			<CornerScaleControl origin="top-right" bind:layer />
-			<CornerScaleControl origin="top-left" bind:layer />
-			<RotateControl 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/{presentation-editor → editor}/layers/types/image/image-layer-content.svelte

@@ -2,6 +2,7 @@
 	import type { ImageLayer } from '../../../types.js';
 	import ColorIndicatorGradientDef from '../../../color-indicator/color-indicator-gradient-def.svelte';
 	import { generateId } from '../../../../../utils.js';
+	import { onMount } from 'svelte';
 
 	interface Props {
 		layer: ImageLayer;
@@ -11,10 +12,12 @@
 	let { layer, thumbScale = 1 }: Props = $props();
 
 	let imageLoaded = $state(false);
-	const image = new Image();
-	image.crossOrigin = 'anonymous';
-	image.src = layer.image.src;
-	image.onload = () => (imageLoaded = true);
+	onMount(() => {
+		const image = new Image();
+		image.crossOrigin = 'anonymous';
+		image.src = layer.image.src;
+		image.onload = () => (imageLoaded = true);
+	});
 
 	const layerBorderId = generateId();
 	const gradientId = generateId();
@@ -22,14 +25,14 @@
 	let borderColor = $derived(layer.borderColor || '#000000');
 	let isGradient = $derived(~borderColor.indexOf(':'));
 
-	let scale = $derived(layer.scale || 1);
-	let width = $derived(layer.width * scale * thumbScale);
-	let height = $derived(layer.height * scale * thumbScale);
+	let scale = $derived(layer.scale * thumbScale);
+	let width = $derived(layer.width * scale);
+	let height = $derived(layer.height * scale);
 	let flipTransform = $derived(
 		layer.flipX || layer.flipY ? `scale(${layer.flipX ? -1 : 1}, ${layer.flipY ? -1 : 1})` : null,
 	);
 
-	let cornderRadius = $derived((layer.cornerRadius || 0) * thumbScale);
+	let cornderRadius = $derived(layer.cornerRadius * thumbScale);
 
 	const bezier = 0.447715;
 	let roundedClipPath = $derived(
@@ -46,9 +49,9 @@
 	<div class="h-full w-full transition-transform" style:transform={flipTransform}>
 		<div
 			class="relative"
-			style:width="{layer.image.width * scale * thumbScale}px"
-			style:height="{layer.image.height * scale * thumbScale}px"
-			style:transform={`translate(${-(layer.offsetX || 0) * scale * thumbScale}px, ${-(layer.offsetY || 0) * scale * thumbScale}px)`}
+			style:width="{layer.image.width * scale}px"
+			style:height="{layer.image.height * scale}px"
+			style:transform={`translate(${-layer.offsetX * scale}px, ${-layer.offsetY * scale}px)`}
 		>
 			{#if imageLoaded}
 				<img

package/dist/components/{presentation-editor → editor}/layers/types/image/image-layer.svelte

@@ -1,12 +1,8 @@
 <script lang="ts">
 	import type { Image, ImageLayer } from '../../../types.js';
-	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+	import { getEditorContext } from '../../../editor.svelte.js';
 	import ImageLayerContent from './image-layer-content.svelte';
-	import {
-		calculateBoundingBox,
-		calculateImageCover,
-		calculateLayerTransform,
-	} from '../../utils.js';
+	import { calculateBoundingBox, calculateImageCover } from '../../utils.js';
 
 	interface Props {
 		layer: ImageLayer;
@@ -14,20 +10,18 @@
 
 	let { layer = $bindable() }: Props = $props();
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	let layerSubstitute: ImageLayer | null = $state(null);
 
 	let ref: HTMLDivElement;
 
 	const buildImageDropChanges = (image: Image) => {
-		const scale = layer.scale || 1;
-
 		return {
 			image,
 			...calculateImageCover(image, {
-				width: layer.width * scale,
-				height: layer.height * scale,
+				width: layer.width * layer.scale,
+				height: layer.height * layer.scale,
 			}),
 		};
 	};
@@ -79,14 +73,14 @@
 				);
 				Object.assign(layer, redo);
 				editor.historyPush({
-					type: 'layer',
-					slideId: editor.activeSlide.id,
+					type: 'layerUpdate',
+					pageId: editor.activePage.id,
 					layer: { id: layer.id, type: layer.type },
 					undo,
 					redo,
 				});
 			} else {
-				const bbox = calculateBoundingBox(calculateLayerTransform(layer));
+				const bbox = calculateBoundingBox(layer);
 				const rect = ref.getBoundingClientRect();
 				const x = (e.clientX - rect.left - dragged.offsetX) / editor.zoom + bbox.x;
 				const y = (e.clientY - rect.top - dragged.offsetY) / editor.zoom + bbox.y;

package/dist/components/{presentation-editor/layers/types/html → editor/layers/types/text}/buttons/alignment-button/alignment-button.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">
-	import AlignJustifyIcon from 'lucide-svelte/icons/align-justify';
-	import AlignRightIcon from 'lucide-svelte/icons/align-right';
-	import AlignCenterIcon from 'lucide-svelte/icons/align-center';
-	import AlignLeftIcon from 'lucide-svelte/icons/align-left';
+	import AlignJustifyIcon from '@lucide/svelte/icons/align-justify';
+	import AlignRightIcon from '@lucide/svelte/icons/align-right';
+	import AlignCenterIcon from '@lucide/svelte/icons/align-center';
+	import AlignLeftIcon from '@lucide/svelte/icons/align-left';
 	import { Button } from '../../../../../../ui/button/index.js';
-	import { getPresentationEditorContext } from '../../../../../presentation-editor.svelte.js';
-	import type { HtmlLayer } from '../../../../../types.js';
+	import { getEditorContext } from '../../../../../editor.svelte.js';
+	import type { TextLayer } from '../../../../../types.js';
 	import type { Editor } from '../../editor/index.js';
 	import { createEditorNotReactive } from '../../editor/utils.js';
 
 	interface Props {
-		layers: HtmlLayer[];
+		layers: TextLayer[];
 	}
 
 	let { layers = $bindable() }: Props = $props();
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	const { htmlEditor } = editor;
 
@@ -52,9 +52,8 @@
 		if (editor.activeAction?.type === 'edit') {
 			$htmlEditor.commands.setTextAlign(nextAlign[currentAlign]);
 		} else {
-			editor.historyPush({
-				type: 'layersGroup',
-				actions: layers.map((layer) => {
+			editor.historyPush(
+				layers.map((layer) => {
 					editorNotReactive
 						.chain()
 						.setContent(layer.html)
@@ -63,14 +62,14 @@
 						.run();
 
 					return {
-						type: 'layer',
-						slideId: editor.activeSlide.id,
+						type: 'layerUpdate',
+						pageId: editor.activePage.id,
 						layer: { id: layer.id, type: layer.type },
 						undo: { html: layer.html },
 						redo: { html: editorNotReactive.getJSON() },
 					};
 				}),
-			});
+			);
 		}
 	};
 </script>

package/dist/components/{presentation-editor/layers/types/html → editor/layers/types/text}/buttons/alignment-button/alignment-button.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { HtmlLayer } from '../../../../../types.js';
+import type { TextLayer } from '../../../../../types.js';
 interface Props {
-    layers: HtmlLayer[];
+    layers: TextLayer[];
 }
 declare const AlignmentButton: import("svelte").Component<Props, {}, "layers">;
 type AlignmentButton = ReturnType<typeof AlignmentButton>;

package/dist/components/editor/layers/types/text/buttons/bold-button/bold-button.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import BoldIcon from '@lucide/svelte/icons/bold';
+	import { Toggle } from '../../../../../../ui/toggle/index.js';
+	import type { TextLayer } from '../../../../../types.js';
+	import { getEditorContext } from '../../../../../editor.svelte.js';
+	import { createEditorNotReactive } from '../../editor/utils.js';
+
+	interface Props {
+		layers: TextLayer[];
+	}
+
+	let { layers = $bindable() }: Props = $props();
+
+	const editor = getEditorContext();
+
+	const { htmlEditor } = editor;
+
+	const editorNotReactive = createEditorNotReactive();
+
+	const isActive = $derived.by(() => {
+		if (editor.activeAction?.type === 'edit') {
+			return $htmlEditor.isActive('bold');
+		} else {
+			return layers.every((layer) => {
+				editorNotReactive.chain().setContent(layer.html).selectAll().run();
+				return editorNotReactive.isActive('bold');
+			});
+		}
+	});
+
+	const setValue = async (value: boolean) => {
+		if (editor.activeAction?.type === 'edit') {
+			if (value) {
+				$htmlEditor.chain().focus().setBold().run();
+			} else {
+				$htmlEditor.chain().focus().unsetBold().run();
+			}
+		} else {
+			editor.historyPush(
+				(
+					await Promise.all(
+						layers.map(async (layer) => {
+							let chain = editorNotReactive.chain().setContent(layer.html).selectAll();
+							if (value) {
+								chain = chain.setBold();
+							} else {
+								chain = chain.unsetBold();
+							}
+							chain.run();
+
+							return editor.applyHtmlToLayer(
+								editor.createTextLayerInitial(editor.activePage, layer),
+								editorNotReactive.getJSON(),
+							);
+						}),
+					)
+				).flat(),
+			);
+		}
+	};
+</script>
+
+<Toggle size="xs" pressed={isActive} onPressedChange={(val) => setValue(val)}>
+	<BoldIcon class="h-6 w-6" />
+</Toggle>

package/dist/components/{presentation-editor/layers/types/html → editor/layers/types/text}/buttons/bold-button/bold-button.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { HtmlLayer } from '../../../../../types.js';
+import type { TextLayer } from '../../../../../types.js';
 interface Props {
-    layers: HtmlLayer[];
+    layers: TextLayer[];
 }
 declare const BoldButton: import("svelte").Component<Props, {}, "layers">;
 type BoldButton = ReturnType<typeof BoldButton>;

package/dist/components/{presentation-editor/layers/types/html → editor/layers/types/text}/buttons/case-button/case-button.svelte

@@ -1,19 +1,18 @@
 <script lang="ts">
-	import CaseIcon from 'lucide-svelte/icons/case-sensitive';
+	import CaseIcon from '@lucide/svelte/icons/case-sensitive';
 	import { Toggle } from '../../../../../../ui/toggle/index.js';
 	import { extractUppercase } from '../../editor/utils.js';
-	import type { HtmlLayer } from '../../../../../types.js';
-	import { getPresentationEditorContext } from '../../../../../presentation-editor.svelte.js';
+	import type { TextLayer } from '../../../../../types.js';
+	import { getEditorContext } from '../../../../../editor.svelte.js';
 	import { createEditorNotReactive } from '../../editor/utils.js';
-	import { applyHtmlToLayer } from '../../../../utils.js';
 
 	interface Props {
-		layers: HtmlLayer[];
+		layers: TextLayer[];
 	}
 
 	let { layers = $bindable() }: Props = $props();
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	const { htmlEditor } = editor;
 
@@ -38,31 +37,26 @@
 				$htmlEditor.chain().focus().unsetTextTransform().run();
 			}
 		} else {
-			editor.historyPush({
-				type: 'layersGroup',
-				actions: await Promise.all(
-					layers.map(async (layer) => {
-						let chain = editorNotReactive.chain().setContent(layer.html).selectAll();
-						if (value) {
-							chain = chain.setTextTransform('uppercase');
-						} else {
-							chain = chain.unsetTextTransform();
-						}
-						chain.run();
+			editor.historyPush(
+				(
+					await Promise.all(
+						layers.map(async (layer) => {
+							let chain = editorNotReactive.chain().setContent(layer.html).selectAll();
+							if (value) {
+								chain = chain.setTextTransform('uppercase');
+							} else {
+								chain = chain.unsetTextTransform();
+							}
+							chain.run();
 
-						const undo = { html: layer.html, x: layer.x, y: layer.y, height: layer.height };
-						const redo = await applyHtmlToLayer(layer, editorNotReactive.getJSON());
-
-						return {
-							type: 'layer',
-							slideId: editor.activeSlide.id,
-							layer: { id: layer.id, type: layer.type },
-							undo,
-							redo,
-						};
-					}),
-				),
-			});
+							return editor.applyHtmlToLayer(
+								editor.createTextLayerInitial(editor.activePage, layer),
+								editorNotReactive.getJSON(),
+							);
+						}),
+					)
+				).flat(),
+			);
 		}
 	};
 </script>

package/dist/components/{presentation-editor/layers/types/html → editor/layers/types/text}/buttons/case-button/case-button.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { HtmlLayer } from '../../../../../types.js';
+import type { TextLayer } from '../../../../../types.js';
 interface Props {
-    layers: HtmlLayer[];
+    layers: TextLayer[];
 }
 declare const CaseButton: import("svelte").Component<Props, {}, "layers">;
 type CaseButton = ReturnType<typeof CaseButton>;

package/dist/components/{presentation-editor/layers/types/html → editor/layers/types/text}/buttons/color-button/color-button.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
 	import { Button } from '../../../../../../ui/button/index.js';
-	import { getPresentationEditorContext } from '../../../../../presentation-editor.svelte.js';
+	import { getEditorContext } from '../../../../../editor.svelte.js';
 	import { extractNodeColors, extractSelectionColors } from '../../editor/utils.js';
 	import { buildBackgroundCircleStyle } from '../../../../utils.js';
-	import type { HtmlLayer } from '../../../../../types.js';
+	import type { TextLayer } from '../../../../../types.js';
 
 	interface Props {
-		layers: HtmlLayer[];
+		layers: TextLayer[];
 	}
 
 	let { layers = $bindable() }: Props = $props();
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	const { htmlEditor } = editor;