doccupine 0.0.102 → 0.0.104

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,
@@ -114,6 +115,7 @@ export const StyledMarkdownContainer = styled.div\`
 interface Props {
   theme?: Theme;
   $isActive?: boolean;
+  $isOpen?: boolean;
   $hasSectionBar?: boolean;
 }
 
@@ -251,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};
@@ -271,6 +274,13 @@ export const StyledStrong = styled.strong<{ theme: Theme }>\`
   font-weight: 600;
   \${({ theme }) => styledStrong(theme)};
   color: \${({ theme }) => theme.colors.accentStrong};
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+
+  & svg {
+    flex-shrink: 0;
+  }
 \`;
 
 export const StyledSidebarListItem = styled.li\`
@@ -279,28 +289,136 @@ export const StyledSidebarListItem = styled.li\`
   clear: both;
 \`;
 
-export const StyledSidebarListItemLink = styled(Link)<Props>\`
+// Shared appearance for every sidebar row - leaf links AND nested group
+// headers - so hover, active state, and the left rail read identically.
+const sidebarRowStyles = css<Props>\`
   text-decoration: none;
   font-size: \${({ theme }) => theme.fontSizes.small.lg};
   line-height: 1.6;
   color: \${({ theme }) => theme.colors.accentMuted};
   padding: 5px 0 5px 20px;
   display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
   transition: all 0.3s ease;
   border-left: solid 1px \${({ theme }) => theme.colors.grayLight};
 
+  & svg {
+    flex-shrink: 0;
+  }
+
   &:hover {
     color: \${({ theme }) => theme.colors.accent};
     border-color: \${({ theme }) => theme.colors.primary};
   }
 
+  \${focusRing};
+
   \${({ $isActive, theme }) =>
     $isActive &&
-    \`
-			color: \${theme.colors.accentStrong};
-			border-color: \${theme.colors.primary};
-			font-weight: 600;
-	\`};
+    css\`
+      color: \${theme.colors.accentStrong};
+      border-color: \${theme.colors.primary};
+      font-weight: 600;
+    \`};
+\`;
+
+// The collapse chevron points right when closed and rotates to point down
+// when the group is open.
+const sidebarChevron = css<Props>\`
+  & .lucide-chevron-right {
+    margin-left: auto;
+    transition: transform 0.3s ease;
+
+    \${({ $isOpen }) =>
+      $isOpen &&
+      css\`
+        transform: rotate(90deg);
+      \`}
+  }
+\`;
+
+export const StyledSidebarListItemLink = styled(Link)<Props>\`
+  \${sidebarRowStyles};
+\`;
+
+// Nested navigation group. The header shares the link appearance/hover; a
+// non-navigable group is a single toggle button, while a group that is also a
+// page pairs a link with a chevron toggle. Children live in
+// StyledSidebarGroupContent, which animates open/closed via height 0 <-> auto
+// (enabled by interpolate-size in GlobalStyles, same as the Accordion).
+export const StyledSidebarGroupButton = styled.button<Props>\`
+  \${resetButton};
+  \${sidebarRowStyles};
+  \${sidebarChevron};
+  width: 100%;
+  text-align: left;
+\`;
+
+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)\`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+  color: inherit;
+  text-decoration: none;
+
+  & svg {
+    flex-shrink: 0;
+  }
+
+  /* Ring is drawn on the parent row via :has(:focus-visible). */
+  &:focus-visible {
+    outline: none;
+  }
+\`;
+
+export const StyledSidebarGroupChevron = styled.button\`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 0;
+  border: 0;
+  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>\`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  height: 0;
+  overflow: clip;
+  transition: all 0.3s ease;
+
+  \${({ $isOpen }) =>
+    $isOpen &&
+    css\`
+      height: auto;
+    \`}
 \`;
 
 export const StyleMobileBar = styled.button<Props>\`

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

@@ -1 +1 @@
-export declare const docsNavigationTemplate = "\"use client\";\nimport { useContext } from \"react\";\nimport { usePathname } from \"next/navigation\";\nimport Link from \"next/link\";\nimport styled, { css } from \"styled-components\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { interactiveStyles } from \"@/components/layout/SharedStyled\";\nimport { ChatContext } from \"@/components/Chat\";\n\nconst StyledNavigationWrapper = styled.div<{\n  $isChatOpen?: boolean;\n}>`\n  transition: all 0.3s ease;\n  padding: 0 20px 100px 20px;\n  ${mq(\"lg\")} {\n    padding: 0 300px 80px 300px;\n    ${({ $isChatOpen }) =>\n      $isChatOpen &&\n      css`\n        padding: 0 440px 80px 300px;\n      `}\n  }\n`;\n\nconst StyledNavigationInner = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 20px;\n  max-width: 640px;\n  margin: auto;\n`;\n\nconst StyledNavButton = styled(Link)<{ theme: Theme }>`\n  ${interactiveStyles};\n  display: flex;\n  flex-direction: column;\n  text-decoration: none;\n  padding: 20px;\n  flex: 50%;\n  max-width: 50%;\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  color: ${({ theme }) => theme.colors.dark};\n\n  &:hover {\n    border-color: ${({ theme }) => theme.colors.primary};\n  }\n\n  &[data-direction=\"prev\"] {\n    align-items: flex-start;\n  }\n\n  &[data-direction=\"next\"] {\n    align-items: flex-end;\n    margin-left: auto;\n    text-align: right;\n  }\n`;\n\nconst StyledNavLabel = styled.span<{ theme: Theme }>`\n  color: ${({ theme }) => theme.colors.grayDark};\n  display: flex;\n  flex-direction: row;\n  gap: 4px;\n\n  & svg {\n    margin: auto 0;\n  }\n`;\n\nconst StyledNavTitle = styled.span<{ theme: Theme }>`\n  color: ${({ theme }) => theme.colors.dark};\n  font-weight: 600;\n  margin: 0 0 4px 0;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  max-width: 100%;\n`;\n\nconst StyledSpacer = styled.div`\n  flex: 1;\n`;\n\ninterface Page {\n  slug: string;\n  title: string;\n  category?: string;\n  [key: string]: unknown;\n}\n\ninterface NavigationItem {\n  category?: string;\n  slug?: string;\n  title?: string;\n  links?: Page[];\n  items?: Page[];\n  [key: string]: unknown;\n}\n\ninterface DocsNavigationProps {\n  result: NavigationItem[];\n}\n\nfunction DocsNavigation({ result }: DocsNavigationProps) {\n  const { isOpen } = useContext(ChatContext);\n  const pathname = usePathname();\n  const allPages: Page[] = result.flatMap((item) => {\n    if (item.links && Array.isArray(item.links)) {\n      return item.links;\n    }\n    if (item.items && Array.isArray(item.items)) {\n      return item.items;\n    }\n    if (item.slug !== undefined) {\n      return [item as Page];\n    }\n    return [];\n  });\n  const currentSlug = pathname.replace(/^\\//, \"\").replace(/\\/$/, \"\");\n  const currentIndex = allPages.findIndex((page) => page.slug === currentSlug);\n  const prevPage = currentIndex > 0 ? allPages[currentIndex - 1] : null;\n  const nextPage =\n    currentIndex < allPages.length - 1 ? allPages[currentIndex + 1] : null;\n  if (currentIndex === -1 || allPages.length === 0) {\n    return null;\n  }\n  if (!prevPage && !nextPage) {\n    return null;\n  }\n  return (\n    <StyledNavigationWrapper $isChatOpen={isOpen}>\n      <StyledNavigationInner>\n        {prevPage ? (\n          <StyledNavButton href={`/${prevPage.slug}`} data-direction=\"prev\">\n            <StyledNavTitle>{prevPage.title}</StyledNavTitle>\n            <StyledNavLabel>\n              <Icon name=\"arrow-left\" size={16} /> Previous\n            </StyledNavLabel>\n          </StyledNavButton>\n        ) : (\n          <StyledSpacer />\n        )}\n        {nextPage && (\n          <StyledNavButton href={`/${nextPage.slug}`} data-direction=\"next\">\n            <StyledNavTitle>{nextPage.title}</StyledNavTitle>\n            <StyledNavLabel>\n              Next <Icon name=\"arrow-right\" size={16} />\n            </StyledNavLabel>\n          </StyledNavButton>\n        )}\n      </StyledNavigationInner>\n    </StyledNavigationWrapper>\n  );\n}\n\nexport { DocsNavigation };\n";
+export declare const docsNavigationTemplate = "\"use client\";\nimport { useContext } from \"react\";\nimport { usePathname } from \"next/navigation\";\nimport Link from \"next/link\";\nimport styled, { css } from \"styled-components\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { interactiveStyles } from \"@/components/layout/SharedStyled\";\nimport { ChatContext } from \"@/components/Chat\";\n\nconst StyledNavigationWrapper = styled.div<{\n  $isChatOpen?: boolean;\n}>`\n  transition: all 0.3s ease;\n  padding: 0 20px 100px 20px;\n  ${mq(\"lg\")} {\n    padding: 0 300px 80px 300px;\n    ${({ $isChatOpen }) =>\n      $isChatOpen &&\n      css`\n        padding: 0 440px 80px 300px;\n      `}\n  }\n`;\n\nconst StyledNavigationInner = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 20px;\n  max-width: 640px;\n  margin: auto;\n`;\n\nconst StyledNavButton = styled(Link)<{ theme: Theme }>`\n  ${interactiveStyles};\n  display: flex;\n  flex-direction: column;\n  text-decoration: none;\n  padding: 20px;\n  flex: 50%;\n  max-width: 50%;\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  color: ${({ theme }) => theme.colors.dark};\n\n  &:hover {\n    border-color: ${({ theme }) => theme.colors.primary};\n  }\n\n  &[data-direction=\"prev\"] {\n    align-items: flex-start;\n  }\n\n  &[data-direction=\"next\"] {\n    align-items: flex-end;\n    margin-left: auto;\n    text-align: right;\n  }\n`;\n\nconst StyledNavLabel = styled.span<{ theme: Theme }>`\n  color: ${({ theme }) => theme.colors.grayDark};\n  display: flex;\n  flex-direction: row;\n  gap: 4px;\n\n  & svg {\n    margin: auto 0;\n  }\n`;\n\nconst StyledNavTitle = styled.span<{ theme: Theme }>`\n  color: ${({ theme }) => theme.colors.dark};\n  font-weight: 600;\n  margin: 0 0 4px 0;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  max-width: 100%;\n`;\n\nconst StyledSpacer = styled.div`\n  flex: 1;\n`;\n\ninterface Page {\n  // Optional: nested group nodes may act as headers without their own page.\n  // collectPages() only pushes nodes that actually have a slug.\n  slug?: string;\n  title: string;\n  category?: string;\n  links?: Page[];\n  items?: Page[];\n  [key: string]: unknown;\n}\n\ninterface NavigationItem {\n  category?: string;\n  slug?: string;\n  title?: string;\n  links?: Page[];\n  items?: Page[];\n  [key: string]: unknown;\n}\n\ninterface DocsNavigationProps {\n  result: NavigationItem[];\n}\n\nfunction DocsNavigation({ result }: DocsNavigationProps) {\n  const { isOpen } = useContext(ChatContext);\n  const pathname = usePathname();\n  // Walk categories and any nested link groups depth-first so prev/next spans\n  // every real page (a node with a slug), in reading order.\n  const collectPages = (nodes: unknown): Page[] => {\n    if (!Array.isArray(nodes)) return [];\n    const pages: Page[] = [];\n    for (const node of nodes as Page[]) {\n      if (node && node.slug !== undefined) {\n        pages.push(node);\n      }\n      const children = node && ((node.links ?? node.items) as unknown);\n      if (Array.isArray(children)) {\n        pages.push(...collectPages(children));\n      }\n    }\n    return pages;\n  };\n  const allPages: Page[] = result.flatMap((item) =>\n    collectPages(\n      item.links ??\n        item.items ??\n        (item.slug !== undefined ? [item as Page] : []),\n    ),\n  );\n  const currentSlug = pathname.replace(/^\\//, \"\").replace(/\\/$/, \"\");\n  const currentIndex = allPages.findIndex((page) => page.slug === currentSlug);\n  const prevPage = currentIndex > 0 ? allPages[currentIndex - 1] : null;\n  const nextPage =\n    currentIndex < allPages.length - 1 ? allPages[currentIndex + 1] : null;\n  if (currentIndex === -1 || allPages.length === 0) {\n    return null;\n  }\n  if (!prevPage && !nextPage) {\n    return null;\n  }\n  return (\n    <StyledNavigationWrapper $isChatOpen={isOpen}>\n      <StyledNavigationInner>\n        {prevPage ? (\n          <StyledNavButton href={`/${prevPage.slug}`} data-direction=\"prev\">\n            <StyledNavTitle>{prevPage.title}</StyledNavTitle>\n            <StyledNavLabel>\n              <Icon name=\"arrow-left\" size={16} /> Previous\n            </StyledNavLabel>\n          </StyledNavButton>\n        ) : (\n          <StyledSpacer />\n        )}\n        {nextPage && (\n          <StyledNavButton href={`/${nextPage.slug}`} data-direction=\"next\">\n            <StyledNavTitle>{nextPage.title}</StyledNavTitle>\n            <StyledNavLabel>\n              Next <Icon name=\"arrow-right\" size={16} />\n            </StyledNavLabel>\n          </StyledNavButton>\n        )}\n      </StyledNavigationInner>\n    </StyledNavigationWrapper>\n  );\n}\n\nexport { DocsNavigation };\n";

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

@@ -86,9 +86,13 @@ const StyledSpacer = styled.div\`
 \`;
 
 interface Page {
-  slug: string;
+  // Optional: nested group nodes may act as headers without their own page.
+  // collectPages() only pushes nodes that actually have a slug.
+  slug?: string;
   title: string;
   category?: string;
+  links?: Page[];
+  items?: Page[];
   [key: string]: unknown;
 }
 
@@ -108,18 +112,29 @@ interface DocsNavigationProps {
 function DocsNavigation({ result }: DocsNavigationProps) {
   const { isOpen } = useContext(ChatContext);
   const pathname = usePathname();
-  const allPages: Page[] = result.flatMap((item) => {
-    if (item.links && Array.isArray(item.links)) {
-      return item.links;
+  // Walk categories and any nested link groups depth-first so prev/next spans
+  // every real page (a node with a slug), in reading order.
+  const collectPages = (nodes: unknown): Page[] => {
+    if (!Array.isArray(nodes)) return [];
+    const pages: Page[] = [];
+    for (const node of nodes as Page[]) {
+      if (node && node.slug !== undefined) {
+        pages.push(node);
+      }
+      const children = node && ((node.links ?? node.items) as unknown);
+      if (Array.isArray(children)) {
+        pages.push(...collectPages(children));
+      }
     }
-    if (item.items && Array.isArray(item.items)) {
-      return item.items;
-    }
-    if (item.slug !== undefined) {
-      return [item as Page];
-    }
-    return [];
-  });
+    return pages;
+  };
+  const allPages: Page[] = result.flatMap((item) =>
+    collectPages(
+      item.links ??
+        item.items ??
+        (item.slug !== undefined ? [item as Page] : []),
+    ),
+  );
   const currentSlug = pathname.replace(/^\\//, "").replace(/\\/$/, "");
   const currentIndex = allPages.findIndex((page) => page.slug === currentSlug);
   const prevPage = currentIndex > 0 ? allPages[currentIndex - 1] : null;

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/Slug.d.ts

@@ -0,0 +1 @@
+export declare const slugTemplate = "// Shared heading/anchor id helpers.\n//\n// `slugify` turns heading text into a URL-safe base slug. `createSlugger`\n// wraps it with occurrence-based de-duplication so repeated heading text\n// yields stable, unique ids (\"setup\", \"setup-1\", \"setup-2\", ...) matching\n// the scheme used by GitHub and rehype-slug.\n//\n// The index sidebar (components/Docs.tsx) and the rendered headings\n// (components/MDXComponents.tsx, components/layout/Update.tsx) must walk the\n// document in the same order with a shared slugger so every sidebar link\n// resolves to exactly one heading.\n\nexport function slugify(text: string): string {\n  return text\n    .toLowerCase()\n    .replace(/[^\\w\\s-]/g, \"\")\n    .replace(/\\s+/g, \"-\")\n    .trim();\n}\n\nexport type Slugger = (text: string) => string;\n\nexport function createSlugger(): Slugger {\n  const seen = new Map<string, number>();\n  return (text: string) => {\n    const base = slugify(text);\n    const count = seen.get(base) ?? 0;\n    seen.set(base, count + 1);\n    return count === 0 ? base : `${base}-${count}`;\n  };\n}\n";

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

@@ -0,0 +1,32 @@
+export const slugTemplate = `// Shared heading/anchor id helpers.
+//
+// \`slugify\` turns heading text into a URL-safe base slug. \`createSlugger\`
+// wraps it with occurrence-based de-duplication so repeated heading text
+// yields stable, unique ids ("setup", "setup-1", "setup-2", ...) matching
+// the scheme used by GitHub and rehype-slug.
+//
+// The index sidebar (components/Docs.tsx) and the rendered headings
+// (components/MDXComponents.tsx, components/layout/Update.tsx) must walk the
+// document in the same order with a shared slugger so every sidebar link
+// resolves to exactly one heading.
+
+export function slugify(text: string): string {
+  return text
+    .toLowerCase()
+    .replace(/[^\\w\\s-]/g, "")
+    .replace(/\\s+/g, "-")
+    .trim();
+}
+
+export type Slugger = (text: string) => string;
+
+export function createSlugger(): Slugger {
+  const seen = new Map<string, number>();
+  return (text: string) => {
+    const base = slugify(text);
+    const count = seen.get(base) ?? 0;
+    seen.set(base, count + 1);
+    return count === 0 ? base : \`\${base}-\${count}\`;
+  };
+}
+`;

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/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 React, { useState, ReactNode } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { thinScrollbar } from \"@/components/layout/SharedStyled\";\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  ${thinScrollbar};\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";
+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\";\nimport { thinScrollbar } from \"@/components/layout/SharedStyled\";\nimport { Icon } from \"@/components/layout/Icon\";\ninterface TabContentProps {\n  title: string;\n  icon?: 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  ${thinScrollbar};\n`;\nconst TabButton = styled.button<{ theme: Theme; $isActive?: boolean }>`\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\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\n  & svg {\n    flex-shrink: 0;\n  }\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.icon && <Icon name={tab.props.icon} size={18} />}\n            {tab.props.title}\n          </TabButton>\n        ))}\n      </TabsList>\n      <TabPanel>{tabs[activeTab]?.props.children}</TabPanel>\n    </TabsContainer>\n  );\n};\nexport { Tabs, TabContent };\n";