payload-intl 1.3.2 → 1.4.0

package/README.md

@@ -54,6 +54,25 @@ export default buildConfig({
 });
 ```
 
+#### Scoped messages on globals
+
+Colocate translations with the globals they belong to by adding `scopes`:
+
+```ts
+intlPlugin({
+  schema: {
+    navigation: { home: "Home", about: "About" },
+    common: { greeting: "Hello {name}!" },
+  },
+  scopes: ["navigation"],
+  // or with position control:
+  // scopes: { navigation: 'sidebar' }
+  // scopes: { navigation: { position: 'tab', existingFieldsTabLabel: 'Nav Fields' } }
+});
+```
+
+The `navigation` key will be edited on the `navigation` global (in a Messages tab by default), while `common` stays in the `/intl` view.
+
 Fetch messages in your application:
 
 ```ts
@@ -67,13 +86,14 @@ const messages = await fetchMessages(payload, "en");
 | Option           | Type                                                   | Default                      | Description                                                                                                                                             |
 | ---------------- | ------------------------------------------------------ | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `schema`         | `MessagesSchema`                                       | —                            | Required. Nested object defining message keys and ICU templates. Leaf values are ICU MessageFormat strings, optionally prefixed with a `[description]`. |
-| `collectionSlug` | `string`                                               | `'messages'`                 | Slug of the collection used to store translation files.                                                                                                 |
+| `storage`        | `'db' \| 'upload'`                                     | `'db'`                       | `'db'` stores translations as JSON in the database. `'upload'` stores them as uploaded `.json` files for CDN/static hosting.                            |
+| `scopes`         | `MessagesScopesConfig`                                 | —                            | Colocate translation editing with Payload globals. Maps top-level schema keys to globals, adding a Messages tab or sidebar. Accepts an array of slugs or a record with position config. |
+| `tabs`           | `boolean`                                              | `false`                      | When enabled, top-level schema keys are rendered as tabs in the admin UI.                                                                               |
+| `collectionSlug` | `string`                                               | `'messages'`                 | Slug of the collection used to store translation documents.                                                                                             |
 | `editorAccess`   | `(req: PayloadRequest) => boolean \| Promise<boolean>` | `(req) => req.user !== null` | Access control function that determines who can edit messages.                                                                                          |
 | `hooks`          | `MessagesHooks`                                        | `{}`                         | Collection hooks. Extends Payload's collection hooks with an additional `afterUpdate` callback fired when translations are saved.                       |
-| `storage`        | `'db' \| 'upload'`                                     | `'db'`                       | `'db'` stores translations as JSON in the database. `'upload'` stores them as uploaded `.json` files for CDN/static hosting.                            |
 
 > **Note:** Switching between storage strategies on an existing deployment is not yet supported automatically. When the database schema changes (e.g. dropping upload columns), the migration data is lost before the app can read it. A safe migration path will be provided in a future release. For now, export your translations before switching strategies.
-| `tabs`           | `boolean`                                              | `false`                      | When enabled, top-level keys in the schema are rendered as tabs in the admin UI.                                                                        |
 
 ## Contributing
 

package/dist/components/MessagesField.d.ts

@@ -0,0 +1,12 @@
+import type { JSONFieldClientProps } from 'payload';
+import type { MessagesSchema } from '../types';
+export interface MessagesFieldProps {
+    readonly schema: MessagesSchema;
+    readonly hiddenGroups?: string[];
+}
+/**
+ * Payload JSON field client component that bridges the virtual `_intlMessages`
+ * field with the existing MessagesFormProvider / MessagesTree component tree.
+ */
+export declare function MessagesField({ schema, hiddenGroups, path, }: JSONFieldClientProps & MessagesFieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MessagesField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessagesField.d.ts","sourceRoot":"","sources":["../../src/components/MessagesField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAGpD,OAAO,KAAK,EAAY,cAAc,EAAE,MAAM,SAAS,CAAC;AAGxD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,MAAM,EAAE,cAAc,CAAC;IAChC,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CAClC;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,YAAY,EACZ,IAAI,GACL,EAAE,oBAAoB,GAAG,kBAAkB,2CAwB3C"}

package/dist/components/MessagesField.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useField } from '@payloadcms/ui';
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { MessagesTree } from './layout/MessagesTree';
+/**
+ * Payload JSON field client component that bridges the virtual `_intlMessages`
+ * field with the existing MessagesFormProvider / MessagesTree component tree.
+ */ export function MessagesField({ schema, hiddenGroups, path }) {
+    const { value, setValue } = useField({
+        path
+    });
+    const form = useForm({
+        values: value,
+        reValidateMode: 'onBlur'
+    });
+    // When form values change, push back to Payload's field
+    useEffect(()=>{
+        const subscription = form.watch((formValues)=>{
+            setValue(formValues);
+        });
+        return ()=>subscription.unsubscribe();
+    }, [
+        form,
+        setValue
+    ]);
+    return /*#__PURE__*/ _jsx(MessagesTree, {
+        control: form.control,
+        hiddenGroups: hiddenGroups,
+        path: "",
+        schema: schema
+    });
+}
+
+//# sourceMappingURL=MessagesField.js.map

package/dist/components/MessagesField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/MessagesField.tsx"],"sourcesContent":["'use client';\n\nimport { useField } from '@payloadcms/ui';\nimport type { JSONFieldClientProps } from 'payload';\nimport { useEffect } from 'react';\nimport { useForm } from 'react-hook-form';\nimport type { Messages, MessagesSchema } from '@/types';\nimport { MessagesTree } from './layout/MessagesTree';\n\nexport interface MessagesFieldProps {\n  readonly schema: MessagesSchema;\n  readonly hiddenGroups?: string[];\n}\n\n/**\n * Payload JSON field client component that bridges the virtual `_intlMessages`\n * field with the existing MessagesFormProvider / MessagesTree component tree.\n */\nexport function MessagesField({\n  schema,\n  hiddenGroups,\n  path,\n}: JSONFieldClientProps & MessagesFieldProps) {\n  const { value, setValue } = useField<Messages>({ path });\n\n  const form = useForm<Messages>({\n    values: value,\n    reValidateMode: 'onBlur',\n  });\n\n  // When form values change, push back to Payload's field\n  useEffect(() => {\n    const subscription = form.watch((formValues) => {\n      setValue(formValues);\n    });\n    return () => subscription.unsubscribe();\n  }, [form, setValue]);\n\n  return (\n    <MessagesTree\n      control={form.control}\n      hiddenGroups={hiddenGroups}\n      path=\"\"\n      schema={schema}\n    />\n  );\n}\n"],"names":["useField","useEffect","useForm","MessagesTree","MessagesField","schema","hiddenGroups","path","value","setValue","form","values","reValidateMode","subscription","watch","formValues","unsubscribe","control"],"mappings":"AAAA;;AAEA,SAASA,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,SAAS,QAAQ,QAAQ;AAClC,SAASC,OAAO,QAAQ,kBAAkB;AAE1C,SAASC,YAAY,QAAQ,wBAAwB;AAOrD;;;CAGC,GACD,OAAO,SAASC,cAAc,EAC5BC,MAAM,EACNC,YAAY,EACZC,IAAI,EACsC;IAC1C,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGT,SAAmB;QAAEO;IAAK;IAEtD,MAAMG,OAAOR,QAAkB;QAC7BS,QAAQH;QACRI,gBAAgB;IAClB;IAEA,wDAAwD;IACxDX,UAAU;QACR,MAAMY,eAAeH,KAAKI,KAAK,CAAC,CAACC;YAC/BN,SAASM;QACX;QACA,OAAO,IAAMF,aAAaG,WAAW;IACvC,GAAG;QAACN;QAAMD;KAAS;IAEnB,qBACE,KAACN;QACCc,SAASP,KAAKO,OAAO;QACrBX,cAAcA;QACdC,MAAK;QACLF,QAAQA;;AAGd"}

package/dist/components/MessagesImport.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessagesImport.d.ts","sourceRoot":"","sources":["../../src/components/MessagesImport.tsx"],"names":[],"mappings":"AAOA,wBAAgB,cAAc,4CAiE7B"}

package/dist/components/MessagesImport.js

@@ -0,0 +1,68 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Popup, useField } from '@payloadcms/ui';
+import { useRef } from 'react';
+import styles from './MessagesImport.module.css';
+export function MessagesImport() {
+    const { setValue } = useField({
+        path: 'data'
+    });
+    const inputRef = useRef(null);
+    const handleImportFromFile = (event)=>{
+        const file = event.target.files?.[0];
+        if (!file) {
+            event.target.value = '';
+            return;
+        }
+        const reader = new FileReader();
+        reader.onload = (readerEvent)=>{
+            const text = readerEvent.target?.result;
+            const data = JSON.parse(text);
+            setValue(data);
+            // Clear the input value to allow re-selection of the same or different file
+            event.target.value = '';
+        };
+        reader.readAsText(file);
+    };
+    const handleImportFromURL = ()=>{
+        const url = prompt('Enter the URL of the JSON file to import:');
+        if (!url) return;
+        // TODO Validate URL
+        fetch(url).then((response)=>response.json()).then(setValue).catch((error)=>console.error('Error importing JSON:', error));
+    };
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("input", {
+                accept: ".json",
+                hidden: true,
+                onChange: handleImportFromFile,
+                ref: inputRef,
+                type: "file"
+            }),
+            /*#__PURE__*/ _jsx(Popup, {
+                button: "Import",
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: styles.popup,
+                    children: [
+                        /*#__PURE__*/ _jsx(Button, {
+                            buttonStyle: "subtle",
+                            className: styles.action,
+                            iconPosition: "left",
+                            onClick: ()=>inputRef.current?.click(),
+                            children: "Import from File"
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            buttonStyle: "subtle",
+                            className: styles.action,
+                            iconPosition: "left",
+                            onClick: handleImportFromURL,
+                            children: "Import from URL"
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=MessagesImport.js.map

package/dist/components/MessagesImport.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/MessagesImport.tsx"],"sourcesContent":["'use client';\n\nimport { Button, Popup, useField } from '@payloadcms/ui';\nimport { useRef } from 'react';\n\nimport styles from './MessagesImport.module.css';\n\nexport function MessagesImport() {\n  const { setValue } = useField({ path: 'data' });\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleImportFromFile = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const file = event.target.files?.[0];\n    if (!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      setValue(data);\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  const handleImportFromURL = () => {\n    const url = prompt('Enter the URL of the JSON file to import:');\n    if (!url) return;\n\n    // TODO Validate URL\n\n    fetch(url)\n      .then((response) => response.json())\n      .then(setValue)\n      .catch((error) => console.error('Error importing JSON:', error));\n  };\n\n  return (\n    <>\n      <input\n        accept=\".json\"\n        hidden\n        onChange={handleImportFromFile}\n        ref={inputRef}\n        type=\"file\"\n      />\n      <Popup button=\"Import\">\n        <div className={styles.popup}>\n          <Button\n            buttonStyle=\"subtle\"\n            className={styles.action}\n            iconPosition=\"left\"\n            onClick={() => inputRef.current?.click()}\n          >\n            Import from File\n          </Button>\n          <Button\n            buttonStyle=\"subtle\"\n            className={styles.action}\n            iconPosition=\"left\"\n            onClick={handleImportFromURL}\n          >\n            Import from URL\n          </Button>\n        </div>\n      </Popup>\n    </>\n  );\n}\n"],"names":["Button","Popup","useField","useRef","styles","MessagesImport","setValue","path","inputRef","handleImportFromFile","event","file","target","files","value","reader","FileReader","onload","readerEvent","text","result","data","JSON","parse","readAsText","handleImportFromURL","url","prompt","fetch","then","response","json","catch","error","console","input","accept","hidden","onChange","ref","type","button","div","className","popup","buttonStyle","action","iconPosition","onClick","current","click"],"mappings":"AAAA;;AAEA,SAASA,MAAM,EAAEC,KAAK,EAAEC,QAAQ,QAAQ,iBAAiB;AACzD,SAASC,MAAM,QAAQ,QAAQ;AAE/B,OAAOC,YAAY,8BAA8B;AAEjD,OAAO,SAASC;IACd,MAAM,EAAEC,QAAQ,EAAE,GAAGJ,SAAS;QAAEK,MAAM;IAAO;IAC7C,MAAMC,WAAWL,OAAyB;IAE1C,MAAMM,uBAAuB,CAACC;QAC5B,MAAMC,OAAOD,MAAME,MAAM,CAACC,KAAK,EAAE,CAAC,EAAE;QACpC,IAAI,CAACF,MAAM;YACTD,MAAME,MAAM,CAACE,KAAK,GAAG;YACrB;QACF;QAEA,MAAMC,SAAS,IAAIC;QACnBD,OAAOE,MAAM,GAAG,CAACC;YACf,MAAMC,OAAOD,YAAYN,MAAM,EAAEQ;YACjC,MAAMC,OAAOC,KAAKC,KAAK,CAACJ;YACxBb,SAASe;YACT,4EAA4E;YAC5EX,MAAME,MAAM,CAACE,KAAK,GAAG;QACvB;QACAC,OAAOS,UAAU,CAACb;IACpB;IAEA,MAAMc,sBAAsB;QAC1B,MAAMC,MAAMC,OAAO;QACnB,IAAI,CAACD,KAAK;QAEV,oBAAoB;QAEpBE,MAAMF,KACHG,IAAI,CAAC,CAACC,WAAaA,SAASC,IAAI,IAChCF,IAAI,CAACvB,UACL0B,KAAK,CAAC,CAACC,QAAUC,QAAQD,KAAK,CAAC,yBAAyBA;IAC7D;IAEA,qBACE;;0BACE,KAACE;gBACCC,QAAO;gBACPC,MAAM;gBACNC,UAAU7B;gBACV8B,KAAK/B;gBACLgC,MAAK;;0BAEP,KAACvC;gBAAMwC,QAAO;0BACZ,cAAA,MAACC;oBAAIC,WAAWvC,OAAOwC,KAAK;;sCAC1B,KAAC5C;4BACC6C,aAAY;4BACZF,WAAWvC,OAAO0C,MAAM;4BACxBC,cAAa;4BACbC,SAAS,IAAMxC,SAASyC,OAAO,EAAEC;sCAClC;;sCAGD,KAAClD;4BACC6C,aAAY;4BACZF,WAAWvC,OAAO0C,MAAM;4BACxBC,cAAa;4BACbC,SAASvB;sCACV;;;;;;;AAOX"}

package/dist/components/MessagesImport.module.css

@@ -0,0 +1,8 @@
+.popup {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.action {
+  margin-block: 0;
+}

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

@@ -0,0 +1,8 @@
+export interface LexicalInputProps {
+    lang: string;
+    value: string;
+    onChange: (value: string) => void;
+    onBlur: () => void;
+}
+export declare function LexicalInput({ value, onChange, }: LexicalInputProps): React.ReactNode;
+//# sourceMappingURL=LexicalInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LexicalInput.d.ts","sourceRoot":"","sources":["../../../src/components/input/LexicalInput.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,GACT,EAAE,iBAAiB,GAAG,KAAK,CAAC,SAAS,CAkBrC"}

package/dist/components/input/LexicalInput.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RenderLexical } from '@payloadcms/richtext-lexical/client';
+import { useHtmlLexicalAdapter } from './useHtmlLexicalAdapter';
+export function LexicalInput({ value, onChange }) {
+    const editor = useHtmlLexicalAdapter({
+        html: value,
+        onChange
+    });
+    return /*#__PURE__*/ _jsx(RenderLexical, {
+        field: {
+            name: 'myCustomEditor',
+            label: false,
+            type: 'richText'
+        },
+        schemaPath: "global.intl-plugin.editorTemplate",
+        setValue: (val)=>editor.setValue(val),
+        value: editor.value
+    });
+}
+
+//# sourceMappingURL=LexicalInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/input/LexicalInput.tsx"],"sourcesContent":["import { RenderLexical } from '@payloadcms/richtext-lexical/client';\nimport type { SerializedEditorState } from '@payloadcms/richtext-lexical/lexical';\nimport { useHtmlLexicalAdapter } from './useHtmlLexicalAdapter';\n\nexport interface LexicalInputProps {\n  lang: string;\n  value: string;\n  onChange: (value: string) => void;\n  onBlur: () => void;\n}\n\nexport function LexicalInput({\n  value,\n  onChange,\n}: LexicalInputProps): React.ReactNode {\n  const editor = useHtmlLexicalAdapter({\n    html: value,\n    onChange,\n  });\n\n  return (\n    <RenderLexical\n      field={{\n        name: 'myCustomEditor',\n        label: false,\n        type: 'richText',\n      }}\n      schemaPath=\"global.intl-plugin.editorTemplate\"\n      setValue={(val) => editor.setValue(val as SerializedEditorState)}\n      value={editor.value}\n    />\n  );\n}\n"],"names":["RenderLexical","useHtmlLexicalAdapter","LexicalInput","value","onChange","editor","html","field","name","label","type","schemaPath","setValue","val"],"mappings":";AAAA,SAASA,aAAa,QAAQ,sCAAsC;AAEpE,SAASC,qBAAqB,QAAQ,0BAA0B;AAShE,OAAO,SAASC,aAAa,EAC3BC,KAAK,EACLC,QAAQ,EACU;IAClB,MAAMC,SAASJ,sBAAsB;QACnCK,MAAMH;QACNC;IACF;IAEA,qBACE,KAACJ;QACCO,OAAO;YACLC,MAAM;YACNC,OAAO;YACPC,MAAM;QACR;QACAC,YAAW;QACXC,UAAU,CAACC,MAAQR,OAAOO,QAAQ,CAACC;QACnCV,OAAOE,OAAOF,KAAK;;AAGzB"}

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

@@ -0,0 +1,12 @@
+import type { TemplateVariable } from '../../types';
+export interface MessageInputProps {
+    value: string;
+    variables: TemplateVariable[];
+    onChange: (value: string) => void;
+    onBlur: () => void;
+    readOnly?: boolean;
+    multiline?: boolean;
+    error?: boolean;
+}
+export declare function MessageInput({ value, variables, onChange, onBlur, multiline, error, }: MessageInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MessageInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageInput.d.ts","sourceRoot":"","sources":["../../../src/components/input/MessageInput.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AA2BhD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAC9B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,SAAS,EACT,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,iBAAiB,2CA2EnB"}

package/dist/components/{inputs → input}/MessageInput.js

@@ -8,13 +8,10 @@ import { LexicalErrorBoundary } from '@payloadcms/richtext-lexical/lexical/react
 import { HistoryPlugin } from '@payloadcms/richtext-lexical/lexical/react/LexicalHistoryPlugin';
 import { OnChangePlugin } from '@payloadcms/richtext-lexical/lexical/react/LexicalOnChangePlugin';
 import { PlainTextPlugin } from '@payloadcms/richtext-lexical/lexical/react/LexicalPlainTextPlugin';
-import clsx from 'clsx';
 import { BeautifulMentionNode, BeautifulMentionsPlugin } from 'lexical-beautiful-mentions';
 import { useCallback, useEffect, useMemo } from 'react';
-import { formatVariableLabel } from '../../utils/format';
-import { isTagElement } from '../../utils/guards';
-import { parseIcuToLexicalState, serializeICUMessage } from '../../utils/icu-tranform';
-import { FieldWrapper } from './FieldWrapper';
+import { formatVariableLabel } from '../../components/input/utils';
+import { isTagElement, parseIcuToLexicalState, serializeICUMessage } from '../../icu';
 import styles from './MessageInput.module.css';
 import { SingleLinePlugin } from './SingleLinePlugin';
 import { VariableMentionNode } from './variables/VariableNode';
@@ -35,7 +32,7 @@ function SyncValuePlugin({ value }) {
     ]);
     return null;
 }
-export function MessageInput({ value, lang, error, variables, onChange, onBlur, className, multiline, reference }) {
+export function MessageInput({ value, variables, onChange, onBlur, multiline, error }) {
     const handleChange = useCallback((editorState)=>{
         editorState.read(()=>{
             onChange($getRoot().getTextContent());
@@ -74,39 +71,35 @@ export function MessageInput({ value, lang, error, variables, onChange, onBlur,
             editable: true,
             onError: console.error
         }), []);
-    return /*#__PURE__*/ _jsx(FieldWrapper, {
-        className: className,
-        error: error,
-        reference: reference,
-        children: /*#__PURE__*/ _jsx(LexicalComposer, {
-            initialConfig: initialConfig,
-            children: /*#__PURE__*/ _jsxs("div", {
-                className: clsx(styles.editor, multiline && styles.multiline),
-                lang: lang,
-                children: [
-                    /*#__PURE__*/ _jsx(PlainTextPlugin, {
-                        contentEditable: /*#__PURE__*/ _jsx(ContentEditable, {
-                            className: clsx(styles.contentEditable, error && styles.contentEditableError),
-                            onBlur: onBlur
-                        }),
-                        ErrorBoundary: LexicalErrorBoundary
+    return /*#__PURE__*/ _jsx(LexicalComposer, {
+        initialConfig: initialConfig,
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: styles.editor,
+            "data-multiline": multiline,
+            children: [
+                /*#__PURE__*/ _jsx(PlainTextPlugin, {
+                    contentEditable: /*#__PURE__*/ _jsx(ContentEditable, {
+                        className: styles.contentEditable,
+                        "data-error": error,
+                        onBlur: onBlur
                     }),
-                    multiline && /*#__PURE__*/ _jsx(SingleLinePlugin, {}),
-                    /*#__PURE__*/ _jsx(SyncValuePlugin, {
-                        value: value
-                    }),
-                    /*#__PURE__*/ _jsx(OnChangePlugin, {
-                        onChange: handleChange
-                    }),
-                    /*#__PURE__*/ _jsx(HistoryPlugin, {}),
-                    /*#__PURE__*/ _jsx(BeautifulMentionsPlugin, {
-                        items: mentionItems,
-                        menuAnchorClassName: styles.menuAnchor,
-                        menuComponent: MentionMenu,
-                        menuItemComponent: MentionMenuItem
-                    })
-                ]
-            })
+                    ErrorBoundary: LexicalErrorBoundary
+                }),
+                multiline && /*#__PURE__*/ _jsx(SingleLinePlugin, {}),
+                /*#__PURE__*/ _jsx(SyncValuePlugin, {
+                    value: value
+                }),
+                /*#__PURE__*/ _jsx(OnChangePlugin, {
+                    onChange: handleChange
+                }),
+                /*#__PURE__*/ _jsx(HistoryPlugin, {}),
+                /*#__PURE__*/ _jsx(BeautifulMentionsPlugin, {
+                    items: mentionItems,
+                    menuAnchorClassName: styles.menuAnchor,
+                    menuComponent: MentionMenu,
+                    menuItemComponent: MentionMenuItem
+                })
+            ]
         })
     });
 }

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/input/MessageInput.tsx"],"sourcesContent":["'use client';\n\nimport type { EditorState } from '@payloadcms/richtext-lexical/lexical';\nimport { $getRoot } from '@payloadcms/richtext-lexical/lexical';\nimport { LexicalComposer } from '@payloadcms/richtext-lexical/lexical/react/LexicalComposer';\nimport { useLexicalComposerContext } from '@payloadcms/richtext-lexical/lexical/react/LexicalComposerContext';\nimport { ContentEditable } from '@payloadcms/richtext-lexical/lexical/react/LexicalContentEditable';\nimport { LexicalErrorBoundary } from '@payloadcms/richtext-lexical/lexical/react/LexicalErrorBoundary';\nimport { HistoryPlugin } from '@payloadcms/richtext-lexical/lexical/react/LexicalHistoryPlugin';\nimport { OnChangePlugin } from '@payloadcms/richtext-lexical/lexical/react/LexicalOnChangePlugin';\nimport { PlainTextPlugin } from '@payloadcms/richtext-lexical/lexical/react/LexicalPlainTextPlugin';\nimport {\n  BeautifulMentionNode,\n  BeautifulMentionsPlugin,\n} from 'lexical-beautiful-mentions';\nimport { useCallback, useEffect, useMemo } from 'react';\nimport { formatVariableLabel } from '@/components/input/utils';\nimport {\n  isTagElement,\n  parseIcuToLexicalState,\n  serializeICUMessage,\n} from '@/icu';\nimport type { TemplateVariable } from '@/types';\n\nimport styles from './MessageInput.module.css';\nimport { SingleLinePlugin } from './SingleLinePlugin';\nimport { VariableMentionNode } from './variables/VariableNode';\nimport { MentionMenu, MentionMenuItem } from './variables/VariableSuggestion';\n\nfunction SyncValuePlugin({ value }: { value: string }) {\n  const [editor] = useLexicalComposerContext();\n\n  useEffect(() => {\n    const currentText = editor\n      .getEditorState()\n      .read(() => $getRoot().getTextContent());\n    if (value !== currentText) {\n      queueMicrotask(() => {\n        const newState = editor.parseEditorState(\n          JSON.stringify(parseIcuToLexicalState(value)),\n        );\n        editor.setEditorState(newState);\n      });\n    }\n  }, [value, editor]);\n\n  return null;\n}\n\nexport interface MessageInputProps {\n  value: string;\n  variables: TemplateVariable[];\n  onChange: (value: string) => void;\n  onBlur: () => void;\n  readOnly?: boolean;\n  multiline?: boolean;\n  error?: boolean;\n}\n\nexport function MessageInput({\n  value,\n  variables,\n  onChange,\n  onBlur,\n  multiline,\n  error,\n}: MessageInputProps) {\n  const handleChange = useCallback(\n    (editorState: EditorState) => {\n      editorState.read(() => {\n        onChange($getRoot().getTextContent());\n      });\n    },\n    [onChange],\n  );\n\n  const mentionItems = useMemo(() => {\n    const toItem = (v: TemplateVariable) => ({\n      value: v.value,\n      label: formatVariableLabel(v),\n      icu: serializeICUMessage([v]),\n    });\n\n    return {\n      '@': variables.map(toItem),\n      '{': variables.filter((v) => !isTagElement(v)).map(toItem),\n      '<': variables.filter((v) => isTagElement(v)).map(toItem),\n    };\n  }, [variables]);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: LexicalComposer only reads initialConfig on mount\n  const initialConfig = useMemo(\n    () => ({\n      namespace: 'ICUMessageEditor',\n      nodes: [\n        VariableMentionNode,\n        {\n          replace: BeautifulMentionNode,\n          with: (node: BeautifulMentionNode) =>\n            new VariableMentionNode(\n              node.getTrigger(),\n              node.getValue(),\n              node.getData(),\n            ),\n          withKlass: VariableMentionNode,\n        },\n      ],\n      editorState: JSON.stringify(parseIcuToLexicalState(value)),\n      editable: true,\n      onError: console.error,\n    }),\n    [],\n  );\n\n  return (\n    <LexicalComposer initialConfig={initialConfig}>\n      <div className={styles.editor} data-multiline={multiline}>\n        <PlainTextPlugin\n          contentEditable={\n            <ContentEditable\n              className={styles.contentEditable}\n              data-error={error}\n              onBlur={onBlur}\n            />\n          }\n          ErrorBoundary={LexicalErrorBoundary}\n        />\n        {multiline && <SingleLinePlugin />}\n        <SyncValuePlugin value={value} />\n        <OnChangePlugin onChange={handleChange} />\n        <HistoryPlugin />\n\n        <BeautifulMentionsPlugin\n          items={mentionItems}\n          menuAnchorClassName={styles.menuAnchor}\n          menuComponent={MentionMenu}\n          menuItemComponent={MentionMenuItem}\n        />\n      </div>\n    </LexicalComposer>\n  );\n}\n"],"names":["$getRoot","LexicalComposer","useLexicalComposerContext","ContentEditable","LexicalErrorBoundary","HistoryPlugin","OnChangePlugin","PlainTextPlugin","BeautifulMentionNode","BeautifulMentionsPlugin","useCallback","useEffect","useMemo","formatVariableLabel","isTagElement","parseIcuToLexicalState","serializeICUMessage","styles","SingleLinePlugin","VariableMentionNode","MentionMenu","MentionMenuItem","SyncValuePlugin","value","editor","currentText","getEditorState","read","getTextContent","queueMicrotask","newState","parseEditorState","JSON","stringify","setEditorState","MessageInput","variables","onChange","onBlur","multiline","error","handleChange","editorState","mentionItems","toItem","v","label","icu","map","filter","initialConfig","namespace","nodes","replace","with","node","getTrigger","getValue","getData","withKlass","editable","onError","console","div","className","data-multiline","contentEditable","data-error","ErrorBoundary","items","menuAnchorClassName","menuAnchor","menuComponent","menuItemComponent"],"mappings":"AAAA;;AAGA,SAASA,QAAQ,QAAQ,uCAAuC;AAChE,SAASC,eAAe,QAAQ,6DAA6D;AAC7F,SAASC,yBAAyB,QAAQ,oEAAoE;AAC9G,SAASC,eAAe,QAAQ,oEAAoE;AACpG,SAASC,oBAAoB,QAAQ,kEAAkE;AACvG,SAASC,aAAa,QAAQ,kEAAkE;AAChG,SAASC,cAAc,QAAQ,mEAAmE;AAClG,SAASC,eAAe,QAAQ,oEAAoE;AACpG,SACEC,oBAAoB,EACpBC,uBAAuB,QAClB,6BAA6B;AACpC,SAASC,WAAW,EAAEC,SAAS,EAAEC,OAAO,QAAQ,QAAQ;AACxD,SAASC,mBAAmB,QAAQ,2BAA2B;AAC/D,SACEC,YAAY,EACZC,sBAAsB,EACtBC,mBAAmB,QACd,QAAQ;AAGf,OAAOC,YAAY,4BAA4B;AAC/C,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,mBAAmB,QAAQ,2BAA2B;AAC/D,SAASC,WAAW,EAAEC,eAAe,QAAQ,iCAAiC;AAE9E,SAASC,gBAAgB,EAAEC,KAAK,EAAqB;IACnD,MAAM,CAACC,OAAO,GAAGtB;IAEjBS,UAAU;QACR,MAAMc,cAAcD,OACjBE,cAAc,GACdC,IAAI,CAAC,IAAM3B,WAAW4B,cAAc;QACvC,IAAIL,UAAUE,aAAa;YACzBI,eAAe;gBACb,MAAMC,WAAWN,OAAOO,gBAAgB,CACtCC,KAAKC,SAAS,CAAClB,uBAAuBQ;gBAExCC,OAAOU,cAAc,CAACJ;YACxB;QACF;IACF,GAAG;QAACP;QAAOC;KAAO;IAElB,OAAO;AACT;AAYA,OAAO,SAASW,aAAa,EAC3BZ,KAAK,EACLa,SAAS,EACTC,QAAQ,EACRC,MAAM,EACNC,SAAS,EACTC,KAAK,EACa;IAClB,MAAMC,eAAe/B,YACnB,CAACgC;QACCA,YAAYf,IAAI,CAAC;YACfU,SAASrC,WAAW4B,cAAc;QACpC;IACF,GACA;QAACS;KAAS;IAGZ,MAAMM,eAAe/B,QAAQ;QAC3B,MAAMgC,SAAS,CAACC,IAAyB,CAAA;gBACvCtB,OAAOsB,EAAEtB,KAAK;gBACduB,OAAOjC,oBAAoBgC;gBAC3BE,KAAK/B,oBAAoB;oBAAC6B;iBAAE;YAC9B,CAAA;QAEA,OAAO;YACL,KAAKT,UAAUY,GAAG,CAACJ;YACnB,KAAKR,UAAUa,MAAM,CAAC,CAACJ,IAAM,CAAC/B,aAAa+B,IAAIG,GAAG,CAACJ;YACnD,KAAKR,UAAUa,MAAM,CAAC,CAACJ,IAAM/B,aAAa+B,IAAIG,GAAG,CAACJ;QACpD;IACF,GAAG;QAACR;KAAU;IAEd,6GAA6G;IAC7G,MAAMc,gBAAgBtC,QACpB,IAAO,CAAA;YACLuC,WAAW;YACXC,OAAO;gBACLjC;gBACA;oBACEkC,SAAS7C;oBACT8C,MAAM,CAACC,OACL,IAAIpC,oBACFoC,KAAKC,UAAU,IACfD,KAAKE,QAAQ,IACbF,KAAKG,OAAO;oBAEhBC,WAAWxC;gBACb;aACD;YACDuB,aAAaV,KAAKC,SAAS,CAAClB,uBAAuBQ;YACnDqC,UAAU;YACVC,SAASC,QAAQtB,KAAK;QACxB,CAAA,GACA,EAAE;IAGJ,qBACE,KAACvC;QAAgBiD,eAAeA;kBAC9B,cAAA,MAACa;YAAIC,WAAW/C,OAAOO,MAAM;YAAEyC,kBAAgB1B;;8BAC7C,KAAChC;oBACC2D,+BACE,KAAC/D;wBACC6D,WAAW/C,OAAOiD,eAAe;wBACjCC,cAAY3B;wBACZF,QAAQA;;oBAGZ8B,eAAehE;;gBAEhBmC,2BAAa,KAACrB;8BACf,KAACI;oBAAgBC,OAAOA;;8BACxB,KAACjB;oBAAe+B,UAAUI;;8BAC1B,KAACpC;8BAED,KAACI;oBACC4D,OAAO1B;oBACP2B,qBAAqBrD,OAAOsD,UAAU;oBACtCC,eAAepD;oBACfqD,mBAAmBpD;;;;;AAK7B"}

package/dist/components/{inputs → input}/MessageInput.module.css

@@ -4,15 +4,10 @@
   align-items: center;
   min-height: 2rem;
   font-size: var(--font-size-large);
-}
-
-.readOnly {
-  opacity: 0.7;
-  cursor: default;
-}
 
-.multiline {
-  min-height: 4rem;
+  &[data-multiline="true"] {
+    min-height: 4rem;
+  }
 }
 
 .menuAnchor {
@@ -27,18 +22,18 @@
   padding-block: 0.25rem;
   padding-inline: 0.75rem;
   height: 100%;
-}
 
-.contentEditable:focus {
-  outline: none;
-  border-color: var(--theme-elevation-600);
-}
+  &:focus {
+    outline: none;
+    border-color: var(--theme-elevation-600);
+  }
 
-.contentEditableError {
-  border-color: var(--theme-error-400);
-  background-color: var(--theme-error-100);
-}
+  &[data-error="true"] {
+    border-color: var(--theme-error-400);
+    background-color: var(--theme-error-100);
+  }
 
-.contentEditable p {
-  margin: 0;
+  p {
+    margin: 0;
+  }
 }

package/dist/components/{inputs → input}/ReferencePopover.d.ts

@@ -1,4 +1,4 @@
-import type { ReactElement } from 'react';
+import { type ReactElement } from 'react';
 export interface ReferencePopoverProps {
     reference?: string;
     children: ReactElement;

package/dist/components/input/ReferencePopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReferencePopover.d.ts","sourceRoot":"","sources":["../../../src/components/input/ReferencePopover.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,YAAY,EAIlB,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,qBAAqB;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,YAAY,CAAC;CACxB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,QAAQ,GACT,EAAE,qBAAqB,2CAQvB"}

package/dist/components/{inputs → input}/ReferencePopover.js

@@ -1,18 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Popover } from '@base-ui/react/popover';
 import { IconX } from '@tabler/icons-react';
+import { useCallback, useRef, useState } from 'react';
 import styles from './ReferencePopover.module.css';
 export function ReferencePopover({ reference, children }) {
     if (!reference) return children;
+    return /*#__PURE__*/ _jsx(ControlledReferencePopover, {
+        reference: reference,
+        children: children
+    });
+}
+function ControlledReferencePopover({ reference, children }) {
+    const [open, setOpen] = useState(false);
+    const anchorRef = useRef(null);
+    const handleFocus = useCallback(()=>setOpen(true), []);
+    const handleBlur = useCallback((e)=>{
+        // Stay open if focus moves within the fieldset or into the popup
+        if (anchorRef.current?.contains(e.relatedTarget) || e.relatedTarget?.closest('[data-popup-open]')) return;
+        setOpen(false);
+    }, []);
     return /*#__PURE__*/ _jsxs(Popover.Root, {
+        onOpenChange: setOpen,
+        open: open,
         children: [
-            /*#__PURE__*/ _jsx(Popover.Trigger, {
-                nativeButton: false,
-                render: children
-            }),
             /*#__PURE__*/ _jsx(Popover.Portal, {
                 children: /*#__PURE__*/ _jsx(Popover.Positioner, {
                     align: "start",
+                    anchor: anchorRef,
                     side: "top",
                     sideOffset: 4,
                     children: /*#__PURE__*/ _jsxs(Popover.Popup, {
@@ -34,7 +48,8 @@ export function ReferencePopover({ reference, children }) {
                         ]
                     })
                 })
-            })
+            }),
+            children
         ]
     });
 }

package/dist/components/input/ReferencePopover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/input/ReferencePopover.tsx"],"sourcesContent":["import { Popover } from '@base-ui/react/popover';\n\nimport { IconX } from '@tabler/icons-react';\nimport {\n  cloneElement,\n  type ReactElement,\n  useCallback,\n  useRef,\n  useState,\n} from 'react';\n\nimport styles from './ReferencePopover.module.css';\n\nexport interface ReferencePopoverProps {\n  reference?: string;\n  children: ReactElement;\n}\n\nexport function ReferencePopover({\n  reference,\n  children,\n}: ReferencePopoverProps) {\n  if (!reference) return children;\n\n  return (\n    <ControlledReferencePopover reference={reference}>\n      {children}\n    </ControlledReferencePopover>\n  );\n}\n\nfunction ControlledReferencePopover({\n  reference,\n  children,\n}: {\n  reference: string;\n  children: ReactElement;\n}) {\n  const [open, setOpen] = useState(false);\n  const anchorRef = useRef<HTMLElement>(null);\n\n  const handleFocus = useCallback(() => setOpen(true), []);\n  const handleBlur = useCallback((e: React.FocusEvent) => {\n    // Stay open if focus moves within the fieldset or into the popup\n    if (\n      anchorRef.current?.contains(e.relatedTarget) ||\n      e.relatedTarget?.closest('[data-popup-open]')\n    )\n      return;\n    setOpen(false);\n  }, []);\n\n  return (\n    <Popover.Root onOpenChange={setOpen} open={open}>\n      <Popover.Portal>\n        <Popover.Positioner\n          align=\"start\"\n          anchor={anchorRef}\n          side=\"top\"\n          sideOffset={4}\n        >\n          <Popover.Popup\n            className={styles.popup}\n            initialFocus={false}\n            onMouseDown={(e) => e.preventDefault()}\n          >\n            <Popover.Close className={styles.dismiss} type=\"button\">\n              <IconX size={14} />\n            </Popover.Close>\n            <p className={styles.text}>{reference}</p>\n          </Popover.Popup>\n        </Popover.Positioner>\n      </Popover.Portal>\n      {children}\n      {/*{cloneElement(children, {\n        ref: anchorRef,\n        onFocus: handleFocus,\n        onBlur: handleBlur,\n      })}*/}\n    </Popover.Root>\n  );\n}\n"],"names":["Popover","IconX","useCallback","useRef","useState","styles","ReferencePopover","reference","children","ControlledReferencePopover","open","setOpen","anchorRef","handleFocus","handleBlur","e","current","contains","relatedTarget","closest","Root","onOpenChange","Portal","Positioner","align","anchor","side","sideOffset","Popup","className","popup","initialFocus","onMouseDown","preventDefault","Close","dismiss","type","size","p","text"],"mappings":";AAAA,SAASA,OAAO,QAAQ,yBAAyB;AAEjD,SAASC,KAAK,QAAQ,sBAAsB;AAC5C,SAGEC,WAAW,EACXC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAEf,OAAOC,YAAY,gCAAgC;AAOnD,OAAO,SAASC,iBAAiB,EAC/BC,SAAS,EACTC,QAAQ,EACc;IACtB,IAAI,CAACD,WAAW,OAAOC;IAEvB,qBACE,KAACC;QAA2BF,WAAWA;kBACpCC;;AAGP;AAEA,SAASC,2BAA2B,EAClCF,SAAS,EACTC,QAAQ,EAIT;IACC,MAAM,CAACE,MAAMC,QAAQ,GAAGP,SAAS;IACjC,MAAMQ,YAAYT,OAAoB;IAEtC,MAAMU,cAAcX,YAAY,IAAMS,QAAQ,OAAO,EAAE;IACvD,MAAMG,aAAaZ,YAAY,CAACa;QAC9B,iEAAiE;QACjE,IACEH,UAAUI,OAAO,EAAEC,SAASF,EAAEG,aAAa,KAC3CH,EAAEG,aAAa,EAAEC,QAAQ,sBAEzB;QACFR,QAAQ;IACV,GAAG,EAAE;IAEL,qBACE,MAACX,QAAQoB,IAAI;QAACC,cAAcV;QAASD,MAAMA;;0BACzC,KAACV,QAAQsB,MAAM;0BACb,cAAA,KAACtB,QAAQuB,UAAU;oBACjBC,OAAM;oBACNC,QAAQb;oBACRc,MAAK;oBACLC,YAAY;8BAEZ,cAAA,MAAC3B,QAAQ4B,KAAK;wBACZC,WAAWxB,OAAOyB,KAAK;wBACvBC,cAAc;wBACdC,aAAa,CAACjB,IAAMA,EAAEkB,cAAc;;0CAEpC,KAACjC,QAAQkC,KAAK;gCAACL,WAAWxB,OAAO8B,OAAO;gCAAEC,MAAK;0CAC7C,cAAA,KAACnC;oCAAMoC,MAAM;;;0CAEf,KAACC;gCAAET,WAAWxB,OAAOkC,IAAI;0CAAGhC;;;;;;YAIjCC;;;AAQP"}

package/dist/components/input/SingleLinePlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleLinePlugin.d.ts","sourceRoot":"","sources":["../../../src/components/input/SingleLinePlugin.tsx"],"names":[],"mappings":"AASA,wBAAgB,gBAAgB,SA2B/B"}

package/dist/components/input/SingleLinePlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/input/SingleLinePlugin.tsx"],"sourcesContent":["import {\n  COMMAND_PRIORITY_HIGH,\n  INSERT_LINE_BREAK_COMMAND,\n  INSERT_PARAGRAPH_COMMAND,\n  LineBreakNode,\n} from '@payloadcms/richtext-lexical/lexical';\nimport { useLexicalComposerContext } from '@payloadcms/richtext-lexical/lexical/react/LexicalComposerContext';\nimport { useEffect } from 'react';\n\nexport function SingleLinePlugin() {\n  const [editor] = useLexicalComposerContext();\n  useEffect(() => {\n    const unregisterLineBreak = editor.registerCommand(\n      INSERT_LINE_BREAK_COMMAND,\n      () => true,\n      COMMAND_PRIORITY_HIGH,\n    );\n    const unregisterParagraph = editor.registerCommand(\n      INSERT_PARAGRAPH_COMMAND,\n      () => true,\n      COMMAND_PRIORITY_HIGH,\n    );\n    // Catch line breaks inserted via paste or other means\n    const unregisterTransform = editor.registerNodeTransform(\n      LineBreakNode,\n      (node) => {\n        node.remove();\n      },\n    );\n    return () => {\n      unregisterLineBreak();\n      unregisterParagraph();\n      unregisterTransform();\n    };\n  }, [editor]);\n  return null;\n}\n"],"names":["COMMAND_PRIORITY_HIGH","INSERT_LINE_BREAK_COMMAND","INSERT_PARAGRAPH_COMMAND","LineBreakNode","useLexicalComposerContext","useEffect","SingleLinePlugin","editor","unregisterLineBreak","registerCommand","unregisterParagraph","unregisterTransform","registerNodeTransform","node","remove"],"mappings":"AAAA,SACEA,qBAAqB,EACrBC,yBAAyB,EACzBC,wBAAwB,EACxBC,aAAa,QACR,uCAAuC;AAC9C,SAASC,yBAAyB,QAAQ,oEAAoE;AAC9G,SAASC,SAAS,QAAQ,QAAQ;AAElC,OAAO,SAASC;IACd,MAAM,CAACC,OAAO,GAAGH;IACjBC,UAAU;QACR,MAAMG,sBAAsBD,OAAOE,eAAe,CAChDR,2BACA,IAAM,MACND;QAEF,MAAMU,sBAAsBH,OAAOE,eAAe,CAChDP,0BACA,IAAM,MACNF;QAEF,sDAAsD;QACtD,MAAMW,sBAAsBJ,OAAOK,qBAAqB,CACtDT,eACA,CAACU;YACCA,KAAKC,MAAM;QACb;QAEF,OAAO;YACLN;YACAE;YACAC;QACF;IACF,GAAG;QAACJ;KAAO;IACX,OAAO;AACT"}

package/dist/components/{hooks → input}/useHtmlLexicalAdapter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHtmlLexicalAdapter.d.ts","sourceRoot":"","sources":["../../../src/components/hooks/useHtmlLexicalAdapter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAChB,gBAAgB,EACjB,MAAM,8BAA8B,CAAC;AAUtC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAWlF,UAAU,0BAA0B;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED,wBAAgB,qBAAqB,CAAC,EACpC,IAAI,EACJ,QAAQ,GACT,EAAE,0BAA0B;WAiEF,gBAAgB,CAAC,gBAAgB,CAAC;gCAjBvC,qBAAqB;EAkB1C"}
+{"version":3,"file":"useHtmlLexicalAdapter.d.ts","sourceRoot":"","sources":["../../../src/components/input/useHtmlLexicalAdapter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAChB,gBAAgB,EACjB,MAAM,8BAA8B,CAAC;AAUtC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAWlF,UAAU,0BAA0B;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED,wBAAgB,qBAAqB,CAAC,EACpC,IAAI,EACJ,QAAQ,GACT,EAAE,0BAA0B;WAiEF,gBAAgB,CAAC,gBAAgB,CAAC;gCAjBvC,qBAAqB;EAkB1C"}

package/dist/components/{hooks → input}/useHtmlLexicalAdapter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/hooks/useHtmlLexicalAdapter.ts"],"sourcesContent":["import type {\n  DefaultNodeTypes,\n  TypedEditorState,\n} from '@payloadcms/richtext-lexical';\nimport {\n  defaultEditorConfig,\n  defaultEditorFeatures,\n} from '@payloadcms/richtext-lexical';\nimport {\n  buildDefaultEditorState,\n  getEnabledNodes,\n  sanitizeClientEditorConfig,\n} from '@payloadcms/richtext-lexical/client';\nimport type { SerializedEditorState } from '@payloadcms/richtext-lexical/lexical';\nimport { $getRoot } from '@payloadcms/richtext-lexical/lexical';\nimport { createHeadlessEditor } from '@payloadcms/richtext-lexical/lexical/headless';\nimport {\n  $generateHtmlFromNodes,\n  $generateNodesFromDOM,\n} from '@payloadcms/richtext-lexical/lexical/html';\nimport { useCallback, useMemo, useRef } from 'react';\n\nconst EMPTY_STATE = buildDefaultEditorState({});\n\ninterface UseHtmlLexicalAdapterProps {\n  html: string;\n  onChange: (html: string) => void;\n}\n\nexport function useHtmlLexicalAdapter({\n  html,\n  onChange,\n}: UseHtmlLexicalAdapterProps) {\n  // 1. Maintain a persistent headless editor for conversion\n  const headlessEditor = useRef(\n    createHeadlessEditor({\n      nodes: getEnabledNodes({\n        editorConfig: sanitizeClientEditorConfig(\n          // @ts-expect-error - FIXME\n          defaultEditorFeatures,\n          defaultEditorConfig,\n        ),\n      }),\n    }),\n  );\n\n  // 2. HTML -> SerializedState\n  const getSerializedState = useCallback(\n    (htmlString: string): SerializedEditorState => {\n      const editor = headlessEditor.current;\n      editor.update(\n        () => {\n          const parser = new DOMParser();\n          const dom = parser.parseFromString(htmlString, 'text/html');\n          const nodes = $generateNodesFromDOM(editor, dom);\n\n          const root = $getRoot();\n          root.clear().append(...nodes);\n        },\n        { discrete: true },\n      );\n\n      return editor.getEditorState().toJSON();\n    },\n    [],\n  );\n\n  // 3. Memoize the initial value to prevent unnecessary re-renders\n  const value = useMemo(() => {\n    const serializedState = getSerializedState(html);\n\n    if (serializedState.root.children.length === 0) {\n      return EMPTY_STATE;\n    }\n\n    return serializedState;\n  }, [html, getSerializedState]);\n\n  // 4. SerializedState -> HTML\n  const setValue = useCallback(\n    (serializedState: SerializedEditorState) => {\n      const editor = headlessEditor.current;\n\n      // Update headless editor to match the incoming state\n      editor.setEditorState(editor.parseEditorState(serializedState));\n\n      // Generate HTML and broadcast if it has changed\n      editor.read(() => {\n        const newHtml = $generateHtmlFromNodes(editor);\n        if (newHtml !== html) {\n          onChange(newHtml);\n        }\n      });\n    },\n    [html, onChange],\n  );\n\n  return { value: value as TypedEditorState<DefaultNodeTypes>, setValue };\n}\n"],"names":["defaultEditorConfig","defaultEditorFeatures","buildDefaultEditorState","getEnabledNodes","sanitizeClientEditorConfig","$getRoot","createHeadlessEditor","$generateHtmlFromNodes","$generateNodesFromDOM","useCallback","useMemo","useRef","EMPTY_STATE","useHtmlLexicalAdapter","html","onChange","headlessEditor","nodes","editorConfig","getSerializedState","htmlString","editor","current","update","parser","DOMParser","dom","parseFromString","root","clear","append","discrete","getEditorState","toJSON","value","serializedState","children","length","setValue","setEditorState","parseEditorState","read","newHtml"],"mappings":"AAIA,SACEA,mBAAmB,EACnBC,qBAAqB,QAChB,+BAA+B;AACtC,SACEC,uBAAuB,EACvBC,eAAe,EACfC,0BAA0B,QACrB,sCAAsC;AAE7C,SAASC,QAAQ,QAAQ,uCAAuC;AAChE,SAASC,oBAAoB,QAAQ,gDAAgD;AACrF,SACEC,sBAAsB,EACtBC,qBAAqB,QAChB,4CAA4C;AACnD,SAASC,WAAW,EAAEC,OAAO,EAAEC,MAAM,QAAQ,QAAQ;AAErD,MAAMC,cAAcV,wBAAwB,CAAC;AAO7C,OAAO,SAASW,sBAAsB,EACpCC,IAAI,EACJC,QAAQ,EACmB;IAC3B,0DAA0D;IAC1D,MAAMC,iBAAiBL,OACrBL,qBAAqB;QACnBW,OAAOd,gBAAgB;YACrBe,cAAcd,2BACZ,2BAA2B;YAC3BH,uBACAD;QAEJ;IACF;IAGF,6BAA6B;IAC7B,MAAMmB,qBAAqBV,YACzB,CAACW;QACC,MAAMC,SAASL,eAAeM,OAAO;QACrCD,OAAOE,MAAM,CACX;YACE,MAAMC,SAAS,IAAIC;YACnB,MAAMC,MAAMF,OAAOG,eAAe,CAACP,YAAY;YAC/C,MAAMH,QAAQT,sBAAsBa,QAAQK;YAE5C,MAAME,OAAOvB;YACbuB,KAAKC,KAAK,GAAGC,MAAM,IAAIb;QACzB,GACA;YAAEc,UAAU;QAAK;QAGnB,OAAOV,OAAOW,cAAc,GAAGC,MAAM;IACvC,GACA,EAAE;IAGJ,iEAAiE;IACjE,MAAMC,QAAQxB,QAAQ;QACpB,MAAMyB,kBAAkBhB,mBAAmBL;QAE3C,IAAIqB,gBAAgBP,IAAI,CAACQ,QAAQ,CAACC,MAAM,KAAK,GAAG;YAC9C,OAAOzB;QACT;QAEA,OAAOuB;IACT,GAAG;QAACrB;QAAMK;KAAmB;IAE7B,6BAA6B;IAC7B,MAAMmB,WAAW7B,YACf,CAAC0B;QACC,MAAMd,SAASL,eAAeM,OAAO;QAErC,qDAAqD;QACrDD,OAAOkB,cAAc,CAAClB,OAAOmB,gBAAgB,CAACL;QAE9C,gDAAgD;QAChDd,OAAOoB,IAAI,CAAC;YACV,MAAMC,UAAUnC,uBAAuBc;YACvC,IAAIqB,YAAY5B,MAAM;gBACpBC,SAAS2B;YACX;QACF;IACF,GACA;QAAC5B;QAAMC;KAAS;IAGlB,OAAO;QAAEmB,OAAOA;QAA6CI;IAAS;AACxE"}
+{"version":3,"sources":["../../../src/components/input/useHtmlLexicalAdapter.ts"],"sourcesContent":["import type {\n  DefaultNodeTypes,\n  TypedEditorState,\n} from '@payloadcms/richtext-lexical';\nimport {\n  defaultEditorConfig,\n  defaultEditorFeatures,\n} from '@payloadcms/richtext-lexical';\nimport {\n  buildDefaultEditorState,\n  getEnabledNodes,\n  sanitizeClientEditorConfig,\n} from '@payloadcms/richtext-lexical/client';\nimport type { SerializedEditorState } from '@payloadcms/richtext-lexical/lexical';\nimport { $getRoot } from '@payloadcms/richtext-lexical/lexical';\nimport { createHeadlessEditor } from '@payloadcms/richtext-lexical/lexical/headless';\nimport {\n  $generateHtmlFromNodes,\n  $generateNodesFromDOM,\n} from '@payloadcms/richtext-lexical/lexical/html';\nimport { useCallback, useMemo, useRef } from 'react';\n\nconst EMPTY_STATE = buildDefaultEditorState({});\n\ninterface UseHtmlLexicalAdapterProps {\n  html: string;\n  onChange: (html: string) => void;\n}\n\nexport function useHtmlLexicalAdapter({\n  html,\n  onChange,\n}: UseHtmlLexicalAdapterProps) {\n  // 1. Maintain a persistent headless editor for conversion\n  const headlessEditor = useRef(\n    createHeadlessEditor({\n      nodes: getEnabledNodes({\n        editorConfig: sanitizeClientEditorConfig(\n          // @ts-expect-error - FIXME\n          defaultEditorFeatures,\n          defaultEditorConfig,\n        ),\n      }),\n    }),\n  );\n\n  // 2. HTML -> SerializedState\n  const getSerializedState = useCallback(\n    (htmlString: string): SerializedEditorState => {\n      const editor = headlessEditor.current;\n      editor.update(\n        () => {\n          const parser = new DOMParser();\n          const dom = parser.parseFromString(htmlString, 'text/html');\n          const nodes = $generateNodesFromDOM(editor, dom);\n\n          const root = $getRoot();\n          root.clear().append(...nodes);\n        },\n        { discrete: true },\n      );\n\n      return editor.getEditorState().toJSON();\n    },\n    [],\n  );\n\n  // 3. Memoize the initial value to prevent unnecessary re-renders\n  const value = useMemo(() => {\n    const serializedState = getSerializedState(html);\n\n    if (serializedState.root.children.length === 0) {\n      return EMPTY_STATE;\n    }\n\n    return serializedState;\n  }, [html, getSerializedState]);\n\n  // 4. SerializedState -> HTML\n  const setValue = useCallback(\n    (serializedState: SerializedEditorState) => {\n      const editor = headlessEditor.current;\n\n      // Update headless editor to match the incoming state\n      editor.setEditorState(editor.parseEditorState(serializedState));\n\n      // Generate HTML and broadcast if it has changed\n      editor.read(() => {\n        const newHtml = $generateHtmlFromNodes(editor);\n        if (newHtml !== html) {\n          onChange(newHtml);\n        }\n      });\n    },\n    [html, onChange],\n  );\n\n  return { value: value as TypedEditorState<DefaultNodeTypes>, setValue };\n}\n"],"names":["defaultEditorConfig","defaultEditorFeatures","buildDefaultEditorState","getEnabledNodes","sanitizeClientEditorConfig","$getRoot","createHeadlessEditor","$generateHtmlFromNodes","$generateNodesFromDOM","useCallback","useMemo","useRef","EMPTY_STATE","useHtmlLexicalAdapter","html","onChange","headlessEditor","nodes","editorConfig","getSerializedState","htmlString","editor","current","update","parser","DOMParser","dom","parseFromString","root","clear","append","discrete","getEditorState","toJSON","value","serializedState","children","length","setValue","setEditorState","parseEditorState","read","newHtml"],"mappings":"AAIA,SACEA,mBAAmB,EACnBC,qBAAqB,QAChB,+BAA+B;AACtC,SACEC,uBAAuB,EACvBC,eAAe,EACfC,0BAA0B,QACrB,sCAAsC;AAE7C,SAASC,QAAQ,QAAQ,uCAAuC;AAChE,SAASC,oBAAoB,QAAQ,gDAAgD;AACrF,SACEC,sBAAsB,EACtBC,qBAAqB,QAChB,4CAA4C;AACnD,SAASC,WAAW,EAAEC,OAAO,EAAEC,MAAM,QAAQ,QAAQ;AAErD,MAAMC,cAAcV,wBAAwB,CAAC;AAO7C,OAAO,SAASW,sBAAsB,EACpCC,IAAI,EACJC,QAAQ,EACmB;IAC3B,0DAA0D;IAC1D,MAAMC,iBAAiBL,OACrBL,qBAAqB;QACnBW,OAAOd,gBAAgB;YACrBe,cAAcd,2BACZ,2BAA2B;YAC3BH,uBACAD;QAEJ;IACF;IAGF,6BAA6B;IAC7B,MAAMmB,qBAAqBV,YACzB,CAACW;QACC,MAAMC,SAASL,eAAeM,OAAO;QACrCD,OAAOE,MAAM,CACX;YACE,MAAMC,SAAS,IAAIC;YACnB,MAAMC,MAAMF,OAAOG,eAAe,CAACP,YAAY;YAC/C,MAAMH,QAAQT,sBAAsBa,QAAQK;YAE5C,MAAME,OAAOvB;YACbuB,KAAKC,KAAK,GAAGC,MAAM,IAAIb;QACzB,GACA;YAAEc,UAAU;QAAK;QAGnB,OAAOV,OAAOW,cAAc,GAAGC,MAAM;IACvC,GACA,EAAE;IAGJ,iEAAiE;IACjE,MAAMC,QAAQxB,QAAQ;QACpB,MAAMyB,kBAAkBhB,mBAAmBL;QAE3C,IAAIqB,gBAAgBP,IAAI,CAACQ,QAAQ,CAACC,MAAM,KAAK,GAAG;YAC9C,OAAOzB;QACT;QAEA,OAAOuB;IACT,GAAG;QAACrB;QAAMK;KAAmB;IAE7B,6BAA6B;IAC7B,MAAMmB,WAAW7B,YACf,CAAC0B;QACC,MAAMd,SAASL,eAAeM,OAAO;QAErC,qDAAqD;QACrDD,OAAOkB,cAAc,CAAClB,OAAOmB,gBAAgB,CAACL;QAE9C,gDAAgD;QAChDd,OAAOoB,IAAI,CAAC;YACV,MAAMC,UAAUnC,uBAAuBc;YACvC,IAAIqB,YAAY5B,MAAM;gBACpBC,SAAS2B;YACX;QACF;IACF,GACA;QAAC5B;QAAMC;KAAS;IAGlB,OAAO;QAAEmB,OAAOA;QAA6CI;IAAS;AACxE"}

package/dist/{utils/format.d.ts → components/input/utils.d.ts}

@@ -1,4 +1,4 @@
-import type { TemplateVariable } from '../types';
+import type { TemplateVariable } from '../../types';
 export declare const toWords: (inputString: string, joinWords?: boolean) => string;
 export declare const formatVariableLabel: (variable: TemplateVariable) => string;
-//# sourceMappingURL=format.d.ts.map
+//# sourceMappingURL=utils.d.ts.map

package/dist/components/input/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/input/utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,eAAO,MAAM,OAAO,gBAAiB,MAAM,0BAAsB,MAkBhE,CAAC;AAEF,eAAO,MAAM,mBAAmB,aAAc,gBAAgB,WAK7D,CAAC"}

package/dist/{utils/format.js → components/input/utils.js}

@@ -1,4 +1,4 @@
-import { isTagElement } from './guards';
+import { isTagElement } from '../../icu';
 export const toWords = (inputString, joinWords = false)=>{
     const capitalizeFirstLetter = (string)=>string.charAt(0).toUpperCase() + string.slice(1);
     const notNullString = inputString || '';
@@ -20,4 +20,4 @@ export const formatVariableLabel = (variable)=>{
     return variable.value;
 };
 
-//# sourceMappingURL=format.js.map
+//# sourceMappingURL=utils.js.map

package/dist/components/input/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/input/utils.ts"],"sourcesContent":["import { isTagElement } from '@/icu';\nimport type { TemplateVariable } from '@/types';\n\nexport const toWords = (inputString: string, joinWords = false): string => {\n  const capitalizeFirstLetter = (string: string): string =>\n    string.charAt(0).toUpperCase() + string.slice(1);\n  const notNullString = inputString || '';\n  const trimmedString = notNullString.trim();\n  const arrayOfStrings = trimmedString.split(/[\\s-]/);\n\n  const splitStringsArray: string[] = [];\n  arrayOfStrings.forEach((tempString) => {\n    if (tempString !== '') {\n      const splitWords = tempString.split(/(?=[A-Z])/).join(' ');\n      splitStringsArray.push(capitalizeFirstLetter(splitWords));\n    }\n  });\n\n  return joinWords\n    ? splitStringsArray.join('').replace(/\\s/g, '')\n    : splitStringsArray.join(' ');\n};\n\nexport const formatVariableLabel = (variable: TemplateVariable) => {\n  if (isTagElement(variable)) {\n    return `<${variable.value}/>`;\n  }\n  return variable.value;\n};\n"],"names":["isTagElement","toWords","inputString","joinWords","capitalizeFirstLetter","string","charAt","toUpperCase","slice","notNullString","trimmedString","trim","arrayOfStrings","split","splitStringsArray","forEach","tempString","splitWords","join","push","replace","formatVariableLabel","variable","value"],"mappings":"AAAA,SAASA,YAAY,QAAQ,QAAQ;AAGrC,OAAO,MAAMC,UAAU,CAACC,aAAqBC,YAAY,KAAK;IAC5D,MAAMC,wBAAwB,CAACC,SAC7BA,OAAOC,MAAM,CAAC,GAAGC,WAAW,KAAKF,OAAOG,KAAK,CAAC;IAChD,MAAMC,gBAAgBP,eAAe;IACrC,MAAMQ,gBAAgBD,cAAcE,IAAI;IACxC,MAAMC,iBAAiBF,cAAcG,KAAK,CAAC;IAE3C,MAAMC,oBAA8B,EAAE;IACtCF,eAAeG,OAAO,CAAC,CAACC;QACtB,IAAIA,eAAe,IAAI;YACrB,MAAMC,aAAaD,WAAWH,KAAK,CAAC,aAAaK,IAAI,CAAC;YACtDJ,kBAAkBK,IAAI,CAACf,sBAAsBa;QAC/C;IACF;IAEA,OAAOd,YACHW,kBAAkBI,IAAI,CAAC,IAAIE,OAAO,CAAC,OAAO,MAC1CN,kBAAkBI,IAAI,CAAC;AAC7B,EAAE;AAEF,OAAO,MAAMG,sBAAsB,CAACC;IAClC,IAAItB,aAAasB,WAAW;QAC1B,OAAO,CAAC,CAAC,EAAEA,SAASC,KAAK,CAAC,EAAE,CAAC;IAC/B;IACA,OAAOD,SAASC,KAAK;AACvB,EAAE"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"VariableChip.d.ts","sourceRoot":"","sources":["../../../../src/components/input/variables/VariableChip.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AAwBpE,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,OAAO,CAAC;CAClB;AAID,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE,iBAAiB,2CAqE5E"}

package/dist/components/{inputs → input}/variables/VariableChip.js

@@ -5,8 +5,7 @@ import { $getNodeByKey } from '@payloadcms/richtext-lexical/lexical';
 import { useLexicalComposerContext } from '@payloadcms/richtext-lexical/lexical/react/LexicalComposerContext';
 import clsx from 'clsx';
 import { useMemo } from 'react';
-import { isArgumentElement, isNumericElement, isSelectElement, isTagElement, isTemporalElement } from '../../../utils/guards';
-import { parseICUMessage } from '../../../utils/icu-tranform';
+import { isArgumentElement, isNumericElement, isSelectElement, isTagElement, isTemporalElement, parseICUMessage } from '../../../icu';
 import { SelectVariableEditor } from './editors/SelectVariableEditor';
 import { TagVariableEditor } from './editors/TagVariableEditor';
 import { NumericVariableEditor } from './pickers/NumericVariableEditor';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/input/variables/VariableChip.tsx"],"sourcesContent":["'use client';\n\nimport { Popover } from '@base-ui/react/popover';\nimport type { NodeKey } from '@payloadcms/richtext-lexical/lexical';\nimport { $getNodeByKey } from '@payloadcms/richtext-lexical/lexical';\nimport { useLexicalComposerContext } from '@payloadcms/richtext-lexical/lexical/react/LexicalComposerContext';\nimport clsx from 'clsx';\nimport type { BeautifulMentionNode } from 'lexical-beautiful-mentions';\nimport { useMemo } from 'react';\n\nimport {\n  isArgumentElement,\n  isNumericElement,\n  isSelectElement,\n  isTagElement,\n  isTemporalElement,\n  parseICUMessage,\n} from '@/icu';\n\nimport { SelectVariableEditor } from './editors/SelectVariableEditor';\nimport { TagVariableEditor } from './editors/TagVariableEditor';\nimport { NumericVariableEditor } from './pickers/NumericVariableEditor';\nimport { TemporalVariablePicker } from './pickers/TemporalVariablePicker';\nimport styles from './VariableChip.module.css';\n\nconst TEMPORAL_ELEMENTS_FLAG = false;\n\nexport interface VariableChipProps {\n  name: string;\n  label: string;\n  icu: string;\n  nodeKey: NodeKey;\n}\n\n// TODO replace popover with portal below input field\n\nexport function VariableChip({ name, label, icu, nodeKey }: VariableChipProps) {\n  const [editor] = useLexicalComposerContext();\n\n  const handleUpdate = (value: string) => {\n    editor.update(() => {\n      const node = $getNodeByKey(nodeKey) as BeautifulMentionNode | null;\n      if (node) {\n        node.setData({ ...node.getData(), icu: value });\n      }\n    });\n  };\n\n  const element = useMemo(() => {\n    try {\n      const [part] = parseICUMessage(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: ${icu}`, { cause: error });\n    }\n  }, [icu]);\n\n  const isDisabled =\n    isArgumentElement(element) ||\n    (isTemporalElement(element) && !TEMPORAL_ELEMENTS_FLAG);\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger\n        render={\n          <button\n            className={clsx(styles.chip, isDisabled && styles.chipDisabled)}\n            data-icu={icu}\n            data-variable={name}\n            type=\"button\"\n          />\n        }\n      >\n        {/* <VariableIcon type={element.type} className=\"size-4\" /> */}\n        {label}\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Positioner align=\"start\" side=\"bottom\" sideOffset={5}>\n          <Popover.Popup className={styles.popoverContent}>\n            {isNumericElement(element) && (\n              <NumericVariableEditor\n                element={element}\n                onUpdate={handleUpdate}\n              />\n            )}\n            {isSelectElement(element) && (\n              <SelectVariableEditor element={element} onUpdate={handleUpdate} />\n            )}\n            {TEMPORAL_ELEMENTS_FLAG && isTemporalElement(element) && (\n              <TemporalVariablePicker\n                element={element}\n                onUpdate={handleUpdate}\n              />\n            )}\n\n            {isTagElement(element) && (\n              <TagVariableEditor element={element} onUpdate={handleUpdate} />\n            )}\n          </Popover.Popup>\n        </Popover.Positioner>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n}\n"],"names":["Popover","$getNodeByKey","useLexicalComposerContext","clsx","useMemo","isArgumentElement","isNumericElement","isSelectElement","isTagElement","isTemporalElement","parseICUMessage","SelectVariableEditor","TagVariableEditor","NumericVariableEditor","TemporalVariablePicker","styles","TEMPORAL_ELEMENTS_FLAG","VariableChip","name","label","icu","nodeKey","editor","handleUpdate","value","update","node","setData","getData","element","part","Error","error","console","cause","isDisabled","Root","Trigger","render","button","className","chip","chipDisabled","data-icu","data-variable","type","Portal","Positioner","align","side","sideOffset","Popup","popoverContent","onUpdate"],"mappings":"AAAA;;AAEA,SAASA,OAAO,QAAQ,yBAAyB;AAEjD,SAASC,aAAa,QAAQ,uCAAuC;AACrE,SAASC,yBAAyB,QAAQ,oEAAoE;AAC9G,OAAOC,UAAU,OAAO;AAExB,SAASC,OAAO,QAAQ,QAAQ;AAEhC,SACEC,iBAAiB,EACjBC,gBAAgB,EAChBC,eAAe,EACfC,YAAY,EACZC,iBAAiB,EACjBC,eAAe,QACV,QAAQ;AAEf,SAASC,oBAAoB,QAAQ,iCAAiC;AACtE,SAASC,iBAAiB,QAAQ,8BAA8B;AAChE,SAASC,qBAAqB,QAAQ,kCAAkC;AACxE,SAASC,sBAAsB,QAAQ,mCAAmC;AAC1E,OAAOC,YAAY,4BAA4B;AAE/C,MAAMC,yBAAyB;AAS/B,qDAAqD;AAErD,OAAO,SAASC,aAAa,EAAEC,IAAI,EAAEC,KAAK,EAAEC,GAAG,EAAEC,OAAO,EAAqB;IAC3E,MAAM,CAACC,OAAO,GAAGpB;IAEjB,MAAMqB,eAAe,CAACC;QACpBF,OAAOG,MAAM,CAAC;YACZ,MAAMC,OAAOzB,cAAcoB;YAC3B,IAAIK,MAAM;gBACRA,KAAKC,OAAO,CAAC;oBAAE,GAAGD,KAAKE,OAAO,EAAE;oBAAER,KAAKI;gBAAM;YAC/C;QACF;IACF;IAEA,MAAMK,UAAUzB,QAAQ;QACtB,IAAI;YACF,MAAM,CAAC0B,KAAK,GAAGpB,gBAAgBU;YAC/B,IAAI,CAACU,MAAM,MAAM,IAAIC,MAAM;YAC3B,OAAOD;QACT,EAAE,OAAOE,OAAO;YACdC,QAAQD,KAAK,CAACA;YACd,MAAM,IAAID,MAAM,CAAC,aAAa,EAAEX,KAAK,EAAE;gBAAEc,OAAOF;YAAM;QACxD;IACF,GAAG;QAACZ;KAAI;IAER,MAAMe,aACJ9B,kBAAkBwB,YACjBpB,kBAAkBoB,YAAY,CAACb;IAElC,qBACE,MAAChB,QAAQoC,IAAI;;0BACX,KAACpC,QAAQqC,OAAO;gBACdC,sBACE,KAACC;oBACCC,WAAWrC,KAAKY,OAAO0B,IAAI,EAAEN,cAAcpB,OAAO2B,YAAY;oBAC9DC,YAAUvB;oBACVwB,iBAAe1B;oBACf2B,MAAK;;0BAKR1B;;0BAEH,KAACnB,QAAQ8C,MAAM;0BACb,cAAA,KAAC9C,QAAQ+C,UAAU;oBAACC,OAAM;oBAAQC,MAAK;oBAASC,YAAY;8BAC1D,cAAA,MAAClD,QAAQmD,KAAK;wBAACX,WAAWzB,OAAOqC,cAAc;;4BAC5C9C,iBAAiBuB,0BAChB,KAAChB;gCACCgB,SAASA;gCACTwB,UAAU9B;;4BAGbhB,gBAAgBsB,0BACf,KAAClB;gCAAqBkB,SAASA;gCAASwB,UAAU9B;;4BAEnDP,0BAA0BP,kBAAkBoB,0BAC3C,KAACf;gCACCe,SAASA;gCACTwB,UAAU9B;;4BAIbf,aAAaqB,0BACZ,KAACjB;gCAAkBiB,SAASA;gCAASwB,UAAU9B;;;;;;;;AAO7D"}