doccupine 0.0.88 → 0.0.89

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>
   );
 }
 

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

@@ -1 +1 @@
-export declare const codeTemplate = "\"use client\";\nimport { useState, useCallback, useMemo } from \"react\";\nimport styled from \"styled-components\";\nimport { Theme, styledCode } from \"cherry-styled-components\";\nimport { rgba } from \"polished\";\nimport { unified } from \"unified\";\nimport rehypeParse from \"rehype-parse\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport rehypeStringify from \"rehype-stringify\";\nimport { Icon } from \"@/components/layout/Icon\";\n\ninterface CodeProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"theme\"\n> {\n  code: string;\n  language?: string;\n  theme?: Theme;\n}\n\nconst CodeWrapper = styled.span<{ theme: Theme }>`\n  position: relative;\n  z-index: 2;\n  display: block;\n  width: 100%;\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border: solid 1px\n    ${({ theme }) =>\n      theme.isDark\n        ? rgba(theme.colors.dark, 0.2)\n        : rgba(theme.colors.dark, 0.1)};\n`;\n\nconst TopBar = styled.div<{ theme: Theme }>`\n  background: ${({ theme }) => (theme.isDark ? \"#0d1117\" : \"#f6f8fa\")};\n  border-top-left-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-top-right-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-bottom: solid 1px\n    ${({ theme }) =>\n      theme.isDark ? rgba(\"#ffffff\", 0.1) : rgba(\"#000000\", 0.1)};\n  height: 33px;\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 5px;\n  padding: 0 10px;\n`;\n\nconst DotsContainer = styled.div`\n  display: flex;\n  gap: 5px;\n`;\n\nconst Dot = styled.span<{ theme: Theme }>`\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: ${({ theme }) =>\n    theme.isDark ? rgba(\"#ffffff\", 0.1) : rgba(\"#000000\", 0.1)};\n`;\n\nconst CopyButton = styled.button<{ theme: Theme; $copied: boolean }>`\n  background: ${({ theme, $copied }) =>\n    $copied\n      ? theme.isDark\n        ? rgba(\"#7ee787\", 0.2)\n        : rgba(\"#2da44e\", 0.1)\n      : \"transparent\"};\n  border: solid 1px\n    ${({ theme, $copied }) =>\n      $copied\n        ? theme.isDark\n          ? \"#7ee787\"\n          : \"#2da44e\"\n        : theme.isDark\n          ? rgba(\"#ffffff\", 0.1)\n          : rgba(\"#000000\", 0.1)};\n  color: ${({ theme, $copied }) =>\n    $copied\n      ? theme.isDark\n        ? \"#7ee787\"\n        : \"#2da44e\"\n      : theme.isDark\n        ? \"#c9d1d9\"\n        : \"#57606a\"};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 4px 8px;\n  font-size: 12px;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  margin-right: -6px;\n\n  & svg.lucide {\n    color: ${({ theme, $copied }) =>\n      $copied\n        ? theme.isDark\n          ? \"#7ee787\"\n          : \"#2da44e\"\n        : theme.isDark\n          ? \"#c9d1d9\"\n          : \"#57606a\"};\n  }\n\n  &:hover {\n    background: ${({ theme, $copied }) =>\n      $copied\n        ? theme.isDark\n          ? rgba(\"#7ee787\", 0.3)\n          : rgba(\"#2da44e\", 0.2)\n        : theme.isDark\n          ? rgba(\"#ffffff\", 0.1)\n          : rgba(\"#000000\", 0.05)};\n    border-color: ${({ theme, $copied }) =>\n      $copied\n        ? theme.isDark\n          ? \"#7ee787\"\n          : \"#2da44e\"\n        : theme.isDark\n          ? rgba(\"#ffffff\", 0.2)\n          : rgba(\"#000000\", 0.2)};\n  }\n\n  &:active {\n    transform: scale(0.95);\n  }\n`;\n\nconst Body = styled.div<{ theme: Theme }>`\n  background: ${({ theme }) => (theme.isDark ? \"#0d1117\" : \"#ffffff\")};\n  border-bottom-left-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-bottom-right-radius: ${({ theme }) => theme.spacing.radius.lg};\n  color: ${({ theme }) => (theme.isDark ? \"#ffffff\" : \"#24292f\")};\n  padding: 20px;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  text-align: left;\n  overflow-x: auto;\n  overflow-y: auto;\n  max-height: calc(100dvh - 400px);\n  ${({ theme }) => styledCode(theme)};\n\n  /* Dark mode syntax highlighting (GitHub Dark) */\n  ${({ theme }) =>\n    theme.isDark &&\n    `\n    & .hljs {\n      color: #c9d1d9;\n      background: #0d1117;\n    }\n\n    & .hljs-doctag,\n    & .hljs-keyword,\n    & .hljs-meta .hljs-keyword,\n    & .hljs-template-tag,\n    & .hljs-template-variable,\n    & .hljs-type,\n    & .hljs-variable.language_ {\n      color: #ff7b72;\n    }\n\n    & .hljs-title,\n    & .hljs-title.class_,\n    & .hljs-title.class_.inherited__,\n    & .hljs-title.function_ {\n      color: #d2a8ff;\n    }\n\n    & .hljs-attr,\n    & .hljs-attribute,\n    & .hljs-literal,\n    & .hljs-meta,\n    & .hljs-number,\n    & .hljs-operator,\n    & .hljs-selector-attr,\n    & .hljs-selector-class,\n    & .hljs-selector-id,\n    & .hljs-variable {\n      color: #79c0ff;\n    }\n\n    & .hljs-meta .hljs-string,\n    & .hljs-regexp,\n    & .hljs-string {\n      color: #a5d6ff;\n    }\n\n    & .hljs-built_in,\n    & .hljs-symbol {\n      color: #ffa657;\n    }\n\n    & .hljs-code,\n    & .hljs-comment,\n    & .hljs-formula {\n      color: #8b949e;\n    }\n\n    & .hljs-name,\n    & .hljs-quote,\n    & .hljs-selector-pseudo,\n    & .hljs-selector-tag {\n      color: #7ee787;\n    }\n\n    & .hljs-subst {\n      color: #c9d1d9;\n    }\n\n    & .hljs-section {\n      color: #1f6feb;\n      font-weight: 700;\n    }\n\n    & .hljs-bullet {\n      color: #f2cc60;\n    }\n\n    & .hljs-emphasis {\n      color: #c9d1d9;\n      font-style: italic;\n    }\n\n    & .hljs-strong {\n      color: #c9d1d9;\n      font-weight: 700;\n    }\n\n    & .hljs-addition {\n      color: #aff5b4;\n      background-color: #033a16;\n    }\n\n    & .hljs-deletion {\n      color: #ffdcd7;\n      background-color: #67060c;\n    }\n  `}\n\n  /* Light mode syntax highlighting (GitHub Light) */\n  ${({ theme }) =>\n    !theme.isDark &&\n    `\n    & .hljs {\n      color: #24292f;\n      background: #ffffff;\n    }\n\n    & .hljs-doctag,\n    & .hljs-keyword,\n    & .hljs-meta .hljs-keyword,\n    & .hljs-template-tag,\n    & .hljs-template-variable,\n    & .hljs-type,\n    & .hljs-variable.language_ {\n      color: #cf222e;\n    }\n\n    & .hljs-title,\n    & .hljs-title.class_,\n    & .hljs-title.class_.inherited__,\n    & .hljs-title.function_ {\n      color: #8250df;\n    }\n\n    & .hljs-attr,\n    & .hljs-attribute,\n    & .hljs-literal,\n    & .hljs-meta,\n    & .hljs-number,\n    & .hljs-operator,\n    & .hljs-selector-attr,\n    & .hljs-selector-class,\n    & .hljs-selector-id,\n    & .hljs-variable {\n      color: #0550ae;\n    }\n\n    & .hljs-meta .hljs-string,\n    & .hljs-regexp,\n    & .hljs-string {\n      color: #0a3069;\n    }\n\n    & .hljs-built_in,\n    & .hljs-symbol {\n      color: #953800;\n    }\n\n    & .hljs-code,\n    & .hljs-comment,\n    & .hljs-formula {\n      color: #6e7781;\n    }\n\n    & .hljs-name,\n    & .hljs-quote,\n    & .hljs-selector-pseudo,\n    & .hljs-selector-tag {\n      color: #116329;\n    }\n\n    & .hljs-subst {\n      color: #24292f;\n    }\n\n    & .hljs-section {\n      color: #0550ae;\n      font-weight: 700;\n    }\n\n    & .hljs-bullet {\n      color: #953800;\n    }\n\n    & .hljs-emphasis {\n      color: #24292f;\n      font-style: italic;\n    }\n\n    & .hljs-strong {\n      color: #24292f;\n      font-weight: 700;\n    }\n\n    & .hljs-addition {\n      color: #116329;\n      background-color: #dafbe1;\n    }\n\n    & .hljs-deletion {\n      color: #82071e;\n      background-color: #ffebe9;\n    }\n  `}\n`;\n\nconst escapeHtml = (unsafe: string): string => {\n  return unsafe\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\")\n    .replace(/'/g, \"&#039;\");\n};\n\nconst sanitizeLanguage = (lang: string): string =>\n  lang.replace(/[^a-zA-Z0-9_-]/g, \"\");\n\nconst highlightCode = (code: string, language: string): string => {\n  const escapedCode = escapeHtml(code);\n  const safeLang = sanitizeLanguage(language);\n  const result = unified()\n    .use(rehypeParse, { fragment: true })\n    .use(rehypeHighlight, {\n      detect: true,\n      ignoreMissing: true,\n    })\n    .use(rehypeStringify)\n    .processSync(\n      `<pre><code class=\"language-${safeLang}\">${escapedCode}</code></pre>`,\n    );\n\n  return String(result);\n};\n\nfunction Code({ code, language = \"javascript\", theme, className }: CodeProps) {\n  const [copied, setCopied] = useState(false);\n  const highlightedCode = useMemo(\n    () => highlightCode(code, language),\n    [code, language],\n  );\n\n  const handleCopy = useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(code);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error(\"Failed to copy code:\", err);\n    }\n  }, [code]);\n\n  return (\n    <CodeWrapper\n      className={`${className ?? \"\"} code-wrapper`.trim()}\n      theme={theme}\n    >\n      <TopBar theme={theme}>\n        <DotsContainer>\n          <Dot theme={theme} />\n          <Dot theme={theme} />\n          <Dot theme={theme} />\n        </DotsContainer>\n        <CopyButton onClick={handleCopy} $copied={copied} theme={theme}>\n          {copied ? (\n            <>\n              <Icon name=\"check\" size={12} />\n              <span>Copied!</span>\n            </>\n          ) : (\n            <>\n              <Icon name=\"copy\" size={12} />\n              <span>Copy</span>\n            </>\n          )}\n        </CopyButton>\n      </TopBar>\n      <Body\n        dangerouslySetInnerHTML={{ __html: highlightedCode }}\n        theme={theme}\n        className=\"code-wrapper-body\"\n      />\n    </CodeWrapper>\n  );\n}\n\nexport { Code };\n";
+export declare const codeTemplate = "\"use client\";\nimport { useState, useCallback, useMemo } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { styledCode } from \"cherry-styled-components\";\nimport { Theme } from \"@/app/theme\";\nimport { unified } from \"unified\";\nimport rehypeParse from \"rehype-parse\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport rehypeStringify from \"rehype-stringify\";\nimport { Icon } from \"@/components/layout/Icon\";\n\ninterface CodeProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"theme\"\n> {\n  code: string;\n  language?: string;\n  theme?: Theme;\n}\n\nconst CodeWrapper = styled.span<{ theme: Theme }>`\n  position: relative;\n  z-index: 2;\n  display: block;\n  width: 100%;\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border: solid 1px rgba(0, 0, 0, 0.1);\n\n  :root.dark & {\n    border-color: rgba(255, 255, 255, 0.2);\n  }\n`;\n\n/* Code block uses a fixed GitHub-style palette in both modes. Independent of\n   theme.json so syntax highlighting stays legible regardless of brand colors.\n   Dark variants live in :root.dark & blocks so the swap happens via the\n   active <html> class with no re-render. */\nconst TopBar = styled.div<{ theme: Theme }>`\n  background: #f6f8fa;\n  border-top-left-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-top-right-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-bottom: solid 1px rgba(0, 0, 0, 0.1);\n  height: 33px;\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 5px;\n  padding: 0 10px;\n\n  :root.dark & {\n    background: #0d1117;\n    border-bottom-color: rgba(255, 255, 255, 0.1);\n  }\n`;\n\nconst DotsContainer = styled.div`\n  display: flex;\n  gap: 5px;\n`;\n\nconst Dot = styled.span<{ theme: Theme }>`\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: rgba(0, 0, 0, 0.1);\n\n  :root.dark & {\n    background: rgba(255, 255, 255, 0.1);\n  }\n`;\n\nconst CopyButton = styled.button<{ theme: Theme; $copied: boolean }>`\n  background: ${({ $copied }) =>\n    $copied ? \"rgba(45, 164, 78, 0.1)\" : \"transparent\"};\n  border: solid 1px\n    ${({ $copied }) => ($copied ? \"#2da44e\" : \"rgba(0, 0, 0, 0.1)\")};\n  color: ${({ $copied }) => ($copied ? \"#2da44e\" : \"#57606a\")};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 4px 8px;\n  font-size: 12px;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  margin-right: -6px;\n\n  & svg.lucide {\n    color: ${({ $copied }) => ($copied ? \"#2da44e\" : \"#57606a\")};\n  }\n\n  &:hover {\n    background: ${({ $copied }) =>\n      $copied ? \"rgba(45, 164, 78, 0.2)\" : \"rgba(0, 0, 0, 0.05)\"};\n    border-color: ${({ $copied }) =>\n      $copied ? \"#2da44e\" : \"rgba(0, 0, 0, 0.2)\"};\n  }\n\n  &:active {\n    transform: scale(0.95);\n  }\n\n  :root.dark & {\n    background: ${({ $copied }) =>\n      $copied ? \"rgba(126, 231, 135, 0.2)\" : \"transparent\"};\n    border-color: ${({ $copied }) =>\n      $copied ? \"#7ee787\" : \"rgba(255, 255, 255, 0.1)\"};\n    color: ${({ $copied }) => ($copied ? \"#7ee787\" : \"#c9d1d9\")};\n\n    & svg.lucide {\n      color: ${({ $copied }) => ($copied ? \"#7ee787\" : \"#c9d1d9\")};\n    }\n\n    &:hover {\n      background: ${({ $copied }) =>\n        $copied ? \"rgba(126, 231, 135, 0.3)\" : \"rgba(255, 255, 255, 0.1)\"};\n      border-color: ${({ $copied }) =>\n        $copied ? \"#7ee787\" : \"rgba(255, 255, 255, 0.2)\"};\n    }\n  }\n`;\n\n/* GitHub Light syntax highlighting by default; GitHub Dark in :root.dark.\n   Browser resolves which rule wins based on the active <html> class with no\n   JS or React re-render involved. */\nconst lightSyntaxHighlight = css`\n  & .hljs {\n    color: #24292f;\n    background: #ffffff;\n  }\n  & .hljs-doctag,\n  & .hljs-keyword,\n  & .hljs-meta .hljs-keyword,\n  & .hljs-template-tag,\n  & .hljs-template-variable,\n  & .hljs-type,\n  & .hljs-variable.language_ {\n    color: #cf222e;\n  }\n  & .hljs-title,\n  & .hljs-title.class_,\n  & .hljs-title.class_.inherited__,\n  & .hljs-title.function_ {\n    color: #8250df;\n  }\n  & .hljs-attr,\n  & .hljs-attribute,\n  & .hljs-literal,\n  & .hljs-meta,\n  & .hljs-number,\n  & .hljs-operator,\n  & .hljs-selector-attr,\n  & .hljs-selector-class,\n  & .hljs-selector-id,\n  & .hljs-variable {\n    color: #0550ae;\n  }\n  & .hljs-meta .hljs-string,\n  & .hljs-regexp,\n  & .hljs-string {\n    color: #0a3069;\n  }\n  & .hljs-built_in,\n  & .hljs-symbol {\n    color: #953800;\n  }\n  & .hljs-code,\n  & .hljs-comment,\n  & .hljs-formula {\n    color: #6e7781;\n  }\n  & .hljs-name,\n  & .hljs-quote,\n  & .hljs-selector-pseudo,\n  & .hljs-selector-tag {\n    color: #116329;\n  }\n  & .hljs-subst {\n    color: #24292f;\n  }\n  & .hljs-section {\n    color: #0550ae;\n    font-weight: 700;\n  }\n  & .hljs-bullet {\n    color: #953800;\n  }\n  & .hljs-emphasis {\n    color: #24292f;\n    font-style: italic;\n  }\n  & .hljs-strong {\n    color: #24292f;\n    font-weight: 700;\n  }\n  & .hljs-addition {\n    color: #116329;\n    background-color: #dafbe1;\n  }\n  & .hljs-deletion {\n    color: #82071e;\n    background-color: #ffebe9;\n  }\n`;\n\nconst darkSyntaxHighlight = css`\n  & .hljs {\n    color: #c9d1d9;\n    background: #0d1117;\n  }\n  & .hljs-doctag,\n  & .hljs-keyword,\n  & .hljs-meta .hljs-keyword,\n  & .hljs-template-tag,\n  & .hljs-template-variable,\n  & .hljs-type,\n  & .hljs-variable.language_ {\n    color: #ff7b72;\n  }\n  & .hljs-title,\n  & .hljs-title.class_,\n  & .hljs-title.class_.inherited__,\n  & .hljs-title.function_ {\n    color: #d2a8ff;\n  }\n  & .hljs-attr,\n  & .hljs-attribute,\n  & .hljs-literal,\n  & .hljs-meta,\n  & .hljs-number,\n  & .hljs-operator,\n  & .hljs-selector-attr,\n  & .hljs-selector-class,\n  & .hljs-selector-id,\n  & .hljs-variable {\n    color: #79c0ff;\n  }\n  & .hljs-meta .hljs-string,\n  & .hljs-regexp,\n  & .hljs-string {\n    color: #a5d6ff;\n  }\n  & .hljs-built_in,\n  & .hljs-symbol {\n    color: #ffa657;\n  }\n  & .hljs-code,\n  & .hljs-comment,\n  & .hljs-formula {\n    color: #8b949e;\n  }\n  & .hljs-name,\n  & .hljs-quote,\n  & .hljs-selector-pseudo,\n  & .hljs-selector-tag {\n    color: #7ee787;\n  }\n  & .hljs-subst {\n    color: #c9d1d9;\n  }\n  & .hljs-section {\n    color: #1f6feb;\n    font-weight: 700;\n  }\n  & .hljs-bullet {\n    color: #f2cc60;\n  }\n  & .hljs-emphasis {\n    color: #c9d1d9;\n    font-style: italic;\n  }\n  & .hljs-strong {\n    color: #c9d1d9;\n    font-weight: 700;\n  }\n  & .hljs-addition {\n    color: #aff5b4;\n    background-color: #033a16;\n  }\n  & .hljs-deletion {\n    color: #ffdcd7;\n    background-color: #67060c;\n  }\n`;\n\nconst Body = styled.div<{ theme: Theme }>`\n  background: #ffffff;\n  border-bottom-left-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-bottom-right-radius: ${({ theme }) => theme.spacing.radius.lg};\n  color: #24292f;\n  padding: 20px;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  text-align: left;\n  overflow-x: auto;\n  overflow-y: auto;\n  max-height: calc(100dvh - 400px);\n  ${({ theme }) => styledCode(theme)};\n  ${lightSyntaxHighlight};\n\n  :root.dark & {\n    background: #0d1117;\n    color: #ffffff;\n    ${darkSyntaxHighlight};\n  }\n`;\n\nconst escapeHtml = (unsafe: string): string => {\n  return unsafe\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\")\n    .replace(/'/g, \"&#039;\");\n};\n\nconst sanitizeLanguage = (lang: string): string =>\n  lang.replace(/[^a-zA-Z0-9_-]/g, \"\");\n\nconst highlightCode = (code: string, language: string): string => {\n  const escapedCode = escapeHtml(code);\n  const safeLang = sanitizeLanguage(language);\n  const result = unified()\n    .use(rehypeParse, { fragment: true })\n    .use(rehypeHighlight, {\n      detect: true,\n      ignoreMissing: true,\n    })\n    .use(rehypeStringify)\n    .processSync(\n      `<pre><code class=\"language-${safeLang}\">${escapedCode}</code></pre>`,\n    );\n\n  return String(result);\n};\n\nfunction Code({ code, language = \"javascript\", theme, className }: CodeProps) {\n  const [copied, setCopied] = useState(false);\n  const highlightedCode = useMemo(\n    () => highlightCode(code, language),\n    [code, language],\n  );\n\n  const handleCopy = useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(code);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error(\"Failed to copy code:\", err);\n    }\n  }, [code]);\n\n  return (\n    <CodeWrapper\n      className={`${className ?? \"\"} code-wrapper`.trim()}\n      theme={theme}\n    >\n      <TopBar theme={theme}>\n        <DotsContainer>\n          <Dot theme={theme} />\n          <Dot theme={theme} />\n          <Dot theme={theme} />\n        </DotsContainer>\n        <CopyButton onClick={handleCopy} $copied={copied} theme={theme}>\n          {copied ? (\n            <>\n              <Icon name=\"check\" size={12} />\n              <span>Copied!</span>\n            </>\n          ) : (\n            <>\n              <Icon name=\"copy\" size={12} />\n              <span>Copy</span>\n            </>\n          )}\n        </CopyButton>\n      </TopBar>\n      <Body\n        dangerouslySetInnerHTML={{ __html: highlightedCode }}\n        theme={theme}\n        className=\"code-wrapper-body\"\n      />\n    </CodeWrapper>\n  );\n}\n\nexport { Code };\n";