@vendure-io/ui 2.0.0-beta.7 → 2.0.0-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vendure-io/ui",
-  "version": "2.0.0-beta.7",
+  "version": "2.0.0-beta.9",
   "description": "React component library for Vendure, built on shadcn/ui and Tailwind v4",
   "license": "SEE LICENSE IN LICENSE.md",
   "homepage": "https://github.com/vendurehq/design/tree/main/packages/ui",
@@ -49,7 +49,7 @@
     "@shikijs/themes": "^3.23.0",
     "@shikijs/transformers": "^3.22.0",
     "@tanstack/react-table": "^8.21.3",
-    "@vendure-io/design-tokens": "^2.0.0-beta.5",
+    "@vendure-io/design-tokens": "^2.0.0-beta.7",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",

package/src/components/molecules/anonymized-token.tsx

@@ -53,9 +53,9 @@ interface AnonymizedTokenProps extends Omit<React.ComponentProps<'span'>, 'child
   copyable?: boolean;
   /** How long the check-mark feedback stays visible, in ms. */
   timeout?: CopyButtonProps['timeout'];
-  /** Called after a successful copy. Wire your toast here. */
+  /** Called after a successful copy. Wire your toast here. Falls back to `CopyFeedbackProvider`. */
   onCopied?: CopyButtonProps['onCopied'];
-  /** Called when the clipboard write fails. */
+  /** Called when the clipboard write fails. Falls back to `CopyFeedbackProvider`. */
   onCopyError?: CopyButtonProps['onCopyError'];
   /** Accessible label before copying. @default "Copy token" */
   copyLabel?: CopyButtonProps['copyLabel'];

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

@@ -1,16 +1,15 @@
 'use client';
 
-import {
-  transformerNotationDiff,
-  transformerNotationErrorLevel,
-  transformerNotationFocus,
-  transformerNotationHighlight,
-  transformerNotationWordHighlight,
-} from '@shikijs/transformers';
 import { Button } from '@vendure-io/ui/components/atoms/button';
 import { ScrollArea, ScrollBar } from '@vendure-io/ui/components/atoms/scroll-area';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@vendure-io/ui/components/atoms/tooltip';
+import { useCopyFeedback } from '@vendure-io/ui/components/molecules/copy-feedback-provider';
 import { useCopy } from '@vendure-io/ui/hooks/use-copy';
+import {
+  highlightCode,
+  normalizeLanguage,
+  type SupportedLanguage,
+} from '@vendure-io/ui/lib/highlight';
 import { cn } from '@vendure-io/ui/lib/utils';
 import {
   CheckIcon,
@@ -32,8 +31,6 @@ import {
   useRef,
   useState,
 } from 'react';
-import { createHighlighterCore } from 'shiki/core';
-import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
 
 // =============================================================================
 // Types
@@ -56,9 +53,14 @@ type CodeBlockProps = PropsWithChildren<ComponentProps<'div'>> & {
   packageManagerSwitcher?: boolean;
   /** Extra toolbar actions rendered before the built-in copy button. Compose with CodeBlockAction. */
   actions?: ReactNode;
-  /** Called after a successful copy. Wire your toast here. The DS never toasts. */
+  /**
+   * Called after a successful copy. Wire your toast here. The DS never toasts.
+   * Function props can't cross an RSC boundary — when rendering from a server
+   * component, omit this and mount `CopyFeedbackProvider` instead; it is the
+   * fallback when no prop is passed.
+   */
   onCopied?: () => void;
-  /** Called when the clipboard write fails. */
+  /** Called when the clipboard write fails. Falls back to `CopyFeedbackProvider`. */
   onCopyError?: (error: Error) => void;
 };
 
@@ -81,53 +83,6 @@ const STORAGE_EVENT = 'vendure-ui-package-manager-change';
 const COLLAPSE_THRESHOLD = 40; // Lines needed to trigger collapse
 const COLLAPSED_HEIGHT = 300; // px height when collapsed (roughly 15-20 lines)
 
-const languageLoaders = {
-  bash: () => import('@shikijs/langs/bash').then((module) => module.default),
-  css: () => import('@shikijs/langs/css').then((module) => module.default),
-  dotenv: () => import('@shikijs/langs/dotenv').then((module) => module.default),
-  graphql: () => import('@shikijs/langs/graphql').then((module) => module.default),
-  html: () => import('@shikijs/langs/html').then((module) => module.default),
-  ini: () => import('@shikijs/langs/ini').then((module) => module.default),
-  javascript: () => import('@shikijs/langs/javascript').then((module) => module.default),
-  json: () => import('@shikijs/langs/json').then((module) => module.default),
-  jsonc: () => import('@shikijs/langs/jsonc').then((module) => module.default),
-  jsx: () => import('@shikijs/langs/jsx').then((module) => module.default),
-  markdown: () => import('@shikijs/langs/markdown').then((module) => module.default),
-  mdx: () => import('@shikijs/langs/mdx').then((module) => module.default),
-  python: () => import('@shikijs/langs/python').then((module) => module.default),
-  shellscript: () => import('@shikijs/langs/shellscript').then((module) => module.default),
-  sql: () => import('@shikijs/langs/sql').then((module) => module.default),
-  tsx: () => import('@shikijs/langs/tsx').then((module) => module.default),
-  typescript: () => import('@shikijs/langs/typescript').then((module) => module.default),
-  yaml: () => import('@shikijs/langs/yaml').then((module) => module.default),
-} as const;
-
-type SupportedLanguage = keyof typeof languageLoaders;
-
-const themeLoaders = [
-  () => import('@shikijs/themes/github-light').then((module) => module.default),
-  () => import('@shikijs/themes/github-dark-default').then((module) => module.default),
-] as const;
-
-let highlighterPromise: ReturnType<typeof createHighlighterCore> | null = null;
-
-function getHighlighter(): ReturnType<typeof createHighlighterCore> {
-  highlighterPromise ??= Promise.all([
-    Promise.all(themeLoaders.map((loadTheme) => loadTheme())),
-    Promise.all(Object.values(languageLoaders).map((loadLanguage) => loadLanguage())),
-  ]).then(([themes, languages]) =>
-    createHighlighterCore({
-      themes,
-      langs: languages.flat(),
-      engine: createJavaScriptRegexEngine(),
-    }),
-  );
-
-  return highlighterPromise;
-}
-
-const highlightedCodeCache = new Map<string, Promise<string>>();
-
 /**
  * Get the stored package manager preference from localStorage
  */
@@ -445,83 +400,6 @@ function processCode(
   };
 }
 
-// =============================================================================
-// Shiki Highlighting
-// =============================================================================
-
-/**
- * Highlight code using Shiki with all transformers.
- * Uses Shiki's native notation for highlighting:
- * - // [!code highlight] - highlight a line (use language-appropriate comment)
- * - // [!code ++] / // [!code --] - diff highlighting
- * - // [!code focus] - focus mode (blur other lines)
- * - // [!code word:myVar] - highlight specific word
- * - // [!code error] / // [!code warning] - error levels
- */
-async function highlightCode(code: string, language: SupportedLanguage): Promise<string> {
-  const cacheKey = `${language}:${code}`;
-  const cached = highlightedCodeCache.get(cacheKey);
-  if (cached) return cached;
-
-  const highlighted = getHighlighter().then((highlighter) =>
-    highlighter.codeToHtml(code, {
-      lang: language,
-      themes: {
-        light: 'github-light',
-        dark: 'github-dark-default',
-      },
-      transformers: [
-        transformerNotationDiff({ matchAlgorithm: 'v3' }),
-        transformerNotationHighlight({ matchAlgorithm: 'v3' }),
-        transformerNotationWordHighlight({ matchAlgorithm: 'v3' }),
-        transformerNotationFocus({ matchAlgorithm: 'v3' }),
-        transformerNotationErrorLevel({ matchAlgorithm: 'v3' }),
-      ],
-    }),
-  );
-  highlightedCodeCache.set(cacheKey, highlighted);
-  return highlighted;
-}
-
-/**
- * Language aliases that map to Shiki's bundled language names
- */
-const LANGUAGE_ALIASES: Record<string, SupportedLanguage> = {
-  env: 'dotenv',
-  js: 'javascript',
-  ts: 'typescript',
-  sh: 'bash',
-  shell: 'bash',
-  yml: 'yaml',
-  py: 'python',
-  md: 'markdown',
-  plaintext: 'ini',
-  text: 'ini',
-  chroma: 'ini',
-};
-
-/**
- * Normalize language identifier for Shiki/BundledLanguage.
- * Falls back to 'ini' for unsupported languages (minimal highlighting).
- */
-function normalizeLanguage(lang?: string): SupportedLanguage {
-  const normalized = lang?.toLowerCase() || 'ini';
-
-  // Check for aliases first
-  const alias = LANGUAGE_ALIASES[normalized];
-  if (alias) {
-    return alias;
-  }
-
-  // Check if the language is one of the explicitly bundled grammars.
-  if (normalized in languageLoaders) {
-    return normalized as SupportedLanguage;
-  }
-
-  // Fallback to 'ini' for unsupported languages (has minimal highlighting)
-  return 'ini';
-}
-
 /**
  * Escape HTML special characters for safe display (fallback)
  */
@@ -975,7 +853,9 @@ function SyntaxHighlightedContent({ code, language }: SyntaxHighlightedContentPr
  * long snippets, and an optional npm→pnpm/yarn/bun package-manager switcher.
  * Highlighting is lazy (a shared highlighter singleton + per-snippet cache), and
  * line/diff/focus/word decorations use Shiki's `[!code ...]` notations. The DS
- * never toasts. Wire `onCopied`/`onCopyError` to your own feedback.
+ * never toasts. Wire `onCopied`/`onCopyError` to your own feedback — or, when
+ * rendering from server components (where function props can't be passed),
+ * mount `CopyFeedbackProvider` once and leave the props off.
  */
 export function CodeBlock({
   className,
@@ -990,6 +870,7 @@ export function CodeBlock({
   ...props
 }: CodeBlockProps) {
   const { copied, copy } = useCopy();
+  const copyFeedback = useCopyFeedback();
   const [activePackageManager, setActivePackageManager] = usePackageManager();
   const [isExpanded, setIsExpanded] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -1035,8 +916,8 @@ export function CodeBlock({
 
   const handleCopy = async () => {
     const ok = await copy(displayCode);
-    if (ok) onCopied?.();
-    else onCopyError?.(new Error('Failed to copy to the clipboard'));
+    if (ok) (onCopied ?? copyFeedback.onCopied)?.();
+    else (onCopyError ?? copyFeedback.onCopyError)?.(new Error('Failed to copy to the clipboard'));
   };
 
   const toolbar = <CodeBlockToolbar onCopy={handleCopy} isCopied={copied} actions={actions} />;

package/src/components/molecules/copy-feedback-provider.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { createContext, type ReactNode, useContext, useMemo } from 'react';
+
+// Function props can't cross a server→client boundary, so a copy surface
+// rendered from RSC (e.g. MDX docs) could never receive an `onCopied` callback
+// for toast wiring. This context is the RSC-safe alternative: mount
+// CopyFeedbackProvider once in a client component (wire your toast there — the
+// DS never toasts), and copy surfaces resolve their feedback in a fixed order —
+// explicit prop → this context → nothing beyond the built-in copied icon.
+interface CopyFeedbackContextValue {
+  /** Called after a successful copy. Wire your toast here — the DS never toasts. */
+  onCopied?: () => void;
+  /** Called when the clipboard write fails. */
+  onCopyError?: (error: Error) => void;
+}
+
+const CopyFeedbackContext = createContext<CopyFeedbackContextValue>({});
+
+function CopyFeedbackProvider({
+  children,
+  onCopied,
+  onCopyError,
+}: CopyFeedbackContextValue & { children: ReactNode }) {
+  const value = useMemo(() => ({ onCopied, onCopyError }), [onCopied, onCopyError]);
+  return <CopyFeedbackContext.Provider value={value}>{children}</CopyFeedbackContext.Provider>;
+}
+
+function useCopyFeedback(): CopyFeedbackContextValue {
+  return useContext(CopyFeedbackContext);
+}
+
+export { CopyFeedbackProvider, useCopyFeedback, type CopyFeedbackContextValue };

package/src/components/molecules/copyable-text.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Button } from '@vendure-io/ui/components/atoms/button';
+import { useCopyFeedback } from '@vendure-io/ui/components/molecules/copy-feedback-provider';
 import { useCopy } from '@vendure-io/ui/hooks/use-copy';
 import { cn } from '@vendure-io/ui/lib/utils';
 import { CheckIcon, CopyIcon } from 'lucide-react';
@@ -11,9 +12,16 @@ interface CopyButtonProps extends Omit<React.ComponentProps<typeof Button>, 'val
   value: string;
   /** How long the check-mark feedback stays visible, in ms. @default 2000 */
   timeout?: number;
-  /** Called after a successful copy. Wire your toast here — the DS never toasts. */
+  /**
+   * Called after a successful copy. Wire your toast here — the DS never toasts.
+   * Falls back to `CopyFeedbackProvider` when omitted (the RSC-safe path, since
+   * function props can't be passed from server components).
+   */
   onCopied?: () => void;
-  /** Called when the clipboard write fails (e.g. permissions, insecure context). */
+  /**
+   * Called when the clipboard write fails (e.g. permissions, insecure context).
+   * Falls back to `CopyFeedbackProvider` when omitted.
+   */
   onCopyError?: (error: Error) => void;
   /** Accessible label before copying. @default "Copy" */
   copyLabel?: string;
@@ -40,6 +48,7 @@ function CopyButton({
   ...props
 }: CopyButtonProps) {
   const { copied, copy } = useCopy({ timeout });
+  const copyFeedback = useCopyFeedback();
 
   return (
     <Button
@@ -53,8 +62,9 @@ function CopyButton({
         onClick?.(event);
         if (event.defaultPrevented) return;
         const ok = await copy(value);
-        if (ok) onCopied?.();
-        else onCopyError?.(new Error('Failed to copy to the clipboard'));
+        if (ok) (onCopied ?? copyFeedback.onCopied)?.();
+        else
+          (onCopyError ?? copyFeedback.onCopyError)?.(new Error('Failed to copy to the clipboard'));
       }}
       {...props}
     >
@@ -71,9 +81,9 @@ interface CopyableTextProps {
   className?: string;
   /** How long the check-mark feedback stays visible, in ms. @default 2000 */
   timeout?: number;
-  /** Called after a successful copy. Wire your toast here — the DS never toasts. */
+  /** Called after a successful copy. Wire your toast here — the DS never toasts. Falls back to `CopyFeedbackProvider`. */
   onCopied?: () => void;
-  /** Called when the clipboard write fails. */
+  /** Called when the clipboard write fails. Falls back to `CopyFeedbackProvider`. */
   onCopyError?: (error: Error) => void;
 }
 

package/src/components/molecules/id-chip.tsx

@@ -40,7 +40,7 @@ interface IdChipProps {
   /** Render the copy affordance. @default true */
   copyable?: boolean;
   className?: string;
-  /** Called after a successful copy. Wire your toast here — the DS never toasts. */
+  /** Called after a successful copy. Wire your toast here — the DS never toasts. Falls back to `CopyFeedbackProvider`. */
   onCopied?: () => void;
 }
 

package/src/lib/highlight.ts

@@ -0,0 +1,141 @@
+import {
+  transformerNotationDiff,
+  transformerNotationErrorLevel,
+  transformerNotationFocus,
+  transformerNotationHighlight,
+  transformerNotationWordHighlight,
+} from '@shikijs/transformers';
+import { createHighlighterCore } from 'shiki/core';
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
+
+/**
+ * The design system's Shiki setup: a lazy shared highlighter with the DS themes
+ * (github-light / github-dark-default), a fixed grammar set, and the `[!code ...]`
+ * notation transformers. Exported so consumers rendering highlighted HTML outside
+ * of `CodeBlock` (e.g. custom docs pipelines) reuse the exact same setup instead
+ * of duplicating it — and get the lazy per-language chunks instead of the full
+ * Shiki bundle.
+ */
+
+const languageLoaders = {
+  bash: () => import('@shikijs/langs/bash').then((module) => module.default),
+  css: () => import('@shikijs/langs/css').then((module) => module.default),
+  dotenv: () => import('@shikijs/langs/dotenv').then((module) => module.default),
+  graphql: () => import('@shikijs/langs/graphql').then((module) => module.default),
+  html: () => import('@shikijs/langs/html').then((module) => module.default),
+  ini: () => import('@shikijs/langs/ini').then((module) => module.default),
+  javascript: () => import('@shikijs/langs/javascript').then((module) => module.default),
+  json: () => import('@shikijs/langs/json').then((module) => module.default),
+  jsonc: () => import('@shikijs/langs/jsonc').then((module) => module.default),
+  jsx: () => import('@shikijs/langs/jsx').then((module) => module.default),
+  markdown: () => import('@shikijs/langs/markdown').then((module) => module.default),
+  mdx: () => import('@shikijs/langs/mdx').then((module) => module.default),
+  python: () => import('@shikijs/langs/python').then((module) => module.default),
+  shellscript: () => import('@shikijs/langs/shellscript').then((module) => module.default),
+  sql: () => import('@shikijs/langs/sql').then((module) => module.default),
+  tsx: () => import('@shikijs/langs/tsx').then((module) => module.default),
+  typescript: () => import('@shikijs/langs/typescript').then((module) => module.default),
+  yaml: () => import('@shikijs/langs/yaml').then((module) => module.default),
+} as const;
+
+type SupportedLanguage = keyof typeof languageLoaders;
+
+const themeLoaders = [
+  () => import('@shikijs/themes/github-light').then((module) => module.default),
+  () => import('@shikijs/themes/github-dark-default').then((module) => module.default),
+] as const;
+
+let highlighterPromise: ReturnType<typeof createHighlighterCore> | null = null;
+
+function getHighlighter(): ReturnType<typeof createHighlighterCore> {
+  highlighterPromise ??= Promise.all([
+    Promise.all(themeLoaders.map((loadTheme) => loadTheme())),
+    Promise.all(Object.values(languageLoaders).map((loadLanguage) => loadLanguage())),
+  ]).then(([themes, languages]) =>
+    createHighlighterCore({
+      themes,
+      langs: languages.flat(),
+      engine: createJavaScriptRegexEngine(),
+    }),
+  );
+
+  return highlighterPromise;
+}
+
+const highlightedCodeCache = new Map<string, Promise<string>>();
+
+/**
+ * Highlight code using Shiki with all transformers.
+ * Uses Shiki's native notation for highlighting:
+ * - // [!code highlight] - highlight a line (use language-appropriate comment)
+ * - // [!code ++] / // [!code --] - diff highlighting
+ * - // [!code focus] - focus mode (blur other lines)
+ * - // [!code word:myVar] - highlight specific word
+ * - // [!code error] / // [!code warning] - error levels
+ */
+async function highlightCode(code: string, language: SupportedLanguage): Promise<string> {
+  const cacheKey = `${language}:${code}`;
+  const cached = highlightedCodeCache.get(cacheKey);
+  if (cached) return cached;
+
+  const highlighted = getHighlighter().then((highlighter) =>
+    highlighter.codeToHtml(code, {
+      lang: language,
+      themes: {
+        light: 'github-light',
+        dark: 'github-dark-default',
+      },
+      transformers: [
+        transformerNotationDiff({ matchAlgorithm: 'v3' }),
+        transformerNotationHighlight({ matchAlgorithm: 'v3' }),
+        transformerNotationWordHighlight({ matchAlgorithm: 'v3' }),
+        transformerNotationFocus({ matchAlgorithm: 'v3' }),
+        transformerNotationErrorLevel({ matchAlgorithm: 'v3' }),
+      ],
+    }),
+  );
+  highlightedCodeCache.set(cacheKey, highlighted);
+  return highlighted;
+}
+
+/**
+ * Language aliases that map to Shiki's bundled language names
+ */
+const LANGUAGE_ALIASES: Record<string, SupportedLanguage> = {
+  env: 'dotenv',
+  js: 'javascript',
+  ts: 'typescript',
+  sh: 'bash',
+  shell: 'bash',
+  yml: 'yaml',
+  py: 'python',
+  md: 'markdown',
+  plaintext: 'ini',
+  text: 'ini',
+  chroma: 'ini',
+};
+
+/**
+ * Normalize language identifier for Shiki/BundledLanguage.
+ * Falls back to 'ini' for unsupported languages (minimal highlighting).
+ */
+function normalizeLanguage(lang?: string): SupportedLanguage {
+  const normalized = lang?.toLowerCase() || 'ini';
+
+  // Check for aliases first
+  const alias = LANGUAGE_ALIASES[normalized];
+  if (alias) {
+    return alias;
+  }
+
+  // Check if the language is one of the explicitly bundled grammars.
+  if (normalized in languageLoaders) {
+    return normalized as SupportedLanguage;
+  }
+
+  // Fallback to 'ini' for unsupported languages (has minimal highlighting)
+  return 'ini';
+}
+
+export { getHighlighter, highlightCode, normalizeLanguage };
+export type { SupportedLanguage };