Highlighted with line numbers, and a change

Highlighted with line numbers, and a changeClient

format.ts

import {formatCurrency} from '@workspace/active-format';
const total = formatCurrency({amount: 1234.5, currency: 'EUR'}, 'en');// "€1,234.50"

Contribution rate

const scheme = {  rate: 0.07,  rate: 0.075,  effectiveFrom: "2027-01-01",};

Full source examples/ui/code-block.tsx

// apps/docs/examples/ui/code-block.tsx'use client';
import {  CodeBlock,  CodeBlockActions,  CodeBlockContent,  CodeBlockCopyButton,  CodeBlockHeader,  CodeBlockLine,  CodeBlockTitle,} from '@workspace/active-ui/components/primitives/code-block';import {useHighlightedCode} from '@workspace/active-ui/hooks/use-highlighted-code';
const SOURCE = `import {formatCurrency} from '@workspace/active-format';
const total = formatCurrency({amount: 1234.5, currency: 'EUR'}, 'en');// "€1,234.50"`;
/** * Code with a title, a copy button and line numbers, highlighted in the * browser by `useHighlightedCode`; and a change shown line by line, with * added and removed lines marked. */export default function CodeBlockExample() {  const lines = useHighlightedCode(SOURCE, 'ts');  return (    <div className="flex w-full max-w-xl flex-col gap-6">      <CodeBlock variant="muted">        <CodeBlockHeader>          <CodeBlockTitle>format.ts</CodeBlockTitle>          <CodeBlockActions>            <CodeBlockCopyButton              value={SOURCE}              label="Copy code"              copiedLabel="Copied"            />          </CodeBlockActions>        </CodeBlockHeader>        <CodeBlockContent lineNumbers>          {lines.map((line, index) => (            <CodeBlockLine key={index}>{line}</CodeBlockLine>          ))}        </CodeBlockContent>      </CodeBlock>
      <CodeBlock variant="muted" size="sm">        <CodeBlockHeader>          <CodeBlockTitle>Contribution rate</CodeBlockTitle>        </CodeBlockHeader>        <CodeBlockContent wrap>          <CodeBlockLine>{'const scheme = {'}</CodeBlockLine>          <CodeBlockLine variant="removed">{'  rate: 0.07,'}</CodeBlockLine>          <CodeBlockLine variant="added">{'  rate: 0.075,'}</CodeBlockLine>          <CodeBlockLine variant="highlighted">            {'  effectiveFrom: "2027-01-01",'}          </CodeBlockLine>          <CodeBlockLine>{'};'}</CodeBlockLine>        </CodeBlockContent>      </CodeBlock>    </div>  );}