From 47b18995179bb3bb0d4994b84bd6130d62bc37c0 Mon Sep 17 00:00:00 2001
From: antoine <antoine.levy-lambert@ny.email.gs.com>
Date: Tue, 9 Dec 2025 16:41:44 -0800
Subject: [PATCH 01/12] Fix errors detected by eslint.

---
 znai-reactjs/eslint.config.mjs                | 72 ++++++++++++++++++-
 znai-reactjs/package.json                     |  4 +-
 znai-reactjs/src/App.jsx                      |  2 +-
 .../DismissableErrorIndicators.demo.tsx       |  2 +-
 znai-reactjs/src/components/Tooltip.tsx       |  3 +-
 .../doc-elements/DefaultElementsLibrary.jsx   | 15 +++-
 .../src/doc-elements/bullets/BulletList.jsx   |  6 +-
 .../code-snippets/SimpleCodeSnippet.jsx       | 13 +++-
 .../custom/CustomReactJSComponent.jsx         |  4 +-
 .../default-elements/SectionTitle.tsx         |  2 -
 .../demo-utils/PresentationDemo.jsx           | 12 ++--
 .../src/doc-elements/doc-utils/DocUtils.jsx   | 12 ++--
 .../doc-elements/graphviz/GraphVizFlow.jsx    |  4 +-
 .../graphviz/GraphVizReactElementsBuilder.jsx |  6 +-
 .../src/doc-elements/graphviz/GvPolygon.jsx   |  2 +-
 .../graphviz/PresentationGraphVizFlow.jsx     |  2 +-
 .../doc-elements/graphviz/SvgCustomShape.jsx  |  2 +-
 .../images/annotations/Annotations.jsx        |  4 +-
 .../images/annotations/StaticAnnotation.jsx   | 18 +++--
 .../presentation/Presentation.jsx             |  6 +-
 .../text-selection/selectionTestUtils.js      | 12 ++--
 .../tracking/DocumentationTracking.test.ts    |  3 +-
 .../tracking/HttpDocumentationTracking.ts     |  2 +-
 .../src/doc-elements/xml/xmlPrinter.js        |  2 +-
 znai-reactjs/src/index.jsx                    |  7 +-
 znai-reactjs/src/utils/socket.js              |  4 +-
 znai-reactjs/tsconfig.node.json               |  2 +-
 27 files changed, 166 insertions(+), 57 deletions(-)

diff --git a/znai-reactjs/eslint.config.mjs b/znai-reactjs/eslint.config.mjs
index 105be7cc1..a396464f0 100644
--- a/znai-reactjs/eslint.config.mjs
+++ b/znai-reactjs/eslint.config.mjs
@@ -9,18 +9,23 @@ import parser from '@typescript-eslint/parser';
 export default [
     // Ignore patterns
     {
-        ignores: ['dist', 'build', 'node_modules', '*.config.js'],
+        ignores: ['dist', 'build', 'node_modules', 'public/**/*.js', '*.config.js'],
     },
 
     // Base JavaScript configuration
     {
-        files: ['**/*.{js,jsx,mjs,cjs,ts,tsx}'],
+        files: ['**/*.{js,jsx,mjs,cjs}'],
         languageOptions: {
             parser: parser,
             ecmaVersion: 2020,
             globals: {
                 ...globals.browser,
                 ...globals.es2020,
+                populateLocalSearchIndexWithData: 'readonly',
+                documentationNavigation: 'readonly',
+                // Add other globals from znai's generated HTML
+                toc: 'readonly',
+                znaiSearchData: 'readonly'
             },
             parserOptions: {
                 ecmaVersion: 'latest',
@@ -70,4 +75,67 @@ export default [
             'no-console': ['warn', { allow: ['warn', 'error'] }],
         },
     },
+    // TypeScript files
+    {
+        files: ['**/*.{ts,tsx}'],
+        languageOptions: {
+            parser: parser,
+            parserOptions: {
+                ecmaVersion: 2020,
+                sourceType: 'module',
+                ecmaFeatures: {jsx: true},
+                project: './tsconfig.app.json',  // Important for type-aware rules
+            },
+            globals: {
+                ...globals.browser,
+                ...globals.es2020,
+            },
+        },
+        plugins: {
+            '@typescript-eslint': typescriptEslint,
+            react,
+            'react-hooks': reactHooks,
+            'react-refresh': reactRefresh,
+        }
+    },
+    // Special config for vitest.config.ts (and other config files)
+    {
+        files: ['vitest.config.ts', '*.config.ts'],
+        languageOptions: {
+            parser: parser,
+            parserOptions: {
+                ecmaVersion: 2020,
+                sourceType: 'module',
+                project: './tsconfig.node.json',  // Use node tsconfig
+            },
+            globals: {
+                ...globals.node,  // Node globals instead of browser
+            },
+        },
+        plugins: {
+            '@typescript-eslint': typescriptEslint,
+        },
+        rules: {
+            ...typescriptEslint.configs.recommended.rules,
+            'no-undef': 'off',
+            '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+        }
+    },
+    {
+        files: ['**/*.test.{js,jsx,ts,tsx}', '**/*.spec.{js,jsx,ts,tsx}'],
+        languageOptions: {
+            globals: {
+                ...globals.node,  // Vitest runs in Node
+                describe: 'readonly',
+                it: 'readonly',
+                test: 'readonly',
+                expect: 'readonly',
+                beforeEach: 'readonly',
+                afterEach: 'readonly',
+                beforeAll: 'readonly',
+                afterAll: 'readonly',
+                vi: 'readonly',  // Vitest's mock utility
+            },
+        },
+    },
 ];
\ No newline at end of file
diff --git a/znai-reactjs/package.json b/znai-reactjs/package.json
index f31318588..8663a5053 100644
--- a/znai-reactjs/package.json
+++ b/znai-reactjs/package.json
@@ -59,10 +59,10 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "eslint . --ext ts,tsx --report-unused-disable-directives && tsc && vite build",
     "test": "vitest --config ./vitest.config.ts",
     "test:watch": "vitest --config ./vitest.config.ts --watch",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives",
     "preview": "vite preview"
   },
   "proxy": "http://localhost:3334/",
diff --git a/znai-reactjs/src/App.jsx b/znai-reactjs/src/App.jsx
index 11abcd563..2cf310b71 100644
--- a/znai-reactjs/src/App.jsx
+++ b/znai-reactjs/src/App.jsx
@@ -19,7 +19,7 @@ import "./App.css";
 import "./layout/DocumentationLayout.css";
 import "./doc-elements/search/Search.css";
 
-import React, { Component, useEffect } from "react";
+import React, { useEffect } from "react";
 
 import { ComponentViewer, DropDowns, Registries } from "react-component-viewer";
 import { tabsDemo } from "./doc-elements/tabs/Tabs.demo";
diff --git a/znai-reactjs/src/components/DismissableErrorIndicators.demo.tsx b/znai-reactjs/src/components/DismissableErrorIndicators.demo.tsx
index dddd00100..39444769c 100644
--- a/znai-reactjs/src/components/DismissableErrorIndicators.demo.tsx
+++ b/znai-reactjs/src/components/DismissableErrorIndicators.demo.tsx
@@ -16,7 +16,7 @@
 
 import React from "react";
 
-import { Registry } from "react-component-viewer";
+import type { Registry } from "react-component-viewer";
 import { DismissableErrorIndicators, errorNotifications } from "./DismissableErrorIndicators";
 
 export function dismissableErrorIndicatorsDemo(registry: Registry) {
diff --git a/znai-reactjs/src/components/Tooltip.tsx b/znai-reactjs/src/components/Tooltip.tsx
index 77a65d342..ed7d6d248 100644
--- a/znai-reactjs/src/components/Tooltip.tsx
+++ b/znai-reactjs/src/components/Tooltip.tsx
@@ -169,7 +169,7 @@ export function TooltipRenderer() {
           left: (clientRect.left + clientRect.right) / 2.0,
         };
 
-      case "parent-content-block":
+      case "parent-content-block": {
         const parentContentBlock = findParentContentBlock();
         if (parentContentBlock) {
           const contentBlockRect = parentContentBlock.getBoundingClientRect();
@@ -183,6 +183,7 @@ export function TooltipRenderer() {
           console.error("can't find parent-content-block", parentContentBlock);
           return bottomLeft();
         }
+      }
     }
 
     function bottomLeft() {
diff --git a/znai-reactjs/src/doc-elements/DefaultElementsLibrary.jsx b/znai-reactjs/src/doc-elements/DefaultElementsLibrary.jsx
index 052c8f4be..9d8ca896c 100644
--- a/znai-reactjs/src/doc-elements/DefaultElementsLibrary.jsx
+++ b/znai-reactjs/src/doc-elements/DefaultElementsLibrary.jsx
@@ -97,8 +97,11 @@ const presentationElementHandlers = {}
 
 library.DocElement = DocElement
 library.Emphasis = (props) => (<span className="emphasis"><props.elementsLibrary.DocElement {...props}/></span>)
+library.Emphasis.displayName = "Emphasis"
 library.StrongEmphasis = (props) => (<span className="strong-emphasis"><props.elementsLibrary.DocElement {...props}/></span>)
+library.StrongEmphasis.displayName = "StrongEmphasis"
 library.StrikeThrough = (props) => (<del className="strike-through"><props.elementsLibrary.DocElement {...props}/></del>)
+library.StrikeThrough.displayName = "StrikeThrough"
 library.Link = Link
 library.Anchor = Anchor
 
@@ -117,8 +120,11 @@ presentationElementHandlers.BlockQuote = presentationBlockQuoteHandler
 library.SimpleText = SimpleText
 library.InlinedCode = InlinedCode
 library.SoftLineBreak = () => <span> </span>
+library.SoftLineBreak.displayName = "SoftLineBreak"
 library.HardLineBreak = () => <br />
+library.HardLineBreak.displayName = "HardLineBreak"
 library.ThematicBreak = () => <hr />
+library.ThematicBreak.displayName = "ThematicBreak"
 
 library.ApiLinkedTextBlock = ApiLinkedTextBlock;
 
@@ -128,6 +134,7 @@ presentationElementHandlers.Snippet = presentationSnippetHandler
 library.CustomReactJSComponent = CustomReactJSComponent
 
 library.EmptyBlock = () => (<div/>)
+library.EmptyBlock.displayName = "EmptyBlock"
 
 library.LangClass = wrappedInContentBlock(LangClass)
 library.LangFunction = wrappedInContentBlock(LangFunction)
@@ -253,7 +260,13 @@ library.Asciinema = Asciinema
  * @param Component component to wrap
  */
 function wrappedInContentBlock(Component) {
-    return (props) => <div className="content-block"><Component {...props}/></div>
+    const WrappedComponent = (props) => (
+        <div className="content-block">
+            <Component {...props}/>
+        </div>
+    );
+    WrappedComponent.displayName = `ContentBlock(${Component.displayName || Component.name || 'Component'})`;
+    return WrappedComponent;
 }
 
 themeRegistry.registerAsBase(new Theme({
diff --git a/znai-reactjs/src/doc-elements/bullets/BulletList.jsx b/znai-reactjs/src/doc-elements/bullets/BulletList.jsx
index aeb4bd195..06a7006bf 100644
--- a/znai-reactjs/src/doc-elements/bullets/BulletList.jsx
+++ b/znai-reactjs/src/doc-elements/bullets/BulletList.jsx
@@ -65,7 +65,7 @@ const presentationNumberOfSlides = (props) => {
 }
 
 function valueByIdWithWarning(dict, type) {
-    if (! dict.hasOwnProperty(type)) {
+    if (!Object.hasOwn(dict, type)) {
         console.warn("can't find bullets list type: " + type)
         return NoBullets
     }
@@ -79,12 +79,12 @@ function presentationListType(props) {
 }
 
 function listType(props, key) {
-    if (! props.hasOwnProperty('meta')) {
+    if (! Object.hasOwn(props,'meta')) {
         return null
     }
 
     const meta = props.meta
-    if (! meta.hasOwnProperty(key)) {
+    if (! Object.hasOwn(meta, key)) {
         return null
     }
 
diff --git a/znai-reactjs/src/doc-elements/code-snippets/SimpleCodeSnippet.jsx b/znai-reactjs/src/doc-elements/code-snippets/SimpleCodeSnippet.jsx
index b4f47c938..3ba5ade98 100644
--- a/znai-reactjs/src/doc-elements/code-snippets/SimpleCodeSnippet.jsx
+++ b/znai-reactjs/src/doc-elements/code-snippets/SimpleCodeSnippet.jsx
@@ -46,8 +46,17 @@ class SimpleCodeSnippet extends React.Component {
   }
 
   // handles changes during preview
-  componentWillReceiveProps(nextProps) {
-    this.processProps(nextProps);
+  componentDidUpdate(prevProps) {
+    // Only process props if they actually changed
+    if (
+        prevProps.tokens !== this.props.tokens ||
+        prevProps.linesOfCode !== this.props.linesOfCode ||
+        prevProps.highlight !== this.props.highlight
+    ) {
+      this.processProps(this.props);
+      // If you need to update state based on props changes, you can do it here
+      // but be careful to avoid infinite loops
+    }
   }
 
   processProps({ tokens, linesOfCode, highlight }) {
diff --git a/znai-reactjs/src/doc-elements/custom/CustomReactJSComponent.jsx b/znai-reactjs/src/doc-elements/custom/CustomReactJSComponent.jsx
index 76ac1fed6..cb937755f 100644
--- a/znai-reactjs/src/doc-elements/custom/CustomReactJSComponent.jsx
+++ b/znai-reactjs/src/doc-elements/custom/CustomReactJSComponent.jsx
@@ -21,12 +21,12 @@ import './CustomReactJSComponent.css'
 const CustomReactJSComponent = ({namespace, name, props}) => {
     const components = window[namespace]
     if (! components) {
-        return <ErrorPlaceholder>No "{namespace}" components namespace found</ErrorPlaceholder>
+        return <ErrorPlaceholder>No &quot;{namespace}&quot; components namespace found</ErrorPlaceholder>
     }
 
     const CustomComponent = components[name]
     if (! CustomComponent) {
-        return <ErrorPlaceholder>No "{name}" component found in "{namespace}"</ErrorPlaceholder>
+        return <ErrorPlaceholder>No &quot;{name}&quot; component found in &quot;{namespace}&quot;</ErrorPlaceholder>
     }
 
     return <CustomComponent {...props}/>
diff --git a/znai-reactjs/src/doc-elements/default-elements/SectionTitle.tsx b/znai-reactjs/src/doc-elements/default-elements/SectionTitle.tsx
index fda0d156a..53c76fba6 100644
--- a/znai-reactjs/src/doc-elements/default-elements/SectionTitle.tsx
+++ b/znai-reactjs/src/doc-elements/default-elements/SectionTitle.tsx
@@ -57,8 +57,6 @@ export function SectionTitle({ id, title, headingContent, badge, style }: Props)
       </div>
     </h1>
   ) : (
-    // @ts-ignore
-    // eslint-disable-next-line jsx-a11y/heading-has-content
     <h1 className="empty-section-title" id="implicit-section" />
   );
 
diff --git a/znai-reactjs/src/doc-elements/demo-utils/PresentationDemo.jsx b/znai-reactjs/src/doc-elements/demo-utils/PresentationDemo.jsx
index f97f0d1df..0c9b36c04 100644
--- a/znai-reactjs/src/doc-elements/demo-utils/PresentationDemo.jsx
+++ b/znai-reactjs/src/doc-elements/demo-utils/PresentationDemo.jsx
@@ -24,16 +24,20 @@ import Presentation from '../presentation/Presentation'
 const defaultDocMeta = {id: "znai", title: "Znai", type: "User Guide"}
 
 export function createPresentationDemo(content, cfg = {docMeta: defaultDocMeta, slideIdx: 0}) {
-    return () => {
-        const presentationRegistry = new PresentationRegistry(elementsLibrary, presentationElementHandlers, content)
+    const PresentationDemoComponent = () => {
+        const presentationRegistry = new PresentationRegistry(elementsLibrary, presentationElementHandlers, content);
 
         return (
             <Presentation docMeta={cfg.docMeta || defaultDocMeta}
                           presentationRegistry={presentationRegistry}
                           slideIdx={cfg.slideIdx}
                           onNextPage={noOp}
-                          onPrevPage={noOp}/>)
-    }
+                          onPrevPage={noOp}/>
+        );
+    };
+
+    PresentationDemoComponent.displayName = 'PresentationDemo';
+    return PresentationDemoComponent;
 }
 
 function noOp() {
diff --git a/znai-reactjs/src/doc-elements/doc-utils/DocUtils.jsx b/znai-reactjs/src/doc-elements/doc-utils/DocUtils.jsx
index 93d8f97a4..b7356496a 100644
--- a/znai-reactjs/src/doc-elements/doc-utils/DocUtils.jsx
+++ b/znai-reactjs/src/doc-elements/doc-utils/DocUtils.jsx
@@ -38,11 +38,15 @@ function DocUtilsField({elementsLibrary, content}) {
 }
 
 function WrapperOnly(className) {
-    return ({elementsLibrary, content}) => <div className={className}>
-        <elementsLibrary.DocElement elementsLibrary={elementsLibrary} content={content}/>
-    </div>
-}
+    const WrapperComponent = ({elementsLibrary, content}) => (
+        <div className={className}>
+            <elementsLibrary.DocElement elementsLibrary={elementsLibrary} content={content}/>
+        </div>
+    );
 
+    WrapperComponent.displayName = `WrapperOnly(${className})`;
+    return WrapperComponent;
+}
 export function registerDocUtilsElements(elementsLibrary) {
     const components = {
         DocUtilsDesc,
diff --git a/znai-reactjs/src/doc-elements/graphviz/GraphVizFlow.jsx b/znai-reactjs/src/doc-elements/graphviz/GraphVizFlow.jsx
index b970fe5b7..a60806acf 100644
--- a/znai-reactjs/src/doc-elements/graphviz/GraphVizFlow.jsx
+++ b/znai-reactjs/src/doc-elements/graphviz/GraphVizFlow.jsx
@@ -15,10 +15,10 @@
  * limitations under the License.
  */
 
-import React, { Component } from 'react'
+import React from 'react'
 
 import GraphVizFlowFullScreen from './GraphVizFlowFullScreen'
-import GraphVizFlowAllInfoAtOnce from './GraphVizFlowAllInfoAtOnce'
+import DocumentationGraphVizFlow from './DocumentationGraphVizFlow'
 
 import './GraphvVizFlow.css'
 
diff --git a/znai-reactjs/src/doc-elements/graphviz/GraphVizReactElementsBuilder.jsx b/znai-reactjs/src/doc-elements/graphviz/GraphVizReactElementsBuilder.jsx
index ad571d7bc..e772f72c5 100644
--- a/znai-reactjs/src/doc-elements/graphviz/GraphVizReactElementsBuilder.jsx
+++ b/znai-reactjs/src/doc-elements/graphviz/GraphVizReactElementsBuilder.jsx
@@ -176,7 +176,11 @@ export default class GraphVizReactElementsBuilder {
             case 'text': return GvText
             case 'path': return GvPath
             case 'g': return GvGroup
-            case 'title': return () => <g/>
+            case 'title': {
+                const TitleComponent = () => <g/>;
+                TitleComponent.displayName = 'GraphVizTitle';
+                return TitleComponent;
+            }
 
             default: return domNode.tagName
         }
diff --git a/znai-reactjs/src/doc-elements/graphviz/GvPolygon.jsx b/znai-reactjs/src/doc-elements/graphviz/GvPolygon.jsx
index c48dfc040..4f41804f5 100644
--- a/znai-reactjs/src/doc-elements/graphviz/GvPolygon.jsx
+++ b/znai-reactjs/src/doc-elements/graphviz/GvPolygon.jsx
@@ -47,7 +47,7 @@ class GvPolygon extends React.Component {
             removeCustomPropsNoCopy(cleanedUpProps)
 
             // came from circle dot
-            if (this.props.hasOwnProperty("rx") &&
+            if (Object.hasOwn(this.props, "rx") &&
               (Math.abs(this.props.rx - this.props.ry) < 0.0001)) {
                 return <ellipse {...cleanedUpProps} {...colorsOverride}/>
             }
diff --git a/znai-reactjs/src/doc-elements/graphviz/PresentationGraphVizFlow.jsx b/znai-reactjs/src/doc-elements/graphviz/PresentationGraphVizFlow.jsx
index c434ac7a9..59b8f1f83 100644
--- a/znai-reactjs/src/doc-elements/graphviz/PresentationGraphVizFlow.jsx
+++ b/znai-reactjs/src/doc-elements/graphviz/PresentationGraphVizFlow.jsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import React, { Component } from 'react'
+import React from 'react'
 
 import GraphVizSvg from './GraphVizSvg'
 
diff --git a/znai-reactjs/src/doc-elements/graphviz/SvgCustomShape.jsx b/znai-reactjs/src/doc-elements/graphviz/SvgCustomShape.jsx
index 7a3a26d85..a646c6431 100644
--- a/znai-reactjs/src/doc-elements/graphviz/SvgCustomShape.jsx
+++ b/znai-reactjs/src/doc-elements/graphviz/SvgCustomShape.jsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import React, { Component } from 'react'
+import React from 'react'
 
 class SvgCustomShape extends React.Component {
     render() {
diff --git a/znai-reactjs/src/doc-elements/images/annotations/Annotations.jsx b/znai-reactjs/src/doc-elements/images/annotations/Annotations.jsx
index 64f034c60..eadcdb8cc 100644
--- a/znai-reactjs/src/doc-elements/images/annotations/Annotations.jsx
+++ b/znai-reactjs/src/doc-elements/images/annotations/Annotations.jsx
@@ -96,7 +96,7 @@ class Annotations {
 }
 
 function handlerForShapeType(shape) {
-    if (shapesLib.hasOwnProperty(shape.type)) {
+    if (Object.hasOwn(shapesLib, shape.type)) {
         return shapesLib[shape.type]
     } else {
         console.error("can't find type for shape: " + shape.type)
@@ -115,7 +115,7 @@ function staticAnnotationForShape(shape) {
 
 function cachedAnnotationForType(cache, shape, createFunc) {
     const type = shape.type
-    if (cache.hasOwnProperty(type)) {
+    if (Object.hasOwn(cache, type)) {
         return cache[type]
     } else {
         const Annotation = createFunc(handlerForShapeType(shape))
diff --git a/znai-reactjs/src/doc-elements/images/annotations/StaticAnnotation.jsx b/znai-reactjs/src/doc-elements/images/annotations/StaticAnnotation.jsx
index 05ba1751d..fbfedc139 100644
--- a/znai-reactjs/src/doc-elements/images/annotations/StaticAnnotation.jsx
+++ b/znai-reactjs/src/doc-elements/images/annotations/StaticAnnotation.jsx
@@ -18,15 +18,19 @@
 import React from 'react'
 import {styleByName} from '../shapes/styleByName';
 
-const staticAnnotation = (shapeHandler) => ({shape, scale}) => {
-    if (!shapeHandler) {
-        return <NotFound {...shape}/>
-    }
+const staticAnnotation = (shapeHandler) => {
+    const StaticAnnotationComponent = ({shape, scale}) => {
+        if (!shapeHandler) {
+            return <NotFound {...shape}/>
+        }
 
-    const Body = shapeHandler.body;
-    return <Body key="body" {...shape} scale={scale}/>
-}
+        const Body = shapeHandler.body;
+        return <Body key="body" {...shape} scale={scale}/>
+    };
 
+    StaticAnnotationComponent.displayName = `StaticAnnotation(${shapeHandler?.name || 'Unknown'})`;
+    return StaticAnnotationComponent;
+}
 function NotFound({x, y, width, height, color}) {
     const styleScheme = styleByName(color)
 
diff --git a/znai-reactjs/src/doc-elements/presentation/Presentation.jsx b/znai-reactjs/src/doc-elements/presentation/Presentation.jsx
index 6acb88743..87c7a166e 100644
--- a/znai-reactjs/src/doc-elements/presentation/Presentation.jsx
+++ b/znai-reactjs/src/doc-elements/presentation/Presentation.jsx
@@ -143,11 +143,11 @@ class Presentation extends React.Component {
         document.removeEventListener("keydown", this.keyDownHandler)
     }
 
-    componentWillReceiveProps(props) {
+    componentDidUpdate(prevProps) {
         const {presentationRegistry} = this.props
-        if (this.scrollToLastWithinPage && presentationRegistry !== props.presentationRegistry) {
+        if (this.scrollToLastWithinPage && prevProps.presentationRegistry !== presentationRegistry) {
             this.scrollToLastWithinPage = false
-            this.setSlideIdx(props.presentationRegistry.numberOfSlides - 1)
+            this.setSlideIdx(presentationRegistry.numberOfSlides - 1)
         }
     }
 
diff --git a/znai-reactjs/src/doc-elements/text-selection/selectionTestUtils.js b/znai-reactjs/src/doc-elements/text-selection/selectionTestUtils.js
index fb539230f..72ffee68e 100644
--- a/znai-reactjs/src/doc-elements/text-selection/selectionTestUtils.js
+++ b/znai-reactjs/src/doc-elements/text-selection/selectionTestUtils.js
@@ -30,10 +30,10 @@ export function setupDOM(htmlContent) {
   const document = dom.window.document;
   const window = dom.window;
 
-  global.window = window;
-  global.document = document;
-  global.Node = window.Node;
-  global.NodeFilter = window.NodeFilter;
+  globalThis.window = window;
+  globalThis.document = document;
+  globalThis.Node = window.Node;
+  globalThis.NodeFilter = window.NodeFilter;
 
   const container = document.body;
 
@@ -41,11 +41,11 @@ export function setupDOM(htmlContent) {
 }
 
 export function selectText(startNode, startOffset, endNode, endOffset) {
-  const range = global.document.createRange();
+  const range = globalThis.document.createRange();
   range.setStart(startNode, startOffset);
   range.setEnd(endNode, endOffset);
 
-  const selection = global.window.getSelection();
+  const selection = globalThis.window.getSelection();
   selection.removeAllRanges();
   selection.addRange(range);
 }
diff --git a/znai-reactjs/src/doc-elements/tracking/DocumentationTracking.test.ts b/znai-reactjs/src/doc-elements/tracking/DocumentationTracking.test.ts
index 1df5ca02f..2aefd5d75 100644
--- a/znai-reactjs/src/doc-elements/tracking/DocumentationTracking.test.ts
+++ b/znai-reactjs/src/doc-elements/tracking/DocumentationTracking.test.ts
@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { DocumentationTracking, DocumentationTrackingListener } from "./DocumentationTracking";
+import type { DocumentationTrackingListener } from "./DocumentationTracking";
+import { DocumentationTracking } from "./DocumentationTracking";
 
 interface CallRecord {
   method: string;
diff --git a/znai-reactjs/src/doc-elements/tracking/HttpDocumentationTracking.ts b/znai-reactjs/src/doc-elements/tracking/HttpDocumentationTracking.ts
index 3cf10587d..e0a673402 100644
--- a/znai-reactjs/src/doc-elements/tracking/HttpDocumentationTracking.ts
+++ b/znai-reactjs/src/doc-elements/tracking/HttpDocumentationTracking.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { DocumentationTrackingListener } from "./DocumentationTracking";
+import type { DocumentationTrackingListener } from "./DocumentationTracking";
 import { getDocId, getDocMeta } from "../../structure/docMeta";
 
 export interface TrackingEvent {
diff --git a/znai-reactjs/src/doc-elements/xml/xmlPrinter.js b/znai-reactjs/src/doc-elements/xml/xmlPrinter.js
index 040a07480..7c4152a13 100644
--- a/znai-reactjs/src/doc-elements/xml/xmlPrinter.js
+++ b/znai-reactjs/src/doc-elements/xml/xmlPrinter.js
@@ -157,7 +157,7 @@ class XmlPrinter {
     }
 
     isHighlightedPath(path) {
-        return this._pathsToHighlight.hasOwnProperty(path)
+        return Object.hasOwn(this._pathsToHighlight, path)
     }
 }
 
diff --git a/znai-reactjs/src/index.jsx b/znai-reactjs/src/index.jsx
index 729eea976..155c5db0e 100644
--- a/znai-reactjs/src/index.jsx
+++ b/znai-reactjs/src/index.jsx
@@ -30,12 +30,12 @@ import {PreviewChangeScreen} from './screens/preview-change-path/PreviewChangeSc
 import {NotAuthorizedScreen} from './screens/not-authorized/NotAuthorizedScreen'
 import {Landing} from './screens/landing/Landing'
 import {themeRegistry} from './theme/ThemeRegistry'
-import {documentationNavigation} from './structure/DocumentationNavigation'
+import {documentationNavigation} from './structure/DocumentationNavigation.jsx'
 import {documentationTracking} from './doc-elements/tracking/DocumentationTracking'
 import {pageTypesRegistry} from './doc-elements/page/PageTypesRegistry'
 import {mergeDocMeta} from './structure/docMeta'
 
-import { createLocalSearchIndex, populateLocalSearchIndexWithData } from "./doc-elements/search/flexSearch.js";
+import { createLocalSearchIndex, populateLocalSearchIndexWithData } from "./doc-elements/search/flexSearch.ts";
 
 window.React = React
 window.ReactDOM = ReactDOM
@@ -52,7 +52,8 @@ window.mergeDocMeta = mergeDocMeta
 window.createLocalSearchIndex = createLocalSearchIndex
 window.populateLocalSearchIndexWithData = populateLocalSearchIndexWithData
 window.znaiSearchIdx = window.createLocalSearchIndex();
-if (process.env.NODE_ENV !== "production") {
+const isDevelopment = import.meta.env.DEV;
+if (isDevelopment) {
     import('./App').then((module) => {
         const App = module.App;
         ReactDOM.render(
diff --git a/znai-reactjs/src/utils/socket.js b/znai-reactjs/src/utils/socket.js
index c5f3b036c..c0af99049 100644
--- a/znai-reactjs/src/utils/socket.js
+++ b/znai-reactjs/src/utils/socket.js
@@ -16,7 +16,9 @@
  */
 
 export function socketUrl(relativeUrl) {
-    if (process.env.NODE_ENV !== "production") {
+    const isDevelopment = import.meta.env.DEV
+
+    if (isDevelopment) {
         return "ws://localhost:3334/preview"
     }
 
diff --git a/znai-reactjs/tsconfig.node.json b/znai-reactjs/tsconfig.node.json
index 43b6e4c3d..6a8c8d29a 100644
--- a/znai-reactjs/tsconfig.node.json
+++ b/znai-reactjs/tsconfig.node.json
@@ -20,5 +20,5 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts", "vitest.config.ts"]
 }

From 591c9d3a47e8f90ec88f6b57c222ccbb5d60143a Mon Sep 17 00:00:00 2001
From: antoine <antoine.levy-lambert@ny.email.gs.com>
Date: Tue, 9 Dec 2025 17:03:29 -0800
Subject: [PATCH 02/12] Make import type compulsory where needed

---
 znai-reactjs/eslint.config.mjs                      | 13 ++++++++++++-
 znai-reactjs/src/doc-elements/DiagramSlidesDemo.jsx |  2 +-
 znai-reactjs/src/doc-elements/Documentation.jsx     |  2 +-
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/znai-reactjs/eslint.config.mjs b/znai-reactjs/eslint.config.mjs
index a396464f0..1eb881b2b 100644
--- a/znai-reactjs/eslint.config.mjs
+++ b/znai-reactjs/eslint.config.mjs
@@ -9,7 +9,7 @@ import parser from '@typescript-eslint/parser';
 export default [
     // Ignore patterns
     {
-        ignores: ['dist', 'build', 'node_modules', 'public/**/*.js', '*.config.js'],
+        ignores: ['target', 'dist', 'build', 'node_modules', 'public/**/*.js', '*.config.js'],
     },
 
     // Base JavaScript configuration
@@ -96,6 +96,17 @@ export default [
             react,
             'react-hooks': reactHooks,
             'react-refresh': reactRefresh,
+        },
+        rules: {
+        // ... your existing rules
+        '@typescript-eslint/consistent-type-imports': [
+            'error',
+            {
+                prefer: 'type-imports',
+                disallowTypeAnnotations: false,
+                fixStyle: 'separate-type-imports'
+            }
+        ]
         }
     },
     // Special config for vitest.config.ts (and other config files)
diff --git a/znai-reactjs/src/doc-elements/DiagramSlidesDemo.jsx b/znai-reactjs/src/doc-elements/DiagramSlidesDemo.jsx
index 8aa1db33f..548ed09f4 100644
--- a/znai-reactjs/src/doc-elements/DiagramSlidesDemo.jsx
+++ b/znai-reactjs/src/doc-elements/DiagramSlidesDemo.jsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import React, {Component} from "react"
+import React from "react"
 import GraphVizSvg from './graphviz/GraphVizSvg'
 
 const testData = {
diff --git a/znai-reactjs/src/doc-elements/Documentation.jsx b/znai-reactjs/src/doc-elements/Documentation.jsx
index b129e94dc..28805813b 100644
--- a/znai-reactjs/src/doc-elements/Documentation.jsx
+++ b/znai-reactjs/src/doc-elements/Documentation.jsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import React, { Component } from "react";
+import React from "react";
 import * as Promise from "promise";
 
 import { themeRegistry } from "../theme/ThemeRegistry";

From 056fb769a872a37c5dcfc1facacd6e072ae4be08 Mon Sep 17 00:00:00 2001
From: antoine <antoine.levy-lambert@ny.email.gs.com>
Date: Thu, 11 Dec 2025 14:20:46 -0800
Subject: [PATCH 03/12] change the eslint.config.mjs to say we do not want to
 use import type.

---
 znai-reactjs/eslint.config.mjs                           | 9 ++++-----
 znai-reactjs/package.json                                | 3 ++-
 .../src/components/DismissableErrorIndicators.demo.tsx   | 2 +-
 .../src/doc-elements/charts/EchartReactWrapper.tsx       | 4 ++--
 znai-reactjs/src/doc-elements/columns/Columns.tsx        | 2 +-
 .../doc-elements/tracking/DocumentationTracking.test.ts  | 2 +-
 .../doc-elements/tracking/HttpDocumentationTracking.ts   | 2 +-
 znai-reactjs/tsconfig.json                               | 2 +-
 8 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/znai-reactjs/eslint.config.mjs b/znai-reactjs/eslint.config.mjs
index 1eb881b2b..00a904aa0 100644
--- a/znai-reactjs/eslint.config.mjs
+++ b/znai-reactjs/eslint.config.mjs
@@ -84,7 +84,7 @@ export default [
                 ecmaVersion: 2020,
                 sourceType: 'module',
                 ecmaFeatures: {jsx: true},
-                project: './tsconfig.app.json',  // Important for type-aware rules
+                project: './tsconfig.json',  // Important for type-aware rules
             },
             globals: {
                 ...globals.browser,
@@ -102,9 +102,8 @@ export default [
         '@typescript-eslint/consistent-type-imports': [
             'error',
             {
-                prefer: 'type-imports',
-                disallowTypeAnnotations: false,
-                fixStyle: 'separate-type-imports'
+                prefer: 'no-type-imports',
+                disallowTypeAnnotations: false
             }
         ]
         }
@@ -117,7 +116,7 @@ export default [
             parserOptions: {
                 ecmaVersion: 2020,
                 sourceType: 'module',
-                project: './tsconfig.node.json',  // Use node tsconfig
+                project: './tsconfig.json',  // Use node tsconfig
             },
             globals: {
                 ...globals.node,  // Node globals instead of browser
diff --git a/znai-reactjs/package.json b/znai-reactjs/package.json
index d5c5b9274..4660f49b5 100644
--- a/znai-reactjs/package.json
+++ b/znai-reactjs/package.json
@@ -58,11 +58,12 @@
     "vite": "npm:rolldown-vite@7.1.14"
   },
   "scripts": {
+    "prebuild": "npm run lint",
     "dev": "vite",
     "build": "vite build",
     "test": "vitest --config ./vitest.config.ts",
     "test:watch": "vitest --config ./vitest.config.ts --watch",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 47",
     "preview": "vite preview"
   },
   "proxy": "http://localhost:3334/",
diff --git a/znai-reactjs/src/components/DismissableErrorIndicators.demo.tsx b/znai-reactjs/src/components/DismissableErrorIndicators.demo.tsx
index 39444769c..dddd00100 100644
--- a/znai-reactjs/src/components/DismissableErrorIndicators.demo.tsx
+++ b/znai-reactjs/src/components/DismissableErrorIndicators.demo.tsx
@@ -16,7 +16,7 @@
 
 import React from "react";
 
-import type { Registry } from "react-component-viewer";
+import { Registry } from "react-component-viewer";
 import { DismissableErrorIndicators, errorNotifications } from "./DismissableErrorIndicators";
 
 export function dismissableErrorIndicatorsDemo(registry: Registry) {
diff --git a/znai-reactjs/src/doc-elements/charts/EchartReactWrapper.tsx b/znai-reactjs/src/doc-elements/charts/EchartReactWrapper.tsx
index c9d4d5dd8..4a3079273 100644
--- a/znai-reactjs/src/doc-elements/charts/EchartReactWrapper.tsx
+++ b/znai-reactjs/src/doc-elements/charts/EchartReactWrapper.tsx
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import React, {type MutableRefObject, type RefObject, useEffect, useRef } from "react";
+import React, { MutableRefObject, RefObject, useEffect, useRef } from "react";
 import {EChartsType} from "echarts/types/dist/shared";
-import { configuredEcharts, type EchartCommonProps } from "./EchartCommon";
+import { configuredEcharts, EchartCommonProps } from "./EchartCommon";
 
 import {PresentationProps} from "../presentation/PresentationProps";
 
diff --git a/znai-reactjs/src/doc-elements/columns/Columns.tsx b/znai-reactjs/src/doc-elements/columns/Columns.tsx
index 63cd700da..e0b4470af 100644
--- a/znai-reactjs/src/doc-elements/columns/Columns.tsx
+++ b/znai-reactjs/src/doc-elements/columns/Columns.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import React, {type CSSProperties } from "react";
+import React, { CSSProperties } from "react";
 
 import { useIsMobile } from "../../theme/ViewPortContext";
 
diff --git a/znai-reactjs/src/doc-elements/tracking/DocumentationTracking.test.ts b/znai-reactjs/src/doc-elements/tracking/DocumentationTracking.test.ts
index 2aefd5d75..ff1adfe84 100644
--- a/znai-reactjs/src/doc-elements/tracking/DocumentationTracking.test.ts
+++ b/znai-reactjs/src/doc-elements/tracking/DocumentationTracking.test.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import type { DocumentationTrackingListener } from "./DocumentationTracking";
+import { DocumentationTrackingListener } from "./DocumentationTracking";
 import { DocumentationTracking } from "./DocumentationTracking";
 
 interface CallRecord {
diff --git a/znai-reactjs/src/doc-elements/tracking/HttpDocumentationTracking.ts b/znai-reactjs/src/doc-elements/tracking/HttpDocumentationTracking.ts
index e0a673402..3cf10587d 100644
--- a/znai-reactjs/src/doc-elements/tracking/HttpDocumentationTracking.ts
+++ b/znai-reactjs/src/doc-elements/tracking/HttpDocumentationTracking.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import type { DocumentationTrackingListener } from "./DocumentationTracking";
+import { DocumentationTrackingListener } from "./DocumentationTracking";
 import { getDocId, getDocMeta } from "../../structure/docMeta";
 
 export interface TrackingEvent {
diff --git a/znai-reactjs/tsconfig.json b/znai-reactjs/tsconfig.json
index aa7fa8dc7..ff5d675c4 100644
--- a/znai-reactjs/tsconfig.json
+++ b/znai-reactjs/tsconfig.json
@@ -27,5 +27,5 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["src", "vite.config.ts"]
+  "include": ["src", "vite.config.ts", "vitest.config.ts"]
 }

From e7ac69f26acc828bfe4fa8fbf9cca1fb58b37d16 Mon Sep 17 00:00:00 2001
From: antoine <antoine.levy-lambert@ny.email.gs.com>
Date: Tue, 16 Dec 2025 16:58:43 -0800
Subject: [PATCH 04/12] eliminate warnings

---
 znai-reactjs/eslint.config.mjs                |  12 +-
 znai-reactjs/package.json                     |   2 +-
 znai-reactjs/src/App.jsx                      |  18 +--
 znai-reactjs/src/diff/PageDiff.test.js        |   2 +-
 .../doc-elements/DefaultElementsLibrary.jsx   |  36 +++--
 .../src/doc-elements/asciinema/Asciinema.jsx  |  15 +-
 .../src/doc-elements/bullets/BulletList.jsx   |  65 +--------
 .../src/doc-elements/bullets/ListItem.jsx     |   2 +-
 .../src/doc-elements/bullets/bulletUtils.js   |  66 +++++++++
 .../doc-elements/bullets/bulletUtils.test.js  |   2 +-
 .../bullets/kinds/DefaultBulletList.jsx       |   2 +-
 .../src/doc-elements/bullets/kinds/Grid.jsx   |   2 +-
 .../bullets/kinds/HorizontalStripes.jsx       |   2 +-
 .../bullets/kinds/LeftRightTimeLine.jsx       |   2 +-
 .../bullets/kinds/RevealBoxes.jsx             |   2 +-
 .../src/doc-elements/bullets/kinds/Steps.jsx  |   2 +-
 .../src/doc-elements/bullets/kinds/Venn.jsx   |   2 +-
 .../src/doc-elements/cli/CliOutput.demo.jsx   |   2 +-
 .../src/doc-elements/cli/CliOutput.jsx        |  20 +--
 .../src/doc-elements/cli/cliOutputUtil.ts     |  36 +++++
 .../code-snippets/SimpleCodeSnippet.jsx       |   2 +-
 .../doc-elements/code-snippets/Snippet.jsx    |  86 +----------
 .../code-snippets/SnippetContainer.jsx        |   2 +-
 .../code-snippets/codeUtils.test.jsx          |   4 +-
 .../code-snippets/snippetUtils.ts             | 133 ++++++++++++++++++
 znai-reactjs/src/doc-elements/components.ts   |  24 ++++
 .../demo-utils/PresentationDemo.jsx           |   5 +-
 .../src/doc-elements/doc-utils/DocUtils.jsx   |  17 +--
 .../graphviz/GraphVizReactElementsBuilder.jsx |   5 +-
 .../graphviz/PresentationGraphVizSvg.jsx      |   4 +-
 .../images/AnnotatedImageEditor.jsx           |   2 +-
 .../images/annotations/StaticAnnotation.jsx   |  12 +-
 .../doc-elements/images/shapes/Highlight.jsx  |   2 +-
 .../doc-elements/json/PresentationJson.jsx    |   2 +-
 .../doc-elements/jupyter/JupyterHtmlCell.jsx  |   2 +-
 .../markdown/MarkdownAndResult.jsx            |   2 +-
 znai-reactjs/src/doc-elements/page/Page.jsx   |   2 +-
 .../src/doc-elements/pageContentProcessor.js  |   2 +-
 .../src/doc-elements/quote/BlockQuote.jsx     |   1 +
 .../src/doc-elements/svg/EmbeddedSvg.jsx      |   2 +-
 znai-reactjs/src/doc-elements/svg/Svg.jsx     |   3 +-
 znai-reactjs/src/doc-elements/tabs/Tabs.jsx   |   3 +-
 .../doc-elements/test-results/RestPayload.jsx |   2 +-
 .../text-selection/selectionUtils.js          |   2 +-
 .../src/doc-elements/xml/PresentationXml.jsx  |   3 +-
 45 files changed, 359 insertions(+), 257 deletions(-)
 create mode 100644 znai-reactjs/src/doc-elements/cli/cliOutputUtil.ts
 create mode 100644 znai-reactjs/src/doc-elements/code-snippets/snippetUtils.ts
 create mode 100644 znai-reactjs/src/doc-elements/components.ts

diff --git a/znai-reactjs/eslint.config.mjs b/znai-reactjs/eslint.config.mjs
index 00a904aa0..ae5a9876e 100644
--- a/znai-reactjs/eslint.config.mjs
+++ b/znai-reactjs/eslint.config.mjs
@@ -71,7 +71,10 @@ export default [
             ],
 
             // Custom rules
-            'no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+            'no-unused-vars': ['warn', {
+                argsIgnorePattern: '^_',
+                varsIgnorePattern: '^_'
+            }],
             'no-console': ['warn', { allow: ['warn', 'error'] }],
         },
     },
@@ -148,4 +151,11 @@ export default [
             },
         },
     },
+    {
+        files: ['**/*.demo.{js,jsx,ts,tsx}', '**/*.stories.{js,jsx,ts,tsx}'],
+        rules: {
+            'react-refresh/only-export-components': 'off',
+            'react/display-name': 'off', // Often useful for demos too
+        },
+    },
 ];
\ No newline at end of file
diff --git a/znai-reactjs/package.json b/znai-reactjs/package.json
index 4660f49b5..a3c405556 100644
--- a/znai-reactjs/package.json
+++ b/znai-reactjs/package.json
@@ -63,7 +63,7 @@
     "build": "vite build",
     "test": "vitest --config ./vitest.config.ts",
     "test:watch": "vitest --config ./vitest.config.ts --watch",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 47",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives",
     "preview": "vite preview"
   },
   "proxy": "http://localhost:3334/",
diff --git a/znai-reactjs/src/App.jsx b/znai-reactjs/src/App.jsx
index 2cf310b71..1649bdfa7 100644
--- a/znai-reactjs/src/App.jsx
+++ b/znai-reactjs/src/App.jsx
@@ -264,31 +264,31 @@ dropDowns.add("Theme").addItem("Default", "Alt 1").addItem("Dark", "Alt 2").onSe
 
 const documentationTracker = {
   onPageOpen(pageId) {
-    console.log("onPageOpen", pageId);
+    console.warn("onPageOpen", pageId);
   },
   onLinkClick(currentPageId, url) {
-    console.log("onLinkClick", currentPageId, url);
+    console.warn("onLinkClick", currentPageId, url);
   },
   onNextPage(currentPageId) {
-    console.log("onNextPage", currentPageId);
+    console.warn("onNextPage", currentPageId);
   },
   onPrevPage(currentPageId) {
-    console.log("onPrevPage", currentPageId);
+    console.warn("onPrevPage", currentPageId);
   },
   onScrollToSection(currentPageId, sectionIdTitle) {
-    console.log("onScrollToSection", currentPageId, sectionIdTitle);
+    console.warn("onScrollToSection", currentPageId, sectionIdTitle);
   },
   onTocItemSelect(currentPageId, tocItem) {
-    console.log("onTocItemSelect", currentPageId, tocItem);
+    console.warn("onTocItemSelect", currentPageId, tocItem);
   },
   onSearchResultSelect(currentPageId, query, selectedPageId) {
-    console.log("onSearchResultSelect", currentPageId, query, selectedPageId);
+    console.warn("onSearchResultSelect", currentPageId, query, selectedPageId);
   },
   onInteraction(currentPageId, type, id) {
-    console.log("onInteraction", currentPageId, type, id);
+    console.warn("onInteraction", currentPageId, type, id);
   },
   onPresentationOpen(currentPageId) {
-    console.log("onPresentationOpen", currentPageId);
+    console.warn("onPresentationOpen", currentPageId);
   },
 };
 
diff --git a/znai-reactjs/src/diff/PageDiff.test.js b/znai-reactjs/src/diff/PageDiff.test.js
index d737c70e5..32d35ab7d 100644
--- a/znai-reactjs/src/diff/PageDiff.test.js
+++ b/znai-reactjs/src/diff/PageDiff.test.js
@@ -49,6 +49,6 @@ describe('Page Diff', () => {
         right.add('node6', 'of lines')
 
         const result = Diff.diffArrays(left.list, right.list, {comparator: compareListEntry})
-        console.log(JSON.stringify(result, null, 2))
+        console.warn(JSON.stringify(result, null, 2))
     })
 })
\ No newline at end of file
diff --git a/znai-reactjs/src/doc-elements/DefaultElementsLibrary.jsx b/znai-reactjs/src/doc-elements/DefaultElementsLibrary.jsx
index 9d8ca896c..d85d74892 100644
--- a/znai-reactjs/src/doc-elements/DefaultElementsLibrary.jsx
+++ b/znai-reactjs/src/doc-elements/DefaultElementsLibrary.jsx
@@ -28,9 +28,11 @@ import PageTitle from './page/PageTitle'
 import {SectionTitle} from './default-elements/SectionTitle'
 import {presentationSectionHandler, Section} from './default-elements/Section'
 import {BlockQuote, presentationBlockQuoteHandler} from './quote/BlockQuote'
-import {presentationSnippetHandler, Snippet} from './code-snippets/Snippet'
+import {presentationSnippetHandler} from './code-snippets/snippetUtils.ts'
+import {Snippet} from './code-snippets/Snippet'
 import {InlinedCode} from './code-snippets/InlinedCode'
-import {BulletList, presentationBulletListHandler} from './bullets/BulletList'
+import {BulletList} from './bullets/BulletList'
+import {presentationBulletListHandler} from './bullets/bulletUtils.js'
 import CustomReactJSComponent from './custom/CustomReactJSComponent'
 import Anchor from './default-elements/Anchor'
 import Link from './default-elements/Link'
@@ -57,7 +59,8 @@ import Mermaid from './mermaid/Mermaid'
 import {EchartGeneric, presentationEchartHandler} from "./charts/EchartGeneric";
 import Image from './images/Image'
 import {CliCommand, presentationCliCommandHandler} from './cli/CliCommand'
-import {CliOutput, presentationCliOutput} from './cli/CliOutput'
+import {CliOutput} from './cli/CliOutput'
+import {presentationCliOutput} from './cli/cliOutputUtil.ts'
 import presentationAnnotatedImageHandler from './images/PresentationAnnotatedImage'
 import presentationGraphVizHandler from './graphviz/PresentationGraphVizFlow'
 import {MarkdownAndResult, presentationMarkdownAndResultHandler} from './markdown/MarkdownAndResult'
@@ -91,17 +94,15 @@ import { FootnoteReference } from "./footnote/FootnoteReference";
 import { EmbeddedHtml } from "./html/EmbeddedHtml";
 import { Asciinema } from "./asciinema/Asciinema";
 import { ReadMore } from "./read-more/ReadMore.js";
+import { withDisplayName } from "./components.ts";
 
 const library = {}
 const presentationElementHandlers = {}
 
 library.DocElement = DocElement
-library.Emphasis = (props) => (<span className="emphasis"><props.elementsLibrary.DocElement {...props}/></span>)
-library.Emphasis.displayName = "Emphasis"
-library.StrongEmphasis = (props) => (<span className="strong-emphasis"><props.elementsLibrary.DocElement {...props}/></span>)
-library.StrongEmphasis.displayName = "StrongEmphasis"
-library.StrikeThrough = (props) => (<del className="strike-through"><props.elementsLibrary.DocElement {...props}/></del>)
-library.StrikeThrough.displayName = "StrikeThrough"
+library.Emphasis = withDisplayName("Emphasis")((props) => (<span className="emphasis"><props.elementsLibrary.DocElement {...props}/></span>))
+library.StrongEmphasis = withDisplayName("StrongEmphasis")((props) => (<span className="strong-emphasis"><props.elementsLibrary.DocElement {...props}/></span>))
+library.StrikeThrough = withDisplayName("StrikeThrough")((props) => (<del className="strike-through"><props.elementsLibrary.DocElement {...props}/></del>))
 library.Link = Link
 library.Anchor = Anchor
 
@@ -119,12 +120,9 @@ presentationElementHandlers.BlockQuote = presentationBlockQuoteHandler
 
 library.SimpleText = SimpleText
 library.InlinedCode = InlinedCode
-library.SoftLineBreak = () => <span> </span>
-library.SoftLineBreak.displayName = "SoftLineBreak"
-library.HardLineBreak = () => <br />
-library.HardLineBreak.displayName = "HardLineBreak"
-library.ThematicBreak = () => <hr />
-library.ThematicBreak.displayName = "ThematicBreak"
+library.SoftLineBreak = withDisplayName("SoftLineBreak")(() => <span> </span>)
+library.HardLineBreak = withDisplayName("HardLineBreak")(() => <br />)
+library.ThematicBreak = withDisplayName("ThematicBreak")(() => <hr />)
 
 library.ApiLinkedTextBlock = ApiLinkedTextBlock;
 
@@ -133,8 +131,7 @@ presentationElementHandlers.Snippet = presentationSnippetHandler
 
 library.CustomReactJSComponent = CustomReactJSComponent
 
-library.EmptyBlock = () => (<div/>)
-library.EmptyBlock.displayName = "EmptyBlock"
+library.EmptyBlock = withDisplayName("EmptyBlock")(() => (<div/>))
 
 library.LangClass = wrappedInContentBlock(LangClass)
 library.LangFunction = wrappedInContentBlock(LangFunction)
@@ -260,13 +257,12 @@ library.Asciinema = Asciinema
  * @param Component component to wrap
  */
 function wrappedInContentBlock(Component) {
-    const WrappedComponent = (props) => (
+    return withDisplayName(`ContentBlock(${Component.displayName || Component.name || 'Component'})`) (
+        (props) =>
         <div className="content-block">
             <Component {...props}/>
         </div>
     );
-    WrappedComponent.displayName = `ContentBlock(${Component.displayName || Component.name || 'Component'})`;
-    return WrappedComponent;
 }
 
 themeRegistry.registerAsBase(new Theme({
diff --git a/znai-reactjs/src/doc-elements/asciinema/Asciinema.jsx b/znai-reactjs/src/doc-elements/asciinema/Asciinema.jsx
index 7cda13e99..f5e4adf9d 100644
--- a/znai-reactjs/src/doc-elements/asciinema/Asciinema.jsx
+++ b/znai-reactjs/src/doc-elements/asciinema/Asciinema.jsx
@@ -32,13 +32,13 @@ export function Asciinema({src, startAt = 0, poster = undefined, cols = undefine
     }
   }
 
-  function recreatePlayer() {
-    destroyPlayer();
-    playerRef.current = AsciinemaPlayer.create(src, containerRef.current,
-      {preload: true, fit: false, startAt, poster, cols, rows, idleTimeLimit, speed});
-  }
-
   useEffect(() => {
+    function recreatePlayer() {
+      destroyPlayer();
+      playerRef.current = AsciinemaPlayer.create(src, containerRef.current,
+        {preload: true, fit: false, startAt, poster, cols, rows, idleTimeLimit, speed});
+    }
+
     if (containerRef.current) {
         recreatePlayer();
     }
@@ -49,8 +49,7 @@ export function Asciinema({src, startAt = 0, poster = undefined, cols = undefine
         playerRef.current = null;
       }
     };
-  }, [src, startAt, poster, cols, rows, idleTimeLimit, speed, containerRef]);
-
+  }, [src, startAt, poster, cols, rows, idleTimeLimit, speed]);
 
   return <div className="content-block znai-asciinema" ref={containerRef} />;
 }
\ No newline at end of file
diff --git a/znai-reactjs/src/doc-elements/bullets/BulletList.jsx b/znai-reactjs/src/doc-elements/bullets/BulletList.jsx
index 06a7006bf..1d4a518e5 100644
--- a/znai-reactjs/src/doc-elements/bullets/BulletList.jsx
+++ b/znai-reactjs/src/doc-elements/bullets/BulletList.jsx
@@ -21,15 +21,9 @@ import './BulletList.css'
 import DefaultBulletList from './kinds/DefaultBulletList'
 import LeftRightTimeLine from './kinds/LeftRightTimeLine'
 import Venn from './kinds/Venn'
-import RevealBoxes from './kinds/RevealBoxes'
 import Steps from './kinds/Steps'
-import HorizontalStripes from './kinds/HorizontalStripes'
-import Grid from './kinds/Grid'
-
-import {isAllAtOnce} from '../meta/meta'
-
+import {presentationListType, presentationTypes, listType, valueByIdWithWarning} from './bulletUtils.js'
 const types = {LeftRightTimeLine, Venn, Steps}
-const presentationTypes = {...types, RevealBoxes, HorizontalStripes, Grid}
 
 const BulletList = (props) => {
     const type = listType(props, 'bulletListType')
@@ -57,61 +51,6 @@ const PresentationBulletList = (props) => {
     return <PresentationBullets isPresentation={isPresentation} {...props}/>
 }
 
-const presentationNumberOfSlides = (props) => {
-    const {content, meta} = props
-
-    const type = presentationListType(props)
-    return (type === null || isAllAtOnce(meta)) ? 1 : content.length
-}
-
-function valueByIdWithWarning(dict, type) {
-    if (!Object.hasOwn(dict, type)) {
-        console.warn("can't find bullets list type: " + type)
-        return NoBullets
-    }
-
-    return dict[type]
-}
-
-function presentationListType(props) {
-    return listType(props, 'bulletListType') ||
-        listType(props, 'presentationBulletListType')
-}
-
-function listType(props, key) {
-    if (! Object.hasOwn(props,'meta')) {
-        return null
-    }
-
-    const meta = props.meta
-    if (! Object.hasOwn(meta, key)) {
-        return null
-    }
-
-    if (meta[key] === "") {
-        return null
-    }
-
-    return meta[key]
-}
-
-function slideInfoProvider(props) {
-    const type = presentationListType(props)
-    if (!type) {
-        return {}
-    }
-
-    const Bullets = valueByIdWithWarning(presentationTypes, type)
-
-    return {
-        isSlideCentered: !Bullets.isPresentationFullScreen,
-        isSlidePadded: !Bullets.isPresentationFullScreen,
-        isSlideScaled: !Bullets.isPresentationFullScreen,
-    }
-}
 
-const presentationBulletListHandler = {component: PresentationBulletList,
-    numberOfSlides: presentationNumberOfSlides,
-    slideInfoProvider: slideInfoProvider}
 
-export {BulletList, presentationBulletListHandler}
+export {BulletList, NoBullets, PresentationBulletList}
diff --git a/znai-reactjs/src/doc-elements/bullets/ListItem.jsx b/znai-reactjs/src/doc-elements/bullets/ListItem.jsx
index 738a07410..e8d3ac238 100644
--- a/znai-reactjs/src/doc-elements/bullets/ListItem.jsx
+++ b/znai-reactjs/src/doc-elements/bullets/ListItem.jsx
@@ -18,7 +18,7 @@
 import React from 'react'
 
 import { Icon } from '../icons/Icon'
-import {startsWithIcon, removeIcon, extractIconProps} from './bulletUtils'
+import {startsWithIcon, removeIcon, extractIconProps} from './bulletUtils.js'
 
 import './ListItem.css'
 
diff --git a/znai-reactjs/src/doc-elements/bullets/bulletUtils.js b/znai-reactjs/src/doc-elements/bullets/bulletUtils.js
index 5229dcc1d..c472ffcda 100644
--- a/znai-reactjs/src/doc-elements/bullets/bulletUtils.js
+++ b/znai-reactjs/src/doc-elements/bullets/bulletUtils.js
@@ -15,6 +15,13 @@
  * limitations under the License.
  */
 
+import {PresentationBulletList, NoBullets} from "./BulletList.jsx";
+import {isAllAtOnce} from "../meta/meta.js";
+import RevealBoxes from "./kinds/RevealBoxes.jsx";
+import HorizontalStripes from "./kinds/HorizontalStripes.jsx";
+import Grid from "./kinds/Grid.jsx";
+const presentationTypes = {RevealBoxes, HorizontalStripes, Grid}
+
 export function startsWithIcon(content) {
     return content &&
             content.length && content[0].type === 'Paragraph' &&
@@ -96,3 +103,62 @@ function isEmphasis(docElement) {
 function capitalizeFirstLetter(text) {
     return text.length > 1 ? text.charAt(0).toUpperCase() + text.slice(1) : text;
 }
+
+export const presentationBulletListHandler = {component: PresentationBulletList,
+    numberOfSlides: presentationNumberOfSlides,
+    slideInfoProvider: slideInfoProvider}
+
+const presentationNumberOfSlides = (props) => {
+    const {content, meta} = props
+
+    const type = presentationListType(props)
+    return (type === null || isAllAtOnce(meta)) ? 1 : content.length
+}
+
+function valueByIdWithWarning(dict, type) {
+    if (!Object.hasOwn(dict, type)) {
+        console.warn("can't find bullets list type: " + type)
+        return NoBullets
+    }
+
+    return dict[type]
+}
+
+function presentationListType(props) {
+    return listType(props, 'bulletListType') ||
+        listType(props, 'presentationBulletListType')
+}
+
+function listType(props, key) {
+    if (! Object.hasOwn(props,'meta')) {
+        return null
+    }
+
+    const meta = props.meta
+    if (! Object.hasOwn(meta, key)) {
+        return null
+    }
+
+    if (meta[key] === "") {
+        return null
+    }
+
+    return meta[key]
+}
+
+function slideInfoProvider(props) {
+    const type = presentationListType(props)
+    if (!type) {
+        return {}
+    }
+
+    const Bullets = valueByIdWithWarning(presentationTypes, type)
+
+    return {
+        isSlideCentered: !Bullets.isPresentationFullScreen,
+        isSlidePadded: !Bullets.isPresentationFullScreen,
+        isSlideScaled: !Bullets.isPresentationFullScreen,
+    }
+}
+
+export {listType, presentationListType, presentationTypes, valueByIdWithWarning}
\ No newline at end of file
diff --git a/znai-reactjs/src/doc-elements/bullets/bulletUtils.test.js b/znai-reactjs/src/doc-elements/bullets/bulletUtils.test.js
index 7f3d43767..e93e13316 100644
--- a/znai-reactjs/src/doc-elements/bullets/bulletUtils.test.js
+++ b/znai-reactjs/src/doc-elements/bullets/bulletUtils.test.js
@@ -21,7 +21,7 @@ import {
     removeIcon,
     extractTextLinesEmphasisOnly,
     extractTextLinesEmphasisOrFull, extractIconIds
-} from './bulletUtils'
+} from './bulletUtils.js'
 
 const itemContentWithIcon = buildItemContentWithIcon()
 const lowerCasedItemContent = buildLowerCasedItemContent()
diff --git a/znai-reactjs/src/doc-elements/bullets/kinds/DefaultBulletList.jsx b/znai-reactjs/src/doc-elements/bullets/kinds/DefaultBulletList.jsx
index b984d989d..9b67b3d30 100644
--- a/znai-reactjs/src/doc-elements/bullets/kinds/DefaultBulletList.jsx
+++ b/znai-reactjs/src/doc-elements/bullets/kinds/DefaultBulletList.jsx
@@ -16,7 +16,7 @@
  */
 
 import React from 'react'
-import {startsWithIcon} from '../bulletUtils'
+import {startsWithIcon} from '../bulletUtils.js'
 
 const DefaultBulletList = (props) => {
     const {tight, content} = props
diff --git a/znai-reactjs/src/doc-elements/bullets/kinds/Grid.jsx b/znai-reactjs/src/doc-elements/bullets/kinds/Grid.jsx
index 6a5675e1a..35506f57f 100644
--- a/znai-reactjs/src/doc-elements/bullets/kinds/Grid.jsx
+++ b/znai-reactjs/src/doc-elements/bullets/kinds/Grid.jsx
@@ -17,7 +17,7 @@
 
 import React from 'react'
 
-import {extractTextLinesEmphasisOrFull} from '../bulletUtils'
+import {extractTextLinesEmphasisOrFull} from '../bulletUtils.js'
 import {isAllAtOnce} from '../../meta/meta'
 
 import './Grid.css'
diff --git a/znai-reactjs/src/doc-elements/bullets/kinds/HorizontalStripes.jsx b/znai-reactjs/src/doc-elements/bullets/kinds/HorizontalStripes.jsx
index 5c08874c7..571b649ce 100644
--- a/znai-reactjs/src/doc-elements/bullets/kinds/HorizontalStripes.jsx
+++ b/znai-reactjs/src/doc-elements/bullets/kinds/HorizontalStripes.jsx
@@ -17,7 +17,7 @@
 
 import React from 'react'
 
-import {extractIconIds, extractTextLinesEmphasisOrFull} from '../bulletUtils'
+import {extractIconIds, extractTextLinesEmphasisOrFull} from '../bulletUtils.js'
 import {isAllAtOnce} from '../../meta/meta'
 
 import {Icon} from "../../icons/Icon";
diff --git a/znai-reactjs/src/doc-elements/bullets/kinds/LeftRightTimeLine.jsx b/znai-reactjs/src/doc-elements/bullets/kinds/LeftRightTimeLine.jsx
index 1247e3236..1534be545 100644
--- a/znai-reactjs/src/doc-elements/bullets/kinds/LeftRightTimeLine.jsx
+++ b/znai-reactjs/src/doc-elements/bullets/kinds/LeftRightTimeLine.jsx
@@ -18,7 +18,7 @@
 import React from 'react'
 import SvgWithCalculatedSize from './SvgWithCalculatedSize'
 
-import {extractTextLinesEmphasisOrFull, extractTextLines} from '../bulletUtils'
+import {extractTextLinesEmphasisOrFull, extractTextLines} from '../bulletUtils.js'
 import {isAllAtOnce} from '../../meta/meta'
 
 const stepSize = 15
diff --git a/znai-reactjs/src/doc-elements/bullets/kinds/RevealBoxes.jsx b/znai-reactjs/src/doc-elements/bullets/kinds/RevealBoxes.jsx
index d0433ca0c..3e329d669 100644
--- a/znai-reactjs/src/doc-elements/bullets/kinds/RevealBoxes.jsx
+++ b/znai-reactjs/src/doc-elements/bullets/kinds/RevealBoxes.jsx
@@ -16,7 +16,7 @@
 
 import React from 'react'
 
-import {extractTextLinesEmphasisOrFull} from '../bulletUtils'
+import {extractTextLinesEmphasisOrFull} from '../bulletUtils.js'
 import {isAllAtOnce} from '../../meta/meta'
 
 import './RevealBoxes.css'
diff --git a/znai-reactjs/src/doc-elements/bullets/kinds/Steps.jsx b/znai-reactjs/src/doc-elements/bullets/kinds/Steps.jsx
index b924717cc..51cefd06b 100644
--- a/znai-reactjs/src/doc-elements/bullets/kinds/Steps.jsx
+++ b/znai-reactjs/src/doc-elements/bullets/kinds/Steps.jsx
@@ -17,7 +17,7 @@
 
 import React from 'react'
 
-import {extractTextLines, extractTextLinesEmphasisOrFull} from '../bulletUtils'
+import {extractTextLines, extractTextLinesEmphasisOrFull} from '../bulletUtils.js'
 import {splitTextIntoLinesUsingThreshold} from '../../../utils/strings'
 import {isAllAtOnce} from '../../meta/meta'
 
diff --git a/znai-reactjs/src/doc-elements/bullets/kinds/Venn.jsx b/znai-reactjs/src/doc-elements/bullets/kinds/Venn.jsx
index 5e5303fff..7744f491a 100644
--- a/znai-reactjs/src/doc-elements/bullets/kinds/Venn.jsx
+++ b/znai-reactjs/src/doc-elements/bullets/kinds/Venn.jsx
@@ -16,7 +16,7 @@
  */
 
 import React from 'react'
-import {extractTextLines} from '../bulletUtils'
+import {extractTextLines} from '../bulletUtils.js'
 
 import SvgWithCalculatedSize from './SvgWithCalculatedSize'
 
diff --git a/znai-reactjs/src/doc-elements/cli/CliOutput.demo.jsx b/znai-reactjs/src/doc-elements/cli/CliOutput.demo.jsx
index b76c733f9..56d9bce23 100644
--- a/znai-reactjs/src/doc-elements/cli/CliOutput.demo.jsx
+++ b/znai-reactjs/src/doc-elements/cli/CliOutput.demo.jsx
@@ -16,7 +16,7 @@
 
 import React from "react";
 
-import {CliOutput} from "./CliOutput";
+import {CliOutput} from "./cliOutputUtil.js";
 
 export function cliOutputDemo(registry) {
     registry
diff --git a/znai-reactjs/src/doc-elements/cli/CliOutput.jsx b/znai-reactjs/src/doc-elements/cli/CliOutput.jsx
index f8c7f3efb..e9918e435 100644
--- a/znai-reactjs/src/doc-elements/cli/CliOutput.jsx
+++ b/znai-reactjs/src/doc-elements/cli/CliOutput.jsx
@@ -23,8 +23,6 @@ import {convertAnsiToTokenLines} from "./ansiToTokensConverter";
 
 import SimpleCodeSnippet from "../code-snippets/SimpleCodeSnippet";
 
-import {isAllAtOnce} from "../meta/meta";
-
 import './CliOutput.css';
 
 const CliOutput = ({lines, ...props}) => {
@@ -39,20 +37,4 @@ const CliOutput = ({lines, ...props}) => {
     )
 }
 
-const presentationCliOutput = {component: CliOutput,
-    numberOfSlides: (props) => {
-        return 1 + highlightNumberOfSlides(props) + (props.revealLineStop || []).length;
-    }
-}
-
-function highlightNumberOfSlides({meta, highlight}) {
-    highlight = highlight || []
-    if (isAllAtOnce(meta) && highlight.length > 0) {
-        return 1
-    }
-
-    return highlight.length
-}
-
-
-export {CliOutput, presentationCliOutput}
+export {CliOutput}
diff --git a/znai-reactjs/src/doc-elements/cli/cliOutputUtil.ts b/znai-reactjs/src/doc-elements/cli/cliOutputUtil.ts
new file mode 100644
index 000000000..8ec709fcb
--- /dev/null
+++ b/znai-reactjs/src/doc-elements/cli/cliOutputUtil.ts
@@ -0,0 +1,36 @@
+/*
+ * Copyright 2025 znai maintainers
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {CliOutput} from "./CliOutput";
+
+import {isAllAtOnce} from '../meta/meta'
+
+function highlightNumberOfSlides({meta, highlight}) {
+    highlight = highlight || []
+    if (isAllAtOnce(meta) && highlight.length > 0) {
+        return 1
+    }
+
+    return highlight.length
+}
+
+
+const presentationCliOutput = {component: CliOutput,
+    numberOfSlides: (props) => {
+        return 1 + highlightNumberOfSlides(props) + (props.revealLineStop || []).length;
+    }
+}
+
+export {presentationCliOutput}
\ No newline at end of file
diff --git a/znai-reactjs/src/doc-elements/code-snippets/SimpleCodeSnippet.jsx b/znai-reactjs/src/doc-elements/code-snippets/SimpleCodeSnippet.jsx
index 3ba5ade98..c5010559e 100644
--- a/znai-reactjs/src/doc-elements/code-snippets/SimpleCodeSnippet.jsx
+++ b/znai-reactjs/src/doc-elements/code-snippets/SimpleCodeSnippet.jsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import React, { Component } from "react";
+import React from "react";
 
 import { extractTextFromTokens, splitTokensIntoLines } from "./codeUtils";
 import LineOfTokens from "./LineOfTokens";
diff --git a/znai-reactjs/src/doc-elements/code-snippets/Snippet.jsx b/znai-reactjs/src/doc-elements/code-snippets/Snippet.jsx
index 61a808049..bf733543b 100644
--- a/znai-reactjs/src/doc-elements/code-snippets/Snippet.jsx
+++ b/znai-reactjs/src/doc-elements/code-snippets/Snippet.jsx
@@ -24,15 +24,12 @@ import {
   splitTokensIntoLines,
   trimComment,
 } from "./codeUtils";
-import { isAllAtOnce } from "../meta/meta";
-import { convertToList } from "../propsUtils";
 
 import SnippetContainer from "./SnippetContainer";
 import CodeSnippetWithCallouts from "./CodeSnippetWithCallouts";
 import SimpleCodeSnippet from "./SimpleCodeSnippet";
 
 import { parseCode } from "./codeParser";
-import { countNumberOfLines } from "../../utils/strings";
 
 import { SnippetBulletExplanations } from "./explanations/SnippetBulletExplanations";
 
@@ -104,69 +101,6 @@ function scrollToLineIdx({ isPresentation, slideIdx, numberOfVisibleLines }) {
   return numberOfVisibleLines * slideIdx;
 }
 
-const presentationSnippetHandler = {
-  component: Snippet,
-  numberOfSlides: ({
-    meta,
-    commentsType,
-    lang,
-    snippet,
-    tokens,
-    highlight,
-    revealLineStop,
-    numberOfVisibleLines = defaultNumberOfVisibleLines,
-  }) => {
-    const tokensToUse = parseCodeWithCompatibility({ lang, snippet, tokens });
-    const highlightAsList = convertToList(highlight);
-
-    if (commentsType === BULLETS_COMMENT_TYPE) {
-      return inlinedCommentsNumberOfSlides({ meta, tokens: tokensToUse });
-    }
-
-    const numberOfStopLines = (revealLineStop || []).length;
-    const numberOfScrolls = countNumberOfScrolls();
-
-    const hasFirstNoActionSlide =
-      highlightAsList.length > 0 ||
-      numberOfStopLines > 0 ||
-      (highlightAsList.length === 0 && numberOfStopLines === 0 && numberOfScrolls === 0);
-
-    return (
-      (hasFirstNoActionSlide ? 1 : 0) +
-      highlightNumberOfSlides({ meta, highlightAsList }) +
-      numberOfStopLines +
-      numberOfScrolls
-    );
-
-    function countNumberOfScrolls() {
-      const numberOfLines = countNumberOfLines(snippet);
-
-      if (numberOfLines <= numberOfVisibleLines) {
-        return 0;
-      }
-
-      return Math.ceil(numberOfLines / numberOfVisibleLines);
-    }
-  },
-  slideInfoProvider: ({ meta, commentsType, lang, snippet, tokens, slideIdx }) => {
-    const tokensToUse = parseCodeWithCompatibility({ lang, snippet, tokens });
-
-    if (isAllAtOnce(meta)) {
-      return {};
-    }
-
-    if (commentsType !== BULLETS_COMMENT_TYPE) {
-      return {};
-    }
-
-    const comments = tokensToUse.filter((t) => isCommentToken(t));
-
-    return {
-      slideVisibleNote: !comments.length ? null : slideIdx === 0 ? "" : comments[slideIdx - 1].content,
-    };
-  },
-};
-
 // TODO for backward compatibility with already built and deployed docs
 // remove once TSI rebuilds all the docs
 function parseCodeWithCompatibility({ lang, tokens, snippet }) {
@@ -177,24 +111,6 @@ function parseCodeWithCompatibility({ lang, tokens, snippet }) {
   return parseCode(lang, snippet);
 }
 
-function inlinedCommentsNumberOfSlides({ meta, tokens }) {
-  const comments = tokens.filter((t) => isCommentToken(t));
-
-  if (isAllAtOnce(meta) && comments.length > 0) {
-    return 2; // two slides: 1st - no highlights; 2nd - all highlighted at once
-  }
-
-  return comments.length + 1;
-}
-
-function highlightNumberOfSlides({ meta, highlightAsList }) {
-  if (isAllAtOnce(meta) && highlightAsList.length > 0) {
-    return 1;
-  }
-
-  return highlightAsList.length;
-}
-
 function buildCalloutsFromComments(lines) {
   const result = {};
   lines.forEach((line, lineIdx) => {
@@ -208,4 +124,4 @@ function buildCalloutsFromComments(lines) {
   return result;
 }
 
-export { Snippet, presentationSnippetHandler };
+export { Snippet };
\ No newline at end of file
diff --git a/znai-reactjs/src/doc-elements/code-snippets/SnippetContainer.jsx b/znai-reactjs/src/doc-elements/code-snippets/SnippetContainer.jsx
index fdba8ff20..3c57b63f6 100644
--- a/znai-reactjs/src/doc-elements/code-snippets/SnippetContainer.jsx
+++ b/znai-reactjs/src/doc-elements/code-snippets/SnippetContainer.jsx
@@ -143,7 +143,7 @@ class SnippetContainer extends React.Component {
     this.setupClipboard();
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
+  componentDidUpdate(prevProps, _prevState, _snapshot) {
     if (prevProps.collapsed !== this.props.collapsed) {
       this.setState({ collapsed: this.props.collapsed });
     }
diff --git a/znai-reactjs/src/doc-elements/code-snippets/codeUtils.test.jsx b/znai-reactjs/src/doc-elements/code-snippets/codeUtils.test.jsx
index 95011c831..d9838457c 100644
--- a/znai-reactjs/src/doc-elements/code-snippets/codeUtils.test.jsx
+++ b/znai-reactjs/src/doc-elements/code-snippets/codeUtils.test.jsx
@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect } from 'vitest';
 
 import {
     collapseCommentsAboveToMakeCommentOnTheCodeLine,
@@ -293,7 +293,7 @@ class MyClass {
 `)
         const lines = splitTokensIntoLines(tokens)
 
-        console.log(lines)
+        console.warn(lines)
     })
 
     describe('inlined comments', () => {
diff --git a/znai-reactjs/src/doc-elements/code-snippets/snippetUtils.ts b/znai-reactjs/src/doc-elements/code-snippets/snippetUtils.ts
new file mode 100644
index 000000000..b29a9a2bd
--- /dev/null
+++ b/znai-reactjs/src/doc-elements/code-snippets/snippetUtils.ts
@@ -0,0 +1,133 @@
+
+/*
+ * Copyright 2020 znai maintainers
+ * Copyright 2019 TWO SIGMA OPEN SOURCE, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { isCommentToken } from "./codeUtils";
+import { isAllAtOnce } from "../meta/meta";
+import { convertToList } from "../propsUtils";
+import { parseCode } from "./codeParser";
+import { countNumberOfLines } from "../../utils/strings";
+
+const defaultNumberOfVisibleLines = 25;
+const BULLETS_COMMENT_TYPE = "inline";
+
+// TODO for backward compatibility with already built and deployed docs
+// remove once TSI rebuilds all the docs
+function parseCodeWithCompatibility({ lang, tokens, snippet }: { lang: string; tokens?: any; snippet: string }) {
+  if (tokens) {
+    return tokens;
+  }
+
+  return parseCode(lang, snippet);
+}
+
+function inlinedCommentsNumberOfSlides({ meta, tokens }: { meta: any; tokens: any[] }) {
+  const comments = tokens.filter((t) => isCommentToken(t));
+
+  if (isAllAtOnce(meta) && comments.length > 0) {
+    return 2; // two slides: 1st - no highlights; 2nd - all highlighted at once
+  }
+
+  return comments.length + 1;
+}
+
+function highlightNumberOfSlides({ meta, highlightAsList }: { meta: any; highlightAsList: any[] }) {
+  if (isAllAtOnce(meta) && highlightAsList.length > 0) {
+    return 1;
+  }
+
+  return highlightAsList.length;
+}
+
+export const presentationSnippetHandler = {
+  component: null as any, // Will be set when imported
+  numberOfSlides: ({
+    meta,
+    commentsType,
+    lang,
+    snippet,
+    tokens,
+    highlight,
+    revealLineStop,
+    numberOfVisibleLines = defaultNumberOfVisibleLines,
+  }: {
+    meta: any;
+    commentsType?: string;
+    lang: string;
+    snippet: string;
+    tokens?: any;
+    highlight?: any;
+    revealLineStop?: any[];
+    numberOfVisibleLines?: number;
+  }) => {
+    const tokensToUse = parseCodeWithCompatibility({ lang, snippet, tokens });
+    const highlightAsList = convertToList(highlight);
+
+    if (commentsType === BULLETS_COMMENT_TYPE) {
+      return inlinedCommentsNumberOfSlides({ meta, tokens: tokensToUse });
+    }
+
+    const numberOfStopLines = (revealLineStop || []).length;
+    const numberOfScrolls = countNumberOfScrolls();
+
+    const hasFirstNoActionSlide =
+      highlightAsList.length > 0 ||
+      numberOfStopLines > 0 ||
+      (highlightAsList.length === 0 && numberOfStopLines === 0 && numberOfScrolls === 0);
+
+    return (
+      (hasFirstNoActionSlide ? 1 : 0) +
+      highlightNumberOfSlides({ meta, highlightAsList }) +
+      numberOfStopLines +
+      numberOfScrolls
+    );
+
+    function countNumberOfScrolls() {
+      const numberOfLines = countNumberOfLines(snippet);
+
+      if (numberOfLines <= numberOfVisibleLines) {
+        return 0;
+      }
+
+      return Math.ceil(numberOfLines / numberOfVisibleLines);
+    }
+  },
+  slideInfoProvider: ({ meta, commentsType, lang, snippet, tokens, slideIdx }: {
+    meta: any;
+    commentsType?: string;
+    lang: string;
+    snippet: string;
+    tokens?: any;
+    slideIdx: number;
+  }) => {
+    const tokensToUse = parseCodeWithCompatibility({ lang, snippet, tokens });
+
+    if (isAllAtOnce(meta)) {
+      return {};
+    }
+
+    if (commentsType !== BULLETS_COMMENT_TYPE) {
+      return {};
+    }
+
+    const comments = tokensToUse.filter((t: any) => isCommentToken(t));
+
+    return {
+      slideVisibleNote: !comments.length ? null : slideIdx === 0 ? "" : comments[slideIdx - 1].content,
+    };
+  },
+};
\ No newline at end of file
diff --git a/znai-reactjs/src/doc-elements/components.ts b/znai-reactjs/src/doc-elements/components.ts
new file mode 100644
index 000000000..5119ecc4c
--- /dev/null
+++ b/znai-reactjs/src/doc-elements/components.ts
@@ -0,0 +1,24 @@
+/*
+ * Copyright 2025 znai maintainers
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+function withDisplayName(displayName: string) {
+    return function(ComponentFunction: { displayName: string; }) {
+        ComponentFunction.displayName = displayName;
+        return ComponentFunction;
+    };
+}
+
+export {withDisplayName};
diff --git a/znai-reactjs/src/doc-elements/demo-utils/PresentationDemo.jsx b/znai-reactjs/src/doc-elements/demo-utils/PresentationDemo.jsx
index 0c9b36c04..24bf56b0f 100644
--- a/znai-reactjs/src/doc-elements/demo-utils/PresentationDemo.jsx
+++ b/znai-reactjs/src/doc-elements/demo-utils/PresentationDemo.jsx
@@ -20,6 +20,7 @@ import React from 'react'
 import {elementsLibrary, presentationElementHandlers} from '../DefaultElementsLibrary'
 import PresentationRegistry from '../presentation/PresentationRegistry'
 import Presentation from '../presentation/Presentation'
+import {withDisplayName} from '../components'
 
 const defaultDocMeta = {id: "znai", title: "Znai", type: "User Guide"}
 
@@ -35,9 +36,7 @@ export function createPresentationDemo(content, cfg = {docMeta: defaultDocMeta,
                           onPrevPage={noOp}/>
         );
     };
-
-    PresentationDemoComponent.displayName = 'PresentationDemo';
-    return PresentationDemoComponent;
+    return withDisplayName('PresentationDemo')(PresentationDemoComponent);
 }
 
 function noOp() {
diff --git a/znai-reactjs/src/doc-elements/doc-utils/DocUtils.jsx b/znai-reactjs/src/doc-elements/doc-utils/DocUtils.jsx
index b7356496a..3b6d4e0e0 100644
--- a/znai-reactjs/src/doc-elements/doc-utils/DocUtils.jsx
+++ b/znai-reactjs/src/doc-elements/doc-utils/DocUtils.jsx
@@ -13,9 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/* eslint-disable react-refresh/only-export-components */
 
 import React from 'react'
 
+import {withDisplayName} from '../components.ts'
 import './DocUtils.css'
 
 const DocUtilsDesc = WrapperOnly('doc-utils-desc content-block')
@@ -38,14 +40,13 @@ function DocUtilsField({elementsLibrary, content}) {
 }
 
 function WrapperOnly(className) {
-    const WrapperComponent = ({elementsLibrary, content}) => (
-        <div className={className}>
-            <elementsLibrary.DocElement elementsLibrary={elementsLibrary} content={content}/>
-        </div>
-    );
-
-    WrapperComponent.displayName = `WrapperOnly(${className})`;
-    return WrapperComponent;
+    return withDisplayName(`WrapperOnly(${className})`)(
+        ({elementsLibrary, content}) => (
+            <div className={className}>
+                <elementsLibrary.DocElement elementsLibrary={elementsLibrary} content={content}/>
+            </div>
+        )
+    )
 }
 export function registerDocUtilsElements(elementsLibrary) {
     const components = {
diff --git a/znai-reactjs/src/doc-elements/graphviz/GraphVizReactElementsBuilder.jsx b/znai-reactjs/src/doc-elements/graphviz/GraphVizReactElementsBuilder.jsx
index e772f72c5..2fc4c676f 100644
--- a/znai-reactjs/src/doc-elements/graphviz/GraphVizReactElementsBuilder.jsx
+++ b/znai-reactjs/src/doc-elements/graphviz/GraphVizReactElementsBuilder.jsx
@@ -22,6 +22,7 @@ import GvText from "./GvText"
 import GvPath from "./GvPath"
 import GvGroup from "./GvGroup"
 import {globalAssets} from "../global-assets/GlobalAssets"
+import {withDisplayName} from "../components.ts"
 
 export default class GraphVizReactElementsBuilder {
     constructor({diagram, idsToDisplay, idsToHighlight, urls}) {
@@ -177,9 +178,7 @@ export default class GraphVizReactElementsBuilder {
             case 'path': return GvPath
             case 'g': return GvGroup
             case 'title': {
-                const TitleComponent = () => <g/>;
-                TitleComponent.displayName = 'GraphVizTitle';
-                return TitleComponent;
+                return withDisplayName('GraphVizTitle')( () => <g/>)
             }
 
             default: return domNode.tagName
diff --git a/znai-reactjs/src/doc-elements/graphviz/PresentationGraphVizSvg.jsx b/znai-reactjs/src/doc-elements/graphviz/PresentationGraphVizSvg.jsx
index 16f8fa89b..45a9e39b9 100644
--- a/znai-reactjs/src/doc-elements/graphviz/PresentationGraphVizSvg.jsx
+++ b/znai-reactjs/src/doc-elements/graphviz/PresentationGraphVizSvg.jsx
@@ -17,7 +17,7 @@
 import React from 'react'
 import GraphVizSvg from './GraphVizSvg'
 import {isAllAtOnce} from '../meta/meta'
-
+/* eslint-disable react-refresh/only-export-components */
 const PresentationGraphVizSvg = ({slideIdx, meta, idsToHighlight, ...props}) => {
     const idsToUse = (!idsToHighlight || isAllAtOnce(meta)) ?
         idsToHighlight:
@@ -26,7 +26,7 @@ const PresentationGraphVizSvg = ({slideIdx, meta, idsToHighlight, ...props}) =>
     return <GraphVizSvg idsToHighlight={idsToUse} {...props}/>
 }
 
-function numberOfSlides({data, idsToHighlight, meta}) {
+function numberOfSlides({_data, idsToHighlight, meta}) {
     return (!idsToHighlight || isAllAtOnce(meta)) ?
         1 :
         (idsToHighlight.length + 1)
diff --git a/znai-reactjs/src/doc-elements/images/AnnotatedImageEditor.jsx b/znai-reactjs/src/doc-elements/images/AnnotatedImageEditor.jsx
index c9e43a3d4..eb7e9d03b 100644
--- a/znai-reactjs/src/doc-elements/images/AnnotatedImageEditor.jsx
+++ b/znai-reactjs/src/doc-elements/images/AnnotatedImageEditor.jsx
@@ -77,7 +77,7 @@ class AnnotatedImageEditor extends React.Component {
         this.setState({selectedId: shape.id})
     }
 
-    onAnnotationChange(shape) {
+    onAnnotationChange(_shape) {
         this.forceUpdate()
     }
 
diff --git a/znai-reactjs/src/doc-elements/images/annotations/StaticAnnotation.jsx b/znai-reactjs/src/doc-elements/images/annotations/StaticAnnotation.jsx
index fbfedc139..9b1b5a02b 100644
--- a/znai-reactjs/src/doc-elements/images/annotations/StaticAnnotation.jsx
+++ b/znai-reactjs/src/doc-elements/images/annotations/StaticAnnotation.jsx
@@ -14,22 +14,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+/* eslint-disable react-refresh/only-export-components */
 import React from 'react'
 import {styleByName} from '../shapes/styleByName';
+import {withDisplayName} from '../../components.ts'
 
 const staticAnnotation = (shapeHandler) => {
-    const StaticAnnotationComponent = ({shape, scale}) => {
+    return withDisplayName(`StaticAnnotation(${shapeHandler?.name || 'Unknown'}`)(
+        ({shape, scale}) => {
         if (!shapeHandler) {
             return <NotFound {...shape}/>
         }
-
         const Body = shapeHandler.body;
         return <Body key="body" {...shape} scale={scale}/>
-    };
-
-    StaticAnnotationComponent.displayName = `StaticAnnotation(${shapeHandler?.name || 'Unknown'})`;
-    return StaticAnnotationComponent;
+        });
 }
 function NotFound({x, y, width, height, color}) {
     const styleScheme = styleByName(color)
diff --git a/znai-reactjs/src/doc-elements/images/shapes/Highlight.jsx b/znai-reactjs/src/doc-elements/images/shapes/Highlight.jsx
index 91ab02d35..2e69de8e5 100644
--- a/znai-reactjs/src/doc-elements/images/shapes/Highlight.jsx
+++ b/znai-reactjs/src/doc-elements/images/shapes/Highlight.jsx
@@ -19,7 +19,7 @@ import React from 'react'
 import {styleByName} from './styleByName';
 
 import rect from './Rect'
-
+/* eslint-disable react-refresh/only-export-components */
 const HighlightBody = ({x, y, width, height, color, scale, ...props}) => {
     const styleScheme = styleByName(color)
 
diff --git a/znai-reactjs/src/doc-elements/json/PresentationJson.jsx b/znai-reactjs/src/doc-elements/json/PresentationJson.jsx
index 600a56f02..2c50460f0 100644
--- a/znai-reactjs/src/doc-elements/json/PresentationJson.jsx
+++ b/znai-reactjs/src/doc-elements/json/PresentationJson.jsx
@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+/* eslint-disable react-refresh/only-export-components */
 import React from 'react'
 import Json from './Json'
 
diff --git a/znai-reactjs/src/doc-elements/jupyter/JupyterHtmlCell.jsx b/znai-reactjs/src/doc-elements/jupyter/JupyterHtmlCell.jsx
index 79787be39..1b775d9cf 100644
--- a/znai-reactjs/src/doc-elements/jupyter/JupyterHtmlCell.jsx
+++ b/znai-reactjs/src/doc-elements/jupyter/JupyterHtmlCell.jsx
@@ -20,7 +20,7 @@ import React from "react";
 import { Container } from "../container/Container.js";
 import "./JupyterHtmlCell.css";
 
-const JupyterHtmlCell = ({ html, elementsLibrary, ...props }) => {
+const JupyterHtmlCell = ({ html, _elementsLibrary, ...props }) => {
   return (
     <Container className="znai-jupyter-cell jupyter-html content-block" {...props}>
       <div dangerouslySetInnerHTML={{ __html: html }} />
diff --git a/znai-reactjs/src/doc-elements/markdown/MarkdownAndResult.jsx b/znai-reactjs/src/doc-elements/markdown/MarkdownAndResult.jsx
index 8678d9787..6a62ad41f 100644
--- a/znai-reactjs/src/doc-elements/markdown/MarkdownAndResult.jsx
+++ b/znai-reactjs/src/doc-elements/markdown/MarkdownAndResult.jsx
@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+/* eslint-disable react-refresh/only-export-components */
 import React from 'react'
 import {Columns} from '../columns/Columns'
 
diff --git a/znai-reactjs/src/doc-elements/page/Page.jsx b/znai-reactjs/src/doc-elements/page/Page.jsx
index f3a829769..4fd15ba58 100644
--- a/znai-reactjs/src/doc-elements/page/Page.jsx
+++ b/znai-reactjs/src/doc-elements/page/Page.jsx
@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+/* eslint-disable react-refresh/only-export-components */
 import React, { Component } from "react";
 
 import { pageTypesRegistry } from "./PageTypesRegistry";
diff --git a/znai-reactjs/src/doc-elements/pageContentProcessor.js b/znai-reactjs/src/doc-elements/pageContentProcessor.js
index fdcbe9941..2d216b2fe 100644
--- a/znai-reactjs/src/doc-elements/pageContentProcessor.js
+++ b/znai-reactjs/src/doc-elements/pageContentProcessor.js
@@ -33,7 +33,7 @@ function mergeMetaIntoContent(pageContent, meta) {
     for (let i = 0, len = pageContent.length; i < len; i++) {
         const el = pageContent[i]
         if (el.type === 'Meta') {
-            const {type, ...meta} = el
+            const {_type, ...meta} = el
             currentMeta = {...currentMeta, ...meta}
         } else {
             result.push(mergeMetaIntoElement(el, currentMeta))
diff --git a/znai-reactjs/src/doc-elements/quote/BlockQuote.jsx b/znai-reactjs/src/doc-elements/quote/BlockQuote.jsx
index 93de32b78..1d4c37ed9 100644
--- a/znai-reactjs/src/doc-elements/quote/BlockQuote.jsx
+++ b/znai-reactjs/src/doc-elements/quote/BlockQuote.jsx
@@ -14,6 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/* eslint-disable react-refresh/only-export-components */
 
 import React from 'react'
 
diff --git a/znai-reactjs/src/doc-elements/svg/EmbeddedSvg.jsx b/znai-reactjs/src/doc-elements/svg/EmbeddedSvg.jsx
index 4e665a7ea..dbae09166 100644
--- a/znai-reactjs/src/doc-elements/svg/EmbeddedSvg.jsx
+++ b/znai-reactjs/src/doc-elements/svg/EmbeddedSvg.jsx
@@ -56,7 +56,7 @@ class EmbeddedSvg extends React.Component {
         this.changeSizeWhenPropIsChanged()
     }
 
-    componentDidUpdate(prevProps, prevState, snapshot) {
+    componentDidUpdate(_prevProps, _prevState, _snapshot) {
         this.changeSizeWhenPropIsChanged()
     }
 
diff --git a/znai-reactjs/src/doc-elements/svg/Svg.jsx b/znai-reactjs/src/doc-elements/svg/Svg.jsx
index 7752f9a01..ae4a06dee 100644
--- a/znai-reactjs/src/doc-elements/svg/Svg.jsx
+++ b/znai-reactjs/src/doc-elements/svg/Svg.jsx
@@ -14,6 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/* eslint-disable react-refresh/only-export-components */
 
 import React from 'react'
 import {isAllAtOnce} from '../meta/meta'
@@ -54,7 +55,7 @@ class Svg extends React.Component {
         this.loadSvg()
     }
 
-    componentDidUpdate(prevProps, prevState, snapshot) {
+    componentDidUpdate(prevProps, _prevState, _snapshot) {
         if (prevProps.svgSrc !== this.props.svgSrc) {
             this.loadSvg()
         }
diff --git a/znai-reactjs/src/doc-elements/tabs/Tabs.jsx b/znai-reactjs/src/doc-elements/tabs/Tabs.jsx
index 58ab66be6..94e7bbe1a 100644
--- a/znai-reactjs/src/doc-elements/tabs/Tabs.jsx
+++ b/znai-reactjs/src/doc-elements/tabs/Tabs.jsx
@@ -14,8 +14,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/* eslint-disable react-refresh/only-export-components */
 
-import React, { Component } from "react";
+import React from "react";
 
 import { tabsRegistration } from "./TabsRegistration";
 import { findParentWithScroll } from "../../utils/domNodes";
diff --git a/znai-reactjs/src/doc-elements/test-results/RestPayload.jsx b/znai-reactjs/src/doc-elements/test-results/RestPayload.jsx
index 14013c0ed..a1e32aab3 100644
--- a/znai-reactjs/src/doc-elements/test-results/RestPayload.jsx
+++ b/znai-reactjs/src/doc-elements/test-results/RestPayload.jsx
@@ -24,7 +24,7 @@ const JsonPayload = ({data, checks}) => {
     )
 }
 
-const RestPayload = ({caption, type, data, checks}) => {
+const RestPayload = ({caption, _type, data, checks}) => {
     if (! data) {
         return null
     }
diff --git a/znai-reactjs/src/doc-elements/text-selection/selectionUtils.js b/znai-reactjs/src/doc-elements/text-selection/selectionUtils.js
index ca0d923aa..f41912dca 100644
--- a/znai-reactjs/src/doc-elements/text-selection/selectionUtils.js
+++ b/znai-reactjs/src/doc-elements/text-selection/selectionUtils.js
@@ -53,7 +53,7 @@ function normalizeRangeBoundary(node, offset, isEnd = false) {
       // This means looking forward from offset
       return findTextNodeForward(node, offset);
     }
-  } catch (e) {
+  } catch {
     return null;
   }
 }
diff --git a/znai-reactjs/src/doc-elements/xml/PresentationXml.jsx b/znai-reactjs/src/doc-elements/xml/PresentationXml.jsx
index f27bbb8fc..788285905 100644
--- a/znai-reactjs/src/doc-elements/xml/PresentationXml.jsx
+++ b/znai-reactjs/src/doc-elements/xml/PresentationXml.jsx
@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/* eslint-disable react-refresh/only-export-components */
 
 import React from 'react'
 import Xml from './Xml'
@@ -22,4 +23,4 @@ const PresentationXml = ({xmlAsJson, paths, slideIdx, ...props}) => {
     return <Xml xmlAsJson={xmlAsJson} paths={pathsToDisplay} {...props}/>
 }
 
-export default {component: PresentationXml, numberOfSlides: ({data, paths}) => paths ? (paths.length + 1): 1}
\ No newline at end of file
+export default {component: PresentationXml, numberOfSlides: ({_data, paths}) => paths ? (paths.length + 1): 1}
\ No newline at end of file

From 4c9203cef7d4e64c426ddeac0965b9eec8821f2a Mon Sep 17 00:00:00 2001
From: antoine <antoine.levy-lambert@ny.email.gs.com>
Date: Tue, 16 Dec 2025 17:09:34 -0800
Subject: [PATCH 05/12] fix test errors

---
 znai-reactjs/src/doc-elements/bullets/bulletUtils.js  | 9 +++++----
 znai-reactjs/src/doc-elements/pageContentProcessor.js | 3 ++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/znai-reactjs/src/doc-elements/bullets/bulletUtils.js b/znai-reactjs/src/doc-elements/bullets/bulletUtils.js
index c472ffcda..c26199e89 100644
--- a/znai-reactjs/src/doc-elements/bullets/bulletUtils.js
+++ b/znai-reactjs/src/doc-elements/bullets/bulletUtils.js
@@ -104,10 +104,6 @@ function capitalizeFirstLetter(text) {
     return text.length > 1 ? text.charAt(0).toUpperCase() + text.slice(1) : text;
 }
 
-export const presentationBulletListHandler = {component: PresentationBulletList,
-    numberOfSlides: presentationNumberOfSlides,
-    slideInfoProvider: slideInfoProvider}
-
 const presentationNumberOfSlides = (props) => {
     const {content, meta} = props
 
@@ -115,6 +111,11 @@ const presentationNumberOfSlides = (props) => {
     return (type === null || isAllAtOnce(meta)) ? 1 : content.length
 }
 
+export const presentationBulletListHandler = {component: PresentationBulletList,
+    numberOfSlides: presentationNumberOfSlides,
+    slideInfoProvider: slideInfoProvider}
+
+
 function valueByIdWithWarning(dict, type) {
     if (!Object.hasOwn(dict, type)) {
         console.warn("can't find bullets list type: " + type)
diff --git a/znai-reactjs/src/doc-elements/pageContentProcessor.js b/znai-reactjs/src/doc-elements/pageContentProcessor.js
index 2d216b2fe..924016410 100644
--- a/znai-reactjs/src/doc-elements/pageContentProcessor.js
+++ b/znai-reactjs/src/doc-elements/pageContentProcessor.js
@@ -33,7 +33,8 @@ function mergeMetaIntoContent(pageContent, meta) {
     for (let i = 0, len = pageContent.length; i < len; i++) {
         const el = pageContent[i]
         if (el.type === 'Meta') {
-            const {_type, ...meta} = el
+            // eslint-disable-next-line no-unused-vars
+            const {type, ...meta} = el
             currentMeta = {...currentMeta, ...meta}
         } else {
             result.push(mergeMetaIntoElement(el, currentMeta))

From 2ffc4a4eca45fca39f51df3aa8969d129ef0c039 Mon Sep 17 00:00:00 2001
From: antoine <antoine.levy-lambert@ny.email.gs.com>
Date: Tue, 16 Dec 2025 17:29:49 -0800
Subject: [PATCH 06/12] fix runtime errors

---
 .../doc-elements/DefaultElementsLibrary.jsx   |   2 +-
 .../src/doc-elements/bullets/BulletList.jsx   |   2 +-
 .../bullets/PresentationBulletListHandler.js  |  49 ++++++
 .../doc-elements/bullets/bulletListUtils.js   | 139 ++++++++++++++++++
 .../src/doc-elements/bullets/bulletUtils.js   |  67 ---------
 .../src/doc-elements/cli/CliOutput.demo.jsx   |   2 +-
 6 files changed, 191 insertions(+), 70 deletions(-)
 create mode 100644 znai-reactjs/src/doc-elements/bullets/PresentationBulletListHandler.js
 create mode 100644 znai-reactjs/src/doc-elements/bullets/bulletListUtils.js

diff --git a/znai-reactjs/src/doc-elements/DefaultElementsLibrary.jsx b/znai-reactjs/src/doc-elements/DefaultElementsLibrary.jsx
index d85d74892..2518fa849 100644
--- a/znai-reactjs/src/doc-elements/DefaultElementsLibrary.jsx
+++ b/znai-reactjs/src/doc-elements/DefaultElementsLibrary.jsx
@@ -32,7 +32,7 @@ import {presentationSnippetHandler} from './code-snippets/snippetUtils.ts'
 import {Snippet} from './code-snippets/Snippet'
 import {InlinedCode} from './code-snippets/InlinedCode'
 import {BulletList} from './bullets/BulletList'
-import {presentationBulletListHandler} from './bullets/bulletUtils.js'
+import {presentationBulletListHandler} from './bullets/PresentationBulletListHandler.js'
 import CustomReactJSComponent from './custom/CustomReactJSComponent'
 import Anchor from './default-elements/Anchor'
 import Link from './default-elements/Link'
diff --git a/znai-reactjs/src/doc-elements/bullets/BulletList.jsx b/znai-reactjs/src/doc-elements/bullets/BulletList.jsx
index 1d4a518e5..136b05fac 100644
--- a/znai-reactjs/src/doc-elements/bullets/BulletList.jsx
+++ b/znai-reactjs/src/doc-elements/bullets/BulletList.jsx
@@ -22,7 +22,7 @@ import DefaultBulletList from './kinds/DefaultBulletList'
 import LeftRightTimeLine from './kinds/LeftRightTimeLine'
 import Venn from './kinds/Venn'
 import Steps from './kinds/Steps'
-import {presentationListType, presentationTypes, listType, valueByIdWithWarning} from './bulletUtils.js'
+import {presentationListType, presentationTypes, listType, valueByIdWithWarning} from './bulletListUtils.js'
 const types = {LeftRightTimeLine, Venn, Steps}
 
 const BulletList = (props) => {
diff --git a/znai-reactjs/src/doc-elements/bullets/PresentationBulletListHandler.js b/znai-reactjs/src/doc-elements/bullets/PresentationBulletListHandler.js
new file mode 100644
index 000000000..af2ffb063
--- /dev/null
+++ b/znai-reactjs/src/doc-elements/bullets/PresentationBulletListHandler.js
@@ -0,0 +1,49 @@
+
+/*
+ * Copyright 2020 znai maintainers
+ * Copyright 2019 TWO SIGMA OPEN SOURCE, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { PresentationBulletList } from "./BulletList.jsx";
+import { isAllAtOnce } from "../meta/meta.js";
+import { listType, presentationListType, presentationTypes, valueByIdWithWarning } from "./bulletListUtils.js";
+
+const presentationNumberOfSlides = (props) => {
+    const { content, meta } = props
+
+    const type = presentationListType(props)
+    return (type === null || isAllAtOnce(meta)) ? 1 : content.length
+}
+
+function slideInfoProvider(props) {
+    const type = presentationListType(props)
+    if (!type) {
+        return {}
+    }
+
+    const Bullets = valueByIdWithWarning(presentationTypes, type)
+
+    return {
+        isSlideCentered: !Bullets.isPresentationFullScreen,
+        isSlidePadded: !Bullets.isPresentationFullScreen,
+        isSlideScaled: !Bullets.isPresentationFullScreen,
+    }
+}
+
+export const presentationBulletListHandler = {
+    component: PresentationBulletList,
+    numberOfSlides: presentationNumberOfSlides,
+    slideInfoProvider: slideInfoProvider
+}
\ No newline at end of file
diff --git a/znai-reactjs/src/doc-elements/bullets/bulletListUtils.js b/znai-reactjs/src/doc-elements/bullets/bulletListUtils.js
new file mode 100644
index 000000000..cc0a248fc
--- /dev/null
+++ b/znai-reactjs/src/doc-elements/bullets/bulletListUtils.js
@@ -0,0 +1,139 @@
+/*
+ * Copyright 2020 znai maintainers
+ * Copyright 2019 TWO SIGMA OPEN SOURCE, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {NoBullets} from "./BulletList.jsx";
+import RevealBoxes from "./kinds/RevealBoxes.jsx";
+import HorizontalStripes from "./kinds/HorizontalStripes.jsx";
+import Grid from "./kinds/Grid.jsx";
+const presentationTypes = {RevealBoxes, HorizontalStripes, Grid}
+
+export function startsWithIcon(content) {
+    return content &&
+            content.length && content[0].type === 'Paragraph' &&
+            content[0].content.length && content[0].content[0].type === 'Icon'
+}
+
+export function extractIconId(content) {
+    return extractIconProps(content).id
+}
+
+export function extractIconProps(content) {
+    return content[0].content[0]
+}
+
+export function extractIconIds(list) {
+    return list.map(item => startsWithIcon(item.content) ? extractIconId(item.content) : undefined)
+}
+
+export function removeIcon(content) {
+    const copy = [...content]
+
+    copy[0] = {...copy[0]}
+    copy[0].content = copy[0].content.slice(1)
+
+    return copy
+}
+
+export function extractTextLines(content) {
+    return content.map(item => extractText(item))
+}
+
+export function extractTextLinesEmphasisOnly(content) {
+    return content.map(item => extractText(item, true))
+}
+
+export function extractTextLinesEmphasisOrFull(content) {
+    const full = extractTextLines(content)
+    const emphasisOnly = extractTextLinesEmphasisOnly(content)
+    const result = []
+
+    for (let i = 0, len = full.length; i < len; i++) {
+        result.push(emphasisOnly[i] ? emphasisOnly[i] : full[i])
+    }
+
+    return result
+}
+
+function extractText(listItem, emphasisedOnly) {
+    const result = []
+    collectTextRecursively(result, listItem.content, emphasisedOnly, false)
+
+    return capitalizeFirstLetter(result.join(" "))
+}
+
+function collectTextRecursively(result, content, emphasisedOnly, withinEmphasis) {
+    if (! content) {
+        return
+    }
+
+    content.forEach(item => {
+        if (item.type === "SimpleText") {
+            if (emphasisedOnly && withinEmphasis) {
+                result.push(item.text)
+            } else if (! emphasisedOnly) {
+                result.push(item.text)
+            }
+        } else {
+            collectTextRecursively(result, item.content, emphasisedOnly, withinEmphasis || isEmphasis(item))
+        }
+    })
+
+    return result
+}
+
+function isEmphasis(docElement) {
+    return docElement.type === 'Emphasis' || docElement.type === 'StrongEmphasis'
+}
+
+function capitalizeFirstLetter(text) {
+    return text.length > 1 ? text.charAt(0).toUpperCase() + text.slice(1) : text;
+}
+
+
+function valueByIdWithWarning(dict, type) {
+    if (!Object.hasOwn(dict, type)) {
+        console.warn("can't find bullets list type: " + type)
+        return NoBullets
+    }
+
+    return dict[type]
+}
+
+function presentationListType(props) {
+    return listType(props, 'bulletListType') ||
+        listType(props, 'presentationBulletListType')
+}
+
+function listType(props, key) {
+    if (! Object.hasOwn(props,'meta')) {
+        return null
+    }
+
+    const meta = props.meta
+    if (! Object.hasOwn(meta, key)) {
+        return null
+    }
+
+    if (meta[key] === "") {
+        return null
+    }
+
+    return meta[key]
+}
+
+
+export {listType, presentationListType, presentationTypes, valueByIdWithWarning}
\ No newline at end of file
diff --git a/znai-reactjs/src/doc-elements/bullets/bulletUtils.js b/znai-reactjs/src/doc-elements/bullets/bulletUtils.js
index c26199e89..5229dcc1d 100644
--- a/znai-reactjs/src/doc-elements/bullets/bulletUtils.js
+++ b/znai-reactjs/src/doc-elements/bullets/bulletUtils.js
@@ -15,13 +15,6 @@
  * limitations under the License.
  */
 
-import {PresentationBulletList, NoBullets} from "./BulletList.jsx";
-import {isAllAtOnce} from "../meta/meta.js";
-import RevealBoxes from "./kinds/RevealBoxes.jsx";
-import HorizontalStripes from "./kinds/HorizontalStripes.jsx";
-import Grid from "./kinds/Grid.jsx";
-const presentationTypes = {RevealBoxes, HorizontalStripes, Grid}
-
 export function startsWithIcon(content) {
     return content &&
             content.length && content[0].type === 'Paragraph' &&
@@ -103,63 +96,3 @@ function isEmphasis(docElement) {
 function capitalizeFirstLetter(text) {
     return text.length > 1 ? text.charAt(0).toUpperCase() + text.slice(1) : text;
 }
-
-const presentationNumberOfSlides = (props) => {
-    const {content, meta} = props
-
-    const type = presentationListType(props)
-    return (type === null || isAllAtOnce(meta)) ? 1 : content.length
-}
-
-export const presentationBulletListHandler = {component: PresentationBulletList,
-    numberOfSlides: presentationNumberOfSlides,
-    slideInfoProvider: slideInfoProvider}
-
-
-function valueByIdWithWarning(dict, type) {
-    if (!Object.hasOwn(dict, type)) {
-        console.warn("can't find bullets list type: " + type)
-        return NoBullets
-    }
-
-    return dict[type]
-}
-
-function presentationListType(props) {
-    return listType(props, 'bulletListType') ||
-        listType(props, 'presentationBulletListType')
-}
-
-function listType(props, key) {
-    if (! Object.hasOwn(props,'meta')) {
-        return null
-    }
-
-    const meta = props.meta
-    if (! Object.hasOwn(meta, key)) {
-        return null
-    }
-
-    if (meta[key] === "") {
-        return null
-    }
-
-    return meta[key]
-}
-
-function slideInfoProvider(props) {
-    const type = presentationListType(props)
-    if (!type) {
-        return {}
-    }
-
-    const Bullets = valueByIdWithWarning(presentationTypes, type)
-
-    return {
-        isSlideCentered: !Bullets.isPresentationFullScreen,
-        isSlidePadded: !Bullets.isPresentationFullScreen,
-        isSlideScaled: !Bullets.isPresentationFullScreen,
-    }
-}
-
-export {listType, presentationListType, presentationTypes, valueByIdWithWarning}
\ No newline at end of file
diff --git a/znai-reactjs/src/doc-elements/cli/CliOutput.demo.jsx b/znai-reactjs/src/doc-elements/cli/CliOutput.demo.jsx
index 56d9bce23..b76c733f9 100644
--- a/znai-reactjs/src/doc-elements/cli/CliOutput.demo.jsx
+++ b/znai-reactjs/src/doc-elements/cli/CliOutput.demo.jsx
@@ -16,7 +16,7 @@
 
 import React from "react";
 
-import {CliOutput} from "./cliOutputUtil.js";
+import {CliOutput} from "./CliOutput";
 
 export function cliOutputDemo(registry) {
     registry

From cc86026627679039624bcef4434da86c77f05928 Mon Sep 17 00:00:00 2001
From: antoine <antoine.levy-lambert@ny.email.gs.com>
Date: Tue, 16 Dec 2025 17:31:37 -0800
Subject: [PATCH 07/12] fix warning

---
 .../src/doc-elements/bullets/PresentationBulletListHandler.js   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/znai-reactjs/src/doc-elements/bullets/PresentationBulletListHandler.js b/znai-reactjs/src/doc-elements/bullets/PresentationBulletListHandler.js
index af2ffb063..530f78259 100644
--- a/znai-reactjs/src/doc-elements/bullets/PresentationBulletListHandler.js
+++ b/znai-reactjs/src/doc-elements/bullets/PresentationBulletListHandler.js
@@ -18,7 +18,7 @@
 
 import { PresentationBulletList } from "./BulletList.jsx";
 import { isAllAtOnce } from "../meta/meta.js";
-import { listType, presentationListType, presentationTypes, valueByIdWithWarning } from "./bulletListUtils.js";
+import { presentationListType, presentationTypes, valueByIdWithWarning } from "./bulletListUtils.js";
 
 const presentationNumberOfSlides = (props) => {
     const { content, meta } = props

From a77d6c45f8cd4d7923f4094d06041fc7e4d428bb Mon Sep 17 00:00:00 2001
From: antoine <antoine.levy-lambert@ny.email.gs.com>
Date: Tue, 16 Dec 2025 17:38:34 -0800
Subject: [PATCH 08/12] fail the build if there are any warnings

---
 znai-reactjs/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/znai-reactjs/package.json b/znai-reactjs/package.json
index a3c405556..64c1c32da 100644
--- a/znai-reactjs/package.json
+++ b/znai-reactjs/package.json
@@ -63,7 +63,7 @@
     "build": "vite build",
     "test": "vitest --config ./vitest.config.ts",
     "test:watch": "vitest --config ./vitest.config.ts --watch",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
   "proxy": "http://localhost:3334/",

From 36687a3f1b265489f06ca43c5eb7d4c88780940e Mon Sep 17 00:00:00 2001
From: antoine <antoine.levy-lambert@ny.email.gs.com>
Date: Thu, 18 Dec 2025 11:51:09 -0800
Subject: [PATCH 09/12] updating copyrights

---
 znai-reactjs/src/diff/PageDiff.test.js                          | 1 +
 znai-reactjs/src/doc-elements/bullets/kinds/RevealBoxes.jsx     | 1 +
 znai-reactjs/src/doc-elements/custom/CustomReactJSComponent.jsx | 1 +
 znai-reactjs/src/doc-elements/doc-utils/DocUtils.jsx            | 1 +
 .../src/doc-elements/graphviz/PresentationGraphVizSvg.jsx       | 1 +
 znai-reactjs/src/doc-elements/markdown/MarkdownAndResult.jsx    | 2 +-
 znai-reactjs/src/doc-elements/test-results/RestPayload.jsx      | 1 +
 znai-reactjs/src/doc-elements/xml/PresentationXml.jsx           | 1 +
 8 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/znai-reactjs/src/diff/PageDiff.test.js b/znai-reactjs/src/diff/PageDiff.test.js
index 32d35ab7d..0f5e5fdcd 100644
--- a/znai-reactjs/src/diff/PageDiff.test.js
+++ b/znai-reactjs/src/diff/PageDiff.test.js
@@ -1,4 +1,5 @@
 /*
+ * Copyright 2025 znai maintainers
  * Copyright 2019 TWO SIGMA OPEN SOURCE, LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
diff --git a/znai-reactjs/src/doc-elements/bullets/kinds/RevealBoxes.jsx b/znai-reactjs/src/doc-elements/bullets/kinds/RevealBoxes.jsx
index 3e329d669..afba230c0 100644
--- a/znai-reactjs/src/doc-elements/bullets/kinds/RevealBoxes.jsx
+++ b/znai-reactjs/src/doc-elements/bullets/kinds/RevealBoxes.jsx
@@ -1,4 +1,5 @@
 /*
+ * Copyright 2025 znai maintainers
  * Copyright 2019 TWO SIGMA OPEN SOURCE, LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
diff --git a/znai-reactjs/src/doc-elements/custom/CustomReactJSComponent.jsx b/znai-reactjs/src/doc-elements/custom/CustomReactJSComponent.jsx
index cb937755f..62c01ba3d 100644
--- a/znai-reactjs/src/doc-elements/custom/CustomReactJSComponent.jsx
+++ b/znai-reactjs/src/doc-elements/custom/CustomReactJSComponent.jsx
@@ -1,4 +1,5 @@
 /*
+ * Copyright 2025 znai maintainers
  * Copyright 2019 TWO SIGMA OPEN SOURCE, LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
diff --git a/znai-reactjs/src/doc-elements/doc-utils/DocUtils.jsx b/znai-reactjs/src/doc-elements/doc-utils/DocUtils.jsx
index 3b6d4e0e0..acbc4beca 100644
--- a/znai-reactjs/src/doc-elements/doc-utils/DocUtils.jsx
+++ b/znai-reactjs/src/doc-elements/doc-utils/DocUtils.jsx
@@ -1,4 +1,5 @@
 /*
+ * Copyright 2025 znai maintainers
  * Copyright 2019 TWO SIGMA OPEN SOURCE, LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
diff --git a/znai-reactjs/src/doc-elements/graphviz/PresentationGraphVizSvg.jsx b/znai-reactjs/src/doc-elements/graphviz/PresentationGraphVizSvg.jsx
index 45a9e39b9..8ab452501 100644
--- a/znai-reactjs/src/doc-elements/graphviz/PresentationGraphVizSvg.jsx
+++ b/znai-reactjs/src/doc-elements/graphviz/PresentationGraphVizSvg.jsx
@@ -1,4 +1,5 @@
 /*
+ * Copyright 2025 znai maintainers
  * Copyright 2019 TWO SIGMA OPEN SOURCE, LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
diff --git a/znai-reactjs/src/doc-elements/markdown/MarkdownAndResult.jsx b/znai-reactjs/src/doc-elements/markdown/MarkdownAndResult.jsx
index 6a62ad41f..5791fd539 100644
--- a/znai-reactjs/src/doc-elements/markdown/MarkdownAndResult.jsx
+++ b/znai-reactjs/src/doc-elements/markdown/MarkdownAndResult.jsx
@@ -1,5 +1,5 @@
 /*
- * Copyright 2021 TWO SIGMA OPEN SOURCE, LLC
+ * Copyright 2025 znai maintainers
  * Copyright 2019 TWO SIGMA OPEN SOURCE, LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
diff --git a/znai-reactjs/src/doc-elements/test-results/RestPayload.jsx b/znai-reactjs/src/doc-elements/test-results/RestPayload.jsx
index a1e32aab3..629318ffe 100644
--- a/znai-reactjs/src/doc-elements/test-results/RestPayload.jsx
+++ b/znai-reactjs/src/doc-elements/test-results/RestPayload.jsx
@@ -1,4 +1,5 @@
 /*
+ * Copyright 2025 znai maintainers
  * Copyright 2019 TWO SIGMA OPEN SOURCE, LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
diff --git a/znai-reactjs/src/doc-elements/xml/PresentationXml.jsx b/znai-reactjs/src/doc-elements/xml/PresentationXml.jsx
index 788285905..7395de714 100644
--- a/znai-reactjs/src/doc-elements/xml/PresentationXml.jsx
+++ b/znai-reactjs/src/doc-elements/xml/PresentationXml.jsx
@@ -1,4 +1,5 @@
 /*
+ * Copyright 2025 znai maintainers
  * Copyright 2019 TWO SIGMA OPEN SOURCE, LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");

From ee58fcfc44ad8cbe5077021dba77d2cd74c58f26 Mon Sep 17 00:00:00 2001
From: antoine <antoine.levy-lambert@ny.email.gs.com>
Date: Thu, 18 Dec 2025 11:58:06 -0800
Subject: [PATCH 10/12] removing TWO SIGMA copyright as this is a new file.

---
 znai-reactjs/src/doc-elements/code-snippets/snippetUtils.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/znai-reactjs/src/doc-elements/code-snippets/snippetUtils.ts b/znai-reactjs/src/doc-elements/code-snippets/snippetUtils.ts
index b29a9a2bd..777290146 100644
--- a/znai-reactjs/src/doc-elements/code-snippets/snippetUtils.ts
+++ b/znai-reactjs/src/doc-elements/code-snippets/snippetUtils.ts
@@ -1,7 +1,6 @@
 
 /*
- * Copyright 2020 znai maintainers
- * Copyright 2019 TWO SIGMA OPEN SOURCE, LLC
+ * Copyright 2025 znai maintainers
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

From 4a98c0e1de309ba51a8dc8e43ddd23f6e0ff780c Mon Sep 17 00:00:00 2001
From: antoine <antoine.levy-lambert@ny.email.gs.com>
Date: Sun, 21 Dec 2025 19:35:08 -0800
Subject: [PATCH 11/12] setting 'react-refresh/only-export-components' to off

---
 znai-reactjs/eslint.config.mjs                |   5 +-
 znai-reactjs/src/App.jsx                      |  18 +--
 .../doc-elements/DefaultElementsLibrary.jsx   |   9 +-
 .../src/doc-elements/bullets/BulletList.jsx   |  65 +++++++-
 .../bullets/PresentationBulletListHandler.js  |  49 ------
 .../doc-elements/bullets/bulletListUtils.js   | 139 ------------------
 .../src/doc-elements/cli/CliOutput.jsx        |  20 ++-
 .../src/doc-elements/cli/cliOutputUtil.ts     |  36 -----
 .../doc-elements/code-snippets/Snippet.jsx    |  86 ++++++++++-
 .../code-snippets/snippetUtils.ts             | 132 -----------------
 .../src/doc-elements/doc-utils/DocUtils.jsx   |   1 -
 .../graphviz/PresentationGraphVizSvg.jsx      |   3 +-
 .../images/annotations/StaticAnnotation.jsx   |   2 +-
 .../doc-elements/images/shapes/Highlight.jsx  |   2 +-
 .../doc-elements/json/PresentationJson.jsx    |   2 +-
 .../markdown/MarkdownAndResult.jsx            |   3 +-
 znai-reactjs/src/doc-elements/page/Page.jsx   |   2 +-
 .../src/doc-elements/quote/BlockQuote.jsx     |   1 -
 znai-reactjs/src/doc-elements/svg/Svg.jsx     |   1 -
 znai-reactjs/src/doc-elements/tabs/Tabs.jsx   |   1 -
 .../src/doc-elements/xml/PresentationXml.jsx  |   1 -
 21 files changed, 188 insertions(+), 390 deletions(-)
 delete mode 100644 znai-reactjs/src/doc-elements/bullets/PresentationBulletListHandler.js
 delete mode 100644 znai-reactjs/src/doc-elements/bullets/bulletListUtils.js
 delete mode 100644 znai-reactjs/src/doc-elements/cli/cliOutputUtil.ts
 delete mode 100644 znai-reactjs/src/doc-elements/code-snippets/snippetUtils.ts

diff --git a/znai-reactjs/eslint.config.mjs b/znai-reactjs/eslint.config.mjs
index ae5a9876e..ee8a10684 100644
--- a/znai-reactjs/eslint.config.mjs
+++ b/znai-reactjs/eslint.config.mjs
@@ -66,7 +66,7 @@ export default [
 
             // React Refresh
             'react-refresh/only-export-components': [
-                'warn',
+                'off',
                 { allowConstantExport: true },
             ],
 
@@ -152,8 +152,9 @@ export default [
         },
     },
     {
-        files: ['**/*.demo.{js,jsx,ts,tsx}', '**/*.stories.{js,jsx,ts,tsx}'],
+        files: ['src/App.jsx', '**/*.demo.{js,jsx,ts,tsx}', '**/*.stories.{js,jsx,ts,tsx}'],
         rules: {
+            'no-console': 'off',
             'react-refresh/only-export-components': 'off',
             'react/display-name': 'off', // Often useful for demos too
         },
diff --git a/znai-reactjs/src/App.jsx b/znai-reactjs/src/App.jsx
index 1649bdfa7..2cf310b71 100644
--- a/znai-reactjs/src/App.jsx
+++ b/znai-reactjs/src/App.jsx
@@ -264,31 +264,31 @@ dropDowns.add("Theme").addItem("Default", "Alt 1").addItem("Dark", "Alt 2").onSe
 
 const documentationTracker = {
   onPageOpen(pageId) {
-    console.warn("onPageOpen", pageId);
+    console.log("onPageOpen", pageId);
   },
   onLinkClick(currentPageId, url) {
-    console.warn("onLinkClick", currentPageId, url);
+    console.log("onLinkClick", currentPageId, url);
   },
   onNextPage(currentPageId) {
-    console.warn("onNextPage", currentPageId);
+    console.log("onNextPage", currentPageId);
   },
   onPrevPage(currentPageId) {
-    console.warn("onPrevPage", currentPageId);
+    console.log("onPrevPage", currentPageId);
   },
   onScrollToSection(currentPageId, sectionIdTitle) {
-    console.warn("onScrollToSection", currentPageId, sectionIdTitle);
+    console.log("onScrollToSection", currentPageId, sectionIdTitle);
   },
   onTocItemSelect(currentPageId, tocItem) {
-    console.warn("onTocItemSelect", currentPageId, tocItem);
+    console.log("onTocItemSelect", currentPageId, tocItem);
   },
   onSearchResultSelect(currentPageId, query, selectedPageId) {
-    console.warn("onSearchResultSelect", currentPageId, query, selectedPageId);
+    console.log("onSearchResultSelect", currentPageId, query, selectedPageId);
   },
   onInteraction(currentPageId, type, id) {
-    console.warn("onInteraction", currentPageId, type, id);
+    console.log("onInteraction", currentPageId, type, id);
   },
   onPresentationOpen(currentPageId) {
-    console.warn("onPresentationOpen", currentPageId);
+    console.log("onPresentationOpen", currentPageId);
   },
 };
 
diff --git a/znai-reactjs/src/doc-elements/DefaultElementsLibrary.jsx b/znai-reactjs/src/doc-elements/DefaultElementsLibrary.jsx
index 2518fa849..84b0b4516 100644
--- a/znai-reactjs/src/doc-elements/DefaultElementsLibrary.jsx
+++ b/znai-reactjs/src/doc-elements/DefaultElementsLibrary.jsx
@@ -28,11 +28,9 @@ import PageTitle from './page/PageTitle'
 import {SectionTitle} from './default-elements/SectionTitle'
 import {presentationSectionHandler, Section} from './default-elements/Section'
 import {BlockQuote, presentationBlockQuoteHandler} from './quote/BlockQuote'
-import {presentationSnippetHandler} from './code-snippets/snippetUtils.ts'
-import {Snippet} from './code-snippets/Snippet'
+import {presentationSnippetHandler, Snippet} from './code-snippets/Snippet'
 import {InlinedCode} from './code-snippets/InlinedCode'
-import {BulletList} from './bullets/BulletList'
-import {presentationBulletListHandler} from './bullets/PresentationBulletListHandler.js'
+import {BulletList, presentationBulletListHandler} from './bullets/BulletList'
 import CustomReactJSComponent from './custom/CustomReactJSComponent'
 import Anchor from './default-elements/Anchor'
 import Link from './default-elements/Link'
@@ -59,8 +57,7 @@ import Mermaid from './mermaid/Mermaid'
 import {EchartGeneric, presentationEchartHandler} from "./charts/EchartGeneric";
 import Image from './images/Image'
 import {CliCommand, presentationCliCommandHandler} from './cli/CliCommand'
-import {CliOutput} from './cli/CliOutput'
-import {presentationCliOutput} from './cli/cliOutputUtil.ts'
+import {CliOutput, presentationCliOutput} from './cli/CliOutput'
 import presentationAnnotatedImageHandler from './images/PresentationAnnotatedImage'
 import presentationGraphVizHandler from './graphviz/PresentationGraphVizFlow'
 import {MarkdownAndResult, presentationMarkdownAndResultHandler} from './markdown/MarkdownAndResult'
diff --git a/znai-reactjs/src/doc-elements/bullets/BulletList.jsx b/znai-reactjs/src/doc-elements/bullets/BulletList.jsx
index 136b05fac..9d9eaf4be 100644
--- a/znai-reactjs/src/doc-elements/bullets/BulletList.jsx
+++ b/znai-reactjs/src/doc-elements/bullets/BulletList.jsx
@@ -21,9 +21,15 @@ import './BulletList.css'
 import DefaultBulletList from './kinds/DefaultBulletList'
 import LeftRightTimeLine from './kinds/LeftRightTimeLine'
 import Venn from './kinds/Venn'
+import RevealBoxes from './kinds/RevealBoxes'
 import Steps from './kinds/Steps'
-import {presentationListType, presentationTypes, listType, valueByIdWithWarning} from './bulletListUtils.js'
+import HorizontalStripes from './kinds/HorizontalStripes'
+import Grid from './kinds/Grid'
+
+import {isAllAtOnce} from '../meta/meta'
+
 const types = {LeftRightTimeLine, Venn, Steps}
+const presentationTypes = {...types, RevealBoxes, HorizontalStripes, Grid}
 
 const BulletList = (props) => {
     const type = listType(props, 'bulletListType')
@@ -51,6 +57,61 @@ const PresentationBulletList = (props) => {
     return <PresentationBullets isPresentation={isPresentation} {...props}/>
 }
 
+const presentationNumberOfSlides = (props) => {
+    const {content, meta} = props
+
+    const type = presentationListType(props)
+    return (type === null || isAllAtOnce(meta)) ? 1 : content.length
+}
+
+function valueByIdWithWarning(dict, type) {
+    if (! Object.hasOwn(dict, type)) {
+        console.warn("can't find bullets list type: " + type)
+        return NoBullets
+    }
+
+    return dict[type]
+}
+
+function presentationListType(props) {
+    return listType(props, 'bulletListType') ||
+        listType(props, 'presentationBulletListType')
+}
+
+function listType(props, key) {
+    if (! Object.hasOwn(props, 'meta')) {
+        return null
+    }
+
+    const meta = props.meta
+    if (! Object.hasOwn(meta, key)) {
+        return null
+    }
+
+    if (meta[key] === "") {
+        return null
+    }
+
+    return meta[key]
+}
+
+function slideInfoProvider(props) {
+    const type = presentationListType(props)
+    if (!type) {
+        return {}
+    }
+
+    const Bullets = valueByIdWithWarning(presentationTypes, type)
+
+    return {
+        isSlideCentered: !Bullets.isPresentationFullScreen,
+        isSlidePadded: !Bullets.isPresentationFullScreen,
+        isSlideScaled: !Bullets.isPresentationFullScreen,
+    }
+}
 
+const presentationBulletListHandler = {component: PresentationBulletList,
+    numberOfSlides: presentationNumberOfSlides,
+    slideInfoProvider: slideInfoProvider}
 
-export {BulletList, NoBullets, PresentationBulletList}
+export {BulletList, presentationBulletListHandler}
diff --git a/znai-reactjs/src/doc-elements/bullets/PresentationBulletListHandler.js b/znai-reactjs/src/doc-elements/bullets/PresentationBulletListHandler.js
deleted file mode 100644
index 530f78259..000000000
--- a/znai-reactjs/src/doc-elements/bullets/PresentationBulletListHandler.js
+++ /dev/null
@@ -1,49 +0,0 @@
-
-/*
- * Copyright 2020 znai maintainers
- * Copyright 2019 TWO SIGMA OPEN SOURCE, LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { PresentationBulletList } from "./BulletList.jsx";
-import { isAllAtOnce } from "../meta/meta.js";
-import { presentationListType, presentationTypes, valueByIdWithWarning } from "./bulletListUtils.js";
-
-const presentationNumberOfSlides = (props) => {
-    const { content, meta } = props
-
-    const type = presentationListType(props)
-    return (type === null || isAllAtOnce(meta)) ? 1 : content.length
-}
-
-function slideInfoProvider(props) {
-    const type = presentationListType(props)
-    if (!type) {
-        return {}
-    }
-
-    const Bullets = valueByIdWithWarning(presentationTypes, type)
-
-    return {
-        isSlideCentered: !Bullets.isPresentationFullScreen,
-        isSlidePadded: !Bullets.isPresentationFullScreen,
-        isSlideScaled: !Bullets.isPresentationFullScreen,
-    }
-}
-
-export const presentationBulletListHandler = {
-    component: PresentationBulletList,
-    numberOfSlides: presentationNumberOfSlides,
-    slideInfoProvider: slideInfoProvider
-}
\ No newline at end of file
diff --git a/znai-reactjs/src/doc-elements/bullets/bulletListUtils.js b/znai-reactjs/src/doc-elements/bullets/bulletListUtils.js
deleted file mode 100644
index cc0a248fc..000000000
--- a/znai-reactjs/src/doc-elements/bullets/bulletListUtils.js
+++ /dev/null
@@ -1,139 +0,0 @@
-/*
- * Copyright 2020 znai maintainers
- * Copyright 2019 TWO SIGMA OPEN SOURCE, LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import {NoBullets} from "./BulletList.jsx";
-import RevealBoxes from "./kinds/RevealBoxes.jsx";
-import HorizontalStripes from "./kinds/HorizontalStripes.jsx";
-import Grid from "./kinds/Grid.jsx";
-const presentationTypes = {RevealBoxes, HorizontalStripes, Grid}
-
-export function startsWithIcon(content) {
-    return content &&
-            content.length && content[0].type === 'Paragraph' &&
-            content[0].content.length && content[0].content[0].type === 'Icon'
-}
-
-export function extractIconId(content) {
-    return extractIconProps(content).id
-}
-
-export function extractIconProps(content) {
-    return content[0].content[0]
-}
-
-export function extractIconIds(list) {
-    return list.map(item => startsWithIcon(item.content) ? extractIconId(item.content) : undefined)
-}
-
-export function removeIcon(content) {
-    const copy = [...content]
-
-    copy[0] = {...copy[0]}
-    copy[0].content = copy[0].content.slice(1)
-
-    return copy
-}
-
-export function extractTextLines(content) {
-    return content.map(item => extractText(item))
-}
-
-export function extractTextLinesEmphasisOnly(content) {
-    return content.map(item => extractText(item, true))
-}
-
-export function extractTextLinesEmphasisOrFull(content) {
-    const full = extractTextLines(content)
-    const emphasisOnly = extractTextLinesEmphasisOnly(content)
-    const result = []
-
-    for (let i = 0, len = full.length; i < len; i++) {
-        result.push(emphasisOnly[i] ? emphasisOnly[i] : full[i])
-    }
-
-    return result
-}
-
-function extractText(listItem, emphasisedOnly) {
-    const result = []
-    collectTextRecursively(result, listItem.content, emphasisedOnly, false)
-
-    return capitalizeFirstLetter(result.join(" "))
-}
-
-function collectTextRecursively(result, content, emphasisedOnly, withinEmphasis) {
-    if (! content) {
-        return
-    }
-
-    content.forEach(item => {
-        if (item.type === "SimpleText") {
-            if (emphasisedOnly && withinEmphasis) {
-                result.push(item.text)
-            } else if (! emphasisedOnly) {
-                result.push(item.text)
-            }
-        } else {
-            collectTextRecursively(result, item.content, emphasisedOnly, withinEmphasis || isEmphasis(item))
-        }
-    })
-
-    return result
-}
-
-function isEmphasis(docElement) {
-    return docElement.type === 'Emphasis' || docElement.type === 'StrongEmphasis'
-}
-
-function capitalizeFirstLetter(text) {
-    return text.length > 1 ? text.charAt(0).toUpperCase() + text.slice(1) : text;
-}
-
-
-function valueByIdWithWarning(dict, type) {
-    if (!Object.hasOwn(dict, type)) {
-        console.warn("can't find bullets list type: " + type)
-        return NoBullets
-    }
-
-    return dict[type]
-}
-
-function presentationListType(props) {
-    return listType(props, 'bulletListType') ||
-        listType(props, 'presentationBulletListType')
-}
-
-function listType(props, key) {
-    if (! Object.hasOwn(props,'meta')) {
-        return null
-    }
-
-    const meta = props.meta
-    if (! Object.hasOwn(meta, key)) {
-        return null
-    }
-
-    if (meta[key] === "") {
-        return null
-    }
-
-    return meta[key]
-}
-
-
-export {listType, presentationListType, presentationTypes, valueByIdWithWarning}
\ No newline at end of file
diff --git a/znai-reactjs/src/doc-elements/cli/CliOutput.jsx b/znai-reactjs/src/doc-elements/cli/CliOutput.jsx
index e9918e435..f8c7f3efb 100644
--- a/znai-reactjs/src/doc-elements/cli/CliOutput.jsx
+++ b/znai-reactjs/src/doc-elements/cli/CliOutput.jsx
@@ -23,6 +23,8 @@ import {convertAnsiToTokenLines} from "./ansiToTokensConverter";
 
 import SimpleCodeSnippet from "../code-snippets/SimpleCodeSnippet";
 
+import {isAllAtOnce} from "../meta/meta";
+
 import './CliOutput.css';
 
 const CliOutput = ({lines, ...props}) => {
@@ -37,4 +39,20 @@ const CliOutput = ({lines, ...props}) => {
     )
 }
 
-export {CliOutput}
+const presentationCliOutput = {component: CliOutput,
+    numberOfSlides: (props) => {
+        return 1 + highlightNumberOfSlides(props) + (props.revealLineStop || []).length;
+    }
+}
+
+function highlightNumberOfSlides({meta, highlight}) {
+    highlight = highlight || []
+    if (isAllAtOnce(meta) && highlight.length > 0) {
+        return 1
+    }
+
+    return highlight.length
+}
+
+
+export {CliOutput, presentationCliOutput}
diff --git a/znai-reactjs/src/doc-elements/cli/cliOutputUtil.ts b/znai-reactjs/src/doc-elements/cli/cliOutputUtil.ts
deleted file mode 100644
index 8ec709fcb..000000000
--- a/znai-reactjs/src/doc-elements/cli/cliOutputUtil.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * Copyright 2025 znai maintainers
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import {CliOutput} from "./CliOutput";
-
-import {isAllAtOnce} from '../meta/meta'
-
-function highlightNumberOfSlides({meta, highlight}) {
-    highlight = highlight || []
-    if (isAllAtOnce(meta) && highlight.length > 0) {
-        return 1
-    }
-
-    return highlight.length
-}
-
-
-const presentationCliOutput = {component: CliOutput,
-    numberOfSlides: (props) => {
-        return 1 + highlightNumberOfSlides(props) + (props.revealLineStop || []).length;
-    }
-}
-
-export {presentationCliOutput}
\ No newline at end of file
diff --git a/znai-reactjs/src/doc-elements/code-snippets/Snippet.jsx b/znai-reactjs/src/doc-elements/code-snippets/Snippet.jsx
index bf733543b..61a808049 100644
--- a/znai-reactjs/src/doc-elements/code-snippets/Snippet.jsx
+++ b/znai-reactjs/src/doc-elements/code-snippets/Snippet.jsx
@@ -24,12 +24,15 @@ import {
   splitTokensIntoLines,
   trimComment,
 } from "./codeUtils";
+import { isAllAtOnce } from "../meta/meta";
+import { convertToList } from "../propsUtils";
 
 import SnippetContainer from "./SnippetContainer";
 import CodeSnippetWithCallouts from "./CodeSnippetWithCallouts";
 import SimpleCodeSnippet from "./SimpleCodeSnippet";
 
 import { parseCode } from "./codeParser";
+import { countNumberOfLines } from "../../utils/strings";
 
 import { SnippetBulletExplanations } from "./explanations/SnippetBulletExplanations";
 
@@ -101,6 +104,69 @@ function scrollToLineIdx({ isPresentation, slideIdx, numberOfVisibleLines }) {
   return numberOfVisibleLines * slideIdx;
 }
 
+const presentationSnippetHandler = {
+  component: Snippet,
+  numberOfSlides: ({
+    meta,
+    commentsType,
+    lang,
+    snippet,
+    tokens,
+    highlight,
+    revealLineStop,
+    numberOfVisibleLines = defaultNumberOfVisibleLines,
+  }) => {
+    const tokensToUse = parseCodeWithCompatibility({ lang, snippet, tokens });
+    const highlightAsList = convertToList(highlight);
+
+    if (commentsType === BULLETS_COMMENT_TYPE) {
+      return inlinedCommentsNumberOfSlides({ meta, tokens: tokensToUse });
+    }
+
+    const numberOfStopLines = (revealLineStop || []).length;
+    const numberOfScrolls = countNumberOfScrolls();
+
+    const hasFirstNoActionSlide =
+      highlightAsList.length > 0 ||
+      numberOfStopLines > 0 ||
+      (highlightAsList.length === 0 && numberOfStopLines === 0 && numberOfScrolls === 0);
+
+    return (
+      (hasFirstNoActionSlide ? 1 : 0) +
+      highlightNumberOfSlides({ meta, highlightAsList }) +
+      numberOfStopLines +
+      numberOfScrolls
+    );
+
+    function countNumberOfScrolls() {
+      const numberOfLines = countNumberOfLines(snippet);
+
+      if (numberOfLines <= numberOfVisibleLines) {
+        return 0;
+      }
+
+      return Math.ceil(numberOfLines / numberOfVisibleLines);
+    }
+  },
+  slideInfoProvider: ({ meta, commentsType, lang, snippet, tokens, slideIdx }) => {
+    const tokensToUse = parseCodeWithCompatibility({ lang, snippet, tokens });
+
+    if (isAllAtOnce(meta)) {
+      return {};
+    }
+
+    if (commentsType !== BULLETS_COMMENT_TYPE) {
+      return {};
+    }
+
+    const comments = tokensToUse.filter((t) => isCommentToken(t));
+
+    return {
+      slideVisibleNote: !comments.length ? null : slideIdx === 0 ? "" : comments[slideIdx - 1].content,
+    };
+  },
+};
+
 // TODO for backward compatibility with already built and deployed docs
 // remove once TSI rebuilds all the docs
 function parseCodeWithCompatibility({ lang, tokens, snippet }) {
@@ -111,6 +177,24 @@ function parseCodeWithCompatibility({ lang, tokens, snippet }) {
   return parseCode(lang, snippet);
 }
 
+function inlinedCommentsNumberOfSlides({ meta, tokens }) {
+  const comments = tokens.filter((t) => isCommentToken(t));
+
+  if (isAllAtOnce(meta) && comments.length > 0) {
+    return 2; // two slides: 1st - no highlights; 2nd - all highlighted at once
+  }
+
+  return comments.length + 1;
+}
+
+function highlightNumberOfSlides({ meta, highlightAsList }) {
+  if (isAllAtOnce(meta) && highlightAsList.length > 0) {
+    return 1;
+  }
+
+  return highlightAsList.length;
+}
+
 function buildCalloutsFromComments(lines) {
   const result = {};
   lines.forEach((line, lineIdx) => {
@@ -124,4 +208,4 @@ function buildCalloutsFromComments(lines) {
   return result;
 }
 
-export { Snippet };
\ No newline at end of file
+export { Snippet, presentationSnippetHandler };
diff --git a/znai-reactjs/src/doc-elements/code-snippets/snippetUtils.ts b/znai-reactjs/src/doc-elements/code-snippets/snippetUtils.ts
deleted file mode 100644
index 777290146..000000000
--- a/znai-reactjs/src/doc-elements/code-snippets/snippetUtils.ts
+++ /dev/null
@@ -1,132 +0,0 @@
-
-/*
- * Copyright 2025 znai maintainers
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { isCommentToken } from "./codeUtils";
-import { isAllAtOnce } from "../meta/meta";
-import { convertToList } from "../propsUtils";
-import { parseCode } from "./codeParser";
-import { countNumberOfLines } from "../../utils/strings";
-
-const defaultNumberOfVisibleLines = 25;
-const BULLETS_COMMENT_TYPE = "inline";
-
-// TODO for backward compatibility with already built and deployed docs
-// remove once TSI rebuilds all the docs
-function parseCodeWithCompatibility({ lang, tokens, snippet }: { lang: string; tokens?: any; snippet: string }) {
-  if (tokens) {
-    return tokens;
-  }
-
-  return parseCode(lang, snippet);
-}
-
-function inlinedCommentsNumberOfSlides({ meta, tokens }: { meta: any; tokens: any[] }) {
-  const comments = tokens.filter((t) => isCommentToken(t));
-
-  if (isAllAtOnce(meta) && comments.length > 0) {
-    return 2; // two slides: 1st - no highlights; 2nd - all highlighted at once
-  }
-
-  return comments.length + 1;
-}
-
-function highlightNumberOfSlides({ meta, highlightAsList }: { meta: any; highlightAsList: any[] }) {
-  if (isAllAtOnce(meta) && highlightAsList.length > 0) {
-    return 1;
-  }
-
-  return highlightAsList.length;
-}
-
-export const presentationSnippetHandler = {
-  component: null as any, // Will be set when imported
-  numberOfSlides: ({
-    meta,
-    commentsType,
-    lang,
-    snippet,
-    tokens,
-    highlight,
-    revealLineStop,
-    numberOfVisibleLines = defaultNumberOfVisibleLines,
-  }: {
-    meta: any;
-    commentsType?: string;
-    lang: string;
-    snippet: string;
-    tokens?: any;
-    highlight?: any;
-    revealLineStop?: any[];
-    numberOfVisibleLines?: number;
-  }) => {
-    const tokensToUse = parseCodeWithCompatibility({ lang, snippet, tokens });
-    const highlightAsList = convertToList(highlight);
-
-    if (commentsType === BULLETS_COMMENT_TYPE) {
-      return inlinedCommentsNumberOfSlides({ meta, tokens: tokensToUse });
-    }
-
-    const numberOfStopLines = (revealLineStop || []).length;
-    const numberOfScrolls = countNumberOfScrolls();
-
-    const hasFirstNoActionSlide =
-      highlightAsList.length > 0 ||
-      numberOfStopLines > 0 ||
-      (highlightAsList.length === 0 && numberOfStopLines === 0 && numberOfScrolls === 0);
-
-    return (
-      (hasFirstNoActionSlide ? 1 : 0) +
-      highlightNumberOfSlides({ meta, highlightAsList }) +
-      numberOfStopLines +
-      numberOfScrolls
-    );
-
-    function countNumberOfScrolls() {
-      const numberOfLines = countNumberOfLines(snippet);
-
-      if (numberOfLines <= numberOfVisibleLines) {
-        return 0;
-      }
-
-      return Math.ceil(numberOfLines / numberOfVisibleLines);
-    }
-  },
-  slideInfoProvider: ({ meta, commentsType, lang, snippet, tokens, slideIdx }: {
-    meta: any;
-    commentsType?: string;
-    lang: string;
-    snippet: string;
-    tokens?: any;
-    slideIdx: number;
-  }) => {
-    const tokensToUse = parseCodeWithCompatibility({ lang, snippet, tokens });
-
-    if (isAllAtOnce(meta)) {
-      return {};
-    }
-
-    if (commentsType !== BULLETS_COMMENT_TYPE) {
-      return {};
-    }
-
-    const comments = tokensToUse.filter((t: any) => isCommentToken(t));
-
-    return {
-      slideVisibleNote: !comments.length ? null : slideIdx === 0 ? "" : comments[slideIdx - 1].content,
-    };
-  },
-};
\ No newline at end of file
diff --git a/znai-reactjs/src/doc-elements/doc-utils/DocUtils.jsx b/znai-reactjs/src/doc-elements/doc-utils/DocUtils.jsx
index acbc4beca..5c84b4045 100644
--- a/znai-reactjs/src/doc-elements/doc-utils/DocUtils.jsx
+++ b/znai-reactjs/src/doc-elements/doc-utils/DocUtils.jsx
@@ -14,7 +14,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* eslint-disable react-refresh/only-export-components */
 
 import React from 'react'
 
diff --git a/znai-reactjs/src/doc-elements/graphviz/PresentationGraphVizSvg.jsx b/znai-reactjs/src/doc-elements/graphviz/PresentationGraphVizSvg.jsx
index 8ab452501..3e0a2adb8 100644
--- a/znai-reactjs/src/doc-elements/graphviz/PresentationGraphVizSvg.jsx
+++ b/znai-reactjs/src/doc-elements/graphviz/PresentationGraphVizSvg.jsx
@@ -1,5 +1,4 @@
 /*
- * Copyright 2025 znai maintainers
  * Copyright 2019 TWO SIGMA OPEN SOURCE, LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -18,7 +17,7 @@
 import React from 'react'
 import GraphVizSvg from './GraphVizSvg'
 import {isAllAtOnce} from '../meta/meta'
-/* eslint-disable react-refresh/only-export-components */
+
 const PresentationGraphVizSvg = ({slideIdx, meta, idsToHighlight, ...props}) => {
     const idsToUse = (!idsToHighlight || isAllAtOnce(meta)) ?
         idsToHighlight:
diff --git a/znai-reactjs/src/doc-elements/images/annotations/StaticAnnotation.jsx b/znai-reactjs/src/doc-elements/images/annotations/StaticAnnotation.jsx
index 9b1b5a02b..16652083f 100644
--- a/znai-reactjs/src/doc-elements/images/annotations/StaticAnnotation.jsx
+++ b/znai-reactjs/src/doc-elements/images/annotations/StaticAnnotation.jsx
@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* eslint-disable react-refresh/only-export-components */
+
 import React from 'react'
 import {styleByName} from '../shapes/styleByName';
 import {withDisplayName} from '../../components.ts'
diff --git a/znai-reactjs/src/doc-elements/images/shapes/Highlight.jsx b/znai-reactjs/src/doc-elements/images/shapes/Highlight.jsx
index 2e69de8e5..91ab02d35 100644
--- a/znai-reactjs/src/doc-elements/images/shapes/Highlight.jsx
+++ b/znai-reactjs/src/doc-elements/images/shapes/Highlight.jsx
@@ -19,7 +19,7 @@ import React from 'react'
 import {styleByName} from './styleByName';
 
 import rect from './Rect'
-/* eslint-disable react-refresh/only-export-components */
+
 const HighlightBody = ({x, y, width, height, color, scale, ...props}) => {
     const styleScheme = styleByName(color)
 
diff --git a/znai-reactjs/src/doc-elements/json/PresentationJson.jsx b/znai-reactjs/src/doc-elements/json/PresentationJson.jsx
index 2c50460f0..600a56f02 100644
--- a/znai-reactjs/src/doc-elements/json/PresentationJson.jsx
+++ b/znai-reactjs/src/doc-elements/json/PresentationJson.jsx
@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* eslint-disable react-refresh/only-export-components */
+
 import React from 'react'
 import Json from './Json'
 
diff --git a/znai-reactjs/src/doc-elements/markdown/MarkdownAndResult.jsx b/znai-reactjs/src/doc-elements/markdown/MarkdownAndResult.jsx
index 5791fd539..193f5a6e0 100644
--- a/znai-reactjs/src/doc-elements/markdown/MarkdownAndResult.jsx
+++ b/znai-reactjs/src/doc-elements/markdown/MarkdownAndResult.jsx
@@ -1,5 +1,4 @@
 /*
- * Copyright 2025 znai maintainers
  * Copyright 2019 TWO SIGMA OPEN SOURCE, LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -14,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* eslint-disable react-refresh/only-export-components */
+
 import React from 'react'
 import {Columns} from '../columns/Columns'
 
diff --git a/znai-reactjs/src/doc-elements/page/Page.jsx b/znai-reactjs/src/doc-elements/page/Page.jsx
index 4fd15ba58..f3a829769 100644
--- a/znai-reactjs/src/doc-elements/page/Page.jsx
+++ b/znai-reactjs/src/doc-elements/page/Page.jsx
@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* eslint-disable react-refresh/only-export-components */
+
 import React, { Component } from "react";
 
 import { pageTypesRegistry } from "./PageTypesRegistry";
diff --git a/znai-reactjs/src/doc-elements/quote/BlockQuote.jsx b/znai-reactjs/src/doc-elements/quote/BlockQuote.jsx
index 1d4c37ed9..93de32b78 100644
--- a/znai-reactjs/src/doc-elements/quote/BlockQuote.jsx
+++ b/znai-reactjs/src/doc-elements/quote/BlockQuote.jsx
@@ -14,7 +14,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* eslint-disable react-refresh/only-export-components */
 
 import React from 'react'
 
diff --git a/znai-reactjs/src/doc-elements/svg/Svg.jsx b/znai-reactjs/src/doc-elements/svg/Svg.jsx
index ae4a06dee..33f872cf7 100644
--- a/znai-reactjs/src/doc-elements/svg/Svg.jsx
+++ b/znai-reactjs/src/doc-elements/svg/Svg.jsx
@@ -14,7 +14,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* eslint-disable react-refresh/only-export-components */
 
 import React from 'react'
 import {isAllAtOnce} from '../meta/meta'
diff --git a/znai-reactjs/src/doc-elements/tabs/Tabs.jsx b/znai-reactjs/src/doc-elements/tabs/Tabs.jsx
index 94e7bbe1a..73e35184c 100644
--- a/znai-reactjs/src/doc-elements/tabs/Tabs.jsx
+++ b/znai-reactjs/src/doc-elements/tabs/Tabs.jsx
@@ -14,7 +14,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* eslint-disable react-refresh/only-export-components */
 
 import React from "react";
 
diff --git a/znai-reactjs/src/doc-elements/xml/PresentationXml.jsx b/znai-reactjs/src/doc-elements/xml/PresentationXml.jsx
index 7395de714..885dd1852 100644
--- a/znai-reactjs/src/doc-elements/xml/PresentationXml.jsx
+++ b/znai-reactjs/src/doc-elements/xml/PresentationXml.jsx
@@ -14,7 +14,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* eslint-disable react-refresh/only-export-components */
 
 import React from 'react'
 import Xml from './Xml'

From e644959265162ab1abe82f11012fb40a0b716d48 Mon Sep 17 00:00:00 2001
From: antoine <antoine.levy-lambert@ny.email.gs.com>
Date: Sun, 21 Dec 2025 19:48:37 -0800
Subject: [PATCH 12/12] allowing to use console.log in test files

---
 znai-reactjs/eslint.config.mjs                                | 4 +++-
 .../src/doc-elements/code-snippets/codeUtils.test.jsx         | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/znai-reactjs/eslint.config.mjs b/znai-reactjs/eslint.config.mjs
index ee8a10684..81efcfd1a 100644
--- a/znai-reactjs/eslint.config.mjs
+++ b/znai-reactjs/eslint.config.mjs
@@ -149,7 +149,9 @@ export default [
                 afterAll: 'readonly',
                 vi: 'readonly',  // Vitest's mock utility
             },
-        },
+        }, rules: {
+            'no-console': 'off',
+        }
     },
     {
         files: ['src/App.jsx', '**/*.demo.{js,jsx,ts,tsx}', '**/*.stories.{js,jsx,ts,tsx}'],
diff --git a/znai-reactjs/src/doc-elements/code-snippets/codeUtils.test.jsx b/znai-reactjs/src/doc-elements/code-snippets/codeUtils.test.jsx
index d9838457c..077d2aeea 100644
--- a/znai-reactjs/src/doc-elements/code-snippets/codeUtils.test.jsx
+++ b/znai-reactjs/src/doc-elements/code-snippets/codeUtils.test.jsx
@@ -293,7 +293,7 @@ class MyClass {
 `)
         const lines = splitTokensIntoLines(tokens)
 
-        console.warn(lines)
+        console.log(lines)
     })
 
     describe('inlined comments', () => {