@peteai/presentation-editor 0.0.1

package/dist/components/presentation-editor/layers/buttons/border-button/border-button.svelte

@@ -0,0 +1,231 @@
+<script lang="ts">
+	import BorderWidthIcon from 'svelte-radix/BorderWidth.svelte';
+	import BorderNoneIcon from 'svelte-radix/CircleBackslash.svelte';
+	import BorderSolidIcon from 'svelte-radix/BorderSolid.svelte';
+	import BorderDashedIcon from 'svelte-radix/BorderDashed.svelte';
+	import BorderDottedIcon from 'svelte-radix/BorderDotted.svelte';
+	import PaletteIcon from 'lucide-svelte/icons/palette';
+	import type {
+		ImageLayer,
+		LayerBorder,
+		LayerChangesAction,
+	} from '../../../types.js';
+	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+	import * as Popover from '../../../../ui/popover/index.js';
+	import { Button } from '../../../../ui/button/index.js';
+	import { Slider } from '../../../../ui/slider/index.js';
+	import { cn, createDebouncedCallback } from '../../../../../utils.js';
+
+	interface Props {
+		layer: ImageLayer;
+	}
+
+	let { layer = $bindable() }: Props = $props();
+
+	const editor = getPresentationEditorContext();
+
+	let selectedColor = $state(layer.borderColor || '#000000');
+
+	const setStyle = (value: LayerBorder['borderStyle']) => {
+		if (value === layer.borderStyle) return;
+
+		const undo = {
+			borderStyle: layer.borderStyle,
+			borderWidth: layer.borderWidth,
+			borderColor: layer.borderColor,
+		};
+		const redo = {
+			borderStyle: value,
+			borderWidth: layer.borderWidth ?? 10,
+			borderColor: selectedColor,
+		};
+		Object.assign(layer, redo);
+		editor.historyPush({ type: 'layer', layer: { id: layer.id, type: layer.type }, undo, redo });
+	};
+
+	let undo: LayerBorder | null = null;
+	const debouncedHistoryPush = createDebouncedCallback((action: LayerChangesAction) => {
+		editor.historyPush(action);
+		undo = null;
+	}, 500);
+
+	let min = 0;
+	let max = 100;
+	const setWidth = (value: string | number, debounce = false) => {
+		let borderWidth = parseInt(value.toString());
+		if (borderWidth > max) {
+			borderWidth = max;
+		} else if (borderWidth < min) {
+			borderWidth = min;
+		}
+		if (!undo) {
+			undo = {
+				borderStyle: layer.borderStyle,
+				borderWidth: layer.borderWidth,
+				borderColor: layer.borderColor,
+			};
+		}
+		const redo = {
+			borderStyle: layer.borderStyle ?? 'solid',
+			borderWidth: borderWidth,
+			borderColor: selectedColor,
+		};
+		Object.assign(layer, redo);
+		const action: LayerChangesAction = {
+			type: 'layer',
+			layer: { id: layer.id, type: layer.type },
+			undo,
+			redo,
+		};
+		if (debounce) {
+			debouncedHistoryPush(action);
+		} else {
+			editor.historyPush(action);
+			undo = null;
+		}
+	};
+
+	const colors = [
+		{ value: '#000000', name: 'Black' },
+		{ value: '#545454', name: 'Dark Gray' },
+		{ value: '#737373', name: 'Gray' },
+		{ value: '#a6a6a6', name: 'Gray' },
+		{ value: '#d9d9d9', name: 'Light Gray' },
+		{ value: '#ffffff', name: 'White' },
+
+		{ value: '#ff3131', name: 'Bright Red' },
+		{ value: '#ff5757', name: 'Coral Red' },
+		{ value: '#ff66c4', name: 'Pink' },
+		{ value: '#cb6ce6', name: 'Magenta' },
+		{ value: '#8c52ff', name: 'Purple' },
+		{ value: '#5e17eb', name: 'Violet' },
+
+		{ value: '#0097b2', name: 'Dark Turquoise' },
+		{ value: '#0cc0df', name: 'Aqua Blue' },
+		{ value: '#5ce1e6', name: 'Turquoise Blue' },
+		{ value: '#38b6ff', name: 'Light Blue' },
+		{ value: '#5271ff', name: 'Royal Blue' },
+		{ value: '#004aad', name: 'Cobalt Blue' },
+
+		{ value: '#00bf63', name: 'Green' },
+		{ value: '#7ed957', name: 'Grass Green' },
+		{ value: '#c1ff72', name: 'Lime' },
+		{ value: '#ffde59', name: 'Yellow' },
+		{ value: '#ffbd59', name: 'Peach' },
+		{ value: '#ff914d', name: 'Orange' },
+	];
+
+	const setColor = (value: string) => () => {
+		if (value === selectedColor) return;
+		selectedColor = value;
+		if (layer.borderWidth) {
+			const undo = {
+				borderStyle: layer.borderStyle,
+				borderWidth: layer.borderWidth,
+				borderColor: layer.borderColor,
+			};
+			const redo = {
+				borderStyle: layer.borderStyle,
+				borderWidth: layer.borderWidth,
+				borderColor: selectedColor,
+			};
+			Object.assign(layer, redo);
+			editor.historyPush({ type: 'layer', layer: { id: layer.id, type: layer.type }, undo, redo });
+		}
+	};
+</script>
+
+<Popover.Root>
+	<Popover.Trigger>
+		{#snippet child({ props })}
+			<Button {...props} variant="ghost" size="icon-xs">
+				<BorderWidthIcon class="h-6 w-6" />
+			</Button>
+		{/snippet}
+	</Popover.Trigger>
+	<Popover.Content align="start" sideOffset={2} class="w-auto p-4">
+		<div class="flex flex-col gap-2">
+			<div role="radiogroup" aria-label="Border style">
+				<div class="flex shrink-0 gap-2">
+					<Button
+						variant="outline"
+						class="w-12 p-2"
+						active={!layer.borderWidth}
+						onclick={() => setStyle(null)}
+					>
+						<BorderNoneIcon class="h-6 w-6" />
+					</Button>
+					<Button
+						variant="outline"
+						class="w-12 p-2"
+						active={layer.borderStyle === 'solid'}
+						onclick={() => setStyle('solid')}
+					>
+						<BorderSolidIcon class="h-6 w-6" />
+					</Button>
+					<Button
+						variant="outline"
+						class="w-12 p-2"
+						active={layer.borderStyle === 'dashed'}
+						onclick={() => setStyle('dashed')}
+					>
+						<BorderDashedIcon class="h-6 w-6" />
+					</Button>
+					<Button
+						variant="outline"
+						class="w-12 p-2"
+						active={layer.borderStyle === 'dotted'}
+						onclick={() => setStyle('dotted')}
+					>
+						<BorderDottedIcon class="h-6 w-6" />
+					</Button>
+				</div>
+			</div>
+			<div class="flex flex-col">
+				<div class="text-sm font-medium text-gray-500">Border width</div>
+				<div class="flex gap-4">
+					<Slider
+						type="single"
+						value={layer.borderWidth || 0}
+						{min}
+						{max}
+						step={1}
+						onValueChange={(value) => setWidth(value, true)}
+					/>
+					<input
+						class="border-input m-0 h-10 w-10 rounded-md bg-transparent p-0 pb-1 text-center text-sm font-semibold leading-none focus:ring-0 [&::-webkit-inner-spin-button]:appearance-none"
+						type="text"
+						inputmode="decimal"
+						placeholder="--"
+						value={layer.borderWidth || 0}
+						onchange={(e) => setWidth(e.target.value)}
+					/>
+				</div>
+			</div>
+			<div class="flex flex-col gap-2">
+				<div class="flex items-center gap-2 py-2">
+					<PaletteIcon class="h-5 w-5" />
+					<h5 class="text-left text-sm font-bold">Colors</h5>
+				</div>
+				<div class="grid grid-cols-6 items-stretch gap-3">
+					{#each colors as color}
+						<Button
+							class={cn(
+								'relative h-10 w-10 after:absolute after:inset-0 after:rounded-full after:transition-shadow',
+								(layer.borderColor || selectedColor) === color.value && 'after:shadow-active',
+							)}
+							variant="ghost"
+							size="icon"
+							onclick={setColor(color.value)}
+						>
+							<span
+								class="h-full w-full rounded-full after:absolute after:inset-0 after:rounded-full after:shadow-inner"
+								style:background-color={color.value}
+							></span>
+						</Button>
+					{/each}
+				</div>
+			</div>
+		</div>
+	</Popover.Content>
+</Popover.Root>

package/dist/components/presentation-editor/layers/buttons/border-button/border-button.svelte.d.ts

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

package/dist/components/presentation-editor/layers/buttons/border-button/index.d.ts

@@ -0,0 +1,2 @@
+import BorderButton from './border-button.svelte';
+export { BorderButton };

package/dist/components/presentation-editor/layers/buttons/border-button/index.js

@@ -0,0 +1,2 @@
+import BorderButton from './border-button.svelte';
+export { BorderButton };

package/dist/components/presentation-editor/layers/buttons/corner-radius-button/corner-radius-button.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import CornerRadiusIcon from 'svelte-radix/CornerTopLeft.svelte';
+	import type {
+		ImageLayer,
+		LayerChangesAction,
+	} from '../../../types.js';
+	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+	import * as Popover from '../../../../ui/popover/index.js';
+	import { Button } from '../../../../ui/button/index.js';
+	import { Slider } from '../../../../ui/slider/index.js';
+	import { createDebouncedCallback } from '../../../../../utils.js';
+
+	interface Props {
+		layer: ImageLayer;
+	}
+
+	let { layer = $bindable() }: Props = $props();
+
+	const editor = getPresentationEditorContext();
+
+	let undo: { cornerRadius: number | null } | null = null;
+	const debouncedHistoryPush = createDebouncedCallback((action: LayerChangesAction) => {
+		editor.historyPush(action);
+		undo = null;
+	}, 500);
+
+	let min = 0;
+	let max = 100;
+	const setCornerRadius = (value: string | number, debounce = false) => {
+		let cornerRadius = parseInt(value.toString());
+		if (cornerRadius > max) {
+			cornerRadius = max;
+		} else if (cornerRadius < min) {
+			cornerRadius = min;
+		}
+		if (!undo) {
+			undo = { cornerRadius: layer.cornerRadius };
+		}
+		const redo = { cornerRadius: cornerRadius || null };
+		const action: LayerChangesAction = {
+			type: 'layer',
+			layer: { id: layer.id, type: layer.type },
+			undo,
+			redo,
+		};
+		if (debounce) {
+			debouncedHistoryPush(action);
+		} else {
+			editor.historyPush(action);
+			undo = null;
+		}
+	};
+</script>
+
+<Popover.Root>
+	<Popover.Trigger>
+		{#snippet child({ props })}
+			<Button {...props} variant="ghost" size="icon-xs">
+				<CornerRadiusIcon class="h-6 w-6" />
+			</Button>
+		{/snippet}
+	</Popover.Trigger>
+	<Popover.Content trapFocus={false} align="start" sideOffset={2} class="w-64 p-4">
+		<div class="flex flex-col gap-2">
+			<div class="flex flex-col">
+				<div class="text-sm font-medium text-gray-500">Corner rounding</div>
+				<div class="flex gap-4">
+					<Slider
+						type="single"
+						value={layer.cornerRadius || 0}
+						{min}
+						{max}
+						step={1}
+						onValueChange={(value) => setCornerRadius(value, true)}
+					/>
+					<input
+						class="border-input m-0 h-10 w-10 rounded-md bg-transparent p-0 pb-1 text-center text-sm font-semibold leading-none focus:ring-0 [&::-webkit-inner-spin-button]:appearance-none"
+						type="text"
+						inputmode="decimal"
+						placeholder="--"
+						value={layer.cornerRadius || 0}
+						onchange={(e) => setCornerRadius(e.target.value)}
+					/>
+				</div>
+			</div>
+		</div>
+	</Popover.Content>
+</Popover.Root>

package/dist/components/presentation-editor/layers/buttons/corner-radius-button/corner-radius-button.svelte.d.ts

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

package/dist/components/presentation-editor/layers/buttons/corner-radius-button/index.d.ts

@@ -0,0 +1,2 @@
+import CornerRadiusButton from './corner-radius-button.svelte';
+export { CornerRadiusButton };

package/dist/components/presentation-editor/layers/buttons/corner-radius-button/index.js

@@ -0,0 +1,2 @@
+import CornerRadiusButton from './corner-radius-button.svelte';
+export { CornerRadiusButton };

package/dist/components/presentation-editor/layers/buttons/flip-button/flip-button.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import FlipHorizontalIcon from 'lucide-svelte/icons/flip-horizontal';
+	import FlipVerticalIcon from 'lucide-svelte/icons/flip-vertical';
+	import type { ImageLayer } from '../../../types.js';
+	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+	import * as DropdownMenu from '../../../../ui/dropdown-menu/index.js';
+	import { buttonVariants } from '../../../../ui/button/index.js';
+
+	interface Props {
+		layer: ImageLayer;
+	}
+
+	let { layer = $bindable() }: Props = $props();
+
+	const editor = getPresentationEditorContext();
+
+	const flipToggle = (isHorizontal?: boolean) => () => {
+		const undo = isHorizontal ? { flipY: layer.flipY } : { flipX: layer.flipX };
+		const redo = isHorizontal ? { flipY: !layer.flipY } : { flipX: !layer.flipX };
+		Object.assign(layer, redo);
+		editor.historyPush({ type: 'layer', layer: { id: layer.id, type: layer.type }, undo, redo });
+	};
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger class={buttonVariants({ variant: 'ghost', size: 'icon-xs' })}>
+		Flip
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content align="start" sideOffset={2} class="w-auto">
+		<DropdownMenu.Item closeOnSelect={false} class="gap-2" onclick={flipToggle()}>
+			<FlipHorizontalIcon class="h-6 w-6" />
+			Flip horizontally
+		</DropdownMenu.Item>
+		<DropdownMenu.Item closeOnSelect={false} class="gap-2" onclick={flipToggle(true)}>
+			<FlipVerticalIcon class="h-6 w-6" />
+			Flip vertically
+		</DropdownMenu.Item>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>

package/dist/components/presentation-editor/layers/buttons/flip-button/flip-button.svelte.d.ts

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

package/dist/components/presentation-editor/layers/buttons/flip-button/index.d.ts

@@ -0,0 +1,2 @@
+import FlipButton from './flip-button.svelte';
+export { FlipButton };

package/dist/components/presentation-editor/layers/buttons/flip-button/index.js

@@ -0,0 +1,2 @@
+import FlipButton from './flip-button.svelte';
+export { FlipButton };

package/dist/components/presentation-editor/layers/buttons/opacity-button/index.d.ts

@@ -0,0 +1,2 @@
+import OpacityButton from './opacity-button.svelte';
+export { OpacityButton };

package/dist/components/presentation-editor/layers/buttons/opacity-button/index.js

@@ -0,0 +1,2 @@
+import OpacityButton from './opacity-button.svelte';
+export { OpacityButton };

package/dist/components/presentation-editor/layers/buttons/opacity-button/opacity-button.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import OpacityIcon from 'svelte-radix/TransparencyGrid.svelte';
+	import type { Layer, LayerChangesAction } from '../../../types.js';
+	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+	import * as Popover from '../../../../ui/popover/index.js';
+	import { Button } from '../../../../ui/button/index.js';
+	import { Slider } from '../../../../ui/slider/index.js';
+	import { createDebouncedCallback } from '../../../../../utils.js';
+
+	interface Props {
+		layer: Layer;
+	}
+
+	let { layer = $bindable() }: Props = $props();
+
+	const editor = getPresentationEditorContext();
+
+	let undo: { opacity: number | null } | null = null;
+	const debouncedHistoryPush = createDebouncedCallback((action: LayerChangesAction) => {
+		editor.historyPush(action);
+		undo = null;
+	}, 500);
+
+	let trasparency = $derived(parseFloat((100 - (layer.opacity ?? 1) * 100).toFixed(2)));
+
+	let min = 0;
+	let max = 100;
+	const setTransparency = (value: string | number, debounce = false) => {
+		let transparency = Number(value);
+		if (transparency > max) {
+			transparency = max;
+		} else if (!(transparency >= min || transparency <= max)) {
+			transparency = min;
+		}
+		if (!undo) {
+			undo = { opacity: layer.opacity };
+		}
+		const redo = { opacity: transparency ? (100 - transparency) / 100 : null };
+		Object.assign(layer, redo);
+		const action: LayerChangesAction = {
+			type: 'layer',
+			layer: { id: layer.id, type: layer.type },
+			undo,
+			redo,
+		};
+		if (debounce) {
+			debouncedHistoryPush(action);
+		} else {
+			editor.historyPush(action);
+			undo = null;
+		}
+	};
+
+	const onChange = (e: Event) => {
+		const target = e.target as HTMLInputElement;
+		setTransparency(target.value);
+	};
+</script>
+
+<Popover.Root>
+	<Popover.Trigger>
+		{#snippet child({ props })}
+			<Button {...props} variant="ghost" size="icon-xs">
+				<OpacityIcon class="h-6 w-6" />
+			</Button>
+		{/snippet}
+	</Popover.Trigger>
+	<Popover.Content align="start" sideOffset={2} class="w-64 p-4">
+		<div class="flex flex-col gap-2">
+			<div class="flex flex-col">
+				<div class="text-sm font-medium text-gray-500">Transparency</div>
+				<div class="flex gap-4">
+					<Slider
+						type="single"
+						value={trasparency}
+						{min}
+						{max}
+						step={1}
+						onValueChange={(value) => setTransparency(value, true)}
+					/>
+					<input
+						class="border-input m-0 h-10 w-10 rounded-md bg-transparent p-0 pb-1 text-center text-sm font-semibold leading-none focus:ring-0 [&::-webkit-inner-spin-button]:appearance-none"
+						type="text"
+						inputmode="decimal"
+						placeholder="--"
+						value={trasparency}
+						onchange={onChange}
+					/>
+				</div>
+			</div>
+		</div>
+	</Popover.Content>
+</Popover.Root>

package/dist/components/presentation-editor/layers/buttons/opacity-button/opacity-button.svelte.d.ts

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