react-f0rm 1.3.0 → 1.4.0

package/devtools.d.ts

@@ -0,0 +1 @@
+export * from './dist/devtools/index';

package/devtools.js

@@ -0,0 +1 @@
+module.exports = require('./dist/devtools/index.cjs.js');

package/dist/array-3hAjl6Bz.d.ts

@@ -0,0 +1,160 @@
+import { d as FieldPath, P as PathSegments, F as Form, A as ArrayItemOf, e as Path } from './standard-schema-CYbnugL7.js';
+
+/**
+ * Append one value to the array at `path`.
+ *
+ * @param form
+ * @param path
+ * @param value
+ */
+declare function appendValueByPath(form: Form, path: Path, value: any): void;
+/**
+ * Prepend one value to the array at `path`.
+ *
+ * @param form
+ * @param path
+ * @param value
+ */
+declare function prependValueByPath(form: Form, path: Path, value: any): void;
+/**
+ * Insert one value at `index` in the array at `path` (`index === length`
+ * appends). Returns `false` — without touching the form — when the index
+ * is out of range; `true` once the value landed.
+ *
+ * @param form
+ * @param path
+ * @param index
+ * @param value
+ */
+declare function insertValueByPath(form: Form, path: Path, index: number, value: any): boolean;
+/**
+ * Remove one or several rows from the array at `path` in a single write.
+ * Indices may come in any order and may repeat — each row drops once;
+ * out-of-range entries are ignored. Returns the indices actually dropped,
+ * sorted descending so caller-side bookkeeping (row ids) can splice them
+ * out without re-indexing drift; `[]` when nothing was removable.
+ *
+ * @param form
+ * @param path
+ * @param indices a single index or a list of indices
+ */
+declare function removeValueByPath(form: Form, path: Path, indices: number | number[]): number[];
+/**
+ * Move the row at `from` to `to` (every row in between shifts one
+ * position). Returns `false` — without touching the form — when either
+ * index is out of range or they are equal; `true` once the row moved.
+ *
+ * @param form
+ * @param path
+ * @param from
+ * @param to
+ */
+declare function moveValueByPath(form: Form, path: Path, from: number, to: number): boolean;
+/**
+ * Swap the rows at `from` and `to`. Returns `false` — without touching
+ * the form — when either index is out of range or they are equal; `true`
+ * once the rows swapped.
+ *
+ * @param form
+ * @param path
+ * @param from
+ * @param to
+ */
+declare function swapValuesByPath(form: Form, path: Path, from: number, to: number): boolean;
+/**
+ * Wholesale-replace the array at `path` (length may change) in one write.
+ *
+ * @param form
+ * @param path
+ * @param values the new array
+ */
+declare function replaceValuesByPath(form: Form, path: Path, values: any[]): void;
+/**
+ * Overwrite one row of the array at `path` in place (a whole-array write,
+ * so the row's position and every other row are untouched). Returns
+ * `false` — without touching the form — when the index is out of range;
+ * `true` once the value landed.
+ *
+ * @param form
+ * @param path
+ * @param index
+ * @param value
+ */
+declare function updateValueByPath(form: Form, path: Path, index: number, value: any): boolean;
+/**
+ * Append one value to the array at `name`. With a typed form the value is
+ * checked against the array's element type (`ArrayItemOf<T, P>`).
+ *
+ * @param form
+ * @param name
+ * @param value
+ */
+declare function appendValue<T extends Record<string, any> = any, P extends FieldPath<T> | PathSegments = FieldPath<T> | PathSegments>(form: Form<T>, name: P, value: ArrayItemOf<T, P>): void;
+/**
+ * Prepend one value to the array at `name`. See {@link appendValue}.
+ *
+ * @param form
+ * @param name
+ * @param value
+ */
+declare function prependValue<T extends Record<string, any> = any, P extends FieldPath<T> | PathSegments = FieldPath<T> | PathSegments>(form: Form<T>, name: P, value: ArrayItemOf<T, P>): void;
+/**
+ * Insert one value at `index` in the array at `name`. Returns `false` on
+ * an out-of-range index (see {@link insertValueByPath}).
+ *
+ * @param form
+ * @param name
+ * @param index
+ * @param value
+ */
+declare function insertValue<T extends Record<string, any> = any, P extends FieldPath<T> | PathSegments = FieldPath<T> | PathSegments>(form: Form<T>, name: P, index: number, value: ArrayItemOf<T, P>): boolean;
+/**
+ * Remove one or several rows from the array at `name` in a single write.
+ * Returns the indices actually dropped, descending (see
+ * {@link removeValueByPath}).
+ *
+ * @param form
+ * @param name
+ * @param indices a single index or a list of indices
+ */
+declare function removeValue<T extends Record<string, any> = any, P extends FieldPath<T> | PathSegments = FieldPath<T> | PathSegments>(form: Form<T>, name: P, indices: number | number[]): number[];
+/**
+ * Move the row at `from` to `to` in the array at `name`. Returns `false`
+ * on an out-of-range or no-op move (see {@link moveValueByPath}).
+ *
+ * @param form
+ * @param name
+ * @param from
+ * @param to
+ */
+declare function moveValue<T extends Record<string, any> = any, P extends FieldPath<T> | PathSegments = FieldPath<T> | PathSegments>(form: Form<T>, name: P, from: number, to: number): boolean;
+/**
+ * Swap the rows at `from` and `to` in the array at `name`. Returns
+ * `false` on an out-of-range or no-op swap (see {@link swapValuesByPath}).
+ *
+ * @param form
+ * @param name
+ * @param from
+ * @param to
+ */
+declare function swapValues<T extends Record<string, any> = any, P extends FieldPath<T> | PathSegments = FieldPath<T> | PathSegments>(form: Form<T>, name: P, from: number, to: number): boolean;
+/**
+ * Wholesale-replace the array at `name` (see {@link replaceValuesByPath}).
+ *
+ * @param form
+ * @param name
+ * @param values the new array
+ */
+declare function replaceValues<T extends Record<string, any> = any, P extends FieldPath<T> | PathSegments = FieldPath<T> | PathSegments>(form: Form<T>, name: P, values: ArrayItemOf<T, P>[]): void;
+/**
+ * Overwrite one row of the array at `name` in place. Returns `false` on
+ * an out-of-range index (see {@link updateValueByPath}).
+ *
+ * @param form
+ * @param name
+ * @param index
+ * @param value
+ */
+declare function updateValue<T extends Record<string, any> = any, P extends FieldPath<T> | PathSegments = FieldPath<T> | PathSegments>(form: Form<T>, name: P, index: number, value: ArrayItemOf<T, P>): boolean;
+
+export { appendValue as a, replaceValues as b, appendValueByPath as c, insertValueByPath as d, moveValueByPath as e, prependValueByPath as f, removeValueByPath as g, replaceValuesByPath as h, insertValue as i, swapValuesByPath as j, updateValueByPath as k, moveValue as m, prependValue as p, removeValue as r, swapValues as s, updateValue as u };

package/dist/devtools/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react"),t=require("@for-fun/event-emitter"),n=require("../values-Cu6awQOJ.cjs.js"),r=require("../errors-BKrUdpfI.cjs.js"),a=require("../validate-Cl4ksNFu.cjs.js");function o(e){var t=Object.create(null);return e&&Object.keys(e).forEach(function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}}),t.default=e,Object.freeze(t)}var l=o(e);function s(e){const t={};return function(e,t){for(const[n,a]of e.values){const o=JSON.parse(n);r.getDirtyBaseline(e,n,o)!==a&&t(o.join("."))}}(e,e=>{t[e]=!0}),t}function d(e){let t=r.dirtyFieldsCaches.get(e);if(t){if(t.version>0){const n=s(e);(function(e,t){const n=Object.keys(e);return n.length===Object.keys(t).length&&n.every(e=>!0===t[e])})(t.result,n)||(t.result=n),t.version=0}}else t={version:0,result:s(e)},r.dirtyFieldsCaches.set(e,t);return t.result}function i({touched:e}){return Array.from(e,e=>JSON.parse(e).join("."))}function c(n,r,a,o){const l="emitter"in n?n.emitter:n;return function(t,n,r){const a=e.useRef(null);null===a.current&&(a.current={hasValue:!1});const o=a.current,l=e.useRef(n);l.current=n;const s=e.useRef(r);s.current=r;const d=e.useCallback(()=>(o.hasValue||(o.value=l.current(),o.hasValue=!0),o.value),[o]),i=e.useCallback(e=>(o.hasValue=!1,t(()=>{const t=s.current;if(t&&o.hasValue){const n=l.current();if(t(o.value,n))return;return o.value=n,void e()}o.hasValue=!1,e()})),[t,o]);return e.useSyncExternalStore(i,d,d)}(e.useCallback(e=>t.on(l,r,e),[l,r]),a,o)}function f(e){return c(e,"touched",i.bind(null,e))}const p=e.createContext(null);p.Provider;e.createContext(null).Provider;function u({name:t,value:n,depth:r=0}){const[a,o]=e.useState(r<=1),s=void 0===t?null:l.createElement(l.Fragment,null,l.createElement("span",{className:"rf0-dt-key"},String(t)),l.createElement("span",{className:"rf0-dt-punct"},": "));if(null!==n&&"object"==typeof n){const e=Array.isArray(n),t=e?n.map((e,t)=>[t,e]):Object.entries(n),d=e?"[":"{",i=e?"]":"}",c=a?"":`${d}…${i} ${t.length}`;return l.createElement("div",{className:"rf0-dt-row",style:{paddingLeft:12*r}},l.createElement("button",{type:"button",className:"rf0-dt-node-toggle","aria-expanded":a,onClick:()=>o(!a)},l.createElement("span",{className:"rf0-dt-caret"},a?"▾":"▸"),s,l.createElement("span",{className:"rf0-dt-punct"},a?d:c)),a&&l.createElement(l.Fragment,null,t.map(([e,t])=>l.createElement(u,{key:String(e),name:e,value:t,depth:r+1})),l.createElement("span",{className:"rf0-dt-punct",style:{paddingLeft:12*r}},i)))}return l.createElement("span",{className:"rf0-dt-row",style:{paddingLeft:12*r,display:"block"}},s,l.createElement(b,{value:n}))}function b({value:e}){return void 0===e?l.createElement("span",{className:"rf0-dt-null"},"undefined"):null===e?l.createElement("span",{className:"rf0-dt-null"},"null"):"string"==typeof e?l.createElement("span",{className:"rf0-dt-string"},'"',e,'"'):"boolean"==typeof e?l.createElement("span",{className:"rf0-dt-boolean"},String(e)):l.createElement("span",{className:"rf0-dt-number"},String(e))}const m="react-f0rm-devtools-style";const g=["values","errors","touched","dirty"];function x(e){if(void 0!==e)return e?"rf0-dt-ok":"rf0-dt-err"}function h(e){if(null===e||"object"!=typeof e)return 1;let t=0;for(const n of Object.values(e))t+=h(n);return t}exports.Devtools=function({form:t,position:o="top-right"}){!function(){if("undefined"==typeof document)return;if(document.getElementById(m))return;const e=document.createElement("style");e.id=m,e.textContent="\n.rf0-dt {\n  position: fixed;\n  z-index: 2147483000;\n  box-sizing: border-box;\n  width: 308px;\n  max-width: calc(100vw - 16px);\n  max-height: min(70vh, 560px);\n  display: flex;\n  flex-direction: column;\n  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono',\n    Menlo, Consolas, 'Liberation Mono', monospace;\n  font-size: 11px;\n  line-height: 1.45;\n  color: #c7d0dc;\n  background: #0c1017;\n  border: 1px solid #1f2735;\n  border-radius: 4px;\n  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4);\n}\n.rf0-dt *,\n.rf0-dt-badge * {\n  box-sizing: border-box;\n}\n.rf0-dt--top-right { top: 8px; right: 8px; }\n.rf0-dt--bottom-right { bottom: 8px; right: 8px; }\n.rf0-dt--top-left { top: 8px; left: 8px; }\n.rf0-dt--bottom-left { bottom: 8px; left: 8px; }\n\n/* ---- header -------------------------------------------------------- */\n.rf0-dt-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 6px 5px 9px;\n  border-bottom: 1px solid #1f2735;\n  background: #10151e;\n}\n.rf0-dt-title {\n  flex: 1;\n  min-width: 0;\n  color: #8b96a5;\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.rf0-dt-title::before {\n  content: '';\n  display: inline-block;\n  width: 6px;\n  height: 6px;\n  margin-right: 6px;\n  border-radius: 50%;\n  background: #e2b93b;\n  vertical-align: 1px;\n}\n.rf0-dt-headerbtn {\n  border: 1px solid transparent;\n  border-radius: 3px;\n  padding: 1px 5px;\n  color: #8b96a5;\n  background: transparent;\n  font: inherit;\n  font-size: 10px;\n  cursor: pointer;\n}\n.rf0-dt-headerbtn:hover { color: #dce3ec; border-color: #2a3547; }\n.rf0-dt-headerbtn:focus-visible,\n.rf0-dt-tab:focus-visible,\n.rf0-dt-action:focus-visible,\n.rf0-dt-badge:focus-visible,\n.rf0-dt-node-toggle:focus-visible {\n  outline: 1px solid #e2b93b;\n  outline-offset: 1px;\n}\n\n/* ---- tabs ---------------------------------------------------------- */\n.rf0-dt-tablist {\n  display: flex;\n  border-bottom: 1px solid #1f2735;\n  background: #0e131b;\n}\n.rf0-dt-tab {\n  flex: 1;\n  padding: 4px 2px 5px;\n  border: 0;\n  border-bottom: 2px solid transparent;\n  background: transparent;\n  color: #6b7686;\n  font: inherit;\n  font-size: 10px;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  cursor: pointer;\n  white-space: nowrap;\n}\n.rf0-dt-tab:hover { color: #aab5c4; }\n.rf0-dt-tab[aria-selected='true'] {\n  color: #e7edf4;\n  border-bottom-color: #e2b93b;\n}\n.rf0-dt-tab-count {\n  margin-left: 3px;\n  color: inherit;\n  opacity: 0.75;\n}\n.rf0-dt-tab--danger[aria-selected='true'] {\n  border-bottom-color: #f0647c;\n}\n\n/* ---- panels -------------------------------------------------------- */\n.rf0-dt-panel {\n  flex: 1;\n  min-height: 84px;\n  overflow: auto;\n  padding: 6px 8px;\n  scrollbar-width: thin;\n  scrollbar-color: #2a3547 transparent;\n}\n.rf0-dt-empty {\n  padding: 10px 2px;\n  color: #4d5766;\n  font-style: italic;\n}\n\n/* json tree */\n.rf0-dt-row {\n  display: block;\n  white-space: pre;\n  tab-size: 2;\n}\n.rf0-dt-node-toggle {\n  border: 0;\n  padding: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  text-align: left;\n  cursor: pointer;\n  white-space: pre;\n}\n.rf0-dt-node-toggle:hover .rf0-dt-key { color: #dce3ec; }\n.rf0-dt-caret {\n  display: inline-block;\n  width: 1.2em;\n  color: #4d5766;\n}\n.rf0-dt-key { color: #8b96a5; }\n.rf0-dt-punct { color: #4d5766; }\n.rf0-dt-string { color: #8fd68a; }\n.rf0-dt-number { color: #e2b93b; }\n.rf0-dt-boolean { color: #6fb3d9; }\n.rf0-dt-null { color: #55607080; font-style: italic; }\n\n/* errors / touched / dirty lists */\n.rf0-dt-item {\n  padding: 3px 2px;\n  border-bottom: 1px dotted #1a2230;\n  display: flex;\n  gap: 8px;\n  align-items: baseline;\n}\n.rf0-dt-item:last-child { border-bottom: 0; }\n.rf0-dt-item-path {\n  color: #aab5c4;\n  word-break: break-all;\n}\n.rf0-dt-item-msg {\n  color: #f0647c;\n  word-break: break-word;\n}\n.rf0-dt-item-msg--ok { color: #8fd68a; }\n.rf0-dt-item-tag {\n  flex: none;\n  color: #4d5766;\n  font-size: 10px;\n}\n.rf0-dt-item--touched .rf0-dt-item-path { color: #6fb3d9; }\n.rf0-dt-item--dirty .rf0-dt-item-path { color: #e2b93b; }\n\n/* ---- submit status + actions --------------------------------------- */\n.rf0-dt-status {\n  display: flex;\n  gap: 10px;\n  padding: 4px 9px;\n  border-top: 1px solid #1f2735;\n  background: #10151e;\n  color: #6b7686;\n  font-size: 10px;\n  letter-spacing: 0.04em;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.rf0-dt-status b { color: #aab5c4; font-weight: 400; }\n.rf0-dt-status .rf0-dt-on { color: #e2b93b; }\n.rf0-dt-status .rf0-dt-ok { color: #8fd68a; }\n.rf0-dt-status .rf0-dt-err { color: #f0647c; }\n.rf0-dt-actions {\n  display: flex;\n  gap: 6px;\n  padding: 6px 8px;\n  border-top: 1px solid #1f2735;\n  background: #10151e;\n}\n.rf0-dt-action {\n  flex: 1;\n  padding: 3px 0;\n  border: 1px solid #2a3547;\n  border-radius: 3px;\n  background: #151b26;\n  color: #c7d0dc;\n  font: inherit;\n  font-size: 10px;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  cursor: pointer;\n}\n.rf0-dt-action:hover { border-color: #3b4a61; background: #1a2230; color: #e7edf4; }\n.rf0-dt-action:active { transform: translateY(1px); }\n\n/* ---- collapsed badge ----------------------------------------------- */\n.rf0-dt-badge {\n  position: fixed;\n  z-index: 2147483000;\n  width: 26px;\n  height: 26px;\n  border: 1px solid #2a3547;\n  border-radius: 50%;\n  background: #0c1017;\n  color: #e2b93b;\n  font: inherit;\n  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono',\n    Menlo, Consolas, 'Liberation Mono', monospace;\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.02em;\n  cursor: pointer;\n  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);\n}\n.rf0-dt-badge:hover { border-color: #e2b93b; }\n.rf0-dt-badge--top-right { top: 10px; right: 10px; }\n.rf0-dt-badge--bottom-right { bottom: 10px; right: 10px; }\n.rf0-dt-badge--top-left { top: 10px; left: 10px; }\n.rf0-dt-badge--bottom-left { bottom: 10px; left: 10px; }\n.rf0-dt-badge .rf0-dt-dot {\n  position: absolute;\n  top: 3px;\n  right: 3px;\n  width: 5px;\n  height: 5px;\n  border-radius: 50%;\n  background: #f0647c;\n  display: none;\n}\n.rf0-dt-badge--has-errors .rf0-dt-dot { display: block; }\n",document.head.appendChild(e)}();const s=e.useContext(p),i=t??s;if(!i)throw new Error("<Devtools> needs a form: pass the `form` prop or render it inside a <Form> / FormProvider.");const[b,y]=e.useState(!0),[v,E]=e.useState("values"),k=e.useId().replace(/[^a-zA-Z0-9-]/g,""),N=c(i,"change",n.getValues.bind(null,i)),w=c(i,"errors",r.getErrors.bind(null,i)),C=f(i),j=function(e){return c(e,"change",d.bind(null,e))}(i),S=function(e){return c(e,"submitting",()=>e.isSubmitting)}(i),$=function(e){return c(e,"submitCount",()=>e.submitCount)}(i),O=c(i,"submitSuccessful",()=>i.isSubmitSuccessful);if(!b)return l.createElement("button",{type:"button",className:`rf0-dt-badge rf0-dt-badge--${o}${w.length>0?" rf0-dt-badge--has-errors":""}`,"aria-expanded":!1,"aria-label":`Open react-f0rm devtools (${w.length} errors)`,onClick:()=>y(!0)},"f0",l.createElement("span",{className:"rf0-dt-dot"}));const z={values:h(N),errors:w.length,touched:C.length,dirty:Object.keys(j).length};return l.createElement("section",{className:`rf0-dt rf0-dt--${o}`,"aria-label":"react-f0rm devtools"},l.createElement("header",{className:"rf0-dt-header"},l.createElement("span",{className:"rf0-dt-title"},"react-f0rm"),l.createElement("button",{type:"button",className:"rf0-dt-headerbtn","aria-label":"Collapse devtools",onClick:()=>y(!1)},"–")),l.createElement("div",{className:"rf0-dt-tablist",role:"tablist","aria-label":"Form state",tabIndex:-1,onKeyDown:e=>{const t={ArrowRight:1,ArrowLeft:-1}[e.key];if(!t)return;e.preventDefault();const n=g[(g.indexOf(v)+t+g.length)%g.length];E(n),document.getElementById(`${k}-tab-${n}`)?.focus()}},g.map(e=>l.createElement("button",{key:e,id:`${k}-tab-${e}`,type:"button",role:"tab",className:"rf0-dt-tab"+("errors"===e?" rf0-dt-tab--danger":""),"aria-selected":v===e,"aria-controls":`${k}-panel-${e}`,tabIndex:v===e?0:-1,onClick:()=>E(e)},e,l.createElement("span",{className:"rf0-dt-tab-count"},z[e])))),l.createElement("div",{id:`${k}-panel-${v}`,role:"tabpanel","aria-labelledby":`${k}-tab-${v}`,className:"rf0-dt-panel"},"values"===v&&l.createElement(u,{value:N}),"errors"===v&&(0===w.length?l.createElement("p",{className:"rf0-dt-empty"},"no errors"):w.map(({path:e,type:t,message:n},r)=>l.createElement("div",{key:`${e}:${r}`,className:"rf0-dt-item"},l.createElement("span",{className:"rf0-dt-item-path"},e),l.createElement("span",{className:"rf0-dt-item-msg"},n),l.createElement("span",{className:"rf0-dt-item-tag"},t)))),"touched"===v&&(0===C.length?l.createElement("p",{className:"rf0-dt-empty"},"no touched fields"):C.map(e=>l.createElement("div",{key:e,className:"rf0-dt-item rf0-dt-item--touched"},l.createElement("span",{className:"rf0-dt-item-path"},e)))),"dirty"===v&&(0===Object.keys(j).length?l.createElement("p",{className:"rf0-dt-empty"},"no dirty fields"):Object.keys(j).map(e=>l.createElement("div",{key:e,className:"rf0-dt-item rf0-dt-item--dirty"},l.createElement("span",{className:"rf0-dt-item-path"},e),l.createElement("span",{className:"rf0-dt-item-msg rf0-dt-item-msg--ok"},"changed"))))),l.createElement("p",{className:"rf0-dt-status","aria-live":"polite"},l.createElement("span",{className:S?"rf0-dt-on":void 0},"submitting ",l.createElement("b",null,String(S))),l.createElement("span",null,"submits ",l.createElement("b",null,$)),l.createElement("span",{className:x(O)},"ok"," ",l.createElement("b",null,void 0===O?"–":String(O)))),l.createElement("div",{className:"rf0-dt-actions"},l.createElement("button",{type:"button",className:"rf0-dt-action",onClick:()=>n.reset(i,i.initialValues)},"Reset"),l.createElement("button",{type:"button",className:"rf0-dt-action",onClick:()=>a.trigger(i)},"Validate")))};
+"use strict";var e=require("react"),t=require("@for-fun/event-emitter"),n=require("../errors-8oPux7GR.cjs.js"),r=require("../values-DKpOCD5J.cjs.js"),a=require("../validate-BvN6hiEG.cjs.js");function o(e){var t=Object.create(null);return e&&Object.keys(e).forEach(function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}}),t.default=e,Object.freeze(t)}var s=o(e);function l(e){const t={};return function(e,t){for(const[r,a]of e.values){const o=JSON.parse(r);n.getDirtyBaseline(e,r,o)!==a&&t(o.join("."))}}(e,e=>{t[e]=!0}),t}function i(e){let t=n.dirtyFieldsCaches.get(e);if(t){if(t.version>0){const n=l(e);(function(e,t){const n=Object.keys(e);return n.length===Object.keys(t).length&&n.every(e=>!0===t[e])})(t.result,n)||(t.result=n),t.version=0}}else t={version:0,result:l(e)},n.dirtyFieldsCaches.set(e,t);return t.result}function d(n,r,a,o){const s="emitter"in n?n.emitter:n;return function(t,n,r){const a=e.useRef(null);null===a.current&&(a.current={hasValue:!1});const o=a.current,s=e.useRef(n);s.current=n;const l=e.useRef(r);l.current=r;const i=e.useCallback(()=>(o.hasValue||(o.value=s.current(),o.hasValue=!0),o.value),[o]),d=e.useCallback(e=>(o.hasValue=!1,t(()=>{const t=l.current;if(t&&o.hasValue){const n=s.current();if(t(o.value,n))return;return o.value=n,void e()}o.hasValue=!1,e()})),[t,o]);return e.useSyncExternalStore(d,i,i)}(e.useCallback(e=>t.on(s,r,e),[s,r]),a,o)}const c=e.createContext(null);c.Provider;e.createContext(null).Provider;function m({name:t,value:n,depth:r=0}){const[a,o]=e.useState(r<=1),l=void 0===t?null:s.createElement(s.Fragment,null,s.createElement("span",{className:"rf0-dt-key"},String(t)),s.createElement("span",{className:"rf0-dt-punct"},": "));if(null!==n&&"object"==typeof n){const e=Array.isArray(n),t=e?n.map((e,t)=>[t,e]):Object.entries(n),i=e?"[":"{",d=e?"]":"}",c=a?"":`${i}…${d} ${t.length}`;return s.createElement("div",{className:"rf0-dt-row",style:{paddingLeft:12*r}},s.createElement("button",{type:"button",className:"rf0-dt-node-toggle","aria-expanded":a,onClick:()=>o(!a)},s.createElement("span",{className:"rf0-dt-caret"},a?"▾":"▸"),l,s.createElement("span",{className:"rf0-dt-punct"},a?i:c)),a&&s.createElement(s.Fragment,null,t.map(([e,t])=>s.createElement(m,{key:String(e),name:e,value:t,depth:r+1})),s.createElement("span",{className:"rf0-dt-punct",style:{paddingLeft:12*r}},d)))}return s.createElement("span",{className:"rf0-dt-row",style:{paddingLeft:12*r,display:"block"}},l,s.createElement(f,{value:n}))}function f({value:e}){return void 0===e?s.createElement("span",{className:"rf0-dt-null"},"undefined"):null===e?s.createElement("span",{className:"rf0-dt-null"},"null"):"string"==typeof e?s.createElement("span",{className:"rf0-dt-string"},'"',e,'"'):"boolean"==typeof e?s.createElement("span",{className:"rf0-dt-boolean"},String(e)):s.createElement("span",{className:"rf0-dt-number"},String(e))}const p="react-f0rm-devtools-style";const u=["values","errors","touched","dirty","submits","events"];function b(e){if(void 0!==e)return e?"rf0-dt-ok":"rf0-dt-err"}function g(e){if(null===e||"object"!=typeof e)return 1;let t=0;for(const n of Object.values(e))t+=g(n);return t}exports.Devtools=function({form:o,position:l="top-right"}){!function(){if("undefined"==typeof document)return;if(document.getElementById(p))return;const e=document.createElement("style");e.id=p,e.textContent="\n.rf0-dt {\n  position: fixed;\n  z-index: 2147483000;\n  box-sizing: border-box;\n  width: 308px;\n  max-width: calc(100vw - 16px);\n  max-height: min(70vh, 560px);\n  display: flex;\n  flex-direction: column;\n  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono',\n    Menlo, Consolas, 'Liberation Mono', monospace;\n  font-size: 11px;\n  line-height: 1.45;\n  color: #c7d0dc;\n  background: #0c1017;\n  border: 1px solid #1f2735;\n  border-radius: 4px;\n  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4);\n}\n.rf0-dt *,\n.rf0-dt-badge * {\n  box-sizing: border-box;\n}\n.rf0-dt--top-right { top: 8px; right: 8px; }\n.rf0-dt--bottom-right { bottom: 8px; right: 8px; }\n.rf0-dt--top-left { top: 8px; left: 8px; }\n.rf0-dt--bottom-left { bottom: 8px; left: 8px; }\n\n/* ---- header -------------------------------------------------------- */\n.rf0-dt-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 6px 5px 9px;\n  border-bottom: 1px solid #1f2735;\n  background: #10151e;\n}\n.rf0-dt-title {\n  flex: 1;\n  min-width: 0;\n  color: #8b96a5;\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.rf0-dt-title::before {\n  content: '';\n  display: inline-block;\n  width: 6px;\n  height: 6px;\n  margin-right: 6px;\n  border-radius: 50%;\n  background: #e2b93b;\n  vertical-align: 1px;\n}\n.rf0-dt-headerbtn {\n  border: 1px solid transparent;\n  border-radius: 3px;\n  padding: 1px 5px;\n  color: #8b96a5;\n  background: transparent;\n  font: inherit;\n  font-size: 10px;\n  cursor: pointer;\n}\n.rf0-dt-headerbtn:hover { color: #dce3ec; border-color: #2a3547; }\n.rf0-dt-headerbtn:focus-visible,\n.rf0-dt-tab:focus-visible,\n.rf0-dt-action:focus-visible,\n.rf0-dt-badge:focus-visible,\n.rf0-dt-node-toggle:focus-visible {\n  outline: 1px solid #e2b93b;\n  outline-offset: 1px;\n}\n\n/* ---- tabs ---------------------------------------------------------- */\n.rf0-dt-tablist {\n  display: flex;\n  border-bottom: 1px solid #1f2735;\n  background: #0e131b;\n}\n.rf0-dt-tab {\n  flex: 1;\n  padding: 4px 2px 5px;\n  border: 0;\n  border-bottom: 2px solid transparent;\n  background: transparent;\n  color: #6b7686;\n  font: inherit;\n  font-size: 10px;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  cursor: pointer;\n  white-space: nowrap;\n}\n.rf0-dt-tab:hover { color: #aab5c4; }\n.rf0-dt-tab[aria-selected='true'] {\n  color: #e7edf4;\n  border-bottom-color: #e2b93b;\n}\n.rf0-dt-tab-count {\n  margin-left: 3px;\n  color: inherit;\n  opacity: 0.75;\n}\n.rf0-dt-tab--danger[aria-selected='true'] {\n  border-bottom-color: #f0647c;\n}\n\n/* ---- panels -------------------------------------------------------- */\n.rf0-dt-panel {\n  flex: 1;\n  min-height: 84px;\n  overflow: auto;\n  padding: 6px 8px;\n  scrollbar-width: thin;\n  scrollbar-color: #2a3547 transparent;\n}\n.rf0-dt-empty {\n  padding: 10px 2px;\n  color: #4d5766;\n  font-style: italic;\n}\n\n/* json tree */\n.rf0-dt-row {\n  display: block;\n  white-space: pre;\n  tab-size: 2;\n}\n.rf0-dt-node-toggle {\n  border: 0;\n  padding: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  text-align: left;\n  cursor: pointer;\n  white-space: pre;\n}\n.rf0-dt-node-toggle:hover .rf0-dt-key { color: #dce3ec; }\n.rf0-dt-caret {\n  display: inline-block;\n  width: 1.2em;\n  color: #4d5766;\n}\n.rf0-dt-key { color: #8b96a5; }\n.rf0-dt-punct { color: #4d5766; }\n.rf0-dt-string { color: #8fd68a; }\n.rf0-dt-number { color: #e2b93b; }\n.rf0-dt-boolean { color: #6fb3d9; }\n.rf0-dt-null { color: #55607080; font-style: italic; }\n\n/* errors / touched / dirty lists */\n.rf0-dt-item {\n  padding: 3px 2px;\n  border-bottom: 1px dotted #1a2230;\n  display: flex;\n  gap: 8px;\n  align-items: baseline;\n}\n.rf0-dt-item:last-child { border-bottom: 0; }\n.rf0-dt-item-path {\n  color: #aab5c4;\n  word-break: break-all;\n}\n.rf0-dt-item-msg {\n  color: #f0647c;\n  word-break: break-word;\n}\n.rf0-dt-item-msg--ok { color: #8fd68a; }\n.rf0-dt-item-tag {\n  flex: none;\n  color: #4d5766;\n  font-size: 10px;\n}\n.rf0-dt-item--touched .rf0-dt-item-path { color: #6fb3d9; }\n.rf0-dt-item--dirty .rf0-dt-item-path { color: #e2b93b; }\n\n/* ---- submit status + actions --------------------------------------- */\n.rf0-dt-status {\n  display: flex;\n  gap: 10px;\n  padding: 4px 9px;\n  border-top: 1px solid #1f2735;\n  background: #10151e;\n  color: #6b7686;\n  font-size: 10px;\n  letter-spacing: 0.04em;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.rf0-dt-status b { color: #aab5c4; font-weight: 400; }\n.rf0-dt-status .rf0-dt-on { color: #e2b93b; }\n.rf0-dt-status .rf0-dt-ok { color: #8fd68a; }\n.rf0-dt-status .rf0-dt-err { color: #f0647c; }\n.rf0-dt-actions {\n  display: flex;\n  gap: 6px;\n  padding: 6px 8px;\n  border-top: 1px solid #1f2735;\n  background: #10151e;\n}\n.rf0-dt-action {\n  flex: 1;\n  padding: 3px 0;\n  border: 1px solid #2a3547;\n  border-radius: 3px;\n  background: #151b26;\n  color: #c7d0dc;\n  font: inherit;\n  font-size: 10px;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  cursor: pointer;\n}\n.rf0-dt-action:hover { border-color: #3b4a61; background: #1a2230; color: #e7edf4; }\n.rf0-dt-action:active { transform: translateY(1px); }\n\n/* ---- collapsed badge ----------------------------------------------- */\n.rf0-dt-badge {\n  position: fixed;\n  z-index: 2147483000;\n  width: 26px;\n  height: 26px;\n  border: 1px solid #2a3547;\n  border-radius: 50%;\n  background: #0c1017;\n  color: #e2b93b;\n  font: inherit;\n  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono',\n    Menlo, Consolas, 'Liberation Mono', monospace;\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.02em;\n  cursor: pointer;\n  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);\n}\n.rf0-dt-badge:hover { border-color: #e2b93b; }\n.rf0-dt-badge--top-right { top: 10px; right: 10px; }\n.rf0-dt-badge--bottom-right { bottom: 10px; right: 10px; }\n.rf0-dt-badge--top-left { top: 10px; left: 10px; }\n.rf0-dt-badge--bottom-left { bottom: 10px; left: 10px; }\n.rf0-dt-badge .rf0-dt-dot {\n  position: absolute;\n  top: 3px;\n  right: 3px;\n  width: 5px;\n  height: 5px;\n  border-radius: 50%;\n  background: #f0647c;\n  display: none;\n}\n.rf0-dt-badge--has-errors .rf0-dt-dot { display: block; }\n\n/* ---- submit traces -------------------------------------------------- */\n.rf0-dt-submit { border-bottom: 1px solid #1f2735; }\n.rf0-dt-submit:last-child { border-bottom: none; }\n.rf0-dt-submit-summary {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 6px;\n  cursor: pointer;\n  list-style: none;\n  color: #8b96a5;\n}\n.rf0-dt-submit-summary::-webkit-details-marker { display: none; }\n.rf0-dt-submit-summary:hover { color: #dce3ec; }\n.rf0-dt-submit-n { color: #dce3ec; font-weight: 700; }\n.rf0-dt-submit-time { margin-left: auto; color: #56616f; }\n.rf0-dt-submit[open] .rf0-dt-submit-summary { border-bottom: 1px dashed #1f2735; }\n.rf0-dt-submit-errors { padding: 2px 6px; }\n",document.head.appendChild(e)}();const f=e.useContext(c),h=o??f;if(!h)throw new Error("<Devtools> needs a form: pass the `form` prop or render it inside a <Form> / FormProvider.");const[x,y]=e.useState(!0),[v,E]=e.useState("values"),k=e.useId().replace(/[^a-zA-Z0-9-]/g,""),N=d(h,"change",r.getValues.bind(null,h)),w=d(h,"errors",n.getErrors.bind(null,h)),C=function(e){return d(e,"touched",r.getTouchedFields.bind(null,e))}(h),S=function(e){return d(e,"change",i.bind(null,e))}(h),$=function(e){return d(e,"submitting",()=>e.isSubmitting)}(h),j=function(e){return d(e,"submitCount",()=>e.submitCount)}(h),O=d(h,"submitSuccessful",()=>h.isSubmitSuccessful),[z,F]=e.useState([]);e.useEffect(()=>t.on(h.emitter,"submitting",()=>{h.isSubmitting||queueMicrotask(()=>{h.isSubmitting||0===h.submitCount||F(e=>[{n:h.submitCount,ok:h.isSubmitSuccessful,at:Date.now(),values:r.getValues(h),errors:n.getErrors(h)},...e].slice(0,10))})}),[h]);const[D,V]=e.useState([]);if(e.useEffect(()=>{let e=0;const n=(t,n)=>{e+=1;const r={n:e,event:t,at:Date.now()};void 0!==n&&(r.path=n),V(e=>[r,...e].slice(0,50))},r=[];for(const e of["change","errors","touched","validating"])r.push(t.on(h.emitter,e,t=>n(e,t?t.value.join("."):void 0)));r.push(t.on(h.emitter,"focusError",e=>{try{n("focusError",JSON.parse(e).join("."))}catch{n("focusError",e)}}));for(const e of["submitting","submitCount","submitSuccessful","reset","disabled","status","loading"])r.push(t.on(h.emitter,e,()=>n(e)));return()=>r.forEach(e=>e())},[h]),!x)return s.createElement("button",{type:"button",className:`rf0-dt-badge rf0-dt-badge--${l}${w.length>0?" rf0-dt-badge--has-errors":""}`,"aria-expanded":!1,"aria-label":`Open react-f0rm devtools (${w.length} errors)`,onClick:()=>y(!0)},"f0",s.createElement("span",{className:"rf0-dt-dot"}));const M={values:g(N),errors:w.length,touched:C.length,dirty:Object.keys(S).length,submits:z.length,events:D.length};return s.createElement("section",{className:`rf0-dt rf0-dt--${l}`,"aria-label":"react-f0rm devtools"},s.createElement("header",{className:"rf0-dt-header"},s.createElement("span",{className:"rf0-dt-title"},"react-f0rm"),s.createElement("button",{type:"button",className:"rf0-dt-headerbtn","aria-label":"Collapse devtools",onClick:()=>y(!1)},"–")),s.createElement("div",{className:"rf0-dt-tablist",role:"tablist","aria-label":"Form state",tabIndex:-1,onKeyDown:e=>{const t={ArrowRight:1,ArrowLeft:-1}[e.key];if(!t)return;e.preventDefault();const n=u[(u.indexOf(v)+t+u.length)%u.length];E(n),document.getElementById(`${k}-tab-${n}`)?.focus()}},u.map(e=>s.createElement("button",{key:e,id:`${k}-tab-${e}`,type:"button",role:"tab",className:"rf0-dt-tab"+("errors"===e?" rf0-dt-tab--danger":""),"aria-selected":v===e,"aria-controls":`${k}-panel-${e}`,tabIndex:v===e?0:-1,onClick:()=>E(e)},e,s.createElement("span",{className:"rf0-dt-tab-count"},M[e])))),s.createElement("div",{id:`${k}-panel-${v}`,role:"tabpanel","aria-labelledby":`${k}-tab-${v}`,className:"rf0-dt-panel"},"values"===v&&s.createElement(m,{value:N}),"errors"===v&&(0===w.length?s.createElement("p",{className:"rf0-dt-empty"},"no errors"):w.map(({path:e,type:t,message:n},r)=>s.createElement("div",{key:`${e}:${r}`,className:"rf0-dt-item"},s.createElement("span",{className:"rf0-dt-item-path"},e),s.createElement("span",{className:"rf0-dt-item-msg"},n),s.createElement("span",{className:"rf0-dt-item-tag"},t)))),"touched"===v&&(0===C.length?s.createElement("p",{className:"rf0-dt-empty"},"no touched fields"):C.map(e=>s.createElement("div",{key:e,className:"rf0-dt-item rf0-dt-item--touched"},s.createElement("span",{className:"rf0-dt-item-path"},e)))),"dirty"===v&&(0===Object.keys(S).length?s.createElement("p",{className:"rf0-dt-empty"},"no dirty fields"):Object.keys(S).map(e=>s.createElement("div",{key:e,className:"rf0-dt-item rf0-dt-item--dirty"},s.createElement("span",{className:"rf0-dt-item-path"},e),s.createElement("span",{className:"rf0-dt-item-msg rf0-dt-item-msg--ok"},"changed")))),"submits"===v&&(0===z.length?s.createElement("p",{className:"rf0-dt-empty"},"no submits yet"):z.map(e=>s.createElement("details",{key:`${e.n}-${e.at}`,className:"rf0-dt-submit"},s.createElement("summary",{className:"rf0-dt-submit-summary"},s.createElement("span",{className:"rf0-dt-submit-n"},"#",e.n),s.createElement("span",{className:b(e.ok)},!0===e.ok?"ok":!1===e.ok?"failed":"–"),s.createElement("span",{className:"rf0-dt-submit-time"},new Date(e.at).toLocaleTimeString())),e.errors.length>0&&s.createElement("div",{className:"rf0-dt-submit-errors"},e.errors.map(({path:e,type:t,message:n},r)=>s.createElement("div",{key:`${e}:${r}`,className:"rf0-dt-item"},s.createElement("span",{className:"rf0-dt-item-path"},e),s.createElement("span",{className:"rf0-dt-item-msg"},n),s.createElement("span",{className:"rf0-dt-item-tag"},t)))),s.createElement(m,{value:e.values})))),"events"===v&&(0===D.length?s.createElement("p",{className:"rf0-dt-empty"},"no events yet"):s.createElement(s.Fragment,null,s.createElement("div",null,s.createElement("button",{type:"button",className:"rf0-dt-action",onClick:()=>V([])},"Clear")),D.map(e=>s.createElement("div",{key:`${e.n}:${e.at}`,className:"rf0-dt-item"},s.createElement("span",{className:"rf0-dt-item-tag"},e.event),s.createElement("span",{className:"rf0-dt-item-path"},e.path??"—"),s.createElement("span",{className:"rf0-dt-item-msg rf0-dt-item-msg--ok"},new Date(e.at).toLocaleTimeString())))))),s.createElement("p",{className:"rf0-dt-status","aria-live":"polite"},s.createElement("span",{className:$?"rf0-dt-on":void 0},"submitting ",s.createElement("b",null,String($))),s.createElement("span",null,"submits ",s.createElement("b",null,j)),s.createElement("span",{className:b(O)},"ok"," ",s.createElement("b",null,void 0===O?"–":String(O)))),s.createElement("div",{className:"rf0-dt-actions"},s.createElement("button",{type:"button",className:"rf0-dt-action",onClick:()=>r.reset(h,h.initialValues)},"Reset"),s.createElement("button",{type:"button",className:"rf0-dt-action",onClick:()=>a.trigger(h)},"Validate")))};
 //# sourceMappingURL=index.cjs.js.map