lutra 0.0.6 → 0.0.7

package/dist/datatable/DataTable.svelte

@@ -1,16 +1,10 @@
 <script>import UiContent from "../layout/UIContent.svelte";
 import { setContext } from "svelte";
 let {
+  columns,
   contained,
   children
 } = $props();
-let columns = $state(0);
-setContext("DataTableColumns", {
-  addColumn: () => {
-    console.log("addColumn");
-    columns++;
-  }
-});
 </script>
 
 <UiContent>
@@ -31,6 +25,6 @@ setContext("DataTableColumns", {
     section.contained {
         border: var(--border);
         border-radius: var(--border-radius);
-        overflow: clip;
+        overflow-x: auto;
     }
 </style>

package/dist/datatable/DataTable.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 import { type Snippet } from "svelte";
 declare const __propDef: {
     props: {
+        columns: number;
         /** The number of columns to display the data in. */
         contained?: boolean | undefined;
         children: Snippet;

package/dist/datatable/DataTableRow.svelte

@@ -1,6 +1,7 @@
 <script>import { setContext } from "svelte";
 let {
   children,
+  actions,
   header = false
 } = $props();
 setContext("DataTableRow", { header });
@@ -8,6 +9,11 @@ setContext("DataTableRow", { header });
 
 <svelte:element this={header ? "header" : "section"} class="DataTableRow" class:header>
     {@render children()}
+    {#if actions}
+        <div class="Actions">
+            {@render actions()}
+        </div>
+    {/if}
 </svelte:element>
 
 <style>
@@ -17,7 +23,19 @@ setContext("DataTableRow", { header });
         grid-template-columns: subgrid;
         gap: 1.5em;
         align-items: center;
+        width: 100%;
+        overflow: none;
         padding: 0.75em calc(1.5em * var(--dtc));
+        position: relative;
+    }
+    .DataTableRow:hover {
+        background: color-mix(in srgb, var(--bg-subtle) calc(var(--dtc) * 100%), transparent);
+    }
+    .DataTableRow:has(.Actions) {
+        padding-right: 0;
+    }
+    .DataTableRow :global(*) {
+        white-space: nowrap;
     }
     .DataTableRow.header {
         background: color-mix(in srgb, var(--bg-subtle) calc(var(--dtc) * 100%), transparent);
@@ -25,4 +43,18 @@ setContext("DataTableRow", { header });
     section:not(:first-child) {
         border-top: var(--border);
     }
+    .Actions {
+        display: flex;
+        gap: 0.75em;
+        justify-self: end;
+        position: sticky;
+        top: 0;
+        right: 0;
+        padding-left: 0.75em;
+        padding-right: calc(1em * var(--dtc));
+        background: var(--bg-app);
+    }
+    .DataTableRow:hover .Actions {
+        background: color-mix(in srgb, var(--bg-subtle) calc(var(--dtc) * 100%), transparent);
+    }
 </style>

package/dist/datatable/DataTableRow.svelte.d.ts

@@ -3,6 +3,9 @@ import { type Snippet } from "svelte";
 declare const __propDef: {
     props: {
         header?: boolean | undefined;
+        actions?: ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
         children: Snippet;
     };
     events: {

package/dist/form/FieldError.svelte

@@ -0,0 +1,14 @@
+<script>let {
+  code,
+  message
+} = $props();
+</script>
+
+<p class="Error">{message ? message : code}</p>
+
+<style>
+    .Error {
+        color: var(--text-warn);
+        font-size: max(0.85em, 11px);
+    }
+</style>

package/dist/form/FieldError.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        code: string;
+        message?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FieldErrorProps = typeof __propDef.props;
+export type FieldErrorEvents = typeof __propDef.events;
+export type FieldErrorSlots = typeof __propDef.slots;
+export default class FieldError extends SvelteComponent<FieldErrorProps, FieldErrorEvents, FieldErrorSlots> {
+}
+export {};

package/dist/form/Form.svelte

@@ -1,14 +1,85 @@
-<script>import { enhance as enhanceAction } from "$app/forms";
+<script>import { enhance } from "$app/forms";
 import UiContent from "../layout/UIContent.svelte";
+import { Bodyguard } from "@auth70/bodyguard";
 import { onMount, setContext } from "svelte";
+import { get } from "svelte/store";
+import { dezerialize } from "@auth70/zodex-esm";
+import { array } from "zod";
+import { arrayPathToStringPath, getIndividualValidators, parseFormIssues } from "./form.js";
 let {
+  form,
+  action,
+  enctype = "multipart/form-data",
+  method = "POST",
   fullWidth = false,
   children
 } = $props();
+setContext("form", form);
+setContext("form.validators", getIndividualValidators(form));
+const schema = dezerialize(form.schema);
+const bodyguard = new Bodyguard();
+let formEl;
+function setFormIssuesAndFields(issues, fields) {
+  form.issues = issues;
+  form.fields = fields;
+}
+async function validate() {
+  form.tainted = true;
+  const req = new Request("localhost", {
+    method: "POST",
+    body: new FormData(formEl)
+  });
+  const result = await bodyguard.softForm(req, schema.parse);
+  if (result.success === true) {
+    form.valid = true;
+    form.issues = [];
+  } else {
+    form.valid = false;
+    form.issues = parseFormIssues(result.error.issues);
+  }
+}
+onMount(() => {
+  validate();
+});
 </script>
 
 <UiContent>
-    <form>
+    <form
+        {method}
+        {action}
+        {enctype}
+        bind:this={formEl}
+        onchange={validate}
+        use:enhance={({ formElement, formData, action, cancel, submitter }) => {
+            // `formElement` is this `<form>` element
+            // `formData` is its `FormData` object that's about to be submitted
+            // `action` is the URL to which the form is posted
+            // calling `cancel()` will prevent the submission
+            // `submitter` is the `HTMLElement` that caused the form to be submitted
+
+            return async ({ result, update }) => {
+                // `result` is an `ActionResult` object
+                // `update` is a function which triggers the default logic that would be triggered if this callback wasn't set
+                console.log('result', result);
+                const resultForm = (result as any).data.form;
+                if(result.type === "success") {
+                    if(resultForm) {
+                        form.valid = resultForm.valid;
+                    }
+                } else if(result.type === "error") {
+                    if(resultForm) {
+                        setFormIssuesAndFields(resultForm.issues, resultForm.fields);
+                    }
+                } else if(result.type === "failure") {
+                    if(resultForm) {
+                        setFormIssuesAndFields(resultForm.issues, resultForm.fields);
+                    }
+                } else if(result.type === "redirect") {
+                    window.location.href = result.location;
+                }
+            };
+        }}
+    >
         {@render children()}
     </form>
 </UiContent>

package/dist/form/Form.svelte.d.ts

@@ -1,7 +1,12 @@
 import { SvelteComponent } from "svelte";
 import type { Snippet } from "svelte";
+import type { Form } from "./types.js";
 declare const __propDef: {
     props: {
+        form: Form<any>;
+        action?: string | undefined;
+        enctype?: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain" | undefined;
+        method?: "GET" | "POST" | undefined;
         fullWidth?: boolean | undefined;
         children: Snippet;
     };

package/dist/form/Input.svelte

@@ -1,4 +1,5 @@
-<script>import Label from "./Label.svelte";
+<script>import { getContext, unstate } from "svelte";
+import Label from "./Label.svelte";
 import { createId } from "../utils/id.js";
 import Copy from "../icons/Copy.svelte";
 import Done from "../icons/Done.svelte";
@@ -6,7 +7,10 @@ import Show from "../icons/Show.svelte";
 import Hide from "../icons/Hide.svelte";
 import Tooltip from "../display/Tooltip.svelte";
 import IconButton from "../display/IconButton.svelte";
-import Icon from "../display/Icon.svelte";
+import { fieldChange, fieldKeydown, ignoreKeys } from "./client.svelte.js";
+import FieldError from "./FieldError.svelte";
+import { getFromObjWithStringPath } from "./form.js";
+import { ZodType } from "zod";
 let {
   alt,
   autocapitalize,
@@ -37,6 +41,13 @@ let {
   pattern,
   placeholder,
   suffix,
+  onblur,
+  onchange,
+  onclick,
+  onfocus,
+  onkeydown,
+  onkeyup,
+  onkeypress,
   prefix,
   readonly,
   required,
@@ -46,8 +57,8 @@ let {
   step,
   tabindex,
   title,
-  type = "text",
-  value = $bindable(""),
+  type,
+  value = $bindable(),
   viewable,
   webkitdirectory
 } = $props();
@@ -57,6 +68,12 @@ let viewTitle = $state("Show");
 let copyTooltipOpen = $state(false);
 let copyBtnIcon = $state(Copy);
 let viewBtnIcon = $state(Show);
+const form = getContext("form");
+const field = $derived(form.fields[name]);
+const issue = $derived(form?.issues?.find((issue2) => issue2.name === name));
+const validator = getContext("form.validators")?.[name];
+const data = form?.data;
+const originalData = form?.originalData;
 function view(e) {
   e.preventDefault();
   if (!el)
@@ -111,28 +128,37 @@ function copy(e) {
     {indeterminate}
     {inputmode}
     {list}
-    {maxlength}
-    {minlength}
-    {max}
-    {min}
+    maxlength={maxlength ? maxlength : field?.maxlength}
+    minlength={minlength ? minlength : field?.minlength}
+    max={max ? max : field?.max}
+    min={min ? min : field?.min}
     {multiple}
     {name}
-    {pattern}
+    {onblur}
+    {onclick}
+    onchange={fieldChange(form, name, () => el, validator)}
+    {onfocus}
+    onkeydown={fieldKeydown(form, name, () => el, validator)}
+    {onkeyup}
+    {onkeypress}
+    pattern={pattern ? pattern : field?.pattern}
     {placeholder}
     {readonly}
-    {required}
+    required={required || field?.required}
     {results}
     {src}
     {step}
     {tabindex}
     {title}
     {type}
-    {value}
+    value={value || getFromObjWithStringPath(Object.assign(originalData, data), name) || form?.fields?.[name]?.defaultValue || ''}
     {webkitdirectory}
 />
 {/snippet}
-
-<div class="FieldContainer {type}" class:checkOrRadio={type === "checkbox" || type === "radio"}>
+<div
+    class="FieldContainer {type}"
+    class:checkOrRadio={type === "checkbox" || type === "radio"}
+>
 
     <Label {id} {label} tip={labelTip} />
 
@@ -144,6 +170,7 @@ function copy(e) {
             class="Field {type}"
             class:hasPrefix={!!prefix}
             class:hasSuffix={!!suffix}
+            class:invalid={field?.tainted && issue?.code}
         >
             {#if prefix}
                 <div class="Fix Prefix">
@@ -179,6 +206,9 @@ function copy(e) {
                 </div>
             {/if}
         </div>
+        {#if field?.tainted && issue?.code}
+            <FieldError code={issue.code} message={issue.message} />
+        {/if}
     {/if}
 </div>
 
@@ -191,11 +221,15 @@ function copy(e) {
     }
     .Field {
         background-color: var(--field-bg);
-        border: var(--border-size) var(--border-style) var(--border-color);
+        border: var(--field-border-size) var(--field-border-style) var(--field-border-color);
         border-radius: var(--field-radius);
         display: flex;
         padding-inline: 0.15em;
     }
+    .Field:has(input:user-invalid),
+    .Field.invalid {
+        border-color: var(--field-border-color-error);
+    }
     .Field > *:not(input) {
         flex-grow: 0;
         flex-shrink: 0;
@@ -217,6 +251,10 @@ function copy(e) {
     .Field:has(input:focus-visible) {
         outline: var(--focus-outline);
     }
+    .Field:has(input:focus-visible:user-invalid),
+    .Field.invalid:has(input:focus-visible) {
+        outline-color: var(--focus-color-error); 
+    }
     /**
      * Input element
      */

package/dist/form/Input.svelte.d.ts

@@ -25,7 +25,7 @@ declare const __propDef: {
         /** Whether the input should be disabled. */
         disabled?: boolean | undefined;
         /** A hint to the browser for which enter key to display for the input. */
-        enterkeyhint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
+        enterkeyhint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
         /** The height of the input element. Valid for image inputs. */
         height?: number | undefined;
         /** Help text to display below the input. */
@@ -60,7 +60,21 @@ declare const __propDef: {
         /** Whether the input should allow multiple values. Valid for email and file inputs. */
         multiple?: boolean | undefined;
         /** The name of the input element. */
-        name?: string | undefined;
+        name: string;
+        /** The onblur event handler */
+        onblur?: ((e: FocusEvent) => void) | undefined;
+        /** Onchange event handler */
+        onchange?: ((e: Event) => void) | undefined;
+        /** Onclick event handler */
+        onclick?: ((e: MouseEvent) => void) | undefined;
+        /** Onfocus event handler */
+        onfocus?: ((e: FocusEvent) => void) | undefined;
+        /** Keyup event handler */
+        onkeyup?: ((e: KeyboardEvent) => void) | undefined;
+        /** Keydown event handler */
+        onkeydown?: ((e: KeyboardEvent) => void) | undefined;
+        /** Keypress event handler */
+        onkeypress?: ((e: KeyboardEvent) => void) | undefined;
         /** A regular expression that the input's value is checked against. Valid for text, search, url, tel, email, and password. */
         pattern?: string | undefined;
         /** Placeholder text to display when the input is empty. */
@@ -92,7 +106,7 @@ declare const __propDef: {
         /** A string that defines the title of the input element. */
         title?: string | undefined;
         /** The type of input to display. */
-        type?: "number" | "color" | "button" | "search" | "time" | "image" | "text" | "submit" | "email" | "tel" | "url" | "checkbox" | "radio" | "hidden" | "password" | "file" | "range" | "date" | "datetime-local" | "month" | "week" | undefined;
+        type?: "number" | "color" | "button" | "search" | "time" | "image" | "text" | "submit" | "email" | "tel" | "url" | "date" | "checkbox" | "radio" | "hidden" | "password" | "file" | "range" | "datetime-local" | "month" | "week" | undefined;
         /** The value of the input element. */
         value?: string | undefined;
         /** Whether the input should be viewable. Valid for password inputs. */

package/dist/form/client.svelte.d.ts

@@ -0,0 +1,45 @@
+import type { ZodType } from "zod";
+import type { Form } from "./types.js";
+/**
+ * Use a form in a Svelte component.
+ * @param {Form} form - The form to use.
+ * @returns
+ */
+export declare function useForm(form: Form<any>): {
+    form: {
+        originalData: any;
+        data: any;
+    } & Form<any>;
+};
+/**
+ * Validate a single field.
+ * @param {Form} form - The form to validate.
+ * @param {string} name - The name of the field to validate.
+ * @param {HTMLInputElement | HTMLSelectElement} el - The element to validate.
+ * @param {ZodType} validator - The validator to use.
+ */
+export declare function fieldValidate(form: Form<any>, name: string, el?: HTMLInputElement | HTMLSelectElement, validator?: ZodType<any, any>): void;
+/**
+ * Keydown event handler for a field.
+ * @param {KeyboardEvent} e - The event.
+ * @param {Form} form - The form to use.
+ * @param {string} name - The name of the field.
+ * @param {HTMLInputElement | HTMLSelectElement} el - The element to validate.
+ * @param {ZodType} validator - The validator to use.
+ * @param {(e: KeyboardEvent) => void} onkeydown - The onkeydown event handler.
+ */
+export declare function fieldKeydown(form: Form<any>, name: string, el: () => HTMLInputElement | HTMLSelectElement | undefined, validator?: ZodType<any, any>, onkeydown?: (e: KeyboardEvent) => void): (e: KeyboardEvent) => Promise<void>;
+/**
+ * Change event handler for a field.
+ * @param {Event} e - The event.
+ * @param {Form} form - The form to use.
+ * @param {string} name - The name of the field.
+ * @param {HTMLInputElement | HTMLSelectElement} el - The element to validate.
+ * @param {ZodType} validator - The validator to use.
+ * @param {(e: Event) => void} onchange - The onchange event handler.
+ */
+export declare function fieldChange(form: Form<any>, name: string, el: () => HTMLInputElement | HTMLSelectElement | undefined, validator?: ZodType<any, any>, onchange?: (e: Event) => void): (e: Event) => Promise<void>;
+/**
+ * Keys that should be ignored when marking a field as tainted.
+ */
+export declare const ignoreKeys: string[];

package/dist/form/client.svelte.js

@@ -0,0 +1,85 @@
+/**
+ * Use a form in a Svelte component.
+ * @param {Form} form - The form to use.
+ * @returns
+ */
+export function useForm(form) {
+    let _form = Object.assign({
+        originalData: JSON.parse(JSON.stringify(form.data ?? {})),
+        data: form.data ?? {},
+    }, form);
+    // Have to declare a variable separately to use in the return object
+    // as the compiler is looking for a declaration.
+    let __form = $state(_form);
+    return {
+        form: __form,
+    };
+}
+/**
+ * Validate a single field.
+ * @param {Form} form - The form to validate.
+ * @param {string} name - The name of the field to validate.
+ * @param {HTMLInputElement | HTMLSelectElement} el - The element to validate.
+ * @param {ZodType} validator - The validator to use.
+ */
+export function fieldValidate(form, name, el, validator) {
+    if (!validator)
+        return;
+    const result = validator.safeParse(el?.value);
+    if (result.success) {
+        form.issues = (form.issues || []).filter((issue) => issue.name !== name);
+        form.valid = form.issues.length === 0;
+    }
+    else {
+        form.valid = false;
+        form.issues = (form.issues || []).filter((issue) => issue.name !== name);
+        form.issues?.push({
+            name,
+            ...result.error.issues[0],
+        });
+    }
+}
+/**
+ * Keydown event handler for a field.
+ * @param {KeyboardEvent} e - The event.
+ * @param {Form} form - The form to use.
+ * @param {string} name - The name of the field.
+ * @param {HTMLInputElement | HTMLSelectElement} el - The element to validate.
+ * @param {ZodType} validator - The validator to use.
+ * @param {(e: KeyboardEvent) => void} onkeydown - The onkeydown event handler.
+ */
+export function fieldKeydown(form, name, el, validator, onkeydown) {
+    return async function (e) {
+        setTimeout(() => {
+            const possibleKey = e?.key;
+            if (ignoreKeys.includes(possibleKey))
+                return;
+            form.data[name] = el()?.value || '';
+            fieldValidate(form, name, el(), validator);
+        }, 0); // Wait for the key to be updated in the input.
+        if (onkeydown)
+            return onkeydown(e);
+    };
+}
+/**
+ * Change event handler for a field.
+ * @param {Event} e - The event.
+ * @param {Form} form - The form to use.
+ * @param {string} name - The name of the field.
+ * @param {HTMLInputElement | HTMLSelectElement} el - The element to validate.
+ * @param {ZodType} validator - The validator to use.
+ * @param {(e: Event) => void} onchange - The onchange event handler.
+ */
+export function fieldChange(form, name, el, validator, onchange) {
+    return async function (e) {
+        form.data[name] = el()?.value || '';
+        form.fields[name].tainted = true;
+        fieldValidate(form, name, el(), validator);
+        if (onchange)
+            return onchange(e);
+    };
+}
+/**
+ * Keys that should be ignored when marking a field as tainted.
+ */
+export const ignoreKeys = ['Tab', 'Shift', 'Control', 'Alt', 'Meta', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageUp', 'PageDown', 'Escape', 'CapsLock', 'NumLock', 'ScrollLock', 'Pause', 'ContextMenu', 'PrintScreen', 'Help', 'Clear', 'OS', 'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F12'];

package/dist/form/form.d.ts

@@ -1,34 +1,52 @@
-/// <reference types="svelte" />
-import { type Writable } from 'svelte/store';
-export declare const FormItems: Writable<Record<string, FormElement | FormElement[]>>;
-export type FormElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-export type SuccessType = {
-    success: true;
-    value: any;
-};
-export type ErrorType = {
-    success: false;
-    error: string;
-};
-export type FormRegistry = {
-    items: Record<string, FormElement | FormElement[]>;
-    getValues(): Record<string, string>;
-    register(name: string, el: FormElement | FormElement[]): void;
-    updateFormValues(): void;
-    validate(): boolean;
-    validateField(nameOrElement: string): SuccessType | ErrorType;
-    validateField(nameOrElement: FormElement): SuccessType | ErrorType;
-    validateField(nameOrElement: FormElement[]): SuccessType | ErrorType;
-    validateSingleField(nameOrElement: string | FormElement): SuccessType | ErrorType;
-};
-export type BeforeSubmitFn = (opts: {
-    form: HTMLFormElement;
-    data: FormData;
-    cancel: () => void;
-}) => void | Promise<void>;
-export type AddBeforeSubmitFn = (id: string, fn: BeforeSubmitFn) => void;
-export declare const getPropertyPaths: (schema: ZodType) => string[];
+import { Bodyguard, type BodyguardFormConfig, type BodyguardResult, type JSONLike } from "@auth70/bodyguard";
+import type { RequestEvent } from "@sveltejs/kit";
+import type { ZodType, infer as Infer, ZodIssue, ZodIssueBase } from "zod";
+import type { Form, FormField, FormIssue, ZodTypes } from "./types.js";
+export declare const bodyguard: Bodyguard;
 /**
- * Keys that should be ignored when marking a field as changed.
+ * Get fields from a Zod schema.
+ * @param {ZodObject<any>} schema - The schema to get fields from.
+ * @returns {Record<string, any>} - The fields from the schema.
  */
-export declare const ignoreChangeKeys: string[];
+export declare function getFieldsFromSchema(schema: ZodType, data?: BodyguardResult<any>, parents?: string[]): Record<string, FormField>;
+/**
+ * Server page load call. Optionally with a default object to populate the form with from locals.
+ * @param {ZodType} schema - The schema to parse the form with.
+ * @param {RequestEvent} event - The event to load the (possible) form from.
+ * @param {JSONLike} obj - The default object to populate the form with.
+ * @returns {Promise<Form<Z>>} - The form to use.
+ */
+export declare function loadForm<Z extends ZodTypes>(schema: Z, event: RequestEvent, obj?: JSONLike): Promise<Form<Z>>;
+/**
+ * Parse zod issues into form issues (with a path string).
+ * @param {ZodIssue[]} issues - The issues to parse.
+ * @returns {FormIssue[]} - The parsed issues.
+ */
+export declare function parseFormIssues(issues: (ZodIssue & ZodIssueBase)[]): FormIssue[];
+/**
+ * Parse a form using a schema.
+ * @param {ZodType} schema - The schema to parse the form with.
+ * @param {Request} request - The request to parse.
+ * @param {BodyguardFormConfig} opts - The options for the form validation.
+ * @returns {Promise<{ valid: false } | { valid: true, data: Infer<Z> }>} - The result of the form validation.
+ */
+export declare function parseForm<Z extends ZodType>(schema: Z, event: RequestEvent, opts?: BodyguardFormConfig): Promise<Form<Z>>;
+/**
+ * Convert an array path from a Zod issue to a string path for a form field.
+ * @param {(string | number)[]} path - The path to convert.
+ * @returns {string} - The string path.
+ */
+export declare function arrayPathToStringPath(path: (string | number)[]): string;
+/**
+ * Get a value from an object using a string path.
+ * @param {any} obj - The object to get the value from.
+ * @param {string} path - The path to get the value from.
+ * @returns {string | number | Date | boolean | object | undefined} - The value from the object.
+ */
+export declare function getFromObjWithStringPath(obj: any, path: string): string | number | Date | boolean | object | undefined;
+/**
+ * Get individual validators for each field in a form.
+ * @param {Form} form - The form to get the validators from.
+ * @returns {Record<keyof Infer<T>, (value: any) => boolean>} - The validators for each field.
+ */
+export declare function getIndividualValidators<T extends ZodTypes>(form: Form<T>): Record<keyof Infer<T>, (value: any) => boolean>;

package/dist/form/form.js

@@ -1,31 +1,322 @@
-import { writable } from 'svelte/store';
-import { ZodArray, ZodNullable, ZodObject, ZodOptional, union, boolean, literal } from 'zod';
-export const FormItems = writable({});
-export const getPropertyPaths = (schema) => {
-    // check if schema is nullable or optional
-    if (schema instanceof ZodNullable ||
-        schema instanceof ZodOptional) {
-        return getPropertyPaths(schema.unwrap());
-    }
-    // check if schema is an array
+import { Bodyguard } from "@auth70/bodyguard";
+import { ZodArray, ZodNullable, ZodOptional, ZodEffects, ZodObject, ZodDefault, ZodString, ZodNumber, ZodBoolean, ZodDate, array } from "zod";
+import { zerialize, dezerialize } from "@auth70/zodex-esm";
+export const bodyguard = new Bodyguard();
+/**
+ * Map a Zod type to a field type as a string.
+ * @param {Zod.ZodType} schema - The Zod schema to map to a field type.
+ * @returns {string} - The field type as a string.
+ */
+function mapZodTypeToFieldType(schema) {
+    if (schema instanceof ZodNullable) {
+        return mapZodTypeToFieldType(schema.unwrap());
+    }
+    if (schema instanceof ZodOptional) {
+        return mapZodTypeToFieldType(schema.unwrap());
+    }
+    if (schema instanceof ZodEffects) {
+        return mapZodTypeToFieldType(schema._def?.schema ?? schema);
+    }
     if (schema instanceof ZodArray) {
-        return getPropertyPaths(schema.element);
+        return `Array<${mapZodTypeToFieldType(schema.element)}>`;
     }
-    // check if schema is an object
     if (schema instanceof ZodObject) {
-        // loop through key/value pairs
-        const entries = Object.entries(schema.shape);
-        return entries.flatMap(([key, value]) => {
-            // get nested keys
-            const nested = getPropertyPaths(value).map((subKey) => `${key}.${subKey}`);
-            // return nested keys
-            return nested.length ? nested : key;
-        });
-    }
-    // return empty array
-    return [];
-};
-/**
- * Keys that should be ignored when marking a field as changed.
- */
-export const ignoreChangeKeys = ['Tab', 'Shift', 'Control', 'Alt', 'Meta', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageUp', 'PageDown', 'Escape', 'CapsLock', 'NumLock', 'ScrollLock', 'Pause', 'ContextMenu', 'PrintScreen', 'Help', 'Clear', 'OS', 'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F12'];
+        return 'object';
+    }
+    if (schema instanceof ZodDefault) {
+        return mapZodTypeToFieldType(schema._def.innerType);
+    }
+    if (schema instanceof ZodDate) {
+        return 'date';
+    }
+    if (schema instanceof ZodString) {
+        return 'string';
+    }
+    if (schema instanceof ZodNumber) {
+        return 'number';
+    }
+    if (schema instanceof ZodBoolean) {
+        return 'boolean';
+    }
+    return schema.constructor.name;
+}
+/**
+ * Get fields from a Zod schema.
+ * @param {ZodObject<any>} schema - The schema to get fields from.
+ * @returns {Record<string, any>} - The fields from the schema.
+ */
+export function getFieldsFromSchema(schema, data, parents) {
+    if (!parents)
+        parents = [];
+    else
+        parents = [...parents];
+    const fields = {};
+    if (schema instanceof ZodEffects) {
+        return getFieldsFromSchema(schema._def.schema, data);
+    }
+    if (!(schema instanceof ZodObject)) {
+        console.error('[lutra] getFieldsFromSchema: Schema is not an object:', schema.constructor.name);
+        return fields;
+    }
+    for (const key in schema.shape) {
+        const field = schema.shape[key];
+        // Fields can be wrapped like ZodDefault._def.innerType._def.InnerType, etc. We want the last inner type's definition.
+        // On the way, let's check if any of the _def include a defaultValue.
+        let required = true;
+        let defaultValue = undefined;
+        let min = undefined;
+        let max = undefined;
+        let pattern = undefined;
+        let minlength = undefined;
+        let maxlength = undefined;
+        let type = field;
+        while (type instanceof ZodEffects || type instanceof ZodOptional || type instanceof ZodDefault || type instanceof ZodNullable) {
+            if (type instanceof ZodOptional || type instanceof ZodNullable) {
+                required = false;
+                type = type._def.innerType;
+            }
+            if (type instanceof ZodDefault) {
+                defaultValue = type._def.defaultValue();
+                type = type._def.innerType;
+            }
+            else {
+                type = type._def.innerType;
+            }
+        }
+        // Check for min/max/regex checks
+        if (type._def.checks) {
+            for (const check of type._def.checks) {
+                if (check.kind === 'min') {
+                    if (field instanceof ZodString || field._def?.innerType instanceof ZodString) {
+                        minlength = check.value;
+                    }
+                    else {
+                        min = check.value;
+                    }
+                }
+                if (check.kind === 'max') {
+                    if (field instanceof ZodString || field._def?.innerType instanceof ZodString) {
+                        maxlength = check.value;
+                    }
+                    else {
+                        max = check.value;
+                    }
+                }
+                if (check.kind === 'regex') {
+                    pattern = check.regex.source;
+                }
+                if (check.kind === 'email') {
+                    // ...
+                }
+            }
+        }
+        if (type instanceof ZodObject) {
+            const children = getFieldsFromSchema(type, data, [...parents, key]);
+            Object.entries(children).forEach(([childKey, childField]) => {
+                const name = [...parents, key, childKey].join('.');
+                fields[name] = {
+                    name,
+                    tainted: childField.tainted,
+                    coerce: childField.coerce,
+                    min: childField.min,
+                    max: childField.max,
+                    minlength: childField.minlength,
+                    maxlength: childField.maxlength,
+                    pattern: childField.pattern,
+                    required: childField.required,
+                    defaultValue: childField.defaultValue,
+                    isArray: childField.isArray,
+                    type: childField.type,
+                };
+            });
+        }
+        else {
+            fields[key] = {
+                name: [...parents, key].join('.'),
+                tainted: false,
+                min,
+                max,
+                minlength,
+                maxlength,
+                pattern,
+                required,
+                defaultValue,
+                isArray: field instanceof ZodArray,
+                type: mapZodTypeToFieldType(field instanceof ZodArray ? field.element : field),
+            };
+        }
+    }
+    return fields;
+}
+/**
+ * Server page load call. Optionally with a default object to populate the form with from locals.
+ * @param {ZodType} schema - The schema to parse the form with.
+ * @param {RequestEvent} event - The event to load the (possible) form from.
+ * @param {JSONLike} obj - The default object to populate the form with.
+ * @returns {Promise<Form<Z>>} - The form to use.
+ */
+export async function loadForm(schema, event, obj) {
+    // If there is a form in locals, it's been passed in from parseForm. Return it.
+    if (event.locals.form) {
+        return event.locals.form;
+    }
+    // Serialize the schema to send over the wire.
+    const serializedSchema = zerialize(schema);
+    // Get the fields from the schema.
+    const fields = getFieldsFromSchema(schema);
+    // Create the form object.
+    const form = event.locals.form;
+    return {
+        valid: form ? form.valid : (obj ? true : false),
+        tainted: form ? form.tainted : false,
+        schema: serializedSchema,
+        posted: form ? form.posted : false,
+        fields,
+        data: Object.assign(Object.fromEntries(Object.entries(fields).map(([key, value]) => {
+            // If the key is in the passed object, use that value. Otherwise, try to use the default value.
+            return [key, value.defaultValue];
+        })), obj ? obj : {}),
+    };
+}
+/**
+ * Parse zod issues into form issues (with a path string).
+ * @param {ZodIssue[]} issues - The issues to parse.
+ * @returns {FormIssue[]} - The parsed issues.
+ */
+export function parseFormIssues(issues) {
+    return JSON.parse(JSON.stringify(issues.map((issue) => {
+        return {
+            ...issue,
+            name: arrayPathToStringPath(issue.path),
+        };
+    })));
+}
+/**
+ * Parse a form using a schema.
+ * @param {ZodType} schema - The schema to parse the form with.
+ * @param {Request} request - The request to parse.
+ * @param {BodyguardFormConfig} opts - The options for the form validation.
+ * @returns {Promise<{ valid: false } | { valid: true, data: Infer<Z> }>} - The result of the form validation.
+ */
+export async function parseForm(schema, event, opts) {
+    // Use bodyguard to parse the form.
+    const data = await bodyguard.softForm(event.request, schema.parse, opts);
+    // Get the fields from the schema.
+    const fields = getFieldsFromSchema(schema, data);
+    // Serialize the schema to send over the wire.
+    const serializedSchema = zerialize(schema);
+    // Create the form object.
+    const form = {
+        valid: data.success,
+        tainted: !data.success,
+        schema: serializedSchema,
+        posted: true,
+        fields: Object.fromEntries(Object.entries(fields).map(([key, field]) => {
+            // Mark fields as tainted if they were in the request.
+            return [key, {
+                    ...field,
+                    tainted: data.success ? false : data.value.hasOwnProperty(key),
+                }];
+        })),
+        data: data.value ? data.value : {},
+        issues: data.success ? undefined : parseFormIssues(data.error.issues),
+    };
+    // Attach the form to the locals to pass it to the client via loadForm.
+    event.locals.form = form;
+    return form;
+}
+/**
+ * Convert an array path from a Zod issue to a string path for a form field.
+ * @param {(string | number)[]} path - The path to convert.
+ * @returns {string} - The string path.
+ */
+export function arrayPathToStringPath(path) {
+    // Joins the path with dots. For arrays, it adds brackets.
+    return path.map((p) => {
+        if (p.toString().match(/^\d+$/)) {
+            return `${p}[]`;
+        }
+        return p;
+    }).join('.');
+}
+/**
+ * Get a value from an object using a string path.
+ * @param {any} obj - The object to get the value from.
+ * @param {string} path - The path to get the value from.
+ * @returns {string | number | Date | boolean | object | undefined} - The value from the object.
+ */
+export function getFromObjWithStringPath(obj, path) {
+    const parts = path.split('.');
+    let current = obj;
+    for (let i = 0; i < parts.length; i++) {
+        const part = parts[i];
+        // Support for array access patterns: foo[] or foo[0]
+        const arrayMatch = part.match(/^(.+?)(\[\d*\])?$/);
+        if (arrayMatch) {
+            const [, key, indexPart] = arrayMatch;
+            // Navigate into 'properties' if it exists
+            if (current.properties && current.properties[key]) {
+                current = current.properties[key];
+            }
+            else if (current[key]) {
+                current = current[key];
+            }
+            else {
+                // The path is invalid for the given structure or the index is not a number
+                return undefined;
+            }
+            // If indexPart is defined, it means we're dealing with an array index
+            if (indexPart) {
+                // Dealing with an array index, e.g., [0]
+                const index = parseInt(indexPart.slice(1, -1), 10);
+                if (!Array.isArray(current) || isNaN(index)) {
+                    return undefined;
+                }
+                current = current[index];
+            }
+        }
+        else {
+            // Direct property access
+            if (current.properties && current.properties[part]) {
+                current = current.properties[part];
+            }
+            else if (current[part]) {
+                current = current[part];
+            }
+            else {
+                return undefined;
+            }
+        }
+        if (current === undefined) {
+            return undefined;
+        }
+    }
+    // The value must be directly returnable without checking type,
+    // as we might be looking for an object structure.
+    return current;
+}
+/**
+ * Get individual validators for each field in a form.
+ * @param {Form} form - The form to get the validators from.
+ * @returns {Record<keyof Infer<T>, (value: any) => boolean>} - The validators for each field.
+ */
+export function getIndividualValidators(form) {
+    const schema = form.schema;
+    const fields = form.fields;
+    if (!schema || !fields) {
+        console.error('[lutra] getIndividualValidators: Schema or fields not found:', schema, fields);
+        return {};
+    }
+    // Match the dot-notation form fields with the object schema fields.
+    // For each field, create a validator function by dezerilizing the schema for that field from the schema.
+    // Return the validators, not the parsed data.
+    const validators = Object.fromEntries(Object.entries(fields).map(([key, field]) => {
+        const schemaField = getFromObjWithStringPath(schema, key);
+        if (!schemaField) {
+            console.error('[lutra] getIndividualValidators: Schema field not found:', key);
+            return [key, (value) => true];
+        }
+        return [key, dezerialize(schemaField)];
+    }));
+    return validators;
+}

package/dist/form/index.d.ts

@@ -2,6 +2,7 @@ export { default as Button } from './Button.svelte';
 export { default as FieldContainer } from './FieldContainer.svelte';
 export { default as FieldSection } from './FieldSection.svelte';
 export { default as FieldActions } from './FieldActions.svelte';
+export { default as FieldError } from './FieldError.svelte';
 export { default as FieldContent } from './FieldContent.svelte';
 export { default as Fieldset } from './Fieldset.svelte';
 export { default as Form } from './Form.svelte';
@@ -9,3 +10,6 @@ export { default as Input } from './Input.svelte';
 export { default as InputLength } from './InputLength.svelte';
 export { default as Label } from './Label.svelte';
 export { default as Select } from './Select.svelte';
+export * from './types.js';
+export * from './form.js';
+export * from './client.svelte.js';

package/dist/form/index.js

@@ -2,6 +2,7 @@ export { default as Button } from './Button.svelte';
 export { default as FieldContainer } from './FieldContainer.svelte';
 export { default as FieldSection } from './FieldSection.svelte';
 export { default as FieldActions } from './FieldActions.svelte';
+export { default as FieldError } from './FieldError.svelte';
 export { default as FieldContent } from './FieldContent.svelte';
 export { default as Fieldset } from './Fieldset.svelte';
 export { default as Form } from './Form.svelte';
@@ -9,3 +10,6 @@ export { default as Input } from './Input.svelte';
 export { default as InputLength } from './InputLength.svelte';
 export { default as Label } from './Label.svelte';
 export { default as Select } from './Select.svelte';
+export * from './types.js';
+export * from './form.js';
+export * from './client.svelte.js';

package/dist/form/server.d.ts

@@ -0,0 +1,21 @@
+import { Bodyguard } from "@auth70/bodyguard";
+import type { ActionFailure, RequestEvent } from "@sveltejs/kit";
+import type { z, ZodType } from "zod";
+export declare const bodyguard: Bodyguard;
+export type Issue = {
+    message: string;
+    path: string[];
+    field: string;
+};
+export declare class FormError extends Error {
+    issues: Issue[];
+    constructor(issues: Issue[], message?: string);
+}
+export declare function formHandler<T, Z extends ZodType<any, any>>(event: RequestEvent, schema: Z, onSuccess: (data: z.infer<Z>) => Promise<T>, { castNumbers, castBooleans, }?: {
+    castNumbers?: boolean;
+    castBooleans?: boolean;
+}): Promise<T | ActionFailure<{
+    issues: any;
+}> | ActionFailure<{
+    message: any;
+}>>;

package/dist/form/server.js

@@ -0,0 +1,48 @@
+import { Bodyguard } from "@auth70/bodyguard";
+import { fail } from "@sveltejs/kit";
+export const bodyguard = new Bodyguard();
+export class FormError extends Error {
+    issues;
+    constructor(issues, message = 'Form error') {
+        super(message);
+        this.issues = issues;
+    }
+}
+export async function formHandler(event, schema, onSuccess, { castNumbers, castBooleans, } = {
+    castNumbers: false,
+    castBooleans: false,
+}) {
+    const data = await bodyguard.softForm(event.request, schema.parse, {
+        castNumbers: castNumbers || false,
+        castBooleans: castBooleans || false,
+    });
+    if (!data.success) {
+        try {
+            const issues = JSON.parse(data.error);
+            console.error('[lutra] Bodyguard failed:', data);
+            return fail(400, {
+                issues,
+            });
+        }
+        catch (err) {
+            console.error('[lutra] Bodyguard failed:', data);
+            return fail(400, {
+                issues: data.error
+            });
+        }
+    }
+    try {
+        return Promise.resolve(onSuccess(data.value));
+    }
+    catch (err) {
+        console.error('[lutra] Error in form handler:', err);
+        if (err?.issues) {
+            return fail(400, {
+                issues: err?.issues ?? [],
+            });
+        }
+        return fail(500, {
+            message: err.message
+        });
+    }
+}

package/dist/form/types.d.ts

@@ -1,4 +1,57 @@
+import type { ZodType, infer as Infer, ZodTuple, ZodBigInt, ZodNaN, ZodSet, ZodVoid, ZodUndefined, ZodNull, ZodAny, ZodUnknown, ZodNever, ZodRecord, ZodMap, ZodDiscriminatedUnion, ZodUnion, ZodIntersection, ZodNativeEnum, ZodEnum, ZodFunction, ZodLazy, ZodLiteral, ZodCatch, ZodPipeline, ZodBranded, ZodPromise, ZodArray, ZodNullable, ZodOptional, ZodEffects, ZodObject, ZodDefault, ZodString, ZodNumber, ZodBoolean, ZodDate } from "zod";
 export type Autocomplete = 'on' | 'off' | AutocompleteSingleToken | AutocompleteBilling | AutocompleteShipping;
 export type AutocompleteBilling = 'billing' | `billing ${AutocompleteSingleToken}`;
 export type AutocompleteShipping = 'shipping' | `shipping ${AutocompleteSingleToken}`;
 export type AutocompleteSingleToken = `section-${string}` | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo" | "webauthn";
+export type Modifiers = ZodOptional<ZodTypes> | ZodNullable<ZodTypes> | ZodDefault<ZodTypes>;
+export type Primitives = ZodString | ZodNumber | ZodNaN | ZodBigInt | ZodBoolean | ZodDate | ZodUndefined | ZodNull | ZodAny | ZodUnknown | ZodNever | ZodVoid;
+export type ListCollections = ZodTuple<any, any> | ZodSet<ZodTypes> | ZodArray<ZodTypes>;
+export type KVCollections = ZodObject<any> | ZodRecord<any, ZodTypes> | ZodMap<ZodTypes, ZodTypes>;
+export type ADTs = ZodUnion<readonly [ZodTypes, ...ZodTypes[]]> | ZodDiscriminatedUnion<any, ZodObject<{
+    [k: string]: ZodTypes;
+}>[]> | ZodIntersection<ZodTypes, ZodTypes> | ZodNativeEnum<any> | ZodEnum<any>;
+export type ZodTypes = Modifiers | Primitives | ListCollections | KVCollections | ADTs | ZodFunction<any, ZodTypes> | ZodLazy<ZodTypes> | ZodLiteral<any> | ZodEffects<any, any> | ZodCatch<ZodTypes> | ZodPromise<ZodTypes> | ZodBranded<ZodTypes, any> | ZodPipeline<ZodTypes, ZodTypes>;
+export type ZTypeName<T extends ZodTypes> = T["_def"]["typeName"];
+export type FormIssue = {
+    name: string;
+    code: string;
+    message?: string;
+    minimum?: number;
+    maximum?: number;
+    exact?: boolean;
+    validation?: string;
+};
+export type Form<T extends ZodType<any, any>> = {
+    /** Whether the form is valid. */
+    valid: boolean;
+    /** Whether the user has interacted with the form. */
+    tainted?: boolean;
+    /** Whether the form has been posted. */
+    posted: boolean;
+    /** The schema to parse the form with. */
+    schema?: T;
+    /** The fields of the form. */
+    fields: Record<string, FormField>;
+    /** The data of the form. */
+    data?: Infer<T>;
+    /** Original data for form before editing */
+    originalData?: Infer<T>;
+    /** The issues of the form. */
+    issues?: FormIssue[];
+};
+export type FormField = {
+    name: string;
+    tainted: boolean;
+    coerce?: boolean;
+    min?: number;
+    max?: number;
+    minlength?: number;
+    maxlength?: number;
+    hasIssue?: boolean;
+    pattern?: string;
+    required: boolean;
+    defaultValue?: string | number | boolean;
+    isArray: boolean;
+    type: string;
+    children?: Record<string, FormField>;
+};

package/dist/layout/Theme.svelte

@@ -13,7 +13,6 @@ if (theme === "invert") {
 }
 const existingTheme = getContext("theme");
 setContext("theme", theme);
-console.log("theme", theme);
 </script>
 
 <svelte:body style="background-color: var(--bg-app);" />
@@ -43,6 +42,7 @@ console.log("theme", theme);
         --border-color: var(--l-border-color);
         --border-subtle-color: var(--l-border-subtle-color);
         --focus-color: var(--l-focus-color);
+        --focus-color-error: var(--l-focus-color-error);
         --border: var(--l-border);
         --border-subtle: var(--l-border-subtle);
         --focus-outline: var(--l-focus-outline);
@@ -58,6 +58,8 @@ console.log("theme", theme);
         --text-warn-icon: var(--l-text-warn-icon);
         /* fields */
         --field-bg: var(--l-field-bg);
+        --field-border-color: var(--l-field-border-color);
+        --field-border-color-error: var(--l-field-border-color-error);
         --field-border: var(--l-field-border);
         --field-text: var(--l-field-text);
         --field-placeholder: var(--l-field-placeholder);
@@ -133,6 +135,7 @@ console.log("theme", theme);
         --border-color: var(--d-border-color);
         --border-subtle-color: var(--d-border-subtle-color);
         --focus-color: var(--d-focus-color);
+        --focus-color-error: var(--d-focus-color-error);
         --border: var(--d-border);
         --border-subtle: var(--d-border-subtle);
         --focus-outline: var(--d-focus-outline);
@@ -149,6 +152,8 @@ console.log("theme", theme);
         --text-warn-icon: var(--d-text-warn-icon);
         /* fields */
         --field-bg: var(--d-field-bg);
+        --field-border-color: var(--d-field-border-color);
+        --field-border-color-error: var(--d-field-border-color-error);
         --field-border: var(--d-field-border);
         --field-text: var(--d-field-text);
         --field-placeholder: var(--d-field-placeholder);

package/dist/style.css

@@ -29,7 +29,9 @@
     --field-radius: 0.35em;
     --border-size: 1px;
     --border-style: solid;
-    --focus-size: 5px;
+    --field-border-size: 1px;
+    --field-border-style: solid;
+    --focus-size: 2px;
     --mix-amount: 80%; 
     /* Transitions */
     --menu-trans: 0.1s ease-in-out;
@@ -46,6 +48,7 @@
     --l-border-color: hsl(215, 6%, 80%);
     --l-border-subtle-color: hsl(215, 5%, 87%);
     --l-focus-color: hsl(215, 60%, 55%);
+    --l-focus-color-error: hsl(353, 76%, 58%);
     --l-border: var(--border-size) var(--border-style) var(--l-border-color);
     --l-border-subtle: var(--border-size) var(--border-style) var(--l-border-subtle-color);
     --l-focus-outline: var(--focus-size) solid var(--l-focus-color);
@@ -61,7 +64,9 @@
     --l-text-warn-icon: #e74c3c;
     /* fields */
     --l-field-bg: transparent;
-    --l-field-border: var(--l-border);
+    --l-field-border-color: var(--l-border-color);
+    --l-field-border-color-error: var(--l-focus-color-error);
+    --l-field-border: var(--field-border-size) var(--field-border-style) var(--l-field-border-color);
     --l-field-text: var(--l-text);
     --l-field-placeholder: #999;
     --l-field-label: #333;
@@ -138,6 +143,7 @@
     --d-border-color: hsl(215, 8%, 30%);
     --d-border-subtle-color: hsl(215, 5%, 25%);
     --d-focus-color: rgb(77, 144, 254);
+    --d-focus-color-error: red;
     --d-border: var(--border-size) var(--border-style) var(--d-border-color);
     --d-border-subtle: var(--border-size) var(--border-style) var(--d-border-subtle-color);
     --d-focus-outline: var(--focus-size) solid var(--d-focus-color);
@@ -154,7 +160,9 @@
     --d-text-warn-icon: #ff6b6b;
     /* fields */
     --d-field-bg: transparent;
-    --d-field-border: var(--d-border);
+    --d-field-border-color: var(--d-border-color);
+    --d-field-border-color-error: red;
+    --d-field-border: var(--field-border-size) var(--field-border-style) var(--d-field-border-color);
     --d-field-text: var(--d-text);
     --d-field-placeholder: #666;
     --d-field-label: #ccc;
@@ -421,6 +429,14 @@ input, textarea, select {
     transition: border-color 0.1s;
 }
 
+input:user-invalid {
+    border-color: var(--field-border-color-error);
+}
+
+input:user-invalid:focus-visible {
+    outline-color: var(--focus-color-error);
+}
+
 select {
     padding-right: 2em;
     appearance: none;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lutra",
-	"version": "0.0.6",
+	"version": "0.0.7",
 	"scripts": {
 		"dev": "vite dev --host 0.0.0.0",
 		"props": "node read_props.js",
@@ -35,7 +35,8 @@
 		},
 		"./form": {
 			"types": "./dist/form/index.d.ts",
-			"svelte": "./dist/form/index.js"
+			"svelte": "./dist/form/index.js",
+			"import": "./dist/form/index.js"
 		},
 		"./icons": {
 			"types": "./dist/icons/index.d.ts",
@@ -87,5 +88,10 @@
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"@auth70/bodyguard": "^1.5.2",
+		"@auth70/zodex-esm": "^0.7.3",
+		"zod": "^3.22.4"
+	}
 }