@walkeros/explorer 4.2.1 → 4.2.2-next-1782892388850

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @walkeros/explorer
 
+## 4.2.2-next-1782892388850
+
+### Patch Changes
+
+- c201c5f: Read-only code snippets now render their highlighted content during
+  server-side rendering instead of waiting for the browser, so code is visible
+  on first paint and in no-JS and search-engine contexts. `CodeSnippet` no
+  longer ships the Monaco editor for read-only display.
+- Updated dependencies [e6613f8]
+  - @walkeros/web-source-browser@4.2.2-next-1782892388850
+  - @walkeros/collector@4.2.2-next-1782892388850
+  - @walkeros/core@4.2.2-next-1782892388850
+  - @walkeros/web-core@4.2.2-next-1782892388850
+
 ## 4.2.1
 
 ### Patch Changes

package/dist/index.d.cts

@@ -494,62 +494,33 @@ interface CodeDiffBoxProps {
  */
 declare function CodeDiffBox({ original, modified, language, label, header, showHeader, showTrafficLights, showCopy, showViewToggle, showSummary, defaultView, footer, height, style, className, onMount, }: CodeDiffBoxProps): react_jsx_runtime.JSX.Element;
 
-type CodeSnippetProps = Omit<CodeBoxProps, 'label' | 'showHeader'> & {
-    format?: boolean;
-};
+interface CodeSnippetProps {
+    code: string;
+    language?: string;
+    className?: string;
+}
 /**
- * CodeSnippet - Prominent code display for snippets
+ * CodeSnippet - Prominent, read-only code display for snippets.
  *
- * Wraps CodeBox with larger font size and generous padding.
- * Use this for showcasing code examples, one-liners, or small code blocks
- * where you want the code to be more visually prominent than in a standard editor.
+ * Renders code with the static Shiki path (CodeView without a header), so the
+ * highlighted code is present in server-rendered HTML and in the llms.txt
+ * markdown export. Use this for showcasing install/usage commands, one-liners,
+ * or small code blocks on docs pages.
  *
- * Always renders without a header. Use CodeBox if you need a header.
+ * Read-only with a copy button. Snippets are expected to be authored
+ * pre-formatted; no client-side reformatting happens (which would otherwise
+ * mutate text only on the client and cause a hydration mismatch).
  *
- * Default behavior:
- * - Read-only (disabled=true)
- * - Copy button enabled (showCopy=true)
- * - Auto-height with sensible bounds (min: 20px, max: 600px)
- * - Auto-format on mount (format=true) - formats code once on initial load
- *
- * Auto-Formatting:
- * - Enabled by default (format=true)
- * - Runs once on component mount using Monaco's built-in formatters
- * - Supports: JavaScript, TypeScript, JSON, HTML, CSS
- * - Use format={false} to disable for special cases (pre-formatted code)
- *
- * Reuses all CodeBox functionality:
- * - Monaco Editor with syntax highlighting
- * - Grid height management and auto-height modes
- * - Copy button
- * - Theme integration
+ * Uses a slightly larger font size (15px) than the default code view, scoped to
+ * the `.elb-code-snippet` wrapper.
  *
  * @example
- * // Minimal usage - code auto-formats on load
  * <CodeSnippet
  *   code="import { elb } from '@walkeros/core';"
  *   language="javascript"
  * />
- *
- * @example
- * // Disable auto-formatting for pre-formatted code
- * <CodeSnippet
- *   code={alreadyFormattedCode}
- *   language="javascript"
- *   format={false}
- * />
- *
- * @example
- * // Override defaults if needed
- * <CodeSnippet
- *   code={editableCode}
- *   language="javascript"
- *   disabled={false}
- *   showCopy={false}
- *   autoHeight={{ min: 100, max: 800 }}
- * />
  */
-declare function CodeSnippet(props: CodeSnippetProps): react_jsx_runtime.JSX.Element;
+declare function CodeSnippet({ code, language, className, }: CodeSnippetProps): react_jsx_runtime.JSX.Element;
 
 type FlowMarkerPosition = 'source' | 'source-left' | 'source-right' | 'collector' | 'collector-left' | 'collector-right' | 'destination' | 'destination-left' | 'destination-right' | `source-${string}` | `source-${string}-left` | `source-${string}-right` | `destination-${string}` | `destination-${string}-left` | `destination-${string}-right` | `pre-${string}` | `pre-${string}-left` | `pre-${string}-right` | `post-${string}` | `post-${string}-left` | `post-${string}-right` | 'stage-before' | 'stage-before-right' | 'stage-after' | 'stage-after-left' | 'incoming' | 'outgoing' | 'source-collector' | 'collector-destination' | `source-${string}-pre` | `source-${string}-collector` | `pre-${string}-next` | 'pre-collector' | 'collector-post' | `post-${string}-next` | `post-destination-${string}` | 'before-source' | 'destination-after';
 interface FlowMarker {
@@ -1099,10 +1070,8 @@ interface CodeStaticProps {
     code: string;
     language?: string;
     className?: string;
-    /** Force theme. If omitted, auto-detected from <html> data-theme / class. */
-    theme?: 'light' | 'dark';
 }
-declare function CodeStatic({ code, language, className, theme, }: CodeStaticProps): React.ReactElement;
+declare function CodeStatic({ code, language, className, }: CodeStaticProps): React.ReactElement;
 
 interface BoxTab {
     id: string;

package/dist/index.d.ts

@@ -494,62 +494,33 @@ interface CodeDiffBoxProps {
  */
 declare function CodeDiffBox({ original, modified, language, label, header, showHeader, showTrafficLights, showCopy, showViewToggle, showSummary, defaultView, footer, height, style, className, onMount, }: CodeDiffBoxProps): react_jsx_runtime.JSX.Element;
 
-type CodeSnippetProps = Omit<CodeBoxProps, 'label' | 'showHeader'> & {
-    format?: boolean;
-};
+interface CodeSnippetProps {
+    code: string;
+    language?: string;
+    className?: string;
+}
 /**
- * CodeSnippet - Prominent code display for snippets
+ * CodeSnippet - Prominent, read-only code display for snippets.
  *
- * Wraps CodeBox with larger font size and generous padding.
- * Use this for showcasing code examples, one-liners, or small code blocks
- * where you want the code to be more visually prominent than in a standard editor.
+ * Renders code with the static Shiki path (CodeView without a header), so the
+ * highlighted code is present in server-rendered HTML and in the llms.txt
+ * markdown export. Use this for showcasing install/usage commands, one-liners,
+ * or small code blocks on docs pages.
  *
- * Always renders without a header. Use CodeBox if you need a header.
+ * Read-only with a copy button. Snippets are expected to be authored
+ * pre-formatted; no client-side reformatting happens (which would otherwise
+ * mutate text only on the client and cause a hydration mismatch).
  *
- * Default behavior:
- * - Read-only (disabled=true)
- * - Copy button enabled (showCopy=true)
- * - Auto-height with sensible bounds (min: 20px, max: 600px)
- * - Auto-format on mount (format=true) - formats code once on initial load
- *
- * Auto-Formatting:
- * - Enabled by default (format=true)
- * - Runs once on component mount using Monaco's built-in formatters
- * - Supports: JavaScript, TypeScript, JSON, HTML, CSS
- * - Use format={false} to disable for special cases (pre-formatted code)
- *
- * Reuses all CodeBox functionality:
- * - Monaco Editor with syntax highlighting
- * - Grid height management and auto-height modes
- * - Copy button
- * - Theme integration
+ * Uses a slightly larger font size (15px) than the default code view, scoped to
+ * the `.elb-code-snippet` wrapper.
  *
  * @example
- * // Minimal usage - code auto-formats on load
  * <CodeSnippet
  *   code="import { elb } from '@walkeros/core';"
  *   language="javascript"
  * />
- *
- * @example
- * // Disable auto-formatting for pre-formatted code
- * <CodeSnippet
- *   code={alreadyFormattedCode}
- *   language="javascript"
- *   format={false}
- * />
- *
- * @example
- * // Override defaults if needed
- * <CodeSnippet
- *   code={editableCode}
- *   language="javascript"
- *   disabled={false}
- *   showCopy={false}
- *   autoHeight={{ min: 100, max: 800 }}
- * />
  */
-declare function CodeSnippet(props: CodeSnippetProps): react_jsx_runtime.JSX.Element;
+declare function CodeSnippet({ code, language, className, }: CodeSnippetProps): react_jsx_runtime.JSX.Element;
 
 type FlowMarkerPosition = 'source' | 'source-left' | 'source-right' | 'collector' | 'collector-left' | 'collector-right' | 'destination' | 'destination-left' | 'destination-right' | `source-${string}` | `source-${string}-left` | `source-${string}-right` | `destination-${string}` | `destination-${string}-left` | `destination-${string}-right` | `pre-${string}` | `pre-${string}-left` | `pre-${string}-right` | `post-${string}` | `post-${string}-left` | `post-${string}-right` | 'stage-before' | 'stage-before-right' | 'stage-after' | 'stage-after-left' | 'incoming' | 'outgoing' | 'source-collector' | 'collector-destination' | `source-${string}-pre` | `source-${string}-collector` | `pre-${string}-next` | 'pre-collector' | 'collector-post' | `post-${string}-next` | `post-destination-${string}` | 'before-source' | 'destination-after';
 interface FlowMarker {
@@ -1099,10 +1070,8 @@ interface CodeStaticProps {
     code: string;
     language?: string;
     className?: string;
-    /** Force theme. If omitted, auto-detected from <html> data-theme / class. */
-    theme?: 'light' | 'dark';
 }
-declare function CodeStatic({ code, language, className, theme, }: CodeStaticProps): React.ReactElement;
+declare function CodeStatic({ code, language, className, }: CodeStaticProps): React.ReactElement;
 
 interface BoxTab {
     id: string;