@usefillo/dom 0.3.1 → 0.4.0

package/README.md

@@ -9,10 +9,21 @@ npm i @usefillo/dom
 ```
 
 ```ts
-import { createClient, defineForm, renderForm } from "@usefillo/dom";
+import { renderForm } from "@usefillo/dom";
 import "@usefillo/dom/styles.css"; // optional default theme — or bring your own
 
-const client = createClient({ key: "pk_…" }); // collects responses in Fillo
+renderForm(document.querySelector("#fillo-form"), {
+  formId: "cust-feedback",
+  onSubmitted: (id) => console.log("response", id),
+});
+```
+
+Published `formId` embeds can fetch and submit without a publishable key. Use `createClient({ key })` only when syncing code-defined schemas, or when you need to point the SDK at a custom API origin.
+
+```ts
+import { createClient, defineForm, renderForm } from "@usefillo/dom";
+
+const client = createClient({ key: "pk_…" }); // Settings → Code-defined forms
 const form = defineForm({
   id: "cust-feedback",
   pages: [{ id: "p1", blocks: [
@@ -34,11 +45,16 @@ Or drop it in with a single script tag — the bundle exposes a global `Fillo`:
 <div id="fillo-form"></div>
 <script src="https://unpkg.com/@usefillo/dom/dist/standalone.global.js"></script>
 <script>
+  const client = Fillo.createClient({ key: "pk_…" });
   const form = Fillo.defineForm({ id: "cust-feedback", pages: [/* … */] });
-  Fillo.renderForm(document.querySelector("#fillo-form"), { form });
+  Fillo.renderForm(document.querySelector("#fillo-form"), { form, client });
 </script>
 ```
 
+For tiny feedback widgets, set `settings.submitMode: "auto"` on a select/rating/checkbox/dropdown/linear scale form. The default renderer hides the first submit button, submits after a complete discrete answer, and brings the submit button back if that answer opens a text or upload follow-up. Add `submissionLimit: "once_per_visitor"` for browser-scoped one-response feedback.
+
+The default stylesheet follows system dark mode for unthemed embeds. Pass `theme: { colorScheme: "dark" }` or `"light"` when the host surface is known.
+
 Re-exports the core embedding surface from [`@usefillo/core`](https://www.npmjs.com/package/@usefillo/core) (`createClient`, `FilloClient`, `FormSchema`, validation/logic helpers, …).
 
 ## Links

package/dist/index.d.ts

@@ -26,6 +26,7 @@ interface FieldRenderContext {
     field: Field;
     value: FieldValue;
     error: string | undefined;
+    ids: FilloDomFieldIds;
     api: FilloDomApi;
     setValue: (value: FieldValue, options?: {
         render?: boolean;
@@ -35,6 +36,13 @@ interface FieldRenderContext {
     }>, files: File[]) => Promise<void>;
     uploadProgress?: Map<string, number>;
 }
+interface FilloDomFieldIds {
+    inputId: string;
+    labelId: string;
+    descriptionId: string;
+    errorId: string;
+    name: string;
+}
 type FieldRenderer = (context: FieldRenderContext) => HTMLElement | null;
 interface RenderFormOptions {
     form?: FormSchema | CodeForm;
@@ -50,12 +58,6 @@ interface RenderFormOptions {
     onError?: (error: FilloError) => void;
     renderSuccess?: (api: FilloDomApi) => HTMLElement;
     renderError?: (error: FilloError) => HTMLElement;
-    /**
-     * Show the "Powered by Fillo" badge. Normally resolved from the workspace
-     * plan by the server; removing it on a free workspace violates the Fillo
-     * terms.
-     */
-    poweredBy?: boolean;
 }
 interface FilloDomForm {
     readonly element: HTMLElement;
@@ -97,4 +99,4 @@ declare function registerFilloElement(name?: string): void;
  */
 declare function createFormController(options: FormControllerOptions): FormController;
 
-export { type FieldRenderContext, type FieldRenderer, type FilloDomApi, type FilloDomForm, FilloFormElement, type FormStatus, type RenderFormOptions, createFormController, createFormElement, registerFilloElement, renderForm };
+export { type FieldRenderContext, type FieldRenderer, type FilloDomApi, type FilloDomFieldIds, type FilloDomForm, FilloFormElement, type FormStatus, type RenderFormOptions, createFormController, createFormElement, registerFilloElement, renderForm };