@intlayer/design-system 9.4.2 → 9.4.3

package/dist/esm/api/index.mjs

@@ -1,12 +1,13 @@
 import { useAiAPI, useAnalyticsAPI, useAssetAPI, useAuditAPI, useBitbucketAPI, useDictionaryAPI, useEditorAPI, useEnvironmentAPI, useGithubAPI, useGitlabAPI, useIntlayerAuth, useIntlayerOAuth, useIntlayerOAuthOptions, useNewsletterAPI, useOAuthAPI, useOrganizationAPI, useProjectAPI, useReviewerAPI, useSearchAPI, useShowcaseProjectAPI, useStripeAPI, useTagAPI, useTranslateAPI, useUserAPI } from "./useIntlayerAPI.mjs";
+import { useAddPasskey, useAskResetPassword, useChangePassword, useDeletePasskey, useDeleteSSOProvider, useDisableTwoFactor, useEnableTwoFactor, useGetUserByAccount, useGetVerifyEmailStatus, useLinkSocial, useListAccounts, useListPasskeys, useListSSOProviders, useLogin, useLogout, useRegister, useRegisterSSO, useResetPassword, useSignInMagicLink, useSignInPasskey, useSignInSSO, useUnlinkAccount, useVerifyBackupCode, useVerifyEmail, useVerifyTotp } from "./hooks/auth.mjs";
 import { useOAuth2 } from "./useAuth/useOAuth2.mjs";
 import { useSession } from "./useAuth/useSession.mjs";
 import { useAuth } from "./useAuth/useAuth.mjs";
+import { useUser } from "./useUser/index.mjs";
 import { useAskDocQuestion, useAuditContentDeclaration, useAuditContentDeclarationField, useAuditContentDeclarationMetadata, useAuditTag, useAutocomplete, useChat, useCustomQuery, useGetAIStats, useTranslateJSONDeclaration } from "./hooks/ai.mjs";
 import { useGetAnalyticsAudience, useGetContentStats, useGetExperimentResults } from "./hooks/analytics.mjs";
 import { useDeleteAsset, useGetAssetById, useGetAssets, useUpdateAsset, useUploadAsset } from "./hooks/asset.mjs";
 import { useAuditScan, useGetRecursiveAuditStatus, useStartRecursiveAudit } from "./hooks/audit.mjs";
-import { useAddPasskey, useAskResetPassword, useChangePassword, useDeletePasskey, useDeleteSSOProvider, useDisableTwoFactor, useEnableTwoFactor, useGetUserByAccount, useGetVerifyEmailStatus, useLinkSocial, useListAccounts, useListPasskeys, useListSSOProviders, useLogin, useLogout, useRegister, useRegisterSSO, useResetPassword, useSignInMagicLink, useSignInPasskey, useSignInSSO, useUnlinkAccount, useVerifyBackupCode, useVerifyEmail, useVerifyTotp } from "./hooks/auth.mjs";
 import { useBitbucketAuth, useBitbucketCheckConfig, useBitbucketGetConfigFile, useBitbucketRepos } from "./hooks/bitbucket.mjs";
 import { useAddDictionary, useDeleteDictionary, useGetDictionaries, useGetDictionariesKeys, useGetDictionary, useInfiniteGetDictionaries, usePushDictionaries, useUpdateDictionary } from "./hooks/dictionary.mjs";
 import { useGetDiscussions, useGetDiscussionsData } from "./hooks/discussions.mjs";
@@ -24,6 +25,5 @@ import { useAcceptAffiliateInvitation, useCancelSubscription, useCreatePortalSes
 import { useAddTag, useDeleteTag, useGetTags, useUpdateTag } from "./hooks/tag.mjs";
 import { useFillAllTranslations, usePauseTranslationJob, useResumeTranslationJob, useStopTranslationJob } from "./hooks/translate.mjs";
 import { useCreateUser, useDeleteUser, useGetUserById, useGetUsers, useUpdateUser, useUploadUserAvatar } from "./hooks/user.mjs";
-import { useUser } from "./useUser/index.mjs";
 
 export { useAcceptAffiliateInvitation, useAddDictionary, useAddEnvironment, useAddNewAccessKey, useAddOrganization, useAddOrganizationMember, useAddPasskey, useAddProject, useAddTag, useAiAPI, useAnalyticsAPI, useAskDocQuestion, useAskResetPassword, useAssetAPI, useAuditAPI, useAuditContentDeclaration, useAuditContentDeclarationField, useAuditContentDeclarationMetadata, useAuditScan, useAuditTag, useAuth, useAutocomplete, useBitbucketAPI, useBitbucketAuth, useBitbucketCheckConfig, useBitbucketGetConfigFile, useBitbucketRepos, useCancelSubscription, useChangePassword, useChat, useContactReviewer, useCreateMission, useCreatePortalSession, useCreatePromoCode, useCreateUser, useCustomQuery, useDeleteAccessKey, useDeleteAsset, useDeleteDictionary, useDeleteEnvironment, useDeleteOrganization, useDeleteOrganizationById, useDeletePasskey, useDeleteProject, useDeleteProjectById, useDeletePromoCode, useDeleteReviewerProfile, useDeleteSSOProvider, useDeleteShowcaseProject, useDeleteTag, useDeleteUser, useDictionaryAPI, useDisableTwoFactor, useEditorAPI, useEnableTwoFactor, useEnvironmentAPI, useEstimateMission, useFillAllTranslations, useGetAIStats, useGetAdminReviewers, useGetAffiliate, useGetAffiliateAccountSession, useGetAffiliateById, useGetAffiliateInvitation, useGetAffiliateInvitations, useGetAffiliateOnboardingLink, useGetAffiliatePromoCode, useGetAffiliateStats, useGetAffiliates, useGetAnalyticsAudience, useGetAssetById, useGetAssets, useGetCIConfig, useGetChatHistory, useGetContentStats, useGetDictionaries, useGetDictionariesKeys, useGetDictionary, useGetDiscussions, useGetDiscussionsData, useGetEditorDictionaries, useGetExperimentResults, useGetInvoices, useGetMissionById, useGetMyMissions, useGetMyReviewerProfile, useGetNewsletterStatus, useGetOrganizations, useGetOtherShowcaseProjects, useGetPaymentMethod, useGetPricing, useGetProjectInsights, useGetProjects, useGetPromoCodeById, useGetPromoCodes, useGetRecursiveAuditStatus, useGetReviewerById, useGetReviewerMarketplace, useGetReviewerPriceDistribution, useGetReviewerReviews, useGetShowcaseProjectById, useGetShowcaseProjects, useGetSubscription, useGetTags, useGetUserByAccount, useGetUserById, useGetUsers, useGetVerifyEmailStatus, useGithubAPI, useGithubAuth, useGithubCheckConfig, useGithubGetAuthUrl, useGithubGetConfigFile, useGithubRepos, useGithubToken, useGitlabAPI, useGitlabAuth, useGitlabCheckConfig, useGitlabGetConfigFile, useGitlabProjects, useGrantAffiliateAccess, useInfiniteGetDictionaries, useIntlayerAuth, useIntlayerOAuth, useIntlayerOAuthOptions, useLinkSocial, useListAccounts, useListPasskeys, useListSSOProviders, useLogin, useLogout, useMigrateEnvironment, useNewsletterAPI, useOAuth2, useOAuthAPI, useOrganizationAPI, usePauseTranslationJob, useProjectAPI, usePushCIConfig, usePushDictionaries, usePushProjectConfiguration, useRefreshAccessKey, useRegister, useRegisterAsReviewer, useRegisterSSO, useResetPassword, useResetToProductionEnvironment, useResumeTranslationJob, useReviewerAPI, useSearchAPI, useSearchDoc, useSelectEnvironment, useSelectOrganization, useSelectProject, useSendAffiliateInvitation, useSendReviewerMessage, useSession, useShowcaseProjectAPI, useSignInMagicLink, useSignInPasskey, useSignInSSO, useStartRecursiveAudit, useStopTranslationJob, useStripeAPI, useSubmitReview, useSubmitShowcaseProject, useSubscribeToNewsletter, useTagAPI, useToggleShowcaseDownvote, useToggleShowcaseUpvote, useTranslateAPI, useTranslateJSONDeclaration, useTriggerBuild, useTriggerWebhook, useUnlinkAccount, useUnselectOrganization, useUnselectProject, useUnsubscribeFromNewsletter, useUpdateAffiliateStatus, useUpdateAsset, useUpdateDictionary, useUpdateEnvironment, useUpdateMemberAccess, useUpdateMissionStatus, useUpdateOrganization, useUpdateOrganizationMailerConfig, useUpdateOrganizationMembers, useUpdateOrganizationMembersById, useUpdateProject, useUpdateProjectMembers, useUpdatePromoCode, useUpdateReviewerProfile, useUpdateShowcaseProject, useUpdateTag, useUpdateUser, useUploadAsset, useUploadReviewerCoverPicture, useUploadReviewerMainPicture, useUploadUserAvatar, useUser, useUserAPI, useValidateReviewerProfile, useVerifyBackupCode, useVerifyEmail, useVerifyTotp, useWriteDictionary };

package/dist/esm/api/useUser/index.mjs

@@ -1,7 +1,7 @@
 'use client';
 
-import { useAuth } from "../useAuth/useAuth.mjs";
 import { useLogout } from "../hooks/auth.mjs";
+import { useAuth } from "../useAuth/useAuth.mjs";
 
 //#region src/api/useUser/index.ts
 const useUser = () => {

package/dist/esm/components/ContentEditor/ContentEditorTextArea.mjs

@@ -1,7 +1,7 @@
 'use client';
 
-import { useUser } from "../../api/useUser/index.mjs";
 import { Button } from "../Button/Button.mjs";
+import { useUser } from "../../api/useUser/index.mjs";
 import { AutoCompleteTextarea } from "../TextArea/AutocompleteTextArea.mjs";
 import { useEffect, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/esm/components/DictionaryFieldEditor/ContentEditorView/TextEditor.mjs

@@ -1,6 +1,5 @@
 'use client';
 
-import { useAuditContentDeclarationField } from "../../../api/hooks/ai.mjs";
 import { Loader } from "../../Loader/index.mjs";
 import { Button } from "../../Button/Button.mjs";
 import { Accordion } from "../../Accordion/Accordion.mjs";
@@ -8,6 +7,7 @@ import { Container } from "../../Container/index.mjs";
 import { ContentEditorInput as ContentEditorInput$1 } from "../../ContentEditor/ContentEditorInput.mjs";
 import { ContentEditorTextArea as ContentEditorTextArea$1 } from "../../ContentEditor/ContentEditorTextArea.mjs";
 import { SwitchSelector } from "../../SwitchSelector/SwitchSelector.mjs";
+import { useAuditContentDeclarationField } from "../../../api/hooks/ai.mjs";
 import { renameKey } from "./object.mjs";
 import { Label } from "../../Label/index.mjs";
 import { useLocaleSwitcherContent } from "../../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";
@@ -16,9 +16,9 @@ import { SafeHtmlRenderer } from "./SafeHtmlRenderer.mjs";
 import { Fragment, Suspense, lazy, memo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Plus, Trash, WandSparkles } from "lucide-react";
-import { useConfiguration, useEditedContent } from "@intlayer/editor-react";
 import { useIntlayer, useLocale } from "react-intlayer";
 import { getLocaleName } from "@intlayer/core/localization";
+import { useConfiguration, useEditedContent } from "@intlayer/editor-react";
 import { getEmptyNode, getNodeType } from "@intlayer/core/dictionaryManipulator";
 import * as NodeTypes from "@intlayer/types/nodeType";
 import { camelCaseToSentence } from "@intlayer/config/client";

package/dist/esm/components/DictionaryFieldEditor/DictionaryCreationForm/DictionaryCreationForm.mjs

@@ -1,9 +1,9 @@
 'use client';
 
+import { Button } from "../../Button/Button.mjs";
 import { useSession } from "../../../api/useAuth/useSession.mjs";
 import { useAddDictionary } from "../../../api/hooks/dictionary.mjs";
 import { useGetProjects } from "../../../api/hooks/project.mjs";
-import { Button } from "../../Button/Button.mjs";
 import { MultiSelect } from "../../Select/Multiselect.mjs";
 import { Select } from "../../Select/Select.mjs";
 import { InputElement } from "../../Form/elements/InputElement.mjs";

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

@@ -1,16 +1,16 @@
 'use client';
 
 import { cn } from "../../../utils/cn.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 { 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 { MultiSelect } from "../../Select/Multiselect.mjs";
 import { Select } from "../../Select/Select.mjs";
 import { FormItem } from "../../Form/FormItem.mjs";
@@ -30,8 +30,8 @@ import { useDictionaryDetailsSchema } from "./useDictionaryDetailsSchema.mjs";
 import { useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { WandSparkles } from "lucide-react";
-import { useEditedContent } from "@intlayer/editor-react";
 import { useIntlayer } from "react-intlayer";
+import { useEditedContent } from "@intlayer/editor-react";
 import { useWatch } from "react-hook-form";
 import { AnimatePresence, motion } from "framer-motion";
 

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

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

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

@@ -5,8 +5,8 @@ import { getIsEditableSection } from "../getIsEditableSection.mjs";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight, Plus } from "lucide-react";
-import { useEditedContentActions, useEditorLocale, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 import { useIntlayer } from "react-intlayer";
+import { useEditedContentActions, useEditorLocale, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 import { getContentNodeByKeyPath, getEmptyNode, getNodeType } from "@intlayer/core/dictionaryManipulator";
 import * as NodeTypes from "@intlayer/types/nodeType";
 import { isSameKeyPath } from "@intlayer/core/utils";

package/dist/esm/components/DictionaryFieldEditor/NodeEditor.mjs

@@ -1,7 +1,7 @@
 'use client';
 
-import { useGetDictionaries } from "../../api/hooks/dictionary.mjs";
 import { Container } from "../Container/index.mjs";
+import { useGetDictionaries } from "../../api/hooks/dictionary.mjs";
 import { LocaleSwitcherContent } from "../LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs";
 import { TextEditorContainer } from "./ContentEditorView/TextEditor.mjs";
 import { Pagination } from "../Pagination/Pagination.mjs";
@@ -10,8 +10,8 @@ import { KeyPathBreadcrumb } from "./KeyPathBreadcrumb.mjs";
 import { NavigationViewNode } from "./NavigationView/NavigationViewNode.mjs";
 import { useCallback, useDeferredValue, useEffect, useMemo, useState, useTransition } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEditedContent, useEditorLocale, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 import { useIntlayer } from "react-intlayer";
+import { useEditedContent, useEditorLocale, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 import { getContentNodeByKeyPath } from "@intlayer/core/dictionaryManipulator";
 
 //#region src/components/DictionaryFieldEditor/NodeEditor.tsx

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

@@ -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 { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowUpFromLine, Download, RotateCcw, Save, Trash } from "lucide-react";
-import { useDictionariesRecordActions, useEditedContent } from "@intlayer/editor-react";
 import { useIntlayer } from "react-intlayer";
+import { useDictionariesRecordActions, useEditedContent } from "@intlayer/editor-react";
 
 //#region src/components/DictionaryFieldEditor/SaveForm/SaveForm.tsx
 const SaveForm = ({ dictionary, mode, className, onDelete, onSave, ...props }) => {

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

@@ -6,8 +6,8 @@ import { EditableFieldInput } from "../../EditableField/EditableFieldInput.mjs";
 import { NodeTypeSelector } from "../NodeTypeSelector.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Plus, Trash } from "lucide-react";
-import { useConfiguration, useEditedContentActions, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 import { useIntlayer } from "react-intlayer";
+import { useConfiguration, useEditedContentActions, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 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/Form/elements/OTPElement.mjs

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

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

@@ -35,7 +35,7 @@ const CodeBlockHighlight = ({ children, originalLang, targetFormat, initialHtml
 					code = transformCode(String(children), targetFormat);
 					shikiLang = resolveCodeLanguage(deriveLanguage(originalLang, targetFormat)).id;
 				}
-				const { codeToHtml } = await import("shiki/bundle/web");
+				const { codeToHtml } = await import("./shikiBundle.mjs");
 				if (cancelled) return;
 				const out = await codeToHtml(String(code), {
 					lang: shikiLang,

package/dist/esm/components/IDE/CodeBlockHighlight.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlockHighlight.mjs","names":[],"sources":["../../../../src/components/IDE/CodeBlockHighlight.tsx"],"sourcesContent":["'use client';\n\n/**\n * Client-side Shiki highlighter that also handles TypeScript→ESM/CJS transformation.\n *\n * Everything runs inside a single useEffect so that:\n * - Nothing is imported at all while the canonical TypeScript source is shown\n *   and its markup was already highlighted ahead of time.\n * - The transformer is only dynamically imported when a non-TypeScript format is selected.\n * - The previous highlighted HTML stays visible while the new one loads (no white-text flash).\n */\n\nimport { type ReactNode, useEffect, useRef, useState } from 'react';\nimport type { CodeFormat } from './CodeContext';\nimport { type CodeLanguage, resolveCodeLanguage } from './shikiLanguages';\nimport { SHIKI_THEMES } from './shikiThemes';\n\ntype Props = {\n  /** Raw TypeScript source code (the canonical \"source of truth\"). */\n  children: ReactNode;\n  /** Language of the source (e.g. 'tsx', 'typescript'). */\n  originalLang: CodeLanguage;\n  /** Currently selected format: 'typescript' | 'esm' | 'commonjs'. */\n  targetFormat: Exclude<CodeFormat, 'json'>;\n  /** Markup for the TypeScript source, highlighted ahead of time. */\n  initialHtml?: string;\n};\n\nexport const CodeBlockHighlight = ({\n  children,\n  originalLang,\n  targetFormat,\n  initialHtml,\n}: Props) => {\n  const [html, setHtml] = useState<string | null>(initialHtml ?? null);\n  const prevHtml = useRef<string | null>(initialHtml ?? null);\n\n  useEffect(() => {\n    // The pre-highlighted markup already is the TypeScript rendering — no need\n    // to pull Shiki into the browser until another format is picked.\n    if (initialHtml && targetFormat === 'typescript') {\n      prevHtml.current = initialHtml;\n      setHtml(initialHtml);\n      return;\n    }\n\n    let cancelled = false;\n\n    (async () => {\n      try {\n        let code = children;\n        let shikiLang = resolveCodeLanguage(originalLang).id;\n\n        // Only import the transformer when we actually need it.\n        if (targetFormat !== 'typescript') {\n          const { transformCode, deriveLanguage } = await import(\n            './codeTransformer'\n          );\n          if (cancelled) return;\n          code = transformCode(String(children), targetFormat);\n          shikiLang = resolveCodeLanguage(\n            deriveLanguage(originalLang, targetFormat)\n          ).id;\n        }\n\n        const { codeToHtml } = await import('shiki/bundle/web');\n        if (cancelled) return;\n\n        const out = await codeToHtml(String(code), {\n          lang: shikiLang,\n          themes: SHIKI_THEMES,\n          defaultColor: false,\n        });\n\n        if (!cancelled) {\n          prevHtml.current = out;\n          setHtml(out);\n        }\n      } catch {\n        // Shiki failed (unknown language, etc.) — fall through to plain-text.\n        if (!cancelled) setHtml('');\n      }\n    })();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [children, originalLang, targetFormat, initialHtml]);\n\n  // Keep the previous highlighted output visible while the new one is loading.\n  // This prevents the white-text flash on format switches.\n  const display = html ?? prevHtml.current;\n\n  if (!display) {\n    return (\n      <pre className=\"min-w-0 max-w-full overflow-x-auto\">\n        <code>{children}</code>\n      </pre>\n    );\n  }\n\n  return (\n    <div\n      // biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki generates safe HTML for code highlighting\n      dangerouslySetInnerHTML={{ __html: display }}\n      style={{ backgroundColor: 'transparent' }}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AA4BA,MAAa,sBAAsB,EACjC,UACA,cACA,cACA,kBACW;CACX,MAAM,CAAC,MAAM,WAAW,SAAwB,eAAe,IAAI;CACnE,MAAM,WAAW,OAAsB,eAAe,IAAI;CAE1D,gBAAgB;EAGd,IAAI,eAAe,iBAAiB,cAAc;GAChD,SAAS,UAAU;GACnB,QAAQ,WAAW;GACnB;EACF;EAEA,IAAI,YAAY;EAEhB,CAAC,YAAY;GACX,IAAI;IACF,IAAI,OAAO;IACX,IAAI,YAAY,oBAAoB,YAAY,CAAC,CAAC;IAGlD,IAAI,iBAAiB,cAAc;KACjC,MAAM,EAAE,eAAe,mBAAmB,MAAM,OAC9C;KAEF,IAAI,WAAW;KACf,OAAO,cAAc,OAAO,QAAQ,GAAG,YAAY;KACnD,YAAY,oBACV,eAAe,cAAc,YAAY,CAC3C,CAAC,CAAC;IACJ;IAEA,MAAM,EAAE,eAAe,MAAM,OAAO;IACpC,IAAI,WAAW;IAEf,MAAM,MAAM,MAAM,WAAW,OAAO,IAAI,GAAG;KACzC,MAAM;KACN,QAAQ;KACR,cAAc;IAChB,CAAC;IAED,IAAI,CAAC,WAAW;KACd,SAAS,UAAU;KACnB,QAAQ,GAAG;IACb;GACF,QAAQ;IAEN,IAAI,CAAC,WAAW,QAAQ,EAAE;GAC5B;EACF,EAAC,CAAE;EAEH,aAAa;GACX,YAAY;EACd;CACF,GAAG;EAAC;EAAU;EAAc;EAAc;CAAW,CAAC;CAItD,MAAM,UAAU,QAAQ,SAAS;CAEjC,IAAI,CAAC,SACH,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,QAAD,EAAO,SAAe;CACnB;CAIT,OACE,oBAAC,OAAD;EAEE,yBAAyB,EAAE,QAAQ,QAAQ;EAC3C,OAAO,EAAE,iBAAiB,cAAc;CACzC;AAEL"}
+{"version":3,"file":"CodeBlockHighlight.mjs","names":[],"sources":["../../../../src/components/IDE/CodeBlockHighlight.tsx"],"sourcesContent":["'use client';\n\n/**\n * Client-side Shiki highlighter that also handles TypeScript→ESM/CJS transformation.\n *\n * Everything runs inside a single useEffect so that:\n * - Nothing is imported at all while the canonical TypeScript source is shown\n *   and its markup was already highlighted ahead of time.\n * - The transformer is only dynamically imported when a non-TypeScript format is selected.\n * - The previous highlighted HTML stays visible while the new one loads (no white-text flash).\n */\n\nimport { type ReactNode, useEffect, useRef, useState } from 'react';\nimport type { CodeFormat } from './CodeContext';\nimport { type CodeLanguage, resolveCodeLanguage } from './shikiLanguages';\nimport { SHIKI_THEMES } from './shikiThemes';\n\ntype Props = {\n  /** Raw TypeScript source code (the canonical \"source of truth\"). */\n  children: ReactNode;\n  /** Language of the source (e.g. 'tsx', 'typescript'). */\n  originalLang: CodeLanguage;\n  /** Currently selected format: 'typescript' | 'esm' | 'commonjs'. */\n  targetFormat: Exclude<CodeFormat, 'json'>;\n  /** Markup for the TypeScript source, highlighted ahead of time. */\n  initialHtml?: string;\n};\n\nexport const CodeBlockHighlight = ({\n  children,\n  originalLang,\n  targetFormat,\n  initialHtml,\n}: Props) => {\n  const [html, setHtml] = useState<string | null>(initialHtml ?? null);\n  const prevHtml = useRef<string | null>(initialHtml ?? null);\n\n  useEffect(() => {\n    // The pre-highlighted markup already is the TypeScript rendering — no need\n    // to pull Shiki into the browser until another format is picked.\n    if (initialHtml && targetFormat === 'typescript') {\n      prevHtml.current = initialHtml;\n      setHtml(initialHtml);\n      return;\n    }\n\n    let cancelled = false;\n\n    (async () => {\n      try {\n        let code = children;\n        let shikiLang = resolveCodeLanguage(originalLang).id;\n\n        // Only import the transformer when we actually need it.\n        if (targetFormat !== 'typescript') {\n          const { transformCode, deriveLanguage } = await import(\n            './codeTransformer'\n          );\n          if (cancelled) return;\n          code = transformCode(String(children), targetFormat);\n          shikiLang = resolveCodeLanguage(\n            deriveLanguage(originalLang, targetFormat)\n          ).id;\n        }\n\n        const { codeToHtml } = await import('./shikiBundle');\n        if (cancelled) return;\n\n        const out = await codeToHtml(String(code), {\n          lang: shikiLang,\n          themes: SHIKI_THEMES,\n          defaultColor: false,\n        });\n\n        if (!cancelled) {\n          prevHtml.current = out;\n          setHtml(out);\n        }\n      } catch {\n        // Shiki failed (unknown language, etc.) — fall through to plain-text.\n        if (!cancelled) setHtml('');\n      }\n    })();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [children, originalLang, targetFormat, initialHtml]);\n\n  // Keep the previous highlighted output visible while the new one is loading.\n  // This prevents the white-text flash on format switches.\n  const display = html ?? prevHtml.current;\n\n  if (!display) {\n    return (\n      <pre className=\"min-w-0 max-w-full overflow-x-auto\">\n        <code>{children}</code>\n      </pre>\n    );\n  }\n\n  return (\n    <div\n      // biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki generates safe HTML for code highlighting\n      dangerouslySetInnerHTML={{ __html: display }}\n      style={{ backgroundColor: 'transparent' }}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AA4BA,MAAa,sBAAsB,EACjC,UACA,cACA,cACA,kBACW;CACX,MAAM,CAAC,MAAM,WAAW,SAAwB,eAAe,IAAI;CACnE,MAAM,WAAW,OAAsB,eAAe,IAAI;CAE1D,gBAAgB;EAGd,IAAI,eAAe,iBAAiB,cAAc;GAChD,SAAS,UAAU;GACnB,QAAQ,WAAW;GACnB;EACF;EAEA,IAAI,YAAY;EAEhB,CAAC,YAAY;GACX,IAAI;IACF,IAAI,OAAO;IACX,IAAI,YAAY,oBAAoB,YAAY,CAAC,CAAC;IAGlD,IAAI,iBAAiB,cAAc;KACjC,MAAM,EAAE,eAAe,mBAAmB,MAAM,OAC9C;KAEF,IAAI,WAAW;KACf,OAAO,cAAc,OAAO,QAAQ,GAAG,YAAY;KACnD,YAAY,oBACV,eAAe,cAAc,YAAY,CAC3C,CAAC,CAAC;IACJ;IAEA,MAAM,EAAE,eAAe,MAAM,OAAO;IACpC,IAAI,WAAW;IAEf,MAAM,MAAM,MAAM,WAAW,OAAO,IAAI,GAAG;KACzC,MAAM;KACN,QAAQ;KACR,cAAc;IAChB,CAAC;IAED,IAAI,CAAC,WAAW;KACd,SAAS,UAAU;KACnB,QAAQ,GAAG;IACb;GACF,QAAQ;IAEN,IAAI,CAAC,WAAW,QAAQ,EAAE;GAC5B;EACF,EAAC,CAAE;EAEH,aAAa;GACX,YAAY;EACd;CACF,GAAG;EAAC;EAAU;EAAc;EAAc;CAAW,CAAC;CAItD,MAAM,UAAU,QAAQ,SAAS;CAEjC,IAAI,CAAC,SACH,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,QAAD,EAAO,SAAe;CACnB;CAIT,OACE,oBAAC,OAAD;EAEE,yBAAyB,EAAE,QAAQ,QAAQ;EAC3C,OAAO,EAAE,iBAAiB,cAAc;CACzC;AAEL"}

package/dist/esm/components/IDE/CodeBlockServer.mjs

@@ -1,9 +1,9 @@
 import { cn } from "../../utils/cn.mjs";
 import { SHIKI_THEMES } from "./shikiThemes.mjs";
+import { codeToHtml } from "./shikiBundle.mjs";
 import { Suspense } from "react";
 import { jsx } from "react/jsx-runtime";
 import { transformerMetaHighlight, transformerMetaWordHighlight, transformerNotationDiff, transformerNotationErrorLevel, transformerNotationHighlight, transformerNotationWordHighlight } from "@shikijs/transformers";
-import { codeToHtml } from "shiki/bundle/web";
 
 //#region src/components/IDE/CodeBlockServer.tsx
 const CodeBlockShiki = (async ({ children, lang, onChange, ...props }) => {

package/dist/esm/components/IDE/CodeBlockServer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlockServer.mjs","names":[],"sources":["../../../../src/components/IDE/CodeBlockServer.tsx"],"sourcesContent":["import {\n  transformerMetaHighlight,\n  transformerMetaWordHighlight,\n  transformerNotationDiff,\n  transformerNotationErrorLevel,\n  transformerNotationHighlight,\n  transformerNotationWordHighlight,\n} from '@shikijs/transformers';\nimport { cn } from '@utils/cn';\nimport { type FC, type HTMLAttributes, Suspense } from 'react';\nimport {\n  type BundledLanguage,\n  type BundledTheme,\n  type CodeToHastOptions,\n  codeToHtml,\n} from 'shiki/bundle/web';\nimport { SHIKI_THEMES } from './shikiThemes';\n\nexport const CodeBlockShiki = (async ({\n  children,\n  lang,\n  onChange,\n  ...props\n}: CodeBlockProps) => {\n  const shikiOptions: CodeToHastOptions<BundledLanguage, BundledTheme> = {\n    lang,\n    themes: SHIKI_THEMES,\n    // Both palettes ship as CSS variables, so one markup serves both themes.\n    defaultColor: false,\n    transformers: [\n      transformerNotationDiff(),\n      transformerNotationHighlight(),\n      transformerNotationWordHighlight(),\n      transformerNotationErrorLevel(),\n      transformerMetaHighlight(),\n      transformerMetaWordHighlight(),\n    ],\n  };\n\n  const out = await codeToHtml(children, shikiOptions);\n\n  return (\n    <div\n      dangerouslySetInnerHTML={{ __html: out }}\n      {...props}\n      style={{ backgroundColor: 'transparent' }}\n    />\n  );\n}) as unknown as FC<CodeBlockProps>;\n\nconst CodeDefault: FC<CodeBlockProps> = ({\n  children,\n  isEditable,\n  onChange,\n  ...props\n}) => (\n  <div contentEditable={isEditable} {...props}>\n    <pre>\n      <code>\n        {typeof children === 'string'\n          ? children.split('\\n').map((line, index) => (\n              <span className=\"line block w-full\" key={index}>\n                {line}\n              </span>\n            ))\n          : children}\n      </code>\n    </pre>\n  </div>\n);\n\nexport type CodeBlockProps = {\n  children: string;\n  lang: BundledLanguage;\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  ...props\n}) => (\n  <Suspense fallback={<CodeDefault {...props} />}>\n    <CodeBlockShiki\n      className={cn('flex w-full', className)}\n      contentEditable={isEditable}\n      onInput={(e) => onChange?.(e.currentTarget.textContent ?? '')}\n      {...props}\n    />\n  </Suspense>\n);\n"],"mappings":";;;;;;;;AAkBA,MAAa,kBAAkB,OAAO,EACpC,UACA,MACA,UACA,GAAG,YACiB;CACpB,MAAM,eAAiE;EACrE;EACA,QAAQ;EAER,cAAc;EACd,cAAc;GACZ,wBAAwB;GACxB,6BAA6B;GAC7B,iCAAiC;GACjC,8BAA8B;GAC9B,yBAAyB;GACzB,6BAA6B;EAC/B;CACF;CAEA,MAAM,MAAM,MAAM,WAAW,UAAU,YAAY;CAEnD,OACE,oBAAC,OAAD;EACE,yBAAyB,EAAE,QAAQ,IAAI;EACvC,GAAI;EACJ,OAAO,EAAE,iBAAiB,cAAc;CACzC;AAEL;AAEA,MAAM,eAAmC,EACvC,UACA,YACA,UACA,GAAG,YAEH,oBAAC,OAAD;CAAK,iBAAiB;CAAY,GAAI;WACpC,oBAAC,OAAD,YACE,oBAAC,QAAD,YACG,OAAO,aAAa,WACjB,SAAS,MAAM,IAAI,CAAC,CAAC,KAAK,MAAM,UAC9B,oBAAC,QAAD;EAAM,WAAU;YACb;CACG,GAFmC,KAEnC,CACP,IACD,SACA,GACH;AACF;AAUP,MAAa,aAAiC,EAC5C,WACA,UACA,YACA,GAAG,YAEH,oBAAC,UAAD;CAAU,UAAU,oBAAC,aAAD,EAAa,GAAI,MAAQ;WAC3C,oBAAC,gBAAD;EACE,WAAW,GAAG,eAAe,SAAS;EACtC,iBAAiB;EACjB,UAAU,MAAM,WAAW,EAAE,cAAc,eAAe,EAAE;EAC5D,GAAI;CACL;AACO"}
+{"version":3,"file":"CodeBlockServer.mjs","names":[],"sources":["../../../../src/components/IDE/CodeBlockServer.tsx"],"sourcesContent":["import {\n  transformerMetaHighlight,\n  transformerMetaWordHighlight,\n  transformerNotationDiff,\n  transformerNotationErrorLevel,\n  transformerNotationHighlight,\n  transformerNotationWordHighlight,\n} from '@shikijs/transformers';\nimport { cn } from '@utils/cn';\nimport { type FC, type HTMLAttributes, Suspense } from 'react';\nimport { type BundledLanguage, codeToHtml } from './shikiBundle';\nimport { SHIKI_THEMES } from './shikiThemes';\n\nexport const CodeBlockShiki = (async ({\n  children,\n  lang,\n  onChange,\n  ...props\n}: CodeBlockProps) => {\n  const shikiOptions: Parameters<typeof codeToHtml>[1] = {\n    lang,\n    themes: SHIKI_THEMES,\n    // Both palettes ship as CSS variables, so one markup serves both themes.\n    defaultColor: false,\n    transformers: [\n      transformerNotationDiff(),\n      transformerNotationHighlight(),\n      transformerNotationWordHighlight(),\n      transformerNotationErrorLevel(),\n      transformerMetaHighlight(),\n      transformerMetaWordHighlight(),\n    ],\n  };\n\n  const out = await codeToHtml(children, shikiOptions);\n\n  return (\n    <div\n      dangerouslySetInnerHTML={{ __html: out }}\n      {...props}\n      style={{ backgroundColor: 'transparent' }}\n    />\n  );\n}) as unknown as FC<CodeBlockProps>;\n\nconst CodeDefault: FC<CodeBlockProps> = ({\n  children,\n  isEditable,\n  onChange,\n  ...props\n}) => (\n  <div contentEditable={isEditable} {...props}>\n    <pre>\n      <code>\n        {typeof children === 'string'\n          ? children.split('\\n').map((line, index) => (\n              <span className=\"line block w-full\" key={index}>\n                {line}\n              </span>\n            ))\n          : children}\n      </code>\n    </pre>\n  </div>\n);\n\nexport type CodeBlockProps = {\n  children: string;\n  lang: BundledLanguage;\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  ...props\n}) => (\n  <Suspense fallback={<CodeDefault {...props} />}>\n    <CodeBlockShiki\n      className={cn('flex w-full', className)}\n      contentEditable={isEditable}\n      onInput={(e) => onChange?.(e.currentTarget.textContent ?? '')}\n      {...props}\n    />\n  </Suspense>\n);\n"],"mappings":";;;;;;;;AAaA,MAAa,kBAAkB,OAAO,EACpC,UACA,MACA,UACA,GAAG,YACiB;CACpB,MAAM,eAAiD;EACrD;EACA,QAAQ;EAER,cAAc;EACd,cAAc;GACZ,wBAAwB;GACxB,6BAA6B;GAC7B,iCAAiC;GACjC,8BAA8B;GAC9B,yBAAyB;GACzB,6BAA6B;EAC/B;CACF;CAEA,MAAM,MAAM,MAAM,WAAW,UAAU,YAAY;CAEnD,OACE,oBAAC,OAAD;EACE,yBAAyB,EAAE,QAAQ,IAAI;EACvC,GAAI;EACJ,OAAO,EAAE,iBAAiB,cAAc;CACzC;AAEL;AAEA,MAAM,eAAmC,EACvC,UACA,YACA,UACA,GAAG,YAEH,oBAAC,OAAD;CAAK,iBAAiB;CAAY,GAAI;WACpC,oBAAC,OAAD,YACE,oBAAC,QAAD,YACG,OAAO,aAAa,WACjB,SAAS,MAAM,IAAI,CAAC,CAAC,KAAK,MAAM,UAC9B,oBAAC,QAAD;EAAM,WAAU;YACb;CACG,GAFmC,KAEnC,CACP,IACD,SACA,GACH;AACF;AAUP,MAAa,aAAiC,EAC5C,WACA,UACA,YACA,GAAG,YAEH,oBAAC,UAAD;CAAU,UAAU,oBAAC,aAAD,EAAa,GAAI,MAAQ;WAC3C,oBAAC,gBAAD;EACE,WAAW,GAAG,eAAe,SAAS;EACtC,iBAAiB;EACjB,UAAU,MAAM,WAAW,EAAE,cAAc,eAAe,EAAE;EAC5D,GAAI;CACL;AACO"}

package/dist/esm/components/IDE/CodeBlockShiki.mjs

@@ -7,60 +7,18 @@ import { useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/IDE/CodeBlockShiki.tsx
-const languageCache = /* @__PURE__ */ new Map();
-const themeCache = /* @__PURE__ */ new Map();
-/**
-* Lazy load the grammar of an already resolved language.
-*
-* @returns The grammar registrations, or `null` for languages Shiki renders
-* without a grammar (plain text).
-*/
-const loadLanguage = async ({ id, loadGrammar }) => {
-	if (!loadGrammar) return null;
-	const cachedLanguage = languageCache.get(id);
-	if (cachedLanguage) return cachedLanguage;
-	const languagePromise = loadGrammar().then((module) => module.default);
-	languageCache.set(id, languagePromise);
-	return languagePromise;
-};
-/**
-* Lazy load a theme module.
-*/
-const loadTheme = async (themeName) => {
-	const cachedTheme = themeCache.get(themeName);
-	if (cachedTheme) return cachedTheme;
-	const themePromise = (themeName === SHIKI_THEMES.dark ? import("shiki/themes/github-dark.mjs") : import("shiki/themes/github-light.mjs")).then((module) => module.default);
-	themeCache.set(themeName, themePromise);
-	return themePromise;
-};
-let highlighterPromise = null;
-const getHighlighterInstance = async () => {
-	if (!highlighterPromise) highlighterPromise = import("shiki/bundle/web").then(({ createHighlighter }) => createHighlighter({
-		langs: [],
-		themes: []
-	}));
-	return highlighterPromise;
-};
 /**
 * Highlight a snippet, lazily loading only the grammar and themes it needs.
 *
 * The language is resolved to a canonical Shiki id first, so that the id passed
-* to `codeToHtml` always matches the grammar that was loaded.
+* to `codeToHtml` always matches a grammar the bundle can load. Shiki itself is
+* imported from `./shikiBundle` — the fine-grained bundle — and only once a
+* snippet actually has to be highlighted in the browser.
 */
 const highlightCode = async (code, lang) => {
-	const resolvedLanguage = resolveCodeLanguage(lang);
-	const [highlighter, languageModule, lightTheme, darkTheme] = await Promise.all([
-		getHighlighterInstance(),
-		loadLanguage(resolvedLanguage),
-		loadTheme(SHIKI_THEMES.light),
-		loadTheme(SHIKI_THEMES.dark)
-	]);
-	if (languageModule && !highlighter.getLoadedLanguages().includes(resolvedLanguage.id)) await highlighter.loadLanguage(languageModule);
-	const loadedThemes = highlighter.getLoadedThemes();
-	if (!loadedThemes.includes(SHIKI_THEMES.light)) await highlighter.loadTheme(lightTheme);
-	if (!loadedThemes.includes(SHIKI_THEMES.dark)) await highlighter.loadTheme(darkTheme);
-	return highlighter.codeToHtml(String(code), {
-		lang: resolvedLanguage.id,
+	const { codeToHtml } = await import("./shikiBundle.mjs");
+	return codeToHtml(String(code), {
+		lang: resolveCodeLanguage(lang).id,
 		themes: SHIKI_THEMES,
 		defaultColor: false
 	});

package/dist/esm/components/IDE/CodeBlockShiki.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlockShiki.mjs","names":[],"sources":["../../../../src/components/IDE/CodeBlockShiki.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type ReactNode, useEffect, useState } from 'react';\nimport { CodeDefault, shikiWrapperClassName } from './CodeBlockClient';\nimport {\n  type CodeLanguage,\n  type LanguageGrammar,\n  type ResolvedCodeLanguage,\n  resolveCodeLanguage,\n} from './shikiLanguages';\nimport { SHIKI_THEMES } from './shikiThemes';\n\n/** Theme registration, as default-exported by the `shiki/themes/*` modules. */\ntype ThemeRegistration =\n  typeof import('shiki/themes/github-dark.mjs')['default'];\n\n/** Minimal Shiki highlighter surface used here, with unrestricted language ids. */\ntype CodeHighlighter = {\n  getLoadedLanguages(): string[];\n  getLoadedThemes(): string[];\n  loadLanguage(grammar: LanguageGrammar): Promise<void>;\n  loadTheme(theme: ThemeRegistration): Promise<void>;\n  codeToHtml(\n    code: string,\n    options: {\n      lang: string;\n      themes: { light: string; dark: string };\n      defaultColor: false;\n    }\n  ): string;\n};\n\n// Map of in-flight/loaded modules to avoid re-importing\nconst languageCache = new Map<string, Promise<LanguageGrammar>>();\nconst themeCache = new Map<string, Promise<ThemeRegistration>>();\n\n/**\n * Lazy load the grammar of an already resolved language.\n *\n * @returns The grammar registrations, or `null` for languages Shiki renders\n * without a grammar (plain text).\n */\nconst loadLanguage = async ({\n  id,\n  loadGrammar,\n}: ResolvedCodeLanguage): Promise<LanguageGrammar | null> => {\n  if (!loadGrammar) return null;\n\n  const cachedLanguage = languageCache.get(id);\n  if (cachedLanguage) return cachedLanguage;\n\n  const languagePromise = loadGrammar().then((module) => module.default);\n  languageCache.set(id, languagePromise);\n\n  return languagePromise;\n};\n\n/**\n * Lazy load a theme module.\n */\nconst loadTheme = async (themeName: string): Promise<ThemeRegistration> => {\n  const cachedTheme = themeCache.get(themeName);\n  if (cachedTheme) return cachedTheme;\n\n  const themePromise = (\n    themeName === SHIKI_THEMES.dark\n      ? import('shiki/themes/github-dark.mjs')\n      : import('shiki/themes/github-light.mjs')\n  ).then((module) => module.default);\n\n  themeCache.set(themeName, themePromise);\n\n  return themePromise;\n};\n\n// Singleton Highlighter Instance\nlet highlighterPromise: Promise<CodeHighlighter> | null = null;\n\nconst getHighlighterInstance = async () => {\n  if (!highlighterPromise) {\n    highlighterPromise = import('shiki/bundle/web').then(\n      ({ createHighlighter }) =>\n        createHighlighter({\n          langs: [],\n          themes: [],\n        })\n    );\n  }\n  return highlighterPromise;\n};\n\n/**\n * Highlight a snippet, lazily loading only the grammar and themes it needs.\n *\n * The language is resolved to a canonical Shiki id first, so that the id passed\n * to `codeToHtml` always matches the grammar that was loaded.\n */\nconst highlightCode = async (\n  code: ReactNode,\n  lang: CodeLanguage\n): Promise<string> => {\n  const resolvedLanguage = resolveCodeLanguage(lang);\n\n  // Load highlighter, language, and themes in parallel\n  const [highlighter, languageModule, lightTheme, darkTheme] =\n    await Promise.all([\n      getHighlighterInstance(),\n      loadLanguage(resolvedLanguage),\n      loadTheme(SHIKI_THEMES.light),\n      loadTheme(SHIKI_THEMES.dark),\n    ]);\n\n  // Load into the singleton instance if not already loaded\n  if (\n    languageModule &&\n    !highlighter.getLoadedLanguages().includes(resolvedLanguage.id)\n  ) {\n    await highlighter.loadLanguage(languageModule);\n  }\n\n  const loadedThemes = highlighter.getLoadedThemes();\n  if (!loadedThemes.includes(SHIKI_THEMES.light)) {\n    await highlighter.loadTheme(lightTheme);\n  }\n  if (!loadedThemes.includes(SHIKI_THEMES.dark)) {\n    await highlighter.loadTheme(darkTheme);\n  }\n\n  return highlighter.codeToHtml(String(code), {\n    lang: resolvedLanguage.id,\n    themes: SHIKI_THEMES,\n    defaultColor: false,\n  });\n};\n\nexport type CodeBlockShikiProps = {\n  children: ReactNode;\n  lang: CodeLanguage;\n};\n\nexport const CodeBlockShiki: FC<CodeBlockShikiProps> = ({ children, lang }) => {\n  const [html, setHtml] = useState<string | null>(null);\n\n  useEffect(() => {\n    let isCancelled = false;\n\n    highlightCode(children, lang)\n      .then((result) => {\n        if (!isCancelled) setHtml(result);\n      })\n      .catch((error) => {\n        console.error('Failed to highlight code:', error);\n        if (!isCancelled) setHtml('');\n      });\n\n    return () => {\n      isCancelled = true;\n    };\n  }, [children, lang]);\n\n  return (\n    <div className={shikiWrapperClassName}>\n      {html ? (\n        // biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki generates safe HTML for code highlighting\n        <div dangerouslySetInnerHTML={{ __html: html }} />\n      ) : (\n        <CodeDefault>{children}</CodeDefault>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAiCA,MAAM,gCAAgB,IAAI,IAAsC;AAChE,MAAM,6BAAa,IAAI,IAAwC;;;;;;;AAQ/D,MAAM,eAAe,OAAO,EAC1B,IACA,kBAC2D;CAC3D,IAAI,CAAC,aAAa,OAAO;CAEzB,MAAM,iBAAiB,cAAc,IAAI,EAAE;CAC3C,IAAI,gBAAgB,OAAO;CAE3B,MAAM,kBAAkB,YAAY,CAAC,CAAC,MAAM,WAAW,OAAO,OAAO;CACrE,cAAc,IAAI,IAAI,eAAe;CAErC,OAAO;AACT;;;;AAKA,MAAM,YAAY,OAAO,cAAkD;CACzE,MAAM,cAAc,WAAW,IAAI,SAAS;CAC5C,IAAI,aAAa,OAAO;CAExB,MAAM,gBACJ,cAAc,aAAa,OACvB,OAAO,kCACP,OAAO,iCAAgC,CAC3C,MAAM,WAAW,OAAO,OAAO;CAEjC,WAAW,IAAI,WAAW,YAAY;CAEtC,OAAO;AACT;AAGA,IAAI,qBAAsD;AAE1D,MAAM,yBAAyB,YAAY;CACzC,IAAI,CAAC,oBACH,qBAAqB,OAAO,mBAAmB,CAAC,MAC7C,EAAE,wBACD,kBAAkB;EAChB,OAAO,CAAC;EACR,QAAQ,CAAC;CACX,CAAC,CACL;CAEF,OAAO;AACT;;;;;;;AAQA,MAAM,gBAAgB,OACpB,MACA,SACoB;CACpB,MAAM,mBAAmB,oBAAoB,IAAI;CAGjD,MAAM,CAAC,aAAa,gBAAgB,YAAY,aAC9C,MAAM,QAAQ,IAAI;EAChB,uBAAuB;EACvB,aAAa,gBAAgB;EAC7B,UAAU,aAAa,KAAK;EAC5B,UAAU,aAAa,IAAI;CAC7B,CAAC;CAGH,IACE,kBACA,CAAC,YAAY,mBAAmB,CAAC,CAAC,SAAS,iBAAiB,EAAE,GAE9D,MAAM,YAAY,aAAa,cAAc;CAG/C,MAAM,eAAe,YAAY,gBAAgB;CACjD,IAAI,CAAC,aAAa,SAAS,aAAa,KAAK,GAC3C,MAAM,YAAY,UAAU,UAAU;CAExC,IAAI,CAAC,aAAa,SAAS,aAAa,IAAI,GAC1C,MAAM,YAAY,UAAU,SAAS;CAGvC,OAAO,YAAY,WAAW,OAAO,IAAI,GAAG;EAC1C,MAAM,iBAAiB;EACvB,QAAQ;EACR,cAAc;CAChB,CAAC;AACH;AAOA,MAAa,kBAA2C,EAAE,UAAU,WAAW;CAC7E,MAAM,CAAC,MAAM,WAAW,SAAwB,IAAI;CAEpD,gBAAgB;EACd,IAAI,cAAc;EAElB,cAAc,UAAU,IAAI,CAAC,CAC1B,MAAM,WAAW;GAChB,IAAI,CAAC,aAAa,QAAQ,MAAM;EAClC,CAAC,CAAC,CACD,OAAO,UAAU;GAChB,QAAQ,MAAM,6BAA6B,KAAK;GAChD,IAAI,CAAC,aAAa,QAAQ,EAAE;EAC9B,CAAC;EAEH,aAAa;GACX,cAAc;EAChB;CACF,GAAG,CAAC,UAAU,IAAI,CAAC;CAEnB,OACE,oBAAC,OAAD;EAAK,WAAW;YACb,OAEC,oBAAC,OAAD,EAAK,yBAAyB,EAAE,QAAQ,KAAK,EAAI,KAEjD,oBAAC,aAAD,EAAc,SAAsB;CAEnC;AAET"}
+{"version":3,"file":"CodeBlockShiki.mjs","names":[],"sources":["../../../../src/components/IDE/CodeBlockShiki.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type ReactNode, useEffect, useState } from 'react';\nimport { CodeDefault, shikiWrapperClassName } from './CodeBlockClient';\nimport { type CodeLanguage, resolveCodeLanguage } from './shikiLanguages';\nimport { SHIKI_THEMES } from './shikiThemes';\n\n/**\n * Highlight a snippet, lazily loading only the grammar and themes it needs.\n *\n * The language is resolved to a canonical Shiki id first, so that the id passed\n * to `codeToHtml` always matches a grammar the bundle can load. Shiki itself is\n * imported from `./shikiBundle` — the fine-grained bundle — and only once a\n * snippet actually has to be highlighted in the browser.\n */\nconst highlightCode = async (\n  code: ReactNode,\n  lang: CodeLanguage\n): Promise<string> => {\n  const { codeToHtml } = await import('./shikiBundle');\n\n  return codeToHtml(String(code), {\n    lang: resolveCodeLanguage(lang).id,\n    themes: SHIKI_THEMES,\n    defaultColor: false,\n  });\n};\n\nexport type CodeBlockShikiProps = {\n  children: ReactNode;\n  lang: CodeLanguage;\n};\n\nexport const CodeBlockShiki: FC<CodeBlockShikiProps> = ({ children, lang }) => {\n  const [html, setHtml] = useState<string | null>(null);\n\n  useEffect(() => {\n    let isCancelled = false;\n\n    highlightCode(children, lang)\n      .then((result) => {\n        if (!isCancelled) setHtml(result);\n      })\n      .catch((error) => {\n        console.error('Failed to highlight code:', error);\n        if (!isCancelled) setHtml('');\n      });\n\n    return () => {\n      isCancelled = true;\n    };\n  }, [children, lang]);\n\n  return (\n    <div className={shikiWrapperClassName}>\n      {html ? (\n        // biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki generates safe HTML for code highlighting\n        <div dangerouslySetInnerHTML={{ __html: html }} />\n      ) : (\n        <CodeDefault>{children}</CodeDefault>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAeA,MAAM,gBAAgB,OACpB,MACA,SACoB;CACpB,MAAM,EAAE,eAAe,MAAM,OAAO;CAEpC,OAAO,WAAW,OAAO,IAAI,GAAG;EAC9B,MAAM,oBAAoB,IAAI,CAAC,CAAC;EAChC,QAAQ;EACR,cAAc;CAChB,CAAC;AACH;AAOA,MAAa,kBAA2C,EAAE,UAAU,WAAW;CAC7E,MAAM,CAAC,MAAM,WAAW,SAAwB,IAAI;CAEpD,gBAAgB;EACd,IAAI,cAAc;EAElB,cAAc,UAAU,IAAI,CAAC,CAC1B,MAAM,WAAW;GAChB,IAAI,CAAC,aAAa,QAAQ,MAAM;EAClC,CAAC,CAAC,CACD,OAAO,UAAU;GAChB,QAAQ,MAAM,6BAA6B,KAAK;GAChD,IAAI,CAAC,aAAa,QAAQ,EAAE;EAC9B,CAAC;EAEH,aAAa;GACX,cAAc;EAChB;CACF,GAAG,CAAC,UAAU,IAAI,CAAC;CAEnB,OACE,oBAAC,OAAD;EAAK,WAAW;YACb,OAEC,oBAAC,OAAD,EAAK,yBAAyB,EAAE,QAAQ,KAAK,EAAI,KAEjD,oBAAC,aAAD,EAAc,SAAsB;CAEnC;AAET"}

package/dist/esm/components/IDE/shikiBundle.mjs

@@ -0,0 +1,61 @@
+import { grammarAliases, grammarLoaders } from "./shikiLanguages.mjs";
+import { createBundledHighlighter, createSingletonShorthands, guessEmbeddedLanguages } from "@shikijs/core";
+import { createOnigurumaEngine } from "@shikijs/engine-oniguruma";
+
+//#region src/components/IDE/shikiBundle.ts
+/**
+* Fine-grained Shiki bundle — a drop-in replacement for `shiki` and
+* `shiki/bundle/web`.
+*
+* Both of those entry points statically pull `@shikijs/themes` (~70 themes) in
+* full, and reference every grammar of their bundle (~220 and ~100
+* respectively). Bundlers that group a package into a single chunk — Nitro does
+* exactly that for `node_modules` — therefore emit ~10 MB of grammars and
+* themes even though only two themes and the languages of
+* {@link grammarLoaders} are ever asked for.
+*
+* This module rebuilds the same public surface on top of `@shikijs/core`, so
+* the module graph only ever contains what is actually reachable. Everything is
+* loaded on demand, exactly like the upstream bundles.
+*
+* @see https://shiki.style/guide/bundles#fine-grained-bundle
+*/
+/**
+* Alias ids pointed at the loader of the grammar that owns them, so that an
+* alias is enough to pull its grammar in — the way it is with the upstream
+* bundles, whose maps carry the same alias entries.
+*/
+const aliasLoaders = Object.fromEntries(Object.entries(grammarAliases).map(([alias, canonicalId]) => [alias, grammarLoaders[canonicalId]]));
+/** Every language id this bundle can highlight, aliases included. */
+const bundledLanguages = {
+	...grammarLoaders,
+	...aliasLoaders
+};
+/** The two themes every code block is highlighted with. */
+const bundledThemes = {
+	"github-light": () => import("shiki/themes/github-light.mjs"),
+	"github-dark": () => import("shiki/themes/github-dark.mjs")
+};
+/**
+* Creates a highlighter that resolves language and theme ids against this
+* bundle, loading each one the first time it is asked for.
+*
+* Ids still have to be the ones a grammar answers to — pass every fence name
+* through {@link resolveCodeLanguage} first, exactly as with `shiki`'s own
+* bundles.
+*/
+const createHighlighter = createBundledHighlighter({
+	langs: bundledLanguages,
+	themes: bundledThemes,
+	engine: () => createOnigurumaEngine(import("shiki/wasm"))
+});
+/**
+* Shorthands backed by a lazily created singleton highlighter — the same
+* `codeToHtml` / `codeToHast` / … functions `shiki` exports, restricted to this
+* bundle.
+*/
+const { codeToHast, codeToHtml, codeToTokens, codeToTokensBase, codeToTokensWithThemes, getLastGrammarState, getSingletonHighlighter } = createSingletonShorthands(createHighlighter, { guessEmbeddedLanguages });
+
+//#endregion
+export { bundledLanguages, bundledThemes, codeToHast, codeToHtml, codeToTokens, codeToTokensBase, codeToTokensWithThemes, createHighlighter, getLastGrammarState, getSingletonHighlighter };
+//# sourceMappingURL=shikiBundle.mjs.map

package/dist/esm/components/IDE/shikiBundle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"shikiBundle.mjs","names":[],"sources":["../../../../src/components/IDE/shikiBundle.ts"],"sourcesContent":["/**\n * Fine-grained Shiki bundle — a drop-in replacement for `shiki` and\n * `shiki/bundle/web`.\n *\n * Both of those entry points statically pull `@shikijs/themes` (~70 themes) in\n * full, and reference every grammar of their bundle (~220 and ~100\n * respectively). Bundlers that group a package into a single chunk — Nitro does\n * exactly that for `node_modules` — therefore emit ~10 MB of grammars and\n * themes even though only two themes and the languages of\n * {@link grammarLoaders} are ever asked for.\n *\n * This module rebuilds the same public surface on top of `@shikijs/core`, so\n * the module graph only ever contains what is actually reachable. Everything is\n * loaded on demand, exactly like the upstream bundles.\n *\n * @see https://shiki.style/guide/bundles#fine-grained-bundle\n */\n\nimport {\n  createBundledHighlighter,\n  createSingletonShorthands,\n  guessEmbeddedLanguages,\n} from '@shikijs/core';\nimport { createOnigurumaEngine } from '@shikijs/engine-oniguruma';\nimport {\n  type GrammarLoader,\n  grammarAliases,\n  grammarLoaders,\n  type ShikiLanguageAlias,\n  type ShikiLanguageId,\n} from './shikiLanguages';\nimport type { ShikiThemeId } from './shikiThemes';\n\n/** Theme registrations, as default-exported by the `shiki/themes/*` modules. */\nexport type ThemeRegistration =\n  typeof import('shiki/themes/github-dark.mjs')['default'];\n\n/** Loads a single Shiki theme. */\nexport type ThemeLoader = () => Promise<{ default: ThemeRegistration }>;\n\n/**\n * Alias ids pointed at the loader of the grammar that owns them, so that an\n * alias is enough to pull its grammar in — the way it is with the upstream\n * bundles, whose maps carry the same alias entries.\n */\nconst aliasLoaders = Object.fromEntries(\n  Object.entries(grammarAliases).map(([alias, canonicalId]) => [\n    alias,\n    grammarLoaders[canonicalId as ShikiLanguageId],\n  ])\n) as Record<ShikiLanguageAlias, GrammarLoader>;\n\n/** Every language id this bundle can highlight, aliases included. */\nexport const bundledLanguages = {\n  ...grammarLoaders,\n  ...aliasLoaders,\n};\n\n/** The two themes every code block is highlighted with. */\nexport const bundledThemes = {\n  'github-light': () => import('shiki/themes/github-light.mjs'),\n  'github-dark': () => import('shiki/themes/github-dark.mjs'),\n} satisfies Record<ShikiThemeId, ThemeLoader>;\n\n/** Language ids accepted by this bundle's highlighter. */\nexport type BundledLanguage = keyof typeof bundledLanguages;\n\n/** Theme ids accepted by this bundle's highlighter. */\nexport type BundledTheme = keyof typeof bundledThemes;\n\n/**\n * Creates a highlighter that resolves language and theme ids against this\n * bundle, loading each one the first time it is asked for.\n *\n * Ids still have to be the ones a grammar answers to — pass every fence name\n * through {@link resolveCodeLanguage} first, exactly as with `shiki`'s own\n * bundles.\n */\nexport const createHighlighter = createBundledHighlighter<\n  BundledLanguage,\n  BundledTheme\n>({\n  langs: bundledLanguages,\n  themes: bundledThemes,\n  engine: () => createOnigurumaEngine(import('shiki/wasm')),\n});\n\n/** Highlighter instance produced by {@link createHighlighter}. */\nexport type Highlighter = Awaited<ReturnType<typeof createHighlighter>>;\n\n/**\n * Shorthands backed by a lazily created singleton highlighter — the same\n * `codeToHtml` / `codeToHast` / … functions `shiki` exports, restricted to this\n * bundle.\n */\nexport const {\n  codeToHast,\n  codeToHtml,\n  codeToTokens,\n  codeToTokensBase,\n  codeToTokensWithThemes,\n  getLastGrammarState,\n  getSingletonHighlighter,\n} = createSingletonShorthands<BundledLanguage, BundledTheme>(\n  createHighlighter,\n  {\n    guessEmbeddedLanguages,\n  }\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAM,eAAe,OAAO,YAC1B,OAAO,QAAQ,cAAc,CAAC,CAAC,KAAK,CAAC,OAAO,iBAAiB,CAC3D,OACA,eAAe,YACjB,CAAC,CACH;;AAGA,MAAa,mBAAmB;CAC9B,GAAG;CACH,GAAG;AACL;;AAGA,MAAa,gBAAgB;CAC3B,sBAAsB,OAAO;CAC7B,qBAAqB,OAAO;AAC9B;;;;;;;;;AAgBA,MAAa,oBAAoB,yBAG/B;CACA,OAAO;CACP,QAAQ;CACR,cAAc,sBAAsB,OAAO,aAAa;AAC1D,CAAC;;;;;;AAUD,MAAa,EACX,YACA,YACA,cACA,kBACA,wBACA,qBACA,4BACE,0BACF,mBACA,EACE,uBACF,CACF"}

package/dist/esm/components/IDE/shikiLanguages.mjs

@@ -7,43 +7,16 @@
 * grammar instead of bundling every language up front.
 */
 const grammarLoaders = {
-	"angular-html": () => import("shiki/langs/angular-html.mjs"),
-	"angular-ts": () => import("shiki/langs/angular-ts.mjs"),
 	astro: () => import("shiki/langs/astro.mjs"),
 	bash: () => import("shiki/langs/bash.mjs"),
-	c: () => import("shiki/langs/c.mjs"),
-	cpp: () => import("shiki/langs/cpp.mjs"),
-	csharp: () => import("shiki/langs/csharp.mjs"),
 	css: () => import("shiki/langs/css.mjs"),
-	csv: () => import("shiki/langs/csv.mjs"),
-	dart: () => import("shiki/langs/dart.mjs"),
-	diff: () => import("shiki/langs/diff.mjs"),
-	docker: () => import("shiki/langs/docker.mjs"),
-	go: () => import("shiki/langs/go.mjs"),
-	graphql: () => import("shiki/langs/graphql.mjs"),
 	html: () => import("shiki/langs/html.mjs"),
-	http: () => import("shiki/langs/http.mjs"),
-	ini: () => import("shiki/langs/ini.mjs"),
-	java: () => import("shiki/langs/java.mjs"),
 	javascript: () => import("shiki/langs/javascript.mjs"),
 	json: () => import("shiki/langs/json.mjs"),
 	json5: () => import("shiki/langs/json5.mjs"),
-	kotlin: () => import("shiki/langs/kotlin.mjs"),
-	less: () => import("shiki/langs/less.mjs"),
-	lua: () => import("shiki/langs/lua.mjs"),
+	jsonc: () => import("shiki/langs/jsonc.mjs"),
 	markdown: () => import("shiki/langs/markdown.mjs"),
-	nginx: () => import("shiki/langs/nginx.mjs"),
-	php: () => import("shiki/langs/php.mjs"),
-	powershell: () => import("shiki/langs/powershell.mjs"),
-	prisma: () => import("shiki/langs/prisma.mjs"),
-	python: () => import("shiki/langs/python.mjs"),
-	ruby: () => import("shiki/langs/ruby.mjs"),
-	rust: () => import("shiki/langs/rust.mjs"),
-	scss: () => import("shiki/langs/scss.mjs"),
-	sql: () => import("shiki/langs/sql.mjs"),
 	svelte: () => import("shiki/langs/svelte.mjs"),
-	swift: () => import("shiki/langs/swift.mjs"),
-	toml: () => import("shiki/langs/toml.mjs"),
 	tsx: () => import("shiki/langs/tsx.mjs"),
 	typescript: () => import("shiki/langs/typescript.mjs"),
 	vue: () => import("shiki/langs/vue.mjs"),
@@ -57,30 +30,20 @@ const shikiLanguageIds = Object.keys(grammarLoaders);
 * canonical id that actually owns the grammar.
 */
 const grammarAliases = {
-	"c#": "csharp",
-	"c++": "cpp",
 	cjs: "javascript",
 	console: "bash",
-	cs: "csharp",
 	cts: "typescript",
 	dockerfile: "docker",
-	golang: "go",
 	gql: "graphql",
 	htm: "html",
 	js: "javascript",
 	jsonc: "json5",
 	jsx: "tsx",
-	kt: "kotlin",
 	md: "markdown",
 	mdx: "markdown",
 	mjs: "javascript",
 	mts: "typescript",
 	postcss: "css",
-	ps1: "powershell",
-	pwsh: "powershell",
-	py: "python",
-	rb: "ruby",
-	rs: "rust",
 	sh: "bash",
 	shell: "bash",
 	shellscript: "bash",
@@ -118,5 +81,5 @@ const resolveCodeLanguage = (language) => {
 };
 
 //#endregion
-export { resolveCodeLanguage, shikiLanguageIds };
+export { grammarAliases, grammarLoaders, resolveCodeLanguage, shikiLanguageIds };
 //# sourceMappingURL=shikiLanguages.mjs.map

package/dist/esm/components/IDE/shikiLanguages.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"shikiLanguages.mjs","names":[],"sources":["../../../../src/components/IDE/shikiLanguages.ts"],"sourcesContent":["/**\n * Grammar registrations, as default-exported by the `shiki/langs/*` modules.\n */\nexport type LanguageGrammar =\n  typeof import('shiki/langs/typescript.mjs')['default'];\n\n/**\n * Loads a single Shiki grammar (and its embedded dependencies).\n */\nexport type GrammarLoader = () => Promise<{ default: LanguageGrammar }>;\n\n/**\n * Shiki grammar loaders, keyed by the canonical Shiki language id.\n *\n * Import specifiers are written as literals (never template strings) so that\n * bundlers can statically analyse them and emit one lazily fetched chunk per\n * grammar instead of bundling every language up front.\n */\nconst grammarLoaders = {\n  'angular-html': () => import('shiki/langs/angular-html.mjs'),\n  'angular-ts': () => import('shiki/langs/angular-ts.mjs'),\n  astro: () => import('shiki/langs/astro.mjs'),\n  bash: () => import('shiki/langs/bash.mjs'),\n  c: () => import('shiki/langs/c.mjs'),\n  cpp: () => import('shiki/langs/cpp.mjs'),\n  csharp: () => import('shiki/langs/csharp.mjs'),\n  css: () => import('shiki/langs/css.mjs'),\n  csv: () => import('shiki/langs/csv.mjs'),\n  dart: () => import('shiki/langs/dart.mjs'),\n  diff: () => import('shiki/langs/diff.mjs'),\n  docker: () => import('shiki/langs/docker.mjs'),\n  go: () => import('shiki/langs/go.mjs'),\n  graphql: () => import('shiki/langs/graphql.mjs'),\n  html: () => import('shiki/langs/html.mjs'),\n  http: () => import('shiki/langs/http.mjs'),\n  ini: () => import('shiki/langs/ini.mjs'),\n  java: () => import('shiki/langs/java.mjs'),\n  javascript: () => import('shiki/langs/javascript.mjs'),\n  json: () => import('shiki/langs/json.mjs'),\n  json5: () => import('shiki/langs/json5.mjs'),\n  kotlin: () => import('shiki/langs/kotlin.mjs'),\n  less: () => import('shiki/langs/less.mjs'),\n  lua: () => import('shiki/langs/lua.mjs'),\n  markdown: () => import('shiki/langs/markdown.mjs'),\n  nginx: () => import('shiki/langs/nginx.mjs'),\n  php: () => import('shiki/langs/php.mjs'),\n  powershell: () => import('shiki/langs/powershell.mjs'),\n  prisma: () => import('shiki/langs/prisma.mjs'),\n  python: () => import('shiki/langs/python.mjs'),\n  ruby: () => import('shiki/langs/ruby.mjs'),\n  rust: () => import('shiki/langs/rust.mjs'),\n  scss: () => import('shiki/langs/scss.mjs'),\n  sql: () => import('shiki/langs/sql.mjs'),\n  svelte: () => import('shiki/langs/svelte.mjs'),\n  swift: () => import('shiki/langs/swift.mjs'),\n  toml: () => import('shiki/langs/toml.mjs'),\n  tsx: () => import('shiki/langs/tsx.mjs'),\n  typescript: () => import('shiki/langs/typescript.mjs'),\n  vue: () => import('shiki/langs/vue.mjs'),\n  xml: () => import('shiki/langs/xml.mjs'),\n  yaml: () => import('shiki/langs/yaml.mjs'),\n} satisfies Record<string, GrammarLoader>;\n\n/** Canonical Shiki language ids this package can highlight. */\nexport type ShikiLanguageId = keyof typeof grammarLoaders;\n\n/** Every canonical language id that ships with a grammar loader. */\nexport const shikiLanguageIds = Object.keys(\n  grammarLoaders\n) as ShikiLanguageId[];\n\n/**\n * Code fence names that are rendered by another grammar, mapped to the\n * canonical id that actually owns the grammar.\n */\nconst grammarAliases = {\n  'c#': 'csharp',\n  'c++': 'cpp',\n  cjs: 'javascript',\n  console: 'bash',\n  cs: 'csharp',\n  cts: 'typescript',\n  dockerfile: 'docker',\n  golang: 'go',\n  gql: 'graphql',\n  htm: 'html',\n  js: 'javascript',\n  jsonc: 'json5',\n  jsx: 'tsx',\n  kt: 'kotlin',\n  md: 'markdown',\n  mdx: 'markdown',\n  mjs: 'javascript',\n  mts: 'typescript',\n  postcss: 'css',\n  ps1: 'powershell',\n  pwsh: 'powershell',\n  py: 'python',\n  rb: 'ruby',\n  rs: 'rust',\n  sh: 'bash',\n  shell: 'bash',\n  shellscript: 'bash',\n  ts: 'typescript',\n  yml: 'yaml',\n  zsh: 'bash',\n} satisfies Record<string, ShikiLanguageId>;\n\n/** Code fence names accepted as aliases of a canonical language id. */\nexport type ShikiLanguageAlias = keyof typeof grammarAliases;\n\n/**\n * Languages Shiki renders without any grammar. They are also used as the\n * fallback for languages this package does not ship a grammar for.\n */\nexport type PlainTextLanguage = 'plaintext' | 'text' | 'txt';\n\nconst PLAIN_TEXT_LANGUAGE = 'plaintext' satisfies PlainTextLanguage;\n\n/** Every language name accepted by the code block components. */\nexport type CodeLanguage =\n  | ShikiLanguageId\n  | ShikiLanguageAlias\n  | PlainTextLanguage;\n\n/**\n * A language name resolved to what Shiki actually needs to highlight it.\n */\nexport type ResolvedCodeLanguage = {\n  /** Canonical language id to pass to `codeToHtml` / `codeToHast`. */\n  id: ShikiLanguageId | PlainTextLanguage;\n  /** Grammar loader, or `null` when the language needs no grammar. */\n  loadGrammar: GrammarLoader | null;\n};\n\n/**\n * Resolve a code fence language name to a canonical Shiki id and its grammar\n * loader.\n *\n * Unknown names resolve to plain text rather than to an arbitrary grammar, so\n * that `codeToHtml` never receives a language it has not loaded.\n *\n * @param language - Language name coming from a code fence or a `lang` prop.\n *\n * @example\n * resolveCodeLanguage('ts'); // { id: 'typescript', loadGrammar: fn }\n * resolveCodeLanguage('toml'); // { id: 'toml', loadGrammar: fn }\n * resolveCodeLanguage('brainfuck'); // { id: 'plaintext', loadGrammar: null }\n */\nexport const resolveCodeLanguage = (\n  language: CodeLanguage | string | undefined | null\n): ResolvedCodeLanguage => {\n  const normalizedLanguage = (language ?? '').trim().toLowerCase();\n\n  const canonicalId =\n    grammarAliases[normalizedLanguage as ShikiLanguageAlias] ??\n    (normalizedLanguage as ShikiLanguageId);\n\n  const loadGrammar = grammarLoaders[canonicalId] as GrammarLoader | undefined;\n\n  if (!loadGrammar) {\n    return { id: PLAIN_TEXT_LANGUAGE, loadGrammar: null };\n  }\n\n  return { id: canonicalId, loadGrammar };\n};\n"],"mappings":";;;;;;;;AAkBA,MAAM,iBAAiB;CACrB,sBAAsB,OAAO;CAC7B,oBAAoB,OAAO;CAC3B,aAAa,OAAO;CACpB,YAAY,OAAO;CACnB,SAAS,OAAO;CAChB,WAAW,OAAO;CAClB,cAAc,OAAO;CACrB,WAAW,OAAO;CAClB,WAAW,OAAO;CAClB,YAAY,OAAO;CACnB,YAAY,OAAO;CACnB,cAAc,OAAO;CACrB,UAAU,OAAO;CACjB,eAAe,OAAO;CACtB,YAAY,OAAO;CACnB,YAAY,OAAO;CACnB,WAAW,OAAO;CAClB,YAAY,OAAO;CACnB,kBAAkB,OAAO;CACzB,YAAY,OAAO;CACnB,aAAa,OAAO;CACpB,cAAc,OAAO;CACrB,YAAY,OAAO;CACnB,WAAW,OAAO;CAClB,gBAAgB,OAAO;CACvB,aAAa,OAAO;CACpB,WAAW,OAAO;CAClB,kBAAkB,OAAO;CACzB,cAAc,OAAO;CACrB,cAAc,OAAO;CACrB,YAAY,OAAO;CACnB,YAAY,OAAO;CACnB,YAAY,OAAO;CACnB,WAAW,OAAO;CAClB,cAAc,OAAO;CACrB,aAAa,OAAO;CACpB,YAAY,OAAO;CACnB,WAAW,OAAO;CAClB,kBAAkB,OAAO;CACzB,WAAW,OAAO;CAClB,WAAW,OAAO;CAClB,YAAY,OAAO;AACrB;;AAMA,MAAa,mBAAmB,OAAO,KACrC,cACF;;;;;AAMA,MAAM,iBAAiB;CACrB,MAAM;CACN,OAAO;CACP,KAAK;CACL,SAAS;CACT,IAAI;CACJ,KAAK;CACL,YAAY;CACZ,QAAQ;CACR,KAAK;CACL,KAAK;CACL,IAAI;CACJ,OAAO;CACP,KAAK;CACL,IAAI;CACJ,IAAI;CACJ,KAAK;CACL,KAAK;CACL,KAAK;CACL,SAAS;CACT,KAAK;CACL,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,aAAa;CACb,IAAI;CACJ,KAAK;CACL,KAAK;AACP;AAWA,MAAM,sBAAsB;;;;;;;;;;;;;;;AAgC5B,MAAa,uBACX,aACyB;CACzB,MAAM,sBAAsB,YAAY,GAAE,CAAE,KAAK,CAAC,CAAC,YAAY;CAE/D,MAAM,cACJ,eAAe,uBACd;CAEH,MAAM,cAAc,eAAe;CAEnC,IAAI,CAAC,aACH,OAAO;EAAE,IAAI;EAAqB,aAAa;CAAK;CAGtD,OAAO;EAAE,IAAI;EAAa;CAAY;AACxC"}
+{"version":3,"file":"shikiLanguages.mjs","names":[],"sources":["../../../../src/components/IDE/shikiLanguages.ts"],"sourcesContent":["/**\n * Grammar registrations, as default-exported by the `shiki/langs/*` modules.\n */\nexport type LanguageGrammar =\n  typeof import('shiki/langs/typescript.mjs')['default'];\n\n/**\n * Loads a single Shiki grammar (and its embedded dependencies).\n */\nexport type GrammarLoader = () => Promise<{ default: LanguageGrammar }>;\n\n/**\n * Shiki grammar loaders, keyed by the canonical Shiki language id.\n *\n * Import specifiers are written as literals (never template strings) so that\n * bundlers can statically analyse them and emit one lazily fetched chunk per\n * grammar instead of bundling every language up front.\n */\nexport const grammarLoaders = {\n  astro: () => import('shiki/langs/astro.mjs'),\n  bash: () => import('shiki/langs/bash.mjs'),\n  css: () => import('shiki/langs/css.mjs'),\n  html: () => import('shiki/langs/html.mjs'),\n  javascript: () => import('shiki/langs/javascript.mjs'),\n  json: () => import('shiki/langs/json.mjs'),\n  json5: () => import('shiki/langs/json5.mjs'),\n  jsonc: () => import('shiki/langs/jsonc.mjs'),\n  markdown: () => import('shiki/langs/markdown.mjs'),\n  svelte: () => import('shiki/langs/svelte.mjs'),\n  tsx: () => import('shiki/langs/tsx.mjs'),\n  typescript: () => import('shiki/langs/typescript.mjs'),\n  vue: () => import('shiki/langs/vue.mjs'),\n  xml: () => import('shiki/langs/xml.mjs'),\n  yaml: () => import('shiki/langs/yaml.mjs'),\n  // 'angular-html': () => import('shiki/langs/angular-html.mjs'),\n  // 'angular-ts': () => import('shiki/langs/angular-ts.mjs'),\n  // c: () => import('shiki/langs/c.mjs'),\n  // cpp: () => import('shiki/langs/cpp.mjs'),\n  // csharp: () => import('shiki/langs/csharp.mjs'),\n  // csv: () => import('shiki/langs/csv.mjs'),\n  // dart: () => import('shiki/langs/dart.mjs'),\n  // diff: () => import('shiki/langs/diff.mjs'),\n  // docker: () => import('shiki/langs/docker.mjs'),\n  // go: () => import('shiki/langs/go.mjs'),\n  // graphql: () => import('shiki/langs/graphql.mjs'),\n  // http: () => import('shiki/langs/http.mjs'),\n  // ini: () => import('shiki/langs/ini.mjs'),\n  // java: () => import('shiki/langs/java.mjs'),\n  // kotlin: () => import('shiki/langs/kotlin.mjs'),\n  // less: () => import('shiki/langs/less.mjs'),\n  // lua: () => import('shiki/langs/lua.mjs'),\n  //   nginx: () => import('shiki/langs/nginx.mjs'),\n  // php: () => import('shiki/langs/php.mjs'),\n  // powershell: () => import('shiki/langs/powershell.mjs'),\n  // prisma: () => import('shiki/langs/prisma.mjs'),\n  // python: () => import('shiki/langs/python.mjs'),\n  // ruby: () => import('shiki/langs/ruby.mjs'),\n  // rust: () => import('shiki/langs/rust.mjs'),\n  // scss: () => import('shiki/langs/scss.mjs'),\n  // sql: () => import('shiki/langs/sql.mjs'),  // swift: () => import('shiki/langs/swift.mjs'),\n  // toml: () => import('shiki/langs/toml.mjs'),\n} satisfies Record<string, GrammarLoader>;\n\n/** Canonical Shiki language ids this package can highlight. */\nexport type ShikiLanguageId = keyof typeof grammarLoaders;\n\n/** Every canonical language id that ships with a grammar loader. */\nexport const shikiLanguageIds = Object.keys(\n  grammarLoaders\n) as ShikiLanguageId[];\n\n/**\n * Code fence names that are rendered by another grammar, mapped to the\n * canonical id that actually owns the grammar.\n */\nexport const grammarAliases = {\n  cjs: 'javascript',\n  console: 'bash',\n  cts: 'typescript',\n  dockerfile: 'docker',\n  gql: 'graphql',\n  htm: 'html',\n  js: 'javascript',\n  jsonc: 'json5',\n  jsx: 'tsx',\n  md: 'markdown',\n  mdx: 'markdown',\n  mjs: 'javascript',\n  mts: 'typescript',\n  postcss: 'css',\n  sh: 'bash',\n  shell: 'bash',\n  shellscript: 'bash',\n  ts: 'typescript',\n  yml: 'yaml',\n  zsh: 'bash',\n} satisfies Record<string, ShikiLanguageId>;\n\n/** Code fence names accepted as aliases of a canonical language id. */\nexport type ShikiLanguageAlias = keyof typeof grammarAliases;\n\n/**\n * Languages Shiki renders without any grammar. They are also used as the\n * fallback for languages this package does not ship a grammar for.\n */\nexport type PlainTextLanguage = 'plaintext' | 'text' | 'txt';\n\nconst PLAIN_TEXT_LANGUAGE = 'plaintext' satisfies PlainTextLanguage;\n\n/** Every language name accepted by the code block components. */\nexport type CodeLanguage =\n  | ShikiLanguageId\n  | ShikiLanguageAlias\n  | PlainTextLanguage;\n\n/**\n * A language name resolved to what Shiki actually needs to highlight it.\n */\nexport type ResolvedCodeLanguage = {\n  /** Canonical language id to pass to `codeToHtml` / `codeToHast`. */\n  id: ShikiLanguageId | PlainTextLanguage;\n  /** Grammar loader, or `null` when the language needs no grammar. */\n  loadGrammar: GrammarLoader | null;\n};\n\n/**\n * Resolve a code fence language name to a canonical Shiki id and its grammar\n * loader.\n *\n * Unknown names resolve to plain text rather than to an arbitrary grammar, so\n * that `codeToHtml` never receives a language it has not loaded.\n *\n * @param language - Language name coming from a code fence or a `lang` prop.\n *\n * @example\n * resolveCodeLanguage('ts'); // { id: 'typescript', loadGrammar: fn }\n * resolveCodeLanguage('toml'); // { id: 'toml', loadGrammar: fn }\n * resolveCodeLanguage('brainfuck'); // { id: 'plaintext', loadGrammar: null }\n */\nexport const resolveCodeLanguage = (\n  language: CodeLanguage | string | undefined | null\n): ResolvedCodeLanguage => {\n  const normalizedLanguage = (language ?? '').trim().toLowerCase();\n\n  const canonicalId =\n    grammarAliases[normalizedLanguage as ShikiLanguageAlias] ??\n    (normalizedLanguage as ShikiLanguageId);\n\n  const loadGrammar = grammarLoaders[canonicalId] as GrammarLoader | undefined;\n\n  if (!loadGrammar) {\n    return { id: PLAIN_TEXT_LANGUAGE, loadGrammar: null };\n  }\n\n  return { id: canonicalId, loadGrammar };\n};\n"],"mappings":";;;;;;;;AAkBA,MAAa,iBAAiB;CAC5B,aAAa,OAAO;CACpB,YAAY,OAAO;CACnB,WAAW,OAAO;CAClB,YAAY,OAAO;CACnB,kBAAkB,OAAO;CACzB,YAAY,OAAO;CACnB,aAAa,OAAO;CACpB,aAAa,OAAO;CACpB,gBAAgB,OAAO;CACvB,cAAc,OAAO;CACrB,WAAW,OAAO;CAClB,kBAAkB,OAAO;CACzB,WAAW,OAAO;CAClB,WAAW,OAAO;CAClB,YAAY,OAAO;AA4BrB;;AAMA,MAAa,mBAAmB,OAAO,KACrC,cACF;;;;;AAMA,MAAa,iBAAiB;CAC5B,KAAK;CACL,SAAS;CACT,KAAK;CACL,YAAY;CACZ,KAAK;CACL,KAAK;CACL,IAAI;CACJ,OAAO;CACP,KAAK;CACL,IAAI;CACJ,KAAK;CACL,KAAK;CACL,KAAK;CACL,SAAS;CACT,IAAI;CACJ,OAAO;CACP,aAAa;CACb,IAAI;CACJ,KAAK;CACL,KAAK;AACP;AAWA,MAAM,sBAAsB;;;;;;;;;;;;;;;AAgC5B,MAAa,uBACX,aACyB;CACzB,MAAM,sBAAsB,YAAY,GAAE,CAAE,KAAK,CAAC,CAAC,YAAY;CAE/D,MAAM,cACJ,eAAe,uBACd;CAEH,MAAM,cAAc,eAAe;CAEnC,IAAI,CAAC,aACH,OAAO;EAAE,IAAI;EAAqB,aAAa;CAAK;CAGtD,OAAO;EAAE,IAAI;EAAa;CAAY;AACxC"}

package/dist/esm/components/IDE/shikiThemes.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"shikiThemes.mjs","names":[],"sources":["../../../../src/components/IDE/shikiThemes.ts"],"sourcesContent":["/**\n * Themes every code block is highlighted with.\n *\n * Shiki is always asked for both, with `defaultColor: false`, so each token\n * carries its light and dark colour as the `--shiki-light` / `--shiki-dark`\n * custom properties rather than a resolved `color`. The markup is therefore\n * theme-agnostic: it can be produced once — at build time — and never has to be\n * recomputed in the browser when the resolved theme changes.\n */\nexport const SHIKI_THEMES = {\n  light: 'github-light',\n  dark: 'github-dark',\n} as const;\n\nexport type ShikiThemes = typeof SHIKI_THEMES;\n"],"mappings":";;;;;;;;;;AASA,MAAa,eAAe;CAC1B,OAAO;CACP,MAAM;AACR"}
+{"version":3,"file":"shikiThemes.mjs","names":[],"sources":["../../../../src/components/IDE/shikiThemes.ts"],"sourcesContent":["/**\n * Themes every code block is highlighted with.\n *\n * Shiki is always asked for both, with `defaultColor: false`, so each token\n * carries its light and dark colour as the `--shiki-light` / `--shiki-dark`\n * custom properties rather than a resolved `color`. The markup is therefore\n * theme-agnostic: it can be produced once — at build time — and never has to be\n * recomputed in the browser when the resolved theme changes.\n */\nexport const SHIKI_THEMES = {\n  light: 'github-light',\n  dark: 'github-dark',\n} as const;\n\nexport type ShikiThemes = typeof SHIKI_THEMES;\n\n/** Every theme id the fine-grained Shiki bundle can resolve. */\nexport type ShikiThemeId = ShikiThemes[keyof ShikiThemes];\n"],"mappings":";;;;;;;;;;AASA,MAAa,eAAe;CAC1B,OAAO;CACP,MAAM;AACR"}

package/dist/esm/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs

@@ -1,11 +1,11 @@
 'use client';
 
-import { usePersistedStore } from "../../hooks/usePersistedStore.mjs";
 import { Button } from "../Button/Button.mjs";
 import { Container } from "../Container/index.mjs";
 import { DropDown } from "../DropDown/index.mjs";
 import { Input } from "../Input/Input.mjs";
 import { SwitchSelector } from "../SwitchSelector/SwitchSelector.mjs";
+import { usePersistedStore } from "../../hooks/usePersistedStore.mjs";
 import { useLocaleSwitcherContent } from "./LocaleSwitcherContentContext.mjs";
 import { useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";