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

doccupine 0.0.88 → 0.0.90

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

Files changed (160) hide show

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

@@ -1,8 +1,8 @@
 export const codeTemplate = `"use client";
 import { useState, useCallback, useMemo } from "react";
-import styled from "styled-components";
-import { Theme, styledCode } from "cherry-styled-components";
-import { rgba } from "polished";
+import styled, { css } from "styled-components";
+import { styledCode } from "cherry-styled-components";
+import { Theme } from "@/app/theme";
 import { unified } from "unified";
 import rehypeParse from "rehype-parse";
 import rehypeHighlight from "rehype-highlight";
@@ -24,20 +24,22 @@ const CodeWrapper = styled.span<{ theme: Theme }>\`
   display: block;
   width: 100%;
   border-radius: \${({ theme }) => theme.spacing.radius.lg};
-  border: solid 1px
-    \${({ theme }) =>
-      theme.isDark
-        ? rgba(theme.colors.dark, 0.2)
-        : rgba(theme.colors.dark, 0.1)};
+  border: solid 1px rgba(0, 0, 0, 0.1);
+  :root.dark & {
+    border-color: rgba(255, 255, 255, 0.2);
+  }
 \`;
+/* Code block uses a fixed GitHub-style palette in both modes. Independent of
+   theme.json so syntax highlighting stays legible regardless of brand colors.
+   Dark variants live in :root.dark & blocks so the swap happens via the
+   active <html> class with no re-render. */
 const TopBar = styled.div<{ theme: Theme }>\`
-  background: \${({ theme }) => (theme.isDark ? "#0d1117" : "#f6f8fa")};
+  background: #f6f8fa;
   border-top-left-radius: \${({ theme }) => theme.spacing.radius.lg};
   border-top-right-radius: \${({ theme }) => theme.spacing.radius.lg};
-  border-bottom: solid 1px
-    \${({ theme }) =>
-      theme.isDark ? rgba("#ffffff", 0.1) : rgba("#000000", 0.1)};
+  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
   height: 33px;
   width: 100%;
   display: flex;
@@ -45,6 +47,11 @@ const TopBar = styled.div<{ theme: Theme }>\`
   align-items: center;
   gap: 5px;
   padding: 0 10px;
+  :root.dark & {
+    background: #0d1117;
+    border-bottom-color: rgba(255, 255, 255, 0.1);
+  }
 \`;
 const DotsContainer = styled.div\`
@@ -56,34 +63,19 @@ const Dot = styled.span<{ theme: Theme }>\`
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  background: \${({ theme }) =>
-    theme.isDark ? rgba("#ffffff", 0.1) : rgba("#000000", 0.1)};
+  background: rgba(0, 0, 0, 0.1);
+  :root.dark & {
+    background: rgba(255, 255, 255, 0.1);
+  }
 \`;
 const CopyButton = styled.button<{ theme: Theme; $copied: boolean }>\`
-  background: \${({ theme, $copied }) =>
-    $copied
-      ? theme.isDark
-        ? rgba("#7ee787", 0.2)
-        : rgba("#2da44e", 0.1)
-      : "transparent"};
+  background: \${({ $copied }) =>
+    $copied ? "rgba(45, 164, 78, 0.1)" : "transparent"};
   border: solid 1px
-    \${({ theme, $copied }) =>
-      $copied
-        ? theme.isDark
-          ? "#7ee787"
-          : "#2da44e"
-        : theme.isDark
-          ? rgba("#ffffff", 0.1)
-          : rgba("#000000", 0.1)};
-  color: \${({ theme, $copied }) =>
-    $copied
-      ? theme.isDark
-        ? "#7ee787"
-        : "#2da44e"
-      : theme.isDark
-        ? "#c9d1d9"
-        : "#57606a"};
+    \${({ $copied }) => ($copied ? "#2da44e" : "rgba(0, 0, 0, 0.1)")};
+  color: \${({ $copied }) => ($copied ? "#2da44e" : "#57606a")};
   border-radius: \${({ theme }) => theme.spacing.radius.xs};
   padding: 4px 8px;
   font-size: 12px;
@@ -96,45 +88,208 @@ const CopyButton = styled.button<{ theme: Theme; $copied: boolean }>\`
   margin-right: -6px;
   & svg.lucide {
-    color: \${({ theme, $copied }) =>
-      $copied
-        ? theme.isDark
-          ? "#7ee787"
-          : "#2da44e"
-        : theme.isDark
-          ? "#c9d1d9"
-          : "#57606a"};
+    color: \${({ $copied }) => ($copied ? "#2da44e" : "#57606a")};
   }
   &:hover {
-    background: \${({ theme, $copied }) =>
-      $copied
-        ? theme.isDark
-          ? rgba("#7ee787", 0.3)
-          : rgba("#2da44e", 0.2)
-        : theme.isDark
-          ? rgba("#ffffff", 0.1)
-          : rgba("#000000", 0.05)};
-    border-color: \${({ theme, $copied }) =>
-      $copied
-        ? theme.isDark
-          ? "#7ee787"
-          : "#2da44e"
-        : theme.isDark
-          ? rgba("#ffffff", 0.2)
-          : rgba("#000000", 0.2)};
+    background: \${({ $copied }) =>
+      $copied ? "rgba(45, 164, 78, 0.2)" : "rgba(0, 0, 0, 0.05)"};
+    border-color: \${({ $copied }) =>
+      $copied ? "#2da44e" : "rgba(0, 0, 0, 0.2)"};
   }
   &:active {
     transform: scale(0.95);
   }
+  :root.dark & {
+    background: \${({ $copied }) =>
+      $copied ? "rgba(126, 231, 135, 0.2)" : "transparent"};
+    border-color: \${({ $copied }) =>
+      $copied ? "#7ee787" : "rgba(255, 255, 255, 0.1)"};
+    color: \${({ $copied }) => ($copied ? "#7ee787" : "#c9d1d9")};
+    & svg.lucide {
+      color: \${({ $copied }) => ($copied ? "#7ee787" : "#c9d1d9")};
+    }
+    &:hover {
+      background: \${({ $copied }) =>
+        $copied ? "rgba(126, 231, 135, 0.3)" : "rgba(255, 255, 255, 0.1)"};
+      border-color: \${({ $copied }) =>
+        $copied ? "#7ee787" : "rgba(255, 255, 255, 0.2)"};
+    }
+  }
+\`;
+/* GitHub Light syntax highlighting by default; GitHub Dark in :root.dark.
+   Browser resolves which rule wins based on the active <html> class with no
+   JS or React re-render involved. */
+const lightSyntaxHighlight = css\`
+  & .hljs {
+    color: #24292f;
+    background: #ffffff;
+  }
+  & .hljs-doctag,
+  & .hljs-keyword,
+  & .hljs-meta .hljs-keyword,
+  & .hljs-template-tag,
+  & .hljs-template-variable,
+  & .hljs-type,
+  & .hljs-variable.language_ {
+    color: #cf222e;
+  }
+  & .hljs-title,
+  & .hljs-title.class_,
+  & .hljs-title.class_.inherited__,
+  & .hljs-title.function_ {
+    color: #8250df;
+  }
+  & .hljs-attr,
+  & .hljs-attribute,
+  & .hljs-literal,
+  & .hljs-meta,
+  & .hljs-number,
+  & .hljs-operator,
+  & .hljs-selector-attr,
+  & .hljs-selector-class,
+  & .hljs-selector-id,
+  & .hljs-variable {
+    color: #0550ae;
+  }
+  & .hljs-meta .hljs-string,
+  & .hljs-regexp,
+  & .hljs-string {
+    color: #0a3069;
+  }
+  & .hljs-built_in,
+  & .hljs-symbol {
+    color: #953800;
+  }
+  & .hljs-code,
+  & .hljs-comment,
+  & .hljs-formula {
+    color: #6e7781;
+  }
+  & .hljs-name,
+  & .hljs-quote,
+  & .hljs-selector-pseudo,
+  & .hljs-selector-tag {
+    color: #116329;
+  }
+  & .hljs-subst {
+    color: #24292f;
+  }
+  & .hljs-section {
+    color: #0550ae;
+    font-weight: 700;
+  }
+  & .hljs-bullet {
+    color: #953800;
+  }
+  & .hljs-emphasis {
+    color: #24292f;
+    font-style: italic;
+  }
+  & .hljs-strong {
+    color: #24292f;
+    font-weight: 700;
+  }
+  & .hljs-addition {
+    color: #116329;
+    background-color: #dafbe1;
+  }
+  & .hljs-deletion {
+    color: #82071e;
+    background-color: #ffebe9;
+  }
+\`;
+const darkSyntaxHighlight = css\`
+  & .hljs {
+    color: #c9d1d9;
+    background: #0d1117;
+  }
+  & .hljs-doctag,
+  & .hljs-keyword,
+  & .hljs-meta .hljs-keyword,
+  & .hljs-template-tag,
+  & .hljs-template-variable,
+  & .hljs-type,
+  & .hljs-variable.language_ {
+    color: #ff7b72;
+  }
+  & .hljs-title,
+  & .hljs-title.class_,
+  & .hljs-title.class_.inherited__,
+  & .hljs-title.function_ {
+    color: #d2a8ff;
+  }
+  & .hljs-attr,
+  & .hljs-attribute,
+  & .hljs-literal,
+  & .hljs-meta,
+  & .hljs-number,
+  & .hljs-operator,
+  & .hljs-selector-attr,
+  & .hljs-selector-class,
+  & .hljs-selector-id,
+  & .hljs-variable {
+    color: #79c0ff;
+  }
+  & .hljs-meta .hljs-string,
+  & .hljs-regexp,
+  & .hljs-string {
+    color: #a5d6ff;
+  }
+  & .hljs-built_in,
+  & .hljs-symbol {
+    color: #ffa657;
+  }
+  & .hljs-code,
+  & .hljs-comment,
+  & .hljs-formula {
+    color: #8b949e;
+  }
+  & .hljs-name,
+  & .hljs-quote,
+  & .hljs-selector-pseudo,
+  & .hljs-selector-tag {
+    color: #7ee787;
+  }
+  & .hljs-subst {
+    color: #c9d1d9;
+  }
+  & .hljs-section {
+    color: #1f6feb;
+    font-weight: 700;
+  }
+  & .hljs-bullet {
+    color: #f2cc60;
+  }
+  & .hljs-emphasis {
+    color: #c9d1d9;
+    font-style: italic;
+  }
+  & .hljs-strong {
+    color: #c9d1d9;
+    font-weight: 700;
+  }
+  & .hljs-addition {
+    color: #aff5b4;
+    background-color: #033a16;
+  }
+  & .hljs-deletion {
+    color: #ffdcd7;
+    background-color: #67060c;
+  }
 \`;
 const Body = styled.div<{ theme: Theme }>\`
-  background: \${({ theme }) => (theme.isDark ? "#0d1117" : "#ffffff")};
+  background: #ffffff;
   border-bottom-left-radius: \${({ theme }) => theme.spacing.radius.lg};
   border-bottom-right-radius: \${({ theme }) => theme.spacing.radius.lg};
-  color: \${({ theme }) => (theme.isDark ? "#ffffff" : "#24292f")};
+  color: #24292f;
   padding: 20px;
   font-family: \${({ theme }) => theme.fonts.mono};
   text-align: left;
@@ -142,200 +297,13 @@ const Body = styled.div<{ theme: Theme }>\`
   overflow-y: auto;
   max-height: calc(100dvh - 400px);
   \${({ theme }) => styledCode(theme)};
+  \${lightSyntaxHighlight};
-  /* Dark mode syntax highlighting (GitHub Dark) */
-  \${({ theme }) =>
-    theme.isDark &&
-    \`
-    & .hljs {
-      color: #c9d1d9;
-      background: #0d1117;
-    }
-    & .hljs-doctag,
-    & .hljs-keyword,
-    & .hljs-meta .hljs-keyword,
-    & .hljs-template-tag,
-    & .hljs-template-variable,
-    & .hljs-type,
-    & .hljs-variable.language_ {
-      color: #ff7b72;
-    }
-    & .hljs-title,
-    & .hljs-title.class_,
-    & .hljs-title.class_.inherited__,
-    & .hljs-title.function_ {
-      color: #d2a8ff;
-    }
-    & .hljs-attr,
-    & .hljs-attribute,
-    & .hljs-literal,
-    & .hljs-meta,
-    & .hljs-number,
-    & .hljs-operator,
-    & .hljs-selector-attr,
-    & .hljs-selector-class,
-    & .hljs-selector-id,
-    & .hljs-variable {
-      color: #79c0ff;
-    }
-    & .hljs-meta .hljs-string,
-    & .hljs-regexp,
-    & .hljs-string {
-      color: #a5d6ff;
-    }
-    & .hljs-built_in,
-    & .hljs-symbol {
-      color: #ffa657;
-    }
-    & .hljs-code,
-    & .hljs-comment,
-    & .hljs-formula {
-      color: #8b949e;
-    }
-    & .hljs-name,
-    & .hljs-quote,
-    & .hljs-selector-pseudo,
-    & .hljs-selector-tag {
-      color: #7ee787;
-    }
-    & .hljs-subst {
-      color: #c9d1d9;
-    }
-    & .hljs-section {
-      color: #1f6feb;
-      font-weight: 700;
-    }
-    & .hljs-bullet {
-      color: #f2cc60;
-    }
-    & .hljs-emphasis {
-      color: #c9d1d9;
-      font-style: italic;
-    }
-    & .hljs-strong {
-      color: #c9d1d9;
-      font-weight: 700;
-    }
-    & .hljs-addition {
-      color: #aff5b4;
-      background-color: #033a16;
-    }
-    & .hljs-deletion {
-      color: #ffdcd7;
-      background-color: #67060c;
-    }
-  \`}
-  /* Light mode syntax highlighting (GitHub Light) */
-  \${({ theme }) =>
-    !theme.isDark &&
-    \`
-    & .hljs {
-      color: #24292f;
-      background: #ffffff;
-    }
-    & .hljs-doctag,
-    & .hljs-keyword,
-    & .hljs-meta .hljs-keyword,
-    & .hljs-template-tag,
-    & .hljs-template-variable,
-    & .hljs-type,
-    & .hljs-variable.language_ {
-      color: #cf222e;
-    }
-    & .hljs-title,
-    & .hljs-title.class_,
-    & .hljs-title.class_.inherited__,
-    & .hljs-title.function_ {
-      color: #8250df;
-    }
-    & .hljs-attr,
-    & .hljs-attribute,
-    & .hljs-literal,
-    & .hljs-meta,
-    & .hljs-number,
-    & .hljs-operator,
-    & .hljs-selector-attr,
-    & .hljs-selector-class,
-    & .hljs-selector-id,
-    & .hljs-variable {
-      color: #0550ae;
-    }
-    & .hljs-meta .hljs-string,
-    & .hljs-regexp,
-    & .hljs-string {
-      color: #0a3069;
-    }
-    & .hljs-built_in,
-    & .hljs-symbol {
-      color: #953800;
-    }
-    & .hljs-code,
-    & .hljs-comment,
-    & .hljs-formula {
-      color: #6e7781;
-    }
-    & .hljs-name,
-    & .hljs-quote,
-    & .hljs-selector-pseudo,
-    & .hljs-selector-tag {
-      color: #116329;
-    }
-    & .hljs-subst {
-      color: #24292f;
-    }
-    & .hljs-section {
-      color: #0550ae;
-      font-weight: 700;
-    }
-    & .hljs-bullet {
-      color: #953800;
-    }
-    & .hljs-emphasis {
-      color: #24292f;
-      font-style: italic;
-    }
-    & .hljs-strong {
-      color: #24292f;
-      font-weight: 700;
-    }
-    & .hljs-addition {
-      color: #116329;
-      background-color: #dafbe1;
-    }
-    & .hljs-deletion {
-      color: #82071e;
-      background-color: #ffebe9;
-    }
-  \`}
+  :root.dark & {
+    background: #0d1117;
+    color: #ffffff;
+    \${darkSyntaxHighlight};
+  }
 \`;
 const escapeHtml = (unsafe: string): string => {

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

	@@ -1 +1 @@
1	- export declare const colorSwatchTemplate = "\"use client\";\nimport styled from \"styled-components\";\nimport { styledText, ~~Theme~~ } from \"cherry-styled-components\";\nimport { mq } from \"@/app/theme\";\n\nconst StyledSwatchGroup = styled.div<{ theme: Theme }>`\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: ${({ theme }) => theme.spacing.gridGap.xs};\n\n ${mq(\"md\")} {\n grid-template-columns: repeat(3, 1fr);\n }\n`;\n\nconst StyledSwatch = styled.div<{ theme: Theme }>`\n border: solid 1px ${({ theme }) => theme.colors.grayLight};\n border-radius: ${({ theme }) => theme.spacing.radius.lg};\n overflow: hidden;\n`;\n\nconst StyledColor = styled.div<{\n theme: Theme;\n $color: string;\n $lightText: boolean;\n}>`\n background: ${({ $color }) => $color};\n height: 80px;\n display: flex;\n align-items: flex-end;\n padding: 8px 12px;\n color: ${({ $lightText }) => ($lightText ? \"#FFFFFF\" : \"#000000\")};\n font-size: 12px;\n font-family: monospace;\n opacity: 0.8;\n border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n`;\n\nconst StyledLabel = styled.div<{ theme: Theme }>`\n padding: 10px 12px;\n background: ${({ theme }) => theme.colors.light};\n ${({ theme }) => styledText(theme)};\n font-size: 13px;\n color: ${({ theme }) => theme.colors.grayDark};\n\n code {\n color: ${({ theme }) => theme.colors.dark};\n font-weight: 600;\n font-size: 13px;\n }\n`;\n\nfunction luminance(hex: string): number {\n const rgb = hex\n .replace(\"#\", \"\")\n .match(/.{2}/g)!\n .map((c) => parseInt(c, 16) / 255);\n\n const [r, g, b] = rgb.map((c) =>\n c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4),\n );\n\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n}\n\ninterface ColorSwatchProps {\n token: string;\n value: string;\n}\n\nfunction ColorSwatch({ token, value }: ColorSwatchProps) {\n const useLightText = luminance(value) < 0.4;\n\n return (\n <StyledSwatch>\n <StyledColor $color={value} $lightText={useLightText}>\n {value}\n </StyledColor>\n <StyledLabel>\n <code className=\"token\">{token}</code>\n </StyledLabel>\n </StyledSwatch>\n );\n}\n\ninterface ColorSwatchGroupProps {\n children: React.ReactNode;\n}\n\nfunction ColorSwatchGroup({ children }: ColorSwatchGroupProps) {\n return <StyledSwatchGroup>{children}</StyledSwatchGroup>;\n}\n\nexport { ColorSwatch, ColorSwatchGroup };\n";
1	+ export declare const colorSwatchTemplate = "\"use client\";\nimport styled from \"styled-components\";\nimport { styledText } from \"cherry-styled-components\";\nimport { mq, Theme } from \"@/app/theme\";\n\nconst StyledSwatchGroup = styled.div<{ theme: Theme }>`\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: ${({ theme }) => theme.spacing.gridGap.xs};\n\n ${mq(\"md\")} {\n grid-template-columns: repeat(3, 1fr);\n }\n`;\n\nconst StyledSwatch = styled.div<{ theme: Theme }>`\n border: solid 1px ${({ theme }) => theme.colors.grayLight};\n border-radius: ${({ theme }) => theme.spacing.radius.lg};\n overflow: hidden;\n`;\n\nconst StyledColor = styled.div<{\n theme: Theme;\n $color: string;\n $lightText: boolean;\n}>`\n background: ${({ $color }) => $color};\n height: 80px;\n display: flex;\n align-items: flex-end;\n padding: 8px 12px;\n color: ${({ $lightText }) => ($lightText ? \"#FFFFFF\" : \"#000000\")};\n font-size: 12px;\n font-family: monospace;\n opacity: 0.8;\n border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n`;\n\nconst StyledLabel = styled.div<{ theme: Theme }>`\n padding: 10px 12px;\n background: ${({ theme }) => theme.colors.light};\n ${({ theme }) => styledText(theme)};\n font-size: 13px;\n color: ${({ theme }) => theme.colors.grayDark};\n\n code {\n color: ${({ theme }) => theme.colors.dark};\n font-weight: 600;\n font-size: 13px;\n }\n`;\n\nfunction luminance(hex: string): number {\n const rgb = hex\n .replace(\"#\", \"\")\n .match(/.{2}/g)!\n .map((c) => parseInt(c, 16) / 255);\n\n const [r, g, b] = rgb.map((c) =>\n c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4),\n );\n\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n}\n\ninterface ColorSwatchProps {\n token: string;\n value: string;\n}\n\nfunction ColorSwatch({ token, value }: ColorSwatchProps) {\n const useLightText = luminance(value) < 0.4;\n\n return (\n <StyledSwatch>\n <StyledColor $color={value} $lightText={useLightText}>\n {value}\n </StyledColor>\n <StyledLabel>\n <code className=\"token\">{token}</code>\n </StyledLabel>\n </StyledSwatch>\n );\n}\n\ninterface ColorSwatchGroupProps {\n children: React.ReactNode;\n}\n\nfunction ColorSwatchGroup({ children }: ColorSwatchGroupProps) {\n return <StyledSwatchGroup>{children}</StyledSwatchGroup>;\n}\n\nexport { ColorSwatch, ColorSwatchGroup };\n";

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

@@ -1,7 +1,7 @@
 export const colorSwatchTemplate = `"use client";
 import styled from "styled-components";
-import { styledText, Theme } from "cherry-styled-components";
-import { mq } from "@/app/theme";
+import { styledText } from "cherry-styled-components";
+import { mq, Theme } from "@/app/theme";
 const StyledSwatchGroup = styled.div<{ theme: Theme }>\`
   display: grid;

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

	@@ -1 +1 @@
1	- export declare const columnsTemplate = "\"use client\";\nimport styled from \"styled-components\";\nimport { mq, Theme } from \"~~cherry-styled-components~~\";\n\nconst StyledColumns = styled.div<{ theme: Theme; $columns?: number }>`\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n ${mq(\"lg\")} {\n ${({ $columns }) =>\n $columns && $columns >= 3\n ? `display: grid; grid-template-columns: repeat(2, 1fr);`\n : \"\"}\n }\n\n ${mq(\"xl\")} {\n display: grid;\n grid-template-columns: repeat(${({ $columns }) => $columns ?? 1}, 1fr);\n }\n`;\n\ninterface ColumnsProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n cols?: number;\n}\n\nfunction Columns({ children, cols }: ColumnsProps) {\n return <StyledColumns $columns={cols}>{children}</StyledColumns>;\n}\n\nexport { Columns };\n";
1	+ export declare const columnsTemplate = "\"use client\";\nimport styled from \"styled-components\";\nimport { mq, Theme } from \"@/app/theme\";\n\nconst StyledColumns = styled.div<{ theme: Theme; $columns?: number }>`\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n ${mq(\"lg\")} {\n ${({ $columns }) =>\n $columns && $columns >= 3\n ? `display: grid; grid-template-columns: repeat(2, 1fr);`\n : \"\"}\n }\n\n ${mq(\"xl\")} {\n display: grid;\n grid-template-columns: repeat(${({ $columns }) => $columns ?? 1}, 1fr);\n }\n`;\n\ninterface ColumnsProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n cols?: number;\n}\n\nfunction Columns({ children, cols }: ColumnsProps) {\n return <StyledColumns $columns={cols}>{children}</StyledColumns>;\n}\n\nexport { Columns };\n";

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

@@ -1,6 +1,6 @@
 export const columnsTemplate = `"use client";
 import styled from "styled-components";
-import { mq, Theme } from "cherry-styled-components";
+import { mq, Theme } from "@/app/theme";
 const StyledColumns = styled.div<{ theme: Theme; $columns?: number }>\`
   display: flex;

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

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