@tomaszjarosz/react-visualizers 0.2.13 → 0.2.14

package/README.md

@@ -1,9 +1,21 @@
 # @tomaszjarosz/react-visualizers
 
-Interactive algorithm and data structure visualizers for React.
+Interactive algorithm and data structure visualizers for React. Perfect for learning, teaching, and interview preparation.
 
-[![Storybook](https://img.shields.io/badge/Storybook-Live%20Demo-ff4785?logo=storybook&logoColor=white)](https://6934a2d9e17d1e509a92c935-rdicbxowdr.chromatic.com/)
 [![npm version](https://img.shields.io/npm/v/@tomaszjarosz/react-visualizers)](https://www.npmjs.com/package/@tomaszjarosz/react-visualizers)
+[![Storybook](https://img.shields.io/badge/Storybook-Live%20Demo-ff4785?logo=storybook&logoColor=white)](https://6934a2d9e17d1e509a92c935-rdicbxowdr.chromatic.com/)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## Features
+
+- **36 interactive visualizers** covering algorithms, data structures, and distributed systems
+- **Interview Mode** with built-in questions, scoring, hints, and explanations
+- **Step-by-step animations** with playback controls (play, pause, step forward/back)
+- **Code highlighting** showing the current line being executed
+- **Keyboard shortcuts** for efficient navigation
+- **URL state persistence** for sharing specific states
+- **Fully typed** with TypeScript
+- **Zero runtime dependencies** (only `lucide-react` for icons)
 
 ## Live Demo
 
@@ -13,78 +25,157 @@ Interactive algorithm and data structure visualizers for React.
 
 ```bash
 npm install @tomaszjarosz/react-visualizers
+# or
+pnpm add @tomaszjarosz/react-visualizers
+# or
+yarn add @tomaszjarosz/react-visualizers
+```
+
+**Important:** Import the CSS file in your application entry point:
+
+```tsx
+import '@tomaszjarosz/react-visualizers/styles.css';
 ```
 
 ## Requirements
 
 - React 17+
-- Tailwind CSS 4+
+- The library includes compiled Tailwind CSS, no additional setup needed
+
+## Quick Start
+
+```tsx
+import { HashMapVisualizer } from '@tomaszjarosz/react-visualizers';
+import '@tomaszjarosz/react-visualizers/styles.css';
+
+function App() {
+  return <HashMapVisualizer showControls showCode />;
+}
+```
 
 ## Available Visualizers
 
-### Algorithms
+### Algorithms (6)
+
 | Visualizer | Description |
 |------------|-------------|
 | `BinarySearchVisualizer` | Binary search with O(log n) visualization |
-| `SortingVisualizer` | Step-by-step sorting algorithm |
-| `SortingComparisonVisualizer` | Side-by-side algorithm comparison |
-| `GraphVisualizer` | DFS/BFS graph traversal |
-| `DijkstraVisualizer` | Shortest path algorithm |
-| `DPVisualizer` | Dynamic programming table |
+| `SortingVisualizer` | Bubble, Selection, Insertion, Quick, Merge sort |
+| `SortingComparisonVisualizer` | Side-by-side algorithm race |
+| `GraphVisualizer` | DFS and BFS traversal |
+| `DijkstraVisualizer` | Shortest path with distance relaxation |
+| `DPVisualizer` | Dynamic programming table (Fibonacci) |
+
+### Data Structures (10)
 
-### Data Structures
 | Visualizer | Description |
 |------------|-------------|
-| `ArrayListVisualizer` | Dynamic array with resizing |
-| `LinkedListVisualizer` | Node-based list operations |
-| `HashMapVisualizer` | Hash table with buckets |
-| `HashTableVisualizer` | Hash function internals |
-| `ArrayDequeVisualizer` | Circular buffer deque |
-| `PriorityQueueVisualizer` | Min-heap operations |
-| `TreeSetVisualizer` | Red-Black tree (BST) |
-| `LinkedHashMapVisualizer` | Hash + insertion order |
-| `EnumSetVisualizer` | Bit vector set |
-
-### Concurrency
+| `ArrayListVisualizer` | Dynamic array with amortized resizing |
+| `LinkedListVisualizer` | Singly linked list operations |
+| `HashMapVisualizer` | Hash table with separate chaining |
+| `HashTableVisualizer` | Hash function internals and collisions |
+| `ArrayDequeVisualizer` | Circular buffer double-ended queue |
+| `PriorityQueueVisualizer` | Binary min-heap operations |
+| `TreeSetVisualizer` | Red-Black tree (balanced BST) |
+| `LinkedHashMapVisualizer` | HashMap + insertion order linked list |
+| `EnumSetVisualizer` | Bit vector implementation |
+| `ListComparisonVisualizer` | ArrayList vs LinkedList performance |
+
+### Concurrency (4)
+
 | Visualizer | Description |
 |------------|-------------|
-| `BlockingQueueVisualizer` | Producer-consumer pattern |
-| `ConcurrentHashMapVisualizer` | Segment-based locking |
-| `CopyOnWriteVisualizer` | Copy-on-write pattern |
+| `BlockingQueueVisualizer` | Producer-consumer with blocking |
+| `ConcurrentHashMapVisualizer` | Segment-based concurrent access |
+| `CopyOnWriteVisualizer` | Copy-on-write pattern for reads |
 | `ImmutableCollectionsVisualizer` | Java 9+ immutable collections |
 
-### Other
+### Advanced Data Structures (2)
+
+| Visualizer | Description |
+|------------|-------------|
+| `BloomFilterVisualizer` | Probabilistic set membership |
+| `BTreeVisualizer` | B-Tree with node splitting |
+
+### Distributed Systems (2)
+
 | Visualizer | Description |
 |------------|-------------|
-| `GCVisualizer` | JVM garbage collection |
-| `SQLJoinVisualizer` | SQL JOIN operations |
+| `ConsistentHashingVisualizer` | Hash ring with virtual nodes |
+| `RaftVisualizer` | Raft consensus algorithm |
 
-## Usage
+### Other (2)
+
+| Visualizer | Description |
+|------------|-------------|
+| `GCVisualizer` | JVM generational garbage collection |
+| `SQLJoinVisualizer` | SQL JOIN operations (INNER, LEFT, RIGHT, FULL) |
+
+### Interview Mode (10)
+
+Interview visualizers include built-in questions with multiple choice answers, hints, and detailed explanations. Perfect for interview preparation.
+
+| Visualizer | Topics |
+|------------|--------|
+| `HashMapInterviewVisualizer` | Hashing, collisions, load factor, rehashing |
+| `TreeSetInterviewVisualizer` | BST properties, Red-Black balancing, rotations |
+| `SortingInterviewVisualizer` | Time complexity, stability, space complexity |
+| `GraphInterviewVisualizer` | DFS vs BFS, cycle detection, topological sort |
+| `DijkstraInterviewVisualizer` | Shortest path, negative weights, relaxation |
+| `DPInterviewVisualizer` | Overlapping subproblems, memoization |
+| `BloomFilterInterviewVisualizer` | False positives, hash functions, bit arrays |
+| `BTreeInterviewVisualizer` | Node splitting, disk-based storage, order |
+| `ConsistentHashingInterviewVisualizer` | Virtual nodes, rebalancing, hot spots |
+| `RaftInterviewVisualizer` | Leader election, log replication, safety |
+
+## Interview Mode Usage
 
 ```tsx
-import { BinarySearchVisualizer, HashMapVisualizer } from '@tomaszjarosz/react-visualizers';
+import { HashMapInterviewVisualizer } from '@tomaszjarosz/react-visualizers';
 
-function App() {
+function InterviewPrep() {
   return (
-    <div>
-      <BinarySearchVisualizer showControls={true} showCode={true} />
-      <HashMapVisualizer showControls={true} showCode={true} />
-    </div>
+    <HashMapInterviewVisualizer
+      showControls
+      showCode
+      onComplete={(session) => {
+        console.log(`Score: ${session.results.filter(r => r.isCorrect).length}/${session.results.length}`);
+      }}
+    />
   );
 }
 ```
 
-### Props
+## Props
 
-All visualizers accept these props:
+All visualizers accept these common props:
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `showControls` | `boolean` | `true` | Show playback controls |
-| `showCode` | `boolean` | `true` | Show code panel |
+| `showCode` | `boolean` | `true` | Show code panel with highlighting |
 | `className` | `string` | `''` | Additional CSS classes |
 
-## Shared Components
+Interview visualizers also accept:
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `shuffleQuestions` | `boolean` | `false` | Randomize question order |
+| `onComplete` | `(session) => void` | - | Callback when all questions answered |
+
+## Keyboard Shortcuts
+
+| Key | Action |
+|-----|--------|
+| `Space` | Play/Pause |
+| `→` | Next step |
+| `←` | Previous step |
+| `R` | Reset |
+| `?` | Show help |
+
+## Building Custom Visualizers
+
+The library exports shared components and hooks for building your own visualizers:
 
 ```tsx
 import {
@@ -93,13 +184,83 @@ import {
   Legend,
   StatusPanel,
   VisualizationArea,
-  HelpPanel
+  useVisualizerPlayback,
+  useInterviewMode,
+} from '@tomaszjarosz/react-visualizers';
+
+function CustomVisualizer() {
+  const { currentStep, isPlaying, play, pause, next, prev, reset } = useVisualizerPlayback({
+    totalSteps: 10,
+    intervalMs: 500,
+  });
+
+  return (
+    <div>
+      <VisualizationArea>
+        {/* Your visualization */}
+      </VisualizationArea>
+      <ControlPanel
+        isPlaying={isPlaying}
+        onPlay={play}
+        onPause={pause}
+        onNext={next}
+        onPrev={prev}
+        onReset={reset}
+        currentStep={currentStep}
+        totalSteps={10}
+      />
+    </div>
+  );
+}
+```
+
+### Available Hooks
+
+| Hook | Description |
+|------|-------------|
+| `useVisualizerPlayback` | Step-through animation control with play/pause |
+| `useUrlState` | Persist visualizer state in URL for sharing |
+| `useInterviewMode` | Interview session with questions and scoring |
+
+### Available Components
+
+| Component | Description |
+|-----------|-------------|
+| `ControlPanel` | Play, pause, step, reset buttons |
+| `CodePanel` | Syntax-highlighted code with line highlighting |
+| `Legend` | Color legend for visualization |
+| `StatusPanel` | Current step description |
+| `VisualizationArea` | Container with consistent styling |
+| `HelpPanel` | Keyboard shortcuts overlay |
+| `ArrayInput` | Custom array input for sorting visualizers |
+| `StepHistory` | List of executed steps |
+| `InterviewModePanel` | Question display with options and scoring |
+
+## TypeScript
+
+The library is fully typed. All types are exported:
+
+```tsx
+import type {
+  ControlPanelProps,
+  LegendItem,
+  InterviewQuestion,
+  InterviewSession,
+  UseVisualizerPlaybackOptions,
+  UseInterviewModeReturn,
 } from '@tomaszjarosz/react-visualizers';
 ```
 
 ## Development
 
 ```bash
+# Clone the repository
+git clone https://github.com/tomaszjarosz/tomaszjarosz-ui.git
+cd tomaszjarosz-ui/packages/react-visualizers
+
+# Install dependencies
+pnpm install
+
 # Run Storybook locally
 pnpm run storybook
 
@@ -110,6 +271,14 @@ pnpm run build
 pnpm run typecheck
 ```
 
+## Contributing
+
+Contributions are welcome! Please read the contributing guidelines before submitting a PR.
+
 ## License
 
-MIT
+MIT License - see [LICENSE](LICENSE) for details.
+
+## Author
+
+**Tomasz Jarosz** - [tomaszjarosz.dev](https://tomaszjarosz.dev)

package/dist/index.cjs

@@ -1637,11 +1637,46 @@ const ALGORITHM_NAMES$1 = {
   merge: "MergeSort"
 };
 const ALGORITHM_COMPLEXITIES$1 = {
-  bubble: { time: "O(n²)", space: "O(1)" },
-  selection: { time: "O(n²)", space: "O(1)" },
-  insertion: { time: "O(n²)", space: "O(1)" },
-  quick: { time: "O(n log n)", space: "O(log n)" },
-  merge: { time: "O(n log n)", space: "O(n)" }
+  bubble: {
+    time: "O(n²)",
+    best: "O(n)",
+    average: "O(n²)",
+    worst: "O(n²)",
+    space: "O(1)",
+    stable: true
+  },
+  selection: {
+    time: "O(n²)",
+    best: "O(n²)",
+    average: "O(n²)",
+    worst: "O(n²)",
+    space: "O(1)",
+    stable: false
+  },
+  insertion: {
+    time: "O(n²)",
+    best: "O(n)",
+    average: "O(n²)",
+    worst: "O(n²)",
+    space: "O(1)",
+    stable: true
+  },
+  quick: {
+    time: "O(n log n)",
+    best: "O(n log n)",
+    average: "O(n log n)",
+    worst: "O(n²)",
+    space: "O(log n)",
+    stable: false
+  },
+  merge: {
+    time: "O(n log n)",
+    best: "O(n log n)",
+    average: "O(n log n)",
+    worst: "O(n log n)",
+    space: "O(n)",
+    stable: true
+  }
 };
 const ALGORITHM_CODE$1 = {
   bubble: [
@@ -2642,6 +2677,7 @@ const SortingVisualizerComponent = ({
   const [customArray, setCustomArray] = React.useState(null);
   const [historyCollapsed, setHistoryCollapsed] = React.useState(true);
   const [urlStateLoaded, setUrlStateLoaded] = React.useState(false);
+  const [showComplexityTable, setShowComplexityTable] = React.useState(false);
   const playingRef = React.useRef(false);
   const timeoutRef = React.useRef(null);
   const VISUALIZER_ID = "sorting-visualizer";
@@ -2946,6 +2982,63 @@ const SortingVisualizerComponent = ({
             /* @__PURE__ */ jsxRuntime.jsx(HelpPanel, {})
           ] })
         ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 pb-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: () => setShowComplexityTable(!showComplexityTable),
+              className: "flex items-center gap-2 text-sm text-indigo-600 hover:text-indigo-800 font-medium transition-colors",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    className: `w-4 h-4 transition-transform ${showComplexityTable ? "rotate-90" : ""}`,
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
+                  }
+                ),
+                "Algorithm Complexity Comparison"
+              ]
+            }
+          ),
+          showComplexityTable && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 p-4 bg-gradient-to-r from-indigo-50 to-blue-50 rounded-xl border border-indigo-200", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full text-sm", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "text-left text-indigo-900", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("th", { className: "pb-2 pr-4 font-semibold", children: "Algorithm" }),
+                /* @__PURE__ */ jsxRuntime.jsx("th", { className: "pb-2 px-3 font-semibold text-center", children: "Best" }),
+                /* @__PURE__ */ jsxRuntime.jsx("th", { className: "pb-2 px-3 font-semibold text-center", children: "Average" }),
+                /* @__PURE__ */ jsxRuntime.jsx("th", { className: "pb-2 px-3 font-semibold text-center", children: "Worst" }),
+                /* @__PURE__ */ jsxRuntime.jsx("th", { className: "pb-2 px-3 font-semibold text-center", children: "Space" }),
+                /* @__PURE__ */ jsxRuntime.jsx("th", { className: "pb-2 pl-3 font-semibold text-center", children: "Stable" })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "text-gray-700", children: Object.keys(ALGORITHM_NAMES$1).map((alg) => {
+                const comp = ALGORITHM_COMPLEXITIES$1[alg];
+                const isCurrentAlgorithm = alg === algorithm;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "tr",
+                  {
+                    className: `border-t border-indigo-100 ${isCurrentAlgorithm ? "bg-indigo-100/50 font-medium" : ""}`,
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-2 pr-4", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: isCurrentAlgorithm ? "text-indigo-700" : "", children: ALGORITHM_NAMES$1[alg] }) }),
+                      /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-2 px-3 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `px-2 py-0.5 rounded text-xs ${comp.best.includes("log") ? "bg-green-100 text-green-700" : "bg-yellow-100 text-yellow-700"}`, children: comp.best }) }),
+                      /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-2 px-3 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `px-2 py-0.5 rounded text-xs ${comp.average.includes("log") ? "bg-green-100 text-green-700" : "bg-yellow-100 text-yellow-700"}`, children: comp.average }) }),
+                      /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-2 px-3 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `px-2 py-0.5 rounded text-xs ${comp.worst.includes("log") ? "bg-green-100 text-green-700" : "bg-red-100 text-red-700"}`, children: comp.worst }) }),
+                      /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-2 px-3 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `px-2 py-0.5 rounded text-xs ${comp.space === "O(1)" ? "bg-green-100 text-green-700" : "bg-purple-100 text-purple-700"}`, children: comp.space }) }),
+                      /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-2 pl-3 text-center", children: comp.stable ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-green-600", children: "✓" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-400", children: "✗" }) })
+                    ]
+                  },
+                  alg
+                );
+              }) })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-3 text-xs text-indigo-600", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Stable:" }),
+              " A sorting algorithm is stable if elements with equal keys maintain their relative order."
+            ] })
+          ] })
+        ] }),
         showControls && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3 bg-gray-50 border-t border-gray-200", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             ControlPanel,
@@ -17460,15 +17553,75 @@ const SQLJoinVisualizerComponent = ({
                 }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-gray-400 text-center py-2", children: "No results yet" })
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 p-3 bg-blue-50 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-blue-700", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
-                joinType.toUpperCase(),
-                " JOIN:"
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 p-3 bg-gradient-to-r from-cyan-50 to-blue-50 rounded-lg border border-cyan-200", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 100 60", className: "w-24 h-14 flex-shrink-0", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    cx: "35",
+                    cy: "30",
+                    r: "22",
+                    fill: joinType === "left" || joinType === "full" ? "#06b6d4" : joinType === "inner" ? "transparent" : "#e5e7eb",
+                    fillOpacity: joinType === "left" || joinType === "full" ? 0.6 : joinType === "inner" ? 0 : 0.5,
+                    stroke: "#0891b2",
+                    strokeWidth: "2"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    cx: "65",
+                    cy: "30",
+                    r: "22",
+                    fill: joinType === "right" || joinType === "full" ? "#06b6d4" : joinType === "inner" ? "transparent" : "#e5e7eb",
+                    fillOpacity: joinType === "right" || joinType === "full" ? 0.6 : joinType === "inner" ? 0 : 0.5,
+                    stroke: "#0891b2",
+                    strokeWidth: "2"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "leftClip", children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "35", cy: "30", r: "22" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    cx: "65",
+                    cy: "30",
+                    r: "22",
+                    fill: "#22c55e",
+                    fillOpacity: "0.7",
+                    clipPath: "url(#leftClip)"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("text", { x: "22", y: "33", fontSize: "8", fill: "#0e7490", fontWeight: "bold", children: "L" }),
+                /* @__PURE__ */ jsxRuntime.jsx("text", { x: "74", y: "33", fontSize: "8", fill: "#0e7490", fontWeight: "bold", children: "R" })
               ] }),
-              joinType === "inner" && " Returns only rows with matches in BOTH tables.",
-              joinType === "left" && " Returns ALL rows from left + matching rows from right (NULL if no match).",
-              joinType === "right" && " Returns ALL rows from right + matching rows from left (NULL if no match).",
-              joinType === "full" && " Returns ALL rows from BOTH tables (NULL where no match exists)."
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-semibold text-cyan-800 mb-1", children: [
+                  joinType.toUpperCase(),
+                  " JOIN"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-cyan-700", children: [
+                  joinType === "inner" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    "Returns only rows with matches in ",
+                    /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "both" }),
+                    " tables (green intersection)."
+                  ] }),
+                  joinType === "left" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    "Returns ",
+                    /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "all" }),
+                    " rows from left table + matching rows from right. NULL if no match."
+                  ] }),
+                  joinType === "right" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    "Returns ",
+                    /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "all" }),
+                    " rows from right table + matching rows from left. NULL if no match."
+                  ] }),
+                  joinType === "full" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    "Returns ",
+                    /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "all" }),
+                    " rows from both tables. NULL where no match exists."
+                  ] })
+                ] })
+              ] })
             ] }) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               StatusPanel,