@ably/ui 17.14.0-dev.2fa7246503 → 17.14.0-dev.72422c80f2

package/AGENTS.md

@@ -75,7 +75,51 @@ export function useContentHeight(
 - Run tests with `pnpm test` after making file changes
 - When testing with Storybook, use Chrome DevTools Performance tab to verify no forced reflows
 - For performance-related changes, compare before/after metrics and include in commit/PR
-- Use Chrome MCP at `http://localhost:6006` (Storybook) or `http://localhost:4000` (Voltaire) for visual verification
+
+### Chrome DevTools MCP Tools (Optional)
+
+If you have MCP support (Claude Code detects `.mcp.json` automatically), use these tools for automated performance profiling and visual verification during component development:
+
+**Primary use case:** Performance profiling during component development to detect forced reflows and layout thrashing.
+
+**Development server URLs:**
+- `http://localhost:6006` - Storybook (primary development environment for @ably/ui)
+- `http://localhost:4000` - Voltaire docs site (for testing components in production-like context)
+
+**Common workflows:**
+
+1. **Automated forced reflow detection:**
+   - Start Storybook: `pnpm storybook`
+   - Use `mcp__chrome-devtools__performance_start_trace` with `reload: true, autoStop: true`
+   - Navigate to component story at `http://localhost:6006`
+   - Tool automatically stops trace after page load
+   - Review trace for forced reflow warnings (see Performance Optimization Guidelines above)
+   - If forced reflows found, refactor to use ResizeObserver/IntersectionObserver patterns
+
+2. **Visual verification across light/dark themes:**
+   - Navigate to story: `mcp__chrome-devtools__navigate_page` with `url: "http://localhost:6006/..."`
+   - Take snapshot: `mcp__chrome-devtools__take_snapshot`
+   - Verify interactive states render correctly in both themes
+   - Check hover/active/focus states match styling guide patterns
+
+3. **React warnings and console errors:**
+   - After making component changes, use `mcp__chrome-devtools__list_console_messages`
+   - Filter for errors/warnings to catch React lifecycle issues early
+   - Particularly useful for detecting missing cleanup in custom hooks
+
+4. **Performance regression detection:**
+   - Record baseline trace before refactoring
+   - Make changes, record new trace
+   - Compare metrics (layout time, scripting time) to ensure improvements
+   - Include before/after metrics in commit/PR
+
+**When to use:**
+- After implementing custom hooks with ResizeObserver/IntersectionObserver
+- When optimizing scroll/resize event handlers
+- Before committing performance-related changes
+- When testing components that depend on layout measurements
+
+**Note:** Chrome DevTools MCP tools are optional. Manual Chrome DevTools Performance tab profiling works fine without them. These tools primarily automate workflows you'd otherwise do manually.
 
 ## Styling Guide
 

package/README.md

@@ -269,22 +269,25 @@ After the above, you should have:
 To deploy a review app with your in-progress code, you can use the `pre-release` script:
 
 ```bash
-# in root
-scripts/pre-release.sh
+# in packages/ui directory
+./scripts/pre-release.sh
 ```
 
-This script is a combination of two scripts:
+This script automates the following steps:
 
 1. Pre-Release:
 
-- update your local dependencies for ably-ui and run a production build
-- release an NPM package with the version built from your current SemVer but adding a pre-release tag based on a short SHA of your HEAD commit
+- Updates local dependencies for ably-ui and runs a production build
+- Releases an NPM package with the version built from your current SemVer but adding a pre-release tag based on a short SHA of your HEAD commit
+- Waits for the package to be available on the NPM registry (handles propagation delay)
+- Automatically updates both `apps/website` and `apps/voltaire` with the new dev version
 
 2. Update Pre-Release Version:
 
-- commit all the above and push to origin
+- Commits all changes (UI package.json, app package.json files, and lockfiles) in a single atomic commit
+- Pushes the commit and tag to origin
 
-This will trigger a build of the review app.
+This will trigger a build of the review app with the pre-release version installed in both consuming apps.
 
 ### Components
 
@@ -339,13 +342,13 @@ We use [Semantic Versioning 2.0.0](https://semver.org/) to version different lib
 
 Packages are published to the [GitHub private registry](https://github.com/features/packages).
 
-Publishing is done by tagging a release in GitHub. This triggers a GitHub action that pushes to the private NPM registry as well as publishing new artefacts in the CDN, with the version taken from the tag of the GitHub release.
+Publishing is done by tagging a release in GitHub. This triggers a GitHub action that pushes to the NPM registry as well as deploying Storybook to the [ably/ably-ui](https://github.com/ably/ably-ui) repository, with the version taken from the tag of the GitHub release.
 
-This will trigger GitHub actions in supported apps (currently [Voltaire](http://github.com/ably/voltaire) & [Website](http://github.com/ably/website)) to create a PR with an ably-ui version update.
+After publishing, you can manually trigger the `update-ably-ui` workflow to create a single draft PR that updates both [Voltaire](http://github.com/ably/voltaire) and [Website](http://github.com/ably/website) with the new ably-ui version.
 
 **To trigger a release:**
 
-- Make sure you have run pre-release script `./pre-release.sh` (This updates the npm package version for ably-ui in `package.json`).
+- Make sure you have run the pre-release script `./scripts/pre-release.sh` (This updates the npm package version for ably-ui in `package.json` and updates both consuming apps).
 - Merge your PR into `main` after it has been approved.
 - On the Github [Ably-UI](http://github.com/ably/ably-ui) repo, [create a new release](https://github.com/ably/ably-ui/releases/new) tag.
 - Create a new tag with the new version number for the release.
@@ -354,9 +357,10 @@ This will trigger GitHub actions in supported apps (currently [Voltaire](http://
 - Click on the Autogenerate release notes button.
 - Publish Release.
 - Check the Github `Actions` tab in the repo to make sure the release is green.
-- Upon successful release, a compiled version of the Storybook site will be deployed to Github Pages.
+- Upon successful release, a compiled version of the Storybook site will be deployed to the [ably/ably-ui](https://github.com/ably/ably-ui) repository's gh-pages branch.
+- Manually trigger the `update-ably-ui` workflow from the Actions tab to create a draft PR updating both apps.
 
-This will release the packages and update library and create & push the commit & tag, and also create corresponding PRs in Voltaire & Website. It will also deploy a new Storybook site to [https://ably.github.io/ably-ui/](https://ably.github.io/ably-ui/).
+This will publish the package to NPM and deploy a new Storybook site to [https://ably.github.io/ably-ui/](https://ably.github.io/ably-ui/). To update the consuming apps, manually trigger the workflow, which will create a single draft PR for both Voltaire and Website that requires review before merging.
 
 ### Tagging Convention (Monorepo)
 

package/core/Code/Code.test.js

@@ -0,0 +1,2 @@
+import React from"react";import{describe,expect,it}from"vitest";import{render}from"@testing-library/react";import Code from"../Code";describe("Code",()=>{it("renders a single <code> element when no highlights are present",()=>{const{container}=render(React.createElement(Code,{language:"javascript",snippet:'var x = "hello";'}));const codeElements=container.querySelectorAll("pre > code");expect(codeElements.length).toBe(1)});it("wraps highlighted lines in a single <code> element",()=>{const{container}=render(React.createElement(Code,{language:"javascript",snippet:'var x = "hello";\nvar y = "world";',lineHighlights:{1:"addition"}}));const pre=container.querySelector("pre");const codeElements=pre?.querySelectorAll("code");expect(codeElements?.length).toBe(1);const lineSpans=codeElements?.[0].querySelectorAll(":scope > span");expect(lineSpans?.length).toBe(2)});it("applies highlight classes to the correct lines",()=>{const{container}=render(React.createElement(Code,{language:"javascript",snippet:"line1\nline2\nline3",lineHighlights:{1:"addition",3:"removal"}}));const lineWrappers=container.querySelectorAll("pre > code > span");expect(lineWrappers.length).toBe(3);expect(lineWrappers[0].classList.contains("code-line-addition")).toBe(true);expect(lineWrappers[1].classList.contains("code-line-addition")).toBe(false);expect(lineWrappers[2].classList.contains("code-line-removal")).toBe(true)})});
+//# sourceMappingURL=Code.test.js.map

package/core/Code/Code.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/core/Code/Code.test.tsx"],"sourcesContent":["/**\n * @vitest-environment jsdom\n */\n\nimport React from \"react\";\nimport { describe, expect, it } from \"vitest\";\nimport { render } from \"@testing-library/react\";\n\nimport Code from \"../Code\";\n\ndescribe(\"Code\", () => {\n  it(\"renders a single <code> element when no highlights are present\", () => {\n    const { container } = render(\n      <Code language=\"javascript\" snippet={'var x = \"hello\";'} />,\n    );\n    const codeElements = container.querySelectorAll(\"pre > code\");\n    expect(codeElements.length).toBe(1);\n  });\n\n  it(\"wraps highlighted lines in a single <code> element\", () => {\n    const { container } = render(\n      <Code\n        language=\"javascript\"\n        snippet={'var x = \"hello\";\\nvar y = \"world\";'}\n        lineHighlights={{ 1: \"addition\" }}\n      />,\n    );\n\n    const pre = container.querySelector(\"pre\");\n    const codeElements = pre?.querySelectorAll(\"code\");\n    expect(codeElements?.length).toBe(1);\n\n    // Line content spans should be inside the <code>\n    const lineSpans = codeElements?.[0].querySelectorAll(\":scope > span\");\n    expect(lineSpans?.length).toBe(2);\n  });\n\n  it(\"applies highlight classes to the correct lines\", () => {\n    const { container } = render(\n      <Code\n        language=\"javascript\"\n        snippet={\"line1\\nline2\\nline3\"}\n        lineHighlights={{ 1: \"addition\", 3: \"removal\" }}\n      />,\n    );\n\n    const lineWrappers = container.querySelectorAll(\"pre > code > span\");\n    expect(lineWrappers.length).toBe(3);\n    expect(lineWrappers[0].classList.contains(\"code-line-addition\")).toBe(true);\n    expect(lineWrappers[1].classList.contains(\"code-line-addition\")).toBe(\n      false,\n    );\n    expect(lineWrappers[2].classList.contains(\"code-line-removal\")).toBe(true);\n  });\n});\n"],"names":["React","describe","expect","it","render","Code","container","language","snippet","codeElements","querySelectorAll","length","toBe","lineHighlights","pre","querySelector","lineSpans","lineWrappers","classList","contains"],"mappings":"AAIA,OAAOA,UAAW,OAAQ,AAC1B,QAASC,QAAQ,CAAEC,MAAM,CAAEC,EAAE,KAAQ,QAAS,AAC9C,QAASC,MAAM,KAAQ,wBAAyB,AAEhD,QAAOC,SAAU,SAAU,CAE3BJ,SAAS,OAAQ,KACfE,GAAG,iEAAkE,KACnE,KAAM,CAAEG,SAAS,CAAE,CAAGF,OACpB,oBAACC,MAAKE,SAAS,aAAaC,QAAS,sBAEvC,MAAMC,aAAeH,UAAUI,gBAAgB,CAAC,cAChDR,OAAOO,aAAaE,MAAM,EAAEC,IAAI,CAAC,EACnC,GAEAT,GAAG,qDAAsD,KACvD,KAAM,CAAEG,SAAS,CAAE,CAAGF,OACpB,oBAACC,MACCE,SAAS,aACTC,QAAS,qCACTK,eAAgB,CAAE,EAAG,UAAW,KAIpC,MAAMC,IAAMR,UAAUS,aAAa,CAAC,OACpC,MAAMN,aAAeK,KAAKJ,iBAAiB,QAC3CR,OAAOO,cAAcE,QAAQC,IAAI,CAAC,GAGlC,MAAMI,UAAYP,cAAc,CAAC,EAAE,CAACC,iBAAiB,iBACrDR,OAAOc,WAAWL,QAAQC,IAAI,CAAC,EACjC,GAEAT,GAAG,iDAAkD,KACnD,KAAM,CAAEG,SAAS,CAAE,CAAGF,OACpB,oBAACC,MACCE,SAAS,aACTC,QAAS,sBACTK,eAAgB,CAAE,EAAG,WAAY,EAAG,SAAU,KAIlD,MAAMI,aAAeX,UAAUI,gBAAgB,CAAC,qBAChDR,OAAOe,aAAaN,MAAM,EAAEC,IAAI,CAAC,GACjCV,OAAOe,YAAY,CAAC,EAAE,CAACC,SAAS,CAACC,QAAQ,CAAC,uBAAuBP,IAAI,CAAC,MACtEV,OAAOe,YAAY,CAAC,EAAE,CAACC,SAAS,CAACC,QAAQ,CAAC,uBAAuBP,IAAI,CACnE,OAEFV,OAAOe,YAAY,CAAC,EAAE,CAACC,SAAS,CAACC,QAAQ,CAAC,sBAAsBP,IAAI,CAAC,KACvE,EACF"}

package/core/Code.js

@@ -1,2 +1,2 @@
-import React from"react";import{highlightSnippet,LINE_HIGHLIGHT_CLASSES,registerDefaultLanguages,splitHtmlLines}from"./utils/syntax-highlighter";import languagesRegistry from"./utils/syntax-highlighter-registry";import cn from"./utils/cn";registerDefaultLanguages(languagesRegistry);const Code=({language,snippet,textSize="ui-text-code",padding="p-8",additionalCSS="",showLines,lineCSS,wrap=false,lineHighlights})=>{const trimmedSnippet=snippet.trimEnd();const HTMLraw=highlightSnippet(language,trimmedSnippet)??"";const className=`language-${language} ${textSize}`;const lines=trimmedSnippet.split(/\r\n|\r|\n/);const lineCount=lines.length;const hasHighlights=lineHighlights&&Object.keys(lineHighlights).length>0;if(hasHighlights){const htmlLines=splitHtmlLines(HTMLraw);return React.createElement("div",{className:cn("hljs overflow-y-auto",padding,additionalCSS),"data-id":"code"},React.createElement("pre",{lang:language,className:cn("h-full flex-1 text-p4 leading-normal",wrap?"whitespace-pre-wrap break-words":"overflow-x-auto")},htmlLines.map((lineHtml,i)=>{const lineNum=i+1;const highlightType=lineHighlights[lineNum];const highlightClass=highlightType?LINE_HIGHLIGHT_CLASSES[highlightType]:undefined;return React.createElement("div",{key:i,className:cn("flex min-w-full",highlightClass)},showLines&&React.createElement("span",{className:cn("mr-4 font-mono text-right text-neutral-800 select-none shrink-0 inline-block",lineCSS),style:{minWidth:`${String(lineCount).length}ch`}},lineNum),React.createElement("code",{className:cn(className,"flex-1 !leading-normal"),dangerouslySetInnerHTML:{__html:lineHtml||" "}}))})))}return React.createElement("div",{className:cn("hljs overflow-y-auto flex",padding,additionalCSS),"data-id":"code"},showLines?React.createElement("div",{className:"text-p4 leading-normal pt-px"},[...Array(lineCount)].map((_,i)=>React.createElement("p",{className:cn("mr-4 font-mono text-right text-neutral-800",lineCSS),key:i},i+1))):null,React.createElement("pre",{lang:language,className:cn("h-full flex-1 text-p4 leading-normal",wrap?"whitespace-pre-wrap break-words":"overflow-x-auto")},React.createElement("code",{className:className,dangerouslySetInnerHTML:{__html:HTMLraw}})))};export default Code;
+import React from"react";import{highlightSnippet,LINE_HIGHLIGHT_CLASSES,registerDefaultLanguages,splitHtmlLines}from"./utils/syntax-highlighter";import languagesRegistry from"./utils/syntax-highlighter-registry";import cn from"./utils/cn";registerDefaultLanguages(languagesRegistry);const Code=({language,snippet,textSize="ui-text-code",padding="p-8",additionalCSS="",showLines,lineCSS,wrap=false,lineHighlights})=>{const trimmedSnippet=snippet.trimEnd();const HTMLraw=highlightSnippet(language,trimmedSnippet)??"";const className=`language-${language} ${textSize}`;const lines=trimmedSnippet.split(/\r\n|\r|\n/);const lineCount=lines.length;const hasHighlights=lineHighlights&&Object.keys(lineHighlights).length>0;if(hasHighlights){const htmlLines=splitHtmlLines(HTMLraw);return React.createElement("div",{className:cn("hljs overflow-y-auto",padding,additionalCSS),"data-id":"code"},React.createElement("pre",{lang:language,className:cn("h-full flex-1 text-p4 leading-normal",wrap?"whitespace-pre-wrap break-words":"overflow-x-auto")},React.createElement("code",{className:className},htmlLines.map((lineHtml,i)=>{const lineNum=i+1;const highlightType=lineHighlights[lineNum];const highlightClass=highlightType?LINE_HIGHLIGHT_CLASSES[highlightType]:undefined;return React.createElement("span",{key:i,className:cn("flex min-w-full pl-2",highlightClass)},showLines&&React.createElement("span",{className:cn("mr-4 font-mono text-right text-neutral-800 select-none shrink-0 inline-block leading-normal",lineCSS),style:{minWidth:`${String(lineCount).length}ch`}},lineNum),React.createElement("span",{className:"flex-1 !leading-normal",dangerouslySetInnerHTML:{__html:lineHtml||" "}}))}))))}return React.createElement("div",{className:cn("hljs overflow-y-auto flex",padding,additionalCSS),"data-id":"code"},showLines?React.createElement("div",{className:"text-p4 leading-normal pt-px"},[...Array(lineCount)].map((_,i)=>React.createElement("p",{className:cn("mr-4 font-mono text-right text-neutral-800",lineCSS),key:i},i+1))):null,React.createElement("pre",{lang:language,className:cn("h-full flex-1 text-p4 leading-normal",wrap?"whitespace-pre-wrap break-words":"overflow-x-auto")},React.createElement("code",{className:className,dangerouslySetInnerHTML:{__html:HTMLraw}})))};export default Code;
 //# sourceMappingURL=Code.js.map

package/core/Code.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Code.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  highlightSnippet,\n  LINE_HIGHLIGHT_CLASSES,\n  registerDefaultLanguages,\n  splitHtmlLines,\n} from \"./utils/syntax-highlighter\";\nimport languagesRegistry from \"./utils/syntax-highlighter-registry\";\nimport cn from \"./utils/cn\";\n\nregisterDefaultLanguages(languagesRegistry);\n\nexport type LineHighlightType = \"addition\" | \"removal\" | \"highlight\";\n\ntype CodeProps = {\n  language: string;\n  snippet: string;\n  textSize?: string;\n  padding?: string;\n  additionalCSS?: string;\n  showLines?: boolean;\n  lineCSS?: string;\n  wrap?: boolean;\n  lineHighlights?: Record<number, LineHighlightType>;\n};\n\nconst Code = ({\n  language,\n  snippet,\n  textSize = \"ui-text-code\",\n  padding = \"p-8\",\n  additionalCSS = \"\",\n  showLines,\n  lineCSS,\n  wrap = false,\n  lineHighlights,\n}: CodeProps) => {\n  // Trim the snippet and remove trailing empty lines\n  const trimmedSnippet = snippet.trimEnd();\n  const HTMLraw = highlightSnippet(language, trimmedSnippet) ?? \"\";\n  const className = `language-${language} ${textSize}`;\n\n  // Calculate line count after removing trailing empty lines\n  const lines = trimmedSnippet.split(/\\r\\n|\\r|\\n/);\n  const lineCount = lines.length;\n\n  const hasHighlights =\n    lineHighlights && Object.keys(lineHighlights).length > 0;\n\n  // Per-line rendering when highlights are present\n  if (hasHighlights) {\n    const htmlLines = splitHtmlLines(HTMLraw);\n\n    return (\n      <div\n        className={cn(\"hljs overflow-y-auto\", padding, additionalCSS)}\n        data-id=\"code\"\n      >\n        <pre\n          lang={language}\n          className={cn(\n            \"h-full flex-1 text-p4 leading-normal\",\n            wrap ? \"whitespace-pre-wrap break-words\" : \"overflow-x-auto\",\n          )}\n        >\n          {htmlLines.map((lineHtml, i) => {\n            const lineNum = i + 1;\n            const highlightType = lineHighlights[lineNum];\n            const highlightClass = highlightType\n              ? LINE_HIGHLIGHT_CLASSES[highlightType]\n              : undefined;\n\n            return (\n              <div\n                key={i}\n                className={cn(\"flex min-w-full\", highlightClass)}\n              >\n                {showLines && (\n                  <span\n                    className={cn(\n                      \"mr-4 font-mono text-right text-neutral-800 select-none shrink-0 inline-block\",\n                      lineCSS,\n                    )}\n                    style={{ minWidth: `${String(lineCount).length}ch` }}\n                  >\n                    {lineNum}\n                  </span>\n                )}\n                <code\n                  className={cn(className, \"flex-1 !leading-normal\")}\n                  dangerouslySetInnerHTML={{\n                    __html: lineHtml || \"&nbsp;\",\n                  }}\n                />\n              </div>\n            );\n          })}\n        </pre>\n      </div>\n    );\n  }\n\n  // Default: single-block rendering (no highlights)\n  return (\n    <div\n      className={cn(\"hljs overflow-y-auto flex\", padding, additionalCSS)}\n      data-id=\"code\"\n    >\n      {showLines ? (\n        <div className=\"text-p4 leading-normal pt-px\">\n          {[...Array(lineCount)].map((_, i) => (\n            <p\n              className={cn(\n                \"mr-4 font-mono text-right text-neutral-800\",\n                lineCSS,\n              )}\n              key={i}\n            >\n              {i + 1}\n            </p>\n          ))}\n        </div>\n      ) : null}\n      <pre\n        lang={language}\n        className={cn(\n          \"h-full flex-1 text-p4 leading-normal\",\n          wrap ? \"whitespace-pre-wrap break-words\" : \"overflow-x-auto\",\n        )}\n      >\n        <code\n          className={className}\n          dangerouslySetInnerHTML={{ __html: HTMLraw }}\n        />\n      </pre>\n    </div>\n  );\n};\n\nexport default Code;\n"],"names":["React","highlightSnippet","LINE_HIGHLIGHT_CLASSES","registerDefaultLanguages","splitHtmlLines","languagesRegistry","cn","Code","language","snippet","textSize","padding","additionalCSS","showLines","lineCSS","wrap","lineHighlights","trimmedSnippet","trimEnd","HTMLraw","className","lines","split","lineCount","length","hasHighlights","Object","keys","htmlLines","div","data-id","pre","lang","map","lineHtml","i","lineNum","highlightType","highlightClass","undefined","key","span","style","minWidth","String","code","dangerouslySetInnerHTML","__html","Array","_","p"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QACEC,gBAAgB,CAChBC,sBAAsB,CACtBC,wBAAwB,CACxBC,cAAc,KACT,4BAA6B,AACpC,QAAOC,sBAAuB,qCAAsC,AACpE,QAAOC,OAAQ,YAAa,CAE5BH,yBAAyBE,mBAgBzB,MAAME,KAAO,CAAC,CACZC,QAAQ,CACRC,OAAO,CACPC,SAAW,cAAc,CACzBC,QAAU,KAAK,CACfC,cAAgB,EAAE,CAClBC,SAAS,CACTC,OAAO,CACPC,KAAO,KAAK,CACZC,cAAc,CACJ,IAEV,MAAMC,eAAiBR,QAAQS,OAAO,GACtC,MAAMC,QAAUlB,iBAAiBO,SAAUS,iBAAmB,GAC9D,MAAMG,UAAY,CAAC,SAAS,EAAEZ,SAAS,CAAC,EAAEE,SAAS,CAAC,CAGpD,MAAMW,MAAQJ,eAAeK,KAAK,CAAC,cACnC,MAAMC,UAAYF,MAAMG,MAAM,CAE9B,MAAMC,cACJT,gBAAkBU,OAAOC,IAAI,CAACX,gBAAgBQ,MAAM,CAAG,EAGzD,GAAIC,cAAe,CACjB,MAAMG,UAAYxB,eAAee,SAEjC,OACE,oBAACU,OACCT,UAAWd,GAAG,uBAAwBK,QAASC,eAC/CkB,UAAQ,QAER,oBAACC,OACCC,KAAMxB,SACNY,UAAWd,GACT,uCACAS,KAAO,kCAAoC,oBAG5Ca,UAAUK,GAAG,CAAC,CAACC,SAAUC,KACxB,MAAMC,QAAUD,EAAI,EACpB,MAAME,cAAgBrB,cAAc,CAACoB,QAAQ,CAC7C,MAAME,eAAiBD,cACnBnC,sBAAsB,CAACmC,cAAc,CACrCE,UAEJ,OACE,oBAACV,OACCW,IAAKL,EACLf,UAAWd,GAAG,kBAAmBgC,iBAEhCzB,WACC,oBAAC4B,QACCrB,UAAWd,GACT,+EACAQ,SAEF4B,MAAO,CAAEC,SAAU,CAAC,EAAEC,OAAOrB,WAAWC,MAAM,CAAC,EAAE,CAAC,AAAC,GAElDY,SAGL,oBAACS,QACCzB,UAAWd,GAAGc,UAAW,0BACzB0B,wBAAyB,CACvBC,OAAQb,UAAY,QACtB,IAIR,IAIR,CAGA,OACE,oBAACL,OACCT,UAAWd,GAAG,4BAA6BK,QAASC,eACpDkB,UAAQ,QAEPjB,UACC,oBAACgB,OAAIT,UAAU,gCACZ,IAAI4B,MAAMzB,WAAW,CAACU,GAAG,CAAC,CAACgB,EAAGd,IAC7B,oBAACe,KACC9B,UAAWd,GACT,6CACAQ,SAEF0B,IAAKL,GAEJA,EAAI,KAIT,KACJ,oBAACJ,OACCC,KAAMxB,SACNY,UAAWd,GACT,uCACAS,KAAO,kCAAoC,oBAG7C,oBAAC8B,QACCzB,UAAWA,UACX0B,wBAAyB,CAAEC,OAAQ5B,OAAQ,KAKrD,CAEA,gBAAeZ,IAAK"}
+{"version":3,"sources":["../../src/core/Code.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  highlightSnippet,\n  LINE_HIGHLIGHT_CLASSES,\n  registerDefaultLanguages,\n  splitHtmlLines,\n} from \"./utils/syntax-highlighter\";\nimport languagesRegistry from \"./utils/syntax-highlighter-registry\";\nimport cn from \"./utils/cn\";\n\nregisterDefaultLanguages(languagesRegistry);\n\nexport type LineHighlightType = \"addition\" | \"removal\" | \"highlight\";\n\ntype CodeProps = {\n  language: string;\n  snippet: string;\n  textSize?: string;\n  padding?: string;\n  additionalCSS?: string;\n  showLines?: boolean;\n  lineCSS?: string;\n  wrap?: boolean;\n  lineHighlights?: Record<number, LineHighlightType>;\n};\n\nconst Code = ({\n  language,\n  snippet,\n  textSize = \"ui-text-code\",\n  padding = \"p-8\",\n  additionalCSS = \"\",\n  showLines,\n  lineCSS,\n  wrap = false,\n  lineHighlights,\n}: CodeProps) => {\n  // Trim the snippet and remove trailing empty lines\n  const trimmedSnippet = snippet.trimEnd();\n  const HTMLraw = highlightSnippet(language, trimmedSnippet) ?? \"\";\n  const className = `language-${language} ${textSize}`;\n\n  // Calculate line count after removing trailing empty lines\n  const lines = trimmedSnippet.split(/\\r\\n|\\r|\\n/);\n  const lineCount = lines.length;\n\n  const hasHighlights =\n    lineHighlights && Object.keys(lineHighlights).length > 0;\n\n  // Per-line rendering when highlights are present\n  if (hasHighlights) {\n    const htmlLines = splitHtmlLines(HTMLraw);\n\n    return (\n      <div\n        className={cn(\"hljs overflow-y-auto\", padding, additionalCSS)}\n        data-id=\"code\"\n      >\n        <pre\n          lang={language}\n          className={cn(\n            \"h-full flex-1 text-p4 leading-normal\",\n            wrap ? \"whitespace-pre-wrap break-words\" : \"overflow-x-auto\",\n          )}\n        >\n          <code className={className}>\n            {htmlLines.map((lineHtml, i) => {\n              const lineNum = i + 1;\n              const highlightType = lineHighlights[lineNum];\n              const highlightClass = highlightType\n                ? LINE_HIGHLIGHT_CLASSES[highlightType]\n                : undefined;\n\n              return (\n                <span key={i} className={cn(\"flex min-w-full pl-2\", highlightClass)}>\n                  {showLines && (\n                    <span\n                      className={cn(\n                        \"mr-4 font-mono text-right text-neutral-800 select-none shrink-0 inline-block leading-normal\",\n                        lineCSS,\n                      )}\n                      style={{ minWidth: `${String(lineCount).length}ch` }}\n                    >\n                      {lineNum}\n                    </span>\n                  )}\n                  <span\n                    className=\"flex-1 !leading-normal\"\n                    dangerouslySetInnerHTML={{\n                      __html: lineHtml || \"&nbsp;\",\n                    }}\n                  />\n                </span>\n              );\n            })}\n          </code>\n        </pre>\n      </div>\n    );\n  }\n\n  // Default: single-block rendering (no highlights)\n  return (\n    <div\n      className={cn(\"hljs overflow-y-auto flex\", padding, additionalCSS)}\n      data-id=\"code\"\n    >\n      {showLines ? (\n        <div className=\"text-p4 leading-normal pt-px\">\n          {[...Array(lineCount)].map((_, i) => (\n            <p\n              className={cn(\n                \"mr-4 font-mono text-right text-neutral-800\",\n                lineCSS,\n              )}\n              key={i}\n            >\n              {i + 1}\n            </p>\n          ))}\n        </div>\n      ) : null}\n      <pre\n        lang={language}\n        className={cn(\n          \"h-full flex-1 text-p4 leading-normal\",\n          wrap ? \"whitespace-pre-wrap break-words\" : \"overflow-x-auto\",\n        )}\n      >\n        <code\n          className={className}\n          dangerouslySetInnerHTML={{ __html: HTMLraw }}\n        />\n      </pre>\n    </div>\n  );\n};\n\nexport default Code;\n"],"names":["React","highlightSnippet","LINE_HIGHLIGHT_CLASSES","registerDefaultLanguages","splitHtmlLines","languagesRegistry","cn","Code","language","snippet","textSize","padding","additionalCSS","showLines","lineCSS","wrap","lineHighlights","trimmedSnippet","trimEnd","HTMLraw","className","lines","split","lineCount","length","hasHighlights","Object","keys","htmlLines","div","data-id","pre","lang","code","map","lineHtml","i","lineNum","highlightType","highlightClass","undefined","span","key","style","minWidth","String","dangerouslySetInnerHTML","__html","Array","_","p"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QACEC,gBAAgB,CAChBC,sBAAsB,CACtBC,wBAAwB,CACxBC,cAAc,KACT,4BAA6B,AACpC,QAAOC,sBAAuB,qCAAsC,AACpE,QAAOC,OAAQ,YAAa,CAE5BH,yBAAyBE,mBAgBzB,MAAME,KAAO,CAAC,CACZC,QAAQ,CACRC,OAAO,CACPC,SAAW,cAAc,CACzBC,QAAU,KAAK,CACfC,cAAgB,EAAE,CAClBC,SAAS,CACTC,OAAO,CACPC,KAAO,KAAK,CACZC,cAAc,CACJ,IAEV,MAAMC,eAAiBR,QAAQS,OAAO,GACtC,MAAMC,QAAUlB,iBAAiBO,SAAUS,iBAAmB,GAC9D,MAAMG,UAAY,CAAC,SAAS,EAAEZ,SAAS,CAAC,EAAEE,SAAS,CAAC,CAGpD,MAAMW,MAAQJ,eAAeK,KAAK,CAAC,cACnC,MAAMC,UAAYF,MAAMG,MAAM,CAE9B,MAAMC,cACJT,gBAAkBU,OAAOC,IAAI,CAACX,gBAAgBQ,MAAM,CAAG,EAGzD,GAAIC,cAAe,CACjB,MAAMG,UAAYxB,eAAee,SAEjC,OACE,oBAACU,OACCT,UAAWd,GAAG,uBAAwBK,QAASC,eAC/CkB,UAAQ,QAER,oBAACC,OACCC,KAAMxB,SACNY,UAAWd,GACT,uCACAS,KAAO,kCAAoC,oBAG7C,oBAACkB,QAAKb,UAAWA,WACdQ,UAAUM,GAAG,CAAC,CAACC,SAAUC,KACxB,MAAMC,QAAUD,EAAI,EACpB,MAAME,cAAgBtB,cAAc,CAACqB,QAAQ,CAC7C,MAAME,eAAiBD,cACnBpC,sBAAsB,CAACoC,cAAc,CACrCE,UAEJ,OACE,oBAACC,QAAKC,IAAKN,EAAGhB,UAAWd,GAAG,uBAAwBiC,iBACjD1B,WACC,oBAAC4B,QACCrB,UAAWd,GACT,8FACAQ,SAEF6B,MAAO,CAAEC,SAAU,CAAC,EAAEC,OAAOtB,WAAWC,MAAM,CAAC,EAAE,CAAC,AAAC,GAElDa,SAGL,oBAACI,QACCrB,UAAU,yBACV0B,wBAAyB,CACvBC,OAAQZ,UAAY,QACtB,IAIR,KAKV,CAGA,OACE,oBAACN,OACCT,UAAWd,GAAG,4BAA6BK,QAASC,eACpDkB,UAAQ,QAEPjB,UACC,oBAACgB,OAAIT,UAAU,gCACZ,IAAI4B,MAAMzB,WAAW,CAACW,GAAG,CAAC,CAACe,EAAGb,IAC7B,oBAACc,KACC9B,UAAWd,GACT,6CACAQ,SAEF4B,IAAKN,GAEJA,EAAI,KAIT,KACJ,oBAACL,OACCC,KAAMxB,SACNY,UAAWd,GACT,uCACAS,KAAO,kCAAoC,oBAG7C,oBAACkB,QACCb,UAAWA,UACX0B,wBAAyB,CAAEC,OAAQ5B,OAAQ,KAKrD,CAEA,gBAAeZ,IAAK"}

package/core/CodeSnippet/CodeSnippet.test.js

@@ -0,0 +1,2 @@
+import React from"react";import{describe,expect,it,vi,afterEach}from"vitest";import{render,screen,within,cleanup}from"@testing-library/react";import CodeSnippet from"../CodeSnippet";afterEach(cleanup);vi.mock("../Code",()=>({default:({snippet,language})=>React.createElement("div",{"data-testid":"code-block","data-language":language},snippet)}));vi.mock("../Icon",()=>({default:({name})=>React.createElement("span",{"data-testid":"icon","data-icon":name})}));vi.mock("../SegmentedControl",()=>({default:({children,onClick,active})=>React.createElement("button",{"data-testid":"sdk-toggle","data-active":active,onClick:onClick},children)}));vi.mock("./LanguageSelector",()=>({default:({languages,activeLanguage,onLanguageChange})=>React.createElement("div",{"data-testid":"language-selector","data-active":activeLanguage},languages.map(lang=>React.createElement("button",{key:lang,"data-testid":`lang-${lang}`,onClick:()=>onLanguageChange(lang)},lang)))}));vi.mock("./CopyButton",()=>({default:()=>React.createElement("button",{"data-testid":"copy-button"},"Copy")}));vi.mock("./ApiKeySelector",()=>({default:()=>React.createElement("div",{"data-testid":"api-key-selector"})}));vi.mock("./PlainCodeView",()=>({default:({content,language})=>React.createElement("div",{"data-testid":"plain-code-view","data-language":language},content)}));const makeSnippet=(lang,content)=>React.createElement("pre",null,React.createElement("code",{className:`language-${lang}`},content));describe("CodeSnippet",()=>{describe("basic rendering",()=>{it("renders a single language snippet",()=>{render(React.createElement(CodeSnippet,{lang:"javascript"},makeSnippet("javascript","console.log('hello')")));expect(screen.getByTestId("code-block").textContent).toBe("console.log('hello')")});it("renders a language label for a single non-fixed language",()=>{const{container}=render(React.createElement(CodeSnippet,{lang:"javascript"},makeSnippet("javascript","const x = 1;")));const labelSpans=container.querySelectorAll(".ui-text-label4");const labels=Array.from(labelSpans).map(el=>el.textContent);expect(labels).toContain("JavaScript")});it("renders the language selector when multiple languages are available",()=>{render(React.createElement(CodeSnippet,{lang:"javascript"},makeSnippet("javascript","const x = 1;"),makeSnippet("python","x = 1")));expect(screen.getByTestId("language-selector")).toBeTruthy()})});describe("realtime/rest SDK types",()=>{it("shows SDK selector for realtime/rest prefixed languages",()=>{render(React.createElement(CodeSnippet,{lang:"javascript",sdk:"realtime"},makeSnippet("realtime_javascript","// realtime code"),makeSnippet("rest_javascript","// rest code")));const toggles=screen.getAllByTestId("sdk-toggle");expect(toggles).toHaveLength(2);expect(toggles[0].textContent).toBe("Realtime");expect(toggles[1].textContent).toBe("REST")});it("shows single SDK label when only one SDK type present",()=>{render(React.createElement(CodeSnippet,{lang:"javascript",sdk:"realtime"},makeSnippet("realtime_javascript","// realtime only")));const toggles=screen.getAllByTestId("sdk-toggle");expect(toggles[0].textContent).toBe("Realtime")});it("resolves to the correct SDK when only one type is available",()=>{render(React.createElement(CodeSnippet,{lang:"javascript",sdk:"realtime"},makeSnippet("rest_javascript","// rest only")));expect(screen.getByTestId("code-block").textContent).toBe("// rest only")})});describe("client/agent SDK types",()=>{it("does not show SDK selector for client/agent prefixed languages",()=>{render(React.createElement(CodeSnippet,{lang:"javascript",sdk:"client",fixed:true},makeSnippet("client_javascript","// client code"),makeSnippet("agent_python","// agent code")));expect(screen.queryAllByTestId("sdk-toggle")).toHaveLength(0)});it("renders client_ prefixed snippet with fixed mode and sdk=client",()=>{render(React.createElement(CodeSnippet,{lang:"javascript",sdk:"client",fixed:true},makeSnippet("client_javascript","// client JS"),makeSnippet("agent_python","// agent python")));expect(screen.getByTestId("code-block").textContent).toBe("// client JS")});it("renders agent_ prefixed snippet with fixed mode and sdk=agent",()=>{render(React.createElement(CodeSnippet,{lang:"python",sdk:"agent",fixed:true},makeSnippet("client_javascript","// client JS"),makeSnippet("agent_python","// agent python")));expect(screen.getByTestId("code-block").textContent).toBe("// agent python")});it("falls back to first language with matching prefix when exact match not found",()=>{render(React.createElement(CodeSnippet,{lang:"ruby",sdk:"client",fixed:true},makeSnippet("client_javascript","// client JS"),makeSnippet("client_typescript","// client TS")));expect(screen.getByTestId("code-block").textContent).toBe("// client JS")})});describe("fixed mode",()=>{it("shows a read-only language label in fixed mode",()=>{const{container}=render(React.createElement(CodeSnippet,{lang:"javascript",fixed:true},makeSnippet("javascript","const x = 1;")));const labelSpans=container.querySelectorAll(".ui-text-label4");const labels=Array.from(labelSpans).map(el=>el.textContent);expect(labels).toContain("JavaScript");expect(screen.queryByTestId("language-selector")).toBeNull()});it("shows correct label for client_ prefixed language in fixed mode",()=>{const{container}=render(React.createElement(CodeSnippet,{lang:"python",sdk:"client",fixed:true},makeSnippet("client_python","# client python")));const labelSpans=container.querySelectorAll(".ui-text-label4");const labels=Array.from(labelSpans).map(el=>el.textContent);expect(labels).toContain("Python")});it("hides language selector in fixed mode even with multiple languages",()=>{render(React.createElement(CodeSnippet,{lang:"javascript",fixed:true},makeSnippet("javascript","const x = 1;"),makeSnippet("python","x = 1")));expect(screen.queryByTestId("language-selector")).toBeNull()})});describe("header row",()=>{it("renders a header row when headerRow is true",()=>{render(React.createElement(CodeSnippet,{lang:"javascript",headerRow:true,title:"My Code"},makeSnippet("javascript","const x = 1;")));expect(screen.getByText("My Code")).toBeTruthy()})});describe("plain command mode",()=>{it("renders shell commands in plain mode",()=>{render(React.createElement(CodeSnippet,{lang:"shell"},makeSnippet("shell","npm install")));expect(screen.getByTestId("plain-code-view").textContent).toBe("npm install")});it("renders text commands in plain mode",()=>{render(React.createElement(CodeSnippet,{lang:"text"},makeSnippet("text","Hello world")));expect(screen.getByTestId("plain-code-view").textContent).toBe("Hello world")})});describe("onChange callback",()=>{it("passes stripped language and sdk type on language change",()=>{const onChange=vi.fn();render(React.createElement(CodeSnippet,{lang:"javascript",sdk:"realtime",onChange:onChange},makeSnippet("realtime_javascript","// js code"),makeSnippet("realtime_python","# python code")));const pyButton=screen.getByTestId("lang-realtime_python");pyButton.click();expect(onChange).toHaveBeenCalledWith("python","realtime")});it("passes undefined sdk when no SDK type",()=>{const onChange=vi.fn();render(React.createElement(CodeSnippet,{lang:"javascript",onChange:onChange},makeSnippet("javascript","// js"),makeSnippet("python","# py")));const pyButton=screen.getByTestId("lang-python");pyButton.click();expect(onChange).toHaveBeenCalledWith("python",undefined)})});describe("missing language snippet",()=>{it("shows a message when active language has no snippet",()=>{render(React.createElement(CodeSnippet,{lang:"ruby"},makeSnippet("javascript","const x = 1;"),makeSnippet("python","x = 1")));expect(screen.getByText(/currently viewing the Ruby docs/)).toBeTruthy()})});describe("findCodeElement handling",()=>{it("extracts code from pre with a single code child",()=>{render(React.createElement(CodeSnippet,{lang:"javascript"},React.createElement("pre",null,React.createElement("code",{className:"language-javascript"},"console.log('single')"))));expect(screen.getByTestId("code-block").textContent).toBe("console.log('single')")});it("extracts code from pre with multiple children (array)",()=>{render(React.createElement(CodeSnippet,{lang:"javascript"},React.createElement("pre",null,"\n",React.createElement("code",{className:"language-javascript"},"console.log('array')"),"\n")));expect(screen.getByTestId("code-block").textContent).toBe("console.log('array')")});it("handles multiple snippets where pre has array children",()=>{render(React.createElement(CodeSnippet,{lang:"javascript"},React.createElement("pre",null,"\n",React.createElement("code",{className:"language-javascript"},"// js code")),React.createElement("pre",null,"\n",React.createElement("code",{className:"language-python"},"# py code"))));expect(screen.getByTestId("language-selector")).toBeTruthy();expect(screen.getByTestId("code-block").textContent).toBe("// js code")})});describe("JSON-only snippets",()=>{it("always shows JSON content regardless of selected language",()=>{render(React.createElement(CodeSnippet,{lang:"ruby"},makeSnippet("json",'{"key": "value"}')));expect(screen.getByTestId("code-block").textContent).toBe('{"key": "value"}')})});describe("language ordering",()=>{it("respects custom language ordering",()=>{render(React.createElement(CodeSnippet,{lang:"javascript",languageOrdering:["python","typescript","javascript"]},makeSnippet("javascript","// js"),makeSnippet("typescript","// ts"),makeSnippet("python","# py")));const selector=screen.getByTestId("language-selector");const buttons=within(selector).getAllByRole("button");expect(buttons[0].textContent).toBe("python");expect(buttons[1].textContent).toBe("typescript");expect(buttons[2].textContent).toBe("javascript")})})});
+//# sourceMappingURL=CodeSnippet.test.js.map

package/core/CodeSnippet/CodeSnippet.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/core/CodeSnippet/CodeSnippet.test.tsx"],"sourcesContent":["/**\n * @vitest-environment jsdom\n */\n\nimport React from \"react\";\nimport { describe, expect, it, vi, afterEach } from \"vitest\";\nimport { render, screen, within, cleanup } from \"@testing-library/react\";\n\nimport CodeSnippet from \"../CodeSnippet\";\n\nafterEach(cleanup);\n\n// Mock child components to avoid complex rendering dependencies\nvi.mock(\"../Code\", () => ({\n  default: ({ snippet, language }: { snippet: string; language: string }) => (\n    <div data-testid=\"code-block\" data-language={language}>\n      {snippet}\n    </div>\n  ),\n}));\n\nvi.mock(\"../Icon\", () => ({\n  default: ({ name }: { name: string }) => (\n    <span data-testid=\"icon\" data-icon={name} />\n  ),\n}));\n\nvi.mock(\"../SegmentedControl\", () => ({\n  default: ({\n    children,\n    onClick,\n    active,\n  }: {\n    children: React.ReactNode;\n    onClick: () => void;\n    active: boolean;\n  }) => (\n    <button data-testid=\"sdk-toggle\" data-active={active} onClick={onClick}>\n      {children}\n    </button>\n  ),\n}));\n\nvi.mock(\"./LanguageSelector\", () => ({\n  default: ({\n    languages,\n    activeLanguage,\n    onLanguageChange,\n  }: {\n    languages: string[];\n    activeLanguage: string;\n    onLanguageChange: (lang: string) => void;\n  }) => (\n    <div data-testid=\"language-selector\" data-active={activeLanguage}>\n      {languages.map((lang) => (\n        <button\n          key={lang}\n          data-testid={`lang-${lang}`}\n          onClick={() => onLanguageChange(lang)}\n        >\n          {lang}\n        </button>\n      ))}\n    </div>\n  ),\n}));\n\nvi.mock(\"./CopyButton\", () => ({\n  default: () => <button data-testid=\"copy-button\">Copy</button>,\n}));\n\nvi.mock(\"./ApiKeySelector\", () => ({\n  default: () => <div data-testid=\"api-key-selector\" />,\n}));\n\nvi.mock(\"./PlainCodeView\", () => ({\n  default: ({ content, language }: { content: string; language: string }) => (\n    <div data-testid=\"plain-code-view\" data-language={language}>\n      {content}\n    </div>\n  ),\n}));\n\nconst makeSnippet = (lang: string, content: string) => (\n  <pre>\n    <code className={`language-${lang}`}>{content}</code>\n  </pre>\n);\n\ndescribe(\"CodeSnippet\", () => {\n  describe(\"basic rendering\", () => {\n    it(\"renders a single language snippet\", () => {\n      render(\n        <CodeSnippet lang=\"javascript\">\n          {makeSnippet(\"javascript\", \"console.log('hello')\")}\n        </CodeSnippet>,\n      );\n      expect(screen.getByTestId(\"code-block\").textContent).toBe(\n        \"console.log('hello')\",\n      );\n    });\n\n    it(\"renders a language label for a single non-fixed language\", () => {\n      const { container } = render(\n        <CodeSnippet lang=\"javascript\">\n          {makeSnippet(\"javascript\", \"const x = 1;\")}\n        </CodeSnippet>,\n      );\n      const labelSpans = container.querySelectorAll(\".ui-text-label4\");\n      const labels = Array.from(labelSpans).map((el) => el.textContent);\n      expect(labels).toContain(\"JavaScript\");\n    });\n\n    it(\"renders the language selector when multiple languages are available\", () => {\n      render(\n        <CodeSnippet lang=\"javascript\">\n          {makeSnippet(\"javascript\", \"const x = 1;\")}\n          {makeSnippet(\"python\", \"x = 1\")}\n        </CodeSnippet>,\n      );\n      expect(screen.getByTestId(\"language-selector\")).toBeTruthy();\n    });\n  });\n\n  describe(\"realtime/rest SDK types\", () => {\n    it(\"shows SDK selector for realtime/rest prefixed languages\", () => {\n      render(\n        <CodeSnippet lang=\"javascript\" sdk=\"realtime\">\n          {makeSnippet(\"realtime_javascript\", \"// realtime code\")}\n          {makeSnippet(\"rest_javascript\", \"// rest code\")}\n        </CodeSnippet>,\n      );\n      const toggles = screen.getAllByTestId(\"sdk-toggle\");\n      expect(toggles).toHaveLength(2);\n      expect(toggles[0].textContent).toBe(\"Realtime\");\n      expect(toggles[1].textContent).toBe(\"REST\");\n    });\n\n    it(\"shows single SDK label when only one SDK type present\", () => {\n      render(\n        <CodeSnippet lang=\"javascript\" sdk=\"realtime\">\n          {makeSnippet(\"realtime_javascript\", \"// realtime only\")}\n        </CodeSnippet>,\n      );\n      const toggles = screen.getAllByTestId(\"sdk-toggle\");\n      expect(toggles[0].textContent).toBe(\"Realtime\");\n    });\n\n    it(\"resolves to the correct SDK when only one type is available\", () => {\n      render(\n        <CodeSnippet lang=\"javascript\" sdk=\"realtime\">\n          {makeSnippet(\"rest_javascript\", \"// rest only\")}\n        </CodeSnippet>,\n      );\n      // Should fall back to rest since that's the only type available\n      expect(screen.getByTestId(\"code-block\").textContent).toBe(\"// rest only\");\n    });\n  });\n\n  describe(\"client/agent SDK types\", () => {\n    it(\"does not show SDK selector for client/agent prefixed languages\", () => {\n      render(\n        <CodeSnippet lang=\"javascript\" sdk=\"client\" fixed>\n          {makeSnippet(\"client_javascript\", \"// client code\")}\n          {makeSnippet(\"agent_python\", \"// agent code\")}\n        </CodeSnippet>,\n      );\n      expect(screen.queryAllByTestId(\"sdk-toggle\")).toHaveLength(0);\n    });\n\n    it(\"renders client_ prefixed snippet with fixed mode and sdk=client\", () => {\n      render(\n        <CodeSnippet lang=\"javascript\" sdk=\"client\" fixed>\n          {makeSnippet(\"client_javascript\", \"// client JS\")}\n          {makeSnippet(\"agent_python\", \"// agent python\")}\n        </CodeSnippet>,\n      );\n      expect(screen.getByTestId(\"code-block\").textContent).toBe(\"// client JS\");\n    });\n\n    it(\"renders agent_ prefixed snippet with fixed mode and sdk=agent\", () => {\n      render(\n        <CodeSnippet lang=\"python\" sdk=\"agent\" fixed>\n          {makeSnippet(\"client_javascript\", \"// client JS\")}\n          {makeSnippet(\"agent_python\", \"// agent python\")}\n        </CodeSnippet>,\n      );\n      expect(screen.getByTestId(\"code-block\").textContent).toBe(\n        \"// agent python\",\n      );\n    });\n\n    it(\"falls back to first language with matching prefix when exact match not found\", () => {\n      render(\n        <CodeSnippet lang=\"ruby\" sdk=\"client\" fixed>\n          {makeSnippet(\"client_javascript\", \"// client JS\")}\n          {makeSnippet(\"client_typescript\", \"// client TS\")}\n        </CodeSnippet>,\n      );\n      // Ruby doesn't exist with client_ prefix, should fall back to first client_ language\n      expect(screen.getByTestId(\"code-block\").textContent).toBe(\"// client JS\");\n    });\n  });\n\n  describe(\"fixed mode\", () => {\n    it(\"shows a read-only language label in fixed mode\", () => {\n      const { container } = render(\n        <CodeSnippet lang=\"javascript\" fixed>\n          {makeSnippet(\"javascript\", \"const x = 1;\")}\n        </CodeSnippet>,\n      );\n      const labelSpans = container.querySelectorAll(\".ui-text-label4\");\n      const labels = Array.from(labelSpans).map((el) => el.textContent);\n      expect(labels).toContain(\"JavaScript\");\n      expect(screen.queryByTestId(\"language-selector\")).toBeNull();\n    });\n\n    it(\"shows correct label for client_ prefixed language in fixed mode\", () => {\n      const { container } = render(\n        <CodeSnippet lang=\"python\" sdk=\"client\" fixed>\n          {makeSnippet(\"client_python\", \"# client python\")}\n        </CodeSnippet>,\n      );\n      const labelSpans = container.querySelectorAll(\".ui-text-label4\");\n      const labels = Array.from(labelSpans).map((el) => el.textContent);\n      expect(labels).toContain(\"Python\");\n    });\n\n    it(\"hides language selector in fixed mode even with multiple languages\", () => {\n      render(\n        <CodeSnippet lang=\"javascript\" fixed>\n          {makeSnippet(\"javascript\", \"const x = 1;\")}\n          {makeSnippet(\"python\", \"x = 1\")}\n        </CodeSnippet>,\n      );\n      expect(screen.queryByTestId(\"language-selector\")).toBeNull();\n    });\n  });\n\n  describe(\"header row\", () => {\n    it(\"renders a header row when headerRow is true\", () => {\n      render(\n        <CodeSnippet lang=\"javascript\" headerRow title=\"My Code\">\n          {makeSnippet(\"javascript\", \"const x = 1;\")}\n        </CodeSnippet>,\n      );\n      expect(screen.getByText(\"My Code\")).toBeTruthy();\n    });\n  });\n\n  describe(\"plain command mode\", () => {\n    it(\"renders shell commands in plain mode\", () => {\n      render(\n        <CodeSnippet lang=\"shell\">\n          {makeSnippet(\"shell\", \"npm install\")}\n        </CodeSnippet>,\n      );\n      expect(screen.getByTestId(\"plain-code-view\").textContent).toBe(\n        \"npm install\",\n      );\n    });\n\n    it(\"renders text commands in plain mode\", () => {\n      render(\n        <CodeSnippet lang=\"text\">\n          {makeSnippet(\"text\", \"Hello world\")}\n        </CodeSnippet>,\n      );\n      expect(screen.getByTestId(\"plain-code-view\").textContent).toBe(\n        \"Hello world\",\n      );\n    });\n  });\n\n  describe(\"onChange callback\", () => {\n    it(\"passes stripped language and sdk type on language change\", () => {\n      const onChange = vi.fn();\n      render(\n        <CodeSnippet lang=\"javascript\" sdk=\"realtime\" onChange={onChange}>\n          {makeSnippet(\"realtime_javascript\", \"// js code\")}\n          {makeSnippet(\"realtime_python\", \"# python code\")}\n        </CodeSnippet>,\n      );\n      const pyButton = screen.getByTestId(\"lang-realtime_python\");\n      pyButton.click();\n      expect(onChange).toHaveBeenCalledWith(\"python\", \"realtime\");\n    });\n\n    it(\"passes undefined sdk when no SDK type\", () => {\n      const onChange = vi.fn();\n      render(\n        <CodeSnippet lang=\"javascript\" onChange={onChange}>\n          {makeSnippet(\"javascript\", \"// js\")}\n          {makeSnippet(\"python\", \"# py\")}\n        </CodeSnippet>,\n      );\n      const pyButton = screen.getByTestId(\"lang-python\");\n      pyButton.click();\n      expect(onChange).toHaveBeenCalledWith(\"python\", undefined);\n    });\n  });\n\n  describe(\"missing language snippet\", () => {\n    it(\"shows a message when active language has no snippet\", () => {\n      render(\n        <CodeSnippet lang=\"ruby\">\n          {makeSnippet(\"javascript\", \"const x = 1;\")}\n          {makeSnippet(\"python\", \"x = 1\")}\n        </CodeSnippet>,\n      );\n      expect(screen.getByText(/currently viewing the Ruby docs/)).toBeTruthy();\n    });\n  });\n\n  describe(\"findCodeElement handling\", () => {\n    it(\"extracts code from pre with a single code child\", () => {\n      render(\n        <CodeSnippet lang=\"javascript\">\n          <pre>\n            <code className=\"language-javascript\">\n              console.log(&apos;single&apos;)\n            </code>\n          </pre>\n        </CodeSnippet>,\n      );\n      expect(screen.getByTestId(\"code-block\").textContent).toBe(\n        \"console.log('single')\",\n      );\n    });\n\n    it(\"extracts code from pre with multiple children (array)\", () => {\n      render(\n        <CodeSnippet lang=\"javascript\">\n          <pre>\n            {\"\\n\"}\n            <code className=\"language-javascript\">\n              console.log(&apos;array&apos;)\n            </code>\n            {\"\\n\"}\n          </pre>\n        </CodeSnippet>,\n      );\n      expect(screen.getByTestId(\"code-block\").textContent).toBe(\n        \"console.log('array')\",\n      );\n    });\n\n    it(\"handles multiple snippets where pre has array children\", () => {\n      render(\n        <CodeSnippet lang=\"javascript\">\n          <pre>\n            {\"\\n\"}\n            <code className=\"language-javascript\">{\"// js code\"}</code>\n          </pre>\n          <pre>\n            {\"\\n\"}\n            <code className=\"language-python\">{\"# py code\"}</code>\n          </pre>\n        </CodeSnippet>,\n      );\n      expect(screen.getByTestId(\"language-selector\")).toBeTruthy();\n      expect(screen.getByTestId(\"code-block\").textContent).toBe(\"// js code\");\n    });\n  });\n\n  describe(\"JSON-only snippets\", () => {\n    it(\"always shows JSON content regardless of selected language\", () => {\n      render(\n        <CodeSnippet lang=\"ruby\">\n          {makeSnippet(\"json\", '{\"key\": \"value\"}')}\n        </CodeSnippet>,\n      );\n      expect(screen.getByTestId(\"code-block\").textContent).toBe(\n        '{\"key\": \"value\"}',\n      );\n    });\n  });\n\n  describe(\"language ordering\", () => {\n    it(\"respects custom language ordering\", () => {\n      render(\n        <CodeSnippet\n          lang=\"javascript\"\n          languageOrdering={[\"python\", \"typescript\", \"javascript\"]}\n        >\n          {makeSnippet(\"javascript\", \"// js\")}\n          {makeSnippet(\"typescript\", \"// ts\")}\n          {makeSnippet(\"python\", \"# py\")}\n        </CodeSnippet>,\n      );\n      const selector = screen.getByTestId(\"language-selector\");\n      const buttons = within(selector).getAllByRole(\"button\");\n      expect(buttons[0].textContent).toBe(\"python\");\n      expect(buttons[1].textContent).toBe(\"typescript\");\n      expect(buttons[2].textContent).toBe(\"javascript\");\n    });\n  });\n});\n"],"names":["React","describe","expect","it","vi","afterEach","render","screen","within","cleanup","CodeSnippet","mock","default","snippet","language","div","data-testid","data-language","name","span","data-icon","children","onClick","active","button","data-active","languages","activeLanguage","onLanguageChange","map","lang","key","content","makeSnippet","pre","code","className","getByTestId","textContent","toBe","container","labelSpans","querySelectorAll","labels","Array","from","el","toContain","toBeTruthy","sdk","toggles","getAllByTestId","toHaveLength","fixed","queryAllByTestId","queryByTestId","toBeNull","headerRow","title","getByText","onChange","fn","pyButton","click","toHaveBeenCalledWith","undefined","languageOrdering","selector","buttons","getAllByRole"],"mappings":"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"}

package/core/CodeSnippet/languages.js

@@ -1,2 +1,2 @@
-const languages={javascript:{label:"JavaScript",icon:"icon-tech-javascript",syntaxHighlighterKey:"javascript"},typescript:{label:"TypeScript",icon:"icon-tech-typescript",syntaxHighlighterKey:"typescript"},java:{label:"Java",icon:"icon-tech-java",syntaxHighlighterKey:"java"},kotlin:{label:"Kotlin",icon:"icon-tech-kotlin",syntaxHighlighterKey:"kotlin"},python:{label:"Python",icon:"icon-tech-python",syntaxHighlighterKey:"python"},csharp:{label:"C#",icon:"icon-tech-csharp",syntaxHighlighterKey:"csharp"},go:{label:"Go",icon:"icon-tech-go",syntaxHighlighterKey:"go"},ruby:{label:"Ruby",icon:"icon-tech-ruby",syntaxHighlighterKey:"ruby"},php:{label:"PHP",icon:"icon-tech-php",syntaxHighlighterKey:"php"},nodejs:{label:"Node.js",icon:"icon-tech-nodejs",syntaxHighlighterKey:"javascript"},react:{label:"React",icon:"icon-tech-react",syntaxHighlighterKey:"javascript"},html:{label:"HTML",icon:"icon-tech-web",syntaxHighlighterKey:"xml"},shell:{label:"Shell",icon:"icon-tech-web",syntaxHighlighterKey:"bash"},json:{label:"JSON",icon:"icon-tech-json",syntaxHighlighterKey:"json"},laravel:{label:"Laravel",icon:"icon-tech-laravel-broadcast",syntaxHighlighterKey:"php"},xml:{label:"XML",icon:"icon-tech-web",syntaxHighlighterKey:"xml"},sql:{label:"SQL",icon:"icon-tech-postgres",syntaxHighlighterKey:"sql"},swift:{label:"Swift",icon:"icon-tech-swift",syntaxHighlighterKey:"swift"},cpp:{label:"C++",icon:"icon-tech-web",syntaxHighlighterKey:"cpp"},dart:{label:"Dart",icon:"icon-tech-web",syntaxHighlighterKey:"dart"},objc:{label:"Objective-C",icon:"icon-tech-objectivec",syntaxHighlighterKey:"objc"},android:{label:"Android",icon:"icon-tech-android-head",syntaxHighlighterKey:"java"},flutter:{label:"Flutter",icon:"icon-tech-flutter",syntaxHighlighterKey:"dart"},jetpack:{label:"Jetpack Compose",icon:"icon-tech-jetpack",syntaxHighlighterKey:"kotlin"}};export const stripSdkType=lang=>{if(lang.startsWith("realtime_")||lang.startsWith("rest_")){return lang.split("_").slice(1).join("_")}return lang};export const getLanguageInfo=langKey=>{const key=stripSdkType(langKey).toLowerCase();if(languages[key]){return languages[key]}return{label:langKey,icon:"icon-tech-web",syntaxHighlighterKey:langKey}};export default languages;
+export const SDK_PREFIXES=["realtime","rest","client","agent"];const languages={javascript:{label:"JavaScript",icon:"icon-tech-javascript",syntaxHighlighterKey:"javascript"},typescript:{label:"TypeScript",icon:"icon-tech-typescript",syntaxHighlighterKey:"typescript"},java:{label:"Java",icon:"icon-tech-java",syntaxHighlighterKey:"java"},kotlin:{label:"Kotlin",icon:"icon-tech-kotlin",syntaxHighlighterKey:"kotlin"},python:{label:"Python",icon:"icon-tech-python",syntaxHighlighterKey:"python"},csharp:{label:"C#",icon:"icon-tech-csharp",syntaxHighlighterKey:"csharp"},go:{label:"Go",icon:"icon-tech-go",syntaxHighlighterKey:"go"},ruby:{label:"Ruby",icon:"icon-tech-ruby",syntaxHighlighterKey:"ruby"},php:{label:"PHP",icon:"icon-tech-php",syntaxHighlighterKey:"php"},nodejs:{label:"Node.js",icon:"icon-tech-nodejs",syntaxHighlighterKey:"javascript"},react:{label:"React",icon:"icon-tech-react",syntaxHighlighterKey:"javascript"},html:{label:"HTML",icon:"icon-tech-web",syntaxHighlighterKey:"xml"},shell:{label:"Shell",icon:"icon-tech-web",syntaxHighlighterKey:"bash"},json:{label:"JSON",icon:"icon-tech-json",syntaxHighlighterKey:"json"},laravel:{label:"Laravel",icon:"icon-tech-laravel-broadcast",syntaxHighlighterKey:"php"},xml:{label:"XML",icon:"icon-tech-web",syntaxHighlighterKey:"xml"},sql:{label:"SQL",icon:"icon-tech-postgres",syntaxHighlighterKey:"sql"},swift:{label:"Swift",icon:"icon-tech-swift",syntaxHighlighterKey:"swift"},cpp:{label:"C++",icon:"icon-tech-web",syntaxHighlighterKey:"cpp"},dart:{label:"Dart",icon:"icon-tech-web",syntaxHighlighterKey:"dart"},objc:{label:"Objective-C",icon:"icon-tech-objectivec",syntaxHighlighterKey:"objc"},android:{label:"Android",icon:"icon-tech-android-full",syntaxHighlighterKey:"kotlin"},flutter:{label:"Flutter",icon:"icon-tech-flutter",syntaxHighlighterKey:"dart"}};export const stripSdkType=lang=>{for(const prefix of SDK_PREFIXES){const withUnderscore=`${prefix}_`;if(lang.startsWith(withUnderscore)){return lang.slice(withUnderscore.length)}}return lang};export const getLanguageInfo=langKey=>{const key=stripSdkType(langKey).toLowerCase();if(languages[key]){return languages[key]}return{label:langKey,icon:"icon-tech-web",syntaxHighlighterKey:langKey}};export default languages;
 //# sourceMappingURL=languages.js.map

package/core/CodeSnippet/languages.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/CodeSnippet/languages.ts"],"sourcesContent":["import { IconName } from \"../Icon/types\";\n\nexport interface LanguageInfo {\n  label: string;\n  icon: IconName;\n  syntaxHighlighterKey?: string;\n}\n\nexport type LanguageMap = Record<string, LanguageInfo>;\n\nconst languages: LanguageMap = {\n  javascript: {\n    label: \"JavaScript\",\n    icon: \"icon-tech-javascript\",\n    syntaxHighlighterKey: \"javascript\",\n  },\n  typescript: {\n    label: \"TypeScript\",\n    icon: \"icon-tech-typescript\",\n    syntaxHighlighterKey: \"typescript\",\n  },\n  java: {\n    label: \"Java\",\n    icon: \"icon-tech-java\",\n    syntaxHighlighterKey: \"java\",\n  },\n  kotlin: {\n    label: \"Kotlin\",\n    icon: \"icon-tech-kotlin\",\n    syntaxHighlighterKey: \"kotlin\",\n  },\n  python: {\n    label: \"Python\",\n    icon: \"icon-tech-python\",\n    syntaxHighlighterKey: \"python\",\n  },\n  csharp: {\n    label: \"C#\",\n    icon: \"icon-tech-csharp\",\n    syntaxHighlighterKey: \"csharp\",\n  },\n  go: {\n    label: \"Go\",\n    icon: \"icon-tech-go\",\n    syntaxHighlighterKey: \"go\",\n  },\n  ruby: {\n    label: \"Ruby\",\n    icon: \"icon-tech-ruby\",\n    syntaxHighlighterKey: \"ruby\",\n  },\n  php: {\n    label: \"PHP\",\n    icon: \"icon-tech-php\",\n    syntaxHighlighterKey: \"php\",\n  },\n  nodejs: {\n    label: \"Node.js\",\n    icon: \"icon-tech-nodejs\",\n    syntaxHighlighterKey: \"javascript\",\n  },\n  react: {\n    label: \"React\",\n    icon: \"icon-tech-react\",\n    syntaxHighlighterKey: \"javascript\",\n  },\n  html: {\n    label: \"HTML\",\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: \"xml\",\n  },\n  shell: {\n    label: \"Shell\",\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: \"bash\",\n  },\n  json: {\n    label: \"JSON\",\n    icon: \"icon-tech-json\",\n    syntaxHighlighterKey: \"json\",\n  },\n  laravel: {\n    label: \"Laravel\",\n    icon: \"icon-tech-laravel-broadcast\",\n    syntaxHighlighterKey: \"php\",\n  },\n  xml: {\n    label: \"XML\",\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: \"xml\",\n  },\n  sql: {\n    label: \"SQL\",\n    icon: \"icon-tech-postgres\",\n    syntaxHighlighterKey: \"sql\",\n  },\n  swift: {\n    label: \"Swift\",\n    icon: \"icon-tech-swift\",\n    syntaxHighlighterKey: \"swift\",\n  },\n  // New entries from languageInfo.ts\n  cpp: {\n    label: \"C++\",\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: \"cpp\",\n  },\n  dart: {\n    label: \"Dart\",\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: \"dart\",\n  },\n  objc: {\n    label: \"Objective-C\",\n    icon: \"icon-tech-objectivec\",\n    syntaxHighlighterKey: \"objc\",\n  },\n  android: {\n    label: \"Android\",\n    icon: \"icon-tech-android-head\",\n    syntaxHighlighterKey: \"java\",\n  },\n  flutter: {\n    label: \"Flutter\",\n    icon: \"icon-tech-flutter\",\n    syntaxHighlighterKey: \"dart\",\n  },\n  jetpack: {\n    label: \"Jetpack Compose\",\n    icon: \"icon-tech-jetpack\",\n    syntaxHighlighterKey: \"kotlin\",\n  },\n};\n\nexport const stripSdkType = (lang: string) => {\n  if (lang.startsWith(\"realtime_\") || lang.startsWith(\"rest_\")) {\n    return lang.split(\"_\").slice(1).join(\"_\");\n  }\n  return lang;\n};\n\n// Fallback function to handle languages not in the map\nexport const getLanguageInfo = (langKey: string): LanguageInfo => {\n  const key = stripSdkType(langKey).toLowerCase();\n\n  if (languages[key]) {\n    return languages[key];\n  }\n\n  // Fallback for unknown languages\n  return {\n    label: langKey,\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: langKey,\n  };\n};\n\nexport default languages;\n"],"names":["languages","javascript","label","icon","syntaxHighlighterKey","typescript","java","kotlin","python","csharp","go","ruby","php","nodejs","react","html","shell","json","laravel","xml","sql","swift","cpp","dart","objc","android","flutter","jetpack","stripSdkType","lang","startsWith","split","slice","join","getLanguageInfo","langKey","key","toLowerCase"],"mappings":"AAUA,MAAMA,UAAyB,CAC7BC,WAAY,CACVC,MAAO,aACPC,KAAM,uBACNC,qBAAsB,YACxB,EACAC,WAAY,CACVH,MAAO,aACPC,KAAM,uBACNC,qBAAsB,YACxB,EACAE,KAAM,CACJJ,MAAO,OACPC,KAAM,iBACNC,qBAAsB,MACxB,EACAG,OAAQ,CACNL,MAAO,SACPC,KAAM,mBACNC,qBAAsB,QACxB,EACAI,OAAQ,CACNN,MAAO,SACPC,KAAM,mBACNC,qBAAsB,QACxB,EACAK,OAAQ,CACNP,MAAO,KACPC,KAAM,mBACNC,qBAAsB,QACxB,EACAM,GAAI,CACFR,MAAO,KACPC,KAAM,eACNC,qBAAsB,IACxB,EACAO,KAAM,CACJT,MAAO,OACPC,KAAM,iBACNC,qBAAsB,MACxB,EACAQ,IAAK,CACHV,MAAO,MACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAS,OAAQ,CACNX,MAAO,UACPC,KAAM,mBACNC,qBAAsB,YACxB,EACAU,MAAO,CACLZ,MAAO,QACPC,KAAM,kBACNC,qBAAsB,YACxB,EACAW,KAAM,CACJb,MAAO,OACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAY,MAAO,CACLd,MAAO,QACPC,KAAM,gBACNC,qBAAsB,MACxB,EACAa,KAAM,CACJf,MAAO,OACPC,KAAM,iBACNC,qBAAsB,MACxB,EACAc,QAAS,CACPhB,MAAO,UACPC,KAAM,8BACNC,qBAAsB,KACxB,EACAe,IAAK,CACHjB,MAAO,MACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAgB,IAAK,CACHlB,MAAO,MACPC,KAAM,qBACNC,qBAAsB,KACxB,EACAiB,MAAO,CACLnB,MAAO,QACPC,KAAM,kBACNC,qBAAsB,OACxB,EAEAkB,IAAK,CACHpB,MAAO,MACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAmB,KAAM,CACJrB,MAAO,OACPC,KAAM,gBACNC,qBAAsB,MACxB,EACAoB,KAAM,CACJtB,MAAO,cACPC,KAAM,uBACNC,qBAAsB,MACxB,EACAqB,QAAS,CACPvB,MAAO,UACPC,KAAM,yBACNC,qBAAsB,MACxB,EACAsB,QAAS,CACPxB,MAAO,UACPC,KAAM,oBACNC,qBAAsB,MACxB,EACAuB,QAAS,CACPzB,MAAO,kBACPC,KAAM,oBACNC,qBAAsB,QACxB,CACF,CAEA,QAAO,MAAMwB,aAAe,AAACC,OAC3B,GAAIA,KAAKC,UAAU,CAAC,cAAgBD,KAAKC,UAAU,CAAC,SAAU,CAC5D,OAAOD,KAAKE,KAAK,CAAC,KAAKC,KAAK,CAAC,GAAGC,IAAI,CAAC,IACvC,CACA,OAAOJ,IACT,CAAE,AAGF,QAAO,MAAMK,gBAAkB,AAACC,UAC9B,MAAMC,IAAMR,aAAaO,SAASE,WAAW,GAE7C,GAAIrC,SAAS,CAACoC,IAAI,CAAE,CAClB,OAAOpC,SAAS,CAACoC,IAAI,AACvB,CAGA,MAAO,CACLlC,MAAOiC,QACPhC,KAAM,gBACNC,qBAAsB+B,OACxB,CACF,CAAE,AAEF,gBAAenC,SAAU"}
+{"version":3,"sources":["../../../src/core/CodeSnippet/languages.ts"],"sourcesContent":["import { IconName } from \"../Icon/types\";\n\nexport interface LanguageInfo {\n  label: string;\n  icon: IconName;\n  syntaxHighlighterKey?: string;\n}\n\nexport type LanguageMap = Record<string, LanguageInfo>;\n\nexport const SDK_PREFIXES = [\"realtime\", \"rest\", \"client\", \"agent\"] as const;\nexport type SDKType = (typeof SDK_PREFIXES)[number];\n\nconst languages: LanguageMap = {\n  javascript: {\n    label: \"JavaScript\",\n    icon: \"icon-tech-javascript\",\n    syntaxHighlighterKey: \"javascript\",\n  },\n  typescript: {\n    label: \"TypeScript\",\n    icon: \"icon-tech-typescript\",\n    syntaxHighlighterKey: \"typescript\",\n  },\n  java: {\n    label: \"Java\",\n    icon: \"icon-tech-java\",\n    syntaxHighlighterKey: \"java\",\n  },\n  kotlin: {\n    label: \"Kotlin\",\n    icon: \"icon-tech-kotlin\",\n    syntaxHighlighterKey: \"kotlin\",\n  },\n  python: {\n    label: \"Python\",\n    icon: \"icon-tech-python\",\n    syntaxHighlighterKey: \"python\",\n  },\n  csharp: {\n    label: \"C#\",\n    icon: \"icon-tech-csharp\",\n    syntaxHighlighterKey: \"csharp\",\n  },\n  go: {\n    label: \"Go\",\n    icon: \"icon-tech-go\",\n    syntaxHighlighterKey: \"go\",\n  },\n  ruby: {\n    label: \"Ruby\",\n    icon: \"icon-tech-ruby\",\n    syntaxHighlighterKey: \"ruby\",\n  },\n  php: {\n    label: \"PHP\",\n    icon: \"icon-tech-php\",\n    syntaxHighlighterKey: \"php\",\n  },\n  nodejs: {\n    label: \"Node.js\",\n    icon: \"icon-tech-nodejs\",\n    syntaxHighlighterKey: \"javascript\",\n  },\n  react: {\n    label: \"React\",\n    icon: \"icon-tech-react\",\n    syntaxHighlighterKey: \"javascript\",\n  },\n  html: {\n    label: \"HTML\",\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: \"xml\",\n  },\n  shell: {\n    label: \"Shell\",\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: \"bash\",\n  },\n  json: {\n    label: \"JSON\",\n    icon: \"icon-tech-json\",\n    syntaxHighlighterKey: \"json\",\n  },\n  laravel: {\n    label: \"Laravel\",\n    icon: \"icon-tech-laravel-broadcast\",\n    syntaxHighlighterKey: \"php\",\n  },\n  xml: {\n    label: \"XML\",\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: \"xml\",\n  },\n  sql: {\n    label: \"SQL\",\n    icon: \"icon-tech-postgres\",\n    syntaxHighlighterKey: \"sql\",\n  },\n  swift: {\n    label: \"Swift\",\n    icon: \"icon-tech-swift\",\n    syntaxHighlighterKey: \"swift\",\n  },\n  // New entries from languageInfo.ts\n  cpp: {\n    label: \"C++\",\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: \"cpp\",\n  },\n  dart: {\n    label: \"Dart\",\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: \"dart\",\n  },\n  objc: {\n    label: \"Objective-C\",\n    icon: \"icon-tech-objectivec\",\n    syntaxHighlighterKey: \"objc\",\n  },\n  android: {\n    label: \"Android\",\n    icon: \"icon-tech-android-full\",\n    syntaxHighlighterKey: \"kotlin\",\n  },\n  flutter: {\n    label: \"Flutter\",\n    icon: \"icon-tech-flutter\",\n    syntaxHighlighterKey: \"dart\",\n  },\n};\n\nexport const stripSdkType = (lang: string) => {\n  for (const prefix of SDK_PREFIXES) {\n    const withUnderscore = `${prefix}_`;\n    if (lang.startsWith(withUnderscore)) {\n      return lang.slice(withUnderscore.length);\n    }\n  }\n  return lang;\n};\n\n// Fallback function to handle languages not in the map\nexport const getLanguageInfo = (langKey: string): LanguageInfo => {\n  const key = stripSdkType(langKey).toLowerCase();\n\n  if (languages[key]) {\n    return languages[key];\n  }\n\n  // Fallback for unknown languages\n  return {\n    label: langKey,\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: langKey,\n  };\n};\n\nexport default languages;\n"],"names":["SDK_PREFIXES","languages","javascript","label","icon","syntaxHighlighterKey","typescript","java","kotlin","python","csharp","go","ruby","php","nodejs","react","html","shell","json","laravel","xml","sql","swift","cpp","dart","objc","android","flutter","stripSdkType","lang","prefix","withUnderscore","startsWith","slice","length","getLanguageInfo","langKey","key","toLowerCase"],"mappings":"AAUA,OAAO,MAAMA,aAAe,CAAC,WAAY,OAAQ,SAAU,QAAQ,AAAU,CAG7E,MAAMC,UAAyB,CAC7BC,WAAY,CACVC,MAAO,aACPC,KAAM,uBACNC,qBAAsB,YACxB,EACAC,WAAY,CACVH,MAAO,aACPC,KAAM,uBACNC,qBAAsB,YACxB,EACAE,KAAM,CACJJ,MAAO,OACPC,KAAM,iBACNC,qBAAsB,MACxB,EACAG,OAAQ,CACNL,MAAO,SACPC,KAAM,mBACNC,qBAAsB,QACxB,EACAI,OAAQ,CACNN,MAAO,SACPC,KAAM,mBACNC,qBAAsB,QACxB,EACAK,OAAQ,CACNP,MAAO,KACPC,KAAM,mBACNC,qBAAsB,QACxB,EACAM,GAAI,CACFR,MAAO,KACPC,KAAM,eACNC,qBAAsB,IACxB,EACAO,KAAM,CACJT,MAAO,OACPC,KAAM,iBACNC,qBAAsB,MACxB,EACAQ,IAAK,CACHV,MAAO,MACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAS,OAAQ,CACNX,MAAO,UACPC,KAAM,mBACNC,qBAAsB,YACxB,EACAU,MAAO,CACLZ,MAAO,QACPC,KAAM,kBACNC,qBAAsB,YACxB,EACAW,KAAM,CACJb,MAAO,OACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAY,MAAO,CACLd,MAAO,QACPC,KAAM,gBACNC,qBAAsB,MACxB,EACAa,KAAM,CACJf,MAAO,OACPC,KAAM,iBACNC,qBAAsB,MACxB,EACAc,QAAS,CACPhB,MAAO,UACPC,KAAM,8BACNC,qBAAsB,KACxB,EACAe,IAAK,CACHjB,MAAO,MACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAgB,IAAK,CACHlB,MAAO,MACPC,KAAM,qBACNC,qBAAsB,KACxB,EACAiB,MAAO,CACLnB,MAAO,QACPC,KAAM,kBACNC,qBAAsB,OACxB,EAEAkB,IAAK,CACHpB,MAAO,MACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAmB,KAAM,CACJrB,MAAO,OACPC,KAAM,gBACNC,qBAAsB,MACxB,EACAoB,KAAM,CACJtB,MAAO,cACPC,KAAM,uBACNC,qBAAsB,MACxB,EACAqB,QAAS,CACPvB,MAAO,UACPC,KAAM,yBACNC,qBAAsB,QACxB,EACAsB,QAAS,CACPxB,MAAO,UACPC,KAAM,oBACNC,qBAAsB,MACxB,CACF,CAEA,QAAO,MAAMuB,aAAe,AAACC,OAC3B,IAAK,MAAMC,UAAU9B,aAAc,CACjC,MAAM+B,eAAiB,CAAC,EAAED,OAAO,CAAC,CAAC,CACnC,GAAID,KAAKG,UAAU,CAACD,gBAAiB,CACnC,OAAOF,KAAKI,KAAK,CAACF,eAAeG,MAAM,CACzC,CACF,CACA,OAAOL,IACT,CAAE,AAGF,QAAO,MAAMM,gBAAkB,AAACC,UAC9B,MAAMC,IAAMT,aAAaQ,SAASE,WAAW,GAE7C,GAAIrC,SAAS,CAACoC,IAAI,CAAE,CAClB,OAAOpC,SAAS,CAACoC,IAAI,AACvB,CAGA,MAAO,CACLlC,MAAOiC,QACPhC,KAAM,gBACNC,qBAAsB+B,OACxB,CACF,CAAE,AAEF,gBAAenC,SAAU"}

package/core/CodeSnippet/languages.test.js

@@ -0,0 +1,2 @@
+import{describe,expect,it}from"vitest";import{stripSdkType,getLanguageInfo,SDK_PREFIXES}from"./languages";describe("SDK_PREFIXES",()=>{it("contains the expected SDK types",()=>{expect(SDK_PREFIXES).toEqual(["realtime","rest","client","agent"])});it("derives SDKType correctly",()=>{const types=[...SDK_PREFIXES];expect(types).toHaveLength(4)})});describe("stripSdkType",()=>{it("strips realtime_ prefix",()=>{expect(stripSdkType("realtime_javascript")).toBe("javascript")});it("strips rest_ prefix",()=>{expect(stripSdkType("rest_python")).toBe("python")});it("strips client_ prefix",()=>{expect(stripSdkType("client_javascript")).toBe("javascript")});it("strips agent_ prefix",()=>{expect(stripSdkType("agent_python")).toBe("python")});it("returns the language unchanged when no prefix",()=>{expect(stripSdkType("javascript")).toBe("javascript")});it("handles languages with underscores after the prefix",()=>{expect(stripSdkType("client_objective_c")).toBe("objective_c")});it("does not strip unknown prefixes",()=>{expect(stripSdkType("unknown_javascript")).toBe("unknown_javascript")});it("handles empty string",()=>{expect(stripSdkType("")).toBe("")});it("does not strip prefix without underscore",()=>{expect(stripSdkType("realtimejavascript")).toBe("realtimejavascript")})});describe("getLanguageInfo",()=>{it("returns info for known languages",()=>{const info=getLanguageInfo("javascript");expect(info.label).toBe("JavaScript");expect(info.icon).toBe("icon-tech-javascript");expect(info.syntaxHighlighterKey).toBe("javascript")});it("returns info for prefixed languages by stripping prefix first",()=>{const info=getLanguageInfo("realtime_javascript");expect(info.label).toBe("JavaScript");expect(info.icon).toBe("icon-tech-javascript")});it("returns info for client_ prefixed languages",()=>{const info=getLanguageInfo("client_python");expect(info.label).toBe("Python");expect(info.icon).toBe("icon-tech-python")});it("returns info for agent_ prefixed languages",()=>{const info=getLanguageInfo("agent_nodejs");expect(info.label).toBe("Node.js");expect(info.icon).toBe("icon-tech-nodejs")});it("handles case-insensitive lookup",()=>{const info=getLanguageInfo("JavaScript");expect(info.label).toBe("JavaScript")});it("returns fallback for unknown languages",()=>{const info=getLanguageInfo("brainfuck");expect(info.label).toBe("brainfuck");expect(info.icon).toBe("icon-tech-web");expect(info.syntaxHighlighterKey).toBe("brainfuck")});it("returns correct info for new language entries",()=>{expect(getLanguageInfo("cpp").label).toBe("C++");expect(getLanguageInfo("dart").label).toBe("Dart");expect(getLanguageInfo("objc").label).toBe("Objective-C");expect(getLanguageInfo("android").label).toBe("Android");expect(getLanguageInfo("flutter").label).toBe("Flutter")});it("maps languages to correct syntax highlighter keys",()=>{expect(getLanguageInfo("nodejs").syntaxHighlighterKey).toBe("javascript");expect(getLanguageInfo("react").syntaxHighlighterKey).toBe("javascript");expect(getLanguageInfo("flutter").syntaxHighlighterKey).toBe("dart");expect(getLanguageInfo("android").syntaxHighlighterKey).toBe("kotlin");expect(getLanguageInfo("laravel").syntaxHighlighterKey).toBe("php")})});
+//# sourceMappingURL=languages.test.js.map

package/core/CodeSnippet/languages.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/core/CodeSnippet/languages.test.ts"],"sourcesContent":["import { describe, expect, it } from \"vitest\";\nimport {\n  stripSdkType,\n  getLanguageInfo,\n  SDK_PREFIXES,\n  SDKType,\n} from \"./languages\";\n\ndescribe(\"SDK_PREFIXES\", () => {\n  it(\"contains the expected SDK types\", () => {\n    expect(SDK_PREFIXES).toEqual([\"realtime\", \"rest\", \"client\", \"agent\"]);\n  });\n\n  it(\"derives SDKType correctly\", () => {\n    // Verify the type system works by assigning each prefix\n    const types: SDKType[] = [...SDK_PREFIXES];\n    expect(types).toHaveLength(4);\n  });\n});\n\ndescribe(\"stripSdkType\", () => {\n  it(\"strips realtime_ prefix\", () => {\n    expect(stripSdkType(\"realtime_javascript\")).toBe(\"javascript\");\n  });\n\n  it(\"strips rest_ prefix\", () => {\n    expect(stripSdkType(\"rest_python\")).toBe(\"python\");\n  });\n\n  it(\"strips client_ prefix\", () => {\n    expect(stripSdkType(\"client_javascript\")).toBe(\"javascript\");\n  });\n\n  it(\"strips agent_ prefix\", () => {\n    expect(stripSdkType(\"agent_python\")).toBe(\"python\");\n  });\n\n  it(\"returns the language unchanged when no prefix\", () => {\n    expect(stripSdkType(\"javascript\")).toBe(\"javascript\");\n  });\n\n  it(\"handles languages with underscores after the prefix\", () => {\n    expect(stripSdkType(\"client_objective_c\")).toBe(\"objective_c\");\n  });\n\n  it(\"does not strip unknown prefixes\", () => {\n    expect(stripSdkType(\"unknown_javascript\")).toBe(\"unknown_javascript\");\n  });\n\n  it(\"handles empty string\", () => {\n    expect(stripSdkType(\"\")).toBe(\"\");\n  });\n\n  it(\"does not strip prefix without underscore\", () => {\n    expect(stripSdkType(\"realtimejavascript\")).toBe(\"realtimejavascript\");\n  });\n});\n\ndescribe(\"getLanguageInfo\", () => {\n  it(\"returns info for known languages\", () => {\n    const info = getLanguageInfo(\"javascript\");\n    expect(info.label).toBe(\"JavaScript\");\n    expect(info.icon).toBe(\"icon-tech-javascript\");\n    expect(info.syntaxHighlighterKey).toBe(\"javascript\");\n  });\n\n  it(\"returns info for prefixed languages by stripping prefix first\", () => {\n    const info = getLanguageInfo(\"realtime_javascript\");\n    expect(info.label).toBe(\"JavaScript\");\n    expect(info.icon).toBe(\"icon-tech-javascript\");\n  });\n\n  it(\"returns info for client_ prefixed languages\", () => {\n    const info = getLanguageInfo(\"client_python\");\n    expect(info.label).toBe(\"Python\");\n    expect(info.icon).toBe(\"icon-tech-python\");\n  });\n\n  it(\"returns info for agent_ prefixed languages\", () => {\n    const info = getLanguageInfo(\"agent_nodejs\");\n    expect(info.label).toBe(\"Node.js\");\n    expect(info.icon).toBe(\"icon-tech-nodejs\");\n  });\n\n  it(\"handles case-insensitive lookup\", () => {\n    const info = getLanguageInfo(\"JavaScript\");\n    expect(info.label).toBe(\"JavaScript\");\n  });\n\n  it(\"returns fallback for unknown languages\", () => {\n    const info = getLanguageInfo(\"brainfuck\");\n    expect(info.label).toBe(\"brainfuck\");\n    expect(info.icon).toBe(\"icon-tech-web\");\n    expect(info.syntaxHighlighterKey).toBe(\"brainfuck\");\n  });\n\n  it(\"returns correct info for new language entries\", () => {\n    expect(getLanguageInfo(\"cpp\").label).toBe(\"C++\");\n    expect(getLanguageInfo(\"dart\").label).toBe(\"Dart\");\n    expect(getLanguageInfo(\"objc\").label).toBe(\"Objective-C\");\n    expect(getLanguageInfo(\"android\").label).toBe(\"Android\");\n    expect(getLanguageInfo(\"flutter\").label).toBe(\"Flutter\");\n  });\n\n  it(\"maps languages to correct syntax highlighter keys\", () => {\n    expect(getLanguageInfo(\"nodejs\").syntaxHighlighterKey).toBe(\"javascript\");\n    expect(getLanguageInfo(\"react\").syntaxHighlighterKey).toBe(\"javascript\");\n    expect(getLanguageInfo(\"flutter\").syntaxHighlighterKey).toBe(\"dart\");\n    expect(getLanguageInfo(\"android\").syntaxHighlighterKey).toBe(\"kotlin\");\n    expect(getLanguageInfo(\"laravel\").syntaxHighlighterKey).toBe(\"php\");\n  });\n});\n"],"names":["describe","expect","it","stripSdkType","getLanguageInfo","SDK_PREFIXES","toEqual","types","toHaveLength","toBe","info","label","icon","syntaxHighlighterKey"],"mappings":"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"}

package/core/CodeSnippet.js

@@ -1,2 +1,2 @@
-import React,{useState,useEffect,Children,isValidElement,useRef,useCallback,useMemo}from"react";import Code from"./Code";import cn from"./utils/cn";import{parseLineHighlights}from"./utils/syntax-highlighter";import Icon from"./Icon";import{getLanguageInfo,stripSdkType}from"./CodeSnippet/languages";import LanguageSelector from"./CodeSnippet/LanguageSelector";import ApiKeySelector from"./CodeSnippet/ApiKeySelector";import PlainCodeView from"./CodeSnippet/PlainCodeView";import CopyButton from"./CodeSnippet/CopyButton";import SegmentedControl from"./SegmentedControl";const substituteApiKey=(content,apiKey,mask=true)=>{return content.replace(/\{\{API_KEY\}\}/g,mask?`${apiKey.split(":")[0]}:*****`:apiKey)};const CodeSnippet=({fixed=false,headerRow=false,title="Code",children,className,lang,onChange,apiKeys,sdk,showCodeLines=true,languageOrdering,wrapCode=false})=>{const codeRef=useRef(null);const[selectedApiKey,setSelectedApiKey]=useState(()=>apiKeys?.[0]?.keys?.[0]?.key??"");useEffect(()=>{if(!selectedApiKey&&apiKeys&&apiKeys.length>0){setSelectedApiKey(apiKeys[0].keys?.[0]?.key)}},[apiKeys]);useEffect(()=>{const element=codeRef.current;if(!element)return;const unmaskRenderedApiKey=(content,apiKey)=>{return content.replace(/(['"]?)([^:'"]+):\*{5}\1/g,`$1${apiKey}$1`)};const handleCopy=event=>{const selection=window.getSelection();if(!selection||selection.rangeCount===0)return;const selectedText=selection.toString();if(!selectedText)return;const range=selection.getRangeAt(0);if(!element.contains(range.commonAncestorContainer))return;const modifiedText=unmaskRenderedApiKey(selectedText,selectedApiKey);event.clipboardData?.setData("text/plain",modifiedText);event.preventDefault()};document.addEventListener("copy",handleCopy);return()=>{document.removeEventListener("copy",handleCopy)}},[selectedApiKey]);const extractLanguageFromCode=useCallback(codeElement=>{if(!codeElement||!codeElement.props.className)return null;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return null;return langClass.substring(9)},[]);const{codeData,languages,sdkTypes,isSinglePlainCommand}=useMemo(()=>{const childrenArray=Children.toArray(children);const languages=[];const sdkTypes=new Set;const codeData=[];const isSinglePlainCommand=childrenArray.length===1&&["language-shell","language-text"].some(lang=>isValidElement(childrenArray[0])&&isValidElement(childrenArray[0].props.children)&&childrenArray[0].props.children.props.className?.includes(lang));childrenArray.forEach(child=>{if(!isValidElement(child))return;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement)return;const rawLanguage=extractLanguageFromCode(codeElement);if(!rawLanguage)return;const meta=codeElement.props?.["data-meta"];const{lang:codeLanguage,highlights:lineHighlights}=parseLineHighlights(rawLanguage,meta);if(codeLanguage.startsWith("realtime_")){sdkTypes.add("realtime")}else if(codeLanguage.startsWith("rest_")){sdkTypes.add("rest")}if(!languages.includes(codeLanguage)){languages.push(codeLanguage)}const codeContent=codeElement.props.children;codeData.push({language:codeLanguage,content:codeContent,lineHighlights})});return{codeData,languages,sdkTypes,isSinglePlainCommand}},[children,extractLanguageFromCode]);const resolvedSdk=useMemo(()=>{if(sdkTypes.size===1&&sdk&&!sdkTypes.has(sdk)){return Array.from(sdkTypes)[0]}return sdk??null},[sdk,sdkTypes]);const showSDKSelector=sdkTypes.size>0;const filteredLanguages=useMemo(()=>{const filtered=!resolvedSdk||!showSDKSelector?[...languages]:languages.filter(lang=>lang.startsWith(`${resolvedSdk}_`));if(languageOrdering&&languageOrdering.length>0){filtered.sort((a,b)=>{const aBase=stripSdkType(a);const bBase=stripSdkType(b);const aIndex=languageOrdering.indexOf(aBase);const bIndex=languageOrdering.indexOf(bBase);if(aIndex!==-1&&bIndex!==-1)return aIndex-bIndex;if(aIndex!==-1)return-1;if(bIndex!==-1)return 1;return 0})}return filtered},[resolvedSdk,showSDKSelector,languages,languageOrdering]);const activeLanguage=useMemo(()=>{if(resolvedSdk&&sdkTypes.has(resolvedSdk)){return`${resolvedSdk}_${lang}`}if(lang)return lang;if(filteredLanguages.length>0)return filteredLanguages[0];return languages[0]},[resolvedSdk,sdkTypes,lang,filteredLanguages,languages]);const requiresApiKeySubstitution=useMemo(()=>{const containsPlaceholder=codeData.some(code=>code?.content.includes("{{API_KEY}}"));return containsPlaceholder&&!!apiKeys&&apiKeys.length>0&&!!selectedApiKey},[codeData,apiKeys,selectedApiKey]);const[isHovering,setIsHovering]=useState(false);const hasOnlyJsonSnippet=useMemo(()=>languages.length===1&&languages[0]==="json",[languages]);const processedChildren=useMemo(()=>{if(!activeLanguage)return[];const targetLanguage=hasOnlyJsonSnippet?"json":activeLanguage;return codeData.filter(code=>{return code?.language===targetLanguage}).map(code=>{if(!code)return null;const cleanLang=hasOnlyJsonSnippet?"json":code.language;const langInfo=getLanguageInfo(cleanLang??"");if(typeof code.content==="string"||typeof code.content==="number"||typeof code.content==="boolean"){let processedContent=String(code.content);if(requiresApiKeySubstitution){processedContent=substituteApiKey(processedContent,selectedApiKey)}if(!langInfo.syntaxHighlighterKey||!cleanLang)return null;return React.createElement(Code,{key:code.language,language:langInfo.syntaxHighlighterKey||cleanLang,snippet:processedContent,additionalCSS:"!bg-neutral-000 text-neutral-1300 dark:!bg-neutral-1300 dark:text-neutral-200 px-6 py-4",showLines:showCodeLines,wrap:wrapCode,lineHighlights:Object.keys(code.lineHighlights).length>0?code.lineHighlights:undefined})}return null})},[activeLanguage,hasOnlyJsonSnippet,codeData,requiresApiKeySubstitution,showCodeLines,wrapCode,selectedApiKey]);const hasSnippetForActiveLanguage=useMemo(()=>{if(!activeLanguage)return false;if(hasOnlyJsonSnippet)return true;return codeData.some(code=>{return code?.language===activeLanguage})},[activeLanguage,hasOnlyJsonSnippet,codeData]);const handleSDKTypeChange=useCallback(type=>{const nextLang=stripSdkType(languages.find(l=>l===`${type}_${stripSdkType(activeLanguage)}`)??languages.find(l=>l.startsWith(`${type}_`))??activeLanguage);if(onChange&&nextLang){onChange(stripSdkType(activeLanguage),type)}},[activeLanguage,languages,onChange]);const handleLanguageChange=useCallback(language=>{if(onChange){onChange(stripSdkType(language),resolvedSdk)}},[onChange,resolvedSdk]);const noSnippetMessage=useMemo(()=>{if(!activeLanguage)return null;const activeLanguageInfo=getLanguageInfo(activeLanguage);return React.createElement("div",{className:"px-16 py-6 ui-text-body2 text-neutral-800 dark:text-neutral-400 text-center flex flex-col gap-3 items-center"},React.createElement(Icon,{name:"icon-gui-exclamation-triangle-outline",color:"text-yellow-600 dark:text-yellow-400",size:"24px"}),React.createElement("p",{className:"ui-text-p3 text-neutral-700 dark:text-neutral-600"},"You're currently viewing the ",activeLanguageInfo.label," docs. There either isn't a ",activeLanguageInfo.label," code sample for this example, or this feature isn't supported in"," ",activeLanguageInfo.label,". Switch language to view this example in a different language, or check which SDKs support this feature."))},[activeLanguage]);const showLanguageSelector=!fixed&&filteredLanguages.length>0;const showFullSelector=filteredLanguages.length>1;const renderContent=useMemo(()=>{if(!activeLanguage)return null;if(hasSnippetForActiveLanguage){return processedChildren}return noSnippetMessage},[activeLanguage,hasSnippetForActiveLanguage,processedChildren,noSnippetMessage]);if(isSinglePlainCommand){const plainChild=codeData[0];if(plainChild){const codeContent=plainChild.content;const language=plainChild.language;if(!language||!codeContent)return null;let processedContent=String(codeContent);if(requiresApiKeySubstitution){processedContent=substituteApiKey(processedContent,selectedApiKey)}return React.createElement(PlainCodeView,{content:processedContent,className:className,language:language,icon:language==="shell"?"icon-gui-command-line-outline":null})}}return React.createElement("div",{className:cn("rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 min-h-[3.375rem]",className)},headerRow&&React.createElement("div",{className:"h-[2.375rem] bg-neutral-200 dark:bg-neutral-1100 border-b border-neutral-300 dark:border-neutral-1000 flex items-center py-1 px-3 rounded-t-lg"},React.createElement("div",{className:"flex space-x-1.5"},React.createElement("div",{className:"w-3 h-3 rounded-full bg-orange-500"}),React.createElement("div",{className:"w-3 h-3 rounded-full bg-yellow-500"}),React.createElement("div",{className:"w-3 h-3 rounded-full bg-green-500"})),React.createElement("div",{className:"flex-1 text-center ui-text-p3 font-bold text-neutral-1300 dark:text-neutral-000"},title),React.createElement("div",{className:"w-12"})),showSDKSelector&&React.createElement("div",{className:cn("p-2 border-b border-neutral-300 dark:border-neutral-1000",sdkTypes.size===1&&"p-1",headerRow?"":"rounded-t-lg")},React.createElement("div",{className:"flex gap-1 justify-start"},["realtime","rest"].map(type=>sdkTypes.has(type)&&React.createElement(SegmentedControl,{key:type,onClick:()=>handleSDKTypeChange(type),size:"xs",active:resolvedSdk===type,className:cn("text-[11px] font-semibold px-2 py-1 h-auto",sdkTypes.size===1&&"pointer-events-none bg-neutral-100 dark:bg-neutral-1200 !text-neutral-800 !dark:text-neutral-500",sdkTypes.size>1&&resolvedSdk!==type&&"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-400 dark:active:bg-neutral-900",sdkTypes.size>1&&resolvedSdk===type&&"bg-neutral-000 dark:bg-neutral-1100")},type==="realtime"?"Realtime":"REST")))),showLanguageSelector&&(showFullSelector?React.createElement(LanguageSelector,{languages:filteredLanguages,activeLanguage:activeLanguage,onLanguageChange:handleLanguageChange}):React.createElement("div",{className:cn("border-b border-neutral-300 dark:border-neutral-1000 h-[2.125rem] inline-flex items-center px-3 w-full",{"rounded-t-lg":!headerRow})},filteredLanguages.length>0&&React.createElement("div",{className:cn("inline-flex items-center",{"cursor-pointer":filteredLanguages.length>0}),...filteredLanguages.length>0&&{onClick:()=>handleLanguageChange(filteredLanguages[0])}},React.createElement(Icon,{name:getLanguageInfo(filteredLanguages[0]).icon,size:"16px",additionalCSS:"mr-2"}),React.createElement("span",{className:"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500 select-none"},getLanguageInfo(filteredLanguages[0]).label)))),React.createElement("div",{ref:codeRef,className:"relative",onMouseEnter:()=>setIsHovering(true),onMouseLeave:()=>setIsHovering(false),onFocus:()=>setIsHovering(true),onBlur:()=>setIsHovering(false)},renderContent,isHovering&&activeLanguage&&hasSnippetForActiveLanguage&&React.createElement(CopyButton,{onCopy:()=>{const text=codeData.find(code=>code.language===activeLanguage)?.content;if(text)navigator.clipboard.writeText(substituteApiKey(text,selectedApiKey,false))}})),requiresApiKeySubstitution&&React.createElement(ApiKeySelector,{apiKeys:apiKeys,selectedApiKey:selectedApiKey,onApiKeyChange:setSelectedApiKey}))};export default CodeSnippet;
+import React,{useState,useEffect,Children,isValidElement,useRef,useCallback,useMemo}from"react";import Code from"./Code";import cn from"./utils/cn";import{parseLineHighlights}from"./utils/syntax-highlighter";import Icon from"./Icon";import{getLanguageInfo,stripSdkType,SDK_PREFIXES}from"./CodeSnippet/languages";import LanguageSelector from"./CodeSnippet/LanguageSelector";import ApiKeySelector from"./CodeSnippet/ApiKeySelector";import PlainCodeView from"./CodeSnippet/PlainCodeView";import CopyButton from"./CodeSnippet/CopyButton";import SegmentedControl from"./SegmentedControl";const substituteApiKey=(content,apiKey,mask=true)=>{return content.replace(/\{\{API_KEY\}\}/g,mask?`${apiKey.split(":")[0]}:*****`:apiKey)};const CodeSnippet=({fixed=false,headerRow=false,title="Code",children,className,lang,onChange,apiKeys,sdk,showCodeLines=true,languageOrdering,wrapCode=false})=>{const codeRef=useRef(null);const[selectedApiKey,setSelectedApiKey]=useState(()=>apiKeys?.[0]?.keys?.[0]?.key??"");useEffect(()=>{if(!selectedApiKey&&apiKeys&&apiKeys.length>0){setSelectedApiKey(apiKeys[0].keys?.[0]?.key)}},[apiKeys]);useEffect(()=>{const element=codeRef.current;if(!element)return;const unmaskRenderedApiKey=(content,apiKey)=>{return content.replace(/(['"]?)([^:'"]+):\*{5}\1/g,`$1${apiKey}$1`)};const handleCopy=event=>{const selection=window.getSelection();if(!selection||selection.rangeCount===0)return;const selectedText=selection.toString();if(!selectedText)return;const range=selection.getRangeAt(0);if(!element.contains(range.commonAncestorContainer))return;const modifiedText=unmaskRenderedApiKey(selectedText,selectedApiKey);event.clipboardData?.setData("text/plain",modifiedText);event.preventDefault()};document.addEventListener("copy",handleCopy);return()=>{document.removeEventListener("copy",handleCopy)}},[selectedApiKey]);const extractLanguageFromCode=useCallback(codeElement=>{if(!codeElement||!codeElement.props.className)return null;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return null;return langClass.substring(9)},[]);const findCodeElement=useCallback(preChildren=>{if(isValidElement(preChildren)){return preChildren}if(Array.isArray(preChildren)){const codeEl=preChildren.find(c=>isValidElement(c));return codeEl&&isValidElement(codeEl)?codeEl:null}return null},[]);const{codeData,languages,sdkTypes,isSinglePlainCommand}=useMemo(()=>{const childrenArray=Children.toArray(children);const languages=[];const sdkTypes=new Set;const codeData=[];const isSinglePlainCommand=childrenArray.length===1&&["language-shell","language-text"].some(lang=>{if(!isValidElement(childrenArray[0]))return false;const codeEl=findCodeElement(childrenArray[0].props.children);return codeEl?.props.className?.includes(lang)});childrenArray.forEach(child=>{if(!isValidElement(child))return;const preElement=child;const codeElement=findCodeElement(preElement.props.children);if(!codeElement)return;const rawLanguage=extractLanguageFromCode(codeElement);if(!rawLanguage)return;const meta=codeElement.props?.["data-meta"];const{lang:codeLanguage,highlights:lineHighlights}=parseLineHighlights(rawLanguage,meta);for(const prefix of SDK_PREFIXES){if(codeLanguage.startsWith(`${prefix}_`)){sdkTypes.add(prefix);break}}if(!languages.includes(codeLanguage)){languages.push(codeLanguage)}const codeContent=codeElement.props.children;codeData.push({language:codeLanguage,content:codeContent,lineHighlights})});return{codeData,languages,sdkTypes,isSinglePlainCommand}},[children,extractLanguageFromCode,findCodeElement]);const resolvedSdk=useMemo(()=>{if(sdkTypes.size===1&&sdk&&!sdkTypes.has(sdk)){return Array.from(sdkTypes)[0]}return sdk},[sdk,sdkTypes]);const showSDKSelector=sdkTypes.has("realtime")||sdkTypes.has("rest");const filteredLanguages=useMemo(()=>{const filtered=!resolvedSdk||!showSDKSelector?[...languages]:languages.filter(lang=>lang.startsWith(`${resolvedSdk}_`));if(languageOrdering&&languageOrdering.length>0){filtered.sort((a,b)=>{const aBase=stripSdkType(a);const bBase=stripSdkType(b);const aIndex=languageOrdering.indexOf(aBase);const bIndex=languageOrdering.indexOf(bBase);if(aIndex!==-1&&bIndex!==-1)return aIndex-bIndex;if(aIndex!==-1)return-1;if(bIndex!==-1)return 1;return 0})}return filtered},[resolvedSdk,showSDKSelector,languages,languageOrdering]);const activeLanguage=useMemo(()=>{if(resolvedSdk==="client"||resolvedSdk==="agent"){const fullLang=`${resolvedSdk}_${lang}`;if(languages.includes(fullLang)){return fullLang}const prefixMatch=languages.find(l=>l.startsWith(`${resolvedSdk}_`));if(prefixMatch)return prefixMatch}if(resolvedSdk&&sdkTypes.has(resolvedSdk)){return`${resolvedSdk}_${lang}`}if(lang)return lang;if(filteredLanguages.length>0)return filteredLanguages[0];return languages[0]},[resolvedSdk,sdkTypes,lang,filteredLanguages,languages]);const requiresApiKeySubstitution=useMemo(()=>{const containsPlaceholder=codeData.some(code=>code?.content.includes("{{API_KEY}}"));return containsPlaceholder&&!!apiKeys&&apiKeys.length>0&&!!selectedApiKey},[codeData,apiKeys,selectedApiKey]);const[isHovering,setIsHovering]=useState(false);const hasOnlyJsonSnippet=useMemo(()=>languages.length===1&&languages[0]==="json",[languages]);const processedChildren=useMemo(()=>{if(!activeLanguage)return[];const targetLanguage=hasOnlyJsonSnippet?"json":activeLanguage;return codeData.filter(code=>{return code?.language===targetLanguage}).map(code=>{if(!code)return null;const cleanLang=hasOnlyJsonSnippet?"json":code.language;const langInfo=getLanguageInfo(cleanLang??"");if(typeof code.content==="string"||typeof code.content==="number"||typeof code.content==="boolean"){let processedContent=String(code.content);if(requiresApiKeySubstitution){processedContent=substituteApiKey(processedContent,selectedApiKey)}if(!langInfo.syntaxHighlighterKey||!cleanLang)return null;return React.createElement(Code,{key:code.language,language:langInfo.syntaxHighlighterKey||cleanLang,snippet:processedContent,additionalCSS:"!bg-neutral-000 text-neutral-1300 dark:!bg-neutral-1300 dark:text-neutral-200 px-6 py-4",showLines:showCodeLines,wrap:wrapCode,lineHighlights:Object.keys(code.lineHighlights).length>0?code.lineHighlights:undefined})}return null})},[activeLanguage,hasOnlyJsonSnippet,codeData,requiresApiKeySubstitution,showCodeLines,wrapCode,selectedApiKey]);const hasSnippetForActiveLanguage=useMemo(()=>{if(!activeLanguage)return false;if(hasOnlyJsonSnippet)return true;return codeData.some(code=>{return code?.language===activeLanguage})},[activeLanguage,hasOnlyJsonSnippet,codeData]);const handleSDKTypeChange=useCallback(type=>{const nextLang=stripSdkType(languages.find(l=>l===`${type}_${stripSdkType(activeLanguage)}`)??languages.find(l=>l.startsWith(`${type}_`))??activeLanguage);if(onChange&&nextLang){onChange(stripSdkType(activeLanguage),type)}},[activeLanguage,languages,onChange]);const handleLanguageChange=useCallback(language=>{if(onChange){onChange(stripSdkType(language),resolvedSdk)}},[onChange,resolvedSdk]);const noSnippetMessage=useMemo(()=>{if(!activeLanguage)return null;const activeLanguageInfo=getLanguageInfo(activeLanguage);return React.createElement("div",{className:"px-16 py-6 ui-text-body2 text-neutral-800 dark:text-neutral-400 text-center flex flex-col gap-3 items-center"},React.createElement(Icon,{name:"icon-gui-exclamation-triangle-outline",color:"text-yellow-600 dark:text-yellow-400",size:"24px"}),React.createElement("p",{className:"ui-text-p3 text-neutral-700 dark:text-neutral-600"},"You're currently viewing the ",activeLanguageInfo.label," docs. There either isn't a ",activeLanguageInfo.label," code sample for this example, or this feature isn't supported in"," ",activeLanguageInfo.label,". Switch language to view this example in a different language, or check which SDKs support this feature."))},[activeLanguage]);const showLanguageSelector=!fixed&&filteredLanguages.length>0;const showFullSelector=filteredLanguages.length>1;const showFixedLanguageLabel=fixed&&activeLanguage;const renderLanguageLabel=(langKey,onClick)=>React.createElement("div",{className:cn("border-b border-neutral-300 dark:border-neutral-1000 h-[2.125rem] inline-flex items-center px-3 w-full",{"rounded-t-lg":!headerRow})},React.createElement("div",{className:cn("inline-flex items-center",onClick&&"cursor-pointer"),...onClick&&{onClick}},React.createElement(Icon,{name:getLanguageInfo(langKey).icon,size:"16px",additionalCSS:"mr-2"}),React.createElement("span",{className:"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500 select-none"},getLanguageInfo(langKey).label)));const renderContent=useMemo(()=>{if(!activeLanguage)return null;if(hasSnippetForActiveLanguage){return processedChildren}return noSnippetMessage},[activeLanguage,hasSnippetForActiveLanguage,processedChildren,noSnippetMessage]);if(isSinglePlainCommand){const plainChild=codeData[0];if(plainChild){const codeContent=plainChild.content;const language=plainChild.language;if(!language||!codeContent)return null;let processedContent=String(codeContent);if(requiresApiKeySubstitution){processedContent=substituteApiKey(processedContent,selectedApiKey)}return React.createElement(PlainCodeView,{content:processedContent,className:className,language:language,icon:language==="shell"?"icon-gui-command-line-outline":null})}}return React.createElement("div",{className:cn("rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 min-h-[3.375rem]",className)},headerRow&&React.createElement("div",{className:"h-[2.375rem] bg-neutral-200 dark:bg-neutral-1100 border-b border-neutral-300 dark:border-neutral-1000 flex items-center py-1 px-3 rounded-t-lg"},React.createElement("div",{className:"flex space-x-1.5"},React.createElement("div",{className:"w-3 h-3 rounded-full bg-orange-500"}),React.createElement("div",{className:"w-3 h-3 rounded-full bg-yellow-500"}),React.createElement("div",{className:"w-3 h-3 rounded-full bg-green-500"})),React.createElement("div",{className:"flex-1 text-center ui-text-p3 font-bold text-neutral-1300 dark:text-neutral-000"},title),React.createElement("div",{className:"w-12"})),showSDKSelector&&React.createElement("div",{className:cn("p-2 border-b border-neutral-300 dark:border-neutral-1000",sdkTypes.size===1&&"p-1",headerRow?"":"rounded-t-lg")},React.createElement("div",{className:"flex gap-1 justify-start"},["realtime","rest"].map(type=>sdkTypes.has(type)&&React.createElement(SegmentedControl,{key:type,onClick:()=>handleSDKTypeChange(type),size:"xs",active:resolvedSdk===type,className:cn("text-[11px] font-semibold px-2 py-1 h-auto",sdkTypes.size===1&&"pointer-events-none bg-neutral-100 dark:bg-neutral-1200 !text-neutral-800 !dark:text-neutral-500",sdkTypes.size>1&&resolvedSdk!==type&&"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-400 dark:active:bg-neutral-900",sdkTypes.size>1&&resolvedSdk===type&&"bg-neutral-000 dark:bg-neutral-1100")},type==="realtime"?"Realtime":"REST")))),showFixedLanguageLabel&&renderLanguageLabel(activeLanguage),showLanguageSelector&&(showFullSelector?React.createElement(LanguageSelector,{languages:filteredLanguages,activeLanguage:activeLanguage,onLanguageChange:handleLanguageChange}):renderLanguageLabel(filteredLanguages[0],()=>handleLanguageChange(filteredLanguages[0]))),React.createElement("div",{ref:codeRef,className:"relative",onMouseEnter:()=>setIsHovering(true),onMouseLeave:()=>setIsHovering(false),onFocus:()=>setIsHovering(true),onBlur:()=>setIsHovering(false)},renderContent,isHovering&&activeLanguage&&hasSnippetForActiveLanguage&&React.createElement(CopyButton,{onCopy:()=>{const text=codeData.find(code=>code.language===activeLanguage)?.content;if(text)navigator.clipboard.writeText(substituteApiKey(text,selectedApiKey,false))}})),requiresApiKeySubstitution&&React.createElement(ApiKeySelector,{apiKeys:apiKeys,selectedApiKey:selectedApiKey,onApiKeyChange:setSelectedApiKey}))};export default CodeSnippet;
 //# sourceMappingURL=CodeSnippet.js.map