export declare const cherryThemeProviderTemplate = "\"use client\";\nimport React, { useEffect, useRef } from \"react\";\nimport { useTheme } from \"styled-components\";\nimport { ClientThemeProvider } from \"cherry-styled-components\";\nimport { Theme } from \"@/app/theme\";\nimport { GlobalStyles } from \"@/components/layout/GlobalStyles\";\n\n/**\n * Mirrors the active mode onto the data-theme attribute that every themed\n * selector keys off (see GlobalStyles).\n *\n * The attribute is already correct before the first paint - the blocking script\n * in the root layout sets it from the theme cookie - but the provider's first\n * client render still carries the light theme the server rendered, so the\n * active theme cannot be trusted until the provider has reconciled it against\n * the cookie. The mirror therefore reads the cookie, not the theme object:\n * the blocking script seeds it pre-paint and Cherry persists it synchronously\n * before any re-render on toggles and reconciliation, so writing it is\n * idempotent. Counting effect passes instead (a \"skip the first run\" ref)\n * breaks under StrictMode's dev double-invocation: the second pass writes the\n * unreconciled light theme and the whole page flashes white on dark loads.\n * The theme object is only a fallback for browsers that block cookies, where\n * the first (unreconciled) pass must still be skipped.\n *\n * This effect must stay a child of ClientThemeProvider: child effects run\n * first, so the attribute is updated before the provider's own theme-color\n * sync resolves var(--color-primary) against the document's computed styles.\n */\nfunction ThemeModeAttribute() {\n const activeTheme = useTheme() as Theme;\n const settled = useRef(false);\n\n useEffect(() => {\n const mode = /(?:^|;\\s*)theme=(dark|light)(?:;|$)/.exec(document.cookie);\n if (mode) {\n document.documentElement.dataset.theme = mode[1];\n } else if (settled.current) {\n document.documentElement.dataset.theme = activeTheme.isDark\n ? \"dark\"\n : \"light\";\n } else {\n settled.current = true;\n }\n }, [activeTheme.isDark]);\n\n return null;\n}\n\n/**\n * Wraps Cherry's ClientThemeProvider, which swaps theme/themeDark on toggle and\n * persists the choice to the `theme` cookie + localStorage. Deliberately reads\n * NO request data (cookies/headers) so pages stay statically renderable.\n *\n * The two theme objects hold the same CSS-variable colors and differ only in\n * `isDark`, so the visible mode is decided entirely by the data-theme\n * attribute on , which ThemeModeAttribute keeps in step. The provider\n * also maintains a \"dark\" class of its own; nothing here depends on it, because\n * it is briefly out of step on mount while the provider reconciles the\n * server-rendered light theme against the cookie.\n *\n * $globalStyles is off because this app ships its own GlobalStyles.\n * $themeColor=\"primary\" hands the post-hydration theme-color sync to Cherry\n * with the branded chrome Cherry's own site uses: since 0.2.15 the provider\n * resolves var() color references through computed styles, so the `primary`\n * token yields each mode's brand hex for the active data-theme. The blocking\n * script in the root layout writes the same token's value before first\n * paint; the provider takes over from there, so the two must stay on the\n * same token.\n */\nfunction CherryThemeProvider({\n children,\n theme,\n themeDark,\n}: {\n children: React.ReactNode;\n theme: Theme;\n themeDark: Theme;\n}) {\n return (\n \n \n \n {children}\n \n );\n}\n\nexport { CherryThemeProvider };\n";