doccupine 0.0.88 → 0.0.90

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

@@ -1 +1 @@
-export declare const headerTemplate = "\"use client\";\nimport React from \"react\";\nimport { useCallback, useContext, useRef, useState } from \"react\";\nimport styled, { css, useTheme } from \"styled-components\";\nimport Link from \"next/link\";\nimport { rgba } from \"polished\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { useOnClickOutside } from \"@/components/ClickOutside\";\nimport { Search } from \"lucide-react\";\nimport { Logo } from \"@/components/layout/Pictograms\";\nimport { ChatContext, ChatButtonCTA } from \"@/components/Chat\";\nimport {\n  SearchContext,\n  SearchKbd,\n  StyledSearchButton,\n} from \"@/components/SearchDocs\";\nimport themeJson from \"@/theme.json\";\n\nconst customThemeJson = themeJson as typeof themeJson & {\n  logo?: { dark: string; light: string };\n};\n\nconst StyledHeader = styled.header<{ theme: Theme; $hasChildren: boolean }>`\n  position: sticky;\n  top: 0;\n  margin: 0;\n  z-index: 1000;\n  width: 100%;\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  ${({ $hasChildren }) =>\n    !$hasChildren &&\n    css`\n      ${mq(\"lg\")} {\n        padding-bottom: 16px;\n        padding-top: 16px;\n      }\n    `}\n\n  &::before,\n  &::after {\n    display: block;\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    background: ${({ theme }) => theme.colors.light};\n    z-index: -2;\n  }\n\n  &::after {\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.05)};\n    z-index: -1;\n  }\n\n  & .logo {\n    display: flex;\n\n    & svg,\n    & img {\n      margin: auto;\n      height: auto;\n      width: fit-content;\n      min-width: fit-content;\n      max-width: 182px;\n      max-height: 30px;\n\n      & path[fill] {\n        fill: ${({ theme }) => theme.colors.primary};\n      }\n    }\n  }\n`;\n\nconst StyledHeaderInner = styled.div<{ $hasChildren: boolean }>`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  padding: 16px 0 0 20px;\n\n  ${({ $hasChildren }) =>\n    !$hasChildren &&\n    css`\n      padding-bottom: 16px;\n    `}\n\n  ${mq(\"lg\")} {\n    flex-wrap: nowrap;\n    padding: 0 20px;\n  }\n`;\n\nconst StyledLeftWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: fit-content;\n  padding-right: 20px;\n\n  ${mq(\"lg\")} {\n    padding-right: 0;\n  }\n`;\n\ninterface HeaderProps {\n  children?: React.ReactNode;\n}\n\nfunction Header({ children }: HeaderProps) {\n  const [isOptionActive, setIsOptionActive] = useState(false);\n  const [isLangActive, setIsLangActive] = useState(false);\n\n  const wrapperRef = useRef<HTMLSpanElement>(null);\n  const elmRef = useRef<HTMLDivElement>(null);\n  const langRef = useRef<HTMLSpanElement>(null);\n  const closeMenu = useCallback(() => {\n    setIsOptionActive(false);\n    setIsLangActive(false);\n  }, []);\n\n  useOnClickOutside(\n    [elmRef, wrapperRef],\n    isOptionActive ? closeMenu : () => {},\n  );\n  useOnClickOutside([langRef, wrapperRef], isLangActive ? closeMenu : () => {});\n  const theme = useTheme() as Theme;\n  const { isChatActive } = useContext(ChatContext);\n  const { openSearch } = useContext(SearchContext);\n\n  return (\n    <StyledHeader $hasChildren={children ? true : false} id=\"header\">\n      <StyledHeaderInner $hasChildren={children ? true : false}>\n        <Link href=\"/\" className=\"logo\" aria-label=\"Logo\">\n          {customThemeJson.logo ? (\n            theme.isDark ? (\n              // eslint-disable-next-line @next/next/no-img-element\n              <img\n                src={customThemeJson.logo.dark}\n                alt=\"Logo\"\n                width=\"100\"\n                height=\"100\"\n              />\n            ) : (\n              // eslint-disable-next-line @next/next/no-img-element\n              <img\n                src={customThemeJson.logo.light}\n                alt=\"Logo\"\n                width=\"100\"\n                height=\"100\"\n              />\n            )\n          ) : (\n            <Logo />\n          )}\n        </Link>\n        {children}\n        <StyledLeftWrapper>\n          <StyledSearchButton onClick={openSearch} aria-label=\"Search docs\">\n            <Search size={14} />\n            <SearchKbd>&#8984;K</SearchKbd>\n          </StyledSearchButton>\n          {isChatActive && <ChatButtonCTA />}\n        </StyledLeftWrapper>\n      </StyledHeaderInner>\n    </StyledHeader>\n  );\n}\n\nexport { Header };\n";
+export declare const headerTemplate = "\"use client\";\nimport React from \"react\";\nimport { useCallback, useContext, useRef, useState } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport Link from \"next/link\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { useOnClickOutside } from \"@/components/ClickOutside\";\nimport { Search } from \"lucide-react\";\nimport { Logo } from \"@/components/layout/Pictograms\";\nimport { ChatContext, ChatButtonCTA } from \"@/components/Chat\";\nimport {\n  SearchContext,\n  SearchKbd,\n  StyledSearchButton,\n} from \"@/components/SearchDocs\";\nimport themeJson from \"@/theme.json\";\n\nconst customThemeJson = themeJson as typeof themeJson & {\n  logo?: { dark: string; light: string };\n};\n\nconst StyledHeader = styled.header<{ theme: Theme; $hasChildren: boolean }>`\n  position: sticky;\n  top: 0;\n  margin: 0;\n  z-index: 1000;\n  width: 100%;\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  ${({ $hasChildren }) =>\n    !$hasChildren &&\n    css`\n      ${mq(\"lg\")} {\n        padding-bottom: 16px;\n        padding-top: 16px;\n      }\n    `}\n\n  &::before,\n  &::after {\n    display: block;\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    background: ${({ theme }) => theme.colors.light};\n    z-index: -2;\n  }\n\n  &::after {\n    background: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.primaryLight} 5%, transparent)`};\n    z-index: -1;\n  }\n\n  & .logo {\n    display: flex;\n\n    & svg,\n    & img {\n      margin: auto;\n      height: auto;\n      width: fit-content;\n      min-width: fit-content;\n      max-width: 182px;\n      max-height: 30px;\n\n      & path[fill] {\n        fill: ${({ theme }) => theme.colors.primary};\n      }\n    }\n  }\n`;\n\nconst StyledHeaderInner = styled.div<{ $hasChildren: boolean }>`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  padding: 16px 0 0 20px;\n\n  ${({ $hasChildren }) =>\n    !$hasChildren &&\n    css`\n      padding-bottom: 16px;\n    `}\n\n  ${mq(\"lg\")} {\n    flex-wrap: nowrap;\n    padding: 0 20px;\n  }\n`;\n\nconst StyledLeftWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: fit-content;\n  padding-right: 20px;\n\n  ${mq(\"lg\")} {\n    padding-right: 0;\n  }\n`;\n\ninterface HeaderProps {\n  children?: React.ReactNode;\n}\n\nfunction Header({ children }: HeaderProps) {\n  const [isOptionActive, setIsOptionActive] = useState(false);\n  const [isLangActive, setIsLangActive] = useState(false);\n\n  const wrapperRef = useRef<HTMLSpanElement>(null);\n  const elmRef = useRef<HTMLDivElement>(null);\n  const langRef = useRef<HTMLSpanElement>(null);\n  const closeMenu = useCallback(() => {\n    setIsOptionActive(false);\n    setIsLangActive(false);\n  }, []);\n\n  useOnClickOutside(\n    [elmRef, wrapperRef],\n    isOptionActive ? closeMenu : () => {},\n  );\n  useOnClickOutside([langRef, wrapperRef], isLangActive ? closeMenu : () => {});\n  const { isChatActive } = useContext(ChatContext);\n  const { openSearch } = useContext(SearchContext);\n\n  return (\n    <StyledHeader $hasChildren={children ? true : false} id=\"header\">\n      <StyledHeaderInner $hasChildren={children ? true : false}>\n        <Link href=\"/\" className=\"logo\" aria-label=\"Logo\">\n          {customThemeJson.logo ? (\n            <>\n              {/* Both logos render; .light-only and .dark-only classes in\n                  GlobalStyles hide the inactive one based on the \"dark\" class\n                  on <html>. Avoids a JS-driven swap so no flash on first load. */}\n              {/* eslint-disable-next-line @next/next/no-img-element */}\n              <img\n                className=\"light-only\"\n                src={customThemeJson.logo.light}\n                alt=\"Logo\"\n                width=\"100\"\n                height=\"100\"\n              />\n              {/* eslint-disable-next-line @next/next/no-img-element */}\n              <img\n                className=\"dark-only\"\n                src={customThemeJson.logo.dark}\n                alt=\"Logo\"\n                width=\"100\"\n                height=\"100\"\n              />\n            </>\n          ) : (\n            <Logo />\n          )}\n        </Link>\n        {children}\n        <StyledLeftWrapper>\n          <StyledSearchButton onClick={openSearch} aria-label=\"Search docs\">\n            <Search size={14} />\n            <SearchKbd>&#8984;K</SearchKbd>\n          </StyledSearchButton>\n          {isChatActive && <ChatButtonCTA />}\n        </StyledLeftWrapper>\n      </StyledHeaderInner>\n    </StyledHeader>\n  );\n}\n\nexport { Header };\n";

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

@@ -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

@@ -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";
+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

@@ -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

@@ -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";
+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

@@ -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

@@ -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";
+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

@@ -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

@@ -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";
+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

@@ -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

@@ -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";
+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

@@ -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

@@ -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";
+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

@@ -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

@@ -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";
+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

@@ -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/llms/llmsFull.d.ts

@@ -0,0 +1,12 @@
+import type { PageMeta, SectionConfig } from "../../lib/types.js";
+export interface PageWithBody extends PageMeta {
+    body: string;
+}
+export interface LlmsFullArgs {
+    siteName: string;
+    siteDescription?: string;
+    baseUrl: string | null;
+    pages: PageWithBody[];
+    sectionsConfig: SectionConfig[] | null;
+}
+export declare function llmsFullTemplate(args: LlmsFullArgs): string;

package/dist/templates/llms/llmsFull.js

@@ -0,0 +1,59 @@
+function pageUrl(slug, baseUrl) {
+    if (baseUrl) {
+        return slug === "" ? `${baseUrl}/` : `${baseUrl}/${slug}`;
+    }
+    return slug === "" ? "/" : `/${slug}`;
+}
+function orderedPages(pages, sectionsConfig) {
+    const sectionOrderIndex = new Map();
+    sectionOrderIndex.set("", 0);
+    if (sectionsConfig) {
+        sectionsConfig.forEach((section, idx) => {
+            sectionOrderIndex.set(section.slug, idx + 1);
+        });
+    }
+    return [...pages].sort((a, b) => {
+        const sa = sectionOrderIndex.get(a.section) ?? 999;
+        const sb = sectionOrderIndex.get(b.section) ?? 999;
+        if (sa !== sb)
+            return sa - sb;
+        if (a.categoryOrder !== b.categoryOrder)
+            return a.categoryOrder - b.categoryOrder;
+        if (a.category !== b.category)
+            return a.category.localeCompare(b.category);
+        if (a.order !== b.order)
+            return a.order - b.order;
+        return a.title.localeCompare(b.title);
+    });
+}
+export function llmsFullTemplate(args) {
+    const { siteName, siteDescription, baseUrl, pages, sectionsConfig } = args;
+    const lines = [];
+    lines.push(`# ${siteName}`);
+    lines.push("");
+    lines.push(`> Full documentation for ${siteName}.`);
+    if (siteDescription && siteDescription.trim() !== "") {
+        lines.push("");
+        lines.push(siteDescription.trim());
+    }
+    lines.push("");
+    if (pages.length === 0) {
+        return lines.join("\n") + "\n";
+    }
+    const sorted = orderedPages(pages, sectionsConfig);
+    for (const page of sorted) {
+        lines.push("---");
+        lines.push("");
+        lines.push(`# ${page.title}`);
+        lines.push("");
+        if (page.description && page.description.trim() !== "") {
+            lines.push(`> ${page.description.trim()}`);
+            lines.push("");
+        }
+        lines.push(`Source: ${pageUrl(page.slug, baseUrl)}`);
+        lines.push("");
+        lines.push(page.body.trim());
+        lines.push("");
+    }
+    return lines.join("\n").replace(/\n+$/, "\n");
+}

package/dist/templates/llms/llmsIndex.d.ts

@@ -0,0 +1,9 @@
+import type { PageMeta, SectionConfig } from "../../lib/types.js";
+export interface LlmsIndexArgs {
+    siteName: string;
+    siteDescription?: string;
+    baseUrl: string | null;
+    pages: PageMeta[];
+    sectionsConfig: SectionConfig[] | null;
+}
+export declare function llmsIndexTemplate(args: LlmsIndexArgs): string;

package/dist/templates/llms/llmsIndex.js

@@ -0,0 +1,105 @@
+function pageUrl(slug, baseUrl) {
+    if (baseUrl) {
+        return slug === "" ? `${baseUrl}/` : `${baseUrl}/${slug}`;
+    }
+    return slug === "" ? "/" : `/${slug}`;
+}
+function comparePages(a, b) {
+    if (a.order !== b.order)
+        return a.order - b.order;
+    return a.title.localeCompare(b.title);
+}
+function buildSectionGroups(pages, sectionsConfig) {
+    const sectionOrderIndex = new Map();
+    sectionOrderIndex.set("", 0);
+    if (sectionsConfig) {
+        sectionsConfig.forEach((section, idx) => {
+            sectionOrderIndex.set(section.slug, idx + 1);
+        });
+    }
+    const sectionLabelByslug = new Map();
+    if (sectionsConfig) {
+        for (const section of sectionsConfig) {
+            sectionLabelByslug.set(section.slug, section.label);
+        }
+    }
+    const bySection = new Map();
+    for (const page of pages) {
+        const key = page.section || "";
+        const list = bySection.get(key) ?? [];
+        list.push(page);
+        bySection.set(key, list);
+    }
+    const groups = [];
+    for (const [sectionSlug, sectionPages] of bySection) {
+        const byCategory = new Map();
+        for (const page of sectionPages) {
+            const key = page.category || "";
+            const list = byCategory.get(key) ?? [];
+            list.push(page);
+            byCategory.set(key, list);
+        }
+        const categories = [];
+        for (const [category, catPages] of byCategory) {
+            catPages.sort(comparePages);
+            const minCategoryOrder = catPages.reduce((min, p) => Math.min(min, p.categoryOrder), Number.POSITIVE_INFINITY);
+            categories.push({
+                category,
+                minCategoryOrder: Number.isFinite(minCategoryOrder)
+                    ? minCategoryOrder
+                    : 0,
+                pages: catPages,
+            });
+        }
+        categories.sort((a, b) => {
+            if (a.minCategoryOrder !== b.minCategoryOrder) {
+                return a.minCategoryOrder - b.minCategoryOrder;
+            }
+            return a.category.localeCompare(b.category);
+        });
+        groups.push({
+            sectionSlug,
+            sectionLabel: sectionLabelByslug.get(sectionSlug) ??
+                (sectionSlug === "" ? "Documentation" : sectionSlug),
+            sectionOrder: sectionOrderIndex.get(sectionSlug) ?? 999,
+            categories,
+        });
+    }
+    groups.sort((a, b) => a.sectionOrder - b.sectionOrder);
+    return groups;
+}
+export function llmsIndexTemplate(args) {
+    const { siteName, siteDescription, baseUrl, pages, sectionsConfig } = args;
+    const lines = [];
+    lines.push(`# ${siteName}`);
+    lines.push("");
+    if (siteDescription && siteDescription.trim() !== "") {
+        lines.push(`> ${siteDescription.trim()}`);
+        lines.push("");
+    }
+    if (pages.length === 0) {
+        return lines.join("\n") + "\n";
+    }
+    const groups = buildSectionGroups(pages, sectionsConfig);
+    for (const group of groups) {
+        lines.push(`## ${group.sectionLabel}`);
+        lines.push("");
+        const useCategoryHeadings = group.categories.length > 1 ||
+            (group.categories.length === 1 && group.categories[0].category !== "");
+        for (const cat of group.categories) {
+            if (useCategoryHeadings && cat.category !== "") {
+                lines.push(`### ${cat.category}`);
+                lines.push("");
+            }
+            for (const page of cat.pages) {
+                const url = pageUrl(page.slug, baseUrl);
+                const desc = page.description && page.description.trim() !== ""
+                    ? `: ${page.description.trim()}`
+                    : "";
+                lines.push(`- [${page.title}](${url})${desc}`);
+            }
+            lines.push("");
+        }
+    }
+    return lines.join("\n").replace(/\n+$/, "\n");
+}

package/dist/templates/llms/llmsPage.d.ts

@@ -0,0 +1,2 @@
+import type { PageWithBody } from "./llmsFull.js";
+export declare function llmsPageTemplate(page: PageWithBody, baseUrl: string | null): string;