@peteai/presentation-editor 0.0.2 → 0.0.3

package/dist/components/ui/color-picker/color-picker.svelte

@@ -0,0 +1,344 @@
+<script lang="ts">
+	import DeleteIcon from 'lucide-svelte/icons/trash-2';
+	import PipetteIcon from 'lucide-svelte/icons/pipette';
+	import { untrack } from 'svelte';
+	import { Slider } from 'bits-ui';
+	import { BROWSER } from 'esm-env';
+	import { cn } from '../../../utils.js';
+	import type { ChangeEventHandler, FormEventHandler } from 'svelte/elements';
+	import { Button } from '../button/index.js';
+	import { AlphaGrid } from './index.js';
+	import { Input } from '../input/index.js';
+
+	const defaultColor: string = '#ff0000';
+
+	interface Props {
+		hex?: string;
+		alpha?: boolean;
+		onChange?: (color: { rgb: number[]; a: number; hex: string }) => void;
+		onDelete?: () => void;
+	}
+
+	let {
+		hex: startColor = $bindable(defaultColor),
+		alpha = false,
+		onChange = () => null,
+		onDelete,
+	}: Props = $props();
+
+	let pickerRef = $state() as HTMLDivElement;
+
+	let isMouseDown = false;
+
+	const parsed = parseHex(startColor);
+	let h = $state(parsed?.hsva.h ?? 360);
+	let s = $state(parsed?.hsva.s ?? 1);
+	let v = $state(parsed?.hsva.v ?? 1);
+	let a = $state(parsed?.hsva.a ?? 1);
+
+	let hexValue = $state(parsed?.hex || defaultColor);
+
+	const pickedColor = $derived(hsvToRgb(h, 1, 1));
+	const rgb = $derived(hsvToRgb(h, s, v));
+
+	let invalidHex = $state(false);
+
+	const eyeDropper = BROWSER && 'EyeDropper' in window ? new (window as any).EyeDropper() : null;
+
+	function openEyedropper() {
+		eyeDropper.open().then((result: { sRGBHex: string }) => {
+			updateFromHex(result.sRGBHex);
+		});
+	}
+
+	function updateFromHex(hex: string) {
+		const parsed = parseHex(hex);
+		if (!parsed) return;
+
+		({ h, s, v, a } = parsed.hsva);
+	}
+
+	$effect(() => {
+		if (startColor !== untrack(() => hexValue)) {
+			updateFromHex(startColor);
+		}
+	});
+
+	function isValidHexColor(hex: string) {
+		return new RegExp(`^#([0-9A-F]{${alpha ? 4 : 3}}){2}$`, 'i').test(hex);
+	}
+
+	function hexToRgba(hex: string) {
+		const r = parseInt(hex.substring(1, 3), 16);
+		const g = parseInt(hex.substring(3, 5), 16);
+		const b = parseInt(hex.substring(5, 7), 16);
+		const a = hex.length > 7 ? parseInt(hex.substring(7, 9), 16) : 255;
+
+		return { r, g, b, a };
+	}
+
+	function parseHex(hex: string) {
+		if (!isValidHexColor(hex)) {
+			console.error('Invalid property value (startColor)', { hex, alpha });
+			return;
+		}
+		const rbga = hexToRgba(hex);
+
+		return { hex, rbga, hsva: rgbaToHsva(rbga) };
+	}
+
+	function round(val: number) {
+		return Math.round(val * 1000) / 1000;
+	}
+
+	function clamp(value: number, min: number, max: number): number {
+		return Math.min(Math.max(min, value), max);
+	}
+
+	function onClick(e: { clientX: number; clientY: number }) {
+		if (!pickerRef) return;
+
+		const { width, left, height, top } = pickerRef.getBoundingClientRect();
+		const mouse = {
+			x: clamp(e.clientX - left, 0, width),
+			y: clamp(e.clientY - top, 0, height),
+		};
+
+		s = clamp(mouse.x / width, 0, 1);
+		v = clamp((height - mouse.y) / height, 0, 1);
+	}
+
+	function onMouseDown(event: MouseEvent) {
+		if (event.button === 0) {
+			isMouseDown = true;
+			onClick(event);
+		}
+	}
+
+	function onMouseUp() {
+		isMouseDown = false;
+	}
+
+	function onMouseMove(event: MouseEvent) {
+		if (isMouseDown) onClick(event);
+	}
+
+	function onTouch(e: TouchEvent) {
+		onClick(e.changedTouches[0]);
+	}
+
+	function toHex(value: number) {
+		return value.toString(16).padStart(2, '0');
+	}
+
+	function RGBAToHex(r: number, g: number, b: number) {
+		const values = [r, g, b].map(toHex);
+
+		if (alpha) {
+			values.push(toHex(Math.round(a * 255)));
+		}
+
+		return `#${values.join('')}`.toLowerCase();
+	}
+
+	function colorChange() {
+		let rgb = hsvToRgb(h, s, v);
+		const [r, g, b] = rgb;
+		hexValue = RGBAToHex(r, g, b);
+		invalidHex = false;
+		if (startColor !== hexValue) {
+			startColor = hexValue;
+			onChange({ rgb, a: a, hex: hexValue });
+		}
+	}
+
+	//Math algorithms
+	function hsvToRgb(h: number, s: number, v: number) {
+		const i = Math.floor(h / 60);
+		const f = h / 60 - i;
+		const p = v * (1 - s);
+		const q = v * (1 - f * s);
+		const t = v * (1 - (1 - f) * s);
+
+		const rgbMap = [
+			[v, t, p],
+			[q, v, p],
+			[p, v, t],
+			[p, q, v],
+			[t, p, v],
+			[v, p, q],
+		];
+
+		const [r, g, b] = rgbMap[i % 6];
+		return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+	}
+
+	function rgbaToHsva({ r, g, b, a }: { r: number; g: number; b: number; a: number }) {
+		const rperc = r / 255;
+		const gperc = g / 255;
+		const bperc = b / 255;
+		const aperc = a / 255;
+
+		const max = Math.max(rperc, gperc, bperc);
+		const min = Math.min(rperc, gperc, bperc);
+		const diff = max - min;
+
+		let hnew = 0;
+		const snew = max === 0 ? 0 : diff / max;
+		const vnew = max;
+
+		if (diff !== 0) {
+			if (max === rperc) {
+				hnew = (60 * ((gperc - bperc) / diff) + 360) % 360;
+			} else if (max === gperc) {
+				hnew = (60 * ((bperc - rperc) / diff) + 120) % 360;
+			} else if (max === bperc) {
+				hnew = (60 * ((rperc - gperc) / diff) + 240) % 360;
+			}
+		}
+
+		return { h: round(hnew), s: round(snew), v: round(vnew), a: round(aperc) };
+	}
+
+	$effect(() => {
+		if (h || s || v || a) colorChange();
+	});
+
+	const buildHexFromInputVal = (val: string) =>
+		'#' + val + (alpha ? toHex(Math.round(a * 255)) : '');
+
+	const onHexInput: FormEventHandler<HTMLInputElement> = (e) => {
+		console.log('onHexInput', e);
+		invalidHex = !isValidHexColor(buildHexFromInputVal(e.currentTarget.value));
+	};
+
+	const onHexChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+		console.log('onHexChange', e);
+		const hex = buildHexFromInputVal(e.currentTarget.value);
+		if (isValidHexColor(hex)) {
+			updateFromHex(hex);
+		}
+	};
+</script>
+
+<svelte:window onmouseup={onMouseUp} onmousemove={onMouseMove} />
+
+<div class="w-full select-none">
+	<div
+		class="h-28 overflow-hidden rounded-lg"
+		style:background={`rgb(${pickedColor[0]},${pickedColor[1]},${pickedColor[2]})`}
+	>
+		<div
+			class="h-full"
+			style:background="linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0))"
+		>
+			<div
+				class="h-full overflow-hidden"
+				style:background="linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0))"
+			>
+				<div
+					class="border-primary relative m-0 -translate-x-1/2 -translate-y-1/2 rounded-full p-0"
+					style:width="16px"
+					style:height="16px"
+					style:border="2px solid #fffb"
+					style:top="{(1 - v) * 100}%"
+					style:left="{s * 100}%"
+				></div>
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div
+					bind:this={pickerRef}
+					id="colorsquare-event"
+					class="relative h-full w-full touch-none"
+					style:translate="0 -16px"
+					onmousedown={onMouseDown}
+					ontouchstart={onTouch}
+					ontouchmove={onTouch}
+					ontouchend={onTouch}
+				></div>
+			</div>
+		</div>
+	</div>
+
+	<div class="mx-1 my-2.5">
+		<Slider.Root
+			type="single"
+			bind:value={h}
+			min={0}
+			max={360}
+			step={0.001}
+			class="relative flex w-full touch-none select-none items-center"
+		>
+			{#snippet children()}
+				<span
+					class="relative -mx-1 h-3 w-full grow cursor-pointer overflow-hidden rounded-full"
+					style:background="linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red)"
+				></span>
+				<Slider.Thumb
+					index={0}
+					class="border-border-input bg-background hover:border-dark-40 dark:bg-foreground dark:shadow-card block size-2 cursor-pointer rounded-full border shadow transition-colors focus-visible:outline-none active:scale-150"
+				/>
+			{/snippet}
+		</Slider.Root>
+	</div>
+
+	{#if alpha}
+		<div class="mx-1 my-2.5">
+			<Slider.Root
+				type="single"
+				bind:value={a}
+				min={0}
+				max={1}
+				step={0.001}
+				class="relative flex w-full touch-none select-none items-center"
+			>
+				{#snippet children()}
+					<AlphaGrid
+						size={8}
+						class="shadow-inner-1 relative -mx-1 h-3 w-full grow cursor-pointer overflow-hidden rounded-full"
+					>
+						<div
+							class="h-full w-full rounded-full"
+							style:background-image="linear-gradient(to right, transparent, rgb({rgb[0]},{rgb[1]},{rgb[2]}))"
+						></div>
+					</AlphaGrid>
+					<Slider.Thumb
+						index={0}
+						class="border-border-input bg-background hover:border-dark-40 dark:bg-foreground dark:shadow-card block size-2 cursor-pointer rounded-full border shadow transition-colors focus-visible:outline-none active:scale-150"
+					/>
+				{/snippet}
+			</Slider.Root>
+		</div>
+	{/if}
+
+	<div class="flex w-full items-center gap-2">
+		{#if onDelete}
+			<Button variant="outline" size="icon" class="shrink-0" onclick={onDelete}>
+				<DeleteIcon />
+			</Button>
+		{/if}
+		<div class="relative flex flex-1 items-center">
+			<div class="pointer-events-none absolute flex w-10 justify-center">
+				<div class="size-6 overflow-hidden rounded-full">
+					<AlphaGrid size={12}>
+						<div
+							class="h-full w-full"
+							style:background-color="rgba({rgb[0]},{rgb[1]},{rgb[2]},{a})"
+						></div>
+					</AlphaGrid>
+				</div>
+			</div>
+			<div class="text-muted-foreground pointer-events-none absolute left-10 text-sm">#</div>
+			<Input
+				class={cn('pl-12', invalidHex && 'ring-destructive ring-1')}
+				value={hexValue.slice(0, 7).replace('#', '')}
+				oninput={onHexInput}
+				onchange={onHexChange}
+			/>
+		</div>
+		{#if eyeDropper}
+			<Button variant="outline" size="icon" class="shrink-0" onclick={() => openEyedropper()}>
+				<PipetteIcon />
+			</Button>
+		{/if}
+	</div>
+</div>

package/dist/components/ui/color-picker/color-picker.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    hex?: string;
+    alpha?: boolean;
+    onChange?: (color: {
+        rgb: number[];
+        a: number;
+        hex: string;
+    }) => void;
+    onDelete?: () => void;
+}
+declare const ColorPicker: import("svelte").Component<Props, {}, "hex">;
+type ColorPicker = ReturnType<typeof ColorPicker>;
+export default ColorPicker;

package/dist/components/ui/color-picker/index.d.ts

@@ -0,0 +1,3 @@
+import Root from './color-picker.svelte';
+import AlphaGrid from './color-picker-alpha-grid.svelte';
+export { Root, AlphaGrid, Root as ColorPicker, AlphaGrid as ColorPickerAlphaGrid, };

package/dist/components/ui/color-picker/index.js

@@ -0,0 +1,5 @@
+import Root from './color-picker.svelte';
+import AlphaGrid from './color-picker-alpha-grid.svelte';
+export { Root, AlphaGrid, 
+//
+Root as ColorPicker, AlphaGrid as ColorPickerAlphaGrid, };

package/dist/components/ui/context-menu/context-menu-shortcut.svelte

@@ -11,10 +11,13 @@
 	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
 </script>
 
-<span
+<kbd
 	bind:this={ref}
-	class={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
+	class={cn(
+		'bg-muted text-muted-foreground ml-auto rounded-sm px-2 py-1 font-sans text-xs tracking-widest',
+		className,
+	)}
 	{...restProps}
 >
 	{@render children?.()}
-</span>
+</kbd>

package/dist/components/ui/context-menu/context-menu-sub-trigger.svelte

@@ -17,7 +17,7 @@
 <ContextMenuPrimitive.SubTrigger
 	bind:ref
 	class={cn(
-		'data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
+		'data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
 		inset && 'pl-8',
 		className,
 	)}

package/dist/components/ui/dropdown-menu/dropdown-menu-item.svelte

@@ -15,7 +15,7 @@
 <DropdownMenuPrimitive.Item
 	bind:ref
 	class={cn(
-		'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+		'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
 		inset && 'pl-8',
 		className,
 	)}

package/dist/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte

@@ -11,10 +11,13 @@
 	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
 </script>
 
-<span
+<kbd
 	bind:this={ref}
-	class={cn('ml-auto text-xs tracking-widest opacity-60', className)}
+	class={cn(
+		'bg-muted text-muted-foreground ml-auto rounded-sm px-2 py-1 font-sans text-xs tracking-widest',
+		className,
+	)}
 	{...restProps}
 >
 	{@render children?.()}
-</span>
+</kbd>

package/dist/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -17,7 +17,7 @@
 <DropdownMenuPrimitive.SubTrigger
 	bind:ref
 	class={cn(
-		'flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+		'data-[state=open]:bg-accent data-[highlighted]:bg-accent flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
 		inset && 'pl-8',
 		className,
 	)}

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

@@ -0,0 +1,4 @@
+import InfiniteLoader from './infinite-loader.svelte';
+import { LoaderState } from './infinite-loader-state.svelte.js';
+import { LoopTracker } from './infinite-loader-loop-tracker.js';
+export { InfiniteLoader, LoaderState, LoopTracker };

package/dist/components/ui/infinite-loader/index.js

@@ -0,0 +1,4 @@
+import InfiniteLoader from './infinite-loader.svelte';
+import { LoaderState } from './infinite-loader-state.svelte.js';
+import { LoopTracker } from './infinite-loader-loop-tracker.js';
+export { InfiniteLoader, LoaderState, LoopTracker };

package/dist/components/ui/infinite-loader/infinite-loader-loop-tracker.d.ts

@@ -0,0 +1,13 @@
+type LoopTrackerOptions = {
+    loopTimeout?: number;
+    loopDetectionTimeout?: number;
+    loopMaxCalls?: number;
+};
+export declare class LoopTracker {
+    #private;
+    coolingOff: boolean;
+    constructor(options: LoopTrackerOptions);
+    track(): void;
+    destroy(): void;
+}
+export {};

package/dist/components/ui/infinite-loader/infinite-loader-loop-tracker.js

@@ -0,0 +1,44 @@
+// Track load counts to avoid infinite loops
+export class LoopTracker {
+    coolingOff = false;
+    #coolingOffTimer = null;
+    #timer = null;
+    #count = 0;
+    #options = {
+        timeout: 3000,
+        detectionTimeout: 2000,
+        maxCalls: 5,
+    };
+    constructor(options) {
+        Object.assign(this.#options, options);
+    }
+    // On each call, increment the count and reset the timer
+    track() {
+        this.#count += 1;
+        if (this.#timer) {
+            clearTimeout(this.#timer);
+        }
+        // Cooldown, after 2s, reset count to 0
+        this.#timer = setTimeout(() => {
+            this.#count = 0;
+        }, this.#options.detectionTimeout);
+        // If count > loopMaxCalls, begin cool-down period
+        // and start timer to reset loop count tracker
+        if (this.#count >= this.#options.maxCalls) {
+            console.error(`Attempted to execute load function ${this.#options.maxCalls} or more times within a short period. Please wait before trying again..`);
+            this.coolingOff = true;
+            this.#coolingOffTimer = setTimeout(() => {
+                this.coolingOff = false;
+                this.#count = 0;
+            }, this.#options.timeout);
+        }
+    }
+    destroy() {
+        if (this.#timer) {
+            clearTimeout(this.#timer);
+        }
+        if (this.#coolingOffTimer) {
+            clearTimeout(this.#coolingOffTimer);
+        }
+    }
+}

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

@@ -0,0 +1,15 @@
+export declare const STATUS: {
+    readonly READY: "READY";
+    readonly LOADING: "LOADING";
+    readonly COMPLETE: "COMPLETE";
+    readonly ERROR: "ERROR";
+};
+export declare class LoaderState {
+    isFirstLoad: boolean;
+    status: "READY" | "LOADING" | "COMPLETE" | "ERROR";
+    mounted: boolean;
+    loaded: () => void;
+    complete: () => void;
+    reset: () => void;
+    error: () => void;
+}

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

@@ -0,0 +1,28 @@
+export const STATUS = {
+    READY: 'READY',
+    LOADING: 'LOADING',
+    COMPLETE: 'COMPLETE',
+    ERROR: 'ERROR',
+};
+export class LoaderState {
+    isFirstLoad = $state(true);
+    status = $state(STATUS.READY);
+    mounted = $state(false);
+    loaded = () => {
+        if (this.isFirstLoad)
+            this.isFirstLoad = false;
+        this.status = STATUS.READY;
+    };
+    complete = () => {
+        if (this.isFirstLoad)
+            this.isFirstLoad = false;
+        this.status = STATUS.COMPLETE;
+    };
+    reset = () => {
+        this.isFirstLoad = true;
+        this.status = STATUS.READY;
+    };
+    error = () => {
+        this.status = STATUS.ERROR;
+    };
+}