@usefillo/dom 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Fillo
+
+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

@@ -0,0 +1,47 @@
+# @usefillo/dom
+
+Framework-agnostic DOM renderer, web component, and standalone browser bundle for [Fillo](https://fillo.so) — forms that render **inside your own product**, no iframe. Use it with Vue, Svelte, Astro, or plain browser JavaScript.
+
+### 📚 Full documentation → **[fillo.so/docs](https://fillo.so/docs)**
+
+```sh
+npm i @usefillo/dom
+```
+
+```ts
+import { defineForm, renderForm } from "@usefillo/dom";
+import "@usefillo/dom/styles.css"; // optional default theme — or bring your own
+
+const form = defineForm({
+  id: "cust-feedback",
+  pages: [{ id: "p1", blocks: [
+    { id: "email", kind: "email", label: "Work email", required: true },
+    { id: "msg", kind: "long_text", label: "What should we know?" },
+  ] }],
+});
+
+renderForm(document.querySelector("#fillo-form"), {
+  form,
+  onSubmit: async (data) => console.log(data),
+});
+```
+
+Or drop it in with a single script tag — the bundle exposes a global `Fillo`:
+
+```html
+<div id="fillo-form"></div>
+<script src="https://unpkg.com/@usefillo/dom/dist/standalone.global.js"></script>
+<script>
+  const form = Fillo.defineForm({ id: "cust-feedback", pages: [/* … */] });
+  Fillo.renderForm(document.querySelector("#fillo-form"), { form });
+</script>
+```
+
+Re-exports the core embedding surface from [`@usefillo/core`](https://www.npmjs.com/package/@usefillo/core) (`createClient`, `FilloClient`, `FormSchema`, validation/logic helpers, …).
+
+## Links
+
+- **Docs:** [fillo.so/docs](https://fillo.so/docs)
+- **Website:** [fillo.so](https://fillo.so)
+
+MIT licensed.

package/dist/index.d.ts

@@ -0,0 +1,87 @@
+import { Field, FieldValue, FormSchema, FilloClient, ResponseData, FormPage, Block, CodeForm, FormTheme, FieldKind, FilloError } from '@usefillo/core';
+export { CodeForm, Field, FieldKind, FieldValue, FileValue, FilloClient, FilloClientOptions, FilloError, FormController, FormControllerOptions, FormControllerState, FormSchema, FormTheme, ResponseData, createClient, createFormController, defineForm } from '@usefillo/core';
+
+type FormStatus = "loading" | "idle" | "submitting" | "submitted" | "error" | "closed";
+interface FilloDomApi {
+    form: FormSchema;
+    formId?: string;
+    client?: FilloClient;
+    data: ResponseData;
+    errors: Record<string, string>;
+    status: FormStatus;
+    pageIndex: number;
+    pageCount: number;
+    page: FormPage;
+    blocks: Block[];
+    isFirstPage: boolean;
+    isLastPage: boolean;
+    setValue: (fieldId: string, value: FieldValue, options?: {
+        render?: boolean;
+    }) => void;
+    next: () => void;
+    back: () => void;
+    submit: () => Promise<void>;
+}
+interface FieldRenderContext {
+    field: Field;
+    value: FieldValue;
+    error: string | undefined;
+    api: FilloDomApi;
+    setValue: (value: FieldValue, options?: {
+        render?: boolean;
+    }) => void;
+    uploadFiles?: (field: Extract<Field, {
+        kind: "file_upload";
+    }>, files: File[]) => Promise<void>;
+    uploadProgress?: Map<string, number>;
+}
+type FieldRenderer = (context: FieldRenderContext) => HTMLElement | null;
+interface RenderFormOptions {
+    form?: FormSchema | CodeForm;
+    client?: FilloClient;
+    formId?: string;
+    theme?: FormTheme;
+    initialData?: ResponseData;
+    className?: string;
+    components?: Partial<Record<FieldKind, FieldRenderer>>;
+    customComponents?: Record<string, FieldRenderer>;
+    onChange?: (data: ResponseData) => void;
+    onSubmitted?: (responseId: string | undefined, data: ResponseData) => void;
+    onSubmit?: (data: ResponseData) => Promise<void> | void;
+    onError?: (error: FilloError) => void;
+    renderSuccess?: (api: FilloDomApi) => HTMLElement;
+    renderError?: (error: FilloError) => HTMLElement;
+}
+interface FilloDomForm {
+    readonly element: HTMLElement;
+    readonly status: FormStatus;
+    readonly data: ResponseData;
+    readonly form: FormSchema | null;
+    setValue(fieldId: string, value: FieldValue): void;
+    next(): void;
+    back(): void;
+    submit(): Promise<void>;
+    destroy(): void;
+}
+declare function renderForm(target: HTMLElement | string, options: RenderFormOptions): FilloDomForm;
+declare function createFormElement(options: RenderFormOptions): HTMLElement;
+declare class FilloFormElement extends HTMLElement {
+    private instance;
+    private assignedForm;
+    private assignedClient;
+    private assignedTheme;
+    private assignedInitialData;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    set form(value: FormSchema | CodeForm | undefined);
+    get form(): FormSchema | CodeForm | undefined;
+    set client(value: FilloClient | undefined);
+    set theme(value: FormTheme | undefined);
+    set initialData(value: ResponseData | undefined);
+    private mount;
+}
+declare function registerFilloElement(name?: string): void;
+
+export { type FieldRenderContext, type FieldRenderer, type FilloDomApi, type FilloDomForm, FilloFormElement, type FormStatus, type RenderFormOptions, createFormElement, registerFilloElement, renderForm };