form-uploader 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Elbeg Darkhanbaatar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,204 @@
-# Temporary Holding Version
+# form-uploader
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+One form for every site: contact fields plus multi-image upload. A framework-agnostic core plus a drop-in `<form-uploader>` custom element. Zero runtime dependencies, ESM only, TypeScript types included.
+
+- Drop-in element works in plain HTML, React, Vue, Svelte, anywhere.
+- Core module is DOM-free, so you can drive your own UI or run it in Node.
+- Validation, file limits, and `FormData` payload building included.
+- Themed with CSS variables, dark-mode aware, keyboard accessible.
+
+## Install
+
+```bash
+npm install form-uploader
+```
+
+## Drop-in element
+
+```html
+<form-uploader id="u" submit-label="Send"></form-uploader>
+<script type="module">
+  import "form-uploader/element";
+
+  const el = document.getElementById("u");
+  el.onSubmit = async ({ formData, values, files }) => {
+    await fetch("/api/upload", { method: "POST", body: formData });
+  };
+</script>
+```
+
+Serve your page over HTTP, since modules do not load from `file://`.
+
+By default the form has Name, Email, and Phone (required) plus Description (optional) and an image picker with previews.
+
+### Handling submit
+
+Two ways, pick one:
+
+```js
+el.onSubmit = async ({ formData, values, files }) => {
+  await fetch("/api/upload", { method: "POST", body: formData });
+};
+
+el.addEventListener("form-submit", (event) => {
+  event.preventDefault();
+  console.log(event.detail.values);
+});
+```
+
+`onSubmit` runs after a valid submit. If you listen for the `form-submit` event (it bubbles and crosses shadow DOM) and call `preventDefault()`, `onSubmit` is skipped. Both receive `{ formData, values, files }`.
+
+### Configuring the element
+
+```js
+import { DEFAULT_FIELDS } from "form-uploader";
+
+el.config = {
+  fields: [...DEFAULT_FIELDS, { name: "company", label: "Company" }],
+  files: { maxFiles: 3 },
+};
+el.reset();
+```
+
+- `el.config` sets fields and files. Setting it resets the form.
+- `el.reset()` clears values, files, and errors.
+- `el.uploader` exposes the core instance below for direct control.
+- The `submit-label` attribute sets the button text (default `"Submit"`).
+
+## React
+
+Custom element props must be assigned, not passed as attributes. Use a ref:
+
+```jsx
+import { useEffect, useRef, useState } from "react";
+import "form-uploader/element";
+import { DEFAULT_FIELDS } from "form-uploader";
+
+export default function ContactForm() {
+  const formRef = useRef(null);
+  const [result, setResult] = useState(null);
+
+  useEffect(() => {
+    const el = formRef.current;
+    if (!el) return;
+    el.config = {
+      fields: [...DEFAULT_FIELDS, { name: "company", label: "Company" }],
+      files: { maxFiles: 3 },
+    };
+    el.onSubmit = async ({ values, files, formData }) => {
+      setResult({ values, files: files.map((file) => file.name) });
+    };
+  }, []);
+
+  return <form-uploader ref={formRef} submit-label="Send" />;
+}
+```
+
+## Core (your own UI)
+
+```js
+import { createFormUploader } from "form-uploader";
+
+const form = createFormUploader();
+form.setValue("email", "ada@example.com");
+form.addFiles(fileInput.files);
+
+const { valid, errors } = form.validate();
+if (valid) {
+  await fetch("/api/upload", { method: "POST", body: form.buildPayload() });
+}
+```
+
+Methods: `setValue(name, value)`, `getValues()`, `getFiles()`, `addFiles(files)`, `removeFile(index)`, `clearFiles()`, `validate()`, `getErrors()`, `buildPayload()`, `reset()`. Also exposed: `fields`, `filesEnabled`, `fileConfig`.
+
+`addFiles` accepts an array or a `FileList` and returns `{ added, rejected }`, where each rejection carries a human-readable `reason`.
+
+## Fields and files
+
+```js
+const form = createFormUploader({
+  fields: [
+    { name: "name", label: "Name", required: true },
+    { name: "company", label: "Company", placeholder: "Acme Inc." },
+    {
+      name: "age",
+      label: "Age",
+      validate: (value) => (Number(value) >= 18 ? null : "Must be 18+."),
+    },
+  ],
+  files: { maxFiles: 3, maxSize: 2 * 1024 * 1024, accept: "image/*", required: true },
+});
+```
+
+Field options:
+
+- `name` (required), `label`, `type` (`text`, `email`, `tel`, `textarea`; default `text`)
+- `required` (default `false`), `placeholder`
+- `minLength`, `maxLength`, counted in characters
+- `validate(value)` returning an error string or `null`
+
+File options:
+
+- `fieldName` (default `"images"`), the `FormData` key files are appended under
+- `maxFiles` (default `5`), `maxSize` in bytes per file (default 5 MB)
+- `accept` (default `"image/*"`; empty string allows everything)
+- `required` (default `false`)
+- Pass `files: false` to disable uploads entirely
+
+Validation order per field is required, email format, length, then your `validate`, first failure wins. Email is checked only when non-empty. Phone has no format check since formats vary, so add `validate` or `minLength` if you need one.
+
+The payload is a `FormData` with one entry per field plus each file under `fieldName`, ready to `POST` to your backend.
+
+## Styling
+
+The element inherits your page font and adapts to light and dark mode automatically. Override any variable to theme it:
+
+```css
+form-uploader {
+  --fu-accent: #7c3aed;
+  --fu-radius: 14px;
+}
+```
+
+| Variable               | Default                 | Used for                      |
+| ---------------------- | ----------------------- | ----------------------------- |
+| `--fu-accent`          | `#2563eb`               | Submit button, focus, accents |
+| `--fu-accent-hover`    | `#1d4ed8`               | Submit button hover           |
+| `--fu-accent-contrast` | `#ffffff`               | Text on the accent color      |
+| `--fu-text`            | `#1c1917`               | Labels and input text         |
+| `--fu-muted`           | `#57534e`               | Hints, placeholders, captions |
+| `--fu-border`          | `#d6d3d1`               | Input and card borders        |
+| `--fu-surface`         | `#ffffff`               | Input and card background     |
+| `--fu-surface-soft`    | `#f5f5f4`               | Dropzone and image backdrop   |
+| `--fu-error`           | `#b91c1c`               | Error text and invalid rings  |
+| `--fu-ring`            | `rgb(37 99 235 / 0.25)` | Focus ring                    |
+| `--fu-radius`          | `10px`                  | Inputs, dropzone, button      |
+| `--fu-radius-sm`       | `8px`                   | Preview cards                 |
+
+For deeper restyling, every part is exposed via `::part`: `form`, `field`, `label`, `input`, `error`, `dropzone`, `dropzone-title`, `dropzone-hint`, `file-input`, `previews`, `preview`, `remove`, `submit`.
+
+```css
+form-uploader::part(submit) {
+  width: 100%;
+}
+```
+
+Focus rings, invalid states, and `prefers-reduced-motion` are handled inside the shadow DOM.
+
+## Demo and example app
+
+- `demo/index.html`: plain-HTML demo. Build first (`npm run build`), serve the repo folder with any static server, and open it.
+- `example/`: Next.js app using the package from local source on port 3000. See `example/README.md`.
+
+## Development
+
+```bash
+npm install
+npm test           # build + test suite
+npm run format     # format everything with Prettier
+npm run format:check
+```
+
+## License
+
+MIT

package/dist/core.d.ts

@@ -0,0 +1,70 @@
+export type FieldType = "text" | "email" | "tel" | "textarea";
+export interface FieldConfig {
+    name: string;
+    label?: string;
+    type?: FieldType;
+    required?: boolean;
+    placeholder?: string;
+    minLength?: number;
+    maxLength?: number;
+    validate?: (value: string) => string | null;
+}
+export interface FileUploadConfig {
+    fieldName?: string;
+    maxFiles?: number;
+    maxSize?: number;
+    accept?: string;
+    required?: boolean;
+}
+export interface FormUploaderConfig {
+    fields?: FieldConfig[];
+    files?: FileUploadConfig | false;
+}
+export interface NormalizedField extends Omit<FieldConfig, "type" | "required"> {
+    type: FieldType;
+    required: boolean;
+}
+export interface ResolvedFileUploadConfig {
+    fieldName: string;
+    maxFiles: number;
+    maxSize: number;
+    accept: string;
+    required: boolean;
+}
+export interface FileRejection {
+    file: File;
+    reason: string;
+}
+export interface AddFilesResult {
+    added: File[];
+    rejected: FileRejection[];
+}
+export type ValidationErrors = Record<string, string>;
+export interface ValidationResult {
+    valid: boolean;
+    errors: ValidationErrors;
+}
+export interface FormSubmitDetail {
+    formData: FormData;
+    values: Record<string, string>;
+    files: File[];
+}
+export declare const DEFAULT_FIELDS: FieldConfig[];
+export declare const DEFAULT_FILE_CONFIG: ResolvedFileUploadConfig;
+export declare const FILES_ERROR_KEY = "files";
+export interface FormUploader {
+    readonly fields: NormalizedField[];
+    readonly filesEnabled: boolean;
+    readonly fileConfig: ResolvedFileUploadConfig;
+    setValue(name: string, value: string): boolean;
+    getValues(): Record<string, string>;
+    getFiles(): File[];
+    addFiles(files: File[] | FileList): AddFilesResult;
+    removeFile(index: number): boolean;
+    clearFiles(): void;
+    validate(): ValidationResult;
+    getErrors(): ValidationErrors;
+    buildPayload(): FormData;
+    reset(): void;
+}
+export declare function createFormUploader(config?: FormUploaderConfig): FormUploader;

package/dist/core.js

@@ -0,0 +1,162 @@
+export const DEFAULT_FIELDS = [
+    { name: "name", label: "Name", type: "text", required: true },
+    { name: "email", label: "Email", type: "email", required: true },
+    { name: "phone", label: "Phone", type: "tel", required: true },
+    { name: "description", label: "Description", type: "textarea", required: false },
+];
+for (const field of DEFAULT_FIELDS)
+    Object.freeze(field);
+Object.freeze(DEFAULT_FIELDS);
+export const DEFAULT_FILE_CONFIG = {
+    fieldName: "images",
+    maxFiles: 5,
+    maxSize: 5 * 1024 * 1024,
+    accept: "image/*",
+    required: false,
+};
+export const FILES_ERROR_KEY = "files";
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+export function createFormUploader(config = {}) {
+    const fields = (config.fields ?? DEFAULT_FIELDS).map((field) => ({
+        ...field,
+        type: field.type ?? "text",
+        required: field.required ?? false,
+    }));
+    const filesEnabled = config.files !== false;
+    const fileConfig = {
+        ...DEFAULT_FILE_CONFIG,
+        ...(config.files === false || config.files === undefined ? {} : config.files),
+    };
+    let values = {};
+    let files = [];
+    let errors = {};
+    const resetValues = () => {
+        values = {};
+        for (const field of fields)
+            values[field.name] = "";
+    };
+    resetValues();
+    const findField = (name) => fields.find((field) => field.name === name);
+    function matchesAccept(file) {
+        const accept = fileConfig.accept.trim();
+        if (accept === "")
+            return true;
+        const type = file.type.toLowerCase();
+        const name = file.name.toLowerCase();
+        return accept
+            .split(",")
+            .map((token) => token.trim().toLowerCase())
+            .filter(Boolean)
+            .some((token) => {
+            if (token.endsWith("/*"))
+                return type.startsWith(token.slice(0, -1));
+            if (token.startsWith("."))
+                return name.endsWith(token);
+            return type === token;
+        });
+    }
+    function setValue(name, value) {
+        if (!findField(name))
+            return false;
+        values[name] = value;
+        return true;
+    }
+    function addFiles(input) {
+        const incoming = Array.from(input);
+        const added = [];
+        const rejected = [];
+        if (!filesEnabled) {
+            for (const file of incoming) {
+                rejected.push({ file, reason: "File uploads are disabled." });
+            }
+            return { added, rejected };
+        }
+        for (const file of incoming) {
+            if (files.length + added.length >= fileConfig.maxFiles) {
+                rejected.push({ file, reason: `Only ${fileConfig.maxFiles} file(s) allowed.` });
+                continue;
+            }
+            if (file.size > fileConfig.maxSize) {
+                rejected.push({ file, reason: `"${file.name}" exceeds the size limit.` });
+                continue;
+            }
+            if (!matchesAccept(file)) {
+                rejected.push({ file, reason: `"${file.name}" is not an accepted file type.` });
+                continue;
+            }
+            added.push(file);
+        }
+        files = files.concat(added);
+        return { added, rejected };
+    }
+    function removeFile(index) {
+        if (index < 0 || index >= files.length)
+            return false;
+        files = files.slice(0, index).concat(files.slice(index + 1));
+        return true;
+    }
+    function validateField(field, value) {
+        const label = field.label || field.name;
+        if (field.required && value.trim() === "")
+            return `${label} is required.`;
+        if (field.type === "email" && value.trim() !== "" && !EMAIL_PATTERN.test(value.trim())) {
+            return "Enter a valid email address.";
+        }
+        if (field.minLength !== undefined && value.length < field.minLength) {
+            return `${label} must be at least ${field.minLength} characters.`;
+        }
+        if (field.maxLength !== undefined && value.length > field.maxLength) {
+            return `${label} must be at most ${field.maxLength} characters.`;
+        }
+        if (field.validate)
+            return field.validate(value);
+        return null;
+    }
+    function validate() {
+        const next = {};
+        for (const field of fields) {
+            const message = validateField(field, values[field.name] ?? "");
+            if (message)
+                next[field.name] = message;
+        }
+        if (filesEnabled && fileConfig.required && files.length === 0) {
+            next[FILES_ERROR_KEY] = "At least one file is required.";
+        }
+        errors = next;
+        return { valid: Object.keys(next).length === 0, errors: { ...next } };
+    }
+    function buildPayload() {
+        const formData = new FormData();
+        for (const field of fields) {
+            formData.append(field.name, values[field.name] ?? "");
+        }
+        if (filesEnabled) {
+            for (const file of files) {
+                formData.append(fileConfig.fieldName, file);
+            }
+        }
+        return formData;
+    }
+    function reset() {
+        resetValues();
+        files = [];
+        errors = {};
+    }
+    return {
+        fields,
+        filesEnabled,
+        fileConfig,
+        setValue,
+        getValues: () => ({ ...values }),
+        getFiles: () => [...files],
+        addFiles,
+        removeFile,
+        clearFiles: () => {
+            files = [];
+        },
+        validate,
+        getErrors: () => ({ ...errors }),
+        buildPayload,
+        reset,
+    };
+}

package/dist/element.d.ts

@@ -0,0 +1,30 @@
+import { type FormSubmitDetail, type FormUploader, type FormUploaderConfig } from "./core.js";
+export declare const ELEMENT_NAME = "form-uploader";
+export declare const SUBMIT_EVENT = "form-submit";
+declare const BaseElement: typeof HTMLElement;
+export declare class FormUploaderElement extends BaseElement {
+    private uploaderInstance;
+    private elementConfig;
+    private previewUrls;
+    private fileNotice;
+    onSubmit?: (detail: FormSubmitDetail) => void | Promise<void>;
+    static get observedAttributes(): string[];
+    get config(): FormUploaderConfig;
+    set config(next: FormUploaderConfig);
+    get uploader(): FormUploader;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    reset(): void;
+    private get submitLabel();
+    private render;
+    private handleSubmit;
+    private syncPreviews;
+    private revokePreviews;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "form-uploader": FormUploaderElement;
+    }
+}
+export {};

package/dist/element.js

@@ -0,0 +1,250 @@
+import { FILES_ERROR_KEY, createFormUploader, } from "./core.js";
+export const ELEMENT_NAME = "form-uploader";
+export const SUBMIT_EVENT = "form-submit";
+const BaseElement = globalThis.HTMLElement ??
+    class {
+    };
+function escapeHtml(value) {
+    return value
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;");
+}
+function formatBytes(bytes) {
+    if (bytes >= 1024 * 1024)
+        return `${Math.round(bytes / (1024 * 1024))} MB`;
+    if (bytes >= 1024)
+        return `${Math.round(bytes / 1024)} KB`;
+    return `${bytes} B`;
+}
+const STYLES = [
+    ":host { display: block; font: inherit; color-scheme: light dark; }",
+    ":host {",
+    "  --fu-accent: #2563eb;",
+    "  --fu-accent-hover: #1d4ed8;",
+    "  --fu-accent-contrast: #ffffff;",
+    "  --fu-text: #1c1917;",
+    "  --fu-muted: #57534e;",
+    "  --fu-border: #d6d3d1;",
+    "  --fu-surface: #ffffff;",
+    "  --fu-surface-soft: #f5f5f4;",
+    "  --fu-error: #b91c1c;",
+    "  --fu-ring: rgb(37 99 235 / 0.25);",
+    "  --fu-radius: 10px;",
+    "  --fu-radius-sm: 8px;",
+    "}",
+    "@media (prefers-color-scheme: dark) {",
+    "  :host {",
+    "    --fu-text: #e7e5e4;",
+    "    --fu-muted: #a8a29e;",
+    "    --fu-border: #44403c;",
+    "    --fu-surface: #1c1917;",
+    "    --fu-surface-soft: #292524;",
+    "    --fu-error: #f87171;",
+    "    --fu-ring: rgb(96 165 250 / 0.35);",
+    "  }",
+    "}",
+    "form { display: grid; gap: 1rem; color: var(--fu-text); }",
+    ".field { min-width: 0; }",
+    ".field > label:not(.dropzone) { display: grid; gap: 0.375rem; font-size: 0.875rem; font-weight: 500; }",
+    "input, textarea { font: inherit; color: var(--fu-text); background: var(--fu-surface); border: 1px solid var(--fu-border); border-radius: var(--fu-radius); padding: 0.625rem 0.75rem; width: 100%; box-sizing: border-box; transition: border-color 0.15s ease, box-shadow 0.15s ease; }",
+    "input::placeholder, textarea::placeholder { color: var(--fu-muted); opacity: 1; }",
+    "input:focus-visible, textarea:focus-visible { outline: none; border-color: var(--fu-accent); box-shadow: 0 0 0 3px var(--fu-ring); }",
+    "input[aria-invalid='true'], textarea[aria-invalid='true'] { border-color: var(--fu-error); }",
+    "input[aria-invalid='true']:focus-visible, textarea[aria-invalid='true']:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fu-error) 25%, transparent); }",
+    "textarea { min-height: 6rem; resize: vertical; }",
+    ".error { color: var(--fu-error); font-size: 0.8125rem; margin: 0.375rem 0 0; }",
+    ".dropzone { position: relative; display: grid; justify-items: center; gap: 0.375rem; padding: 1.5rem 1rem; border: 1.5px dashed var(--fu-border); border-radius: var(--fu-radius); background: var(--fu-surface-soft); cursor: pointer; text-align: center; transition: border-color 0.15s ease, box-shadow 0.15s ease; }",
+    ".dropzone:hover { border-color: var(--fu-accent); }",
+    ".dropzone:focus-within { outline: none; border-color: var(--fu-accent); box-shadow: 0 0 0 3px var(--fu-ring); }",
+    ".dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }",
+    ".dropzone-mark { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: var(--fu-accent); color: var(--fu-accent-contrast); font-size: 1.5rem; font-weight: 300; line-height: 1; }",
+    ".dropzone-title { font-size: 0.875rem; font-weight: 600; }",
+    ".dropzone-hint { font-size: 0.8125rem; font-weight: 400; color: var(--fu-muted); }",
+    ".previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: 0.625rem; margin-top: 0.625rem; }",
+    ".preview { margin: 0; position: relative; border: 1px solid var(--fu-border); border-radius: var(--fu-radius-sm); overflow: hidden; background: var(--fu-surface); }",
+    ".preview img { width: 100%; height: 5.25rem; object-fit: cover; display: block; background: var(--fu-surface-soft); }",
+    ".preview figcaption { font-size: 0.7rem; padding: 0.25rem 0.375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fu-muted); }",
+    ".preview button { position: absolute; top: 0.25rem; right: 0.25rem; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; padding: 0; border: none; border-radius: 999px; background: rgb(0 0 0 / 0.6); color: #ffffff; font-size: 1rem; line-height: 1; cursor: pointer; }",
+    ".preview button:hover { background: rgb(0 0 0 / 0.8); }",
+    "button[type='submit'] { justify-self: start; font: inherit; font-weight: 600; color: var(--fu-accent-contrast); background: var(--fu-accent); border: 1px solid transparent; border-radius: var(--fu-radius); padding: 0.625rem 1.25rem; cursor: pointer; transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease; }",
+    "button[type='submit']:hover { background: var(--fu-accent-hover); }",
+    "button[type='submit']:active { transform: scale(0.98); }",
+    "button[type='submit']:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--fu-ring); }",
+    "@media (prefers-reduced-motion: reduce) {",
+    "  *, *::before, *::after { transition: none; }",
+    "}",
+].join("\n");
+export class FormUploaderElement extends BaseElement {
+    constructor() {
+        super(...arguments);
+        this.uploaderInstance = createFormUploader({});
+        this.elementConfig = {};
+        this.previewUrls = new Map();
+        this.fileNotice = null;
+    }
+    static get observedAttributes() {
+        return ["submit-label"];
+    }
+    get config() {
+        return this.elementConfig;
+    }
+    set config(next) {
+        this.elementConfig = next ?? {};
+        this.uploaderInstance = createFormUploader(this.elementConfig);
+        this.fileNotice = null;
+        this.revokePreviews();
+        this.render();
+    }
+    get uploader() {
+        return this.uploaderInstance;
+    }
+    connectedCallback() {
+        this.render();
+    }
+    disconnectedCallback() {
+        this.revokePreviews();
+    }
+    attributeChangedCallback() {
+        this.render();
+    }
+    reset() {
+        this.uploaderInstance.reset();
+        this.fileNotice = null;
+        this.render();
+    }
+    get submitLabel() {
+        const host = this;
+        if (typeof host.getAttribute !== "function")
+            return "Submit";
+        return host.getAttribute("submit-label") || "Submit";
+    }
+    render() {
+        const host = this;
+        if (typeof host.attachShadow !== "function")
+            return;
+        const shadow = host.shadowRoot ?? host.attachShadow({ mode: "open" });
+        this.syncPreviews();
+        const values = this.uploaderInstance.getValues();
+        const errors = this.uploaderInstance.getErrors();
+        const files = this.uploaderInstance.getFiles();
+        const fileConfig = this.uploaderInstance.fileConfig;
+        const fieldsHtml = this.uploaderInstance.fields
+            .map((field) => {
+            const value = escapeHtml(values[field.name] ?? "");
+            const error = errors[field.name]
+                ? `<p class="error" part="error">${escapeHtml(errors[field.name])}</p>`
+                : "";
+            const label = escapeHtml(field.label || field.name);
+            const placeholder = field.placeholder
+                ? ` placeholder="${escapeHtml(field.placeholder)}"`
+                : "";
+            const required = field.required ? " required" : "";
+            const safeName = escapeHtml(field.name);
+            const invalid = errors[field.name] ? ` aria-invalid="true"` : "";
+            const control = field.type === "textarea"
+                ? `<textarea part="input" data-field="${safeName}" rows="4"${placeholder}${required}${invalid}>${value}</textarea>`
+                : `<input part="input" data-field="${safeName}" type="${field.type}" value="${value}"${placeholder}${required}${invalid} />`;
+            return `<div class="field" part="field"><label part="label"><span>${label}</span>${control}</label>${error}</div>`;
+        })
+            .join("");
+        const fileError = errors[FILES_ERROR_KEY] ?? this.fileNotice;
+        const dropzoneTitle = fileConfig.accept === "image/*" ? "Choose images" : "Choose files";
+        const acceptLabel = fileConfig.accept === "image/*" ? "Images" : fileConfig.accept || "Files";
+        const dropzoneHint = `${acceptLabel} up to ${formatBytes(fileConfig.maxSize)} each, max ${fileConfig.maxFiles} ${fileConfig.maxFiles === 1 ? "file" : "files"}`;
+        const filesHtml = !this.uploaderInstance.filesEnabled
+            ? ""
+            : `<div class="field" part="field">` +
+                `<label class="dropzone" part="label dropzone">` +
+                `<span class="dropzone-mark" aria-hidden="true">+</span>` +
+                `<span class="dropzone-title" part="dropzone-title">${dropzoneTitle}</span>` +
+                `<span class="dropzone-hint" part="dropzone-hint">${escapeHtml(dropzoneHint)}</span>` +
+                `<input part="file-input" data-files type="file" multiple accept="${escapeHtml(fileConfig.accept)}" />` +
+                `</label>` +
+                (fileError ? `<p class="error" part="error">${escapeHtml(fileError)}</p>` : "") +
+                `<div class="previews" part="previews">${files
+                    .map((file, index) => `<figure class="preview" part="preview">` +
+                    `<img src="${this.previewUrls.get(file) ?? ""}" alt="${escapeHtml(file.name)}" />` +
+                    `<figcaption>${escapeHtml(file.name)}</figcaption>` +
+                    `<button type="button" part="remove" data-remove="${index}" aria-label="Remove ${escapeHtml(file.name)}">×</button>` +
+                    `</figure>`)
+                    .join("")}</div></div>`;
+        shadow.innerHTML =
+            `<style>${STYLES}</style>` +
+                `<form part="form" novalidate>${fieldsHtml}${filesHtml}` +
+                `<button type="submit" part="submit">${escapeHtml(this.submitLabel)}</button></form>`;
+        shadow.querySelector("form")?.addEventListener("submit", (event) => {
+            event.preventDefault();
+            void this.handleSubmit();
+        });
+        shadow.querySelectorAll("[data-field]").forEach((el) => {
+            el.addEventListener("input", () => {
+                const name = el.dataset.field;
+                if (name)
+                    this.uploaderInstance.setValue(name, el.value);
+            });
+        });
+        const fileInput = shadow.querySelector("[data-files]");
+        fileInput?.addEventListener("change", () => {
+            if (fileInput.files) {
+                const result = this.uploaderInstance.addFiles(fileInput.files);
+                this.fileNotice =
+                    result.rejected.length > 0
+                        ? result.rejected.map((rejection) => rejection.reason).join(" ")
+                        : null;
+            }
+            fileInput.value = "";
+            this.render();
+        });
+        shadow.querySelectorAll("[data-remove]").forEach((button) => {
+            button.addEventListener("click", () => {
+                this.uploaderInstance.removeFile(Number(button.dataset.remove));
+                this.fileNotice = null;
+                this.render();
+            });
+        });
+    }
+    async handleSubmit() {
+        this.fileNotice = null;
+        const { valid } = this.uploaderInstance.validate();
+        this.render();
+        if (!valid)
+            return;
+        const detail = {
+            formData: this.uploaderInstance.buildPayload(),
+            values: this.uploaderInstance.getValues(),
+            files: this.uploaderInstance.getFiles(),
+        };
+        const host = this;
+        const cancelled = !host.dispatchEvent(new CustomEvent(SUBMIT_EVENT, { detail, bubbles: true, composed: true }));
+        if (!cancelled)
+            await this.onSubmit?.(detail);
+    }
+    syncPreviews() {
+        const files = this.uploaderInstance.getFiles();
+        for (const [file, url] of this.previewUrls) {
+            if (!files.includes(file)) {
+                URL.revokeObjectURL(url);
+                this.previewUrls.delete(file);
+            }
+        }
+        if (typeof URL === "undefined" || typeof URL.createObjectURL !== "function")
+            return;
+        for (const file of files) {
+            if (!this.previewUrls.has(file))
+                this.previewUrls.set(file, URL.createObjectURL(file));
+        }
+    }
+    revokePreviews() {
+        for (const url of this.previewUrls.values()) {
+            if (typeof URL !== "undefined" && typeof URL.revokeObjectURL === "function") {
+                URL.revokeObjectURL(url);
+            }
+        }
+        this.previewUrls.clear();
+    }
+}
+if (typeof customElements !== "undefined" && !customElements.get(ELEMENT_NAME)) {
+    customElements.define(ELEMENT_NAME, FormUploaderElement);
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from "./core.js";

package/dist/index.js

@@ -0,0 +1 @@
+export * from "./core.js";

package/package.json

@@ -1,6 +1,51 @@
 {
   "name": "form-uploader",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Reusable contact + multi-image upload form: framework-agnostic core and a drop-in custom element for any website.",
+  "author": "Elbeg Darkhanbaatar",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Ebetheone/package.git"
+  },
+  "keywords": [
+    "form",
+    "contact-form",
+    "file-upload",
+    "image-upload",
+    "uploader",
+    "web-component",
+    "custom-element",
+    "form-validation",
+    "framework-agnostic"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./element": {
+      "types": "./dist/element.d.ts",
+      "default": "./dist/element.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "test": "npm run build && node --test test/",
+    "prepack": "npm run build",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "prettier": "^3.9.10",
+    "typescript": "^7.0.2"
+  }
+}