@capillarytech/blaze-ui 5.21.0 → 5.22.0

package/CapLanguageProvider/README.md

@@ -1,206 +0,0 @@
-# CapLanguageProvider
-
-A wrapper component that provides internationalization (i18n) support for Capillary applications by integrating Ant Design's ConfigProvider, React Intl's IntlProvider, and Locize translation management.
-
-## Migration from Ant Design v3 to v6
-
-This component has been migrated from Ant Design v3 to v6 with the following changes:
-
-### Breaking Changes
-
-**None** - The component maintains full backward compatibility. No API changes were required.
-
-### Code Improvements
-
-1. **Removed PropTypes**: All PropTypes have been removed and replaced with TypeScript interfaces in `types.ts`
-2. **Type Safety**: Full TypeScript support with exported types for all interfaces
-3. **Code Organization**: All type definitions moved to dedicated `types.ts` file
-4. **Documentation**: Added comprehensive JSDoc comments for better developer experience
-
-### What Stayed the Same
-
-- All props and their behavior
-- Redux integration pattern (connect HOC)
-- Locale loading logic (user.iso_lang → localStorage.locale → default)
-- Locale format conversion (hyphen/underscore handling)
-- Spinner visibility logic
-- Login page skip behavior
-- Moment and dayjs locale synchronization
-- Antd locale dynamic import with fallback
-
-### What Changed
-
-- **Removed**: PropTypes imports and static propTypes assignments
-- **Added**: TypeScript types in `types.ts`
-- **Improved**: Type safety with exported interfaces
-
-## Usage
-
-```tsx
-import { CapLanguageProvider } from '@capillarytech/blaze-ui';
-
-function App() {
-  return (
-    <CapLanguageProvider>
-      <YourApp />
-    </CapLanguageProvider>
-  );
-}
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `user` | `UserData` | `undefined` | User data object containing `iso_lang` property |
-| `actions` | `Actions` | `undefined` | Redux action creators (injected via connect) |
-| `children` | `React.ReactNode` | `undefined` | Child component to wrap |
-| `language` | `LanguageState` | `undefined` | Language state from Redux store |
-| `messages` | `Record<string, string>` | `undefined` | Translation messages object |
-| `supportedLocalesDetails` | `SupportedLocalesDetails` | `undefined` | Supported locales details from Redux |
-| `className` | `string` | `undefined` | CSS class name for the spinner wrapper |
-| `spinnerVisible` | `boolean` | `true` | Whether to show loading spinner |
-| `supportedLocalesApi` | `string` | `undefined` | API endpoint for fetching supported locales |
-| `locizeApi` | `string` | `undefined` | API endpoint for fetching Locize translations |
-
-## Locale Loading Priority
-
-The component loads locales in the following priority order:
-
-1. **User ISO Language** (`user.iso_lang`) - Highest priority
-2. **LocalStorage Locale** (`localStorage.getItem('locale')`) - Fallback
-3. **Default** (`en-US`) - Final fallback
-
-## Locale Format Conversion
-
-The component automatically converts locale formats for different libraries:
-
-- **Antd**: Uses underscore format (e.g., `en_US`, `fr_FR`)
-- **React Intl**: Uses 2-letter format (e.g., `en`, `fr`)
-- **Locize**: Uses the mapped `locize_locale` from `supportedLocales`
-
-### Examples
-
-| Input | Antd Format | React Intl Format | Locize Format |
-|-------|-------------|------------------|---------------|
-| `en_US` | `en_US` | `en` | `en-US` (from supportedLocales) |
-| `en-US` | `en_US` | `en` | `en-US` (from supportedLocales) |
-| `fr-FR` | `fr_FR` | `fr` | `fr-FR` (from supportedLocales) |
-
-## Spinner Visibility
-
-The spinner is shown when:
-- `spinnerVisible` is `true` (default)
-- Not on login page (`/login` path)
-- AND (`language.localeLoading === 'REQUEST'` OR `supportedLocalesDetails.fetchSupportedLocalesStatus === 'REQUEST'`)
-
-## Login Page Behavior
-
-When the component detects it's on a login page (`/login` path):
-- `getSupportedLocales` is called with `isSkip: true`
-- `getLocizeMessage` is called with `isSkip: true`
-- Spinner never shows, regardless of loading state
-
-## Redux Integration
-
-The component uses Redux connect HOC to inject:
-- `language` state from `makeSelectLanguage()` selector
-- `supportedLocalesDetails` state from `makeSelectSupportedLocalesDetails()` selector
-- `actions` from `bindActionCreators(action, dispatch)`
-
-## Date Library Synchronization
-
-The component synchronizes locale settings for both Moment.js and Day.js:
-- `moment.locale(locale)` - Sets Moment.js locale
-- `dayjs.locale(locale)` - Sets Day.js locale
-
-Both libraries are kept in sync when the locale changes.
-
-## TypeScript Support
-
-All types are exported from the component:
-
-```tsx
-import type {
-  CapLanguageProviderProps,
-  SupportedLocale,
-  UserData,
-  LanguageState,
-  Actions,
-  SupportedLocalesDetails,
-} from '@capillarytech/blaze-ui';
-```
-
-## Examples
-
-### Basic Usage
-
-```tsx
-import { CapLanguageProvider } from '@capillarytech/blaze-ui';
-
-function App() {
-  return (
-    <CapLanguageProvider>
-      <YourApp />
-    </CapLanguageProvider>
-  );
-}
-```
-
-### With Custom Messages
-
-```tsx
-import { CapLanguageProvider } from '@capillarytech/blaze-ui';
-
-const messages = {
-  'app.title': 'My Application',
-  'app.welcome': 'Welcome!',
-};
-
-function App() {
-  return (
-    <CapLanguageProvider messages={messages}>
-      <YourApp />
-    </CapLanguageProvider>
-  );
-}
-```
-
-### With Custom Spinner ClassName
-
-```tsx
-import { CapLanguageProvider } from '@capillarytech/blaze-ui';
-
-function App() {
-  return (
-    <CapLanguageProvider className="custom-spinner-wrapper">
-      <YourApp />
-    </CapLanguageProvider>
-  );
-}
-```
-
-### With API Endpoints
-
-```tsx
-import { CapLanguageProvider } from '@capillarytech/blaze-ui';
-
-function App() {
-  return (
-    <CapLanguageProvider
-      supportedLocalesApi="/api/supported-locales"
-      locizeApi="/api/locize"
-    >
-      <YourApp />
-    </CapLanguageProvider>
-  );
-}
-```
-
-## Notes
-
-- The component requires a single child element (uses `React.Children.only()`)
-- Locale loading happens asynchronously via Redux actions
-- Antd locale modules are dynamically imported with fallback to `en_US` on error
-- The component logs locale information to console in development
-- Moment.js and Day.js locales are synchronized automatically

package/CapLevelGraphRenderer/CapLevelGraphRenderer-test-cases.md

@@ -1,50 +0,0 @@
-# Test Cases: CapLevelGraphRenderer (Antd v3→v6)
-
-## Component Analysis
-- **Component**: CapLevelGraphRenderer
-- **Complexity**: medium
-- **Source**: blaze-ui/components/CapLevelGraphRenderer/
-- **Dependencies**: @antv/x6, React, CapButton, CapIcon
-- **Key Features**: Graph rendering with nodes, forward/reverse connections, pagination, tooltips
-
-## Test Cases (≤20 for medium complexity)
-
-| ID | Use Case | Props/Config | Expected Visual/Behavior | Priority | Storybook Story | Notes |
-|---|---|---|---|---|---|---|
-| UC-001 | Basic rendering with nodes and connections | `nodes=[{id: 'tier1', height: 295, component: MockComponent}, {id: 'tier2', height: 500, component: MockComponent}]`, `connections=[{sourceId: 'tier2', targetId: 'tier1'}]`, `graphId="test-graph"` | Graph renders with 2 nodes, forward connection between nodes, reverse connection visible, pagination controls visible | P0 | BasicRendering | Core functionality - must render graph |
-| UC-002 | Empty state - no nodes | `nodes=[]`, `connections=[]`, `graphId="test-graph"` | Graph container renders, no nodes visible, pagination buttons disabled, no errors | P1 | EmptyState | Edge case - empty data |
-| UC-003 | Single node without connections | `nodes=[{id: 'tier1', height: 295, component: MockComponent}]`, `connections=[]`, `graphId="test-graph"` | Single node renders, no connections drawn, pagination buttons disabled | P1 | SingleNode | Minimal valid state |
-| UC-004 | Multiple nodes with forward connections only | `nodes=[{id: 'tier1', height: 200}, {id: 'tier2', height: 300}, {id: 'tier3', height: 250}]`, `connections=[]`, `graphId="test-graph"` | 3 nodes render in sequence, forward connections between adjacent nodes visible, no reverse connections | P0 | ForwardConnections | Default forward connection behavior |
-| UC-005 | Reverse connections - level by level | `nodes=[{id: 'tier1', height: 200}, {id: 'tier2', height: 300}, {id: 'tier3', height: 250}]`, `connections=[{sourceId: 'tier3', targetId: 'tier1'}, {sourceId: 'tier2', targetId: 'tier1'}]`, `graphId="test-graph"` | Reverse connections render at different levels, avoid overlapping nodes, connections properly routed | P0 | ReverseConnections | Core reverse connection algorithm |
-| UC-006 | All styling props | `className="custom-class"`, `graphStyles={{border: '1px solid red'}}`, `containerStyles={{padding: '10px'}}`, `scrollClassName="custom-scroll"`, `graphId="test-graph"` | Custom classes and styles applied to respective containers, visual styling visible | P1 | StylingProps | Grouped all style-related props |
-| UC-007 | All layout/dimension props | `graphWidth="800px"`, `graphHeight="600px"`, `defaultStartX=50`, `defaultStartY=50`, `offsetHeight=30`, `defaultEleWidth=150`, `defaultEleDistance=40`, `offsetLineDistance=25`, `graphId="test-graph"` | Graph renders at specified dimensions, nodes positioned correctly, spacing matches props | P1 | LayoutProps | Grouped all layout configuration |
-| UC-008 | Connection styling props | `lineStrokeColor="#ff0000"`, `forwardConnProps={{strokeWidth: 3}}`, `reverseConnProps={{strokeDasharray: '5,5'}}`, `graphId="test-graph"` | Forward connections use red color and thicker stroke, reverse connections use dashed style | P1 | ConnectionStyling | Grouped connection appearance props |
-| UC-009 | Tooltip functionality - forward arrows | `showToolTip=true`, `allowForwardArrowTooltip=true`, `nodes=[{id: 'tier1', height: 200, toolTip: 'Tier 1'}, {id: 'tier2', height: 300, toolTip: 'Tier 2'}]`, `connections=[]`, `graphId="test-graph"` | Hovering forward connection shows tooltip with "Tier 1 - Tier 2" format | P1 | ForwardArrowTooltip | Tooltip on forward connections |
-| UC-010 | Tooltip functionality - reverse arrows | `showToolTip=true`, `allowReverseArrowTooltip=true`, `nodes=[{id: 'tier1', height: 200, toolTip: 'Tier 1'}, {id: 'tier2', height: 300, toolTip: 'Tier 2'}]`, `connections=[{sourceId: 'tier2', targetId: 'tier1'}]`, `graphId="test-graph"` | Hovering reverse connection shows tooltip with combined tooltip text | P1 | ReverseArrowTooltip | Tooltip on reverse connections |
-| UC-011 | Tooltip disabled | `showToolTip=false`, `nodes=[{id: 'tier1', height: 200, toolTip: 'Tier 1'}]`, `graphId="test-graph"` | No tooltip appears on hover, tooltip tool not registered | P2 | TooltipDisabled | Tooltip feature toggle |
-| UC-012 | Pagination - previous button interaction | `nodes=[5 nodes with width 100, distance 20]`, `graphWidth="300px"`, `graphId="test-graph"` | Click previous button scrolls graph left, button disabled at start, scroll position updates | P0 | PaginationPrevious | Pagination navigation |
-| UC-013 | Pagination - next button interaction | `nodes=[5 nodes with width 100, distance 20]`, `graphWidth="300px"`, `graphId="test-graph"` | Click next button scrolls graph right, button disabled at end, scroll position updates | P0 | PaginationNext | Pagination navigation |
-| UC-014 | Pagination button states | `nodes=[3 nodes]`, `graphWidth="500px"` (fits all), `graphId="test-graph"` | Both buttons disabled when all nodes visible, buttons enabled when content exceeds viewport | P1 | PaginationStates | Button disabled logic |
-| UC-015 | Scroller props customization | `scrollerProps={{padding: 10, pannable: true}}`, `graphId="test-graph"` | Scroller applies custom padding and panning behavior, graph respects scroller config | P2 | ScrollerProps | Advanced scroller configuration |
-| UC-016 | Node props - component rendering | `nodes=[{id: 'tier1', height: 200, component: CustomComponent, props: {label: 'Test'}}]`, `graphId="test-graph"` | Custom React component renders inside node with passed props, component visible in graph | P0 | NodeComponent | Node content rendering |
-| UC-017 | Complex connection scenarios | `nodes=[4 nodes]`, `connections=[multiple overlapping reverse connections]`, `graphId="test-graph"` | Multiple reverse connections render at different levels, no overlaps, proper routing around nodes | P0 | ComplexConnections | Edge case - complex graph topology |
-| UC-018 | Missing graphId (required prop) | `nodes=[{id: 'tier1', height: 200}]` (no graphId) | Component throws error or handles gracefully, PropTypes validation catches missing prop | P0 | MissingGraphId | Required prop validation |
-| UC-019 | Invalid connections | `nodes=[{id: 'tier1'}, {id: 'tier2'}]`, `connections=[{sourceId: 'invalid', targetId: 'tier1'}]`, `graphId="test-graph"` | Component handles invalid connection gracefully, only valid connections render, no errors | P1 | InvalidConnections | Edge case - invalid data |
-| UC-020 | Migration - antv/x6 Graph API | Standard props with nodes and connections | Graph initializes correctly, nodes and edges added via x6 API, React components render in nodes, events work | P0 | MigrationX6API | Verify @antv/x6 integration works in v6 context |
-
-## Grouping Rationale
-
-- **UC-006**: Grouped all style props (className, graphStyles, containerStyles, scrollClassName) into single test
-- **UC-007**: Grouped all layout/dimension props (graphWidth, graphHeight, positioning, spacing) into single test
-- **UC-008**: Grouped connection styling props (lineStrokeColor, forwardConnProps, reverseConnProps) into single test
-- **UC-009-011**: Tooltip tests grouped by feature (forward, reverse, disabled)
-- **UC-012-014**: Pagination tests grouped by interaction type (previous, next, states)
-
-## Notes
-
-- Component uses @antv/x6 Graph library - verify compatibility with Antd v6
-- Tooltip uses custom TooltipTool class extending ToolsView.ToolItem
-- Pagination uses CapButton and CapIcon components
-- Node components render via react-shape in x6
-- Reverse connections use level-based algorithm to avoid overlaps
-- Component requires DOM element with graphId for initialization

package/CapLevelGraphRenderer/README.md

@@ -1,123 +0,0 @@
-# CapLevelGraphRenderer
-
-Graph renderer component that displays nodes with custom React components and draws level-by-level backward edges using the @antv/x6 Graph library.
-
-## Migration (Antd v3 → v6)
-
-- **Antd usage**: This component does **not** use any Ant Design components directly. It uses the `@antv/x6` Graph library for rendering. The component uses Cap UI components (`CapButton`, `CapIcon`) for pagination controls. No Antd theme config or API changes apply.
-- **PropTypes removed**: All runtime PropTypes were removed and replaced with TypeScript types from `types.ts`.
-- **defaultProps removed**: All `defaultProps` were removed and converted to destructuring with default values in the function signature.
-- **Styles**: `styles.scss` uses CSS Modules with one `:global` override for Ant Design icon spacing (with mandatory `// OVERRIDE:` comment).
-
-## Props
-
-See `types.ts` for full interfaces. Main props:
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `nodes` | `GraphNode[]` | Array of nodes to render. Each node requires `id`, `component`, `height`, and optionally `props` and `toolTip`. Default: `[]` |
-| `graphId` | `string` | **Required.** Unique identifier for the graph container DOM element. |
-| `connections` | `GraphConnection[]` | Array of connections between nodes. Each connection has `sourceId` and `targetId`. Default: `[]` |
-| `graphWidth` | `number \| string` | Width of the graph container. Default: `'500px'` |
-| `graphHeight` | `number \| string` | Height of the graph container. Default: `'500px'` |
-| `showToolTip` | `boolean` | Whether to show tooltips on edges. Default: `false` |
-| `allowForwardArrowTooltip` | `boolean` | Whether to allow tooltips on forward arrows. Default: `false` |
-| `allowReverseArrowTooltip` | `boolean` | Whether to allow tooltips on reverse arrows. Default: `false` |
-| `defaultEleWidth` | `number` | Default width for each node element. Default: `100` |
-| `defaultEleDistance` | `number` | Default distance between node elements. Default: `20` |
-| `offsetHeight` | `number` | Offset height for connection lines from node top. Default: `20` |
-| `offsetLineDistance` | `number` | Offset distance for reverse connection lines. Default: `18` |
-| `defaultStartX` | `number` | Default starting X coordinate. Default: `0` |
-| `defaultStartY` | `number` | Default starting Y coordinate. Default: `0` |
-| `lineStrokeColor` | `string` | Color for connection lines. Default: `'gray'` |
-| `forwardConnProps` | `Record<string, unknown>` | Props to apply to forward connections. Default: `{}` |
-| `reverseConnProps` | `Record<string, unknown>` | Props to apply to reverse connections. Default: `{}` |
-| `scrollerProps` | `Record<string, unknown>` | Props to pass to the x6 scroller. Default: `{}` |
-| `scrollClassName` | `string` | CSS class name for the scroller. Default: `''` |
-| `graphStyles` | `React.CSSProperties` | Inline styles for the graph container. Default: `{}` |
-| `containerStyles` | `React.CSSProperties` | Inline styles for the container wrapper. Default: `{}` |
-| `className` | `string` | Additional CSS class name. Default: `''` |
-
-## Usage
-
-```tsx
-import CapLevelGraphRenderer from '@capillarytech/blaze-ui/components/CapLevelGraphRenderer';
-import type { GraphNode, GraphConnection } from '@capillarytech/blaze-ui/components/CapLevelGraphRenderer/types';
-
-const MyComponent = () => {
-  const nodes: GraphNode[] = [
-    {
-      id: 'tier1',
-      component: MyCustomComponent,
-      height: 295,
-      props: { label: 'Tier 1' },
-      toolTip: 'First Tier',
-    },
-    {
-      id: 'tier2',
-      component: MyCustomComponent,
-      height: 500,
-      props: { label: 'Tier 2' },
-      toolTip: 'Second Tier',
-    },
-  ];
-
-  const connections: GraphConnection[] = [
-    { sourceId: 'tier2', targetId: 'tier1' },
-  ];
-
-  return (
-    <CapLevelGraphRenderer
-      graphId="my-graph"
-      nodes={nodes}
-      connections={connections}
-      graphWidth="800px"
-      graphHeight="600px"
-      showToolTip={true}
-      allowForwardArrowTooltip={true}
-      allowReverseArrowTooltip={true}
-    />
-  );
-};
-```
-
-## Features
-
-- **Custom Node Components**: Each node can render a custom React component
-- **Forward Connections**: Automatically draws forward connections between adjacent nodes
-- **Reverse Connections**: Calculates and draws reverse connections level-by-level to avoid overlaps
-- **Pagination**: Built-in pagination controls for horizontal scrolling
-- **Tooltips**: Optional tooltips on edges (forward and reverse arrows)
-- **Customizable Styling**: Supports custom styles for graph container, connections, and scroller
-
-## Breaking Changes
-
-None. This component did not use Ant Design components or deprecated APIs.
-
-## Dependencies
-
-- `@antv/x6`: Graph rendering library (version: ^1.12.4)
-- `@antv/x6-react-shape`: React shape plugin for x6 (version: ^1.2.3)
-- `classnames`, `lodash` (already in blaze-ui dependencies)
-
-## Style Overrides
-
-The component uses one `:global` override for Ant Design icon spacing:
-
-```scss
-// OVERRIDE: Specific icon spacing override - no token available for nested icon margin within button
-:global {
-  & > span + .anticon {
-    margin: 0;
-  }
-}
-```
-
-This override is necessary because there's no design token available for nested icon margin within button components.
-
-## Notes
-
-- The component requires a DOM element with the specified `graphId` to exist before rendering
-- The component uses module-level objects (`nodePostionObj`, `edgeObj`) for state tracking
-- Reverse connections are calculated using a level-based algorithm to prevent overlaps
-- The graph instance is managed via React refs

package/CapLevelGraphRenderer/Tooltip_MIGRATION_ANALYSIS.md

@@ -1,120 +0,0 @@
-# Migration Analysis Report: Tooltip.tsx
-
-## STAGE 1: Pre-Analysis
-
-### Analysis Report for Tooltip.tsx
-
-#### 1. Antd Style Overrides Found
-
-| Line # | Old Override | Can Tokenize? | Token Path | Token Value | Override Reason |
-|--------|-------------|---------------|------------|-------------|-----------------|
-| N/A | None | N/A | N/A | N/A | No Antd style overrides found |
-
-**Tokenizable overrides**: 0  
-**Non-tokenizable overrides**: 0  
-**Status**: No Antd style overrides found - will skip theme config update
-
-#### 2. API Breaking Changes
-
-| Old API | New API | Affected Props |
-|---------|---------|----------------|
-| `visible` (CapTooltip) | `open` (CapTooltip) | Line 27: `visible` prop used |
-
-**Note**: The file uses deprecated `visible` prop on CapTooltip component. Should use `open` instead.
-
-#### 3. Backward Compatibility Plan
-
-| Deprecated Prop | Fallback Logic |
-|----------------|----------------|
-| `visible` (CapTooltip) | Use `open` prop instead (CapTooltip handles backward compatibility internally) |
-
-#### 4. Type Definitions Needed
-
-- **TooltipToolOptions interface**: Type for constructor props/options
-  - `tooltip?: string` - Tooltip text content
-- **Class property types**: 
-  - `knob: HTMLElement` - DOM element for tooltip rendering
-  - `delay: number` - Delay in milliseconds
-  - `tooltipVisible: boolean` - Current tooltip visibility state
-  - `timer: ReturnType<typeof setTimeout>` - Timer reference
-- **Method parameter types**:
-  - `toggleTooltip(visible: boolean): void`
-  - `updatePosition(e?: MouseEvent): void`
-  - `onMouseMove(e: MouseEvent): void`
-
-#### 5. PropTypes Removal
-
-- [x] Component uses PropTypes: **NO**
-- [x] PropTypes file exists: **NO**
-- [x] PropTypes imports found: **NO**
-- [x] Component.propTypes assignments found: **NO**
-- **Action Required**: None - no PropTypes found
-
-#### 6. DefaultProps Removal
-
-- [x] Component uses defaultProps: **NO**
-- [x] Component.defaultProps assignments found: **NO**
-- [x] Old function syntax with props parameter: **NO** (class-based component)
-- [x] Default values assigned inside function body: **YES** (line 10: `this.delay = 100`)
-- **Action Required**: None - defaultProps not used, default value assignment is acceptable for class properties
-
-#### 7. External Package Dependencies
-
-**External packages found**:
-- `@antv/x6` - Already in package.json (added in main component migration)
-- `react-dom/client` - Already available (React dependency)
-
-**Package status**:
-- All dependencies already present
-
-#### 8. Component-Specific Notes
-
-- Class-based component extending `ToolsView.ToolItem` from @antv/x6
-- Uses React 18 `createRoot` API (already migrated)
-- Uses deprecated `visible` prop on CapTooltip - needs update to `open`
-- Missing TypeScript types for class properties and method parameters
-- Uses DOM manipulation directly (acceptable for x6 tool implementation)
-
----
-
-## STAGE 2: Theme Config Update
-
-**Status**: No theme config changes required
-
-**Reason**: No Antd style overrides found. Component uses @antv/x6 ToolsView.ToolItem and CapTooltip component.
-
----
-
-## STAGE 3: Implementation Required
-
-1. **Add TypeScript types**:
-   - Define interface for TooltipToolOptions
-   - Add type annotations for class properties
-   - Add type annotations for method parameters
-
-2. **Fix deprecated prop usage**:
-   - Change `visible` to `open` on CapTooltip (line 27)
-
-3. **Improve type safety**:
-   - Add proper types for DOM elements and event handlers
-
----
-
-## STAGE 3: Implementation Complete
-
-All changes have been implemented:
-- ✅ **TypeScript types added**: Created interfaces for TooltipToolOptions, GraphInstance, and CellViewInstance
-- ✅ **Class property types**: Added proper types for knob, delay, tooltipVisible, timer, and root
-- ✅ **Method parameter types**: Added types for toggleTooltip, updatePosition, onMouseMove, onMouseLeave
-- ✅ **Deprecated prop fixed**: Changed `visible` to `open` on CapTooltip (line 84)
-- ✅ **Type safety improved**: Used type assertions for @antv/x6 properties that aren't fully typed
-- ✅ **Cleanup added**: Added proper cleanup in onRemove method (unmount React root, clear timer)
-
-**Key Changes**:
-1. Fixed deprecated `visible` prop → `open` prop on CapTooltip
-2. Added TypeScript interfaces for options and x6 instance types
-3. Added proper type annotations for all class properties and methods
-4. Improved cleanup with React root unmounting
-5. Used type assertions for @antv/x6 properties that aren't fully exposed in TypeScript definitions
-
-**Migration Status**: ✅ COMPLETE