Editor's Path Properties has 'Stitch type' but the dropdown uses internal IDs ('satin', 'fill') instead of human-readable labels ('Satin Stitch (Tatami)', 'Fill Stitch (Tatami)') — user has to map IDs to display names in their head #348

New issue

Closed

opened 2026-10-04 03:55:35 +00:00 by Mark · 1 comment

Mark commented

2026-10-04 03:55:35 +00:00

Owner

Finding

grep -rn 'STITCH_LABELS\|userFacingStitch' src/components/workspace/pathDefaults.ts returns 5:

export const STITCH_LABELS: Record<UserFacingStitchType, string> = {
  satin: 'Satin',
  fill: 'Fill',
  running: 'Running',
  'cross-stitch': 'Cross Stitch',
  zigzag: 'Zigzag',
};

The labels are short ("Satin", "Fill"). The Help page uses more descriptive names ("Satin Stitch (Tatami)", "Fill Stitch (Tatami)", "Running Stitch", "Cross-Stitch", "Zigzag Stitch").

A user in the editor:

Sees "Satin", "Fill", "Running" in the dropdown
Reads the Help page: "Satin Stitch (Tatami)", "Fill Stitch (Tatami)", "Running Stitch"
Confused: are these the same thing?

The fix is to use the same labels in both places.

Where

pathDefaults.ts: STITCH_LABELS (5 short labels)
Help.tsx: stitchTypes array (5 long labels)
Mismatch: per the snippet earlier, the names are different

Suggested fix shape

Single source of truth: define the labels in pathDefaults.ts:

export const STITCH_LABELS: Record<UserFacingStitchType, string> = {
  satin: 'Satin Stitch (Tatami)',
  fill: 'Fill Stitch (Tatami)',
  running: 'Running Stitch',
  'cross-stitch': 'Cross-Stitch',
  zigzag: 'Zigzag Stitch',
};

Update Help page: import STITCH_LABELS from pathDefaults.ts and use the same names.
UI: the editor's dropdown shows the long labels.
Compact mode (per #267): the editor's compact path list shows the short label ("Satin") for space reasons; the right panel shows the long label.

Severity

Low. The user can map. New users notice the mismatch.

Discovered by

Gap analysis (2026-10-02) of editor/help consistency.

#297 (open) — Stitch type preview. Same surface; the preview is one aspect.
The pathDefaults.ts labels (per #198) are the source.
The Help page is the documentation; the editor is the implementation. They should match.

## Finding `grep -rn 'STITCH_LABELS\|userFacingStitch' src/components/workspace/pathDefaults.ts` returns 5: ```ts export const STITCH_LABELS: Record<UserFacingStitchType, string> = { satin: 'Satin', fill: 'Fill', running: 'Running', 'cross-stitch': 'Cross Stitch', zigzag: 'Zigzag', }; ``` The labels are short ("Satin", "Fill"). The Help page uses more descriptive names ("Satin Stitch (Tatami)", "Fill Stitch (Tatami)", "Running Stitch", "Cross-Stitch", "Zigzag Stitch"). A user in the editor: - Sees "Satin", "Fill", "Running" in the dropdown - Reads the Help page: "Satin Stitch (Tatami)", "Fill Stitch (Tatami)", "Running Stitch" - Confused: are these the same thing? The fix is to use the same labels in both places. ## Where - pathDefaults.ts: `STITCH_LABELS` (5 short labels) - Help.tsx: `stitchTypes` array (5 long labels) - Mismatch: per the snippet earlier, the names are different ## Suggested fix shape 1. **Single source of truth**: define the labels in `pathDefaults.ts`: ```ts export const STITCH_LABELS: Record<UserFacingStitchType, string> = { satin: 'Satin Stitch (Tatami)', fill: 'Fill Stitch (Tatami)', running: 'Running Stitch', 'cross-stitch': 'Cross-Stitch', zigzag: 'Zigzag Stitch', }; ``` 2. **Update Help page**: import `STITCH_LABELS` from `pathDefaults.ts` and use the same names. 3. **UI**: the editor's dropdown shows the long labels. 4. **Compact mode** (per #267): the editor's compact path list shows the short label ("Satin") for space reasons; the right panel shows the long label. ## Severity Low. The user can map. New users notice the mismatch. ## Discovered by Gap analysis (2026-10-02) of editor/help consistency. ## Related - #297 (open) — Stitch type preview. Same surface; the preview is one aspect. - The pathDefaults.ts labels (per #198) are the source. - The Help page is the documentation; the editor is the implementation. They should match.

Mark added the

feature-request

triage-approved

labels

2026-10-04 03:55:36 +00:00

Mark referenced this issue

2026-10-04 03:58:37 +00:00

Editor's right panel's 'Stitch Type' dropdown doesn't have a search/filter — user with the 5 types can't find a specific one quickly (minor gap; the 5 types are short, but a search would help if the 'coming soon' types are added) #369

Mark referenced this issue

2026-10-04 04:01:01 +00:00

Editor's Path Properties has 'Stitch type' but the help text is not visible — user picking a stitch type doesn't see 'this is best for text and borders' until they read the help page #384

Mark referenced this issue from a commit

2026-10-05 08:52:42 +00:00

feat(#348): single source of truth for stitch labels

Mark referenced this issue from a commit

2026-10-05 08:52:42 +00:00

feat(#348): single source of truth for stitch labels

Mark commented

2026-10-05 08:55:39 +00:00

Author

Owner

Closed by commit 5185648 on main: feat(#348) single source of truth for stitch labels.

STITCH_LABELS lives in pathDefaults.ts; PathDefaultsSection, Help.tsx, and EditorRightPanel now render from it. The 4 coming-soon types (Motif/Bean/Applique/Stem) keep their inline names — they are not in USER_FACING_STITCH_TYPES yet (#158).

Help page (Help.test.tsx) and PathDefaultsSection subtitle (issue-275.test.tsx) assertions updated for the long labels.

Closed by commit 5185648 on main: feat(#348) single source of truth for stitch labels. STITCH_LABELS lives in pathDefaults.ts; PathDefaultsSection, Help.tsx, and EditorRightPanel now render from it. The 4 coming-soon types (Motif/Bean/Applique/Stem) keep their inline names — they are not in USER_FACING_STITCH_TYPES yet (#158). Help page (Help.test.tsx) and PathDefaultsSection subtitle (issue-275.test.tsx) assertions updated for the long labels.

Mark closed this issue

2026-10-05 08:56:27 +00:00