npm - @kushagradhawan/kookie-blocks - Versions diffs - 0.1.16 → 0.1.18 - Mend

@kushagradhawan/kookie-blocks 0.1.16 → 0.1.18

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 (99) hide show

package/dist/cjs/components/markdown/create-markdown-components.js CHANGED Viewed

@@ -1,3 +1,3 @@
-"use strict";var u=Object.create;var a=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var M=(o,i)=>{for(var t in i)a(o,t,{get:i[t],enumerable:!0})},p=(o,i,t,s)=>{if(i&&typeof i=="object"||typeof i=="function")for(let e of w(i))!k.call(o,e)&&e!==t&&a(o,e,{get:()=>i[e],enumerable:!(s=C(i,e))||s.enumerable});return o};var f=(o,i,t)=>(t=o!=null?u(y(o)):{},p(i||!o||!o.__esModule?a(t,"default",{value:o,enumerable:!0}):t,o)),P=o=>p(a({},"__esModule",{value:!0}),o);var B={};M(B,{createMarkdownComponents:()=>b});module.exports=P(B);var r=f(require("react")),n=require("@kushagradhawan/kookie-ui"),h=require("../code");function T(o){return o?o.match(/language-([\w-]+)/i)?.[1]??"text":"text"}function H(o){let i="";return o?(typeof o=="string"?i=o:Array.isArray(o)&&(i=o.map(t=>typeof t=="string"?t:"").join("")),i.replace(/^\n+|\n+$/g,"")):i}function b(o={}){const{codeBlockCollapsible:i=!1,imageComponent:t,inlineCodeHighContrast:s=!0}=o;return{h1:({children:e})=>r.default.createElement(n.Heading,{size:"9",weight:"medium",as:"h1",style:{marginTop:"1rem",marginBottom:"0.5rem"}},e),h2:({children:e})=>r.default.createElement(n.Heading,{weight:"medium",size:"6",as:"h2",style:{marginTop:"0.875rem",marginBottom:"0.5rem"}},e),h3:({children:e})=>r.default.createElement(n.Heading,{weight:"medium",size:"5",as:"h3",style:{marginTop:"0.75rem",marginBottom:"0.5rem"}},e),h4:({children:e})=>r.default.createElement(n.Heading,{weight:"medium",size:"4",as:"h4",style:{marginTop:"0.625rem",marginBottom:"0.5rem"}},e),h5:({children:e})=>r.default.createElement(n.Heading,{weight:"medium",size:"3",as:"h5",style:{marginTop:"0.5rem",marginBottom:"0.5rem"}},e),h6:({children:e})=>r.default.createElement(n.Heading,{weight:"medium",size:"2",as:"h6",style:{marginTop:"0.5rem",marginBottom:"0.5rem"}},e),p:({children:e})=>r.default.createElement(n.Text,{size:"3",as:"p",style:{lineHeight:"1.6"}},e),code:({className:e,children:d,inline:m})=>{const l=H(d);return m===!0||m===void 0&&!e&&!l.includes(`
-`)&&l.length<100?r.default.createElement(n.Code,{highContrast:s,size:"3"},l):r.default.createElement(n.Box,{my:"2",style:{minWidth:0}},r.default.createElement(h.CodeBlock,{code:l,language:T(e),collapsible:i}))},ul:({children:e})=>r.default.createElement("ul",{style:{marginTop:"0.5rem",marginBottom:"0.5rem",lineHeight:"1.6",paddingLeft:"1.5rem",listStyleType:"disc"}},e),ol:({children:e})=>r.default.createElement("ol",{style:{marginTop:"0.5rem",marginBottom:"0.5rem",lineHeight:"1.6",paddingLeft:"1.5rem",listStyleType:"decimal"}},e),li:({children:e})=>r.default.createElement("li",{style:{marginBottom:"0.25rem",lineHeight:"1.6"}},e),blockquote:({children:e})=>r.default.createElement(n.Blockquote,null,e),a:({href:e,children:d})=>r.default.createElement("a",{href:e,style:{color:"var(--accent-9)",textDecoration:"underline"}},d),strong:({children:e})=>r.default.createElement(n.Text,{weight:"medium",style:{lineHeight:"1.6"}},e),em:({children:e})=>r.default.createElement(n.Text,{style:{lineHeight:"1.6",fontStyle:"italic"}},e),hr:()=>r.default.createElement("hr",{style:{color:"var(--gray-6)",marginTop:"0.5rem",marginBottom:"0.5rem",height:"1px",width:"100%",opacity:.5}}),pre:({children:e})=>r.default.createElement(r.default.Fragment,null,e),table:({children:e})=>r.default.createElement(n.Box,{my:"2",style:{overflowX:"auto"}},r.default.createElement(n.Table.Root,{size:"2",variant:"ghost"},e)),thead:({children:e})=>r.default.createElement(n.Table.Header,null,e),tbody:({children:e})=>r.default.createElement(n.Table.Body,null,e),tr:({children:e})=>r.default.createElement(n.Table.Row,null,e),th:({children:e})=>r.default.createElement(n.Table.ColumnHeaderCell,null,e),td:({children:e})=>r.default.createElement(n.Table.Cell,null,e),sub:({children:e})=>r.default.createElement("sub",null,e),sup:({children:e})=>r.default.createElement("sup",null,e),br:()=>r.default.createElement("br",null),img:t?e=>{const{src:d,alt:m,width:l,height:g}=e;return!d||typeof d!="string"?null:t({src:d,alt:m??"Image",width:l?String(l):void 0,height:g?String(g):void 0})}:void 0,details:({children:e})=>r.default.createElement("details",{style:{padding:"0.5rem 0"}},e),summary:({children:e})=>r.default.createElement("summary",{style:{cursor:"pointer",fontWeight:500}},e)}}
+"use strict";var T=Object.create;var u=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var H=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var z=(t,n)=>{for(var m in n)u(t,m,{get:n[m],enumerable:!0})},M=(t,n,m,h)=>{if(n&&typeof n=="object"||typeof n=="function")for(let l of B(n))!x.call(t,l)&&l!==m&&u(t,l,{get:()=>n[l],enumerable:!(h=c(n,l))||h.enumerable});return t};var I=(t,n,m)=>(m=t!=null?T(H(t)):{},M(n||!t||!t.__esModule?u(m,"default",{value:t,enumerable:!0}):m,t)),S=t=>M(u({},"__esModule",{value:!0}),t);var A={};z(A,{createMarkdownComponents:()=>v});module.exports=S(A);var e=I(require("react")),r=require("@kushagradhawan/kookie-ui"),k=require("../code");function L(t){return t?t.match(/language-([\w-]+)/i)?.[1]??"text":"text"}function q(t){let n="";return t?(typeof t=="string"?n=t:Array.isArray(t)&&(n=t.map(m=>typeof m=="string"?m:"").join("")),n.replace(/^\n+|\n+$/g,"")):n}function v(t={}){const{codeBlockCollapsible:n=!1,imageComponent:m,inlineCodeHighContrast:h=!0,spacing:l="spacious"}=t,i=l==="compact",s={h1:{top:i?"1.5rem":"3rem",bottom:i?"1rem":"1.5rem"},h2:{top:i?"2rem":"3rem",bottom:i?"0.375rem":"0.5rem"},h3:{top:i?"1.5rem":"2rem",bottom:i?"0.375rem":"0.5rem"},h4:{top:i?"0.5rem":"0.625rem",bottom:i?"0.25rem":"0.5rem"},h5:{top:i?"0.375rem":"0.5rem",bottom:i?"0.25rem":"0.5rem"},h6:{top:i?"0.375rem":"0.5rem",bottom:i?"0.25rem":"0.5rem"}},p=i?"0.25rem":"0.5rem",b=i?"0.125rem":"0.25rem",f=i?"1":"2",w=i?"0.375rem":"0.5rem",y=i?"0":"0.5rem",P=i?"0.5rem":"1rem";return{h1:({children:o})=>e.default.createElement(r.Heading,{size:"9",weight:"medium",as:"h1",style:{marginTop:s.h1.top,marginBottom:s.h1.bottom}},o),h2:({children:o})=>e.default.createElement(r.Heading,{weight:"medium",size:"7",as:"h2",style:{marginTop:s.h2.top,marginBottom:s.h2.bottom}},o),h3:({children:o})=>e.default.createElement(r.Heading,{weight:"medium",size:"5",as:"h3",style:{marginTop:s.h3.top,marginBottom:s.h3.bottom}},o),h4:({children:o})=>e.default.createElement(r.Heading,{weight:"medium",size:"4",as:"h4",style:{marginTop:s.h4.top,marginBottom:s.h4.bottom}},o),h5:({children:o})=>e.default.createElement(r.Heading,{weight:"medium",size:"3",as:"h5",style:{marginTop:s.h5.top,marginBottom:s.h5.bottom}},o),h6:({children:o})=>e.default.createElement(r.Heading,{weight:"medium",size:"2",as:"h6",style:{marginTop:s.h6.top,marginBottom:s.h6.bottom}},o),p:({children:o})=>e.default.createElement(r.Text,{size:"3",as:"p",style:{lineHeight:"1.6",marginTop:y,marginBottom:y}},o),code:({className:o,children:d,inline:g})=>{const a=q(d);return g===!0||g===void 0&&!o&&!a.includes(`
+`)&&a.length<100?e.default.createElement(r.Code,{highContrast:h,size:"3"},a):e.default.createElement(r.Box,{my:f,style:{minWidth:0}},e.default.createElement(k.CodeBlock,{code:a,language:L(o),collapsible:n}))},ul:({children:o})=>e.default.createElement("ul",{style:{marginTop:p,marginBottom:p,lineHeight:"1.6",paddingLeft:"1.5rem",listStyleType:"disc"}},o),ol:({children:o})=>e.default.createElement("ol",{style:{marginTop:p,marginBottom:p,lineHeight:"1.6",paddingLeft:"1.5rem",listStyleType:"decimal"}},o),li:({children:o})=>e.default.createElement("li",{style:{marginBottom:b,lineHeight:"1.6"}},o),blockquote:({children:o})=>e.default.createElement(r.Blockquote,{size:"1",my:P},o),a:({href:o,children:d})=>e.default.createElement("a",{href:o,style:{color:"var(--accent-9)",textDecoration:"underline"}},d),strong:({children:o})=>e.default.createElement(r.Text,{weight:"medium",style:{lineHeight:"1.6"}},o),em:({children:o})=>e.default.createElement(r.Text,{style:{lineHeight:"1.6",fontStyle:"italic"}},o),hr:()=>e.default.createElement(r.Box,{style:{marginTop:w,marginBottom:w}},e.default.createElement(r.Separator,{orientation:"horizontal",light:!0})),pre:({children:o})=>e.default.createElement(e.default.Fragment,null,o),table:({children:o})=>e.default.createElement(r.Box,{my:"2",style:{overflowX:"auto"}},e.default.createElement(r.Table.Root,{size:"2",variant:"ghost"},o)),thead:({children:o})=>e.default.createElement(r.Table.Header,null,o),tbody:({children:o})=>e.default.createElement(r.Table.Body,null,o),tr:({children:o})=>e.default.createElement(r.Table.Row,null,o),th:({children:o})=>e.default.createElement(r.Table.ColumnHeaderCell,null,o),td:({children:o})=>e.default.createElement(r.Table.Cell,null,o),sub:({children:o})=>e.default.createElement("sub",null,o),sup:({children:o})=>e.default.createElement("sup",null,o),br:()=>e.default.createElement("br",null),img:m?o=>{const{src:d,alt:g,width:a,height:C}=o;return!d||typeof d!="string"?null:m({src:d,alt:g??"Image",width:a?String(a):void 0,height:C?String(C):void 0})}:void 0,details:({children:o})=>e.default.createElement("details",{style:{padding:"0.5rem 0"}},o),summary:({children:o})=>e.default.createElement("summary",{style:{cursor:"pointer",fontWeight:500}},o)}}
 //# sourceMappingURL=create-markdown-components.js.map

package/dist/cjs/components/markdown/create-markdown-components.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/markdown/create-markdown-components.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 (9-6-5-4-3-2)\n    h1: ({ children }: MarkdownChildrenProps) => (\n      <Heading size=\"9\" weight=\"medium\" as=\"h1\" style={{ marginTop: \"1rem\", marginBottom: \"0.5rem\" }}>\n        {children}\n      </Heading>\n    ),\n    h2: ({ children }: MarkdownChildrenProps) => (\n      <Heading weight=\"medium\" size=\"6\" as=\"h2\" style={{ marginTop: \"0.875rem\", marginBottom: \"0.5rem\" }}>\n        {children}\n      </Heading>\n    ),\n    h3: ({ children }: MarkdownChildrenProps) => (\n      <Heading weight=\"medium\" size=\"5\" as=\"h3\" style={{ marginTop: \"0.75rem\", marginBottom: \"0.5rem\" }}>\n        {children}\n      </Heading>\n    ),\n    h4: ({ children }: MarkdownChildrenProps) => (\n      <Heading weight=\"medium\" size=\"4\" 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=\"2\" 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"],
-  "mappings": "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",
-  "names": ["create_markdown_components_exports", "__export", "createMarkdownComponents", "__toCommonJS", "import_react", "import_kookie_ui", "import_code", "extractLanguage", "className", "extractCode", "children", "code", "child", "options", "codeBlockCollapsible", "imageComponent", "inlineCodeHighContrast", "React", "inline", "href", "props", "src", "alt", "width", "height"]
+  "sourcesContent": ["import React, { type ReactNode } from \"react\";\nimport type { Components } from \"react-markdown\";\nimport { Blockquote, Box, Code, Flex, Heading, Text, Table, Separator } 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, spacing = \"spacious\" } = options;\n\n  // Spacing configuration\n  const isCompact = spacing === \"compact\";\n  const headingMargins = {\n    h1: { top: isCompact ? \"1.5rem\" : \"3rem\", bottom: isCompact ? \"1rem\" : \"1.5rem\" },\n    h2: { top: isCompact ? \"2rem\" : \"3rem\", bottom: isCompact ? \"0.375rem\" : \"0.5rem\" },\n    h3: { top: isCompact ? \"1.5rem\" : \"2rem\", bottom: isCompact ? \"0.375rem\" : \"0.5rem\" },\n    h4: { top: isCompact ? \"0.5rem\" : \"0.625rem\", bottom: isCompact ? \"0.25rem\" : \"0.5rem\" },\n    h5: { top: isCompact ? \"0.375rem\" : \"0.5rem\", bottom: isCompact ? \"0.25rem\" : \"0.5rem\" },\n    h6: { top: isCompact ? \"0.375rem\" : \"0.5rem\", bottom: isCompact ? \"0.25rem\" : \"0.5rem\" },\n  };\n  const listMargin = isCompact ? \"0.25rem\" : \"0.5rem\";\n  const listItemMargin = isCompact ? \"0.125rem\" : \"0.25rem\";\n  const codeBlockMargin = isCompact ? \"1\" : \"2\";\n  const hrMargin = isCompact ? \"0.375rem\" : \"0.5rem\";\n  const paragraphMargin = isCompact ? \"0\" : \"0.5rem\";\n  const blockquoteMargin = isCompact ? \"0.5rem\" : \"1rem\";\n\n  return {\n    // Headings with consistent visual hierarchy (9-6-5-4-3-2)\n    h1: ({ children }: MarkdownChildrenProps) => (\n      <Heading size=\"9\" weight=\"medium\" as=\"h1\" style={{ marginTop: headingMargins.h1.top, marginBottom: headingMargins.h1.bottom }}>\n        {children}\n      </Heading>\n    ),\n    h2: ({ children }: MarkdownChildrenProps) => (\n      <Heading weight=\"medium\" size=\"7\" as=\"h2\" style={{ marginTop: headingMargins.h2.top, marginBottom: headingMargins.h2.bottom }}>\n        {children}\n      </Heading>\n    ),\n    h3: ({ children }: MarkdownChildrenProps) => (\n      <Heading weight=\"medium\" size=\"5\" as=\"h3\" style={{ marginTop: headingMargins.h3.top, marginBottom: headingMargins.h3.bottom }}>\n        {children}\n      </Heading>\n    ),\n    h4: ({ children }: MarkdownChildrenProps) => (\n      <Heading weight=\"medium\" size=\"4\" as=\"h4\" style={{ marginTop: headingMargins.h4.top, marginBottom: headingMargins.h4.bottom }}>\n        {children}\n      </Heading>\n    ),\n    h5: ({ children }: MarkdownChildrenProps) => (\n      <Heading weight=\"medium\" size=\"3\" as=\"h5\" style={{ marginTop: headingMargins.h5.top, marginBottom: headingMargins.h5.bottom }}>\n        {children}\n      </Heading>\n    ),\n    h6: ({ children }: MarkdownChildrenProps) => (\n      <Heading weight=\"medium\" size=\"2\" as=\"h6\" style={{ marginTop: headingMargins.h6.top, marginBottom: headingMargins.h6.bottom }}>\n        {children}\n      </Heading>\n    ),\n\n    // Paragraph text\n    p: ({ children }: MarkdownChildrenProps) => (\n      <Text size=\"3\" as=\"p\" style={{ lineHeight: \"1.6\", marginTop: paragraphMargin, marginBottom: paragraphMargin }}>\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={codeBlockMargin} 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: listMargin, marginBottom: listMargin, lineHeight: \"1.6\", paddingLeft: \"1.5rem\", listStyleType: \"disc\" }}>{children}</ul>\n    ),\n    ol: ({ children }: MarkdownChildrenProps) => (\n      <ol style={{ marginTop: listMargin, marginBottom: listMargin, lineHeight: \"1.6\", paddingLeft: \"1.5rem\", listStyleType: \"decimal\" }}>{children}</ol>\n    ),\n    li: ({ children }: MarkdownChildrenProps) => <li style={{ marginBottom: listItemMargin, lineHeight: \"1.6\" }}>{children}</li>,\n\n    // Blockquote\n    blockquote: ({ children }: MarkdownChildrenProps) => (\n      <Blockquote size=\"1\" my={blockquoteMargin}>\n        {children}\n      </Blockquote>\n    ),\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      <Box style={{ marginTop: hrMargin, marginBottom: hrMargin }}>\n        <Separator orientation=\"horizontal\" light />\n      </Box>\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"],
+  "mappings": "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",
+  "names": ["create_markdown_components_exports", "__export", "createMarkdownComponents", "__toCommonJS", "import_react", "import_kookie_ui", "import_code", "extractLanguage", "className", "extractCode", "children", "code", "child", "options", "codeBlockCollapsible", "imageComponent", "inlineCodeHighContrast", "spacing", "isCompact", "headingMargins", "listMargin", "listItemMargin", "codeBlockMargin", "hrMargin", "paragraphMargin", "blockquoteMargin", "React", "inline", "href", "props", "src", "alt", "width", "height"]
 }

package/dist/cjs/components/markdown/streaming-markdown.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"streaming-markdown.d.ts","sourceRoot":"","sources":["../../../../src/components/markdown/streaming-markdown.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAsB,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAOhE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;~~AASxD~~;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAAG,wBAAwB,GAAG;IAChE;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,KAAK,CAAC;QAAE,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAE3D;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;CAClC,CAAC;AAEF,KAAK,sBAAsB,GAAG;IAC5B;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,OAAO,CAAC,EAAE,wBAAwB,CAAC;CACpC,CAAC;AA6CF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,OAAY,EAAE,EAAE,sBAAsB,4BA2CtF"}
1	+ {"version":3,"file":"streaming-markdown.d.ts","sourceRoot":"","sources":["../../../../src/components/markdown/streaming-markdown.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAsB,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAOhE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAaxD;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAAG,wBAAwB,GAAG;IAChE;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,KAAK,CAAC;QAAE,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAE3D;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;CAClC,CAAC;AAEF,KAAK,sBAAsB,GAAG;IAC5B;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,OAAO,CAAC,EAAE,wBAAwB,CAAC;CACpC,CAAC;AA6CF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,OAAY,EAAE,EAAE,sBAAsB,4BA2CtF"}

package/dist/cjs/components/markdown/streaming-markdown.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";"use client";var B=Object.create;var m=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var L=(o,n)=>{for(var t in n)m(o,t,{get:n[t],enumerable:!0})},M=(o,n,t,i)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of S(n))!x.call(o,r)&&r!==t&&m(o,r,{get:()=>n[r],enumerable:!(i=I(n,r))||i.enumerable});return o};var s=(o,n,t)=>(t=o!=null?B(E(o)):{},M(n||!o||!o.__esModule?m(t,"default",{value:o,enumerable:!0}):t,o)),A=o=>M(m({},"__esModule",{value:!0}),o);var H={};L(H,{StreamingMarkdown:()=>z});module.exports=A(H);var e=s(require("react")),O=s(require("react-markdown")),P=s(require("remark-gfm")),h=s(require("rehype-raw")),y=s(require("harden-react-markdown")),l=require("@kushagradhawan/kookie-ui"),C=require("./create-markdown-components"),d=require("./utils/markdown-streaming");const F=(0,y.default)(O.default),_=["https://","http://","/"],D=["https://","http://","/","data:"],N=["mailto:","tel:","data:","http:","https:"],R=typeof window<"u"&&window.location?.origin?window.location.origin:"https://app.kookie.ai";function G(o){return o||R}const k=(0,e.memo)(({content:o,defaultOrigin:n,components:t})=>e.default.createElement(l.Box,{width:"100%"},e.default.createElement(F,{defaultOrigin:n,allowedLinkPrefixes:_,allowedImagePrefixes:D,allowedProtocols:N,allowDataImages:!0,components:t,remarkPlugins:[P.default],rehypePlugins:[h.default]},o)),(o,n)=>o.content===n.content&&o.defaultOrigin===n.defaultOrigin&&o.components===n.components);k.displayName="MarkdownBlock";function z({content:o,id:n,options:t={}}){const{defaultOrigin:i,enableBlockMemoization:r=!0,blockParser:c,components:g={},...w}=t,f=(0,e.useMemo)(()=>G(i),[i]),u=(0,e.useMemo)(()=>({...(0,C.createMarkdownComponents)(w),...g}),[w,g]),p=(0,e.useMemo)(()=>{if(!r||!c){const a=(0,d.completeUnterminatedMarkdown)(o);return a.trim()?[a]:[]}return(0,d.parseMarkdownIntoBlocks)(o,c)},[o,r,c]);return p.length?p.length===1?e.default.createElement(k,{content:p[0],defaultOrigin:f,components:u}):e.default.createElement(l.Flex,{direction:"column",gap:"2",width:"100%"},p.map((a,b)=>e.default.createElement(k,{key:`${n}-block-${b}`,content:a,defaultOrigin:f,components:u}))):null}
+"use strict";"use client";var B=Object.create;var d=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var L=(o,n)=>{for(var t in n)d(o,t,{get:n[t],enumerable:!0})},O=(o,n,t,i)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of S(n))!x.call(o,r)&&r!==t&&d(o,r,{get:()=>n[r],enumerable:!(i=I(n,r))||i.enumerable});return o};var s=(o,n,t)=>(t=o!=null?B(E(o)):{},O(n||!o||!o.__esModule?d(t,"default",{value:o,enumerable:!0}):t,o)),A=o=>O(d({},"__esModule",{value:!0}),o);var T={};L(T,{StreamingMarkdown:()=>H});module.exports=A(T);var e=s(require("react")),P=s(require("react-markdown")),h=s(require("remark-gfm")),y=s(require("rehype-raw")),p=s(require("harden-react-markdown")),l=require("@kushagradhawan/kookie-ui"),C=require("./create-markdown-components"),c=require("./utils/markdown-streaming");const F=typeof p.default=="function"?p.default:p.default.default||p.default,R=F(P.default),_=["https://","http://","/"],D=["https://","http://","/","data:"],N=["mailto:","tel:","data:","http:","https:"],G=typeof window<"u"&&window.location?.origin?window.location.origin:"https://app.kookie.ai";function z(o){return o||G}const w=(0,e.memo)(({content:o,defaultOrigin:n,components:t})=>e.default.createElement(l.Box,{width:"100%"},e.default.createElement(R,{defaultOrigin:n,allowedLinkPrefixes:_,allowedImagePrefixes:D,allowedProtocols:N,allowDataImages:!0,components:t,remarkPlugins:[h.default],rehypePlugins:[y.default]},o)),(o,n)=>o.content===n.content&&o.defaultOrigin===n.defaultOrigin&&o.components===n.components);w.displayName="MarkdownBlock";function H({content:o,id:n,options:t={}}){const{defaultOrigin:i,enableBlockMemoization:r=!0,blockParser:k,components:f={},...g}=t,u=(0,e.useMemo)(()=>z(i),[i]),M=(0,e.useMemo)(()=>({...(0,C.createMarkdownComponents)(g),...f}),[g,f]),m=(0,e.useMemo)(()=>{if(!r||!k){const a=(0,c.completeUnterminatedMarkdown)(o);return a.trim()?[a]:[]}return(0,c.parseMarkdownIntoBlocks)(o,k)},[o,r,k]);return m.length?m.length===1?e.default.createElement(w,{content:m[0],defaultOrigin:u,components:M}):e.default.createElement(l.Flex,{direction:"column",gap:"2",width:"100%"},m.map((a,b)=>e.default.createElement(w,{key:`${n}-block-${b}`,content:a,defaultOrigin:u,components:M}))):null}
 //# sourceMappingURL=streaming-markdown.js.map

package/dist/cjs/components/markdown/streaming-markdown.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/markdown/streaming-markdown.tsx"],
-  "sourcesContent": ["\"use client\";\n\nimport React, { memo, useMemo, type ReactNode } from \"react\";\nimport ReactMarkdown, { type Components } from \"react-markdown\";\nimport remarkGfm from \"remark-gfm\";\nimport rehypeRaw from \"rehype-raw\";\nimport hardenReactMarkdown from \"harden-react-markdown\";\nimport { Box, Flex } from \"@kushagradhawan/kookie-ui\";\nimport { createMarkdownComponents } from \"./create-markdown-components\";\nimport { completeUnterminatedMarkdown, parseMarkdownIntoBlocks } from \"./utils/markdown-streaming\";\nimport type { MarkdownComponentOptions } from \"./types\";\n\nconst HardenedMarkdown = hardenReactMarkdown(ReactMarkdown);\n\nconst LINK_PREFIXES = [\"https://\", \"http://\", \"/\"];\nconst IMAGE_PREFIXES = [\"https://\", \"http://\", \"/\", \"data:\"];\nconst ALLOWED_PROTOCOLS = [\"mailto:\", \"tel:\", \"data:\", \"http:\", \"https:\"];\nconst DEFAULT_APP_ORIGIN = typeof window !== \"undefined\" && window.location?.origin ? window.location.origin : \"https://app.kookie.ai\";\n\n/**\n * Options for StreamingMarkdown component\n */\nexport type StreamingMarkdownOptions = MarkdownComponentOptions & {\n  /**\n   * Security origin for link/image validation\n   * @default window.location.origin or \"https://app.kookie.ai\"\n   */\n  defaultOrigin?: string;\n\n  /**\n   * Whether to enable block-level memoization for performance\n   * Recommended for streaming scenarios where content updates frequently\n   * @default true\n   */\n  enableBlockMemoization?: boolean;\n\n  /**\n   * Custom parser for splitting content into blocks\n   * If not provided, content will be rendered as a single block\n   * For optimal streaming performance, use marked.lexer with GFM enabled\n   */\n  blockParser?: (content: string) => Array<{ raw?: string }>;\n\n  /**\n   * Override default component mappings\n   */\n  components?: Partial<Components>;\n};\n\ntype StreamingMarkdownProps = {\n  /**\n   * Markdown content to render (supports streaming/incomplete markdown)\n   */\n  content: string;\n\n  /**\n   * Unique identifier for this markdown instance (used for keys)\n   */\n  id: string;\n\n  /**\n   * Optional configuration\n   */\n  options?: StreamingMarkdownOptions;\n};\n\ntype MarkdownBlockProps = {\n  content: string;\n  defaultOrigin: string;\n  components: Components;\n};\n\n/**\n * Resolves the default origin for security validation\n */\nfunction resolveDefaultOrigin(customOrigin?: string): string {\n  if (customOrigin) {\n    return customOrigin;\n  }\n  return DEFAULT_APP_ORIGIN;\n}\n\n/**\n * Memoized markdown block component for efficient streaming rendering\n */\nconst MarkdownBlock = memo(\n  ({ content, defaultOrigin, components }: MarkdownBlockProps) => {\n    return (\n      <Box width=\"100%\">\n        <HardenedMarkdown\n          defaultOrigin={defaultOrigin}\n          allowedLinkPrefixes={LINK_PREFIXES}\n          allowedImagePrefixes={IMAGE_PREFIXES}\n          allowedProtocols={ALLOWED_PROTOCOLS}\n          allowDataImages\n          components={components}\n          remarkPlugins={[remarkGfm]}\n          rehypePlugins={[rehypeRaw]}\n        >\n          {content}\n        </HardenedMarkdown>\n      </Box>\n    );\n  },\n  (previous, next) => previous.content === next.content && previous.defaultOrigin === next.defaultOrigin && previous.components === next.components\n);\n\nMarkdownBlock.displayName = \"MarkdownBlock\";\n\n/**\n * StreamingMarkdown - A drop-in markdown renderer designed for AI streaming.\n *\n * Features:\n * - Unterminated block parsing (handles incomplete markdown during streaming)\n * - Block-level memoization for performance\n * - Security hardening (validates links/images)\n * - GitHub Flavored Markdown support\n * - KookieUI component integration\n * - Code syntax highlighting via CodeBlock\n *\n * @example\n * ```tsx\n * import { StreamingMarkdown } from '@kushagradhawan/kookie-blocks';\n * import { marked } from 'marked';\n *\n * function ChatMessage({ message }) {\n *   return (\n *     <StreamingMarkdown\n *       content={message.content}\n *       id={message.id}\n *       options={{\n *         blockParser: (content) => marked.lexer(content, { gfm: true }),\n *         enableBlockMemoization: true,\n *       }}\n *     />\n *   );\n * }\n * ```\n */\nexport function StreamingMarkdown({ content, id, options = {} }: StreamingMarkdownProps) {\n  const { defaultOrigin: customOrigin, enableBlockMemoization = true, blockParser, components: customComponents = {}, ...componentOptions } = options;\n\n  // Resolve security origin\n  const defaultOrigin = useMemo(() => resolveDefaultOrigin(customOrigin), [customOrigin]);\n\n  // Create component mappings with custom overrides\n  const markdownComponents = useMemo(() => {\n    const baseComponents = createMarkdownComponents(componentOptions);\n    return {\n      ...baseComponents,\n      ...customComponents,\n    };\n  }, [componentOptions, customComponents]);\n\n  // Parse content into blocks for memoization (if enabled and parser provided)\n  const blocks = useMemo(() => {\n    if (!enableBlockMemoization || !blockParser) {\n      // No block splitting - just complete unterminated markdown\n      const completed = completeUnterminatedMarkdown(content);\n      return completed.trim() ? [completed] : [];\n    }\n\n    return parseMarkdownIntoBlocks(content, blockParser);\n  }, [content, enableBlockMemoization, blockParser]);\n\n  if (!blocks.length) {\n    return null;\n  }\n\n  // Single block - no need for wrapper\n  if (blocks.length === 1) {\n    return <MarkdownBlock content={blocks[0]} defaultOrigin={defaultOrigin} components={markdownComponents} />;\n  }\n\n  // Multiple blocks - render with flex wrapper\n  return (\n    <Flex direction=\"column\" gap=\"2\" width=\"100%\">\n      {blocks.map((block, index) => (\n        <MarkdownBlock key={`${id}-block-${index}`} content={block} defaultOrigin={defaultOrigin} components={markdownComponents} />\n      ))}\n    </Flex>\n  );\n}\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,uBAAAE,IAAA,eAAAC,EAAAH,GAEA,IAAAI,EAAqD,oBACrDC,EAA+C,6BAC/CC,EAAsB,yBACtBC,EAAsB,yBACtBC,EAAgC,oCAChCC,EAA0B,qCAC1BC,EAAyC,wCACzCC,EAAsE,sCAGtE,MAAMC,KAAmB,EAAAC,SAAoB,EAAAC,OAAa,EAEpDC,EAAgB,CAAC,WAAY,UAAW,GAAG,EAC3CC,EAAiB,CAAC,WAAY,UAAW,IAAK,OAAO,EACrDC,EAAoB,CAAC,UAAW,OAAQ,QAAS,QAAS,QAAQ,EAClEC,EAAqB,OAAO,OAAW,KAAe,OAAO,UAAU,OAAS,OAAO,SAAS,OAAS,wBA0D/G,SAASC,EAAqBC,EAA+B,CAC3D,OAAIA,GAGGF,CACT,CAKA,MAAMG,KAAgB,QACpB,CAAC,CAAE,QAAAC,EAAS,cAAAC,EAAe,WAAAC,CAAW,IAElC,EAAAC,QAAA,cAAC,OAAI,MAAM,QACT,EAAAA,QAAA,cAACb,EAAA,CACC,cAAeW,EACf,oBAAqBR,EACrB,qBAAsBC,EACtB,iBAAkBC,EAClB,gBAAe,GACf,WAAYO,EACZ,cAAe,CAAC,EAAAE,OAAS,EACzB,cAAe,CAAC,EAAAC,OAAS,GAExBL,CACH,CACF,EAGJ,CAACM,EAAUC,IAASD,EAAS,UAAYC,EAAK,SAAWD,EAAS,gBAAkBC,EAAK,eAAiBD,EAAS,aAAeC,EAAK,UACzI,EAEAR,EAAc,YAAc,gBAgCrB,SAASnB,EAAkB,CAAE,QAAAoB,EAAS,GAAAQ,EAAI,QAAAC,EAAU,CAAC,CAAE,EAA2B,CACvF,KAAM,CAAE,cAAeX,EAAc,uBAAAY,EAAyB,GAAM,YAAAC,EAAa,WAAYC,EAAmB,CAAC,EAAG,GAAGC,CAAiB,EAAIJ,EAGtIR,KAAgB,WAAQ,IAAMJ,EAAqBC,CAAY,EAAG,CAACA,CAAY,CAAC,EAGhFgB,KAAqB,WAAQ,KAE1B,CACL,MAFqB,4BAAyBD,CAAgB,EAG9D,GAAGD,CACL,GACC,CAACC,EAAkBD,CAAgB,CAAC,EAGjCG,KAAS,WAAQ,IAAM,CAC3B,GAAI,CAACL,GAA0B,CAACC,EAAa,CAE3C,MAAMK,KAAY,gCAA6BhB,CAAO,EACtD,OAAOgB,EAAU,KAAK,EAAI,CAACA,CAAS,EAAI,CAAC,CAC3C,CAEA,SAAO,2BAAwBhB,EAASW,CAAW,CACrD,EAAG,CAACX,EAASU,EAAwBC,CAAW,CAAC,EAEjD,OAAKI,EAAO,OAKRA,EAAO,SAAW,EACb,EAAAZ,QAAA,cAACJ,EAAA,CAAc,QAASgB,EAAO,CAAC,EAAG,cAAed,EAAe,WAAYa,EAAoB,EAKxG,EAAAX,QAAA,cAAC,QAAK,UAAU,SAAS,IAAI,IAAI,MAAM,QACpCY,EAAO,IAAI,CAACE,EAAOC,IAClB,EAAAf,QAAA,cAACJ,EAAA,CAAc,IAAK,GAAGS,CAAE,UAAUU,CAAK,GAAI,QAASD,EAAO,cAAehB,EAAe,WAAYa,EAAoB,CAC3H,CACH,EAdO,IAgBX",
-  "names": ["streaming_markdown_exports", "__export", "StreamingMarkdown", "__toCommonJS", "import_react", "import_react_markdown", "import_remark_gfm", "import_rehype_raw", "import_harden_react_markdown", "import_kookie_ui", "import_create_markdown_components", "import_markdown_streaming", "HardenedMarkdown", "hardenReactMarkdown", "ReactMarkdown", "LINK_PREFIXES", "IMAGE_PREFIXES", "ALLOWED_PROTOCOLS", "DEFAULT_APP_ORIGIN", "resolveDefaultOrigin", "customOrigin", "MarkdownBlock", "content", "defaultOrigin", "components", "React", "remarkGfm", "rehypeRaw", "previous", "next", "id", "options", "enableBlockMemoization", "blockParser", "customComponents", "componentOptions", "markdownComponents", "blocks", "completed", "block", "index"]
+  "sourcesContent": ["\"use client\";\n\nimport React, { memo, useMemo, type ReactNode } from \"react\";\nimport ReactMarkdown, { type Components } from \"react-markdown\";\nimport remarkGfm from \"remark-gfm\";\nimport rehypeRaw from \"rehype-raw\";\nimport hardenReactMarkdownModule from \"harden-react-markdown\";\nimport { Box, Flex } from \"@kushagradhawan/kookie-ui\";\nimport { createMarkdownComponents } from \"./create-markdown-components\";\nimport { completeUnterminatedMarkdown, parseMarkdownIntoBlocks } from \"./utils/markdown-streaming\";\nimport type { MarkdownComponentOptions } from \"./types\";\n\n// Handle different export formats\nconst hardenReactMarkdown =\n  typeof hardenReactMarkdownModule === \"function\" ? hardenReactMarkdownModule : (hardenReactMarkdownModule as any).default || hardenReactMarkdownModule;\n\nconst HardenedMarkdown = hardenReactMarkdown(ReactMarkdown);\n\nconst LINK_PREFIXES = [\"https://\", \"http://\", \"/\"];\nconst IMAGE_PREFIXES = [\"https://\", \"http://\", \"/\", \"data:\"];\nconst ALLOWED_PROTOCOLS = [\"mailto:\", \"tel:\", \"data:\", \"http:\", \"https:\"];\nconst DEFAULT_APP_ORIGIN = typeof window !== \"undefined\" && window.location?.origin ? window.location.origin : \"https://app.kookie.ai\";\n\n/**\n * Options for StreamingMarkdown component\n */\nexport type StreamingMarkdownOptions = MarkdownComponentOptions & {\n  /**\n   * Security origin for link/image validation\n   * @default window.location.origin or \"https://app.kookie.ai\"\n   */\n  defaultOrigin?: string;\n\n  /**\n   * Whether to enable block-level memoization for performance\n   * Recommended for streaming scenarios where content updates frequently\n   * @default true\n   */\n  enableBlockMemoization?: boolean;\n\n  /**\n   * Custom parser for splitting content into blocks\n   * If not provided, content will be rendered as a single block\n   * For optimal streaming performance, use marked.lexer with GFM enabled\n   */\n  blockParser?: (content: string) => Array<{ raw?: string }>;\n\n  /**\n   * Override default component mappings\n   */\n  components?: Partial<Components>;\n};\n\ntype StreamingMarkdownProps = {\n  /**\n   * Markdown content to render (supports streaming/incomplete markdown)\n   */\n  content: string;\n\n  /**\n   * Unique identifier for this markdown instance (used for keys)\n   */\n  id: string;\n\n  /**\n   * Optional configuration\n   */\n  options?: StreamingMarkdownOptions;\n};\n\ntype MarkdownBlockProps = {\n  content: string;\n  defaultOrigin: string;\n  components: Components;\n};\n\n/**\n * Resolves the default origin for security validation\n */\nfunction resolveDefaultOrigin(customOrigin?: string): string {\n  if (customOrigin) {\n    return customOrigin;\n  }\n  return DEFAULT_APP_ORIGIN;\n}\n\n/**\n * Memoized markdown block component for efficient streaming rendering\n */\nconst MarkdownBlock = memo(\n  ({ content, defaultOrigin, components }: MarkdownBlockProps) => {\n    return (\n      <Box width=\"100%\">\n        <HardenedMarkdown\n          defaultOrigin={defaultOrigin}\n          allowedLinkPrefixes={LINK_PREFIXES}\n          allowedImagePrefixes={IMAGE_PREFIXES}\n          allowedProtocols={ALLOWED_PROTOCOLS}\n          allowDataImages\n          components={components}\n          remarkPlugins={[remarkGfm]}\n          rehypePlugins={[rehypeRaw]}\n        >\n          {content}\n        </HardenedMarkdown>\n      </Box>\n    );\n  },\n  (previous, next) => previous.content === next.content && previous.defaultOrigin === next.defaultOrigin && previous.components === next.components\n);\n\nMarkdownBlock.displayName = \"MarkdownBlock\";\n\n/**\n * StreamingMarkdown - A drop-in markdown renderer designed for AI streaming.\n *\n * Features:\n * - Unterminated block parsing (handles incomplete markdown during streaming)\n * - Block-level memoization for performance\n * - Security hardening (validates links/images)\n * - GitHub Flavored Markdown support\n * - KookieUI component integration\n * - Code syntax highlighting via CodeBlock\n *\n * @example\n * ```tsx\n * import { StreamingMarkdown } from '@kushagradhawan/kookie-blocks';\n * import { marked } from 'marked';\n *\n * function ChatMessage({ message }) {\n *   return (\n *     <StreamingMarkdown\n *       content={message.content}\n *       id={message.id}\n *       options={{\n *         blockParser: (content) => marked.lexer(content, { gfm: true }),\n *         enableBlockMemoization: true,\n *       }}\n *     />\n *   );\n * }\n * ```\n */\nexport function StreamingMarkdown({ content, id, options = {} }: StreamingMarkdownProps) {\n  const { defaultOrigin: customOrigin, enableBlockMemoization = true, blockParser, components: customComponents = {}, ...componentOptions } = options;\n\n  // Resolve security origin\n  const defaultOrigin = useMemo(() => resolveDefaultOrigin(customOrigin), [customOrigin]);\n\n  // Create component mappings with custom overrides\n  const markdownComponents = useMemo(() => {\n    const baseComponents = createMarkdownComponents(componentOptions);\n    return {\n      ...baseComponents,\n      ...customComponents,\n    };\n  }, [componentOptions, customComponents]);\n\n  // Parse content into blocks for memoization (if enabled and parser provided)\n  const blocks = useMemo(() => {\n    if (!enableBlockMemoization || !blockParser) {\n      // No block splitting - just complete unterminated markdown\n      const completed = completeUnterminatedMarkdown(content);\n      return completed.trim() ? [completed] : [];\n    }\n\n    return parseMarkdownIntoBlocks(content, blockParser);\n  }, [content, enableBlockMemoization, blockParser]);\n\n  if (!blocks.length) {\n    return null;\n  }\n\n  // Single block - no need for wrapper\n  if (blocks.length === 1) {\n    return <MarkdownBlock content={blocks[0]} defaultOrigin={defaultOrigin} components={markdownComponents} />;\n  }\n\n  // Multiple blocks - render with flex wrapper\n  return (\n    <Flex direction=\"column\" gap=\"2\" width=\"100%\">\n      {blocks.map((block, index) => (\n        <MarkdownBlock key={`${id}-block-${index}`} content={block} defaultOrigin={defaultOrigin} components={markdownComponents} />\n      ))}\n    </Flex>\n  );\n}\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,uBAAAE,IAAA,eAAAC,EAAAH,GAEA,IAAAI,EAAqD,oBACrDC,EAA+C,6BAC/CC,EAAsB,yBACtBC,EAAsB,yBACtBC,EAAsC,oCACtCC,EAA0B,qCAC1BC,EAAyC,wCACzCC,EAAsE,sCAItE,MAAMC,EACJ,OAAO,EAAAC,SAA8B,WAAa,EAAAA,QAA6B,EAAAA,QAAkC,SAAW,EAAAA,QAExHC,EAAmBF,EAAoB,EAAAG,OAAa,EAEpDC,EAAgB,CAAC,WAAY,UAAW,GAAG,EAC3CC,EAAiB,CAAC,WAAY,UAAW,IAAK,OAAO,EACrDC,EAAoB,CAAC,UAAW,OAAQ,QAAS,QAAS,QAAQ,EAClEC,EAAqB,OAAO,OAAW,KAAe,OAAO,UAAU,OAAS,OAAO,SAAS,OAAS,wBA0D/G,SAASC,EAAqBC,EAA+B,CAC3D,OAAIA,GAGGF,CACT,CAKA,MAAMG,KAAgB,QACpB,CAAC,CAAE,QAAAC,EAAS,cAAAC,EAAe,WAAAC,CAAW,IAElC,EAAAC,QAAA,cAAC,OAAI,MAAM,QACT,EAAAA,QAAA,cAACZ,EAAA,CACC,cAAeU,EACf,oBAAqBR,EACrB,qBAAsBC,EACtB,iBAAkBC,EAClB,gBAAe,GACf,WAAYO,EACZ,cAAe,CAAC,EAAAE,OAAS,EACzB,cAAe,CAAC,EAAAC,OAAS,GAExBL,CACH,CACF,EAGJ,CAACM,EAAUC,IAASD,EAAS,UAAYC,EAAK,SAAWD,EAAS,gBAAkBC,EAAK,eAAiBD,EAAS,aAAeC,EAAK,UACzI,EAEAR,EAAc,YAAc,gBAgCrB,SAASpB,EAAkB,CAAE,QAAAqB,EAAS,GAAAQ,EAAI,QAAAC,EAAU,CAAC,CAAE,EAA2B,CACvF,KAAM,CAAE,cAAeX,EAAc,uBAAAY,EAAyB,GAAM,YAAAC,EAAa,WAAYC,EAAmB,CAAC,EAAG,GAAGC,CAAiB,EAAIJ,EAGtIR,KAAgB,WAAQ,IAAMJ,EAAqBC,CAAY,EAAG,CAACA,CAAY,CAAC,EAGhFgB,KAAqB,WAAQ,KAE1B,CACL,MAFqB,4BAAyBD,CAAgB,EAG9D,GAAGD,CACL,GACC,CAACC,EAAkBD,CAAgB,CAAC,EAGjCG,KAAS,WAAQ,IAAM,CAC3B,GAAI,CAACL,GAA0B,CAACC,EAAa,CAE3C,MAAMK,KAAY,gCAA6BhB,CAAO,EACtD,OAAOgB,EAAU,KAAK,EAAI,CAACA,CAAS,EAAI,CAAC,CAC3C,CAEA,SAAO,2BAAwBhB,EAASW,CAAW,CACrD,EAAG,CAACX,EAASU,EAAwBC,CAAW,CAAC,EAEjD,OAAKI,EAAO,OAKRA,EAAO,SAAW,EACb,EAAAZ,QAAA,cAACJ,EAAA,CAAc,QAASgB,EAAO,CAAC,EAAG,cAAed,EAAe,WAAYa,EAAoB,EAKxG,EAAAX,QAAA,cAAC,QAAK,UAAU,SAAS,IAAI,IAAI,MAAM,QACpCY,EAAO,IAAI,CAACE,EAAOC,IAClB,EAAAf,QAAA,cAACJ,EAAA,CAAc,IAAK,GAAGS,CAAE,UAAUU,CAAK,GAAI,QAASD,EAAO,cAAehB,EAAe,WAAYa,EAAoB,CAC3H,CACH,EAdO,IAgBX",
+  "names": ["streaming_markdown_exports", "__export", "StreamingMarkdown", "__toCommonJS", "import_react", "import_react_markdown", "import_remark_gfm", "import_rehype_raw", "import_harden_react_markdown", "import_kookie_ui", "import_create_markdown_components", "import_markdown_streaming", "hardenReactMarkdown", "hardenReactMarkdownModule", "HardenedMarkdown", "ReactMarkdown", "LINK_PREFIXES", "IMAGE_PREFIXES", "ALLOWED_PROTOCOLS", "DEFAULT_APP_ORIGIN", "resolveDefaultOrigin", "customOrigin", "MarkdownBlock", "content", "defaultOrigin", "components", "React", "remarkGfm", "rehypeRaw", "previous", "next", "id", "options", "enableBlockMemoization", "blockParser", "customComponents", "componentOptions", "markdownComponents", "blocks", "completed", "block", "index"]
 }

package/dist/cjs/components/markdown/types.d.ts CHANGED Viewed

@@ -22,6 +22,13 @@ export type MarkdownComponentOptions = {
      * @default true
      */
     inlineCodeHighContrast?: boolean;
+    /**
+     * Spacing density for markdown elements
+     * - "compact": Tighter spacing, ideal for chat/conversational interfaces
+     * - "spacious": More breathing room, ideal for documentation/articles
+     * @default "spacious"
+     */
+    spacing?: "compact" | "spacious";
 };
 /**
  * Common props for markdown child components

package/dist/cjs/components/markdown/types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
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"}
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;IAEjC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;CAClC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC"}

package/dist/cjs/components/markdown/types.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var l=(e,o,i,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of a(o))!d.call(e,t)&&t!==i&&r(e,t,{get:()=>o[t],enumerable:!(n=p(o,t))||n.enumerable});return e};var s=e=>l(r({},"__esModule",{value:!0}),e);var c={};module.exports=s(c);
+"use strict";var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var s=Object.prototype.hasOwnProperty;var c=(e,o,r,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of a(o))!s.call(e,t)&&t!==r&&i(e,t,{get:()=>o[t],enumerable:!(n=p(o,t))||n.enumerable});return e};var d=e=>c(i({},"__esModule",{value:!0}),e);var l={};module.exports=d(l);
 //# sourceMappingURL=types.js.map

package/dist/cjs/components/markdown/types.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/markdown/types.ts"],
-  "sourcesContent": ["import type { ReactNode } from \"react\";\n\n/**\n * Options for customizing markdown component behavior\n */\nexport type MarkdownComponentOptions = {\n  /**\n   * Whether code blocks should be collapsible\n   * @default false\n   */\n  codeBlockCollapsible?: boolean;\n\n  /**\n   * Custom image component\n   */\n  imageComponent?: (props: { src?: string; alt?: string; width?: string; height?: string }) => ReactNode;\n\n  /**\n   * Whether to use high contrast for inline code\n   * @default true\n   */\n  inlineCodeHighContrast?: boolean;\n};\n\n/**\n * Common props for markdown child components\n */\nexport type MarkdownChildrenProps = {\n  children?: ReactNode;\n};\n\n"],
+  "sourcesContent": ["import type { ReactNode } from \"react\";\n\n/**\n * Options for customizing markdown component behavior\n */\nexport type MarkdownComponentOptions = {\n  /**\n   * Whether code blocks should be collapsible\n   * @default false\n   */\n  codeBlockCollapsible?: boolean;\n\n  /**\n   * Custom image component\n   */\n  imageComponent?: (props: { src?: string; alt?: string; width?: string; height?: string }) => ReactNode;\n\n  /**\n   * Whether to use high contrast for inline code\n   * @default true\n   */\n  inlineCodeHighContrast?: boolean;\n\n  /**\n   * Spacing density for markdown elements\n   * - \"compact\": Tighter spacing, ideal for chat/conversational interfaces\n   * - \"spacious\": More breathing room, ideal for documentation/articles\n   * @default \"spacious\"\n   */\n  spacing?: \"compact\" | \"spacious\";\n};\n\n/**\n * Common props for markdown child components\n */\nexport type MarkdownChildrenProps = {\n  children?: ReactNode;\n};\n\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

package/dist/esm/components/code/code-block.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import e,{useState as E,useEffect as F,useMemo as w,memo as x,createContext as I,useContext as A}from"react";import{Box as m,Card as k,Flex as f,Button as _,Text as z,Theme as D,ScrollArea as $,IconButton as M}from"@kushagradhawan/kookie-ui";import{HugeiconsIcon as S}from"@hugeicons/react";import{Copy01Icon as W,Tick01Icon as O,ArrowDown01Icon as U}from"@hugeicons/core-free-icons";import{codeToHtml as j}from"shiki";import{extractTextFromChildren as G,extractLanguageFromChildren as L}from"./types";import{useCodeCard as K}from"./use-code-card";import{LanguageBadge as V}from"./language-badge";const P=I(!1),q=360,J="one-light",Q="one-dark-pro";function X({children:c,background:o="none",backgroundProps:t={}}){const{dotSize:a=24,color:s="var(--gray-10)",backgroundColor:i="var(--gray-2)",height:r,width:d="100%",radius:l="3"}=t,n=w(()=>{if(o!=="none")return o==="dots"?{backgroundImage:`radial-gradient(circle, ${s} 1px, transparent 1px)`,borderRadius:`var(--radius-${l})`,backgroundSize:`${a}px ${a}px`,backgroundPosition:"center",backgroundColor:i,width:d,...r&&{height:r}}:{backgroundImage:`url(${o})`,backgroundSize:"cover",backgroundPosition:"center",backgroundRepeat:"no-repeat",borderRadius:`var(--radius-${l})`,width:d,...r&&{height:r}}},[o,s,i,a,r,d,l]);return e.createElement(k,{size:"1",variant:"soft"},e.createElement(f,{justify:"center",align:"center",py:"4",style:n},e.createElement(D,{fontFamily:"sans"},c)))}function Y(){return e.createElement(m,{className:"code-skeleton"},["85%","70%","90%","60%","75%","80%"].map((o,t)=>e.createElement(m,{key:t,className:"code-skeleton-line",style:{width:o}})))}const B=x(function({code:o,language:t,showCopy:a,showLanguage:s,showLineNumbers:i,collapsible:r,collapsedHeight:d,file:l,isLoading:n=!1,children:g}){const{isExpanded:u,shouldShowToggle:p,copied:C,contentRef:h,contentMaxHeight:b,handleToggle:v,handleCopy:T}=K({code:o,collapsedHeight:d}),y=r&&p,N=u?"rotate(180deg)":"rotate(0deg)",H=i?"code-content":"code-content hide-line-numbers";return e.createElement(m,{position:"relative"},e.createElement(k,{size:"1",variant:"soft"},e.createElement(f,{direction:"column"},e.createElement(f,{justify:"between",align:"start",gap:"2"},e.createElement(f,{align:"center",gap:"2"},s&&e.createElement(V,{language:t}),l&&e.createElement(z,{size:"1",color:"gray",highContrast:!0},l)),e.createElement(f,{align:"center",className:"code-action-buttons"},y&&e.createElement(M,{size:"2",variant:"ghost",color:"gray",onClick:v,tooltip:u?"Collapse":"Expand","aria-label":u?"Collapse code":"Expand code"},e.createElement(S,{icon:U,style:{transform:N},className:"code-chevron",strokeWidth:1.75})),a&&e.createElement(_,{size:"2",variant:"ghost",color:"gray",onClick:T,tooltip:C?"Copied!":"Copy","aria-label":C?"Copied!":"Copy code"},e.createElement(S,{icon:C?O:W,strokeWidth:1.75})," Copy"))),e.createElement(m,{ref:h,style:{maxHeight:r?`${b}px`:void 0},className:H},e.createElement($,{type:"auto",scrollbars:"horizontal"},n?e.createElement(Y,null):g)),y&&!u&&e.createElement(m,{className:"code-scroll-shadow visible"}))))}),Z=x(function({code:o,language:t,showCopy:a,showLanguage:s,showLineNumbers:i,collapsible:r,collapsedHeight:d,file:l,shikiConfig:n}){const[g,u]=E(null),p=w(()=>{const h=n?.themes?.light||J,b=n?.themes?.dark||Q;return{lang:t,themes:{light:h,dark:b},defaultColor:!1,langAlias:n?.langAlias,transformers:n?.transformers,meta:n?.meta?{__raw:n.meta}:void 0}},[t,n?.themes?.light,n?.themes?.dark,n?.langAlias,n?.transformers,n?.meta]);return F(()=>{let h=!1;return j(o,p).then(b=>{h||u(b)}).catch(b=>{}),()=>{h=!0}},[o,p]),e.createElement(B,{code:o,language:t,showCopy:a,showLanguage:s,showLineNumbers:i,collapsible:r,collapsedHeight:d,file:l,isLoading:g===null},g?e.createElement(m,{dangerouslySetInnerHTML:{__html:g}}):null)}),R=x(function({children:o,showCopy:t,showLanguage:a,showLineNumbers:s,collapsible:i,collapsedHeight:r,file:d}){const l=G(o),n=L(o);return e.createElement(B,{code:l,language:n,showCopy:t,showLanguage:a,showLineNumbers:s,collapsible:i,collapsedHeight:r,file:d},o)});function de({children:c,code:o,language:t,preview:a,showCopy:s=!0,showLanguage:i=!0,showLineNumbers:r=!0,shikiConfig:d,background:l,backgroundProps:n,collapsible:g=!0,collapsedHeight:u=q,file:p}){const C=t||L(c)||"text";return e.createElement(P.Provider,{value:!0},e.createElement(m,{className:"docs-code-block",mt:"2",mb:"4"},e.createElement(f,{direction:"column",gap:"2"},a&&e.createElement(X,{background:l,backgroundProps:n},a),o&&e.createElement(Z,{code:o,language:C,showCopy:s,showLanguage:i,showLineNumbers:r,collapsible:g,collapsedHeight:u,file:p,shikiConfig:d}),c&&!o&&e.createElement(R,{showCopy:s,showLanguage:i,showLineNumbers:r,collapsible:g,collapsedHeight:u,file:p},c))))}function ce(){return A(P)}export{de as CodeBlock,ce as useCodeBlockContext};
+import e,{useState as E,useEffect as F,useMemo as w,memo as x,createContext as I,useContext as A}from"react";import{Box as m,Card as k,Flex as f,Button as _,Text as z,Theme as D,ScrollArea as $,IconButton as M}from"@kushagradhawan/kookie-ui";import{HugeiconsIcon as S}from"@hugeicons/react";import{Copy01Icon as W,Tick01Icon as O,ArrowDown01Icon as U}from"@hugeicons/core-free-icons";import{codeToHtml as j}from"shiki";import{extractTextFromChildren as G,extractLanguageFromChildren as L}from"./types";import{useCodeCard as K}from"./use-code-card";import{LanguageBadge as V}from"./language-badge";const P=I(!1),q=360,J="one-light",Q="one-dark-pro";function X({children:c,background:o="none",backgroundProps:t={}}){const{dotSize:a=24,color:s="var(--gray-10)",backgroundColor:i="var(--gray-2)",height:r,width:d="100%",radius:l="3"}=t,n=w(()=>{if(o!=="none")return o==="dots"?{backgroundImage:`radial-gradient(circle, ${s} 1px, transparent 1px)`,borderRadius:`var(--radius-${l})`,backgroundSize:`${a}px ${a}px`,backgroundPosition:"center",backgroundColor:i,width:d,...r&&{height:r}}:{backgroundImage:`url(${o})`,backgroundSize:"cover",backgroundPosition:"center",backgroundRepeat:"no-repeat",borderRadius:`var(--radius-${l})`,width:d,...r&&{height:r}}},[o,s,i,a,r,d,l]);return e.createElement(k,{size:"1",variant:"soft"},e.createElement(f,{justify:"center",align:"center",py:"4",style:n},e.createElement(D,{fontFamily:"sans"},c)))}function Y(){return e.createElement(m,{className:"code-skeleton"},["85%","70%","90%","60%","75%","80%"].map((o,t)=>e.createElement(m,{key:t,className:"code-skeleton-line",style:{width:o}})))}const B=x(function({code:o,language:t,showCopy:a,showLanguage:s,showLineNumbers:i,collapsible:r,collapsedHeight:d,file:l,isLoading:n=!1,children:g}){const{isExpanded:u,shouldShowToggle:p,copied:C,contentRef:h,contentMaxHeight:b,handleToggle:v,handleCopy:T}=K({code:o,collapsedHeight:d}),y=r&&p,N=u?"rotate(180deg)":"rotate(0deg)",H=i?"code-content":"code-content hide-line-numbers";return e.createElement(m,{position:"relative"},e.createElement(k,{size:"1",variant:"soft"},e.createElement(f,{direction:"column"},e.createElement(f,{justify:"between",align:"start",gap:"2"},e.createElement(f,{align:"center",gap:"2"},s&&e.createElement(V,{language:t}),l&&e.createElement(z,{size:"1",color:"gray",highContrast:!0},l)),e.createElement(f,{align:"center",className:"code-action-buttons"},y&&e.createElement(M,{size:"2",variant:"ghost",color:"gray",onClick:v,tooltip:u?"Collapse":"Expand","aria-label":u?"Collapse code":"Expand code"},e.createElement(S,{icon:U,style:{transform:N},className:"code-chevron",strokeWidth:1.75})),a&&e.createElement(_,{size:"2",variant:"ghost",color:"gray",onClick:T,tooltip:C?"Copied!":"Copy","aria-label":C?"Copied!":"Copy code"},e.createElement(S,{icon:C?O:W,strokeWidth:1.75})," Copy"))),e.createElement(m,{ref:h,style:{maxHeight:r?`${b}px`:void 0},className:H},e.createElement($,{type:"auto",scrollbars:"horizontal"},n?e.createElement(Y,null):g)),y&&!u&&e.createElement(m,{className:"code-scroll-shadow visible"}))))}),Z=x(function({code:o,language:t,showCopy:a,showLanguage:s,showLineNumbers:i,collapsible:r,collapsedHeight:d,file:l,shikiConfig:n}){const[g,u]=E(null),p=w(()=>{const h=n?.themes?.light||J,b=n?.themes?.dark||Q;return{lang:t,themes:{light:h,dark:b},defaultColor:!1,langAlias:n?.langAlias,transformers:n?.transformers,meta:n?.meta?{__raw:n.meta}:void 0}},[t,n?.themes?.light,n?.themes?.dark,n?.langAlias,n?.transformers,n?.meta]);return F(()=>{let h=!1;return j(o,p).then(b=>{h||u(b)}).catch(b=>{}),()=>{h=!0}},[o,p]),e.createElement(B,{code:o,language:t,showCopy:a,showLanguage:s,showLineNumbers:i,collapsible:r,collapsedHeight:d,file:l,isLoading:g===null},g?e.createElement(m,{dangerouslySetInnerHTML:{__html:g}}):null)}),R=x(function({children:o,showCopy:t,showLanguage:a,showLineNumbers:s,collapsible:i,collapsedHeight:r,file:d}){const l=G(o),n=L(o);return e.createElement(B,{code:l,language:n,showCopy:t,showLanguage:a,showLineNumbers:s,collapsible:i,collapsedHeight:r,file:d},o)});function de({children:c,code:o,language:t,preview:a,showCopy:s=!0,showLanguage:i=!0,showLineNumbers:r=!0,shikiConfig:d,background:l,backgroundProps:n,collapsible:g=!0,collapsedHeight:u=q,file:p}){const C=t||L(c)||"text";return e.createElement(P.Provider,{value:!0},e.createElement(m,{className:"docs-code-block",my:"3"},e.createElement(f,{direction:"column",gap:"2"},a&&e.createElement(X,{background:l,backgroundProps:n},a),o&&e.createElement(Z,{code:o,language:C,showCopy:s,showLanguage:i,showLineNumbers:r,collapsible:g,collapsedHeight:u,file:p,shikiConfig:d}),c&&!o&&e.createElement(R,{showCopy:s,showLanguage:i,showLineNumbers:r,collapsible:g,collapsedHeight:u,file:p},c))))}function ce(){return A(P)}export{de as CodeBlock,ce as useCodeBlockContext};
 //# sourceMappingURL=code-block.js.map

package/dist/esm/components/code/code-block.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/code/code-block.tsx"],
-  "sourcesContent": ["import React, { useState, useEffect, useMemo, memo, createContext, useContext, type ReactNode } from \"react\";\nimport { Box, Card, Code, Flex, Button, Text, Theme, ScrollArea, IconButton } from \"@kushagradhawan/kookie-ui\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { Copy01Icon, Tick01Icon, ArrowDown01Icon } from \"@hugeicons/core-free-icons\";\nimport { codeToHtml, type BundledLanguage, type BundledTheme } from \"shiki\";\nimport type { CodeBlockProps, ShikiConfig, PreviewBackgroundProps } from \"./types\";\nimport { extractTextFromChildren, extractLanguageFromChildren } from \"./types\";\nimport { useCodeCard } from \"./use-code-card\";\nimport { LanguageBadge } from \"./language-badge\";\n\nconst CodeBlockContext = createContext<boolean>(false);\n\nconst DEFAULT_COLLAPSED_HEIGHT = 360;\nconst DEFAULT_LIGHT_THEME = \"one-light\";\nconst DEFAULT_DARK_THEME = \"one-dark-pro\";\n\ninterface PreviewSectionProps {\n  children: ReactNode;\n  background?: \"none\" | \"dots\" | string;\n  backgroundProps?: PreviewBackgroundProps;\n}\n\nfunction PreviewSection({ children, background = \"none\", backgroundProps = {} }: PreviewSectionProps) {\n  const { dotSize = 24, color = \"var(--gray-10)\", backgroundColor = \"var(--gray-2)\", height, width = \"100%\", radius = \"3\" } = backgroundProps;\n\n  const backgroundStyle = useMemo((): React.CSSProperties | undefined => {\n    if (background === \"none\") return undefined;\n\n    if (background === \"dots\") {\n      return {\n        backgroundImage: `radial-gradient(circle, ${color} 1px, transparent 1px)`,\n        borderRadius: `var(--radius-${radius})`,\n        backgroundSize: `${dotSize}px ${dotSize}px`,\n        backgroundPosition: \"center\",\n        backgroundColor,\n        width,\n        ...(height && { height }),\n      };\n    }\n\n    // Image background\n    return {\n      backgroundImage: `url(${background})`,\n      backgroundSize: \"cover\",\n      backgroundPosition: \"center\",\n      backgroundRepeat: \"no-repeat\",\n      borderRadius: `var(--radius-${radius})`,\n      width,\n      ...(height && { height }),\n    };\n  }, [background, color, backgroundColor, dotSize, height, width, radius]);\n\n  return (\n    <Card size=\"1\" variant=\"soft\">\n      <Flex justify=\"center\" align=\"center\" py=\"4\" style={backgroundStyle}>\n        <Theme fontFamily=\"sans\">{children}</Theme>\n      </Flex>\n    </Card>\n  );\n}\n\ninterface CodeCardProps {\n  code: string;\n  language: string;\n  showCopy: boolean;\n  showLanguage: boolean;\n  showLineNumbers: boolean;\n  collapsible: boolean;\n  collapsedHeight: number;\n  file?: string;\n  isLoading?: boolean;\n  children: ReactNode;\n}\n\nfunction CodeSkeleton() {\n  // Generate varied line widths for visual interest\n  const lineWidths = [\"85%\", \"70%\", \"90%\", \"60%\", \"75%\", \"80%\"];\n\n  return (\n    <Box className=\"code-skeleton\">\n      {lineWidths.map((width, index) => (\n        <Box key={index} className=\"code-skeleton-line\" style={{ width }} />\n      ))}\n    </Box>\n  );\n}\n\nconst CodeCard = memo(function CodeCard({\n  code,\n  language,\n  showCopy,\n  showLanguage,\n  showLineNumbers,\n  collapsible,\n  collapsedHeight,\n  file,\n  isLoading = false,\n  children,\n}: CodeCardProps) {\n  const { isExpanded, shouldShowToggle, copied, contentRef, contentMaxHeight, handleToggle, handleCopy } = useCodeCard({\n    code,\n    collapsedHeight,\n  });\n\n  const showToggle = collapsible && shouldShowToggle;\n  const chevronRotation = isExpanded ? \"rotate(180deg)\" : \"rotate(0deg)\";\n  const contentClassName = showLineNumbers ? \"code-content\" : \"code-content hide-line-numbers\";\n\n  return (\n    <Box position=\"relative\">\n      <Card size=\"1\" variant=\"soft\">\n        <Flex direction=\"column\">\n          <Flex justify=\"between\" align=\"start\" gap=\"2\">\n            <Flex align=\"center\" gap=\"2\">\n              {showLanguage && <LanguageBadge language={language} />}\n              {file && (\n                <Text size=\"1\" color=\"gray\" highContrast>\n                  {file}\n                </Text>\n              )}\n            </Flex>\n\n            <Flex align=\"center\" className=\"code-action-buttons\">\n              {showToggle && (\n                <IconButton\n                  size=\"2\"\n                  variant=\"ghost\"\n                  color=\"gray\"\n                  onClick={handleToggle}\n                  tooltip={isExpanded ? \"Collapse\" : \"Expand\"}\n                  aria-label={isExpanded ? \"Collapse code\" : \"Expand code\"}\n                >\n                  <HugeiconsIcon icon={ArrowDown01Icon} style={{ transform: chevronRotation }} className=\"code-chevron\" strokeWidth={1.75} />\n                </IconButton>\n              )}\n              {showCopy && (\n                <Button\n                  size=\"2\"\n                  variant=\"ghost\"\n                  color=\"gray\"\n                  onClick={handleCopy}\n                  tooltip={copied ? \"Copied!\" : \"Copy\"}\n                  aria-label={copied ? \"Copied!\" : \"Copy code\"}\n                >\n                  <HugeiconsIcon icon={copied ? Tick01Icon : Copy01Icon} strokeWidth={1.75} /> Copy\n                </Button>\n              )}\n            </Flex>\n          </Flex>\n\n          <Box ref={contentRef} style={{ maxHeight: collapsible ? `${contentMaxHeight}px` : undefined }} className={contentClassName}>\n            <ScrollArea type=\"auto\" scrollbars=\"horizontal\">\n              {isLoading ? <CodeSkeleton /> : children}\n            </ScrollArea>\n          </Box>\n\n          {showToggle && !isExpanded && <Box className=\"code-scroll-shadow visible\" />}\n        </Flex>\n      </Card>\n    </Box>\n  );\n});\n\ninterface RuntimeCodeSectionProps {\n  code: string;\n  language: string;\n  showCopy: boolean;\n  showLanguage: boolean;\n  showLineNumbers: boolean;\n  collapsible: boolean;\n  collapsedHeight: number;\n  file?: string;\n  shikiConfig?: ShikiConfig;\n}\n\nconst RuntimeCodeSection = memo(function RuntimeCodeSection({\n  code,\n  language,\n  showCopy,\n  showLanguage,\n  showLineNumbers,\n  collapsible,\n  collapsedHeight,\n  file,\n  shikiConfig,\n}: RuntimeCodeSectionProps) {\n  const [highlighted, setHighlighted] = useState<string | null>(null);\n\n  // Memoize Shiki config to prevent unnecessary re-highlights\n  const shikiOptions = useMemo(() => {\n    const lightTheme = shikiConfig?.themes?.light || DEFAULT_LIGHT_THEME;\n    const darkTheme = shikiConfig?.themes?.dark || DEFAULT_DARK_THEME;\n\n    return {\n      lang: language as BundledLanguage,\n      themes: {\n        light: lightTheme as BundledTheme,\n        dark: darkTheme as BundledTheme,\n      },\n      defaultColor: false as const,\n      langAlias: shikiConfig?.langAlias,\n      transformers: shikiConfig?.transformers,\n      meta: shikiConfig?.meta ? { __raw: shikiConfig.meta } : undefined,\n    };\n  }, [language, shikiConfig?.themes?.light, shikiConfig?.themes?.dark, shikiConfig?.langAlias, shikiConfig?.transformers, shikiConfig?.meta]);\n\n  useEffect(() => {\n    let cancelled = false;\n\n    codeToHtml(code, shikiOptions)\n      .then((html) => {\n        if (!cancelled) {\n          setHighlighted(html);\n        }\n      })\n      .catch((error) => {\n        if (!cancelled) {\n          // Keep previous highlighted content on error (stale while revalidate)\n          if (process.env.NODE_ENV === \"development\") {\n            console.error(\"[CodeBlock] Shiki highlighting failed:\", error);\n          }\n        }\n      });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [code, shikiOptions]);\n\n  // Only show loading skeleton on initial render (no highlighted content yet)\n  // During updates, keep showing previous highlighted content (stale while revalidate)\n  const isInitialLoading = highlighted === null;\n\n  return (\n    <CodeCard\n      code={code}\n      language={language}\n      showCopy={showCopy}\n      showLanguage={showLanguage}\n      showLineNumbers={showLineNumbers}\n      collapsible={collapsible}\n      collapsedHeight={collapsedHeight}\n      file={file}\n      isLoading={isInitialLoading}\n    >\n      {highlighted ? <Box dangerouslySetInnerHTML={{ __html: highlighted }} /> : null}\n    </CodeCard>\n  );\n});\n\ninterface ChildrenCodeSectionProps {\n  children: ReactNode;\n  showCopy: boolean;\n  showLanguage: boolean;\n  showLineNumbers: boolean;\n  collapsible: boolean;\n  collapsedHeight: number;\n  file?: string;\n}\n\nconst ChildrenCodeSection = memo(function ChildrenCodeSection({\n  children,\n  showCopy,\n  showLanguage,\n  showLineNumbers,\n  collapsible,\n  collapsedHeight,\n  file,\n}: ChildrenCodeSectionProps) {\n  const code = extractTextFromChildren(children);\n  const language = extractLanguageFromChildren(children);\n\n  return (\n    <CodeCard\n      code={code}\n      language={language}\n      showCopy={showCopy}\n      showLanguage={showLanguage}\n      showLineNumbers={showLineNumbers}\n      collapsible={collapsible}\n      collapsedHeight={collapsedHeight}\n      file={file}\n    >\n      {children}\n    </CodeCard>\n  );\n});\n\nexport function CodeBlock({\n  children,\n  code,\n  language,\n  preview,\n  showCopy = true,\n  showLanguage = true,\n  showLineNumbers = true,\n  shikiConfig,\n  background,\n  backgroundProps,\n  collapsible = true,\n  collapsedHeight = DEFAULT_COLLAPSED_HEIGHT,\n  file,\n}: CodeBlockProps) {\n  const displayLanguage = language || extractLanguageFromChildren(children) || \"text\";\n\n  return (\n    <CodeBlockContext.Provider value={true}>\n      <Box className=\"docs-code-block\" mt=\"2\" mb=\"4\">\n        <Flex direction=\"column\" gap=\"2\">\n          {preview && (\n            <PreviewSection background={background} backgroundProps={backgroundProps}>\n              {preview}\n            </PreviewSection>\n          )}\n\n          {code && (\n            <RuntimeCodeSection\n              code={code}\n              language={displayLanguage}\n              showCopy={showCopy}\n              showLanguage={showLanguage}\n              showLineNumbers={showLineNumbers}\n              collapsible={collapsible}\n              collapsedHeight={collapsedHeight}\n              file={file}\n              shikiConfig={shikiConfig}\n            />\n          )}\n\n          {children && !code && (\n            <ChildrenCodeSection\n              showCopy={showCopy}\n              showLanguage={showLanguage}\n              showLineNumbers={showLineNumbers}\n              collapsible={collapsible}\n              collapsedHeight={collapsedHeight}\n              file={file}\n            >\n              {children}\n            </ChildrenCodeSection>\n          )}\n        </Flex>\n      </Box>\n    </CodeBlockContext.Provider>\n  );\n}\n\nexport function useCodeBlockContext() {\n  return useContext(CodeBlockContext);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useState, useEffect, useMemo, memo, createContext, useContext, type ReactNode } from \"react\";\nimport { Box, Card, Code, Flex, Button, Text, Theme, ScrollArea, IconButton } from \"@kushagradhawan/kookie-ui\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { Copy01Icon, Tick01Icon, ArrowDown01Icon } from \"@hugeicons/core-free-icons\";\nimport { codeToHtml, type BundledLanguage, type BundledTheme } from \"shiki\";\nimport type { CodeBlockProps, ShikiConfig, PreviewBackgroundProps } from \"./types\";\nimport { extractTextFromChildren, extractLanguageFromChildren } from \"./types\";\nimport { useCodeCard } from \"./use-code-card\";\nimport { LanguageBadge } from \"./language-badge\";\n\nconst CodeBlockContext = createContext<boolean>(false);\n\nconst DEFAULT_COLLAPSED_HEIGHT = 360;\nconst DEFAULT_LIGHT_THEME = \"one-light\";\nconst DEFAULT_DARK_THEME = \"one-dark-pro\";\n\ninterface PreviewSectionProps {\n  children: ReactNode;\n  background?: \"none\" | \"dots\" | string;\n  backgroundProps?: PreviewBackgroundProps;\n}\n\nfunction PreviewSection({ children, background = \"none\", backgroundProps = {} }: PreviewSectionProps) {\n  const { dotSize = 24, color = \"var(--gray-10)\", backgroundColor = \"var(--gray-2)\", height, width = \"100%\", radius = \"3\" } = backgroundProps;\n\n  const backgroundStyle = useMemo((): React.CSSProperties | undefined => {\n    if (background === \"none\") return undefined;\n\n    if (background === \"dots\") {\n      return {\n        backgroundImage: `radial-gradient(circle, ${color} 1px, transparent 1px)`,\n        borderRadius: `var(--radius-${radius})`,\n        backgroundSize: `${dotSize}px ${dotSize}px`,\n        backgroundPosition: \"center\",\n        backgroundColor,\n        width,\n        ...(height && { height }),\n      };\n    }\n\n    // Image background\n    return {\n      backgroundImage: `url(${background})`,\n      backgroundSize: \"cover\",\n      backgroundPosition: \"center\",\n      backgroundRepeat: \"no-repeat\",\n      borderRadius: `var(--radius-${radius})`,\n      width,\n      ...(height && { height }),\n    };\n  }, [background, color, backgroundColor, dotSize, height, width, radius]);\n\n  return (\n    <Card size=\"1\" variant=\"soft\">\n      <Flex justify=\"center\" align=\"center\" py=\"4\" style={backgroundStyle}>\n        <Theme fontFamily=\"sans\">{children}</Theme>\n      </Flex>\n    </Card>\n  );\n}\n\ninterface CodeCardProps {\n  code: string;\n  language: string;\n  showCopy: boolean;\n  showLanguage: boolean;\n  showLineNumbers: boolean;\n  collapsible: boolean;\n  collapsedHeight: number;\n  file?: string;\n  isLoading?: boolean;\n  children: ReactNode;\n}\n\nfunction CodeSkeleton() {\n  // Generate varied line widths for visual interest\n  const lineWidths = [\"85%\", \"70%\", \"90%\", \"60%\", \"75%\", \"80%\"];\n\n  return (\n    <Box className=\"code-skeleton\">\n      {lineWidths.map((width, index) => (\n        <Box key={index} className=\"code-skeleton-line\" style={{ width }} />\n      ))}\n    </Box>\n  );\n}\n\nconst CodeCard = memo(function CodeCard({\n  code,\n  language,\n  showCopy,\n  showLanguage,\n  showLineNumbers,\n  collapsible,\n  collapsedHeight,\n  file,\n  isLoading = false,\n  children,\n}: CodeCardProps) {\n  const { isExpanded, shouldShowToggle, copied, contentRef, contentMaxHeight, handleToggle, handleCopy } = useCodeCard({\n    code,\n    collapsedHeight,\n  });\n\n  const showToggle = collapsible && shouldShowToggle;\n  const chevronRotation = isExpanded ? \"rotate(180deg)\" : \"rotate(0deg)\";\n  const contentClassName = showLineNumbers ? \"code-content\" : \"code-content hide-line-numbers\";\n\n  return (\n    <Box position=\"relative\">\n      <Card size=\"1\" variant=\"soft\">\n        <Flex direction=\"column\">\n          <Flex justify=\"between\" align=\"start\" gap=\"2\">\n            <Flex align=\"center\" gap=\"2\">\n              {showLanguage && <LanguageBadge language={language} />}\n              {file && (\n                <Text size=\"1\" color=\"gray\" highContrast>\n                  {file}\n                </Text>\n              )}\n            </Flex>\n\n            <Flex align=\"center\" className=\"code-action-buttons\">\n              {showToggle && (\n                <IconButton\n                  size=\"2\"\n                  variant=\"ghost\"\n                  color=\"gray\"\n                  onClick={handleToggle}\n                  tooltip={isExpanded ? \"Collapse\" : \"Expand\"}\n                  aria-label={isExpanded ? \"Collapse code\" : \"Expand code\"}\n                >\n                  <HugeiconsIcon icon={ArrowDown01Icon} style={{ transform: chevronRotation }} className=\"code-chevron\" strokeWidth={1.75} />\n                </IconButton>\n              )}\n              {showCopy && (\n                <Button\n                  size=\"2\"\n                  variant=\"ghost\"\n                  color=\"gray\"\n                  onClick={handleCopy}\n                  tooltip={copied ? \"Copied!\" : \"Copy\"}\n                  aria-label={copied ? \"Copied!\" : \"Copy code\"}\n                >\n                  <HugeiconsIcon icon={copied ? Tick01Icon : Copy01Icon} strokeWidth={1.75} /> Copy\n                </Button>\n              )}\n            </Flex>\n          </Flex>\n\n          <Box ref={contentRef} style={{ maxHeight: collapsible ? `${contentMaxHeight}px` : undefined }} className={contentClassName}>\n            <ScrollArea type=\"auto\" scrollbars=\"horizontal\">\n              {isLoading ? <CodeSkeleton /> : children}\n            </ScrollArea>\n          </Box>\n\n          {showToggle && !isExpanded && <Box className=\"code-scroll-shadow visible\" />}\n        </Flex>\n      </Card>\n    </Box>\n  );\n});\n\ninterface RuntimeCodeSectionProps {\n  code: string;\n  language: string;\n  showCopy: boolean;\n  showLanguage: boolean;\n  showLineNumbers: boolean;\n  collapsible: boolean;\n  collapsedHeight: number;\n  file?: string;\n  shikiConfig?: ShikiConfig;\n}\n\nconst RuntimeCodeSection = memo(function RuntimeCodeSection({\n  code,\n  language,\n  showCopy,\n  showLanguage,\n  showLineNumbers,\n  collapsible,\n  collapsedHeight,\n  file,\n  shikiConfig,\n}: RuntimeCodeSectionProps) {\n  const [highlighted, setHighlighted] = useState<string | null>(null);\n\n  // Memoize Shiki config to prevent unnecessary re-highlights\n  const shikiOptions = useMemo(() => {\n    const lightTheme = shikiConfig?.themes?.light || DEFAULT_LIGHT_THEME;\n    const darkTheme = shikiConfig?.themes?.dark || DEFAULT_DARK_THEME;\n\n    return {\n      lang: language as BundledLanguage,\n      themes: {\n        light: lightTheme as BundledTheme,\n        dark: darkTheme as BundledTheme,\n      },\n      defaultColor: false as const,\n      langAlias: shikiConfig?.langAlias,\n      transformers: shikiConfig?.transformers,\n      meta: shikiConfig?.meta ? { __raw: shikiConfig.meta } : undefined,\n    };\n  }, [language, shikiConfig?.themes?.light, shikiConfig?.themes?.dark, shikiConfig?.langAlias, shikiConfig?.transformers, shikiConfig?.meta]);\n\n  useEffect(() => {\n    let cancelled = false;\n\n    codeToHtml(code, shikiOptions)\n      .then((html) => {\n        if (!cancelled) {\n          setHighlighted(html);\n        }\n      })\n      .catch((error) => {\n        if (!cancelled) {\n          // Keep previous highlighted content on error (stale while revalidate)\n          if (process.env.NODE_ENV === \"development\") {\n            console.error(\"[CodeBlock] Shiki highlighting failed:\", error);\n          }\n        }\n      });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [code, shikiOptions]);\n\n  // Only show loading skeleton on initial render (no highlighted content yet)\n  // During updates, keep showing previous highlighted content (stale while revalidate)\n  const isInitialLoading = highlighted === null;\n\n  return (\n    <CodeCard\n      code={code}\n      language={language}\n      showCopy={showCopy}\n      showLanguage={showLanguage}\n      showLineNumbers={showLineNumbers}\n      collapsible={collapsible}\n      collapsedHeight={collapsedHeight}\n      file={file}\n      isLoading={isInitialLoading}\n    >\n      {highlighted ? <Box dangerouslySetInnerHTML={{ __html: highlighted }} /> : null}\n    </CodeCard>\n  );\n});\n\ninterface ChildrenCodeSectionProps {\n  children: ReactNode;\n  showCopy: boolean;\n  showLanguage: boolean;\n  showLineNumbers: boolean;\n  collapsible: boolean;\n  collapsedHeight: number;\n  file?: string;\n}\n\nconst ChildrenCodeSection = memo(function ChildrenCodeSection({\n  children,\n  showCopy,\n  showLanguage,\n  showLineNumbers,\n  collapsible,\n  collapsedHeight,\n  file,\n}: ChildrenCodeSectionProps) {\n  const code = extractTextFromChildren(children);\n  const language = extractLanguageFromChildren(children);\n\n  return (\n    <CodeCard\n      code={code}\n      language={language}\n      showCopy={showCopy}\n      showLanguage={showLanguage}\n      showLineNumbers={showLineNumbers}\n      collapsible={collapsible}\n      collapsedHeight={collapsedHeight}\n      file={file}\n    >\n      {children}\n    </CodeCard>\n  );\n});\n\nexport function CodeBlock({\n  children,\n  code,\n  language,\n  preview,\n  showCopy = true,\n  showLanguage = true,\n  showLineNumbers = true,\n  shikiConfig,\n  background,\n  backgroundProps,\n  collapsible = true,\n  collapsedHeight = DEFAULT_COLLAPSED_HEIGHT,\n  file,\n}: CodeBlockProps) {\n  const displayLanguage = language || extractLanguageFromChildren(children) || \"text\";\n\n  return (\n    <CodeBlockContext.Provider value={true}>\n      <Box className=\"docs-code-block\" my=\"3\">\n        <Flex direction=\"column\" gap=\"2\">\n          {preview && (\n            <PreviewSection background={background} backgroundProps={backgroundProps}>\n              {preview}\n            </PreviewSection>\n          )}\n\n          {code && (\n            <RuntimeCodeSection\n              code={code}\n              language={displayLanguage}\n              showCopy={showCopy}\n              showLanguage={showLanguage}\n              showLineNumbers={showLineNumbers}\n              collapsible={collapsible}\n              collapsedHeight={collapsedHeight}\n              file={file}\n              shikiConfig={shikiConfig}\n            />\n          )}\n\n          {children && !code && (\n            <ChildrenCodeSection\n              showCopy={showCopy}\n              showLanguage={showLanguage}\n              showLineNumbers={showLineNumbers}\n              collapsible={collapsible}\n              collapsedHeight={collapsedHeight}\n              file={file}\n            >\n              {children}\n            </ChildrenCodeSection>\n          )}\n        </Flex>\n      </Box>\n    </CodeBlockContext.Provider>\n  );\n}\n\nexport function useCodeBlockContext() {\n  return useContext(CodeBlockContext);\n}\n"],
+  "mappings": "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",
   "names": ["React", "useState", "useEffect", "useMemo", "memo", "createContext", "useContext", "Box", "Card", "Flex", "Button", "Text", "Theme", "ScrollArea", "IconButton", "HugeiconsIcon", "Copy01Icon", "Tick01Icon", "ArrowDown01Icon", "codeToHtml", "extractTextFromChildren", "extractLanguageFromChildren", "useCodeCard", "LanguageBadge", "CodeBlockContext", "DEFAULT_COLLAPSED_HEIGHT", "DEFAULT_LIGHT_THEME", "DEFAULT_DARK_THEME", "PreviewSection", "children", "background", "backgroundProps", "dotSize", "color", "backgroundColor", "height", "width", "radius", "backgroundStyle", "CodeSkeleton", "index", "CodeCard", "code", "language", "showCopy", "showLanguage", "showLineNumbers", "collapsible", "collapsedHeight", "file", "isLoading", "isExpanded", "shouldShowToggle", "copied", "contentRef", "contentMaxHeight", "handleToggle", "handleCopy", "showToggle", "chevronRotation", "contentClassName", "RuntimeCodeSection", "shikiConfig", "highlighted", "setHighlighted", "shikiOptions", "lightTheme", "darkTheme", "cancelled", "html", "error", "ChildrenCodeSection", "CodeBlock", "preview", "displayLanguage", "useCodeBlockContext"]
 }

package/dist/esm/components/docs/docs-page-header.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { DocsPageMeta } from './types.js';
+export interface DocsPageHeaderProps {
+    /** Page metadata */
+    meta: DocsPageMeta;
+    /** Optional actions to render on the right side */
+    actions?: React.ReactNode;
+    /** Show copy page button */
+    showCopyButton?: boolean;
+}
+export declare function DocsPageHeader({ meta, actions, showCopyButton }: DocsPageHeaderProps): React.JSX.Element;
+//# sourceMappingURL=docs-page-header.d.ts.map

package/dist/esm/components/docs/docs-page-header.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"docs-page-header.d.ts","sourceRoot":"","sources":["../../../../src/components/docs/docs-page-header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAI3C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,MAAM,WAAW,mBAAmB;IAClC,oBAAoB;IACpB,IAAI,EAAE,YAAY,CAAC;IACnB,mDAAmD;IACnD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4BAA4B;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,cAAqB,EAAE,EAAE,mBAAmB,qBA0E3F"}

package/dist/esm/components/docs/docs-page-header.js ADDED Viewed

@@ -0,0 +1,10 @@
+"use client";import o,{useCallback as p}from"react";import{Flex as n,Heading as l,Text as i,Link as u,Button as d}from"@kushagradhawan/kookie-ui";import{HugeiconsIcon as y}from"@hugeicons/react";import{Copy01Icon as f}from"@hugeicons/core-free-icons";function P({meta:e,actions:c,showCopyButton:s=!0}){const a=p(()=>{const t=document.querySelector("[data-content-area]");if(!t)return;let r=`# ${e.title}
+`;e.description&&(r+=`${e.description}
+`),e.source&&(r+=`[View source](${e.source})
+`),r+=`---
+`;const g=t.textContent||"";r+=g.trim(),navigator.clipboard.writeText(r)},[e.title,e.description,e.source]);return o.createElement(n,{direction:"column",gap:"4"},e.category&&o.createElement(i,{size:"2",weight:"medium"},e.category),o.createElement(n,{align:"center",justify:"between",gap:"4"},o.createElement(l,{as:"h1",size:"9",weight:"medium"},e.title),o.createElement(n,{align:"center",gap:"4"},c,s&&o.createElement(d,{size:"2",variant:"ghost",color:"gray",highContrast:!0,onClick:a,"aria-label":"Copy page content"},o.createElement(y,{icon:f}),"Copy page"))),e.description&&o.createElement(i,{size:"3",color:"gray"},e.description),e.source&&o.createElement(u,{size:"3",href:e.source,target:"_blank",color:"gray",highContrast:!0,rel:"noreferrer"},"View source \u2192"))}export{P as DocsPageHeader};
+//# sourceMappingURL=docs-page-header.js.map

package/dist/esm/components/docs/docs-page-header.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/docs/docs-page-header.tsx"],
+  "sourcesContent": ["'use client';\n\nimport React, { useCallback } from 'react';\nimport { Flex, Heading, Text, Link, Button } from '@kushagradhawan/kookie-ui';\nimport { HugeiconsIcon } from '@hugeicons/react';\nimport { Copy01Icon } from '@hugeicons/core-free-icons';\nimport type { DocsPageMeta } from './types.js';\n\nexport interface DocsPageHeaderProps {\n  /** Page metadata */\n  meta: DocsPageMeta;\n  /** Optional actions to render on the right side */\n  actions?: React.ReactNode;\n  /** Show copy page button */\n  showCopyButton?: boolean;\n}\n\nexport function DocsPageHeader({ meta, actions, showCopyButton = true }: DocsPageHeaderProps) {\n  const handleCopyPage = useCallback(() => {\n    const contentArea = document.querySelector('[data-content-area]');\n    if (!contentArea) return;\n\n    let markdown = `# ${meta.title}\\n\\n`;\n\n    if (meta.description) {\n      markdown += `${meta.description}\\n\\n`;\n    }\n\n    if (meta.source) {\n      markdown += `[View source](${meta.source})\\n\\n`;\n    }\n\n    markdown += `---\\n\\n`;\n\n    const textContent = contentArea.textContent || '';\n    markdown += textContent.trim();\n\n    navigator.clipboard.writeText(markdown);\n  }, [meta.title, meta.description, meta.source]);\n\n  return (\n    <Flex direction=\"column\" gap=\"4\">\n      {meta.category && (\n        <Text size=\"2\" weight=\"medium\">\n          {meta.category}\n        </Text>\n      )}\n\n      <Flex align=\"center\" justify=\"between\" gap=\"4\">\n        <Heading as=\"h1\" size=\"9\" weight=\"medium\">\n          {meta.title}\n        </Heading>\n\n        <Flex align=\"center\" gap=\"4\">\n          {actions}\n          {showCopyButton && (\n            <Button\n              size=\"2\"\n              variant=\"ghost\"\n              color=\"gray\"\n              highContrast\n              onClick={handleCopyPage}\n              aria-label=\"Copy page content\"\n            >\n              <HugeiconsIcon icon={Copy01Icon} />\n              Copy page\n            </Button>\n          )}\n        </Flex>\n      </Flex>\n\n      {meta.description && (\n        <Text size=\"3\" color=\"gray\">\n          {meta.description}\n        </Text>\n      )}\n\n      {meta.source && (\n        <Link\n          size=\"3\"\n          href={meta.source}\n          target=\"_blank\"\n          color=\"gray\"\n          highContrast\n          rel=\"noreferrer\"\n        >\n          View source \u2192\n        </Link>\n      )}\n    </Flex>\n  );\n}\n"],
+  "mappings": "aAEA,OAAOA,GAAS,eAAAC,MAAmB,QACnC,OAAS,QAAAC,EAAM,WAAAC,EAAS,QAAAC,EAAM,QAAAC,EAAM,UAAAC,MAAc,4BAClD,OAAS,iBAAAC,MAAqB,mBAC9B,OAAS,cAAAC,MAAkB,6BAYpB,SAASC,EAAe,CAAE,KAAAC,EAAM,QAAAC,EAAS,eAAAC,EAAiB,EAAK,EAAwB,CAC5F,MAAMC,EAAiBZ,EAAY,IAAM,CACvC,MAAMa,EAAc,SAAS,cAAc,qBAAqB,EAChE,GAAI,CAACA,EAAa,OAElB,IAAIC,EAAW,KAAKL,EAAK,KAAK;AAAA;AAAA,EAE1BA,EAAK,cACPK,GAAY,GAAGL,EAAK,WAAW;AAAA;AAAA,GAG7BA,EAAK,SACPK,GAAY,iBAAiBL,EAAK,MAAM;AAAA;AAAA,GAG1CK,GAAY;AAAA;AAAA,EAEZ,MAAMC,EAAcF,EAAY,aAAe,GAC/CC,GAAYC,EAAY,KAAK,EAE7B,UAAU,UAAU,UAAUD,CAAQ,CACxC,EAAG,CAACL,EAAK,MAAOA,EAAK,YAAaA,EAAK,MAAM,CAAC,EAE9C,OACEV,EAAA,cAACE,EAAA,CAAK,UAAU,SAAS,IAAI,KAC1BQ,EAAK,UACJV,EAAA,cAACI,EAAA,CAAK,KAAK,IAAI,OAAO,UACnBM,EAAK,QACR,EAGFV,EAAA,cAACE,EAAA,CAAK,MAAM,SAAS,QAAQ,UAAU,IAAI,KACzCF,EAAA,cAACG,EAAA,CAAQ,GAAG,KAAK,KAAK,IAAI,OAAO,UAC9BO,EAAK,KACR,EAEAV,EAAA,cAACE,EAAA,CAAK,MAAM,SAAS,IAAI,KACtBS,EACAC,GACCZ,EAAA,cAACM,EAAA,CACC,KAAK,IACL,QAAQ,QACR,MAAM,OACN,aAAY,GACZ,QAASO,EACT,aAAW,qBAEXb,EAAA,cAACO,EAAA,CAAc,KAAMC,EAAY,EAAE,WAErC,CAEJ,CACF,EAECE,EAAK,aACJV,EAAA,cAACI,EAAA,CAAK,KAAK,IAAI,MAAM,QAClBM,EAAK,WACR,EAGDA,EAAK,QACJV,EAAA,cAACK,EAAA,CACC,KAAK,IACL,KAAMK,EAAK,OACX,OAAO,SACP,MAAM,OACN,aAAY,GACZ,IAAI,cACL,oBAED,CAEJ,CAEJ",
+  "names": ["React", "useCallback", "Flex", "Heading", "Text", "Link", "Button", "HugeiconsIcon", "Copy01Icon", "DocsPageHeader", "meta", "actions", "showCopyButton", "handleCopyPage", "contentArea", "markdown", "textContent"]
+}

package/dist/esm/components/docs/docs-page.d.ts ADDED Viewed

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { DocsPageMeta } from './types.js';
+export interface DocsPageProps {
+    children: React.ReactNode;
+    /** Page metadata for header */
+    meta?: DocsPageMeta;
+    /** Optional table of contents element */
+    tableOfContents?: React.ReactNode;
+    /** Content max width */
+    maxWidth?: string | number;
+    /** Page padding */
+    padding?: '3' | '4' | '5' | '6' | '7' | '8' | '9';
+    /** Optional header actions */
+    headerActions?: React.ReactNode;
+    /** Custom header element (overrides meta-based header) */
+    header?: React.ReactNode;
+    /** Show footer with copyright */
+    showFooter?: boolean;
+    /** Footer copyright holder */
+    footerCopyright?: {
+        name: string;
+        url?: string;
+    };
+    /** GitHub repo URL for footer */
+    githubUrl?: string;
+}
+export declare function DocsPage({ children, meta, tableOfContents, maxWidth, padding, headerActions, header, showFooter, footerCopyright, githubUrl, }: DocsPageProps): React.JSX.Element;
+//# sourceMappingURL=docs-page.d.ts.map

package/dist/esm/components/docs/docs-page.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"docs-page.d.ts","sourceRoot":"","sources":["../../../../src/components/docs/docs-page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,+BAA+B;IAC/B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,yCAAyC;IACzC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,wBAAwB;IACxB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,mBAAmB;IACnB,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAClD,8BAA8B;IAC9B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,0DAA0D;IAC1D,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8BAA8B;IAC9B,eAAe,CAAC,EAAE;QAChB,IAAI,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,IAAI,EACJ,eAAe,EACf,QAAkB,EAClB,OAAa,EACb,aAAa,EACb,MAAM,EACN,UAAkB,EAClB,eAAe,EACf,SAAS,GACV,EAAE,aAAa,qBAyDf"}

package/dist/esm/components/docs/docs-page.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import e from"react";import{Flex as i,Box as l,Separator as g,Container as x,Text as u,Link as s}from"@kushagradhawan/kookie-ui";import{DocsPageHeader as h}from"./docs-page-header.js";function D({children:d,meta:r,tableOfContents:o,maxWidth:f="48rem",padding:w="6",headerActions:m,header:t,showFooter:p=!1,footerCopyright:n,githubUrl:a}){const c=new Date().getFullYear();return e.createElement(i,{my:"6",gap:{initial:"6",md:"6"},align:"start",direction:{initial:"column",lg:"row"}},e.createElement(i,{direction:"column",gap:"6",p:{initial:"2",sm:"4"},flexGrow:"1",style:{minWidth:0}},e.createElement(x,{size:"2",style:{minWidth:0},"data-content-area":!0},e.createElement(l,{p:"4",width:"100%"},e.createElement(i,{direction:"column",gap:"8",width:"100%"},t\|\|r&&e.createElement(h,{meta:r,actions:m}),(t\|\|r)&&e.createElement(g,{size:"4"}),e.createElement(i,{direction:"column",gap:"0",width:"100%"},d)),p&&e.createElement(i,{align:"center",justify:"center",width:"100%",pt:"8"},e.createElement(u,{size:"2",color:"gray",align:"center"},"\xA9 ",c," ",n?.url?e.createElement(s,{href:n.url,target:"_blank",rel:"noreferrer"},n.name):n?.name\|\|"Your Company",". Licensed under MIT.",a&&e.createElement(e.Fragment,null," ",e.createElement(s,{href:a,target:"_blank",rel:"noreferrer"},"GitHub"),".")))))),o&&e.createElement(l,{style:{width:"240px",minWidth:"160px"},position:"sticky",top:"200px",display:{initial:"none",lg:"block"}},o))}export{D as DocsPage};
2	+ //# sourceMappingURL=docs-page.js.map

package/dist/esm/components/docs/docs-page.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/docs/docs-page.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport { Flex, Box, Separator, Container, Text, Link } from '@kushagradhawan/kookie-ui';\nimport { DocsPageHeader } from './docs-page-header.js';\nimport type { DocsPageMeta } from './types.js';\n\nexport interface DocsPageProps {\n  children: React.ReactNode;\n  /** Page metadata for header */\n  meta?: DocsPageMeta;\n  /** Optional table of contents element */\n  tableOfContents?: React.ReactNode;\n  /** Content max width */\n  maxWidth?: string | number;\n  /** Page padding */\n  padding?: '3' | '4' | '5' | '6' | '7' | '8' | '9';\n  /** Optional header actions */\n  headerActions?: React.ReactNode;\n  /** Custom header element (overrides meta-based header) */\n  header?: React.ReactNode;\n  /** Show footer with copyright */\n  showFooter?: boolean;\n  /** Footer copyright holder */\n  footerCopyright?: {\n    name: string;\n    url?: string;\n  };\n  /** GitHub repo URL for footer */\n  githubUrl?: string;\n}\n\nexport function DocsPage({\n  children,\n  meta,\n  tableOfContents,\n  maxWidth = '48rem',\n  padding = '6',\n  headerActions,\n  header,\n  showFooter = false,\n  footerCopyright,\n  githubUrl,\n}: DocsPageProps) {\n  const currentYear = new Date().getFullYear();\n  const showHeader = header || meta;\n\n  return (\n    <Flex my=\"6\" gap={{ initial: '6', md: '6' }} align=\"start\" direction={{ initial: 'column', lg: 'row' }}>\n      {/* Main content area */}\n      <Flex direction=\"column\" gap=\"6\" p={{ initial: '2', sm: '4' }} flexGrow=\"1\" style={{ minWidth: 0 }}>\n        <Container size=\"2\" style={{ minWidth: 0 }} data-content-area>\n          <Box p=\"4\" width=\"100%\">\n            <Flex direction=\"column\" gap=\"8\" width=\"100%\">\n              {/* Page Header */}\n              {header ? header : meta && <DocsPageHeader meta={meta} actions={headerActions} />}\n\n              {showHeader && <Separator size=\"4\" />}\n\n              <Flex direction=\"column\" gap=\"0\" width=\"100%\">\n                {children}\n              </Flex>\n            </Flex>\n\n            {showFooter && (\n              <Flex align=\"center\" justify=\"center\" width=\"100%\" pt=\"8\">\n                <Text size=\"2\" color=\"gray\" align=\"center\">\n                  \u00A9 {currentYear}{' '}\n                  {footerCopyright?.url ? (\n                    <Link href={footerCopyright.url} target=\"_blank\" rel=\"noreferrer\">\n                      {footerCopyright.name}\n                    </Link>\n                  ) : (\n                    footerCopyright?.name || 'Your Company'\n                  )}\n                  . Licensed under MIT.\n                  {githubUrl && (\n                    <>\n                      {' '}\n                      <Link href={githubUrl} target=\"_blank\" rel=\"noreferrer\">\n                        GitHub\n                      </Link>\n                      .\n                    </>\n                  )}\n                </Text>\n              </Flex>\n            )}\n          </Box>\n        </Container>\n      </Flex>\n\n      {/* Table of Contents */}\n      {tableOfContents && (\n        <Box style={{ width: '240px', minWidth: '160px' }} position=\"sticky\" top=\"200px\" display={{ initial: 'none', lg: 'block' }}>\n          {tableOfContents}\n        </Box>\n      )}\n    </Flex>\n  );\n}\n"],
+  "mappings": "AAAA,OAAOA,MAAW,QAClB,OAAS,QAAAC,EAAM,OAAAC,EAAK,aAAAC,EAAW,aAAAC,EAAW,QAAAC,EAAM,QAAAC,MAAY,4BAC5D,OAAS,kBAAAC,MAAsB,wBA4BxB,SAASC,EAAS,CACvB,SAAAC,EACA,KAAAC,EACA,gBAAAC,EACA,SAAAC,EAAW,QACX,QAAAC,EAAU,IACV,cAAAC,EACA,OAAAC,EACA,WAAAC,EAAa,GACb,gBAAAC,EACA,UAAAC,CACF,EAAkB,CAChB,MAAMC,EAAc,IAAI,KAAK,EAAE,YAAY,EAG3C,OACEnB,EAAA,cAACC,EAAA,CAAK,GAAG,IAAI,IAAK,CAAE,QAAS,IAAK,GAAI,GAAI,EAAG,MAAM,QAAQ,UAAW,CAAE,QAAS,SAAU,GAAI,KAAM,GAEnGD,EAAA,cAACC,EAAA,CAAK,UAAU,SAAS,IAAI,IAAI,EAAG,CAAE,QAAS,IAAK,GAAI,GAAI,EAAG,SAAS,IAAI,MAAO,CAAE,SAAU,CAAE,GAC/FD,EAAA,cAACI,EAAA,CAAU,KAAK,IAAI,MAAO,CAAE,SAAU,CAAE,EAAG,oBAAiB,IAC3DJ,EAAA,cAACE,EAAA,CAAI,EAAE,IAAI,MAAM,QACfF,EAAA,cAACC,EAAA,CAAK,UAAU,SAAS,IAAI,IAAI,MAAM,QAEpCc,GAAkBL,GAAQV,EAAA,cAACO,EAAA,CAAe,KAAMG,EAAM,QAASI,EAAe,GAVxEC,GAAUL,IAYFV,EAAA,cAACG,EAAA,CAAU,KAAK,IAAI,EAEnCH,EAAA,cAACC,EAAA,CAAK,UAAU,SAAS,IAAI,IAAI,MAAM,QACpCQ,CACH,CACF,EAECO,GACChB,EAAA,cAACC,EAAA,CAAK,MAAM,SAAS,QAAQ,SAAS,MAAM,OAAO,GAAG,KACpDD,EAAA,cAACK,EAAA,CAAK,KAAK,IAAI,MAAM,OAAO,MAAM,UAAS,QACtCc,EAAa,IACfF,GAAiB,IAChBjB,EAAA,cAACM,EAAA,CAAK,KAAMW,EAAgB,IAAK,OAAO,SAAS,IAAI,cAClDA,EAAgB,IACnB,EAEAA,GAAiB,MAAQ,eACzB,wBAEDC,GACClB,EAAA,cAAAA,EAAA,cACG,IACDA,EAAA,cAACM,EAAA,CAAK,KAAMY,EAAW,OAAO,SAAS,IAAI,cAAa,QAExD,EAAO,GAET,CAEJ,CACF,CAEJ,CACF,CACF,EAGCP,GACCX,EAAA,cAACE,EAAA,CAAI,MAAO,CAAE,MAAO,QAAS,SAAU,OAAQ,EAAG,SAAS,SAAS,IAAI,QAAQ,QAAS,CAAE,QAAS,OAAQ,GAAI,OAAQ,GACtHS,CACH,CAEJ,CAEJ",
+  "names": ["React", "Flex", "Box", "Separator", "Container", "Text", "Link", "DocsPageHeader", "DocsPage", "children", "meta", "tableOfContents", "maxWidth", "padding", "headerActions", "header", "showFooter", "footerCopyright", "githubUrl", "currentYear"]
+}

package/dist/esm/components/docs/docs-shell.d.ts ADDED Viewed

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { DocsNavigationConfig, DocsLogoConfig } from './types.js';
+export interface DocsShellProps {
+    children: React.ReactNode;
+    /** Navigation configuration */
+    navigation: DocsNavigationConfig;
+    /** Logo configuration */
+    logo?: DocsLogoConfig;
+    /** Optional header actions (dark mode toggle, github link, etc.) */
+    headerActions?: React.ReactNode;
+    /** Optional sidebar footer content */
+    sidebarFooter?: React.ReactNode;
+    /** Shell height */
+    height?: 'full' | 'auto' | string | number;
+    /** Sidebar thin size (when collapsed) */
+    sidebarThinSize?: number;
+    /** Whether sidebar is resizable */
+    sidebarResizable?: boolean;
+    /** Mobile trigger icon */
+    mobileTriggerIcon?: React.ReactNode;
+    /** Current pathname for active state detection */
+    pathname?: string;
+    /** Link component to use (defaults to 'a') */
+    linkComponent?: React.ComponentType<{
+        href: string;
+        children: React.ReactNode;
+        prefetch?: boolean;
+        'aria-label'?: string;
+    }>;
+}
+export declare function DocsShell({ children, navigation, logo, headerActions, sidebarFooter, height, sidebarThinSize, sidebarResizable, mobileTriggerIcon, pathname, linkComponent, }: DocsShellProps): React.JSX.Element;
+//# sourceMappingURL=docs-shell.d.ts.map

package/dist/esm/components/docs/docs-shell.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"docs-shell.d.ts","sourceRoot":"","sources":["../../../../src/components/docs/docs-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEvE,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,+BAA+B;IAC/B,UAAU,EAAE,oBAAoB,CAAC;IACjC,yBAAyB;IACzB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,oEAAoE;IACpE,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,sCAAsC;IACtC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,mBAAmB;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3C,yCAAyC;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,0BAA0B;IAC1B,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC7H;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,UAAU,EACV,IAAI,EACJ,aAAa,EACb,aAAa,EACb,MAAM,EACN,eAAoB,EACpB,gBAAuB,EACvB,iBAAiB,EACjB,QAAa,EACb,aAAa,GACd,EAAE,cAAc,qBAsEhB"}

package/dist/esm/components/docs/docs-shell.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use client";import e,{useState as b}from"react";import{Shell as o,Flex as i,IconButton as x}from"@kushagradhawan/kookie-ui";import{DocsSidebar as C}from"./docs-sidebar.js";function w({children:r,navigation:a,logo:l,headerActions:t,sidebarFooter:n,height:s,sidebarThinSize:g=80,sidebarResizable:h=!0,mobileTriggerIcon:d,pathname:p="",linkComponent:c}){const[f,m]=b("expanded"),u=n\|\|t?e.createElement(i,{gap:"2",align:"center"},t,n):void 0;return e.createElement(o.Root,{height:s},e.createElement(o.Sidebar,{toggleModes:"single",thinSize:g,resizable:h,defaultState:{initial:"collapsed",sm:"expanded"},onStateChange:S=>m(S==="thin"?"thin":"expanded"),presentation:{initial:"overlay",sm:"fixed"}},e.createElement(C,{navigation:a,logo:l,presentation:f,footer:u,pathname:p,linkComponent:c})),e.createElement(o.Content,null,e.createElement(i,{display:{initial:"flex",sm:"none"},position:"fixed",top:"4",left:"4",align:"center",justify:"center",width:"auto",height:"auto",style:{zIndex:999}},e.createElement(x,{variant:"ghost",size:"3",highContrast:!0,color:"gray",asChild:!0},e.createElement(o.Trigger,{target:"sidebar"},d\|\|e.createElement("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M2 4h12M2 8h12M2 12h12",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}))))),r))}export{w as DocsShell};
2	+ //# sourceMappingURL=docs-shell.js.map

package/dist/esm/components/docs/docs-shell.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/docs/docs-shell.tsx"],
+  "sourcesContent": ["'use client';\n\nimport React, { useState } from 'react';\nimport { Shell, Flex, IconButton } from '@kushagradhawan/kookie-ui';\nimport { DocsSidebar } from './docs-sidebar.js';\nimport type { DocsNavigationConfig, DocsLogoConfig } from './types.js';\n\nexport interface DocsShellProps {\n  children: React.ReactNode;\n  /** Navigation configuration */\n  navigation: DocsNavigationConfig;\n  /** Logo configuration */\n  logo?: DocsLogoConfig;\n  /** Optional header actions (dark mode toggle, github link, etc.) */\n  headerActions?: React.ReactNode;\n  /** Optional sidebar footer content */\n  sidebarFooter?: React.ReactNode;\n  /** Shell height */\n  height?: 'full' | 'auto' | string | number;\n  /** Sidebar thin size (when collapsed) */\n  sidebarThinSize?: number;\n  /** Whether sidebar is resizable */\n  sidebarResizable?: boolean;\n  /** Mobile trigger icon */\n  mobileTriggerIcon?: React.ReactNode;\n  /** Current pathname for active state detection */\n  pathname?: string;\n  /** Link component to use (defaults to 'a') */\n  linkComponent?: React.ComponentType<{ href: string; children: React.ReactNode; prefetch?: boolean; 'aria-label'?: string }>;\n}\n\nexport function DocsShell({\n  children,\n  navigation,\n  logo,\n  headerActions,\n  sidebarFooter,\n  height,\n  sidebarThinSize = 80,\n  sidebarResizable = true,\n  mobileTriggerIcon,\n  pathname = '',\n  linkComponent,\n}: DocsShellProps) {\n  const [sidebarPresentation, setSidebarPresentation] = useState<'thin' | 'expanded'>('expanded');\n\n  // Combine headerActions with sidebarFooter\n  const footerContent = sidebarFooter || headerActions ? (\n    <Flex gap=\"2\" align=\"center\">\n      {headerActions}\n      {sidebarFooter}\n    </Flex>\n  ) : undefined;\n\n  return (\n    <Shell.Root height={height}>\n      <Shell.Sidebar\n        toggleModes=\"single\"\n        thinSize={sidebarThinSize}\n        resizable={sidebarResizable}\n        defaultState={{ initial: 'collapsed', sm: 'expanded' }}\n        onStateChange={(state) => setSidebarPresentation(state === 'thin' ? 'thin' : 'expanded')}\n        presentation={{ initial: 'overlay', sm: 'fixed' }}\n      >\n        <DocsSidebar\n          navigation={navigation}\n          logo={logo}\n          presentation={sidebarPresentation}\n          footer={footerContent}\n          pathname={pathname}\n          linkComponent={linkComponent}\n        />\n      </Shell.Sidebar>\n\n      <Shell.Content>\n        {/* Mobile trigger */}\n        <Flex\n          display={{ initial: 'flex', sm: 'none' }}\n          position=\"fixed\"\n          top=\"4\"\n          left=\"4\"\n          align=\"center\"\n          justify=\"center\"\n          width=\"auto\"\n          height=\"auto\"\n          style={{ zIndex: 999 }}\n        >\n          <IconButton variant=\"ghost\" size=\"3\" highContrast color=\"gray\" asChild>\n            <Shell.Trigger target=\"sidebar\">\n              {mobileTriggerIcon || (\n                <svg\n                  width=\"16\"\n                  height=\"16\"\n                  viewBox=\"0 0 16 16\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M2 4h12M2 8h12M2 12h12\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"1.5\"\n                    strokeLinecap=\"round\"\n                  />\n                </svg>\n              )}\n            </Shell.Trigger>\n          </IconButton>\n        </Flex>\n\n        {children}\n      </Shell.Content>\n    </Shell.Root>\n  );\n}\n"],
+  "mappings": "aAEA,OAAOA,GAAS,YAAAC,MAAgB,QAChC,OAAS,SAAAC,EAAO,QAAAC,EAAM,cAAAC,MAAkB,4BACxC,OAAS,eAAAC,MAAmB,oBA2BrB,SAASC,EAAU,CACxB,SAAAC,EACA,WAAAC,EACA,KAAAC,EACA,cAAAC,EACA,cAAAC,EACA,OAAAC,EACA,gBAAAC,EAAkB,GAClB,iBAAAC,EAAmB,GACnB,kBAAAC,EACA,SAAAC,EAAW,GACX,cAAAC,CACF,EAAmB,CACjB,KAAM,CAACC,EAAqBC,CAAsB,EAAIlB,EAA8B,UAAU,EAGxFmB,EAAgBT,GAAiBD,EACrCV,EAAA,cAACG,EAAA,CAAK,IAAI,IAAI,MAAM,UACjBO,EACAC,CACH,EACE,OAEJ,OACEX,EAAA,cAACE,EAAM,KAAN,CAAW,OAAQU,GAClBZ,EAAA,cAACE,EAAM,QAAN,CACC,YAAY,SACZ,SAAUW,EACV,UAAWC,EACX,aAAc,CAAE,QAAS,YAAa,GAAI,UAAW,EACrD,cAAgBO,GAAUF,EAAuBE,IAAU,OAAS,OAAS,UAAU,EACvF,aAAc,CAAE,QAAS,UAAW,GAAI,OAAQ,GAEhDrB,EAAA,cAACK,EAAA,CACC,WAAYG,EACZ,KAAMC,EACN,aAAcS,EACd,OAAQE,EACR,SAAUJ,EACV,cAAeC,EACjB,CACF,EAEAjB,EAAA,cAACE,EAAM,QAAN,KAECF,EAAA,cAACG,EAAA,CACC,QAAS,CAAE,QAAS,OAAQ,GAAI,MAAO,EACvC,SAAS,QACT,IAAI,IACJ,KAAK,IACL,MAAM,SACN,QAAQ,SACR,MAAM,OACN,OAAO,OACP,MAAO,CAAE,OAAQ,GAAI,GAErBH,EAAA,cAACI,EAAA,CAAW,QAAQ,QAAQ,KAAK,IAAI,aAAY,GAAC,MAAM,OAAO,QAAO,IACpEJ,EAAA,cAACE,EAAM,QAAN,CAAc,OAAO,WACnBa,GACCf,EAAA,cAAC,OACC,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,8BAENA,EAAA,cAAC,QACC,EAAE,yBACF,OAAO,eACP,YAAY,MACZ,cAAc,QAChB,CACF,CAEJ,CACF,CACF,EAECO,CACH,CACF,CAEJ",
+  "names": ["React", "useState", "Shell", "Flex", "IconButton", "DocsSidebar", "DocsShell", "children", "navigation", "logo", "headerActions", "sidebarFooter", "height", "sidebarThinSize", "sidebarResizable", "mobileTriggerIcon", "pathname", "linkComponent", "sidebarPresentation", "setSidebarPresentation", "footerContent", "state"]
+}