payload-intl 0.3.0 → 1.1.0

package/README.md

@@ -108,13 +108,13 @@ The `intlPlugin` accepts the following configuration:
 | `hooks`                 | -                        | Collection hooks with and additional `afterUpdate` hook |
 | `tabs`                  | -                        | Enable tabbed interface                                 |
 
-## 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
 
@@ -128,7 +128,7 @@ export default {
       "[Subtitle with user's name and message count] Welcome back, {firstName}! You have {count} new messages.",
   },
 } as const;
-```
+``` -->
 
 <!-- ### Rich Text Messages
 
@@ -165,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.js

@@ -20,14 +20,14 @@ function v({
       render: ({ field: r, fieldState: a }) => /* @__PURE__ */ o(
         i,
         {
-          label: t,
-          lang: s,
           className: l,
-          value: r.value || "",
-          variables: n,
           error: a.error,
+          label: t,
+          lang: s,
+          onBlur: r.onBlur,
           onChange: r.onChange,
-          onBlur: r.onBlur
+          value: r.value || "",
+          variables: n
         }
       ),
       rules: {

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 { 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","MessageInput"],"mappings":";;;;AAmBO,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,OAAAV;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.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.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/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/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.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;"}

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

@@ -21,15 +21,15 @@ function x({
   })), /* @__PURE__ */ a("div", { className: "flex flex-col overflow-clip rounded-md bg-elevation-100 empty:hidden", children: n.map((e, t) => /* @__PURE__ */ a(
     "button",
     {
-      type: "button",
       className: b(
-        "cursor-pointer rounded-none border-none bg-transparent px-3 py-1 text-lg text-nowrap",
+        "cursor-pointer text-nowrap rounded-none border-none bg-transparent px-3 py-1 text-lg",
         {
           "bg-elevation-800 text-elevation-0": t === r,
           "hover:bg-elevation-250": t !== r
         }
       ),
       onClick: () => l(t),
+      type: "button",
       children: e.label
     },
     t

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

@@ -1 +1 @@
-{"version":3,"file":"VariableSuggestion.js","sources":["../../../../src/components/inputs/variables/VariableSuggestion.tsx"],"sourcesContent":["import type { VariableMentionNodeAttrs } from \"@/types\";\nimport type {\n  SuggestionKeyDownProps,\n  SuggestionProps,\n} from \"@tiptap/suggestion\";\nimport { useEffect, useImperativeHandle, useState } from \"react\";\n\nimport { cn } from \"@/utils/cn\";\n\nexport interface VariableSuggestionProps extends SuggestionProps<\n  VariableMentionNodeAttrs,\n  VariableMentionNodeAttrs\n> {\n  ref: React.RefObject<{\n    onKeyDown: (props: SuggestionKeyDownProps) => boolean;\n  }>;\n}\n\nexport function VariableSuggestion({\n  items,\n  command,\n  ref,\n}: VariableSuggestionProps) {\n  const [selectedIndex, setSelectedIndex] = useState(0);\n\n  const selectItem = (index: number) => {\n    const item = items[index];\n\n    if (item) command(item);\n  };\n\n  const upHandler = () => {\n    setSelectedIndex((selectedIndex + items.length - 1) % items.length);\n  };\n\n  const downHandler = () => {\n    setSelectedIndex((selectedIndex + 1) % items.length);\n  };\n\n  const enterHandler = () => {\n    selectItem(selectedIndex);\n  };\n\n  useEffect(() => setSelectedIndex(0), [items]);\n\n  useImperativeHandle(ref, () => ({\n    onKeyDown: ({ event }) => {\n      if (event.key === \"ArrowUp\") {\n        upHandler();\n        return true;\n      }\n\n      if (event.key === \"ArrowDown\") {\n        downHandler();\n        return true;\n      }\n\n      if (event.key === \"Enter\") {\n        enterHandler();\n        return true;\n      }\n\n      return false;\n    },\n  }));\n\n  return (\n    <div className=\"flex flex-col overflow-clip rounded-md bg-elevation-100 empty:hidden\">\n      {items.map((item, index) => (\n        <button\n          key={index}\n          type=\"button\"\n          className={cn(\n            \"cursor-pointer rounded-none border-none bg-transparent px-3 py-1 text-lg text-nowrap\",\n            {\n              \"bg-elevation-800 text-elevation-0\": index === selectedIndex,\n              \"hover:bg-elevation-250\": index !== selectedIndex,\n            },\n          )}\n          onClick={() => selectItem(index)}\n        >\n          {item.label}\n        </button>\n      ))}\n    </div>\n  );\n}\n"],"names":["VariableSuggestion","items","command","ref","selectedIndex","setSelectedIndex","useState","selectItem","index","item","upHandler","downHandler","enterHandler","useEffect","useImperativeHandle","event","jsx","cn"],"mappings":";;;AAkBO,SAASA,EAAmB;AAAA,EACjC,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,KAAAC;AACF,GAA4B;AAC1B,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAS,CAAC,GAE9CC,IAAa,CAACC,MAAkB;AACpC,UAAMC,IAAOR,EAAMO,CAAK;AAExB,IAAIC,OAAcA,CAAI;AAAA,EACxB,GAEMC,IAAY,MAAM;AACtB,IAAAL,GAAkBD,IAAgBH,EAAM,SAAS,KAAKA,EAAM,MAAM;AAAA,EACpE,GAEMU,IAAc,MAAM;AACxB,IAAAN,GAAkBD,IAAgB,KAAKH,EAAM,MAAM;AAAA,EACrD,GAEMW,IAAe,MAAM;AACzB,IAAAL,EAAWH,CAAa;AAAA,EAC1B;AAEA,SAAAS,EAAU,MAAMR,EAAiB,CAAC,GAAG,CAACJ,CAAK,CAAC,GAE5Ca,EAAoBX,GAAK,OAAO;AAAA,IAC9B,WAAW,CAAC,EAAE,OAAAY,QACRA,EAAM,QAAQ,aAChBL,EAAA,GACO,MAGLK,EAAM,QAAQ,eAChBJ,EAAA,GACO,MAGLI,EAAM,QAAQ,WAChBH,EAAA,GACO,MAGF;AAAA,EACT,EACA,GAGA,gBAAAI,EAAC,SAAI,WAAU,wEACZ,YAAM,IAAI,CAACP,GAAMD,MAChB,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,MAAK;AAAA,MACL,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,UACE,qCAAqCT,MAAUJ;AAAA,UAC/C,0BAA0BI,MAAUJ;AAAA,QAAA;AAAA,MACtC;AAAA,MAEF,SAAS,MAAMG,EAAWC,CAAK;AAAA,MAE9B,UAAAC,EAAK;AAAA,IAAA;AAAA,IAXDD;AAAA,EAAA,CAaR,GACH;AAEJ;"}
+{"version":3,"file":"VariableSuggestion.js","sources":["../../../../src/components/inputs/variables/VariableSuggestion.tsx"],"sourcesContent":["import type {\n  SuggestionKeyDownProps,\n  SuggestionProps,\n} from '@tiptap/suggestion';\nimport { useEffect, useImperativeHandle, useState } from 'react';\nimport type { VariableMentionNodeAttrs } from '@/types';\n\nimport { cn } from '@/utils/cn';\n\nexport interface VariableSuggestionProps\n  extends SuggestionProps<VariableMentionNodeAttrs, VariableMentionNodeAttrs> {\n  ref: React.RefObject<{\n    onKeyDown: (props: SuggestionKeyDownProps) => boolean;\n  }>;\n}\n\nexport function VariableSuggestion({\n  items,\n  command,\n  ref,\n}: VariableSuggestionProps) {\n  const [selectedIndex, setSelectedIndex] = useState(0);\n\n  const selectItem = (index: number) => {\n    const item = items[index];\n\n    if (item) command(item);\n  };\n\n  const upHandler = () => {\n    setSelectedIndex((selectedIndex + items.length - 1) % items.length);\n  };\n\n  const downHandler = () => {\n    setSelectedIndex((selectedIndex + 1) % items.length);\n  };\n\n  const enterHandler = () => {\n    selectItem(selectedIndex);\n  };\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>\n  useEffect(() => setSelectedIndex(0), [items]);\n\n  useImperativeHandle(ref, () => ({\n    onKeyDown: ({ event }) => {\n      if (event.key === 'ArrowUp') {\n        upHandler();\n        return true;\n      }\n\n      if (event.key === 'ArrowDown') {\n        downHandler();\n        return true;\n      }\n\n      if (event.key === 'Enter') {\n        enterHandler();\n        return true;\n      }\n\n      return false;\n    },\n  }));\n\n  return (\n    <div className=\"flex flex-col overflow-clip rounded-md bg-elevation-100 empty:hidden\">\n      {items.map((item, index) => (\n        <button\n          className={cn(\n            'cursor-pointer text-nowrap rounded-none border-none bg-transparent px-3 py-1 text-lg',\n            {\n              'bg-elevation-800 text-elevation-0': index === selectedIndex,\n              'hover:bg-elevation-250': index !== selectedIndex,\n            },\n          )}\n          key={index}\n          onClick={() => selectItem(index)}\n          type=\"button\"\n        >\n          {item.label}\n        </button>\n      ))}\n    </div>\n  );\n}\n"],"names":["VariableSuggestion","items","command","ref","selectedIndex","setSelectedIndex","useState","selectItem","index","item","upHandler","downHandler","enterHandler","useEffect","useImperativeHandle","event","jsx","cn"],"mappings":";;;AAgBO,SAASA,EAAmB;AAAA,EACjC,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,KAAAC;AACF,GAA4B;AAC1B,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAS,CAAC,GAE9CC,IAAa,CAACC,MAAkB;AACpC,UAAMC,IAAOR,EAAMO,CAAK;AAExB,IAAIC,OAAcA,CAAI;AAAA,EACxB,GAEMC,IAAY,MAAM;AACtB,IAAAL,GAAkBD,IAAgBH,EAAM,SAAS,KAAKA,EAAM,MAAM;AAAA,EACpE,GAEMU,IAAc,MAAM;AACxB,IAAAN,GAAkBD,IAAgB,KAAKH,EAAM,MAAM;AAAA,EACrD,GAEMW,IAAe,MAAM;AACzB,IAAAL,EAAWH,CAAa;AAAA,EAC1B;AAGA,SAAAS,EAAU,MAAMR,EAAiB,CAAC,GAAG,CAACJ,CAAK,CAAC,GAE5Ca,EAAoBX,GAAK,OAAO;AAAA,IAC9B,WAAW,CAAC,EAAE,OAAAY,QACRA,EAAM,QAAQ,aAChBL,EAAA,GACO,MAGLK,EAAM,QAAQ,eAChBJ,EAAA,GACO,MAGLI,EAAM,QAAQ,WAChBH,EAAA,GACO,MAGF;AAAA,EACT,EACA,GAGA,gBAAAI,EAAC,SAAI,WAAU,wEACZ,YAAM,IAAI,CAACP,GAAMD,MAChB,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,UACE,qCAAqCT,MAAUJ;AAAA,UAC/C,0BAA0BI,MAAUJ;AAAA,QAAA;AAAA,MACtC;AAAA,MAGF,SAAS,MAAMG,EAAWC,CAAK;AAAA,MAC/B,MAAK;AAAA,MAEJ,UAAAC,EAAK;AAAA,IAAA;AAAA,IAJDD;AAAA,EAAA,CAMR,GACH;AAEJ;"}

package/dist/components/inputs/variables/editors/PluralVariableEditor.js

@@ -63,8 +63,8 @@ function A({
           "button",
           {
             className: "ml-auto flex cursor-pointer items-center justify-center border-none bg-transparent p-0 hover:text-error",
-            type: "button",
             onClick: () => a.remove(t),
+            type: "button",
             children: /* @__PURE__ */ r(v, { size: 16 })
           }
         )
@@ -74,8 +74,8 @@ function A({
         /* @__PURE__ */ r(
           "input",
           {
-            type: "text",
             className: "col-span-2 focus:outline-none",
+            type: "text",
             ...d("other", { required: !0 })
           }
         )
@@ -88,8 +88,8 @@ function A({
           "input",
           {
             className: "w-8 text-center",
-            type: "numeric",
             placeholder: "0",
+            type: "numeric",
             ...d("offset")
           }
         )
@@ -99,8 +99,8 @@ function A({
         /* @__PURE__ */ r(i.Portal, { children: /* @__PURE__ */ o(
           i.Content,
           {
+            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 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-y-auto overflow-x-hidden rounded-md border border-border bg-elevation-50 shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in",
             sideOffset: 4,
-            className: "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border bg-elevation-50 shadow-md 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: [
               /* @__PURE__ */ r("div", { className: "flex flex-col", children: z.filter(
                 (e) => a.fields.every((t) => t.name !== e)
@@ -125,42 +125,39 @@ function A({
                 },
                 e
               )) }),
-              /* @__PURE__ */ o("div", { className: "flex items-center justify-between gap-2 border-t border-border p-2", children: [
+              /* @__PURE__ */ o("div", { className: "flex items-center justify-between gap-2 border-border border-t p-2", children: [
                 /* @__PURE__ */ r("label", { htmlFor: "customValue", children: "custom" }),
                 /* @__PURE__ */ r(
                   F,
                   {
                     control: c,
                     name: "customValue",
-                    render: ({ field: e }) => (
-                      // eslint-disable-next-line jsx-a11y/control-has-associated-label
-                      /* @__PURE__ */ r(
-                        "input",
-                        {
-                          type: "numeric",
-                          className: "w-8 rounded-sm border-transparent text-center focus:border-border focus:outline-none",
-                          placeholder: "=0",
-                          min: 0,
-                          value: e.value ?? "",
-                          onChange: ({ currentTarget: { value: t } }) => {
-                            const n = Number(t);
-                            isNaN(n) || n < 0 || e.onChange(n);
-                          },
-                          onKeyDown: (t) => {
-                            t.key !== "Enter" || e.value === void 0 || a.fields.some(
-                              (s) => s.name === `=${e.value}`
-                            ) || (a.append(
-                              {
-                                name: `=${e.value}`,
-                                content: ""
-                              },
-                              {
-                                shouldFocus: !0
-                              }
-                            ), e.onChange(void 0));
-                          }
-                        }
-                      )
+                    render: ({ field: e }) => /* @__PURE__ */ r(
+                      "input",
+                      {
+                        className: "w-8 rounded-sm border-transparent text-center focus:border-border focus:outline-none",
+                        min: 0,
+                        onChange: ({ currentTarget: { value: t } }) => {
+                          const n = Number(t);
+                          isNaN(n) || n < 0 || e.onChange(n);
+                        },
+                        onKeyDown: (t) => {
+                          t.key !== "Enter" || e.value === void 0 || a.fields.some(
+                            (s) => s.name === `=${e.value}`
+                          ) || (a.append(
+                            {
+                              name: `=${e.value}`,
+                              content: ""
+                            },
+                            {
+                              shouldFocus: !0
+                            }
+                          ), e.onChange(void 0));
+                        },
+                        placeholder: "=0",
+                        type: "numeric",
+                        value: e.value ?? ""
+                      }
                     )
                   }
                 )