npm - @intlayer/design-system - Versions diffs - 9.3.0 → 9.3.1 - Mend

@intlayer/design-system 9.3.0 → 9.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (174) hide show

package/dist/esm/components/DictionaryFieldEditor/DictionaryDetails/DictionaryDetailsForm.mjs CHANGED Viewed

@@ -1,16 +1,16 @@
 'use client';
 import { cn } from "../../../utils/cn.mjs";
-import { Loader } from "../../Loader/index.mjs";
-import { Button } from "../../Button/Button.mjs";
-import { Container } from "../../Container/index.mjs";
-import { Checkbox } from "../../Input/Checkbox.mjs";
-import { Input } from "../../Input/Input.mjs";
 import { useSession } from "../../../api/useAuth/useSession.mjs";
 import { useAuditContentDeclarationMetadata } from "../../../api/hooks/ai.mjs";
 import { useGetDictionaries } from "../../../api/hooks/dictionary.mjs";
 import { useGetProjects } from "../../../api/hooks/project.mjs";
 import { useGetTags } from "../../../api/hooks/tag.mjs";
+import { Loader } from "../../Loader/index.mjs";
+import { Button } from "../../Button/Button.mjs";
+import { Container } from "../../Container/index.mjs";
+import { Checkbox } from "../../Input/Checkbox.mjs";
+import { Input } from "../../Input/Input.mjs";
 import { MultiSelect } from "../../Select/Multiselect.mjs";
 import { Select } from "../../Select/Select.mjs";
 import { Pagination } from "../../Pagination/Pagination.mjs";
@@ -28,10 +28,10 @@ import { useForm as useForm$1 } from "../../Form/FormBase.mjs";
 import { Form } from "../../Form/Form.mjs";
 import { useDictionaryDetailsSchema } from "./useDictionaryDetailsSchema.mjs";
 import { useEffect, useMemo, useState } from "react";
-import { WandSparkles } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useIntlayer } from "react-intlayer";
+import { WandSparkles } from "lucide-react";
 import { useEditedContent } from "@intlayer/editor-react";
+import { useIntlayer } from "react-intlayer";
 import { useWatch } from "react-hook-form";
 import { AnimatePresence, motion } from "framer-motion";

package/dist/esm/components/DictionaryFieldEditor/DictionaryFieldEditor.mjs CHANGED Viewed

@@ -11,10 +11,10 @@ import { JSONEditor } from "./JSONEditor.mjs";
 import { SaveForm } from "./SaveForm/SaveForm.mjs";
 import { StructureEditor } from "./StructureEditor.mjs";
 import { useEffect, useState } from "react";
-import { ArrowLeft } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useIntlayer } from "react-intlayer";
+import { ArrowLeft } from "lucide-react";
 import { useConfiguration, useDictionariesRecordActions, useFocusUnmergedDictionary } from "@intlayer/editor-react";
+import { useIntlayer } from "react-intlayer";
 //#region src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx
 const DictionaryFieldEditor = ({ dictionary, onClickDictionaryList, isDarkMode, mode, onDelete, onSave, showReturnButton = true, rightContent }) => {

package/dist/esm/components/DictionaryFieldEditor/KeyPathBreadcrumb.mjs CHANGED Viewed

@@ -4,14 +4,15 @@ import { camelCaseToSentence } from "@intlayer/config/client";
 //#region src/components/DictionaryFieldEditor/KeyPathBreadcrumb.tsx
 const KeyPathBreadcrumb = ({ keyPath, dictionaryKey, onClickKeyPath, locale, color, showDictionaryKey = true }) => {
+	const formattedKeyPath = [...showDictionaryKey ? [{
+		text: camelCaseToSentence(dictionaryKey),
+		onClick: onClickKeyPath ? () => onClickKeyPath([]) : void 0
+	}] : [], ...keyPath.map((el, index) => ({
+		onClick: onClickKeyPath ? () => onClickKeyPath?.(keyPath.slice(0, index + 1)) : void 0,
+		text: camelCaseToSentence(el.key?.toString() ?? "")
+	}))];
 	return /* @__PURE__ */ jsx(Breadcrumb, {
-		links: [...showDictionaryKey ? [{
-			text: camelCaseToSentence(dictionaryKey),
-			onClick: onClickKeyPath ? () => onClickKeyPath([]) : void 0
-		}] : [], ...keyPath.map((el, index) => ({
-			onClick: onClickKeyPath ? () => onClickKeyPath?.(keyPath.slice(0, index + 1)) : void 0,
-			text: camelCaseToSentence(el.key?.toString() ?? "")
-		}))],
+		links: formattedKeyPath,
 		locale,
 		elementType: "location",
 		color

package/dist/esm/components/DictionaryFieldEditor/KeyPathBreadcrumb.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"KeyPathBreadcrumb.mjs","names":[],"sources":["../../../../src/components/DictionaryFieldEditor/KeyPathBreadcrumb.tsx"],"sourcesContent":["import { camelCaseToSentence } from '@intlayer/config/client';\nimport type { Locale } from '@intlayer/types/allLocales';\nimport type { KeyPath } from '@intlayer/types/keyPath';\nimport type { FC } from 'react';\nimport { Breadcrumb, type BreadcrumbLink } from '../Breadcrumb';\nimport type { LinkColor } from '../Link';\n\ntype KeyPathBreadcrumbProps = {\n dictionaryKey: string;\n keyPath: KeyPath[];\n onClickKeyPath?: (keyPath: KeyPath[]) => void;\n locale?: Locale;\n color?: LinkColor \| `${LinkColor}`;\n showDictionaryKey?: boolean;\n};\n\nexport const KeyPathBreadcrumb: FC<KeyPathBreadcrumbProps> = ({\n keyPath,\n dictionaryKey,\n onClickKeyPath,\n locale,\n color,\n showDictionaryKey = true,\n}) => {\n const formattedKeyPath: BreadcrumbLink[] = [\n ...(showDictionaryKey\n ? [\n {\n text: camelCaseToSentence(dictionaryKey),\n onClick: onClickKeyPath ? () => onClickKeyPath([]) : undefined,\n },\n ]\n : []),\n ...keyPath.map((el, index) => ({\n onClick: onClickKeyPath\n ? () =>\n // With keyPath = [{type: NodeTypes.Object, key: '0'}, {type: NodeTypes.Array, key: '0'}, {type: NodeTypes.Object, key: '1'}]\n // If index is 0 -> onFocusKeyPath([{type: NodeTypes.Object, key: '0'}])\n // If index is 1 -> onFocusKeyPath([{type: NodeTypes.Object, key: '0'}, {type: NodeTypes.Array, key: '0'}])\n onClickKeyPath?.(keyPath.slice(0, index + 1))\n : undefined,\n\n text: camelCaseToSentence(el.key?.toString() ?? ''),\n })),\n ];\n\n return (\n <Breadcrumb\n links={formattedKeyPath}\n locale={locale}\n elementType=\"location\"\n color={color}\n />\n );\n};\n"],"mappings":";;;;;AAgBA,MAAa,qBAAiD,EAC5D,SACA,eACA,gBACA,QACA,OACA,oBAAoB,WAChB;~~CAuBJ~~,~~OACE~~,~~oBAAC~~,~~YAAD;EACE~~,~~OAAO,CAvBT,~~GAAI,oBACA,CACE;~~GACE~~,MAAM,oBAAoB,aAAa;~~GACvC~~,SAAS,uBAAuB,eAAe,CAAC,CAAC,IAAI;~~EACvD~~,CACF,IACA,CAAC,GACL,GAAG,QAAQ,KAAK,IAAI,WAAW;~~GAC7B~~,SAAS,uBAKH,iBAAiB,QAAQ,MAAM,GAAG,QAAQ,CAAC,CAAC,IAC9C;~~GAEJ~~,MAAM,oBAAoB,GAAG,KAAK,SAAS,KAAK,EAAE;~~EACpD~~,EAAE,~~CAKsB~~;~~EACd~~;EACR,aAAY;EACL;CACR;AAEL"}
1	+ {"version":3,"file":"KeyPathBreadcrumb.mjs","names":[],"sources":["../../../../src/components/DictionaryFieldEditor/KeyPathBreadcrumb.tsx"],"sourcesContent":["import { camelCaseToSentence } from '@intlayer/config/client';\nimport type { Locale } from '@intlayer/types/allLocales';\nimport type { KeyPath } from '@intlayer/types/keyPath';\nimport type { FC } from 'react';\nimport { Breadcrumb, type BreadcrumbLink } from '../Breadcrumb';\nimport type { LinkColor } from '../Link';\n\ntype KeyPathBreadcrumbProps = {\n dictionaryKey: string;\n keyPath: KeyPath[];\n onClickKeyPath?: (keyPath: KeyPath[]) => void;\n locale?: Locale;\n color?: LinkColor \| `${LinkColor}`;\n showDictionaryKey?: boolean;\n};\n\nexport const KeyPathBreadcrumb: FC<KeyPathBreadcrumbProps> = ({\n keyPath,\n dictionaryKey,\n onClickKeyPath,\n locale,\n color,\n showDictionaryKey = true,\n}) => {\n const formattedKeyPath: BreadcrumbLink[] = [\n ...(showDictionaryKey\n ? [\n {\n text: camelCaseToSentence(dictionaryKey),\n onClick: onClickKeyPath ? () => onClickKeyPath([]) : undefined,\n },\n ]\n : []),\n ...keyPath.map((el, index) => ({\n onClick: onClickKeyPath\n ? () =>\n // With keyPath = [{type: NodeTypes.Object, key: '0'}, {type: NodeTypes.Array, key: '0'}, {type: NodeTypes.Object, key: '1'}]\n // If index is 0 -> onFocusKeyPath([{type: NodeTypes.Object, key: '0'}])\n // If index is 1 -> onFocusKeyPath([{type: NodeTypes.Object, key: '0'}, {type: NodeTypes.Array, key: '0'}])\n onClickKeyPath?.(keyPath.slice(0, index + 1))\n : undefined,\n\n text: camelCaseToSentence(el.key?.toString() ?? ''),\n })),\n ];\n\n return (\n <Breadcrumb\n links={formattedKeyPath}\n locale={locale}\n elementType=\"location\"\n color={color}\n />\n );\n};\n"],"mappings":";;;;;AAgBA,MAAa,qBAAiD,EAC5D,SACA,eACA,gBACA,QACA,OACA,oBAAoB,WAChB;CACJ,MAAM,mBAAqC,CACzC,GAAI,oBACA,CACE;EACE,MAAM,oBAAoB,aAAa;EACvC,SAAS,uBAAuB,eAAe,CAAC,CAAC,IAAI;CACvD,CACF,IACA,CAAC,GACL,GAAG,QAAQ,KAAK,IAAI,WAAW;EAC7B,SAAS,uBAKH,iBAAiB,QAAQ,MAAM,GAAG,QAAQ,CAAC,CAAC,IAC9C;EAEJ,MAAM,oBAAoB,GAAG,KAAK,SAAS,KAAK,EAAE;CACpD,EAAE,CACJ;CAEA,OACE,oBAAC,YAAD;EACE,OAAO;EACC;EACR,aAAY;EACL;CACR;AAEL"}

package/dist/esm/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.mjs CHANGED Viewed

@@ -3,10 +3,10 @@ import { Accordion } from "../../Accordion/Accordion.mjs";
 import { useLocaleSwitcherContent } from "../../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";
 import { getIsEditableSection } from "../getIsEditableSection.mjs";
 import { useState } from "react";
-import { ChevronRight, Plus } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useIntlayer } from "react-intlayer";
+import { ChevronRight, Plus } from "lucide-react";
 import { useEditedContentActions, useEditorLocale, useFocusUnmergedDictionary } from "@intlayer/editor-react";
+import { useIntlayer } from "react-intlayer";
 import { getContentNodeByKeyPath, getEmptyNode, getNodeType } from "@intlayer/core/dictionaryManipulator";
 import * as NodeTypes from "@intlayer/types/nodeType";
 import { isSameKeyPath } from "@intlayer/core/utils";
@@ -31,7 +31,8 @@ const GatedAccordion = ({ children, onToggle, ...props }) => {
 };
 const NavigationViewNode = ({ section: sectionProp, keyPath, dictionary }) => {
 	const { selectedLocales } = useLocaleSwitcherContent();
-	const section = getContentNodeByKeyPath(sectionProp, keyPath, useEditorLocale());
+	const currentLocale = useEditorLocale();
+	const section = getContentNodeByKeyPath(sectionProp, keyPath, currentLocale);
 	const { addEditedContent } = useEditedContentActions();
 	const { setFocusedContentKeyPath, focusedContent } = useFocusUnmergedDictionary();
 	const { addNewElement, goToField } = useIntlayer("navigation-view");
@@ -139,14 +140,16 @@ const NavigationViewNode = ({ section: sectionProp, keyPath, dictionary }) => {
 				dictionary
 			});
 		}
+		const sectionArray = Object.keys(section);
 		return /* @__PURE__ */ jsx("div", {
 			className: "flex w-full max-w-full flex-col justify-between gap-2",
-			children: Object.keys(section).map((key) => {
+			children: sectionArray.map((key) => {
 				const childKeyPath = [...keyPath, {
 					type: NodeTypes.OBJECT,
 					key
 				}];
-				if (getIsEditableSection(getContentNodeByKeyPath(sectionProp, childKeyPath))) return /* @__PURE__ */ jsx(Button, {
+				const subSection = getContentNodeByKeyPath(sectionProp, childKeyPath);
+				if (getIsEditableSection(subSection)) return /* @__PURE__ */ jsx(Button, {
 					label: `${goToField.label.value} ${key}`,
 					isActive: getIsSelected(childKeyPath),
 					variant: "hoverable",

package/dist/esm/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NavigationViewNode.mjs","names":[],"sources":["../../../../../src/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.tsx"],"sourcesContent":["import { Accordion, type AccordionProps } from '@components/Accordion';\nimport { Button } from '@components/Button';\nimport { useLocaleSwitcherContent } from '@components/LocaleSwitcherContentDropDown';\nimport { camelCaseToSentence } from '@intlayer/config/client';\nimport {\n getContentNodeByKeyPath,\n getEmptyNode,\n getNodeType,\n} from '@intlayer/core/dictionaryManipulator';\nimport { isSameKeyPath } from '@intlayer/core/utils';\nimport {\n useEditedContentActions,\n useEditorLocale,\n useFocusUnmergedDictionary,\n} from '@intlayer/editor-react';\nimport type { LocalDictionaryId } from '@intlayer/types/dictionary';\nimport type { KeyPath } from '@intlayer/types/keyPath';\nimport * as NodeTypes from '@intlayer/types/nodeType';\nimport type { ContentNode, Dictionary } from 'intlayer';\nimport { ChevronRight, Plus } from 'lucide-react';\nimport { type FC, type ReactNode, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { getIsEditableSection } from '../getIsEditableSection';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\ntype GatedAccordionProps = AccordionProps & { children: ReactNode };\n\n// Renders children only after the accordion is first opened (mount-once pattern).\n// Prevents the entire recursive subtree from mounting on initial render.\nconst GatedAccordion: FC<GatedAccordionProps> = ({\n children,\n onToggle,\n ...props\n}) => {\n const [hasOpened, setHasOpened] = useState(false);\n return (\n <Accordion\n {...props}\n onToggle={(isOpen) => {\n if (isOpen && !hasOpened) setHasOpened(true);\n onToggle?.(isOpen);\n }}\n >\n {hasOpened ? children : null}\n </Accordion>\n );\n};\n\nexport type NodeWrapperProps = {\n keyPath: KeyPath[];\n section: ContentNode;\n dictionary: Dictionary;\n};\n\nexport const NavigationViewNode: FC<NodeWrapperProps> = ({\n section: sectionProp,\n keyPath,\n dictionary,\n}) => {\n const { selectedLocales } = useLocaleSwitcherContent();\n\n const currentLocale = useEditorLocale();\n const section = getContentNodeByKeyPath(sectionProp, keyPath, currentLocale);\n const { addEditedContent } = useEditedContentActions();\n const { setFocusedContentKeyPath, focusedContent } =\n useFocusUnmergedDictionary();\n const { addNewElement, goToField } = useIntlayer('navigation-view');\n const nodeType = getNodeType(section);\n const getIsSelected = (keyPath: KeyPath[]) =>\n (focusedContent?.keyPath?.length ?? 0) > 0 &&\n isSameKeyPath(keyPath, focusedContent?.keyPath ?? []);\n const isEditableSubSection = getIsEditableSection(section);\n\n if (!section) return <></>;\n\n if (isEditableSubSection) {\n return (\n <Button\n label={goToField.label.value}\n variant=\"hoverable\"\n color=\"text\"\n className=\"w-full\"\n onClick={() => setFocusedContentKeyPath(keyPath)}\n IconRight={ChevronRight}\n >\n {camelCaseToSentence(keyPath[keyPath.length - 1]?.key as string)}\n </Button>\n );\n }\n\n if (typeof section === 'object') {\n if (nodeType === NodeTypes.REACT_NODE) {\n return <>React Node</>;\n }\n\n if (nodeType === NodeTypes.TRANSLATION) {\n return (\n <div className=\"flex flex-col justify-between gap-2\">\n {selectedLocales.map((translationKey) => {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: NodeTypes.TRANSLATION, key: translationKey },\n ];\n\n return (\n <NavigationViewNode\n key={translationKey}\n keyPath={childKeyPath}\n section={sectionProp}\n dictionary={dictionary}\n />\n );\n })}\n </div>\n );\n }\n\n if (\n nodeType === NodeTypes.ENUMERATION \|\|\n nodeType === NodeTypes.PLURAL \|\|\n nodeType === NodeTypes.CONDITION\n ) {\n return (\n <div className=\"flex flex-col justify-between gap-2\">\n {Object.keys(\n (section as any)[nodeType as unknown as keyof typeof section]\n ).map((key) => {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: nodeType, key },\n ];\n\n return (\n <NavigationViewNode\n key={key}\n keyPath={childKeyPath}\n section={sectionProp}\n dictionary={dictionary}\n />\n );\n })}\n </div>\n );\n }\n\n if (nodeType === NodeTypes.ARRAY) {\n return (\n <div className=\"flex flex-col justify-between gap-2\">\n {(section as unknown as ContentNode[]).map((subSection, index) => {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: NodeTypes.ARRAY, key: index },\n ];\n\n const isEditableSubSection = getIsEditableSection(subSection);\n\n if (isEditableSubSection) {\n return (\n <Button\n key={JSON.stringify(childKeyPath)}\n label={`${goToField.label.value} ${index}`}\n variant=\"hoverable\"\n color=\"text\"\n className=\"w-full\"\n onClick={() => setFocusedContentKeyPath(childKeyPath)}\n IconRight={ChevronRight}\n isActive={getIsSelected(childKeyPath)}\n >\n Item {index}\n </Button>\n );\n }\n\n return (\n <GatedAccordion\n key={JSON.stringify(childKeyPath)}\n label={`${goToField.label.value} ${index}`}\n header={`Item ${index}`}\n isActive={getIsSelected(childKeyPath)}\n onClick={() => setFocusedContentKeyPath(childKeyPath)}\n >\n <div className=\"mt-2 flex w-full max-w-full\">\n <div className=\"flex-1 pl-10\">\n <NavigationViewNode\n keyPath={childKeyPath}\n section={sectionProp}\n dictionary={dictionary}\n />\n </div>\n </div>\n </GatedAccordion>\n );\n })}\n\n <Button\n label={addNewElement.label.value}\n variant=\"hoverable\"\n color=\"neutral\"\n textAlign=\"left\"\n onClick={() => {\n const newKeyPath: KeyPath[] = [\n ...keyPath,\n {\n type: NodeTypes.ARRAY,\n key: (section as unknown as ContentNode[]).length,\n },\n ];\n const sectionArray = section as unknown as ContentNode[];\n const emptySectionEl =\n getEmptyNode(\n sectionArray[\n (sectionArray.length - 1) as keyof typeof sectionArray\n ] as ContentNode\n ) ?? '';\n addEditedContent(\n dictionary.localId as LocalDictionaryId,\n emptySectionEl,\n newKeyPath,\n false\n );\n setFocusedContentKeyPath(newKeyPath);\n }}\n Icon={Plus}\n >\n {addNewElement.text}\n </Button>\n </div>\n );\n }\n\n if (typeof section.nodeType === 'string') {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: section.nodeType } as KeyPath,\n ];\n\n return (\n <NavigationViewNode\n keyPath={childKeyPath}\n section={sectionProp}\n dictionary={dictionary}\n />\n );\n }\n\n const sectionArray = Object.keys(section);\n return (\n <div className=\"flex w-full max-w-full flex-col justify-between gap-2\">\n {sectionArray.map((key) => {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: NodeTypes.OBJECT, key },\n ];\n\n const subSection = getContentNodeByKeyPath(sectionProp, childKeyPath);\n const isEditableSubSection = getIsEditableSection(subSection);\n\n if (isEditableSubSection) {\n return (\n <Button\n label={`${goToField.label.value} ${key}`}\n key={key}\n isActive={getIsSelected(childKeyPath)}\n variant=\"hoverable\"\n color=\"text\"\n className=\"w-full\"\n onClick={() => setFocusedContentKeyPath(childKeyPath)}\n IconRight={ChevronRight}\n >\n {camelCaseToSentence(key)}\n </Button>\n );\n }\n\n return (\n <GatedAccordion\n key={key}\n label={`${goToField.label.value} ${key}`}\n isActive={getIsSelected(childKeyPath)}\n onClick={() => setFocusedContentKeyPath(childKeyPath)}\n header={camelCaseToSentence(key)}\n >\n <div className=\"mt-2 flex w-full max-w-full\">\n <div className=\"flex-1 pl-10\">\n <NavigationViewNode\n keyPath={childKeyPath}\n section={sectionProp}\n dictionary={dictionary}\n />\n </div>\n </div>\n </GatedAccordion>\n );\n })}\n </div>\n );\n }\n\n return (\n <>\n Error loading section --\n {nodeType}\n --\n {JSON.stringify(section)}\n --\n {JSON.stringify(keyPath)}\n </>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"NavigationViewNode.mjs","names":[],"sources":["../../../../../src/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.tsx"],"sourcesContent":["import { Accordion, type AccordionProps } from '@components/Accordion';\nimport { Button } from '@components/Button';\nimport { useLocaleSwitcherContent } from '@components/LocaleSwitcherContentDropDown';\nimport { camelCaseToSentence } from '@intlayer/config/client';\nimport {\n getContentNodeByKeyPath,\n getEmptyNode,\n getNodeType,\n} from '@intlayer/core/dictionaryManipulator';\nimport { isSameKeyPath } from '@intlayer/core/utils';\nimport {\n useEditedContentActions,\n useEditorLocale,\n useFocusUnmergedDictionary,\n} from '@intlayer/editor-react';\nimport type { LocalDictionaryId } from '@intlayer/types/dictionary';\nimport type { KeyPath } from '@intlayer/types/keyPath';\nimport * as NodeTypes from '@intlayer/types/nodeType';\nimport type { ContentNode, Dictionary } from 'intlayer';\nimport { ChevronRight, Plus } from 'lucide-react';\nimport { type FC, type ReactNode, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { getIsEditableSection } from '../getIsEditableSection';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\ntype GatedAccordionProps = AccordionProps & { children: ReactNode };\n\n// Renders children only after the accordion is first opened (mount-once pattern).\n// Prevents the entire recursive subtree from mounting on initial render.\nconst GatedAccordion: FC<GatedAccordionProps> = ({\n children,\n onToggle,\n ...props\n}) => {\n const [hasOpened, setHasOpened] = useState(false);\n return (\n <Accordion\n {...props}\n onToggle={(isOpen) => {\n if (isOpen && !hasOpened) setHasOpened(true);\n onToggle?.(isOpen);\n }}\n >\n {hasOpened ? children : null}\n </Accordion>\n );\n};\n\nexport type NodeWrapperProps = {\n keyPath: KeyPath[];\n section: ContentNode;\n dictionary: Dictionary;\n};\n\nexport const NavigationViewNode: FC<NodeWrapperProps> = ({\n section: sectionProp,\n keyPath,\n dictionary,\n}) => {\n const { selectedLocales } = useLocaleSwitcherContent();\n\n const currentLocale = useEditorLocale();\n const section = getContentNodeByKeyPath(sectionProp, keyPath, currentLocale);\n const { addEditedContent } = useEditedContentActions();\n const { setFocusedContentKeyPath, focusedContent } =\n useFocusUnmergedDictionary();\n const { addNewElement, goToField } = useIntlayer('navigation-view');\n const nodeType = getNodeType(section);\n const getIsSelected = (keyPath: KeyPath[]) =>\n (focusedContent?.keyPath?.length ?? 0) > 0 &&\n isSameKeyPath(keyPath, focusedContent?.keyPath ?? []);\n const isEditableSubSection = getIsEditableSection(section);\n\n if (!section) return <></>;\n\n if (isEditableSubSection) {\n return (\n <Button\n label={goToField.label.value}\n variant=\"hoverable\"\n color=\"text\"\n className=\"w-full\"\n onClick={() => setFocusedContentKeyPath(keyPath)}\n IconRight={ChevronRight}\n >\n {camelCaseToSentence(keyPath[keyPath.length - 1]?.key as string)}\n </Button>\n );\n }\n\n if (typeof section === 'object') {\n if (nodeType === NodeTypes.REACT_NODE) {\n return <>React Node</>;\n }\n\n if (nodeType === NodeTypes.TRANSLATION) {\n return (\n <div className=\"flex flex-col justify-between gap-2\">\n {selectedLocales.map((translationKey) => {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: NodeTypes.TRANSLATION, key: translationKey },\n ];\n\n return (\n <NavigationViewNode\n key={translationKey}\n keyPath={childKeyPath}\n section={sectionProp}\n dictionary={dictionary}\n />\n );\n })}\n </div>\n );\n }\n\n if (\n nodeType === NodeTypes.ENUMERATION \|\|\n nodeType === NodeTypes.PLURAL \|\|\n nodeType === NodeTypes.CONDITION\n ) {\n return (\n <div className=\"flex flex-col justify-between gap-2\">\n {Object.keys(\n (section as any)[nodeType as unknown as keyof typeof section]\n ).map((key) => {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: nodeType, key },\n ];\n\n return (\n <NavigationViewNode\n key={key}\n keyPath={childKeyPath}\n section={sectionProp}\n dictionary={dictionary}\n />\n );\n })}\n </div>\n );\n }\n\n if (nodeType === NodeTypes.ARRAY) {\n return (\n <div className=\"flex flex-col justify-between gap-2\">\n {(section as unknown as ContentNode[]).map((subSection, index) => {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: NodeTypes.ARRAY, key: index },\n ];\n\n const isEditableSubSection = getIsEditableSection(subSection);\n\n if (isEditableSubSection) {\n return (\n <Button\n key={JSON.stringify(childKeyPath)}\n label={`${goToField.label.value} ${index}`}\n variant=\"hoverable\"\n color=\"text\"\n className=\"w-full\"\n onClick={() => setFocusedContentKeyPath(childKeyPath)}\n IconRight={ChevronRight}\n isActive={getIsSelected(childKeyPath)}\n >\n Item {index}\n </Button>\n );\n }\n\n return (\n <GatedAccordion\n key={JSON.stringify(childKeyPath)}\n label={`${goToField.label.value} ${index}`}\n header={`Item ${index}`}\n isActive={getIsSelected(childKeyPath)}\n onClick={() => setFocusedContentKeyPath(childKeyPath)}\n >\n <div className=\"mt-2 flex w-full max-w-full\">\n <div className=\"flex-1 pl-10\">\n <NavigationViewNode\n keyPath={childKeyPath}\n section={sectionProp}\n dictionary={dictionary}\n />\n </div>\n </div>\n </GatedAccordion>\n );\n })}\n\n <Button\n label={addNewElement.label.value}\n variant=\"hoverable\"\n color=\"neutral\"\n textAlign=\"left\"\n onClick={() => {\n const newKeyPath: KeyPath[] = [\n ...keyPath,\n {\n type: NodeTypes.ARRAY,\n key: (section as unknown as ContentNode[]).length,\n },\n ];\n const sectionArray = section as unknown as ContentNode[];\n const emptySectionEl =\n getEmptyNode(\n sectionArray[\n (sectionArray.length - 1) as keyof typeof sectionArray\n ] as ContentNode\n ) ?? '';\n addEditedContent(\n dictionary.localId as LocalDictionaryId,\n emptySectionEl,\n newKeyPath,\n false\n );\n setFocusedContentKeyPath(newKeyPath);\n }}\n Icon={Plus}\n >\n {addNewElement.text}\n </Button>\n </div>\n );\n }\n\n if (typeof section.nodeType === 'string') {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: section.nodeType } as KeyPath,\n ];\n\n return (\n <NavigationViewNode\n keyPath={childKeyPath}\n section={sectionProp}\n dictionary={dictionary}\n />\n );\n }\n\n const sectionArray = Object.keys(section);\n return (\n <div className=\"flex w-full max-w-full flex-col justify-between gap-2\">\n {sectionArray.map((key) => {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: NodeTypes.OBJECT, key },\n ];\n\n const subSection = getContentNodeByKeyPath(sectionProp, childKeyPath);\n const isEditableSubSection = getIsEditableSection(subSection);\n\n if (isEditableSubSection) {\n return (\n <Button\n label={`${goToField.label.value} ${key}`}\n key={key}\n isActive={getIsSelected(childKeyPath)}\n variant=\"hoverable\"\n color=\"text\"\n className=\"w-full\"\n onClick={() => setFocusedContentKeyPath(childKeyPath)}\n IconRight={ChevronRight}\n >\n {camelCaseToSentence(key)}\n </Button>\n );\n }\n\n return (\n <GatedAccordion\n key={key}\n label={`${goToField.label.value} ${key}`}\n isActive={getIsSelected(childKeyPath)}\n onClick={() => setFocusedContentKeyPath(childKeyPath)}\n header={camelCaseToSentence(key)}\n >\n <div className=\"mt-2 flex w-full max-w-full\">\n <div className=\"flex-1 pl-10\">\n <NavigationViewNode\n keyPath={childKeyPath}\n section={sectionProp}\n dictionary={dictionary}\n />\n </div>\n </div>\n </GatedAccordion>\n );\n })}\n </div>\n );\n }\n\n return (\n <>\n Error loading section --\n {nodeType}\n --\n {JSON.stringify(section)}\n --\n {JSON.stringify(keyPath)}\n </>\n );\n};\n"],"mappings":"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"}

package/dist/esm/components/DictionaryFieldEditor/NodeTypeSelector.mjs CHANGED Viewed

@@ -10,7 +10,8 @@ import * as NodeTypes from "@intlayer/types/nodeType";
 //#region src/components/DictionaryFieldEditor/NodeTypeSelector.tsx
 const NodeTypeSelector = ({ section, onValueChange: onValueChangeProp }) => {
 	const { multilingual, text, number, boolean, node, array, enumeration, plural, triggerPlaceHolder, nest, gender, select, condition, markdown, insertion, reactNode, file } = useIntlayer("node-type-selector");
-	const [keyType, setKeyType] = useState(getNodeType(section));
+	const nodeType = getNodeType(section);
+	const [keyType, setKeyType] = useState(nodeType);
 	const onValueChange = (keyType) => {
 		setKeyType(keyType);
 		onValueChangeProp(keyType);

package/dist/esm/components/DictionaryFieldEditor/NodeTypeSelector.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NodeTypeSelector.mjs","names":[],"sources":["../../../../src/components/DictionaryFieldEditor/NodeTypeSelector.tsx"],"sourcesContent":["'use client';\n\nimport { getNodeType } from '@intlayer/core/dictionaryManipulator';\nimport type { ContentNode } from '@intlayer/types/dictionary';\nimport type { NodeType } from '@intlayer/types/nodeType';\nimport * as NodeTypes from '@intlayer/types/nodeType';\nimport { type FC, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Select } from '../Select';\n\ntype NodeTypeSelectorProps = {\n section: ContentNode;\n onValueChange: (keyType: NodeType) => void;\n};\n\nexport const NodeTypeSelector: FC<NodeTypeSelectorProps> = ({\n section,\n onValueChange: onValueChangeProp,\n}) => {\n const {\n multilingual,\n text,\n number,\n boolean,\n node,\n array,\n enumeration,\n plural,\n triggerPlaceHolder,\n nest,\n gender,\n select,\n condition,\n markdown,\n insertion,\n reactNode,\n file,\n } = useIntlayer('node-type-selector');\n const nodeType = getNodeType(section);\n const [keyType, setKeyType] = useState<NodeType>(nodeType);\n\n const onValueChange = (keyType: NodeType) => {\n setKeyType(keyType);\n onValueChangeProp(keyType);\n };\n\n return (\n <Select value={keyType} onValueChange={onValueChange}>\n <Select.Trigger>\n <Select.Value placeholder={triggerPlaceHolder} />\n </Select.Trigger>\n <Select.Content>\n <Select.Item value={NodeTypes.TRANSLATION}>{multilingual}</Select.Item>\n <Select.Item value={NodeTypes.TEXT}>{text}</Select.Item>\n <Select.Item value={NodeTypes.NUMBER}>{number}</Select.Item>\n <Select.Item value={NodeTypes.BOOLEAN}>{boolean}</Select.Item>\n <Select.Item value={NodeTypes.OBJECT}>{node}</Select.Item>\n <Select.Item value={NodeTypes.ARRAY}>{array}</Select.Item>\n <Select.Item value={NodeTypes.ENUMERATION}>{enumeration}</Select.Item>\n <Select.Item value={NodeTypes.PLURAL}>{plural}</Select.Item>\n <Select.Item value={NodeTypes.GENDER}>{gender}</Select.Item>\n <Select.Item value={NodeTypes.SELECT}>{select}</Select.Item>\n <Select.Item value={NodeTypes.INSERTION}>{insertion}</Select.Item>\n <Select.Item value={NodeTypes.MARKDOWN}>{markdown}</Select.Item>\n <Select.Item value={NodeTypes.NESTED}>{nest}</Select.Item>\n <Select.Item value={NodeTypes.CONDITION}>{condition}</Select.Item>\n <Select.Item value={NodeTypes.REACT_NODE} disabled>\n {reactNode}\n </Select.Item>\n <Select.Item value={NodeTypes.FILE}>{file}</Select.Item>\n </Select.Content>\n </Select>\n );\n};\n"],"mappings":";;;;;;;;;;AAeA,MAAa,oBAA+C,EAC1D,SACA,eAAe,wBACX;CACJ,MAAM,EACJ,cACA,MACA,QACA,SACA,MACA,OACA,aACA,QACA,oBACA,MACA,QACA,QACA,WACA,UACA,WACA,WACA,SACE,YAAY,oBAAoB;~~CAEpC~~,MAAM,CAAC,SAAS,cAAc,~~SADb~~,~~YAAY,OAC2B,CAAC~~;CAEzD,MAAM,iBAAiB,YAAsB;EAC3C,WAAW,OAAO;EAClB,kBAAkB,OAAO;CAC3B;CAEA,OACE,qBAAC,QAAD;EAAQ,OAAO;EAAwB;YAAvC,CACE,oBAAC,OAAO,SAAR,YACE,oBAAC,OAAO,OAAR,EAAc,aAAa,mBAAqB,GAClC,IAChB,qBAAC,OAAO,SAAR;GACE,oBAAC,OAAO,MAAR;IAAa,OAAO,UAAU;cAAc;GAA0B;GACtE,oBAAC,OAAO,MAAR;IAAa,OAAO,UAAU;cAAO;GAAkB;GACvD,oBAAC,OAAO,MAAR;IAAa,OAAO,UAAU;cAAS;GAAoB;GAC3D,oBAAC,OAAO,MAAR;IAAa,OAAO,UAAU;cAAU;GAAqB;GAC7D,oBAAC,OAAO,MAAR;IAAa,OAAO,UAAU;cAAS;GAAkB;GACzD,oBAAC,OAAO,MAAR;IAAa,OAAO,UAAU;cAAQ;GAAmB;GACzD,oBAAC,OAAO,MAAR;IAAa,OAAO,UAAU;cAAc;GAAyB;GACrE,oBAAC,OAAO,MAAR;IAAa,OAAO,UAAU;cAAS;GAAoB;GAC3D,oBAAC,OAAO,MAAR;IAAa,OAAO,UAAU;cAAS;GAAoB;GAC3D,oBAAC,OAAO,MAAR;IAAa,OAAO,UAAU;cAAS;GAAoB;GAC3D,oBAAC,OAAO,MAAR;IAAa,OAAO,UAAU;cAAY;GAAuB;GACjE,oBAAC,OAAO,MAAR;IAAa,OAAO,UAAU;cAAW;GAAsB;GAC/D,oBAAC,OAAO,MAAR;IAAa,OAAO,UAAU;cAAS;GAAkB;GACzD,oBAAC,OAAO,MAAR;IAAa,OAAO,UAAU;cAAY;GAAuB;GACjE,oBAAC,OAAO,MAAR;IAAa,OAAO,UAAU;IAAY;cACvC;GACU;GACb,oBAAC,OAAO,MAAR;IAAa,OAAO,UAAU;cAAO;GAAkB;EACzC,IACV;;AAEZ"}
1	+ {"version":3,"file":"NodeTypeSelector.mjs","names":[],"sources":["../../../../src/components/DictionaryFieldEditor/NodeTypeSelector.tsx"],"sourcesContent":["'use client';\n\nimport { getNodeType } from '@intlayer/core/dictionaryManipulator';\nimport type { ContentNode } from '@intlayer/types/dictionary';\nimport type { NodeType } from '@intlayer/types/nodeType';\nimport * as NodeTypes from '@intlayer/types/nodeType';\nimport { type FC, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Select } from '../Select';\n\ntype NodeTypeSelectorProps = {\n section: ContentNode;\n onValueChange: (keyType: NodeType) => void;\n};\n\nexport const NodeTypeSelector: FC<NodeTypeSelectorProps> = ({\n section,\n onValueChange: onValueChangeProp,\n}) => {\n const {\n multilingual,\n text,\n number,\n boolean,\n node,\n array,\n enumeration,\n plural,\n triggerPlaceHolder,\n nest,\n gender,\n select,\n condition,\n markdown,\n insertion,\n reactNode,\n file,\n } = useIntlayer('node-type-selector');\n const nodeType = getNodeType(section);\n const [keyType, setKeyType] = useState<NodeType>(nodeType);\n\n const onValueChange = (keyType: NodeType) => {\n setKeyType(keyType);\n onValueChangeProp(keyType);\n };\n\n return (\n <Select value={keyType} onValueChange={onValueChange}>\n <Select.Trigger>\n <Select.Value placeholder={triggerPlaceHolder} />\n </Select.Trigger>\n <Select.Content>\n <Select.Item value={NodeTypes.TRANSLATION}>{multilingual}</Select.Item>\n <Select.Item value={NodeTypes.TEXT}>{text}</Select.Item>\n <Select.Item value={NodeTypes.NUMBER}>{number}</Select.Item>\n <Select.Item value={NodeTypes.BOOLEAN}>{boolean}</Select.Item>\n <Select.Item value={NodeTypes.OBJECT}>{node}</Select.Item>\n <Select.Item value={NodeTypes.ARRAY}>{array}</Select.Item>\n <Select.Item value={NodeTypes.ENUMERATION}>{enumeration}</Select.Item>\n <Select.Item value={NodeTypes.PLURAL}>{plural}</Select.Item>\n <Select.Item value={NodeTypes.GENDER}>{gender}</Select.Item>\n <Select.Item value={NodeTypes.SELECT}>{select}</Select.Item>\n <Select.Item value={NodeTypes.INSERTION}>{insertion}</Select.Item>\n <Select.Item value={NodeTypes.MARKDOWN}>{markdown}</Select.Item>\n <Select.Item value={NodeTypes.NESTED}>{nest}</Select.Item>\n <Select.Item value={NodeTypes.CONDITION}>{condition}</Select.Item>\n <Select.Item value={NodeTypes.REACT_NODE} disabled>\n {reactNode}\n </Select.Item>\n <Select.Item value={NodeTypes.FILE}>{file}</Select.Item>\n </Select.Content>\n </Select>\n );\n};\n"],"mappings":";;;;;;;;;;AAeA,MAAa,oBAA+C,EAC1D,SACA,eAAe,wBACX;CACJ,MAAM,EACJ,cACA,MACA,QACA,SACA,MACA,OACA,aACA,QACA,oBACA,MACA,QACA,QACA,WACA,UACA,WACA,WACA,SACE,YAAY,oBAAoB;CACpC,MAAM,WAAW,YAAY,OAAO;CACpC,MAAM,CAAC,SAAS,cAAc,SAAmB,QAAQ;CAEzD,MAAM,iBAAiB,YAAsB;EAC3C,WAAW,OAAO;EAClB,kBAAkB,OAAO;CAC3B;CAEA,OACE,qBAAC,QAAD;EAAQ,OAAO;EAAwB;YAAvC,CACE,oBAAC,OAAO,SAAR,YACE,oBAAC,OAAO,OAAR,EAAc,aAAa,mBAAqB,GAClC,IAChB,qBAAC,OAAO,SAAR;GACE,oBAAC,OAAO,MAAR;IAAa,OAAO,UAAU;cAAc;GAA0B;GACtE,oBAAC,OAAO,MAAR;IAAa,OAAO,UAAU;cAAO;GAAkB;GACvD,oBAAC,OAAO,MAAR;IAAa,OAAO,UAAU;cAAS;GAAoB;GAC3D,oBAAC,OAAO,MAAR;IAAa,OAAO,UAAU;cAAU;GAAqB;GAC7D,oBAAC,OAAO,MAAR;IAAa,OAAO,UAAU;cAAS;GAAkB;GACzD,oBAAC,OAAO,MAAR;IAAa,OAAO,UAAU;cAAQ;GAAmB;GACzD,oBAAC,OAAO,MAAR;IAAa,OAAO,UAAU;cAAc;GAAyB;GACrE,oBAAC,OAAO,MAAR;IAAa,OAAO,UAAU;cAAS;GAAoB;GAC3D,oBAAC,OAAO,MAAR;IAAa,OAAO,UAAU;cAAS;GAAoB;GAC3D,oBAAC,OAAO,MAAR;IAAa,OAAO,UAAU;cAAS;GAAoB;GAC3D,oBAAC,OAAO,MAAR;IAAa,OAAO,UAAU;cAAY;GAAuB;GACjE,oBAAC,OAAO,MAAR;IAAa,OAAO,UAAU;cAAW;GAAsB;GAC/D,oBAAC,OAAO,MAAR;IAAa,OAAO,UAAU;cAAS;GAAkB;GACzD,oBAAC,OAAO,MAAR;IAAa,OAAO,UAAU;cAAY;GAAuB;GACjE,oBAAC,OAAO,MAAR;IAAa,OAAO,UAAU;IAAY;cACvC;GACU;GACb,oBAAC,OAAO,MAAR;IAAa,OAAO,UAAU;cAAO;GAAkB;EACzC,IACV;;AAEZ"}

package/dist/esm/components/DictionaryFieldEditor/SaveForm/SaveForm.mjs CHANGED Viewed

@@ -1,17 +1,17 @@
 'use client';
 import { cn } from "../../../utils/cn.mjs";
-import { Button } from "../../Button/Button.mjs";
 import { useSession } from "../../../api/useAuth/useSession.mjs";
 import { useAuth } from "../../../api/useAuth/useAuth.mjs";
 import { useDeleteDictionary, usePushDictionaries } from "../../../api/hooks/dictionary.mjs";
 import { useWriteDictionary } from "../../../api/hooks/editor.mjs";
+import { Button } from "../../Button/Button.mjs";
 import { Modal } from "../../Modal/Modal.mjs";
 import { useState } from "react";
-import { ArrowUpFromLine, Download, RotateCcw, Save, Trash } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useIntlayer } from "react-intlayer";
+import { ArrowUpFromLine, Download, RotateCcw, Save, Trash } from "lucide-react";
 import { useDictionariesRecordActions, useEditedContent } from "@intlayer/editor-react";
+import { useIntlayer } from "react-intlayer";
 //#region src/components/DictionaryFieldEditor/SaveForm/SaveForm.tsx
 const SaveForm = ({ dictionary, mode, className, onDelete, onSave, ...props }) => {

package/dist/esm/components/DictionaryFieldEditor/StructureEditor.mjs CHANGED Viewed

@@ -8,8 +8,9 @@ import { useEditedContent } from "@intlayer/editor-react";
 const StructureEditor = ({ dictionary }) => {
 	const { content, localId } = dictionary;
 	const { editedContent } = useEditedContent();
+	const initialSection = typeof editedContent?.[localId]?.content === "undefined" ? content : editedContent?.[localId]?.content;
 	return /* @__PURE__ */ jsx(NodeView, {
-		section: typeof editedContent?.[localId]?.content === "undefined" ? content : editedContent?.[localId]?.content,
+		section: initialSection,
 		keyPath: [],
 		dictionaryLocalId: localId
 	});

package/dist/esm/components/DictionaryFieldEditor/StructureEditor.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StructureEditor.mjs","names":[],"sources":["../../../../src/components/DictionaryFieldEditor/StructureEditor.tsx"],"sourcesContent":["'use client';\n\nimport { useEditedContent } from '@intlayer/editor-react';\nimport type { Dictionary } from '@intlayer/types/dictionary';\nimport type { FC } from 'react';\nimport { NodeView } from './StructureView/StructureView';\n\ntype NodeEditorProps = {\n dictionary: Dictionary;\n};\n\nexport const StructureEditor: FC<NodeEditorProps> = ({ dictionary }) => {\n const { content, localId } = dictionary;\n\n const { editedContent } = useEditedContent();\n const initialSection =\n typeof editedContent?.[localId!]?.content === 'undefined'\n ? content\n : editedContent?.[localId!]?.content;\n\n return (\n <NodeView\n section={initialSection}\n keyPath={[]}\n dictionaryLocalId={localId!}\n />\n );\n};\n"],"mappings":";;;;;;;AAWA,MAAa,mBAAwC,EAAE,iBAAiB;CACtE,MAAM,EAAE,SAAS,YAAY;CAE7B,MAAM,EAAE,kBAAkB,iBAAiB;~~CAM3C~~,~~OACE~~,~~oBAAC~~,~~UAAD;EACE,SANF,~~OAAO,gBAAgB,QAAS,EAAE,YAAY,cAC1C,UACA,gBAAgB,QAAS,EAAE;~~EAK7B~~,SAAS,CAAC;EACV,mBAAmB;CACpB;AAEL"}
1	+ {"version":3,"file":"StructureEditor.mjs","names":[],"sources":["../../../../src/components/DictionaryFieldEditor/StructureEditor.tsx"],"sourcesContent":["'use client';\n\nimport { useEditedContent } from '@intlayer/editor-react';\nimport type { Dictionary } from '@intlayer/types/dictionary';\nimport type { FC } from 'react';\nimport { NodeView } from './StructureView/StructureView';\n\ntype NodeEditorProps = {\n dictionary: Dictionary;\n};\n\nexport const StructureEditor: FC<NodeEditorProps> = ({ dictionary }) => {\n const { content, localId } = dictionary;\n\n const { editedContent } = useEditedContent();\n const initialSection =\n typeof editedContent?.[localId!]?.content === 'undefined'\n ? content\n : editedContent?.[localId!]?.content;\n\n return (\n <NodeView\n section={initialSection}\n keyPath={[]}\n dictionaryLocalId={localId!}\n />\n );\n};\n"],"mappings":";;;;;;;AAWA,MAAa,mBAAwC,EAAE,iBAAiB;CACtE,MAAM,EAAE,SAAS,YAAY;CAE7B,MAAM,EAAE,kBAAkB,iBAAiB;CAC3C,MAAM,iBACJ,OAAO,gBAAgB,QAAS,EAAE,YAAY,cAC1C,UACA,gBAAgB,QAAS,EAAE;CAEjC,OACE,oBAAC,UAAD;EACE,SAAS;EACT,SAAS,CAAC;EACV,mBAAmB;CACpB;AAEL"}

package/dist/esm/components/DictionaryFieldEditor/StructureView/StructureView.mjs CHANGED Viewed

@@ -4,10 +4,10 @@ import { Button } from "../../Button/Button.mjs";
 import { Container } from "../../Container/index.mjs";
 import { EditableFieldInput } from "../../EditableField/EditableFieldInput.mjs";
 import { NodeTypeSelector } from "../NodeTypeSelector.mjs";
-import { Plus, Trash } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useIntlayer } from "react-intlayer";
+import { Plus, Trash } from "lucide-react";
 import { useConfiguration, useEditedContentActions, useFocusUnmergedDictionary } from "@intlayer/editor-react";
+import { useIntlayer } from "react-intlayer";
 import { getDefaultNode, getNodeChildren, getNodeType } from "@intlayer/core/dictionaryManipulator";
 import * as NodeTypes from "@intlayer/types/nodeType";
 import { isSameKeyPath } from "@intlayer/core/utils";

package/dist/esm/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.mjs CHANGED Viewed

@@ -4,8 +4,8 @@ import { Button } from "../../Button/Button.mjs";
 import { Container } from "../../Container/index.mjs";
 import { DropDown } from "../../DropDown/index.mjs";
 import { useVersionSwitcher } from "./VersionSwitcherContext.mjs";
-import { MoveVertical } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { MoveVertical } from "lucide-react";
 import { useIntlayer } from "react-intlayer";
 //#region src/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.tsx

package/dist/esm/components/EditableField/EditableFieldInput.mjs CHANGED Viewed

@@ -49,12 +49,13 @@ const EditableFieldInput = ({ onSave, onCancel, ref, ...props }) => {
 		onCancel?.();
 	};
 	useImperativeHandle(ref, () => inputRef.current);
+	const value = useMemo(() => props.value ?? inputRef.current?.value ?? props.defaultValue, [
+		props.value,
+		props.defaultValue,
+		inputRef.current?.value
+	]);
 	return /* @__PURE__ */ jsx(EditableFieldLayout, {
-		value: useMemo(() => props.value ?? inputRef.current?.value ?? props.defaultValue, [
-			props.value,
-			props.defaultValue,
-			inputRef.current?.value
-		]),
+		value,
 		onCancel: handleCancel,
 		onSave: handleSave,
 		children: /* @__PURE__ */ jsx(Input, {

package/dist/esm/components/EditableField/EditableFieldInput.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EditableFieldInput.mjs","names":[],"sources":["../../../../src/components/EditableField/EditableFieldInput.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type Ref, useImperativeHandle, useMemo, useRef } from 'react';\nimport { Input, type InputProps } from '../Input';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\n/*\n Props for the EditableFieldInput component, extending standard Input props\n /\ntype EditableFieldInputProps = InputProps & {\n /* Callback function called when the user saves the edited value /\n onSave?: (value: string) => void;\n /* Callback function called when the user cancels the edit operation /\n onCancel?: () => void;\n};\n\n/\n EditableFieldInput Component\n \n An inline editable input field that displays as read-only text until clicked.\n * When activated, it shows an input field with save and cancel buttons.\n \n @example\n * ```tsx\n * <EditableFieldInput\n * defaultValue=\"Edit me\"\n * placeholder=\"Click to edit...\"\n * onSave={(value) => console.log('Saved:', value)}\n * onCancel={() => console.log('Cancelled')}\n * />\n * ```\n \n ## Features\n * - Inline Editing: Click to edit, displays as text when not editing\n * - Save/Cancel Actions: Built-in save and cancel buttons with callbacks\n * - Keyboard Support: Accessible keyboard navigation\n * - Input Variants: Supports all Input component variants and sizes\n * - Auto-save on Click Away: Saves automatically when clicking outside\n * - Ref Forwarding: Exposes the underlying input element reference\n \n ## Accessibility\n * - Uses semantic HTML with proper ARIA attributes\n * - Keyboard accessible with tab navigation\n * - Screen reader friendly with descriptive labels\n * - Focus management for edit mode transitions\n \n @param props - EditableFieldInputProps extending InputProps\n * @returns React functional component\n */\nexport const EditableFieldInput: FC<EditableFieldInputProps> = ({\n onSave,\n onCancel,\n ref,\n ...props\n}) => {\n const inputRef = useRef<HTMLInputElement>(null);\n\n const handleSave = () => {\n // Your save logic here\n onSave?.(inputRef.current?.value ?? '');\n };\n\n const handleCancel = () => {\n if (inputRef.current) {\n inputRef.current.value = inputRef.current.defaultValue ?? '';\n }\n onCancel?.();\n };\n\n // Expose the input ref to parent components\n useImperativeHandle(ref as Ref<HTMLElement>, () => inputRef.current!);\n\n const value = useMemo(\n () =>\n (props.value as string) ??\n inputRef.current?.value ??\n (props.defaultValue as string),\n\n [props.value, props.defaultValue, inputRef.current?.value]\n );\n\n return (\n <EditableFieldLayout\n value={value}\n onCancel={handleCancel}\n onSave={handleSave}\n >\n <Input ref={inputRef} {...props} />\n </EditableFieldLayout>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,MAAa,sBAAmD,EAC9D,QACA,UACA,KACA,GAAG,YACC;CACJ,MAAM,WAAW,OAAyB,IAAI;CAE9C,MAAM,mBAAmB;EAEvB,SAAS,SAAS,SAAS,SAAS,EAAE;CACxC;CAEA,MAAM,qBAAqB;EACzB,IAAI,SAAS,SACX,SAAS,QAAQ,QAAQ,SAAS,QAAQ,gBAAgB;EAE5D,WAAW;CACb;CAGA,oBAAoB,WAA+B,SAAS,OAAQ;~~CAWpE~~,~~OACE~~,~~oBAAC~~,~~qBAAD;EACE,OAXU,~~cAET,MAAM,SACP,SAAS,SAAS,SACjB,MAAM,cAET;~~GAAC~~,MAAM;~~GAAO~~,MAAM;~~GAAc~~,SAAS,SAAS;~~EAAK~~,~~CAK5C~~;~~EACX~~,UAAU;EACV,QAAQ;YAER,oBAAC,OAAD;GAAO,KAAK;GAAU,GAAI;EAAQ;CACf;AAEzB"}
1	+ {"version":3,"file":"EditableFieldInput.mjs","names":[],"sources":["../../../../src/components/EditableField/EditableFieldInput.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type Ref, useImperativeHandle, useMemo, useRef } from 'react';\nimport { Input, type InputProps } from '../Input';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\n/*\n Props for the EditableFieldInput component, extending standard Input props\n /\ntype EditableFieldInputProps = InputProps & {\n /* Callback function called when the user saves the edited value /\n onSave?: (value: string) => void;\n /* Callback function called when the user cancels the edit operation /\n onCancel?: () => void;\n};\n\n/\n EditableFieldInput Component\n \n An inline editable input field that displays as read-only text until clicked.\n * When activated, it shows an input field with save and cancel buttons.\n \n @example\n * ```tsx\n * <EditableFieldInput\n * defaultValue=\"Edit me\"\n * placeholder=\"Click to edit...\"\n * onSave={(value) => console.log('Saved:', value)}\n * onCancel={() => console.log('Cancelled')}\n * />\n * ```\n \n ## Features\n * - Inline Editing: Click to edit, displays as text when not editing\n * - Save/Cancel Actions: Built-in save and cancel buttons with callbacks\n * - Keyboard Support: Accessible keyboard navigation\n * - Input Variants: Supports all Input component variants and sizes\n * - Auto-save on Click Away: Saves automatically when clicking outside\n * - Ref Forwarding: Exposes the underlying input element reference\n \n ## Accessibility\n * - Uses semantic HTML with proper ARIA attributes\n * - Keyboard accessible with tab navigation\n * - Screen reader friendly with descriptive labels\n * - Focus management for edit mode transitions\n \n @param props - EditableFieldInputProps extending InputProps\n * @returns React functional component\n */\nexport const EditableFieldInput: FC<EditableFieldInputProps> = ({\n onSave,\n onCancel,\n ref,\n ...props\n}) => {\n const inputRef = useRef<HTMLInputElement>(null);\n\n const handleSave = () => {\n // Your save logic here\n onSave?.(inputRef.current?.value ?? '');\n };\n\n const handleCancel = () => {\n if (inputRef.current) {\n inputRef.current.value = inputRef.current.defaultValue ?? '';\n }\n onCancel?.();\n };\n\n // Expose the input ref to parent components\n useImperativeHandle(ref as Ref<HTMLElement>, () => inputRef.current!);\n\n const value = useMemo(\n () =>\n (props.value as string) ??\n inputRef.current?.value ??\n (props.defaultValue as string),\n\n [props.value, props.defaultValue, inputRef.current?.value]\n );\n\n return (\n <EditableFieldLayout\n value={value}\n onCancel={handleCancel}\n onSave={handleSave}\n >\n <Input ref={inputRef} {...props} />\n </EditableFieldLayout>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,MAAa,sBAAmD,EAC9D,QACA,UACA,KACA,GAAG,YACC;CACJ,MAAM,WAAW,OAAyB,IAAI;CAE9C,MAAM,mBAAmB;EAEvB,SAAS,SAAS,SAAS,SAAS,EAAE;CACxC;CAEA,MAAM,qBAAqB;EACzB,IAAI,SAAS,SACX,SAAS,QAAQ,QAAQ,SAAS,QAAQ,gBAAgB;EAE5D,WAAW;CACb;CAGA,oBAAoB,WAA+B,SAAS,OAAQ;CAEpE,MAAM,QAAQ,cAET,MAAM,SACP,SAAS,SAAS,SACjB,MAAM,cAET;EAAC,MAAM;EAAO,MAAM;EAAc,SAAS,SAAS;CAAK,CAC3D;CAEA,OACE,oBAAC,qBAAD;EACS;EACP,UAAU;EACV,QAAQ;YAER,oBAAC,OAAD;GAAO,KAAK;GAAU,GAAI;EAAQ;CACf;AAEzB"}

package/dist/esm/components/EditableField/EditableFieldLayout.mjs CHANGED Viewed

@@ -3,8 +3,8 @@
 import { cn } from "../../utils/cn.mjs";
 import { Button } from "../Button/Button.mjs";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Check, Pencil, X } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Pencil, X } from "lucide-react";
 //#region src/components/EditableField/EditableFieldLayout.tsx
 const EditableFieldLayout = ({ value = "", onCancel, onSave, onClick, children, isDisabled, ...props }) => {

package/dist/esm/components/EditableField/EditableFieldTextArea.mjs CHANGED Viewed

@@ -53,8 +53,9 @@ const EditableFieldTextArea = ({ onSave, onCancel, ref, ...props }) => {
 		if (textAreaRef.current) textAreaRef.current.value = textAreaRef.current.defaultValue ?? "";
 		onCancel?.();
 	};
+	const memoValue = props.value ?? textAreaRef.current?.value ?? props.defaultValue ?? "";
 	return /* @__PURE__ */ jsx(EditableFieldLayout, {
-		value: props.value ?? textAreaRef.current?.value ?? props.defaultValue ?? "",
+		value: memoValue,
 		onCancel: handleCancel,
 		onSave: handleSave,
 		onClick: (e) => {

package/dist/esm/components/EditableField/EditableFieldTextArea.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EditableFieldTextArea.mjs","names":[],"sources":["../../../../src/components/EditableField/EditableFieldTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type Ref, useImperativeHandle, useRef } from 'react';\nimport { AutoSizedTextArea, type AutoSizedTextAreaProps } from '../TextArea';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\n/*\n Props for the EditableFieldTextArea component, extending AutoSizedTextAreaProps\n /\ntype EditableFieldTextAreaProps = AutoSizedTextAreaProps & {\n /* Callback function called when the user saves the edited value /\n onSave?: (value: string) => void;\n /* Callback function called when the user cancels the edit operation /\n onCancel?: () => void;\n};\n\n/\n EditableFieldTextArea Component\n \n An inline editable textarea field that displays as read-only text until clicked.\n * When activated, it shows an auto-sized textarea with save and cancel buttons.\n * Perfect for multiline text editing with automatic height adjustment.\n \n @example\n * ```tsx\n * <EditableFieldTextArea\n * defaultValue=\"Multiline text content\"\n * placeholder=\"Click to edit...\"\n * maxRows={10}\n * onSave={(value) => console.log('Saved:', value)}\n * onCancel={() => console.log('Cancelled')}\n * />\n * ```\n \n ## Features\n * - Inline Editing: Click to edit, displays as formatted text when not editing\n * - Auto-Sizing: Automatically adjusts height to fit content\n * - Save/Cancel Actions: Built-in save and cancel buttons with callbacks\n * - Multiline Support: Preserves line breaks and formatting\n * - Max Rows Control: Configurable maximum height with scroll\n * - Auto-save on Click Away: Saves automatically when clicking outside\n * - Ref Forwarding: Exposes the underlying textarea element reference\n \n ## Accessibility\n * - Uses semantic HTML with proper ARIA attributes\n * - Keyboard accessible with tab navigation\n * - Screen reader friendly with descriptive labels\n * - Focus management for edit mode transitions\n * - Preserves whitespace and formatting for screen readers\n \n @param props - EditableFieldTextAreaProps extending AutoSizedTextAreaProps\n * @returns React functional component\n */\nexport const EditableFieldTextArea: FC<EditableFieldTextAreaProps> = ({\n onSave,\n onCancel,\n ref,\n ...props\n}) => {\n const textAreaRef = useRef<HTMLTextAreaElement>(null);\n\n // Expose the text area ref to parent components\n useImperativeHandle(ref as Ref<HTMLElement>, () => textAreaRef.current!);\n\n const handleSave = () => {\n // Your save logic here\n onSave?.(textAreaRef.current?.value ?? '');\n };\n\n const handleCancel = () => {\n if (textAreaRef.current) {\n textAreaRef.current.value = textAreaRef.current.defaultValue ?? '';\n }\n onCancel?.();\n };\n\n const memoValue =\n (props.value as string) ??\n textAreaRef.current?.value ??\n (props.defaultValue as string) ??\n '';\n\n return (\n <EditableFieldLayout\n value={memoValue}\n onCancel={handleCancel}\n onSave={handleSave}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n }}\n >\n <AutoSizedTextArea\n className=\"leading-6\"\n ref={textAreaRef}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n }}\n {...props}\n />\n </EditableFieldLayout>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,MAAa,yBAAyD,EACpE,QACA,UACA,KACA,GAAG,YACC;CACJ,MAAM,cAAc,OAA4B,IAAI;CAGpD,oBAAoB,WAA+B,YAAY,OAAQ;CAEvE,MAAM,mBAAmB;EAEvB,SAAS,YAAY,SAAS,SAAS,EAAE;CAC3C;CAEA,MAAM,qBAAqB;EACzB,IAAI,YAAY,SACd,YAAY,QAAQ,QAAQ,YAAY,QAAQ,gBAAgB;EAElE,WAAW;CACb;~~CAQA~~,~~OACE~~,~~oBAAC~~,~~qBAAD;EACE,OAPD,~~MAAM,SACP,YAAY,SAAS,SACpB,MAAM,gBACP;~~EAKE~~,UAAU;EACV,QAAQ;EACR,UAAU,MAAM;GACd,EAAE,eAAe;GACjB,EAAE,gBAAgB;EACpB;YAEA,oBAAC,mBAAD;GACE,WAAU;GACV,KAAK;GACL,UAAU,MAAM;IACd,EAAE,eAAe;IACjB,EAAE,gBAAgB;GACpB;GACA,GAAI;EACL;CACkB;AAEzB"}
1	+ {"version":3,"file":"EditableFieldTextArea.mjs","names":[],"sources":["../../../../src/components/EditableField/EditableFieldTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type Ref, useImperativeHandle, useRef } from 'react';\nimport { AutoSizedTextArea, type AutoSizedTextAreaProps } from '../TextArea';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\n/*\n Props for the EditableFieldTextArea component, extending AutoSizedTextAreaProps\n /\ntype EditableFieldTextAreaProps = AutoSizedTextAreaProps & {\n /* Callback function called when the user saves the edited value /\n onSave?: (value: string) => void;\n /* Callback function called when the user cancels the edit operation /\n onCancel?: () => void;\n};\n\n/\n EditableFieldTextArea Component\n \n An inline editable textarea field that displays as read-only text until clicked.\n * When activated, it shows an auto-sized textarea with save and cancel buttons.\n * Perfect for multiline text editing with automatic height adjustment.\n \n @example\n * ```tsx\n * <EditableFieldTextArea\n * defaultValue=\"Multiline text content\"\n * placeholder=\"Click to edit...\"\n * maxRows={10}\n * onSave={(value) => console.log('Saved:', value)}\n * onCancel={() => console.log('Cancelled')}\n * />\n * ```\n \n ## Features\n * - Inline Editing: Click to edit, displays as formatted text when not editing\n * - Auto-Sizing: Automatically adjusts height to fit content\n * - Save/Cancel Actions: Built-in save and cancel buttons with callbacks\n * - Multiline Support: Preserves line breaks and formatting\n * - Max Rows Control: Configurable maximum height with scroll\n * - Auto-save on Click Away: Saves automatically when clicking outside\n * - Ref Forwarding: Exposes the underlying textarea element reference\n \n ## Accessibility\n * - Uses semantic HTML with proper ARIA attributes\n * - Keyboard accessible with tab navigation\n * - Screen reader friendly with descriptive labels\n * - Focus management for edit mode transitions\n * - Preserves whitespace and formatting for screen readers\n \n @param props - EditableFieldTextAreaProps extending AutoSizedTextAreaProps\n * @returns React functional component\n */\nexport const EditableFieldTextArea: FC<EditableFieldTextAreaProps> = ({\n onSave,\n onCancel,\n ref,\n ...props\n}) => {\n const textAreaRef = useRef<HTMLTextAreaElement>(null);\n\n // Expose the text area ref to parent components\n useImperativeHandle(ref as Ref<HTMLElement>, () => textAreaRef.current!);\n\n const handleSave = () => {\n // Your save logic here\n onSave?.(textAreaRef.current?.value ?? '');\n };\n\n const handleCancel = () => {\n if (textAreaRef.current) {\n textAreaRef.current.value = textAreaRef.current.defaultValue ?? '';\n }\n onCancel?.();\n };\n\n const memoValue =\n (props.value as string) ??\n textAreaRef.current?.value ??\n (props.defaultValue as string) ??\n '';\n\n return (\n <EditableFieldLayout\n value={memoValue}\n onCancel={handleCancel}\n onSave={handleSave}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n }}\n >\n <AutoSizedTextArea\n className=\"leading-6\"\n ref={textAreaRef}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n }}\n {...props}\n />\n </EditableFieldLayout>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,MAAa,yBAAyD,EACpE,QACA,UACA,KACA,GAAG,YACC;CACJ,MAAM,cAAc,OAA4B,IAAI;CAGpD,oBAAoB,WAA+B,YAAY,OAAQ;CAEvE,MAAM,mBAAmB;EAEvB,SAAS,YAAY,SAAS,SAAS,EAAE;CAC3C;CAEA,MAAM,qBAAqB;EACzB,IAAI,YAAY,SACd,YAAY,QAAQ,QAAQ,YAAY,QAAQ,gBAAgB;EAElE,WAAW;CACb;CAEA,MAAM,YACH,MAAM,SACP,YAAY,SAAS,SACpB,MAAM,gBACP;CAEF,OACE,oBAAC,qBAAD;EACE,OAAO;EACP,UAAU;EACV,QAAQ;EACR,UAAU,MAAM;GACd,EAAE,eAAe;GACjB,EAAE,gBAAgB;EACpB;YAEA,oBAAC,mBAAD;GACE,WAAU;GACV,KAAK;GACL,UAAU,MAAM;IACd,EAAE,eAAe;IACjB,EAAE,gBAAgB;GACpB;GACA,GAAI;EACL;CACkB;AAEzB"}

package/dist/esm/components/Form/elements/OTPElement.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
-import { InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "../../Input/OTPInput.mjs";
 import { useItemSelector } from "../../../hooks/useItemSelector.mjs";
+import { InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "../../Input/OTPInput.mjs";
 import { FormField, useFormField } from "../FormField.mjs";
 import { FormItemLayout } from "../layout/FormItemLayout.mjs";
 import { useEffect, useRef } from "react";

package/dist/esm/components/HTMLRender/HTMLRender.mjs CHANGED Viewed

@@ -49,8 +49,9 @@ const getIntlayerHTMLOptions = () => ({ components: {
 * interactive content with custom styling and Intlayer integration.
 */
 const HTMLRenderer = ({ children, isDarkMode, locale, components: componentsProp }) => {
-	return /* @__PURE__ */ jsx(Fragment, { children: renderHTML(children, { components: {
-		...getIntlayerHTMLOptions(isDarkMode ?? false).components,
+	const htmlOptions = getIntlayerHTMLOptions(isDarkMode ?? false);
+	const htmlContent = renderHTML(children, { components: {
+		...htmlOptions.components,
 		a: (props) => /* @__PURE__ */ jsx(Link, {
 			isExternalLink: props.href?.startsWith("http"),
 			underlined: true,
@@ -60,7 +61,8 @@ const HTMLRenderer = ({ children, isDarkMode, locale, components: componentsProp
 			color: "neutral"
 		}),
 		...componentsProp
-	} }) });
+	} });
+	return /* @__PURE__ */ jsx(Fragment, { children: htmlContent });
 };
 //#endregion

package/dist/esm/components/HTMLRender/HTMLRender.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HTMLRender.mjs","names":[],"sources":["../../../../src/components/HTMLRender/HTMLRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport type { ComponentProps, FC } from 'react';\nimport {\n type HTMLRenderer as HTMLRendererIntlayer,\n type RenderHTMLProps,\n renderHTML,\n} from 'react-intlayer/html';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport { Link } from '../Link';\n\ntype HTMLRendererProps = {\n children: string;\n isDarkMode?: boolean;\n locale?: LocalesValues;\n components?: ComponentProps<typeof HTMLRendererIntlayer>['components'];\n};\n\nexport const getIntlayerHTMLOptions: (isDarkMode: boolean) => RenderHTMLProps =\n () => ({\n components: {\n h1: (props) => <H1 isClickable={true} {...props} />,\n h2: (props) => <H2 isClickable={true} className=\"mt-16\" {...props} />,\n h3: (props) => <H3 isClickable={true} className=\"mt-5\" {...props} />,\n h4: (props) => <H4 isClickable={true} className=\"mt-3\" {...props} />,\n h5: (props) => <H5 isClickable={true} className=\"mt-3\" {...props} />,\n h6: (props) => <H6 isClickable={true} className=\"mt-3\" {...props} />,\n a: (props) => (\n <Link\n isExternalLink={props.href?.startsWith('http')}\n underlined={true}\n label=\"\"\n {...props}\n color=\"neutral\"\n />\n ),\n },\n });\n\n/*\n HTMLRenderer Component\n \n A comprehensive HTML renderer that transforms HTML text into rich,\n * interactive content with custom styling and Intlayer integration.\n */\nexport const HTMLRenderer: FC<HTMLRendererProps> = ({\n children,\n isDarkMode,\n locale,\n components: componentsProp,\n}) => {\n const htmlOptions = getIntlayerHTMLOptions(isDarkMode ?? false);\n\n const htmlContent = renderHTML(children, {\n components: {\n ...htmlOptions.components,\n a: (props) => (\n <Link\n isExternalLink={props.href?.startsWith('http')}\n underlined={true}\n locale={locale}\n label=\"\"\n {...props}\n color=\"neutral\"\n />\n ),\n ...componentsProp,\n },\n });\n\n return <>{htmlContent}</>;\n};\n"],"mappings":";;;;;;AAiBA,MAAa,gCACJ,EACL,YAAY;CACV,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,GAAI;CAAQ;CAClD,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,WAAU;EAAQ,GAAI;CAAQ;CACpE,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,WAAU;EAAO,GAAI;CAAQ;CACnE,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,WAAU;EAAO,GAAI;CAAQ;CACnE,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,WAAU;EAAO,GAAI;CAAQ;CACnE,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,WAAU;EAAO,GAAI;CAAQ;CACnE,IAAI,UACF,oBAAC,MAAD;EACE,gBAAgB,MAAM,MAAM,WAAW,MAAM;EAC7C,YAAY;EACZ,OAAM;EACN,GAAI;EACJ,OAAM;CACP;AAEL,EACF;;;;;;;AAQF,MAAa,gBAAuC,EAClD,UACA,YACA,QACA,YAAY,qBACR;~~CAoBJ~~,~~OAAO~~,~~0CAjBa~~,WAAW,UAAU,EACvC,YAAY;EACV,~~GAJgB~~,~~uBAAuB,cAAc,KAIxC,CAAC,CAAC~~;EACf,IAAI,UACF,oBAAC,MAAD;GACE,gBAAgB,MAAM,MAAM,WAAW,MAAM;GAC7C,YAAY;GACJ;GACR,OAAM;GACN,GAAI;GACJ,OAAM;EACP;EAEH,GAAG;CACL,EACF,~~CAEoB~~,~~EAAI~~;AAC1B"}
1	+ {"version":3,"file":"HTMLRender.mjs","names":[],"sources":["../../../../src/components/HTMLRender/HTMLRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport type { ComponentProps, FC } from 'react';\nimport {\n type HTMLRenderer as HTMLRendererIntlayer,\n type RenderHTMLProps,\n renderHTML,\n} from 'react-intlayer/html';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport { Link } from '../Link';\n\ntype HTMLRendererProps = {\n children: string;\n isDarkMode?: boolean;\n locale?: LocalesValues;\n components?: ComponentProps<typeof HTMLRendererIntlayer>['components'];\n};\n\nexport const getIntlayerHTMLOptions: (isDarkMode: boolean) => RenderHTMLProps =\n () => ({\n components: {\n h1: (props) => <H1 isClickable={true} {...props} />,\n h2: (props) => <H2 isClickable={true} className=\"mt-16\" {...props} />,\n h3: (props) => <H3 isClickable={true} className=\"mt-5\" {...props} />,\n h4: (props) => <H4 isClickable={true} className=\"mt-3\" {...props} />,\n h5: (props) => <H5 isClickable={true} className=\"mt-3\" {...props} />,\n h6: (props) => <H6 isClickable={true} className=\"mt-3\" {...props} />,\n a: (props) => (\n <Link\n isExternalLink={props.href?.startsWith('http')}\n underlined={true}\n label=\"\"\n {...props}\n color=\"neutral\"\n />\n ),\n },\n });\n\n/*\n HTMLRenderer Component\n \n A comprehensive HTML renderer that transforms HTML text into rich,\n * interactive content with custom styling and Intlayer integration.\n */\nexport const HTMLRenderer: FC<HTMLRendererProps> = ({\n children,\n isDarkMode,\n locale,\n components: componentsProp,\n}) => {\n const htmlOptions = getIntlayerHTMLOptions(isDarkMode ?? false);\n\n const htmlContent = renderHTML(children, {\n components: {\n ...htmlOptions.components,\n a: (props) => (\n <Link\n isExternalLink={props.href?.startsWith('http')}\n underlined={true}\n locale={locale}\n label=\"\"\n {...props}\n color=\"neutral\"\n />\n ),\n ...componentsProp,\n },\n });\n\n return <>{htmlContent}</>;\n};\n"],"mappings":";;;;;;AAiBA,MAAa,gCACJ,EACL,YAAY;CACV,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,GAAI;CAAQ;CAClD,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,WAAU;EAAQ,GAAI;CAAQ;CACpE,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,WAAU;EAAO,GAAI;CAAQ;CACnE,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,WAAU;EAAO,GAAI;CAAQ;CACnE,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,WAAU;EAAO,GAAI;CAAQ;CACnE,KAAK,UAAU,oBAAC,IAAD;EAAI,aAAa;EAAM,WAAU;EAAO,GAAI;CAAQ;CACnE,IAAI,UACF,oBAAC,MAAD;EACE,gBAAgB,MAAM,MAAM,WAAW,MAAM;EAC7C,YAAY;EACZ,OAAM;EACN,GAAI;EACJ,OAAM;CACP;AAEL,EACF;;;;;;;AAQF,MAAa,gBAAuC,EAClD,UACA,YACA,QACA,YAAY,qBACR;CACJ,MAAM,cAAc,uBAAuB,cAAc,KAAK;CAE9D,MAAM,cAAc,WAAW,UAAU,EACvC,YAAY;EACV,GAAG,YAAY;EACf,IAAI,UACF,oBAAC,MAAD;GACE,gBAAgB,MAAM,MAAM,WAAW,MAAM;GAC7C,YAAY;GACJ;GACR,OAAM;GACN,GAAI;GACJ,OAAM;EACP;EAEH,GAAG;CACL,EACF,CAAC;CAED,OAAO,0CAAG,YAAc;AAC1B"}

package/dist/esm/components/HideShow/index.mjs CHANGED Viewed

@@ -2,8 +2,8 @@
 import { cn } from "../../utils/cn.mjs";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { Eye, EyeOff } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Eye, EyeOff } from "lucide-react";
 //#region src/components/HideShow/index.tsx
 const insertBreaks = (str, groupSize = 6) => str.replace(new RegExp(`.{1,${groupSize}}`, "g"), "$&");

package/dist/esm/components/IDE/Code.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Code.mjs","names":[],"sources":["../../../../src/components/IDE/Code.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport type { FC, HTMLAttributes, ReactNode } from 'react';\nimport { useEffect, useMemo, useState } from 'react';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { Container } from '../Container';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { CodeBlock } from './CodeBlockClient';\nimport { CodeBlockHighlight } from './CodeBlockHighlight';\nimport { CodeConditionalRender } from './CodeConditionalRenderer';\nimport type {\n CodeFormat,\n ContentDeclarationFormat,\n PackageManager,\n} from './CodeContext';\nimport { useCodeContext } from './CodeContext';\nimport { CodeFormatSelector } from './CodeFormatSelector';\nimport { ContentDeclarationFormatSelector } from './ContentDeclarationFormatSelector';\nimport { CopyCode } from './CopyCode';\nimport { PackageManagerSelector } from './PackageManagerSelector';\n\nexport type CodeCompAttributes = {\n fileName?: string;\n packageManager?: PackageManager;\n /** Single format, a JSON-array string, or an array of formats. /\n codeFormat?: CodeFormat \| string \| string[];\n contentDeclarationFormat?: ContentDeclarationFormat \| string \| string[];\n};\n\ntype CodeCompProps = {\n children: ReactNode;\n fileName?: string;\n language: BundledLanguage;\n isDarkMode?: boolean;\n showHeader?: boolean;\n showLineNumbers?: boolean;\n isRollable?: boolean;\n} & CodeCompAttributes &\n HTMLAttributes<HTMLDivElement>;\n\nconst MIN_HEIGHT = 700;\n\n/* Languages that use JSX syntax — CommonJS doesn't make sense for these. /\nconst JSX_LANGUAGES = new Set(['tsx', 'jsx']);\n\n/* Parse a codeFormat prop that may be a single value, a JSON-array string, or already an array. /\nconst parseFormats = (\n raw: string \| string[] \| undefined\n): CodeFormat[] \| undefined => {\n if (!raw) return undefined;\n if (Array.isArray(raw)) return raw as CodeFormat[];\n if (typeof raw === 'string' && raw.startsWith('[')) {\n try {\n const parsed = JSON.parse(raw);\n if (Array.isArray(parsed)) return parsed as CodeFormat[];\n } catch {\n / ignore /\n }\n }\n return [raw as CodeFormat];\n};\n\nexport const Code: FC<CodeCompProps> = ({\n children,\n language,\n isDarkMode,\n showHeader = true,\n showLineNumbers = true,\n className,\n fileName,\n packageManager,\n codeFormat: rawCodeFormat,\n contentDeclarationFormat: rawContentDeclarationFormat,\n isRollable = true,\n lang, // Destructure html lang prop to prevent passing invalid BCP-47 language tag to Code component\n ...props\n}) => {\n const {\n codeFormat: selectedCodeFormat,\n contentDeclarationFormat: selectedContentDeclarationFormat,\n } = useCodeContext();\n\n // Parse whichever attribute is present as an array of formats.\n const codeFormats = useMemo(\n () => parseFormats(rawCodeFormat as string \| undefined),\n [rawCodeFormat]\n );\n const contentFormats = useMemo(\n () => parseFormats(rawContentDeclarationFormat as string \| undefined),\n [rawContentDeclarationFormat]\n );\n\n // A block is \"multi-format\" when it has multiple formats including TypeScript\n // (the canonical source). Such blocks transform at runtime.\n const isMultiCodeFormat =\n codeFormats !== undefined &&\n codeFormats.length > 1 &&\n codeFormats.includes('typescript');\n\n const isMultiContentFormat =\n contentFormats !== undefined &&\n contentFormats.length > 1 &&\n contentFormats.includes('typescript');\n\n const isMultiFormat = isMultiCodeFormat \|\| isMultiContentFormat;\n\n // Determine which context format drives this block's selection.\n // content declaration blocks use selectedContentDeclarationFormat;\n // regular code blocks use selectedCodeFormat.\n const selectedFormat: CodeFormat = isMultiContentFormat\n ? (selectedContentDeclarationFormat as CodeFormat)\n : selectedCodeFormat;\n\n // The formats actually relevant for transformation (no 'json', no 'commonjs' for JSX).\n const effectiveFormats = useMemo<CodeFormat[] \| undefined>(() => {\n const base = isMultiContentFormat ? contentFormats : codeFormats;\n if (!base) return base;\n let filtered = base.filter((f) => f !== 'json') as CodeFormat[];\n if (JSX_LANGUAGES.has(language as string)) {\n filtered = filtered.filter((f) => f !== 'commonjs');\n }\n return filtered;\n }, [isMultiContentFormat, contentFormats, codeFormats, language]);\n\n // When the globally-selected format isn't valid for this block\n // (e.g. CJS selected but this is a JSX file), fall back to the last valid one.\n const resolvedFormat: Exclude<CodeFormat, 'json'> = useMemo(() => {\n if (!effectiveFormats \|\| effectiveFormats.includes(selectedFormat)) {\n return selectedFormat as Exclude<CodeFormat, 'json'>;\n }\n return (effectiveFormats[effectiveFormats.length - 1] ??\n 'typescript') as Exclude<CodeFormat, 'json'>;\n }, [effectiveFormats, selectedFormat]);\n\n // ── Async filename derivation (dynamic import of transformer) ──────────────\n // We derive the displayed fileName so the header updates when format changes.\n // deriveFileName is tiny but it lives inside codeTransformer, which is only\n // imported when actually needed (non-TypeScript selection).\n const [displayedFileName, setDisplayedFileName] = useState<\n string \| undefined\n >(fileName);\n\n useEffect(() => {\n if (!isMultiFormat \|\| resolvedFormat === 'typescript') {\n setDisplayedFileName(fileName);\n return;\n }\n if (!fileName) return;\n\n let cancelled = false;\n (async () => {\n const { deriveFileName } = await import('./codeTransformer');\n if (!cancelled)\n setDisplayedFileName(deriveFileName(fileName, resolvedFormat));\n })();\n return () => {\n cancelled = true;\n };\n }, [fileName, isMultiFormat, resolvedFormat]);\n\n // ── Async copy text (transformed code for CopyCode) ───────────────────────\n const rawCode = useMemo(() => {\n const code = Array.isArray(children) ? children.join('') : String(children);\n return code.endsWith('\\n') ? code.slice(0, -1) : code;\n }, [children]);\n\n const [copyCode, setCopyCode] = useState<string>(rawCode);\n\n useEffect(() => {\n if (!isMultiFormat \|\| resolvedFormat === 'typescript') {\n setCopyCode(rawCode);\n return;\n }\n let cancelled = false;\n (async () => {\n const { transformCode } = await import('./codeTransformer');\n if (!cancelled) setCopyCode(transformCode(rawCode, resolvedFormat));\n })();\n return () => {\n cancelled = true;\n };\n }, [rawCode, isMultiFormat, resolvedFormat]);\n\n const hadSelectInHeader =\n packageManager \|\| rawCodeFormat \|\| rawContentDeclarationFormat;\n\n return (\n <CodeConditionalRender\n packageManager={packageManager}\n codeFormat={rawCodeFormat as string \| undefined}\n contentDeclarationFormat={\n rawContentDeclarationFormat as string \| undefined\n }\n >\n <Container\n className={cn(\n 'relative min-w-0 max-w-full text-sm leading-6',\n showLineNumbers && 'with-line-number ml-0',\n className\n )}\n transparency=\"lg\"\n {...props}\n >\n {showHeader && (\n <>\n <div className=\"grid w-full grid-cols-[1fr_auto] items-center justify-between rounded-t-xl bg-card/50 py-1.5 pr-12 pl-4 text-neutral text-xs\">\n <span className=\"truncate\">{displayedFileName ?? language}</span>\n <div className=\"flex items-center gap-2\">\n {packageManager && <PackageManagerSelector />}\n {rawCodeFormat && (\n <CodeFormatSelector availableFormats={effectiveFormats} />\n )}\n {rawContentDeclarationFormat && (\n <ContentDeclarationFormatSelector />\n )}\n </div>\n </div>\n <div className=\"sticky top-46 z-20\">\n <div\n className={cn(\n 'absolute right-2 bottom-0 flex h-7 items-center',\n hadSelectInHeader && 'h-11'\n )}\n >\n <CopyCode code={copyCode} />\n </div>\n </div>\n </>\n )}\n <ExpandCollapse\n minHeight={MIN_HEIGHT}\n isRollable={isRollable}\n className=\"min-w-0 max-w-full overflow-x-auto p-2\"\n >\n {isMultiFormat ? (\n /\n * Multi-format: CodeBlockHighlight manages both the transformation\n * (dynamic import of codeTransformer) and the Shiki highlighting in\n * a single useEffect. The previous highlighted output stays visible\n * while the new one loads — no white-text flash.\n /\n <CodeBlockHighlight\n originalLang={language}\n targetFormat={resolvedFormat}\n isDarkMode={isDarkMode}\n >\n {rawCode}\n </CodeBlockHighlight>\n ) : (\n /\n * Single-format: use the original Suspense-based async Shiki renderer\n * (good for SSR / static content).\n */\n <CodeBlock lang={language} isDarkMode={isDarkMode}>\n {rawCode}\n </CodeBlock>\n )}\n </ExpandCollapse>\n </Container>\n </CodeConditionalRender>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"Code.mjs","names":[],"sources":["../../../../src/components/IDE/Code.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport type { FC, HTMLAttributes, ReactNode } from 'react';\nimport { useEffect, useMemo, useState } from 'react';\nimport { Container } from '../Container';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { CodeBlock } from './CodeBlockClient';\nimport { CodeBlockHighlight } from './CodeBlockHighlight';\nimport { CodeConditionalRender } from './CodeConditionalRenderer';\nimport type {\n CodeFormat,\n ContentDeclarationFormat,\n PackageManager,\n} from './CodeContext';\nimport { useCodeContext } from './CodeContext';\nimport { CodeFormatSelector } from './CodeFormatSelector';\nimport { ContentDeclarationFormatSelector } from './ContentDeclarationFormatSelector';\nimport { CopyCode } from './CopyCode';\nimport { PackageManagerSelector } from './PackageManagerSelector';\nimport type { CodeLanguage } from './shikiLanguages';\n\nexport type CodeCompAttributes = {\n fileName?: string;\n packageManager?: PackageManager;\n /** Single format, a JSON-array string, or an array of formats. /\n codeFormat?: CodeFormat \| string \| string[];\n contentDeclarationFormat?: ContentDeclarationFormat \| string \| string[];\n};\n\ntype CodeCompProps = {\n children: ReactNode;\n fileName?: string;\n language: CodeLanguage;\n isDarkMode?: boolean;\n showHeader?: boolean;\n showLineNumbers?: boolean;\n isRollable?: boolean;\n} & CodeCompAttributes &\n HTMLAttributes<HTMLDivElement>;\n\nconst MIN_HEIGHT = 700;\n\n/* Languages that use JSX syntax — CommonJS doesn't make sense for these. /\nconst JSX_LANGUAGES = new Set(['tsx', 'jsx']);\n\n/* Parse a codeFormat prop that may be a single value, a JSON-array string, or already an array. /\nconst parseFormats = (\n raw: string \| string[] \| undefined\n): CodeFormat[] \| undefined => {\n if (!raw) return undefined;\n if (Array.isArray(raw)) return raw as CodeFormat[];\n if (typeof raw === 'string' && raw.startsWith('[')) {\n try {\n const parsed = JSON.parse(raw);\n if (Array.isArray(parsed)) return parsed as CodeFormat[];\n } catch {\n / ignore /\n }\n }\n return [raw as CodeFormat];\n};\n\nexport const Code: FC<CodeCompProps> = ({\n children,\n language,\n isDarkMode,\n showHeader = true,\n showLineNumbers = true,\n className,\n fileName,\n packageManager,\n codeFormat: rawCodeFormat,\n contentDeclarationFormat: rawContentDeclarationFormat,\n isRollable = true,\n lang, // Destructure html lang prop to prevent passing invalid BCP-47 language tag to Code component\n ...props\n}) => {\n const {\n codeFormat: selectedCodeFormat,\n contentDeclarationFormat: selectedContentDeclarationFormat,\n } = useCodeContext();\n\n // Parse whichever attribute is present as an array of formats.\n const codeFormats = useMemo(\n () => parseFormats(rawCodeFormat as string \| undefined),\n [rawCodeFormat]\n );\n const contentFormats = useMemo(\n () => parseFormats(rawContentDeclarationFormat as string \| undefined),\n [rawContentDeclarationFormat]\n );\n\n // A block is \"multi-format\" when it has multiple formats including TypeScript\n // (the canonical source). Such blocks transform at runtime.\n const isMultiCodeFormat =\n codeFormats !== undefined &&\n codeFormats.length > 1 &&\n codeFormats.includes('typescript');\n\n const isMultiContentFormat =\n contentFormats !== undefined &&\n contentFormats.length > 1 &&\n contentFormats.includes('typescript');\n\n const isMultiFormat = isMultiCodeFormat \|\| isMultiContentFormat;\n\n // Determine which context format drives this block's selection.\n // content declaration blocks use selectedContentDeclarationFormat;\n // regular code blocks use selectedCodeFormat.\n const selectedFormat: CodeFormat = isMultiContentFormat\n ? (selectedContentDeclarationFormat as CodeFormat)\n : selectedCodeFormat;\n\n // The formats actually relevant for transformation (no 'json', no 'commonjs' for JSX).\n const effectiveFormats = useMemo<CodeFormat[] \| undefined>(() => {\n const base = isMultiContentFormat ? contentFormats : codeFormats;\n if (!base) return base;\n let filtered = base.filter((f) => f !== 'json') as CodeFormat[];\n if (JSX_LANGUAGES.has(language as string)) {\n filtered = filtered.filter((f) => f !== 'commonjs');\n }\n return filtered;\n }, [isMultiContentFormat, contentFormats, codeFormats, language]);\n\n // When the globally-selected format isn't valid for this block\n // (e.g. CJS selected but this is a JSX file), fall back to the last valid one.\n const resolvedFormat: Exclude<CodeFormat, 'json'> = useMemo(() => {\n if (!effectiveFormats \|\| effectiveFormats.includes(selectedFormat)) {\n return selectedFormat as Exclude<CodeFormat, 'json'>;\n }\n return (effectiveFormats[effectiveFormats.length - 1] ??\n 'typescript') as Exclude<CodeFormat, 'json'>;\n }, [effectiveFormats, selectedFormat]);\n\n // ── Async filename derivation (dynamic import of transformer) ──────────────\n // We derive the displayed fileName so the header updates when format changes.\n // deriveFileName is tiny but it lives inside codeTransformer, which is only\n // imported when actually needed (non-TypeScript selection).\n const [displayedFileName, setDisplayedFileName] = useState<\n string \| undefined\n >(fileName);\n\n useEffect(() => {\n if (!isMultiFormat \|\| resolvedFormat === 'typescript') {\n setDisplayedFileName(fileName);\n return;\n }\n if (!fileName) return;\n\n let cancelled = false;\n (async () => {\n const { deriveFileName } = await import('./codeTransformer');\n if (!cancelled)\n setDisplayedFileName(deriveFileName(fileName, resolvedFormat));\n })();\n return () => {\n cancelled = true;\n };\n }, [fileName, isMultiFormat, resolvedFormat]);\n\n // ── Async copy text (transformed code for CopyCode) ───────────────────────\n const rawCode = useMemo(() => {\n const code = Array.isArray(children) ? children.join('') : String(children);\n return code.endsWith('\\n') ? code.slice(0, -1) : code;\n }, [children]);\n\n const [copyCode, setCopyCode] = useState<string>(rawCode);\n\n useEffect(() => {\n if (!isMultiFormat \|\| resolvedFormat === 'typescript') {\n setCopyCode(rawCode);\n return;\n }\n let cancelled = false;\n (async () => {\n const { transformCode } = await import('./codeTransformer');\n if (!cancelled) setCopyCode(transformCode(rawCode, resolvedFormat));\n })();\n return () => {\n cancelled = true;\n };\n }, [rawCode, isMultiFormat, resolvedFormat]);\n\n const hadSelectInHeader =\n packageManager \|\| rawCodeFormat \|\| rawContentDeclarationFormat;\n\n return (\n <CodeConditionalRender\n packageManager={packageManager}\n codeFormat={rawCodeFormat as string \| undefined}\n contentDeclarationFormat={\n rawContentDeclarationFormat as string \| undefined\n }\n >\n <Container\n className={cn(\n 'relative min-w-0 max-w-full text-sm leading-6',\n showLineNumbers && 'with-line-number ml-0',\n className\n )}\n transparency=\"lg\"\n {...props}\n >\n {showHeader && (\n <>\n <div className=\"grid w-full grid-cols-[1fr_auto] items-center justify-between rounded-t-xl bg-card/50 py-1.5 pr-12 pl-4 text-neutral text-xs\">\n <span className=\"truncate\">{displayedFileName ?? language}</span>\n <div className=\"flex items-center gap-2\">\n {packageManager && <PackageManagerSelector />}\n {rawCodeFormat && (\n <CodeFormatSelector availableFormats={effectiveFormats} />\n )}\n {rawContentDeclarationFormat && (\n <ContentDeclarationFormatSelector />\n )}\n </div>\n </div>\n <div className=\"sticky top-46 z-20\">\n <div\n className={cn(\n 'absolute right-2 bottom-0 flex h-7 items-center',\n hadSelectInHeader && 'h-11'\n )}\n >\n <CopyCode code={copyCode} />\n </div>\n </div>\n </>\n )}\n <ExpandCollapse\n minHeight={MIN_HEIGHT}\n isRollable={isRollable}\n className=\"min-w-0 max-w-full overflow-x-auto p-2\"\n >\n {isMultiFormat ? (\n /\n * Multi-format: CodeBlockHighlight manages both the transformation\n * (dynamic import of codeTransformer) and the Shiki highlighting in\n * a single useEffect. The previous highlighted output stays visible\n * while the new one loads — no white-text flash.\n /\n <CodeBlockHighlight\n originalLang={language}\n targetFormat={resolvedFormat}\n isDarkMode={isDarkMode}\n >\n {rawCode}\n </CodeBlockHighlight>\n ) : (\n /\n * Single-format: use the original Suspense-based async Shiki renderer\n * (good for SSR / static content).\n */\n <CodeBlock lang={language} isDarkMode={isDarkMode}>\n {rawCode}\n </CodeBlock>\n )}\n </ExpandCollapse>\n </Container>\n </CodeConditionalRender>\n );\n};\n"],"mappings":"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"}

package/dist/esm/components/IDE/CodeBlockClient.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeBlockClient.mjs","names":[],"sources":["../../../../src/components/IDE/CodeBlockClient.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport {\n type FC,\n type HTMLAttributes,\n lazy,\n type ReactNode,\n Suspense,\n} from 'react';\nimport type { ~~BundledLanguage~~ } from '~~shiki/bundle/web~~';\n\nexport type { ~~BundledLanguage as~~ CodeLanguage } from '~~shiki/bundle/web~~';\n\nexport const CodeDefault: FC<{ children: ReactNode }> = ({ children }) => (\n <div className=\"min-w-0 max-w-full overflow-x-auto\">\n <pre className=\"min-w-0 max-w-full overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n <code>\n {typeof children === 'string'\n ? children.split('\\n').map((line, index) => (\n <span\n className=\"line block w-full\"\n key={`line-${index}-${line.slice(0, 10)}`}\n >\n {line}\n </span>\n ))\n : children}\n </code>\n </pre>\n </div>\n);\n\n// Lazy load the Shiki component\nconst CodeBlockShiki = lazy(() =>\n import('./CodeBlockShiki').then((mod) => ({\n default: mod.CodeBlockShiki,\n }))\n);\n\nexport type CodeBlockProps = {\n children: React.ReactNode;\n lang: ~~BundledLanguage~~;\n isDarkMode?: boolean;\n isEditable?: boolean;\n onChange?: (content: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;\n\nexport const CodeBlock: FC<CodeBlockProps> = ({\n className,\n onChange,\n isEditable,\n children,\n lang,\n isDarkMode,\n ...props\n}) => (\n <div\n className={cn('flex w-full min-w-0 max-w-full overflow-x-auto', className)}\n {...props}\n >\n <Suspense fallback={<CodeDefault>{children}</CodeDefault>}>\n <CodeBlockShiki lang={lang} isDarkMode={isDarkMode}>\n {children}\n </CodeBlockShiki>\n </Suspense>\n </div>\n);\n"],"mappings":";;;;;AAYA,MAAa,eAA4C,EAAE,eACzD,oBAAC,OAAD;CAAK,WAAU;WACb,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,QAAD,YACG,OAAO,aAAa,WACjB,SAAS,MAAM,IAAI,CAAC,CAAC,KAAK,MAAM,UAC9B,oBAAC,QAAD;GACE,WAAU;aAGT;EACG,GAHC,QAAQ,MAAM,GAAG,KAAK,MAAM,GAAG,EAAE,GAGlC,CACP,IACD,SACA;CACH;AACF;AAIP,MAAM,iBAAiB,WACrB,OAAO,uBAAmB,CAAC,MAAM,SAAS,EACxC,SAAS,IAAI,eACf,EAAE,CACJ;AAUA,MAAa,aAAiC,EAC5C,WACA,UACA,YACA,UACA,MACA,YACA,GAAG,YAEH,oBAAC,OAAD;CACE,WAAW,GAAG,kDAAkD,SAAS;CACzE,GAAI;WAEJ,oBAAC,UAAD;EAAU,UAAU,oBAAC,aAAD,EAAc,SAAsB;YACtD,oBAAC,gBAAD;GAAsB;GAAkB;GACrC;EACa;CACR;AACP"}
1	+ {"version":3,"file":"CodeBlockClient.mjs","names":[],"sources":["../../../../src/components/IDE/CodeBlockClient.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport {\n type FC,\n type HTMLAttributes,\n lazy,\n type ReactNode,\n Suspense,\n} from 'react';\nimport type { CodeLanguage } from './shikiLanguages';\n\nexport type { CodeLanguage } from './shikiLanguages';\n\nexport const CodeDefault: FC<{ children: ReactNode }> = ({ children }) => (\n <div className=\"min-w-0 max-w-full overflow-x-auto\">\n <pre className=\"min-w-0 max-w-full overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n <code>\n {typeof children === 'string'\n ? children.split('\\n').map((line, index) => (\n <span\n className=\"line block w-full\"\n key={`line-${index}-${line.slice(0, 10)}`}\n >\n {line}\n </span>\n ))\n : children}\n </code>\n </pre>\n </div>\n);\n\n// Lazy load the Shiki component\nconst CodeBlockShiki = lazy(() =>\n import('./CodeBlockShiki').then((mod) => ({\n default: mod.CodeBlockShiki,\n }))\n);\n\nexport type CodeBlockProps = {\n children: React.ReactNode;\n lang: CodeLanguage;\n isDarkMode?: boolean;\n isEditable?: boolean;\n onChange?: (content: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;\n\nexport const CodeBlock: FC<CodeBlockProps> = ({\n className,\n onChange,\n isEditable,\n children,\n lang,\n isDarkMode,\n ...props\n}) => (\n <div\n className={cn('flex w-full min-w-0 max-w-full overflow-x-auto', className)}\n {...props}\n >\n <Suspense fallback={<CodeDefault>{children}</CodeDefault>}>\n <CodeBlockShiki lang={lang} isDarkMode={isDarkMode}>\n {children}\n </CodeBlockShiki>\n </Suspense>\n </div>\n);\n"],"mappings":";;;;;AAYA,MAAa,eAA4C,EAAE,eACzD,oBAAC,OAAD;CAAK,WAAU;WACb,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,QAAD,YACG,OAAO,aAAa,WACjB,SAAS,MAAM,IAAI,CAAC,CAAC,KAAK,MAAM,UAC9B,oBAAC,QAAD;GACE,WAAU;aAGT;EACG,GAHC,QAAQ,MAAM,GAAG,KAAK,MAAM,GAAG,EAAE,GAGlC,CACP,IACD,SACA;CACH;AACF;AAIP,MAAM,iBAAiB,WACrB,OAAO,uBAAmB,CAAC,MAAM,SAAS,EACxC,SAAS,IAAI,eACf,EAAE,CACJ;AAUA,MAAa,aAAiC,EAC5C,WACA,UACA,YACA,UACA,MACA,YACA,GAAG,YAEH,oBAAC,OAAD;CACE,WAAW,GAAG,kDAAkD,SAAS;CACzE,GAAI;WAEJ,oBAAC,UAAD;EAAU,UAAU,oBAAC,aAAD,EAAc,SAAsB;YACtD,oBAAC,gBAAD;GAAsB;GAAkB;GACrC;EACa;CACR;AACP"}

package/dist/esm/components/IDE/CodeBlockHighlight.mjs CHANGED Viewed

@@ -1,5 +1,6 @@
 'use client';
+import { resolveCodeLanguage } from "./shikiLanguages.mjs";
 import { useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -11,18 +12,6 @@ import { jsx } from "react/jsx-runtime";
 * - The transformer is only dynamically imported when a non-TypeScript format is selected.
 * - The previous highlighted HTML stays visible while the new one loads (no white-text flash).
 */
-/**
-* Map display language names to Shiki grammar identifiers.
-* Shiki's web bundle does not ship a separate 'jsx' grammar — tsx handles both.
-*/
-const toShikiLang = (lang) => {
-	switch (lang) {
-		case "jsx": return "tsx";
-		case "mjs":
-		case "cjs": return "javascript";
-		default: return lang;
-	}
-};
 const CodeBlockHighlight = ({ children, originalLang, targetFormat, isDarkMode }) => {
 	const [html, setHtml] = useState(null);
 	const prevHtml = useRef(null);
@@ -31,12 +20,12 @@ const CodeBlockHighlight = ({ children, originalLang, targetFormat, isDarkMode }
 		(async () => {
 			try {
 				let code = children;
-				let shikiLang = toShikiLang(originalLang);
+				let shikiLang = resolveCodeLanguage(originalLang).id;
 				if (targetFormat !== "typescript") {
 					const { transformCode, deriveLanguage } = await import("./codeTransformer.mjs");
 					if (cancelled) return;
 					code = transformCode(String(children), targetFormat);
-					shikiLang = toShikiLang(deriveLanguage(originalLang, targetFormat));
+					shikiLang = resolveCodeLanguage(deriveLanguage(originalLang, targetFormat)).id;
 				}
 				const { codeToHtml } = await import("shiki/bundle/web");
 				if (cancelled) return;