Revert "feat(step updates): group/pivot/join"

This reverts commit 6893a91.

Author: jedwin3210

apps/web/package-lock.json

@@ -23,7 +23,6 @@
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react": "^4.3.1",
-    "baseline-browser-mapping": "^2.9.19",
     "eslint": "^8.57.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.37.0",

apps/web/package.json

@@ -5,7 +5,6 @@ import './App.css';
 import { Editor } from '@monaco-editor/react';
 import TracePanel from './components/TracePanel';
 import { StepCard } from './components/StepSlideshow';
-import { expandTraceToDisplaySteps } from './lib/displaySteps';
 import ExamplesGallery from './components/ExamplesGallery';
 import { initPyodide, runPythonCode, type PyodideOutput } from './lib/pyodide';
 import { type Example } from './lib/examples';
@@ -389,31 +388,28 @@ function App() {
       </div>
 
       {/* Hidden container for multi-step PDF export (off-screen, same layout as panel) */}
-      {isExportingPdf && output.trace && output.trace.length > 0 && (() => {
-        const exportDisplaySteps = expandTraceToDisplaySteps(output.trace!);
-        return (
-          <div
-            ref={exportContainerRef}
-            className="export-pdf-container"
-            style={{
-              position: 'absolute',
-              left: '-9999px',
-              top: 0,
-              width: 640,
-              zIndex: -1,
-            }}
-          >
-            {exportDisplaySteps.map((step, i) => (
-              <StepCard
-                key={i}
-                step={step}
-                stepIndex={i}
-                totalSteps={exportDisplaySteps.length}
-              />
-            ))}
-          </div>
-        );
-      })()}
+      {isExportingPdf && output.trace && output.trace.length > 0 && (
+        <div
+          ref={exportContainerRef}
+          className="export-pdf-container"
+          style={{
+            position: 'absolute',
+            left: '-9999px',
+            top: 0,
+            width: 640,
+            zIndex: -1,
+          }}
+        >
+          {output.trace.map((record, i) => (
+            <StepCard
+              key={i}
+              record={record}
+              stepIndex={i}
+              totalSteps={output.trace!.length}
+            />
+          ))}
+        </div>
+      )}
 
       {/* Examples Gallery Modal */}
       {showGallery && (

apps/web/src/App.tsx

@@ -18,11 +18,6 @@
   transform: translateY(0);
 }
 
-/* Join: left table | right table | result */
-.data-transformation.join-three-panel {
-  grid-template-columns: 1fr 1fr auto 1fr;
-}
-
 /* Transform Sections */
 .transform-section {
   display: flex;
@@ -155,38 +150,6 @@
   font-weight: 500;
 }
 
-/* Group/Join: highlight key column (group column or join column) */
-.data-table.compact th.highlight-col,
-.data-table.compact td.highlight-col {
-  background-color: rgba(59, 126, 161, 0.35) !important;
-  border-left: 3px solid rgba(255, 198, 70, 0.6);
-  border-right: 1px solid rgba(59, 126, 161, 0.4);
-  color: var(--text-primary);
-}
-
-/* Row highlight (e.g. group matching rows) */
-.data-table.compact tr.highlight-row td {
-  background-color: rgba(59, 126, 161, 0.4) !important;
-  border-left: 2px solid rgba(255, 198, 70, 0.5);
-}
-
-/* Cell highlight (e.g. pivot cell) */
-.data-table.compact td.highlight-cell {
-  background-color: rgba(255, 198, 70, 0.2) !important;
-  border: 1px solid rgba(255, 198, 70, 0.5);
-}
-
-.unique-values-callout {
-  padding: 0.5rem 0.75rem;
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-  font-family: 'Source Code Pro', 'Courier New', monospace;
-  background-color: rgba(0, 40, 80, 0.6);
-  border-radius: 6px;
-  margin-top: 0.5rem;
-  border: 1px solid rgba(59, 126, 161, 0.35);
-}
-
 /* Step 1 (empty → with_columns): higher contrast so table is easy to read */
 .data-transformation .after.initialization-result .data-table.compact td {
   color: var(--text-primary);
@@ -290,11 +253,6 @@
     grid-template-rows: auto auto auto;
   }
 
-  .data-transformation.join-three-panel {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto auto auto auto;
-  }
-
   .transform-arrow-container {
     transform: rotate(90deg);
     margin: 1rem 0;