Move reusable color picker logic into Vue SDK

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'

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 })

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'

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'
 

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'
 

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'

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'
 

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'