From bf30acd4df8ec745b335ce05eddce25679ce2ceb Mon Sep 17 00:00:00 2001
From: buenosairesam <mariano@gotadeinfo.com>
Date: Fri, 27 Mar 2026 22:15:50 -0300
Subject: [PATCH] phase 1

---
 ui/detection-app/src/App.vue                  |  7 ++---
 .../src/components/StageConfigSliders.vue     |  4 +--
 .../src/panels/BrandTablePanel.vue            |  6 ++--
 ui/detection-app/src/panels/FramePanel.vue    |  8 ++---
 ui/detection-app/src/panels/FunnelPanel.vue   |  3 +-
 ui/detection-app/src/panels/LogPanel.vue      |  6 ++--
 .../src/panels/PipelineGraphPanel.vue         |  6 ++--
 ui/framework/src/index.ts                     | 30 +++++++++++++++++++
 8 files changed, 45 insertions(+), 25 deletions(-)

diff --git a/ui/detection-app/src/App.vue b/ui/detection-app/src/App.vue
index b928f85..71c252a 100644
--- a/ui/detection-app/src/App.vue
+++ b/ui/detection-app/src/App.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { SSEDataSource, Panel, ResizeHandle } from 'mpr-ui-framework'
+import { SSEDataSource, Panel, ResizeHandle, matchTracks, renderTracksToImageData, imageDataToPngB64 } from 'mpr-ui-framework'
+import type { FrameOverlay, FrameBBox } from 'mpr-ui-framework'
 import 'mpr-ui-framework/src/tokens.css'
 import LogPanel from './panels/LogPanel.vue'
 import FunnelPanel from './panels/FunnelPanel.vue'
@@ -13,8 +14,6 @@ import SourceSelector from './panels/SourceSelector.vue'
 import StageConfigSliders from './components/StageConfigSliders.vue'
 import FrameStrip from './components/FrameStrip.vue'
 import type { StatsUpdate, RunContext } from './types/sse-contract'
-import type { FrameOverlay } from 'mpr-ui-framework/src/renderers/FrameRenderer.vue'
-import { matchTracks, renderTracksToImageData, imageDataToPngB64 } from 'mpr-ui-framework/src/cv'
 import { usePipelineStore } from './stores/pipeline'
 
 const pipeline = usePipelineStore()
@@ -265,7 +264,7 @@ vueWatch(
 const editorOverlays = ref<FrameOverlay[]>([])
 
 // Boxes from edge detection (local or server)
-const editorBoxes = ref<import('mpr-ui-framework/src/renderers/FrameRenderer.vue').FrameBBox[]>([])
+const editorBoxes = ref<FrameBBox[]>([])
 
 function onReplayResult(result: {
   regions_by_frame?: Record<string, unknown[]>
diff --git a/ui/detection-app/src/components/StageConfigSliders.vue b/ui/detection-app/src/components/StageConfigSliders.vue
index 69e388f..97e4f8f 100644
--- a/ui/detection-app/src/components/StageConfigSliders.vue
+++ b/ui/detection-app/src/components/StageConfigSliders.vue
@@ -5,8 +5,8 @@ import {
   runEdgeDetectionDebug,
   b64ToImageData,
   imageDataToB64,
-  type EdgeDetectionParams,
-} from 'mpr-ui-framework/src/cv'
+} from 'mpr-ui-framework'
+import type { EdgeDetectionParams } from 'mpr-ui-framework'
 
 interface ConfigField {
   name: string
diff --git a/ui/detection-app/src/panels/BrandTablePanel.vue b/ui/detection-app/src/panels/BrandTablePanel.vue
index db131d0..02db6b7 100644
--- a/ui/detection-app/src/panels/BrandTablePanel.vue
+++ b/ui/detection-app/src/panels/BrandTablePanel.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Panel } from 'mpr-ui-framework'
-import TableRenderer from 'mpr-ui-framework/src/renderers/TableRenderer.vue'
-import type { TableColumn } from 'mpr-ui-framework/src/renderers/TableRenderer.vue'
-import type { DataSource } from 'mpr-ui-framework'
+import { Panel, TableRenderer } from 'mpr-ui-framework'
+import type { TableColumn, DataSource } from 'mpr-ui-framework'
 
 const props = defineProps<{
   source: DataSource
diff --git a/ui/detection-app/src/panels/FramePanel.vue b/ui/detection-app/src/panels/FramePanel.vue
index f092be6..e74f704 100644
--- a/ui/detection-app/src/panels/FramePanel.vue
+++ b/ui/detection-app/src/panels/FramePanel.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
-import { Panel } from 'mpr-ui-framework'
-import FrameRenderer from 'mpr-ui-framework/src/renderers/FrameRenderer.vue'
-import type { FrameBBox, FrameOverlay } from 'mpr-ui-framework/src/renderers/FrameRenderer.vue'
-import type { DataSource } from 'mpr-ui-framework'
+import { Panel, FrameRenderer } from 'mpr-ui-framework'
+import type { FrameBBox, FrameOverlay, DataSource } from 'mpr-ui-framework'
 
 const props = defineProps<{
   source: DataSource
@@ -13,7 +11,7 @@ const props = defineProps<{
   /** Frame image from checkpoint (scenario mode) — overrides SSE */
   frameImage?: string | null
   /** Boxes from editor (local CV or server) — merged with SSE boxes */
-  editorBoxes?: import('mpr-ui-framework/src/renderers/FrameRenderer.vue').FrameBBox[]
+  editorBoxes?: FrameBBox[]
 }>()
 
 const imageSrc = ref(props.frameImage ?? '')
diff --git a/ui/detection-app/src/panels/FunnelPanel.vue b/ui/detection-app/src/panels/FunnelPanel.vue
index 706499a..c327772 100644
--- a/ui/detection-app/src/panels/FunnelPanel.vue
+++ b/ui/detection-app/src/panels/FunnelPanel.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { Panel } from 'mpr-ui-framework'
-import TimeSeriesRenderer from 'mpr-ui-framework/src/renderers/TimeSeriesRenderer.vue'
+import { Panel, TimeSeriesRenderer } from 'mpr-ui-framework'
 import type { DataSource } from 'mpr-ui-framework'
 import type { StatsUpdate } from '../types/sse-contract'
 
diff --git a/ui/detection-app/src/panels/LogPanel.vue b/ui/detection-app/src/panels/LogPanel.vue
index a95a2af..de8b2e1 100644
--- a/ui/detection-app/src/panels/LogPanel.vue
+++ b/ui/detection-app/src/panels/LogPanel.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Panel } from 'mpr-ui-framework'
-import LogRenderer from 'mpr-ui-framework/src/renderers/LogRenderer.vue'
-import type { LogEntry } from 'mpr-ui-framework/src/renderers/LogRenderer.vue'
-import type { DataSource } from 'mpr-ui-framework'
+import { Panel, LogRenderer } from 'mpr-ui-framework'
+import type { LogEntry, DataSource } from 'mpr-ui-framework'
 import type { LogEvent } from '../types/sse-contract'
 
 const props = defineProps<{
diff --git a/ui/detection-app/src/panels/PipelineGraphPanel.vue b/ui/detection-app/src/panels/PipelineGraphPanel.vue
index ef60e17..5a3ab1b 100644
--- a/ui/detection-app/src/panels/PipelineGraphPanel.vue
+++ b/ui/detection-app/src/panels/PipelineGraphPanel.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Panel } from 'mpr-ui-framework'
-import GraphRenderer from 'mpr-ui-framework/src/renderers/GraphRenderer.vue'
-import type { GraphNode } from 'mpr-ui-framework/src/renderers/GraphRenderer.vue'
-import type { DataSource } from 'mpr-ui-framework'
+import { Panel, GraphRenderer } from 'mpr-ui-framework'
+import type { GraphNode, DataSource } from 'mpr-ui-framework'
 import { usePipelineStore } from '../stores/pipeline'
 
 const PIPELINE_NODES = [
diff --git a/ui/framework/src/index.ts b/ui/framework/src/index.ts
index 9d52836..e787f7c 100644
--- a/ui/framework/src/index.ts
+++ b/ui/framework/src/index.ts
@@ -16,9 +16,39 @@ export { default as GraphRenderer } from './renderers/GraphRenderer.vue'
 export { default as FrameRenderer } from './renderers/FrameRenderer.vue'
 export { default as TableRenderer } from './renderers/TableRenderer.vue'
 
+// Renderer types
+export type { FrameBBox, FrameOverlay } from './renderers/FrameRenderer.vue'
+export type { LogEntry } from './renderers/LogRenderer.vue'
+export type { GraphNode } from './renderers/GraphRenderer.vue'
+export type { TableColumn } from './renderers/TableRenderer.vue'
+export type { TimeSeriesSeries } from './renderers/TimeSeriesRenderer.vue'
+
 // Interaction plugins
 export type { InteractionPlugin, PluginContext } from './plugins/InteractionPlugin'
 export { BBoxDrawPlugin } from './plugins/BBoxDrawPlugin'
 export type { BBoxResult, BBoxCallback } from './plugins/BBoxDrawPlugin'
 export { CrosshairPlugin } from './plugins/CrosshairPlugin'
 export type { CrosshairCallback } from './plugins/CrosshairPlugin'
+
+// CV utilities
+export {
+  runEdgeDetection,
+  runEdgeDetectionDebug,
+  matchTracks,
+  renderTracksToImageData,
+  b64ToImageData,
+  imageDataToPngB64,
+  imageDataToB64,
+} from './cv'
+export type {
+  EdgeRegion,
+  EdgeDetectionParams,
+  EdgeDetectionResult,
+  EdgeDetectionDebugResult,
+  Track,
+  TrackPoint,
+} from './cv'
+
+// Design tokens (CSS import)
+// Usage: import 'mpr-ui-framework/tokens.css'
+// Re-exported at package level via package.json exports