@ims360/svelte-ivory 0.0.2

package/LICENCE

@@ -0,0 +1,23 @@
+MIT License
+
+Copyright (c) 2025 ims360 GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2022.

package/README.md

@@ -0,0 +1,15 @@
+# Ivory, more than just a [skeleton](https://www.skeleton.dev/)
+
+A svelte library with a bunch of components and utilities, building upon [skeletons](https://www.skeleton.dev/) design system.  
+Currently this library is primarily intended for our ([ims360](https://ims360.de/)) internal use, so documentation is sparse at the moment.  
+Eventually we will add more documentation and examples to make it easier for devs outside our organization to use.
+
+## Setup
+
+Include this line in your `app.css` file, so the TW classes used in the lib are included:
+
+```css
+@source "../node_modules/@ims360/svelte-lib";
+```
+
+_You may need to adjust the path if your `app.css` is not located in `/src`_

package/dist/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/dist/components/ai/AiMessage.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+import type { AiChatMessage } from './Chat.svelte';
+interface Props {
+    b_message: AiChatMessage;
+    messageText?: Snippet<[{
+        message: AiChatMessage;
+    }]>;
+    class?: ClassValue;
+    minHeight?: number;
+}
+/**
+ * The default for AI Messages in the Chat component.
+ * Can be customized using the `class` and `loading` props.
+ */
+declare const AiMessage: import("svelte").Component<Props, {}, "b_message">;
+type AiMessage = ReturnType<typeof AiMessage>;
+export default AiMessage;

package/dist/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>

package/dist/components/ai/AttachedFile.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ClassValue } from 'svelte/elements';
+interface Props {
+    file: File;
+    onremove?: (f: File) => void;
+    class?: ClassValue;
+}
+declare const AttachedFile: import("svelte").Component<Props, {}, "">;
+type AttachedFile = ReturnType<typeof AttachedFile>;
+export default AttachedFile;

package/dist/components/ai/Chat.svelte

@@ -0,0 +1,150 @@
+<!-- 
+	@component
+	An AI chat component that can be used to create a chatbot.
+	Comes with default styles for the chat messages, but can be customized with the `userMessage` and `systemMessage` props.
+	The input component has to be provided as a child component, and the `submit` function has to be provided as a callback.  
+-->
+
+<script lang="ts" module>
+    import clsx from 'clsx';
+    import { tick, type Snippet } from 'svelte';
+    import type { ClassValue } from 'svelte/elements';
+    import { twMerge } from 'tailwind-merge';
+    import AiMessage from './AiMessage.svelte';
+    import UserMessage from './UserMessage.svelte';
+
+    export interface AiChatMessage {
+        from: 'user' | 'system';
+        message: string;
+        time?: Date;
+        liked?: boolean;
+        disliked?: boolean;
+        files?: File[];
+    }
+
+    export interface AiChat {
+        messages: AiChatMessage[];
+        loading?: boolean;
+    }
+</script>
+
+<script lang="ts">
+    interface Props {
+        class?: ClassValue;
+        b_chat: AiChat;
+        userMessage?: Snippet<[{ message: AiChatMessage; i: number }]>;
+        systemMessage?: Snippet<[{ message: AiChatMessage; i: number; minHeight?: number }]>;
+        placeholder?: Snippet;
+        children: Snippet<[{ onsubmit: (message: AiChatMessage) => Promise<void> }]>;
+        submit: (message: AiChatMessage) => Promise<void>;
+    }
+
+    let {
+        class: clazz,
+        b_chat: chat = $bindable(),
+        userMessage = defaultUserMessage,
+        systemMessage = defaultSystemMessage,
+        placeholder,
+        children,
+        submit: externalSubmit
+    }: Props = $props();
+
+    let chatContainer = $state<HTMLDivElement>();
+    let lastMessageMinHeight = $state(0);
+
+    function getLastMessageMinHeight() {
+        if (!chatContainer) return 0;
+        const secondToLastElement = chatContainer.children[chatContainer.children.length - 2];
+        const rect = secondToLastElement?.getBoundingClientRect();
+        const remainHeight = chatContainer.clientHeight - rect.height - 16;
+        return remainHeight;
+    }
+
+    async function scrollToBottom() {
+        if (!chatContainer) return;
+        await tick();
+        await tick();
+        lastMessageMinHeight = getLastMessageMinHeight();
+        await tick();
+        // ensure we don't scroll if the newly generated message is already in view
+        chatContainer.scrollTo({
+            top: chatContainer.scrollHeight,
+            behavior: 'smooth'
+        });
+    }
+
+    async function submit(message: AiChatMessage) {
+        if (chat.loading) {
+            return;
+        }
+
+        chat.messages.push({
+            ...message,
+            from: 'user',
+            time: new Date()
+        });
+        // prevent the user from sending another message while we are loading the ai response
+        chat.loading = true;
+
+        // add an empty system message to the chat, this will indicate a loading state
+        chat.messages.push({
+            from: 'system',
+            message: '',
+            time: new Date()
+        });
+
+        await scrollToBottom();
+
+        await externalSubmit(message);
+
+        chat.loading = false;
+    }
+</script>
+
+<div class={twMerge(clsx('flex grow flex-col gap-2 overflow-hidden', clazz))}>
+    <div
+        class="flex grow flex-col gap-4 overflow-auto pr-2 [scrollbar-gutter:stable]"
+        bind:this={chatContainer}
+    >
+        {#if chat.messages.length === 0 && placeholder}
+            {@render placeholder()}
+        {/if}
+        {#each chat.messages as _, i}
+            {@const message = chat.messages[i]}
+            {#if message.from === 'user'}
+                {@render userMessage({
+                    message,
+                    i
+                })}
+            {:else}
+                {@render systemMessage({
+                    message,
+                    i,
+                    minHeight: i === chat.messages.length - 1 ? lastMessageMinHeight : 0
+                })}
+            {/if}
+        {/each}
+    </div>
+    {@render children({ onsubmit: submit })}
+</div>
+
+{#snippet defaultSystemMessage({
+    i,
+    minHeight
+}: {
+    i: number;
+    message: AiChatMessage;
+    minHeight?: number;
+})}
+    <AiMessage bind:b_message={chat.messages[i]} {minHeight} />
+{/snippet}
+
+{#snippet defaultUserMessage({
+    message
+}: {
+    i: number;
+    message: AiChatMessage;
+    minHeight?: number;
+})}
+    <UserMessage {message} />
+{/snippet}

package/dist/components/ai/Chat.svelte.d.ts

@@ -0,0 +1,40 @@
+import { type Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+export interface AiChatMessage {
+    from: 'user' | 'system';
+    message: string;
+    time?: Date;
+    liked?: boolean;
+    disliked?: boolean;
+    files?: File[];
+}
+export interface AiChat {
+    messages: AiChatMessage[];
+    loading?: boolean;
+}
+interface Props {
+    class?: ClassValue;
+    b_chat: AiChat;
+    userMessage?: Snippet<[{
+        message: AiChatMessage;
+        i: number;
+    }]>;
+    systemMessage?: Snippet<[{
+        message: AiChatMessage;
+        i: number;
+        minHeight?: number;
+    }]>;
+    placeholder?: Snippet;
+    children: Snippet<[{
+        onsubmit: (message: AiChatMessage) => Promise<void>;
+    }]>;
+    submit: (message: AiChatMessage) => Promise<void>;
+}
+/**
+ * An AI chat component that can be used to create a chatbot.
+ * Comes with default styles for the chat messages, but can be customized with the `userMessage` and `systemMessage` props.
+ * The input component has to be provided as a child component, and the `submit` function has to be provided as a callback.
+ */
+declare const Chat: import("svelte").Component<Props, {}, "b_chat">;
+type Chat = ReturnType<typeof Chat>;
+export default Chat;

package/dist/components/ai/Markdown.svelte

@@ -0,0 +1,59 @@
+<!-- 
+	@component
+	Renders markdown to html.  
+	Uses the [marked](https://marked.js.org/) library for rendering and [dompurify](https://github.com/cure53/DOMPurify) for sanitizing the html.
+-->
+
+<script lang="ts">
+    import clsx from 'clsx';
+    import DomPurify from 'dompurify';
+    import { marked } from 'marked';
+    import type { ClassValue } from 'svelte/elements';
+    import { twMerge } from 'tailwind-merge';
+
+    interface Props {
+        source: string;
+        class?: ClassValue;
+        replace?: {
+            regex: RegExp;
+            replacerFactory: () => Promise<(match: string) => string> | ((match: string) => string);
+        };
+    }
+
+    let { source, replace, class: clazz }: Props = $props();
+
+    const html = $derived.by(async () => {
+        // replace 0 width characters
+        const cleanedSource = source.replace(
+            // eslint-disable-next-line no-misleading-character-class
+            /^[\u200B\u200C\u200D\u200E\u200F\uFEFF]/,
+            ''
+        );
+
+        const html = await marked.parse(cleanedSource);
+        // const docs = await documents.value;
+
+        if (replace) {
+            const replacer = await replace.replacerFactory();
+            const replaced = html.replaceAll(replace.regex, replacer);
+            return DomPurify.sanitize(replaced);
+        } else {
+            return DomPurify.sanitize(html);
+        }
+    });
+</script>
+
+<div
+    class={twMerge(
+        clsx(
+            'text-surface-950-50 prose prose-strong:text-surface-950-50 prose-p:my-1 flex flex-col items-start gap-1',
+            clazz
+        )
+    )}
+>
+    {#await html then html}
+        <!-- this is fine since we purify the string -->
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+        {@html html}
+    {/await}
+</div>

package/dist/components/ai/Markdown.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { ClassValue } from 'svelte/elements';
+interface Props {
+    source: string;
+    class?: ClassValue;
+    replace?: {
+        regex: RegExp;
+        replacerFactory: () => Promise<(match: string) => string> | ((match: string) => string);
+    };
+}
+/**
+ * Renders markdown to html.
+ * Uses the [marked](https://marked.js.org/) library for rendering and [dompurify](https://github.com/cure53/DOMPurify) for sanitizing the html.
+ */
+declare const Markdown: import("svelte").Component<Props, {}, "">;
+type Markdown = ReturnType<typeof Markdown>;
+export default Markdown;

package/dist/components/ai/UserMessage.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+    import clsx from 'clsx';
+    import type { Snippet } from 'svelte';
+    import type { ClassValue } from 'svelte/elements';
+    import { twMerge } from 'tailwind-merge';
+    import AttachedFile from './AttachedFile.svelte';
+    import type { AiChatMessage } from './Chat.svelte';
+    import Markdown from './Markdown.svelte';
+
+    interface Props {
+        class?: ClassValue;
+        message: AiChatMessage;
+        /** How attached files should be rendered */
+        attachedFile?: Snippet<[file: File]>;
+        /** How the message string should be rendered */
+        messageText?: Snippet<[{ message: AiChatMessage }]>;
+    }
+
+    let {
+        class: clazz,
+        message,
+        attachedFile = defaultAttachedFile,
+        messageText = defaultMessageText
+    }: Props = $props();
+</script>
+
+<div class={twMerge(clsx('flex w-full flex-col items-end gap-1', clazz))}>
+    {@render messageText({ message })}
+    {#if message.files}
+        <div class="flex flex-row items-center gap-2">
+            {#each message.files as file}
+                {@render attachedFile(file)}
+            {/each}
+        </div>
+    {/if}
+    <div class="flex flex-row items-center gap-2">
+        {#if message.time}
+            <p class="text-surface-400-600 text-sm">
+                {message.time.toLocaleString('de')}
+            </p>
+        {/if}
+    </div>
+</div>
+
+{#snippet defaultAttachedFile(file: File)}
+    <AttachedFile {file} />
+{/snippet}
+
+{#snippet defaultMessageText({ message }: { message: AiChatMessage })}
+    <div class="bg-surface-200-800 text-surface-contrast-200-800 rounded px-2 py-0.5">
+        <Markdown source={message.message} />
+    </div>
+{/snippet}

package/dist/components/ai/UserMessage.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+import type { AiChatMessage } from './Chat.svelte';
+interface Props {
+    class?: ClassValue;
+    message: AiChatMessage;
+    /** How attached files should be rendered */
+    attachedFile?: Snippet<[file: File]>;
+    /** How the message string should be rendered */
+    messageText?: Snippet<[{
+        message: AiChatMessage;
+    }]>;
+}
+declare const UserMessage: import("svelte").Component<Props, {}, "">;
+type UserMessage = ReturnType<typeof UserMessage>;
+export default UserMessage;

package/dist/components/ai/index.d.ts

@@ -0,0 +1,5 @@
+export { default as AiMessage } from './AiMessage.svelte';
+export { default as AttachedFile } from './AttachedFile.svelte';
+export { default as Chat, type AiChat, type AiChatMessage } from './Chat.svelte';
+export { default as Markdown } from './Markdown.svelte';
+export { default as UserMessage } from './UserMessage.svelte';

package/dist/components/ai/index.js

@@ -0,0 +1,5 @@
+export { default as AiMessage } from './AiMessage.svelte';
+export { default as AttachedFile } from './AttachedFile.svelte';
+export { default as Chat } from './Chat.svelte';
+export { default as Markdown } from './Markdown.svelte';
+export { default as UserMessage } from './UserMessage.svelte';

package/dist/components/basic/checkbox/Checkbox.svelte

@@ -0,0 +1,79 @@
+<!-- 
+    @component
+    It's a checkbox 
+-->
+
+<script lang="ts">
+    import { type Icon as LucideIcon, Minus, icons } from '@lucide/svelte';
+    import clsx from 'clsx';
+    import type { ClassValue } from 'svelte/elements';
+    import { twMerge } from 'tailwind-merge';
+
+    const Check = $derived(icons.Check);
+
+    type Props = {
+        class?: ClassValue;
+        /** `checked` has prioriy over `partial` */
+        checked?: boolean | null;
+        /** `checked` has prioriy over `partial` */
+        partial?: boolean | null;
+        id?: string;
+        /** if true, the onclick handler will not be called */
+        disabled?: boolean;
+        onclick?: () => void;
+        /** data-testid */
+        testId?: string;
+    };
+
+    let {
+        class: clazz,
+        checked = false,
+        partial = false,
+        id,
+        disabled = false,
+        onclick,
+        testId
+    }: Props = $props();
+
+    const {
+        icon: Icon,
+        innerClass,
+        style
+    }: { icon?: typeof LucideIcon; innerClass?: string; style?: string } = $derived.by(() => {
+        if (!checked && !partial) return { innerClass: 'border-surface-500' };
+        if (checked)
+            return {
+                icon: Check,
+                innerClass: 'bg-primary-500 border-primary-500 text-surface-50'
+            };
+        if (partial)
+            return {
+                icon: Minus,
+                innerClass: 'border-primary-700 text-primary-500'
+            };
+        return {};
+    });
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions-->
+<svelte:element
+    this={onclick ? 'button' : 'div'}
+    type="button"
+    {id}
+    {disabled}
+    {style}
+    class={twMerge(
+        clsx(
+            'box-border flex h-5 w-5 items-center justify-center overflow-hidden rounded border-2 transition-colors',
+            disabled && 'cursor-not-allowed opacity-70',
+            innerClass,
+            clazz
+        )
+    )}
+    {onclick}
+    data-testid={testId}
+>
+    {#if Icon}
+        <Icon class="h-full w-full" size={16} strokeWidth={3} />
+    {/if}
+</svelte:element>

package/dist/components/basic/checkbox/Checkbox.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { ClassValue } from 'svelte/elements';
+type Props = {
+    class?: ClassValue;
+    /** `checked` has prioriy over `partial` */
+    checked?: boolean | null;
+    /** `checked` has prioriy over `partial` */
+    partial?: boolean | null;
+    id?: string;
+    /** if true, the onclick handler will not be called */
+    disabled?: boolean;
+    onclick?: () => void;
+    /** data-testid */
+    testId?: string;
+};
+/** It's a checkbox */
+declare const Checkbox: import("svelte").Component<Props, {}, "">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/components/basic/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Checkbox } from './checkbox/Checkbox.svelte';
+export { default as Toggle } from './toggle/Toggle.svelte';

package/dist/components/basic/index.js

@@ -0,0 +1,2 @@
+export { default as Checkbox } from './checkbox/Checkbox.svelte';
+export { default as Toggle } from './toggle/Toggle.svelte';