npm - doccupine - Versions diffs - 0.0.88 → 0.0.89 - Mend

doccupine 0.0.88 → 0.0.89

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

Files changed (64) hide show

package/dist/templates/components/layout/Header.js CHANGED Viewed

@@ -1,9 +1,8 @@
 export const headerTemplate = `"use client";
 import React from "react";
 import { useCallback, useContext, useRef, useState } from "react";
-import styled, { css, useTheme } from "styled-components";
+import styled, { css } from "styled-components";
 import Link from "next/link";
-import { rgba } from "polished";
 import { mq, Theme } from "@/app/theme";
 import { useOnClickOutside } from "@/components/ClickOutside";
 import { Search } from "lucide-react";
@@ -52,7 +51,8 @@ const StyledHeader = styled.header<{ theme: Theme; $hasChildren: boolean }>\`
   }
   &::after {
-    background: \${({ theme }) => rgba(theme.colors.primaryLight, 0.05)};
+    background: \${({ theme }) =>
+      \`color-mix(in srgb, \${theme.colors.primaryLight} 5%, transparent)\`};
     z-index: -1;
   }
@@ -127,7 +127,6 @@ function Header({ children }: HeaderProps) {
     isOptionActive ? closeMenu : () => {},
   );
   useOnClickOutside([langRef, wrapperRef], isLangActive ? closeMenu : () => {});
-  const theme = useTheme() as Theme;
   const { isChatActive } = useContext(ChatContext);
   const { openSearch } = useContext(SearchContext);
@@ -136,23 +135,27 @@ function Header({ children }: HeaderProps) {
       <StyledHeaderInner $hasChildren={children ? true : false}>
         <Link href="/" className="logo" aria-label="Logo">
           {customThemeJson.logo ? (
-            theme.isDark ? (
-              // eslint-disable-next-line @next/next/no-img-element
+            <>
+              {/* Both logos render; .light-only and .dark-only classes in
+                  GlobalStyles hide the inactive one based on the "dark" class
+                  on <html>. Avoids a JS-driven swap so no flash on first load. */}
+              {/* eslint-disable-next-line @next/next/no-img-element */}
               <img
-                src={customThemeJson.logo.dark}
+                className="light-only"
+                src={customThemeJson.logo.light}
                 alt="Logo"
                 width="100"
                 height="100"
               />
-            ) : (
-              // eslint-disable-next-line @next/next/no-img-element
+              {/* eslint-disable-next-line @next/next/no-img-element */}
               <img
-                src={customThemeJson.logo.light}
+                className="dark-only"
+                src={customThemeJson.logo.dark}
                 alt="Logo"
                 width="100"
                 height="100"
               />
-            )
+            </>
           ) : (
             <Logo />
           )}

package/dist/templates/components/layout/SharedStyles.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export declare const sharedStyledTemplate = "\"use client\";\nimport { ~~mq,~~ styledSmall, styledText, ~~Theme~~ } from \"cherry-styled-components\";\nimport styled, { css } from \"styled-components\";\n\nexport const interactiveStyles = css<{ theme: Theme }>`\n transition: all 0.3s ease;\n border: solid 1px transparent;\n box-shadow: 0 0 0 0px ${({ theme }) => theme.colors.primary};\n\n &:hover {\n border-color: ${({ theme }) => theme.colors.primary};\n }\n\n &:focus {\n border-color: ${({ theme }) => theme.colors.primary};\n box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};\n }\n\n &:active {\n box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};\n }\n`;\n\nexport const styledAnchor = css<{ theme: Theme }>`\n & a:not([class]):not(:has(img)) {\n color: inherit;\n transition: all 0.3s ease;\n text-decoration: none;\n box-shadow: 0 2px 0 0 ${({ theme }) => theme.colors.primary};\n\n &:hover {\n color: ${({ theme }) ~~=>\n theme.isDark~~ ? theme.colors.~~primaryLight : theme.colors.primaryDark~~};\n box-shadow: 0 1px 0 0 ${({ theme }) => theme.colors.primary};\n }\n }\n`;\n\nexport const stylesLists = css<{ theme: Theme }>`\n & ul,\n & ol {\n & li {\n & > .code-wrapper {\n margin: 10px 0;\n }\n }\n }\n\n & ul {\n list-style: none;\n padding: 0;\n margin: 0;\n\n & li {\n text-indent: 0;\n display: block;\n position: relative;\n padding: 0 0 0 15px;\n margin: 0;\n ${({ theme }) => styledText(theme)};\n min-height: 23px;\n\n ${mq(\"lg\")} {\n min-height: 27px;\n }\n\n &::before {\n content: \"\";\n display: block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: ${({ theme }) => theme.colors.primary};\n position: absolute;\n top: 8px;\n left: 2px;\n\n ${mq(\"lg\")} {\n top: 10px;\n }\n }\n }\n }\n\n & ol {\n padding: 0;\n margin: 0;\n\n & ul {\n padding-left: 15px;\n }\n\n & > li {\n position: relative;\n padding: 0;\n counter-increment: item;\n margin: 0;\n ${({ theme }) => styledText(theme)};\n\n &::before {\n content: counter(item) \".\";\n display: inline-block;\n margin: 0 4px 0 0;\n font-weight: 700;\n color: ${({ theme }) => theme.colors.primary};\n min-width: max-content;\n }\n }\n }\n`;\n\nexport const styledTable = css<{ theme: Theme }>`\n & .table-wrapper {\n overflow-x: auto;\n width: 100%;\n }\n\n & table {\n margin: 0;\n padding: 0;\n border-collapse: collapse;\n width: 100%;\n text-align: left;\n\n & tr {\n margin: 0;\n padding: 0;\n }\n\n & th {\n border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n padding: 10px 10px 10px 0;\n ${({ theme }) => styledSmall(theme)};\n font-weight: 600;\n color: ${({ theme }) => theme.colors.dark};\n }\n\n & td {\n border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n padding: 10px 10px 10px 0;\n color: ${({ theme }) => theme.colors.grayDark};\n ${({ theme }) => styledSmall(theme)};\n }\n }\n`;\n\nexport const StyledSmallButton = styled.button<{ theme: Theme }>`\n ${interactiveStyles};\n background: ${({ theme }) => theme.colors.light};\n border: solid 1px ${({ theme }) => theme.colors.grayLight};\n color: ${({ theme }) ~~=>\n theme.isDark~~ ? theme.colors.~~primaryLight : theme.colors.primaryDark~~};\n border-radius: ${({ theme }) => theme.spacing.radius.xs};\n padding: 6px 8px;\n font-size: 12px;\n font-family: inherit;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 6px;\n margin-right: -6px;\n\n & svg.lucide {\n color: inherit;\n }\n`;\n";
1	+ export declare const sharedStyledTemplate = "\"use client\";\nimport { styledSmall, styledText } from \"cherry-styled-components\";\nimport { mq, Theme } from \"@/app/theme\";\nimport styled, { css } from \"styled-components\";\n\nexport const interactiveStyles = css<{ theme: Theme }>`\n transition: all 0.3s ease;\n border: solid 1px transparent;\n box-shadow: 0 0 0 0px ${({ theme }) => theme.colors.primary};\n\n &:hover {\n border-color: ${({ theme }) => theme.colors.primary};\n }\n\n &:focus {\n border-color: ${({ theme }) => theme.colors.primary};\n box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};\n }\n\n &:active {\n box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};\n }\n`;\n\nexport const styledAnchor = css<{ theme: Theme }>`\n & a:not([class]):not(:has(img)) {\n color: inherit;\n transition: all 0.3s ease;\n text-decoration: none;\n box-shadow: 0 2px 0 0 ${({ theme }) => theme.colors.primary};\n\n &:hover {\n color: ${({ theme }) => theme.colors.accent};\n box-shadow: 0 1px 0 0 ${({ theme }) => theme.colors.primary};\n }\n }\n`;\n\nexport const stylesLists = css<{ theme: Theme }>`\n & ul,\n & ol {\n & li {\n & > .code-wrapper {\n margin: 10px 0;\n }\n }\n }\n\n & ul {\n list-style: none;\n padding: 0;\n margin: 0;\n\n & li {\n text-indent: 0;\n display: block;\n position: relative;\n padding: 0 0 0 15px;\n margin: 0;\n ${({ theme }) => styledText(theme)};\n min-height: 23px;\n\n ${mq(\"lg\")} {\n min-height: 27px;\n }\n\n &::before {\n content: \"\";\n display: block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: ${({ theme }) => theme.colors.primary};\n position: absolute;\n top: 8px;\n left: 2px;\n\n ${mq(\"lg\")} {\n top: 10px;\n }\n }\n }\n }\n\n & ol {\n padding: 0;\n margin: 0;\n\n & ul {\n padding-left: 15px;\n }\n\n & > li {\n position: relative;\n padding: 0;\n counter-increment: item;\n margin: 0;\n ${({ theme }) => styledText(theme)};\n\n &::before {\n content: counter(item) \".\";\n display: inline-block;\n margin: 0 4px 0 0;\n font-weight: 700;\n color: ${({ theme }) => theme.colors.primary};\n min-width: max-content;\n }\n }\n }\n`;\n\nexport const styledTable = css<{ theme: Theme }>`\n & .table-wrapper {\n overflow-x: auto;\n width: 100%;\n }\n\n & table {\n margin: 0;\n padding: 0;\n border-collapse: collapse;\n width: 100%;\n text-align: left;\n\n & tr {\n margin: 0;\n padding: 0;\n }\n\n & th {\n border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n padding: 10px 10px 10px 0;\n ${({ theme }) => styledSmall(theme)};\n font-weight: 600;\n color: ${({ theme }) => theme.colors.dark};\n }\n\n & td {\n border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n padding: 10px 10px 10px 0;\n color: ${({ theme }) => theme.colors.grayDark};\n ${({ theme }) => styledSmall(theme)};\n }\n }\n`;\n\nexport const StyledSmallButton = styled.button<{ theme: Theme }>`\n ${interactiveStyles};\n background: ${({ theme }) => theme.colors.light};\n border: solid 1px ${({ theme }) => theme.colors.grayLight};\n color: ${({ theme }) => theme.colors.accent};\n border-radius: ${({ theme }) => theme.spacing.radius.xs};\n padding: 6px 8px;\n font-size: 12px;\n font-family: inherit;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 6px;\n margin-right: -6px;\n\n & svg.lucide {\n color: inherit;\n }\n`;\n";

package/dist/templates/components/layout/SharedStyles.js CHANGED Viewed

@@ -1,5 +1,6 @@
 export const sharedStyledTemplate = `"use client";
-import { mq, styledSmall, styledText, Theme } from "cherry-styled-components";
+import { styledSmall, styledText } from "cherry-styled-components";
+import { mq, Theme } from "@/app/theme";
 import styled, { css } from "styled-components";
 export const interactiveStyles = css<{ theme: Theme }>\`
@@ -29,8 +30,7 @@ export const styledAnchor = css<{ theme: Theme }>\`
     box-shadow: 0 2px 0 0 \${({ theme }) => theme.colors.primary};
     &:hover {
-      color: \${({ theme }) =>
-        theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};
+      color: \${({ theme }) => theme.colors.accent};
       box-shadow: 0 1px 0 0 \${({ theme }) => theme.colors.primary};
     }
   }
@@ -148,8 +148,7 @@ export const StyledSmallButton = styled.button<{ theme: Theme }>\`
   \${interactiveStyles};
   background: \${({ theme }) => theme.colors.light};
   border: solid 1px \${({ theme }) => theme.colors.grayLight};
-  color: \${({ theme }) =>
-    theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};
+  color: \${({ theme }) => theme.colors.accent};
   border-radius: \${({ theme }) => theme.spacing.radius.xs};
   padding: 6px 8px;
   font-size: 12px;

package/dist/templates/components/layout/StaticLinks.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export declare const staticLinksTemplate = "\"use client\";\nimport styled, { css } from \"styled-components\";\nimport { ~~rgba } from \"polished\";\nimport {~~ useContext } from \"react\";\nimport { ChatContext } from \"@/components/Chat\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { interactiveStyles } from \"@/components/layout/SharedStyled\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport linksData from \"@/links.json\";\n\ninterface LinkProps {\n title: string;\n url: string;\n icon?: string;\n}\n\nconst links = linksData as LinkProps[];\n\nconst StyledStaticLinks = styled.div<{ theme: Theme; $isChatOpen: boolean }>`\n display: flex;\n margin: 0 auto;\n transition: all 0.3s ease;\n padding: 0 20px;\n margin-bottom: 20px;\n\n ${mq(\"lg\")} {\n margin: 0;\n padding: 0 300px 20px 300px;\n\n ${({ $isChatOpen }) =>\n $isChatOpen &&\n css`\n padding: 0 440px 20px 300px;\n `}\n }\n`;\n\nconst StyledStaticLinksContent = styled.div`\n max-width: 640px;\n margin: auto 0;\n display: flex;\n gap: 16px;\n flex-wrap: wrap;\n width: 100%;\n margin: 0 auto;\n`;\n\nconst StyledLink = styled.a<{ theme: Theme; $hasIcon?: boolean }>`\n position: relative;\n text-decoration: none;\n font-size: ${({ theme }) => theme.fontSizes.small.lg};\n line-height: 1;\n color: ${({ theme }) ~~=>\n theme.isDark~~ ? theme.colors.~~primaryLight : theme.colors.primaryDark~~};\n padding: 0;\n display: flex;\n gap: 6px;\n transition: all 0.3s ease;\n font-weight: 600;\n white-space: nowrap;\n min-width: fit-content;\n background: ${({ theme }) => ~~rgba(~~theme.colors.primaryLight, ~~0.1~~)};\n padding: 6px 8px;\n border-radius: ${({ theme }) => theme.spacing.radius.xs};\n ${interactiveStyles};\n\n ${({ $hasIcon }) =>\n $hasIcon &&\n css`\n padding-left: 30px;\n `}\n\n & * {\n margin: auto 0;\n }\n\n & svg {\n position: absolute;\n top: 50%;\n left: 8px;\n transform: translateY(-50%);\n }\n\n &:hover {\n color: ${({ theme }) ~~=>\n theme.isDark~~ ? theme.colors.~~primaryLight : theme.colors.primaryDark~~};\n }\n`;\n\nfunction StaticLinks() {\n const { isOpen } = useContext(ChatContext);\n\n if (links.length === 0) {\n return null;\n }\n\n return (\n <>\n <StyledStaticLinks $isChatOpen={isOpen}>\n <StyledStaticLinksContent>\n {links.map((link, index) => (\n <StyledLink\n key={index}\n href={link.url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n $hasIcon={link.icon ? true : false}\n >\n {link.icon && <Icon name={link.icon} size={16} />}\n <span>{link.title}</span>\n </StyledLink>\n ))}\n </StyledStaticLinksContent>\n </StyledStaticLinks>\n </>\n );\n}\n\nexport { StaticLinks };\n";
1	+ export declare const staticLinksTemplate = "\"use client\";\nimport styled, { css } from \"styled-components\";\nimport { useContext } from \"react\";\nimport { ChatContext } from \"@/components/Chat\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { interactiveStyles } from \"@/components/layout/SharedStyled\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport linksData from \"@/links.json\";\n\ninterface LinkProps {\n title: string;\n url: string;\n icon?: string;\n}\n\nconst links = linksData as LinkProps[];\n\nconst StyledStaticLinks = styled.div<{ theme: Theme; $isChatOpen: boolean }>`\n display: flex;\n margin: 0 auto;\n transition: all 0.3s ease;\n padding: 0 20px;\n margin-bottom: 20px;\n\n ${mq(\"lg\")} {\n margin: 0;\n padding: 0 300px 20px 300px;\n\n ${({ $isChatOpen }) =>\n $isChatOpen &&\n css`\n padding: 0 440px 20px 300px;\n `}\n }\n`;\n\nconst StyledStaticLinksContent = styled.div`\n max-width: 640px;\n margin: auto 0;\n display: flex;\n gap: 16px;\n flex-wrap: wrap;\n width: 100%;\n margin: 0 auto;\n`;\n\nconst StyledLink = styled.a<{ theme: Theme; $hasIcon?: boolean }>`\n position: relative;\n text-decoration: none;\n font-size: ${({ theme }) => theme.fontSizes.small.lg};\n line-height: 1;\n color: ${({ theme }) => theme.colors.accent};\n padding: 0;\n display: flex;\n gap: 6px;\n transition: all 0.3s ease;\n font-weight: 600;\n white-space: nowrap;\n min-width: fit-content;\n background: ${({ theme }) =>\n `color-mix(in srgb, ${theme.colors.primaryLight} 10%, transparent)`};\n padding: 6px 8px;\n border-radius: ${({ theme }) => theme.spacing.radius.xs};\n ${interactiveStyles};\n\n ${({ $hasIcon }) =>\n $hasIcon &&\n css`\n padding-left: 30px;\n `}\n\n & * {\n margin: auto 0;\n }\n\n & svg {\n position: absolute;\n top: 50%;\n left: 8px;\n transform: translateY(-50%);\n }\n\n &:hover {\n color: ${({ theme }) => theme.colors.accent};\n }\n`;\n\nfunction StaticLinks() {\n const { isOpen } = useContext(ChatContext);\n\n if (links.length === 0) {\n return null;\n }\n\n return (\n <>\n <StyledStaticLinks $isChatOpen={isOpen}>\n <StyledStaticLinksContent>\n {links.map((link, index) => (\n <StyledLink\n key={index}\n href={link.url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n $hasIcon={link.icon ? true : false}\n >\n {link.icon && <Icon name={link.icon} size={16} />}\n <span>{link.title}</span>\n </StyledLink>\n ))}\n </StyledStaticLinksContent>\n </StyledStaticLinks>\n </>\n );\n}\n\nexport { StaticLinks };\n";

package/dist/templates/components/layout/StaticLinks.js CHANGED Viewed

@@ -1,7 +1,6 @@
 import { SIDEBAR_WIDTH, CHAT_WIDTH } from "../../app/theme.js";
 export const staticLinksTemplate = `"use client";
 import styled, { css } from "styled-components";
-import { rgba } from "polished";
 import { useContext } from "react";
 import { ChatContext } from "@/components/Chat";
 import { mq, Theme } from "@/app/theme";
@@ -51,8 +50,7 @@ const StyledLink = styled.a<{ theme: Theme; $hasIcon?: boolean }>\`
   text-decoration: none;
   font-size: \${({ theme }) => theme.fontSizes.small.lg};
   line-height: 1;
-  color: \${({ theme }) =>
-    theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};
+  color: \${({ theme }) => theme.colors.accent};
   padding: 0;
   display: flex;
   gap: 6px;
@@ -60,7 +58,8 @@ const StyledLink = styled.a<{ theme: Theme; $hasIcon?: boolean }>\`
   font-weight: 600;
   white-space: nowrap;
   min-width: fit-content;
-  background: \${({ theme }) => rgba(theme.colors.primaryLight, 0.1)};
+  background: \${({ theme }) =>
+    \`color-mix(in srgb, \${theme.colors.primaryLight} 10%, transparent)\`};
   padding: 6px 8px;
   border-radius: \${({ theme }) => theme.spacing.radius.xs};
   \${interactiveStyles};
@@ -83,8 +82,7 @@ const StyledLink = styled.a<{ theme: Theme; $hasIcon?: boolean }>\`
   }
   &:hover {
-    color: \${({ theme }) =>
-      theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};
+    color: \${({ theme }) => theme.colors.accent};
   }
 \`;

package/dist/templates/components/layout/Steps.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export declare const stepsTemplate = "\"use client\";\nimport React from \"react\";\nimport styled, { useTheme } from \"styled-components\";\nimport { styledText, ~~Theme~~ } from \"cherry-styled-components\";\nimport { ~~rgba~~ } from \"~~polished~~\";\nimport { Icon, IconProps } from \"@/components/layout/Icon\";\n\nconst StyledStepsContainer = styled.div<{ theme: Theme }>`\n position: relative;\n width: 100%;\n`;\n\nconst StyledStep = styled.div<{ theme: Theme }>`\n background: ${({ theme }) => theme.colors.light};\n border-radius: ${({ theme }) => theme.spacing.radius.lg};\n padding: 0 0 20px 52px;\n margin: 0;\n position: relative;\n ${({ theme }) => styledText(theme)}\n color: ${({ theme }) => theme.colors.grayDark};\n\n &::after {\n content: \"\";\n position: absolute;\n left: 16px;\n top: 0;\n width: 1px;\n height: 100%;\n background: ${({ theme }) => theme.colors.primary};\n background: linear-gradient(\n 180deg,\n ${({ theme }) => theme.colors.primary},\n ~~${({ theme }) => rgba(theme.colors.primary, 0)}~~\n );\n border-radius: 4px;\n }\n`;\n\nconst StepNumber = styled.div<{ theme: Theme }>`\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: ${({ theme }) => theme.colors.primary};\n color: ${({ theme }) => theme.colors.light};\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n margin-bottom: 12px;\n ${({ theme }) => styledText(theme)};\n position: absolute;\n left: 0;\n top: 0;\n z-index: 1;\n`;\n\nconst StyledStepTitle = styled.h3<{ theme: Theme }>`\n margin: 0 0 10px 0;\n padding: 2px 0 0 0;\n color: ${({ theme }) => theme.colors.dark};\n ${({ theme }) => styledText(theme)};\n display: flex;\n align-items: center;\n gap: 10px;\n`;\n\nconst StepContent = styled.div<{ theme: Theme }>`\n color: ${({ theme }) => theme.colors.grayDark};\n ${({ theme }) => styledText(theme)};\n\n & > .code-wrapper {\n margin: 10px 0;\n }\n`;\n\ninterface StepProps extends React.HTMLAttributes<HTMLDivElement> {\n title: string;\n children: React.ReactNode;\n icon?: IconProps;\n}\n\nfunction Step(_props: StepProps) {\n return null;\n}\n\ninterface StepsProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n}\n\nfunction Steps({ children }: StepsProps) {\n const theme = useTheme() as Theme;\n\n const steps = React.Children.toArray(children).filter(\n (child): child is React.ReactElement<StepProps> =>\n React.isValidElement(child),\n );\n\n return (\n <StyledStepsContainer theme={theme}>\n {steps.map((step, index) => {\n const { title, children: stepContent, icon } = step.props;\n\n return (\n <StyledStep key={index} theme={theme}>\n <StepNumber theme={theme}>{index + 1}</StepNumber>\n <StyledStepTitle theme={theme}>\n {icon && <Icon name={icon} color={theme.colors.primary} />}\n {title}\n </StyledStepTitle>\n <StepContent theme={theme}>{stepContent}</StepContent>\n </StyledStep>\n );\n })}\n </StyledStepsContainer>\n );\n}\n\nexport { Steps, Step };\n";
1	+ export declare const stepsTemplate = "\"use client\";\nimport React from \"react\";\nimport styled, { useTheme } from \"styled-components\";\nimport { styledText } from \"cherry-styled-components\";\nimport { Theme } from \"@/app/theme\";\nimport { Icon, IconProps } from \"@/components/layout/Icon\";\n\nconst StyledStepsContainer = styled.div<{ theme: Theme }>`\n position: relative;\n width: 100%;\n`;\n\nconst StyledStep = styled.div<{ theme: Theme }>`\n background: ${({ theme }) => theme.colors.light};\n border-radius: ${({ theme }) => theme.spacing.radius.lg};\n padding: 0 0 20px 52px;\n margin: 0;\n position: relative;\n ${({ theme }) => styledText(theme)}\n color: ${({ theme }) => theme.colors.grayDark};\n\n &::after {\n content: \"\";\n position: absolute;\n left: 16px;\n top: 0;\n width: 1px;\n height: 100%;\n background: ${({ theme }) => theme.colors.primary};\n background: linear-gradient(\n 180deg,\n ${({ theme }) => theme.colors.primary},\n transparent\n );\n border-radius: 4px;\n }\n`;\n\nconst StepNumber = styled.div<{ theme: Theme }>`\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: ${({ theme }) => theme.colors.primary};\n color: ${({ theme }) => theme.colors.light};\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n margin-bottom: 12px;\n ${({ theme }) => styledText(theme)};\n position: absolute;\n left: 0;\n top: 0;\n z-index: 1;\n`;\n\nconst StyledStepTitle = styled.h3<{ theme: Theme }>`\n margin: 0 0 10px 0;\n padding: 2px 0 0 0;\n color: ${({ theme }) => theme.colors.dark};\n ${({ theme }) => styledText(theme)};\n display: flex;\n align-items: center;\n gap: 10px;\n`;\n\nconst StepContent = styled.div<{ theme: Theme }>`\n color: ${({ theme }) => theme.colors.grayDark};\n ${({ theme }) => styledText(theme)};\n\n & > .code-wrapper {\n margin: 10px 0;\n }\n`;\n\ninterface StepProps extends React.HTMLAttributes<HTMLDivElement> {\n title: string;\n children: React.ReactNode;\n icon?: IconProps;\n}\n\nfunction Step(_props: StepProps) {\n return null;\n}\n\ninterface StepsProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n}\n\nfunction Steps({ children }: StepsProps) {\n const theme = useTheme() as Theme;\n\n const steps = React.Children.toArray(children).filter(\n (child): child is React.ReactElement<StepProps> =>\n React.isValidElement(child),\n );\n\n return (\n <StyledStepsContainer theme={theme}>\n {steps.map((step, index) => {\n const { title, children: stepContent, icon } = step.props;\n\n return (\n <StyledStep key={index} theme={theme}>\n <StepNumber theme={theme}>{index + 1}</StepNumber>\n <StyledStepTitle theme={theme}>\n {icon && <Icon name={icon} color={theme.colors.primary} />}\n {title}\n </StyledStepTitle>\n <StepContent theme={theme}>{stepContent}</StepContent>\n </StyledStep>\n );\n })}\n </StyledStepsContainer>\n );\n}\n\nexport { Steps, Step };\n";

package/dist/templates/components/layout/Steps.js CHANGED Viewed

@@ -1,8 +1,8 @@
 export const stepsTemplate = `"use client";
 import React from "react";
 import styled, { useTheme } from "styled-components";
-import { styledText, Theme } from "cherry-styled-components";
-import { rgba } from "polished";
+import { styledText } from "cherry-styled-components";
+import { Theme } from "@/app/theme";
 import { Icon, IconProps } from "@/components/layout/Icon";
 const StyledStepsContainer = styled.div<{ theme: Theme }>\`
@@ -30,7 +30,7 @@ const StyledStep = styled.div<{ theme: Theme }>\`
     background: linear-gradient(
       180deg,
       \${({ theme }) => theme.colors.primary},
-      \${({ theme }) => rgba(theme.colors.primary, 0)}
+      transparent
     );
     border-radius: 4px;
   }

package/dist/templates/components/layout/Tabs.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export declare const tabsTemplate = "\"use client\";\nimport { Theme } from \"@/app/theme\";\nimport { styledText } from \"cherry-styled-components\";\nimport ~~{ rgba } from \"polished\";\nimport~~ React, { useState, ReactNode } from \"react\";\nimport styled, { css } from \"styled-components\";\ninterface TabContentProps {\n title: string;\n children: ReactNode;\n}\ninterface TabsProps {\n children: React.ReactElement<TabContentProps>[];\n}\nconst TabsContainer = styled.div`\n width: 100%;\n margin: 0 auto;\n`;\nconst TabsList = styled.div<{ theme: Theme }>`\n display: flex;\n overflow: hidden;\n border-radius: ${({ theme }) => theme.spacing.radius.lg};\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n background-color: ${({ theme }) => theme.colors.light};\n border: solid 1px ${({ theme }) => theme.colors.grayLight};\n overflow-x: auto;\n`;\nconst TabButton = styled.button<{ theme: Theme; $isActive?: boolean }>`\n flex: 1;\n padding: 12px 20px;\n border: none;\n background: ${({ theme }) => theme.colors.light};\n cursor: pointer;\n transition: all 0.2s ease;\n border-bottom: 3px solid transparent;\n min-width: fit-content;\n ${({ theme }) => styledText(theme)};\n color: ${({ theme }) => theme.colors.dark};\n font-weight: 600;\n ${({ theme, $isActive }) =>\n $isActive &&\n css`\n color: ${theme.colors.primary};\n border-bottom: 3px solid ${theme.colors.primary};\n `}\n position: relative;\n &:hover {\n ${({ theme, $isActive }) =>\n !$isActive &&\n css`\n color: ${theme.colors.primary};\n background-color: ${~~rgba(~~theme.colors.primaryLight, ~~0.1~~)};\n `}\n }\n &:focus {\n outline: none;\n }\n &:not(:last-child) {\n border-right: 1px solid ${({ theme }) => theme.colors.grayLight};\n }\n`;\nconst TabPanel = styled.div<{ theme: Theme }>`\n background-color: ${({ theme }) => theme.colors.light};\n padding: 20px;\n border-radius: 0 0 ${({ theme }) => theme.spacing.radius.lg}\n ${({ theme }) => theme.spacing.radius.lg};\n color: ${({ theme }) => theme.colors.grayDark};\n ${({ theme }) => styledText(theme)}\n border: solid 1px ${({ theme }) => theme.colors.grayLight};\n border-top: none;\n display: flex;\n flex-direction: column;\n gap: 20px;\n flex-wrap: wrap;\n flex: 1;\n`;\nconst TabContent: React.FC<TabContentProps> = ({ children }) => {\n return <>{children}</>;\n};\nconst Tabs: React.FC<TabsProps> = ({ children }) => {\n const [activeTab, setActiveTab] = useState(0);\n const tabs = React.Children.toArray(children).filter(\n (child): child is React.ReactElement<TabContentProps> =>\n Boolean(\n React.isValidElement(child) &&\n child.props &&\n typeof child.props === \"object\" &&\n \"title\" in child.props &&\n typeof child.props.title === \"string\" &&\n child.props.title.trim() !== \"\",\n ),\n );\n return (\n <TabsContainer>\n <TabsList>\n {tabs.map((tab, index) => (\n <TabButton\n key={index}\n $isActive={activeTab === index}\n onClick={() => setActiveTab(index)}\n type=\"button\"\n >\n {tab.props.title}\n </TabButton>\n ))}\n </TabsList>\n <TabPanel>{tabs[activeTab]?.props.children}</TabPanel>\n </TabsContainer>\n );\n};\nexport { Tabs, TabContent };\n";
1	+ export declare const tabsTemplate = "\"use client\";\nimport { Theme } from \"@/app/theme\";\nimport { styledText } from \"cherry-styled-components\";\nimport React, { useState, ReactNode } from \"react\";\nimport styled, { css } from \"styled-components\";\ninterface TabContentProps {\n title: string;\n children: ReactNode;\n}\ninterface TabsProps {\n children: React.ReactElement<TabContentProps>[];\n}\nconst TabsContainer = styled.div`\n width: 100%;\n margin: 0 auto;\n`;\nconst TabsList = styled.div<{ theme: Theme }>`\n display: flex;\n overflow: hidden;\n border-radius: ${({ theme }) => theme.spacing.radius.lg};\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n background-color: ${({ theme }) => theme.colors.light};\n border: solid 1px ${({ theme }) => theme.colors.grayLight};\n overflow-x: auto;\n`;\nconst TabButton = styled.button<{ theme: Theme; $isActive?: boolean }>`\n flex: 1;\n padding: 12px 20px;\n border: none;\n background: ${({ theme }) => theme.colors.light};\n cursor: pointer;\n transition: all 0.2s ease;\n border-bottom: 3px solid transparent;\n min-width: fit-content;\n ${({ theme }) => styledText(theme)};\n color: ${({ theme }) => theme.colors.dark};\n font-weight: 600;\n ${({ theme, $isActive }) =>\n $isActive &&\n css`\n color: ${theme.colors.primary};\n border-bottom: 3px solid ${theme.colors.primary};\n `}\n position: relative;\n &:hover {\n ${({ theme, $isActive }) =>\n !$isActive &&\n css`\n color: ${theme.colors.primary};\n background-color: color-mix(\n in srgb,\n ${theme.colors.primaryLight} 10%,\n transparent\n );\n `}\n }\n &:focus {\n outline: none;\n }\n &:not(:last-child) {\n border-right: 1px solid ${({ theme }) => theme.colors.grayLight};\n }\n`;\nconst TabPanel = styled.div<{ theme: Theme }>`\n background-color: ${({ theme }) => theme.colors.light};\n padding: 20px;\n border-radius: 0 0 ${({ theme }) => theme.spacing.radius.lg}\n ${({ theme }) => theme.spacing.radius.lg};\n color: ${({ theme }) => theme.colors.grayDark};\n ${({ theme }) => styledText(theme)}\n border: solid 1px ${({ theme }) => theme.colors.grayLight};\n border-top: none;\n display: flex;\n flex-direction: column;\n gap: 20px;\n flex-wrap: wrap;\n flex: 1;\n`;\nconst TabContent: React.FC<TabContentProps> = ({ children }) => {\n return <>{children}</>;\n};\nconst Tabs: React.FC<TabsProps> = ({ children }) => {\n const [activeTab, setActiveTab] = useState(0);\n const tabs = React.Children.toArray(children).filter(\n (child): child is React.ReactElement<TabContentProps> =>\n Boolean(\n React.isValidElement(child) &&\n child.props &&\n typeof child.props === \"object\" &&\n \"title\" in child.props &&\n typeof child.props.title === \"string\" &&\n child.props.title.trim() !== \"\",\n ),\n );\n return (\n <TabsContainer>\n <TabsList>\n {tabs.map((tab, index) => (\n <TabButton\n key={index}\n $isActive={activeTab === index}\n onClick={() => setActiveTab(index)}\n type=\"button\"\n >\n {tab.props.title}\n </TabButton>\n ))}\n </TabsList>\n <TabPanel>{tabs[activeTab]?.props.children}</TabPanel>\n </TabsContainer>\n );\n};\nexport { Tabs, TabContent };\n";

package/dist/templates/components/layout/Tabs.js CHANGED Viewed

@@ -1,7 +1,6 @@
 export const tabsTemplate = `"use client";
 import { Theme } from "@/app/theme";
 import { styledText } from "cherry-styled-components";
-import { rgba } from "polished";
 import React, { useState, ReactNode } from "react";
 import styled, { css } from "styled-components";
 interface TabContentProps {
@@ -49,7 +48,11 @@ const TabButton = styled.button<{ theme: Theme; $isActive?: boolean }>\`
       !$isActive &&
       css\`
         color: \${theme.colors.primary};
-        background-color: \${rgba(theme.colors.primaryLight, 0.1)};
+        background-color: color-mix(
+          in srgb,
+          \${theme.colors.primaryLight} 10%,
+          transparent
+        );
       \`}
   }
   &:focus {

package/dist/templates/components/layout/ThemeToggle.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export declare const themeToggleTemplate = "\"use client\";\nimport { ~~Theme,~~ resetButton } from \"cherry-styled-components\";\nimport styled, { css, ~~useTheme~~ } from \"styled-components\";\nimport { ~~rgba~~ } from \"~~polished~~\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { ~~theme as themeLight, themeDark } from \"@/app/theme\";\nimport {~~ useThemeOverride } from \"@/components/layout/ClientThemeProvider\";\n\nconst StyledThemeToggle = styled.button<{ theme: Theme; $hidden?: boolean }>`\n ${resetButton}\n width: 59px;\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 ~~${({~~ ~~theme~~ }) ~~=>\~~n ~~theme~~.~~isDark~~ ~~&&\~~n ~~css`\~~n transform: translateX(27px);\n ~~`}\n~~ }\n\n ${({ $hidden }) =>\n $hidden &&\n css`\n display: none;\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-sun {\n transform: translateX(1px);\n }\n\n & .lucide-moon-star {\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\nfunction ToggleTheme({ $hidden }: { $hidden?: boolean }) {\n const { ~~setTheme~~ } = useThemeOverride();\n ~~const theme = useTheme() as Theme;\n~~\n return (\n <StyledThemeToggle\n onClick={async () => {\n const ~~nextTheme~~ = ~~theme.isDark~~ ? \"light\" : \"dark\";\n ~~setTheme~~(~~nextTheme === \"light\" ? themeLight : themeDark~~);\n await fetch(\"/api/theme\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ theme: ~~nextTheme~~ }),\n }).catch((err) => console.error(\"Failed to persist theme:\", err));\n }}\n $hidden={$hidden}\n aria-label=\"Toggle Theme\"\n >\n <Icon name=\"Sun\" className=\"light\" />\n <Icon name=\"MoonStar\" className=\"dark\" />\n </StyledThemeToggle>\n );\n}\n\nfunction ToggleThemeLoading() {\n return (\n <StyledThemeToggle $hidden aria-label=\"Toggle Theme\">\n <Icon name=\"MoonStar\" className=\"dark\" />\n <Icon name=\"Sun\" className=\"light\" />\n </StyledThemeToggle>\n );\n}\n\nexport { ToggleTheme, ToggleThemeLoading };\n";
1	+ export declare const themeToggleTemplate = "\"use client\";\nimport { resetButton } from \"cherry-styled-components\";\nimport styled, { css } from \"styled-components\";\nimport { Theme } from \"@/app/theme\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { useThemeOverride } from \"@/components/layout/ClientThemeProvider\";\n\nconst StyledThemeToggle = styled.button<{ theme: Theme; $hidden?: boolean }>`\n ${resetButton}\n width: 59px;\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 }\n\n /* Knob position depends on the active mode, signaled by the \"dark\" class\n on <html>. Pure CSS \u2014 no JS conditional needed for the visual swap. */\n :root.dark &::after {\n transform: translateX(27px);\n }\n\n ${({ $hidden }) =>\n $hidden &&\n css`\n display: none;\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-sun {\n transform: translateX(1px);\n }\n\n & .lucide-moon-star {\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\nfunction ToggleTheme({ $hidden }: { $hidden?: boolean }) {\n const { mode, setMode } = useThemeOverride();\n\n return (\n <StyledThemeToggle\n onClick={async () => {\n const next = mode === \"dark\" ? \"light\" : \"dark\";\n setMode(next);\n await fetch(\"/api/theme\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ theme: next }),\n }).catch((err) => console.error(\"Failed to persist theme:\", err));\n }}\n $hidden={$hidden}\n aria-label=\"Toggle Theme\"\n >\n <Icon name=\"Sun\" className=\"light\" />\n <Icon name=\"MoonStar\" className=\"dark\" />\n </StyledThemeToggle>\n );\n}\n\nfunction ToggleThemeLoading() {\n return (\n <StyledThemeToggle $hidden aria-label=\"Toggle Theme\">\n <Icon name=\"MoonStar\" className=\"dark\" />\n <Icon name=\"Sun\" className=\"light\" />\n </StyledThemeToggle>\n );\n}\n\nexport { ToggleTheme, ToggleThemeLoading };\n";

package/dist/templates/components/layout/ThemeToggle.js CHANGED Viewed

@@ -1,9 +1,8 @@
 export const themeToggleTemplate = `"use client";
-import { Theme, resetButton } from "cherry-styled-components";
-import styled, { css, useTheme } from "styled-components";
-import { rgba } from "polished";
+import { resetButton } from "cherry-styled-components";
+import styled, { css } from "styled-components";
+import { Theme } from "@/app/theme";
 import { Icon } from "@/components/layout/Icon";
-import { theme as themeLight, themeDark } from "@/app/theme";
 import { useThemeOverride } from "@/components/layout/ClientThemeProvider";
 const StyledThemeToggle = styled.button<{ theme: Theme; $hidden?: boolean }>\`
@@ -26,14 +25,16 @@ const StyledThemeToggle = styled.button<{ theme: Theme; $hidden?: 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;
-    \${({ theme }) =>
-      theme.isDark &&
-      css\`
-        transform: translateX(27px);
-      \`}
+  }
+  /* Knob position depends on the active mode, signaled by the "dark" class
+     on <html>. Pure CSS — no JS conditional needed for the visual swap. */
+  :root.dark &::after {
+    transform: translateX(27px);
   }
   \${({ $hidden }) =>
@@ -66,12 +67,10 @@ const StyledThemeToggle = styled.button<{ theme: Theme; $hidden?: 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};
     }
   }
@@ -81,18 +80,17 @@ const StyledThemeToggle = styled.button<{ theme: Theme; $hidden?: boolean }>\`
 \`;
 function ToggleTheme({ $hidden }: { $hidden?: boolean }) {
-  const { setTheme } = useThemeOverride();
-  const theme = useTheme() as Theme;
+  const { mode, setMode } = useThemeOverride();
   return (
     <StyledThemeToggle
       onClick={async () => {
-        const nextTheme = theme.isDark ? "light" : "dark";
-        setTheme(nextTheme === "light" ? themeLight : themeDark);
+        const next = mode === "dark" ? "light" : "dark";
+        setMode(next);
         await fetch("/api/theme", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ theme: nextTheme }),
+          body: JSON.stringify({ theme: next }),
         }).catch((err) => console.error("Failed to persist theme:", err));
       }}
       $hidden={$hidden}

package/dist/templates/components/layout/Typography.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export declare const typographyTemplate = "\"use client\";\nimport {\n styledH1,\n styledH2,\n styledH3,\n styledH4,\n styledH5,\n styledH6,\n styledText,\n ~~Theme,\n~~} from \"cherry-styled-components\";\nimport styled, { css } from \"styled-components\";\n\nconst StyledHeading = css`\n font-weight: 900;\n`;\n\nexport const StyledH1 = styled.h1<{ theme: Theme }>`\n ${StyledHeading};\n ${({ theme }) => styledH1(theme)}\n`;\n\nexport const StyledH2 = styled.h2<{ theme: Theme }>`\n ${StyledHeading};\n ${({ theme }) => styledH2(theme)}\n`;\n\nexport const StyledH3 = styled.h3<{ theme: Theme }>`\n ${StyledHeading};\n ${({ theme }) => styledH3(theme)}\n`;\n\nexport const StyledH4 = styled.h4<{ theme: Theme }>`\n ${StyledHeading};\n ${({ theme }) => styledH4(theme)}\n`;\n\nexport const StyledH5 = styled.h5<{ theme: Theme }>`\n ${StyledHeading};\n ${({ theme }) => styledH5(theme)}\n`;\n\nexport const StyledH6 = styled.h6<{ theme: Theme }>`\n ${StyledHeading};\n ${({ theme }) => styledH6(theme)}\n`;\n\nexport const StyledText = styled.p<{ theme: Theme }>`\n ${({ theme }) => styledText(theme)}\n`;\n";
1	+ export declare const typographyTemplate = "\"use client\";\nimport {\n styledH1,\n styledH2,\n styledH3,\n styledH4,\n styledH5,\n styledH6,\n styledText,\n} from \"cherry-styled-components\";\nimport styled, { css } from \"styled-components\";\nimport { Theme } from \"@/app/theme\";\n\nconst StyledHeading = css`\n font-weight: 900;\n`;\n\nexport const StyledH1 = styled.h1<{ theme: Theme }>`\n ${StyledHeading};\n ${({ theme }) => styledH1(theme)}\n`;\n\nexport const StyledH2 = styled.h2<{ theme: Theme }>`\n ${StyledHeading};\n ${({ theme }) => styledH2(theme)}\n`;\n\nexport const StyledH3 = styled.h3<{ theme: Theme }>`\n ${StyledHeading};\n ${({ theme }) => styledH3(theme)}\n`;\n\nexport const StyledH4 = styled.h4<{ theme: Theme }>`\n ${StyledHeading};\n ${({ theme }) => styledH4(theme)}\n`;\n\nexport const StyledH5 = styled.h5<{ theme: Theme }>`\n ${StyledHeading};\n ${({ theme }) => styledH5(theme)}\n`;\n\nexport const StyledH6 = styled.h6<{ theme: Theme }>`\n ${StyledHeading};\n ${({ theme }) => styledH6(theme)}\n`;\n\nexport const StyledText = styled.p<{ theme: Theme }>`\n ${({ theme }) => styledText(theme)}\n`;\n";

package/dist/templates/components/layout/Typography.js CHANGED Viewed

@@ -7,9 +7,9 @@ import {
   styledH5,
   styledH6,
   styledText,
-  Theme,
 } from "cherry-styled-components";
 import styled, { css } from "styled-components";
+import { Theme } from "@/app/theme";
 const StyledHeading = css\`
   font-weight: 900;

package/dist/templates/components/layout/Update.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export declare const updateTemplate = "\"use client\";\nimport styled from \"styled-components\";\nimport { ~~mq,~~ styledSmall, ~~Theme~~ } from \"cherry-styled-components\";\nimport { ~~rgba~~ } from \"~~polished~~\";\n\nconst StyledUpdate = styled.div<{ theme: Theme; $columns?: number }>`\n position: relative;\n display: flex;\n gap: 20px;\n flex-direction: column;\n\n ${mq(\"lg\")} {\n margin: 20px 0;\n flex-direction: row;\n }\n`;\n\nconst StyledUpdateLabel = styled.span<{ theme: Theme }>`\n background: ${({ theme }) => ~~rgba(~~theme.colors.primaryLight, ~~0.2~~)};\n color: ${({ theme }) => theme.colors.primary};\n padding: 2px 4px;\n border-radius: ${({ theme }) => theme.spacing.radius.xs};\n font-weight: 600;\n ${({ theme }) => styledSmall(theme)};\n`;\n\nconst StyledUpdateDescription = styled.div<{ theme: Theme }>`\n ${({ theme }) => styledSmall(theme)};\n color: ${({ theme }) => theme.colors.gray};\n`;\n\nconst StyledUpdateSidebar = styled.div`\n display: flex;\n flex-direction: column;\n gap: 10px;\n\n ${mq(\"lg\")} {\n min-width: 160px;\n }\n`;\n\nconst StyledUpdateChildren = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 20px;\n`;\n\ninterface UpdateProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n label: string;\n description: string;\n}\n\nfunction Update({ children, label, description }: UpdateProps) {\n return (\n <StyledUpdate>\n <StyledUpdateSidebar>\n <div>\n <StyledUpdateLabel>{label}</StyledUpdateLabel>\n </div>\n <StyledUpdateDescription>{description}</StyledUpdateDescription>\n </StyledUpdateSidebar>\n <StyledUpdateChildren>{children}</StyledUpdateChildren>\n </StyledUpdate>\n );\n}\n\nexport { Update };\n";
1	+ export declare const updateTemplate = "\"use client\";\nimport styled from \"styled-components\";\nimport { styledSmall } from \"cherry-styled-components\";\nimport { mq, Theme } from \"@/app/theme\";\n\nconst StyledUpdate = styled.div<{ theme: Theme; $columns?: number }>`\n position: relative;\n display: flex;\n gap: 20px;\n flex-direction: column;\n\n ${mq(\"lg\")} {\n margin: 20px 0;\n flex-direction: row;\n }\n`;\n\nconst StyledUpdateLabel = styled.span<{ theme: Theme }>`\n background: ${({ theme }) =>\n `color-mix(in srgb, ${theme.colors.primaryLight} 20%, transparent)`};\n color: ${({ theme }) => theme.colors.primary};\n padding: 2px 4px;\n border-radius: ${({ theme }) => theme.spacing.radius.xs};\n font-weight: 600;\n ${({ theme }) => styledSmall(theme)};\n`;\n\nconst StyledUpdateDescription = styled.div<{ theme: Theme }>`\n ${({ theme }) => styledSmall(theme)};\n color: ${({ theme }) => theme.colors.gray};\n`;\n\nconst StyledUpdateSidebar = styled.div`\n display: flex;\n flex-direction: column;\n gap: 10px;\n\n ${mq(\"lg\")} {\n min-width: 160px;\n }\n`;\n\nconst StyledUpdateChildren = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 20px;\n`;\n\ninterface UpdateProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n label: string;\n description: string;\n}\n\nfunction Update({ children, label, description }: UpdateProps) {\n return (\n <StyledUpdate>\n <StyledUpdateSidebar>\n <div>\n <StyledUpdateLabel>{label}</StyledUpdateLabel>\n </div>\n <StyledUpdateDescription>{description}</StyledUpdateDescription>\n </StyledUpdateSidebar>\n <StyledUpdateChildren>{children}</StyledUpdateChildren>\n </StyledUpdate>\n );\n}\n\nexport { Update };\n";

package/dist/templates/components/layout/Update.js CHANGED Viewed

@@ -1,7 +1,7 @@
 export const updateTemplate = `"use client";
 import styled from "styled-components";
-import { mq, styledSmall, Theme } from "cherry-styled-components";
-import { rgba } from "polished";
+import { styledSmall } from "cherry-styled-components";
+import { mq, Theme } from "@/app/theme";
 const StyledUpdate = styled.div<{ theme: Theme; $columns?: number }>\`
   position: relative;
@@ -16,7 +16,8 @@ const StyledUpdate = styled.div<{ theme: Theme; $columns?: number }>\`
 \`;
 const StyledUpdateLabel = styled.span<{ theme: Theme }>\`
-  background: \${({ theme }) => rgba(theme.colors.primaryLight, 0.2)};
+  background: \${({ theme }) =>
+    \`color-mix(in srgb, \${theme.colors.primaryLight} 20%, transparent)\`};
   color: \${({ theme }) => theme.colors.primary};
   padding: 2px 4px;
   border-radius: \${({ theme }) => theme.spacing.radius.xs};

package/dist/templates/mdx/platform/site-settings.mdx.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export declare const platformSiteSettingsMdxTemplate = "---\ntitle: \"Site Settings\"\ndescription: \"Configure your documentation site's name, description, icon, and image.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 2\norder: 0\nsection: \"Platform\"\n---\n# Site Settings\nThe Site settings page lets you configure the core metadata for your documentation site. These values are stored in `config.json` at the root of your repository.\n\n## Fields\n\n### Name\nThe name of your documentation site. This appears in the site header and browser tab title.\n\n### Description\nA short description of your documentation. Used in meta tags for search engine optimization and social media previews.\n\n### Favicon\nUpload a favicon image that appears in browser tabs. Supported formats include PNG, ICO, and SVG. Use the file upload button to select an image from your computer.\n\n### Preview image\nUpload an image used for social media and OpenGraph previews. This is the image that appears when your documentation URL is shared on platforms like Twitter, Slack, or Discord.\n\n<Callout type=\"note\">\n Changes to site settings are staged as pending changes, just like file edits. Click Publish to commit them to your repository and trigger a deploy.\n</Callout>\n\n## How it works\nBehind the scenes, the Site settings page reads and writes `config.json` in your repository. You can also edit this file directly in the file editor if you prefer. See the [Globals](/globals) page for the full configuration reference.\n\n```json\n{\n \"name\": \"My Documentation\",\n \"description\": \"Documentation for my project\",\n \"icon\": \"/favicon.png\",\n \"image\": \"/preview.png\"\n}\n```";
1	+ export declare const platformSiteSettingsMdxTemplate = "---\ntitle: \"Site Settings\"\ndescription: \"Configure your documentation site's name, description, icon, and image.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 2\norder: 0\nsection: \"Platform\"\n---\n# Site Settings\nThe Site settings page lets you configure the core metadata for your documentation site. These values are stored in `config.json` at the root of your repository.\n\n## Fields\n\n### Name\nThe name of your documentation site. This appears in the site header and browser tab title.\n\n### Description\nA short description of your documentation. Used in meta tags for search engine optimization and social media previews.\n\n### Favicon\nUpload a favicon image that appears in browser tabs. Supported formats include PNG, ICO, and SVG. Use the file upload button to select an image from your computer.\n\n### Preview image\nUpload an image used for social media and OpenGraph previews. This is the image that appears when your documentation URL is shared on platforms like Twitter, Slack, or Discord.\n\n### Site URL\nThe public URL of your deployed documentation site, such as `https://docs.example.com`. This value is used as the base URL when generating `sitemap.xml` and `robots.txt`, so search engines can discover and index your pages correctly. You can override this at deploy time by setting the `NEXT_PUBLIC_SITE_URL` environment variable.\n\n<Callout type=\"note\">\n Changes to site settings are staged as pending changes, just like file edits. Click Publish to commit them to your repository and trigger a deploy.\n</Callout>\n\n## How it works\nBehind the scenes, the Site settings page reads and writes `config.json` in your repository. You can also edit this file directly in the file editor if you prefer. See the [Globals](/globals) page for the full configuration reference.\n\n```json\n{\n \"name\": \"My Documentation\",\n \"description\": \"Documentation for my project\",\n \"icon\": \"/favicon.png\",\n \"image\": \"/preview.png\",\n \"url\": \"https://docs.example.com\"\n}\n```";

package/dist/templates/mdx/platform/site-settings.mdx.js CHANGED Viewed

@@ -24,6 +24,9 @@ Upload a favicon image that appears in browser tabs. Supported formats include P
 ### Preview image
 Upload an image used for social media and OpenGraph previews. This is the image that appears when your documentation URL is shared on platforms like Twitter, Slack, or Discord.
+### Site URL
+The public URL of your deployed documentation site, such as \`https://docs.example.com\`. This value is used as the base URL when generating \`sitemap.xml\` and \`robots.txt\`, so search engines can discover and index your pages correctly. You can override this at deploy time by setting the \`NEXT_PUBLIC_SITE_URL\` environment variable.
 <Callout type="note">
   Changes to site settings are staged as pending changes, just like file edits. Click **Publish** to commit them to your repository and trigger a deploy.
 </Callout>
@@ -36,6 +39,7 @@ Behind the scenes, the Site settings page reads and writes \`config.json\` in yo
   "name": "My Documentation",
   "description": "Documentation for my project",
   "icon": "/favicon.png",
-  "image": "/preview.png"
+  "image": "/preview.png",
+  "url": "https://docs.example.com"
 }
 \`\`\``;

package/dist/templates/package.js CHANGED Viewed

@@ -23,7 +23,6 @@ export const packageJsonTemplate = JSON.stringify({
         minisearch: "^7.2.0",
         next: "16.2.4",
         "next-mdx-remote": "^6.0.0",
-        polished: "^4.3.1",
         "posthog-js": "^1.371.2",
         "posthog-node": "^5.30.0",
         react: "19.2.5",

package/dist/templates/proxy.js CHANGED Viewed

@@ -58,6 +58,18 @@ function captureServerPageview(req: NextRequest, event: NextFetchEvent) {
         ? `export function proxy(req: NextRequest, event: NextFetchEvent)`
         : `export function proxy(req: NextRequest)`;
     const eventImport = hasPostHog ? ", NextFetchEvent" : "";
+    // Matcher scope:
+    //   - With PostHog server-side tracking: run on every path so pageviews
+    //     fire (the capture function uses event.waitUntil and never mutates
+    //     the response, so doc pages remain edge-cacheable).
+    //   - Otherwise: only run on /api/* — the only routes that need middleware
+    //     (e.g. MCP key auth). Doc pages bypass middleware entirely.
+    //
+    // Theme detection happens client-side via the theme-init blocking script
+    // in the root layout (sets a "dark" class on <html>). Middleware no longer
+    // sets Vary, Accept-CH, or a theme cookie, because doing so would mark
+    // every response as dynamic and disable caching at Vercel/Cloudflare.
+    const matcher = hasPostHog ? `["/:path*"]` : `["/api/:path*"]`;
     return `import { NextResponse } from "next/server";
 import type { NextRequest${eventImport} } from "next/server";
 ${posthogImport}${posthogPageviewFn}
@@ -77,29 +89,11 @@ ${posthogCall}  // API key auth for /api/mcp when DOCS_API_KEY is configured
     }
   }
-  const res = NextResponse.next();
-  res.headers.set("Accept-CH", "Sec-CH-Prefers-Color-Scheme");
-  res.headers.set("Vary", "Sec-CH-Prefers-Color-Scheme");
-  res.headers.set("Critical-CH", "Sec-CH-Prefers-Color-Scheme");
-  const existing = req.cookies.get("theme")?.value;
-  const hint = req.headers.get("Sec-CH-Prefers-Color-Scheme");
-  if (!existing && hint) {
-    const value = hint === "dark" ? "dark" : "light";
-    res.cookies.set("theme", value, {
-      path: "/",
-      maxAge: 60 * 60 * 24 * 365,
-      sameSite: "lax",
-    });
-  }
-  return res;
+  return NextResponse.next();
 }
 export const config = {
-  matcher: ["/:path*"],
+  matcher: ${matcher},
 };
 `;
 };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "doccupine",
-  "version": "0.0.88",
+  "version": "0.0.89",
   "description": "Free and open-source documentation platform. Write MDX, get a production-ready site with AI chat, built-in components, and an MCP server - in one command.",
   "main": "dist/index.js",
   "bin": {