@bergetai/ui 0.17.0 → 0.19.0

package/dist/hooks/use-highlighted-code.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-highlighted-code.mjs","names":[],"sources":["../../src/hooks/use-highlighted-code.ts"],"sourcesContent":["// BERGET: upstream uses an intentional mutate-during-render streaming pattern\n// (see the init/render loop below); the React Compiler skips this file, which\n// is safe and expected. Keep this minimal when replaying upstream updates.\n/* eslint-disable react-hooks/preserve-manual-memoization */\nimport * as React from 'react';\n\nimport { loadHighlighter } from '@/lib/highlighter';\n\nexport function useHighlightedCode(value: string, language: string) {\n  // A trailing newline would render as an extra empty line.\n  const code = value.endsWith('\\n') ? value.slice(0, -1) : value;\n  const [loaded, setLoaded] = React.useState<{\n    language: string;\n    highlighter: Awaited<ReturnType<typeof loadHighlighter>>;\n  } | null>(null);\n  const highlighter = loaded?.language === language ? loaded.highlighter : null;\n\n  React.useEffect(() => {\n    let cancelled = false;\n\n    loadHighlighter(language)\n      .then((next) => {\n        if (!cancelled) {\n          setLoaded({ language, highlighter: next });\n        }\n      })\n      .catch(() => {});\n\n    return () => {\n      cancelled = true;\n    };\n  }, [language]);\n\n  // The complete lines, highlighted. While the code streams, only the new\n  // lines are tokenized, starting from the grammar state of the last one.\n  const [done, setDone] = React.useState<{\n    highlighter: typeof highlighter;\n    text: string;\n    lines: React.ReactNode[];\n    state?: Parameters<NonNullable<typeof highlighter>['highlight']>[1];\n  }>({ highlighter: null, text: '', lines: [] });\n\n  let next = done;\n\n  if (next.highlighter !== highlighter || !code.startsWith(next.text)) {\n    next = { highlighter, text: '', lines: [] };\n  }\n\n  const end = code.lastIndexOf('\\n') + 1;\n\n  if (highlighter && end > next.text.length) {\n    const result = highlighter.highlight(code.slice(next.text.length, end - 1), next.state);\n\n    next = {\n      highlighter,\n      text: code.slice(0, end),\n      lines: [...next.lines, ...result.lines],\n      state: result.state,\n    };\n  }\n\n  if (next !== done) {\n    setDone(next);\n  }\n\n  // The last line is still being written, so it is tokenized on every render.\n  const tail = code.slice(end);\n\n  return React.useMemo(() => {\n    if (!highlighter) {\n      return code.split('\\n');\n    }\n\n    return [...next.lines, highlighter.highlight(tail, next.state).lines[0]];\n  }, [code, highlighter, next, tail]);\n}\n"],"mappings":";;;AAQA,SAAgB,mBAAmB,OAAe,UAAkB;CAElE,MAAM,OAAO,MAAM,SAAS,IAAI,IAAI,MAAM,MAAM,GAAG,EAAE,IAAI;CACzD,MAAM,CAAC,QAAQ,aAAa,MAAM,SAGxB,IAAI;CACd,MAAM,cAAc,QAAQ,aAAa,WAAW,OAAO,cAAc;CAEzE,MAAM,gBAAgB;EACpB,IAAI,YAAY;EAEhB,gBAAgB,QAAQ,CAAC,CACtB,MAAM,SAAS;GACd,IAAI,CAAC,WACH,UAAU;IAAE;IAAU,aAAa;GAAK,CAAC;EAE7C,CAAC,CAAC,CACD,YAAY,CAAC,CAAC;EAEjB,aAAa;GACX,YAAY;EACd;CACF,GAAG,CAAC,QAAQ,CAAC;CAIb,MAAM,CAAC,MAAM,WAAW,MAAM,SAK3B;EAAE,aAAa;EAAM,MAAM;EAAI,OAAO,CAAC;CAAE,CAAC;CAE7C,IAAI,OAAO;CAEX,IAAI,KAAK,gBAAgB,eAAe,CAAC,KAAK,WAAW,KAAK,IAAI,GAChE,OAAO;EAAE;EAAa,MAAM;EAAI,OAAO,CAAC;CAAE;CAG5C,MAAM,MAAM,KAAK,YAAY,IAAI,IAAI;CAErC,IAAI,eAAe,MAAM,KAAK,KAAK,QAAQ;EACzC,MAAM,SAAS,YAAY,UAAU,KAAK,MAAM,KAAK,KAAK,QAAQ,MAAM,CAAC,GAAG,KAAK,KAAK;EAEtF,OAAO;GACL;GACA,MAAM,KAAK,MAAM,GAAG,GAAG;GACvB,OAAO,CAAC,GAAG,KAAK,OAAO,GAAG,OAAO,KAAK;GACtC,OAAO,OAAO;EAChB;CACF;CAEA,IAAI,SAAS,MACX,QAAQ,IAAI;CAId,MAAM,OAAO,KAAK,MAAM,GAAG;CAE3B,OAAO,MAAM,cAAc;EACzB,IAAI,CAAC,aACH,OAAO,KAAK,MAAM,IAAI;EAGxB,OAAO,CAAC,GAAG,KAAK,OAAO,YAAY,UAAU,MAAM,KAAK,KAAK,CAAC,CAAC,MAAM,EAAE;CACzE,GAAG;EAAC;EAAM;EAAa;EAAM;CAAI,CAAC;AACpC"}

package/dist/index.cjs

@@ -1,5 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_ThemeProvider = require("./components/theme-provider/ThemeProvider.cjs");
+const require_utils = require("./lib/utils.cjs");
 const require_ThemeToggle = require("./components/theme-provider/ThemeToggle.cjs");
 const require_button = require("./primitives/button.cjs");
 const require_Button = require("./components/button/Button.cjs");
@@ -58,7 +59,9 @@ const require_Grid = require("./components/grid/Grid.cjs");
 const require_Box = require("./components/box/Box.cjs");
 const require_LanguageSelect = require("./components/language-select/LanguageSelect.cjs");
 const require_List = require("./components/list/List.cjs");
+const require_code_block = require("./primitives/code-block.cjs");
 const require_CodeBlock = require("./components/code-block/CodeBlock.cjs");
+const require_use_highlighted_code = require("./hooks/use-highlighted-code.cjs");
 const require_WindowFrame = require("./components/window-frame/WindowFrame.cjs");
 const require_FogIllustration = require("./components/fog-illustration/FogIllustration.cjs");
 let _shadcn_react_message_scroller = require("@shadcn/react/message-scroller");
@@ -95,6 +98,13 @@ exports.CardHeader = require_card.CardHeader;
 exports.CardTitle = require_card.CardTitle;
 exports.Checkbox = require_Checkbox.Checkbox;
 exports.CodeBlock = require_CodeBlock.CodeBlock;
+exports.CodeBlockActions = require_code_block.CodeBlockActions;
+exports.CodeBlockContent = require_code_block.CodeBlockContent;
+exports.CodeBlockCopyButton = require_code_block.CodeBlockCopyButton;
+exports.CodeBlockFooter = require_code_block.CodeBlockFooter;
+exports.CodeBlockHeader = require_CodeBlock.CodeBlockHeader;
+exports.CodeBlockLine = require_code_block.CodeBlockLine;
+exports.CodeBlockTitle = require_CodeBlock.CodeBlockTitle;
 exports.Combobox = require_combobox.Combobox;
 exports.ComboboxClear = require_combobox.ComboboxClear;
 exports.ComboboxContent = require_combobox.ComboboxContent;
@@ -283,6 +293,7 @@ exports.buttonVariants = require_button.buttonVariants;
 exports.cardVariants = require_Card.cardVariants;
 exports.categoryLabels = require_ModelLogo.categoryLabels;
 exports.checkboxVariants = require_Checkbox.checkboxVariants;
+exports.cn = require_utils.cn;
 exports.containerVariants = require_Container.containerVariants;
 exports.getCountryByCode = require_countries.getCountryByCode;
 exports.getCountryByName = require_countries.getCountryByName;
@@ -295,6 +306,7 @@ exports.switchThumbVariants = require_Switch.switchThumbVariants;
 exports.tabsListVariants = require_Tabs.tabsListVariants;
 exports.tabsTriggerVariants = require_Tabs.tabsTriggerVariants;
 exports.typographyVariants = require_Typography.typographyVariants;
+exports.useHighlightedCode = require_use_highlighted_code.useHighlightedCode;
 Object.defineProperty(exports, "useMessageScroller", {
 	enumerable: true,
 	get: function() {

package/dist/index.d.cts

@@ -102,9 +102,13 @@ import { LanguageSelect, LanguageSelectOption, LanguageSelectProps } from "./com
 import "./components/language-select/index.cjs";
 import { FeatureList, FeatureListProps, List, ListHeader, ListHeaderProps, ListItem, ListItemProps, ListProps } from "./components/list/List.cjs";
 import "./components/list/index.cjs";
-import { CodeBlock, CodeBlockProps } from "./components/code-block/CodeBlock.cjs";
+import { CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockLine } from "./primitives/code-block.cjs";
+import { CodeBlock, CodeBlockHeader, CodeBlockTitle } from "./components/code-block/CodeBlock.cjs";
+import "./components/code-block/index.cjs";
+import { useHighlightedCode } from "./hooks/use-highlighted-code.cjs";
 import { TerminalExample } from "./lib/terminal.cjs";
+import { cn } from "./lib/utils.cjs";
 import { WindowFrame, WindowFrameProps, WindowTab } from "./components/window-frame/WindowFrame.cjs";
 import "./components/window-frame/index.cjs";
 import { FOG_BRAND_PALETTE, FogIllustration, FogIllustrationProps, FogPalette } from "./components/fog-illustration/FogIllustration.cjs";
-export { Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Anchor, type AnchorProps, type AnchorVariantsProps, Badge, type BadgeProps, BergetLogo, type BergetLogoProps, Box, type BoxProps, type SpacingScale as BoxSpacingScale, Bubble, BubbleContent, BubbleGroup, BubbleReactions, Button, type ButtonProps, COUNTRIES, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockProps, Combobox, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Container, type ContainerProps, type Country, CountrySelect, type CountrySelectProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EU_COUNTRY_CODES, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, type EmptyProps, EmptyTitle, FOG_BRAND_PALETTE, FeatureList, type FeatureListProps, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FogIllustration, type FogIllustrationProps, type FogPalette, Grid, type GridColsScale, type GridProps, type GridRowsScale, type SpacingScale$1 as GridSpacingScale, Icon, type IconProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, InputGroupInput, type InputGroupProps, InputGroupText, InputGroupTextarea, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, type ItemProps, ItemSeparator, ItemTitle, Label, LanguageSelect, type LanguageSelectOption, type LanguageSelectProps, Link, type LinkProps, List, ListHeader, type ListHeaderProps, ListItem, type ListItemProps, type ListProps, Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, ModelCard, type ModelCardProps, type ModelCategory, type ModelLifecycle, ModelLogo, type ModelLogoProps, type ModelLogoProvider, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, type ProgressProps, ProgressTrack, ProgressValue, RadioGroup, RadioGroupItem, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLogo, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarPageHeader, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, type SkeletonProps, Slider, type SliderProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, type TerminalExample, Textarea, type Theme, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, type TooltipTriggerProps, Typography, type TypographyProps, WindowFrame, type WindowFrameProps, type WindowTab, alertVariants, anchorVariants, badgeVariants, boxVariants, buttonVariants, cardVariants, categoryLabels, checkboxVariants, containerVariants, getCountryByCode, getCountryByName, gridVariants, isEUCountry, linkVariants, navigationMenuTriggerStyle, switchRootVariants, switchThumbVariants, tabsListVariants, tabsTriggerVariants, typographyVariants, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, useSidebar, useTheme };
+export { Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Anchor, type AnchorProps, type AnchorVariantsProps, Badge, type BadgeProps, BergetLogo, type BergetLogoProps, Box, type BoxProps, type SpacingScale as BoxSpacingScale, Bubble, BubbleContent, BubbleGroup, BubbleReactions, Button, type ButtonProps, COUNTRIES, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, Combobox, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Container, type ContainerProps, type Country, CountrySelect, type CountrySelectProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EU_COUNTRY_CODES, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, type EmptyProps, EmptyTitle, FOG_BRAND_PALETTE, FeatureList, type FeatureListProps, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FogIllustration, type FogIllustrationProps, type FogPalette, Grid, type GridColsScale, type GridProps, type GridRowsScale, type SpacingScale$1 as GridSpacingScale, Icon, type IconProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, InputGroupInput, type InputGroupProps, InputGroupText, InputGroupTextarea, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, type ItemProps, ItemSeparator, ItemTitle, Label, LanguageSelect, type LanguageSelectOption, type LanguageSelectProps, Link, type LinkProps, List, ListHeader, type ListHeaderProps, ListItem, type ListItemProps, type ListProps, Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, ModelCard, type ModelCardProps, type ModelCategory, type ModelLifecycle, ModelLogo, type ModelLogoProps, type ModelLogoProvider, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, type ProgressProps, ProgressTrack, ProgressValue, RadioGroup, RadioGroupItem, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLogo, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarPageHeader, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, type SkeletonProps, Slider, type SliderProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, type TerminalExample, Textarea, type Theme, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, type TooltipTriggerProps, Typography, type TypographyProps, WindowFrame, type WindowFrameProps, type WindowTab, alertVariants, anchorVariants, badgeVariants, boxVariants, buttonVariants, cardVariants, categoryLabels, checkboxVariants, cn, containerVariants, getCountryByCode, getCountryByName, gridVariants, isEUCountry, linkVariants, navigationMenuTriggerStyle, switchRootVariants, switchThumbVariants, tabsListVariants, tabsTriggerVariants, typographyVariants, useHighlightedCode, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, useSidebar, useTheme };

package/dist/index.d.mts

@@ -102,9 +102,13 @@ import { LanguageSelect, LanguageSelectOption, LanguageSelectProps } from "./com
 import "./components/language-select/index.mjs";
 import { FeatureList, FeatureListProps, List, ListHeader, ListHeaderProps, ListItem, ListItemProps, ListProps } from "./components/list/List.mjs";
 import "./components/list/index.mjs";
-import { CodeBlock, CodeBlockProps } from "./components/code-block/CodeBlock.mjs";
+import { CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockLine } from "./primitives/code-block.mjs";
+import { CodeBlock, CodeBlockHeader, CodeBlockTitle } from "./components/code-block/CodeBlock.mjs";
+import "./components/code-block/index.mjs";
+import { useHighlightedCode } from "./hooks/use-highlighted-code.mjs";
 import { TerminalExample } from "./lib/terminal.mjs";
+import { cn } from "./lib/utils.mjs";
 import { WindowFrame, WindowFrameProps, WindowTab } from "./components/window-frame/WindowFrame.mjs";
 import "./components/window-frame/index.mjs";
 import { FOG_BRAND_PALETTE, FogIllustration, FogIllustrationProps, FogPalette } from "./components/fog-illustration/FogIllustration.mjs";
-export { Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Anchor, type AnchorProps, type AnchorVariantsProps, Badge, type BadgeProps, BergetLogo, type BergetLogoProps, Box, type BoxProps, type SpacingScale as BoxSpacingScale, Bubble, BubbleContent, BubbleGroup, BubbleReactions, Button, type ButtonProps, COUNTRIES, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockProps, Combobox, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Container, type ContainerProps, type Country, CountrySelect, type CountrySelectProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EU_COUNTRY_CODES, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, type EmptyProps, EmptyTitle, FOG_BRAND_PALETTE, FeatureList, type FeatureListProps, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FogIllustration, type FogIllustrationProps, type FogPalette, Grid, type GridColsScale, type GridProps, type GridRowsScale, type SpacingScale$1 as GridSpacingScale, Icon, type IconProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, InputGroupInput, type InputGroupProps, InputGroupText, InputGroupTextarea, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, type ItemProps, ItemSeparator, ItemTitle, Label, LanguageSelect, type LanguageSelectOption, type LanguageSelectProps, Link, type LinkProps, List, ListHeader, type ListHeaderProps, ListItem, type ListItemProps, type ListProps, Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, ModelCard, type ModelCardProps, type ModelCategory, type ModelLifecycle, ModelLogo, type ModelLogoProps, type ModelLogoProvider, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, type ProgressProps, ProgressTrack, ProgressValue, RadioGroup, RadioGroupItem, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLogo, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarPageHeader, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, type SkeletonProps, Slider, type SliderProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, type TerminalExample, Textarea, type Theme, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, type TooltipTriggerProps, Typography, type TypographyProps, WindowFrame, type WindowFrameProps, type WindowTab, alertVariants, anchorVariants, badgeVariants, boxVariants, buttonVariants, cardVariants, categoryLabels, checkboxVariants, containerVariants, getCountryByCode, getCountryByName, gridVariants, isEUCountry, linkVariants, navigationMenuTriggerStyle, switchRootVariants, switchThumbVariants, tabsListVariants, tabsTriggerVariants, typographyVariants, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, useSidebar, useTheme };
+export { Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Anchor, type AnchorProps, type AnchorVariantsProps, Badge, type BadgeProps, BergetLogo, type BergetLogoProps, Box, type BoxProps, type SpacingScale as BoxSpacingScale, Bubble, BubbleContent, BubbleGroup, BubbleReactions, Button, type ButtonProps, COUNTRIES, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, Combobox, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Container, type ContainerProps, type Country, CountrySelect, type CountrySelectProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EU_COUNTRY_CODES, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, type EmptyProps, EmptyTitle, FOG_BRAND_PALETTE, FeatureList, type FeatureListProps, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FogIllustration, type FogIllustrationProps, type FogPalette, Grid, type GridColsScale, type GridProps, type GridRowsScale, type SpacingScale$1 as GridSpacingScale, Icon, type IconProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, InputGroupInput, type InputGroupProps, InputGroupText, InputGroupTextarea, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, type ItemProps, ItemSeparator, ItemTitle, Label, LanguageSelect, type LanguageSelectOption, type LanguageSelectProps, Link, type LinkProps, List, ListHeader, type ListHeaderProps, ListItem, type ListItemProps, type ListProps, Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, ModelCard, type ModelCardProps, type ModelCategory, type ModelLifecycle, ModelLogo, type ModelLogoProps, type ModelLogoProvider, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, type ProgressProps, ProgressTrack, ProgressValue, RadioGroup, RadioGroupItem, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLogo, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarPageHeader, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, type SkeletonProps, Slider, type SliderProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, type TerminalExample, Textarea, type Theme, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, type TooltipTriggerProps, Typography, type TypographyProps, WindowFrame, type WindowFrameProps, type WindowTab, alertVariants, anchorVariants, badgeVariants, boxVariants, buttonVariants, cardVariants, categoryLabels, checkboxVariants, cn, containerVariants, getCountryByCode, getCountryByName, gridVariants, isEUCountry, linkVariants, navigationMenuTriggerStyle, switchRootVariants, switchThumbVariants, tabsListVariants, tabsTriggerVariants, typographyVariants, useHighlightedCode, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, useSidebar, useTheme };

package/dist/index.mjs

@@ -1,4 +1,5 @@
 import { ThemeProvider, useTheme } from "./components/theme-provider/ThemeProvider.mjs";
+import { cn } from "./lib/utils.mjs";
 import { ThemeToggle } from "./components/theme-provider/ThemeToggle.mjs";
 import { buttonVariants } from "./primitives/button.mjs";
 import { Button } from "./components/button/Button.mjs";
@@ -57,7 +58,9 @@ import { Grid, gridVariants } from "./components/grid/Grid.mjs";
 import { Box, boxVariants } from "./components/box/Box.mjs";
 import { LanguageSelect } from "./components/language-select/LanguageSelect.mjs";
 import { FeatureList, List, ListHeader, ListItem } from "./components/list/List.mjs";
-import { CodeBlock } from "./components/code-block/CodeBlock.mjs";
+import { CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockLine } from "./primitives/code-block.mjs";
+import { CodeBlock, CodeBlockHeader, CodeBlockTitle } from "./components/code-block/CodeBlock.mjs";
+import { useHighlightedCode } from "./hooks/use-highlighted-code.mjs";
 import { WindowFrame } from "./components/window-frame/WindowFrame.mjs";
 import { FOG_BRAND_PALETTE, FogIllustration } from "./components/fog-illustration/FogIllustration.mjs";
-export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Anchor, Badge, BergetLogo, Box, Bubble, BubbleContent, BubbleGroup, BubbleReactions, Button, COUNTRIES, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CodeBlock, Combobox, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Container, CountrySelect, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EU_COUNTRY_CODES, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FOG_BRAND_PALETTE, FeatureList, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FogIllustration, Grid, Icon, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Label, LanguageSelect, Link, List, ListHeader, ListItem, Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, ModelCard, ModelLogo, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RadioGroup, RadioGroupItem, SearchInput, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLogo, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarPageHeader, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, ThemeToggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typography, WindowFrame, alertVariants, anchorVariants, badgeVariants, boxVariants, buttonVariants, cardVariants, categoryLabels, checkboxVariants, containerVariants, getCountryByCode, getCountryByName, gridVariants, isEUCountry, linkVariants, navigationMenuTriggerStyle, switchRootVariants, switchThumbVariants, tabsListVariants, tabsTriggerVariants, typographyVariants, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, useSidebar, useTheme };
+export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Anchor, Badge, BergetLogo, Box, Bubble, BubbleContent, BubbleGroup, BubbleReactions, Button, COUNTRIES, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, Combobox, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Container, CountrySelect, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EU_COUNTRY_CODES, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FOG_BRAND_PALETTE, FeatureList, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FogIllustration, Grid, Icon, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Label, LanguageSelect, Link, List, ListHeader, ListItem, Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, ModelCard, ModelLogo, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RadioGroup, RadioGroupItem, SearchInput, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLogo, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarPageHeader, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, ThemeToggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typography, WindowFrame, alertVariants, anchorVariants, badgeVariants, boxVariants, buttonVariants, cardVariants, categoryLabels, checkboxVariants, cn, containerVariants, getCountryByCode, getCountryByName, gridVariants, isEUCountry, linkVariants, navigationMenuTriggerStyle, switchRootVariants, switchThumbVariants, tabsListVariants, tabsTriggerVariants, typographyVariants, useHighlightedCode, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, useSidebar, useTheme };

package/dist/lib/highlighter.cjs

@@ -0,0 +1,81 @@
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+const require_shiki_theme = require("./shiki-theme.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+let shiki_core = require("shiki/core");
+let shiki_engine_javascript = require("shiki/engine/javascript");
+//#region src/lib/highlighter.tsx
+const languages = {
+	bash: () => import("shiki/langs/shellscript.mjs"),
+	css: () => import("shiki/langs/css.mjs"),
+	diff: () => import("shiki/langs/diff.mjs"),
+	html: () => import("shiki/langs/html.mjs"),
+	javascript: () => import("shiki/langs/javascript.mjs"),
+	json: () => import("shiki/langs/json.mjs"),
+	jsx: () => import("shiki/langs/jsx.mjs"),
+	markdown: () => import("shiki/langs/markdown.mjs"),
+	python: () => import("shiki/langs/python.mjs"),
+	sql: () => import("shiki/langs/sql.mjs"),
+	tsx: () => import("shiki/langs/tsx.mjs"),
+	typescript: () => import("shiki/langs/typescript.mjs"),
+	yaml: () => import("shiki/langs/yaml.mjs"),
+	dockerfile: () => import("shiki/langs/dockerfile.mjs")
+};
+const aliases = {
+	js: "javascript",
+	md: "markdown",
+	py: "python",
+	sh: "bash",
+	shell: "bash",
+	shellscript: "bash",
+	ts: "typescript",
+	yml: "yaml",
+	zsh: "bash",
+	docker: "dockerfile"
+};
+let highlighter;
+function getHighlighter() {
+	highlighter ??= (0, shiki_core.createHighlighterCore)({
+		themes: [require_shiki_theme.bergetShikiTheme],
+		langs: [],
+		engine: (0, shiki_engine_javascript.createJavaScriptRegexEngine)({ forgiving: true })
+	});
+	return highlighter;
+}
+function getLanguage(language) {
+	const name = language.toLowerCase();
+	if (name === "ansi") return name;
+	if (name in languages) return name;
+	return aliases[name] ?? null;
+}
+async function loadHighlighter(language) {
+	const lang = getLanguage(language);
+	if (!lang) return null;
+	const shiki = await getHighlighter();
+	if (lang !== "ansi" && !shiki.getLoadedLanguages().includes(lang)) await shiki.loadLanguage(languages[lang]);
+	return { highlight(code, state) {
+		const tokenize = (text) => shiki.codeToTokens(text, {
+			lang,
+			themes: {
+				light: "berget",
+				dark: "berget"
+			},
+			defaultColor: false,
+			grammarState: state
+		}).tokens;
+		const tokens = lang === "ansi" ? code.split("\n").flatMap((line) => tokenize(line)) : tokenize(code);
+		return {
+			lines: tokens.map((line) => line.map((token, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: token.htmlStyle,
+				className: "\n                text-(--shiki-light)\n                dark:text-(--shiki-dark)\n              ",
+				children: token.content
+			}, index))),
+			state: shiki.getLastGrammarState(tokens)
+		};
+	} };
+}
+//#endregion
+exports.loadHighlighter = loadHighlighter;
+
+//# sourceMappingURL=highlighter.cjs.map

package/dist/lib/highlighter.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlighter.cjs","names":["createHighlighterCore","bergetShikiTheme","createJavaScriptRegexEngine"],"sources":["../../src/lib/highlighter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { createHighlighterCore, type GrammarState, type HighlighterCore } from 'shiki/core';\nimport { createJavaScriptRegexEngine } from 'shiki/engine/javascript';\n\n// BERGET: brand syntax-highlighting theme. CSS-variables theme backed by the\n// --berget-shiki-* tokens in styles/index.css (dark + light). Keep this patch\n// minimal so re-running `npx shadcn@latest add code-block --overwrite` is easy.\nimport { bergetShikiTheme } from './shiki-theme';\n\n// Add the languages you need. Each one loads the first time it is used.\nconst languages = {\n  bash: () => import('shiki/langs/shellscript.mjs'),\n  css: () => import('shiki/langs/css.mjs'),\n  diff: () => import('shiki/langs/diff.mjs'),\n  html: () => import('shiki/langs/html.mjs'),\n  javascript: () => import('shiki/langs/javascript.mjs'),\n  json: () => import('shiki/langs/json.mjs'),\n  jsx: () => import('shiki/langs/jsx.mjs'),\n  markdown: () => import('shiki/langs/markdown.mjs'),\n  python: () => import('shiki/langs/python.mjs'),\n  sql: () => import('shiki/langs/sql.mjs'),\n  tsx: () => import('shiki/langs/tsx.mjs'),\n  typescript: () => import('shiki/langs/typescript.mjs'),\n  yaml: () => import('shiki/langs/yaml.mjs'),\n  dockerfile: () => import('shiki/langs/dockerfile.mjs'),\n};\n\nconst aliases: Record<string, keyof typeof languages> = {\n  js: 'javascript',\n  md: 'markdown',\n  py: 'python',\n  sh: 'bash',\n  shell: 'bash',\n  shellscript: 'bash',\n  ts: 'typescript',\n  yml: 'yaml',\n  zsh: 'bash',\n  docker: 'dockerfile',\n};\n\nlet highlighter: Promise<HighlighterCore> | undefined;\n\nfunction getHighlighter() {\n  highlighter ??= createHighlighterCore({\n    // BERGET: single CSS-variables theme instead of github-light/dark.\n    themes: [bergetShikiTheme],\n    langs: [],\n    engine: createJavaScriptRegexEngine({ forgiving: true }),\n  });\n\n  return highlighter;\n}\n\nfunction getLanguage(language: string) {\n  const name = language.toLowerCase();\n\n  if (name === 'ansi') {\n    return name;\n  }\n\n  if (name in languages) {\n    return name as keyof typeof languages;\n  }\n\n  return aliases[name] ?? null;\n}\n\n// Loads a language and returns a highlighter for it, or null for a language\n// that is not listed.\nexport async function loadHighlighter(language: string) {\n  const lang = getLanguage(language);\n\n  if (!lang) {\n    return null;\n  }\n\n  const shiki = await getHighlighter();\n\n  if (lang !== 'ansi' && !shiki.getLoadedLanguages().includes(lang)) {\n    await shiki.loadLanguage(languages[lang]);\n  }\n\n  return {\n    // Returns one React node per line, and the grammar state after the last\n    // line. Pass that state back to continue where the code left off.\n    highlight(code: string, state?: GrammarState) {\n      const tokenize = (text: string) =>\n        shiki.codeToTokens(text, {\n          lang,\n          // BERGET: light/dark slots both resolve to the berget theme, whose\n          // token colors are var(--berget-shiki-*) and already flip with the\n          // data-theme attribute in styles/index.css.\n          themes: { light: 'berget', dark: 'berget' },\n          defaultColor: false,\n          grammarState: state,\n        }).tokens;\n\n      // ANSI has no grammar state, so each line is tokenized on its own and\n      // gets the same colors whether it arrives in one piece or streams.\n      const tokens =\n        lang === 'ansi' ? code.split('\\n').flatMap((line) => tokenize(line)) : tokenize(code);\n\n      return {\n        lines: tokens.map((line) =>\n          line.map((token, index) => (\n            <span\n              key={index}\n              style={token.htmlStyle as React.CSSProperties}\n              className=\"\n                text-(--shiki-light)\n                dark:text-(--shiki-dark)\n              \"\n            >\n              {token.content}\n            </span>\n          )),\n        ),\n        state: shiki.getLastGrammarState(tokens),\n      };\n    },\n  };\n}\n\n// Returns one React node per line, or null for a language that is not listed.\nexport async function highlightCode(code: string, language: string) {\n  const highlighter = await loadHighlighter(language);\n\n  return highlighter ? highlighter.highlight(code).lines : null;\n}\n"],"mappings":";;;;;;;;AAUA,MAAM,YAAY;CAChB,YAAY,OAAO;CACnB,WAAW,OAAO;CAClB,YAAY,OAAO;CACnB,YAAY,OAAO;CACnB,kBAAkB,OAAO;CACzB,YAAY,OAAO;CACnB,WAAW,OAAO;CAClB,gBAAgB,OAAO;CACvB,cAAc,OAAO;CACrB,WAAW,OAAO;CAClB,WAAW,OAAO;CAClB,kBAAkB,OAAO;CACzB,YAAY,OAAO;CACnB,kBAAkB,OAAO;AAC3B;AAEA,MAAM,UAAkD;CACtD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,aAAa;CACb,IAAI;CACJ,KAAK;CACL,KAAK;CACL,QAAQ;AACV;AAEA,IAAI;AAEJ,SAAS,iBAAiB;CACxB,iBAAA,GAAgBA,WAAAA,sBAAAA,CAAsB;EAEpC,QAAQ,CAACC,oBAAAA,gBAAgB;EACzB,OAAO,CAAC;EACR,SAAA,GAAQC,wBAAAA,4BAAAA,CAA4B,EAAE,WAAW,KAAK,CAAC;CACzD,CAAC;CAED,OAAO;AACT;AAEA,SAAS,YAAY,UAAkB;CACrC,MAAM,OAAO,SAAS,YAAY;CAElC,IAAI,SAAS,QACX,OAAO;CAGT,IAAI,QAAQ,WACV,OAAO;CAGT,OAAO,QAAQ,SAAS;AAC1B;AAIA,eAAsB,gBAAgB,UAAkB;CACtD,MAAM,OAAO,YAAY,QAAQ;CAEjC,IAAI,CAAC,MACH,OAAO;CAGT,MAAM,QAAQ,MAAM,eAAe;CAEnC,IAAI,SAAS,UAAU,CAAC,MAAM,mBAAmB,CAAC,CAAC,SAAS,IAAI,GAC9D,MAAM,MAAM,aAAa,UAAU,KAAK;CAG1C,OAAO,EAGL,UAAU,MAAc,OAAsB;EAC5C,MAAM,YAAY,SAChB,MAAM,aAAa,MAAM;GACvB;GAIA,QAAQ;IAAE,OAAO;IAAU,MAAM;GAAS;GAC1C,cAAc;GACd,cAAc;EAChB,CAAC,CAAC,CAAC;EAIL,MAAM,SACJ,SAAS,SAAS,KAAK,MAAM,IAAI,CAAC,CAAC,SAAS,SAAS,SAAS,IAAI,CAAC,IAAI,SAAS,IAAI;EAEtF,OAAO;GACL,OAAO,OAAO,KAAK,SACjB,KAAK,KAAK,OAAO,UACf,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAEE,OAAO,MAAM;IACb,WAAU;IAKT,UAAA,MAAM;GACH,GARC,KAQD,CACP,CACH;GACA,OAAO,MAAM,oBAAoB,MAAM;EACzC;CACF,EACF;AACF"}

package/dist/lib/highlighter.mjs

@@ -0,0 +1,79 @@
+import { bergetShikiTheme } from "./shiki-theme.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { createHighlighterCore } from "shiki/core";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+//#region src/lib/highlighter.tsx
+const languages = {
+	bash: () => import("shiki/langs/shellscript.mjs"),
+	css: () => import("shiki/langs/css.mjs"),
+	diff: () => import("shiki/langs/diff.mjs"),
+	html: () => import("shiki/langs/html.mjs"),
+	javascript: () => import("shiki/langs/javascript.mjs"),
+	json: () => import("shiki/langs/json.mjs"),
+	jsx: () => import("shiki/langs/jsx.mjs"),
+	markdown: () => import("shiki/langs/markdown.mjs"),
+	python: () => import("shiki/langs/python.mjs"),
+	sql: () => import("shiki/langs/sql.mjs"),
+	tsx: () => import("shiki/langs/tsx.mjs"),
+	typescript: () => import("shiki/langs/typescript.mjs"),
+	yaml: () => import("shiki/langs/yaml.mjs"),
+	dockerfile: () => import("shiki/langs/dockerfile.mjs")
+};
+const aliases = {
+	js: "javascript",
+	md: "markdown",
+	py: "python",
+	sh: "bash",
+	shell: "bash",
+	shellscript: "bash",
+	ts: "typescript",
+	yml: "yaml",
+	zsh: "bash",
+	docker: "dockerfile"
+};
+let highlighter;
+function getHighlighter() {
+	highlighter ??= createHighlighterCore({
+		themes: [bergetShikiTheme],
+		langs: [],
+		engine: createJavaScriptRegexEngine({ forgiving: true })
+	});
+	return highlighter;
+}
+function getLanguage(language) {
+	const name = language.toLowerCase();
+	if (name === "ansi") return name;
+	if (name in languages) return name;
+	return aliases[name] ?? null;
+}
+async function loadHighlighter(language) {
+	const lang = getLanguage(language);
+	if (!lang) return null;
+	const shiki = await getHighlighter();
+	if (lang !== "ansi" && !shiki.getLoadedLanguages().includes(lang)) await shiki.loadLanguage(languages[lang]);
+	return { highlight(code, state) {
+		const tokenize = (text) => shiki.codeToTokens(text, {
+			lang,
+			themes: {
+				light: "berget",
+				dark: "berget"
+			},
+			defaultColor: false,
+			grammarState: state
+		}).tokens;
+		const tokens = lang === "ansi" ? code.split("\n").flatMap((line) => tokenize(line)) : tokenize(code);
+		return {
+			lines: tokens.map((line) => line.map((token, index) => /* @__PURE__ */ jsx("span", {
+				style: token.htmlStyle,
+				className: "\n                text-(--shiki-light)\n                dark:text-(--shiki-dark)\n              ",
+				children: token.content
+			}, index))),
+			state: shiki.getLastGrammarState(tokens)
+		};
+	} };
+}
+//#endregion
+export { loadHighlighter };
+
+//# sourceMappingURL=highlighter.mjs.map

package/dist/lib/highlighter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlighter.mjs","names":[],"sources":["../../src/lib/highlighter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { createHighlighterCore, type GrammarState, type HighlighterCore } from 'shiki/core';\nimport { createJavaScriptRegexEngine } from 'shiki/engine/javascript';\n\n// BERGET: brand syntax-highlighting theme. CSS-variables theme backed by the\n// --berget-shiki-* tokens in styles/index.css (dark + light). Keep this patch\n// minimal so re-running `npx shadcn@latest add code-block --overwrite` is easy.\nimport { bergetShikiTheme } from './shiki-theme';\n\n// Add the languages you need. Each one loads the first time it is used.\nconst languages = {\n  bash: () => import('shiki/langs/shellscript.mjs'),\n  css: () => import('shiki/langs/css.mjs'),\n  diff: () => import('shiki/langs/diff.mjs'),\n  html: () => import('shiki/langs/html.mjs'),\n  javascript: () => import('shiki/langs/javascript.mjs'),\n  json: () => import('shiki/langs/json.mjs'),\n  jsx: () => import('shiki/langs/jsx.mjs'),\n  markdown: () => import('shiki/langs/markdown.mjs'),\n  python: () => import('shiki/langs/python.mjs'),\n  sql: () => import('shiki/langs/sql.mjs'),\n  tsx: () => import('shiki/langs/tsx.mjs'),\n  typescript: () => import('shiki/langs/typescript.mjs'),\n  yaml: () => import('shiki/langs/yaml.mjs'),\n  dockerfile: () => import('shiki/langs/dockerfile.mjs'),\n};\n\nconst aliases: Record<string, keyof typeof languages> = {\n  js: 'javascript',\n  md: 'markdown',\n  py: 'python',\n  sh: 'bash',\n  shell: 'bash',\n  shellscript: 'bash',\n  ts: 'typescript',\n  yml: 'yaml',\n  zsh: 'bash',\n  docker: 'dockerfile',\n};\n\nlet highlighter: Promise<HighlighterCore> | undefined;\n\nfunction getHighlighter() {\n  highlighter ??= createHighlighterCore({\n    // BERGET: single CSS-variables theme instead of github-light/dark.\n    themes: [bergetShikiTheme],\n    langs: [],\n    engine: createJavaScriptRegexEngine({ forgiving: true }),\n  });\n\n  return highlighter;\n}\n\nfunction getLanguage(language: string) {\n  const name = language.toLowerCase();\n\n  if (name === 'ansi') {\n    return name;\n  }\n\n  if (name in languages) {\n    return name as keyof typeof languages;\n  }\n\n  return aliases[name] ?? null;\n}\n\n// Loads a language and returns a highlighter for it, or null for a language\n// that is not listed.\nexport async function loadHighlighter(language: string) {\n  const lang = getLanguage(language);\n\n  if (!lang) {\n    return null;\n  }\n\n  const shiki = await getHighlighter();\n\n  if (lang !== 'ansi' && !shiki.getLoadedLanguages().includes(lang)) {\n    await shiki.loadLanguage(languages[lang]);\n  }\n\n  return {\n    // Returns one React node per line, and the grammar state after the last\n    // line. Pass that state back to continue where the code left off.\n    highlight(code: string, state?: GrammarState) {\n      const tokenize = (text: string) =>\n        shiki.codeToTokens(text, {\n          lang,\n          // BERGET: light/dark slots both resolve to the berget theme, whose\n          // token colors are var(--berget-shiki-*) and already flip with the\n          // data-theme attribute in styles/index.css.\n          themes: { light: 'berget', dark: 'berget' },\n          defaultColor: false,\n          grammarState: state,\n        }).tokens;\n\n      // ANSI has no grammar state, so each line is tokenized on its own and\n      // gets the same colors whether it arrives in one piece or streams.\n      const tokens =\n        lang === 'ansi' ? code.split('\\n').flatMap((line) => tokenize(line)) : tokenize(code);\n\n      return {\n        lines: tokens.map((line) =>\n          line.map((token, index) => (\n            <span\n              key={index}\n              style={token.htmlStyle as React.CSSProperties}\n              className=\"\n                text-(--shiki-light)\n                dark:text-(--shiki-dark)\n              \"\n            >\n              {token.content}\n            </span>\n          )),\n        ),\n        state: shiki.getLastGrammarState(tokens),\n      };\n    },\n  };\n}\n\n// Returns one React node per line, or null for a language that is not listed.\nexport async function highlightCode(code: string, language: string) {\n  const highlighter = await loadHighlighter(language);\n\n  return highlighter ? highlighter.highlight(code).lines : null;\n}\n"],"mappings":";;;;;;AAUA,MAAM,YAAY;CAChB,YAAY,OAAO;CACnB,WAAW,OAAO;CAClB,YAAY,OAAO;CACnB,YAAY,OAAO;CACnB,kBAAkB,OAAO;CACzB,YAAY,OAAO;CACnB,WAAW,OAAO;CAClB,gBAAgB,OAAO;CACvB,cAAc,OAAO;CACrB,WAAW,OAAO;CAClB,WAAW,OAAO;CAClB,kBAAkB,OAAO;CACzB,YAAY,OAAO;CACnB,kBAAkB,OAAO;AAC3B;AAEA,MAAM,UAAkD;CACtD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,aAAa;CACb,IAAI;CACJ,KAAK;CACL,KAAK;CACL,QAAQ;AACV;AAEA,IAAI;AAEJ,SAAS,iBAAiB;CACxB,gBAAgB,sBAAsB;EAEpC,QAAQ,CAAC,gBAAgB;EACzB,OAAO,CAAC;EACR,QAAQ,4BAA4B,EAAE,WAAW,KAAK,CAAC;CACzD,CAAC;CAED,OAAO;AACT;AAEA,SAAS,YAAY,UAAkB;CACrC,MAAM,OAAO,SAAS,YAAY;CAElC,IAAI,SAAS,QACX,OAAO;CAGT,IAAI,QAAQ,WACV,OAAO;CAGT,OAAO,QAAQ,SAAS;AAC1B;AAIA,eAAsB,gBAAgB,UAAkB;CACtD,MAAM,OAAO,YAAY,QAAQ;CAEjC,IAAI,CAAC,MACH,OAAO;CAGT,MAAM,QAAQ,MAAM,eAAe;CAEnC,IAAI,SAAS,UAAU,CAAC,MAAM,mBAAmB,CAAC,CAAC,SAAS,IAAI,GAC9D,MAAM,MAAM,aAAa,UAAU,KAAK;CAG1C,OAAO,EAGL,UAAU,MAAc,OAAsB;EAC5C,MAAM,YAAY,SAChB,MAAM,aAAa,MAAM;GACvB;GAIA,QAAQ;IAAE,OAAO;IAAU,MAAM;GAAS;GAC1C,cAAc;GACd,cAAc;EAChB,CAAC,CAAC,CAAC;EAIL,MAAM,SACJ,SAAS,SAAS,KAAK,MAAM,IAAI,CAAC,CAAC,SAAS,SAAS,SAAS,IAAI,CAAC,IAAI,SAAS,IAAI;EAEtF,OAAO;GACL,OAAO,OAAO,KAAK,SACjB,KAAK,KAAK,OAAO,UACf,oBAAC,QAAD;IAEE,OAAO,MAAM;IACb,WAAU;IAKT,UAAA,MAAM;GACH,GARC,KAQD,CACP,CACH;GACA,OAAO,MAAM,oBAAoB,MAAM;EACzC;CACF,EACF;AACF"}

package/dist/lib/utils.cjs

@@ -27,10 +27,10 @@ function cn(...inputs) {
 	return twMerge((0, clsx.clsx)(inputs));
 }
 /**
-* Bridge for the legacy Radix `asChild` boolean on Berget primitive wrappers.
-* Base UI replaces `asChild` with a `render` prop: this helper returns the
-* element to pass to `render` (or `undefined` when not composing), so the
-* public design-system API can keep `<Trigger asChild><Button/></Trigger>`.
+* Bridge between the `asChild` boolean on Berget primitive wrappers and
+* Base UI's `render` prop: returns the element to pass to `render` (or
+* `undefined` when not composing), so the public design-system API can
+* keep `<Trigger asChild><Button/></Trigger>`.
 */
 function asChildRender(asChild, children) {
 	if (!asChild) return void 0;

package/dist/lib/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","names":["extendTailwindMerge","React"],"sources":["../../src/lib/utils.ts"],"sourcesContent":["import * as React from 'react';\nimport { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n// Extend tailwind-merge to recognise custom utilities from @theme.\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      rounded: [\n        'rounded-berget-none',\n        'rounded-berget-xs',\n        'rounded-berget-sm',\n        'rounded-berget-md',\n        'rounded-berget-lg',\n        'rounded-berget-full',\n      ],\n      'font-size': [\n        'text-h1',\n        'text-h2',\n        'text-h3',\n        'text-h4',\n        'text-p',\n        'text-mono',\n        'text-hero',\n        'text-caption',\n      ],\n    },\n  },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n/**\n * Bridge for the legacy Radix `asChild` boolean on Berget primitive wrappers.\n * Base UI replaces `asChild` with a `render` prop: this helper returns the\n * element to pass to `render` (or `undefined` when not composing), so the\n * public design-system API can keep `<Trigger asChild><Button/></Trigger>`.\n */\nexport function asChildRender(\n  asChild: boolean | undefined,\n  children: React.ReactNode,\n): React.ReactElement | undefined {\n  if (!asChild) return undefined;\n  return React.Children.only(children) as React.ReactElement;\n}\n"],"mappings":";;;;;AAKA,MAAM,WAAA,G,wBAAUA,CAAAA,CAAAA,oBAAAA,CAAoB,EAClC,QAAQ,EACN,aAAa;CACX,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;CACF;CACA,aAAa;EACX;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF,EACF,EACF,CAAC;AAED,SAAgB,GAAG,GAAG,QAAsB;CAC1C,OAAO,SAAA,GAAQ,KAAA,KAAA,CAAK,MAAM,CAAC;AAC7B;;;;;;;AAQA,SAAgB,cACd,SACA,UACgC;CAChC,IAAI,CAAC,SAAS,OAAO,KAAA;CACrB,OAAOC,MAAM,SAAS,KAAK,QAAQ;AACrC"}
+{"version":3,"file":"utils.cjs","names":["extendTailwindMerge","React"],"sources":["../../src/lib/utils.ts"],"sourcesContent":["import * as React from 'react';\nimport { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n// Extend tailwind-merge to recognise custom utilities from @theme.\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      rounded: [\n        'rounded-berget-none',\n        'rounded-berget-xs',\n        'rounded-berget-sm',\n        'rounded-berget-md',\n        'rounded-berget-lg',\n        'rounded-berget-full',\n      ],\n      'font-size': [\n        'text-h1',\n        'text-h2',\n        'text-h3',\n        'text-h4',\n        'text-p',\n        'text-mono',\n        'text-hero',\n        'text-caption',\n      ],\n    },\n  },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n/**\n * Bridge between the `asChild` boolean on Berget primitive wrappers and\n * Base UI's `render` prop: returns the element to pass to `render` (or\n * `undefined` when not composing), so the public design-system API can\n * keep `<Trigger asChild><Button/></Trigger>`.\n */\nexport function asChildRender(\n  asChild: boolean | undefined,\n  children: React.ReactNode,\n): React.ReactElement | undefined {\n  if (!asChild) return undefined;\n  return React.Children.only(children) as React.ReactElement;\n}\n"],"mappings":";;;;;AAKA,MAAM,WAAA,G,wBAAUA,CAAAA,CAAAA,oBAAAA,CAAoB,EAClC,QAAQ,EACN,aAAa;CACX,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;CACF;CACA,aAAa;EACX;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF,EACF,EACF,CAAC;AAED,SAAgB,GAAG,GAAG,QAAsB;CAC1C,OAAO,SAAA,GAAQ,KAAA,KAAA,CAAK,MAAM,CAAC;AAC7B;;;;;;;AAQA,SAAgB,cACd,SACA,UACgC;CAChC,IAAI,CAAC,SAAS,OAAO,KAAA;CACrB,OAAOC,MAAM,SAAS,KAAK,QAAQ;AACrC"}

package/dist/lib/utils.d.cts

@@ -0,0 +1,6 @@
+import "react";
+import { ClassValue } from "clsx";
+//#region src/lib/utils.d.ts
+export declare function cn(...inputs: ClassValue[]): string;
+//#endregion
+//# sourceMappingURL=utils.d.cts.map

package/dist/lib/utils.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.cts","names":[],"sources":["../../src/lib/utils.ts"],"mappings":";;;wBA8BgB,MAAM,QAAQ"}

package/dist/lib/utils.d.mts

@@ -0,0 +1,6 @@
+import "react";
+import { ClassValue } from "clsx";
+//#region src/lib/utils.d.ts
+export declare function cn(...inputs: ClassValue[]): string;
+//#endregion
+//# sourceMappingURL=utils.d.mts.map

package/dist/lib/utils.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.mts","names":[],"sources":["../../src/lib/utils.ts"],"mappings":";;;wBA8BgB,MAAM,QAAQ"}

package/dist/lib/utils.mjs

@@ -26,10 +26,10 @@ function cn(...inputs) {
 	return twMerge(clsx(inputs));
 }
 /**
-* Bridge for the legacy Radix `asChild` boolean on Berget primitive wrappers.
-* Base UI replaces `asChild` with a `render` prop: this helper returns the
-* element to pass to `render` (or `undefined` when not composing), so the
-* public design-system API can keep `<Trigger asChild><Button/></Trigger>`.
+* Bridge between the `asChild` boolean on Berget primitive wrappers and
+* Base UI's `render` prop: returns the element to pass to `render` (or
+* `undefined` when not composing), so the public design-system API can
+* keep `<Trigger asChild><Button/></Trigger>`.
 */
 function asChildRender(asChild, children) {
 	if (!asChild) return void 0;

package/dist/lib/utils.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.mjs","names":[],"sources":["../../src/lib/utils.ts"],"sourcesContent":["import * as React from 'react';\nimport { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n// Extend tailwind-merge to recognise custom utilities from @theme.\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      rounded: [\n        'rounded-berget-none',\n        'rounded-berget-xs',\n        'rounded-berget-sm',\n        'rounded-berget-md',\n        'rounded-berget-lg',\n        'rounded-berget-full',\n      ],\n      'font-size': [\n        'text-h1',\n        'text-h2',\n        'text-h3',\n        'text-h4',\n        'text-p',\n        'text-mono',\n        'text-hero',\n        'text-caption',\n      ],\n    },\n  },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n/**\n * Bridge for the legacy Radix `asChild` boolean on Berget primitive wrappers.\n * Base UI replaces `asChild` with a `render` prop: this helper returns the\n * element to pass to `render` (or `undefined` when not composing), so the\n * public design-system API can keep `<Trigger asChild><Button/></Trigger>`.\n */\nexport function asChildRender(\n  asChild: boolean | undefined,\n  children: React.ReactNode,\n): React.ReactElement | undefined {\n  if (!asChild) return undefined;\n  return React.Children.only(children) as React.ReactElement;\n}\n"],"mappings":";;;;AAKA,MAAM,UAAU,oBAAoB,EAClC,QAAQ,EACN,aAAa;CACX,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;CACF;CACA,aAAa;EACX;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF,EACF,EACF,CAAC;AAED,SAAgB,GAAG,GAAG,QAAsB;CAC1C,OAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;;;;;AAQA,SAAgB,cACd,SACA,UACgC;CAChC,IAAI,CAAC,SAAS,OAAO,KAAA;CACrB,OAAO,MAAM,SAAS,KAAK,QAAQ;AACrC"}
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../src/lib/utils.ts"],"sourcesContent":["import * as React from 'react';\nimport { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n// Extend tailwind-merge to recognise custom utilities from @theme.\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      rounded: [\n        'rounded-berget-none',\n        'rounded-berget-xs',\n        'rounded-berget-sm',\n        'rounded-berget-md',\n        'rounded-berget-lg',\n        'rounded-berget-full',\n      ],\n      'font-size': [\n        'text-h1',\n        'text-h2',\n        'text-h3',\n        'text-h4',\n        'text-p',\n        'text-mono',\n        'text-hero',\n        'text-caption',\n      ],\n    },\n  },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n/**\n * Bridge between the `asChild` boolean on Berget primitive wrappers and\n * Base UI's `render` prop: returns the element to pass to `render` (or\n * `undefined` when not composing), so the public design-system API can\n * keep `<Trigger asChild><Button/></Trigger>`.\n */\nexport function asChildRender(\n  asChild: boolean | undefined,\n  children: React.ReactNode,\n): React.ReactElement | undefined {\n  if (!asChild) return undefined;\n  return React.Children.only(children) as React.ReactElement;\n}\n"],"mappings":";;;;AAKA,MAAM,UAAU,oBAAoB,EAClC,QAAQ,EACN,aAAa;CACX,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;CACF;CACA,aAAa;EACX;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF,EACF,EACF,CAAC;AAED,SAAgB,GAAG,GAAG,QAAsB;CAC1C,OAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;;;;;AAQA,SAAgB,cACd,SACA,UACgC;CAChC,IAAI,CAAC,SAAS,OAAO,KAAA;CACrB,OAAO,MAAM,SAAS,KAAK,QAAQ;AACrC"}

package/dist/primitives/button.d.cts

@@ -3,7 +3,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/primitives/button.d.ts
 declare const buttonVariants: (props?: ({
   variant?: "link" | "default" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
-  size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+  size?: "default" | "xs" | "sm" | "icon" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Button$1({ className, variant, size, ...props }: Button.Props & VariantProps<typeof buttonVariants>): import("react/jsx-runtime").JSX.Element;
 //#endregion

package/dist/primitives/button.d.mts

@@ -3,7 +3,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/primitives/button.d.ts
 declare const buttonVariants: (props?: ({
   variant?: "link" | "default" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
-  size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+  size?: "default" | "xs" | "sm" | "icon" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Button$1({ className, variant, size, ...props }: Button.Props & VariantProps<typeof buttonVariants>): import("react/jsx-runtime").JSX.Element;
 //#endregion

package/dist/primitives/code-block.cjs

@@ -0,0 +1,133 @@
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+const require_button = require("./button.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+let class_variance_authority = require("class-variance-authority");
+let cn = require("cn");
+let lucide_react = require("lucide-react");
+//#region src/primitives/code-block.tsx
+const codeBlockVariants = (0, class_variance_authority.cva)("group/code-block relative flex w-full min-w-0 flex-col overflow-hidden rounded-lg text-sm has-[>[data-slot=code-block-content]:focus-visible]:ring-3 has-[>[data-slot=code-block-content]:focus-visible]:ring-ring/50 data-[size=sm]:text-xs", {
+	variants: { variant: {
+		default: "border border-input text-foreground has-[>[data-slot=code-block-content]:focus-visible]:border-ring dark:bg-input/30",
+		destructive: "border border-destructive/30 text-destructive dark:border-destructive/40"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function CodeBlock({ className, variant = "default", size = "default", ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "code-block",
+		"data-variant": variant,
+		"data-size": size,
+		className: (0, cn.cn)(codeBlockVariants({ variant }), className),
+		...props
+	});
+}
+function CodeBlockHeader({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "code-block-header",
+		className: (0, cn.cn)("flex min-w-0 shrink-0 items-center gap-2 px-3 pt-3 text-muted-foreground group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:pt-2.5 group-data-[variant=destructive]/code-block:text-destructive *:has-[>[data-slot=code-block-title]]:min-w-0", className),
+		...props
+	});
+}
+function CodeBlockTitle({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "code-block-title",
+		className: (0, cn.cn)("min-w-0 truncate font-sans text-sm font-medium text-foreground group-data-[size=sm]/code-block:text-xs group-data-[variant=destructive]/code-block:text-destructive [&_svg]:pointer-events-none [&_svg]:inline-block [&_svg]:align-middle [&_svg:not([class*='size-'])]:size-3.5 *:[svg]:me-1.5", className),
+		...props
+	});
+}
+function CodeBlockActions({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "code-block-actions",
+		className: (0, cn.cn)("-my-1 ms-auto -me-1.5 flex shrink-0 items-center gap-1 [[data-slot=code-block]>&]:absolute [[data-slot=code-block]>&]:end-2 [[data-slot=code-block]>&]:top-2 [[data-slot=code-block]>&]:z-10 [[data-slot=code-block]>&]:m-0 [[data-slot=code-block]>&]:opacity-0 [[data-slot=code-block]>&]:transition-opacity [[data-slot=code-block]>&]:group-focus-within/code-block:opacity-100 [[data-slot=code-block]>&]:group-hover/code-block:opacity-100 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:end-1.5 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:top-1.5 [[data-slot=code-block]>&]:pointer-coarse:opacity-100 [[data-slot=code-block]>&]:*:[button]:bg-background [[data-slot=code-block]>&]:*:[button]:ring-1 [[data-slot=code-block]>&]:*:[button]:ring-foreground/10", className),
+		...props
+	});
+}
+function CodeBlockCopyButton({ value, variant = "ghost", size = "icon-xs", className, onClick, ...props }) {
+	const [copied, setCopied] = react.useState(false);
+	react.useEffect(() => {
+		if (!copied) return;
+		const timeout = setTimeout(() => setCopied(false), 2e3);
+		return () => clearTimeout(timeout);
+	}, [copied]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+		"data-slot": "code-block-copy-button",
+		"data-copied": copied || void 0,
+		variant,
+		size,
+		"aria-label": copied ? "Copied" : "Copy",
+		className: (0, cn.cn)(className),
+		onClick: (event) => {
+			onClick?.(event);
+			navigator.clipboard.writeText(value).then(() => setCopied(true)).catch(() => {});
+		},
+		...props,
+		children: copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckIcon, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CopyIcon, {})
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"aria-live": "polite",
+		className: "sr-only",
+		children: copied ? "Copied" : ""
+	})] });
+}
+function CodeBlockContent({ className, children, style, wrap = false, lineNumbers = false, startLine = 1, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+		"data-slot": "code-block-content",
+		"data-wrap": wrap || void 0,
+		"data-numbered": lineNumbers || void 0,
+		dir: "ltr",
+		tabIndex: 0,
+		style: {
+			counterReset: `line ${startLine - 1}`,
+			...style
+		},
+		className: (0, cn.cn)("min-h-0 min-w-0 scroll-fade-x scrollbar-thin overflow-auto px-3 py-3 text-start font-mono leading-relaxed outline-none group-has-data-[slot=code-block-footer]/code-block:pb-2 group-has-data-[slot=code-block-header]/code-block:pt-2 group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:py-2.5 group-data-[size=sm]/code-block:group-has-data-[slot=code-block-header]/code-block:pt-1.5 data-wrap:scroll-fade-y data-wrap:wrap-break-word data-wrap:whitespace-pre-wrap", className),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+			"data-slot": "code-block-code",
+			className: "grid min-h-lh min-w-max content-start in-data-numbered:grid-cols-[auto_1fr] in-data-wrap:min-w-0",
+			children: lineNumbers && typeof children === "string" ? children.replace(/\n$/, "").split("\n").map((line, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeBlockLine, { children: line }, index)) : children
+		})
+	});
+}
+const codeBlockLineVariants = (0, class_variance_authority.cva)("relative -mx-3 block min-h-lh px-3 group-data-[size=sm]/code-block:-mx-2.5 group-data-[size=sm]/code-block:px-2.5 before:min-w-6 before:text-end before:text-muted-foreground after:absolute after:start-1 after:top-0 after:text-muted-foreground after:select-none in-data-numbered:col-span-2 in-data-numbered:grid in-data-numbered:grid-cols-subgrid in-data-numbered:gap-x-3 in-data-numbered:[counter-increment:line] in-data-numbered:before:content-[counter(line)] in-data-numbered:before:select-none in-data-numbered:supports-[content:counter(line)_/_'']:before:content-[counter(line)_/_'']", {
+	variants: { variant: {
+		default: "",
+		added: "bg-muted after:content-['+']",
+		removed: "bg-destructive/10 after:text-destructive after:content-['−']",
+		highlighted: "bg-muted"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function CodeBlockLine({ className, variant = "default", children, ...props }) {
+	const empty = children === void 0 || children === null || children === "" || Array.isArray(children) && children.length === 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "code-block-line",
+		"data-variant": variant,
+		className: (0, cn.cn)(codeBlockLineVariants({ variant }), className),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"data-slot": "code-block-line-content",
+			className: "min-w-0",
+			children: empty ? "\n" : children
+		})
+	});
+}
+function CodeBlockFooter({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "code-block-footer",
+		className: (0, cn.cn)("flex min-w-0 shrink-0 items-center gap-2 px-3 pb-3 text-muted-foreground group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:pb-2.5", className),
+		...props
+	});
+}
+//#endregion
+exports.CodeBlock = CodeBlock;
+exports.CodeBlockActions = CodeBlockActions;
+exports.CodeBlockContent = CodeBlockContent;
+exports.CodeBlockCopyButton = CodeBlockCopyButton;
+exports.CodeBlockFooter = CodeBlockFooter;
+exports.CodeBlockHeader = CodeBlockHeader;
+exports.CodeBlockLine = CodeBlockLine;
+exports.CodeBlockTitle = CodeBlockTitle;
+
+//# sourceMappingURL=code-block.cjs.map