Fix SF color button state sync and touch event handling

[jackgranatowski]

Summary

This PR improves the reliability of the SLASHED color button in the Bricks editor by ensuring its visual state stays synchronized with the color input value across all change paths, and adds proper touch event handling to the color panel.

Key Changes

• Refactored button state management: Extracted the logic for syncing the SF button's dot appearance into a new syncSFButtonState() function that is called on every injectSFButton() pass, not just on initial creation. This ensures the button's visual state reflects the current input value even when the color changes through paths that don't tear out the button (e.g., Bricks' own color palette, dynamic data, manual edits).

• Improved button creation logic: Changed from an early return when the button already exists to a conditional creation pattern. The button is now only created once, but its state is always synchronized with the live input value.

• Enhanced dot state reset: The dot now properly resets to its default colourful conic-gradient appearance when the input no longer contains a recognized --sf-color-* variable, preventing stale SF swatches from persisting after picking colors through Bricks' own UI.

• Added touch event handling: Added onpointerdown and ontouchstart event handlers to the color panel to prevent event propagation, ensuring consistent behavior across mouse, pointer, and touch interactions.

Implementation Details

The syncSFButtonState() function now handles both the active state (when a known SF color variable is present) and the inactive state (resetting styles when the variable is no longer recognized). This makes the button's appearance a true reflection of the current input value rather than a snapshot from when the button was created.

https://claude.ai/code/session_01HTA4dAMyd66yL6BAm7vWcu

Summary by CodeRabbit

• Bug Fixes
  • Improved touch and pointer event handling in the color selection panel to prevent unintended interactions.
  • Enhanced color swatch button synchronization to reliably display the currently selected color value during editing operations.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 3e99328a-7aec-46aa-a7a3-4e478a4d8a70

📥 Commits

Reviewing files that changed from the base of the PR and between da25138 and 7e822f2.

📒 Files selected for processing (3)

• plugins/SLASHED-for-WP/integrations/bricks/assets/editor-app/app.js
• plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/components/ColorPanel.svelte
• plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/lib/color-swatches.js

---

📝 Walkthrough

Walkthrough

The PR improves the SF color picker UI in the Bricks editor by fixing event propagation in the color panel dialog and refactoring the SF color button injector to be reuse-safe and keep the button state synchronized with the current color input.

Changes

SF Color Picker UI

Layer / File(s)	Summary
Dialog event propagation control plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/components/ColorPanel.svelte	ColorPanel dialog root now stops onpointerdown and ontouchstart event propagation alongside existing click and mousedown handlers, preventing parent document event handlers from interfering with color selection.
SF color button reuse and state synchronization plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/lib/color-swatches.js	injectSFButton() refactored to reuse existing buttons (creating only when missing) instead of returning early, and now always calls syncSFButtonState() to keep the button dot and active class synchronized with the live color input's resolved var(--sf-color-*) token from the _hexMap.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• codeslash-dev/SLASHED#212: Both PRs modify SF color UI wiring by updating ColorPanel.svelte event propagation and refactoring injectSFButton() interaction handlers.
• codeslash-dev/SLASHED#201: Both PRs directly modify the same SF color panel components—ColorPanel.svelte event handling and color-swatches.js button/dot state synchronization logic.
• codeslash-dev/SLASHED#208: Both PRs adjust how user pointer/touch/click events in ColorPanel.svelte are handled to prevent Bricks document-level handlers from interfering with SF swatch picking.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly and specifically describes the two main changes: SF color button state sync (reusable injection, state reconciliation) and touch/pointer event handling for the color panel.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/vibrant-meitner-2tOhM

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[jackgranatowski]

@coderabbitai review

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.