@usefillo/dom 0.17.0 → 0.19.0

package/README.md

@@ -65,7 +65,7 @@ Or drop it in with a single script tag — the bundle exposes a global `Fillo`:
 </script>
 ```
 
-The default stylesheet follows system dark mode for unthemed embeds. Pass `theme: { colorScheme: "dark" }` or `"light"` when the host surface is known.
+The default stylesheet inherits the host page's CSS `color-scheme` and font. If your theme switch only toggles a class or data attribute, pass its resolved mode as `theme: { colorScheme: "light" | "dark" }`. Use `"auto"` only for a deliberately system-driven page. A fixed hex `background` automatically selects a readable palette unless you explicitly choose one.
 
 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).
 

package/dist/index.js

@@ -1662,7 +1662,10 @@ function repeatingGroup(context) {
     removeBtn.toggleAttribute("disabled", !canRemove);
     if (!canRemove) {
       removeBtn.setAttribute("aria-disabled", "true");
-      removeBtn.setAttribute("title", `At least ${floor} ${floor === 1 ? "entry" : "entries"} required`);
+      removeBtn.setAttribute(
+        "title",
+        `At least ${floor} ${floor === 1 ? "entry" : "entries"} required`
+      );
     }
     removeBtn.addEventListener("click", () => {
       if (count <= floor) return;
@@ -1969,6 +1972,8 @@ var DomFormController = class {
    *  substitutes for the explicit uploadsAvailable control state. */
   syncWarningCode;
   syncWarningUrl;
+  /** Dashboard form overview containing the Publish action — dev chrome only. */
+  syncFormUrl;
   /** Server-authoritative ability to start a new file upload. */
   uploadsAvailable;
   /** Server-authoritative per-file ceiling for the active storage lane. */
@@ -1994,6 +1999,7 @@ var DomFormController = class {
               const result = await syncCodeForm(client, codeForm, { bypassCache: true });
               this.syncWarningCode = result.warningCode;
               this.syncWarningUrl = result.warningUrl;
+              this.syncFormUrl = result.manageUrl;
               this.uploadsAvailable = result.uploadsAvailable;
               this.uploadFileSizeLimitMb = result.uploadFileSizeLimitMb;
               if (result.status === "draft") {
@@ -2094,6 +2100,7 @@ var DomFormController = class {
           this.draftNotice = result.status === "draft";
           this.syncWarningCode = result.warningCode;
           this.syncWarningUrl = result.warningUrl;
+          this.syncFormUrl = result.manageUrl;
           this.uploadsAvailable = result.uploadsAvailable;
           this.uploadFileSizeLimitMb = result.uploadFileSizeLimitMb;
           this.challenge = this.options.challenge ?? result.challenge;
@@ -2424,7 +2431,7 @@ var DomFormController = class {
     } catch (error) {
       if (this.destroyed || controller.signal.aborted) return;
       const uploadError = toFilloError(error);
-      const message = uploadError.status !== void 0 && uploadError.status >= 500 ? DEFAULT_FIELD_STRINGS.uploadUnavailable : uploadError.message || DEFAULT_FIELD_STRINGS.uploadFailed;
+      const message = uploadError.status === 0 || uploadError.status !== void 0 && uploadError.status >= 500 ? DEFAULT_FIELD_STRINGS.uploadUnavailable : DEFAULT_FIELD_STRINGS.uploadFailed;
       const row = this.inFlight.get(key);
       if (row) row.error = message;
       this.announceAlert(message);
@@ -2992,6 +2999,7 @@ var DomFormController = class {
           staged: this.stagedNotice,
           draft: this.draftNotice,
           warningUrl: this.syncWarningUrl,
+          formUrl: this.syncFormUrl,
           noClient: !this.options.client && !this.options.renderOnly
         })
       );
@@ -3371,25 +3379,45 @@ function devSyncErrorEl(error) {
     attrs: { role: "alert" }
   });
 }
-function devStagedEl() {
-  return el("div", {
-    className: "fillo-devwarning",
-    text: "Code changes are staged. Local preview only. Publish in Fillo before deploying for respondents.",
-    attrs: { role: "alert" }
-  });
+function devStagedEl(formUrl) {
+  const node = el("div", { className: "fillo-devwarning", attrs: { role: "alert" } });
+  node.append(
+    "Code changes are staged, not live. This page shows your draft, while respondents still get the live version. "
+  );
+  const publishUrl = safeHttpUrl(formUrl);
+  if (publishUrl) {
+    node.appendChild(
+      el("a", {
+        text: "Review and publish in Fillo",
+        attrs: { href: publishUrl, target: "_blank", rel: "noopener noreferrer" }
+      })
+    );
+    node.append(".");
+  } else {
+    node.append("Review and publish the changes in Fillo.");
+  }
+  return node;
 }
-function devDraftEl(warningUrl) {
+function devDraftEl(warningUrl, formUrl) {
   const node = el("div", { className: "fillo-devwarning", attrs: { role: "alert" } });
   node.append(
-    "Draft form \u2014 it renders here, but it won't accept responses until you publish it in your Fillo dashboard. "
+    "Draft form preview \u2014 the form renders for local testing, but Fillo will reject the submission and save no response until you publish it. "
   );
-  const safeUrl = safeHttpUrl(warningUrl);
-  if (safeUrl) {
-    node.append("Connect storage to publish: ");
+  const storageUrl = safeHttpUrl(warningUrl);
+  const publishUrl = safeHttpUrl(formUrl);
+  if (storageUrl) {
+    node.appendChild(
+      el("a", {
+        text: "Connect storage to publish",
+        attrs: { href: storageUrl, target: "_blank", rel: "noopener noreferrer" }
+      })
+    );
+    node.append(". ");
+  } else if (publishUrl) {
     node.appendChild(
       el("a", {
-        text: safeUrl,
-        attrs: { href: safeUrl, target: "_blank", rel: "noopener noreferrer" }
+        text: "Open in Fillo to publish",
+        attrs: { href: publishUrl, target: "_blank", rel: "noopener noreferrer" }
       })
     );
     node.append(". ");
@@ -3417,8 +3445,8 @@ function devChromeEls(state) {
   if (state.preview) nodes.push(previewBadgeEl());
   if (state.devNotices === false) return nodes;
   if (state.syncError) nodes.push(devSyncErrorEl(state.syncError));
-  else if (state.staged) nodes.push(devStagedEl());
-  else if (state.draft) nodes.push(devDraftEl(state.warningUrl));
+  else if (state.staged) nodes.push(devStagedEl(state.formUrl));
+  else if (state.draft) nodes.push(devDraftEl(state.warningUrl, state.formUrl));
   else if (state.noClient) nodes.push(devNoClientEl());
   return nodes;
 }