lutra 0.0.5 → 0.0.7

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/dist/typo/H2.svelte

@@ -1,5 +1,5 @@
 <script>import {} from "svelte";
-import H from "./H.svelte.js";
+import H from "./H.svelte";
 let {
   center = false,
   hr = false,

package/dist/typo/H4.svelte

@@ -1,5 +1,5 @@
 <script>import {} from "svelte";
-import H from "./H.svelte.js";
+import H from "./H.svelte";
 let {
   center = false,
   hr = false,

package/dist/typo/H5.svelte

@@ -1,5 +1,5 @@
 <script>import {} from "svelte";
-import H from "./H.svelte.js";
+import H from "./H.svelte";
 let {
   center = false,
   hr = false,

package/dist/typo/H6.svelte

@@ -1,5 +1,5 @@
 <script>import {} from "svelte";
-import H from "./H.svelte.js";
+import H from "./H.svelte";
 let {
   center = false,
   hr = false,