@lattice-php/lattice 0.3.0 → 0.4.0

package/dist/form/components/fields/file-upload.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-upload.js","names":[],"sources":["../../../../resources/js/form/components/fields/file-upload.tsx"],"sourcesContent":["import { apiFetch } from \"@lattice-php/lattice/core/api\";\nimport { testIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useFormContext } from \"../context\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useFieldScope } from \"../field-scope\";\nimport { useFormValues } from \"../values\";\n\ntype Item = {\n  id: string;\n  name: string;\n  size: number | null;\n  status: \"ready\" | \"uploading\" | \"error\";\n  progress: number;\n  file?: File;\n  key?: string;\n  url?: string | null;\n  token?: string;\n  existing: boolean;\n};\n\ntype SignResponse = {\n  key: string;\n  url: string;\n  headers: Record<string, string>;\n  method: string;\n};\n\nexport const FileUploadComponent: RendererComponent<\"field.file-upload\"> = ({ node }) => {\n  const { t } = useT(\"lattice\");\n  const props = node.props;\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const { action, componentRef, errors } = useFormContext();\n  const name = props.name;\n  const scope = useFieldScope();\n  const domName = scope ? scope.scopedName(name) : name;\n  const errorKey = scope ? scope.errorKey(name) : name;\n  const uploadKey = errorKey;\n  const values = useFormValues();\n  const inputId = useId();\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const previewUrlsRef = useRef<Set<string>>(new Set());\n  const locked = readOnly || disabled;\n  const signed = props.signed;\n  const multiple = props.multiple;\n  const fieldName = multiple ? `${domName}[]` : domName;\n\n  const initial = useMemo<Item[]>(\n    () =>\n      (props.files ?? []).map((file) => ({\n        id: crypto.randomUUID(),\n        name: file.name,\n        size: file.size,\n        status: \"ready\" as const,\n        progress: 100,\n        key: file.key,\n        url: file.url,\n        token: file.token,\n        existing: true,\n      })),\n    [props.files],\n  );\n  const [items, setItems] = useState<Item[]>(initial);\n  const [removedTokens, setRemovedTokens] = useState<string[]>([]);\n\n  useEffect(\n    () => () => {\n      previewUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));\n      previewUrlsRef.current.clear();\n    },\n    [],\n  );\n\n  const multipartFiles = items\n    .filter((item) => item.file && !item.existing)\n    .map((item) => item.file as File);\n  useEffect(() => {\n    if (signed || !fileInputRef.current) {\n      return;\n    }\n\n    const transfer = new DataTransfer();\n    multipartFiles.forEach((file) => transfer.items.add(file));\n    fileInputRef.current.files = transfer.files;\n  });\n\n  function createPreviewUrl(file: File): string | undefined {\n    if (!props.image) {\n      return undefined;\n    }\n\n    const url = URL.createObjectURL(file);\n    previewUrlsRef.current.add(url);\n\n    return url;\n  }\n\n  function revokePreviewUrl(item: Item): void {\n    if (!item.url || !previewUrlsRef.current.has(item.url)) {\n      return;\n    }\n\n    URL.revokeObjectURL(item.url);\n    previewUrlsRef.current.delete(item.url);\n  }\n\n  async function signAndUpload(item: Item, file: File): Promise<void> {\n    const response = await apiFetch(action, {\n      method: \"POST\",\n      ref: componentRef,\n      body: JSON.stringify({\n        ...values,\n        _upload: uploadKey,\n        filename: file.name,\n        contentType: file.type,\n      }),\n      throwOnError: false,\n    });\n\n    if (!response.ok) {\n      setItems((prev) =>\n        prev.map((entry) => (entry.id === item.id ? { ...entry, status: \"error\" } : entry)),\n      );\n\n      return;\n    }\n\n    const sign = (await response.json()) as SignResponse;\n\n    await new Promise<void>((resolve) => {\n      const request = new XMLHttpRequest();\n      request.open(sign.method, sign.url, true);\n      Object.entries(sign.headers).forEach(([key, value]) =>\n        request.setRequestHeader(key, String(value)),\n      );\n      request.upload.onprogress = (event) => {\n        if (event.lengthComputable) {\n          const progress = Math.round((event.loaded / event.total) * 100);\n          setItems((prev) =>\n            prev.map((entry) => (entry.id === item.id ? { ...entry, progress } : entry)),\n          );\n        }\n      };\n      request.onload = () => {\n        setItems((prev) =>\n          prev.map((entry) =>\n            entry.id === item.id\n              ? {\n                  ...entry,\n                  status: request.status < 300 ? \"ready\" : \"error\",\n                  key: sign.key,\n                  progress: 100,\n                }\n              : entry,\n          ),\n        );\n        resolve();\n      };\n      request.onerror = () => {\n        setItems((prev) =>\n          prev.map((entry) => (entry.id === item.id ? { ...entry, status: \"error\" } : entry)),\n        );\n        resolve();\n      };\n      request.send(file);\n    });\n  }\n\n  function addFiles(fileList: FileList | null): void {\n    if (!fileList || locked) {\n      return;\n    }\n\n    const incoming = Array.from(fileList);\n    const next = incoming.map<Item>((file) => ({\n      id: crypto.randomUUID(),\n      name: file.name,\n      size: file.size,\n      status: signed ? \"uploading\" : \"ready\",\n      progress: 0,\n      file,\n      url: createPreviewUrl(file),\n      existing: false,\n    }));\n\n    if (!multiple) {\n      items.forEach(revokePreviewUrl);\n\n      if (!scope) {\n        const replacedTokens = items\n          .filter((item) => item.existing && item.token)\n          .map((item) => item.token as string);\n\n        if (replacedTokens.length > 0) {\n          setRemovedTokens((tokens) => [...tokens, ...replacedTokens]);\n        }\n      }\n    }\n\n    setItems((prev) => (multiple ? [...prev, ...next] : next));\n\n    if (signed) {\n      next.forEach((item, index) => void signAndUpload(item, incoming[index]));\n    }\n  }\n\n  function removeItem(id: string): void {\n    const target = items.find((item) => item.id === id);\n\n    if (target) {\n      revokePreviewUrl(target);\n    }\n\n    setItems((prev) => {\n      if (target?.existing && target.token && !scope) {\n        setRemovedTokens((tokens) => [...tokens, target.token as string]);\n      }\n      return prev.filter((i) => i.id !== id);\n    });\n  }\n\n  if (hidden) {\n    return null;\n  }\n\n  return (\n    <FormFieldFrame\n      error={errors[errorKey]}\n      helperText={props.helperText ?? undefined}\n      tooltip={props.tooltip ?? undefined}\n      label={props.label ?? \"\"}\n      name={name}\n      required={required}\n    >\n      <div\n        className=\"flex flex-col gap-3 rounded-lt-sm border border-dashed border-lt-border bg-lt-surface px-4 py-6\"\n        data-test={testIdentity(name)}\n        onDragOver={(event) => event.preventDefault()}\n        onDrop={(event) => {\n          event.preventDefault();\n          addFiles(event.dataTransfer.files);\n        }}\n      >\n        <button\n          className=\"text-sm text-lt-muted-fg\"\n          disabled={locked}\n          onClick={() => fileInputRef.current?.click()}\n          type=\"button\"\n        >\n          {t(\"file-upload.dropzone\", \"Drop files here or click to browse\")}\n        </button>\n\n        <ul\n          className={props.image ? \"grid grid-cols-1 gap-3 sm:grid-cols-2\" : \"flex flex-col gap-2\"}\n        >\n          {items.map((item) => (\n            <li\n              className={\n                props.image\n                  ? \"flex min-w-0 items-center gap-3 rounded-lt-sm border border-lt-border bg-lt-bg p-2 text-sm\"\n                  : \"flex items-center justify-between gap-3 text-sm\"\n              }\n              key={item.id}\n            >\n              {props.image && item.url ? (\n                <img\n                  alt={item.name}\n                  className=\"size-16 shrink-0 rounded-lt-sm border border-lt-border object-cover\"\n                  data-test={testIdentity(`${name}-preview`)}\n                  src={item.url}\n                />\n              ) : null}\n              <div className=\"min-w-0 flex-1\">\n                <span className=\"block truncate\" data-test={testIdentity(`${name}-item`)}>\n                  {item.name}\n                </span>\n                {item.status === \"uploading\" && (\n                  <span className=\"text-xs text-lt-muted-fg\">{item.progress}%</span>\n                )}\n                {item.status === \"error\" && (\n                  <span className=\"text-xs text-lt-danger\">\n                    {t(\"file-upload.failed\", \"Failed\")}\n                  </span>\n                )}\n              </div>\n              {(!item.existing || !scope) && (\n                <button\n                  aria-label={t(\"file-upload.remove\", \"Remove {{name}}\", { name: item.name })}\n                  className=\"inline-flex size-7 shrink-0 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg disabled:pointer-events-none disabled:opacity-50\"\n                  data-test={item.existing ? testIdentity(`${name}-remove-existing`) : undefined}\n                  disabled={locked}\n                  onClick={() => removeItem(item.id)}\n                  type=\"button\"\n                >\n                  <Icon name=\"x\" aria-hidden=\"true\" className=\"size-lt-icon-sm\" />\n                </button>\n              )}\n              {signed && !item.existing && item.key && item.status === \"ready\" && (\n                <input\n                  data-test={testIdentity(`${name}-uploaded`)}\n                  name={fieldName}\n                  type=\"hidden\"\n                  value={item.key}\n                />\n              )}\n            </li>\n          ))}\n        </ul>\n\n        {!scope &&\n          removedTokens.map((token) => (\n            <input key={token} name={`${name}__removed[]`} type=\"hidden\" value={token} />\n          ))}\n\n        <input\n          accept={props.accept ?? undefined}\n          aria-label={props.label ?? name}\n          className=\"sr-only\"\n          data-test={testIdentity(`${name}-input`)}\n          id={inputId}\n          multiple={multiple}\n          name={signed ? undefined : fieldName}\n          onChange={(event) => {\n            addFiles(event.target.files);\n            if (signed) {\n              event.target.value = \"\";\n            }\n          }}\n          ref={fileInputRef}\n          type=\"file\"\n        />\n      </div>\n    </FormFieldFrame>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAgCA,IAAa,uBAA+D,EAAE,WAAW;CACvF,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,QAAQ,KAAK;CACnB,MAAM,EAAE,QAAQ,UAAU,UAAU,aAAa,kBAAkB,IAAI;CACvE,MAAM,EAAE,QAAQ,cAAc,WAAW,eAAe;CACxD,MAAM,OAAO,MAAM;CACnB,MAAM,QAAQ,cAAc;CAC5B,MAAM,UAAU,QAAQ,MAAM,WAAW,IAAI,IAAI;CACjD,MAAM,WAAW,QAAQ,MAAM,SAAS,IAAI,IAAI;CAChD,MAAM,YAAY;CAClB,MAAM,SAAS,cAAc;CAC7B,MAAM,UAAU,MAAM;CACtB,MAAM,eAAe,OAAyB,IAAI;CAClD,MAAM,iBAAiB,uBAAoB,IAAI,IAAI,CAAC;CACpD,MAAM,SAAS,YAAY;CAC3B,MAAM,SAAS,MAAM;CACrB,MAAM,WAAW,MAAM;CACvB,MAAM,YAAY,WAAW,GAAG,QAAQ,MAAM;CAiB9C,MAAM,CAAC,OAAO,YAAY,SAfV,eAEX,MAAM,SAAS,CAAC,GAAG,KAAK,UAAU;EACjC,IAAI,OAAO,WAAW;EACtB,MAAM,KAAK;EACX,MAAM,KAAK;EACX,QAAQ;EACR,UAAU;EACV,KAAK,KAAK;EACV,KAAK,KAAK;EACV,OAAO,KAAK;EACZ,UAAU;CACZ,EAAE,GACJ,CAAC,MAAM,KAAK,CAE6B,CAAO;CAClD,MAAM,CAAC,eAAe,oBAAoB,SAAmB,CAAC,CAAC;CAE/D,sBACc;EACV,eAAe,QAAQ,SAAS,QAAQ,IAAI,gBAAgB,GAAG,CAAC;EAChE,eAAe,QAAQ,MAAM;CAC/B,GACA,CAAC,CACH;CAEA,MAAM,iBAAiB,MACpB,QAAQ,SAAS,KAAK,QAAQ,CAAC,KAAK,QAAQ,EAC5C,KAAK,SAAS,KAAK,IAAY;CAClC,gBAAgB;EACd,IAAI,UAAU,CAAC,aAAa,SAC1B;EAGF,MAAM,WAAW,IAAI,aAAa;EAClC,eAAe,SAAS,SAAS,SAAS,MAAM,IAAI,IAAI,CAAC;EACzD,aAAa,QAAQ,QAAQ,SAAS;CACxC,CAAC;CAED,SAAS,iBAAiB,MAAgC;EACxD,IAAI,CAAC,MAAM,OACT;EAGF,MAAM,MAAM,IAAI,gBAAgB,IAAI;EACpC,eAAe,QAAQ,IAAI,GAAG;EAE9B,OAAO;CACT;CAEA,SAAS,iBAAiB,MAAkB;EAC1C,IAAI,CAAC,KAAK,OAAO,CAAC,eAAe,QAAQ,IAAI,KAAK,GAAG,GACnD;EAGF,IAAI,gBAAgB,KAAK,GAAG;EAC5B,eAAe,QAAQ,OAAO,KAAK,GAAG;CACxC;CAEA,eAAe,cAAc,MAAY,MAA2B;EAClE,MAAM,WAAW,MAAM,SAAS,QAAQ;GACtC,QAAQ;GACR,KAAK;GACL,MAAM,KAAK,UAAU;IACnB,GAAG;IACH,SAAS;IACT,UAAU,KAAK;IACf,aAAa,KAAK;GACpB,CAAC;GACD,cAAc;EAChB,CAAC;EAED,IAAI,CAAC,SAAS,IAAI;GAChB,UAAU,SACR,KAAK,KAAK,UAAW,MAAM,OAAO,KAAK,KAAK;IAAE,GAAG;IAAO,QAAQ;GAAQ,IAAI,KAAM,CACpF;GAEA;EACF;EAEA,MAAM,OAAQ,MAAM,SAAS,KAAK;EAElC,MAAM,IAAI,SAAe,YAAY;GACnC,MAAM,UAAU,IAAI,eAAe;GACnC,QAAQ,KAAK,KAAK,QAAQ,KAAK,KAAK,IAAI;GACxC,OAAO,QAAQ,KAAK,OAAO,EAAE,SAAS,CAAC,KAAK,WAC1C,QAAQ,iBAAiB,KAAK,OAAO,KAAK,CAAC,CAC7C;GACA,QAAQ,OAAO,cAAc,UAAU;IACrC,IAAI,MAAM,kBAAkB;KAC1B,MAAM,WAAW,KAAK,MAAO,MAAM,SAAS,MAAM,QAAS,GAAG;KAC9D,UAAU,SACR,KAAK,KAAK,UAAW,MAAM,OAAO,KAAK,KAAK;MAAE,GAAG;MAAO;KAAS,IAAI,KAAM,CAC7E;IACF;GACF;GACA,QAAQ,eAAe;IACrB,UAAU,SACR,KAAK,KAAK,UACR,MAAM,OAAO,KAAK,KACd;KACE,GAAG;KACH,QAAQ,QAAQ,SAAS,MAAM,UAAU;KACzC,KAAK,KAAK;KACV,UAAU;IACZ,IACA,KACN,CACF;IACA,QAAQ;GACV;GACA,QAAQ,gBAAgB;IACtB,UAAU,SACR,KAAK,KAAK,UAAW,MAAM,OAAO,KAAK,KAAK;KAAE,GAAG;KAAO,QAAQ;IAAQ,IAAI,KAAM,CACpF;IACA,QAAQ;GACV;GACA,QAAQ,KAAK,IAAI;EACnB,CAAC;CACH;CAEA,SAAS,SAAS,UAAiC;EACjD,IAAI,CAAC,YAAY,QACf;EAGF,MAAM,WAAW,MAAM,KAAK,QAAQ;EACpC,MAAM,OAAO,SAAS,KAAW,UAAU;GACzC,IAAI,OAAO,WAAW;GACtB,MAAM,KAAK;GACX,MAAM,KAAK;GACX,QAAQ,SAAS,cAAc;GAC/B,UAAU;GACV;GACA,KAAK,iBAAiB,IAAI;GAC1B,UAAU;EACZ,EAAE;EAEF,IAAI,CAAC,UAAU;GACb,MAAM,QAAQ,gBAAgB;GAE9B,IAAI,CAAC,OAAO;IACV,MAAM,iBAAiB,MACpB,QAAQ,SAAS,KAAK,YAAY,KAAK,KAAK,EAC5C,KAAK,SAAS,KAAK,KAAe;IAErC,IAAI,eAAe,SAAS,GAC1B,kBAAkB,WAAW,CAAC,GAAG,QAAQ,GAAG,cAAc,CAAC;GAE/D;EACF;EAEA,UAAU,SAAU,WAAW,CAAC,GAAG,MAAM,GAAG,IAAI,IAAI,IAAK;EAEzD,IAAI,QACF,KAAK,SAAS,MAAM,UAAU,KAAK,cAAc,MAAM,SAAS,MAAM,CAAC;CAE3E;CAEA,SAAS,WAAW,IAAkB;EACpC,MAAM,SAAS,MAAM,MAAM,SAAS,KAAK,OAAO,EAAE;EAElD,IAAI,QACF,iBAAiB,MAAM;EAGzB,UAAU,SAAS;GACjB,IAAI,QAAQ,YAAY,OAAO,SAAS,CAAC,OACvC,kBAAkB,WAAW,CAAC,GAAG,QAAQ,OAAO,KAAe,CAAC;GAElE,OAAO,KAAK,QAAQ,MAAM,EAAE,OAAO,EAAE;EACvC,CAAC;CACH;CAEA,IAAI,QACF,OAAO;CAGT,OACE,oBAAC,gBAAD;EACE,OAAO,OAAO;EACd,YAAY,MAAM,cAAc,KAAA;EAChC,SAAS,MAAM,WAAW,KAAA;EAC1B,OAAO,MAAM,SAAS;EAChB;EACI;YAEV,qBAAC,OAAD;GACE,WAAU;GACV,aAAW,aAAa,IAAI;GAC5B,aAAa,UAAU,MAAM,eAAe;GAC5C,SAAS,UAAU;IACjB,MAAM,eAAe;IACrB,SAAS,MAAM,aAAa,KAAK;GACnC;aAPF;IASE,oBAAC,UAAD;KACE,WAAU;KACV,UAAU;KACV,eAAe,aAAa,SAAS,MAAM;KAC3C,MAAK;eAEJ,EAAE,wBAAwB,oCAAoC;IACzD,CAAA;IAER,oBAAC,MAAD;KACE,WAAW,MAAM,QAAQ,0CAA0C;eAElE,MAAM,KAAK,SACV,qBAAC,MAAD;MACE,WACE,MAAM,QACF,+FACA;gBAJR;OAQG,MAAM,SAAS,KAAK,MACnB,oBAAC,OAAD;QACE,KAAK,KAAK;QACV,WAAU;QACV,aAAW,aAAa,GAAG,KAAK,SAAS;QACzC,KAAK,KAAK;OACX,CAAA,IACC;OACJ,qBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,oBAAC,QAAD;UAAM,WAAU;UAAiB,aAAW,aAAa,GAAG,KAAK,MAAM;oBACpE,KAAK;SACF,CAAA;SACL,KAAK,WAAW,eACf,qBAAC,QAAD;UAAM,WAAU;oBAAhB,CAA4C,KAAK,UAAS,GAAO;;SAElE,KAAK,WAAW,WACf,oBAAC,QAAD;UAAM,WAAU;oBACb,EAAE,sBAAsB,QAAQ;SAC7B,CAAA;QAEL;;QACH,CAAC,KAAK,YAAY,CAAC,UACnB,oBAAC,UAAD;QACE,cAAY,EAAE,sBAAsB,mBAAmB,EAAE,MAAM,KAAK,KAAK,CAAC;QAC1E,WAAU;QACV,aAAW,KAAK,WAAW,aAAa,GAAG,KAAK,iBAAiB,IAAI,KAAA;QACrE,UAAU;QACV,eAAe,WAAW,KAAK,EAAE;QACjC,MAAK;kBAEL,oBAAC,MAAD;SAAM,MAAK;SAAI,eAAY;SAAO,WAAU;QAAmB,CAAA;OACzD,CAAA;OAET,UAAU,CAAC,KAAK,YAAY,KAAK,OAAO,KAAK,WAAW,WACvD,oBAAC,SAAD;QACE,aAAW,aAAa,GAAG,KAAK,UAAU;QAC1C,MAAM;QACN,MAAK;QACL,OAAO,KAAK;OACb,CAAA;MAED;QA3CG,KAAK,EA2CR,CACL;IACC,CAAA;IAEH,CAAC,SACA,cAAc,KAAK,UACjB,oBAAC,SAAD;KAAmB,MAAM,GAAG,KAAK;KAAc,MAAK;KAAS,OAAO;IAAQ,GAAhE,KAAgE,CAC7E;IAEH,oBAAC,SAAD;KACE,QAAQ,MAAM,UAAU,KAAA;KACxB,cAAY,MAAM,SAAS;KAC3B,WAAU;KACV,aAAW,aAAa,GAAG,KAAK,OAAO;KACvC,IAAI;KACM;KACV,MAAM,SAAS,KAAA,IAAY;KAC3B,WAAW,UAAU;MACnB,SAAS,MAAM,OAAO,KAAK;MAC3B,IAAI,QACF,MAAM,OAAO,QAAQ;KAEzB;KACA,KAAK;KACL,MAAK;IACN,CAAA;GACE;;CACS,CAAA;AAEpB"}
+{"version":3,"file":"file-upload.js","names":[],"sources":["../../../../resources/js/form/components/fields/file-upload.tsx"],"sourcesContent":["import { apiFetch } from \"@lattice-php/lattice/core/api\";\nimport { testIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useFormContext } from \"../context\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useFieldScope } from \"../field-scope\";\nimport { useFormValues, useSetFormValue } from \"../values\";\n\ntype Item = {\n  id: string;\n  name: string;\n  size: number | null;\n  status: \"ready\" | \"uploading\" | \"error\";\n  progress: number;\n  file?: File;\n  key?: string;\n  url?: string | null;\n  token?: string;\n  existing: boolean;\n};\n\ntype SignResponse = {\n  key: string;\n  url: string;\n  headers: Record<string, string>;\n  method: string;\n};\n\nfunction uploadValueEquals(current: unknown, next: string[] | string): boolean {\n  if (Array.isArray(next)) {\n    return (\n      Array.isArray(current) &&\n      current.length === next.length &&\n      current.every((value, index) => value === next[index])\n    );\n  }\n\n  return current === next;\n}\n\nexport const FileUploadComponent: RendererComponent<\"field.file-upload\"> = ({ node }) => {\n  const { t } = useT(\"lattice\");\n  const props = node.props;\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const { action, componentRef, errors } = useFormContext();\n  const name = props.name;\n  const scope = useFieldScope();\n  const domName = scope ? scope.scopedName(name) : name;\n  const errorKey = scope ? scope.errorKey(name) : name;\n  const uploadKey = errorKey;\n  const values = useFormValues();\n  const setValue = useSetFormValue();\n  const inputId = useId();\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const previewUrlsRef = useRef<Set<string>>(new Set());\n  const locked = readOnly || disabled;\n  const signed = props.signed;\n  const multiple = props.multiple;\n  const fieldName = multiple ? `${domName}[]` : domName;\n\n  const initial = useMemo<Item[]>(\n    () =>\n      (props.files ?? []).map((file) => ({\n        id: crypto.randomUUID(),\n        name: file.name,\n        size: file.size,\n        status: \"ready\" as const,\n        progress: 100,\n        key: file.key,\n        url: file.url,\n        token: file.token,\n        existing: true,\n      })),\n    [props.files],\n  );\n  const [items, setItems] = useState<Item[]>(initial);\n  const [removedTokens, setRemovedTokens] = useState<string[]>([]);\n\n  useEffect(() => {\n    if (!signed) {\n      return;\n    }\n\n    const keys = items\n      .filter((item) => !item.existing && item.key && item.status === \"ready\")\n      .map((item) => item.key as string);\n    const next = multiple ? keys : (keys[0] ?? \"\");\n\n    if (scope) {\n      if (!uploadValueEquals(scope.getValue(name), next)) {\n        scope.setValue(name, next);\n      }\n\n      return;\n    }\n\n    setValue(name, next);\n  }, [items, multiple, name, scope, setValue, signed]);\n\n  useEffect(() => {\n    if (!signed || scope) {\n      return;\n    }\n\n    setValue(`${name}__removed`, removedTokens);\n  }, [name, removedTokens, scope, setValue, signed]);\n\n  useEffect(\n    () => () => {\n      previewUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));\n      previewUrlsRef.current.clear();\n    },\n    [],\n  );\n\n  const multipartFiles = items\n    .filter((item) => item.file && !item.existing)\n    .map((item) => item.file as File);\n  useEffect(() => {\n    if (signed || !fileInputRef.current) {\n      return;\n    }\n\n    const transfer = new DataTransfer();\n    multipartFiles.forEach((file) => transfer.items.add(file));\n    fileInputRef.current.files = transfer.files;\n  });\n\n  function createPreviewUrl(file: File): string | undefined {\n    if (!props.image) {\n      return undefined;\n    }\n\n    const url = URL.createObjectURL(file);\n    previewUrlsRef.current.add(url);\n\n    return url;\n  }\n\n  function revokePreviewUrl(item: Item): void {\n    if (!item.url || !previewUrlsRef.current.has(item.url)) {\n      return;\n    }\n\n    URL.revokeObjectURL(item.url);\n    previewUrlsRef.current.delete(item.url);\n  }\n\n  async function signAndUpload(item: Item, file: File): Promise<void> {\n    const response = await apiFetch(action, {\n      method: \"POST\",\n      ref: componentRef,\n      body: JSON.stringify({\n        ...values,\n        _upload: uploadKey,\n        filename: file.name,\n        contentType: file.type,\n      }),\n      throwOnError: false,\n    });\n\n    if (!response.ok) {\n      setItems((prev) =>\n        prev.map((entry) => (entry.id === item.id ? { ...entry, status: \"error\" } : entry)),\n      );\n\n      return;\n    }\n\n    const sign = (await response.json()) as SignResponse;\n\n    await new Promise<void>((resolve) => {\n      const request = new XMLHttpRequest();\n      request.open(sign.method, sign.url, true);\n      Object.entries(sign.headers).forEach(([key, value]) =>\n        request.setRequestHeader(key, String(value)),\n      );\n      request.upload.onprogress = (event) => {\n        if (event.lengthComputable) {\n          const progress = Math.round((event.loaded / event.total) * 100);\n          setItems((prev) =>\n            prev.map((entry) => (entry.id === item.id ? { ...entry, progress } : entry)),\n          );\n        }\n      };\n      request.onload = () => {\n        setItems((prev) =>\n          prev.map((entry) =>\n            entry.id === item.id\n              ? {\n                  ...entry,\n                  status: request.status < 300 ? \"ready\" : \"error\",\n                  key: sign.key,\n                  progress: 100,\n                }\n              : entry,\n          ),\n        );\n        resolve();\n      };\n      request.onerror = () => {\n        setItems((prev) =>\n          prev.map((entry) => (entry.id === item.id ? { ...entry, status: \"error\" } : entry)),\n        );\n        resolve();\n      };\n      request.send(file);\n    });\n  }\n\n  function addFiles(fileList: FileList | null): void {\n    if (!fileList || locked) {\n      return;\n    }\n\n    const incoming = Array.from(fileList);\n    const next = incoming.map<Item>((file) => ({\n      id: crypto.randomUUID(),\n      name: file.name,\n      size: file.size,\n      status: signed ? \"uploading\" : \"ready\",\n      progress: 0,\n      file,\n      url: createPreviewUrl(file),\n      existing: false,\n    }));\n\n    if (!multiple) {\n      items.forEach(revokePreviewUrl);\n\n      if (!scope) {\n        const replacedTokens = items\n          .filter((item) => item.existing && item.token)\n          .map((item) => item.token as string);\n\n        if (replacedTokens.length > 0) {\n          setRemovedTokens((tokens) => [...tokens, ...replacedTokens]);\n        }\n      }\n    }\n\n    setItems((prev) => (multiple ? [...prev, ...next] : next));\n\n    if (signed) {\n      next.forEach((item, index) => void signAndUpload(item, incoming[index]));\n    }\n  }\n\n  function removeItem(id: string): void {\n    const target = items.find((item) => item.id === id);\n\n    if (target) {\n      revokePreviewUrl(target);\n    }\n\n    setItems((prev) => {\n      if (target?.existing && target.token && !scope) {\n        setRemovedTokens((tokens) => [...tokens, target.token as string]);\n      }\n      return prev.filter((i) => i.id !== id);\n    });\n  }\n\n  if (hidden) {\n    return null;\n  }\n\n  return (\n    <FormFieldFrame\n      error={errors[errorKey]}\n      helperText={props.helperText ?? undefined}\n      tooltip={props.tooltip ?? undefined}\n      label={props.label ?? \"\"}\n      name={name}\n      required={required}\n    >\n      <div\n        className=\"flex flex-col gap-3 rounded-lt-sm border border-dashed border-lt-border bg-lt-surface px-4 py-6\"\n        data-test={testIdentity(name)}\n        onDragOver={(event) => event.preventDefault()}\n        onDrop={(event) => {\n          event.preventDefault();\n          addFiles(event.dataTransfer.files);\n        }}\n      >\n        <button\n          className=\"text-sm text-lt-muted-fg\"\n          disabled={locked}\n          onClick={() => fileInputRef.current?.click()}\n          type=\"button\"\n        >\n          {t(\"file-upload.dropzone\", \"Drop files here or click to browse\")}\n        </button>\n\n        <ul\n          className={props.image ? \"grid grid-cols-1 gap-3 sm:grid-cols-2\" : \"flex flex-col gap-2\"}\n        >\n          {items.map((item) => (\n            <li\n              className={\n                props.image\n                  ? \"flex min-w-0 items-center gap-3 rounded-lt-sm border border-lt-border bg-lt-bg p-2 text-sm\"\n                  : \"flex items-center justify-between gap-3 text-sm\"\n              }\n              key={item.id}\n            >\n              {props.image && item.url ? (\n                <img\n                  alt={item.name}\n                  className=\"size-16 shrink-0 rounded-lt-sm border border-lt-border object-cover\"\n                  data-test={testIdentity(`${name}-preview`)}\n                  src={item.url}\n                />\n              ) : null}\n              <div className=\"min-w-0 flex-1\">\n                <span className=\"block truncate\" data-test={testIdentity(`${name}-item`)}>\n                  {item.name}\n                </span>\n                {item.status === \"uploading\" && (\n                  <span className=\"text-xs text-lt-muted-fg\">{item.progress}%</span>\n                )}\n                {item.status === \"error\" && (\n                  <span className=\"text-xs text-lt-danger\">\n                    {t(\"file-upload.failed\", \"Failed\")}\n                  </span>\n                )}\n              </div>\n              {(!item.existing || !scope) && (\n                <button\n                  aria-label={t(\"file-upload.remove\", \"Remove {{name}}\", { name: item.name })}\n                  className=\"inline-flex size-7 shrink-0 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg disabled:pointer-events-none disabled:opacity-50\"\n                  data-test={testIdentity(\n                    item.existing ? `${name}-remove-existing` : `${name}-remove`,\n                  )}\n                  disabled={locked}\n                  onClick={() => removeItem(item.id)}\n                  type=\"button\"\n                >\n                  <Icon name=\"x\" aria-hidden=\"true\" className=\"size-lt-icon-sm\" />\n                </button>\n              )}\n              {signed && !item.existing && item.key && item.status === \"ready\" && (\n                <input\n                  data-test={testIdentity(`${name}-uploaded`)}\n                  name={fieldName}\n                  type=\"hidden\"\n                  value={item.key}\n                />\n              )}\n            </li>\n          ))}\n        </ul>\n\n        {!scope &&\n          removedTokens.map((token) => (\n            <input key={token} name={`${name}__removed[]`} type=\"hidden\" value={token} />\n          ))}\n\n        <input\n          accept={props.accept ?? undefined}\n          aria-label={props.label ?? name}\n          className=\"sr-only\"\n          data-test={testIdentity(`${name}-input`)}\n          id={inputId}\n          multiple={multiple}\n          name={signed ? undefined : fieldName}\n          onChange={(event) => {\n            addFiles(event.target.files);\n            if (signed) {\n              event.target.value = \"\";\n            }\n          }}\n          ref={fileInputRef}\n          type=\"file\"\n        />\n      </div>\n    </FormFieldFrame>\n  );\n};\n"],"mappings":"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"}

package/dist/form/components/fields/number-input.js

@@ -1,5 +1,6 @@
 import { Input } from "../base/input.js";
 import { SimpleField } from "./simple-field.js";
+import { AffixGroup } from "../base/affix-group.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/number-input.tsx
 var NumberInputComponent = ({ node }) => {
@@ -29,21 +30,26 @@ var NumberInputComponent = ({ node }) => {
 					className: "w-10 shrink-0 text-right text-sm tabular-nums text-lt-fg",
 					children: value
 				})]
-			}) : /* @__PURE__ */ jsx(Input, {
-				autoFocus: props.autoFocus ?? false,
-				"data-test": testId,
-				disabled,
-				id: name,
-				max: props.max ?? void 0,
-				min: props.min ?? void 0,
-				name,
-				onChange,
-				placeholder: props.placeholder ?? "",
-				readOnly,
-				step: props.step ?? void 0,
-				tabIndex: props.tabIndex ?? void 0,
-				type: "number",
-				value
+			}) : /* @__PURE__ */ jsx(AffixGroup, {
+				prefix: props.prefix,
+				suffix: props.suffix,
+				children: (controlClassName) => /* @__PURE__ */ jsx(Input, {
+					autoFocus: props.autoFocus ?? false,
+					className: controlClassName,
+					"data-test": testId,
+					disabled,
+					id: name,
+					max: props.max ?? void 0,
+					min: props.min ?? void 0,
+					name,
+					onChange,
+					placeholder: props.placeholder ?? "",
+					readOnly,
+					step: props.step ?? void 0,
+					tabIndex: props.tabIndex ?? void 0,
+					type: "number",
+					value
+				})
 			});
 		}
 	});

package/dist/form/components/fields/number-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/number-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { Input } from \"../base/input\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const NumberInputComponent: RendererComponent<\"field.number-input\"> = ({ node }) => {\n  const props = node.props;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, testId, value, readOnly, disabled, commit }) => {\n        const onChange = (event: React.ChangeEvent<HTMLInputElement>): void =>\n          commit(event.target.value);\n\n        return props.slider ? (\n          <div className=\"flex items-center gap-3\">\n            <input\n              aria-label={props.label ?? \"\"}\n              className=\"h-2 w-full cursor-pointer appearance-none rounded-lt-sm bg-lt-muted accent-lt-primary disabled:cursor-not-allowed disabled:opacity-50\"\n              data-test={testId}\n              disabled={disabled || readOnly}\n              id={name}\n              max={props.max ?? undefined}\n              min={props.min ?? undefined}\n              name={name}\n              onChange={onChange}\n              step={props.step ?? undefined}\n              tabIndex={props.tabIndex ?? undefined}\n              type=\"range\"\n              value={value}\n            />\n            <output className=\"w-10 shrink-0 text-right text-sm tabular-nums text-lt-fg\">\n              {value}\n            </output>\n          </div>\n        ) : (\n          <Input\n            autoFocus={props.autoFocus ?? false}\n            data-test={testId}\n            disabled={disabled}\n            id={name}\n            max={props.max ?? undefined}\n            min={props.min ?? undefined}\n            name={name}\n            onChange={onChange}\n            placeholder={props.placeholder ?? \"\"}\n            readOnly={readOnly}\n            step={props.step ?? undefined}\n            tabIndex={props.tabIndex ?? undefined}\n            type=\"number\"\n            value={value}\n          />\n        );\n      }}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;AAIA,IAAa,wBAAiE,EAAE,WAAW;CACzF,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;aAC3C,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAU,aAAa;GACxD,MAAM,YAAY,UAChB,OAAO,MAAM,OAAO,KAAK;GAE3B,OAAO,MAAM,SACX,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,SAAD;KACE,cAAY,MAAM,SAAS;KAC3B,WAAU;KACV,aAAW;KACX,UAAU,YAAY;KACtB,IAAI;KACJ,KAAK,MAAM,OAAO,KAAA;KAClB,KAAK,MAAM,OAAO,KAAA;KACZ;KACI;KACV,MAAM,MAAM,QAAQ,KAAA;KACpB,UAAU,MAAM,YAAY,KAAA;KAC5B,MAAK;KACE;IACR,CAAA,GACD,oBAAC,UAAD;KAAQ,WAAU;eACf;IACK,CAAA,CACL;QAEL,oBAAC,OAAD;IACE,WAAW,MAAM,aAAa;IAC9B,aAAW;IACD;IACV,IAAI;IACJ,KAAK,MAAM,OAAO,KAAA;IAClB,KAAK,MAAM,OAAO,KAAA;IACZ;IACI;IACV,aAAa,MAAM,eAAe;IACxB;IACV,MAAM,MAAM,QAAQ,KAAA;IACpB,UAAU,MAAM,YAAY,KAAA;IAC5B,MAAK;IACE;GACR,CAAA;EAEL;CACW,CAAA;AAEjB"}
+{"version":3,"file":"number-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/number-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { AffixGroup } from \"../base/affix-group\";\nimport { Input } from \"../base/input\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const NumberInputComponent: RendererComponent<\"field.number-input\"> = ({ node }) => {\n  const props = node.props;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, testId, value, readOnly, disabled, commit }) => {\n        const onChange = (event: React.ChangeEvent<HTMLInputElement>): void =>\n          commit(event.target.value);\n\n        return props.slider ? (\n          <div className=\"flex items-center gap-3\">\n            <input\n              aria-label={props.label ?? \"\"}\n              className=\"h-2 w-full cursor-pointer appearance-none rounded-lt-sm bg-lt-muted accent-lt-primary disabled:cursor-not-allowed disabled:opacity-50\"\n              data-test={testId}\n              disabled={disabled || readOnly}\n              id={name}\n              max={props.max ?? undefined}\n              min={props.min ?? undefined}\n              name={name}\n              onChange={onChange}\n              step={props.step ?? undefined}\n              tabIndex={props.tabIndex ?? undefined}\n              type=\"range\"\n              value={value}\n            />\n            <output className=\"w-10 shrink-0 text-right text-sm tabular-nums text-lt-fg\">\n              {value}\n            </output>\n          </div>\n        ) : (\n          <AffixGroup prefix={props.prefix} suffix={props.suffix}>\n            {(controlClassName) => (\n              <Input\n                autoFocus={props.autoFocus ?? false}\n                className={controlClassName}\n                data-test={testId}\n                disabled={disabled}\n                id={name}\n                max={props.max ?? undefined}\n                min={props.min ?? undefined}\n                name={name}\n                onChange={onChange}\n                placeholder={props.placeholder ?? \"\"}\n                readOnly={readOnly}\n                step={props.step ?? undefined}\n                tabIndex={props.tabIndex ?? undefined}\n                type=\"number\"\n                value={value}\n              />\n            )}\n          </AffixGroup>\n        );\n      }}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAa,wBAAiE,EAAE,WAAW;CACzF,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;aAC3C,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAU,aAAa;GACxD,MAAM,YAAY,UAChB,OAAO,MAAM,OAAO,KAAK;GAE3B,OAAO,MAAM,SACX,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,SAAD;KACE,cAAY,MAAM,SAAS;KAC3B,WAAU;KACV,aAAW;KACX,UAAU,YAAY;KACtB,IAAI;KACJ,KAAK,MAAM,OAAO,KAAA;KAClB,KAAK,MAAM,OAAO,KAAA;KACZ;KACI;KACV,MAAM,MAAM,QAAQ,KAAA;KACpB,UAAU,MAAM,YAAY,KAAA;KAC5B,MAAK;KACE;IACR,CAAA,GACD,oBAAC,UAAD;KAAQ,WAAU;eACf;IACK,CAAA,CACL;QAEL,oBAAC,YAAD;IAAY,QAAQ,MAAM;IAAQ,QAAQ,MAAM;eAC5C,qBACA,oBAAC,OAAD;KACE,WAAW,MAAM,aAAa;KAC9B,WAAW;KACX,aAAW;KACD;KACV,IAAI;KACJ,KAAK,MAAM,OAAO,KAAA;KAClB,KAAK,MAAM,OAAO,KAAA;KACZ;KACI;KACV,aAAa,MAAM,eAAe;KACxB;KACV,MAAM,MAAM,QAAQ,KAAA;KACpB,UAAU,MAAM,YAAY,KAAA;KAC5B,MAAK;KACE;IACR,CAAA;GAEO,CAAA;EAEhB;CACW,CAAA;AAEjB"}

package/dist/form/components/fields/password-input.js

@@ -4,6 +4,7 @@ import { useFieldScope } from "../field-scope.js";
 import { FormFieldFrame } from "../base/field.js";
 import { useFieldCommit } from "../use-field-commit.js";
 import { useControlledField } from "../use-controlled-field.js";
+import { AffixGroup } from "../base/affix-group.js";
 import PasswordInput from "../base/password-input.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/password-input.tsx
@@ -29,21 +30,26 @@ var PasswordInputComponent = ({ node }) => {
 			labelAction: props.labelAction ?? void 0,
 			name: field.name,
 			required: field.required,
-			children: /* @__PURE__ */ jsx(PasswordInput, {
-				autoComplete: props.autoComplete ?? "",
-				autoFocus: props.autoFocus ?? false,
-				"data-test": field.testId,
-				disabled: field.disabled,
-				id: field.name,
-				name: field.name,
-				onChange: (event) => {
-					field.commit(event.target.value);
-				},
-				placeholder: props.placeholder ?? "",
-				passwordrules: passwordRules,
-				readOnly: field.readOnly,
-				tabIndex: props.tabIndex ?? void 0,
-				value: field.value
+			children: /* @__PURE__ */ jsx(AffixGroup, {
+				prefix: props.prefix,
+				suffix: props.suffix,
+				children: (controlClassName) => /* @__PURE__ */ jsx(PasswordInput, {
+					autoComplete: props.autoComplete ?? "",
+					autoFocus: props.autoFocus ?? false,
+					className: controlClassName,
+					"data-test": field.testId,
+					disabled: field.disabled,
+					id: field.name,
+					name: field.name,
+					onChange: (event) => {
+						field.commit(event.target.value);
+					},
+					placeholder: props.placeholder ?? "",
+					passwordrules: passwordRules,
+					readOnly: field.readOnly,
+					tabIndex: props.tabIndex ?? void 0,
+					value: field.value
+				})
 			})
 		}), confirmation && /* @__PURE__ */ jsx(FormFieldFrame, {
 			error: errors[confirmationErrorKey],

package/dist/form/components/fields/password-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"password-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/password-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { testIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport { FormFieldFrame } from \"../base/field\";\nimport PasswordInput from \"../base/password-input\";\nimport { useFieldScope } from \"../field-scope\";\nimport { useControlledField } from \"../use-controlled-field\";\nimport { useFieldCommit } from \"../use-field-commit\";\nimport { useFormContext } from \"../context\";\n\nexport const PasswordInputComponent: RendererComponent<\"field.password-input\"> = ({ node }) => {\n  const props = node.props;\n  const { errors } = useFormContext();\n  const field = useControlledField(node);\n  const { commit } = useFieldCommit();\n  const scope = useFieldScope();\n  const confirmation = props.confirmation;\n  const confirmationLocalName = confirmation?.name ?? `${field.localName}_confirmation`;\n  const confirmationName = scope ? scope.scopedName(confirmationLocalName) : confirmationLocalName;\n  const confirmationErrorKey = scope\n    ? scope.errorKey(confirmationLocalName)\n    : confirmationLocalName;\n  const passwordRules = (props.passwordRules ?? \"\") || undefined;\n\n  if (field.hidden) {\n    return null;\n  }\n\n  return (\n    <div className=\"grid gap-6\">\n      <FormFieldFrame\n        error={field.error}\n        helperText={props.helperText ?? undefined}\n        tooltip={props.tooltip ?? undefined}\n        label={props.label ?? \"\"}\n        labelAction={props.labelAction ?? undefined}\n        name={field.name}\n        required={field.required}\n      >\n        <PasswordInput\n          autoComplete={props.autoComplete ?? \"\"}\n          autoFocus={props.autoFocus ?? false}\n          data-test={field.testId}\n          disabled={field.disabled}\n          id={field.name}\n          name={field.name}\n          onChange={(event) => {\n            field.commit(event.target.value);\n          }}\n          placeholder={props.placeholder ?? \"\"}\n          passwordrules={passwordRules}\n          readOnly={field.readOnly}\n          tabIndex={props.tabIndex ?? undefined}\n          value={field.value}\n        />\n      </FormFieldFrame>\n\n      {confirmation && (\n        <FormFieldFrame\n          error={errors[confirmationErrorKey]}\n          label={confirmation.label ?? \"Confirm password\"}\n          name={confirmationName}\n          required={field.required}\n        >\n          <PasswordInput\n            autoComplete=\"new-password\"\n            data-test={testIdentity(confirmationLocalName)}\n            disabled={field.disabled}\n            id={confirmationName}\n            name={confirmationName}\n            onChange={(event) => {\n              commit(confirmationLocalName, event.target.value);\n            }}\n            placeholder={confirmation.placeholder ?? confirmation.label ?? \"Confirm password\"}\n            passwordrules={passwordRules}\n            readOnly={field.readOnly}\n            tabIndex={props.tabIndex ?? undefined}\n          />\n        </FormFieldFrame>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AASA,IAAa,0BAAqE,EAAE,WAAW;CAC7F,MAAM,QAAQ,KAAK;CACnB,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,QAAQ,mBAAmB,IAAI;CACrC,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,QAAQ,cAAc;CAC5B,MAAM,eAAe,MAAM;CAC3B,MAAM,wBAAwB,cAAc,QAAQ,GAAG,MAAM,UAAU;CACvE,MAAM,mBAAmB,QAAQ,MAAM,WAAW,qBAAqB,IAAI;CAC3E,MAAM,uBAAuB,QACzB,MAAM,SAAS,qBAAqB,IACpC;CACJ,MAAM,iBAAiB,MAAM,iBAAiB,OAAO,KAAA;CAErD,IAAI,MAAM,QACR,OAAO;CAGT,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,gBAAD;GACE,OAAO,MAAM;GACb,YAAY,MAAM,cAAc,KAAA;GAChC,SAAS,MAAM,WAAW,KAAA;GAC1B,OAAO,MAAM,SAAS;GACtB,aAAa,MAAM,eAAe,KAAA;GAClC,MAAM,MAAM;GACZ,UAAU,MAAM;aAEhB,oBAAC,eAAD;IACE,cAAc,MAAM,gBAAgB;IACpC,WAAW,MAAM,aAAa;IAC9B,aAAW,MAAM;IACjB,UAAU,MAAM;IAChB,IAAI,MAAM;IACV,MAAM,MAAM;IACZ,WAAW,UAAU;KACnB,MAAM,OAAO,MAAM,OAAO,KAAK;IACjC;IACA,aAAa,MAAM,eAAe;IAClC,eAAe;IACf,UAAU,MAAM;IAChB,UAAU,MAAM,YAAY,KAAA;IAC5B,OAAO,MAAM;GACd,CAAA;EACa,CAAA,GAEf,gBACC,oBAAC,gBAAD;GACE,OAAO,OAAO;GACd,OAAO,aAAa,SAAS;GAC7B,MAAM;GACN,UAAU,MAAM;aAEhB,oBAAC,eAAD;IACE,cAAa;IACb,aAAW,aAAa,qBAAqB;IAC7C,UAAU,MAAM;IAChB,IAAI;IACJ,MAAM;IACN,WAAW,UAAU;KACnB,OAAO,uBAAuB,MAAM,OAAO,KAAK;IAClD;IACA,aAAa,aAAa,eAAe,aAAa,SAAS;IAC/D,eAAe;IACf,UAAU,MAAM;IAChB,UAAU,MAAM,YAAY,KAAA;GAC7B,CAAA;EACa,CAAA,CAEf;;AAET"}
+{"version":3,"file":"password-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/password-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { testIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport { AffixGroup } from \"../base/affix-group\";\nimport { FormFieldFrame } from \"../base/field\";\nimport PasswordInput from \"../base/password-input\";\nimport { useFieldScope } from \"../field-scope\";\nimport { useControlledField } from \"../use-controlled-field\";\nimport { useFieldCommit } from \"../use-field-commit\";\nimport { useFormContext } from \"../context\";\n\nexport const PasswordInputComponent: RendererComponent<\"field.password-input\"> = ({ node }) => {\n  const props = node.props;\n  const { errors } = useFormContext();\n  const field = useControlledField(node);\n  const { commit } = useFieldCommit();\n  const scope = useFieldScope();\n  const confirmation = props.confirmation;\n  const confirmationLocalName = confirmation?.name ?? `${field.localName}_confirmation`;\n  const confirmationName = scope ? scope.scopedName(confirmationLocalName) : confirmationLocalName;\n  const confirmationErrorKey = scope\n    ? scope.errorKey(confirmationLocalName)\n    : confirmationLocalName;\n  const passwordRules = (props.passwordRules ?? \"\") || undefined;\n\n  if (field.hidden) {\n    return null;\n  }\n\n  return (\n    <div className=\"grid gap-6\">\n      <FormFieldFrame\n        error={field.error}\n        helperText={props.helperText ?? undefined}\n        tooltip={props.tooltip ?? undefined}\n        label={props.label ?? \"\"}\n        labelAction={props.labelAction ?? undefined}\n        name={field.name}\n        required={field.required}\n      >\n        <AffixGroup prefix={props.prefix} suffix={props.suffix}>\n          {(controlClassName) => (\n            <PasswordInput\n              autoComplete={props.autoComplete ?? \"\"}\n              autoFocus={props.autoFocus ?? false}\n              className={controlClassName}\n              data-test={field.testId}\n              disabled={field.disabled}\n              id={field.name}\n              name={field.name}\n              onChange={(event) => {\n                field.commit(event.target.value);\n              }}\n              placeholder={props.placeholder ?? \"\"}\n              passwordrules={passwordRules}\n              readOnly={field.readOnly}\n              tabIndex={props.tabIndex ?? undefined}\n              value={field.value}\n            />\n          )}\n        </AffixGroup>\n      </FormFieldFrame>\n\n      {confirmation && (\n        <FormFieldFrame\n          error={errors[confirmationErrorKey]}\n          label={confirmation.label ?? \"Confirm password\"}\n          name={confirmationName}\n          required={field.required}\n        >\n          <PasswordInput\n            autoComplete=\"new-password\"\n            data-test={testIdentity(confirmationLocalName)}\n            disabled={field.disabled}\n            id={confirmationName}\n            name={confirmationName}\n            onChange={(event) => {\n              commit(confirmationLocalName, event.target.value);\n            }}\n            placeholder={confirmation.placeholder ?? confirmation.label ?? \"Confirm password\"}\n            passwordrules={passwordRules}\n            readOnly={field.readOnly}\n            tabIndex={props.tabIndex ?? undefined}\n          />\n        </FormFieldFrame>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAUA,IAAa,0BAAqE,EAAE,WAAW;CAC7F,MAAM,QAAQ,KAAK;CACnB,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,QAAQ,mBAAmB,IAAI;CACrC,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,QAAQ,cAAc;CAC5B,MAAM,eAAe,MAAM;CAC3B,MAAM,wBAAwB,cAAc,QAAQ,GAAG,MAAM,UAAU;CACvE,MAAM,mBAAmB,QAAQ,MAAM,WAAW,qBAAqB,IAAI;CAC3E,MAAM,uBAAuB,QACzB,MAAM,SAAS,qBAAqB,IACpC;CACJ,MAAM,iBAAiB,MAAM,iBAAiB,OAAO,KAAA;CAErD,IAAI,MAAM,QACR,OAAO;CAGT,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,gBAAD;GACE,OAAO,MAAM;GACb,YAAY,MAAM,cAAc,KAAA;GAChC,SAAS,MAAM,WAAW,KAAA;GAC1B,OAAO,MAAM,SAAS;GACtB,aAAa,MAAM,eAAe,KAAA;GAClC,MAAM,MAAM;GACZ,UAAU,MAAM;aAEhB,oBAAC,YAAD;IAAY,QAAQ,MAAM;IAAQ,QAAQ,MAAM;eAC5C,qBACA,oBAAC,eAAD;KACE,cAAc,MAAM,gBAAgB;KACpC,WAAW,MAAM,aAAa;KAC9B,WAAW;KACX,aAAW,MAAM;KACjB,UAAU,MAAM;KAChB,IAAI,MAAM;KACV,MAAM,MAAM;KACZ,WAAW,UAAU;MACnB,MAAM,OAAO,MAAM,OAAO,KAAK;KACjC;KACA,aAAa,MAAM,eAAe;KAClC,eAAe;KACf,UAAU,MAAM;KAChB,UAAU,MAAM,YAAY,KAAA;KAC5B,OAAO,MAAM;IACd,CAAA;GAEO,CAAA;EACE,CAAA,GAEf,gBACC,oBAAC,gBAAD;GACE,OAAO,OAAO;GACd,OAAO,aAAa,SAAS;GAC7B,MAAM;GACN,UAAU,MAAM;aAEhB,oBAAC,eAAD;IACE,cAAa;IACb,aAAW,aAAa,qBAAqB;IAC7C,UAAU,MAAM;IAChB,IAAI;IACJ,MAAM;IACN,WAAW,UAAU;KACnB,OAAO,uBAAuB,MAAM,OAAO,KAAK;IAClD;IACA,aAAa,aAAa,eAAe,aAAa,SAAS;IAC/D,eAAe;IACf,UAAU,MAAM;IAChB,UAAU,MAAM,YAAY,KAAA;GAC7B,CAAA;EACa,CAAA,CAEf;;AAET"}

package/dist/form/components/fields/rich-editor.js

@@ -238,7 +238,7 @@ function EmojiPicker({ editor }) {
 			type: "button",
 			children: /* @__PURE__ */ jsx(Icon, { name: "smile" })
 		}), open && /* @__PURE__ */ jsx("div", {
-			className: "absolute z-10 mt-1 grid grid-cols-8 gap-0.5 rounded-lt-sm border border-lt-border bg-lt-bg p-1 shadow-md",
+			className: "absolute z-10 mt-1 grid grid-cols-8 gap-0.5 rounded-lt-sm border border-lt-border bg-lt-bg p-1 shadow-lt-md",
 			children: emojis.map((emoji) => /* @__PURE__ */ jsx("button", {
 				className: "inline-flex size-7 items-center justify-center rounded-lt-sm text-base hover:bg-lt-accent",
 				onClick: () => {
@@ -325,7 +325,7 @@ var RichEditorComponent = ({ node }) => {
 		name: domName,
 		required,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: cn("overflow-hidden rounded-lt-sm border border-lt-input bg-transparent shadow-xs focus-within:border-lt-ring focus-within:ring-[3px] focus-within:ring-lt-ring/50", locked && "opacity-60"),
+			className: cn("overflow-hidden rounded-lt-sm border border-lt-input bg-transparent shadow-lt-xs focus-within:border-lt-ring focus-within:ring-[3px] focus-within:ring-lt-ring/50", locked && "opacity-60"),
 			children: [editor && !locked && /* @__PURE__ */ jsx(Toolbar, { editor }), /* @__PURE__ */ jsx(EditorContent, { editor })]
 		}), /* @__PURE__ */ jsx("input", {
 			name: domName,

package/dist/form/components/fields/rich-editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"rich-editor.js","names":[],"sources":["../../../../resources/js/form/components/fields/rich-editor.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { Details, DetailsContent, DetailsSummary } from \"@tiptap/extension-details\";\nimport { Highlight } from \"@tiptap/extension-highlight\";\nimport { Link } from \"@tiptap/extension-link\";\nimport { TableKit } from \"@tiptap/extension-table\";\nimport { TextAlign } from \"@tiptap/extension-text-align\";\nimport { type Editor, EditorContent, useEditor } from \"@tiptap/react\";\nimport { StarterKit } from \"@tiptap/starter-kit\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useFormContext } from \"../context\";\nimport { useFieldScope } from \"../field-scope\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useFieldCommit } from \"../use-field-commit\";\nimport { useFormValue } from \"../values\";\n\ntype ToolbarItem =\n  | \"separator\"\n  | {\n      icon: string;\n      key: string;\n      label: string;\n      isActive: (editor: Editor) => boolean;\n      isDisabled?: (editor: Editor) => boolean;\n      run: (editor: Editor) => void;\n    };\n\nconst toolbar: ToolbarItem[] = [\n  {\n    icon: \"bold\",\n    key: \"bold\",\n    label: \"Bold\",\n    isActive: (e) => e.isActive(\"bold\"),\n    run: (e) => e.chain().focus().toggleBold().run(),\n  },\n  {\n    icon: \"italic\",\n    key: \"italic\",\n    label: \"Italic\",\n    isActive: (e) => e.isActive(\"italic\"),\n    run: (e) => e.chain().focus().toggleItalic().run(),\n  },\n  {\n    icon: \"strikethrough\",\n    key: \"strikethrough\",\n    label: \"Strikethrough\",\n    isActive: (e) => e.isActive(\"strike\"),\n    run: (e) => e.chain().focus().toggleStrike().run(),\n  },\n  {\n    icon: \"underline\",\n    key: \"underline\",\n    label: \"Underline\",\n    isActive: (e) => e.isActive(\"underline\"),\n    run: (e) => e.chain().focus().toggleUnderline().run(),\n  },\n  {\n    icon: \"highlighter\",\n    key: \"highlight\",\n    label: \"Highlight\",\n    isActive: (e) => e.isActive(\"highlight\"),\n    run: (e) => e.chain().focus().toggleHighlight().run(),\n  },\n  \"separator\",\n  {\n    icon: \"heading-1\",\n    key: \"heading-1\",\n    label: \"Heading 1\",\n    isActive: (e) => e.isActive(\"heading\", { level: 1 }),\n    run: (e) => e.chain().focus().toggleHeading({ level: 1 }).run(),\n  },\n  {\n    icon: \"heading-2\",\n    key: \"heading-2\",\n    label: \"Heading 2\",\n    isActive: (e) => e.isActive(\"heading\", { level: 2 }),\n    run: (e) => e.chain().focus().toggleHeading({ level: 2 }).run(),\n  },\n  {\n    icon: \"heading-3\",\n    key: \"heading-3\",\n    label: \"Heading 3\",\n    isActive: (e) => e.isActive(\"heading\", { level: 3 }),\n    run: (e) => e.chain().focus().toggleHeading({ level: 3 }).run(),\n  },\n  \"separator\",\n  {\n    icon: \"list\",\n    key: \"bullet-list\",\n    label: \"Bullet list\",\n    isActive: (e) => e.isActive(\"bulletList\"),\n    run: (e) => e.chain().focus().toggleBulletList().run(),\n  },\n  {\n    icon: \"list-ordered\",\n    key: \"ordered-list\",\n    label: \"Ordered list\",\n    isActive: (e) => e.isActive(\"orderedList\"),\n    run: (e) => e.chain().focus().toggleOrderedList().run(),\n  },\n  {\n    icon: \"quote\",\n    key: \"blockquote\",\n    label: \"Blockquote\",\n    isActive: (e) => e.isActive(\"blockquote\"),\n    run: (e) => e.chain().focus().toggleBlockquote().run(),\n  },\n  {\n    icon: \"code\",\n    key: \"code-block\",\n    label: \"Code block\",\n    isActive: (e) => e.isActive(\"codeBlock\"),\n    run: (e) => e.chain().focus().toggleCodeBlock().run(),\n  },\n  {\n    icon: \"minus\",\n    key: \"horizontal-rule\",\n    label: \"Horizontal rule\",\n    isActive: () => false,\n    run: (e) => e.chain().focus().setHorizontalRule().run(),\n  },\n  \"separator\",\n  {\n    icon: \"align-left\",\n    key: \"align-left\",\n    label: \"Align left\",\n    isActive: (e) => e.isActive({ textAlign: \"left\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"left\").run(),\n  },\n  {\n    icon: \"align-center\",\n    key: \"align-center\",\n    label: \"Align center\",\n    isActive: (e) => e.isActive({ textAlign: \"center\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"center\").run(),\n  },\n  {\n    icon: \"align-right\",\n    key: \"align-right\",\n    label: \"Align right\",\n    isActive: (e) => e.isActive({ textAlign: \"right\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"right\").run(),\n  },\n  {\n    icon: \"align-justify\",\n    key: \"justify\",\n    label: \"Justify\",\n    isActive: (e) => e.isActive({ textAlign: \"justify\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"justify\").run(),\n  },\n  \"separator\",\n  {\n    icon: \"link\",\n    key: \"link\",\n    label: \"Link\",\n    isActive: (e) => e.isActive(\"link\"),\n    run: (e) => {\n      if (e.isActive(\"link\")) {\n        e.chain().focus().unsetLink().run();\n        return;\n      }\n      const url = window.prompt(\"Link URL\");\n      if (url) {\n        e.chain().focus().extendMarkRange(\"link\").setLink({ href: url }).run();\n      }\n    },\n  },\n  \"separator\",\n  {\n    icon: \"table\",\n    key: \"insert-table\",\n    label: \"Insert table\",\n    isActive: (e) => e.isActive(\"table\"),\n    run: (e) => e.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(),\n  },\n  {\n    icon: \"columns-3\",\n    key: \"add-column\",\n    label: \"Add column\",\n    isActive: () => false,\n    isDisabled: (e) => !e.can().addColumnAfter(),\n    run: (e) => e.chain().focus().addColumnAfter().run(),\n  },\n  {\n    icon: \"rows-3\",\n    key: \"add-row\",\n    label: \"Add row\",\n    isActive: () => false,\n    isDisabled: (e) => !e.can().addRowAfter(),\n    run: (e) => e.chain().focus().addRowAfter().run(),\n  },\n  {\n    icon: \"trash-2\",\n    key: \"delete-table\",\n    label: \"Delete table\",\n    isActive: () => false,\n    isDisabled: (e) => !e.can().deleteTable(),\n    run: (e) => e.chain().focus().deleteTable().run(),\n  },\n  {\n    icon: \"chevron-right\",\n    key: \"details\",\n    label: \"Details\",\n    isActive: (e) => e.isActive(\"details\"),\n    run: (e) => {\n      if (e.isActive(\"details\")) {\n        e.chain().focus().unsetDetails().run();\n        return;\n      }\n      e.chain().focus().setDetails().run();\n    },\n  },\n];\n\nconst emojis = [\n  \"😀\",\n  \"😅\",\n  \"😂\",\n  \"🥳\",\n  \"😎\",\n  \"🤔\",\n  \"👍\",\n  \"🙏\",\n  \"🔥\",\n  \"🎉\",\n  \"🚀\",\n  \"💡\",\n  \"✅\",\n  \"❌\",\n  \"⭐\",\n  \"❤️\",\n];\n\nfunction EmojiPicker({ editor }: { editor: Editor }) {\n  const { t } = useT(\"lattice\");\n  const [open, setOpen] = useState(false);\n\n  return (\n    <div className=\"relative\">\n      <button\n        aria-label={t(\"editor.insert-emoji\", \"Insert emoji\")}\n        data-test=\"editor-emoji\"\n        className=\"inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg [&_svg]:size-lt-icon-md\"\n        onClick={() => setOpen((value) => !value)}\n        onMouseDown={(event) => event.preventDefault()}\n        title={t(\"editor.insert-emoji\", \"Insert emoji\")}\n        type=\"button\"\n      >\n        <Icon name=\"smile\" />\n      </button>\n      {open && (\n        <div className=\"absolute z-10 mt-1 grid grid-cols-8 gap-0.5 rounded-lt-sm border border-lt-border bg-lt-bg p-1 shadow-md\">\n          {emojis.map((emoji) => (\n            <button\n              className=\"inline-flex size-7 items-center justify-center rounded-lt-sm text-base hover:bg-lt-accent\"\n              key={emoji}\n              onClick={() => {\n                editor.chain().focus().insertContent(emoji).run();\n                setOpen(false);\n              }}\n              onMouseDown={(event) => event.preventDefault()}\n              type=\"button\"\n            >\n              {emoji}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction Toolbar({ editor }: { editor: Editor }) {\n  const { t } = useT(\"lattice\");\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-0.5 border-b border-lt-border p-1\">\n      {toolbar.map((item, index) => {\n        if (item === \"separator\") {\n          // eslint-disable-next-line react/no-array-index-key\n          return <span key={`sep-${index}`} className=\"mx-1 h-5 w-px bg-lt-border\" />;\n        }\n\n        const label = t(`editor.${item.key}`, item.label);\n\n        return (\n          <button\n            aria-label={label}\n            aria-pressed={item.isActive(editor)}\n            data-test={`editor-${item.key}`}\n            className={cn(\n              \"inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-lt-icon-md\",\n              item.isActive(editor) && \"bg-lt-accent text-lt-accent-fg\",\n            )}\n            disabled={item.isDisabled?.(editor) ?? false}\n            key={item.key}\n            // Keep focus in the editor so toolbar clicks don't blur it (which would\n            // otherwise trigger a precognition request).\n            onClick={() => item.run(editor)}\n            onMouseDown={(event) => event.preventDefault()}\n            title={label}\n            type=\"button\"\n          >\n            <Icon name={item.icon} />\n          </button>\n        );\n      })}\n      <span className=\"mx-1 h-5 w-px bg-lt-border\" />\n      <EmojiPicker editor={editor} />\n    </div>\n  );\n}\n\nexport const RichEditorComponent: RendererComponent<\"field.rich-editor\"> = ({ node }) => {\n  const { errors } = useFormContext();\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const { change, blur } = useFieldCommit();\n  const name = node.props.name;\n  const scope = useFieldScope();\n  const globalValue = useFormValue(name);\n  const storedValue = scope ? scope.getValue(name) : globalValue;\n  const domName = scope ? scope.scopedName(name) : name;\n  const errorKey = scope ? scope.errorKey(name) : name;\n  const locked = readOnly || disabled;\n  const initialContent =\n    typeof storedValue === \"object\" && storedValue !== null\n      ? (storedValue as object)\n      : ((node.props.value as object | undefined) ?? \"\");\n\n  const editor = useEditor({\n    extensions: [\n      StarterKit,\n      Highlight,\n      TextAlign.configure({ types: [\"heading\", \"paragraph\"] }),\n      Link.configure({ openOnClick: false }),\n      TableKit.configure({ table: { resizable: false } }),\n      Details,\n      DetailsSummary,\n      DetailsContent,\n    ],\n    content: initialContent,\n    editable: !locked,\n    immediatelyRender: false,\n    editorProps: {\n      attributes: {\n        class: \"lattice-prose min-h-32 px-3 py-2 outline-none\",\n      },\n    },\n    onUpdate: ({ editor: instance }) => {\n      change(name, instance.isEmpty ? null : instance.getJSON());\n    },\n    onBlur: () => {\n      blur(name);\n    },\n  });\n\n  useEffect(() => {\n    editor?.setEditable(!locked);\n  }, [editor, locked]);\n\n  if (hidden) {\n    return null;\n  }\n\n  const submittedValue = storedValue ? JSON.stringify(storedValue) : \"\";\n\n  return (\n    <FormFieldFrame\n      error={errors[errorKey]}\n      helperText={node.props.helperText ?? undefined}\n      tooltip={node.props.tooltip ?? undefined}\n      label={node.props.label ?? \"\"}\n      name={domName}\n      required={required}\n    >\n      <div\n        className={cn(\n          \"overflow-hidden rounded-lt-sm border border-lt-input bg-transparent shadow-xs focus-within:border-lt-ring focus-within:ring-[3px] focus-within:ring-lt-ring/50\",\n          locked && \"opacity-60\",\n        )}\n      >\n        {editor && !locked && <Toolbar editor={editor} />}\n        <EditorContent editor={editor} />\n      </div>\n      <input name={domName} type=\"hidden\" value={submittedValue} />\n    </FormFieldFrame>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"rich-editor.js","names":[],"sources":["../../../../resources/js/form/components/fields/rich-editor.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { Details, DetailsContent, DetailsSummary } from \"@tiptap/extension-details\";\nimport { Highlight } from \"@tiptap/extension-highlight\";\nimport { Link } from \"@tiptap/extension-link\";\nimport { TableKit } from \"@tiptap/extension-table\";\nimport { TextAlign } from \"@tiptap/extension-text-align\";\nimport { type Editor, EditorContent, useEditor } from \"@tiptap/react\";\nimport { StarterKit } from \"@tiptap/starter-kit\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useFormContext } from \"../context\";\nimport { useFieldScope } from \"../field-scope\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useFieldCommit } from \"../use-field-commit\";\nimport { useFormValue } from \"../values\";\n\ntype ToolbarItem =\n  | \"separator\"\n  | {\n      icon: string;\n      key: string;\n      label: string;\n      isActive: (editor: Editor) => boolean;\n      isDisabled?: (editor: Editor) => boolean;\n      run: (editor: Editor) => void;\n    };\n\nconst toolbar: ToolbarItem[] = [\n  {\n    icon: \"bold\",\n    key: \"bold\",\n    label: \"Bold\",\n    isActive: (e) => e.isActive(\"bold\"),\n    run: (e) => e.chain().focus().toggleBold().run(),\n  },\n  {\n    icon: \"italic\",\n    key: \"italic\",\n    label: \"Italic\",\n    isActive: (e) => e.isActive(\"italic\"),\n    run: (e) => e.chain().focus().toggleItalic().run(),\n  },\n  {\n    icon: \"strikethrough\",\n    key: \"strikethrough\",\n    label: \"Strikethrough\",\n    isActive: (e) => e.isActive(\"strike\"),\n    run: (e) => e.chain().focus().toggleStrike().run(),\n  },\n  {\n    icon: \"underline\",\n    key: \"underline\",\n    label: \"Underline\",\n    isActive: (e) => e.isActive(\"underline\"),\n    run: (e) => e.chain().focus().toggleUnderline().run(),\n  },\n  {\n    icon: \"highlighter\",\n    key: \"highlight\",\n    label: \"Highlight\",\n    isActive: (e) => e.isActive(\"highlight\"),\n    run: (e) => e.chain().focus().toggleHighlight().run(),\n  },\n  \"separator\",\n  {\n    icon: \"heading-1\",\n    key: \"heading-1\",\n    label: \"Heading 1\",\n    isActive: (e) => e.isActive(\"heading\", { level: 1 }),\n    run: (e) => e.chain().focus().toggleHeading({ level: 1 }).run(),\n  },\n  {\n    icon: \"heading-2\",\n    key: \"heading-2\",\n    label: \"Heading 2\",\n    isActive: (e) => e.isActive(\"heading\", { level: 2 }),\n    run: (e) => e.chain().focus().toggleHeading({ level: 2 }).run(),\n  },\n  {\n    icon: \"heading-3\",\n    key: \"heading-3\",\n    label: \"Heading 3\",\n    isActive: (e) => e.isActive(\"heading\", { level: 3 }),\n    run: (e) => e.chain().focus().toggleHeading({ level: 3 }).run(),\n  },\n  \"separator\",\n  {\n    icon: \"list\",\n    key: \"bullet-list\",\n    label: \"Bullet list\",\n    isActive: (e) => e.isActive(\"bulletList\"),\n    run: (e) => e.chain().focus().toggleBulletList().run(),\n  },\n  {\n    icon: \"list-ordered\",\n    key: \"ordered-list\",\n    label: \"Ordered list\",\n    isActive: (e) => e.isActive(\"orderedList\"),\n    run: (e) => e.chain().focus().toggleOrderedList().run(),\n  },\n  {\n    icon: \"quote\",\n    key: \"blockquote\",\n    label: \"Blockquote\",\n    isActive: (e) => e.isActive(\"blockquote\"),\n    run: (e) => e.chain().focus().toggleBlockquote().run(),\n  },\n  {\n    icon: \"code\",\n    key: \"code-block\",\n    label: \"Code block\",\n    isActive: (e) => e.isActive(\"codeBlock\"),\n    run: (e) => e.chain().focus().toggleCodeBlock().run(),\n  },\n  {\n    icon: \"minus\",\n    key: \"horizontal-rule\",\n    label: \"Horizontal rule\",\n    isActive: () => false,\n    run: (e) => e.chain().focus().setHorizontalRule().run(),\n  },\n  \"separator\",\n  {\n    icon: \"align-left\",\n    key: \"align-left\",\n    label: \"Align left\",\n    isActive: (e) => e.isActive({ textAlign: \"left\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"left\").run(),\n  },\n  {\n    icon: \"align-center\",\n    key: \"align-center\",\n    label: \"Align center\",\n    isActive: (e) => e.isActive({ textAlign: \"center\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"center\").run(),\n  },\n  {\n    icon: \"align-right\",\n    key: \"align-right\",\n    label: \"Align right\",\n    isActive: (e) => e.isActive({ textAlign: \"right\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"right\").run(),\n  },\n  {\n    icon: \"align-justify\",\n    key: \"justify\",\n    label: \"Justify\",\n    isActive: (e) => e.isActive({ textAlign: \"justify\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"justify\").run(),\n  },\n  \"separator\",\n  {\n    icon: \"link\",\n    key: \"link\",\n    label: \"Link\",\n    isActive: (e) => e.isActive(\"link\"),\n    run: (e) => {\n      if (e.isActive(\"link\")) {\n        e.chain().focus().unsetLink().run();\n        return;\n      }\n      const url = window.prompt(\"Link URL\");\n      if (url) {\n        e.chain().focus().extendMarkRange(\"link\").setLink({ href: url }).run();\n      }\n    },\n  },\n  \"separator\",\n  {\n    icon: \"table\",\n    key: \"insert-table\",\n    label: \"Insert table\",\n    isActive: (e) => e.isActive(\"table\"),\n    run: (e) => e.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(),\n  },\n  {\n    icon: \"columns-3\",\n    key: \"add-column\",\n    label: \"Add column\",\n    isActive: () => false,\n    isDisabled: (e) => !e.can().addColumnAfter(),\n    run: (e) => e.chain().focus().addColumnAfter().run(),\n  },\n  {\n    icon: \"rows-3\",\n    key: \"add-row\",\n    label: \"Add row\",\n    isActive: () => false,\n    isDisabled: (e) => !e.can().addRowAfter(),\n    run: (e) => e.chain().focus().addRowAfter().run(),\n  },\n  {\n    icon: \"trash-2\",\n    key: \"delete-table\",\n    label: \"Delete table\",\n    isActive: () => false,\n    isDisabled: (e) => !e.can().deleteTable(),\n    run: (e) => e.chain().focus().deleteTable().run(),\n  },\n  {\n    icon: \"chevron-right\",\n    key: \"details\",\n    label: \"Details\",\n    isActive: (e) => e.isActive(\"details\"),\n    run: (e) => {\n      if (e.isActive(\"details\")) {\n        e.chain().focus().unsetDetails().run();\n        return;\n      }\n      e.chain().focus().setDetails().run();\n    },\n  },\n];\n\nconst emojis = [\n  \"😀\",\n  \"😅\",\n  \"😂\",\n  \"🥳\",\n  \"😎\",\n  \"🤔\",\n  \"👍\",\n  \"🙏\",\n  \"🔥\",\n  \"🎉\",\n  \"🚀\",\n  \"💡\",\n  \"✅\",\n  \"❌\",\n  \"⭐\",\n  \"❤️\",\n];\n\nfunction EmojiPicker({ editor }: { editor: Editor }) {\n  const { t } = useT(\"lattice\");\n  const [open, setOpen] = useState(false);\n\n  return (\n    <div className=\"relative\">\n      <button\n        aria-label={t(\"editor.insert-emoji\", \"Insert emoji\")}\n        data-test=\"editor-emoji\"\n        className=\"inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg [&_svg]:size-lt-icon-md\"\n        onClick={() => setOpen((value) => !value)}\n        onMouseDown={(event) => event.preventDefault()}\n        title={t(\"editor.insert-emoji\", \"Insert emoji\")}\n        type=\"button\"\n      >\n        <Icon name=\"smile\" />\n      </button>\n      {open && (\n        <div className=\"absolute z-10 mt-1 grid grid-cols-8 gap-0.5 rounded-lt-sm border border-lt-border bg-lt-bg p-1 shadow-lt-md\">\n          {emojis.map((emoji) => (\n            <button\n              className=\"inline-flex size-7 items-center justify-center rounded-lt-sm text-base hover:bg-lt-accent\"\n              key={emoji}\n              onClick={() => {\n                editor.chain().focus().insertContent(emoji).run();\n                setOpen(false);\n              }}\n              onMouseDown={(event) => event.preventDefault()}\n              type=\"button\"\n            >\n              {emoji}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction Toolbar({ editor }: { editor: Editor }) {\n  const { t } = useT(\"lattice\");\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-0.5 border-b border-lt-border p-1\">\n      {toolbar.map((item, index) => {\n        if (item === \"separator\") {\n          // eslint-disable-next-line react/no-array-index-key\n          return <span key={`sep-${index}`} className=\"mx-1 h-5 w-px bg-lt-border\" />;\n        }\n\n        const label = t(`editor.${item.key}`, item.label);\n\n        return (\n          <button\n            aria-label={label}\n            aria-pressed={item.isActive(editor)}\n            data-test={`editor-${item.key}`}\n            className={cn(\n              \"inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-lt-icon-md\",\n              item.isActive(editor) && \"bg-lt-accent text-lt-accent-fg\",\n            )}\n            disabled={item.isDisabled?.(editor) ?? false}\n            key={item.key}\n            // Keep focus in the editor so toolbar clicks don't blur it (which would\n            // otherwise trigger a precognition request).\n            onClick={() => item.run(editor)}\n            onMouseDown={(event) => event.preventDefault()}\n            title={label}\n            type=\"button\"\n          >\n            <Icon name={item.icon} />\n          </button>\n        );\n      })}\n      <span className=\"mx-1 h-5 w-px bg-lt-border\" />\n      <EmojiPicker editor={editor} />\n    </div>\n  );\n}\n\nexport const RichEditorComponent: RendererComponent<\"field.rich-editor\"> = ({ node }) => {\n  const { errors } = useFormContext();\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const { change, blur } = useFieldCommit();\n  const name = node.props.name;\n  const scope = useFieldScope();\n  const globalValue = useFormValue(name);\n  const storedValue = scope ? scope.getValue(name) : globalValue;\n  const domName = scope ? scope.scopedName(name) : name;\n  const errorKey = scope ? scope.errorKey(name) : name;\n  const locked = readOnly || disabled;\n  const initialContent =\n    typeof storedValue === \"object\" && storedValue !== null\n      ? (storedValue as object)\n      : ((node.props.value as object | undefined) ?? \"\");\n\n  const editor = useEditor({\n    extensions: [\n      StarterKit,\n      Highlight,\n      TextAlign.configure({ types: [\"heading\", \"paragraph\"] }),\n      Link.configure({ openOnClick: false }),\n      TableKit.configure({ table: { resizable: false } }),\n      Details,\n      DetailsSummary,\n      DetailsContent,\n    ],\n    content: initialContent,\n    editable: !locked,\n    immediatelyRender: false,\n    editorProps: {\n      attributes: {\n        class: \"lattice-prose min-h-32 px-3 py-2 outline-none\",\n      },\n    },\n    onUpdate: ({ editor: instance }) => {\n      change(name, instance.isEmpty ? null : instance.getJSON());\n    },\n    onBlur: () => {\n      blur(name);\n    },\n  });\n\n  useEffect(() => {\n    editor?.setEditable(!locked);\n  }, [editor, locked]);\n\n  if (hidden) {\n    return null;\n  }\n\n  const submittedValue = storedValue ? JSON.stringify(storedValue) : \"\";\n\n  return (\n    <FormFieldFrame\n      error={errors[errorKey]}\n      helperText={node.props.helperText ?? undefined}\n      tooltip={node.props.tooltip ?? undefined}\n      label={node.props.label ?? \"\"}\n      name={domName}\n      required={required}\n    >\n      <div\n        className={cn(\n          \"overflow-hidden rounded-lt-sm border border-lt-input bg-transparent shadow-lt-xs focus-within:border-lt-ring focus-within:ring-[3px] focus-within:ring-lt-ring/50\",\n          locked && \"opacity-60\",\n        )}\n      >\n        {editor && !locked && <Toolbar editor={editor} />}\n        <EditorContent editor={editor} />\n      </div>\n      <input name={domName} type=\"hidden\" value={submittedValue} />\n    </FormFieldFrame>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA8BA,IAAM,UAAyB;CAC7B;EACE,MAAM;EACN,KAAK;EACL,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,MAAM;EAClC,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI;CACjD;CACA;EACE,MAAM;EACN,KAAK;EACL,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,QAAQ;EACpC,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,IAAI;CACnD;CACA;EACE,MAAM;EACN,KAAK;EACL,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,QAAQ;EACpC,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,IAAI;CACnD;CACA;EACE,MAAM;EACN,KAAK;EACL,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,WAAW;EACvC,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,IAAI;CACtD;CACA;EACE,MAAM;EACN,KAAK;EACL,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,WAAW;EACvC,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,IAAI;CACtD;CACA;CACA;EACE,MAAM;EACN,KAAK;EACL,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,WAAW,EAAE,OAAO,EAAE,CAAC;EACnD,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI;CAChE;CACA;EACE,MAAM;EACN,KAAK;EACL,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,WAAW,EAAE,OAAO,EAAE,CAAC;EACnD,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI;CAChE;CACA;EACE,MAAM;EACN,KAAK;EACL,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,WAAW,EAAE,OAAO,EAAE,CAAC;EACnD,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI;CAChE;CACA;CACA;EACE,MAAM;EACN,KAAK;EACL,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,YAAY;EACxC,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,iBAAiB,EAAE,IAAI;CACvD;CACA;EACE,MAAM;EACN,KAAK;EACL,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,aAAa;EACzC,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,kBAAkB,EAAE,IAAI;CACxD;CACA;EACE,MAAM;EACN,KAAK;EACL,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,YAAY;EACxC,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,iBAAiB,EAAE,IAAI;CACvD;CACA;EACE,MAAM;EACN,KAAK;EACL,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,WAAW;EACvC,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,IAAI;CACtD;CACA;EACE,MAAM;EACN,KAAK;EACL,OAAO;EACP,gBAAgB;EAChB,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,kBAAkB,EAAE,IAAI;CACxD;CACA;CACA;EACE,MAAM;EACN,KAAK;EACL,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,EAAE,WAAW,OAAO,CAAC;EACjD,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,MAAM,EAAE,IAAI;CACzD;CACA;EACE,MAAM;EACN,KAAK;EACL,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,EAAE,WAAW,SAAS,CAAC;EACnD,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,QAAQ,EAAE,IAAI;CAC3D;CACA;EACE,MAAM;EACN,KAAK;EACL,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,EAAE,WAAW,QAAQ,CAAC;EAClD,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,OAAO,EAAE,IAAI;CAC1D;CACA;EACE,MAAM;EACN,KAAK;EACL,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,EAAE,WAAW,UAAU,CAAC;EACpD,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,SAAS,EAAE,IAAI;CAC5D;CACA;CACA;EACE,MAAM;EACN,KAAK;EACL,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,MAAM;EAClC,MAAM,MAAM;GACV,IAAI,EAAE,SAAS,MAAM,GAAG;IACtB,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI;IAClC;GACF;GACA,MAAM,MAAM,OAAO,OAAO,UAAU;GACpC,IAAI,KACF,EAAE,MAAM,EAAE,MAAM,EAAE,gBAAgB,MAAM,EAAE,QAAQ,EAAE,MAAM,IAAI,CAAC,EAAE,IAAI;EAEzE;CACF;CACA;CACA;EACE,MAAM;EACN,KAAK;EACL,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,OAAO;EACnC,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY;GAAE,MAAM;GAAG,MAAM;GAAG,eAAe;EAAK,CAAC,EAAE,IAAI;CAC3F;CACA;EACE,MAAM;EACN,KAAK;EACL,OAAO;EACP,gBAAgB;EAChB,aAAa,MAAM,CAAC,EAAE,IAAI,EAAE,eAAe;EAC3C,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,IAAI;CACrD;CACA;EACE,MAAM;EACN,KAAK;EACL,OAAO;EACP,gBAAgB;EAChB,aAAa,MAAM,CAAC,EAAE,IAAI,EAAE,YAAY;EACxC,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,IAAI;CAClD;CACA;EACE,MAAM;EACN,KAAK;EACL,OAAO;EACP,gBAAgB;EAChB,aAAa,MAAM,CAAC,EAAE,IAAI,EAAE,YAAY;EACxC,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,IAAI;CAClD;CACA;EACE,MAAM;EACN,KAAK;EACL,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,SAAS;EACrC,MAAM,MAAM;GACV,IAAI,EAAE,SAAS,SAAS,GAAG;IACzB,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,IAAI;IACrC;GACF;GACA,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI;EACrC;CACF;AACF;AAEA,IAAM,SAAS;CACb;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,SAAS,YAAY,EAAE,UAA8B;CACnD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,UAAD;GACE,cAAY,EAAE,uBAAuB,cAAc;GACnD,aAAU;GACV,WAAU;GACV,eAAe,SAAS,UAAU,CAAC,KAAK;GACxC,cAAc,UAAU,MAAM,eAAe;GAC7C,OAAO,EAAE,uBAAuB,cAAc;GAC9C,MAAK;aAEL,oBAAC,MAAD,EAAM,MAAK,QAAS,CAAA;EACd,CAAA,GACP,QACC,oBAAC,OAAD;GAAK,WAAU;aACZ,OAAO,KAAK,UACX,oBAAC,UAAD;IACE,WAAU;IAEV,eAAe;KACb,OAAO,MAAM,EAAE,MAAM,EAAE,cAAc,KAAK,EAAE,IAAI;KAChD,QAAQ,KAAK;IACf;IACA,cAAc,UAAU,MAAM,eAAe;IAC7C,MAAK;cAEJ;GACK,GATD,KASC,CACT;EACE,CAAA,CAEJ;;AAET;AAEA,SAAS,QAAQ,EAAE,UAA8B;CAC/C,MAAM,EAAE,MAAM,KAAK,SAAS;CAE5B,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,QAAQ,KAAK,MAAM,UAAU;IAC5B,IAAI,SAAS,aAEX,OAAO,oBAAC,QAAD,EAA2B,WAAU,6BAA8B,GAAxD,OAAO,OAAiD;IAG5E,MAAM,QAAQ,EAAE,UAAU,KAAK,OAAO,KAAK,KAAK;IAEhD,OACE,oBAAC,UAAD;KACE,cAAY;KACZ,gBAAc,KAAK,SAAS,MAAM;KAClC,aAAW,UAAU,KAAK;KAC1B,WAAW,GACT,uNACA,KAAK,SAAS,MAAM,KAAK,gCAC3B;KACA,UAAU,KAAK,aAAa,MAAM,KAAK;KAIvC,eAAe,KAAK,IAAI,MAAM;KAC9B,cAAc,UAAU,MAAM,eAAe;KAC7C,OAAO;KACP,MAAK;eAEL,oBAAC,MAAD,EAAM,MAAM,KAAK,KAAO,CAAA;IAClB,GATD,KAAK,GASJ;GAEZ,CAAC;GACD,oBAAC,QAAD,EAAM,WAAU,6BAA8B,CAAA;GAC9C,oBAAC,aAAD,EAAqB,OAAS,CAAA;EAC3B;;AAET;AAEA,IAAa,uBAA+D,EAAE,WAAW;CACvF,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,QAAQ,UAAU,UAAU,aAAa,kBAAkB,IAAI;CACvE,MAAM,EAAE,QAAQ,SAAS,eAAe;CACxC,MAAM,OAAO,KAAK,MAAM;CACxB,MAAM,QAAQ,cAAc;CAC5B,MAAM,cAAc,aAAa,IAAI;CACrC,MAAM,cAAc,QAAQ,MAAM,SAAS,IAAI,IAAI;CACnD,MAAM,UAAU,QAAQ,MAAM,WAAW,IAAI,IAAI;CACjD,MAAM,WAAW,QAAQ,MAAM,SAAS,IAAI,IAAI;CAChD,MAAM,SAAS,YAAY;CAC3B,MAAM,iBACJ,OAAO,gBAAgB,YAAY,gBAAgB,OAC9C,cACC,KAAK,MAAM,SAAgC;CAEnD,MAAM,SAAS,UAAU;EACvB,YAAY;GACV;GACA;GACA,UAAU,UAAU,EAAE,OAAO,CAAC,WAAW,WAAW,EAAE,CAAC;GACvD,KAAK,UAAU,EAAE,aAAa,MAAM,CAAC;GACrC,SAAS,UAAU,EAAE,OAAO,EAAE,WAAW,MAAM,EAAE,CAAC;GAClD;GACA;GACA;EACF;EACA,SAAS;EACT,UAAU,CAAC;EACX,mBAAmB;EACnB,aAAa,EACX,YAAY,EACV,OAAO,gDACT,EACF;EACA,WAAW,EAAE,QAAQ,eAAe;GAClC,OAAO,MAAM,SAAS,UAAU,OAAO,SAAS,QAAQ,CAAC;EAC3D;EACA,cAAc;GACZ,KAAK,IAAI;EACX;CACF,CAAC;CAED,gBAAgB;EACd,QAAQ,YAAY,CAAC,MAAM;CAC7B,GAAG,CAAC,QAAQ,MAAM,CAAC;CAEnB,IAAI,QACF,OAAO;CAGT,MAAM,iBAAiB,cAAc,KAAK,UAAU,WAAW,IAAI;CAEnE,OACE,qBAAC,gBAAD;EACE,OAAO,OAAO;EACd,YAAY,KAAK,MAAM,cAAc,KAAA;EACrC,SAAS,KAAK,MAAM,WAAW,KAAA;EAC/B,OAAO,KAAK,MAAM,SAAS;EAC3B,MAAM;EACI;YANZ,CAQE,qBAAC,OAAD;GACE,WAAW,GACT,qKACA,UAAU,YACZ;aAJF,CAMG,UAAU,CAAC,UAAU,oBAAC,SAAD,EAAiB,OAAS,CAAA,GAChD,oBAAC,eAAD,EAAuB,OAAS,CAAA,CAC7B;MACL,oBAAC,SAAD;GAAO,MAAM;GAAS,MAAK;GAAS,OAAO;EAAiB,CAAA,CAC9C;;AAEpB"}

package/dist/form/components/fields/text-input.js

@@ -1,5 +1,6 @@
 import { Input } from "../base/input.js";
 import { SimpleField } from "./simple-field.js";
+import { AffixGroup } from "../base/affix-group.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/text-input.tsx
 var TextInputComponent = ({ node }) => {
@@ -7,19 +8,24 @@ var TextInputComponent = ({ node }) => {
 	return /* @__PURE__ */ jsx(SimpleField, {
 		node,
 		label: props.label ?? "",
-		children: ({ name, testId, value, readOnly, disabled, commit }) => /* @__PURE__ */ jsx(Input, {
-			autoComplete: props.autoComplete ?? "",
-			autoFocus: props.autoFocus ?? false,
-			"data-test": testId,
-			disabled,
-			id: name,
-			name,
-			onChange: (event) => commit(event.target.value),
-			placeholder: props.placeholder ?? "",
-			readOnly,
-			tabIndex: props.tabIndex ?? void 0,
-			type: props.type ?? "text",
-			value
+		children: ({ name, testId, value, readOnly, disabled, commit }) => /* @__PURE__ */ jsx(AffixGroup, {
+			prefix: props.prefix,
+			suffix: props.suffix,
+			children: (controlClassName) => /* @__PURE__ */ jsx(Input, {
+				autoComplete: props.autoComplete ?? "",
+				autoFocus: props.autoFocus ?? false,
+				className: controlClassName,
+				"data-test": testId,
+				disabled,
+				id: name,
+				name,
+				onChange: (event) => commit(event.target.value),
+				placeholder: props.placeholder ?? "",
+				readOnly,
+				tabIndex: props.tabIndex ?? void 0,
+				type: props.type ?? "text",
+				value
+			})
 		})
 	});
 };

package/dist/form/components/fields/text-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/text-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { Input } from \"../base/input\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const TextInputComponent: RendererComponent<\"field.text-input\"> = ({ node }) => {\n  const props = node.props;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, testId, value, readOnly, disabled, commit }) => (\n        <Input\n          autoComplete={props.autoComplete ?? \"\"}\n          autoFocus={props.autoFocus ?? false}\n          data-test={testId}\n          disabled={disabled}\n          id={name}\n          name={name}\n          onChange={(event) => commit(event.target.value)}\n          placeholder={props.placeholder ?? \"\"}\n          readOnly={readOnly}\n          tabIndex={props.tabIndex ?? undefined}\n          type={props.type ?? \"text\"}\n          value={value}\n        />\n      )}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;AAIA,IAAa,sBAA6D,EAAE,WAAW;CACrF,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;aAC3C,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAU,aAC3C,oBAAC,OAAD;GACE,cAAc,MAAM,gBAAgB;GACpC,WAAW,MAAM,aAAa;GAC9B,aAAW;GACD;GACV,IAAI;GACE;GACN,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;GAC9C,aAAa,MAAM,eAAe;GACxB;GACV,UAAU,MAAM,YAAY,KAAA;GAC5B,MAAM,MAAM,QAAQ;GACb;EACR,CAAA;CAEQ,CAAA;AAEjB"}
+{"version":3,"file":"text-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/text-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { AffixGroup } from \"../base/affix-group\";\nimport { Input } from \"../base/input\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const TextInputComponent: RendererComponent<\"field.text-input\"> = ({ node }) => {\n  const props = node.props;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, testId, value, readOnly, disabled, commit }) => (\n        <AffixGroup prefix={props.prefix} suffix={props.suffix}>\n          {(controlClassName) => (\n            <Input\n              autoComplete={props.autoComplete ?? \"\"}\n              autoFocus={props.autoFocus ?? false}\n              className={controlClassName}\n              data-test={testId}\n              disabled={disabled}\n              id={name}\n              name={name}\n              onChange={(event) => commit(event.target.value)}\n              placeholder={props.placeholder ?? \"\"}\n              readOnly={readOnly}\n              tabIndex={props.tabIndex ?? undefined}\n              type={props.type ?? \"text\"}\n              value={value}\n            />\n          )}\n        </AffixGroup>\n      )}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAa,sBAA6D,EAAE,WAAW;CACrF,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;aAC3C,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAU,aAC3C,oBAAC,YAAD;GAAY,QAAQ,MAAM;GAAQ,QAAQ,MAAM;cAC5C,qBACA,oBAAC,OAAD;IACE,cAAc,MAAM,gBAAgB;IACpC,WAAW,MAAM,aAAa;IAC9B,WAAW;IACX,aAAW;IACD;IACV,IAAI;IACE;IACN,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;IAC9C,aAAa,MAAM,eAAe;IACxB;IACV,UAAU,MAAM,YAAY,KAAA;IAC5B,MAAM,MAAM,QAAQ;IACb;GACR,CAAA;EAEO,CAAA;CAEH,CAAA;AAEjB"}

package/dist/form/components/form.js

@@ -43,7 +43,7 @@ function FormBody({ action, children, componentRef, nodes, shouldRenderSubmitBut
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "flex flex-col gap-6",
 				children: [children, shouldRenderSubmitButton && /* @__PURE__ */ jsx("div", {
-					className: "flex justify-end rounded-lt border border-lt-border bg-lt-surface px-6 py-4 shadow-xs",
+					className: "flex justify-end rounded-lt border border-lt-border bg-lt-surface px-6 py-4 shadow-lt-sm",
 					children: /* @__PURE__ */ jsx(FormSubmitButton, {
 						label: submitLabel,
 						summaryLabel

package/dist/form/components/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","names":[],"sources":["../../../resources/js/form/components/form.tsx"],"sourcesContent":["import { Form as InertiaForm } from \"@inertiajs/react\";\nimport { withHeaders } from \"@lattice-php/lattice/core/headers\";\nimport { LATTICE_EVENT } from \"@lattice-php/lattice/events/event-names\";\nimport type { Node, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { useEffect, useMemo } from \"react\";\nimport { FormSubmitButton } from \"./base/submit-button\";\nimport { FormProvider } from \"./context\";\nimport { walkFields } from \"./field-props\";\nimport { PrefillProvider } from \"./prefill-context\";\nimport { ResolvedNodesProvider } from \"./resolved-nodes\";\nimport { useFormResolver } from \"./use-form-resolver\";\nimport { FormValuesProvider } from \"./values\";\n\ntype CollectedFields = {\n  labels: Record<string, string>;\n  values: Record<string, unknown>;\n};\n\nfunction collectFields(nodes: Node[] | undefined): CollectedFields {\n  const collected: CollectedFields = { labels: {}, values: {} };\n\n  walkFields(nodes, (props) => {\n    if (!props.name) {\n      return;\n    }\n    if (props.label) {\n      collected.labels[props.name] = props.label;\n    }\n    if (props.value !== undefined) {\n      collected.values[props.name] = props.value;\n    }\n  });\n\n  return collected;\n}\n\nfunction FormResetListener({\n  componentId,\n  reset,\n}: {\n  componentId?: string;\n  reset: (...fields: string[]) => void;\n}) {\n  useEffect(() => {\n    const handler = (event: Event) => {\n      const detail = (event as CustomEvent<{ form: string | null }>).detail;\n\n      if (!detail?.form || detail.form === componentId) {\n        reset();\n      }\n    };\n\n    window.addEventListener(LATTICE_EVENT.resetForm, handler);\n\n    return () => window.removeEventListener(LATTICE_EVENT.resetForm, handler);\n  }, [componentId, reset]);\n\n  return null;\n}\n\nfunction FormBody({\n  action,\n  children,\n  componentRef,\n  nodes,\n  shouldRenderSubmitButton,\n  submitLabel,\n  summaryLabel,\n}: {\n  action: string;\n  children: React.ReactNode;\n  componentRef: string;\n  nodes: Node[] | undefined;\n  shouldRenderSubmitButton: boolean;\n  submitLabel: string;\n  summaryLabel: string;\n}) {\n  const { nodes: resolvedNodes, markUserEdit } = useFormResolver(action, componentRef, nodes);\n\n  return (\n    <PrefillProvider value={{ markUserEdit }}>\n      <ResolvedNodesProvider nodes={resolvedNodes}>\n        <div className=\"flex flex-col gap-6\">\n          {children}\n\n          {shouldRenderSubmitButton && (\n            <div className=\"flex justify-end rounded-lt border border-lt-border bg-lt-surface px-6 py-4 shadow-xs\">\n              <FormSubmitButton label={submitLabel} summaryLabel={summaryLabel} />\n            </div>\n          )}\n        </div>\n      </ResolvedNodesProvider>\n    </PrefillProvider>\n  );\n}\n\nexport const FormComponent: RendererComponent<\"form\"> = ({ children, node }) => {\n  const props = node.props;\n  const action = props.action ?? \"#\";\n  const errorBag = props.errorBag;\n  const componentRef = props.ref ?? \"\";\n  const method = props.method ?? \"post\";\n  const precognitive = props.precognitive;\n  const resetOnError = props.resetOnError ?? false;\n  const resetOnSuccess = props.resetOnSuccess ?? [];\n  const state = props.state;\n  const { labels: fieldLabels, values: fieldValues } = useMemo(\n    () => collectFields(node.schema),\n    [node.schema],\n  );\n  const initialValues = useMemo(() => ({ ...fieldValues, ...state }), [fieldValues, state]);\n  const shouldRenderSubmitButton = props.submitButton;\n  const submitLabel = props.submitLabel ?? \"Submit\";\n  const summaryLabel = props.validationSummaryLabel;\n  const validationTimeout = props.validationTimeout ?? undefined;\n\n  return (\n    <InertiaForm\n      action={action}\n      data-lattice-component={node.id}\n      errorBag={errorBag}\n      method={method}\n      resetOnError={resetOnError}\n      resetOnSuccess={resetOnSuccess}\n      validationTimeout={precognitive ? validationTimeout : undefined}\n      headers={withHeaders(componentRef)}\n      className=\"mx-auto flex w-full max-w-2xl flex-col gap-6\"\n    >\n      {({ clearErrors, errors, processing, reset, validate }) => (\n        <FormProvider\n          value={{\n            action,\n            clearErrors: (field) => clearErrors(field),\n            componentId: node.id,\n            componentRef,\n            errors: errors as Record<string, string | undefined>,\n            fieldLabels,\n            precognitive,\n            processing,\n            validate: (field) => validate(field),\n          }}\n        >\n          <FormResetListener componentId={node.id} reset={reset} />\n\n          {props.status && (\n            <div className=\"text-center text-sm font-medium text-lt-success\">{props.status}</div>\n          )}\n\n          <FormValuesProvider initial={initialValues}>\n            <FormBody\n              action={action}\n              componentRef={componentRef}\n              nodes={node.schema}\n              shouldRenderSubmitButton={shouldRenderSubmitButton}\n              submitLabel={submitLabel}\n              summaryLabel={summaryLabel}\n            >\n              {children}\n            </FormBody>\n          </FormValuesProvider>\n        </FormProvider>\n      )}\n    </InertiaForm>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAkBA,SAAS,cAAc,OAA4C;CACjE,MAAM,YAA6B;EAAE,QAAQ,CAAC;EAAG,QAAQ,CAAC;CAAE;CAE5D,WAAW,QAAQ,UAAU;EAC3B,IAAI,CAAC,MAAM,MACT;EAEF,IAAI,MAAM,OACR,UAAU,OAAO,MAAM,QAAQ,MAAM;EAEvC,IAAI,MAAM,UAAU,KAAA,GAClB,UAAU,OAAO,MAAM,QAAQ,MAAM;CAEzC,CAAC;CAED,OAAO;AACT;AAEA,SAAS,kBAAkB,EACzB,aACA,SAIC;CACD,gBAAgB;EACd,MAAM,WAAW,UAAiB;GAChC,MAAM,SAAU,MAA+C;GAE/D,IAAI,CAAC,QAAQ,QAAQ,OAAO,SAAS,aACnC,MAAM;EAEV;EAEA,OAAO,iBAAiB,cAAc,WAAW,OAAO;EAExD,aAAa,OAAO,oBAAoB,cAAc,WAAW,OAAO;CAC1E,GAAG,CAAC,aAAa,KAAK,CAAC;CAEvB,OAAO;AACT;AAEA,SAAS,SAAS,EAChB,QACA,UACA,cACA,OACA,0BACA,aACA,gBASC;CACD,MAAM,EAAE,OAAO,eAAe,iBAAiB,gBAAgB,QAAQ,cAAc,KAAK;CAE1F,OACE,oBAAC,iBAAD;EAAiB,OAAO,EAAE,aAAa;YACrC,oBAAC,uBAAD;GAAuB,OAAO;aAC5B,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,UAEA,4BACC,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,kBAAD;MAAkB,OAAO;MAA2B;KAAe,CAAA;IAChE,CAAA,CAEJ;;EACgB,CAAA;CACR,CAAA;AAErB;AAEA,IAAa,iBAA4C,EAAE,UAAU,WAAW;CAC9E,MAAM,QAAQ,KAAK;CACnB,MAAM,SAAS,MAAM,UAAU;CAC/B,MAAM,WAAW,MAAM;CACvB,MAAM,eAAe,MAAM,OAAO;CAClC,MAAM,SAAS,MAAM,UAAU;CAC/B,MAAM,eAAe,MAAM;CAC3B,MAAM,eAAe,MAAM,gBAAgB;CAC3C,MAAM,iBAAiB,MAAM,kBAAkB,CAAC;CAChD,MAAM,QAAQ,MAAM;CACpB,MAAM,EAAE,QAAQ,aAAa,QAAQ,gBAAgB,cAC7C,cAAc,KAAK,MAAM,GAC/B,CAAC,KAAK,MAAM,CACd;CACA,MAAM,gBAAgB,eAAe;EAAE,GAAG;EAAa,GAAG;CAAM,IAAI,CAAC,aAAa,KAAK,CAAC;CACxF,MAAM,2BAA2B,MAAM;CACvC,MAAM,cAAc,MAAM,eAAe;CACzC,MAAM,eAAe,MAAM;CAC3B,MAAM,oBAAoB,MAAM,qBAAqB,KAAA;CAErD,OACE,oBAAC,MAAD;EACU;EACR,0BAAwB,KAAK;EACnB;EACF;EACM;EACE;EAChB,mBAAmB,eAAe,oBAAoB,KAAA;EACtD,SAAS,YAAY,YAAY;EACjC,WAAU;aAER,EAAE,aAAa,QAAQ,YAAY,OAAO,eAC1C,qBAAC,cAAD;GACE,OAAO;IACL;IACA,cAAc,UAAU,YAAY,KAAK;IACzC,aAAa,KAAK;IAClB;IACQ;IACR;IACA;IACA;IACA,WAAW,UAAU,SAAS,KAAK;GACrC;aAXF;IAaE,oBAAC,mBAAD;KAAmB,aAAa,KAAK;KAAW;IAAQ,CAAA;IAEvD,MAAM,UACL,oBAAC,OAAD;KAAK,WAAU;eAAmD,MAAM;IAAY,CAAA;IAGtF,oBAAC,oBAAD;KAAoB,SAAS;eAC3B,oBAAC,UAAD;MACU;MACM;MACd,OAAO,KAAK;MACc;MACb;MACC;MAEb;KACO,CAAA;IACQ,CAAA;GACR;;CAEL,CAAA;AAEjB"}
+{"version":3,"file":"form.js","names":[],"sources":["../../../resources/js/form/components/form.tsx"],"sourcesContent":["import { Form as InertiaForm } from \"@inertiajs/react\";\nimport { withHeaders } from \"@lattice-php/lattice/core/headers\";\nimport { LATTICE_EVENT } from \"@lattice-php/lattice/events/event-names\";\nimport type { Node, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { useEffect, useMemo } from \"react\";\nimport { FormSubmitButton } from \"./base/submit-button\";\nimport { FormProvider } from \"./context\";\nimport { walkFields } from \"./field-props\";\nimport { PrefillProvider } from \"./prefill-context\";\nimport { ResolvedNodesProvider } from \"./resolved-nodes\";\nimport { useFormResolver } from \"./use-form-resolver\";\nimport { FormValuesProvider } from \"./values\";\n\ntype CollectedFields = {\n  labels: Record<string, string>;\n  values: Record<string, unknown>;\n};\n\nfunction collectFields(nodes: Node[] | undefined): CollectedFields {\n  const collected: CollectedFields = { labels: {}, values: {} };\n\n  walkFields(nodes, (props) => {\n    if (!props.name) {\n      return;\n    }\n    if (props.label) {\n      collected.labels[props.name] = props.label;\n    }\n    if (props.value !== undefined) {\n      collected.values[props.name] = props.value;\n    }\n  });\n\n  return collected;\n}\n\nfunction FormResetListener({\n  componentId,\n  reset,\n}: {\n  componentId?: string;\n  reset: (...fields: string[]) => void;\n}) {\n  useEffect(() => {\n    const handler = (event: Event) => {\n      const detail = (event as CustomEvent<{ form: string | null }>).detail;\n\n      if (!detail?.form || detail.form === componentId) {\n        reset();\n      }\n    };\n\n    window.addEventListener(LATTICE_EVENT.resetForm, handler);\n\n    return () => window.removeEventListener(LATTICE_EVENT.resetForm, handler);\n  }, [componentId, reset]);\n\n  return null;\n}\n\nfunction FormBody({\n  action,\n  children,\n  componentRef,\n  nodes,\n  shouldRenderSubmitButton,\n  submitLabel,\n  summaryLabel,\n}: {\n  action: string;\n  children: React.ReactNode;\n  componentRef: string;\n  nodes: Node[] | undefined;\n  shouldRenderSubmitButton: boolean;\n  submitLabel: string;\n  summaryLabel: string;\n}) {\n  const { nodes: resolvedNodes, markUserEdit } = useFormResolver(action, componentRef, nodes);\n\n  return (\n    <PrefillProvider value={{ markUserEdit }}>\n      <ResolvedNodesProvider nodes={resolvedNodes}>\n        <div className=\"flex flex-col gap-6\">\n          {children}\n\n          {shouldRenderSubmitButton && (\n            <div className=\"flex justify-end rounded-lt border border-lt-border bg-lt-surface px-6 py-4 shadow-lt-sm\">\n              <FormSubmitButton label={submitLabel} summaryLabel={summaryLabel} />\n            </div>\n          )}\n        </div>\n      </ResolvedNodesProvider>\n    </PrefillProvider>\n  );\n}\n\nexport const FormComponent: RendererComponent<\"form\"> = ({ children, node }) => {\n  const props = node.props;\n  const action = props.action ?? \"#\";\n  const errorBag = props.errorBag;\n  const componentRef = props.ref ?? \"\";\n  const method = props.method ?? \"post\";\n  const precognitive = props.precognitive;\n  const resetOnError = props.resetOnError ?? false;\n  const resetOnSuccess = props.resetOnSuccess ?? [];\n  const state = props.state;\n  const { labels: fieldLabels, values: fieldValues } = useMemo(\n    () => collectFields(node.schema),\n    [node.schema],\n  );\n  const initialValues = useMemo(() => ({ ...fieldValues, ...state }), [fieldValues, state]);\n  const shouldRenderSubmitButton = props.submitButton;\n  const submitLabel = props.submitLabel ?? \"Submit\";\n  const summaryLabel = props.validationSummaryLabel;\n  const validationTimeout = props.validationTimeout ?? undefined;\n\n  return (\n    <InertiaForm\n      action={action}\n      data-lattice-component={node.id}\n      errorBag={errorBag}\n      method={method}\n      resetOnError={resetOnError}\n      resetOnSuccess={resetOnSuccess}\n      validationTimeout={precognitive ? validationTimeout : undefined}\n      headers={withHeaders(componentRef)}\n      className=\"mx-auto flex w-full max-w-2xl flex-col gap-6\"\n    >\n      {({ clearErrors, errors, processing, reset, validate }) => (\n        <FormProvider\n          value={{\n            action,\n            clearErrors: (field) => clearErrors(field),\n            componentId: node.id,\n            componentRef,\n            errors: errors as Record<string, string | undefined>,\n            fieldLabels,\n            precognitive,\n            processing,\n            validate: (field) => validate(field),\n          }}\n        >\n          <FormResetListener componentId={node.id} reset={reset} />\n\n          {props.status && (\n            <div className=\"text-center text-sm font-medium text-lt-success\">{props.status}</div>\n          )}\n\n          <FormValuesProvider initial={initialValues}>\n            <FormBody\n              action={action}\n              componentRef={componentRef}\n              nodes={node.schema}\n              shouldRenderSubmitButton={shouldRenderSubmitButton}\n              submitLabel={submitLabel}\n              summaryLabel={summaryLabel}\n            >\n              {children}\n            </FormBody>\n          </FormValuesProvider>\n        </FormProvider>\n      )}\n    </InertiaForm>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAkBA,SAAS,cAAc,OAA4C;CACjE,MAAM,YAA6B;EAAE,QAAQ,CAAC;EAAG,QAAQ,CAAC;CAAE;CAE5D,WAAW,QAAQ,UAAU;EAC3B,IAAI,CAAC,MAAM,MACT;EAEF,IAAI,MAAM,OACR,UAAU,OAAO,MAAM,QAAQ,MAAM;EAEvC,IAAI,MAAM,UAAU,KAAA,GAClB,UAAU,OAAO,MAAM,QAAQ,MAAM;CAEzC,CAAC;CAED,OAAO;AACT;AAEA,SAAS,kBAAkB,EACzB,aACA,SAIC;CACD,gBAAgB;EACd,MAAM,WAAW,UAAiB;GAChC,MAAM,SAAU,MAA+C;GAE/D,IAAI,CAAC,QAAQ,QAAQ,OAAO,SAAS,aACnC,MAAM;EAEV;EAEA,OAAO,iBAAiB,cAAc,WAAW,OAAO;EAExD,aAAa,OAAO,oBAAoB,cAAc,WAAW,OAAO;CAC1E,GAAG,CAAC,aAAa,KAAK,CAAC;CAEvB,OAAO;AACT;AAEA,SAAS,SAAS,EAChB,QACA,UACA,cACA,OACA,0BACA,aACA,gBASC;CACD,MAAM,EAAE,OAAO,eAAe,iBAAiB,gBAAgB,QAAQ,cAAc,KAAK;CAE1F,OACE,oBAAC,iBAAD;EAAiB,OAAO,EAAE,aAAa;YACrC,oBAAC,uBAAD;GAAuB,OAAO;aAC5B,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,UAEA,4BACC,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,kBAAD;MAAkB,OAAO;MAA2B;KAAe,CAAA;IAChE,CAAA,CAEJ;;EACgB,CAAA;CACR,CAAA;AAErB;AAEA,IAAa,iBAA4C,EAAE,UAAU,WAAW;CAC9E,MAAM,QAAQ,KAAK;CACnB,MAAM,SAAS,MAAM,UAAU;CAC/B,MAAM,WAAW,MAAM;CACvB,MAAM,eAAe,MAAM,OAAO;CAClC,MAAM,SAAS,MAAM,UAAU;CAC/B,MAAM,eAAe,MAAM;CAC3B,MAAM,eAAe,MAAM,gBAAgB;CAC3C,MAAM,iBAAiB,MAAM,kBAAkB,CAAC;CAChD,MAAM,QAAQ,MAAM;CACpB,MAAM,EAAE,QAAQ,aAAa,QAAQ,gBAAgB,cAC7C,cAAc,KAAK,MAAM,GAC/B,CAAC,KAAK,MAAM,CACd;CACA,MAAM,gBAAgB,eAAe;EAAE,GAAG;EAAa,GAAG;CAAM,IAAI,CAAC,aAAa,KAAK,CAAC;CACxF,MAAM,2BAA2B,MAAM;CACvC,MAAM,cAAc,MAAM,eAAe;CACzC,MAAM,eAAe,MAAM;CAC3B,MAAM,oBAAoB,MAAM,qBAAqB,KAAA;CAErD,OACE,oBAAC,MAAD;EACU;EACR,0BAAwB,KAAK;EACnB;EACF;EACM;EACE;EAChB,mBAAmB,eAAe,oBAAoB,KAAA;EACtD,SAAS,YAAY,YAAY;EACjC,WAAU;aAER,EAAE,aAAa,QAAQ,YAAY,OAAO,eAC1C,qBAAC,cAAD;GACE,OAAO;IACL;IACA,cAAc,UAAU,YAAY,KAAK;IACzC,aAAa,KAAK;IAClB;IACQ;IACR;IACA;IACA;IACA,WAAW,UAAU,SAAS,KAAK;GACrC;aAXF;IAaE,oBAAC,mBAAD;KAAmB,aAAa,KAAK;KAAW;IAAQ,CAAA;IAEvD,MAAM,UACL,oBAAC,OAAD;KAAK,WAAU;eAAmD,MAAM;IAAY,CAAA;IAGtF,oBAAC,oBAAD;KAAoB,SAAS;eAC3B,oBAAC,UAAD;MACU;MACM;MACd,OAAO,KAAK;MACc;MACb;MACC;MAEb;KACO,CAAA;IACQ,CAAA;GACR;;CAEL,CAAA;AAEjB"}

package/dist/form/skeleton.js

@@ -5,7 +5,7 @@ var FormSkeletonComponent = ({ node }) => {
 	const fieldCount = Math.max(1, Math.min(4, node.schema?.find((child) => child.type === "grid")?.schema?.filter((child) => child.type !== "field.hidden-input").length ?? 2));
 	return /* @__PURE__ */ jsx("div", {
 		"aria-hidden": "true",
-		className: "mx-auto flex w-full max-w-md flex-col gap-6 rounded-lt border border-lt-border bg-lt-surface p-6 shadow-xs",
+		className: "mx-auto flex w-full max-w-md flex-col gap-6 rounded-lt border border-lt-border bg-lt-surface p-6 shadow-lt-sm",
 		"data-lattice-skeleton": node.id ?? node.type,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "grid gap-6",

package/dist/form/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","names":[],"sources":["../../resources/js/form/skeleton.tsx"],"sourcesContent":["import { Skeleton } from \"@lattice-php/lattice/core/components/skeleton\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\n\nexport const FormSkeletonComponent: RendererComponent<\"form\"> = ({ node }) => {\n  const fieldCount = Math.max(\n    1,\n    Math.min(\n      4,\n      node.schema\n        ?.find((child) => child.type === \"grid\")\n        ?.schema?.filter((child) => child.type !== \"field.hidden-input\").length ?? 2,\n    ),\n  );\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className=\"mx-auto flex w-full max-w-md flex-col gap-6 rounded-lt border border-lt-border bg-lt-surface p-6 shadow-xs\"\n      data-lattice-skeleton={node.id ?? node.type}\n    >\n      <div className=\"grid gap-6\">\n        {Array.from({ length: fieldCount }).map((_, index) => (\n          <div className=\"grid gap-2\" key={index}>\n            <Skeleton className=\"h-4 w-28\" />\n            <Skeleton className=\"h-10\" />\n          </div>\n        ))}\n\n        <Skeleton className=\"mt-4 h-10\" />\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;AAGA,IAAa,yBAAoD,EAAE,WAAW;CAC5E,MAAM,aAAa,KAAK,IACtB,GACA,KAAK,IACH,GACA,KAAK,QACD,MAAM,UAAU,MAAM,SAAS,MAAM,GACrC,QAAQ,QAAQ,UAAU,MAAM,SAAS,oBAAoB,EAAE,UAAU,CAC/E,CACF;CAEA,OACE,oBAAC,OAAD;EACE,eAAY;EACZ,WAAU;EACV,yBAAuB,KAAK,MAAM,KAAK;YAEvC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,MAAM,KAAK,EAAE,QAAQ,WAAW,CAAC,EAAE,KAAK,GAAG,UAC1C,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,UAAD,EAAU,WAAU,WAAY,CAAA,GAChC,oBAAC,UAAD,EAAU,WAAU,OAAQ,CAAA,CACzB;MAH4B,KAG5B,CACN,GAED,oBAAC,UAAD,EAAU,WAAU,YAAa,CAAA,CAC9B;;CACF,CAAA;AAET"}
+{"version":3,"file":"skeleton.js","names":[],"sources":["../../resources/js/form/skeleton.tsx"],"sourcesContent":["import { Skeleton } from \"@lattice-php/lattice/core/components/skeleton\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\n\nexport const FormSkeletonComponent: RendererComponent<\"form\"> = ({ node }) => {\n  const fieldCount = Math.max(\n    1,\n    Math.min(\n      4,\n      node.schema\n        ?.find((child) => child.type === \"grid\")\n        ?.schema?.filter((child) => child.type !== \"field.hidden-input\").length ?? 2,\n    ),\n  );\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className=\"mx-auto flex w-full max-w-md flex-col gap-6 rounded-lt border border-lt-border bg-lt-surface p-6 shadow-lt-sm\"\n      data-lattice-skeleton={node.id ?? node.type}\n    >\n      <div className=\"grid gap-6\">\n        {Array.from({ length: fieldCount }).map((_, index) => (\n          <div className=\"grid gap-2\" key={index}>\n            <Skeleton className=\"h-4 w-28\" />\n            <Skeleton className=\"h-10\" />\n          </div>\n        ))}\n\n        <Skeleton className=\"mt-4 h-10\" />\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;AAGA,IAAa,yBAAoD,EAAE,WAAW;CAC5E,MAAM,aAAa,KAAK,IACtB,GACA,KAAK,IACH,GACA,KAAK,QACD,MAAM,UAAU,MAAM,SAAS,MAAM,GACrC,QAAQ,QAAQ,UAAU,MAAM,SAAS,oBAAoB,EAAE,UAAU,CAC/E,CACF;CAEA,OACE,oBAAC,OAAD;EACE,eAAY;EACZ,WAAU;EACV,yBAAuB,KAAK,MAAM,KAAK;YAEvC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,MAAM,KAAK,EAAE,QAAQ,WAAW,CAAC,EAAE,KAAK,GAAG,UAC1C,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,UAAD,EAAU,WAAU,WAAY,CAAA,GAChC,oBAAC,UAAD,EAAU,WAAU,OAAQ,CAAA,CACzB;MAH4B,KAG5B,CACN,GAED,oBAAC,UAAD,EAAU,WAAU,YAAa,CAAA,CAC9B;;CACF,CAAA;AAET"}

package/dist/i18n/translatable.d.ts

@@ -0,0 +1,4 @@
+import { Translatable } from '../types/generated';
+export type Translate = (key: string, defaultValue?: string, options?: Record<string, unknown>) => string;
+export declare function isTranslatable(value: unknown): value is Translatable;
+export declare function resolveTranslatable(value: Translatable, payload: Record<string, unknown>, t: Translate): string;

package/dist/i18n/translatable.js

@@ -0,0 +1,24 @@
+//#region resources/js/i18n/translatable.ts
+function isTranslatable(value) {
+	return typeof value === "object" && value !== null && typeof value.key === "string";
+}
+function readPath(payload, path) {
+	return path.split(".").reduce((node, segment) => {
+		if (typeof node === "object" && node !== null) return node[segment];
+	}, payload);
+}
+function resolveTranslatable(value, payload, t) {
+	const fromPayload = {};
+	for (const [name, path] of Object.entries(value.payload)) {
+		const read = readPath(payload, path);
+		fromPayload[name] = read === void 0 ? "" : read;
+	}
+	return t(value.key, value.key, {
+		...value.replacements,
+		...fromPayload
+	});
+}
+//#endregion
+export { isTranslatable, resolveTranslatable };
+
+//# sourceMappingURL=translatable.js.map

package/dist/i18n/translatable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translatable.js","names":[],"sources":["../../resources/js/i18n/translatable.ts"],"sourcesContent":["import type { Translatable } from \"@lattice-php/lattice/types/generated\";\n\nexport type Translate = (\n  key: string,\n  defaultValue?: string,\n  options?: Record<string, unknown>,\n) => string;\n\nexport function isTranslatable(value: unknown): value is Translatable {\n  return (\n    typeof value === \"object\" &&\n    value !== null &&\n    typeof (value as { key?: unknown }).key === \"string\"\n  );\n}\n\nfunction readPath(payload: Record<string, unknown>, path: string): unknown {\n  return path.split(\".\").reduce<unknown>((node, segment) => {\n    if (typeof node === \"object\" && node !== null) {\n      return (node as Record<string, unknown>)[segment];\n    }\n\n    return undefined;\n  }, payload);\n}\n\nexport function resolveTranslatable(\n  value: Translatable,\n  payload: Record<string, unknown>,\n  t: Translate,\n): string {\n  const fromPayload: Record<string, unknown> = {};\n\n  for (const [name, path] of Object.entries(value.payload)) {\n    const read = readPath(payload, path);\n    fromPayload[name] = read === undefined ? \"\" : read;\n  }\n\n  return t(value.key, value.key, { ...value.replacements, ...fromPayload });\n}\n"],"mappings":";AAQA,SAAgB,eAAe,OAAuC;CACpE,OACE,OAAO,UAAU,YACjB,UAAU,QACV,OAAQ,MAA4B,QAAQ;AAEhD;AAEA,SAAS,SAAS,SAAkC,MAAuB;CACzE,OAAO,KAAK,MAAM,GAAG,EAAE,QAAiB,MAAM,YAAY;EACxD,IAAI,OAAO,SAAS,YAAY,SAAS,MACvC,OAAQ,KAAiC;CAI7C,GAAG,OAAO;AACZ;AAEA,SAAgB,oBACd,OACA,SACA,GACQ;CACR,MAAM,cAAuC,CAAC;CAE9C,KAAK,MAAM,CAAC,MAAM,SAAS,OAAO,QAAQ,MAAM,OAAO,GAAG;EACxD,MAAM,OAAO,SAAS,SAAS,IAAI;EACnC,YAAY,QAAQ,SAAS,KAAA,IAAY,KAAK;CAChD;CAEA,OAAO,EAAE,MAAM,KAAK,MAAM,KAAK;EAAE,GAAG,MAAM;EAAc,GAAG;CAAY,CAAC;AAC1E"}

package/dist/index.d.ts

@@ -23,6 +23,8 @@ export { LATTICE_EVENT } from './events/event-names';
 export type { ButtonVariant } from './core/components/button';
 export type { ReloadComponentEvent } from './events/event-names';
 export type { ComponentProps, KnownPageContainer, LayoutPayload, Node, NodeOfType, NodeProps, NodeType, PageContainer, PageBreadcrumb, PagePayload, PropsOf, RendererComponent, RendererComponentModule, RendererComponentProps, Schema, UnknownComponent, WireNode, } from './core/types';
+export { RealtimeListeners } from './realtime/listeners';
+export type { ChannelVisibility, ListenerPayload } from './types/generated';
 export { columnCell } from './table/registry';
 export type { ColumnCellArgs, ColumnCellComponent, ColumnRegistry } from './table/registry';
 export type { ColumnProps, ColumnPropsOf } from './table/types';

package/dist/index.js

@@ -22,8 +22,9 @@ import { registry } from "./registry.js";
 import { initializeTheme, useAppearance } from "./appearance/index.js";
 import { copyToClipboard, useClipboard } from "./clipboard/index.js";
 import SchemaLayout from "./layout/schema-layout.js";
+import { RealtimeListeners } from "./realtime/listeners.js";
 import { createLayoutResolver, createPageResolver, pageComponentName, withVisitHeaders } from "./inertia.js";
 import { Toaster } from "./toast/toaster.js";
 import { Provider } from "./provider.js";
 import { columnCell } from "./table/registry.js";
-export { Callouts, EventBridge, Icon, IconRenderer, IconRendererProvider, LATTICE_EVENT, LATTICE_REF_HEADER, OutletContext, Provider, Renderer, SchemaLayout, CollapsedContext as SidebarCollapsedContext, SpriteProvider, Toaster, builtinEffectHandlers, chatPlugin, columnCell, copyToClipboard, createLayoutResolver, createPageResolver, createPlugin, createRegistry, dispatchActionError, dispatchEffects, eagerComponent, effectHandler, extendRegistry, getActionEffects, initializeTheme, isActionEffect, layoutComponents, lazyComponent, mergeEffectHandlers, onCallout, onToast, pageComponentName, registry, showToast, useAppearance, useChat, useClipboard, useColumnRegistry, useComponentRegistry, useEffectDispatcher, useCollapsed as useSidebarCollapsed, withHeaders, withRefHeader, withVisitHeaders };
+export { Callouts, EventBridge, Icon, IconRenderer, IconRendererProvider, LATTICE_EVENT, LATTICE_REF_HEADER, OutletContext, Provider, RealtimeListeners, Renderer, SchemaLayout, CollapsedContext as SidebarCollapsedContext, SpriteProvider, Toaster, builtinEffectHandlers, chatPlugin, columnCell, copyToClipboard, createLayoutResolver, createPageResolver, createPlugin, createRegistry, dispatchActionError, dispatchEffects, eagerComponent, effectHandler, extendRegistry, getActionEffects, initializeTheme, isActionEffect, layoutComponents, lazyComponent, mergeEffectHandlers, onCallout, onToast, pageComponentName, registry, showToast, useAppearance, useChat, useClipboard, useColumnRegistry, useComponentRegistry, useEffectDispatcher, useCollapsed as useSidebarCollapsed, withHeaders, withRefHeader, withVisitHeaders };