lutra 0.0.11 → 0.0.13

package/dist/datatable/DataTable.svelte

@@ -17,14 +17,15 @@ let {
     section {
         container-type: inline-size;
         display: grid;
-        grid-template-columns: repeat(calc(var(--dtcols) - 1), auto) 1fr;
+        grid-template-columns: repeat(var(--dtcols), minmax(min-content, 1fr));
         border-radius: var(--border-radius);
-        width: 100%;
         font-size: var(--font-size, 1em);
+        margin-inline: calc((var(--dtc) - 1) * 1em);
+        width: calc(100% + (var(--dtc) - 1 * 2em));
+        overflow-x: auto;
     }
     section.contained {
         border: var(--border);
         border-radius: var(--border-radius);
-        overflow-x: auto;
     }
 </style>

package/dist/datatable/DataTableRow.svelte

@@ -19,22 +19,21 @@ setContext("DataTableRow", { header });
 <style>
     .DataTableRow {
         display: grid;
-        grid-column: 1 / calc(var(--dtcols) + 1);
         grid-template-columns: subgrid;
+        grid-column: 1 / -1;
         gap: 1.5em;
         align-items: center;
         width: 100%;
-        overflow: none;
-        padding: 0.75em calc(1.5em * var(--dtc));
+        padding: 0.75em 1em;
         position: relative;
     }
     .DataTableRow:hover {
-        background: color-mix(in srgb, var(--bg-subtle) calc(var(--dtc) * 100%), transparent);
+        background: var(--bg-subtle);
     }
     .DataTableRow:has(.Actions) {
         padding-right: 0;
     }
-    .DataTableRow :global(*) {
+    .DataTableRow :global(> *) {
         white-space: nowrap;
     }
     .DataTableRow.header {

package/dist/display/ContextTip.svelte

@@ -7,17 +7,21 @@ let {
 </script>
 
 <Tooltip {tip}>
-    <button onclick={(e) => e.preventDefault()}>
-        <Icon icon={Help} />
-    </button>
+    <a href="#foo" onclick={(e) => { e.preventDefault(); e.stopPropagation(); }}>
+        <Icon icon={Help} --icon-width="16px" --icon-height="16px" --cursor="help" />
+    </a>
 </Tooltip>
 
 <style>
-    button {
+    a {
         border-radius: 50%;
+        color: var(--text);
+        height: 16px;
+        width: 16px;
+        display: inline-block;
     }
-    button:focus,
-    button:active {
-        outline-offset: -3px;
+    a:focus,
+    a:active {
+        outline-offset: -2px;
     }
 </style>

package/dist/display/Icon.svelte

@@ -17,19 +17,20 @@ let {
 
 <style>
     .Icon {
-        display: inline-flex;
+        display: flex;
         align-items: center;
         justify-content: center;
         font-size: 1em;
         width: var(--icon-width, var(--font-size, 1em));
         height: var(--icon-height, var(--font-size, 1em));
         overflow: clip;
-        vertical-align: var(--vertical-align, baseline);
+        vertical-align: var(--vertical-align, text-bottom);
         cursor: var(--cursor, default);
     }
+    img,
     .Icon :global(svg) {
         width: 100%;
         height: 100%;
-        display: inline-block;
+        display: block;
     }
 </style>

package/dist/display/Tooltip.svelte

@@ -32,9 +32,8 @@ const id = `tt-${Math.random().toString(36).substring(2, 15) + Math.random().toS
 <style>
     .Tooltip {
         position: relative;
-        height: 100%;
         display: inline-flex;
-        align-items: center;
+        vertical-align: var(--vertical-align, text-bottom);
     }
     .TooltipContainer {
         position: absolute;
@@ -58,8 +57,8 @@ const id = `tt-${Math.random().toString(36).substring(2, 15) + Math.random().toS
         border-left: var(--border-subtle);
         border-right: var(--border-subtle);
         display: block;
-        font-size: max(0.85rem, 12px);
-        line-height: 1.4;
+        font-size: max(0.75rem, 11px);
+        line-height: 1.35;
         font-weight: 500;
         color: var(--text);
         max-width: clamp(5ch, 100%, 35ch);
@@ -72,6 +71,10 @@ const id = `tt-${Math.random().toString(36).substring(2, 15) + Math.random().toS
     .TooltipContent :global(b) {
         font-weight: 700;
     }
+    .TooltipTrigger {
+        display: inline-flex;
+        align-items: center;
+    }
     .Tooltip:has(.TooltipTrigger:hover):not(.open) .TooltipContainer {
         animation: fadeIn 0.2s var(--delay, 0.5s) ease-in-out forwards;
     }

package/dist/form/FieldActions.svelte

@@ -16,6 +16,7 @@
         gap: 1.35em;
         background: color-mix(in srgb, var(--bg-subtle) calc(var(--fcc) * 100%), transparent);
         padding: calc(1.5em * var(--fcc)) calc(1.5em * var(--fcc));
+        grid-column: 1 / -1;
     }
     @container (max-width: 400px) {
         .FieldActions {

package/dist/form/FieldContainer.svelte

@@ -13,7 +13,7 @@
         container-type: inline-size;
         display: grid;
         gap: 1.5em;
-        grid-template-columns: 1fr;
+        grid-template-columns: 250px 1fr;
         border-radius: var(--border-radius);
     }
     .FieldContainer.contained {

package/dist/form/FieldContent.svelte

@@ -1,4 +1,5 @@
 <script>import Label from "./Label.svelte";
+import FieldError from "./FieldError.svelte";
 let {
   id,
   contained,
@@ -7,12 +8,16 @@ let {
   label,
   labelTip,
   type = "text",
-  children
+  direction = "column",
+  // 'row' | 'column'
+  children,
+  field,
+  issue
 } = $props();
 </script>
 
 
-<div class="FieldContent {type}" class:contained>
+<div class="FieldContent {type} {direction}" class:contained>
     <Label {label} tip={labelTip} {id} />
     {#if contained}
         <div class="Field">
@@ -27,6 +32,10 @@ let {
     {:else}
         {@render children()}
     {/if}
+
+    {#if field?.tainted && issue?.code}
+        <FieldError code={issue.code} message={issue.message} />
+    {/if}
 </div>
 
 <style>
@@ -75,4 +84,10 @@ let {
         outline-offset: 3px;
         border-radius: calc(var(--field-radius) - 2px);
     }
+    /**
+     * Row
+     */ 
+    .FieldContent.row {
+        flex-direction: row;
+    }
 </style>

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

@@ -1,5 +1,6 @@
 import { SvelteComponent } from "svelte";
 import type { Snippet } from "svelte";
+import type { FormField, FormIssue } from "./types.js";
 declare const __propDef: {
     props: {
         id: string;
@@ -17,7 +18,10 @@ declare const __propDef: {
         labelTip?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
+        direction?: "row" | "column" | undefined;
         children: Snippet;
+        field?: FormField | undefined;
+        issue?: FormIssue | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/form/FieldSection.svelte

@@ -36,11 +36,12 @@ let {
         padding: 0;
         display: grid;
         gap: 0rem;
-        grid-template-columns: 1fr;
+        grid-template-columns: subgrid;
     }
     .FieldSection .FieldSectionTitle {
         display: flex;
         flex-direction: column;
+        grid-column: 0 / 1;
         background-color: var(--base);
         gap: 0.25rem;
         padding: 1em 1.5em;
@@ -51,20 +52,21 @@ let {
     }
     .FieldSection .FieldSectionFields {
         padding: calc(var(--padding, 1.5em) * var(--fcc));
+        grid-column: 1 / -1;
         display: grid;
         gap: 1.5rem;
     }
     @container (min-width: 600px) {
         .FieldSection {
             gap: 3rem;
-            padding: 2rem;
-            grid-template-columns: 1fr;
+            padding: calc(2rem * var(--fcc));
+            /*grid-template-columns: 1fr;*/
             border-bottom: 1px dotted var(--border-light);
             margin-bottom: 3rem;
             border-radius: 0;
         }
         .FieldSection:has(.FieldSectionTitle) {
-            grid-template-columns: minmax(180px, 1fr) 3fr;
+            /*grid-template-columns: minmax(180px, 1fr) 3fr;*/
         }
         .FieldSection:last-child {
             border-bottom: none;
@@ -86,8 +88,8 @@ let {
     }
     @container (min-width: 1024px) {
         .FieldSection {
-            grid-template-columns: minmax(300px, 1fr) 3fr;
-            padding: 3rem;
+            /*grid-template-columns: minmax(300px, 1fr) 3fr;*/
+            padding: calc(3rem * var(--fcc));
         }
         .FieldSection:not(:first-child) {
             border-top: 0;

package/dist/form/Form.svelte

@@ -16,26 +16,30 @@ let {
 } = $props();
 setContext("form", form);
 setContext("form.validators", getIndividualValidators(form));
-const schema = dezerialize(form.schema);
+const schema = form?.schema ? dezerialize(form?.schema) : null;
 const bodyguard = new Bodyguard();
 let formEl;
 function setFormIssuesAndFields(issues, fields) {
-  form.issues = issues;
-  form.fields = fields;
+  if (form) {
+    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);
+  if (form && schema) {
+    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(() => {
@@ -61,19 +65,20 @@ onMount(() => {
                 // `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?.data?.form;
+                const resultForm = result.type !== "redirect" && result.type !== "error" ? result?.data?.form : null;
                 if(result.type === "success") {
-                    if(resultForm) {
-                        form.valid = resultForm.valid;
-                    }
-                } else if(result.type === "error") {
-                    if(resultForm) {
-                        setFormIssuesAndFields(resultForm.issues, resultForm.fields);
+                    if(resultForm && form) {
+                        form.valid = Object.assign({ valid: false }, resultForm).valid ?? false;
                     }
                 } else if(result.type === "failure") {
-                    if(resultForm) {
-                        setFormIssuesAndFields(resultForm.issues, resultForm.fields);
+                    if(resultForm && form) {
+                        setFormIssuesAndFields(
+                            Object.assign({ issues: [] }, resultForm).issues, // Have to assign to avoid type error as we cant use `as` here
+                            Object.assign({ fields: [] }, resultForm).fields,
+                        );
                     }
+                } else if(result.type === "error") {
+                    console.error('[lutra] Error from form enhance call', result.error);
                 } else if(result.type === "redirect") {
                     window.location.href = result.location;
                 }

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

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

package/dist/form/Input.svelte

@@ -1,5 +1,4 @@
-<script>import { getContext, unstate } from "svelte";
-import Label from "./Label.svelte";
+<script>import { getContext } from "svelte";
 import { createId } from "../utils/id.js";
 import Copy from "../icons/Copy.svelte";
 import Done from "../icons/Done.svelte";
@@ -11,8 +10,10 @@ import { fieldChange, fieldKeydown, ignoreKeys } from "./client.svelte.js";
 import FieldError from "./FieldError.svelte";
 import { getFromObjWithStringPath } from "./form.js";
 import { ZodType } from "zod";
+import FieldContent from "./FieldContent.svelte";
 let {
   alt,
+  attrs,
   autocapitalize,
   autocomplete,
   autocorrect,
@@ -69,7 +70,7 @@ let copyTooltipOpen = $state(false);
 let copyBtnIcon = $state(Copy);
 let viewBtnIcon = $state(Show);
 const form = getContext("form");
-const field = $derived(form.fields[name]);
+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;
@@ -115,6 +116,7 @@ function copy(e) {
 <input
     bind:this={el}
     {alt}
+    {...attrs}
     autocapitalize={typeof autocapitalize === 'string' ? autocapitalize : (typeof autocapitalize === 'boolean' ? (autocapitalize ? 'on' : 'off') : undefined)}
     {autocomplete}
     autocorrect={typeof autocorrect === 'boolean' ? (autocorrect ? 'on' : 'off') : undefined}
@@ -136,9 +138,9 @@ function copy(e) {
     {name}
     {onblur}
     {onclick}
-    onchange={fieldChange(form, name, () => el, validator)}
+    onchange={fieldChange(form, name, () => el, validator, onchange)}
     {onfocus}
-    onkeydown={fieldKeydown(form, name, () => el, validator)}
+    onkeydown={fieldKeydown(form, name, () => el, validator, onkeydown)}
     {onkeyup}
     {onkeypress}
     pattern={pattern ? pattern : field?.pattern}
@@ -151,16 +153,19 @@ function copy(e) {
     {tabindex}
     {title}
     {type}
-    value={value || getFromObjWithStringPath(Object.assign(originalData, data), name) || form?.fields?.[name]?.defaultValue || ''}
+    value={value || getFromObjWithStringPath(Object.assign(originalData ?? {}, data ?? {}), name) || form?.fields?.[name]?.defaultValue || ''}
     {webkitdirectory}
 />
 {/snippet}
-<div
-    class="FieldContainer {type}"
-    class:checkOrRadio={type === "checkbox" || type === "radio"}
->
 
-    <Label {id} {label} tip={labelTip} />
+<FieldContent
+    {id}
+    {label}
+    {labelTip}
+    direction={(type === "checkbox" || type === "radio") ? 'row' : 'column'}
+    {field}
+    {issue}
+>
 
     {#if type === "checkbox" || type === "radio"}
         {@render input()}
@@ -206,11 +211,8 @@ function copy(e) {
                 </div>
             {/if}
         </div>
-        {#if field?.tainted && issue?.code}
-            <FieldError code={issue.code} message={issue.message} />
-        {/if}
     {/if}
-</div>
+</FieldContent>
 
 <style>
     .FieldContainer {

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

@@ -4,6 +4,8 @@ declare const __propDef: {
     props: {
         /** alt attribute for the image type. Required for accessibility */
         alt?: string | undefined;
+        /** Additional attributes to add to the input element. */
+        attrs?: Record<string, string> | undefined;
         /** Whether the input should be autocapitalized. */
         autocapitalize?: boolean | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
         /** Specifies whether autocomplete is enabled for the input. */

package/dist/form/Select.svelte

@@ -1,22 +1,87 @@
-<script>import FieldContent from "./FieldContent.svelte";
+<script>import { getContext } 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";
+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 { fieldChange, fieldKeydown, ignoreKeys } from "./client.svelte.js";
+import FieldError from "./FieldError.svelte";
+import { getFromObjWithStringPath } from "./form.js";
+import { ZodType } from "zod";
+import FieldContent from "./FieldContent.svelte";
 let {
+  attrs,
+  children,
+  disabled,
+  help,
+  id = $bindable(createId()),
   label,
   labelTip,
-  help,
-  options
+  name,
+  onblur,
+  onchange,
+  onclick,
+  onfocus,
+  onkeydown,
+  onkeyup,
+  onkeypress,
+  options,
+  placeholder,
+  required,
+  results,
+  shape = "default",
+  tabindex,
+  value = $bindable()
 } = $props();
-let id = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+let el = $state();
+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;
 </script>
 
-<FieldContent {id} {label} {labelTip}>
-    <select>
-        {#each options as option}
-            {#if typeof option === "string"}
-                <option value={option}>{option}</option>
-            {:else}
-                <option value={option.value}>{option.label}</option>
-            {/if}
-        {/each}
+<FieldContent
+    {id}
+    {label}
+    {labelTip}
+    {field}
+    {issue}
+>
+    <select
+        bind:this={el}
+        {...attrs}
+        {disabled}
+        {id}
+        {name}
+        {onblur}
+        {onclick}
+        onchange={fieldChange(form, name, () => el, validator, onchange)}
+        {onfocus}
+        onkeydown={fieldKeydown(form, name, () => el, validator, onkeydown)}
+        {onkeyup}
+        {onkeypress}
+        {placeholder}
+        required={required || field?.required}
+        {results}
+        {tabindex}
+        value={value || getFromObjWithStringPath(Object.assign(originalData ?? {}, data ?? {}), name) || form?.fields?.[name]?.defaultValue || ''}
+    >
+        {#if children}
+            {@render children()}
+        {:else if options}
+            {#each options as option}
+                {#if typeof option === 'string'}
+                    <option value={option}>{option}</option>
+                {:else}
+                    <option value={option.value}>{option.label}</option>
+                {/if}
+            {/each}
+        {/if}
     </select>
 </FieldContent>
 

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

@@ -1,19 +1,71 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        label?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+        /** Additional attributes to add to the input element. */
+        attrs?: Record<string, string> | undefined;
+        /** Options for the select element. */
+        children?: ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
-        labelTip?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+        /** Whether the input should be disabled. */
+        disabled?: boolean | undefined;
+        /** Help text to display below the input. */
+        help?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
-        help?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+        /** A random id is generated if not provided. */
+        id?: string | undefined;
+        /** The label for the input */
+        label?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        /** Context tooltip for a label. Renders with a questionmark using ContextTip. */
+        labelTip?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
-        options: string[] | {
+        /** The name of the input element. */
+        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;
+        /** The options for the select element. */
+        options?: string[] | {
             value: string;
             label: string;
-        }[];
+        }[] | undefined;
+        /** Placeholder text to display when the input is empty. */
+        placeholder?: string | undefined;
+        /** Suffix content, to display after the input. */
+        suffix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        /** Prefix content, to display before the input. */
+        prefix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        /** Whether the input should be required. */
+        required?: boolean | undefined;
+        /** The maximum number of items that should be displayed in the drop-down list of previous search queries. Safari only. */
+        results?: number | undefined;
+        /** The shape of the input element. */
+        shape?: "default" | "circle" | "rounded" | "pill" | undefined;
+        /** Source URL for the image type. */
+        src?: string | undefined;
+        /** An integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation. */
+        tabindex?: number | undefined;
+        /** The value of the input element. */
+        value?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/form/client.svelte.js

@@ -34,8 +34,8 @@ export function fieldValidate(form, name, el, validator) {
         form.valid = false;
         form.issues = (form.issues || []).filter((issue) => issue.name !== name);
         form.issues?.push({
-            name,
-            ...result.error.issues[0],
+            name, // Include the path of the field.
+            ...((result.error?.issues?.length ? result.error.issues : [])?.[0]), // Include the first issue as we only care about one at a time.
         });
     }
 }
@@ -51,11 +51,13 @@ export function fieldValidate(form, name, el, validator) {
 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);
+            if (form) {
+                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);
@@ -72,9 +74,12 @@ export function fieldKeydown(form, name, el, validator, onkeydown) {
  */
 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 (form) {
+            console.log('fieldChange', name, el()?.value, validator);
+            form.data[name] = el()?.value || '';
+            form.fields[name].tainted = true;
+            fieldValidate(form, name, el(), validator);
+        }
         if (onchange)
             return onchange(e);
     };

package/dist/form/form.d.ts

@@ -1,6 +1,6 @@
-import { Bodyguard, type BodyguardFormConfig, type BodyguardResult, type JSONLike } from "@auth70/bodyguard";
+import { Bodyguard, type BodyguardFormConfig, type BodyguardResult, type GenericIssue, type JSONLike } from "@auth70/bodyguard";
 import type { RequestEvent } from "@sveltejs/kit";
-import type { ZodType, infer as Infer, ZodIssue, ZodIssueBase } from "zod";
+import type { ZodType, infer as Infer } from "zod";
 import type { Form, FormField, FormIssue, ZodTypes } from "./types.js";
 export declare const bodyguard: Bodyguard;
 /**
@@ -22,7 +22,7 @@ export declare function loadForm<Z extends ZodTypes>(schema: Z, event: RequestEv
  * @param {ZodIssue[]} issues - The issues to parse.
  * @returns {FormIssue[]} - The parsed issues.
  */
-export declare function parseFormIssues(issues: (ZodIssue & ZodIssueBase)[]): FormIssue[];
+export declare function parseFormIssues(issues: GenericIssue[]): FormIssue[];
 /**
  * Parse a form using a schema.
  * @param {ZodType} schema - The schema to parse the form with.
@@ -49,4 +49,4 @@ export declare function getFromObjWithStringPath(obj: any, path: string): string
  * @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>;
+export declare function getIndividualValidators<T extends ZodTypes>(form?: Form<T>): Record<keyof Infer<T>, (value: any) => boolean>;

package/dist/form/form.js

@@ -246,6 +246,8 @@ export function arrayPathToStringPath(path) {
  * @returns {string | number | Date | boolean | object | undefined} - The value from the object.
  */
 export function getFromObjWithStringPath(obj, path) {
+    if (!obj)
+        return undefined;
     const parts = path.split('.');
     let current = obj;
     for (let i = 0; i < parts.length; i++) {
@@ -301,6 +303,8 @@ export function getFromObjWithStringPath(obj, path) {
  * @returns {Record<keyof Infer<T>, (value: any) => boolean>} - The validators for each field.
  */
 export function getIndividualValidators(form) {
+    if (!form)
+        return {};
     const schema = form.schema;
     const fields = form.fields;
     if (!schema || !fields) {

package/dist/form/types.d.ts

@@ -1,3 +1,4 @@
+import type { GenericIssue } from "@auth70/bodyguard";
 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}`;
@@ -12,14 +13,8 @@ export type ADTs = ZodUnion<readonly [ZodTypes, ...ZodTypes[]]> | ZodDiscriminat
 }>[]> | 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 = {
+export type FormIssue = GenericIssue & {
     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. */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lutra",
-	"version": "0.0.11",
+	"version": "0.0.13",
 	"scripts": {
 		"dev": "vite dev --host 0.0.0.0",
 		"props": "node read_props.js",
@@ -90,7 +90,7 @@
 	"types": "./dist/index.d.ts",
 	"type": "module",
 	"dependencies": {
-		"@auth70/bodyguard": "^1.5.2",
+		"@auth70/bodyguard": "^1.6.2",
 		"@auth70/zodex-esm": "^0.7.3",
 		"zod": "^3.22.4"
 	}