@kushagradhawan/kookie-blocks 0.1.10 → 0.1.11

package/dist/esm/components/markdown/createMarkdownComponents.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/markdown/createMarkdownComponents.tsx"],
+  "sourcesContent": ["import React, { type ReactNode } from \"react\";\nimport type { Components } from \"react-markdown\";\nimport { Blockquote, Box, Code, Flex, Heading, Text, Table } from \"@kushagradhawan/kookie-ui\";\nimport { CodeBlock } from \"../code\";\nimport type { MarkdownComponentOptions, MarkdownChildrenProps } from \"./types\";\n\n/**\n * Extracts language from className (e.g., \"language-typescript\" -> \"typescript\")\n */\nfunction extractLanguage(className?: string): string {\n  if (!className) {\n    return \"text\";\n  }\n  const match = className.match(/language-([\\w-]+)/i);\n  return match?.[1] ?? \"text\";\n}\n\n/**\n * Extracts code string from ReactNode children\n */\nfunction extractCode(children?: ReactNode): string {\n  let code = \"\";\n  if (!children) {\n    return code;\n  }\n  if (typeof children === \"string\") {\n    code = children;\n  } else if (Array.isArray(children)) {\n    code = children.map((child) => (typeof child === \"string\" ? child : \"\")).join(\"\");\n  }\n  // Trim trailing newlines but preserve internal whitespace\n  return code.replace(/^\\n+|\\n+$/g, \"\");\n}\n\n/**\n * Creates markdown component mappings that work with both react-markdown and MDX.\n * Uses KookieUI components for consistent styling across all projects.\n *\n * @param options - Optional configuration for component behavior\n * @returns Component mappings for markdown/MDX renderers\n *\n * @example\n * ```tsx\n * // In react-markdown\n * <ReactMarkdown components={createMarkdownComponents()}>\n *   {content}\n * </ReactMarkdown>\n *\n * // In MDX\n * export function useMDXComponents(components: MDXComponents) {\n *   return {\n *     ...createMarkdownComponents(),\n *     ...components,\n *   };\n * }\n * ```\n */\nexport function createMarkdownComponents(options: MarkdownComponentOptions = {}): Components {\n  const { codeBlockCollapsible = false, imageComponent, inlineCodeHighContrast = true } = options;\n\n  return {\n    // Headings with consistent visual hierarchy\n    h1: ({ children }: MarkdownChildrenProps) => (\n      <Heading size=\"8\" weight=\"medium\" as=\"h1\" style={{ marginTop: \"1rem\", marginBottom: \"0.5rem\" }}>\n        {children}\n      </Heading>\n    ),\n    h2: ({ children }: MarkdownChildrenProps) => (\n      <Heading weight=\"medium\" size=\"5\" as=\"h2\" style={{ marginTop: \"0.875rem\", marginBottom: \"0.5rem\" }}>\n        {children}\n      </Heading>\n    ),\n    h3: ({ children }: MarkdownChildrenProps) => (\n      <Heading weight=\"medium\" size=\"4\" as=\"h3\" style={{ marginTop: \"0.75rem\", marginBottom: \"0.5rem\" }}>\n        {children}\n      </Heading>\n    ),\n    h4: ({ children }: MarkdownChildrenProps) => (\n      <Heading weight=\"medium\" size=\"3\" as=\"h4\" style={{ marginTop: \"0.625rem\", marginBottom: \"0.5rem\" }}>\n        {children}\n      </Heading>\n    ),\n    h5: ({ children }: MarkdownChildrenProps) => (\n      <Heading weight=\"medium\" size=\"3\" as=\"h5\" style={{ marginTop: \"0.5rem\", marginBottom: \"0.5rem\" }}>\n        {children}\n      </Heading>\n    ),\n    h6: ({ children }: MarkdownChildrenProps) => (\n      <Heading weight=\"medium\" size=\"3\" as=\"h6\" style={{ marginTop: \"0.5rem\", marginBottom: \"0.5rem\" }}>\n        {children}\n      </Heading>\n    ),\n\n    // Paragraph text\n    p: ({ children }: MarkdownChildrenProps) => (\n      <Text size=\"3\" as=\"p\" style={{ lineHeight: \"1.6\" }}>\n        {children}\n      </Text>\n    ),\n\n    // Code - inline vs block\n    code: ({ className, children, inline }: { className?: string; children?: ReactNode; inline?: boolean }) => {\n      const code = extractCode(children);\n\n      // Block code: has className (language) OR is not marked as inline\n      // Inline code: explicitly marked as inline=true, or no className and short single-line content\n      const isInlineCode = inline === true || (inline === undefined && !className && !code.includes(\"\\n\") && code.length < 100);\n\n      if (isInlineCode) {\n        return (\n          <Code highContrast={inlineCodeHighContrast} size=\"3\">\n            {code}\n          </Code>\n        );\n      }\n\n      return (\n        <Box my=\"2\" style={{ minWidth: 0 }}>\n          <CodeBlock code={code} language={extractLanguage(className)} collapsible={codeBlockCollapsible} />\n        </Box>\n      );\n    },\n\n    // Lists\n    ul: ({ children }: MarkdownChildrenProps) => (\n      <ul style={{ marginTop: \"0.5rem\", marginBottom: \"0.5rem\", lineHeight: \"1.6\", paddingLeft: \"1.5rem\", listStyleType: \"disc\" }}>{children}</ul>\n    ),\n    ol: ({ children }: MarkdownChildrenProps) => (\n      <ol style={{ marginTop: \"0.5rem\", marginBottom: \"0.5rem\", lineHeight: \"1.6\", paddingLeft: \"1.5rem\", listStyleType: \"decimal\" }}>{children}</ol>\n    ),\n    li: ({ children }: MarkdownChildrenProps) => <li style={{ marginBottom: \"0.25rem\", lineHeight: \"1.6\" }}>{children}</li>,\n\n    // Blockquote\n    blockquote: ({ children }: MarkdownChildrenProps) => <Blockquote>{children}</Blockquote>,\n\n    // Links\n    a: ({ href, children }: { href?: string; children?: ReactNode }) => (\n      <a href={href} style={{ color: \"var(--accent-9)\", textDecoration: \"underline\" }}>\n        {children}\n      </a>\n    ),\n\n    // Text styling\n    strong: ({ children }: MarkdownChildrenProps) => (\n      <Text weight=\"medium\" style={{ lineHeight: \"1.6\" }}>\n        {children}\n      </Text>\n    ),\n    em: ({ children }: MarkdownChildrenProps) => <Text style={{ lineHeight: \"1.6\", fontStyle: \"italic\" }}>{children}</Text>,\n\n    // Horizontal rule\n    hr: () => (\n      <hr\n        style={{\n          color: \"var(--gray-6)\",\n          marginTop: \"0.5rem\",\n          marginBottom: \"0.5rem\",\n          height: \"1px\",\n          width: \"100%\",\n          opacity: 0.5,\n        }}\n      />\n    ),\n\n    // Pre wrapper (pass through to let code handle it)\n    pre: ({ children }: MarkdownChildrenProps) => <>{children}</>,\n\n    // Tables using KookieUI\n    table: ({ children }: MarkdownChildrenProps) => (\n      <Box my=\"2\" style={{ overflowX: \"auto\" }}>\n        <Table.Root size=\"2\" variant=\"ghost\">\n          {children}\n        </Table.Root>\n      </Box>\n    ),\n    thead: ({ children }: MarkdownChildrenProps) => <Table.Header>{children}</Table.Header>,\n    tbody: ({ children }: MarkdownChildrenProps) => <Table.Body>{children}</Table.Body>,\n    tr: ({ children }: MarkdownChildrenProps) => <Table.Row>{children}</Table.Row>,\n    th: ({ children }: MarkdownChildrenProps) => <Table.ColumnHeaderCell>{children}</Table.ColumnHeaderCell>,\n    td: ({ children }: MarkdownChildrenProps) => <Table.Cell>{children}</Table.Cell>,\n\n    // HTML elements for raw HTML support\n    sub: ({ children }: MarkdownChildrenProps) => <sub>{children}</sub>,\n    sup: ({ children }: MarkdownChildrenProps) => <sup>{children}</sup>,\n    br: () => <br />,\n\n    // Images - use custom component if provided\n    img: imageComponent\n      ? (props: React.ImgHTMLAttributes<HTMLImageElement>) => {\n          const { src, alt, width, height } = props;\n          if (!src || typeof src !== \"string\") return null;\n          return imageComponent({\n            src,\n            alt: alt ?? \"Image\",\n            width: width ? String(width) : undefined,\n            height: height ? String(height) : undefined,\n          });\n        }\n      : undefined,\n\n    // Details/Summary for expandable sections\n    details: ({ children }: MarkdownChildrenProps) => <details style={{ padding: \"0.5rem 0\" }}>{children}</details>,\n    summary: ({ children }: MarkdownChildrenProps) => <summary style={{ cursor: \"pointer\", fontWeight: 500 }}>{children}</summary>,\n  };\n}\n\n"],
+  "mappings": "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",
+  "names": ["React", "Blockquote", "Box", "Code", "Heading", "Text", "Table", "CodeBlock", "extractLanguage", "className", "extractCode", "children", "code", "child", "createMarkdownComponents", "options", "codeBlockCollapsible", "imageComponent", "inlineCodeHighContrast", "inline", "href", "props", "src", "alt", "width", "height"]
+}

package/dist/esm/components/markdown/index.d.ts

@@ -0,0 +1,6 @@
+export { StreamingMarkdown } from "./StreamingMarkdown";
+export type { StreamingMarkdownOptions } from "./StreamingMarkdown";
+export { createMarkdownComponents } from "./createMarkdownComponents";
+export type { MarkdownComponentOptions, MarkdownChildrenProps } from "./types";
+export { completeUnterminatedMarkdown, parseMarkdownIntoBlocks } from "./utils/markdownStreaming";
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/markdown/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/markdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAEpE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,YAAY,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAE/E,OAAO,EAAE,4BAA4B,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/esm/components/markdown/index.js

@@ -0,0 +1,2 @@
+import{StreamingMarkdown as e}from"./StreamingMarkdown";import{createMarkdownComponents as t}from"./createMarkdownComponents";import{completeUnterminatedMarkdown as a,parseMarkdownIntoBlocks as m}from"./utils/markdownStreaming";export{e as StreamingMarkdown,a as completeUnterminatedMarkdown,t as createMarkdownComponents,m as parseMarkdownIntoBlocks};
+//# sourceMappingURL=index.js.map

package/dist/esm/components/markdown/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/markdown/index.ts"],
+  "sourcesContent": ["export { StreamingMarkdown } from \"./StreamingMarkdown\";\nexport type { StreamingMarkdownOptions } from \"./StreamingMarkdown\";\n\nexport { createMarkdownComponents } from \"./createMarkdownComponents\";\nexport type { MarkdownComponentOptions, MarkdownChildrenProps } from \"./types\";\n\nexport { completeUnterminatedMarkdown, parseMarkdownIntoBlocks } from \"./utils/markdownStreaming\";\n\n"],
+  "mappings": "AAAA,OAAS,qBAAAA,MAAyB,sBAGlC,OAAS,4BAAAC,MAAgC,6BAGzC,OAAS,gCAAAC,EAA8B,2BAAAC,MAA+B",
+  "names": ["StreamingMarkdown", "createMarkdownComponents", "completeUnterminatedMarkdown", "parseMarkdownIntoBlocks"]
+}

package/dist/esm/components/markdown/types.d.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+/**
+ * Options for customizing markdown component behavior
+ */
+export type MarkdownComponentOptions = {
+    /**
+     * Whether code blocks should be collapsible
+     * @default false
+     */
+    codeBlockCollapsible?: boolean;
+    /**
+     * Custom image component
+     */
+    imageComponent?: (props: {
+        src?: string;
+        alt?: string;
+        width?: string;
+        height?: string;
+    }) => ReactNode;
+    /**
+     * Whether to use high contrast for inline code
+     * @default true
+     */
+    inlineCodeHighContrast?: boolean;
+};
+/**
+ * Common props for markdown child components
+ */
+export type MarkdownChildrenProps = {
+    children?: ReactNode;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/esm/components/markdown/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/markdown/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,SAAS,CAAC;IAEvG;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC"}

package/dist/esm/components/markdown/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/esm/components/markdown/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/esm/components/markdown/utils/markdownStreaming.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Utilities for handling streaming markdown content.
+ * Completes unterminated markdown blocks to enable proper parsing during streaming.
+ */
+/**
+ * Completes unterminated markdown syntax at the end of content.
+ * This allows streaming markdown to be parsed correctly even when syntax is incomplete.
+ *
+ * Handles:
+ * - Headings (# Heading)
+ * - Inline code (`code)
+ * - Bold (**text or __text)
+ * - Italic (*text or _text)
+ * - Links ([text](url or [text]()
+ * - Code blocks (```language\ncode)
+ * - Lists (- item or * item or 1. item)
+ * - Blockquotes (> text)
+ * - Strikethrough (~~text)
+ */
+export declare function completeUnterminatedMarkdown(content: string): string;
+/**
+ * Parses markdown content into blocks for efficient rendering.
+ * Each block is a separate markdown token that can be memoized independently.
+ *
+ * @param content - The markdown content to parse
+ * @param parser - Optional parser function (defaults to using marked.lexer)
+ * @returns Array of markdown block strings
+ */
+export declare function parseMarkdownIntoBlocks(content: string, parser?: (content: string) => Array<{
+    raw?: string;
+}>): string[];
+//# sourceMappingURL=markdownStreaming.d.ts.map

package/dist/esm/components/markdown/utils/markdownStreaming.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdownStreaming.d.ts","sourceRoot":"","sources":["../../../../../src/components/markdown/utils/markdownStreaming.ts"],"names":[],"mappings":"AAAA;;;GAGG;AA2IH;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,4BAA4B,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAsGpE;AAED;;;;;;;GAOG;AACH,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,MAAM,EACf,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,KAAK,CAAC;IAAE,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,GACpD,MAAM,EAAE,CAuBV"}

package/dist/esm/components/markdown/utils/markdownStreaming.js

@@ -0,0 +1,5 @@
+function f(e,r){const n=r==="**"?"\\*\\*":"__",t=new RegExp(n,"g");if((e.match(t)||[]).length%2===0)return!1;const i=e.lastIndexOf(r);return i===-1?!1:e.slice(i+r.length).length>0}function h(e){if((e.match(/~~/g)||[]).length%2===0)return!1;const n=e.lastIndexOf("~~");return n===-1?!1:e.slice(n+2).length>0}function g(e,r,n){if(n!=="*")return!1;const t=r===0||e[r-1]===`
+`,s=r<e.length-1&&e[r+1]===" ";return t&&s}function u(e,r){let n=0,t=-1;for(let i=0;i<e.length;i++)if(e[i]===r){if(g(e,i,r))continue;const a=i>0&&e[i-1]===r,l=i<e.length-1&&e[i+1]===r;if(a||l){l&&i++;continue}n++,t=i}return n%2===0||t===-1?!1:t===e.length-1?t>0:e.slice(t+1).length>0}function m(e){const r=/```/g,n=[];let t;for(;(t=r.exec(e))!==null;)n.push(t.index);return n.length%2===1}function d(e){if(!e.trim())return e;const r=e.trimEnd(),n=e.slice(r.length);let t=r;if(t.match(/```[\w-]*$/)&&!t.includes("```\n")&&!t.match(/```[\w-]+\n/)||m(t))return t+="\n```",t+n;if((t.replace(/```[\w-]*/g,"").match(/`/g)||[]).length%2===1)return t+="`",t+n;if(t.match(/\[([^\]]*)\]\(([^)]*)$/))return t+=")",t+n;if(f(t,"**"))return t+="**",t+n;if(f(t,"__"))return t+="__",t+n;if(h(t))return t+="~~",t+n;const o=t.split(`
+`),c=o[o.length-1];return c.match(/^#{1,6}\s+.+$/)||c.match(/^(\s*)([-*+]|\d+\.)\s+.+$/)||c.match(/^>\s+.+$/)?(t+=`
+`,t+n):u(t,"*")?(t+="*",t+n):(u(t,"_")&&(t+="_"),t+n)}function p(e,r){if(!e.trim())return[];const n=d(e);return r?r(n).map(s=>"raw"in s&&typeof s.raw=="string"?s.raw:"").filter(s=>!!s.trim()):[n]}export{d as completeUnterminatedMarkdown,p as parseMarkdownIntoBlocks};
+//# sourceMappingURL=markdownStreaming.js.map

package/dist/esm/components/markdown/utils/markdownStreaming.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/markdown/utils/markdownStreaming.ts"],
+  "sourcesContent": ["/**\n * Utilities for handling streaming markdown content.\n * Completes unterminated markdown blocks to enable proper parsing during streaming.\n */\n\n/**\n * Checks if there's an unpaired double marker (** or __) with content after the last opener.\n * Returns true only if there's text after the unclosed marker (not just the marker itself).\n */\nfunction hasUnpairedDoubleMarkerWithContent(content: string, marker: string): boolean {\n  const escaped = marker === \"**\" ? \"\\\\*\\\\*\" : \"__\";\n  const regex = new RegExp(escaped, \"g\");\n  const matches = content.match(regex) || [];\n\n  if (matches.length % 2 === 0) {\n    return false; // All paired\n  }\n\n  // Find the last occurrence of the marker - there should be content after it\n  const lastIndex = content.lastIndexOf(marker);\n  if (lastIndex === -1) {\n    return false;\n  }\n\n  // Check if there's actual content after the marker\n  const afterMarker = content.slice(lastIndex + marker.length);\n  return afterMarker.length > 0;\n}\n\n/**\n * Checks if there's an unpaired strikethrough with content after the last opener.\n */\nfunction hasUnpairedStrikethroughWithContent(content: string): boolean {\n  const matches = content.match(/~~/g) || [];\n\n  if (matches.length % 2 === 0) {\n    return false; // All paired\n  }\n\n  // Find the last occurrence - there should be content after it\n  const lastIndex = content.lastIndexOf(\"~~\");\n  if (lastIndex === -1) {\n    return false;\n  }\n\n  const afterMarker = content.slice(lastIndex + 2);\n  return afterMarker.length > 0;\n}\n\n/**\n * Checks if a marker at position i is a list marker (at start of line followed by space).\n */\nfunction isListMarker(content: string, i: number, marker: string): boolean {\n  // Only * can be a list marker (not _)\n  if (marker !== \"*\") {\n    return false;\n  }\n\n  // Check if at start of line (or start of content)\n  const isStartOfLine = i === 0 || content[i - 1] === \"\\n\";\n  // Check if followed by space\n  const followedBySpace = i < content.length - 1 && content[i + 1] === \" \";\n\n  return isStartOfLine && followedBySpace;\n}\n\n/**\n * Checks if there's an unpaired single italic marker (* or _) that needs closing.\n * Must distinguish from bold markers (** or __) and list markers (* ).\n *\n * Returns true if:\n * - There's an odd number of single markers (not part of double markers or list markers)\n * - Either there's content after the last marker, OR the content ends with the marker\n */\nfunction hasUnpairedItalicWithContent(content: string, marker: string): boolean {\n  // Count single markers (not part of double markers or list markers)\n  let singleCount = 0;\n  let lastSingleIndex = -1;\n\n  for (let i = 0; i < content.length; i++) {\n    if (content[i] === marker) {\n      // Check if it's a list marker\n      if (isListMarker(content, i, marker)) {\n        continue;\n      }\n\n      // Check if it's part of a double marker\n      const prevIsMarker = i > 0 && content[i - 1] === marker;\n      const nextIsMarker = i < content.length - 1 && content[i + 1] === marker;\n\n      if (prevIsMarker || nextIsMarker) {\n        // Part of ** or __, skip\n        if (nextIsMarker) {\n          i++; // Skip the next one too\n        }\n        continue;\n      }\n\n      singleCount++;\n      lastSingleIndex = i;\n    }\n  }\n\n  if (singleCount % 2 === 0) {\n    return false; // All paired\n  }\n\n  if (lastSingleIndex === -1) {\n    return false;\n  }\n\n  // If content ends with the marker, it's an opener that needs closing\n  // (e.g., \"*text* more *\" - the last * is a new opener)\n  // BUT only if there's content before it (not just a lone marker)\n  if (lastSingleIndex === content.length - 1) {\n    // Must have content before the marker for it to be a meaningful opener\n    return lastSingleIndex > 0;\n  }\n\n  // Otherwise, check if there's content after the last unpaired marker\n  const afterMarker = content.slice(lastSingleIndex + 1);\n  return afterMarker.length > 0;\n}\n\n/**\n * Checks if content has an unclosed code block.\n * Returns true if the last ``` opens a block that isn't closed.\n */\nfunction hasUnclosedCodeBlock(content: string): boolean {\n  // Find all ``` occurrences\n  const fenceRegex = /```/g;\n  const matches: number[] = [];\n  let match;\n\n  while ((match = fenceRegex.exec(content)) !== null) {\n    matches.push(match.index);\n  }\n\n  // Odd number of fences means unclosed\n  return matches.length % 2 === 1;\n}\n\n/**\n * Completes unterminated markdown syntax at the end of content.\n * This allows streaming markdown to be parsed correctly even when syntax is incomplete.\n *\n * Handles:\n * - Headings (# Heading)\n * - Inline code (`code)\n * - Bold (**text or __text)\n * - Italic (*text or _text)\n * - Links ([text](url or [text]()\n * - Code blocks (```language\\ncode)\n * - Lists (- item or * item or 1. item)\n * - Blockquotes (> text)\n * - Strikethrough (~~text)\n */\nexport function completeUnterminatedMarkdown(content: string): string {\n  if (!content.trim()) {\n    return content;\n  }\n\n  // Work backwards from the end to find the last incomplete markdown pattern\n  const trimmed = content.trimEnd();\n  const trailingWhitespace = content.slice(trimmed.length);\n  let result = trimmed;\n\n  // Check for incomplete code fence without newline yet (e.g., \"```python\" with no \\n)\n  // This must come before the code block check\n  const incompleteFenceMatch = result.match(/```[\\w-]*$/);\n  if (incompleteFenceMatch && !result.includes(\"```\\n\") && !result.match(/```[\\w-]+\\n/)) {\n    // Code fence just started, hasn't gotten content yet - add newline and closing\n    result += \"\\n```\";\n    return result + trailingWhitespace;\n  }\n\n  // Check for incomplete code blocks using fence counting\n  if (hasUnclosedCodeBlock(result)) {\n    result += \"\\n```\";\n    return result + trailingWhitespace;\n  }\n\n  // Check for incomplete inline code (backticks)\n  // Count backticks that are NOT part of code fences\n  // First, remove all code fence markers to count only inline backticks\n  const withoutFences = result.replace(/```[\\w-]*/g, \"\");\n  const backtickCount = (withoutFences.match(/`/g) || []).length;\n  if (backtickCount % 2 === 1) {\n    result += \"`\";\n    return result + trailingWhitespace;\n  }\n\n  // Check for incomplete links [text](url\n  const linkMatch = result.match(/\\[([^\\]]*)\\]\\(([^)]*)$/);\n  if (linkMatch) {\n    // Incomplete link - close the URL part\n    result += \")\";\n    return result + trailingWhitespace;\n  }\n\n  // Check for incomplete bold (**text or __text)\n  // Only complete if there's actual content after the marker\n  if (hasUnpairedDoubleMarkerWithContent(result, \"**\")) {\n    result += \"**\";\n    return result + trailingWhitespace;\n  }\n\n  if (hasUnpairedDoubleMarkerWithContent(result, \"__\")) {\n    result += \"__\";\n    return result + trailingWhitespace;\n  }\n\n  // Check for incomplete strikethrough (~~text)\n  if (hasUnpairedStrikethroughWithContent(result)) {\n    result += \"~~\";\n    return result + trailingWhitespace;\n  }\n\n  // Check structural elements BEFORE italic to avoid false positives\n  // (e.g., \"* item\" is a list, not italic)\n  const lines = result.split(\"\\n\");\n  const lastLine = lines[lines.length - 1];\n\n  // Check for incomplete headings (# Heading without newline)\n  // Look for # at the start of the last line\n  if (lastLine.match(/^#{1,6}\\s+.+$/)) {\n    // Heading without trailing newline - add one for proper parsing\n    result += \"\\n\";\n    return result + trailingWhitespace;\n  }\n\n  // Check for incomplete list items (- item, * item, 1. item)\n  // Look for list markers at the start of the last line\n  if (lastLine.match(/^(\\s*)([-*+]|\\d+\\.)\\s+.+$/)) {\n    // List item without trailing newline - add one for proper parsing\n    result += \"\\n\";\n    return result + trailingWhitespace;\n  }\n\n  // Check for incomplete blockquotes (> text)\n  if (lastLine.match(/^>\\s+.+$/)) {\n    // Blockquote without trailing newline - add one for proper parsing\n    result += \"\\n\";\n    return result + trailingWhitespace;\n  }\n\n  // Check for incomplete italic (*text or _text) AFTER structural elements\n  // This prevents \"* item\" from being treated as italic\n  if (hasUnpairedItalicWithContent(result, \"*\")) {\n    result += \"*\";\n    return result + trailingWhitespace;\n  }\n\n  if (hasUnpairedItalicWithContent(result, \"_\")) {\n    result += \"_\";\n    return result + trailingWhitespace;\n  }\n\n  return result + trailingWhitespace;\n}\n\n/**\n * Parses markdown content into blocks for efficient rendering.\n * Each block is a separate markdown token that can be memoized independently.\n *\n * @param content - The markdown content to parse\n * @param parser - Optional parser function (defaults to using marked.lexer)\n * @returns Array of markdown block strings\n */\nexport function parseMarkdownIntoBlocks(\n  content: string,\n  parser?: (content: string) => Array<{ raw?: string }>\n): string[] {\n  if (!content.trim()) {\n    return [];\n  }\n\n  // Complete unterminated markdown blocks for streaming support\n  const completedContent = completeUnterminatedMarkdown(content);\n\n  // If no parser provided, return the content as a single block\n  // This allows usage without marked dependency\n  if (!parser) {\n    return [completedContent];\n  }\n\n  const tokens = parser(completedContent);\n  return tokens\n    .map((token) => {\n      if (\"raw\" in token && typeof token.raw === \"string\") {\n        return token.raw;\n      }\n      return \"\";\n    })\n    .filter((raw) => Boolean(raw.trim()));\n}\n\n"],
+  "mappings": "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",
+  "names": ["hasUnpairedDoubleMarkerWithContent", "content", "marker", "escaped", "regex", "lastIndex", "hasUnpairedStrikethroughWithContent", "isListMarker", "i", "isStartOfLine", "followedBySpace", "hasUnpairedItalicWithContent", "singleCount", "lastSingleIndex", "prevIsMarker", "nextIsMarker", "hasUnclosedCodeBlock", "fenceRegex", "matches", "match", "completeUnterminatedMarkdown", "trimmed", "trailingWhitespace", "result", "lines", "lastLine", "parseMarkdownIntoBlocks", "parser", "completedContent", "token", "raw"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kushagradhawan/kookie-blocks",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/KushagraDhawan1997/kookie-blocks.git"
@@ -93,6 +93,10 @@
   "dependencies": {
     "@hugeicons/core-free-icons": "^2.0.0",
     "@hugeicons/react": "^1.1.1",
+    "harden-react-markdown": "^1.1.0",
+    "react-markdown": "^9.0.1",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.0",
     "shiki": "^1.24.2"
   },
   "peerDependencies": {
@@ -100,6 +104,11 @@
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
+  "peerDependenciesMeta": {
+    "marked": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@eslint/js": "^9.18.0",
     "@types/react": "^19.0.2",

package/src/components/index.ts

@@ -1,2 +1,3 @@
 export * from './code';
 export * from './hero';
+export * from './markdown';

package/src/components/markdown/StreamingMarkdown.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import React, { memo, useMemo, type ReactNode } from "react";
+import ReactMarkdown, { type Components } from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeRaw from "rehype-raw";
+import hardenReactMarkdown from "harden-react-markdown";
+import { Box, Flex } from "@kushagradhawan/kookie-ui";
+import { createMarkdownComponents } from "./createMarkdownComponents";
+import { completeUnterminatedMarkdown, parseMarkdownIntoBlocks } from "./utils/markdownStreaming";
+import type { MarkdownComponentOptions } from "./types";
+
+const HardenedMarkdown = hardenReactMarkdown(ReactMarkdown);
+
+const LINK_PREFIXES = ["https://", "http://", "/"];
+const IMAGE_PREFIXES = ["https://", "http://", "/", "data:"];
+const ALLOWED_PROTOCOLS = ["mailto:", "tel:", "data:", "http:", "https:"];
+const DEFAULT_APP_ORIGIN = typeof window !== "undefined" && window.location?.origin ? window.location.origin : "https://app.kookie.ai";
+
+/**
+ * Options for StreamingMarkdown component
+ */
+export type StreamingMarkdownOptions = MarkdownComponentOptions & {
+  /**
+   * Security origin for link/image validation
+   * @default window.location.origin or "https://app.kookie.ai"
+   */
+  defaultOrigin?: string;
+
+  /**
+   * Whether to enable block-level memoization for performance
+   * Recommended for streaming scenarios where content updates frequently
+   * @default true
+   */
+  enableBlockMemoization?: boolean;
+
+  /**
+   * Custom parser for splitting content into blocks
+   * If not provided, content will be rendered as a single block
+   * For optimal streaming performance, use marked.lexer with GFM enabled
+   */
+  blockParser?: (content: string) => Array<{ raw?: string }>;
+
+  /**
+   * Override default component mappings
+   */
+  components?: Partial<Components>;
+};
+
+type StreamingMarkdownProps = {
+  /**
+   * Markdown content to render (supports streaming/incomplete markdown)
+   */
+  content: string;
+
+  /**
+   * Unique identifier for this markdown instance (used for keys)
+   */
+  id: string;
+
+  /**
+   * Optional configuration
+   */
+  options?: StreamingMarkdownOptions;
+};
+
+type MarkdownBlockProps = {
+  content: string;
+  defaultOrigin: string;
+  components: Components;
+};
+
+/**
+ * Resolves the default origin for security validation
+ */
+function resolveDefaultOrigin(customOrigin?: string): string {
+  if (customOrigin) {
+    return customOrigin;
+  }
+  return DEFAULT_APP_ORIGIN;
+}
+
+/**
+ * Memoized markdown block component for efficient streaming rendering
+ */
+const MarkdownBlock = memo(
+  ({ content, defaultOrigin, components }: MarkdownBlockProps) => {
+    return (
+      <Box width="100%">
+        <HardenedMarkdown
+          defaultOrigin={defaultOrigin}
+          allowedLinkPrefixes={LINK_PREFIXES}
+          allowedImagePrefixes={IMAGE_PREFIXES}
+          allowedProtocols={ALLOWED_PROTOCOLS}
+          allowDataImages
+          components={components}
+          remarkPlugins={[remarkGfm]}
+          rehypePlugins={[rehypeRaw]}
+        >
+          {content}
+        </HardenedMarkdown>
+      </Box>
+    );
+  },
+  (previous, next) => previous.content === next.content && previous.defaultOrigin === next.defaultOrigin && previous.components === next.components
+);
+
+MarkdownBlock.displayName = "MarkdownBlock";
+
+/**
+ * StreamingMarkdown - A drop-in markdown renderer designed for AI streaming.
+ *
+ * Features:
+ * - Unterminated block parsing (handles incomplete markdown during streaming)
+ * - Block-level memoization for performance
+ * - Security hardening (validates links/images)
+ * - GitHub Flavored Markdown support
+ * - KookieUI component integration
+ * - Code syntax highlighting via CodeBlock
+ *
+ * @example
+ * ```tsx
+ * import { StreamingMarkdown } from '@kushagradhawan/kookie-blocks';
+ * import { marked } from 'marked';
+ *
+ * function ChatMessage({ message }) {
+ *   return (
+ *     <StreamingMarkdown
+ *       content={message.content}
+ *       id={message.id}
+ *       options={{
+ *         blockParser: (content) => marked.lexer(content, { gfm: true }),
+ *         enableBlockMemoization: true,
+ *       }}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export function StreamingMarkdown({ content, id, options = {} }: StreamingMarkdownProps) {
+  const { defaultOrigin: customOrigin, enableBlockMemoization = true, blockParser, components: customComponents = {}, ...componentOptions } = options;
+
+  // Resolve security origin
+  const defaultOrigin = useMemo(() => resolveDefaultOrigin(customOrigin), [customOrigin]);
+
+  // Create component mappings with custom overrides
+  const markdownComponents = useMemo(() => {
+    const baseComponents = createMarkdownComponents(componentOptions);
+    return {
+      ...baseComponents,
+      ...customComponents,
+    };
+  }, [componentOptions, customComponents]);
+
+  // Parse content into blocks for memoization (if enabled and parser provided)
+  const blocks = useMemo(() => {
+    if (!enableBlockMemoization || !blockParser) {
+      // No block splitting - just complete unterminated markdown
+      const completed = completeUnterminatedMarkdown(content);
+      return completed.trim() ? [completed] : [];
+    }
+
+    return parseMarkdownIntoBlocks(content, blockParser);
+  }, [content, enableBlockMemoization, blockParser]);
+
+  if (!blocks.length) {
+    return null;
+  }
+
+  // Single block - no need for wrapper
+  if (blocks.length === 1) {
+    return <MarkdownBlock content={blocks[0]} defaultOrigin={defaultOrigin} components={markdownComponents} />;
+  }
+
+  // Multiple blocks - render with flex wrapper
+  return (
+    <Flex direction="column" gap="2" width="100%">
+      {blocks.map((block, index) => (
+        <MarkdownBlock key={`${id}-block-${index}`} content={block} defaultOrigin={defaultOrigin} components={markdownComponents} />
+      ))}
+    </Flex>
+  );
+}

package/src/components/markdown/createMarkdownComponents.tsx

@@ -0,0 +1,206 @@
+import React, { type ReactNode } from "react";
+import type { Components } from "react-markdown";
+import { Blockquote, Box, Code, Flex, Heading, Text, Table } from "@kushagradhawan/kookie-ui";
+import { CodeBlock } from "../code";
+import type { MarkdownComponentOptions, MarkdownChildrenProps } from "./types";
+
+/**
+ * Extracts language from className (e.g., "language-typescript" -> "typescript")
+ */
+function extractLanguage(className?: string): string {
+  if (!className) {
+    return "text";
+  }
+  const match = className.match(/language-([\w-]+)/i);
+  return match?.[1] ?? "text";
+}
+
+/**
+ * Extracts code string from ReactNode children
+ */
+function extractCode(children?: ReactNode): string {
+  let code = "";
+  if (!children) {
+    return code;
+  }
+  if (typeof children === "string") {
+    code = children;
+  } else if (Array.isArray(children)) {
+    code = children.map((child) => (typeof child === "string" ? child : "")).join("");
+  }
+  // Trim trailing newlines but preserve internal whitespace
+  return code.replace(/^\n+|\n+$/g, "");
+}
+
+/**
+ * Creates markdown component mappings that work with both react-markdown and MDX.
+ * Uses KookieUI components for consistent styling across all projects.
+ *
+ * @param options - Optional configuration for component behavior
+ * @returns Component mappings for markdown/MDX renderers
+ *
+ * @example
+ * ```tsx
+ * // In react-markdown
+ * <ReactMarkdown components={createMarkdownComponents()}>
+ *   {content}
+ * </ReactMarkdown>
+ *
+ * // In MDX
+ * export function useMDXComponents(components: MDXComponents) {
+ *   return {
+ *     ...createMarkdownComponents(),
+ *     ...components,
+ *   };
+ * }
+ * ```
+ */
+export function createMarkdownComponents(options: MarkdownComponentOptions = {}): Components {
+  const { codeBlockCollapsible = false, imageComponent, inlineCodeHighContrast = true } = options;
+
+  return {
+    // Headings with consistent visual hierarchy
+    h1: ({ children }: MarkdownChildrenProps) => (
+      <Heading size="8" weight="medium" as="h1" style={{ marginTop: "1rem", marginBottom: "0.5rem" }}>
+        {children}
+      </Heading>
+    ),
+    h2: ({ children }: MarkdownChildrenProps) => (
+      <Heading weight="medium" size="5" as="h2" style={{ marginTop: "0.875rem", marginBottom: "0.5rem" }}>
+        {children}
+      </Heading>
+    ),
+    h3: ({ children }: MarkdownChildrenProps) => (
+      <Heading weight="medium" size="4" as="h3" style={{ marginTop: "0.75rem", marginBottom: "0.5rem" }}>
+        {children}
+      </Heading>
+    ),
+    h4: ({ children }: MarkdownChildrenProps) => (
+      <Heading weight="medium" size="3" as="h4" style={{ marginTop: "0.625rem", marginBottom: "0.5rem" }}>
+        {children}
+      </Heading>
+    ),
+    h5: ({ children }: MarkdownChildrenProps) => (
+      <Heading weight="medium" size="3" as="h5" style={{ marginTop: "0.5rem", marginBottom: "0.5rem" }}>
+        {children}
+      </Heading>
+    ),
+    h6: ({ children }: MarkdownChildrenProps) => (
+      <Heading weight="medium" size="3" as="h6" style={{ marginTop: "0.5rem", marginBottom: "0.5rem" }}>
+        {children}
+      </Heading>
+    ),
+
+    // Paragraph text
+    p: ({ children }: MarkdownChildrenProps) => (
+      <Text size="3" as="p" style={{ lineHeight: "1.6" }}>
+        {children}
+      </Text>
+    ),
+
+    // Code - inline vs block
+    code: ({ className, children, inline }: { className?: string; children?: ReactNode; inline?: boolean }) => {
+      const code = extractCode(children);
+
+      // Block code: has className (language) OR is not marked as inline
+      // Inline code: explicitly marked as inline=true, or no className and short single-line content
+      const isInlineCode = inline === true || (inline === undefined && !className && !code.includes("\n") && code.length < 100);
+
+      if (isInlineCode) {
+        return (
+          <Code highContrast={inlineCodeHighContrast} size="3">
+            {code}
+          </Code>
+        );
+      }
+
+      return (
+        <Box my="2" style={{ minWidth: 0 }}>
+          <CodeBlock code={code} language={extractLanguage(className)} collapsible={codeBlockCollapsible} />
+        </Box>
+      );
+    },
+
+    // Lists
+    ul: ({ children }: MarkdownChildrenProps) => (
+      <ul style={{ marginTop: "0.5rem", marginBottom: "0.5rem", lineHeight: "1.6", paddingLeft: "1.5rem", listStyleType: "disc" }}>{children}</ul>
+    ),
+    ol: ({ children }: MarkdownChildrenProps) => (
+      <ol style={{ marginTop: "0.5rem", marginBottom: "0.5rem", lineHeight: "1.6", paddingLeft: "1.5rem", listStyleType: "decimal" }}>{children}</ol>
+    ),
+    li: ({ children }: MarkdownChildrenProps) => <li style={{ marginBottom: "0.25rem", lineHeight: "1.6" }}>{children}</li>,
+
+    // Blockquote
+    blockquote: ({ children }: MarkdownChildrenProps) => <Blockquote>{children}</Blockquote>,
+
+    // Links
+    a: ({ href, children }: { href?: string; children?: ReactNode }) => (
+      <a href={href} style={{ color: "var(--accent-9)", textDecoration: "underline" }}>
+        {children}
+      </a>
+    ),
+
+    // Text styling
+    strong: ({ children }: MarkdownChildrenProps) => (
+      <Text weight="medium" style={{ lineHeight: "1.6" }}>
+        {children}
+      </Text>
+    ),
+    em: ({ children }: MarkdownChildrenProps) => <Text style={{ lineHeight: "1.6", fontStyle: "italic" }}>{children}</Text>,
+
+    // Horizontal rule
+    hr: () => (
+      <hr
+        style={{
+          color: "var(--gray-6)",
+          marginTop: "0.5rem",
+          marginBottom: "0.5rem",
+          height: "1px",
+          width: "100%",
+          opacity: 0.5,
+        }}
+      />
+    ),
+
+    // Pre wrapper (pass through to let code handle it)
+    pre: ({ children }: MarkdownChildrenProps) => <>{children}</>,
+
+    // Tables using KookieUI
+    table: ({ children }: MarkdownChildrenProps) => (
+      <Box my="2" style={{ overflowX: "auto" }}>
+        <Table.Root size="2" variant="ghost">
+          {children}
+        </Table.Root>
+      </Box>
+    ),
+    thead: ({ children }: MarkdownChildrenProps) => <Table.Header>{children}</Table.Header>,
+    tbody: ({ children }: MarkdownChildrenProps) => <Table.Body>{children}</Table.Body>,
+    tr: ({ children }: MarkdownChildrenProps) => <Table.Row>{children}</Table.Row>,
+    th: ({ children }: MarkdownChildrenProps) => <Table.ColumnHeaderCell>{children}</Table.ColumnHeaderCell>,
+    td: ({ children }: MarkdownChildrenProps) => <Table.Cell>{children}</Table.Cell>,
+
+    // HTML elements for raw HTML support
+    sub: ({ children }: MarkdownChildrenProps) => <sub>{children}</sub>,
+    sup: ({ children }: MarkdownChildrenProps) => <sup>{children}</sup>,
+    br: () => <br />,
+
+    // Images - use custom component if provided
+    img: imageComponent
+      ? (props: React.ImgHTMLAttributes<HTMLImageElement>) => {
+          const { src, alt, width, height } = props;
+          if (!src || typeof src !== "string") return null;
+          return imageComponent({
+            src,
+            alt: alt ?? "Image",
+            width: width ? String(width) : undefined,
+            height: height ? String(height) : undefined,
+          });
+        }
+      : undefined,
+
+    // Details/Summary for expandable sections
+    details: ({ children }: MarkdownChildrenProps) => <details style={{ padding: "0.5rem 0" }}>{children}</details>,
+    summary: ({ children }: MarkdownChildrenProps) => <summary style={{ cursor: "pointer", fontWeight: 500 }}>{children}</summary>,
+  };
+}
+

package/src/components/markdown/index.ts

@@ -0,0 +1,8 @@
+export { StreamingMarkdown } from "./StreamingMarkdown";
+export type { StreamingMarkdownOptions } from "./StreamingMarkdown";
+
+export { createMarkdownComponents } from "./createMarkdownComponents";
+export type { MarkdownComponentOptions, MarkdownChildrenProps } from "./types";
+
+export { completeUnterminatedMarkdown, parseMarkdownIntoBlocks } from "./utils/markdownStreaming";
+