@tableslayer/ui 0.0.1

package/dist/types/awareness.d.ts

@@ -0,0 +1,16 @@
+export interface HoveredMarker {
+    id: string;
+    position: {
+        x: number;
+        y: number;
+        z: number;
+    };
+    tooltip: {
+        title: string;
+        content: string;
+        imageUrl?: string;
+    };
+}
+export interface MarkerAwarenessState {
+    hoveredMarker?: HoveredMarker;
+}

package/dist/types/awareness.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/rle.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Run-Length Encoding utilities for binary mask compression
+ * Optimized for fog and annotation layers
+ */
+/**
+ * Encodes a binary mask using Run-Length Encoding
+ * @param data - Binary mask data (Uint8Array where each byte is 0 or 255)
+ * @returns Encoded RLE data as Uint8Array
+ */
+export declare function encodeRLE(data: Uint8Array): Uint8Array;
+/**
+ * Decodes RLE data back to binary mask
+ * @param encoded - RLE encoded data
+ * @param targetLength - Expected length of decoded data
+ * @returns Decoded binary mask as Uint8Array
+ */
+export declare function decodeRLE(encoded: Uint8Array, targetLength: number): Uint8Array;
+/**
+ * Converts a PNG blob to RLE encoded data
+ * @param blob - PNG image blob
+ * @param width - Image width
+ * @param height - Image height
+ * @returns RLE encoded data
+ */
+export declare function pngToRLE(blob: Blob, width: number, height: number): Promise<Uint8Array>;
+/**
+ * Converts RLE encoded data to a PNG blob
+ * @param rleData - RLE encoded data
+ * @param width - Image width
+ * @param height - Image height
+ * @returns PNG image blob
+ */
+export declare function rleToPng(rleData: Uint8Array, width: number, height: number): Promise<Blob>;
+/**
+ * Gets the size of RLE data when encoded
+ */
+export declare function getRLESize(data: Uint8Array): number;
+/**
+ * Estimates compression ratio for RLE encoding
+ */
+export declare function estimateCompressionRatio(data: Uint8Array): number;

package/dist/utils/rle.js

@@ -0,0 +1,201 @@
+/**
+ * Run-Length Encoding utilities for binary mask compression
+ * Optimized for fog and annotation layers
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/**
+ * Encodes a binary mask using Run-Length Encoding
+ * @param data - Binary mask data (Uint8Array where each byte is 0 or 255)
+ * @returns Encoded RLE data as Uint8Array
+ */
+export function encodeRLE(data) {
+    if (data.length === 0)
+        return new Uint8Array(0);
+    const runs = [];
+    let currentValue = data[0];
+    let runLength = 1;
+    // First byte indicates the starting value (0 or 1)
+    runs.push(currentValue === 0 ? 0 : 1);
+    for (let i = 1; i < data.length; i++) {
+        if (data[i] === currentValue) {
+            runLength++;
+        }
+        else {
+            // Store the run length
+            pushVarint(runs, runLength);
+            currentValue = data[i];
+            runLength = 1;
+        }
+    }
+    // Don't forget the last run
+    pushVarint(runs, runLength);
+    return new Uint8Array(runs);
+}
+/**
+ * Decodes RLE data back to binary mask
+ * @param encoded - RLE encoded data
+ * @param targetLength - Expected length of decoded data
+ * @returns Decoded binary mask as Uint8Array
+ */
+export function decodeRLE(encoded, targetLength) {
+    if (encoded.length === 0)
+        return new Uint8Array(targetLength);
+    const result = new Uint8Array(targetLength);
+    let position = 0;
+    let index = 0;
+    // First byte indicates the starting value
+    const startValue = encoded[index++];
+    let currentValue = startValue === 0 ? 0 : 255;
+    while (index < encoded.length && position < targetLength) {
+        const [runLength, newIndex] = readVarint(encoded, index);
+        index = newIndex;
+        // Fill the result array with the current value
+        const end = Math.min(position + runLength, targetLength);
+        for (let i = position; i < end; i++) {
+            result[i] = currentValue;
+        }
+        position = end;
+        // Toggle the current value
+        currentValue = currentValue === 0 ? 255 : 0;
+    }
+    return result;
+}
+/**
+ * Variable-length integer encoding (for efficient storage of run lengths)
+ * Uses continuation bit in MSB
+ */
+function pushVarint(array, value) {
+    while (value > 127) {
+        array.push((value & 0x7f) | 0x80);
+        value >>>= 7;
+    }
+    array.push(value & 0x7f);
+}
+/**
+ * Read a variable-length integer from the array
+ */
+function readVarint(array, index) {
+    let value = 0;
+    let shift = 0;
+    while (index < array.length) {
+        const byte = array[index++];
+        value |= (byte & 0x7f) << shift;
+        if ((byte & 0x80) === 0) {
+            break;
+        }
+        shift += 7;
+    }
+    return [value, index];
+}
+/**
+ * Converts a PNG blob to RLE encoded data
+ * @param blob - PNG image blob
+ * @param width - Image width
+ * @param height - Image height
+ * @returns RLE encoded data
+ */
+export function pngToRLE(blob, width, height) {
+    return __awaiter(this, void 0, void 0, function* () {
+        // Create an off-screen canvas
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+            throw new Error('Failed to get canvas context');
+        }
+        // Load the image
+        const img = new Image();
+        const url = URL.createObjectURL(blob);
+        try {
+            yield new Promise((resolve, reject) => {
+                img.onload = resolve;
+                img.onerror = reject;
+                img.src = url;
+            });
+            // Draw image to canvas
+            ctx.drawImage(img, 0, 0, width, height);
+            // Get image data
+            const imageData = ctx.getImageData(0, 0, width, height);
+            const pixels = imageData.data;
+            // Convert RGBA to binary (using alpha channel)
+            const binaryData = new Uint8Array(width * height);
+            for (let i = 0; i < binaryData.length; i++) {
+                // Use alpha channel (every 4th byte starting at index 3)
+                binaryData[i] = pixels[i * 4 + 3] > 127 ? 255 : 0;
+            }
+            // Encode to RLE
+            return encodeRLE(binaryData);
+        }
+        finally {
+            URL.revokeObjectURL(url);
+        }
+    });
+}
+/**
+ * Converts RLE encoded data to a PNG blob
+ * @param rleData - RLE encoded data
+ * @param width - Image width
+ * @param height - Image height
+ * @returns PNG image blob
+ */
+export function rleToPng(rleData, width, height) {
+    return __awaiter(this, void 0, void 0, function* () {
+        // Decode RLE to binary
+        const binaryData = decodeRLE(rleData, width * height);
+        // Create canvas
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+            throw new Error('Failed to get canvas context');
+        }
+        // Create image data
+        const imageData = ctx.createImageData(width, height);
+        const pixels = imageData.data;
+        // Convert binary to RGBA
+        for (let i = 0; i < binaryData.length; i++) {
+            const idx = i * 4;
+            const value = binaryData[i];
+            pixels[idx] = 0; // R
+            pixels[idx + 1] = 0; // G
+            pixels[idx + 2] = 0; // B
+            pixels[idx + 3] = value; // A (0 or 255)
+        }
+        // Put image data to canvas
+        ctx.putImageData(imageData, 0, 0);
+        // Convert to blob
+        return new Promise((resolve, reject) => {
+            canvas.toBlob((blob) => {
+                if (blob) {
+                    resolve(blob);
+                }
+                else {
+                    reject(new Error('Failed to convert canvas to blob'));
+                }
+            }, 'image/png');
+        });
+    });
+}
+/**
+ * Gets the size of RLE data when encoded
+ */
+export function getRLESize(data) {
+    return encodeRLE(data).length;
+}
+/**
+ * Estimates compression ratio for RLE encoding
+ */
+export function estimateCompressionRatio(data) {
+    const encoded = encodeRLE(data);
+    return data.length / encoded.length;
+}

package/package.json

@@ -0,0 +1,110 @@
+{
+  "name": "@tableslayer/ui",
+  "version": "0.0.1",
+  "license": "FSL-1.1-ALv2",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tableslayer/tableslayer.git",
+    "directory": "packages/ui"
+  },
+  "author": "Siege Perilous LLC",
+  "keywords": [
+    "svelte",
+    "svelte5",
+    "components",
+    "ui",
+    "tableslayer"
+  ],
+  "homepage": "https://github.com/tableslayer/tableslayer/tree/main/packages/ui",
+  "scripts": {
+    "dev": "typedoc && pnpm check:watch",
+    "build": "svelte-kit sync && vite build && npm run package",
+    "preview": "vite preview",
+    "tsc": "tsc",
+    "package": "svelte-kit sync && svelte-package && typedoc",
+    "prepublishOnly": "npm run package",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "eslint .",
+    "typedoc": "typedoc",
+    "postinstall": "svelte-kit sync && pnpm run package"
+  },
+  "exports": {
+    ".": {
+      "types": "./src/lib/index.d.ts",
+      "svelte": "./src/lib/index.ts"
+    },
+    "./styles/*.css": {
+      "import": "./src/lib/styles/*.css",
+      "require": "./src/lib/styles/*.css"
+    },
+    "./typedoc.json": {
+      "import": "./typedocgen.json",
+      "require": "./typedocgen.json"
+    }
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "svelte": "./dist/index.js"
+      },
+      "./styles/*.css": {
+        "import": "./dist/styles/*.css",
+        "require": "./dist/styles/*.css"
+      }
+    }
+  },
+  "peerDependencies": {
+    "@melt-ui/svelte": "^0.86.2",
+    "@sveltejs/kit": "^2.16.0",
+    "svelte": "^5.19.0"
+  },
+  "devDependencies": {
+    "@magidoc/plugin-svelte-marked": "^6.3.0",
+    "@melt-ui/svelte": "^0.86.6",
+    "@sveltejs/adapter-auto": "^7.0.1",
+    "@sveltejs/kit": "^2.52.0",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@tableslayer/eslint-config": "workspace:*",
+    "@tableslayer/tsconfig": "workspace:*",
+    "@types/chroma-js": "^3.1.2",
+    "@types/marked": "^6.0.0",
+    "@types/three": "0.182.0",
+    "marked": "^17.0.2",
+    "svelte": "5.51.2",
+    "svelte-check": "^4.4.0",
+    "typedoc": "^0.28.17",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1"
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.7.5",
+    "@tabler/icons-svelte": "^3.36.1",
+    "@threlte/core": "8.3.1",
+    "@threlte/extras": "9.7.1",
+    "@tiptap/core": "^3.19.0",
+    "@tiptap/extension-link": "^3.19.0",
+    "@tiptap/extension-typography": "^3.19.0",
+    "@tiptap/pm": "^3.19.0",
+    "@tiptap/starter-kit": "^3.19.0",
+    "chroma-js": "^3.2.0",
+    "class-variance-authority": "^0.7.1",
+    "gifuct-js": "^2.1.2",
+    "lazy-brush": "^2.0.2",
+    "postprocessing": "6.38.2",
+    "shiki": "^3.22.0",
+    "three": "0.182.0",
+    "uuid": "^13.0.0",
+    "zod": "^4.3.6"
+  },
+  "svelte": "./src/lib/index.ts",
+  "types": "./src/lib/index.d.ts",
+  "type": "module"
+}