@ably/ui 16.2.2 → 16.2.3-dev.408109d7

package/core/CodeSnippet/ApiKeySelector.js

@@ -1,2 +1,2 @@
-import React,{memo,useMemo}from"react";import*as Select from"@radix-ui/react-select";import Badge from"../Badge";import Icon from"../Icon";import Tooltip from"../Tooltip";const SPECIAL_API_KEYS={DEMO:"demo"};const ApiKeySelector=memo(({apiKeys,selectedApiKey,onApiKeyChange})=>{const isDemoMode=apiKeys?.length===1&&apiKeys[0]===SPECIAL_API_KEYS.DEMO;const apiKeyItems=useMemo(()=>{if(!apiKeys?.length||isDemoMode)return null;return apiKeys.map(key=>React.createElement(Select.Item,{key:key,value:key,className:"relative flex items-center rounded px-8 py-6 text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base"},React.createElement(Select.ItemText,null,key),React.createElement(Select.ItemIndicator,{className:"absolute right-8"},React.createElement(Icon,{name:"icon-gui-check-outline",size:"16px"}))))},[apiKeys,isDemoMode]);const apiKeyDropdown=useMemo(()=>{if(isDemoMode){return React.createElement("div",{className:"flex items-center"},React.createElement(Badge,{className:"ml-4 bg-neutral-200 dark:bg-neutral-1100"},"DEMO ONLY"),React.createElement(Tooltip,{className:"ml-0",triggerElement:React.createElement(Icon,{name:"icon-gui-information-circle-outline",size:"16px",color:"text-neutral-700 dark:text-neutral-600"})},"This code example uses a temporary key that is rate limited and expires in 4 hrs. Sign in to Ably to use your API keys instead."))}if(!apiKeys?.length){return null}return React.createElement(Select.Root,{value:selectedApiKey,onValueChange:onApiKeyChange},React.createElement(Select.Trigger,{className:"inline-flex items-center justify-between rounded px-8 py-4 text-14 text-neutral-1300 dark:text-neutral-000 bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 gap-4 focus-base","aria-label":"API Key"},React.createElement(Select.Value,null),React.createElement(Select.Icon,null,React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px"}))),React.createElement(Select.Portal,null,React.createElement(Select.Content,{className:"overflow-hidden rounded-md bg-neutral-000 dark:bg-neutral-1300 border border-neutral-200 dark:border-neutral-1000 shadow-md z-50"},React.createElement(Select.ScrollUpButton,{className:"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px",additionalCSS:"rotate-180"})),React.createElement(Select.Viewport,{className:"p-4"},apiKeyItems),React.createElement(Select.ScrollDownButton,{className:"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px"})))))},[apiKeys,isDemoMode,selectedApiKey,onApiKeyChange]);return React.createElement("div",{className:"flex items-center border-t border-neutral-200 dark:border-neutral-1100 px-12 py-12"},React.createElement("span",{className:"ui-text-label4 text-neutral-700 dark:text-neutral-600 mr-4"},"API key:"),apiKeyDropdown)});ApiKeySelector.displayName="ApiKeySelector";export default ApiKeySelector;
+import React,{memo,useMemo}from"react";import*as Select from"@radix-ui/react-select";import Badge from"../Badge";import Icon from"../Icon";import Tooltip from"../Tooltip";const SPECIAL_API_KEYS={DEMO:"demo"};const ApiKeySelector=memo(({apiKeys,selectedApiKey,onApiKeyChange})=>{const isDemoMode=useMemo(()=>apiKeys?.length===1&&apiKeys[0]===SPECIAL_API_KEYS.DEMO,[apiKeys]);const apiKeyItems=useMemo(()=>{if(!apiKeys?.length||isDemoMode)return null;return apiKeys.map(key=>React.createElement(Select.Item,{key:key,value:key,className:"relative flex items-center rounded px-8 py-6 text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base"},React.createElement(Select.ItemText,null,key),React.createElement(Select.ItemIndicator,{className:"absolute right-8"},React.createElement(Icon,{name:"icon-gui-check-outline",size:"16px"}))))},[apiKeys,isDemoMode]);const demoTooltipContent=useMemo(()=>React.createElement(React.Fragment,null,"This code example uses a temporary key that is rate limited and expires in 4 hrs. Sign in to Ably to use your API keys instead."),[]);const renderDemoMode=useMemo(()=>React.createElement("div",{className:"flex items-center"},React.createElement(Badge,{className:"ml-4 bg-neutral-200 dark:bg-neutral-1100"},"DEMO ONLY"),React.createElement(Tooltip,{className:"ml-0",triggerElement:React.createElement(Icon,{name:"icon-gui-information-circle-outline",size:"16px",color:"text-neutral-700 dark:text-neutral-600"})},demoTooltipContent)),[demoTooltipContent]);const renderApiKeyDropdown=useMemo(()=>{if(isDemoMode){return renderDemoMode}if(!apiKeys?.length){return null}return React.createElement(Select.Root,{value:selectedApiKey,onValueChange:onApiKeyChange},React.createElement(Select.Trigger,{className:"inline-flex items-center justify-between rounded px-8 py-4 text-14 text-neutral-1300 dark:text-neutral-000 bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 gap-4 focus-base","aria-label":"API Key"},React.createElement(Select.Value,null),React.createElement(Select.Icon,null,React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px"}))),React.createElement(Select.Portal,null,React.createElement(Select.Content,{className:"overflow-hidden rounded-md bg-neutral-000 dark:bg-neutral-1300 border border-neutral-200 dark:border-neutral-1000 shadow-md z-50"},React.createElement(Select.ScrollUpButton,{className:"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px",additionalCSS:"rotate-180"})),React.createElement(Select.Viewport,{className:"p-4"},apiKeyItems),React.createElement(Select.ScrollDownButton,{className:"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px"})))))},[apiKeys,isDemoMode,selectedApiKey,onApiKeyChange,apiKeyItems,renderDemoMode]);return React.createElement("div",{className:"flex items-center border-t border-neutral-200 dark:border-neutral-1100 px-12 py-12"},React.createElement("span",{className:"ui-text-label4 text-neutral-700 dark:text-neutral-600 mr-4"},"API key:"),renderApiKeyDropdown)});ApiKeySelector.displayName="ApiKeySelector";export default ApiKeySelector;
 //# sourceMappingURL=ApiKeySelector.js.map

package/core/CodeSnippet/ApiKeySelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/CodeSnippet/ApiKeySelector.tsx"],"sourcesContent":["import React, { memo, useMemo } from \"react\";\nimport * as Select from \"@radix-ui/react-select\";\nimport Badge from \"../Badge\";\nimport Icon from \"../Icon\";\nimport Tooltip from \"../Tooltip\";\n\ninterface ApiKeySelectorProps {\n  apiKeys?: string[];\n  selectedApiKey: string;\n  onApiKeyChange: (apiKey: string) => void;\n}\n\nconst SPECIAL_API_KEYS = { DEMO: \"demo\" };\n\nconst ApiKeySelector = memo<ApiKeySelectorProps>(\n  ({ apiKeys, selectedApiKey, onApiKeyChange }: ApiKeySelectorProps) => {\n    // Check if we're in demo mode\n    const isDemoMode =\n      apiKeys?.length === 1 && apiKeys[0] === SPECIAL_API_KEYS.DEMO;\n\n    // Memoize API key items to prevent recreating them on each render\n    const apiKeyItems = useMemo(() => {\n      if (!apiKeys?.length || isDemoMode) return null;\n\n      return apiKeys.map((key) => (\n        <Select.Item\n          key={key}\n          value={key}\n          className=\"relative flex items-center rounded px-8 py-6 text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base\"\n        >\n          <Select.ItemText>{key}</Select.ItemText>\n          <Select.ItemIndicator className=\"absolute right-8\">\n            <Icon name=\"icon-gui-check-outline\" size=\"16px\" />\n          </Select.ItemIndicator>\n        </Select.Item>\n      ));\n    }, [apiKeys, isDemoMode]);\n\n    // Render the dropdown only if we have API keys\n    const apiKeyDropdown = useMemo(() => {\n      if (isDemoMode) {\n        return (\n          <div className=\"flex items-center\">\n            <Badge className=\"ml-4 bg-neutral-200 dark:bg-neutral-1100\">\n              DEMO ONLY\n            </Badge>\n            <Tooltip\n              className=\"ml-0\"\n              triggerElement={\n                <Icon\n                  name=\"icon-gui-information-circle-outline\"\n                  size=\"16px\"\n                  color=\"text-neutral-700 dark:text-neutral-600\"\n                />\n              }\n            >\n              This code example uses a temporary key that is rate limited and\n              expires in 4 hrs. Sign in to Ably to use your API keys instead.\n            </Tooltip>\n          </div>\n        );\n      }\n\n      if (!apiKeys?.length) {\n        return null;\n      }\n\n      return (\n        <Select.Root value={selectedApiKey} onValueChange={onApiKeyChange}>\n          <Select.Trigger\n            className=\"inline-flex items-center justify-between rounded px-8 py-4 text-14 text-neutral-1300 dark:text-neutral-000 bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 gap-4 focus-base\"\n            aria-label=\"API Key\"\n          >\n            <Select.Value />\n            <Select.Icon>\n              <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n            </Select.Icon>\n          </Select.Trigger>\n\n          <Select.Portal>\n            <Select.Content className=\"overflow-hidden rounded-md bg-neutral-000 dark:bg-neutral-1300 border border-neutral-200 dark:border-neutral-1000 shadow-md z-50\">\n              <Select.ScrollUpButton className=\"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n                <Icon\n                  name=\"icon-gui-chevron-down-outline\"\n                  size=\"16px\"\n                  additionalCSS=\"rotate-180\"\n                />\n              </Select.ScrollUpButton>\n\n              <Select.Viewport className=\"p-4\">{apiKeyItems}</Select.Viewport>\n\n              <Select.ScrollDownButton className=\"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n                <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n              </Select.ScrollDownButton>\n            </Select.Content>\n          </Select.Portal>\n        </Select.Root>\n      );\n    }, [apiKeys, isDemoMode, selectedApiKey, onApiKeyChange]);\n\n    return (\n      <div className=\"flex items-center border-t border-neutral-200 dark:border-neutral-1100 px-12 py-12\">\n        <span className=\"ui-text-label4 text-neutral-700 dark:text-neutral-600 mr-4\">\n          API key:\n        </span>\n        {apiKeyDropdown}\n      </div>\n    );\n  },\n);\n\n// Define a display name to improve debugging\nApiKeySelector.displayName = \"ApiKeySelector\";\n\nexport default ApiKeySelector;\n"],"names":["React","memo","useMemo","Select","Badge","Icon","Tooltip","SPECIAL_API_KEYS","DEMO","ApiKeySelector","apiKeys","selectedApiKey","onApiKeyChange","isDemoMode","length","apiKeyItems","map","key","Item","value","className","ItemText","ItemIndicator","name","size","apiKeyDropdown","div","triggerElement","color","Root","onValueChange","Trigger","aria-label","Value","Portal","Content","ScrollUpButton","additionalCSS","Viewport","ScrollDownButton","span","displayName"],"mappings":"AAAA,OAAOA,OAASC,IAAI,CAAEC,OAAO,KAAQ,OAAQ,AAC7C,WAAYC,WAAY,wBAAyB,AACjD,QAAOC,UAAW,UAAW,AAC7B,QAAOC,SAAU,SAAU,AAC3B,QAAOC,YAAa,YAAa,CAQjC,MAAMC,iBAAmB,CAAEC,KAAM,MAAO,EAExC,MAAMC,eAAiBR,KACrB,CAAC,CAAES,OAAO,CAAEC,cAAc,CAAEC,cAAc,CAAuB,IAE/D,MAAMC,WACJH,SAASI,SAAW,GAAKJ,OAAO,CAAC,EAAE,GAAKH,iBAAiBC,IAAI,CAG/D,MAAMO,YAAcb,QAAQ,KAC1B,GAAI,CAACQ,SAASI,QAAUD,WAAY,OAAO,KAE3C,OAAOH,QAAQM,GAAG,CAAC,AAACC,KAClB,oBAACd,OAAOe,IAAI,EACVD,IAAKA,IACLE,MAAOF,IACPG,UAAU,iRAEV,oBAACjB,OAAOkB,QAAQ,MAAEJ,KAClB,oBAACd,OAAOmB,aAAa,EAACF,UAAU,oBAC9B,oBAACf,MAAKkB,KAAK,yBAAyBC,KAAK,WAIjD,EAAG,CAACd,QAASG,WAAW,EAGxB,MAAMY,eAAiBvB,QAAQ,KAC7B,GAAIW,WAAY,CACd,OACE,oBAACa,OAAIN,UAAU,qBACb,oBAAChB,OAAMgB,UAAU,4CAA2C,aAG5D,oBAACd,SACCc,UAAU,OACVO,eACE,oBAACtB,MACCkB,KAAK,sCACLC,KAAK,OACLI,MAAM,4CAGX,mIAMP,CAEA,GAAI,CAAClB,SAASI,OAAQ,CACpB,OAAO,IACT,CAEA,OACE,oBAACX,OAAO0B,IAAI,EAACV,MAAOR,eAAgBmB,cAAelB,gBACjD,oBAACT,OAAO4B,OAAO,EACbX,UAAU,kNACVY,aAAW,WAEX,oBAAC7B,OAAO8B,KAAK,OACb,oBAAC9B,OAAOE,IAAI,MACV,oBAACA,MAAKkB,KAAK,gCAAgCC,KAAK,WAIpD,oBAACrB,OAAO+B,MAAM,MACZ,oBAAC/B,OAAOgC,OAAO,EAACf,UAAU,oIACxB,oBAACjB,OAAOiC,cAAc,EAAChB,UAAU,+IAC/B,oBAACf,MACCkB,KAAK,gCACLC,KAAK,OACLa,cAAc,gBAIlB,oBAAClC,OAAOmC,QAAQ,EAAClB,UAAU,OAAOL,aAElC,oBAACZ,OAAOoC,gBAAgB,EAACnB,UAAU,+IACjC,oBAACf,MAAKkB,KAAK,gCAAgCC,KAAK,YAM5D,EAAG,CAACd,QAASG,WAAYF,eAAgBC,eAAe,EAExD,OACE,oBAACc,OAAIN,UAAU,sFACb,oBAACoB,QAAKpB,UAAU,8DAA6D,YAG5EK,eAGP,EAIFhB,CAAAA,eAAegC,WAAW,CAAG,gBAE7B,gBAAehC,cAAe"}
+{"version":3,"sources":["../../../src/core/CodeSnippet/ApiKeySelector.tsx"],"sourcesContent":["import React, { memo, useMemo } from \"react\";\nimport * as Select from \"@radix-ui/react-select\";\nimport Badge from \"../Badge\";\nimport Icon from \"../Icon\";\nimport Tooltip from \"../Tooltip\";\n\ninterface ApiKeySelectorProps {\n  apiKeys?: string[];\n  selectedApiKey: string;\n  onApiKeyChange: (apiKey: string) => void;\n}\n\n// Define constants at the module level\nconst SPECIAL_API_KEYS = {\n  DEMO: \"demo\",\n} as const;\n\nconst ApiKeySelector = memo(\n  ({ apiKeys, selectedApiKey, onApiKeyChange }: ApiKeySelectorProps) => {\n    // Check if we're in demo mode - only compute this once\n    const isDemoMode = useMemo(\n      () => apiKeys?.length === 1 && apiKeys[0] === SPECIAL_API_KEYS.DEMO,\n      [apiKeys],\n    );\n\n    // Memoize API key items to prevent recreating them on each render\n    const apiKeyItems = useMemo(() => {\n      if (!apiKeys?.length || isDemoMode) return null;\n\n      return apiKeys.map((key) => (\n        <Select.Item\n          key={key}\n          value={key}\n          className=\"relative flex items-center rounded px-8 py-6 text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base\"\n        >\n          <Select.ItemText>{key}</Select.ItemText>\n          <Select.ItemIndicator className=\"absolute right-8\">\n            <Icon name=\"icon-gui-check-outline\" size=\"16px\" />\n          </Select.ItemIndicator>\n        </Select.Item>\n      ));\n    }, [apiKeys, isDemoMode]);\n\n    // Memoize the tooltip content since it's static\n    const demoTooltipContent = useMemo(\n      () => (\n        <>\n          This code example uses a temporary key that is rate limited and\n          expires in 4 hrs. Sign in to Ably to use your API keys instead.\n        </>\n      ),\n      [],\n    );\n\n    // Render the demo mode UI\n    const renderDemoMode = useMemo(\n      () => (\n        <div className=\"flex items-center\">\n          <Badge className=\"ml-4 bg-neutral-200 dark:bg-neutral-1100\">\n            DEMO ONLY\n          </Badge>\n          <Tooltip\n            className=\"ml-0\"\n            triggerElement={\n              <Icon\n                name=\"icon-gui-information-circle-outline\"\n                size=\"16px\"\n                color=\"text-neutral-700 dark:text-neutral-600\"\n              />\n            }\n          >\n            {demoTooltipContent}\n          </Tooltip>\n        </div>\n      ),\n      [demoTooltipContent],\n    );\n\n    // Render the dropdown only if we have API keys\n    const renderApiKeyDropdown = useMemo(() => {\n      if (isDemoMode) {\n        return renderDemoMode;\n      }\n\n      if (!apiKeys?.length) {\n        return null;\n      }\n\n      return (\n        <Select.Root value={selectedApiKey} onValueChange={onApiKeyChange}>\n          <Select.Trigger\n            className=\"inline-flex items-center justify-between rounded px-8 py-4 text-14 text-neutral-1300 dark:text-neutral-000 bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 gap-4 focus-base\"\n            aria-label=\"API Key\"\n          >\n            <Select.Value />\n            <Select.Icon>\n              <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n            </Select.Icon>\n          </Select.Trigger>\n\n          <Select.Portal>\n            <Select.Content className=\"overflow-hidden rounded-md bg-neutral-000 dark:bg-neutral-1300 border border-neutral-200 dark:border-neutral-1000 shadow-md z-50\">\n              <Select.ScrollUpButton className=\"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n                <Icon\n                  name=\"icon-gui-chevron-down-outline\"\n                  size=\"16px\"\n                  additionalCSS=\"rotate-180\"\n                />\n              </Select.ScrollUpButton>\n\n              <Select.Viewport className=\"p-4\">{apiKeyItems}</Select.Viewport>\n\n              <Select.ScrollDownButton className=\"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n                <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n              </Select.ScrollDownButton>\n            </Select.Content>\n          </Select.Portal>\n        </Select.Root>\n      );\n    }, [\n      apiKeys,\n      isDemoMode,\n      selectedApiKey,\n      onApiKeyChange,\n      apiKeyItems,\n      renderDemoMode,\n    ]);\n\n    return (\n      <div className=\"flex items-center border-t border-neutral-200 dark:border-neutral-1100 px-12 py-12\">\n        <span className=\"ui-text-label4 text-neutral-700 dark:text-neutral-600 mr-4\">\n          API key:\n        </span>\n        {renderApiKeyDropdown}\n      </div>\n    );\n  },\n);\n\n// Define a display name to improve debugging\nApiKeySelector.displayName = \"ApiKeySelector\";\n\nexport default ApiKeySelector;\n"],"names":["React","memo","useMemo","Select","Badge","Icon","Tooltip","SPECIAL_API_KEYS","DEMO","ApiKeySelector","apiKeys","selectedApiKey","onApiKeyChange","isDemoMode","length","apiKeyItems","map","key","Item","value","className","ItemText","ItemIndicator","name","size","demoTooltipContent","renderDemoMode","div","triggerElement","color","renderApiKeyDropdown","Root","onValueChange","Trigger","aria-label","Value","Portal","Content","ScrollUpButton","additionalCSS","Viewport","ScrollDownButton","span","displayName"],"mappings":"AAAA,OAAOA,OAASC,IAAI,CAAEC,OAAO,KAAQ,OAAQ,AAC7C,WAAYC,WAAY,wBAAyB,AACjD,QAAOC,UAAW,UAAW,AAC7B,QAAOC,SAAU,SAAU,AAC3B,QAAOC,YAAa,YAAa,CASjC,MAAMC,iBAAmB,CACvBC,KAAM,MACR,EAEA,MAAMC,eAAiBR,KACrB,CAAC,CAAES,OAAO,CAAEC,cAAc,CAAEC,cAAc,CAAuB,IAE/D,MAAMC,WAAaX,QACjB,IAAMQ,SAASI,SAAW,GAAKJ,OAAO,CAAC,EAAE,GAAKH,iBAAiBC,IAAI,CACnE,CAACE,QAAQ,EAIX,MAAMK,YAAcb,QAAQ,KAC1B,GAAI,CAACQ,SAASI,QAAUD,WAAY,OAAO,KAE3C,OAAOH,QAAQM,GAAG,CAAC,AAACC,KAClB,oBAACd,OAAOe,IAAI,EACVD,IAAKA,IACLE,MAAOF,IACPG,UAAU,iRAEV,oBAACjB,OAAOkB,QAAQ,MAAEJ,KAClB,oBAACd,OAAOmB,aAAa,EAACF,UAAU,oBAC9B,oBAACf,MAAKkB,KAAK,yBAAyBC,KAAK,WAIjD,EAAG,CAACd,QAASG,WAAW,EAGxB,MAAMY,mBAAqBvB,QACzB,IACE,wCAAE,mIAKJ,EAAE,EAIJ,MAAMwB,eAAiBxB,QACrB,IACE,oBAACyB,OAAIP,UAAU,qBACb,oBAAChB,OAAMgB,UAAU,4CAA2C,aAG5D,oBAACd,SACCc,UAAU,OACVQ,eACE,oBAACvB,MACCkB,KAAK,sCACLC,KAAK,OACLK,MAAM,4CAITJ,qBAIP,CAACA,mBAAmB,EAItB,MAAMK,qBAAuB5B,QAAQ,KACnC,GAAIW,WAAY,CACd,OAAOa,cACT,CAEA,GAAI,CAAChB,SAASI,OAAQ,CACpB,OAAO,IACT,CAEA,OACE,oBAACX,OAAO4B,IAAI,EAACZ,MAAOR,eAAgBqB,cAAepB,gBACjD,oBAACT,OAAO8B,OAAO,EACbb,UAAU,kNACVc,aAAW,WAEX,oBAAC/B,OAAOgC,KAAK,OACb,oBAAChC,OAAOE,IAAI,MACV,oBAACA,MAAKkB,KAAK,gCAAgCC,KAAK,WAIpD,oBAACrB,OAAOiC,MAAM,MACZ,oBAACjC,OAAOkC,OAAO,EAACjB,UAAU,oIACxB,oBAACjB,OAAOmC,cAAc,EAAClB,UAAU,+IAC/B,oBAACf,MACCkB,KAAK,gCACLC,KAAK,OACLe,cAAc,gBAIlB,oBAACpC,OAAOqC,QAAQ,EAACpB,UAAU,OAAOL,aAElC,oBAACZ,OAAOsC,gBAAgB,EAACrB,UAAU,+IACjC,oBAACf,MAAKkB,KAAK,gCAAgCC,KAAK,YAM5D,EAAG,CACDd,QACAG,WACAF,eACAC,eACAG,YACAW,eACD,EAED,OACE,oBAACC,OAAIP,UAAU,sFACb,oBAACsB,QAAKtB,UAAU,8DAA6D,YAG5EU,qBAGP,EAIFrB,CAAAA,eAAekC,WAAW,CAAG,gBAE7B,gBAAelC,cAAe"}

package/core/CodeSnippet/CopyButton.js

@@ -1,2 +1,2 @@
-import React from"react";import Icon from"../Icon";import TooltipButton from"./TooltipButton";const CopyButton=({onCopy,isCopied,tooltip="Copy"})=>{return React.createElement("div",{className:"absolute top-8 right-8 z-10"},React.createElement(TooltipButton,{tooltip:tooltip,onClick:onCopy,variant:"icon-button"},React.createElement(Icon,{name:"icon-gui-document-duplicate-outline",size:"20px",color:"text-neutral-1300 dark:text-neutral-000"})),isCopied&&React.createElement("div",{className:"absolute right-[40px] top-0 bg-neutral-1300 dark:bg-neutral-000 text-neutral-000 dark:text-neutral-1300 py-6 px-12 rounded ui-text-label4 whitespace-nowrap"},"Copied!"))};export default CopyButton;
+import React,{memo}from"react";import Icon from"../Icon";import TooltipButton from"./TooltipButton";const CopyButton=memo(({onCopy,isCopied,tooltip="Copy"})=>{const CopiedIndicator=isCopied?React.createElement("div",{className:"absolute right-[40px] top-0 bg-neutral-1300 dark:bg-neutral-000 text-neutral-000 dark:text-neutral-1300 py-6 px-12 rounded ui-text-label4 whitespace-nowrap"},"Copied!"):null;return React.createElement("div",{className:"absolute top-8 right-8 z-10"},React.createElement(TooltipButton,{tooltip:tooltip,onClick:onCopy,variant:"icon-button"},React.createElement(Icon,{name:"icon-gui-document-duplicate-outline",size:"20px",color:"text-neutral-1300 dark:text-neutral-000"})),CopiedIndicator)});CopyButton.displayName="CopyButton";export default CopyButton;
 //# sourceMappingURL=CopyButton.js.map

package/core/CodeSnippet/CopyButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/CodeSnippet/CopyButton.tsx"],"sourcesContent":["import React from \"react\";\nimport Icon from \"../Icon\";\nimport TooltipButton from \"./TooltipButton\";\n\ninterface CopyButtonProps {\n  onCopy: () => void;\n  isCopied: boolean;\n  tooltip?: string;\n}\n\n/**\n * A reusable copy button component with tooltip and copied indicator\n */\nconst CopyButton: React.FC<CopyButtonProps> = ({\n  onCopy,\n  isCopied,\n  tooltip = \"Copy\",\n}) => {\n  return (\n    <div className=\"absolute top-8 right-8 z-10\">\n      <TooltipButton tooltip={tooltip} onClick={onCopy} variant=\"icon-button\">\n        <Icon\n          name=\"icon-gui-document-duplicate-outline\"\n          size=\"20px\"\n          color=\"text-neutral-1300 dark:text-neutral-000\"\n        />\n      </TooltipButton>\n\n      {isCopied && (\n        <div className=\"absolute right-[40px] top-0 bg-neutral-1300 dark:bg-neutral-000 text-neutral-000 dark:text-neutral-1300 py-6 px-12 rounded ui-text-label4 whitespace-nowrap\">\n          Copied!\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default CopyButton;\n"],"names":["React","Icon","TooltipButton","CopyButton","onCopy","isCopied","tooltip","div","className","onClick","variant","name","size","color"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,SAAU,SAAU,AAC3B,QAAOC,kBAAmB,iBAAkB,CAW5C,MAAMC,WAAwC,CAAC,CAC7CC,MAAM,CACNC,QAAQ,CACRC,QAAU,MAAM,CACjB,IACC,OACE,oBAACC,OAAIC,UAAU,+BACb,oBAACN,eAAcI,QAASA,QAASG,QAASL,OAAQM,QAAQ,eACxD,oBAACT,MACCU,KAAK,sCACLC,KAAK,OACLC,MAAM,6CAITR,UACC,oBAACE,OAAIC,UAAU,+JAA8J,WAMrL,CAEA,gBAAeL,UAAW"}
+{"version":3,"sources":["../../../src/core/CodeSnippet/CopyButton.tsx"],"sourcesContent":["import React, { memo } from \"react\";\nimport Icon from \"../Icon\";\nimport TooltipButton from \"./TooltipButton\";\n\ninterface CopyButtonProps {\n  onCopy: () => void;\n  isCopied: boolean;\n  tooltip?: string;\n}\n\n/**\n * A reusable copy button component with tooltip and copied indicator\n */\nconst CopyButton = memo(\n  ({ onCopy, isCopied, tooltip = \"Copy\" }: CopyButtonProps) => {\n    // Memoized copied indicator\n    const CopiedIndicator = isCopied ? (\n      <div className=\"absolute right-[40px] top-0 bg-neutral-1300 dark:bg-neutral-000 text-neutral-000 dark:text-neutral-1300 py-6 px-12 rounded ui-text-label4 whitespace-nowrap\">\n        Copied!\n      </div>\n    ) : null;\n\n    return (\n      <div className=\"absolute top-8 right-8 z-10\">\n        <TooltipButton tooltip={tooltip} onClick={onCopy} variant=\"icon-button\">\n          <Icon\n            name=\"icon-gui-document-duplicate-outline\"\n            size=\"20px\"\n            color=\"text-neutral-1300 dark:text-neutral-000\"\n          />\n        </TooltipButton>\n\n        {CopiedIndicator}\n      </div>\n    );\n  },\n);\n\n// Add displayName for better debugging\nCopyButton.displayName = \"CopyButton\";\n\nexport default CopyButton;\n"],"names":["React","memo","Icon","TooltipButton","CopyButton","onCopy","isCopied","tooltip","CopiedIndicator","div","className","onClick","variant","name","size","color","displayName"],"mappings":"AAAA,OAAOA,OAASC,IAAI,KAAQ,OAAQ,AACpC,QAAOC,SAAU,SAAU,AAC3B,QAAOC,kBAAmB,iBAAkB,CAW5C,MAAMC,WAAaH,KACjB,CAAC,CAAEI,MAAM,CAAEC,QAAQ,CAAEC,QAAU,MAAM,CAAmB,IAEtD,MAAMC,gBAAkBF,SACtB,oBAACG,OAAIC,UAAU,+JAA8J,WAG3K,KAEJ,OACE,oBAACD,OAAIC,UAAU,+BACb,oBAACP,eAAcI,QAASA,QAASI,QAASN,OAAQO,QAAQ,eACxD,oBAACV,MACCW,KAAK,sCACLC,KAAK,OACLC,MAAM,6CAITP,gBAGP,EAIFJ,CAAAA,WAAWY,WAAW,CAAG,YAEzB,gBAAeZ,UAAW"}

package/core/CodeSnippet/LanguageSelector.js

@@ -1,2 +1,2 @@
-import React,{memo,useMemo}from"react";import*as Select from"@radix-ui/react-select";import Icon from"../Icon";import TooltipButton from"./TooltipButton";const LanguageSelector=memo(({languages,activeLanguage,onLanguageChange,getLanguageDisplayName,getLanguageIcon,activeLanguageInfo})=>{const desktopLanguageElements=useMemo(()=>{return languages.map(lang=>{const active=activeLanguage===lang;const displayName=getLanguageDisplayName(lang);return React.createElement(TooltipButton,{key:lang,tooltip:displayName,active:active,onClick:()=>onLanguageChange(lang),icon:getLanguageIcon(lang),variant:"segmented",size:"sm"},displayName)})},[languages,activeLanguage,onLanguageChange,getLanguageDisplayName,getLanguageIcon]);const mobileLanguageElements=useMemo(()=>{return languages.map(lang=>React.createElement(Select.Item,{key:lang,value:lang,className:"relative flex items-center rounded px-8 py-6 text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base"},React.createElement(Select.ItemText,{asChild:true},React.createElement("div",{className:"flex items-center gap-8"},React.createElement(Icon,{name:getLanguageIcon(lang),size:"20px"}),React.createElement("span",null,getLanguageDisplayName(lang)))),React.createElement(Select.ItemIndicator,{className:"absolute right-8"},React.createElement(Icon,{name:"icon-gui-check-outline",size:"16px"}))))},[languages,getLanguageDisplayName,getLanguageIcon]);return React.createElement("div",{className:"p-8 border-b border-neutral-200 dark:border-neutral-1100 overflow-x-auto h-[58px]"},React.createElement("div",{className:"hidden sm:flex gap-8"},desktopLanguageElements),React.createElement("div",{className:"sm:hidden w-full"},React.createElement(Select.Root,{value:activeLanguage||undefined,onValueChange:onLanguageChange},React.createElement(Select.Trigger,{className:"w-full inline-flex items-center justify-between rounded-lg px-12 py-8 text-14 text-neutral-1300 dark:text-neutral-000 bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 gap-4 border border-neutral-300 dark:border-neutral-900 focus-base","aria-label":"Select language"},React.createElement(Select.Value,{asChild:true},activeLanguage&&activeLanguageInfo&&React.createElement("div",{className:"flex items-center gap-8"},React.createElement(Icon,{name:activeLanguageInfo.icon,size:"20px"}),React.createElement("span",null,activeLanguageInfo.label))),React.createElement(Select.Icon,null,React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px"}))),React.createElement(Select.Portal,null,React.createElement(Select.Content,{className:"overflow-hidden rounded-md bg-neutral-000 dark:bg-neutral-1300 border border-neutral-200 dark:border-neutral-1000 shadow-md z-50 w-[var(--radix-select-trigger-width)]",position:"popper"},React.createElement(Select.ScrollUpButton,{className:"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px",additionalCSS:"rotate-180"})),React.createElement(Select.Viewport,{className:"p-4"},mobileLanguageElements),React.createElement(Select.ScrollDownButton,{className:"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px"})))))))});LanguageSelector.displayName="LanguageSelector";export default LanguageSelector;
+import React,{memo,useMemo}from"react";import*as Select from"@radix-ui/react-select";import Icon from"../Icon";import TooltipButton from"./TooltipButton";const LanguageSelector=memo(({languages,activeLanguage,onLanguageChange,getLanguageDisplayName,getLanguageIcon,activeLanguageInfo})=>{const desktopLanguageElements=useMemo(()=>languages.map(lang=>{const active=activeLanguage===lang;const displayName=getLanguageDisplayName(lang);return React.createElement(TooltipButton,{key:lang,tooltip:displayName,active:active,onClick:()=>onLanguageChange(lang),icon:getLanguageIcon(lang),variant:"segmented",size:"sm"},displayName)}),[languages,activeLanguage,onLanguageChange,getLanguageDisplayName,getLanguageIcon]);const mobileLanguageElements=useMemo(()=>languages.map(lang=>React.createElement(Select.Item,{key:lang,value:lang,className:"relative flex items-center rounded px-8 py-6 text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base"},React.createElement(Select.ItemText,{asChild:true},React.createElement("div",{className:"flex items-center gap-8"},React.createElement(Icon,{name:getLanguageIcon(lang),size:"20px"}),React.createElement("span",null,getLanguageDisplayName(lang)))),React.createElement(Select.ItemIndicator,{className:"absolute right-8"},React.createElement(Icon,{name:"icon-gui-check-outline",size:"16px"})))),[languages,getLanguageDisplayName,getLanguageIcon]);const mobileSelectValue=useMemo(()=>activeLanguage&&activeLanguageInfo?React.createElement("div",{className:"flex items-center gap-8"},React.createElement(Icon,{name:activeLanguageInfo.icon,size:"20px"}),React.createElement("span",null,activeLanguageInfo.label)):null,[activeLanguage,activeLanguageInfo]);return React.createElement("div",{className:"p-8 border-b border-neutral-200 dark:border-neutral-1100 overflow-x-auto h-[58px]"},React.createElement("div",{className:"hidden sm:flex gap-8"},desktopLanguageElements),React.createElement("div",{className:"sm:hidden w-full"},React.createElement(Select.Root,{value:activeLanguage||undefined,onValueChange:onLanguageChange},React.createElement(Select.Trigger,{className:"w-full inline-flex items-center justify-between rounded-lg px-12 py-8 text-14 text-neutral-1300 dark:text-neutral-000 bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 gap-4 border border-neutral-300 dark:border-neutral-900 focus-base","aria-label":"Select language"},React.createElement(Select.Value,{asChild:true},mobileSelectValue),React.createElement(Select.Icon,null,React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px"}))),React.createElement(Select.Portal,null,React.createElement(Select.Content,{className:"overflow-hidden rounded-md bg-neutral-000 dark:bg-neutral-1300 border border-neutral-200 dark:border-neutral-1000 shadow-md z-50 w-[var(--radix-select-trigger-width)]",position:"popper"},React.createElement(Select.ScrollUpButton,{className:"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px",additionalCSS:"rotate-180"})),React.createElement(Select.Viewport,{className:"p-4"},mobileLanguageElements),React.createElement(Select.ScrollDownButton,{className:"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px"})))))))});LanguageSelector.displayName="LanguageSelector";export default LanguageSelector;
 //# sourceMappingURL=LanguageSelector.js.map

package/core/CodeSnippet/LanguageSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/CodeSnippet/LanguageSelector.tsx"],"sourcesContent":["import React, { memo, useMemo } from \"react\";\nimport * as Select from \"@radix-ui/react-select\";\nimport Icon from \"../Icon\";\nimport { IconName } from \"../Icon/types\";\nimport TooltipButton from \"./TooltipButton\";\n\ninterface LanguageSelectorProps {\n  languages: string[];\n  activeLanguage: string | null;\n  onLanguageChange: (language: string) => void;\n  getLanguageDisplayName: (lang: string) => string;\n  getLanguageIcon: (lang: string) => IconName;\n  activeLanguageInfo: { label: string; icon: IconName } | null;\n}\n\nconst LanguageSelector = memo<LanguageSelectorProps>(\n  ({\n    languages,\n    activeLanguage,\n    onLanguageChange,\n    getLanguageDisplayName,\n    getLanguageIcon,\n    activeLanguageInfo,\n  }: LanguageSelectorProps) => {\n    // Memoize the desktop language elements to avoid recreating on each render\n    const desktopLanguageElements = useMemo(() => {\n      return languages.map((lang) => {\n        const active = activeLanguage === lang;\n        const displayName = getLanguageDisplayName(lang);\n\n        return (\n          <TooltipButton\n            key={lang}\n            tooltip={displayName}\n            active={active}\n            onClick={() => onLanguageChange(lang)}\n            icon={getLanguageIcon(lang)}\n            variant=\"segmented\"\n            size=\"sm\"\n          >\n            {displayName}\n          </TooltipButton>\n        );\n      });\n    }, [\n      languages,\n      activeLanguage,\n      onLanguageChange,\n      getLanguageDisplayName,\n      getLanguageIcon,\n    ]);\n\n    // Memoize the mobile language elements\n    const mobileLanguageElements = useMemo(() => {\n      return languages.map((lang) => (\n        <Select.Item\n          key={lang}\n          value={lang}\n          className=\"relative flex items-center rounded px-8 py-6 text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base\"\n        >\n          <Select.ItemText asChild>\n            <div className=\"flex items-center gap-8\">\n              <Icon name={getLanguageIcon(lang)} size=\"20px\" />\n              <span>{getLanguageDisplayName(lang)}</span>\n            </div>\n          </Select.ItemText>\n          <Select.ItemIndicator className=\"absolute right-8\">\n            <Icon name=\"icon-gui-check-outline\" size=\"16px\" />\n          </Select.ItemIndicator>\n        </Select.Item>\n      ));\n    }, [languages, getLanguageDisplayName, getLanguageIcon]);\n\n    return (\n      <div className=\"p-8 border-b border-neutral-200 dark:border-neutral-1100 overflow-x-auto h-[58px]\">\n        {/* Desktop language selector - SegmentedControls */}\n        <div className=\"hidden sm:flex gap-8\">{desktopLanguageElements}</div>\n\n        {/* Mobile language selector - Select dropdown */}\n        <div className=\"sm:hidden w-full\">\n          <Select.Root\n            value={activeLanguage || undefined}\n            onValueChange={onLanguageChange}\n          >\n            <Select.Trigger\n              className=\"w-full inline-flex items-center justify-between rounded-lg px-12 py-8 text-14 text-neutral-1300 dark:text-neutral-000 bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 gap-4 border border-neutral-300 dark:border-neutral-900 focus-base\"\n              aria-label=\"Select language\"\n            >\n              <Select.Value asChild>\n                {activeLanguage && activeLanguageInfo && (\n                  <div className=\"flex items-center gap-8\">\n                    <Icon name={activeLanguageInfo.icon} size=\"20px\" />\n                    <span>{activeLanguageInfo.label}</span>\n                  </div>\n                )}\n              </Select.Value>\n              <Select.Icon>\n                <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n              </Select.Icon>\n            </Select.Trigger>\n\n            <Select.Portal>\n              <Select.Content\n                className=\"overflow-hidden rounded-md bg-neutral-000 dark:bg-neutral-1300 border border-neutral-200 dark:border-neutral-1000 shadow-md z-50 w-[var(--radix-select-trigger-width)]\"\n                position=\"popper\"\n              >\n                <Select.ScrollUpButton className=\"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n                  <Icon\n                    name=\"icon-gui-chevron-down-outline\"\n                    size=\"16px\"\n                    additionalCSS=\"rotate-180\"\n                  />\n                </Select.ScrollUpButton>\n\n                <Select.Viewport className=\"p-4\">\n                  {mobileLanguageElements}\n                </Select.Viewport>\n\n                <Select.ScrollDownButton className=\"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n                  <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n                </Select.ScrollDownButton>\n              </Select.Content>\n            </Select.Portal>\n          </Select.Root>\n        </div>\n      </div>\n    );\n  },\n);\n\n// Define a display name to improve debugging\nLanguageSelector.displayName = \"LanguageSelector\";\n\nexport default LanguageSelector;\n"],"names":["React","memo","useMemo","Select","Icon","TooltipButton","LanguageSelector","languages","activeLanguage","onLanguageChange","getLanguageDisplayName","getLanguageIcon","activeLanguageInfo","desktopLanguageElements","map","lang","active","displayName","key","tooltip","onClick","icon","variant","size","mobileLanguageElements","Item","value","className","ItemText","asChild","div","name","span","ItemIndicator","Root","undefined","onValueChange","Trigger","aria-label","Value","label","Portal","Content","position","ScrollUpButton","additionalCSS","Viewport","ScrollDownButton"],"mappings":"AAAA,OAAOA,OAASC,IAAI,CAAEC,OAAO,KAAQ,OAAQ,AAC7C,WAAYC,WAAY,wBAAyB,AACjD,QAAOC,SAAU,SAAU,AAE3B,QAAOC,kBAAmB,iBAAkB,CAW5C,MAAMC,iBAAmBL,KACvB,CAAC,CACCM,SAAS,CACTC,cAAc,CACdC,gBAAgB,CAChBC,sBAAsB,CACtBC,eAAe,CACfC,kBAAkB,CACI,IAEtB,MAAMC,wBAA0BX,QAAQ,KACtC,OAAOK,UAAUO,GAAG,CAAC,AAACC,OACpB,MAAMC,OAASR,iBAAmBO,KAClC,MAAME,YAAcP,uBAAuBK,MAE3C,OACE,oBAACV,eACCa,IAAKH,KACLI,QAASF,YACTD,OAAQA,OACRI,QAAS,IAAMX,iBAAiBM,MAChCM,KAAMV,gBAAgBI,MACtBO,QAAQ,YACRC,KAAK,MAEJN,YAGP,EACF,EAAG,CACDV,UACAC,eACAC,iBACAC,uBACAC,gBACD,EAGD,MAAMa,uBAAyBtB,QAAQ,KACrC,OAAOK,UAAUO,GAAG,CAAC,AAACC,MACpB,oBAACZ,OAAOsB,IAAI,EACVP,IAAKH,KACLW,MAAOX,KACPY,UAAU,iRAEV,oBAACxB,OAAOyB,QAAQ,EAACC,QAAAA,MACf,oBAACC,OAAIH,UAAU,2BACb,oBAACvB,MAAK2B,KAAMpB,gBAAgBI,MAAOQ,KAAK,SACxC,oBAACS,YAAMtB,uBAAuBK,SAGlC,oBAACZ,OAAO8B,aAAa,EAACN,UAAU,oBAC9B,oBAACvB,MAAK2B,KAAK,yBAAyBR,KAAK,WAIjD,EAAG,CAAChB,UAAWG,uBAAwBC,gBAAgB,EAEvD,OACE,oBAACmB,OAAIH,UAAU,qFAEb,oBAACG,OAAIH,UAAU,wBAAwBd,yBAGvC,oBAACiB,OAAIH,UAAU,oBACb,oBAACxB,OAAO+B,IAAI,EACVR,MAAOlB,gBAAkB2B,UACzBC,cAAe3B,kBAEf,oBAACN,OAAOkC,OAAO,EACbV,UAAU,+QACVW,aAAW,mBAEX,oBAACnC,OAAOoC,KAAK,EAACV,QAAAA,MACXrB,gBAAkBI,oBACjB,oBAACkB,OAAIH,UAAU,2BACb,oBAACvB,MAAK2B,KAAMnB,mBAAmBS,IAAI,CAAEE,KAAK,SAC1C,oBAACS,YAAMpB,mBAAmB4B,KAAK,IAIrC,oBAACrC,OAAOC,IAAI,MACV,oBAACA,MAAK2B,KAAK,gCAAgCR,KAAK,WAIpD,oBAACpB,OAAOsC,MAAM,MACZ,oBAACtC,OAAOuC,OAAO,EACbf,UAAU,yKACVgB,SAAS,UAET,oBAACxC,OAAOyC,cAAc,EAACjB,UAAU,+IAC/B,oBAACvB,MACC2B,KAAK,gCACLR,KAAK,OACLsB,cAAc,gBAIlB,oBAAC1C,OAAO2C,QAAQ,EAACnB,UAAU,OACxBH,wBAGH,oBAACrB,OAAO4C,gBAAgB,EAACpB,UAAU,+IACjC,oBAACvB,MAAK2B,KAAK,gCAAgCR,KAAK,cAQhE,EAIFjB,CAAAA,iBAAiBW,WAAW,CAAG,kBAE/B,gBAAeX,gBAAiB"}
+{"version":3,"sources":["../../../src/core/CodeSnippet/LanguageSelector.tsx"],"sourcesContent":["import React, { memo, useMemo } from \"react\";\nimport * as Select from \"@radix-ui/react-select\";\nimport Icon from \"../Icon\";\nimport { IconName } from \"../Icon/types\";\nimport TooltipButton from \"./TooltipButton\";\n\ninterface LanguageInfo {\n  label: string;\n  icon: IconName;\n}\n\ninterface LanguageSelectorProps {\n  languages: string[];\n  activeLanguage: string | null;\n  onLanguageChange: (language: string) => void;\n  getLanguageDisplayName: (lang: string) => string;\n  getLanguageIcon: (lang: string) => IconName;\n  activeLanguageInfo: LanguageInfo | null;\n}\n\nconst LanguageSelector = memo(\n  ({\n    languages,\n    activeLanguage,\n    onLanguageChange,\n    getLanguageDisplayName,\n    getLanguageIcon,\n    activeLanguageInfo,\n  }: LanguageSelectorProps) => {\n    // Memoize the desktop language elements to avoid recreating on each render\n    const desktopLanguageElements = useMemo(\n      () =>\n        languages.map((lang) => {\n          const active = activeLanguage === lang;\n          const displayName = getLanguageDisplayName(lang);\n\n          return (\n            <TooltipButton\n              key={lang}\n              tooltip={displayName}\n              active={active}\n              onClick={() => onLanguageChange(lang)}\n              icon={getLanguageIcon(lang)}\n              variant=\"segmented\"\n              size=\"sm\"\n            >\n              {displayName}\n            </TooltipButton>\n          );\n        }),\n      [\n        languages,\n        activeLanguage,\n        onLanguageChange,\n        getLanguageDisplayName,\n        getLanguageIcon,\n      ],\n    );\n\n    // Memoize the mobile language elements\n    const mobileLanguageElements = useMemo(\n      () =>\n        languages.map((lang) => (\n          <Select.Item\n            key={lang}\n            value={lang}\n            className=\"relative flex items-center rounded px-8 py-6 text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base\"\n          >\n            <Select.ItemText asChild>\n              <div className=\"flex items-center gap-8\">\n                <Icon name={getLanguageIcon(lang)} size=\"20px\" />\n                <span>{getLanguageDisplayName(lang)}</span>\n              </div>\n            </Select.ItemText>\n            <Select.ItemIndicator className=\"absolute right-8\">\n              <Icon name=\"icon-gui-check-outline\" size=\"16px\" />\n            </Select.ItemIndicator>\n          </Select.Item>\n        )),\n      [languages, getLanguageDisplayName, getLanguageIcon],\n    );\n\n    // Memoize the mobile Select.Value content as it's recreated on every render\n    const mobileSelectValue = useMemo(\n      () =>\n        activeLanguage && activeLanguageInfo ? (\n          <div className=\"flex items-center gap-8\">\n            <Icon name={activeLanguageInfo.icon} size=\"20px\" />\n            <span>{activeLanguageInfo.label}</span>\n          </div>\n        ) : null,\n      [activeLanguage, activeLanguageInfo],\n    );\n\n    return (\n      <div className=\"p-8 border-b border-neutral-200 dark:border-neutral-1100 overflow-x-auto h-[58px]\">\n        {/* Desktop language selector - SegmentedControls */}\n        <div className=\"hidden sm:flex gap-8\">{desktopLanguageElements}</div>\n\n        {/* Mobile language selector - Select dropdown */}\n        <div className=\"sm:hidden w-full\">\n          <Select.Root\n            value={activeLanguage || undefined}\n            onValueChange={onLanguageChange}\n          >\n            <Select.Trigger\n              className=\"w-full inline-flex items-center justify-between rounded-lg px-12 py-8 text-14 text-neutral-1300 dark:text-neutral-000 bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 gap-4 border border-neutral-300 dark:border-neutral-900 focus-base\"\n              aria-label=\"Select language\"\n            >\n              <Select.Value asChild>{mobileSelectValue}</Select.Value>\n              <Select.Icon>\n                <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n              </Select.Icon>\n            </Select.Trigger>\n\n            <Select.Portal>\n              <Select.Content\n                className=\"overflow-hidden rounded-md bg-neutral-000 dark:bg-neutral-1300 border border-neutral-200 dark:border-neutral-1000 shadow-md z-50 w-[var(--radix-select-trigger-width)]\"\n                position=\"popper\"\n              >\n                <Select.ScrollUpButton className=\"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n                  <Icon\n                    name=\"icon-gui-chevron-down-outline\"\n                    size=\"16px\"\n                    additionalCSS=\"rotate-180\"\n                  />\n                </Select.ScrollUpButton>\n\n                <Select.Viewport className=\"p-4\">\n                  {mobileLanguageElements}\n                </Select.Viewport>\n\n                <Select.ScrollDownButton className=\"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n                  <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n                </Select.ScrollDownButton>\n              </Select.Content>\n            </Select.Portal>\n          </Select.Root>\n        </div>\n      </div>\n    );\n  },\n);\n\n// Define a display name to improve debugging\nLanguageSelector.displayName = \"LanguageSelector\";\n\nexport default LanguageSelector;\n"],"names":["React","memo","useMemo","Select","Icon","TooltipButton","LanguageSelector","languages","activeLanguage","onLanguageChange","getLanguageDisplayName","getLanguageIcon","activeLanguageInfo","desktopLanguageElements","map","lang","active","displayName","key","tooltip","onClick","icon","variant","size","mobileLanguageElements","Item","value","className","ItemText","asChild","div","name","span","ItemIndicator","mobileSelectValue","label","Root","undefined","onValueChange","Trigger","aria-label","Value","Portal","Content","position","ScrollUpButton","additionalCSS","Viewport","ScrollDownButton"],"mappings":"AAAA,OAAOA,OAASC,IAAI,CAAEC,OAAO,KAAQ,OAAQ,AAC7C,WAAYC,WAAY,wBAAyB,AACjD,QAAOC,SAAU,SAAU,AAE3B,QAAOC,kBAAmB,iBAAkB,CAgB5C,MAAMC,iBAAmBL,KACvB,CAAC,CACCM,SAAS,CACTC,cAAc,CACdC,gBAAgB,CAChBC,sBAAsB,CACtBC,eAAe,CACfC,kBAAkB,CACI,IAEtB,MAAMC,wBAA0BX,QAC9B,IACEK,UAAUO,GAAG,CAAC,AAACC,OACb,MAAMC,OAASR,iBAAmBO,KAClC,MAAME,YAAcP,uBAAuBK,MAE3C,OACE,oBAACV,eACCa,IAAKH,KACLI,QAASF,YACTD,OAAQA,OACRI,QAAS,IAAMX,iBAAiBM,MAChCM,KAAMV,gBAAgBI,MACtBO,QAAQ,YACRC,KAAK,MAEJN,YAGP,GACF,CACEV,UACAC,eACAC,iBACAC,uBACAC,gBACD,EAIH,MAAMa,uBAAyBtB,QAC7B,IACEK,UAAUO,GAAG,CAAC,AAACC,MACb,oBAACZ,OAAOsB,IAAI,EACVP,IAAKH,KACLW,MAAOX,KACPY,UAAU,iRAEV,oBAACxB,OAAOyB,QAAQ,EAACC,QAAAA,MACf,oBAACC,OAAIH,UAAU,2BACb,oBAACvB,MAAK2B,KAAMpB,gBAAgBI,MAAOQ,KAAK,SACxC,oBAACS,YAAMtB,uBAAuBK,SAGlC,oBAACZ,OAAO8B,aAAa,EAACN,UAAU,oBAC9B,oBAACvB,MAAK2B,KAAK,yBAAyBR,KAAK,YAIjD,CAAChB,UAAWG,uBAAwBC,gBAAgB,EAItD,MAAMuB,kBAAoBhC,QACxB,IACEM,gBAAkBI,mBAChB,oBAACkB,OAAIH,UAAU,2BACb,oBAACvB,MAAK2B,KAAMnB,mBAAmBS,IAAI,CAAEE,KAAK,SAC1C,oBAACS,YAAMpB,mBAAmBuB,KAAK,GAE/B,KACN,CAAC3B,eAAgBI,mBAAmB,EAGtC,OACE,oBAACkB,OAAIH,UAAU,qFAEb,oBAACG,OAAIH,UAAU,wBAAwBd,yBAGvC,oBAACiB,OAAIH,UAAU,oBACb,oBAACxB,OAAOiC,IAAI,EACVV,MAAOlB,gBAAkB6B,UACzBC,cAAe7B,kBAEf,oBAACN,OAAOoC,OAAO,EACbZ,UAAU,+QACVa,aAAW,mBAEX,oBAACrC,OAAOsC,KAAK,EAACZ,QAAAA,MAASK,mBACvB,oBAAC/B,OAAOC,IAAI,MACV,oBAACA,MAAK2B,KAAK,gCAAgCR,KAAK,WAIpD,oBAACpB,OAAOuC,MAAM,MACZ,oBAACvC,OAAOwC,OAAO,EACbhB,UAAU,yKACViB,SAAS,UAET,oBAACzC,OAAO0C,cAAc,EAAClB,UAAU,+IAC/B,oBAACvB,MACC2B,KAAK,gCACLR,KAAK,OACLuB,cAAc,gBAIlB,oBAAC3C,OAAO4C,QAAQ,EAACpB,UAAU,OACxBH,wBAGH,oBAACrB,OAAO6C,gBAAgB,EAACrB,UAAU,+IACjC,oBAACvB,MAAK2B,KAAK,gCAAgCR,KAAK,cAQhE,EAIFjB,CAAAA,iBAAiBW,WAAW,CAAG,kBAE/B,gBAAeX,gBAAiB"}

package/core/CodeSnippet/ShellCommandView.js

@@ -1,2 +1,2 @@
-import React,{useRef,useCallback}from"react";import Icon from"../Icon";import Code from"../Code";import cn from"../utils/cn";import useCopyToClipboard from"../utils/useCopyToClipboard";import CopyButton from"./CopyButton";const ShellCommandView=({content,className})=>{const{isCopied,copy}=useCopyToClipboard();const codeRef=useRef(null);const[isHovering,setIsHovering]=React.useState(false);const handleCopy=useCallback(()=>{if(!codeRef.current)return;copy(content)},[copy,content]);return React.createElement("div",{className:cn("rounded-lg overflow-hidden bg-neutral-000 dark:bg-neutral-1300 border border-neutral-300 dark:border-neutral-1000 relative min-h-[54px]",className),onMouseEnter:()=>setIsHovering(true),onMouseLeave:()=>setIsHovering(false),onFocus:()=>setIsHovering(true),onBlur:()=>setIsHovering(false),tabIndex:0,ref:codeRef},React.createElement("div",{className:"absolute top-8 left-8 z-10"},React.createElement("div",{className:"w-36 h-36 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100"},React.createElement(Icon,{name:"icon-gui-command-line-outline",size:"20px",color:"text-neutral-1300 dark:text-neutral-000"}))),React.createElement("div",{className:"pl-56"},React.createElement(Code,{language:"shell",snippet:content,additionalCSS:"bg-neutral-000 text-neutral-1300 dark:bg-neutral-1300 dark:text-neutral-200 pl-[56px] py-12",showLines:false})),isHovering&&React.createElement(CopyButton,{onCopy:handleCopy,isCopied:isCopied}))};export default ShellCommandView;
+import React,{useRef,useState,useCallback,memo}from"react";import Icon from"../Icon";import Code from"../Code";import cn from"../utils/cn";import useCopyToClipboard from"../utils/useCopyToClipboard";import CopyButton from"./CopyButton";const ShellCommandView=({content,className})=>{const{isCopied,copy}=useCopyToClipboard();const codeRef=useRef(null);const[isHovering,setIsHovering]=useState(false);const handleCopy=useCallback(()=>{copy(content)},[copy,content]);const handleHoverChange=useCallback(hovering=>{setIsHovering(hovering)},[]);const ShellIcon=()=>React.createElement("div",{className:"absolute top-8 left-8 z-10"},React.createElement("div",{className:"w-36 h-36 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100"},React.createElement(Icon,{name:"icon-gui-command-line-outline",size:"20px",color:"text-neutral-1300 dark:text-neutral-000"})));return React.createElement("div",{className:cn("rounded-lg overflow-hidden bg-neutral-000 dark:bg-neutral-1300 border border-neutral-300 dark:border-neutral-1000 relative min-h-[54px]",className),onMouseEnter:()=>handleHoverChange(true),onMouseLeave:()=>handleHoverChange(false),onFocus:()=>handleHoverChange(true),onBlur:()=>handleHoverChange(false),tabIndex:0,ref:codeRef},React.createElement(ShellIcon,null),React.createElement("div",{className:"pl-56"},React.createElement(Code,{language:"shell",snippet:content,additionalCSS:"bg-neutral-000 text-neutral-1300 dark:bg-neutral-1300 dark:text-neutral-200 pl-[56px] py-12",showLines:false})),isHovering&&React.createElement(CopyButton,{onCopy:handleCopy,isCopied:isCopied}))};export default memo(ShellCommandView);
 //# sourceMappingURL=ShellCommandView.js.map

package/core/CodeSnippet/ShellCommandView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/CodeSnippet/ShellCommandView.tsx"],"sourcesContent":["import React, { useRef, useCallback } from \"react\";\nimport Icon from \"../Icon\";\nimport Code from \"../Code\";\nimport cn from \"../utils/cn\";\nimport useCopyToClipboard from \"../utils/useCopyToClipboard\";\nimport CopyButton from \"./CopyButton\";\n\ninterface ShellCommandViewProps {\n  content: string;\n  className?: string;\n}\n\n/**\n * A specialized component for displaying shell commands with copy functionality\n */\nconst ShellCommandView: React.FC<ShellCommandViewProps> = ({\n  content,\n  className,\n}) => {\n  const { isCopied, copy } = useCopyToClipboard();\n  const codeRef = useRef<HTMLDivElement>(null);\n  const [isHovering, setIsHovering] = React.useState(false);\n\n  const handleCopy = useCallback(() => {\n    if (!codeRef.current) return;\n    copy(content);\n  }, [copy, content]);\n\n  return (\n    <div\n      className={cn(\n        \"rounded-lg overflow-hidden bg-neutral-000 dark:bg-neutral-1300 border border-neutral-300 dark:border-neutral-1000 relative min-h-[54px]\",\n        className,\n      )}\n      onMouseEnter={() => setIsHovering(true)}\n      onMouseLeave={() => setIsHovering(false)}\n      onFocus={() => setIsHovering(true)}\n      onBlur={() => setIsHovering(false)}\n      tabIndex={0}\n      ref={codeRef}\n    >\n      {/* Shell Icon */}\n      <div className=\"absolute top-8 left-8 z-10\">\n        <div className=\"w-36 h-36 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100\">\n          <Icon\n            name=\"icon-gui-command-line-outline\"\n            size=\"20px\"\n            color=\"text-neutral-1300 dark:text-neutral-000\"\n          />\n        </div>\n      </div>\n\n      {/* Code Content */}\n      <div className=\"pl-56\">\n        <Code\n          language=\"shell\"\n          snippet={content}\n          additionalCSS=\"bg-neutral-000 text-neutral-1300 dark:bg-neutral-1300 dark:text-neutral-200 pl-[56px] py-12\"\n          showLines={false}\n        />\n      </div>\n\n      {/* Copy Button - only shown on hover */}\n      {isHovering && <CopyButton onCopy={handleCopy} isCopied={isCopied} />}\n    </div>\n  );\n};\n\nexport default ShellCommandView;\n"],"names":["React","useRef","useCallback","Icon","Code","cn","useCopyToClipboard","CopyButton","ShellCommandView","content","className","isCopied","copy","codeRef","isHovering","setIsHovering","useState","handleCopy","current","div","onMouseEnter","onMouseLeave","onFocus","onBlur","tabIndex","ref","name","size","color","language","snippet","additionalCSS","showLines","onCopy"],"mappings":"AAAA,OAAOA,OAASC,MAAM,CAAEC,WAAW,KAAQ,OAAQ,AACnD,QAAOC,SAAU,SAAU,AAC3B,QAAOC,SAAU,SAAU,AAC3B,QAAOC,OAAQ,aAAc,AAC7B,QAAOC,uBAAwB,6BAA8B,AAC7D,QAAOC,eAAgB,cAAe,CAUtC,MAAMC,iBAAoD,CAAC,CACzDC,OAAO,CACPC,SAAS,CACV,IACC,KAAM,CAAEC,QAAQ,CAAEC,IAAI,CAAE,CAAGN,qBAC3B,MAAMO,QAAUZ,OAAuB,MACvC,KAAM,CAACa,WAAYC,cAAc,CAAGf,MAAMgB,QAAQ,CAAC,OAEnD,MAAMC,WAAaf,YAAY,KAC7B,GAAI,CAACW,QAAQK,OAAO,CAAE,OACtBN,KAAKH,QACP,EAAG,CAACG,KAAMH,QAAQ,EAElB,OACE,oBAACU,OACCT,UAAWL,GACT,0IACAK,WAEFU,aAAc,IAAML,cAAc,MAClCM,aAAc,IAAMN,cAAc,OAClCO,QAAS,IAAMP,cAAc,MAC7BQ,OAAQ,IAAMR,cAAc,OAC5BS,SAAU,EACVC,IAAKZ,SAGL,oBAACM,OAAIT,UAAU,8BACb,oBAACS,OAAIT,UAAU,6FACb,oBAACP,MACCuB,KAAK,gCACLC,KAAK,OACLC,MAAM,8CAMZ,oBAACT,OAAIT,UAAU,SACb,oBAACN,MACCyB,SAAS,QACTC,QAASrB,QACTsB,cAAc,8FACdC,UAAW,SAKdlB,YAAc,oBAACP,YAAW0B,OAAQhB,WAAYN,SAAUA,WAG/D,CAEA,gBAAeH,gBAAiB"}
+{"version":3,"sources":["../../../src/core/CodeSnippet/ShellCommandView.tsx"],"sourcesContent":["import React, { useRef, useState, useCallback, memo } from \"react\";\nimport Icon from \"../Icon\";\nimport Code from \"../Code\";\nimport cn from \"../utils/cn\";\nimport useCopyToClipboard from \"../utils/useCopyToClipboard\";\nimport CopyButton from \"./CopyButton\";\n\ninterface ShellCommandViewProps {\n  content: string;\n  className?: string;\n}\n\n/**\n * A specialized component for displaying shell commands with copy functionality\n */\nconst ShellCommandView: React.FC<ShellCommandViewProps> = ({\n  content,\n  className,\n}) => {\n  const { isCopied, copy } = useCopyToClipboard();\n  const codeRef = useRef<HTMLDivElement>(null);\n  const [isHovering, setIsHovering] = useState(false);\n\n  // Handler to copy the shell command content\n  const handleCopy = useCallback(() => {\n    copy(content);\n  }, [copy, content]);\n\n  // Handler for mouse events to control hover state\n  const handleHoverChange = useCallback((hovering: boolean) => {\n    setIsHovering(hovering);\n  }, []);\n\n  // Shell Icon rendered as a memoized component\n  const ShellIcon = () => (\n    <div className=\"absolute top-8 left-8 z-10\">\n      <div className=\"w-36 h-36 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100\">\n        <Icon\n          name=\"icon-gui-command-line-outline\"\n          size=\"20px\"\n          color=\"text-neutral-1300 dark:text-neutral-000\"\n        />\n      </div>\n    </div>\n  );\n\n  return (\n    <div\n      className={cn(\n        \"rounded-lg overflow-hidden bg-neutral-000 dark:bg-neutral-1300 border border-neutral-300 dark:border-neutral-1000 relative min-h-[54px]\",\n        className,\n      )}\n      onMouseEnter={() => handleHoverChange(true)}\n      onMouseLeave={() => handleHoverChange(false)}\n      onFocus={() => handleHoverChange(true)}\n      onBlur={() => handleHoverChange(false)}\n      tabIndex={0}\n      ref={codeRef}\n    >\n      <ShellIcon />\n\n      {/* Code Content */}\n      <div className=\"pl-56\">\n        <Code\n          language=\"shell\"\n          snippet={content}\n          additionalCSS=\"bg-neutral-000 text-neutral-1300 dark:bg-neutral-1300 dark:text-neutral-200 pl-[56px] py-12\"\n          showLines={false}\n        />\n      </div>\n\n      {/* Copy Button - only shown on hover */}\n      {isHovering && <CopyButton onCopy={handleCopy} isCopied={isCopied} />}\n    </div>\n  );\n};\n\nexport default memo(ShellCommandView);\n"],"names":["React","useRef","useState","useCallback","memo","Icon","Code","cn","useCopyToClipboard","CopyButton","ShellCommandView","content","className","isCopied","copy","codeRef","isHovering","setIsHovering","handleCopy","handleHoverChange","hovering","ShellIcon","div","name","size","color","onMouseEnter","onMouseLeave","onFocus","onBlur","tabIndex","ref","language","snippet","additionalCSS","showLines","onCopy"],"mappings":"AAAA,OAAOA,OAASC,MAAM,CAAEC,QAAQ,CAAEC,WAAW,CAAEC,IAAI,KAAQ,OAAQ,AACnE,QAAOC,SAAU,SAAU,AAC3B,QAAOC,SAAU,SAAU,AAC3B,QAAOC,OAAQ,aAAc,AAC7B,QAAOC,uBAAwB,6BAA8B,AAC7D,QAAOC,eAAgB,cAAe,CAUtC,MAAMC,iBAAoD,CAAC,CACzDC,OAAO,CACPC,SAAS,CACV,IACC,KAAM,CAAEC,QAAQ,CAAEC,IAAI,CAAE,CAAGN,qBAC3B,MAAMO,QAAUd,OAAuB,MACvC,KAAM,CAACe,WAAYC,cAAc,CAAGf,SAAS,OAG7C,MAAMgB,WAAaf,YAAY,KAC7BW,KAAKH,QACP,EAAG,CAACG,KAAMH,QAAQ,EAGlB,MAAMQ,kBAAoBhB,YAAY,AAACiB,WACrCH,cAAcG,SAChB,EAAG,EAAE,EAGL,MAAMC,UAAY,IAChB,oBAACC,OAAIV,UAAU,8BACb,oBAACU,OAAIV,UAAU,6FACb,oBAACP,MACCkB,KAAK,gCACLC,KAAK,OACLC,MAAM,8CAMd,OACE,oBAACH,OACCV,UAAWL,GACT,0IACAK,WAEFc,aAAc,IAAMP,kBAAkB,MACtCQ,aAAc,IAAMR,kBAAkB,OACtCS,QAAS,IAAMT,kBAAkB,MACjCU,OAAQ,IAAMV,kBAAkB,OAChCW,SAAU,EACVC,IAAKhB,SAEL,oBAACM,gBAGD,oBAACC,OAAIV,UAAU,SACb,oBAACN,MACC0B,SAAS,QACTC,QAAStB,QACTuB,cAAc,8FACdC,UAAW,SAKdnB,YAAc,oBAACP,YAAW2B,OAAQlB,WAAYL,SAAUA,WAG/D,CAEA,gBAAeT,KAAKM,iBAAkB"}

package/core/CodeSnippet/TooltipButton.js

@@ -1,2 +1,2 @@
-import React from"react";import Tooltip from"../Tooltip";import SegmentedControl from"../SegmentedControl";import cn from"../utils/cn";const TooltipButton=({tooltip,active=false,onClick,icon,className,children,variant="segmented",size="sm",alwaysShowLabel=false})=>{const showTooltip=variant==="segmented"&&!active||variant==="icon-button";let buttonElement;if(variant==="segmented"){buttonElement=React.createElement(SegmentedControl,{size:size,active:active,onClick:onClick,leftIcon:icon,className:cn("focus-base",active?"bg-neutral-000 dark:bg-neutral-1300":"bg-neutral-100 dark:bg-neutral-1200",className)},active||alwaysShowLabel?children:null)}else{buttonElement=React.createElement("div",{role:"button",className:cn("w-32 h-32 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 transition-colors focus-base",className),onClick:onClick,"aria-label":tooltip},children)}if(showTooltip){return React.createElement(Tooltip,{triggerElement:buttonElement,className:"ml-0"},tooltip)}return buttonElement};export default TooltipButton;
+import React,{memo,useMemo}from"react";import Tooltip from"../Tooltip";import SegmentedControl from"../SegmentedControl";import cn from"../utils/cn";const TooltipButton=memo(({tooltip,active=false,onClick,icon,className,children,variant="segmented",size="sm",alwaysShowLabel=false})=>{const showTooltip=variant==="segmented"&&!active||variant==="icon-button";const showChildren=active||alwaysShowLabel;const buttonElement=useMemo(()=>{if(variant==="segmented"){return React.createElement(SegmentedControl,{size:size,active:active,onClick:onClick,leftIcon:icon,className:cn("focus-base",active?"bg-neutral-000 dark:bg-neutral-1300":"bg-neutral-100 dark:bg-neutral-1200",className)},showChildren?children:null)}return React.createElement("div",{role:"button",className:cn("w-32 h-32 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 transition-colors focus-base",className),onClick:onClick,"aria-label":tooltip},children)},[variant,size,active,onClick,icon,className,showChildren,children,tooltip]);if(showTooltip){return React.createElement(Tooltip,{triggerElement:buttonElement,className:"ml-0"},tooltip)}return buttonElement});TooltipButton.displayName="TooltipButton";export default TooltipButton;
 //# sourceMappingURL=TooltipButton.js.map

package/core/CodeSnippet/TooltipButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/CodeSnippet/TooltipButton.tsx"],"sourcesContent":["import React from \"react\";\nimport Tooltip from \"../Tooltip\";\nimport SegmentedControl from \"../SegmentedControl\";\nimport cn from \"../utils/cn\";\nimport { IconName } from \"../Icon/types\";\n\ninterface TooltipButtonProps {\n  tooltip: string;\n  active?: boolean;\n  onClick: () => void;\n  icon?: IconName;\n  className?: string;\n  children?: React.ReactNode;\n  variant?: \"segmented\" | \"icon-button\";\n  size?: \"sm\" | \"md\";\n  alwaysShowLabel?: boolean;\n}\n\n/**\n * A unified tooltip button component that can render either a segmented control or an icon button\n */\nconst TooltipButton: React.FC<TooltipButtonProps> = ({\n  tooltip,\n  active = false,\n  onClick,\n  icon,\n  className,\n  children,\n  variant = \"segmented\",\n  size = \"sm\",\n  alwaysShowLabel = false,\n}) => {\n  // Only show tooltip for inactive segmented controls or all icon buttons\n  const showTooltip =\n    (variant === \"segmented\" && !active) || variant === \"icon-button\";\n\n  // The button element\n  let buttonElement;\n\n  if (variant === \"segmented\") {\n    buttonElement = (\n      <SegmentedControl\n        size={size}\n        active={active}\n        onClick={onClick}\n        leftIcon={icon}\n        className={cn(\n          \"focus-base\",\n          active\n            ? \"bg-neutral-000 dark:bg-neutral-1300\"\n            : \"bg-neutral-100 dark:bg-neutral-1200\",\n          className,\n        )}\n      >\n        {active || alwaysShowLabel ? children : null}\n      </SegmentedControl>\n    );\n  } else {\n    buttonElement = (\n      <div\n        role=\"button\"\n        className={cn(\n          \"w-32 h-32 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 transition-colors focus-base\",\n          className,\n        )}\n        onClick={onClick}\n        aria-label={tooltip}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  if (showTooltip) {\n    return (\n      <Tooltip triggerElement={buttonElement} className=\"ml-0\">\n        {tooltip}\n      </Tooltip>\n    );\n  }\n\n  return buttonElement;\n};\n\nexport default TooltipButton;\n"],"names":["React","Tooltip","SegmentedControl","cn","TooltipButton","tooltip","active","onClick","icon","className","children","variant","size","alwaysShowLabel","showTooltip","buttonElement","leftIcon","div","role","aria-label","triggerElement"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,YAAa,YAAa,AACjC,QAAOC,qBAAsB,qBAAsB,AACnD,QAAOC,OAAQ,aAAc,CAkB7B,MAAMC,cAA8C,CAAC,CACnDC,OAAO,CACPC,OAAS,KAAK,CACdC,OAAO,CACPC,IAAI,CACJC,SAAS,CACTC,QAAQ,CACRC,QAAU,WAAW,CACrBC,KAAO,IAAI,CACXC,gBAAkB,KAAK,CACxB,IAEC,MAAMC,YACJ,AAACH,UAAY,aAAe,CAACL,QAAWK,UAAY,cAGtD,IAAII,cAEJ,GAAIJ,UAAY,YAAa,CAC3BI,cACE,oBAACb,kBACCU,KAAMA,KACNN,OAAQA,OACRC,QAASA,QACTS,SAAUR,KACVC,UAAWN,GACT,aACAG,OACI,sCACA,sCACJG,YAGDH,QAAUO,gBAAkBH,SAAW,KAG9C,KAAO,CACLK,cACE,oBAACE,OACCC,KAAK,SACLT,UAAWN,GACT,yKACAM,WAEFF,QAASA,QACTY,aAAYd,SAEXK,SAGP,CAEA,GAAII,YAAa,CACf,OACE,oBAACb,SAAQmB,eAAgBL,cAAeN,UAAU,QAC/CJ,QAGP,CAEA,OAAOU,aACT,CAEA,gBAAeX,aAAc"}
+{"version":3,"sources":["../../../src/core/CodeSnippet/TooltipButton.tsx"],"sourcesContent":["import React, { memo, useMemo } from \"react\";\nimport Tooltip from \"../Tooltip\";\nimport SegmentedControl from \"../SegmentedControl\";\nimport cn from \"../utils/cn\";\nimport { IconName } from \"../Icon/types\";\n\ninterface TooltipButtonProps {\n  tooltip: string;\n  active?: boolean;\n  onClick: () => void;\n  icon?: IconName;\n  className?: string;\n  children?: React.ReactNode;\n  variant?: \"segmented\" | \"icon-button\";\n  size?: \"sm\" | \"md\";\n  alwaysShowLabel?: boolean;\n}\n\n/**\n * A unified tooltip button component that can render either a segmented control or an icon button\n */\nconst TooltipButton = memo(\n  ({\n    tooltip,\n    active = false,\n    onClick,\n    icon,\n    className,\n    children,\n    variant = \"segmented\",\n    size = \"sm\",\n    alwaysShowLabel = false,\n  }: TooltipButtonProps) => {\n    // Only show tooltip for inactive segmented controls or all icon buttons\n    const showTooltip =\n      (variant === \"segmented\" && !active) || variant === \"icon-button\";\n\n    // Determine whether to show children based on active state and alwaysShowLabel\n    const showChildren = active || alwaysShowLabel;\n\n    // Create the button element based on variant\n    const buttonElement = useMemo(() => {\n      if (variant === \"segmented\") {\n        return (\n          <SegmentedControl\n            size={size}\n            active={active}\n            onClick={onClick}\n            leftIcon={icon}\n            className={cn(\n              \"focus-base\",\n              active\n                ? \"bg-neutral-000 dark:bg-neutral-1300\"\n                : \"bg-neutral-100 dark:bg-neutral-1200\",\n              className,\n            )}\n          >\n            {showChildren ? children : null}\n          </SegmentedControl>\n        );\n      }\n\n      return (\n        <div\n          role=\"button\"\n          className={cn(\n            \"w-32 h-32 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 transition-colors focus-base\",\n            className,\n          )}\n          onClick={onClick}\n          aria-label={tooltip}\n        >\n          {children}\n        </div>\n      );\n    }, [\n      variant,\n      size,\n      active,\n      onClick,\n      icon,\n      className,\n      showChildren,\n      children,\n      tooltip,\n    ]);\n\n    // Render with tooltip if needed\n    if (showTooltip) {\n      return (\n        <Tooltip triggerElement={buttonElement} className=\"ml-0\">\n          {tooltip}\n        </Tooltip>\n      );\n    }\n\n    return buttonElement;\n  },\n);\n\n// Add displayName for better debugging\nTooltipButton.displayName = \"TooltipButton\";\n\nexport default TooltipButton;\n"],"names":["React","memo","useMemo","Tooltip","SegmentedControl","cn","TooltipButton","tooltip","active","onClick","icon","className","children","variant","size","alwaysShowLabel","showTooltip","showChildren","buttonElement","leftIcon","div","role","aria-label","triggerElement","displayName"],"mappings":"AAAA,OAAOA,OAASC,IAAI,CAAEC,OAAO,KAAQ,OAAQ,AAC7C,QAAOC,YAAa,YAAa,AACjC,QAAOC,qBAAsB,qBAAsB,AACnD,QAAOC,OAAQ,aAAc,CAkB7B,MAAMC,cAAgBL,KACpB,CAAC,CACCM,OAAO,CACPC,OAAS,KAAK,CACdC,OAAO,CACPC,IAAI,CACJC,SAAS,CACTC,QAAQ,CACRC,QAAU,WAAW,CACrBC,KAAO,IAAI,CACXC,gBAAkB,KAAK,CACJ,IAEnB,MAAMC,YACJ,AAACH,UAAY,aAAe,CAACL,QAAWK,UAAY,cAGtD,MAAMI,aAAeT,QAAUO,gBAG/B,MAAMG,cAAgBhB,QAAQ,KAC5B,GAAIW,UAAY,YAAa,CAC3B,OACE,oBAACT,kBACCU,KAAMA,KACNN,OAAQA,OACRC,QAASA,QACTU,SAAUT,KACVC,UAAWN,GACT,aACAG,OACI,sCACA,sCACJG,YAGDM,aAAeL,SAAW,KAGjC,CAEA,OACE,oBAACQ,OACCC,KAAK,SACLV,UAAWN,GACT,yKACAM,WAEFF,QAASA,QACTa,aAAYf,SAEXK,SAGP,EAAG,CACDC,QACAC,KACAN,OACAC,QACAC,KACAC,UACAM,aACAL,SACAL,QACD,EAGD,GAAIS,YAAa,CACf,OACE,oBAACb,SAAQoB,eAAgBL,cAAeP,UAAU,QAC/CJ,QAGP,CAEA,OAAOW,aACT,EAIFZ,CAAAA,cAAckB,WAAW,CAAG,eAE5B,gBAAelB,aAAc"}

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{getLanguageInfo}from"./CodeSnippet/languages";import Icon from"./Icon";import LanguageSelector from"./CodeSnippet/LanguageSelector";import ApiKeySelector from"./CodeSnippet/ApiKeySelector";import useCopyToClipboard from"./utils/useCopyToClipboard";import ShellCommandView from"./CodeSnippet/ShellCommandView";import CopyButton from"./CodeSnippet/CopyButton";import TooltipButton from"./CodeSnippet/TooltipButton";const CodeSnippet=({fixed=false,headerRow=false,title="Code",children,className,lang,onChange,apiKeys,sdk})=>{const{childrenArray,languages,sdkTypes,originalLangMap,isSingleShellCommand}=useMemo(()=>{const childrenArray=Children.toArray(children);const languages=[];const sdkTypes=new Set;const originalLangMap=new Map;const isSingleShellCommand=childrenArray.length===1&&isValidElement(childrenArray[0])&&isValidElement(childrenArray[0].props.children)&&childrenArray[0].props.children.props.className?.includes("language-shell");childrenArray.forEach(child=>{if(!isValidElement(child))return;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement||!codeElement.props.className)return;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return;const langName=langClass.substring(9);if(langName.startsWith("realtime_")){const baseLanguage=langName.substring(9);sdkTypes.add("realtime");originalLangMap.set(langName,baseLanguage)}else if(langName.startsWith("rest_")){const baseLanguage=langName.substring(5);sdkTypes.add("rest");originalLangMap.set(langName,baseLanguage)}else{originalLangMap.set(langName,langName)}if(!languages.includes(langName)){languages.push(langName)}});return{childrenArray,languages,sdkTypes,originalLangMap,isSingleShellCommand}},[children]);const showSDKSelector=sdkTypes.size>0;const hasOnlyJsonSnippet=useMemo(()=>{return languages.length===1&&languages[0]==="json"},[languages]);const initialSDKType=useMemo(()=>{if(sdkTypes.size===0){return null}if(sdk&&sdkTypes.has(sdk))return sdk;if(sdkTypes.has("realtime"))return"realtime";if(sdkTypes.has("rest"))return"rest";return null},[sdk,sdkTypes]);const[state,setState]=useState(()=>({activeSDKType:initialSDKType,activeLanguage:null,selectedApiKey:apiKeys&&apiKeys.length>0?apiKeys[0]:"",ui:{isHovering:false}}));const{isCopied,copy}=useCopyToClipboard();const filteredLanguages=useMemo(()=>{if(!state.activeSDKType||!showSDKSelector){return languages}return languages.filter(lang=>lang.startsWith(`${state.activeSDKType}_`))},[state.activeSDKType,showSDKSelector,languages]);const initialActiveLanguage=useMemo(()=>{if(!lang){return filteredLanguages.length>0?filteredLanguages[0]:null}if(state.activeSDKType){const prefixedLang=`${state.activeSDKType}_${lang}`;if(languages.includes(prefixedLang)){return prefixedLang}}if(languages.includes(lang)){return lang}if(getLanguageInfo(lang).label!==lang){return lang}return filteredLanguages.length>0?filteredLanguages[0]:null},[lang,state.activeSDKType,languages,filteredLanguages]);useEffect(()=>{setState(prevState=>({...prevState,activeLanguage:initialActiveLanguage}))},[initialActiveLanguage]);const codeRef=useRef(null);const processedChildren=useMemo(()=>{if(!state.activeLanguage)return[];const targetLanguage=hasOnlyJsonSnippet?"json":state.activeLanguage;return childrenArray.filter(child=>{if(!isValidElement(child))return false;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement||!codeElement.props.className)return false;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return false;const langName=langClass.substring(9);return langName===targetLanguage}).map(child=>{if(!isValidElement(child))return child;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement)return child;const codeContent=codeElement.props.children;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return child;const langName=langClass.substring(9);const cleanLang=hasOnlyJsonSnippet?"json":originalLangMap.get(langName)||langName;const langInfo=getLanguageInfo(cleanLang);if(typeof codeContent==="string"||typeof codeContent==="number"||typeof codeContent==="boolean"){return React.createElement(Code,{key:langName,language:langInfo.syntaxHighlighterKey||cleanLang,snippet:String(codeContent),additionalCSS:"bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-24 py-16",showLines:true})}return child})},[state.activeLanguage,childrenArray,originalLangMap,hasOnlyJsonSnippet]);const hasSnippetForActiveLanguage=useMemo(()=>{if(!state.activeLanguage)return false;if(hasOnlyJsonSnippet)return true;return childrenArray.some(child=>{if(!isValidElement(child))return false;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement||!codeElement.props.className)return false;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return false;const langName=langClass.substring(9);return langName===state.activeLanguage})},[state.activeLanguage,childrenArray,hasOnlyJsonSnippet]);const getCodeText=useCallback(()=>{if(!state.activeLanguage||!hasSnippetForActiveLanguage||!codeRef.current)return null;const allPreElements=codeRef.current.querySelectorAll("pre");for(const preElement of Array.from(allPreElements)){const codeElement=preElement.querySelector("code");if(!codeElement||!codeElement.className)continue;const classNames=codeElement.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)continue;const langName=langClass.substring(9);if(hasOnlyJsonSnippet&&langName==="json"||!hasOnlyJsonSnippet&&langName===state.activeLanguage){return codeElement.textContent||""}}return null},[state.activeLanguage,hasSnippetForActiveLanguage,hasOnlyJsonSnippet]);useEffect(()=>{if(apiKeys&&apiKeys.length>0&&!apiKeys.includes(state.selectedApiKey)){setState(prev=>({...prev,selectedApiKey:apiKeys[0]}))}},[apiKeys,state.selectedApiKey]);const handleSDKTypeChange=useCallback(type=>{const nextLang=languages.find(l=>l.startsWith(`${type}_`))??null;setState(prev=>({...prev,activeSDKType:type,activeLanguage:nextLang}))},[languages]);const handleLanguageChange=useCallback(language=>{setState(prev=>({...prev,activeLanguage:language}));if(onChange){const cleanLang=originalLangMap.get(language)||language;onChange(cleanLang,state.activeSDKType)}},[onChange,originalLangMap,state.activeSDKType]);const handleMouseEnter=useCallback(()=>{setState(prev=>({...prev,ui:{...prev.ui,isHovering:true}}))},[]);const handleMouseLeave=useCallback(()=>{setState(prev=>({...prev,ui:{...prev.ui,isHovering:false}}))},[]);const handleApiKeyChange=useCallback(apiKey=>{setState(prev=>({...prev,selectedApiKey:apiKey}))},[]);const getDisplayLanguageInfo=useCallback(lang=>{if(!lang)return null;const cleanLang=originalLangMap.get(lang)||lang;return getLanguageInfo(cleanLang)},[originalLangMap]);const activeLanguageInfo=useMemo(()=>getDisplayLanguageInfo(state.activeLanguage),[getDisplayLanguageInfo,state.activeLanguage]);const getLanguageDisplayName=useCallback(lang=>{const cleanLang=originalLangMap.get(lang)||lang;return getLanguageInfo(cleanLang).label},[originalLangMap]);const getLanguageIcon=useCallback(lang=>{const cleanLang=originalLangMap.get(lang)||lang;return getLanguageInfo(cleanLang).icon},[originalLangMap]);const NoSnippetMessage=useMemo(()=>{if(!activeLanguageInfo)return()=>null;return()=>React.createElement("div",{className:"px-64 py-24 ui-text-body2 text-neutral-800 dark:text-neutral-400 text-center flex flex-col gap-12 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."))},[activeLanguageInfo]);const showLanguageSelector=!fixed&&filteredLanguages.length>0;const showFullSelector=filteredLanguages.length>1;const renderContent=()=>{if(!state.activeLanguage){return null}if(hasSnippetForActiveLanguage){return processedChildren}if(activeLanguageInfo){return React.createElement(NoSnippetMessage,null)}return null};if(isSingleShellCommand){const shellChild=childrenArray[0];if(isValidElement(shellChild)&&isValidElement(shellChild.props.children)){const codeElement=shellChild.props.children;const codeContent=codeElement.props.children;return React.createElement(ShellCommandView,{content:String(codeContent),className:className})}}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-[54px]",className)},headerRow&&React.createElement("div",{className:"h-[38px] bg-neutral-200 dark:bg-neutral-1100 border-b border-neutral-300 dark:border-neutral-1000 flex items-center py-4 px-12 rounded-t-lg"},React.createElement("div",{className:"flex space-x-6"},React.createElement("div",{className:"w-[12px] h-[12px] rounded-full bg-orange-500"}),React.createElement("div",{className:"w-[12px] h-[12px] rounded-full bg-yellow-500"}),React.createElement("div",{className:"w-[12px] h-[12px] 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-[48px]"})),showSDKSelector&&React.createElement("div",{className:cn("p-8 border-b border-neutral-200 dark:border-neutral-1100 h-[56px]",headerRow?"":"rounded-t-lg")},React.createElement("div",{className:"flex gap-12 justify-start"},sdkTypes.has("realtime")&&React.createElement(TooltipButton,{tooltip:"Realtime SDK",active:state.activeSDKType==="realtime",onClick:()=>handleSDKTypeChange("realtime"),variant:"segmented",size:"sm",alwaysShowLabel:true},"Realtime"),sdkTypes.has("rest")&&React.createElement(TooltipButton,{tooltip:"REST SDK",active:state.activeSDKType==="rest",onClick:()=>handleSDKTypeChange("rest"),variant:"segmented",size:"sm",alwaysShowLabel:true},"REST"))),showLanguageSelector&&(showFullSelector?React.createElement(LanguageSelector,{languages:filteredLanguages,activeLanguage:state.activeLanguage,onLanguageChange:handleLanguageChange,getLanguageDisplayName:getLanguageDisplayName,getLanguageIcon:getLanguageIcon,activeLanguageInfo:activeLanguageInfo}):React.createElement("div",{className:cn("border-b border-neutral-200 dark:border-neutral-1100 h-[34px] flex items-center px-12",headerRow?"":"rounded-t-lg")},filteredLanguages.length>0&&React.createElement(React.Fragment,null,React.createElement(Icon,{name:getLanguageIcon(filteredLanguages[0]),size:"16px",additionalCSS:"mr-8"}),React.createElement("span",{className:"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500"},getLanguageDisplayName(filteredLanguages[0]))))),React.createElement("div",{ref:codeRef,className:"relative",onMouseEnter:handleMouseEnter,onMouseLeave:handleMouseLeave,onFocus:handleMouseEnter,onBlur:handleMouseLeave,tabIndex:0},renderContent(),state.ui.isHovering&&state.activeLanguage&&hasSnippetForActiveLanguage&&React.createElement(CopyButton,{onCopy:()=>{const text=getCodeText();if(text)copy(text)},isCopied:isCopied})),apiKeys&&React.createElement(ApiKeySelector,{apiKeys:apiKeys,selectedApiKey:state.selectedApiKey,onApiKeyChange:handleApiKeyChange}))};export default CodeSnippet;
+import React,{useState,useEffect,Children,isValidElement,useRef,useCallback,useMemo}from"react";import Code from"./Code";import cn from"./utils/cn";import{getLanguageInfo}from"./CodeSnippet/languages";import Icon from"./Icon";import LanguageSelector from"./CodeSnippet/LanguageSelector";import ApiKeySelector from"./CodeSnippet/ApiKeySelector";import useCopyToClipboard from"./utils/useCopyToClipboard";import ShellCommandView from"./CodeSnippet/ShellCommandView";import CopyButton from"./CodeSnippet/CopyButton";import TooltipButton from"./CodeSnippet/TooltipButton";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 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{childrenArray,languages,sdkTypes,originalLangMap,isSingleShellCommand}=useMemo(()=>{const childrenArray=Children.toArray(children);const languages=[];const sdkTypes=new Set;const originalLangMap=new Map;const isSingleShellCommand=childrenArray.length===1&&isValidElement(childrenArray[0])&&isValidElement(childrenArray[0].props.children)&&childrenArray[0].props.children.props.className?.includes("language-shell");childrenArray.forEach(child=>{if(!isValidElement(child))return;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;const langName=extractLanguageFromCode(codeElement);if(!langName)return;if(langName.startsWith("realtime_")){const baseLanguage=langName.substring(9);sdkTypes.add("realtime");originalLangMap.set(langName,baseLanguage)}else if(langName.startsWith("rest_")){const baseLanguage=langName.substring(5);sdkTypes.add("rest");originalLangMap.set(langName,baseLanguage)}else{originalLangMap.set(langName,langName)}if(!languages.includes(langName)){languages.push(langName)}});return{childrenArray,languages,sdkTypes,originalLangMap,isSingleShellCommand}},[children,extractLanguageFromCode]);const[activeSDKType,setActiveSDKType]=useState(()=>{if(sdkTypes.size===0)return null;if(sdk&&sdkTypes.has(sdk))return sdk;if(sdkTypes.has("realtime"))return"realtime";if(sdkTypes.has("rest"))return"rest";return null});const[activeLanguage,setActiveLanguage]=useState(null);const[selectedApiKey,setSelectedApiKey]=useState(()=>apiKeys&&apiKeys.length>0?apiKeys[0]:"");const[isHovering,setIsHovering]=useState(false);const showSDKSelector=sdkTypes.size>0;const hasOnlyJsonSnippet=useMemo(()=>languages.length===1&&languages[0]==="json",[languages]);const filteredLanguages=useMemo(()=>{const filtered=!activeSDKType||!showSDKSelector?[...languages]:languages.filter(lang=>lang.startsWith(`${activeSDKType}_`));if(languageOrdering&&languageOrdering.length>0){filtered.sort((a,b)=>{const aBase=originalLangMap.get(a)||a;const bBase=originalLangMap.get(b)||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},[activeSDKType,showSDKSelector,languages,languageOrdering,originalLangMap]);const initialActiveLanguage=useMemo(()=>{if(!lang){return filteredLanguages.length>0?filteredLanguages[0]:null}if(activeSDKType){const prefixedLang=`${activeSDKType}_${lang}`;if(languages.includes(prefixedLang)){return prefixedLang}}if(languages.includes(lang)){return lang}if(getLanguageInfo(lang).label!==lang){return lang}return filteredLanguages.length>0?filteredLanguages[0]:null},[lang,activeSDKType,languages,filteredLanguages]);useEffect(()=>{setActiveLanguage(initialActiveLanguage)},[initialActiveLanguage]);useEffect(()=>{if(apiKeys&&apiKeys.length>0&&!apiKeys.includes(selectedApiKey)){setSelectedApiKey(apiKeys[0])}},[apiKeys,selectedApiKey]);const getCleanLanguage=useCallback(lang=>lang?originalLangMap.get(lang)||lang:null,[originalLangMap]);const getLanguageInfoForDisplay=useCallback(lang=>{if(!lang)return null;const cleanLang=getCleanLanguage(lang);return cleanLang?getLanguageInfo(cleanLang):null},[getCleanLanguage]);const getLanguageDisplayName=useCallback(lang=>{const cleanLang=getCleanLanguage(lang);return cleanLang?getLanguageInfo(cleanLang).label:lang},[getCleanLanguage]);const getLanguageIcon=useCallback(lang=>{const cleanLang=getCleanLanguage(lang);return cleanLang?getLanguageInfo(cleanLang).icon:"icon-gui-document-mini"},[getCleanLanguage]);const activeLanguageInfo=useMemo(()=>getLanguageInfoForDisplay(activeLanguage),[getLanguageInfoForDisplay,activeLanguage]);const processedChildren=useMemo(()=>{if(!activeLanguage)return[];const targetLanguage=hasOnlyJsonSnippet?"json":activeLanguage;return childrenArray.filter(child=>{if(!isValidElement(child))return false;const codeElement=isValidElement(child.props.children)?child.props.children:null;const langName=extractLanguageFromCode(codeElement);return langName===targetLanguage}).map(child=>{if(!isValidElement(child))return child;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement)return child;const codeContent=codeElement.props.children;const langName=extractLanguageFromCode(codeElement);if(!langName)return child;const cleanLang=hasOnlyJsonSnippet?"json":getCleanLanguage(langName)||langName;const langInfo=getLanguageInfo(cleanLang);if(typeof codeContent==="string"||typeof codeContent==="number"||typeof codeContent==="boolean"){return React.createElement(Code,{key:langName,language:langInfo.syntaxHighlighterKey||cleanLang,snippet:String(codeContent),additionalCSS:"bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-24 py-16",showLines:showCodeLines})}return child})},[activeLanguage,childrenArray,extractLanguageFromCode,getCleanLanguage,hasOnlyJsonSnippet,showCodeLines]);const hasSnippetForActiveLanguage=useMemo(()=>{if(!activeLanguage)return false;if(hasOnlyJsonSnippet)return true;return childrenArray.some(child=>{if(!isValidElement(child))return false;const codeElement=isValidElement(child.props.children)?child.props.children:null;const langName=extractLanguageFromCode(codeElement);return langName===activeLanguage})},[activeLanguage,childrenArray,extractLanguageFromCode,hasOnlyJsonSnippet]);const getCodeText=useCallback(()=>{if(!activeLanguage||!hasSnippetForActiveLanguage||!codeRef.current)return null;const allPreElements=codeRef.current.querySelectorAll("pre");for(const preElement of Array.from(allPreElements)){const codeElement=preElement.querySelector("code");if(!codeElement||!codeElement.className)continue;const classNames=codeElement.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)continue;const langName=langClass.substring(9);if(hasOnlyJsonSnippet&&langName==="json"||!hasOnlyJsonSnippet&&langName===activeLanguage){return codeElement.textContent||""}}return null},[activeLanguage,hasSnippetForActiveLanguage,hasOnlyJsonSnippet]);const handleSDKTypeChange=useCallback(type=>{const nextLang=languages.find(l=>l.startsWith(`${type}_`))??null;setActiveSDKType(type);setActiveLanguage(nextLang)},[languages]);const handleLanguageChange=useCallback(language=>{setActiveLanguage(language);if(onChange){const cleanLang=getCleanLanguage(language)||language;onChange(cleanLang,activeSDKType)}},[onChange,getCleanLanguage,activeSDKType]);const handleApiKeyChange=useCallback(apiKey=>{setSelectedApiKey(apiKey)},[]);const NoSnippetMessage=useMemo(()=>{if(!activeLanguageInfo)return()=>null;return()=>React.createElement("div",{className:"px-64 py-24 ui-text-body2 text-neutral-800 dark:text-neutral-400 text-center flex flex-col gap-12 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."))},[activeLanguageInfo]);const showLanguageSelector=!fixed&&filteredLanguages.length>0;const showFullSelector=filteredLanguages.length>1;const renderContent=useMemo(()=>{if(!activeLanguage)return null;if(hasSnippetForActiveLanguage){return processedChildren}if(activeLanguageInfo){return React.createElement(NoSnippetMessage,null)}return null},[activeLanguage,hasSnippetForActiveLanguage,processedChildren,activeLanguageInfo,NoSnippetMessage]);if(isSingleShellCommand){const shellChild=childrenArray[0];if(isValidElement(shellChild)&&isValidElement(shellChild.props.children)){const codeElement=shellChild.props.children;const codeContent=codeElement.props.children;return React.createElement(ShellCommandView,{content:String(codeContent),className:className})}}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-[54px]",className)},headerRow&&React.createElement("div",{className:"h-[38px] bg-neutral-200 dark:bg-neutral-1100 border-b border-neutral-300 dark:border-neutral-1000 flex items-center py-4 px-12 rounded-t-lg"},React.createElement("div",{className:"flex space-x-6"},React.createElement("div",{className:"w-[12px] h-[12px] rounded-full bg-orange-500"}),React.createElement("div",{className:"w-[12px] h-[12px] rounded-full bg-yellow-500"}),React.createElement("div",{className:"w-[12px] h-[12px] 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-[48px]"})),showSDKSelector&&React.createElement("div",{className:cn("p-8 border-b border-neutral-200 dark:border-neutral-1100 h-[56px]",headerRow?"":"rounded-t-lg")},React.createElement("div",{className:"flex gap-12 justify-start"},sdkTypes.has("realtime")&&React.createElement(TooltipButton,{tooltip:"Realtime SDK",active:activeSDKType==="realtime",onClick:()=>handleSDKTypeChange("realtime"),variant:"segmented",size:"sm",alwaysShowLabel:true},"Realtime"),sdkTypes.has("rest")&&React.createElement(TooltipButton,{tooltip:"REST SDK",active:activeSDKType==="rest",onClick:()=>handleSDKTypeChange("rest"),variant:"segmented",size:"sm",alwaysShowLabel:true},"REST"))),showLanguageSelector&&(showFullSelector?React.createElement(LanguageSelector,{languages:filteredLanguages,activeLanguage:activeLanguage,onLanguageChange:handleLanguageChange,getLanguageDisplayName:getLanguageDisplayName,getLanguageIcon:getLanguageIcon,activeLanguageInfo:activeLanguageInfo}):React.createElement("div",{className:cn("border-b border-neutral-200 dark:border-neutral-1100 h-[34px] flex items-center px-12 cursor-pointer",headerRow?"":"rounded-t-lg"),onClick:()=>handleLanguageChange(filteredLanguages[0])},filteredLanguages.length>0&&React.createElement(React.Fragment,null,React.createElement(Icon,{name:getLanguageIcon(filteredLanguages[0]),size:"16px",additionalCSS:"mr-8"}),React.createElement("span",{className:"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500 select-none"},getLanguageDisplayName(filteredLanguages[0]))))),React.createElement("div",{ref:codeRef,className:"relative",onMouseEnter:()=>setIsHovering(true),onMouseLeave:()=>setIsHovering(false),onFocus:()=>setIsHovering(true),onBlur:()=>setIsHovering(false),tabIndex:0},renderContent,isHovering&&activeLanguage&&hasSnippetForActiveLanguage&&React.createElement(CopyButton,{onCopy:()=>{const text=getCodeText();if(text)copy(text)},isCopied:isCopied})),apiKeys&&React.createElement(ApiKeySelector,{apiKeys:apiKeys,selectedApiKey:selectedApiKey,onApiKeyChange:handleApiKeyChange}))};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 { getLanguageInfo } from \"./CodeSnippet/languages\";\nimport Icon from \"./Icon\";\nimport LanguageSelector from \"./CodeSnippet/LanguageSelector\";\nimport ApiKeySelector from \"./CodeSnippet/ApiKeySelector\";\nimport { IconName } from \"./Icon/types\";\nimport useCopyToClipboard from \"./utils/useCopyToClipboard\";\nimport ShellCommandView from \"./CodeSnippet/ShellCommandView\";\nimport CopyButton from \"./CodeSnippet/CopyButton\";\nimport TooltipButton from \"./CodeSnippet/TooltipButton\";\n\n// Define SDK type\ntype SDKType = \"realtime\" | \"rest\" | null;\n\n// Interface for component state management\ninterface CodeSnippetState {\n  activeSDKType: SDKType;\n  activeLanguage: string | null;\n  selectedApiKey: string;\n  ui: {\n    isHovering: boolean;\n  };\n}\n\nexport interface 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;\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?: string[];\n  /**\n   * Default SDK type to use for the code snippet\n   */\n  sdk?: SDKType;\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}) => {\n  // Extract languages and SDK types from children\n  const {\n    childrenArray,\n    languages,\n    sdkTypes,\n    originalLangMap,\n    isSingleShellCommand,\n  } = useMemo(() => {\n    const childrenArray = Children.toArray(children);\n    const languages: string[] = [];\n    const sdkTypes = new Set<SDKType>();\n    const originalLangMap = new Map<string, string>();\n\n    // Check if we have a single shell command\n    const isSingleShellCommand =\n      childrenArray.length === 1 &&\n      isValidElement(childrenArray[0]) &&\n      isValidElement(childrenArray[0].props.children) &&\n      childrenArray[0].props.children.props.className?.includes(\n        \"language-shell\",\n      );\n\n    // Extract all available languages from children and identify SDK types\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 || !codeElement.props.className) return;\n\n      // Extract language from className (format: \"language-javascript\", \"language-typescript\", etc.)\n      const classNames = codeElement.props.className.split(\" \");\n      const langClass = classNames.find((cls: string) =>\n        cls.startsWith(\"language-\"),\n      );\n      if (!langClass) return;\n\n      // Extract the language name from the class (remove \"language-\" prefix)\n      const langName = langClass.substring(9);\n\n      // Look for SDK prefixes in the language name itself (e.g., \"language-realtime_javascript\")\n      if (langName.startsWith(\"realtime_\")) {\n        const baseLanguage = langName.substring(9);\n        sdkTypes.add(\"realtime\");\n        // Store original language value for later use\n        originalLangMap.set(langName, baseLanguage);\n      } else if (langName.startsWith(\"rest_\")) {\n        const baseLanguage = langName.substring(5);\n        sdkTypes.add(\"rest\");\n        // Store original language value for later use\n        originalLangMap.set(langName, baseLanguage);\n      } else {\n        // Regular language without SDK prefix\n        originalLangMap.set(langName, langName);\n      }\n\n      // Add to languages list if not already included\n      if (!languages.includes(langName)) {\n        languages.push(langName);\n      }\n    });\n\n    return {\n      childrenArray,\n      languages,\n      sdkTypes,\n      originalLangMap,\n      isSingleShellCommand,\n    };\n  }, [children]);\n\n  // Check if we need to show SDK type selector\n  const showSDKSelector = sdkTypes.size > 0;\n\n  // Check if there is only a JSON snippet\n  const hasOnlyJsonSnippet = useMemo(() => {\n    return languages.length === 1 && languages[0] === \"json\";\n  }, [languages]);\n\n  const initialSDKType = useMemo(() => {\n    if (sdkTypes.size === 0) {\n      return null;\n    }\n\n    if (sdk && sdkTypes.has(sdk)) return sdk;\n\n    if (sdkTypes.has(\"realtime\")) return \"realtime\";\n\n    if (sdkTypes.has(\"rest\")) return \"rest\";\n\n    return null;\n  }, [sdk, sdkTypes]);\n\n  // Consolidated state management\n  const [state, setState] = useState<CodeSnippetState>(() => ({\n    activeSDKType: initialSDKType,\n    activeLanguage: null, // Will be set after filteredLanguages are calculated\n    selectedApiKey: apiKeys && apiKeys.length > 0 ? apiKeys[0] : \"\",\n    ui: {\n      isHovering: false,\n    },\n  }));\n\n  // Use the copyToClipboard hook\n  const { isCopied, copy } = useCopyToClipboard();\n\n  // Get languages filtered by active SDK type - optimized with primitive dependencies\n  const filteredLanguages = useMemo(() => {\n    if (!state.activeSDKType || !showSDKSelector) {\n      return languages;\n    }\n    return languages.filter((lang) =>\n      lang.startsWith(`${state.activeSDKType}_`),\n    );\n  }, [state.activeSDKType, showSDKSelector, languages]);\n\n  // Determine the initial active language - simplified dependencies\n  const initialActiveLanguage = useMemo((): string | null => {\n    // If no lang prop specified, default to first available filtered language\n    if (!lang) {\n      return filteredLanguages.length > 0 ? filteredLanguages[0] : null;\n    }\n\n    // Try to find the language with SDK type prefix if applicable\n    if (state.activeSDKType) {\n      const prefixedLang = `${state.activeSDKType}_${lang}`;\n      if (languages.includes(prefixedLang)) {\n        return prefixedLang;\n      }\n    }\n\n    // Try to find the language directly\n    if (languages.includes(lang)) {\n      return lang;\n    }\n\n    // Check if it's a known language but not available in snippets\n    if (getLanguageInfo(lang).label !== lang) {\n      return lang;\n    }\n\n    // Fallback to first available language\n    return filteredLanguages.length > 0 ? filteredLanguages[0] : null;\n  }, [lang, state.activeSDKType, languages, filteredLanguages]);\n\n  // Initialize activeLanguage after filteredLanguages are calculated\n  useEffect(() => {\n    setState((prevState) => ({\n      ...prevState,\n      activeLanguage: initialActiveLanguage,\n    }));\n  }, [initialActiveLanguage]);\n\n  const codeRef = useRef<HTMLDivElement>(null);\n\n  // Filter and process children for the active language - optimized with specific dependencies\n  const processedChildren = useMemo(() => {\n    if (!state.activeLanguage) return [];\n\n    // Special case for JSON-only snippets\n    const targetLanguage = hasOnlyJsonSnippet ? \"json\" : state.activeLanguage;\n\n    return childrenArray\n      .filter((child) => {\n        if (!isValidElement(child)) return false;\n\n        const preElement = child;\n        const codeElement = isValidElement(preElement.props.children)\n          ? preElement.props.children\n          : null;\n\n        if (!codeElement || !codeElement.props.className) return false;\n\n        // Extract language from className\n        const classNames = codeElement.props.className.split(\" \");\n        const langClass = classNames.find((cls: string) =>\n          cls.startsWith(\"language-\"),\n        );\n        if (!langClass) return false;\n\n        // Extract the language name from the class (remove \"language-\" prefix)\n        const langName = langClass.substring(9);\n\n        // In JSON-only mode, only show JSON\n        // Otherwise, match exactly with active language\n        return langName === targetLanguage;\n      })\n      .map((child) => {\n        if (!isValidElement(child)) return child;\n\n        const preElement = child;\n        const codeElement = isValidElement(preElement.props.children)\n          ? preElement.props.children\n          : null;\n\n        if (!codeElement) return child;\n\n        const codeContent = codeElement.props.children;\n\n        // Extract language from className\n        const classNames = codeElement.props.className.split(\" \");\n        const langClass = classNames.find((cls: string) =>\n          cls.startsWith(\"language-\"),\n        );\n        if (!langClass) return child;\n\n        // Extract the language name from the class (remove \"language-\" prefix)\n        const langName = langClass.substring(9);\n\n        const cleanLang = hasOnlyJsonSnippet\n          ? \"json\"\n          : originalLangMap.get(langName) || langName;\n        const langInfo = getLanguageInfo(cleanLang);\n\n        // If child content is a string or can be converted to a string\n        if (\n          typeof codeContent === \"string\" ||\n          typeof codeContent === \"number\" ||\n          typeof codeContent === \"boolean\"\n        ) {\n          return (\n            <Code\n              key={langName}\n              language={langInfo.syntaxHighlighterKey || cleanLang}\n              snippet={String(codeContent)}\n              additionalCSS=\"bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-24 py-16\"\n              showLines\n            />\n          );\n        }\n\n        // Otherwise, return the original content\n        return child;\n      });\n  }, [\n    state.activeLanguage,\n    childrenArray,\n    originalLangMap,\n    hasOnlyJsonSnippet,\n  ]);\n\n  // Check if there's a snippet available for the active language\n  const hasSnippetForActiveLanguage = useMemo(() => {\n    if (!state.activeLanguage) return false;\n\n    // If we have only JSON snippet, consider it available for any language\n    if (hasOnlyJsonSnippet) return true;\n\n    return childrenArray.some((child) => {\n      if (!isValidElement(child)) return false;\n\n      const preElement = child;\n      const codeElement = isValidElement(preElement.props.children)\n        ? preElement.props.children\n        : null;\n\n      if (!codeElement || !codeElement.props.className) return false;\n\n      // Extract language from className\n      const classNames = codeElement.props.className.split(\" \");\n      const langClass = classNames.find((cls: string) =>\n        cls.startsWith(\"language-\"),\n      );\n      if (!langClass) return false;\n\n      // Extract the language name from the class (remove \"language-\" prefix)\n      const langName = langClass.substring(9);\n\n      // Match exactly with active language\n      return langName === state.activeLanguage;\n    });\n  }, [state.activeLanguage, childrenArray, hasOnlyJsonSnippet]);\n\n  // Function to get the current code text content\n  const getCodeText = useCallback((): string | null => {\n    if (\n      !state.activeLanguage ||\n      !hasSnippetForActiveLanguage ||\n      !codeRef.current\n    )\n      return null;\n\n    // Get the text content from the matching code element\n    const allPreElements = codeRef.current.querySelectorAll(\"pre\");\n\n    for (const preElement of Array.from(allPreElements)) {\n      const codeElement = preElement.querySelector(\"code\");\n      if (!codeElement || !codeElement.className) continue;\n\n      const classNames = codeElement.className.split(\" \");\n      const langClass = classNames.find((cls) => cls.startsWith(\"language-\"));\n      if (!langClass) continue;\n\n      // Extract the language name from the class (remove \"language-\" prefix)\n      const langName = langClass.substring(9);\n\n      // In JSON-only mode, look for JSON, otherwise match active language\n      if (\n        (hasOnlyJsonSnippet && langName === \"json\") ||\n        (!hasOnlyJsonSnippet && langName === state.activeLanguage)\n      ) {\n        return codeElement.textContent || \"\";\n      }\n    }\n\n    return null;\n  }, [state.activeLanguage, hasSnippetForActiveLanguage, hasOnlyJsonSnippet]);\n\n  // Update selected API key if apiKeys changes\n  useEffect(() => {\n    if (\n      apiKeys &&\n      apiKeys.length > 0 &&\n      !apiKeys.includes(state.selectedApiKey)\n    ) {\n      setState((prev) => ({\n        ...prev,\n        selectedApiKey: apiKeys[0],\n      }));\n    }\n  }, [apiKeys, state.selectedApiKey]);\n\n  // Event handlers - memoized with empty dependencies as they only use setState\n  const handleSDKTypeChange = useCallback(\n    (type: SDKType) => {\n      // pick the first language that matches the new SDK prefix\n      const nextLang = languages.find((l) => l.startsWith(`${type}_`)) ?? null;\n\n      setState((prev) => ({\n        ...prev,\n        activeSDKType: type,\n        activeLanguage: nextLang,\n      }));\n\n      // Don't call onChange when only the SDK type changes\n      // The initialActiveLanguage useEffect will handle calling onChange\n      // if needed when the active language changes as a result\n    },\n    [languages],\n  );\n\n  const handleLanguageChange = useCallback(\n    (language: string) => {\n      setState((prev) => ({\n        ...prev,\n        activeLanguage: language,\n      }));\n\n      // Always call onChange for explicit user changes\n      // But pass the clean language name without SDK prefix\n      if (onChange) {\n        const cleanLang = originalLangMap.get(language) || language;\n        onChange(cleanLang, state.activeSDKType);\n      }\n    },\n    [onChange, originalLangMap, state.activeSDKType],\n  );\n\n  const handleMouseEnter = useCallback(() => {\n    setState((prev) => ({\n      ...prev,\n      ui: { ...prev.ui, isHovering: true },\n    }));\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setState((prev) => ({\n      ...prev,\n      ui: { ...prev.ui, isHovering: false },\n    }));\n  }, []);\n\n  const handleApiKeyChange = useCallback((apiKey: string) => {\n    setState((prev) => ({\n      ...prev,\n      selectedApiKey: apiKey,\n    }));\n  }, []);\n\n  // Get language info for the active language - optimized to only depend on map and activeLanguage\n  const getDisplayLanguageInfo = useCallback(\n    (lang: string | null) => {\n      if (!lang) return null;\n      const cleanLang = originalLangMap.get(lang) || lang;\n      return getLanguageInfo(cleanLang);\n    },\n    [originalLangMap],\n  );\n\n  const activeLanguageInfo = useMemo(\n    () => getDisplayLanguageInfo(state.activeLanguage),\n    [getDisplayLanguageInfo, state.activeLanguage],\n  );\n\n  // Memoize language related function to avoid recreation on every render\n  const getLanguageDisplayName = useCallback(\n    (lang: string) => {\n      const cleanLang = originalLangMap.get(lang) || lang;\n      return getLanguageInfo(cleanLang).label;\n    },\n    [originalLangMap],\n  );\n\n  // Memoize icon function to avoid recreation on every render\n  const getLanguageIcon = useCallback(\n    (lang: string): IconName => {\n      const cleanLang = originalLangMap.get(lang) || lang;\n      return getLanguageInfo(cleanLang).icon;\n    },\n    [originalLangMap],\n  );\n\n  // Optimize no-snippet message by memoizing it\n  const NoSnippetMessage = useMemo(() => {\n    if (!activeLanguageInfo) return () => null;\n\n    return () => (\n      <div className=\"px-64 py-24 ui-text-body2 text-neutral-800 dark:text-neutral-400 text-center flex flex-col gap-12 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  }, [activeLanguageInfo]);\n\n  // Determine if we should show the language selector\n  const showLanguageSelector = !fixed && filteredLanguages.length > 0;\n\n  // Determine if we should show the full selector or simplified view\n  const showFullSelector = filteredLanguages.length > 1;\n\n  // Simplified content render logic\n  const renderContent = () => {\n    // No active language case\n    if (!state.activeLanguage) {\n      return null;\n    }\n\n    // Has snippet for active language (including JSON-only case)\n    if (hasSnippetForActiveLanguage) {\n      return processedChildren;\n    }\n\n    // No snippet but language info available\n    if (activeLanguageInfo) {\n      return <NoSnippetMessage />;\n    }\n\n    return null;\n  };\n\n  // Render special case for shell commands\n  if (isSingleShellCommand) {\n    const shellChild = childrenArray[0];\n    if (\n      isValidElement(shellChild) &&\n      isValidElement(shellChild.props.children)\n    ) {\n      const codeElement = shellChild.props.children;\n      const codeContent = codeElement.props.children;\n      return (\n        <ShellCommandView content={String(codeContent)} className={className} />\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-[54px]\",\n        className,\n      )}\n    >\n      {headerRow && (\n        <div className=\"h-[38px] bg-neutral-200 dark:bg-neutral-1100 border-b border-neutral-300 dark:border-neutral-1000 flex items-center py-4 px-12 rounded-t-lg\">\n          {/* macOS window buttons */}\n          <div className=\"flex space-x-6\">\n            <div className=\"w-[12px] h-[12px] rounded-full bg-orange-500\"></div>\n            <div className=\"w-[12px] h-[12px] rounded-full bg-yellow-500\"></div>\n            <div className=\"w-[12px] h-[12px] rounded-full bg-green-500\"></div>\n          </div>\n\n          {/* Title */}\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-[48px]\"></div>\n        </div>\n      )}\n\n      {/* SDK Type Selector Row */}\n      {showSDKSelector && (\n        <div\n          className={cn(\n            \"p-8 border-b border-neutral-200 dark:border-neutral-1100 h-[56px]\",\n            headerRow ? \"\" : \"rounded-t-lg\",\n          )}\n        >\n          <div className=\"flex gap-12 justify-start\">\n            {sdkTypes.has(\"realtime\") && (\n              <TooltipButton\n                tooltip=\"Realtime SDK\"\n                active={state.activeSDKType === \"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={state.activeSDKType === \"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      {/* Language Selector Row */}\n      {showLanguageSelector &&\n        (showFullSelector ? (\n          <LanguageSelector\n            languages={filteredLanguages}\n            activeLanguage={state.activeLanguage}\n            onLanguageChange={handleLanguageChange}\n            getLanguageDisplayName={getLanguageDisplayName}\n            getLanguageIcon={getLanguageIcon}\n            activeLanguageInfo={activeLanguageInfo}\n          />\n        ) : (\n          <div\n            className={cn(\n              \"border-b border-neutral-200 dark:border-neutral-1100 h-[34px] flex items-center px-12\",\n              headerRow ? \"\" : \"rounded-t-lg\",\n            )}\n          >\n            {filteredLanguages.length > 0 && (\n              <>\n                <Icon\n                  name={getLanguageIcon(filteredLanguages[0])}\n                  size=\"16px\"\n                  additionalCSS=\"mr-8\"\n                />\n                <span className=\"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500\">\n                  {getLanguageDisplayName(filteredLanguages[0])}\n                </span>\n              </>\n            )}\n          </div>\n        ))}\n\n      <div\n        ref={codeRef}\n        className=\"relative\"\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        onFocus={handleMouseEnter}\n        onBlur={handleMouseLeave}\n        tabIndex={0}\n      >\n        {renderContent()}\n\n        {/* Copy button - simplified conditional */}\n        {state.ui.isHovering &&\n          state.activeLanguage &&\n          hasSnippetForActiveLanguage && (\n            <CopyButton\n              onCopy={() => {\n                const text = getCodeText();\n                if (text) copy(text);\n              }}\n              isCopied={isCopied}\n            />\n          )}\n      </div>\n\n      {/* API Key Selector */}\n      {apiKeys && (\n        <ApiKeySelector\n          apiKeys={apiKeys}\n          selectedApiKey={state.selectedApiKey}\n          onApiKeyChange={handleApiKeyChange}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default CodeSnippet;\n"],"names":["React","useState","useEffect","Children","isValidElement","useRef","useCallback","useMemo","Code","cn","getLanguageInfo","Icon","LanguageSelector","ApiKeySelector","useCopyToClipboard","ShellCommandView","CopyButton","TooltipButton","CodeSnippet","fixed","headerRow","title","children","className","lang","onChange","apiKeys","sdk","childrenArray","languages","sdkTypes","originalLangMap","isSingleShellCommand","toArray","Set","Map","length","props","includes","forEach","child","preElement","codeElement","classNames","split","langClass","find","cls","startsWith","langName","substring","baseLanguage","add","set","push","showSDKSelector","size","hasOnlyJsonSnippet","initialSDKType","has","state","setState","activeSDKType","activeLanguage","selectedApiKey","ui","isHovering","isCopied","copy","filteredLanguages","filter","initialActiveLanguage","prefixedLang","label","prevState","codeRef","processedChildren","targetLanguage","map","codeContent","cleanLang","get","langInfo","key","language","syntaxHighlighterKey","snippet","String","additionalCSS","showLines","hasSnippetForActiveLanguage","some","getCodeText","current","allPreElements","querySelectorAll","Array","from","querySelector","textContent","prev","handleSDKTypeChange","type","nextLang","l","handleLanguageChange","handleMouseEnter","handleMouseLeave","handleApiKeyChange","apiKey","getDisplayLanguageInfo","activeLanguageInfo","getLanguageDisplayName","getLanguageIcon","icon","NoSnippetMessage","div","name","color","p","showLanguageSelector","showFullSelector","renderContent","shellChild","content","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 { getLanguageInfo } from \"./CodeSnippet/languages\";\nimport Icon from \"./Icon\";\nimport LanguageSelector from \"./CodeSnippet/LanguageSelector\";\nimport ApiKeySelector from \"./CodeSnippet/ApiKeySelector\";\nimport { IconName } from \"./Icon/types\";\nimport useCopyToClipboard from \"./utils/useCopyToClipboard\";\nimport ShellCommandView from \"./CodeSnippet/ShellCommandView\";\nimport CopyButton from \"./CodeSnippet/CopyButton\";\nimport TooltipButton from \"./CodeSnippet/TooltipButton\";\n\n// Define SDK type\ntype SDKType = \"realtime\" | \"rest\" | null;\n\nexport interface 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;\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?: string[];\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/**\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  // Helper function to extract language from code element\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  // Parse children to extract languages and SDK types - only needs to run once\n  const {\n    childrenArray,\n    languages,\n    sdkTypes,\n    originalLangMap,\n    isSingleShellCommand,\n  } = useMemo(() => {\n    const childrenArray = Children.toArray(children);\n    const languages: string[] = [];\n    const sdkTypes = new Set<SDKType>();\n    const originalLangMap = new Map<string, string>();\n\n    // Check if we have a single shell command\n    const isSingleShellCommand =\n      childrenArray.length === 1 &&\n      isValidElement(childrenArray[0]) &&\n      isValidElement(childrenArray[0].props.children) &&\n      childrenArray[0].props.children.props.className?.includes(\n        \"language-shell\",\n      );\n\n    // Extract all available languages from children and identify SDK types\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      const langName = extractLanguageFromCode(codeElement);\n      if (!langName) return;\n\n      // Look for SDK prefixes in the language name itself\n      if (langName.startsWith(\"realtime_\")) {\n        const baseLanguage = langName.substring(9);\n        sdkTypes.add(\"realtime\");\n        originalLangMap.set(langName, baseLanguage);\n      } else if (langName.startsWith(\"rest_\")) {\n        const baseLanguage = langName.substring(5);\n        sdkTypes.add(\"rest\");\n        originalLangMap.set(langName, baseLanguage);\n      } else {\n        originalLangMap.set(langName, langName);\n      }\n\n      // Add to languages list if not already included\n      if (!languages.includes(langName)) {\n        languages.push(langName);\n      }\n    });\n\n    return {\n      childrenArray,\n      languages,\n      sdkTypes,\n      originalLangMap,\n      isSingleShellCommand,\n    };\n  }, [children, extractLanguageFromCode]);\n\n  // Simplified state management with separate hooks\n  const [activeSDKType, setActiveSDKType] = useState<SDKType>(() => {\n    if (sdkTypes.size === 0) return null;\n    if (sdk && sdkTypes.has(sdk)) return sdk;\n    if (sdkTypes.has(\"realtime\")) return \"realtime\";\n    if (sdkTypes.has(\"rest\")) return \"rest\";\n    return null;\n  });\n  const [activeLanguage, setActiveLanguage] = useState<string | null>(null);\n  const [selectedApiKey, setSelectedApiKey] = useState(() =>\n    apiKeys && apiKeys.length > 0 ? apiKeys[0] : \"\",\n  );\n  const [isHovering, setIsHovering] = useState(false);\n\n  // Check if we need to show SDK type selector\n  const showSDKSelector = sdkTypes.size > 0;\n\n  // Check if there is only a JSON snippet\n  const hasOnlyJsonSnippet = useMemo(\n    () => languages.length === 1 && languages[0] === \"json\",\n    [languages],\n  );\n\n  // Get languages filtered by active SDK type & apply ordering\n  const filteredLanguages = useMemo(() => {\n    // Filter by SDK type if needed\n    const filtered =\n      !activeSDKType || !showSDKSelector\n        ? [...languages]\n        : languages.filter((lang) => lang.startsWith(`${activeSDKType}_`));\n\n    // Apply custom ordering if provided\n    if (languageOrdering && languageOrdering.length > 0) {\n      filtered.sort((a, b) => {\n        const aBase = originalLangMap.get(a) || a;\n        const bBase = originalLangMap.get(b) || 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  }, [\n    activeSDKType,\n    showSDKSelector,\n    languages,\n    languageOrdering,\n    originalLangMap,\n  ]);\n\n  // Determine the initial active language\n  const initialActiveLanguage = useMemo((): string | null => {\n    if (!lang) {\n      return filteredLanguages.length > 0 ? filteredLanguages[0] : null;\n    }\n\n    // Try with SDK prefix if applicable\n    if (activeSDKType) {\n      const prefixedLang = `${activeSDKType}_${lang}`;\n      if (languages.includes(prefixedLang)) {\n        return prefixedLang;\n      }\n    }\n\n    // Try direct match\n    if (languages.includes(lang)) {\n      return lang;\n    }\n\n    // Check if it's a known language but not available\n    if (getLanguageInfo(lang).label !== lang) {\n      return lang;\n    }\n\n    // Fallback to first available\n    return filteredLanguages.length > 0 ? filteredLanguages[0] : null;\n  }, [lang, activeSDKType, languages, filteredLanguages]);\n\n  // Initialize activeLanguage after filteredLanguages are calculated\n  useEffect(() => {\n    setActiveLanguage(initialActiveLanguage);\n  }, [initialActiveLanguage]);\n\n  // Update selected API key if apiKeys changes\n  useEffect(() => {\n    if (apiKeys && apiKeys.length > 0 && !apiKeys.includes(selectedApiKey)) {\n      setSelectedApiKey(apiKeys[0]);\n    }\n  }, [apiKeys, selectedApiKey]);\n\n  // Clean language utilities\n  const getCleanLanguage = useCallback(\n    (lang: string | null) => (lang ? originalLangMap.get(lang) || lang : null),\n    [originalLangMap],\n  );\n\n  // Get language info for display\n  const getLanguageInfoForDisplay = useCallback(\n    (lang: string | null) => {\n      if (!lang) return null;\n      const cleanLang = getCleanLanguage(lang);\n      return cleanLang ? getLanguageInfo(cleanLang) : null;\n    },\n    [getCleanLanguage],\n  );\n\n  // For language display name and icon (only depends on originalLangMap)\n  const getLanguageDisplayName = useCallback(\n    (lang: string) => {\n      const cleanLang = getCleanLanguage(lang);\n      return cleanLang ? getLanguageInfo(cleanLang).label : lang;\n    },\n    [getCleanLanguage],\n  );\n\n  const getLanguageIcon = useCallback(\n    (lang: string): IconName => {\n      const cleanLang = getCleanLanguage(lang);\n      return cleanLang\n        ? getLanguageInfo(cleanLang).icon\n        : \"icon-gui-document-mini\";\n    },\n    [getCleanLanguage],\n  );\n\n  // Memoize the active language info\n  const activeLanguageInfo = useMemo(\n    () => getLanguageInfoForDisplay(activeLanguage),\n    [getLanguageInfoForDisplay, activeLanguage],\n  );\n\n  // Filter and process children for the active language\n  const processedChildren = useMemo(() => {\n    if (!activeLanguage) return [];\n\n    // Target language is either the active one or json in json-only mode\n    const targetLanguage = hasOnlyJsonSnippet ? \"json\" : activeLanguage;\n\n    return childrenArray\n      .filter((child) => {\n        if (!isValidElement(child)) return false;\n        const codeElement = isValidElement(child.props.children)\n          ? child.props.children\n          : null;\n        const langName = extractLanguageFromCode(codeElement);\n        return langName === targetLanguage;\n      })\n      .map((child) => {\n        if (!isValidElement(child)) return child;\n\n        const preElement = child;\n        const codeElement = isValidElement(preElement.props.children)\n          ? preElement.props.children\n          : null;\n        if (!codeElement) return child;\n\n        const codeContent = codeElement.props.children;\n        const langName = extractLanguageFromCode(codeElement);\n        if (!langName) return child;\n\n        const cleanLang = hasOnlyJsonSnippet\n          ? \"json\"\n          : getCleanLanguage(langName) || langName;\n        const langInfo = getLanguageInfo(cleanLang);\n\n        // Handle primitive content types\n        if (\n          typeof codeContent === \"string\" ||\n          typeof codeContent === \"number\" ||\n          typeof codeContent === \"boolean\"\n        ) {\n          return (\n            <Code\n              key={langName}\n              language={langInfo.syntaxHighlighterKey || cleanLang}\n              snippet={String(codeContent)}\n              additionalCSS=\"bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-24 py-16\"\n              showLines={showCodeLines}\n            />\n          );\n        }\n\n        return child;\n      });\n  }, [\n    activeLanguage,\n    childrenArray,\n    extractLanguageFromCode,\n    getCleanLanguage,\n    hasOnlyJsonSnippet,\n    showCodeLines,\n  ]);\n\n  // Check if there's a snippet available for the active language\n  const hasSnippetForActiveLanguage = useMemo(() => {\n    if (!activeLanguage) return false;\n    if (hasOnlyJsonSnippet) return true;\n\n    return childrenArray.some((child) => {\n      if (!isValidElement(child)) return false;\n      const codeElement = isValidElement(child.props.children)\n        ? child.props.children\n        : null;\n      const langName = extractLanguageFromCode(codeElement);\n      return langName === activeLanguage;\n    });\n  }, [\n    activeLanguage,\n    childrenArray,\n    extractLanguageFromCode,\n    hasOnlyJsonSnippet,\n  ]);\n\n  // Function to get the current code text content\n  const getCodeText = useCallback((): string | null => {\n    if (!activeLanguage || !hasSnippetForActiveLanguage || !codeRef.current)\n      return null;\n\n    const allPreElements = codeRef.current.querySelectorAll(\"pre\");\n    for (const preElement of Array.from(allPreElements)) {\n      const codeElement = preElement.querySelector(\"code\");\n      if (!codeElement || !codeElement.className) continue;\n\n      const classNames = codeElement.className.split(\" \");\n      const langClass = classNames.find((cls) => cls.startsWith(\"language-\"));\n      if (!langClass) continue;\n\n      const langName = langClass.substring(9);\n      if (\n        (hasOnlyJsonSnippet && langName === \"json\") ||\n        (!hasOnlyJsonSnippet && langName === activeLanguage)\n      ) {\n        return codeElement.textContent || \"\";\n      }\n    }\n\n    return null;\n  }, [activeLanguage, hasSnippetForActiveLanguage, hasOnlyJsonSnippet]);\n\n  // Event handlers\n  const handleSDKTypeChange = useCallback(\n    (type: SDKType) => {\n      // pick first language matching the new SDK prefix\n      const nextLang = languages.find((l) => l.startsWith(`${type}_`)) ?? null;\n      setActiveSDKType(type);\n      setActiveLanguage(nextLang);\n    },\n    [languages],\n  );\n\n  const handleLanguageChange = useCallback(\n    (language: string) => {\n      setActiveLanguage(language);\n\n      // Call onChange with clean language name\n      if (onChange) {\n        const cleanLang = getCleanLanguage(language) || language;\n        onChange(cleanLang, activeSDKType);\n      }\n    },\n    [onChange, getCleanLanguage, activeSDKType],\n  );\n\n  const handleApiKeyChange = useCallback((apiKey: string) => {\n    setSelectedApiKey(apiKey);\n  }, []);\n\n  // Optimize no-snippet message as a component\n  const NoSnippetMessage = useMemo(() => {\n    if (!activeLanguageInfo) return () => null;\n\n    return () => (\n      <div className=\"px-64 py-24 ui-text-body2 text-neutral-800 dark:text-neutral-400 text-center flex flex-col gap-12 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  }, [activeLanguageInfo]);\n\n  // Determine if we should show the language selector\n  const showLanguageSelector = !fixed && filteredLanguages.length > 0;\n  const showFullSelector = filteredLanguages.length > 1;\n\n  // Memoize renderContent\n  const renderContent = useMemo(() => {\n    if (!activeLanguage) return null;\n\n    if (hasSnippetForActiveLanguage) {\n      return processedChildren;\n    }\n\n    if (activeLanguageInfo) {\n      return <NoSnippetMessage />;\n    }\n\n    return null;\n  }, [\n    activeLanguage,\n    hasSnippetForActiveLanguage,\n    processedChildren,\n    activeLanguageInfo,\n    NoSnippetMessage,\n  ]);\n\n  // Render special case for shell commands\n  if (isSingleShellCommand) {\n    const shellChild = childrenArray[0];\n    if (\n      isValidElement(shellChild) &&\n      isValidElement(shellChild.props.children)\n    ) {\n      const codeElement = shellChild.props.children;\n      const codeContent = codeElement.props.children;\n      return (\n        <ShellCommandView content={String(codeContent)} className={className} />\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-[54px]\",\n        className,\n      )}\n    >\n      {headerRow && (\n        <div className=\"h-[38px] bg-neutral-200 dark:bg-neutral-1100 border-b border-neutral-300 dark:border-neutral-1000 flex items-center py-4 px-12 rounded-t-lg\">\n          {/* macOS window buttons */}\n          <div className=\"flex space-x-6\">\n            <div className=\"w-[12px] h-[12px] rounded-full bg-orange-500\"></div>\n            <div className=\"w-[12px] h-[12px] rounded-full bg-yellow-500\"></div>\n            <div className=\"w-[12px] h-[12px] rounded-full bg-green-500\"></div>\n          </div>\n\n          {/* Title */}\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-[48px]\"></div>\n        </div>\n      )}\n\n      {/* SDK Type Selector Row */}\n      {showSDKSelector && (\n        <div\n          className={cn(\n            \"p-8 border-b border-neutral-200 dark:border-neutral-1100 h-[56px]\",\n            headerRow ? \"\" : \"rounded-t-lg\",\n          )}\n        >\n          <div className=\"flex gap-12 justify-start\">\n            {sdkTypes.has(\"realtime\") && (\n              <TooltipButton\n                tooltip=\"Realtime SDK\"\n                active={activeSDKType === \"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={activeSDKType === \"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      {/* Language Selector Row */}\n      {showLanguageSelector &&\n        (showFullSelector ? (\n          <LanguageSelector\n            languages={filteredLanguages}\n            activeLanguage={activeLanguage}\n            onLanguageChange={handleLanguageChange}\n            getLanguageDisplayName={getLanguageDisplayName}\n            getLanguageIcon={getLanguageIcon}\n            activeLanguageInfo={activeLanguageInfo}\n          />\n        ) : (\n          <div\n            className={cn(\n              \"border-b border-neutral-200 dark:border-neutral-1100 h-[34px] flex items-center px-12 cursor-pointer\",\n              headerRow ? \"\" : \"rounded-t-lg\",\n            )}\n            onClick={() => handleLanguageChange(filteredLanguages[0])}\n          >\n            {filteredLanguages.length > 0 && (\n              <>\n                <Icon\n                  name={getLanguageIcon(filteredLanguages[0])}\n                  size=\"16px\"\n                  additionalCSS=\"mr-8\"\n                />\n                <span className=\"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500 select-none\">\n                  {getLanguageDisplayName(filteredLanguages[0])}\n                </span>\n              </>\n            )}\n          </div>\n        ))}\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\n        {/* Copy button - simplified conditional */}\n        {isHovering && activeLanguage && hasSnippetForActiveLanguage && (\n          <CopyButton\n            onCopy={() => {\n              const text = getCodeText();\n              if (text) copy(text);\n            }}\n            isCopied={isCopied}\n          />\n        )}\n      </div>\n\n      {/* API Key Selector */}\n      {apiKeys && (\n        <ApiKeySelector\n          apiKeys={apiKeys}\n          selectedApiKey={selectedApiKey}\n          onApiKeyChange={handleApiKeyChange}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default CodeSnippet;\n"],"names":["React","useState","useEffect","Children","isValidElement","useRef","useCallback","useMemo","Code","cn","getLanguageInfo","Icon","LanguageSelector","ApiKeySelector","useCopyToClipboard","ShellCommandView","CopyButton","TooltipButton","CodeSnippet","fixed","headerRow","title","children","className","lang","onChange","apiKeys","sdk","showCodeLines","languageOrdering","codeRef","isCopied","copy","extractLanguageFromCode","codeElement","props","classNames","split","langClass","find","cls","startsWith","substring","childrenArray","languages","sdkTypes","originalLangMap","isSingleShellCommand","toArray","Set","Map","length","includes","forEach","child","preElement","langName","baseLanguage","add","set","push","activeSDKType","setActiveSDKType","size","has","activeLanguage","setActiveLanguage","selectedApiKey","setSelectedApiKey","isHovering","setIsHovering","showSDKSelector","hasOnlyJsonSnippet","filteredLanguages","filtered","filter","sort","a","b","aBase","get","bBase","aIndex","indexOf","bIndex","initialActiveLanguage","prefixedLang","label","getCleanLanguage","getLanguageInfoForDisplay","cleanLang","getLanguageDisplayName","getLanguageIcon","icon","activeLanguageInfo","processedChildren","targetLanguage","map","codeContent","langInfo","key","language","syntaxHighlighterKey","snippet","String","additionalCSS","showLines","hasSnippetForActiveLanguage","some","getCodeText","current","allPreElements","querySelectorAll","Array","from","querySelector","textContent","handleSDKTypeChange","type","nextLang","l","handleLanguageChange","handleApiKeyChange","apiKey","NoSnippetMessage","div","name","color","p","showLanguageSelector","showFullSelector","renderContent","shellChild","content","tooltip","active","onClick","variant","alwaysShowLabel","onLanguageChange","span","ref","onMouseEnter","onMouseLeave","onFocus","onBlur","tabIndex","onCopy","text","onApiKeyChange"],"mappings":"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"}

package/core/remote-session-data.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/remote-session-data.js"],"sourcesContent":["/* global __ENABLE_FETCH_WITH_CREDENTIALS__ */\n\n// Fetches current users session data\n// Assumes an authenticated session, so will only work when used on ably.com/ably.io\n\nimport { isJsonResponse } from \"./remote-data-util\";\n\nconst NOT_FOUND_ERROR_CODE = \"not-found\";\n\nconst fetchSessionData = async (store, sessionUrl) => {\n  const sessionLoaded = (payload = {}) =>\n    store.dispatch({ type: \"session/loaded\", payload });\n\n  try {\n    if (!sessionUrl) {\n      console.log(\n        `Skipping fetching session, invalid sessionUrl: \"${sessionUrl}\"`,\n      );\n      sessionLoaded();\n      return;\n    }\n\n    const options = {\n      headers: {\n        accept: \"application/json\",\n      },\n      cache: \"no-cache\",\n    };\n\n    if (__ENABLE_FETCH_WITH_CREDENTIALS__) {\n      options.credentials = \"include\";\n    }\n\n    const res = await fetch(sessionUrl, options);\n    const jsonResponse = isJsonResponse(res.headers.get(\"content-type\"));\n\n    if (!jsonResponse) {\n      throw new Error(\"Session endpoint is not serving json\");\n    }\n\n    const payload = await res.json();\n\n    if (payload.error === NOT_FOUND_ERROR_CODE) {\n      sessionLoaded();\n    } else {\n      sessionLoaded(payload);\n    }\n  } catch (e) {\n    sessionLoaded();\n    console.warn(\"Could not fetch session data due to error:\", e);\n  }\n};\n\nconst initialState = { data: null };\n\nconst REDUCER_KEY = \"session\";\n\nconst reducerSessionData = {\n  [REDUCER_KEY]: (state = initialState, action) => {\n    switch (action.type) {\n      case \"session/loaded\":\n        return { ...state, data: action.payload };\n      default:\n        return state;\n    }\n  },\n};\n\nconst selectSessionData = (store) => store.getState()[REDUCER_KEY]?.data;\n\nexport { fetchSessionData, reducerSessionData, selectSessionData };\n"],"names":["isJsonResponse","NOT_FOUND_ERROR_CODE","fetchSessionData","store","sessionUrl","sessionLoaded","payload","dispatch","type","console","log","options","headers","accept","cache","credentials","res","fetch","jsonResponse","get","Error","json","error","e","warn","initialState","data","REDUCER_KEY","reducerSessionData","state","action","selectSessionData","getState"],"mappings":"AAKA,OAASA,cAAc,KAAQ,oBAAqB,CAEpD,MAAMC,qBAAuB,YAE7B,MAAMC,iBAAmB,MAAOC,MAAOC,cACrC,MAAMC,cAAgB,CAACC,QAAU,CAAC,CAAC,GACjCH,MAAMI,QAAQ,CAAC,CAAEC,KAAM,iBAAkBF,OAAQ,GAEnD,GAAI,CACF,GAAI,CAACF,WAAY,CACfK,QAAQC,GAAG,CACT,CAAC,gDAAgD,EAAEN,WAAW,CAAC,CAAC,EAElEC,gBACA,MACF,CAEA,MAAMM,QAAU,CACdC,QAAS,CACPC,OAAQ,kBACV,EACAC,MAAO,UACT,EAEA,SAAuC,CACrCH,QAAQI,WAAW,CAAG,SACxB,CAEA,MAAMC,IAAM,MAAMC,MAAMb,WAAYO,SACpC,MAAMO,aAAelB,eAAegB,IAAIJ,OAAO,CAACO,GAAG,CAAC,iBAEpD,GAAI,CAACD,aAAc,CACjB,MAAM,IAAIE,MAAM,uCAClB,CAEA,MAAMd,QAAU,MAAMU,IAAIK,IAAI,GAE9B,GAAIf,QAAQgB,KAAK,GAAKrB,qBAAsB,CAC1CI,eACF,KAAO,CACLA,cAAcC,QAChB,CACF,CAAE,MAAOiB,EAAG,CACVlB,gBACAI,QAAQe,IAAI,CAAC,6CAA8CD,EAC7D,CACF,EAEA,MAAME,aAAe,CAAEC,KAAM,IAAK,EAElC,MAAMC,YAAc,UAEpB,MAAMC,mBAAqB,CACzB,CAACD,YAAY,CAAE,CAACE,MAAQJ,YAAY,CAAEK,UACpC,OAAQA,OAAOtB,IAAI,EACjB,IAAK,iBACH,MAAO,CAAE,GAAGqB,KAAK,CAAEH,KAAMI,OAAOxB,OAAO,AAAC,CAC1C,SACE,OAAOuB,KACX,CACF,CACF,EAEA,MAAME,kBAAoB,AAAC5B,OAAUA,MAAM6B,QAAQ,EAAE,CAACL,YAAY,EAAED,IAEpE,QAASxB,gBAAgB,CAAE0B,kBAAkB,CAAEG,iBAAiB,CAAG"}
+{"version":3,"sources":["../../src/core/remote-session-data.js"],"sourcesContent":["/* global __ENABLE_FETCH_WITH_CREDENTIALS__ */\n\n// Fetches current users session data\n// Assumes an authenticated session, so will only work when used on ably.com/ably.io\n\nimport { isJsonResponse } from \"./remote-data-util\";\n\nconst NOT_FOUND_ERROR_CODE = \"not-found\";\n\nconst fetchSessionData = async (store, sessionUrl) => {\n  const sessionLoaded = (payload = {}) =>\n    store.dispatch({ type: \"session/loaded\", payload });\n\n  try {\n    if (!sessionUrl) {\n      console.log(\n        `Skipping fetching session, invalid sessionUrl: \"${sessionUrl}\"`,\n      );\n      sessionLoaded();\n      return;\n    }\n\n    const options = {\n      headers: {\n        accept: \"application/json\",\n      },\n      cache: \"no-cache\",\n    };\n\n    if (__ENABLE_FETCH_WITH_CREDENTIALS__) {\n      options.credentials = \"include\";\n    }\n\n    const res = await fetch(sessionUrl, options);\n    const jsonResponse = isJsonResponse(res.headers.get(\"content-type\"));\n\n    if (!jsonResponse) {\n      throw new Error(\"Session endpoint is not serving json\");\n    }\n\n    const payload = await res.json();\n\n    if (payload.error === NOT_FOUND_ERROR_CODE) {\n      sessionLoaded();\n    } else {\n      sessionLoaded(payload);\n    }\n  } catch (e) {\n    sessionLoaded();\n    console.warn(\"Could not fetch session data due to error:\", e);\n  }\n};\n\nconst initialState = { data: null };\n\nconst REDUCER_KEY = \"session\";\n\nconst reducerSessionData = {\n  [REDUCER_KEY]: (state = initialState, action) => {\n    switch (action.type) {\n      case \"session/loaded\":\n        return { ...state, data: action.payload };\n      default:\n        return state;\n    }\n  },\n};\n\nconst selectSessionData = (store) => store.getState()[REDUCER_KEY]?.data;\n\nexport { fetchSessionData, reducerSessionData, selectSessionData };\n"],"names":["isJsonResponse","NOT_FOUND_ERROR_CODE","fetchSessionData","store","sessionUrl","sessionLoaded","payload","dispatch","type","console","log","options","headers","accept","cache","credentials","res","fetch","jsonResponse","get","Error","json","error","e","warn","initialState","data","REDUCER_KEY","reducerSessionData","state","action","selectSessionData","getState"],"mappings":"AAKA,OAASA,cAAc,KAAQ,oBAAqB,CAEpD,MAAMC,qBAAuB,YAE7B,MAAMC,iBAAmB,MAAOC,MAAOC,cACrC,MAAMC,cAAgB,CAACC,QAAU,CAAC,CAAC,GACjCH,MAAMI,QAAQ,CAAC,CAAEC,KAAM,iBAAkBF,OAAQ,GAEnD,GAAI,CACF,GAAI,CAACF,WAAY,CACfK,QAAQC,GAAG,CACT,CAAC,gDAAgD,EAAEN,WAAW,CAAC,CAAC,EAElEC,gBACA,MACF,CAEA,MAAMM,QAAU,CACdC,QAAS,CACPC,OAAQ,kBACV,EACAC,MAAO,UACT,EAEA,GA0BiB,MA1BsB,CACrCH,QAAQI,WAAW,CAAG,SACxB,CAEA,MAAMC,IAAM,MAAMC,MAAMb,WAAYO,SACpC,MAAMO,aAAelB,eAAegB,IAAIJ,OAAO,CAACO,GAAG,CAAC,iBAEpD,GAAI,CAACD,aAAc,CACjB,MAAM,IAAIE,MAAM,uCAClB,CAEA,MAAMd,QAAU,MAAMU,IAAIK,IAAI,GAE9B,GAAIf,QAAQgB,KAAK,GAAKrB,qBAAsB,CAC1CI,eACF,KAAO,CACLA,cAAcC,QAChB,CACF,CAAE,MAAOiB,EAAG,CACVlB,gBACAI,QAAQe,IAAI,CAAC,6CAA8CD,EAC7D,CACF,EAEA,MAAME,aAAe,CAAEC,KAAM,IAAK,EAElC,MAAMC,YAAc,UAEpB,MAAMC,mBAAqB,CACzB,CAACD,YAAY,CAAE,CAACE,MAAQJ,YAAY,CAAEK,UACpC,OAAQA,OAAOtB,IAAI,EACjB,IAAK,iBACH,MAAO,CAAE,GAAGqB,KAAK,CAAEH,KAAMI,OAAOxB,OAAO,AAAC,CAC1C,SACE,OAAOuB,KACX,CACF,CACF,EAEA,MAAME,kBAAoB,AAAC5B,OAAUA,MAAM6B,QAAQ,EAAE,CAACL,YAAY,EAAED,IAEpE,QAASxB,gBAAgB,CAAE0B,kBAAkB,CAAEG,iBAAiB,CAAG"}

package/index.d.ts

@@ -313,7 +313,7 @@ interface ApiKeySelectorProps {
     selectedApiKey: string;
     onApiKeyChange: (apiKey: string) => void;
 }
-const ApiKeySelector: React.NamedExoticComponent<ApiKeySelectorProps>;
+const ApiKeySelector: React.MemoExoticComponent<({ apiKeys, selectedApiKey, onApiKeyChange }: ApiKeySelectorProps) => import("react/jsx-runtime").JSX.Element>;
 export default ApiKeySelector;
 //# sourceMappingURL=ApiKeySelector.d.ts.map
 }
@@ -328,7 +328,7 @@ interface CopyButtonProps {
 /**
  * A reusable copy button component with tooltip and copied indicator
  */
-const CopyButton: React.FC<CopyButtonProps>;
+const CopyButton: React.MemoExoticComponent<({ onCopy, isCopied, tooltip }: CopyButtonProps) => import("react/jsx-runtime").JSX.Element>;
 export default CopyButton;
 //# sourceMappingURL=CopyButton.d.ts.map
 }
@@ -336,18 +336,19 @@ export default CopyButton;
 declare module '@ably/ui/core/CodeSnippet/LanguageSelector' {
 import React from "react";
 import { IconName } from ".@ably/ui/core/Icon/types";
+interface LanguageInfo {
+    label: string;
+    icon: IconName;
+}
 interface LanguageSelectorProps {
     languages: string[];
     activeLanguage: string | null;
     onLanguageChange: (language: string) => void;
     getLanguageDisplayName: (lang: string) => string;
     getLanguageIcon: (lang: string) => IconName;
-    activeLanguageInfo: {
-        label: string;
-        icon: IconName;
-    } | null;
+    activeLanguageInfo: LanguageInfo | null;
 }
-const LanguageSelector: React.NamedExoticComponent<LanguageSelectorProps>;
+const LanguageSelector: React.MemoExoticComponent<({ languages, activeLanguage, onLanguageChange, getLanguageDisplayName, getLanguageIcon, activeLanguageInfo, }: LanguageSelectorProps) => import("react/jsx-runtime").JSX.Element>;
 export default LanguageSelector;
 //# sourceMappingURL=LanguageSelector.d.ts.map
 }
@@ -358,11 +359,8 @@ interface ShellCommandViewProps {
     content: string;
     className?: string;
 }
-/**
- * A specialized component for displaying shell commands with copy functionality
- */
-const ShellCommandView: React.FC<ShellCommandViewProps>;
-export default ShellCommandView;
+const _default: React.NamedExoticComponent<ShellCommandViewProps>;
+export default _default;
 //# sourceMappingURL=ShellCommandView.d.ts.map
 }
 
@@ -383,7 +381,7 @@ interface TooltipButtonProps {
 /**
  * A unified tooltip button component that can render either a segmented control or an icon button
  */
-const TooltipButton: React.FC<TooltipButtonProps>;
+const TooltipButton: React.MemoExoticComponent<({ tooltip, active, onClick, icon, className, children, variant, size, alwaysShowLabel, }: TooltipButtonProps) => import("react/jsx-runtime").JSX.Element>;
 export default TooltipButton;
 //# sourceMappingURL=TooltipButton.d.ts.map
 }
@@ -443,6 +441,15 @@ export interface CodeSnippetProps {
      * Default SDK type to use for the code snippet
      */
     sdk?: SDKType;
+    /**
+     * Whether to show line numbers in code snippets
+     */
+    showCodeLines?: boolean;
+    /**
+     * Defines the order in which languages should be displayed.
+     * Languages not in this array will be shown after those that are included.
+     */
+    languageOrdering?: string[];
 }
 /**
  * CodeSnippet component that displays code with language switching capability

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "16.2.2",
+  "version": "16.2.3-dev.408109d7",
   "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",