doccupine 0.0.87 → 0.0.89

package/dist/templates/components/SearchModalContent.js

@@ -1,7 +1,6 @@
 export const searchModalContentTemplate = `"use client";
 import React from "react";
 import styled, { css, keyframes } from "styled-components";
-import { rgba } from "polished";
 import { Search } from "lucide-react";
 import { mq, Theme } from "@/app/theme";
 import { Spinner } from "@/components/Spinner";
@@ -61,8 +60,9 @@ const StyledBackdrop = styled.div<{ theme: Theme; $isClosing: boolean }>\`
   position: fixed;
   inset: 0;
   z-index: 9999;
-  background: \${({ theme }) =>
-    rgba(theme.isDark ? theme.colors.light : theme.colors.dark, 0.5)};
+  /* Backdrop is intentionally near-black in both modes — covers everything
+     behind the modal regardless of the user's theme. */
+  background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
   display: flex;
@@ -148,11 +148,16 @@ const StyledResultItem = styled.li<{ theme: Theme; $isActive: boolean }>\`
   \${({ $isActive, theme }) =>
     $isActive &&
     css\`
-      background: \${rgba(theme.colors.primaryLight, 0.2)};
+      background: color-mix(
+        in srgb,
+        \${theme.colors.primaryLight} 20%,
+        transparent
+      );
     \`}
 
   &:hover {
-    background: \${({ theme }) => rgba(theme.colors.primaryLight, 0.15)};
+    background: \${({ theme }) =>
+      \`color-mix(in srgb, \${theme.colors.primaryLight} 15%, transparent)\`};
   }
 \`;
 
@@ -181,7 +186,8 @@ const StyledSnippet = styled.span<{ theme: Theme }>\`
   white-space: nowrap;
 
   & mark {
-    background: \${({ theme }) => rgba(theme.colors.primaryLight, 0.35)};
+    background: \${({ theme }) =>
+      \`color-mix(in srgb, \${theme.colors.primaryLight} 35%, transparent)\`};
     color: inherit;
     border-radius: 4px;
     padding: 0 1px;

package/dist/templates/components/SideBar.d.ts

@@ -1 +1 @@
-export declare const sideBarTemplate = "\"use client\";\nimport { useContext, useState, Suspense } from \"react\";\nimport { usePathname } from \"next/navigation\";\nimport { Flex, Space } from \"cherry-styled-components\";\nimport {\n  DocsSidebar,\n  SectionBarContext,\n  StyledSidebar,\n  StyledSidebarList,\n  StyledSidebarListItem,\n  StyledStrong,\n  StyledSidebarListItemLink,\n  StyledSidebarFooter,\n  StyleMobileBar,\n  StyledMobileBurger,\n} from \"@/components/layout/DocsComponents\";\nimport {\n  ToggleTheme,\n  ToggleThemeLoading,\n} from \"@/components/layout/ThemeToggle\";\nimport { useLockBodyScroll } from \"@/components/LockBodyScroll\";\n\ntype NavItem = {\n  label: string;\n  links: NavItemLink[];\n};\n\ntype NavItemLink = {\n  slug: string;\n  title: string;\n};\n\ninterface SideBarProps {\n  result: NavItem[];\n}\n\nfunction SideBar({ result }: SideBarProps) {\n  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);\n  const hasSectionBar = useContext(SectionBarContext);\n  const pathname = usePathname();\n\n  useLockBodyScroll(isMobileMenuOpen);\n\n  return (\n    <DocsSidebar>\n      <StyleMobileBar\n        onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}\n        $isActive={isMobileMenuOpen}\n        aria-label={isMobileMenuOpen ? \"Close navigation menu\" : \"Open navigation menu\"}\n        aria-expanded={isMobileMenuOpen}\n      >\n        <StyledMobileBurger $isActive={isMobileMenuOpen} />\n      </StyleMobileBar>\n\n      <StyledSidebar\n        $isActive={isMobileMenuOpen}\n        $hasSectionBar={hasSectionBar}\n      >\n        {result &&\n          result.map((item: NavItem, index: number) => {\n            return (\n              <StyledSidebarList key={index}>\n                <StyledSidebarListItem>\n                  <StyledStrong>{item.label}</StyledStrong>{\" \"}\n                </StyledSidebarListItem>\n                <li>\n                  <Space $size={20} />\n                </li>\n                {item.links &&\n                  item.links.map((link: NavItemLink, indexChild: number) => {\n                    return (\n                      <StyledSidebarListItem key={indexChild}>\n                        <StyledSidebarListItemLink\n                          href={`/${link.slug}`}\n                          $isActive={pathname === `/${link.slug}`}\n                          onClick={() => setIsMobileMenuOpen(false)}\n                        >\n                          {link.title}\n                        </StyledSidebarListItemLink>\n                      </StyledSidebarListItem>\n                    );\n                  })}\n                <li aria-hidden=\"true\">\n                  <Space $size={20} />\n                </li>\n              </StyledSidebarList>\n            );\n          })}\n        <StyledSidebarFooter>\n          <Flex $xsJustifyContent=\"flex-start\" $lgJustifyContent=\"flex-end\">\n            <Suspense fallback={<ToggleThemeLoading />}>\n              <ToggleTheme />\n            </Suspense>\n          </Flex>\n        </StyledSidebarFooter>\n      </StyledSidebar>\n    </DocsSidebar>\n  );\n}\n\nexport { SideBar };\n";
+export declare const sideBarTemplate = "\"use client\";\nimport { useContext, useState, Suspense } from \"react\";\nimport { usePathname } from \"next/navigation\";\nimport { Flex, Space } from \"cherry-styled-components\";\nimport {\n  DocsSidebar,\n  SectionBarContext,\n  StyledSidebar,\n  StyledSidebarList,\n  StyledSidebarListItem,\n  StyledStrong,\n  StyledSidebarListItemLink,\n  StyledSidebarFooter,\n  StyleMobileBar,\n  StyledMobileBurger,\n} from \"@/components/layout/DocsComponents\";\nimport {\n  ToggleTheme,\n  ToggleThemeLoading,\n} from \"@/components/layout/ThemeToggle\";\nimport { useLockBodyScroll } from \"@/components/LockBodyScroll\";\n\ntype NavItem = {\n  label: string;\n  links: NavItemLink[];\n};\n\ntype NavItemLink = {\n  slug: string;\n  title: string;\n};\n\ninterface SideBarProps {\n  result: NavItem[];\n}\n\nfunction SideBar({ result }: SideBarProps) {\n  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);\n  const hasSectionBar = useContext(SectionBarContext);\n  const pathname = usePathname();\n\n  useLockBodyScroll(isMobileMenuOpen);\n\n  return (\n    <DocsSidebar>\n      <StyleMobileBar\n        onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}\n        $isActive={isMobileMenuOpen}\n        aria-label={\n          isMobileMenuOpen ? \"Close navigation menu\" : \"Open navigation menu\"\n        }\n        aria-expanded={isMobileMenuOpen}\n      >\n        <StyledMobileBurger $isActive={isMobileMenuOpen} />\n      </StyleMobileBar>\n\n      <StyledSidebar\n        $isActive={isMobileMenuOpen}\n        $hasSectionBar={hasSectionBar}\n      >\n        {result &&\n          result.map((item: NavItem, index: number) => {\n            return (\n              <StyledSidebarList key={index}>\n                <StyledSidebarListItem>\n                  <StyledStrong>{item.label}</StyledStrong>{\" \"}\n                </StyledSidebarListItem>\n                <li>\n                  <Space $size={20} />\n                </li>\n                {item.links &&\n                  item.links.map((link: NavItemLink, indexChild: number) => {\n                    return (\n                      <StyledSidebarListItem key={indexChild}>\n                        <StyledSidebarListItemLink\n                          href={`/${link.slug}`}\n                          $isActive={pathname === `/${link.slug}`}\n                          onClick={() => setIsMobileMenuOpen(false)}\n                        >\n                          {link.title}\n                        </StyledSidebarListItemLink>\n                      </StyledSidebarListItem>\n                    );\n                  })}\n                <li aria-hidden=\"true\">\n                  <Space $size={20} />\n                </li>\n              </StyledSidebarList>\n            );\n          })}\n        <StyledSidebarFooter>\n          <Flex $xsJustifyContent=\"flex-start\" $lgJustifyContent=\"flex-end\">\n            <Suspense fallback={<ToggleThemeLoading />}>\n              <ToggleTheme />\n            </Suspense>\n          </Flex>\n        </StyledSidebarFooter>\n      </StyledSidebar>\n    </DocsSidebar>\n  );\n}\n\nexport { SideBar };\n";

package/dist/templates/components/SideBar.js

@@ -46,7 +46,9 @@ function SideBar({ result }: SideBarProps) {
       <StyleMobileBar
         onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
         $isActive={isMobileMenuOpen}
-        aria-label={isMobileMenuOpen ? "Close navigation menu" : "Open navigation menu"}
+        aria-label={
+          isMobileMenuOpen ? "Close navigation menu" : "Open navigation menu"
+        }
         aria-expanded={isMobileMenuOpen}
       >
         <StyledMobileBurger $isActive={isMobileMenuOpen} />

package/dist/templates/components/layout/Accordion.d.ts

@@ -1 +1 @@
-export declare const accordionTemplate = "\"use client\";\nimport { useState } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { styledText, Theme } from \"cherry-styled-components\";\nimport { Icon } from \"@/components/layout/Icon\";\n\nconst StyledAccordion = styled.div<{ theme: Theme }>`\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  padding: 20px;\n  margin: 0;\n  ${({ theme }) => styledText(theme)};\n  width: 100%;\n`;\n\nconst StyledAccordionTitle = styled.h3<{ theme: Theme; $isOpen: boolean }>`\n  cursor: pointer;\n  margin: 0;\n  padding: 0 40px 0 0;\n  ${({ theme }) => styledText(theme)};\n  color: ${({ theme }) => theme.colors.primary};\n  transition: color 0.3s ease;\n  position: relative;\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.primaryDark};\n  }\n\n  & .lucide-chevron-down {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: 0;\n    transition: transform 0.3s ease;\n\n    ${({ $isOpen }) =>\n      $isOpen &&\n      css`\n        transform: translateY(-50%) rotate(180deg);\n      `}\n  }\n`;\n\nconst StyledAccordionContent = styled.div<{ theme: Theme; $isOpen: boolean }>`\n  ${({ theme }) => styledText(theme)};\n  color: ${({ theme }) => theme.colors.grayDark};\n  height: 0;\n  overflow: clip;\n  transition: all 0.3s ease;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  flex-wrap: wrap;\n  flex: 1;\n\n  ${({ $isOpen }) =>\n    $isOpen &&\n    css`\n      margin: 20px 0 0;\n      height: auto;\n    `}\n`;\n\ninterface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  title: string;\n}\n\nfunction Accordion({ children, title }: AccordionProps) {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <StyledAccordion>\n      <StyledAccordionTitle\n        onClick={() => setIsOpen(!isOpen)}\n        $isOpen={isOpen}\n        role=\"button\"\n        aria-expanded={isOpen}\n      >\n        {title} <Icon name=\"ChevronDown\" />\n      </StyledAccordionTitle>\n      <StyledAccordionContent $isOpen={isOpen}>\n        {children}\n      </StyledAccordionContent>\n    </StyledAccordion>\n  );\n}\n\nexport { Accordion };\n";
+export declare const accordionTemplate = "\"use client\";\nimport { useState } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { styledText } from \"cherry-styled-components\";\nimport { Theme } from \"@/app/theme\";\nimport { Icon } from \"@/components/layout/Icon\";\n\nconst StyledAccordion = styled.div<{ theme: Theme }>`\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  padding: 20px;\n  margin: 0;\n  ${({ theme }) => styledText(theme)};\n  width: 100%;\n`;\n\nconst StyledAccordionTitle = styled.h3<{ theme: Theme; $isOpen: boolean }>`\n  cursor: pointer;\n  margin: 0;\n  padding: 0 40px 0 0;\n  ${({ theme }) => styledText(theme)};\n  color: ${({ theme }) => theme.colors.primary};\n  transition: color 0.3s ease;\n  position: relative;\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.primaryDark};\n  }\n\n  & .lucide-chevron-down {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: 0;\n    transition: transform 0.3s ease;\n\n    ${({ $isOpen }) =>\n      $isOpen &&\n      css`\n        transform: translateY(-50%) rotate(180deg);\n      `}\n  }\n`;\n\nconst StyledAccordionContent = styled.div<{ theme: Theme; $isOpen: boolean }>`\n  ${({ theme }) => styledText(theme)};\n  color: ${({ theme }) => theme.colors.grayDark};\n  height: 0;\n  overflow: clip;\n  transition: all 0.3s ease;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  flex-wrap: wrap;\n  flex: 1;\n\n  ${({ $isOpen }) =>\n    $isOpen &&\n    css`\n      margin: 20px 0 0;\n      height: auto;\n    `}\n`;\n\ninterface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  title: string;\n}\n\nfunction Accordion({ children, title }: AccordionProps) {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <StyledAccordion>\n      <StyledAccordionTitle\n        onClick={() => setIsOpen(!isOpen)}\n        $isOpen={isOpen}\n        role=\"button\"\n        aria-expanded={isOpen}\n      >\n        {title} <Icon name=\"ChevronDown\" />\n      </StyledAccordionTitle>\n      <StyledAccordionContent $isOpen={isOpen}>\n        {children}\n      </StyledAccordionContent>\n    </StyledAccordion>\n  );\n}\n\nexport { Accordion };\n";

package/dist/templates/components/layout/Accordion.js

@@ -1,7 +1,8 @@
 export const accordionTemplate = `"use client";
 import { useState } from "react";
 import styled, { css } from "styled-components";
-import { styledText, Theme } from "cherry-styled-components";
+import { styledText } from "cherry-styled-components";
+import { Theme } from "@/app/theme";
 import { Icon } from "@/components/layout/Icon";
 
 const StyledAccordion = styled.div<{ theme: Theme }>\`

package/dist/templates/components/layout/ActionBar.d.ts

@@ -1 +1 @@
-export declare const actionBarTemplate = "\"use client\";\nimport { useContext, useState } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { rgba } from \"polished\";\nimport { resetButton, Textarea } from \"cherry-styled-components\";\nimport { SectionBarContext } from \"@/components/layout/DocsComponents\";\nimport { StyledSmallButton } from \"@/components/layout/SharedStyled\";\n\ninterface ActionBarProps {\n  children: React.ReactNode;\n  content: string;\n}\n\nconst StyledActionBar = styled.div<{\n  theme: Theme;\n  $isChatOpen?: boolean;\n}>`\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n  left: 0;\n  padding: 12px 0;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  max-width: 640px;\n  margin: auto;\n  transition: all 0.3s ease;\n\n  ${mq(\"lg\")} {\n    padding: 12px 0;\n  }\n`;\n\nconst StyledActionBarContent = styled.div`\n  margin: auto 0;\n`;\n\nconst StyledCopyButton = styled(StyledSmallButton)<{\n  theme: Theme;\n  $copied: boolean;\n}>`\n  border: solid 1px\n    ${({ theme, $copied }) =>\n      $copied ? theme.colors.success : theme.colors.grayLight};\n  color: ${({ theme, $copied }) =>\n    $copied ? theme.colors.success : theme.colors.primary};\n\n  & svg.lucide {\n    color: ${({ theme, $copied }) =>\n      $copied ? theme.colors.success : theme.colors.primary};\n  }\n`;\n\nconst StyledToggle = styled.button<{ theme: Theme; $isActive?: boolean }>`\n  ${resetButton}\n  width: 56px;\n  height: 32px;\n  border-radius: 30px;\n  display: flex;\n  position: relative;\n  margin: auto 0;\n  transform: scale(1);\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    top: 3px;\n    left: 3px;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.2)};\n    transition: all 0.3s ease;\n    z-index: 1;\n    ${({ $isActive }) =>\n      !$isActive &&\n      css`\n        transform: translateX(24px);\n      `}\n  }\n\n  & svg {\n    width: 16px;\n    height: 16px;\n    object-fit: contain;\n    margin: auto;\n    transition: all 0.3s ease;\n    position: relative;\n    z-index: 2;\n  }\n\n  & .lucide-eye {\n    transform: translateX(1px);\n  }\n\n  & .lucide-code-xml {\n    transform: translateX(-1px);\n  }\n\n  & svg[stroke] {\n    stroke: ${({ theme }) => theme.colors.primary};\n  }\n\n  &:hover {\n    transform: scale(1.05);\n    color: ${({ theme }) =>\n      theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n\n    & svg[stroke] {\n      stroke: ${({ theme }) =>\n        theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n    }\n  }\n\n  &:active {\n    transform: scale(0.97);\n  }\n`;\n\nconst StyledContent = styled.div<{\n  theme: Theme;\n  $hasSectionBar?: boolean;\n}>`\n  padding-top: 20px;\n  transition: all 0.3s ease;\n\n  & textarea {\n    max-width: 640px;\n    margin: auto;\n    width: 100%;\n    height: 100%;\n    min-height: calc(\n      100vh - ${({ $hasSectionBar }) => ($hasSectionBar ? 202 : 160)}px\n    );\n\n    ${mq(\"lg\")} {\n      min-height: calc(100vh - 159px);\n    }\n  }\n`;\n\nfunction ActionBar({ children, content }: ActionBarProps) {\n  const [isView, setIsView] = useState(true);\n  const [copied, setCopied] = useState(false);\n  const hasSectionBar = useContext(SectionBarContext);\n\n  const handleCopyContent = async () => {\n    try {\n      await navigator.clipboard.writeText(content);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error(\"Failed to copy:\", err);\n    }\n  };\n\n  return (\n    <>\n      <StyledActionBar>\n        <StyledCopyButton onClick={handleCopyContent} $copied={copied}>\n          {copied ? (\n            <>\n              <Icon name=\"check\" size={16} />\n              Copied!\n            </>\n          ) : (\n            <>\n              <Icon name=\"copy\" size={16} />\n              Copy content\n            </>\n          )}\n        </StyledCopyButton>\n        <StyledActionBarContent>\n          <StyledToggle\n            onClick={() => setIsView(!isView)}\n            aria-label=\"Toggle View\"\n            $isActive={isView}\n          >\n            <Icon name=\"Eye\" />\n            <Icon name=\"CodeXml\" />\n          </StyledToggle>\n        </StyledActionBarContent>\n      </StyledActionBar>\n      {isView && (\n        <StyledContent $hasSectionBar={hasSectionBar}>{children}</StyledContent>\n      )}\n      {!isView && (\n        <StyledContent $hasSectionBar={hasSectionBar}>\n          <Textarea defaultValue={content} $fullWidth />\n        </StyledContent>\n      )}\n    </>\n  );\n}\n\nexport { ActionBar };\n";
+export declare const actionBarTemplate = "\"use client\";\nimport { useContext, useState } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { resetButton, Textarea } from \"cherry-styled-components\";\nimport { SectionBarContext } from \"@/components/layout/DocsComponents\";\nimport { StyledSmallButton } from \"@/components/layout/SharedStyled\";\n\ninterface ActionBarProps {\n  children: React.ReactNode;\n  content: string;\n}\n\nconst StyledActionBar = styled.div<{\n  theme: Theme;\n  $isChatOpen?: boolean;\n}>`\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n  left: 0;\n  padding: 12px 0;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  max-width: 640px;\n  margin: auto;\n  transition: all 0.3s ease;\n\n  ${mq(\"lg\")} {\n    padding: 12px 0;\n  }\n`;\n\nconst StyledActionBarContent = styled.div`\n  margin: auto 0;\n`;\n\nconst StyledCopyButton = styled(StyledSmallButton)<{\n  theme: Theme;\n  $copied: boolean;\n}>`\n  border: solid 1px\n    ${({ theme, $copied }) =>\n      $copied ? theme.colors.success : theme.colors.grayLight};\n  color: ${({ theme, $copied }) =>\n    $copied ? theme.colors.success : theme.colors.primary};\n\n  & svg.lucide {\n    color: ${({ theme, $copied }) =>\n      $copied ? theme.colors.success : theme.colors.primary};\n  }\n`;\n\nconst StyledToggle = styled.button<{ theme: Theme; $isActive?: boolean }>`\n  ${resetButton}\n  width: 56px;\n  height: 32px;\n  border-radius: 30px;\n  display: flex;\n  position: relative;\n  margin: auto 0;\n  transform: scale(1);\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    top: 3px;\n    left: 3px;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    background: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.primaryLight} 20%, transparent)`};\n    transition: all 0.3s ease;\n    z-index: 1;\n    ${({ $isActive }) =>\n      !$isActive &&\n      css`\n        transform: translateX(24px);\n      `}\n  }\n\n  & svg {\n    width: 16px;\n    height: 16px;\n    object-fit: contain;\n    margin: auto;\n    transition: all 0.3s ease;\n    position: relative;\n    z-index: 2;\n  }\n\n  & .lucide-eye {\n    transform: translateX(1px);\n  }\n\n  & .lucide-code-xml {\n    transform: translateX(-1px);\n  }\n\n  & svg[stroke] {\n    stroke: ${({ theme }) => theme.colors.primary};\n  }\n\n  &:hover {\n    transform: scale(1.05);\n    color: ${({ theme }) => theme.colors.accent};\n\n    & svg[stroke] {\n      stroke: ${({ theme }) => theme.colors.accent};\n    }\n  }\n\n  &:active {\n    transform: scale(0.97);\n  }\n`;\n\nconst StyledContent = styled.div<{\n  theme: Theme;\n  $hasSectionBar?: boolean;\n}>`\n  padding-top: 20px;\n  transition: all 0.3s ease;\n\n  & textarea {\n    max-width: 640px;\n    margin: auto;\n    width: 100%;\n    height: 100%;\n    min-height: calc(\n      100vh - ${({ $hasSectionBar }) => ($hasSectionBar ? 202 : 160)}px\n    );\n\n    ${mq(\"lg\")} {\n      min-height: calc(100vh - 159px);\n    }\n  }\n`;\n\nfunction ActionBar({ children, content }: ActionBarProps) {\n  const [isView, setIsView] = useState(true);\n  const [copied, setCopied] = useState(false);\n  const hasSectionBar = useContext(SectionBarContext);\n\n  const handleCopyContent = async () => {\n    try {\n      await navigator.clipboard.writeText(content);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error(\"Failed to copy:\", err);\n    }\n  };\n\n  return (\n    <>\n      <StyledActionBar>\n        <StyledCopyButton onClick={handleCopyContent} $copied={copied}>\n          {copied ? (\n            <>\n              <Icon name=\"check\" size={16} />\n              Copied!\n            </>\n          ) : (\n            <>\n              <Icon name=\"copy\" size={16} />\n              Copy content\n            </>\n          )}\n        </StyledCopyButton>\n        <StyledActionBarContent>\n          <StyledToggle\n            onClick={() => setIsView(!isView)}\n            aria-label=\"Toggle View\"\n            $isActive={isView}\n          >\n            <Icon name=\"Eye\" />\n            <Icon name=\"CodeXml\" />\n          </StyledToggle>\n        </StyledActionBarContent>\n      </StyledActionBar>\n      {isView && (\n        <StyledContent $hasSectionBar={hasSectionBar}>{children}</StyledContent>\n      )}\n      {!isView && (\n        <StyledContent $hasSectionBar={hasSectionBar}>\n          <Textarea defaultValue={content} $fullWidth />\n        </StyledContent>\n      )}\n    </>\n  );\n}\n\nexport { ActionBar };\n";

package/dist/templates/components/layout/ActionBar.js

@@ -3,7 +3,6 @@ import { useContext, useState } from "react";
 import styled, { css } from "styled-components";
 import { Icon } from "@/components/layout/Icon";
 import { mq, Theme } from "@/app/theme";
-import { rgba } from "polished";
 import { resetButton, Textarea } from "cherry-styled-components";
 import { SectionBarContext } from "@/components/layout/DocsComponents";
 import { StyledSmallButton } from "@/components/layout/SharedStyled";
@@ -72,7 +71,8 @@ const StyledToggle = styled.button<{ theme: Theme; $isActive?: boolean }>\`
     width: 24px;
     height: 24px;
     border-radius: 50%;
-    background: \${({ theme }) => rgba(theme.colors.primaryLight, 0.2)};
+    background: \${({ theme }) =>
+      \`color-mix(in srgb, \${theme.colors.primaryLight} 20%, transparent)\`};
     transition: all 0.3s ease;
     z-index: 1;
     \${({ $isActive }) =>
@@ -106,12 +106,10 @@ const StyledToggle = styled.button<{ theme: Theme; $isActive?: boolean }>\`
 
   &:hover {
     transform: scale(1.05);
-    color: \${({ theme }) =>
-      theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};
+    color: \${({ theme }) => theme.colors.accent};
 
     & svg[stroke] {
-      stroke: \${({ theme }) =>
-        theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};
+      stroke: \${({ theme }) => theme.colors.accent};
     }
   }
 

package/dist/templates/components/layout/Button.d.ts

@@ -1 +1 @@
-export declare const buttonTemplate = "\"use client\";\nimport Link from \"next/link\";\nimport styled from \"styled-components\";\nimport {\n  theme as localTheme,\n  ButtonProps,\n  buttonStyles,\n} from \"cherry-styled-components\";\nimport { Icon } from \"@/components/layout/Icon\";\n\ninterface LinkButtonProps extends ButtonProps {\n  href?: string;\n  target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  size?: \"default\" | \"big\";\n  outline?: boolean;\n  fullWidth?: boolean;\n  icon?: string;\n  iconPosition?: \"left\" | \"right\";\n  theme?: typeof localTheme;\n}\n\nconst StyledLinkButton = styled(Link)<LinkButtonProps>`\n  ${({ theme, $variant, $size, $outline, $fullWidth, disabled }) =>\n    buttonStyles(theme, $variant, $size, $outline, $fullWidth, disabled)}\n\n  & p {\n    color: inherit !important;\n  }\n\n  & svg.lucide {\n    margin: auto 0;\n    min-width: min-content;\n    color: inherit;\n  }\n`;\n\nconst ButtonBase = styled.button<ButtonProps>`\n  ${({ theme, $variant, $size, $outline, $fullWidth, disabled }) =>\n    buttonStyles(theme, $variant, $size, $outline, $fullWidth, disabled)}\n\n  & p {\n    color: inherit !important;\n  }\n\n  & svg.lucide {\n    margin: auto 0;\n    min-width: min-content;\n    color: inherit;\n  }\n`;\n\nfunction Button({\n  variant = \"primary\",\n  size,\n  outline,\n  fullWidth,\n  icon,\n  iconPosition = \"left\",\n  theme: _theme = localTheme,\n  href,\n  ...props\n}: LinkButtonProps) {\n  return href ? (\n    <div>\n      <StyledLinkButton\n        {...props}\n        href={href}\n        $variant={variant}\n        $size={size}\n        $outline={outline}\n        $fullWidth={fullWidth}\n      >\n        {iconPosition === \"left\" && icon && <Icon name={icon} size={16} />}\n        {props.children}\n        {iconPosition === \"right\" && icon && <Icon name={icon} size={16} />}\n      </StyledLinkButton>\n    </div>\n  ) : (\n    <div>\n      <ButtonBase\n        {...props}\n        $variant={variant}\n        $size={size}\n        $outline={outline}\n        $fullWidth={fullWidth}\n      >\n        {iconPosition === \"left\" && icon && <Icon name={icon} size={16} />}\n        {props.children}\n        {iconPosition === \"right\" && icon && <Icon name={icon} size={16} />}\n      </ButtonBase>\n    </div>\n  );\n}\n\nexport { Button };\n";
+export declare const buttonTemplate = "\"use client\";\nimport Link from \"next/link\";\nimport styled from \"styled-components\";\nimport {\n  theme as localTheme,\n  ButtonProps,\n  buttonStyles,\n} from \"cherry-styled-components\";\nimport { Icon } from \"@/components/layout/Icon\";\n\ninterface LinkButtonProps extends ButtonProps {\n  href?: string;\n  target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  size?: \"default\" | \"big\";\n  outline?: boolean;\n  fullWidth?: boolean;\n  icon?: string;\n  iconPosition?: \"left\" | \"right\";\n  theme?: typeof localTheme;\n}\n\n// Cherry's buttonStyles picks filled-button text via `isDark ? colors.dark : colors.light`.\n// Our theme's isDark is a stub (false) because mode switching lives in CSS vars, so\n// the fallback resolves to --color-light (black in dark mode). Re-pin to `surface`,\n// which resolves to white in both modes, for the filled, non-disabled case.\nconst StyledLinkButton = styled(Link)<LinkButtonProps>`\n  ${({ theme, $variant, $size, $outline, $fullWidth, disabled }) =>\n    buttonStyles(theme, $variant, $size, $outline, $fullWidth, disabled)}\n\n  ${({ theme, $outline, disabled }) =>\n    !disabled && !$outline && `color: ${theme.colors.surface};`}\n\n  & p {\n    color: inherit !important;\n  }\n\n  & svg.lucide {\n    margin: auto 0;\n    min-width: min-content;\n    color: inherit;\n  }\n`;\n\nconst ButtonBase = styled.button<ButtonProps>`\n  ${({ theme, $variant, $size, $outline, $fullWidth, disabled }) =>\n    buttonStyles(theme, $variant, $size, $outline, $fullWidth, disabled)}\n\n  ${({ theme, $outline, disabled }) =>\n    !disabled && !$outline && `color: ${theme.colors.surface};`}\n\n  & p {\n    color: inherit !important;\n  }\n\n  & svg.lucide {\n    margin: auto 0;\n    min-width: min-content;\n    color: inherit;\n  }\n`;\n\nfunction Button({\n  variant = \"primary\",\n  size,\n  outline,\n  fullWidth,\n  icon,\n  iconPosition = \"left\",\n  theme: _theme = localTheme,\n  href,\n  ...props\n}: LinkButtonProps) {\n  return href ? (\n    <div>\n      <StyledLinkButton\n        {...props}\n        href={href}\n        $variant={variant}\n        $size={size}\n        $outline={outline}\n        $fullWidth={fullWidth}\n      >\n        {iconPosition === \"left\" && icon && <Icon name={icon} size={16} />}\n        {props.children}\n        {iconPosition === \"right\" && icon && <Icon name={icon} size={16} />}\n      </StyledLinkButton>\n    </div>\n  ) : (\n    <div>\n      <ButtonBase\n        {...props}\n        $variant={variant}\n        $size={size}\n        $outline={outline}\n        $fullWidth={fullWidth}\n      >\n        {iconPosition === \"left\" && icon && <Icon name={icon} size={16} />}\n        {props.children}\n        {iconPosition === \"right\" && icon && <Icon name={icon} size={16} />}\n      </ButtonBase>\n    </div>\n  );\n}\n\nexport { Button };\n";

package/dist/templates/components/layout/Button.js

@@ -20,10 +20,17 @@ interface LinkButtonProps extends ButtonProps {
   theme?: typeof localTheme;
 }
 
+// Cherry's buttonStyles picks filled-button text via \`isDark ? colors.dark : colors.light\`.
+// Our theme's isDark is a stub (false) because mode switching lives in CSS vars, so
+// the fallback resolves to --color-light (black in dark mode). Re-pin to \`surface\`,
+// which resolves to white in both modes, for the filled, non-disabled case.
 const StyledLinkButton = styled(Link)<LinkButtonProps>\`
   \${({ theme, $variant, $size, $outline, $fullWidth, disabled }) =>
     buttonStyles(theme, $variant, $size, $outline, $fullWidth, disabled)}
 
+  \${({ theme, $outline, disabled }) =>
+    !disabled && !$outline && \`color: \${theme.colors.surface};\`}
+
   & p {
     color: inherit !important;
   }
@@ -39,6 +46,9 @@ const ButtonBase = styled.button<ButtonProps>\`
   \${({ theme, $variant, $size, $outline, $fullWidth, disabled }) =>
     buttonStyles(theme, $variant, $size, $outline, $fullWidth, disabled)}
 
+  \${({ theme, $outline, disabled }) =>
+    !disabled && !$outline && \`color: \${theme.colors.surface};\`}
+
   & p {
     color: inherit !important;
   }

package/dist/templates/components/layout/Callout.d.ts

@@ -1 +1 @@
-export declare const calloutTemplate = "\"use client\";\nimport { Theme } from \"@/app/theme\";\nimport { styledSmall } from \"cherry-styled-components\";\nimport styled, { css } from \"styled-components\";\nimport { Icon, IconProps } from \"@/components/layout/Icon\";\n\ntype CalloutType = \"note\" | \"info\" | \"warning\" | \"danger\" | \"success\";\n\nconst StyledCallout = styled.div<{ theme: Theme; $type?: CalloutType }>`\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  padding: 20px;\n  margin: 0;\n  ${({ theme }) => styledSmall(theme)}\n  color: ${({ theme }) => theme.colors.grayDark};\n  display: flex;\n\n  & svg {\n    vertical-align: middle;\n    min-width: min-content;\n    margin: 3px 10px 0 0;\n  }\n\n  ${({ theme, $type }) =>\n    $type === \"note\" &&\n    css`\n      border-color: ${theme.isDark ? \"#0ea5e94d\" : \"#0ea5e933\"};\n      background: ${theme.isDark ? \"#0ea5e91a\" : \"#f0f9ff80\"};\n\n      & svg.lucide,\n      & p {\n        color: ${theme.isDark ? \"#bae6fd\" : \"#0c4a6e\"};\n      }\n    `}\n\n  ${({ theme, $type }) =>\n    $type === \"info\" &&\n    css`\n      border-color: ${theme.isDark ? \"#71717a4d\" : \"#71717a33\"};\n      background: ${theme.isDark ? \"#71717a1a\" : \"#fafafa80\"};\n\n      & svg.lucide,\n      & .lucide,\n      & p {\n        color: ${theme.isDark ? \"#e4e4e7\" : \"#18181b\"};\n      }\n    `}\n\n  ${({ theme, $type }) =>\n    $type === \"warning\" &&\n    css`\n      border-color: ${theme.isDark ? \"#f59e0b4d\" : \"#f59e0b33\"};\n      background: ${theme.isDark ? \"#f59e0b1a\" : \"#fffbeb80\"};\n\n      & svg.lucide,\n      & p {\n        color: ${theme.isDark ? \"#fde68a\" : \"#78350f\"};\n      }\n    `}\n\n  ${({ theme, $type }) =>\n    $type === \"danger\" &&\n    css`\n      border-color: ${theme.isDark ? \"#ef44444d\" : \"#ef444433\"};\n      background: ${theme.isDark ? \"#ef44441a\" : \"#fef2f280\"};\n\n      & svg.lucide,\n      & p {\n        color: ${theme.isDark ? \"#fecaca\" : \"#7f1d1d\"};\n      }\n    `}\n\n  ${({ theme, $type }) =>\n    $type === \"success\" &&\n    css`\n      border-color: ${theme.isDark ? \"#10b9814d\" : \"#10b98133\"};\n      background: ${theme.isDark ? \"#10b9811a\" : \"#ecfdf580\"};\n\n      & svg.lucide,\n      & p {\n        color: ${theme.isDark ? \"#a7f3d0\" : \"#064e3b\"};\n      }\n    `}\n`;\n\nconst StyledChildren = styled.span`\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n`;\n\ninterface CalloutProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  icon?: IconProps;\n  type?: CalloutType;\n}\n\nfunction Callout({ children, type, icon }: CalloutProps) {\n  const iconType =\n    type === \"note\"\n      ? \"CircleAlert\"\n      : type === \"info\"\n        ? \"Info\"\n        : type === \"warning\"\n          ? \"TriangleAlert\"\n          : type === \"danger\"\n            ? \"OctagonAlert\"\n            : type === \"success\"\n              ? \"Check\"\n              : (icon as IconProps);\n  return (\n    <StyledCallout $type={type}>\n      <Icon name={iconType} size={16} />\n      <StyledChildren>{children}</StyledChildren>\n    </StyledCallout>\n  );\n}\n\nexport { Callout };\n";
+export declare const calloutTemplate = "\"use client\";\nimport { Theme } from \"@/app/theme\";\nimport { styledSmall } from \"cherry-styled-components\";\nimport styled, { css } from \"styled-components\";\nimport { Icon, IconProps } from \"@/components/layout/Icon\";\n\ntype CalloutType = \"note\" | \"info\" | \"warning\" | \"danger\" | \"success\";\n\nconst StyledCallout = styled.div<{ theme: Theme; $type?: CalloutType }>`\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  padding: 20px;\n  margin: 0;\n  ${({ theme }) => styledSmall(theme)}\n  color: ${({ theme }) => theme.colors.grayDark};\n  display: flex;\n\n  & svg {\n    vertical-align: middle;\n    min-width: min-content;\n    margin: 3px 10px 0 0;\n  }\n\n  /* Callout tints are alert-semantic (info-blue, warning-amber, danger-red,\n     etc.) and intentionally independent of theme.json. Light-mode values are\n     defined by default; dark-mode overrides live in :root.dark & blocks so\n     the swap happens via the active <html> class with no re-render. */\n  ${({ $type }) =>\n    $type === \"note\" &&\n    css`\n      border-color: #0ea5e933;\n      background: #f0f9ff80;\n\n      & svg.lucide,\n      & p {\n        color: #0c4a6e;\n      }\n\n      :root.dark & {\n        border-color: #0ea5e94d;\n        background: #0ea5e91a;\n\n        & svg.lucide,\n        & p {\n          color: #bae6fd;\n        }\n      }\n    `}\n\n  ${({ $type }) =>\n    $type === \"info\" &&\n    css`\n      border-color: #71717a33;\n      background: #fafafa80;\n\n      & svg.lucide,\n      & .lucide,\n      & p {\n        color: #18181b;\n      }\n\n      :root.dark & {\n        border-color: #71717a4d;\n        background: #71717a1a;\n\n        & svg.lucide,\n        & .lucide,\n        & p {\n          color: #e4e4e7;\n        }\n      }\n    `}\n\n  ${({ $type }) =>\n    $type === \"warning\" &&\n    css`\n      border-color: #f59e0b33;\n      background: #fffbeb80;\n\n      & svg.lucide,\n      & p {\n        color: #78350f;\n      }\n\n      :root.dark & {\n        border-color: #f59e0b4d;\n        background: #f59e0b1a;\n\n        & svg.lucide,\n        & p {\n          color: #fde68a;\n        }\n      }\n    `}\n\n  ${({ $type }) =>\n    $type === \"danger\" &&\n    css`\n      border-color: #ef444433;\n      background: #fef2f280;\n\n      & svg.lucide,\n      & p {\n        color: #7f1d1d;\n      }\n\n      :root.dark & {\n        border-color: #ef44444d;\n        background: #ef44441a;\n\n        & svg.lucide,\n        & p {\n          color: #fecaca;\n        }\n      }\n    `}\n\n  ${({ $type }) =>\n    $type === \"success\" &&\n    css`\n      border-color: #10b98133;\n      background: #ecfdf580;\n\n      & svg.lucide,\n      & p {\n        color: #064e3b;\n      }\n\n      :root.dark & {\n        border-color: #10b9814d;\n        background: #10b9811a;\n\n        & svg.lucide,\n        & p {\n          color: #a7f3d0;\n        }\n      }\n    `}\n`;\n\nconst StyledChildren = styled.span`\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n`;\n\ninterface CalloutProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  icon?: IconProps;\n  type?: CalloutType;\n}\n\nfunction Callout({ children, type, icon }: CalloutProps) {\n  const iconType =\n    type === \"note\"\n      ? \"CircleAlert\"\n      : type === \"info\"\n        ? \"Info\"\n        : type === \"warning\"\n          ? \"TriangleAlert\"\n          : type === \"danger\"\n            ? \"OctagonAlert\"\n            : type === \"success\"\n              ? \"Check\"\n              : (icon as IconProps);\n  return (\n    <StyledCallout $type={type}>\n      <Icon name={iconType} size={16} />\n      <StyledChildren>{children}</StyledChildren>\n    </StyledCallout>\n  );\n}\n\nexport { Callout };\n";

package/dist/templates/components/layout/Callout.js

@@ -22,64 +22,119 @@ const StyledCallout = styled.div<{ theme: Theme; $type?: CalloutType }>\`
     margin: 3px 10px 0 0;
   }
 
-  \${({ theme, $type }) =>
+  /* Callout tints are alert-semantic (info-blue, warning-amber, danger-red,
+     etc.) and intentionally independent of theme.json. Light-mode values are
+     defined by default; dark-mode overrides live in :root.dark & blocks so
+     the swap happens via the active <html> class with no re-render. */
+  \${({ $type }) =>
     $type === "note" &&
     css\`
-      border-color: \${theme.isDark ? "#0ea5e94d" : "#0ea5e933"};
-      background: \${theme.isDark ? "#0ea5e91a" : "#f0f9ff80"};
+      border-color: #0ea5e933;
+      background: #f0f9ff80;
 
       & svg.lucide,
       & p {
-        color: \${theme.isDark ? "#bae6fd" : "#0c4a6e"};
+        color: #0c4a6e;
+      }
+
+      :root.dark & {
+        border-color: #0ea5e94d;
+        background: #0ea5e91a;
+
+        & svg.lucide,
+        & p {
+          color: #bae6fd;
+        }
       }
     \`}
 
-  \${({ theme, $type }) =>
+  \${({ $type }) =>
     $type === "info" &&
     css\`
-      border-color: \${theme.isDark ? "#71717a4d" : "#71717a33"};
-      background: \${theme.isDark ? "#71717a1a" : "#fafafa80"};
+      border-color: #71717a33;
+      background: #fafafa80;
 
       & svg.lucide,
       & .lucide,
       & p {
-        color: \${theme.isDark ? "#e4e4e7" : "#18181b"};
+        color: #18181b;
+      }
+
+      :root.dark & {
+        border-color: #71717a4d;
+        background: #71717a1a;
+
+        & svg.lucide,
+        & .lucide,
+        & p {
+          color: #e4e4e7;
+        }
       }
     \`}
 
-  \${({ theme, $type }) =>
+  \${({ $type }) =>
     $type === "warning" &&
     css\`
-      border-color: \${theme.isDark ? "#f59e0b4d" : "#f59e0b33"};
-      background: \${theme.isDark ? "#f59e0b1a" : "#fffbeb80"};
+      border-color: #f59e0b33;
+      background: #fffbeb80;
 
       & svg.lucide,
       & p {
-        color: \${theme.isDark ? "#fde68a" : "#78350f"};
+        color: #78350f;
+      }
+
+      :root.dark & {
+        border-color: #f59e0b4d;
+        background: #f59e0b1a;
+
+        & svg.lucide,
+        & p {
+          color: #fde68a;
+        }
       }
     \`}
 
-  \${({ theme, $type }) =>
+  \${({ $type }) =>
     $type === "danger" &&
     css\`
-      border-color: \${theme.isDark ? "#ef44444d" : "#ef444433"};
-      background: \${theme.isDark ? "#ef44441a" : "#fef2f280"};
+      border-color: #ef444433;
+      background: #fef2f280;
 
       & svg.lucide,
       & p {
-        color: \${theme.isDark ? "#fecaca" : "#7f1d1d"};
+        color: #7f1d1d;
+      }
+
+      :root.dark & {
+        border-color: #ef44444d;
+        background: #ef44441a;
+
+        & svg.lucide,
+        & p {
+          color: #fecaca;
+        }
       }
     \`}
 
-  \${({ theme, $type }) =>
+  \${({ $type }) =>
     $type === "success" &&
     css\`
-      border-color: \${theme.isDark ? "#10b9814d" : "#10b98133"};
-      background: \${theme.isDark ? "#10b9811a" : "#ecfdf580"};
+      border-color: #10b98133;
+      background: #ecfdf580;
 
       & svg.lucide,
       & p {
-        color: \${theme.isDark ? "#a7f3d0" : "#064e3b"};
+        color: #064e3b;
+      }
+
+      :root.dark & {
+        border-color: #10b9814d;
+        background: #10b9811a;
+
+        & svg.lucide,
+        & p {
+          color: #a7f3d0;
+        }
       }
     \`}
 \`;

package/dist/templates/components/layout/Card.d.ts

@@ -1 +1 @@
-export declare const cardTemplate = "\"use client\";\nimport Link from \"next/link\";\nimport styled, { css, useTheme } from \"styled-components\";\nimport { styledText, Theme } from \"cherry-styled-components\";\nimport { Icon, IconProps } from \"@/components/layout/Icon\";\nimport { interactiveStyles } from \"@/components/layout/SharedStyled\";\n\nconst cardStyles = css<{ theme: Theme }>`\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  padding: 20px;\n  margin: 0;\n  ${({ theme }) => styledText(theme)}\n  color: ${({ theme }) => theme.colors.grayDark};\n`;\n\nconst StyledCard = styled.div<{ theme: Theme }>`\n  ${cardStyles}\n`;\n\nconst StyledCardLink = styled(Link)<{ theme: Theme }>`\n  ${interactiveStyles};\n  ${cardStyles}\n  text-decoration: none;\n`;\n\nconst StyledCardTitle = styled.p<{ theme: Theme }>`\n  font-weight: bold;\n  margin: 5px 0;\n  color: ${({ theme }) => theme.colors.dark};\n  ${({ theme }) => styledText(theme)};\n`;\n\ninterface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  title: string;\n  icon?: IconProps;\n  href?: string;\n}\n\nfunction Card({ children, title, icon, href }: CardProps) {\n  const theme = useTheme() as Theme;\n\n  const content = (\n    <>\n      {icon && <Icon name={icon} color={theme.colors.primary} />}\n      <StyledCardTitle>{title}</StyledCardTitle>\n      {children}\n    </>\n  );\n\n  if (href) {\n    return <StyledCardLink href={href}>{content}</StyledCardLink>;\n  }\n\n  return <StyledCard>{content}</StyledCard>;\n}\n\nexport { Card };\n";
+export declare const cardTemplate = "\"use client\";\nimport Link from \"next/link\";\nimport styled, { css, useTheme } from \"styled-components\";\nimport { styledText } from \"cherry-styled-components\";\nimport { Theme } from \"@/app/theme\";\nimport { Icon, IconProps } from \"@/components/layout/Icon\";\nimport { interactiveStyles } from \"@/components/layout/SharedStyled\";\n\nconst cardStyles = css<{ theme: Theme }>`\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  padding: 20px;\n  margin: 0;\n  ${({ theme }) => styledText(theme)}\n  color: ${({ theme }) => theme.colors.grayDark};\n`;\n\nconst StyledCard = styled.div<{ theme: Theme }>`\n  ${cardStyles}\n`;\n\nconst StyledCardLink = styled(Link)<{ theme: Theme }>`\n  ${interactiveStyles};\n  ${cardStyles}\n  text-decoration: none;\n`;\n\nconst StyledCardTitle = styled.p<{ theme: Theme }>`\n  font-weight: bold;\n  margin: 5px 0;\n  color: ${({ theme }) => theme.colors.dark};\n  ${({ theme }) => styledText(theme)};\n`;\n\ninterface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  title: string;\n  icon?: IconProps;\n  href?: string;\n}\n\nfunction Card({ children, title, icon, href }: CardProps) {\n  const theme = useTheme() as Theme;\n\n  const content = (\n    <>\n      {icon && <Icon name={icon} color={theme.colors.primary} />}\n      <StyledCardTitle>{title}</StyledCardTitle>\n      {children}\n    </>\n  );\n\n  if (href) {\n    return <StyledCardLink href={href}>{content}</StyledCardLink>;\n  }\n\n  return <StyledCard>{content}</StyledCard>;\n}\n\nexport { Card };\n";

package/dist/templates/components/layout/Card.js

@@ -1,7 +1,8 @@
 export const cardTemplate = `"use client";
 import Link from "next/link";
 import styled, { css, useTheme } from "styled-components";
-import { styledText, Theme } from "cherry-styled-components";
+import { styledText } from "cherry-styled-components";
+import { Theme } from "@/app/theme";
 import { Icon, IconProps } from "@/components/layout/Icon";
 import { interactiveStyles } from "@/components/layout/SharedStyled";
 

package/dist/templates/components/layout/CherryThemeProvider.d.ts

@@ -1 +1 @@
-export declare const cherryThemeProviderTemplate = "import React from \"react\";\nimport { cookies } from \"next/headers\";\nimport { Theme } from \"@/app/theme\";\nimport { ClientThemeProvider } from \"@/components/layout/ClientThemeProvider\";\n\nasync function CherryThemeProvider({\n  children,\n  theme,\n  themeDark,\n}: {\n  children: React.ReactNode;\n  theme: Theme;\n  themeDark?: Theme;\n}) {\n  const cookieStore = await cookies();\n  const cookieTheme = cookieStore.get(\"theme\")?.value;\n  const useDark = cookieTheme === \"dark\";\n  const currentTheme = useDark && themeDark ? themeDark : theme;\n\n  return (\n    <ClientThemeProvider theme={currentTheme}>{children}</ClientThemeProvider>\n  );\n}\n\nexport { CherryThemeProvider };\n";
+export declare const cherryThemeProviderTemplate = "import React from \"react\";\nimport { Theme } from \"@/app/theme\";\nimport { ClientThemeProvider } from \"@/components/layout/ClientThemeProvider\";\n\n// Light vs dark is decided by the \"dark\" class on <html>, set before paint\n// by the theme-init blocking script in the root layout. The theme object\n// itself references CSS variables that flip per :root vs :root.dark, so\n// no per-request server data is needed and pages stay statically renderable.\nfunction CherryThemeProvider({\n  children,\n  theme,\n}: {\n  children: React.ReactNode;\n  theme: Theme;\n}) {\n  return <ClientThemeProvider theme={theme}>{children}</ClientThemeProvider>;\n}\n\nexport { CherryThemeProvider };\n";

package/dist/templates/components/layout/CherryThemeProvider.js

@@ -1,25 +1,19 @@
 export const cherryThemeProviderTemplate = `import React from "react";
-import { cookies } from "next/headers";
 import { Theme } from "@/app/theme";
 import { ClientThemeProvider } from "@/components/layout/ClientThemeProvider";
 
-async function CherryThemeProvider({
+// Light vs dark is decided by the "dark" class on <html>, set before paint
+// by the theme-init blocking script in the root layout. The theme object
+// itself references CSS variables that flip per :root vs :root.dark, so
+// no per-request server data is needed and pages stay statically renderable.
+function CherryThemeProvider({
   children,
   theme,
-  themeDark,
 }: {
   children: React.ReactNode;
   theme: Theme;
-  themeDark?: Theme;
 }) {
-  const cookieStore = await cookies();
-  const cookieTheme = cookieStore.get("theme")?.value;
-  const useDark = cookieTheme === "dark";
-  const currentTheme = useDark && themeDark ? themeDark : theme;
-
-  return (
-    <ClientThemeProvider theme={currentTheme}>{children}</ClientThemeProvider>
-  );
+  return <ClientThemeProvider theme={theme}>{children}</ClientThemeProvider>;
 }
 
 export { CherryThemeProvider };

package/dist/templates/components/layout/ClientThemeProvider.d.ts

@@ -1 +1 @@
-export declare const clientThemeProviderTemplate = "\"use client\";\nimport React, { useEffect, useMemo, useState, useContext } from \"react\";\nimport { ThemeProvider as StyledThemeProvider } from \"styled-components\";\nimport { Theme } from \"@/app/theme\";\nimport { useRouter } from \"next/navigation\";\nimport { GlobalStyles } from \"@/components/layout/GlobalStyles\";\n\ntype ThemeOverrideContextValue = {\n  theme: Theme;\n  setTheme: (t: Theme | null) => void;\n};\n\nconst ThemeOverrideContext =\n  React.createContext<ThemeOverrideContextValue | null>(null);\n\nfunction useThemeOverride() {\n  const ctx = useContext(ThemeOverrideContext);\n  if (!ctx) {\n    throw new Error(\"useThemeOverride must be used within ClientThemeProvider\");\n  }\n  return ctx;\n}\n\nfunction ClientThemeProvider({\n  children,\n  theme,\n}: {\n  children: React.ReactNode;\n  theme: Theme;\n}) {\n  const router = useRouter();\n  const [overrideTheme, setOverrideTheme] = useState<Theme | null>(null);\n  useEffect(() => {\n    try {\n      const cookie = document.cookie\n        .split(\";\")\n        .map((c) => c.trim())\n        .find((c) => c.startsWith(\"theme=\"));\n      const cookieValue = cookie ? cookie.split(\"=\")[1] : undefined;\n      if (!cookieValue) {\n        // Fallback: blocking script should have set this, but handle edge cases\n        const prefersDark =\n          window.matchMedia &&\n          window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n        const shouldBe = prefersDark ? \"dark\" : \"light\";\n        document.cookie = `theme=${shouldBe};path=/;max-age=31536000;SameSite=Lax`;\n        router.refresh();\n      } else if (theme.isDark !== (cookieValue === \"dark\")) {\n        // Server-rendered theme doesn't match cookie (e.g., cookie was set\n        // by the blocking script after SSR already committed to light theme)\n        router.refresh();\n      } else {\n        // Theme matches cookie - remove the flash-prevention style injected\n        // by the blocking script so styled-components takes over\n        const el = document.getElementById(\"__theme-init\");\n        if (el) el.remove();\n      }\n    } catch {}\n  }, [router, theme.isDark]);\n\n  const effectiveTheme = useMemo(\n    () => overrideTheme ?? theme,\n    [overrideTheme, theme],\n  );\n  return (\n    <ThemeOverrideContext.Provider\n      value={{ theme: effectiveTheme, setTheme: setOverrideTheme }}\n    >\n      <StyledThemeProvider theme={effectiveTheme}>\n        <GlobalStyles />\n        {children}\n      </StyledThemeProvider>\n    </ThemeOverrideContext.Provider>\n  );\n}\n\nexport { ClientThemeProvider, useThemeOverride };\n";
+export declare const clientThemeProviderTemplate = "\"use client\";\nimport React, { useCallback, useContext, useEffect, useState } from \"react\";\nimport { ThemeProvider as StyledThemeProvider } from \"styled-components\";\nimport { Theme } from \"@/app/theme\";\nimport { GlobalStyles } from \"@/components/layout/GlobalStyles\";\n\ntype ThemeMode = \"light\" | \"dark\";\n\ntype ThemeContextValue = {\n  /** The styled-components theme object \u2014 same reference in both modes;\n      the values it points to are CSS variables that flip per active class. */\n  theme: Theme;\n  /** Active mode, derived from the \"dark\" class on <html>. */\n  mode: ThemeMode;\n  /** Update the active mode: flips the class and persists the cookie. */\n  setMode: (m: ThemeMode) => void;\n};\n\nconst ThemeContext = React.createContext<ThemeContextValue | null>(null);\n\nfunction useThemeOverride() {\n  const ctx = useContext(ThemeContext);\n  if (!ctx) {\n    throw new Error(\"useThemeOverride must be used within ClientThemeProvider\");\n  }\n  return ctx;\n}\n\nfunction readMode(): ThemeMode {\n  if (typeof document === \"undefined\") return \"light\";\n  return document.documentElement.classList.contains(\"dark\") ? \"dark\" : \"light\";\n}\n\nfunction ClientThemeProvider({\n  children,\n  theme,\n}: {\n  children: React.ReactNode;\n  theme: Theme;\n}) {\n  // Mode lives in React state so consumers (e.g. ThemeToggle) re-render when\n  // the user toggles. The visual swap itself is driven entirely by the\n  // \"dark\" class on <html> + CSS variables \u2014 React doesn't drive paint.\n  const [mode, setModeState] = useState<ThemeMode>(\"light\");\n\n  useEffect(() => {\n    // Sync with the class set by the theme-init blocking script. Also\n    // backfill the cookie if the script didn't get to write one (rare).\n    setModeState(readMode());\n    try {\n      const has = document.cookie\n        .split(\";\")\n        .some((c) => c.trim().startsWith(\"theme=\"));\n      if (!has) {\n        const m = readMode();\n        document.cookie = `theme=${m};path=/;max-age=31536000;SameSite=Lax`;\n      }\n    } catch {}\n  }, []);\n\n  const setMode = useCallback((next: ThemeMode) => {\n    if (typeof document !== \"undefined\") {\n      document.documentElement.classList.toggle(\"dark\", next === \"dark\");\n      document.documentElement.style.colorScheme = next;\n      try {\n        document.cookie = `theme=${next};path=/;max-age=31536000;SameSite=Lax`;\n      } catch {}\n    }\n    setModeState(next);\n  }, []);\n\n  return (\n    <ThemeContext.Provider value={{ theme, mode, setMode }}>\n      <StyledThemeProvider theme={theme}>\n        <GlobalStyles />\n        {children}\n      </StyledThemeProvider>\n    </ThemeContext.Provider>\n  );\n}\n\nexport { ClientThemeProvider, useThemeOverride };\n";

package/dist/templates/components/layout/ClientThemeProvider.js

@@ -1,26 +1,36 @@
 export const clientThemeProviderTemplate = `"use client";
-import React, { useEffect, useMemo, useState, useContext } from "react";
+import React, { useCallback, useContext, useEffect, useState } from "react";
 import { ThemeProvider as StyledThemeProvider } from "styled-components";
 import { Theme } from "@/app/theme";
-import { useRouter } from "next/navigation";
 import { GlobalStyles } from "@/components/layout/GlobalStyles";
 
-type ThemeOverrideContextValue = {
+type ThemeMode = "light" | "dark";
+
+type ThemeContextValue = {
+  /** The styled-components theme object — same reference in both modes;
+      the values it points to are CSS variables that flip per active class. */
   theme: Theme;
-  setTheme: (t: Theme | null) => void;
+  /** Active mode, derived from the "dark" class on <html>. */
+  mode: ThemeMode;
+  /** Update the active mode: flips the class and persists the cookie. */
+  setMode: (m: ThemeMode) => void;
 };
 
-const ThemeOverrideContext =
-  React.createContext<ThemeOverrideContextValue | null>(null);
+const ThemeContext = React.createContext<ThemeContextValue | null>(null);
 
 function useThemeOverride() {
-  const ctx = useContext(ThemeOverrideContext);
+  const ctx = useContext(ThemeContext);
   if (!ctx) {
     throw new Error("useThemeOverride must be used within ClientThemeProvider");
   }
   return ctx;
 }
 
+function readMode(): ThemeMode {
+  if (typeof document === "undefined") return "light";
+  return document.documentElement.classList.contains("dark") ? "dark" : "light";
+}
+
 function ClientThemeProvider({
   children,
   theme,
@@ -28,49 +38,44 @@ function ClientThemeProvider({
   children: React.ReactNode;
   theme: Theme;
 }) {
-  const router = useRouter();
-  const [overrideTheme, setOverrideTheme] = useState<Theme | null>(null);
+  // Mode lives in React state so consumers (e.g. ThemeToggle) re-render when
+  // the user toggles. The visual swap itself is driven entirely by the
+  // "dark" class on <html> + CSS variables — React doesn't drive paint.
+  const [mode, setModeState] = useState<ThemeMode>("light");
+
   useEffect(() => {
+    // Sync with the class set by the theme-init blocking script. Also
+    // backfill the cookie if the script didn't get to write one (rare).
+    setModeState(readMode());
     try {
-      const cookie = document.cookie
+      const has = document.cookie
         .split(";")
-        .map((c) => c.trim())
-        .find((c) => c.startsWith("theme="));
-      const cookieValue = cookie ? cookie.split("=")[1] : undefined;
-      if (!cookieValue) {
-        // Fallback: blocking script should have set this, but handle edge cases
-        const prefersDark =
-          window.matchMedia &&
-          window.matchMedia("(prefers-color-scheme: dark)").matches;
-        const shouldBe = prefersDark ? "dark" : "light";
-        document.cookie = \`theme=\${shouldBe};path=/;max-age=31536000;SameSite=Lax\`;
-        router.refresh();
-      } else if (theme.isDark !== (cookieValue === "dark")) {
-        // Server-rendered theme doesn't match cookie (e.g., cookie was set
-        // by the blocking script after SSR already committed to light theme)
-        router.refresh();
-      } else {
-        // Theme matches cookie - remove the flash-prevention style injected
-        // by the blocking script so styled-components takes over
-        const el = document.getElementById("__theme-init");
-        if (el) el.remove();
+        .some((c) => c.trim().startsWith("theme="));
+      if (!has) {
+        const m = readMode();
+        document.cookie = \`theme=\${m};path=/;max-age=31536000;SameSite=Lax\`;
       }
     } catch {}
-  }, [router, theme.isDark]);
+  }, []);
+
+  const setMode = useCallback((next: ThemeMode) => {
+    if (typeof document !== "undefined") {
+      document.documentElement.classList.toggle("dark", next === "dark");
+      document.documentElement.style.colorScheme = next;
+      try {
+        document.cookie = \`theme=\${next};path=/;max-age=31536000;SameSite=Lax\`;
+      } catch {}
+    }
+    setModeState(next);
+  }, []);
 
-  const effectiveTheme = useMemo(
-    () => overrideTheme ?? theme,
-    [overrideTheme, theme],
-  );
   return (
-    <ThemeOverrideContext.Provider
-      value={{ theme: effectiveTheme, setTheme: setOverrideTheme }}
-    >
-      <StyledThemeProvider theme={effectiveTheme}>
+    <ThemeContext.Provider value={{ theme, mode, setMode }}>
+      <StyledThemeProvider theme={theme}>
         <GlobalStyles />
         {children}
       </StyledThemeProvider>
-    </ThemeOverrideContext.Provider>
+    </ThemeContext.Provider>
   );
 }