lutra 0.1.68 → 0.1.69

package/dist/form/FormActions.svelte

@@ -2,20 +2,38 @@
 	import StringOrSnippet from "../util/StringOrSnippet.svelte";
     import { setContext, type Snippet } from "svelte";
 
+    /**
+     * @description
+     * Action bar for form buttons. Renders at the bottom of a form with configurable
+     * alignment. When the form is contained, inherits background and padding from
+     * `--form-background-actions` via the `--fcc` multiplier pattern.
+     *
+     * @example
+     * <FormActions>
+     *   <Button type="submit">Save</Button>
+     * </FormActions>
+     * <FormActions align="justified" info="Changes are saved automatically.">
+     *   <Button type="submit">Save</Button>
+     *   <Button kind="secondary" href="/cancel">Cancel</Button>
+     * </FormActions>
+     */
     let {
         align = 'end',
         children,
         info,
     }: {
+        /** Alignment of the action buttons. */
         align?: 'justified' | 'start' | 'center' | 'end' | 'full';
+        /** Action buttons and other content. */
         children: Snippet;
+        /** Optional info text displayed alongside the action buttons. */
         info?: string | Snippet;
     } = $props();
 
     setContext('form.actions.align', align);
 </script>
 
-<div class="FormActions {align}" class:hasInfo={!!info}>
+<div class="FormActions {align}">
     {#if info}
         <div class="Info">
             <StringOrSnippet content={info} />
@@ -29,7 +47,7 @@
 <style>
     .FormActions {
         display: grid;
-        background: color-mix(in srgb, var(--form-background-actions) calc(var(--fcc) * 100%), transparent);
+        background: color-mix(in oklch, var(--form-background-actions) calc(var(--fcc) * 100%), transparent);
         padding: calc(var(--space-md) * var(--fcc)) calc(var(--space-xl) * var(--fcc));
         grid-column: 1 / -1;
         grid-template-columns: subgrid;
@@ -57,7 +75,7 @@
         justify-content: end;
         grid-column: 1 / -1;
     }
-    .FormActions.hasInfo .Actions {
+    .FormActions:has(.Info) .Actions {
         grid-column: 2 / -1;
     }
     .FormActions.full .Actions {

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

@@ -1,7 +1,10 @@
 import { type Snippet } from "svelte";
 type $$ComponentProps = {
+    /** Alignment of the action buttons. */
     align?: 'justified' | 'start' | 'center' | 'end' | 'full';
+    /** Action buttons and other content. */
     children: Snippet;
+    /** Optional info text displayed alongside the action buttons. */
     info?: string | Snippet;
 };
 declare const FormActions: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/form/FormSection.svelte

@@ -3,7 +3,21 @@
 
     /**
      * @description
-     * A field section is a group of related form elements.
+     * A section within a form, grouping related fields under an optional title and
+     * description. Uses CSS subgrid for alignment with the parent form layout and
+     * responds to `@container` queries to collapse into a single column at narrow widths.
+     *
+     * @cssprop --form-section-gap -- Gap between the title and content areas.
+     * @cssprop --form-title-gap -- Gap within the section title (title + description).
+     * @cssprop --form-field-gap -- Gap between fields in the content area.
+     * @cssprop --form-padding-block -- Block padding when the form is contained.
+     * @cssprop --form-padding-inline -- Inline padding when the form is contained.
+     *
+     * @example
+     * <FormSection title="Personal Information" description="Enter your details.">
+     *   <Input name="name" label="Name" />
+     *   <Input name="email" type="email" label="Email" />
+     * </FormSection>
      */
     let {
         title,
@@ -53,12 +67,11 @@
     .FormSectionTitle {
         display: flex;
         flex-direction: column;
-        background-color: var(--base);
         gap: var(--form-title-gap, var(--space-md));
         text-wrap: balance;
     }
     .FormSection:not(:first-child) {
-        border-top: calc(var(--fcc) * var(--border-size)) var(--border-style) var(--border-color);
+        border-top: calc(var(--fcc) * var(--form-border-size)) var(--form-border-style) var(--form-border-color);
     }
     .FormSectionContent {
         display: grid;
@@ -67,27 +80,16 @@
     .FormSection.noTitle .FormSectionContent {
         grid-column: 1 / -1;
     }
-    @media(max-width: 1280px) {
-        .FormSection {
-            padding: var(--space-xl);
-            gap: var(--space-md);
-        }
-        .FormSectionTitle {
-            gap: var(--space-xs);
-            padding-block-end: var(--space-md);
-        }
-    }
-    @media(max-width: 640px) {
+    @container (max-width: 800px) {
         .FormSection {
-            padding: var(--space-xl);
-            gap: var(--space-md);
+            padding-block: calc(var(--fcc) * var(--form-padding-block));
+            padding-inline: calc(var(--fcc) * var(--form-padding-inline));
+            gap: var(--form-section-gap, var(--space-md));
         }
         .FormSectionTitle {
-            gap: var(--space-xs);
-            padding-block-end: var(--space-md);
+            gap: var(--form-title-gap);
+            padding-block-end: var(--form-title-padding-block-end);
         }
-    }
-    @container (max-width: 800px) {
         .FormSectionTitle,
         .FormSectionContent {
             grid-column: 1 / -1;

package/dist/form/ImageUpload.svelte

@@ -9,6 +9,23 @@
     const imageCompression: ImageCompressionFn = (imageCompressionModule as unknown as { default?: ImageCompressionFn }).default ?? imageCompressionModule as unknown as ImageCompressionFn;
 	import { addToast } from "../components/toasts.svelte.js";
 
+    /**
+     * @description
+     * An image upload component with client-side compression, progress indicator and
+     * optional remove button. Supports square, circle and banner display shapes.
+     * Uploads to a presigned URL via `PUT`.
+     *
+     * @cssprop --max-image-width -- Maximum width of the image preview (used in the grid layout).
+     *
+     * @example
+     * <ImageUpload
+     *   uploadUrl="/api/upload"
+     *   name="avatar"
+     *   button="Upload"
+     *   shape="circle"
+     *   src={user.avatarUrl}
+     * />
+     */
     let {
         src,
         uploadUrl,
@@ -25,19 +42,33 @@
         onFile,
         children,
     }: {
+        /** Current image source URL. */
         src?: string | null;
+        /** The presigned URL to upload the image to. */
         uploadUrl: string;
+        /** The form field name for the resulting URL value. */
         name: string;
+        /** HTML id for the file input. */
         id?: string;
+        /** Title used in the alt text of the preview image. */
         title?: string;
+        /** Label for the upload button. */
         button: string;
+        /** Maximum file size in bytes before compression is applied. */
         maxSize?: number;
+        /** Maximum compressed file size in megabytes. */
         compressSize?: number;
+        /** Maximum compressed image width in pixels. */
         compressMaxWidth?: number;
+        /** Accepted MIME types for the file input. */
         accept?: string;
+        /** Whether a remove button is shown. */
         removable?: boolean;
+        /** Display shape of the image preview. */
         shape?: 'square' | 'circle' | 'banner';
+        /** Callback invoked with the selected file before upload. */
         onFile?: (file: File) => void;
+        /** Optional additional content rendered below the actions. */
         children?: Snippet;
     } = $props();
 
@@ -63,8 +94,6 @@
                 useWebWorker: true,
                 onProgress: (progress: number) => resizeProgress = progress,
             });
-            console.log('compressedFile instanceof Blob', compressedFile instanceof Blob); // true
-            console.log(`compressedFile size ${compressedFile.size / 1024 / 1024} MB`); // smaller than maxSizeMB
             uploadState = 'uploading';
 
             const response = await fetch(uploadUrl, {
@@ -79,15 +108,10 @@
                 addToast({ content: 'Something went wrong. Please try again.', autoClose: 3000 })
                 cancel();
             }
-            //src = new URL(response.url).href.split('?')[0];
-            console.log('setting', name, new URL(response.url).href.split('?')[0]);
             const imgUrl = new URL(response.url).href.split('?')[0];
             data.set(name, imgUrl);
             src = imgUrl;
-            console.log('response', response, response.url);
-            console.log('data', data.forEach((v, k) => console.log(k, v)));
         } catch(err) {
-            console.error('error', err);
             addToast({ content: 'Something went wrong. Please try again.', autoClose: 3000 })
             cancel();
         }
@@ -141,7 +165,7 @@
 </script>
 
 <div class="ImageUpload {shape}">
-    <div class="Image" class:hasSrc={!!src}>
+    <div class="Image">
         {#if src}
             <img src={src} alt="{title} logo" />
         {/if}
@@ -194,16 +218,16 @@
         display: grid;
         grid-template-columns: 1fr;
         align-items: center;
-        gap: 1rem;
+        gap: var(--space-md);
         container-type: inline-size;
     }
     .Image {
-        border: 1px solid var(--border-light);
+        border: var(--border-size-thin) solid var(--border-color-subtle);
         pointer-events: none;
         position: relative;
         display: none;
     }
-    .Image.hasSrc {
+    .Image:has(img) {
         display: block;
     }
     .Image img {
@@ -229,32 +253,29 @@
         height: 100%;
         width: 100%;
         object-fit: contain;
-        padding: 1rem;
+        padding: var(--space-md);
         text-align: center;
-        border: 1px dashed var(--border-color);
-        border-radius: var(--border-radius);
+        border: var(--border-size-thin) dashed var(--border-color);
+        border-radius: var(--border-radius-base);
     }
     .Loading {
         position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
+        inset: 0;
         z-index: 5;
-        backdrop-filter: blur(5px);
-        background: var(--bg-overlay);
+        backdrop-filter: var(--scrim-backdrop-filter);
+        background: var(--scrim-background);
         display: flex;
         align-items: center;
         justify-content: center;
         flex-direction: column;
-        gap: 1rem;
-        padding: 1rem;
+        gap: var(--space-md);
+        padding: var(--space-md);
     }
     input {
         display: none;
     }
     .error {
-        margin-top: 0.75rem;
+        margin-block-start: var(--space-sm);
     }
     .ImageUpload.banner {
         grid-template-areas: "image";
@@ -266,7 +287,6 @@
         overflow: hidden;
         object-fit: cover;
         height: 15rem;
-        aspect-ratio: initial !important;
     }
     .ImageUpload.banner .Image img {
         object-fit: cover;
@@ -276,28 +296,28 @@
         grid-area: image;
         flex-direction: column;
         justify-content: center;
-        padding: 1rem;
+        padding: var(--space-md);
     }
     .ImageUpload.banner:hover .ImageUploadActions {
-        background: var(--bg-overlay);
+        background: var(--scrim-background);
     }
     .ImageUploadActions {
         display: grid;
         grid-template-columns: 1fr 1fr;
-        gap: 0.75rem;
+        gap: var(--space-sm);
         align-items: start;
     }
     @container (min-width: 320px) {
         .ImageUpload:not(.banner) {
             grid-template-columns: minmax(auto, var(--max-image-width)) 1fr;
-            gap: 2rem;
+            gap: var(--space-xl);
         }
         .ImageUpload.banner .ImageUploadActions {
-            padding: 3rem;
+            padding: var(--space-xxl);
         }
         .ImageUploadActions {
             grid-template-columns: 1fr;
-            gap: 1rem;
+            gap: var(--space-md);
         }
     }
 </style>

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

@@ -1,18 +1,32 @@
 import { type Snippet } from 'svelte';
 type $$ComponentProps = {
+    /** Current image source URL. */
     src?: string | null;
+    /** The presigned URL to upload the image to. */
     uploadUrl: string;
+    /** The form field name for the resulting URL value. */
     name: string;
+    /** HTML id for the file input. */
     id?: string;
+    /** Title used in the alt text of the preview image. */
     title?: string;
+    /** Label for the upload button. */
     button: string;
+    /** Maximum file size in bytes before compression is applied. */
     maxSize?: number;
+    /** Maximum compressed file size in megabytes. */
     compressSize?: number;
+    /** Maximum compressed image width in pixels. */
     compressMaxWidth?: number;
+    /** Accepted MIME types for the file input. */
     accept?: string;
+    /** Whether a remove button is shown. */
     removable?: boolean;
+    /** Display shape of the image preview. */
     shape?: 'square' | 'circle' | 'banner';
+    /** Callback invoked with the selected file before upload. */
     onFile?: (file: File) => void;
+    /** Optional additional content rendered below the actions. */
     children?: Snippet;
 };
 declare const ImageUpload: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/form/Input.svelte

@@ -14,9 +14,19 @@
 	import { ZodType } from "zod";
 	import FieldContent from "./FieldContent.svelte";
 	import { on } from "svelte/events";
-	import { fade } from "svelte/transition";
-	import Theme from "../components/Theme.svelte";
 
+    /**
+     * @description
+     * A versatile input component supporting all standard HTML input types. Integrates
+     * with the Lutra form system for validation, error display and field state tracking.
+     * Supports prefix/suffix content, copy-to-clipboard, password visibility toggle,
+     * range slider with value tooltip, and auto-growing file inputs.
+     *
+     * @example
+     * <Input name="email" type="email" label="Email" placeholder="you@example.com" />
+     * <Input name="age" type="range" min={0} max={100} unit="years" label="Age" />
+     * <Input name="token" type="password" viewable copyable label="API Token" />
+     */
     let {
         alt,
         autofocus,
@@ -116,7 +126,6 @@
         maxlength?: number;
         /** The minimum number of characters (as UTF-16 code units) the user can enter into the input. Valid for text, search, url, tel, email, and password. */
         minlength?: number;
-        /** Allow multiple f
         /** The maximum value of the input element. Valid for date, month, week, time, datetime-local, number, and range. */
         max?: number
         /** The minimum value of the input element. Valid for date, month, week, time, datetime-local, number, and range. */
@@ -352,17 +361,12 @@
                 {/if}
                 <div class="RangeInput">
                     {@render input()}
-                    {#if focused && min?.toString().length && max?.toString().length}
-                        <Theme theme="invert">
-                            <div
-                                class="RangeValue"
-                                in:fade={{ duration: 100 }}
-                                out:fade={{ duration: 100 }}
-                                style="left: {rangeValueLeft}%"
-                            >
-                                {value}{unit}
-                            </div>
-                        </Theme>
+                    {#if min?.toString().length && max?.toString().length}
+                        <span class="RangeTooltipAnchor" style="left: {rangeValueLeft}%">
+                            <Tooltip tip="{value}{unit}" open={focused}>
+                                <span></span>
+                            </Tooltip>
+                        </span>
                     {/if}
                 </div>
                 {#if max?.toString().length}
@@ -396,7 +400,8 @@
     input:not([type="checkbox"]):not([type="radio"]) {
         border: none;
         flex-grow: 1;
-        flex-shrink: 0;
+        flex-shrink: 1;
+        min-width: 0;
     }
     input:not([type="checkbox"]):not([type="radio"]):focus-visible,
     input:not([type="checkbox"]):not([type="radio"]):active {
@@ -404,29 +409,56 @@
     }
     input[type="range"] {
         display: block;
+        appearance: none;
+        background: transparent;
+    }
+    input[type="range"]::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 1rem;
+        height: 1rem;
+        border-radius: 50%;
+        background: var(--focus-ring-color);
+        border: none;
+        margin-top: calc((0.25rem - 1rem) / 2);
+    }
+    input[type="range"]::-moz-range-thumb {
+        width: 1rem;
+        height: 1rem;
+        border-radius: 50%;
+        background: var(--focus-ring-color);
+        border: none;
     }
     .Range {
         display: flex;
-        gap: 0.5em;
+        gap: var(--space-xs);
         align-items: center;
     }
-    .RangeValue {
+    .RangeTooltipAnchor {
         position: absolute;
-        top: 0;
-        font-size: max(0.85em, 9px);
-        color: var(--text-subtle);
-        background: var(--bg-app);
-        padding: 0.15em 0.35em;
-        border-radius: var(--border-radius);
-        transform: translate(-50%, -125%);
-        border: var(--border);
-        min-inline-size: 1em;
-        box-shadow: 0 0.5rem 1rem var(--shadow);
-        font-weight: 600;
+        top: 50%;
+        width: 0;
+        height: 0;
+        pointer-events: none;
+    }
+    .RangeTooltipAnchor :global(.TooltipContent) {
+        position-area: block-end center;
+        margin-block-end: 0;
+        margin-block-start: var(--tooltip-offset, var(--space-xxs));
+    }
+    input[type="range"]::-webkit-slider-runnable-track {
+        background: var(--border-color-subtle);
+        block-size: 0.25rem;
+        border-radius: var(--border-radius-base);
+    }
+    input[type="range"]::-moz-range-track {
+        background: var(--border-color-subtle);
+        block-size: 0.25rem;
+        border-radius: var(--border-radius-base);
     }
     .Range span {
-        font-size: 0.75em;
-        color: var(--text-subtle);
+        font-size: var(--font-size-xs);
+        color: var(--text-color-p-subtle);
     }
     .RangeInput {
         position: relative;

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

@@ -47,7 +47,6 @@ type $$ComponentProps = {
     maxlength?: number;
     /** The minimum number of characters (as UTF-16 code units) the user can enter into the input. Valid for text, search, url, tel, email, and password. */
     minlength?: number;
-    /** Allow multiple f
     /** The maximum value of the input element. Valid for date, month, week, time, datetime-local, number, and range. */
     max?: number;
     /** The minimum value of the input element. Valid for date, month, week, time, datetime-local, number, and range. */

package/dist/form/InputLength.svelte

@@ -27,16 +27,16 @@
         display: flex;
         justify-content: flex-end;
         align-items: center;
-        font-size: 0.8rem;
-        font-weight: 500;
-        color: var(--text-subtle);
+        font-size: var(--font-size-xs);
+        font-weight: var(--font-weight-normal);
+        color: var(--text-color-p-subtle);
     }
     .InputLength .Length {
         display: flex;
         align-items: center;
-        gap: 0.25rem;
+        gap: var(--space-xxs);
     }
     .InputLength .Length.warn {
-        color: var(--text-color-warn, light-dark(red, red));
+        color: var(--field-color-danger);
     }
 </style>

package/dist/form/Label.svelte

@@ -34,7 +34,7 @@
 </script>
 
 {#if label}
-    <label for={id} class:hasTip={!!tip} class:hasHelp={!!help}>
+    <label for={id}>
         {#if typeof label === 'string'}
             <span>
                 {label} {#if required}<span aria-hidden="true">*</span>{/if}
@@ -64,16 +64,16 @@
         gap: var(--form-label-gap, var(--space-md));
         align-items: center;
     }
-    label.hasTip,
-    label.hasHelp {
+    label:has(.Help),
+    label:has(:global(.ContextTip)) {
         grid-template-columns: 1fr auto;
     }
-    label.hasHelp.hasTip {
+    label:has(.Help):has(:global(.ContextTip)) {
         grid-template-columns: 1fr auto auto;
     }
     label > span > span {
-        font-weight: 600;
-        color: var(--text-color-warn, light-dark(red, red));
+        font-weight: var(--font-weight-medium);
+        color: var(--field-color-danger);
         padding-inline: 0.175em;
     }
     .Help {

package/dist/form/LogoUpload.svelte

@@ -4,6 +4,20 @@
 	import type { Snippet } from "svelte";
 	import StringOrSnippet from "../util/StringOrSnippet.svelte";
 
+    /**
+     * @description
+     * A dual-theme logo upload component that provides side-by-side upload fields for
+     * light and dark theme logos. Each side renders an `ImageUpload` within its
+     * respective `Theme` wrapper so the preview matches the actual display context.
+     *
+     * @example
+     * <LogoUpload
+     *   lightLogoUploadUrl="/api/upload/logo-light"
+     *   darkLogoUploadUrl="/api/upload/logo-dark"
+     *   lightLogoSrc={org.logoLightUrl}
+     *   darkLogoSrc={org.logoDarkUrl}
+     * />
+     */
     let {
         lightLogoInputName = 'logo_light_url',
         darkLogoInputName = 'logo_dark_url',
@@ -77,9 +91,9 @@
 
 <style>
     .LogoUpload {
-        border: var(--border);
+        border: var(--field-border);
         overflow: hidden;
-        border-radius: var(--border-radius);
+        border-radius: var(--border-radius-base);
         margin: 0;
         padding: 0;
         list-style: none;
@@ -88,28 +102,28 @@
         container-type: inline-size;
     }
     .Content {
-        background: var(--bg-app);
+        background: var(--background-main);
     }
     .Info {
-        padding: 1rem 1.5rem;
+        padding: var(--space-md) var(--space-lg);
         display: grid;
         grid-template-columns: 1fr;
-        gap: 1rem;
+        gap: var(--space-md);
     }
     .Content :global(h5) {
-        margin-bottom: 0 !important;
-        padding: 1rem 1rem 1rem 1rem;
+        margin-block-end: 0;
+        padding: var(--space-md);
     }
     .Content :global(.Rows) {
-        padding: 0 1rem 1rem 1rem;
+        padding: 0 var(--space-md) var(--space-md) var(--space-md);
     }
     @container (min-width: 500px) {
         .LogoUpload {
             grid-template-columns: 1fr 1fr;
         }
         .Content :global(h5) {
-            margin-bottom: 0 !important;
-            padding: 1rem 1.5rem;
+            margin-block-end: 0;
+            padding: var(--space-md) var(--space-lg);
         }
     }
 </style>