@ims360/svelte-ivory 0.0.2

package/dist/utils/actions/clickOutside.js

@@ -0,0 +1,23 @@
+/** Dispatch event on click outside of node */
+export function clickOutside(node, params) {
+    function handleClick(event) {
+        if (!(event.target instanceof Node) ||
+            !node ||
+            node.contains(event.target) ||
+            event.defaultPrevented)
+            return;
+        if (typeof params === 'function') {
+            params(event);
+            return;
+        }
+        if (params.target?.contains(event.target))
+            return;
+        params.callback(event);
+    }
+    document.addEventListener('click', handleClick, true);
+    return {
+        destroy() {
+            document.removeEventListener('click', handleClick, true);
+        }
+    };
+}

package/dist/utils/actions/focusTrap.d.ts

@@ -0,0 +1,4 @@
+export declare function focusTrap(node: HTMLElement, enabled: boolean): {
+    update(newArgs: boolean): void;
+    destroy(): void;
+};

package/dist/utils/actions/focusTrap.js

@@ -0,0 +1,64 @@
+export function focusTrap(node, enabled) {
+    const elementWhitelist = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])';
+    let firstElement;
+    let lastElement;
+    function onFirstElemKeydown(e) {
+        if (e.shiftKey && e.code === 'Tab') {
+            e.preventDefault();
+            lastElement.focus();
+        }
+    }
+    function onLastElemKeydown(e) {
+        if (!e.shiftKey && e.code === 'Tab') {
+            e.preventDefault();
+            firstElement.focus();
+        }
+    }
+    function scanElements(fromObserver) {
+        if (enabled === false)
+            return;
+        const focusableElems = Array.from(node.querySelectorAll(elementWhitelist));
+        if (focusableElems.length) {
+            // Set first/last focusable elements
+            firstElement = focusableElems[0];
+            lastElement = focusableElems[focusableElems.length - 1];
+            // Auto-focus first focusable element only when not called from mutation observer
+            if (!fromObserver)
+                firstElement.focus();
+            // Listen for keydown on first & last element
+            firstElement.addEventListener('keydown', onFirstElemKeydown);
+            lastElement.addEventListener('keydown', onLastElemKeydown);
+        }
+    }
+    scanElements(false);
+    function cleanUp() {
+        if (firstElement)
+            firstElement.removeEventListener('keydown', onFirstElemKeydown);
+        if (lastElement)
+            lastElement.removeEventListener('keydown', onLastElemKeydown);
+    }
+    // Re-determine focusable elements when mutations are observed
+    const onObservationChange = (mutationRecords, observer) => {
+        if (mutationRecords.length) {
+            cleanUp();
+            scanElements(true);
+        }
+        return observer;
+    };
+    const observer = new MutationObserver(onObservationChange);
+    observer.observe(node, { childList: true, subtree: true });
+    // Lifecycle
+    return {
+        update(newArgs) {
+            enabled = newArgs;
+            if (newArgs)
+                scanElements(false);
+            else
+                cleanUp();
+        },
+        destroy() {
+            cleanUp();
+            observer.disconnect();
+        }
+    };
+}

package/dist/utils/actions/index.d.ts

@@ -0,0 +1,5 @@
+export { clickOutside } from './clickOutside';
+export { focusTrap } from './focusTrap';
+export { portal } from './portal';
+export { shortcut } from './shortcut';
+export { onFirstVisible } from './visible';

package/dist/utils/actions/index.js

@@ -0,0 +1,5 @@
+export { clickOutside } from './clickOutside';
+export { focusTrap } from './focusTrap';
+export { portal } from './portal';
+export { shortcut } from './shortcut';
+export { onFirstVisible } from './visible';

package/dist/utils/actions/portal.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Places the element in a diffrent place in the DOM
+ *
+ * **Use sparingy as it can make the DOM structure confusing**
+ */
+export declare function portal(el: HTMLElement, target?: HTMLElement | string): {
+    update: (newTarget: HTMLElement | string) => Promise<void>;
+    destroy: () => void;
+};

package/dist/utils/actions/portal.js

@@ -0,0 +1,39 @@
+import { tick } from 'svelte';
+/**
+ * Places the element in a diffrent place in the DOM
+ *
+ * **Use sparingy as it can make the DOM structure confusing**
+ */
+export function portal(el, target = 'body') {
+    let targetEl;
+    async function update(newTarget) {
+        target = newTarget;
+        if (typeof target === 'string') {
+            targetEl = document.querySelector(target);
+            if (targetEl === null) {
+                await tick();
+                targetEl = document.querySelector(target);
+            }
+            if (targetEl === null) {
+                throw new Error(`No element found matching css selector: "${target}"`);
+            }
+        }
+        else if (target instanceof HTMLElement) {
+            targetEl = target;
+        }
+        else {
+            throw new TypeError(`Unknown portal target type: ${target === null ? 'null' : typeof target}. Allowed types: string (CSS selector) or HTMLElement.`);
+        }
+        targetEl.appendChild(el);
+        el.hidden = false;
+    }
+    function destroy() {
+        if (el.parentNode)
+            el.parentNode.removeChild(el);
+    }
+    update(target);
+    return {
+        update,
+        destroy
+    };
+}

package/dist/utils/actions/shortcut.d.ts

@@ -0,0 +1,10 @@
+export declare const shortcut: (node: HTMLElement, params?: {
+    alt?: boolean;
+    shift?: boolean;
+    control?: boolean;
+    code: string;
+    callback: () => void;
+}) => {
+    update: () => void;
+    destroy: () => void;
+} | undefined;

package/dist/utils/actions/shortcut.js

@@ -0,0 +1,25 @@
+export const shortcut = (node, params) => {
+    if (!params)
+        return;
+    let handler;
+    const removeHandler = () => window.removeEventListener('keydown', handler);
+    const setHandler = () => {
+        removeHandler();
+        handler = (e) => {
+            if (!!params.alt != e.altKey ||
+                !!params.shift != e.shiftKey ||
+                !!params.control != (e.ctrlKey || e.metaKey) ||
+                params.code != e.code)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            params.callback();
+        };
+        window.addEventListener('keydown', handler);
+    };
+    setHandler();
+    return {
+        update: setHandler,
+        destroy: removeHandler
+    };
+};

package/dist/utils/actions/visible.d.ts

@@ -0,0 +1,5 @@
+import type { Action } from 'svelte/action';
+export declare const onFirstVisible: Action<HTMLElement, {
+    callback: () => void;
+    options?: Partial<IntersectionObserverInit>;
+}>;

package/dist/utils/actions/visible.js

@@ -0,0 +1,14 @@
+export const onFirstVisible = (node, input) => {
+    const observer = new IntersectionObserver((e) => {
+        if (!e[0].isIntersecting) {
+            return;
+        }
+        input.callback();
+    }, { root: null, threshold: 1, ...input.options });
+    observer.observe(node);
+    return {
+        destroy: () => {
+            observer.disconnect();
+        }
+    };
+};

package/dist/utils/functions/cookie.d.ts

@@ -0,0 +1,12 @@
+declare function getCookie(name: string): string;
+interface CookieSetParams {
+    name: string;
+    value: string;
+    days?: number;
+}
+declare function setCookie(params: CookieSetParams): string;
+export declare const cookie: {
+    get: typeof getCookie;
+    set: typeof setCookie;
+};
+export {};

package/dist/utils/functions/cookie.js

@@ -0,0 +1,36 @@
+function getCookie(name) {
+    const cname = name + '=';
+    let decodedCookie;
+    try {
+        decodedCookie = decodeURIComponent(document.cookie);
+    }
+    catch (error) {
+        return '';
+    }
+    const ca = decodedCookie.split(';');
+    for (let c of ca) {
+        while (c.startsWith(' ')) {
+            c = c.substring(1);
+        }
+        if (c.startsWith(cname)) {
+            return c.substring(cname.length);
+        }
+    }
+    return '';
+}
+function setCookie(params) {
+    const { name, value, days } = params;
+    let expires = '';
+    if (days) {
+        const date = new Date();
+        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+        expires = '; expires=' + date.toUTCString();
+    }
+    const cookie = name + '=' + (value || '') + expires + '; path=/';
+    document.cookie = cookie;
+    return cookie;
+}
+export const cookie = {
+    get: getCookie,
+    set: setCookie
+};

package/dist/utils/functions/index.d.ts

@@ -0,0 +1,3 @@
+export { cookie } from './cookie';
+export { pseudoRandomId } from './pseudoRandomId';
+export { queryParams } from './queryParams';

package/dist/utils/functions/index.js

@@ -0,0 +1,3 @@
+export { cookie } from './cookie';
+export { pseudoRandomId } from './pseudoRandomId';
+export { queryParams } from './queryParams';

package/dist/utils/functions/pseudoRandomId.d.ts

@@ -0,0 +1 @@
+export declare const pseudoRandomId: (prefix?: string) => string;

package/dist/utils/functions/pseudoRandomId.js

@@ -0,0 +1,3 @@
+export const pseudoRandomId = (prefix = '') => Math.random()
+    .toString(36)
+    .replace('0.', prefix || '');

package/dist/utils/functions/queryParams.d.ts

@@ -0,0 +1 @@
+export declare const queryParams: <T extends Record<string, string | number | undefined | null>>(params: T) => string;

package/dist/utils/functions/queryParams.js

@@ -0,0 +1,14 @@
+export const queryParams = (params) => {
+    // create the string
+    let query = '?';
+    let isFirst = true;
+    for (const [key, value] of Object.entries(params)) {
+        if (value === undefined || value === null)
+            continue;
+        if (!isFirst)
+            query += '&';
+        query += `${key}=${value}`;
+        isFirst = false;
+    }
+    return isFirst ? '' : query;
+};

package/package.json

@@ -0,0 +1,107 @@
+{
+    "dependencies": {
+        "@floating-ui/dom": "^1.6.13",
+        "@lucide/svelte": "^0.503.0",
+        "@tailwindcss/forms": "^0.5.10",
+        "@tailwindcss/typography": "^0.5.16",
+        "dompurify": "^3.2.5",
+        "marked": "^15.0.11",
+        "tailwind-merge": "^3.2.0",
+        "tailwindcss": "^4.0.0"
+    },
+    "devDependencies": {
+        "@eslint/compat": "^1.2.5",
+        "@eslint/js": "^9.18.0",
+        "@sveltejs/adapter-auto": "^4.0.0",
+        "@sveltejs/package": "^2.0.0",
+        "@sveltejs/vite-plugin-svelte": "^5.0.0",
+        "@tailwindcss/vite": "^4.1.4",
+        "@testing-library/jest-dom": "^6.6.3",
+        "@testing-library/svelte": "^5.2.4",
+        "@testing-library/user-event": "^14.6.1",
+        "@vitest/browser": "^3.1.1",
+        "@vitest/coverage-v8": "^3.1.1",
+        "@vitest/spy": "^3.1.2",
+        "eslint": "^9.18.0",
+        "eslint-config-prettier": "^10.0.1",
+        "eslint-plugin-svelte": "^3.0.0",
+        "globals": "^16.0.0",
+        "jsdom": "^26.0.0",
+        "playwright": "^1.51.1",
+        "prettier": "^3.4.2",
+        "prettier-plugin-svelte": "^3.3.3",
+        "prettier-plugin-tailwindcss": "^0.6.11",
+        "publint": "^0.3.2",
+        "svelte-check": "^4.0.0",
+        "typescript": "^5.0.0",
+        "typescript-eslint": "^8.20.0",
+        "vite": "^6.0.0",
+        "vitest": "^3.0.0"
+    },
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "svelte": "./dist/index.js"
+        },
+        "./components/ai": {
+            "types": "./dist/components/ai/index.d.ts",
+            "svelte": "./dist/components/ai/index.js"
+        },
+        "./components/basic": {
+            "types": "./dist/components/basic/index.d.ts",
+            "svelte": "./dist/components/basic/index.js"
+        },
+        "./components/layout": {
+            "types": "./dist/components/layout/index.d.ts",
+            "svelte": "./dist/components/layout/index.js"
+        },
+        "./components/toast": {
+            "types": "./dist/components/toast/index.d.ts",
+            "svelte": "./dist/components/toast/index.js"
+        },
+        "./utils/actions": {
+            "types": "./dist/utils/actions/index.d.ts",
+            "svelte": "./dist/utils/actions/index.js"
+        },
+        "./utils/functions": {
+            "types": "./dist/utils/functions/index.d.ts",
+            "svelte": "./dist/utils/functions/index.js"
+        }
+    },
+    "files": [
+        "dist",
+        "src/lib",
+        "!dist/**/*.test.*",
+        "!dist/**/*.spec.*"
+    ],
+    "keywords": [
+        "svelte"
+    ],
+    "license": "MIT",
+    "name": "@ims360/svelte-ivory",
+    "peerDependencies": {
+        "@skeletonlabs/skeleton": "^3.1.1",
+        "@sveltejs/kit": "^2.16.0",
+        "svelte": "^5.0.0"
+    },
+    "scripts": {
+        "build": "vite build && npm run prepack",
+        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+        "dev": "vite dev",
+        "format": "prettier --write .",
+        "lint": "prettier --check . && eslint .",
+        "prepack": "svelte-kit sync && svelte-package && publint",
+        "prepare": "svelte-kit sync || echo ''",
+        "preview": "vite preview",
+        "test": "npm run test:unit -- --run",
+        "test:unit": "vitest"
+    },
+    "sideEffects": [
+        "**/*.css"
+    ],
+    "svelte": "./dist/index.js",
+    "type": "module",
+    "types": "./dist/index.d.ts",
+    "version": "0.0.2"
+}

package/src/lib/components/ai/AiMessage.svelte

@@ -0,0 +1,115 @@
+<!-- 
+	@component
+	The default for AI Messages in the Chat component.
+	Can be customized using the `class` and `loading` props.
+-->
+
+<script lang="ts">
+    import { ThumbsDown, ThumbsUp } from '@lucide/svelte';
+    import clsx from 'clsx';
+    import type { Snippet } from 'svelte';
+    import type { ClassValue } from 'svelte/elements';
+    import { twMerge } from 'tailwind-merge';
+    import CopyToClipboardButton from '../buttons/CopyToClipboardButton.svelte';
+    import type { AiChatMessage } from './Chat.svelte';
+    import Markdown from './Markdown.svelte';
+
+    interface Props {
+        b_message: AiChatMessage;
+        messageText?: Snippet<[{ message: AiChatMessage }]>;
+        class?: ClassValue;
+        minHeight?: number;
+    }
+
+    let {
+        b_message = $bindable(),
+        class: clazz,
+        messageText = defaultMessage,
+        minHeight
+    }: Props = $props();
+
+    // const uuidRegex =
+    //     /[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/g;
+    // const icon = `<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" class="h-[1em] origin-center overflow-visible align-[-0.125rem]" viewBox="0 0 512 512"><g transform="translate(256 256)" transform-origin="128 0"><path d="M336 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l121.4 0L212.7 276.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L480 54.6 480 176c0 8.8 7.2 16 16 16s16-7.2 16-16l0-160c0-8.8-7.2-16-16-16L336 0zM64 32C28.7 32 0 60.7 0 96L0 448c0 35.3 28.7 64 64 64l352 0c35.3 0 64-28.7 64-64l0-144c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 144c0 17.7-14.3 32-32 32L64 480c-17.7 0-32-14.3-32-32L32 96c0-17.7 14.3-32 32-32l144 0c8.8 0 16-7.2 16-16s-7.2-16-16-16L64 32z" fill="currentColor" transform="translate(-256 -256)"></path><!----></g></svg>`;
+
+    // async function replacerFactory(): Promise<(match: string) => string> {
+    //     const docs = await documents.value;
+    //     return (match: string) => {
+    //         const doc = docs.find((d) => d.id === match);
+
+    //         return `<span class="bg-surface-100-900 py-1 px-2 rounded flex flex-row items-center gap-2 hover:shadow-lg w-fit transition-all">
+    //         ${doc?.title ?? 'Unbekanntes Dokument'}
+    //         <a href="/documents/${doc?.id}" target="_blank">
+    //         ${icon}
+    //         </a>
+    //         </span>`;
+    //     };
+    // }
+</script>
+
+<div
+    class={twMerge(clsx('group flex w-full flex-col items-start', clazz))}
+    style={minHeight ? `min-height: ${minHeight}px;` : undefined}
+>
+    {@render messageText({
+        message: b_message
+    })}
+    <div
+        class={[
+            'text-surface-500 flex -translate-x-3 flex-row items-center transition-all group-hover:opacity-100',
+            b_message.liked || b_message.disliked ? 'opacity-100' : 'opacity-0'
+        ]}
+    >
+        <CopyToClipboardButton
+            text={b_message.message}
+            toastMessage="Nachricht wurde in die Zwischenablage kopiert"
+        />
+        <button
+            type="button"
+            class="btn-icon"
+            onclick={() => {
+                b_message.liked = !b_message.liked;
+                b_message.disliked = false;
+            }}
+        >
+            <ThumbsUp class={[b_message.liked && 'fill-surface-500/50']} />
+        </button>
+        <button
+            type="button"
+            class="btn-icon"
+            onclick={() => {
+                b_message.liked = false;
+                b_message.disliked = !b_message.disliked;
+            }}
+        >
+            <ThumbsDown class={[b_message.disliked && 'fill-surface-500/50']} />
+        </button>
+        {#if b_message.time}
+            <p class="text-surface-400-600 pl-2">
+                {b_message.time.toLocaleString('de')}
+            </p>
+        {/if}
+    </div>
+</div>
+
+{#snippet defaultMessage({ message }: { message: AiChatMessage })}
+    {#if message}
+        <Markdown source={message.message} />
+    {:else}
+        <p class="flex flex-row">
+            <span class="h-4 animate-bounce rounded-full pl-1">.</span>
+            <span
+                class="h-4 animate-bounce rounded-full"
+                style="animation-delay: 125ms !important;"
+            >
+                .
+            </span>
+            <span
+                class="h-4 animate-bounce rounded-full"
+                style="animation-delay: 250ms !important;"
+            >
+                .
+            </span>
+        </p>
+    {/if}
+{/snippet}

package/src/lib/components/ai/AttachedFile.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+    import { X } from '@lucide/svelte';
+    import type { ClassValue } from 'svelte/elements';
+
+    interface Props {
+        file: File;
+        onremove?: (f: File) => void;
+        class?: ClassValue;
+    }
+
+    let { file, onremove, class: clazz }: Props = $props();
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<svelte:element
+    this={onremove ? 'button' : 'div'}
+    type={onremove ? 'button' : undefined}
+    onclick={onremove ? () => onremove(file) : undefined}
+    class={[
+        'bg-primary-500/25 group flex flex-row items-center gap-1 overflow-hidden rounded-full px-4 py-1 whitespace-nowrap',
+        clazz
+    ]}
+>
+    <p>{file.name}</p>
+    {#if onremove}
+        <X size={16} class="group-hover:text-primary-500" />
+    {/if}
+</svelte:element>