@warkypublic/svelix 0.1.46 → 0.2.1

package/dist/components/ContentEditor/subcomponents/TextEditor.svelte

@@ -1,154 +1,124 @@
-<script lang="ts">
-  import { Tipex, type TipexEditor } from '@friendofsvelte/tipex';
-  import '@friendofsvelte/tipex/styles/index.css';
-  import { blobToString } from '../utils.js';
-  import type { TextEditorProps } from '../types.js';
-
-  let {
-    value,
-    filename,
-    hideHeader = false,
-    readonly = false,
-    onChange,
-    insertText = $bindable(),
-    insertHtml = $bindable(),
-  }: TextEditorProps = $props();
-
-  let tipex = $state<TipexEditor>(undefined);
-  let body = $state('');
-  let lastBlobHtml = $state('');
-  let syncingFromValue = false;
-  let fileInputEl = $state<HTMLInputElement | undefined>(undefined);
-
-  async function fileToDataUrl(file: File): Promise<string> {
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.onload = () => {
-        if (typeof reader.result === 'string') {
-          resolve(reader.result);
-          return;
-        }
-        reject(new Error('Could not convert image to data URL.'));
-      };
-      reader.onerror = () => reject(reader.error ?? new Error('Could not read image file.'));
-      reader.readAsDataURL(file);
-    });
-  }
-
-  async function insertEmbeddedImages(files: File[], dropPoint?: { left: number; top: number }): Promise<void> {
-    if (!tipex || readonly || files.length === 0) return;
-
-    if (dropPoint) {
-      const pos = tipex.view.posAtCoords(dropPoint);
-      if (pos?.pos !== undefined) {
-        tipex.chain().focus().setTextSelection(pos.pos).run();
-      } else {
-        tipex.commands.focus();
-      }
-    } else {
-      tipex.commands.focus();
-    }
-
-    for (const file of files) {
-      const src = await fileToDataUrl(file);
-      tipex.chain().focus().setImage({ src, alt: file.name }).run();
-    }
-  }
-
-  async function handlePaste(event: ClipboardEvent): Promise<void> {
-    if (readonly || !event.clipboardData) return;
-    const files = Array.from(event.clipboardData.files).filter((file) =>
-      file.type.startsWith('image/')
-    );
-    if (files.length === 0) return;
-
-    event.preventDefault();
-    await insertEmbeddedImages(files);
-  }
-
-  async function handleDrop(event: DragEvent): Promise<void> {
-    if (readonly || !event.dataTransfer) return;
-    const files = Array.from(event.dataTransfer.files).filter((file) =>
-      file.type.startsWith('image/')
-    );
-    if (files.length === 0) return;
-
-    event.preventDefault();
-    await insertEmbeddedImages(files, { left: event.clientX, top: event.clientY });
-  }
-
-  function openImagePicker(): void {
-    if (readonly) return;
-    fileInputEl?.click();
-  }
-
-  async function handleFileInputChange(event: Event): Promise<void> {
-    const input = event.currentTarget as HTMLInputElement;
-    const files = Array.from(input.files ?? []).filter((file) => file.type.startsWith('image/'));
-    if (files.length > 0) {
-      await insertEmbeddedImages(files);
-    }
-    input.value = '';
-  }
-
-  function syncEditorContent(nextHtml: string): void {
-    if (!tipex) return;
-    const currentHtml = tipex.getHTML();
-    if (currentHtml === nextHtml) return;
-
-    syncingFromValue = true;
-    tipex.commands.setContent(nextHtml, false);
-    body = tipex.getHTML();
-    syncingFromValue = false;
-  }
-
-  function handleUpdate(): void {
-    if (readonly || syncingFromValue || !tipex) return;
-    const nextHtml = tipex.getHTML();
-    body = nextHtml;
-    if (nextHtml !== lastBlobHtml) {
-      onChange?.(new Blob([nextHtml], { type: 'text/html' }));
-    }
-  }
-
-  $effect(() => {
-    blobToString(value).then((nextHtml) => {
-      lastBlobHtml = nextHtml;
-      if (body !== nextHtml) {
-        body = nextHtml;
-      }
-      syncEditorContent(nextHtml);
-    });
-  });
-
-  $effect(() => {
-    tipex?.setEditable(!readonly);
-  });
-
-  $effect(() => {
-    const editor = tipex;
-    if (!editor) {
-      insertText = undefined;
-      insertHtml = undefined;
-      return;
-    }
-    insertText = (text: string) => {
-      editor.chain().focus().insertContent(text).run();
-    };
-    insertHtml = (html: string) => {
-      editor.chain().focus().insertContent(html).run();
-    };
-  });
-  const editorClass = $derived(
-    hideHeader
-      ? 'min-h-full bg-surface-50-900'
-      : 'min-h-full rounded-container-token border border-surface-200-800 bg-surface-50-900'
-  );
-
-const contentPaddingClass = $derived(hideHeader ? 'p-0' : 'p-4');
-
+<script lang="ts">import { Tipex } from "@friendofsvelte/tipex";
+import "@friendofsvelte/tipex/styles/index.css";
+import { blobToString } from "../utils.js";
+let { value, filename, hideHeader = false, readonly = false, onChange, insertText = $bindable(), insertHtml = $bindable() } = $props();
+let tipex = $state(undefined);
+let body = $state("");
+let lastBlobHtml = $state("");
+let syncingFromValue = false;
+let fileInputEl = $state(undefined);
+async function fileToDataUrl(file) {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onload = () => {
+			if (typeof reader.result === "string") {
+				resolve(reader.result);
+				return;
+			}
+			reject(new Error("Could not convert image to data URL."));
+		};
+		reader.onerror = () => reject(reader.error ?? new Error("Could not read image file."));
+		reader.readAsDataURL(file);
+	});
+}
+async function insertEmbeddedImages(files, dropPoint) {
+	if (!tipex || readonly || files.length === 0) return;
+	if (dropPoint) {
+		const pos = tipex.view.posAtCoords(dropPoint);
+		if (pos?.pos !== undefined) {
+			tipex.chain().focus().setTextSelection(pos.pos).run();
+		} else {
+			tipex.commands.focus();
+		}
+	} else {
+		tipex.commands.focus();
+	}
+	for (const file of files) {
+		const src = await fileToDataUrl(file);
+		tipex.chain().focus().setImage({
+			src,
+			alt: file.name
+		}).run();
+	}
+}
+async function handlePaste(event) {
+	if (readonly || !event.clipboardData) return;
+	const files = Array.from(event.clipboardData.files).filter((file) => file.type.startsWith("image/"));
+	if (files.length === 0) return;
+	event.preventDefault();
+	await insertEmbeddedImages(files);
+}
+async function handleDrop(event) {
+	if (readonly || !event.dataTransfer) return;
+	const files = Array.from(event.dataTransfer.files).filter((file) => file.type.startsWith("image/"));
+	if (files.length === 0) return;
+	event.preventDefault();
+	await insertEmbeddedImages(files, {
+		left: event.clientX,
+		top: event.clientY
+	});
+}
+function openImagePicker() {
+	if (readonly) return;
+	fileInputEl?.click();
+}
+async function handleFileInputChange(event) {
+	const input = event.currentTarget;
+	const files = Array.from(input.files ?? []).filter((file) => file.type.startsWith("image/"));
+	if (files.length > 0) {
+		await insertEmbeddedImages(files);
+	}
+	input.value = "";
+}
+function syncEditorContent(nextHtml) {
+	if (!tipex) return;
+	const currentHtml = tipex.getHTML();
+	if (currentHtml === nextHtml) return;
+	syncingFromValue = true;
+	tipex.commands.setContent(nextHtml, false);
+	body = tipex.getHTML();
+	syncingFromValue = false;
+}
+function handleUpdate() {
+	if (readonly || syncingFromValue || !tipex) return;
+	const nextHtml = tipex.getHTML();
+	body = nextHtml;
+	if (nextHtml !== lastBlobHtml) {
+		onChange?.(new Blob([nextHtml], { type: "text/html" }));
+	}
+}
+$effect(() => {
+	blobToString(value).then((nextHtml) => {
+		lastBlobHtml = nextHtml;
+		if (body !== nextHtml) {
+			body = nextHtml;
+		}
+		syncEditorContent(nextHtml);
+	});
+});
+$effect(() => {
+	tipex?.setEditable(!readonly);
+});
+$effect(() => {
+	const editor = tipex;
+	if (!editor) {
+		insertText = undefined;
+		insertHtml = undefined;
+		return;
+	}
+	insertText = (text) => {
+		editor.chain().focus().insertContent(text).run();
+	};
+	insertHtml = (html) => {
+		editor.chain().focus().insertContent(html).run();
+	};
+});
+const editorClass = $derived(hideHeader ? "min-h-full bg-surface-50-900" : "min-h-full rounded-container-token border border-surface-200-800 bg-surface-50-900");
+const contentPaddingClass = $derived(hideHeader ? "p-0" : "p-4");
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function echain(editor: TipexEditor): any { return echain(editor) ?? {}; }
+function echain(editor) {
+	return echain(editor) ?? {};
+}
 </script>
 
 {#snippet controlComponent(editor: TipexEditor)}
@@ -312,6 +282,8 @@ function echain(editor: TipexEditor): any { return echain(editor) ?? {}; }
 
 <div
   class="flex h-full w-full flex-col overflow-hidden bg-surface-50-950"
+  role="region"
+  aria-label="Text editor"
   onpaste={handlePaste}
   ondrop={handleDrop}
   ondragover={(event) => {

package/dist/components/ContentEditor/subcomponents/UnknownFile.svelte

@@ -1,129 +1,108 @@
-<script lang="ts">
-  import type { UnknownFileProps } from '../types.js';
-  import { getEditorType, getExtFromFilename } from '../utils.js';
-
-  let { value, filename, contentType, note }: UnknownFileProps = $props();
-
-  let headerHex = $state('');
-  let headerAscii = $state('');
-  let sniffedType = $state('Unknown');
-
-  const ext = $derived(filename ? getExtFromFilename(filename) : '');
-  const blobType = $derived(value?.type || contentType || '');
-  const size = $derived(value?.size ?? 0);
-  const inferredViewer = $derived(getEditorType({ filename, contentType: blobType }));
-  const lastModified = $derived(
-    typeof File !== 'undefined' && value instanceof File && Number.isFinite(value.lastModified)
-      ? value.lastModified
-      : undefined
-  );
-
-  function formatBytes(bytes: number): string {
-    if (!bytes) return '0 B';
-    const units = ['B', 'KB', 'MB', 'GB'];
-    let next = bytes;
-    let unitIndex = 0;
-
-    while (next >= 1024 && unitIndex < units.length - 1) {
-      next /= 1024;
-      unitIndex += 1;
-    }
-
-    const rounded = next >= 10 || unitIndex === 0 ? next.toFixed(0) : next.toFixed(1);
-    return `${rounded} ${units[unitIndex]}`;
-  }
-
-  function formatDateTime(ms?: number): string | null {
-    if (!ms) return null;
-    try {
-      return new Date(ms).toLocaleString();
-    } catch {
-      return null;
-    }
-  }
-
-  function bytesToHex(bytes: Uint8Array): string {
-    return Array.from(bytes)
-      .map((byte) => byte.toString(16).padStart(2, '0').toUpperCase())
-      .join(' ');
-  }
-
-  function bytesToAscii(bytes: Uint8Array): string {
-    return Array.from(bytes)
-      .map((byte) => (byte >= 32 && byte <= 126 ? String.fromCharCode(byte) : '.'))
-      .join('');
-  }
-
-  function detectFromHeader(bytes: Uint8Array): string {
-    if (bytes.length >= 8 &&
-      bytes[0] === 0x89 && bytes[1] === 0x50 && bytes[2] === 0x4E && bytes[3] === 0x47 &&
-      bytes[4] === 0x0D && bytes[5] === 0x0A && bytes[6] === 0x1A && bytes[7] === 0x0A) {
-      return 'PNG image';
-    }
-    if (bytes.length >= 3 && bytes[0] === 0xFF && bytes[1] === 0xD8 && bytes[2] === 0xFF) {
-      return 'JPEG image';
-    }
-    if (bytes.length >= 6 && bytesToAscii(bytes.slice(0, 6)).startsWith('GIF8')) {
-      return 'GIF image';
-    }
-    if (bytes.length >= 4 && bytesToAscii(bytes.slice(0, 4)) === '%PDF') {
-      return 'PDF document';
-    }
-    if (bytes.length >= 4 && bytesToAscii(bytes.slice(0, 4)) === 'PK..') {
-      return 'ZIP-based archive or document';
-    }
-    if (bytes.length >= 12 &&
-      bytesToAscii(bytes.slice(0, 4)) === 'RIFF' &&
-      bytesToAscii(bytes.slice(8, 12)) === 'WEBP') {
-      return 'WEBP image';
-    }
-    if (bytes.length >= 12 &&
-      bytesToAscii(bytes.slice(4, 8)) === 'ftyp') {
-      return 'ISO Base Media file (mp4/mov/heic family)';
-    }
-    if (bytes.length >= 3 && bytesToAscii(bytes.slice(0, 3)) === 'ID3') {
-      return 'MP3 audio';
-    }
-    if (bytes.length >= 5 && bytesToAscii(bytes.slice(0, 5)).toLowerCase() === '<html') {
-      return 'HTML document';
-    }
-    if (bytes.length >= 1 && bytes[0] === 0x3C) {
-      return 'XML/HTML-like text';
-    }
-    if (bytes.length > 0) {
-      return 'Unknown binary/text payload';
-    }
-    return 'Empty file';
-  }
-
-  $effect(() => {
-    const blob = value;
-    if (!blob) {
-      headerHex = '';
-      headerAscii = '';
-      sniffedType = 'No binary payload available';
-      return;
-    }
-
-    let cancelled = false;
-
-    blob.slice(0, 32).arrayBuffer().then((buffer) => {
-      if (cancelled) return;
-      const bytes = new Uint8Array(buffer);
-      headerHex = bytesToHex(bytes);
-      headerAscii = bytesToAscii(bytes);
-      sniffedType = detectFromHeader(bytes);
-    }).catch(() => {
-      if (cancelled) return;
-      headerHex = '';
-      headerAscii = '';
-      sniffedType = 'Could not inspect file header';
-    });
-
-    return () => {
-      cancelled = true;
-    };
-  });
+<script lang="ts">import { getEditorType, getExtFromFilename } from "../utils.js";
+let { value, filename, contentType, note } = $props();
+let headerHex = $state("");
+let headerAscii = $state("");
+let sniffedType = $state("Unknown");
+const ext = $derived(filename ? getExtFromFilename(filename) : "");
+const blobType = $derived(value?.type || contentType || "");
+const size = $derived(value?.size ?? 0);
+const inferredViewer = $derived(getEditorType({
+	filename,
+	contentType: blobType
+}));
+const lastModified = $derived(typeof File !== "undefined" && value instanceof File && Number.isFinite(value.lastModified) ? value.lastModified : undefined);
+function formatBytes(bytes) {
+	if (!bytes) return "0 B";
+	const units = [
+		"B",
+		"KB",
+		"MB",
+		"GB"
+	];
+	let next = bytes;
+	let unitIndex = 0;
+	while (next >= 1024 && unitIndex < units.length - 1) {
+		next /= 1024;
+		unitIndex += 1;
+	}
+	const rounded = next >= 10 || unitIndex === 0 ? next.toFixed(0) : next.toFixed(1);
+	return `${rounded} ${units[unitIndex]}`;
+}
+function formatDateTime(ms) {
+	if (!ms) return null;
+	try {
+		return new Date(ms).toLocaleString();
+	} catch {
+		return null;
+	}
+}
+function bytesToHex(bytes) {
+	return Array.from(bytes).map((byte) => byte.toString(16).padStart(2, "0").toUpperCase()).join(" ");
+}
+function bytesToAscii(bytes) {
+	return Array.from(bytes).map((byte) => byte >= 32 && byte <= 126 ? String.fromCharCode(byte) : ".").join("");
+}
+function detectFromHeader(bytes) {
+	if (bytes.length >= 8 && bytes[0] === 137 && bytes[1] === 80 && bytes[2] === 78 && bytes[3] === 71 && bytes[4] === 13 && bytes[5] === 10 && bytes[6] === 26 && bytes[7] === 10) {
+		return "PNG image";
+	}
+	if (bytes.length >= 3 && bytes[0] === 255 && bytes[1] === 216 && bytes[2] === 255) {
+		return "JPEG image";
+	}
+	if (bytes.length >= 6 && bytesToAscii(bytes.slice(0, 6)).startsWith("GIF8")) {
+		return "GIF image";
+	}
+	if (bytes.length >= 4 && bytesToAscii(bytes.slice(0, 4)) === "%PDF") {
+		return "PDF document";
+	}
+	if (bytes.length >= 4 && bytesToAscii(bytes.slice(0, 4)) === "PK..") {
+		return "ZIP-based archive or document";
+	}
+	if (bytes.length >= 12 && bytesToAscii(bytes.slice(0, 4)) === "RIFF" && bytesToAscii(bytes.slice(8, 12)) === "WEBP") {
+		return "WEBP image";
+	}
+	if (bytes.length >= 12 && bytesToAscii(bytes.slice(4, 8)) === "ftyp") {
+		return "ISO Base Media file (mp4/mov/heic family)";
+	}
+	if (bytes.length >= 3 && bytesToAscii(bytes.slice(0, 3)) === "ID3") {
+		return "MP3 audio";
+	}
+	if (bytes.length >= 5 && bytesToAscii(bytes.slice(0, 5)).toLowerCase() === "<html") {
+		return "HTML document";
+	}
+	if (bytes.length >= 1 && bytes[0] === 60) {
+		return "XML/HTML-like text";
+	}
+	if (bytes.length > 0) {
+		return "Unknown binary/text payload";
+	}
+	return "Empty file";
+}
+$effect(() => {
+	const blob = value;
+	if (!blob) {
+		headerHex = "";
+		headerAscii = "";
+		sniffedType = "No binary payload available";
+		return;
+	}
+	let cancelled = false;
+	blob.slice(0, 32).arrayBuffer().then((buffer) => {
+		if (cancelled) return;
+		const bytes = new Uint8Array(buffer);
+		headerHex = bytesToHex(bytes);
+		headerAscii = bytesToAscii(bytes);
+		sniffedType = detectFromHeader(bytes);
+	}).catch(() => {
+		if (cancelled) return;
+		headerHex = "";
+		headerAscii = "";
+		sniffedType = "Could not inspect file header";
+	});
+	return () => {
+		cancelled = true;
+	};
+});
 </script>
 
 <div class="flex h-full w-full flex-col gap-4 overflow-auto p-5 text-surface-700-300">

package/dist/components/ContentEditor/subcomponents/VideoPlayer.svelte

@@ -1,20 +1,20 @@
-<script lang="ts">
-  import type { VideoPlayerProps } from '../types.js';
-  import IconAlertCircle from '../../Icons/IconAlertCircle.svelte';
-  let { value, filename }: VideoPlayerProps = $props();
-
-  let src = $state('');
-  let srcType = $state<string | undefined>(undefined);
-  let err = $state<string | null>(null);
-
-  $effect(() => {
-    if (!value) { src = ''; srcType = undefined; return; }
-    err = null;
-    const url = URL.createObjectURL(value);
-    src = url;
-    srcType = value.type || undefined;
-    return () => URL.revokeObjectURL(url);
-  });
+<script lang="ts">import IconAlertCircle from "../../Icons/IconAlertCircle.svelte";
+let { value, filename } = $props();
+let src = $state("");
+let srcType = $state(undefined);
+let err = $state(null);
+$effect(() => {
+	if (!value) {
+		src = "";
+		srcType = undefined;
+		return;
+	}
+	err = null;
+	const url = URL.createObjectURL(value);
+	src = url;
+	srcType = value.type || undefined;
+	return () => URL.revokeObjectURL(url);
+});
 </script>
 
 <div class="flex h-full w-full flex-col items-center justify-center gap-4 bg-black p-4">

package/dist/components/ContentEditor/subcomponents/ZipViewer.svelte

@@ -1,6 +1,5 @@
-<script lang="ts">
-  import type { ImageViewerProps } from '../types.js';
-  let { value: _value, filename }: ImageViewerProps = $props();
+<script lang="ts">let { value: _value, filename } = $props();
+export {};
 </script>
 
 <div class="card p-4 text-surface-700-300">