@usefillo/dom 0.8.0 → 0.10.0

package/README.md

@@ -1,9 +1,23 @@
-# @usefillo/dom
+<p align="center">
+  <a href="https://fillo.so">
+    <img src="https://fillo.so/brand/readme-banner.png" alt="Fillo — forms inside your product, with your UI." />
+  </a>
+</p>
+
+<p align="center">
+  <a href="https://fillo.so/docs">Docs</a> ·
+  <a href="https://fillo.so/guides">Guides</a> ·
+  <a href="https://fillo.so/examples">Examples</a> ·
+  <a href="https://fillo.so/changelog">Changelog</a>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@usefillo/dom"><img src="https://img.shields.io/npm/v/@usefillo/dom" alt="npm version" /></a>
+  <img src="https://img.shields.io/npm/l/@usefillo/dom" alt="MIT license" />
+</p>
 
 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
 ```
@@ -51,14 +65,9 @@ Or drop it in with a single script tag — the bundle exposes a global `Fillo`:
 </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 `responseLimit: { by: "browser", onRepeat: "keep" }` 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 pieces used by DOM integrations from
-[`@usefillo/core`](https://www.npmjs.com/package/@usefillo/core), including
-`createClient`, `defineForm`, `FilloClient`, `createFormController`, and the
-schema/value types.
+Every rendered part carries `data-*` state attributes (`data-selected`, `data-invalid`, …) for utility CSS, and the default stylesheet is cascade-layered so your own styles win. On Tailwind v3 or reset-heavy sites import `@usefillo/dom/styles.unlayered.css` instead. Styling contract: [fillo.so/docs/styling](https://fillo.so/docs/styling).
 
 ## Links
 
@@ -66,8 +75,3 @@ schema/value types.
 - **Website:** [fillo.so](https://fillo.so)
 
 MIT licensed.
-
-On Tailwind v3 or reset-heavy sites, import `@usefillo/dom/styles.unlayered.css`
-instead — the cascade-layered default loses to unlayered CSS by design.
-State is exposed as `data-*` attributes (`data-selected`, `data-invalid`, …)
-for utility CSS.

package/dist/index.d.ts

@@ -62,6 +62,21 @@ interface RenderFormOptions {
     onChange?: (data: ResponseData) => void;
     onSubmitted?: (responseId: string | undefined, data: ResponseData) => void;
     onError?: (error: FilloError) => void;
+    /**
+     * Show the developer chrome on a surface Fillo doesn't detect as local
+     * development — a tunnel, a staging deploy, a production build you're
+     * smoke-testing. COSMETIC ONLY: it renders the dev notices, developer-grade
+     * submit failures, and a visible "Preview" badge, and it never changes
+     * where submissions go or whether they are accepted (test submissions
+     * authenticate with a credential, never a prop).
+     */
+    preview?: boolean;
+    /**
+     * Set false to hide the built-in dev notices (draft/staged/sync/no-client)
+     * when your page provides its own context. The explicit Preview badge and
+     * the production fail-closed states are unaffected.
+     */
+    devNotices?: boolean;
     renderSuccess?: (api: FilloDomApi) => HTMLElement;
     renderError?: (error: FilloError) => HTMLElement;
 }
@@ -107,6 +122,11 @@ declare class FilloFormElement extends HTMLElementBase {
     set theme(value: FormTheme | undefined);
     set initialData(value: ResponseData | undefined);
     private scheduleMount;
+    /** data-preview is on when present UNLESS its value says off ("false"/"0"):
+     *  frameworks stringify booleans onto data-* attributes rather than omitting
+     *  them, and a stringified `false` must never enable dev chrome for real
+     *  respondents. Disable by removing the attribute or setting it to "false". */
+    private previewAttrEnabled;
     private mount;
 }
 declare function registerFilloElement(name?: string): void;