panelui-native 0.28.1 → 0.30.0

package/src/components/code-block/highlight.ts

@@ -0,0 +1,278 @@
+/**
+ * A small syntax highlighter, sized for a phone.
+ *
+ * The web answer to this problem is a real tokenizer with a grammar per
+ * language, which is megabytes of WASM and a worker. That is the wrong shape
+ * here twice over: a chat renders short fragments rather than files, and the
+ * fragments arrive a token at a time, so whatever runs has to run again on
+ * every frame of a stream. This trades exactness for a single pass of regex
+ * that costs nothing and never blocks.
+ *
+ * What it therefore does *not* do: nested languages, template-literal
+ * interpolation, or anything requiring a parser to know it. What it does do is
+ * make a keyword look like a keyword, which is the whole of the value in a
+ * twelve-line snippet.
+ *
+ * Anything it does not recognise is returned as one plain token per line, so
+ * an unknown language renders as clean monospace rather than as a guess.
+ */
+
+/** The kinds a token can be. Each maps to one theme colour. */
+export type TokenKind =
+  | 'plain'
+  | 'keyword'
+  | 'string'
+  | 'number'
+  | 'comment'
+  | 'function'
+  | 'property'
+  | 'punctuation'
+  | 'inserted'
+  | 'deleted';
+
+export interface Token {
+  text: string;
+  kind: TokenKind;
+}
+
+/** The languages that get more than plain monospace. */
+export type CodeLanguage =
+  | 'ts'
+  | 'tsx'
+  | 'js'
+  | 'jsx'
+  | 'json'
+  | 'bash'
+  | 'python'
+  | 'css'
+  | 'html'
+  | 'sql'
+  | 'markdown'
+  | 'diff'
+  | 'text';
+
+/** Spellings a caller is likely to pass, mapped onto the ones handled here. */
+const ALIASES: Record<string, CodeLanguage> = {
+  typescript: 'ts',
+  ts: 'ts',
+  tsx: 'tsx',
+  javascript: 'js',
+  js: 'js',
+  jsx: 'jsx',
+  mjs: 'js',
+  cjs: 'js',
+  json: 'json',
+  json5: 'json',
+  bash: 'bash',
+  sh: 'bash',
+  shell: 'bash',
+  zsh: 'bash',
+  console: 'bash',
+  python: 'python',
+  py: 'python',
+  css: 'css',
+  scss: 'css',
+  html: 'html',
+  xml: 'html',
+  svg: 'html',
+  sql: 'sql',
+  markdown: 'markdown',
+  md: 'markdown',
+  mdx: 'markdown',
+  diff: 'diff',
+  patch: 'diff',
+};
+
+/** Resolves a caller's language string. Unknown spellings become `text`. */
+export function resolveLanguage(language: string | undefined): CodeLanguage {
+  if (!language) return 'text';
+  return ALIASES[language.toLowerCase()] ?? 'text';
+}
+
+const JS_KEYWORDS =
+  'as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|is|keyof|let|new|of|private|protected|public|readonly|return|satisfies|set|static|super|switch|this|throw|try|type|typeof|var|void|while|yield';
+const JS_LITERALS = 'true|false|null|undefined|NaN|Infinity';
+
+const PYTHON_KEYWORDS =
+  'and|as|assert|async|await|break|class|continue|def|del|elif|else|except|finally|for|from|global|if|import|in|is|lambda|nonlocal|not|or|pass|raise|return|try|while|with|yield';
+const PYTHON_LITERALS = 'True|False|None|self';
+
+const SQL_KEYWORDS =
+  'ADD|ALL|ALTER|AND|AS|ASC|BETWEEN|BY|CASE|COLUMN|CREATE|CROSS|DELETE|DESC|DISTINCT|DROP|ELSE|END|EXISTS|FROM|FULL|GROUP|HAVING|IN|INDEX|INNER|INSERT|INTO|IS|JOIN|LEFT|LIKE|LIMIT|NOT|NULL|OFFSET|ON|OR|ORDER|OUTER|PRIMARY|RIGHT|SELECT|SET|TABLE|THEN|UNION|UPDATE|VALUES|WHEN|WHERE|WITH';
+
+const BASH_KEYWORDS =
+  'case|do|done|elif|else|esac|export|fi|for|function|if|in|local|return|source|then|until|while';
+
+/**
+ * One rule: a pattern, and the kind it produces.
+ *
+ * Order is the whole design. Comments and strings come first so that a keyword
+ * inside either is left alone — the single most visible failure a highlighter
+ * this size can have.
+ */
+interface Rule {
+  pattern: RegExp;
+  kind: TokenKind;
+}
+
+function wordsOf(list: string): RegExp {
+  return new RegExp(`^(?:${list})\\b`);
+}
+
+const RULES: Record<CodeLanguage, Rule[]> = {
+  ts: jsRules(),
+  tsx: jsRules(),
+  js: jsRules(),
+  jsx: jsRules(),
+  json: [
+    { pattern: /^"(?:[^"\\]|\\.)*"\s*(?=:)/, kind: 'property' },
+    { pattern: /^"(?:[^"\\]|\\.)*"/, kind: 'string' },
+    { pattern: /^-?\d+(?:\.\d+)?(?:e[+-]?\d+)?/i, kind: 'number' },
+    { pattern: /^(?:true|false|null)\b/, kind: 'keyword' },
+    { pattern: /^[{}[\],:]/, kind: 'punctuation' },
+  ],
+  bash: [
+    { pattern: /^#.*/, kind: 'comment' },
+    { pattern: /^"(?:[^"\\]|\\.)*"/, kind: 'string' },
+    { pattern: /^'(?:[^'\\]|\\.)*'/, kind: 'string' },
+    { pattern: /^\$\{?[A-Za-z_][\w]*\}?/, kind: 'property' },
+    { pattern: wordsOf(BASH_KEYWORDS), kind: 'keyword' },
+    { pattern: /^-{1,2}[A-Za-z][\w-]*/, kind: 'property' },
+    { pattern: /^[|&;<>()$]/, kind: 'punctuation' },
+  ],
+  python: [
+    { pattern: /^#.*/, kind: 'comment' },
+    { pattern: /^[rbf]?"""[\s\S]*?(?:"""|$)/, kind: 'string' },
+    { pattern: /^[rbf]?"(?:[^"\\]|\\.)*"/, kind: 'string' },
+    { pattern: /^[rbf]?'(?:[^'\\]|\\.)*'/, kind: 'string' },
+    { pattern: wordsOf(PYTHON_KEYWORDS), kind: 'keyword' },
+    { pattern: wordsOf(PYTHON_LITERALS), kind: 'keyword' },
+    { pattern: /^[A-Za-z_]\w*(?=\s*\()/, kind: 'function' },
+    { pattern: /^@[A-Za-z_]\w*/, kind: 'function' },
+    { pattern: /^\d[\d_]*(?:\.\d+)?/, kind: 'number' },
+    { pattern: /^[{}[\]().,:;]/, kind: 'punctuation' },
+  ],
+  css: [
+    { pattern: /^\/\*[\s\S]*?(?:\*\/|$)/, kind: 'comment' },
+    { pattern: /^"(?:[^"\\]|\\.)*"/, kind: 'string' },
+    { pattern: /^'(?:[^'\\]|\\.)*'/, kind: 'string' },
+    { pattern: /^--[\w-]+/, kind: 'property' },
+    { pattern: /^@[\w-]+/, kind: 'keyword' },
+    { pattern: /^[.#][\w-]+/, kind: 'function' },
+    { pattern: /^[a-z-]+(?=\s*:)/i, kind: 'property' },
+    { pattern: /^-?\d*\.?\d+(?:px|rem|em|%|vh|vw|s|ms|deg)?/, kind: 'number' },
+    { pattern: /^[{}();:,]/, kind: 'punctuation' },
+  ],
+  html: [
+    { pattern: /^<!--[\s\S]*?(?:-->|$)/, kind: 'comment' },
+    { pattern: /^"(?:[^"\\]|\\.)*"/, kind: 'string' },
+    { pattern: /^'(?:[^'\\]|\\.)*'/, kind: 'string' },
+    { pattern: /^<\/?[\w-]+/, kind: 'keyword' },
+    { pattern: /^[\w-]+(?==)/, kind: 'property' },
+    { pattern: /^\/?>/, kind: 'keyword' },
+    { pattern: /^[=]/, kind: 'punctuation' },
+  ],
+  sql: [
+    { pattern: /^--.*/, kind: 'comment' },
+    { pattern: /^'(?:[^'\\]|\\.)*'/, kind: 'string' },
+    { pattern: new RegExp(`^(?:${SQL_KEYWORDS})\\b`, 'i'), kind: 'keyword' },
+    { pattern: /^\d+(?:\.\d+)?/, kind: 'number' },
+    { pattern: /^[(),;*.]/, kind: 'punctuation' },
+  ],
+  markdown: [
+    { pattern: /^#{1,6}\s.*/, kind: 'keyword' },
+    { pattern: /^`[^`]*`/, kind: 'string' },
+    { pattern: /^\*\*[^*]+\*\*/, kind: 'function' },
+    { pattern: /^\[[^\]]*\]\([^)]*\)/, kind: 'property' },
+    { pattern: /^[>-]\s/, kind: 'punctuation' },
+  ],
+  diff: [],
+  text: [],
+};
+
+function jsRules(): Rule[] {
+  return [
+    { pattern: /^\/\/.*/, kind: 'comment' },
+    { pattern: /^\/\*[\s\S]*?(?:\*\/|$)/, kind: 'comment' },
+    { pattern: /^`(?:[^`\\]|\\.)*`/, kind: 'string' },
+    { pattern: /^"(?:[^"\\]|\\.)*"/, kind: 'string' },
+    { pattern: /^'(?:[^'\\]|\\.)*'/, kind: 'string' },
+    { pattern: wordsOf(JS_KEYWORDS), kind: 'keyword' },
+    { pattern: wordsOf(JS_LITERALS), kind: 'keyword' },
+    // A name followed by a paren reads as a call whether or not it is one,
+    // which is exactly the reading a highlighter is meant to support.
+    { pattern: /^[A-Za-z_$][\w$]*(?=\s*\()/, kind: 'function' },
+    { pattern: /^0[xb][\da-f]+|^\d[\d_]*(?:\.\d+)?(?:e[+-]?\d+)?/i, kind: 'number' },
+    { pattern: /^[{}[\]().,;:?!<>=+\-*/%&|^~]/, kind: 'punctuation' },
+  ];
+}
+
+/**
+ * A diff is coloured by line, not by token — the leading `+` or `-` says
+ * everything, and highlighting the code inside as well fights with it.
+ */
+function tokenizeDiffLine(line: string): Token[] {
+  if (line.startsWith('+')) return [{ text: line, kind: 'inserted' }];
+  if (line.startsWith('-')) return [{ text: line, kind: 'deleted' }];
+  if (line.startsWith('@@') || line.startsWith('diff ')) {
+    return [{ text: line, kind: 'comment' }];
+  }
+  return [{ text: line, kind: 'plain' }];
+}
+
+/** Runs the rules over one line, longest-first from wherever it has got to. */
+function tokenizeLine(line: string, rules: Rule[]): Token[] {
+  if (rules.length === 0) return line ? [{ text: line, kind: 'plain' }] : [];
+
+  const tokens: Token[] = [];
+  let rest = line;
+  let plain = '';
+
+  while (rest.length > 0) {
+    let matched: { text: string; kind: TokenKind } | null = null;
+
+    for (const rule of rules) {
+      const found = rule.pattern.exec(rest);
+      if (found && found[0].length > 0) {
+        matched = { text: found[0], kind: rule.kind };
+        break;
+      }
+    }
+
+    if (matched) {
+      // Whatever was skipped over to get here is one plain run, not one plain
+      // token per character — a token per character is a view per character.
+      if (plain) {
+        tokens.push({ text: plain, kind: 'plain' });
+        plain = '';
+      }
+      tokens.push(matched);
+      rest = rest.slice(matched.text.length);
+    } else {
+      plain += rest[0];
+      rest = rest.slice(1);
+    }
+  }
+
+  if (plain) tokens.push({ text: plain, kind: 'plain' });
+  return tokens;
+}
+
+/**
+ * Splits code into lines of tokens.
+ *
+ * Line by line, so a stream that has just gained a character only makes the
+ * work grow with the code and never with time. The cost of that choice is that
+ * a block comment spanning several lines is only coloured on its first — an
+ * acceptable trade for a snippet, and the reason this is not sold as a
+ * highlighter for a file.
+ */
+export function highlight(code: string, language: string | undefined): Token[][] {
+  const resolved = resolveLanguage(language);
+  const lines = code.split('\n');
+
+  if (resolved === 'diff') return lines.map(tokenizeDiffLine);
+
+  const rules = RULES[resolved];
+  return lines.map((line) => tokenizeLine(line, rules));
+}

package/src/components/code-block/index.tsx

@@ -0,0 +1,341 @@
+/**
+ * CodeBlock — a fenced snippet, syntax-coloured and scrolled sideways.
+ *
+ * Code does not wrap. Wrapping a line of code puts the continuation under the
+ * indentation and the two stop meaning different things, so the body scrolls
+ * horizontally instead — which on a phone is the only honest way to show a
+ * ninety-column line.
+ *
+ * ```tsx
+ * <CodeBlock code={code} language="tsx">
+ *   <CodeBlock.Header>
+ *     <CodeBlock.Filename>calendar.tsx</CodeBlock.Filename>
+ *     <CodeBlock.CopyButton />
+ *   </CodeBlock.Header>
+ * </CodeBlock>
+ * ```
+ *
+ * ## Colouring
+ *
+ * The highlighter is a single pass of regex, shipped in the component, over the
+ * languages a chat actually streams. There is no grammar and no worker, because
+ * the alternative costs megabytes and has to run again on every frame of a
+ * stream. It gets keywords, strings, comments and numbers right in a twelve-line
+ * snippet and does not pretend to more; an unrecognised language renders as
+ * clean monospace rather than as a guess. Colours come from the theme's
+ * `--color-code-*` tokens, so a snippet follows light and dark like everything
+ * else.
+ *
+ * ## Where the props come from
+ *
+ * With the AI SDK, `code` and `language` are what you pull out of a fenced
+ * block in a text part, or the fields of a tool call that wrote a file.
+ */
+import { createContext, useContext, useMemo, type ReactNode } from 'react';
+import { ScrollView, View, type ViewProps } from 'react-native';
+import { tv } from 'tailwind-variants';
+import { useCSSVariable } from 'uniwind';
+import { useCopyToClipboard } from '../../hooks/use-copy-to-clipboard';
+import { CheckIcon, CopyIcon } from '../../icons';
+import { Text } from '../../primitives/text';
+import { cn } from '../../utils/cn';
+import { AnimatedPressable } from '../../primitives/animated-pressable';
+import { highlight, resolveLanguage, type Token, type TokenKind } from './highlight';
+
+const codeBlockVariants = tv({
+  slots: {
+    root: 'w-full overflow-hidden rounded-2xl border border-border bg-muted/40',
+    header: 'flex-row items-center justify-between gap-2 border-b border-border px-3 py-2',
+    filename: 'font-mono text-xs text-muted-foreground',
+    language: 'text-xs uppercase tracking-wide text-muted-foreground',
+    actions: 'flex-row items-center gap-1',
+    action: 'h-7 w-7 items-center justify-center rounded-lg active:bg-accent',
+    body: 'p-3',
+    line: 'flex-row',
+    /*
+     * `leading-*` on the row rather than on each token: the tokens of a line
+     * are separate Text nodes, and a line height set on some of them and not
+     * others makes the baseline jog wherever a keyword ends.
+     */
+    gutter: 'w-8 pe-3 text-end font-mono text-xs text-muted-foreground/50',
+    code: 'font-mono text-xs leading-5',
+  },
+});
+
+interface CodeBlockContextValue {
+  code: string;
+}
+
+const CodeBlockContext = createContext<CodeBlockContextValue | null>(null);
+
+function useCodeBlock(component: string): CodeBlockContextValue {
+  const context = useContext(CodeBlockContext);
+  if (!context) {
+    throw new Error(`${component} must be used within a <CodeBlock>`);
+  }
+  return context;
+}
+
+/** Which theme token paints each kind of token. */
+const TOKEN_COLORS: Record<TokenKind, string> = {
+  plain: '--color-foreground',
+  keyword: '--color-code-keyword',
+  string: '--color-code-string',
+  number: '--color-code-number',
+  comment: '--color-code-comment',
+  function: '--color-code-function',
+  property: '--color-code-property',
+  punctuation: '--color-code-punctuation',
+  inserted: '--color-code-inserted',
+  deleted: '--color-code-deleted',
+};
+
+/**
+ * The palette, resolved once for the whole block.
+ *
+ * `useCSSVariable` is a hook, so it cannot be called per token — and a snippet
+ * has hundreds. Ten lookups at the top and a lookup table underneath is the
+ * same answer at a fraction of the cost.
+ */
+function useTokenColors(): Record<TokenKind, string | undefined> {
+  const plain = useCSSVariable(TOKEN_COLORS.plain);
+  const keyword = useCSSVariable(TOKEN_COLORS.keyword);
+  const string = useCSSVariable(TOKEN_COLORS.string);
+  const number = useCSSVariable(TOKEN_COLORS.number);
+  const comment = useCSSVariable(TOKEN_COLORS.comment);
+  const fn = useCSSVariable(TOKEN_COLORS.function);
+  const property = useCSSVariable(TOKEN_COLORS.property);
+  const punctuation = useCSSVariable(TOKEN_COLORS.punctuation);
+  const inserted = useCSSVariable(TOKEN_COLORS.inserted);
+  const deleted = useCSSVariable(TOKEN_COLORS.deleted);
+
+  const only = (value: unknown) => (typeof value === 'string' ? value : undefined);
+
+  return useMemo(
+    () => ({
+      plain: only(plain),
+      keyword: only(keyword),
+      string: only(string),
+      number: only(number),
+      comment: only(comment),
+      function: only(fn),
+      property: only(property),
+      punctuation: only(punctuation),
+      inserted: only(inserted),
+      deleted: only(deleted),
+    }),
+    [plain, keyword, string, number, comment, fn, property, punctuation, inserted, deleted]
+  );
+}
+
+export interface CodeBlockProps extends Omit<ViewProps, 'children'> {
+  className?: string;
+  /** The snippet. */
+  code: string;
+  /**
+   * What it is written in. `ts`, `tsx`, `js`, `jsx`, `json`, `bash`, `python`,
+   * `css`, `html`, `sql`, `markdown` and `diff` are coloured, along with the
+   * usual spellings of each; anything else renders as plain monospace.
+   */
+  language?: string;
+  /** Number the lines in a gutter down the leading edge. */
+  showLineNumbers?: boolean;
+  /** A header, and anything else that goes above the code. */
+  children?: ReactNode;
+}
+
+function CodeBlockRoot({
+  className,
+  code,
+  language,
+  showLineNumbers = false,
+  children,
+  ...props
+}: CodeBlockProps) {
+  const slots = codeBlockVariants();
+  const colors = useTokenColors();
+  const lines = useMemo(() => highlight(code, language), [code, language]);
+  const context = useMemo(() => ({ code }), [code]);
+  const gutterWidth = String(lines.length).length;
+
+  return (
+    <CodeBlockContext.Provider value={context}>
+      <View {...props} className={cn(slots.root(), className)}>
+        {children}
+        {/*
+          Horizontal only. The rows are laid out at their natural width inside
+          it, so the longest line sets the scrollable width and every row shares
+          it — otherwise each row would scroll to its own end and the gutter
+          would drift away from its code.
+        */}
+        <ScrollView
+          horizontal
+          bounces={false}
+          showsHorizontalScrollIndicator={false}
+          contentContainerClassName={slots.body()}
+        >
+          <View>
+            {lines.map((tokens, index) => (
+              <View key={index} className={slots.line()}>
+                {showLineNumbers ? (
+                  <Text
+                    className={slots.gutter()}
+                    style={{ width: 16 + gutterWidth * 7 }}
+                  >
+                    {index + 1}
+                  </Text>
+                ) : null}
+                <CodeLine tokens={tokens} colors={colors} className={slots.code()} />
+              </View>
+            ))}
+          </View>
+        </ScrollView>
+      </View>
+    </CodeBlockContext.Provider>
+  );
+}
+CodeBlockRoot.displayName = 'CodeBlock';
+
+/**
+ * One line, as a single Text with a run of coloured children.
+ *
+ * Nested Text rather than a row of Views: only inside one Text do the runs
+ * share a baseline and keep their spaces. A row of Views gives every token its
+ * own box and the line comes apart at the seams.
+ */
+function CodeLine({
+  tokens,
+  colors,
+  className,
+}: {
+  tokens: Token[];
+  colors: Record<TokenKind, string | undefined>;
+  className: string;
+}) {
+  return (
+    <Text className={className}>
+      {/* An empty line still needs a glyph's worth of height. */}
+      {tokens.length === 0 ? ' ' : null}
+      {tokens.map((token, index) => (
+        <Text key={index} className={className} style={{ color: colors[token.kind] }}>
+          {token.text}
+        </Text>
+      ))}
+    </Text>
+  );
+}
+
+export interface CodeBlockHeaderProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+/** The bar above the code: what the file is, and what can be done with it. */
+function CodeBlockHeader({ className, children, ...props }: CodeBlockHeaderProps) {
+  const { header } = codeBlockVariants();
+  return (
+    <View {...props} className={cn(header(), className)}>
+      {children}
+    </View>
+  );
+}
+
+export interface CodeBlockFilenameProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+function CodeBlockFilename({ className, children, ...props }: CodeBlockFilenameProps) {
+  const { filename } = codeBlockVariants();
+  return (
+    <Text numberOfLines={1} className={cn(filename(), className)} {...props}>
+      {children}
+    </Text>
+  );
+}
+
+export interface CodeBlockLanguageProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+/** The language, for a block with no filename to name it by. */
+function CodeBlockLanguage({ className, children, ...props }: CodeBlockLanguageProps) {
+  const { language } = codeBlockVariants();
+  return (
+    <Text className={cn(language(), className)} {...props}>
+      {children}
+    </Text>
+  );
+}
+
+export interface CodeBlockActionsProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+function CodeBlockActions({ className, children, ...props }: CodeBlockActionsProps) {
+  const { actions } = codeBlockVariants();
+  return (
+    <View {...props} className={cn(actions(), className)}>
+      {children}
+    </View>
+  );
+}
+
+export interface CodeBlockCopyButtonProps {
+  className?: string;
+  /** How long the tick stays up before turning back into the copy glyph. */
+  timeout?: number;
+  onCopy?: () => void;
+}
+
+/**
+ * Copies the block's code.
+ *
+ * The tick is the whole feedback: there is no toast, because a snippet in a
+ * transcript is copied often and a notification for each one is noise.
+ */
+function CodeBlockCopyButton({ className, timeout = 2000, onCopy }: CodeBlockCopyButtonProps) {
+  const { code } = useCodeBlock('CodeBlock.CopyButton');
+  const { action } = codeBlockVariants();
+  const { copy, copied } = useCopyToClipboard({ timeout });
+  // Both glyphs are given a colour: the check's own fallback is white, which is
+  // invisible on this header in a light theme.
+  const rawTick = useCSSVariable('--color-success');
+  const rawIdle = useCSSVariable('--color-muted-foreground');
+  const tick = typeof rawTick === 'string' ? rawTick : undefined;
+  const idle = typeof rawIdle === 'string' ? rawIdle : undefined;
+
+  return (
+    <AnimatedPressable
+      accessibilityRole="button"
+      accessibilityLabel={copied ? 'Copied' : 'Copy code'}
+      accessibilityState={{ selected: copied }}
+      hitSlop={6}
+      onPress={() => {
+        void copy(code);
+        onCopy?.();
+      }}
+      className={cn(action(), className)}
+    >
+      {copied ? <CheckIcon size={14} color={tick} /> : <CopyIcon size={14} color={idle} />}
+    </AnimatedPressable>
+  );
+}
+
+CodeBlockHeader.displayName = 'CodeBlock.Header';
+CodeBlockFilename.displayName = 'CodeBlock.Filename';
+CodeBlockLanguage.displayName = 'CodeBlock.Language';
+CodeBlockActions.displayName = 'CodeBlock.Actions';
+CodeBlockCopyButton.displayName = 'CodeBlock.CopyButton';
+
+export { resolveLanguage, type CodeLanguage, type Token, type TokenKind } from './highlight';
+
+export const CodeBlock = Object.assign(CodeBlockRoot, {
+  Header: CodeBlockHeader,
+  Filename: CodeBlockFilename,
+  Language: CodeBlockLanguage,
+  Actions: CodeBlockActions,
+  CopyButton: CodeBlockCopyButton,
+});

package/src/components/date-picker/index.tsx

@@ -106,12 +106,18 @@ export interface DatePickerProps<Mode extends DatePickerMode = 'single'> {
   minDate?: Date;
   /** Latest selectable day. */
   maxDate?: Date;
+  /** Earliest month the `dropdown` caption offers. Defaults to `minDate`. */
+  startMonth?: Date;
+  /** Latest month the `dropdown` caption offers. Defaults to `maxDate`. */
+  endMonth?: Date;
   /** Months side by side inside the panel. */
   numberOfMonths?: number;
   /** `dropdown` swaps the month caption for month and year pickers. */
   captionLayout?: CalendarCaptionLayout;
   /** `0` is Sunday. */
   weekStartsOn?: number;
+  /** Let a tap on a neighbouring month's day select it. Off by default. */
+  selectOutsideDays?: boolean;
   /** BCP 47 tag for the month and weekday names, and for the trigger's text. */
   locale?: string;
   /**
@@ -142,9 +148,12 @@ function DatePickerRoot<Mode extends DatePickerMode = 'single'>({
   disabledDates,
   minDate,
   maxDate,
+  startMonth,
+  endMonth,
   numberOfMonths = 1,
   captionLayout = 'label',
   weekStartsOn = 0,
+  selectOutsideDays = false,
   locale,
   calendar = 'gregory',
   className,
@@ -211,17 +220,26 @@ function DatePickerRoot<Mode extends DatePickerMode = 'single'>({
           would replace it. `self-center` for the same reason — the panel does
           not have to know which presentation it ended up in. */}
       <Popover.Content width="content-fit">
-        <View className="w-[300px] max-w-full self-center p-3">
+        <View className="w-[308px] max-w-full self-center p-3">
+          {/*
+            Unbordered: the panel around it already draws one, and a card
+            inside a card is a seam. The calendar frames itself only when it is
+            standing on a page.
+          */}
           <Calendar
+            bordered={false}
             mode={mode}
             selected={value}
             onSelect={handleSelect}
             disabled={disabledDates}
             minDate={minDate}
             maxDate={maxDate}
+            startMonth={startMonth}
+            endMonth={endMonth}
             numberOfMonths={numberOfMonths}
             captionLayout={captionLayout}
             weekStartsOn={weekStartsOn}
+            selectOutsideDays={selectOutsideDays}
             locale={locale}
             calendar={calendar}
           />