@profidev/pleiades 1.7.0

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

@@ -0,0 +1,34 @@
+export type HeadingKind = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type Heading = {
+    index: number;
+    ref: Element;
+    kind: HeadingKind;
+    id?: string;
+    level: number;
+    label: string;
+    active: boolean;
+    children: Heading[];
+};
+export declare const INDEX_ATTRIBUTE = "data-toc-index";
+export declare const TOC_IGNORE_ATTRIBUTE = "data-toc-ignore";
+/** A hook for generating a table of contents using the page content.
+ *
+ * ## Usage
+ * ```svelte
+ * <script lang="ts">
+ * 		const toc = new UseToc();
+ * </script>
+ *
+ * <div bind:this={toc.ref} style="display: contents;">
+ * 		<h1>Table of Contents</h1>
+ * 		<h2>Usage</h2>
+ * </div>
+ * ```
+ */
+export declare class UseToc {
+    #private;
+    set ref(ref: HTMLElement | undefined);
+    get ref(): HTMLElement | undefined;
+    /** The generated table of contents */
+    get current(): Heading[];
+}

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

@@ -0,0 +1,130 @@
+import { SvelteMap } from 'svelte/reactivity';
+export const INDEX_ATTRIBUTE = 'data-toc-index';
+export const TOC_IGNORE_ATTRIBUTE = 'data-toc-ignore';
+/** A hook for generating a table of contents using the page content.
+ *
+ * ## Usage
+ * ```svelte
+ * <script lang="ts">
+ * 		const toc = new UseToc();
+ * </script>
+ *
+ * <div bind:this={toc.ref} style="display: contents;">
+ * 		<h1>Table of Contents</h1>
+ * 		<h2>Usage</h2>
+ * </div>
+ * ```
+ */
+export class UseToc {
+    #ref = $state();
+    #toc = $state([]);
+    // This sets everything up once #ref is bound
+    set ref(ref) {
+        this.#ref = ref;
+        if (!this.#ref)
+            return;
+        this.#toc = getToc(this.#ref);
+        // should detect if a heading is added / removed / updated
+        const mutationObserver = new MutationObserver(() => {
+            if (!this.#ref)
+                return;
+            this.#toc = getToc(this.#ref);
+        });
+        mutationObserver.observe(this.#ref, { childList: true, subtree: true });
+        const resetActiveHeading = (headings) => {
+            for (let i = 0; i < headings.length; i++) {
+                headings[i].active = false;
+                resetActiveHeading(headings[i].children);
+            }
+        };
+        const setHeadingActive = (headings, index) => {
+            for (let i = 0; i < headings.length; i++) {
+                if (index === headings[i].index) {
+                    headings[i].active = true;
+                    break;
+                }
+                setHeadingActive(headings[i].children, index);
+            }
+        };
+        // reactive to the table of contents
+        $effect(() => {
+            const sectionVisibility = new SvelteMap();
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach((entry) => sectionVisibility.set(entry.target, entry.intersectionRatio));
+                // headings that are (partly) visible
+                const visible = [...sectionVisibility.entries()]
+                    .filter(([, ratio]) => ratio > 0)
+                    // sort by distance from viewport top
+                    .sort(([a], [b]) => a.getBoundingClientRect().top - b.getBoundingClientRect().top);
+                if (visible.length === 0)
+                    return;
+                // the heading nearest to the top wins
+                const activeEl = visible[0][0];
+                const idx = +activeEl.getAttribute(INDEX_ATTRIBUTE);
+                resetActiveHeading(this.#toc);
+                setHeadingActive(this.#toc, idx);
+            });
+            const observe = (heading) => {
+                observer.observe(heading.ref);
+                heading.children.forEach(observe);
+            };
+            this.#toc.forEach(observe);
+            return () => observer.disconnect();
+        });
+    }
+    get ref() {
+        return this.#ref;
+    }
+    /** The generated table of contents */
+    get current() {
+        return this.#toc;
+    }
+}
+function createHeading(element, index) {
+    const kind = element.tagName.toLowerCase();
+    element.setAttribute(INDEX_ATTRIBUTE, index.toString());
+    return {
+        index,
+        ref: element,
+        kind,
+        id: element.id,
+        level: parseInt(kind[1]),
+        label: element.innerText ?? '',
+        active: false,
+        children: []
+    };
+}
+/** Gets all of the headings contained in the provided element and create a table of contents.
+ *
+ * @param el
+ * @returns
+ */
+function getToc(el) {
+    const headings = Array.from(el.querySelectorAll('h1, h2, h3, h4, h5, h6'))
+        .map((h, i) => createHeading(h, i))
+        .filter((h) => h.ref.closest(`[${TOC_IGNORE_ATTRIBUTE}]`) === null);
+    if (headings.length === 0)
+        return [];
+    const toc = [];
+    let i = 0;
+    while (i < headings.length) {
+        const heading = headings[i];
+        const nextIndex = addChildren(headings, heading, i + 1);
+        toc.push(heading);
+        i = nextIndex;
+    }
+    return toc;
+}
+function addChildren(headings, base, index) {
+    let i = index;
+    while (i < headings.length) {
+        const sub = headings[i];
+        // example: h1 < h2 or h1 = h1
+        if (sub.level <= base.level)
+            break;
+        const nextIndex = addChildren(headings, sub, i + 1);
+        base.children.push(sub);
+        i = nextIndex;
+    }
+    return i;
+}

package/dist/blocks/utils.d.ts

@@ -0,0 +1,12 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+export type WithoutChild<T> = T extends {
+    child?: any;
+} ? Omit<T, 'child'> : T;
+export type WithoutChildren<T> = T extends {
+    children?: any;
+} ? Omit<T, 'children'> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
+    ref?: U | null;
+};

package/dist/blocks/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/components/form/base-form.svelte

@@ -0,0 +1,135 @@
+<script lang="ts" generics="V extends ZodValidationSchema">
+  import type { Snippet } from 'svelte';
+  import { get } from 'svelte/store';
+  import {
+    defaults,
+    setError,
+    superForm,
+    type SuperForm
+  } from 'sveltekit-superforms';
+  import {
+    zod4,
+    type ValidationAdapter,
+    type ZodValidationSchema
+  } from 'sveltekit-superforms/adapters';
+  import { FormButton } from '../ui/form/index.js';
+  import LoaderCircle from '@lucide/svelte/icons/loader-circle';
+  import type { ButtonVariant } from '../ui/button/index.js';
+  import { cn } from '../../utils.js';
+  import type { Error, FormEnctype, FormValue } from './types.js';
+
+  interface Props {
+    schema: V;
+    initialValue?: Partial<FormValue<V>>;
+    onsubmit: (
+      form: FormValue<V>
+    ) => Error | undefined | void | Promise<Error | undefined | void>;
+    children?: Snippet<
+      [{ props: { formData: SuperForm<FormValue<V>>; disabled: boolean } }]
+    >;
+    footer?: Snippet<
+      [
+        {
+          defaultBtn: Snippet<
+            [{ className?: string; variant?: ButtonVariant; content: string }?]
+          >;
+          isLoading: boolean;
+        }
+      ]
+    >;
+    isLoading?: boolean;
+    error?: string;
+    class?: string;
+    enctype?: FormEnctype;
+  }
+
+  let {
+    schema,
+    initialValue,
+    onsubmit,
+    children,
+    footer = defaultFooter,
+    isLoading = $bindable(false),
+    error = $bindable(''),
+    class: className,
+    enctype
+  }: Props = $props();
+
+  let form = superForm(
+    defaults(
+      initialValue,
+      zod4(schema) as ValidationAdapter<FormValue<V>, FormValue<V>>
+    ),
+    {
+      validators: zod4(schema),
+      SPA: true,
+      onUpdate: async ({ form, cancel }) => {
+        if (!form.valid) return;
+
+        error = '';
+        isLoading = true;
+
+        let ret = await onsubmit(form.data);
+
+        isLoading = false;
+        if (ret) {
+          if (ret.field) {
+            setError(form, ret.field as '', ret.error, undefined);
+          } else {
+            if (ret.error !== '') error = ret.error;
+            cancel();
+          }
+        }
+      }
+    }
+  );
+
+  let { enhance } = form;
+
+  export const setValue = (value: FormValue<V>) => {
+    let old = get(form.form);
+
+    //@ts-ignore
+    let newValue: FormValue<V> = {};
+    for (const key in old) {
+      newValue[key] = value[key] ?? old[key];
+    }
+
+    form.form.set(newValue);
+  };
+
+  export const getValue = () => {
+    return get(form.form);
+  };
+</script>
+
+<form method="POST" class={cn('grid gap-3', className)} use:enhance {enctype}>
+  {@render children?.({ props: { formData: form, disabled: isLoading } })}
+  {#if error}
+    <span class="text-destructive truncate text-sm">{error}</span>
+  {/if}
+  {@render footer({ defaultBtn: formButton, isLoading })}
+</form>
+
+{#snippet defaultFooter({ defaultBtn }: { defaultBtn: Snippet })}
+  {@render defaultBtn()}
+{/snippet}
+
+{#snippet formButton(
+  props:
+    | { className?: string; variant?: ButtonVariant; content: string }
+    | undefined
+)}
+  {@const prop = { ...props }}
+  <FormButton
+    class={cn('cursor-pointer', prop.className)}
+    type="submit"
+    disabled={isLoading}
+    variant={prop.variant}
+  >
+    {#if isLoading}
+      <LoaderCircle class="mr-2 h-4 w-4 animate-spin" />
+    {/if}
+    {prop.content}
+  </FormButton>
+{/snippet}

package/dist/components/form/base-form.svelte.d.ts

@@ -0,0 +1,57 @@
+import type { Snippet } from 'svelte';
+import { type SuperForm } from 'sveltekit-superforms';
+import { type ZodValidationSchema } from 'sveltekit-superforms/adapters';
+import type { ButtonVariant } from '../ui/button/index.js';
+import type { Error, FormEnctype, FormValue } from './types.js';
+declare function $$render<V extends ZodValidationSchema>(): {
+    props: {
+        schema: V;
+        initialValue?: Partial<FormValue<V>>;
+        onsubmit: (form: FormValue<V>) => Error | undefined | void | Promise<Error | undefined | void>;
+        children?: Snippet<[{
+            props: {
+                formData: SuperForm<FormValue<V>>;
+                disabled: boolean;
+            };
+        }]>;
+        footer?: Snippet<[{
+            defaultBtn: Snippet<[{
+                className?: string;
+                variant?: ButtonVariant;
+                content: string;
+            }?]>;
+            isLoading: boolean;
+        }]>;
+        isLoading?: boolean;
+        error?: string;
+        class?: string;
+        enctype?: FormEnctype;
+    };
+    exports: {
+        setValue: (value: FormValue<V>) => void;
+        getValue: () => FormValue<V>;
+    };
+    bindings: "error" | "isLoading";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<V extends ZodValidationSchema> {
+    props(): ReturnType<typeof $$render<V>>['props'];
+    events(): ReturnType<typeof $$render<V>>['events'];
+    slots(): ReturnType<typeof $$render<V>>['slots'];
+    bindings(): "error" | "isLoading";
+    exports(): {
+        setValue: (value: import("zod/v4").infer<V>) => void;
+        getValue: () => import("zod/v4").infer<V>;
+    };
+}
+interface $$IsomorphicComponent {
+    new <V extends ZodValidationSchema>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V>['props']>, ReturnType<__sveltets_Render<V>['events']>, ReturnType<__sveltets_Render<V>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<V>['bindings']>;
+    } & ReturnType<__sveltets_Render<V>['exports']>;
+    <V extends ZodValidationSchema>(internal: unknown, props: ReturnType<__sveltets_Render<V>['props']> & {}): ReturnType<__sveltets_Render<V>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const BaseForm: $$IsomorphicComponent;
+type BaseForm<V extends ZodValidationSchema> = InstanceType<typeof BaseForm<V>>;
+export default BaseForm;

package/dist/components/form/form-checkbox.svelte

@@ -0,0 +1,59 @@
+<script lang="ts" generics="S extends FormRecord = FormRecord">
+  import { Checkbox } from '../ui/checkbox';
+  import * as Form from '../ui/form';
+  import type {
+    FormPath,
+    SuperForm,
+    FormRecord
+  } from './types';
+  import type { WithoutChildrenOrChild } from '../../utils';
+  import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+
+  interface Props {
+    formData: SuperForm<S>;
+    key: FormPath<S>;
+    label: string;
+    disabled?: boolean;
+    switchOrder?: boolean;
+  }
+
+  let {
+    formData: form,
+    key,
+    label,
+    disabled,
+    switchOrder,
+    ...restProps
+  }: Props & WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
+
+  let formData: any = $derived(form.form);
+</script>
+
+<Form.Field {form} name={key} class="mt-2 flex w-full flex-col">
+  <Form.Control>
+    {#snippet children({ props })}
+      {#if switchOrder}
+        <div class="flex">
+          <Checkbox
+            {...props}
+            {...restProps}
+            bind:checked={$formData[key]}
+            class="mr-2"
+          />
+          <Form.Label>{label}</Form.Label>
+        </div>
+      {:else}
+        <div class="flex">
+          <Form.Label>{label}</Form.Label>
+          <Checkbox
+            {...props}
+            {...restProps}
+            bind:checked={$formData[key]}
+            class="ml-auto"
+          />
+        </div>
+      {/if}
+    {/snippet}
+  </Form.Control>
+  <Form.FieldErrors />
+</Form.Field>

package/dist/components/form/form-checkbox.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { FormPath, SuperForm, FormRecord } from './types';
+import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+declare function $$render<S extends FormRecord = FormRecord>(): {
+    props: {
+        formData: SuperForm<S>;
+        key: FormPath<S>;
+        label: string;
+        disabled?: boolean;
+        switchOrder?: boolean;
+    } & Omit<Omit<CheckboxPrimitive.RootProps, "child">, "children">;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<S extends FormRecord = FormRecord> {
+    props(): ReturnType<typeof $$render<S>>['props'];
+    events(): ReturnType<typeof $$render<S>>['events'];
+    slots(): ReturnType<typeof $$render<S>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <S extends FormRecord = FormRecord>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<S>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<S>['props']>, ReturnType<__sveltets_Render<S>['events']>, ReturnType<__sveltets_Render<S>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<S>['bindings']>;
+    } & ReturnType<__sveltets_Render<S>['exports']>;
+    <S extends FormRecord = FormRecord>(internal: unknown, props: ReturnType<__sveltets_Render<S>['props']> & {}): ReturnType<__sveltets_Render<S>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const FormCheckbox: $$IsomorphicComponent;
+type FormCheckbox<S extends FormRecord = FormRecord> = InstanceType<typeof FormCheckbox<S>>;
+export default FormCheckbox;

package/dist/components/form/form-date-input.svelte

@@ -0,0 +1,102 @@
+<script lang="ts" generics="S extends FormRecord = FormRecord">
+  import * as Calendar from '../ui/calendar';
+  import * as Popover from '../ui/popover';
+  import * as Form from '../ui/form';
+  import { Button } from '../ui/button';
+  import CalendarIcon from '@lucide/svelte/icons/calendar';
+  import {
+    CalendarDate,
+    fromDate,
+    getLocalTimeZone,
+    toCalendarDate,
+    type DateValue
+  } from '@internationalized/date';
+  import type {
+    FormPath,
+    FormRecord,
+    SuperForm
+  } from './types';
+  import { get } from 'svelte/store';
+
+  interface Props {
+    formData: SuperForm<S>;
+    key: FormPath<S>;
+    label: string;
+    disabled?: boolean;
+    placeholder?: string;
+    minValue?: DateValue;
+    maxValue?: DateValue;
+  }
+
+  let {
+    formData: form,
+    key,
+    label,
+    disabled,
+    placeholder,
+    maxValue,
+    minValue
+  }: Props = $props();
+
+  let open = $state(false);
+  let formData = $derived(form.form);
+  let date = $derived(
+    toCalendarDate(fromDate($formData[key] as Date, getLocalTimeZone()))
+  );
+</script>
+
+<Form.Field {form} name={key} class="mt-2 flex w-full flex-col">
+  <Form.Control>
+    {#snippet children({ props })}
+      <Form.Label>{label}</Form.Label>
+      <Popover.Root bind:open>
+        <Popover.Trigger {...props} {disabled}>
+          {#snippet child({ props })}
+            <Button
+              {...props}
+              variant="outline"
+              class="cursor-pointer justify-between font-normal"
+            >
+              {date
+                ? date
+                    .toDate(getLocalTimeZone())
+                    .toLocaleString(
+                      navigator.languages || [navigator.language],
+                      {
+                        year: 'numeric',
+                        month: '2-digit',
+                        day: '2-digit'
+                      }
+                    )
+                : placeholder || 'Select date'}
+              <CalendarIcon />
+            </Button>
+          {/snippet}
+        </Popover.Trigger>
+        <Popover.Content class="w-auto overflow-hidden p-0" align="start">
+          {/* @ts-ignore */ null}
+          <Calendar.Calendar
+            type="single"
+            bind:value={date}
+            captionLayout="dropdown"
+            weekStartsOn={new Intl.Locale(navigator.language).getWeekInfo()
+              .firstDay}
+            onValueChange={(val) => {
+              formData.set({
+                ...get(formData),
+                [key]:
+                  val instanceof CalendarDate
+                    ? val.toDate(getLocalTimeZone())
+                    : null
+              });
+              open = false;
+            }}
+            {minValue}
+            {maxValue}
+          />
+        </Popover.Content>
+      </Popover.Root>
+    {/snippet}
+  </Form.Control>
+  <Form.FieldErrors />
+</Form.Field>

package/dist/components/form/form-date-input.svelte.d.ts

@@ -0,0 +1,34 @@
+import { type DateValue } from '@internationalized/date';
+import type { FormPath, FormRecord, SuperForm } from './types';
+declare function $$render<S extends FormRecord = FormRecord>(): {
+    props: {
+        formData: SuperForm<S>;
+        key: FormPath<S>;
+        label: string;
+        disabled?: boolean;
+        placeholder?: string;
+        minValue?: DateValue;
+        maxValue?: DateValue;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<S extends FormRecord = FormRecord> {
+    props(): ReturnType<typeof $$render<S>>['props'];
+    events(): ReturnType<typeof $$render<S>>['events'];
+    slots(): ReturnType<typeof $$render<S>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <S extends FormRecord = FormRecord>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<S>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<S>['props']>, ReturnType<__sveltets_Render<S>['events']>, ReturnType<__sveltets_Render<S>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<S>['bindings']>;
+    } & ReturnType<__sveltets_Render<S>['exports']>;
+    <S extends FormRecord = FormRecord>(internal: unknown, props: ReturnType<__sveltets_Render<S>['props']> & {}): ReturnType<__sveltets_Render<S>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const FormDateInput: $$IsomorphicComponent;
+type FormDateInput<S extends FormRecord = FormRecord> = InstanceType<typeof FormDateInput<S>>;
+export default FormDateInput;