Editor's Path Properties has 'Path Properties' but no 'Path color reference' (which catalog entry this path's color matches) — user with the path in #FF0000 doesn't know 'is this Robison-Anton 9012 or Brother PR-10 slot 14?' #381

New issue

Closed

opened 2026-10-04 04:00:40 +00:00 by Mark · 1 comment

Mark commented

2026-10-04 04:00:40 +00:00

Owner

Finding

grep -rn 'colorReference\|catalogColor' src/components/editor/EditorRightPanel.tsx returns 0. The Path Properties doesn't show which catalog color the path matches.

A user with a path in #FF0000:

Wants to know "is this Robison-Anton 9012?"
Has to compare visually
The hex alone doesn't tell them

The fix is to show the matched catalog entry (per #341's color distance) prominently.

Where

Path Properties: src/components/editor/EditorRightPanel.tsx
No color reference: grep -rn 'colorReference' src/components/editor/ returns 0
The catalog: passed in as catalog: ThreadColor[]

Suggested fix shape

UI: in the Path Properties section, show the matched catalog entry:

{matchedCatalogColor ? (
  <div className="text-[11px]">
    Matches: <span style={{ color: matchedCatalogColor.hex }}>●</span> {matchedCatalogColor.name}
  </div>
) : (
  <div className="text-[11px]">
    No exact match. Closest: <span style={{ color: closestColor.hex }}>●</span> {closestColor.name} (Δ {distance})
  </div>
)}

Use cases:

The user wants to know "which catalog color am I using?"
The user wants to find the exact name for ordering thread

Reuse #341's color distance algorithm:

Find the catalog entry with the closest hex
Show the distance

Severity**

Low. The user can compare visually. Power users with thread ordering notice.

Discovered by

Gap analysis (2026-10-02) of editor path properties.

#341 (open) — Color distance. The algorithm; this is the display.
#282 (open) — Color name in path list row. The row version.
Wilcom/Hatch show the catalog name. The editor's gap is the parallel.

## Finding `grep -rn 'colorReference\|catalogColor' src/components/editor/EditorRightPanel.tsx` returns 0. The Path Properties doesn't show which catalog color the path matches. A user with a path in #FF0000: - Wants to know "is this Robison-Anton 9012?" - Has to compare visually - The hex alone doesn't tell them The fix is to show the matched catalog entry (per #341's color distance) prominently. ## Where - Path Properties: `src/components/editor/EditorRightPanel.tsx` - No color reference: `grep -rn 'colorReference' src/components/editor/` returns 0 - The catalog: passed in as `catalog: ThreadColor[]` ## Suggested fix shape 1. **UI**: in the Path Properties section, show the matched catalog entry: ```tsx {matchedCatalogColor ? ( <div className="text-[11px]"> Matches: <span style={{ color: matchedCatalogColor.hex }}>●</span> {matchedCatalogColor.name} </div> ) : ( <div className="text-[11px]"> No exact match. Closest: <span style={{ color: closestColor.hex }}>●</span> {closestColor.name} (Δ {distance}) </div> )} ``` 2. **Use cases**: - The user wants to know "which catalog color am I using?" - The user wants to find the exact name for ordering thread 3. **Reuse #341's color distance algorithm**: - Find the catalog entry with the closest hex - Show the distance ## Severity** Low. The user can compare visually. Power users with thread ordering notice. ## Discovered by Gap analysis (2026-10-02) of editor path properties. ## Related** - #341 (open) — Color distance. The algorithm; this is the display. - #282 (open) — Color name in path list row. The row version. - Wilcom/Hatch show the catalog name. The editor's gap is the parallel.

Mark added the

feature-request

triage-approved

labels

2026-10-04 04:00:40 +00:00

Mark referenced this issue from a commit

2026-10-05 18:11:03 +00:00

feat(#381): path color reference in editor Path Properties — shows which catalog entry matches the path's hex

Mark commented

2026-10-05 18:11:27 +00:00

Author

Owner

Closed by commit bf0a32b on origin/main.

Added a path color reference read-out directly below the THREAD COLOR row in editor Path Properties:

exact hex match → "Matches: ()" with a colored dot in the catalog entry hex
off-catalog hex → "No exact match. Closest: () · Δ " using the same Euclidean sRGB distance the picker grid uses (#341), so a "Δ 78" badge here means the same thing it means on a swatch

Implementation:

EditorRightPanel.tsx: added findColorReference(hex, catalog) helper alongside getCatalogName (#282), returning {kind:exact,...} / {kind:closest,..., distance} / {kind:none}
The read-out sits OUTSIDE the color-picker motion.div, so users who pasted a hex and never opened the picker still see the reference
Suppressed in mixed-color multi-select (primary path value isn't shared) and when the catalog is empty
Reuses the panel-local colorDistance helper (#341) so the picker grid badge and this read-out use the same units

8 new tests in issue-381.test.tsx pin exact-match render, closest-match ordering for off-catalog hexes, mixed-selection suppression, empty-catalog suppression, re-render updates, and picker-collapsed visibility.

Closes #381.

Closed by commit bf0a32b on origin/main. Added a path color reference read-out directly below the THREAD COLOR row in editor Path Properties: - exact hex match → "Matches: <name> (<id>)" with a colored dot in the catalog entry hex - off-catalog hex → "No exact match. Closest: <name> (<id>) · Δ <N>" using the same Euclidean sRGB distance the picker grid uses (#341), so a "Δ 78" badge here means the same thing it means on a swatch Implementation: - EditorRightPanel.tsx: added `findColorReference(hex, catalog)` helper alongside `getCatalogName` (#282), returning `{kind:exact,...}` / `{kind:closest,..., distance}` / `{kind:none}` - The read-out sits OUTSIDE the color-picker motion.div, so users who pasted a hex and never opened the picker still see the reference - Suppressed in mixed-color multi-select (primary path value isn't shared) and when the catalog is empty - Reuses the panel-local `colorDistance` helper (#341) so the picker grid badge and this read-out use the same units 8 new tests in issue-381.test.tsx pin exact-match render, closest-match ordering for off-catalog hexes, mixed-selection suppression, empty-catalog suppression, re-render updates, and picker-collapsed visibility. Closes #381.

Mark closed this issue

2026-10-05 18:11:27 +00:00