payload-intl 0.2.4 → 1.0.0

package/README.md

@@ -13,7 +13,7 @@
 - Autocomplete to quickly insert and configure valid ICU arguments
 - Add optional descriptions to each message so editors understand the context
 - Visual tree & tabbed editor for quick navigation
-- Support for Rich Text messages
+<!-- - Support for Rich Text messages -->
 <!-- - Import/export JSON, copy messages between paths -->
 
 ## Getting Started
@@ -107,15 +107,14 @@ The `intlPlugin` accepts the following configuration:
 | `editorAccess`          | Authenticated users only | Access control for editing messages                     |
 | `hooks`                 | -                        | Collection hooks with and additional `afterUpdate` hook |
 | `tabs`                  | -                        | Enable tabbed interface                                 |
-| `richTextEditorOptions` | -                        | Configure rich text editor options                      |
 
-## Storage Adapter Requirements
+<!-- ## Storage Adapter Requirements
 
 The plugin creates a "messages" upload collection that stores translations as JSON files.
 
-You must ensure that the storage provider returns the direct URL to the uploaded files and read access is guaranteed.
+You must ensure that the storage provider returns the direct URL to the uploaded files and read access is guaranteed. -->
 
-## Message Schema Definition
+<!-- ## Message Schema Definition
 
 ### Message Descriptions
 
@@ -129,9 +128,9 @@ export default {
       "[Subtitle with user's name and message count] Welcome back, {firstName}! You have {count} new messages.",
   },
 } as const;
-```
+``` -->
 
-### Rich Text Messages
+<!-- ### Rich Text Messages
 
 Use `"$RICH$"` as the message value to enable rich text editing. Note that rich text messages do not support ICU arguments.
 
@@ -142,7 +141,7 @@ export default {
     terms: "$RICH$", // Rich text editor will be used
   },
 } as const;
-```
+``` -->
 
 ## Example Usage
 
@@ -166,16 +165,13 @@ export default buildConfig({
     intlPlugin({
       schema: messages,
       hooks: {
-        afterUpdate: () => revalidateTag("messages"),
+        afterUpdate: () => revalidateTag("messages"), // or anything else you want
       },
     }),
     s3Storage({
       collections: {
         messages: {
           prefix: "messages", // or anything else you want
-          // generate a publicly available URL to the file
-          generateFileURL: async ({ filename, prefix }) =>
-            `.../${prefix}/${filename}`,
         },
       },
     }),

package/dist/components/MessageController.d.ts

@@ -1,4 +1,4 @@
-import { TemplateVariable } from '../types.ts';
+import { TemplateVariable } from '../types';
 import { MessageType } from '../utils/schema';
 import { MessageValidator } from '../utils/validate';
 interface MessageControllerProps {
@@ -12,3 +12,4 @@ interface MessageControllerProps {
 }
 export declare function MessageController({ type, name, variables, label, locale, validate, className, }: MessageControllerProps): React.ReactNode;
 export {};
+//# sourceMappingURL=MessageController.d.ts.map

package/dist/components/MessageController.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageController.d.ts","sourceRoot":"","sources":["../../src/components/MessageController.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAIzD,UAAU,sBAAsB;IAC9B,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAC9B,QAAQ,EAAE,gBAAgB,CAAC;CAC5B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,GACV,EAAE,sBAAsB,GAAG,KAAK,CAAC,SAAS,CAgD1C"}

package/dist/components/MessageController.js

@@ -1,65 +1,43 @@
 import { jsx as o } from "react/jsx-runtime";
-import { Controller as g } from "react-hook-form";
-import { useMessagesForm as i } from "../context/messages-form.js";
-import { LexicalInput as C } from "./inputs/LexicalInput.js";
-import { MessageInput as h } from "./inputs/MessageInput.js";
-function M({
-  type: l,
-  name: n,
-  variables: m,
-  label: u,
-  locale: t,
-  validate: p,
-  className: s
+import { Controller as p } from "react-hook-form";
+import { useMessagesForm as g } from "../context/messages-form.js";
+import { MessageInput as i } from "./inputs/MessageInput.js";
+function v({
+  type: C,
+  name: e,
+  variables: n,
+  label: t,
+  locale: s,
+  validate: u,
+  className: l
 }) {
-  const { control: a } = i();
-  return l === "rich" ? /* @__PURE__ */ o(
-    g,
+  const { control: m } = g();
+  return /* @__PURE__ */ o(
+    p,
     {
-      control: a,
-      name: n,
-      render: ({ field: r, fieldState: e }) => /* @__PURE__ */ o(
-        C,
+      control: m,
+      name: e,
+      render: ({ field: r, fieldState: a }) => /* @__PURE__ */ o(
+        i,
         {
-          className: s,
-          error: e.error,
-          label: u,
-          lang: t,
-          onChange: r.onChange,
+          className: l,
+          error: a.error,
+          label: t,
+          lang: s,
           onBlur: r.onBlur,
-          value: r.value || ""
-        }
-      ),
-      rules: {
-        required: !0
-      }
-    }
-  ) : /* @__PURE__ */ o(
-    g,
-    {
-      control: a,
-      name: n,
-      render: ({ field: r, fieldState: e }) => /* @__PURE__ */ o(
-        h,
-        {
-          label: u,
-          lang: t,
-          className: s,
-          value: r.value || "",
-          variables: m,
-          error: e.error,
           onChange: r.onChange,
-          onBlur: r.onBlur
+          value: r.value || "",
+          variables: n
         }
       ),
       rules: {
         required: !0,
-        validate: p
+        validate: u
       }
     }
   );
 }
 export {
-  M as MessageController
+  v as MessageController
 };
 //# sourceMappingURL=MessageController.js.map

package/dist/components/MessageController.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageController.js","sources":["../../src/components/MessageController.tsx"],"sourcesContent":["import type { TemplateVariable } from \"@/types\";\nimport type { MessageType } from \"@/utils/schema\";\nimport type { MessageValidator } from \"@/utils/validate\";\nimport { Controller } from \"react-hook-form\";\n\nimport { useMessagesForm } from \"@/context/messages-form\";\n\nimport { LexicalInput } from \"./inputs/LexicalInput\";\nimport { MessageInput } from \"./inputs/MessageInput\";\n\ninterface MessageControllerProps {\n  type: MessageType;\n  label?: string;\n  locale: string;\n  name: string;\n  className?: string;\n  variables: TemplateVariable[];\n  validate: MessageValidator;\n}\n\nexport function MessageController({\n  type,\n  name,\n  variables,\n  label,\n  locale,\n  validate,\n  className,\n}: MessageControllerProps): React.ReactNode {\n  const { control } = useMessagesForm();\n\n  if (type === \"rich\") {\n    return (\n      <Controller\n        control={control}\n        name={name}\n        render={({ field, fieldState }) => (\n          <LexicalInput\n            className={className}\n            error={fieldState.error}\n            label={label}\n            lang={locale}\n            onChange={field.onChange}\n            onBlur={field.onBlur}\n            value={(field.value as unknown as string) || \"\"}\n          />\n        )}\n        rules={{\n          required: true,\n        }}\n      />\n    );\n  }\n\n  return (\n    <Controller\n      control={control}\n      name={name}\n      render={({ field, fieldState }) => (\n        <MessageInput\n          label={label}\n          lang={locale}\n          className={className}\n          value={(field.value as unknown as string) || \"\"}\n          variables={variables}\n          error={fieldState.error}\n          onChange={field.onChange}\n          onBlur={field.onBlur}\n        />\n      )}\n      rules={{\n        required: true,\n        validate,\n      }}\n    />\n  );\n}\n"],"names":["MessageController","type","name","variables","label","locale","validate","className","control","useMessagesForm","jsx","Controller","field","fieldState","LexicalInput","MessageInput"],"mappings":";;;;;AAoBO,SAASA,EAAkB;AAAA,EAChC,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAA4C;AAC1C,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAA;AAEpB,SAAIR,MAAS,SAET,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAH;AAAA,MACA,MAAAN;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAU,GAAO,YAAAC,QAChB,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,WAAAP;AAAA,UACA,OAAOM,EAAW;AAAA,UAClB,OAAAT;AAAA,UACA,MAAMC;AAAA,UACN,UAAUO,EAAM;AAAA,UAChB,QAAQA,EAAM;AAAA,UACd,OAAQA,EAAM,SAA+B;AAAA,QAAA;AAAA,MAAA;AAAA,MAGjD,OAAO;AAAA,QACL,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA,IAMJ,gBAAAF;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAH;AAAA,MACA,MAAAN;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAU,GAAO,YAAAC,QAChB,gBAAAH;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,OAAAX;AAAA,UACA,MAAMC;AAAA,UACN,WAAAE;AAAA,UACA,OAAQK,EAAM,SAA+B;AAAA,UAC7C,WAAAT;AAAA,UACA,OAAOU,EAAW;AAAA,UAClB,UAAUD,EAAM;AAAA,UAChB,QAAQA,EAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MAGlB,OAAO;AAAA,QACL,UAAU;AAAA,QACV,UAAAN;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"MessageController.js","sources":["../../src/components/MessageController.tsx"],"sourcesContent":["import { Controller } from 'react-hook-form';\nimport { useMessagesForm } from '@/context/messages-form';\nimport type { TemplateVariable } from '@/types';\nimport type { MessageType } from '@/utils/schema';\nimport type { MessageValidator } from '@/utils/validate';\n\nimport { MessageInput } from './inputs/MessageInput';\n\ninterface MessageControllerProps {\n  type: MessageType;\n  label?: string;\n  locale: string;\n  name: string;\n  className?: string;\n  variables: TemplateVariable[];\n  validate: MessageValidator;\n}\n\nexport function MessageController({\n  type,\n  name,\n  variables,\n  label,\n  locale,\n  validate,\n  className,\n}: MessageControllerProps): React.ReactNode {\n  const { control } = useMessagesForm();\n\n  // if (type === \"rich\") {\n  //   return (\n  //     <Controller\n  //       control={control}\n  //       name={name}\n  //       render={({ field, fieldState }) => (\n  //         <LexicalInput\n  //           className={className}\n  //           error={fieldState.error}\n  //           label={label}\n  //           lang={locale}\n  //           onChange={field.onChange}\n  //           onBlur={field.onBlur}\n  //           value={(field.value as unknown as string) || \"\"}\n  //         />\n  //       )}\n  //       rules={{\n  //         required: true,\n  //       }}\n  //     />\n  //   );\n  // }\n\n  return (\n    <Controller\n      control={control}\n      name={name}\n      render={({ field, fieldState }) => (\n        <MessageInput\n          className={className}\n          error={fieldState.error}\n          label={label}\n          lang={locale}\n          onBlur={field.onBlur}\n          onChange={field.onChange}\n          value={(field.value as unknown as string) || ''}\n          variables={variables}\n        />\n      )}\n      rules={{\n        required: true,\n        validate,\n      }}\n    />\n  );\n}\n"],"names":["MessageController","type","name","variables","label","locale","validate","className","control","useMessagesForm","jsx","Controller","field","fieldState","MessageInput"],"mappings":";;;;AAkBO,SAASA,EAAkB;AAAA,EAChC,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAA4C;AAC1C,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAA;AAyBpB,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAH;AAAA,MACA,MAAAN;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAU,GAAO,YAAAC,QAChB,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,WAAAP;AAAA,UACA,OAAOM,EAAW;AAAA,UAClB,OAAAT;AAAA,UACA,MAAMC;AAAA,UACN,QAAQO,EAAM;AAAA,UACd,UAAUA,EAAM;AAAA,UAChB,OAAQA,EAAM,SAA+B;AAAA,UAC7C,WAAAT;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJ,OAAO;AAAA,QACL,UAAU;AAAA,QACV,UAAAG;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}

package/dist/components/MessagesForm.d.ts

@@ -1,4 +1,4 @@
-import { DeepPartial, Locales, Messages, MessagesSchema, Translations } from '../types.ts';
+import { DeepPartial, Locales, Messages, MessagesSchema, Translations } from '../types';
 interface MessagesFormProps {
     locales: Locales;
     schema: MessagesSchema;
@@ -8,3 +8,4 @@ interface MessagesFormProps {
 }
 export declare function MessagesForm({ locales, schema, tabs, values, endpointUrl, }: MessagesFormProps): React.ReactNode;
 export {};
+//# sourceMappingURL=MessagesForm.d.ts.map

package/dist/components/MessagesForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessagesForm.d.ts","sourceRoot":"","sources":["../../src/components/MessagesForm.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,WAAW,EACX,OAAO,EACP,QAAQ,EACR,cAAc,EACd,YAAY,EACb,MAAM,SAAS,CAAC;AAQjB,UAAU,iBAAiB;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,cAAc,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,YAAY,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC5C,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,MAAM,EACN,IAAY,EACZ,MAAM,EACN,WAAW,GACZ,EAAE,iBAAiB,GAAG,KAAK,CAAC,SAAS,CA6GrC"}

package/dist/components/MessagesForm.js

@@ -1,18 +1,17 @@
 "use client";
-import { jsx as s, jsxs as o } from "react/jsx-runtime";
-import { useStepNav as x, Button as M } from "@payloadcms/ui";
+import { jsx as t, jsxs as o } from "react/jsx-runtime";
+import { useStepNav as x, Button as M, toast as d } from "@payloadcms/ui";
 import { isEqual as y } from "lodash-es";
 import { useEffect as j, useState as w } from "react";
 import { useForm as T } from "react-hook-form";
-import { toast as d } from "sonner";
 import { MessagesFormProvider as E } from "../context/messages-form.js";
-import { cn as h } from "../utils/cn.js";
+import { cn as p } from "../utils/cn.js";
 import { getErrorMessage as F } from "../utils/error-handling.js";
 import { JsonImport as C } from "./actions/JsonImport.js";
 import { MessageField as O } from "./layout/MessageField.js";
 import { MessagesTabs as I } from "./layout/MessagesTabs.js";
 import { MessagesTree as g } from "./layout/MessagesTree.js";
-function Q({
+function H({
   locales: u,
   schema: a,
   tabs: m = !1,
@@ -27,31 +26,28 @@ function Q({
     defaultValues: l,
     reValidateMode: "onChange"
   }), [c, v] = w(Object.keys(a)[0]), N = async (e) => {
-    const r = d.loading("Saving..."), S = Object.entries(e).reduce((t, [n, p]) => y(p, l[n]) ? t : {
-      ...t,
-      [n]: p
-    }, {});
+    const r = d.loading("Saving..."), S = Object.entries(e).reduce((s, [n, h]) => (y(h, l[n]) || (s[n] = h), s), {});
     try {
-      const t = await fetch(b, {
+      const s = await fetch(b, {
         method: "PUT",
         headers: {
           "Content-Type": "application/json"
         },
         body: JSON.stringify(S)
       });
-      if (!t.ok) {
-        const n = await F(t);
+      if (!s.ok) {
+        const n = await F(s);
         throw new Error(n);
       }
       i.reset(e), d.success("Saved", { id: r });
-    } catch (t) {
+    } catch (s) {
       d.error(
-        `Failed to save: ${t instanceof Error ? t.message : "Unknown error"}`,
+        `Failed to save: ${s instanceof Error ? s.message : "Unknown error"}`,
         { id: r }
       );
     }
   };
-  return /* @__PURE__ */ s(E, { form: i, locales: u, children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ t(E, { form: i, locales: u, children: /* @__PURE__ */ o(
     "form",
     {
       className: "flex h-[calc(100vh-var(--app-header-height))] flex-col",
@@ -59,25 +55,25 @@ function Q({
       children: [
         /* @__PURE__ */ o("div", { className: "sticky top-0 z-10 bg-background", children: [
           /* @__PURE__ */ o("header", { className: "mb-6 flex items-center justify-between gap-4", children: [
-            /* @__PURE__ */ s("h1", { className: "text-4xl", children: "Messages" }),
+            /* @__PURE__ */ t("h1", { className: "text-4xl", children: "Messages" }),
             /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ s(C, {}),
-              /* @__PURE__ */ s(
+              /* @__PURE__ */ t(C, {}),
+              /* @__PURE__ */ t(
                 M,
                 {
                   className: "my-0",
-                  type: "submit",
                   disabled: !i.formState.isDirty,
+                  type: "submit",
                   children: "Save"
                 }
               )
             ] })
           ] }),
-          m && /* @__PURE__ */ s(
+          m && /* @__PURE__ */ t(
             I,
             {
-              schema: a,
               activeTab: c,
+              schema: a,
               setActiveTab: v
             }
           )
@@ -85,26 +81,26 @@ function Q({
         /* @__PURE__ */ o(
           "div",
           {
-            id: "messages-form-content",
             className: "min-h-0 overflow-y-auto pt-8 pb-16",
+            id: "messages-form-content",
             children: [
-              !m && /* @__PURE__ */ s(g, { path: "", schema: a, nestingLevel: 0 }),
-              m && Object.entries(a).map(([e, r]) => typeof r == "string" ? /* @__PURE__ */ s(
+              !m && /* @__PURE__ */ t(g, { nestingLevel: 0, path: "", schema: a }),
+              m && Object.entries(a).map(([e, r]) => typeof r == "string" ? /* @__PURE__ */ t(
                 O,
                 {
-                  schema: r,
-                  className: h({ hidden: c !== e }),
+                  className: p({ hidden: c !== e }),
                   messageKey: e,
-                  path: e
+                  path: e,
+                  schema: r
                 },
                 e
-              ) : /* @__PURE__ */ s(
+              ) : /* @__PURE__ */ t(
                 g,
                 {
-                  className: h({ hidden: c !== e }),
+                  className: p({ hidden: c !== e }),
+                  nestingLevel: 0,
                   path: e,
-                  schema: r,
-                  nestingLevel: 0
+                  schema: r
                 },
                 e
               ))
@@ -116,6 +112,6 @@ function Q({
   ) });
 }
 export {
-  Q as MessagesForm
+  H as MessagesForm
 };
 //# sourceMappingURL=MessagesForm.js.map

package/dist/components/MessagesForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessagesForm.js","sources":["../../src/components/MessagesForm.tsx"],"sourcesContent":["\"use client\";\n\nimport type { FormValues } from \"@/context/messages-form\";\nimport type {\n  DeepPartial,\n  Locales,\n  Messages,\n  MessagesSchema,\n  Translations,\n} from \"@/types\";\nimport { Button, useStepNav } from \"@payloadcms/ui\";\nimport { isEqual } from \"lodash-es\";\nimport { useEffect, useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport { toast } from \"sonner\";\n\nimport { MessagesFormProvider } from \"@/context/messages-form\";\nimport { cn } from \"@/utils/cn\";\nimport { getErrorMessage } from \"@/utils/error-handling\";\n\nimport { JsonImport } from \"./actions/JsonImport\";\nimport { MessageField } from \"./layout/MessageField\";\nimport { MessagesTabs } from \"./layout/MessagesTabs\";\nimport { MessagesTree } from \"./layout/MessagesTree\";\n\ninterface MessagesFormProps {\n  locales: Locales;\n  schema: MessagesSchema;\n  tabs?: boolean;\n  values: Translations<DeepPartial<Messages>>;\n  endpointUrl: string;\n}\n\nexport function MessagesForm({\n  locales,\n  schema,\n  tabs = false,\n  values,\n  endpointUrl,\n}: MessagesFormProps): React.ReactNode {\n  const { setStepNav } = useStepNav();\n  useEffect(() => {\n    setStepNav([{ label: \"Intl Messages\", url: \"/intl\" }]);\n  }, [setStepNav]);\n\n  const form = useForm<FormValues>({\n    defaultValues: values,\n    reValidateMode: \"onChange\",\n  });\n  const [activeTab, setActiveTab] = useState(Object.keys(schema)[0]);\n\n  const handleSubmit = async (currentValues: FormValues) => {\n    const toastId = toast.loading(\"Saving...\");\n    const changes = Object.entries(currentValues).reduce<\n      Translations<Messages>\n    >((acc, [locale, value]) => {\n      const hasChanged = !isEqual(value, values[locale]);\n      if (!hasChanged) {\n        return acc;\n      }\n      return {\n        ...acc,\n        [locale]: value,\n      };\n    }, {});\n\n    try {\n      const response = await fetch(endpointUrl, {\n        method: \"PUT\",\n        headers: {\n          \"Content-Type\": \"application/json\",\n        },\n        body: JSON.stringify(changes),\n      });\n\n      if (!response.ok) {\n        const error = await getErrorMessage(response);\n        throw new Error(error);\n      }\n\n      form.reset(currentValues);\n      toast.success(\"Saved\", { id: toastId });\n    } catch (error) {\n      toast.error(\n        `Failed to save: ${error instanceof Error ? error.message : \"Unknown error\"}`,\n        { id: toastId },\n      );\n    }\n  };\n\n  return (\n    <MessagesFormProvider form={form} locales={locales}>\n      <form\n        className=\"flex h-[calc(100vh-var(--app-header-height))] flex-col\"\n        onSubmit={form.handleSubmit(handleSubmit)}\n      >\n        <div className=\"sticky top-0 z-10 bg-background\">\n          <header className=\"mb-6 flex items-center justify-between gap-4\">\n            <h1 className=\"text-4xl\">Messages</h1>\n            <div className=\"flex items-center gap-2\">\n              <JsonImport />\n              <Button\n                className=\"my-0\"\n                type=\"submit\"\n                disabled={!form.formState.isDirty}\n              >\n                Save\n              </Button>\n            </div>\n          </header>\n\n          {tabs && (\n            <MessagesTabs\n              schema={schema}\n              activeTab={activeTab}\n              setActiveTab={setActiveTab}\n            />\n          )}\n        </div>\n\n        <div\n          id=\"messages-form-content\"\n          className=\"min-h-0 overflow-y-auto pt-8 pb-16\"\n        >\n          {!tabs && <MessagesTree path=\"\" schema={schema} nestingLevel={0} />}\n          {tabs &&\n            Object.entries(schema).map(([key, value]) => {\n              if (typeof value === \"string\") {\n                return (\n                  <MessageField\n                    schema={value}\n                    key={key}\n                    className={cn({ hidden: activeTab !== key })}\n                    messageKey={key}\n                    path={key}\n                  />\n                );\n              }\n              return (\n                <MessagesTree\n                  className={cn({ hidden: activeTab !== key })}\n                  key={key}\n                  path={key}\n                  schema={value}\n                  nestingLevel={0}\n                />\n              );\n            })}\n        </div>\n      </form>\n    </MessagesFormProvider>\n  );\n}\n"],"names":["MessagesForm","locales","schema","tabs","values","endpointUrl","setStepNav","useStepNav","useEffect","form","useForm","activeTab","setActiveTab","useState","handleSubmit","currentValues","toastId","toast","changes","acc","locale","value","isEqual","response","error","getErrorMessage","jsx","MessagesFormProvider","jsxs","JsonImport","Button","MessagesTabs","MessagesTree","key","MessageField","cn"],"mappings":";;;;;;;;;;;;;;AAiCO,SAASA,EAAa;AAAA,EAC3B,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAC;AAAA,EACA,aAAAC;AACF,GAAuC;AACrC,QAAM,EAAE,YAAAC,EAAA,IAAeC,EAAA;AACvB,EAAAC,EAAU,MAAM;AACd,IAAAF,EAAW,CAAC,EAAE,OAAO,iBAAiB,KAAK,QAAA,CAAS,CAAC;AAAA,EACvD,GAAG,CAACA,CAAU,CAAC;AAEf,QAAMG,IAAOC,EAAoB;AAAA,IAC/B,eAAeN;AAAA,IACf,gBAAgB;AAAA,EAAA,CACjB,GACK,CAACO,GAAWC,CAAY,IAAIC,EAAS,OAAO,KAAKX,CAAM,EAAE,CAAC,CAAC,GAE3DY,IAAe,OAAOC,MAA8B;AACxD,UAAMC,IAAUC,EAAM,QAAQ,WAAW,GACnCC,IAAU,OAAO,QAAQH,CAAa,EAAE,OAE5C,CAACI,GAAK,CAACC,GAAQC,CAAK,MACAC,EAAQD,GAAOjB,EAAOgB,CAAM,CAAC,IAExCD,IAEF;AAAA,MACL,GAAGA;AAAA,MACH,CAACC,CAAM,GAAGC;AAAA,IAAA,GAEX,CAAA,CAAE;AAEL,QAAI;AACF,YAAME,IAAW,MAAM,MAAMlB,GAAa;AAAA,QACxC,QAAQ;AAAA,QACR,SAAS;AAAA,UACP,gBAAgB;AAAA,QAAA;AAAA,QAElB,MAAM,KAAK,UAAUa,CAAO;AAAA,MAAA,CAC7B;AAED,UAAI,CAACK,EAAS,IAAI;AAChB,cAAMC,IAAQ,MAAMC,EAAgBF,CAAQ;AAC5C,cAAM,IAAI,MAAMC,CAAK;AAAA,MACvB;AAEA,MAAAf,EAAK,MAAMM,CAAa,GACxBE,EAAM,QAAQ,SAAS,EAAE,IAAID,GAAS;AAAA,IACxC,SAASQ,GAAO;AACd,MAAAP,EAAM;AAAA,QACJ,mBAAmBO,aAAiB,QAAQA,EAAM,UAAU,eAAe;AAAA,QAC3E,EAAE,IAAIR,EAAA;AAAA,MAAQ;AAAA,IAElB;AAAA,EACF;AAEA,SACE,gBAAAU,EAACC,GAAA,EAAqB,MAAAlB,GAAY,SAAAR,GAChC,UAAA,gBAAA2B;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,UAAUnB,EAAK,aAAaK,CAAY;AAAA,MAExC,UAAA;AAAA,QAAA,gBAAAc,EAAC,OAAA,EAAI,WAAU,mCACb,UAAA;AAAA,UAAA,gBAAAA,EAAC,UAAA,EAAO,WAAU,gDAChB,UAAA;AAAA,YAAA,gBAAAF,EAAC,MAAA,EAAG,WAAU,YAAW,UAAA,YAAQ;AAAA,YACjC,gBAAAE,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,cAAA,gBAAAF,EAACG,GAAA,EAAW;AAAA,cACZ,gBAAAH;AAAA,gBAACI;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,MAAK;AAAA,kBACL,UAAU,CAACrB,EAAK,UAAU;AAAA,kBAC3B,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YAED,EAAA,CACF;AAAA,UAAA,GACF;AAAA,UAECN,KACC,gBAAAuB;AAAA,YAACK;AAAA,YAAA;AAAA,cACC,QAAA7B;AAAA,cACA,WAAAS;AAAA,cACA,cAAAC;AAAA,YAAA;AAAA,UAAA;AAAA,QACF,GAEJ;AAAA,QAEA,gBAAAgB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,WAAU;AAAA,YAET,UAAA;AAAA,cAAA,CAACzB,KAAQ,gBAAAuB,EAACM,GAAA,EAAa,MAAK,IAAG,QAAA9B,GAAgB,cAAc,GAAG;AAAA,cAChEC,KACC,OAAO,QAAQD,CAAM,EAAE,IAAI,CAAC,CAAC+B,GAAKZ,CAAK,MACjC,OAAOA,KAAU,WAEjB,gBAAAK;AAAA,gBAACQ;AAAA,gBAAA;AAAA,kBACC,QAAQb;AAAA,kBAER,WAAWc,EAAG,EAAE,QAAQxB,MAAcsB,GAAK;AAAA,kBAC3C,YAAYA;AAAA,kBACZ,MAAMA;AAAA,gBAAA;AAAA,gBAHDA;AAAA,cAAA,IAQT,gBAAAP;AAAA,gBAACM;AAAA,gBAAA;AAAA,kBACC,WAAWG,EAAG,EAAE,QAAQxB,MAAcsB,GAAK;AAAA,kBAE3C,MAAMA;AAAA,kBACN,QAAQZ;AAAA,kBACR,cAAc;AAAA,gBAAA;AAAA,gBAHTY;AAAA,cAAA,CAMV;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACL;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"MessagesForm.js","sources":["../../src/components/MessagesForm.tsx"],"sourcesContent":["'use client';\n\nimport { Button, toast, useStepNav } from '@payloadcms/ui';\nimport { isEqual } from 'lodash-es';\nimport { useEffect, useState } from 'react';\nimport { useForm } from 'react-hook-form';\nimport type { FormValues } from '@/context/messages-form';\nimport { MessagesFormProvider } from '@/context/messages-form';\nimport type {\n  DeepPartial,\n  Locales,\n  Messages,\n  MessagesSchema,\n  Translations,\n} from '@/types';\nimport { cn } from '@/utils/cn';\nimport { getErrorMessage } from '@/utils/error-handling';\nimport { JsonImport } from './actions/JsonImport';\nimport { MessageField } from './layout/MessageField';\nimport { MessagesTabs } from './layout/MessagesTabs';\nimport { MessagesTree } from './layout/MessagesTree';\n\ninterface MessagesFormProps {\n  locales: Locales;\n  schema: MessagesSchema;\n  tabs?: boolean;\n  values: Translations<DeepPartial<Messages>>;\n  endpointUrl: string;\n}\n\nexport function MessagesForm({\n  locales,\n  schema,\n  tabs = false,\n  values,\n  endpointUrl,\n}: MessagesFormProps): React.ReactNode {\n  const { setStepNav } = useStepNav();\n  useEffect(() => {\n    setStepNav([{ label: 'Intl Messages', url: '/intl' }]);\n  }, [setStepNav]);\n\n  const form = useForm<FormValues>({\n    defaultValues: values,\n    reValidateMode: 'onChange',\n  });\n  const [activeTab, setActiveTab] = useState(Object.keys(schema)[0]);\n\n  const handleSubmit = async (currentValues: FormValues) => {\n    const toastId = toast.loading('Saving...');\n    const changes = Object.entries(currentValues).reduce<\n      Translations<Messages>\n    >((acc, [locale, value]) => {\n      const hasChanged = !isEqual(value, values[locale]);\n      if (!hasChanged) return acc;\n      acc[locale] = value;\n      return acc;\n    }, {});\n\n    try {\n      const response = await fetch(endpointUrl, {\n        method: 'PUT',\n        headers: {\n          'Content-Type': 'application/json',\n        },\n        body: JSON.stringify(changes),\n      });\n\n      if (!response.ok) {\n        const error = await getErrorMessage(response);\n        throw new Error(error);\n      }\n\n      form.reset(currentValues);\n      toast.success('Saved', { id: toastId });\n    } catch (error) {\n      toast.error(\n        `Failed to save: ${error instanceof Error ? error.message : 'Unknown error'}`,\n        { id: toastId },\n      );\n    }\n  };\n\n  return (\n    <MessagesFormProvider form={form} locales={locales}>\n      <form\n        className=\"flex h-[calc(100vh-var(--app-header-height))] flex-col\"\n        onSubmit={form.handleSubmit(handleSubmit)}\n      >\n        <div className=\"sticky top-0 z-10 bg-background\">\n          <header className=\"mb-6 flex items-center justify-between gap-4\">\n            <h1 className=\"text-4xl\">Messages</h1>\n            <div className=\"flex items-center gap-2\">\n              <JsonImport />\n              <Button\n                className=\"my-0\"\n                disabled={!form.formState.isDirty}\n                type=\"submit\"\n              >\n                Save\n              </Button>\n            </div>\n          </header>\n\n          {tabs && (\n            <MessagesTabs\n              activeTab={activeTab}\n              schema={schema}\n              setActiveTab={setActiveTab}\n            />\n          )}\n        </div>\n\n        <div\n          className=\"min-h-0 overflow-y-auto pt-8 pb-16\"\n          id=\"messages-form-content\"\n        >\n          {!tabs && <MessagesTree nestingLevel={0} path=\"\" schema={schema} />}\n          {tabs &&\n            Object.entries(schema).map(([key, value]) => {\n              if (typeof value === 'string') {\n                return (\n                  <MessageField\n                    className={cn({ hidden: activeTab !== key })}\n                    key={key}\n                    messageKey={key}\n                    path={key}\n                    schema={value}\n                  />\n                );\n              }\n              return (\n                <MessagesTree\n                  className={cn({ hidden: activeTab !== key })}\n                  key={key}\n                  nestingLevel={0}\n                  path={key}\n                  schema={value}\n                />\n              );\n            })}\n        </div>\n      </form>\n    </MessagesFormProvider>\n  );\n}\n"],"names":["MessagesForm","locales","schema","tabs","values","endpointUrl","setStepNav","useStepNav","useEffect","form","useForm","activeTab","setActiveTab","useState","handleSubmit","currentValues","toastId","toast","changes","acc","locale","value","isEqual","response","error","getErrorMessage","jsx","MessagesFormProvider","jsxs","JsonImport","Button","MessagesTabs","MessagesTree","key","MessageField","cn"],"mappings":"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"}

package/dist/components/actions/JsonImport.d.ts

@@ -1 +1,2 @@
 export declare function JsonImport(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=JsonImport.d.ts.map

package/dist/components/actions/JsonImport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JsonImport.d.ts","sourceRoot":"","sources":["../../../src/components/actions/JsonImport.tsx"],"names":[],"mappings":"AAMA,wBAAgB,UAAU,4CAiEzB"}

package/dist/components/actions/JsonImport.js

@@ -9,7 +9,6 @@ function C() {
     /* @__PURE__ */ o(
       "input",
       {
-        ref: r,
         accept: ".json",
         hidden: !0,
         onChange: (t) => {
@@ -27,24 +26,25 @@ function C() {
             }), n(void 0), t.target.value = "";
           }, l.readAsText(e);
         },
+        ref: r,
         type: "file"
       }
     ),
     /* @__PURE__ */ o(
       c,
       {
-        className: "my-0",
         buttonStyle: "subtle",
-        iconPosition: "left",
+        className: "my-0",
         icon: /* @__PURE__ */ o(h, { className: "size-5" }),
+        iconPosition: "left",
         SubMenuPopupContent: ({ close: t }) => /* @__PURE__ */ o("div", { className: "flex flex-col gap-2", children: i.map((e) => /* @__PURE__ */ a(
           c,
           {
             buttonStyle: "subtle",
-            size: "small",
             onClick: () => {
               n(e), r.current?.click(), t();
             },
+            size: "small",
             children: [
               e,
               ".json"

package/dist/components/actions/JsonImport.js.map

@@ -1 +1 @@
-{"version":3,"file":"JsonImport.js","sources":["../../../src/components/actions/JsonImport.tsx"],"sourcesContent":["import { Button } from \"@payloadcms/ui\";\nimport { IconBraces } from \"@tabler/icons-react\";\nimport { useRef, useState } from \"react\";\n\nimport { useMessagesForm } from \"@/context/messages-form\";\n\nexport function JsonImport() {\n  const { locales, setValue } = useMessagesForm();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [selectedLocale, setSelectedLocale] = useState<string>();\n\n  const handleImportJSON = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const file = event.target.files?.[0];\n    if (!selectedLocale || !file) {\n      event.target.value = \"\";\n      return;\n    }\n\n    const reader = new FileReader();\n    reader.onload = (readerEvent) => {\n      const text = readerEvent.target?.result as string;\n      const data = JSON.parse(text);\n      // FIMXE this does not cause the form to re-render\n      setValue(selectedLocale, data, {\n        shouldDirty: true,\n        shouldValidate: true,\n      });\n      setSelectedLocale(undefined);\n      // Clear the input value to allow re-selection of the same or different file\n      event.target.value = \"\";\n    };\n    reader.readAsText(file);\n  };\n\n  return (\n    <>\n      <input\n        ref={inputRef}\n        accept=\".json\"\n        hidden\n        onChange={handleImportJSON}\n        type=\"file\"\n      />\n      <Button\n        className=\"my-0\"\n        buttonStyle=\"subtle\"\n        iconPosition=\"left\"\n        icon={<IconBraces className=\"size-5\" />}\n        SubMenuPopupContent={({ close }) => (\n          <div className=\"flex flex-col gap-2\">\n            {locales.map((locale) => (\n              <Button\n                key={locale}\n                buttonStyle=\"subtle\"\n                size=\"small\"\n                onClick={() => {\n                  setSelectedLocale(locale);\n                  inputRef.current?.click();\n                  close();\n                }}\n              >\n                {locale}.json\n              </Button>\n            ))}\n          </div>\n        )}\n      >\n        Import\n      </Button>\n    </>\n  );\n}\n"],"names":["JsonImport","locales","setValue","useMessagesForm","inputRef","useRef","selectedLocale","setSelectedLocale","useState","jsxs","Fragment","jsx","event","file","reader","readerEvent","text","data","Button","IconBraces","close","locale"],"mappings":";;;;;AAMO,SAASA,IAAa;AAC3B,QAAM,EAAE,SAAAC,GAAS,UAAAC,EAAA,IAAaC,EAAA,GACxBC,IAAWC,EAAyB,IAAI,GACxC,CAACC,GAAgBC,CAAiB,IAAIC,EAAA;AAyB5C,SACE,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKP;AAAA,QACL,QAAO;AAAA,QACP,QAAM;AAAA,QACN,UA7BmB,CAACQ,MAA+C;AACvE,gBAAMC,IAAOD,EAAM,OAAO,QAAQ,CAAC;AACnC,cAAI,CAACN,KAAkB,CAACO,GAAM;AAC5B,YAAAD,EAAM,OAAO,QAAQ;AACrB;AAAA,UACF;AAEA,gBAAME,IAAS,IAAI,WAAA;AACnB,UAAAA,EAAO,SAAS,CAACC,MAAgB;AAC/B,kBAAMC,IAAOD,EAAY,QAAQ,QAC3BE,IAAO,KAAK,MAAMD,CAAI;AAE5B,YAAAd,EAASI,GAAgBW,GAAM;AAAA,cAC7B,aAAa;AAAA,cACb,gBAAgB;AAAA,YAAA,CACjB,GACDV,EAAkB,MAAS,GAE3BK,EAAM,OAAO,QAAQ;AAAA,UACvB,GACAE,EAAO,WAAWD,CAAI;AAAA,QACxB;AAAA,QASM,MAAK;AAAA,MAAA;AAAA,IAAA;AAAA,IAEP,gBAAAF;AAAA,MAACO;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,aAAY;AAAA,QACZ,cAAa;AAAA,QACb,MAAM,gBAAAP,EAACQ,GAAA,EAAW,WAAU,SAAA,CAAS;AAAA,QACrC,qBAAqB,CAAC,EAAE,OAAAC,QACtB,gBAAAT,EAAC,OAAA,EAAI,WAAU,uBACZ,UAAAV,EAAQ,IAAI,CAACoB,MACZ,gBAAAZ;AAAA,UAACS;AAAA,UAAA;AAAA,YAEC,aAAY;AAAA,YACZ,MAAK;AAAA,YACL,SAAS,MAAM;AACb,cAAAX,EAAkBc,CAAM,GACxBjB,EAAS,SAAS,MAAA,GAClBgB,EAAA;AAAA,YACF;AAAA,YAEC,UAAA;AAAA,cAAAC;AAAA,cAAO;AAAA,YAAA;AAAA,UAAA;AAAA,UATHA;AAAA,QAAA,CAWR,GACH;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAED,GACF;AAEJ;"}
+{"version":3,"file":"JsonImport.js","sources":["../../../src/components/actions/JsonImport.tsx"],"sourcesContent":["import { Button } from '@payloadcms/ui';\nimport { IconBraces } from '@tabler/icons-react';\nimport { useRef, useState } from 'react';\n\nimport { useMessagesForm } from '@/context/messages-form';\n\nexport function JsonImport() {\n  const { locales, setValue } = useMessagesForm();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [selectedLocale, setSelectedLocale] = useState<string>();\n\n  const handleImportJSON = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const file = event.target.files?.[0];\n    if (!selectedLocale || !file) {\n      event.target.value = '';\n      return;\n    }\n\n    const reader = new FileReader();\n    reader.onload = (readerEvent) => {\n      const text = readerEvent.target?.result as string;\n      const data = JSON.parse(text);\n      // FIMXE this does not cause the form to re-render\n      setValue(selectedLocale, data, {\n        shouldDirty: true,\n        shouldValidate: true,\n      });\n      setSelectedLocale(undefined);\n      // Clear the input value to allow re-selection of the same or different file\n      event.target.value = '';\n    };\n    reader.readAsText(file);\n  };\n\n  return (\n    <>\n      <input\n        accept=\".json\"\n        hidden\n        onChange={handleImportJSON}\n        ref={inputRef}\n        type=\"file\"\n      />\n      <Button\n        buttonStyle=\"subtle\"\n        className=\"my-0\"\n        icon={<IconBraces className=\"size-5\" />}\n        iconPosition=\"left\"\n        SubMenuPopupContent={({ close }) => (\n          <div className=\"flex flex-col gap-2\">\n            {locales.map((locale) => (\n              <Button\n                buttonStyle=\"subtle\"\n                key={locale}\n                onClick={() => {\n                  setSelectedLocale(locale);\n                  inputRef.current?.click();\n                  close();\n                }}\n                size=\"small\"\n              >\n                {locale}.json\n              </Button>\n            ))}\n          </div>\n        )}\n      >\n        Import\n      </Button>\n    </>\n  );\n}\n"],"names":["JsonImport","locales","setValue","useMessagesForm","inputRef","useRef","selectedLocale","setSelectedLocale","useState","jsxs","Fragment","jsx","event","file","reader","readerEvent","text","data","Button","IconBraces","close","locale"],"mappings":";;;;;AAMO,SAASA,IAAa;AAC3B,QAAM,EAAE,SAAAC,GAAS,UAAAC,EAAA,IAAaC,EAAA,GACxBC,IAAWC,EAAyB,IAAI,GACxC,CAACC,GAAgBC,CAAiB,IAAIC,EAAA;AAyB5C,SACE,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAO;AAAA,QACP,QAAM;AAAA,QACN,UA5BmB,CAACC,MAA+C;AACvE,gBAAMC,IAAOD,EAAM,OAAO,QAAQ,CAAC;AACnC,cAAI,CAACN,KAAkB,CAACO,GAAM;AAC5B,YAAAD,EAAM,OAAO,QAAQ;AACrB;AAAA,UACF;AAEA,gBAAME,IAAS,IAAI,WAAA;AACnB,UAAAA,EAAO,SAAS,CAACC,MAAgB;AAC/B,kBAAMC,IAAOD,EAAY,QAAQ,QAC3BE,IAAO,KAAK,MAAMD,CAAI;AAE5B,YAAAd,EAASI,GAAgBW,GAAM;AAAA,cAC7B,aAAa;AAAA,cACb,gBAAgB;AAAA,YAAA,CACjB,GACDV,EAAkB,MAAS,GAE3BK,EAAM,OAAO,QAAQ;AAAA,UACvB,GACAE,EAAO,WAAWD,CAAI;AAAA,QACxB;AAAA,QAQM,KAAKT;AAAA,QACL,MAAK;AAAA,MAAA;AAAA,IAAA;AAAA,IAEP,gBAAAO;AAAA,MAACO;AAAA,MAAA;AAAA,QACC,aAAY;AAAA,QACZ,WAAU;AAAA,QACV,MAAM,gBAAAP,EAACQ,GAAA,EAAW,WAAU,SAAA,CAAS;AAAA,QACrC,cAAa;AAAA,QACb,qBAAqB,CAAC,EAAE,OAAAC,QACtB,gBAAAT,EAAC,OAAA,EAAI,WAAU,uBACZ,UAAAV,EAAQ,IAAI,CAACoB,MACZ,gBAAAZ;AAAA,UAACS;AAAA,UAAA;AAAA,YACC,aAAY;AAAA,YAEZ,SAAS,MAAM;AACb,cAAAX,EAAkBc,CAAM,GACxBjB,EAAS,SAAS,MAAA,GAClBgB,EAAA;AAAA,YACF;AAAA,YACA,MAAK;AAAA,YAEJ,UAAA;AAAA,cAAAC;AAAA,cAAO;AAAA,YAAA;AAAA,UAAA;AAAA,UARHA;AAAA,QAAA,CAUR,GACH;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAED,GACF;AAEJ;"}

package/dist/components/actions/Move.d.ts

@@ -1,3 +1,2 @@
-export interface MoveProps {
-}
-export declare function Move({}: MoveProps): import("react/jsx-runtime").JSX.Element;
+export declare function Move(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Move.d.ts.map

package/dist/components/actions/Move.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Move.d.ts","sourceRoot":"","sources":["../../../src/components/actions/Move.tsx"],"names":[],"mappings":"AAMA,wBAAgB,IAAI,4CA4BnB"}

package/dist/components/inputs/InputWrapper.d.ts

@@ -5,3 +5,4 @@ export interface InputWrapperProps {
     className?: string;
 }
 export declare function InputWrapper({ label, error, className, children, }: React.PropsWithChildren<InputWrapperProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InputWrapper.d.ts.map

package/dist/components/inputs/InputWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/InputWrapper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAIlD,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,UAAU,GAAG,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,GACT,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,2CAqB5C"}

package/dist/components/inputs/InputWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputWrapper.js","sources":["../../../src/components/inputs/InputWrapper.tsx"],"sourcesContent":["import type { FieldError } from \"react-hook-form\";\nimport { FieldLabel } from \"@payloadcms/ui\";\n\nimport { cn } from \"@/utils/cn\";\n\nexport interface InputWrapperProps {\n  label?: string;\n  error: FieldError | undefined;\n  className?: string;\n}\n\nexport function InputWrapper({\n  label,\n  error,\n  className,\n  children,\n}: React.PropsWithChildren<InputWrapperProps>) {\n  return (\n    <div className={cn(\"flex h-full min-w-5 flex-col gap-1\", className)}>\n      <fieldset\n        className={cn(\n          \"mx-0 flex-1 rounded-md focus-within:border-elevation-400\",\n          {\n            \"border-error bg-error\": error,\n          },\n        )}\n      >\n        {label && (\n          <legend className=\"-ml-2 px-1.5 text-base\">\n            <FieldLabel label={label} />\n          </legend>\n        )}\n        {children}\n      </fieldset>\n      <p className=\"text-base text-error\">{error?.message}</p>\n    </div>\n  );\n}\n"],"names":["InputWrapper","label","error","className","children","cn","jsxs","jsx","FieldLabel"],"mappings":";;;AAWO,SAASA,EAAa;AAAA,EAC3B,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AACF,GAA+C;AAC7C,2BACG,OAAA,EAAI,WAAWC,EAAG,sCAAsCF,CAAS,GAChE,UAAA;AAAA,IAAA,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWD;AAAA,UACT;AAAA,UACA;AAAA,YACE,yBAAyBH;AAAA,UAAA;AAAA,QAC3B;AAAA,QAGD,UAAA;AAAA,UAAAD,uBACE,UAAA,EAAO,WAAU,0BAChB,UAAA,gBAAAM,EAACC,GAAA,EAAW,OAAAP,GAAc,EAAA,CAC5B;AAAA,UAEDG;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,gBAAAG,EAAC,KAAA,EAAE,WAAU,wBAAwB,aAAO,QAAA,CAAQ;AAAA,EAAA,GACtD;AAEJ;"}
+{"version":3,"file":"InputWrapper.js","sources":["../../../src/components/inputs/InputWrapper.tsx"],"sourcesContent":["import { FieldLabel } from '@payloadcms/ui';\nimport type { FieldError } from 'react-hook-form';\n\nimport { cn } from '@/utils/cn';\n\nexport interface InputWrapperProps {\n  label?: string;\n  error: FieldError | undefined;\n  className?: string;\n}\n\nexport function InputWrapper({\n  label,\n  error,\n  className,\n  children,\n}: React.PropsWithChildren<InputWrapperProps>) {\n  return (\n    <div className={cn('flex h-full min-w-5 flex-col gap-1', className)}>\n      <fieldset\n        className={cn(\n          'mx-0 flex-1 rounded-md focus-within:border-elevation-400',\n          {\n            'border-error bg-error': error,\n          },\n        )}\n      >\n        {label && (\n          <legend className=\"-ml-2 px-1.5 text-base\">\n            <FieldLabel label={label} />\n          </legend>\n        )}\n        {children}\n      </fieldset>\n      <p className=\"text-base text-error\">{error?.message}</p>\n    </div>\n  );\n}\n"],"names":["InputWrapper","label","error","className","children","cn","jsxs","jsx","FieldLabel"],"mappings":";;;AAWO,SAASA,EAAa;AAAA,EAC3B,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AACF,GAA+C;AAC7C,2BACG,OAAA,EAAI,WAAWC,EAAG,sCAAsCF,CAAS,GAChE,UAAA;AAAA,IAAA,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWD;AAAA,UACT;AAAA,UACA;AAAA,YACE,yBAAyBH;AAAA,UAAA;AAAA,QAC3B;AAAA,QAGD,UAAA;AAAA,UAAAD,uBACE,UAAA,EAAO,WAAU,0BAChB,UAAA,gBAAAM,EAACC,GAAA,EAAW,OAAAP,GAAc,EAAA,CAC5B;AAAA,UAEDG;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,gBAAAG,EAAC,KAAA,EAAE,WAAU,wBAAwB,aAAO,QAAA,CAAQ;AAAA,EAAA,GACtD;AAEJ;"}

package/dist/components/inputs/LexicalInput.d.ts

@@ -17,3 +17,4 @@ export declare function useHtmlLexicalAdapter({ html, onChange, }: UseHtmlLexica
     setValue: (serializedState: SerializedEditorState) => void;
 };
 export {};
+//# sourceMappingURL=LexicalInput.d.ts.map

package/dist/components/inputs/LexicalInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LexicalInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/LexicalInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAChB,gBAAgB,EACjB,MAAM,8BAA8B,CAAC;AAWtC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AASlF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAGxD,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB;IAC1D,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,KAAK,EACL,QAAQ,EACR,SAAS,GACV,EAAE,iBAAiB,GAAG,KAAK,CAAC,SAAS,CAoBrC;AAID,UAAU,0BAA0B;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED,wBAAgB,qBAAqB,CAAC,EACpC,IAAI,EACJ,QAAQ,GACT,EAAE,0BAA0B;WAiEF,gBAAgB,CAAC,gBAAgB,CAAC;gCAjBvC,qBAAqB;EAkB1C"}

package/dist/components/inputs/MessageInput.d.ts

@@ -1,4 +1,4 @@
-import { TemplateVariable } from '../../types.ts';
+import { TemplateVariable } from '../../types';
 import { InputWrapperProps } from './InputWrapper';
 export interface MessageInputProps extends InputWrapperProps {
     value: string;
@@ -8,3 +8,4 @@ export interface MessageInputProps extends InputWrapperProps {
     onBlur: () => void;
 }
 export declare function MessageInput({ label, value, lang, error, variables, onChange, onBlur, className, }: MessageInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MessageInput.d.ts.map

package/dist/components/inputs/MessageInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/MessageInput.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAIhD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIxD,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAC9B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAKD,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,MAAM,EACN,SAAS,GACV,EAAE,iBAAiB,2CAkBnB"}

package/dist/components/inputs/MessageInput.js

@@ -22,7 +22,7 @@ function C({
     extensions: [d, c, u, I(m)],
     onUpdate: ({ editor: f }) => n(f.getText())
   });
-  return /* @__PURE__ */ r(h, { label: o, error: i, className: a, children: /* @__PURE__ */ r(
+  return /* @__PURE__ */ r(h, { className: a, error: i, label: o, children: /* @__PURE__ */ r(
     x,
     {
       className: "tiptap-editor min-h-8",

package/dist/components/inputs/MessageInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageInput.js","sources":["../../../src/components/inputs/MessageInput.tsx"],"sourcesContent":["import type { TemplateVariable } from \"@/types\";\nimport Document from \"@tiptap/extension-document\";\nimport Paragraph from \"@tiptap/extension-paragraph\";\nimport Text from \"@tiptap/extension-text\";\nimport { EditorContent, useEditor } from \"@tiptap/react\";\n\nimport { parseIcuToProseMirrorJSON } from \"@/utils/icu-tranform\";\n\nimport type { InputWrapperProps } from \"./InputWrapper\";\nimport { InputWrapper } from \"./InputWrapper\";\nimport { VariableMention } from \"./variables/extension\";\n\nexport interface MessageInputProps extends InputWrapperProps {\n  value: string;\n  lang: string;\n  variables: TemplateVariable[];\n  onChange: (value: string) => void;\n  onBlur: () => void;\n}\n\n// TODO add variable editor (style, options, etc)\n// TODO add tooltip to show all variables\n\nexport function MessageInput({\n  label,\n  value,\n  lang,\n  error,\n  variables,\n  onChange,\n  onBlur,\n  className,\n}: MessageInputProps) {\n  const editor = useEditor({\n    immediatelyRender: false,\n    content: parseIcuToProseMirrorJSON(value),\n    extensions: [Document, Paragraph, Text, VariableMention(variables)],\n    onUpdate: ({ editor }) => onChange(editor.getText()),\n  });\n\n  return (\n    <InputWrapper label={label} error={error} className={className}>\n      <EditorContent\n        className=\"tiptap-editor min-h-8\"\n        editor={editor}\n        lang={lang}\n        onBlur={onBlur}\n      />\n    </InputWrapper>\n  );\n}\n"],"names":["MessageInput","label","value","lang","error","variables","onChange","onBlur","className","editor","useEditor","parseIcuToProseMirrorJSON","Document","Paragraph","Text","VariableMention","jsx","InputWrapper","EditorContent"],"mappings":";;;;;;;;AAuBO,SAASA,EAAa;AAAA,EAC3B,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AACF,GAAsB;AACpB,QAAMC,IAASC,EAAU;AAAA,IACvB,mBAAmB;AAAA,IACnB,SAASC,EAA0BT,CAAK;AAAA,IACxC,YAAY,CAACU,GAAUC,GAAWC,GAAMC,EAAgBV,CAAS,CAAC;AAAA,IAClE,UAAU,CAAC,EAAE,QAAAI,QAAaH,EAASG,EAAO,QAAA,CAAS;AAAA,EAAA,CACpD;AAED,SACE,gBAAAO,EAACC,GAAA,EAAa,OAAAhB,GAAc,OAAAG,GAAc,WAAAI,GACxC,UAAA,gBAAAQ;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,QAAAT;AAAA,MACA,MAAAN;AAAA,MACA,QAAAI;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"MessageInput.js","sources":["../../../src/components/inputs/MessageInput.tsx"],"sourcesContent":["import Document from '@tiptap/extension-document';\nimport Paragraph from '@tiptap/extension-paragraph';\nimport Text from '@tiptap/extension-text';\nimport { EditorContent, useEditor } from '@tiptap/react';\nimport type { TemplateVariable } from '@/types';\n\nimport { parseIcuToProseMirrorJSON } from '@/utils/icu-tranform';\n\nimport type { InputWrapperProps } from './InputWrapper';\nimport { InputWrapper } from './InputWrapper';\nimport { VariableMention } from './variables/extension';\n\nexport interface MessageInputProps extends InputWrapperProps {\n  value: string;\n  lang: string;\n  variables: TemplateVariable[];\n  onChange: (value: string) => void;\n  onBlur: () => void;\n}\n\n// TODO add variable editor (style, options, etc)\n// TODO add tooltip to show all variables\n\nexport function MessageInput({\n  label,\n  value,\n  lang,\n  error,\n  variables,\n  onChange,\n  onBlur,\n  className,\n}: MessageInputProps) {\n  const editor = useEditor({\n    immediatelyRender: false,\n    content: parseIcuToProseMirrorJSON(value),\n    extensions: [Document, Paragraph, Text, VariableMention(variables)],\n    onUpdate: ({ editor }) => onChange(editor.getText()),\n  });\n\n  return (\n    <InputWrapper className={className} error={error} label={label}>\n      <EditorContent\n        className=\"tiptap-editor min-h-8\"\n        editor={editor}\n        lang={lang}\n        onBlur={onBlur}\n      />\n    </InputWrapper>\n  );\n}\n"],"names":["MessageInput","label","value","lang","error","variables","onChange","onBlur","className","editor","useEditor","parseIcuToProseMirrorJSON","Document","Paragraph","Text","VariableMention","jsx","InputWrapper","EditorContent"],"mappings":";;;;;;;;AAuBO,SAASA,EAAa;AAAA,EAC3B,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AACF,GAAsB;AACpB,QAAMC,IAASC,EAAU;AAAA,IACvB,mBAAmB;AAAA,IACnB,SAASC,EAA0BT,CAAK;AAAA,IACxC,YAAY,CAACU,GAAUC,GAAWC,GAAMC,EAAgBV,CAAS,CAAC;AAAA,IAClE,UAAU,CAAC,EAAE,QAAAI,QAAaH,EAASG,EAAO,QAAA,CAAS;AAAA,EAAA,CACpD;AAED,SACE,gBAAAO,EAACC,GAAA,EAAa,WAAAT,GAAsB,OAAAJ,GAAc,OAAAH,GAChD,UAAA,gBAAAe;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,QAAAT;AAAA,MACA,MAAAN;AAAA,MACA,QAAAI;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/inputs/variables/VariableChip.d.ts

@@ -1,2 +1,3 @@
 import { ReactNodeViewProps } from '@tiptap/react';
 export declare function VariableChip({ node, updateAttributes, }: ReactNodeViewProps<HTMLElement>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=VariableChip.d.ts.map

package/dist/components/inputs/variables/VariableChip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VariableChip.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/variables/VariableChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AA0BxD,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,gBAAgB,GACjB,EAAE,kBAAkB,CAAC,WAAW,CAAC,2CAiEjC"}

package/dist/components/inputs/variables/VariableChip.js

@@ -37,8 +37,8 @@ function S({
           }
         ),
         contentEditable: !1,
-        "data-variable": o.name,
         "data-icu": o.icu,
+        "data-variable": o.name,
         role: "button",
         tabIndex: 0,
         children: o.label
@@ -47,10 +47,10 @@ function S({
     /* @__PURE__ */ r(a.Portal, { children: /* @__PURE__ */ n(
       a.Content,
       {
+        align: "start",
+        className: "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 grid origin-(--radix-hover-card-content-transform-origin) overflow-clip rounded-md border border-border bg-elevation-50 shadow-md outline-hidden empty:hidden data-[state=closed]:animate-out data-[state=open]:animate-in",
         side: "bottom",
         sideOffset: 5,
-        align: "start",
-        className: "z-50 grid origin-(--radix-hover-card-content-transform-origin) overflow-clip rounded-md border border-border bg-elevation-50 shadow-md outline-hidden empty:hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         children: [
           u(e) && /* @__PURE__ */ r(E, { element: e, onUpdate: i }),
           w(e) && /* @__PURE__ */ r(h, { element: e, onUpdate: i }),

package/dist/components/inputs/variables/VariableChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"VariableChip.js","sources":["../../../../src/components/inputs/variables/VariableChip.tsx"],"sourcesContent":["import type { VariableMentionNodeAttrs } from \"@/types\";\nimport type { ReactNodeViewProps } from \"@tiptap/react\";\nimport { NodeViewWrapper } from \"@tiptap/react\";\nimport { Popover } from \"radix-ui\";\nimport { useMemo } from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport {\n  isArgumentElement,\n  isNumericElement,\n  isSelectElement,\n  isTagElement,\n  isTemporalElement,\n} from \"@/utils/guards\";\nimport { parseICUMessage } from \"@/utils/icu-tranform\";\n\nimport { SelectVariableEditor } from \"./editors/SelectVariableEditor\";\nimport { TagVariableEditor } from \"./editors/TagVariableEditor\";\nimport { NumericVariablePicker } from \"./pickers/NumericVariablePicker\";\nimport { TemporalElementEditor } from \"./pickers/TemporalElementEditor\";\nimport { VariableIcon } from \"./VariableIcon\";\n\nconst TEMPORAL_ELEMENTS_FLAG = false;\n\n// TODO replace popover with portal below input field\n\nexport function VariableChip({\n  node,\n  updateAttributes,\n}: ReactNodeViewProps<HTMLElement>) {\n  const attrs = node.attrs as VariableMentionNodeAttrs;\n  const handleUpdate = (value: string) =>\n    updateAttributes({\n      icu: value,\n    });\n\n  const element = useMemo(() => {\n    try {\n      const [part] = parseICUMessage(attrs.icu);\n      if (!part) throw new Error(\"No part found\");\n      return part;\n    } catch (error) {\n      console.error(error);\n      throw new Error(`Invalid ICU: ${attrs.icu}`, { cause: error });\n    }\n  }, [attrs.icu]);\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger asChild>\n        <NodeViewWrapper\n          as=\"span\"\n          className={cn(\n            \"inline-flex cursor-pointer items-center rounded-md bg-elevation-250 px-1 hover:bg-elevation-400\",\n            {\n              \"pointer-events-none\":\n                isArgumentElement(element) ||\n                (isTemporalElement(element) && !TEMPORAL_ELEMENTS_FLAG),\n            },\n          )}\n          contentEditable={false}\n          data-variable={attrs.name}\n          data-icu={attrs.icu}\n          role=\"button\"\n          tabIndex={0}\n        >\n          {/* <VariableIcon type={element.type} className=\"size-4\" /> */}\n          {attrs.label}\n        </NodeViewWrapper>\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Content\n          side=\"bottom\"\n          sideOffset={5}\n          align=\"start\"\n          className=\"z-50 grid origin-(--radix-hover-card-content-transform-origin) overflow-clip rounded-md border border-border bg-elevation-50 shadow-md outline-hidden empty:hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\"\n        >\n          {isNumericElement(element) && (\n            <NumericVariablePicker element={element} onUpdate={handleUpdate} />\n          )}\n          {isSelectElement(element) && (\n            <SelectVariableEditor element={element} onUpdate={handleUpdate} />\n          )}\n          {TEMPORAL_ELEMENTS_FLAG && isTemporalElement(element) && (\n            <TemporalElementEditor element={element} onUpdate={handleUpdate} />\n          )}\n\n          {isTagElement(element) && (\n            <TagVariableEditor element={element} onUpdate={handleUpdate} />\n          )}\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n}\n"],"names":["TEMPORAL_ELEMENTS_FLAG","VariableChip","node","updateAttributes","attrs","handleUpdate","value","element","useMemo","part","parseICUMessage","error","jsxs","Popover","jsx","NodeViewWrapper","cn","isArgumentElement","isTemporalElement","isNumericElement","NumericVariablePicker","isSelectElement","SelectVariableEditor","isTagElement","TagVariableEditor"],"mappings":";;;;;;;;;;;AAsBA,MAAMA,IAAyB;AAIxB,SAASC,EAAa;AAAA,EAC3B,MAAAC;AAAA,EACA,kBAAAC;AACF,GAAoC;AAClC,QAAMC,IAAQF,EAAK,OACbG,IAAe,CAACC,MACpBH,EAAiB;AAAA,IACf,KAAKG;AAAA,EAAA,CACN,GAEGC,IAAUC,EAAQ,MAAM;AAC5B,QAAI;AACF,YAAM,CAACC,CAAI,IAAIC,EAAgBN,EAAM,GAAG;AACxC,UAAI,CAACK,EAAM,OAAM,IAAI,MAAM,eAAe;AAC1C,aAAOA;AAAA,IACT,SAASE,GAAO;AACd,oBAAQ,MAAMA,CAAK,GACb,IAAI,MAAM,gBAAgBP,EAAM,GAAG,IAAI,EAAE,OAAOO,GAAO;AAAA,IAC/D;AAAA,EACF,GAAG,CAACP,EAAM,GAAG,CAAC;AAEd,SACE,gBAAAQ,EAACC,EAAQ,MAAR,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACD,EAAQ,SAAR,EAAgB,SAAO,IACtB,UAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,WAAWC;AAAA,UACT;AAAA,UACA;AAAA,YACE,uBACEC,EAAkBV,CAAO,KACxBW,EAAkBX,CAAO,KAAK,CAACP;AAAA,UAAA;AAAA,QACpC;AAAA,QAEF,iBAAiB;AAAA,QACjB,iBAAeI,EAAM;AAAA,QACrB,YAAUA,EAAM;AAAA,QAChB,MAAK;AAAA,QACL,UAAU;AAAA,QAGT,UAAAA,EAAM;AAAA,MAAA;AAAA,IAAA,GAEX;AAAA,IACA,gBAAAU,EAACD,EAAQ,QAAR,EACC,UAAA,gBAAAD;AAAA,MAACC,EAAQ;AAAA,MAAR;AAAA,QACC,MAAK;AAAA,QACL,YAAY;AAAA,QACZ,OAAM;AAAA,QACN,WAAU;AAAA,QAET,UAAA;AAAA,UAAAM,EAAiBZ,CAAO,KACvB,gBAAAO,EAACM,GAAA,EAAsB,SAAAb,GAAkB,UAAUF,GAAc;AAAA,UAElEgB,EAAgBd,CAAO,uBACrBe,GAAA,EAAqB,SAAAf,GAAkB,UAAUF,GAAc;AAAA,UAEjEL;AAAA,UAIAuB,EAAahB,CAAO,uBAClBiB,GAAA,EAAkB,SAAAjB,GAAkB,UAAUF,EAAA,CAAc;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,EAEjE,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"VariableChip.js","sources":["../../../../src/components/inputs/variables/VariableChip.tsx"],"sourcesContent":["import type { ReactNodeViewProps } from '@tiptap/react';\nimport { NodeViewWrapper } from '@tiptap/react';\nimport { Popover } from 'radix-ui';\nimport { useMemo } from 'react';\nimport type { VariableMentionNodeAttrs } from '@/types';\n\nimport { cn } from '@/utils/cn';\nimport {\n  isArgumentElement,\n  isNumericElement,\n  isSelectElement,\n  isTagElement,\n  isTemporalElement,\n} from '@/utils/guards';\nimport { parseICUMessage } from '@/utils/icu-tranform';\n\nimport { SelectVariableEditor } from './editors/SelectVariableEditor';\nimport { TagVariableEditor } from './editors/TagVariableEditor';\nimport { NumericVariablePicker } from './pickers/NumericVariablePicker';\nimport { TemporalElementEditor } from './pickers/TemporalElementEditor';\nimport { VariableIcon } from './VariableIcon';\n\nconst TEMPORAL_ELEMENTS_FLAG = false;\n\n// TODO replace popover with portal below input field\n\nexport function VariableChip({\n  node,\n  updateAttributes,\n}: ReactNodeViewProps<HTMLElement>) {\n  const attrs = node.attrs as VariableMentionNodeAttrs;\n  const handleUpdate = (value: string) =>\n    updateAttributes({\n      icu: value,\n    });\n\n  const element = useMemo(() => {\n    try {\n      const [part] = parseICUMessage(attrs.icu);\n      if (!part) throw new Error('No part found');\n      return part;\n    } catch (error) {\n      console.error(error);\n      throw new Error(`Invalid ICU: ${attrs.icu}`, { cause: error });\n    }\n  }, [attrs.icu]);\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger asChild>\n        <NodeViewWrapper\n          as=\"span\"\n          className={cn(\n            'inline-flex cursor-pointer items-center rounded-md bg-elevation-250 px-1 hover:bg-elevation-400',\n            {\n              'pointer-events-none':\n                isArgumentElement(element) ||\n                (isTemporalElement(element) && !TEMPORAL_ELEMENTS_FLAG),\n            },\n          )}\n          contentEditable={false}\n          data-icu={attrs.icu}\n          data-variable={attrs.name}\n          role=\"button\"\n          tabIndex={0}\n        >\n          {/* <VariableIcon type={element.type} className=\"size-4\" /> */}\n          {attrs.label}\n        </NodeViewWrapper>\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Content\n          align=\"start\"\n          className=\"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 grid origin-(--radix-hover-card-content-transform-origin) overflow-clip rounded-md border border-border bg-elevation-50 shadow-md outline-hidden empty:hidden data-[state=closed]:animate-out data-[state=open]:animate-in\"\n          side=\"bottom\"\n          sideOffset={5}\n        >\n          {isNumericElement(element) && (\n            <NumericVariablePicker element={element} onUpdate={handleUpdate} />\n          )}\n          {isSelectElement(element) && (\n            <SelectVariableEditor element={element} onUpdate={handleUpdate} />\n          )}\n          {TEMPORAL_ELEMENTS_FLAG && isTemporalElement(element) && (\n            <TemporalElementEditor element={element} onUpdate={handleUpdate} />\n          )}\n\n          {isTagElement(element) && (\n            <TagVariableEditor element={element} onUpdate={handleUpdate} />\n          )}\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n}\n"],"names":["TEMPORAL_ELEMENTS_FLAG","VariableChip","node","updateAttributes","attrs","handleUpdate","value","element","useMemo","part","parseICUMessage","error","jsxs","Popover","jsx","NodeViewWrapper","cn","isArgumentElement","isTemporalElement","isNumericElement","NumericVariablePicker","isSelectElement","SelectVariableEditor","isTagElement","TagVariableEditor"],"mappings":";;;;;;;;;;;AAsBA,MAAMA,IAAyB;AAIxB,SAASC,EAAa;AAAA,EAC3B,MAAAC;AAAA,EACA,kBAAAC;AACF,GAAoC;AAClC,QAAMC,IAAQF,EAAK,OACbG,IAAe,CAACC,MACpBH,EAAiB;AAAA,IACf,KAAKG;AAAA,EAAA,CACN,GAEGC,IAAUC,EAAQ,MAAM;AAC5B,QAAI;AACF,YAAM,CAACC,CAAI,IAAIC,EAAgBN,EAAM,GAAG;AACxC,UAAI,CAACK,EAAM,OAAM,IAAI,MAAM,eAAe;AAC1C,aAAOA;AAAA,IACT,SAASE,GAAO;AACd,oBAAQ,MAAMA,CAAK,GACb,IAAI,MAAM,gBAAgBP,EAAM,GAAG,IAAI,EAAE,OAAOO,GAAO;AAAA,IAC/D;AAAA,EACF,GAAG,CAACP,EAAM,GAAG,CAAC;AAEd,SACE,gBAAAQ,EAACC,EAAQ,MAAR,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACD,EAAQ,SAAR,EAAgB,SAAO,IACtB,UAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,WAAWC;AAAA,UACT;AAAA,UACA;AAAA,YACE,uBACEC,EAAkBV,CAAO,KACxBW,EAAkBX,CAAO,KAAK,CAACP;AAAA,UAAA;AAAA,QACpC;AAAA,QAEF,iBAAiB;AAAA,QACjB,YAAUI,EAAM;AAAA,QAChB,iBAAeA,EAAM;AAAA,QACrB,MAAK;AAAA,QACL,UAAU;AAAA,QAGT,UAAAA,EAAM;AAAA,MAAA;AAAA,IAAA,GAEX;AAAA,IACA,gBAAAU,EAACD,EAAQ,QAAR,EACC,UAAA,gBAAAD;AAAA,MAACC,EAAQ;AAAA,MAAR;AAAA,QACC,OAAM;AAAA,QACN,WAAU;AAAA,QACV,MAAK;AAAA,QACL,YAAY;AAAA,QAEX,UAAA;AAAA,UAAAM,EAAiBZ,CAAO,KACvB,gBAAAO,EAACM,GAAA,EAAsB,SAAAb,GAAkB,UAAUF,GAAc;AAAA,UAElEgB,EAAgBd,CAAO,uBACrBe,GAAA,EAAqB,SAAAf,GAAkB,UAAUF,GAAc;AAAA,UAEjEL;AAAA,UAIAuB,EAAahB,CAAO,uBAClBiB,GAAA,EAAkB,SAAAjB,GAAkB,UAAUF,EAAA,CAAc;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,EAEjE,CACF;AAAA,EAAA,GACF;AAEJ;"}