@ably/ui 17.7.0 → 17.7.1

package/README.md

@@ -373,8 +373,14 @@ Review apps are automatically cleaned up when the PR is closed or the label is r
 
 ### Running tests
 
-`ably-ui` uses Storybook's `test-runner`, which on push automatically turns all stories into executable tests, underpinned by Jest and Playright. This means that we don't have to explicitly write tests for stories, though we have the ability to write [https://storybook.js.org/docs/writing-stories/play-function](play functions), which allow us to test more detailed interactions. More information on the capabilities of `test-runner` can be found [https://storybook.js.org/docs/writing-tests/test-runner](here).
+`ably-ui` uses [vitest](https://vitest.dev/) with the [Storybook addon for vitest](https://storybook.js.org/docs/writing-tests/integrations/vitest-addon) to automatically turn all stories into executable tests. This means that we don't have to explicitly write tests for stories, though we have the ability to write [play functions](https://storybook.js.org/docs/writing-stories/play-function), which allow us to test more detailed interactions.
 
-Snapshots are also assessed via `test-runner`. To generate new snapshots, run `pnpm test:update-snapshots`.
+The tests run in a browser environment using Playwright, providing comprehensive visual regression testing and interaction testing capabilities.
 
-You can run the tests by either running a dev instance of Storybook locally and then running `pnpm test`, or by pushing a branch to GitHub.
+You can run the tests locally using:
+
+```bash
+pnpm test
+```
+
+This will run all story tests using vitest in a headless browser environment.

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 Icon from"./Icon";import{getLanguageInfo,stripSdkType}from"./CodeSnippet/languages";import LanguageSelector from"./CodeSnippet/LanguageSelector";import ApiKeySelector from"./CodeSnippet/ApiKeySelector";import useCopyToClipboard from"./utils/useCopyToClipboard";import PlainCodeView from"./CodeSnippet/PlainCodeView";import CopyButton from"./CodeSnippet/CopyButton";import TooltipButton from"./CodeSnippet/TooltipButton";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})=>{const codeRef=useRef(null);const{isCopied,copy}=useCopyToClipboard();const[selectedApiKey,setSelectedApiKey]=useState(()=>apiKeys?.[0]?.keys?.[0]?.key??"");useEffect(()=>{if(!selectedApiKey&&apiKeys&&apiKeys.length>0){setSelectedApiKey(apiKeys[0].keys?.[0]?.key)}},[apiKeys,selectedApiKey]);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)}},[codeRef.current,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 codeLanguage=extractLanguageFromCode(codeElement);if(!codeLanguage)return;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})});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]},[lang,resolvedSdk,sdkTypes,filteredLanguages]);const requiresApiKeySubstitution=useMemo(()=>{const containsPlaceholder=codeData.some(code=>code?.content.includes("{{API_KEY}}")&&stripSdkType(code?.language)===lang);return containsPlaceholder&&!!apiKeys&&apiKeys.length>0&&!!selectedApiKey},[codeData,apiKeys,selectedApiKey,lang]);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-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-6 py-4",showLines:showCodeLines})}return null})},[activeLanguage,codeData,hasOnlyJsonSnippet,showCodeLines,apiKeys,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)}},[languages]);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 React.createElement(NoSnippetMessage,null)},[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-200 dark:border-neutral-1100 h-14",headerRow?"":"rounded-t-lg")},React.createElement("div",{className:"flex gap-3 justify-start"},sdkTypes.has("realtime")&&React.createElement(TooltipButton,{tooltip:"Realtime SDK",active:resolvedSdk==="realtime",onClick:()=>handleSDKTypeChange("realtime"),variant:"segmented",size:"sm",alwaysShowLabel:true},"Realtime"),sdkTypes.has("rest")&&React.createElement(TooltipButton,{tooltip:"REST SDK",active:resolvedSdk==="rest",onClick:()=>handleSDKTypeChange("rest"),variant:"segmented",size:"sm",alwaysShowLabel:true},"REST"))),showLanguageSelector&&(showFullSelector?React.createElement(LanguageSelector,{languages:filteredLanguages,activeLanguage:activeLanguage,onLanguageChange:handleLanguageChange}):React.createElement("div",{className:cn("border-b border-neutral-200 dark:border-neutral-1100 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),tabIndex:0},renderContent,isHovering&&activeLanguage&&React.createElement(CopyButton,{onCopy:()=>{const text=codeData.find(code=>code.language===activeLanguage)?.content;if(text)copy(substituteApiKey(text,selectedApiKey,false))},isCopied:isCopied})),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 Icon from"./Icon";import{getLanguageInfo,stripSdkType}from"./CodeSnippet/languages";import LanguageSelector from"./CodeSnippet/LanguageSelector";import ApiKeySelector from"./CodeSnippet/ApiKeySelector";import useCopyToClipboard from"./utils/useCopyToClipboard";import PlainCodeView from"./CodeSnippet/PlainCodeView";import CopyButton from"./CodeSnippet/CopyButton";import TooltipButton from"./CodeSnippet/TooltipButton";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})=>{const codeRef=useRef(null);const{isCopied,copy}=useCopyToClipboard();const[selectedApiKey,setSelectedApiKey]=useState(()=>apiKeys?.[0]?.keys?.[0]?.key??"");useEffect(()=>{if(!selectedApiKey&&apiKeys&&apiKeys.length>0){setSelectedApiKey(apiKeys[0].keys?.[0]?.key)}},[apiKeys,selectedApiKey]);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)}},[codeRef.current,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 codeLanguage=extractLanguageFromCode(codeElement);if(!codeLanguage)return;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})});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]},[lang,resolvedSdk,sdkTypes,filteredLanguages]);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-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-6 py-4",showLines:showCodeLines})}return null})},[activeLanguage,codeData,hasOnlyJsonSnippet,showCodeLines,apiKeys,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)}},[languages]);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 React.createElement(NoSnippetMessage,null)},[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-200 dark:border-neutral-1100 h-14",headerRow?"":"rounded-t-lg")},React.createElement("div",{className:"flex gap-3 justify-start"},sdkTypes.has("realtime")&&React.createElement(TooltipButton,{tooltip:"Realtime SDK",active:resolvedSdk==="realtime",onClick:()=>handleSDKTypeChange("realtime"),variant:"segmented",size:"sm",alwaysShowLabel:true},"Realtime"),sdkTypes.has("rest")&&React.createElement(TooltipButton,{tooltip:"REST SDK",active:resolvedSdk==="rest",onClick:()=>handleSDKTypeChange("rest"),variant:"segmented",size:"sm",alwaysShowLabel:true},"REST"))),showLanguageSelector&&(showFullSelector?React.createElement(LanguageSelector,{languages:filteredLanguages,activeLanguage:activeLanguage,onLanguageChange:handleLanguageChange}):React.createElement("div",{className:cn("border-b border-neutral-200 dark:border-neutral-1100 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),tabIndex:0},renderContent,isHovering&&activeLanguage&&React.createElement(CopyButton,{onCopy:()=>{const text=codeData.find(code=>code.language===activeLanguage)?.content;if(text)copy(substituteApiKey(text,selectedApiKey,false))},isCopied:isCopied})),requiresApiKeySubstitution&&React.createElement(ApiKeySelector,{apiKeys:apiKeys,selectedApiKey:selectedApiKey,onApiKeyChange:setSelectedApiKey}))};export default CodeSnippet;
 //# sourceMappingURL=CodeSnippet.js.map

package/core/CodeSnippet.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/CodeSnippet.tsx"],"sourcesContent":["import React, {\n  useState,\n  useEffect,\n  Children,\n  isValidElement,\n  useRef,\n  useCallback,\n  useMemo,\n} from \"react\";\nimport Code from \"./Code\";\nimport cn from \"./utils/cn\";\nimport Icon from \"./Icon\";\nimport { getLanguageInfo, stripSdkType } from \"./CodeSnippet/languages\";\nimport LanguageSelector from \"./CodeSnippet/LanguageSelector\";\nimport ApiKeySelector from \"./CodeSnippet/ApiKeySelector\";\nimport useCopyToClipboard from \"./utils/useCopyToClipboard\";\nimport PlainCodeView from \"./CodeSnippet/PlainCodeView\";\nimport CopyButton from \"./CodeSnippet/CopyButton\";\nimport TooltipButton from \"./CodeSnippet/TooltipButton\";\n\n// Define SDK type\nexport type SDKType = \"realtime\" | \"rest\" | null;\n\n// Define API key types\nexport type ApiKeysItem = {\n  app: string;\n  keys: { name: string; key: string }[];\n};\n\nexport type CodeSnippetProps = {\n  /**\n   * If true, hides the language selector row completely\n   */\n  fixed?: boolean;\n  /**\n   * If true, renders a macOS-style window header with buttons and title\n   */\n  headerRow?: boolean;\n  /**\n   * Title to display in the header row (when headerRow is true)\n   */\n  title?: string;\n  /**\n   * Children elements with lang attribute\n   */\n  children: React.ReactNode;\n  /**\n   * Additional CSS classes\n   */\n  className?: string;\n  /**\n   * Default language to display. If not found in available languages, first available is used.\n   * If found in languages but no matching snippet exists, a message is displayed.\n   */\n  lang: string | null;\n  /**\n   * Callback fired when the active language changes\n   */\n  onChange?: (language: string, sdk?: SDKType) => void;\n  /**\n   * List of API keys to display in a dropdown\n   */\n  apiKeys?: ApiKeysItem[];\n  /**\n   * Default SDK type to use for the code snippet\n   */\n  sdk?: SDKType;\n  /**\n   * Whether to show line numbers in code snippets\n   */\n  showCodeLines?: boolean;\n  /**\n   * Defines the order in which languages should be displayed.\n   * Languages not in this array will be shown after those that are included.\n   */\n  languageOrdering?: string[];\n};\n\n// Substitution function for API key placeholders\nconst substituteApiKey = (\n  content: string,\n  apiKey: string,\n  mask = true,\n): string => {\n  return content.replace(\n    /\\{\\{API_KEY\\}\\}/g,\n    mask ? `${apiKey.split(\":\")[0]}:*****` : apiKey,\n  );\n};\n\n/**\n * CodeSnippet component that displays code with language switching capability\n */\nconst CodeSnippet: React.FC<CodeSnippetProps> = ({\n  fixed = false,\n  headerRow = false,\n  title = \"Code\",\n  children,\n  className,\n  lang,\n  onChange,\n  apiKeys,\n  sdk,\n  showCodeLines = true,\n  languageOrdering,\n}) => {\n  const codeRef = useRef<HTMLDivElement>(null);\n  const { isCopied, copy } = useCopyToClipboard();\n\n  const [selectedApiKey, setSelectedApiKey] = useState<string>(\n    () => apiKeys?.[0]?.keys?.[0]?.key ?? \"\",\n  );\n\n  useEffect(() => {\n    if (!selectedApiKey && apiKeys && apiKeys.length > 0) {\n      setSelectedApiKey(apiKeys[0].keys?.[0]?.key);\n    }\n  }, [apiKeys, selectedApiKey]);\n\n  useEffect(() => {\n    const element = codeRef.current;\n    if (!element) return;\n\n    // Detects the key masking via substituteApiKey (i.e. \"abcde:*****\") and replaces it with the actual API key\n    const unmaskRenderedApiKey = (content: string, apiKey: string): string => {\n      return content.replace(/(['\"]?)([^:'\"]+):\\*{5}\\1/g, `$1${apiKey}$1`);\n    };\n\n    const handleCopy = (event: ClipboardEvent) => {\n      const selection = window.getSelection();\n      if (!selection || selection.rangeCount === 0) return;\n\n      const selectedText = selection.toString();\n      if (!selectedText) return;\n\n      // Check if the selection is within our element\n      const range = selection.getRangeAt(0);\n      if (!element.contains(range.commonAncestorContainer)) return;\n\n      const modifiedText = unmaskRenderedApiKey(selectedText, selectedApiKey);\n\n      event.clipboardData?.setData(\"text/plain\", modifiedText);\n      event.preventDefault();\n    };\n\n    document.addEventListener(\"copy\", handleCopy);\n\n    return () => {\n      document.removeEventListener(\"copy\", handleCopy);\n    };\n  }, [codeRef.current, selectedApiKey]);\n\n  const extractLanguageFromCode = useCallback(\n    (codeElement: React.ReactElement | null): string | null => {\n      if (!codeElement || !codeElement.props.className) return null;\n\n      const classNames = codeElement.props.className.split(\" \");\n      const langClass = classNames.find((cls: string) =>\n        cls.startsWith(\"language-\"),\n      );\n      if (!langClass) return null;\n\n      return langClass.substring(9); // Remove \"language-\" prefix\n    },\n    [],\n  );\n\n  const { codeData, languages, sdkTypes, isSinglePlainCommand } =\n    useMemo(() => {\n      const childrenArray = Children.toArray(children);\n      const languages: string[] = [];\n      const sdkTypes = new Set<SDKType>();\n      const codeData: { language: string; content: string }[] = [];\n\n      const isSinglePlainCommand =\n        childrenArray.length === 1 &&\n        [\"language-shell\", \"language-text\"].some(\n          (lang) =>\n            isValidElement(childrenArray[0]) &&\n            isValidElement(childrenArray[0].props.children) &&\n            childrenArray[0].props.children.props.className?.includes(lang),\n        );\n\n      childrenArray.forEach((child) => {\n        if (!isValidElement(child)) return;\n\n        const preElement = child;\n        const codeElement = isValidElement(preElement.props.children)\n          ? preElement.props.children\n          : null;\n\n        if (!codeElement) return;\n\n        const codeLanguage = extractLanguageFromCode(codeElement);\n\n        if (!codeLanguage) return;\n\n        if (codeLanguage.startsWith(\"realtime_\")) {\n          sdkTypes.add(\"realtime\");\n        } else if (codeLanguage.startsWith(\"rest_\")) {\n          sdkTypes.add(\"rest\");\n        }\n\n        if (!languages.includes(codeLanguage)) {\n          languages.push(codeLanguage);\n        }\n\n        const codeContent = codeElement.props.children;\n        codeData.push({ language: codeLanguage, content: codeContent });\n      });\n\n      return {\n        codeData,\n        languages,\n        sdkTypes,\n        isSinglePlainCommand,\n      };\n    }, [children, extractLanguageFromCode]);\n\n  const resolvedSdk: SDKType = useMemo(() => {\n    if (sdkTypes.size === 1 && sdk && !sdkTypes.has(sdk)) {\n      return Array.from(sdkTypes)[0];\n    }\n    return sdk ?? null;\n  }, [sdk, sdkTypes]);\n\n  const showSDKSelector = sdkTypes.size > 0;\n\n  const filteredLanguages = useMemo(() => {\n    const filtered =\n      !resolvedSdk || !showSDKSelector\n        ? [...languages]\n        : languages.filter((lang) => lang.startsWith(`${resolvedSdk}_`));\n\n    // Apply custom ordering if provided\n    if (languageOrdering && languageOrdering.length > 0) {\n      filtered.sort((a, b) => {\n        const aBase = stripSdkType(a);\n        const bBase = stripSdkType(b);\n\n        const aIndex = languageOrdering.indexOf(aBase);\n        const bIndex = languageOrdering.indexOf(bBase);\n\n        if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex;\n        if (aIndex !== -1) return -1;\n        if (bIndex !== -1) return 1;\n        return 0;\n      });\n    }\n\n    return filtered;\n  }, [resolvedSdk, showSDKSelector, languages, languageOrdering]);\n\n  const activeLanguage = useMemo(() => {\n    if (resolvedSdk && sdkTypes.has(resolvedSdk)) {\n      return `${resolvedSdk}_${lang}`;\n    }\n\n    if (lang) return lang;\n\n    if (filteredLanguages.length > 0) return filteredLanguages[0];\n\n    return languages[0];\n  }, [lang, resolvedSdk, sdkTypes, filteredLanguages]);\n\n  const requiresApiKeySubstitution = useMemo(() => {\n    const containsPlaceholder = codeData.some(\n      (code) =>\n        code?.content.includes(\"{{API_KEY}}\") &&\n        stripSdkType(code?.language) === lang,\n    );\n\n    return (\n      containsPlaceholder && !!apiKeys && apiKeys.length > 0 && !!selectedApiKey\n    );\n  }, [codeData, apiKeys, selectedApiKey, lang]);\n\n  const [isHovering, setIsHovering] = useState(false);\n\n  const hasOnlyJsonSnippet = useMemo(\n    () => languages.length === 1 && languages[0] === \"json\",\n    [languages],\n  );\n\n  const processedChildren = useMemo(() => {\n    if (!activeLanguage) return [];\n\n    const targetLanguage = hasOnlyJsonSnippet ? \"json\" : activeLanguage;\n\n    return codeData\n      .filter((code) => {\n        return code?.language === targetLanguage;\n      })\n      .map((code) => {\n        if (!code) return null;\n\n        const cleanLang = hasOnlyJsonSnippet ? \"json\" : code.language;\n        const langInfo = getLanguageInfo(cleanLang ?? \"\");\n\n        if (\n          typeof code.content === \"string\" ||\n          typeof code.content === \"number\" ||\n          typeof code.content === \"boolean\"\n        ) {\n          // Apply API key substitution if apiKeys are provided\n          let processedContent = String(code.content);\n          if (requiresApiKeySubstitution) {\n            processedContent = substituteApiKey(\n              processedContent,\n              selectedApiKey,\n            );\n          }\n\n          if (!langInfo.syntaxHighlighterKey || !cleanLang) return null;\n\n          return (\n            <Code\n              key={code.language}\n              language={langInfo.syntaxHighlighterKey || cleanLang}\n              snippet={processedContent}\n              additionalCSS=\"bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-6 py-4\"\n              showLines={showCodeLines}\n            />\n          );\n        }\n\n        return null;\n      });\n  }, [\n    activeLanguage,\n    codeData,\n    hasOnlyJsonSnippet,\n    showCodeLines,\n    apiKeys,\n    selectedApiKey,\n  ]);\n\n  const hasSnippetForActiveLanguage = useMemo(() => {\n    if (!activeLanguage) return false;\n    if (hasOnlyJsonSnippet) return true;\n\n    return codeData.some((code) => {\n      return code?.language === activeLanguage;\n    });\n  }, [activeLanguage, hasOnlyJsonSnippet, codeData]);\n\n  const handleSDKTypeChange = useCallback(\n    (type: SDKType) => {\n      const nextLang = stripSdkType(\n        languages.find(\n          (l) => l === `${type}_${stripSdkType(activeLanguage)}`,\n        ) ??\n          languages.find((l) => l.startsWith(`${type}_`)) ??\n          activeLanguage,\n      );\n\n      if (onChange && nextLang) {\n        onChange(stripSdkType(activeLanguage), type);\n      }\n    },\n    [languages],\n  );\n\n  const handleLanguageChange = useCallback(\n    (language: string) => {\n      if (onChange) {\n        onChange(stripSdkType(language), resolvedSdk);\n      }\n    },\n    [onChange, resolvedSdk],\n  );\n\n  const NoSnippetMessage = useMemo(() => {\n    if (!activeLanguage) return () => null;\n\n    const activeLanguageInfo = getLanguageInfo(activeLanguage);\n\n    return () => (\n      <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\">\n        <Icon\n          name=\"icon-gui-exclamation-triangle-outline\"\n          color=\"text-yellow-600 dark:text-yellow-400\"\n          size=\"24px\"\n        />\n        <p className=\"ui-text-p3 text-neutral-700 dark:text-neutral-600\">\n          You&apos;re currently viewing the {activeLanguageInfo.label} docs.\n          There either isn&apos;t a {activeLanguageInfo.label} code sample for\n          this example, or this feature isn&apos;t supported in{\" \"}\n          {activeLanguageInfo.label}. Switch language to view this example in a\n          different language, or check which SDKs support this feature.\n        </p>\n      </div>\n    );\n  }, [activeLanguage]);\n\n  const showLanguageSelector = !fixed && filteredLanguages.length > 0;\n  const showFullSelector = filteredLanguages.length > 1;\n\n  const renderContent = useMemo(() => {\n    if (!activeLanguage) return null;\n\n    if (hasSnippetForActiveLanguage) {\n      return processedChildren;\n    }\n\n    return <NoSnippetMessage />;\n  }, [\n    activeLanguage,\n    hasSnippetForActiveLanguage,\n    processedChildren,\n    NoSnippetMessage,\n  ]);\n\n  // Render special case for plain commands (shell or text)\n  if (isSinglePlainCommand) {\n    const plainChild = codeData[0];\n    if (plainChild) {\n      const codeContent = plainChild.content;\n      const language = plainChild.language;\n\n      if (!language || !codeContent) return null;\n\n      // Apply API key substitution if apiKeys are provided\n      let processedContent = String(codeContent);\n      if (requiresApiKeySubstitution) {\n        processedContent = substituteApiKey(processedContent, selectedApiKey);\n      }\n\n      return (\n        <PlainCodeView\n          content={processedContent}\n          className={className}\n          language={language}\n          icon={language === \"shell\" ? \"icon-gui-command-line-outline\" : null}\n        />\n      );\n    }\n  }\n\n  return (\n    <div\n      className={cn(\n        \"rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 min-h-[3.375rem]\",\n        className,\n      )}\n    >\n      {headerRow && (\n        <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\">\n          <div className=\"flex space-x-1.5\">\n            <div className=\"w-3 h-3 rounded-full bg-orange-500\"></div>\n            <div className=\"w-3 h-3 rounded-full bg-yellow-500\"></div>\n            <div className=\"w-3 h-3 rounded-full bg-green-500\"></div>\n          </div>\n\n          <div className=\"flex-1 text-center ui-text-p3 font-bold text-neutral-1300 dark:text-neutral-000\">\n            {title}\n          </div>\n\n          {/* Empty div for balance */}\n          <div className=\"w-12\"></div>\n        </div>\n      )}\n      {showSDKSelector && (\n        <div\n          className={cn(\n            \"p-2 border-b border-neutral-200 dark:border-neutral-1100 h-14\",\n            headerRow ? \"\" : \"rounded-t-lg\",\n          )}\n        >\n          <div className=\"flex gap-3 justify-start\">\n            {sdkTypes.has(\"realtime\") && (\n              <TooltipButton\n                tooltip=\"Realtime SDK\"\n                active={resolvedSdk === \"realtime\"}\n                onClick={() => handleSDKTypeChange(\"realtime\")}\n                variant=\"segmented\"\n                size=\"sm\"\n                alwaysShowLabel={true}\n              >\n                Realtime\n              </TooltipButton>\n            )}\n\n            {sdkTypes.has(\"rest\") && (\n              <TooltipButton\n                tooltip=\"REST SDK\"\n                active={resolvedSdk === \"rest\"}\n                onClick={() => handleSDKTypeChange(\"rest\")}\n                variant=\"segmented\"\n                size=\"sm\"\n                alwaysShowLabel={true}\n              >\n                REST\n              </TooltipButton>\n            )}\n          </div>\n        </div>\n      )}\n\n      {showLanguageSelector &&\n        (showFullSelector ? (\n          <LanguageSelector\n            languages={filteredLanguages}\n            activeLanguage={activeLanguage}\n            onLanguageChange={handleLanguageChange}\n          />\n        ) : (\n          <div\n            className={cn(\n              \"border-b border-neutral-200 dark:border-neutral-1100 h-[2.125rem] inline-flex items-center px-3 w-full\",\n              { \"rounded-t-lg\": !headerRow },\n            )}\n          >\n            {filteredLanguages.length > 0 && (\n              <div\n                className={cn(\"inline-flex items-center\", {\n                  \"cursor-pointer\": filteredLanguages.length > 0,\n                })}\n                {...(filteredLanguages.length > 0 && {\n                  onClick: () => handleLanguageChange(filteredLanguages[0]),\n                })}\n              >\n                <Icon\n                  name={getLanguageInfo(filteredLanguages[0]).icon}\n                  size=\"16px\"\n                  additionalCSS=\"mr-2\"\n                />\n                <span className=\"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500 select-none\">\n                  {getLanguageInfo(filteredLanguages[0]).label}\n                </span>\n              </div>\n            )}\n          </div>\n        ))}\n      <div\n        ref={codeRef}\n        className=\"relative\"\n        onMouseEnter={() => setIsHovering(true)}\n        onMouseLeave={() => setIsHovering(false)}\n        onFocus={() => setIsHovering(true)}\n        onBlur={() => setIsHovering(false)}\n        tabIndex={0}\n      >\n        {renderContent}\n        {isHovering && activeLanguage && (\n          <CopyButton\n            onCopy={() => {\n              const text = codeData.find(\n                (code) => code.language === activeLanguage,\n              )?.content;\n              if (text) copy(substituteApiKey(text, selectedApiKey, false));\n            }}\n            isCopied={isCopied}\n          />\n        )}\n      </div>\n      {requiresApiKeySubstitution && (\n        <ApiKeySelector\n          apiKeys={apiKeys}\n          selectedApiKey={selectedApiKey}\n          onApiKeyChange={setSelectedApiKey}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default CodeSnippet;\n"],"names":["React","useState","useEffect","Children","isValidElement","useRef","useCallback","useMemo","Code","cn","Icon","getLanguageInfo","stripSdkType","LanguageSelector","ApiKeySelector","useCopyToClipboard","PlainCodeView","CopyButton","TooltipButton","substituteApiKey","content","apiKey","mask","replace","split","CodeSnippet","fixed","headerRow","title","children","className","lang","onChange","apiKeys","sdk","showCodeLines","languageOrdering","codeRef","isCopied","copy","selectedApiKey","setSelectedApiKey","keys","key","length","element","current","unmaskRenderedApiKey","handleCopy","event","selection","window","getSelection","rangeCount","selectedText","toString","range","getRangeAt","contains","commonAncestorContainer","modifiedText","clipboardData","setData","preventDefault","document","addEventListener","removeEventListener","extractLanguageFromCode","codeElement","props","classNames","langClass","find","cls","startsWith","substring","codeData","languages","sdkTypes","isSinglePlainCommand","childrenArray","toArray","Set","some","includes","forEach","child","preElement","codeLanguage","add","push","codeContent","language","resolvedSdk","size","has","Array","from","showSDKSelector","filteredLanguages","filtered","filter","sort","a","b","aBase","bBase","aIndex","indexOf","bIndex","activeLanguage","requiresApiKeySubstitution","containsPlaceholder","code","isHovering","setIsHovering","hasOnlyJsonSnippet","processedChildren","targetLanguage","map","cleanLang","langInfo","processedContent","String","syntaxHighlighterKey","snippet","additionalCSS","showLines","hasSnippetForActiveLanguage","handleSDKTypeChange","type","nextLang","l","handleLanguageChange","NoSnippetMessage","activeLanguageInfo","div","name","color","p","label","showLanguageSelector","showFullSelector","renderContent","plainChild","icon","tooltip","active","onClick","variant","alwaysShowLabel","onLanguageChange","span","ref","onMouseEnter","onMouseLeave","onFocus","onBlur","tabIndex","onCopy","text","onApiKeyChange"],"mappings":"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"}
+{"version":3,"sources":["../../src/core/CodeSnippet.tsx"],"sourcesContent":["import React, {\n  useState,\n  useEffect,\n  Children,\n  isValidElement,\n  useRef,\n  useCallback,\n  useMemo,\n} from \"react\";\nimport Code from \"./Code\";\nimport cn from \"./utils/cn\";\nimport Icon from \"./Icon\";\nimport { getLanguageInfo, stripSdkType } from \"./CodeSnippet/languages\";\nimport LanguageSelector from \"./CodeSnippet/LanguageSelector\";\nimport ApiKeySelector from \"./CodeSnippet/ApiKeySelector\";\nimport useCopyToClipboard from \"./utils/useCopyToClipboard\";\nimport PlainCodeView from \"./CodeSnippet/PlainCodeView\";\nimport CopyButton from \"./CodeSnippet/CopyButton\";\nimport TooltipButton from \"./CodeSnippet/TooltipButton\";\n\n// Define SDK type\nexport type SDKType = \"realtime\" | \"rest\" | null;\n\n// Define API key types\nexport type ApiKeysItem = {\n  app: string;\n  keys: { name: string; key: string }[];\n};\n\nexport type CodeSnippetProps = {\n  /**\n   * If true, hides the language selector row completely\n   */\n  fixed?: boolean;\n  /**\n   * If true, renders a macOS-style window header with buttons and title\n   */\n  headerRow?: boolean;\n  /**\n   * Title to display in the header row (when headerRow is true)\n   */\n  title?: string;\n  /**\n   * Children elements with lang attribute\n   */\n  children: React.ReactNode;\n  /**\n   * Additional CSS classes\n   */\n  className?: string;\n  /**\n   * Default language to display. If not found in available languages, first available is used.\n   * If found in languages but no matching snippet exists, a message is displayed.\n   */\n  lang: string | null;\n  /**\n   * Callback fired when the active language changes\n   */\n  onChange?: (language: string, sdk?: SDKType) => void;\n  /**\n   * List of API keys to display in a dropdown\n   */\n  apiKeys?: ApiKeysItem[];\n  /**\n   * Default SDK type to use for the code snippet\n   */\n  sdk?: SDKType;\n  /**\n   * Whether to show line numbers in code snippets\n   */\n  showCodeLines?: boolean;\n  /**\n   * Defines the order in which languages should be displayed.\n   * Languages not in this array will be shown after those that are included.\n   */\n  languageOrdering?: string[];\n};\n\n// Substitution function for API key placeholders\nconst substituteApiKey = (\n  content: string,\n  apiKey: string,\n  mask = true,\n): string => {\n  return content.replace(\n    /\\{\\{API_KEY\\}\\}/g,\n    mask ? `${apiKey.split(\":\")[0]}:*****` : apiKey,\n  );\n};\n\n/**\n * CodeSnippet component that displays code with language switching capability\n */\nconst CodeSnippet: React.FC<CodeSnippetProps> = ({\n  fixed = false,\n  headerRow = false,\n  title = \"Code\",\n  children,\n  className,\n  lang,\n  onChange,\n  apiKeys,\n  sdk,\n  showCodeLines = true,\n  languageOrdering,\n}) => {\n  const codeRef = useRef<HTMLDivElement>(null);\n  const { isCopied, copy } = useCopyToClipboard();\n\n  const [selectedApiKey, setSelectedApiKey] = useState<string>(\n    () => apiKeys?.[0]?.keys?.[0]?.key ?? \"\",\n  );\n\n  useEffect(() => {\n    if (!selectedApiKey && apiKeys && apiKeys.length > 0) {\n      setSelectedApiKey(apiKeys[0].keys?.[0]?.key);\n    }\n  }, [apiKeys, selectedApiKey]);\n\n  useEffect(() => {\n    const element = codeRef.current;\n    if (!element) return;\n\n    // Detects the key masking via substituteApiKey (i.e. \"abcde:*****\") and replaces it with the actual API key\n    const unmaskRenderedApiKey = (content: string, apiKey: string): string => {\n      return content.replace(/(['\"]?)([^:'\"]+):\\*{5}\\1/g, `$1${apiKey}$1`);\n    };\n\n    const handleCopy = (event: ClipboardEvent) => {\n      const selection = window.getSelection();\n      if (!selection || selection.rangeCount === 0) return;\n\n      const selectedText = selection.toString();\n      if (!selectedText) return;\n\n      // Check if the selection is within our element\n      const range = selection.getRangeAt(0);\n      if (!element.contains(range.commonAncestorContainer)) return;\n\n      const modifiedText = unmaskRenderedApiKey(selectedText, selectedApiKey);\n\n      event.clipboardData?.setData(\"text/plain\", modifiedText);\n      event.preventDefault();\n    };\n\n    document.addEventListener(\"copy\", handleCopy);\n\n    return () => {\n      document.removeEventListener(\"copy\", handleCopy);\n    };\n  }, [codeRef.current, selectedApiKey]);\n\n  const extractLanguageFromCode = useCallback(\n    (codeElement: React.ReactElement | null): string | null => {\n      if (!codeElement || !codeElement.props.className) return null;\n\n      const classNames = codeElement.props.className.split(\" \");\n      const langClass = classNames.find((cls: string) =>\n        cls.startsWith(\"language-\"),\n      );\n      if (!langClass) return null;\n\n      return langClass.substring(9); // Remove \"language-\" prefix\n    },\n    [],\n  );\n\n  const { codeData, languages, sdkTypes, isSinglePlainCommand } =\n    useMemo(() => {\n      const childrenArray = Children.toArray(children);\n      const languages: string[] = [];\n      const sdkTypes = new Set<SDKType>();\n      const codeData: { language: string; content: string }[] = [];\n\n      const isSinglePlainCommand =\n        childrenArray.length === 1 &&\n        [\"language-shell\", \"language-text\"].some(\n          (lang) =>\n            isValidElement(childrenArray[0]) &&\n            isValidElement(childrenArray[0].props.children) &&\n            childrenArray[0].props.children.props.className?.includes(lang),\n        );\n\n      childrenArray.forEach((child) => {\n        if (!isValidElement(child)) return;\n\n        const preElement = child;\n        const codeElement = isValidElement(preElement.props.children)\n          ? preElement.props.children\n          : null;\n\n        if (!codeElement) return;\n\n        const codeLanguage = extractLanguageFromCode(codeElement);\n\n        if (!codeLanguage) return;\n\n        if (codeLanguage.startsWith(\"realtime_\")) {\n          sdkTypes.add(\"realtime\");\n        } else if (codeLanguage.startsWith(\"rest_\")) {\n          sdkTypes.add(\"rest\");\n        }\n\n        if (!languages.includes(codeLanguage)) {\n          languages.push(codeLanguage);\n        }\n\n        const codeContent = codeElement.props.children;\n        codeData.push({ language: codeLanguage, content: codeContent });\n      });\n\n      return {\n        codeData,\n        languages,\n        sdkTypes,\n        isSinglePlainCommand,\n      };\n    }, [children, extractLanguageFromCode]);\n\n  const resolvedSdk: SDKType = useMemo(() => {\n    if (sdkTypes.size === 1 && sdk && !sdkTypes.has(sdk)) {\n      return Array.from(sdkTypes)[0];\n    }\n    return sdk ?? null;\n  }, [sdk, sdkTypes]);\n\n  const showSDKSelector = sdkTypes.size > 0;\n\n  const filteredLanguages = useMemo(() => {\n    const filtered =\n      !resolvedSdk || !showSDKSelector\n        ? [...languages]\n        : languages.filter((lang) => lang.startsWith(`${resolvedSdk}_`));\n\n    // Apply custom ordering if provided\n    if (languageOrdering && languageOrdering.length > 0) {\n      filtered.sort((a, b) => {\n        const aBase = stripSdkType(a);\n        const bBase = stripSdkType(b);\n\n        const aIndex = languageOrdering.indexOf(aBase);\n        const bIndex = languageOrdering.indexOf(bBase);\n\n        if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex;\n        if (aIndex !== -1) return -1;\n        if (bIndex !== -1) return 1;\n        return 0;\n      });\n    }\n\n    return filtered;\n  }, [resolvedSdk, showSDKSelector, languages, languageOrdering]);\n\n  const activeLanguage = useMemo(() => {\n    if (resolvedSdk && sdkTypes.has(resolvedSdk)) {\n      return `${resolvedSdk}_${lang}`;\n    }\n\n    if (lang) return lang;\n\n    if (filteredLanguages.length > 0) return filteredLanguages[0];\n\n    return languages[0];\n  }, [lang, resolvedSdk, sdkTypes, filteredLanguages]);\n\n  const requiresApiKeySubstitution = useMemo(() => {\n    const containsPlaceholder = codeData.some((code) =>\n      code?.content.includes(\"{{API_KEY}}\"),\n    );\n\n    return (\n      containsPlaceholder && !!apiKeys && apiKeys.length > 0 && !!selectedApiKey\n    );\n  }, [codeData, apiKeys, selectedApiKey]);\n\n  const [isHovering, setIsHovering] = useState(false);\n\n  const hasOnlyJsonSnippet = useMemo(\n    () => languages.length === 1 && languages[0] === \"json\",\n    [languages],\n  );\n\n  const processedChildren = useMemo(() => {\n    if (!activeLanguage) return [];\n\n    const targetLanguage = hasOnlyJsonSnippet ? \"json\" : activeLanguage;\n\n    return codeData\n      .filter((code) => {\n        return code?.language === targetLanguage;\n      })\n      .map((code) => {\n        if (!code) return null;\n\n        const cleanLang = hasOnlyJsonSnippet ? \"json\" : code.language;\n        const langInfo = getLanguageInfo(cleanLang ?? \"\");\n\n        if (\n          typeof code.content === \"string\" ||\n          typeof code.content === \"number\" ||\n          typeof code.content === \"boolean\"\n        ) {\n          // Apply API key substitution if apiKeys are provided\n          let processedContent = String(code.content);\n          if (requiresApiKeySubstitution) {\n            processedContent = substituteApiKey(\n              processedContent,\n              selectedApiKey,\n            );\n          }\n\n          if (!langInfo.syntaxHighlighterKey || !cleanLang) return null;\n\n          return (\n            <Code\n              key={code.language}\n              language={langInfo.syntaxHighlighterKey || cleanLang}\n              snippet={processedContent}\n              additionalCSS=\"bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-6 py-4\"\n              showLines={showCodeLines}\n            />\n          );\n        }\n\n        return null;\n      });\n  }, [\n    activeLanguage,\n    codeData,\n    hasOnlyJsonSnippet,\n    showCodeLines,\n    apiKeys,\n    selectedApiKey,\n  ]);\n\n  const hasSnippetForActiveLanguage = useMemo(() => {\n    if (!activeLanguage) return false;\n    if (hasOnlyJsonSnippet) return true;\n\n    return codeData.some((code) => {\n      return code?.language === activeLanguage;\n    });\n  }, [activeLanguage, hasOnlyJsonSnippet, codeData]);\n\n  const handleSDKTypeChange = useCallback(\n    (type: SDKType) => {\n      const nextLang = stripSdkType(\n        languages.find(\n          (l) => l === `${type}_${stripSdkType(activeLanguage)}`,\n        ) ??\n          languages.find((l) => l.startsWith(`${type}_`)) ??\n          activeLanguage,\n      );\n\n      if (onChange && nextLang) {\n        onChange(stripSdkType(activeLanguage), type);\n      }\n    },\n    [languages],\n  );\n\n  const handleLanguageChange = useCallback(\n    (language: string) => {\n      if (onChange) {\n        onChange(stripSdkType(language), resolvedSdk);\n      }\n    },\n    [onChange, resolvedSdk],\n  );\n\n  const NoSnippetMessage = useMemo(() => {\n    if (!activeLanguage) return () => null;\n\n    const activeLanguageInfo = getLanguageInfo(activeLanguage);\n\n    return () => (\n      <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\">\n        <Icon\n          name=\"icon-gui-exclamation-triangle-outline\"\n          color=\"text-yellow-600 dark:text-yellow-400\"\n          size=\"24px\"\n        />\n        <p className=\"ui-text-p3 text-neutral-700 dark:text-neutral-600\">\n          You&apos;re currently viewing the {activeLanguageInfo.label} docs.\n          There either isn&apos;t a {activeLanguageInfo.label} code sample for\n          this example, or this feature isn&apos;t supported in{\" \"}\n          {activeLanguageInfo.label}. Switch language to view this example in a\n          different language, or check which SDKs support this feature.\n        </p>\n      </div>\n    );\n  }, [activeLanguage]);\n\n  const showLanguageSelector = !fixed && filteredLanguages.length > 0;\n  const showFullSelector = filteredLanguages.length > 1;\n\n  const renderContent = useMemo(() => {\n    if (!activeLanguage) return null;\n\n    if (hasSnippetForActiveLanguage) {\n      return processedChildren;\n    }\n\n    return <NoSnippetMessage />;\n  }, [\n    activeLanguage,\n    hasSnippetForActiveLanguage,\n    processedChildren,\n    NoSnippetMessage,\n  ]);\n\n  // Render special case for plain commands (shell or text)\n  if (isSinglePlainCommand) {\n    const plainChild = codeData[0];\n    if (plainChild) {\n      const codeContent = plainChild.content;\n      const language = plainChild.language;\n\n      if (!language || !codeContent) return null;\n\n      // Apply API key substitution if apiKeys are provided\n      let processedContent = String(codeContent);\n      if (requiresApiKeySubstitution) {\n        processedContent = substituteApiKey(processedContent, selectedApiKey);\n      }\n\n      return (\n        <PlainCodeView\n          content={processedContent}\n          className={className}\n          language={language}\n          icon={language === \"shell\" ? \"icon-gui-command-line-outline\" : null}\n        />\n      );\n    }\n  }\n\n  return (\n    <div\n      className={cn(\n        \"rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 min-h-[3.375rem]\",\n        className,\n      )}\n    >\n      {headerRow && (\n        <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\">\n          <div className=\"flex space-x-1.5\">\n            <div className=\"w-3 h-3 rounded-full bg-orange-500\"></div>\n            <div className=\"w-3 h-3 rounded-full bg-yellow-500\"></div>\n            <div className=\"w-3 h-3 rounded-full bg-green-500\"></div>\n          </div>\n\n          <div className=\"flex-1 text-center ui-text-p3 font-bold text-neutral-1300 dark:text-neutral-000\">\n            {title}\n          </div>\n\n          {/* Empty div for balance */}\n          <div className=\"w-12\"></div>\n        </div>\n      )}\n      {showSDKSelector && (\n        <div\n          className={cn(\n            \"p-2 border-b border-neutral-200 dark:border-neutral-1100 h-14\",\n            headerRow ? \"\" : \"rounded-t-lg\",\n          )}\n        >\n          <div className=\"flex gap-3 justify-start\">\n            {sdkTypes.has(\"realtime\") && (\n              <TooltipButton\n                tooltip=\"Realtime SDK\"\n                active={resolvedSdk === \"realtime\"}\n                onClick={() => handleSDKTypeChange(\"realtime\")}\n                variant=\"segmented\"\n                size=\"sm\"\n                alwaysShowLabel={true}\n              >\n                Realtime\n              </TooltipButton>\n            )}\n\n            {sdkTypes.has(\"rest\") && (\n              <TooltipButton\n                tooltip=\"REST SDK\"\n                active={resolvedSdk === \"rest\"}\n                onClick={() => handleSDKTypeChange(\"rest\")}\n                variant=\"segmented\"\n                size=\"sm\"\n                alwaysShowLabel={true}\n              >\n                REST\n              </TooltipButton>\n            )}\n          </div>\n        </div>\n      )}\n\n      {showLanguageSelector &&\n        (showFullSelector ? (\n          <LanguageSelector\n            languages={filteredLanguages}\n            activeLanguage={activeLanguage}\n            onLanguageChange={handleLanguageChange}\n          />\n        ) : (\n          <div\n            className={cn(\n              \"border-b border-neutral-200 dark:border-neutral-1100 h-[2.125rem] inline-flex items-center px-3 w-full\",\n              { \"rounded-t-lg\": !headerRow },\n            )}\n          >\n            {filteredLanguages.length > 0 && (\n              <div\n                className={cn(\"inline-flex items-center\", {\n                  \"cursor-pointer\": filteredLanguages.length > 0,\n                })}\n                {...(filteredLanguages.length > 0 && {\n                  onClick: () => handleLanguageChange(filteredLanguages[0]),\n                })}\n              >\n                <Icon\n                  name={getLanguageInfo(filteredLanguages[0]).icon}\n                  size=\"16px\"\n                  additionalCSS=\"mr-2\"\n                />\n                <span className=\"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500 select-none\">\n                  {getLanguageInfo(filteredLanguages[0]).label}\n                </span>\n              </div>\n            )}\n          </div>\n        ))}\n      <div\n        ref={codeRef}\n        className=\"relative\"\n        onMouseEnter={() => setIsHovering(true)}\n        onMouseLeave={() => setIsHovering(false)}\n        onFocus={() => setIsHovering(true)}\n        onBlur={() => setIsHovering(false)}\n        tabIndex={0}\n      >\n        {renderContent}\n        {isHovering && activeLanguage && (\n          <CopyButton\n            onCopy={() => {\n              const text = codeData.find(\n                (code) => code.language === activeLanguage,\n              )?.content;\n              if (text) copy(substituteApiKey(text, selectedApiKey, false));\n            }}\n            isCopied={isCopied}\n          />\n        )}\n      </div>\n      {requiresApiKeySubstitution && (\n        <ApiKeySelector\n          apiKeys={apiKeys}\n          selectedApiKey={selectedApiKey}\n          onApiKeyChange={setSelectedApiKey}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default CodeSnippet;\n"],"names":["React","useState","useEffect","Children","isValidElement","useRef","useCallback","useMemo","Code","cn","Icon","getLanguageInfo","stripSdkType","LanguageSelector","ApiKeySelector","useCopyToClipboard","PlainCodeView","CopyButton","TooltipButton","substituteApiKey","content","apiKey","mask","replace","split","CodeSnippet","fixed","headerRow","title","children","className","lang","onChange","apiKeys","sdk","showCodeLines","languageOrdering","codeRef","isCopied","copy","selectedApiKey","setSelectedApiKey","keys","key","length","element","current","unmaskRenderedApiKey","handleCopy","event","selection","window","getSelection","rangeCount","selectedText","toString","range","getRangeAt","contains","commonAncestorContainer","modifiedText","clipboardData","setData","preventDefault","document","addEventListener","removeEventListener","extractLanguageFromCode","codeElement","props","classNames","langClass","find","cls","startsWith","substring","codeData","languages","sdkTypes","isSinglePlainCommand","childrenArray","toArray","Set","some","includes","forEach","child","preElement","codeLanguage","add","push","codeContent","language","resolvedSdk","size","has","Array","from","showSDKSelector","filteredLanguages","filtered","filter","sort","a","b","aBase","bBase","aIndex","indexOf","bIndex","activeLanguage","requiresApiKeySubstitution","containsPlaceholder","code","isHovering","setIsHovering","hasOnlyJsonSnippet","processedChildren","targetLanguage","map","cleanLang","langInfo","processedContent","String","syntaxHighlighterKey","snippet","additionalCSS","showLines","hasSnippetForActiveLanguage","handleSDKTypeChange","type","nextLang","l","handleLanguageChange","NoSnippetMessage","activeLanguageInfo","div","name","color","p","label","showLanguageSelector","showFullSelector","renderContent","plainChild","icon","tooltip","active","onClick","variant","alwaysShowLabel","onLanguageChange","span","ref","onMouseEnter","onMouseLeave","onFocus","onBlur","tabIndex","onCopy","text","onApiKeyChange"],"mappings":"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"}

package/core/styles/colors/types.js

@@ -1,2 +1,2 @@
-export const variants=["","dark:"];export const prefixes=["text","bg","from","to","border"];export const colors=["neutral","orange","blue","yellow","green","violet","pink"];export const neutralColors=["neutral-000","neutral-100","neutral-200","neutral-300","neutral-400","neutral-500","neutral-600","neutral-700","neutral-800","neutral-900","neutral-1000","neutral-1100","neutral-1200","neutral-1300"];export const orangeColors=["orange-100","orange-200","orange-300","orange-400","orange-500","orange-600","orange-700","orange-800","orange-900","orange-1000","orange-1100"];export const yellowColors=["yellow-100","yellow-200","yellow-300","yellow-400","yellow-500","yellow-600","yellow-700","yellow-800","yellow-900"];export const greenColors=["green-100","green-200","green-300","green-400","green-500","green-600","green-700","green-800","green-900"];export const blueColors=["blue-100","blue-200","blue-300","blue-400","blue-500","blue-600","blue-700","blue-800","blue-900"];export const violetColors=["violet-100","violet-200","violet-300","violet-400","violet-500","violet-600","violet-700","violet-800","violet-900"];export const pinkColors=["pink-100","pink-200","pink-300","pink-400","pink-500","pink-600","pink-700","pink-800","pink-900"];const secondaryColors=[...yellowColors,...greenColors,...blueColors,...violetColors,...pinkColors];const guiColors=["gui-blue-default-light","gui-blue-hover-light","gui-blue-active-light","gui-blue-default-dark","gui-blue-hover-dark","gui-blue-active-dark","gui-blue-focus","gui-unavailable","gui-success-green","gui-error-red","gui-focus","gui-focus-outline","gui-visited"];export const aliasedColors=["white","extra-light-grey","light-grey","mid-grey","dark-grey","charcoal-grey","cool-black","active-orange","bright-red","red-orange","electric-cyan","zingy-green","jazzy-pink","gui-default","gui-hover","gui-active","gui-error","gui-success","gui-default-dark","gui-hover-dark","gui-active-dark","transparent"];export const colorRoles={neutral:neutralColors,orange:orangeColors,secondary:secondaryColors,gui:guiColors};export const colorGroupLengths={neutral:neutralColors.length,orange:orangeColors.length,blue:blueColors.length,yellow:yellowColors.length,green:greenColors.length,violet:violetColors.length,pink:pinkColors.length};
+export const variants=["","dark:"];export const prefixes=["text","bg","from","to","border"];export const colors=["neutral","orange","blue","yellow","green","violet","pink"];export const neutralColors=["neutral-000","neutral-100","neutral-200","neutral-300","neutral-400","neutral-500","neutral-600","neutral-700","neutral-800","neutral-900","neutral-1000","neutral-1100","neutral-1200","neutral-1300"];export const orangeColors=["orange-100","orange-200","orange-300","orange-400","orange-500","orange-600","orange-700","orange-800","orange-900","orange-1000","orange-1100"];export const yellowColors=["yellow-100","yellow-200","yellow-300","yellow-400","yellow-500","yellow-600","yellow-700","yellow-800","yellow-900"];export const greenColors=["green-100","green-200","green-300","green-400","green-500","green-600","green-700","green-800","green-900"];export const blueColors=["blue-100","blue-200","blue-300","blue-400","blue-500","blue-600","blue-700","blue-800","blue-900"];export const violetColors=["violet-100","violet-200","violet-300","violet-400","violet-500","violet-600","violet-700","violet-800","violet-900"];export const pinkColors=["pink-100","pink-200","pink-300","pink-400","pink-500","pink-600","pink-700","pink-800","pink-900"];export const secondaryColors=[...yellowColors,...greenColors,...blueColors,...violetColors,...pinkColors];export const guiColors=["gui-blue-default-light","gui-blue-hover-light","gui-blue-active-light","gui-blue-default-dark","gui-blue-hover-dark","gui-blue-active-dark","gui-blue-focus","gui-unavailable","gui-success-green","gui-error-red","gui-focus","gui-focus-outline","gui-visited"];export const aliasedColors=["white","extra-light-grey","light-grey","mid-grey","dark-grey","charcoal-grey","cool-black","active-orange","bright-red","red-orange","electric-cyan","zingy-green","jazzy-pink","gui-default","gui-hover","gui-active","gui-error","gui-success","gui-default-dark","gui-hover-dark","gui-active-dark","transparent"];export const colorRoles={neutral:neutralColors,orange:orangeColors,secondary:secondaryColors,gui:guiColors};export const colorGroupLengths={neutral:neutralColors.length,orange:orangeColors.length,blue:blueColors.length,yellow:yellowColors.length,green:greenColors.length,violet:violetColors.length,pink:pinkColors.length};
 //# sourceMappingURL=types.js.map

package/core/styles/colors/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/core/styles/colors/types.ts"],"sourcesContent":["export type ColorName =\n  | (typeof neutralColors)[number]\n  | (typeof orangeColors)[number]\n  | (typeof secondaryColors)[number]\n  | (typeof guiColors)[number]\n  | (typeof aliasedColors)[number];\n\nexport const variants = [\"\", \"dark:\"] as const;\n\ntype ColorClassVariants = (typeof variants)[number];\n\nexport const prefixes = [\"text\", \"bg\", \"from\", \"to\", \"border\"] as const;\n\ntype ColorClassPrefixes = (typeof prefixes)[number];\n\nexport const colors = [\n  \"neutral\",\n  \"orange\",\n  \"blue\",\n  \"yellow\",\n  \"green\",\n  \"violet\",\n  \"pink\",\n] as const;\n\nexport type ColorClassColorGroups = (typeof colors)[number];\n\nexport type Theme = \"light\" | \"dark\";\n\nexport type ColorClass =\n  `${ColorClassVariants}${ColorClassPrefixes}-${ColorName}`;\n\nexport type ColorThemeSet = `${string} dark:${string}`;\n\nexport const neutralColors = [\n  \"neutral-000\",\n  \"neutral-100\",\n  \"neutral-200\",\n  \"neutral-300\",\n  \"neutral-400\",\n  \"neutral-500\",\n  \"neutral-600\",\n  \"neutral-700\",\n  \"neutral-800\",\n  \"neutral-900\",\n  \"neutral-1000\",\n  \"neutral-1100\",\n  \"neutral-1200\",\n  \"neutral-1300\",\n] as const;\n\nexport const orangeColors = [\n  \"orange-100\",\n  \"orange-200\",\n  \"orange-300\",\n  \"orange-400\",\n  \"orange-500\",\n  \"orange-600\",\n  \"orange-700\",\n  \"orange-800\",\n  \"orange-900\",\n  \"orange-1000\",\n  \"orange-1100\",\n] as const;\n\nexport const yellowColors = [\n  \"yellow-100\",\n  \"yellow-200\",\n  \"yellow-300\",\n  \"yellow-400\",\n  \"yellow-500\",\n  \"yellow-600\",\n  \"yellow-700\",\n  \"yellow-800\",\n  \"yellow-900\",\n] as const;\n\nexport const greenColors = [\n  \"green-100\",\n  \"green-200\",\n  \"green-300\",\n  \"green-400\",\n  \"green-500\",\n  \"green-600\",\n  \"green-700\",\n  \"green-800\",\n  \"green-900\",\n] as const;\n\nexport const blueColors = [\n  \"blue-100\",\n  \"blue-200\",\n  \"blue-300\",\n  \"blue-400\",\n  \"blue-500\",\n  \"blue-600\",\n  \"blue-700\",\n  \"blue-800\",\n  \"blue-900\",\n] as const;\n\nexport const violetColors = [\n  \"violet-100\",\n  \"violet-200\",\n  \"violet-300\",\n  \"violet-400\",\n  \"violet-500\",\n  \"violet-600\",\n  \"violet-700\",\n  \"violet-800\",\n  \"violet-900\",\n] as const;\n\nexport const pinkColors = [\n  \"pink-100\",\n  \"pink-200\",\n  \"pink-300\",\n  \"pink-400\",\n  \"pink-500\",\n  \"pink-600\",\n  \"pink-700\",\n  \"pink-800\",\n  \"pink-900\",\n] as const;\n\nconst secondaryColors = [\n  ...yellowColors,\n  ...greenColors,\n  ...blueColors,\n  ...violetColors,\n  ...pinkColors,\n] as const;\n\nconst guiColors = [\n  \"gui-blue-default-light\",\n  \"gui-blue-hover-light\",\n  \"gui-blue-active-light\",\n  \"gui-blue-default-dark\",\n  \"gui-blue-hover-dark\",\n  \"gui-blue-active-dark\",\n  \"gui-blue-focus\",\n  \"gui-unavailable\",\n  \"gui-success-green\",\n  \"gui-error-red\",\n  \"gui-focus\",\n  \"gui-focus-outline\",\n  \"gui-visited\",\n] as const;\n\nexport const aliasedColors = [\n  \"white\",\n  \"extra-light-grey\",\n  \"light-grey\",\n  \"mid-grey\",\n  \"dark-grey\",\n  \"charcoal-grey\",\n  \"cool-black\",\n  \"active-orange\",\n  \"bright-red\",\n  \"red-orange\",\n  \"electric-cyan\",\n  \"zingy-green\",\n  \"jazzy-pink\",\n  \"gui-default\",\n  \"gui-hover\",\n  \"gui-active\",\n  \"gui-error\",\n  \"gui-success\",\n  \"gui-default-dark\",\n  \"gui-hover-dark\",\n  \"gui-active-dark\",\n  \"transparent\",\n] as const;\n\nexport const colorRoles = {\n  neutral: neutralColors,\n  orange: orangeColors,\n  secondary: secondaryColors,\n  gui: guiColors,\n};\n\nexport const colorGroupLengths = {\n  neutral: neutralColors.length,\n  orange: orangeColors.length,\n  blue: blueColors.length,\n  yellow: yellowColors.length,\n  green: greenColors.length,\n  violet: violetColors.length,\n  pink: pinkColors.length,\n};\n"],"names":["variants","prefixes","colors","neutralColors","orangeColors","yellowColors","greenColors","blueColors","violetColors","pinkColors","secondaryColors","guiColors","aliasedColors","colorRoles","neutral","orange","secondary","gui","colorGroupLengths","length","blue","yellow","green","violet","pink"],"mappings":"AAOA,OAAO,MAAMA,SAAW,CAAC,GAAI,QAAQ,AAAU,AAI/C,QAAO,MAAMC,SAAW,CAAC,OAAQ,KAAM,OAAQ,KAAM,SAAS,AAAU,AAIxE,QAAO,MAAMC,OAAS,CACpB,UACA,SACA,OACA,SACA,QACA,SACA,OACD,AAAU,AAWX,QAAO,MAAMC,cAAgB,CAC3B,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,eACA,eACA,eACA,eACD,AAAU,AAEX,QAAO,MAAMC,aAAe,CAC1B,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACA,cACA,cACD,AAAU,AAEX,QAAO,MAAMC,aAAe,CAC1B,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACD,AAAU,AAEX,QAAO,MAAMC,YAAc,CACzB,YACA,YACA,YACA,YACA,YACA,YACA,YACA,YACA,YACD,AAAU,AAEX,QAAO,MAAMC,WAAa,CACxB,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACD,AAAU,AAEX,QAAO,MAAMC,aAAe,CAC1B,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACD,AAAU,AAEX,QAAO,MAAMC,WAAa,CACxB,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACD,AAAU,CAEX,MAAMC,gBAAkB,IACnBL,gBACAC,eACAC,cACAC,gBACAC,WACJ,CAED,MAAME,UAAY,CAChB,yBACA,uBACA,wBACA,wBACA,sBACA,uBACA,iBACA,kBACA,oBACA,gBACA,YACA,oBACA,cACD,AAED,QAAO,MAAMC,cAAgB,CAC3B,QACA,mBACA,aACA,WACA,YACA,gBACA,aACA,gBACA,aACA,aACA,gBACA,cACA,aACA,cACA,YACA,aACA,YACA,cACA,mBACA,iBACA,kBACA,cACD,AAAU,AAEX,QAAO,MAAMC,WAAa,CACxBC,QAASX,cACTY,OAAQX,aACRY,UAAWN,gBACXO,IAAKN,SACP,CAAE,AAEF,QAAO,MAAMO,kBAAoB,CAC/BJ,QAASX,cAAcgB,MAAM,CAC7BJ,OAAQX,aAAae,MAAM,CAC3BC,KAAMb,WAAWY,MAAM,CACvBE,OAAQhB,aAAac,MAAM,CAC3BG,MAAOhB,YAAYa,MAAM,CACzBI,OAAQf,aAAaW,MAAM,CAC3BK,KAAMf,WAAWU,MAAM,AACzB,CAAE"}
+{"version":3,"sources":["../../../../src/core/styles/colors/types.ts"],"sourcesContent":["export type ColorName =\n  | (typeof neutralColors)[number]\n  | (typeof orangeColors)[number]\n  | (typeof secondaryColors)[number]\n  | (typeof guiColors)[number]\n  | (typeof aliasedColors)[number];\n\nexport const variants = [\"\", \"dark:\"] as const;\n\ntype ColorClassVariants = (typeof variants)[number];\n\nexport const prefixes = [\"text\", \"bg\", \"from\", \"to\", \"border\"] as const;\n\ntype ColorClassPrefixes = (typeof prefixes)[number];\n\nexport const colors = [\n  \"neutral\",\n  \"orange\",\n  \"blue\",\n  \"yellow\",\n  \"green\",\n  \"violet\",\n  \"pink\",\n] as const;\n\nexport type ColorClassColorGroups = (typeof colors)[number];\n\nexport type Theme = \"light\" | \"dark\";\n\nexport type ColorClass =\n  `${ColorClassVariants}${ColorClassPrefixes}-${ColorName}`;\n\nexport type ColorThemeSet = `${string} dark:${string}`;\n\nexport const neutralColors = [\n  \"neutral-000\",\n  \"neutral-100\",\n  \"neutral-200\",\n  \"neutral-300\",\n  \"neutral-400\",\n  \"neutral-500\",\n  \"neutral-600\",\n  \"neutral-700\",\n  \"neutral-800\",\n  \"neutral-900\",\n  \"neutral-1000\",\n  \"neutral-1100\",\n  \"neutral-1200\",\n  \"neutral-1300\",\n] as const;\n\nexport const orangeColors = [\n  \"orange-100\",\n  \"orange-200\",\n  \"orange-300\",\n  \"orange-400\",\n  \"orange-500\",\n  \"orange-600\",\n  \"orange-700\",\n  \"orange-800\",\n  \"orange-900\",\n  \"orange-1000\",\n  \"orange-1100\",\n] as const;\n\nexport const yellowColors = [\n  \"yellow-100\",\n  \"yellow-200\",\n  \"yellow-300\",\n  \"yellow-400\",\n  \"yellow-500\",\n  \"yellow-600\",\n  \"yellow-700\",\n  \"yellow-800\",\n  \"yellow-900\",\n] as const;\n\nexport const greenColors = [\n  \"green-100\",\n  \"green-200\",\n  \"green-300\",\n  \"green-400\",\n  \"green-500\",\n  \"green-600\",\n  \"green-700\",\n  \"green-800\",\n  \"green-900\",\n] as const;\n\nexport const blueColors = [\n  \"blue-100\",\n  \"blue-200\",\n  \"blue-300\",\n  \"blue-400\",\n  \"blue-500\",\n  \"blue-600\",\n  \"blue-700\",\n  \"blue-800\",\n  \"blue-900\",\n] as const;\n\nexport const violetColors = [\n  \"violet-100\",\n  \"violet-200\",\n  \"violet-300\",\n  \"violet-400\",\n  \"violet-500\",\n  \"violet-600\",\n  \"violet-700\",\n  \"violet-800\",\n  \"violet-900\",\n] as const;\n\nexport const pinkColors = [\n  \"pink-100\",\n  \"pink-200\",\n  \"pink-300\",\n  \"pink-400\",\n  \"pink-500\",\n  \"pink-600\",\n  \"pink-700\",\n  \"pink-800\",\n  \"pink-900\",\n] as const;\n\nexport const secondaryColors = [\n  ...yellowColors,\n  ...greenColors,\n  ...blueColors,\n  ...violetColors,\n  ...pinkColors,\n] as const;\n\nexport const guiColors = [\n  \"gui-blue-default-light\",\n  \"gui-blue-hover-light\",\n  \"gui-blue-active-light\",\n  \"gui-blue-default-dark\",\n  \"gui-blue-hover-dark\",\n  \"gui-blue-active-dark\",\n  \"gui-blue-focus\",\n  \"gui-unavailable\",\n  \"gui-success-green\",\n  \"gui-error-red\",\n  \"gui-focus\",\n  \"gui-focus-outline\",\n  \"gui-visited\",\n] as const;\n\nexport const aliasedColors = [\n  \"white\",\n  \"extra-light-grey\",\n  \"light-grey\",\n  \"mid-grey\",\n  \"dark-grey\",\n  \"charcoal-grey\",\n  \"cool-black\",\n  \"active-orange\",\n  \"bright-red\",\n  \"red-orange\",\n  \"electric-cyan\",\n  \"zingy-green\",\n  \"jazzy-pink\",\n  \"gui-default\",\n  \"gui-hover\",\n  \"gui-active\",\n  \"gui-error\",\n  \"gui-success\",\n  \"gui-default-dark\",\n  \"gui-hover-dark\",\n  \"gui-active-dark\",\n  \"transparent\",\n] as const;\n\nexport const colorRoles = {\n  neutral: neutralColors,\n  orange: orangeColors,\n  secondary: secondaryColors,\n  gui: guiColors,\n};\n\nexport const colorGroupLengths = {\n  neutral: neutralColors.length,\n  orange: orangeColors.length,\n  blue: blueColors.length,\n  yellow: yellowColors.length,\n  green: greenColors.length,\n  violet: violetColors.length,\n  pink: pinkColors.length,\n};\n"],"names":["variants","prefixes","colors","neutralColors","orangeColors","yellowColors","greenColors","blueColors","violetColors","pinkColors","secondaryColors","guiColors","aliasedColors","colorRoles","neutral","orange","secondary","gui","colorGroupLengths","length","blue","yellow","green","violet","pink"],"mappings":"AAOA,OAAO,MAAMA,SAAW,CAAC,GAAI,QAAQ,AAAU,AAI/C,QAAO,MAAMC,SAAW,CAAC,OAAQ,KAAM,OAAQ,KAAM,SAAS,AAAU,AAIxE,QAAO,MAAMC,OAAS,CACpB,UACA,SACA,OACA,SACA,QACA,SACA,OACD,AAAU,AAWX,QAAO,MAAMC,cAAgB,CAC3B,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,eACA,eACA,eACA,eACD,AAAU,AAEX,QAAO,MAAMC,aAAe,CAC1B,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACA,cACA,cACD,AAAU,AAEX,QAAO,MAAMC,aAAe,CAC1B,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACD,AAAU,AAEX,QAAO,MAAMC,YAAc,CACzB,YACA,YACA,YACA,YACA,YACA,YACA,YACA,YACA,YACD,AAAU,AAEX,QAAO,MAAMC,WAAa,CACxB,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACD,AAAU,AAEX,QAAO,MAAMC,aAAe,CAC1B,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACD,AAAU,AAEX,QAAO,MAAMC,WAAa,CACxB,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACD,AAAU,AAEX,QAAO,MAAMC,gBAAkB,IAC1BL,gBACAC,eACAC,cACAC,gBACAC,WACJ,AAAU,AAEX,QAAO,MAAME,UAAY,CACvB,yBACA,uBACA,wBACA,wBACA,sBACA,uBACA,iBACA,kBACA,oBACA,gBACA,YACA,oBACA,cACD,AAAU,AAEX,QAAO,MAAMC,cAAgB,CAC3B,QACA,mBACA,aACA,WACA,YACA,gBACA,aACA,gBACA,aACA,aACA,gBACA,cACA,aACA,cACA,YACA,aACA,YACA,cACA,mBACA,iBACA,kBACA,cACD,AAAU,AAEX,QAAO,MAAMC,WAAa,CACxBC,QAASX,cACTY,OAAQX,aACRY,UAAWN,gBACXO,IAAKN,SACP,CAAE,AAEF,QAAO,MAAMO,kBAAoB,CAC/BJ,QAASX,cAAcgB,MAAM,CAC7BJ,OAAQX,aAAae,MAAM,CAC3BC,KAAMb,WAAWY,MAAM,CACvBE,OAAQhB,aAAac,MAAM,CAC3BG,MAAOhB,YAAYa,MAAM,CACzBI,OAAQf,aAAaW,MAAM,CAC3BK,KAAMf,WAAWU,MAAM,AACzB,CAAE"}

package/index.d.ts

@@ -6079,8 +6079,8 @@ export const greenColors: readonly ["green-100", "green-200", "green-300", "gree
 export const blueColors: readonly ["blue-100", "blue-200", "blue-300", "blue-400", "blue-500", "blue-600", "blue-700", "blue-800", "blue-900"];
 export const violetColors: readonly ["violet-100", "violet-200", "violet-300", "violet-400", "violet-500", "violet-600", "violet-700", "violet-800", "violet-900"];
 export const pinkColors: readonly ["pink-100", "pink-200", "pink-300", "pink-400", "pink-500", "pink-600", "pink-700", "pink-800", "pink-900"];
-const secondaryColors: readonly ["yellow-100", "yellow-200", "yellow-300", "yellow-400", "yellow-500", "yellow-600", "yellow-700", "yellow-800", "yellow-900", "green-100", "green-200", "green-300", "green-400", "green-500", "green-600", "green-700", "green-800", "green-900", "blue-100", "blue-200", "blue-300", "blue-400", "blue-500", "blue-600", "blue-700", "blue-800", "blue-900", "violet-100", "violet-200", "violet-300", "violet-400", "violet-500", "violet-600", "violet-700", "violet-800", "violet-900", "pink-100", "pink-200", "pink-300", "pink-400", "pink-500", "pink-600", "pink-700", "pink-800", "pink-900"];
-const guiColors: readonly ["gui-blue-default-light", "gui-blue-hover-light", "gui-blue-active-light", "gui-blue-default-dark", "gui-blue-hover-dark", "gui-blue-active-dark", "gui-blue-focus", "gui-unavailable", "gui-success-green", "gui-error-red", "gui-focus", "gui-focus-outline", "gui-visited"];
+export const secondaryColors: readonly ["yellow-100", "yellow-200", "yellow-300", "yellow-400", "yellow-500", "yellow-600", "yellow-700", "yellow-800", "yellow-900", "green-100", "green-200", "green-300", "green-400", "green-500", "green-600", "green-700", "green-800", "green-900", "blue-100", "blue-200", "blue-300", "blue-400", "blue-500", "blue-600", "blue-700", "blue-800", "blue-900", "violet-100", "violet-200", "violet-300", "violet-400", "violet-500", "violet-600", "violet-700", "violet-800", "violet-900", "pink-100", "pink-200", "pink-300", "pink-400", "pink-500", "pink-600", "pink-700", "pink-800", "pink-900"];
+export const guiColors: readonly ["gui-blue-default-light", "gui-blue-hover-light", "gui-blue-active-light", "gui-blue-default-dark", "gui-blue-hover-dark", "gui-blue-active-dark", "gui-blue-focus", "gui-unavailable", "gui-success-green", "gui-error-red", "gui-focus", "gui-focus-outline", "gui-visited"];
 export const aliasedColors: readonly ["white", "extra-light-grey", "light-grey", "mid-grey", "dark-grey", "charcoal-grey", "cool-black", "active-orange", "bright-red", "red-orange", "electric-cyan", "zingy-green", "jazzy-pink", "gui-default", "gui-hover", "gui-active", "gui-error", "gui-success", "gui-default-dark", "gui-hover-dark", "gui-active-dark", "transparent"];
 export const colorRoles: {
     neutral: readonly ["neutral-000", "neutral-100", "neutral-200", "neutral-300", "neutral-400", "neutral-500", "neutral-600", "neutral-700", "neutral-800", "neutral-900", "neutral-1000", "neutral-1100", "neutral-1200", "neutral-1300"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "17.7.0",
+  "version": "17.7.1",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",
@@ -20,8 +20,8 @@
   },
   "devDependencies": {
     "@storybook/addon-docs": "^9.1.4",
+    "@storybook/addon-vitest": "^9.1.5",
     "@storybook/react-vite": "^9.1.4",
-    "@storybook/test-runner": "^0.23.0",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/plugin-svgo": "^8.1.0",
@@ -57,8 +57,9 @@
     "ts-node": "^10.9.2",
     "typescript": "5.9.2",
     "vite": "^7.1.4",
-    "vitest": "^3.0.8",
-    "wait-on": "^8.0.3"
+    "vitest": "^3.2.4",
+    "@vitest/browser": "3.2.4",
+    "@vitest/coverage-v8": "3.2.4"
   },
   "dependencies": {
     "@heroicons/react": "^2.2.0",
@@ -104,9 +105,9 @@
     "build:icons": "ts-node scripts/generate-icons.ts",
     "build": "pnpm build:prebuild && pnpm build:icons && pnpm build:swc && pnpm build:tsc && pnpm build:cleanup",
     "watch": "pnpm build:swc -w",
-    "format:check": "prettier -c *.{js,ts} src/**/*.{js,ts,tsx,stories.tsx}",
-    "format:write": "prettier -w *.{js,ts} src/**/*.{js,ts,tsx,stories.tsx}",
-    "lint": "eslint *.{js,ts} src/**/*.{js,ts,tsx,stories.tsx}",
+    "format:check": "prettier -c \"*.{js,ts}\" \".storybook/*.{js,ts,tsx}\" \"src/**/*.{js,ts,tsx}\"",
+    "format:write": "prettier -w \"*.{js,ts}\" \".storybook/*.{js,ts,tsx}\" \"src/**/*.{js,ts,tsx}\"",
+    "lint": "eslint *.{js,ts} src/**/*.{js,ts,tsx}",
     "update:all": "./scripts/update-dependents.sh",
     "pre-release": "./scripts/pre-release.sh",
     "release": "./scripts/release.sh",
@@ -114,9 +115,7 @@
     "storybook": "pnpm build && storybook dev -p 6006",
     "build-storybook": "pnpm build && storybook build --quiet -o preview",
     "heroku-postbuild": "pnpm build-storybook && ./scripts/setup-auth.sh",
-    "test": "pnpm test:storybook && pnpm test:vitest run",
-    "test:storybook": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm build-storybook && pnpm http-server preview --port 6007 --silent\" \"wait-on tcp:6007 && pnpm test-storybook --url http://127.0.0.1:6007\"",
-    "test:update-snapshots": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm build-storybook && pnpm http-server preview --port 6007 --silent\" \"wait-on tcp:6007 && pnpm test-storybook -u --url http://127.0.0.1:6007\"",
-    "test:vitest": "vitest --environment=jsdom --dir=src"
+    "test": "vitest --run",
+    "test:ci": "pnpm build:icons && pnpm test"
   }
 }