payload-intl 0.0.7 → 0.2.0

package/README.md

@@ -148,24 +148,6 @@ export default {
 
 Here's a complete example showing how to integrate payload-intl using next-intl and S3 storage:
 
-```typescript
-// i18n/messages.ts
-export const messages = {
-  UserProfile: {
-    title: "Hello {firstName}",
-    description:
-      "Welcome back, {firstName}! You have {count, plural, =0 {no messages} one {# message} other {# messages}}.",
-  },
-  Navigation: {
-    home: "Home",
-    about: "About",
-  },
-  richText: {
-    welcome: "$RICH$",
-  },
-} as const;
-```
-
 ```typescript
 // payload.config.ts
 import { s3Storage } from "@payloadcms/storage-s3";
@@ -183,7 +165,6 @@ export default buildConfig({
   plugins: [
     intlPlugin({
       schema: messages,
-      tabs: true,
       hooks: {
         afterUpdate: () => revalidateTag("messages"),
       },
@@ -191,7 +172,10 @@ export default buildConfig({
     s3Storage({
       collections: {
         messages: {
-          prefix: "messages",
+          prefix: "messages", // or anything else you want
+          // generate a publicly available URL to the file
+          generateFileURL: async ({ filename, prefix }) =>
+            `.../${prefix}/${filename}`,
         },
       },
     }),
@@ -199,21 +183,30 @@ export default buildConfig({
 });
 ```
 
-### 3. Set up next-intl type augmentation
+```typescript
+// i18n/messages.ts
+export const messages = {
+  UserProfile: {
+    title: "Hello {firstName}",
+    description:
+      "Welcome back, {firstName}! You have {count, plural, =0 {no messages} one {# message} other {# messages}}.",
+  },
+  // ...
+} as const;
+```
 
 ```typescript
 // i18n/global.ts
-import type { messages } from "./messages";
+import type messages from "./messages";
 
 declare module "next-intl" {
   interface AppConfig {
     Messages: typeof messages;
+    // ...
   }
 }
 ```
 
-### 4. Configure next-intl request handler
-
 ```typescript
 // i18n/request.ts
 import { getRequestConfig } from "next-intl/server";
@@ -230,10 +223,8 @@ export default getRequestConfig(async ({ locale }) => {
 });
 ```
 
-### 5. Create server-side message fetcher
-
 ```typescript
-// server/messages.ts
+// server.ts
 "use server";
 
 import config from "@payload-config";
@@ -243,8 +234,15 @@ import { fetchMessages } from "payload-intl";
 
 export const fetchCachedMessages = unstable_cache(
   async (locale: string) => {
+    // Node.js
     const payload = await getPayload({ config });
     return await fetchMessages(payload, locale);
+
+    // Edge runtime
+    const response = await fetch(
+      `${process.env.PAYLOAD_API_URL}/intl-plugin/en`,
+    );
+    return await response.json();
   },
   ["messages"],
   {

package/dist/components/MessageController.js

@@ -1,22 +1,22 @@
 import { jsx as o } from "react/jsx-runtime";
-import { Controller as m } from "react-hook-form";
+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";
-import { RichTextInput as C } from "./inputs/RichTextInput.js";
 function M({
-  type: a,
+  type: l,
   name: n,
-  variables: l,
+  variables: m,
   label: u,
   locale: t,
   validate: p,
   className: s
 }) {
-  const { control: g } = i();
-  return a === "rich" ? /* @__PURE__ */ o(
-    m,
+  const { control: a } = i();
+  return l === "rich" ? /* @__PURE__ */ o(
+    g,
     {
-      control: g,
+      control: a,
       name: n,
       render: ({ field: r, fieldState: e }) => /* @__PURE__ */ o(
         C,
@@ -35,9 +35,9 @@ function M({
       }
     }
   ) : /* @__PURE__ */ o(
-    m,
+    g,
     {
-      control: g,
+      control: a,
       name: n,
       render: ({ field: r, fieldState: e }) => /* @__PURE__ */ o(
         h,
@@ -46,7 +46,7 @@ function M({
           lang: t,
           className: s,
           value: r.value || "",
-          variables: l,
+          variables: m,
           error: e.error,
           onChange: r.onChange,
           onBlur: r.onBlur

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\";\nimport { RichTextInput } from \"./inputs/RichTextInput\";\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          <RichTextInput\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","RichTextInput","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 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;"}

package/dist/components/MessagesForm.d.ts

@@ -1,11 +1,10 @@
-import { DeepPartial, Locales, Messages, MessagesSchema, RichTextEditorOptions, Translations } from '../types.ts';
+import { DeepPartial, Locales, Messages, MessagesSchema, Translations } from '../types.ts';
 interface MessagesFormProps {
     locales: Locales;
     schema: MessagesSchema;
     tabs?: boolean;
     values: Translations<DeepPartial<Messages>>;
     endpointUrl: string;
-    richTextEditorOptions?: RichTextEditorOptions;
 }
-export declare function MessagesForm({ locales, schema, tabs, values, endpointUrl, richTextEditorOptions, }: MessagesFormProps): React.ReactNode;
+export declare function MessagesForm({ locales, schema, tabs, values, endpointUrl, }: MessagesFormProps): React.ReactNode;
 export {};

package/dist/components/MessagesForm.js

@@ -1,114 +1,105 @@
 "use client";
 import { jsx as s, jsxs as r } from "react/jsx-runtime";
-import { useStepNav as M, Button as j } from "@payloadcms/ui";
-import { isEqual as y } from "lodash-es";
-import { useEffect as T, useState as F } from "react";
-import { useForm as O } from "react-hook-form";
+import { useStepNav as x, Button as M } from "@payloadcms/ui";
+import { isEqual as j } from "lodash-es";
+import { useEffect as y, useState as T } from "react";
+import { useForm as F } from "react-hook-form";
 import { toast as h } from "sonner";
-import { MessagesFormProvider as w } from "../context/messages-form.js";
+import { MessagesFormProvider as O } from "../context/messages-form.js";
 import { cn as p } from "../utils/cn.js";
-import { JsonImport as C } from "./actions/JsonImport.js";
-import { MessageField as I } from "./layout/MessageField.js";
-import { MessagesTabs as E } from "./layout/MessagesTabs.js";
+import { JsonImport as w } from "./actions/JsonImport.js";
+import { MessageField as C } 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: o = !1,
   values: m,
-  endpointUrl: b,
-  richTextEditorOptions: v
+  endpointUrl: b
 }) {
-  const { setStepNav: c } = M();
-  T(() => {
+  const { setStepNav: c } = x();
+  y(() => {
     c([{ label: "Intl Messages", url: "/intl" }]);
   }, [c]);
-  const i = O({
+  const i = F({
     defaultValues: m,
     reValidateMode: "onChange"
-  }), [n, N] = F(Object.keys(a)[0]), S = async (e) => {
-    const t = h.loading("Saving..."), x = Object.entries(e).reduce((d, [l, f]) => y(f, m[l]) ? d : {
+  }), [n, v] = T(Object.keys(a)[0]), N = async (e) => {
+    const t = h.loading("Saving..."), S = Object.entries(e).reduce((d, [l, f]) => j(f, m[l]) ? d : {
       ...d,
       [l]: f
     }, {});
     await fetch(b, {
       method: "PUT",
-      body: JSON.stringify(x)
+      body: JSON.stringify(S)
     }), i.reset(e), h.success("Saved", { id: t });
   };
-  return /* @__PURE__ */ s(
-    w,
+  return /* @__PURE__ */ s(O, { form: i, locales: u, children: /* @__PURE__ */ r(
+    "form",
     {
-      form: i,
-      locales: u,
-      richTextEditorOptions: v,
-      children: /* @__PURE__ */ r(
-        "form",
-        {
-          className: "flex h-[calc(100vh-var(--app-header-height))] flex-col",
-          onSubmit: i.handleSubmit(S),
-          children: [
-            /* @__PURE__ */ r("div", { className: "sticky top-0 z-10 bg-background", children: [
-              /* @__PURE__ */ r("header", { className: "mb-6 flex items-center justify-between gap-4", children: [
-                /* @__PURE__ */ s("h1", { className: "text-4xl", children: "Messages" }),
-                /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ s(C, {}),
-                  /* @__PURE__ */ s(
-                    j,
-                    {
-                      className: "my-0",
-                      type: "submit",
-                      disabled: !i.formState.isDirty,
-                      children: "Save"
-                    }
-                  )
-                ] })
-              ] }),
-              o && /* @__PURE__ */ s(
-                E,
+      className: "flex h-[calc(100vh-var(--app-header-height))] flex-col",
+      onSubmit: i.handleSubmit(N),
+      children: [
+        /* @__PURE__ */ r("div", { className: "sticky top-0 z-10 bg-background", children: [
+          /* @__PURE__ */ r("header", { className: "mb-6 flex items-center justify-between gap-4", children: [
+            /* @__PURE__ */ s("h1", { className: "text-4xl", children: "Messages" }),
+            /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ s(w, {}),
+              /* @__PURE__ */ s(
+                M,
                 {
-                  schema: a,
-                  activeTab: n,
-                  setActiveTab: N
+                  className: "my-0",
+                  type: "submit",
+                  disabled: !i.formState.isDirty,
+                  children: "Save"
                 }
               )
-            ] }),
-            /* @__PURE__ */ r(
-              "div",
-              {
-                id: "messages-form-content",
-                className: "min-h-0 overflow-y-auto pt-8 pb-16",
-                children: [
-                  !o && /* @__PURE__ */ s(g, { path: "", schema: a, nestingLevel: 0 }),
-                  o && Object.entries(a).map(([e, t]) => typeof t == "string" ? /* @__PURE__ */ s(
-                    I,
-                    {
-                      schema: t,
-                      className: p({ hidden: n !== e }),
-                      messageKey: e,
-                      path: e
-                    },
-                    e
-                  ) : /* @__PURE__ */ s(
-                    g,
-                    {
-                      className: p({ hidden: n !== e }),
-                      path: e,
-                      schema: t,
-                      nestingLevel: 0
-                    },
-                    e
-                  ))
-                ]
-              }
-            )
-          ]
-        }
-      )
+            ] })
+          ] }),
+          o && /* @__PURE__ */ s(
+            I,
+            {
+              schema: a,
+              activeTab: n,
+              setActiveTab: v
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            id: "messages-form-content",
+            className: "min-h-0 overflow-y-auto pt-8 pb-16",
+            children: [
+              !o && /* @__PURE__ */ s(g, { path: "", schema: a, nestingLevel: 0 }),
+              o && Object.entries(a).map(([e, t]) => typeof t == "string" ? /* @__PURE__ */ s(
+                C,
+                {
+                  schema: t,
+                  className: p({ hidden: n !== e }),
+                  messageKey: e,
+                  path: e
+                },
+                e
+              ) : /* @__PURE__ */ s(
+                g,
+                {
+                  className: p({ hidden: n !== e }),
+                  path: e,
+                  schema: t,
+                  nestingLevel: 0
+                },
+                e
+              ))
+            ]
+          }
+        )
+      ]
     }
-  );
+  ) });
 }
 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  RichTextEditorOptions,\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\";\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  richTextEditorOptions?: RichTextEditorOptions;\n}\n\nexport function MessagesForm({\n  locales,\n  schema,\n  tabs = false,\n  values,\n  endpointUrl,\n  richTextEditorOptions,\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    await fetch(endpointUrl, {\n      method: \"PUT\",\n      body: JSON.stringify(changes),\n    });\n\n    form.reset(currentValues);\n    toast.success(\"Saved\", { id: toastId });\n  };\n\n  return (\n    <MessagesFormProvider\n      form={form}\n      locales={locales}\n      richTextEditorOptions={richTextEditorOptions}\n    >\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          {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","richTextEditorOptions","setStepNav","useStepNav","useEffect","form","useForm","activeTab","setActiveTab","useState","handleSubmit","currentValues","toastId","toast","changes","acc","locale","value","isEqual","jsx","MessagesFormProvider","jsxs","JsonImport","Button","MessagesTabs","MessagesTree","key","MessageField","cn"],"mappings":"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"}
+{"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\";\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    await fetch(endpointUrl, {\n      method: \"PUT\",\n      body: JSON.stringify(changes),\n    });\n\n    form.reset(currentValues);\n    toast.success(\"Saved\", { id: toastId });\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","jsx","MessagesFormProvider","jsxs","JsonImport","Button","MessagesTabs","MessagesTree","key","MessageField","cn"],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+import { InputWrapperProps } from './InputWrapper';
+export interface LexicalInputProps extends InputWrapperProps {
+    value: string;
+    lang: string;
+    onChange: (value: string) => void;
+    onBlur: () => void;
+}
+export declare function LexicalInput({ error, label, value, onChange, className, }: LexicalInputProps): React.ReactNode;

package/dist/components/inputs/LexicalInput.js

@@ -0,0 +1,60 @@
+import { jsx as a } from "react/jsx-runtime";
+import { $generateNodesFromDOM as d } from "@lexical/html";
+import { defaultEditorFeatures as m, defaultEditorConfig as c } from "@payloadcms/richtext-lexical";
+import { RenderLexical as p, sanitizeClientEditorConfig as u, getEnabledNodes as f } from "@payloadcms/richtext-lexical/client";
+import { convertLexicalToHTML as g } from "@payloadcms/richtext-lexical/html";
+import { $getRoot as E, $getSelection as x } from "@payloadcms/richtext-lexical/lexical";
+import { createHeadlessEditor as h } from "@payloadcms/richtext-lexical/lexical/headless";
+import { useMemo as S } from "react";
+import { InputWrapper as C } from "./InputWrapper.js";
+function J({
+  error: t,
+  label: r,
+  value: e,
+  onChange: s,
+  className: l
+}) {
+  const i = L(e);
+  return /* @__PURE__ */ a(C, { label: r, error: t, className: l, children: /* @__PURE__ */ a(
+    p,
+    {
+      field: {
+        name: "myCustomEditor",
+        label: !1,
+        type: "richText"
+      },
+      value: i,
+      setValue: (n) => {
+        const o = g({ data: n });
+        s(o);
+      },
+      schemaPath: "global.intl-plugin.editorTemplate"
+    }
+  ) });
+}
+const L = (t) => S(() => {
+  const r = u(
+    // @ts-expect-error - it works
+    m,
+    c
+  ), e = h({
+    nodes: f({
+      editorConfig: r
+    })
+  });
+  return e.update(
+    () => {
+      const i = new DOMParser().parseFromString(t || "...", "text/html"), n = d(e, i);
+      E().select();
+      const o = x();
+      if (o === null)
+        throw new Error("Selection is null");
+      o.insertNodes(n);
+    },
+    { discrete: !0 }
+  ), e.getEditorState().toJSON();
+}, [t]);
+export {
+  J as LexicalInput
+};
+//# sourceMappingURL=LexicalInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LexicalInput.js","sources":["../../../src/components/inputs/LexicalInput.tsx"],"sourcesContent":["import type {\n  DefaultNodeTypes,\n  TypedEditorState,\n} from \"@payloadcms/richtext-lexical\";\nimport { $generateNodesFromDOM } from \"@lexical/html\";\nimport {\n  defaultEditorConfig,\n  defaultEditorFeatures,\n} from \"@payloadcms/richtext-lexical\";\nimport {\n  getEnabledNodes,\n  RenderLexical,\n  sanitizeClientEditorConfig,\n} from \"@payloadcms/richtext-lexical/client\";\nimport { convertLexicalToHTML } from \"@payloadcms/richtext-lexical/html\";\nimport { $getRoot, $getSelection } from \"@payloadcms/richtext-lexical/lexical\";\nimport { createHeadlessEditor } from \"@payloadcms/richtext-lexical/lexical/headless\";\nimport { useMemo } from \"react\";\n\nimport type { InputWrapperProps } from \"./InputWrapper\";\nimport { InputWrapper } from \"./InputWrapper\";\n\nexport interface LexicalInputProps extends InputWrapperProps {\n  value: string;\n  lang: string;\n  onChange: (value: string) => void;\n  onBlur: () => void;\n}\n\nexport function LexicalInput({\n  error,\n  label,\n  value,\n  onChange,\n  className,\n}: LexicalInputProps): React.ReactNode {\n  const editorValue = useConvertHTMLToLexical(value);\n\n  return (\n    <InputWrapper label={label} error={error} className={className}>\n      <RenderLexical\n        field={{\n          name: \"myCustomEditor\",\n          label: false,\n          type: \"richText\",\n        }}\n        value={editorValue}\n        setValue={(data) => {\n          // @ts-expect-error - data is not typed\n          const html = convertLexicalToHTML({ data });\n          onChange(html);\n        }}\n        schemaPath=\"global.intl-plugin.editorTemplate\"\n      />\n    </InputWrapper>\n  );\n}\n\nconst useConvertHTMLToLexical = (html: string) =>\n  useMemo(() => {\n    const editorConfig = sanitizeClientEditorConfig(\n      // @ts-expect-error - it works\n      defaultEditorFeatures,\n      defaultEditorConfig,\n    );\n    const headlessEditor = createHeadlessEditor({\n      nodes: getEnabledNodes({\n        editorConfig,\n      }),\n    });\n\n    headlessEditor.update(\n      () => {\n        const parser = new DOMParser();\n        const doc = parser.parseFromString(html || '...', \"text/html\");\n\n        const nodes = $generateNodesFromDOM(headlessEditor, doc);\n\n        $getRoot().select();\n\n        const selection = $getSelection();\n        if (selection === null) {\n          throw new Error(\"Selection is null\");\n        }\n        selection.insertNodes(nodes);\n      },\n      { discrete: true },\n    );\n\n    const editorJSON = headlessEditor.getEditorState().toJSON();\n\n    return editorJSON as TypedEditorState<DefaultNodeTypes>;\n  }, [html]);\n"],"names":["LexicalInput","error","label","value","onChange","className","editorValue","useConvertHTMLToLexical","jsx","InputWrapper","RenderLexical","data","html","convertLexicalToHTML","useMemo","editorConfig","sanitizeClientEditorConfig","defaultEditorFeatures","defaultEditorConfig","headlessEditor","createHeadlessEditor","getEnabledNodes","doc","nodes","$generateNodesFromDOM","$getRoot","selection","$getSelection"],"mappings":";;;;;;;;;AA6BO,SAASA,EAAa;AAAA,EAC3B,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAAuC;AACrC,QAAMC,IAAcC,EAAwBJ,CAAK;AAEjD,SACE,gBAAAK,EAACC,GAAA,EAAa,OAAAP,GAAc,OAAAD,GAAc,WAAAI,GACxC,UAAA,gBAAAG;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,MAAM;AAAA,QACN,OAAO;AAAA,QACP,MAAM;AAAA,MAAA;AAAA,MAER,OAAOJ;AAAA,MACP,UAAU,CAACK,MAAS;AAElB,cAAMC,IAAOC,EAAqB,EAAE,MAAAF,GAAM;AAC1C,QAAAP,EAASQ,CAAI;AAAA,MACf;AAAA,MACA,YAAW;AAAA,IAAA;AAAA,EAAA,GAEf;AAEJ;AAEA,MAAML,IAA0B,CAACK,MAC/BE,EAAQ,MAAM;AACZ,QAAMC,IAAeC;AAAA;AAAA,IAEnBC;AAAA,IACAC;AAAA,EAAA,GAEIC,IAAiBC,EAAqB;AAAA,IAC1C,OAAOC,EAAgB;AAAA,MACrB,cAAAN;AAAA,IAAA,CACD;AAAA,EAAA,CACF;AAED,SAAAI,EAAe;AAAA,IACb,MAAM;AAEJ,YAAMG,IADS,IAAI,UAAA,EACA,gBAAgBV,KAAQ,OAAO,WAAW,GAEvDW,IAAQC,EAAsBL,GAAgBG,CAAG;AAEvD,MAAAG,EAAA,EAAW,OAAA;AAEX,YAAMC,IAAYC,EAAA;AAClB,UAAID,MAAc;AAChB,cAAM,IAAI,MAAM,mBAAmB;AAErC,MAAAA,EAAU,YAAYH,CAAK;AAAA,IAC7B;AAAA,IACA,EAAE,UAAU,GAAA;AAAA,EAAK,GAGAJ,EAAe,eAAA,EAAiB,OAAA;AAGrD,GAAG,CAACP,CAAI,CAAC;"}

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

@@ -1 +1 @@
-{"version":3,"file":"PluralVariableEditor.js","sources":["../../../../../src/components/inputs/variables/editors/PluralVariableEditor.tsx"],"sourcesContent":["import { TYPE } from \"@formatjs/icu-messageformat-parser\";\nimport { IconX } from \"@tabler/icons-react\";\nimport { Popover } from \"radix-ui\";\nimport { Fragment, useImperativeHandle, useMemo } from \"react\";\nimport { Controller, useFieldArray, useForm } from \"react-hook-form\";\n\nimport type { PluralElement } from \"@/types\";\nimport { cn } from \"@/utils/cn\";\nimport { parseICUMessage, serializeICUMessage } from \"@/utils/icu-tranform\";\n\nconst NAMED_PLURAL_OPTIONS = [\"zero\", \"one\", \"two\", \"few\", \"many\"] as const;\n\nexport interface PluralVariableEditorProps {\n  variableName: string;\n  element: PluralElement | undefined;\n  ref: React.Ref<{ getValue: () => string }>;\n}\n\n// TODO add support for selectordinal (\"pluralType\": \"ordinal\")\n\nexport function PluralVariableEditor({\n  variableName,\n  element,\n  ref,\n}: PluralVariableEditorProps) {\n  const config = useMemo<{\n    offset: number;\n    options: { name: string; content: string }[];\n    other: string;\n  }>(() => {\n    const { other, ...options } = element?.options ?? {};\n    return {\n      offset: element?.offset ?? 0,\n      options: Object.entries(options).map(([name, option]) => ({\n        name,\n        content: serializeICUMessage(option.value),\n      })),\n      other: serializeICUMessage(other ? other.value : []),\n    };\n  }, [element]);\n\n  const { control, register, getValues } = useForm<{\n    offset: number;\n    options: { name: string; content: string }[];\n    other: string;\n    customValue?: number;\n  }>({\n    defaultValues: config,\n  });\n\n  useImperativeHandle(ref, () => ({\n    getValue: () => {\n      const values = getValues();\n      const updatedElement: PluralElement = {\n        type: TYPE.plural,\n        value: variableName,\n        offset: values.offset,\n        pluralType: element?.pluralType ?? \"cardinal\",\n        options: Object.fromEntries(\n          values.options.map(({ name, content }) => [\n            name,\n            { value: parseICUMessage(content) },\n          ]),\n        ),\n      };\n      return serializeICUMessage([updatedElement]);\n    },\n  }));\n\n  const options = useFieldArray({\n    control,\n    name: \"options\",\n  });\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <fieldset className=\"mx-0 grid grid-cols-[3rem_8rem_1.5rem] gap-y-2 rounded-md border border-border px-2 pr-0\">\n        <legend>Options</legend>\n        {options.fields.map((field, index) => (\n          <Fragment key={field.id}>\n            <label htmlFor={`options.${index}`}>{field.name}</label>\n            {/* // TODO add support for variable mentions */}\n            <input\n              className=\"focus:outline-none\"\n              type=\"text\"\n              {...register(`options.${index}.content`, { required: true })}\n            />\n            <button\n              className=\"ml-auto flex cursor-pointer items-center justify-center border-none bg-transparent p-0 hover:text-error\"\n              type=\"button\"\n              onClick={() => options.remove(index)}\n            >\n              <IconX size={16} />\n            </button>\n          </Fragment>\n        ))}\n\n        <>\n          <label htmlFor=\"other\">other</label>\n          {/* // TODO add support for variable mentions */}\n          <input\n            type=\"text\"\n            className=\"col-span-2 focus:outline-none\"\n            {...register(\"other\", { required: true })}\n          />\n        </>\n      </fieldset>\n      <div className=\"grid grid-cols-2 items-center gap-2\">\n        <label className=\"flex items-center gap-3 pl-2\">\n          offset\n          <input\n            className=\"w-8 text-center\"\n            type=\"numeric\"\n            placeholder=\"0\"\n            {...register(\"offset\")}\n          />\n        </label>\n        <Popover.Root>\n          <Popover.Trigger>Add Option</Popover.Trigger>\n          <Popover.Portal>\n            <Popover.Content\n              sideOffset={4}\n              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\"\n            >\n              <div className=\"flex flex-col\">\n                {NAMED_PLURAL_OPTIONS.filter((option) =>\n                  options.fields.every((field) => field.name !== option),\n                ).map((option) => (\n                  <Popover.Close\n                    key={option}\n                    className={cn(\n                      \"cursor-pointer border-none bg-transparent px-1 hover:bg-elevation-250\",\n                    )}\n                    onClick={() => {\n                      // TODO ensure the fields are always in the same order as staticPluralOptions\n                      options.append(\n                        {\n                          name: option,\n                          content: \"\",\n                        },\n                        {\n                          shouldFocus: true,\n                        },\n                      );\n                    }}\n                  >\n                    {option}\n                  </Popover.Close>\n                ))}\n              </div>\n\n              <div className=\"flex items-center justify-between gap-2 border-t border-border p-2\">\n                <label htmlFor=\"customValue\">custom</label>\n                <Controller\n                  control={control}\n                  name=\"customValue\"\n                  render={({ field }) => (\n                    // eslint-disable-next-line jsx-a11y/control-has-associated-label\n                    <input\n                      type=\"numeric\"\n                      className=\"w-8 rounded-sm border-transparent text-center focus:border-border focus:outline-none\"\n                      placeholder=\"=0\"\n                      min={0}\n                      value={field.value ?? \"\"}\n                      onChange={({ currentTarget: { value } }) => {\n                        const number = Number(value);\n                        if (isNaN(number)) return;\n                        if (number < 0) return;\n                        field.onChange(number);\n                      }}\n                      onKeyDown={(e) => {\n                        if (e.key !== \"Enter\") return;\n                        if (field.value === undefined) return;\n                        const isUnique = !options.fields.some(\n                          (existingField) =>\n                            existingField.name === `=${field.value}`,\n                        );\n                        if (!isUnique) return; // TODO maybe show error?\n                        options.append(\n                          {\n                            name: `=${field.value}`,\n                            content: \"\",\n                          },\n                          {\n                            shouldFocus: true,\n                          },\n                        );\n                        field.onChange(undefined);\n                      }}\n                    />\n                  )}\n                />\n              </div>\n            </Popover.Content>\n          </Popover.Portal>\n        </Popover.Root>\n      </div>\n    </div>\n  );\n}\n"],"names":["NAMED_PLURAL_OPTIONS","PluralVariableEditor","variableName","element","ref","config","useMemo","other","options","name","option","serializeICUMessage","control","register","getValues","useForm","useImperativeHandle","values","updatedElement","TYPE","content","parseICUMessage","useFieldArray","jsxs","jsx","field","index","Fragment","IconX","Popover","cn","Controller","value","number","e","existingField"],"mappings":"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"}
+{"version":3,"file":"PluralVariableEditor.js","sources":["../../../../../src/components/inputs/variables/editors/PluralVariableEditor.tsx"],"sourcesContent":["import type { PluralElement } from \"@/types\";\nimport { TYPE } from \"@formatjs/icu-messageformat-parser\";\nimport { IconX } from \"@tabler/icons-react\";\nimport { Popover } from \"radix-ui\";\nimport { Fragment, useImperativeHandle, useMemo } from \"react\";\nimport { Controller, useFieldArray, useForm } from \"react-hook-form\";\n\nimport { cn } from \"@/utils/cn\";\nimport { parseICUMessage, serializeICUMessage } from \"@/utils/icu-tranform\";\n\nconst NAMED_PLURAL_OPTIONS = [\"zero\", \"one\", \"two\", \"few\", \"many\"] as const;\n\nexport interface PluralVariableEditorProps {\n  variableName: string;\n  element: PluralElement | undefined;\n  ref: React.Ref<{ getValue: () => string }>;\n}\n\n// TODO add support for selectordinal (\"pluralType\": \"ordinal\")\n\nexport function PluralVariableEditor({\n  variableName,\n  element,\n  ref,\n}: PluralVariableEditorProps) {\n  const config = useMemo<{\n    offset: number;\n    options: { name: string; content: string }[];\n    other: string;\n  }>(() => {\n    const { other, ...options } = element?.options ?? {};\n    return {\n      offset: element?.offset ?? 0,\n      options: Object.entries(options).map(([name, option]) => ({\n        name,\n        content: serializeICUMessage(option.value),\n      })),\n      other: serializeICUMessage(other ? other.value : []),\n    };\n  }, [element]);\n\n  const { control, register, getValues } = useForm<{\n    offset: number;\n    options: { name: string; content: string }[];\n    other: string;\n    customValue?: number;\n  }>({\n    defaultValues: config,\n  });\n\n  useImperativeHandle(ref, () => ({\n    getValue: () => {\n      const values = getValues();\n      const updatedElement: PluralElement = {\n        type: TYPE.plural,\n        value: variableName,\n        offset: values.offset,\n        pluralType: element?.pluralType ?? \"cardinal\",\n        options: Object.fromEntries(\n          values.options.map(({ name, content }) => [\n            name,\n            { value: parseICUMessage(content) },\n          ]),\n        ),\n      };\n      return serializeICUMessage([updatedElement]);\n    },\n  }));\n\n  const options = useFieldArray({\n    control,\n    name: \"options\",\n  });\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <fieldset className=\"mx-0 grid grid-cols-[3rem_8rem_1.5rem] gap-y-2 rounded-md border border-border px-2 pr-0\">\n        <legend>Options</legend>\n        {options.fields.map((field, index) => (\n          <Fragment key={field.id}>\n            <label htmlFor={`options.${index}`}>{field.name}</label>\n            {/* // TODO add support for variable mentions */}\n            <input\n              className=\"focus:outline-none\"\n              type=\"text\"\n              {...register(`options.${index}.content`, { required: true })}\n            />\n            <button\n              className=\"ml-auto flex cursor-pointer items-center justify-center border-none bg-transparent p-0 hover:text-error\"\n              type=\"button\"\n              onClick={() => options.remove(index)}\n            >\n              <IconX size={16} />\n            </button>\n          </Fragment>\n        ))}\n\n        <>\n          <label htmlFor=\"other\">other</label>\n          {/* // TODO add support for variable mentions */}\n          <input\n            type=\"text\"\n            className=\"col-span-2 focus:outline-none\"\n            {...register(\"other\", { required: true })}\n          />\n        </>\n      </fieldset>\n      <div className=\"grid grid-cols-2 items-center gap-2\">\n        <label className=\"flex items-center gap-3 pl-2\">\n          offset\n          <input\n            className=\"w-8 text-center\"\n            type=\"numeric\"\n            placeholder=\"0\"\n            {...register(\"offset\")}\n          />\n        </label>\n        <Popover.Root>\n          <Popover.Trigger>Add Option</Popover.Trigger>\n          <Popover.Portal>\n            <Popover.Content\n              sideOffset={4}\n              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\"\n            >\n              <div className=\"flex flex-col\">\n                {NAMED_PLURAL_OPTIONS.filter((option) =>\n                  options.fields.every((field) => field.name !== option),\n                ).map((option) => (\n                  <Popover.Close\n                    key={option}\n                    className={cn(\n                      \"cursor-pointer border-none bg-transparent px-1 hover:bg-elevation-250\",\n                    )}\n                    onClick={() => {\n                      // TODO ensure the fields are always in the same order as staticPluralOptions\n                      options.append(\n                        {\n                          name: option,\n                          content: \"\",\n                        },\n                        {\n                          shouldFocus: true,\n                        },\n                      );\n                    }}\n                  >\n                    {option}\n                  </Popover.Close>\n                ))}\n              </div>\n\n              <div className=\"flex items-center justify-between gap-2 border-t border-border p-2\">\n                <label htmlFor=\"customValue\">custom</label>\n                <Controller\n                  control={control}\n                  name=\"customValue\"\n                  render={({ field }) => (\n                    // eslint-disable-next-line jsx-a11y/control-has-associated-label\n                    <input\n                      type=\"numeric\"\n                      className=\"w-8 rounded-sm border-transparent text-center focus:border-border focus:outline-none\"\n                      placeholder=\"=0\"\n                      min={0}\n                      value={field.value ?? \"\"}\n                      onChange={({ currentTarget: { value } }) => {\n                        const number = Number(value);\n                        if (isNaN(number)) return;\n                        if (number < 0) return;\n                        field.onChange(number);\n                      }}\n                      onKeyDown={(e) => {\n                        if (e.key !== \"Enter\") return;\n                        if (field.value === undefined) return;\n                        const isUnique = !options.fields.some(\n                          (existingField) =>\n                            existingField.name === `=${field.value}`,\n                        );\n                        if (!isUnique) return; // TODO maybe show error?\n                        options.append(\n                          {\n                            name: `=${field.value}`,\n                            content: \"\",\n                          },\n                          {\n                            shouldFocus: true,\n                          },\n                        );\n                        field.onChange(undefined);\n                      }}\n                    />\n                  )}\n                />\n              </div>\n            </Popover.Content>\n          </Popover.Portal>\n        </Popover.Root>\n      </div>\n    </div>\n  );\n}\n"],"names":["NAMED_PLURAL_OPTIONS","PluralVariableEditor","variableName","element","ref","config","useMemo","other","options","name","option","serializeICUMessage","control","register","getValues","useForm","useImperativeHandle","values","updatedElement","TYPE","content","parseICUMessage","useFieldArray","jsxs","jsx","field","index","Fragment","IconX","Popover","cn","Controller","value","number","e","existingField"],"mappings":"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"}

package/dist/components/inputs/variables/editors/SelectVariableEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectVariableEditor.js","sources":["../../../../../src/components/inputs/variables/editors/SelectVariableEditor.tsx"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport { useFieldArray, useForm } from \"react-hook-form\";\n\nimport type { SelectElement } from \"@/types\";\nimport { parseICUMessage, serializeICUMessage } from \"@/utils/icu-tranform\";\n\nexport interface SelectVariableEditorProps {\n  element: SelectElement;\n  onUpdate: (value: string) => void;\n}\n\nexport function SelectVariableEditor({\n  element,\n  onUpdate,\n}: SelectVariableEditorProps) {\n  const options = useMemo<{ name: string; content: string }[]>(\n    () =>\n      Object.entries(element.options).map(([name, option]) => ({\n        name,\n        content: serializeICUMessage(option.value),\n      })),\n    [element],\n  );\n\n  const { control, register, getValues } = useForm<{\n    options: { name: string; content: string }[];\n  }>({\n    defaultValues: { options },\n  });\n  const { fields } = useFieldArray({\n    control,\n    name: \"options\",\n  });\n\n  useEffect(() => {\n    return () => {\n      const values = getValues();\n      const updatedElement: SelectElement = {\n        ...element,\n        options: Object.fromEntries(\n          values.options.map(({ name, content }) => [\n            name,\n            { value: parseICUMessage(content) },\n          ]),\n        ),\n      };\n      onUpdate(serializeICUMessage([updatedElement]));\n    };\n  }, []);\n\n  return (\n    <div className=\"flex flex-col gap-2 p-3\">\n      {fields.map((field, index) => (\n        <div key={field.name} className=\"flex flex-col gap-1\">\n          <label className=\"text-sm font-medium\">{field.name}</label>\n          {/* // TODO add support for variable mentions */}\n          <input\n            className=\"focus:outline-none\"\n            {...register(`options.${index}.content`)}\n          />\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"names":["SelectVariableEditor","element","onUpdate","options","useMemo","name","option","serializeICUMessage","control","register","getValues","useForm","fields","useFieldArray","useEffect","values","updatedElement","content","parseICUMessage","jsx","field","index","jsxs"],"mappings":";;;;AAWO,SAASA,EAAqB;AAAA,EACnC,SAAAC;AAAA,EACA,UAAAC;AACF,GAA8B;AAC5B,QAAMC,IAAUC;AAAA,IACd,MACE,OAAO,QAAQH,EAAQ,OAAO,EAAE,IAAI,CAAC,CAACI,GAAMC,CAAM,OAAO;AAAA,MACvD,MAAAD;AAAA,MACA,SAASE,EAAoBD,EAAO,KAAK;AAAA,IAAA,EACzC;AAAA,IACJ,CAACL,CAAO;AAAA,EAAA,GAGJ,EAAE,SAAAO,GAAS,UAAAC,GAAU,WAAAC,EAAA,IAAcC,EAEtC;AAAA,IACD,eAAe,EAAE,SAAAR,EAAA;AAAA,EAAQ,CAC1B,GACK,EAAE,QAAAS,EAAA,IAAWC,EAAc;AAAA,IAC/B,SAAAL;AAAA,IACA,MAAM;AAAA,EAAA,CACP;AAED,SAAAM,EAAU,MACD,MAAM;AACX,UAAMC,IAASL,EAAA,GACTM,IAAgC;AAAA,MACpC,GAAGf;AAAA,MACH,SAAS,OAAO;AAAA,QACdc,EAAO,QAAQ,IAAI,CAAC,EAAE,MAAAV,GAAM,SAAAY,QAAc;AAAA,UACxCZ;AAAA,UACA,EAAE,OAAOa,EAAgBD,CAAO,EAAA;AAAA,QAAE,CACnC;AAAA,MAAA;AAAA,IACH;AAEF,IAAAf,EAASK,EAAoB,CAACS,CAAc,CAAC,CAAC;AAAA,EAChD,GACC,CAAA,CAAE,GAGH,gBAAAG,EAAC,OAAA,EAAI,WAAU,2BACZ,UAAAP,EAAO,IAAI,CAACQ,GAAOC,MAClB,gBAAAC,EAAC,OAAA,EAAqB,WAAU,uBAC9B,UAAA;AAAA,IAAA,gBAAAH,EAAC,SAAA,EAAM,WAAU,uBAAuB,UAAAC,EAAM,MAAK;AAAA,IAEnD,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACT,GAAGV,EAAS,WAAWY,CAAK,UAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACzC,EAAA,GANQD,EAAM,IAOhB,CACD,GACH;AAEJ;"}
+{"version":3,"file":"SelectVariableEditor.js","sources":["../../../../../src/components/inputs/variables/editors/SelectVariableEditor.tsx"],"sourcesContent":["import type { SelectElement } from \"@/types\";\nimport { useEffect, useMemo } from \"react\";\nimport { useFieldArray, useForm } from \"react-hook-form\";\n\nimport { parseICUMessage, serializeICUMessage } from \"@/utils/icu-tranform\";\n\nexport interface SelectVariableEditorProps {\n  element: SelectElement;\n  onUpdate: (value: string) => void;\n}\n\nexport function SelectVariableEditor({\n  element,\n  onUpdate,\n}: SelectVariableEditorProps) {\n  const options = useMemo<{ name: string; content: string }[]>(\n    () =>\n      Object.entries(element.options).map(([name, option]) => ({\n        name,\n        content: serializeICUMessage(option.value),\n      })),\n    [element],\n  );\n\n  const { control, register, getValues } = useForm<{\n    options: { name: string; content: string }[];\n  }>({\n    defaultValues: { options },\n  });\n  const { fields } = useFieldArray({\n    control,\n    name: \"options\",\n  });\n\n  useEffect(() => {\n    return () => {\n      const values = getValues();\n      const updatedElement: SelectElement = {\n        ...element,\n        options: Object.fromEntries(\n          values.options.map(({ name, content }) => [\n            name,\n            { value: parseICUMessage(content) },\n          ]),\n        ),\n      };\n      onUpdate(serializeICUMessage([updatedElement]));\n    };\n  }, []);\n\n  return (\n    <div className=\"flex flex-col gap-2 p-3\">\n      {fields.map((field, index) => (\n        <div key={field.name} className=\"flex flex-col gap-1\">\n          <label className=\"text-sm font-medium\">{field.name}</label>\n          {/* // TODO add support for variable mentions */}\n          <input\n            className=\"focus:outline-none\"\n            {...register(`options.${index}.content`)}\n          />\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"names":["SelectVariableEditor","element","onUpdate","options","useMemo","name","option","serializeICUMessage","control","register","getValues","useForm","fields","useFieldArray","useEffect","values","updatedElement","content","parseICUMessage","jsx","field","index","jsxs"],"mappings":";;;;AAWO,SAASA,EAAqB;AAAA,EACnC,SAAAC;AAAA,EACA,UAAAC;AACF,GAA8B;AAC5B,QAAMC,IAAUC;AAAA,IACd,MACE,OAAO,QAAQH,EAAQ,OAAO,EAAE,IAAI,CAAC,CAACI,GAAMC,CAAM,OAAO;AAAA,MACvD,MAAAD;AAAA,MACA,SAASE,EAAoBD,EAAO,KAAK;AAAA,IAAA,EACzC;AAAA,IACJ,CAACL,CAAO;AAAA,EAAA,GAGJ,EAAE,SAAAO,GAAS,UAAAC,GAAU,WAAAC,EAAA,IAAcC,EAEtC;AAAA,IACD,eAAe,EAAE,SAAAR,EAAA;AAAA,EAAQ,CAC1B,GACK,EAAE,QAAAS,EAAA,IAAWC,EAAc;AAAA,IAC/B,SAAAL;AAAA,IACA,MAAM;AAAA,EAAA,CACP;AAED,SAAAM,EAAU,MACD,MAAM;AACX,UAAMC,IAASL,EAAA,GACTM,IAAgC;AAAA,MACpC,GAAGf;AAAA,MACH,SAAS,OAAO;AAAA,QACdc,EAAO,QAAQ,IAAI,CAAC,EAAE,MAAAV,GAAM,SAAAY,QAAc;AAAA,UACxCZ;AAAA,UACA,EAAE,OAAOa,EAAgBD,CAAO,EAAA;AAAA,QAAE,CACnC;AAAA,MAAA;AAAA,IACH;AAEF,IAAAf,EAASK,EAAoB,CAACS,CAAc,CAAC,CAAC;AAAA,EAChD,GACC,CAAA,CAAE,GAGH,gBAAAG,EAAC,OAAA,EAAI,WAAU,2BACZ,UAAAP,EAAO,IAAI,CAACQ,GAAOC,MAClB,gBAAAC,EAAC,OAAA,EAAqB,WAAU,uBAC9B,UAAA;AAAA,IAAA,gBAAAH,EAAC,SAAA,EAAM,WAAU,uBAAuB,UAAAC,EAAM,MAAK;AAAA,IAEnD,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACT,GAAGV,EAAS,WAAWY,CAAK,UAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACzC,EAAA,GANQD,EAAM,IAOhB,CACD,GACH;AAEJ;"}

package/dist/components/inputs/variables/editors/TagVariableEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagVariableEditor.js","sources":["../../../../../src/components/inputs/variables/editors/TagVariableEditor.tsx"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport { useForm } from \"react-hook-form\";\n\nimport type { TagElement } from \"@/types\";\nimport { parseICUMessage, serializeICUMessage } from \"@/utils/icu-tranform\";\n\nexport interface TagVariableEditorProps {\n  element: TagElement;\n  onUpdate: (value: string) => void;\n}\n\nexport function TagVariableEditor({\n  element,\n  onUpdate,\n}: TagVariableEditorProps) {\n  const content = useMemo<string>(\n    () => serializeICUMessage(element.children),\n    [element],\n  );\n\n  const { register, getValues } = useForm<{ content: string }>({\n    defaultValues: { content },\n  });\n\n  useEffect(() => {\n    return () => {\n      const { content } = getValues();\n      // TODO find better solution for this\n      const updatedElement: TagElement = {\n        ...element,\n        children: parseICUMessage(content),\n      };\n      onUpdate(serializeICUMessage([updatedElement]));\n    };\n  }, []);\n\n  // TODO add support for variable mentions\n  return (\n    <textarea\n      className=\"p-3 focus:outline-none\"\n      {...register(\"content\")}\n      rows={1}\n    />\n  );\n}\n"],"names":["TagVariableEditor","element","onUpdate","content","useMemo","serializeICUMessage","register","getValues","useForm","useEffect","updatedElement","parseICUMessage","jsx"],"mappings":";;;;AAWO,SAASA,EAAkB;AAAA,EAChC,SAAAC;AAAA,EACA,UAAAC;AACF,GAA2B;AACzB,QAAMC,IAAUC;AAAA,IACd,MAAMC,EAAoBJ,EAAQ,QAAQ;AAAA,IAC1C,CAACA,CAAO;AAAA,EAAA,GAGJ,EAAE,UAAAK,GAAU,WAAAC,EAAA,IAAcC,EAA6B;AAAA,IAC3D,eAAe,EAAE,SAAAL,EAAA;AAAA,EAAQ,CAC1B;AAED,SAAAM,EAAU,MACD,MAAM;AACX,UAAM,EAAE,SAAAN,EAAAA,IAAYI,EAAA,GAEdG,IAA6B;AAAA,MACjC,GAAGT;AAAA,MACH,UAAUU,EAAgBR,CAAO;AAAA,IAAA;AAEnC,IAAAD,EAASG,EAAoB,CAACK,CAAc,CAAC,CAAC;AAAA,EAChD,GACC,CAAA,CAAE,GAIH,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACT,GAAGN,EAAS,SAAS;AAAA,MACtB,MAAM;AAAA,IAAA;AAAA,EAAA;AAGZ;"}
+{"version":3,"file":"TagVariableEditor.js","sources":["../../../../../src/components/inputs/variables/editors/TagVariableEditor.tsx"],"sourcesContent":["import type { TagElement } from \"@/types\";\nimport { useEffect, useMemo } from \"react\";\nimport { useForm } from \"react-hook-form\";\n\nimport { parseICUMessage, serializeICUMessage } from \"@/utils/icu-tranform\";\n\nexport interface TagVariableEditorProps {\n  element: TagElement;\n  onUpdate: (value: string) => void;\n}\n\nexport function TagVariableEditor({\n  element,\n  onUpdate,\n}: TagVariableEditorProps) {\n  const content = useMemo<string>(\n    () => serializeICUMessage(element.children),\n    [element],\n  );\n\n  const { register, getValues } = useForm<{ content: string }>({\n    defaultValues: { content },\n  });\n\n  useEffect(() => {\n    return () => {\n      const { content } = getValues();\n      // TODO find better solution for this\n      const updatedElement: TagElement = {\n        ...element,\n        children: parseICUMessage(content),\n      };\n      onUpdate(serializeICUMessage([updatedElement]));\n    };\n  }, []);\n\n  // TODO add support for variable mentions\n  return (\n    <textarea\n      className=\"p-3 focus:outline-none\"\n      {...register(\"content\")}\n      rows={1}\n    />\n  );\n}\n"],"names":["TagVariableEditor","element","onUpdate","content","useMemo","serializeICUMessage","register","getValues","useForm","useEffect","updatedElement","parseICUMessage","jsx"],"mappings":";;;;AAWO,SAASA,EAAkB;AAAA,EAChC,SAAAC;AAAA,EACA,UAAAC;AACF,GAA2B;AACzB,QAAMC,IAAUC;AAAA,IACd,MAAMC,EAAoBJ,EAAQ,QAAQ;AAAA,IAC1C,CAACA,CAAO;AAAA,EAAA,GAGJ,EAAE,UAAAK,GAAU,WAAAC,EAAA,IAAcC,EAA6B;AAAA,IAC3D,eAAe,EAAE,SAAAL,EAAA;AAAA,EAAQ,CAC1B;AAED,SAAAM,EAAU,MACD,MAAM;AACX,UAAM,EAAE,SAAAN,EAAAA,IAAYI,EAAA,GAEdG,IAA6B;AAAA,MACjC,GAAGT;AAAA,MACH,UAAUU,EAAgBR,CAAO;AAAA,IAAA;AAEnC,IAAAD,EAASG,EAAoB,CAACK,CAAc,CAAC,CAAC;AAAA,EAChD,GACC,CAAA,CAAE,GAIH,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACT,GAAGN,EAAS,SAAS;AAAA,MACtB,MAAM;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

package/dist/components/inputs/variables/pickers/NumericVariablePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumericVariablePicker.js","sources":["../../../../../src/components/inputs/variables/pickers/NumericVariablePicker.tsx"],"sourcesContent":["import { ToggleGroup } from \"radix-ui\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { NumberElement, PluralElement } from \"@/types\";\nimport { isNumberElement, isPluralElement } from \"@/utils/guards\";\n\nimport { PluralVariableEditor } from \"../editors/PluralVariableEditor\";\n\nconst NUMERIC_TYPES = [\n  \"number\",\n  \"plural\",\n  // \"selectordinal\"\n] as const;\n\ntype NumericType = (typeof NUMERIC_TYPES)[number];\n\nexport interface NumericVariablePickerProps {\n  element: NumberElement | PluralElement;\n  onUpdate: (value: string) => void;\n}\n\nexport function NumericVariablePicker({\n  element,\n  onUpdate,\n}: NumericVariablePickerProps) {\n  const [type, setType] = useState<NumericType | undefined>(() => {\n    if (isNumberElement(element)) return \"number\";\n    if (isPluralElement(element)) return \"plural\";\n    return undefined;\n  });\n  const getValueRef = useRef<{ getValue: () => string }>(null);\n\n  useEffect(() => {\n    return () => {\n      if (!getValueRef.current) return;\n      onUpdate(getValueRef.current.getValue());\n    };\n  }, []);\n\n  return (\n    <div className=\"\">\n      <ToggleGroup.Root\n        type=\"single\"\n        className=\"flex bg-elevation-100\"\n        onValueChange={(value) => setType(value as NumericType)}\n        value={type}\n      >\n        {NUMERIC_TYPES.map((type) => (\n          <ToggleGroup.Item\n            key={type}\n            value={type}\n            className=\"flex-1 border-none data-[state=off]:cursor-pointer data-[state=off]:opacity-50 data-[state=off]:hover:opacity-100 data-[state=on]:bg-elevation-800 data-[state=on]:text-elevation-0\"\n          >\n            {type}\n          </ToggleGroup.Item>\n        ))}\n      </ToggleGroup.Root>\n\n      <div className=\"p-3\">\n        {type === \"plural\" && (\n          <PluralVariableEditor\n            variableName={element.value}\n            element={isPluralElement(element) ? element : undefined}\n            ref={getValueRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["NUMERIC_TYPES","NumericVariablePicker","element","onUpdate","type","setType","useState","isNumberElement","isPluralElement","getValueRef","useRef","useEffect","jsxs","jsx","ToggleGroup","value","PluralVariableEditor"],"mappings":";;;;;AAQA,MAAMA,IAAgB;AAAA,EACpB;AAAA,EACA;AAAA;AAEF;AASO,SAASC,EAAsB;AAAA,EACpC,SAAAC;AAAA,EACA,UAAAC;AACF,GAA+B;AAC7B,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAkC,MAAM;AAC9D,QAAIC,EAAgBL,CAAO,EAAG,QAAO;AACrC,QAAIM,EAAgBN,CAAO,EAAG,QAAO;AAAA,EAEvC,CAAC,GACKO,IAAcC,EAAmC,IAAI;AAE3D,SAAAC,EAAU,MACD,MAAM;AACX,IAAKF,EAAY,WACjBN,EAASM,EAAY,QAAQ,UAAU;AAAA,EACzC,GACC,CAAA,CAAE,GAGH,gBAAAG,EAAC,OAAA,EAAI,WAAU,IACb,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC,EAAY;AAAA,MAAZ;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,eAAe,CAACC,MAAUV,EAAQU,CAAoB;AAAA,QACtD,OAAOX;AAAA,QAEN,UAAAJ,EAAc,IAAI,CAACI,MAClB,gBAAAS;AAAA,UAACC,EAAY;AAAA,UAAZ;AAAA,YAEC,OAAOV;AAAAA,YACP,WAAU;AAAA,YAET,UAAAA;AAAAA,UAAA;AAAA,UAJIA;AAAAA,QAAA,CAMR;AAAA,MAAA;AAAA,IAAA;AAAA,IAGH,gBAAAS,EAAC,OAAA,EAAI,WAAU,OACZ,gBAAS,YACR,gBAAAA;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,cAAcd,EAAQ;AAAA,QACtB,SAASM,EAAgBN,CAAO,IAAIA,IAAU;AAAA,QAC9C,KAAKO;AAAA,MAAA;AAAA,IAAA,EACP,CAEJ;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"NumericVariablePicker.js","sources":["../../../../../src/components/inputs/variables/pickers/NumericVariablePicker.tsx"],"sourcesContent":["import type { NumberElement, PluralElement } from \"@/types\";\nimport { ToggleGroup } from \"radix-ui\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { isNumberElement, isPluralElement } from \"@/utils/guards\";\n\nimport { PluralVariableEditor } from \"../editors/PluralVariableEditor\";\n\nconst NUMERIC_TYPES = [\n  \"number\",\n  \"plural\",\n  // \"selectordinal\"\n] as const;\n\ntype NumericType = (typeof NUMERIC_TYPES)[number];\n\nexport interface NumericVariablePickerProps {\n  element: NumberElement | PluralElement;\n  onUpdate: (value: string) => void;\n}\n\nexport function NumericVariablePicker({\n  element,\n  onUpdate,\n}: NumericVariablePickerProps) {\n  const [type, setType] = useState<NumericType | undefined>(() => {\n    if (isNumberElement(element)) return \"number\";\n    if (isPluralElement(element)) return \"plural\";\n    return undefined;\n  });\n  const getValueRef = useRef<{ getValue: () => string }>(null);\n\n  useEffect(() => {\n    return () => {\n      if (!getValueRef.current) return;\n      onUpdate(getValueRef.current.getValue());\n    };\n  }, []);\n\n  return (\n    <div className=\"\">\n      <ToggleGroup.Root\n        type=\"single\"\n        className=\"flex bg-elevation-100\"\n        onValueChange={(value) => setType(value as NumericType)}\n        value={type}\n      >\n        {NUMERIC_TYPES.map((type) => (\n          <ToggleGroup.Item\n            key={type}\n            value={type}\n            className=\"flex-1 border-none data-[state=off]:cursor-pointer data-[state=off]:opacity-50 data-[state=off]:hover:opacity-100 data-[state=on]:bg-elevation-800 data-[state=on]:text-elevation-0\"\n          >\n            {type}\n          </ToggleGroup.Item>\n        ))}\n      </ToggleGroup.Root>\n\n      <div className=\"p-3\">\n        {type === \"plural\" && (\n          <PluralVariableEditor\n            variableName={element.value}\n            element={isPluralElement(element) ? element : undefined}\n            ref={getValueRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["NUMERIC_TYPES","NumericVariablePicker","element","onUpdate","type","setType","useState","isNumberElement","isPluralElement","getValueRef","useRef","useEffect","jsxs","jsx","ToggleGroup","value","PluralVariableEditor"],"mappings":";;;;;AAQA,MAAMA,IAAgB;AAAA,EACpB;AAAA,EACA;AAAA;AAEF;AASO,SAASC,EAAsB;AAAA,EACpC,SAAAC;AAAA,EACA,UAAAC;AACF,GAA+B;AAC7B,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAkC,MAAM;AAC9D,QAAIC,EAAgBL,CAAO,EAAG,QAAO;AACrC,QAAIM,EAAgBN,CAAO,EAAG,QAAO;AAAA,EAEvC,CAAC,GACKO,IAAcC,EAAmC,IAAI;AAE3D,SAAAC,EAAU,MACD,MAAM;AACX,IAAKF,EAAY,WACjBN,EAASM,EAAY,QAAQ,UAAU;AAAA,EACzC,GACC,CAAA,CAAE,GAGH,gBAAAG,EAAC,OAAA,EAAI,WAAU,IACb,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC,EAAY;AAAA,MAAZ;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,eAAe,CAACC,MAAUV,EAAQU,CAAoB;AAAA,QACtD,OAAOX;AAAA,QAEN,UAAAJ,EAAc,IAAI,CAACI,MAClB,gBAAAS;AAAA,UAACC,EAAY;AAAA,UAAZ;AAAA,YAEC,OAAOV;AAAAA,YACP,WAAU;AAAA,YAET,UAAAA;AAAAA,UAAA;AAAA,UAJIA;AAAAA,QAAA,CAMR;AAAA,MAAA;AAAA,IAAA;AAAA,IAGH,gBAAAS,EAAC,OAAA,EAAI,WAAU,OACZ,gBAAS,YACR,gBAAAA;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,cAAcd,EAAQ;AAAA,QACtB,SAASM,EAAgBN,CAAO,IAAIA,IAAU;AAAA,QAC9C,KAAKO;AAAA,MAAA;AAAA,IAAA,EACP,CAEJ;AAAA,EAAA,GACF;AAEJ;"}