fix: black color not apply

ui/components/panels/RenderControlsPanel.tsx

@@ -126,6 +126,8 @@ const predictionColor = (prediction?: FontPrediction | null): number[] | undefin
 const effectiveColorOf = (style?: TextStyle | null, prediction?: FontPrediction | null): number[] =>
   style?.color ?? predictionColor(prediction) ?? DEFAULT_COLOR
 
+const hasExplicitColor = (node: TextNodeEntry) => Array.isArray(node.data.style?.color)
+
 export function RenderControlsPanel() {
   const { t } = useTranslation()
   const page = useCurrentPage()
@@ -239,6 +241,12 @@ export function RenderControlsPanel() {
     applyStyleToNodes(textNodes, updates, 'Bulk style update')
   }
 
+  const commitCurrentFontColorIfImplicit = () => {
+    const targets = selectedNodes.length > 0 ? selectedNodes : textNodes
+    if (targets.every(hasExplicitColor)) return
+    applyStyleToNodes(targets, { color: currentColor }, 'Explicit font color update')
+  }
+
   const applyStrokeSetting = (nextStroke: TextStrokeStyle) => {
     if (applyStyleToSelected({ stroke: normalizeStroke(nextStroke) })) return
     setRenderStroke({
@@ -336,6 +344,9 @@ export function RenderControlsPanel() {
             swatchTestId='render-color-swatch'
             inputTestId='render-color-input'
             pickButtonTestId='render-color-pick'
+            onOpenChange={(open) => {
+              if (open) commitCurrentFontColorIfImplicit()
+            }}
             onChange={(hex) => {
               const nextColor = hexToColor(hex, currentColor[3] ?? 255)
               if (applyStyleToSelected({ color: nextColor })) return

ui/components/ui/color-picker.tsx

@@ -10,6 +10,7 @@ import { cn } from '@/lib/utils'
 type ColorPickerProps = {
   value: string
   onChange: (color: string) => void
+  onOpenChange?: (open: boolean) => void
   disabled?: boolean
   className?: string
   triggerTestId?: string
@@ -35,6 +36,7 @@ const normalizeHex = (value: string) => {
 export function ColorPicker({
   value,
   onChange,
+  onOpenChange,
   disabled,
   className,
   triggerTestId,
@@ -81,7 +83,7 @@ export function ColorPicker({
   }
 
   return (
-    <Popover>
+    <Popover onOpenChange={onOpenChange}>
       <PopoverTrigger asChild>
         <button
           data-testid={triggerTestId}

ui/tests/components/RenderControlsPanel.test.tsx

@@ -169,4 +169,34 @@ describe('RenderControlsPanel Font Assignment', () => {
     await waitFor(() => expect(input.value).toBe(''))
     expect(input).toHaveAttribute('placeholder', 'auto')
   })
+
+  it('opening the font color picker commits effective black as an explicit color', async () => {
+    server.use(
+      http.get('/api/v1/scene.json', () =>
+        HttpResponse.json(
+          sceneWithTextNodes([
+            {
+              id: 't1',
+              kind: {
+                text: {
+                  fontPrediction: { fontSizePx: 66, strokeWidthPx: 0, textColor: [0, 0, 0] },
+                },
+              },
+            },
+          ]),
+        ),
+      ),
+    )
+
+    renderWithQuery(<RenderControlsPanel />)
+    useSelectionStore.getState().select('t1', false)
+
+    const trigger = await screen.findByTestId('render-color-trigger')
+    await userEvent.click(trigger)
+
+    await waitFor(() => expect(sceneActions.applyOp).toHaveBeenCalled())
+    const op = (sceneActions.applyOp as any).mock.calls[0][0]
+    expect(op.updateNode.id).toBe('t1')
+    expect(op.updateNode.patch.data.text.style.color).toEqual([0, 0, 0, 255])
+  })
 })