doccupine 0.0.103 → 0.0.104

package/dist/lib/structures.js

@@ -44,6 +44,7 @@ import { headerTemplate } from "../templates/components/layout/Header.js";
 import { iconTemplate } from "../templates/components/layout/Icon.js";
 import { pictogramsTemplate } from "../templates/components/layout/Pictograms.js";
 import { sharedStyledTemplate } from "../templates/components/layout/SharedStyles.js";
+import { notFoundComponentTemplate } from "../templates/components/layout/NotFound.js";
 import { siteGateComponentTemplate } from "../templates/components/layout/SiteGate.js";
 import { slugTemplate } from "../templates/components/layout/Slug.js";
 import { staticLinksTemplate } from "../templates/components/layout/StaticLinks.js";
@@ -121,7 +122,7 @@ export const appStructure = {
     "eslint.config.mjs": eslintConfigTemplate,
     "package.json": packageJsonTemplate,
     "tsconfig.json": tsconfigTemplate,
-    "app/(site)/not-found.tsx": notFoundTemplate,
+    "app/not-found.tsx": notFoundTemplate,
     "app/gate/page.tsx": gatePageTemplate,
     "app/theme.ts": themeTemplate,
     "app/api/gate/route.ts": gateRoutesTemplate,
@@ -176,6 +177,7 @@ export const appStructure = {
     "components/layout/Icon.tsx": iconTemplate,
     "components/layout/Pictograms.tsx": pictogramsTemplate,
     "components/layout/SharedStyled.ts": sharedStyledTemplate,
+    "components/layout/NotFound.tsx": notFoundComponentTemplate,
     "components/layout/SiteGate.tsx": siteGateComponentTemplate,
     "components/layout/Slug.ts": slugTemplate,
     "components/layout/StaticLinks.tsx": staticLinksTemplate,

package/dist/templates/app/not-found.d.ts

@@ -1 +1 @@
-export declare const notFoundTemplate = "import { Metadata } from \"next\";\nimport { Docs } from \"@/components/Docs\";\n\nconst content = `# 404 Not Found\n\nYou just hit a route that doesn't exist.`;\n\nexport const metadata: Metadata = {\n  title: \"Not Found\",\n  description:\n    \"Doccupine is a 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.\",\n  openGraph: {\n    title: \"Not Found\",\n    description:\n      \"Doccupine is a 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.\",\n  },\n};\n\nexport default function Page() {\n  return <Docs content={content} />;\n}\n";
+export declare const notFoundTemplate = "import { Metadata } from \"next\";\nimport { NotFound } from \"@/components/layout/NotFound\";\n\nexport const metadata: Metadata = {\n  title: \"Not Found\",\n  description:\n    \"Doccupine is a 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.\",\n  openGraph: {\n    title: \"Not Found\",\n    description:\n      \"Doccupine is a 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.\",\n  },\n};\n\nexport default function Page() {\n  return <NotFound />;\n}\n";

package/dist/templates/app/not-found.js

@@ -1,10 +1,6 @@
 import { DEFAULT_DESCRIPTION } from "../../lib/constants.js";
 export const notFoundTemplate = `import { Metadata } from "next";
-import { Docs } from "@/components/Docs";
-
-const content = \`# 404 Not Found
-
-You just hit a route that doesn't exist.\`;
+import { NotFound } from "@/components/layout/NotFound";
 
 export const metadata: Metadata = {
   title: "Not Found",
@@ -18,6 +14,6 @@ export const metadata: Metadata = {
 };
 
 export default function Page() {
-  return <Docs content={content} />;
+  return <NotFound />;
 }
 `;

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

@@ -1 +1 @@
-export declare const docsComponentsTemplate = "\"use client\";\nimport React, { createContext, useContext } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport {\n  resetButton,\n  styledSmall,\n  styledStrong,\n  styledText,\n} from \"cherry-styled-components\";\nimport Link from \"next/link\";\nimport { mq, Theme } from \"@/app/theme\";\nimport {\n  styledAnchor,\n  styledTable,\n  stylesLists,\n} from \"@/components/layout/SharedStyled\";\nimport { ChatContext } from \"@/components/Chat\";\n\nconst SectionBarContext = createContext(false);\n\nfunction SectionBarProvider({\n  hasSectionBar,\n  children,\n}: {\n  hasSectionBar: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <SectionBarContext.Provider value={hasSectionBar}>\n      {children}\n    </SectionBarContext.Provider>\n  );\n}\n\ninterface DocsProps {\n  children: React.ReactNode;\n}\n\nconst StyledDocsWrapper = styled.main<{ theme: Theme }>`\n  position: relative;\n`;\n\nconst StyledDocsSidebar = styled.div<{ theme: Theme }>`\n  clear: both;\n`;\n\nconst StyledDocsContainer = styled.div<{ theme: Theme; $isChatOpen?: boolean }>`\n  position: relative;\n  padding: 0 20px 100px 20px;\n  width: 100%;\n  ${({ theme }) => styledText(theme)};\n  transition: all 0.3s ease;\n\n  ${mq(\"lg\")} {\n    padding: 0 300px 80px 300px;\n\n    ${({ $isChatOpen }) =>\n      $isChatOpen &&\n      css`\n        padding: 0 440px 80px 300px;\n      `}\n  }\n\n  & p {\n    color: ${({ theme }) => theme.colors.grayDark};\n    hyphens: auto;\n  }\n\n  & pre {\n    max-width: 100%;\n  }\n\n  ${styledAnchor};\n  ${stylesLists};\n  ${styledTable};\n\n  & img,\n  & video,\n  & iframe {\n    max-width: 100%;\n    border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  }\n\n  & code:not([class]) {\n    background: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.primaryLight} 20%, transparent)`};\n    color: ${({ theme }) => theme.colors.dark};\n    padding: 2px 4px;\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    white-space: pre;\n  }\n\n  & .lucide {\n    color: ${({ theme }) => theme.colors.primary};\n  }\n\n  & .aspect-video {\n    aspect-ratio: 16 / 9;\n    border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  }\n`;\n\nexport const StyledMarkdownContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  flex-wrap: wrap;\n  flex: 1;\n  max-width: 640px;\n  margin: auto;\n`;\n\ninterface Props {\n  theme?: Theme;\n  $isActive?: boolean;\n  $isOpen?: boolean;\n  $hasSectionBar?: boolean;\n}\n\nexport const StyledSidebar = styled.nav<Props>`\n  position: fixed;\n  overflow-y: auto;\n  max-height: calc(\n    100dvh - ${({ $hasSectionBar }) => ($hasSectionBar ? 104 : 62)}px\n  );\n  width: 100%;\n  z-index: 99;\n  top: ${({ $hasSectionBar }) => ($hasSectionBar ? 104 : 62)}px;\n  height: 100%;\n  padding: 20px;\n  opacity: 0;\n  pointer-events: none;\n  transition: all 0.3s ease;\n  transform: translateY(30px);\n  left: 0;\n  background: ${({ theme }) => theme.colors.light};\n  -webkit-overflow-scrolling: touch;\n  display: flex;\n  flex-direction: column;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  ${mq(\"lg\")} {\n    border-right: solid 1px ${({ theme }) => theme.colors.grayLight};\n    transition: none;\n    max-height: 100dvh;\n    width: 220px;\n    background: transparent;\n    padding: 82px 20px 20px 20px;\n    opacity: 1;\n    pointer-events: all;\n    transform: translateY(0);\n    background: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.primaryLight} 5%, transparent)`};\n    top: 0;\n    width: 280px;\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      transform: translateY(0);\n      opacity: 1;\n      pointer-events: all;\n    `}\n`;\n\nexport const StyledSidebarFooter = styled.div`\n  padding: 22px 20px;\n  position: sticky;\n  border-top: 1px solid ${({ theme }) => theme.colors.grayLight};\n  background: ${({ theme }) =>\n    `color-mix(in srgb, ${theme.colors.primaryLight} 5%, transparent)`};\n  margin: 0 -20px -20px;\n  bottom: -20px;\n  backdrop-filter: blur(10px);\n\n  ${mq(\"lg\")} {\n    padding: 16px 20px;\n  }\n`;\n\nexport const StyledIndexSidebar = styled.ul<{ theme: Theme }>`\n  display: none;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: 280px;\n  height: 100dvh;\n  overflow-y: auto;\n  z-index: 1;\n  padding: 82px 20px 20px 20px;\n  background: ${({ theme }) => theme.colors.light};\n  border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n  -webkit-overflow-scrolling: touch;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  ${mq(\"lg\")} {\n    display: block;\n  }\n\n  & li {\n    padding: 5px 0;\n  }\n`;\n\nexport const StyledIndexSidebarLabel = styled.span<{ theme: Theme }>`\n  ${({ theme }) => styledSmall(theme)};\n  color: ${({ theme }) => theme.colors.grayDark};\n`;\n\nexport const StyledIndexSidebarLi = styled.li<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  &::before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    left: 0;\n    height: 20px;\n    width: 1px;\n    background: transparent;\n    transition: all 0.3s ease;\n  }\n\n  ${({ $isActive, theme }) =>\n    $isActive &&\n    css`\n      &::before {\n        background: ${theme.colors.primary};\n      }\n    `}\n`;\n\nexport const StyledIndexSidebarLink = styled.a<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  ${({ theme }) => styledSmall(theme)};\n  color: ${({ theme, $isActive }) =>\n    $isActive ? theme.colors.primary : theme.colors.dark};\n  font-weight: ${({ $isActive }) => ($isActive ? \"600\" : \"400\")};\n  text-decoration: none;\n  transition: all 0.3s ease;\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.primary};\n  }\n`;\n\nexport const StyledSidebarList = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n\n  &:last-of-type {\n    margin-bottom: auto;\n  }\n`;\n\nexport const StyledStrong = styled.strong<{ theme: Theme }>`\n  font-weight: 600;\n  ${({ theme }) => styledStrong(theme)};\n  color: ${({ theme }) => theme.colors.accentStrong};\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n\n  & svg {\n    flex-shrink: 0;\n  }\n`;\n\nexport const StyledSidebarListItem = styled.li`\n  display: flex;\n  gap: 10px;\n  clear: both;\n`;\n\n// Shared appearance for every sidebar row - leaf links AND nested group\n// headers - so hover, active state, and the left rail read identically.\nconst sidebarRowStyles = css<Props>`\n  text-decoration: none;\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  line-height: 1.6;\n  color: ${({ theme }) => theme.colors.accentMuted};\n  padding: 5px 0 5px 20px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 0;\n  transition: all 0.3s ease;\n  border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  & svg {\n    flex-shrink: 0;\n  }\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.accent};\n    border-color: ${({ theme }) => theme.colors.primary};\n  }\n\n  ${({ $isActive, theme }) =>\n    $isActive &&\n    css`\n      color: ${theme.colors.accentStrong};\n      border-color: ${theme.colors.primary};\n      font-weight: 600;\n    `};\n`;\n\n// The collapse chevron points right when closed and rotates to point down\n// when the group is open.\nconst sidebarChevron = css<Props>`\n  & .lucide-chevron-right {\n    margin-left: auto;\n    transition: transform 0.3s ease;\n\n    ${({ $isOpen }) =>\n      $isOpen &&\n      css`\n        transform: rotate(90deg);\n      `}\n  }\n`;\n\nexport const StyledSidebarListItemLink = styled(Link)<Props>`\n  ${sidebarRowStyles};\n`;\n\n// Nested navigation group. The header shares the link appearance/hover; a\n// non-navigable group is a single toggle button, while a group that is also a\n// page pairs a link with a chevron toggle. Children live in\n// StyledSidebarGroupContent, which animates open/closed via height 0 <-> auto\n// (enabled by interpolate-size in GlobalStyles, same as the Accordion).\nexport const StyledSidebarGroupButton = styled.button<Props>`\n  ${resetButton};\n  ${sidebarRowStyles};\n  ${sidebarChevron};\n  width: 100%;\n  text-align: left;\n`;\n\nexport const StyledSidebarGroupRow = styled.div<Props>`\n  ${sidebarRowStyles};\n  ${sidebarChevron};\n`;\n\nexport const StyledSidebarGroupLink = styled(Link)`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 0;\n  color: inherit;\n  text-decoration: none;\n\n  & svg {\n    flex-shrink: 0;\n  }\n`;\n\nexport const StyledSidebarGroupChevron = styled.button`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  padding: 0;\n  border: 0;\n  background: none;\n  color: inherit;\n  cursor: pointer;\n`;\n\nexport const StyledSidebarGroupContent = styled.ul<Props>`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  height: 0;\n  overflow: clip;\n  transition: all 0.3s ease;\n\n  ${({ $isOpen }) =>\n    $isOpen &&\n    css`\n      height: auto;\n    `}\n`;\n\nexport const StyleMobileBar = styled.button<Props>`\n  ${resetButton};\n  position: fixed;\n  z-index: 999;\n  bottom: 0;\n  right: 20px;\n  font-size: ${({ theme }) => theme.fontSizes.strong.lg};\n  line-height: ${({ theme }) => theme.fontSizes.strong.lg};\n  box-shadow: ${({ theme }) => theme.shadows.sm};\n  background: ${({ theme }) => theme.colors.primary};\n  color: ${({ theme }) => theme.colors.surface};\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  padding: 10px;\n  border-radius: 100px;\n  margin: 0 0 20px 0;\n  font-weight: 600;\n  display: flex;\n  justify-content: flex-start;\n  width: auto;\n\n  ${mq(\"lg\")} {\n    display: none;\n  }\n\n  ${({ $isActive }) => $isActive && `position: fixed;`};\n`;\n\nexport const StyledMobileBurger = styled.span<Props>`\n  display: block;\n  margin: auto 0;\n  width: 18px;\n  height: 18px;\n  position: relative;\n  overflow: hidden;\n  background: transparent;\n  position: relative;\n  transform: scale(0.8);\n\n  &::before,\n  &::after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    width: 18px;\n    height: 3px;\n    border-radius: 3px;\n    background: ${({ theme }) => theme.colors.surface};\n    transition: all 0.3s ease;\n  }\n\n  &::before {\n    top: 3px;\n  }\n\n  &::after {\n    bottom: 3px;\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      &::before {\n        transform: translateY(5px) rotate(45deg);\n      }\n\n      &::after {\n        transform: translateY(-4px) rotate(-45deg);\n      }\n    `};\n`;\n\nexport const StyledMissingComponent = styled.div`\n  background: ${({ theme }) => theme.colors.error};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  padding: 20px;\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  color: ${({ theme }) => theme.colors.surface};\n  font-weight: 600;\n  display: flex;\n  gap: 10px;\n  align-items: center;\n`;\n\ninterface DocsWrapperProps {\n  children: React.ReactNode;\n}\n\nfunction DocsWrapper({ children }: DocsWrapperProps) {\n  return <StyledDocsWrapper>{children}</StyledDocsWrapper>;\n}\n\nfunction DocsSidebar({ children }: DocsProps) {\n  return <StyledDocsSidebar>{children}</StyledDocsSidebar>;\n}\n\nfunction DocsContainer({ children }: DocsProps) {\n  const { isOpen } = useContext(ChatContext);\n\n  return (\n    <StyledDocsContainer $isChatOpen={isOpen}>{children}</StyledDocsContainer>\n  );\n}\n\nexport {\n  DocsWrapper,\n  DocsSidebar,\n  DocsContainer,\n  SectionBarContext,\n  SectionBarProvider,\n};\n";
+export declare const docsComponentsTemplate = "\"use client\";\nimport React, { createContext, useContext } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport {\n  resetButton,\n  styledSmall,\n  styledStrong,\n  styledText,\n} from \"cherry-styled-components\";\nimport Link from \"next/link\";\nimport { mq, Theme } from \"@/app/theme\";\nimport {\n  focusRing,\n  styledAnchor,\n  styledTable,\n  stylesLists,\n} from \"@/components/layout/SharedStyled\";\nimport { ChatContext } from \"@/components/Chat\";\n\nconst SectionBarContext = createContext(false);\n\nfunction SectionBarProvider({\n  hasSectionBar,\n  children,\n}: {\n  hasSectionBar: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <SectionBarContext.Provider value={hasSectionBar}>\n      {children}\n    </SectionBarContext.Provider>\n  );\n}\n\ninterface DocsProps {\n  children: React.ReactNode;\n}\n\nconst StyledDocsWrapper = styled.main<{ theme: Theme }>`\n  position: relative;\n`;\n\nconst StyledDocsSidebar = styled.div<{ theme: Theme }>`\n  clear: both;\n`;\n\nconst StyledDocsContainer = styled.div<{ theme: Theme; $isChatOpen?: boolean }>`\n  position: relative;\n  padding: 0 20px 100px 20px;\n  width: 100%;\n  ${({ theme }) => styledText(theme)};\n  transition: all 0.3s ease;\n\n  ${mq(\"lg\")} {\n    padding: 0 300px 80px 300px;\n\n    ${({ $isChatOpen }) =>\n      $isChatOpen &&\n      css`\n        padding: 0 440px 80px 300px;\n      `}\n  }\n\n  & p {\n    color: ${({ theme }) => theme.colors.grayDark};\n    hyphens: auto;\n  }\n\n  & pre {\n    max-width: 100%;\n  }\n\n  ${styledAnchor};\n  ${stylesLists};\n  ${styledTable};\n\n  & img,\n  & video,\n  & iframe {\n    max-width: 100%;\n    border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  }\n\n  & code:not([class]) {\n    background: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.primaryLight} 20%, transparent)`};\n    color: ${({ theme }) => theme.colors.dark};\n    padding: 2px 4px;\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    white-space: pre;\n  }\n\n  & .lucide {\n    color: ${({ theme }) => theme.colors.primary};\n  }\n\n  & .aspect-video {\n    aspect-ratio: 16 / 9;\n    border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  }\n`;\n\nexport const StyledMarkdownContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  flex-wrap: wrap;\n  flex: 1;\n  max-width: 640px;\n  margin: auto;\n`;\n\ninterface Props {\n  theme?: Theme;\n  $isActive?: boolean;\n  $isOpen?: boolean;\n  $hasSectionBar?: boolean;\n}\n\nexport const StyledSidebar = styled.nav<Props>`\n  position: fixed;\n  overflow-y: auto;\n  max-height: calc(\n    100dvh - ${({ $hasSectionBar }) => ($hasSectionBar ? 104 : 62)}px\n  );\n  width: 100%;\n  z-index: 99;\n  top: ${({ $hasSectionBar }) => ($hasSectionBar ? 104 : 62)}px;\n  height: 100%;\n  padding: 20px;\n  opacity: 0;\n  pointer-events: none;\n  transition: all 0.3s ease;\n  transform: translateY(30px);\n  left: 0;\n  background: ${({ theme }) => theme.colors.light};\n  -webkit-overflow-scrolling: touch;\n  display: flex;\n  flex-direction: column;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  ${mq(\"lg\")} {\n    border-right: solid 1px ${({ theme }) => theme.colors.grayLight};\n    transition: none;\n    max-height: 100dvh;\n    width: 220px;\n    background: transparent;\n    padding: 82px 20px 20px 20px;\n    opacity: 1;\n    pointer-events: all;\n    transform: translateY(0);\n    background: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.primaryLight} 5%, transparent)`};\n    top: 0;\n    width: 280px;\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      transform: translateY(0);\n      opacity: 1;\n      pointer-events: all;\n    `}\n`;\n\nexport const StyledSidebarFooter = styled.div`\n  padding: 22px 20px;\n  position: sticky;\n  border-top: 1px solid ${({ theme }) => theme.colors.grayLight};\n  background: ${({ theme }) =>\n    `color-mix(in srgb, ${theme.colors.primaryLight} 5%, transparent)`};\n  margin: 0 -20px -20px;\n  bottom: -20px;\n  backdrop-filter: blur(10px);\n\n  ${mq(\"lg\")} {\n    padding: 16px 20px;\n  }\n`;\n\nexport const StyledIndexSidebar = styled.ul<{ theme: Theme }>`\n  display: none;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: 280px;\n  height: 100dvh;\n  overflow-y: auto;\n  z-index: 1;\n  padding: 82px 20px 20px 20px;\n  background: ${({ theme }) => theme.colors.light};\n  border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n  -webkit-overflow-scrolling: touch;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  ${mq(\"lg\")} {\n    display: block;\n  }\n\n  & li {\n    padding: 5px 0;\n  }\n`;\n\nexport const StyledIndexSidebarLabel = styled.span<{ theme: Theme }>`\n  ${({ theme }) => styledSmall(theme)};\n  color: ${({ theme }) => theme.colors.grayDark};\n`;\n\nexport const StyledIndexSidebarLi = styled.li<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  &::before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    left: 0;\n    height: 20px;\n    width: 1px;\n    background: transparent;\n    transition: all 0.3s ease;\n  }\n\n  ${({ $isActive, theme }) =>\n    $isActive &&\n    css`\n      &::before {\n        background: ${theme.colors.primary};\n      }\n    `}\n`;\n\nexport const StyledIndexSidebarLink = styled.a<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  ${({ theme }) => styledSmall(theme)};\n  color: ${({ theme, $isActive }) =>\n    $isActive ? theme.colors.primary : theme.colors.dark};\n  font-weight: ${({ $isActive }) => ($isActive ? \"600\" : \"400\")};\n  text-decoration: none;\n  transition: all 0.3s ease;\n  ${focusRing};\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.primary};\n  }\n`;\n\nexport const StyledSidebarList = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n\n  &:last-of-type {\n    margin-bottom: auto;\n  }\n`;\n\nexport const StyledStrong = styled.strong<{ theme: Theme }>`\n  font-weight: 600;\n  ${({ theme }) => styledStrong(theme)};\n  color: ${({ theme }) => theme.colors.accentStrong};\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n\n  & svg {\n    flex-shrink: 0;\n  }\n`;\n\nexport const StyledSidebarListItem = styled.li`\n  display: flex;\n  gap: 10px;\n  clear: both;\n`;\n\n// Shared appearance for every sidebar row - leaf links AND nested group\n// headers - so hover, active state, and the left rail read identically.\nconst sidebarRowStyles = css<Props>`\n  text-decoration: none;\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  line-height: 1.6;\n  color: ${({ theme }) => theme.colors.accentMuted};\n  padding: 5px 0 5px 20px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 0;\n  transition: all 0.3s ease;\n  border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  & svg {\n    flex-shrink: 0;\n  }\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.accent};\n    border-color: ${({ theme }) => theme.colors.primary};\n  }\n\n  ${focusRing};\n\n  ${({ $isActive, theme }) =>\n    $isActive &&\n    css`\n      color: ${theme.colors.accentStrong};\n      border-color: ${theme.colors.primary};\n      font-weight: 600;\n    `};\n`;\n\n// The collapse chevron points right when closed and rotates to point down\n// when the group is open.\nconst sidebarChevron = css<Props>`\n  & .lucide-chevron-right {\n    margin-left: auto;\n    transition: transform 0.3s ease;\n\n    ${({ $isOpen }) =>\n      $isOpen &&\n      css`\n        transform: rotate(90deg);\n      `}\n  }\n`;\n\nexport const StyledSidebarListItemLink = styled(Link)<Props>`\n  ${sidebarRowStyles};\n`;\n\n// Nested navigation group. The header shares the link appearance/hover; a\n// non-navigable group is a single toggle button, while a group that is also a\n// page pairs a link with a chevron toggle. Children live in\n// StyledSidebarGroupContent, which animates open/closed via height 0 <-> auto\n// (enabled by interpolate-size in GlobalStyles, same as the Accordion).\nexport const StyledSidebarGroupButton = styled.button<Props>`\n  ${resetButton};\n  ${sidebarRowStyles};\n  ${sidebarChevron};\n  width: 100%;\n  text-align: left;\n`;\n\nexport const StyledSidebarGroupRow = styled.div<Props>`\n  ${sidebarRowStyles};\n  ${sidebarChevron};\n\n  /* The row is a plain div, so it never matches :focus-visible itself. Ring the\n     whole row when its inner link or chevron takes keyboard focus instead, to\n     match the leaf-row focus treatment. */\n  &:has(:focus-visible) {\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};\n  }\n`;\n\nexport const StyledSidebarGroupLink = styled(Link)`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 0;\n  color: inherit;\n  text-decoration: none;\n\n  & svg {\n    flex-shrink: 0;\n  }\n\n  /* Ring is drawn on the parent row via :has(:focus-visible). */\n  &:focus-visible {\n    outline: none;\n  }\n`;\n\nexport const StyledSidebarGroupChevron = styled.button`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  padding: 0;\n  border: 0;\n  background: none;\n  color: inherit;\n  cursor: pointer;\n\n  /* Ring is drawn on the parent row via :has(:focus-visible). */\n  &:focus-visible {\n    outline: none;\n  }\n`;\n\nexport const StyledSidebarGroupContent = styled.ul<Props>`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  height: 0;\n  overflow: clip;\n  transition: all 0.3s ease;\n\n  ${({ $isOpen }) =>\n    $isOpen &&\n    css`\n      height: auto;\n    `}\n`;\n\nexport const StyleMobileBar = styled.button<Props>`\n  ${resetButton};\n  position: fixed;\n  z-index: 999;\n  bottom: 0;\n  right: 20px;\n  font-size: ${({ theme }) => theme.fontSizes.strong.lg};\n  line-height: ${({ theme }) => theme.fontSizes.strong.lg};\n  box-shadow: ${({ theme }) => theme.shadows.sm};\n  background: ${({ theme }) => theme.colors.primary};\n  color: ${({ theme }) => theme.colors.surface};\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  padding: 10px;\n  border-radius: 100px;\n  margin: 0 0 20px 0;\n  font-weight: 600;\n  display: flex;\n  justify-content: flex-start;\n  width: auto;\n\n  ${mq(\"lg\")} {\n    display: none;\n  }\n\n  ${({ $isActive }) => $isActive && `position: fixed;`};\n`;\n\nexport const StyledMobileBurger = styled.span<Props>`\n  display: block;\n  margin: auto 0;\n  width: 18px;\n  height: 18px;\n  position: relative;\n  overflow: hidden;\n  background: transparent;\n  position: relative;\n  transform: scale(0.8);\n\n  &::before,\n  &::after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    width: 18px;\n    height: 3px;\n    border-radius: 3px;\n    background: ${({ theme }) => theme.colors.surface};\n    transition: all 0.3s ease;\n  }\n\n  &::before {\n    top: 3px;\n  }\n\n  &::after {\n    bottom: 3px;\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      &::before {\n        transform: translateY(5px) rotate(45deg);\n      }\n\n      &::after {\n        transform: translateY(-4px) rotate(-45deg);\n      }\n    `};\n`;\n\nexport const StyledMissingComponent = styled.div`\n  background: ${({ theme }) => theme.colors.error};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  padding: 20px;\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  color: ${({ theme }) => theme.colors.surface};\n  font-weight: 600;\n  display: flex;\n  gap: 10px;\n  align-items: center;\n`;\n\ninterface DocsWrapperProps {\n  children: React.ReactNode;\n}\n\nfunction DocsWrapper({ children }: DocsWrapperProps) {\n  return <StyledDocsWrapper>{children}</StyledDocsWrapper>;\n}\n\nfunction DocsSidebar({ children }: DocsProps) {\n  return <StyledDocsSidebar>{children}</StyledDocsSidebar>;\n}\n\nfunction DocsContainer({ children }: DocsProps) {\n  const { isOpen } = useContext(ChatContext);\n\n  return (\n    <StyledDocsContainer $isChatOpen={isOpen}>{children}</StyledDocsContainer>\n  );\n}\n\nexport {\n  DocsWrapper,\n  DocsSidebar,\n  DocsContainer,\n  SectionBarContext,\n  SectionBarProvider,\n};\n";

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

@@ -11,6 +11,7 @@ import {
 import Link from "next/link";
 import { mq, Theme } from "@/app/theme";
 import {
+  focusRing,
   styledAnchor,
   styledTable,
   stylesLists,
@@ -252,6 +253,7 @@ export const StyledIndexSidebarLink = styled.a<{
   font-weight: \${({ $isActive }) => ($isActive ? "600" : "400")};
   text-decoration: none;
   transition: all 0.3s ease;
+  \${focusRing};
 
   &:hover {
     color: \${({ theme }) => theme.colors.primary};
@@ -312,6 +314,8 @@ const sidebarRowStyles = css<Props>\`
     border-color: \${({ theme }) => theme.colors.primary};
   }
 
+  \${focusRing};
+
   \${({ $isActive, theme }) =>
     $isActive &&
     css\`
@@ -356,6 +360,14 @@ export const StyledSidebarGroupButton = styled.button<Props>\`
 export const StyledSidebarGroupRow = styled.div<Props>\`
   \${sidebarRowStyles};
   \${sidebarChevron};
+
+  /* The row is a plain div, so it never matches :focus-visible itself. Ring the
+     whole row when its inner link or chevron takes keyboard focus instead, to
+     match the leaf-row focus treatment. */
+  &:has(:focus-visible) {
+    border-radius: \${({ theme }) => theme.spacing.radius.xs};
+    box-shadow: 0 0 0 4px \${({ theme }) => theme.colors.primaryLight};
+  }
 \`;
 
 export const StyledSidebarGroupLink = styled(Link)\`
@@ -370,6 +382,11 @@ export const StyledSidebarGroupLink = styled(Link)\`
   & svg {
     flex-shrink: 0;
   }
+
+  /* Ring is drawn on the parent row via :has(:focus-visible). */
+  &:focus-visible {
+    outline: none;
+  }
 \`;
 
 export const StyledSidebarGroupChevron = styled.button\`
@@ -382,6 +399,11 @@ export const StyledSidebarGroupChevron = styled.button\`
   background: none;
   color: inherit;
   cursor: pointer;
+
+  /* Ring is drawn on the parent row via :has(:focus-visible). */
+  &:focus-visible {
+    outline: none;
+  }
 \`;
 
 export const StyledSidebarGroupContent = styled.ul<Props>\`

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

@@ -1 +1 @@
-export declare const footerTemplate = "\"use client\";\nimport { useContext } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { Space, styledSmall } from \"cherry-styled-components\";\nimport { ChatContext } from \"@/components/Chat\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { GitHubLogo } from \"@/components/layout/Pictograms\";\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 StyledFooter = styled.footer<{\n  theme: Theme;\n  $isChatOpen?: boolean;\n  $hasLinks?: boolean;\n}>`\n  padding: 0 20px;\n  transition: all 0.3s ease;\n\n  ${({ $hasLinks }) =>\n    $hasLinks &&\n    css`\n      margin-top: 20px;\n    `}\n\n  ${mq(\"lg\")} {\n    margin: 0;\n    padding: 0 300px 0 300px;\n\n    ${({ $isChatOpen }) =>\n      $isChatOpen &&\n      css`\n        padding: 0 440px 0 300px;\n      `}\n  }\n`;\n\nconst StyledFooterInner = styled.div<{ theme: Theme }>`\n  border-top: solid 1px ${({ theme }) => theme.colors.grayLight};\n  max-width: 640px;\n  margin: 0 auto;\n  padding: 28px 0;\n  color: ${({ theme }) => theme.colors.grayDark};\n  ${({ theme }) => styledSmall(theme)};\n\n  ${mq(\"lg\")} {\n    padding: 20px 0;\n  }\n\n  & a {\n    font-weight: 700;\n    color: ${({ theme }) => theme.colors.accent};\n    text-decoration: none;\n    transition: all 0.3s ease;\n    display: inline-flex;\n\n    &:hover {\n      color: ${({ theme }) => theme.colors.primary};\n    }\n\n    & svg {\n      width: 18px;\n      height: 18px;\n    }\n  }\n`;\n\nconst StyledFooterFlex = styled.div`\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 20px;\n\n  ${mq(\"lg\")} {\n    justify-content: space-between;\n  }\n`;\n\nfunction Footer({ hideBranding }: { hideBranding?: boolean }) {\n  const { isOpen } = useContext(ChatContext);\n\n  if (hideBranding) return <Space $xs={80} $lg=\"none\" />;\n\n  return (\n    <StyledFooter $isChatOpen={isOpen} $hasLinks={links.length > 0}>\n      <StyledFooterInner>\n        <StyledFooterFlex>\n          <span>\n            Powered by{\" \"}\n            <a\n              href=\"https://doccupine.com\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              Doccupine\n            </a>\n          </span>\n          <a\n            href=\"https://github.com/doccupine/cli\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            aria-label=\"Doccupine on GitHub\"\n          >\n            <GitHubLogo />\n          </a>\n        </StyledFooterFlex>\n      </StyledFooterInner>\n    </StyledFooter>\n  );\n}\n\nexport { Footer };\n";
+export declare const footerTemplate = "\"use client\";\nimport { useContext } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { Space, styledSmall } from \"cherry-styled-components\";\nimport { ChatContext } from \"@/components/Chat\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { GitHubLogo } from \"@/components/layout/Pictograms\";\nimport { focusRing } from \"@/components/layout/SharedStyled\";\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 StyledFooter = styled.footer<{\n  theme: Theme;\n  $isChatOpen?: boolean;\n  $hasLinks?: boolean;\n}>`\n  padding: 0 20px;\n  transition: all 0.3s ease;\n\n  ${({ $hasLinks }) =>\n    $hasLinks &&\n    css`\n      margin-top: 20px;\n    `}\n\n  ${mq(\"lg\")} {\n    margin: 0;\n    padding: 0 300px 0 300px;\n\n    ${({ $isChatOpen }) =>\n      $isChatOpen &&\n      css`\n        padding: 0 440px 0 300px;\n      `}\n  }\n`;\n\nconst StyledFooterInner = styled.div<{ theme: Theme }>`\n  border-top: solid 1px ${({ theme }) => theme.colors.grayLight};\n  max-width: 640px;\n  margin: 0 auto;\n  padding: 28px 0;\n  color: ${({ theme }) => theme.colors.grayDark};\n  ${({ theme }) => styledSmall(theme)};\n\n  ${mq(\"lg\")} {\n    padding: 20px 0;\n  }\n\n  & a {\n    font-weight: 700;\n    color: ${({ theme }) => theme.colors.accent};\n    text-decoration: none;\n    transition: all 0.3s ease;\n    display: inline-flex;\n    ${focusRing};\n\n    &:hover {\n      color: ${({ theme }) => theme.colors.primary};\n    }\n\n    /* The GitHub logo is an icon-only link - round its focus ring to match. */\n    &:has(svg):focus-visible {\n      border-radius: 100%;\n    }\n\n    & svg {\n      width: 18px;\n      height: 18px;\n    }\n  }\n`;\n\nconst StyledFooterFlex = styled.div`\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 20px;\n\n  ${mq(\"lg\")} {\n    justify-content: space-between;\n  }\n`;\n\nfunction Footer({ hideBranding }: { hideBranding?: boolean }) {\n  const { isOpen } = useContext(ChatContext);\n\n  if (hideBranding) return <Space $xs={80} $lg=\"none\" />;\n\n  return (\n    <StyledFooter $isChatOpen={isOpen} $hasLinks={links.length > 0}>\n      <StyledFooterInner>\n        <StyledFooterFlex>\n          <span>\n            Powered by{\" \"}\n            <a\n              href=\"https://doccupine.com\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              Doccupine\n            </a>\n          </span>\n          <a\n            href=\"https://github.com/doccupine/cli\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            aria-label=\"Doccupine on GitHub\"\n          >\n            <GitHubLogo />\n          </a>\n        </StyledFooterFlex>\n      </StyledFooterInner>\n    </StyledFooter>\n  );\n}\n\nexport { Footer };\n";

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

@@ -6,6 +6,7 @@ import { Space, styledSmall } from "cherry-styled-components";
 import { ChatContext } from "@/components/Chat";
 import { mq, Theme } from "@/app/theme";
 import { GitHubLogo } from "@/components/layout/Pictograms";
+import { focusRing } from "@/components/layout/SharedStyled";
 import linksData from "@/links.json";
 
 interface LinkProps {
@@ -60,11 +61,17 @@ const StyledFooterInner = styled.div<{ theme: Theme }>\`
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-flex;
+    \${focusRing};
 
     &:hover {
       color: \${({ theme }) => theme.colors.primary};
     }
 
+    /* The GitHub logo is an icon-only link - round its focus ring to match. */
+    &:has(svg):focus-visible {
+      border-radius: 100%;
+    }
+
     & svg {
       width: 18px;
       height: 18px;

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 } from \"styled-components\";\nimport Link from \"next/link\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { useOnClickOutside } from \"cherry-styled-components\";\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";
+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 { focusRing } from \"@/components/layout/SharedStyled\";\nimport { useOnClickOutside } from \"cherry-styled-components\";\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    min-width: max-content;\n    ${focusRing};\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

@@ -4,6 +4,7 @@ import { useCallback, useContext, useRef, useState } from "react";
 import styled, { css } from "styled-components";
 import Link from "next/link";
 import { mq, Theme } from "@/app/theme";
+import { focusRing } from "@/components/layout/SharedStyled";
 import { useOnClickOutside } from "cherry-styled-components";
 import { Search } from "lucide-react";
 import { Logo } from "@/components/layout/Pictograms";
@@ -58,6 +59,8 @@ const StyledHeader = styled.header<{ theme: Theme; $hasChildren: boolean }>\`
 
   & .logo {
     display: flex;
+    min-width: max-content;
+    \${focusRing};
 
     & svg,
     & img {

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

@@ -0,0 +1 @@
+export declare const notFoundComponentTemplate = "\"use client\";\nimport styled from \"styled-components\";\nimport { Compass } from \"lucide-react\";\nimport { Theme } from \"@/app/theme\";\nimport { Button } from \"@/components/layout/Button\";\n\nconst StyledWrapper = styled.div<{ theme: Theme }>`\n  min-height: 100dvh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 20px;\n  background: ${({ theme }) => theme.colors.light};\n`;\n\nconst StyledCard = styled.div<{ theme: Theme }>`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 20px;\n  width: 100%;\n  max-width: 420px;\n  padding: 40px 32px;\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  box-shadow: ${({ theme }) => theme.shadows.sm};\n  text-align: center;\n`;\n\nconst StyledIcon = styled.div<{ theme: Theme }>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  color: ${({ theme }) => theme.colors.accent};\n  background: ${({ theme }) => theme.colors.grayLight};\n\n  & svg {\n    width: 22px;\n    height: 22px;\n  }\n`;\n\nconst StyledTitle = styled.h1<{ theme: Theme }>`\n  margin: 0;\n  font-size: 24px;\n  font-weight: 700;\n  color: ${({ theme }) => theme.colors.accent};\n`;\n\nconst StyledText = styled.p<{ theme: Theme }>`\n  margin: 0;\n  font-size: 15px;\n  color: ${({ theme }) => theme.colors.grayDark};\n`;\n\nexport function NotFound() {\n  return (\n    <StyledWrapper>\n      <StyledCard>\n        <StyledIcon>\n          <Compass />\n        </StyledIcon>\n        <StyledTitle>Error 404</StyledTitle>\n        <StyledText>This page could not be found.</StyledText>\n        <Button href=\"/\" icon=\"house\">\n          Home\n        </Button>\n      </StyledCard>\n    </StyledWrapper>\n  );\n}\n";

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

@@ -0,0 +1,76 @@
+export const notFoundComponentTemplate = `"use client";
+import styled from "styled-components";
+import { Compass } from "lucide-react";
+import { Theme } from "@/app/theme";
+import { Button } from "@/components/layout/Button";
+
+const StyledWrapper = styled.div<{ theme: Theme }>\`
+  min-height: 100dvh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background: \${({ theme }) => theme.colors.light};
+\`;
+
+const StyledCard = styled.div<{ theme: Theme }>\`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  width: 100%;
+  max-width: 420px;
+  padding: 40px 32px;
+  background: \${({ theme }) => theme.colors.light};
+  border: solid 1px \${({ theme }) => theme.colors.grayLight};
+  border-radius: \${({ theme }) => theme.spacing.radius.lg};
+  box-shadow: \${({ theme }) => theme.shadows.sm};
+  text-align: center;
+\`;
+
+const StyledIcon = styled.div<{ theme: Theme }>\`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  color: \${({ theme }) => theme.colors.accent};
+  background: \${({ theme }) => theme.colors.grayLight};
+
+  & svg {
+    width: 22px;
+    height: 22px;
+  }
+\`;
+
+const StyledTitle = styled.h1<{ theme: Theme }>\`
+  margin: 0;
+  font-size: 24px;
+  font-weight: 700;
+  color: \${({ theme }) => theme.colors.accent};
+\`;
+
+const StyledText = styled.p<{ theme: Theme }>\`
+  margin: 0;
+  font-size: 15px;
+  color: \${({ theme }) => theme.colors.grayDark};
+\`;
+
+export function NotFound() {
+  return (
+    <StyledWrapper>
+      <StyledCard>
+        <StyledIcon>
+          <Compass />
+        </StyledIcon>
+        <StyledTitle>Error 404</StyledTitle>
+        <StyledText>This page could not be found.</StyledText>
+        <Button href="/" icon="house">
+          Home
+        </Button>
+      </StyledCard>
+    </StyledWrapper>
+  );
+}
+`;

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

@@ -1 +1 @@
-export declare const sectionBarTemplate = "\"use client\";\nimport { usePathname } from \"next/navigation\";\nimport Link from \"next/link\";\nimport styled from \"styled-components\";\nimport { styledText } from \"cherry-styled-components\";\nimport { mq, Theme } from \"@/app/theme\";\n\ninterface SectionConfig {\n  label: string;\n  slug: string;\n  directory?: string;\n}\n\ninterface SectionBarProps {\n  sections: SectionConfig[];\n}\n\nconst StyledSectionBar = styled.nav<{ theme: Theme }>`\n  display: flex;\n  order: 3;\n  width: calc(100% + 20px);\n  margin: 0 0 0 -10px;\n  padding: 0;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  position: relative;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  ${mq(\"lg\")} {\n    padding: 0 10px;\n    order: unset;\n    width: 100%;\n    margin: 0;\n    justify-content: flex-end;\n  }\n`;\n\nconst StyledSectionLink = styled(Link)<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  ${({ theme }) => styledText(theme)};\n  text-decoration: none;\n  padding: 16px 10px;\n  white-space: nowrap;\n  font-weight: ${({ $isActive }) => ($isActive ? \"600\" : \"500\")};\n  color: ${({ theme, $isActive }) =>\n    $isActive ? theme.colors.primary : theme.colors.gray};\n  border-bottom: solid 2px\n    ${({ theme, $isActive }) =>\n      $isActive ? theme.colors.primary : \"transparent\"};\n  transition: all 0.3s ease;\n  min-width: fit-content;\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.primary};\n  }\n`;\n\nfunction SectionBar({ sections }: SectionBarProps) {\n  const pathname = usePathname();\n  const currentPath = pathname.replace(/^\\//, \"\").replace(/\\/$/, \"\");\n\n  const activeSection = sections.find((section) => {\n    if (section.slug === \"\") return false;\n    return (\n      currentPath === section.slug || currentPath.startsWith(section.slug + \"/\")\n    );\n  });\n\n  const activeSectionSlug = activeSection ? activeSection.slug : \"\";\n\n  return (\n    <StyledSectionBar>\n      {sections.map((section) => (\n        <StyledSectionLink\n          key={section.slug}\n          href={section.slug === \"\" ? \"/\" : `/${section.slug}`}\n          $isActive={activeSectionSlug === section.slug}\n        >\n          {section.label}\n        </StyledSectionLink>\n      ))}\n    </StyledSectionBar>\n  );\n}\n\nexport { SectionBar };\n";
+export declare const sectionBarTemplate = "\"use client\";\nimport { usePathname } from \"next/navigation\";\nimport Link from \"next/link\";\nimport styled from \"styled-components\";\nimport { styledText } from \"cherry-styled-components\";\nimport { mq, Theme } from \"@/app/theme\";\n\ninterface SectionConfig {\n  label: string;\n  slug: string;\n  directory?: string;\n}\n\ninterface SectionBarProps {\n  sections: SectionConfig[];\n}\n\nconst StyledSectionBar = styled.nav<{ theme: Theme }>`\n  display: flex;\n  order: 3;\n  width: calc(100% + 20px);\n  margin: 0 0 0 -10px;\n  padding: 0;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  position: relative;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  ${mq(\"lg\")} {\n    padding: 0 10px;\n    order: unset;\n    width: 100%;\n    margin: 0;\n    justify-content: flex-end;\n  }\n`;\n\nconst StyledSectionLink = styled(Link)<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  ${({ theme }) => styledText(theme)};\n  text-decoration: none;\n  padding: 16px 10px;\n  white-space: nowrap;\n  font-weight: ${({ $isActive }) => ($isActive ? \"600\" : \"500\")};\n  color: ${({ theme, $isActive }) =>\n    $isActive ? theme.colors.primary : theme.colors.gray};\n  border-bottom: solid 2px\n    ${({ theme, $isActive }) =>\n      $isActive ? theme.colors.primary : \"transparent\"};\n  transition: all 0.3s ease;\n  min-width: fit-content;\n\n  /* Inset ring (not the shared outset focusRing): the scrolling section bar\n     clips overflow, so an outset glow gets cropped top/bottom. Drawing it inside\n     the link's padding keeps the primaryLight focus look fully visible. */\n  &:focus-visible {\n    outline: none;\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    box-shadow: inset 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};\n  }\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.primary};\n  }\n`;\n\nfunction SectionBar({ sections }: SectionBarProps) {\n  const pathname = usePathname();\n  const currentPath = pathname.replace(/^\\//, \"\").replace(/\\/$/, \"\");\n\n  const activeSection = sections.find((section) => {\n    if (section.slug === \"\") return false;\n    return (\n      currentPath === section.slug || currentPath.startsWith(section.slug + \"/\")\n    );\n  });\n\n  const activeSectionSlug = activeSection ? activeSection.slug : \"\";\n\n  return (\n    <StyledSectionBar>\n      {sections.map((section) => (\n        <StyledSectionLink\n          key={section.slug}\n          href={section.slug === \"\" ? \"/\" : `/${section.slug}`}\n          $isActive={activeSectionSlug === section.slug}\n        >\n          {section.label}\n        </StyledSectionLink>\n      ))}\n    </StyledSectionBar>\n  );\n}\n\nexport { SectionBar };\n";

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

@@ -55,6 +55,15 @@ const StyledSectionLink = styled(Link)<{
   transition: all 0.3s ease;
   min-width: fit-content;
 
+  /* Inset ring (not the shared outset focusRing): the scrolling section bar
+     clips overflow, so an outset glow gets cropped top/bottom. Drawing it inside
+     the link's padding keeps the primaryLight focus look fully visible. */
+  &:focus-visible {
+    outline: none;
+    border-radius: \${({ theme }) => theme.spacing.radius.xs};
+    box-shadow: inset 0 0 0 4px \${({ theme }) => theme.colors.primaryLight};
+  }
+
   &:hover {
     color: \${({ theme }) => theme.colors.primary};
   }

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

@@ -1 +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\n/** Slim, theme-aware scrollbar for internal scroll areas (code blocks,\n    modals, tables) so the chunky native bar doesn't stand out, especially\n    in dark mode. */\nexport const thinScrollbar = css<{ theme: Theme }>`\n  scrollbar-width: thin;\n  scrollbar-color: ${({ theme }) => theme.colors.grayLight} transparent;\n`;\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    ${thinScrollbar};\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";
+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\n/** Slim, theme-aware scrollbar for internal scroll areas (code blocks,\n    modals, tables) so the chunky native bar doesn't stand out, especially\n    in dark mode. */\nexport const thinScrollbar = css<{ theme: Theme }>`\n  scrollbar-width: thin;\n  scrollbar-color: ${({ theme }) => theme.colors.grayLight} transparent;\n`;\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\n/** Keyboard-focus ring for bare navigation links (header links, sidebar rows,\n    footer links) that don't carry the full interactiveStyles treatment. Mirrors\n    the primaryLight glow from interactiveStyles, but uses :focus-visible so the\n    ring only shows for keyboard users - not on mouse click. Pair with an element\n    that already has a transition for a smooth fade. The small border-radius\n    rounds the ring, so don't apply this to elements that set their own radius. */\nexport const focusRing = css<{ theme: Theme }>`\n  &:focus-visible {\n    outline: none;\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    box-shadow: 0 0 0 4px ${({ 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    /* Same primaryLight focus glow as focusRing, but layered over the link's\n       own box-shadow underline (same property) so the underline is preserved. */\n    &:focus-visible {\n      outline: none;\n      border-radius: ${({ theme }) => theme.spacing.radius.xs};\n      box-shadow:\n        0 2px 0 0 ${({ theme }) => theme.colors.primary},\n        0 0 0 4px ${({ theme }) => theme.colors.primaryLight};\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    ${thinScrollbar};\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

@@ -30,6 +30,20 @@ export const interactiveStyles = css<{ theme: Theme }>\`
   }
 \`;
 
+/** Keyboard-focus ring for bare navigation links (header links, sidebar rows,
+    footer links) that don't carry the full interactiveStyles treatment. Mirrors
+    the primaryLight glow from interactiveStyles, but uses :focus-visible so the
+    ring only shows for keyboard users - not on mouse click. Pair with an element
+    that already has a transition for a smooth fade. The small border-radius
+    rounds the ring, so don't apply this to elements that set their own radius. */
+export const focusRing = css<{ theme: Theme }>\`
+  &:focus-visible {
+    outline: none;
+    border-radius: \${({ theme }) => theme.spacing.radius.xs};
+    box-shadow: 0 0 0 4px \${({ theme }) => theme.colors.primaryLight};
+  }
+\`;
+
 export const styledAnchor = css<{ theme: Theme }>\`
   & a:not([class]):not(:has(img)) {
     color: inherit;
@@ -41,6 +55,16 @@ export const styledAnchor = css<{ theme: Theme }>\`
       color: \${({ theme }) => theme.colors.accent};
       box-shadow: 0 1px 0 0 \${({ theme }) => theme.colors.primary};
     }
+
+    /* Same primaryLight focus glow as focusRing, but layered over the link's
+       own box-shadow underline (same property) so the underline is preserved. */
+    &:focus-visible {
+      outline: none;
+      border-radius: \${({ theme }) => theme.spacing.radius.xs};
+      box-shadow:
+        0 2px 0 0 \${({ theme }) => theme.colors.primary},
+        0 0 0 4px \${({ theme }) => theme.colors.primaryLight};
+    }
   }
 \`;
 

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 } 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";
+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.div<{ 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  font-weight: 700;\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

@@ -54,11 +54,12 @@ const StepNumber = styled.div<{ theme: Theme }>\`
   z-index: 1;
 \`;
 
-const StyledStepTitle = styled.h3<{ theme: Theme }>\`
+const StyledStepTitle = styled.div<{ theme: Theme }>\`
   margin: 0 0 10px 0;
   padding: 2px 0 0 0;
   color: \${({ theme }) => theme.colors.dark};
   \${({ theme }) => styledText(theme)};
+  font-weight: 700;
   display: flex;
   align-items: center;
   gap: 10px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doccupine",
-  "version": "0.0.103",
+  "version": "0.0.104",
   "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": {