doccupine 0.0.87 → 0.0.89

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

@@ -1 +1 @@
-export declare const demoThemeTemplate = "\"use client\";\nimport { Button } from \"@/components/layout/Button\";\nimport { useThemeOverride } from \"@/components/layout/ClientThemeProvider\";\nimport { Theme, theme, themeDark } from \"@/app/theme\";\nimport { Columns } from \"@/components/layout/Columns\";\n\ninterface DemoThemeProps {\n  variant: \"purple\" | \"green\" | \"yellow\";\n}\n\nfunction DemoTheme({ variant }: DemoThemeProps) {\n  const { setTheme } = useThemeOverride();\n\n  const purpleLight: Theme = {\n    ...theme,\n    colors: {\n      primaryLight: \"#c4b5fd\",\n      primary: \"#8b5cf6\",\n      primaryDark: \"#5b21b6\",\n      secondaryLight: \"#86efac\",\n      secondary: \"#22c55e\",\n      secondaryDark: \"#15803d\",\n      tertiaryLight: \"#fbbf24\",\n      tertiary: \"#f59e0b\",\n      tertiaryDark: \"#d97706\",\n      grayLight: \"#f3f4f6\",\n      gray: \"#9ca3af\",\n      grayDark: \"#374151\",\n      success: \"#10b981\",\n      error: \"#f43f5e\",\n      warning: \"#f59e0b\",\n      info: \"#3b82f6\",\n      dark: \"#000000\",\n      light: \"#ffffff\",\n    },\n  };\n\n  const purpleDark: Theme = {\n    ...themeDark,\n    colors: {\n      primaryLight: \"#ddd6fe\",\n      primary: \"#a78bfa\",\n      primaryDark: \"#7c3aed\",\n      secondaryLight: \"#6ee7b7\",\n      secondary: \"#10b981\",\n      secondaryDark: \"#065f46\",\n      tertiaryLight: \"#fed7aa\",\n      tertiary: \"#fb923c\",\n      tertiaryDark: \"#ea580c\",\n      grayLight: \"#1f2937\",\n      gray: \"#6b7280\",\n      grayDark: \"#9ca3af\",\n      success: \"#10b981\",\n      error: \"#f43f5e\",\n      warning: \"#f59e0b\",\n      info: \"#3b82f6\",\n      dark: \"#ffffff\",\n      light: \"#000000\",\n    },\n  };\n\n  const greenLight: Theme = {\n    ...theme,\n    colors: {\n      primaryLight: \"#86efac\",\n      primary: \"#22c55e\",\n      primaryDark: \"#15803d\",\n      secondaryLight: \"#c4b5fd\",\n      secondary: \"#8b5cf6\",\n      secondaryDark: \"#5b21b6\",\n      tertiaryLight: \"#fbbf24\",\n      tertiary: \"#f59e0b\",\n      tertiaryDark: \"#d97706\",\n      grayLight: \"#f3f4f6\",\n      gray: \"#9ca3af\",\n      grayDark: \"#374151\",\n      success: \"#10b981\",\n      error: \"#f43f5e\",\n      warning: \"#f59e0b\",\n      info: \"#3b82f6\",\n      dark: \"#000000\",\n      light: \"#ffffff\",\n    },\n  };\n\n  const greenDark: Theme = {\n    ...themeDark,\n    colors: {\n      primaryLight: \"#6ee7b7\",\n      primary: \"#10b981\",\n      primaryDark: \"#065f46\",\n      secondaryLight: \"#ddd6fe\",\n      secondary: \"#a78bfa\",\n      secondaryDark: \"#7c3aed\",\n      tertiaryLight: \"#fed7aa\",\n      tertiary: \"#fb923c\",\n      tertiaryDark: \"#ea580c\",\n      grayLight: \"#1f2937\",\n      gray: \"#6b7280\",\n      grayDark: \"#9ca3af\",\n      success: \"#10b981\",\n      error: \"#f43f5e\",\n      warning: \"#f59e0b\",\n      info: \"#3b82f6\",\n      dark: \"#ffffff\",\n      light: \"#000000\",\n    },\n  };\n\n  const yellowLight: Theme = {\n    ...theme,\n    colors: {\n      primaryLight: \"#fbbf24\",\n      primary: \"#f59e0b\",\n      primaryDark: \"#d97706\",\n      secondaryLight: \"#c4b5fd\",\n      secondary: \"#8b5cf6\",\n      secondaryDark: \"#5b21b6\",\n      tertiaryLight: \"#86efac\",\n      tertiary: \"#22c55e\",\n      tertiaryDark: \"#15803d\",\n      grayLight: \"#f3f4f6\",\n      gray: \"#9ca3af\",\n      grayDark: \"#374151\",\n      success: \"#10b981\",\n      error: \"#f43f5e\",\n      warning: \"#f59e0b\",\n      info: \"#3b82f6\",\n      dark: \"#000000\",\n      light: \"#ffffff\",\n    },\n  };\n\n  const yellowDark: Theme = {\n    ...themeDark,\n    colors: {\n      primaryLight: \"#fed7aa\",\n      primary: \"#fb923c\",\n      primaryDark: \"#ea580c\",\n      secondaryLight: \"#ddd6fe\",\n      secondary: \"#a78bfa\",\n      secondaryDark: \"#7c3aed\",\n      tertiaryLight: \"#6ee7b7\",\n      tertiary: \"#10b981\",\n      tertiaryDark: \"#065f46\",\n      grayLight: \"#1f2937\",\n      gray: \"#6b7280\",\n      grayDark: \"#9ca3af\",\n      success: \"#10b981\",\n      error: \"#f43f5e\",\n      warning: \"#f59e0b\",\n      info: \"#3b82f6\",\n      dark: \"#ffffff\",\n      light: \"#000000\",\n    },\n  };\n\n  if (variant === \"purple\") {\n    return (\n      <Columns cols={2}>\n        <Button onClick={() => setTheme(purpleLight)} icon=\"sun\" fullWidth>\n          Demo Purple Light\n        </Button>\n        <Button\n          outline\n          onClick={() => setTheme(purpleDark)}\n          icon=\"moon-star\"\n          fullWidth\n        >\n          Demo Purple Dark\n        </Button>\n      </Columns>\n    );\n  }\n\n  if (variant === \"green\") {\n    return (\n      <Columns cols={2}>\n        <Button onClick={() => setTheme(greenLight)} icon=\"sun\" fullWidth>\n          Demo Green Light\n        </Button>\n        <Button\n          outline\n          onClick={() => setTheme(greenDark)}\n          icon=\"moon-star\"\n          fullWidth\n        >\n          Demo Green Dark\n        </Button>\n      </Columns>\n    );\n  }\n\n  if (variant === \"yellow\") {\n    return (\n      <Columns cols={2}>\n        <Button onClick={() => setTheme(yellowLight)} icon=\"sun\" fullWidth>\n          Demo Yellow Light\n        </Button>\n        <Button\n          outline\n          onClick={() => setTheme(yellowDark)}\n          icon=\"moon-star\"\n          fullWidth\n        >\n          Demo Yellow Dark\n        </Button>\n      </Columns>\n    );\n  }\n\n  return (\n    <Columns cols={2}>\n      <Button onClick={() => setTheme(null)} fullWidth>\n        Reset to Default\n      </Button>\n    </Columns>\n  );\n}\n\nexport { DemoTheme };\n";
+export declare const demoThemeTemplate = "\"use client\";\nimport { Button } from \"@/components/layout/Button\";\nimport { useThemeOverride } from \"@/components/layout/ClientThemeProvider\";\nimport { Columns } from \"@/components/layout/Columns\";\n\ninterface DemoThemeProps {\n  variant: \"purple\" | \"green\" | \"yellow\";\n}\n\ntype Palette = Record<string, string>;\n\n// Each preset is light + dark color overrides applied directly to CSS custom\n// properties on <html>. This mirrors what a user editing theme.json would see:\n// the variable names are identical, the variables flip light vs dark via the\n// \"dark\" class on <html>, and Reset clears the overrides so the defaults take\n// over again.\nconst PRESETS: Record<\n  DemoThemeProps[\"variant\"],\n  { light: Palette; dark: Palette; label: string }\n> = {\n  purple: {\n    label: \"Purple\",\n    light: {\n      primaryLight: \"#c4b5fd\",\n      primary: \"#8b5cf6\",\n      primaryDark: \"#5b21b6\",\n    },\n    dark: {\n      primaryLight: \"#ddd6fe\",\n      primary: \"#a78bfa\",\n      primaryDark: \"#7c3aed\",\n    },\n  },\n  green: {\n    label: \"Green\",\n    light: {\n      primaryLight: \"#86efac\",\n      primary: \"#22c55e\",\n      primaryDark: \"#15803d\",\n    },\n    dark: {\n      primaryLight: \"#6ee7b7\",\n      primary: \"#10b981\",\n      primaryDark: \"#065f46\",\n    },\n  },\n  yellow: {\n    label: \"Yellow\",\n    light: {\n      primaryLight: \"#fbbf24\",\n      primary: \"#f59e0b\",\n      primaryDark: \"#d97706\",\n    },\n    dark: {\n      primaryLight: \"#fed7aa\",\n      primary: \"#fb923c\",\n      primaryDark: \"#ea580c\",\n    },\n  },\n};\n\nconst PRESET_KEYS = [\"primaryLight\", \"primary\", \"primaryDark\"] as const;\n\nfunction applyPreset(palette: Palette) {\n  const root = document.documentElement;\n  for (const key of PRESET_KEYS) {\n    if (palette[key]) root.style.setProperty(`--color-${key}`, palette[key]);\n  }\n}\n\nfunction clearPreset() {\n  const root = document.documentElement;\n  for (const key of PRESET_KEYS) {\n    root.style.removeProperty(`--color-${key}`);\n  }\n}\n\nfunction DemoTheme({ variant }: DemoThemeProps) {\n  const { setMode } = useThemeOverride();\n  const preset = PRESETS[variant];\n\n  if (!preset) {\n    return (\n      <Columns cols={2}>\n        <Button onClick={() => clearPreset()} fullWidth>\n          Reset to Default\n        </Button>\n      </Columns>\n    );\n  }\n\n  return (\n    <Columns cols={2}>\n      <Button\n        onClick={() => {\n          applyPreset(preset.light);\n          setMode(\"light\");\n        }}\n        icon=\"sun\"\n        fullWidth\n      >\n        Demo {preset.label} Light\n      </Button>\n      <Button\n        outline\n        onClick={() => {\n          applyPreset(preset.dark);\n          setMode(\"dark\");\n        }}\n        icon=\"moon-star\"\n        fullWidth\n      >\n        Demo {preset.label} Dark\n      </Button>\n    </Columns>\n  );\n}\n\nexport { DemoTheme };\n";

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

@@ -1,209 +1,89 @@
 export const demoThemeTemplate = `"use client";
 import { Button } from "@/components/layout/Button";
 import { useThemeOverride } from "@/components/layout/ClientThemeProvider";
-import { Theme, theme, themeDark } from "@/app/theme";
 import { Columns } from "@/components/layout/Columns";
 
 interface DemoThemeProps {
   variant: "purple" | "green" | "yellow";
 }
 
-function DemoTheme({ variant }: DemoThemeProps) {
-  const { setTheme } = useThemeOverride();
+type Palette = Record<string, string>;
 
-  const purpleLight: Theme = {
-    ...theme,
-    colors: {
+// Each preset is light + dark color overrides applied directly to CSS custom
+// properties on <html>. This mirrors what a user editing theme.json would see:
+// the variable names are identical, the variables flip light vs dark via the
+// "dark" class on <html>, and Reset clears the overrides so the defaults take
+// over again.
+const PRESETS: Record<
+  DemoThemeProps["variant"],
+  { light: Palette; dark: Palette; label: string }
+> = {
+  purple: {
+    label: "Purple",
+    light: {
       primaryLight: "#c4b5fd",
       primary: "#8b5cf6",
       primaryDark: "#5b21b6",
-      secondaryLight: "#86efac",
-      secondary: "#22c55e",
-      secondaryDark: "#15803d",
-      tertiaryLight: "#fbbf24",
-      tertiary: "#f59e0b",
-      tertiaryDark: "#d97706",
-      grayLight: "#f3f4f6",
-      gray: "#9ca3af",
-      grayDark: "#374151",
-      success: "#10b981",
-      error: "#f43f5e",
-      warning: "#f59e0b",
-      info: "#3b82f6",
-      dark: "#000000",
-      light: "#ffffff",
     },
-  };
-
-  const purpleDark: Theme = {
-    ...themeDark,
-    colors: {
+    dark: {
       primaryLight: "#ddd6fe",
       primary: "#a78bfa",
       primaryDark: "#7c3aed",
-      secondaryLight: "#6ee7b7",
-      secondary: "#10b981",
-      secondaryDark: "#065f46",
-      tertiaryLight: "#fed7aa",
-      tertiary: "#fb923c",
-      tertiaryDark: "#ea580c",
-      grayLight: "#1f2937",
-      gray: "#6b7280",
-      grayDark: "#9ca3af",
-      success: "#10b981",
-      error: "#f43f5e",
-      warning: "#f59e0b",
-      info: "#3b82f6",
-      dark: "#ffffff",
-      light: "#000000",
     },
-  };
-
-  const greenLight: Theme = {
-    ...theme,
-    colors: {
+  },
+  green: {
+    label: "Green",
+    light: {
       primaryLight: "#86efac",
       primary: "#22c55e",
       primaryDark: "#15803d",
-      secondaryLight: "#c4b5fd",
-      secondary: "#8b5cf6",
-      secondaryDark: "#5b21b6",
-      tertiaryLight: "#fbbf24",
-      tertiary: "#f59e0b",
-      tertiaryDark: "#d97706",
-      grayLight: "#f3f4f6",
-      gray: "#9ca3af",
-      grayDark: "#374151",
-      success: "#10b981",
-      error: "#f43f5e",
-      warning: "#f59e0b",
-      info: "#3b82f6",
-      dark: "#000000",
-      light: "#ffffff",
     },
-  };
-
-  const greenDark: Theme = {
-    ...themeDark,
-    colors: {
+    dark: {
       primaryLight: "#6ee7b7",
       primary: "#10b981",
       primaryDark: "#065f46",
-      secondaryLight: "#ddd6fe",
-      secondary: "#a78bfa",
-      secondaryDark: "#7c3aed",
-      tertiaryLight: "#fed7aa",
-      tertiary: "#fb923c",
-      tertiaryDark: "#ea580c",
-      grayLight: "#1f2937",
-      gray: "#6b7280",
-      grayDark: "#9ca3af",
-      success: "#10b981",
-      error: "#f43f5e",
-      warning: "#f59e0b",
-      info: "#3b82f6",
-      dark: "#ffffff",
-      light: "#000000",
     },
-  };
-
-  const yellowLight: Theme = {
-    ...theme,
-    colors: {
+  },
+  yellow: {
+    label: "Yellow",
+    light: {
       primaryLight: "#fbbf24",
       primary: "#f59e0b",
       primaryDark: "#d97706",
-      secondaryLight: "#c4b5fd",
-      secondary: "#8b5cf6",
-      secondaryDark: "#5b21b6",
-      tertiaryLight: "#86efac",
-      tertiary: "#22c55e",
-      tertiaryDark: "#15803d",
-      grayLight: "#f3f4f6",
-      gray: "#9ca3af",
-      grayDark: "#374151",
-      success: "#10b981",
-      error: "#f43f5e",
-      warning: "#f59e0b",
-      info: "#3b82f6",
-      dark: "#000000",
-      light: "#ffffff",
     },
-  };
-
-  const yellowDark: Theme = {
-    ...themeDark,
-    colors: {
+    dark: {
       primaryLight: "#fed7aa",
       primary: "#fb923c",
       primaryDark: "#ea580c",
-      secondaryLight: "#ddd6fe",
-      secondary: "#a78bfa",
-      secondaryDark: "#7c3aed",
-      tertiaryLight: "#6ee7b7",
-      tertiary: "#10b981",
-      tertiaryDark: "#065f46",
-      grayLight: "#1f2937",
-      gray: "#6b7280",
-      grayDark: "#9ca3af",
-      success: "#10b981",
-      error: "#f43f5e",
-      warning: "#f59e0b",
-      info: "#3b82f6",
-      dark: "#ffffff",
-      light: "#000000",
     },
-  };
+  },
+};
 
-  if (variant === "purple") {
-    return (
-      <Columns cols={2}>
-        <Button onClick={() => setTheme(purpleLight)} icon="sun" fullWidth>
-          Demo Purple Light
-        </Button>
-        <Button
-          outline
-          onClick={() => setTheme(purpleDark)}
-          icon="moon-star"
-          fullWidth
-        >
-          Demo Purple Dark
-        </Button>
-      </Columns>
-    );
+const PRESET_KEYS = ["primaryLight", "primary", "primaryDark"] as const;
+
+function applyPreset(palette: Palette) {
+  const root = document.documentElement;
+  for (const key of PRESET_KEYS) {
+    if (palette[key]) root.style.setProperty(\`--color-\${key}\`, palette[key]);
   }
+}
 
-  if (variant === "green") {
-    return (
-      <Columns cols={2}>
-        <Button onClick={() => setTheme(greenLight)} icon="sun" fullWidth>
-          Demo Green Light
-        </Button>
-        <Button
-          outline
-          onClick={() => setTheme(greenDark)}
-          icon="moon-star"
-          fullWidth
-        >
-          Demo Green Dark
-        </Button>
-      </Columns>
-    );
+function clearPreset() {
+  const root = document.documentElement;
+  for (const key of PRESET_KEYS) {
+    root.style.removeProperty(\`--color-\${key}\`);
   }
+}
+
+function DemoTheme({ variant }: DemoThemeProps) {
+  const { setMode } = useThemeOverride();
+  const preset = PRESETS[variant];
 
-  if (variant === "yellow") {
+  if (!preset) {
     return (
       <Columns cols={2}>
-        <Button onClick={() => setTheme(yellowLight)} icon="sun" fullWidth>
-          Demo Yellow Light
-        </Button>
-        <Button
-          outline
-          onClick={() => setTheme(yellowDark)}
-          icon="moon-star"
-          fullWidth
-        >
-          Demo Yellow Dark
+        <Button onClick={() => clearPreset()} fullWidth>
+          Reset to Default
         </Button>
       </Columns>
     );
@@ -211,8 +91,26 @@ function DemoTheme({ variant }: DemoThemeProps) {
 
   return (
     <Columns cols={2}>
-      <Button onClick={() => setTheme(null)} fullWidth>
-        Reset to Default
+      <Button
+        onClick={() => {
+          applyPreset(preset.light);
+          setMode("light");
+        }}
+        icon="sun"
+        fullWidth
+      >
+        Demo {preset.label} Light
+      </Button>
+      <Button
+        outline
+        onClick={() => {
+          applyPreset(preset.dark);
+          setMode("dark");
+        }}
+        icon="moon-star"
+        fullWidth
+      >
+        Demo {preset.label} Dark
       </Button>
     </Columns>
   );

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

@@ -1 +1 @@
-export declare const docsComponentsTemplate = "\"use client\";\nimport { darken, lighten, rgba } from \"polished\";\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 }) => rgba(theme.colors.primaryLight, 0.2)};\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  $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 }) => rgba(theme.colors.primaryLight, 0.05)};\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 }) => rgba(theme.colors.primaryLight, 0.05)};\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 }) =>\n    theme.isDark\n      ? lighten(0.1, theme.colors.primaryLight)\n      : darken(0.1, theme.colors.primaryDark)};\n`;\n\nexport const StyledSidebarListItem = styled.li`\n  display: flex;\n  gap: 10px;\n  clear: both;\n`;\n\nexport const StyledSidebarListItemLink = styled(Link)<Props>`\n  text-decoration: none;\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  line-height: 1.6;\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.grayDark : theme.colors.primary};\n  padding: 5px 0 5px 20px;\n  display: flex;\n  transition: all 0.3s ease;\n  border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  &:hover {\n    color: ${({ theme }) =>\n      theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n    border-color: ${({ theme }) => theme.colors.primary};\n  }\n\n  ${({ $isActive, theme }) =>\n    $isActive &&\n    `\n\t\t\tcolor: ${theme.isDark ? lighten(0.1, theme.colors.primaryLight) : darken(0.1, theme.colors.primaryDark)};\n\t\t\tborder-color: ${theme.colors.primary};\n\t\t\tfont-weight: 600;\n\t`};\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 }) =>\n    theme.isDark ? theme.colors.dark : theme.colors.light};\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 }) =>\n      theme.isDark ? theme.colors.dark : theme.colors.light};\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 }) =>\n    theme.isDark ? theme.colors.dark : theme.colors.light};\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  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  $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`;\n\nexport const StyledSidebarListItem = styled.li`\n  display: flex;\n  gap: 10px;\n  clear: both;\n`;\n\nexport const StyledSidebarListItemLink = styled(Link)<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  transition: all 0.3s ease;\n  border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.accent};\n    border-color: ${({ theme }) => theme.colors.primary};\n  }\n\n  ${({ $isActive, theme }) =>\n    $isActive &&\n    `\n\t\t\tcolor: ${theme.colors.accentStrong};\n\t\t\tborder-color: ${theme.colors.primary};\n\t\t\tfont-weight: 600;\n\t`};\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

@@ -1,6 +1,5 @@
 import { SIDEBAR_WIDTH, CHAT_WIDTH } from "../../app/theme.js";
 export const docsComponentsTemplate = `"use client";
-import { darken, lighten, rgba } from "polished";
 import React, { createContext, useContext } from "react";
 import styled, { css } from "styled-components";
 import {
@@ -84,7 +83,8 @@ const StyledDocsContainer = styled.div<{ theme: Theme; $isChatOpen?: boolean }>\
   }
 
   & code:not([class]) {
-    background: \${({ theme }) => rgba(theme.colors.primaryLight, 0.2)};
+    background: \${({ theme }) =>
+      \`color-mix(in srgb, \${theme.colors.primaryLight} 20%, transparent)\`};
     color: \${({ theme }) => theme.colors.dark};
     padding: 2px 4px;
     border-radius: \${({ theme }) => theme.spacing.radius.xs};
@@ -152,7 +152,8 @@ export const StyledSidebar = styled.nav<Props>\`
     opacity: 1;
     pointer-events: all;
     transform: translateY(0);
-    background: \${({ theme }) => rgba(theme.colors.primaryLight, 0.05)};
+    background: \${({ theme }) =>
+      \`color-mix(in srgb, \${theme.colors.primaryLight} 5%, transparent)\`};
     top: 0;
     width: ${SIDEBAR_WIDTH}px;
   }
@@ -170,7 +171,8 @@ export const StyledSidebarFooter = styled.div\`
   padding: 22px 20px;
   position: sticky;
   border-top: 1px solid \${({ theme }) => theme.colors.grayLight};
-  background: \${({ theme }) => rgba(theme.colors.primaryLight, 0.05)};
+  background: \${({ theme }) =>
+    \`color-mix(in srgb, \${theme.colors.primaryLight} 5%, transparent)\`};
   margin: 0 -20px -20px;
   bottom: -20px;
   backdrop-filter: blur(10px);
@@ -268,10 +270,7 @@ export const StyledSidebarList = styled.ul\`
 export const StyledStrong = styled.strong<{ theme: Theme }>\`
   font-weight: 600;
   \${({ theme }) => styledStrong(theme)};
-  color: \${({ theme }) =>
-    theme.isDark
-      ? lighten(0.1, theme.colors.primaryLight)
-      : darken(0.1, theme.colors.primaryDark)};
+  color: \${({ theme }) => theme.colors.accentStrong};
 \`;
 
 export const StyledSidebarListItem = styled.li\`
@@ -284,23 +283,21 @@ export const StyledSidebarListItemLink = styled(Link)<Props>\`
   text-decoration: none;
   font-size: \${({ theme }) => theme.fontSizes.small.lg};
   line-height: 1.6;
-  color: \${({ theme }) =>
-    theme.isDark ? theme.colors.grayDark : theme.colors.primary};
+  color: \${({ theme }) => theme.colors.accentMuted};
   padding: 5px 0 5px 20px;
   display: flex;
   transition: all 0.3s ease;
   border-left: solid 1px \${({ theme }) => theme.colors.grayLight};
 
   &:hover {
-    color: \${({ theme }) =>
-      theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};
+    color: \${({ theme }) => theme.colors.accent};
     border-color: \${({ theme }) => theme.colors.primary};
   }
 
   \${({ $isActive, theme }) =>
     $isActive &&
     \`
-			color: \${theme.isDark ? lighten(0.1, theme.colors.primaryLight) : darken(0.1, theme.colors.primaryDark)};
+			color: \${theme.colors.accentStrong};
 			border-color: \${theme.colors.primary};
 			font-weight: 600;
 	\`};
@@ -316,8 +313,7 @@ export const StyleMobileBar = styled.button<Props>\`
   line-height: \${({ theme }) => theme.fontSizes.strong.lg};
   box-shadow: \${({ theme }) => theme.shadows.sm};
   background: \${({ theme }) => theme.colors.primary};
-  color: \${({ theme }) =>
-    theme.isDark ? theme.colors.dark : theme.colors.light};
+  color: \${({ theme }) => theme.colors.surface};
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   padding: 10px;
@@ -354,8 +350,7 @@ export const StyledMobileBurger = styled.span<Props>\`
     width: 18px;
     height: 3px;
     border-radius: 3px;
-    background: \${({ theme }) =>
-      theme.isDark ? theme.colors.dark : theme.colors.light};
+    background: \${({ theme }) => theme.colors.surface};
     transition: all 0.3s ease;
   }
 
@@ -385,8 +380,7 @@ export const StyledMissingComponent = styled.div\`
   border-radius: \${({ theme }) => theme.spacing.radius.lg};
   padding: 20px;
   font-size: \${({ theme }) => theme.fontSizes.small.lg};
-  color: \${({ theme }) =>
-    theme.isDark ? theme.colors.dark : theme.colors.light};
+  color: \${({ theme }) => theme.colors.surface};
   font-weight: 600;
   display: flex;
   gap: 10px;

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

@@ -1 +1 @@
-export declare const fieldTemplate = "\"use client\";\nimport styled from \"styled-components\";\nimport { styledSmall, Theme } from \"cherry-styled-components\";\nimport { rgba } from \"polished\";\n\nconst StyledField = styled.div<{ theme: Theme; $columns?: number }>`\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n  padding: 0 0 20px 0;\n  color: ${({ theme }) => theme.colors.grayDark};\n`;\n\nconst StyledFieldFlex = styled.div<{ theme: Theme }>`\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  ${({ theme }) => styledSmall(theme)};\n  padding: 0 0 15px 0;\n`;\n\nconst StyledFieldValue = styled.span<{ theme: Theme }>`\n  color: ${({ theme }) => theme.colors.primary};\n  font-family: ${({ theme }) => theme.fonts.mono};\n  font-weight: 600;\n`;\n\nconst StyledFieldType = styled.span<{ theme: Theme }>`\n  background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.2)};\n  color: ${({ theme }) => theme.colors.dark};\n  padding: 0 4px;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n`;\n\nconst StyledFieldRequired = styled.span<{ theme: Theme }>`\n  background: ${({ theme }) => rgba(theme.colors.error, 0.2)};\n  color: ${({ theme }) => theme.colors.error};\n  padding: 0 4px;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n`;\n\ninterface FieldProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  value: string;\n  type: string;\n  required?: boolean;\n}\n\nfunction Field({ children, value, type, required }: FieldProps) {\n  return (\n    <StyledField>\n      <StyledFieldFlex>\n        <StyledFieldValue>{value}</StyledFieldValue>\n        <StyledFieldType>{type}</StyledFieldType>\n        {required && <StyledFieldRequired>required</StyledFieldRequired>}\n      </StyledFieldFlex>\n      {children}\n    </StyledField>\n  );\n}\n\nexport { Field };\n";
+export declare const fieldTemplate = "\"use client\";\nimport styled from \"styled-components\";\nimport { styledSmall } from \"cherry-styled-components\";\nimport { Theme } from \"@/app/theme\";\n\nconst StyledField = styled.div<{ theme: Theme; $columns?: number }>`\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n  padding: 0 0 20px 0;\n  color: ${({ theme }) => theme.colors.grayDark};\n`;\n\nconst StyledFieldFlex = styled.div<{ theme: Theme }>`\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  ${({ theme }) => styledSmall(theme)};\n  padding: 0 0 15px 0;\n`;\n\nconst StyledFieldValue = styled.span<{ theme: Theme }>`\n  color: ${({ theme }) => theme.colors.primary};\n  font-family: ${({ theme }) => theme.fonts.mono};\n  font-weight: 600;\n`;\n\nconst StyledFieldType = styled.span<{ theme: Theme }>`\n  background: ${({ theme }) =>\n    `color-mix(in srgb, ${theme.colors.primaryLight} 20%, transparent)`};\n  color: ${({ theme }) => theme.colors.dark};\n  padding: 0 4px;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n`;\n\nconst StyledFieldRequired = styled.span<{ theme: Theme }>`\n  background: ${({ theme }) =>\n    `color-mix(in srgb, ${theme.colors.error} 20%, transparent)`};\n  color: ${({ theme }) => theme.colors.error};\n  padding: 0 4px;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n`;\n\ninterface FieldProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  value: string;\n  type: string;\n  required?: boolean;\n}\n\nfunction Field({ children, value, type, required }: FieldProps) {\n  return (\n    <StyledField>\n      <StyledFieldFlex>\n        <StyledFieldValue>{value}</StyledFieldValue>\n        <StyledFieldType>{type}</StyledFieldType>\n        {required && <StyledFieldRequired>required</StyledFieldRequired>}\n      </StyledFieldFlex>\n      {children}\n    </StyledField>\n  );\n}\n\nexport { Field };\n";

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

@@ -1,7 +1,7 @@
 export const fieldTemplate = `"use client";
 import styled from "styled-components";
-import { styledSmall, Theme } from "cherry-styled-components";
-import { rgba } from "polished";
+import { styledSmall } from "cherry-styled-components";
+import { Theme } from "@/app/theme";
 
 const StyledField = styled.div<{ theme: Theme; $columns?: number }>\`
   border-bottom: solid 1px \${({ theme }) => theme.colors.grayLight};
@@ -24,7 +24,8 @@ const StyledFieldValue = styled.span<{ theme: Theme }>\`
 \`;
 
 const StyledFieldType = styled.span<{ theme: Theme }>\`
-  background: \${({ theme }) => rgba(theme.colors.primaryLight, 0.2)};
+  background: \${({ theme }) =>
+    \`color-mix(in srgb, \${theme.colors.primaryLight} 20%, transparent)\`};
   color: \${({ theme }) => theme.colors.dark};
   padding: 0 4px;
   font-family: \${({ theme }) => theme.fonts.mono};
@@ -32,7 +33,8 @@ const StyledFieldType = styled.span<{ theme: Theme }>\`
 \`;
 
 const StyledFieldRequired = styled.span<{ theme: Theme }>\`
-  background: \${({ theme }) => rgba(theme.colors.error, 0.2)};
+  background: \${({ theme }) =>
+    \`color-mix(in srgb, \${theme.colors.error} 20%, transparent)\`};
   color: \${({ theme }) => theme.colors.error};
   padding: 0 4px;
   font-family: \${({ theme }) => theme.fonts.mono};

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 }) =>\n      theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n    text-decoration: none;\n    transition: all 0.3s ease;\n    display: inline-flex;\n\n    &:hover {\n      color: ${({ theme }) => theme.colors.primaryDark};\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 <a href=\"https://doccupine.com\">Doccupine</a>\n          </span>\n          <a\n            href=\"https://github.com/doccupine/cli\"\n            target=\"_blank\"\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 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.primaryDark};\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 <a href=\"https://doccupine.com\">Doccupine</a>\n          </span>\n          <a\n            href=\"https://github.com/doccupine/cli\"\n            target=\"_blank\"\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

@@ -56,8 +56,7 @@ const StyledFooterInner = styled.div<{ theme: Theme }>\`
 
   & a {
     font-weight: 700;
-    color: \${({ theme }) =>
-      theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};
+    color: \${({ theme }) => theme.colors.accent};
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-flex;

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

@@ -1 +1 @@
-export declare const globalStylesTemplate = "\"use client\";\nimport { createGlobalStyle } from \"styled-components\";\n\nconst GlobalStyles = createGlobalStyle`\nhtml,\nbody {\n  margin: 0;\n  padding: 0;\n  min-height: 100%;\n  background-color: ${({ theme }) => theme.colors.light};\n  scroll-padding-top: 80px;\n}\n\nhtml:has(:target) {\n  scroll-behavior: smooth;\n}\n\nbody {\n  font-family: \"Inter\", sans-serif;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-text-size-adjust: 100%;\n  -webkit-font-smoothing: antialiased;\n}\n\n:root {\n  interpolate-size: allow-keywords;\n}\n\n* {\n  box-sizing: border-box;\n  min-width: 0;\n}\n\nhr {\n  border: none;\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n  margin: 10px 0;\n}\n\npre,\ncode,\nkbd,\nsamp {\n  font-family: monospace, monospace;\n}\n\npre,\ncode,\nkbd,\nsamp,\nblockquote,\np,\na,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nul li,\nol li {\n  margin: 0;\n  padding: 0;\n  color: ${({ theme }) => theme.colors.dark};\n}\n\na {\n  color: ${({ theme }) => (theme.isDark ? theme.colors.dark : theme.colors.primary)};\n}\n\nol,\nul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\nfigure {\n  margin: 0;\n}\n\nfieldset {\n  appearance: none;\n  border: none;\n}\n\nbutton,\ninput,\na,\nimg,\nsvg,\nsvg * {\n  transition: all 0.3s ease;\n}\n\nstrong,\nb {\n  font-weight: 700;\n}\n\n.full-width {\n  width: 100%;\n}\n\n.light-only {\n  ${({ theme }) => theme.isDark && \"display: none !important;\"}\n}\n\n.dark-only {\n  ${({ theme }) => !theme.isDark && \"display: none !important;\"}\n}`;\n\nexport { GlobalStyles };\n";
+export declare const globalStylesTemplate = "\"use client\";\nimport { createGlobalStyle } from \"styled-components\";\nimport {\n  colorsLight,\n  colorsDark,\n  shadowsLight,\n  shadowsDark,\n} from \"@/app/theme\";\n\n// Build \"name: value;\" lines for every entry in a record. Used to emit\n// :root and :root.dark blocks from the resolved hex objects in theme.ts.\n// Custom theme.json overrides flow through automatically because they are\n// already merged into colorsLight / colorsDark.\nfunction toCssVars<T extends object>(prefix: string, record: T): string {\n  return Object.entries(record)\n    .map(([k, v]) => `  --${prefix}-${k}: ${v};`)\n    .join(\"\\n\");\n}\n\nconst lightVars = [\n  toCssVars(\"color\", colorsLight),\n  toCssVars(\"shadow\", shadowsLight),\n  // Semantic tokens \u2014 derived from the brand palette per mode. See the\n  // SemanticColors interface in theme.ts for the intent of each.\n  // These reference the palette via var() (not baked hex) so that any\n  // runtime override of --color-primary* (e.g. the DemoTheme presets)\n  // cascades into the semantic tokens automatically.\n  `  --color-accent: var(--color-primaryDark);`,\n  // accentStrong = accent shifted ~10% toward black (light mode) or white (dark\n  // mode). color-mix in sRGB is not identical to polished's HSL darken/lighten\n  // but the visual difference at 10% on a UI accent is imperceptible.\n  `  --color-accentStrong: color-mix(in srgb, var(--color-primaryDark) 90%, black);`,\n  `  --color-accentMuted: var(--color-primary);`,\n  `  --color-surface: var(--color-light);`,\n].join(\"\\n\");\n\nconst darkVars = [\n  toCssVars(\"color\", colorsDark),\n  toCssVars(\"shadow\", shadowsDark),\n  `  --color-accent: var(--color-primaryLight);`,\n  `  --color-accentStrong: color-mix(in srgb, var(--color-primaryLight) 90%, white);`,\n  `  --color-accentMuted: var(--color-grayDark);`,\n  `  --color-surface: var(--color-dark);`,\n].join(\"\\n\");\n\nconst GlobalStyles = createGlobalStyle`\n:root {\n${lightVars}\n}\n\n:root.dark {\n${darkVars}\n}\n\nhtml,\nbody {\n  margin: 0;\n  padding: 0;\n  min-height: 100%;\n  background-color: var(--color-light);\n  scroll-padding-top: 80px;\n}\n\nhtml:has(:target) {\n  scroll-behavior: smooth;\n}\n\nbody {\n  font-family: \"Inter\", sans-serif;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-text-size-adjust: 100%;\n  -webkit-font-smoothing: antialiased;\n}\n\n:root {\n  interpolate-size: allow-keywords;\n}\n\n* {\n  box-sizing: border-box;\n  min-width: 0;\n}\n\nhr {\n  border: none;\n  border-bottom: solid 1px var(--color-grayLight);\n  margin: 10px 0;\n}\n\npre,\ncode,\nkbd,\nsamp {\n  font-family: monospace, monospace;\n}\n\npre,\ncode,\nkbd,\nsamp,\nblockquote,\np,\na,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nul li,\nol li {\n  margin: 0;\n  padding: 0;\n  color: var(--color-dark);\n}\n\na {\n  color: var(--color-primary);\n}\n\nol,\nul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\nfigure {\n  margin: 0;\n}\n\nfieldset {\n  appearance: none;\n  border: none;\n}\n\nbutton,\ninput,\na,\nimg,\nsvg,\nsvg * {\n  transition: all 0.3s ease;\n}\n\nstrong,\nb {\n  font-weight: 700;\n}\n\n.full-width {\n  width: 100%;\n}\n\n/* Mode-conditional visibility helpers. ThemeToggle uses these to swap Sun\n   and Moon icons; Header uses them to swap light/dark logos. Pure CSS so\n   the swap happens via the active <html> class without JS or re-render. */\n:root.dark .light-only {\n  display: none !important;\n}\n:root:not(.dark) .dark-only {\n  display: none !important;\n}\n`;\n\nexport { GlobalStyles };\n";