@profidev/pleiades 1.7.0

package/dist/blocks/shortcut.svelte.js

@@ -0,0 +1,71 @@
+import { createAttachmentKey } from 'svelte/attachments';
+/** Allows you to configure one or more shortcuts based on the key events of an element.
+ *
+ * ## Usage
+ * ```svelte
+ * <!-- Ctrl + K Shortcut -->
+ * <svelte:window use:shortcut={
+ * 			{
+ * 				ctrl: true,
+ * 				key: 'k',
+ * 				callback: commandMenu.toggle
+ * 			}
+ * 		}
+ * />
+ * ```
+ */
+export const shortcut = (node, options) => {
+    const handleKeydown = (e, options) => {
+        if (options.ctrl && !e.ctrlKey && !e.metaKey)
+            return;
+        if (options.alt && !e.altKey)
+            return;
+        if (options.shift && !e.shiftKey)
+            return;
+        if (e.key.toLocaleLowerCase() !== options.key.toLocaleLowerCase())
+            return;
+        if (options.preventDefault === undefined || options.preventDefault) {
+            e.preventDefault();
+        }
+        if (options.stopPropagation) {
+            e.stopPropagation();
+        }
+        options.callback(e);
+    };
+    $effect(() => {
+        let optionsArr = [];
+        if (Array.isArray(options)) {
+            optionsArr = options;
+        }
+        else {
+            optionsArr = [options];
+        }
+        for (const opt of optionsArr) {
+            node.addEventListener(opt.event ?? 'keydown', (e) => handleKeydown(e, opt));
+        }
+        return () => {
+            for (const opt of optionsArr) {
+                node.removeEventListener(opt.event ?? 'keydown', (e) => handleKeydown(e, opt));
+            }
+        };
+    });
+};
+/** Allows you to configure one or more shortcuts based on the key events of an element.
+ *
+ * ## Usage
+ * ```svelte
+ * <!-- Ctrl + K Shortcut -->
+ * <svelte:window
+ * 	  {...attachShortcut({
+ * 		  ctrl: true,
+ * 		  key: 'k',
+ * 		  callback: commandMenu.toggle
+ * 	  })}
+ * />
+ * ```
+ */
+export function attachShortcut(opts) {
+    return {
+        [createAttachmentKey()]: (node) => shortcut(node, opts)
+    };
+}

package/dist/blocks/typewriter.svelte.d.ts

@@ -0,0 +1,17 @@
+export type Options = {
+    speed: number;
+    delay: number;
+    onComplete?: () => void;
+};
+export declare const typewriter: (node: HTMLElement, { speed, delay, onComplete }: Partial<Options>) => {
+    delay: number;
+    duration: number;
+    tick: (t: number) => void;
+};
+export declare function attachTypewriter(opts?: Partial<Options>): {
+    [x: symbol]: (node: HTMLElement) => {
+        delay: number;
+        duration: number;
+        tick: (t: number) => void;
+    };
+};

package/dist/blocks/typewriter.svelte.js

@@ -0,0 +1,20 @@
+import { createAttachmentKey } from 'svelte/attachments';
+export const typewriter = (node, { speed = 1, delay = 0, onComplete }) => {
+    const text = node.textContent ?? '';
+    const duration = text.length / (speed * 0.01);
+    return {
+        delay,
+        duration,
+        tick: (t) => {
+            const i = Math.trunc(text.length * t);
+            node.textContent = text.slice(0, i);
+            if (node.textContent.length === text.length)
+                onComplete?.();
+        }
+    };
+};
+export function attachTypewriter(opts = {}) {
+    return {
+        [createAttachmentKey()]: (node) => typewriter(node, opts)
+    };
+}

package/dist/blocks/use-auto-scroll.svelte.d.ts

@@ -0,0 +1,37 @@
+/** Use this on a vertically scrollable container to ensure that it automatically scrolls to the bottom of the content.
+ *
+ * ## Usage
+ * ```svelte
+ * <script lang="ts">
+ *      import { UseAutoScroll } from '../hooks/use-auto-scroll.svelte';
+ *
+ *      let { children } = $props();
+ *
+ *      const autoScroll = new UseAutoScroll();
+ * </script>
+ *
+ * <div>
+ *      <div bind:this={autoScroll.ref}>
+ *          {@render children?.()}
+ *      </div>
+ *      {#if !autoScroll.isAtBottom}
+ *          <button onclick={() => autoScroll.scrollToBottom()}>
+ *              Scroll To Bottom
+ *          </button>
+ *      {/if}
+ * </div>
+ * ```
+ */
+export declare class UseAutoScroll {
+    #private;
+    private lastScrollHeight;
+    set ref(ref: HTMLElement | undefined);
+    get ref(): HTMLElement | undefined;
+    get scrollY(): number;
+    /** Checks if the container is scrolled to the bottom */
+    get isAtBottom(): boolean;
+    /** Disables auto scrolling until the container is scrolled back to the bottom */
+    disableAutoScroll(): void;
+    /** Scrolls the container to the bottom */
+    scrollToBottom(auto?: boolean): void;
+}

package/dist/blocks/use-auto-scroll.svelte.js

@@ -0,0 +1,88 @@
+/** Use this on a vertically scrollable container to ensure that it automatically scrolls to the bottom of the content.
+ *
+ * ## Usage
+ * ```svelte
+ * <script lang="ts">
+ *      import { UseAutoScroll } from '../hooks/use-auto-scroll.svelte';
+ *
+ *      let { children } = $props();
+ *
+ *      const autoScroll = new UseAutoScroll();
+ * </script>
+ *
+ * <div>
+ *      <div bind:this={autoScroll.ref}>
+ *          {@render children?.()}
+ *      </div>
+ *      {#if !autoScroll.isAtBottom}
+ *          <button onclick={() => autoScroll.scrollToBottom()}>
+ *              Scroll To Bottom
+ *          </button>
+ *      {/if}
+ * </div>
+ * ```
+ */
+export class UseAutoScroll {
+    #ref = $state();
+    #scrollY = $state(0);
+    #userHasScrolled = $state(false);
+    lastScrollHeight = 0;
+    // This sets everything up once #ref is bound
+    set ref(ref) {
+        this.#ref = ref;
+        if (!this.#ref)
+            return;
+        this.lastScrollHeight = this.#ref.scrollHeight;
+        // start from bottom or start position
+        this.#ref.scrollTo(0, this.#scrollY ? this.#scrollY : this.#ref.scrollHeight);
+        this.#ref.addEventListener('scroll', () => {
+            if (!this.#ref)
+                return;
+            this.#scrollY = this.#ref.scrollTop;
+            this.disableAutoScroll();
+        });
+        window.addEventListener('resize', () => {
+            this.scrollToBottom(true);
+        });
+        // should detect when something changed that effected the scroll height
+        const observer = new MutationObserver(() => {
+            if (!this.#ref)
+                return;
+            if (this.#ref.scrollHeight !== this.lastScrollHeight) {
+                this.scrollToBottom(true);
+            }
+            this.lastScrollHeight = this.#ref.scrollHeight;
+        });
+        observer.observe(this.#ref, { childList: true, subtree: true });
+    }
+    get ref() {
+        return this.#ref;
+    }
+    get scrollY() {
+        return this.#scrollY;
+    }
+    /** Checks if the container is scrolled to the bottom */
+    get isAtBottom() {
+        if (!this.#ref)
+            return true;
+        return this.#scrollY + this.#ref.offsetHeight >= this.#ref.scrollHeight;
+    }
+    /** Disables auto scrolling until the container is scrolled back to the bottom */
+    disableAutoScroll() {
+        if (this.isAtBottom) {
+            this.#userHasScrolled = false;
+        }
+        else {
+            this.#userHasScrolled = true;
+        }
+    }
+    /** Scrolls the container to the bottom */
+    scrollToBottom(auto = false) {
+        if (!this.#ref)
+            return;
+        // don't auto scroll if user has scrolled
+        if (auto && this.#userHasScrolled)
+            return;
+        this.#ref.scrollTo(0, this.#ref.scrollHeight);
+    }
+}

package/dist/blocks/use-boolean.svelte.d.ts

@@ -0,0 +1,31 @@
+/** A hook for easy use of boolean values
+ *
+ * ## Usage
+ * ```svelte
+ * <script lang="ts">
+ *      const open = new UseBoolean();
+ * </script>
+ *
+ * <p>Value is: {open.current}</p>
+ * <button onclick={open.toggle}>Toggle</button>
+ * <button onclick={open.setTrue}>Set True</button>
+ * <button onclick={open.setFalse}>Set False</button>
+ * <button onclick={() => {
+ *      open.current = true;
+ * }}>
+ *      Custom
+ * </button>
+ * ```
+ */
+export declare class UseBoolean {
+    #private;
+    constructor(defaultValue?: boolean);
+    /** Toggles the current state */
+    toggle(): void;
+    /** Sets the current state to true */
+    setTrue(): void;
+    /** Sets the current state to false */
+    setFalse(): void;
+    get current(): boolean;
+    set current(val: boolean);
+}

package/dist/blocks/use-boolean.svelte.js

@@ -0,0 +1,46 @@
+/** A hook for easy use of boolean values
+ *
+ * ## Usage
+ * ```svelte
+ * <script lang="ts">
+ *      const open = new UseBoolean();
+ * </script>
+ *
+ * <p>Value is: {open.current}</p>
+ * <button onclick={open.toggle}>Toggle</button>
+ * <button onclick={open.setTrue}>Set True</button>
+ * <button onclick={open.setFalse}>Set False</button>
+ * <button onclick={() => {
+ *      open.current = true;
+ * }}>
+ *      Custom
+ * </button>
+ * ```
+ */
+export class UseBoolean {
+    #current = $state(false);
+    constructor(defaultValue = false) {
+        this.#current = defaultValue;
+        this.toggle = this.toggle.bind(this);
+        this.setTrue = this.setTrue.bind(this);
+        this.setFalse = this.setFalse.bind(this);
+    }
+    /** Toggles the current state */
+    toggle() {
+        this.#current = !this.#current;
+    }
+    /** Sets the current state to true */
+    setTrue() {
+        this.#current = true;
+    }
+    /** Sets the current state to false */
+    setFalse() {
+        this.#current = false;
+    }
+    get current() {
+        return this.#current;
+    }
+    set current(val) {
+        this.#current = val;
+    }
+}

package/dist/blocks/use-clipboard.svelte.d.ts

@@ -0,0 +1,50 @@
+type Options = {
+    /** The time before the copied status is reset. */
+    delay: number;
+};
+/** Use this hook to copy text to the clipboard and show a copied state.
+ *
+ * ## Usage
+ * ```svelte
+ * <script lang="ts">
+ * 		import { UseClipboard } from "../hooks/use-clipboard.svelte";
+ *
+ * 		const clipboard = new UseClipboard();
+ * </script>
+ *
+ * <button onclick={() => clipboard.copy('Hello, World!')}>
+ *     {#if clipboard.copied === 'success'}
+ *         Copied!
+ *     {:else if clipboard.copied === 'failure'}
+ *         Failed to copy!
+ *     {:else}
+ *         Copy
+ *     {/if}
+ * </button>
+ * ```
+ *
+ */
+export declare class UseClipboard {
+    #private;
+    private delay;
+    private timeout;
+    constructor({ delay }?: Partial<Options>);
+    /** Copies the given text to the users clipboard.
+     *
+     * ## Usage
+     * ```ts
+     * clipboard.copy('Hello, World!');
+     * ```
+     *
+     * @param text
+     * @returns
+     */
+    copy(text: string): Promise<"success" | "failure">;
+    /** true when the user has just copied to the clipboard. */
+    get copied(): boolean;
+    /**	Indicates whether a copy has occurred
+     * and gives a status of either `success` or `failure`. */
+    get status(): "success" | "failure" | undefined;
+}
+export declare function copyText(text: string): Promise<'success' | 'failure'>;
+export {};

package/dist/blocks/use-clipboard.svelte.js

@@ -0,0 +1,83 @@
+/** Use this hook to copy text to the clipboard and show a copied state.
+ *
+ * ## Usage
+ * ```svelte
+ * <script lang="ts">
+ * 		import { UseClipboard } from "../hooks/use-clipboard.svelte";
+ *
+ * 		const clipboard = new UseClipboard();
+ * </script>
+ *
+ * <button onclick={() => clipboard.copy('Hello, World!')}>
+ *     {#if clipboard.copied === 'success'}
+ *         Copied!
+ *     {:else if clipboard.copied === 'failure'}
+ *         Failed to copy!
+ *     {:else}
+ *         Copy
+ *     {/if}
+ * </button>
+ * ```
+ *
+ */
+export class UseClipboard {
+    #copiedStatus = $state();
+    delay;
+    timeout = undefined;
+    constructor({ delay = 500 } = {}) {
+        this.delay = delay;
+    }
+    /** Copies the given text to the users clipboard.
+     *
+     * ## Usage
+     * ```ts
+     * clipboard.copy('Hello, World!');
+     * ```
+     *
+     * @param text
+     * @returns
+     */
+    async copy(text) {
+        if (this.timeout) {
+            this.#copiedStatus = undefined;
+            clearTimeout(this.timeout);
+        }
+        this.#copiedStatus = await copyText(text);
+        this.timeout = setTimeout(() => {
+            this.#copiedStatus = undefined;
+        }, this.delay);
+        return this.#copiedStatus;
+    }
+    /** true when the user has just copied to the clipboard. */
+    get copied() {
+        return this.#copiedStatus === 'success';
+    }
+    /**	Indicates whether a copy has occurred
+     * and gives a status of either `success` or `failure`. */
+    get status() {
+        return this.#copiedStatus;
+    }
+}
+export async function copyText(text) {
+    try {
+        if (navigator.clipboard && window.isSecureContext) {
+            await navigator.clipboard.writeText(text);
+            return 'success';
+        }
+        // when navigator.clipboard is unavailable we fallback to this for wider browser compatibility
+        const textArea = document.createElement('textarea');
+        textArea.value = text;
+        textArea.style.position = 'fixed';
+        textArea.style.top = '0';
+        textArea.style.left = '0';
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        const successful = document.execCommand('copy');
+        document.body.removeChild(textArea);
+        return successful ? 'success' : 'failure';
+    }
+    catch {
+        return 'failure';
+    }
+}

package/dist/blocks/use-frecency.svelte.d.ts

@@ -0,0 +1,19 @@
+import { PersistedState } from 'runed';
+type FrecencyItem = {
+    uses: number;
+    lastUsage: number;
+};
+type PersistedStateOptions<T> = ConstructorParameters<typeof PersistedState<T>>[2];
+type UseFrecencyOptions = PersistedStateOptions<FrecencyMap> & {
+    maxItems?: number;
+};
+type FrecencyMap = Record<string, FrecencyItem | undefined>;
+export declare class UseFrecency {
+    #private;
+    readonly opts: UseFrecencyOptions;
+    constructor(key: string, initialValue?: FrecencyMap, opts?: UseFrecencyOptions);
+    use(key: string): void;
+    get items(): string[];
+    clear(): void;
+}
+export {};

package/dist/blocks/use-frecency.svelte.js

@@ -0,0 +1,33 @@
+import { PersistedState } from 'runed';
+export class UseFrecency {
+    opts;
+    #items;
+    constructor(key, initialValue = {}, opts = {}) {
+        this.opts = opts;
+        this.#items = new PersistedState(key, initialValue, this.opts);
+        this.use = this.use.bind(this);
+    }
+    use(key) {
+        const item = this.#items.current[key];
+        this.#items.current[key] = {
+            uses: 1 + (item?.uses ?? 0),
+            lastUsage: Date.now()
+        };
+    }
+    get items() {
+        return Array.from(Object.entries(this.#items.current))
+            .filter(([_a, a]) => a !== undefined)
+            .sort(([_a, a], [_b, b]) => {
+            if (a.uses > b.uses)
+                return -1;
+            if (b.uses > a.uses)
+                return 1;
+            return a.lastUsage - b.lastUsage;
+        })
+            .slice(0, this.opts.maxItems)
+            .map(([key]) => key);
+    }
+    clear() {
+        this.#items.current = {};
+    }
+}

package/dist/blocks/use-media.svelte.d.ts

@@ -0,0 +1,10 @@
+export type Breakpoints<K extends string> = Record<K, string>;
+/** Based on the default Tailwind CSS breakpoints https://tailwindcss.com/docs/responsive-design.
+ * A breakpoint is `true` when the width of the screen is greater than or equal to the breakpoint. */
+export declare const TAILWIND_BREAKPOINTS: Breakpoints<'sm' | 'md' | 'lg' | 'xl' | '2xl'>;
+/** Dynamically creates media queries for the provided breakpoints allowing you to access them as `media.<name>`.
+ *
+ * @param breakpoints
+ * @returns
+ */
+export declare function useMedia<K extends string = keyof typeof TAILWIND_BREAKPOINTS>(breakpoints?: Breakpoints<K>): Record<K, boolean>;

package/dist/blocks/use-media.svelte.js

@@ -0,0 +1,25 @@
+import { MediaQuery } from 'svelte/reactivity';
+/** Based on the default Tailwind CSS breakpoints https://tailwindcss.com/docs/responsive-design.
+ * A breakpoint is `true` when the width of the screen is greater than or equal to the breakpoint. */
+export const TAILWIND_BREAKPOINTS = {
+    sm: '40rem',
+    md: '48rem',
+    lg: '64rem',
+    xl: '80rem',
+    '2xl': '96rem'
+};
+/** Dynamically creates media queries for the provided breakpoints allowing you to access them as `media.<name>`.
+ *
+ * @param breakpoints
+ * @returns
+ */
+export function useMedia(breakpoints = TAILWIND_BREAKPOINTS) {
+    const queries = {};
+    for (const [name, size] of Object.entries(breakpoints)) {
+        const query = new MediaQuery(`min-width: ${size}`);
+        Object.defineProperty(queries, name, {
+            get: () => query.current
+        });
+    }
+    return queries;
+}

package/dist/blocks/use-promise.svelte.d.ts

@@ -0,0 +1,25 @@
+/** A hook for working with promises reactively when the `{#await}` block is not an option.
+ *
+ * ## Usage
+ * ```svelte
+ * <script lang="ts">
+ *      let { data } = $props();
+ *
+ *      const version = new UsePromise(data.version, '1.0.0');
+ * </script>
+ *
+ * <!-- 1.0.0 until resolved -->
+ * <Command args={[`jsrepo@${version.current}`, 'add', 'hooks/use-promise.svelte']} />
+ * ```
+ */
+export declare class UsePromise<T> {
+    #private;
+    readonly fallback?: T | undefined;
+    constructor(promise: Promise<T>, fallback?: T | undefined);
+    /** Returns the value of the resolved promise or the fallback value (if provided)*/
+    get current(): T | undefined;
+    /** Returns true when the promise has been resolved */
+    get isResolved(): boolean;
+    /** Returns the original promise */
+    get promise(): Promise<T> | undefined;
+}

package/dist/blocks/use-promise.svelte.js

@@ -0,0 +1,40 @@
+/** A hook for working with promises reactively when the `{#await}` block is not an option.
+ *
+ * ## Usage
+ * ```svelte
+ * <script lang="ts">
+ *      let { data } = $props();
+ *
+ *      const version = new UsePromise(data.version, '1.0.0');
+ * </script>
+ *
+ * <!-- 1.0.0 until resolved -->
+ * <Command args={[`jsrepo@${version.current}`, 'add', 'hooks/use-promise.svelte']} />
+ * ```
+ */
+export class UsePromise {
+    fallback;
+    #isResolved = $state(false);
+    #resolvedValue = $state();
+    #promise = $state();
+    constructor(promise, fallback) {
+        this.fallback = fallback;
+        this.#promise = promise;
+        this.#promise.then((v) => {
+            this.#resolvedValue = v;
+            this.#isResolved = true;
+        });
+    }
+    /** Returns the value of the resolved promise or the fallback value (if provided)*/
+    get current() {
+        return this.#isResolved ? this.#resolvedValue : this.fallback;
+    }
+    /** Returns true when the promise has been resolved */
+    get isResolved() {
+        return this.#isResolved;
+    }
+    /** Returns the original promise */
+    get promise() {
+        return this.#promise;
+    }
+}

package/dist/blocks/use-ramp.svelte.d.ts

@@ -0,0 +1,32 @@
+export type UseRampOptions = {
+    /** The function to call to increment the value */
+    increment: () => void;
+    /**
+     * The maximum amount of time it should take to increment the value by 1 in milliseconds
+     * @default 200
+     */
+    maxFrequency?: number;
+    /**
+     * The minimum amount of time it should take to increment the value by 1 in milliseconds
+     * @default 25
+     */
+    minFrequency?: number;
+    /**
+     * The amount of time to wait in milliseconds before starting to ramp up.
+     * @default 100
+     */
+    startDelay?: number;
+    /**
+     * The amount of time it should take to ramp up to the minimum frequency
+     * @default 2500
+     */
+    rampUpTime?: number;
+    /** A function to determine whether the value can be incremented. When false the ramp will be reset. */
+    canRamp: () => boolean;
+};
+export declare function useRamp({ increment, maxFrequency, minFrequency, startDelay, rampUpTime, canRamp }: UseRampOptions): {
+    start: () => void;
+    reset: () => void;
+    readonly active: boolean;
+    readonly ramping: boolean;
+};

package/dist/blocks/use-ramp.svelte.js

@@ -0,0 +1,42 @@
+export function useRamp({ increment, maxFrequency = 200, minFrequency = 25, startDelay = 100, rampUpTime = 2500, canRamp }) {
+    let active = $state(false);
+    let ramping = $state(false);
+    let rampStartTimeout;
+    let rampIntervalTimeout;
+    let rampStartedAt;
+    function rampUp() {
+        if (!active)
+            return;
+        ramping = true;
+        const timeSinceStart = Date.now() - (rampStartedAt ?? 0);
+        const freq = rampUpTime === 0 ? 0 : Math.min(timeSinceStart, rampUpTime) / rampUpTime;
+        if (!canRamp()) {
+            reset();
+            return;
+        }
+        increment();
+        rampIntervalTimeout = setTimeout(() => rampUp(), maxFrequency - freq * (maxFrequency - minFrequency));
+    }
+    function reset() {
+        clearTimeout(rampStartTimeout);
+        clearTimeout(rampIntervalTimeout);
+        rampStartedAt = undefined;
+        active = false;
+        ramping = false;
+    }
+    function start() {
+        active = true;
+        rampStartedAt = Date.now();
+        rampStartTimeout = setTimeout(() => rampUp(), startDelay);
+    }
+    return {
+        start,
+        reset,
+        get active() {
+            return active;
+        },
+        get ramping() {
+            return ramping;
+        }
+    };
+}