diff --git a/packages/vue/src/ColorPicker/index.ts b/packages/vue/src/ColorPicker/index.ts
index d4cca1749..dadd45068 100644
--- a/packages/vue/src/ColorPicker/index.ts
+++ b/packages/vue/src/ColorPicker/index.ts
@@ -1,2 +1,18 @@
 export { default as ColorInputRoot } from './ColorInputRoot.vue'
 export { default as ColorPickerRoot } from './ColorPickerRoot.vue'
+export {
+  createColorPickerModel,
+  createOkHCLSliderGradientModel,
+  createOkHCLSliderPreviewModel,
+  createSliderGradientModel,
+  createSliderPreviewModel,
+  fromPercent,
+  rekaToAppColor,
+  toPercent,
+  updateAlpha,
+  updateHSBChannel,
+  updateHSLChannel,
+  updateHue,
+  updateRGBChannel
+} from './model'
+export { applySolidFillColor, applySolidStrokeColor } from './solid-color'
diff --git a/src/components/color-picker/model.ts b/packages/vue/src/ColorPicker/model.ts
similarity index 100%
rename from src/components/color-picker/model.ts
rename to packages/vue/src/ColorPicker/model.ts
index e8edf0757..61a637e5f 100644
--- a/src/components/color-picker/model.ts
+++ b/packages/vue/src/ColorPicker/model.ts
@@ -38,6 +38,11 @@ export interface OkHCLSliderGradientModel {
   okhclLightness: string
 }
 
+const OKHCL_CHROMA_MAX = 0.4
+const OKHCL_LIGHTNESS_MID = 0.5
+const OKHCL_HUE_PREVIEW_MIN_CHROMA = 0.15
+const OKHCL_HUE_PREVIEW_FALLBACK_LIGHTNESS = 0.7
+
 export function createColorPickerModel(color: Color): ColorPickerModel {
   const rekaColor = {
     space: 'rgb' as const,
@@ -137,11 +142,6 @@ export function createOkHCLSliderPreviewModel(color: OkHCLColor): OkHCLSliderPre
   }
 }
 
-const OKHCL_CHROMA_MAX = 0.4
-const OKHCL_LIGHTNESS_MID = 0.5
-const OKHCL_HUE_PREVIEW_MIN_CHROMA = 0.15
-const OKHCL_HUE_PREVIEW_FALLBACK_LIGHTNESS = 0.7
-
 export function createOkHCLSliderGradientModel(color: OkHCLColor): OkHCLSliderGradientModel {
   const lowChroma = okhclToRGBA({ ...color, c: 0 })
   const highChroma = okhclToRGBA({ ...color, c: OKHCL_CHROMA_MAX })
diff --git a/src/components/color-picker/solid-color-commit.ts b/packages/vue/src/ColorPicker/solid-color.ts
similarity index 100%
rename from src/components/color-picker/solid-color-commit.ts
rename to packages/vue/src/ColorPicker/solid-color.ts
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index aa528fe72..6903cbc74 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -70,7 +70,25 @@ export { useFontPicker } from './FontPicker/useFontPicker'
 /** Headless structural primitives and their local contexts. */
 export { CanvasRoot, CanvasSurface, useCanvasContext } from './Canvas'
 export type { CanvasContext } from './Canvas'
-export { ColorInputRoot, ColorPickerRoot } from './ColorPicker'
+export {
+  ColorInputRoot,
+  ColorPickerRoot,
+  createColorPickerModel,
+  createOkHCLSliderGradientModel,
+  createOkHCLSliderPreviewModel,
+  createSliderGradientModel,
+  createSliderPreviewModel,
+  fromPercent,
+  rekaToAppColor,
+  toPercent,
+  updateAlpha,
+  updateHSBChannel,
+  updateHSLChannel,
+  updateHue,
+  updateRGBChannel,
+  applySolidFillColor,
+  applySolidStrokeColor
+} from './ColorPicker'
 export { FillPickerRoot } from './FillPicker'
 export { FontPickerRoot } from './FontPicker'
 export { GradientEditorRoot, GradientEditorBar, GradientEditorStop } from './GradientEditor'
diff --git a/src/components/ColorPickerPanel.vue b/src/components/ColorPickerPanel.vue
index 1889113cd..7b907b91c 100644
--- a/src/components/ColorPickerPanel.vue
+++ b/src/components/ColorPickerPanel.vue
@@ -5,8 +5,6 @@ import { ColorAreaRoot, ColorAreaArea, ColorAreaThumb } from 'reka-ui'
 import type { Color } from '@open-pencil/core'
 import { colorToCSS } from '@open-pencil/core'
 import type { OkHCLControls } from '@open-pencil/vue/ColorPicker/types'
-import { useI18n } from '@open-pencil/vue'
-
 import {
   createColorPickerModel,
   createOkHCLSliderGradientModel,
@@ -20,8 +18,9 @@ import {
   updateHSBChannel,
   updateHSLChannel,
   updateHue,
-  updateRGBChannel
-} from './color-picker/model'
+  updateRGBChannel,
+  useI18n
+} from '@open-pencil/vue'
 import PickerSlider from './PickerSlider.vue'
 import AppSelect from './ui/AppSelect.vue'
 
diff --git a/src/components/FillPicker.vue b/src/components/FillPicker.vue
index 7d60084cb..4ee7245a4 100644
--- a/src/components/FillPicker.vue
+++ b/src/components/FillPicker.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { twMerge } from 'tailwind-merge'
 
-import { FillPickerRoot, useI18n } from '@open-pencil/vue'
+import { applySolidFillColor, FillPickerRoot, useI18n } from '@open-pencil/vue'
 
 import GradientEditor from './GradientEditor.vue'
 import ColorPickerPanel from './ColorPickerPanel.vue'
 import ImageFillPicker from './ImageFillPicker.vue'
-import { applySolidFillColor } from './color-picker/solid-color-commit'
 import Tip from './ui/Tip.vue'
 import { usePopoverUI } from './ui/popover'
 
diff --git a/src/components/properties/StrokeSection.vue b/src/components/properties/StrokeSection.vue
index c69ad1959..5be2dc5f7 100644
--- a/src/components/properties/StrokeSection.vue
+++ b/src/components/properties/StrokeSection.vue
@@ -2,6 +2,7 @@
 import { ref } from 'vue'
 
 import {
+  applySolidStrokeColor,
   PropertyListRoot,
   useColorVariableBinding,
   useStrokeControls,
@@ -10,7 +11,6 @@ import {
 } from '@open-pencil/vue'
 
 import ColorStyleRow from '@/components/properties/ColorStyleRow.vue'
-import { applySolidStrokeColor } from '@/components/color-picker/solid-color-commit'
 import AppSelect from '@/components/ui/AppSelect.vue'
 import ColorInput from '@/components/ColorInput.vue'
 import ScrubInput from '@/components/ScrubInput.vue'
diff --git a/tests/engine/color-picker-model.test.ts b/tests/engine/color-picker-model.test.ts
index 2e41c365a..aa59ad9e5 100644
--- a/tests/engine/color-picker-model.test.ts
+++ b/tests/engine/color-picker-model.test.ts
@@ -9,7 +9,7 @@ import {
   updateHSLChannel,
   updateHue,
   updateRGBChannel
-} from '@/components/color-picker/model'
+} from '@open-pencil/vue'
 
 import type { Color } from '@open-pencil/core'
 
diff --git a/tests/engine/solid-color-commit.test.ts b/tests/engine/solid-color-commit.test.ts
index ab760d543..b383607b4 100644
--- a/tests/engine/solid-color-commit.test.ts
+++ b/tests/engine/solid-color-commit.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, test } from 'bun:test'
 
-import { applySolidFillColor, applySolidStrokeColor } from '@/components/color-picker/solid-color-commit'
+import { applySolidFillColor, applySolidStrokeColor } from '@open-pencil/vue'
 
 import type { Fill, Stroke } from '@open-pencil/core'