@profidev/pleiades 1.7.0

package/dist/components/ui-extra/tags-input/index.js

@@ -0,0 +1,2 @@
+import TagsInput from './tags-input.svelte';
+export { TagsInput };

package/dist/components/ui-extra/tags-input/tags-input-suggestion.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  type Props = {
+    id: string;
+    value: string;
+    active: boolean;
+    onSelect: (value: string) => void;
+  };
+
+  let { id, value, active, onSelect }: Props = $props();
+</script>
+
+<button
+  {id}
+  type="button"
+  role="option"
+  aria-selected={active}
+  class="hover:bg-accent aria-selected:bg-accent w-full cursor-default rounded-sm px-2 py-1.5 text-left text-sm outline-hidden transition-colors select-none"
+  onmousedown={(e) => {
+    e.preventDefault();
+    onSelect(value);
+  }}
+>
+  {value}
+</button>

package/dist/components/ui-extra/tags-input/tags-input-suggestion.svelte.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    id: string;
+    value: string;
+    active: boolean;
+    onSelect: (value: string) => void;
+};
+declare const TagsInputSuggestion: import("svelte").Component<Props, {}, "">;
+type TagsInputSuggestion = ReturnType<typeof TagsInputSuggestion>;
+export default TagsInputSuggestion;

package/dist/components/ui-extra/tags-input/tags-input-tag.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import XIcon from '@lucide/svelte/icons/x';
+
+  type Props = {
+    value: string;
+    disabled: boolean | null;
+    active: boolean;
+    onDelete: (value: string) => void;
+  };
+
+  let { value, disabled, onDelete, active }: Props = $props();
+</script>
+
+<div
+  class="bg-secondary ring-offset-background hover:bg-secondary/90 aria-selected:bg-secondary/90 aria-selected:ring-ring flex place-items-center gap-2 rounded-md px-2 py-0.5 transition-all hover:cursor-default aria-selected:ring-2 aria-selected:ring-offset-2"
+  aria-selected={active}
+>
+  <span>
+    {value}
+  </span>
+  <button type="button" {disabled} onclick={() => onDelete(value)}>
+    <XIcon class="size-4" />
+  </button>
+</div>

package/dist/components/ui-extra/tags-input/tags-input-tag.svelte.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    value: string;
+    disabled: boolean | null;
+    active: boolean;
+    onDelete: (value: string) => void;
+};
+declare const TagsInputTag: import("svelte").Component<Props, {}, "">;
+type TagsInputTag = ReturnType<typeof TagsInputTag>;
+export default TagsInputTag;

package/dist/components/ui-extra/tags-input/tags-input.svelte

@@ -0,0 +1,373 @@
+<script lang="ts">
+  import { cn } from '../../../blocks/utils.js';
+  import type { TagsInputProps } from './types';
+  import TagsInputTag from './tags-input-tag.svelte';
+  import TagsInputSuggestion from './tags-input-suggestion.svelte';
+  import { untrack } from 'svelte';
+
+  const defaultValidate: TagsInputProps['validate'] = (val, tags) => {
+    const transformed = val.trim();
+
+    // disallow empties
+    if (transformed.length === 0) return undefined;
+
+    // disallow duplicates
+    if (tags.find((t) => transformed === t)) return undefined;
+
+    return transformed;
+  };
+
+  const defaultFilter: NonNullable<TagsInputProps['filterSuggestions']> = (
+    inputValue,
+    suggestions
+  ) => {
+    const lower = inputValue.toLowerCase();
+    return suggestions.filter((s) => s.toLowerCase().includes(lower));
+  };
+
+  let {
+    value = $bindable([]),
+    placeholder,
+    class: className,
+    disabled = false,
+    validate = defaultValidate,
+    onValueChange,
+    suggestions,
+    filterSuggestions = defaultFilter,
+    restrictToSuggestions = false,
+    ...rest
+  }: TagsInputProps = $props();
+
+  let inputValue = $state('');
+  let tagIndex = $state<number>();
+  let invalid = $state(false);
+  let isComposing = $state(false);
+  let inputFocused = $state(false);
+  let suggestionIndex = $state<number>();
+  let listboxId = $props.id();
+  let listboxEl = $state<HTMLElement>();
+
+  $effect(() => {
+    if (suggestionIndex !== undefined && listboxEl) {
+      const item = listboxEl.querySelector(
+        `#${CSS.escape(listboxId)}-${suggestionIndex}`
+      );
+      item?.scrollIntoView({ block: 'nearest' });
+    }
+  });
+
+  const filteredSuggestions = $derived.by(() => {
+    if (!suggestions) return [];
+
+    const available = suggestions.filter((s) => !value.includes(s));
+
+    if (inputValue.length === 0) return available;
+
+    return filterSuggestions(inputValue, available);
+  });
+
+  const showSuggestions = $derived(
+    inputFocused && filteredSuggestions.length > 0 && tagIndex === undefined
+  );
+
+  $effect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    filteredSuggestions;
+
+    untrack(() => {
+      // default to first suggestion for better ux
+      suggestionIndex = filteredSuggestions.length > 0 ? 0 : undefined;
+    });
+  });
+
+  $effect(() => {
+    // whenever input value changes reset invalid
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    inputValue;
+
+    untrack(() => {
+      invalid = false;
+    });
+  });
+
+  const selectSuggestion = (val: string) => {
+    const validated = validate(val, value);
+
+    if (!validated) return;
+
+    value = [...value, validated];
+    onValueChange?.(value);
+    inputValue = '';
+    suggestionIndex = undefined;
+  };
+
+  const enter = () => {
+    if (isComposing) return;
+
+    if (showSuggestions && suggestionIndex !== undefined) {
+      selectSuggestion(filteredSuggestions[suggestionIndex]);
+      return;
+    }
+
+    if (restrictToSuggestions && suggestions) {
+      const match = suggestions.find(
+        (s) => s.toLowerCase() === inputValue.trim().toLowerCase()
+      );
+
+      if (!match) {
+        invalid = true;
+        return;
+      }
+
+      selectSuggestion(match);
+      return;
+    }
+
+    const validated = validate(inputValue, value);
+
+    if (!validated) {
+      invalid = true;
+      return;
+    }
+
+    value = [...value, validated];
+    onValueChange?.(value);
+    inputValue = '';
+  };
+
+  const compositionStart = () => {
+    isComposing = true;
+  };
+
+  const compositionEnd = () => {
+    isComposing = false;
+  };
+
+  const keydown = (e: KeyboardEvent) => {
+    const target = e.target as HTMLInputElement;
+
+    if (e.key === 'Escape') {
+      if (showSuggestions) {
+        suggestionIndex = undefined;
+        inputFocused = false;
+        target.blur();
+        return;
+      }
+    }
+
+    if (showSuggestions) {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+
+        if (suggestionIndex === undefined) {
+          suggestionIndex = 0;
+        } else {
+          suggestionIndex = (suggestionIndex + 1) % filteredSuggestions.length;
+        }
+
+        return;
+      }
+
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+
+        if (suggestionIndex === undefined) {
+          suggestionIndex = filteredSuggestions.length - 1;
+        } else {
+          suggestionIndex =
+            (suggestionIndex - 1 + filteredSuggestions.length) %
+            filteredSuggestions.length;
+        }
+
+        return;
+      }
+    }
+
+    if (e.key === 'Enter') {
+      // prevent form submit
+      e.preventDefault();
+
+      if (isComposing) return;
+
+      // delete focused tag
+      if (tagIndex !== undefined) {
+        deleteIndex(tagIndex);
+
+        // focus previous tag or reset
+        const prev = tagIndex - 1;
+        tagIndex = prev < 0 ? undefined : prev;
+        return;
+      }
+
+      enter();
+      return;
+    }
+
+    const isAtBeginning =
+      target.selectionStart === 0 && target.selectionEnd === 0;
+
+    let shouldResetIndex = true;
+
+    if (e.key === 'Backspace') {
+      if (isAtBeginning) {
+        e.preventDefault();
+
+        if (tagIndex !== undefined) {
+          deleteIndex(tagIndex);
+
+          // focus previous
+          const prev = tagIndex - 1;
+
+          if (prev < 0) {
+            tagIndex = undefined;
+          } else {
+            tagIndex = prev;
+          }
+        } else {
+          tagIndex = value.length - 1;
+        }
+
+        shouldResetIndex = false;
+      }
+    }
+
+    if (e.key === 'Delete') {
+      if (isAtBeginning) {
+        if (inputValue.length === 0) {
+          if (tagIndex !== undefined) {
+            e.preventDefault();
+
+            deleteIndex(tagIndex);
+
+            // stay focused on the same index unless value.length === 0
+            if (value.length === 0) tagIndex = undefined;
+
+            shouldResetIndex = false;
+          }
+        }
+      }
+    }
+
+    // controls for tag selection
+    if (isAtBeginning) {
+      // left
+      if (e.key === 'ArrowLeft') {
+        if (tagIndex !== undefined) {
+          const prev = tagIndex - 1;
+
+          if (prev < 0) {
+            tagIndex = 0;
+          } else {
+            tagIndex = prev;
+          }
+        } else {
+          // set initial index
+          tagIndex = value.length - 1;
+        }
+
+        shouldResetIndex = false;
+      }
+
+      // right
+      // we can only move right if the value is empty
+      if (inputValue.length === 0) {
+        if (e.key === 'ArrowRight') {
+          if (tagIndex !== undefined) {
+            const next = tagIndex + 1;
+
+            if (next > value.length - 1) {
+              tagIndex = undefined;
+            } else {
+              tagIndex = next;
+            }
+
+            shouldResetIndex = false;
+          }
+        }
+      }
+    }
+
+    // reset the tag index to undefined
+    if (shouldResetIndex) {
+      tagIndex = undefined;
+    }
+  };
+
+  const deleteValue = (val: string) => {
+    const index = value.findIndex((v) => val === v);
+
+    if (index === -1) return;
+
+    deleteIndex(index);
+  };
+
+  const deleteIndex = (index: number) => {
+    value = [...value.slice(0, index), ...value.slice(index + 1)];
+    onValueChange?.(value);
+  };
+
+  const blur = () => {
+    tagIndex = undefined;
+    setTimeout(() => {
+      inputFocused = false;
+    }, 150);
+  };
+
+  const focus = () => {
+    inputFocused = true;
+  };
+</script>
+
+<div
+  class={cn(
+    'border-input bg-background selection:bg-primary dark:bg-input/30 relative flex min-h-[36px] w-full flex-wrap place-items-center gap-1 rounded-md border py-0.5 pr-1 pl-1 disabled:opacity-50 aria-disabled:cursor-not-allowed',
+    className
+  )}
+  aria-disabled={disabled}
+>
+  {#each value as tag, i (tag)}
+    <TagsInputTag
+      value={tag}
+      {disabled}
+      onDelete={deleteValue}
+      active={i === tagIndex}
+    />
+  {/each}
+  <input
+    {...rest}
+    bind:value={inputValue}
+    onblur={blur}
+    onfocus={focus}
+    oncompositionstart={compositionStart}
+    oncompositionend={compositionEnd}
+    {disabled}
+    {placeholder}
+    data-invalid={invalid}
+    onkeydown={keydown}
+    role={suggestions ? 'combobox' : undefined}
+    aria-expanded={suggestions ? showSuggestions : undefined}
+    aria-autocomplete={suggestions ? 'list' : undefined}
+    aria-controls={suggestions ? listboxId : undefined}
+    aria-activedescendant={suggestionIndex !== undefined
+      ? `${listboxId}-${suggestionIndex}`
+      : undefined}
+    class="placeholder:text-muted-foreground min-w-16 shrink grow basis-0 border-none bg-transparent px-2 outline-hidden focus:outline-hidden disabled:cursor-not-allowed data-[invalid=true]:text-red-500 md:text-sm"
+  />
+  {#if showSuggestions}
+    <div
+      bind:this={listboxEl}
+      id={listboxId}
+      role="listbox"
+      class="bg-popover text-popover-foreground absolute top-full right-0 left-0 z-50 mt-1 max-h-50 overflow-y-auto rounded-md border p-1 shadow-md"
+    >
+      {#each filteredSuggestions as suggestion, i (suggestion)}
+        <TagsInputSuggestion
+          id="{listboxId}-{i}"
+          value={suggestion}
+          active={i === suggestionIndex}
+          onSelect={selectSuggestion}
+        />
+      {/each}
+    </div>
+  {/if}
+</div>

package/dist/components/ui-extra/tags-input/tags-input.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TagsInputProps } from './types';
+declare const TagsInput: import("svelte").Component<TagsInputProps, {}, "value">;
+type TagsInput = ReturnType<typeof TagsInput>;
+export default TagsInput;

package/dist/components/ui-extra/tags-input/types.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+export type TagsInputPropsWithoutHTML = {
+    value?: string[];
+    validate?: (val: string, tags: string[]) => string | undefined;
+    onValueChange?: (value: string[]) => void;
+    suggestions?: string[];
+    filterSuggestions?: (inputValue: string, suggestions: string[]) => string[];
+    restrictToSuggestions?: boolean;
+};
+export type TagsInputProps = TagsInputPropsWithoutHTML & Omit<HTMLInputAttributes, 'value'>;

package/dist/components/ui-extra/tags-input/types.js

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

package/dist/components/ui-extra/terminal/index.d.ts

@@ -0,0 +1,6 @@
+import Loop from './terminal-loop.svelte';
+import Root from './terminal.svelte';
+import TypingAnimation from './terminal-typing-animation.svelte';
+import AnimatedSpan from './terminal-animated-span.svelte';
+import Loading from './terminal-loading.svelte';
+export { Loop, Root, TypingAnimation, AnimatedSpan, Loading };

package/dist/components/ui-extra/terminal/index.js

@@ -0,0 +1,6 @@
+import Loop from './terminal-loop.svelte';
+import Root from './terminal.svelte';
+import TypingAnimation from './terminal-typing-animation.svelte';
+import AnimatedSpan from './terminal-animated-span.svelte';
+import Loading from './terminal-loading.svelte';
+export { Loop, Root, TypingAnimation, AnimatedSpan, Loading };

package/dist/components/ui-extra/terminal/terminal-animated-span.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { cn } from '../../../blocks/utils.js';
+  import { onDestroy } from 'svelte';
+  import { useAnimation } from './terminal.svelte.js';
+  import type { TerminalAnimationProps } from './types';
+  import { fly } from 'svelte/transition';
+  import { box } from 'svelte-toolbelt';
+
+  let {
+    children,
+    delay = 0,
+    class: className
+  }: TerminalAnimationProps = $props();
+
+  let playAnimation = $state(false);
+  let animationSpeed = $state(1);
+  let completeTimeout = $state<ReturnType<typeof setTimeout>>();
+
+  const play = (speed: number) => {
+    playAnimation = true;
+    animationSpeed = speed;
+
+    completeTimeout = setTimeout(() => animation.onComplete?.(), duration);
+  };
+
+  const duration = $derived(300 / animationSpeed);
+
+  const animation = useAnimation({ delay: box.with(() => delay), play });
+
+  onDestroy(() => {
+    animation.dispose();
+    clearTimeout(completeTimeout);
+  });
+</script>
+
+{#if playAnimation}
+  <span class={cn('block', className)} in:fly={{ y: -5, duration }}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/components/ui-extra/terminal/terminal-animated-span.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TerminalAnimationProps } from './types';
+declare const TerminalAnimatedSpan: import("svelte").Component<TerminalAnimationProps, {}, "">;
+type TerminalAnimatedSpan = ReturnType<typeof TerminalAnimatedSpan>;
+export default TerminalAnimatedSpan;

package/dist/components/ui-extra/terminal/terminal-loading.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { cn } from '../../../blocks/utils.js';
+  import { onDestroy } from 'svelte';
+  import { useAnimation } from './terminal.svelte.js';
+  import { fly } from 'svelte/transition';
+  import type { TerminalLoadingProps } from './types';
+  import { box } from 'svelte-toolbelt';
+
+  const frames = ['◒', '◐', '◓', '◑'];
+
+  let {
+    delay = 0,
+    loadingMessage,
+    completeMessage,
+    duration = 1000,
+    class: className
+  }: TerminalLoadingProps = $props();
+
+  let playAnimation = $state(false);
+  let animationSpeed = $state(1);
+  let frameIndex = $state(0);
+  let complete = $state(false);
+  let interval = $state<ReturnType<typeof setInterval>>();
+  let timeout = $state<ReturnType<typeof setTimeout>>();
+
+  const play = (speed: number) => {
+    playAnimation = true;
+    animationSpeed = speed;
+
+    interval = setInterval(nextFrame, 75 / animationSpeed);
+    timeout = setTimeout(() => {
+      complete = true;
+      animation.onComplete?.();
+    }, duration / animationSpeed);
+  };
+
+  const nextFrame = () => {
+    if (frameIndex >= frames.length - 1) {
+      frameIndex = 0;
+      return;
+    }
+
+    frameIndex++;
+  };
+
+  const flyDuration = $derived(300 / animationSpeed);
+
+  const animation = useAnimation({ delay: box.with(() => delay), play });
+
+  onDestroy(() => {
+    animation.dispose();
+    clearInterval(interval);
+    clearTimeout(timeout);
+  });
+</script>
+
+{#if playAnimation && !complete}
+  <span
+    class={cn('block', className)}
+    in:fly={{ y: -5, duration: flyDuration }}
+  >
+    <span class="text-cyan-400">{frames[frameIndex]}</span>
+    {@render loadingMessage()}
+  </span>
+{:else if playAnimation}
+  <span
+    class={cn('block', className)}
+    data-completed
+    in:fly={{ y: -5, duration: flyDuration }}
+  >
+    {@render completeMessage()}
+  </span>
+{/if}

package/dist/components/ui-extra/terminal/terminal-loading.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TerminalLoadingProps } from './types';
+declare const TerminalLoading: import("svelte").Component<TerminalLoadingProps, {}, "">;
+type TerminalLoading = ReturnType<typeof TerminalLoading>;
+export default TerminalLoading;

package/dist/components/ui-extra/terminal/terminal-loop.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import { useTerminalLoop } from './terminal.svelte.js';
+  import type { TerminalLoopProps } from './types';
+
+  let { delay = 500, children }: TerminalLoopProps = $props();
+
+  let loopIndex = $state(0);
+  let loopDelayTimeout = $state<ReturnType<typeof setTimeout>>();
+
+  const onComplete = () => {
+    loopDelayTimeout = setTimeout(() => loopIndex++, delay);
+  };
+
+  useTerminalLoop({ onComplete });
+
+  onDestroy(() => clearTimeout(loopDelayTimeout));
+</script>
+
+{#key loopIndex}
+  {@render children?.()}
+{/key}

package/dist/components/ui-extra/terminal/terminal-loop.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TerminalLoopProps } from './types';
+declare const TerminalLoop: import("svelte").Component<TerminalLoopProps, {}, "">;
+type TerminalLoop = ReturnType<typeof TerminalLoop>;
+export default TerminalLoop;

package/dist/components/ui-extra/terminal/terminal-typing-animation.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { cn } from '../../../blocks/utils.js';
+  import { onDestroy } from 'svelte';
+  import { useAnimation } from './terminal.svelte.js';
+  import type { TerminalAnimationProps } from './types';
+  import { typewriter } from '../../../blocks/typewriter.svelte';
+  import { box } from 'svelte-toolbelt';
+
+  let {
+    children,
+    delay = 0,
+    class: className
+  }: TerminalAnimationProps = $props();
+
+  let playAnimation = $state(false);
+  let animationSpeed = $state(1);
+
+  const play = (speed: number) => {
+    playAnimation = true;
+    animationSpeed = speed;
+  };
+
+  const animation = useAnimation({ delay: box.with(() => delay), play });
+
+  onDestroy(() => animation.dispose());
+</script>
+
+{#if playAnimation}
+  <span
+    class={cn('block', className)}
+    transition:typewriter={{
+      speed: animationSpeed * 2,
+      onComplete: () => animation.onComplete?.()
+    }}
+  >
+    {@render children?.()}
+  </span>
+{/if}

package/dist/components/ui-extra/terminal/terminal-typing-animation.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TerminalAnimationProps } from './types';
+declare const TerminalTypingAnimation: import("svelte").Component<TerminalAnimationProps, {}, "">;
+type TerminalTypingAnimation = ReturnType<typeof TerminalTypingAnimation>;
+export default TerminalTypingAnimation;