phase 1

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[]>

ui/detection-app/src/components/StageConfigSliders.vue

@@ -5,8 +5,8 @@ import {
   runEdgeDetectionDebug,
   b64ToImageData,
   imageDataToB64,
-  type EdgeDetectionParams,
+} from 'mpr-ui-framework'
-} from 'mpr-ui-framework/src/cv'
+import type { EdgeDetectionParams } from 'mpr-ui-framework'
 
 interface ConfigField {
   name: string

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 { Panel, TableRenderer } from 'mpr-ui-framework'
-import TableRenderer from 'mpr-ui-framework/src/renderers/TableRenderer.vue'
+import type { TableColumn, DataSource } from 'mpr-ui-framework'
-import type { TableColumn } from 'mpr-ui-framework/src/renderers/TableRenderer.vue'
-import type { DataSource } from 'mpr-ui-framework'
 
 const props = defineProps<{
   source: DataSource

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 { Panel, FrameRenderer } from 'mpr-ui-framework'
-import FrameRenderer from 'mpr-ui-framework/src/renderers/FrameRenderer.vue'
+import type { FrameBBox, FrameOverlay, DataSource } from 'mpr-ui-framework'
-import type { FrameBBox, FrameOverlay } from 'mpr-ui-framework/src/renderers/FrameRenderer.vue'
-import type { 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 ?? '')

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 { Panel, TimeSeriesRenderer } from 'mpr-ui-framework'
-import TimeSeriesRenderer from 'mpr-ui-framework/src/renderers/TimeSeriesRenderer.vue'
 import type { DataSource } from 'mpr-ui-framework'
 import type { StatsUpdate } from '../types/sse-contract'
 

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 { Panel, LogRenderer } from 'mpr-ui-framework'
-import LogRenderer from 'mpr-ui-framework/src/renderers/LogRenderer.vue'
+import type { LogEntry, DataSource } from 'mpr-ui-framework'
-import type { LogEntry } from 'mpr-ui-framework/src/renderers/LogRenderer.vue'
-import type { DataSource } from 'mpr-ui-framework'
 import type { LogEvent } from '../types/sse-contract'
 
 const props = defineProps<{

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 { Panel, GraphRenderer } from 'mpr-ui-framework'
-import GraphRenderer from 'mpr-ui-framework/src/renderers/GraphRenderer.vue'
+import type { GraphNode, DataSource } from 'mpr-ui-framework'
-import type { GraphNode } from 'mpr-ui-framework/src/renderers/GraphRenderer.vue'
-import type { DataSource } from 'mpr-ui-framework'
 import { usePipelineStore } from '../stores/pipeline'
 
 const PIPELINE_NODES = [

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